Interview Mode Design Plan

Details

Raw Data

{
  "id": "d6e45a09-11b9-410a-9b81-c76dc9a53783",
  "type": "general",
  "status": "completed",
  "title": "Interview Mode Design Plan",
  "description": "Architecture design for structured design conversation feature",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:system-ui,sans-serif;\"><h2 style=\"color:#fff;margin:0 0 20px 0;\">🎤 Interview Mode - Design Plan</h2><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:20px;\"><h3 style=\"color:#c678dd;margin:0 0 12px 0;\">What is Interview Mode?</h3><p style=\"margin:0;line-height:1.6;\">A structured conversation flow where Claude <strong>interviews</strong> you to gather requirements before implementation. Instead of diving into code, Claude asks targeted questions, tracks your answers, and generates a comprehensive design document.</p></div><h3 style=\"color:#f59e0b;margin:16px 0 12px 0;\">Core Concept</h3><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;font-family:monospace;line-height:1.8;\"><pre style=\"margin:0;color:#98c379;\">┌─ Interview Kontask ──────────────────────────────────┐\n│ 🎤 Feature: User Authentication                       │\n│                                                       │\n│ ┌─ Questions ───────────────────────────────────────┐ │\n│ │ [✓] Q1: What auth methods?    → \"OAuth + email\"  │ │\n│ │ [✓] Q2: Session storage?      → \"JWT in cookie\"  │ │\n│ │ [○] Q3: Password requirements? ← Click to answer │ │\n│ │ [ ] Q4: 2FA support needed?                      │ │\n│ └───────────────────────────────────────────────────┘ │\n│                                                       │\n│ Progress: ████████░░ 2/4 answered                     │\n│                                                       │\n│ [Generate Design Doc]  [Add More Questions]           │\n└───────────────────────────────────────────────────────┘</pre></div><h3 style=\"color:#f59e0b;margin:20px 0 12px 0;\">Implementation Architecture</h3><h4 style=\"color:#61afef;margin:16px 0 8px 0;\">1. New Kontask Type: <code style=\"background:#374151;padding:2px 6px;border-radius:4px;\">interview</code></h4><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><pre style=\"margin:0;color:#e5c07b;\">// kontask-types.ts\nexport type KontaskType = \n  | ... existing types ...\n  | \"interview\";   // NEW: Structured design conversation\n\nexport interface InterviewQuestion {\n  id: string;           // q1, q2, etc.\n  question: string;     // The question text\n  hint?: string;        // Optional guidance\n  answer?: string;      // User's response (null if unanswered)\n  answeredAt?: string;  // ISO timestamp\n}\n\nexport interface InterviewContext {\n  topic: string;           // What we're designing\n  questions: InterviewQuestion[];\n  designDoc?: string;      // Generated after all answered\n  status: 'gathering' | 'complete' | 'implementing';\n}</pre></div><h4 style=\"color:#61afef;margin:16px 0 8px 0;\">2. New Template: <code style=\"background:#374151;padding:2px 6px;border-radius:4px;\">interview</code></h4><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><pre style=\"margin:0;color:#e5c07b;\">// kontask-templates.ts\ntemplate: \"interview\"\ndata: {\n  topic: \"User Authentication\",\n  questions: [...],\n  allowAddQuestions: true,\n  showProgress: true\n}</pre></div><h4 style=\"color:#61afef;margin:16px 0 8px 0;\">3. UX Flow</h4><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\"><ol style=\"margin:0;padding-left:20px;line-height:2;\"><li><strong>User triggers interview:</strong> \"Let's design the auth feature\" or Claude initiates</li><li><strong>Claude creates interview kontask</strong> with initial questions</li><li><strong>User clicks a question</strong> → Prompt auto-populates with context</li><li><strong>User answers</strong> → Response stored in kontask, next question highlighted</li><li><strong>Repeat</strong> until all questions answered (or user says \"done\")</li><li><strong>Claude generates design doc</strong> from accumulated answers</li><li><strong>User approves</strong> → Implementation begins</li></ol></div><h3 style=\"color:#f59e0b;margin:20px 0 12px 0;\">Files to Modify</h3><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\"><table style=\"width:100%;border-collapse:collapse;\"><tr><td style=\"padding:8px;border-bottom:1px solid #374151;color:#98c379;\">konui/src/kontask-types.ts</td><td style=\"padding:8px;border-bottom:1px solid #374151;\">Add <code>interview</code> type + InterviewContext</td></tr><tr><td style=\"padding:8px;border-bottom:1px solid #374151;color:#98c379;\">konui/src/kontask-templates.ts</td><td style=\"padding:8px;border-bottom:1px solid #374151;\">Add <code>renderInterview()</code> template</td></tr><tr><td style=\"padding:8px;border-bottom:1px solid #374151;color:#98c379;\">konui/src/views/kontask-detail.ts</td><td style=\"padding:8px;border-bottom:1px solid #374151;\">Handle interview interactions</td></tr><tr><td style=\"padding:8px;border-bottom:1px solid #374151;color:#98c379;\">konui/src/router.ts</td><td style=\"padding:8px;border-bottom:1px solid #374151;\">Add answer submission endpoint</td></tr><tr><td style=\"padding:8px;color:#98c379;\">CLAUDE.md</td><td style=\"padding:8px;\">Document interview kontask usage</td></tr></table></div><h3 style=\"color:#f59e0b;margin:20px 0 12px 0;\">Key Design Decisions</h3><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\"><ul style=\"margin:0;padding-left:20px;line-height:1.8;\"><li><strong>Question click → Prefilled prompt:</strong> \"[Interview: Auth] Q3: What are the password requirements?\"</li><li><strong>Answers stored in kontask context:</strong> Single source of truth, persists across sessions</li><li><strong>Progressive disclosure:</strong> Show answered questions collapsed, current question expanded</li><li><strong>Claude can add questions:</strong> Based on previous answers, refine the interview</li><li><strong>Design doc as kontask output:</strong> Final artifact is a structured markdown document</li></ul></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-top:20px;\"><h4 style=\"margin:0 0 8px 0;color:#fff;\">What's Next?</h4><p style=\"color:#9ca3af;margin:0;\">Choose how to proceed:</p></div></div>",
    "choices": [
      {
        "label": "Start implementation",
        "value": "Let's start implementing Interview Mode. Begin with Phase 1: Add the interview kontask type and InterviewContext interface to kontask-types.ts",
        "primary": true
      },
      {
        "label": "Discuss UX details",
        "value": "Before implementing, let's discuss the UX details of Interview Mode - specifically how question clicks should work and the mobile experience"
      },
      {
        "label": "Add to backlog",
        "value": "Add Interview Mode implementation to the backlog with this design as the spec, but don't start implementing yet"
      },
      {
        "label": "Show questions example",
        "value": "Show me an example of what the interview questions would look like for a real feature design conversation"
      }
    ],
    "requestedAt": "2026-01-07T00:00:00.000Z",
    "requestId": "caaaa78b-c9ba-42c2-80dd-b2d6a5cf422b",
    "turnTiming": {
      "totalMs": 76688,
      "ttfeMs": 40,
      "thinkingMs": 76648,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 100,
      "toolsPct": 0,
      "ttfePct": 0
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T04:59:34.378Z",
  "updatedAt": "2026-01-07T04:59:45.950Z",
  "requestId": "caaaa78b-c9ba-42c2-80dd-b2d6a5cf422b",
  "scope": "vibetools",
  "tags": [
    "interview-mode",
    "architecture",
    "planning"
  ],
  "targetUser": "claude"
}