refactor(worker): remove MessageParser (replaced by StreamAnalyzer)

This commit is contained in:
Mika Kuns
2026-04-14 14:12:21 +02:00
parent 03728c8e4a
commit c1c4c75979
26 changed files with 3978 additions and 88 deletions

View File

@@ -0,0 +1,106 @@
<h2>Green-Teal Variations</h2>
<p class="subtitle">Steel Teal shifted greener. Pick the one that feels right.</p>
<div class="cards">
<div class="card" data-choice="forest-teal" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 16px; background: #0f0f1e;">
<div style="font-family: system-ui; font-size: 13px;">
<div style="display:flex; gap: 12px; margin-bottom: 12px;">
<span style="width:8px;height:8px;border-radius:50%;background:#3d9474;display:inline-block;margin-top:4px;"></span>
<span style="color:#6bb89e; font-weight:500;">My Project</span>
</div>
<div style="padding: 10px 14px; display:flex; align-items:center; gap:10px; border-radius:8px; background:rgba(61,148,116,0.1); margin-bottom:6px;">
<div style="width:20px;height:20px;border-radius:50%;border:2px solid #475569;flex-shrink:0;"></div>
<div>
<div style="color:#c8d0e0;font-weight:500;">Fix login bug</div>
<div style="font-size:11px;color:#5a6578;">agent</div>
</div>
</div>
<div style="padding: 10px 14px; display:flex; align-items:center; gap:10px; border-radius:8px; margin-bottom:6px;">
<div style="width:20px;height:20px;border-radius:50%;border:2px solid #3d9474;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" stroke="#3d9474" stroke-width="2" fill="none"/></svg>
</div>
<div>
<div style="color:#5a6578;font-weight:500;text-decoration:line-through;">Setup CI</div>
<div style="font-size:11px;color:#475569;">Done</div>
</div>
</div>
<div style="padding:10px 14px;border:1px dashed #3a4560;border-radius:8px;color:#5a6578;display:flex;align-items:center;gap:8px;font-size:13px;">
<span style="color:#3d9474;">+</span> Add a task...
</div>
</div>
</div>
<div class="card-body">
<h3>Forest Teal</h3>
<p>Accent: <code>#3d9474</code>. Distinctly greener, still muted. Earthy.</p>
</div>
</div>
<div class="card" data-choice="jade" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 16px; background: #0f0f1e;">
<div style="font-family: system-ui; font-size: 13px;">
<div style="display:flex; gap: 12px; margin-bottom: 12px;">
<span style="width:8px;height:8px;border-radius:50%;background:#4a9880;display:inline-block;margin-top:4px;"></span>
<span style="color:#72baa4; font-weight:500;">My Project</span>
</div>
<div style="padding: 10px 14px; display:flex; align-items:center; gap:10px; border-radius:8px; background:rgba(74,152,128,0.1); margin-bottom:6px;">
<div style="width:20px;height:20px;border-radius:50%;border:2px solid #475569;flex-shrink:0;"></div>
<div>
<div style="color:#c8d0e0;font-weight:500;">Fix login bug</div>
<div style="font-size:11px;color:#5a6578;">agent</div>
</div>
</div>
<div style="padding: 10px 14px; display:flex; align-items:center; gap:10px; border-radius:8px; margin-bottom:6px;">
<div style="width:20px;height:20px;border-radius:50%;border:2px solid #4a9880;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" stroke="#4a9880" stroke-width="2" fill="none"/></svg>
</div>
<div>
<div style="color:#5a6578;font-weight:500;text-decoration:line-through;">Setup CI</div>
<div style="font-size:11px;color:#475569;">Done</div>
</div>
</div>
<div style="padding:10px 14px;border:1px dashed #3a4560;border-radius:8px;color:#5a6578;display:flex;align-items:center;gap:8px;font-size:13px;">
<span style="color:#4a9880;">+</span> Add a task...
</div>
</div>
</div>
<div class="card-body">
<h3>Jade</h3>
<p>Accent: <code>#4a9880</code>. Balanced green-teal midpoint. Calm but not cold.</p>
</div>
</div>
<div class="card" data-choice="sage" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 16px; background: #0f0f1e;">
<div style="font-family: system-ui; font-size: 13px;">
<div style="display:flex; gap: 12px; margin-bottom: 12px;">
<span style="width:8px;height:8px;border-radius:50%;background:#5a9a7a;display:inline-block;margin-top:4px;"></span>
<span style="color:#82bc9e; font-weight:500;">My Project</span>
</div>
<div style="padding: 10px 14px; display:flex; align-items:center; gap:10px; border-radius:8px; background:rgba(90,154,122,0.1); margin-bottom:6px;">
<div style="width:20px;height:20px;border-radius:50%;border:2px solid #475569;flex-shrink:0;"></div>
<div>
<div style="color:#c8d0e0;font-weight:500;">Fix login bug</div>
<div style="font-size:11px;color:#5a6578;">agent</div>
</div>
</div>
<div style="padding: 10px 14px; display:flex; align-items:center; gap:10px; border-radius:8px; margin-bottom:6px;">
<div style="width:20px;height:20px;border-radius:50%;border:2px solid #5a9a7a;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" stroke="#5a9a7a" stroke-width="2" fill="none"/></svg>
</div>
<div>
<div style="color:#5a6578;font-weight:500;text-decoration:line-through;">Setup CI</div>
<div style="font-size:11px;color:#475569;">Done</div>
</div>
</div>
<div style="padding:10px 14px;border:1px dashed #3a4560;border-radius:8px;color:#5a6578;display:flex;align-items:center;gap:8px;font-size:13px;">
<span style="color:#5a9a7a;">+</span> Add a task...
</div>
</div>
</div>
<div class="card-body">
<h3>Sage</h3>
<p>Accent: <code>#5a9a7a</code>. Most green of the three. Softer, natural tone.</p>
</div>
</div>
</div>

View File

@@ -0,0 +1,107 @@
<h2>Accent Color: Which tone?</h2>
<p class="subtitle">You want something dimmer than the indigo (#6366f1) I showed. Here are darker, more muted options — each shown on a task list mockup.</p>
<div class="cards">
<div class="card" data-choice="slate-blue" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 16px; background: #0f0f1e;">
<div style="font-family: system-ui; font-size: 13px;">
<!-- Sidebar slice -->
<div style="display:flex; gap: 12px; margin-bottom: 12px;">
<span style="width:8px;height:8px;border-radius:50%;background:#4b5ea8;display:inline-block;margin-top:4px;"></span>
<span style="color:#8b9dd4; font-weight:500;">My Project</span>
</div>
<!-- Task row -->
<div style="padding: 10px 14px; display:flex; align-items:center; gap:10px; border-radius:8px; background:rgba(75,94,168,0.1); margin-bottom:6px;">
<div style="width:20px;height:20px;border-radius:50%;border:2px solid #475569;flex-shrink:0;"></div>
<div>
<div style="color:#c8d0e0;font-weight:500;">Fix login bug</div>
<div style="font-size:11px;color:#5a6578;">agent</div>
</div>
</div>
<!-- Add task -->
<div style="padding:10px 14px;border:1px dashed #3a4560;border-radius:8px;color:#5a6578;display:flex;align-items:center;gap:8px;font-size:13px;">
<span style="color:#4b5ea8;">+</span> Add a task...
</div>
</div>
</div>
<div class="card-body">
<h3>Slate Blue</h3>
<p>Muted blue-gray. Accent: <code>#4b5ea8</code>. Very subdued, professional. Close to VS Code's dark theme feel.</p>
</div>
</div>
<div class="card" data-choice="dim-violet" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 16px; background: #0f0f1e;">
<div style="font-family: system-ui; font-size: 13px;">
<div style="display:flex; gap: 12px; margin-bottom: 12px;">
<span style="width:8px;height:8px;border-radius:50%;background:#7c6aad;display:inline-block;margin-top:4px;"></span>
<span style="color:#a899cc; font-weight:500;">My Project</span>
</div>
<div style="padding: 10px 14px; display:flex; align-items:center; gap:10px; border-radius:8px; background:rgba(124,106,173,0.1); margin-bottom:6px;">
<div style="width:20px;height:20px;border-radius:50%;border:2px solid #475569;flex-shrink:0;"></div>
<div>
<div style="color:#c8d0e0;font-weight:500;">Fix login bug</div>
<div style="font-size:11px;color:#5a6578;">agent</div>
</div>
</div>
<div style="padding:10px 14px;border:1px dashed #3a4560;border-radius:8px;color:#5a6578;display:flex;align-items:center;gap:8px;font-size:13px;">
<span style="color:#7c6aad;">+</span> Add a task...
</div>
</div>
</div>
<div class="card-body">
<h3>Dim Violet</h3>
<p>Muted purple. Accent: <code>#7c6aad</code>. Slightly warmer, still understated. Has a subtle "Claude" vibe.</p>
</div>
</div>
<div class="card" data-choice="steel-teal" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 16px; background: #0f0f1e;">
<div style="font-family: system-ui; font-size: 13px;">
<div style="display:flex; gap: 12px; margin-bottom: 12px;">
<span style="width:8px;height:8px;border-radius:50%;background:#4a8c8c;display:inline-block;margin-top:4px;"></span>
<span style="color:#7fb8b8; font-weight:500;">My Project</span>
</div>
<div style="padding: 10px 14px; display:flex; align-items:center; gap:10px; border-radius:8px; background:rgba(74,140,140,0.1); margin-bottom:6px;">
<div style="width:20px;height:20px;border-radius:50%;border:2px solid #475569;flex-shrink:0;"></div>
<div>
<div style="color:#c8d0e0;font-weight:500;">Fix login bug</div>
<div style="font-size:11px;color:#5a6578;">agent</div>
</div>
</div>
<div style="padding:10px 14px;border:1px dashed #3a4560;border-radius:8px;color:#5a6578;display:flex;align-items:center;gap:8px;font-size:13px;">
<span style="color:#4a8c8c;">+</span> Add a task...
</div>
</div>
</div>
<div class="card-body">
<h3>Steel Teal</h3>
<p>Muted teal-green. Accent: <code>#4a8c8c</code>. Cool and calm. Distinct from typical blue-heavy dark UIs.</p>
</div>
</div>
<div class="card" data-choice="charcoal-blue" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 16px; background: #0f0f1e;">
<div style="font-family: system-ui; font-size: 13px;">
<div style="display:flex; gap: 12px; margin-bottom: 12px;">
<span style="width:8px;height:8px;border-radius:50%;background:#5571a1;display:inline-block;margin-top:4px;"></span>
<span style="color:#8ba4c8; font-weight:500;">My Project</span>
</div>
<div style="padding: 10px 14px; display:flex; align-items:center; gap:10px; border-radius:8px; background:rgba(85,113,161,0.1); margin-bottom:6px;">
<div style="width:20px;height:20px;border-radius:50%;border:2px solid #475569;flex-shrink:0;"></div>
<div>
<div style="color:#c8d0e0;font-weight:500;">Fix login bug</div>
<div style="font-size:11px;color:#5a6578;">agent</div>
</div>
</div>
<div style="padding:10px 14px;border:1px dashed #3a4560;border-radius:8px;color:#5a6578;display:flex;align-items:center;gap:8px;font-size:13px;">
<span style="color:#5571a1;">+</span> Add a task...
</div>
</div>
</div>
<div class="card-body">
<h3>Charcoal Blue</h3>
<p>Desaturated steel blue. Accent: <code>#5571a1</code>. Very close to Microsoft To Do's dark mode accent but dimmer.</p>
</div>
</div>
</div>

View File

@@ -0,0 +1,169 @@
<h2>Layout & Visual Design Direction</h2>
<p class="subtitle">Your current UI has button toolbars and minimal spacing. Which direction should we take?</p>
<div class="split">
<div class="mockup">
<div class="mockup-header">Current: Toolbar Style</div>
<div class="mockup-body" style="font-family: system-ui; font-size: 13px;">
<div style="display: flex; height: 340px;">
<!-- Lists -->
<div style="width: 160px; border-right: 1px solid #444; display:flex; flex-direction:column;">
<div style="padding: 6px 8px; font-weight: bold; font-size: 13px;">Lists</div>
<div style="flex:1; padding: 4px;">
<div style="padding: 6px 8px; background: #3a3a5c; border-radius: 3px; margin-bottom: 2px;">My Project</div>
<div style="padding: 6px 8px;">Backend Work</div>
<div style="padding: 6px 8px;">UI Polish</div>
</div>
<div style="padding: 6px; border-top: 1px solid #444; display:flex; gap: 4px;">
<button style="padding: 2px 10px; font-size: 12px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">+</button>
<button style="padding: 2px 10px; font-size: 12px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">E</button>
<button style="padding: 2px 10px; font-size: 12px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">-</button>
</div>
</div>
<!-- Tasks -->
<div style="flex: 1; display:flex; flex-direction:column;">
<div style="padding: 6px 8px; font-weight: bold; font-size: 13px;">Tasks</div>
<div style="flex:1; padding: 4px;">
<div style="padding: 6px; display:flex; justify-content: space-between; align-items: center; margin-bottom: 2px;">
<div>
<div style="font-weight: 600;">Fix login bug</div>
<div style="font-size: 10px; color: #888;">agent</div>
</div>
<div style="display:flex; gap: 4px; align-items:center;">
<span style="background: #e67e22; color: white; padding: 1px 6px; border-radius: 3px; font-size: 11px;">Running</span>
<button style="padding: 1px 8px; font-size: 11px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">Run</button>
</div>
</div>
<div style="padding: 6px; display:flex; justify-content: space-between; align-items: center;">
<div><div style="font-weight: 600;">Add dark mode</div></div>
<div style="display:flex; gap: 4px; align-items:center;">
<span style="background: #666; color: white; padding: 1px 6px; border-radius: 3px; font-size: 11px;">Manual</span>
<button style="padding: 1px 8px; font-size: 11px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">Run</button>
</div>
</div>
</div>
<div style="padding: 6px; border-top: 1px solid #444; display:flex; gap: 4px;">
<button style="padding: 2px 10px; font-size: 12px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">+ Task</button>
<button style="padding: 2px 10px; font-size: 12px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">Edit</button>
<button style="padding: 2px 10px; font-size: 12px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">Delete</button>
</div>
</div>
</div>
</div>
</div>
<div class="mockup">
<div class="mockup-header">Proposed: To Do Style</div>
<div class="mockup-body" style="font-family: system-ui; font-size: 13px;">
<div style="display: flex; height: 340px;">
<!-- Lists sidebar -->
<div style="width: 160px; border-right: 1px solid #333; background: #1a1a2e; display:flex; flex-direction:column;">
<div style="padding: 14px 16px 10px; font-weight: 600; font-size: 14px; color: #94a3b8;">Lists</div>
<div style="flex:1; padding: 4px 8px;">
<div style="padding: 10px 12px; background: rgba(99,102,241,0.15); border-radius: 8px; margin-bottom: 4px; color: #a5b4fc; font-weight: 500; display:flex; align-items:center; gap:8px;">
<span style="width:8px;height:8px;border-radius:50%;background:#6366f1;display:inline-block;"></span>
My Project
</div>
<div style="padding: 10px 12px; border-radius: 8px; display:flex; align-items:center; gap:8px; color: #94a3b8;">
<span style="width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;"></span>
Backend Work
</div>
<div style="padding: 10px 12px; border-radius: 8px; display:flex; align-items:center; gap:8px; color: #94a3b8;">
<span style="width:8px;height:8px;border-radius:50%;background:#f59e0b;display:inline-block;"></span>
UI Polish
</div>
</div>
<div style="padding: 8px 12px; border-top: 1px solid #333;">
<div style="padding: 8px 12px; color: #6366f1; cursor:pointer; border-radius: 6px; display:flex; align-items:center; gap: 6px; font-size: 13px;">
<span style="font-size: 16px;">+</span> New List
</div>
</div>
</div>
<!-- Tasks -->
<div style="flex: 1; display:flex; flex-direction:column; background: #16162a;">
<div style="padding: 14px 16px 10px; font-weight: 600; font-size: 16px; color: #e2e8f0;">My Project</div>
<div style="flex:1; padding: 0 8px;">
<div style="padding: 10px 12px; display:flex; align-items: center; gap: 10px; margin-bottom: 2px; border-radius: 8px; background: rgba(99,102,241,0.08);">
<div style="width: 20px; height: 20px; border-radius: 50%; border: 2px solid #e67e22; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
<div style="width:8px;height:8px;border-radius:50%;background:#e67e22;"></div>
</div>
<div style="flex:1;">
<div style="font-weight: 500; color: #e2e8f0;">Fix login bug</div>
<div style="font-size: 11px; color: #64748b; margin-top: 2px;">agent &middot; Running</div>
</div>
</div>
<div style="padding: 10px 12px; display:flex; align-items: center; gap: 10px; border-radius: 8px;">
<div style="width: 20px; height: 20px; border-radius: 50%; border: 2px solid #475569; flex-shrink:0;"></div>
<div style="flex:1;">
<div style="font-weight: 500; color: #e2e8f0;">Add dark mode</div>
<div style="font-size: 11px; color: #64748b;">manual</div>
</div>
</div>
<div style="padding: 10px 12px; display:flex; align-items: center; gap: 10px; border-radius: 8px; opacity: 0.5;">
<div style="width: 20px; height: 20px; border-radius: 50%; border: 2px solid #22c55e; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" stroke="#22c55e" stroke-width="2" fill="none"/></svg>
</div>
<div style="flex:1;">
<div style="font-weight: 500; color: #64748b; text-decoration: line-through;">Setup CI pipeline</div>
<div style="font-size: 11px; color: #475569;">agent &middot; Done</div>
</div>
</div>
</div>
<!-- Inline add -->
<div style="padding: 8px 12px; border-top: 1px solid #333;">
<div style="padding: 10px 14px; border: 1px dashed #475569; border-radius: 8px; color: #64748b; display:flex; align-items: center; gap: 8px; font-size: 13px;">
<span style="font-size: 16px; color: #6366f1;">+</span> Add a task...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 style="margin-top: 32px;">Key Changes in the Proposed Design</h3>
<div class="options" data-multiselect>
<div class="option" data-choice="checkbox" onclick="toggleSelect(this)">
<div class="letter">1</div>
<div class="content">
<h3>Circular Checkboxes</h3>
<p>Replace status badges with circular checkboxes on the left. Border color reflects status (orange=running, green=done, gray=manual). Click to toggle done.</p>
</div>
</div>
<div class="option" data-choice="inline-add" onclick="toggleSelect(this)">
<div class="letter">2</div>
<div class="content">
<h3>Inline "Add a task" Input</h3>
<p>Dashed border text field pinned at the bottom of the task list. Always visible. Enter to create, Escape to cancel.</p>
</div>
</div>
<div class="option" data-choice="list-header" onclick="toggleSelect(this)">
<div class="letter">3</div>
<div class="content">
<h3>List Name as Tasks Header</h3>
<p>Replace generic "Tasks" header with the selected list name in larger text. Matches To Do's pattern.</p>
</div>
</div>
<div class="option" data-choice="sidebar-polish" onclick="toggleSelect(this)">
<div class="letter">4</div>
<div class="content">
<h3>Sidebar Polish</h3>
<p>Colored dots per list, subtle highlight on selected, "+ New List" link at bottom instead of +/E/- buttons.</p>
</div>
</div>
<div class="option" data-choice="remove-buttons" onclick="toggleSelect(this)">
<div class="letter">5</div>
<div class="content">
<h3>Remove Button Toolbars</h3>
<p>Eliminate the bottom button bars from both panes. All actions via context menu, keyboard shortcuts, or inline controls.</p>
</div>
</div>
<div class="option" data-choice="done-style" onclick="toggleSelect(this)">
<div class="letter">6</div>
<div class="content">
<h3>Completed Task Styling</h3>
<p>Done tasks get strikethrough text, reduced opacity, green checkmark. Keeps them visible but visually subordinate.</p>
</div>
</div>
</div>
<p class="subtitle" style="margin-top: 16px;">This is multi-select — pick all the changes you'd like to include. I recommend all 6.</p>

View File

@@ -0,0 +1,61 @@
<h2>Task Creation: How should adding tasks work?</h2>
<p class="subtitle">Microsoft To Do uses an inline text field at the bottom of the task list. Currently ClaudeDo opens a modal dialog. Which approach fits best?</p>
<div class="options">
<div class="option" data-choice="a" onclick="toggleSelect(this)">
<div class="letter">A</div>
<div class="content">
<h3>Inline Add (To Do style)</h3>
<p>A text field always visible at the bottom of the task list. Press <strong>Enter</strong> to create a quick task with just a title. Tab or click to expand for more fields (description, tags, status).</p>
<div class="pros-cons">
<div class="pros"><h4>Pros</h4><ul>
<li>Fastest for rapid task entry</li>
<li>Keyboard-driven — never leave the list</li>
<li>Feels natural and lightweight</li>
</ul></div>
<div class="cons"><h4>Cons</h4><ul>
<li>Limited space for advanced fields</li>
<li>Need separate flow for setting tags/status on creation</li>
</ul></div>
</div>
</div>
</div>
<div class="option" data-choice="b" onclick="toggleSelect(this)">
<div class="letter">B</div>
<div class="content">
<h3>Inline Add + Detail Pane Editing</h3>
<p>Same inline text field for quick creation. After pressing Enter, the new task is selected and the <strong>detail pane on the right</strong> becomes editable — add description, tags, commit type there. Like To Do's "click task → edit in sidebar" pattern.</p>
<div class="pros-cons">
<div class="pros"><h4>Pros</h4><ul>
<li>Quick entry AND full editing without modals</li>
<li>Uses existing detail pane real estate</li>
<li>Closest to Microsoft To Do's actual flow</li>
</ul></div>
<div class="cons"><h4>Cons</h4><ul>
<li>Detail pane needs to become editable (currently read-only)</li>
<li>More complex state management</li>
</ul></div>
</div>
</div>
</div>
<div class="option" data-choice="c" onclick="toggleSelect(this)">
<div class="letter">C</div>
<div class="content">
<h3>Keep Modal Dialog + Keyboard Shortcut</h3>
<p>Keep the existing modal editor but add <strong>Ctrl+N</strong> / <strong>Enter</strong> shortcut to open it instantly. Add keyboard navigation within the dialog (Tab between fields, Enter to save).</p>
<div class="pros-cons">
<div class="pros"><h4>Pros</h4><ul>
<li>Minimal code changes</li>
<li>All fields visible at once</li>
<li>Modal keeps focus clear</li>
</ul></div>
<div class="cons"><h4>Cons</h4><ul>
<li>Still interrupts flow with a window</li>
<li>Feels heavier than To Do</li>
</ul></div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,3 @@
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
<p class="subtitle">Continuing in terminal...</p>
</div>