claude-code-workflow 6.3.28 → 6.3.30

package/ccw/src/templates/dashboard-css/32-issue-manager.css

@@ -429,14 +429,16 @@
   border: 1px solid hsl(var(--border));
   border-radius: 0.75rem;
   overflow: hidden;
+  margin-bottom: 1rem;
+  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.04);
 }
 
 .queue-group-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.75rem 1rem;
-  background: hsl(var(--muted) / 0.5);
+  padding: 0.875rem 1.25rem;
+  background: hsl(var(--muted) / 0.3);
   border-bottom: 1px solid hsl(var(--border));
 }
 
@@ -1256,6 +1258,68 @@
   color: hsl(var(--destructive));
 }
 
+/* Search Highlight */
+.search-highlight {
+  background: hsl(45 93% 47% / 0.3);
+  color: inherit;
+  padding: 0 2px;
+  border-radius: 2px;
+  font-weight: 500;
+}
+
+/* Search Suggestions Dropdown */
+.search-suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 0.25rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 50;
+  display: none;
+}
+
+.search-suggestions.show {
+  display: block;
+}
+
+.search-suggestion-item {
+  padding: 0.625rem 0.875rem;
+  cursor: pointer;
+  border-bottom: 1px solid hsl(var(--border) / 0.5);
+  transition: background 0.15s ease;
+}
+
+.search-suggestion-item:hover,
+.search-suggestion-item.selected {
+  background: hsl(var(--muted));
+}
+
+.search-suggestion-item:last-child {
+  border-bottom: none;
+}
+
+.suggestion-id {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: hsl(var(--muted-foreground));
+  margin-bottom: 0.125rem;
+}
+
+.suggestion-title {
+  font-size: 0.8125rem;
+  color: hsl(var(--foreground));
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* ==========================================
    CREATE BUTTON
    ========================================== */
@@ -1780,61 +1844,147 @@
 }
 
 .queue-items {
-  padding: 0.75rem;
+  padding: 1rem;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.75rem;
 }
 
+/* Parallel items use CSS Grid for uniform sizing */
 .queue-items.parallel {
-  flex-direction: row;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 0.75rem;
 }
 
 .queue-items.parallel .queue-item {
-  flex: 1;
-  min-width: 200px;
+  display: grid;
+  grid-template-areas:
+    "id id delete"
+    "issue issue issue"
+    "solution solution solution";
+  grid-template-columns: 1fr 1fr auto;
+  grid-template-rows: auto auto 1fr;
+  align-items: start;
+  padding: 0.75rem;
+  min-height: 90px;
+  gap: 0.25rem;
 }
 
-.queue-group-type {
+/* Card content layout */
+.queue-items.parallel .queue-item .queue-item-id {
+  grid-area: id;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: hsl(var(--foreground));
+}
+
+.queue-items.parallel .queue-item .queue-item-issue {
+  grid-area: issue;
+  font-size: 0.6875rem;
+  color: hsl(var(--muted-foreground));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.3;
+}
+
+.queue-items.parallel .queue-item .queue-item-solution {
+  grid-area: solution;
   display: flex;
   align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  align-self: end;
+}
+
+/* Hide extra elements in parallel view */
+.queue-items.parallel .queue-item .queue-item-files,
+.queue-items.parallel .queue-item .queue-item-priority,
+.queue-items.parallel .queue-item .queue-item-deps,
+.queue-items.parallel .queue-item .queue-item-task {
+  display: none;
+}
+
+/* Delete button positioned in corner */
+.queue-items.parallel .queue-item .queue-item-delete {
+  grid-area: delete;
+  justify-self: end;
+  padding: 0.125rem;
+  opacity: 0;
+}
+
+.queue-group-type {
+  display: inline-flex;
+  align-items: center;
   gap: 0.375rem;
   font-size: 0.875rem;
   font-weight: 600;
+  padding: 0.25rem 0.625rem;
+  border-radius: 0.375rem;
 }
 
 .queue-group-type.parallel {
-  color: hsl(142 71% 45%);
+  color: hsl(142 71% 40%);
+  background: hsl(142 71% 45% / 0.1);
 }
 
 .queue-group-type.sequential {
-  color: hsl(262 83% 58%);
+  color: hsl(262 83% 50%);
+  background: hsl(262 83% 58% / 0.1);
 }
 
-/* Queue Item Status Colors */
+/* Queue Item Status Colors - Enhanced visual distinction */
+
+/* Pending - Default subtle state */
+.queue-item.pending,
+.queue-item:not(.ready):not(.executing):not(.completed):not(.failed):not(.blocked) {
+  border-color: hsl(var(--border));
+  background: hsl(var(--card));
+}
+
+/* Ready - Blue tint, ready to execute */
 .queue-item.ready {
   border-color: hsl(199 89% 48%);
+  background: hsl(199 89% 48% / 0.06);
+  border-left: 3px solid hsl(199 89% 48%);
 }
 
+/* Executing - Amber with pulse animation */
 .queue-item.executing {
-  border-color: hsl(45 93% 47%);
-  background: hsl(45 93% 47% / 0.05);
+  border-color: hsl(38 92% 50%);
+  background: hsl(38 92% 50% / 0.08);
+  border-left: 3px solid hsl(38 92% 50%);
+  animation: executing-pulse 2s ease-in-out infinite;
+}
+
+@keyframes executing-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 hsl(38 92% 50% / 0.3); }
+  50% { box-shadow: 0 0 8px 2px hsl(38 92% 50% / 0.2); }
 }
 
+/* Completed - Green success state */
 .queue-item.completed {
-  border-color: hsl(var(--success));
-  background: hsl(var(--success) / 0.05);
+  border-color: hsl(142 71% 45%);
+  background: hsl(142 71% 45% / 0.06);
+  border-left: 3px solid hsl(142 71% 45%);
 }
 
+/* Failed - Red error state */
 .queue-item.failed {
-  border-color: hsl(var(--destructive));
-  background: hsl(var(--destructive) / 0.05);
+  border-color: hsl(0 84% 60%);
+  background: hsl(0 84% 60% / 0.06);
+  border-left: 3px solid hsl(0 84% 60%);
 }
 
+/* Blocked - Purple/violet blocked state */
 .queue-item.blocked {
   border-color: hsl(262 83% 58%);
-  opacity: 0.7;
+  background: hsl(262 83% 58% / 0.05);
+  border-left: 3px solid hsl(262 83% 58%);
+  opacity: 0.8;
 }
 
 /* Priority indicator */
@@ -2236,61 +2386,89 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0.75rem 1rem;
-  background: hsl(var(--muted) / 0.3);
+  padding: 1rem 1.25rem;
+  background: hsl(var(--card));
   border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
   text-align: center;
+  transition: all 0.2s ease;
+}
+
+.queue-stat-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.06);
 }
 
 .queue-stat-card .queue-stat-value {
-  font-size: 1.5rem;
+  font-size: 1.75rem;
   font-weight: 700;
   color: hsl(var(--foreground));
   line-height: 1.2;
 }
 
 .queue-stat-card .queue-stat-label {
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   color: hsl(var(--muted-foreground));
   text-transform: uppercase;
-  letter-spacing: 0.025em;
-  margin-top: 0.25rem;
+  letter-spacing: 0.05em;
+  margin-top: 0.375rem;
+  font-weight: 500;
 }
 
+/* Pending - Slate/Gray with subtle blue tint */
 .queue-stat-card.pending {
-  border-color: hsl(var(--muted-foreground) / 0.3);
+  border-color: hsl(215 20% 65% / 0.4);
+  background: linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(var(--card)) 100%);
 }
 
 .queue-stat-card.pending .queue-stat-value {
-  color: hsl(var(--muted-foreground));
+  color: hsl(215 20% 45%);
 }
 
+.queue-stat-card.pending .queue-stat-label {
+  color: hsl(215 20% 55%);
+}
+
+/* Executing - Amber/Orange - attention-grabbing */
 .queue-stat-card.executing {
-  border-color: hsl(45 93% 47% / 0.5);
-  background: hsl(45 93% 47% / 0.05);
+  border-color: hsl(38 92% 50% / 0.5);
+  background: linear-gradient(135deg, hsl(38 92% 95%) 0%, hsl(45 93% 97%) 100%);
 }
 
 .queue-stat-card.executing .queue-stat-value {
-  color: hsl(45 93% 47%);
+  color: hsl(38 92% 40%);
+}
+
+.queue-stat-card.executing .queue-stat-label {
+  color: hsl(38 70% 45%);
 }
 
+/* Completed - Green - success indicator */
 .queue-stat-card.completed {
-  border-color: hsl(var(--success) / 0.5);
-  background: hsl(var(--success) / 0.05);
+  border-color: hsl(142 71% 45% / 0.5);
+  background: linear-gradient(135deg, hsl(142 71% 95%) 0%, hsl(142 50% 97%) 100%);
 }
 
 .queue-stat-card.completed .queue-stat-value {
-  color: hsl(var(--success));
+  color: hsl(142 71% 35%);
+}
+
+.queue-stat-card.completed .queue-stat-label {
+  color: hsl(142 50% 40%);
 }
 
+/* Failed - Red - error indicator */
 .queue-stat-card.failed {
-  border-color: hsl(var(--destructive) / 0.5);
-  background: hsl(var(--destructive) / 0.05);
+  border-color: hsl(0 84% 60% / 0.5);
+  background: linear-gradient(135deg, hsl(0 84% 95%) 0%, hsl(0 70% 97%) 100%);
 }
 
 .queue-stat-card.failed .queue-stat-value {
-  color: hsl(var(--destructive));
+  color: hsl(0 84% 45%);
+}
+
+.queue-stat-card.failed .queue-stat-label {
+  color: hsl(0 60% 50%);
 }
 
 /* ==========================================
@@ -2874,3 +3052,223 @@
     gap: 0.25rem;
   }
 }
+
+/* ==========================================
+   MULTI-QUEUE CARDS VIEW
+   ========================================== */
+
+/* Queue Cards Header */
+.queue-cards-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+/* Queue Cards Grid */
+.queue-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+/* Individual Queue Card */
+.queue-card {
+  position: relative;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+  padding: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.queue-card:hover {
+  border-color: hsl(var(--primary) / 0.5);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08);
+}
+
+.queue-card.active {
+  border-color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.05);
+}
+
+.queue-card.merged {
+  opacity: 0.6;
+  border-style: dashed;
+}
+
+.queue-card.merged:hover {
+  opacity: 0.8;
+}
+
+/* Queue Card Header */
+.queue-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.queue-card-id {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.queue-card-badges {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Queue Card Stats - Progress Bar */
+.queue-card-stats {
+  margin-bottom: 0.75rem;
+}
+
+.queue-card-stats .progress-bar {
+  height: 6px;
+  background: hsl(var(--muted));
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+
+.queue-card-stats .progress-fill {
+  height: 100%;
+  background: hsl(var(--primary));
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.queue-card-stats .progress-fill.completed {
+  background: hsl(var(--success, 142 76% 36%));
+}
+
+.queue-card-progress {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: hsl(var(--foreground));
+}
+
+/* Queue Card Meta */
+.queue-card-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  margin-bottom: 0.75rem;
+}
+
+/* Queue Card Actions */
+.queue-card-actions {
+  display: flex;
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid hsl(var(--border));
+}
+
+/* Queue Detail Header */
+.queue-detail-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.queue-detail-title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.queue-detail-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* Queue Item Delete Button */
+.queue-item-delete {
+  margin-left: auto;
+  padding: 0.25rem;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  color: hsl(var(--muted-foreground));
+  border-radius: 0.25rem;
+}
+
+.queue-item:hover .queue-item-delete {
+  opacity: 1;
+}
+
+.queue-item-delete:hover {
+  color: hsl(var(--destructive, 0 84% 60%));
+  background: hsl(var(--destructive, 0 84% 60%) / 0.1);
+}
+
+/* Queue Error State */
+.queue-error {
+  padding: 2rem;
+  text-align: center;
+}
+
+/* Responsive adjustments for queue cards */
+@media (max-width: 640px) {
+  .queue-cards-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .queue-cards-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .queue-detail-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .queue-detail-title {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+}
+
+/* ==========================================
+   WARNING BUTTON STYLE
+   ========================================== */
+
+.btn-warning,
+.btn-secondary.btn-warning {
+  color: hsl(38 92% 40%);
+  border-color: hsl(38 92% 50% / 0.5);
+  background: hsl(38 92% 50% / 0.08);
+}
+
+.btn-warning:hover,
+.btn-secondary.btn-warning:hover {
+  background: hsl(38 92% 50% / 0.15);
+  border-color: hsl(38 92% 50%);
+}
+
+/* Active queue badge enhancement */
+.queue-active-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: hsl(142 71% 35%);
+  background: hsl(142 71% 45% / 0.15);
+  border: 1px solid hsl(142 71% 45% / 0.3);
+  border-radius: 9999px;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}