codeblog-app 2.5.0 → 2.5.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "codeblog-app",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "CLI client for CodeBlog — the forum where AI writes the posts",
   "type": "module",
   "license": "MIT",
@@ -58,11 +58,11 @@
     "typescript": "5.8.2"
   },
   "optionalDependencies": {
-    "codeblog-app-darwin-arm64": "2.5.0",
-    "codeblog-app-darwin-x64": "2.5.0",
-    "codeblog-app-linux-arm64": "2.5.0",
-    "codeblog-app-linux-x64": "2.5.0",
-    "codeblog-app-windows-x64": "2.5.0"
+    "codeblog-app-darwin-arm64": "2.5.1",
+    "codeblog-app-darwin-x64": "2.5.1",
+    "codeblog-app-linux-arm64": "2.5.1",
+    "codeblog-app-linux-x64": "2.5.1",
+    "codeblog-app-windows-x64": "2.5.1"
   },
   "dependencies": {
     "@ai-sdk/anthropic": "^3.0.44",
@@ -73,7 +73,7 @@
     "@opentui/core": "^0.1.79",
     "@opentui/solid": "^0.1.79",
     "ai": "^6.0.86",
-    "codeblog-mcp": "2.5.0",
+    "codeblog-mcp": "2.5.1",
     "drizzle-orm": "1.0.0-beta.12-a5629fb",
     "fuzzysort": "^3.1.0",
     "hono": "4.10.7",

package/src/cli/cmd/setup.ts

@@ -831,10 +831,10 @@ export const SetupCommand: CommandModule = {
   describe: "First-time setup wizard: authenticate, scan, publish, configure AI",
   handler: async () => {
     // Phase 1: Welcome
-    console.log(UI.logo())
+    Bun.stderr.write(UI.logo() + "\n")
     await UI.typeText("Welcome to CodeBlog!", { charDelay: 20 })
     await UI.typeText("The AI-powered coding forum in your terminal.", { charDelay: 15 })
-    console.log("")
+    Bun.stderr.write("\n")
 
     // Phase 2: Authentication
     const alreadyAuthed = await Auth.authenticated()

package/src/index.ts

@@ -1,10 +1,12 @@
 import yargs from "yargs"
+import path from "path"
 import { hideBin } from "yargs/helpers"
 import { Log } from "./util/log"
 import { UI } from "./cli/ui"
 import { EOL } from "os"
 import { McpBridge } from "./mcp/client"
 import { Auth } from "./auth"
+import { Global } from "./global"
 import { checkAndAutoUpdate } from "./cli/auto-update"
 
 // Commands
@@ -171,10 +173,21 @@ if (!hasSubcommand && !isHelp && !isVersion) {
   await Log.init({ print: false })
   Log.Default.info("codeblog", { version: VERSION, args: [] })
 
+  // Theme setup — must happen before anything else so all UI is readable
+  const themePath = path.join(Global.Path.config, "theme.json")
+  let hasTheme = false
+  try { await Bun.file(themePath).text(); hasTheme = true } catch {}
+  if (!hasTheme) {
+    const { themeSetupTui } = await import("./tui/app")
+    await themeSetupTui()
+    // Clear screen on both stdout and stderr to remove renderer cleanup artifacts
+    process.stdout.write("\x1b[2J\x1b[H")
+    process.stderr.write("\x1b[2J\x1b[H")
+  }
+
   const authed = await Auth.authenticated()
   if (!authed) {
     console.log("")
-    // Use the statically imported SetupCommand
     await (SetupCommand.handler as Function)({})
 
     // Check if setup completed successfully

package/src/tui/app.tsx

@@ -4,7 +4,7 @@ import { RouteProvider, useRoute } from "./context/route"
 import { ExitProvider, useExit } from "./context/exit"
 import { ThemeProvider, useTheme } from "./context/theme"
 import { Home } from "./routes/home"
-import { ThemePicker } from "./routes/setup"
+import { ThemeSetup, ThemePicker } from "./routes/setup"
 import { ModelPicker } from "./routes/model"
 import { Post } from "./routes/post"
 import { Search } from "./routes/search"
@@ -15,16 +15,79 @@ import { emitInputIntent, isShiftEnterSequence } from "./input-intent"
 import pkg from "../../package.json"
 const VERSION = pkg.version
 
+const RENDER_OPTS = {
+  targetFps: 30,
+  exitOnCtrlC: false,
+  autoFocus: false,
+  openConsoleOnError: false,
+  useKittyKeyboard: {
+    disambiguate: true,
+    alternateKeys: true,
+    events: true,
+    allKeysAsEscapes: true,
+    reportText: true,
+  },
+  prependInputHandlers: [
+    (sequence: string) => {
+      if (!isShiftEnterSequence(sequence)) return false
+      emitInputIntent("newline")
+      return true
+    },
+  ],
+}
+
 function enableModifyOtherKeys() {
   if (!process.stdout.isTTY) return () => {}
-  // Ask xterm-compatible terminals to include modifier info for keys like Enter.
   process.stdout.write("\x1b[>4;2m")
   return () => {
-    // Disable modifyOtherKeys on exit.
     process.stdout.write("\x1b[>4m")
   }
 }
 
+/**
+ * Standalone theme setup TUI — runs before the main app for first-time users.
+ * Renders ThemeSetup full-screen, then destroys itself when done.
+ */
+export function themeSetupTui() {
+  return new Promise<void>((resolve) => {
+    const restoreModifiers = enableModifyOtherKeys()
+
+    function ThemeSetupApp() {
+      const renderer = useRenderer()
+      const dimensions = useTerminalDimensions()
+
+      useKeyboard((evt) => {
+        if (evt.ctrl && evt.name === "c") {
+          renderer.setTerminalTitle("")
+          renderer.destroy()
+          restoreModifiers()
+          process.exit(0)
+        }
+      })
+
+      return (
+        <box flexDirection="column" width={dimensions().width} height={dimensions().height}>
+          <ThemeSetup onDone={() => {
+            renderer.setTerminalTitle("")
+            renderer.destroy()
+            restoreModifiers()
+            resolve()
+          }} />
+        </box>
+      )
+    }
+
+    render(
+      () => (
+        <ThemeProvider>
+          <ThemeSetupApp />
+        </ThemeProvider>
+      ),
+      RENDER_OPTS,
+    )
+  })
+}
+
 export function tui(input: { onExit?: () => Promise<void> }) {
   return new Promise<void>(async (resolve) => {
     const restoreModifiers = enableModifyOtherKeys()
@@ -38,26 +101,7 @@ export function tui(input: { onExit?: () => Promise<void> }) {
           </ThemeProvider>
         </ExitProvider>
       ),
-      {
-        targetFps: 30,
-        exitOnCtrlC: false,
-        autoFocus: false,
-        openConsoleOnError: false,
-        useKittyKeyboard: {
-          disambiguate: true,
-          alternateKeys: true,
-          events: true,
-          allKeysAsEscapes: true,
-          reportText: true,
-        },
-        prependInputHandlers: [
-          (sequence) => {
-            if (!isShiftEnterSequence(sequence)) return false
-            emitInputIntent("newline")
-            return true
-          },
-        ],
-      },
+      RENDER_OPTS,
     )
   })
 }
@@ -181,61 +225,63 @@ function App() {
 
   return (
     <box flexDirection="column" width={dimensions().width} height={dimensions().height}>
-      <Switch>
-        <Match when={route.data.type === "home"}>
-          <Home
-            loggedIn={loggedIn()}
-            username={username()}
-            activeAgent={activeAgent()}
-            agentCount={agentCount()}
-            hasAI={hasAI()}
-            aiProvider={aiProvider()}
-            modelName={modelName()}
-            onLogin={async () => {
-              try {
-                const { OAuth } = await import("../auth/oauth")
-                await OAuth.login()
-                await refreshAuth()
-                return { ok: true }
-              } catch (err) {
-                const msg = err instanceof Error ? err.message : String(err)
-                await refreshAuth()
-                return { ok: false, error: `Login failed: ${msg}` }
-              }
-            }}
-            onLogout={() => { setLoggedIn(false); setUsername(""); setActiveAgent("") }}
-            onAIConfigured={refreshAI}
-          />
-        </Match>
-        <Match when={route.data.type === "theme"}>
-          <ThemePicker onDone={() => route.navigate({ type: "home" })} />
-        </Match>
-        <Match when={route.data.type === "model"}>
-          <ModelPicker onDone={async (model) => {
-            if (model) setModelName(model)
-            await refreshAI()
-            route.navigate({ type: "home" })
-          }} />
-        </Match>
-        <Match when={route.data.type === "post"}>
-          <Post />
-        </Match>
-        <Match when={route.data.type === "search"}>
-          <Search />
-        </Match>
-        <Match when={route.data.type === "trending"}>
-          <Trending />
-        </Match>
-        <Match when={route.data.type === "notifications"}>
-          <Notifications />
-        </Match>
-      </Switch>
-
-      {/* Status bar — only version */}
-      <box paddingLeft={2} paddingRight={2} flexShrink={0} flexDirection="row" gap={2}>
-        <box flexGrow={1} />
-        <text fg={theme.colors.textMuted}>v{VERSION}</text>
-      </box>
+      <Show when={!theme.needsSetup} fallback={<ThemeSetup />}>
+        <Switch>
+          <Match when={route.data.type === "home"}>
+            <Home
+              loggedIn={loggedIn()}
+              username={username()}
+              activeAgent={activeAgent()}
+              agentCount={agentCount()}
+              hasAI={hasAI()}
+              aiProvider={aiProvider()}
+              modelName={modelName()}
+              onLogin={async () => {
+                try {
+                  const { OAuth } = await import("../auth/oauth")
+                  await OAuth.login()
+                  await refreshAuth()
+                  return { ok: true }
+                } catch (err) {
+                  const msg = err instanceof Error ? err.message : String(err)
+                  await refreshAuth()
+                  return { ok: false, error: `Login failed: ${msg}` }
+                }
+              }}
+              onLogout={() => { setLoggedIn(false); setUsername(""); setActiveAgent("") }}
+              onAIConfigured={refreshAI}
+            />
+          </Match>
+          <Match when={route.data.type === "theme"}>
+            <ThemePicker onDone={() => route.navigate({ type: "home" })} />
+          </Match>
+          <Match when={route.data.type === "model"}>
+            <ModelPicker onDone={async (model) => {
+              if (model) setModelName(model)
+              await refreshAI()
+              route.navigate({ type: "home" })
+            }} />
+          </Match>
+          <Match when={route.data.type === "post"}>
+            <Post />
+          </Match>
+          <Match when={route.data.type === "search"}>
+            <Search />
+          </Match>
+          <Match when={route.data.type === "trending"}>
+            <Trending />
+          </Match>
+          <Match when={route.data.type === "notifications"}>
+            <Notifications />
+          </Match>
+        </Switch>
+
+        {/* Status bar — only version */}
+        <box paddingLeft={2} paddingRight={2} flexShrink={0} flexDirection="row" gap={2}>
+          <box flexGrow={1} />
+          <text fg={theme.colors.textMuted}>v{VERSION}</text>
+        </box>
+      </Show>
     </box>
   )
 }

package/src/tui/routes/home.tsx

@@ -157,7 +157,7 @@ export function Home(props: {
     return "info"
   }
 
-  function showMsg(text: string, color = "#6a737c") {
+  function showMsg(text: string, color = theme.colors.textMuted) {
     ensureSession()
     setMessages((p) => [...p, { role: "system", content: text, tone: tone(color) }])
   }

package/src/tui/routes/setup.tsx

@@ -1,200 +1,223 @@
-import { createSignal } from "solid-js"
-import { useKeyboard } from "@opentui/solid"
-import { useTheme, THEME_NAMES, THEMES } from "../context/theme"
+import { createSignal, createMemo } from "solid-js"
+import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
+import { useTheme, THEME_NAMES, THEMES, type ThemeColors } from "../context/theme"
 
-// High-contrast colors that are visible on ANY terminal background
 const HC = {
   title: "#ff6600",
-  text: "#888888",
-  selected: "#00cc00",
-  dim: "#999999",
+  text: "#aaaaaa",
+  dim: "#aaaaaa",
 }
 
+const LOGO_ORANGE = "#f48225"
+const LOGO_CYAN = "#00c8ff"
+
+const LOGO = [
+  " ██████╗ ██████╗ ██████╗ ███████╗██████╗ ██╗      ██████╗  ██████╗ ",
+  "██╔════╝██╔═══██╗██╔══██╗██╔════╝██╔══██╗██║     ██╔═══██╗██╔════╝ ",
+  "██║     ██║   ██║██║  ██║█████╗  ██████╔╝██║     ██║   ██║██║  ███╗",
+  "██║     ██║   ██║██║  ██║██╔══╝  ██╔══██╗██║     ██║   ██║██║   ██║",
+  "╚██████╗╚██████╔╝██████╔╝███████╗██████╔╝███████╗╚██████╔╝╚██████╔╝",
+  " ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚═════╝ ╚══════╝ ╚═════╝  ╚═════╝ ",
+]
+
 function resolveThemeDef(name: string) {
   const fallback = THEMES.codeblog ?? Object.values(THEMES).find(Boolean)
-  if (!fallback) {
-    throw new Error("No themes available")
-  }
+  if (!fallback) throw new Error("No themes available")
   return THEMES[name] ?? fallback
 }
 
-export function ThemeSetup() {
+type ThemeOption = { name: string; mode: "dark" | "light"; label: string; colors: ThemeColors }
+
+const SETUP_OPTIONS: ThemeOption[] = [
+  { name: "codeblog", mode: "dark",  label: "Dark mode",              colors: resolveThemeDef("codeblog").dark },
+  { name: "codeblog", mode: "light", label: "Light mode",             colors: resolveThemeDef("codeblog").light },
+  { name: "dracula",  mode: "dark",  label: "Dark — Dracula",         colors: resolveThemeDef("dracula").dark },
+  { name: "tokyonight", mode: "dark", label: "Dark — Tokyo Night",    colors: resolveThemeDef("tokyonight").dark },
+  { name: "catppuccin", mode: "dark", label: "Dark — Catppuccin",     colors: resolveThemeDef("catppuccin").dark },
+  { name: "github",   mode: "dark",  label: "Dark — GitHub",          colors: resolveThemeDef("github").dark },
+  { name: "gruvbox",  mode: "dark",  label: "Dark — Gruvbox",         colors: resolveThemeDef("gruvbox").dark },
+  { name: "github",   mode: "light", label: "Light — GitHub",         colors: resolveThemeDef("github").light },
+  { name: "catppuccin", mode: "light", label: "Light — Catppuccin",   colors: resolveThemeDef("catppuccin").light },
+  { name: "solarized", mode: "light", label: "Light — Solarized",     colors: resolveThemeDef("solarized").light },
+]
+
+export function ThemeSetup(props: { onDone?: () => void }) {
   const theme = useTheme()
-  const modes = ["dark", "light"] as const
-  const [step, setStep] = createSignal<"mode" | "theme">("mode")
-  const [modeIdx, setModeIdx] = createSignal(0)
-  const [themeIdx, setThemeIdx] = createSignal(0)
-  const getThemeName = (index: number) => THEME_NAMES[index] ?? "codeblog"
-  const getThemeColors = (name: string) => resolveThemeDef(name)[theme.mode]
+  const dimensions = useTerminalDimensions()
+  const [idx, setIdx] = createSignal(0)
+
+  const current = createMemo(() => SETUP_OPTIONS[idx()] ?? SETUP_OPTIONS[0]!)
+
+  function apply(i: number) {
+    const opt = SETUP_OPTIONS[i]
+    if (!opt) return
+    theme.set(opt.name)
+    theme.setMode(opt.mode)
+  }
+
+  apply(0)
 
   useKeyboard((evt) => {
-    if (step() === "mode") {
-      if (evt.name === "up" || evt.name === "k") {
-        setModeIdx((i) => (i - 1 + modes.length) % modes.length)
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "down" || evt.name === "j") {
-        setModeIdx((i) => (i + 1) % modes.length)
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "return") {
-        theme.setMode(modes[modeIdx()] ?? "dark")
-        setStep("theme")
-        evt.preventDefault()
-        return
-      }
+    if (evt.name === "up" || evt.name === "k") {
+      const next = (idx() - 1 + SETUP_OPTIONS.length) % SETUP_OPTIONS.length
+      setIdx(next)
+      apply(next)
+      evt.preventDefault()
+      return
     }
-
-    if (step() === "theme") {
-      if (evt.name === "up" || evt.name === "k") {
-        const next = (themeIdx() - 1 + THEME_NAMES.length) % THEME_NAMES.length
-        setThemeIdx(next)
-        theme.set(getThemeName(next))
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "down" || evt.name === "j") {
-        const next = (themeIdx() + 1) % THEME_NAMES.length
-        setThemeIdx(next)
-        theme.set(getThemeName(next))
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "return") {
-        theme.finishSetup()
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "escape") {
-        setStep("mode")
-        evt.preventDefault()
-        return
-      }
+    if (evt.name === "down" || evt.name === "j") {
+      const next = (idx() + 1) % SETUP_OPTIONS.length
+      setIdx(next)
+      apply(next)
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "return") {
+      theme.finishSetup()
+      props.onDone?.()
+      evt.preventDefault()
+      return
     }
   })
 
+  const wide = createMemo(() => (dimensions().width ?? 80) >= 90)
+  const c = createMemo(() => current().colors)
+
   return (
-    <box flexDirection="column" flexGrow={1} alignItems="center" paddingLeft={2} paddingRight={2}>
+    <box flexDirection="column" flexGrow={1} paddingLeft={2} paddingRight={2}>
       <box flexGrow={1} minHeight={0} />
 
+      {/* Logo */}
+      <box flexShrink={0} flexDirection="column" alignItems="center">
+        {LOGO.map((line, i) => (
+          <text fg={i < 3 ? LOGO_ORANGE : LOGO_CYAN}>{line}</text>
+        ))}
+        <box height={1} />
+        <text fg={HC.text}>{"The AI-powered coding forum in your terminal"}</text>
+        <box height={1} />
+      </box>
+
+      {/* Main content */}
       <box flexShrink={0} flexDirection="column" alignItems="center">
         <text fg={HC.title}>
-          <span style={{ bold: true }}>{"★ Welcome to CodeBlog ★"}</span>
+          <span style={{ bold: true }}>{"Choose the text style that looks best with your terminal:"}</span>
         </text>
+        <text fg={HC.dim}>{"To change this later, run /theme"}</text>
         <box height={1} />
-      </box>
 
-      {step() === "mode" ? (
-        <box flexShrink={0} flexDirection="column" width="100%" maxWidth={50}>
-          <text fg={HC.title}>
-            <span style={{ bold: true }}>{"What is your terminal background color?"}</span>
-          </text>
-          <box height={1} />
-          {modes.map((m, i) => (
-            <box flexDirection="row" paddingLeft={2}>
-              <text fg={modeIdx() === i ? HC.selected : HC.dim}>
-                {modeIdx() === i ? "❯ " : "  "}
-              </text>
-              <text fg={modeIdx() === i ? HC.selected : HC.dim}>
-                <span style={{ bold: modeIdx() === i }}>
-                  {m === "dark" ? "Dark background  (black/dark terminal)" : "Light background (white/light terminal)"}
-                </span>
-              </text>
-            </box>
-          ))}
-          <box height={1} />
-          <text fg={HC.text}>{"↑↓ select · Enter confirm"}</text>
-        </box>
-      ) : (
-        <box flexShrink={0} flexDirection="column" width="100%" maxWidth={60}>
-          <text fg={theme.colors.text}>
-            <span style={{ bold: true }}>{"Choose a color theme:"}</span>
-          </text>
-          <box height={1} />
-          {THEME_NAMES.map((name, i) => {
-            const c = getThemeColors(name)
-            return (
-              <box flexDirection="row" paddingLeft={2}>
-                <text fg={themeIdx() === i ? c.primary : theme.colors.textMuted}>
-                  {themeIdx() === i ? "❯ " : "  "}
+        <box flexDirection="row" justifyContent="center" gap={wide() ? 6 : 3}>
+          {/* Options list */}
+          <box flexDirection="column" width={wide() ? 28 : 26}>
+            {SETUP_OPTIONS.map((opt, i) => (
+              <box flexDirection="row">
+                <text fg={idx() === i ? opt.colors.primary : HC.dim}>
+                  {idx() === i ? "❯ " : "  "}
                 </text>
-                <text fg={themeIdx() === i ? c.text : theme.colors.textMuted}>
-                  <span style={{ bold: themeIdx() === i }}>
-                    {name.padEnd(14)}
+                <text fg={idx() === i ? opt.colors.text : HC.dim}>
+                  <span style={{ bold: idx() === i }}>
+                    {`${(i + 1).toString().padStart(2)}. ${opt.label}`}
                   </span>
                 </text>
-                <text fg={c.logo1}>{" ●"}</text>
-                <text fg={c.logo2}>{"●"}</text>
-                <text fg={c.primary}>{"●"}</text>
-                <text fg={c.accent}>{"●"}</text>
-                <text fg={c.success}>{"●"}</text>
-                <text fg={c.error}>{"●"}</text>
+                {idx() === i && <text fg={opt.colors.success}>{"✓"}</text>}
               </box>
-            )
-          })}
-          <box height={1} />
-          <text fg={theme.colors.textMuted}>{"↑↓ select · Enter confirm · Esc back"}</text>
+            ))}
+          </box>
+
+          {/* Live preview */}
+          <box flexDirection="column" width={wide() ? 44 : 38}>
+            <text fg={c().text}><span style={{ bold: true }}>{"Preview"}</span></text>
+            <box height={1} />
+            <box flexDirection="column" paddingLeft={2}>
+              <text fg={c().textMuted}>{"// A coding conversation"}</text>
+              <box height={1} />
+              <box flexDirection="row">
+                <text fg={c().primary}><span style={{ bold: true }}>{"You: "}</span></text>
+                <text fg={c().text}>{"Refactor the auth module"}</text>
+              </box>
+              <box flexDirection="row">
+                <text fg={c().accent}><span style={{ bold: true }}>{"AI:  "}</span></text>
+                <text fg={c().text}>{"I'll update 3 files..."}</text>
+              </box>
+              <box height={1} />
+              <text fg={c().textMuted}>{"  src/auth.ts"}</text>
+              <box flexDirection="row">
+                <text fg={c().error}>{" - "}</text>
+                <text fg={c().error}>{"const token = getOld()"}</text>
+              </box>
+              <box flexDirection="row">
+                <text fg={c().success}>{" + "}</text>
+                <text fg={c().success}>{"const token = getNew()"}</text>
+              </box>
+              <box height={1} />
+              <box flexDirection="row">
+                <text fg={c().success}>{"✓ "}</text>
+                <text fg={c().text}>{"Changes applied"}</text>
+              </box>
+              <box flexDirection="row">
+                <text fg={c().warning}>{"⚠ "}</text>
+                <text fg={c().textMuted}>{"3 tests need updating"}</text>
+              </box>
+            </box>
+          </box>
         </box>
-      )}
+
+        <box height={1} />
+        <text fg={HC.text}>{"↑↓ select · Enter confirm"}</text>
+      </box>
 
       <box flexGrow={1} minHeight={0} />
     </box>
   )
 }
 
+// Full theme picker (all themes × dark/light) for /theme command in main TUI
+function buildAllOptions(): ThemeOption[] {
+  const out: ThemeOption[] = []
+  for (const name of THEME_NAMES) {
+    const def = resolveThemeDef(name)
+    out.push({ name, mode: "dark", label: `${name} — dark`, colors: def.dark })
+    out.push({ name, mode: "light", label: `${name} — light`, colors: def.light })
+  }
+  return out
+}
+
+const ALL_OPTIONS = buildAllOptions()
+
 export function ThemePicker(props: { onDone: () => void }) {
   const theme = useTheme()
-  const [idx, setIdx] = createSignal(Math.max(0, THEME_NAMES.indexOf(theme.name)))
-  const [tab, setTab] = createSignal<"theme" | "mode">("theme")
-  const getThemeName = (index: number) => THEME_NAMES[index] ?? "codeblog"
-  const getThemeColors = (name: string) => resolveThemeDef(name)[theme.mode]
+  const [idx, setIdx] = createSignal(
+    Math.max(0, ALL_OPTIONS.findIndex((o) => o.name === theme.name && o.mode === theme.mode))
+  )
+  const current = createMemo(() => ALL_OPTIONS[idx()] ?? ALL_OPTIONS[0]!)
+
+  function apply(i: number) {
+    const opt = ALL_OPTIONS[i]
+    if (!opt) return
+    theme.set(opt.name)
+    theme.setMode(opt.mode)
+  }
+
+  const c = createMemo(() => current().colors)
 
   useKeyboard((evt) => {
-    if (tab() === "theme") {
-      if (evt.name === "up" || evt.name === "k") {
-        const next = (idx() - 1 + THEME_NAMES.length) % THEME_NAMES.length
-        setIdx(next)
-        theme.set(getThemeName(next))
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "down" || evt.name === "j") {
-        const next = (idx() + 1) % THEME_NAMES.length
-        setIdx(next)
-        theme.set(getThemeName(next))
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "tab") {
-        setTab("mode")
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "return" || evt.name === "escape") {
-        props.onDone()
-        evt.preventDefault()
-        return
-      }
+    if (evt.name === "up" || evt.name === "k") {
+      const next = (idx() - 1 + ALL_OPTIONS.length) % ALL_OPTIONS.length
+      setIdx(next)
+      apply(next)
+      evt.preventDefault()
+      return
     }
-
-    if (tab() === "mode") {
-      if (evt.name === "up" || evt.name === "down" || evt.name === "k" || evt.name === "j") {
-        theme.setMode(theme.mode === "dark" ? "light" : "dark")
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "tab") {
-        setTab("theme")
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "return" || evt.name === "escape") {
-        props.onDone()
-        evt.preventDefault()
-        return
-      }
+    if (evt.name === "down" || evt.name === "j") {
+      const next = (idx() + 1) % ALL_OPTIONS.length
+      setIdx(next)
+      apply(next)
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "return" || evt.name === "escape") {
+      props.onDone()
+      evt.preventDefault()
+      return
     }
   })
 
@@ -205,60 +228,52 @@ export function ThemePicker(props: { onDone: () => void }) {
           <span style={{ bold: true }}>Theme Settings</span>
         </text>
         <box flexGrow={1} />
-        <text fg={theme.colors.textMuted}>{"Tab: switch section · Enter/Esc: done"}</text>
+        <text fg={theme.colors.textMuted}>{"Enter/Esc: done"}</text>
       </box>
 
       <box flexDirection="row" flexGrow={1} paddingTop={1} gap={4}>
-        {/* Theme list */}
-        <box flexDirection="column" width={40}>
-          <text fg={tab() === "theme" ? theme.colors.text : theme.colors.textMuted}>
-            <span style={{ bold: true }}>{"Color Theme"}</span>
-          </text>
-          <box height={1} />
-          {THEME_NAMES.map((name, i) => {
-            const c = getThemeColors(name)
-            return (
-              <box flexDirection="row">
-                <text fg={idx() === i ? c.primary : theme.colors.textMuted}>
-                  {idx() === i && tab() === "theme" ? "❯ " : "  "}
-                </text>
-                <text fg={idx() === i ? c.text : theme.colors.textMuted}>
-                  <span style={{ bold: idx() === i }}>
-                    {name.padEnd(14)}
-                  </span>
-                </text>
-                <text fg={c.logo1}>{" ●"}</text>
-                <text fg={c.logo2}>{"●"}</text>
-                <text fg={c.primary}>{"●"}</text>
-                <text fg={c.accent}>{"●"}</text>
-                <text fg={c.success}>{"●"}</text>
-                <text fg={c.error}>{"●"}</text>
-              </box>
-            )
-          })}
+        {/* Options list */}
+        <box flexDirection="column" width={30}>
+          {ALL_OPTIONS.map((opt, i) => (
+            <box flexDirection="row">
+              <text fg={idx() === i ? opt.colors.primary : theme.colors.textMuted}>
+                {idx() === i ? "❯ " : "  "}
+              </text>
+              <text fg={idx() === i ? opt.colors.text : theme.colors.textMuted}>
+                <span style={{ bold: idx() === i }}>
+                  {opt.label}
+                </span>
+              </text>
+            </box>
+          ))}
         </box>
 
-        {/* Mode toggle */}
-        <box flexDirection="column" width={30}>
-          <text fg={tab() === "mode" ? theme.colors.text : theme.colors.textMuted}>
-            <span style={{ bold: true }}>{"Background Mode"}</span>
-          </text>
+        {/* Preview */}
+        <box flexDirection="column" width={40}>
+          <text fg={c().text}><span style={{ bold: true }}>{"Preview"}</span></text>
           <box height={1} />
-          <box flexDirection="row">
-            <text fg={theme.mode === "dark" && tab() === "mode" ? theme.colors.primary : theme.colors.textMuted}>
-              {theme.mode === "dark" && tab() === "mode" ? "❯ " : "  "}
-            </text>
-            <text fg={theme.mode === "dark" ? theme.colors.text : theme.colors.textMuted}>
-              <span style={{ bold: theme.mode === "dark" }}>{"Dark"}</span>
-            </text>
-          </box>
-          <box flexDirection="row">
-            <text fg={theme.mode === "light" && tab() === "mode" ? theme.colors.primary : theme.colors.textMuted}>
-              {theme.mode === "light" && tab() === "mode" ? "❯ " : "  "}
-            </text>
-            <text fg={theme.mode === "light" ? theme.colors.text : theme.colors.textMuted}>
-              <span style={{ bold: theme.mode === "light" }}>{"Light"}</span>
-            </text>
+          <box flexDirection="column" paddingLeft={2}>
+            <box flexDirection="row">
+              <text fg={c().primary}><span style={{ bold: true }}>{"You: "}</span></text>
+              <text fg={c().text}>{"Show me trending posts"}</text>
+            </box>
+            <box flexDirection="row">
+              <text fg={c().accent}><span style={{ bold: true }}>{"AI:  "}</span></text>
+              <text fg={c().text}>{"Here are today's top..."}</text>
+            </box>
+            <box height={1} />
+            <box flexDirection="row">
+              <text fg={c().success}>{"✓ "}</text>
+              <text fg={c().text}>{"Published successfully"}</text>
+            </box>
+            <box flexDirection="row">
+              <text fg={c().warning}>{"⚠ "}</text>
+              <text fg={c().textMuted}>{"Rate limit reached"}</text>
+            </box>
+            <box flexDirection="row">
+              <text fg={c().error}>{"✗ "}</text>
+              <text fg={c().textMuted}>{"Connection failed"}</text>
+            </box>
           </box>
         </box>
       </box>