@spexcode/transcript-ui 0.7.0-next.12 → 0.7.0-next.14

package/dist/TranscriptView.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { useTranscriptUi } from './context.js';
 import { Caret } from './icons.js';
 import { Quote } from './Quote.js';
@@ -18,17 +19,46 @@ export function QuotedTurn({ turn }) {
     const envelope = parseEnvelope(turn.text || '', envelopes);
     return _jsx(Quote, { who: envelope.who, ts: envelope.at ?? turn.at, text: envelope.body, className: "tx-quote-nested" });
 }
+// A FOLD IS A MOVEMENT, and a fold that is only a re-render cannot move: React drops the work the instant a
+// segment folds — when the agent speaks, or when the next message ends the stretch — so the page arrives at the
+// row without ever travelling to it. This keeps the outgoing content mounted for exactly one duration so the
+// collapse is visible, and it is the same hook that opens and shuts the fold's own body. Two details are load
+// bearing. The phase is decided during the render that flips, not in an effect: an effect runs after paint, so
+// the reader would see the jump first and the animation afterwards. And the flag can never outlive its timer,
+// because a flag that survived would leave a second copy of the work standing on the page.
+//
+// The duration lives in both layers by necessity: the keyframe is CSS (`--tx-dur-fold`) and the unmount is JS.
+// They are the same number, and this is the one place the JS half says it.
+const FOLD_MS = 170;
+function useFold(open) {
+    const [was, setWas] = useState(open);
+    const [phase, setPhase] = useState('');
+    if (was !== open) {
+        setWas(open);
+        setPhase(open ? 'in' : 'out');
+    }
+    useEffect(() => {
+        if (!phase)
+            return undefined;
+        const timer = setTimeout(() => setPhase(''), FOLD_MS);
+        return () => clearTimeout(timer);
+    }, [phase]);
+    return [phase === 'out', phase === 'in'];
+}
 export function WorkSegmentView({ segment, openIds, onToggle, live }) {
     const { labels, vocabulary } = useTranscriptUi();
     const id = `seg:${segment.work[0]?.id || segment.answer?.id}`;
     const open = openIds.has(id);
+    const [folding] = useFold(!segment.folded); // the work is on its way behind the row
+    const [shutting, opening] = useFold(open); // the row's own disclosure
     const kinds = runKinds(segment.work.flatMap((turn) => turn.tools ?? []), vocabulary);
     const foldedCalls = segment.work.reduce((n, turn) => n + (turn.tools?.length || 0), 0);
     // a fold must not hide a failure: the row counts the calls whose harness recorded one
     const failedCalls = segment.work.reduce((n, turn) => n + (turn.tools?.filter((tool) => tool.outcome).length || 0), 0);
     // history folds its runs; the work in progress (a live segment's calls after its newest prose) does not
     const history = !segment.now || !!segment.answer;
-    return _jsxs(_Fragment, { children: [segment.folded ? (_jsxs("div", { className: `tx-work${failedCalls ? ' is-failed' : ''}`, children: [_jsxs("button", { type: "button", className: "tx-work-row", "aria-expanded": open, onClick: () => onToggle(id), children: [_jsx("span", { className: "tx-work-lead", children: labels.toolUses(foldedCalls) }), kinds && _jsx("span", { className: "tx-work-detail", children: kinds }), failedCalls > 0 && _jsx("span", { className: "tx-tool-outcome is-failed", children: labels.failedCount(failedCalls) }), _jsx(Caret, { open: open, className: "tx-work-caret" })] }), open && _jsx("div", { className: "tx-work-body", children: segment.work.map((turn) => _jsx(TurnBody, { turn: turn, openIds: openIds, onToggle: onToggle, live: live }, turn.id)) })] })) : segment.work.map((turn) => _jsx(TurnBody, { turn: turn, openIds: openIds, onToggle: onToggle, live: live, fold: history }, turn.id)), segment.answer && _jsx(TurnBody, { turn: segment.answer, openIds: openIds, onToggle: onToggle, live: live, fold: !segment.now }), segment.after.map((turn) => _jsx(TurnBody, { turn: turn, openIds: openIds, onToggle: onToggle, live: live, fold: !segment.now }, turn.id))] });
+    const process = (fold) => segment.work.map((turn) => _jsx(TurnBody, { turn: turn, openIds: openIds, onToggle: onToggle, live: live, fold: fold }, turn.id));
+    return _jsxs(_Fragment, { children: [segment.folded ? (_jsxs("div", { className: `tx-work${failedCalls ? ' is-failed' : ''}${folding ? ' is-folding' : ''}`, children: [_jsxs("button", { type: "button", className: "tx-work-row", "aria-expanded": open, onClick: () => onToggle(id), children: [_jsx("span", { className: "tx-work-lead", children: labels.toolUses(foldedCalls) }), kinds && _jsx("span", { className: "tx-work-detail", children: kinds }), failedCalls > 0 && _jsx("span", { className: "tx-tool-outcome is-failed", children: labels.failedCount(failedCalls) }), _jsx(Caret, { open: open, className: "tx-work-caret" })] }), folding && _jsx("div", { className: "tx-fold is-closing", children: _jsx("div", { className: "tx-flow", children: process(!live) }) }), (open || shutting) && _jsx("div", { className: `tx-fold${opening ? ' is-opening' : ''}${shutting ? ' is-closing' : ''}`, children: _jsx("div", { className: "tx-work-body", children: process(true) }) })] })) : process(history), segment.answer && _jsx(TurnBody, { turn: segment.answer, openIds: openIds, onToggle: onToggle, live: live, fold: !segment.now }), segment.after.map((turn) => _jsx(TurnBody, { turn: turn, openIds: openIds, onToggle: onToggle, live: live, fold: !segment.now }, turn.id))] });
 }
 export function SegmentView({ segment, ...rest }) {
     if (segment.kind === 'quote')

package/dist/segments.js

@@ -37,12 +37,14 @@ export function segments(turns, options = {}) {
         const answer = run[lead]?.text ? run[lead] : null;
         const work = answer ? run.slice(0, lead) : run;
         const after = answer ? run.slice(lead + 1) : [];
-        // THE FOLD DECIDES ON WHAT IT WILL HIDE, which is the WORK's calls — not the segment's. `calls` counts the
-        // whole run, answer included, and a run whose calls all sit on its answer turn hides none of them: deciding
-        // on that total drew a fold row reading "0 tool uses" over prose, a row naming something it did not stand
-        // for. The row counts the hidden calls, so the decision must count the same ones.
+        // HOW BUSY THE STRETCH WAS decides whether to collapse it; WHAT THE COLLAPSE HIDES is what the row counts.
+        // Those are two different quantities and both belong: `calls` is the whole run, answer included, and it is
+        // the honest measure of "was this worth folding". But a run whose calls ALL sit on its answer turn hides
+        // none of them, and folding it anyway drew a row reading "0 tool uses" over prose — a control naming
+        // something it did not stand for. So the threshold stays on the run, and the fold requires that there be
+        // something to hide.
         const hidden = work.reduce((n, turn) => n + (turn.tools?.length || 0), 0);
-        out.push({ kind: 'work', work, answer, after, calls, folded: fold === 'segments' && hidden >= runMin && work.length > 0, now: false });
+        out.push({ kind: 'work', work, answer, after, calls, folded: fold === 'segments' && calls >= runMin && hidden > 0, now: false });
         run = [];
     };
     for (const turn of turns) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spexcode/transcript-ui",
-  "version": "0.7.0-next.12",
+  "version": "0.7.0-next.14",
   "type": "module",
   "description": "React components that draw a normalized agent transcript — the person quoted, the agent as the page, a tool call as a sentence, the work folded behind its answer — with the fold, the prose renderer, the tool vocabulary, the labels and the design tokens all tunable.",
   "files": [
@@ -24,7 +24,7 @@
     "test": "npm run build && tsx --test src/*.test.tsx"
   },
   "dependencies": {
-    "@spexcode/transcript": "0.7.0-next.12"
+    "@spexcode/transcript": "0.7.0-next.14"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0"

package/styles.css

@@ -25,6 +25,8 @@
   --tx-radius: var(--radius, 6px);
   --tx-space-1: 4px; --tx-space-2: 6px; --tx-space-3: 8px; --tx-space-4: 12px; --tx-space-5: 16px; --tx-space-6: 22px;
   --tx-dur-rise: var(--dur-rise, 120ms);
+  /* a fold is the same gesture the host's own panels fold with, so it borrows that duration before its own default */
+  --tx-dur-fold: var(--dur-fold, var(--dur-panel, 170ms));
   min-width: 0;
   color: var(--tx-ink);
 }
@@ -59,7 +61,7 @@
 .tx-quote-more { position: absolute; right: 10px; bottom: 6px; z-index: 1; padding: 0; color: var(--tx-blue); background: none; border: 0; font: inherit; font-family: var(--tx-ui-font); font-size: var(--tx-type-caption); cursor: pointer; }
 
 /* THE WORK SEGMENT'S ONE LINE: a bounded sentence — the count, the kinds, the chevron trailing. */
-.tx-work { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
+.tx-work { display: flex; flex-direction: column; align-items: flex-start; }
 .tx-work-row {
   display: inline-flex; align-items: baseline; gap: 7px; max-width: 100%; padding: var(--tx-space-2) var(--tx-space-3); margin-left: calc(var(--tx-space-3) * -1);
   color: var(--tx-muted); background: none; border: 0; border-radius: var(--tx-radius);
@@ -68,7 +70,22 @@
 .tx-work-row:hover { background: var(--tx-wash-hover); color: var(--tx-ink2); }
 .tx-work-lead { flex: none; color: var(--tx-ink2); font-weight: var(--tx-weight-medium); }
 .tx-work-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.tx-work-body { align-self: stretch; display: flex; flex-direction: column; gap: 14px; padding-left: 10px; border-left: 1px solid var(--tx-edge); }
+.tx-work-body { display: flex; flex-direction: column; gap: 14px; padding-left: 10px; border-left: 1px solid var(--tx-edge); }
+
+/* THE FOLD TRAVELS TO ITS ROW. A stretch of work folds when the agent speaks and when the next message ends
+   the stretch, and it opens and shuts again under the reader's own hand; all three are the same movement, so
+   they are one wrapper. The height it travels is the content's, which nothing here measures: a one-row grid
+   going `1fr → 0fr` is how CSS reaches an auto height on its own. The outgoing copy is held by
+   [[transcript-view]] for exactly one duration and cannot outlive it. The space under the row travels with
+   the collapse (measured: as the column's `gap`, or as any margin outside the animated box, those last pixels
+   survive the movement and snap shut a frame after it), so the fold ends at the row's own height exactly. */
+.tx-fold { display: grid; align-self: stretch; min-width: 0; margin-top: var(--tx-space-3); }
+.tx-fold > * { min-height: 0; overflow: hidden; }
+.tx-fold.is-opening { animation: tx-unfold var(--tx-dur-fold) ease; }
+.tx-fold.is-closing { animation: tx-fold var(--tx-dur-fold) ease forwards; pointer-events: none; }
+.tx-work.is-folding > .tx-work-row { animation: tx-rise var(--tx-dur-fold) ease; }
+@keyframes tx-unfold { from { grid-template-rows: 0fr; margin-top: 0; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
+@keyframes tx-fold { from { grid-template-rows: 1fr; opacity: 1; } to { grid-template-rows: 0fr; margin-top: 0; opacity: 0; } }
 
 /* A TOOL CALL IS A SENTENCE, not a card: inline-flex, exactly as wide as what it says, capped so a long shell
    command never stretches the row into a full-width bar. The verb IS the status: no tick, no badge. */
@@ -116,7 +133,11 @@
 .tx-live.is-speaking > .tx-say:last-child .tx-say-text > :first-child > :last-child::after { content: '▍'; margin-left: 2px; color: var(--tx-muted); animation: tx-caret 1s steps(2, start) infinite; }
 @keyframes tx-caret { to { visibility: hidden; } }
 @media (prefers-reduced-motion: reduce) {
-  .tx-live .tx-say-text, .tx-live.is-speaking > .tx-say:last-child .tx-say-text > :first-child > :last-child::after, .tx-spin, .tx-caret { animation: none; transition: none; }
+  .tx-live .tx-say-text, .tx-live.is-speaking > .tx-say:last-child .tx-say-text > :first-child > :last-child::after, .tx-spin, .tx-caret,
+  .tx-fold, .tx-fold.is-opening, .tx-fold.is-closing, .tx-work.is-folding > .tx-work-row { animation: none; transition: none; }
+  /* the fold still folds — it just arrives: the copy on its way out is already at nothing, and the JS half
+     that holds it drops it on the same timer, so no motion and nothing lingers */
+  .tx-fold.is-closing { grid-template-rows: 0fr; margin-top: 0; opacity: 0; }
 }
 
 /* A NARROW PANE: the quote widens and shows its own time, because there is no ruler beside the flow. */