claude-code-kanban 7.6.1 → 7.8.0

package/public/style.css

@@ -1427,6 +1427,135 @@ body.booting .boot-splash {
   gap: 6px;
 }
 
+/* #region KANBOT */
+.sidebar-footer .footer-kanbot {
+  display: inline-flex;
+  padding: 2px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  cursor: pointer;
+  opacity: 0.85;
+}
+
+.sidebar-footer .footer-kanbot:hover {
+  background: var(--bg-hover);
+  opacity: 1;
+}
+
+.kanbot-popover {
+  display: none;
+  position: fixed;
+  left: 12px;
+  bottom: 40px;
+  z-index: 900;
+  flex-direction: column;
+  width: min(460px, calc(100vw - 24px));
+  height: min(560px, calc(100vh - 60px));
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg-deep);
+  box-shadow: 0 12px 40px rgb(0 0 0 / 35%);
+  overflow: hidden;
+}
+
+.kanbot-popover.visible {
+  display: flex;
+}
+
+.kanbot-popover.expanded {
+  left: 50%;
+  top: 50%;
+  bottom: auto;
+  width: min(1200px, calc(100vw - 48px));
+  height: calc(100vh - 96px);
+  transform: translate(-50%, -50%);
+}
+
+.kanbot-popover.docked {
+  left: auto;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: min(var(--kanbot-width, 540px), 100vw);
+  height: auto;
+  border-width: 0 0 0 1px;
+  border-radius: 0;
+}
+
+.kanbot-resize {
+  display: none;
+}
+
+.kanbot-popover.docked .kanbot-resize {
+  display: block;
+}
+
+.kanbot-popover.resizing .kanbot-frame {
+  pointer-events: none;
+}
+
+.kanbot-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px 6px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-elevated);
+  font-size: 12px;
+}
+
+.kanbot-status {
+  flex: 1;
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.kanbot-dock,
+.kanbot-expand,
+.kanbot-collapse,
+.kanbot-close {
+  padding: 0 6px;
+  border: none;
+  background: none;
+  color: var(--text-secondary);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.kanbot-dock,
+.kanbot-expand {
+  display: inline-flex;
+  align-items: center;
+  align-self: stretch;
+}
+
+.kanbot-dock svg,
+.kanbot-expand svg {
+  width: 13px;
+  height: 13px;
+}
+
+.kanbot-dock.active {
+  color: var(--accent);
+}
+
+.kanbot-body {
+  flex: 1;
+  min-height: 0;
+  padding: 4px 0 0 6px;
+}
+
+.kanbot-frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+/* #endregion */
+
 .sidebar-footer .footer-plugin-warning {
   padding: 0;
   border: none;
@@ -1727,9 +1856,9 @@ body.booting .boot-splash {
 
 .icon-btn-danger:hover,
 .icon-btn-danger:focus-visible {
-  background: color-mix(in srgb, var(--danger) 12%, transparent);
-  color: color-mix(in srgb, var(--danger) 80%, black);
-  border-color: var(--danger);
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  border-color: var(--border);
 }
 
 /* theme picker: palette icon button + custom popover with per-theme swatches
@@ -2005,6 +2134,12 @@ body.booting .boot-splash {
   border-left-color: var(--success);
 }
 
+.task-card.dim,
+.task-card.dim:hover {
+  opacity: 0.55;
+  border-left-color: var(--border);
+}
+
 .task-card.blocked {
   border-left-style: dashed;
 }
@@ -2080,6 +2215,21 @@ body.booting .boot-splash {
   white-space: nowrap;
 }
 
+.task-chip {
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.task-chip-warn {
+  color: var(--warning);
+}
+
+.task-chip-accent {
+  color: var(--accent);
+}
+
 .task-desc {
   font-size: 11.5px;
   font-weight: 400;
@@ -2113,6 +2263,29 @@ body.booting .boot-splash {
 .detail-panel.visible {
   display: flex;
 }
+
+.detail-panel.expanded {
+  top: 50%;
+  left: 50%;
+  right: auto;
+  width: min(1200px, calc(100vw - 48px));
+  height: auto;
+  max-height: calc(100vh - 96px);
+  transform: translate(-50%, -50%);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 12px 40px rgb(0 0 0 / 35%);
+  z-index: 900;
+}
+
+.detail-panel.expanded .panel-resize-handle {
+  display: none;
+}
+
+.detail-expand svg {
+  width: 15px;
+  height: 15px;
+}
 .detail-panel.resizing,
 .message-panel.resizing {
   transition: none;
@@ -3540,9 +3713,8 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
 }
 
 .terminal-manager-end.btn-secondary:hover {
-  color: var(--danger);
-  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
-  background: color-mix(in srgb, var(--danger) 8%, transparent);
+  color: var(--text-primary);
+  background: var(--bg-elevated);
 }
 
 .terminal-manager-footer {
@@ -3871,8 +4043,8 @@ body.light .show-card.focused {
 }
 
 .show-btn.remove:hover:not(:disabled) {
-  color: var(--danger);
-  background: var(--danger-dim);
+  color: var(--text-primary);
+  background: var(--bg-elevated);
 }
 
 .show-ticks {
@@ -4086,19 +4258,6 @@ body.light .show-card.focused {
   background: color-mix(in srgb, var(--danger) 10%, transparent);
 }
 
-.show-md pre.mermaid {
-  min-height: 40px;
-  margin: 0.6em 0;
-  overflow-x: auto;
-  text-align: center;
-  background: transparent;
-  color: transparent;
-}
-
-.show-md pre.mermaid[data-processed] {
-  color: inherit;
-}
-
 .show-md pre.mermaid svg {
   max-width: 100%;
   height: auto;
@@ -4741,6 +4900,10 @@ body.show-resizing iframe {
   word-break: break-word;
 }
 
+.pane-doc-body:focus {
+  outline: none;
+}
+
 .pane-msg-meta {
   margin-bottom: 12px;
   font-size: 11px;
@@ -5197,7 +5360,7 @@ body.show-resizing iframe {
 }
 .pinned-item-unpin:hover {
   opacity: 1;
-  color: var(--danger);
+  color: var(--text-primary);
 }
 .msg-pin-btn.pinned svg,
 #msg-detail-pin-btn.active svg,
@@ -5403,6 +5566,9 @@ body.show-resizing iframe {
 .rendered-md li {
   margin: 0.2em 0;
 }
+.rendered-md ul > li:has(> input[type='checkbox']) {
+  list-style: none;
+}
 .rendered-md a {
   color: var(--accent);
 }
@@ -5449,6 +5615,10 @@ body.show-resizing iframe {
   margin: 0.8em 0;
   border-color: var(--border);
 }
+.rendered-md img {
+  max-width: 100%;
+  height: auto;
+}
 .msg-detail-pre {
   white-space: pre-wrap;
   word-break: break-all;
@@ -5626,24 +5796,11 @@ body.show-resizing iframe {
 .msg-waiting-discard:hover {
   /* biome-ignore lint/complexity/noImportantStyles: override parent hover opacity */
   opacity: 1 !important;
-  color: var(--danger);
+  color: var(--text-primary);
 }
 .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) 22%, transparent);
-  color: var(--warning);
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-  vertical-align: middle;
-}
 .msg-waiting-body {
   font-size: 12px;
   margin-top: 4px;
@@ -5673,8 +5830,9 @@ body.show-resizing iframe {
   margin-top: 0;
 }
 .msg-waiting-actions {
-  flex-shrink: 0;
+  flex: 1;
   display: flex;
+  justify-content: flex-end;
   gap: 6px;
 }
 .msg-waiting-actions button {
@@ -5728,25 +5886,20 @@ body.show-resizing iframe {
   cursor: pointer;
   transition: all 0.15s ease;
 }
-/* One quiet color treatment for both button families — the card's compact
-   buttons need the descendant selector to out-rank `.msg-waiting-actions button` */
-.waiting-btn-allow,
-.msg-waiting-actions .msg-waiting-allow {
-  color: var(--success);
-  border-color: color-mix(in srgb, var(--success) 35%, transparent);
+.waiting-btn-allow {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
 }
-.waiting-btn-allow:hover:not(:disabled),
-.msg-waiting-actions .msg-waiting-allow:hover {
-  background: color-mix(in srgb, var(--success) 10%, transparent);
+.waiting-btn-allow:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
 }
-.waiting-btn-deny,
-.msg-waiting-actions .msg-waiting-deny {
-  color: var(--danger);
-  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
+.waiting-btn-deny {
+  color: var(--text-secondary);
+  border-color: var(--border);
 }
-.waiting-btn-deny:hover,
-.msg-waiting-actions .msg-waiting-deny:hover {
-  background: color-mix(in srgb, var(--danger) 10%, transparent);
+.waiting-btn-deny:hover {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
 }
 .waiting-btn-allow:disabled {
   opacity: 0.4;
@@ -5828,8 +5981,9 @@ body.show-resizing iframe {
 }
 .waiting-option {
   display: flex;
-  flex-direction: column;
-  gap: 2px;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 10px;
   width: 100%;
   text-align: left;
   border: 1px solid var(--border);
@@ -5905,51 +6059,316 @@ body.show-resizing iframe {
 .waiting-option-input::placeholder {
   color: var(--text-secondary);
 }
-.msg-item.msg-idle .msg-icon {
-  width: 12px;
-  height: 12px;
-}
-.teammate-name {
-  font-weight: 600;
-  font-size: 11px;
+/* #region ASK_PROMPTS */
+.waiting-option-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
 }
-.idle-label,
-.protocol-label {
+.waiting-option-key,
+.waiting-qtabs-hint kbd,
+.waiting-footer-hint kbd {
+  font-family: var(--mono);
   font-size: 10px;
-  color: var(--text-muted);
-  font-style: italic;
+  line-height: 1;
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  padding: 2px 5px;
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
 }
-.teammate-idle-detail {
-  padding: 12px;
-  text-align: center;
-  color: var(--text-muted);
+.waiting-option-key {
+  flex: none;
+  margin-top: 1px;
 }
-.msg-time {
-  font-size: 10px;
-  color: var(--text-muted);
-  margin-top: 4px;
+.waiting-option.selected .waiting-option-key {
+  border-color: var(--accent);
+  color: var(--accent);
 }
-.msg-empty {
-  text-align: center;
-  color: var(--text-muted);
-  padding: 40px 20px;
-  font-size: 12px;
+.waiting-qtabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-bottom: 1px solid var(--border);
 }
-
-.agent-log-back {
+.waiting-qtab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   border: none;
+  border-bottom: 2px solid transparent;
   background: none;
-  cursor: pointer;
   color: var(--text-secondary);
-  font-size: 16px;
-  padding: 0 8px 0 0;
-  line-height: 1;
+  font-family: var(--mono);
+  font-size: 12px;
+  padding: 6px 10px;
+  margin-bottom: -1px;
+  cursor: pointer;
 }
-.agent-log-back:hover {
+.waiting-qtab:hover {
   color: var(--text-primary);
 }
-.agent-log-title {
-  display: flex;
+.waiting-qtab.active {
+  color: var(--text-primary);
+  border-bottom-color: var(--accent);
+  font-weight: 600;
+}
+.waiting-qtab-n {
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  font-size: 10px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+}
+.waiting-qtab.done .waiting-qtab-n {
+  background: color-mix(in srgb, var(--success) 18%, transparent);
+  border-color: color-mix(in srgb, var(--success) 45%, transparent);
+  color: var(--success);
+}
+.waiting-qtab-check {
+  color: var(--success);
+  font-size: 11px;
+}
+.waiting-qtabs-hint,
+.waiting-footer-hint {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--text-muted);
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  white-space: nowrap;
+}
+.waiting-review {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--bg-deep) 40%, transparent);
+}
+.waiting-review-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 10px 14px;
+  font-size: 12px;
+}
+.waiting-review-row + .waiting-review-row {
+  border-top: 1px solid var(--border);
+}
+.waiting-review-q {
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  padding-top: 2px;
+}
+.waiting-review-a {
+  font-weight: 600;
+  text-align: right;
+}
+.waiting-review-a.empty {
+  font-weight: 400;
+  color: var(--warning);
+}
+#msg-detail-waiting-footer .waiting-footer-hint {
+  margin-right: auto;
+  margin-left: 0;
+}
+.perm-card {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.perm-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.perm-tool {
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  color: var(--warning);
+  background: color-mix(in srgb, var(--warning) 16%, transparent);
+}
+.perm-wait {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.perm-label {
+  font-size: 10px;
+  letter-spacing: 0.3px;
+  color: var(--text-muted);
+  font-family: var(--mono);
+  word-break: break-all;
+}
+.perm-code {
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-deep);
+  font-family: var(--mono);
+  font-size: 12.5px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.perm-note {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.perm-cwd {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.perm-diff {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+  font-family: var(--mono);
+  font-size: 12px;
+}
+.perm-diff-row {
+  display: flex;
+  gap: 8px;
+  padding: 2px 10px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.perm-diff-row.del {
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+}
+.perm-diff-row.add {
+  background: color-mix(in srgb, var(--success) 13%, transparent);
+}
+.perm-diff-sign {
+  flex: none;
+  width: 10px;
+  color: var(--text-muted);
+}
+.msg-waiting-feedback {
+  min-width: 0;
+  flex: 1;
+  border: 1px dashed var(--border);
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-family: var(--mono);
+  font-size: 11px;
+  background: none;
+  color: var(--text-primary);
+}
+.msg-waiting-feedback:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.msg-waiting-footer:has(.msg-waiting-feedback) {
+  flex-wrap: wrap;
+}
+.msg-waiting-footer:has(.msg-waiting-feedback) .msg-waiting-actions {
+  flex-basis: 100%;
+}
+.waiting-key-hint-line kbd {
+  font-family: var(--mono);
+  font-size: 9px;
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 3px;
+  padding: 0 4px;
+  background: var(--bg-elevated);
+}
+/* Inline ask row: theme variables only, so every color theme reads the same way */
+.msg-waiting-actions .msg-waiting-allow {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+.msg-waiting-actions .msg-waiting-allow:hover {
+  background: color-mix(in srgb, var(--accent) 82%, black);
+}
+.msg-waiting-actions .msg-waiting-deny {
+  background: none;
+  border-color: var(--border);
+  color: var(--text-secondary);
+}
+.msg-waiting-actions .msg-waiting-deny:hover {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+}
+.msg-item.msg-waiting.msg-waiting-plan {
+  background: none;
+  animation: none;
+}
+.msg-waiting-body h1,
+.msg-waiting-body h2,
+.msg-waiting-body h3,
+.msg-waiting-body h4,
+.waiting-plan h1,
+.waiting-plan h2,
+.waiting-plan h3,
+.waiting-plan h4 {
+  font-size: 1em;
+  font-weight: 600;
+  line-height: 1.35;
+}
+.msg-waiting-body h1,
+.waiting-plan h1 {
+  font-size: 1.15em;
+}
+/* #endregion */
+.msg-item.msg-idle .msg-icon {
+  width: 12px;
+  height: 12px;
+}
+.teammate-name {
+  font-weight: 600;
+  font-size: 11px;
+}
+.idle-label,
+.protocol-label {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+.teammate-idle-detail {
+  padding: 12px;
+  text-align: center;
+  color: var(--text-muted);
+}
+.msg-time {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+.msg-empty {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 40px 20px;
+  font-size: 12px;
+}
+
+.agent-log-back {
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 16px;
+  padding: 0 8px 0 0;
+  line-height: 1;
+}
+.agent-log-back:hover {
+  color: var(--text-primary);
+}
+.agent-log-title {
+  display: flex;
   align-items: baseline;
   gap: 6px;
 }
@@ -6537,9 +6956,9 @@ body.show-resizing iframe {
 }
 
 .linked-doc-actions .linked-doc-remove:hover {
-  background: var(--danger-dim);
-  border-color: var(--danger);
-  color: var(--danger);
+  background: var(--bg-elevated);
+  border-color: var(--border);
+  color: var(--text-primary);
 }
 
 /* A linked file the previewer can't render opens in the editor — the dashed
@@ -6999,8 +7418,8 @@ body.light .msg-assistant .msg-text {
 
 /* #region INTERACTIVE */
 .icon-btn.delete:hover {
-  background: color-mix(in srgb, var(--danger) 12%, transparent);
-  border-color: var(--danger);
+  background: var(--bg-elevated);
+  border-color: var(--border);
 }
 
 .column-header {
@@ -7476,6 +7895,162 @@ body.light .msg-assistant .msg-text {
   max-width: 440px;
 }
 
+/* #region CONFIRM_DIALOG */
+#confirm-modal {
+  z-index: 10001;
+}
+
+.confirm-dialog {
+  padding: 0;
+  max-width: 560px;
+  overflow: hidden;
+}
+
+.confirm-body {
+  padding: 20px 20px 6px;
+  display: grid;
+  gap: 12px;
+}
+
+.confirm-top {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.confirm-icon {
+  flex: none;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  color: var(--accent);
+  font-weight: 700;
+}
+
+.confirm-title {
+  margin: 0;
+  font-size: 15px;
+  color: var(--text-primary);
+}
+
+.confirm-message {
+  margin: 3px 0 0;
+  font-size: 12.5px;
+  color: var(--text-tertiary);
+}
+
+.confirm-chip {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-primary);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 7px 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.confirm-list {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.confirm-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 10px;
+}
+
+.confirm-row + .confirm-row {
+  border-top: 1px solid var(--border);
+}
+
+.confirm-row-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.confirm-row-meta {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.confirm-step::before {
+  content: '→';
+  color: var(--accent);
+}
+
+.confirm-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-muted);
+}
+
+.confirm-dot.busy {
+  background: var(--success);
+}
+
+.confirm-dot.wait {
+  background: var(--warning);
+}
+
+.confirm-warn {
+  font-size: 12px;
+  color: var(--warning);
+}
+
+.confirm-footer {
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px 16px;
+}
+
+.confirm-hint {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 12px;
+  white-space: nowrap;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.confirm-hint kbd {
+  font-family: var(--mono);
+  font-size: 10px;
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  padding: 1px 5px;
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+}
+
+.confirm-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.confirm-buttons .btn {
+  padding: 8px 16px;
+  white-space: nowrap;
+}
+/* #endregion */
+
 /* Reference card, not reading material: it stays out of the modal zoom, uses the app's
    small type, and scrolls its body (rule shared with #team-modal) instead of growing past
    the viewport cap. */
@@ -7811,15 +8386,14 @@ select.form-input option:checked {
 }
 
 .btn-danger {
-  background: var(--danger);
-  border-color: var(--danger);
-  color: white;
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+  color: var(--accent);
 }
 
 .btn-danger:hover {
-  background: color-mix(in srgb, var(--danger) 82%, black);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 45%, transparent);
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  border-color: var(--accent);
 }
 
 .btn-secondary {
@@ -8334,6 +8908,57 @@ select.form-input option:checked {
   min-width: 0;
 }
 
+.ns-body select.form-input {
+  appearance: none;
+  padding-right: 30px;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8d95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
+
+.ns-notched {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-elevated);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.ns-notched:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-dim);
+}
+
+.ns-notched legend {
+  margin: 0 8px 0 auto;
+  padding: 0 4px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 13px;
+  color: var(--text-secondary);
+}
+
+.ns-notched:focus-within legend {
+  color: var(--accent-text);
+}
+
+/* The legend's lower half sits inside the box, so less top padding keeps the box as tall as a plain input. */
+.ns-body .ns-notched select.form-input,
+.ns-body .ns-notched select.form-input:focus {
+  padding-top: 2px;
+  font-size: 12px;
+  background-position: right 10px top calc(50% - 3px);
+  border: none;
+  background-color: transparent;
+  box-shadow: none;
+}
+
 .ns-body .btn.ns-browse {
   flex: none;
   padding: 8px 12px;
@@ -9010,8 +9635,8 @@ select.form-input option:checked {
 }
 
 .storage-item-actions button.danger:hover {
-  background: color-mix(in srgb, var(--danger) 15%, transparent);
-  color: var(--danger);
+  background: var(--bg-hover);
+  color: var(--text-primary);
 }
 
 .storage-group-header {
@@ -9028,6 +9653,15 @@ select.form-input option:checked {
   padding-top: 0;
 }
 
+.storage-group-header.storage-group-row {
+  padding: 6px 0;
+}
+
+.storage-group-row .storage-item-actions {
+  align-items: center;
+  gap: 8px;
+}
+
 .storage-empty {
   text-align: center;
   padding: 32px 0;
@@ -9137,6 +9771,30 @@ pre.mermaid {
 pre.mermaid svg {
   max-width: 100%;
 }
+/* Hides the diagram source while it loads; a failed diagram shows its error instead. */
+pre.mermaid:not(:has(svg), [data-mermaid-error]) {
+  min-height: 40px;
+  font-size: 0;
+}
+pre.mermaid:not(:has(svg), [data-mermaid-error])::before {
+  content: 'Rendering diagram…';
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-muted);
+}
+pre.mermaid[data-mermaid-error] {
+  padding: 8px 10px;
+  border: 1px dashed var(--border);
+  border-radius: 4px;
+  font-size: 12px;
+  text-align: left;
+  white-space: pre-wrap;
+  color: var(--text-secondary);
+}
+pre.mermaid[data-mermaid-error]::before {
+  content: 'Diagram failed to render\A';
+  color: var(--danger);
+}
 .modal.has-mermaid {
   width: 80vw;
   max-width: 80vw;
@@ -9145,19 +9803,16 @@ pre.mermaid svg {
 /* #endregion */
 
 /* #region ANIMATIONS */
+/* No `to` and fill backwards: the card ends on its own opacity (.completed, .dim), not on 1. */
 @keyframes fadeSlideIn {
   from {
     opacity: 0;
     transform: translateY(8px);
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
 }
 
 .column-tasks .task-card {
-  animation: fadeSlideIn 150ms ease-out both;
+  animation: fadeSlideIn 150ms ease-out backwards;
 }
 
 .column-tasks .task-card:nth-child(1) {
@@ -9529,6 +10184,10 @@ pre.mermaid svg {
   outline-offset: -1px;
 }
 
+.session-group-header.sg-zen {
+  color: var(--accent);
+}
+
 .sg-sub-label {
   padding: 8px 10px 2px 8px;
   font-size: 10px;
@@ -9567,6 +10226,28 @@ pre.mermaid svg {
   margin-left: 6px;
 }
 
+.session-group-sessions .session-group-sessions {
+  padding-left: 6px;
+  border-left: 1px solid var(--border);
+}
+
+.session-item.sg-child {
+  width: calc(100% - var(--sg-indent));
+  margin-left: var(--sg-indent);
+}
+
+.session-item.sg-depth-1 {
+  --sg-indent: 14px;
+}
+
+.session-item.sg-depth-2 {
+  --sg-indent: 28px;
+}
+
+.session-item.sg-depth-3 {
+  --sg-indent: 42px;
+}
+
 .session-group-sessions.collapsed,
 .sg-section-body.collapsed {
   display: none;
@@ -9617,6 +10298,23 @@ pre.mermaid svg {
   top: -5px;
 }
 
+/* A drop on the top edge of a child group's header goes to its parent group. */
+.session-group-header.sg-insert-parent {
+  position: relative;
+}
+
+.session-group-header.sg-insert-parent::after {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: -8px;
+  right: 4px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--accent);
+  pointer-events: none;
+}
+
 .session-item.sg-insert-after::after {
   bottom: -5px;
 }
@@ -9698,4 +10396,20 @@ pre.mermaid svg {
   letter-spacing: 0;
   white-space: nowrap;
 }
+.pane-menu-path {
+  display: flex;
+}
+.pane-menu-dir {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  text-align: left;
+}
+.pane-menu-name {
+  flex: none;
+  color: var(--text-primary);
+  font-weight: 600;
+}
 /* #endregion */