feat(mcp): integrate recommended MCPs, spawn-sub-agent composer, files-touched chips

[4Gaige]

Summary

Phase 6 delivers Dispatch's MCP integration layer. On boot we register two recommended MCP servers (unless the user dismisses them), expose Settings toggles to manage them, add a "Spawn sub-agent" button to the chat composer, and decorate sidebar session rows with a "files touched" chip row derived from session transcripts. Also hardens the upstream-sync workflow so it works on a freshly-forked repo.

Changes

New files

• server/routes/mcp-bootstrap.js — ensureRecommendedMCPs self-executes on import, writes ~/.claude.json additively (never overwrites on parse errors), tracks user dismissals in ~/.claude/dispatch-recommended-mcps.json. HTTP endpoints:
  • GET /api/mcp-bootstrap/recommended — list with install/dismiss status
  • POST /api/mcp-bootstrap/recommended/:name/toggle — enable/disable, atomic write
  • POST /api/mcp-bootstrap/spawn-sub-agent — SSE stream of a claude -p ... subprocess; kills child on client abort
  • GET /api/mcp-bootstrap/session-files-touched/:projectName/:sessionId — derives top tool-use files from the Claude session JSONL; rejects .., slashes, null bytes and validates the resolved path stays inside ~/.claude/projects
• src/components/chat/view/subcomponents/SpawnSubAgentButton.tsx — composer icon button + mobile-first modal with agent-type chips, prompt textarea, live output pane, copy-to-input hook
• src/components/settings/view/tabs/RecommendedMCPsTab.tsx — toggleable tile list using Midnight ds-tile/ds-chip classes; 44×52 switch meets touch-target minimum
• src/components/sidebar/view/subcomponents/SessionFilesTouchedChips.tsx — IntersectionObserver-deferred fetch, 60s in-memory cache, lavender chips beneath each session row

Touched files (wrapper-style)

• server/index.js — one import + one app.use('/api/mcp-bootstrap', …) (the phase brief's "single require" pattern matched to the existing sibling-route style)
• src/components/chat/view/subcomponents/ChatComposer.tsx — one import + <SpawnSubAgentButton /> inside the existing <PromptInputTools> cluster
• src/components/sidebar/view/subcomponents/SidebarProjectSessions.tsx — wrap each existing <SidebarSessionItem> with the chip row (SidebarProjectItem is untouched per the golden rule)
• Settings plumbing: types.ts, SettingsSidebar.tsx, SettingsMainTabs.tsx, Settings.tsx all get the new mcp tab; SettingsSidebar/SettingsMainTabs use t(key, { defaultValue }) so missing locale keys do not show mainTabs.mcp raw
• src/i18n/locales/en/settings.json — adds "mcp": "MCP"
• .github/workflows/sync-upstream.yml — adds a "create upstream-sync branch if missing" step so the workflow no longer fails on first dispatch

Verification

• npm run build — passes (Vite + tsc-alias, no TS errors)
• npm run typecheck — passes
• npm run lint — 0 errors (warnings pre-existing in the codebase; no new rule violations)
• Raw Tailwind color grep on the diff — no matches
• gh workflow run sync-upstream.yml — run 24818956668 completes green
• ~/.claude.json bootstrap verified by module-level side-effect + idempotency test (additive, respects dismissals)

Test plan

• Open Settings → MCP tab; confirm both entries appear with installed/dismissed chips
• Toggle codebase-memory-mcp off → confirm it disappears from ~/.claude.json; restart and confirm bootstrap doesn't re-add it
• Toggle it back on → confirm it re-registers
• Click ✨ in the composer → modal opens; submit with a short prompt → confirm output streams in
• Close modal while running → confirm the claude subprocess is killed
• Expand a project in the sidebar → confirm lavender "files touched" chips appear under sessions with tool-use history
• Try curl /api/mcp-bootstrap/session-files-touched/..%2F..%2Fetc/passwd — expect 400
• On mobile (375×812), confirm toggle switches and the Spawn modal are usable with touch targets ≥44px

🤖 Generated with Claude Code