claude-code-kanban 7.20.0 → 7.22.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);
@@ -62,6 +62,7 @@
   --font-serif: var(--serif);
   /* reading-surface scale for the message-detail and preview modals (Ctrl +/-/0) */
   --modal-zoom: 1;
+  --show-zoom: 1;
   --review-panel-w: 320px;
 }
 
@@ -290,11 +291,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 +1098,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 +1135,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 +1223,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 +1235,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 +1257,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 +1344,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 +1947,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 +2122,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 +2142,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 +2253,6 @@ body.booting .boot-splash {
 }
 
 .task-card.completed {
-  opacity: 0.85;
   border-left: 2px solid var(--success);
 }
 
@@ -2313,7 +2323,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 +2353,7 @@ body.booting .boot-splash {
 }
 
 .task-chip-accent {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .task-desc {
@@ -2554,7 +2564,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 +2606,7 @@ body.booting .boot-splash {
 }
 
 .detail-box.active strong {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .detail-desc {
@@ -2944,7 +2954,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 +3004,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 +3016,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 +3032,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 +3462,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 +3480,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 +3566,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 +3579,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 {
@@ -3964,6 +4003,161 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
   position: relative;
 }
 
+.terminal-pane {
+  --dock-rail-w: 0px;
+  --dock-panel-w: 0px;
+}
+
+.terminal-pane.dock-rail-on {
+  --dock-rail-w: 30px;
+}
+
+.terminal-pane.show-docked {
+  --dock-panel-w: var(--show-dock-w);
+}
+
+.terminal-pane.dock-rail-on,
+.terminal-pane.show-docked {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+}
+
+.terminal-pane.dock-rail-on .terminal-frame,
+.terminal-pane.show-docked .terminal-frame {
+  width: calc(100% - var(--dock-panel-w) - var(--dock-rail-w));
+}
+
+.terminal-pane.dock-rail-on .terminal-bar,
+.terminal-pane.show-docked .terminal-bar {
+  top: 8px;
+  right: calc(8px + var(--dock-panel-w) + var(--dock-rail-w));
+}
+
+.dock-rail {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  width: var(--dock-rail-w);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding-top: 6px;
+  border-left: 1px solid var(--border);
+  background: var(--bg-surface);
+}
+
+.dock-rail[hidden],
+.dock-addon[hidden],
+.dock-addon-frame[hidden] {
+  display: none;
+}
+
+.dock-rail-btn {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-tertiary);
+  font: 600 11px var(--font-mono);
+  cursor: pointer;
+}
+
+.dock-rail-btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.dock-rail-btn.on {
+  color: var(--accent);
+  background: var(--bg-deep);
+  box-shadow: inset 0 0 0 1px var(--border);
+}
+
+.dock-rail-btn svg {
+  width: 13px;
+  height: 13px;
+}
+
+.dock-rail-btn.dot::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.dock-addon {
+  position: absolute;
+  z-index: 2;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+}
+
+.dock-addon:focus-within,
+.dock-addon.focused {
+  border-color: var(--accent);
+  box-shadow:
+    0 0 0 1px var(--accent),
+    0 0 10px var(--accent-glow);
+}
+
+.dock-addon-head:focus {
+  outline: none;
+}
+
+/* Stops above the prompt rows, as the expanded show card does. */
+.dock-addon.expanded {
+  left: 0;
+  bottom: calc(7.2 * var(--show-term-font, 13px));
+  width: auto;
+  border-bottom: 1px solid var(--border);
+}
+
+.dock-addon.expanded .show-dock-edge {
+  display: none;
+}
+
+.dock-addon-body {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.dock-addon-frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: var(--bg-surface);
+}
+
+.dock-addon-view {
+  height: 100%;
+}
+
+.show-card.open.under-addon {
+  display: none;
+}
+
 .show-card {
   --show-inset: 8px;
   /* Six terminal rows (prompt, its rules, status line) at xterm's cell height of about 1.2 × font size. */
@@ -3971,7 +4165,7 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
   position: absolute;
   z-index: 2;
   top: var(--show-inset);
-  right: var(--show-inset);
+  right: calc(var(--show-inset) + var(--dock-rail-w));
   display: none;
   flex-direction: column;
   box-sizing: border-box;
@@ -4020,6 +4214,27 @@ body.light .show-card {
   max-height: none;
 }
 
+/* Off the bottom edge: the Windows 11 window frame covers the last pixel row, which hides the
+   bottom border there. */
+.dock-addon,
+.show-card.docked {
+  top: 0;
+  right: var(--dock-rail-w);
+  bottom: 2px;
+  width: var(--show-dock-drag, var(--show-dock-w));
+}
+
+.show-card.docked {
+  left: auto;
+  height: auto;
+  min-width: 0;
+  max-width: none;
+  max-height: none;
+  border-width: 0 0 1px 1px;
+  border-radius: 0;
+  box-shadow: none;
+}
+
 .show-card.collapsed {
   left: auto;
   bottom: auto;
@@ -4031,7 +4246,9 @@ body.light .show-card {
 .show-card.collapsed .show-body,
 .show-card.collapsed .show-review,
 .show-card.collapsed .show-grip,
-.show-card.expanded .show-grip {
+.show-card.expanded .show-grip,
+.show-card.docked .show-grip,
+.show-card:not(.docked) .show-dock-edge {
   display: none;
 }
 
@@ -4121,6 +4338,12 @@ body.light .show-card.focused {
     0 0 10px var(--accent-glow);
 }
 
+.dock-addon:focus-within,
+.dock-addon.focused,
+.show-card.docked.focused {
+  border-bottom-color: var(--border);
+}
+
 .show-actions {
   flex: none;
   display: flex;
@@ -4159,6 +4382,10 @@ body.light .show-card.focused {
   height: 14px;
 }
 
+.show-btn.active {
+  color: var(--accent);
+}
+
 .show-btn.remove:hover:not(:disabled) {
   color: var(--text-primary);
   background: var(--bg-elevated);
@@ -4233,6 +4460,7 @@ body.light .show-card.focused {
   padding: 0.8em 1.1em 1em;
   /* The same scale as an HTML card's frame (the zoom in showBridge). */
   font-size: clamp(12.5px, calc(9.7px + 0.58cqi), 17.5px);
+  zoom: var(--show-zoom, 1);
   line-height: 1.6;
   color: var(--text-secondary);
   overflow-wrap: anywhere;
@@ -4286,7 +4514,7 @@ body.light .show-card.focused {
 }
 
 .show-md a {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .show-md blockquote {
@@ -4421,6 +4649,22 @@ body.light .show-card.focused {
   height: 9px;
 }
 
+.show-dock-edge {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 5px;
+  cursor: col-resize;
+  touch-action: none;
+  transition: background 0.15s;
+}
+
+.show-dock-edge:hover,
+body.show-resizing .show-dock-edge {
+  background: var(--accent-dim);
+}
+
 body.show-resizing {
   user-select: none;
 }
@@ -4968,7 +5212,7 @@ body.show-resizing iframe {
 
 .pane-tool:disabled,
 .pane-split-btn:disabled {
-  opacity: 0.35;
+  opacity: 0.55;
   cursor: default;
   background: none;
 }
@@ -5470,6 +5714,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 +5889,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 +5934,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 +5948,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 +6076,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 {
@@ -5852,7 +6121,7 @@ body.show-resizing iframe {
   padding: 8px 14px;
   font-size: 11px;
   color: var(--text-secondary);
-  z-index: 10000;
+  z-index: 10020;
   opacity: 0;
   transform: translateY(10px);
   transition:
@@ -5900,7 +6169,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 +6200,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 +6318,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 +6516,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 +6559,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 +6719,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 +6834,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 +6861,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 +6977,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 +7377,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 +7395,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 +7998,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);
@@ -8067,6 +8336,12 @@ body.light .msg-assistant .msg-text {
   font-size: 11px;
   color: var(--text-muted);
   flex-shrink: 0;
+  cursor: copy;
+  align-self: flex-start;
+}
+
+#preview-modal-meta:hover {
+  color: var(--text-primary);
 }
 
 /* Rendered HTML pages need far more room than a markdown doc. */
@@ -8248,7 +8523,7 @@ body.light .msg-assistant .msg-text {
 }
 
 .preview-fm .fm-k {
-  color: var(--accent);
+  color: var(--accent-text);
   font-weight: 600;
 }
 
@@ -8429,8 +8704,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 +8745,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 +8771,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 +8897,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 +8909,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 +9446,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 +9469,7 @@ select.form-input option:checked {
 }
 
 .sp-state.active {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .sp-state.waiting {
@@ -9387,7 +9674,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 +9789,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 +10072,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 +10086,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 +10096,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 +10120,7 @@ select.form-input option:checked {
   height: 100%;
   border-radius: 3px;
   background: var(--accent);
-  min-width: 2px;
+  min-width: 4px;
 }
 
 .impact-pct {
@@ -10059,7 +10347,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 +10408,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 +10530,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 +10998,7 @@ pre.mermaid[data-mermaid-error]::before {
 }
 
 .session-group-header.sg-zen {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .sg-sub-label {