Interview Mode Redesign Plan

Details

Raw Data

{
  "id": "ccedf38b-faf2-43fb-9940-7989a5aceb2b",
  "type": "general",
  "status": "completed",
  "title": "Interview Mode Redesign Plan",
  "description": "Design for improved Interview Mode with batch JSON submission",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:sans-serif;\">\n<h2 style=\"color:#fff;margin:0 0 16px 0;\">🎤 Interview Mode Redesign</h2>\n\n<p style=\"color:#9ca3af;margin-bottom:20px;\">You're right - the current per-question submit is clunky. Here's the improved design:</p>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#f87171;margin:0 0 12px 0;\">❌ Current Problems</h3>\n<ul style=\"margin:0;padding-left:20px;line-height:1.8;color:#9ca3af;\">\n<li>\"Submit Answer\" after each question sends individual prompts</li>\n<li>No context linkage - each answer is disconnected</li>\n<li>\"Generate Implementation Plan\" is vague - doesn't include answers</li>\n<li>Kontask ID isn't passed back to Claude</li>\n</ul>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#22c55e;margin:0 0 12px 0;\">✅ New Design: Batch JSON Collection</h3>\n\n<h4 style=\"color:#e5c07b;margin:12px 0 8px 0;\">1. Client-Side Answer Collection</h4>\n<ul style=\"margin:0;padding-left:20px;line-height:1.8;color:#e0e0e0;\">\n<li>Remove individual \"Submit Answer\" buttons</li>\n<li>Each question locks in answer on selection (visual feedback)</li>\n<li>Store all answers in JavaScript object</li>\n<li>Progress bar updates as user answers</li>\n</ul>\n\n<h4 style=\"color:#e5c07b;margin:12px 0 8px 0;\">2. Batch Submission (\"Ready to Build\" button)</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;color:#98c379;margin:8px 0;font-size:0.9rem;\">{\n  \"type\": \"interview_response\",\n  \"kontaskId\": \"8a251a19-5dc0-4bf4-981a-5f171b800a55\",\n  \"topic\": \"User Authentication Feature\",\n  \"description\": \"Let's design the authentication system\",\n  \"answers\": [\n    { \"questionId\": \"auth-type\", \"question\": \"What type...\", \"answer\": \"JWT with email/password\" },\n    { \"questionId\": \"session-duration\", \"question\": \"How long...\", \"answer\": \"24 hours\" },\n    { \"questionId\": \"mfa-support\", \"question\": \"Do you need...\", \"answer\": \"Yes, optional\" },\n    { \"questionId\": \"additional-notes\", \"question\": \"Any additional...\", \"answer\": \"Need RBAC\" }\n  ]\n}</pre>\n\n<h4 style=\"color:#e5c07b;margin:12px 0 8px 0;\">3. Intelligent Prompt Builder</h4>\n<p style=\"color:#9ca3af;margin:0;\">Instead of raw JSON, builds a natural prompt:</p>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;color:#61afef;margin:8px 0;font-size:0.9rem;white-space:pre-wrap;\">Interview Complete: User Authentication Feature\n[Kontask: 8a251a19-5dc0-4bf4-981a-5f171b800a55]\n\nDesign decisions:\n• Authentication: JWT with email/password\n• Session duration: 24 hours (balanced)\n• MFA: Yes, optional for users\n• Additional: Need RBAC support\n\nPlease create an implementation plan based on these choices.</pre>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#61afef;margin:0 0 12px 0;\">🎯 UI Flow</h3>\n<table style=\"width:100%;border-collapse:collapse;\">\n<tr style=\"border-bottom:1px solid #444;\"><td style=\"padding:10px;color:#9ca3af;\">Step 1</td><td style=\"padding:10px;color:#e0e0e0;\">User clicks through questions, selecting/typing answers</td></tr>\n<tr style=\"border-bottom:1px solid #444;\"><td style=\"padding:10px;color:#9ca3af;\">Step 2</td><td style=\"padding:10px;color:#e0e0e0;\">Each selection shows ✓ and locks (can edit by clicking)</td></tr>\n<tr style=\"border-bottom:1px solid #444;\"><td style=\"padding:10px;color:#9ca3af;\">Step 3</td><td style=\"padding:10px;color:#e0e0e0;\">Progress bar fills: <span style=\"color:#22c55e;\">3/4 answered</span></td></tr>\n<tr style=\"border-bottom:1px solid #444;\"><td style=\"padding:10px;color:#9ca3af;\">Step 4</td><td style=\"padding:10px;color:#e0e0e0;\">When all answered: <strong style=\"color:#22c55e;\">\"🚀 Ready to Build\"</strong> button appears</td></tr>\n<tr><td style=\"padding:10px;color:#9ca3af;\">Step 5</td><td style=\"padding:10px;color:#e0e0e0;\">Click sends consolidated prompt → Claude creates plan</td></tr>\n</table>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#c678dd;margin:0 0 12px 0;\">🔗 Context Linkage</h3>\n<p style=\"color:#e0e0e0;margin:0 0 12px 0;\">The prompt includes:</p>\n<ul style=\"margin:0;padding-left:20px;line-height:1.8;color:#9ca3af;\">\n<li><strong style=\"color:#fff;\">kontaskId</strong> - Claude can reference/update the interview kontask</li>\n<li><strong style=\"color:#fff;\">topic</strong> - Feature being designed</li>\n<li><strong style=\"color:#fff;\">All Q&A pairs</strong> - Full context in one message</li>\n<li><strong style=\"color:#fff;\">Action request</strong> - \"Create implementation plan\"</li>\n</ul>\n</div>\n\n<div style=\"background:linear-gradient(135deg,#1a2a3a,#1e1e1e);padding:16px;border-radius:6px;border-left:4px solid #61afef;\">\n<h4 style=\"color:#61afef;margin:0 0 8px 0;\">🚧 Implementation Changes</h4>\n<ol style=\"margin:0;padding-left:20px;line-height:1.8;color:#9ca3af;\">\n<li>Remove <code style=\"background:#1e1e1e;padding:2px 6px;border-radius:4px;\">submitInterviewAnswer()</code> per-question</li>\n<li>Add <code style=\"background:#1e1e1e;padding:2px 6px;border-radius:4px;\">collectInterviewAnswers()</code> - stores in local object</li>\n<li>Add <code style=\"background:#1e1e1e;padding:2px 6px;border-radius:4px;\">submitInterviewBatch()</code> - builds intelligent prompt</li>\n<li>Update CSS for \"locked\" answer state (green checkmark, editable)</li>\n<li>Change button from \"Submit Answer\" → selection-based locking</li>\n</ol>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-top:16px;\">\n<h4 style=\"margin:0 0 8px 0;color:#fff;\">What's Next?</h4>\n<p style=\"color:#9ca3af;margin:0;\">Choose an action:</p>\n</div>\n</div>",
    "choices": [
      {
        "label": "Implement this",
        "value": "Implement the Interview Mode redesign - batch JSON collection with intelligent prompt builder",
        "primary": true
      },
      {
        "label": "Adjust design",
        "value": "I want to adjust the Interview Mode design before implementation"
      },
      {
        "label": "Show code changes",
        "value": "Show me exactly what code changes are needed in kontask-templates.ts"
      }
    ],
    "requestedAt": "2026-01-07T08:05:00.000Z",
    "requestId": "3a045ad5-3946-4ca3-815e-ee5562c58677"
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T05:23:14.090Z",
  "updatedAt": "2026-01-07T05:23:14.324Z",
  "requestId": "3a045ad5-3946-4ca3-815e-ee5562c58677",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "interview",
    "design"
  ],
  "targetUser": "claude"
}