From 62d5ce3f34567ab4f1f99b10887824ad7feaa0d6 Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Thu, 22 Jan 2026 11:20:16 +0800
Subject: [PATCH] style: unify Loop Monitor UI design with improved clarity

Major visual improvements across all components:

Left Sidebar (Loop Cards):
- Enhanced card styling with better shadows and borders (4px left border)
- Improved hover states with subtle elevation
- Better selected state with primary color highlight
- Increased padding and spacing (1rem padding, 0.75rem margin)
- Cleaner status indicator badges

Right Panel (Detail View):
- Added background containers to all detail sections with borders
- Improved section headers with bottom borders for clear separation
- Enhanced progress items with individual card styling
- Better visual hierarchy with consistent spacing (1rem gaps)
- Added info-box component for V2 loop information

Meta Information:
- Detail-meta items now have pill-style backgrounds
- Dashed separator line for better visual grouping
- Improved spacing and padding

CLI Steps:
- Enhanced step cards with better borders and hover states
- 3px left accent border for status indication
- Smooth transitions on hover

Typography & Colors:
- Unified border-radius: 0.625rem for sections, 0.5rem for items
- Consistent background: hsl(var(--muted) / 0.25) for sections
- Better border opacity: hsl(var(--border) / 0.5) and 0.6 variants
- Improved font weights and sizes for clarity

Overall result: Cleaner, more professional interface with better visual hierarchy and clarity.
---
 .../dashboard-css/36-loop-monitor.css         | 93 ++++++++++++++-----
 1 file changed, 71 insertions(+), 22 deletions(-)

diff --git a/ccw/src/templates/dashboard-css/36-loop-monitor.css b/ccw/src/templates/dashboard-css/36-loop-monitor.css
index 72c8da73..6e8be9ca 100644
--- a/ccw/src/templates/dashboard-css/36-loop-monitor.css
+++ b/ccw/src/templates/dashboard-css/36-loop-monitor.css
@@ -328,25 +328,27 @@
    ========================================== */
 
 .loop-card {
-  padding: 0.875rem 1rem;
-  margin-bottom: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 0.75rem;
   background: hsl(var(--card));
   border: 1px solid hsl(var(--border));
-  border-left: 3px solid hsl(var(--muted-foreground));
-  border-radius: 0.5rem;
+  border-left: 4px solid hsl(var(--muted-foreground));
+  border-radius: 0.625rem;
   cursor: pointer;
   transition: all 0.2s ease;
+  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.04);
 }
 
 .loop-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08);
-  border-color: hsl(var(--primary));
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
+  border-color: hsl(var(--primary) / 0.5);
 }
 
 .loop-card.selected {
-  background: hsl(var(--accent) / 0.5);
+  background: hsl(var(--primary) / 0.08);
   border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15);
 }
 
 /* Status border colors */
@@ -359,8 +361,8 @@
 .loop-card-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
+  gap: 0.625rem;
+  margin-bottom: 0.625rem;
 }
 
 .loop-status-indicator {
@@ -412,7 +414,7 @@
 .loop-card-body {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: 0.5rem;
 }
 
 .loop-description {
@@ -564,8 +566,9 @@
 
 .detail-info {
   padding: 1rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 0.5rem;
+  background: hsl(var(--muted) / 0.25);
+  border-radius: 0.625rem;
+  border: 1px solid hsl(var(--border) / 0.5);
 }
 
 .detail-title {
@@ -585,22 +588,32 @@
 .detail-meta {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 0.75rem 1.25rem;
   font-size: 0.75rem;
   color: hsl(var(--muted-foreground));
+  margin-top: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px dashed hsl(var(--border) / 0.6);
 }
 
 .detail-meta span {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  background: hsl(var(--muted) / 0.4);
+  border-radius: 0.375rem;
 }
 
 /* Detail Section */
 .detail-section {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 1rem;
+  padding: 1rem;
+  background: hsl(var(--muted) / 0.25);
+  border-radius: 0.625rem;
+  border: 1px solid hsl(var(--border) / 0.5);
 }
 
 .detail-section h4 {
@@ -611,6 +624,8 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid hsl(var(--border) / 0.5);
 }
 
 .progress-group {
@@ -622,13 +637,39 @@
 .progress-item {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: 0.5rem;
+  padding: 0.875rem;
+  background: hsl(var(--background));
+  border-radius: 0.5rem;
+  border: 1px solid hsl(var(--border) / 0.6);
 }
 
 .progress-item label {
   font-size: 0.75rem;
-  font-weight: 500;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* Info Box for V2 Loops */
+.info-box {
+  padding: 1rem;
+  background: hsl(var(--background));
+  border-radius: 0.5rem;
+  border: 1px solid hsl(var(--border) / 0.6);
+}
+
+.info-box p {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
   color: hsl(var(--muted-foreground));
+  line-height: 1.5;
+}
+
+.info-box .btn {
+  margin-top: 0;
 }
 
 /* ==========================================
@@ -646,10 +687,18 @@
 .step-item {
   display: flex;
   gap: 0.75rem;
-  padding: 0.75rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 0.375rem;
-  border-left: 2px solid hsl(var(--border));
+  padding: 0.875rem;
+  background: hsl(var(--background));
+  border-radius: 0.5rem;
+  border: 1px solid hsl(var(--border) / 0.6);
+  border-left: 3px solid hsl(var(--muted-foreground) / 0.5);
+  transition: all 0.2s ease;
+}
+
+.cli-step:hover,
+.step-item:hover {
+  background: hsl(var(--muted) / 0.15);
+  border-left-color: hsl(var(--primary) / 0.6);
 }
 
 .cli-step.current,