codeblog-app 2.3.2 → 2.3.3

package/src/tui/routes/model.tsx

@@ -0,0 +1,213 @@
+import { createSignal, createMemo, onMount, Show, For } from "solid-js"
+import { useKeyboard, usePaste } from "@opentui/solid"
+import { useTheme } from "../context/theme"
+
+interface ModelItem {
+  id: string
+  name: string
+  provider: string
+}
+
+export function ModelPicker(props: { onDone: (model?: string) => void }) {
+  const theme = useTheme()
+  const [models, setModels] = createSignal<ModelItem[]>([])
+  const [idx, setIdx] = createSignal(0)
+  const [current, setCurrent] = createSignal("")
+  const [loading, setLoading] = createSignal(true)
+  const [filter, setFilter] = createSignal("")
+  const [status, setStatus] = createSignal("")
+
+  // Visible height for scrolling
+  const maxVisible = 15
+
+  const filtered = createMemo(() => {
+    const q = filter().toLowerCase()
+    if (!q) return models()
+    return models().filter((m) => m.id.toLowerCase().includes(q) || m.name.toLowerCase().includes(q))
+  })
+
+  // Scroll offset
+  const scrollTop = createMemo(() => {
+    const i = idx()
+    const len = filtered().length
+    if (len <= maxVisible) return 0
+    if (i < maxVisible - 2) return 0
+    if (i > len - 3) return Math.max(0, len - maxVisible)
+    return i - maxVisible + 3
+  })
+
+  const visible = createMemo(() => filtered().slice(scrollTop(), scrollTop() + maxVisible))
+
+  onMount(async () => {
+    try {
+      const { AIProvider } = await import("../../ai/provider")
+      const { Config } = await import("../../config")
+      const { resolveModelFromConfig } = await import("../../ai/models")
+      const cfg = await Config.load()
+      const resolved = resolveModelFromConfig(cfg) || AIProvider.DEFAULT_MODEL
+      setCurrent(resolved)
+      if (cfg.model !== resolved) await Config.save({ model: resolved })
+
+      setStatus("Fetching models from API...")
+      const all = await AIProvider.available()
+      const items = all.filter((m) => m.hasKey).map((m) => ({
+        id: m.model.id,
+        name: m.model.name,
+        provider: m.model.providerID,
+      }))
+      if (items.length > 0) {
+        setModels(items)
+        const modelId = resolveModelFromConfig(cfg) || AIProvider.DEFAULT_MODEL
+        const curIdx = items.findIndex((m) => m.id === modelId || `${m.provider}/${m.id}` === modelId)
+        if (curIdx >= 0) setIdx(curIdx)
+        setStatus(`${items.length} models loaded`)
+      } else {
+        setModels([])
+        setStatus("No models with API keys configured")
+      }
+    } catch (err) {
+      setStatus(`Error: ${err instanceof Error ? err.message : String(err)}`)
+    }
+    setLoading(false)
+  })
+
+  usePaste((evt) => {
+    const text = evt.text.replace(/[\n\r]/g, "").trim()
+    if (text) {
+      setFilter((s) => s + text)
+      setIdx(0)
+      evt.preventDefault()
+    }
+  })
+
+  useKeyboard((evt) => {
+    if (evt.name === "up") {
+      setIdx((i) => (i - 1 + filtered().length) % filtered().length)
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "down") {
+      setIdx((i) => (i + 1) % filtered().length)
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "return") {
+      const m = filtered()[idx()]
+      if (m) save(m.id)
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "escape") {
+      if (filter()) { setFilter(""); setIdx(0) }
+      else props.onDone()
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "backspace") {
+      setFilter((s) => s.slice(0, -1))
+      setIdx(0)
+      evt.preventDefault()
+      return
+    }
+    if (evt.sequence && evt.sequence.length >= 1 && !evt.ctrl && !evt.meta) {
+      const clean = evt.sequence.replace(/[\x00-\x1f\x7f]/g, "")
+      if (clean) {
+        setFilter((s) => s + clean)
+        setIdx(0)
+        evt.preventDefault()
+        return
+      }
+    }
+    if (evt.name === "space") {
+      setFilter((s) => s + " ")
+      evt.preventDefault()
+      return
+    }
+  })
+
+  async function save(id: string) {
+    try {
+      const item = filtered().find((m) => m.id === id)
+      const saveId = item && item.provider === "openai-compatible" ? `openai-compatible/${id}` : id
+      const { Config } = await import("../../config")
+      await Config.save({ model: saveId })
+      props.onDone(saveId)
+    } catch {
+      props.onDone()
+    }
+  }
+
+  return (
+    <box flexDirection="column" flexGrow={1} paddingLeft={2} paddingRight={2} paddingTop={1}>
+      <box flexDirection="row" flexShrink={0}>
+        <text fg={theme.colors.primary}>
+          <span style={{ bold: true }}>Select Model</span>
+        </text>
+        <box flexGrow={1} />
+        <text fg={theme.colors.textMuted}>
+          ↑↓ select · Enter confirm · Type to filter · Esc back
+        </text>
+      </box>
+
+      <box flexShrink={0} flexDirection="row" paddingTop={1}>
+        <text fg={theme.colors.textMuted}>Current: </text>
+        <text fg={theme.colors.success}>{current()}</text>
+        <text fg={theme.colors.textMuted}>{" · " + status()}</text>
+      </box>
+
+      {/* Filter input */}
+      <box flexShrink={0} paddingTop={1} flexDirection="row">
+        <text fg={theme.colors.primary}><span style={{ bold: true }}>{"❯ "}</span></text>
+        <text fg={theme.colors.input}>{filter()}</text>
+        <text fg={theme.colors.cursor}>{"█"}</text>
+        <Show when={!filter()}>
+          <text fg={theme.colors.textMuted}> type to filter...</text>
+        </Show>
+      </box>
+
+      <box height={1} />
+
+      <Show when={loading()}>
+        <text fg={theme.colors.textMuted}>Fetching models from API...</text>
+      </Show>
+
+      <Show when={!loading()}>
+        <Show when={filtered().length === 0}>
+          <text fg={theme.colors.warning}>No models match "{filter()}"</text>
+        </Show>
+        <Show when={filtered().length > 0}>
+          <box flexDirection="column" flexShrink={0}>
+            <For each={visible()}>
+              {(m, i) => {
+                const selected = () => scrollTop() + i() === idx()
+                return (
+                  <box flexDirection="row" backgroundColor={selected() ? theme.colors.primary : undefined}>
+                    <text fg={selected() ? "#ffffff" : theme.colors.textMuted}>
+                      {selected() ? "❯ " : "  "}
+                    </text>
+                    <text fg={selected() ? "#ffffff" : theme.colors.text}>
+                      <span style={{ bold: selected() }}>
+                        {m.id.length > 40 ? m.id.slice(0, 40) + "…" : m.id.padEnd(42)}
+                      </span>
+                    </text>
+                    <text fg={selected() ? "#ffffff" : theme.colors.textMuted}>
+                      {" " + m.provider}
+                    </text>
+                    {(m.id === current() || `${m.provider}/${m.id}` === current()) ? (
+                      <text fg={selected() ? "#ffffff" : theme.colors.success}>{" ← current"}</text>
+                    ) : null}
+                  </box>
+                )
+              }}
+            </For>
+          </box>
+          <Show when={filtered().length > maxVisible}>
+            <text fg={theme.colors.textMuted}>
+              {"  ↑↓ " + filtered().length + " models total · showing " + (scrollTop() + 1) + "-" + Math.min(scrollTop() + maxVisible, filtered().length)}
+            </text>
+          </Show>
+        </Show>
+      </Show>
+    </box>
+  )
+}

package/src/tui/routes/notifications.tsx

@@ -0,0 +1,87 @@
+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 Notifications() {
+  const theme = useTheme()
+  const [items, setItems] = createSignal<any[]>([])
+  const [loading, setLoading] = createSignal(true)
+  const [selected, setSelected] = createSignal(0)
+
+  onMount(async () => {
+    try {
+      const result = await McpBridge.callToolJSON<any>("my_notifications", { action: "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={theme.colors.accent}>
+          <span style={{ bold: true }}>Notifications</span>
+        </text>
+        <text fg={theme.colors.textMuted}>{`(${items().length})`}</text>
+        <box flexGrow={1} />
+        <text fg={theme.colors.textMuted}>esc:back  j/k:navigate</text>
+      </box>
+
+      <Show when={loading()}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg={theme.colors.textMuted}>Loading notifications...</text>
+        </box>
+      </Show>
+
+      <Show when={!loading() && items().length === 0}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg={theme.colors.textMuted}>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 ? theme.colors.textMuted : theme.colors.primary}>
+                    {isRead ? "  " : "● "}
+                  </text>
+                </box>
+                <box flexDirection="column" flexGrow={1}>
+                  <text fg={isSelected() ? theme.colors.primary : theme.colors.text}>
+                    <span style={{ bold: isSelected() }}>
+                      {item.message || item.content || item.type || "Notification"}
+                    </span>
+                  </text>
+                  <box flexDirection="row" gap={1}>
+                    <text fg={theme.colors.textMuted}>{item.from_user || item.actor || ""}</text>
+                    <text fg={theme.colors.textMuted}>{item.created_at || ""}</text>
+                  </box>
+                </box>
+              </box>
+            )
+          }}
+        </For>
+      </box>
+    </box>
+  )
+}

package/src/tui/routes/post.tsx

@@ -0,0 +1,102 @@
+import { createSignal, onMount, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useRoute } from "../context/route"
+import { useTheme } from "../context/theme"
+import { McpBridge } from "../../mcp/client"
+
+export function Post() {
+  const route = useRoute()
+  const theme = useTheme()
+  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)
+
+  onMount(async () => {
+    try {
+      const result = await McpBridge.callToolJSON<any>("read_post", { post_id: postId() })
+      const p = result.post || result
+      setPost(p)
+      setComments(p.comments || [])
+    } catch {
+      setPost(null)
+    }
+    setLoading(false)
+  })
+
+  useKeyboard((evt) => {
+    if (evt.name === "up" || evt.name === "k") {
+      evt.preventDefault()
+    }
+    if (evt.name === "down" || evt.name === "j") {
+      evt.preventDefault()
+    }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <Show when={loading()}>
+        <box paddingLeft={4} paddingTop={2}>
+          <text fg={theme.colors.textMuted}>Loading post...</text>
+        </box>
+      </Show>
+
+      <Show when={!loading() && !post()}>
+        <box paddingLeft={4} paddingTop={2}>
+          <text fg={theme.colors.error}>Post not found.</text>
+        </box>
+      </Show>
+
+      <Show when={!loading() && post()}>
+        <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0}>
+          <text fg={theme.colors.text}>
+            <span style={{ bold: true }}>{post()?.title}</span>
+          </text>
+        </box>
+
+        <box paddingLeft={2} paddingTop={0} flexShrink={0} flexDirection="row" gap={2}>
+          <text fg={theme.colors.success}>{`▲${(post()?.upvotes ?? 0) - (post()?.downvotes ?? 0)}`}</text>
+          <text fg={theme.colors.textMuted}>{`💬${post()?.comment_count ?? 0}  👁${post()?.views ?? 0}`}</text>
+          <text fg={theme.colors.textMuted}>{`by ${post()?.agent?.name || "anon"}`}</text>
+        </box>
+
+        <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={theme.colors.primary}>{`#${tag}`}</text>}
+            </For>
+          </box>
+        </Show>
+
+        <box paddingLeft={2} paddingRight={2} paddingTop={1} flexGrow={1}>
+          <text fg={theme.colors.text}>{post()?.content?.slice(0, 2000) || post()?.summary || ""}</text>
+        </box>
+
+        <Show when={comments().length > 0}>
+          <box paddingLeft={2} paddingTop={1} flexShrink={0}>
+            <text fg={theme.colors.accent}>
+              <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={theme.colors.primary}>
+                      <span style={{ bold: true }}>{comment.user?.username || comment.agent || "anon"}</span>
+                    </text>
+                    <text fg={theme.colors.textMuted}>{comment.createdAt || comment.created_at || ""}</text>
+                  </box>
+                  <box paddingLeft={2}>
+                    <text fg={theme.colors.text}>{comment.content || comment.body || ""}</text>
+                  </box>
+                </box>
+              )}
+            </For>
+          </box>
+        </Show>
+      </Show>
+    </box>
+  )
+}

package/src/tui/routes/search.tsx

@@ -0,0 +1,105 @@
+import { createSignal, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useRoute } from "../context/route"
+import { useTheme } from "../context/theme"
+import { McpBridge } from "../../mcp/client"
+
+export function Search() {
+  const route = useRoute()
+  const theme = useTheme()
+  const [query, setQuery] = createSignal(route.data.type === "search" ? route.data.query : "")
+  const [results, setResults] = createSignal<any[]>([])
+  const [loading, setLoading] = createSignal(false)
+  const [searched, setSearched] = createSignal(false)
+
+  async function doSearch(q: string) {
+    if (!q.trim()) return
+    setLoading(true)
+    setSearched(true)
+    try {
+      const result = await McpBridge.callToolJSON<any>("search_posts", { query: q.trim() })
+      setResults(result.results || result.posts || [])
+    } catch {
+      setResults([])
+    }
+    setLoading(false)
+  }
+
+  useKeyboard((evt) => {
+    if (evt.name === "return" && !evt.shift) {
+      doSearch(query())
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "backspace") {
+      setQuery((s) => s.slice(0, -1))
+      evt.preventDefault()
+      return
+    }
+    if (evt.sequence && evt.sequence.length === 1 && !evt.ctrl && !evt.meta) {
+      setQuery((s) => s + evt.sequence)
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "space") {
+      setQuery((s) => s + " ")
+      evt.preventDefault()
+      return
+    }
+  })
+
+  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 }}>Search</span>
+        </text>
+        <box flexGrow={1} />
+        <text fg={theme.colors.textMuted}>esc:back</text>
+      </box>
+
+      <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0} flexDirection="row">
+        <text fg={theme.colors.primary}>
+          <span style={{ bold: true }}>{"🔍 "}</span>
+        </text>
+        <text fg={theme.colors.input}>{query()}</text>
+        <text fg={theme.colors.cursor}>{"█"}</text>
+      </box>
+
+      <Show when={loading()}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg={theme.colors.textMuted}>Searching...</text>
+        </box>
+      </Show>
+
+      <Show when={!loading() && searched() && results().length === 0}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg={theme.colors.textMuted}>No results found.</text>
+        </box>
+      </Show>
+
+      <box flexDirection="column" paddingTop={1} flexGrow={1}>
+        <For each={results()}>
+          {(item: any) => (
+            <box flexDirection="row" paddingLeft={2} paddingRight={2}>
+              <box width={6} justifyContent="flex-end" marginRight={1}>
+                <text fg={theme.colors.success}>{`▲${item.score ?? item.upvotes ?? 0}`}</text>
+              </box>
+              <box flexDirection="column" flexGrow={1}>
+                <text fg={theme.colors.text}>
+                  <span style={{ bold: true }}>{item.title}</span>
+                </text>
+                <box flexDirection="row" gap={1}>
+                  <text fg={theme.colors.textMuted}>{`💬${item.comment_count ?? 0}`}</text>
+                  <For each={(item.tags || []).slice(0, 3)}>
+                    {(tag: string) => <text fg={theme.colors.primary}>{`#${tag}`}</text>}
+                  </For>
+                </box>
+              </box>
+            </box>
+          )}
+        </For>
+      </box>
+    </box>
+  )
+}