@wenathlan/devthink 1.1.8 → 1.1.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.1.9 — Unified terminal workspace
+
+This release reconstructs DevThink as one command-first terminal workspace across its static React workbench and interactive CLI. The browser is the route-addressable React surface; the CLI is a React Ink terminal surface with the same categories, empty states, local credential boundary and command rail.
+
+| Area | Change |
+| --- | --- |
+| Shared information architecture | Aligns `features`, `bugs`, `refactor`, `snippets`, `tasks`, `notes`, `all` and `settings` across web and CLI. |
+| Browser workbench | Replaces the dashboard shell with a sparse black terminal workspace, top category strip, central canvas and bottom command rail. |
+| Interactive CLI | Adds an Ink React renderer for TTY sessions, preserving the canonical ANSI fallback for noninteractive and compatibility contexts. |
+| Binary portability | Uses Ink rather than a native TUI dependency so Bun can bundle the CLI for Linux, macOS and Windows release targets. |
+| Release metadata | Aligns the CLI, static workbench, mobile shell, extension and package adapters on version 1.1.9. |
+
 ## 1.1.8 — Workflow trust boundaries and package adapters
 
 This release removes `workflow_run` as a trigger from privileged distribution workflows. Publishing jobs now check out only a release tag or a manually supplied authenticated release tag, preventing a completed workflow from selecting arbitrary source code before package or release credentials become available.

package/devthink.ts

@@ -116,7 +116,7 @@ function printEvents(events: ChatEvent[], json: boolean): void {
   process.stdout.write("\n");
 }
 
-async function runChat(prompt: string, parsed: ParsedArgs, runtime: ReturnType<typeof loadRuntime>, current?: Session): Promise<Session | undefined> {
+async function runChat(prompt: string, parsed: ParsedArgs, runtime: ReturnType<typeof loadRuntime>, current?: Session, render?: { onEvent?: (event: ChatEvent) => void; silent?: boolean }): Promise<Session | undefined> {
   const provider = stringFlag(parsed, "provider") || runtime.config.activeProvider || runtime.config.provider;
   const model = stringFlag(parsed, "model") || runtime.config.activeModel || runtime.config.model;
   const mode = stringFlag(parsed, "mode") || "chat";
@@ -137,7 +137,8 @@ async function runChat(prompt: string, parsed: ParsedArgs, runtime: ReturnType<t
     events.push(event);
     if (event.type === "text") text += event.text;
     if (event.type === "reasoning") reasoning += event.text;
-    if (!json) {
+    render?.onEvent?.(event);
+    if (!json && !render?.silent) {
       const rendered = formatEvent(event);
       if (rendered) process.stdout.write(rendered);
     }
@@ -145,7 +146,7 @@ async function runChat(prompt: string, parsed: ParsedArgs, runtime: ReturnType<t
   const withAssistant = appendMessage(runtime.paths, nextSession, { role: "assistant", content: text });
   runtime.memory.remember({ layer: "session", key: withAssistant.id, content: text.slice(0, 2000) });
   if (json) console.log(JSON.stringify({ workspaceId: withAssistant.workspaceId, sessionId: withAssistant.id, tabId: withAssistant.activeTabId, messageId: withAssistant.messages.at(-1)?.id, provider, model, mode: modeDefinition.id, text, reasoning }));
-  else process.stdout.write("\n");
+  else if (!render?.silent) process.stdout.write("\n");
   return withAssistant;
 }
 
@@ -267,6 +268,14 @@ function handleRoutes(): void {
 }
 
 async function interactive(runtime: ReturnType<typeof loadRuntime>): Promise<void> {
+  if (process.stdin.isTTY && process.stdout.isTTY && process.env.DEVTHINK_PLAIN !== "1") {
+    try {
+      const { startTerminalWorkspace } = await import("./terminal-ui.tsx");
+      return await startTerminalWorkspace(runtime, version(), (prompt, current, onEvent) => runChat(prompt, { flags: { mode: runtime.config.mode || "chat" }, positional: [] }, runtime, current, { onEvent, silent: true }));
+    } catch (error) {
+      process.stderr.write(`${colors.yellow}Terminal workspace fallback: ${error instanceof Error ? error.message : "renderer unavailable"}${colors.reset}\n`);
+    }
+  }
   const input = createInterface({ input: stdin, output: stdout, terminal: true });
   let session: Session | undefined;
   let mode = runtime.config.mode || "chat";

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "@wenathlan/devthink",
-  "version": "1.1.8",
-  "description": "DevThink is an AI development workbench with provider-owned endpoints, normalized streaming, sessions, memory, an embedded gateway and a terminal/web interface.",
-  "license": "MIT",
-  "type": "module",
-  "bin": {
-    "devthink": "./devthink.ts"
+  "version": "1.1.9",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wenathlan/devthink"
+  },
+  "dependencies": {
+    "ink": "^7.1.1",
+    "react": "^19.2.8"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "bun-types": "^1.4.0"
   },
   "exports": {
     ".": "./devthink.ts",
@@ -20,27 +26,26 @@
     "./stream": "./stream.ts",
     "./sync": "./sync.ts"
   },
+  "bin": {
+    "devthink": "./devthink.ts"
+  },
+  "bugs": {
+    "url": "https://github.com/wenathlan/devthink/issues"
+  },
+  "description": "DevThink is an AI development workbench with provider-owned endpoints, normalized streaming, sessions, memory, an embedded gateway and a terminal/web interface.",
+  "engines": {
+    "bun": ">=1.1.1",
+    "node": ">=26.7.0"
+  },
   "files": [
     "*.ts",
+    "*.tsx",
     "README.md",
     "LICENSE",
     "CHANGELOG.md",
     "release-notes"
   ],
-  "scripts": {
-    "start": "bun run devthink.ts",
-    "dev": "bun --watch run devthink.ts",
-    "test": "node --experimental-strip-types --test tests/*.test.ts",
-    "check": "bun run check:secrets && bun run test",
-    "check:secrets": "bun run check-secrets.ts",
-    "build:binary": "bun run build.ts",
-    "build": "bun build ./devthink.ts --outdir dist --target bun",
-    "release": "bun run check && bun run build:binary"
-  },
-  "engines": {
-    "bun": ">=1.1.1",
-    "node": ">=26.7.0"
-  },
+  "homepage": "https://wenathlan.github.io/devthink/",
   "keywords": [
     "ai",
     "cli",
@@ -52,16 +57,20 @@
     "embedded-gateway",
     "web-workbench"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/wenathlan/devthink"
-  },
-  "homepage": "https://wenathlan.github.io/devthink/",
-  "bugs": {
-    "url": "https://github.com/wenathlan/devthink/issues"
-  },
+  "license": "MIT",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
-  }
+  },
+  "scripts": {
+    "start": "bun run devthink.ts",
+    "dev": "bun --watch run devthink.ts",
+    "test": "node --experimental-strip-types --test tests/*.test.ts",
+    "check": "bun run check:secrets && bun run test",
+    "check:secrets": "bun run check-secrets.ts",
+    "build:binary": "bun run build.ts",
+    "build": "bun build ./devthink.ts --outdir dist --target bun",
+    "release": "bun run check && bun run build:binary"
+  },
+  "type": "module"
 }

package/terminal-ui.tsx

@@ -0,0 +1,86 @@
+/** Style: DevThink Unified Terminal Workspace — Ink renders the same sparse categories, canvas and command rail as web/TerminalWorkspace. */
+import { Box, Text, render, useApp, useInput, useWindowSize } from "ink";
+import { useState } from "react";
+import type { DevThinkConfig } from "./config.ts";
+import type { ChatEvent } from "./stream.ts";
+import type { Session } from "./session.ts";
+
+const categories = ["features", "bugs", "refactor", "snippets", "tasks", "notes", "all", "settings"] as const;
+const categoryGlyphs: Record<(typeof categories)[number], string> = { features: "ϟ", bugs: "⊗", refactor: "◌", snippets: "◫", tasks: "☑", notes: "□", all: "◉", settings: "⚙" };
+
+type Runtime = { config: DevThinkConfig };
+type Execute = (prompt: string, current: Session | undefined, onEvent: (event: ChatEvent) => void) => Promise<Session | undefined>;
+type Entry = { role: "user" | "devthink" | "error"; title: string; body: string };
+
+function clip(value: string, width: number): string {
+  return value.length > width ? `${value.slice(0, Math.max(0, width - 1))}…` : value;
+}
+
+function TerminalWorkspace({ runtime, execute, version }: { runtime: Runtime; execute: Execute; version: string }) {
+  const { exit } = useApp();
+  const { columns } = useWindowSize();
+  const [active, setActive] = useState<(typeof categories)[number]>("all");
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [session, setSession] = useState<Session>();
+  const [draft, setDraft] = useState("");
+  const [pending, setPending] = useState(false);
+  const provider = runtime.config.activeProvider || runtime.config.provider || "local";
+  const model = runtime.config.activeModel || runtime.config.model || "not configured";
+  const compact = columns < 100;
+  const tabLine = compact ? categories.map((category) => categoryGlyphs[category]).join(" ") : categories.map((category) => `${category === active ? "[" : ""}${categoryGlyphs[category]} ${category}${category === active ? "]" : ""}`).join("  ");
+  const terminalWidth = Math.max(38, columns - (compact ? 2 : 6));
+
+  async function submit() {
+    const prompt = draft.trim();
+    if (!prompt || pending) return;
+    if (prompt === "/exit" || prompt === "/quit") return exit();
+    if (prompt === "/clear") { setEntries([]); setDraft(""); return; }
+    if (prompt === "/new") { setSession(undefined); setEntries([]); setDraft(""); return; }
+    if (prompt === "/help") {
+      setEntries((current) => [...current, { role: "devthink", title: "command reference", body: "/new  /clear  /models  /modes  /sessions  /exit" }]);
+      setDraft("");
+      return;
+    }
+    setEntries((current) => [...current, { role: "user", title: active, body: prompt }, { role: "devthink", title: "connecting", body: "waiting for local gateway events…" }]);
+    setDraft("");
+    setPending(true);
+    let partial = "";
+    try {
+      const next = await execute(prompt, session, (event) => {
+        if (event.type === "text" || event.type === "reasoning") partial += event.text;
+        setEntries((current) => current.map((entry, index) => index === current.length - 1 ? { ...entry, title: event.type === "start" ? "streaming" : "devthink", body: partial || "connecting to local provider…" } : entry));
+      });
+      setSession(next);
+      setEntries((current) => current.map((entry, index) => index === current.length - 1 ? { ...entry, title: "devthink", body: partial || next?.messages.at(-1)?.content || "the provider returned no text." } : entry));
+    } catch (error) {
+      setEntries((current) => current.map((entry, index) => index === current.length - 1 ? { role: "error", title: "gateway error", body: error instanceof Error ? error.message : "request could not be completed" } : entry));
+    } finally { setPending(false); }
+  }
+
+  useInput((input, key) => {
+    if (key.escape || (key.ctrl && input === "c")) return exit();
+    if (key.leftArrow || key.tab) return setActive((current) => categories[(categories.indexOf(current) + categories.length - 1) % categories.length]);
+    if (key.rightArrow) return setActive((current) => categories[(categories.indexOf(current) + 1) % categories.length]);
+    if (key.return) return void submit();
+    if (key.backspace || key.delete) return setDraft((current) => current.slice(0, -1));
+    if (!key.ctrl && !key.meta && input) setDraft((current) => current + input);
+  });
+
+  return <Box flexDirection="column" width="100%" height="100%" minHeight={20} paddingX={compact ? 1 : 3} paddingY={1}>
+    <Text color="#a19a91">{clip(`▣ DEVTHINK  ${tabLine}`, terminalWidth - 2)} <Text color="#8ab4f8">{provider.toUpperCase()}</Text></Text>
+    <Text color="#282724">{"─".repeat(terminalWidth)}</Text>
+    <Text color="#e8e1d7">{categoryGlyphs[active]} {active.toUpperCase()} ENTRIES <Text color="#746f66">· {entries.length} entries · {clip(model, 22)}</Text></Text>
+    <Box flexDirection="column" flexGrow={1} justifyContent={entries.length ? "flex-start" : "center"} alignItems={entries.length ? "flex-start" : "center"}>
+      {entries.length ? entries.map((entry, index) => <Box key={`${entry.title}-${index}`} flexDirection="column" marginBottom={1} paddingLeft={1}><Box><Text color={entry.role === "user" ? "#ff5f00" : entry.role === "error" ? "#ff6b6b" : "#8ab4f8"}>▎ {entry.title.toUpperCase()}</Text></Box><Box><Text color="#e8e1d7">{clip(entry.body, terminalWidth - 6)}</Text></Box></Box>) : <Box flexDirection="column" alignItems="center"><Box><Text color="#4b4842">no {active === "all" ? "entries" : active} planned yet.</Text></Box><Box><Text color="#625c54">think {active === "all" ? "feature add a local provider" : `${active} …`}</Text></Box><Box marginTop={2}><Text color="#ff5f00" bold>DEVTHINK</Text></Box></Box>}
+    </Box>
+    <Text color="#282724">┌{"─".repeat(Math.max(16, terminalWidth - 2))}┐</Text>
+    <Text color="#e8e1d7">│ <Text color="#ff5f00">›_ </Text><Text color={draft ? "#e8e1d7" : "#746f66"}>{clip(draft || `think ${active === "all" ? "feature, bug, task, note…" : `${active} …`}`, Math.max(12, terminalWidth - 20))}</Text><Text color="#8ab4f8"> {provider}</Text><Text color="#ff5f00"> [run]</Text> │</Text>
+    <Text color="#282724">└{"─".repeat(Math.max(16, terminalWidth - 2))}┘</Text>
+    <Text color="#746f66">provider credentials stay in the local cli · v{version} · esc exit</Text>
+  </Box>;
+}
+
+export async function startTerminalWorkspace(runtime: Runtime, version: string, execute: Execute): Promise<void> {
+  const app = render(<TerminalWorkspace runtime={runtime} version={version} execute={execute} />, { exitOnCtrlC: false });
+  await app.waitUntilExit();
+}

package/ui.ts

@@ -1,12 +1,15 @@
+/** Style: DevThink Orbital Signal Room — terminal workspace uses canonical ANSI art, orange intent and orb-blue connection states. */
 import type { ChatEvent } from "./stream.ts";
 
 export const colors = {
-  background: "\u001b[38;5;236m",
-  panel: "\u001b[38;5;238m",
-  text: "\u001b[38;5;252m",
-  muted: "\u001b[38;5;245m",
-  cyan: "\u001b[38;5;116m",
-  blue: "\u001b[38;5;110m",
+  background: "\u001b[38;5;234m",
+  panel: "\u001b[38;5;240m",
+  text: "\u001b[38;5;255m",
+  muted: "\u001b[38;5;246m",
+  cyan: "\u001b[38;5;117m",
+  blue: "\u001b[38;5;111m",
+  orange: "\u001b[38;5;208m",
+  orangeSoft: "\u001b[38;5;215m",
   green: "\u001b[38;5;151m",
   red: "\u001b[38;5;167m",
   yellow: "\u001b[38;5;222m",
@@ -14,7 +17,7 @@ export const colors = {
   bold: "\u001b[1m",
 };
 
-const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧"];
+const frames = ["◐", "◓", "◑", "◒"];
 
 /** Canonical DevThink ANSI mark transcribed from docs/logo.md. */
 const canonicalMark = String.raw`
@@ -77,38 +80,56 @@ function color(code: string, value: string): string {
   return `${code}${value}${colors.reset}`;
 }
 
+function stripAnsi(value: string): string {
+  return value.replace(/\u001b\[[0-?]*[ -/]*[@-~]/g, "");
+}
+
 function pad(value: string, width: number): string {
-  return value.length >= width ? value.slice(0, width) : value + " ".repeat(width - value.length);
+  const visible = stripAnsi(value);
+  return visible.length >= width ? value.slice(0, Math.max(0, width - Math.max(0, visible.length - width))) : value + " ".repeat(width - visible.length);
 }
 
 export function banner(version: string): string {
-  const mark = canonicalMark.split("\n").map((line) => color(colors.yellow, line)).join("\n");
-  const title = color(colors.yellow + colors.bold, "DEVTHINK");
-  return [mark, `${title} ${color(colors.muted, `v${version}`)}`, color(colors.muted, "Embedded gateway · terminal workbench · user-owned configuration")].join("\n");
+  const mark = canonicalMark.split("\n").map((line) => color(colors.orange, line)).join("\n");
+  const title = color(colors.orange + colors.bold, "DEVTHINK");
+  const signal = color(colors.blue, "◆ local workspace");
+  return [
+    color(colors.muted, "╭────────────────────────────── signal workspace ──────────────────────────────╮"),
+    mark,
+    `  ${title} ${color(colors.muted, `v${version}`)}  ${signal}`,
+    `  ${color(colors.muted, "route the work · keep provider credentials local · ctrl+p commands")}`,
+    color(colors.muted, "╰────────────────────────────────────────────────────────────────────────────────╯"),
+  ].join("\n");
 }
 
 export function box(title: string, content: string, width = 76): string {
   const innerWidth = Math.max(20, width - 4);
-  const top = `╭─ ${color(colors.cyan, title)} ${"─".repeat(Math.max(0, innerWidth - title.length - 3))}╮`;
-  const body = content.split("\n").map((line) => `│ ${pad(line, innerWidth)} │`);
+  const top = `╭─ ${color(colors.orange, title)} ${color(colors.muted, "─".repeat(Math.max(0, innerWidth - title.length - 3)))}╮`;
+  const body = content.split("\n").map((line) => `│ ${color(colors.blue, "▎")} ${pad(line, innerWidth - 2)} │`);
   return [top, ...body, `╰${"─".repeat(width - 2)}╯`].join("\n");
 }
 
 export function statusBar(provider: string, model: string, mode: string): string {
-  return color(colors.muted, `[${provider || "not configured"}] [${model || "not configured"}] [${mode}]`);
+  const providerLabel = provider || "not configured";
+  const modelLabel = model || "not configured";
+  return [
+    color(colors.orange, "◆"), color(colors.text, providerLabel),
+    color(colors.muted, "/"), color(colors.blue, modelLabel),
+    color(colors.muted, "·"), color(colors.cyan, mode),
+  ].join(" ");
 }
 
 export function spinnerFrame(index: number, message: string): string {
-  return `${color(colors.cyan, frames[index % frames.length])} ${message}`;
+  return `${color(colors.blue, frames[index % frames.length])} ${color(colors.muted, "stream")} ${message}`;
 }
 
 export function formatEvent(event: ChatEvent): string {
   if (event.type === "text") return event.text;
-  if (event.type === "reasoning") return color(colors.muted, event.text);
+  if (event.type === "reasoning") return `${color(colors.blue, "·")} ${color(colors.muted, event.text)}`;
   if (event.type === "error") return color(colors.red, event.message);
   if (event.type === "finish") return "";
-  if (event.type === "start") return color(colors.muted, `Connected to ${event.provider} / ${event.model}`);
-  return color(colors.blue, `${event.name}: ${JSON.stringify(event.input)}`);
+  if (event.type === "start") return `${color(colors.blue, "◆")} ${color(colors.text, "connected")} ${color(colors.muted, `${event.provider} / ${event.model}`)}`;
+  return `${color(colors.orange, "→")} ${color(colors.blue, event.name)} ${color(colors.muted, JSON.stringify(event.input))}`;
 }
 
 export function suggestions(input: string, values: string[], limit = 8): string[] {