AI Chat Panel

AI Chat Panel

The floating panel where you talk to the model. Ctrl+Shift+A to toggle.

Component: src/renderer/components/AIChatPanel.tsx.

---

Three states

Closed — collapsed to a small "AI" button docked top-center. Click or Ctrl+Shift+A to open.

Minimized — thin status bar at the top showing the active provider name, and when the AI is working in a pane, a pulsing "AI working…" indicator. Click to expand.

Full — 600-px-wide chat panel with scrollable message history (max 70 vh), input field at the bottom. Click X or Esc to close.

---

Message rendering

• User messages → right-aligned, accent-color bubble
• Assistant messages → left-aligned, dark bubble. <think> tags stripped before display. Lightweight markdown rendering: fenced code blocks (syntax highlighted), inline code, bold, italic, links, bullets, headings.
• Tool calls → compact colored chips inline (terminal=green, browser=blue, pane=purple, orchestrate=pink, step=amber, vision=cyan)
• Tool results → small "→ {preview}" lines with a colored bar indicating success/failure

Streaming messages fade in as text arrives. A subtle shimmer above the input field signals "currently generating."

---

Tool-call cards

When the model calls a tool, a card appears showing:

◫ PANE list_panes
   pane_id: c4bf7ed1-...
   → {"agents":[{"paneId":"2af68a17-...","status":"working"…

Color-coded by category (the ◫ glyph + category label). The preview is truncated; hover or expand for the full result.

Source: ToolCallCard and ToolResultChip inside AIChatPanel.tsx.

---

Header buttons

History (clock icon)	Dropdown of last 10 conversations with preview + timestamp + delete X. Click to reopen.
Settings (gear)	Opens [[AI-Providers
Clear chat	Discards current conversation (with confirm)
X	Close the panel

History is persistent across launches (clusterspace-ai-memory.json). Per-provider × per-workspace × per-pane keying — see AI-Overview.

---

Input behavior

• Enter sends. Shift+Enter inserts a newline.
• Esc cancels an in-flight stream first (if streaming), then closes the panel.
• File drag-and-drop into the input attaches images (vision-capable models only).
• Pasting an image (Ctrl+V with an image in the clipboard) attaches it.

---

Visual feedback while AI is working

• Pane being worked on gets a pulsing soft halo around its border (CSS ai-working class)
• Chat panel gets a subtle "active" glow when the assistant is mid-stream
• Status bar AI section shows the active provider name in accent color

You can keep using the rest of the app while the AI works — switch panes, edit terminals, do whatever. The AI is async.

---

Cancelling a response

Esc while a response is streaming → aborts the request and stops at whatever was already received. The partial assistant message stays in history.

If a tool call is mid-flight when you cancel, the tool finishes (the abort signals only affect the HTTP stream to the provider, not in-progress tool dispatch). Worth knowing for long-running tools like wait_for_output.

---

Markdown rendering details

renderMarkdown() in AIChatPanel.tsx is a ~80-line zero-dependency renderer covering:

• Fenced code blocks with language tag (no syntax highlighting library — just monospace pre)
• Inline code with backticks
• Bold with **
• Italic with *
• Links [text](url) (open in browser, not webview)
• Bullets with - or *
• Headings #, ##, ###

Anything fancier (tables, blockquotes, footnotes) renders as plain text. If you need richer rendering, ask in an issue or send a PR.

---

See also

• AI-Overview — what the AI can do and how it's wired
• AI-Providers — pointing at a model
• AI-Tools-Reference — every tool you might see in a card
• Goal-Dashboard — separate UI for autonomous goal runs