@xenosystem/agent-interface-ui 0.1.70 → 0.1.72

package/dist/agent.css

@@ -7667,7 +7667,20 @@ a.xeno-source-card:focus-visible {
    ticker to its glyph and the words vanished (2026-09-18); settled, beside a sources control, the line
    hugs its reading so the divider sits right after "1 step" */
 .xa-linerow > .xa-line { flex: 1 1 auto; min-width: 0; }
-.xa-linerow > .xa-line.xa-with-sources { flex: none; }
+.xa-linerow > .xa-line.xa-with-sources { flex: 0 1 auto; }
+/* 🔴 a DOCKED step beside the sources: `Worked for 4s | Searched the web · xeno hub | 1 source`.
+   Its ticker is `flex: 1 1 0` — a zero basis — so inside a line that hugs its content it measured
+   19px and showed the GLYPH ALONE, the 0.1.48 defect again for the one shape it missed (measured
+   2026-09-24: the most common web-search receipt read `Worked for 4s | ◻ | 1 source`). Sized to its
+   words here, and shrinkable, so a long query still fades at the edge instead of pushing the sources off. */
+.xa-linerow > .xa-line.xa-with-sources .xa-cur { flex: 0 1 auto; }
+/* …and the words must be IN FLOW to be sized to at all: a live ticker's words are absolutely
+   positioned (so one step can slide over the last), which gives its box no width but the glyph's.
+   Settled there is nothing left to slide over, so the words take their place in the line — the
+   thought-only line does the same — and the box, not a fixed basis, is what shrinks. */
+.xa-linerow > .xa-line.xa-with-sources .xa-cur .xa-tx { flex: 0 1 auto; }
+.xa-linerow > .xa-line.xa-with-sources .xa-cur .xa-t:not(.xa-out) { position: static; display: block; overflow: hidden; }
+.xa-linerow > .xa-line.xa-with-sources .xa-cur .xa-t.xa-out { display: none; }
 .xa-linerow > .xa-vr-src { display: block; flex: none; width: 1px; height: 10px; background: rgba(var(--xa-ink), 0.12); animation: xa-rise 280ms var(--xa-ease) both; animation-delay: 160ms; }
 .xa-srcline { display: flex; align-items: center; gap: 8px; height: 22px; cursor: pointer; font-size: 11px; color: var(--xa-t4); animation: xa-rise 280ms var(--xa-ease) both; animation-delay: 160ms; }
 .xa-srcline:hover { color: var(--xa-t2); }
@@ -7712,7 +7725,15 @@ a.xeno-source-card:focus-visible {
 /* collapsed steps: while it works the rail stays folded and the clock line carries the current step —
    "Working for 4s | Clicked Message @Lil Bro" — the text fading out on the right when it is long */
 .xa-line .xa-vr { display: none; flex: none; width: 1px; height: 10px; background: rgba(var(--xa-ink), 0.12); }
-.xa-line .xa-cur { display: none; align-items: center; gap: 7px; flex: 1 1 0; min-width: 0; height: 16px; overflow: hidden; font-size: 11.5px; line-height: 16px; color: var(--xa-t4); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%); }
+.xa-line .xa-cur { display: none; align-items: center; gap: 7px; flex: 1 1 0; min-width: 0; height: 16px; overflow: hidden; font-size: 11.5px; line-height: 16px; color: var(--xa-t4); }
+/* the fade is for words that are CUT OFF, and only those: masking every ticker faded the last 44px of a
+   short line whole — `Searched the web · xeno hub` lost its object (the Ticker sets `xa-long` by
+   measuring whether its words overflow) */
+.xa-line .xa-cur.xa-long { mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%); }
+/* a glyph leaving for a bare word closes its slot as it goes — width and the gap after it — instead of
+   dropping 19px out from under the words in one frame when the old glyph is removed */
+.xa-line .xa-cur .xa-slot { transition: width 200ms var(--xa-ease), margin-right 200ms var(--xa-ease); }
+.xa-line .xa-cur .xa-slot.xa-slotout { width: 0; margin-right: -7px; }
 .xa-line .xa-cur .xa-mono { font-size: 11px; }
 /* the first step slides out from behind the clock — glyph, then its words; every later step replaces the
    pair: the glyph rises from below as the old one leaves upward, the words come out from behind the glyph */
@@ -7743,23 +7764,43 @@ a.xeno-source-card:focus-visible {
    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 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). */
+/* thought-only: the words are IN FLOW so the auto column sizes to them — a short `Thinking` or
+   `Thought for 3s` gets exactly its width and hugs the bar; the slot is optional (gone when settled).
+
+   🔴 In flow is not the same as unbounded. This rule used to say `min-width: min-content` and
+   `overflow: visible`, which was right for the short word it was written for (2026-09-20) and wrong
+   for the sentence the same slot carries while a thought STREAMS — `Thinking · Let me reconsider…`
+   is the current line of the thought, not a word. A long line therefore ran past the clock line's
+   right edge instead of stopping at it (measured 2026-09-25: words to x 1048 on a line ending at
+   744, with a horizontal scrollbar). `min-width: 0` lets the auto track shrink to the space there
+   is; the column still sizes to the words whenever they fit, and the mask below fades them only
+   when they are actually cut off. */
 .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;
+  min-width: 0;
+  overflow: hidden;
 }
 .xa-collapsed .xa-turn.xa-thought-only .xa-line .xa-cur .xa-tx {
-  flex: none;
-  min-width: min-content;
-  overflow: visible;
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
   height: auto;
 }
 .xa-collapsed .xa-turn.xa-thought-only .xa-line .xa-cur .xa-t { position: static; }
+/* 🔴 The phrase that is LEAVING must not take a place in the flow. With both in flow, every new
+   phrase of a streaming thought was laid out BESIDE the old one — `Thinking` at 156px, the new
+   `Thinking · This is…` at 199px — for the 300 ms the old one takes to leave, and then jumped left
+   into its real place; `Thinking` -> `Thought for 2s` did the same, 71px out (measured 2026-09-25).
+   The leaving phrase overlays the arriving one at the left edge and blurs out, as it does on every
+   other clock line, and is clipped to the words' box so it can neither widen the column nor mark
+   the arriving words as cut off (the Ticker measures `.xa-tx` to decide the fade). */
+.xa-collapsed .xa-turn.xa-thought-only .xa-line .xa-cur .xa-t.xa-out {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  overflow: hidden;
+}
 /* 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. */
@@ -7781,8 +7822,12 @@ a.xeno-source-card:focus-visible {
   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 {
+   Drop the `dot` column so Worked for sits on the left with no indent. Hang stays on Thought.
+   🔴 Keyed on `xa-squared` — the square GONE — never on `:not(.xa-live)`. The turn stops being live
+   ~500ms before the square leaves, and in that window this rule left a displayed square with no
+   track: it fell into an implicit row, the line grew 22 -> 28px, and the square blinked out at the
+   far right (measured 2026-09-24). */
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thought.xa-squared {
   grid-template-columns: auto auto auto auto 1fr;
   grid-template-areas:
     "read vr cur chev shots"
@@ -7799,21 +7844,25 @@ a.xeno-source-card:focus-visible {
    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 {
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thoughtsolo.xa-squared {
   display: block;
+  /* the 16px text line CENTRED in the 22px clock row, where the grid had it. A block puts its first
+     line at the top, so without this the thought rose 3px at the fold — the vertical move the eye
+     catches (measured 2026-09-24: y 29 -> 26). The padding is the centring; min-height keeps 22. */
+  padding: 3px 0;
 }
 /* 🔴 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 {
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thoughtsolo.xa-squared > .xa-cur,
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thoughtsolo.xa-squared > .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 {
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thoughtsolo.xa-squared > .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
@@ -7821,29 +7870,35 @@ a.xeno-source-card:focus-visible {
    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 {
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thoughtsolo.xa-squared > .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 {
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thoughtsolo.xa-squared > .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; }
+   shorten the first line — except while CLOSING, when it stays laid out so the line can roll back up
+   over it (the Transcript animates the line's height; the trace cannot animate its own) */
+.xa-collapsed .xa-turn.xa-thought-only:not(.xa-open) .xa-line.xa-thoughtsolo:not(.xa-closing) > .xa-hang { display: none; }
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thoughtsolo.xa-squared > .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 {
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thoughtsolo.xa-squared::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; }
+/* `Worked for |` leaves with the square: both blur out together (`xa-settle`), and only then are they
+   removed (`xa-squared`) and the thought glides into their place. Removing them the moment the turn
+   stopped — as 0.1.64 did — meant the blur could never render: the words vanished in one frame and
+   the thought jumped 47px left, then sat there half a second before the fold (measured 2026-09-24). */
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thoughtsolo.xa-squared > .xa-read,
+.xa-collapsed .xa-turn.xa-thought-only .xa-line.xa-thoughtsolo.xa-squared > .xa-vr { display: none; }
+.xa-turn.xa-settle .xa-line.xa-thoughtsolo > .xa-read,
+.xa-turn.xa-settle .xa-line.xa-thoughtsolo > .xa-vr { 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; }
@@ -9456,6 +9511,9 @@ img.xa-fav { padding: 1px; background: #fff; }
 .min-h-full {
   min-height: 100%;
 }
+.w-0 {
+  width: 0px;
+}
 .w-1 {
   width: 0.25rem;
 }
@@ -12185,6 +12243,10 @@ img.xa-fav { padding: 1px; background: #fff; }
   --tw-drop-shadow: drop-shadow(0 0 34px rgba(255,255,255,0.16));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.invert {
+  --tw-invert: invert(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/agent-interface-ui",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "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.70",
-    "@xenosystem/agent-interface-core": "0.1.70",
-    "@xenosystem/agent-interface-client": "0.1.70",
-    "@xenosystem/agent-interface-contract": "0.1.70",
-    "@xenosystem/agent-interface-hub-adapter": "0.1.70"
+    "@xenosystem/agent-conversation": "0.1.72",
+    "@xenosystem/agent-interface-client": "0.1.72",
+    "@xenosystem/agent-interface-core": "0.1.72",
+    "@xenosystem/agent-interface-contract": "0.1.72",
+    "@xenosystem/agent-interface-hub-adapter": "0.1.72"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -63,5 +63,5 @@
   "scripts": {
     "build:css": "node scripts/build-css.mjs"
   },
-  "gitHead": "f7518d3ec8fdac26735619352954b178378ed2b3"
+  "gitHead": "88d6adeead1ddd1a09885dfdd05d0d281ceca2de"
 }