pi-chassis 0.0.0-stage → 0.7.1

package/dist/chassis/editor.js

@@ -0,0 +1,213 @@
+/**
+ * OpenCode-style prompt editor.
+ *
+ *   ┃ ask anything…
+ *   ┃
+ *   ┃ 󰚩 BUILD   Opus 5.5  Anthropic  medium
+ *                      tab mode · ctrl+p commands · ctrl+x leader
+ *
+ * A shaded panel with a heavy left rail in the mode colour (the brand primary for build,
+ * the brand plan colour for plan) and the mode pill and model inside, like OpenCode's prompt; key hints sit under it.
+ * pi's working status (spinner, retry countdown, compaction) is shown in the footer instead.
+ *
+ * Keys handled here before pi sees them:
+ *   - Tab on an empty prompt (and no autocomplete open): switch Build/Plan mode. Shift+Tab is left to
+ *     pi, which cycles the thinking level with it.
+ *   - Ctrl+X: leader key; the next key runs a leader action (see commands.ts)
+ *   - Ctrl+P: command palette. pi binds ctrl+p to model cycling, a reserved action that
+ *     registerShortcut() can't take over, so the editor intercepts it (model cycling stays on
+ *     ctrl+x m / ctrl+l).
+ * Everything else goes to pi's CustomEditor, so app keybindings keep working.
+ */
+import { CustomEditor } from "@earendil-works/pi-coding-agent";
+import { matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { paint, shade, surfaceColor } from "./palette.js";
+import { modeColorValue, promptRow } from "./prompt-row.js";
+const RAIL = "┃";
+export class PromptEditor extends CustomEditor {
+    leaderPending = false;
+    leaderTimer;
+    hooks;
+    constructor(tui, editorTheme, keybindings, hooks) {
+        super(tui, editorTheme, keybindings, { paddingX: 0, embedWorkingStatus: true });
+        this.hooks = hooks;
+    }
+    setPaddingX(_padding) {
+        super.setPaddingX(0);
+    }
+    /**
+     * pi passes its working/retry/compaction indicator here (embedWorkingStatus). Keep it in shared
+     * state for the footer instead of drawing it in the editor's top border.
+     */
+    setWorkingStatusIndicator(indicator) {
+        super.setWorkingStatusIndicator(undefined);
+        this.hooks.state.statusIndicator = indicator;
+        this.hooks.onStatusChange?.();
+    }
+    clearLeader() {
+        if (this.leaderTimer)
+            clearTimeout(this.leaderTimer);
+        this.leaderTimer = undefined;
+        if (this.leaderPending) {
+            this.leaderPending = false;
+            this.hooks.onLeaderState(false);
+        }
+    }
+    /** Cursor blink: off phase hides the editor's reverse-video cursor; a keypress resets it. */
+    blinkOff = false;
+    blinkTimer;
+    static BLINK_MS = 530;
+    syncBlink() {
+        const want = this.hooks.blink?.() ?? false;
+        if (want && !this.blinkTimer) {
+            this.blinkTimer = setInterval(() => {
+                if (!(this.hooks.blink?.() ?? false)) {
+                    this.stopBlink();
+                    this.tui.requestRender();
+                    return;
+                }
+                this.blinkOff = !this.blinkOff;
+                this.tui.requestRender();
+            }, PromptEditor.BLINK_MS);
+            this.blinkTimer.unref?.();
+        }
+        else if (!want && this.blinkTimer) {
+            this.stopBlink();
+        }
+    }
+    stopBlink() {
+        if (this.blinkTimer)
+            clearInterval(this.blinkTimer);
+        this.blinkTimer = undefined;
+        this.blinkOff = false;
+    }
+    dispose() {
+        this.stopBlink();
+    }
+    handleInput(data) {
+        // Typing keeps the cursor visible; the blink restarts from "on".
+        if (this.blinkTimer) {
+            this.stopBlink();
+        }
+        if (this.leaderPending) {
+            this.clearLeader();
+            if (matchesKey(data, "escape") || matchesKey(data, "ctrl+x")) {
+                this.tui.requestRender();
+                return;
+            }
+            if (this.hooks.onLeaderKey(data)) {
+                this.tui.requestRender();
+                return;
+            }
+            // Unknown leader key: fall through as a normal key.
+        }
+        if (matchesKey(data, "ctrl+p")) {
+            this.hooks.onPalette();
+            return;
+        }
+        if (matchesKey(data, "ctrl+x")) {
+            this.leaderPending = true;
+            this.hooks.onLeaderState(true);
+            this.leaderTimer = setTimeout(() => {
+                this.clearLeader();
+                this.tui.requestRender();
+            }, this.hooks.leaderTimeoutMs);
+            this.leaderTimer.unref?.();
+            this.tui.requestRender();
+            return;
+        }
+        const idlePrompt = this.getText().length === 0 && !this.isShowingAutocomplete();
+        if (idlePrompt && matchesKey(data, "tab")) {
+            this.hooks.onModeCycle();
+            this.tui.requestRender();
+            return;
+        }
+        super.handleInput(data);
+    }
+    modeColor(s) {
+        const theme = this.hooks.theme();
+        // The rail is a shape, not text: it keeps the exact brand colour under any theme.
+        return paint(theme, modeColorValue(this.hooks.state.mode === "plan" ? "plan" : "build"), s);
+    }
+    render(width) {
+        const theme = this.hooks.theme();
+        if (width < 12)
+            return super.render(width);
+        // OpenCode prompt (component/prompt/index.tsx): a ┃ rail in the agent colour, then a box on
+        // the element background with 1 row of top padding and 2 columns either side, the text, a
+        // blank row, the agent + model row, and a half-block bottom edge (╹▀▀▀). Key hints sit
+        // below, outside the box.
+        //   ┃
+        //   ┃  prompt text…
+        //   ┃
+        //   ┃  󰚩 BUILD   Opus 5.5  Anthropic  medium
+        //   ╹▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+        //                            tab agents  ctrl+p commands
+        // pi's working spinner goes to the footer (see setWorkingStatusIndicator).
+        const PAD = 2;
+        const boxW = width - 1; // after the rail
+        const inner = boxW - PAD * 2;
+        const base = super.render(inner);
+        const bottomIdx = bottomBorderIndex(this, base);
+        const rail = this.modeColor("┃");
+        const row = (content) => `${rail}${shade(theme, `${" ".repeat(PAD)}${content}`, boxW, "element")}`;
+        const out = [];
+        // Top padding row; a "↑ N more" scroll hint from the base top border goes there.
+        out.push(row(stripRule(base[0] ?? "", inner)));
+        this.syncBlink();
+        const hideCursor = this.blinkOff;
+        const placeholder = this.getText().length === 0 ? this.hooks.placeholder?.() : undefined;
+        for (let i = 1; i < bottomIdx; i++) {
+            let line = base[i] ?? "";
+            // The base editor draws its cursor as reverse video; drop that during the off phase.
+            if (hideCursor)
+                line = line.replace(/\x1b\[7m/g, "");
+            if (placeholder && i === 1)
+                line = `${line.replace(/ +$/, "")}${theme.fg("muted", placeholder)}`;
+            out.push(row(truncateToWidth(line, inner, "…")));
+        }
+        // Blank row, or the "↓ N more" scroll hint from the base bottom border.
+        const more = (base[bottomIdx] ?? "").replace(/\x1b\[[0-9;]*m/g, "").match(/[↓]\s+\d+\s+more/);
+        out.push(row(more ? theme.fg("dim", more[0]) : ""));
+        // Agent + model row: a mode pill, the model, the provider and the thinking level (prompt-row.ts).
+        out.push(row(promptRow(theme, this.hooks.state.mode === "plan" ? "plan" : "build", this.hooks.modelParts(), inner)));
+        // Bottom edge: ╹ in the rail colour, then upper half blocks in the box colour.
+        out.push(`${this.modeColor("╹")}${paint(theme, surfaceColor(theme, "element"), "▀".repeat(boxW))}`);
+        // Key hints under the box, right-aligned; an optional brand line on the left.
+        const key = (k, d) => `${theme.fg("text", k)} ${theme.fg("muted", d)}`;
+        const hint = this.leaderPending
+            ? theme.fg("warning", "ctrl+x …  n new · m model · b sidebar · ? help")
+            : [key("tab", "agents"), key("ctrl+p", "commands"), key("ctrl+x", "leader")].join("   ");
+        const hw = visibleWidth(hint);
+        const left = this.hooks.hintLeft?.();
+        const lw = left ? visibleWidth(left) + 1 : 0; // 1 column: in line with the rail
+        if (left && lw + hw + 4 < width)
+            out.push(` ${left}${" ".repeat(width - lw - hw - 2)}${hint}  `);
+        else
+            out.push(hw + 2 < width ? `${" ".repeat(width - hw - 2)}${hint}  ` : truncateToWidth(hint, width, "…"));
+        // Autocomplete list below.
+        for (let i = bottomIdx + 1; i < base.length; i++)
+            out.push(`  ${base[i]}`);
+        return out.map((l) => truncateToWidth(l, width, ""));
+    }
+}
+/**
+ * Index of the base editor's bottom border: it renders the top border, then
+ * `renderedVisibleLineCount` text lines (a pi-tui Editor field, read at runtime), then the bottom
+ * border, then any autocomplete lines.
+ */
+function bottomBorderIndex(editor, lines) {
+    const n = editor.renderedVisibleLineCount;
+    if (typeof n === "number" && n >= 0 && n + 1 < lines.length)
+        return n + 1;
+    return lines.length - 1;
+}
+/** Replace a plain ─ rule with blank space; keep an embedded status (spinner text) visible. */
+function stripRule(line, width) {
+    const plain = line.replace(/\x1b\[[0-9;]*m/g, "");
+    if (/^─*$/.test(plain))
+        return " ".repeat(width);
+    // Working status or scroll hint embedded in the border: drop the dashes around it.
+    const text = line.replace(/─/g, " ").replace(/^\s+/, "");
+    return truncateToWidth(text, width, "");
+}

package/dist/chassis/footer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Footer: one line under the prompt, OpenCode style.
+ *
+ *   ⠋ Working 4s
+ *
+ * pi's working indicator. The cwd, git branch, context, cost, status widgets and other extensions'
+ * setStatus() strings (MCP, LSP, provider usage, ...) live in the sidebar; they only show here
+ * while the sidebar is hidden (ctrl+x b, a narrow terminal, or the overlay fallback).
+ * Segments drop from the left of the right group when the line is too narrow.
+ */
+import type { ExtensionContext, ReadonlyFooterDataProvider, Theme } from "@earendil-works/pi-coding-agent";
+import type { UiState } from "./state.ts";
+export declare function renderFooter(state: UiState, theme: Theme, data: ReadonlyFooterDataProvider, width: number): string[];
+export declare function installFooter(ctx: ExtensionContext, state: UiState, onRequestRender: (fn: (() => void) | undefined) => void): () => void;

package/dist/chassis/footer.js

@@ -0,0 +1,136 @@
+/**
+ * Footer: one line under the prompt, OpenCode style.
+ *
+ *   ⠋ Working 4s
+ *
+ * pi's working indicator. The cwd, git branch, context, cost, status widgets and other extensions'
+ * setStatus() strings (MCP, LSP, provider usage, ...) live in the sidebar; they only show here
+ * while the sidebar is hidden (ctrl+x b, a narrow terminal, or the overlay fallback).
+ * Segments drop from the left of the right group when the line is too narrow.
+ */
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { claimedStatusKeys, renderWidget, widgetsFor } from "./api.js";
+import { activeProviderStatus, claimedProviderKeys, providerDisplayName, providerFooterText } from "./provider-view.js";
+import { fmtDuration, fmtTokens, hasOwnColor, homeRelative, sanitizeKeepColor, widgetPaint } from "./palette.js";
+import { usageTotals } from "./session-info.js";
+import { leadIcon, resolveIcon } from "./icons.js";
+import { branchGlyph, worktreeTag } from "./sidebar.js";
+export function renderFooter(state, theme, data, width) {
+    // The home screen has its own bottom bar (home.ts).
+    if (state.home())
+        return [];
+    const ctx = state.ctx;
+    const sep = theme.fg("borderMuted", " │ ");
+    // Left: cwd and git only while the sidebar (which shows them) is hidden, then the indicator.
+    const sidebar = state.sidebarShown();
+    const left = sidebar ? [] : [theme.fg("muted", homeRelative(ctx?.cwd ?? process.cwd()))];
+    const branch = sidebar ? undefined : (state.git?.branch ?? data.getGitBranch() ?? undefined);
+    if (branch) {
+        let g = `${leadIcon(branchGlyph(), (s) => theme.fg("accent", s))}${theme.fg("text", branch)}`;
+        if (state.git?.dirty)
+            g += theme.fg("warning", ` ●${state.git.dirty}`);
+        if (state.git?.ahead)
+            g += theme.fg("dim", ` ↑${state.git.ahead}`);
+        if (state.git?.behind)
+            g += theme.fg("dim", ` ↓${state.git.behind}`);
+        g += worktreeTag(theme, state.git);
+        left.push(g);
+    }
+    // pi's status indicator (spinner + "Working…", retry countdown, compaction) with elapsed time.
+    const indicator = state.statusIndicator;
+    if (indicator) {
+        const elapsed = state.workingSince ? theme.fg("dim", ` ${fmtDuration(Date.now() - state.workingSince)}`) : "";
+        let status = "";
+        try {
+            status = indicator.renderInBorder(40);
+        }
+        catch {
+            status = "";
+        }
+        left.push(`${status}${elapsed}`);
+    }
+    else if (state.workingSince) {
+        left.push(theme.fg("dim", `working ${fmtDuration(Date.now() - state.workingSince)}`));
+    }
+    else if (state.lastDurationMs !== undefined) {
+        left.push(theme.fg("dim", `done ${fmtDuration(state.lastDurationMs)}`));
+    }
+    // Right (sidebar hidden only): statuses, then context and cost.
+    const right = [];
+    const showStatuses = !state.sidebarShown();
+    for (const w of showStatuses ? widgetsFor("footer") : []) {
+        const view = renderWidget(w, { theme, ctx, width });
+        const viewIcon = resolveIcon(view?.icon);
+        if (!view?.text && !viewIcon)
+            continue;
+        const text = [viewIcon, view.label, view.text].filter(Boolean).join(" ");
+        right.push(widgetPaint(theme, view.color, view.level, text));
+    }
+    const claimed = new Set([...claimedStatusKeys(), ...claimedProviderKeys(ctx, data.getExtensionStatuses())]);
+    const statuses = [...(showStatuses ? data.getExtensionStatuses() : new Map())]
+        .filter(([k]) => !claimed.has(k))
+        .sort(([a], [b]) => a.localeCompare(b));
+    for (const [, raw] of statuses) {
+        const s = sanitizeKeepColor(raw);
+        if (!visibleWidth(s))
+            continue;
+        right.push(hasOwnColor(s) ? s : theme.fg("muted", s));
+    }
+    // Context, cost and provider usage are in the sidebar's Context section; with the sidebar hidden
+    // they come back here.
+    if (ctx && showStatuses) {
+        try {
+            const cu = ctx.getContextUsage();
+            const usage = usageTotals(ctx);
+            const parts = [];
+            if (cu?.tokens != null)
+                parts.push(fmtTokens(cu.tokens));
+            if (cu?.percent != null) {
+                const c = cu.percent >= 85 ? "error" : cu.percent >= 60 ? "warning" : "muted";
+                parts.push(theme.fg(c, `${cu.percent.toFixed(1)}%`));
+            }
+            parts.push(`$${usage.cost.toFixed(2)}`);
+            const spec = activeProviderStatus(ctx, data.getExtensionStatuses());
+            const extra = spec ? providerFooterText(spec, ctx, data.getExtensionStatuses()) : "";
+            const tag = spec ? providerDisplayName(ctx, spec).toLowerCase() : "";
+            right.push(theme.fg("muted", parts.join(" ")) + (visibleWidth(extra) ? ` ${theme.fg("dim", tag)} ${extra}` : ""));
+        }
+        catch {
+            // stale ctx
+        }
+    }
+    const leftStr = ` ${left.join("  ")}`;
+    // Drop right-hand segments from the front until it fits next to the left part.
+    let segs = right;
+    const fits = () => visibleWidth(leftStr) + visibleWidth(segs.join(sep)) + 3 <= width;
+    while (segs.length > 1 && !fits())
+        segs = segs.slice(1);
+    const rightStr = segs.join(sep);
+    const gap = width - visibleWidth(leftStr) - visibleWidth(rightStr) - 1;
+    if (gap >= 1)
+        return [`${leftStr}${" ".repeat(gap)}${rightStr} `];
+    return [truncateToWidth(leftStr, width, "…"), truncateToWidth(` ${rightStr}`, width, "…")];
+}
+export function installFooter(ctx, state, onRequestRender) {
+    ctx.ui.setFooter((tui, theme, data) => {
+        onRequestRender(() => tui.requestRender());
+        state.statuses = () => data.getExtensionStatuses();
+        const unsub = data.onBranchChange(() => tui.requestRender());
+        return {
+            dispose() {
+                unsub();
+                onRequestRender(undefined);
+            },
+            invalidate() { },
+            render: (width) => renderFooter(state, theme, data, width),
+        };
+    });
+    return () => {
+        try {
+            ctx.ui.setFooter(undefined);
+        }
+        catch {
+            // stale ctx
+        }
+    };
+}

package/dist/chassis/header.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Startup header: the brand's art (the pi logo unless a brand supplies its own), centred, with
+ * the tagline if the brand has one, the model, cwd and a few OpenCode-style key hints. Shown once
+ * at the top of the transcript.
+ */
+import type { Theme } from "@earendil-works/pi-coding-agent";
+export interface HeaderInfo {
+    model: string;
+    cwd: string;
+    version: string;
+}
+export declare function renderHeader(theme: Theme, width: number, info: HeaderInfo): string[];

package/dist/chassis/header.js

@@ -0,0 +1,38 @@
+/**
+ * Startup header: the brand's art (the pi logo unless a brand supplies its own), centred, with
+ * the tagline if the brand has one, the model, cwd and a few OpenCode-style key hints. Shown once
+ * at the top of the transcript.
+ */
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { getBrand } from "./brand.js";
+import { piLogoRows } from "./home.js";
+import { safeGlyph } from "./icons.js";
+import { homeRelative, neutral, primary } from "./palette.js";
+const center = (s, w) => " ".repeat(Math.max(0, Math.floor((w - visibleWidth(s)) / 2))) + s;
+export function renderHeader(theme, width, info) {
+    const brand = getBrand();
+    if (width < 30)
+        return [primary(theme, safeGlyph(brand.glyph)) + theme.bold(" pi")];
+    const lines = [""];
+    if (brand.art) {
+        const artW = Math.max(...brand.art.map((r) => visibleWidth(r)));
+        for (const row of brand.art)
+            lines.push(center(primary(theme, row + " ".repeat(artW - visibleWidth(row))), width));
+    }
+    else {
+        for (const row of piLogoRows(theme))
+            lines.push(center(row, width));
+    }
+    lines.push("");
+    if (brand.tagline)
+        lines.push(center(theme.bold(neutral(theme, brand.tagline)), width));
+    lines.push(center(theme.fg("muted", info.model), width));
+    lines.push(center(theme.fg("dim", homeRelative(info.cwd)), width));
+    lines.push("");
+    const key = (k, d) => `${theme.fg("text", k)} ${theme.fg("dim", d)}`;
+    const hints = [key("tab", "build/plan"), key("ctrl+p", "commands"), key("ctrl+x b", "sidebar"), key("ctrl+x ?", "keys")];
+    lines.push(center(hints.join(theme.fg("dim", "   ")), width));
+    lines.push(center(theme.fg("dim", `pi v${info.version}`), width));
+    lines.push("");
+    return lines;
+}

package/dist/chassis/home.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Home screen, OpenCode style (packages/tui/src/routes/home.tsx): before the session has a
+ * message, the transcript and sidebar give way to pi's own logo, the prompt (max 75 columns), a
+ * tip, and a bottom bar with the directory, MCP count and version. layout.ts composes these with
+ * pi's own prompt; this file renders the pieces.
+ *
+ *                                  (pi logo, coral/blue/yellow)
+ *
+ *            ┃  Ask anything… "Fix a TODO in the codebase"
+ *            ┃  󰚩 BUILD   Opus 5.5  Anthropic  medium
+ *            ╹▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+ *                                           tab agents  ctrl+p commands
+ *
+ *            ● Tip Press tab to cycle between Build and Plan agents
+ *
+ *   ● Acme pi 1.1.0 · chassis 0.1.0  ~/git/pi-chassis  main  ● 6 MCP   ⟲ "chassis" 2h ago  ctrl+x r
+ */
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { UiState } from "./state.ts";
+/** OpenCode's prompt width on the home screen (tui.prompt.max_width default). */
+export declare const HOME_PROMPT_WIDTH = 75;
+/** OpenCode's home placeholders, shown as `Ask anything… "<one of these>"`. */
+export declare const PLACEHOLDERS: string[];
+/** The pi logo's pixels (pi's own components/pi-logo-animation.js): c coral, b blue, y yellow. */
+export declare const PI_PIXELS: string[];
+/**
+ * The pi logo scaled up: each logo pixel becomes `scale` columns by `scale` half-rows, drawn with
+ * half blocks, so scale 3 gives 12 columns by 6 rows (a 12 by 6 cell logo).
+ */
+export declare function piLogoRows(theme: Theme, scale?: number): string[];
+/** The logo, centred: pi's own logo (falls back to a plain "pi" when too narrow). */
+export declare function renderLogo(theme: Theme, width: number): string[];
+/** Tips, `{x}` marks the highlighted part (OpenCode: {highlight}…{/highlight}). */
+export declare const TIPS: string[];
+/** Splits a tip into plain and highlighted parts. */
+export declare function parseTip(tip: string): {
+    text: string;
+    highlight: boolean;
+}[];
+/** "● Tip …" (OpenCode: warning-coloured label, highlights in text, the rest muted), centred. */
+export declare function renderTip(theme: Theme, width: number, index: number): string[];
+/**
+ * Bottom bar (OpenCode home/footer.tsx): 1 row of padding above and below, 2 columns at the sides;
+ * the folder and branch (with the branch icon) muted and the MCP count with a coloured dot on the left; on the right, the most
+ * recent other session in this directory and the leader key that resumes it. With `piVersion`, the
+ * brand with the pi and chassis versions comes first on the same line.
+ */
+export declare function renderHomeFooter(state: UiState, theme: Theme, width: number, piVersion?: string): string[];

package/dist/chassis/home.js

@@ -0,0 +1,184 @@
+/**
+ * Home screen, OpenCode style (packages/tui/src/routes/home.tsx): before the session has a
+ * message, the transcript and sidebar give way to pi's own logo, the prompt (max 75 columns), a
+ * tip, and a bottom bar with the directory, MCP count and version. layout.ts composes these with
+ * pi's own prompt; this file renders the pieces.
+ *
+ *                                  (pi logo, coral/blue/yellow)
+ *
+ *            ┃  Ask anything… "Fix a TODO in the codebase"
+ *            ┃  󰚩 BUILD   Opus 5.5  Anthropic  medium
+ *            ╹▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+ *                                           tab agents  ctrl+p commands
+ *
+ *            ● Tip Press tab to cycle between Build and Plan agents
+ *
+ *   ● Acme pi 1.1.0 · chassis 0.1.0  ~/git/pi-chassis  main  ● 6 MCP   ⟲ "chassis" 2h ago  ctrl+x r
+ */
+import { backgroundAnsi, foregroundAnsi, rgbColor, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { widgetsFor } from "./api.js";
+import { brandLine, fmtAgo, homeRelative, sanitize } from "./palette.js";
+import { icon, leadIcon } from "./icons.js";
+import { branchGlyph, worktreeTag } from "./sidebar.js";
+import { chassisVersion } from "./version.js";
+/** OpenCode's prompt width on the home screen (tui.prompt.max_width default). */
+export const HOME_PROMPT_WIDTH = 75;
+/** OpenCode's home placeholders, shown as `Ask anything… "<one of these>"`. */
+export const PLACEHOLDERS = ["Fix a TODO in the codebase", "What is the tech stack of this project?", "Fix broken tests"];
+const center = (s, w) => {
+    const pad = Math.max(0, Math.floor((w - visibleWidth(s)) / 2));
+    return truncateToWidth(" ".repeat(pad) + s, w, "");
+};
+/** The pi logo's pixels (pi's own components/pi-logo-animation.js): c coral, b blue, y yellow. */
+export const PI_PIXELS = ["ccc.", "b.c.", "bb.y", "b..y"];
+const PI_COLORS = {
+    c: rgbColor(228, 138, 122),
+    b: rgbColor(79, 142, 179),
+    y: rgbColor(234, 182, 93),
+};
+/**
+ * The pi logo scaled up: each logo pixel becomes `scale` columns by `scale` half-rows, drawn with
+ * half blocks, so scale 3 gives 12 columns by 6 rows (a 12 by 6 cell logo).
+ */
+export function piLogoRows(theme, scale = 3) {
+    const mode = theme.getColorMode();
+    const grid = [];
+    for (const row of PI_PIXELS) {
+        const cells = [...row].flatMap((p) => Array(scale).fill(PI_COLORS[p] ? p : undefined));
+        for (let k = 0; k < scale; k++)
+            grid.push(cells);
+    }
+    const fg = (p) => foregroundAnsi(PI_COLORS[p], mode);
+    const bg = (p) => backgroundAnsi(PI_COLORS[p], mode);
+    const lines = [];
+    for (let y = 0; y < grid.length; y += 2) {
+        const top = grid[y];
+        const bottom = grid[y + 1] ?? [];
+        let line = "";
+        for (let x = 0; x < top.length; x++) {
+            const t = top[x];
+            const b = bottom[x];
+            if (!t && !b)
+                line += " ";
+            else if (t && b && t === b)
+                line += `${fg(t)}█\x1b[39m`;
+            else if (t && b)
+                line += `${fg(t)}${bg(b)}▀\x1b[39;49m`;
+            else if (t)
+                line += `${fg(t)}▀\x1b[39m`;
+            else
+                line += `${fg(b)}▄\x1b[39m`;
+        }
+        lines.push(line);
+    }
+    return lines;
+}
+/** The logo, centred: pi's own logo (falls back to a plain "pi" when too narrow). */
+export function renderLogo(theme, width) {
+    const pi = piLogoRows(theme);
+    if (width < 12)
+        return [center(theme.bold(theme.fg("text", "pi")), width)];
+    return pi.map((l) => center(l, width));
+}
+/** Tips, `{x}` marks the highlighted part (OpenCode: {highlight}…{/highlight}). */
+export const TIPS = [
+    "Press {tab} to cycle between Build and Plan agents",
+    "Press {ctrl+p} to see all available actions and commands",
+    "The leader key is {ctrl+x}; combine with other keys for quick actions",
+    "Press {ctrl+x ?} to list the leader key actions",
+    "Press {ctrl+x b} in a session to show or hide the sidebar panel",
+    "Use {/new} or {ctrl+x n} to start a fresh conversation session",
+    "Use {/resume} or {ctrl+x l} to continue an earlier session",
+    "Use {/model} or {ctrl+l} to switch between available AI models",
+    "Use {/tree} to jump back to any earlier point in the session",
+    "Use {/fork} to branch a new session from an earlier message",
+    "Use {/compact} to summarize older history and free up context",
+    "Use {/export} to save the session as HTML or JSONL",
+    "Use {/copy} or {ctrl+x y} to copy the assistant's last message",
+    "Use {/name} to give this session a recognizable name",
+    "Press {ctrl+o} to collapse or expand tool output",
+    "Press {ctrl+t} to collapse or expand thinking blocks",
+    "Press {shift+enter} to add newlines in your prompt",
+    "Press {ctrl+g} to compose messages in your external editor",
+    "Press {escape} to stop the AI mid-response",
+    "Type {@} to search for a file and add it to your prompt",
+    "Start your prompt with {!} to run a shell command",
+    "Use {/hotkeys} to show all keyboard shortcuts",
+    "Use {/reload} to reload extensions, themes and keybindings",
+];
+/** Splits a tip into plain and highlighted parts. */
+export function parseTip(tip) {
+    const parts = [];
+    const re = /\{([^}]*)\}/g;
+    let at = 0;
+    for (const m of tip.matchAll(re)) {
+        if (m.index > at)
+            parts.push({ text: tip.slice(at, m.index), highlight: false });
+        parts.push({ text: m[1], highlight: true });
+        at = m.index + m[0].length;
+    }
+    if (at < tip.length)
+        parts.push({ text: tip.slice(at), highlight: false });
+    return parts;
+}
+/** "● Tip …" (OpenCode: warning-coloured label, highlights in text, the rest muted), centred. */
+export function renderTip(theme, width, index) {
+    const tip = TIPS[((index % TIPS.length) + TIPS.length) % TIPS.length];
+    const body = parseTip(tip)
+        .map((p) => theme.fg(p.highlight ? "text" : "muted", p.text))
+        .join("");
+    const label = theme.fg("warning", "● Tip ");
+    const max = Math.min(width, HOME_PROMPT_WIDTH);
+    const lines = wrapTextWithAnsi(body, Math.max(10, max - 6));
+    const out = lines.map((l, i) => `${i === 0 ? label : "      "}${l}`);
+    // One left edge for every line, so wrapped lines stay aligned under the first.
+    const w = Math.max(...out.map((l) => visibleWidth(l)));
+    const pad = " ".repeat(Math.max(0, Math.floor((width - w) / 2)));
+    return out.map((l) => truncateToWidth(pad + l, width, ""));
+}
+/**
+ * Bottom bar (OpenCode home/footer.tsx): 1 row of padding above and below, 2 columns at the sides;
+ * the folder and branch (with the branch icon) muted and the MCP count with a coloured dot on the left; on the right, the most
+ * recent other session in this directory and the leader key that resumes it. With `piVersion`, the
+ * brand with the pi and chassis versions comes first on the same line.
+ */
+export function renderHomeFooter(state, theme, width, piVersion) {
+    const cwd = homeRelative(state.ctx?.cwd ?? process.cwd());
+    const branch = state.git?.branch;
+    // Same branch icon as the sidebar and footer: the folder, then the icon and the branch name.
+    const left = [theme.fg("muted", cwd) + (branch ? `  ${leadIcon(branchGlyph(), (s) => theme.fg("accent", s))}${theme.fg("muted", branch)}${worktreeTag(theme, state.git)}` : "")];
+    const mcp = widgetsFor("sidebar").find((w) => w.id === "mcp");
+    if (mcp) {
+        try {
+            const view = mcp.render({ theme, ctx: state.ctx, width });
+            if (view?.text) {
+                const connected = view.text.split("/")[0] ?? view.text;
+                const dot = view.level === "error" ? "error" : view.level === "warn" ? "warning" : view.level === "ok" ? "success" : "muted";
+                left.push(`${theme.fg(dot, "●")} ${theme.fg("text", `${connected} MCP`)}`);
+            }
+        }
+        catch {
+            // widget error: leave it out
+        }
+    }
+    // The brand with the pi and chassis versions leads the line.
+    if (piVersion)
+        left.unshift(brandLine(theme, piVersion, chassisVersion()));
+    const leftStr = left.join("  ");
+    // Right: the most recent other session here, with the leader key that resumes it.
+    const last = state.lastSession;
+    const inner = width - 4;
+    if (last) {
+        const tail = `${theme.fg("dim", fmtAgo(Date.now() - last.modified.getTime()))}  ${theme.fg("text", "ctrl+x r")}`;
+        const mark = icon("resume");
+        const room = inner - visibleWidth(leftStr) - 4 - visibleWidth(tail) - 4; // gap, "⟲ ", quotes, spaces
+        if (room >= 8) {
+            // The label comes from a session file, so it is cleaned here whatever put it in the state.
+            const label = truncateToWidth(sanitize(last.label) || "untitled", Math.min(40, room), "…");
+            const right = `${leadIcon(mark, (s) => theme.fg("muted", s))}${theme.fg("muted", `"${label}"`)} ${tail}`;
+            const gap = inner - visibleWidth(leftStr) - visibleWidth(right);
+            return ["", `  ${leftStr}${" ".repeat(Math.max(2, gap))}${right}`, ""];
+        }
+    }
+    return ["", `  ${truncateToWidth(leftStr, inner, "…")}`, ""];
+}