agentgui 1.0.959 → 1.0.961

package/site/app/js/backend.js

@@ -363,8 +363,18 @@ export async function* streamChat(base, { model, messages, signal, agentId, resu
       else if (block?.type === 'result') push({ type: 'result', block });
     } else if (ev.type === 'streaming_complete') {
       finish();
+    } else if (ev.type === 'streaming_cancelled') {
+      push({ type: 'cancelled' });
+      finish();
     } else if (ev.type === 'streaming_error') {
-      errored = ev.error || 'streaming error';
+      // A remote stop (another tab / dashboard stop-all) is not a failure: the
+      // server marks it cancelled; surface it as a distinct event so the app
+      // can label the turn 'stopped' instead of a normal finish or error red.
+      if (ev.cancelled || ev.error === 'cancelled') {
+        push({ type: 'cancelled' });
+      } else {
+        errored = ev.error || 'streaming error';
+      }
       finish();
     }
   });
@@ -381,6 +391,20 @@ export async function* streamChat(base, { model, messages, signal, agentId, resu
     if (s === 'open') {
       // Reconnected in time - the open handler already re-subscribed us.
       if (graceTimer) { clearTimeout(graceTimer); graceTimer = null; }
+      // streaming_complete is fire-and-forget with no replay: if the turn
+      // finished while the socket was down, no terminal frame will ever
+      // arrive. Verify the session is still alive server-side; if it is
+      // gone, settle the iterator with a plain incomplete marker instead of
+      // hanging busy forever.
+      wsCall(base, 'chat.active', {}).then((d) => {
+        if (done) return;
+        const sessions = (d && d.sessions) || [];
+        const alive = Array.isArray(sessions) && sessions.some(x => x && x.sessionId === sessionId);
+        if (!alive) {
+          errored = errored || 'connection dropped mid-turn - the response may be incomplete; events were not replayed';
+          finish();
+        }
+      }).catch(() => {});
       return;
     }
     if ((s === 'closed' || s === 'error') && !graceTimer) {

package/site/app/vendor/anentrypoint-design/247420.css

@@ -442,7 +442,7 @@
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
-.ds-247420 ::selection { background: var(--mascot); color: var(--ink); }
+.ds-247420 ::selection { background: color-mix(in oklab, var(--accent) 24%, var(--bg-2)); color: var(--fg); }
 
 /* Every root has a CQ container so fluid type can resolve to a meaningful inline-size. */
 .ds-247420 .app, .ds-247420[class*="kit-"], .ds-247420 .ds-stage {
@@ -555,6 +555,9 @@
    ============================================================ */
 .ds-247420 .app {
   display: flex; flex-direction: column;
+  /* Offset parent for the sidebar drawer/scrim/toggle, which are absolute so
+     they overlay THIS shell (a thebird WM window) rather than the viewport. */
+  position: relative;
   min-height: 100vh;
   /* Definite height so the flex column resolves height:100% for descendants
      (e.g. a full-height chat) at every breakpoint, not just where a desktop
@@ -932,41 +935,61 @@
   grid-template-columns: minmax(80px, 12ch) minmax(0, 1fr) auto;
   gap: var(--space-3);
   align-items: baseline;
-  padding: 18px 22px;
+  padding: 16px 22px;
   background: var(--bg);
   border-radius: var(--r-2);
   color: var(--fg);
   position: relative;
-  transition: background var(--dur-snap) var(--ease), padding var(--dur-base) var(--ease);
+  /* Only background + the leading rail animate; padding/size never change on
+     interaction, so they are deliberately absent (a padding transition here was
+     dead and misleading). */
+  transition: background var(--dur-snap) var(--ease);
 }
-.ds-247420 .row + .row { margin-top: 4px; }
+.ds-247420 .row + .row { margin-top: 2px; }
 .ds-247420 .row::before {
   content: '';
-  position: absolute; left: 6px; top: 22%; bottom: 22%; width: 3px;
-  background: transparent; border-radius: 3px;
-  transition: background var(--dur-snap) var(--ease);
+  position: absolute; left: 7px; top: 0; bottom: 0; width: 3px;
+  margin: auto 0;
+  height: 0;                 /* collapsed by default; reveals from centre */
+  background: var(--rule-strong);
+  border-radius: var(--r-pill);
+  opacity: 0;
+  transition: height var(--dur-base) var(--ease), opacity var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
 }
 /* A clickable row (onClick -> role=button, or a link row) is interactive, so it
    carries a pointer cursor; without this the click affordance is invisible. */
 .ds-247420 .row[role="button"], .ds-247420 a.row { cursor: pointer; }
-.ds-247420 .row:hover { background: var(--bg-2); }
-.ds-247420 .row:hover::before { background: var(--rule-strong); }
+/* Hover reveals the rail (grows from centre) only on interactive rows — a static
+   row should not signal an affordance it does not have. */
+.ds-247420 .row[role="button"]:hover, .ds-247420 a.row:hover { background: var(--bg-2); }
+.ds-247420 .row[role="button"]:hover::before, .ds-247420 a.row:hover::before { height: 56%; opacity: 1; }
 .ds-247420 .row.active { background: color-mix(in oklab, var(--accent) 10%, var(--bg-2)); }
-.ds-247420 .row.active::before { background: var(--accent); }
+.ds-247420 .row.active::before { height: 64%; opacity: 1; background: var(--accent); }
+.ds-247420 .row.active .title { color: var(--accent); }
 .ds-247420 .row.row-state-disabled { opacity: 0.5; pointer-events: none; }
 .ds-247420 .row.row-state-error { background: color-mix(in oklab, var(--flame) 10%, var(--bg-2)); }
-.ds-247420 .row.row-state-error::before { background: var(--flame); }
+.ds-247420 .row.row-state-error::before { height: 64%; opacity: 1; background: var(--flame); }
 /* rail tones — a persistent status colour on the leading rail (the ::before
-   bar). Active/hover/error still win via their own rules below source order. */
+   bar). Always shown (a status indicator, not a hover affordance). Active/error
+   still win via their own rules below in source order. */
+.ds-247420 .row.rail-green::before,
+.ds-247420 .row.rail-purple::before,
+.ds-247420 .row.rail-flame::before { height: 56%; opacity: 1; }
 .ds-247420 .row.rail-green::before  { background: var(--accent); }
 .ds-247420 .row.rail-purple::before { background: var(--purple-2, #7F18A4); }
 .ds-247420 .row.rail-flame::before  { background: var(--flame); }
 .ds-247420 .row-grid { /* explicit grid-template-columns set inline */ }
+/* A row with no leading code/index drops the empty first column so the title
+   takes the full width instead of wrapping in the narrow code gutter. */
+.ds-247420 .row.row-nocode { grid-template-columns: minmax(0, 1fr) auto; }
 
-.ds-247420 .row .code  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
-.ds-247420 .row .title { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-lg); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+.ds-247420 .row .code  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
+.ds-247420 .row .title { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-snug, 1.3); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
+.ds-247420 .row .title .sub { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
 .ds-247420 .row .sub   { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
-.ds-247420 .row .meta  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-align: right; }
+.ds-247420 .row .meta  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; }
+/* WorksList meta pairs a label with a disclosure chevron, inline-aligned. */
+.ds-247420 .ds-works-meta { display: inline-flex; align-items: center; gap: .4em; }
 
 .ds-247420 a.row { text-decoration: none; }
 
@@ -1700,6 +1723,19 @@
 .ds-247420 .ds-upload-item.done .ds-upload-pct { color: var(--success); }
 .ds-247420 .ds-upload-item.error .ds-upload-fill { background: var(--warn); }
 .ds-247420 .ds-upload-item.error .ds-upload-pct { color: var(--warn); }
+/* Per-row upload recovery actions (replace / dismiss) — error rows are not dead ends. */
+.ds-247420 .ds-upload-item { grid-template-columns: minmax(0, 1fr) 120px 44px auto; }
+.ds-247420 .ds-upload-actions { display: inline-flex; gap: var(--space-1); justify-content: flex-end; }
+.ds-247420 .ds-upload-act {
+  padding: 2px 10px; min-height: 24px; cursor: pointer;
+  background: var(--bg); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1);
+  color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-micro);
+}
+.ds-247420 .ds-upload-act:hover { background: var(--bg-3); color: var(--fg); }
+.ds-247420 .ds-upload-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+@media (hover: none), (pointer: coarse) {
+  .ds-247420 .ds-upload-act { min-height: 44px; min-width: 44px; }
+}
 
 /* Empty state */
 .ds-247420 .ds-file-empty {
@@ -1757,6 +1793,14 @@
   font-family: inherit; font-size: var(--fs-sm);
 }
 .ds-247420 .ds-modal-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
+/* In-body modal error (role=alert): mutation failures (409/403) surface INSIDE
+   the dialog, not behind the fixed overlay. */
+.ds-247420 .ds-modal-error {
+  margin: var(--space-2) 0 0; padding: 8px 10px;
+  border: var(--bw-hair) solid var(--flame); border-radius: var(--r-2);
+  background: color-mix(in oklab, var(--flame) 12%, var(--bg));
+  color: var(--flame); font-size: var(--fs-xs);
+}
 .ds-247420 .btn-primary.danger {
   background: var(--warn);
   border-color: var(--warn);
@@ -1886,10 +1930,12 @@
 .ds-247420 .ds-file-row:hover .ds-file-check,
 .ds-247420 .ds-file-row:focus-within .ds-file-check,
 .ds-247420 .ds-file-check.on { opacity: 1; }
-/* Touch / coarse-pointer devices have no hover — keep checkboxes visible so
-   multi-select is reachable without a pointer. */
+/* Touch / coarse-pointer devices have no hover — keep checkboxes AND the
+   per-row action buttons (rename/delete/download) visible so the file manager
+   is fully reachable without a pointer (e.g. an iPad in landscape). */
 @media (hover: none), (pointer: coarse) {
   .ds-247420 .ds-file-check { opacity: 1; }
+  .ds-247420 .ds-file-actions { opacity: 1; }
 }
 .ds-247420 .ds-file-check.on { background: var(--accent); border-color: var(--accent); }
 .ds-247420 .ds-file-row.selected {
@@ -2295,36 +2341,43 @@
   .ds-247420 .chat-msg:nth-child(n+4) { animation-delay: 0.15s; }
 }
 
+/* Calm composer (claude.ai/code): ONE bordered rounded-rect shell holding the
+   context line, a borderless textarea, the hint, and an inline send button -
+   not a stadium pill + a floating round send. The shell carries the border and
+   the focus ring; the textarea fills it transparently. flex-wrap lets the
+   context line and hint occupy their own rows above/below the input row. */
 .ds-247420 .chat-composer {
-  display: flex; align-items: flex-end; gap: 8px;
-  padding: var(--space-3) 0 0;
-  border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
+  display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-2);
+  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
+  background: var(--bg);
+  border: var(--bw-hair) solid var(--rule);
+  border-radius: var(--r-2);
   flex-shrink: 0;
+  transition: border-color var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
+}
+.ds-247420 .chat-composer:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);
 }
 .ds-247420 .chat-composer textarea {
-  flex: 1; padding: 12px 16px;
-  background: var(--bg-2); color: var(--fg);
-  border: 1px solid transparent; border-radius: var(--r-pill);
+  flex: 1; min-width: 0; padding: 8px 4px;
+  background: none; color: var(--fg);
+  border: none; border-radius: 0;
   font-family: inherit; font-size: var(--fs-sm);
-  line-height: 1.4; resize: none;
-  min-height: 44px; max-height: 200px;
+  line-height: 1.45; resize: none;
+  min-height: 28px; max-height: 200px;
   box-sizing: border-box; overflow-y: auto;
   scrollbar-width: thin;
 }
 .ds-247420 .chat-composer textarea::placeholder { color: var(--fg-3); }
-.ds-247420 .chat-composer textarea:focus {
-  background: var(--bg-2);
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
-  outline: none;
-}
+.ds-247420 .chat-composer textarea:focus { background: none; border: none; box-shadow: none; outline: none; }
 .ds-247420 .chat-composer .send {
-  width: 44px; height: 44px; border-radius: 50%;
+  width: 36px; height: 36px; border-radius: var(--r-1);
   background: var(--accent); color: var(--accent-fg);
   border: 0; cursor: pointer;
   display: inline-flex; align-items: center; justify-content: center;
   flex-shrink: 0;
-  transition: background var(--dur-snap, .15s) var(--ease, ease), transform .1s ease;
+  transition: background var(--dur-snap, .15s) var(--ease, ease);
 }
 .ds-247420 .chat-composer .send:disabled { opacity: .5; cursor: not-allowed; }
 /* Ghost icon buttons in the toolbar (attach / emoji / more) — NOT the round
@@ -2338,8 +2391,8 @@
   transition: background var(--dur-snap, .15s) var(--ease, ease), color var(--dur-snap, .15s) var(--ease, ease);
 }
 .ds-247420 .composer-btn:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg); }
-.ds-247420 .chat-composer .send:hover { transform: scale(1.04); }
-.ds-247420 .chat-composer .send:active { transform: scale(0.96); }
+.ds-247420 .chat-composer .send:hover { filter: brightness(1.08); }
+.ds-247420 .chat-composer .send:active { filter: brightness(0.94); }
 .ds-247420 .chat-composer .send:focus-visible,
 .ds-247420 .composer-btn:focus-visible {
   outline: 2px solid var(--accent);
@@ -2449,6 +2502,12 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+/* Reusable spin utility: rotates the element (e.g. a refresh Icon used as a
+   busy indicator) via the shared spinner-rotate keyframe. Respects reduced
+   motion. Use instead of a decorative rotation glyph. */
+.ds-247420 .ds-spin { animation: spinner-rotate 0.8s linear infinite; transform-origin: center; }
+@media (prefers-reduced-motion: reduce) { .ds-247420 .ds-spin { animation: none; } }
+
 .ds-247420 .loading { position: relative; }
 .ds-247420 .loading::after {
   content: '';
@@ -3031,14 +3090,20 @@
    ============================================================ */
 
 /* Tablet + Mobile: side rail becomes off-canvas drawer (≤900px) */
-@media (max-width: 900px) {
+/* Sidebar drawer collapse keys on the SHELL width (@container on .app, which is
+   container-type:inline-size) — NOT the viewport. Full-page (freddie) the shell
+   == viewport so this is identical to the old @media(max-width:900px); embedded
+   in a thebird WM window the drawer + hamburger appear when the WINDOW is narrow
+   even on a wide desktop. Drawer/scrim/toggle are absolute (anchored to .app), so
+   they overlay the window, not the page. */
+@container (max-width: 900px) {
   .ds-247420 .app-body,
   .ds-247420 .app-body.no-side { grid-template-columns: 1fr !important; }
   .ds-247420 .app-side-shell {
-    position: fixed;
+    position: absolute;
     left: 0; top: var(--app-topbar-h);
-    height: calc(100vh - var(--app-topbar-h) - var(--app-status-h));
-    width: 280px; max-width: 80vw;
+    height: calc(100% - var(--app-topbar-h) - var(--app-status-h));
+    width: 280px; max-width: 80%;
     transform: translateX(-100%);
     transition: transform var(--dur-base, 240ms) var(--ease, ease);
     z-index: 50;
@@ -3072,21 +3137,24 @@
   .ds-247420 .app-main { padding-left: var(--space-3); padding-right: var(--space-3); }
 }
 
-/* Drawer scrim — lives inside .app-body, shown when drawer open ≤900px */
+/* Drawer scrim — absolute so it covers THIS shell, shown when drawer open and
+   the shell is narrow (@container on .app). */
 .ds-247420 .app-side-scrim {
   display: none;
-  position: fixed; inset: 0;
+  position: absolute; inset: 0;
   background: color-mix(in oklab, var(--bg) 60%, transparent);
   z-index: 49;
 }
-@media (max-width: 900px) {
+@container (max-width: 900px) {
   .ds-247420 .app-body.side-open .app-side-scrim { display: block; }
 }
 
-/* Mobile nav toggle (hamburger) — hidden on desktop, shown ≤900px */
+/* Nav toggle (hamburger) — hidden when the shell is wide, shown when the shell
+   itself is narrow (@container on .app). Absolute so it sits in THIS shell's
+   topbar, not pinned to the viewport corner. */
 .ds-247420 .app-side-toggle {
   display: none;
-  position: fixed; top: calc((var(--app-topbar-h) - 44px) / 2); left: 10px;
+  position: absolute; top: calc((var(--app-topbar-h) - 44px) / 2); left: 10px;
   z-index: 51;
   /* 44x44 minimum hit area (WCAG 2.5.5 / Apple HIG) - 36px is below the
      reliable-tap threshold on touch. */
@@ -3099,7 +3167,7 @@
   cursor: pointer;
 }
 .ds-247420 .app-side-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-@media (max-width: 900px) {
+@container (max-width: 900px) {
   .ds-247420 .app-side-toggle { display: inline-flex; }
   .ds-247420 .app-topbar .brand { margin-left: 44px; }
 }
@@ -3172,6 +3240,12 @@
 .ds-247420 .ws-shell.ws-no-pane.ws-pane-collapsed.ws-no-sessions { grid-template-columns: var(--ws-rail-w) 1fr var(--ws-pane-w); grid-template-areas: "rail content pane"; }
 .ds-247420 .ws-shell.ws-rail-collapsed { --ws-rail-w: var(--ws-rail-w-collapsed); }
 .ds-247420 .ws-shell.ws-pane-collapsed { --ws-pane-w: 0px; }
+/* Ease the rail/pane collapse. Track COUNT stays stable on collapse (only a
+   width var flips), so grid-template-columns is animatable; reduced-motion
+   drops it to an instant swap. */
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ws-shell { transition: grid-template-columns var(--dur-base) var(--ease); }
+}
 
 /* Rail (left nav) */
 .ds-247420 .ws-rail {
@@ -3242,9 +3316,17 @@
 
 /* Content column */
 .ds-247420 .ws-content { grid-area: content; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
-.ds-247420 .ws-crumb { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-1); border-bottom: var(--bw-hair) solid var(--bg-3); }
+/* Crumb band is the top chrome of the content column: a stable height so the
+   top edge aligns with the rail head, and a left gutter matching .ws-main so
+   the trail text is not flush against the rail border. */
+.ds-247420 .ws-crumb { flex: 0 0 auto; min-height: 48px; padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-1); border-bottom: var(--bw-hair) solid var(--bg-3); }
 .ds-247420 .ws-crumb-main { flex: 1 1 auto; min-width: 0; }
-.ds-247420 .ws-main { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
+/* Content column gutter. Claude-Code-class calm: file grid / dashboard / event
+   list / history get a generous, consistent inner gutter instead of butting
+   against the 1px column borders. The chat tab opts out via .ws-main--flush
+   because the chat thread carries its own --measure gutter. */
+.ds-247420 .ws-main { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); }
+.ds-247420 .ws-main.ws-main--flush { padding: 0; }
 .ds-247420 .ws-main:focus { outline: none; }
 
 /* Right context pane */
@@ -3289,8 +3371,11 @@
   .ds-247420 .ws-rail-collapsed .ws-rail-item-label, .ds-247420 .ws-rail-collapsed .ws-rail-brand { display: none; }
   /* Tap-scrim behind an open drawer; dismiss on click. Hidden unless a drawer
      is open so it never blocks the content area on desktop. */
-  .ds-247420 .ws-scrim { display: none; position: fixed; inset: 0; z-index: 41; background: color-mix(in srgb, var(--fg) 38%, transparent); }
-  .ds-247420 .ws-shell.ws-sessions-open .ws-scrim, .ds-247420 .ws-shell.ws-pane-open .ws-scrim { display: block; }
+  /* Scrim is always present on mobile so it can FADE with the drawer instead of
+     hard-appearing via a display toggle; pointer-events gate keeps it inert
+     while closed. Reduced-motion users get the global transition kill -> instant. */
+  .ds-247420 .ws-scrim { display: block; opacity: 0; pointer-events: none; position: fixed; inset: 0; z-index: 41; background: color-mix(in srgb, var(--fg) 38%, transparent); transition: opacity var(--dur-base) var(--ease); }
+  .ds-247420 .ws-shell.ws-sessions-open .ws-scrim, .ds-247420 .ws-shell.ws-pane-open .ws-scrim { opacity: 1; pointer-events: auto; }
   /* The mobile drawer-toggle affordances live in the crumb bar. */
   .ds-247420 .ws-drawer-toggle { display: inline-flex; }
 }
@@ -5337,7 +5422,10 @@
 /* --- C5: active dashboard card (current conversation). --- */
 .ds-247420 .ds-dash-card.is-active { box-shadow: inset 2px 0 0 var(--accent); }
 .ds-247420 .ds-dash-card.is-selected { background: var(--accent-tint); }
-.ds-247420 .ds-dash-card.is-stale { opacity: .92; }
+/* Stale/idle card: a positive amber inset bar (mirrors is-active) so a stuck
+   agent is flagged in a dense grid, not merely faded near-invisibly. The word
+   'idle' co-carries state, so this stays colour-blind safe. */
+.ds-247420 .ds-dash-card.is-stale { box-shadow: inset 2px 0 0 var(--amber, #d9a93a); }
 
 /* --- H3: dashboard live disc pulses; stale/error do not (handled by H1). --- */
 
@@ -5415,6 +5503,231 @@
   .ds-247420 .ds-session-meta-copy { min-height: 44px; min-width: 44px; }
 }
 
+/* ============================================================================
+   Logic/predictability sweep (2026-06-10): composer ergonomics, turn notices,
+   windowed thread, dashboard stopping/external states, cwd validation.
+============================================================================ */
+
+/* Enter-to-send hint: visible while the composer is focused or carries a
+   draft; hidden under 420px to save rows. */
+.ds-247420 .chat-composer-hint {
+  display: none; width: 100%; order: 5; padding: 2px var(--space-1) 0;
+  font-size: var(--fs-micro); color: var(--fg-3);
+}
+.ds-247420 .chat-composer:focus-within .chat-composer-hint,
+.ds-247420 .chat-composer.has-draft .chat-composer-hint { display: block; }
+@media (max-width: 420px) {
+  .ds-247420 .chat-composer .chat-composer-hint { display: none; }
+}
+
+/* Transient composer note (paste/drop not supported), aria-live polite. */
+.ds-247420 .chat-composer-note {
+  padding: 4px var(--space-3); font-size: var(--fs-tiny); color: var(--fg-2);
+}
+
+/* Drag-over ring: token accent, never a hex. */
+.ds-247420 .chat-composer.dragover { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
+
+/* Per-bit composer context: only the bit that owns a control is a button. */
+.ds-247420 .chat-composer-context-bit {
+  display: inline; padding: 0; margin: 0;
+  background: none; border: none; cursor: pointer;
+  font: inherit; color: inherit; text-decoration: underline dotted;
+}
+.ds-247420 .chat-composer-context-bit:hover { color: var(--fg-2); }
+.ds-247420 .chat-composer-context-bit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+@media (pointer: coarse) {
+  .ds-247420 .chat-composer-context-bit { min-height: 44px; }
+}
+
+/* Out-of-band turn notices: neutral tone (NOT error red) — a stopped or
+   incomplete turn must not read as a finished answer. */
+.ds-247420 .chat-msg-notice {
+  margin-top: var(--space-1); padding: 6px 10px;
+  border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
+  background: var(--bg-2); color: var(--fg-2); font-size: var(--fs-tiny);
+}
+.ds-247420 .chat-msg-notice.is-incomplete { border-style: dashed; }
+
+/* Tail-window streaming head ('streaming · N KB so far'). */
+.ds-247420 .chat-stream-head {
+  padding: 2px 0 6px; font-family: var(--ff-mono);
+  font-size: var(--fs-micro); color: var(--fg-3);
+}
+
+/* Windowed thread: 'show N earlier turns' control at the top. */
+.ds-247420 .agentchat-earlier {
+  display: flex; align-items: center; justify-content: center;
+  gap: var(--space-3); padding: var(--space-2) var(--space-3);
+}
+.ds-247420 .agentchat-earlier-count { font-size: var(--fs-tiny); color: var(--fg-3); }
+.ds-247420 .agentchat-earlier-btn {
+  padding: 4px 12px; min-height: 32px; border: var(--bw-hair) solid var(--bg-3);
+  border-radius: var(--r-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer;
+  font-family: var(--ff-body); font-size: var(--fs-tiny);
+}
+.ds-247420 .agentchat-earlier-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+@media (pointer: coarse) {
+  .ds-247420 .agentchat-earlier-btn { min-height: 44px; }
+}
+
+/* Inline cwd validation line (checking / error) under the cwd input. */
+.ds-247420 .agentchat-cwd-hint { font-size: var(--fs-tiny); color: var(--fg-3); }
+.ds-247420 .agentchat-cwd-hint.is-error { color: var(--flame); }
+
+/* Dashboard: shared session title heading (same string as the rails). */
+.ds-247420 .ds-dash-title {
+  font-size: var(--fs-body); font-weight: 600; color: var(--fg);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+/* Stopping state: in-flight cancel reads distinctly from running/error. */
+.ds-247420 .ds-dash-status.is-stopping { color: var(--amber, #d9a93a); }
+
+/* External (observed, not owned) session card: no stop control exists. */
+.ds-247420 .ds-dash-external {
+  padding: 1px 6px; border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-pill);
+  font-size: var(--fs-micro); color: var(--fg-3); text-transform: uppercase; letter-spacing: .03em;
+}
+.ds-247420 .ds-dash-card.is-external { border-style: dashed; }
+
+/* One connection vocabulary: offline (is-lost kept as legacy alias). */
+.ds-247420 .ds-dash-stream.is-offline { color: var(--flame); }
+
+/* ============================================================
+   10th run - Claude-Code-web design-language parity
+   ============================================================ */
+
+/* Flat full-width chat turns (claude.ai/code), replacing the messenger
+   avatar-disc + colored-bubble layout. AgentChat passes flat:true; the demo
+   Chat keeps the bubble layout. Turns are full-width to --measure; the user vs
+   assistant distinction is a role label + a faint assistant background. */
+.ds-247420 .chat-msg-flat { display: block; padding: var(--space-3) var(--space-4); margin: 0; background: none; border-radius: var(--r-2); }
+.ds-247420 .chat-msg-flat.them { background: color-mix(in oklab, var(--fg) 3%, transparent); }
+.ds-247420 .chat-msg-flat.you { background: none; }
+.ds-247420 .chat-msg-flat .chat-stack { max-width: var(--measure); width: 100%; margin: 0; align-items: stretch; }
+.ds-247420 .chat-msg-flat.you .chat-stack { align-items: stretch; }
+.ds-247420 .chat-role { font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); margin-bottom: var(--space-1); }
+.ds-247420 .chat-msg-flat.you .chat-role { color: var(--accent); }
+.ds-247420 .chat-msg-flat .chat-bubble { background: none; border: none; border-radius: 0; padding: 0; max-width: 100%; box-shadow: none; transform: none; }
+.ds-247420 .chat-msg-flat.you .chat-bubble { background: none; color: inherit; }
+.ds-247420 .chat-msg-flat:hover { background: color-mix(in oklab, var(--fg) 3%, transparent); }
+.ds-247420 .chat-msg-flat.you:hover { background: color-mix(in oklab, var(--fg) 2%, transparent); }
+.ds-247420 .chat-msg-flat:hover .chat-bubble { transform: none; box-shadow: none; background: none; }
+.ds-247420 .chat-msg-flat .chat-avatar { display: none; }
+
+/* Tool-call card: a bordered, status-toned, scannable card (claude.ai/code),
+   not the raw mascot-tinted details dump. The node keeps the .chat-bubble
+   class, so these rules de-frame it and restyle. Placed after the flat-bubble
+   reset so they win on equal specificity. */
+.ds-247420 .chat-msg .chat-tool {
+  display: block; max-width: 100%; padding: 0; margin: var(--space-1) 0;
+  background: var(--bg); color: var(--fg);
+  border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
+  box-shadow: none; overflow: hidden;
+}
+.ds-247420 .chat-msg .chat-tool[open] { background: var(--bg); }
+.ds-247420 .chat-msg .chat-tool .chat-tool-head {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-3); cursor: pointer;
+  font-size: var(--fs-sm); list-style: none;
+}
+.ds-247420 .chat-msg .chat-tool .chat-tool-head::-webkit-details-marker { display: none; }
+.ds-247420 .chat-msg .chat-tool .chat-tool-head:hover { background: var(--bg-2); }
+.ds-247420 .chat-tool-icon { display: inline-flex; color: var(--fg-3); }
+.ds-247420 .chat-tool-name { font-family: var(--ff-mono); font-weight: 600; color: var(--fg); }
+.ds-247420 .chat-tool-label { color: var(--fg-3); font-size: var(--fs-tiny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.ds-247420 .chat-tool-status {
+  margin-left: auto; flex: 0 0 auto;
+  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
+  color: var(--fg-3);
+  padding: 2px var(--space-2); border-radius: var(--r-pill);
+  background: color-mix(in oklab, var(--fg) 6%, transparent);
+}
+.ds-247420 .chat-msg .chat-tool.tool-running .chat-tool-status { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
+.ds-247420 .chat-msg .chat-tool.tool-error .chat-tool-status { color: var(--flame); background: color-mix(in oklab, var(--flame) 12%, transparent); }
+.ds-247420 .chat-tool-body { border-top: var(--bw-hair) solid var(--rule); padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
+.ds-247420 .chat-tool-section { display: flex; flex-direction: column; gap: var(--space-1); }
+.ds-247420 .chat-tool-section-label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); }
+.ds-247420 .chat-tool-pre { margin: 0; padding: var(--space-2); background: var(--bg-2); border-radius: var(--r-1); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.45; overflow-x: auto; max-height: 320px; overflow-y: auto; }
+.ds-247420 .chat-tool-pre.is-error { color: var(--flame); }
+.ds-247420 .chat-tool-pre.chat-tool-empty { color: var(--fg-3); }
+
+/* Fenced-code language tab on every rendered-markdown block (not just the
+   structured CodeNode). injectCodeCopy reads the language- class. */
+.ds-247420 .chat-code-block { position: relative; }
+.ds-247420 .chat-code-lang {
+  position: absolute; top: 0; left: 0; z-index: 2;
+  padding: 2px var(--space-2); border-bottom-right-radius: var(--r-1);
+  font-family: var(--ff-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em;
+  color: var(--fg-3); background: color-mix(in oklab, var(--fg) 6%, transparent);
+  pointer-events: none;
+}
+.ds-247420 .chat-code-block pre { padding-top: calc(var(--space-3) + 4px); }
+
+/* Motion + microinteraction polish (all reduced-motion guarded). */
+.ds-247420 .ds-session-row { transition: background var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease); }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .agentchat-thread { scroll-behavior: smooth; }
+  .ds-247420 .ds-alert { animation: ds-alert-in var(--dur-base) var(--ease); }
+}
+@keyframes ds-alert-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+.ds-247420 .chat-code-copy { transition: opacity var(--dur-snap, .12s) var(--ease, ease), color var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease); }
+.ds-247420 .chat-msg-action { transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease); }
+.ds-247420 .agentchat-install-copy { transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease); }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .btn.is-armed, .ds-247420 .btn-primary.is-armed { animation: ds-arm-pulse var(--dur-slow) var(--ease); }
+}
+@keyframes ds-arm-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--warn) 55%, transparent); } 100% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--warn) 0%, transparent); } }
+.ds-247420 .ds-dash-card.is-new { box-shadow: inset 2px 0 0 var(--accent), 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent); }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-dash-card.is-new { animation: ds-card-in var(--dur-slow) var(--ease); }
+}
+@keyframes ds-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+
+/* Live command-center: status-bucket groups + header breakdown + heartbeat. */
+.ds-247420 .ds-dash-group { display: flex; flex-direction: column; gap: var(--space-2); }
+.ds-247420 .ds-dash-group-label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); padding: 0 var(--space-1); }
+.ds-247420 .ds-dash-breakdown { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--fg-2); }
+.ds-247420 .ds-dash-breakdown .seg.is-running { color: var(--green); font-weight: 600; }
+.ds-247420 .ds-dash-breakdown .seg.is-error { color: var(--flame); font-weight: 600; }
+.ds-247420 .ds-dash-breakdown .seg.is-idle { color: var(--amber, #d9a93a); }
+.ds-247420 .ds-dash-stream-disc { display: inline-flex; align-items: center; gap: var(--space-1); }
+.ds-247420 .ds-dash-selectall { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-tiny); color: var(--fg-2); cursor: pointer; background: none; border: none; padding: var(--space-1); }
+.ds-247420 .ds-dash-selectall:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-dash-clear { background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: var(--fs-tiny); text-decoration: underline dotted; padding: var(--space-1); }
+
+/* Conversation-rail loading skeleton (cold ccsniff walk). */
+.ds-247420 .ds-session-row-skeleton { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) var(--space-3); }
+.ds-247420 .ds-session-row-skeleton .ds-skel { background: var(--bg-3); border-radius: var(--r-1); }
+.ds-247420 .ds-session-row-skeleton .ds-skel-title { height: 12px; width: 70%; }
+.ds-247420 .ds-session-row-skeleton .ds-skel-meta { height: 9px; width: 45%; }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-session-row-skeleton .ds-skel { animation: ds-skel-shimmer 1.3s ease-in-out infinite; background: linear-gradient(90deg, var(--bg-3) 0%, var(--bg-2) 50%, var(--bg-3) 100%); background-size: 200% 100%; }
+}
+@keyframes ds-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+
+/* File code preview: paint Prism tokens (the bundle scoped them to the chat
+   block only) + an optional non-selectable line-number gutter. */
+.ds-247420 .ds-preview-code code { color: var(--fg); }
+.ds-247420 .ds-preview-code .token.comment, .ds-247420 .ds-preview-code .token.prolog, .ds-247420 .ds-preview-code .token.doctype, .ds-247420 .ds-preview-code .token.cdata { color: var(--fg-3); }
+.ds-247420 .ds-preview-code .token.punctuation { color: var(--fg-2); }
+.ds-247420 .ds-preview-code .token.property, .ds-247420 .ds-preview-code .token.tag, .ds-247420 .ds-preview-code .token.boolean, .ds-247420 .ds-preview-code .token.number, .ds-247420 .ds-preview-code .token.constant, .ds-247420 .ds-preview-code .token.symbol { color: var(--purple-2, #7F18A4); }
+.ds-247420 .ds-preview-code .token.selector, .ds-247420 .ds-preview-code .token.attr-name, .ds-247420 .ds-preview-code .token.string, .ds-247420 .ds-preview-code .token.char, .ds-247420 .ds-preview-code .token.builtin { color: var(--green-2, #3A9A34); }
+.ds-247420 .ds-preview-code .token.atrule, .ds-247420 .ds-preview-code .token.attr-value, .ds-247420 .ds-preview-code .token.keyword { color: var(--sky, #3A6EFF); }
+.ds-247420 .ds-preview-code .token.function, .ds-247420 .ds-preview-code .token.class-name { color: var(--flame); }
+.ds-247420 .ds-preview-code.has-gutter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-2); }
+.ds-247420 .ds-preview-code.has-gutter code { display: block; min-width: 0; overflow-x: auto; }
+.ds-247420 .ds-preview-gutter { user-select: none; text-align: right; padding: 0 var(--space-2) 0 0; color: var(--fg-3); border-right: var(--bw-hair) solid var(--rule); font-family: var(--ff-mono); white-space: pre; line-height: inherit; }
+
+/* Image preview: fit/actual control + alpha checkerboard. */
+.ds-247420 .ds-preview-media-controls { display: flex; gap: var(--space-2); padding: var(--space-2); justify-content: center; }
+.ds-247420 .ds-preview-media-alpha {
+  background-image: linear-gradient(45deg, var(--bg-3) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-3) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-3) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-3) 75%);
+  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+}
+.ds-247420 .ds-preview-media.is-actual { max-width: none; max-height: none; }
+
 /* editor-primitives.css */
 /* editor-primitives.css — chrome for in-engine editors, inspectors, IDEs,
    debug HUDs. All rules under .ds-247420 scope (build prefixes). Tokens