@giovannijecha/jecode 0.7.4 → 0.8.0

package/dist/tui/components/tool.js

@@ -1,43 +1,63 @@
-// A compact execution trace: state and identity on one rail, evidence below.
-import { hasColor, row } from "../../ui/render.js";
+// A compact execution trace: state and identity on one semantic rail,
+// bounded evidence below, and motion that never enters durable state.
+import { fitSegs, hasColor, plainLen, row } from "../../ui/render.js";
 import { graphemeCeiling, graphemeFloor } from "../../text-boundary.js";
+import { toolDuration } from "../../duration.js";
+import { breathe, easeInOut, easeOut, interval, mix, TOOL_BIRTH_MS, TOOL_LEADER_MAX_MS, TOOL_ROW_ARRIVAL_MS, TOOL_SETTLE_MS, } from "../motion.js";
+import { transcriptLead, transcriptMark } from "../transcript-grammar.js";
 const OUTPUT_ROWS = 8;
 const LIVE_OUTPUT_ROWS = 6;
 const DIFF_ROWS = 15;
+const TOOL_NAME_COLS = 12;
+const TOOL_COLUMNS_AT = 64;
+const SPINNER_MS = 80;
+const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 export function renderTool(block, width, pal, context = {}) {
+    const now = context.now ?? Date.now();
     const shown = visibleDetails(block);
-    const right = liveLabel(block, context);
+    const ink = statusInk(block, pal, context, now);
+    const nameInk = birthInk(pal.ink.bright, pal.ink.dim, context, now);
+    const left = [
+        ...transcriptLead(width, { text: stateGlyph(block, context, now), fg: ink, bold: true }),
+        { text: toolName(block, width), fg: nameInk, bold: true },
+        ...(block.target === "" ? [] : [{ text: `  ${block.target}`, fg: pal.technical }]),
+    ];
+    const right = resultSegments(block, pal, context, now);
+    const leader = movingLeader(width, left, right, pal, context, now);
     return [
-        ...(context.continues === true ? [] : [""]),
-        row(width, [
-            { text: " " },
-            { text: `${stateGlyph(block)} `, fg: statusInk(block.tone, pal), bold: true },
-            { text: block.name, fg: pal.ink.bright, bold: true },
-            ...(block.target === "" ? [] : [{ text: `  ${block.target}`, fg: pal.technical }]),
-        ], right === "" ? [] : [{ text: right, fg: statusInk(block.tone, pal) }]),
-        ...shown.map((detail) => renderDetail(detail, block.tone, width, pal)),
+        ...(context.followsReasoning === true
+            ? [row(width, transcriptMark(width, { text: "│", fg: pal.rule }))]
+            : context.continues === true ? [] : [""]),
+        row(width, leader === undefined ? left : [...left, leader], right),
+        ...shown.map(({ detail, sourceIndex }) => renderDetail(detail, block.tone, width, pal, context.reducedMotion === true ? undefined : context.motion?.rowsAt[sourceIndex ?? -1], now)),
     ];
 }
 function visibleDetails(block) {
     const all = block.body ?? [];
-    if (block.expanded === true || all.length === 0)
-        return all;
+    if (block.expanded === true || all.length === 0) {
+        return all.map((detail, sourceIndex) => ({ detail, sourceIndex }));
+    }
     if (all.every((detail) => detail.kind === "out")) {
         const limit = block.tone === "pending" ? LIVE_OUTPUT_ROWS : OUTPUT_ROWS;
         if (all.length <= limit)
-            return all;
+            return all.map((detail, sourceIndex) => ({ detail, sourceIndex }));
         const hidden = all.length - limit;
         const note = block.tone === "pending"
             ? `… ${all.length} lines so far`
             : `… ${hidden} earlier lines · ctrl+o expand`;
-        return [{ kind: "gap", text: note }, ...all.slice(-limit)];
+        return [
+            { detail: { kind: "gap", text: note } },
+            ...all.slice(-limit).map((detail, index) => ({
+                detail,
+                sourceIndex: all.length - limit + index,
+            })),
+        ];
     }
-    // The compact transcript is an audit of what changed, not a code excerpt.
-    // One shared budget applies to writes and edits. Keep both ends so a large
-    // replacement cannot show only deletions while hiding all new content.
-    // Context, omitted changes, and gap rows remain in semantic state for the
-    // explicit full view.
-    const changed = all.filter((detail) => detail.kind === "add" || detail.kind === "del");
+    // A compact transcript audits what changed rather than repeating unchanged
+    // source. One budget covers writes and edits, with both ends retained.
+    const changed = all
+        .map((detail, sourceIndex) => ({ detail, sourceIndex }))
+        .filter(({ detail }) => detail.kind === "add" || detail.kind === "del");
     if (changed.length <= DIFF_ROWS)
         return changed;
     const leading = Math.ceil(DIFF_ROWS / 2);
@@ -46,32 +66,50 @@ function visibleDetails(block) {
     return [
         ...changed.slice(0, leading),
         {
-            kind: "gap",
-            text: `… ${hidden} more changed ${hidden === 1 ? "line" : "lines"} · ctrl+o expand`,
+            detail: {
+                kind: "gap",
+                text: `… ${hidden} more changed ${hidden === 1 ? "line" : "lines"} · ctrl+o expand`,
+            },
         },
         ...changed.slice(-trailing),
     ];
 }
-function renderDetail(detail, tone, width, pal) {
-    const lead = { text: " " };
-    const rail = { text: "│ ", fg: pal.rule };
+function renderDetail(detail, tone, width, pal, arrivedAt, now) {
+    const rail = transcriptLead(width, { text: "│", fg: pal.rule });
     if (detail.kind === "out") {
-        const fg = tone === "fail" || failureLine(detail.text) ? pal.ink.removed : pal.ink.muted;
-        return row(width, [lead, rail, { text: detail.text === "" ? " " : detail.text, fg }]);
+        const base = tone === "fail" || failureLine(detail.text) ? pal.ink.removed : pal.ink.muted;
+        return row(width, [
+            ...rail,
+            { text: detail.text === "" ? " " : detail.text, fg: arrivalInk(base, pal, arrivedAt, now) },
+        ]);
     }
     if (detail.kind === "gap") {
-        return row(width, [lead, rail, { text: detail.text, fg: pal.ink.dim, italic: true }]);
+        return row(width, [
+            ...rail,
+            { text: detail.text, fg: arrivalInk(pal.ink.dim, pal, arrivedAt, now), italic: true },
+        ]);
     }
     const number = detail.kind === "add" ? detail.newLine : detail.oldLine;
-    const prefix = `${detail.kind === "add" ? "+" : detail.kind === "del" ? "-" : " "}${String(number ?? "").padStart(3)} `;
-    const fg = detail.kind === "add"
+    const sign = detail.kind === "add" ? "+" : detail.kind === "del" ? "-" : " ";
+    const base = detail.kind === "add"
         ? pal.ink.added
         : detail.kind === "del"
             ? pal.ink.removed
             : pal.ink.dim;
-    return row(width, [lead, rail, { text: prefix, fg }, ...emphasized(detail.text, detail.emphasis, fg)]);
+    const fg = arrivalInk(base, pal, arrivedAt, now);
+    const tint = detail.kind === "add"
+        ? pal.surface.added
+        : detail.kind === "del"
+            ? pal.surface.removed
+            : undefined;
+    return row(width, [
+        ...rail,
+        { text: sign, fg, bold: detail.kind !== "keep" },
+        { text: `${String(number ?? "").padStart(4)} `, fg: pal.ink.dim },
+        ...emphasized(detail.text, detail.emphasis, fg, tint),
+    ]);
 }
-function emphasized(text, emphasis, fg) {
+function emphasized(text, emphasis, fg, bg) {
     if (emphasis === undefined || emphasis.length <= 0)
         return [{ text, fg }];
     const requestedStart = Math.max(0, Math.min(text.length, emphasis.start));
@@ -82,33 +120,92 @@ function emphasized(text, emphasis, fg) {
         return [{ text, fg }];
     return [
         ...(start === 0 ? [] : [{ text: text.slice(0, start), fg }]),
-        { text: text.slice(start, end), fg, inverse: true },
+        { text: text.slice(start, end), fg, bg, bold: true },
         ...(end === text.length ? [] : [{ text: text.slice(end), fg }]),
     ];
 }
-function stateGlyph(block) {
-    if (block.tone === "pending")
-        return "◌";
+function toolName(block, width) {
+    if (width < TOOL_COLUMNS_AT || block.target === "")
+        return block.name;
+    return block.name.padEnd(TOOL_NAME_COLS);
+}
+function stateGlyph(block, context, now) {
+    if (block.tone === "pending") {
+        if (block.startedAt === undefined || block.right !== "running")
+            return "○";
+        if (context.reducedMotion === true)
+            return "○";
+        return SPINNER[Math.floor(now / SPINNER_MS) % SPINNER.length] ?? "○";
+    }
     if (block.tone === "fail")
-        return hasColor() ? "●" : "×";
+        return "×";
     if (block.tone === "deny")
         return "○";
     return hasColor() ? "●" : "✓";
 }
-function liveLabel(block, context) {
-    if (block.tone !== "pending" || block.startedAt === undefined || block.right !== "running") {
-        return block.right;
+function resultSegments(block, pal, context, now) {
+    const status = block.right;
+    const duration = liveDuration(block, now);
+    if (status === "" && duration === "")
+        return [];
+    const ink = statusInk(block, pal, context, now);
+    return [
+        ...(status === "" ? [] : [{ text: status, fg: ink }]),
+        ...(duration === "" ? [] : [{ text: `${status === "" ? "" : " · "}${duration}`, fg: pal.ink.dim }]),
+    ];
+}
+function liveDuration(block, now) {
+    if (block.tone === "pending" && block.startedAt !== undefined && block.right === "running") {
+        return toolDuration(Math.max(0, now - block.startedAt), true);
     }
-    const elapsed = Math.max(0, (context.now ?? Date.now()) - block.startedAt);
-    const seconds = elapsed / 1_000;
-    return `running · ${seconds < 10 ? seconds.toFixed(1) : Math.round(seconds)}s`;
+    return block.durationMs === undefined ? "" : toolDuration(block.durationMs);
 }
-function statusInk(tone, pal) {
-    if (tone === "fail")
+function statusInk(block, pal, context, now) {
+    if (block.tone === "fail")
         return pal.ink.removed;
-    if (tone === "pending" || tone === "deny")
+    if (block.tone === "deny")
         return pal.ink.attention;
-    return pal.ink.added;
+    if (block.tone === "pending") {
+        if (block.startedAt === undefined || context.reducedMotion === true)
+            return pal.ink.attention;
+        return mix(pal.ink.attention, pal.accent, breathe(now));
+    }
+    if (context.reducedMotion === true || context.motion?.settledAt === undefined)
+        return pal.ink.muted;
+    const cooled = easeOut(interval(now, context.motion.settledAt, TOOL_SETTLE_MS));
+    return mix(pal.ink.added, pal.ink.muted, cooled);
+}
+function birthInk(final, initial, context, now) {
+    if (context.reducedMotion === true || context.motion === undefined)
+        return final;
+    return mix(initial, final, easeOut(interval(now, context.motion.bornAt, TOOL_BIRTH_MS)));
+}
+function arrivalInk(base, pal, arrivedAt, now) {
+    if (arrivedAt === undefined)
+        return base;
+    return mix(pal.ink.bright, base, easeOut(interval(now, arrivedAt, TOOL_ROW_ARRIVAL_MS)));
+}
+function movingLeader(width, left, right, pal, context, now) {
+    if (context.reducedMotion === true || context.motion === undefined || right.length === 0)
+        return undefined;
+    const progress = interval(now, context.motion.bornAt, TOOL_LEADER_MAX_MS);
+    if (progress >= 1)
+        return undefined;
+    const fittedRight = fitSegs(right, width);
+    const gap = width - plainLen(left) - plainLen(fittedRight) - 1;
+    if (gap < 9)
+        return undefined;
+    const cells = Array.from({ length: gap }, () => " ");
+    const travelCells = gap - 2;
+    const trail = Math.min(7, travelCells);
+    const travel = travelCells + trail;
+    const head = Math.floor(easeInOut(progress) * travel) - trail;
+    for (let offset = 0; offset < trail; offset++) {
+        const at = head + offset;
+        if (at >= 0 && at < travelCells)
+            cells[at + 1] = "·";
+    }
+    return { text: cells.join(""), fg: pal.rule };
 }
 function failureLine(line) {
     return line.startsWith("✖") || line.startsWith("×") || line.includes("AssertionError") || /\bfailed\b/i.test(line);

package/dist/tui/help.js

@@ -7,7 +7,7 @@ const CONTROLS = [
     { key: "left / right", description: "move cursor or change a value" },
     { key: "ctrl+left / right", description: "move cursor by word" },
     { key: "ctrl+backspace/del", description: "delete a word" },
-    { key: "enter / tab", description: "select or send · complete" },
+    { key: "enter / tab", description: "select, send/steer · complete" },
     { key: "alt+enter", description: "insert a new line" },
     { key: "esc", description: "close UI or interrupt work" },
     { key: "ctrl+c", description: "interrupt work or exit" },

package/dist/tui/motion.js

@@ -0,0 +1,32 @@
+// Small deterministic motion primitives for terminal cells.
+export const TOOL_BIRTH_MS = 300;
+export const TOOL_SETTLE_MS = 700;
+export const TOOL_ROW_ARRIVAL_MS = 420;
+export const TOOL_LEADER_MAX_MS = 1_500;
+export function interval(now, start, duration) {
+    if (start === undefined)
+        return 1;
+    if (duration <= 0)
+        return 1;
+    return Math.max(0, Math.min(1, (now - start) / duration));
+}
+export function easeOut(value) {
+    const rest = 1 - Math.max(0, Math.min(1, value));
+    return 1 - rest * rest * rest;
+}
+export function easeInOut(value) {
+    const at = Math.max(0, Math.min(1, value));
+    return at < 0.5 ? 4 * at * at * at : 1 - Math.pow(-2 * at + 2, 3) / 2;
+}
+export function mix(from, to, amount) {
+    const at = Math.max(0, Math.min(1, amount));
+    return [
+        Math.round(from[0] + (to[0] - from[0]) * at),
+        Math.round(from[1] + (to[1] - from[1]) * at),
+        Math.round(from[2] + (to[2] - from[2]) * at),
+    ];
+}
+/** A restrained pulse that never reaches either endpoint. */
+export function breathe(now, period = 1_400) {
+    return 0.2 + ((Math.sin((now / period) * Math.PI * 2) + 1) / 2) * 0.6;
+}

package/dist/tui/session-view.js

@@ -1,7 +1,7 @@
 // Small projections of the live session used by the shell and footer.
 import { credentialSource } from "../credentials.js";
 import { providerFailure } from "../provider-errors.js";
-export function controllerOptions(session, contextPolicy, tools = session.tools) {
+export function controllerOptions(session, contextPolicy, tools = session.tools, steering) {
     return {
         provider: session.provider,
         tools,
@@ -10,8 +10,9 @@ export function controllerOptions(session, contextPolicy, tools = session.tools)
         maxTokens: session.config.maxTokens,
         contextPolicy,
         effort: session.config.effort,
-        maxSteps: session.config.maxSteps,
+        maxModelRequests: session.config.maxModelRequests,
         toolContext: { root: session.config.root },
+        ...(steering === undefined ? {} : { steering }),
     };
 }
 export function footerInfo(session, workspace = session.config.root) {

package/dist/tui/transcript-grammar.js

@@ -0,0 +1,25 @@
+// One semantic margin shared by every transcript block.
+const FULL_GUTTER = 4;
+const COMPACT_GUTTER = 2;
+const COMPACT_BELOW = 64;
+export function transcriptGutter(width) {
+    return width < COMPACT_BELOW ? COMPACT_GUTTER : FULL_GUTTER;
+}
+export function transcriptWidth(width) {
+    return Math.max(8, width - transcriptGutter(width));
+}
+/** Put one semantic mark in the transcript margin, or reserve the same cells. */
+export function transcriptLead(width, mark) {
+    if (mark === undefined)
+        return [{ text: " ".repeat(transcriptGutter(width)) }];
+    return [
+        ...transcriptMark(width, mark),
+        { text: " ".repeat(width < COMPACT_BELOW ? 1 : 2) },
+    ];
+}
+/** Draw only the gutter mark, without trailing content-column whitespace. */
+export function transcriptMark(width, mark) {
+    if (width < COMPACT_BELOW)
+        return [{ ...mark }];
+    return [{ text: " " }, { ...mark }];
+}

package/dist/tui/transcript-view.js

@@ -1,5 +1,6 @@
 // Incremental transcript layout for long-running sessions.
 import { render } from "./blocks.js";
+import { TOOL_BIRTH_MS, TOOL_LEADER_MAX_MS, TOOL_ROW_ARRIVAL_MS, TOOL_SETTLE_MS, } from "./motion.js";
 const MAX_LAYOUTS = 2;
 const REFLOW_BLOCKS_PER_FRAME = 128;
 /**
@@ -10,11 +11,20 @@ const REFLOW_BLOCKS_PER_FRAME = 128;
  * are refreshed over later frames. This keeps resize responsive without a
  * worker, hidden loop, or unbounded multi-width cache.
  */
-export function transcriptRenderer(draw = render) {
+export function transcriptRenderer(draw = render, clock = Date.now) {
     let layouts = [];
+    const motions = new WeakMap();
+    const activeMotion = new Set();
     return {
         viewport(blocks, width, height, scroll, palette, state = {}) {
             const layout = layoutFor(blocks, width, palette);
+            const now = state.now ?? clock();
+            if (state.reducedMotion === true) {
+                discardSuppressedMotion(layout);
+            }
+            else if (scroll === 0) {
+                invalidateMovingEntries(layout, now);
+            }
             // Reflowing rows below a scroll-locked viewport would move the content
             // being read as estimates become exact. Visible rows still resolve on
             // demand; background work resumes when the user follows the tail again.
@@ -25,6 +35,7 @@ export function transcriptRenderer(draw = render) {
                 rows: visibleRows(layout, window, Math.max(0, height)),
                 maxScroll: window.maxScroll,
                 pending: scroll === 0 && layout.pending > 0,
+                animating: scroll === 0 && state.reducedMotion !== true && hasMovingEntry(layout, now),
             };
         },
         invalidate(block) {
@@ -32,16 +43,12 @@ export function transcriptRenderer(draw = render) {
                 layouts = [];
                 return;
             }
+            observeMotion(block, clock());
             for (const layout of layouts) {
                 const index = layout.positions.get(block);
                 if (index === undefined)
                     continue;
-                const entry = layout.entries[index];
-                if (entry?.rows !== undefined) {
-                    entry.rows = undefined;
-                    layout.pending++;
-                }
-                layout.next = Math.max(layout.next, index);
+                dirty(layout, index);
             }
         },
     };
@@ -131,6 +138,7 @@ export function transcriptRenderer(draw = render) {
         entry.rows = draw(entry.block, layout.width, layout.palette, {
             ...state,
             previous: layout.entries[index - 1]?.block,
+            motion: motions.get(entry.block),
         });
         entry.rowCount = entry.rows.length;
         layout.pending--;
@@ -172,6 +180,123 @@ export function transcriptRenderer(draw = render) {
             rows.unshift("");
         return rows;
     }
+    function dirty(layout, index) {
+        const entry = layout.entries[index];
+        if (entry?.rows !== undefined) {
+            entry.rows = undefined;
+            layout.pending++;
+        }
+        layout.next = Math.max(layout.next, index);
+    }
+    function observeMotion(block, now) {
+        if (block.kind !== "tool")
+            return;
+        let motion = motions.get(block);
+        // A settled historical block may be invalidated by Ctrl+O. It should not
+        // replay its original arrival animation after resume.
+        if (motion === undefined) {
+            if (block.tone !== "pending")
+                return;
+            motion = {
+                bornAt: now,
+                rowsAt: (block.body ?? []).map(() => now),
+                rowKeys: (block.body ?? []).map(detailKey),
+                tone: block.tone,
+            };
+            motions.set(block, motion);
+            activeMotion.add(block);
+            return;
+        }
+        if (motion.tone === "pending" && block.tone !== "pending")
+            motion.settledAt = now;
+        motion.tone = block.tone;
+        reconcileRows(motion, block.body ?? [], now);
+        activeMotion.add(block);
+    }
+    function invalidateMovingEntries(layout, now) {
+        for (const block of activeMotion) {
+            const index = layout.positions.get(block);
+            if (index === undefined) {
+                activeMotion.delete(block);
+                continue;
+            }
+            const motion = motions.get(block);
+            if (motion === undefined || !moving(block, motion, now)) {
+                // Paint the resting state once before leaving the motion registry;
+                // otherwise the cache could retain the final in-between frame.
+                dirty(layout, index);
+                activeMotion.delete(block);
+                continue;
+            }
+            dirty(layout, index);
+        }
+    }
+    function hasMovingEntry(layout, now) {
+        for (const block of activeMotion) {
+            if (layout.positions.get(block) === undefined)
+                continue;
+            const motion = motions.get(block);
+            if (motion !== undefined && moving(block, motion, now))
+                return true;
+        }
+        return false;
+    }
+    function discardSuppressedMotion(layout) {
+        for (const block of activeMotion) {
+            if (layout.positions.get(block) !== undefined && block.kind === "tool" && block.tone === "pending") {
+                continue;
+            }
+            activeMotion.delete(block);
+            motions.delete(block);
+        }
+    }
+}
+function reconcileRows(motion, details, now) {
+    const available = new Map();
+    for (let index = 0; index < motion.rowKeys.length; index++) {
+        const key = motion.rowKeys[index];
+        if (key === undefined)
+            continue;
+        const bucket = available.get(key) ?? { values: [], next: 0 };
+        bucket.values.push(motion.rowsAt[index] ?? motion.bornAt);
+        available.set(key, bucket);
+    }
+    const rowKeys = details.map(detailKey);
+    const rowsAt = rowKeys.map((key) => {
+        const bucket = available.get(key);
+        if (bucket === undefined || bucket.next >= bucket.values.length)
+            return now;
+        const value = bucket.values[bucket.next] ?? now;
+        bucket.next++;
+        return value;
+    });
+    motion.rowKeys = rowKeys;
+    motion.rowsAt = rowsAt;
+}
+function detailKey(detail) {
+    if (detail.kind === "out" || detail.kind === "gap") {
+        return JSON.stringify([detail.kind, detail.text]);
+    }
+    return JSON.stringify([
+        detail.kind,
+        detail.oldLine ?? "",
+        detail.newLine ?? "",
+        detail.emphasis?.start ?? "",
+        detail.emphasis?.length ?? "",
+        detail.text,
+    ]);
+}
+function moving(block, motion, now) {
+    if (block.kind === "tool" && block.tone === "pending" &&
+        block.startedAt !== undefined && block.right === "running")
+        return true;
+    let until = motion.bornAt + Math.max(TOOL_BIRTH_MS, TOOL_LEADER_MAX_MS);
+    if (motion.settledAt !== undefined)
+        until = Math.max(until, motion.settledAt + TOOL_SETTLE_MS);
+    for (const arrivedAt of motion.rowsAt) {
+        until = Math.max(until, arrivedAt + TOOL_ROW_ARRIVAL_MS);
+    }
+    return now < until;
 }
 function compatible(layout, blocks) {
     return layout.source === blocks &&