@hustle-together/api-dev-tools 2.0.7 → 3.1.0

package/templates/api-dev-state.json

@@ -1,52 +1,107 @@
 {
-  "version": "1.1.0",
+  "version": "3.0.0",
   "created_at": null,
   "endpoint": null,
   "library": null,
+  "session_id": null,
+  "turn_count": 0,
+  "last_turn_timestamp": null,
   "research_queries": [],
   "prompt_detections": [],
   "phases": {
+    "disambiguation": {
+      "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",
-      "description": "Initial scope understanding"
+      "confirmed": false,
+      "user_question_asked": false,
+      "user_confirmed": false,
+      "description": "Initial scope understanding and confirmation"
     },
     "research_initial": {
       "status": "not_started",
       "sources": [],
+      "summary_shown": false,
+      "user_question_asked": false,
+      "user_approved": false,
       "description": "Context7/WebSearch research for live documentation"
     },
     "interview": {
       "status": "not_started",
       "questions": [],
-      "description": "Structured interview about requirements"
+      "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": {
       "status": "not_started",
       "sources": [],
-      "description": "Deep dive based on interview answers"
+      "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,
+      "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": [],
+      "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_scenarios": [],
+      "matrix_shown": false,
+      "user_question_asked": false,
+      "user_approved": false,
       "description": "Write failing tests first"
     },
     "tdd_green": {
       "status": "not_started",
       "implementation_file": null,
+      "all_tests_passing": false,
       "description": "Minimal implementation to pass tests"
     },
+    "verify": {
+      "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": {
       "status": "not_started",
       "description": "Code cleanup while keeping tests green"
@@ -54,7 +109,24 @@
     "documentation": {
       "status": "not_started",
       "files_updated": [],
-      "description": "Update manifests, OpenAPI, examples"
+      "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": {
@@ -62,6 +134,9 @@
     "schema_matches_docs": false,
     "tests_cover_params": false,
     "all_tests_passing": false,
-    "coverage_percent": null
-  }
+    "coverage_percent": null,
+    "post_green_verification": false
+  },
+  "research_index": {},
+  "reground_history": []
 }

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>
+  );
+}