@hienlh/ppm 0.1.0

package/plans/260314-2009-ppm-implementation/phase-05-web-terminal.md

@@ -0,0 +1,174 @@
+# Phase 5: Web Terminal
+
+**Owner:** backend-dev (PTY + WS) + frontend-dev (xterm.js) — parallel
+**Priority:** High
+**Depends on:** Phase 2, Phase 3
+**Effort:** Medium
+
+## Overview
+
+Web-based terminal: xterm.js in browser ↔ WebSocket ↔ Bun.spawn() native Terminal API on server. Multiple terminal sessions.
+
+## Backend (backend-dev)
+
+### Files
+```
+src/services/terminal.service.ts
+src/server/ws/terminal.ts
+```
+
+### Terminal Service
+
+**[V2 FIX]** Use `Bun.spawn()` with **native Terminal API** (NOT node-pty).
+
+**Why:** node-pty uses NAN (pre-2015 C++ bindings), Bun only supports NAPI. This is a hard incompatibility — segfault crashes entire process, no try-catch possible. See [research report](../reports/researcher-260314-2232-node-pty-bun-crash-analysis.md).
+
+**Chosen approach:** `Bun.spawn()` with `terminal` option — built-in, zero dependencies, full PTY support (colors, cursor, resize).
+
+```typescript
+class TerminalService {
+  private sessions: Map<string, TerminalSession> = new Map();
+  private outputBuffers: Map<string, string> = new Map(); // Last 10KB per session
+
+  create(projectPath: string, shell?: string): string {
+    const id = crypto.randomUUID();
+    const proc = Bun.spawn([shell || process.env.SHELL || 'bash'], {
+      cwd: projectPath,
+      terminal: {
+        cols: 80,
+        rows: 24,
+        data: (terminal, chunk) => {
+          // Buffer last 10KB for reconnect
+          this.appendBuffer(id, chunk.toString());
+          // Emit to connected WS clients via event bus
+        },
+      },
+    });
+    this.sessions.set(id, { id, proc, projectPath, createdAt: new Date() });
+    return id;
+  }
+
+  write(id: string, data: string): void {
+    this.sessions.get(id)?.proc.terminal?.write(data);
+  }
+
+  resize(id: string, cols: number, rows: number): void {
+    this.sessions.get(id)?.proc.terminal?.resize(cols, rows);
+  }
+
+  kill(id: string): void {
+    const session = this.sessions.get(id);
+    if (session) {
+      session.proc.terminal?.close();
+      session.proc.kill();
+      this.sessions.delete(id);
+      this.outputBuffers.delete(id);
+    }
+  }
+
+  getBuffer(id: string): string {
+    return this.outputBuffers.get(id) ?? '';
+  }
+
+  list(): TerminalSessionInfo[] { /* ... */ }
+  get(id: string): TerminalSession | undefined { /* ... */ }
+}
+```
+
+**Limitation:** POSIX only (macOS/Linux). Acceptable for dev environment — Windows users use WSL.
+
+### WebSocket Handler
+```
+WS /ws/terminal/:id
+```
+
+Protocol (binary frames):
+- Client → Server: keystrokes (text)
+- Server → Client: terminal output (text)
+- Client → Server: `\x01RESIZE:cols,rows` (control message)
+- Server detects client disconnect → keep PTY alive for reconnect (30s timeout)
+
+### Flow
+```
+Browser (xterm.js) → WS connect /ws/terminal/:id
+  If session exists → attach to existing PTY
+  If not → create new PTY via TerminalService
+
+  xterm.js keystroke → WS → pty.write()
+  pty.onData() → WS → xterm.js render
+  xterm.js resize → WS control msg → pty.resize()
+```
+
+## Frontend (frontend-dev)
+
+### Files
+```
+src/web/components/terminal/terminal-tab.tsx
+src/web/hooks/use-terminal.ts
+```
+
+### Terminal Tab Component
+```typescript
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+
+// useTerminal hook manages WS connection + xterm instance
+const useTerminal = (sessionId: string) => {
+  // Create Terminal instance
+  // Attach FitAddon for auto-resize
+  // Connect WebSocket
+  // Wire: ws.onmessage → term.write()
+  // Wire: term.onData → ws.send()
+  // Wire: ResizeObserver → ws.send(resize control msg)
+};
+```
+
+### Features
+- Auto-fit to container size
+- Clickable URLs (WebLinksAddon)
+- Copy/paste (mobile: long press select, paste button)
+- Reconnect on WS drop (re-attach to same PTY)
+- "New Terminal" button → opens new tab with new session
+- Terminal font: monospace, configurable size
+
+### Mobile Considerations
+- xterm.js works on mobile but keyboard can obscure terminal
+- Use `visualViewport` API to adjust terminal height when keyboard opens
+- Bottom toolbar with common keys: Tab, Ctrl, Esc, arrows
+
+## State Persistence & Reconnect
+
+### Output Buffer
+- Server keeps a circular buffer (last 10KB) of terminal output per session
+- On WS reconnect → server sends buffered output before live stream
+- Client clears xterm and replays buffer for seamless experience
+
+### Session Persistence
+- Terminal sessions survive server restart: save session metadata (id, projectPath, shell, cwd) to `~/.ppm/sessions.json`
+- On server start → attempt to restore sessions from file (re-spawn shell in last known cwd)
+- Sessions that fail to restore → mark as "dead", remove from list
+- Idle session timeout: configurable, default 1 hour — kill PTY + remove from sessions
+
+### WS Reconnect Flow
+```
+Client disconnects (network drop, tab switch on mobile)
+  → WS closes
+  → Client: exponential backoff reconnect (1s, 2s, 4s... max 30s)
+  → Server: PTY stays alive, output buffers
+  → Client reconnects: sends { type: 'attach', sessionId: 'xxx' }
+  → Server: sends buffered output, then pipes live
+```
+
+## Success Criteria
+
+- [ ] Opening terminal tab spawns real shell (bash/zsh) with correct CWD
+- [ ] Keystrokes sent from browser appear in shell; shell output renders in xterm.js
+- [ ] Terminal auto-resizes when browser window/container resizes — sends RESIZE control message
+- [ ] Multiple terminal tabs work simultaneously (each with own PTY session)
+- [ ] WS disconnect → reconnect → terminal shows buffered output + continues working
+- [ ] Works on mobile: keyboard opens without covering terminal, bottom toolbar has Tab/Ctrl/Esc/arrows
+- [ ] `visualViewport` API adjusts terminal height when mobile keyboard opens
+- [ ] Terminal session persists if server stays running (navigate away + come back = same session)
+- [ ] Idle sessions killed after configured timeout (default 1h)
+- [ ] Clickable URLs in terminal output (WebLinksAddon)

package/plans/260314-2009-ppm-implementation/phase-06-git-integration.md

@@ -0,0 +1,244 @@
+# Phase 6: Git Integration
+
+**Owner:** backend-dev (API) + frontend-dev (UI) — parallel
+**Priority:** High
+**Depends on:** Phase 4 (file explorer, diff viewer reuse)
+**Effort:** Large (git graph is complex)
+
+## Overview
+
+Git status panel (stage/unstage/commit/push/pull), git diff viewer, git graph visualization (SVG, ported from vscode-git-graph approach).
+
+## Backend (backend-dev)
+
+### Files
+```
+src/services/git.service.ts
+src/server/routes/git.ts
+```
+
+### Git Service
+```typescript
+import simpleGit from 'simple-git';
+
+class GitService {
+  // Status
+  async status(projectPath: string): Promise<GitStatus>
+  async diff(projectPath: string, ref1?: string, ref2?: string): Promise<string> // unified diff
+  async fileDiff(projectPath: string, filePath: string): Promise<string>
+
+  // Staging
+  async stage(projectPath: string, files: string[]): Promise<void>
+  async unstage(projectPath: string, files: string[]): Promise<void>
+
+  // Commit + Push/Pull
+  async commit(projectPath: string, message: string): Promise<string> // returns hash
+  async push(projectPath: string, remote?: string, branch?: string): Promise<void>
+  async pull(projectPath: string, remote?: string, branch?: string): Promise<void>
+
+  // Branch ops
+  async branches(projectPath: string): Promise<GitBranch[]>
+  async createBranch(projectPath: string, name: string, from?: string): Promise<void>
+  async checkout(projectPath: string, ref: string): Promise<void>
+  async deleteBranch(projectPath: string, name: string, force?: boolean): Promise<void>
+  async merge(projectPath: string, source: string): Promise<void>
+
+  // Graph data
+  async graphData(projectPath: string, maxCount?: number): Promise<GitGraphData>
+
+  // Advanced (web-only, no CLI needed)
+  async cherryPick(projectPath: string, hash: string): Promise<void>
+  async revert(projectPath: string, hash: string): Promise<void>
+  async createTag(projectPath: string, name: string, hash?: string): Promise<void>
+
+  // PR URL
+  getCreatePrUrl(projectPath: string, branch: string): string | null
+  // Parse remote URL → GitHub/GitLab PR creation URL
+}
+```
+
+### Graph Data Extraction
+
+**[V2 FIX]** Do NOT parse `git log --format` manually with newline separators. Use simple-git's built-in `.log()` which returns correctly typed `LogResult`:
+
+```typescript
+async graphData(projectPath: string, maxCount = 200): Promise<GitGraphData> {
+  const git = simpleGit(projectPath);
+
+  // Use simple-git's built-in log() — handles parsing correctly
+  const log = await git.log({
+    '--all': null,
+    maxCount,
+  });
+
+  // log.all is already typed: { hash, date, message, author_name, author_email, refs, body, diff? }[]
+  const commits: GitCommit[] = log.all.map(c => ({
+    hash: c.hash,
+    abbreviatedHash: c.hash.slice(0, 7),
+    subject: c.message,
+    body: c.body,
+    authorName: c.author_name,
+    authorEmail: c.author_email,
+    authorDate: c.date,
+    parents: [], // Need separate call or parse refs
+    refs: c.refs ? c.refs.split(', ').filter(Boolean) : [],
+  }));
+
+  // Get parent hashes via raw format (safe: one field per line)
+  const parentLog = await git.raw([
+    'log', '--all', `--max-count=${maxCount}`,
+    '--format=%H %P'  // hash + space-separated parents on ONE line
+  ]);
+  const parentMap = new Map<string, string[]>();
+  for (const line of parentLog.trim().split('\n')) {
+    const [hash, ...parents] = line.split(' ');
+    if (hash) parentMap.set(hash, parents.filter(Boolean));
+  }
+  for (const c of commits) {
+    c.parents = parentMap.get(c.hash) ?? [];
+  }
+
+  const branchSummary = await git.branch(['-a', '--no-color']);
+  const branches: GitBranch[] = Object.entries(branchSummary.branches).map(([name, info]) => ({
+    name,
+    current: info.current,
+    remote: name.startsWith('remotes/'),
+    commitHash: info.commit,
+    ahead: 0,
+    behind: 0,
+  }));
+
+  return { commits, branches };
+}
+```
+
+### Lane Allocation Algorithm
+Port from vscode-git-graph `web/graph.ts`:
+- Each branch gets a lane (column index)
+- Merge/fork lines connect lanes
+- Color = `laneIndex % colorPalette.length`
+- Return: `Map<commitHash, { lane: number, lines: Line[] }>`
+
+### API Routes
+```
+GET  /api/git/status/:project
+GET  /api/git/diff/:project?ref1=&ref2=
+GET  /api/git/file-diff/:project?file=&ref=
+GET  /api/git/graph/:project?max=500
+GET  /api/git/branches/:project
+POST /api/git/stage             { project, files }
+POST /api/git/unstage           { project, files }
+POST /api/git/commit            { project, message }
+POST /api/git/push              { project, remote?, branch? }
+POST /api/git/pull              { project, remote?, branch? }
+POST /api/git/branch/create     { project, name, from? }
+POST /api/git/checkout          { project, ref }
+POST /api/git/branch/delete     { project, name, force? }
+POST /api/git/merge             { project, source }
+POST /api/git/cherry-pick       { project, hash }
+POST /api/git/revert            { project, hash }
+POST /api/git/tag               { project, name, hash? }
+GET  /api/git/pr-url/:project?branch=  → { url }
+```
+
+## Frontend (frontend-dev)
+
+### Files
+```
+src/web/components/git/git-graph.tsx
+src/web/components/git/git-graph-renderer.tsx
+src/web/components/git/git-status-panel.tsx
+src/web/components/git/git-diff-tab.tsx
+src/web/components/git/commit-context-menu.tsx
+src/web/lib/git-graph-layout.ts
+```
+
+### Git Status Panel
+- Split into: Changes (unstaged) + Staged Changes
+- Each file: icon (M/A/D/R), filename, click → open diff
+- Buttons: Stage All, Unstage All
+- Individual file: click +/- to stage/unstage
+- Commit section: textarea input + "Commit" button
+- Push/Pull buttons with branch name display
+- Auto-refresh via WS `/ws/events` or polling
+
+### Git Graph (SVG)
+```typescript
+// git-graph-renderer.tsx
+// Receives: commits + lanes from backend API
+
+const GitGraphRenderer = ({ data }: { data: GitGraphData }) => {
+  // SVG element with:
+  // 1. Branch lines: <path> elements, curved or angular
+  // 2. Commit nodes: <circle> elements
+  // 3. Labels: branch names, tags as badges
+  // 4. Click handlers on commits → expand details
+  // 5. Context menu on commits and branches
+
+  // Virtualization: only render visible rows
+  // Each commit row height = GRID_Y (e.g., 24px)
+  // Scroll container with virtual list
+};
+```
+
+### Git Graph Context Menu (shadcn/ui ContextMenu)
+**On commit node:**
+- Checkout this commit
+- Create branch here...
+- Cherry pick
+- Revert
+- Create tag...
+- Copy commit hash
+- View diff
+
+**On branch label:**
+- Checkout
+- Merge into current branch
+- Delete branch
+- Rename branch
+- Push
+- Pull
+- Rebase onto current
+- Create Pull Request → opens browser URL
+
+### Git Diff Tab
+- Reuse `@codemirror/merge` diff viewer from Phase 4
+- Opened from: git status (click file), git graph (view diff), file explorer (compare)
+- Header: file path, ref1 vs ref2
+
+## Success Criteria
+
+**Git Status Panel:**
+- [ ] Shows two sections: "Changes" (unstaged) and "Staged Changes" with file counts
+- [ ] Each file shows status icon (M=modified, A=added, D=deleted, R=renamed) + filename
+- [ ] Click file in either section → opens diff view in new tab
+- [ ] Click "+" on unstaged file → stages it (moves to Staged section)
+- [ ] Click "−" on staged file → unstages it (moves to Changes section)
+- [ ] "Stage All" button stages all changed files
+- [ ] "Unstage All" button unstages all staged files
+- [ ] Commit section: textarea for message + "Commit" button
+- [ ] Commit with empty message → button disabled / shows warning
+- [ ] Commit with nothing staged → shows "Nothing to commit" message
+- [ ] After successful commit → status panel refreshes, staged files clear
+- [ ] Push/Pull buttons show current branch name, disabled when no remote
+
+**Git Graph:**
+- [ ] Renders commit history as SVG with colored branch lanes
+- [ ] Each commit: circle node + abbreviated hash + subject + author + relative date
+- [ ] Branch labels rendered as colored badges on corresponding commits
+- [ ] Merge commits show lines connecting from parent lanes
+- [ ] Scroll through 200+ commits without performance issues (virtualized rendering)
+- [ ] Right-click commit → context menu: Checkout, Create branch, Cherry pick, Revert, Create tag, Copy hash, View diff
+- [ ] Right-click branch label → context menu: Checkout, Merge into current, Delete, Push, Create PR
+- [ ] "Create PR" → opens correct GitHub/GitLab URL (parsed from remote) in new browser tab
+
+**Git Diff:**
+- [ ] Diff tab shows file path + refs in header
+- [ ] Side-by-side diff using `@codemirror/merge` with syntax highlighting
+- [ ] Added lines highlighted green, removed lines highlighted red
+- [ ] Opened from: git status (click file), git graph (view diff), file explorer (compare)
+
+**Mobile:**
+- [ ] Git graph scrollable horizontally and vertically with touch
+- [ ] Context menu appears on long-press (commit node or branch label)
+- [ ] Status panel: swipe file row to stage/unstage (nice-to-have, buttons work as fallback)

package/plans/260314-2009-ppm-implementation/phase-07-ai-chat.md

@@ -0,0 +1,242 @@
+# Phase 7: AI Chat
+
+**Owner:** backend-dev (provider + WS) + frontend-dev (chat UI) — parallel
+**Priority:** High
+**Depends on:** Phase 2, Phase 3
+**Effort:** Large
+
+## Overview
+
+AI chat with Claude Agent SDK as first provider. Generic AIProvider interface for multi-provider support. Chat UI with streaming, tool approvals, session management.
+
+## Backend (backend-dev)
+
+### Files
+```
+src/providers/provider.interface.ts    # Already in types, implement here
+src/providers/claude-agent-sdk.ts
+src/providers/cli-subprocess.ts        # Stub for future
+src/providers/registry.ts
+src/services/chat.service.ts
+src/server/ws/chat.ts
+```
+
+### Claude Agent SDK Provider
+```typescript
+import { query, listSessions, getSessionMessages } from '@anthropic-ai/claude-agent-sdk';
+
+class ClaudeAgentSdkProvider implements AIProvider {
+  id = 'claude';
+  name = 'Claude Code';
+
+  async createSession(config: SessionConfig): Promise<Session> {
+    // Start a new query() — capture session_id from init message
+    // Return session handle
+  }
+
+  async resumeSession(sessionId: string): Promise<Session> {
+    // Use { resume: sessionId } option
+  }
+
+  async *sendMessage(sessionId: string, message: string): AsyncIterable<ChatEvent> {
+    const options = sessionId
+      ? { resume: sessionId, allowedTools: [...] }
+      : { allowedTools: [...] };
+
+    for await (const msg of query({ prompt: message, options })) {
+      // Map SDK messages → ChatEvent types
+      if (msg.type === 'assistant') {
+        for (const block of msg.content) {
+          if (block.type === 'text') yield { type: 'text', content: block.text };
+          if (block.type === 'tool_use') yield { type: 'tool_use', tool: block.name, input: block.input };
+        }
+      }
+      if (msg.type === 'result') {
+        yield { type: 'done', sessionId: msg.session_id };
+      }
+    }
+  }
+
+  async listSessions(): Promise<SessionInfo[]> {
+    return await listSessions();
+  }
+
+  async deleteSession(sessionId: string): Promise<void> {
+    // Delete session file from ~/.claude/projects/...
+  }
+}
+```
+
+### Tool Approval Flow
+```typescript
+// In claude-agent-sdk.ts
+// canUseTool callback → forward to frontend via WS
+
+const options = {
+  canUseTool: async (toolName: string, input: any) => {
+    // Send approval request to frontend via WS
+    const response = await this.requestApproval(sessionId, toolName, input);
+    if (response.approved) {
+      return { behavior: 'allow', updatedInput: input };
+    }
+    return { behavior: 'deny', message: response.reason || 'User denied' };
+  }
+};
+```
+
+### Provider Registry
+```typescript
+class ProviderRegistry {
+  private providers: Map<string, AIProvider> = new Map();
+
+  register(provider: AIProvider): void
+  get(id: string): AIProvider | undefined
+  list(): AIProviderInfo[]
+  getDefault(): AIProvider
+}
+```
+
+### Chat Service
+```typescript
+class ChatService {
+  constructor(private registry: ProviderRegistry)
+
+  async createSession(providerId: string, config: SessionConfig): Promise<Session>
+  async resumeSession(providerId: string, sessionId: string): Promise<Session>
+  async listSessions(providerId?: string): Promise<SessionInfo[]>
+  async deleteSession(providerId: string, sessionId: string): Promise<void>
+  sendMessage(providerId: string, sessionId: string, message: string): AsyncIterable<ChatEvent>
+}
+```
+
+### WebSocket Handler
+```
+WS /ws/chat/:sessionId
+```
+
+Protocol (JSON messages):
+```typescript
+// Client → Server
+{ type: 'message', content: string }
+{ type: 'approval_response', requestId: string, approved: boolean, reason?: string }
+
+// Server → Client
+{ type: 'text', content: string }
+{ type: 'tool_use', tool: string, input: any }
+{ type: 'tool_result', output: string }
+{ type: 'approval_request', requestId: string, tool: string, input: any }
+{ type: 'done', sessionId: string }
+{ type: 'error', message: string }
+```
+
+## Frontend (frontend-dev)
+
+### Files
+```
+src/web/components/chat/chat-tab.tsx
+src/web/components/chat/message-list.tsx
+src/web/components/chat/message-input.tsx
+src/web/components/chat/tool-approval.tsx
+src/web/components/chat/session-picker.tsx
+src/web/hooks/use-chat.ts
+```
+
+### Chat Tab Layout
+```
+┌─────────────────────────────────┐
+│ Claude Code  ▼  [Session: abc]  │  ← provider picker + session info
+├─────────────────────────────────┤
+│                                 │
+│  User: Fix the bug in auth.ts   │
+│                                 │
+│  Claude: I'll read the file...  │
+│  📄 Read auth.ts                │
+│  ✅ Tool result: (content)      │
+│                                 │
+│  ⚠️ Bash: rm -rf /tmp/test     │
+│  [Allow] [Deny]                 │  ← tool approval dialog
+│                                 │
+├─────────────────────────────────┤
+│ 📎  Type a message...    [Send] │  ← input with file attach
+└─────────────────────────────────┘
+```
+
+### Message Types Rendering
+- **User message:** Right-aligned bubble (or left with avatar)
+- **Assistant text:** Markdown rendered (code blocks with syntax highlight)
+- **Tool use:** Collapsible card showing tool name + input
+- **Tool result:** Collapsible card showing output (truncated)
+- **Approval request:** Highlighted card with Allow/Deny buttons + tool details
+- **Error:** Red alert banner
+
+### Session Picker
+- Dropdown or modal listing all sessions
+- Each session: provider icon, title (first message truncated), timestamp
+- Actions: Resume, Delete, Fork (nice-to-have)
+- "New Chat" button → create fresh session
+
+### useChat Hook
+```typescript
+const useChat = (sessionId?: string) => {
+  const ws = useWebSocket(`/ws/chat/${sessionId}`);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [pendingApproval, setPendingApproval] = useState<ApprovalRequest | null>(null);
+
+  const sendMessage = (content: string) => {
+    ws.send(JSON.stringify({ type: 'message', content }));
+  };
+
+  const respondToApproval = (requestId: string, approved: boolean) => {
+    ws.send(JSON.stringify({ type: 'approval_response', requestId, approved }));
+  };
+
+  return { messages, isStreaming, pendingApproval, sendMessage, respondToApproval };
+};
+```
+
+### Mobile Considerations
+- Chat input: sticky bottom, auto-resize textarea
+- Long messages: scrollable code blocks
+- Tool approval: full-width card, large touch targets for Allow/Deny
+- Keyboard: input should push content up, not cover it
+
+## Chat History & Reconnect
+
+### REST API for Message History
+- `GET /api/chat/sessions` → list all sessions (id, provider, title, createdAt)
+- `GET /api/chat/sessions/:id/messages` → full message history for a session
+- On WS reconnect: client loads history via REST, then subscribes to live stream
+- This avoids WS replay complexity — REST is simpler and more reliable
+
+### Reconnect Flow
+```
+Client disconnects
+  → WS closes
+  → Client: exponential backoff reconnect
+  → Client reconnects to same sessionId
+  → Client: GET /api/chat/sessions/:id/messages → render history
+  → Server: resume streaming from where it left off (if AI still generating)
+```
+
+### Session Persistence
+- Claude Agent SDK sessions persist automatically (stored in ~/.claude/)
+- PPM stores session metadata in `~/.ppm/chat-sessions.json`: id, provider, title, projectName, createdAt
+- Session list fetched from PPM metadata file (fast), not from SDK (slow)
+
+## Success Criteria
+
+- [ ] Can create new chat session → WS connects, session appears in session list
+- [ ] Sending message streams AI response text in real-time (character by character)
+- [ ] Tool use blocks render with tool name + collapsible input JSON
+- [ ] Tool result blocks render with collapsible output
+- [ ] Tool approval dialog: shows tool name + input, Allow/Deny buttons work, response sent via WS
+- [ ] After Allow → tool executes and result streams back; after Deny → AI acknowledges denial
+- [ ] Can resume existing session: select from picker → loads history via REST → WS reconnects
+- [ ] Session list shows all sessions with provider icon, truncated title, timestamp
+- [ ] "New Chat" button creates fresh session with current project context
+- [ ] Multiple chat tabs work simultaneously (each with own WS connection)
+- [ ] WS disconnect → reconnect → message history loaded from REST API
+- [ ] Works on mobile: sticky bottom input, keyboard pushes content up, large Allow/Deny buttons
+- [ ] Markdown rendering in AI messages: code blocks with syntax highlighting, lists, headers
+- [ ] Error messages from AI/server shown as red alert banner (not silent failure)