feat(tui): add workflow route and integrate with home view

Implement new workflow route with branding header component. Modify home view to switch to workflow mode instead of spawning external process. This is part of the TUI refactor to keep workflow execution within the OpenTUI environment.

Author: moazbuilds

src/cli/tui/app.tsx

@@ -1,14 +1,15 @@
 /** @jsxImportSource @opentui/solid */
 import { render, useTerminalDimensions, useKeyboard, useRenderer } from "@opentui/solid"
 import { VignetteEffect, applyScanlines, TextAttributes } from "@opentui/core"
-import { ErrorBoundary, createSignal, Show } from "solid-js"
+import { ErrorBoundary, Match, Show, Switch, createSignal } from "solid-js"
 import { KVProvider } from "@tui/context/kv"
 import { ToastProvider, useToast } from "@tui/context/toast"
 import { ThemeProvider, useTheme } from "@tui/context/theme"
 import { DialogProvider } from "@tui/context/dialog"
 import { SessionProvider, useSession } from "@tui/context/session"
 import { UpdateNotifierProvider, useUpdateNotifier } from "@tui/context/update-notifier"
 import { Home } from "@tui/routes/home"
+import { Workflow } from "@tui/routes/workflow"
 import { homedir } from "os"
 import { createRequire } from "node:module"
 import { resolvePackageJson } from "../../shared/runtime/pkg.js"
@@ -183,6 +184,7 @@ function App(props: { initialToast?: InitialToast }) {
   // Track Ctrl+C presses for confirmation using signals
   const [ctrlCPressed, setCtrlCPressed] = createSignal(false)
   let ctrlCTimeout: NodeJS.Timeout | null = null
+  const [view, setView] = createSignal<"home" | "workflow">("home")
 
   // Global Ctrl+C handler with confirmation
   useKeyboard((evt) => {
@@ -242,7 +244,17 @@ function App(props: { initialToast?: InitialToast }) {
     >
       {/* Main content area */}
       <box flexGrow={1}>
-        <Home initialToast={props.initialToast} />
+        <Switch>
+          <Match when={view() === "home"}>
+            <Home
+              initialToast={props.initialToast}
+              onStartWorkflow={() => setView("workflow")}
+            />
+          </Match>
+          <Match when={view() === "workflow"}>
+            <Workflow />
+          </Match>
+        </Switch>
       </box>
 
       {/* Footer - fixed height */}

src/cli/tui/component/layout/branding-header.tsx

@@ -0,0 +1,24 @@
+/** @jsxImportSource @opentui/solid */
+import { For } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+
+export function BrandingHeader(props: { version: string; currentDir: string }) {
+  const { theme } = useTheme()
+
+  const lines = () => [
+    " _____       _     _____         _   _",
+    "|     |___ _| |___|     |___ ___| |_|_|___ ___",
+    `|   --| . | . | -_| | | | .'|  _|   | |   | -_| v${props.version}`,
+    `|_____|___|___|___|_|_|_|__,|___|_|_|_|_|_|___| ${props.currentDir}`,
+  ]
+
+  return (
+    <box flexDirection="column" paddingLeft={1} paddingRight={1} paddingBottom={1}>
+      <For each={lines()}>
+        {(line) => (
+          <text fg={theme.primary}>{line}</text>
+        )}
+      </For>
+    </box>
+  )
+}

src/cli/tui/routes/home.tsx

@@ -18,7 +18,12 @@ import { onMount } from "solid-js"
 import * as path from "node:path"
 import type { InitialToast } from "../app"
 
-export function Home(props: { initialToast?: InitialToast }) {
+type HomeProps = {
+  initialToast?: InitialToast
+  onStartWorkflow?: () => void
+}
+
+export function Home(props: HomeProps) {
   const toast = useToast()
   const dialog = useDialog()
   const renderer = useRenderer()
@@ -76,60 +81,15 @@ export function Home(props: { initialToast?: InitialToast }) {
         return // Don't destroy TUI or spawn workflow
       }
 
-      // Validation passed - now destroy TUI and spawn workflow
-
-      // Unmount OpenTUI to release terminal control
-      renderer.destroy()
-
-      // CRITICAL: Restore stdin to normal (cooked) mode before spawning subprocess
-      // OpenTUI puts stdin in raw mode, but Ink (in subprocess) needs to set it itself
-      if (process.stdin.isTTY && process.stdin.setRawMode) {
-        process.stdin.setRawMode(false)
-      }
-
-      // Clear terminal and restore cursor before spawning subprocess
-      if (process.stdout.isTTY) {
-        process.stdout.write('\x1b[2J\x1b[H\x1b[?25h') // Clear screen, home cursor, show cursor
-      }
-
-      // Small delay to ensure terminal state changes take effect
-      await new Promise(resolve => setTimeout(resolve, 50))
-
-      // Spawn workflow in separate process (WITHOUT SolidJS transform)
-      // This prevents JSX conflicts between OpenTUI (SolidJS) and workflow UI (React/Ink)
-
-      // Determine command based on environment:
-      // - Dev mode: bun runner-process.ts
-      // - Production: codemachine-workflow binary
-      const isDev = import.meta.url.includes('/src/')
-      let command: string
-      let args: string[]
-
-      if (isDev) {
-        // Development mode - use TypeScript source file
-        const runnerPath = fileURLToPath(new URL("../../../workflows/runner-process.ts", import.meta.url))
-        command = "bun"
-        args = [runnerPath, cwd, ""]
-      } else {
-        // Production mode - use compiled workflow binary from same directory
-        const { resolveWorkflowBinary } = await import("../../../shared/utils/resolve-workflow-binary.js")
-        command = resolveWorkflowBinary()
-        args = [cwd, ""]
+      if (props.onStartWorkflow) {
+        props.onStartWorkflow()
+        return
       }
 
-      const { spawnProcess } = await import("../../../infra/process/spawn.js")
-      const result = await spawnProcess({
-        command,
-        args,
-        // Pass CODEMACHINE_INSTALL_DIR from parent process to child
-        env: process.env.CODEMACHINE_INSTALL_DIR ? {
-          CODEMACHINE_INSTALL_DIR: process.env.CODEMACHINE_INSTALL_DIR
-        } : undefined,
-        stdioMode: "inherit", // Let workflow process take full terminal control
-      })
-
-      // Workflow completes -> exit with its exit code
-      process.exit(result.exitCode)
+      // TODO: legacy Ink workflow spawn is temporarily disabled during TUI refactor.
+      // Validation passed; workflow execution will be handled by the new OpenTUI flow.
+      // Previously: destroy renderer → reset stdin → clear terminal → spawn runner-process/binary → exit with code.
+      return
     }
 
     if (cmd === "/templates" || cmd === "/template") {

src/cli/tui/routes/workflow.tsx

@@ -0,0 +1,39 @@
+/** @jsxImportSource @opentui/solid */
+import { createRequire } from "node:module"
+import { homedir } from "node:os"
+import { resolvePackageJson } from "../../../shared/runtime/pkg.js"
+import { BrandingHeader } from "@tui/component/layout/branding-header"
+import { useTheme } from "@tui/context/theme"
+
+export function Workflow() {
+  const { theme } = useTheme()
+
+  const getVersion = () => {
+    const require = createRequire(import.meta.url)
+    const packageJsonPath = resolvePackageJson(import.meta.url, "workflow route")
+    const pkg = require(packageJsonPath) as { version: string }
+    return pkg.version
+  }
+
+  const getCwd = () => {
+    const cwd = process.env.CODEMACHINE_CWD || process.cwd()
+    return cwd.replace(homedir(), "~")
+  }
+
+  return (
+    <box flexDirection="column" gap={1} paddingLeft={1} paddingRight={1} paddingTop={1}>
+      <BrandingHeader version={getVersion()} currentDir={getCwd()} />
+
+      <box
+        border
+        borderColor={theme.border}
+        padding={1}
+        flexDirection="column"
+        backgroundColor={theme.backgroundPanel}
+      >
+        <text fg={theme.text}>Workflow UI (OpenTUI) is initializing...</text>
+        <text fg={theme.textMuted}>Next steps: mount timeline and output panels here.</text>
+      </box>
+    </box>
+  )
+}