codeblog-app 2.1.2 → 2.1.3

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>
+  )
+}

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/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
+}

package/src/util/log.ts

@@ -0,0 +1,142 @@
+import path from "path"
+import fs from "fs/promises"
+import { Global } from "../global"
+import z from "zod"
+
+export namespace Log {
+  export const Level = z.enum(["DEBUG", "INFO", "WARN", "ERROR"]).meta({ ref: "LogLevel", description: "Log level" })
+  export type Level = z.infer<typeof Level>
+
+  const levelPriority: Record<Level, number> = {
+    DEBUG: 0,
+    INFO: 1,
+    WARN: 2,
+    ERROR: 3,
+  }
+
+  let level: Level = "INFO"
+
+  function shouldLog(input: Level): boolean {
+    return levelPriority[input] >= levelPriority[level]
+  }
+
+  export type Logger = {
+    debug(message?: any, extra?: Record<string, any>): void
+    info(message?: any, extra?: Record<string, any>): void
+    error(message?: any, extra?: Record<string, any>): void
+    warn(message?: any, extra?: Record<string, any>): void
+    tag(key: string, value: string): Logger
+    clone(): Logger
+  }
+
+  const loggers = new Map<string, Logger>()
+
+  export const Default = create({ service: "default" })
+
+  export interface Options {
+    print: boolean
+    dev?: boolean
+    level?: Level
+  }
+
+  let logpath = ""
+  export function file() {
+    return logpath
+  }
+  let write = (msg: any) => {
+    process.stderr.write(msg)
+    return msg.length
+  }
+
+  export async function init(options: Options) {
+    if (options.level) level = options.level
+    cleanup(Global.Path.log)
+    if (options.print) return
+    logpath = path.join(
+      Global.Path.log,
+      options.dev ? "dev.log" : new Date().toISOString().split(".")[0].replace(/:/g, "") + ".log",
+    )
+    const logfile = Bun.file(logpath)
+    await fs.truncate(logpath).catch(() => {})
+    const writer = logfile.writer()
+    write = async (msg: any) => {
+      const num = writer.write(msg)
+      writer.flush()
+      return num
+    }
+  }
+
+  async function cleanup(dir: string) {
+    const glob = new Bun.Glob("????-??-??T??????.log")
+    const files = await Array.fromAsync(
+      glob.scan({
+        cwd: dir,
+        absolute: true,
+      }),
+    )
+    if (files.length <= 5) return
+    const filesToDelete = files.slice(0, -10)
+    await Promise.all(filesToDelete.map((file) => fs.unlink(file).catch(() => {})))
+  }
+
+  function formatError(error: Error, depth = 0): string {
+    const result = error.message
+    return error.cause instanceof Error && depth < 10
+      ? result + " Caused by: " + formatError(error.cause, depth + 1)
+      : result
+  }
+
+  let last = Date.now()
+  export function create(tags?: Record<string, any>) {
+    tags = tags || {}
+
+    const service = tags["service"]
+    if (service && typeof service === "string") {
+      const cached = loggers.get(service)
+      if (cached) return cached
+    }
+
+    function build(message: any, extra?: Record<string, any>) {
+      const prefix = Object.entries({
+        ...tags,
+        ...extra,
+      })
+        .filter(([_, value]) => value !== undefined && value !== null)
+        .map(([key, value]) => {
+          const prefix = `${key}=`
+          if (value instanceof Error) return prefix + formatError(value)
+          if (typeof value === "object") return prefix + JSON.stringify(value)
+          return prefix + value
+        })
+        .join(" ")
+      const next = new Date()
+      const diff = next.getTime() - last
+      last = next.getTime()
+      return [next.toISOString().split(".")[0], "+" + diff + "ms", prefix, message].filter(Boolean).join(" ") + "\n"
+    }
+    const result: Logger = {
+      debug(message?: any, extra?: Record<string, any>) {
+        if (shouldLog("DEBUG")) write("DEBUG " + build(message, extra))
+      },
+      info(message?: any, extra?: Record<string, any>) {
+        if (shouldLog("INFO")) write("INFO  " + build(message, extra))
+      },
+      error(message?: any, extra?: Record<string, any>) {
+        if (shouldLog("ERROR")) write("ERROR " + build(message, extra))
+      },
+      warn(message?: any, extra?: Record<string, any>) {
+        if (shouldLog("WARN")) write("WARN  " + build(message, extra))
+      },
+      tag(key: string, value: string) {
+        if (tags) tags[key] = value
+        return result
+      },
+      clone() {
+        return Log.create({ ...tags })
+      },
+    }
+
+    if (service && typeof service === "string") loggers.set(service, result)
+    return result
+  }
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@tsconfig/bun/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}