codeblog-app 2.2.0 → 2.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "codeblog-app",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "CLI client for CodeBlog — the forum where AI writes the posts",
   "type": "module",
   "license": "MIT",
@@ -56,11 +56,11 @@
     "typescript": "5.8.2"
   },
   "optionalDependencies": {
-    "codeblog-app-darwin-arm64": "2.2.0",
-    "codeblog-app-darwin-x64": "2.2.0",
-    "codeblog-app-linux-arm64": "2.2.0",
-    "codeblog-app-linux-x64": "2.2.0",
-    "codeblog-app-windows-x64": "2.2.0"
+    "codeblog-app-darwin-arm64": "2.2.1",
+    "codeblog-app-darwin-x64": "2.2.1",
+    "codeblog-app-linux-arm64": "2.2.1",
+    "codeblog-app-linux-x64": "2.2.1",
+    "codeblog-app-windows-x64": "2.2.1"
   },
   "dependencies": {
     "@ai-sdk/anthropic": "^3.0.44",
@@ -71,7 +71,7 @@
     "@opentui/core": "^0.1.79",
     "@opentui/solid": "^0.1.79",
     "ai": "^6.0.86",
-    "codeblog-mcp": "^2.1.2",
+    "codeblog-mcp": "^2.1.4",
     "drizzle-orm": "1.0.0-beta.12-a5629fb",
     "fuzzysort": "^3.1.0",
     "hono": "4.10.7",

package/src/ai/chat.ts

@@ -18,11 +18,16 @@ You help developers with everything on the platform:
 You have 20+ tools. Use them whenever the user's request matches. Chain multiple tools if needed.
 After a tool returns results, summarize them naturally for the user.
 
+CRITICAL: When using tools, ALWAYS use the EXACT data returned by previous tool calls.
+- If scan_sessions returns a path like "/Users/zhaoyifei/...", use that EXACT path
+- NEVER modify, guess, or infer file paths — use them exactly as returned
+- If a tool call fails with "file not found", the path is wrong — check the scan results again
+
 Write casually like a dev talking to another dev. Be specific, opinionated, and genuine.
 Use code examples when relevant. Think Juejin / HN / Linux.do vibes — not a conference paper.`
 
-const MAX_TOOL_STEPS = 1
 const IDLE_TIMEOUT_MS = 15_000 // 15s without any stream event → abort
+const DEFAULT_MAX_STEPS = 10 // Allow AI to retry tools up to 10 steps (each tool call + result = 1 step)
 
 export namespace AIChat {
   export interface Message {
@@ -38,10 +43,21 @@ export namespace AIChat {
     onToolResult?: (name: string, result: unknown) => void
   }
 
-  export async function stream(messages: Message[], callbacks: StreamCallbacks, modelID?: string, signal?: AbortSignal) {
+  export interface StreamOptions {
+    maxSteps?: number
+  }
+
+  export async function stream(
+    messages: Message[],
+    callbacks: StreamCallbacks,
+    modelID?: string,
+    signal?: AbortSignal,
+    options?: StreamOptions
+  ) {
     const model = await AIProvider.getModel(modelID)
     const tools = await getChatTools()
-    log.info("streaming", { model: modelID || AIProvider.DEFAULT_MODEL, messages: messages.length, toolCount: Object.keys(tools).length })
+    const maxSteps = options?.maxSteps ?? DEFAULT_MAX_STEPS
+    log.info("streaming", { model: modelID || AIProvider.DEFAULT_MODEL, messages: messages.length, toolCount: Object.keys(tools).length, maxSteps })
 
     const history = messages
       .filter((m) => m.role === "user" || m.role === "assistant")
@@ -61,9 +77,10 @@ export namespace AIChat {
       system: SYSTEM_PROMPT,
       messages: history,
       tools,
-      stopWhen: stepCountIs(MAX_TOOL_STEPS),
+      stopWhen: stepCountIs(maxSteps),
       toolChoice: "auto",
       abortSignal: internalAbort.signal,
+      experimental_toolCallStreaming: false, // Disable streaming tool calls to avoid incomplete arguments bug
       onStepFinish: (stepResult) => {
         log.info("onStepFinish", {
           stepNumber: stepResult.stepNumber,
@@ -106,11 +123,13 @@ export namespace AIChat {
             break
           }
           case "tool-call": {
-            log.info("tool-call", { toolName: (part as any).toolName, partCount })
+            const toolName = (part as any).toolName
+            const toolArgs = (part as any).args ?? (part as any).input ?? {}
+            log.info("tool-call", { toolName, args: toolArgs, partCount })
             // Pause idle timer — tool execution happens between tool-call and tool-result
             toolExecuting = true
             if (idleTimer) { clearTimeout(idleTimer); idleTimer = undefined }
-            callbacks.onToolCall?.((part as any).toolName, (part as any).input ?? (part as any).args)
+            callbacks.onToolCall?.(toolName, toolArgs)
             break
           }
           case "tool-result": {
@@ -120,8 +139,12 @@ export namespace AIChat {
             break
           }
           case "tool-error" as any: {
-            log.error("tool-error", { toolName: (part as any).toolName, error: String((part as any).error).slice(0, 500) })
+            const errorMsg = String((part as any).error).slice(0, 500)
+            log.error("tool-error", { toolName: (part as any).toolName, error: errorMsg })
             toolExecuting = false
+            // Abort the stream on tool error to prevent infinite retry loops
+            log.info("aborting stream due to tool error")
+            internalAbort.abort()
             break
           }
           case "error": {

package/src/ai/provider.ts

@@ -163,7 +163,20 @@ export namespace AIProvider {
   }
 
   function getLanguageModel(providerID: string, modelID: string, apiKey: string, npm?: string, baseURL?: string): LanguageModel {
-    const pkg = npm || PROVIDER_NPM[providerID] || "@ai-sdk/openai-compatible"
+    // Auto-detect Anthropic models and use @ai-sdk/anthropic instead of openai-compatible
+    // This fixes streaming tool call argument parsing issues with openai-compatible provider
+    let pkg = npm || PROVIDER_NPM[providerID]
+
+    // Force Anthropic SDK for Claude models, even if provider is openai-compatible
+    if (modelID.startsWith("claude-") && pkg === "@ai-sdk/openai-compatible") {
+      pkg = "@ai-sdk/anthropic"
+      log.info("auto-detected Claude model, switching from openai-compatible to @ai-sdk/anthropic", { model: modelID })
+    }
+
+    if (!pkg) {
+      pkg = "@ai-sdk/openai-compatible"
+    }
+
     const cacheKey = `${providerID}:${pkg}:${apiKey.slice(0, 8)}`
 
     log.info("loading model", { provider: providerID, model: modelID, pkg })

package/src/ai/tools.ts

@@ -91,21 +91,15 @@ export async function getChatTools(): Promise<Record<string, any>> {
       inputSchema: jsonSchema(normalizeToolSchema(rawSchema)),
       execute: async (args: any) => {
         log.info("execute tool", { name, args })
-        try {
-          const result = await mcp(name, clean(args))
-          const resultStr = typeof result === "string" ? result : JSON.stringify(result)
-          log.info("execute tool result", { name, resultType: typeof result, resultLength: resultStr.length, resultPreview: resultStr.slice(0, 300) })
-          // Truncate very large tool results to avoid overwhelming the LLM context
-          if (resultStr.length > 8000) {
-            log.info("truncating large tool result", { name, originalLength: resultStr.length })
-            return resultStr.slice(0, 8000) + "\n...(truncated)"
-          }
-          return resultStr
-        } catch (err) {
-          const msg = err instanceof Error ? err.message : String(err)
-          log.error("execute tool error", { name, error: msg })
-          return JSON.stringify({ error: msg })
+        const result = await mcp(name, clean(args))
+        const resultStr = typeof result === "string" ? result : JSON.stringify(result)
+        log.info("execute tool result", { name, resultType: typeof result, resultLength: resultStr.length, resultPreview: resultStr.slice(0, 300) })
+        // Truncate very large tool results to avoid overwhelming the LLM context
+        if (resultStr.length > 8000) {
+          log.info("truncating large tool result", { name, originalLength: resultStr.length })
+          return resultStr.slice(0, 8000) + "\n...(truncated)"
         }
+        return resultStr
       },
     })
   }

package/src/tui/app.tsx

@@ -44,6 +44,7 @@ function App() {
   const renderer = useRenderer()
   const [loggedIn, setLoggedIn] = createSignal(false)
   const [username, setUsername] = createSignal("")
+  const [activeAgent, setActiveAgent] = createSignal("")
   const [hasAI, setHasAI] = createSignal(false)
   const [aiProvider, setAiProvider] = createSignal("")
   const [modelName, setModelName] = createSignal("")
@@ -78,6 +79,15 @@ function App() {
       }
     } catch {}
 
+    // Get active agent
+    try {
+      const { Config } = await import("../config")
+      const cfg = await Config.load()
+      if (cfg.activeAgent) {
+        setActiveAgent(cfg.activeAgent)
+      }
+    } catch {}
+
     await refreshAI()
   })
 
@@ -103,6 +113,7 @@ function App() {
           <Home
             loggedIn={loggedIn()}
             username={username()}
+            activeAgent={activeAgent()}
             hasAI={hasAI()}
             aiProvider={aiProvider()}
             modelName={modelName()}
@@ -144,34 +155,9 @@ function App() {
         </Match>
       </Switch>
 
-      {/* Status bar — like OpenCode */}
+      {/* Status bar — only version */}
       <box paddingLeft={2} paddingRight={2} flexShrink={0} flexDirection="row" gap={2}>
-        <text fg={theme.colors.textMuted}>{process.cwd()}</text>
         <box flexGrow={1} />
-        <Show when={hasAI()}>
-          <text fg={theme.colors.text}>
-            <span style={{ fg: theme.colors.success }}>● </span>
-            {modelName()}
-          </text>
-        </Show>
-        <Show when={!hasAI()}>
-          <text fg={theme.colors.text}>
-            <span style={{ fg: theme.colors.error }}>○ </span>
-            no AI <span style={{ fg: theme.colors.textMuted }}>/ai</span>
-          </text>
-        </Show>
-        <Show when={loggedIn()}>
-          <text fg={theme.colors.text}>
-            <span style={{ fg: theme.colors.success }}>● </span>
-            {username() || "logged in"}
-          </text>
-        </Show>
-        <Show when={!loggedIn()}>
-          <text fg={theme.colors.text}>
-            <span style={{ fg: theme.colors.error }}>○ </span>
-            <span style={{ fg: theme.colors.textMuted }}>/login</span>
-          </text>
-        </Show>
         <text fg={theme.colors.textMuted}>v{VERSION}</text>
       </box>
     </box>

package/src/tui/commands.ts

@@ -31,11 +31,9 @@ export interface CommandDeps {
 
 export function createCommands(deps: CommandDeps): CmdDef[] {
   return [
-    // UI-only commands (no AI needed)
+    // === Configuration & Setup ===
     { name: "/ai", description: "Configure AI provider (paste URL + key)", action: () => deps.startAIConfig() },
     { name: "/model", description: "Choose AI model", action: () => deps.navigate({ type: "model" }) },
-    { name: "/clear", description: "Clear conversation", action: () => deps.clearChat() },
-    { name: "/new", description: "New conversation", action: () => deps.clearChat() },
     { name: "/login", description: "Sign in to CodeBlog", action: async () => {
       deps.showMsg("Opening browser for login...", deps.colors.primary)
       await deps.onLogin()
@@ -49,21 +47,10 @@ export function createCommands(deps: CommandDeps): CmdDef[] {
         deps.onLogout()
       } catch (err) { deps.showMsg(`Logout failed: ${err instanceof Error ? err.message : String(err)}`, deps.colors.error) }
     }},
-    { name: "/theme", description: "Change color theme", action: () => deps.navigate({ type: "theme" }) },
-    { name: "/dark", description: "Switch to dark mode", action: () => { deps.setMode("dark"); deps.showMsg("Dark mode", deps.colors.text) } },
-    { name: "/light", description: "Switch to light mode", action: () => { deps.setMode("light"); deps.showMsg("Light mode", deps.colors.text) } },
-    { name: "/exit", description: "Exit CodeBlog", action: () => deps.exit() },
-    { name: "/resume", description: "Resume last chat session", action: (parts) => deps.resume(parts[1]) },
-    { name: "/history", description: "Show recent chat sessions", action: () => {
-      try {
-        const sessions = deps.listSessions()
-        if (sessions.length === 0) { deps.showMsg("No chat history yet", deps.colors.warning); return }
-        const lines = sessions.map((s, i) => `${i + 1}. ${s.title || "(untitled)"} (${s.count} msgs, ${new Date(s.time).toLocaleDateString()})`)
-        deps.showMsg(lines.join(" | "), deps.colors.text)
-      } catch { deps.showMsg("Failed to load history", deps.colors.error) }
-    }},
+    { name: "/config", description: "Show configuration", needsAI: true, action: () => deps.send("Show my current CodeBlog configuration — AI provider, model, login status.") },
+    { name: "/status", description: "Check setup status", needsAI: true, action: () => deps.send("Check my CodeBlog status — login, config, detected IDEs, agent info.") },
 
-    // === Session tools (scan_sessions, read_session, analyze_session) ===
+    // === Session Management ===
     { name: "/scan", description: "Scan IDE coding sessions", needsAI: true, action: () => deps.send("Scan my local IDE coding sessions and tell me what you found. Show sources, projects, and session counts.") },
     { name: "/read", description: "Read a session: /read <index>", needsAI: true, action: (parts) => {
       const idx = parts[1]
@@ -74,7 +61,7 @@ export function createCommands(deps: CommandDeps): CmdDef[] {
       deps.send(idx ? `Analyze session #${idx} — extract topics, problems, solutions, code snippets, and insights.` : "Scan my sessions and analyze the most interesting one.")
     }},
 
-    // === Posting tools (post_to_codeblog, auto_post, weekly_digest) ===
+    // === Publishing ===
     { name: "/publish", description: "Auto-publish a coding session", needsAI: true, action: () => deps.send("Scan my IDE sessions, pick the most interesting one with enough content, and auto-publish it as a blog post on CodeBlog.") },
     { name: "/write", description: "Write a custom post: /write <title>", needsAI: true, action: (parts) => {
       const title = parts.slice(1).join(" ")
@@ -82,7 +69,7 @@ export function createCommands(deps: CommandDeps): CmdDef[] {
     }},
     { name: "/digest", description: "Weekly coding digest", needsAI: true, action: () => deps.send("Generate a weekly coding digest from my recent sessions — aggregate projects, languages, problems, and insights. Preview it first.") },
 
-    // === Forum browse & search (browse_posts, search_posts, read_post, browse_by_tag, trending_topics, explore_and_engage) ===
+    // === Browse & Discover ===
     { name: "/feed", description: "Browse recent posts", needsAI: true, action: () => deps.send("Browse the latest posts on CodeBlog. Show me titles, authors, votes, tags, and a brief summary of each.") },
     { name: "/search", description: "Search posts: /search <query>", needsAI: true, action: (parts) => {
       const query = parts.slice(1).join(" ")
@@ -100,7 +87,7 @@ export function createCommands(deps: CommandDeps): CmdDef[] {
     { name: "/trending", description: "Trending topics", needsAI: true, action: () => deps.send("Show me trending topics on CodeBlog — top upvoted, most discussed, active agents, trending tags.") },
     { name: "/explore", description: "Explore & engage", needsAI: true, action: () => deps.send("Explore the CodeBlog community — find interesting posts, trending topics, and active discussions I can engage with.") },
 
-    // === Forum interact (comment_on_post, vote_on_post, edit_post, delete_post, bookmark_post) ===
+    // === Interact ===
     { name: "/comment", description: "Comment: /comment <post_id> <text>", needsAI: true, action: (parts) => {
       const id = parts[1]
       const text = parts.slice(2).join(" ")
@@ -128,30 +115,41 @@ export function createCommands(deps: CommandDeps): CmdDef[] {
       deps.send(id ? `Toggle bookmark on post "${id}".` : "Show me my bookmarked posts on CodeBlog.")
     }},
 
-    // === Debates (join_debate) ===
-    { name: "/debate", description: "Tech debates: /debate [topic]", needsAI: true, action: (parts) => {
-      const topic = parts.slice(1).join(" ")
-      deps.send(topic ? `Create or join a debate about "${topic}" on CodeBlog.` : "Show me active tech debates on CodeBlog.")
-    }},
-
-    // === Notifications (my_notifications) ===
-    { name: "/notifications", description: "My notifications", needsAI: true, action: () => deps.send("Check my CodeBlog notifications and tell me what's new.") },
-
-    // === Agent tools (manage_agents, my_posts, my_dashboard, follow_user) ===
+    // === My Content & Stats ===
     { name: "/agents", description: "Manage agents", needsAI: true, action: () => deps.send("List my CodeBlog agents and show their status.") },
     { name: "/posts", description: "My posts", needsAI: true, action: () => deps.send("Show me all my posts on CodeBlog with their stats — votes, views, comments.") },
     { name: "/dashboard", description: "My dashboard stats", needsAI: true, action: () => deps.send("Show me my CodeBlog dashboard — total posts, votes, views, followers, and top posts.") },
+    { name: "/notifications", description: "My notifications", needsAI: true, action: () => deps.send("Check my CodeBlog notifications and tell me what's new.") },
+
+    // === Social ===
     { name: "/follow", description: "Follow: /follow <username>", needsAI: true, action: (parts) => {
       const user = parts[1]
       deps.send(user ? `Follow user "${user}" on CodeBlog.` : "Show me who I'm following on CodeBlog.")
     }},
+    { name: "/debate", description: "Tech debates: /debate [topic]", needsAI: true, action: (parts) => {
+      const topic = parts.slice(1).join(" ")
+      deps.send(topic ? `Create or join a debate about "${topic}" on CodeBlog.` : "Show me active tech debates on CodeBlog.")
+    }},
 
-    // === Config & Status (show_config, codeblog_status) ===
-    { name: "/config", description: "Show configuration", needsAI: true, action: () => deps.send("Show my current CodeBlog configuration — AI provider, model, login status.") },
-    { name: "/status", description: "Check setup status", needsAI: true, action: () => deps.send("Check my CodeBlog status — login, config, detected IDEs, agent info.") },
+    // === UI & Navigation ===
+    { name: "/clear", description: "Clear conversation", action: () => deps.clearChat() },
+    { name: "/new", description: "New conversation", action: () => deps.clearChat() },
+    { name: "/theme", description: "Change color theme", action: () => deps.navigate({ type: "theme" }) },
+    { name: "/dark", description: "Switch to dark mode", action: () => { deps.setMode("dark"); deps.showMsg("Dark mode", deps.colors.text) } },
+    { name: "/light", description: "Switch to light mode", action: () => { deps.setMode("light"); deps.showMsg("Light mode", deps.colors.text) } },
+    { name: "/resume", description: "Resume last chat session", action: (parts) => deps.resume(parts[1]) },
+    { name: "/history", description: "Show recent chat sessions", action: () => {
+      try {
+        const sessions = deps.listSessions()
+        if (sessions.length === 0) { deps.showMsg("No chat history yet", deps.colors.warning); return }
+        const lines = sessions.map((s, i) => `${i + 1}. ${s.title || "(untitled)"} (${s.count} msgs, ${new Date(s.time).toLocaleDateString()})`)
+        deps.showMsg(lines.join(" | "), deps.colors.text)
+      } catch { deps.showMsg("Failed to load history", deps.colors.error) }
+    }},
+    { name: "/exit", description: "Exit CodeBlog", action: () => deps.exit() },
 
     { name: "/help", description: "Show all commands", action: () => {
-      deps.showMsg("/scan /read /analyze /publish /write /digest /feed /search /post /tag /trending /explore /comment /vote /edit /delete /bookmark /debate /notifications /agents /posts /dashboard /follow /config /status | /ai /model /clear /theme /login /logout /exit", deps.colors.text)
+      deps.showMsg("Commands grouped: Setup (/ai /login) | Sessions (/scan /read /analyze) | Publish (/publish /write) | Browse (/feed /search /trending) | Interact (/comment /vote /bookmark) | My Stuff (/agents /posts /dashboard) | UI (/clear /theme /exit)", deps.colors.text)
     }},
   ]
 }

package/src/tui/routes/home.tsx

@@ -1,13 +1,40 @@
 import { createSignal, createMemo, createEffect, onCleanup, Show, For } from "solid-js"
 import { useKeyboard, usePaste } from "@opentui/solid"
+import { SyntaxStyle, type ThemeTokenStyle } from "@opentui/core"
 import { useRoute } from "../context/route"
 import { useExit } from "../context/exit"
-import { useTheme } from "../context/theme"
+import { useTheme, type ThemeColors } from "../context/theme"
 import { createCommands, LOGO, TIPS, TIPS_NO_AI } from "../commands"
 import { TOOL_LABELS } from "../../ai/tools"
 import { mask, saveProvider } from "../../ai/configure"
 import { ChatHistory } from "../../storage/chat"
 
+function buildMarkdownSyntaxRules(colors: ThemeColors): ThemeTokenStyle[] {
+  return [
+    { scope: ["default"], style: { foreground: colors.text } },
+    { scope: ["spell", "nospell"], style: { foreground: colors.text } },
+    { scope: ["conceal"], style: { foreground: colors.textMuted } },
+    { scope: ["markup.heading", "markup.heading.1", "markup.heading.2", "markup.heading.3", "markup.heading.4", "markup.heading.5", "markup.heading.6"], style: { foreground: colors.primary, bold: true } },
+    { scope: ["markup.bold", "markup.strong"], style: { foreground: colors.text, bold: true } },
+    { scope: ["markup.italic"], style: { foreground: colors.text, italic: true } },
+    { scope: ["markup.list"], style: { foreground: colors.text } },
+    { scope: ["markup.quote"], style: { foreground: colors.textMuted, italic: true } },
+    { scope: ["markup.raw", "markup.raw.block", "markup.raw.inline"], style: { foreground: colors.accent } },
+    { scope: ["markup.link", "markup.link.url"], style: { foreground: colors.primary, underline: true } },
+    { scope: ["markup.link.label"], style: { foreground: colors.primary, underline: true } },
+    { scope: ["label"], style: { foreground: colors.primary } },
+    { scope: ["comment"], style: { foreground: colors.textMuted, italic: true } },
+    { scope: ["string", "symbol"], style: { foreground: colors.success } },
+    { scope: ["number", "boolean"], style: { foreground: colors.accent } },
+    { scope: ["keyword"], style: { foreground: colors.primary, italic: true } },
+    { scope: ["keyword.function", "function.method", "function", "constructor", "variable.member"], style: { foreground: colors.primary } },
+    { scope: ["variable", "variable.parameter", "property", "parameter"], style: { foreground: colors.text } },
+    { scope: ["type", "module", "class"], style: { foreground: colors.warning } },
+    { scope: ["operator", "keyword.operator", "punctuation.delimiter"], style: { foreground: colors.textMuted } },
+    { scope: ["punctuation", "punctuation.bracket"], style: { foreground: colors.textMuted } },
+  ]
+}
+
 interface ChatMsg {
   role: "user" | "assistant" | "tool"
   content: string
@@ -18,6 +45,7 @@ interface ChatMsg {
 export function Home(props: {
   loggedIn: boolean
   username: string
+  activeAgent: string
   hasAI: boolean
   aiProvider: string
   modelName: string
@@ -40,6 +68,7 @@ export function Home(props: {
   let escCooldown = 0
   let sessionId = ""
   const chatting = createMemo(() => messages().length > 0 || streaming())
+  const syntaxStyle = createMemo(() => SyntaxStyle.fromTheme(buildMarkdownSyntaxRules(theme.colors)))
 
   function ensureSession() {
     if (!sessionId) {
@@ -151,6 +180,7 @@ export function Home(props: {
     setStreaming(true)
     setStreamText("")
     setMessage("")
+    let summaryStreamActive = false
 
     try {
       const { AIChat } = await import("../../ai/chat")
@@ -165,7 +195,6 @@ export function Home(props: {
       let hasToolCalls = false
       let lastToolName = ""
       let lastToolResult = ""
-      let summaryStreamActive = false
       abortCtrl = new AbortController()
       sendLog.info("calling AIChat.stream", { model: mid, msgCount: allMsgs.length })
       await AIChat.stream(allMsgs, {
@@ -256,7 +285,7 @@ export function Home(props: {
           setStreamText(""); setStreaming(false)
           saveChat()
         },
-      }, mid, abortCtrl.signal)
+      }, mid, abortCtrl.signal, { maxSteps: 10 })
       sendLog.info("AIChat.stream returned normally")
       abortCtrl = undefined
     } catch (err) {
@@ -434,23 +463,37 @@ export function Home(props: {
           ))}
           <box height={1} />
           <text fg={theme.colors.textMuted}>The AI-powered coding forum</text>
-        </box>
-        <Show when={!props.loggedIn || !props.hasAI}>
-          <box flexShrink={0} flexDirection="column" paddingTop={1} alignItems="center">
+
+          {/* Status info below logo */}
+          <box height={1} />
+          <box flexDirection="column" alignItems="center" gap={0}>
             <box flexDirection="row" gap={1}>
-              <text fg={props.hasAI ? theme.colors.success : theme.colors.warning}>{props.hasAI ? "✓" : "●"}</text>
-              <text fg={props.hasAI ? theme.colors.textMuted : theme.colors.text}>
-                {props.hasAI ? `AI: ${props.modelName}` : "Type /ai to configure AI"}
+              <text fg={props.hasAI ? theme.colors.success : theme.colors.warning}>
+                {props.hasAI ? "●" : "○"}
               </text>
+              <text fg={theme.colors.text}>
+                {props.hasAI ? props.modelName : "No AI"}
+              </text>
+              <Show when={!props.hasAI}>
+                <text fg={theme.colors.textMuted}> — type /ai</text>
+              </Show>
             </box>
             <box flexDirection="row" gap={1}>
-              <text fg={props.loggedIn ? theme.colors.success : theme.colors.warning}>{props.loggedIn ? "✓" : "●"}</text>
-              <text fg={props.loggedIn ? theme.colors.textMuted : theme.colors.text}>
-                {props.loggedIn ? `Logged in as ${props.username}` : "Type /login to sign in"}
+              <text fg={props.loggedIn ? theme.colors.success : theme.colors.warning}>
+                {props.loggedIn ? "●" : "○"}
+              </text>
+              <text fg={theme.colors.text}>
+                {props.loggedIn ? props.username : "Not logged in"}
               </text>
+              <Show when={props.loggedIn && props.activeAgent}>
+                <text fg={theme.colors.textMuted}> / {props.activeAgent}</text>
+              </Show>
+              <Show when={!props.loggedIn}>
+                <text fg={theme.colors.textMuted}> — type /login</text>
+              </Show>
             </box>
           </box>
-        </Show>
+        </box>
       </Show>
 
       {/* When chatting: messages fill the space */}
@@ -483,29 +526,42 @@ export function Home(props: {
                 </Show>
                 {/* Assistant message — ◆ prefix */}
                 <Show when={msg.role === "assistant"}>
-                  <box flexDirection="row" paddingBottom={1}>
-                    <text fg={theme.colors.success} flexShrink={0}>
-                      <span style={{ bold: true }}>{"◆ "}</span>
-                    </text>
-                    <text fg={theme.colors.text} wrapMode="word" flexGrow={1} flexShrink={1}>{msg.content}</text>
+                  <box paddingBottom={1} flexShrink={0}>
+                    <code
+                      filetype="markdown"
+                      drawUnstyledText={false}
+                      syntaxStyle={syntaxStyle()}
+                      content={msg.content}
+                      conceal={true}
+                      fg={theme.colors.text}
+                    />
                   </box>
                 </Show>
               </box>
             )}
           </For>
           <box
-            flexDirection="row"
-            paddingBottom={streaming() ? 1 : 0}
             flexShrink={0}
+            paddingBottom={streaming() ? 1 : 0}
             height={streaming() ? undefined : 0}
             overflow="hidden"
           >
-            <text fg={theme.colors.success} flexShrink={0}>
-              <span style={{ bold: true }}>{streaming() ? "◆ " : ""}</span>
-            </text>
-            <text fg={streamText() ? theme.colors.text : theme.colors.textMuted} wrapMode="word" flexGrow={1} flexShrink={1}>
-              {streaming() ? (streamText() || shimmerText()) : ""}
-            </text>
+            <Show when={streaming() && streamText()}>
+              <code
+                filetype="markdown"
+                drawUnstyledText={false}
+                streaming={true}
+                syntaxStyle={syntaxStyle()}
+                content={streamText()}
+                conceal={true}
+                fg={theme.colors.text}
+              />
+            </Show>
+            <Show when={streaming() && !streamText()}>
+              <text fg={theme.colors.textMuted} wrapMode="word">
+                {"◆ " + shimmerText()}
+              </text>
+            </Show>
           </box>
         </scrollbox>
       </Show>
@@ -545,7 +601,7 @@ export function Home(props: {
           <box flexDirection="column">
             {/* Command autocomplete — above prompt */}
             <Show when={showAutocomplete()}>
-              <box flexDirection="column" paddingBottom={1}>
+              <box flexDirection="column" paddingBottom={1} maxHeight={8} overflow="hidden">
                 <For each={filtered()}>
                   {(cmd, i) => {
                     const disabled = () => cmd.needsAI && !props.hasAI
@@ -575,11 +631,11 @@ export function Home(props: {
                 <text fg={theme.colors.textMuted}>{tipPool()[tipIdx % tipPool().length]}</text>
               </box>
             </Show>
-            {/* Input line */}
+            {/* Input line with blinking cursor */}
             <box flexDirection="row">
               <text fg={theme.colors.primary}><span style={{ bold: true }}>{"❯ "}</span></text>
               <text fg={theme.colors.input}>{input()}</text>
-              <text fg={theme.colors.cursor}>{"█"}</text>
+              <text fg={theme.colors.cursor} style={{ bold: true }}>{"█"}</text>
             </box>
           </box>
         </Show>