@xenosystem/agent-interface-ui 0.1.108 → 0.1.110

package/dist/agent.css

@@ -7567,6 +7567,10 @@ a.xeno-source-card:focus-visible {
 /* the bench's motion rule: a person who asked for less motion gets none — no rise, no glide, no breathing */
 @media (prefers-reduced-motion: reduce) {
   :where(.xa-app, .xa-transcript, .xa-dock), :where(.xa-app, .xa-transcript, .xa-dock) *, :where(.xa-app, .xa-transcript, .xa-dock) *::before, :where(.xa-app, .xa-transcript, .xa-dock) *::after { animation: none !important; transition: none !important; }
+  /* animations are off, so an exit has to be its end state: the outgoing tool line and the settling dot go at once
+     instead of sitting under what replaced them until their element is removed */
+  .xa-line .xa-cur .xa-gl.xa-out, .xa-line .xa-cur .xa-t.xa-out { display: none; }
+  .xa-turn.xa-settle .xa-line .xa-dot, .xa-turn.xa-settle .xa-line.xa-thoughtsolo > .xa-vr { opacity: 0; }
 }
 /* back to the live end of the thread — shows only when you have scrolled up (bench `.tobottom`) */
 .xa-tobottom { position: absolute; right: 22px; z-index: 5; width: 24px; height: 24px; border-radius: 4px; background: var(--xa-plate); border: 1px solid var(--xa-line-tip); color: var(--xa-t3); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 160ms linear, transform 160ms var(--xa-ease); }
@@ -8029,10 +8033,6 @@ a.xeno-source-card:focus-visible {
 .xa-row.xa-think .xa-full { min-height: 0; overflow: hidden; font-size: 11.5px; line-height: 16px; color: var(--xa-t4); }
 .xa-row.xa-think .xa-full p { margin: 0 0 4px; } .xa-row.xa-think .xa-full p:last-child { margin: 0; }
 /* the plan row keeps the list folded under it for the record; the list itself rides the composer */
-.xa-row.xa-plan .xa-head { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; cursor: pointer; }
-.xa-planwrap { flex-basis: 100%; margin: -9px 0 0 43px; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--xa-ease), margin 220ms var(--xa-ease); }
-.xa-row.xa-plan.xa-open .xa-planwrap { grid-template-rows: 1fr; margin: 0 0 0 43px; }
-.xa-planwrap > div { min-height: 0; overflow: hidden; }
 .xa-plan-list { display: flex; flex-direction: column; padding-bottom: 2px; }
 .xa-plan-list .xa-item, .xa-tasks .xa-item { display: flex; align-items: center; gap: 9px; min-height: 22px; font-size: 11px; color: var(--xa-t4); }
 .xa-plan-list .xa-item .xa-sq, .xa-tasks .xa-item .xa-sq { flex: none; width: 6px; height: 6px; border-radius: 1px; border: 1px solid var(--xa-t5); background: none; transition: background 160ms linear, border-color 160ms linear; }
@@ -8304,6 +8304,10 @@ img.xa-fav { padding: 1px; background: #fff; }
 .xa-tasks.xa-open .xa-listwrap { grid-template-rows: 1fr; }
 .xa-tasks .xa-list { min-height: 0; overflow: hidden; }
 .xa-tasks .xa-list .xa-in { padding: 2px 10px 6px; border-top: 1px solid rgba(var(--xa-ink), 0.05); max-height: 160px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--xa-ink), 0.12) transparent; }
+/* while the person is typing, the trays above the field step back: the field is the focus, the trays are context.
+   Hover or focus on a tray brings it back to full strength. */
+.xa-tasks { transition: opacity 160ms linear; }
+.xa-dock:has(.xa-field textarea:focus) .xa-tasks:not(:hover):not(:focus-within) { opacity: 0.45; }
 
 /* a background run's controls — on the row that started it, and on the tray's items. Text, never a
    button plate: a row is a sentence, and these are the two verbs it accepts. */
@@ -8320,6 +8324,92 @@ img.xa-fav { padding: 1px; background: #fff; }
 
 /* the thread is still opening: the clock line alone, the reply not yet begun */
 .xa-turn.xa-opening .xa-rail { min-height: 0; }
+
+
+
+/* =============================================================================
+   The rail — XENO AGENT PANEL - SPEC.md D10 and XENO AGENT TRANSCRIPT - STEP KINDS.md, unchanged:
+   the family's glyph in an 18px square on one rail that joins the markers, the box EARNED (bare and
+   breathing on the 1.4s clock while the step runs, boxed when it settles), `verb · object` then the
+   result right-aligned and tabular.
+
+   One amendment (owner, 2026-10-16): an OPENED step becomes a plate — the row and what it prints, in one
+   full-width surface one step lighter than the ground — instead of its detail hanging off the rail on
+   branches. The rail runs through the plate's marker column unbroken; nothing about a closed step changes.
+   ============================================================================= */
+.xa-rail { margin: 0 -8px; padding: 0 8px; }   /* room for an open plate on both sides, evenly — the thread scrubber sits outside the column, so it needs no gutter here */
+.xa-row > .xa-res { margin-left: auto; padding-left: 12px; }
+.xa-row > .xa-chev { margin-left: 8px; }
+.xa-row.xa-hasd:not(.xa-open):not(.xa-now) { cursor: pointer; }
+.xa-row.xa-hasd:not(.xa-open):not(.xa-now):hover > .xa-verb,
+.xa-row.xa-hasd:not(.xa-open):not(.xa-now):hover > .xa-obj { color: var(--xa-t2); }
+.xa-row.xa-hasd:not(.xa-open):not(.xa-now):hover > .xa-chev { color: var(--xa-t3); }
+
+/* rhythm: 28px rows, 4px apart (was 12) — the rail stays one unbroken line from marker to marker */
+.xa-rail { gap: 4px; }
+.xa-row:not(.xa-note):not(.xa-plan):not(.xa-think) { align-items: center; row-gap: 0; }
+.xa-row:not(.xa-now):not(.xa-open) > .xa-dwrap { margin-top: 0; }   /* a folded detail adds no height under the band */
+.xa-row:not(.xa-note):not(.xa-plan):not(.xa-think) > .xa-ic { margin-top: 5px; margin-bottom: 5px; }   /* one 28px band; the icon and words centre in it */
+.xa-row::before { left: 8.5px; top: 23px; bottom: -9px; }
+.xa-row:has(+ .xa-row:not(.xa-note):not(.xa-plan):not(.xa-sub):is(.xa-open, .xa-now:has(> .xa-dwrap .xa-detail :is(pre:not(:empty), .xa-file, .xa-it))))::before, .xa-row:has(+ .xa-row.xa-think.xa-open)::before { bottom: -4px; }   /* into a plate: stop at its edge */            /* from this marker's bottom edge to the next marker's top edge, across the 4px gap */
+
+/* the plate: margin and padding cancel, so the marker, words and rail stay exactly where they were.
+   A step is on a plate whenever something is printed under it — opened, or a live step streaming its output
+   (a dev server, a test run) — and a closed step shows no plate. */
+.xa-row:not(.xa-note):not(.xa-plan):not(.xa-sub):is(.xa-open, .xa-now:has(> .xa-dwrap .xa-detail :is(pre:not(:empty), .xa-file, .xa-it))),
+.xa-row.xa-think.xa-open {
+  margin: 0 -8px; padding: 3px 8px 8px; border-radius: 4px;
+  background: var(--xa-plate); box-shadow: inset 0 0 0 1px var(--xa-line-soft);
+}
+/* a closed step you can open takes no plate on hover (owner, 2026-10-16): its words brighten, nothing moves */
+/* a plate is itself the step: the rail stops at its edge and resumes from its bottom edge to the next marker,
+   never running through what the step printed */
+.xa-row:not(.xa-note):not(.xa-plan):not(.xa-sub):is(.xa-open, .xa-now:has(> .xa-dwrap .xa-detail :is(pre:not(:empty), .xa-file, .xa-it)))::before,
+.xa-row.xa-think.xa-open::before { left: 16.5px; top: 100%; bottom: -4px; }
+.xa-row.xa-open > .xa-verb, .xa-row.xa-open > .xa-obj { color: var(--xa-t2); }
+
+/* inside the plate the detail spans it: the same 8px from the line above, the sides and the bottom */
+.xa-row:is(.xa-open, .xa-now) .xa-dwrap { margin: 0; }
+.xa-row:is(.xa-open, .xa-now) .xa-detail, .xa-row:is(.xa-open, .xa-now) .xa-dwrap .xa-detail { margin: 8px 0 0 0; }
+/* every detail sits in the same inner box: the well, a hairline, small corners */
+.xa-row:is(.xa-open, .xa-now) .xa-detail:not(.xa-output):not(.xa-diff):not(.xa-slice):not(.xa-nest) {
+  padding: 6px 10px; border: 1px solid rgba(var(--xa-ink), 0.06); border-radius: 4px; background: var(--xa-well);
+}
+.xa-row.xa-think.xa-open .xa-fullwrap { margin: 3px 0 0 0; }
+.xa-row:is(.xa-open, .xa-now) .xa-dwrap::before, .xa-row:is(.xa-open, .xa-now) .xa-dwrap::after,
+.xa-row:is(.xa-open, .xa-now) .xa-dwrap > div::before, .xa-row:is(.xa-open, .xa-now) .xa-dwrap > div::after,
+.xa-row:is(.xa-open, .xa-now) .xa-detail .xa-it::before, .xa-row:is(.xa-open, .xa-now) .xa-detail .xa-file::before,
+.xa-row:is(.xa-open, .xa-now) .xa-detail.xa-matches .xa-lns::before,
+.xa-row:is(.xa-open, .xa-now) .xa-detail.xa-matches .xa-ln .xa-n::before { display: none !important; }
+.xa-row.xa-open .xa-detail.xa-output .xa-foot:not(:has(.xa-cwd)) { display: none; }   /* exit and time are on the row */
+
+/* the edited-files card spans the transcript */
+.xa-files { width: 100%; max-width: none; box-sizing: border-box; }
+
+/* matches: the file, then its lines indented to the file name, numbers right-aligned in one column */
+.xa-row.xa-open .xa-detail.xa-matches .xa-ln { padding-left: 0; gap: 8px; }
+.xa-row.xa-open .xa-detail.xa-matches .xa-ln .xa-n { width: 26px; }
+/* the diff: the step's line already names the file, so the hunk header keeps only the range; no empty space under the code */
+.xa-row .xa-detail.xa-diff .xa-hunk > .xa-mono + .xa-mono { display: none; }
+.xa-row .xa-detail.xa-diff pre { padding-bottom: 6px; }
+.xa-row .xa-detail.xa-diff, .xa-row .xa-detail.xa-output { margin-top: 2px; }
+
+/* the thinking line opens the same way */
+
+
+/* An ask answered above the box reads on its step's own line: the answer in the result column, quiet; the
+   marker already carries the verdict's colour (xa-ok / xa-bad). Pending, it says what it waits on, brighter. */
+.xa-row > .xa-res[data-tone] { font-size: 11px; color: var(--xa-t5); }
+.xa-row > .xa-res[data-tone='pending'] { color: var(--xa-t2); }
+.xa-row > .xa-res[data-tone='no'], .xa-row > .xa-res[data-tone='cancelled'] { color: var(--xa-t5); }
+/* the options a question offered, opened inside the step's plate */
+.xa-row .xa-detail.xa-q-rec-body { margin: 8px 0 0; padding: 6px 10px; border: 1px solid rgba(var(--xa-ink), 0.06); border-radius: 4px; background: var(--xa-well); }
+.xa-row .xa-detail.xa-q-rec-body ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
+.xa-row .xa-detail.xa-q-rec-body li { display: flex; align-items: center; gap: 9px; min-height: 22px; font-size: 11.5px; color: var(--xa-t4); }
+.xa-row .xa-detail.xa-q-rec-body li[data-picked='true'] { color: var(--xa-t1); }
+.xa-row .xa-detail.xa-q-rec-body .xa-q-key { width: 18px; height: 18px; border-radius: 3px; }
+.xa-row .xa-detail.xa-q-rec-body .xa-q-keyc { font-size: 10px; }
+.xa-row .xa-detail.xa-q-rec-body .xa-q-rec-why { margin-top: 6px; font-size: 11.5px; color: var(--xa-t3); }
 /* =============================================================================
    The XENO Agent composer — D9 / D9a / D11 of `XENO AGENT PANEL - SPEC.md`.
    -----------------------------------------------------------------------------
@@ -8386,16 +8476,16 @@ img.xa-fav { padding: 1px; background: #fff; }
 
   .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 {
+  .xa-dock .xa-box .xa-field 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); }
+  .xa-dock .xa-box .xa-field 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-box .xa-field textarea:focus, .xa-dock .xa-box .xa-field 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; }
@@ -8421,6 +8511,14 @@ img.xa-fav { padding: 1px; background: #fff; }
      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; }
+  /* the fold above is an animation, and reduced motion switches animations off, which left the lane and model
+     labels standing under `Working · 2s`. Without motion the running state is reached directly. */
+  @media (prefers-reduced-motion: reduce) {
+    .xa-dock .xa-controls.xa-running .xa-mgrp { display: none; }
+    /* the same for everything else whose exit is an animation: go straight to where the animation ends */
+    .xa-dock .xa-permgrp.xa-sink { visibility: hidden; }
+    .xa-dock .xa-permgrp .xa-permicon.xa-out, .xa-dock .xa-mgrp .xa-laneicon.xa-out { display: none; }
+  }
   @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); }
@@ -8535,7 +8633,7 @@ img.xa-fav { padding: 1px; background: #fff; }
   .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-box .xa-field 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); }
@@ -8657,6 +8755,373 @@ img.xa-fav { padding: 1px; background: #fff; }
    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; }
+/* =============================================================================
+   The agent's question, docked on the composer (QuestionPanel.tsx) — the XENO platform chat's
+   question panel (xeno-platform `chatQuestion.css`, approved 2026-10-02), on the Agent interface's own
+   tokens so it follows both themes. Same card the queue uses (queue.css), on purpose: the slot above the
+   box holds one kind of card.
+   ============================================================================= */
+.xa-dock .xa-above { display: flex; flex-direction: column; gap: 8px; }
+
+.xa-q {
+  display: flex; flex-direction: column;
+  background: var(--xa-plate); border: 1px solid var(--xa-line); border-radius: 8px;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 12px 32px rgb(0 0 0 / 0.3);
+  overflow: hidden; outline: none; color: var(--xa-t2);
+  animation: xa-q-rise 0.34s var(--xa-ease) both;
+}
+/* The panel takes focus only so its keys work. It is a container, not a control: it never draws a focus
+   ring (a ring that appears on open and vanishes on the first click reads as a glitch). */
+.xa-q:focus, .xa-q:focus-visible { outline: none; border-color: var(--xa-line); }
+@keyframes xa-q-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+
+/* The marker: a filled square, never animated. Bright while the question waits, dim once answered. */
+.xa-q-sq { flex: none; width: 10px; height: 10px; border-radius: 2.5px; background: var(--xa-t1); }
+
+.xa-q-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 6px 14px; }
+.xa-q-mark { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+.xa-q-text { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--xa-t1); user-select: text; }
+.xa-q-text small { display: block; font-size: 11.5px; font-weight: 400; line-height: 1.4; color: var(--xa-t4); margin-top: 2px; }
+.xa-q-fold { flex: none; width: 26px; height: 26px; margin: -3px -4px 0 0; border-radius: 6px; color: var(--xa-t4); display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
+.xa-q-fold:hover { background: var(--xa-wash-hover); color: var(--xa-t1); }
+
+.xa-q-list { list-style: none; margin: 0; padding: 2px 6px 4px; display: flex; flex-direction: column; gap: 1px; max-height: min(46vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
+.xa-q-opt {
+  width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 6px;
+  text-align: left; font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--xa-t2);
+  background: none; border: 0; cursor: pointer; transition: background 0.12s;
+}
+.xa-q-opt:hover { background: var(--xa-wash-hover); }
+.xa-q-opt[aria-checked='true'] { background: var(--xa-wash); color: var(--xa-t1); }
+.xa-q-opt[data-active='true'] { background: var(--xa-wash-hover); }
+.xa-q-opt:focus-visible { outline: none; background: var(--xa-wash-hover); }
+.xa-q-key {
+  flex: none; width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--xa-line-tip); background: var(--xa-well);
+  color: var(--xa-t4); display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s;
+}
+.xa-q-opt[data-multi='true'] .xa-q-key { border-radius: 3px; }
+.xa-q-opt[aria-checked='true'] .xa-q-key { background: var(--xa-send); border-color: var(--xa-send); color: var(--xa-ground); }
+/* Centre the CAPITAL, not the line box: a line box reserves descender room capitals never use. */
+.xa-q-keyc { display: block; font-size: 11px; font-weight: 600; line-height: 1; text-box: trim-both cap alphabetic; }
+.xa-q-opt-text { flex: 1; min-width: 0; }
+
+.xa-q-why { margin: 4px 12px 0; }
+.xa-q-why textarea, .xa-q-why input {
+  display: block; width: 100%; box-sizing: border-box; resize: none; min-height: 36px; max-height: 120px; border: 1px solid var(--xa-line-tip);
+  background: var(--xa-well); color: var(--xa-t1); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.45; outline: none;
+}
+.xa-q-why textarea:focus, .xa-q-why input:focus { border-color: var(--xa-t4); box-shadow: none; }
+.xa-q-why textarea::placeholder, .xa-q-why input::placeholder { color: var(--xa-t6); }
+.xa-q-error { margin: 6px 14px 0; font-size: 12px; color: var(--xa-red); }
+
+.xa-q-foot { display: flex; align-items: center; gap: 6px; padding: 8px 10px 10px 12px; }
+.xa-q-addwhy { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; color: var(--xa-t4); padding: 5px 6px; margin-left: -6px; border-radius: 6px; background: none; border: 0; cursor: pointer; }
+.xa-q-addwhy:hover { color: var(--xa-t1); background: var(--xa-wash-hover); }
+.xa-q-keys { margin-left: auto; margin-right: 4px; font-size: 11.5px; color: var(--xa-t5); white-space: nowrap; }
+.xa-q-keys kbd { font: inherit; font-size: 10.5px; padding: 1px 5px; border: 1px solid var(--xa-line-tip); border-radius: 4px; background: var(--xa-well); }
+.xa-q-btn { height: 30px; padding: 0 12px; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap; border: 0; cursor: pointer; transition: background 0.12s, color 0.12s, opacity 0.12s; }
+.xa-q-btn[data-variant='ghost'] { background: none; color: var(--xa-t4); }
+.xa-q-btn[data-variant='ghost']:hover { background: var(--xa-wash-hover); color: var(--xa-t1); }
+.xa-q-btn[data-variant='primary'] { background: var(--xa-send); color: var(--xa-ground); }
+.xa-q-btn[data-variant='primary']:hover:not(:disabled) { background: var(--xa-send-hover); }
+.xa-q-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+
+/* Folded (Esc): one line, still waiting. */
+.xa-q-bar { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 12px; text-align: left; font: inherit; font-size: 13px; background: none; border: 0; cursor: pointer; color: var(--xa-t1); }
+.xa-q-bar:hover { background: var(--xa-wash); }
+.xa-q-bar .xa-q-sq { margin: 0 5px; }
+.xa-q-bar-q { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--xa-t4); }
+.xa-q-bar b { flex: none; font-weight: 600; }
+.xa-q-bar-open { flex: none; font-size: 12px; color: var(--xa-t4); }
+
+/* The record inside the transcript: one line, expands on click. */
+.xa-q-rec { margin: 4px 0; border: 1px solid var(--xa-line); border-radius: 7px; background: var(--xa-plate); overflow: hidden; max-width: 560px; }
+.xa-q-rec-line { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 11px; font: inherit; font-size: 12.5px; line-height: 1.4; text-align: left; color: var(--xa-t4); background: none; border: 0; cursor: pointer; }
+.xa-q-rec-line:hover { background: var(--xa-wash); }
+.xa-q-rec .xa-q-sq { background: var(--xa-t5); }
+.xa-q-rec[data-pending='true'] .xa-q-sq { background: var(--xa-t1); }
+.xa-q-rec-q { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.xa-q-rec-a { flex: none; max-width: 46%; color: var(--xa-t1); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.xa-q-rec-chev { flex: none; display: flex; transition: transform 0.15s; }
+.xa-q-rec[data-open='true'] .xa-q-rec-chev { transform: rotate(180deg); }
+.xa-q-rec-body { border-top: 1px solid var(--xa-line); padding: 6px 6px 8px; user-select: text; }
+.xa-q-rec-qq { padding: 6px 6px 4px; font-size: 13px; font-weight: 500; color: var(--xa-t1); }
+.xa-q-rec-body ol { list-style: none; margin: 0; padding: 0; }
+.xa-q-rec-body li { display: flex; gap: 9px; align-items: flex-start; padding: 5px 6px; border-radius: 6px; font-size: 12.5px; line-height: 1.45; color: var(--xa-t4); }
+.xa-q-rec-body li[data-picked='true'] { background: var(--xa-wash); color: var(--xa-t1); }
+.xa-q-rec-body li .xa-q-key { width: 18px; height: 18px; border-radius: 4px; }
+.xa-q-rec-body li[data-picked='true'] .xa-q-key { background: var(--xa-send); border-color: var(--xa-send); color: var(--xa-ground); }
+.xa-q-rec-why { margin: 6px 6px 0; font-size: 12.5px; line-height: 1.5; color: var(--xa-t1); white-space: pre-wrap; }
+.xa-q-rec-why span { color: var(--xa-t4); }
+
+@container (max-width: 520px) {
+  .xa-q-keys { display: none; }
+  .xa-q-list { max-height: 26vh; }
+  .xa-q-opt { font-size: 13px; line-height: 1.4; padding: 6px; }
+  .xa-q-head { padding: 10px 10px 4px 12px; }
+  .xa-q-text { font-size: 13.5px; }
+  .xa-q-foot { padding: 6px 8px 8px 10px; }
+}
+@media (prefers-reduced-motion: reduce) { .xa-q { animation: none; } }
+
+/* =============================================================================
+   A permission in the same slot (PermissionPanel.tsx): the question's card, carrying what the agent wants to
+   do — the command as a block, or the folder and why — and the three answers: this once, refuse, remember.
+   ============================================================================= */
+.xa-perm .xa-perm-ic { color: var(--xa-t2); border-radius: 4px; background: var(--xa-box); box-shadow: inset 0 0 0 1px var(--xa-line-soft); animation: xa-breathe 1.4s ease-in-out infinite; }
+.xa-perm-body { margin: 2px 12px 4px 44px; padding: 8px 10px; font-size: 12px; line-height: 18px; color: var(--xa-t1); white-space: pre-wrap; word-break: break-all; background: var(--xa-well); border: 1px solid rgba(var(--xa-ink), 0.06); border-radius: 4px; user-select: text; }
+.xa-perm-note { margin: 2px 12px 4px 44px; font-size: 12.5px; line-height: 1.45; color: var(--xa-t3); }
+.xa-perm-always { display: inline-flex; gap: 2px; }
+.xa-perm-always kbd { font: inherit; font-size: 10px; padding: 0 4px; border: 1px solid var(--xa-line-tip); border-radius: 3px; background: var(--xa-well); color: var(--xa-t4); }
+.xa-q-addwhy:disabled { opacity: 0.35; cursor: not-allowed; }
+.xa-perm .xa-q-foot { padding-left: 44px; }
+@media (prefers-reduced-motion: reduce) { .xa-perm .xa-perm-ic { animation: none; } }
+
+/* the permission's record in the transcript: one line, coloured once answered */
+.xa-q-rec[data-agent-permission-record] .xa-q-rec-line { cursor: default; }
+.xa-q-rec[data-agent-permission-record] .xa-q-rec-line:hover { background: none; }
+.xa-q-rec[data-tone='yes'] .xa-q-sq { background: var(--xa-green); }
+.xa-q-rec[data-tone='no'] .xa-q-sq, .xa-q-rec[data-tone='cancelled'] .xa-q-sq { background: var(--xa-red); }
+
+/* The ask is answered above the box now, so in collapsed mode the turn does not surface it a second time: the
+   clock line keeps saying what the agent is waiting on, and the rail stays folded. (Spec D10's "an ask still
+   surfaces in collapsed mode" is met by the card above the composer.) */
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open):has(.xa-rail [data-agent-permission-record], .xa-rail [data-agent-question-record]) .xa-railwrap { grid-template-rows: 0fr; }
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open):has(.xa-rail [data-agent-permission-record], .xa-rail [data-agent-question-record]) .xa-line .xa-vr { display: block; }
+/* the ticker is a flex row (glyph slot, then the words): `revert` here made it inline, and the words — absolutely
+   placed inside their own box — landed on the glyph */
+.xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open):has(.xa-rail [data-agent-permission-record], .xa-rail [data-agent-question-record]) .xa-line .xa-cur { display: flex; }
+
+/* =============================================================================
+   The ask lives INSIDE the input box, at its top (owner, 2026-10-16): the box grows upward to hold it, a
+   hairline divides it from the field. Full width, no card of its own — the box IS the card.
+   ============================================================================= */
+.xa-dock .xa-box.xa-asking { padding-top: 0; }
+.xa-box-ask { margin: 0 -11px 2px; border-bottom: 1px solid var(--xa-line); }
+.xa-box-ask .xa-q { background: none; border: 0; border-radius: 0; box-shadow: none; }
+.xa-box-ask .xa-q[data-folded='true'] .xa-q-bar { padding: 9px 12px; }
+.xa-box-ask .xa-q-head { padding: 11px 11px 4px 12px; }
+.xa-box-ask .xa-q-list { padding: 2px 4px 2px; }
+.xa-box-ask .xa-q-foot { padding: 6px 10px 9px 12px; }
+.xa-box-ask .xa-perm .xa-q-foot { padding-left: 42px; }
+.xa-box-ask .xa-perm-body, .xa-box-ask .xa-perm-note { margin-left: 42px; margin-right: 11px; }
+/* while the agent waits on an answer the box IS the ask: the message field steps aside (it comes back the
+   moment the ask is answered, with whatever was typed still in it) */
+.xa-dock .xa-box.xa-asking { padding: 0; gap: 0; }
+.xa-dock .xa-box.xa-asking > :not(.xa-box-ask):not(input[type='file']) { display: none !important; }
+.xa-dock .xa-box.xa-asking .xa-box-ask { margin: 0; border-bottom: 0; }
+
+/* the ask, in the same family (inside the box: the box is its border) */
+.xa-box-ask .xa-q-head { align-items: center; padding: 8px 10px 4px 12px; gap: 9px; }
+.xa-box-ask .xa-q-mark { width: 18px; height: 18px; }
+.xa-box-ask .xa-q-sq { width: 6px; height: 6px; border-radius: 1.5px; animation: xa-breathe 1.4s ease-in-out infinite; }
+.xa-box-ask .xa-q-text { font-size: 12.5px; font-weight: 500; line-height: 18px; }
+.xa-box-ask .xa-q-text small { font-size: 11px; color: var(--xa-t4); margin-top: 0; }
+.xa-box-ask .xa-q-fold { width: 22px; height: 22px; margin: 0; border-radius: 3px; color: var(--xa-t6); }
+.xa-box-ask .xa-q-list { padding: 0 6px 2px; gap: 0; }
+.xa-box-ask .xa-q-opt { padding: 5px 6px; gap: 9px; border-radius: 3px; font-size: 12.5px; line-height: 18px; }
+.xa-box-ask .xa-q-key { width: 18px; height: 18px; }
+.xa-box-ask .xa-q-keyc { font-size: 10px; border-radius: 3px; }
+.xa-box-ask .xa-q-foot { padding: 4px 8px 8px 12px; gap: 4px; }
+.xa-box-ask .xa-q-addwhy { font-size: 11.5px; padding: 4px 6px; border-radius: 3px; }
+.xa-box-ask .xa-q-keys { font-size: 10.5px; }
+.xa-box-ask .xa-q-keys kbd { font-size: 10px; padding: 0 4px; border-radius: 3px; }
+.xa-box-ask .xa-q-btn { height: 24px; padding: 0 10px; border-radius: 3px; font-size: 11.5px; }
+.xa-box-ask .xa-perm .xa-q-foot, .xa-box-ask .xa-perm-body, .xa-box-ask .xa-perm-note { margin-left: 0; padding-left: 12px; }
+.xa-box-ask .xa-perm .xa-q-foot { padding-left: 39px; }
+.xa-box-ask .xa-perm-body { margin: 2px 10px 4px 39px; padding: 6px 9px; font-size: 11.5px; line-height: 16px; }
+.xa-box-ask .xa-perm-note { margin: 2px 10px 4px 39px; padding: 0; font-size: 11.5px; }
+.xa-box-ask .xa-perm .xa-perm-ic { width: 18px; height: 18px; border-radius: 3px; }
+/* the reasoning field, in the footer where "Add your reasoning" was — same line, same left edge */
+.xa-q-whyin {
+  flex: 1 1 auto; min-width: 0; resize: none; overflow-y: auto; box-sizing: border-box;
+  margin: 0 6px 0 -6px; padding: 4px 6px; min-height: 24px; max-height: 96px;
+  font: inherit; font-size: 12px; line-height: 16px; color: var(--xa-t1);
+  background: var(--xa-well); border: 1px solid var(--xa-line-soft); border-radius: 3px; outline: none;
+}
+.xa-q-whyin::placeholder { color: var(--xa-t5); }
+.xa-q-whyin:focus { border-color: var(--xa-line-tip); }
+.xa-q-foot:has(.xa-q-whyin) .xa-q-keys { display: none; }
+/* the prompt and the field are one slot: the same 28px height, the same text line, so nothing moves when it opens */
+.xa-box-ask .xa-q-addwhy { height: 28px; box-sizing: border-box; padding: 0 6px; line-height: 16px; }
+.xa-q-whyin { height: 28px; min-height: 28px; padding: 5px 6px; line-height: 16px; font-size: 11.5px; margin-left: -6px !important; }
+.xa-box-ask .xa-q-foot > .xa-q-whyin { margin: 0 6px 0 -6px; }
+/* typed text starts where the words "Add your reasoning" started — after the plus — so the text does not jump sideways */
+.xa-box-ask .xa-q-foot > .xa-q-whyin { padding-left: 23px; }
+/* one frame only: a host's focus ring is suppressed for text entry (DESIGN_SYSTEM.md), the field's own edge brightens */
+.xa-box-ask .xa-q-foot > .xa-q-whyin:focus, .xa-box-ask .xa-q-foot > .xa-q-whyin:focus-visible { outline: none !important; box-shadow: none !important; }
+/* the plus stays where it was, now inside the field, so the slot reads as the same thing opened */
+.xa-box-ask .xa-q-foot > .xa-q-whyin {
+  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
+  background-size: 9px 1.4px, 1.4px 9px; background-position: 8px 13px, 11.8px 9.2px; background-repeat: no-repeat;
+  color: var(--xa-t1); background-color: var(--xa-well);
+}
+/* no stroke on the reasoning field, focused or not (owner, 2026-10-16): the well's shade alone says "type here" */
+.xa-q-whyin, .xa-q-whyin:hover, .xa-q-whyin:focus, .xa-q-whyin:focus-visible,
+.xa-box-ask .xa-q-foot > .xa-q-whyin, .xa-box-ask .xa-q-foot > .xa-q-whyin:focus, .xa-box-ask .xa-q-foot > .xa-q-whyin:focus-visible {
+  border-color: transparent !important; outline: none !important; box-shadow: none !important;
+}
+/* the open reasoning slot keeps the very same plus icon, in the very same place as the button's: the slot is the
+   button's box (same padding, same gap), the field fills the rest of it */
+.xa-q-whyslot { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 5px; font-size: 11.5px; height: auto; min-height: 28px; padding: 0 6px; margin-left: -6px; margin-right: 6px; box-sizing: border-box; border-radius: 3px; background: var(--xa-well); color: var(--xa-t4); }
+.xa-q-whyplus { flex: none; display: inline-flex; align-items: center; height: 28px; }
+.xa-box-ask .xa-q-foot .xa-q-whyslot > .xa-q-whyin {
+  flex: 1 1 auto; margin: 0 !important; padding: 6px 0 !important; background: none !important; background-image: none !important;
+  height: 28px; min-height: 28px; line-height: 16px; font-size: 11.5px; color: var(--xa-t1);
+}
+.xa-q-foot:has(.xa-q-whyslot) .xa-q-keys { display: none; }
+/* the reasoning field scrolls with the wheel past four lines but never shows a scrollbar */
+.xa-q-whyin { scrollbar-width: none; }
+.xa-q-whyin::-webkit-scrollbar { display: none; }
+/* the permission's command and its answers start at the card's left edge, under the icon — not indented under
+   the title (owner, 2026-10-16) */
+.xa-box-ask .xa-perm .xa-perm-body, .xa-box-ask .xa-perm .xa-perm-note { margin-left: 12px !important; }
+.xa-box-ask .xa-perm .xa-q-foot { padding-left: 12px !important; }
+.xa-box-ask .xa-perm .xa-perm-body, .xa-box-ask .xa-perm .xa-perm-note { margin-right: 12px !important; }
+.xa-box-ask .xa-perm .xa-q-foot { padding-right: 12px !important; }
+.xa-box-ask .xa-perm .xa-q-head { padding-right: 12px; }
+/* the permission's title and its scope share one line: "Wants to run a command | In the project, on this machine · once" */
+.xa-box-ask .xa-perm .xa-q-text { display: flex; align-items: center; min-width: 0; gap: 0; white-space: nowrap; }
+.xa-box-ask .xa-perm .xa-q-text small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin: 0; font-size: 11.5px; font-weight: 400; line-height: 18px; color: var(--xa-t4); }
+.xa-box-ask .xa-perm .xa-q-text small::before { content: ''; display: inline-block; width: 1px; height: 11px; margin: 0 9px; vertical-align: -1px; background: var(--xa-line-tip); }
+.xa-box-ask .xa-perm .xa-q-head { align-items: center; padding-bottom: 6px; }
+/* folded, the bar is the whole box: no minimum height around it, and its hover fills the box to its corners */
+.xa-dock .xa-box.xa-asking { min-height: 0; overflow: hidden; }
+.xa-box-ask .xa-q[data-folded='true'] .xa-q-bar { border-radius: 5px; }
+
+/* While the agent waits on an answer, the box holds the focus: the cards stacked above it in the dock — Tasks,
+   Delegated, Running, Queued — and the workspace row step back. A pointer on any of them brings it back at once,
+   so nothing is out of reach; it is emphasis, not a lock. */
+.xa-dock-inner:has(.xa-box.xa-asking) > :not(.xa-box):not(.xa-foot):not(.xa-notice):not(.xa-controls) {
+  opacity: 0.45; transition: opacity 200ms var(--xa-ease);
+}
+.xa-dock-inner:has(.xa-box.xa-asking) > :not(.xa-box):not(.xa-foot):not(.xa-notice):not(.xa-controls):hover,
+.xa-dock-inner:has(.xa-box.xa-asking) > :not(.xa-box):not(.xa-foot):not(.xa-notice):not(.xa-controls):focus-within { opacity: 1; }
+.xa-dock-inner > :not(.xa-box) { transition: opacity 200ms var(--xa-ease); }
+@media (prefers-reduced-motion: reduce) { .xa-dock-inner > * { transition: none !important; } }
+/* =============================================================================
+   The queue (QueuePanel.tsx) — the XENO platform chat's queue card (xeno-platform `chatQueue.css`,
+   approved 2026-09-30), on the Agent interface's tokens. Same card as the question (question.css).
+   ============================================================================= */
+.xa-queue {
+  display: flex; flex-direction: column;
+  background: var(--xa-plate); border: 1px solid var(--xa-line); border-radius: 8px;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 12px 32px rgb(0 0 0 / 0.3);
+  overflow: hidden; color: var(--xa-t2);
+  animation: xa-queue-rise 0.34s var(--xa-ease) both;
+}
+.xa-queue-bar { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 11px; color: var(--xa-t1); font: inherit; text-align: left; background: none; border: 0; cursor: pointer; transition: background 0.12s; }
+.xa-queue-bar:hover { background: var(--xa-wash); }
+.xa-queue-ico { color: var(--xa-t4); display: flex; }
+.xa-queue-title { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; flex: none; }
+.xa-queue-vr { flex: none; width: 1px; height: 12px; background: var(--xa-line-tip); margin: 0 3px; }
+.xa-queue-note { flex: 1; min-width: 0; color: var(--xa-t5); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.xa-queue-count { margin-left: auto; flex: none; font-size: 11px; color: var(--xa-t4); font-variant-numeric: tabular-nums; }
+.xa-queue-chev { flex: none; color: var(--xa-t4); display: flex; transition: transform 0.2s; }
+.xa-queue[data-expanded='true'] .xa-queue-chev { transform: rotate(180deg); }
+.xa-queue-hold { flex: none; width: 6px; height: 6px; border-radius: 1.5px; background: var(--xa-t1); animation: xa-queue-breathe 1.2s ease-in-out infinite; }
+.xa-queue[data-held='true'] .xa-queue-note { color: var(--xa-t2); }
+.xa-queue[data-grace='true'] .xa-queue-count { color: var(--xa-red); }
+.xa-queue[data-grace='true'] .xa-queue-hold { background: var(--xa-red); }
+
+.xa-queue-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s var(--xa-ease); }
+.xa-queue[data-expanded='true'] .xa-queue-wrap { grid-template-rows: 1fr; }
+.xa-queue-inner { min-height: 0; overflow: hidden; }
+.xa-queue-list { list-style: none; margin: 0; padding: 6px 8px 8px; display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
+
+.xa-queue-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 6px 8px 7px; border-radius: 6px; position: relative; transition: background 0.18s, box-shadow 0.2s ease, transform 0.2s var(--xa-ease); animation: xa-queue-rise 0.26s var(--xa-ease) both; }
+.xa-queue-item:hover { background: var(--xa-wash); }
+.xa-queue-item[data-lifted='true'] { transition: none; z-index: 20; cursor: grabbing; background: var(--xa-menu); box-shadow: 0 0 0 1px var(--xa-line-tip), 0 14px 30px -8px rgb(0 0 0 / 0.35), 0 5px 12px -6px rgb(0 0 0 / 0.25); }
+
+/* The square IS the drag handle: the marker by default, the grip on hover. */
+.xa-queue-mark { flex: none; position: relative; width: 14px; height: 20px; margin-top: 1px; display: flex; align-items: flex-start; justify-content: center; }
+.xa-queue-sq { width: 6px; height: 6px; margin-top: 7px; border-radius: 1.5px; background: var(--xa-t5); transition: opacity 0.12s; }
+.xa-queue-grip { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; color: var(--xa-t4); opacity: 0; transition: opacity 0.12s; }
+.xa-queue-grip svg { margin-top: 4px; }
+.xa-queue-item:hover .xa-queue-mark { cursor: grab; }
+.xa-queue-item:hover .xa-queue-sq { opacity: 0; }
+.xa-queue-item:hover .xa-queue-grip { opacity: 0.8; }
+.xa-queue-item[data-next='true'] .xa-queue-sq { background: var(--xa-t1); animation: xa-queue-breathe 1.6s ease-in-out infinite; }
+.xa-queue[data-held='true'] .xa-queue-item[data-next='true'] .xa-queue-sq { animation: none; opacity: 0.3; }
+
+.xa-queue-main { flex: 1; min-width: 0; }
+.xa-queue-text { min-width: 0; color: var(--xa-t1); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: text; }
+.xa-queue-text:focus-visible { outline: none; text-decoration: underline; text-decoration-color: var(--xa-t5); }
+.xa-queue-edit { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.5; color: var(--xa-t1); background: transparent; border: none; border-bottom: 1.5px solid var(--xa-line-tip); border-radius: 0; padding: 0 0 3px; margin: 0; resize: none; outline: none; overflow: hidden; }
+.xa-queue-edit:focus { border-bottom-color: var(--xa-t3); box-shadow: none; }
+.xa-queue-att { display: inline-flex; align-items: center; vertical-align: middle; gap: 3px; height: 16px; max-width: 124px; margin-left: 6px; padding: 0 5px; border: 1px solid var(--xa-line-tip); border-radius: 4px; color: var(--xa-t4); font-size: 10px; line-height: 1; }
+.xa-queue-att > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.xa-queue-atts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
+.xa-queue-att.xa-edit { height: 20px; max-width: 190px; margin-left: 0; padding: 0 3px 0 6px; }
+.xa-queue-att-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 2px; padding: 0; border: none; border-radius: 3px; background: transparent; color: var(--xa-t4); cursor: pointer; }
+.xa-queue-att-x:hover { background: var(--xa-wash-hover); color: var(--xa-red); }
+
+.xa-queue-right { flex: none; position: relative; width: 52px; min-height: 20px; margin-top: 1px; }
+.xa-queue-tag { display: flex; justify-content: flex-end; align-items: center; height: 20px; padding-right: 4px; transition: opacity 0.2s, filter 0.2s; }
+.xa-queue-item:hover .xa-queue-tag, .xa-queue-item[data-editing='true'] .xa-queue-tag { opacity: 0; filter: blur(3px); }
+.xa-queue-next { padding: 0 6px; height: 17px; border-radius: 4px; background: var(--xa-t1); color: var(--xa-ground); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; }
+.xa-queue-n { color: var(--xa-t4); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.xa-queue-acts { position: absolute; top: -3px; right: -3px; display: flex; align-items: center; gap: 1px; pointer-events: none; }
+.xa-queue-item:hover .xa-queue-acts, .xa-queue-item[data-editing='true'] .xa-queue-acts { pointer-events: auto; }
+.xa-queue-b {
+  width: 25px; height: 25px; border-radius: 6px; border: 0; background: none; color: var(--xa-t4);
+  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
+  opacity: 0; transform: translateX(12px); filter: blur(4px);
+  transition: opacity 0.24s var(--xa-ease), transform 0.3s var(--xa-ease), filter 0.24s, background 0.12s linear, color 0.12s linear;
+}
+.xa-queue-item:hover .xa-queue-b, .xa-queue-item[data-editing='true'] .xa-queue-b, .xa-queue-b:focus-visible { opacity: 1; transform: none; filter: blur(0); outline: none; }
+.xa-queue-item:hover .xa-queue-b:nth-child(2) { transition-delay: 50ms; }
+.xa-queue-b:hover, .xa-queue-b:focus-visible { background: var(--xa-wash-hover); color: var(--xa-t1); }
+.xa-queue-b:active { transform: scale(0.88); }
+.xa-queue-b.xa-del:hover { color: var(--xa-red); }
+.xa-queue-b.xa-save { color: var(--xa-t1); }
+.xa-queue[data-grace='true'] .xa-queue-b.xa-save { animation: xa-queue-breathe 1.1s ease-in-out infinite; }
+
+@keyframes xa-queue-rise { from { transform: translateY(6px); opacity: 0; filter: blur(2px); } to { transform: none; opacity: 1; filter: blur(0); } }
+@keyframes xa-queue-breathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .xa-queue, .xa-queue-item { animation: none; }
+  .xa-queue-tag, .xa-queue-b { transition: opacity 0.12s linear !important; transform: none !important; filter: none !important; }
+}
+/* the list scrolls up and down only: a long word wraps instead of opening a sideways scrollbar */
+.xa-queue-list { overflow-x: hidden; }
+.xa-queue-item { min-width: 0; }
+.xa-queue-text, .xa-queue-edit { overflow-wrap: anywhere; }
+.xa-queue-item[data-lifted='true'] { transform-origin: center; }
+.xa-queue-acts { right: 0; }
+
+/* =============================================================================
+   One family with the composer's other cards — Tasks, Delegated, Running (transcript.css `.xa-tasks`):
+   the same wash, hairline and 4px corners, the same 30px bar with a small uppercase label, the same
+   sizes inside. Owner, 2026-10-16: the queue and the ask look like the rest of the app, not like a chat.
+   ============================================================================= */
+.xa-queue { background: var(--xa-wash); border: 1px solid var(--xa-line-soft); border-radius: 4px; box-shadow: none; animation: none; }
+.xa-queue-bar { height: 30px; padding: 0 10px; gap: 8px; }
+.xa-queue-bar:hover { background: var(--xa-wash-hover); }
+.xa-queue-ico { display: none; }
+.xa-queue-title { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--xa-label); }
+.xa-queue-vr { display: none; }
+.xa-queue-note { font-size: 11px; color: var(--xa-t3); }
+.xa-queue-count { font-size: 10px; color: var(--xa-t6); }
+.xa-queue-chev { color: var(--xa-t6); }
+.xa-queue-list { padding: 2px 6px 6px; border-top: 1px solid rgba(var(--xa-ink), 0.05); }
+.xa-queue-item { padding: 4px 4px 4px 4px; gap: 8px; border-radius: 3px; }
+.xa-queue-text, .xa-queue-edit { font-size: 12px; line-height: 18px; color: var(--xa-t2); }
+.xa-queue-mark { height: 18px; }
+.xa-queue-sq { margin-top: 6px; }
+.xa-queue-right { min-height: 18px; }
+.xa-queue-tag { height: 18px; }
+.xa-queue-next { height: 15px; padding: 0 5px; font-size: 8.5px; border-radius: 3px; }
+.xa-queue-n { font-size: 10px; color: var(--xa-t6); }
+.xa-queue-b { width: 22px; height: 22px; border-radius: 3px; }
+.xa-queue-acts { top: -2px; }
+/* editing a queued message: the same field as the reasoning one — no stroke, no ring, a slightly darker
+   ground — and the words stay exactly where they were before the click */
+.xa-queue-edit, .xa-queue-edit:hover, .xa-queue-edit:focus, .xa-queue-edit:focus-visible {
+  border: 0 !important; outline: none !important; box-shadow: none !important;
+}
+.xa-queue-edit { padding: 0 6px; margin: 0 -6px; width: calc(100% + 12px); border-radius: 3px; background: var(--xa-well); scrollbar-width: none; }
+.xa-queue-edit::-webkit-scrollbar { display: none; }
 
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
@@ -9132,9 +9597,6 @@ img.xa-fav { padding: 1px; background: #fff; }
   margin-top: auto;
   margin-bottom: auto;
 }
-.-mb-\[9px\] {
-  margin-bottom: -9px;
-}
 .-ml-1 {
   margin-left: -0.25rem;
 }
@@ -9744,9 +10206,6 @@ img.xa-fav { padding: 1px; background: #fff; }
 .min-w-0 {
   min-width: 0px;
 }
-.min-w-5 {
-  min-width: 1.25rem;
-}
 .min-w-64 {
   min-width: 16rem;
 }
@@ -10014,6 +10473,9 @@ img.xa-fav { padding: 1px; background: #fff; }
 .select-none {
   user-select: none;
 }
+.select-all {
+  user-select: all;
+}
 .resize-none {
   resize: none;
 }
@@ -10448,10 +10910,6 @@ img.xa-fav { padding: 1px; background: #fff; }
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
 }
-.rounded-t-md {
-  border-top-left-radius: 0.375rem;
-  border-top-right-radius: 0.375rem;
-}
 .rounded-t-none {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
@@ -10496,9 +10954,6 @@ img.xa-fav { padding: 1px; background: #fff; }
 .border-b {
   border-bottom-width: 1px;
 }
-.border-b-0 {
-  border-bottom-width: 0px;
-}
 .border-l {
   border-left-width: 1px;
 }
@@ -14158,10 +14613,6 @@ body, #root, #app {
   outline-color: rgb(255 255 255 / 0.25);
 }
 
-.focus-visible\:outline-white\/35:focus-visible {
-  outline-color: rgb(255 255 255 / 0.35);
-}
-
 .focus-visible\:outline-white\/40:focus-visible {
   outline-color: rgb(255 255 255 / 0.4);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/agent-interface-ui",
-  "version": "0.1.108",
+  "version": "0.1.110",
   "license": "UNLICENSED",
   "type": "module",
   "main": "./dist/index.js",
@@ -41,11 +41,11 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "zustand": "^5.0.2",
-    "@xenosystem/agent-conversation": "0.1.108",
-    "@xenosystem/agent-interface-client": "0.1.108",
-    "@xenosystem/agent-interface-contract": "0.1.108",
-    "@xenosystem/agent-interface-core": "0.1.108",
-    "@xenosystem/agent-interface-hub-adapter": "0.1.108"
+    "@xenosystem/agent-conversation": "0.1.110",
+    "@xenosystem/agent-interface-core": "0.1.110",
+    "@xenosystem/agent-interface-hub-adapter": "0.1.110",
+    "@xenosystem/agent-interface-contract": "0.1.110",
+    "@xenosystem/agent-interface-client": "0.1.110"
   },
   "peerDependencies": {
     "react": "^19.0.0",