feat(app): add workspace browser bootstrap (#4)

* feat(app): add workspace browser bootstrap

* Add treq tui command and OpenTUI/Solid bootstrap runtime
* Implement workspace SDK + store-derived file tree (expand/collapse, selection, scroll-to-selection)
* Add theme + header/footer layout
* Add request panel with per-file loading + stable keyed rendering (prevents stale/stacked rows)
* Introduce context providers (SDKProvider, StoreProvider, ExitProvider) and graceful exit handling
* Fix app build pipeline: use OpenTUI Solid Bun plugin; default to single-platform builds for dev/test; keep full-matrix build for publish (build:all)

* feat(app): add TUI dialog system with command palette and debug console

* Dialog context with stack-based modal management
* Command palette (ctrl+p) with fuzzy search using fuzzysort
* Debug console (ctrl+`) for viewing application logs
* Keybind context for configurable keyboard shortcuts
* Log context for structured application logging
* Debounced file loading (50ms) during rapid navigation
* Improved file tree scroll behavior
* Increased render FPS from 30 to 60
* Simplified footer with status display

Author: andrewmelchor

bun.lock

@@ -0,0 +1 @@
+preload = ["@opentui/solid/preload"]

packages/app/bunfig.toml

@@ -44,8 +44,9 @@
     "README.md"
   ],
   "scripts": {
-    "build": "bun run script/build.ts",
+    "build": "bun run script/build.ts --single",
     "build:single": "bun run script/build.ts --single",
+    "build:all": "bun run script/build.ts",
     "dev": "bun run src/index.ts",
     "clean": "rm -rf dist",
     "publish:cli": "bun run script/publish.ts",
@@ -65,8 +66,12 @@
     "@clack/prompts": "^0.10.0",
     "@hono/zod-openapi": "^1.2.0",
     "@hono/zod-validator": "^0.7.6",
+    "@opentui/core": "^0.1.74",
+    "@opentui/solid": "^0.1.74",
     "@t-req/core": "^0.1.0",
+    "fuzzysort": "^3.1.0",
     "hono": "^4.11.4",
+    "solid-js": "^1.9.0",
     "yargs": "^17.7.2",
     "zod": "^4.3.5"
   },

packages/app/package.json

@@ -1,6 +1,7 @@
 #!/usr/bin/env bun
 
 import * as path from 'node:path';
+import solidPlugin from '@opentui/solid/bun-plugin';
 import { $ } from 'bun';
 import pkg from '../package.json';
 
@@ -19,6 +20,7 @@ const targets = [
 
 // Check for --single flag to build only current platform
 const singlePlatform = process.argv.includes('--single');
+const skipInstall = process.argv.includes('--skip-install');
 
 await $`rm -rf dist`;
 
@@ -35,6 +37,18 @@ if (singlePlatform && filteredTargets.length === 0) {
   process.exit(1);
 }
 
+// OpenTUI relies on platform-specific packages like @opentui/core-darwin-x64.
+// For cross-target builds, ensure all variants are installed
+// For single-platform builds (dev/test), skip the expensive cross-install.
+if (!skipInstall && !singlePlatform) {
+  const opentuiCoreVersion = pkg.dependencies['@opentui/core'];
+  if (typeof opentuiCoreVersion !== 'string' || opentuiCoreVersion.length === 0) {
+    console.error('Missing @opentui/core dependency version in package.json');
+    process.exit(1);
+  }
+  await $`bun install --os="*" --cpu="*" @opentui/core@${opentuiCoreVersion}`;
+}
+
 for (const { os, arch, bunTarget } of filteredTargets) {
   const name = `app-${os}-${arch}`;
   const isWindows = os === 'windows';
@@ -46,7 +60,28 @@ for (const { os, arch, bunTarget } of filteredTargets) {
   const outfile = path.join(dir, 'dist', name, 'bin', binaryName);
   const entrypoint = path.join(dir, 'src', 'index.ts');
 
-  await $`bun build --compile --target=${bunTarget} --outfile=${outfile} ${entrypoint}`;
+  const result = await Bun.build({
+    entrypoints: [entrypoint],
+    plugins: [solidPlugin],
+    tsconfig: path.join(dir, 'tsconfig.json'),
+    compile: {
+      target: bunTarget,
+      outfile,
+      // Match OpenCode defaults: avoid config/env autoload surprises during compile.
+      autoloadBunfig: false,
+      autoloadDotenv: false,
+      autoloadTsconfig: true,
+      autoloadPackageJson: true
+    }
+  });
+
+  if (!result.success) {
+    console.error(`Build failed for ${name}:`);
+    for (const log of result.logs) {
+      console.error(log);
+    }
+    process.exit(1);
+  }
 
   // Write platform package.json
   const platformPkg = {

packages/app/script/build.ts

@@ -29,7 +29,7 @@ console.log();
 
 // Step 1: Build all platform binaries
 console.log('Step 1: Building all platform binaries...');
-await $`bun run build`;
+await $`bun run build:all`;
 console.log();
 
 // Step 2: Smoke test current platform binary

packages/app/script/publish.ts

@@ -3,6 +3,7 @@ import { hideBin } from 'yargs/helpers';
 import { initCommand } from './cmd/init';
 import { runCommand } from './cmd/run';
 import { serveCommand } from './cmd/serve';
+import { tuiCommand } from './cmd/tui';
 
 export function cli(args: string[]): void {
   yargs(hideBin(['node', 'cli', ...args]))
@@ -11,6 +12,7 @@ export function cli(args: string[]): void {
     .command(initCommand)
     .command(runCommand)
     .command(serveCommand)
+    .command(tuiCommand)
     .demandCommand(1, 'You need to specify a command')
     .strict()
     .help()

packages/app/src/cli.ts

@@ -0,0 +1,28 @@
+import type { CommandModule } from 'yargs';
+
+interface TuiOptions {
+  server: string;
+  token?: string;
+}
+
+export const tuiCommand: CommandModule<object, TuiOptions> = {
+  command: 'tui',
+  describe: 'Start interactive TUI for browsing workspace',
+  builder: {
+    server: {
+      type: 'string',
+      alias: 's',
+      default: 'http://localhost:4096',
+      describe: 'Server URL to connect to'
+    },
+    token: {
+      type: 'string',
+      alias: 't',
+      describe: 'Bearer token for authentication'
+    }
+  },
+  handler: async (argv) => {
+    const { startTui } = await import('../tui');
+    await startTui({ serverUrl: argv.server, token: argv.token });
+  }
+};

packages/app/src/cmd/tui.ts

@@ -0,0 +1,208 @@
+import { useKeyboard } from '@opentui/solid';
+import { createEffect, createMemo, createSignal, on, onCleanup, untrack } from 'solid-js';
+import { theme, rgba } from './theme';
+import { CommandDialog } from './components/command-dialog';
+import { DebugConsoleDialog } from './components/debug-console-dialog';
+import { FileTree } from './components/file-tree';
+import { RequestList } from './components/request-list';
+import { useDialog, useExit, useKeybind, useSDK, useStore } from './context';
+import { normalizeKey } from './util/normalize-key';
+import { getStatusDisplay } from './util/status-display';
+
+export function App() {
+  const sdk = useSDK();
+  const store = useStore();
+  const exit = useExit();
+  const dialog = useDialog();
+  const keybind = useKeybind();
+
+  // Track in-flight fetch paths to prevent duplicate requests (reactive for UI)
+  const [loadingPaths, setLoadingPaths] = createSignal<Set<string>>(new Set());
+
+  // Keyboard handling
+  useKeyboard((event) => {
+    if (dialog.stack.length > 0) return;
+
+    if (keybind.match('debug_console', event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      dialog.replace(() => <DebugConsoleDialog />);
+      return;
+    }
+
+    if (keybind.match('command_list', event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      dialog.replace(() => <CommandDialog />);
+      return;
+    }
+
+    if (keybind.match('quit', event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      void exit();
+      return;
+    }
+
+    const key = normalizeKey(event);
+    switch (key.name) {
+      case 'j':
+      case 'down':
+        event.preventDefault();
+        event.stopPropagation();
+        store.selectNext();
+        break;
+      case 'k':
+      case 'up':
+        event.preventDefault();
+        event.stopPropagation();
+        store.selectPrevious();
+        break;
+      case 'return': {
+        const selected = store.selectedNode();
+        if (selected) {
+          if (selected.node.isDir) {
+            store.toggleDir(selected.node.path);
+          } else {
+            // Load requests for selected file
+            loadRequestsForFile(selected.node.path);
+          }
+        }
+        break;
+      }
+      case 'h':
+      case 'left': {
+        const selected = store.selectedNode();
+        if (selected?.node.isDir && selected.isExpanded) {
+          store.collapseDir(selected.node.path);
+        }
+        break;
+      }
+      case 'l':
+      case 'right': {
+        const selected = store.selectedNode();
+        if (selected?.node.isDir && !selected.isExpanded) {
+          store.expandDir(selected.node.path);
+        }
+        break;
+      }
+    }
+  });
+
+  // Load requests when a file is selected
+  async function loadRequestsForFile(path: string) {
+    // Check if already loaded or currently loading
+    if (store.requestsByPath()[path] || loadingPaths().has(path)) {
+      return;
+    }
+
+    setLoadingPaths((prev) => {
+      const next = new Set(prev);
+      next.add(path);
+      return next;
+    });
+    try {
+      const response = await sdk.listWorkspaceRequests(path);
+      store.setRequestsForPath(path, response.requests);
+    } catch (_e) {
+      // Silently fail - requests panel will show empty
+      // Set empty array to prevent retry on re-select
+      store.setRequestsForPath(path, []);
+    } finally {
+      setLoadingPaths((prev) => {
+        const next = new Set(prev);
+        next.delete(path);
+        return next;
+      });
+    }
+  }
+
+  // Auto-load requests when selection changes to a file (debounced)
+  // Uses on() to explicitly track only selectedNode, with a 50ms debounce
+  // to prevent load during rapid j/k navigation
+  let loadTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  createEffect(
+    on(
+      () => store.selectedNode(),
+      (selected) => {
+        // Clear any pending load
+        if (loadTimeout) {
+          clearTimeout(loadTimeout);
+          loadTimeout = undefined;
+        }
+
+        if (selected && !selected.node.isDir) {
+          // Debounce: wait 50ms before loading
+          loadTimeout = setTimeout(() => {
+            untrack(() => loadRequestsForFile(selected.node.path));
+          }, 50);
+        }
+      }
+    )
+  );
+
+  onCleanup(() => {
+    if (loadTimeout) {
+      clearTimeout(loadTimeout);
+    }
+  });
+
+  // Get the selected file path for the request list
+  const selectedFilePath = () => {
+    const selected = store.selectedNode();
+    return selected && !selected.node.isDir ? selected.node.path : undefined;
+  };
+
+  const requestListLoading = createMemo(() => {
+    const path = selectedFilePath();
+    if (!path) return false;
+    return loadingPaths().has(path);
+  });
+
+  const statusDisplay = createMemo(() => getStatusDisplay(store.connectionStatus()));
+
+  return (
+    <box
+      flexDirection="column"
+      width="100%"
+      height="100%"
+      backgroundColor={rgba(theme.background)}
+    >
+      <box flexGrow={1} flexDirection="row">
+        <box width="50%" flexShrink={0} paddingRight={1}>
+          <FileTree
+            nodes={store.flattenedVisible()}
+            selectedIndex={store.selectedIndex()}
+            onSelect={store.setSelectedIndex}
+            onToggle={store.toggleDir}
+          />
+        </box>
+
+        <box width={1} flexShrink={0} backgroundColor={rgba(theme.borderSubtle)} />
+
+        <box flexGrow={1} flexShrink={0}>
+          <RequestList
+            requests={store.selectedFileRequests()}
+            selectedFile={selectedFilePath()}
+            isLoading={requestListLoading()}
+          />
+        </box>
+      </box>
+
+      <box height={1} paddingLeft={2} paddingRight={2} flexDirection="row" justifyContent="space-between">
+        <text fg={rgba(theme.text)}>t-req 🦖</text>
+        <box flexDirection="row" gap={2}>
+          <box flexDirection="row">
+            <text fg={rgba(theme.text)}>{keybind.print('command_list')}</text>
+            <text fg={rgba(theme.textMuted)}> commands</text>
+          </box>
+          <box flexDirection="row" gap={1}>
+            <text fg={rgba(statusDisplay().color)}>{statusDisplay().icon}</text>
+            <text fg={rgba(theme.textMuted)}>{statusDisplay().text}</text>
+          </box>
+        </box>
+      </box>
+    </box>
+  );
+}