Kontask UX Evolution Plan

Details

Raw Data

{
  "id": "708c4e60-95c5-4dc2-b188-1bc378476557",
  "type": "general",
  "status": "completed",
  "title": "Kontask UX Evolution Plan",
  "description": "Plan to evolve kontasks from approval-centric to storytelling backbone for vibe coding",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:system-ui,-apple-system,sans-serif;\">\n<h2 style=\"color:#fff;margin:0 0 16px 0;\">Kontask UX Evolution Plan</h2>\n<p style=\"color:#7f848e;margin:0 0 20px 0;\">Making kontasks the storytelling backbone of vibe coding sessions</p>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:20px;\">\n<h3 style=\"color:#c99542;margin:0 0 12px 0;\">Current State Analysis</h3>\n<table style=\"width:100%;border-collapse:collapse;\">\n<tr><td style=\"padding:6px 0;color:#7f848e;\">Total kontasks:</td><td style=\"padding:6px 0;color:#e0e0e0;\"><strong>142</strong></td></tr>\n<tr><td style=\"padding:6px 0;color:#7f848e;\">Created by Claude:</td><td style=\"padding:6px 0;color:#98c379;\"><strong>122</strong> (86%)</td></tr>\n<tr><td style=\"padding:6px 0;color:#7f848e;\">Created by user:</td><td style=\"padding:6px 0;color:#61afef;\"><strong>9</strong> (6%)</td></tr>\n<tr><td style=\"padding:6px 0;color:#7f848e;\">Legacy (unknown):</td><td style=\"padding:6px 0;color:#e5c07b;\"><strong>11</strong> (8%)</td></tr>\n<tr style=\"border-top:1px solid #444;\"><td style=\"padding:6px 0;color:#7f848e;\">With output (display):</td><td style=\"padding:6px 0;color:#98c379;\"><strong>109</strong></td></tr>\n<tr><td style=\"padding:6px 0;color:#7f848e;\">With layout (approval):</td><td style=\"padding:6px 0;color:#e5c07b;\"><strong>11</strong></td></tr>\n<tr><td style=\"padding:6px 0;color:#7f848e;\">With requestId (console):</td><td style=\"padding:6px 0;color:#61afef;\"><strong>80</strong></td></tr>\n</table>\n</div>\n\n<h3 style=\"color:#fff;margin:20px 0 12px 0;\">The Problem</h3>\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;border-left:4px solid #f97316;\">\n<p style=\"margin:0 0 12px 0;color:#e0e0e0;\"><strong>86% of kontasks are Claude-created OUTPUT kontasks</strong> - showing results from dashboard console queries. But they still display approval buttons (Approve/Reject/Recommend) which are irrelevant.</p>\n<p style=\"margin:0;color:#7f848e;\">The UI was designed for the <em>original</em> workflow: user creates kontask → Claude processes → user approves. But <em>vibe coding</em> is the opposite: user asks question → Claude shows result as kontask.</p>\n</div>\n\n<h3 style=\"color:#fff;margin:20px 0 12px 0;\">Proposed Evolution: Two Kontask Modes</h3>\n\n<div style=\"background:#1a3a1a;padding:16px;border-radius:6px;margin-bottom:12px;border:1px solid #22c55e;\">\n<h4 style=\"color:#22c55e;margin:0 0 8px 0;\">1. OUTPUT Mode (New Default)</h4>\n<p style=\"margin:0 0 8px 0;color:#e0e0e0;\">For Claude-created kontasks showing results/reports/information.</p>\n<ul style=\"margin:8px 0 0 0;padding-left:20px;color:#7f848e;line-height:1.8;\">\n<li><strong style=\"color:#98c379;\">No approval buttons</strong> - just delete button</li>\n<li>Displays rich HTML output card (current behavior)</li>\n<li>Links to source context (requestId for dashboard console)</li>\n<li>Auto-detected when <code>context.output</code> exists</li>\n</ul>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:12px;border:1px solid #c99542;\">\n<h4 style=\"color:#c99542;margin:0 0 8px 0;\">2. APPROVAL Mode (Original)</h4>\n<p style=\"margin:0 0 8px 0;color:#e0e0e0;\">For decisions requiring human judgment (image selection, data changes).</p>\n<ul style=\"margin:8px 0 0 0;padding-left:20px;color:#7f848e;line-height:1.8;\">\n<li><strong style=\"color:#e5c07b;\">Shows Approve/Reject/Recommend</strong></li>\n<li>Uses <code>context.layout</code> for structured templates</li>\n<li>Requires explicit action before Claude can proceed</li>\n</ul>\n</div>\n\n<h3 style=\"color:#fff;margin:20px 0 12px 0;\">Implementation Plan</h3>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:12px;\">\n<h4 style=\"color:#61afef;margin:0 0 8px 0;\">Phase 1: UI Detection Logic</h4>\n<p style=\"margin:0;color:#7f848e;\">In <code>kontask-detail.ts</code>, detect mode:</p>\n<pre style=\"background:#1a1b2e;padding:12px;border-radius:4px;overflow-x:auto;color:#98c379;font-size:0.85rem;margin-top:8px;\">const isOutputMode = ctx.output && !ctx.layout;\nconst isApprovalMode = ctx.layout || kontask.status === 'approved';</pre>\n<p style=\"margin:8px 0 0 0;color:#7f848e;\">Hide approval buttons when <code>isOutputMode</code>.</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:12px;\">\n<h4 style=\"color:#61afef;margin:0 0 8px 0;\">Phase 2: Simplified Detail View</h4>\n<ul style=\"margin:0;padding-left:20px;color:#7f848e;line-height:1.8;\">\n<li>OUTPUT mode: Full-width output card, minimal chrome</li>\n<li>\"Details\" section collapsed by default for output kontasks</li>\n<li>Show \"Created by Claude via Dashboard Console\" badge</li>\n<li>Add \"View conversation\" link if requestId exists</li>\n</ul>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:12px;\">\n<h4 style=\"color:#61afef;margin:0 0 8px 0;\">Phase 3: Timeline/Story View (Future)</h4>\n<p style=\"margin:0 0 8px 0;color:#e0e0e0;\">New view: kontasks as a <strong>story timeline</strong></p>\n<ul style=\"margin:0;padding-left:20px;color:#7f848e;line-height:1.8;\">\n<li>Chronological feed of all kontasks from a session</li>\n<li>Group by conversation/requestId</li>\n<li>Export as markdown/PDF for documentation</li>\n<li>\"Session replay\" - see the vibe coding journey</li>\n</ul>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:12px;\">\n<h4 style=\"color:#61afef;margin:0 0 8px 0;\">Phase 4: Tagging & Categories</h4>\n<ul style=\"margin:0;padding-left:20px;color:#7f848e;line-height:1.8;\">\n<li>Add tags to kontasks (auto-generated or manual)</li>\n<li>Categories: <span style=\"color:#98c379;\">research</span>, <span style=\"color:#61afef;\">code</span>, <span style=\"color:#e5c07b;\">decision</span>, <span style=\"color:#c678dd;\">report</span></li>\n<li>Filter by tag in list view</li>\n<li>Use for agile sprint documentation</li>\n</ul>\n</div>\n\n<h3 style=\"color:#fff;margin:20px 0 12px 0;\">Quick Wins (Phase 1 Only)</h3>\n<table style=\"width:100%;border-collapse:collapse;background:#2d2d2d;border-radius:6px;overflow:hidden;\">\n<tr style=\"background:#363636;\"><th style=\"text-align:left;padding:10px;color:#fff;\">Change</th><th style=\"text-align:left;padding:10px;color:#fff;\">File</th><th style=\"text-align:left;padding:10px;color:#fff;\">Effort</th></tr>\n<tr><td style=\"padding:10px;color:#e0e0e0;\">Hide buttons when output mode</td><td style=\"padding:10px;color:#61afef;\">kontask-detail.ts:315</td><td style=\"padding:10px;color:#98c379;\">~10 lines</td></tr>\n<tr style=\"background:#333;\"><td style=\"padding:10px;color:#e0e0e0;\">Add \"Output\" badge to list view</td><td style=\"padding:10px;color:#61afef;\">kontasks.ts</td><td style=\"padding:10px;color:#98c379;\">~5 lines</td></tr>\n<tr><td style=\"padding:10px;color:#e0e0e0;\">Collapse Details by default</td><td style=\"padding:10px;color:#61afef;\">kontask-detail.ts:1440</td><td style=\"padding:10px;color:#98c379;\">~3 lines</td></tr>\n</table>\n\n<h3 style=\"color:#fff;margin:20px 0 12px 0;\">Benefits for Vibe Coding</h3>\n<ul style=\"margin:0;padding-left:20px;color:#e0e0e0;line-height:1.8;\">\n<li><strong style=\"color:#c99542;\">Cleaner UI:</strong> No confusing buttons for display-only kontasks</li>\n<li><strong style=\"color:#c99542;\">Session Memory:</strong> Kontasks become a knowledge base of the session</li>\n<li><strong style=\"color:#c99542;\">Documentation:</strong> Export timeline as sprint notes or handoff docs</li>\n<li><strong style=\"color:#c99542;\">Context Switching:</strong> Come back to a session days later, see the story</li>\n</ul>\n\n<div style=\"background:#1a3a1a;padding:12px;border-radius:6px;margin-top:20px;border:1px solid #22c55e;\">\n<p style=\"margin:0;color:#22c55e;\"><strong>Next Step:</strong> Shall I implement Phase 1 (detection logic + hide buttons)? It's ~20 lines of changes in kontask-detail.ts.</p>\n</div>\n</div>",
    "requestedAt": "2026-01-02T19:55:00.000Z",
    "requestId": "14121bb7-8912-4a6f-b3f2-62de1cb17fc0"
  },
  "createdBy": "claude",
  "createdAt": "2026-01-01T20:12:44.921Z",
  "updatedAt": "2026-01-02T05:10:54.074Z",
  "requestId": "14121bb7-8912-4a6f-b3f2-62de1cb17fc0"
}