@xenosystem/agent-interface-ui 0.1.69 → 0.1.71

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 */
@@ -7781,8 +7802,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 +7824,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 +7850,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 +9491,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 +12223,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.69",
+  "version": "0.1.71",
   "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.69",
-    "@xenosystem/agent-interface-contract": "0.1.69",
-    "@xenosystem/agent-interface-client": "0.1.69",
-    "@xenosystem/agent-interface-core": "0.1.69",
-    "@xenosystem/agent-interface-hub-adapter": "0.1.69"
+    "@xenosystem/agent-conversation": "0.1.71",
+    "@xenosystem/agent-interface-contract": "0.1.71",
+    "@xenosystem/agent-interface-core": "0.1.71",
+    "@xenosystem/agent-interface-hub-adapter": "0.1.71",
+    "@xenosystem/agent-interface-client": "0.1.71"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -62,6 +62,5 @@
   },
   "scripts": {
     "build:css": "node scripts/build-css.mjs"
-  },
-  "gitHead": "3388de3feb4e3b64664d7e836c574646c7948e02"
+  }
 }