← Back to Kontasks

Dashboard Console Refactoring Plan

Proposed split to make the file safer to edit and faster for Claude to work with

✓ Completed
on 2 Jan 2026, 8:49 pm

Output

Dashboard Console Refactoring Plan

The Real Problems

  1. Claude context cost - 3124 lines = ~12k tokens just to read it
  2. Edit precision risk - One wrong edit in 2700-line template string breaks everything
  3. Compound brittleness - Each change increases risk of the next
  4. No incremental testing - Can't test pieces in isolation

Proposed Split (5 files)

FileLinesContents
console-types.ts~80Interfaces (ConsoleState, HistoryItem, etc)
console-state-machine.ts~350smTransition, dispatch, effects (already exists!)
console-renderers.ts~500Diff, file list, search results, todo list formatters
console-stream.ts~400SSE/EventSource, handleStreamEvent, reconnect
dashboard-console.ts~1200Main orchestration, DOM, history, recovery

The Inline Script Challenge

Since we can't import TypeScript in the browser, we have two options:

Option AString concatenation - Each module exports a getScriptSection() string, main file concatenates them. Keeps zero-build simplicity.
Option BStatic JS files - Serve /static/console/*.js as ES modules. More standard but adds static file serving.

Recommended: Option A (String Concat)

Each file exports its section as a function returning a string:

// console-renderers.ts
export function getRenderersScript(): string {
  return `
    function renderDiff(old, new, path) { ... }
    function renderFileList(files) { ... }
  `;
}

// dashboard-console.ts
import { getRenderersScript } from './console-renderers.ts';

export function generateConsoleScript() {
  return `<script>
    ${getRenderersScript()}
    ${getStreamScript()}
    // main orchestration...
  </script>`;
}

Want me to do this?

I can start with the safest extraction first: console-renderers.ts (pure formatting functions, no state). This gives immediate benefit with lowest risk.

Quick Actions

Original Request

No layout configured

Details

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

Raw Data

{
  "id": "e197d19d-ca6c-4bcb-87e1-290606239356",
  "type": "general",
  "status": "completed",
  "title": "Dashboard Console Refactoring Plan",
  "description": "Proposed split to make the file safer to edit and faster for Claude to work with",
  "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;\">Dashboard Console Refactoring Plan</h2><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#f97316;\">The Real Problems</h4><ol style=\"margin:0;padding-left:20px;color:#e0e0e0;line-height:1.8;\"><li><strong>Claude context cost</strong> - 3124 lines = ~12k tokens just to read it</li><li><strong>Edit precision risk</strong> - One wrong edit in 2700-line template string breaks everything</li><li><strong>Compound brittleness</strong> - Each change increases risk of the next</li><li><strong>No incremental testing</strong> - Can't test pieces in isolation</li></ol></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#98c379;\">Proposed Split (5 files)</h4><table style=\"width:100%;border-collapse:collapse;\"><tr style=\"background:#1a1a1a;\"><th style=\"padding:10px;text-align:left;color:#61afef;\">File</th><th style=\"padding:10px;text-align:left;color:#61afef;\">Lines</th><th style=\"padding:10px;text-align:left;color:#61afef;\">Contents</th></tr><tr><td style=\"padding:8px 12px;color:#e5c07b;border-bottom:1px solid #444;\">console-types.ts</td><td style=\"padding:8px 12px;color:#9ca3af;border-bottom:1px solid #444;\">~80</td><td style=\"padding:8px 12px;color:#e0e0e0;border-bottom:1px solid #444;\">Interfaces (ConsoleState, HistoryItem, etc)</td></tr><tr><td style=\"padding:8px 12px;color:#e5c07b;border-bottom:1px solid #444;\">console-state-machine.ts</td><td style=\"padding:8px 12px;color:#9ca3af;border-bottom:1px solid #444;\">~350</td><td style=\"padding:8px 12px;color:#e0e0e0;border-bottom:1px solid #444;\">smTransition, dispatch, effects (already exists!)</td></tr><tr><td style=\"padding:8px 12px;color:#e5c07b;border-bottom:1px solid #444;\">console-renderers.ts</td><td style=\"padding:8px 12px;color:#9ca3af;border-bottom:1px solid #444;\">~500</td><td style=\"padding:8px 12px;color:#e0e0e0;border-bottom:1px solid #444;\">Diff, file list, search results, todo list formatters</td></tr><tr><td style=\"padding:8px 12px;color:#e5c07b;border-bottom:1px solid #444;\">console-stream.ts</td><td style=\"padding:8px 12px;color:#9ca3af;border-bottom:1px solid #444;\">~400</td><td style=\"padding:8px 12px;color:#e0e0e0;border-bottom:1px solid #444;\">SSE/EventSource, handleStreamEvent, reconnect</td></tr><tr><td style=\"padding:8px 12px;color:#e5c07b;\">dashboard-console.ts</td><td style=\"padding:8px 12px;color:#9ca3af;\">~1200</td><td style=\"padding:8px 12px;color:#e0e0e0;\">Main orchestration, DOM, history, recovery</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 Inline Script Challenge</h4><p style=\"color:#e0e0e0;margin:0 0 8px 0;\">Since we can't import TypeScript in the browser, we have two options:</p><table style=\"width:100%;border-collapse:collapse;\"><tr><td style=\"padding:8px 12px;color:#61afef;border-bottom:1px solid #444;width:120px;\">Option A</td><td style=\"padding:8px 12px;color:#e0e0e0;border-bottom:1px solid #444;\"><strong>String concatenation</strong> - Each module exports a <code>getScriptSection()</code> string, main file concatenates them. Keeps zero-build simplicity.</td></tr><tr><td style=\"padding:8px 12px;color:#61afef;\">Option B</td><td style=\"padding:8px 12px;color:#e0e0e0;\"><strong>Static JS files</strong> - Serve <code>/static/console/*.js</code> as ES modules. More standard but adds static file serving.</td></tr></table></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#e5c07b;\">Recommended: Option A (String Concat)</h4><p style=\"color:#e0e0e0;margin:0 0 8px 0;\">Each file exports its section as a function returning a string:</p><pre style=\"background:#1e1e1e;padding:12px;border-radius:4px;overflow-x:auto;font-size:0.85rem;margin:0;line-height:1.6;\"><span style=\"color:#7f848e;\">// console-renderers.ts</span>\n<span style=\"color:#c678dd;\">export function</span> <span style=\"color:#61afef;\">getRenderersScript</span>(): <span style=\"color:#e5c07b;\">string</span> {\n  <span style=\"color:#c678dd;\">return</span> <span style=\"color:#98c379;\">`\n    function renderDiff(old, new, path) { ... }\n    function renderFileList(files) { ... }\n  `</span>;\n}\n\n<span style=\"color:#7f848e;\">// dashboard-console.ts</span>\n<span style=\"color:#c678dd;\">import</span> { getRenderersScript } <span style=\"color:#c678dd;\">from</span> <span style=\"color:#98c379;\">'./console-renderers.ts'</span>;\n\n<span style=\"color:#c678dd;\">export function</span> <span style=\"color:#61afef;\">generateConsoleScript</span>() {\n  <span style=\"color:#c678dd;\">return</span> <span style=\"color:#98c379;\">`&lt;script&gt;\n    </span>${getRenderersScript()}<span style=\"color:#98c379;\">\n    </span>${getStreamScript()}<span style=\"color:#98c379;\">\n    // main orchestration...\n  &lt;/script&gt;`</span>;\n}</pre></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\"><h4 style=\"margin:0 0 8px 0;color:#fff;\">Want me to do this?</h4><p style=\"color:#9ca3af;margin:0;\">I can start with the safest extraction first: <strong>console-renderers.ts</strong> (pure formatting functions, no state). This gives immediate benefit with lowest risk.</p></div></div>",
    "requestedAt": "2026-01-02T10:55:00Z",
    "requestId": "603e5604-bde5-40c8-896f-9a1cc44d33ed",
    "choices": [
      {
        "label": "Start with renderers",
        "value": "extract-renderers",
        "primary": true
      },
      {
        "label": "Extract state machine first",
        "value": "extract-state"
      },
      {
        "label": "Full refactor plan",
        "value": "plan-all"
      }
    ]
  },
  "createdBy": "claude",
  "createdAt": "2026-01-02T10:49:57.688Z",
  "updatedAt": "2026-01-02T10:49:57.831Z",
  "requestId": "603e5604-bde5-40c8-896f-9a1cc44d33ed",
  "scope": "vibetools",
  "tags": [
    "console",
    "refactoring",
    "architecture"
  ],
  "targetUser": "claude"
}
DashboardReportsKontasksSessionsTelemetryLogs + Go