feat: add Agent Internal Monologue Visualizer

Real-time UI component for watching the agent's thinking process:
- New /monologue route with page, JSON API, and WebSocket endpoint
- Live thought streaming via WebSocket with automatic reconnection
- Raw/Summarized view toggle for thought content
- Monospace terminal-style display with Mission Control theme
- Seed-type color-coded badges (existential, creative, sovereignty, etc.)
- Auto-scroll with manual override, connection status indicator
- Mobile-responsive layout
- 10 unit tests covering page, API, and summarise helper

Fixes #1005

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

static/css/mission-control.css

@@ -2547,3 +2547,73 @@
 .tower-adv-title { font-size: 0.85rem; font-weight: 600; color: var(--text-bright); }
 .tower-adv-detail { font-size: 0.8rem; color: var(--text); margin-top: 2px; }
 .tower-adv-action { font-size: 0.75rem; color: var(--green); margin-top: 4px; font-style: italic; }
+
+/* ── Internal Monologue Visualizer ────────────────────────── */
+
+.monologue-container { max-width: 960px; }
+.monologue-title { font-size: 1.6rem; font-weight: 700; color: var(--text-bright); letter-spacing: 0.04em; }
+.monologue-subtitle { font-size: 0.85rem; color: var(--text-dim); margin-top: 2px; }
+
+/* Controls bar */
+.monologue-controls { flex-wrap: wrap; }
+.monologue-btn { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; border: 1px solid var(--border); color: var(--text-dim); background: transparent; padding: 3px 10px; transition: all 0.2s ease; }
+.monologue-btn:hover { color: var(--text); border-color: var(--purple); }
+.monologue-btn.active { color: var(--purple); border-color: var(--purple); background: rgba(168, 85, 247, 0.08); }
+.monologue-count-badge { background: rgba(168, 85, 247, 0.15); color: var(--purple); font-size: 0.7rem; letter-spacing: 0.06em; }
+
+/* Status indicator */
+.monologue-status { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.06em; }
+.monologue-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); transition: background 0.3s ease; }
+.monologue-dot-connected { background: var(--green); box-shadow: 0 0 6px var(--green); animation: monologue-pulse 2s ease-in-out infinite; }
+.monologue-dot-connecting { background: var(--amber); animation: monologue-pulse 1s ease-in-out infinite; }
+.monologue-dot-disconnected { background: var(--red); }
+
+@keyframes monologue-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* Stream container */
+.monologue-stream { max-height: 70vh; overflow-y: auto; padding: 0; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; line-height: 1.6; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
+.monologue-stream::-webkit-scrollbar { width: 6px; }
+.monologue-stream::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+.monologue-stream::-webkit-scrollbar-track { background: transparent; }
+
+/* Individual thought entry */
+.monologue-entry { display: flex; gap: 12px; padding: 8px 14px; border-bottom: 1px solid rgba(59, 26, 92, 0.3); transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s ease; }
+.monologue-entry:hover { background: rgba(168, 85, 247, 0.04); }
+.monologue-entry-new { opacity: 0; transform: translateY(8px); }
+
+/* Gutter (timestamp + seed badge) */
+.monologue-entry-gutter { display: flex; flex-direction: column; align-items: flex-end; min-width: 90px; flex-shrink: 0; gap: 2px; padding-top: 1px; }
+.monologue-timestamp { font-size: 0.65rem; color: var(--text-dim); letter-spacing: 0.04em; }
+.monologue-seed { font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 5px; border-radius: 2px; color: var(--text-dim); background: rgba(59, 26, 92, 0.3); }
+
+/* Seed-type colour accents */
+.seed-existential { color: var(--purple); background: rgba(168, 85, 247, 0.12); }
+.seed-swarm { color: var(--green); background: rgba(0, 232, 122, 0.10); }
+.seed-scripture { color: var(--amber); background: rgba(255, 184, 0, 0.10); }
+.seed-creative { color: var(--orange); background: rgba(255, 122, 42, 0.10); }
+.seed-memory { color: #60a5fa; background: rgba(96, 165, 250, 0.10); }
+.seed-freeform { color: var(--text-dim); background: rgba(59, 26, 92, 0.3); }
+.seed-sovereignty { color: var(--red); background: rgba(255, 68, 85, 0.08); }
+.seed-observation { color: var(--green); background: rgba(0, 232, 122, 0.08); }
+.seed-workspace { color: var(--amber); background: rgba(255, 184, 0, 0.08); }
+.seed-prompted { color: var(--text-bright); background: rgba(237, 224, 255, 0.08); }
+
+/* Content area */
+.monologue-entry-content { flex: 1; color: var(--text); word-break: break-word; }
+.monologue-summary { color: var(--text-dim); font-style: italic; }
+
+/* Empty state */
+.monologue-empty { padding: 40px 20px; text-align: center; color: var(--text-dim); font-size: 0.85rem; }
+
+/* Scroll button */
+.monologue-scroll-btn.active { color: var(--green); border-color: var(--green); background: rgba(0, 232, 122, 0.08); }
+
+/* Mobile adjustments */
+@media (max-width: 576px) {
+  .monologue-entry { flex-direction: column; gap: 4px; }
+  .monologue-entry-gutter { flex-direction: row; align-items: center; min-width: auto; gap: 8px; }
+  .monologue-stream { max-height: 60vh; font-size: 0.75rem; }
+}