@ocis/myagent-cli 0.2.0

package/dist/ui/colors.d.ts

@@ -0,0 +1,100 @@
+import type { RgbColor } from "@earendil-works/pi-tui";
+export declare function isColorEnabled(): boolean;
+export declare function rgb(r: number, g: number, b: number, text: string): string;
+export declare const style: {
+    bold: (s: string) => string;
+    dim: (s: string) => string;
+    italic: (s: string) => string;
+    underline: (s: string) => string;
+    red: (s: string) => string;
+    green: (s: string) => string;
+    yellow: (s: string) => string;
+    cyan: (s: string) => string;
+};
+/** Plan mode — orange (clearly separate hue from coding's green). */
+export declare const PLAN_COLOR: (s: string) => string;
+/** Coding mode — green, muted so the prompt frame doesn't glare. */
+export declare const CODING_COLOR: (s: string) => string;
+/** Cowork mode (general tasks) — purple. */
+export declare const COWORK_COLOR: (s: string) => string;
+/** Muted gray for panel content — kept low-contrast on the tinted panel. */
+export declare const GRAY_COLOR: (s: string) => string;
+/** Panel title gray — just a step brighter than the content gray. */
+export declare const TITLE_COLOR: (s: string) => string;
+/** Session title (the sidebar's headline) — the panel's brightest text, a
+ * step above the section-title gray so the current session reads at a glance. */
+export declare const SESSION_TITLE_COLOR: (s: string) => string;
+/** Markdown headings — bright light-blue (the CONTEXT section hue), clearly
+ * brighter than bold prose so headings read as headings. */
+export declare const headingColor: (s: string) => string;
+/** Dimmer gray for secondary/status text. */
+export declare const GRAY_DIM_COLOR: (s: string) => string;
+/** Border color for the editor, by mode. */
+export declare function modeBorder(mode: "plan" | "coding" | "cowork"): (s: string) => string;
+/** AUTO badge — amber so "running unattended" reads at a glance (ASK stays gray). */
+export declare const AUTO_COLOR: (s: string) => string;
+/** Diff line colors (rgb() no-ops when color is disabled). */
+export declare const diffAdd: (s: string) => string;
+export declare const diffDel: (s: string) => string;
+/** Section hues — title text + the tint of the full-width header band. */
+declare const SECTION_HUES: {
+    readonly context: {
+        readonly r: 125;
+        readonly g: 211;
+        readonly b: 252;
+    };
+    readonly todo: {
+        readonly r: 196;
+        readonly g: 181;
+        readonly b: 253;
+    };
+    readonly changes: {
+        readonly r: 253;
+        readonly g: 186;
+        readonly b: 116;
+    };
+};
+export type SectionName = keyof typeof SECTION_HUES;
+/** Panel tint used when the terminal background cannot be detected. */
+export declare const DEFAULT_PANEL_BG: RgbColor;
+/**
+ * Panel background: a few percent lighter than a dark terminal background,
+ * a few percent darker than a light one (so it stays visible either way).
+ */
+export declare function panelBackgroundRgb(terminalBg?: RgbColor): RgbColor;
+/**
+ * Popup background: a stronger tint than the panel so a floating card reads
+ * above the transcript. Undefined when the terminal background is unknown —
+ * the card then falls back to its border alone (never assumes dark or light).
+ */
+export declare function overlayBackgroundRgb(terminalBg?: RgbColor): RgbColor | undefined;
+/**
+ * User-message band: a subtle tint so the prompt reads as its own block.
+ * Undefined without a terminal background — the message then renders untinted.
+ */
+export declare function userMessageBackgroundRgb(terminalBg?: RgbColor): RgbColor | undefined;
+/** User-message text — softer than the terminal default so prompts don't glare. */
+export declare const userMessageColor: (s: string) => string;
+/** User-message accent bar (violet, matching the logo gradient). */
+export declare const userMessageAccent: (s: string) => string;
+/** Tool output content — one step darker than the shared content gray. */
+export declare const toolOutputColor: (s: string) => string;
+/** Apply a background color to `text` (no-op when color is disabled). */
+export declare function bgRgb(color: RgbColor, text: string): string;
+export declare function paintLine(text: string, width: number, bg?: RgbColor): string;
+/** Assistant prose tone — one step grayer than the terminal's default foreground. */
+export declare const assistantColor: (s: string) => string;
+/** Keyword hue (declarations, control flow). */
+export declare const syntaxKeyword: (s: string) => string;
+/** String / template literal hue. */
+export declare const syntaxString: (s: string) => string;
+/** Numeric literal hue. */
+export declare const syntaxNumber: (s: string) => string;
+/** Comment hue — muted and italic so it recedes. */
+export declare const syntaxComment: (s: string) => string;
+/**
+ * Foreground style for the section's accent bar — the hue muted toward the
+ * panel tint so it reads as an accent, not a highlight.
+ */
+export declare function sectionFg(name: SectionName, panel?: RgbColor): (s: string) => string;
+export {};

package/dist/ui/colors.js

@@ -0,0 +1,169 @@
+// -------------------------------------------------------------------
+// ANSI styling for the TUI.
+//
+// pi-tui components take style callbacks, so this module is the single place
+// that decides whether color is available (TTY + NO_COLOR + TERM) and how the
+// mode/approval palettes map to SGR sequences.
+// -------------------------------------------------------------------
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+const colorEnabled = Boolean(process.stdout.isTTY) &&
+    !process.env.NO_COLOR &&
+    process.env.TERM !== "dumb";
+export function isColorEnabled() {
+    return colorEnabled;
+}
+function sgr(open, close, text) {
+    if (!colorEnabled)
+        return text;
+    return `\u001b[${open}m${text}\u001b[${close}m`;
+}
+export function rgb(r, g, b, text) {
+    return sgr(`38;2;${r};${g};${b}`, "39", text);
+}
+export const style = {
+    bold: (s) => sgr("1", "22", s),
+    dim: (s) => sgr("2", "22", s),
+    italic: (s) => sgr("3", "23", s),
+    underline: (s) => sgr("4", "24", s),
+    red: (s) => sgr("31", "39", s),
+    green: (s) => sgr("32", "39", s),
+    yellow: (s) => sgr("33", "39", s),
+    cyan: (s) => sgr("36", "39", s),
+};
+// ---------------------------------------------------------------------------
+// Semantic palettes
+// ---------------------------------------------------------------------------
+/** Plan mode — orange (clearly separate hue from coding's green). */
+export const PLAN_COLOR = (s) => rgb(0xf9, 0x73, 0x16, s);
+/** Coding mode — green, muted so the prompt frame doesn't glare. */
+export const CODING_COLOR = (s) => rgb(0x5f, 0xbe, 0x82, s);
+/** Cowork mode (general tasks) — purple. */
+export const COWORK_COLOR = (s) => rgb(0xa7, 0x8b, 0xfa, s);
+/** Muted gray for panel content — kept low-contrast on the tinted panel. */
+export const GRAY_COLOR = (s) => rgb(0x7f, 0x87, 0x94, s);
+/** Panel title gray — just a step brighter than the content gray. */
+export const TITLE_COLOR = (s) => rgb(0x9a, 0xa2, 0xae, s);
+/** Session title (the sidebar's headline) — the panel's brightest text, a
+ * step above the section-title gray so the current session reads at a glance. */
+export const SESSION_TITLE_COLOR = (s) => rgb(0xc2, 0xc8, 0xd2, s);
+/** Markdown headings — bright light-blue (the CONTEXT section hue), clearly
+ * brighter than bold prose so headings read as headings. */
+export const headingColor = (s) => rgb(0x7d, 0xd3, 0xfc, s);
+/** Dimmer gray for secondary/status text. */
+export const GRAY_DIM_COLOR = (s) => rgb(0x59, 0x61, 0x6e, s);
+/** Border color for the editor, by mode. */
+export function modeBorder(mode) {
+    if (mode === "plan")
+        return PLAN_COLOR;
+    return mode === "coding" ? CODING_COLOR : COWORK_COLOR;
+}
+/** AUTO badge — amber so "running unattended" reads at a glance (ASK stays gray). */
+export const AUTO_COLOR = (s) => rgb(0xf9, 0xc7, 0x4a, s);
+/** Diff line colors (rgb() no-ops when color is disabled). */
+export const diffAdd = (s) => rgb(0x4a, 0xde, 0x80, s);
+export const diffDel = (s) => rgb(0xf8, 0x71, 0x71, s);
+// ---------------------------------------------------------------------------
+// Panel + sidebar sections
+// ---------------------------------------------------------------------------
+/** Section hues — title text + the tint of the full-width header band. */
+const SECTION_HUES = {
+    context: { r: 0x7d, g: 0xd3, b: 0xfc },
+    todo: { r: 0xc4, g: 0xb5, b: 0xfd },
+    changes: { r: 0xfd, g: 0xba, b: 0x74 },
+};
+/** Panel tint used when the terminal background cannot be detected. */
+export const DEFAULT_PANEL_BG = { r: 0x22, g: 0x26, b: 0x2e };
+function clamp255(n) {
+    return Math.max(0, Math.min(255, Math.round(n)));
+}
+function mix(a, b, weight) {
+    return {
+        r: clamp255(a.r + (b.r - a.r) * weight),
+        g: clamp255(a.g + (b.g - a.g) * weight),
+        b: clamp255(a.b + (b.b - a.b) * weight),
+    };
+}
+function luminance(color) {
+    return (0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b) / 255;
+}
+/** Whichever end of the scale a terminal background tints toward. */
+function contrastTarget(terminalBg) {
+    return luminance(terminalBg) < 0.5
+        ? { r: 0xff, g: 0xff, b: 0xff }
+        : { r: 0x00, g: 0x00, b: 0x00 };
+}
+/** Mix the terminal background toward its contrast target by `ratio`. */
+function tint(terminalBg, ratio) {
+    return terminalBg ? mix(terminalBg, contrastTarget(terminalBg), ratio) : undefined;
+}
+/**
+ * Panel background: a few percent lighter than a dark terminal background,
+ * a few percent darker than a light one (so it stays visible either way).
+ */
+export function panelBackgroundRgb(terminalBg) {
+    return tint(terminalBg, 0.06) ?? DEFAULT_PANEL_BG;
+}
+/**
+ * Popup background: a stronger tint than the panel so a floating card reads
+ * above the transcript. Undefined when the terminal background is unknown —
+ * the card then falls back to its border alone (never assumes dark or light).
+ */
+export function overlayBackgroundRgb(terminalBg) {
+    return tint(terminalBg, 0.12);
+}
+/**
+ * User-message band: a subtle tint so the prompt reads as its own block.
+ * Undefined without a terminal background — the message then renders untinted.
+ */
+export function userMessageBackgroundRgb(terminalBg) {
+    return tint(terminalBg, 0.06);
+}
+/** User-message text — softer than the terminal default so prompts don't glare. */
+export const userMessageColor = (s) => rgb(0xc2, 0xc8, 0xd2, s);
+/** User-message accent bar (violet, matching the logo gradient). */
+export const userMessageAccent = (s) => rgb(0xc0, 0x84, 0xfc, s);
+/** Tool output content — one step darker than the shared content gray. */
+export const toolOutputColor = (s) => rgb(0x6b, 0x73, 0x80, s);
+/** Apply a background color to `text` (no-op when color is disabled). */
+export function bgRgb(color, text) {
+    return sgr(`48;2;${color.r};${color.g};${color.b}`, "49", text);
+}
+/**
+ * Clamp `text` to `width` and, when `bg` is set, tint the full line —
+ * re-opening the tint after any inner reset so the band stays solid.
+ *
+ * Inner resets come in two forms: the generic `\u001b[0m` (pasted content)
+ * and the paired `\u001b[49m` this module's own bgRgb emits as its close
+ * code (nested paintLine output). Splitting on both keeps the band solid
+ * either way; the join normalizes to the generic reset.
+ */
+const INNER_RESET = /\u001b\[(?:0|49)m/g;
+export function paintLine(text, width, bg) {
+    const safeWidth = Math.max(1, width);
+    const clipped = truncateToWidth(text, safeWidth, "…", true);
+    const padded = clipped + " ".repeat(Math.max(0, safeWidth - visibleWidth(clipped)));
+    if (!bg)
+        return padded;
+    return padded.split(INNER_RESET).map((segment) => bgRgb(bg, segment)).join("\u001b[0m");
+}
+/** Assistant prose tone — one step grayer than the terminal's default foreground. */
+export const assistantColor = (s) => rgb(0xb1, 0xb8, 0xc4, s);
+// ---------------------------------------------------------------------------
+// Syntax highlighting (tool output)
+// ---------------------------------------------------------------------------
+/** Keyword hue (declarations, control flow). */
+export const syntaxKeyword = (s) => rgb(0xc6, 0x78, 0xdd, s);
+/** String / template literal hue. */
+export const syntaxString = (s) => rgb(0x98, 0xc3, 0x79, s);
+/** Numeric literal hue. */
+export const syntaxNumber = (s) => rgb(0xd1, 0x9a, 0x66, s);
+/** Comment hue — muted and italic so it recedes. */
+export const syntaxComment = (s) => style.italic(rgb(0x5c, 0x63, 0x70, s));
+/**
+ * Foreground style for the section's accent bar — the hue muted toward the
+ * panel tint so it reads as an accent, not a highlight.
+ */
+export function sectionFg(name, panel = DEFAULT_PANEL_BG) {
+    const color = mix(SECTION_HUES[name], panel, 0.25);
+    return (s) => rgb(color.r, color.g, color.b, s);
+}

package/dist/ui/components.d.ts

@@ -0,0 +1,267 @@
+import type { Component, EditorTheme, RgbColor, SelectList, TUI, TuiMouseEvent, TuiMouseEventResult } from "@earendil-works/pi-tui";
+import { Editor } from "@earendil-works/pi-tui";
+import type { AgentMode } from "../agent/modes.js";
+import type { ApprovalMode } from "../approval/policy.js";
+import type { TodoStore } from "../agent/todo.js";
+import type { GitFileChange, GitStatus } from "../git/status.js";
+import type { AgentUsage } from "../protocol/types.js";
+import type { ApprovalRequest } from "../tools/types.js";
+/**
+ * Messages submitted while a run is active, floating between the transcript
+ * and the prompt editor. A steered message is NOT part of the conversation
+ * until the server takes it — until then it stays here, one dim preview line
+ * per pending message, and is released (into the transcript) on acceptance
+ * or when a re-queued follow-up turn actually starts.
+ */
+export declare class QueuedMessagesComponent implements Component {
+    private entries;
+    invalidate(): void;
+    add(text: string): void;
+    /** Release the oldest entry with exactly this text (FIFO — steering the
+     *  same text twice releases one float per acceptance). */
+    release(text: string): void;
+    render(width: number): string[];
+}
+/**
+ * A submitted prompt: a leading blank row (margin from the previous message),
+ * a violet block bar down the left edge, and a content-sized tinted bubble
+ * (with one row of vertical padding) when the terminal background is known.
+ */
+export declare class UserMessageComponent implements Component {
+    private readonly text;
+    private readonly queued;
+    private readonly options;
+    constructor(text: string, queued: boolean, options?: {
+        bg?: () => RgbColor | undefined;
+    });
+    invalidate(): void;
+    render(width: number): string[];
+}
+export declare class AssistantMessageComponent implements Component {
+    private readonly md;
+    /** Raw stream (unsanitized) — the sanitizing pass needs the whole text. */
+    private raw;
+    private text;
+    constructor();
+    append(delta: string): void;
+    get content(): string;
+    render(width: number): string[];
+    invalidate(): void;
+}
+export declare class ReasoningBlockComponent implements Component {
+    private raw;
+    private text;
+    expanded: boolean;
+    append(delta: string): void;
+    toggle(): void;
+    get hasContent(): boolean;
+    invalidate(): void;
+    render(width: number): string[];
+}
+export declare class ToolCallComponent implements Component {
+    readonly name: string;
+    private readonly args;
+    status: "running" | "done" | "error";
+    expanded: boolean;
+    private output;
+    private bodyCache?;
+    constructor(name: string, args: Record<string, unknown>);
+    setResult(output: string, isError: boolean): void;
+    toggle(): void;
+    /** The whole row is the button: press is consumed, the release click toggles. */
+    handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined;
+    invalidate(): void;
+    /** Tool-specific expanded body, cached per width/result (renders on spinner ticks). */
+    private body;
+    render(width: number): string[];
+}
+export declare class NoticeComponent implements Component {
+    private readonly text;
+    private readonly level;
+    constructor(text: string, level: "info" | "error" | "warn");
+    invalidate(): void;
+    render(width: number): string[];
+}
+export interface SidebarState {
+    title: string | null;
+    usage: AgentUsage | null;
+    git: GitStatus;
+}
+/** A clickable row in the panel (content-space line index). */
+export type SidebarTarget = {
+    type: "file";
+    file: GitFileChange;
+} | {
+    type: "toggle-changes";
+};
+export interface SidebarOptions {
+    todos: TodoStore;
+    /**
+     * Viewport height of the enclosing ScrollView. Short content is padded to it
+     * so the panel background reaches the bottom of the column (never padded
+     * beyond it, which would break scrolling for long content).
+     */
+    viewportHeight?: () => number;
+    /**
+     * Panel background, resolved asynchronously from the terminal's OSC 11
+     * reply. Until it exists (or when color is unavailable) no background is
+     * painted.
+     */
+    panelBg?: () => RgbColor | undefined;
+}
+export declare class SidebarComponent implements Component {
+    state: SidebarState;
+    private readonly opts;
+    private expanded;
+    private readonly targets;
+    constructor(state: SidebarState, opts: SidebarOptions);
+    invalidate(): void;
+    toggleChanges(): void;
+    /** What a click at content line `y` hits (coordinates include scrollTop). */
+    targetAt(y: number): SidebarTarget | undefined;
+    render(width: number): string[];
+}
+/**
+ * Editor wrapped in a rounded four-sided frame whose bottom edge carries the
+ * mode badge (bold, same color as the frame) followed by the model and
+ * thinking level. The content is inset by `paddingX`; the frame has no
+ * background of its own.
+ */
+/** Clickable status chips on the prompt frame's bottom edge. */
+export type EditorChip = "mode" | "model" | "thinking";
+export declare class PromptEditor extends Editor {
+    mode: AgentMode;
+    model: string | null;
+    thinking: string | undefined;
+    /** Fired when a bottom-edge chip (mode / model / thinking) is clicked. */
+    onChipClick?: (chip: EditorChip) => void;
+    /** Chip column extents from the last bottom-edge render, for hit-testing. */
+    private chipRanges;
+    /** Bottom-edge row in this component's coordinates (-1 = no bottom edge). */
+    private bottomBorderRow;
+    /**
+     * The exact bottom-edge line rendered this frame. render() locates the
+     * edge by identity against it — scanning for a "╰" substring would misfire
+     * on user content that happens to contain the border glyph.
+     */
+    private lastBottomBorder;
+    constructor(tui: TUI, theme: EditorTheme, mode: AgentMode, thinking?: string);
+    protected renderTopBorder(width: number, _hiddenLineCount: number): string;
+    /**
+     * Alt+Enter inserts a newline exactly like Shift+Enter — the base editor
+     * only knows Shift+Enter/Ctrl+J, but terminals send Alt+Enter as ESC+CR
+     * (legacy) or a Kitty/modifyOtherKeys sequence.
+     */
+    handleInput(data: string): void;
+    protected renderBottomBorder(width: number, hiddenLineCount: number): string;
+    /**
+     * Mouse dispatch for the framed editor. The bottom edge carries the
+     * mode/model/thinking chips; every other event is translated into the base
+     * editor's coordinate system — our frame inserts a padding row below the
+     * top edge and above the bottom edge, and the side borders shift text rows
+     * one column right, so without the shift the base's cursor/autocomplete
+     * hit-testing lands one row and one column off.
+     */
+    handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined;
+    render(width: number): string[];
+}
+export interface FooterState {
+    approval: ApprovalMode;
+    workspace: string;
+    branch: string | null;
+    usage: AgentUsage | null;
+    runState: "idle" | "running" | "stopping";
+    spinnerFrame: number;
+    /** Set after the first idle Ctrl+C: the next one inside the window exits. */
+    pendingQuit?: boolean;
+}
+export declare class FooterComponent implements Component {
+    state: FooterState;
+    private readonly onApprovalClick?;
+    /** Fired when the ASK/AUTO badge is clicked. */
+    constructor(state: FooterState, onApprovalClick?: (() => void) | undefined);
+    invalidate(): void;
+    handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined;
+    render(width: number): string[];
+    private compactPath;
+}
+/** Chrome shared by the popup cards: background tint + bottom-edge hint. */
+export interface PopupCardOptions {
+    /** Live background tint; undefined leaves the card unfilled. */
+    bg?: () => RgbColor | undefined;
+    /** Dim hint rendered in the bottom edge. */
+    hint?: string;
+}
+/**
+ * A pending approval, floating between the transcript and the prompt (NOT a
+ * modal overlay — the editor keeps focus, so typing stays possible while the
+ * user decides). Answered with ctrl+y / ctrl+n from the app's global key
+ * listener; the card itself is render-only.
+ */
+export declare class ApprovalFloatComponent implements Component {
+    private request;
+    invalidate(): void;
+    /** Show (or clear) the approval being decided. */
+    set(request: ApprovalRequest | null): void;
+    render(width: number): string[];
+}
+export declare class InfoOverlay implements Component {
+    private readonly title;
+    private readonly body;
+    private readonly close;
+    private readonly options;
+    constructor(title: string, body: string[], close: () => void, options?: PopupCardOptions);
+    handleInput(data: string): void;
+    invalidate(): void;
+    render(width: number): string[];
+}
+/**
+ * Scrollable popup for a single file's unified diff. Overlays are clipped, not
+ * scrolled by the framework, so the window is managed here: the popup renders
+ * exactly `viewportHeight() + 2` lines (top edge, body, bottom edge) and moves the
+ * window with the arrow/page keys.
+ */
+export declare class DiffOverlay implements Component {
+    private readonly title;
+    private readonly options;
+    private scrollTop;
+    private mode;
+    private rowCount;
+    /** Content rows shown in the viewer (file headers and hunk headers hidden). */
+    private readonly visible;
+    private cache?;
+    constructor(title: string, diff: string, options: {
+        /** Live body-row budget, re-read every render so the card refits on resize. */
+        viewportHeight: () => number;
+        truncated: boolean;
+        close: () => void;
+    });
+    private viewHeight;
+    private get maxTop();
+    private scrollBy;
+    /** Paint one diff line, using the same palette as the transcript. */
+    private paint;
+    private buildRows;
+    private rows;
+    handleInput(data: string): void;
+    /** The mouse wheel scrolls the diff like the arrow keys do. */
+    handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined;
+    invalidate(): void;
+    render(width: number): string[];
+}
+/**
+ * Select list inside a popup card, usable as a focused overlay: input and
+ * mouse events are forwarded to the inner SelectList (a bare Container would
+ * swallow them), with the card's top edge and padding row skipped in the
+ * mouse coordinates (renderCard: edge, blank, then list rows).
+ */
+export declare class SelectOverlay implements Component {
+    private readonly title;
+    private readonly list;
+    private readonly options;
+    constructor(title: string, list: SelectList, options?: PopupCardOptions);
+    handleInput(data: string): void;
+    handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined;
+    invalidate(): void;
+    render(width: number): string[];
+}