codeblog-app 1.4.0 → 1.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "codeblog-app",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "CLI client for CodeBlog — the forum where AI writes the posts",
   "type": "module",
   "license": "MIT",
@@ -56,11 +56,11 @@
     "typescript": "5.8.2"
   },
   "optionalDependencies": {
-    "codeblog-app-darwin-arm64": "1.4.0",
-    "codeblog-app-darwin-x64": "1.4.0",
-    "codeblog-app-linux-arm64": "1.4.0",
-    "codeblog-app-linux-x64": "1.4.0",
-    "codeblog-app-windows-x64": "1.4.0"
+    "codeblog-app-darwin-arm64": "1.5.0",
+    "codeblog-app-darwin-x64": "1.5.0",
+    "codeblog-app-linux-arm64": "1.5.0",
+    "codeblog-app-linux-x64": "1.5.0",
+    "codeblog-app-windows-x64": "1.5.0"
   },
   "dependencies": {
     "@ai-sdk/amazon-bedrock": "^4.0.60",

package/src/auth/index.ts

@@ -8,6 +8,7 @@ export namespace Auth {
       type: z.enum(["jwt", "apikey"]),
       value: z.string(),
       expires: z.number().optional(),
+      username: z.string().optional(),
     })
     .meta({ ref: "AuthToken" })
   export type Token = z.infer<typeof Token>

package/src/auth/oauth.ts

@@ -13,12 +13,13 @@ export namespace OAuth {
     const { app, port } = Server.createCallbackServer(async (params) => {
       const token = params.get("token")
       const key = params.get("api_key")
+      const username = params.get("username") || undefined
 
       if (key) {
-        await Auth.set({ type: "apikey", value: key })
+        await Auth.set({ type: "apikey", value: key, username })
         log.info("authenticated with api key")
       } else if (token) {
-        await Auth.set({ type: "jwt", value: token })
+        await Auth.set({ type: "jwt", value: token, username })
         log.info("authenticated with jwt")
       } else {
         Server.stop()

package/src/cli/cmd/update.ts

@@ -0,0 +1,75 @@
+import type { CommandModule } from "yargs"
+import { UI } from "../ui"
+
+export const UpdateCommand: CommandModule = {
+  command: "update",
+  describe: "Update codeblog CLI to the latest version",
+  builder: (yargs) =>
+    yargs.option("force", {
+      describe: "Force update even if already on latest",
+      type: "boolean",
+      default: false,
+    }),
+  handler: async (args) => {
+    const pkg = await import("../../../package.json")
+    const current = pkg.version
+
+    UI.info(`Current version: v${current}`)
+    UI.info("Checking for updates...")
+
+    const res = await fetch("https://registry.npmjs.org/codeblog-app/latest")
+    if (!res.ok) {
+      UI.error("Failed to check for updates")
+      process.exitCode = 1
+      return
+    }
+
+    const data = await res.json() as { version: string }
+    const latest = data.version
+
+    if (current === latest && !args.force) {
+      UI.success(`Already on latest version v${current}`)
+      return
+    }
+
+    UI.info(`Updating v${current} → v${latest}...`)
+
+    const os = process.platform === "win32" ? "windows" : process.platform === "darwin" ? "darwin" : "linux"
+    const arch = process.arch === "arm64" ? "arm64" : "x64"
+    const platform = `${os}-${arch}`
+    const pkg_name = `codeblog-app-${platform}`
+    const url = `https://registry.npmjs.org/${pkg_name}/-/${pkg_name}-${latest}.tgz`
+
+    const tmpdir = (await import("os")).tmpdir()
+    const path = await import("path")
+    const fs = await import("fs/promises")
+    const tmp = path.join(tmpdir, `codeblog-update-${Date.now()}`)
+    await fs.mkdir(tmp, { recursive: true })
+
+    const tgz = path.join(tmp, "pkg.tgz")
+    const dlRes = await fetch(url)
+    if (!dlRes.ok) {
+      UI.error(`Failed to download update for ${platform}`)
+      process.exitCode = 1
+      return
+    }
+
+    await Bun.write(tgz, dlRes)
+
+    const proc = Bun.spawn(["tar", "-xzf", tgz, "-C", tmp], { stdout: "ignore", stderr: "ignore" })
+    await proc.exited
+
+    const bin = process.execPath
+    const ext = os === "windows" ? ".exe" : ""
+    const src = path.join(tmp, "package", "bin", `codeblog${ext}`)
+
+    await fs.copyFile(src, bin)
+    if (os !== "windows") {
+      await fs.chmod(bin, 0o755)
+    }
+
+    await fs.rm(tmp, { recursive: true, force: true })
+
+    UI.success(`Updated to v${latest}!`)
+  },
+}

package/src/index.ts

@@ -34,8 +34,9 @@ import { TuiCommand } from "./cli/cmd/tui"
 import { WeeklyDigestCommand } from "./cli/cmd/weekly-digest"
 import { TagsCommand } from "./cli/cmd/tags"
 import { ExploreCommand } from "./cli/cmd/explore"
+import { UpdateCommand } from "./cli/cmd/update"
 
-const VERSION = "1.4.0"
+const VERSION = (await import("../package.json")).version
 
 process.on("unhandledRejection", (e) => {
   Log.Default.error("rejection", {
@@ -115,6 +116,8 @@ const cli = yargs(hideBin(process.argv))
   .command(DashboardCommand)
   .command(AgentsCommand)
   .command(MyPostsCommand)
+  // Update
+  .command(UpdateCommand)
   .fail((msg, err) => {
     if (
       msg?.startsWith("Unknown argument") ||

package/src/tui/app.tsx

@@ -2,19 +2,23 @@ import { render, useKeyboard, useRenderer, useTerminalDimensions } from "@opentu
 import { Switch, Match, onMount, createSignal, Show } from "solid-js"
 import { RouteProvider, useRoute } from "./context/route"
 import { ExitProvider, useExit } from "./context/exit"
+import { ThemeProvider, useTheme } from "./context/theme"
 import { Home } from "./routes/home"
 import { Chat } from "./routes/chat"
 
-const VERSION = "1.3.0"
+import pkg from "../../package.json"
+const VERSION = pkg.version
 
 export function tui(input: { onExit?: () => Promise<void> }) {
   return new Promise<void>(async (resolve) => {
     render(
       () => (
         <ExitProvider onExit={async () => { await input.onExit?.(); resolve() }}>
-          <RouteProvider>
-            <App />
-          </RouteProvider>
+          <ThemeProvider>
+            <RouteProvider>
+              <App />
+            </RouteProvider>
+          </ThemeProvider>
         </ExitProvider>
       ),
       {
@@ -30,6 +34,7 @@ export function tui(input: { onExit?: () => Promise<void> }) {
 function App() {
   const route = useRoute()
   const exit = useExit()
+  const theme = useTheme()
   const dimensions = useTerminalDimensions()
   const renderer = useRenderer()
   const [loggedIn, setLoggedIn] = createSignal(false)
@@ -118,26 +123,26 @@ function App() {
 
       {/* Status bar */}
       <box paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1} flexShrink={0} flexDirection="row">
-        <text fg="#6a737c">
+        <text fg={theme.colors.textMuted}>
           {route.data.type === "home"
-            ? "type to chat · /help · q:quit"
+            ? "type to chat · /help · /theme · q:quit"
             : "esc:back · ctrl+c:exit"}
         </text>
         <box flexGrow={1} />
         <Show when={hasAI()}>
-          <text fg="#48a868">{"● "}</text>
-          <text fg="#6a737c">{aiProvider()}</text>
-          <text fg="#6a737c">{"  "}</text>
+          <text fg={theme.colors.success}>{"● "}</text>
+          <text fg={theme.colors.textMuted}>{aiProvider()}</text>
+          <text fg={theme.colors.textMuted}>{"  "}</text>
         </Show>
         <Show when={!hasAI()}>
-          <text fg="#d73a49">{"○ "}</text>
-          <text fg="#6a737c">{"no AI  "}</text>
+          <text fg={theme.colors.error}>{"○ "}</text>
+          <text fg={theme.colors.textMuted}>{"no AI  "}</text>
         </Show>
-        <text fg={loggedIn() ? "#48a868" : "#d73a49"}>
+        <text fg={loggedIn() ? theme.colors.success : theme.colors.error}>
           {loggedIn() ? "● " : "○ "}
         </text>
-        <text fg="#6a737c">{loggedIn() ? username() || "logged in" : "not logged in"}</text>
-        <text fg="#6a737c">{`  v${VERSION}`}</text>
+        <text fg={theme.colors.textMuted}>{loggedIn() ? username() || "logged in" : "not logged in"}</text>
+        <text fg={theme.colors.textMuted}>{`  v${VERSION}`}</text>
       </box>
     </box>
   )

package/src/tui/context/theme.tsx

@@ -0,0 +1,274 @@
+import { createStore } from "solid-js/store"
+import { createSimpleContext } from "./helper"
+
+export type ThemeColors = {
+  text: string
+  textMuted: string
+  primary: string
+  accent: string
+  success: string
+  error: string
+  warning: string
+  input: string
+  cursor: string
+  logo1: string
+  logo2: string
+}
+
+type ThemeDef = {
+  dark: ThemeColors
+  light: ThemeColors
+}
+
+const codeblog: ThemeDef = {
+  dark: {
+    text: "#e7e9eb",
+    textMuted: "#6a737c",
+    primary: "#0074cc",
+    accent: "#f48225",
+    success: "#48a868",
+    error: "#d73a49",
+    warning: "#f48225",
+    input: "#e7e9eb",
+    cursor: "#6a737c",
+    logo1: "#f48225",
+    logo2: "#0074cc",
+  },
+  light: {
+    text: "#232629",
+    textMuted: "#6a737c",
+    primary: "#0074cc",
+    accent: "#f48225",
+    success: "#2ea44f",
+    error: "#cf222e",
+    warning: "#bf8700",
+    input: "#232629",
+    cursor: "#838c95",
+    logo1: "#f48225",
+    logo2: "#0074cc",
+  },
+}
+
+const dracula: ThemeDef = {
+  dark: {
+    text: "#f8f8f2",
+    textMuted: "#6272a4",
+    primary: "#bd93f9",
+    accent: "#ff79c6",
+    success: "#50fa7b",
+    error: "#ff5555",
+    warning: "#f1fa8c",
+    input: "#f8f8f2",
+    cursor: "#6272a4",
+    logo1: "#ff79c6",
+    logo2: "#bd93f9",
+  },
+  light: {
+    text: "#282a36",
+    textMuted: "#6272a4",
+    primary: "#7c3aed",
+    accent: "#db2777",
+    success: "#16a34a",
+    error: "#dc2626",
+    warning: "#ca8a04",
+    input: "#282a36",
+    cursor: "#6272a4",
+    logo1: "#db2777",
+    logo2: "#7c3aed",
+  },
+}
+
+const nord: ThemeDef = {
+  dark: {
+    text: "#eceff4",
+    textMuted: "#4c566a",
+    primary: "#88c0d0",
+    accent: "#81a1c1",
+    success: "#a3be8c",
+    error: "#bf616a",
+    warning: "#ebcb8b",
+    input: "#eceff4",
+    cursor: "#4c566a",
+    logo1: "#88c0d0",
+    logo2: "#81a1c1",
+  },
+  light: {
+    text: "#2e3440",
+    textMuted: "#4c566a",
+    primary: "#5e81ac",
+    accent: "#81a1c1",
+    success: "#a3be8c",
+    error: "#bf616a",
+    warning: "#d08770",
+    input: "#2e3440",
+    cursor: "#4c566a",
+    logo1: "#5e81ac",
+    logo2: "#81a1c1",
+  },
+}
+
+const tokyonight: ThemeDef = {
+  dark: {
+    text: "#c0caf5",
+    textMuted: "#565f89",
+    primary: "#7aa2f7",
+    accent: "#bb9af7",
+    success: "#9ece6a",
+    error: "#f7768e",
+    warning: "#e0af68",
+    input: "#c0caf5",
+    cursor: "#565f89",
+    logo1: "#bb9af7",
+    logo2: "#7aa2f7",
+  },
+  light: {
+    text: "#343b58",
+    textMuted: "#6172b0",
+    primary: "#2e7de9",
+    accent: "#9854f1",
+    success: "#587539",
+    error: "#f52a65",
+    warning: "#8c6c3e",
+    input: "#343b58",
+    cursor: "#6172b0",
+    logo1: "#9854f1",
+    logo2: "#2e7de9",
+  },
+}
+
+const monokai: ThemeDef = {
+  dark: {
+    text: "#f8f8f2",
+    textMuted: "#75715e",
+    primary: "#66d9ef",
+    accent: "#f92672",
+    success: "#a6e22e",
+    error: "#f92672",
+    warning: "#e6db74",
+    input: "#f8f8f2",
+    cursor: "#75715e",
+    logo1: "#f92672",
+    logo2: "#66d9ef",
+  },
+  light: {
+    text: "#272822",
+    textMuted: "#75715e",
+    primary: "#0089b3",
+    accent: "#c4265e",
+    success: "#718c00",
+    error: "#c4265e",
+    warning: "#c99e00",
+    input: "#272822",
+    cursor: "#75715e",
+    logo1: "#c4265e",
+    logo2: "#0089b3",
+  },
+}
+
+const github: ThemeDef = {
+  dark: {
+    text: "#c9d1d9",
+    textMuted: "#8b949e",
+    primary: "#58a6ff",
+    accent: "#bc8cff",
+    success: "#3fb950",
+    error: "#f85149",
+    warning: "#d29922",
+    input: "#c9d1d9",
+    cursor: "#8b949e",
+    logo1: "#58a6ff",
+    logo2: "#bc8cff",
+  },
+  light: {
+    text: "#24292f",
+    textMuted: "#57606a",
+    primary: "#0969da",
+    accent: "#8250df",
+    success: "#1a7f37",
+    error: "#cf222e",
+    warning: "#9a6700",
+    input: "#24292f",
+    cursor: "#57606a",
+    logo1: "#0969da",
+    logo2: "#8250df",
+  },
+}
+
+const solarized: ThemeDef = {
+  dark: {
+    text: "#839496",
+    textMuted: "#586e75",
+    primary: "#268bd2",
+    accent: "#d33682",
+    success: "#859900",
+    error: "#dc322f",
+    warning: "#b58900",
+    input: "#93a1a1",
+    cursor: "#586e75",
+    logo1: "#cb4b16",
+    logo2: "#268bd2",
+  },
+  light: {
+    text: "#657b83",
+    textMuted: "#93a1a1",
+    primary: "#268bd2",
+    accent: "#d33682",
+    success: "#859900",
+    error: "#dc322f",
+    warning: "#b58900",
+    input: "#586e75",
+    cursor: "#93a1a1",
+    logo1: "#cb4b16",
+    logo2: "#268bd2",
+  },
+}
+
+export const THEMES: Record<string, ThemeDef> = {
+  codeblog,
+  dracula,
+  nord,
+  tokyonight,
+  monokai,
+  github,
+  solarized,
+}
+
+export const THEME_NAMES = Object.keys(THEMES)
+
+function detect(): "dark" | "light" {
+  const env = process.env.COLORFGBG
+  if (env) {
+    const parts = env.split(";")
+    const bg = parseInt(parts[parts.length - 1] || "0", 10)
+    if (bg > 6 && bg !== 8) return "light"
+  }
+  return "dark"
+}
+
+export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
+  name: "Theme",
+  init: () => {
+    const [store, setStore] = createStore({
+      name: "codeblog" as string,
+      mode: detect() as "dark" | "light",
+    })
+
+    return {
+      get colors(): ThemeColors {
+        const def = THEMES[store.name] || THEMES.codeblog
+        return def[store.mode]
+      },
+      get name() { return store.name },
+      get mode() { return store.mode },
+      set(name: string) {
+        if (THEMES[name]) setStore("name", name)
+      },
+      toggle() {
+        setStore("mode", store.mode === "dark" ? "light" : "dark")
+      },
+      setMode(mode: "dark" | "light") {
+        setStore("mode", mode)
+      },
+    }
+  },
+})

package/src/tui/routes/chat.tsx

@@ -1,6 +1,7 @@
 import { createSignal, For, Show, onMount } from "solid-js"
 import { useKeyboard } from "@opentui/solid"
 import { useRoute } from "../context/route"
+import { useTheme } from "../context/theme"
 
 interface Message {
   role: "user" | "assistant"
@@ -9,6 +10,7 @@ interface Message {
 
 export function Chat() {
   const route = useRoute()
+  const theme = useTheme()
   const [messages, setMessages] = createSignal<Message[]>([])
   const [streaming, setStreaming] = createSignal(false)
   const [streamText, setStreamText] = createSignal("")
@@ -164,12 +166,12 @@ export function Chat() {
     <box flexDirection="column" flexGrow={1}>
       {/* Header */}
       <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0} flexDirection="row" gap={1}>
-        <text fg="#0074cc">
+        <text fg={theme.colors.primary}>
           <span style={{ bold: true }}>AI Chat</span>
         </text>
-        <text fg="#6a737c">{modelName()}</text>
+        <text fg={theme.colors.textMuted}>{modelName()}</text>
         <box flexGrow={1} />
-        <text fg="#6a737c">esc:back · /help · /model · /clear</text>
+        <text fg={theme.colors.textMuted}>esc:back · /help · /model · /clear</text>
       </box>
 
       {/* Messages */}
@@ -177,31 +179,31 @@ export function Chat() {
         <For each={messages()}>
           {(msg) => (
             <box flexDirection="row" paddingBottom={1}>
-              <text fg={msg.role === "user" ? "#0074cc" : "#48a868"}>
+              <text fg={msg.role === "user" ? theme.colors.primary : theme.colors.success}>
                 <span style={{ bold: true }}>{msg.role === "user" ? "❯ " : "◆ "}</span>
               </text>
-              <text fg="#e7e9eb">{msg.content}</text>
+              <text fg={theme.colors.text}>{msg.content}</text>
             </box>
           )}
         </For>
 
         <Show when={streaming()}>
           <box flexDirection="row" paddingBottom={1}>
-            <text fg="#48a868">
+            <text fg={theme.colors.success}>
               <span style={{ bold: true }}>{"◆ "}</span>
             </text>
-            <text fg="#a0a0a0">{streamText() || "thinking..."}</text>
+            <text fg={theme.colors.textMuted}>{streamText() || "thinking..."}</text>
           </box>
         </Show>
       </box>
 
       {/* Input */}
       <box paddingLeft={2} paddingRight={2} paddingBottom={1} flexShrink={0} flexDirection="row">
-        <text fg="#0074cc">
+        <text fg={theme.colors.primary}>
           <span style={{ bold: true }}>{"❯ "}</span>
         </text>
-        <text fg="#e7e9eb">{inputBuf()}</text>
-        <text fg="#6a737c">{"█"}</text>
+        <text fg={theme.colors.input}>{inputBuf()}</text>
+        <text fg={theme.colors.cursor}>{"█"}</text>
       </box>
     </box>
   )

package/src/tui/routes/home.tsx

@@ -2,6 +2,7 @@ import { createSignal, Show } from "solid-js"
 import { useKeyboard } from "@opentui/solid"
 import { useRoute } from "../context/route"
 import { useExit } from "../context/exit"
+import { useTheme, THEME_NAMES } from "../context/theme"
 
 const LOGO = [
   "  ██████╗ ██████╗ ██████╗ ███████╗██████╗ ██╗      ██████╗  ██████╗ ",
@@ -26,6 +27,8 @@ const HELP_TEXT = [
   "  /notifications      View notifications",
   "  /dashboard          Your stats",
   "  /models             List available AI models",
+  "  /theme [name]       Switch theme (codeblog, dracula, nord, tokyonight, monokai, github, solarized)",
+  "  /dark | /light       Toggle dark/light mode",
   "  /help               Show this help",
   "  /exit               Exit",
   "",
@@ -41,6 +44,7 @@ export function Home(props: {
 }) {
   const route = useRoute()
   const exit = useExit()
+  const theme = useTheme()
   const [input, setInput] = createSignal("")
   const [message, setMessage] = createSignal("")
   const [messageColor, setMessageColor] = createSignal("#6a737c")
@@ -72,15 +76,42 @@ export function Home(props: {
       }
 
       if (cmd === "/login") {
-        showMsg("Opening browser for login...", "#0074cc")
+        showMsg("Opening browser for login...", theme.colors.primary)
         await props.onLogin()
-        showMsg("Logged in!", "#48a868")
+        showMsg("Logged in!", theme.colors.success)
+        return
+      }
+
+      if (cmd === "/theme") {
+        const name = parts[1]
+        if (!name) {
+          showMsg(`Theme: ${theme.name} (${theme.mode}) | Available: ${THEME_NAMES.join(", ")}`, theme.colors.text)
+          return
+        }
+        if (THEME_NAMES.includes(name)) {
+          theme.set(name)
+          showMsg(`Theme set to ${name}`, theme.colors.success)
+        } else {
+          showMsg(`Unknown theme: ${name}. Available: ${THEME_NAMES.join(", ")}`, theme.colors.error)
+        }
+        return
+      }
+
+      if (cmd === "/dark") {
+        theme.setMode("dark")
+        showMsg("Switched to dark mode", theme.colors.success)
+        return
+      }
+
+      if (cmd === "/light") {
+        theme.setMode("light")
+        showMsg("Switched to light mode", theme.colors.success)
         return
       }
 
       if (cmd === "/config") {
         if (parts[1] === "ai") {
-          showMsg("Use CLI: codeblog config --provider anthropic --api-key sk-...", "#f48225")
+          showMsg("Use CLI: codeblog config --provider anthropic --api-key sk-...", theme.colors.warning)
           return
         }
         try {
@@ -89,73 +120,72 @@ export function Home(props: {
           const providers = cfg.providers || {}
           const keys = Object.keys(providers)
           const model = cfg.model || "claude-sonnet-4-20250514"
-          showMsg(`Model: ${model} | Providers: ${keys.length > 0 ? keys.join(", ") : "none"} | URL: ${cfg.api_url || "https://codeblog.ai"}`, "#e7e9eb")
+          showMsg(`Model: ${model} | Providers: ${keys.length > 0 ? keys.join(", ") : "none"} | URL: ${cfg.api_url || "https://codeblog.ai"}`, theme.colors.text)
         } catch {
-          showMsg("Failed to load config", "#d73a49")
+          showMsg("Failed to load config", theme.colors.error)
         }
         return
       }
 
       if (cmd === "/scan") {
-        showMsg("Scanning IDE sessions...", "#0074cc")
+        showMsg("Scanning IDE sessions...", theme.colors.primary)
         try {
           const { registerAllScanners, scanAll } = await import("../../scanner")
           registerAllScanners()
           const sessions = scanAll(10)
           if (sessions.length === 0) {
-            showMsg("No IDE sessions found.", "#f48225")
+            showMsg("No IDE sessions found.", theme.colors.warning)
           } else {
             const summary = sessions.slice(0, 3).map((s) => `[${s.source}] ${s.project}`).join(" | ")
-            showMsg(`Found ${sessions.length} sessions: ${summary}`, "#48a868")
+            showMsg(`Found ${sessions.length} sessions: ${summary}`, theme.colors.success)
           }
         } catch (err) {
-          showMsg(`Scan failed: ${err instanceof Error ? err.message : String(err)}`, "#d73a49")
+          showMsg(`Scan failed: ${err instanceof Error ? err.message : String(err)}`, theme.colors.error)
         }
         return
       }
 
       if (cmd === "/publish") {
-        showMsg("Publishing sessions...", "#0074cc")
+        showMsg("Publishing sessions...", theme.colors.primary)
         try {
           const { Publisher } = await import("../../publisher")
           const results = await Publisher.scanAndPublish({ limit: 1 })
           const ok = results.filter((r) => r.postId)
           if (ok.length > 0) {
-            showMsg(`Published ${ok.length} post(s)!`, "#48a868")
+            showMsg(`Published ${ok.length} post(s)!`, theme.colors.success)
           } else {
-            showMsg("No sessions to publish.", "#f48225")
+            showMsg("No sessions to publish.", theme.colors.warning)
           }
         } catch (err) {
-          showMsg(`Publish failed: ${err instanceof Error ? err.message : String(err)}`, "#d73a49")
+          showMsg(`Publish failed: ${err instanceof Error ? err.message : String(err)}`, theme.colors.error)
         }
         return
       }
 
       if (cmd === "/ai-publish") {
         if (!props.hasAI) {
-          showMsg("No AI configured. Use: /config ai", "#d73a49")
+          showMsg("No AI configured. Use: /config ai", theme.colors.error)
           return
         }
-        showMsg("AI is writing a post from your session...", "#0074cc")
-        // Delegate to CLI command for now
-        showMsg("Use CLI: codeblog ai-publish", "#f48225")
+        showMsg("AI is writing a post from your session...", theme.colors.primary)
+        showMsg("Use CLI: codeblog ai-publish", theme.colors.warning)
         return
       }
 
       if (cmd === "/feed") {
-        showMsg("Loading feed...", "#0074cc")
+        showMsg("Loading feed...", theme.colors.primary)
         try {
           const { Feed } = await import("../../api/feed")
           const result = await Feed.list()
           const posts = (result as any).posts || []
           if (posts.length === 0) {
-            showMsg("No posts yet.", "#f48225")
+            showMsg("No posts yet.", theme.colors.warning)
           } else {
             const summary = posts.slice(0, 3).map((p: any) => p.title?.slice(0, 40)).join(" | ")
-            showMsg(`${posts.length} posts: ${summary}`, "#e7e9eb")
+            showMsg(`${posts.length} posts: ${summary}`, theme.colors.text)
           }
         } catch (err) {
-          showMsg(`Feed failed: ${err instanceof Error ? err.message : String(err)}`, "#d73a49")
+          showMsg(`Feed failed: ${err instanceof Error ? err.message : String(err)}`, theme.colors.error)
         }
         return
       }
@@ -166,9 +196,9 @@ export function Home(props: {
           const models = await AIProvider.available()
           const configured = models.filter((m) => m.hasKey)
           const names = configured.map((m) => m.model.name).join(", ")
-          showMsg(configured.length > 0 ? `Available: ${names}` : "No models configured. Use: codeblog config --provider anthropic --api-key sk-...", configured.length > 0 ? "#48a868" : "#f48225")
+          showMsg(configured.length > 0 ? `Available: ${names}` : "No models configured. Use: codeblog config --provider anthropic --api-key sk-...", configured.length > 0 ? theme.colors.success : theme.colors.warning)
         } catch (err) {
-          showMsg(`Failed: ${err instanceof Error ? err.message : String(err)}`, "#d73a49")
+          showMsg(`Failed: ${err instanceof Error ? err.message : String(err)}`, theme.colors.error)
         }
         return
       }
@@ -176,32 +206,32 @@ export function Home(props: {
       if (cmd === "/search") {
         const query = parts.slice(1).join(" ")
         if (!query) {
-          showMsg("Usage: /search <query>", "#f48225")
+          showMsg("Usage: /search <query>", theme.colors.warning)
           return
         }
         try {
           const { Posts } = await import("../../api/posts")
           const result = await Posts.search(query)
           const posts = (result as any).posts || []
-          showMsg(posts.length > 0 ? `${posts.length} results for "${query}"` : `No results for "${query}"`, posts.length > 0 ? "#48a868" : "#f48225")
+          showMsg(posts.length > 0 ? `${posts.length} results for "${query}"` : `No results for "${query}"`, posts.length > 0 ? theme.colors.success : theme.colors.warning)
         } catch (err) {
-          showMsg(`Search failed: ${err instanceof Error ? err.message : String(err)}`, "#d73a49")
+          showMsg(`Search failed: ${err instanceof Error ? err.message : String(err)}`, theme.colors.error)
         }
         return
       }
 
       if (cmd === "/trending" || cmd === "/notifications" || cmd === "/dashboard") {
-        showMsg(`Use CLI: codeblog ${cmd.slice(1)}`, "#f48225")
+        showMsg(`Use CLI: codeblog ${cmd.slice(1)}`, theme.colors.warning)
         return
       }
 
-      showMsg(`Unknown command: ${cmd}. Type /help`, "#d73a49")
+      showMsg(`Unknown command: ${cmd}. Type /help`, theme.colors.error)
       return
     }
 
     // Regular text → start AI chat
     if (!props.hasAI) {
-      showMsg("No AI provider configured. Run: /config ai", "#d73a49")
+      showMsg("No AI provider configured. Run: /config ai", theme.colors.error)
       return
     }
 
@@ -242,28 +272,28 @@ export function Home(props: {
       {/* Logo */}
       <box flexShrink={0} flexDirection="column">
         {LOGO.map((line, i) => (
-          <text fg={i < 4 ? "#f48225" : "#0074cc"}>{line}</text>
+          <text fg={i < 4 ? theme.colors.logo1 : theme.colors.logo2}>{line}</text>
         ))}
       </box>
 
       <box height={1} flexShrink={0}>
-        <text fg="#6a737c">The AI-powered coding forum</text>
+        <text fg={theme.colors.textMuted}>The AI-powered coding forum</text>
       </box>
 
       {/* Status indicators */}
       <box height={2} flexShrink={0} flexDirection="column" paddingTop={1}>
         <box flexDirection="row" gap={2}>
           <Show when={!props.loggedIn}>
-            <text fg="#d73a49">○ Not logged in — type /login</text>
+            <text fg={theme.colors.error}>○ Not logged in — type /login</text>
           </Show>
           <Show when={props.loggedIn}>
-            <text fg="#48a868">● {props.username || "Logged in"}</text>
+            <text fg={theme.colors.success}>● {props.username || "Logged in"}</text>
           </Show>
           <Show when={!props.hasAI}>
-            <text fg="#d73a49">○ No AI — type /config ai</text>
+            <text fg={theme.colors.error}>○ No AI — type /config ai</text>
           </Show>
           <Show when={props.hasAI}>
-            <text fg="#48a868">● {props.aiProvider}</text>
+            <text fg={theme.colors.success}>● {props.aiProvider}</text>
           </Show>
         </box>
       </box>
@@ -271,11 +301,11 @@ export function Home(props: {
       {/* Input prompt */}
       <box width="100%" maxWidth={75} flexShrink={0} paddingTop={1}>
         <box flexDirection="row" width="100%">
-          <text fg="#0074cc">
+          <text fg={theme.colors.primary}>
             <span style={{ bold: true }}>{"❯ "}</span>
           </text>
-          <text fg="#e7e9eb">{input()}</text>
-          <text fg="#6a737c">{"█"}</text>
+          <text fg={theme.colors.input}>{input()}</text>
+          <text fg={theme.colors.cursor}>{"█"}</text>
         </box>
       </box>
 
@@ -290,7 +320,7 @@ export function Home(props: {
       <Show when={showHelp()}>
         <box width="100%" maxWidth={75} paddingTop={1} flexShrink={0} flexDirection="column">
           {HELP_TEXT.map((line) => (
-            <text fg={line.startsWith("  /") ? "#0074cc" : "#6a737c"}>{line}</text>
+            <text fg={line.startsWith("  /") ? theme.colors.primary : theme.colors.textMuted}>{line}</text>
           ))}
         </box>
       </Show>