@xenosystem/agent-interface-ui 0.1.51 → 0.1.68

package/dist/agent.css

@@ -45,9 +45,17 @@
   --xeno-hover: rgba(169, 169, 177, 0.08);
   --xeno-text: #d8d8de;
   --xeno-muted: #7f7f86;
+  /* secondary READING text (hints, meta, captions) — AA on every panel surface; `--xeno-muted` is the
+     resting state of an interactive label and is 3.46:1 on a control well, so it is not for prose */
+  --xeno-muted-text: #9a9aa1;
   --xeno-active: #acacb4;
   --xeno-danger: #ef4444;
   --xeno-danger-hover: #dc2626;
+  /* status as TEXT — the fill hues fail AA as small text; one lighter tone per meaning */
+  --xeno-danger-text: #f27a7a;
+  --xeno-success-text: #6fae7f;
+  --xeno-warning-text: #c98d2a;
+  --xeno-info-text: #7aa2c4;
   --xeno-on-accent: #08080a;
 
   /* scrollbar — its own alphas on purpose. A thumb sitting on any surface in the set has to be legible
@@ -102,8 +110,13 @@
   --xeno-hover: rgba(0, 0, 0, 0.05);
   --xeno-text: #1a1815;
   --xeno-muted: #6f6b64;
+  --xeno-muted-text: #5f5b55;
   --xeno-active: #3a3833;
   --xeno-on-accent: #faf9f7;
+  --xeno-danger-text: #b42318;
+  --xeno-success-text: #1a6b32;
+  --xeno-warning-text: #7a4f00;
+  --xeno-info-text: #2a5f8a;
   --xeno-scroll-rail: rgba(0, 0, 0, 0.08);
   --xeno-scroll-thumb: rgba(0, 0, 0, 0.18);
   --xeno-scroll-thumb-hover: rgba(0, 0, 0, 0.32);
@@ -226,7 +239,7 @@
   --xeno-chrome-panel-header-min-h: 34px;
   --xeno-chrome-panel-body-pad: 12px;
   --xeno-chrome-title-size: 11px;
-  --xeno-chrome-title-color: var(--xeno-muted);
+  --xeno-chrome-title-color: var(--xeno-muted-text);
   --xeno-chrome-title-transform: uppercase;
   --xeno-chrome-title-spacing: 0.08em;
   --xeno-chrome-dialog-header-pad: 6px 12px;
@@ -2832,7 +2845,7 @@
     var(--xeno-control);
 }
 .xeno-btn[data-variant='ghost'] {
-  color: var(--xeno-muted);
+  color: var(--xeno-muted-text);
 }
 .xeno-btn[data-variant='ghost']:hover:not(:disabled) {
   color: var(--xeno-text);
@@ -3240,7 +3253,7 @@
   margin-top: 11px;
   padding-top: 11px;
   border-top: var(--xeno-chrome-divider);
-  color: var(--xeno-muted);
+  color: var(--xeno-muted-text);
   font-size: 13px;
   line-height: 1.3;
 }
@@ -3393,6 +3406,11 @@
   border-bottom-left-radius: var(--xeno-chrome-radius-plate);
   border-bottom-right-radius: var(--xeno-chrome-radius-plate);
 }
+
+.xeno-panel-body:focus-visible {
+  outline: 1px solid var(--xeno-text);
+  outline-offset: -1px;
+}
 /*
  * Chip — a small selectable/removable token. SQUARE (radius-control), 1px hairline border, monochrome
  * shell. State is driven by `data-*` on the root; size metrics arrive as inline `--xeno-h/-padx/-gap/
@@ -3759,7 +3777,7 @@
   border: 1px solid var(--xeno-border);
   border-radius: var(--xeno-radius-xs);
   background: var(--xeno-control);
-  color: var(--xeno-muted);
+  color: var(--xeno-muted-text);
   overflow: hidden;
   user-select: none;
   vertical-align: middle;
@@ -3781,13 +3799,13 @@
   font-weight: 600;
   line-height: 1;
   letter-spacing: 0.02em;
-  color: var(--xeno-muted);
+  color: var(--xeno-muted-text);
   text-transform: uppercase;
 }
 
 /* Glyph fallback inherits the tile's muted ink via currentColor. */
 .xeno-avatar[data-variant='icon'] {
-  color: var(--xeno-muted);
+  color: var(--xeno-muted-text);
 }
 
 /* ── AvatarStack ─────────────────────────────────────────────────────────────────── */
@@ -5898,7 +5916,7 @@ a.xeno-source-card:focus-visible {
 .xeno-sources-chevron {
   display: inline-flex;
   flex: none;
-  color: var(--xeno-muted);
+  color: var(--xeno-muted-text);
   transform: rotate(-90deg);
   transition: transform var(--xeno-dur) var(--xeno-ease);
 }
@@ -5930,7 +5948,7 @@ a.xeno-source-card:focus-visible {
   background: var(--xeno-control);
   border: 1px solid var(--xeno-surface);
   border-radius: var(--xeno-radius-sm);
-  color: var(--xeno-muted);
+  color: var(--xeno-muted-text);
   font-size: 10px;
   font-weight: 600;
   line-height: 1;
@@ -5946,14 +5964,14 @@ a.xeno-source-card:focus-visible {
   object-fit: cover;
 }
 .xeno-sources-overflow {
-  color: var(--xeno-muted);
+  color: var(--xeno-muted-text);
   font-size: 9px;
 }
 
 /* Count — mono, muted, pushed to the far end. */
 .xeno-sources-count {
   margin-left: auto;
-  color: var(--xeno-muted);
+  color: var(--xeno-muted-text);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12px;
   font-variant-numeric: tabular-nums;
@@ -7660,23 +7678,161 @@ a.xeno-source-card:focus-visible {
 .xa-line .xa-cur .xa-t.xa-first { animation: xa-slidein 280ms var(--xa-ease) both; animation-delay: 120ms; }
 .xa-line .xa-cur .xa-t.xa-in { animation: xa-slidein 260ms var(--xa-ease) both; animation-delay: 90ms; }
 .xa-line .xa-cur .xa-t.xa-out { animation: xa-blurout 160ms var(--xa-ease-out) both; }
-.xa-collapsed .xa-turn.xa-live:not(.xa-open):not(.xa-done) .xa-line .xa-vr { display: block; }
-.xa-collapsed .xa-turn.xa-live:not(.xa-open):not(.xa-done) .xa-line .xa-cur { display: flex; }
+/* the divider is a separator between two occupied regions. A live turn with nothing
+   on the right (plain "Working for 1s", no thought, no step) must not keep a dangling
+   │ — `.xa-t` is the ticker's words, so :has(.xa-t) is "there is something to the right". */
+.xa-collapsed .xa-turn.xa-live:not(.xa-open):not(.xa-done) .xa-line:has(.xa-t) .xa-vr { display: block; }
+.xa-collapsed .xa-turn.xa-live:not(.xa-open):not(.xa-done) .xa-line:has(.xa-t) .xa-cur { display: flex; }
+/* thought-only: Thought/Thinking STAYS on the clock when the line opens. The live rule above
+   hides the ticker on `.xa-open` so a click used to drop a second Thought row under Working for. */
+.xa-collapsed .xa-turn.xa-thought-only .xa-line:has(.xa-t) .xa-vr { display: block; }
+.xa-collapsed .xa-turn.xa-thought-only .xa-line:has(.xa-t) .xa-cur { display: flex; }
 /* ONE settled step rides the line where the live ticker had it — the receipt IS the step, not a
    count for it (2026-09-19). The rail underneath still opens: the thought and the step's own
    detail live there, left-aligned under the clock as always. The ask rule above still wins: a
    settled turn cannot be asking (asking is live), so these only ever apply to a receipt. */
 .xa-collapsed .xa-turn.xa-done .xa-line.xa-docked .xa-vr { display: block; }
 .xa-collapsed .xa-turn.xa-done .xa-line.xa-docked .xa-cur { display: flex; }
-/* thought-only receipt: "Thought" is on the clock line, so the rail is the reasoning — no second
-   header, no icon column, no rail stem. The turn's own fold still hides this until the line opens. */
-.xa-collapsed .xa-turn.xa-done .xa-row.xa-think.xa-docked .xa-ic,
-.xa-collapsed .xa-turn.xa-done .xa-row.xa-think.xa-docked .xa-head { display: none; }
-.xa-collapsed .xa-turn.xa-done .xa-row.xa-think.xa-docked::before { display: none; }
-.xa-collapsed .xa-turn.xa-done .xa-row.xa-think.xa-docked .xa-fullwrap {
-  grid-template-rows: 1fr;
-  margin: 0 0 2px;
+/* thought-only ticker is a short word (Thinking / Thought). The line's mask fades the last
+   44px of .xa-cur — on a hugging column that is the WHOLE word, so it vanished (2026-09-20).
+   Words are in-flow so the auto column sizes to them; the slot is optional (gone when settled). */
+.xa-collapsed .xa-turn.xa-thought-only .xa-line .xa-cur {
+  flex: none;
+  min-width: min-content;
+  overflow: visible;
+  mask-image: none;
+  -webkit-mask-image: none;
+}
+.xa-collapsed .xa-turn.xa-thought-only .xa-line .xa-cur .xa-tx {
+  flex: none;
+  min-width: min-content;
+  overflow: visible;
+  height: auto;
+}
+.xa-collapsed .xa-turn.xa-thought-only .xa-line .xa-cur .xa-t { position: static; }
+/* thought-only: one grid live AND settled. Leftover width sits in shots, not in Thought,
+   so `Worked for 2s | Thought ›` hugs the bar and the hang (cur+chev+shots) never
+   changes tracks when xa-live comes off. */
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thought {
+  display: grid;
+  grid-template-columns: auto auto auto auto auto 1fr;
+  /* The clock row is PINNED to the line's own height (22px), never `auto`. With `auto 0fr` the
+     first track absorbed the leftover height of the folded second one, so it measured 22px shut
+     and 16px open — the words jumped UP 3px the instant the trace opened, then back on close.
+     A fixed first track means opening cannot move the clock line at all; only row two grows.
+     The hang's `0fr -> 1fr` is TRANSITIONED, as the bench does it (`.xrow.think .fullwrap`:
+     `grid-template-rows 220ms`), so the trace unrolls instead of snapping (measured 2026-09-20). */
+  grid-template-rows: var(--xa-clockrow, 22px) auto;
+  grid-template-areas:
+    "dot read vr cur chev shots"
+    ". . . hang hang hang";
+  column-gap: 10px;
+  row-gap: 0;
+  align-items: center;
+}
+/* settled: the square is display:none, but an empty first track still takes column-gap.
+   Drop the `dot` column so Worked for sits on the left with no indent. Hang stays on Thought. */
+.xa-collapsed .xa-turn.xa-thought-only:not(.xa-live) .xa-line.xa-thought {
+  grid-template-columns: auto auto auto auto 1fr;
+  grid-template-areas:
+    "read vr cur chev shots"
+    ". . hang hang hang";
+}
+/* THINKING WAS THE WHOLE TURN: `Worked for 2s | Thought for 2s` is one fact said twice, so the
+   wrapper falls away and the thought takes the line — `Thought for 2s >`. Only when the two
+   durations READ the same (see the JSX); the moment there is other work the receipt returns.
+   `Worked for` blurs out exactly as the square does, and the thought glides into its place:
+   the same fold, one column further. */
+/* RUN-IN: the trace begins on the SAME line, just right of `Thought for 2s >`, and wraps to the
+   full width underneath — so a one-sentence trace reads as one line rather than a header with a
+   near-empty row under it. A float is the only thing that does this: grid and flex both put a
+   child in its OWN track, which is what produced the second row. The header floats, the trace is
+   ordinary flow text, and the browser shortens the first line by the float's width for free.
+   The line stops being a grid here, so the `grid-area` assignments below no longer apply to it. */
+.xa-collapsed .xa-turn.xa-thought-only:not(.xa-live) .xa-line.xa-thoughtsolo {
+  display: block;
+}
+/* 🔴 The float's HEIGHT decides how many lines are shortened. At the clock row's 22px it
+   overlapped the trace's second 16px line too, so line 1 also started at x=91.6 instead of
+   returning to the left margin — measured. Matching the float to the text's own line-height
+   means exactly ONE line runs in, and every line after it is full width. */
+.xa-collapsed .xa-turn.xa-thought-only:not(.xa-live) .xa-line.xa-thoughtsolo > .xa-cur,
+.xa-collapsed .xa-turn.xa-thought-only:not(.xa-live) .xa-line.xa-thoughtsolo > .xa-chev {
+  float: left;
+  height: 16px;
+  display: flex;
+  align-items: center;
+}
+.xa-collapsed .xa-turn.xa-thought-only:not(.xa-live) .xa-line.xa-thoughtsolo > .xa-chev {
+  margin-right: 8px;         /* the gap the grid's column-gap used to give */
+}
+/* 🔴 The trace must NOT establish a block formatting context. `overflow: hidden` does, and a BFC
+   never overlaps a float — measured, the whole block indented to x=91.6 and sat beside the header
+   instead of wrapping under it. The fold's `overflow: hidden` therefore cannot live here; the
+   0fr/1fr grid on `.xa-hang` is also a BFC, so the FOLD moves out to a wrapper and this element
+   stays plain flow text. */
+.xa-collapsed .xa-turn.xa-thought-only:not(.xa-live) .xa-line.xa-thoughtsolo > .xa-hang {
+  display: block;
+  overflow: visible;
+  grid-template-rows: none;
+  transition: none;
+}
+.xa-collapsed .xa-turn.xa-thought-only:not(.xa-live) .xa-line.xa-thoughtsolo > .xa-hang > .xa-hangin {
+  overflow: visible;
+  padding: 0;
+}
+/* folded: the trace is simply not rendered, rather than a zero-height box that would still
+   shorten the first line */
+.xa-collapsed .xa-turn.xa-thought-only:not(.xa-open) .xa-line.xa-thoughtsolo > .xa-hang { display: none; }
+.xa-collapsed .xa-turn.xa-thought-only:not(.xa-live) .xa-line.xa-thoughtsolo > .xa-shots { float: right; }
+/* the float must not escape the line into the reply below it */
+.xa-collapsed .xa-turn.xa-thought-only:not(.xa-live) .xa-line.xa-thoughtsolo::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thoughtsolo > .xa-read,
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thoughtsolo > .xa-vr { display: none; }
+.xa-turn.xa-settle .xa-line.xa-thoughtsolo .xa-read { animation: xa-dotout 200ms var(--xa-ease-out) both; }
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thought > .xa-dot { grid-area: dot; }
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thought > .xa-read { grid-area: read; }
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thought > .xa-vr { grid-area: vr; }
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thought > .xa-cur { grid-area: cur; }
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thought > .xa-chev { grid-area: chev; }
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thought > .xa-shots { grid-area: shots; }
+/* the line sets `align-items: center`, which applies to the hang too: in the folded `0fr` track it
+   sized to its own 16px and CENTRED, so the trace hung 8px BELOW the clock line while collapsed —
+   a stray line of reasoning under a folded turn (measured 2026-09-20). Stretching it makes the
+   track's height its height, so 0fr really is nothing. */
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thought > .xa-hang {
+  grid-area: hang;
+  align-self: stretch;
+  display: grid;
+  grid-template-rows: 0fr;
+  min-width: 0;
+  min-height: 0;
+  transition: grid-template-rows 220ms var(--xa-ease);
+}
+.xa-collapsed .xa-turn.xa-thought-only.xa-open .xa-line.xa-thought > .xa-hang { grid-template-rows: 1fr; }
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thought > .xa-hang > .xa-hangin {
+  min-height: 0;
+  overflow: hidden;
+  /* the padding is part of the open box, so it must travel WITH the row or it lands in one
+     frame while the row is still unrolling — an 8px step at the start of a 220ms move
+     (measured). The bench transitions its wrapper's margin for the same reason. */
+  transition: padding 220ms var(--xa-ease);
+  padding: 6px 0 2px;
+  font-size: 11.5px;
+  line-height: 16px;
+  color: var(--xa-t4);
+}
+.xa-collapsed .xa-turn.xa-thought-only:not(.xa-open) .xa-line.xa-thought > .xa-hang > .xa-hangin { padding: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thought > .xa-hang,
+  .xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thought > .xa-hang > .xa-hangin { transition: none; }
 }
+.xa-collapsed .xa-turn.xa-thought-only .xa-hang p { margin: 0 0 4px; }
+.xa-collapsed .xa-turn.xa-thought-only .xa-hang p:last-child { margin: 0; }
 .xa-collapsed .xa-turn.xa-live:not(.xa-open):not(.xa-asking) .xa-railwrap { grid-template-rows: 0fr; }
 /* an ask surfaces alone: its row and its card, the rest of the rail stays folded */
 .xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-rail .xa-row:not(.xa-ask):not(.xa-sub),
@@ -7688,6 +7844,11 @@ a.xeno-source-card:focus-visible {
 .xa-collapsed .xa-turn.xa-live .xa-line { cursor: pointer; }
 .xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-rail .xa-row.xa-sub { display: flex; }
 .xa-collapsed .xa-turn.xa-live.xa-asking:not(.xa-open) .xa-rail .xa-row.xa-sub.xa-folded { display: none; }
+/* a docked thought with no recorded words: the duration is real, the trace is not — so the
+   line says `Thought for 4s` and offers no chevron to open nothing (2026-09-20) */
+.xa-line.xa-inert .xa-chev { display: none; }
+.xa-turn:not(.xa-live) .xa-line.xa-inert { cursor: default; }
+.xa-turn:not(.xa-live) .xa-line.xa-inert:hover .xa-read { color: var(--xa-t4); }
 .xa-line .xa-shots { margin-left: auto; display: flex; gap: 4px; }
 .xa-railwrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 220ms var(--xa-ease); }
 .xa-turn:not(.xa-live):not(.xa-open) .xa-railwrap { grid-template-rows: 0fr; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/agent-interface-ui",
-  "version": "0.1.51",
+  "version": "0.1.68",
   "license": "UNLICENSED",
   "type": "module",
   "main": "./dist/index.js",
@@ -33,7 +33,7 @@
     "directory": "packages/ui"
   },
   "dependencies": {
-    "@xenosystem/elements-react": "0.0.1",
+    "@xenosystem/elements-react": "0.0.5",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "clsx": "^2.1.1",
@@ -42,11 +42,11 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "zustand": "^5.0.2",
-    "@xenosystem/agent-interface-client": "0.1.51",
-    "@xenosystem/agent-conversation": "0.1.51",
-    "@xenosystem/agent-interface-core": "0.1.51",
-    "@xenosystem/agent-interface-hub-adapter": "0.1.51",
-    "@xenosystem/agent-interface-contract": "0.1.51"
+    "@xenosystem/agent-conversation": "0.1.68",
+    "@xenosystem/agent-interface-client": "0.1.68",
+    "@xenosystem/agent-interface-contract": "0.1.68",
+    "@xenosystem/agent-interface-hub-adapter": "0.1.68",
+    "@xenosystem/agent-interface-core": "0.1.68"
   },
   "peerDependencies": {
     "react": "^19.0.0",