@truss-harness/tui 0.1.16 → 0.1.19

package/dist/workspace-files.js

@@ -0,0 +1,169 @@
+import { readdir, readFile } from "node:fs/promises";
+import { join, relative } from "node:path";
+import { useEffect, useMemo, useState } from "react";
+import { clamp } from "./display.js";
+import { buildFileTree, fuzzyFiles, syntaxTokens, wrapSyntaxTokens, } from "./file-browser.js";
+import { readWorkingTreeDiff } from "./processes.js";
+const ignoredDirectories = new Set([
+    ".git",
+    ".next",
+    ".truss-harness",
+    "node_modules",
+    "dist",
+    "coverage",
+]);
+export async function collectWorkspaceFiles(root, current = root, result = []) {
+    if (result.length >= 2_000)
+        return result;
+    for (const entry of await readdir(current, { withFileTypes: true })) {
+        if (result.length >= 2_000)
+            break;
+        if (entry.isDirectory() && !ignoredDirectories.has(entry.name))
+            await collectWorkspaceFiles(root, join(current, entry.name), result);
+        if (entry.isFile())
+            result.push({ path: relative(root, join(current, entry.name)) });
+    }
+    return result.sort((left, right) => left.path.localeCompare(right.path));
+}
+export function useWorkspaceFiles({ workspaceRoot, viewportRows, editorWidth, editorLineCount, focusEditor, closeSearch, }) {
+    const [files, setFiles] = useState([]);
+    const [fileIndex, setFileIndex] = useState(0);
+    const [collapsedDirectories, setCollapsedDirectories] = useState(() => new Set());
+    const [fileSearchInput, setFileSearchInput] = useState("");
+    const [fileSearchIndex, setFileSearchIndex] = useState(0);
+    const [openFilePath, setOpenFilePath] = useState();
+    const [editor, setEditor] = useState("Select a file from the workspace tree.");
+    const [editorTitle, setEditorTitle] = useState("Preview");
+    const [isDiff, setIsDiff] = useState(false);
+    const [editorScroll, setEditorScroll] = useState(0);
+    const fileTree = useMemo(() => buildFileTree(files, collapsedDirectories), [files, collapsedDirectories]);
+    const selectedFileTreeEntry = fileTree[Math.min(fileIndex, Math.max(0, fileTree.length - 1))];
+    const fileSearchResults = useMemo(() => fuzzyFiles(files, fileSearchInput, Math.max(6, Math.min(14, viewportRows - 10))), [files, fileSearchInput, viewportRows]);
+    const editorRows = useMemo(() => {
+        const maximumCharacters = Math.max(12, editorWidth - 7);
+        return editor.split(/\r?\n/).flatMap((line, sourceIndex) => {
+            const color = isDiff
+                ? line.startsWith("+") && !line.startsWith("+++")
+                    ? "green"
+                    : line.startsWith("-") && !line.startsWith("---")
+                        ? "red"
+                        : undefined
+                : undefined;
+            const tokens = isDiff
+                ? [{ text: line, color }]
+                : syntaxTokens(line, openFilePath ?? "");
+            return wrapSyntaxTokens(tokens, maximumCharacters).map((row, rowIndex) => ({
+                key: `${sourceIndex}:${rowIndex}`,
+                sourceLine: sourceIndex + 1,
+                continuation: rowIndex > 0,
+                tokens: row,
+            }));
+        });
+    }, [editor, editorWidth, isDiff, openFilePath]);
+    const visibleEditorRows = editorRows.slice(editorScroll, editorScroll + editorLineCount);
+    const fileTreeStart = clamp(fileIndex - Math.floor(editorLineCount / 2), 0, Math.max(0, fileTree.length - editorLineCount));
+    const visibleFileTree = fileTree.slice(fileTreeStart, fileTreeStart + editorLineCount);
+    useEffect(() => {
+        void collectWorkspaceFiles(workspaceRoot)
+            .then(setFiles)
+            .catch((error) => setEditor(`Unable to list workspace files: ${String(error)}`));
+    }, [workspaceRoot]);
+    useEffect(() => {
+        setFileIndex((current) => clamp(current, 0, Math.max(0, fileTree.length - 1)));
+    }, [fileTree.length]);
+    useEffect(() => {
+        setEditorScroll((current) => clamp(current, 0, Math.max(0, editorRows.length - editorLineCount)));
+    }, [editorRows.length, editorLineCount]);
+    useEffect(() => {
+        if (!openFilePath)
+            return;
+        const index = fileTree.findIndex((entry) => entry.kind === "file" && entry.path === openFilePath);
+        if (index >= 0)
+            setFileIndex(index);
+    }, [fileTree, openFilePath]);
+    const loadFile = async (entry) => {
+        try {
+            setIsDiff(false);
+            setEditorScroll(0);
+            setOpenFilePath(entry.path);
+            setEditorTitle(entry.path);
+            setEditor(await readFile(join(workspaceRoot, entry.path), "utf8"));
+            focusEditor();
+        }
+        catch (error) {
+            setEditor(`Unable to read ${entry.path}: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    };
+    const toggleDirectory = (path, expand) => {
+        setCollapsedDirectories((current) => {
+            const next = new Set(current);
+            const currentlyExpanded = !next.has(path);
+            const shouldExpand = expand ?? !currentlyExpanded;
+            if (shouldExpand)
+                next.delete(path);
+            else
+                next.add(path);
+            return next;
+        });
+    };
+    const openSearchResult = (entry) => {
+        const parts = entry.path.replaceAll("\\", "/").split("/");
+        parts.pop();
+        setCollapsedDirectories((current) => {
+            const next = new Set(current);
+            let path = "";
+            for (const part of parts) {
+                path = path ? `${path}/${part}` : part;
+                next.delete(path);
+            }
+            return next;
+        });
+        setFileSearchInput("");
+        setFileSearchIndex(0);
+        closeSearch();
+        void loadFile(entry);
+    };
+    const toggleDiff = async () => {
+        if (!openFilePath)
+            return;
+        const entry = { path: openFilePath };
+        if (isDiff)
+            return void loadFile(entry);
+        try {
+            setOpenFilePath(entry.path);
+            const stdout = await readWorkingTreeDiff(workspaceRoot, entry.path);
+            setEditorTitle(`Diff: ${entry.path}`);
+            setEditor(stdout || "No working-tree diff for this file.");
+            setIsDiff(true);
+            setEditorScroll(0);
+        }
+        catch (error) {
+            setEditor(`Unable to load Git diff: ${error instanceof Error ? error.message : String(error)}`);
+            setIsDiff(true);
+        }
+    };
+    return {
+        files,
+        fileIndex,
+        setFileIndex,
+        fileTree,
+        selectedFileTreeEntry,
+        fileSearchInput,
+        setFileSearchInput,
+        fileSearchIndex,
+        setFileSearchIndex,
+        fileSearchResults,
+        openFilePath,
+        editorTitle,
+        editorScroll,
+        setEditorScroll,
+        editorRows,
+        visibleEditorRows,
+        fileTreeStart,
+        visibleFileTree,
+        loadFile,
+        toggleDirectory,
+        openSearchResult,
+        toggleDiff,
+    };
+}

package/dist/workspace-view.d.ts

@@ -0,0 +1,37 @@
+import type { ClientConfiguration } from "@truss-harness/cli/runtime";
+import type { WorkspacePlan } from "@truss-harness/runtime";
+import { type TuiOverlaysProps } from "./components.js";
+import type { FileTreeEntry } from "./file-browser.js";
+import type { TuiLayout } from "./layout.js";
+import type { TerminalLine } from "./terminal-controller.js";
+import type { TuiTheme } from "./theme.js";
+import type { ChatDisplayLine, EditorDisplayRow, Focus, RunStatus, Viewport } from "./types.js";
+export interface TuiWorkspaceViewProps {
+    readonly viewport: Viewport;
+    readonly layout: TuiLayout;
+    readonly theme: TuiTheme;
+    readonly configuration?: ClientConfiguration;
+    readonly runStatus: RunStatus;
+    readonly busy: boolean;
+    readonly contextTokens: number;
+    readonly contextWindow: number;
+    readonly tokensPerSecond?: number;
+    readonly previewUrl?: string;
+    readonly focus: Focus;
+    readonly visibleFileTree: readonly FileTreeEntry[];
+    readonly fileTreeLength: number;
+    readonly fileTreeStart: number;
+    readonly fileIndex: number;
+    readonly openFilePath?: string;
+    readonly editorTitle: string;
+    readonly visibleEditorRows: readonly EditorDisplayRow[];
+    readonly activePlan?: WorkspacePlan;
+    readonly chatLines: readonly ChatDisplayLine[];
+    readonly chatScroll: number;
+    readonly chatInput: string;
+    readonly visibleTerminalLines: readonly TerminalLine[];
+    readonly commandInput: string;
+    readonly sessionId?: string;
+    readonly overlays: Omit<TuiOverlaysProps, "theme">;
+}
+export declare function TuiWorkspaceView({ viewport, layout, theme, configuration, runStatus, busy, contextTokens, contextWindow, tokensPerSecond, previewUrl, focus, visibleFileTree, fileTreeLength, fileTreeStart, fileIndex, openFilePath, editorTitle, visibleEditorRows, activePlan, chatLines, chatScroll, chatInput, visibleTerminalLines, commandInput, sessionId, overlays, }: TuiWorkspaceViewProps): React.ReactElement;

package/dist/workspace-view.js

@@ -0,0 +1,72 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { brand } from "@truss-harness/branding";
+import { Box, Text } from "ink";
+import { Panel, TuiOverlays } from "./components.js";
+import { formatTokenCount, truncate } from "./display.js";
+export function TuiWorkspaceView({ viewport, layout, theme, configuration, runStatus, busy, contextTokens, contextWindow, tokensPerSecond, previewUrl, focus, visibleFileTree, fileTreeLength, fileTreeStart, fileIndex, openFilePath, editorTitle, visibleEditorRows, activePlan, chatLines, chatScroll, chatInput, visibleTerminalLines, commandInput, sessionId, overlays, }) {
+    const { compact, terminalHeight, workspaceHeight, filesWidth, chatWidth, editorWidth, compactChatHeight, editorHeight, } = layout;
+    const filesPanel = (_jsxs(Panel, { title: "FILES  [/] find", active: focus === "files", theme: theme, children: [visibleFileTree.map((entry, visibleIndex) => {
+                const selected = fileTreeStart + visibleIndex === fileIndex;
+                const marker = entry.kind === "directory" ? (entry.expanded ? "v " : "> ") : "  ";
+                const indentation = " ".repeat(entry.depth * 2);
+                const width = Math.max(6, filesWidth - indentation.length - 7);
+                return (_jsxs(Text, { wrap: "truncate-end", color: selected
+                        ? theme.focus
+                        : entry.kind === "directory"
+                            ? theme.directory
+                            : entry.path === openFilePath
+                                ? theme.success
+                                : theme.text, bold: selected || entry.kind === "directory", children: [selected ? "> " : "  ", indentation, marker, truncate(entry.name, width)] }, `${entry.kind}:${entry.path}`));
+            }), !fileTreeLength && (_jsx(Text, { color: theme.muted, children: "No workspace files found." }))] }));
+    const editorPanel = (_jsx(Panel, { title: `${editorTitle}  [up/down] scroll  [d] diff${previewUrl ? "  [o] browser" : ""}`, active: focus === "editor", theme: theme, children: visibleEditorRows.map((row) => {
+            const lineLabel = row.continuation
+                ? "  |"
+                : String(row.sourceLine).padStart(3);
+            return (_jsxs(Text, { wrap: "truncate-end", color: theme.text, children: [_jsx(Text, { color: theme.muted, children: lineLabel }), " ", (() => {
+                        let offset = 0;
+                        return row.tokens.map((token) => {
+                            const key = `${offset}:${token.text}`;
+                            offset += token.text.length;
+                            return (_jsx(Text, { color: token.color ? theme.syntax[token.color] : theme.text, dimColor: token.dim, children: token.text }, key));
+                        });
+                    })()] }, row.key));
+        }) }));
+    const agentPanel = (_jsxs(Panel, { title: chatScroll
+            ? `AGENT  [${chatScroll} lines above]`
+            : "AGENT  [Enter] send", active: focus === "chat", theme: theme, children: [activePlan && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { bold: true, color: theme.accent, wrap: "truncate-end", children: ["PLAN: ", truncate(activePlan.title, Math.max(8, chatWidth - 9))] }), activePlan.steps.slice(0, 3).map((step) => (_jsxs(Text, { wrap: "truncate-end", color: step.status === "completed"
+                            ? theme.success
+                            : step.status === "in_progress"
+                                ? theme.warning
+                                : theme.muted, children: [step.status === "completed"
+                                ? "[x]"
+                                : step.status === "in_progress"
+                                    ? "[..]"
+                                    : "[ ]", " ", truncate(step.content, Math.max(8, chatWidth - 7))] }, step.id)))] })), chatLines.map((line) => (_jsx(Text, { color: line.role === "user" ? theme.user : theme.agent, bold: line.header, children: line.text }, line.key))), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { wrap: "truncate-end", color: focus === "chat" ? theme.focus : theme.muted, children: [focus === "chat" ? "> " : "  ", truncate(chatInput ||
+                        (busy ? "Working... Escape cancels" : "Ask about this workspace"), Math.max(12, chatWidth - 5))] })] }));
+    return (_jsxs(Box, { flexDirection: "column", height: viewport.rows, paddingX: 1, overflow: "hidden", children: [_jsxs(Box, { height: 1, justifyContent: "space-between", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.accent, children: brand.productName.toUpperCase() }), _jsx(Text, { color: theme.muted, children: configuration
+                            ? `${configuration.provider} / ${configuration.model}`
+                            : "No model selected" }), _jsx(Text, { color: runStatus === "waiting"
+                            ? theme.warning
+                            : busy
+                                ? theme.focus
+                                : theme.success, children: runStatus === "waiting"
+                            ? "APPROVAL"
+                            : runStatus === "tool"
+                                ? "TOOL"
+                                : busy
+                                    ? "WORKING"
+                                    : "READY" })] }), _jsxs(Box, { height: 1, justifyContent: "space-between", marginBottom: 1, children: [_jsxs(Text, { color: theme.muted, children: ["CONTEXT", " ", _jsxs(Text, { color: contextTokens / contextWindow >= 0.9
+                                    ? theme.error
+                                    : contextTokens / contextWindow >= 0.7
+                                        ? theme.warning
+                                        : theme.accent, children: [formatTokenCount(contextTokens), " /", " ", formatTokenCount(contextWindow)] }), " ", "estimated"] }), _jsxs(Text, { color: theme.muted, children: ["SPEED", " ", _jsx(Text, { color: busy ? theme.success : theme.muted, children: tokensPerSecond
+                                    ? `${tokensPerSecond.toFixed(1)} tok/s`
+                                    : "-- tok/s" }), previewUrl
+                                ? `  PREVIEW ${truncate(previewUrl, Math.max(16, Math.floor(viewport.columns * 0.3)))}`
+                                : ""] })] }), compact ? (_jsxs(Box, { height: workspaceHeight, flexDirection: "column", gap: 1, overflow: "hidden", children: [_jsxs(Box, { height: editorHeight, flexDirection: "row", gap: 1, overflow: "hidden", children: [_jsx(Box, { width: filesWidth, height: "100%", children: filesPanel }), _jsx(Box, { width: editorWidth, height: "100%", children: editorPanel })] }), _jsx(Box, { height: compactChatHeight, width: "100%", children: agentPanel })] })) : (_jsxs(Box, { height: workspaceHeight, flexDirection: "row", gap: 1, overflow: "hidden", children: [_jsx(Box, { width: filesWidth, height: "100%", children: filesPanel }), _jsx(Box, { width: editorWidth, height: "100%", children: editorPanel }), _jsx(Box, { width: chatWidth, height: "100%", children: agentPanel })] })), _jsx(Box, { height: terminalHeight, marginTop: 1, children: _jsxs(Panel, { title: "TERMINAL  [Enter] run", active: focus === "terminal", theme: theme, children: [visibleTerminalLines.map((line) => (_jsx(Text, { wrap: "truncate-end", color: line.text.startsWith("[agent error]") ||
+                                line.text.startsWith("[terminal error]")
+                                ? theme.error
+                                : line.text.startsWith("[tool")
+                                    ? theme.warning
+                                    : theme.muted, children: truncate(line.text, Math.max(20, viewport.columns - 8)) }, line.id))), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { wrap: "truncate-end", color: focus === "terminal" ? theme.focus : theme.muted, children: [focus === "terminal" ? "> " : "  ", truncate(commandInput || "Type a workspace command", Math.max(16, viewport.columns - 10))] })] }) }), _jsxs(Box, { height: 1, marginTop: 1, justifyContent: "space-between", children: [_jsx(Text, { color: theme.muted, wrap: "truncate-end", children: "Tab focus | Ctrl+Left/Right pane | / find | a agents | c MCP | m settings | Esc cancel run | Ctrl+C exit idle" }), _jsx(Text, { color: theme.muted, children: sessionId ? `session ${sessionId.slice(0, 8)}` : "new session" })] }), _jsx(TuiOverlays, { theme: theme, ...overlays })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truss-harness/tui",
-  "version": "0.1.16",
+  "version": "0.1.19",
   "description": "Interactive terminal client for Truss.",
   "type": "module",
   "bin": {
@@ -43,9 +43,9 @@
     "ink": "^6.8.0",
     "react": "^19.2.0",
     "@truss-harness/branding": "0.1.1",
-    "@truss-harness/cli": "0.1.20",
-    "@truss-harness/provider-openai-compatible": "0.1.12",
-    "@truss-harness/runtime": "0.1.10"
+    "@truss-harness/cli": "^0.1.22",
+    "@truss-harness/provider-openai-compatible": "^0.1.14",
+    "@truss-harness/runtime": "^0.1.11"
   },
   "devDependencies": {
     "@types/react": "^19.2.0"