@xenosystem/agent-conversation 0.1.35 → 0.1.37

package/dist/types/agentPermissions.d.ts

@@ -41,5 +41,7 @@ export interface AgentCapabilities {
     dataAnalysis?: boolean;
 }
 /** The named permission posture a conversation runs under. */
-export type AgentPermissionProfileName = 'standard' | 'read-only' | 'edit-with-approval' | 'trusted-workspace' | 'plan';
+export type AgentPermissionProfileName = 'standard' | 'read-only' | 'edit-with-approval' | 'trusted-workspace' | 'plan'
+/** The composer's "Full access" — no asks; the walls (mode envelope, sandbox) still stand. */
+ | 'full-access';
 //# sourceMappingURL=agentPermissions.d.ts.map

package/dist/types/agentPermissions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agentPermissions.d.ts","sourceRoot":"","sources":["../../src/types/agentPermissions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,sCAAsC;AACtC,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG,SAAS,CAAA;AAE7D,2CAA2C;AAC3C,MAAM,MAAM,uBAAuB,GAC/B,oBAAoB,GACpB,aAAa,GACb,cAAc,GACd,aAAa,GACb,YAAY,CAAA;AAEhB,gFAAgF;AAChF,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,wBAAwB,CAAA;IACjC,MAAM,EAAE,uBAAuB,CAAA;IAC/B,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wCAAwC;AACxC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,8DAA8D;AAC9D,MAAM,MAAM,0BAA0B,GAClC,UAAU,GACV,WAAW,GACX,oBAAoB,GACpB,mBAAmB,GACnB,MAAM,CAAA"}
+{"version":3,"file":"agentPermissions.d.ts","sourceRoot":"","sources":["../../src/types/agentPermissions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,sCAAsC;AACtC,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG,SAAS,CAAA;AAE7D,2CAA2C;AAC3C,MAAM,MAAM,uBAAuB,GAC/B,oBAAoB,GACpB,aAAa,GACb,cAAc,GACd,aAAa,GACb,YAAY,CAAA;AAEhB,gFAAgF;AAChF,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,wBAAwB,CAAA;IACjC,MAAM,EAAE,uBAAuB,CAAA;IAC/B,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wCAAwC;AACxC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,8DAA8D;AAC9D,MAAM,MAAM,0BAA0B,GAClC,UAAU,GACV,WAAW,GACX,oBAAoB,GACpB,mBAAmB,GACnB,MAAM;AACR,8FAA8F;GAC5F,aAAa,CAAA"}

package/dist/utils/acpExecutionAuthority.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"acpExecutionAuthority.d.ts","sourceRoot":"","sources":["../../src/utils/acpExecutionAuthority.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AACnG,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAA;AAEtF,MAAM,WAAW,4BAA4B;IAC3C,aAAa,EAAE,CAAC,CAAA;IAChB,iBAAiB,EAAE,0BAA0B,CAAA;IAC7C,UAAU,EAAE,WAAW,GAAG,iBAAiB,CAAA;CAC5C;AAOD,+FAA+F;AAC/F,wBAAgB,wCAAwC,CACtD,kBAAkB,CAAC,EAAE,0BAA0B,GAC9C,UAAU,GAAG,SAAS,CAKxB;AAED;;;GAGG;AACH,wBAAgB,yCAAyC,CACvD,iBAAiB,CAAC,EAAE,0BAA0B,GAC7C,0BAA0B,CAY5B;AAED;;;;;;GAMG;AACH,wBAAgB,mCAAmC,CAAC,KAAK,EAAE;IACzD,iBAAiB,CAAC,EAAE,0BAA0B,CAAA;IAC9C,YAAY,CAAC,EAAE,oBAAoB,CAAA;CACpC,GAAG,4BAA4B,CAS/B"}
+{"version":3,"file":"acpExecutionAuthority.d.ts","sourceRoot":"","sources":["../../src/utils/acpExecutionAuthority.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AACnG,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAA;AAEtF,MAAM,WAAW,4BAA4B;IAC3C,aAAa,EAAE,CAAC,CAAA;IAChB,iBAAiB,EAAE,0BAA0B,CAAA;IAC7C,UAAU,EAAE,WAAW,GAAG,iBAAiB,CAAA;CAC5C;AAQD,+FAA+F;AAC/F,wBAAgB,wCAAwC,CACtD,kBAAkB,CAAC,EAAE,0BAA0B,GAC9C,UAAU,GAAG,SAAS,CAKxB;AAED;;;GAGG;AACH,wBAAgB,yCAAyC,CACvD,iBAAiB,CAAC,EAAE,0BAA0B,GAC7C,0BAA0B,CAa5B;AAED;;;;;;GAMG;AACH,wBAAgB,mCAAmC,CAAC,KAAK,EAAE;IACzD,iBAAiB,CAAC,EAAE,0BAA0B,CAAA;IAC9C,YAAY,CAAC,EAAE,oBAAoB,CAAA;CACpC,GAAG,4BAA4B,CAS/B"}

package/dist/utils/acpExecutionAuthority.js

@@ -1,6 +1,7 @@
 const WORKSPACE_WRITE_PROFILES = new Set([
     'standard',
     'trusted-workspace',
+    'full-access',
 ]);
 /** Map XENO's permission profile to the deliberately narrow native-provider trust contract. */
 export function nativeWorkspaceTrustForPermissionProfile(_permissionProfile) {
@@ -22,6 +23,7 @@ export function nativeExecutionPolicyForPermissionProfile(permissionProfile) {
             return 'prompted-workspace';
         case 'standard':
         case 'trusted-workspace':
+        case 'full-access':
         default:
             return 'autonomous-workspace';
     }

package/dist/utils/acpExecutionAuthority.js.map

@@ -1 +1 @@
-{"version":3,"file":"acpExecutionAuthority.js","sourceRoot":"","sources":["../../src/utils/acpExecutionAuthority.ts"],"names":[],"mappings":"AASA,MAAM,wBAAwB,GAAG,IAAI,GAAG,CAA6B;IACnE,UAAU;IACV,mBAAmB;CACpB,CAAC,CAAA;AAEF,+FAA+F;AAC/F,MAAM,UAAU,wCAAwC,CACtD,kBAA+C;IAE/C,0EAA0E;IAC1E,6EAA6E;IAC7E,4EAA4E;IAC5E,OAAO,SAAS,CAAA;AAClB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,yCAAyC,CACvD,iBAA8C;IAE9C,QAAQ,iBAAiB,EAAE,CAAC;QAC1B,KAAK,WAAW,CAAC;QACjB,KAAK,MAAM;YACT,OAAO,WAAW,CAAA;QACpB,KAAK,oBAAoB;YACvB,OAAO,oBAAoB,CAAA;QAC7B,KAAK,UAAU,CAAC;QAChB,KAAK,mBAAmB,CAAC;QACzB;YACE,OAAO,sBAAsB,CAAA;IACjC,CAAC;AACH,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,mCAAmC,CAAC,KAGnD;IACC,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,IAAI,UAAU,CAAA;IAC/D,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,SAAS,KAAK,KAAK;WACvD,wBAAwB,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;IACpD,OAAO;QACL,aAAa,EAAE,CAAC;QAChB,iBAAiB;QACjB,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;KAC3D,CAAA;AACH,CAAC"}
+{"version":3,"file":"acpExecutionAuthority.js","sourceRoot":"","sources":["../../src/utils/acpExecutionAuthority.ts"],"names":[],"mappings":"AASA,MAAM,wBAAwB,GAAG,IAAI,GAAG,CAA6B;IACnE,UAAU;IACV,mBAAmB;IACnB,aAAa;CACd,CAAC,CAAA;AAEF,+FAA+F;AAC/F,MAAM,UAAU,wCAAwC,CACtD,kBAA+C;IAE/C,0EAA0E;IAC1E,6EAA6E;IAC7E,4EAA4E;IAC5E,OAAO,SAAS,CAAA;AAClB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,yCAAyC,CACvD,iBAA8C;IAE9C,QAAQ,iBAAiB,EAAE,CAAC;QAC1B,KAAK,WAAW,CAAC;QACjB,KAAK,MAAM;YACT,OAAO,WAAW,CAAA;QACpB,KAAK,oBAAoB;YACvB,OAAO,oBAAoB,CAAA;QAC7B,KAAK,UAAU,CAAC;QAChB,KAAK,mBAAmB,CAAC;QACzB,KAAK,aAAa,CAAC;QACnB;YACE,OAAO,sBAAsB,CAAA;IACjC,CAAC;AACH,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,mCAAmC,CAAC,KAGnD;IACC,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,IAAI,UAAU,CAAA;IAC/D,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,SAAS,KAAK,KAAK;WACvD,wBAAwB,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;IACpD,OAAO;QACL,aAAa,EAAE,CAAC;QAChB,iBAAiB;QACjB,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;KAC3D,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/agent-conversation",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "license": "UNLICENSED",
   "description": "The XENO Agent conversation surface: the transcript, the composer, and the logic behind them.",
   "type": "module",
@@ -33,6 +33,7 @@
     "directory": "packages/conversation"
   },
   "dependencies": {
+    "@xenosystem/elements": "0.0.1",
     "@xenosystem/elements-react": "0.0.1",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
@@ -42,10 +43,10 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "zustand": "^5.0.2",
-    "@xenosystem/agent-interface-contract": "0.1.35",
-    "@xenosystem/agent-interface-hub-adapter": "0.1.35",
-    "@xenosystem/agent-interface-client": "0.1.35",
-    "@xenosystem/agent-interface-core": "0.1.35"
+    "@xenosystem/agent-interface-contract": "0.1.37",
+    "@xenosystem/agent-interface-client": "0.1.37",
+    "@xenosystem/agent-interface-core": "0.1.37",
+    "@xenosystem/agent-interface-hub-adapter": "0.1.37"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/composer.css

@@ -0,0 +1,334 @@
+/* =============================================================================
+   The XENO Agent composer — D9 / D9a / D11 of `XENO AGENT PANEL - SPEC.md`.
+   -----------------------------------------------------------------------------
+   🔴 PORTED VERBATIM from the LOCKED prototype — artifact `XENO Agent Panel`
+   (https://claude.ai/code/artifact/ed288e2e-6d99-490a-9e99-0f3dea486ce0), source
+   `xeno-agent-panel-proto.html`. Every rule, number and comment below is the prototype's, through
+   three mechanical transforms and NOTHING else:
+
+     1. the bench's ink conversion, so one stylesheet serves both themes
+        (`rgba(255,255,255,a)` → `rgba(var(--xa-ink),a)`, the white hover → `--xa-send-hover`),
+     2. the `xa-` prefix D9a requires — classes, keyframes and custom properties — because a bare
+        `.working` or `.menu .h` collides with a host's stylesheet, and both collisions have happened,
+     3. the `.xa-dock` scope, so nothing here reaches a document the panel is mounted in.
+
+   ⚠️ Do not "improve" a rule here. The prototype is the locked one; a defect in this file is a
+   defect there, and the fix belongs there first. `transcript.css` declares the token set.
+   ============================================================================= */
+
+  /* ── dock: notices → context strip → composer ─────────────────────────── */
+  .xa-dock { position: relative; flex: none; padding: 0 16px 14px; container-type: inline-size; }
+  .xa-dock-inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 9px; }
+
+  .xa-dock .xa-notice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; background: var(--xa-plate); border: 1px solid var(--xa-line); border-radius: 6px; }
+  .xa-dock .xa-notice.xa-center { align-items: center; }
+  .xa-dock .xa-notice .xa-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+  .xa-dock .xa-notice .xa-ttl { font-size: 12px; line-height: 1.3; font-weight: 600; color: var(--xa-t1); }
+  .xa-dock .xa-notice .xa-sub { font-size: 11px; line-height: 1.45; color: var(--xa-t4); }
+  .xa-dock .xa-notice .xa-grow { flex: 1; }
+  .xa-dock .xa-notice .xa-act { height: 24px; padding: 0 10px; background: var(--xa-send); border-radius: 4px; font-size: 11px; font-weight: 500; color: var(--xa-ground); flex: none; }
+  .xa-dock .xa-notice .xa-act:hover { background: var(--xa-send-hover); }
+  .xa-dock .xa-x { width: 20px; height: 20px; border-radius: 3px; flex: none; color: var(--xa-t5); }
+  .xa-dock .xa-x:hover { background: var(--xa-wash-hover); color: var(--xa-t2); }
+
+  .xa-dock .xa-ctx { display: flex; align-items: center; height: 30px; padding-right: 4px; background: var(--xa-wash); border: 1px solid var(--xa-line-soft); border-radius: 4px; overflow: hidden; }
+  .xa-dock .xa-wsrow { display: flex; align-items: stretch; gap: 7px; }
+  .xa-dock .xa-wsrow .xa-ctx { flex: 1; min-width: 0; }
+  .xa-dock .xa-wsrow .xa-segc { flex: none; height: 30px; padding: 3px; }
+  .xa-dock .xa-wsrow .xa-segc button { height: 22px; padding: 0 9px; }
+  .xa-dock .xa-ctx .xa-seg { display: flex; align-items: center; gap: 7px; padding: 0 10px; font-size: 11px; white-space: nowrap; }
+  .xa-dock .xa-ctx .xa-seg.xa-name { font-weight: 500; color: var(--xa-t3); }
+  .xa-dock .xa-ctx button.xa-seg { height: 100%; border-radius: 0; }
+  .xa-dock .xa-ctx button.xa-seg:hover { color: var(--xa-t2); }
+  .xa-dock .xa-ctx .xa-act1 { height: 22px; padding: 0 9px; background: rgba(var(--xa-ink),0.07); border-radius: 3px; font-size: 11px; font-weight: 500; color: var(--xa-t2); }
+  .xa-dock .xa-ctx .xa-act1:hover { background: rgba(var(--xa-ink),0.11); }
+  .xa-dock .xa-ctx .xa-meter { display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 11px; color: var(--xa-t4); }
+  .xa-dock .xa-ctx .xa-meter .xa-cells { display: flex; gap: 2px; }
+  .xa-dock .xa-ctx .xa-meter .xa-cells span { width: 6px; height: 8px; background: rgba(var(--xa-ink),0.10); border-radius: 1px; }
+  .xa-dock .xa-ctx .xa-meter .xa-cells span.xa-on { background: rgba(var(--xa-ink),0.45); }
+  .xa-dock .xa-ctx .xa-seg.xa-repo { font-weight: 500; color: var(--xa-t3); }
+  .xa-dock .xa-ctx .xa-seg.xa-dim { color: var(--xa-t4); }
+  .xa-dock .xa-ctx .xa-vr { width: 1px; height: 14px; background: var(--xa-line); flex: none; }
+  .xa-dock .xa-ctx .xa-grow { flex: 1; }
+  .xa-dock .xa-ctx .xa-diff { display: flex; gap: 6px; padding: 0 10px; font-size: 11px; font-weight: 500; }
+  .xa-dock .xa-ctx .xa-diff .xa-a { color: var(--xa-green); } .xa-ctx .xa-diff .xa-d { color: var(--xa-red); }
+  .xa-dock .xa-split { display: flex; align-items: stretch; height: 22px; }
+  .xa-dock .xa-split button { padding: 0 9px; background: rgba(var(--xa-ink),0.07); font-size: 11px; font-weight: 500; color: var(--xa-t2); border-radius: 3px 0 0 3px; }
+  .xa-dock .xa-split .xa-vr { width: 1px; background: rgba(0,0,0,0.35); height: auto; }
+  .xa-dock .xa-split button.xa-caret { width: 20px; padding: 0; border-radius: 0 3px 3px 0; }
+  .xa-dock .xa-split button:hover { background: rgba(var(--xa-ink),0.11); }
+  .xa-dock .xa-ctx .xa-x { width: 22px; height: 22px; margin-left: 4px; }
+
+  .xa-dock .xa-box { display: flex; flex-direction: column; justify-content: center; gap: 9px; min-height: 46px; padding: 9px 11px; background: var(--xa-plate); border: 1px solid var(--xa-line); border-radius: 6px; }
+  .xa-dock .xa-box.xa-off { opacity: 0.55; }
+  .xa-dock .xa-box textarea {
+    display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; resize: none;
+    font: inherit; font-size: 13px; line-height: 1.5; color: var(--xa-ink-text); caret-color: var(--xa-t1);
+    min-height: 19.5px; max-height: 220px; overflow-y: auto; scrollbar-width: thin;
+  }
+  .xa-dock .xa-box textarea::placeholder { color: var(--xa-t6); }
+  /* the bench's `textarea:focus { outline: none }`: the box is the field's frame, so a host's focus ring
+     (`*:focus-visible`, drawn outside the field) reads as a stray stroke over it — DESIGN_SYSTEM.md exempts
+     text entry, and only text entry, from the ring */
+  .xa-dock .xa-box textarea:focus, .xa-dock .xa-box textarea:focus-visible { outline: none; box-shadow: none; }
+  .xa-dock .xa-tiles { display: flex; flex-wrap: wrap; gap: 7px; }
+  .xa-dock .xa-tile { position: relative; width: 44px; height: 44px; background: var(--xa-tile); border: 1px solid var(--xa-line-tip); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--xa-t3); }
+  .xa-dock .xa-tile.xa-img { background: var(--xa-tile-img); overflow: visible; }
+  .xa-dock .xa-tile.xa-img .xa-thumb { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(135deg, #3a3a40 0%, #232326 55%, #2d2d31 100%); }
+  .xa-dock .xa-tile.xa-img svg { position: relative; }
+  .xa-dock .xa-tile .xa-rm { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; background: var(--xa-ground); border: 1px solid rgba(var(--xa-ink),0.18); border-radius: 3px; color: var(--xa-t2); opacity: 0; transition: opacity 90ms; }
+  .xa-dock .xa-tile:hover .xa-rm, .xa-dock .xa-tile .xa-rm:focus-visible { opacity: 1; }
+  .xa-dock .xa-tile.xa-more { background: rgba(var(--xa-ink),0.02); border: 1px dashed rgba(var(--xa-ink),0.14); color: var(--xa-t5); }
+  .xa-dock .xa-tile.xa-more:hover { color: var(--xa-t3); }
+
+  .xa-dock .xa-controls { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
+  /* while a turn runs the lane, model and effort are locked to it, so they leave — one by one,
+     left to right, each blurring and fading where it stands before it drops (the chip's own sink);
+     the group folds its width once the last has gone and the counter lands beside the square.
+     Approvals and + stay: those are still yours mid-turn. Back: the reverse order, materialising
+     as they land. The per-child delays ride on --xa-d/--xa-r (set by cadence() at render), because the
+     animation shorthand resets animation-delay and outranks any per-child rule. */
+  .xa-dock .xa-controls.xa-running .xa-mgrp { pointer-events: none; animation: xa-mgfold 1ms linear var(--xa-fold, 500ms) both; }
+  .xa-dock .xa-controls.xa-running .xa-mgrp > * { animation: xa-sink 200ms cubic-bezier(.4,0,.8,.4) both; animation-delay: var(--xa-d, 0ms); }
+  .xa-dock .xa-controls.xa-idle .xa-mgrp > * { animation: xa-rise 280ms cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--xa-r, 0ms); }
+  @keyframes xa-mgfold { to { width: 0; overflow: hidden; opacity: 0; } }
+  /* the counter is out of the flow — it can never push the fading group — and lands to the left
+     of the square once the group has folded */
+  .xa-dock .xa-status { display: none; position: absolute; right: 31px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--xa-t4); white-space: nowrap; }
+  .xa-dock .xa-controls.xa-running .xa-status { display: inline; animation: xa-stin 200ms ease-out var(--xa-stin, 520ms) both; }
+  @keyframes xa-stin { from { opacity: 0; transform: translate(6px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
+  .xa-dock .xa-controls .xa-grow { flex: 1; }
+  .xa-dock .xa-ic { width: 24px; height: 24px; border-radius: 4px; color: var(--xa-t4); }
+  .xa-dock .xa-ic:hover, .xa-dock .xa-ic.xa-open { background: var(--xa-wash-hover); color: var(--xa-t2); }
+  .xa-dock .xa-segc { display: flex; align-items: center; gap: 2px; padding: 2px; background: var(--xa-wash); border: 1px solid var(--xa-line-soft); border-radius: 4px; }
+  .xa-dock .xa-segc button { padding: 3px 8px; border-radius: 3px; font-size: 11px; line-height: 1; font-weight: 500; color: var(--xa-t4); }
+  .xa-dock .xa-segc button:hover { color: var(--xa-t2); }
+  .xa-dock .xa-segc button.xa-on { background: var(--xa-seg-on); color: var(--xa-t1); }
+  .xa-dock .xa-segc:hover { border-color: var(--xa-line-tip); }
+  .xa-dock .xa-txt { gap: 6px; height: 24px; padding: 0 6px; border-radius: 4px; font-size: 11px; line-height: 1; font-weight: 500; color: var(--xa-t3); white-space: nowrap; }
+  .xa-dock .xa-txt:hover, .xa-dock .xa-txt.xa-open { background: var(--xa-wash-hover); color: var(--xa-t1); }
+  .xa-dock .xa-txt.xa-amber { color: var(--xa-amber); }
+  .xa-dock .xa-txt.xa-amber:hover, .xa-dock .xa-txt.xa-amber.xa-open { background: rgba(217,154,78,0.12); color: var(--xa-amber); }
+  /* approvals — the chip is its own chooser, the mirror of the lane: this side is left-anchored,
+     so the icon blurs away and the word slides LEFT into its space while the other two policies
+     unfold to the RIGHT. The whole group rises in with Agent and sinks out with Chat. */
+  .xa-dock .xa-permgrp { display: inline-flex; align-items: center; }
+  .xa-dock .xa-permgrp .xa-txt[data-permpick] { gap: 0; }
+  .xa-dock .xa-permgrp .xa-permicon { display: inline-flex; width: 12px; margin-right: 6px; overflow: hidden; }
+  .xa-dock .xa-permgrp .xa-permicon.xa-out { animation: xa-blurout 220ms ease-out both; }
+  .xa-dock .xa-permgrp .xa-permicon.xa-hold { width: 0; margin-right: 0; opacity: 0; }
+  .xa-dock .xa-permgrp .xa-permicon.xa-in { animation: xa-blurin 260ms ease-out both; }
+  .xa-dock .xa-permgrp .xa-permpick { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; }
+  .xa-dock .xa-permgrp .xa-permpick .xa-alt { height: 24px; padding: 0 6px; border-radius: 4px; font-size: 11px; line-height: 1; font-weight: 500; color: var(--xa-t4); animation: xa-altinL 200ms cubic-bezier(.2,.7,.2,1) both; }
+  .xa-dock .xa-permgrp .xa-permpick .xa-alt:hover { color: var(--xa-t1); }
+  .xa-dock .xa-permgrp .xa-permpick .xa-alt.xa-amber { color: var(--xa-amber); }
+  @keyframes xa-altinL { from { opacity: 0; transform: translateX(-10px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
+  .xa-dock .xa-permgrp .xa-txt:hover, .xa-dock .xa-permgrp .xa-txt.xa-open { background: none; color: var(--xa-t1); }
+  .xa-dock .xa-permgrp .xa-txt.xa-amber:hover, .xa-dock .xa-permgrp .xa-txt.xa-amber.xa-open { background: none; color: var(--xa-amber); }
+  .xa-dock .xa-permgrp.xa-rise { animation: xa-rise 280ms cubic-bezier(.2,.7,.2,1) both; }
+  .xa-dock .xa-permgrp.xa-sink { animation: xa-sink 200ms cubic-bezier(.4,0,.8,.4) both; pointer-events: none; }
+  @keyframes xa-rise { 0% { transform: translateY(44px); opacity: 0; filter: blur(3px); } 45% { transform: translateY(14px); opacity: 0; filter: blur(3px); } 100% { transform: none; opacity: 1; filter: blur(0); } }
+  @keyframes xa-sink { 0% { transform: none; opacity: 1; filter: blur(0); } 55% { transform: translateY(14px); opacity: 0; filter: blur(3px); } 100% { transform: translateY(44px); opacity: 0; filter: blur(3px); } }
+  .xa-dock .xa-txt .xa-vr { width: 1px; height: 10px; background: rgba(var(--xa-ink),0.12); }
+  .xa-dock .xa-txt .xa-pill { padding: 3px 6px; background: rgba(var(--xa-ink),0.06); border-radius: 3px; font-size: 10px; line-height: 1; color: var(--xa-t4); }   /* 16px tall, 3px corners — the knob's own geometry */
+  .xa-dock .xa-txt .xa-model { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
+  /* the model control: three segments, three popovers, one visual object */
+  .xa-dock .xa-mgrp { display: flex; align-items: center; height: 24px; }
+  .xa-dock .xa-mgrp .xa-txt { padding: 0 6px; height: 24px; }
+  .xa-dock .xa-mgrp .xa-vr { width: 1px; height: 10px; background: rgba(var(--xa-ink),0.12); flex: none; }
+  .xa-dock .xa-mgrp .xa-txt.xa-pillbtn { padding: 0 4px; }
+  /* inside the model group hover is a TEXT change, never a box under a word */
+  .xa-dock .xa-mgrp .xa-txt:hover, .xa-dock .xa-mgrp .xa-txt.xa-open { background: none; color: var(--xa-t1); }
+  .xa-dock .xa-mgrp .xa-txt.xa-down:hover, .xa-dock .xa-mgrp .xa-txt.xa-down.xa-open { background: var(--xa-amber-wash); color: var(--xa-amber); }
+  .xa-dock .xa-mgrp .xa-txt.xa-pillbtn:hover, .xa-dock .xa-mgrp .xa-txt.xa-pillbtn.xa-open { background: none; }
+  .xa-dock .xa-mgrp .xa-txt.xa-pillbtn:hover .xa-pill { background: var(--xa-seg-on); color: var(--xa-t1); }
+  .xa-dock .xa-mgrp .xa-txt.xa-pillbtn.xa-open .xa-pill { background: var(--xa-send); color: var(--xa-ground); font-weight: 600; }   /* while the popover is open the pill IS the knob */
+  /* the lane chooser: click the lane and it becomes the choice — the icon blurs away, the
+     two other lanes unfold to the LEFT of the label, one click picks, the new icon blurs in */
+  .xa-dock .xa-mgrp .xa-txt[data-lanepick] { gap: 0; }
+  .xa-dock .xa-mgrp .xa-laneicon { display: inline-flex; width: 12px; margin-right: 6px; overflow: hidden; }
+  .xa-dock .xa-mgrp .xa-laneicon.xa-out { animation: xa-blurout 220ms ease-out both; }
+  .xa-dock .xa-mgrp .xa-laneicon.xa-hold { width: 0; margin-right: 0; opacity: 0; }
+  .xa-dock .xa-mgrp .xa-laneicon.xa-in { animation: xa-blurin 260ms ease-out both; }
+  @keyframes xa-blurout { from { filter: blur(0); opacity: 1; width: 12px; margin-right: 6px; } 60% { filter: blur(4px); opacity: 0; width: 12px; margin-right: 6px; } to { filter: blur(4px); opacity: 0; width: 0; margin-right: 0; } }
+  @keyframes xa-blurin { from { filter: blur(4px); opacity: 0; width: 0; margin-right: 0; } 40% { filter: blur(4px); opacity: 0; width: 12px; margin-right: 6px; } to { filter: blur(0); opacity: 1; width: 12px; margin-right: 6px; } }
+  .xa-dock .xa-mgrp .xa-lanepick { display: inline-flex; align-items: center; gap: 2px; margin-right: 2px; }
+  .xa-dock .xa-mgrp .xa-lanepick .xa-alt { gap: 5px; height: 24px; padding: 0 6px; border-radius: 4px; font-size: 11px; line-height: 1; font-weight: 500; color: var(--xa-t4); animation: xa-altin 200ms cubic-bezier(.2,.7,.2,1) both; }
+  .xa-dock .xa-mgrp .xa-lanepick .xa-alt:hover { color: var(--xa-t1); }
+  .xa-dock .xa-mgrp .xa-lanepick .xa-alt.xa-na { color: var(--xa-amber); }
+  .xa-dock .xa-mgrp .xa-lanepick .xa-alt .xa-dot { width: 6px; height: 6px; background: var(--xa-amber); border-radius: 1px; }
+  @keyframes xa-altin { from { opacity: 0; transform: translateX(10px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
+  .xa-dock .xa-txt.xa-down { padding: 0 9px; height: 26px; background: var(--xa-amber-wash); border: 1px solid var(--xa-amber-line); color: var(--xa-amber); }
+  .xa-dock .xa-txt.xa-down:hover { background: rgba(217,154,78,0.13); }
+  .xa-dock .xa-txt.xa-down .xa-dot { width: 6px; height: 6px; background: var(--xa-amber); border-radius: 1px; }
+  .xa-dock .xa-send { width: 24px; height: 24px; border-radius: 4px; background: var(--xa-send); color: var(--xa-ground); }
+  .xa-dock .xa-send:hover { background: var(--xa-send-hover); }
+  .xa-dock .xa-send.xa-idle { background: rgba(var(--xa-ink),0.10); color: var(--xa-t5); }
+  .xa-dock .xa-send.xa-idle:hover { background: rgba(var(--xa-ink),0.14); }
+  /* send ⇄ stop: one 24px square. While a turn runs the arrow gives way to a breathing square
+     inside a faint ring, with a low-opacity light running the edge — the same 1.4s clock as the
+     transcript's mark. Clicking it stops the turn. */
+  .xa-dock .xa-send { position: relative; overflow: hidden; transition: background 160ms cubic-bezier(.2,.7,.2,1), color 160ms cubic-bezier(.2,.7,.2,1), transform 90ms cubic-bezier(.2,.7,.2,1); }
+  .xa-dock .xa-send:active { transform: scale(0.88); }   /* the press — send and stop alike; release is the click */
+  .xa-dock .xa-send .xa-arrow, .xa-dock .xa-send .xa-stop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 160ms cubic-bezier(.2,.7,.2,1), transform 160ms cubic-bezier(.2,.7,.2,1), filter 160ms cubic-bezier(.2,.7,.2,1); }
+  .xa-dock .xa-send .xa-stop span { width: 9px; height: 9px; background: currentColor; border-radius: 3px; }   /* the ring's rx and the knob's radius — one number */
+  .xa-dock .xa-send .xa-stop { opacity: 0; transform: scale(0.6); filter: blur(2px); }
+  .xa-dock .xa-send.xa-running { background: rgba(var(--xa-ink),0.11); color: var(--xa-t1); }   /* on the plate 8% vanished and the ring read as a smaller square */
+  .xa-dock .xa-send.xa-running .xa-arrow { opacity: 0; transform: scale(0.6); filter: blur(2px); }
+  .xa-dock .xa-send.xa-running .xa-stop { opacity: 1; transform: none; filter: none; }
+  .xa-dock .xa-send.xa-running .xa-stop span { animation: xa-breathe 1.4s ease-in-out infinite; }
+  /* both animations are gated on .xa-running so they start on the same instant as the square's */
+  /* hover while running: the same square, the same breath, the same running light — only the
+     colours invert. White ground, black square, a dark light on the edge. Nothing pauses. */
+  .xa-dock .xa-send.xa-running:hover, .xa-dock .xa-send.xa-running:focus-visible { background: var(--xa-send-hover); color: var(--xa-ground); }
+
+  /* ── menus ────────────────────────────────────────────────────────────── */
+  .xa-dock .xa-menu { position: absolute; z-index: 30; display: none; flex-direction: column; padding: 5px; background: var(--xa-menu); border: 1px solid var(--xa-line-menu); border-radius: 8px; max-width: calc(100vw - 32px); }
+  .xa-dock .xa-menu.xa-show { display: flex; }
+  .xa-dock .xa-menu .xa-h { padding: 7px 9px 6px; }
+  .xa-dock .xa-menu .xa-hr { height: 1px; margin: 5px 9px; background: var(--xa-line-soft); }
+  /* typed prefixes — one popover for the three: / do · @ read · # for. It opens above the box,
+     left-aligned to it, and filters as you type; ↑↓ move, ↵ or ⇥ take, Esc closes. */
+  /* the cursor is one 6px square that travels up and down the list; the row it lands on moves its
+     content right to make room, the others sit flush at the padding. Both motions linear, 120ms. */
+  .xa-dock .xa-menu.xa-typed { position: absolute; }
+  .xa-dock .xa-menu.xa-typed .xa-mrow { gap: 8px; padding-left: 9px; transition: padding-left 120ms linear; }
+  .xa-dock .xa-menu.xa-typed .xa-mrow .xa-gl { flex: none; display: inline-flex; color: var(--xa-t5); }
+  .xa-dock .xa-menu.xa-typed .xa-mrow.xa-on .xa-gl { color: var(--xa-t2); }
+  .xa-dock .xa-menu.xa-typed .xa-h + .xa-h, .xa-dock .xa-menu.xa-typed .xa-mrow + .xa-h { margin-top: 4px; }
+  .xa-dock .xa-menu.xa-typed .xa-typed-rows { max-height: 312px; overflow-y: auto; scrollbar-width: thin; }
+  .xa-dock .xa-menu.xa-typed .xa-mrow.xa-on { padding-left: 23px; }
+  .xa-dock .xa-menu.xa-typed .xa-mark { position: absolute; left: 14px; top: 0; width: 6px; height: 6px; border-radius: 1px; background: var(--xa-send); pointer-events: none; transition: transform 120ms linear; }
+  .xa-dock .xa-menu.xa-typed .xa-mark.xa-still { transition: none; }
+  .xa-dock .xa-menu.xa-typed .xa-mark[hidden] { display: none; }
+  .xa-dock .xa-menu.xa-typed .xa-mrow .xa-tok { display: flex; min-width: 0; color: var(--xa-t2); }
+  .xa-dock .xa-menu.xa-typed .xa-mrow .xa-tok .xa-dir { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--xa-t4); }   /* the folder gives way; the name never does */
+  .xa-dock .xa-menu.xa-typed .xa-mrow .xa-tok .xa-name { flex: none; white-space: nowrap; }
+  .xa-dock .xa-menu.xa-typed .xa-mrow .xa-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--xa-t5); }
+  .xa-dock .xa-menu.xa-typed .xa-mrow.xa-on .xa-desc { color: var(--xa-t4); }
+  .xa-dock .xa-menu.xa-typed .xa-mrow .xa-kind { margin-left: auto; flex: none; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--xa-t6); }
+  .xa-dock .xa-menu.xa-typed .xa-none { padding: 7px 9px; font-size: 11px; color: var(--xa-t5); }
+  /* a taken reference is a chip in the SENT message (`.xa-chip`, with its glyph); in the box it is the
+     words as typed — the bench's field is the textarea and nothing else */
+  .xa-dock .xa-box textarea { letter-spacing: -0.006em; }   /* a form control does not inherit it */
+  .xa-dock .xa-chip { display: inline-flex; align-items: center; gap: 4px; vertical-align: -2px; padding: 1px 5px 1px 4px; background: rgba(var(--xa-ink),0.07); border: 1px solid var(--xa-line-soft); border-radius: 3px; font-size: 12px; line-height: 1.3; color: var(--xa-t1); white-space: nowrap; }
+  .xa-dock .xa-chip svg { flex: none; color: var(--xa-t4); }
+  .xa-dock .xa-mrow { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border-radius: 4px; text-align: left; font-size: 12px; color: var(--xa-t3); }
+  .xa-dock .xa-mrow .xa-rail { width: 2px; height: 13px; background: transparent; flex: none; }
+  .xa-dock .xa-mrow.xa-tall { align-items: stretch; padding: 8px 9px; } .xa-mrow.xa-tall .xa-rail { height: auto; }
+  .xa-dock .xa-mrow .xa-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+  .xa-dock .xa-mrow .xa-sub { font-size: 11px; line-height: 1.35; color: var(--xa-t5); }
+  .xa-dock .xa-mrow .xa-idx { margin-left: auto; font-size: 11px; color: var(--xa-t6); }
+  .xa-dock .xa-mrow .xa-na { margin-left: auto; font-size: 10px; color: var(--xa-t6); }
+  .xa-dock .xa-mrow:hover { background: rgba(var(--xa-ink),0.04); color: var(--xa-t2); }
+  .xa-dock .xa-menu .xa-mrow + .xa-mrow { margin-top: 2px; }   /* a chosen row and a hovered one beneath it are two things, not one block */
+  .xa-dock .xa-mrow.xa-on { background: var(--xa-wash-hover); color: var(--xa-t1); font-weight: 500; }
+  .xa-dock .xa-mrow.xa-on .xa-rail { background: var(--xa-send); }
+  .xa-dock .xa-mrow.xa-on.xa-amber { background: var(--xa-amber-wash); color: var(--xa-amber); }
+  .xa-dock .xa-mrow.xa-on.xa-amber .xa-rail { background: var(--xa-amber); }
+  .xa-dock .xa-mrow.xa-on.xa-amber .xa-sub { color: var(--xa-amber-dim); }
+  .xa-dock .xa-mrow:disabled { color: var(--xa-t6); } .xa-mrow:disabled:hover { background: none; }
+  .xa-dock .xa-mrow .xa-chev { margin-left: auto; color: var(--xa-t6); }
+  /* effort — locked. H's structure (the chosen cell opens up to hold the word) with I's motion (it
+     glides). At Ultra the five filled cells FUSE into one bar at their own 10px height and 1px
+     corners — the gaps close, inner corners go square — and one fixed lattice of 2px squares on a
+     3px pitch, three rows, runs the bar. Nothing moves: a crest of brightness travels right-to-left
+     along it, stepping up through five bands toward Ultra; every square twinkles on its own clock. */
+  .xa-dock .xa-line.xa-cells { display: flex; align-items: center; padding: 7px 8px; width: 100%; }
+  .xa-dock .xa-ends { display: flex; justify-content: space-between; padding: 7px 9px 0; font-size: 10px; line-height: 1; color: var(--xa-t5); }
+  .xa-dock .xa-ends + .xa-line.xa-cells { padding-top: 6px; }
+  .xa-dock .xa-sl.xa-cells { position: relative; flex: 1; display: flex; align-items: center; gap: 2px; height: 16px; cursor: pointer; touch-action: none; user-select: none; }
+  .xa-dock .xa-sl.xa-cells .xa-cell { position: relative; z-index: 1; flex: 1 1 0; height: 10px; background: rgba(var(--xa-ink),0.07); border-radius: 1px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 10px; font-weight: 600; color: transparent; white-space: nowrap; transition: background 120ms, height 120ms, border-radius 120ms; will-change: transform; transform-origin: left center; }
+  .xa-dock .xa-sl.xa-cells .xa-cell.xa-on { background: rgba(var(--xa-ink),0.26); }
+  .xa-dock .xa-sl.xa-cells .xa-cell.xa-cur { flex: 0 0 54px; height: 16px; background: var(--xa-send); color: var(--xa-ground); border-radius: 3px; animation: xa-word 220ms ease-out both; }
+  @keyframes xa-word { from { color: transparent; } 60% { color: transparent; } to { color: var(--xa-ground); } }
+  .xa-dock .xa-sl.xa-cells:hover .xa-cell.xa-pre { background: rgba(var(--xa-ink),0.16); }
+  .xa-dock .xa-sl.xa-cells.xa-ultra { gap: 0; }
+  .xa-dock .xa-sl.xa-cells.xa-ultra .xa-cell.xa-cur { margin-left: 2px; }
+  .xa-dock .xa-sl.xa-cells.xa-ultra .xa-cell.xa-on { border-radius: 0; }
+  .xa-dock .xa-sl.xa-cells.xa-ultra .xa-cell.xa-on:first-child { border-radius: 3px 0 0 3px; }   /* the bar's outer corners take the knob's radius */
+  .xa-dock .xa-sl.xa-cells.xa-ultra .xa-cell.xa-on:nth-child(5) { border-radius: 0 3px 3px 0; }
+  .xa-dock .xa-sl.xa-cells .xa-flow { position: absolute; top: 3px; height: 10px; border-radius: 3px; overflow: hidden; z-index: 2; pointer-events: none; animation: xa-flowin 320ms ease-out both; }
+  @keyframes xa-flowin { from { opacity: 0; } to { opacity: 1; } }
+  .xa-dock .xa-sl.xa-cells .xa-flow i { position: absolute; left: var(--xa-x); top: var(--xa-y); width: 2px; height: 2px; background: var(--xa-send-hover); opacity: var(--xa-lo);
+    animation: xa-wave 1600ms ease-in-out infinite, xa-twinkle var(--xa-tt) ease-in-out infinite; animation-delay: var(--xa-wd), var(--xa-td); }
+  @keyframes xa-wave { 0%, 100% { opacity: var(--xa-lo); } 38% { opacity: var(--xa-hi); } }
+  @keyframes xa-twinkle { 0%, 100% { background: rgba(var(--xa-ink),0.55); } 50% { background: var(--xa-send-hover); } }
+
+  /* ── tooltip ──────────────────────────────────────────────────────────── */
+  .xa-dock .xa-tip { position: absolute; z-index: 35; display: none; align-items: flex-start; gap: 18px; max-width: 268px; padding: 8px 10px; background: var(--xa-menu); border: 1px solid var(--xa-line-tip); border-radius: 6px; pointer-events: none; }
+  .xa-dock .xa-tip.xa-show { display: flex; }
+  .xa-dock .xa-tip .xa-t { font-size: 11px; line-height: 1.4; color: var(--xa-t2); }
+  .xa-dock .xa-tip .xa-k { font-size: 10px; line-height: 1.4; color: var(--xa-t6); white-space: nowrap; }
+
+/* ── the two rules the BENCH settled after the prototype was locked ──────────
+   The prototype compacts on the VIEWPORT (`@media (max-width: 560px)`), which is the wrong measure
+   for a panel: a 520px panel in a 1600px window would never compact. D11 accepted the container
+   rule, and the bench carries it. Everything else above is the prototype's. */
+/* the container is the DOCK, as in the bench (`.dock { container-type: inline-size }`) — it was the
+   workspace row here, which measured a narrower box than the one the thresholds were chosen for */
+@container (max-width: 600px) { .xa-dock .xa-ctx .xa-seg.xa-branch, .xa-dock .xa-ctx .xa-vr.xa-branch { display: none; } }
+/* Narrow: every dim segment goes, and the dividers with them — the bench's rule, unqualified.
+   There was a `:not(.xa-keep)` here so the run-location chip ("This machine" / "Hosted sandbox")
+   survived, on the argument that a billed sandbox must stay visible. Removed 2026-09-15: a chip
+   marked `dim` and then exempted from the dim rule is having it both ways, and it was the last
+   divergence from the bench at 480/420. If that cost ever needs to be visible when narrow, the fix
+   is to stop calling the segment dim — not to carve a hole in the rule that hides dim things. */
+@container (max-width: 520px) { .xa-dock .xa-ctx .xa-seg.xa-dim, .xa-dock .xa-ctx > .xa-vr:not(.xa-branch) { display: none; } }
+/* the bench lists `.ctx .diff` here too, but its own `.ctx .diff { display: flex }` is declared AFTER the
+   query and wins — so in the bench the diff never hides, at any width (measured at 420: `+1 −1` stays).
+   Ported as it BEHAVES, not as it was written. */
+@container (max-width: 440px) { .xa-dock .xa-ctx .xa-meter > span:not(.xa-cells), .xa-dock .xa-split .xa-vr, .xa-dock .xa-split .xa-caret { display: none; } }
+/* the strip's labels never wrap; the workspace's NAME is the one segment that ellipsizes, because it
+   says which project this turn touches and the dim segments give way around it (the bench's rules) */
+.xa-dock .xa-ctx .xa-meter, .xa-dock .xa-ctx .xa-act1, .xa-dock .xa-split button { white-space: nowrap; }
+.xa-dock .xa-ctx .xa-seg.xa-name { min-width: 0; }
+.xa-dock .xa-ctx .xa-seg.xa-name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+/* a disabled control says so — the prototype only ever renders live ones */
+.xa-dock button:disabled { cursor: not-allowed; color: var(--xa-t6); }
+.xa-dock .xa-segc button:disabled:hover, .xa-dock .xa-txt:disabled:hover, .xa-dock .xa-ic:disabled:hover { background: none; color: var(--xa-t6); }
+/* the send square, when there is nothing to send, is not a button to press */
+/* the ghost text the product's suggestions write, in the box's own metrics — the field is positioned
+   only while a suggestion is showing, so an idle field is the bench's: a textarea and nothing more */
+.xa-dock .xa-box .xa-field.xa-ghosting { position: relative; }
+.xa-dock .xa-box .xa-ghost { position: absolute; inset: 0; pointer-events: none; white-space: pre-wrap; overflow-wrap: break-word; overflow: hidden; font: inherit; font-size: 13px; line-height: 1.5; letter-spacing: -0.006em; color: transparent; }
+.xa-dock .xa-box .xa-ghost .xa-ghost-text { color: rgba(var(--xa-ink), 0.22); }
+/* the trays the panel carries that the prototype does not (Tasks, background runs, delegated
+   agents) are the transcript's `.xa-tasks`; nothing here restyles them. */
+/* reduced motion: `transcript.css` carries the ONE rule for the whole panel — the bench's `none`. This
+   file used to shorten every duration to 0.001ms instead, which still runs each animation to its end
+   state and fires its events; two rules for one preference disagreed with each other and with the bench. */
+
+/* ── what a real host needs that the prototype's fixtures did not ────────────
+   The prototype lists three models and four harnesses, so its menus never scroll and never need a
+   search. A live catalog does both. These four rules are the ONLY additions to the menu. */
+.xa-dock .xa-menu .xa-mrows { display: flex; flex-direction: column; max-height: 312px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--xa-ink), 0.12) transparent; }
+.xa-dock .xa-menu .xa-search { display: block; width: 100%; height: 26px; margin: 2px 0 4px; padding: 0 9px; background: var(--xa-well); border: 1px solid var(--xa-line-soft); border-radius: 4px; font: inherit; font-size: 11px; color: var(--xa-t1); outline: none; box-shadow: none; }
+.xa-dock .xa-menu .xa-search::placeholder { color: var(--xa-t6); }
+.xa-dock .xa-menu .xa-none { padding: 7px 9px; font-size: 11px; color: var(--xa-t5); }
+
+/* 🔴 ONE correction to the prototype, because the prototype contradicts ITSELF here. Its comment on
+   the typed popover says "the row it lands on moves its content right to make room, the others sit
+   FLUSH at the padding" — and its rows inherit `justify-content: center` from the button reset, so
+   a row whose content is narrower than the popover is centred instead. Measured in the prototype
+   itself: four rows, glyph offsets 92.6 / 91.0 / 56.5 / 74.6px from their own left edge. The one
+   declaration below is what the comment describes; it belongs in the prototype too. */
+.xa-dock .xa-menu .xa-mrow { justify-content: flex-start; }
+
+/* ⚠️ The prototype has TWO rows and they are not the same object: `.xrow` in the transcript and
+   `.row` in a menu. This port's transcript already owns `xa-row` (it is the step row), so the
+   menu's row is `xa-mrow` — the prototype's `.row` rules verbatim, under a name that cannot
+   inherit the step row's geometry. It did: `flex-wrap: wrap` from the step row put a menu row's
+   description on a second line. */
+
+/* 🔴 A SECOND correction to the prototype, the same shape as the one above: a rule written for
+   one variant that the other variant inherits wrongly.
+   `.xa-mgrp .xa-txt[data-lanepick] { gap: 0 }` is correct for the NORMAL lane control, because
+   its icon carries its own `margin-right: 6px` so the blur animation can collapse it to
+   `width: 0; margin-right: 0`. The UNAVAILABLE variant swaps that icon for a `.xa-dot`, which
+   has no margin of its own — so it inherits gap 0 and sits flush against the word. Measured in
+   the running app: dot 865→871, name 871→958 — a 0 px gap, with the chevron only LOOKING spaced
+   because its glyph has internal whitespace inside a 10 px box.
+   The dot is not animated, so it can simply own its spacing the way the icon does. This belongs
+   in the prototype too. */
+.xa-dock .xa-mgrp .xa-txt.xa-down .xa-dot { margin-right: 6px; }

package/src/styles.css

@@ -0,0 +1,7 @@
+/*
+ * `@xenosystem/agent-conversation/styles.css` — everything the conversation needs that is not a
+ * Tailwind utility. A bundled host imports this beside `agent-interface-ui/agent.css`; the panel's
+ * compiled stylesheet inlines it. Plain CSS, `xa-` prefixed, scoped under `.xa-transcript`.
+ */
+@import './transcript.css';
+@import './composer.css';