From ddb7fb7d7a977abef7f43f032e688b77a80a2726 Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Thu, 22 Jan 2026 11:33:45 +0800
Subject: [PATCH] style: simplify loop cards and update status icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Loop Cards:
- Remove left border accent from cards (cleaner look)
- Remove status-specific border-left colors
- Keep simple 1px border all around

Status Icons Updated:
- created: circle → square
- running: activity → zap (lightning bolt)
- paused: pause-circle → pause
- completed: check-circle-2 → check
- failed: x-circle → alert-triangle

Both renderLoopCard() and getStatusIcon() functions updated for consistency.
---
 .../dashboard-css/36-loop-monitor.css         |  8 -------
 .../dashboard-js/views/loop-monitor.js        | 22 +++++++++----------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/ccw/src/templates/dashboard-css/36-loop-monitor.css b/ccw/src/templates/dashboard-css/36-loop-monitor.css
index 6e8be9ca..0820afe2 100644
--- a/ccw/src/templates/dashboard-css/36-loop-monitor.css
+++ b/ccw/src/templates/dashboard-css/36-loop-monitor.css
@@ -332,7 +332,6 @@
   margin-bottom: 0.75rem;
   background: hsl(var(--card));
   border: 1px solid hsl(var(--border));
-  border-left: 4px solid hsl(var(--muted-foreground));
   border-radius: 0.625rem;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -351,13 +350,6 @@
   box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15);
 }
 
-/* Status border colors */
-.loop-card.status-created { border-left-color: hsl(var(--muted-foreground)); }
-.loop-card.status-running { border-left-color: hsl(var(--info)); }
-.loop-card.status-paused { border-left-color: hsl(var(--warning)); }
-.loop-card.status-completed { border-left-color: hsl(var(--success)); }
-.loop-card.status-failed { border-left-color: hsl(var(--destructive)); }
-
 .loop-card-header {
   display: flex;
   align-items: center;
diff --git a/ccw/src/templates/dashboard-js/views/loop-monitor.js b/ccw/src/templates/dashboard-js/views/loop-monitor.js
index 48427a8b..3f16622e 100644
--- a/ccw/src/templates/dashboard-js/views/loop-monitor.js
+++ b/ccw/src/templates/dashboard-js/views/loop-monitor.js
@@ -305,11 +305,11 @@ function renderLoopCard(loop) {
 
   // Lucide icons for each status
   const statusIcons = {
-    created: 'circle',
-    running: 'activity',
-    paused: 'pause-circle',
-    completed: 'check-circle-2',
-    failed: 'x-circle'
+    created: 'square',
+    running: 'zap',
+    paused: 'pause',
+    completed: 'check',
+    failed: 'alert-triangle'
   };
 
   // Check if this is a v2 loop (has title field) or v1 loop (has task_id field)
@@ -1318,13 +1318,13 @@ window.destroyLoopMonitor = function() {
 // Helper functions
 function getStatusIcon(status) {
   const icons = {
-    created: 'circle',
-    running: 'activity',
-    paused: 'pause-circle',
-    completed: 'check-circle-2',
-    failed: 'x-circle'
+    created: 'square',
+    running: 'zap',
+    paused: 'pause',
+    completed: 'check',
+    failed: 'alert-triangle'
   };
-  return icons[status] || 'circle';
+  return icons[status] || 'square';
 }
 
 function escapeHtml(text) {