@kamilio/wire 0.1.9 → 0.1.11

package/node_modules/toolcraft/node_modules/toolcraft-design/dist/dashboard/components/run-view.js

@@ -0,0 +1,283 @@
+import { getTheme } from "../../internal/theme-detect.js";
+import { plainTerminalText } from "../ansi.js";
+import { layoutComposer } from "../composer-layout.js";
+import { displayWidth, truncateToWidth } from "../terminal-width.js";
+import { renderOutputPane } from "./output-pane.js";
+import { formatElapsed, formatNumber } from "./stats-pane.js";
+export function renderRunView(buffer, options) {
+    const { stats } = options;
+    const composer = options.showQueue && !options.composer?.focused ? undefined : options.composer;
+    const run = stats.run;
+    const theme = getTheme().styles;
+    const compactHeight = buffer.height < 20;
+    const tight = buffer.height < 12 || buffer.width < 40;
+    const width = Math.max(0, Math.min(164, buffer.width - 4));
+    const x = Math.max(0, Math.floor((buffer.width - width) / 2));
+    const sidebarWidth = !compactHeight && !options.showQueue && width >= 106 ? Math.min(40, Math.floor(width * 0.29)) : 0;
+    const transcriptWidth = Math.max(0, width - (sidebarWidth > 0 ? sidebarWidth + 3 : 0));
+    const queue = run?.queue ?? [];
+    const plans = queue.filter((item) => item.kind === "plan");
+    const activePlanIndex = Math.max(0, plans.findIndex((item) => item.id === run?.activePlanId));
+    const activePlan = plans[activePlanIndex];
+    const nextPlan = plans[activePlanIndex + 1];
+    const progress = plans.length > 0 ? ` · Plan ${activePlanIndex + 1}/${plans.length}` : "";
+    put(buffer, { x, y: 0, width, height: 1 }, 0, `${options.title}${progress}`, { bold: true });
+    const context = [run?.agent, run?.model ?? (run?.agent ? "default model" : undefined), run?.cwd].filter(Boolean).join(" · ");
+    const draft = composer ? layoutComposer(composer, Math.max(1, transcriptWidth - 3)) : undefined;
+    const inputLines = draft ? Math.min(compactHeight ? 1 : 3, draft.lines.length) : 0;
+    const inputRow = compactHeight ? 1 : 2;
+    const composerHeight = composer ? inputLines + inputRow + (!compactHeight || composer.error || options.feedback ? 1 : 0) : 0;
+    const hint = tight ? composer?.focused ? "Enter Queue  Esc Browse" : "i Message  v Tasks  q Quit"
+        : composer?.focused
+            ? composer.kind === "plan" ? "Enter Queue plan  Ctrl+P Message  Esc Browse"
+                : "Enter Queue  Alt+Enter Newline  Ctrl+P Plan  Alt+↑↓ Target  Esc Browse"
+            : options.showQueue ? "↑↓ Scroll  PgUp/PgDn Page  Home/End Jump  f Current  v Activity  i Message  q Quit"
+                : options.hints ? options.hints.map((hint) => `${hint.key} ${hint.label}`).join("  ")
+                    : width < 100 ? "i Message  p Plan  v Tasks  d Details  ↑↓ Scroll  f Follow  q Quit"
+                        : "i Message  p Add plan  v Tasks & plans  d Details  ↑↓ Scroll  f Follow  q Quit";
+    const footerLines = [""];
+    for (const part of plainTerminalText(hint).split("  ")) {
+        const previous = footerLines.at(-1);
+        if (previous && displayWidth(`${previous}  ${part}`) > width)
+            footerLines.push(part);
+        else
+            footerLines[footerLines.length - 1] = previous ? `${previous}  ${part}` : part;
+    }
+    const footerY = Math.max(0, buffer.height - footerLines.length);
+    const composerY = Math.max(0, footerY - composerHeight);
+    const contentBottom = composer ? composerY - 1 : footerY - 1;
+    const showContext = !tight && (!compactHeight || contentBottom >= 6);
+    if (showContext)
+        put(buffer, { x, y: 1, width, height: 1 }, 0, context, theme.muted);
+    let outputY = compactHeight ? showContext ? 2 : 1 : 3;
+    if (sidebarWidth === 0) {
+        if (activePlan?.kind === "plan" && !tight) {
+            put(buffer, { x, y: outputY++, width, height: 1 }, 0, `${marker(activePlan.status)} ${activePlanIndex + 1}. ${basename(activePlan.path)}`, { bold: true });
+        }
+        if (nextPlan?.kind === "plan" && !options.showQueue && !compactHeight) {
+            put(buffer, { x, y: outputY++, width, height: 1 }, 0, `○ ${activePlanIndex + 2}. ${basename(nextPlan.path)} · next`, theme.muted);
+        }
+    }
+    const tasks = run?.tasks ?? [];
+    const completed = tasks.filter((task) => task.status === "completed").length;
+    const taskCount = tasks.length > 0 ? `${completed}/${tasks.length} tasks` : `${stats.iterationsLabel ?? "Iterations"} ${stats.iterations}`;
+    const step = run?.activeStep ? truncateToWidth(plainTerminalText(run.activeStep), Math.max(0, Math.min(Math.max(8, Math.floor(transcriptWidth / 4)), transcriptWidth - displayWidth(taskCount) - 12))) : undefined;
+    const progressLabel = [step, taskCount].filter(Boolean).join(" · ");
+    let phaseLabel = run?.phase ?? stats.currentAction ?? stats.status;
+    if (phaseLabel === "Follow-up") {
+        const messages = queue.filter((item) => item.kind === "message" && item.afterPlanId === run?.activePlanId);
+        const active = messages.findIndex((item) => item.status === "running");
+        if (active >= 0)
+            phaseLabel += ` ${active + 1}/${messages.length}`;
+    }
+    const phase = truncateToWidth(plainTerminalText(phaseLabel), Math.max(0, transcriptWidth - displayWidth(progressLabel) - 7));
+    const statusMarker = { running: "●", error: "!", paused: "Ⅱ", idle: "○", done: "✓" }[stats.status];
+    put(buffer, { x, y: outputY++, width: transcriptWidth, height: 1 }, 0, `${statusMarker} ${phase} · ${progressLabel}${run?.activity ? ` · ${run.activity}` : ""}`, stats.status === "error" ? theme.error : { bold: true });
+    if (!compactHeight)
+        outputY++;
+    const outputRect = { x, y: outputY, width: transcriptWidth, height: Math.max(0, contentBottom - outputY) };
+    let scrollOffset = options.scrollOffset;
+    let workOffset = options.workOffset ?? 0;
+    if (options.showQueue) {
+        workOffset = renderWorkList(buffer, outputRect, stats, options.workOffset);
+    }
+    else {
+        scrollOffset = renderOutputPane(buffer, outputRect, options.output, options.scrollOffset, {
+            conversation: true, details: options.showDetails, now: stats.status === "running" ? options.now : undefined
+        });
+    }
+    if (sidebarWidth > 0) {
+        const sidebarX = x + transcriptWidth + 3;
+        const sidebarHeight = Math.max(0, contentBottom - 3);
+        for (let row = 3; row < contentBottom; row++)
+            buffer.put(sidebarX - 2, row, "│", theme.muted);
+        renderWorkPanel(buffer, { x: sidebarX, y: 3, width: sidebarWidth, height: sidebarHeight }, stats);
+    }
+    const usage = stats.usageAvailable === false || (stats.usageAvailable === undefined && stats.tokensIn + stats.tokensOut === 0)
+        ? "Usage unavailable" : `${formatNumber(stats.tokensIn + stats.tokensOut)} tokens`;
+    const pendingMessages = queue.filter((item) => item.kind === "message" && item.status === "pending").length;
+    const metrics = `${formatElapsed(stats.elapsedMs)} · ${usage}${pendingMessages ? ` · ${pendingMessages} message${pendingMessages === 1 ? "" : "s"} queued` : ""}${scrollOffset > 0 && !options.showQueue ? " · History paused" : ""}`;
+    put(buffer, { x, y: contentBottom, width: transcriptWidth, height: 1 }, 0, metrics, theme.muted);
+    let cursor;
+    if (composer && draft) {
+        const rect = { x, y: composerY, width: transcriptWidth, height: composerHeight };
+        const target = plans.find((plan) => plan.id === composer.afterPlanId) ?? activePlan;
+        const label = composer.kind === "plan" ? "ADD PLAN · joins the end of the queue"
+            : `AFTER ${target?.kind === "plan" ? basename(target.path) : "CURRENT PLAN"}`;
+        if (!compactHeight)
+            put(buffer, rect, 0, "─".repeat(transcriptWidth), theme.muted);
+        put(buffer, rect, inputRow - 1, options.submitting ? "Adding to queue…" : label, theme.muted);
+        const start = Math.max(0, Math.min(draft.cursor.y - inputLines + 1, draft.lines.length - inputLines));
+        for (let index = 0; index < inputLines; index++) {
+            const text = composer.text.length === 0
+                ? composer.kind === "plan" ? "docs/plans/next-plan.md" : "Queue a message for this plan…"
+                : draft.lines[start + index] ?? "";
+            put(buffer, rect, index + inputRow, `${index === 0 ? "›" : " "}  ${text}`, composer.text.length === 0 ? theme.muted : {});
+        }
+        if (composer.error)
+            put(buffer, rect, composerHeight - 1, composer.error, theme.error);
+        else if (options.feedback)
+            put(buffer, rect, composerHeight - 1, options.feedback, theme.success);
+        if (composer.focused && !options.submitting)
+            cursor = {
+                x: Math.min(buffer.width - 1, x + 3 + draft.cursor.x),
+                y: Math.max(0, Math.min(footerY - 1, composerY + inputRow + draft.cursor.y - start))
+            };
+    }
+    for (const [index, line] of footerLines.entries()) {
+        put(buffer, { x, y: footerY + index, width, height: 1 }, 0, line, theme.muted);
+    }
+    return { scrollOffset, workOffset, outputRect, ...(cursor ? { cursor } : {}) };
+}
+function renderWorkList(buffer, rect, stats, requestedOffset) {
+    const theme = getTheme().styles;
+    const queue = stats.run?.queue ?? [];
+    const tasks = stats.run?.tasks ?? [];
+    const activeMessage = queue.findIndex((item) => item.kind === "message" && item.status === "running");
+    let currentLine = 1 + (activeMessage >= 0 ? activeMessage : queue.findIndex((item) => item.id === stats.run?.activePlanId));
+    let totalLines = queue.length + 3;
+    let completed = 0;
+    for (const task of tasks) {
+        if (task.status === "completed")
+            completed++;
+        if (requestedOffset === undefined && activeMessage < 0 && task.id === stats.run?.activeTaskId) {
+            const step = task.steps?.findIndex((step) => step.name === stats.run?.activeStep) ?? -1;
+            currentLine = totalLines + (step >= 0 ? step + 1 : 0);
+        }
+        totalLines += 1 + (task.steps?.length ?? 0);
+    }
+    const capacity = Math.max(0, rect.height - 2);
+    const offset = Math.max(0, Math.min(requestedOffset ?? Math.max(0, currentLine - 1), totalLines - capacity));
+    const end = offset + capacity;
+    let parent;
+    function paint(line, text, style) {
+        if (line >= offset && line < end)
+            put(buffer, rect, line - offset + 1, text, style);
+    }
+    paint(0, `PLANS · ${queue.filter((item) => item.kind === "plan").length}`, { bold: true });
+    let planNumber = 0;
+    let parentPlan;
+    for (let index = 0; index < Math.min(queue.length, end - 1); index++) {
+        const item = queue[index];
+        if (item.kind === "plan") {
+            planNumber++;
+            parentPlan = item.path;
+        }
+        if (index + 1 < offset)
+            continue;
+        const text = item.kind === "plan" ? `${planNumber}. ${displayPlanPath(item.path, stats.run?.cwd)}` : `  └ ${item.text}`;
+        paint(index + 1, `${marker(item.status)} ${text}`, tone(item.status));
+        if (index + 1 === offset && item.kind === "message" && parentPlan)
+            parent = `After ${displayPlanPath(parentPlan, stats.run?.cwd)}`;
+    }
+    paint(queue.length + 2, `TASKS · ${completed}/${tasks.length}`, { bold: true });
+    let line = queue.length + 3;
+    for (const [index, task] of tasks.entries()) {
+        if (line >= end)
+            break;
+        const next = line + 1 + (task.steps?.length ?? 0);
+        if (next <= offset) {
+            line = next;
+            continue;
+        }
+        const title = `${index + 1}. ${task.title}`;
+        const active = task.id === stats.run?.activeTaskId && stats.status === "running";
+        const status = active ? "running" : task.status;
+        paint(line, `${marker(status)} ${title}`, tone(status));
+        for (let stepIndex = Math.max(0, offset - line - 1); stepIndex < (task.steps?.length ?? 0) && line + stepIndex + 1 < end; stepIndex++) {
+            const step = task.steps[stepIndex];
+            const name = step.name;
+            const status = active && name === stats.run?.activeStep ? "running" : step.status;
+            paint(line + stepIndex + 1, `    ${marker(status)} ${name}`, tone(status));
+            if (line + stepIndex + 1 === offset)
+                parent = title;
+        }
+        line = next;
+    }
+    if (offset > 0)
+        put(buffer, rect, 0, `↑ earlier · ${parent ?? "tasks and plans"}`, theme.muted);
+    if (end < totalLines)
+        put(buffer, rect, rect.height - 1, "↓ more tasks and plans", theme.muted);
+    return offset;
+}
+function renderWorkPanel(buffer, rect, stats) {
+    const theme = getTheme().styles;
+    const queue = stats.run?.queue ?? [];
+    const tasks = stats.run?.tasks ?? [];
+    const plans = queue.filter((item) => item.kind === "plan");
+    const planIndex = Math.max(0, plans.findIndex((item) => item.id === stats.run?.activePlanId));
+    let row = 0;
+    put(buffer, rect, row++, `PLANS · ${plans.length > 0 ? planIndex + 1 : 0}/${plans.length}`, { bold: true });
+    const planRows = Math.min(Math.max(3, Math.floor(rect.height * .4)), Math.max(0, rect.height - 4));
+    const runningIndex = queue.findIndex((item) => item.status === "running");
+    const activeIndex = Math.max(0, runningIndex >= 0 ? runningIndex : queue.findIndex((item) => item.id === stats.run?.activePlanId));
+    const queueStart = Math.max(0, Math.min(activeIndex, queue.length - Math.max(1, planRows - 2)));
+    if (queueStart > 0) {
+        const first = queue[queueStart];
+        const parent = first?.kind === "message" ? plans.find((plan) => plan.id === first.afterPlanId) : undefined;
+        put(buffer, rect, row++, parent ? `↑ After ${basename(parent.path)}` : `↑ ${queueStart} earlier`, theme.muted);
+    }
+    let queueIndex = queueStart;
+    for (; queueIndex < queue.length && row < planRows; queueIndex++) {
+        const item = queue[queueIndex];
+        const number = item.kind === "plan" ? plans.findIndex((plan) => plan.id === item.id) + 1 : undefined;
+        const text = item.kind === "plan" ? `${number}. ${basename(item.path)}` : `  └ ${item.text}`;
+        put(buffer, rect, row++, `${marker(item.status)} ${text}`, tone(item.status));
+    }
+    if (queueIndex < queue.length)
+        put(buffer, rect, row++, "  ↓ more queued work", theme.muted);
+    row++;
+    if (tasks.length === 0) {
+        put(buffer, rect, row++, "TASKS", { bold: true });
+        put(buffer, rect, row, "Waiting for plan details…", theme.muted);
+        return;
+    }
+    const done = tasks.filter((task) => task.status === "completed").length;
+    put(buffer, rect, row++, `TASKS · ${done}/${tasks.length}`, { bold: true });
+    const active = tasks.findIndex((task) => task.id === stats.run?.activeTaskId);
+    const pending = tasks.findIndex((task) => task.status !== "completed");
+    const focus = active >= 0 ? active : Math.max(0, pending);
+    const capacity = Math.max(1, rect.height - row - 1);
+    const start = Math.max(0, Math.min(focus - 1, tasks.length - capacity));
+    if (start > 0)
+        put(buffer, rect, row++, `  ↑ ${start} earlier tasks`, theme.muted);
+    for (let index = start; index < tasks.length && row < rect.height; index++) {
+        if (row === rect.height - 1 && index < tasks.length - 1) {
+            put(buffer, rect, row, "  ↓ more tasks · v View all", theme.muted);
+            break;
+        }
+        const task = tasks[index];
+        const isActive = task.id === stats.run?.activeTaskId;
+        const status = isActive && stats.status === "running" ? "running" : task.status;
+        put(buffer, rect, row++, `${marker(status)} ${index + 1}. ${task.title}`, tone(status));
+        if (isActive && task.steps && row < rect.height - (index < tasks.length - 1 ? 1 : 0)) {
+            const steps = task.steps.map((step) => `${step.name === stats.run?.activeStep ? "›" : marker(step.status)} ${step.name}`).join("  ");
+            put(buffer, rect, row++, `  ${steps}`, theme.muted);
+        }
+    }
+}
+function marker(status) {
+    return ({ completed: "✓", running: "›", failed: "!", cancelled: "×", paused: "Ⅱ", pending: "○" })[status];
+}
+function tone(status) {
+    const theme = getTheme().styles;
+    if (status === "running")
+        return { ...theme.info, bold: true };
+    if (status === "failed")
+        return theme.error;
+    return theme.muted;
+}
+function basename(value) {
+    return value.split("/").at(-1) ?? value;
+}
+function displayPlanPath(value, cwd) {
+    if (!cwd)
+        return value;
+    const prefix = cwd.endsWith("/") ? cwd : `${cwd}/`;
+    return value.startsWith(prefix) ? value.slice(prefix.length) : value;
+}
+function put(buffer, rect, row, text, style) {
+    if (row < 0 || row >= rect.height || rect.y + row >= buffer.height)
+        return;
+    buffer.putInRect(rect, row, truncateToWidth(plainTerminalText(text), rect.width), style);
+}

package/node_modules/toolcraft/node_modules/toolcraft-design/dist/dashboard/components/stats-pane.d.ts

@@ -1,7 +1,8 @@
 import { ScreenBuffer } from "../buffer.js";
 import type { DashboardStats, Rect } from "../types.js";
-import type { VisualLine } from "./output-pane.js";
+import { type VisualLine } from "./output-pane.js";
+export { formatElapsed } from "../elapsed.js";
+export declare function renderCompactStatsPane(buffer: ScreenBuffer, rect: Rect, stats: DashboardStats): void;
 export declare function renderStatsPane(buffer: ScreenBuffer, rect: Rect, stats: DashboardStats): void;
-export declare function formatElapsed(ms: number): string;
 export declare function formatNumber(n: number): string;
 export declare function statsToLines(stats: DashboardStats, width: number): VisualLine[];

package/node_modules/toolcraft/node_modules/toolcraft-design/dist/dashboard/components/stats-pane.js

@@ -1,10 +1,50 @@
 import { getTheme } from "../../internal/theme-detect.js";
+import { plainTerminalText } from "../ansi.js";
+import { displayWidth, graphemes, graphemeWidth, truncateToWidth } from "../terminal-width.js";
+import { computeVisualLines } from "./output-pane.js";
+import { formatElapsed } from "../elapsed.js";
+export { formatElapsed } from "../elapsed.js";
+export function renderCompactStatsPane(buffer, rect, stats) {
+    buffer.clearRect(rect);
+    if (rect.width <= 0 || rect.height <= 0)
+        return;
+    const status = formatStatus(stats.status);
+    const progress = `${stats.iterationsLabel ?? "Iteration"} ${formatNumber(stats.iterations)}${stats.iterationsTotal === undefined ? "" : `/${formatNumber(stats.iterationsTotal)}`}`;
+    const primary = stats.iterationsTotal === undefined ? `${status} · ${progress}` : `${progress} · ${status}`;
+    const metrics = `${primary} · ${formatElapsed(stats.elapsedMs)} · ${formatNumber(stats.tokensIn + stats.tokensOut)} tokens`;
+    const firstLine = rect.height === 1 && stats.iterationsTotal === undefined && stats.currentAction ? `${status} · ${stats.currentAction}` : metrics;
+    const messages = [firstLine, stats.currentAction ?? ""].map(plainTerminalText);
+    buffer.putInRect(rect, 0, truncateToWidth(messages[0], rect.width), getStatusStyle(stats.status));
+    if (rect.height > 1 && stats.currentAction !== undefined) {
+        buffer.putInRect(rect, 1, truncateToWidth(messages[1], rect.width), getToneStyle("muted"));
+    }
+}
 export function renderStatsPane(buffer, rect, stats) {
     buffer.clearRect(rect);
     if (rect.width <= 0 || rect.height <= 0) {
         return;
     }
-    const lines = statsToLines(stats, rect.width);
+    let lines = statsToLines(stats, rect.width);
+    if (lines.length > rect.height) {
+        const actions = stats.currentAction === undefined ? [] : lines.slice(9);
+        const progressLines = stats.iterationsTotal === undefined ? [] : [lines[1]];
+        const visibleActions = actions.slice(0, Math.max(0, rect.height - 1 - progressLines.length));
+        if (visibleActions.length > 0 && visibleActions.length < actions.length) {
+            const last = visibleActions[visibleActions.length - 1];
+            visibleActions[visibleActions.length - 1] = {
+                ...last,
+                text: truncateToWidth(`${last.text}…`, Math.max(0, rect.width - displayWidth(last.prefix)))
+            };
+        }
+        lines = [
+            stats.iterationsTotal !== undefined && rect.height === 1
+                ? createKeyValueLine(formatStatus(stats.status), `${stats.iterations}/${stats.iterationsTotal}`, rect.width, getStatusStyle(stats.status))
+                : lines[0],
+            ...progressLines,
+            ...visibleActions,
+            ...lines.slice(stats.iterationsTotal === undefined ? 1 : 2, 7).filter((line) => line.prefix.length > 0 || line.text.length > 0)
+        ];
+    }
     for (let row = 0; row < rect.height; row += 1) {
         const line = lines[row];
         if (line === undefined) {
@@ -16,18 +56,10 @@ export function renderStatsPane(buffer, rect, stats) {
         if (line.text.length === 0) {
             continue;
         }
-        const textStart = Math.min(line.prefix.length, rect.width);
+        const textStart = Math.min(displayWidth(line.prefix), rect.width);
         buffer.putInRect({ x: rect.x + textStart, y: rect.y + row, width: rect.width - textStart, height: 1 }, 0, line.text, line.style);
     }
 }
-export function formatElapsed(ms) {
-    const safeMs = Number.isFinite(ms) ? ms : 0;
-    const totalSeconds = Math.max(0, Math.floor(safeMs / 1_000));
-    const hours = Math.floor(totalSeconds / 3_600);
-    const minutes = Math.floor((totalSeconds % 3_600) / 60);
-    const seconds = totalSeconds % 60;
-    return [hours, minutes, seconds].map((value) => value.toString().padStart(2, "0")).join(":");
-}
 export function formatNumber(n) {
     return new Intl.NumberFormat("en-US").format(n);
 }
@@ -37,10 +69,10 @@ export function statsToLines(stats, width) {
     }
     const mutedStyle = getToneStyle("muted");
     const totalTokens = stats.tokensIn + stats.tokensOut;
-    const iterationsLabel = stats.iterationsLabel ?? "Iteration";
+    const iterationsLabel = plainTerminalText(stats.iterationsLabel ?? "Iteration");
     const lines = [
         createKeyValueLine("Status", formatStatus(stats.status), width, getStatusStyle(stats.status)),
-        createKeyValueLine(iterationsLabel, formatNumber(stats.iterations), width),
+        createKeyValueLine(iterationsLabel, formatNumber(stats.iterations) + (stats.iterationsTotal === undefined ? "" : `/${formatNumber(stats.iterationsTotal)}`), width),
         createKeyValueLine("Elapsed", formatElapsed(stats.elapsedMs), width),
         createBlankLine(),
         createKeyValueLine("Tokens In", formatNumber(stats.tokensIn), width),
@@ -53,12 +85,12 @@ export function statsToLines(stats, width) {
             prefixStyle: {},
             style: {},
             text: ""
-        }, {
-            prefix: width > 0 ? clipText("  ", width) : "",
+        }, ...computeVisualLines([{ kind: "status", text: stats.currentAction, ts: 0 }], width + 1).map((line) => ({
+            prefix: clipText("  ", width),
             prefixStyle: mutedStyle,
             style: mutedStyle,
-            text: clipText(stats.currentAction, Math.max(width - 2, 0))
-        });
+            text: line.text
+        })));
     }
     return lines;
 }
@@ -72,17 +104,26 @@ function createBlankLine() {
 }
 function createKeyValueLine(label, value, width, valueStyle = {}) {
     const clippedValue = clipText(value, width);
-    const availableBeforeValue = Math.max(width - clippedValue.length, 0);
+    const availableBeforeValue = Math.max(width - displayWidth(clippedValue), 0);
     const clippedLabel = clipText(label, Math.max(availableBeforeValue - 1, 0));
     return {
-        prefix: clippedLabel + " ".repeat(Math.max(availableBeforeValue - clippedLabel.length, 0)),
+        prefix: clippedLabel + " ".repeat(Math.max(availableBeforeValue - displayWidth(clippedLabel), 0)),
         prefixStyle: {},
         style: valueStyle,
         text: clippedValue
     };
 }
 function clipText(value, width) {
-    return width <= 0 ? "" : value.slice(0, width);
+    let result = "";
+    let cells = 0;
+    for (const grapheme of graphemes(value)) {
+        const size = graphemeWidth(grapheme);
+        if (cells + size > width)
+            break;
+        result += grapheme;
+        cells += size;
+    }
+    return result;
 }
 function formatStatus(status) {
     return `${status.slice(0, 1).toUpperCase()}${status.slice(1)}`;

package/node_modules/toolcraft/node_modules/toolcraft-design/dist/dashboard/composer-layout.d.ts

@@ -0,0 +1,12 @@
+import type { ComposerState } from "./composer.js";
+type ComposerLayout = {
+    lines: string[];
+    starts: number[];
+    cursor: {
+        x: number;
+        y: number;
+    };
+};
+/** Shared display rows keep input navigation aligned with the rendered caret. */
+export declare function layoutComposer(state: ComposerState, width: number): ComposerLayout;
+export {};

package/node_modules/toolcraft/node_modules/toolcraft-design/dist/dashboard/composer-layout.js

@@ -0,0 +1,45 @@
+import { graphemes, graphemeWidth } from "./terminal-width.js";
+const layouts = new WeakMap();
+/** Shared display rows keep input navigation aligned with the rendered caret. */
+export function layoutComposer(state, width) {
+    width = Math.max(1, width);
+    const cached = layouts.get(state);
+    if (cached?.text === state.text && cached.cursor === state.cursor && cached.width === width)
+        return cached.layout;
+    const lines = [""];
+    const starts = [0];
+    let column = 0;
+    let offset = 0;
+    let cursor = { x: 0, y: 0 };
+    for (const segment of graphemes(state.text)) {
+        const cells = segment === "\t" ? 2 : graphemeWidth(segment);
+        if (segment !== "\n" && column + cells > width) {
+            lines.push("");
+            starts.push(offset);
+            column = 0;
+        }
+        if (offset === state.cursor)
+            cursor = { x: column, y: lines.length - 1 };
+        if (segment === "\n") {
+            lines.push("");
+            starts.push(offset + 1);
+            column = 0;
+        }
+        else {
+            lines[lines.length - 1] += segment === "\t" ? "  " : segment;
+            column += cells;
+        }
+        offset += segment.length;
+    }
+    if (offset === state.cursor) {
+        if (column >= width) {
+            lines.push("");
+            starts.push(offset);
+            column = 0;
+        }
+        cursor = { x: column, y: lines.length - 1 };
+    }
+    const layout = { lines, starts, cursor };
+    layouts.set(state, { text: state.text, cursor: state.cursor, width, layout });
+    return layout;
+}

package/node_modules/toolcraft/node_modules/toolcraft-design/dist/dashboard/composer.d.ts

@@ -0,0 +1,24 @@
+import type { KeypressEvent } from "./terminal.js";
+export type DashboardSubmission = {
+    kind: "message" | "plan";
+    text: string;
+    afterPlanId?: string;
+};
+export type ComposerState = {
+    kind: DashboardSubmission["kind"];
+    text: string;
+    /** UTF-16 offset at a grapheme boundary. */
+    cursor: number;
+    focused: boolean;
+    afterPlanId?: string;
+    error?: string;
+    /** Preserve the intended display column across shorter rows during vertical movement. */
+    preferredColumn?: number;
+    preferredWidth?: number;
+};
+export declare function createComposerState(kind: DashboardSubmission["kind"], afterPlanId?: string): ComposerState;
+export declare function editComposer(state: ComposerState, event: KeypressEvent, width?: number): {
+    state: ComposerState;
+    handled: boolean;
+    submit?: DashboardSubmission;
+};

package/node_modules/toolcraft/node_modules/toolcraft-design/dist/dashboard/composer.js

@@ -0,0 +1,107 @@
+import { parseAnsi } from "./ansi.js";
+import { graphemes, graphemeWidth } from "./terminal-width.js";
+import { layoutComposer } from "./composer-layout.js";
+const editingSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+export function createComposerState(kind, afterPlanId) {
+    return { kind, text: "", cursor: 0, focused: true, ...(afterPlanId ? { afterPlanId } : {}) };
+}
+export function editComposer(state, event, width = Number.MAX_SAFE_INTEGER) {
+    const key = event.name ?? event.ch;
+    if (!state.focused || (event.ctrl && key === "c"))
+        return { state, handled: false };
+    if (key === "escape")
+        return { state: { ...state, focused: false }, handled: true };
+    const next = { ...state, error: undefined, preferredColumn: undefined, preferredWidth: undefined };
+    if ((key === "up" || key === "down") && !event.ctrl && !event.meta) {
+        const layout = layoutComposer(state, width);
+        const row = Math.max(0, Math.min(layout.starts.length - 1, layout.cursor.y + (key === "up" ? -1 : 1)));
+        if (row === layout.cursor.y)
+            return { state, handled: true };
+        next.preferredColumn = (state.preferredWidth === width ? state.preferredColumn : undefined) ?? layout.cursor.x;
+        next.preferredWidth = width;
+        next.cursor = layout.starts[row];
+        let column = 0;
+        for (const segment of graphemes(state.text.slice(next.cursor, layout.starts[row + 1]))) {
+            const cells = segment === "\t" ? 2 : graphemeWidth(segment);
+            if (segment === "\n" || column + cells > next.preferredColumn)
+                break;
+            next.cursor += segment.length;
+            column += cells;
+        }
+        return { state: next, handled: true };
+    }
+    const segments = ["left", "right", "backspace", "delete"].includes(key ?? "") || (event.ctrl && (key === "d" || key === "w"))
+        ? editingSegmenter.segment(state.text) : undefined;
+    const previous = segments?.containing(state.cursor - 1)?.index ?? state.cursor;
+    const current = segments?.containing(state.cursor);
+    const following = current ? current.index + current.segment.length : state.cursor;
+    const lineStart = state.cursor === 0 ? 0 : state.text.lastIndexOf("\n", state.cursor - 1) + 1;
+    const newline = state.text.indexOf("\n", state.cursor);
+    const lineEnd = newline === -1 ? state.text.length : newline;
+    function replace(start, end, text = "") {
+        next.text = state.text.slice(0, start) + text + state.text.slice(end);
+        next.cursor = start + text.length;
+    }
+    if (event.name === "paste") {
+        const text = parseAnsi((event.ch ?? "").replaceAll("\r\n", "\n").replaceAll("\r", "\n"))
+            .map((line) => line.segments.map((segment) => segment.text).join(""))
+            .join("\n");
+        replace(state.cursor, state.cursor, text);
+    }
+    else if ((key === "return" || key === "enter") && (event.meta || event.shift)) {
+        replace(state.cursor, state.cursor, "\n");
+    }
+    else if (key === "return" || key === "enter" || key === "tab") {
+        if (!state.text.trim())
+            return { state, handled: true };
+        return { state, handled: true, submit: {
+                kind: state.kind,
+                text: state.text.trim(),
+                ...(state.kind === "message" && state.afterPlanId ? { afterPlanId: state.afterPlanId } : {})
+            } };
+    }
+    else if (key === "left" && !event.meta) {
+        next.cursor = previous;
+    }
+    else if (key === "right" && !event.meta) {
+        next.cursor = following;
+    }
+    else if (key === "home" || (event.ctrl && key === "a")) {
+        next.cursor = lineStart;
+    }
+    else if (key === "end" || (event.ctrl && key === "e")) {
+        next.cursor = lineEnd;
+    }
+    else if (key === "backspace") {
+        replace(previous, state.cursor);
+    }
+    else if (key === "delete" || (event.ctrl && key === "d")) {
+        replace(state.cursor, following);
+    }
+    else if (event.ctrl && key === "u") {
+        replace(lineStart, state.cursor);
+    }
+    else if (event.ctrl && key === "k") {
+        replace(state.cursor, lineEnd);
+    }
+    else if (event.ctrl && key === "w") {
+        let start = state.cursor;
+        let preceding = segments?.containing(start - 1);
+        while (preceding && preceding.segment.trim() === "") {
+            start = preceding.index;
+            preceding = segments?.containing(start - 1);
+        }
+        while (preceding && preceding.segment.trim() !== "") {
+            start = preceding.index;
+            preceding = segments?.containing(start - 1);
+        }
+        replace(start, state.cursor);
+    }
+    else if (event.ch !== undefined && !event.ctrl && !event.meta) {
+        replace(state.cursor, state.cursor, event.ch);
+    }
+    else {
+        return { state, handled: false };
+    }
+    return { state: next, handled: true };
+}

package/node_modules/toolcraft/node_modules/toolcraft-design/dist/dashboard/dashboard.d.ts

@@ -1,4 +1,6 @@
+import { type RenderPerformanceSnapshot } from "../render-performance.js";
 import type { FooterHint } from "./components/footer.js";
+import { type DashboardSubmission } from "./composer.js";
 import type { Command, DashboardStats, OutputItem } from "./types.js";
 export type DashboardOptions = {
     title?: string;
@@ -8,6 +10,11 @@ export type DashboardOptions = {
     hints?: FooterHint[];
     stdin?: NodeJS.ReadStream;
     stdout?: NodeJS.WriteStream;
+    appearance?: "panels" | "conversation";
+    /** Resolves once the runtime accepts the input; rejection keeps the draft editable. */
+    onSubmit?: (submission: DashboardSubmission) => void | Promise<void>;
+    /** Observe bounded performance snapshots without forcing idle repaints. */
+    onPerformance?: (stats: RenderPerformanceSnapshot) => void;
 };
 export type Dashboard = {
     start(): void;
@@ -16,5 +23,6 @@ export type Dashboard = {
     updateStats(stats: Partial<DashboardStats>): void;
     onCommand(handler: (cmd: Command) => void): void;
     destroy(): void;
+    getPerformance(): RenderPerformanceSnapshot;
 };
 export declare function createDashboard(opts?: DashboardOptions): Dashboard;