@wrongstack/tui 0.1.4 → 0.1.7

package/README.md

@@ -0,0 +1,99 @@
+# @wrongstack/tui
+
+Ink-based terminal UI for the WrongStack agent. Renders the interactive chat panel, status bar, slash-command picker, model picker, todo list, and permission-confirm dialogs.
+
+The TUI is **lazy-loaded** by [`@wrongstack/cli`](../cli) — it only imports React/Ink when the user passes `--tui`. Plain-REPL users pay no startup cost.
+
+## Install
+
+```bash
+pnpm add @wrongstack/tui @wrongstack/core
+```
+
+You'd only depend on this directly if you're embedding WrongStack inside another tool and want the TUI surface. Otherwise install [`wrongstack`](../../README.md).
+
+## Quick example
+
+```ts
+import { runTui } from '@wrongstack/tui';
+import { Agent, DefaultEventBus, SlashCommandRegistry, DefaultAttachmentStore } from '@wrongstack/core';
+
+const exitCode = await runTui({
+  agent,                          // configured Agent instance
+  slashRegistry,                  // SlashCommandRegistry
+  attachments: new DefaultAttachmentStore(),
+  events: new DefaultEventBus(),
+  model: 'claude-sonnet-4-6',
+  banner: true,
+  yolo: false,
+  appVersion: '0.1.6',
+  provider: 'anthropic',
+  family: 'anthropic',
+  keyTail: '…ABC',
+  effectiveMaxContext: 200_000,
+  altScreen: false,
+});
+
+process.exit(exitCode);
+```
+
+## What you get
+
+```
+┌─ banner ─────────────────────────────────────────────┐
+│  wrongstack 0.1.6 — anthropic · claude-sonnet-4-6    │
+└──────────────────────────────────────────────────────┘
+  user> refactor auth.ts to async/await
+  ⠋ thinking (3 tools used · 4.2k tokens · 1.3s)
+  …
+  > █                                              ⚠ YOLO
+  ─────────────────────────────────────────────  ctx 47%
+```
+
+- **History pane** — assistant text, tool calls, tool results, errors, turn summaries
+- **Streaming text** — partial deltas render live; on abort, partial response is preserved
+- **Status bar** — model · provider · context-window % · YOLO chip · spinner
+- **Input box** — multi-line buffer with bracketed-paste detection, history (↑/↓), placeholder pills for attachments
+- **Pickers** — fuzzy file picker (`@`), slash picker (`/`), model picker (Ctrl+M)
+- **Permission dialog** — modal y/n/always/deny for `confirm`-permission tools
+- **Todo list** — sidebar reflecting `ctx.todos`
+- **Attachments** — images and files dropped into the input become inline content blocks
+
+## Key bindings
+
+| Key | Effect |
+|-----|--------|
+| `Enter` | Submit |
+| `Shift+Enter` (or `\` newline) | Insert newline |
+| `Ctrl+C` (once) | Abort current turn |
+| `Ctrl+C` (twice) | Exit |
+| `Ctrl+D` (empty buffer) | Exit |
+| `↑` / `↓` | History navigation when buffer empty |
+| `@` | File picker |
+| `/` (at start) | Slash command picker |
+| `Esc` | Close any picker / dialog |
+| `Ctrl+L` | Clear screen (TUI keeps state — equivalent to scrolling) |
+
+## Options worth knowing
+
+- **`altScreen: false`** (default) — render into normal scrollback so the user keeps native terminal scroll + history after exit. Set `true` for full-screen mode (no scrollback).
+- **`effectiveMaxContext`** — the context-bar denominator. Pass the model-specific value resolved via `ModelsRegistry`, not the family baseline; the 1M Opus variant has a much larger window than the 200k default.
+- **`queueStore`** — if set, queued input survives a crash. Without it, queued lines are in-memory only.
+- **`onClearHistory`** — invoked from the `/clear` slash command so the TUI can wipe its rendered history entries (keeping just the banner) while `Agent`/memory reset happens elsewhere.
+- **`onAfterExit`** — called once the alt-screen has been restored on clean shutdown. Use it to print "session saved" hints into the user's normal terminal (alt-screen exit erases the TUI view).
+
+## Architecture
+
+```
+runTui                — entry; sets up bracketed paste, alt-screen, signal handlers
+  ↓
+App (React component) — useReducer-driven state machine
+  ↓ dispatches events to ↓
+EventBus              — agent.run() emits these, the TUI subscribes
+```
+
+State is a single `useReducer` `State` shape with discriminated-union `Action`s. The reducer is exported (`reducer`) and unit-tested.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Agent, SlashCommandRegistry, AttachmentStore, EventBus, TokenCounter, QueueStore } from '@wrongstack/core';
 
 interface ProviderOption {
@@ -58,6 +59,12 @@ interface RunTuiOptions {
      * TUI view.
      */
     onAfterExit?: () => void;
+    /** Called from /clear so the TUI can wipe its history entries while agent.ctx + memory are cleared separately. */
+    onClearHistory?: (dispatch: React.Dispatch<{
+        type: 'clearHistory';
+    } | {
+        type: 'resetContextChip';
+    }>) => void;
 }
 declare function runTui(opts: RunTuiOptions): Promise<number>;
 

package/dist/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useReducer, useRef, useEffect, useMemo } from 'react';
 import { render, useApp, Box, useStdout, Static, Text, useInput } from 'ink';
-import * as path2 from 'path';
+import * as path3 from 'path';
 import * as fs2 from 'fs/promises';
 import { InputBuilder } from '@wrongstack/core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -32,8 +32,8 @@ var SEP_RE = /^\s*\|[\s\-:|]+\|\s*$/;
 function detectTable(lines, start) {
   if (start + 1 >= lines.length) return start;
   if (!ROW_RE.test(lines[start] ?? "")) return start;
-  const sep = lines[start + 1] ?? "";
-  if (!SEP_RE.test(sep) || !/-/.test(sep)) return start;
+  const sep2 = lines[start + 1] ?? "";
+  if (!SEP_RE.test(sep2) || !/-/.test(sep2)) return start;
   let end = start + 2;
   while (end < lines.length && ROW_RE.test(lines[end] ?? "")) end++;
   return end;
@@ -59,8 +59,8 @@ function parseCells(line) {
   parts.push(buf);
   return parts.map((c) => c.trim());
 }
-function parseAlign(sep) {
-  const t = sep.trim();
+function parseAlign(sep2) {
+  const t = sep2.trim();
   const left = t.startsWith(":");
   const right = t.endsWith(":");
   if (left && right) return "center";
@@ -191,7 +191,7 @@ function History({ entries, streamingText, toolStream }) {
   const { stdout } = useStdout();
   const termWidth = stdout?.columns ?? 80;
   const tail = streamingText ? tailForDisplay(streamingText, MAX_STREAM_DISPLAY_CHARS) : "";
-  const toolTail = toolStream && toolStream.text ? tailForDisplay(toolStream.text, MAX_STREAM_DISPLAY_CHARS) : "";
+  const toolTail = toolStream?.text ? tailForDisplay(toolStream.text, MAX_STREAM_DISPLAY_CHARS) : "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Static, { items: entries, children: (entry) => /* @__PURE__ */ jsx(Box, { marginBottom: entry.kind === "turn-summary" ? 1 : 0, children: /* @__PURE__ */ jsx(Entry, { entry, termWidth }) }, entry.id) }),
     tail ? /* @__PURE__ */ jsxs(Box, { children: [
@@ -994,14 +994,15 @@ function StatusBar({
   todos,
   git,
   subagentCount = 0,
-  context
+  context,
+  projectName
 }) {
   const usage = tokenCounter?.total();
   const cost = tokenCounter?.estimateCost();
   const cache2 = tokenCounter?.cacheStats();
   const stateColor = state === "idle" ? "cyan" : state === "aborting" ? "yellow" : "green";
   const stateLabel = state === "idle" ? "idle" : state === "aborting" ? "aborting\u2026" : "thinking\u2026";
-  const hasSecondLine = yolo || elapsedMs !== void 0 || todos && (todos.pending > 0 || todos.inProgress > 0 || todos.completed > 0) || git !== null && git !== void 0 || subagentCount > 0;
+  const hasSecondLine = yolo || elapsedMs !== void 0 || todos && (todos.pending > 0 || todos.inProgress > 0 || todos.completed > 0) || git !== null && git !== void 0 || subagentCount > 0 || projectName !== void 0 && projectName.length > 0;
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -1070,8 +1071,15 @@ function StatusBar({
               fmtElapsed(elapsedMs)
             ] })
           ] }) : null,
-          git ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          projectName ? /* @__PURE__ */ jsxs(Fragment, { children: [
             yolo || elapsedMs !== void 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }) : null,
+            /* @__PURE__ */ jsxs(Text, { color: "blue", children: [
+              "\u{1F4C1} ",
+              projectName
+            ] })
+          ] }) : null,
+          git ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            yolo || elapsedMs !== void 0 || projectName ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }) : null,
             /* @__PURE__ */ jsxs(Text, { children: [
               /* @__PURE__ */ jsxs(Text, { color: "magenta", children: [
                 "\u2387 ",
@@ -1358,7 +1366,7 @@ async function loadIndex(root) {
 async function walk(root, rel, depth, out) {
   if (out.length >= MAX_FILES_INDEXED) return;
   if (depth > MAX_DEPTH) return;
-  const dir = rel ? path2.join(root, rel) : root;
+  const dir = rel ? path3.join(root, rel) : root;
   let entries;
   try {
     entries = await fs2.readdir(dir, { withFileTypes: true });
@@ -1415,7 +1423,7 @@ async function readClipboardImage() {
   return null;
 }
 async function readWindows() {
-  const tmp = path2.join(os.tmpdir(), `wstack-clip-${Date.now()}.png`);
+  const tmp = path3.join(os.tmpdir(), `wstack-clip-${Date.now()}.png`);
   const ps = [
     "Add-Type -AssemblyName System.Windows.Forms",
     "Add-Type -AssemblyName System.Drawing",
@@ -1430,7 +1438,7 @@ async function readWindows() {
   return readPngFile(tmp);
 }
 async function readDarwin() {
-  const tmp = path2.join(os.tmpdir(), `wstack-clip-${Date.now()}.png`);
+  const tmp = path3.join(os.tmpdir(), `wstack-clip-${Date.now()}.png`);
   const script = [
     "try",
     `  set the_file to (open for access POSIX file "${tmp}" with write permission)`,
@@ -1449,7 +1457,7 @@ async function readDarwin() {
   return readPngFile(tmp);
 }
 async function readLinux() {
-  const tmp = path2.join(os.tmpdir(), `wstack-clip-${Date.now()}.png`);
+  const tmp = path3.join(os.tmpdir(), `wstack-clip-${Date.now()}.png`);
   const tries = [
     ["wl-paste", ["--type", "image/png"]],
     ["xclip", ["-selection", "clipboard", "-t", "image/png", "-o"]]
@@ -1662,6 +1670,15 @@ function reducer(state, action) {
         picker: { open: false, query: "", matches: [], selected: 0 },
         slashPicker: { open: false, query: "", matches: [], selected: 0 }
       };
+    case "clearHistory": {
+      const last = state.entries[state.entries.length - 1];
+      return {
+        ...state,
+        entries: last ? [last] : state.entries,
+        queue: [],
+        nextQueueId: 1
+      };
+    }
     case "streamDelta":
       return { ...state, streamingText: state.streamingText + action.delta };
     case "streamReset":
@@ -1862,6 +1879,8 @@ function reducer(state, action) {
       return { ...state, confirm: action.info };
     case "confirmClose":
       return { ...state, confirm: null };
+    case "resetContextChip":
+      return { ...state, contextChipVersion: state.contextChipVersion + 1 };
   }
 }
 var PASTE_THRESHOLD_CHARS = 200;
@@ -1882,7 +1901,8 @@ function App({
   getPickableProviders,
   switchProviderAndModel,
   effectiveMaxContext,
-  onExit
+  onExit,
+  onClearHistory
 }) {
   const { exit } = useApp();
   const [liveModel, setLiveModel] = useState(model);
@@ -1923,7 +1943,8 @@ function App({
       modelOptions: [],
       selected: 0
     },
-    confirm: null
+    confirm: null,
+    contextChipVersion: 0
   });
   const builderRef = useRef(null);
   if (builderRef.current === null) {
@@ -1931,6 +1952,10 @@ function App({
   }
   const activeCtrlRef = useRef(null);
   const projectRoot = agent.ctx.projectRoot;
+  const projectName = React.useMemo(() => {
+    const base = path3.basename(projectRoot);
+    return base && base !== path3.sep ? base : void 0;
+  }, [projectRoot]);
   const streamingTextRef = useRef("");
   const pendingDeltaRef = useRef("");
   const flushTimerRef = useRef(null);
@@ -1969,8 +1994,11 @@ function App({
   }, [events]);
   const maxContext = effectiveMaxContext ?? agent.ctx.provider.capabilities.maxContext;
   const contextWindow = useMemo(
-    () => lastInputTokens > 0 && maxContext > 0 ? { used: lastInputTokens, max: maxContext } : void 0,
-    [lastInputTokens, maxContext]
+    () => {
+      void state.contextChipVersion;
+      return lastInputTokens > 0 && maxContext > 0 ? { used: lastInputTokens, max: maxContext } : void 0;
+    },
+    [lastInputTokens, maxContext, state.contextChipVersion]
   );
   const todos = useMemo(() => {
     const counts = { pending: 0, inProgress: 0, completed: 0 };
@@ -2065,7 +2093,7 @@ function App({
       dispatch({ type: "pickerClose" });
       return;
     }
-    const absPath = path2.isAbsolute(picked) ? picked : path2.join(projectRoot, picked);
+    const absPath = path3.isAbsolute(picked) ? picked : path3.join(projectRoot, picked);
     try {
       const data = await fs2.readFile(absPath, "utf8");
       const placeholder = await builder.appendFile({
@@ -2567,6 +2595,10 @@ function App({
           exit();
           onExit(0);
         }
+        const cmd = trimmed.slice(1).split(/\s+/, 1)[0];
+        if (cmd === "clear") {
+          onClearHistory?.(dispatch);
+        }
       } catch (err) {
         dispatch({
           type: "addEntry",
@@ -2661,7 +2693,8 @@ function App({
         elapsedMs,
         todos,
         git: gitInfo,
-        context: contextWindow
+        context: contextWindow,
+        projectName
       }
     )
   ] });
@@ -2776,7 +2809,8 @@ async function runTui(opts) {
           getPickableProviders: opts.getPickableProviders,
           switchProviderAndModel: opts.switchProviderAndModel,
           effectiveMaxContext: opts.effectiveMaxContext,
-          onExit
+          onExit,
+          onClearHistory: opts.onClearHistory ? (dispatch) => opts.onClearHistory(dispatch) : void 0
         }),
         { exitOnCtrlC: false }
       );