codeblog-app 1.5.0 → 1.5.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "codeblog-app",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "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.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"
+    "codeblog-app-darwin-arm64": "1.5.2",
+    "codeblog-app-darwin-x64": "1.5.2",
+    "codeblog-app-linux-arm64": "1.5.2",
+    "codeblog-app-linux-x64": "1.5.2",
+    "codeblog-app-windows-x64": "1.5.2"
   },
   "dependencies": {
     "@ai-sdk/amazon-bedrock": "^4.0.60",

package/src/cli/cmd/update.ts

@@ -67,6 +67,9 @@ export const UpdateCommand: CommandModule = {
     if (os !== "windows") {
       await fs.chmod(bin, 0o755)
     }
+    if (os === "darwin") {
+      Bun.spawn(["codesign", "--sign", "-", "--force", bin], { stdout: "ignore", stderr: "ignore" })
+    }
 
     await fs.rm(tmp, { recursive: true, force: true })
 

package/src/tui/app.tsx

@@ -5,6 +5,7 @@ import { ExitProvider, useExit } from "./context/exit"
 import { ThemeProvider, useTheme } from "./context/theme"
 import { Home } from "./routes/home"
 import { Chat } from "./routes/chat"
+import { ThemeSetup, ThemePicker } from "./routes/setup"
 
 import pkg from "../../package.json"
 const VERSION = pkg.version
@@ -98,6 +99,9 @@ function App() {
   return (
     <box flexDirection="column" width={dimensions().width} height={dimensions().height}>
       <Switch>
+        <Match when={theme.needsSetup}>
+          <ThemeSetup />
+        </Match>
         <Match when={route.data.type === "home"}>
           <Home
             loggedIn={loggedIn()}
@@ -119,6 +123,9 @@ function App() {
         <Match when={route.data.type === "chat"}>
           <Chat />
         </Match>
+        <Match when={route.data.type === "theme"}>
+          <ThemePicker onDone={() => route.navigate({ type: "home" })} />
+        </Match>
       </Switch>
 
       {/* Status bar */}

package/src/tui/context/route.tsx

@@ -8,7 +8,9 @@ export type SearchRoute = { type: "search"; query: string }
 export type TrendingRoute = { type: "trending" }
 export type NotificationsRoute = { type: "notifications" }
 
-export type Route = HomeRoute | ChatRoute | PostRoute | SearchRoute | TrendingRoute | NotificationsRoute
+export type ThemeRoute = { type: "theme" }
+
+export type Route = HomeRoute | ChatRoute | PostRoute | SearchRoute | TrendingRoute | NotificationsRoute | ThemeRoute
 
 export const { use: useRoute, provider: RouteProvider } = createSimpleContext({
   name: "Route",

package/src/tui/context/theme.tsx

@@ -1,5 +1,8 @@
+import path from "path"
+import fs from "fs"
 import { createStore } from "solid-js/store"
 import { createSimpleContext } from "./helper"
+import { Global } from "../../global"
 
 export type ThemeColors = {
   text: string
@@ -223,6 +226,180 @@ const solarized: ThemeDef = {
   },
 }
 
+const catppuccin: ThemeDef = {
+  dark: {
+    text: "#cdd6f4",
+    textMuted: "#6c7086",
+    primary: "#89b4fa",
+    accent: "#cba6f7",
+    success: "#a6e3a1",
+    error: "#f38ba8",
+    warning: "#f9e2af",
+    input: "#cdd6f4",
+    cursor: "#6c7086",
+    logo1: "#cba6f7",
+    logo2: "#89b4fa",
+  },
+  light: {
+    text: "#4c4f69",
+    textMuted: "#8c8fa1",
+    primary: "#1e66f5",
+    accent: "#8839ef",
+    success: "#40a02b",
+    error: "#d20f39",
+    warning: "#df8e1d",
+    input: "#4c4f69",
+    cursor: "#8c8fa1",
+    logo1: "#8839ef",
+    logo2: "#1e66f5",
+  },
+}
+
+const rosepine: ThemeDef = {
+  dark: {
+    text: "#e0def4",
+    textMuted: "#6e6a86",
+    primary: "#c4a7e7",
+    accent: "#ebbcba",
+    success: "#31748f",
+    error: "#eb6f92",
+    warning: "#f6c177",
+    input: "#e0def4",
+    cursor: "#6e6a86",
+    logo1: "#ebbcba",
+    logo2: "#c4a7e7",
+  },
+  light: {
+    text: "#575279",
+    textMuted: "#9893a5",
+    primary: "#907aa9",
+    accent: "#d7827e",
+    success: "#286983",
+    error: "#b4637a",
+    warning: "#ea9d34",
+    input: "#575279",
+    cursor: "#9893a5",
+    logo1: "#d7827e",
+    logo2: "#907aa9",
+  },
+}
+
+const gruvbox: ThemeDef = {
+  dark: {
+    text: "#ebdbb2",
+    textMuted: "#928374",
+    primary: "#83a598",
+    accent: "#d3869b",
+    success: "#b8bb26",
+    error: "#fb4934",
+    warning: "#fabd2f",
+    input: "#ebdbb2",
+    cursor: "#928374",
+    logo1: "#fe8019",
+    logo2: "#83a598",
+  },
+  light: {
+    text: "#3c3836",
+    textMuted: "#928374",
+    primary: "#076678",
+    accent: "#8f3f71",
+    success: "#79740e",
+    error: "#9d0006",
+    warning: "#b57614",
+    input: "#3c3836",
+    cursor: "#928374",
+    logo1: "#af3a03",
+    logo2: "#076678",
+  },
+}
+
+const onedark: ThemeDef = {
+  dark: {
+    text: "#abb2bf",
+    textMuted: "#5c6370",
+    primary: "#61afef",
+    accent: "#c678dd",
+    success: "#98c379",
+    error: "#e06c75",
+    warning: "#e5c07b",
+    input: "#abb2bf",
+    cursor: "#5c6370",
+    logo1: "#e06c75",
+    logo2: "#61afef",
+  },
+  light: {
+    text: "#383a42",
+    textMuted: "#a0a1a7",
+    primary: "#4078f2",
+    accent: "#a626a4",
+    success: "#50a14f",
+    error: "#e45649",
+    warning: "#c18401",
+    input: "#383a42",
+    cursor: "#a0a1a7",
+    logo1: "#e45649",
+    logo2: "#4078f2",
+  },
+}
+
+const kanagawa: ThemeDef = {
+  dark: {
+    text: "#dcd7ba",
+    textMuted: "#727169",
+    primary: "#7e9cd8",
+    accent: "#957fb8",
+    success: "#76946a",
+    error: "#c34043",
+    warning: "#dca561",
+    input: "#dcd7ba",
+    cursor: "#727169",
+    logo1: "#ff5d62",
+    logo2: "#7e9cd8",
+  },
+  light: {
+    text: "#1f1f28",
+    textMuted: "#8a8980",
+    primary: "#4e8ca2",
+    accent: "#624c83",
+    success: "#6f894e",
+    error: "#c84053",
+    warning: "#cc6d00",
+    input: "#1f1f28",
+    cursor: "#8a8980",
+    logo1: "#d7474b",
+    logo2: "#4e8ca2",
+  },
+}
+
+const everforest: ThemeDef = {
+  dark: {
+    text: "#d3c6aa",
+    textMuted: "#859289",
+    primary: "#7fbbb3",
+    accent: "#d699b6",
+    success: "#a7c080",
+    error: "#e67e80",
+    warning: "#dbbc7f",
+    input: "#d3c6aa",
+    cursor: "#859289",
+    logo1: "#e69875",
+    logo2: "#7fbbb3",
+  },
+  light: {
+    text: "#5c6a72",
+    textMuted: "#939f91",
+    primary: "#3a94c5",
+    accent: "#df69ba",
+    success: "#8da101",
+    error: "#f85552",
+    warning: "#dfa000",
+    input: "#5c6a72",
+    cursor: "#939f91",
+    logo1: "#f57d26",
+    logo2: "#3a94c5",
+  },
+}
+
 export const THEMES: Record<string, ThemeDef> = {
   codeblog,
   dracula,
@@ -231,26 +408,40 @@ export const THEMES: Record<string, ThemeDef> = {
   monokai,
   github,
   solarized,
+  catppuccin,
+  rosepine,
+  gruvbox,
+  onedark,
+  kanagawa,
+  everforest,
 }
 
 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"
+const configPath = path.join(Global.Path.config, "theme.json")
+
+type SavedTheme = { name: string; mode: "dark" | "light" }
+
+function load(): SavedTheme | null {
+  try {
+    const data = JSON.parse(fs.readFileSync(configPath, "utf-8"))
+    if (data.name && data.mode) return data as SavedTheme
+  } catch {}
+  return null
+}
+
+function save(cfg: SavedTheme) {
+  Bun.write(configPath, JSON.stringify(cfg, null, 2)).catch(() => {})
 }
 
 export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
   name: "Theme",
   init: () => {
+    const saved = load()
     const [store, setStore] = createStore({
-      name: "codeblog" as string,
-      mode: detect() as "dark" | "light",
+      name: saved?.name || "codeblog",
+      mode: (saved?.mode || "dark") as "dark" | "light",
+      needsSetup: !saved,
     })
 
     return {
@@ -260,14 +451,19 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       },
       get name() { return store.name },
       get mode() { return store.mode },
+      get needsSetup() { return store.needsSetup },
       set(name: string) {
-        if (THEMES[name]) setStore("name", name)
-      },
-      toggle() {
-        setStore("mode", store.mode === "dark" ? "light" : "dark")
+        if (!THEMES[name]) return
+        setStore("name", name)
+        save({ name, mode: store.mode })
       },
       setMode(mode: "dark" | "light") {
         setStore("mode", mode)
+        save({ name: store.name, mode })
+      },
+      finishSetup() {
+        setStore("needsSetup", false)
+        save({ name: store.name, mode: store.mode })
       },
     }
   },

package/src/tui/routes/home.tsx

@@ -2,7 +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"
+import { useTheme } from "../context/theme"
 
 const LOGO = [
   "  ██████╗ ██████╗ ██████╗ ███████╗██████╗ ██╗      ██████╗  ██████╗ ",
@@ -27,7 +27,7 @@ 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)",
+  "  /theme [name]       Switch theme (codeblog, dracula, nord, tokyonight, monokai, github, solarized, catppuccin, rosepine, gruvbox, onedark, kanagawa, everforest)",
   "  /dark | /light       Toggle dark/light mode",
   "  /help               Show this help",
   "  /exit               Exit",
@@ -82,30 +82,10 @@ export function Home(props: {
         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)
+      if (cmd === "/theme" || cmd === "/dark" || cmd === "/light") {
+        if (cmd === "/dark") theme.setMode("dark")
+        if (cmd === "/light") theme.setMode("light")
+        route.navigate({ type: "theme" })
         return
       }
 

package/src/tui/routes/setup.tsx

@@ -0,0 +1,255 @@
+import { createSignal } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useTheme, THEME_NAMES, THEMES } from "../context/theme"
+
+// High-contrast colors that are visible on ANY terminal background
+const HC = {
+  title: "#ff6600",
+  text: "#888888",
+  selected: "#00cc00",
+  dim: "#999999",
+}
+
+export function ThemeSetup() {
+  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)
+
+  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()])
+        setStep("theme")
+        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(THEME_NAMES[next])
+        evt.preventDefault()
+        return
+      }
+      if (evt.name === "down" || evt.name === "j") {
+        const next = (themeIdx() + 1) % THEME_NAMES.length
+        setThemeIdx(next)
+        theme.set(THEME_NAMES[next])
+        evt.preventDefault()
+        return
+      }
+      if (evt.name === "return") {
+        theme.finishSetup()
+        evt.preventDefault()
+        return
+      }
+      if (evt.name === "escape") {
+        setStep("mode")
+        evt.preventDefault()
+        return
+      }
+    }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1} alignItems="center" paddingLeft={2} paddingRight={2}>
+      <box flexGrow={1} minHeight={0} />
+
+      <box flexShrink={0} flexDirection="column" alignItems="center">
+        <text fg={HC.title}>
+          <span style={{ bold: true }}>{"★ Welcome to CodeBlog ★"}</span>
+        </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 = THEMES[name][theme.mode]
+            return (
+              <box flexDirection="row" paddingLeft={2}>
+                <text fg={themeIdx() === i ? c.primary : theme.colors.textMuted}>
+                  {themeIdx() === i ? "❯ " : "  "}
+                </text>
+                <text fg={themeIdx() === i ? c.text : theme.colors.textMuted}>
+                  <span style={{ bold: themeIdx() === 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>
+            )
+          })}
+          <box height={1} />
+          <text fg={theme.colors.textMuted}>{"↑↓ select · Enter confirm · Esc back"}</text>
+        </box>
+      )}
+
+      <box flexGrow={1} minHeight={0} />
+    </box>
+  )
+}
+
+export function ThemePicker(props: { onDone: () => void }) {
+  const theme = useTheme()
+  const [idx, setIdx] = createSignal(THEME_NAMES.indexOf(theme.name))
+  const [tab, setTab] = createSignal<"theme" | "mode">("theme")
+
+  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(THEME_NAMES[next])
+        evt.preventDefault()
+        return
+      }
+      if (evt.name === "down" || evt.name === "j") {
+        const next = (idx() + 1) % THEME_NAMES.length
+        setIdx(next)
+        theme.set(THEME_NAMES[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 (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
+      }
+    }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1} paddingLeft={2} paddingRight={2} paddingTop={1}>
+      <box flexDirection="row" gap={4} flexShrink={0}>
+        <text fg={theme.colors.primary}>
+          <span style={{ bold: true }}>Theme Settings</span>
+        </text>
+        <box flexGrow={1} />
+        <text fg={theme.colors.textMuted}>{"Tab: switch section · 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 = THEMES[name][theme.mode]
+            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>
+            )
+          })}
+        </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>
+          <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>
+        </box>
+      </box>
+    </box>
+  )
+}