[tui] GoToMode hook and state machine

apps/cli/package.json

@@ -6,7 +6,8 @@
   },
   "scripts": {
     "dev": "bun run src/main.ts",
-    "build": "bun run scripts/build.ts"
+    "build": "bun run scripts/build.ts",
+    "check": "tsc --noEmit"
   },
   "dependencies": {
     "@codeplane/server": "workspace:*",

apps/codeplanectl/package.json

@@ -8,7 +8,8 @@
   },
   "scripts": {
     "dev": "bun src/cli.ts",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "check": "tsc --noEmit"
   },
   "dependencies": {
     "@clack/prompts": "^0.10.0",

apps/server/package.json

@@ -12,10 +12,15 @@
   "dependencies": {
     "@codeplane/sdk": "workspace:*",
     "@codeplane-ai/workflow": "workspace:*",
+    "better-result": "latest",
     "hono": "latest",
+    "postgres": "latest",
     "ssh2": "latest"
   },
   "devDependencies": {
-    "@types/ssh2": "latest"
+    "@types/node": "^22.0.0",
+    "@types/ssh2": "latest",
+    "bun-types": "^1.3.11",
+    "typescript": "5.8.3"
   }
 }

apps/server/src/db/billing_sql.ts

@@ -603,7 +603,7 @@ export interface CountPrivateReposByOwnerArgs {
 }
 
 export interface CountPrivateReposByOwnerRow {
-    : string;
+    value: string;
 }
 
 export async function countPrivateReposByOwner(sql: Sql, args: CountPrivateReposByOwnerArgs): Promise<CountPrivateReposByOwnerRow | null> {
@@ -613,7 +613,7 @@ export async function countPrivateReposByOwner(sql: Sql, args: CountPrivateRepos
     }
     const row = rows[0];
     return {
-        : row[0]
+        value: row[0]
     };
 }
 
@@ -656,7 +656,7 @@ export interface SumStorageBytesByOwnerArgs {
 }
 
 export interface SumStorageBytesByOwnerRow {
-    : string;
+    value: string;
 }
 
 export async function sumStorageBytesByOwner(sql: Sql, args: SumStorageBytesByOwnerArgs): Promise<SumStorageBytesByOwnerRow | null> {
@@ -666,7 +666,7 @@ export async function sumStorageBytesByOwner(sql: Sql, args: SumStorageBytesByOw
     }
     const row = rows[0];
     return {
-        : row[0]
+        value: row[0]
     };
 }
 
@@ -703,7 +703,7 @@ export interface SumWorkflowMinutesByOwnerArgs {
 }
 
 export interface SumWorkflowMinutesByOwnerRow {
-    : string;
+    value: string;
 }
 
 export async function sumWorkflowMinutesByOwner(sql: Sql, args: SumWorkflowMinutesByOwnerArgs): Promise<SumWorkflowMinutesByOwnerRow | null> {
@@ -713,7 +713,7 @@ export async function sumWorkflowMinutesByOwner(sql: Sql, args: SumWorkflowMinut
     }
     const row = rows[0];
     return {
-        : row[0]
+        value: row[0]
     };
 }
 
@@ -745,7 +745,7 @@ export interface CountAgentRunsByOwnerArgs {
 }
 
 export interface CountAgentRunsByOwnerRow {
-    : string;
+    value: string;
 }
 
 export async function countAgentRunsByOwner(sql: Sql, args: CountAgentRunsByOwnerArgs): Promise<CountAgentRunsByOwnerRow | null> {
@@ -755,7 +755,7 @@ export async function countAgentRunsByOwner(sql: Sql, args: CountAgentRunsByOwne
     }
     const row = rows[0];
     return {
-        : row[0]
+        value: row[0]
     };
 }
 
@@ -938,7 +938,7 @@ export interface CountCreditLedgerByAccountArgs {
 }
 
 export interface CountCreditLedgerByAccountRow {
-    : string;
+    value: string;
 }
 
 export async function countCreditLedgerByAccount(sql: Sql, args: CountCreditLedgerByAccountArgs): Promise<CountCreditLedgerByAccountRow | null> {
@@ -948,7 +948,7 @@ export async function countCreditLedgerByAccount(sql: Sql, args: CountCreditLedg
     }
     const row = rows[0];
     return {
-        : row[0]
+        value: row[0]
     };
 }
 
@@ -1158,4 +1158,3 @@ export async function incrementUsageCounter(sql: Sql, args: IncrementUsageCounte
         updatedAt: row[12]
     };
 }
-

apps/server/src/db/repos_sql.ts

@@ -297,7 +297,7 @@ export interface GetHighestTeamPermissionForRepoUserArgs {
 }
 
 export interface GetHighestTeamPermissionForRepoUserRow {
-    : string;
+    value: string;
 }
 
 export async function getHighestTeamPermissionForRepoUser(sql: Sql, args: GetHighestTeamPermissionForRepoUserArgs): Promise<GetHighestTeamPermissionForRepoUserRow | null> {
@@ -307,7 +307,7 @@ export async function getHighestTeamPermissionForRepoUser(sql: Sql, args: GetHig
     }
     const row = rows[0];
     return {
-        : row[0]
+        value: row[0]
     };
 }
 
@@ -2051,4 +2051,3 @@ export async function getCollaboratorPermissionForRepoUser(sql: Sql, args: GetCo
         permission: row[0]
     };
 }
-

apps/server/src/db/workflow_caches_sql.ts

@@ -569,7 +569,7 @@ export interface GetWorkflowCacheRepoUsageArgs {
 }
 
 export interface GetWorkflowCacheRepoUsageRow {
-    : string;
+    value: string;
 }
 
 export async function getWorkflowCacheRepoUsage(sql: Sql, args: GetWorkflowCacheRepoUsageArgs): Promise<GetWorkflowCacheRepoUsageRow | null> {
@@ -579,7 +579,7 @@ export async function getWorkflowCacheRepoUsage(sql: Sql, args: GetWorkflowCache
     }
     const row = rows[0];
     return {
-        : row[0]
+        value: row[0]
     };
 }
 
@@ -691,4 +691,3 @@ export async function listWorkflowCacheEvictionCandidates(sql: Sql, args: ListWo
         updatedAt: row[15]
     }));
 }
-

apps/server/src/db/workflows_sql.ts

@@ -1092,7 +1092,7 @@ export interface RequeueTasksForRunnerArgs {
 }
 
 export interface RequeueTasksForRunnerRow {
-    : string;
+    value: string;
 }
 
 export async function requeueTasksForRunner(sql: Sql, args: RequeueTasksForRunnerArgs): Promise<RequeueTasksForRunnerRow | null> {
@@ -1102,7 +1102,7 @@ export async function requeueTasksForRunner(sql: Sql, args: RequeueTasksForRunne
     }
     const row = rows[0];
     return {
-        : row[0]
+        value: row[0]
     };
 }
 
@@ -1657,4 +1657,3 @@ export async function getLatestCommitStatusesByChangeIDsAndContexts(sql: Sql, ar
         createdAt: row[2]
     }));
 }
-

apps/server/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "dist",
-    "rootDir": "src"
+    "rootDir": "src",
+    "types": ["bun-types", "node"]
   },
   "include": ["src"]
 }

apps/tui/node_modules

@@ -0,0 +1 @@
+/Users/williamcory/codeplane/apps/tui/node_modules

apps/tui/package.json

@@ -7,7 +7,8 @@
   "scripts": {
     "dev": "bun run src/index.tsx",
     "check": "tsc --noEmit",
-    "test:e2e": "bun test ../../e2e/tui/ --timeout 30000"
+    "test:e2e": "bun test ../../e2e/tui/keybinding-normalize.test.ts ../../e2e/tui/util-text.test.ts ../../e2e/tui/diff.test.ts --timeout 30000 && bun test ../../e2e/tui/app-shell.test.ts --test-name-pattern \"NAV-(SNAP|KEY|INT|EDGE)-\" --timeout 30000",
+    "test:e2e:full": "bun test ../../e2e/tui/ --timeout 30000"
   },
   "dependencies": {
     "@opentui/core": "0.1.90",
@@ -17,6 +18,7 @@
   },
   "devDependencies": {
     "@microsoft/tui-test": "^0.0.3",
+    "@types/js-yaml": "^4.0.9",
     "typescript": "^5",
     "@types/react": "^19.0.0",
     "bun-types": "^1.3.11"

apps/tui/src/components/AppShell.tsx

@@ -1,25 +1,46 @@
 import React from "react";
-import { useTerminalDimensions } from "@opentui/react";
-import { getBreakpoint } from "../types/breakpoint.js";
+import { useLayout } from "../hooks/useLayout.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { TextAttributes } from "../theme/tokens.js";
 import { HeaderBar } from "./HeaderBar.js";
 import { StatusBar } from "./StatusBar.js";
+import { OverlayLayer } from "./OverlayLayer.js";
 import { TerminalTooSmallScreen } from "./TerminalTooSmallScreen.js";
 
 export function AppShell({ children }: { children?: React.ReactNode }) {
-  const { width, height } = useTerminalDimensions();
-  const bp = getBreakpoint(width, height);
+  const layout = useLayout();
+  const theme = useTheme();
 
-  if (bp === null) {
-    return <TerminalTooSmallScreen cols={width} rows={height} />;
+  if (!layout.breakpoint) {
+    return <TerminalTooSmallScreen cols={layout.width} rows={layout.height} />;
   }
 
   return (
     <box flexDirection="column" width="100%" height="100%">
       <HeaderBar />
-      <box flexGrow={1} width="100%">
-        {children}
+      <box flexGrow={1} width="100%" flexDirection="row">
+        {layout.sidebarVisible && (
+          <box
+            width={layout.sidebarWidth}
+            border={["right"]}
+            borderStyle="single"
+            borderColor={theme.border}
+            padding={1}
+            flexDirection="column"
+          >
+            <text fg={theme.primary} attributes={TextAttributes.BOLD}>Navigation</text>
+            <text fg={theme.muted}>Dashboard</text>
+            <text fg={theme.muted}>Repositories</text>
+            <text fg={theme.muted}>Search</text>
+            <text fg={theme.muted}>Workspaces</text>
+          </box>
+        )}
+        <box flexGrow={1} width={layout.sidebarVisible ? undefined : "100%"}>
+          {children}
+        </box>
       </box>
       <StatusBar />
+      <OverlayLayer />
     </box>
   );
 }

apps/tui/src/components/AuthErrorScreen.tsx

@@ -1,7 +1,8 @@
 import React, { useRef, useCallback } from "react";
-import { useKeyboard, useTerminalDimensions } from "@opentui/react";
-import { useTheme } from "../hooks/useTheme.js";
-import type { AuthTokenSource } from "@codeplane/cli/auth-state";
+import { useKeyboard } from "@opentui/react";
+import { detectColorCapability } from "../theme/detect.js";
+import { createTheme, TextAttributes } from "../theme/tokens.js";
+import type { AuthTokenSource } from "../../../cli/src/auth-state.js";
 
 export interface AuthErrorScreenProps {
   variant: "no-token" | "expired";
@@ -11,66 +12,65 @@ export interface AuthErrorScreenProps {
 }
 
 export function AuthErrorScreen({ variant, host, tokenSource, onRetry }: AuthErrorScreenProps) {
-  const { width } = useTerminalDimensions();
-  const theme = useTheme();
-
+  const theme = createTheme(detectColorCapability());
+
   const lastRetryRef = useRef(0);
   const handleRetry = useCallback(() => {
     const now = Date.now();
     if (now - lastRetryRef.current < 1000) return;
     lastRetryRef.current = now;
     onRetry();
   }, [onRetry]);
-  
+
   useKeyboard((event) => {
-    if (event.key === "q") {
+    if (event.name === "q") {
       process.exit(0);
     }
-    if (event.key === "r" || event.key === "R") {
+    if (event.name === "r") {
       handleRetry();
     }
   });
-  
+
   if (variant === "no-token") {
     return (
       <box flexDirection="column" width="100%" height="100%">
-        <box height={1} borderBottom="single" borderColor={theme.border}>
-          <text bold fg={theme.primary}>Codeplane</text>
+        <box height={1} border={["bottom"]} borderStyle="single" borderColor={theme.border}>
+          <text fg={theme.primary} attributes={TextAttributes.BOLD}>Codeplane</text>
         </box>
         <box flexDirection="column" flexGrow={1} justifyContent="center" paddingX={2}>
-          <text bold fg={theme.error}>✗ Not authenticated</text>
+          <text fg={theme.error} attributes={TextAttributes.BOLD}>✗ Not authenticated</text>
           <text />
-          <text>No token found for <text fg={theme.muted}>{host}</text>.</text>
+          <text>{`No token found for ${host}.`}</text>
           <text />
           <text>Run the following command to log in:</text>
           <text />
-          <text fg={theme.primary} bold>  codeplane auth login</text>
+          <text fg={theme.primary} attributes={TextAttributes.BOLD}>  codeplane auth login</text>
           <text />
-          <text>Or set the <text bold>CODEPLANE_TOKEN</text> environment variable.</text>
+          <text>Or set the CODEPLANE_TOKEN environment variable.</text>
         </box>
-        <box height={1} borderTop="single" borderColor={theme.border}>
+        <box height={1} border={["top"]} borderStyle="single" borderColor={theme.border}>
           <text fg={theme.muted}>q quit │ R retry │ Ctrl+C quit</text>
         </box>
       </box>
     );
   }
-  
+
   const sourceLabel = tokenSource ?? "unknown";
   return (
     <box flexDirection="column" width="100%" height="100%">
-      <box height={1} borderBottom="single" borderColor={theme.border}>
-        <text bold fg={theme.primary}>Codeplane</text>
+      <box height={1} border={["bottom"]} borderStyle="single" borderColor={theme.border}>
+        <text fg={theme.primary} attributes={TextAttributes.BOLD}>Codeplane</text>
       </box>
       <box flexDirection="column" flexGrow={1} justifyContent="center" paddingX={2}>
-        <text bold fg={theme.error}>✗ Session expired</text>
+        <text fg={theme.error} attributes={TextAttributes.BOLD}>✗ Session expired</text>
         <text />
-        <text>Stored token for <text fg={theme.muted}>{host}</text> from {sourceLabel} is invalid or expired.</text>
+        <text>{`Stored token for ${host} from ${sourceLabel} is invalid or expired.`}</text>
         <text />
         <text>Run the following command to re-authenticate:</text>
         <text />
-        <text fg={theme.primary} bold>  codeplane auth login</text>
+        <text fg={theme.primary} attributes={TextAttributes.BOLD}>  codeplane auth login</text>
       </box>
-      <box height={1} borderTop="single" borderColor={theme.border}>
+      <box height={1} border={["top"]} borderStyle="single" borderColor={theme.border}>
         <text fg={theme.muted}>q quit │ R retry │ Ctrl+C quit</text>
       </box>
     </box>