@wenathlan/devthink 1.1.10 → 1.1.12

package/CHANGELOG.md

@@ -1,4 +1,30 @@
 # DevThink release notes
+## 1.1.12 — Page domains and tabbed interaction
+
+### Added
+
+| Area | Addition |
+| --- | --- |
+| Page-domain topology | The web workbench now keeps each route anchor and its local visual logic in its named domain, with `home`, `providers`, `projects`, `routes`, `usage`, `notfound`, `app` and `primitives` replacing generic `components` and `pages` directories. |
+| Canonical local database | DevThink now uses `~/.config/devthink/devthink.db` as the canonical SQLite path and safely seeds it from the legacy `devthink.sqlite` file when needed. |
+| Shared workbench preferences | Theme, rail mode and interface zoom are stored in the CLI-owned database, exposed only through authenticated local gateway endpoints, and configurable with `devthink config set`. |
+| Interactive Settings parity | The web Settings panel and Ink `/settings` view can both inspect and change shared presentation preferences without receiving provider credentials. |
+| Tab-first workspace frame | The workbench promotes the browser-like tab row as its primary navigation and permits an `always`, `auto` or `off` local navigation rail. |
+| Consolidated identity | The entry screen centers the product wordmark over the canonical ANSI mark while the workspace keeps the rail as its single optional identity surface. |
+| Mutation boundary | JSON-bearing gateway mutations now require an explicit JSON content type; pairing, bearer authorization and local-only provider credential boundaries remain intact. |
+
+## 1.1.11 — Web-CLI parity and visual renewal
+
+### Added
+
+| Area | Addition |
+| --- | --- |
+| Shared workspace contract | A renderer-neutral TypeScript destination model aligns chat, history, projects, providers, usage, routes and settings across the React web workbench and React Ink CLI. |
+| Real session navigation | The web chrome now renders actual local session tabs, creates and closes tabs, and exposes a local history view without removing direct routes. |
+| CLI control views | The interactive CLI now provides keyboard and slash-command access to local history, projects, providers, usage, routes and settings. |
+| Browser rail | A responsive dark local rail keeps preserved control pages discoverable from the primary workspace while retaining their bookmarkable routes. |
+| Entry refinement | The canonical ANSI mark, product wordmark, primary composer and local suggestions form a quieter first-intention surface. |
+| Design records | Version-scoped inventory, reference synthesis and parity contract documents make the product surface and local-only security boundary explicit. |
 
 ## 1.1.10 — Entry and browser-workspace redesign
 

package/build.ts

@@ -6,7 +6,7 @@ type BunRuntime = {
 };
 
 function bunRuntime(): BunRuntime {
-  const runtime = (globalThis as { Bun?: BunRuntime }).Bun;
+  const runtime = (globalThis as unknown as { Bun?: BunRuntime }).Bun;
   if (!runtime) throw new Error("Bun is required to compile DevThink binaries.");
   return runtime;
 }

package/config.ts

@@ -1,4 +1,4 @@
-import { existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
+import { copyFileSync, existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
 import { homedir, platform } from "node:os";
 import { join } from "node:path";
 
@@ -43,6 +43,7 @@ export type DevThinkPaths = {
   sessions: string;
   workspaces: string;
   database: string;
+  legacyDatabase: string;
   memory: string;
   logs: string;
 };
@@ -56,11 +57,14 @@ function resolveHome(): string {
 }
 
 export function resolvePaths(root = resolveHome()): DevThinkPaths {
-  return { home: root, config: join(root, "devthink.json"), auth: join(root, "auth.json"), identity: join(root, "identity.json"), pairings: join(root, "pairings.json"), legacyConfig: join(root, "config.json"), sessions: join(root, "sessions"), workspaces: join(root, "workspaces"), database: join(root, "devthink.sqlite"), memory: join(root, "memory"), logs: join(root, "logs") };
+  return { home: root, config: join(root, "devthink.json"), auth: join(root, "auth.json"), identity: join(root, "identity.json"), pairings: join(root, "pairings.json"), legacyConfig: join(root, "config.json"), sessions: join(root, "sessions"), workspaces: join(root, "workspaces"), database: join(root, "devthink.db"), legacyDatabase: join(root, "devthink.sqlite"), memory: join(root, "memory"), logs: join(root, "logs") };
 }
 
 export function ensurePaths(paths = resolvePaths()): DevThinkPaths {
   for (const path of [paths.home, paths.sessions, paths.workspaces, paths.memory, paths.logs]) mkdirSync(path, { recursive: true });
+  if (!existsSync(paths.database) && existsSync(paths.legacyDatabase)) {
+    try { copyFileSync(paths.legacyDatabase, paths.database); } catch { /* The JSON session records remain the safe compatibility fallback. */ }
+  }
   return paths;
 }
 
@@ -197,7 +201,9 @@ export function resolveCredential(provider: string, config: DevThinkConfig, path
   }
   const property = `${provider}ApiKey` as keyof DevThinkConfig;
   const nested = config.providers?.[provider];
-  return nested?.auth?.value || nested?.apiKey || config[property] || (provider === (config.activeProvider || config.provider) ? config.apiKey : undefined) || process.env.DEVTHINK_API_KEY?.trim();
+  const legacy = config[property];
+  const legacyValue = typeof legacy === "string" ? legacy : undefined;
+  return nested?.auth?.value || nested?.apiKey || legacyValue || (provider === (config.activeProvider || config.provider) ? config.apiKey : undefined) || process.env.DEVTHINK_API_KEY?.trim();
 }
 
 export function redactValue(value: unknown): unknown {

package/devthink.ts

@@ -9,6 +9,7 @@ import { listModes, modePrompt, resolveMode } from "./modes.ts";
 import { listModels, listProviders, streamChat } from "./providers.ts";
 import { appendMessage, createSession, exportSession, listSessions, loadSession, type Session } from "./session.ts";
 import { createPairing, createPairingLink, getIdentity, pairingStatus, revokeBrowserSessions } from "./identity.ts";
+import { readPreferences, savePreference } from "./storage.ts";
 import type { ChatEvent } from "./stream.ts";
 import { banner, box, colors, formatConfig, formatEvent, statusBar } from "./ui.ts";
 import { startServer } from "./server.ts";
@@ -67,6 +68,8 @@ function printHelp(): void {
     "  models --provider <id>    List provider models",
     "  modes                     List the 20 operational modes",
     "  config [key] [value]      Read or write local configuration",
+    "  config preferences         Show shared workbench preferences",
+    "  config set <key> <value>  Set theme, railMode, or interfaceZoom",
     "  auth login <provider>     Save a user-provided official credential",
     "  auth status               Show redacted configured credential sources",
     "  auth clear <provider>     Remove a stored provider credential",
@@ -151,7 +154,18 @@ async function runChat(prompt: string, parsed: ParsedArgs, runtime: ReturnType<t
 }
 
 async function handleConfig(parsed: ParsedArgs, runtime: ReturnType<typeof loadRuntime>): Promise<void> {
-  const key = parsed.positional[1];
+  const action = parsed.positional[1];
+  if (action === "preferences") return console.log(JSON.stringify(Object.fromEntries(Object.entries(readPreferences(runtime.paths)).map(([key, preference]) => [key, preference.value])), null, 2));
+  if (action === "set") {
+    const key = parsed.positional[2];
+    const value = parsed.positional[3];
+    if (!key || !value) throw new Error("Usage: devthink config set <theme|railMode|interfaceZoom> <value>");
+    const valid = (key === "theme" && ["dark", "light"].includes(value)) || (key === "railMode" && ["always", "auto", "off"].includes(value)) || (key === "interfaceZoom" && /^(?:[8-9][0-9]|1[0-4][0-9]|150)$/.test(value));
+    if (!valid) throw new Error("Supported values: theme dark|light; railMode always|auto|off; interfaceZoom 80-150.");
+    savePreference(runtime.paths, key, value);
+    return console.log(`${key} updated.`);
+  }
+  const key = action;
   const raw = parsed.positional[2];
   if (!key) return console.log(formatConfig(redactConfig(runtime.config)));
   if (raw === undefined) return console.log(`${key} = ${JSON.stringify(getConfigValue(runtime.config, key))}`);
@@ -264,7 +278,7 @@ function handleUsage(runtime: ReturnType<typeof loadRuntime>): void {
 }
 
 function handleRoutes(): void {
-  console.log(["web: /", "web: /providers", "web: /projects", "web: /routes", "web: /usage", "web: /w/:workspaceId/s/:sessionId/t/:tabId/:sectionId", "gateway: GET /health", "gateway: GET /providers", "gateway: GET /workspaces", "gateway: GET /usage", "gateway: POST /sessions", "gateway: POST /chat"].join("\n"));
+  console.log(["web: /", "web: /providers", "web: /projects", "web: /routes", "web: /usage", "web: /w/:workspaceId/s/:sessionId/t/:tabId/:sectionId", "gateway: GET /health", "gateway: GET /providers", "gateway: GET /workspaces", "gateway: GET /usage", "gateway: GET /preferences", "gateway: PATCH /preferences", "gateway: POST /sessions", "gateway: POST /chat"].join("\n"));
 }
 
 async function interactive(runtime: ReturnType<typeof loadRuntime>): Promise<void> {

package/memory.ts

@@ -80,7 +80,7 @@ export function createMemoryStore(paths: DevThinkPaths) {
       return undefined;
     },
     list(layer?: MemoryLayer, sessionId?: string): MemoryEntry[] {
-      const layers = layer ? [layer] : ["session", "project", "global"];
+      const layers: MemoryLayer[] = layer ? [layer] : ["session", "project", "global"];
       return layers.flatMap((item) => readEntries(memoryFile(paths, item, sessionId), item));
     },
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wenathlan/devthink",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "repository": {
     "type": "git",
     "url": "https://github.com/wenathlan/devthink"

package/server.ts

@@ -5,6 +5,7 @@ import { listModels, listProviders, streamChat, type ChatMessage } from "./provi
 import { ensurePaths, resolvePaths, saveConfig, type DevThinkConfig, type DevThinkPaths } from "./config.ts";
 import { consumePairing, getIdentity, pairingStatus, revokeBrowserSessions, verifyBrowserSession } from "./identity.ts";
 import { appendMessage, createSession, createTab, listSessions, loadSession, loadWorkspace, updateTab, type SessionSection } from "./session.ts";
+import { readPreferences, savePreference } from "./storage.ts";
 
 export type ServerOptions = {
   port?: number;
@@ -47,6 +48,12 @@ async function readBody(request: IncomingMessage): Promise<Record<string, unknow
   return parsed && typeof parsed === "object" ? (parsed as Record<string, unknown>) : {};
 }
 
+function acceptsJson(request: IncomingMessage): boolean {
+  return request.headers["content-type"]?.toLowerCase().includes("application/json") === true;
+}
+
+const browserPreferenceKeys = new Set(["theme", "railMode", "interfaceZoom"]);
+
 function messagesFromBody(value: unknown): ChatMessage[] {
   if (!Array.isArray(value)) throw new Error("messages must be an array.");
   return value.map((item) => {
@@ -107,9 +114,12 @@ async function route(request: IncomingMessage, response: ServerResponse, config:
     response.setHeader("access-control-allow-headers", "authorization, content-type");
     response.setHeader("vary", "Origin");
     response.writeHead(204);
-    return response.end();
+    response.end();
+    return;
   }
   if (request.headers.origin && !origin) return writeJson(response, 403, { error: "Origin is not allowed by web.allowedOrigins." });
+  const mutationWithBody = ["POST", "PATCH", "PUT"].includes(request.method || "") && url.pathname !== "/pairings/revoke";
+  if (mutationWithBody && !acceptsJson(request)) return writeJson(response, 415, { error: "JSON content-type is required for mutation requests." }, origin);
   if (request.method === "GET" && url.pathname === "/health") return writeJson(response, 200, { status: "ok", service: "devthink" }, origin);
   if (request.method === "GET" && url.pathname === "/providers") return writeJson(response, 200, listProviders().map(({ id, protocol, env }) => ({ id, protocol, env })), origin);
   if (request.method === "GET" && url.pathname === "/models") {
@@ -144,6 +154,16 @@ async function route(request: IncomingMessage, response: ServerResponse, config:
     const messageCount = sessions.reduce((total, session) => total + session.messages.length, 0);
     return writeJson(response, 200, { workspaces: new Set(sessions.map((session) => session.workspaceId)).size, sessions: sessions.length, tabs: tabCount, messages: messageCount, providers: listProviders().length, paired: pairingStatus(paths).activeSessions > 0 }, origin);
   }
+  if (request.method === "GET" && url.pathname === "/preferences") {
+    return writeJson(response, 200, { preferences: Object.fromEntries(Object.entries(readPreferences(paths)).map(([key, preference]) => [key, preference.value])) }, origin);
+  }
+  if (request.method === "PATCH" && url.pathname === "/preferences") {
+    const body = await readBody(request);
+    const key = typeof body.key === "string" ? body.key : "";
+    const value = typeof body.value === "string" ? body.value : "";
+    if (!browserPreferenceKeys.has(key) || !value || value.length > 32) return writeJson(response, 400, { error: "Preference is not supported." }, origin);
+    return writeJson(response, 200, { preference: savePreference(paths, key, value) }, origin);
+  }
   if (request.method === "PATCH" && url.pathname === "/providers/active") {
     const body = await readBody(request);
     const provider = typeof body.provider === "string" ? body.provider : "";

package/storage.ts

@@ -1,7 +1,7 @@
 /** DevThink local store: mirrors credential-free workbench records into a physical SQLite database. */
 import type { DevThinkPaths } from "./config.ts";
 
-type Statement = { run: (...values: unknown[]) => unknown };
+type Statement = { run: (...values: unknown[]) => unknown; all: (...values: unknown[]) => unknown[] };
 type Database = { exec: (sql: string) => unknown; prepare: (sql: string) => Statement; close: () => void };
 type DatabaseConstructor = new (path: string) => Database;
 
@@ -12,6 +12,7 @@ export type StoredWorkspace = { id: string; title: string; createdAt: string; up
 export type StoredTab = { id: string; sessionId: string; workspaceId: string; label: string; provider?: string; sectionId: string; createdAt: string; updatedAt: string };
 export type StoredMessage = { id: string; sessionId: string; workspaceId: string; tabId: string; sectionId: string; role: string; content: string; createdAt: string };
 export type StoredSession = { id: string; workspaceId: string; title: string; mode: string; model?: string; provider?: string; activeTabId: string; createdAt: string; updatedAt: string; tabs: StoredTab[]; messages: StoredMessage[] };
+export type StoredPreference = { key: string; value: string; updatedAt: string };
 
 function initialize(database: Database): void {
   database.exec(`
@@ -21,6 +22,7 @@ function initialize(database: Database): void {
     CREATE TABLE IF NOT EXISTS sessions (id TEXT PRIMARY KEY, workspace_id TEXT NOT NULL, title TEXT NOT NULL, mode TEXT NOT NULL, model TEXT, provider TEXT, active_tab_id TEXT NOT NULL, created_at TEXT NOT NULL, updated_at TEXT NOT NULL);
     CREATE TABLE IF NOT EXISTS tabs (id TEXT PRIMARY KEY, session_id TEXT NOT NULL, workspace_id TEXT NOT NULL, label TEXT NOT NULL, provider TEXT, section_id TEXT NOT NULL, created_at TEXT NOT NULL, updated_at TEXT NOT NULL);
     CREATE TABLE IF NOT EXISTS messages (id TEXT PRIMARY KEY, session_id TEXT NOT NULL, workspace_id TEXT NOT NULL, tab_id TEXT NOT NULL, section_id TEXT NOT NULL, role TEXT NOT NULL, content TEXT NOT NULL, created_at TEXT NOT NULL);
+    CREATE TABLE IF NOT EXISTS preferences (key TEXT PRIMARY KEY, value TEXT NOT NULL, updated_at TEXT NOT NULL);
     CREATE INDEX IF NOT EXISTS sessions_workspace_updated ON sessions(workspace_id, updated_at DESC);
     CREATE INDEX IF NOT EXISTS tabs_session_updated ON tabs(session_id, updated_at DESC);
     CREATE INDEX IF NOT EXISTS messages_session_created ON messages(session_id, created_at ASC);
@@ -49,3 +51,32 @@ export function mirrorSession(paths: DevThinkPaths, workspace: StoredWorkspace,
     database?.close();
   }
 }
+
+/** Reads non-sensitive workbench preferences from the CLI-owned local database. */
+export function readPreferences(paths: DevThinkPaths): Record<string, StoredPreference> {
+  let database: Database | undefined;
+  try {
+    database = new DatabaseDriver(paths.database);
+    initialize(database);
+    const rows = database.prepare("SELECT key, value, updated_at AS updatedAt FROM preferences ORDER BY key ASC").all() as StoredPreference[];
+    return Object.fromEntries(rows.map((row) => [row.key, row]));
+  } catch {
+    return {};
+  } finally {
+    database?.close();
+  }
+}
+
+/** Persists an allowlisted interface preference without mixing it with provider credentials. */
+export function savePreference(paths: DevThinkPaths, key: string, value: string): StoredPreference {
+  const preference = { key, value, updatedAt: new Date().toISOString() };
+  let database: Database | undefined;
+  try {
+    database = new DatabaseDriver(paths.database);
+    initialize(database);
+    database.prepare("INSERT INTO preferences (key, value, updated_at) VALUES (?, ?, ?) ON CONFLICT(key) DO UPDATE SET value = excluded.value, updated_at = excluded.updated_at").run(preference.key, preference.value, preference.updatedAt);
+  } finally {
+    database?.close();
+  }
+  return preference;
+}

package/terminal-ui.tsx

@@ -1,15 +1,18 @@
-/** Design: DevThink v1.1.10 — Ink renders the same landing-to-browser-workspace progression as the React workbench. */
+/** Design: DevThink v1.1.12 — Ink shares local workspace destinations, tab semantics, settings and command language with the React web workbench. */
 import { Box, Text, render, useApp, useInput, useWindowSize } from "ink";
-import { useState } from "react";
-import type { DevThinkConfig } from "./config.ts";
+import { useMemo, useState } from "react";
+import { listProviders } from "./providers.ts";
+import { listSessions, type Session } from "./session.ts";
+import { readPreferences, savePreference } from "./storage.ts";
+import type { DevThinkConfig, DevThinkPaths } from "./config.ts";
 import type { ChatEvent } from "./stream.ts";
-import type { Session } from "./session.ts";
+import { isWorkspaceDestination, workspaceDestination, workspaceDestinations, type WorkspaceDestination } from "./workspace.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: "⚙" };
+const categories = ["features", "bugs", "refactor", "snippets", "tasks", "notes", "all"] as const;
+const categoryGlyphs: Record<(typeof categories)[number], string> = { features: "ϟ", bugs: "⊗", refactor: "◌", snippets: "◫", tasks: "☑", notes: "□", all: "◉" };
 const entryArt = ["                 +++++", "          +++++++++++++++", "      ++++++     ++++++", "    +++++         +++++", "   +++++           +++++", "    +++++         +++++", "      ++++++   ++++++", "          +++++++++++++", "                 +++++"];
 
-type Runtime = { config: DevThinkConfig };
+type Runtime = { config: DevThinkConfig; paths: DevThinkPaths };
 type Execute = (prompt: string, current: Session | undefined, onEvent: (event: ChatEvent) => void) => Promise<Session | undefined>;
 type Entry = { role: "user" | "devthink" | "error"; title: string; body: string };
 
@@ -20,50 +23,83 @@ function clip(value: string, width: number): string {
 function TerminalEntry({ draft, provider, width }: { draft: string; provider: string; width: number }) {
   return <Box flexDirection="column" width="100%" height="100%" minHeight={20} paddingX={2} paddingY={1} justifyContent="space-between">
     <Box justifyContent="space-between"><Text color="#807970">✦ DEVTHINK</Text><Text color="#8ab4f8">LOCAL-FIRST WORKBENCH</Text></Box>
-    <Box flexDirection="column" alignItems="center">
-      <Box flexDirection="column" alignItems="center">{entryArt.map((line, index) => <Text key={`${line}-${index}`} color="#382c23">{line}</Text>)}</Box>
-      <Box marginTop={-1}><Text color="#ff5f00" bold>DEVTHINK</Text></Box>
-      <Box marginTop={1}><Text color="#746f66">begin with one intention</Text></Box>
-      <Box marginTop={2}><Text color="#282724">┌{"─".repeat(Math.max(16, width - 2))}┐</Text></Box>
-      <Text color="#e8e1d7">│ <Text color="#ff5f00">›_ </Text><Text color={draft ? "#e8e1d7" : "#746f66"}>{clip(draft || "Ask anything…", Math.max(12, width - 22))}</Text><Text color="#8ab4f8"> {provider}</Text><Text color="#ff5f00"> [open]</Text> │</Text>
-      <Text color="#282724">└{"─".repeat(Math.max(16, width - 2))}┘</Text>
-    </Box>
+    <Box flexDirection="column" alignItems="center"><Box flexDirection="column" alignItems="center">{entryArt.map((line, index) => <Text key={`${line}-${index}`} color="#382c23">{line}</Text>)}</Box><Box marginTop={-1}><Text color="#ff5f00" bold>DEVTHINK</Text></Box><Box marginTop={1}><Text color="#746f66">begin with one intention</Text></Box><Box marginTop={2}><Text color="#282724">┌{"─".repeat(Math.max(16, width - 2))}┐</Text></Box><Text color="#e8e1d7">│ <Text color="#ff5f00">›_ </Text><Text color={draft ? "#e8e1d7" : "#746f66"}>{clip(draft || "Ask anything…", Math.max(12, width - 22))}</Text><Text color="#8ab4f8"> {provider}</Text><Text color="#ff5f00"> [open]</Text> │</Text><Text color="#282724">└{"─".repeat(Math.max(16, width - 2))}┘</Text></Box>
     <Text color="#746f66">enter opens a local workspace · esc exits</Text>
   </Box>;
 }
 
+function projectRows(runtime: Runtime): string[] {
+  const projects = new Map<string, { title: string; sessions: number }>();
+  for (const session of listSessions(runtime.paths)) projects.set(session.workspaceId, { title: session.title, sessions: (projects.get(session.workspaceId)?.sessions || 0) + 1 });
+  return [...projects.entries()].map(([id, project]) => `${id}  ${project.sessions} ${project.sessions === 1 ? "session" : "sessions"}  ${project.title}`);
+}
+
+function viewRows(view: WorkspaceDestination, runtime: Runtime, session: Session | undefined): string[] {
+  if (view === "history") return listSessions(runtime.paths).map((item) => `${item.id}  ${item.title}`) || ["No saved sessions."];
+  if (view === "projects") return projectRows(runtime) || ["No local projects."];
+  if (view === "providers") return listProviders().map((provider) => `${provider.id}  ${provider.protocol}  ${provider.env}`);
+  if (view === "usage") {
+    const sessions = listSessions(runtime.paths);
+    return [`workspaces ${new Set(sessions.map((item) => item.workspaceId)).size}`, `sessions ${sessions.length}`, `tabs ${sessions.reduce((total, item) => total + item.tabs.length, 0)}`, `messages ${sessions.reduce((total, item) => total + item.messages.length, 0)}`];
+  }
+  if (view === "routes") return ["GET /health", "GET /providers", "GET /workspaces", "GET /usage", "GET /preferences", "PATCH /preferences", "POST /sessions", "POST /chat"];
+  if (view === "settings") {
+    const preferences = Object.fromEntries(Object.entries(readPreferences(runtime.paths)).map(([key, preference]) => [key, preference.value]));
+    return [`theme ${preferences.theme || "dark"}`, `railMode ${preferences.railMode || "auto"}`, `interfaceZoom ${preferences.interfaceZoom || "100"}`, "edit: /settings set theme dark|light", "edit: /settings set railMode always|auto|off", "edit: /settings set interfaceZoom 80-150", "credentials remain in ~/.config/devthink/auth.json"];
+  }
+  if (session) return [`workspace ${session.workspaceId}`, `session ${session.id}`, `tab ${session.activeTabId}`];
+  return ["Describe the next feature, bug or piece of work below."];
+}
+
 function TerminalWorkspace({ runtime, execute, version }: { runtime: Runtime; execute: Execute; version: string }) {
   const { exit } = useApp();
   const { columns } = useWindowSize();
   const [entered, setEntered] = useState(false);
   const [active, setActive] = useState<(typeof categories)[number]>("all");
+  const [view, setView] = useState<WorkspaceDestination>("chat");
   const [entries, setEntries] = useState<Entry[]>([]);
   const [session, setSession] = useState<Session>();
   const [draft, setDraft] = useState("");
   const [pending, setPending] = useState(false);
+  const [preferenceRevision, setPreferenceRevision] = useState(0);
   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));
+  const tabLine = compact ? workspaceDestinations.map((destination) => destination.glyph).join(" ") : workspaceDestinations.map((destination) => `${destination.id === view ? "[" : ""}${destination.glyph} ${destination.label}${destination.id === view ? "]" : ""}`).join("  ");
+  const rows = useMemo(() => viewRows(view, runtime, session), [preferenceRevision, runtime, session, view]);
+
+  function openView(next: WorkspaceDestination) {
+    setView(next);
+    setEntries((current) => [...current, { role: "devthink", title: workspaceDestination(next).label, body: rows.join(" · ") }]);
+  }
 
   async function submit() {
     const prompt = draft.trim();
     if (!prompt || pending) return;
     if (prompt === "/exit" || prompt === "/quit") return exit();
     if (!entered) {
-      setEntries([{ role: "user", title: "first intention", body: prompt }, { role: "devthink", title: "local workspace ready", body: "The first command opened a local DevThink session. Configure a provider whenever the work needs a model." }]);
+      setEntries([{ role: "user", title: "first intention", body: prompt }, { role: "devthink", title: "local workspace ready", body: "The first command opened a local DevThink session. Use arrows or /view to inspect local history, projects, providers, usage, routes and settings." }]);
       setDraft("");
       setEntered(true);
       return;
     }
     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" }]);
+    if (prompt === "/new") { setSession(undefined); setEntries([]); setView("chat"); setDraft(""); return; }
+    const viewMatch = prompt.match(/^\/(?:view\s+)?(chat|history|projects|providers|usage|routes|settings)$/);
+    if (viewMatch && isWorkspaceDestination(viewMatch[1])) { openView(viewMatch[1]); setDraft(""); return; }
+    if (prompt === "/sessions") { openView("history"); setDraft(""); return; }
+    const preferenceMatch = prompt.match(/^\/(?:settings\s+)?set\s+(theme|railMode|interfaceZoom)\s+(\S+)$/);
+    if (preferenceMatch) {
+      const [, key, value] = preferenceMatch;
+      const valid = (key === "theme" && ["dark", "light"].includes(value)) || (key === "railMode" && ["always", "auto", "off"].includes(value)) || (key === "interfaceZoom" && /^(?:[8-9][0-9]|1[0-4][0-9]|150)$/.test(value));
+      if (!valid) setEntries((current) => [...current, { role: "error", title: "settings", body: "Use theme dark|light, railMode always|auto|off, or interfaceZoom 80-150." }]);
+      else { savePreference(runtime.paths, key, value); setPreferenceRevision((current) => current + 1); setView("settings"); setEntries((current) => [...current, { role: "devthink", title: "settings", body: `${key} updated to ${value}.` }]); }
       setDraft("");
       return;
     }
+    if (prompt === "/help") { setEntries((current) => [...current, { role: "devthink", title: "command reference", body: "/view chat|history|projects|providers|usage|routes|settings  /settings set <key> <value>  /new  /clear  /models  /modes  /sessions  /exit" }]); setDraft(""); return; }
+    setView("chat");
     setEntries((current) => [...current, { role: "user", title: active, body: prompt }, { role: "devthink", title: "connecting", body: "waiting for local gateway events…" }]);
     setDraft("");
     setPending(true);
@@ -84,25 +120,27 @@ function TerminalWorkspace({ runtime, execute, version }: { runtime: Runtime; ex
     if (key.escape || (key.ctrl && input === "c")) return exit();
     if (key.return) return void submit();
     if (key.backspace || key.delete) return setDraft((current) => current.slice(0, -1));
-    if (entered && (key.leftArrow || key.tab)) return setActive((current) => categories[(categories.indexOf(current) + categories.length - 1) % categories.length]);
-    if (entered && key.rightArrow) return setActive((current) => categories[(categories.indexOf(current) + 1) % categories.length]);
+    if (entered && key.upArrow) return setView((current) => workspaceDestinations[(workspaceDestinations.findIndex((item) => item.id === current) + workspaceDestinations.length - 1) % workspaceDestinations.length].id);
+    if (entered && key.downArrow) return setView((current) => workspaceDestinations[(workspaceDestinations.findIndex((item) => item.id === current) + 1) % workspaceDestinations.length].id);
+    if (entered && view === "chat" && (key.leftArrow || key.tab)) return setActive((current) => categories[(categories.indexOf(current) + categories.length - 1) % categories.length]);
+    if (entered && view === "chat" && key.rightArrow) return setActive((current) => categories[(categories.indexOf(current) + 1) % categories.length]);
     if (!key.ctrl && !key.meta && input) setDraft((current) => current + input);
   });
 
   if (!entered) return <TerminalEntry draft={draft} provider={provider} width={terminalWidth} />;
 
   return <Box flexDirection="column" width="100%" height="100%" minHeight={20} paddingX={compact ? 1 : 3} paddingY={1}>
-    <Box justifyContent="space-between"><Text color="#a19a91">✦ DEVTHINK <Text color="#746f66">/ local session</Text></Text><Text color="#8ab4f8">◉ {provider.toUpperCase()}</Text></Box>
+    <Box justifyContent="space-between"><Text color="#a19a91">✦ DEVTHINK <Text color="#746f66">/ {workspaceDestination(view).label}</Text></Text><Text color="#8ab4f8">◉ {provider.toUpperCase()}</Text></Box>
     <Text color="#282724">{"─".repeat(terminalWidth)}</Text>
     <Text color="#746f66">{clip(tabLine, terminalWidth)}</Text>
-    <Box marginTop={1}><Text color="#e8e1d7">{categoryGlyphs[active]} {active.toUpperCase()} <Text color="#746f66">· {entries.length} entries · {clip(model, 22)}</Text></Text></Box>
-    <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">Nothing is active yet.</Text></Box><Box><Text color="#625c54">Describe the next feature, bug or piece of work below.</Text></Box><Box marginTop={2}><Text color="#ff5f00" bold>DEVTHINK</Text></Box></Box>}
+    <Box marginTop={1}><Text color="#e8e1d7">{workspaceDestination(view).glyph} {workspaceDestination(view).label.toUpperCase()} <Text color="#746f66">· {clip(model, 22)}</Text></Text></Box>
+    <Box flexDirection="column" flexGrow={1} justifyContent={entries.length && view === "chat" ? "flex-start" : "center"} alignItems={entries.length && view === "chat" ? "flex-start" : "center"}>
+      {view !== "chat" ? rows.map((row, index) => <Text key={`${view}-${index}`} color={index === 0 ? "#e8e1d7" : "#746f66"}>▎ {clip(row, terminalWidth - 4)}</Text>) : 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"><Text color="#4b4842">Nothing is active yet.</Text><Text color="#625c54">Describe the next feature, bug or piece of work below.</Text><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 || `Ask DevThink about ${active === "all" ? "the work…" : `${active}…`}`, Math.max(12, terminalWidth - 20))}</Text><Text color="#8ab4f8"> {provider}</Text><Text color="#ff5f00"> [run]</Text> │</Text>
+    <Text color="#e8e1d7">│ <Text color="#ff5f00">›_ </Text><Text color={draft ? "#e8e1d7" : "#746f66"}>{clip(draft || (view === "chat" ? `Ask DevThink about ${active === "all" ? "the work…" : `${active}…`}` : `Type /view chat to return…`), 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>
+    <Text color="#746f66">↑↓ destinations · ←→ categories · /help commands · v{version} · esc exit</Text>
   </Box>;
 }
 

package/workspace.ts

@@ -0,0 +1,20 @@
+/** DevThink workspace contract: renderer-neutral destination names, glyphs and labels shared by web and Ink. */
+export const workspaceDestinations = [
+  { id: "chat", label: "chat", glyph: "◉" },
+  { id: "history", label: "history", glyph: "◷" },
+  { id: "projects", label: "projects", glyph: "▦" },
+  { id: "providers", label: "providers", glyph: "◌" },
+  { id: "usage", label: "usage", glyph: "◫" },
+  { id: "routes", label: "routes", glyph: "⌘" },
+  { id: "settings", label: "settings", glyph: "⚙" },
+] as const;
+
+export type WorkspaceDestination = (typeof workspaceDestinations)[number]["id"];
+
+export function isWorkspaceDestination(value: string): value is WorkspaceDestination {
+  return workspaceDestinations.some((destination) => destination.id === value);
+}
+
+export function workspaceDestination(value: WorkspaceDestination) {
+  return workspaceDestinations.find((destination) => destination.id === value) || workspaceDestinations[0];
+}