Browser → Konui → Konsole Session Flow

Details

Raw Data

{
  "id": "e55b4e91-f2fc-43f6-b6a0-fde1b270d814",
  "type": "general",
  "status": "completed",
  "title": "Browser → Konui → Konsole Session Flow",
  "description": "Explains how the browser talks to konui which proxies to konsole",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:'Consolas','Monaco',monospace;\">\n<h2 style=\"font-family:sans-serif;color:#fff;margin:0 0 16px 0;\">Session Flow: Browser → Konui → Konsole</h2>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#98c379;margin:0 0 12px 0;\">Answer: Konui IS the proxy</h3>\n<p style=\"margin:0;line-height:1.6;\">The browser <strong>does not</strong> go directly to Konsole. Konui acts as a <strong>reverse proxy</strong>, forwarding requests from the dashboard to Konsole on port 8020.</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#61afef;margin:0 0 12px 0;\">Request Flow Diagram</h3>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:4px;overflow-x:auto;margin:0;line-height:1.6;\">\n<span style=\"color:#e5c07b;\">Browser</span>\n   │\n   │ <span style=\"color:#7f848e;\">POST /api/konsole/dashboard/stream</span>\n   ▼\n<span style=\"color:#98c379;\">Konui</span> <span style=\"color:#7f848e;\">(port 8666)</span>\n   │\n   │ <span style=\"color:#7f848e;\">1. getOrCreateSession() - checks konsole-session-id.txt</span>\n   │ <span style=\"color:#7f848e;\">2. POST /sessions/{id}/prompt to Konsole</span>\n   ▼\n<span style=\"color:#c678dd;\">Konsole</span> <span style=\"color:#7f848e;\">(port 8020)</span>\n   │\n   │ <span style=\"color:#7f848e;\">3. spawn(\"claude\", ...)</span>\n   ▼\n<span style=\"color:#56b6c2;\">Claude CLI</span> → <span style=\"color:#e5c07b;\">Anthropic API</span>\n</pre>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#e5c07b;margin:0 0 12px 0;\">Why Konui in the Middle?</h3>\n<ul style=\"margin:0;padding-left:20px;line-height:1.8;\">\n<li><strong>Authentication:</strong> Konui validates session tokens before forwarding</li>\n<li><strong>Session persistence:</strong> Stores session ID in <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">konsole-session-id.txt</code></li>\n<li><strong>Request tracking:</strong> Injects <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">dashboardRequestId</code> for kontask matching</li>\n<li><strong>SSE forwarding:</strong> Proxies the SSE stream to client</li>\n<li><strong>Image handling:</strong> Uploads images to temp files before sending</li>\n</ul>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#c678dd;margin:0 0 12px 0;\">Key Files</h3>\n<table style=\"width:100%;border-collapse:collapse;\">\n<tr style=\"border-bottom:1px solid #3d3d3d;\">\n<td style=\"padding:8px 0;\"><code style=\"color:#98c379;\">console-streaming.ts</code></td>\n<td style=\"padding:8px 0;color:#9ca3af;\">Browser-side: sends to <code>/api/konsole/...</code></td>\n</tr>\n<tr style=\"border-bottom:1px solid #3d3d3d;\">\n<td style=\"padding:8px 0;\"><code style=\"color:#61afef;\">konsole-client.ts</code></td>\n<td style=\"padding:8px 0;color:#9ca3af;\">Konui: talks to Konsole on 127.0.0.1:8020</td>\n</tr>\n<tr style=\"border-bottom:1px solid #3d3d3d;\">\n<td style=\"padding:8px 0;\"><code style=\"color:#c678dd;\">router.ts</code></td>\n<td style=\"padding:8px 0;color:#9ca3af;\">Konui: <code>/api/konsole/*</code> route handlers</td>\n</tr>\n<tr>\n<td style=\"padding:8px 0;\"><code style=\"color:#56b6c2;\">main.ts</code></td>\n<td style=\"padding:8px 0;color:#9ca3af;\">Konsole: HTTP → Claude subprocess</td>\n</tr>\n</table>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\">\n<h3 style=\"color:#fff;margin:0 0 12px 0;\">Code Snippet: <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">konsole-client.ts:9</code></h3>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:4px;overflow-x:auto;margin:0;font-size:0.9em;\">\n<span style=\"color:#c678dd;\">const</span> KONSOLE_URL = <span style=\"color:#98c379;\">\"http://127.0.0.1:8020\"</span>;  <span style=\"color:#7f848e;\">// Internal only</span>\n</pre>\n<p style=\"margin:12px 0 0 0;color:#9ca3af;font-size:0.9em;\">Konsole is NOT exposed externally - only Konui can reach it.</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-top:16px;font-family:sans-serif;\">\n<h4 style=\"margin:0 0 8px 0;color:#fff;\">What's Next?</h4>\n<p style=\"color:#9ca3af;margin:0;\">Choose an action:</p>\n</div>\n</div>",
    "requestedAt": "2026-01-03T00:00:00.000Z",
    "requestId": "f946975c-e030-49ca-9ec1-96900be16f4f",
    "choices": [
      {
        "label": "Show router handlers",
        "value": "Show me the /api/konsole/* route handlers in konui router.ts",
        "primary": true
      },
      {
        "label": "Session persistence",
        "value": "How does session persistence work between page refreshes?"
      },
      {
        "label": "Full architecture",
        "value": "Show me a complete architecture diagram of all konui/konsole components"
      }
    ]
  },
  "createdBy": "claude",
  "createdAt": "2026-01-03T02:33:08.320Z",
  "updatedAt": "2026-01-03T02:33:08.474Z",
  "requestId": "f946975c-e030-49ca-9ec1-96900be16f4f",
  "scope": "vibetools",
  "tags": [
    "konsole",
    "konui",
    "architecture",
    "console"
  ],
  "targetUser": "claude"
}