claude-code-kanban 4.4.0 → 4.6.0

package/public/style.css

@@ -18,16 +18,22 @@
   --accent-text: #f0a070;
   --accent-dim: rgba(232, 111, 51, 0.22);
   --accent-glow: rgba(232, 111, 51, 0.55);
+  --gold: #d9b667;
   --success: #3ecf8e;
   --success-dim: rgba(62, 207, 142, 0.18);
   --warning: #f0b429;
   --warning-dim: rgba(240, 180, 41, 0.18);
+  --danger: #ef5350;
+  --danger-dim: rgba(239, 83, 80, 0.18);
   --team: #60a5fa;
   --team-dim: rgba(96, 165, 250, 0.18);
   --plan: #86a886;
   --plan-dim: rgba(134, 168, 134, 0.18);
   --mono: 'IBM Plex Mono', monospace;
   --serif: 'Playfair Display', serif;
+  /* aliases: many rules reference --font-mono/--font-serif; keep them on-brand */
+  --font-mono: var(--mono);
+  --font-serif: var(--serif);
 }
 
 * {
@@ -85,7 +91,7 @@ body::before {
 .sidebar {
   width: var(--sidebar-width, 300px);
   background: var(--bg-surface);
-  border-right: 1px solid var(--border);
+  border-right: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
   box-shadow: 1px 0 12px rgba(0, 0, 0, 0.04);
   display: flex;
   flex-direction: column;
@@ -510,7 +516,7 @@ body::before {
   color: var(--text-secondary);
   margin-top: 2px;
   display: block;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+  font-family: var(--mono);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -525,6 +531,24 @@ body::before {
   text-overflow: ellipsis;
 }
 
+.session-goal {
+  font-size: 10px;
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  color: var(--warning);
+}
+.session-goal .session-goal-icon {
+  margin-right: 3px;
+  font-weight: 700;
+}
+.session-goal:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
 .session-item.plan-reveal {
   outline: 1.5px solid var(--plan);
   background: var(--plan-dim);
@@ -638,10 +662,10 @@ body::before {
   gap: 8px;
 }
 .detail-context-stats .stat-label {
-  color: var(--text-tertiary);
+  color: var(--text-secondary);
 }
 .detail-context-stats .stat-value {
-  color: var(--text-secondary);
+  color: var(--text-primary);
 }
 .detail-context-stats .stat-divider {
   grid-column: 1 / -1;
@@ -793,7 +817,7 @@ body::before {
 
 /* #region HEADER */
 .view-header {
-  padding: 16px 24px;
+  padding: 12px 24px;
   border-bottom: 1px solid var(--border);
   background: var(--bg-surface);
   display: flex;
@@ -803,9 +827,11 @@ body::before {
 
 .view-title {
   font-family: var(--serif);
-  font-size: 26px;
+  font-size: 20px;
   font-weight: 400;
   letter-spacing: -0.03em;
+  line-height: 1.15;
+  text-wrap: balance;
   display: flex;
   align-items: center;
   gap: 12px;
@@ -1000,12 +1026,12 @@ body::before {
 
 /* #region TASK_CARD */
 .task-card {
-  padding: 16px;
-  padding-left: 18px;
+  padding: 10px 12px;
+  padding-left: 14px;
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-left: 2px solid var(--text-muted);
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1049,18 +1075,18 @@ body::before {
 .task-card.selected,
 .task-card.selected:hover {
   background: var(--bg-elevated);
-  border-color: var(--team);
-  border-left: 2px solid var(--team);
+  border-color: var(--accent);
+  border-left: 2px solid var(--accent);
   box-shadow:
-    0 0 0 1px var(--team-dim),
-    0 0 12px var(--team-dim);
+    0 0 0 1px var(--accent-dim),
+    0 0 12px var(--accent-dim);
   opacity: 1;
 }
 
 .task-id {
   font-size: 11px;
   color: var(--text-muted);
-  margin-bottom: 6px;
+  margin-bottom: 4px;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1081,9 +1107,9 @@ body::before {
 }
 
 .task-title {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--text-primary);
-  line-height: 1.4;
+  line-height: 1.35;
 }
 
 .task-card.completed .task-title {
@@ -1094,15 +1120,15 @@ body::before {
 .task-session {
   font-size: 12px;
   color: var(--accent);
-  margin-top: 6px;
+  margin-top: 4px;
 }
 
 .task-active {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-top: 10px;
-  padding-top: 10px;
+  margin-top: 8px;
+  padding-top: 8px;
   border-top: 1px solid var(--border);
   font-size: 11px;
   font-weight: 500;
@@ -1129,7 +1155,7 @@ body::before {
   font-size: 12px;
   font-weight: 450;
   color: var(--text-tertiary);
-  margin-top: 8px;
+  margin-top: 6px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -1146,7 +1172,7 @@ body::before {
   width: var(--detail-panel-width, 540px);
   height: 100vh;
   background: var(--bg-surface);
-  border-left: 1px solid var(--border);
+  border-left: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
   box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
   display: none;
   flex-direction: column;
@@ -1423,13 +1449,10 @@ body::before {
   font-size: 12px;
 }
 
-.detail-desc pre code.hljs {
-  padding: 12px;
-  border-radius: 6px;
-}
-
+.detail-desc pre code.hljs,
 .detail-desc pre code {
-  background: var(--bg-elevated);
+  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
   padding: 12px;
   border-radius: 6px;
   display: block;
@@ -1437,9 +1460,10 @@ body::before {
 }
 
 .detail-desc code {
-  background: var(--bg-elevated);
-  padding: 2px 6px;
-  border-radius: 3px;
+  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
+  padding: 1px 5px;
+  border-radius: 4px;
   font-size: 0.9em;
 }
 
@@ -1570,18 +1594,19 @@ body::before {
   align-items: center;
   justify-content: center;
   font-size: 11px;
-  background: var(--bg-deep);
+  background: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: var(--team);
+  color: var(--text-muted);
   cursor: pointer;
   flex-shrink: 0;
   transition: all 0.15s ease;
 }
 
 .team-info-btn:hover {
-  background: var(--team-dim);
-  border-color: var(--team);
+  background: var(--bg-hover);
+  border-color: var(--border);
+  color: var(--text-secondary);
 }
 
 .plan-indicator {
@@ -1719,10 +1744,10 @@ body::before {
 }
 
 .loop-field-val code {
-  background: var(--bg);
+  background: var(--bg-deep);
   padding: 2px 6px;
   border-radius: 4px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--mono);
   font-size: 12px;
 }
 
@@ -1812,8 +1837,8 @@ body::before {
   font-size: 11px;
   font-weight: 500;
   border-radius: 999px;
-  border: 1px solid var(--border-color, rgba(127, 127, 127, 0.25));
-  background: var(--bg-secondary, rgba(127, 127, 127, 0.08));
+  border: 1px solid var(--border);
+  background: var(--bg-surface);
   color: var(--text-secondary);
   white-space: nowrap;
   line-height: 1.4;
@@ -1868,6 +1893,36 @@ body::before {
   border-top: 1px solid var(--border);
 }
 
+.info-goal-card {
+  margin: 12px 0;
+  padding: 10px 14px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--warning);
+  border-radius: 8px;
+}
+.info-goal-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+.info-goal-icon {
+  color: var(--warning);
+}
+.info-goal-text {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 .info-grid {
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -1954,8 +2009,8 @@ body::before {
   right: 0;
   width: var(--message-panel-width, 540px);
   height: 100vh;
-  background: var(--bg-surface);
-  border-left: 1px solid var(--border);
+  background: var(--bg-deep);
+  border-left: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
   box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
   display: none;
   flex-direction: column;
@@ -1999,22 +2054,39 @@ body::before {
   padding: 8px 10px;
   border-radius: 6px;
   font-size: 12px;
-  line-height: 1.5;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
+  line-height: 1.4;
+  background: var(--bg-surface);
+  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
 }
 .msg-item.msg-user {
-  border-left: 3px solid var(--text-muted);
+  border-left: 3px solid var(--gold);
+}
+.msg-queued-tag {
+  margin-left: 8px;
+  padding: 0 5px;
+  border-radius: 3px;
+  font-size: 9px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--gold);
+  background: color-mix(in srgb, var(--gold) 14%, transparent);
 }
 .msg-item.msg-assistant {
   border-left: 3px solid var(--accent);
 }
 .msg-item.msg-tool {
-  border-left: 3px solid var(--team);
+  border-left: 2px solid color-mix(in srgb, var(--text-muted) 45%, transparent);
   font-size: 11px;
   padding: 5px 10px;
   color: var(--text-secondary);
 }
+.msg-item.selected,
+.msg-item.selected:hover {
+  background: var(--bg-elevated);
+  box-shadow:
+    0 0 0 1px var(--accent),
+    0 0 12px var(--accent-dim);
+}
 .msg-icon {
   flex-shrink: 0;
   width: 16px;
@@ -2045,7 +2117,7 @@ body::before {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--hover);
+  background: var(--bg-hover);
   color: var(--text-secondary);
   font-size: 10px;
   font-weight: 600;
@@ -2165,7 +2237,7 @@ body::before {
 }
 .pinned-item-unpin:hover {
   opacity: 1;
-  color: var(--danger, #e55);
+  color: var(--danger);
 }
 .msg-pin-btn.pinned svg,
 #msg-detail-pin-btn.active svg,
@@ -2265,7 +2337,7 @@ body::before {
 }
 .agent-tab-copy {
   margin-left: auto;
-  background: var(--surface-hover);
+  background: var(--bg-hover);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 4px 6px;
@@ -2383,8 +2455,9 @@ body::before {
   font-size: 0.85rem;
 }
 .msg-detail-pre-tinted {
-  background: rgba(127, 127, 127, 0.15);
-  border-radius: 4px;
+  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
+  border-radius: 6px;
   padding: 8px 10px;
 }
 .expand-toggle-btn {
@@ -2498,15 +2571,30 @@ body::before {
 .msg-waiting-discard:hover {
   /* biome-ignore lint/complexity/noImportantStyles: override parent hover opacity */
   opacity: 1 !important;
-  color: var(--danger, #e54d4d);
+  color: var(--danger);
 }
 .msg-waiting .msg-text {
+  font-weight: 500;
+}
+.msg-waiting-pill {
+  display: inline-block;
+  padding: 1px 6px;
+  margin-right: 6px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--warning, #f5a623) 22%, transparent);
+  color: var(--warning, #f5a623);
+  font-size: 10px;
   font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  vertical-align: middle;
 }
-.msg-waiting-preview {
-  font-size: 11px;
-  opacity: 0.85;
-  margin-top: 2px;
+.msg-waiting-body {
+  font-size: 12px;
+  margin-top: 4px;
+  word-break: break-word;
+}
+.msg-waiting-body pre {
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -2603,7 +2691,7 @@ body::before {
   display: inline-block;
   padding: 2px 10px;
   border-radius: 4px;
-  background: var(--bg-secondary);
+  background: var(--bg-surface);
   color: var(--text-secondary);
   font-size: 0.8rem;
   font-weight: 600;
@@ -2643,7 +2731,7 @@ body::before {
   left: 50%;
   transform: translateX(-50%);
   background: var(--accent);
-  color: var(--bg);
+  color: var(--bg-deep);
   border: none;
   border-radius: 16px;
   padding: 6px 16px;
@@ -2659,7 +2747,7 @@ body::before {
 .msg-loading-more {
   text-align: center;
   padding: 8px;
-  color: var(--text-dim);
+  color: var(--text-muted);
   font-size: 12px;
 }
 .msg-limit-banner {
@@ -2720,18 +2808,28 @@ body::before {
   flex-direction: column;
   gap: 3px;
   padding: 8px 12px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
+  background: var(--bg-deep);
+  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
   border-radius: 8px;
   white-space: nowrap;
   min-width: 0;
   overflow: hidden;
-  transition: opacity 0.3s;
+  transition:
+    opacity 0.3s,
+    border-color 0.15s ease;
   cursor: pointer;
   position: relative;
 }
 .agent-card:hover {
+  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
+}
+.agent-card.selected,
+.agent-card.selected:hover {
+  background: var(--bg-elevated);
   border-color: var(--accent);
+  box-shadow:
+    0 0 0 1px var(--accent-dim),
+    0 0 12px var(--accent-dim);
 }
 .agent-card.fading {
   opacity: 0.4;
@@ -2804,7 +2902,7 @@ body::before {
 .agent-dismiss-btn {
   font-size: 12px;
   padding: 4px 10px;
-  background: var(--bg-tertiary);
+  background: var(--bg-elevated);
   color: var(--text-secondary);
   border: 1px solid var(--border);
 }
@@ -2920,10 +3018,10 @@ body::before {
 /* #region LIGHT_THEME */
 body.light {
   --bg-deep: #e8e6e3;
-  --bg-surface: #f4f3f1;
-  --bg-elevated: #dddbd8;
+  --bg-surface: #efede9;
+  --bg-elevated: #fbfaf9;
   --bg-hover: #d2d0cc;
-  --border: #a09b94;
+  --border: #cfcbc4;
   --text-primary: #0a0a0a;
   --text-secondary: #444444;
   --text-tertiary: #666666;
@@ -2931,10 +3029,13 @@ body.light {
   --accent-text: #b85a20;
   --accent-dim: rgba(232, 111, 51, 0.18);
   --accent-glow: rgba(232, 111, 51, 0.5);
+  --gold: #a8842f;
   --success: #1a8a5a;
   --success-dim: rgba(26, 138, 90, 0.15);
   --warning: #b07d0a;
   --warning-dim: rgba(176, 125, 10, 0.15);
+  --danger: #c0392b;
+  --danger-dim: rgba(192, 57, 43, 0.15);
   --plan: #5a7a5a;
   --plan-dim: rgba(90, 122, 90, 0.15);
 }
@@ -3063,7 +3164,9 @@ body.light .msg-assistant .msg-text {
   max-width: 860px;
   max-height: 90vh;
   padding: 24px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  box-shadow:
+    0 16px 44px rgba(0, 0, 0, 0.38),
+    0 4px 12px rgba(0, 0, 0, 0.2);
   overflow-y: auto;
 }
 
@@ -3146,7 +3249,7 @@ body.light .msg-assistant .msg-text {
 }
 
 .preview-fm .fm-v {
-  color: var(--text, inherit);
+  color: var(--text-primary);
   word-break: break-word;
   white-space: pre-wrap;
 }
@@ -3334,13 +3437,14 @@ select.form-input option:checked {
 }
 
 .btn-secondary {
-  background: var(--bg-elevated);
-  color: var(--text-primary);
+  background: transparent;
+  color: var(--text-secondary);
   border: 1px solid var(--border);
 }
 
 .btn-secondary:hover {
   background: var(--bg-hover);
+  color: var(--text-primary);
   border-color: var(--text-muted);
 }
 
@@ -3371,7 +3475,7 @@ select.form-input option:checked {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: var(--bg-secondary);
+  background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 10px 16px;
@@ -3386,7 +3490,7 @@ select.form-input option:checked {
 }
 
 .tool-stats-chip-val.failed {
-  color: var(--status-failed, #ef4444);
+  color: var(--danger);
 }
 
 .tool-stats-chip-lbl {
@@ -3427,14 +3531,14 @@ select.form-input option:checked {
 }
 
 .tool-stats-table tbody tr:nth-child(even) {
-  background: var(--bg-secondary);
+  background: var(--bg-surface);
 }
 
 .tool-stats-table tbody td {
   padding: 6px 10px;
   text-align: right;
   color: var(--text-primary);
-  border-bottom: 1px solid var(--border-subtle, var(--border));
+  border-bottom: 1px solid var(--border);
 }
 
 .tool-stats-table tbody td.tool-name {
@@ -3470,11 +3574,25 @@ select.form-input option:checked {
   font-weight: 600;
 }
 
+.badge-rejected {
+  display: inline-block;
+  background: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.tool-stats-chip-val.rejected {
+  color: #f59e0b;
+}
+
 .impact-bar-wrap {
   width: 48px;
   height: 6px;
   border-radius: 3px;
-  background: var(--bg-hover, var(--bg-secondary));
+  background: var(--bg-hover);
   flex-shrink: 0;
   overflow: hidden;
 }
@@ -3507,11 +3625,11 @@ select.form-input option:checked {
   max-height: 50vh;
   resize: vertical;
   padding: 12px;
-  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+  font-family: var(--mono);
   font-size: 13px;
   line-height: 1.6;
   color: var(--text-primary);
-  background: var(--bg-primary);
+  background: var(--bg-deep);
   border: 1px solid var(--border);
   border-radius: 8px;
   outline: none;
@@ -3765,20 +3883,23 @@ select.form-input option:checked {
 @media (prefers-color-scheme: light) {
   body:not(.dark-forced) {
     --bg-deep: #e8e6e3;
-    --bg-surface: #f4f3f1;
-    --bg-elevated: #dddbd8;
+    --bg-surface: #efede9;
+    --bg-elevated: #fbfaf9;
     --bg-hover: #d2d0cc;
-    --border: #a09b94;
+    --border: #cfcbc4;
     --text-primary: #0a0a0a;
     --text-secondary: #444444;
     --text-tertiary: #666666;
     --text-muted: #888888;
     --accent-dim: rgba(232, 111, 51, 0.18);
     --accent-glow: rgba(232, 111, 51, 0.5);
+    --gold: #a8842f;
     --success: #1a8a5a;
     --success-dim: rgba(26, 138, 90, 0.15);
     --warning: #b07d0a;
     --warning-dim: rgba(176, 125, 10, 0.15);
+    --danger: #c0392b;
+    --danger-dim: rgba(192, 57, 43, 0.15);
     --plan: #5a7a5a;
     --plan-dim: rgba(90, 122, 90, 0.15);
   }
@@ -3949,6 +4070,16 @@ pre.mermaid svg {
   line-height: 1;
 }
 
+.project-group-header .group-count-active {
+  color: var(--success);
+  font-weight: 500;
+}
+
+.project-group-header .group-count-sep {
+  margin: 0 1px;
+  opacity: 0.5;
+}
+
 .project-group-header .group-path-toggle {
   color: var(--text-muted);
   cursor: pointer;
@@ -4110,8 +4241,8 @@ pre.mermaid svg {
 .session-item.kb-selected:hover,
 .session-item.active.kb-selected {
   background: var(--bg-elevated);
-  border-color: var(--team);
-  box-shadow: 0 0 0 1px var(--team-dim);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent-dim);
 }
 
 .session-item.kb-selected::before {