@agentick/tui 0.4.0 → 0.6.0

package/README.md

@@ -54,6 +54,16 @@ import { MyDashboard } from "./dashboard.js";
 createTUI({ app, ui: MyDashboard }).start();
 ```
 
+### Alternate Screen
+
+Use the terminal's alternate screen buffer to avoid polluting scrollback:
+
+```typescript
+createTUI({ app, alternateScreen: true }).start();
+```
+
+When enabled, the TUI takes over the alternate screen on start and restores the normal screen on exit. This prevents terminal scrollbar confusion where native scrollback doesn't interact with Ink's rendering.
+
 ## CLI
 
 The `agentick-tui` binary launches a TUI from the command line.
@@ -104,20 +114,22 @@ Returns `{ start(): Promise<void> }`.
 
 **Local options:**
 
-| Option      | Type           | Description                           |
-| ----------- | -------------- | ------------------------------------- |
-| `app`       | `App`          | Agentick App instance                 |
-| `sessionId` | `string`       | Session ID (default: `"main"`)        |
-| `ui`        | `TUIComponent` | Custom UI component (default: `Chat`) |
+| Option            | Type           | Description                                  |
+| ----------------- | -------------- | -------------------------------------------- |
+| `app`             | `App`          | Agentick App instance                        |
+| `sessionId`       | `string`       | Session ID (default: `"main"`)               |
+| `ui`              | `TUIComponent` | Custom UI component (default: `Chat`)        |
+| `alternateScreen` | `boolean`      | Use alternate screen buffer (default: false) |
 
 **Remote options:**
 
-| Option      | Type           | Description                           |
-| ----------- | -------------- | ------------------------------------- |
-| `url`       | `string`       | Gateway URL                           |
-| `token`     | `string`       | Auth token                            |
-| `sessionId` | `string`       | Session ID (default: `"main"`)        |
-| `ui`        | `TUIComponent` | Custom UI component (default: `Chat`) |
+| Option            | Type           | Description                                  |
+| ----------------- | -------------- | -------------------------------------------- |
+| `url`             | `string`       | Gateway URL                                  |
+| `token`           | `string`       | Auth token                                   |
+| `sessionId`       | `string`       | Session ID (default: `"main"`)               |
+| `ui`              | `TUIComponent` | Custom UI component (default: `Chat`)        |
+| `alternateScreen` | `boolean`      | Use alternate screen buffer (default: false) |
 
 ### TUIComponent
 
@@ -136,15 +148,185 @@ const MyUI: TUIComponent = ({ sessionId }) => {
 
 All components are exported for building custom UIs.
 
-| Component                | Purpose                                           |
-| ------------------------ | ------------------------------------------------- |
-| `Chat`                   | Default chat UI (built-in)                        |
-| `MessageList`            | Completed messages (Ink `<Static>`)               |
-| `StreamingMessage`       | Live streaming response with cursor               |
-| `ToolCallIndicator`      | Spinner during tool execution                     |
-| `ToolConfirmationPrompt` | Y/N/A prompt for tools with `requireConfirmation` |
-| `ErrorDisplay`           | Error box with optional dismiss                   |
-| `InputBar`               | Text input, disabled while streaming              |
+| Component                | Purpose                                             |
+| ------------------------ | --------------------------------------------------- |
+| `Chat`                   | Default conversational interface (block rendering)  |
+| `MessageList`            | Prop-driven message display (Static + in-progress)  |
+| `StreamingMessage`       | Live streaming response with cursor                 |
+| `ToolCallIndicator`      | Spinner during tool execution                       |
+| `ToolConfirmationPrompt` | Y/N/A prompt for tools with `requireConfirmation`   |
+| `DiffView`               | Side-by-side diff display for file changes          |
+| `ErrorDisplay`           | Error box with optional dismiss                     |
+| `InputBar`               | Visual-only text input (value + cursor from parent) |
+| `CompletionPicker`       | Windowed completion list (emerald-themed)           |
+| `StatusBar`              | Container with context provider and layout          |
+| `DefaultStatusBar`       | Pre-composed status bar with responsive layout      |
+
+**Status bar widgets** (use standalone or inside `<StatusBar>`):
+
+| Widget               | Purpose                                     |
+| -------------------- | ------------------------------------------- |
+| `ModelInfo`          | Model name/id display                       |
+| `TokenCount`         | Formatted token count (cumulative or tick)  |
+| `TickCount`          | Current execution tick number               |
+| `ContextUtilization` | Utilization % with color thresholds         |
+| `StateIndicator`     | Mode label with color (idle/streaming/etc.) |
+| `KeyboardHints`      | Contextual keyboard shortcut hints          |
+| `BrandLabel`         | Styled app name                             |
+| `Separator`          | Visual divider between segments             |
+
+### InputBar
+
+Visual-only input display. Renders the current value and cursor position — all keystroke handling lives in the parent via `useLineEditor`.
+
+```typescript
+import { InputBar, useLineEditor } from "@agentick/tui";
+
+const editor = useLineEditor({ onSubmit: handleSubmit });
+
+<InputBar
+  value={editor.value}
+  cursor={editor.cursor}
+  isActive={chatMode === "idle"}
+  placeholder="Type a message..."
+/>
+```
+
+### useLineEditor
+
+Ink-specific wrapper around `@agentick/client`'s `LineEditor` class. Provides
+readline-quality editing with cursor movement, history, kill/yank, and word
+navigation.
+
+```typescript
+const editor = useLineEditor({
+  onSubmit: (text) => send(text),
+});
+
+// In your centralized useInput handler:
+if (chatMode === "idle") {
+  editor.handleInput(input, key);
+}
+```
+
+Returns `{ value, cursor, completion, completedRanges, handleInput, setValue, clear, editor }`. Does not call `useInput` internally — the parent routes keystrokes to `editor.handleInput` when appropriate.
+
+The `editor` property exposes the raw `LineEditor` instance for registering completion sources. The `completion` property is the current `CompletionState | null` — pass it to `CompletionPicker` to render the autocomplete picker.
+
+For framework-agnostic usage (web, Angular), use `LineEditor` from `@agentick/client` directly, or `useLineEditor` from `@agentick/react`.
+
+### CompletionPicker
+
+Renders a windowed completion list from `CompletionState`. Emerald-themed border, inverse highlight for the selected item, loading spinner, and "No matches" empty state.
+
+```typescript
+import { CompletionPicker } from "@agentick/tui";
+
+{editor.completion && <CompletionPicker completion={editor.completion} />}
+```
+
+### Slash Commands
+
+`useSlashCommands` provides a command registry with dispatch, dynamic add/remove, and completion integration.
+
+```typescript
+import {
+  useSlashCommands,
+  helpCommand,
+  exitCommand,
+  createCommandCompletionSource,
+} from "@agentick/tui";
+
+const { dispatch, commands } = useSlashCommands([helpCommand(), exitCommand(exit)], {
+  sessionId,
+  send,
+  abort,
+  output: console.log,
+});
+
+// Wire into completion
+useEffect(() => {
+  return editor.editor.registerCompletion(createCommandCompletionSource(commands));
+}, [editor.editor, commands]);
+```
+
+See [`COMPLETION.md`](../client/COMPLETION.md) for the full completion system reference.
+
+### handleConfirmationKey
+
+Input routing utility for tool confirmation prompts. Maps `y`/`n`/`a` keys to confirmation responses.
+
+```typescript
+import { handleConfirmationKey } from "@agentick/tui";
+
+if (chatMode === "confirming_tool") {
+  handleConfirmationKey(input, respondToConfirmation);
+}
+```
+
+### MessageList
+
+Prop-driven message display. Accepts `messages` from `useChat` and splits them into committed (Ink `<Static>`) and in-progress (regular render) based on `isExecuting`.
+
+```typescript
+<MessageList messages={messages} isExecuting={isExecuting} />
+```
+
+`Chat` uses `useChat({ renderMode: "block" })` so messages appear block-at-a-time as content completes, rather than waiting for the entire execution to finish.
+
+### StatusBar
+
+`<StatusBar>` is a container that calls `useContextInfo` and `useStreamingText` once, provides the data via React context, and renders a left/right flexbox layout with a top border.
+
+Widgets read from context automatically when inside a `<StatusBar>`, or accept explicit props when used standalone.
+
+**Default** — `Chat` renders `<DefaultStatusBar>` automatically:
+
+```
+Enter send | Ctrl+C exit                          GPT-4o | 6.2K 35% | idle
+```
+
+The default is responsive — hides token/utilization info in narrow terminals.
+
+**Custom** — compose your own from widgets:
+
+```typescript
+import { StatusBar, BrandLabel, ModelInfo, TokenCount,
+  ContextUtilization, StateIndicator, Separator, KeyboardHints } from "@agentick/tui";
+
+<StatusBar sessionId={sessionId} mode={chatMode}
+  left={<KeyboardHints hints={{ idle: [{ key: "Tab", action: "complete" }] }} />}
+  right={<>
+    <BrandLabel name="myapp" />
+    <Separator />
+    <ModelInfo />
+    <Separator />
+    <TokenCount cumulative />
+    <Separator />
+    <ContextUtilization />
+    <Separator />
+    <StateIndicator labels={{ streaming: "active" }} />
+  </>}
+/>
+```
+
+**Chat integration** — control the status bar via the `statusBar` prop:
+
+```typescript
+// Default (renders DefaultStatusBar)
+<Chat sessionId="main" />
+
+// Disabled
+<Chat sessionId="main" statusBar={false} />
+
+// Render prop — receives chat state
+<Chat sessionId="main" statusBar={({ mode, sessionId }) => (
+  <StatusBar sessionId={sessionId} mode={mode}
+    left={<KeyboardHints />}
+    right={<StateIndicator />}
+  />
+)} />
+```
 
 ## Architecture
 

package/dist/commands-context.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { SlashCommand } from "./commands.js";
+interface CommandsProviderProps {
+    commands: (SlashCommand | SlashCommand[])[];
+    children: ReactNode;
+}
+export declare function CommandsProvider({ commands, children }: CommandsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useCommandsConfig(): (SlashCommand | SlashCommand[])[];
+export {};
+//# sourceMappingURL=commands-context.d.ts.map

package/dist/commands-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands-context.d.ts","sourceRoot":"","sources":["../src/commands-context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAIlD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,CAAC,YAAY,GAAG,YAAY,EAAE,CAAC,EAAE,CAAC;IAC5C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAI7E;AAED,wBAAgB,iBAAiB,IAAI,CAAC,YAAY,GAAG,YAAY,EAAE,CAAC,EAAE,CAErE"}

package/dist/commands-context.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const CommandsConfigContext = createContext([]);
+export function CommandsProvider({ commands, children }) {
+    return (_jsx(CommandsConfigContext.Provider, { value: commands, children: children }));
+}
+export function useCommandsConfig() {
+    return useContext(CommandsConfigContext);
+}
+//# sourceMappingURL=commands-context.js.map

package/dist/commands-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands-context.js","sourceRoot":"","sources":["../src/commands-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAIlD,MAAM,qBAAqB,GAAG,aAAa,CAAoC,EAAE,CAAC,CAAC;AAOnF,MAAM,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAyB;IAC5E,OAAO,CACL,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAAG,QAAQ,GAAkC,CAC7F,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC3C,CAAC"}

package/dist/commands.d.ts

@@ -0,0 +1,30 @@
+import type { CompletionSource } from "@agentick/client";
+export interface SlashCommand {
+    name: string;
+    description: string;
+    aliases?: string[];
+    args?: string;
+    handler: (args: string, ctx: CommandContext) => void | Promise<void>;
+}
+export interface CommandContext {
+    sessionId: string;
+    send: (...args: any[]) => any;
+    abort: () => void;
+    output: (text: string) => void;
+    addCommand: (cmd: SlashCommand) => void;
+    removeCommand: (name: string) => void;
+}
+export declare function helpCommand(): SlashCommand;
+export declare function clearCommand(onClear: () => void): SlashCommand;
+export declare function exitCommand(onExit: () => void): SlashCommand;
+export declare function loadCommand(): SlashCommand;
+export declare function createCommandCompletionSource(commands: SlashCommand[]): CompletionSource;
+interface UseSlashCommandsResult {
+    dispatch: (input: string) => boolean;
+    commands: SlashCommand[];
+    addCommand: (cmd: SlashCommand) => void;
+    removeCommand: (name: string) => void;
+}
+export declare function useSlashCommands(initial: (SlashCommand | SlashCommand[])[], ctx: Omit<CommandContext, "addCommand" | "removeCommand">): UseSlashCommandsResult;
+export {};
+//# sourceMappingURL=commands.d.ts.map

package/dist/commands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands.d.ts","sourceRoot":"","sources":["../src/commands.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAkB,MAAM,kBAAkB,CAAC;AAIzE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,cAAc,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtE;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAElB,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,UAAU,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAID,wBAAgB,WAAW,IAAI,YAAY,CAS1C;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,YAAY,CAQ9D;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,IAAI,GAAG,YAAY,CAS5D;AAED,wBAAgB,WAAW,IAAI,YAAY,CAkC1C;AAuBD,wBAAgB,6BAA6B,CAAC,QAAQ,EAAE,YAAY,EAAE,GAAG,gBAAgB,CAmBxF;AAID,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACrC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,UAAU,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,CAAC,YAAY,GAAG,YAAY,EAAE,CAAC,EAAE,EAC1C,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,eAAe,CAAC,GACxD,sBAAsB,CAmFxB"}

package/dist/commands.js

@@ -0,0 +1,163 @@
+import { useState, useCallback, useMemo, useRef } from "react";
+// --- Built-in command factories ---
+export function helpCommand() {
+    return {
+        name: "help",
+        description: "Show available commands",
+        handler: (_args, ctx) => {
+            // Access commands via closure — the registry ref is captured in useSlashCommands
+            ctx.output("Unknown command registry — /help is wired internally");
+        },
+    };
+}
+export function clearCommand(onClear) {
+    return {
+        name: "clear",
+        description: "Clear message history",
+        handler: () => {
+            onClear();
+        },
+    };
+}
+export function exitCommand(onExit) {
+    return {
+        name: "exit",
+        description: "Exit",
+        aliases: ["quit"],
+        handler: () => {
+            onExit();
+        },
+    };
+}
+export function loadCommand() {
+    return {
+        name: "load",
+        description: "Load a command from a file",
+        args: "<path>",
+        handler: async (args, ctx) => {
+            const filePath = args.trim();
+            if (!filePath) {
+                ctx.output("Usage: /load <path>");
+                return;
+            }
+            const resolved = filePath.startsWith("/") ? filePath : `${process.cwd()}/${filePath}`;
+            try {
+                const mod = await import(resolved);
+                const cmd = mod.command ?? mod.default;
+                if (!cmd || !cmd.name || !cmd.description || !cmd.handler) {
+                    ctx.output(`Invalid command file: expected export const command: SlashCommand or export default`);
+                    return;
+                }
+                ctx.addCommand(cmd);
+                ctx.output(`Loaded /${cmd.name} — ${cmd.description}`);
+            }
+            catch (err) {
+                ctx.output(`Failed to load ${resolved}: ${err instanceof Error ? err.message : String(err)}`);
+            }
+        },
+    };
+}
+// --- Help formatting ---
+function formatHelp(commands) {
+    const sorted = [...commands].sort((a, b) => a.name.localeCompare(b.name));
+    const lines = [];
+    for (const cmd of sorted) {
+        const nameWithArgs = cmd.args ? `/${cmd.name} ${cmd.args}` : `/${cmd.name}`;
+        const aliasStr = cmd.aliases && cmd.aliases.length > 0
+            ? ` (aliases: ${cmd.aliases.map((a) => `/${a}`).join(", ")})`
+            : "";
+        const padded = nameWithArgs.padEnd(20);
+        lines.push(`  ${padded}${cmd.description}${aliasStr}`);
+    }
+    return lines.join("\n");
+}
+// --- Completion source factory ---
+export function createCommandCompletionSource(commands) {
+    return {
+        id: "command",
+        trigger: { type: "char", char: "/" },
+        shouldActivate: (_value, anchor) => anchor === 0,
+        resolve: (query) => {
+            const items = [];
+            for (const cmd of commands) {
+                if (!query || cmd.name.startsWith(query)) {
+                    items.push({
+                        label: cmd.name,
+                        value: `/${cmd.name}`,
+                        description: cmd.description,
+                    });
+                }
+            }
+            return items;
+        },
+    };
+}
+export function useSlashCommands(initial, ctx) {
+    const [registry, setRegistry] = useState(() => {
+        const map = new Map();
+        for (const item of initial.flat()) {
+            map.set(item.name, item);
+        }
+        return map;
+    });
+    // Keep a ref so dispatch always sees current registry without re-creating the callback
+    const registryRef = useRef(registry);
+    registryRef.current = registry;
+    const addCommand = useCallback((cmd) => {
+        setRegistry((prev) => {
+            const next = new Map(prev);
+            next.set(cmd.name, cmd);
+            return next;
+        });
+    }, []);
+    const removeCommand = useCallback((name) => {
+        setRegistry((prev) => {
+            const next = new Map(prev);
+            next.delete(name);
+            return next;
+        });
+    }, []);
+    const dispatch = useCallback((input) => {
+        if (!input.startsWith("/"))
+            return false;
+        const spaceIdx = input.indexOf(" ");
+        const name = spaceIdx === -1 ? input.slice(1) : input.slice(1, spaceIdx);
+        const args = spaceIdx === -1 ? "" : input.slice(spaceIdx + 1);
+        const reg = registryRef.current;
+        // Direct name match
+        let cmd = reg.get(name);
+        // Alias match
+        if (!cmd) {
+            for (const candidate of reg.values()) {
+                if (candidate.aliases?.includes(name)) {
+                    cmd = candidate;
+                    break;
+                }
+            }
+        }
+        if (!cmd) {
+            ctx.output(`Unknown command: /${name}. Type /help for available commands.`);
+            return true;
+        }
+        // Special-case /help: format with current registry
+        if (cmd.name === "help") {
+            ctx.output(formatHelp([...reg.values()]));
+            return true;
+        }
+        const fullCtx = {
+            ...ctx,
+            addCommand,
+            removeCommand,
+        };
+        cmd.handler(args, fullCtx);
+        return true;
+    }, [ctx, addCommand, removeCommand]);
+    const commands = useMemo(() => [...registry.values()], [registry]);
+    return {
+        dispatch,
+        commands,
+        addCommand,
+        removeCommand,
+    };
+}
+//# sourceMappingURL=commands.js.map

package/dist/commands.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands.js","sourceRoot":"","sources":["../src/commands.ts"],"names":[],"mappings":"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"}

package/dist/components/CompletionPicker.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CompletionPicker — renders a completion dropdown for the TUI.
+ *
+ * Pure rendering component. Takes CompletionState, renders items in an
+ * emerald-themed bordered box with windowed scrolling.
+ */
+import type { CompletionState } from "@agentick/client";
+export interface CompletionPickerProps {
+    completion: CompletionState;
+}
+export declare function CompletionPicker({ completion }: CompletionPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CompletionPicker.d.ts.map

package/dist/components/CompletionPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompletionPicker.d.ts","sourceRoot":"","sources":["../../src/components/CompletionPicker.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAKxD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,EAAE,qBAAqB,2CA+DrE"}

package/dist/components/CompletionPicker.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CompletionPicker — renders a completion dropdown for the TUI.
+ *
+ * Pure rendering component. Takes CompletionState, renders items in an
+ * emerald-themed bordered box with windowed scrolling.
+ */
+import { Box, Text } from "ink";
+const MAX_VISIBLE = 8;
+const BORDER_COLOR = "#34d399";
+export function CompletionPicker({ completion }) {
+    const { items, selectedIndex, loading } = completion;
+    if (loading && items.length === 0) {
+        return (_jsx(Box, { borderStyle: "single", borderColor: BORDER_COLOR, paddingLeft: 1, paddingRight: 1, children: _jsx(Text, { dimColor: true, children: "Loading..." }) }));
+    }
+    if (items.length === 0) {
+        return (_jsx(Box, { borderStyle: "single", borderColor: BORDER_COLOR, paddingLeft: 1, paddingRight: 1, children: _jsx(Text, { dimColor: true, children: "No matches" }) }));
+    }
+    // Windowed scrolling — keep selected item visible
+    const total = items.length;
+    const windowSize = Math.min(total, MAX_VISIBLE);
+    let windowStart;
+    if (total <= MAX_VISIBLE) {
+        windowStart = 0;
+    }
+    else {
+        // Center the selected item in the window
+        const half = Math.floor(windowSize / 2);
+        windowStart = Math.max(0, Math.min(selectedIndex - half, total - windowSize));
+    }
+    const windowEnd = windowStart + windowSize;
+    const visibleItems = items.slice(windowStart, windowEnd);
+    const hasItemsAbove = windowStart > 0;
+    const hasItemsBelow = windowEnd < total;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: BORDER_COLOR, paddingLeft: 1, paddingRight: 1, children: [hasItemsAbove && _jsx(Text, { dimColor: true, children: " ..." }), visibleItems.map((item, i) => {
+                const actualIndex = windowStart + i;
+                const isSelected = actualIndex === selectedIndex;
+                return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { inverse: isSelected, bold: isSelected, children: item.label }), item.description && _jsx(Text, { dimColor: true, children: item.description })] }, actualIndex));
+            }), hasItemsBelow && _jsx(Text, { dimColor: true, children: " ..." }), loading && _jsx(Text, { dimColor: true, children: " Loading..." })] }));
+}
+//# sourceMappingURL=CompletionPicker.js.map

package/dist/components/CompletionPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompletionPicker.js","sourceRoot":"","sources":["../../src/components/CompletionPicker.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAGhC,MAAM,WAAW,GAAG,CAAC,CAAC;AACtB,MAAM,YAAY,GAAG,SAAS,CAAC;AAM/B,MAAM,UAAU,gBAAgB,CAAC,EAAE,UAAU,EAAyB;IACpE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC;IAErD,IAAI,OAAO,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClC,OAAO,CACL,KAAC,GAAG,IAAC,WAAW,EAAC,QAAQ,EAAC,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,YAClF,KAAC,IAAI,IAAC,QAAQ,iCAAkB,GAC5B,CACP,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,CACL,KAAC,GAAG,IAAC,WAAW,EAAC,QAAQ,EAAC,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,YAClF,KAAC,IAAI,IAAC,QAAQ,iCAAkB,GAC5B,CACP,CAAC;IACJ,CAAC;IAED,kDAAkD;IAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC3B,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAChD,IAAI,WAAmB,CAAC;IAExB,IAAI,KAAK,IAAI,WAAW,EAAE,CAAC;QACzB,WAAW,GAAG,CAAC,CAAC;IAClB,CAAC;SAAM,CAAC;QACN,yCAAyC;QACzC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;QACxC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,IAAI,EAAE,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC;IAChF,CAAC;IAED,MAAM,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC3C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,aAAa,GAAG,WAAW,GAAG,CAAC,CAAC;IACtC,MAAM,aAAa,GAAG,SAAS,GAAG,KAAK,CAAC;IAExC,OAAO,CACL,MAAC,GAAG,IACF,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAC,QAAQ,EACpB,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,CAAC,EACd,YAAY,EAAE,CAAC,aAEd,aAAa,IAAI,KAAC,IAAI,IAAC,QAAQ,2BAAY,EAC3C,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;gBAC5B,MAAM,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;gBACpC,MAAM,UAAU,GAAG,WAAW,KAAK,aAAa,CAAC;gBAEjD,OAAO,CACL,MAAC,GAAG,IAAmB,aAAa,EAAC,KAAK,EAAC,GAAG,EAAE,CAAC,aAC/C,KAAC,IAAI,IAAC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,YACxC,IAAI,CAAC,KAAK,GACN,EACN,IAAI,CAAC,WAAW,IAAI,KAAC,IAAI,IAAC,QAAQ,kBAAE,IAAI,CAAC,WAAW,GAAQ,KAJrD,WAAW,CAKf,CACP,CAAC;YACJ,CAAC,CAAC,EACD,aAAa,IAAI,KAAC,IAAI,IAAC,QAAQ,2BAAY,EAC3C,OAAO,IAAI,KAAC,IAAI,IAAC,QAAQ,kCAAmB,IACzC,CACP,CAAC;AACJ,CAAC"}

package/dist/components/DiffView.d.ts

@@ -0,0 +1,21 @@
+/**
+ * DiffView — colored diff rendering with line numbers and gutter markers.
+ *
+ * Parses unified diff output (from jsdiff's createTwoFilesPatch) and renders:
+ * - Summary header with add/remove counts
+ * - Line numbers in a left gutter
+ * - Colored text (green additions, red removals, dim context)
+ * - Hunk headers in cyan
+ *
+ * Uses chalk for ANSI coloring without background colors — background colors
+ * create visible gaps between lines in most terminals due to inter-line
+ * pixel spacing from the font engine.
+ */
+interface DiffViewProps {
+    patch: string;
+    filePath?: string;
+    maxLines?: number;
+}
+export declare function DiffView({ patch, filePath, maxLines }: DiffViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DiffView.d.ts.map

package/dist/components/DiffView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiffView.d.ts","sourceRoot":"","sources":["../../src/components/DiffView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAKH,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA2FD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAa,EAAE,EAAE,aAAa,2CAmCzE"}