claude-code-kanban 7.20.0 → 7.21.0

package/public/style.css

@@ -13,7 +13,7 @@
   --text-primary: #f0f1f3;
   --text-secondary: #c2c4c9;
   --text-tertiary: #9a9da5;
-  --text-muted: #7d808a;
+  --text-muted: #868994;
   --accent: #e86f33;
   --accent-text: #f0a070;
   --accent-dim: rgba(232, 111, 51, 0.25);
@@ -290,11 +290,11 @@ body::before {
   padding: 4px 10px;
   font: inherit;
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 600;
   letter-spacing: 0.04em;
-  color: var(--text-secondary);
+  color: var(--accent-text);
   background: transparent;
-  border: 1px dashed color-mix(in srgb, var(--text-secondary) 40%, var(--border));
+  border: 1px solid var(--accent-text);
   border-radius: 999px;
   white-space: nowrap;
   cursor: pointer;
@@ -1097,7 +1097,7 @@ body.booting .boot-splash {
 }
 
 .session-item.warm .session-time {
-  color: var(--success);
+  color: color-mix(in srgb, var(--success) 70%, var(--text-primary));
 }
 
 .session-item.warm .session-time::before {
@@ -1134,13 +1134,14 @@ body.booting .boot-splash {
   background: var(--warning);
 }
 
+/* Stale rows render at 0.85 opacity, which takes --text-muted below 4.5:1. */
 .session-item.stale .session-time {
-  color: var(--text-muted);
+  color: var(--text-tertiary);
 }
 
 .session-item.stale .session-time::before {
   background: transparent;
-  border: 1px solid var(--text-muted);
+  border: 1px solid var(--text-tertiary);
 }
 
 .session-name {
@@ -1221,6 +1222,9 @@ body.booting .boot-splash {
 }
 
 .session-secondary {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
   font-family: var(--sans);
   font-size: 12px;
   font-weight: 450;
@@ -1230,12 +1234,20 @@ body.booting .boot-splash {
   overflow: hidden;
 }
 
+.session-project {
+  flex: none;
+  max-width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* inline-block, not inline-flex: a flex box ignores text-overflow, so a long worktree name
    ran past the card edge instead of truncating. */
 .wt-chip {
   display: inline-block;
+  flex: 0 1 auto;
+  align-self: center;
   max-width: 60%;
-  margin-left: 5px;
   padding: 0 5px;
   border: 1px solid var(--accent-dim);
   border-radius: 999px;
@@ -1244,17 +1256,15 @@ body.booting .boot-splash {
   font-family: var(--mono);
   font-size: 9px;
   line-height: 14px;
-  vertical-align: middle;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .session-branch {
+  min-width: 0;
   font-size: 10px;
   color: var(--text-secondary);
-  margin-top: var(--card-gap-tight);
-  display: block;
   font-family: var(--mono);
   white-space: nowrap;
   overflow: hidden;
@@ -1333,7 +1343,7 @@ body.booting .boot-splash {
   justify-content: space-between;
   gap: 6px;
   margin-top: 4px;
-  font-size: 10px;
+  font-size: 11px;
   font-family: var(--font-mono);
   color: var(--text-tertiary);
   white-space: nowrap;
@@ -1936,7 +1946,7 @@ body.booting .boot-splash {
 .view-progress .progress-text {
   font-size: 14px;
   font-weight: 500;
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .icon-btn {
@@ -2111,7 +2121,7 @@ body.booting .boot-splash {
   color: var(--text-tertiary);
 }
 .column-title.in-progress {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 .column-title.completed {
   color: var(--success);
@@ -2131,7 +2141,7 @@ body.booting .boot-splash {
 
 .column-count.in-progress {
   background: var(--accent-dim);
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .column-count.completed {
@@ -2242,7 +2252,6 @@ body.booting .boot-splash {
 }
 
 .task-card.completed {
-  opacity: 0.85;
   border-left: 2px solid var(--success);
 }
 
@@ -2313,7 +2322,7 @@ body.booting .boot-splash {
   border-top: 1px solid var(--border);
   font-size: 11px;
   font-weight: 500;
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .task-active::before {
@@ -2343,7 +2352,7 @@ body.booting .boot-splash {
 }
 
 .task-chip-accent {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .task-desc {
@@ -2554,7 +2563,7 @@ body.booting .boot-splash {
 
 .detail-status.in_progress {
   background: var(--accent-dim);
-  color: var(--accent);
+  color: var(--accent-text);
   border: 1px solid var(--accent);
 }
 
@@ -2596,7 +2605,7 @@ body.booting .boot-splash {
 }
 
 .detail-box.active strong {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .detail-desc {
@@ -2944,7 +2953,7 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--accent);
+  color: var(--accent-text);
   margin: 0 0 8px 0;
 }
 
@@ -2994,7 +3003,7 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
 .shared-tasklist-badge {
   display: inline-flex;
   align-items: center;
-  color: var(--accent);
+  color: var(--accent-text);
   flex-shrink: 0;
 }
 
@@ -3006,6 +3015,7 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
 .loop-badge,
 .workflow-badge,
 .dispatched-badge,
+.fork-badge,
 .terminal-badge {
   width: 18px;
   height: 18px;
@@ -3021,6 +3031,17 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
   transition: all 0.15s ease;
 }
 
+/* A 22×24px hit area around each 18px icon without growing the card. The 5px row gap
+   keeps neighbouring areas from overlapping. */
+.session-indicators > [onclick] {
+  position: relative;
+}
+.session-indicators > [onclick]::after {
+  content: '';
+  position: absolute;
+  inset: -3px -2px;
+}
+
 .team-info-btn:hover,
 .loop-badge:hover,
 .workflow-badge:hover {
@@ -3440,7 +3461,7 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
 
 .team-member-card .member-tasks {
   font-size: 11px;
-  color: var(--accent);
+  color: var(--accent-text);
   margin-top: 4px;
 }
 
@@ -3458,6 +3479,18 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
   min-height: 0;
   padding-right: 8px;
 }
+/* Scroll shadows: the covers scroll with the content (local), the shadows stay at the edges,
+   so a shadow shows only while more content is above or below. */
+.modal-help .modal-body {
+  padding-bottom: 16px;
+  --scroll-shadow: color-mix(in srgb, var(--text-primary) 30%, transparent);
+  background:
+    linear-gradient(var(--bg-surface) 30%, transparent) center top / 100% 40px no-repeat local,
+    linear-gradient(transparent, var(--bg-surface) 70%) center bottom / 100% 40px no-repeat local,
+    radial-gradient(farthest-side at 50% 0, var(--scroll-shadow), transparent) center top / 100% 18px no-repeat scroll,
+    radial-gradient(farthest-side at 50% 100%, var(--scroll-shadow), transparent) center bottom / 100% 18px no-repeat
+    scroll;
+}
 #team-modal .modal-footer {
   flex-shrink: 0;
 }
@@ -3532,6 +3565,10 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
   border-top: 1px solid var(--border);
 }
 
+.team-modal-meta:first-child {
+  margin-top: 0;
+}
+
 .info-grid {
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -3541,10 +3578,11 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
 }
 /* Shared hover-reveal icon-button group, also used by the linked-doc rows. Each host
    supplies its own reveal trigger — the base only sets the resting opacity. */
+/* 0.55 is the lowest opacity that keeps the icons at 3:1 in light and dark. */
 .row-actions {
   display: flex;
   gap: 4px;
-  opacity: 0.3;
+  opacity: 0.55;
   transition: opacity 0.15s ease;
 }
 .info-grid:hover .row-actions {
@@ -4286,7 +4324,7 @@ body.light .show-card.focused {
 }
 
 .show-md a {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .show-md blockquote {
@@ -4968,7 +5006,7 @@ body.show-resizing iframe {
 
 .pane-tool:disabled,
 .pane-split-btn:disabled {
-  opacity: 0.35;
+  opacity: 0.55;
   cursor: default;
   background: none;
 }
@@ -5470,6 +5508,27 @@ body.show-resizing iframe {
 .message-panel-content > * + * {
   margin-top: 8px;
 }
+/* Under the pinned block, rows scrolled past the top fade out instead of showing as a cut row.
+   The fade grows over the first 64px of scroll, so an unscrolled list shows its first row whole.
+   Its top 24px are fully clear, which covers the meta line of a cut row. */
+@property --msg-top-fade {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+@keyframes msg-top-fade {
+  to {
+    --msg-top-fade: 64px;
+  }
+}
+@supports (animation-timeline: scroll()) {
+  #message-panel-pinned:not(:empty) + .message-panel-content {
+    mask-image: linear-gradient(to bottom, transparent calc(var(--msg-top-fade) * 0.375), #000 var(--msg-top-fade));
+    animation: msg-top-fade linear both;
+    animation-timeline: scroll(self);
+    animation-range: 0 64px;
+  }
+}
 .msg-item {
   display: flex;
   gap: 8px;
@@ -5624,7 +5683,7 @@ body.show-resizing iframe {
   font-size: 9px;
 }
 .msg-agent-link {
-  color: var(--accent);
+  color: var(--accent-text);
   font-size: 0.85rem;
   margin-left: 4px;
   opacity: 0.7;
@@ -5669,6 +5728,10 @@ body.show-resizing iframe {
 #message-panel-pinned {
   flex-shrink: 0;
   padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  box-shadow: 0 4px 6px -4px color-mix(in srgb, var(--text-primary) 25%, transparent);
+  position: relative;
+  z-index: 1;
 }
 .pinned-section {
   border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
@@ -5679,7 +5742,7 @@ body.show-resizing iframe {
   padding: 6px 10px;
   font-size: 11px;
   font-weight: 600;
-  color: var(--accent);
+  color: var(--accent-text);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -5807,7 +5870,7 @@ body.show-resizing iframe {
   border-bottom-color: var(--text-muted);
 }
 .agent-tab.active {
-  color: var(--accent);
+  color: var(--accent-text);
   border-bottom-color: var(--accent);
 }
 .agent-tab-panel {
@@ -5900,7 +5963,7 @@ body.show-resizing iframe {
 }
 .toast.toast-info {
   border-color: var(--accent);
-  color: var(--accent);
+  color: var(--accent-text);
 }
 .rendered-md h1,
 .rendered-md h2,
@@ -5931,7 +5994,7 @@ body.show-resizing iframe {
   list-style: none;
 }
 .rendered-md a {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 .rendered-md pre {
   margin: 0.6em 0;
@@ -6049,7 +6112,7 @@ body.show-resizing iframe {
 .expand-toggle-btn {
   background: none;
   border: none;
-  color: var(--accent);
+  color: var(--accent-text);
   cursor: pointer;
   text-decoration: underline;
   margin-left: 6px;
@@ -6247,12 +6310,15 @@ body.show-resizing iframe {
   cursor: pointer;
   transition: all 0.15s ease;
 }
+/* --accent-text is tuned to 4.5:1 on --bg-surface, so the pair holds as fill and text in every theme. */
 .waiting-btn-allow {
-  color: var(--accent);
-  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+  color: var(--bg-surface);
+  background: var(--accent-text);
+  border-color: var(--accent-text);
+  font-weight: 600;
 }
 .waiting-btn-allow:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  background: color-mix(in srgb, var(--accent-text) 85%, var(--text-primary));
 }
 .waiting-btn-deny {
   color: var(--text-secondary);
@@ -6287,7 +6353,7 @@ body.show-resizing iframe {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  color: var(--accent);
+  color: var(--accent-text);
   margin-bottom: 4px;
 }
 .waiting-question-text {
@@ -6447,7 +6513,7 @@ body.show-resizing iframe {
 }
 .waiting-option.selected .waiting-option-key {
   border-color: var(--accent);
-  color: var(--accent);
+  color: var(--accent-text);
 }
 .waiting-qtabs {
   display: flex;
@@ -6562,12 +6628,12 @@ body.show-resizing iframe {
 .perm-wait {
   font-family: var(--mono);
   font-size: 11px;
-  color: var(--text-muted);
+  color: var(--text-tertiary);
 }
 .perm-label {
-  font-size: 10px;
+  font-size: 11px;
   letter-spacing: 0.3px;
-  color: var(--text-muted);
+  color: var(--text-tertiary);
   font-family: var(--mono);
   word-break: break-all;
 }
@@ -6589,7 +6655,7 @@ body.show-resizing iframe {
 .perm-cwd {
   font-family: var(--mono);
   font-size: 11px;
-  color: var(--text-muted);
+  color: var(--text-tertiary);
 }
 .perm-diff {
   border: 1px solid var(--border);
@@ -6705,8 +6771,8 @@ body.show-resizing iframe {
   color: var(--text-muted);
 }
 .msg-time {
-  font-size: 10px;
-  color: var(--text-muted);
+  font-size: 11px;
+  color: var(--text-tertiary);
   margin-top: 4px;
 }
 .msg-empty {
@@ -7105,13 +7171,6 @@ body.show-resizing iframe {
   color: var(--text-primary);
 }
 
-.agent-dismiss-btn {
-  font-size: 12px;
-  padding: 4px 10px;
-  background: var(--bg-elevated);
-  color: var(--text-secondary);
-  border: 1px solid var(--border);
-}
 .agent-badge {
   display: inline-flex;
   align-items: center;
@@ -7130,6 +7189,10 @@ body.show-resizing iframe {
 .dispatched-badge:not([onclick]) {
   cursor: default;
 }
+.fork-badge {
+  cursor: pointer;
+}
+.fork-badge:hover,
 .dispatched-badge[onclick]:hover {
   color: var(--accent, var(--text-primary));
 }
@@ -7729,7 +7792,7 @@ body.light {
   --text-primary: #0a0a0a;
   --text-secondary: #2c2c2c;
   --text-tertiary: #565656;
-  --text-muted: #767676;
+  --text-muted: #666666;
   --accent-text: #a0501c;
   --accent-dim: rgba(184, 90, 32, 0.18);
   --accent-glow: rgba(232, 111, 51, 0.5);
@@ -8248,7 +8311,7 @@ body.light .msg-assistant .msg-text {
 }
 
 .preview-fm .fm-k {
-  color: var(--accent);
+  color: var(--accent-text);
   font-weight: 600;
 }
 
@@ -8429,8 +8492,8 @@ body.light .msg-assistant .msg-text {
    small type, and scrolls its body (rule shared with #team-modal) instead of growing past
    the viewport cap. */
 .modal-help {
-  max-width: 900px;
-  height: min(700px, 90vh);
+  max-width: 1080px;
+  height: min(800px, 90vh);
   padding: 16px 20px 20px;
   display: flex;
   flex-direction: column;
@@ -8470,8 +8533,8 @@ body.light .msg-assistant .msg-text {
 .shortcuts {
   margin: 0;
   display: grid;
-  grid-template-columns: max-content 1fr 28px max-content 1fr;
-  column-gap: 14px;
+  grid-template-columns: fit-content(160px) 1fr 32px fit-content(160px) 1fr;
+  column-gap: 16px;
 }
 
 .shortcuts dt.sc-l {
@@ -8496,6 +8559,7 @@ body.light .msg-assistant .msg-text {
 .shortcuts dt {
   margin: 0;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   align-self: center;
   gap: 4px;
@@ -8621,9 +8685,10 @@ body.light .msg-assistant .msg-text {
 .modal-close {
   width: 32px;
   height: 32px;
-  border: none;
+  flex-shrink: 0;
+  border: 1px solid var(--border);
   background: none;
-  color: var(--text-secondary);
+  color: var(--text-tertiary);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -8632,9 +8697,15 @@ body.light .msg-assistant .msg-text {
   transition: all 0.15s ease;
 }
 
+.modal-close svg {
+  width: 16px;
+  height: 16px;
+}
+
 .modal-close:hover {
   background: var(--bg-hover);
   color: var(--text-primary);
+  border-color: var(--text-muted);
 }
 
 .modal-body {
@@ -9163,6 +9234,10 @@ select.form-input option:checked {
   background: var(--bg-hover);
 }
 
+.sp-row:hover .sp-branch {
+  background: var(--bg-elevated);
+}
+
 .sp-row.selected {
   background: var(--bg-elevated);
   border-color: var(--accent);
@@ -9182,7 +9257,7 @@ select.form-input option:checked {
 }
 
 .sp-state.active {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .sp-state.waiting {
@@ -9387,7 +9462,7 @@ select.form-input option:checked {
 }
 
 .ns-notched legend {
-  margin: 0 8px 0 auto;
+  margin: 0 auto 0 8px;
   padding: 0 4px;
   font-size: 11px;
   font-weight: 500;
@@ -9502,7 +9577,7 @@ select.form-input option:checked {
   margin-top: 4px;
   font-family: var(--mono);
   font-size: 11px;
-  color: var(--text-muted);
+  color: var(--text-tertiary);
 }
 
 .ns-body textarea.form-input {
@@ -9785,10 +9860,11 @@ select.form-input option:checked {
   gap: 6px;
 }
 
+/* The pure status colors on their own 15% tint measure 2.7–3.8:1 in light. Mixing in the text color keeps the hue and passes 4.5:1. */
 .badge-success {
   display: inline-block;
   background: color-mix(in srgb, var(--success) 15%, transparent);
-  color: var(--success);
+  color: color-mix(in srgb, var(--success) 65%, var(--text-primary));
   border-radius: 4px;
   padding: 1px 6px;
   font-size: 12px;
@@ -9798,7 +9874,7 @@ select.form-input option:checked {
 .badge-failed {
   display: inline-block;
   background: color-mix(in srgb, var(--danger) 15%, transparent);
-  color: var(--danger);
+  color: color-mix(in srgb, var(--danger) 65%, var(--text-primary));
   border-radius: 4px;
   padding: 1px 6px;
   font-size: 12px;
@@ -9808,7 +9884,7 @@ select.form-input option:checked {
 .badge-rejected {
   display: inline-block;
   background: color-mix(in srgb, var(--warning) 15%, transparent);
-  color: var(--warning);
+  color: color-mix(in srgb, var(--warning) 65%, var(--text-primary));
   border-radius: 4px;
   padding: 1px 6px;
   font-size: 12px;
@@ -9832,7 +9908,7 @@ select.form-input option:checked {
   height: 100%;
   border-radius: 3px;
   background: var(--accent);
-  min-width: 2px;
+  min-width: 4px;
 }
 
 .impact-pct {
@@ -10059,7 +10135,7 @@ select.form-input option:checked {
 
 .storage-tab.active,
 .help-tab.active {
-  color: var(--accent);
+  color: var(--accent-text);
   border-bottom-color: var(--accent);
 }
 
@@ -10120,7 +10196,7 @@ select.form-input option:checked {
 
 .storage-item-badge.pinned {
   background: color-mix(in srgb, var(--accent) 15%, transparent);
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .storage-item-badge.sticky {
@@ -10242,7 +10318,7 @@ select.form-input option:checked {
     --text-primary: #0a0a0a;
     --text-secondary: #2c2c2c;
     --text-tertiary: #565656;
-    --text-muted: #767676;
+    --text-muted: #666666;
     --accent-text: #a0501c;
     --accent-dim: rgba(184, 90, 32, 0.18);
     --accent-glow: rgba(232, 111, 51, 0.5);
@@ -10710,7 +10786,7 @@ pre.mermaid[data-mermaid-error]::before {
 }
 
 .session-group-header.sg-zen {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .sg-sub-label {