Full Dashboard Console Refactoring Plan

Output

Full Dashboard Console Refactoring PlanTarget Structure (6 files)konui/src/
├── console-types.ts        ~80 lines   (interfaces)
├── console-state-machine.ts ~350 lines  (EXISTS - smTransition)
├── console-renderers.ts     ~400 lines  (pure formatters)
├── console-storage.ts       ~200 lines  (localStorage helpers)
├── console-stream.ts        ~450 lines  (SSE/EventSource)
└── dashboard-console.ts     ~1000 lines (main + DOM)
Phase 1: console-types.tsRisk: Very Low | Dependencies: None | Testable: Yes
ConsoleState, HistoryItem, HistoryGroupItem, LogEntry,
KontaskChoice, KontaskData, StreamEvent
Phase 2: console-renderers.tsRisk: Low | Dependencies: escapeHtml only | Testable: Yes
escapeHtml(), renderDiff(), renderFileList(), renderSearchResults(),
renderShellOutput(), renderTodoList(), formatElapsed()These are pure functions - input → HTML string. Easy to unit test.
Phase 3: console-storage.tsRisk: Medium | Dependencies: types | Testable: Partially
savePendingState(), loadPendingState(), clearPendingState(),
isPendingStateValid(), saveHistory(), loadHistory(), clearHistory(),
saveTodoProgress(), clearTodoProgress(), saveDraft(), loadDraft(),
getDeletedKontexts(), markKontextDeleted()localStorage wrappers - need browser context but logic is simple.
Phase 4: console-stream.tsRisk: Medium-High | Dependencies: state, storage, renderers | Testable: Hard
executeStream(), connectEventSource(), reconnectWithEventSource(),
closeEventSource(), handleStreamEvent()Tightly coupled to state machine and DOM. Extract carefully.
Phase 5: Remaining in dashboard-console.ts// DOM elements + UI state
// sendPrompt() - orchestrates everything
// restoreHistory(), attemptRecovery(), pollForOutput()
// UI updaters: updateStatusBar, showSpinner, appendLine, etc.
// Event listeners (submit, input, file attach)
// generateConsoleScript() - assembles the pieces
Execution Order1console-types.ts - Extract interfaces, update imports
2console-renderers.ts - Extract formatters, add tests
3console-storage.ts - Extract localStorage helpers
4console-stream.ts - Extract SSE handling (careful!)
5Cleanup - Update generateConsoleScript() to concatenate
Ready to Start?I'll do Phase 1 + 2 first (types + renderers) - safest extractions with immediate benefit. Each phase gets its own commit so we can rollback if needed.

Quick Actions

Original Request

No layout configured

Details

Type General

Status Completed

Scope vibetools

Tags consolerefactoringarchitecture

Created 2 Jan 2026, 8:52 pm

Updated 2 Jan 2026, 8:52 pm

Created By claude

Raw Data

{
  "id": "9ad5f9ee-44a4-40f5-8d56-2ccdebe0a346",
  "type": "general",
  "status": "completed",
  "title": "Full Dashboard Console Refactoring Plan",
  "description": "Complete file breakdown with dependencies and execution order",
  "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;\">Full 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:#61afef;\">Target Structure (6 files)</h4><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:#98c379;\">konui/src/</span>\n├── <span style=\"color:#e5c07b;\">console-types.ts</span>        <span style=\"color:#7f848e;\">~80 lines   (interfaces)</span>\n├── <span style=\"color:#e5c07b;\">console-state-machine.ts</span> <span style=\"color:#7f848e;\">~350 lines  (EXISTS - smTransition)</span>\n├── <span style=\"color:#e5c07b;\">console-renderers.ts</span>     <span style=\"color:#7f848e;\">~400 lines  (pure formatters)</span>\n├── <span style=\"color:#e5c07b;\">console-storage.ts</span>       <span style=\"color:#7f848e;\">~200 lines  (localStorage helpers)</span>\n├── <span style=\"color:#e5c07b;\">console-stream.ts</span>        <span style=\"color:#7f848e;\">~450 lines  (SSE/EventSource)</span>\n└── <span style=\"color:#e5c07b;\">dashboard-console.ts</span>     <span style=\"color:#7f848e;\">~1000 lines (main + DOM)</span></pre></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#98c379;\">Phase 1: console-types.ts</h4><p style=\"color:#9ca3af;margin:0 0 8px 0;\">Risk: <span style=\"color:#22c55e;\">Very Low</span> | Dependencies: None | Testable: Yes</p><pre style=\"background:#1e1e1e;padding:8px;border-radius:4px;font-size:0.8rem;margin:0;\">ConsoleState, HistoryItem, HistoryGroupItem, LogEntry,\nKontaskChoice, KontaskData, StreamEvent</pre></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#98c379;\">Phase 2: console-renderers.ts</h4><p style=\"color:#9ca3af;margin:0 0 8px 0;\">Risk: <span style=\"color:#22c55e;\">Low</span> | Dependencies: escapeHtml only | Testable: Yes</p><pre style=\"background:#1e1e1e;padding:8px;border-radius:4px;font-size:0.8rem;margin:0;\">escapeHtml(), renderDiff(), renderFileList(), renderSearchResults(),\nrenderShellOutput(), renderTodoList(), formatElapsed()</pre><p style=\"color:#7f848e;margin:8px 0 0 0;\">These are pure functions - input → HTML string. Easy to unit test.</p></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#e5c07b;\">Phase 3: console-storage.ts</h4><p style=\"color:#9ca3af;margin:0 0 8px 0;\">Risk: <span style=\"color:#f97316;\">Medium</span> | Dependencies: types | Testable: Partially</p><pre style=\"background:#1e1e1e;padding:8px;border-radius:4px;font-size:0.8rem;margin:0;\">savePendingState(), loadPendingState(), clearPendingState(),\nisPendingStateValid(), saveHistory(), loadHistory(), clearHistory(),\nsaveTodoProgress(), clearTodoProgress(), saveDraft(), loadDraft(),\ngetDeletedKontexts(), markKontextDeleted()</pre><p style=\"color:#7f848e;margin:8px 0 0 0;\">localStorage wrappers - need browser context but logic is simple.</p></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#f97316;\">Phase 4: console-stream.ts</h4><p style=\"color:#9ca3af;margin:0 0 8px 0;\">Risk: <span style=\"color:#f97316;\">Medium-High</span> | Dependencies: state, storage, renderers | Testable: Hard</p><pre style=\"background:#1e1e1e;padding:8px;border-radius:4px;font-size:0.8rem;margin:0;\">executeStream(), connectEventSource(), reconnectWithEventSource(),\ncloseEventSource(), handleStreamEvent()</pre><p style=\"color:#7f848e;margin:8px 0 0 0;\">Tightly coupled to state machine and DOM. Extract carefully.</p></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#c678dd;\">Phase 5: Remaining in dashboard-console.ts</h4><pre style=\"background:#1e1e1e;padding:8px;border-radius:4px;font-size:0.8rem;margin:0;\">// DOM elements + UI state\n// sendPrompt() - orchestrates everything\n// restoreHistory(), attemptRecovery(), pollForOutput()\n// UI updaters: updateStatusBar, showSpinner, appendLine, etc.\n// Event listeners (submit, input, file attach)\n// generateConsoleScript() - assembles the pieces</pre></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#61afef;\">Execution Order</h4><table style=\"width:100%;border-collapse:collapse;\"><tr><td style=\"padding:6px 12px;color:#98c379;border-bottom:1px solid #444;\">1</td><td style=\"padding:6px 12px;color:#e0e0e0;border-bottom:1px solid #444;\"><strong>console-types.ts</strong> - Extract interfaces, update imports</td></tr><tr><td style=\"padding:6px 12px;color:#98c379;border-bottom:1px solid #444;\">2</td><td style=\"padding:6px 12px;color:#e0e0e0;border-bottom:1px solid #444;\"><strong>console-renderers.ts</strong> - Extract formatters, add tests</td></tr><tr><td style=\"padding:6px 12px;color:#98c379;border-bottom:1px solid #444;\">3</td><td style=\"padding:6px 12px;color:#e0e0e0;border-bottom:1px solid #444;\"><strong>console-storage.ts</strong> - Extract localStorage helpers</td></tr><tr><td style=\"padding:6px 12px;color:#e5c07b;border-bottom:1px solid #444;\">4</td><td style=\"padding:6px 12px;color:#e0e0e0;border-bottom:1px solid #444;\"><strong>console-stream.ts</strong> - Extract SSE handling (careful!)</td></tr><tr><td style=\"padding:6px 12px;color:#e5c07b;\">5</td><td style=\"padding:6px 12px;color:#e0e0e0;\"><strong>Cleanup</strong> - Update generateConsoleScript() to concatenate</td></tr></table></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\"><h4 style=\"margin:0 0 8px 0;color:#fff;\">Ready to Start?</h4><p style=\"color:#9ca3af;margin:0;\">I'll do Phase 1 + 2 first (types + renderers) - safest extractions with immediate benefit. Each phase gets its own commit so we can rollback if needed.</p></div></div>",
    "requestedAt": "2026-01-02T11:00:00Z",
    "requestId": "f36d6ed2-d66b-4644-8c0d-cea654c4c608",
    "choices": [
      {
        "label": "Start Phase 1+2",
        "value": "start-phases-1-2",
        "primary": true
      },
      {
        "label": "Just Phase 1 first",
        "value": "just-phase-1"
      },
      {
        "label": "Need more details",
        "value": "more-details"
      }
    ]
  },
  "createdBy": "claude",
  "createdAt": "2026-01-02T10:52:41.379Z",
  "updatedAt": "2026-01-02T10:52:41.519Z",
  "requestId": "f36d6ed2-d66b-4644-8c0d-cea654c4c608",
  "scope": "vibetools",
  "tags": [
    "console",
    "refactoring",
    "architecture"
  ],
  "targetUser": "claude"
}

1	console-types.ts - Extract interfaces, update imports
2	console-renderers.ts - Extract formatters, add tests
3	console-storage.ts - Extract localStorage helpers
4	console-stream.ts - Extract SSE handling (careful!)
5	Cleanup - Update generateConsoleScript() to concatenate