← Back to Kontasks

Why Dashboard Console Uses Inline Script

Explaining the inline script architecture and why it's necessary

✓ Completed
on 2 Jan 2026, 8:41 pm

Output

Why the Inline Script?

What It Is

generateConsoleScript() returns a ~2700-line <script> tag as a template string. This JavaScript runs in the browser to power the dashboard console.

What It Does

  • State machine - Connection states (idle→streaming→working→polling)
  • SSE/EventSource - Real-time streaming from konsole
  • DOM manipulation - Append output, show spinners, update status bar
  • History persistence - Save/restore chat history from localStorage
  • Recovery logic - Poll for kontask output after disconnect
  • Renderers - Format diffs, file lists, search results, todo lists
  • Image attachments - Handle file upload and preview

Why Inline? (Deno/Hono Architecture)

Konui is a Deno server using Hono framework. There's no frontend build step (no Vite, no webpack).

Server renders HTMLRoutes return HTML strings directly
No bundlerCan't import .ts files in browser
SSR patternScript embedded in HTML response
No static assetsEverything in one request (fast)

The Tradeoff

✓ SimpleNo build tools, no bundler config, instant deploys
✓ FastSingle HTTP request, no waterfall loading
✗ TestingCan't unit test inline functions (Deno can't import them)
✗ IDE supportTemplate string = no TypeScript checking inside

Alternatives (Future)

If we wanted to extract it: (1) Add esbuild/Vite for browser bundle, or (2) Serve as /static/console.js and use ES modules. Neither is urgent - current approach works fine for a single-page app.

Quick Actions

Original Request

No layout configured

Details

Type General
Status Completed
Scope vibetools
Tags consolearchitecture
Created 2 Jan 2026, 8:41 pm
Updated 2 Jan 2026, 8:41 pm
Created By claude

Raw Data

{
  "id": "2a6247f7-2c35-4941-9110-e4a510c6bd39",
  "type": "general",
  "status": "completed",
  "title": "Why Dashboard Console Uses Inline Script",
  "description": "Explaining the inline script architecture and why it's necessary",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:'Consolas','Monaco',monospace;\"><h2 style=\"font-family:sans-serif;color:#fff;margin:0 0 16px 0;\">Why the Inline Script?</h2><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#61afef;\">What It Is</h4><p style=\"color:#e0e0e0;margin:0;\"><code>generateConsoleScript()</code> returns a ~2700-line <code>&lt;script&gt;</code> tag as a template string. This JavaScript runs in the browser to power the dashboard console.</p></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#e5c07b;\">What It Does</h4><ul style=\"margin:0;padding-left:20px;color:#e0e0e0;line-height:1.8;\"><li><strong>State machine</strong> - Connection states (idle→streaming→working→polling)</li><li><strong>SSE/EventSource</strong> - Real-time streaming from konsole</li><li><strong>DOM manipulation</strong> - Append output, show spinners, update status bar</li><li><strong>History persistence</strong> - Save/restore chat history from localStorage</li><li><strong>Recovery logic</strong> - Poll for kontask output after disconnect</li><li><strong>Renderers</strong> - Format diffs, file lists, search results, todo lists</li><li><strong>Image attachments</strong> - Handle file upload and preview</li></ul></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#f97316;\">Why Inline? (Deno/Hono Architecture)</h4><p style=\"color:#e0e0e0;margin:0 0 12px 0;\">Konui is a <strong>Deno server</strong> using Hono framework. There's no frontend build step (no Vite, no webpack).</p><table style=\"width:100%;border-collapse:collapse;\"><tr><td style=\"padding:8px 12px;color:#98c379;border-bottom:1px solid #444;width:140px;\">Server renders HTML</td><td style=\"padding:8px 12px;color:#e0e0e0;border-bottom:1px solid #444;\">Routes return HTML strings directly</td></tr><tr><td style=\"padding:8px 12px;color:#98c379;border-bottom:1px solid #444;\">No bundler</td><td style=\"padding:8px 12px;color:#e0e0e0;border-bottom:1px solid #444;\">Can't import .ts files in browser</td></tr><tr><td style=\"padding:8px 12px;color:#98c379;border-bottom:1px solid #444;\">SSR pattern</td><td style=\"padding:8px 12px;color:#e0e0e0;border-bottom:1px solid #444;\">Script embedded in HTML response</td></tr><tr><td style=\"padding:8px 12px;color:#98c379;\">No static assets</td><td style=\"padding:8px 12px;color:#e0e0e0;\">Everything in one request (fast)</td></tr></table></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#c678dd;\">The Tradeoff</h4><table style=\"width:100%;border-collapse:collapse;\"><tr><td style=\"padding:8px 12px;color:#98c379;border-bottom:1px solid #444;\">✓ Simple</td><td style=\"padding:8px 12px;color:#e0e0e0;border-bottom:1px solid #444;\">No build tools, no bundler config, instant deploys</td></tr><tr><td style=\"padding:8px 12px;color:#98c379;border-bottom:1px solid #444;\">✓ Fast</td><td style=\"padding:8px 12px;color:#e0e0e0;border-bottom:1px solid #444;\">Single HTTP request, no waterfall loading</td></tr><tr><td style=\"padding:8px 12px;color:#f97316;border-bottom:1px solid #444;\">✗ Testing</td><td style=\"padding:8px 12px;color:#e0e0e0;border-bottom:1px solid #444;\">Can't unit test inline functions (Deno can't import them)</td></tr><tr><td style=\"padding:8px 12px;color:#f97316;\">✗ IDE support</td><td style=\"padding:8px 12px;color:#e0e0e0;\">Template string = no TypeScript checking inside</td></tr></table></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\"><h4 style=\"margin:0 0 8px 0;color:#fff;\">Alternatives (Future)</h4><p style=\"color:#9ca3af;margin:0;\">If we wanted to extract it: (1) Add esbuild/Vite for browser bundle, or (2) Serve as <code>/static/console.js</code> and use ES modules. Neither is urgent - current approach works fine for a single-page app.</p></div></div>",
    "requestedAt": "2026-01-02T10:50:00Z",
    "requestId": "9ae87d37-f74c-43ad-a72e-0846044ab398"
  },
  "createdBy": "claude",
  "createdAt": "2026-01-02T10:41:33.052Z",
  "updatedAt": "2026-01-02T10:41:33.191Z",
  "requestId": "9ae87d37-f74c-43ad-a72e-0846044ab398",
  "scope": "vibetools",
  "tags": [
    "console",
    "architecture"
  ],
  "targetUser": "claude"
}
DashboardReportsKontasksSessionsTelemetryLogs + Go