dsh-ntr 0.1.6 → 0.2.0

package/src/client/acp-ui.tsx

@@ -857,9 +857,9 @@ const STYLE = `
 .ntr-acp-seat:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-active, #0000000d); }
 .ntr-acp-seat:disabled { opacity: 0.5; cursor: default; }
 .ntr-acp-seat.is-open { border-color: var(--dsw-alias-state-business-primary, #2563eb); color: var(--dsw-alias-state-business-primary, #2563eb); }
-.ntr-acp-seat.is-detached { border-color: var(--ntr-warn, #d97706); color: var(--ntr-warn, #d97706); }
+.ntr-acp-seat.is-detached { border-color: var(--dsw-alias-state-warn-label, #d97706); color: var(--dsw-alias-state-warn-label, #d97706); }
 .ntr-acp-seat-main { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ntr-acp-seat-sub { color: var(--dsw-alias-text-secondary, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ntr-acp-seat-sub { color: var(--dsw-alias-label-secondary, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ntr-acp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
 .ntr-acp-tick { margin-left: auto; color: var(--dsw-alias-state-business-primary, #2563eb); }
 .ntr-acp-check { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 13px; height: 13px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); border-radius: 3px; font-size: 10px; line-height: 1; color: var(--dsw-alias-state-business-primary, #2563eb); }
@@ -868,80 +868,108 @@ const STYLE = `
 .ntr-acp-menu-head { padding: 8px 10px 6px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
 .ntr-acp-menu-title { flex: 1; }
 .ntr-acp-menu-spin { opacity: 0.5; }
-.ntr-acp-menu-note { padding: 0 10px 6px; font-size: 11px; color: var(--dsw-alias-text-secondary, #6b7280); line-height: 1.5; }
-.ntr-acp-menu-error { margin: 0 10px 6px; padding: 6px 8px; border-radius: 6px; background: #fee2e2; color: #b91c1c; font-size: 11px; }
+.ntr-acp-menu-note { padding: 0 10px 6px; font-size: 11px; color: var(--dsw-alias-label-secondary, #6b7280); line-height: 1.5; }
+.ntr-acp-menu-error { margin: 0 10px 6px; padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #b91c1c) 12%, transparent); color: var(--dsw-alias-state-error-primary, #b91c1c); font-size: 11px; }
 .ntr-acp-menu-body { overflow: auto; padding: 0 4px 6px; }
 .ntr-acp-menu-section { display: flex; flex-direction: column; padding-top: 4px; }
-.ntr-acp-menu-section-title { padding: 6px 8px 4px; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-menu-section-title { padding: 6px 8px 4px; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-menu-item { display: flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; text-align: left; padding: 6px 8px; border: none; border-radius: 6px; background: none; color: inherit; cursor: pointer; width: 100%; }
 .ntr-acp-menu-item:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-active, #0000000d); }
 .ntr-acp-menu-item:disabled { opacity: 0.45; cursor: default; }
 .ntr-acp-menu-item.is-active { font-weight: 600; }
 .ntr-acp-menu-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ntr-acp-menu-item-detail { color: var(--dsw-alias-text-secondary, #6b7280); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: right; }
-.ntr-acp-menu-empty { padding: 10px; text-align: center; color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-menu-item-detail { color: var(--dsw-alias-label-secondary, #6b7280); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: right; }
+.ntr-acp-menu-empty { padding: 10px; text-align: center; color: var(--dsw-alias-label-secondary, #6b7280); }
 /* ---- ACP view tab ---- */
 .ntr-acp-view { display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: 13px; line-height: 1.6; }
-.ntr-acp-view-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--dsw-alias-border-l2, #e5e7eb); font-size: 12px; color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-view-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--dsw-alias-border-l2, #e5e7eb); font-size: 12px; color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-view-agent { font-weight: 600; color: inherit; }
 .ntr-acp-view-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; direction: rtl; text-align: left; }
 .ntr-acp-view-head .ntr-acp-more { margin-left: auto; }
 .ntr-acp-stream { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px 24px; display: flex; flex-direction: column; gap: 10px; }
 .ntr-acp-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid transparent; }
-.ntr-acp-badge.is-done { color: #15803d; background: #dcfce7; }
-.ntr-acp-badge.is-busy { color: #1d4ed8; background: #dbeafe; }
-.ntr-acp-badge.is-warn { color: #b45309; background: #fef3c7; }
-.ntr-acp-badge.is-fail { color: #b91c1c; background: #fee2e2; }
-.ntr-acp-badge.is-idle { color: var(--dsw-alias-text-secondary, #6b7280); background: var(--dsw-alias-bg-layer-2, #f3f4f6); }
+.ntr-acp-badge.is-done { color: color-mix(in srgb, var(--dsw-alias-state-success-primary, #22c55e) 72%, var(--dsw-alias-label-primary, #111827)); background: var(--dsw-alias-state-success-tertiary, #dcfce7); }
+.ntr-acp-badge.is-busy { color: var(--dsw-alias-state-business-primary, #1d4ed8); background: var(--dsw-alias-state-business-tertiary, #dbeafe); }
+.ntr-acp-badge.is-warn { color: var(--dsw-alias-state-warn-label, #b45309); background: var(--dsw-alias-state-warn-tertiary, #fef3c7); }
+.ntr-acp-badge.is-fail { color: var(--dsw-alias-state-error-primary, #b91c1c); background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #b91c1c) 12%, transparent); }
+.ntr-acp-badge.is-idle { color: var(--dsw-alias-label-secondary, #6b7280); background: var(--dsw-alias-bg-layer-2, #f3f4f6); }
 .ntr-acp-bubble { max-width: 88%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; }
 .ntr-acp-bubble.is-user { align-self: flex-end; background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #2563eb) 12%, transparent); }
 .ntr-acp-bubble.is-agent { align-self: flex-start; background: var(--dsw-alias-bg-layer-2, #f3f4f6); }
 .ntr-acp-inline-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 10%, transparent); }
 .ntr-acp-code { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: #0f172a; color: #e2e8f0; overflow: auto; font-size: 12px; line-height: 1.5; }
-.ntr-acp-thought { border-left: 3px solid var(--dsw-alias-border-l2, #d1d5db); padding-left: 8px; color: var(--dsw-alias-text-secondary, #6b7280); font-size: 12px; }
+.ntr-acp-thought { border-left: 3px solid var(--dsw-alias-border-l2, #d1d5db); padding-left: 8px; color: var(--dsw-alias-label-secondary, #6b7280); font-size: 12px; }
 .ntr-acp-thought > summary { cursor: pointer; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
 .ntr-acp-thought-body { white-space: pre-wrap; padding: 4px 0 2px; }
 .ntr-acp-tool { border: 1px solid var(--dsw-alias-border-l2, #e5e7eb); border-radius: 10px; background: var(--dsw-alias-bg-layer-1, #fff); overflow: hidden; }
-.ntr-acp-tool.is-fail { border-color: #fca5a5; }
+.ntr-acp-tool.is-fail { border-color: var(--dsw-alias-state-error-secondary, #fca5a5); }
 .ntr-acp-tool-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12px; }
 .ntr-acp-tool-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ntr-acp-tool-body { margin: 0; padding: 8px 10px; border-top: 1px solid var(--dsw-alias-border-l2, #e5e7eb); background: var(--dsw-alias-bg-layer-2, #f9fafb); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow: auto; }
-.ntr-acp-tool-input { background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-text-primary, #111827); max-height: 240px; }
-.ntr-acp-tool-meta { font-size: 11px; color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-tool-input { background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #111827); max-height: 240px; }
+.ntr-acp-tool-meta { font-size: 11px; color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-diff { border-top: 1px solid var(--dsw-alias-border-l2, #e5e7eb); }
 .ntr-acp-diff-head { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: var(--dsw-alias-bg-layer-2, #f9fafb); }
 .ntr-acp-diff-path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ntr-acp-diff-stats .is-add { color: #15803d; }
-.ntr-acp-diff-stats .is-del { color: #b91c1c; }
+.ntr-acp-diff-stats .is-add { color: var(--dsw-alias-state-success-primary, #15803d); }
+.ntr-acp-diff-stats .is-del { color: var(--dsw-alias-state-error-primary, #b91c1c); }
 .ntr-acp-diff-body { max-height: 360px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.55; }
 .ntr-acp-diff-row { display: flex; gap: 8px; padding: 0 10px; white-space: pre; }
-.ntr-acp-diff-row.is-add { background: #dcfce7; }
-.ntr-acp-diff-row.is-del { background: #fee2e2; }
-.ntr-acp-diff-row.is-ctx { color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-diff-row.is-add { background: var(--dsw-alias-file-diff-added-bg, #dcfce7); }
+.ntr-acp-diff-row.is-del { background: var(--dsw-alias-file-diff-deleted-bg, #fee2e2); }
+.ntr-acp-diff-row.is-ctx { color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-diff-sign { width: 1ch; flex: none; opacity: 0.7; }
 .ntr-acp-diff-text { overflow-x: auto; }
-.ntr-acp-diff-note { padding: 4px 10px 6px; font-size: 11px; color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-diff-note { padding: 4px 10px 6px; font-size: 11px; color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-more { font: inherit; font-size: 11.5px; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); background: var(--dsw-alias-bg-layer-2, #f3f4f6); color: inherit; cursor: pointer; }
 .ntr-acp-more:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-active, #0000000d); }
 .ntr-acp-more:disabled { opacity: 0.5; cursor: default; }
-.ntr-acp-more.is-primary { border-color: transparent; background: var(--dsw-alias-button-primary-fill, #2563eb); color: var(--dsw-alias-button-primary-invert, #fff); }
+.ntr-acp-more.is-primary { border-color: transparent; background: var(--dsw-alias-button-primary-fill, #2563eb); color: var(--dsw-alias-label-primary-foreground, #fff); }
 .ntr-acp-tool > .ntr-acp-more, .ntr-acp-empty-actions .ntr-acp-more { margin: 6px 10px; }
 .ntr-acp-plan { border: 1px solid var(--dsw-alias-border-l2, #e5e7eb); border-radius: 10px; padding: 8px 10px; background: var(--dsw-alias-bg-layer-1, #fff); }
-.ntr-acp-plan-head { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dsw-alias-text-secondary, #6b7280); margin-bottom: 4px; }
+.ntr-acp-plan-head { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dsw-alias-label-secondary, #6b7280); margin-bottom: 4px; }
 .ntr-acp-plan-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 1px 0; }
-.ntr-acp-plan-row.is-completed { color: var(--dsw-alias-text-secondary, #6b7280); text-decoration: line-through; }
+.ntr-acp-plan-row.is-completed { color: var(--dsw-alias-label-secondary, #6b7280); text-decoration: line-through; }
 .ntr-acp-plan-row.is-in_progress { font-weight: 600; }
 .ntr-acp-plan-glyph { width: 1ch; flex: none; }
-.ntr-acp-plan-prio { margin-left: auto; font-size: 10px; text-transform: uppercase; color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-plan-prio { margin-left: auto; font-size: 10px; text-transform: uppercase; color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-notice { padding: 6px 10px; border-radius: 8px; font-size: 12px; }
-.ntr-acp-notice.is-error { background: #fee2e2; color: #b91c1c; }
-.ntr-acp-notice.is-info { background: var(--dsw-alias-bg-layer-2, #f3f4f6); color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-notice.is-error { background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #b91c1c) 12%, transparent); color: var(--dsw-alias-state-error-primary, #b91c1c); }
+.ntr-acp-notice.is-info { background: var(--dsw-alias-bg-layer-2, #f3f4f6); color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-empty { margin: auto; max-width: 460px; text-align: center; display: flex; flex-direction: column; gap: 10px; padding: 24px; }
 .ntr-acp-empty-title { font-size: 14px; font-weight: 600; }
-.ntr-acp-empty-body { margin: 0; color: var(--dsw-alias-text-secondary, #6b7280); font-size: 12.5px; line-height: 1.7; }
-.ntr-acp-empty-hint { color: var(--dsw-alias-text-secondary, #6b7280); font-size: 12px; }
-.ntr-acp-seat-diag { font-family: var(--dsw-alias-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); opacity: 0.72; word-break: break-word; }
+.ntr-acp-empty-body { margin: 0; color: var(--dsw-alias-label-secondary, #6b7280); font-size: 12.5px; line-height: 1.7; }
+.ntr-acp-empty-hint { color: var(--dsw-alias-label-secondary, #6b7280); font-size: 12px; }
+.ntr-acp-seat-diag { font-family: var(--ds-font-family-code, ui-monospace, SFMono-Regular, Menlo, monospace); opacity: 0.72; word-break: break-word; }
 .ntr-acp-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
+/* ---- Pending permission asks (conversation.input.dock) ---- */
+/* The dock slot is the full conversation column, but the composer card inside
+   it is narrower (InputBar: side clearance + card max width). Mirror that
+   formula so each ask lines up with the input box instead of spanning the
+   column. The list owns a bounded height and scrolls so a burst of asks cannot
+   push the composer off screen. */
+.ntr-permission-dock {
+  box-sizing: border-box;
+  width: calc(100% - var(--dsh-composer-side-clearance, 16px) - var(--dsh-composer-side-clearance, 16px));
+  max-width: var(--dsh-composer-card-max-width, 920px);
+  margin: 0 auto;
+  display: flex; flex-direction: column; gap: 6px;
+  max-height: min(38vh, 320px); overflow-y: auto;
+  font-size: 12px; line-height: 1.5;
+}
+.ntr-permission-card { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); border-left: 3px solid var(--dsw-alias-state-warn-primary, #d97706); border-radius: 10px; background: var(--dsw-alias-bg-layer-1, #fff); }
+.ntr-permission-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.ntr-permission-tool { flex: none; font-weight: 600; }
+.ntr-permission-reason { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-secondary, #6b7280); }
+.ntr-permission-deadline { flex: none; font-size: 11px; color: var(--dsw-alias-label-secondary, #6b7280); font-variant-numeric: tabular-nums; }
+.ntr-permission-deadline.is-expired { color: var(--dsw-alias-state-warn-label, #b45309); font-weight: 600; }
+.ntr-permission-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.ntr-permission-option, .ntr-permission-cancel { font: inherit; font-size: 12px; line-height: 1.4; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); background: var(--dsw-alias-bg-layer-2, #f3f4f6); color: inherit; cursor: pointer; white-space: normal; text-align: left; }
+.ntr-permission-option:hover:not(:disabled), .ntr-permission-cancel:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-active, #0000000d); }
+.ntr-permission-option:disabled, .ntr-permission-cancel:disabled { opacity: 0.5; cursor: default; }
+.ntr-permission-option:focus-visible, .ntr-permission-cancel:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary, #2563eb); outline-offset: 2px; }
+.ntr-permission-cancel { margin-left: auto; color: var(--dsw-alias-label-secondary, #6b7280); }
+.ntr-permission-error { padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #b91c1c) 12%, transparent); color: var(--dsw-alias-state-error-primary, #b91c1c); font-size: 11px; word-break: break-word; }
 /* ---- NTR settings dialog (shell.overlay) ---- */
 /* Frame-wide surface opened from the agent base's empty-roster menu. The
    overlay layer itself is click-through, so the layer opts back in and blocks

package/src/client/index.tsx

@@ -19,6 +19,7 @@ import { AcpComposerMode } from './composer-mode.tsx'
 import { AcpComposerAgentTag, AcpSessionControls, AcpSessionMenu } from './session-controls.tsx'
 import { AcpConversationView } from './acp-view.tsx'
 import { AcpSettingsDialog } from './settings-dialog.tsx'
+import { PermissionDock } from './permission-dock.tsx'
 import {
   createModelSeatClaim,
   createPermissionSeatClaim,
@@ -230,6 +231,23 @@ export function apply(ctx: Context): void {
     inject: (sessionId: unknown) => chatFace(sessionId),
   }, AcpComposerAgentTag as unknown as SlotComponent<any>)), 'dsh-ntr: composer agent tag')
 
+  // Pending permission asks for the staged conversation, above the composer
+  // card (`conversation.input.dock` — a session-scoped list slot; the host's
+  // own queue/todo docks register the same way). The slot spans the whole
+  // conversation column, so the dock component applies the composer's own
+  // width formula to line up with the input box. Every ask is dispatched as
+  // broadcast as `permission/request`; the dock renders only the ones carrying
+  // this conversation's id, so it needs no ACP-mode gate. Asks without a chat
+  // identity stay on the settings-panel ledger.
+  ctx.effect(() => ctx.slots.inject('conversation.input.dock', () => ctx.slots.register({
+    name: 'conversation.input.dock',
+    id: 'acp-permissions',
+    order: 10,
+    // The positional inject argument is the session binding key — the chat
+    // session id this dock belongs to (same contract as every other entry).
+    inject: (sessionId: unknown) => chatFace(sessionId),
+  }, PermissionDock as unknown as SlotComponent<any>)), 'dsh-ntr: conversation permission dock')
+
   /**
    * The client runtime's session list store, read structurally. Used to find
    * the session the composer is staged on and whether it runs the ACP preset —

package/src/client/panel.tsx

@@ -2,11 +2,11 @@
  * React surface for ACP: the settings configuration section.
  *
  * Scope is deliberately narrow — this is a CONFIGURATION surface. Runtime
- * interaction lives in the conversation: permission asks are answered in the
- * chat composer through the host approval chain. The ledger card answers
- * whatever did NOT reach the conversation — a host without the chain, a
- * session with no chat identity behind it, or an ask whose native route
- * degraded to unavailable (see `permissionLedgerCard`).
+ * interaction lives in the conversation: every permission ask with a chat
+ * identity is answered on a card above that conversation's composer
+ * (`permission-dock.tsx`). The ledger card here is the cross-session mirror —
+ * asks whose conversation is not open, or which have no chat identity at all —
+ * and is where those are answered (see `permissionLedgerCard`).
  *
  * Each configured agent is one compact row (status + current model + badges)
  * that expands into the full connection form and model catalog. The row stays
@@ -51,8 +51,10 @@ const STYLE = `
   --ntr-radius: 10px; --ntr-radius-sm: 7px;
   --ntr-font: 13px; --ntr-font-sm: 12px; --ntr-font-xs: 11px;
   --ntr-line: 1px solid var(--dsw-alias-border-l2, #e5e7eb);
-  --ntr-muted: var(--dsw-alias-text-secondary, #6b7280);
-  --ntr-danger: #dc2626; --ntr-warn: #b45309;
+  --ntr-muted: var(--dsw-alias-label-secondary, #6b7280);
+  --ntr-danger: var(--dsw-alias-state-error-primary, #dc2626);
+  --ntr-warn: var(--dsw-alias-state-warn-label, #b45309);
+  --ntr-success: color-mix(in srgb, var(--dsw-alias-state-success-primary, #16a34a) 72%, var(--dsw-alias-label-primary, #111827));
   --ntr-accent: var(--dsw-alias-button-primary-fill, #2563eb);
   width: 100%; max-width: 960px; box-sizing: border-box; margin: 0 auto;
   padding: 20px; overflow: auto; font-size: var(--ntr-font); line-height: 1.55;
@@ -76,25 +78,25 @@ const STYLE = `
 }
 .dwa-btn:hover { background: var(--dsw-alias-interactive-bg-active, #f3f4f6); border-color: var(--dsw-alias-border-l1, #9ca3af); }
 .dwa-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.dwa-btn-primary { background: var(--ntr-accent); color: var(--dsw-alias-button-primary-invert, #fff); border-color: transparent; font-weight: 550; }
+.dwa-btn-primary { background: var(--ntr-accent); color: var(--dsw-alias-label-primary-foreground, #fff); border-color: transparent; font-weight: 550; }
 .dwa-btn-primary:hover { background: var(--ntr-accent); border-color: transparent; opacity: 0.88; }
 .dwa-btn-secondary { background: var(--dsw-alias-bg-layer-2, #f3f4f6); }
-.dwa-btn-danger { color: var(--ntr-danger); border-color: #fca5a5; }
-.dwa-btn-danger:hover { background: #fee2e2; }
+.dwa-btn-danger { color: var(--ntr-danger); border-color: var(--dsw-alias-state-error-secondary, #fca5a5); }
+.dwa-btn-danger:hover { background: var(--dsw-alias-interactive-bg-hover-danger, #fee2e2); }
 .dwa-section { margin-bottom: 24px; }
 .dwa-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
 .dwa-section-title { font-size: 14px; font-weight: 650; margin: 0; display: flex; align-items: center; gap: 8px; }
 .dwa-section-copy { margin: 3px 0 0; font-size: var(--ntr-font-xs); color: var(--ntr-muted); }
 .dwa-card { border: var(--ntr-line); border-radius: var(--ntr-radius); padding: 16px; background: var(--dsw-alias-bg-layer-1, #fff); font-size: var(--ntr-font); line-height: 1.55; }
-.dwa-card-warn { border-left: 3px solid var(--dsw-alias-state-warn-primary, #d97706); background: var(--dsw-alias-state-warn-secondary, #fffbeb); }
+.dwa-card-warn { border-left: 3px solid var(--dsw-alias-state-warn-primary, #d97706); background: var(--dsw-alias-state-warn-tertiary, #fffbeb); }
 .dwa-mode-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 16px; align-items: start; margin-bottom: 24px; padding: 14px 16px; }
 .dwa-mode-title { display: flex; align-items: center; gap: 8px; font-weight: 650; }
 .dwa-mode-copy { grid-column: 1 / -1; color: var(--ntr-muted); font-size: var(--ntr-font-xs); }
 .dwa-mode-source { display: block; margin-top: 5px; overflow-wrap: anywhere; opacity: 0.85; }
 .dwa-badge { font-size: var(--ntr-font-xs); line-height: 1.4; border-radius: 999px; padding: 2px 8px; background: var(--dsw-alias-bg-layer-2, #f3f4f6); color: var(--ntr-muted); font-weight: 550; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
-.dwa-badge-success { background: #22c55e1c; color: #15803d; }
-.dwa-badge-warn { background: #f59e0b1f; color: #b45309; }
-.dwa-badge-info { background: #3b82f61a; color: #2563eb; }
+.dwa-badge-success { background: var(--dsw-alias-state-success-tertiary, #dcfce7); color: var(--ntr-success); }
+.dwa-badge-warn { background: var(--dsw-alias-state-warn-tertiary, #fef3c7); color: var(--ntr-warn); }
+.dwa-badge-info { background: var(--dsw-alias-state-business-tertiary, #dbeafe); color: var(--dsw-alias-state-business-primary, #2563eb); }
 .dwa-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
 .dwa-agent-list { display: flex; flex-direction: column; gap: 8px; }
 .dwa-agent-card { border: var(--ntr-line); border-radius: var(--ntr-radius); background: var(--dsw-alias-bg-layer-1, #fff); overflow: visible; transition: border-color 0.15s ease; }
@@ -116,7 +118,7 @@ const STYLE = `
 .dwa-subsection-copy { margin: 3px 0 0; color: var(--ntr-muted); font-size: var(--ntr-font-xs); }
 .dwa-form-row { display: flex; gap: var(--ntr-gap-3); margin-bottom: 14px; align-items: flex-start; }
 .dwa-form-col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
-.dwa-form-label { font-size: var(--ntr-font-sm); font-weight: 600; color: var(--dsw-alias-text-primary, #374151); }
+.dwa-form-label { font-size: var(--ntr-font-sm); font-weight: 600; color: var(--dsw-alias-label-primary, #374151); }
 .dwa-hint { font-size: var(--ntr-font-xs); line-height: 1.55; color: var(--ntr-muted); }
 .dwa-error { font-size: var(--ntr-font-xs); color: var(--ntr-danger); }
 .dwa-input { min-height: 36px; font: inherit; font-size: var(--ntr-font-sm); padding: 7px 10px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); border-radius: var(--ntr-radius-sm); background: var(--dsw-alias-bg-layer-1, #fff); color: inherit; width: 100%; box-sizing: border-box; }
@@ -141,7 +143,7 @@ const STYLE = `
 .dwa-add-content { border-top: var(--ntr-line); padding: 14px 16px 16px; }
 .dwa-chip { min-height: 30px; font: inherit; font-size: var(--ntr-font-sm); border: var(--ntr-line); border-radius: 999px; padding: 4px 12px; background: var(--dsw-alias-bg-layer-1, #fff); cursor: pointer; color: inherit; }
 .dwa-chip:hover { background: var(--dsw-alias-interactive-bg-active, #f3f4f6); }
-.dwa-chip-active { border-color: var(--ntr-accent); background: #3b82f614; color: #2563eb; font-weight: 550; }
+.dwa-chip-active { border-color: var(--ntr-accent); background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #2563eb) 8%, transparent); color: var(--dsw-alias-state-business-primary, #2563eb); font-weight: 550; }
 .dwa-chip-list { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
 .dwa-switch { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ntr-font-sm); cursor: pointer; user-select: none; }
 .dwa-inline-setting { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--ntr-radius-sm); background: var(--dsw-alias-bg-layer-2, #f9fafb); }
@@ -154,7 +156,7 @@ const STYLE = `
 /* Tall enough for a comfortable selection (about ten rows) before scrolling;
    the cap keeps the two stacked panes from pushing the rest of the card away. */
 .dwa-model-pane { min-width: 0; max-height: 360px; display: flex; flex-direction: column; border: var(--ntr-line); border-radius: var(--ntr-radius-sm); background: var(--dsw-alias-bg-layer-1, #fff); overflow: hidden; }
-.dwa-model-pane-head { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: var(--ntr-line); font-size: var(--ntr-font-xs); font-weight: 600; color: var(--dsw-alias-text-secondary, #4b5563); }
+.dwa-model-pane-head { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: var(--ntr-line); font-size: var(--ntr-font-xs); font-weight: 600; color: var(--dsw-alias-label-secondary, #4b5563); }
 .dwa-model-pane-head .dwa-btn { margin-left: auto; min-height: 26px; padding: 2px 8px; font-size: var(--ntr-font-xs); }
 .dwa-model-pane-head .dwa-caret-btn { flex: none; width: 22px; height: 22px; background: transparent; }
 .dwa-model-pane-head .dwa-caret-btn:hover { background: var(--dsw-alias-interactive-bg-active, #e5e7eb); }
@@ -172,7 +174,7 @@ const STYLE = `
 .dwa-model-empty { padding: 6px; }
 .dwa-model-row { display: flex; align-items: center; gap: 6px; width: 100%; border: none; background: none; padding: 5px 6px; border-radius: 5px; cursor: pointer; color: inherit; font: inherit; font-size: var(--ntr-font-sm); text-align: left; }
 .dwa-model-row:hover { background: var(--dsw-alias-interactive-bg-active, #f3f4f6); }
-.dwa-model-row.is-on { background: #3b82f614; color: #2563eb; }
+.dwa-model-row.is-on { background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #2563eb) 8%, transparent); color: var(--dsw-alias-state-business-primary, #2563eb); }
 .dwa-model-row-mark { width: 12px; flex: none; text-align: center; opacity: 0.75; }
 .dwa-model-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* Name and credit keep their room; the id is the only cell that collapses. */
@@ -194,7 +196,7 @@ const STYLE = `
 .dwa-seg > button { min-height: 30px; font: inherit; font-size: var(--ntr-font-sm); color: inherit; border: none; background: var(--dsw-alias-bg-layer-1, #fff); padding: 4px 14px; cursor: pointer; }
 .dwa-seg > button + button { border-left: 1px solid var(--dsw-alias-border-l2, #d1d5db); }
 .dwa-seg > button:hover { background: var(--dsw-alias-interactive-bg-active, #f3f4f6); }
-.dwa-seg > button.is-on { background: var(--ntr-accent); color: var(--dsw-alias-button-primary-invert, #fff); font-weight: 550; }
+.dwa-seg > button.is-on { background: var(--ntr-accent); color: var(--dsw-alias-label-primary-foreground, #fff); font-weight: 550; }
 .dwa-preference-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
 .dwa-preference-row + .dwa-preference-row { border-top: var(--ntr-line); }
 /* A control that needs the whole card: the label sits above it, not beside
@@ -255,9 +257,9 @@ function useUi(acp: AcpStore) {
 
 function stateVisual(state: AgentView['state'], acp: AcpStore): { color: string; text: string; title?: string } {
   switch (state) {
-    case 'ready': return { color: '#22c55e', text: acp.label('已连接', 'Connected') }
-    case 'starting': return { color: '#eab308', text: acp.label('启动中', 'Starting') }
-    case 'error': return { color: '#ef4444', text: acp.label('错误', 'Error') }
+    case 'ready': return { color: 'var(--dsw-alias-state-success-primary, #22c55e)', text: acp.label('已连接', 'Connected') }
+    case 'starting': return { color: 'var(--dsw-alias-state-warn-primary, #eab308)', text: acp.label('启动中', 'Starting') }
+    case 'error': return { color: 'var(--dsw-alias-state-error-primary, #ef4444)', text: acp.label('错误', 'Error') }
     // A configured-but-resting agent is the normal state, not a fault: the
     // process is not kept resident and connects on demand the first time a DSH
     // chat turn uses it. Surfacing a runtime lifecycle here ("stopped"/"idle")
@@ -265,7 +267,7 @@ function stateVisual(state: AgentView['state'], acp: AcpStore): { color: string;
     // which the config-time 测试连接 (agent/test) already answers. So the
     // resting state just says 已配置.
     default: return {
-      color: '#9ca3af',
+      color: 'var(--dsw-alias-state-idle-primary, #9ca3af)',
       text: acp.label('已配置', 'Configured'),
       title: acp.label(
         '已配置，进程不常驻。在 DSH 聊天中首次使用时自动连接；展开区可用「测试连接」验证命令能否正常起来。',
@@ -460,22 +462,15 @@ export function payloadEquals(payload: AgentSavePayload, current: AcpAgentDef):
 /**
  * The settings panel's permission-ledger rule.
  *
- * A pending ask ALWAYS gets an answerable card here, whatever `approvalRouted`
- * says. That flag reports that the host HAS an approval service — it does not
- * promise THIS ask reached the conversation. An ask lands in `ui.permissions`
- * only on the ledger path (`AgentBridge.handlePermissionRequest` broadcasts
- * `permission/request` there and nowhere else), so a pending entry is by
- * definition a question the conversation is not showing. The previous rule
- * (`approvalRouted` → a read-only count, no buttons) hid the only answer
- * entry exactly when the native route had degraded to unavailable, and the
- * ask then hung until its timeout.
- *
- * `fellBackFromConversation` is the case the card has to explain: the host
- * can route asks, and this one still did not make it.
+ * Pending asks are shown in the conversation card while that conversation is
+ * open; this card is the cross-session mirror for the ones it cannot show —
+ * asks belonging to another conversation, and `/acp` RPC-only asks with no
+ * chat identity at all. It therefore appears whenever ANY ask is pending: a
+ * pending entry with no conversation card would otherwise have no answer
+ * surface anywhere.
  */
-export function permissionLedgerCard(ui: Pick<UiState, 'approvalRouted' | 'permissions'>): { visible: boolean; fellBackFromConversation: boolean } {
-  const visible = ui.permissions.length > 0
-  return { visible, fellBackFromConversation: visible && ui.approvalRouted }
+export function permissionLedgerCard(ui: Pick<UiState, 'permissions'>): { visible: boolean } {
+  return { visible: ui.permissions.length > 0 }
 }
 
 /**
@@ -860,7 +855,7 @@ export function AcpSettingsSection(props: WithStore) {
           <div className="dwa-page-status">
             <span
               className="dwa-dot"
-              style={{ background: ui.stream === 'live' ? '#22c55e' : ui.stream === 'down' ? '#ef4444' : '#9ca3af' }}
+              style={{ background: ui.stream === 'live' ? 'var(--dsw-alias-state-success-primary, #22c55e)' : ui.stream === 'down' ? 'var(--dsw-alias-state-error-primary, #ef4444)' : 'var(--dsw-alias-state-idle-primary, #9ca3af)' }}
               title={ui.stream}
             />
             <span>{streamText(ui.stream, acp)}</span>
@@ -881,36 +876,37 @@ export function AcpSettingsSection(props: WithStore) {
         </div>
       </header>
 
-      {/* Any pending ask gets an answerable card here, whatever
-          `approvalRouted` says (see `permissionLedgerCard`): an ask is in
-          `ui.permissions` only because it fell back to the ledger, which
-          means the conversation is NOT showing it. */}
+      {/* The cross-session mirror: the conversation dock answers the asks
+          belonging to the open conversation; this card answers the rest. */}
       {ledger.visible && (
         <div className="dwa-card dwa-card-warn" style={{ marginBottom: 16 }}>
-          <div style={{ fontWeight: 600, marginBottom: 8 }}>
+          <div style={{ fontWeight: 600, marginBottom: 4 }}>
             {acp.label('待处理权限请求', 'Pending Permission Requests')}
           </div>
-          {ledger.fellBackFromConversation && (
-            <div className="dwa-hint" style={{ marginBottom: 8 }}>
-              {acp.label(
-                '这些询问没有进入对话（审批服务本次不可用、问题从未到达对话，或会话没有对话身份），请在此回答。',
-                'These asks did not reach the conversation (the approval service was unavailable, the question never reached the conversation, or the session has no chat identity) — answer them here.',
-              )}
-            </div>
-          )}
+          <div className="dwa-hint" style={{ marginBottom: 8 }}>
+            {acp.label(
+              '对话打开时在那边的卡片上回答；这里兜底显示其他会话的询问。',
+              'Answer in the conversation card while that conversation is open; this list covers the asks whose conversation is not.',
+            )}
+          </div>
           {ui.permissions.map(permission => (
             <div key={permission.requestId} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6, flexWrap: 'wrap' }}>
-              <span style={{ flex: 1, minWidth: 160 }}>{permission.title}</span>
+              <span style={{ flex: 1, minWidth: 160 }}>
+                <span style={{ fontWeight: 600 }}>{permission.toolName}</span>
+                {permission.reason !== undefined && (
+                  <span style={{ color: 'var(--ntr-muted)' }}> · {permission.reason}</span>
+                )}
+              </span>
               {permission.options.map(option => (
                 <button
                   key={option.optionId}
                   className="dwa-btn dwa-btn-primary"
-                  onClick={() => void acp.respondPermission(permission.requestId, option.optionId)}
+                  onClick={() => { void acp.respondPermission(permission.requestId, option.optionId).catch(() => undefined) }}
                 >
                   {option.name}
                 </button>
               ))}
-              <button className="dwa-btn" onClick={() => void acp.respondPermission(permission.requestId)}>
+              <button className="dwa-btn" onClick={() => { void acp.respondPermission(permission.requestId).catch(() => undefined) }}>
                 {acp.label('拒绝', 'Dismiss')}
               </button>
             </div>
@@ -1656,7 +1652,7 @@ function AgentDetails({
               <span style={{ fontWeight: 600, marginRight: 6 }}>
                 {acp.label('官方测试默认命令:', 'Tested Default Command:')}
               </span>
-              <code className="dwa-input-mono" style={{ background: '#0000000a', padding: '2px 6px', borderRadius: 4 }}>
+              <code className="dwa-input-mono" style={{ background: 'var(--dsw-alias-markdown-inline-code, #0000000a)', padding: '2px 6px', borderRadius: 4 }}>
                 {detected.defaultCommand} {detected.defaultArgs.join(' ')}
               </code>
             </div>
@@ -1845,7 +1841,7 @@ function AgentDetails({
             fontSize: 12,
             whiteSpace: 'pre-wrap',
             wordBreak: 'break-all',
-            color: testResult.ok ? '#16a34a' : 'var(--ntr-danger)',
+            color: testResult.ok ? 'var(--ntr-success)' : 'var(--ntr-danger)',
           }}
         >
           {testResult.ok ? '✓ ' : '✕ '}{testResult.text}
@@ -2333,7 +2329,7 @@ function ModelCatalogBlock({
             type="checkbox"
             checked={autoDiscover}
             onChange={e => void toggleAutoDiscover(e.target.checked)}
-            style={{ margin: 0, accentColor: '#2563eb' }}
+            style={{ margin: 0, accentColor: 'var(--dsw-alias-state-business-primary, #2563eb)' }}
           />
           {acp.label('自动发现新模型', 'Auto-discover new models')}
         </label>

package/src/client/permission-dock.tsx

@@ -0,0 +1,133 @@
+/**
+ * Pending ACP permission asks for the staged DSH conversation, rendered as
+ * composer-width entries above the composer card (`conversation.input.dock`).
+ * The slot itself spans the conversation column; the dock mirrors the host's
+ * InputBar width formula so the cards line up with the input box.
+ *
+ * The host broadcasts every ask as `permission/request`, carrying the DSH chat
+ * session id when the ask belongs to a conversation. This dock is the primary
+ * answer surface: it renders exactly the asks whose `dshSessionId` is the
+ * conversation it was mounted for, and nothing otherwise. There is no
+ * ACP-mode gate — the frame set itself is the gate, so an ordinary
+ * conversation shows this card if and only if it actually has an ask.
+ *
+ * The ask's description and options are the agent's own: buttons appear in the
+ * agent's order with the agent's names (including "Always Allow"), and
+ * `kind` is not rendered. A separate cancel button answers with no option,
+ * which the host forwards as `cancelled`. No Enter/Escape handlers: the
+ * composer owns its keyboard, and these are ordinary focusable buttons.
+ *
+ * Multiple asks stack in ARRIVAL order, oldest first: the question ignored
+ * longest stays at the top. The list is capped in height by CSS and scrolls.
+ * Asks without a chat identity never appear here — they stay in the
+ * settings-panel ledger, the cross-session mirror.
+ */
+
+import { useEffect, useState } from 'react'
+import { ensureAcpStyle, useUi } from './acp-ui.tsx'
+import {
+  deadlineRemainingLabel,
+  PERMISSION_DEADLINE_EXPIRED,
+  permissionsForSession,
+} from './store.ts'
+import type { AcpStore, PendingPermission } from './store.ts'
+
+export interface PermissionDockProps {
+  /** Injected face: the store plus the chat session id this dock belongs to. */
+  acp: AcpStore
+  sessionId: string
+}
+
+/** Tick interval for the countdown (seconds are all the label shows). */
+const COUNTDOWN_TICK_MS = 1000
+
+export function PermissionDock({ acp, sessionId }: PermissionDockProps) {
+  ensureAcpStyle()
+  const ui = useUi(acp)
+  const dshSessionId = String(sessionId)
+  const pending = permissionsForSession(ui.permissions, dshSessionId)
+  const counting = pending.some(ask => ask.timeoutMode !== 'wait' && ask.deadlineAt !== undefined)
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    if (!counting) return
+    setNow(Date.now())
+    const timer = setInterval(() => { setNow(Date.now()) }, COUNTDOWN_TICK_MS)
+    return () => { clearInterval(timer) }
+  }, [counting])
+  if (pending.length === 0) return null
+  return (
+    <div
+      className="ntr-permission-dock"
+      role="region"
+      aria-label={acp.label('待处理的权限请求', 'Pending permission requests')}
+    >
+      {pending.map(permission => (
+        <PermissionAskCard key={permission.requestId} acp={acp} permission={permission} now={now} />
+      ))}
+    </div>
+  )
+}
+
+function PermissionAskCard(props: { acp: AcpStore; permission: PendingPermission; now: number }) {
+  const { acp, permission, now } = props
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string>()
+  const remaining = deadlineRemainingLabel(permission.deadlineAt, now, permission.timeoutMode)
+  const expired = remaining === PERMISSION_DEADLINE_EXPIRED
+  const respond = (optionId?: string): void => {
+    if (busy) return
+    setBusy(true)
+    setError(undefined)
+    void acp.respondPermission(permission.requestId, optionId)
+      // `respondPermission` reports to the store's notice too, but that notice
+      // lives on the settings page; this card pins the failure where the user
+      // is looking.
+      .catch((failure: unknown) => {
+        setError(failure instanceof Error ? failure.message : String(failure))
+      })
+      .finally(() => { setBusy(false) })
+  }
+  return (
+    <div className="ntr-permission-card">
+      <div className="ntr-permission-head">
+        <span className="ntr-permission-tool">{permission.toolName}</span>
+        {permission.reason !== undefined && (
+          <span className="ntr-permission-reason" title={permission.reason}>{permission.reason}</span>
+        )}
+        {remaining !== undefined && (
+          <span className={`ntr-permission-deadline${expired ? ' is-expired' : ''}`}>
+            {expired
+              ? acp.label('已超时', 'expired')
+              : acp.label(`剩余 ${remaining}`, `${remaining} left`)}
+          </span>
+        )}
+      </div>
+      <div className="ntr-permission-actions">
+        {permission.options.map(option => (
+          <button
+            key={option.optionId}
+            type="button"
+            className="ntr-permission-option"
+            disabled={busy}
+            title={option.name}
+            onClick={() => { respond(option.optionId) }}
+          >
+            {option.name}
+          </button>
+        ))}
+        <button
+          type="button"
+          className="ntr-permission-cancel"
+          disabled={busy}
+          title={acp.label('取消这次询问（不选择任何选项）', 'Cancel this ask without choosing an option')}
+          onClick={() => { respond() }}
+        >
+          {acp.label('取消', 'Cancel')}
+        </button>
+      </div>
+      {error !== undefined && (
+        <div className="ntr-permission-error" role="alert">{error}</div>
+      )}
+    </div>
+  )
+}

package/src/client/session-controls.tsx

@@ -88,10 +88,10 @@ export interface AcpClusterProps extends AcpChatInjected {
 }
 
 const STATE_COLORS: Record<AgentView['state'], string> = {
-  ready: '#22c55e',
-  starting: '#eab308',
-  error: '#ef4444',
-  stopped: '#9ca3af',
+  ready: 'var(--dsw-alias-state-success-primary, #22c55e)',
+  starting: 'var(--dsw-alias-state-warn-primary, #eab308)',
+  error: 'var(--dsw-alias-state-error-primary, #ef4444)',
+  stopped: 'var(--dsw-alias-state-idle-primary, #9ca3af)',
 }
 
 function agentStateText(acp: AcpChatInjected['acp'], state: AgentView['state']): string {