@giovannijecha/jecode 0.7.3 → 0.8.0

package/dist/text-boundary.js

@@ -0,0 +1,47 @@
+// Shared grapheme boundaries for every projection of user-visible text.
+const SEGMENTER = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+export function segmentGraphemes(text) {
+    return SEGMENTER.segment(text);
+}
+export function graphemes(text) {
+    const out = [];
+    for (const { segment } of segmentGraphemes(text))
+        out.push(segment);
+    return out;
+}
+/** Largest complete grapheme boundary no greater than a UTF-16 offset. */
+export function graphemeFloor(text, offset) {
+    const target = Math.max(0, Math.min(text.length, offset));
+    if (target === 0 || target === text.length)
+        return target;
+    const containing = segmentGraphemes(text).containing(target);
+    if (containing === undefined || containing.index === target)
+        return target;
+    return containing.index;
+}
+/** Smallest complete grapheme boundary no less than a UTF-16 offset. */
+export function graphemeCeiling(text, offset) {
+    const target = Math.max(0, Math.min(text.length, offset));
+    if (target === 0 || target === text.length)
+        return target;
+    const containing = segmentGraphemes(text).containing(target);
+    if (containing === undefined || containing.index === target)
+        return target;
+    return containing.index + containing.segment.length;
+}
+/** Keep a bounded prefix without returning part of a user-perceived character. */
+export function leadingText(text, maxCodeUnits) {
+    if (maxCodeUnits <= 0)
+        return "";
+    if (text.length <= maxCodeUnits)
+        return text;
+    return text.slice(0, graphemeFloor(text, maxCodeUnits));
+}
+/** Keep a bounded suffix without returning part of a user-perceived character. */
+export function trailingText(text, maxCodeUnits) {
+    if (maxCodeUnits <= 0)
+        return "";
+    if (text.length <= maxCodeUnits)
+        return text;
+    return text.slice(graphemeCeiling(text, text.length - maxCodeUnits));
+}

package/dist/timeline.js

@@ -3,6 +3,7 @@
 // Selecting a node changes only the in-memory path. The next real user turn
 // is what persists a branch, so opening or cancelling this control plane can
 // never create empty history.
+import { leadingText } from "./text-boundary.js";
 import { usageFromHistory } from "./usage.js";
 import { heading } from "./tui/picker.js";
 export function timelinePicker(conversation, palette) {
@@ -83,7 +84,7 @@ function preview(node) {
         const text = message.content.find((block) => block.kind === "text")?.text
             .replace(/\s+/gu, " ").trim();
         if (text !== undefined && text !== "")
-            return text.slice(0, 160);
+            return leadingText(text, 160);
     }
     return "Untitled turn";
 }

package/dist/tools/args.js

@@ -2,7 +2,7 @@
 // tool takes three arguments and this is the whole job.
 //
 // Every throw here becomes an is_error tool result the model can read and
-// correct on the next step, so the messages are written for that reader.
+// correct on the next request, so the messages are written for that reader.
 export function requireString(args, name, allowEmpty = false) {
     const value = args[name];
     if (typeof value !== "string" || (!allowEmpty && value === "")) {

package/dist/tools/fs.js

@@ -120,15 +120,18 @@ export const writeFile = {
     },
 };
 export async function runWriteFile(args, ctx, dependencies = DEFAULT_MUTATION_DEPENDENCIES) {
+    throwIfAborted(ctx.signal);
     const root = await resolveExistingInRoot(ctx.root, ".");
     const target = await resolveDirectWritableInRoot(root, requireString(args, "path"));
     const content = requireString(args, "content", true);
     assertEditableText(content);
     await fs.mkdir(path.dirname(target), { recursive: true });
+    throwIfAborted(ctx.signal);
     await assertDirectWritableInRoot(root, target);
     const before = await current(target);
     assertApproved(before, ctx.preview, "write");
     await dependencies.atomicWrite(target, content, {
+        signal: ctx.signal,
         async validate(phase) {
             await assertDirectWritableInRoot(root, target);
             if (phase === "before-rename") {
@@ -181,12 +184,14 @@ export const editFile = {
     },
 };
 export async function runEditFile(args, ctx, dependencies = DEFAULT_MUTATION_DEPENDENCIES) {
+    throwIfAborted(ctx.signal);
     const root = await resolveExistingInRoot(ctx.root, ".");
     const target = await resolveDirectWritableInRoot(root, requireString(args, "path"), true);
     const before = await current(target, true);
     assertApproved(before, ctx.preview, "edit");
     const { after, made } = applied(before.text, args);
     await dependencies.atomicWrite(target, after, {
+        signal: ctx.signal,
         async validate(phase) {
             await assertDirectWritableInRoot(root, target, true);
             if (phase === "before-rename") {

package/dist/tools/text-boundary.js

@@ -1,41 +1,11 @@
 // Shared size and truncation boundaries for text handled by workspace tools.
 import { constants } from "node:fs";
 import { lstat, open } from "node:fs/promises";
+export { leadingText, trailingText } from "../text-boundary.js";
 export const MAX_EDITABLE_BYTES = 4_000_000;
 export const MAX_EDITABLE_CHARS = 1_000_000;
 export const MAX_EDITABLE_LINES = 20_000;
 const READ_CHUNK_BYTES = 64 * 1024;
-const GRAPHEME_SEGMENTER = new Intl.Segmenter(undefined, { granularity: "grapheme" });
-/** Keep a bounded prefix without returning part of a user-perceived character. */
-export function leadingText(text, maxCodeUnits) {
-    if (maxCodeUnits <= 0)
-        return "";
-    if (text.length <= maxCodeUnits)
-        return text;
-    let end = 0;
-    for (const { index, segment } of GRAPHEME_SEGMENTER.segment(text)) {
-        const next = index + segment.length;
-        if (next > maxCodeUnits)
-            break;
-        end = next;
-    }
-    return text.slice(0, end);
-}
-/** Keep a bounded suffix without returning part of a user-perceived character. */
-export function trailingText(text, maxCodeUnits) {
-    if (maxCodeUnits <= 0)
-        return "";
-    if (text.length <= maxCodeUnits)
-        return text;
-    let start = text.length;
-    for (const { index } of GRAPHEME_SEGMENTER.segment(text)) {
-        if (text.length - index <= maxCodeUnits) {
-            start = index;
-            break;
-        }
-    }
-    return text.slice(start);
-}
 /** Read a regular UTF-8 file without allowing an unbounded allocation. */
 export async function readEditableText(file, options = {}) {
     const label = options.label ?? "file";

package/dist/transcript.js

@@ -1,5 +1,6 @@
 // A portable transcript: screen blocks in, Markdown out.
 import { terminalText } from "./ui/terminal-text.js";
+import { toolDuration } from "./duration.js";
 export function defaultTranscriptName(now = new Date()) {
     return `jecode-transcript-${now.toISOString().replace(/[-:.]/g, "")}.md`;
 }
@@ -17,7 +18,11 @@ export function transcriptMarkdown(blocks) {
                 out.push("<details>", "<summary>Reasoning</summary>", "", safeMultiline(block.text), "", "</details>", "");
                 break;
             case "tool":
-                out.push(`- **${safeInline(block.name)}**${block.target === "" ? "" : ` \`${inlineCode(block.target)}\``}${block.right === "" ? "" : ` — ${safeInline(block.right)}`}`);
+                const outcome = [
+                    block.right === "" ? undefined : safeInline(block.right),
+                    block.durationMs === undefined ? undefined : toolDuration(block.durationMs),
+                ].filter((part) => part !== undefined).join(" · ");
+                out.push(`- **${safeInline(block.name)}**${block.target === "" ? "" : ` \`${inlineCode(block.target)}\``}${outcome === "" ? "" : ` — ${outcome}`}`);
                 if ((block.body?.length ?? 0) > 0) {
                     out.push("", "````text", ...(block.body ?? []).map(detail), "````", "");
                 }

package/dist/tui/activity.js

@@ -1,14 +1,29 @@
 // One foreground operation owns cancellation and elapsed time.
 export function begin(kind, label, now = Date.now()) {
-    return { kind, label, control: new AbortController(), startedAt: now };
+    return {
+        kind,
+        label,
+        control: new AbortController(),
+        startedAt: now,
+        phase: { label, startedAt: now },
+    };
+}
+/** Change the visible phase without restarting its timer on repeated stream chunks. */
+export function transition(activity, label, now = Date.now()) {
+    if (activity.phase.label === label)
+        return;
+    activity.phase = { label, startedAt: now };
 }
 export function elapsed(activity, now = Date.now()) {
-    const seconds = Math.max(0, Math.floor((now - activity.startedAt) / 1_000));
+    return since(activity.startedAt, now);
+}
+export function activityStatus(activity, now = Date.now()) {
+    return `${activity.phase.label} · ${since(activity.phase.startedAt, now)}`;
+}
+function since(startedAt, now) {
+    const seconds = Math.max(0, Math.floor((now - startedAt) / 1_000));
     if (seconds < 60)
         return `${seconds}s`;
     const minutes = Math.floor(seconds / 60);
     return `${minutes}m ${String(seconds % 60).padStart(2, "0")}s`;
 }
-export function activityStatus(activity, label = activity.label, now = Date.now()) {
-    return `${label} · ${elapsed(activity, now)}`;
-}

package/dist/tui/app-input.js

@@ -69,6 +69,8 @@ export function appInput(options) {
                 return;
             }
             case "tab": {
+                if (state.activity !== undefined)
+                    return;
                 const completion = state.completing ?? activateCompletion(state.editor.text);
                 const completed = completion === undefined ? undefined : selectedCompletion(completion);
                 if (completed !== undefined) {
@@ -107,7 +109,7 @@ export function appInput(options) {
         const edited = applyKey(state.editor, key);
         if (edited !== undefined) {
             state.editor = edited;
-            state.completing = activateCompletion(edited.text);
+            state.completing = state.activity === undefined ? activateCompletion(edited.text) : undefined;
         }
     }
     function recall(step) {
@@ -131,9 +133,26 @@ export function appInput(options) {
     }
     function submit() {
         const text = state.editor.text.trim();
-        if (text === "" || state.activity !== undefined)
+        if (text === "")
             return;
         const isCommand = text.startsWith("/");
+        if (state.activity !== undefined) {
+            if (isCommand) {
+                keep("Slash commands run after the active work finishes");
+                return;
+            }
+            const result = actions.steer(text);
+            if (result !== "queued") {
+                keep(result === "full"
+                    ? "Steering queue is full"
+                    : result === "closed"
+                        ? "The turn is finishing"
+                        : "Wait for the active command to finish");
+                return;
+            }
+            accept(text);
+            return;
+        }
         if (!isCommand) {
             const blocker = turnBlocker(session);
             if (blocker !== undefined) {
@@ -141,6 +160,13 @@ export function appInput(options) {
                 return;
             }
         }
+        accept(text);
+        if (isCommand)
+            void actions.command(text);
+        else
+            void actions.turn(text);
+    }
+    function accept(text) {
         state.editor = edit.EMPTY;
         state.recall = -1;
         state.draft = "";
@@ -149,10 +175,9 @@ export function appInput(options) {
         state.scroll = 0;
         state.follow = true;
         state.unseen = 0;
-        if (isCommand)
-            void actions.command(text);
-        else
-            void actions.turn(text);
+    }
+    function keep(text) {
+        feedback.show({ text: `${text} · prompt kept`, tone: "warn", timeoutMs: 4_000 });
     }
     return { handle };
 }

package/dist/tui/app-workflows.js

@@ -6,9 +6,11 @@ import { compactContext } from "../context/compactor.js";
 import { compactSession } from "../context/manual.js";
 import { isContextOverflow } from "../context/policy.js";
 import { updateSettings } from "../settings.js";
+import { steeringInbox } from "../steering.js";
 import { saveTranscript } from "../transcript-export.js";
-import { recordAuxiliaryUsage, recordUsage } from "../usage.js";
+import { recordAuxiliaryUsage, recordRequestInput, recordUsage } from "../usage.js";
 import { selectTimeline } from "../timeline.js";
+import { transition } from "./activity.js";
 import { answerAt } from "./approve.js";
 import * as edit from "./editor.js";
 import { cancel as cancelOpen } from "./overlay.js";
@@ -17,6 +19,7 @@ import { transcribe } from "./turn.js";
 const WAITING = "Waiting";
 export function appWorkflows(options) {
     const { session, state, permissions, feedback } = options;
+    let activeSteering;
     const choose = (picker) => new Promise((resolve) => {
         state.open = { picker, settle: resolve };
         options.render();
@@ -25,6 +28,7 @@ export function appWorkflows(options) {
         const activity = options.startActivity("command", `Running ${text.split(/\s+/)[0]}`);
         if (activity === undefined)
             return;
+        const status = (label) => transition(activity, label);
         try {
             const outcome = await handleCommand(text, session, {
                 emit: options.commandNotice,
@@ -43,7 +47,7 @@ export function appWorkflows(options) {
                     options.render();
                 }),
                 status: (said) => {
-                    state.status = said ?? activity.label;
+                    status(said ?? activity.label);
                     options.render();
                 },
                 reset: async () => {
@@ -78,8 +82,8 @@ export function appWorkflows(options) {
                     }
                     return compactSession(session, {
                         signal: activity.control.signal,
-                        onStatus: (status) => {
-                            state.status = status ?? activity.label;
+                        onStatus: (said) => {
+                            status(said ?? activity.label);
                             options.render();
                         },
                     });
@@ -108,6 +112,15 @@ export function appWorkflows(options) {
         const activity = options.startActivity("turn", WAITING);
         if (activity === undefined)
             return;
+        const inbox = steeringInbox((pending, accepting) => {
+            if (activeSteering !== inbox)
+                return;
+            state.steering = accepting ? pending : undefined;
+            options.render();
+        });
+        activeSteering = inbox;
+        state.steering = 0;
+        const status = (label) => transition(activity, label);
         const parentId = session.conversation.activeNodeId;
         const history = session.conversation.history;
         const modelHistory = session.conversation.contextHistory;
@@ -117,12 +130,13 @@ export function appWorkflows(options) {
         const prospectiveNodeId = session.conversation.nodes.length + 1;
         let nodeId;
         let context;
+        const unpersistedSteering = [];
         let firstPolicy = true;
         const policy = () => {
             let visible = firstPolicy;
             firstPolicy = false;
             if (visible) {
-                state.status = "Checking context";
+                status("Checking context");
                 options.render();
             }
             return resolveContextPolicy({
@@ -130,14 +144,14 @@ export function appWorkflows(options) {
                 model: session.model,
                 compactionPercent: session.config.compactionPercent,
                 signal: activity.control.signal,
-                onStatus: (status) => {
+                onStatus: (said) => {
                     visible = true;
-                    state.status = status;
+                    status(said);
                     options.render();
                 },
             }).finally(() => {
                 if (visible) {
-                    state.status = WAITING;
+                    status(WAITING);
                     options.render();
                 }
             });
@@ -157,9 +171,10 @@ export function appWorkflows(options) {
                 options.render();
             },
             status: (text) => {
-                state.status = text;
+                status(text);
             },
             usage: (usage) => recordUsage(session.usage, usage),
+            requestInput: (inputTokens) => recordRequestInput(session.usage, inputTokens),
         });
         const persist = async (checkpoint, settlement, failure) => {
             const next = session.conversation.commit({
@@ -180,6 +195,7 @@ export function appWorkflows(options) {
             session.conversation = next;
             nodeId = next.activeNodeId;
             state.committedNodeId = next.activeNodeId;
+            unpersistedSteering.length = 0;
         };
         const compact = async (checkpoint, projected, request) => {
             if (request.reason === "overflow" &&
@@ -200,11 +216,11 @@ export function appWorkflows(options) {
                 force,
                 policy: request.policy,
                 onBegin: () => {
-                    state.status = "Compacting";
+                    status("Compacting");
                     options.render();
                 },
                 onEnd: () => {
-                    state.status = WAITING;
+                    status(WAITING);
                     options.render();
                 },
             });
@@ -216,6 +232,11 @@ export function appWorkflows(options) {
             return result.messages;
         };
         events.onContext = compact;
+        events.onSteering = (guidance) => {
+            unpersistedSteering.push(guidance);
+            options.emit({ kind: "user", text: guidance });
+            options.render();
+        };
         events.onCheckpoint = async (checkpoint, settlement, projected) => {
             await persist(checkpoint, settlement);
             const compacted = await compact(checkpoint, projected, {
@@ -230,7 +251,7 @@ export function appWorkflows(options) {
         let finishReason;
         let failed;
         try {
-            await runTurn(history, controllerOptions(session, policy, permissions.availableTools()), events, activity.control.signal, modelHistory);
+            await runTurn(history, controllerOptions(session, policy, permissions.availableTools(), inbox), events, activity.control.signal, modelHistory);
         }
         catch (error) {
             const interrupted = activity.control.signal.aborted;
@@ -246,6 +267,10 @@ export function appWorkflows(options) {
             }
         }
         finally {
+            let pendingSteering = inbox.close();
+            if (activeSteering === inbox)
+                activeSteering = undefined;
+            state.steering = undefined;
             try {
                 events.finish(finishReason);
                 if (failed !== undefined) {
@@ -264,7 +289,14 @@ export function appWorkflows(options) {
                         // been saved. Revert to the last durable path and return the input
                         // to the composer so the user can retry without losing it.
                         options.replaceTranscript();
-                        state.editor = edit.of(text);
+                        state.editor = edit.of([
+                            ...(nodeId === undefined ? [text] : []),
+                            ...unpersistedSteering,
+                            ...pendingSteering,
+                            state.editor.text,
+                        ].filter((part) => part !== "").join("\n\n"));
+                        state.completing = undefined;
+                        pendingSteering = [];
                         feedback.show({
                             text: error.message,
                             tone: "error",
@@ -274,11 +306,22 @@ export function appWorkflows(options) {
                 }
             }
             finally {
+                restorePendingSteering(state, pendingSteering);
                 options.finishActivity(activity);
             }
         }
     }
-    return { command, turn };
+    function steer(text) {
+        return activeSteering?.offer(text) ?? "unavailable";
+    }
+    return { command, turn, steer };
+}
+function restorePendingSteering(state, messages) {
+    if (messages.length === 0)
+        return;
+    const pending = messages.join("\n\n");
+    state.editor = edit.of(state.editor.text === "" ? pending : `${pending}\n\n${state.editor.text}`);
+    state.completing = undefined;
 }
 function closeFailedTurn(history, settlement) {
     const closed = [...history];

package/dist/tui/app.js

@@ -21,6 +21,7 @@ import { appWorkflows } from "./app-workflows.js";
 import { sessionPermissions } from "../permissions.js";
 import { resumePicker } from "./resume.js";
 const FRAME_MS = 16;
+const MOTION_FRAME_MS = 40;
 const ACTIVITY_REFRESH_MS = 1_000;
 /** How long a lone escape waits to prove it is not the start of a sequence. */
 const ESCAPE_MS = 25;
@@ -36,6 +37,7 @@ export async function runApp(session, transcriptRoot, environment = {}) {
     const permissions = sessionPermissions(session.tools, session.config.autoApprove);
     let closed;
     let frameTimer;
+    let motionTimer;
     let activityTimer;
     let escapeTimer;
     let stopResize = () => { };
@@ -67,10 +69,12 @@ export async function runApp(session, transcriptRoot, environment = {}) {
             footer: footerInfo(session, workspace),
             status: state.activity === undefined
                 ? undefined
-                : activityStatus(state.activity, state.status ?? state.activity.label, now),
+                : activityStatus(state.activity, now),
+            steering: state.steering,
             feedback: state.feedback,
             readiness: turnBlocker(session),
             now,
+            reducedMotion: session.config.reducedMotion,
             modal: overlay.shown(state.open),
             menu: completionOptions(state.completing),
             menuIndex: state.completing?.index,
@@ -98,6 +102,16 @@ export async function runApp(session, transcriptRoot, environment = {}) {
         paint.paint(frame.rows, frame.cursor);
         if (frame.transcriptPending)
             render();
+        if (frame.transcriptAnimating && motionTimer === undefined) {
+            motionTimer = setTimeout(() => guard(() => {
+                motionTimer = undefined;
+                render();
+            }), Math.max(0, MOTION_FRAME_MS - FRAME_MS));
+        }
+        else if (!frame.transcriptAnimating && motionTimer !== undefined) {
+            clearTimeout(motionTimer);
+            motionTimer = undefined;
+        }
     };
     // Streaming produces a token at a time; painting at that rate is wasted
     // work, so repaints coalesce onto one frame.
@@ -148,6 +162,8 @@ export async function runApp(session, transcriptRoot, environment = {}) {
             clearInterval(activityTimer);
         if (frameTimer !== undefined)
             clearTimeout(frameTimer);
+        if (motionTimer !== undefined)
+            clearTimeout(motionTimer);
         if (escapeTimer !== undefined)
             clearTimeout(escapeTimer);
         safely(() => feedback.close());
@@ -193,7 +209,6 @@ export async function runApp(session, transcriptRoot, environment = {}) {
             return undefined;
         const activity = begin(kind, label);
         state.activity = activity;
-        state.status = label;
         activityTimer = setInterval(() => guard(() => {
             let activeTool;
             for (let index = state.blocks.length - 1; index >= 0; index--) {
@@ -215,7 +230,6 @@ export async function runApp(session, transcriptRoot, environment = {}) {
             clearInterval(activityTimer);
         activityTimer = undefined;
         state.activity = undefined;
-        state.status = undefined;
         state.open = overlay.cancel(state.open);
         if (state.closeWhenIdle)
             quit();
@@ -248,6 +262,7 @@ export async function runApp(session, transcriptRoot, environment = {}) {
         actions: {
             command: (text) => track(actions.command(text)),
             turn: (text) => track(actions.turn(text)),
+            steer: (text) => actions.steer(text),
         },
         live: () => live,
         quit,

package/dist/tui/blocks.js

@@ -9,11 +9,16 @@ export function render(block, width, pal, context = {}) {
         case "answer":
             return renderAnswer(block, width, pal);
         case "reasoning":
-            return renderReasoning(block, width, pal);
+            return renderReasoning(block, width, pal, {
+                continues: context.previous?.kind === "tool" || context.previous?.kind === "reasoning",
+            });
         case "tool":
             return renderTool(block, width, pal, {
-                continues: context.previous?.kind === "tool",
+                continues: context.previous?.kind === "tool" || context.previous?.kind === "reasoning",
+                followsReasoning: context.previous?.kind === "reasoning",
                 now: context.now,
+                motion: context.motion,
+                reducedMotion: context.reducedMotion,
             });
         case "notice":
             return renderNotice(block, width, pal);

package/dist/tui/components/messages.js

@@ -1,28 +1,32 @@
-import { blank, row } from "../../ui/render.js";
+import { trailingText } from "../../text-boundary.js";
+import { row } from "../../ui/render.js";
 import { markdown } from "../../ui/markdown.js";
-const PAD = 1;
+import { transcriptLead, transcriptWidth } from "../transcript-grammar.js";
 export const REASONING_PREVIEW_ROWS = 3;
 const MIN_REASONING_PREVIEW_CHARS = 4_096;
 const REASONING_PREVIEW_OVERSCAN = 12;
 export function renderUser(block, width, pal) {
-    const inner = Math.max(8, width - PAD * 2);
+    const inner = transcriptWidth(width);
     const content = markdown(block.text, inner, pal, inner);
     return [
         "",
-        blank(width, pal.surface.subtle),
-        ...content.map((line) => row(width, line.segs, [], pal.surface.subtle, PAD)),
-        blank(width, pal.surface.subtle),
+        ...content.map((line, index) => row(width, [
+            ...transcriptLead(width, index === 0
+                ? { text: "❯", fg: pal.accent, bold: true }
+                : undefined),
+            ...line.segs,
+        ])),
     ];
 }
 export function renderAnswer(block, width, pal) {
-    const inner = Math.max(8, width - PAD * 2);
+    const inner = transcriptWidth(width);
     return [
         "",
-        ...markdown(block.text, inner, pal, inner).map((line) => row(width, line.segs, [], undefined, PAD)),
+        ...markdown(block.text, inner, pal, inner).map((line) => row(width, [...transcriptLead(width), ...line.segs])),
     ];
 }
-export function renderReasoning(block, width, pal) {
-    const inner = Math.max(8, width - PAD * 2);
+export function renderReasoning(block, width, pal, context = {}) {
+    const inner = transcriptWidth(width);
     // Expanding a live stream is deferred until it is sealed. Re-parsing an
     // ever-growing full thought on every token makes the whole TUI stall.
     const expanded = block.expanded === true && block.live !== true;
@@ -32,8 +36,11 @@ export function renderReasoning(block, width, pal) {
     const content = markdown(source.text, inner, pal, inner);
     const visible = expanded ? content : content.slice(-REASONING_PREVIEW_ROWS);
     return [
-        "",
-        ...visible.map((line) => row(width, line.segs.map((seg) => ({ ...seg, fg: pal.ink.dim, italic: true })), [], undefined, PAD)),
+        ...(context.continues === true ? [] : [""]),
+        ...visible.map((line) => row(width, [
+            ...transcriptLead(width, { text: "│", fg: pal.rule }),
+            ...line.segs.map((seg) => ({ ...seg, fg: pal.ink.dim, italic: true })),
+        ])),
     ];
 }
 export function reasoningPreviewSource(text, width) {
@@ -42,9 +49,5 @@ export function reasoningPreviewSource(text, width) {
         return { text, truncated: false };
     // A compact view only needs its visible tail. The complete text remains on
     // the block for expansion after the reasoning stream is sealed.
-    let start = text.length - limit;
-    const code = text.charCodeAt(start);
-    if (code >= 0xdc00 && code <= 0xdfff)
-        start--;
-    return { text: text.slice(start), truncated: true };
+    return { text: trailingText(text, limit), truncated: true };
 }