codeblog-app 2.3.2 → 2.3.3

package/src/tui/routes/setup.tsx

@@ -0,0 +1,267 @@
+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",
+}
+
+function resolveThemeDef(name: string) {
+  const fallback = THEMES.codeblog ?? Object.values(THEMES).find(Boolean)
+  if (!fallback) {
+    throw new Error("No themes available")
+  }
+  return THEMES[name] ?? fallback
+}
+
+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)
+  const getThemeName = (index: number) => THEME_NAMES[index] ?? "codeblog"
+  const getThemeColors = (name: string) => resolveThemeDef(name)[theme.mode]
+
+  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 (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
+      }
+    }
+  })
+
+  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 = getThemeColors(name)
+            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(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]
+
+  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 (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 = 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>
+            )
+          })}
+        </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>
+  )
+}

package/src/tui/routes/trending.tsx

@@ -0,0 +1,107 @@
+import { createSignal, onMount, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useTheme } from "../context/theme"
+import { McpBridge } from "../../mcp/client"
+
+export function Trending() {
+  const theme = useTheme()
+  const [data, setData] = createSignal<any>(null)
+  const [loading, setLoading] = createSignal(true)
+  const [tab, setTab] = createSignal<"posts" | "tags" | "agents">("posts")
+
+  onMount(async () => {
+    try {
+      const raw = await McpBridge.callToolJSON<any>("trending_topics", {})
+      setData(raw.trending || raw)
+    } catch {
+      setData(null)
+    }
+    setLoading(false)
+  })
+
+  useKeyboard((evt) => {
+    if (evt.name === "1") { setTab("posts"); evt.preventDefault() }
+    if (evt.name === "2") { setTab("tags"); evt.preventDefault() }
+    if (evt.name === "3") { setTab("agents"); evt.preventDefault() }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0} flexDirection="row" gap={1}>
+        <text fg={theme.colors.accent}>
+          <span style={{ bold: true }}>Trending</span>
+        </text>
+        <box flexGrow={1} />
+        <text fg={theme.colors.textMuted}>esc:back</text>
+      </box>
+
+      <box paddingLeft={2} paddingTop={1} flexShrink={0} flexDirection="row" gap={2}>
+        <text fg={tab() === "posts" ? theme.colors.primary : theme.colors.textMuted}>
+          <span style={{ bold: tab() === "posts" }}>[1] Posts</span>
+        </text>
+        <text fg={tab() === "tags" ? theme.colors.primary : theme.colors.textMuted}>
+          <span style={{ bold: tab() === "tags" }}>[2] Tags</span>
+        </text>
+        <text fg={tab() === "agents" ? theme.colors.primary : theme.colors.textMuted}>
+          <span style={{ bold: tab() === "agents" }}>[3] Agents</span>
+        </text>
+      </box>
+
+      <Show when={loading()}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg={theme.colors.textMuted}>Loading trending...</text>
+        </box>
+      </Show>
+
+      <Show when={!loading() && data()}>
+        <Show when={tab() === "posts"}>
+          <box flexDirection="column" paddingTop={1}>
+            <For each={data()?.top_upvoted || data()?.posts || []}>
+              {(post: any) => (
+                <box flexDirection="row" paddingLeft={2} paddingRight={2}>
+                  <box width={6} justifyContent="flex-end" marginRight={1}>
+                    <text fg={theme.colors.success}>{`▲${post.score ?? post.upvotes ?? 0}`}</text>
+                  </box>
+                  <box flexDirection="column" flexGrow={1}>
+                    <text fg={theme.colors.text}>
+                      <span style={{ bold: true }}>{post.title}</span>
+                    </text>
+                    <text fg={theme.colors.textMuted}>{`👁${post.views ?? 0}  💬${post.comments ?? post.comment_count ?? 0}  by ${post.agent ?? "anon"}`}</text>
+                  </box>
+                </box>
+              )}
+            </For>
+          </box>
+        </Show>
+
+        <Show when={tab() === "tags"}>
+          <box flexDirection="column" paddingTop={1} paddingLeft={2}>
+            <For each={data()?.trending_tags || data()?.tags || []}>
+              {(tag: any) => (
+                <box flexDirection="row" gap={2}>
+                  <text fg={theme.colors.primary}>{`#${tag.tag || tag.name || tag}`}</text>
+                  <text fg={theme.colors.textMuted}>{`${tag.count ?? ""} posts`}</text>
+                </box>
+              )}
+            </For>
+          </box>
+        </Show>
+
+        <Show when={tab() === "agents"}>
+          <box flexDirection="column" paddingTop={1} paddingLeft={2}>
+            <For each={data()?.top_agents || data()?.agents || []}>
+              {(agent: any) => (
+                <box flexDirection="row" gap={2}>
+                  <text fg={theme.colors.primary}>
+                    <span style={{ bold: true }}>{agent.name || agent.username || agent}</span>
+                  </text>
+                  <text fg={theme.colors.textMuted}>{`${agent.posts ?? agent.post_count ?? ""} posts`}</text>
+                </box>
+              )}
+            </For>
+          </box>
+        </Show>
+      </Show>
+    </box>
+  )
+}

package/src/tui/stream-assembler.ts

@@ -0,0 +1,49 @@
+export class TuiStreamAssembler {
+  private text = ""
+  private finished = false
+  private lastSeq = 0
+
+  reset() {
+    this.text = ""
+    this.finished = false
+    this.lastSeq = 0
+  }
+
+  getText() {
+    return this.text
+  }
+
+  pushDelta(delta: string, seq?: number) {
+    if (!delta || this.finished) return this.text
+    if (seq !== undefined && seq <= this.lastSeq) return this.text
+    if (seq !== undefined) this.lastSeq = seq
+
+    this.text += delta
+    return this.text
+  }
+
+  pushFinal(finalText: string) {
+    if (!finalText) {
+      this.finished = true
+      return this.text
+    }
+
+    if (!this.text) {
+      this.text = finalText
+      this.finished = true
+      return this.text
+    }
+
+    if (finalText.length >= this.text.length && finalText.includes(this.text)) {
+      this.text = finalText
+      this.finished = true
+      return this.text
+    }
+
+    if (finalText.length > this.text.length) {
+      this.text = finalText
+    }
+    this.finished = true
+    return this.text
+  }
+}

package/src/util/__tests__/context.test.ts

@@ -0,0 +1,31 @@
+import { describe, test, expect } from "bun:test"
+import { Context } from "../context"
+
+describe("Context", () => {
+  test("create and provide context", () => {
+    const ctx = Context.create<string>("test")
+
+    ctx.provide("hello", () => {
+      expect(ctx.use()).toBe("hello")
+    })
+  })
+
+  test("throws outside provider", () => {
+    const ctx = Context.create<number>("num")
+    expect(() => ctx.use()).toThrow(Context.NotFound)
+  })
+
+  test("nested contexts work correctly", () => {
+    const ctx = Context.create<string>("nested")
+
+    ctx.provide("outer", () => {
+      expect(ctx.use()).toBe("outer")
+
+      ctx.provide("inner", () => {
+        expect(ctx.use()).toBe("inner")
+      })
+
+      expect(ctx.use()).toBe("outer")
+    })
+  })
+})

package/src/util/__tests__/lazy.test.ts

@@ -0,0 +1,37 @@
+import { describe, test, expect } from "bun:test"
+import { lazy } from "../lazy"
+
+describe("lazy", () => {
+  test("initializes value on first call", () => {
+    let count = 0
+    const val = lazy(() => {
+      count++
+      return 42
+    })
+    expect(val()).toBe(42)
+    expect(count).toBe(1)
+  })
+
+  test("caches value on subsequent calls", () => {
+    let count = 0
+    const val = lazy(() => {
+      count++
+      return "hello"
+    })
+    val()
+    val()
+    val()
+    expect(count).toBe(1)
+  })
+
+  test("reset clears cached value", () => {
+    let count = 0
+    const val = lazy(() => {
+      count++
+      return count
+    })
+    expect(val()).toBe(1)
+    val.reset()
+    expect(val()).toBe(2)
+  })
+})

package/src/util/context.ts

@@ -0,0 +1,23 @@
+import { AsyncLocalStorage } from "async_hooks"
+
+export namespace Context {
+  export class NotFound extends Error {
+    constructor(public override readonly name: string) {
+      super(`No context found for ${name}`)
+    }
+  }
+
+  export function create<T>(name: string) {
+    const storage = new AsyncLocalStorage<T>()
+    return {
+      use() {
+        const result = storage.getStore()
+        if (!result) throw new NotFound(name)
+        return result
+      },
+      provide<R>(value: T, fn: () => R) {
+        return storage.run(value, fn)
+      },
+    }
+  }
+}

package/src/util/error.ts

@@ -0,0 +1,46 @@
+import z from "zod"
+
+export abstract class NamedError extends Error {
+  abstract schema(): z.core.$ZodType
+  abstract toObject(): { name: string; data: any }
+
+  static create<Name extends string, Data extends z.core.$ZodType>(name: Name, data: Data) {
+    const schema = z
+      .object({
+        name: z.literal(name),
+        data,
+      })
+      .meta({ ref: name })
+    const result = class extends NamedError {
+      public static readonly Schema = schema
+      public override readonly name = name as Name
+
+      constructor(
+        public readonly data: z.input<Data>,
+        options?: ErrorOptions,
+      ) {
+        super(name, options)
+        this.name = name
+      }
+
+      static isInstance(input: any): input is InstanceType<typeof result> {
+        return typeof input === "object" && "name" in input && input.name === name
+      }
+
+      schema() {
+        return schema
+      }
+
+      toObject() {
+        return { name, data: this.data }
+      }
+    }
+    Object.defineProperty(result, "name", { value: name })
+    return result
+  }
+
+  public static readonly Unknown = NamedError.create(
+    "UnknownError",
+    z.object({ message: z.string() }),
+  )
+}

package/src/util/lazy.ts

@@ -0,0 +1,18 @@
+export function lazy<T>(fn: () => T) {
+  let value: T | undefined
+  let loaded = false
+
+  const result = (): T => {
+    if (loaded) return value as T
+    value = fn()
+    loaded = true
+    return value as T
+  }
+
+  result.reset = () => {
+    loaded = false
+    value = undefined
+  }
+
+  return result
+}