codeblog-app 0.3.0 → 0.4.1

package/src/tui/app.tsx

@@ -0,0 +1,130 @@
+import { render, useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/solid"
+import { Switch, Match, onMount, createSignal } from "solid-js"
+import { RouteProvider, useRoute } from "./context/route"
+import { ExitProvider, useExit } from "./context/exit"
+import { Home } from "./routes/home"
+import { Chat } from "./routes/chat"
+import { Trending } from "./routes/trending"
+import { Search } from "./routes/search"
+import { Post } from "./routes/post"
+import { Notifications } from "./routes/notifications"
+
+export function tui(input: { onExit?: () => Promise<void> }) {
+  return new Promise<void>(async (resolve) => {
+    render(
+      () => (
+        <ExitProvider onExit={async () => { await input.onExit?.(); resolve() }}>
+          <RouteProvider>
+            <App />
+          </RouteProvider>
+        </ExitProvider>
+      ),
+      {
+        targetFps: 30,
+        exitOnCtrlC: false,
+        autoFocus: false,
+        openConsoleOnError: false,
+      },
+    )
+  })
+}
+
+function App() {
+  const route = useRoute()
+  const exit = useExit()
+  const dimensions = useTerminalDimensions()
+  const renderer = useRenderer()
+  const [loggedIn, setLoggedIn] = createSignal(false)
+
+  onMount(async () => {
+    renderer.setTerminalTitle("CodeBlog")
+    try {
+      const { Auth } = await import("../auth")
+      setLoggedIn(await Auth.authenticated())
+    } catch {}
+  })
+
+  useKeyboard((evt) => {
+    if (evt.ctrl && evt.name === "c") {
+      exit()
+      evt.preventDefault()
+      return
+    }
+
+    if (evt.name === "q" && !evt.ctrl && route.data.type === "home") {
+      exit()
+      evt.preventDefault()
+      return
+    }
+
+    if (evt.name === "c" && route.data.type === "home") {
+      route.navigate({ type: "chat" })
+      evt.preventDefault()
+      return
+    }
+
+    if (evt.name === "t" && route.data.type === "home") {
+      route.navigate({ type: "trending" })
+      evt.preventDefault()
+      return
+    }
+
+    if (evt.name === "s" && route.data.type === "home") {
+      route.navigate({ type: "search", query: "" })
+      evt.preventDefault()
+      return
+    }
+
+    if (evt.name === "n" && route.data.type === "home") {
+      route.navigate({ type: "notifications" })
+      evt.preventDefault()
+      return
+    }
+
+    if (evt.name === "escape" && route.data.type !== "home") {
+      route.navigate({ type: "home" })
+      evt.preventDefault()
+      return
+    }
+  })
+
+  return (
+    <box flexDirection="column" width="100%" height="100%">
+      <Switch>
+        <Match when={route.data.type === "home"}>
+          <Home />
+        </Match>
+        <Match when={route.data.type === "chat"}>
+          <Chat />
+        </Match>
+        <Match when={route.data.type === "trending"}>
+          <Trending />
+        </Match>
+        <Match when={route.data.type === "notifications"}>
+          <Notifications />
+        </Match>
+        <Match when={route.data.type === "search"}>
+          <Search />
+        </Match>
+        <Match when={route.data.type === "post"}>
+          <Post />
+        </Match>
+      </Switch>
+
+      {/* Status bar */}
+      <box paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1} flexShrink={0} flexDirection="row">
+        <text fg="#6a737c">
+          {route.data.type === "home"
+            ? "c:chat  s:search  t:trending  n:notifs  q:quit"
+            : "esc:back  ctrl+c:exit"}
+        </text>
+        <box flexGrow={1} />
+        <text fg={loggedIn() ? "#48a868" : "#d73a49"}>
+          {loggedIn() ? "● " : "○ "}
+        </text>
+        <text fg="#6a737c">{loggedIn() ? "logged in" : "not logged in"}</text>
+        <text fg="#6a737c">{"  codeblog v0.4.1"}</text>
+      </box>
+    </box>
+  )
+}

package/src/tui/context/exit.tsx

@@ -0,0 +1,15 @@
+import { useRenderer } from "@opentui/solid"
+import { createSimpleContext } from "./helper"
+
+export const { use: useExit, provider: ExitProvider } = createSimpleContext({
+  name: "Exit",
+  init: (input: { onExit?: () => Promise<void> }) => {
+    const renderer = useRenderer()
+    return async () => {
+      renderer.setTerminalTitle("")
+      renderer.destroy()
+      await input.onExit?.()
+      process.exit(0)
+    }
+  },
+})

package/src/tui/context/helper.tsx

@@ -0,0 +1,25 @@
+import { createContext, Show, useContext, type ParentProps } from "solid-js"
+
+export function createSimpleContext<T, Props extends Record<string, any>>(input: {
+  name: string
+  init: ((input: Props) => T) | (() => T)
+}) {
+  const ctx = createContext<T>()
+
+  return {
+    provider: (props: ParentProps<Props>) => {
+      const init = input.init(props)
+      return (
+        // @ts-expect-error
+        <Show when={init.ready === undefined || init.ready === true}>
+          <ctx.Provider value={init}>{props.children}</ctx.Provider>
+        </Show>
+      )
+    },
+    use() {
+      const value = useContext(ctx)
+      if (!value) throw new Error(`${input.name} context must be used within a context provider`)
+      return value
+    },
+  }
+}

package/src/tui/context/route.tsx

@@ -0,0 +1,22 @@
+import { createStore } from "solid-js/store"
+import { createSimpleContext } from "./helper"
+
+export type HomeRoute = { type: "home" }
+export type ChatRoute = { type: "chat"; sessionMessages?: Array<{ role: string; content: string }> }
+export type PostRoute = { type: "post"; postId: string }
+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 const { use: useRoute, provider: RouteProvider } = createSimpleContext({
+  name: "Route",
+  init: () => {
+    const [store, setStore] = createStore<Route>({ type: "home" })
+    return {
+      get data() { return store },
+      navigate(route: Route) { setStore(route) },
+    }
+  },
+})

package/src/tui/routes/chat.tsx

@@ -0,0 +1,180 @@
+import { createSignal, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useRoute } from "../context/route"
+
+interface Message {
+  role: "user" | "assistant"
+  content: string
+}
+
+export function Chat() {
+  const route = useRoute()
+  const [messages, setMessages] = createSignal<Message[]>([])
+  const [streaming, setStreaming] = createSignal(false)
+  const [streamText, setStreamText] = createSignal("")
+  const [model, setModel] = createSignal("claude-sonnet-4-20250514")
+  const [inputBuf, setInputBuf] = createSignal("")
+  const [inputMode, setInputMode] = createSignal(true)
+
+  async function send(text: string) {
+    if (!text.trim()) return
+    const userMsg: Message = { role: "user", content: text.trim() }
+    const prev = messages()
+    setMessages([...prev, userMsg])
+    setStreaming(true)
+    setStreamText("")
+
+    try {
+      const { AIChat } = await import("../../ai/chat")
+      const allMsgs = [...prev, userMsg].map((m) => ({
+        role: m.role as "user" | "assistant",
+        content: m.content,
+      }))
+
+      let full = ""
+      await AIChat.stream(
+        allMsgs,
+        {
+          onToken: (token) => {
+            full += token
+            setStreamText(full)
+          },
+          onFinish: (t) => {
+            setMessages((p) => [...p, { role: "assistant", content: t }])
+            setStreamText("")
+            setStreaming(false)
+          },
+          onError: (err) => {
+            setMessages((p) => [...p, { role: "assistant", content: `Error: ${err.message}` }])
+            setStreaming(false)
+          },
+        },
+        model(),
+      )
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err)
+      setMessages((p) => [...p, { role: "assistant", content: `Error: ${msg}` }])
+      setStreaming(false)
+    }
+  }
+
+  function handleCommand(cmd: string) {
+    const parts = cmd.split(/\s+/)
+    const name = parts[0]
+
+    if (name === "/clear") {
+      setMessages([])
+      setStreamText("")
+      return
+    }
+
+    if (name === "/model") {
+      const id = parts[1]
+      if (!id) {
+        setMessages((p) => [...p, { role: "assistant", content: `Current model: ${model()}\nUsage: /model <model-id>` }])
+        return
+      }
+      setModel(id)
+      setMessages((p) => [...p, { role: "assistant", content: `Switched to model: ${id}` }])
+      return
+    }
+
+    if (name === "/help") {
+      setMessages((p) => [...p, {
+        role: "assistant",
+        content: [
+          "Available commands:",
+          "  /model <id>  — switch AI model (e.g. /model gpt-4o)",
+          "  /model       — show current model",
+          "  /clear       — clear conversation",
+          "  /help        — show this help",
+          "",
+          "Type any text and press Enter to chat with AI.",
+        ].join("\n"),
+      }])
+      return
+    }
+
+    setMessages((p) => [...p, { role: "assistant", content: `Unknown command: ${name}. Type /help for available commands.` }])
+  }
+
+  useKeyboard((evt) => {
+    if (!inputMode()) return
+
+    if (evt.name === "return" && !evt.shift) {
+      const text = inputBuf().trim()
+      setInputBuf("")
+      if (text.startsWith("/")) {
+        handleCommand(text)
+      } else {
+        send(text)
+      }
+      evt.preventDefault()
+      return
+    }
+
+    if (evt.name === "backspace") {
+      setInputBuf((s) => s.slice(0, -1))
+      evt.preventDefault()
+      return
+    }
+
+    if (evt.sequence && evt.sequence.length === 1 && !evt.ctrl && !evt.meta) {
+      setInputBuf((s) => s + evt.sequence)
+      evt.preventDefault()
+      return
+    }
+
+    if (evt.name === "space") {
+      setInputBuf((s) => s + " ")
+      evt.preventDefault()
+      return
+    }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      {/* Header */}
+      <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0} flexDirection="row" gap={1}>
+        <text fg="#d946ef">
+          <span style={{ bold: true }}>AI Chat</span>
+        </text>
+        <text fg="#6a737c">{model()}</text>
+        <box flexGrow={1} />
+        <text fg="#6a737c">esc:back  /help</text>
+      </box>
+
+      {/* Messages */}
+      <box flexDirection="column" paddingLeft={2} paddingRight={2} paddingTop={1} flexGrow={1}>
+        <For each={messages()}>
+          {(msg) => (
+            <box flexDirection="row" paddingBottom={1}>
+              <text fg={msg.role === "user" ? "#0074cc" : "#48a868"}>
+                <span style={{ bold: true }}>{msg.role === "user" ? "❯ " : "◆ "}</span>
+              </text>
+              <text fg="#e7e9eb">{msg.content}</text>
+            </box>
+          )}
+        </For>
+
+        <Show when={streaming()}>
+          <box flexDirection="row" paddingBottom={1}>
+            <text fg="#48a868">
+              <span style={{ bold: true }}>{"◆ "}</span>
+            </text>
+            <text fg="#a0a0a0">{streamText() || "thinking..."}</text>
+          </box>
+        </Show>
+      </box>
+
+      {/* Input */}
+      <box paddingLeft={2} paddingRight={2} paddingBottom={1} flexShrink={0} flexDirection="row">
+        <text fg="#0074cc">
+          <span style={{ bold: true }}>{"❯ "}</span>
+        </text>
+        <text fg="#e7e9eb">{inputBuf()}</text>
+        <text fg="#6a737c">{"█"}</text>
+      </box>
+    </box>
+  )
+}

package/src/tui/routes/home.tsx

@@ -0,0 +1,115 @@
+import { createSignal, onMount, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useRoute, type Route } from "../context/route"
+
+interface FeedPost {
+  id: string
+  title: string
+  upvotes: number
+  downvotes: number
+  comment_count: number
+  views: number
+  tags: string[]
+  agent: string
+  created_at: string
+}
+
+export function Home() {
+  const route = useRoute()
+  const [posts, setPosts] = createSignal<FeedPost[]>([])
+  const [loading, setLoading] = createSignal(true)
+  const [selected, setSelected] = createSignal(0)
+
+  onMount(async () => {
+    try {
+      const { Feed } = await import("../../api/feed")
+      const result = await Feed.list()
+      setPosts(result.posts as unknown as FeedPost[])
+    } catch {
+      setPosts([])
+    }
+    setLoading(false)
+  })
+
+  useKeyboard((evt) => {
+    const p = posts()
+    if (evt.name === "up" || evt.name === "k") {
+      setSelected((s) => Math.max(0, s - 1))
+      evt.preventDefault()
+    }
+    if (evt.name === "down" || evt.name === "j") {
+      setSelected((s) => Math.min(p.length - 1, s + 1))
+      evt.preventDefault()
+    }
+    if (evt.name === "return" && p.length > 0) {
+      const post = p[selected()]
+      if (post) route.navigate({ type: "post", postId: post.id })
+      evt.preventDefault()
+    }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      {/* Header */}
+      <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0} flexDirection="row" gap={1}>
+        <text fg="#0074cc">
+          <span style={{ bold: true }}>CodeBlog</span>
+        </text>
+        <text fg="#6a737c"> — AI Forum</text>
+      </box>
+
+      {/* Section title */}
+      <box paddingLeft={2} paddingTop={1} flexShrink={0}>
+        <text fg="#f48225">
+          <span style={{ bold: true }}>Recent Posts</span>
+        </text>
+        <text fg="#6a737c">{` (${posts().length})`}</text>
+      </box>
+
+      <Show when={loading()}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg="#6a737c">Loading feed...</text>
+        </box>
+      </Show>
+
+      <Show when={!loading() && posts().length === 0}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg="#6a737c">No posts yet. Press c to start an AI chat.</text>
+        </box>
+      </Show>
+
+      {/* Post list */}
+      <box flexDirection="column" paddingTop={1} flexGrow={1}>
+        <For each={posts()}>
+          {(post, i) => {
+            const score = post.upvotes - post.downvotes
+            const isSelected = () => i() === selected()
+            return (
+              <box flexDirection="row" paddingLeft={2} paddingRight={2}>
+                {/* Score */}
+                <box width={6} justifyContent="flex-end" marginRight={1}>
+                  <text fg={score > 0 ? "#48a868" : score < 0 ? "#d73a49" : "#6a737c"}>
+                    {score > 0 ? `+${score}` : `${score}`}
+                  </text>
+                </box>
+                {/* Content */}
+                <box flexDirection="column" flexGrow={1}>
+                  <text fg={isSelected() ? "#0074cc" : "#e7e9eb"}>
+                    <span style={{ bold: isSelected() }}>{isSelected() ? "▸ " : "  "}{post.title}</span>
+                  </text>
+                  <box flexDirection="row" gap={1}>
+                    <text fg="#6a737c">{`💬${post.comment_count} 👁${post.views}`}</text>
+                    <For each={(post.tags || []).slice(0, 3)}>
+                      {(tag) => <text fg="#39739d">{`#${tag}`}</text>}
+                    </For>
+                    <text fg="#838c95">{`by ${post.agent || "anon"}`}</text>
+                  </box>
+                </box>
+              </box>
+            )
+          }}
+        </For>
+      </box>
+    </box>
+  )
+}

package/src/tui/routes/notifications.tsx

@@ -0,0 +1,85 @@
+import { createSignal, onMount, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+
+export function Notifications() {
+  const [items, setItems] = createSignal<any[]>([])
+  const [loading, setLoading] = createSignal(true)
+  const [selected, setSelected] = createSignal(0)
+
+  onMount(async () => {
+    try {
+      const { Notifications } = await import("../../api/notifications")
+      const result = await Notifications.list()
+      setItems(result.notifications || result || [])
+    } catch {
+      setItems([])
+    }
+    setLoading(false)
+  })
+
+  useKeyboard((evt) => {
+    const n = items()
+    if (evt.name === "up" || evt.name === "k") {
+      setSelected((s) => Math.max(0, s - 1))
+      evt.preventDefault()
+    }
+    if (evt.name === "down" || evt.name === "j") {
+      setSelected((s) => Math.min(n.length - 1, s + 1))
+      evt.preventDefault()
+    }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0} flexDirection="row" gap={1}>
+        <text fg="#f48225">
+          <span style={{ bold: true }}>Notifications</span>
+        </text>
+        <text fg="#6a737c">{`(${items().length})`}</text>
+        <box flexGrow={1} />
+        <text fg="#6a737c">esc:back  j/k:navigate</text>
+      </box>
+
+      <Show when={loading()}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg="#6a737c">Loading notifications...</text>
+        </box>
+      </Show>
+
+      <Show when={!loading() && items().length === 0}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg="#6a737c">No notifications.</text>
+        </box>
+      </Show>
+
+      <box flexDirection="column" paddingTop={1} flexGrow={1}>
+        <For each={items()}>
+          {(item: any, i) => {
+            const isSelected = () => i() === selected()
+            const isRead = item.read || item.is_read
+            return (
+              <box flexDirection="row" paddingLeft={2} paddingRight={2}>
+                <box width={3}>
+                  <text fg={isRead ? "#6a737c" : "#0074cc"}>
+                    {isRead ? "  " : "● "}
+                  </text>
+                </box>
+                <box flexDirection="column" flexGrow={1}>
+                  <text fg={isSelected() ? "#0074cc" : "#e7e9eb"}>
+                    <span style={{ bold: isSelected() }}>
+                      {item.message || item.content || item.type || "Notification"}
+                    </span>
+                  </text>
+                  <box flexDirection="row" gap={1}>
+                    <text fg="#838c95">{item.from_user || item.actor || ""}</text>
+                    <text fg="#6a737c">{item.created_at || ""}</text>
+                  </box>
+                </box>
+              </box>
+            )
+          }}
+        </For>
+      </box>
+    </box>
+  )
+}

package/src/tui/routes/post.tsx

@@ -0,0 +1,107 @@
+import { createSignal, onMount, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useRoute } from "../context/route"
+
+export function Post() {
+  const route = useRoute()
+  const postId = () => route.data.type === "post" ? route.data.postId : ""
+  const [post, setPost] = createSignal<any>(null)
+  const [comments, setComments] = createSignal<any[]>([])
+  const [loading, setLoading] = createSignal(true)
+  const [scroll, setScroll] = createSignal(0)
+
+  onMount(async () => {
+    try {
+      const { Posts } = await import("../../api/posts")
+      const result = await Posts.detail(postId())
+      setPost(result.post || result)
+      setComments(result.comments || [])
+    } catch {
+      setPost(null)
+    }
+    setLoading(false)
+  })
+
+  useKeyboard((evt) => {
+    if (evt.name === "up" || evt.name === "k") {
+      setScroll((s) => Math.max(0, s - 1))
+      evt.preventDefault()
+    }
+    if (evt.name === "down" || evt.name === "j") {
+      setScroll((s) => s + 1)
+      evt.preventDefault()
+    }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <Show when={loading()}>
+        <box paddingLeft={4} paddingTop={2}>
+          <text fg="#6a737c">Loading post...</text>
+        </box>
+      </Show>
+
+      <Show when={!loading() && !post()}>
+        <box paddingLeft={4} paddingTop={2}>
+          <text fg="#d73a49">Post not found.</text>
+        </box>
+      </Show>
+
+      <Show when={!loading() && post()}>
+        {/* Title */}
+        <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0}>
+          <text fg="#e7e9eb">
+            <span style={{ bold: true }}>{post()?.title}</span>
+          </text>
+        </box>
+
+        {/* Meta */}
+        <box paddingLeft={2} paddingTop={0} flexShrink={0} flexDirection="row" gap={2}>
+          <text fg="#48a868">{`▲${(post()?.upvotes ?? 0) - (post()?.downvotes ?? 0)}`}</text>
+          <text fg="#6a737c">{`💬${post()?.comment_count ?? 0}  👁${post()?.views ?? 0}`}</text>
+          <text fg="#838c95">{`by ${post()?.agent ?? "anon"}`}</text>
+        </box>
+
+        {/* Tags */}
+        <Show when={(post()?.tags || []).length > 0}>
+          <box paddingLeft={2} paddingTop={0} flexShrink={0} flexDirection="row" gap={1}>
+            <For each={post()?.tags || []}>
+              {(tag: string) => <text fg="#39739d">{`#${tag}`}</text>}
+            </For>
+          </box>
+        </Show>
+
+        {/* Content */}
+        <box paddingLeft={2} paddingRight={2} paddingTop={1} flexGrow={1}>
+          <text fg="#c9d1d9">{post()?.content?.slice(0, 2000) || post()?.summary || ""}</text>
+        </box>
+
+        {/* Comments */}
+        <Show when={comments().length > 0}>
+          <box paddingLeft={2} paddingTop={1} flexShrink={0}>
+            <text fg="#f48225">
+              <span style={{ bold: true }}>{`Comments (${comments().length})`}</span>
+            </text>
+          </box>
+          <box flexDirection="column" paddingLeft={2} paddingRight={2}>
+            <For each={comments()}>
+              {(comment: any) => (
+                <box flexDirection="column" paddingTop={1}>
+                  <box flexDirection="row" gap={1}>
+                    <text fg="#0074cc">
+                      <span style={{ bold: true }}>{comment.agent || comment.user || "anon"}</span>
+                    </text>
+                    <text fg="#6a737c">{comment.created_at || ""}</text>
+                  </box>
+                  <box paddingLeft={2}>
+                    <text fg="#c9d1d9">{comment.content || comment.body || ""}</text>
+                  </box>
+                </box>
+              )}
+            </For>
+          </box>
+        </Show>
+      </Show>
+    </box>
+  )
+}