@comma-agents/tui 2.0.0-rc.0

package/dist/pages/ChatPage/ChatPage.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const REPLY_INPUT_ID = "chat-reply";
+export declare const DOUBLE_ESCAPE_WINDOW_MS = 500;

package/dist/pages/ChatPage/ChatPage.d.ts

@@ -0,0 +1,25 @@
+import type { DiscoveredStrategy } from "@comma-agents/core";
+import type { RequestPermissionMessage, RequestQuestionMessage } from "@comma-agents/daemon";
+import type React from "react";
+import type { ChatPageTheme } from "./ChatPage.theme";
+export declare function ChatPage(): React.ReactElement;
+export interface ChatPageRenderProps {
+    readonly theme: ChatPageTheme;
+    readonly messages: readonly import("../../hooks").ChatMessage[];
+    readonly chatStatus: import("../../hooks").ChatStatus;
+    readonly error: string | null;
+    readonly pendingInputAgent: string | null;
+    readonly pendingPermissionRequest: RequestPermissionMessage | null;
+    readonly pendingQuestionRequest: RequestQuestionMessage | null;
+    readonly activeStrategyPath: string | null;
+    readonly canContinue: boolean;
+    readonly strategies: readonly DiscoveredStrategy[];
+    readonly onReplySubmit: (text: string) => void;
+    readonly onSteerSubmit: (text: string) => void;
+    readonly onContinueSubmit: (strategy: DiscoveredStrategy, text: string) => void;
+    readonly onPermissionDecide: (decision: "allow" | "deny" | "allow-session" | "deny-session") => void;
+    readonly onQuestionSubmit: (response: string) => void;
+    readonly onAbort: () => void;
+    readonly onOpenSubStrategy?: (toolCallId: string) => void;
+}
+export declare function ChatPageRender({ theme, messages, chatStatus, error: _error, pendingInputAgent, pendingPermissionRequest, pendingQuestionRequest, activeStrategyPath, canContinue, onReplySubmit, onSteerSubmit, onContinueSubmit, onPermissionDecide, onQuestionSubmit, onAbort, strategies, onOpenSubStrategy, }: ChatPageRenderProps): React.ReactElement;

package/dist/pages/ChatPage/ChatPage.theme.d.ts

@@ -0,0 +1,56 @@
+import { type ThemeOf } from "../../Theme";
+/**
+ * Memoized themed style objects for the ChatPage component.
+ *
+ * Authored with `defineTheme` so the resolved shape is inferred from the
+ * value — no parallel `ChatPageTheme` interface to maintain. Consumers that
+ * need to type the resolved shape import {@link ChatPageTheme}, which is a
+ * `ReturnType` alias rather than a hand-written declaration.
+ *
+ * Note: separator styling is now owned by the `<Separator />` component, so
+ * it no longer appears here.
+ */
+export declare const useChatPageTheme: () => {
+    /** Root container (column layout, full height). */
+    root: {
+        flexDirection: "column";
+        height: string;
+    };
+    /** Header bar (strategy title). */
+    header: {
+        paddingX: number;
+        marginBottom: number;
+        /** Title text style. */
+        title: {
+            bold: boolean;
+            color: string;
+        };
+    };
+    /**
+     * Message list wrapper.
+     *
+     * `flexGrow: 1` claims leftover vertical space, but `flexShrink: 1` is
+     * equally important: when the reply `<ChatTextArea>` (re)mounts on
+     * `waiting_input`, the message area must yield rows for it. Yoga's
+     * default `flexShrink` is 0, which would otherwise keep the message
+     * area at its prior height and let the input overflow on top of the
+     * messages. `minHeight: 0` removes the automatic min-content floor so
+     * the shrink can actually take effect.
+     */
+    messageArea: {
+        flexDirection: "column";
+        flexGrow: number;
+        flexShrink: number;
+        minHeight: number;
+    };
+    /** Footer bar (keyboard shortcuts). */
+    footer: {
+        paddingX: number;
+        /** Footer text style. */
+        text: {
+            dimColor: boolean;
+        };
+    };
+};
+/** Resolved style shape returned by {@link useChatPageTheme}. */
+export type ChatPageTheme = ThemeOf<typeof useChatPageTheme>;

package/dist/pages/ChatPage/index.d.ts

@@ -0,0 +1,4 @@
+export type { ChatPageRenderProps } from "./ChatPage";
+export { ChatPage, ChatPageRender } from "./ChatPage";
+export type { ChatPageTheme } from "./ChatPage.theme";
+export { useChatPageTheme } from "./ChatPage.theme";

package/dist/pages/IntroPage/IntroPage.d.ts

@@ -0,0 +1,14 @@
+import type { DiscoveredStrategy } from "@comma-agents/core";
+import React from "react";
+import type { ChatTextAreaProps } from "../../components/ChatTextArea/ChatTextArea";
+import type { IntroPageTheme } from "./IntroPage.theme";
+export declare function IntroPage(): React.ReactElement;
+export interface IntroPageRenderProps {
+    /** Resolved theme style objects. */
+    readonly theme: IntroPageTheme;
+    /** Strategies to expose to the input's strategy switcher. */
+    readonly strategies: readonly DiscoveredStrategy[];
+    /** Submit handler — `(strategyKey, input)`. */
+    readonly onSubmit: ChatTextAreaProps["onSubmit"];
+}
+export declare function IntroPageRender({ theme, strategies, onSubmit, }: IntroPageRenderProps): React.ReactElement;

package/dist/pages/IntroPage/IntroPage.theme.d.ts

@@ -0,0 +1,13 @@
+/** Spread-ready style objects for the IntroPage component. */
+export interface IntroPageTheme {
+    /** Root container — vertically centers TitleIcon + ChatTextArea. */
+    readonly root: {
+        readonly flexDirection: "column";
+        readonly alignItems: "center";
+    };
+}
+/**
+ * Returns themed style objects for the IntroPage component.
+ * Consumes global tokens via `useTheme()`.
+ */
+export declare function useIntroPageTheme(): IntroPageTheme;

package/dist/pages/IntroPage/index.d.ts

@@ -0,0 +1,4 @@
+export type { IntroPageRenderProps } from "./IntroPage";
+export { IntroPage, IntroPageRender } from "./IntroPage";
+export type { IntroPageTheme } from "./IntroPage.theme";
+export { useIntroPageTheme } from "./IntroPage.theme";

package/dist/pages/LogsPage/LogsPage.d.ts

@@ -0,0 +1,14 @@
+import type React from "react";
+import { type LogEntry } from "../../hooks/useLogs";
+import type { LogsPageTheme } from "./LogsPage.theme";
+export type LogsPageProps = {};
+export declare function LogsPage({}: LogsPageProps): React.ReactElement;
+export interface LogsPageRenderProps {
+    /** Resolved theme style objects. */
+    readonly theme: LogsPageTheme;
+    /** The log entries to display. */
+    readonly logs: readonly LogEntry[];
+    /** Debug render ref. */
+    readonly debugRef?: React.Ref<import("ink").DOMElement>;
+}
+export declare function LogsPageRender({ theme, logs, debugRef, }: LogsPageRenderProps): React.ReactElement;

package/dist/pages/LogsPage/LogsPage.theme.d.ts

@@ -0,0 +1,49 @@
+/** Spread-ready style objects for the LogsPage component. */
+export interface LogsPageTheme {
+    /** Root container (column layout, full height). */
+    readonly root: {
+        readonly flexDirection: "column";
+        readonly flexGrow: number;
+        readonly paddingX: number;
+    };
+    /** Single log entry row. */
+    readonly logRow: {
+        readonly flexDirection: "row";
+        readonly gap: number;
+    };
+    /** Timestamp text style. */
+    readonly timestamp: {
+        readonly dimColor: boolean;
+    };
+    /** Level badge styles by level. */
+    readonly levels: {
+        readonly log: {
+            readonly color: string;
+        };
+        readonly info: {
+            readonly color: string;
+        };
+        readonly warn: {
+            readonly color: string;
+        };
+        readonly error: {
+            readonly color: string;
+        };
+        readonly debug: {
+            readonly dimColor: boolean;
+        };
+    };
+    /** Log message body. */
+    readonly messageBody: {
+        readonly wrap: "wrap";
+    };
+    /** Empty state text. */
+    readonly emptyState: {
+        readonly dimColor: boolean;
+    };
+}
+/**
+ * Returns themed style objects for the LogsPage component.
+ * Consumes global tokens via `useTheme()`.
+ */
+export declare function useLogsPageTheme(): LogsPageTheme;

package/dist/pages/LogsPage/LogsPage.utils.d.ts

@@ -0,0 +1,5 @@
+import type { LogLevel } from "../../hooks/useLogs";
+/** Format a Unix timestamp as HH:MM:SS.mmm for log display. */
+export declare function formatTimestamp(timestamp: number): string;
+/** Format a log level as a fixed-width uppercase label (e.g. "INFO "). */
+export declare function formatLevel(level: LogLevel): string;

package/dist/pages/LogsPage/index.d.ts

@@ -0,0 +1,4 @@
+export type { LogsPageProps, LogsPageRenderProps } from "./LogsPage";
+export { LogsPage, LogsPageRender } from "./LogsPage";
+export type { LogsPageTheme } from "./LogsPage.theme";
+export { useLogsPageTheme } from "./LogsPage.theme";

package/dist/pages/SpawnedStrategyPage/SpawnedStrategyPage.d.ts

@@ -0,0 +1,12 @@
+import type React from "react";
+import type { ChatMessage } from "../../hooks/useChat";
+import type { ChatPageTheme } from "../ChatPage";
+/** Read-only, live transcript for one spawned strategy invocation. */
+export declare function SpawnedStrategyPage(): React.ReactElement;
+export interface SpawnedStrategyPageRenderProps {
+    readonly theme: ChatPageTheme;
+    readonly strategyName: string;
+    readonly messages: readonly ChatMessage[];
+    readonly onOpenSubStrategy?: (toolCallId: string) => void;
+}
+export declare function SpawnedStrategyPageRender({ theme, strategyName, messages, onOpenSubStrategy, }: SpawnedStrategyPageRenderProps): React.ReactElement;

package/dist/pages/SpawnedStrategyPage/index.d.ts

@@ -0,0 +1,2 @@
+export type { SpawnedStrategyPageRenderProps } from "./SpawnedStrategyPage";
+export { SpawnedStrategyPage, SpawnedStrategyPageRender, } from "./SpawnedStrategyPage";

package/dist/run-tui.d.ts

@@ -0,0 +1,12 @@
+import type { RunTuiOptions, TuiInstance } from "./run-tui.types";
+/**
+ * Render the CommaAgents terminal interface against a daemon WebSocket URL.
+ *
+ * @param options - Initial strategy, prompt, daemon URL, and development mode.
+ * @example
+ * ```ts
+ * const tui = runTui({ strategy: "Plan", input: "Review this repo" });
+ * await tui.waitUntilExit();
+ * ```
+ */
+export declare function runTui({ daemonUrl, dev, }?: RunTuiOptions): TuiInstance;

package/dist/run-tui.types.d.ts

@@ -0,0 +1,12 @@
+import type { Instance } from "ink";
+export interface RunTuiOptions {
+    /** Strategy name to open immediately. */
+    readonly strategy?: string;
+    /** Initial input message passed to the selected strategy. */
+    readonly input?: string;
+    /** Daemon WebSocket URL. @default ws://localhost:7422/ws */
+    readonly daemonUrl?: string;
+    /** Enable the component playground. @default false */
+    readonly dev?: boolean;
+}
+export type TuiInstance = Instance;

package/dist/utils/debug.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Global debug flags for the TUI package.
+ *
+ * Flip these to `true` during development to enable visual debugging aids.
+ * All flags MUST default to `false` — never commit with flags enabled.
+ */
+/** When `true`, every Ink component briefly flashes a yellow background on re-render. */
+export declare const DEBUG_RENDER = false;
+/** When `true`, all log entries are also written to {@link LOG_FILE_PATH} on disk. */
+export declare const DEBUG_LOG = false;
+/** Absolute path to the debug log file written when {@link DEBUG_LOG} is enabled. */
+export declare const LOG_FILE_PATH: string;

package/dist/utils/mouseEscape.d.ts

@@ -0,0 +1,29 @@
+/**
+ * SGR (1006) mouse escape prefix, as forwarded by Ink's `useInput` after
+ * the leading `\x1b` has been stripped: `[<`
+ */
+export declare const SGR_MOUSE_PREFIX = "[<";
+/**
+ * Tail-fragment heuristic: a run of digits, semicolons, and an optional
+ * trailing `M`/`m`. When Ink's CSI parser consumes the `\x1b[<` opener
+ * but the rest of the event arrives on a later read, the tail looks like
+ * `5;47;30M`. Requires at least one `;` so plain numeric typing isn't
+ * swallowed.
+ */
+export declare const SGR_MOUSE_TAIL_PATTERN: RegExp;
+/**
+ * Returns `true` when `input` looks like an SGR mouse escape sequence (or a
+ * fragment thereof) and should be swallowed by text-consuming inputs before
+ * they treat the chunk as typed characters.
+ *
+ * Matches:
+ * - Complete SGR sequence: `[<BTN;COL;ROW(M|m)`
+ * - Several concatenated sequences
+ * - A partial sequence starting with `[<`
+ * - A tail fragment like `5;47;30M`
+ *
+ * Deliberately permissive: the `[<` opener and the tail shape are vanishingly
+ * unlikely in real typing, and it is better to occasionally swallow an exotic
+ * keystroke than to let mouse noise leak into a text input.
+ */
+export declare function isMouseEscape(input: string): boolean;

package/dist/utils/yogaLayout.d.ts

@@ -0,0 +1,32 @@
+import type { DOMElement } from "ink";
+/**
+ * Yoga-computed bounding box of a DOM element with absolute terminal
+ * coordinates. All values are in terminal cells (columns / rows).
+ */
+export interface BoundingBox {
+    /** Absolute row of the element's top edge (0-indexed). */
+    readonly top: number;
+    /** Absolute column of the element's left edge (0-indexed). */
+    readonly left: number;
+    /** Element width in terminal columns. */
+    readonly width: number;
+    /** Element height in terminal rows. */
+    readonly height: number;
+}
+/**
+ * Walk up the Yoga layout tree from a {@link DOMElement} to compute its
+ * absolute top/left position within Ink's terminal output.
+ *
+ * Each node's `getComputedTop()` / `getComputedLeft()` is relative to its
+ * parent, so we accumulate offsets up to the root.
+ */
+export declare function getAbsolutePosition(node: DOMElement): {
+    top: number;
+    left: number;
+};
+/**
+ * Return the absolute {@link BoundingBox} of a {@link DOMElement} by
+ * combining a Yoga tree-walk for position with the node's own computed
+ * width and height.
+ */
+export declare function getBoundingBox(node: DOMElement): BoundingBox;

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@comma-agents/tui",
+  "version": "2.0.0-rc.0",
+  "description": "Terminal UI for CommaAgents that connects to the daemon via WebSocket",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "README.md", "LICENSE"],
+  "bin": {
+    "comma-agents-tui": "dist/main.js"
+  },
+  "scripts": {
+    "start": "bun --inspect-wait=127.0.0.1:6499/tui run src/main.tsx",
+    "build": "bun run ../../scripts/build-public-package.ts tui",
+    "prepack": "bun run build",
+    "generate:frames": "bun run src/components/TitleIcon/icon-generator/generator.ts",
+    "test": "bun test --coverage",
+    "lint": "bunx @biomejs/biome check src",
+    "lint:fix": "bunx @biomejs/biome check --write src",
+    "format": "bunx @biomejs/biome format --write src",
+    "docs": "bun run --cwd docs dev",
+    "docs:build": "bun run --cwd docs build"
+  },
+  "dependencies": {
+    "@amandaghassaei/stl-parser": "1.7.0",
+    "@comma-agents/core": "2.0.0-rc.0",
+    "@comma-agents/daemon": "2.0.0-rc.0",
+    "@shikijs/cli": "^4.0.2",
+    "chalk": "5.6.2",
+    "cli-table3": "0.6.5",
+    "gl-matrix": "3.4.4",
+    "ink": "7.0.1",
+    "ink-select-input": "6.2.0",
+    "ink-spinner": "5.0.0",
+    "ink-text-input": "6.0.0",
+    "marked": "18.0.3",
+    "react": "19.2.5",
+    "react-devtools-core": "7.0.1",
+    "react-router": "^7.15.0",
+    "shiki": "4.0.2",
+    "string-width": "8.2.0",
+    "word-wrap": "1.2.5",
+    "yargs": "17.7.2"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.14",
+    "@types/yargs": "17.0.33",
+    "ink-testing-library": "4.0.0",
+    "typescript": "6.0.2"
+  },
+  "engines": { "bun": ">=1.3.0" },
+  "publishConfig": { "access": "public", "tag": "next" },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CloAI/CommaAgents.git",
+    "directory": "packages/tui"
+  },
+  "author": "CloAI",
+  "license": "MIT"
+}