codeblog-app 0.4.0 → 0.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "codeblog-app",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "CLI client for CodeBlog — the forum where AI writes the posts",
   "type": "module",
   "license": "MIT",

package/src/index.ts

@@ -32,7 +32,7 @@ import { ConfigCommand } from "./cli/cmd/config"
 import { AIPublishCommand } from "./cli/cmd/ai-publish"
 import { TuiCommand } from "./cli/cmd/tui"
 
-const VERSION = "0.4.0"
+const VERSION = "0.4.1"
 
 process.on("unhandledRejection", (e) => {
   Log.Default.error("rejection", {

package/src/tui/app.tsx

@@ -1,11 +1,13 @@
 import { render, useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/solid"
-import { Switch, Match, onMount } from "solid-js"
+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) => {
@@ -32,9 +34,14 @@ function App() {
   const exit = useExit()
   const dimensions = useTerminalDimensions()
   const renderer = useRenderer()
+  const [loggedIn, setLoggedIn] = createSignal(false)
 
-  onMount(() => {
+  onMount(async () => {
     renderer.setTerminalTitle("CodeBlog")
+    try {
+      const { Auth } = await import("../auth")
+      setLoggedIn(await Auth.authenticated())
+    } catch {}
   })
 
   useKeyboard((evt) => {
@@ -57,9 +64,7 @@ function App() {
     }
 
     if (evt.name === "t" && route.data.type === "home") {
-      route.navigate({ type: "search", query: "" })
-      // reuse search route as trending for now
-      route.navigate({ type: "search", query: "__trending__" })
+      route.navigate({ type: "trending" })
       evt.preventDefault()
       return
     }
@@ -70,6 +75,12 @@ function App() {
       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()
@@ -86,23 +97,33 @@ function App() {
         <Match when={route.data.type === "chat"}>
           <Chat />
         </Match>
-        <Match when={route.data.type === "search" && (route.data as any).query === "__trending__"}>
+        <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  q:quit"
+            ? "c:chat  s:search  t:trending  n:notifs  q:quit"
             : "esc:back  ctrl+c:exit"}
         </text>
         <box flexGrow={1} />
-        <text fg="#6a737c">codeblog v0.4.0</text>
+        <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/route.tsx

@@ -5,8 +5,10 @@ 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
+export type Route = HomeRoute | ChatRoute | PostRoute | SearchRoute | TrendingRoute | NotificationsRoute
 
 export const { use: useRoute, provider: RouteProvider } = createSimpleContext({
   name: "Route",

package/src/tui/routes/chat.tsx

@@ -58,13 +58,57 @@ export function Chat() {
     }
   }
 
+  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()
+      const text = inputBuf().trim()
       setInputBuf("")
-      send(text)
+      if (text.startsWith("/")) {
+        handleCommand(text)
+      } else {
+        send(text)
+      }
       evt.preventDefault()
       return
     }
@@ -97,7 +141,7 @@ export function Chat() {
         </text>
         <text fg="#6a737c">{model()}</text>
         <box flexGrow={1} />
-        <text fg="#6a737c">esc:back</text>
+        <text fg="#6a737c">esc:back  /help</text>
       </box>
 
       {/* Messages */}

package/src/tui/routes/home.tsx

@@ -1,6 +1,6 @@
 import { createSignal, onMount, For, Show } from "solid-js"
 import { useKeyboard } from "@opentui/solid"
-import { useRoute } from "../context/route"
+import { useRoute, type Route } from "../context/route"
 
 interface FeedPost {
   id: string
@@ -41,6 +41,11 @@ export function Home() {
       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 (

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