@hustle-together/api-dev-tools 3.0.0 → 3.2.0

package/templates/api-dev-state.json

@@ -13,17 +13,23 @@
       "status": "not_started",
       "clarified": null,
       "search_variations": [],
+      "user_question_asked": false,
+      "user_selected": null,
       "description": "Pre-research disambiguation to clarify ambiguous requests"
     },
     "scope": {
       "status": "not_started",
       "confirmed": false,
+      "user_question_asked": false,
+      "user_confirmed": false,
       "description": "Initial scope understanding and confirmation"
     },
     "research_initial": {
       "status": "not_started",
       "sources": [],
-      "summary_approved": false,
+      "summary_shown": false,
+      "user_question_asked": false,
+      "user_approved": false,
       "description": "Context7/WebSearch research for live documentation"
     },
     "interview": {
@@ -32,6 +38,8 @@
       "user_question_count": 0,
       "structured_question_count": 0,
       "decisions": {},
+      "user_question_asked": false,
+      "user_completed": false,
       "description": "Structured interview about requirements (generated FROM research)"
     },
     "research_deep": {
@@ -39,27 +47,40 @@
       "sources": [],
       "proposed_searches": [],
       "approved_searches": [],
+      "executed_searches": [],
       "skipped_searches": [],
+      "proposals_shown": false,
+      "user_question_asked": false,
+      "user_approved": false,
       "description": "Deep dive based on interview answers (adaptive, not shotgun)"
     },
     "schema_creation": {
       "status": "not_started",
       "schema_file": null,
-      "schema_approved": false,
+      "fields_count": 0,
+      "schema_shown": false,
+      "user_question_asked": false,
+      "user_confirmed": false,
       "description": "Zod schema creation from research"
     },
     "environment_check": {
       "status": "not_started",
-      "keys_verified": [],
+      "keys_required": [],
+      "keys_found": [],
       "keys_missing": [],
-      "confirmed": false,
+      "env_shown": false,
+      "user_question_asked": false,
+      "user_ready": false,
       "description": "API key and environment verification"
     },
     "tdd_red": {
       "status": "not_started",
       "test_file": null,
       "test_count": 0,
-      "test_matrix_approved": false,
+      "test_scenarios": [],
+      "matrix_shown": false,
+      "user_question_asked": false,
+      "user_approved": false,
       "description": "Write failing tests first"
     },
     "tdd_green": {
@@ -72,8 +93,13 @@
       "status": "not_started",
       "gaps_found": 0,
       "gaps_fixed": 0,
+      "gaps_skipped": 0,
       "intentional_omissions": [],
       "re_research_done": false,
+      "gap_analysis_shown": false,
+      "user_question_asked": false,
+      "user_decided": false,
+      "user_decision": null,
       "description": "Re-research after Green to verify implementation matches docs"
     },
     "tdd_refactor": {
@@ -86,9 +112,23 @@
       "manifest_updated": false,
       "openapi_updated": false,
       "research_cached": false,
+      "checklist_shown": false,
+      "user_question_asked": false,
+      "user_confirmed": false,
       "description": "Update manifests, OpenAPI, cache research"
     }
   },
+  "manifest_generation": {
+    "last_run": null,
+    "manifest_generated": false,
+    "parameters_extracted": false,
+    "test_results_collected": false,
+    "output_files": {
+      "manifest": "src/app/api-test/api-tests-manifest.json",
+      "parameters": "src/app/api-test/parameter-matrix.json",
+      "results": "src/app/api-test/test-results.json"
+    }
+  },
   "verification": {
     "all_sources_fetched": false,
     "schema_matches_docs": false,

package/templates/api-test/page.tsx

@@ -0,0 +1,315 @@
+/**
+ * API Test UI Page
+ *
+ * Displays test structure parsed from Vitest test files.
+ * Tests are the SOURCE OF TRUTH - this UI only displays them.
+ *
+ * @generated by @hustle-together/api-dev-tools v3.0
+ */
+
+'use client';
+
+import { useEffect, useState } from 'react';
+
+// ============================================
+// Types (mirror the API types)
+// ============================================
+
+interface TestCase {
+  name: string;
+  line: number;
+  status: 'pending' | 'passed' | 'failed' | 'skipped';
+  duration?: number;
+  error?: string;
+}
+
+interface TestGroup {
+  name: string;
+  line: number;
+  tests: TestCase[];
+  groups: TestGroup[];
+}
+
+interface TestFeature {
+  file: string;
+  relativePath: string;
+  groups: TestGroup[];
+  totalTests: number;
+  passedTests: number;
+  failedTests: number;
+  skippedTests: number;
+}
+
+interface TestStructure {
+  features: TestFeature[];
+  totalTests: number;
+  passedTests: number;
+  failedTests: number;
+  skippedTests: number;
+  parsedAt: string;
+}
+
+// ============================================
+// Components
+// ============================================
+
+function StatusBadge({ status }: { status: TestCase['status'] }) {
+  const colors = {
+    pending: 'bg-gray-500',
+    passed: 'bg-green-500',
+    failed: 'bg-red-500',
+    skipped: 'bg-yellow-500'
+  };
+
+  const icons = {
+    pending: '○',
+    passed: '✓',
+    failed: '✗',
+    skipped: '⊘'
+  };
+
+  return (
+    <span className={`${colors[status]} text-white text-xs px-2 py-0.5 rounded font-mono`}>
+      {icons[status]} {status}
+    </span>
+  );
+}
+
+function TestCaseItem({ test, filePath }: { test: TestCase; filePath: string }) {
+  return (
+    <div className="flex items-center gap-3 py-2 px-3 hover:bg-gray-800/50 rounded group">
+      <StatusBadge status={test.status} />
+      <span className="flex-1 text-gray-300">{test.name}</span>
+      <span className="text-gray-600 text-xs font-mono opacity-0 group-hover:opacity-100 transition-opacity">
+        {filePath}:{test.line}
+      </span>
+      {test.duration && (
+        <span className="text-gray-500 text-xs">{test.duration}ms</span>
+      )}
+    </div>
+  );
+}
+
+function TestGroupItem({
+  group,
+  filePath,
+  depth = 0
+}: {
+  group: TestGroup;
+  filePath: string;
+  depth?: number;
+}) {
+  const [expanded, setExpanded] = useState(true);
+  const totalTests = group.tests.length + group.groups.reduce((sum, g) => sum + g.tests.length, 0);
+
+  return (
+    <div className={`${depth > 0 ? 'ml-4 border-l border-gray-700 pl-3' : ''}`}>
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-2 w-full text-left py-2 px-2 hover:bg-gray-800/30 rounded"
+      >
+        <span className="text-gray-500">{expanded ? '▼' : '▶'}</span>
+        <span className="font-medium text-white">{group.name}</span>
+        <span className="text-gray-500 text-sm">({totalTests} tests)</span>
+      </button>
+
+      {expanded && (
+        <div className="mt-1">
+          {group.tests.map((test, i) => (
+            <TestCaseItem key={i} test={test} filePath={filePath} />
+          ))}
+          {group.groups.map((subgroup, i) => (
+            <TestGroupItem
+              key={i}
+              group={subgroup}
+              filePath={filePath}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TestFeatureCard({ feature }: { feature: TestFeature }) {
+  const [expanded, setExpanded] = useState(true);
+
+  const passRate = feature.totalTests > 0
+    ? Math.round((feature.passedTests / feature.totalTests) * 100)
+    : 0;
+
+  return (
+    <div className="bg-gray-900 border border-gray-800 rounded-lg overflow-hidden">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center justify-between p-4 hover:bg-gray-800/50"
+      >
+        <div className="flex items-center gap-3">
+          <span className="text-gray-500">{expanded ? '▼' : '▶'}</span>
+          <div>
+            <h3 className="font-mono text-white">{feature.file}</h3>
+            <p className="text-gray-500 text-sm">{feature.relativePath}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-green-400">{feature.passedTests} passed</span>
+            {feature.failedTests > 0 && (
+              <span className="text-red-400">{feature.failedTests} failed</span>
+            )}
+            {feature.skippedTests > 0 && (
+              <span className="text-yellow-400">{feature.skippedTests} skipped</span>
+            )}
+          </div>
+          <div className="w-20 h-2 bg-gray-700 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-green-500 transition-all"
+              style={{ width: `${passRate}%` }}
+            />
+          </div>
+        </div>
+      </button>
+
+      {expanded && (
+        <div className="border-t border-gray-800 p-4">
+          {feature.groups.map((group, i) => (
+            <TestGroupItem
+              key={i}
+              group={group}
+              filePath={feature.relativePath}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SummaryStats({ structure }: { structure: TestStructure }) {
+  return (
+    <div className="grid grid-cols-4 gap-4 mb-6">
+      <div className="bg-gray-900 border border-gray-800 rounded-lg p-4">
+        <div className="text-3xl font-bold text-white">{structure.totalTests}</div>
+        <div className="text-gray-500 text-sm">Total Tests</div>
+      </div>
+      <div className="bg-gray-900 border border-green-900 rounded-lg p-4">
+        <div className="text-3xl font-bold text-green-400">{structure.passedTests}</div>
+        <div className="text-gray-500 text-sm">Passed</div>
+      </div>
+      <div className="bg-gray-900 border border-red-900 rounded-lg p-4">
+        <div className="text-3xl font-bold text-red-400">{structure.failedTests}</div>
+        <div className="text-gray-500 text-sm">Failed</div>
+      </div>
+      <div className="bg-gray-900 border border-yellow-900 rounded-lg p-4">
+        <div className="text-3xl font-bold text-yellow-400">{structure.skippedTests}</div>
+        <div className="text-gray-500 text-sm">Skipped</div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Main Page
+// ============================================
+
+export default function ApiTestPage() {
+  const [structure, setStructure] = useState<TestStructure | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchTestStructure = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch('/api/test-structure');
+      if (!response.ok) {
+        throw new Error(`Failed to fetch: ${response.status}`);
+      }
+      const data = await response.json();
+      setStructure(data);
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTestStructure();
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-black text-white p-8">
+      <div className="max-w-6xl mx-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold">API Test Suite</h1>
+            <p className="text-gray-500 mt-1">
+              Parsed from Vitest test files (source of truth)
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <a
+              href="http://localhost:51204/__vitest__/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg text-sm font-medium transition-colors"
+            >
+              Open Vitest UI
+            </a>
+            <button
+              onClick={fetchTestStructure}
+              disabled={loading}
+              className="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+            >
+              {loading ? 'Loading...' : 'Refresh'}
+            </button>
+          </div>
+        </div>
+
+        {/* Error State */}
+        {error && (
+          <div className="bg-red-900/50 border border-red-700 rounded-lg p-4 mb-6">
+            <p className="text-red-400">{error}</p>
+          </div>
+        )}
+
+        {/* Loading State */}
+        {loading && !structure && (
+          <div className="flex items-center justify-center py-20">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
+          </div>
+        )}
+
+        {/* Content */}
+        {structure && (
+          <>
+            <SummaryStats structure={structure} />
+
+            <div className="space-y-4">
+              {structure.features.length === 0 ? (
+                <div className="text-center py-20 text-gray-500">
+                  <p className="text-lg">No test files found</p>
+                  <p className="mt-2 text-sm">
+                    Create test files matching *.test.ts or *.spec.ts patterns
+                  </p>
+                </div>
+              ) : (
+                structure.features.map((feature, i) => (
+                  <TestFeatureCard key={i} feature={feature} />
+                ))
+              )}
+            </div>
+
+            <div className="mt-6 text-center text-gray-600 text-sm">
+              Parsed at {new Date(structure.parsedAt).toLocaleString()} •{' '}
+              {structure.features.length} test files
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/api-test/test-structure/route.ts

@@ -0,0 +1,269 @@
+/**
+ * Test Structure Parser API
+ *
+ * Parses Vitest test files and returns the test structure for UI display.
+ * Vitest tests are the SOURCE OF TRUTH - this API only reads and parses them.
+ *
+ * @generated by @hustle-together/api-dev-tools v3.0
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+
+// ============================================
+// Types
+// ============================================
+
+interface TestCase {
+  name: string;
+  line: number;
+  status: 'pending' | 'passed' | 'failed' | 'skipped';
+  duration?: number;
+  error?: string;
+}
+
+interface TestGroup {
+  name: string;
+  line: number;
+  tests: TestCase[];
+  groups: TestGroup[];
+}
+
+interface TestFeature {
+  file: string;
+  relativePath: string;
+  groups: TestGroup[];
+  totalTests: number;
+  passedTests: number;
+  failedTests: number;
+  skippedTests: number;
+}
+
+interface TestStructure {
+  features: TestFeature[];
+  totalTests: number;
+  passedTests: number;
+  failedTests: number;
+  skippedTests: number;
+  parsedAt: string;
+}
+
+// ============================================
+// Parser Logic (brace counting + regex)
+// ============================================
+
+/**
+ * Parse a single test file and extract describe/it blocks
+ * Uses brace counting to handle nested structures
+ */
+function parseTestFile(content: string, filePath: string): TestFeature {
+  const lines = content.split('\n');
+  const rootGroups: TestGroup[] = [];
+  const groupStack: TestGroup[] = [];
+
+  let braceCount = 0;
+  let inDescribe = false;
+  let currentDescribeBraceStart = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const lineNum = i + 1;
+
+    // Match describe blocks: describe('name', () => { or describe("name", function() {
+    const describeMatch = line.match(/describe\s*\(\s*['"`]([^'"`]+)['"`]/);
+    if (describeMatch) {
+      const group: TestGroup = {
+        name: describeMatch[1],
+        line: lineNum,
+        tests: [],
+        groups: []
+      };
+
+      if (groupStack.length > 0) {
+        groupStack[groupStack.length - 1].groups.push(group);
+      } else {
+        rootGroups.push(group);
+      }
+
+      groupStack.push(group);
+      inDescribe = true;
+      currentDescribeBraceStart = braceCount;
+    }
+
+    // Match it/test blocks: it('name', ...) or test('name', ...)
+    const testMatch = line.match(/(?:it|test)\s*\(\s*['"`]([^'"`]+)['"`]/);
+    if (testMatch && groupStack.length > 0) {
+      const testCase: TestCase = {
+        name: testMatch[1],
+        line: lineNum,
+        status: 'pending' // Will be updated by test runner results
+      };
+
+      // Check for .skip or .todo
+      if (line.includes('.skip') || line.includes('.todo')) {
+        testCase.status = 'skipped';
+      }
+
+      groupStack[groupStack.length - 1].tests.push(testCase);
+    }
+
+    // Count braces to track scope
+    const openBraces = (line.match(/{/g) || []).length;
+    const closeBraces = (line.match(/}/g) || []).length;
+    braceCount += openBraces - closeBraces;
+
+    // Pop group from stack when we close its scope
+    if (inDescribe && braceCount <= currentDescribeBraceStart && groupStack.length > 0) {
+      groupStack.pop();
+      if (groupStack.length === 0) {
+        inDescribe = false;
+      } else {
+        // Update brace start for parent describe
+        currentDescribeBraceStart = braceCount;
+      }
+    }
+  }
+
+  // Count tests
+  const countTests = (groups: TestGroup[]): { total: number; passed: number; failed: number; skipped: number } => {
+    let total = 0, passed = 0, failed = 0, skipped = 0;
+
+    for (const group of groups) {
+      for (const test of group.tests) {
+        total++;
+        if (test.status === 'passed') passed++;
+        else if (test.status === 'failed') failed++;
+        else if (test.status === 'skipped') skipped++;
+      }
+      const nested = countTests(group.groups);
+      total += nested.total;
+      passed += nested.passed;
+      failed += nested.failed;
+      skipped += nested.skipped;
+    }
+
+    return { total, passed, failed, skipped };
+  };
+
+  const counts = countTests(rootGroups);
+
+  return {
+    file: path.basename(filePath),
+    relativePath: filePath,
+    groups: rootGroups,
+    totalTests: counts.total,
+    passedTests: counts.passed,
+    failedTests: counts.failed,
+    skippedTests: counts.skipped
+  };
+}
+
+/**
+ * Find all test files in the project
+ */
+function findTestFiles(baseDir: string): string[] {
+  const testFiles: string[] = [];
+  const testPatterns = [
+    '**/*.test.ts',
+    '**/*.test.tsx',
+    '**/*.spec.ts',
+    '**/*.spec.tsx',
+    '**/__tests__/**/*.ts',
+    '**/__tests__/**/*.tsx'
+  ];
+
+  function walkDir(dir: string) {
+    try {
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+      for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+
+        // Skip node_modules and hidden directories
+        if (entry.isDirectory()) {
+          if (entry.name === 'node_modules' || entry.name.startsWith('.')) {
+            continue;
+          }
+          walkDir(fullPath);
+        } else if (entry.isFile()) {
+          // Check if file matches test patterns
+          if (
+            entry.name.endsWith('.test.ts') ||
+            entry.name.endsWith('.test.tsx') ||
+            entry.name.endsWith('.spec.ts') ||
+            entry.name.endsWith('.spec.tsx')
+          ) {
+            testFiles.push(fullPath);
+          }
+        }
+      }
+    } catch (error) {
+      // Ignore permission errors
+    }
+  }
+
+  walkDir(baseDir);
+  return testFiles;
+}
+
+// ============================================
+// API Handler
+// ============================================
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const testPath = searchParams.get('path');
+    const baseDir = process.cwd();
+
+    let testFiles: string[];
+
+    if (testPath) {
+      // Parse specific test file
+      const fullPath = path.join(baseDir, testPath);
+      if (!fs.existsSync(fullPath)) {
+        return NextResponse.json(
+          { error: `Test file not found: ${testPath}` },
+          { status: 404 }
+        );
+      }
+      testFiles = [fullPath];
+    } else {
+      // Find all test files
+      testFiles = findTestFiles(baseDir);
+    }
+
+    const features: TestFeature[] = [];
+
+    for (const file of testFiles) {
+      try {
+        const content = fs.readFileSync(file, 'utf-8');
+        const relativePath = path.relative(baseDir, file);
+        const feature = parseTestFile(content, relativePath);
+        features.push(feature);
+      } catch (error) {
+        // Skip files that can't be read
+        console.error(`Failed to parse ${file}:`, error);
+      }
+    }
+
+    // Aggregate counts
+    const structure: TestStructure = {
+      features,
+      totalTests: features.reduce((sum, f) => sum + f.totalTests, 0),
+      passedTests: features.reduce((sum, f) => sum + f.passedTests, 0),
+      failedTests: features.reduce((sum, f) => sum + f.failedTests, 0),
+      skippedTests: features.reduce((sum, f) => sum + f.skippedTests, 0),
+      parsedAt: new Date().toISOString()
+    };
+
+    return NextResponse.json(structure);
+  } catch (error) {
+    console.error('Test structure parser error:', error);
+    return NextResponse.json(
+      { error: 'Failed to parse test structure', details: String(error) },
+      { status: 500 }
+    );
+  }
+}