pi-fabric 0.1.0

package/dist/ui/dashboard.js

@@ -0,0 +1,620 @@
+import { Key, matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { formatClock, formatDuration, formatTokens, padToWidth, safeText, wrapPlainText } from "./format.js";
+import { isActiveStatus } from "./types.js";
+const filters = ["all", "active", "completed", "failed"];
+const spinnerFrames = ["◐", "◓", "◑", "◒"];
+const statusGlyph = (status) => {
+    if (status === "completed" || status === "done")
+        return "✓";
+    if (status === "failed" || status === "timed_out")
+        return "✗";
+    if (status === "blocked")
+        return "!";
+    if (status === "stopped" || status === "cancelled")
+        return "■";
+    if (status === "queued" || status === "pending" || status === "ready")
+        return "○";
+    if (status === "idle" || status === "state")
+        return "·";
+    return spinnerFrames[Math.floor(Date.now() / 250) % spinnerFrames.length] ?? "●";
+};
+const colorStatus = (theme, status, value) => {
+    if (status === "completed" || status === "done")
+        return theme.fg("success", value);
+    if (status === "failed" || status === "timed_out" || status === "error") {
+        return theme.fg("error", value);
+    }
+    if (status === "blocked" || status === "warning")
+        return theme.fg("warning", value);
+    if (status === "running" || status === "in_progress")
+        return theme.fg("accent", value);
+    return theme.fg("dim", value);
+};
+const phaseWork = (run, phaseId) => [
+    ...run.calls.filter((call) => call.phaseId === phaseId),
+    ...run.items.filter((item) => item.phaseId === phaseId),
+];
+const phasePanels = (snapshot, run) => {
+    const panels = run?.phases.map((phase) => {
+        const work = phaseWork(run, phase.id);
+        return {
+            id: phase.id,
+            name: phase.name,
+            status: phase.status,
+            completed: work.filter((entry) => entry.status === "completed").length,
+            total: Math.max(phase.total ?? 0, work.length),
+            phase,
+            session: false,
+        };
+    }) ?? [];
+    const sessionTotal = snapshot.actors.length + snapshot.state.length;
+    if (sessionTotal > 0 || panels.length === 0) {
+        panels.push({
+            id: "__fabric_session",
+            name: "Actors & shared state",
+            status: snapshot.actors.some((actor) => actor.lastError)
+                ? "failed"
+                : snapshot.actors.some((actor) => isActiveStatus(actor.status)) ||
+                    snapshot.state.some((entry) => isActiveStatus(entry.status))
+                    ? "running"
+                    : "idle",
+            completed: snapshot.actors.filter((actor) => actor.status === "stopped").length,
+            total: sessionTotal,
+            session: true,
+        });
+    }
+    return panels;
+};
+const linkedAgent = (call, agent) => Boolean(call.entityId &&
+    (agent.id.startsWith(call.entityId) || call.entityId.startsWith(agent.id)));
+const entitiesFor = (snapshot, run, panel) => {
+    if (!panel || panel.session) {
+        const actors = snapshot.actors.map((actor) => ({
+            id: `actor:${actor.id}`,
+            kind: "actor",
+            label: actor.name,
+            status: actor.lastError ? "failed" : actor.status,
+            value: actor,
+        }));
+        const state = snapshot.state.map((entry) => ({
+            id: `state:${entry.key}`,
+            kind: "state",
+            label: entry.label,
+            status: entry.status,
+            value: entry,
+        }));
+        const unlinkedAgents = snapshot.agents
+            .filter((agent) => agent.runId !== run?.id && isActiveStatus(agent.status))
+            .map((agent) => ({
+            id: `agent:${agent.id}`,
+            kind: "agent",
+            label: agent.name,
+            status: agent.status,
+            value: agent,
+        }));
+        return [...unlinkedAgents, ...actors, ...state];
+    }
+    const calls = run?.calls.filter((call) => call.phaseId === panel.id) ?? [];
+    const linkedAgents = snapshot.agents
+        .filter((agent) => (agent.runId === run?.id && agent.phaseId === panel.id) ||
+        calls.some((call) => linkedAgent(call, agent)))
+        .map((agent) => ({
+        id: `agent:${agent.id}`,
+        kind: "agent",
+        label: agent.name,
+        status: agent.status,
+        value: agent,
+    }));
+    const visibleCalls = calls
+        .filter((call) => (call.kind !== "agent" && call.kind !== "actor") ||
+        !snapshot.agents.some((agent) => linkedAgent(call, agent)))
+        .map((call) => ({
+        id: `call:${call.id}`,
+        kind: "call",
+        label: call.label,
+        status: call.status,
+        value: call,
+    }));
+    const items = run?.items
+        .filter((item) => item.phaseId === panel.id)
+        .map((item) => ({
+        id: `item:${item.id}`,
+        kind: "item",
+        label: item.label,
+        status: item.status,
+        value: item,
+    })) ?? [];
+    return [...linkedAgents, ...visibleCalls, ...items];
+};
+const matchesFilter = (status, filter) => {
+    if (filter === "all")
+        return true;
+    if (filter === "active")
+        return isActiveStatus(status);
+    if (filter === "completed")
+        return status === "completed" || status === "done";
+    return status === "failed" || status === "timed_out" || status === "blocked";
+};
+const tokensFor = (snapshot, run) => snapshot.agents
+    .filter((agent) => !run || agent.runId === run.id)
+    .reduce((sum, agent) => sum + (agent.usage ? agent.usage.input + agent.usage.output : 0), 0);
+const entityTail = (entity, now) => {
+    if (entity.kind === "agent") {
+        const agent = entity.value;
+        const parts = [
+            agent.model,
+            agent.currentTool ?? (agent.status === "running" ? "thinking" : undefined),
+            agent.usage ? `${formatTokens(agent.usage.input + agent.usage.output)} tok` : undefined,
+            agent.toolCalls !== undefined ? `${agent.toolCalls} tools` : undefined,
+            agent.startedAt ? formatDuration((agent.finishedAt ?? now) - agent.startedAt) : undefined,
+        ];
+        return parts.filter((value) => Boolean(value)).join(" · ");
+    }
+    if (entity.kind === "actor") {
+        const actor = entity.value;
+        return [
+            actor.model ?? actor.worker?.model,
+            actor.worker?.currentTool,
+            actor.worker?.usage
+                ? `${formatTokens(actor.worker.usage.input + actor.worker.usage.output)} tok`
+                : undefined,
+            `${actor.messages} msg`,
+            actor.queued > 0 ? `q:${actor.queued}` : undefined,
+        ]
+            .filter((value) => Boolean(value))
+            .join(" · ");
+    }
+    if (entity.kind === "call") {
+        const call = entity.value;
+        return [
+            call.ref,
+            call.progress,
+            call.metrics?.tokens !== undefined ? `${formatTokens(call.metrics.tokens)} tok` : undefined,
+            call.metrics?.toolCalls !== undefined ? `${call.metrics.toolCalls} tools` : undefined,
+            formatDuration((call.finishedAt ?? now) - call.startedAt),
+        ]
+            .filter((value) => Boolean(value))
+            .join(" · ");
+    }
+    if (entity.kind === "item") {
+        const item = entity.value;
+        return [
+            item.current ?? item.detail,
+            item.total !== undefined ? `${item.completed ?? 0}/${item.total}` : undefined,
+        ]
+            .filter((value) => Boolean(value))
+            .join(" · ");
+    }
+    return [entity.value.owner, entity.value.detail, `v${entity.value.version}`]
+        .filter((value) => Boolean(value))
+        .join(" · ");
+};
+export class FabricDashboard {
+    tui;
+    theme;
+    snapshot;
+    done;
+    focused = false;
+    pane = "phases";
+    phaseIndex = 0;
+    entityIndex = 0;
+    runIndex = 0;
+    filter = "all";
+    phaseSelectionTouched = false;
+    detailId;
+    detailScroll = 0;
+    refreshTimer;
+    constructor(tui, theme, snapshot, done) {
+        this.tui = tui;
+        this.theme = theme;
+        this.snapshot = snapshot;
+        this.done = done;
+        this.focused = true;
+        this.refreshTimer = setInterval(() => this.tui.requestRender(), 500);
+        this.refreshTimer.unref();
+    }
+    handleInput(data) {
+        const snapshot = this.snapshot();
+        const run = snapshot.runs[this.runIndex];
+        const panels = phasePanels(snapshot, run);
+        this.syncPhase(run, panels);
+        const panel = panels[this.phaseIndex];
+        const entities = entitiesFor(snapshot, run, panel).filter((entity) => matchesFilter(entity.status, this.filter));
+        if (this.detailId) {
+            if (matchesKey(data, Key.escape) ||
+                matchesKey(data, Key.ctrl("c")) ||
+                matchesKey(data, Key.left) ||
+                data === "h") {
+                this.detailId = undefined;
+                this.detailScroll = 0;
+            }
+            else if (matchesKey(data, Key.up) || data === "k") {
+                this.detailScroll = Math.max(0, this.detailScroll - 1);
+            }
+            else if (matchesKey(data, Key.down) || data === "j") {
+                this.detailScroll++;
+            }
+            else if (matchesKey(data, Key.home) || data === "g") {
+                this.detailScroll = 0;
+            }
+            this.tui.requestRender();
+            return;
+        }
+        if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
+            if (this.pane === "entities") {
+                this.pane = "phases";
+            }
+            else {
+                this.done();
+                return;
+            }
+        }
+        else if (matchesKey(data, Key.tab)) {
+            this.pane = this.pane === "phases" ? "entities" : "phases";
+        }
+        else if (matchesKey(data, Key.left) || data === "h") {
+            this.pane = "phases";
+        }
+        else if (matchesKey(data, Key.right) || data === "l") {
+            this.pane = "entities";
+        }
+        else if (matchesKey(data, Key.up) || data === "k") {
+            if (this.pane === "phases") {
+                this.phaseIndex = Math.max(0, this.phaseIndex - 1);
+                this.phaseSelectionTouched = true;
+            }
+            else
+                this.entityIndex = Math.max(0, this.entityIndex - 1);
+        }
+        else if (matchesKey(data, Key.down) || data === "j") {
+            if (this.pane === "phases") {
+                this.phaseIndex = Math.min(Math.max(0, panels.length - 1), this.phaseIndex + 1);
+                this.phaseSelectionTouched = true;
+                this.entityIndex = 0;
+            }
+            else {
+                this.entityIndex = Math.min(Math.max(0, entities.length - 1), this.entityIndex + 1);
+            }
+        }
+        else if (matchesKey(data, Key.enter)) {
+            if (this.pane === "phases") {
+                this.pane = "entities";
+            }
+            else if (entities[this.entityIndex]) {
+                this.detailId = entities[this.entityIndex]?.id;
+                this.detailScroll = 0;
+            }
+        }
+        else if (data === "f") {
+            const next = (filters.indexOf(this.filter) + 1) % filters.length;
+            this.filter = filters[next] ?? "all";
+            this.entityIndex = 0;
+        }
+        else if (data === "[") {
+            this.runIndex = Math.min(Math.max(0, snapshot.runs.length - 1), this.runIndex + 1);
+            this.resetSelection();
+        }
+        else if (data === "]") {
+            this.runIndex = Math.max(0, this.runIndex - 1);
+            this.resetSelection();
+        }
+        else if (data === "G") {
+            if (this.pane === "phases") {
+                this.phaseIndex = Math.max(0, panels.length - 1);
+                this.phaseSelectionTouched = true;
+            }
+            else
+                this.entityIndex = Math.max(0, entities.length - 1);
+        }
+        else if (data === "g") {
+            if (this.pane === "phases") {
+                this.phaseIndex = 0;
+                this.phaseSelectionTouched = true;
+            }
+            else
+                this.entityIndex = 0;
+        }
+        this.tui.requestRender();
+    }
+    render(width) {
+        if (width <= 0)
+            return [];
+        const snapshot = this.snapshot();
+        this.runIndex = Math.max(0, Math.min(this.runIndex, Math.max(0, snapshot.runs.length - 1)));
+        const run = snapshot.runs[this.runIndex];
+        const panels = phasePanels(snapshot, run);
+        this.syncPhase(run, panels);
+        const panel = panels[this.phaseIndex];
+        const entities = entitiesFor(snapshot, run, panel).filter((entity) => matchesFilter(entity.status, this.filter));
+        this.entityIndex = Math.max(0, Math.min(this.entityIndex, Math.max(0, entities.length - 1)));
+        if (this.detailId) {
+            const detail = entities.find((entity) => entity.id === this.detailId);
+            if (detail)
+                return this.renderDetail(width, snapshot, detail);
+            this.detailId = undefined;
+        }
+        return this.renderOverview(width, snapshot, run, panels, panel, entities);
+    }
+    invalidate() { }
+    dispose() {
+        clearInterval(this.refreshTimer);
+    }
+    renderOverview(width, snapshot, run, panels, selectedPanel, entities) {
+        if (width < 24) {
+            return [truncateToWidth(`Fabric · ${run?.name ?? "session"}`, width)];
+        }
+        const innerWidth = width - 2;
+        const lines = [];
+        lines.push(this.topBorder(width, `Fabric · ${run?.name ?? "session"}`));
+        const activeAgents = snapshot.agents.filter((agent) => isActiveStatus(agent.status)).length;
+        const elapsed = run ? formatDuration((run.finishedAt ?? snapshot.now) - run.startedAt) : undefined;
+        const summary = [
+            run?.status,
+            `${activeAgents}/${snapshot.agents.length} agents active`,
+            `${snapshot.actors.length} actors`,
+            tokensFor(snapshot, run) > 0
+                ? `${formatTokens(tokensFor(snapshot, run))} tok`
+                : undefined,
+            elapsed,
+            snapshot.runs.length > 1 ? `run ${this.runIndex + 1}/${snapshot.runs.length}` : undefined,
+        ]
+            .filter((value) => Boolean(value))
+            .join(" · ");
+        const summaryText = safeText(summary);
+        let headerLine = summaryText;
+        if (run?.description) {
+            const gap = "  ";
+            const availableDescription = innerWidth - visibleWidth(summaryText) - gap.length;
+            headerLine =
+                availableDescription >= 12
+                    ? `${padToWidth(this.theme.fg("muted", safeText(run.description)), availableDescription)}${gap}${this.theme.fg("dim", summaryText)}`
+                    : this.theme.fg("dim", summaryText);
+        }
+        else if (summaryText) {
+            headerLine = this.theme.fg("dim", summaryText);
+        }
+        lines.push(this.row(width, headerLine || this.theme.fg("muted", "No Fabric activity yet")));
+        lines.push(this.middleBorder(width));
+        const maxBody = Math.max(8, Math.min(22, (process.stdout.rows ?? 28) - 10));
+        if (innerWidth >= 88) {
+            const leftWidth = Math.min(38, Math.max(28, Math.floor((innerWidth - 1) * 0.34)));
+            const rightWidth = innerWidth - leftWidth - 1;
+            const leftLines = this.renderPhasePanel(panels, leftWidth, maxBody);
+            const rightLines = this.renderEntityPanel(entities, rightWidth, maxBody, snapshot.now, selectedPanel);
+            for (let index = 0; index < maxBody; index++) {
+                const left = leftLines[index] ?? "";
+                const right = rightLines[index] ?? "";
+                lines.push(this.row(width, `${padToWidth(left, leftWidth)}${this.theme.fg("borderMuted", "│")}${padToWidth(right, rightWidth)}`));
+            }
+        }
+        else {
+            const phaseHeight = Math.min(Math.max(3, panels.length + 1), Math.floor(maxBody * 0.45));
+            const entityHeight = Math.max(3, maxBody - phaseHeight - 1);
+            for (const line of this.renderPhasePanel(panels, innerWidth, phaseHeight)) {
+                lines.push(this.row(width, line));
+            }
+            lines.push(this.row(width, this.theme.fg("borderMuted", "─".repeat(innerWidth))));
+            for (const line of this.renderEntityPanel(entities, innerWidth, entityHeight, snapshot.now, selectedPanel)) {
+                lines.push(this.row(width, line));
+            }
+        }
+        const runEvents = run?.events.slice(-2) ?? [];
+        const meshEventCount = Math.max(0, 2 - runEvents.length);
+        const meshEvents = meshEventCount > 0 ? snapshot.events.slice(-meshEventCount) : [];
+        if (runEvents.length > 0 || meshEvents.length > 0) {
+            lines.push(this.middleBorder(width));
+            for (const event of runEvents) {
+                lines.push(this.row(width, colorStatus(this.theme, event.level === "success" ? "completed" : event.level, `[${formatClock(event.createdAt)}] ${safeText(event.message)}`)));
+            }
+            for (const event of meshEvents) {
+                const target = event.to ? ` → ${event.to}` : "";
+                const text = event.text ? ` · ${safeText(event.text)}` : "";
+                lines.push(this.row(width, this.theme.fg("dim", `[${formatClock(event.createdAt)}] ${event.topic} · ${event.from.name}${target}${text}`)));
+            }
+        }
+        lines.push(this.middleBorder(width));
+        lines.push(this.row(width, this.theme.fg("dim", `↑↓/jk select · ←→/tab pane · enter inspect · f filter:${this.filter} · [ ] runs · esc close`)));
+        lines.push(this.bottomBorder(width));
+        return lines.map((line) => truncateToWidth(line, width, ""));
+    }
+    renderPhasePanel(panels, width, height) {
+        const lines = [
+            truncateToWidth(`${this.pane === "phases" ? this.theme.fg("accent", "▸ ") : "  "}${this.theme.fg("accent", "Phases")}`, width),
+        ];
+        const available = Math.max(0, height - 1);
+        const start = Math.max(0, Math.min(this.phaseIndex - Math.floor(available / 2), Math.max(0, panels.length - available)));
+        for (let index = start; index < Math.min(panels.length, start + available); index++) {
+            const panel = panels[index];
+            if (!panel)
+                continue;
+            const selected = index === this.phaseIndex;
+            const prefix = selected ? "› " : "  ";
+            const count = panel.total > 0 ? `${panel.completed}/${panel.total}` : "";
+            const raw = `${prefix}${colorStatus(this.theme, panel.status, statusGlyph(panel.status))} ${safeText(panel.name)}`;
+            const countWidth = visibleWidth(count);
+            const contentWidth = Math.max(0, width - countWidth - (count ? 1 : 0));
+            let line = `${padToWidth(raw, contentWidth)}${count ? ` ${this.theme.fg("dim", count)}` : ""}`;
+            if (selected && this.pane === "phases")
+                line = this.theme.bg("selectedBg", padToWidth(line, width));
+            lines.push(truncateToWidth(line, width, ""));
+        }
+        while (lines.length < height)
+            lines.push("");
+        return lines.slice(0, height);
+    }
+    renderEntityPanel(entities, width, height, now, panel) {
+        const heading = panel?.name ?? "Activity";
+        const headingDetail = panel?.phase?.description
+            ? this.theme.fg("dim", ` · ${safeText(panel.phase.description)}`)
+            : "";
+        const lines = [
+            truncateToWidth(`${this.pane === "entities" ? this.theme.fg("accent", "▸ ") : "  "}${this.theme.fg("accent", safeText(heading))}${headingDetail}${this.filter !== "all" ? this.theme.fg("dim", ` · ${this.filter}`) : ""}`, width),
+        ];
+        const available = Math.max(0, height - 1);
+        const start = Math.max(0, Math.min(this.entityIndex - Math.floor(available / 2), Math.max(0, entities.length - available)));
+        for (let index = start; index < Math.min(entities.length, start + available); index++) {
+            const entity = entities[index];
+            if (!entity)
+                continue;
+            const selected = index === this.entityIndex;
+            const prefix = selected ? "› " : "  ";
+            const lead = `${prefix}${colorStatus(this.theme, entity.status, statusGlyph(entity.status))} ${safeText(entity.label)}`;
+            const tail = safeText(entityTail(entity, now));
+            let line = tail ? `${lead}  ${this.theme.fg("dim", tail)}` : lead;
+            if (selected && this.pane === "entities")
+                line = this.theme.bg("selectedBg", padToWidth(line, width));
+            lines.push(truncateToWidth(line, width, ""));
+        }
+        if (entities.length === 0 && available > 0) {
+            lines.push(this.theme.fg("dim", "  (no matching activity)"));
+        }
+        while (lines.length < height)
+            lines.push("");
+        return lines.slice(0, height);
+    }
+    renderDetail(width, snapshot, entity) {
+        if (width < 24)
+            return [truncateToWidth(entity.label, width)];
+        const innerWidth = width - 2;
+        const lines = [this.topBorder(width, `${entity.kind} · ${entity.label}`)];
+        const content = this.detailLines(entity, innerWidth, snapshot.now);
+        const maxBody = Math.max(8, Math.min(24, (process.stdout.rows ?? 28) - 7));
+        const maxScroll = Math.max(0, content.length - maxBody);
+        this.detailScroll = Math.max(0, Math.min(this.detailScroll, maxScroll));
+        const visible = content.slice(this.detailScroll, this.detailScroll + maxBody);
+        for (const line of visible)
+            lines.push(this.row(width, line));
+        while (lines.length < maxBody + 1)
+            lines.push(this.row(width, ""));
+        lines.push(this.middleBorder(width));
+        lines.push(this.row(width, this.theme.fg("dim", `j/k scroll · esc back${content.length > maxBody ? ` · ${this.detailScroll + 1}-${Math.min(content.length, this.detailScroll + maxBody)}/${content.length}` : ""}`)));
+        lines.push(this.bottomBorder(width));
+        return lines.map((line) => truncateToWidth(line, width, ""));
+    }
+    detailLines(entity, width, now) {
+        const lines = [];
+        const field = (label, value) => {
+            const text = safeText(value);
+            if (!text)
+                return;
+            const prefix = `${this.theme.fg("dim", `${label}:`)} `;
+            const wrapped = wrapPlainText(text, Math.max(1, width - visibleWidth(prefix)), 12);
+            if (wrapped[0])
+                lines.push(truncateToWidth(prefix + wrapped[0], width));
+            for (const continuation of wrapped.slice(1)) {
+                lines.push(truncateToWidth(" ".repeat(visibleWidth(prefix)) + continuation, width));
+            }
+        };
+        field("Status", entity.status);
+        if (entity.kind === "agent") {
+            const agent = entity.value;
+            field("ID", agent.id);
+            field("Model", agent.model);
+            field("Transport", agent.transport);
+            field("Activity", agent.currentTool);
+            field("Elapsed", agent.startedAt ? formatDuration((agent.finishedAt ?? now) - agent.startedAt) : undefined);
+            field("Usage", agent.usage ? `${formatTokens(agent.usage.input + agent.usage.output)} tokens · ${agent.toolCalls ?? 0} tools · ${agent.turns ?? 0} turns · $${agent.usage.cost.toFixed(4)}` : undefined);
+            field("Task", agent.task);
+            field("Branch", agent.branch);
+            field("Worktree", agent.worktree);
+            field("Attach", agent.attachCommand);
+            field("Error", agent.error);
+            field("Result", agent.text);
+        }
+        else if (entity.kind === "actor") {
+            const actor = entity.value;
+            field("ID", actor.id);
+            field("Model", actor.model ?? actor.worker?.model);
+            field("Delivery", `${actor.delivery} · ${actor.responseMode}`);
+            field("Activity", actor.worker?.currentTool);
+            field("Transport", actor.worker?.transport);
+            field("Usage", actor.worker?.usage
+                ? `${formatTokens(actor.worker.usage.input + actor.worker.usage.output)} tokens · ${actor.worker.toolCalls ?? 0} tools`
+                : undefined);
+            field("Host events", actor.events.join(", "));
+            field("Topics", actor.topics.join(", "));
+            field("Queue", actor.queued);
+            field("Last error", actor.lastError);
+            if (actor.recentMessages.length > 0) {
+                lines.push("");
+                lines.push(this.theme.fg("accent", "Recent mailbox"));
+                for (const message of actor.recentMessages) {
+                    const text = message.text ?? message.action ?? message.error ?? "data";
+                    field(`${message.direction === "in" ? "→" : "←"} ${formatClock(message.createdAt)} ${message.source}`, text);
+                }
+            }
+        }
+        else if (entity.kind === "call") {
+            const call = entity.value;
+            field("Reference", call.ref);
+            field("ID", call.id);
+            field("Kind", call.kind);
+            field("Progress", call.progress);
+            field("Elapsed", formatDuration((call.finishedAt ?? now) - call.startedAt));
+            field("Tokens", call.metrics?.tokens);
+            field("Tool calls", call.metrics?.toolCalls);
+            field("Cost", call.metrics?.cost);
+            field("Entity", call.entityId);
+            field("Error", call.error);
+        }
+        else if (entity.kind === "item") {
+            const item = entity.value;
+            field("ID", item.id);
+            field("Kind", item.kind);
+            field("Progress", item.total !== undefined ? `${item.completed ?? 0}/${item.total}` : undefined);
+            field("Current", item.current);
+            field("Detail", item.detail);
+            field("Data", item.data === undefined ? undefined : JSON.stringify(item.data));
+        }
+        else {
+            const entry = entity.value;
+            field("Key", entry.key);
+            field("Owner", entry.owner);
+            field("Version", entry.version);
+            field("Updated", new Date(entry.updatedAt).toLocaleString());
+            field("Detail", entry.detail);
+            field("Value", JSON.stringify(entry.value));
+        }
+        return lines.length > 0 ? lines : [this.theme.fg("dim", "No details")];
+    }
+    syncPhase(run, panels) {
+        if (panels.length === 0) {
+            this.phaseIndex = 0;
+            return;
+        }
+        if (!this.phaseSelectionTouched && run?.currentPhaseId) {
+            const current = panels.findIndex((panel) => panel.id === run.currentPhaseId);
+            if (current >= 0)
+                this.phaseIndex = current;
+        }
+        this.phaseIndex = Math.max(0, Math.min(this.phaseIndex, panels.length - 1));
+    }
+    resetSelection() {
+        this.phaseIndex = 0;
+        this.entityIndex = 0;
+        this.phaseSelectionTouched = false;
+        this.detailId = undefined;
+        this.detailScroll = 0;
+        this.pane = "phases";
+    }
+    topBorder(width, title) {
+        const border = (value) => this.theme.fg("borderMuted", value);
+        const safeTitle = truncateToWidth(safeText(title), Math.max(0, width - 6));
+        const styledTitle = ` ${this.theme.fg("accent", safeTitle)} `;
+        const remaining = Math.max(0, width - 2 - visibleWidth(styledTitle));
+        const left = Math.floor(remaining / 2);
+        const right = remaining - left;
+        return `${border(`╭${"─".repeat(left)}`)}${styledTitle}${border(`${"─".repeat(right)}╮`)}`;
+    }
+    middleBorder(width) {
+        return this.theme.fg("borderMuted", `├${"─".repeat(Math.max(0, width - 2))}┤`);
+    }
+    bottomBorder(width) {
+        return this.theme.fg("borderMuted", `╰${"─".repeat(Math.max(0, width - 2))}╯`);
+    }
+    row(width, content) {
+        const innerWidth = Math.max(0, width - 2);
+        return `${this.theme.fg("borderMuted", "│")}${padToWidth(content, innerWidth)}${this.theme.fg("borderMuted", "│")}`;
+    }
+}
+//# sourceMappingURL=dashboard.js.map