codeblog-app 2.3.1 → 2.3.2

package/src/tui/routes/home.tsx

@@ -1,1060 +0,0 @@
-import { createSignal, createMemo, createEffect, onCleanup, onMount, untrack, Show, For } from "solid-js"
-import { useKeyboard, usePaste } from "@opentui/solid"
-import { SyntaxStyle, type ThemeTokenStyle } from "@opentui/core"
-import { useExit } from "../context/exit"
-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"
-import { TuiStreamAssembler } from "../stream-assembler"
-import { resolveAssistantContent } from "../ai-stream"
-import { isShiftEnterSequence, onInputIntent } from "../input-intent"
-import { Log } from "../../util/log"
-
-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" | "system"
-  content: string
-  modelContent?: string
-  tone?: "info" | "success" | "warning" | "error"
-  toolName?: string
-  toolCallID?: string
-  toolStatus?: "running" | "done" | "error"
-}
-
-interface ModelOption {
-  id: string
-  label: string
-}
-
-export function Home(props: {
-  loggedIn: boolean
-  username: string
-  activeAgent: string
-  hasAI: boolean
-  aiProvider: string
-  modelName: string
-  onLogin: () => Promise<void>
-  onLogout: () => void
-  onAIConfigured: () => void
-}) {
-  const exit = useExit()
-  const theme = useTheme()
-  const [input, setInput] = createSignal("")
-  const [selectedIdx, setSelectedIdx] = createSignal(0)
-
-  const [messages, setMessages] = createSignal<ChatMsg[]>([])
-  const [streaming, setStreaming] = createSignal(false)
-  const [streamText, setStreamText] = createSignal("")
-  let abortCtrl: AbortController | undefined
-  let abortByUser = false
-  let shiftDown = false
-  let commandDisplay = ""
-  let sessionId = ""
-  const chatting = createMemo(() => messages().length > 0 || streaming())
-  const renderRows = createMemo<Array<ChatMsg | { role: "stream" }>>(() => {
-    const rows = messages()
-    if (!streaming()) return rows
-    return [...rows, { role: "stream" as const }]
-  })
-  const syntaxStyle = createMemo(() => SyntaxStyle.fromTheme(buildMarkdownSyntaxRules(theme.colors)))
-
-  function ensureSession() {
-    if (!sessionId) {
-      sessionId = crypto.randomUUID()
-      try { ChatHistory.create(sessionId) } catch {}
-    }
-  }
-
-  function saveChat() {
-    if (!sessionId) return
-    try { ChatHistory.save(sessionId, messages()) } catch {}
-  }
-
-  function resumeSession(sid?: string) {
-    try {
-      if (!sid) {
-        const sessions = ChatHistory.list(1)
-        if (sessions.length === 0) { showMsg("No previous sessions", theme.colors.warning); return }
-        const latest = sessions[0]
-        if (!latest) { showMsg("No previous sessions", theme.colors.warning); return }
-        sid = latest.id
-      }
-      const msgs = ChatHistory.load(sid)
-      if (msgs.length === 0) { showMsg("Session is empty", theme.colors.warning); return }
-      sessionId = sid
-      setMessages(msgs as ChatMsg[])
-      showMsg("Resumed session", theme.colors.success)
-    } catch { showMsg("Failed to resume", theme.colors.error) }
-  }
-
-  // Shimmer animation for thinking state (like Claude Code)
-  const SHIMMER_WORDS = ["Thinking", "Reasoning", "Composing", "Reflecting", "Analyzing", "Processing"]
-  const [shimmerIdx, setShimmerIdx] = createSignal(0)
-  const [shimmerDots, setShimmerDots] = createSignal(0)
-  createEffect(() => {
-    if (!streaming()) return
-    const id = setInterval(() => {
-      setShimmerDots((d) => (d + 1) % 4)
-      if (shimmerDots() === 0) setShimmerIdx((i) => (i + 1) % SHIMMER_WORDS.length)
-    }, 500)
-    onCleanup(() => clearInterval(id))
-  })
-  const shimmerText = () => SHIMMER_WORDS[shimmerIdx()] + ".".repeat(shimmerDots())
-
-  const tipPool = () => props.hasAI ? TIPS : TIPS_NO_AI
-  const tipIdx = Math.floor(Math.random() * TIPS.length)
-  const [aiMode, setAiMode] = createSignal<"" | "url" | "key" | "testing">("")
-  const [aiUrl, setAiUrl] = createSignal("")
-  const [aiKey, setAiKey] = createSignal("")
-  const [modelPicking, setModelPicking] = createSignal(false)
-  const [modelOptions, setModelOptions] = createSignal<ModelOption[]>([])
-  const [modelIdx, setModelIdx] = createSignal(0)
-  const [modelQuery, setModelQuery] = createSignal("")
-  const [modelLoading, setModelLoading] = createSignal(false)
-  let modelPreload: Promise<ModelOption[]> | undefined
-  const keyLog = process.env.CODEBLOG_DEBUG_KEYS === "1" ? Log.create({ service: "tui-key" }) : undefined
-  const toHex = (value: string) => Array.from(value).map((ch) => ch.charCodeAt(0).toString(16).padStart(2, "0")).join(" ")
-
-  function tone(color: string): ChatMsg["tone"] {
-    if (color === theme.colors.success) return "success"
-    if (color === theme.colors.warning) return "warning"
-    if (color === theme.colors.error) return "error"
-    return "info"
-  }
-
-  function showMsg(text: string, color = "#6a737c") {
-    ensureSession()
-    setMessages((p) => [...p, { role: "system", content: text, tone: tone(color) }])
-  }
-
-  function clearChat() {
-    abortByUser = true
-    abortCtrl?.abort()
-    abortCtrl = undefined
-    setMessages([])
-    setStreamText("")
-    setStreaming(false)
-    setInput("")
-    setSelectedIdx(0)
-    setModelPicking(false)
-    setModelOptions([])
-    setModelIdx(0)
-    setModelQuery("")
-    sessionId = ""
-  }
-
-  async function loadModelOptions(force = false): Promise<ModelOption[]> {
-    if (!props.hasAI) return []
-    const cached = untrack(() => modelOptions())
-    if (!force && cached.length > 0) return cached
-    if (modelPreload) return modelPreload
-
-    modelPreload = (async () => {
-      try {
-        setModelLoading(true)
-        const { AIProvider } = await import("../../ai/provider")
-        const { Config } = await import("../../config")
-        const cfg = await Config.load()
-        const current = cfg.model || AIProvider.DEFAULT_MODEL
-        const currentBuiltin = AIProvider.BUILTIN_MODELS[current]
-        const currentProvider =
-          cfg.default_provider ||
-          (current.includes("/") ? current.split("/")[0] : currentBuiltin?.providerID) ||
-          "openai"
-        const providerCfg = cfg.providers?.[currentProvider]
-        const providerApi = providerCfg?.api || providerCfg?.compat_profile || (currentProvider === "openai" ? "openai" : "openai-compatible")
-        const providerKey = providerCfg?.api_key
-        const providerBase = providerCfg?.base_url || (currentProvider === "openai" ? "https://api.openai.com" : "")
-
-        const remote = await (async () => {
-          if (!providerKey || !providerBase) return [] as string[]
-          if (providerApi !== "openai" && providerApi !== "openai-compatible") return [] as string[]
-          try {
-            const clean = providerBase.replace(/\/+$/, "")
-            const url = clean.endsWith("/v1") ? `${clean}/models` : `${clean}/v1/models`
-            const r = await fetch(url, {
-              headers: { Authorization: `Bearer ${providerKey}` },
-              signal: AbortSignal.timeout(8000),
-            })
-            if (!r.ok) return []
-            const data = await r.json() as { data?: Array<{ id: string }> }
-            return data.data?.map((m) => m.id).filter(Boolean) || []
-          } catch {
-            return []
-          }
-        })()
-
-        const fromRemote = remote.map((id) => {
-          const saveId = currentProvider === "openai-compatible" && !id.includes("/") ? `openai-compatible/${id}` : id
-          return { id: saveId, label: `${saveId}  [${currentProvider}]` }
-        })
-        const list = await AIProvider.available()
-        const fromAvailable = list
-          .filter((m) => m.hasKey)
-          .map((m) => {
-            const id = m.model.providerID === "openai-compatible" ? `openai-compatible/${m.model.id}` : m.model.id
-            const provider = m.model.providerID
-            return { id, label: `${id}${provider ? `  [${provider}]` : ""}` }
-          })
-        const unique = Array.from(new Map([...fromRemote, ...fromAvailable].map((m) => [m.id, m])).values())
-        setModelOptions(unique)
-        return unique
-      } finally {
-        setModelLoading(false)
-      }
-    })()
-
-    const out = await modelPreload
-    modelPreload = undefined
-    return out
-  }
-
-  async function openModelPicker() {
-    if (!props.hasAI) {
-      showMsg("/model requires AI. Type /ai to configure.", theme.colors.warning)
-      return
-    }
-    setModelQuery("")
-    setModelPicking(true)
-    const cached = modelOptions()
-    if (cached.length === 0) await loadModelOptions(true)
-    else void loadModelOptions(true)
-
-    const current = props.modelName
-    const next = modelOptions()
-    if (next.length === 0) {
-      setModelPicking(false)
-      showMsg("No available models. Configure provider with /ai first.", theme.colors.warning)
-      return
-    }
-    setModelIdx(Math.max(0, next.findIndex((m) => m.id === current)))
-    showMsg("Model picker: use ↑/↓ then Enter (Esc to cancel), type to search", theme.colors.textMuted)
-  }
-
-  async function pickModel(id: string) {
-    try {
-      const { Config } = await import("../../config")
-      await Config.save({ model: id })
-      props.onAIConfigured()
-      showMsg(`Set model to ${id}`, theme.colors.success)
-    } catch (err) {
-      showMsg(`Failed to switch model: ${err instanceof Error ? err.message : String(err)}`, theme.colors.error)
-    } finally {
-      setModelPicking(false)
-      setModelIdx(0)
-      setModelQuery("")
-      void loadModelOptions(true)
-    }
-  }
-
-  onMount(() => {
-    if (!props.hasAI) return
-    void loadModelOptions(true)
-  })
-
-  createEffect(() => {
-    if (!props.hasAI) {
-      setModelOptions([])
-      return
-    }
-    props.modelName
-    void loadModelOptions(false)
-  })
-
-  const commands = createCommands({
-    showMsg,
-    openModelPicker,
-    exit,
-    onLogin: props.onLogin,
-    onLogout: props.onLogout,
-    clearChat,
-    startAIConfig: () => {
-      setAiUrl(""); setAiKey(""); setAiMode("url")
-      showMsg("Quick setup: paste API URL (or press Enter to skip). Full wizard: `codeblog ai setup`", theme.colors.primary)
-    },
-    setMode: theme.setMode,
-    send,
-    onAIConfigured: props.onAIConfigured,
-    resume: resumeSession,
-    listSessions: () => { try { return ChatHistory.list(10) } catch { return [] } },
-    hasAI: props.hasAI,
-    colors: theme.colors,
-  })
-
-  const filtered = createMemo(() => {
-    const v = input()
-    if (!v.startsWith("/")) return []
-    const query = v.slice(1).toLowerCase()
-    if (!query) return commands
-    return commands.filter((c) => c.name.slice(1).toLowerCase().includes(query))
-  })
-
-  const showAutocomplete = createMemo(() => {
-    const v = input()
-    if (aiMode()) return false
-    if (modelPicking()) return false
-    if (!v.startsWith("/")) return false
-    if (v.includes(" ")) return false
-    return filtered().length > 0
-  })
-
-  createEffect(() => {
-    const len = filtered().length
-    const idx = selectedIdx()
-    if (len === 0 && idx !== 0) {
-      setSelectedIdx(0)
-      return
-    }
-    if (idx >= len) setSelectedIdx(len - 1)
-  })
-
-  const visibleStart = createMemo(() => {
-    const len = filtered().length
-    if (len <= 8) return 0
-    const max = len - 8
-    const idx = selectedIdx()
-    return Math.max(0, Math.min(idx - 3, max))
-  })
-
-  const visibleItems = createMemo(() => {
-    const start = visibleStart()
-    return filtered().slice(start, start + 8)
-  })
-
-  const modelFiltered = createMemo(() => {
-    const list = modelOptions()
-    const query = modelQuery().trim().toLowerCase()
-    if (!query) return list
-    return list.filter((m) => m.id.toLowerCase().includes(query) || m.label.toLowerCase().includes(query))
-  })
-
-  const modelVisibleStart = createMemo(() => {
-    const len = modelFiltered().length
-    if (len <= 8) return 0
-    const max = len - 8
-    const idx = modelIdx()
-    return Math.max(0, Math.min(idx - 3, max))
-  })
-
-  const modelVisibleItems = createMemo(() => {
-    const start = modelVisibleStart()
-    return modelFiltered().slice(start, start + 8)
-  })
-
-  createEffect(() => {
-    const len = modelFiltered().length
-    const idx = modelIdx()
-    if (len === 0 && idx !== 0) {
-      setModelIdx(0)
-      return
-    }
-    if (idx >= len) setModelIdx(len - 1)
-  })
-
-  const offInputIntent = onInputIntent((intent) => {
-    if (intent !== "newline" || aiMode()) return
-    setInput((s) => s + "\n")
-    setSelectedIdx(0)
-  })
-  onCleanup(() => offInputIntent())
-
-  usePaste((evt) => {
-    // For URL/key modes, strip newlines; for normal input, preserve them
-    if (aiMode() === "url" || aiMode() === "key") {
-      const text = evt.text.replace(/[\n\r]/g, "").trim()
-      if (!text) return
-      evt.preventDefault()
-      if (aiMode() === "url") { setAiUrl(text); return }
-      setAiKey(text)
-      return
-    }
-    const text = evt.text.replace(/\r\n/g, "\n").replace(/\r/g, "\n")
-    if (!text) return
-    evt.preventDefault()
-    setInput((s) => s + text)
-  })
-
-  async function send(text: string, options?: { display?: string }) {
-    if (!text.trim() || streaming()) return
-    ensureSession()
-    const prompt = text.trim()
-    const userMsg: ChatMsg = { role: "user", content: options?.display || commandDisplay || prompt, modelContent: prompt }
-    const prev = messages()
-    setMessages([...prev, userMsg])
-    setStreaming(true)
-    setStreamText("")
-    abortByUser = false
-    const assembler = new TuiStreamAssembler()
-    const toolResults: Array<{ name: string; result: string }> = []
-    const flushMs = 60
-    let flushTimer: ReturnType<typeof setTimeout> | undefined
-
-    const flushStream = (force = false) => {
-      if (force) {
-        if (flushTimer) clearTimeout(flushTimer)
-        flushTimer = undefined
-        setStreamText(assembler.getText())
-        return
-      }
-      if (flushTimer) return
-      flushTimer = setTimeout(() => {
-        flushTimer = undefined
-        setStreamText(assembler.getText())
-      }, flushMs)
-    }
-
-    try {
-      const { AIChat } = await import("../../ai/chat")
-      const { AIProvider } = await import("../../ai/provider")
-      const { Config } = await import("../../config")
-      const cfg = await Config.load()
-      const mid = cfg.model || AIProvider.DEFAULT_MODEL
-      const allMsgs = [...prev, userMsg]
-        .filter((m): m is ChatMsg & { role: "user" | "assistant" } => m.role === "user" || m.role === "assistant")
-        .map((m) => ({ role: m.role, content: m.modelContent || m.content }))
-      abortCtrl = new AbortController()
-
-      let hasToolCalls = false
-      let finalizedText = ""
-      for await (const event of AIChat.streamEvents(allMsgs, mid, abortCtrl.signal, { maxSteps: 10 })) {
-        if (event.type === "text-delta") {
-          assembler.pushDelta(event.text, event.seq)
-          flushStream()
-          continue
-        }
-
-        if (event.type === "tool-start") {
-          hasToolCalls = true
-          const partial = assembler.getText().trim()
-          if (partial) {
-            setMessages((p) => [...p, { role: "assistant", content: partial }])
-            assembler.reset()
-            setStreamText("")
-          }
-          setMessages((p) => [...p, { role: "tool", content: TOOL_LABELS[event.name] || event.name, toolName: event.name, toolCallID: event.callID, toolStatus: "running" }])
-          continue
-        }
-
-        if (event.type === "tool-result") {
-          try {
-            const str = typeof event.result === "string" ? event.result : JSON.stringify(event.result)
-            toolResults.push({ name: event.name, result: str.slice(0, 1200) })
-          } catch {}
-          setMessages((p) => {
-            let matched = false
-            const next = p.map((m) => {
-              if (m.role !== "tool" || m.toolStatus !== "running") return m
-              if (m.toolCallID !== event.callID) return m
-              matched = true
-              return { ...m, toolStatus: "done" as const }
-            })
-            if (matched) return next
-            return p.map((m) =>
-              m.role === "tool" && m.toolName === event.name && m.toolStatus === "running"
-                ? { ...m, toolStatus: "done" as const }
-                : m
-            )
-          })
-          continue
-        }
-
-        if (event.type === "error") {
-          setMessages((p) => {
-            const updated = p.map((m) =>
-              m.role === "tool" && m.toolStatus === "running"
-                ? { ...m, toolStatus: "error" as const }
-                : m
-            )
-            return [...updated, { role: "assistant" as const, content: `Error: ${event.error.message}` }]
-          })
-          continue
-        }
-
-        if (event.type === "run-finish") {
-          finalizedText = assembler.pushFinal(event.text).trim()
-          flushStream(true)
-          const content = resolveAssistantContent({
-            finalText: finalizedText,
-            aborted: event.aborted,
-            abortByUser,
-            hasToolCalls,
-            toolResults,
-          })
-          if (content) setMessages((p) => [...p, { role: "assistant", content }])
-        }
-      }
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : String(err)
-      setMessages((p) => [...p, { role: "assistant", content: `Error: ${msg}` }])
-    } finally {
-      if (flushTimer) clearTimeout(flushTimer)
-      abortCtrl = undefined
-      setStreamText("")
-      setStreaming(false)
-      saveChat()
-    }
-  }
-
-  async function saveAI() {
-    setAiMode("testing")
-    showMsg("Detecting API format...", theme.colors.primary)
-    try {
-      const result = await saveProvider(aiUrl().trim(), aiKey().trim())
-      if (result.error) {
-        showMsg(result.error, theme.colors.error)
-        setAiMode("key")
-        return
-      }
-      showMsg(`✓ AI configured! (${result.provider})`, theme.colors.success)
-      setAiMode("")
-      props.onAIConfigured()
-    } catch (err) {
-      showMsg(`Save failed: ${err instanceof Error ? err.message : String(err)}`, theme.colors.error)
-      setAiMode("key")
-    }
-  }
-
-  async function handleSubmit() {
-    if (aiMode() === "url") {
-      const v = aiUrl().trim()
-      if (v && !v.startsWith("http")) { showMsg("URL must start with http:// or https://", theme.colors.error); return }
-      setAiMode("key")
-      showMsg("Now paste your API key (or press Esc to cancel):", theme.colors.primary)
-      return
-    }
-    if (aiMode() === "key") {
-      const url = aiUrl().trim()
-      const key = aiKey().trim()
-      // Both empty → friendly skip
-      if (!url && !key) {
-        showMsg("No AI configuration provided — skipped. Use /ai anytime to configure.", theme.colors.warning)
-        setAiMode("")
-        return
-      }
-      // Key empty but URL provided → friendly skip
-      if (!key) {
-        showMsg("No API key provided — skipped. Use /ai anytime to configure.", theme.colors.warning)
-        setAiMode("")
-        return
-      }
-      if (key.length < 5) { showMsg("API key too short", theme.colors.error); return }
-      saveAI()
-      return
-    }
-
-    if (showAutocomplete()) {
-      const items = filtered()
-      const sel = items[selectedIdx()]
-      if (sel) {
-        if (sel.needsAI && !props.hasAI) {
-          showMsg(`${sel.name} requires AI. Type /ai to configure.`, theme.colors.warning)
-          setInput("")
-          setSelectedIdx(0)
-          return
-        }
-        setInput("")
-        setSelectedIdx(0)
-        commandDisplay = sel.name
-        try {
-          await sel.action(sel.name.split(/\s+/))
-        } finally {
-          commandDisplay = ""
-        }
-        return
-      }
-    }
-
-    const text = input().trim()
-    setInput("")
-    setSelectedIdx(0)
-    if (!text) return
-
-    if (text.startsWith("/")) {
-      const parts = text.split(/\s+/)
-      const cmd = parts[0]
-      const match = commands.find((c) => c.name === cmd)
-      if (match) {
-        if (match.needsAI && !props.hasAI) {
-          showMsg(`${cmd} requires AI. Type /ai to configure.`, theme.colors.warning)
-          return
-        }
-        commandDisplay = text
-        try {
-          await match.action(parts)
-        } finally {
-          commandDisplay = ""
-        }
-        return
-      }
-      if (cmd === "/quit" || cmd === "/q") { exit(); return }
-      showMsg(`Unknown command: ${cmd}. Type / to see commands`, theme.colors.error)
-      return
-    }
-
-    if (!props.hasAI) {
-      showMsg("No AI configured. Type /ai to set up", theme.colors.error)
-      return
-    }
-
-    send(text, { display: text })
-  }
-
-  useKeyboard((evt) => {
-    if (evt.name === "leftshift" || evt.name === "rightshift" || evt.name === "shift") {
-      shiftDown = evt.eventType !== "release"
-      evt.preventDefault()
-      return
-    }
-    if (evt.eventType === "release") return
-
-    const submitKey = evt.name === "return" || evt.name === "enter"
-    const raw = evt.raw || ""
-    const seq = evt.sequence || ""
-    const rawReturn = raw === "\r" || seq === "\r" || raw.endsWith("\r") || seq.endsWith("\r")
-    const submitFromRawOnly = !submitKey && rawReturn
-    if (keyLog && (submitKey || evt.name === "linefeed" || evt.name === "" || evt.name === "leftshift" || evt.name === "rightshift" || evt.name === "shift")) {
-      keyLog.info("submit-key", {
-        name: evt.name,
-        eventType: evt.eventType,
-        shift: evt.shift,
-        ctrl: evt.ctrl,
-        meta: evt.meta,
-        source: evt.source,
-        raw,
-        sequence: seq,
-        rawHex: toHex(raw),
-        sequenceHex: toHex(seq),
-      })
-    }
-    const shiftFromRaw = isShiftEnterSequence(raw) || isShiftEnterSequence(seq) || raw.includes(";2u") || seq.includes(";2u")
-    const shift = evt.shift || shiftDown || shiftFromRaw
-    const newlineFromRaw = raw === "\n" || seq === "\n" || raw === "\r\n" || seq === "\r\n"
-    const modifiedSubmitFromRaw =
-      (submitKey && raw.startsWith("\x1b[") && raw.endsWith("~")) ||
-      (submitKey && seq.startsWith("\x1b[") && seq.endsWith("~")) ||
-      (submitKey && raw.includes(";13")) ||
-      (submitKey && seq.includes(";13"))
-    const newlineKey =
-      evt.name === "linefeed" ||
-      newlineFromRaw ||
-      isShiftEnterSequence(raw) ||
-      isShiftEnterSequence(seq) ||
-      (submitFromRawOnly && (shiftDown || raw.startsWith("\x1b") || seq.startsWith("\x1b")) && !evt.ctrl) ||
-      (modifiedSubmitFromRaw && !evt.ctrl) ||
-      (submitKey && shift && !evt.ctrl && !evt.meta) ||
-      (submitKey && evt.meta && !evt.ctrl) ||
-      (evt.name === "j" && evt.ctrl && !evt.meta)
-
-    if (aiMode() === "url") {
-      if (submitKey || newlineKey) { handleSubmit(); evt.preventDefault(); return }
-      if (evt.name === "escape") { setAiMode(""); evt.preventDefault(); return }
-      if (evt.name === "backspace") { setAiUrl((s) => s.slice(0, -1)); 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) { setAiUrl((s) => s + clean); evt.preventDefault(); return }
-      }
-      if (evt.name === "space") { evt.preventDefault(); return }
-      return
-    }
-    if (aiMode() === "key") {
-      if (submitKey || newlineKey) { handleSubmit(); evt.preventDefault(); return }
-      if (evt.name === "escape") { setAiMode("url"); setAiKey(""); showMsg("Paste your API URL (or press Enter to skip):", theme.colors.primary); evt.preventDefault(); return }
-      if (evt.name === "backspace") { setAiKey((s) => s.slice(0, -1)); 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) { setAiKey((s) => s + clean); evt.preventDefault(); return }
-      }
-      if (evt.name === "space") { setAiKey((s) => s + " "); evt.preventDefault(); return }
-      return
-    }
-
-    if (modelPicking()) {
-      if (evt.name === "up" || evt.name === "k") {
-        const len = modelFiltered().length
-        if (len > 0) setModelIdx((i) => (i - 1 + len) % len)
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "down" || evt.name === "j") {
-        const len = modelFiltered().length
-        if (len > 0) setModelIdx((i) => (i + 1) % len)
-        evt.preventDefault()
-        return
-      }
-      if (submitKey || evt.name === "enter") {
-        const selected = modelFiltered()[modelIdx()]
-        if (selected) void pickModel(selected.id)
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "backspace") {
-        setModelQuery((q) => q.slice(0, -1))
-        setModelIdx(0)
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "escape") {
-        if (modelQuery()) {
-          setModelQuery("")
-          setModelIdx(0)
-          evt.preventDefault()
-          return
-        }
-        setModelPicking(false)
-        setModelIdx(0)
-        setModelQuery("")
-        showMsg("Model switch canceled", theme.colors.textMuted)
-        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) {
-          setModelQuery((q) => q + clean)
-          setModelIdx(0)
-          evt.preventDefault()
-          return
-        }
-      }
-      if (evt.name === "space") {
-        setModelQuery((q) => q + " ")
-        setModelIdx(0)
-        evt.preventDefault()
-        return
-      }
-      return
-    }
-
-    if (showAutocomplete()) {
-      if (evt.name === "up" || evt.name === "down") {
-        const len = filtered().length
-        if (len === 0) { evt.preventDefault(); return }
-        if (evt.name === "up") setSelectedIdx((i) => (i - 1 + len) % len)
-        else setSelectedIdx((i) => (i + 1) % len)
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "tab") {
-        const sel = filtered()[selectedIdx()]
-        if (sel) setInput(sel.name + " ")
-        evt.preventDefault()
-        return
-      }
-      if (evt.name === "escape") { setInput(""); setSelectedIdx(0); evt.preventDefault(); return }
-    }
-
-    // Escape while streaming → abort; while chatting → clear
-    if (evt.name === "escape" && streaming()) {
-      abortByUser = true
-      abortCtrl?.abort()
-      evt.preventDefault(); return
-    }
-    if (evt.name === "escape" && chatting() && !streaming()) { clearChat(); evt.preventDefault(); return }
-
-    if (submitKey && !shift && !evt.ctrl && !evt.meta && !modifiedSubmitFromRaw) { handleSubmit(); evt.preventDefault(); return }
-    if (newlineKey) { setInput((s) => s + "\n"); evt.preventDefault(); return }
-    if (evt.name === "backspace") { setInput((s) => s.slice(0, -1)); setSelectedIdx(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) { setInput((s) => s + clean); setSelectedIdx(0); evt.preventDefault(); return }
-    }
-    if (evt.name === "space") { setInput((s) => s + " "); evt.preventDefault(); return }
-  }, { release: true })
-
-  return (
-    <box flexDirection="column" flexGrow={1} paddingLeft={2} paddingRight={2}>
-      <scrollbox
-        flexGrow={1}
-        paddingTop={1}
-        stickyScroll={true}
-        stickyStart="bottom"
-        verticalScrollbarOptions={{ visible: false }}
-        horizontalScrollbarOptions={{ visible: false }}
-      >
-        <Show when={!chatting()}>
-          <box flexGrow={1} minHeight={0} />
-        </Show>
-
-        <box flexShrink={0} flexDirection="column" alignItems="center">
-          {LOGO.map((line, i) => (
-            <text fg={i < 4 ? theme.colors.logo1 : theme.colors.logo2}>{line}</text>
-          ))}
-          <box height={1} />
-          <text fg={theme.colors.textMuted}>The AI-powered coding forum</text>
-
-          <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={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={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 when={props.loggedIn}>
-            <box flexDirection="row" paddingTop={1}>
-              <text fg={theme.colors.warning} flexShrink={0}>● Tip </text>
-              <text fg={theme.colors.textMuted}>{tipPool()[tipIdx % tipPool().length]}</text>
-            </box>
-          </Show>
-        </box>
-
-        <For each={renderRows()}>
-          {(row) => {
-            if (row.role === "stream") {
-              return (
-                <box flexShrink={0} paddingBottom={1}>
-                  <Show when={streamText()}>
-                    <code
-                      filetype="markdown"
-                      drawUnstyledText={false}
-                      streaming={true}
-                      syntaxStyle={syntaxStyle()}
-                      content={streamText()}
-                      conceal={true}
-                      fg={theme.colors.text}
-                    />
-                  </Show>
-                  <Show when={!streamText()}>
-                    <text fg={theme.colors.textMuted} wrapMode="word">
-                      {"◆ " + shimmerText()}
-                    </text>
-                  </Show>
-                </box>
-              )
-            }
-            const msg = row
-            return (
-              <box flexShrink={0}>
-                <Show when={msg.role === "user"}>
-                  <box flexDirection="row" paddingBottom={1}>
-                    <text fg={theme.colors.primary} flexShrink={0}>
-                      <span style={{ bold: true }}>{"❯ "}</span>
-                    </text>
-                    <text fg={theme.colors.text} wrapMode="word" flexGrow={1} flexShrink={1}>
-                      <span style={{ bold: true }}>{msg.content}</span>
-                    </text>
-                  </box>
-                </Show>
-                <Show when={msg.role === "tool"}>
-                  <box flexDirection="row" paddingLeft={2}>
-                    <text fg={msg.toolStatus === "done" ? theme.colors.success : msg.toolStatus === "error" ? theme.colors.error : theme.colors.warning} flexShrink={0}>
-                      {msg.toolStatus === "done" ? "  ✓ " : msg.toolStatus === "error" ? "  ✗ " : "  ⚙ "}
-                    </text>
-                    <text fg={theme.colors.textMuted}>
-                      {msg.content}
-                    </text>
-                  </box>
-                </Show>
-                <Show when={msg.role === "assistant"}>
-                  <box paddingBottom={1} flexShrink={0}>
-                    <code
-                      filetype="markdown"
-                      drawUnstyledText={false}
-                      syntaxStyle={syntaxStyle()}
-                      content={msg.content}
-                      conceal={true}
-                      fg={theme.colors.text}
-                    />
-                  </box>
-                </Show>
-                <Show when={msg.role === "system"}>
-                  <box flexDirection="row" paddingLeft={2} paddingBottom={1}>
-                    <text
-                      fg={
-                        msg.tone === "success"
-                          ? theme.colors.success
-                          : msg.tone === "warning"
-                            ? theme.colors.warning
-                            : msg.tone === "error"
-                              ? theme.colors.error
-                              : theme.colors.textMuted
-                      }
-                      flexShrink={0}
-                    >
-                      {"└ "}
-                    </text>
-                    <text
-                      fg={
-                        msg.tone === "success"
-                          ? theme.colors.success
-                          : msg.tone === "warning"
-                            ? theme.colors.warning
-                            : msg.tone === "error"
-                              ? theme.colors.error
-                              : theme.colors.textMuted
-                      }
-                      wrapMode="word"
-                      flexGrow={1}
-                      flexShrink={1}
-                    >
-                      {msg.content}
-                    </text>
-                  </box>
-                </Show>
-              </box>
-            )
-          }}
-        </For>
-
-        <Show when={!chatting()}>
-          <box flexGrow={1} minHeight={0} />
-        </Show>
-      </scrollbox>
-
-      {/* Prompt — always at bottom */}
-      <box flexShrink={0} paddingTop={1} paddingBottom={1}>
-        <Show when={aiMode() === "url"}>
-          <box flexDirection="column">
-            <text fg={theme.colors.text}><span style={{ bold: true }}>API URL:</span></text>
-            <box flexDirection="row">
-              <text fg={theme.colors.primary}><span style={{ bold: true }}>{"❯ "}</span></text>
-              <text fg={theme.colors.input}>{aiUrl()}</text>
-              <text fg={theme.colors.cursor}>{"█"}</text>
-            </box>
-          </box>
-        </Show>
-        <Show when={aiMode() === "key"}>
-          <box flexDirection="column">
-            {aiUrl().trim() ? <text fg={theme.colors.textMuted}>{"URL: " + aiUrl().trim()}</text> : null}
-            <text fg={theme.colors.text}><span style={{ bold: true }}>API Key:</span></text>
-            <box flexDirection="row">
-              <text fg={theme.colors.primary}><span style={{ bold: true }}>{"❯ "}</span></text>
-              <text fg={theme.colors.input}>{mask(aiKey())}</text>
-              <text fg={theme.colors.cursor}>{"█"}</text>
-            </box>
-          </box>
-        </Show>
-        <Show when={aiMode() === "testing"}>
-          <text fg={theme.colors.primary}>Detecting API format...</text>
-        </Show>
-        <Show when={!aiMode()}>
-          <box flexDirection="column">
-            <Show when={modelPicking()}>
-              <box flexDirection="column" paddingBottom={1}>
-                <text fg={theme.colors.textMuted}>{"  /model — choose with ↑/↓, Enter to confirm, Esc to cancel"}</text>
-                <box flexDirection="row">
-                  <text fg={theme.colors.textMuted}>{"  search: "}</text>
-                  <text fg={theme.colors.input}>{modelQuery()}</text>
-                  <text fg={theme.colors.cursor}>{"█"}</text>
-                </box>
-                <Show when={modelLoading()}>
-                  <text fg={theme.colors.textMuted}>{"  Loading models..."}</text>
-                </Show>
-                <Show when={modelVisibleStart() > 0}>
-                  <text fg={theme.colors.textMuted}>{"  ↑ more models"}</text>
-                </Show>
-                <For each={modelVisibleItems()}>
-                  {(option, i) => {
-                    const selected = () => i() + modelVisibleStart() === modelIdx()
-                    const current = () => option.id === props.modelName
-                    return (
-                      <box flexDirection="row" backgroundColor={selected() ? theme.colors.primary : undefined}>
-                        <text fg={selected() ? "#ffffff" : theme.colors.text}>
-                          {"  " + (selected() ? "● " : "○ ") + option.label + (current() ? "  (current)" : "")}
-                        </text>
-                      </box>
-                    )
-                  }}
-                </For>
-                <Show when={modelFiltered().length === 0 && !modelLoading()}>
-                  <text fg={theme.colors.warning}>{"  No matched models"}</text>
-                </Show>
-                <Show when={modelVisibleStart() + modelVisibleItems().length < modelFiltered().length}>
-                  <text fg={theme.colors.textMuted}>{"  ↓ more models"}</text>
-                </Show>
-              </box>
-            </Show>
-            {/* Command autocomplete — above prompt */}
-            <Show when={showAutocomplete()}>
-              <box flexDirection="column" paddingBottom={1}>
-                <Show when={visibleStart() > 0}>
-                  <text fg={theme.colors.textMuted}>{"  ↑ more commands"}</text>
-                </Show>
-                <For each={visibleItems()}>
-                  {(cmd, i) => {
-                    const disabled = () => cmd.needsAI && !props.hasAI
-                    const selected = () => i() + visibleStart() === selectedIdx()
-                    return (
-                      <box flexDirection="row" backgroundColor={selected() ? theme.colors.primary : undefined}>
-                        <text fg={selected() ? "#ffffff" : (disabled() ? theme.colors.textMuted : theme.colors.primary)}>
-                          {"  " + cmd.name.padEnd(18)}
-                        </text>
-                        <text fg={selected() ? "#ffffff" : theme.colors.textMuted}>
-                          {disabled() ? cmd.description + " [needs /ai]" : cmd.description}
-                        </text>
-                      </box>
-                    )
-                  }}
-                </For>
-                <Show when={visibleStart() + visibleItems().length < filtered().length}>
-                  <text fg={theme.colors.textMuted}>{"  ↓ more commands"}</text>
-                </Show>
-              </box>
-            </Show>
-            {/* Input line with blinking cursor */}
-            <box flexDirection="column">
-              {(() => {
-                const lines = input().split("\n")
-                return lines.map((line, i) => (
-                  <box flexDirection="row">
-                    <text fg={theme.colors.primary}><span style={{ bold: true }}>{i === 0 ? "❯ " : "  "}</span></text>
-                    <text fg={theme.colors.input}>{line}</text>
-                    {i === lines.length - 1 && <text fg={theme.colors.cursor}><span style={{ bold: true }}>{"█"}</span></text>}
-                  </box>
-                ))
-              })()}
-            </box>
-          </box>
-        </Show>
-      </box>
-    </box>
-  )
-}