@agile-vibe-coding/avc 0.1.1 → 0.3.1

package/kanban/client/src/components/ceremony/steps/ArchitectureStep.jsx

@@ -0,0 +1,150 @@
+import { useState } from 'react';
+import { useCeremonyStore } from '../../../store/ceremonyStore';
+import { AskArchPopup } from '../AskArchPopup';
+
+const COST_TIER_COLOR = {
+  'Free': 'text-green-600',
+  '$':    'text-green-600',
+  '$$':   'text-amber-500',
+  '$$$':  'text-orange-500',
+  '$$$$': 'text-red-500',
+};
+
+function ArchCard({ arch, selected, onSelect }) {
+  return (
+    <button
+      onClick={() => onSelect(arch)}
+      className={`text-left rounded-xl border-2 p-4 w-full transition-all ${
+        selected
+          ? 'border-indigo-500 bg-indigo-50'
+          : 'border-slate-200 hover:border-slate-300 bg-white'
+      }`}
+    >
+      <div className="flex items-start justify-between gap-2 mb-2">
+        <span className="font-semibold text-slate-900 text-sm">{arch.name}</span>
+        {arch.requiresCloudProvider ? (
+          <span className="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full whitespace-nowrap">
+            Cloud
+          </span>
+        ) : (
+          <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full whitespace-nowrap">
+            Local
+          </span>
+        )}
+      </div>
+
+      <p className="text-xs text-slate-600 mb-2 line-clamp-3">{arch.description}</p>
+
+      {arch.bestFor && (
+        <p className="text-xs text-slate-500 italic">Best for: {arch.bestFor}</p>
+      )}
+
+      {arch.costTier && (
+        <p className={`mt-2 text-sm font-semibold ${COST_TIER_COLOR[arch.costTier] ?? 'text-slate-500'}`}>
+          {arch.costTier}
+        </p>
+      )}
+
+      {arch.migrationPath && (
+        <div className="mt-2 text-xs text-slate-400">
+          Migration to cloud: {arch.migrationPath.estimatedMigrationEffort} (
+          {arch.migrationPath.migrationComplexity})
+        </div>
+      )}
+    </button>
+  );
+}
+
+export function ArchitectureStep({ onNext, onBack, analyzing, onOpenSettings }) {
+  const { archOptions, selectedArch, setSelectedArch, setArchOptions } = useCeremonyStore();
+  const [showAskArch, setShowAskArch] = useState(false);
+
+  if (!archOptions || archOptions.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-16">
+        <div className="text-center text-slate-400">
+          <p>Loading architecture recommendations...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-semibold text-slate-900">Architecture Selection</h2>
+          <button
+            type="button"
+            onClick={() => setShowAskArch(true)}
+            disabled={analyzing}
+            className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1 transition-colors disabled:opacity-40"
+          >
+            ✨ Ask a Model
+          </button>
+        </div>
+        <p className="text-sm text-slate-500 mt-1">
+          Choose the deployment architecture that fits your project best.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {archOptions.map((arch, i) => (
+          <ArchCard
+            key={i}
+            arch={arch}
+            selected={selectedArch === arch}
+            onSelect={setSelectedArch}
+          />
+        ))}
+      </div>
+
+      <div className="flex items-center justify-between pt-2">
+        <button
+          type="button"
+          onClick={onBack}
+          disabled={analyzing}
+          className="text-sm text-slate-400 hover:text-slate-600 disabled:opacity-40 transition-colors"
+        >
+          ← Back
+        </button>
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={onNext}
+            disabled={analyzing}
+            className="text-sm text-slate-400 hover:text-slate-600 disabled:opacity-40 transition-colors"
+          >
+            Skip — let the model decide
+          </button>
+          <button
+            onClick={onNext}
+            disabled={!selectedArch || analyzing}
+            className="px-5 py-2 bg-slate-900 text-white text-sm font-medium rounded-lg disabled:opacity-40 hover:bg-slate-700 transition-colors flex items-center gap-2"
+          >
+            {analyzing ? (
+              <>
+                <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                Preparing requirements…
+              </>
+            ) : (
+              'Continue'
+            )}
+          </button>
+        </div>
+      </div>
+
+      {showAskArch && (
+        <AskArchPopup
+          onUse={(arch) => {
+            setArchOptions([...archOptions, arch]);
+            setSelectedArch(arch);
+            setShowAskArch(false);
+          }}
+          onClose={() => setShowAskArch(false)}
+          onOpenSettings={onOpenSettings}
+        />
+      )}
+    </div>
+  );
+}

package/kanban/client/src/components/ceremony/steps/CompleteStep.jsx

@@ -0,0 +1,136 @@
+import { useCeremonyStore } from '../../../store/ceremonyStore';
+
+function IssueTag({ severity }) {
+  const cls =
+    severity === 'critical' ? 'bg-red-100 text-red-700' :
+    severity === 'major'    ? 'bg-amber-100 text-amber-700' :
+                              'bg-slate-100 text-slate-500';
+  return (
+    <span className={`flex-shrink-0 px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase ${cls}`}>
+      {severity}
+    </span>
+  );
+}
+
+function FileTag({ path }) {
+  const short = path?.split('/').slice(-2).join('/') || path;
+  return (
+    <span className="inline-flex items-center gap-1 bg-green-50 border border-green-200 text-green-700 text-xs px-2 py-1 rounded-md font-mono">
+      <span>📄</span>
+      {short}
+    </span>
+  );
+}
+
+function Stat({ label, value }) {
+  return (
+    <div className="bg-slate-50 rounded-lg border border-slate-200 p-3 text-center">
+      <div className="text-lg font-bold text-slate-900">{value}</div>
+      <div className="text-xs text-slate-500">{label}</div>
+    </div>
+  );
+}
+
+export function CompleteStep({ onClose }) {
+  const { ceremonyResult } = useCeremonyStore();
+  const r = ceremonyResult || {};
+
+  const tokenInput = r.tokenUsage?.input || r.tokenUsage?.inputTokens || 0;
+  const tokenOutput = r.tokenUsage?.output || r.tokenUsage?.outputTokens || 0;
+  const tokenTotal = r.tokenUsage?.total || r.tokenUsage?.totalTokens || tokenInput + tokenOutput;
+  const files = r.outputPath && r.contextPath
+    ? [r.outputPath, r.contextPath]
+    : r.filesGenerated || [];
+
+  // Only show real validation issues; never show the example preview
+  const rawIssues = Array.isArray(r.validationIssues) ? r.validationIssues : [];
+
+  // Group duplicate rule applications by ruleId
+  const issueMap = {};
+  for (const issue of rawIssues) {
+    const key = issue.ruleId || issue.name;
+    if (!issueMap[key]) {
+      issueMap[key] = { ...issue, count: 1, iterations: issue.iteration ? [issue.iteration] : [] };
+    } else {
+      issueMap[key].count++;
+      if (issue.iteration && !issueMap[key].iterations.includes(issue.iteration)) {
+        issueMap[key].iterations.push(issue.iteration);
+      }
+    }
+  }
+  const issues = Object.values(issueMap);
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h2 className="text-xl font-semibold text-slate-900">Documentation Generated!</h2>
+        <p className="text-sm text-slate-500 mt-1">
+          Your project documentation is ready. The kanban board will refresh automatically.
+        </p>
+      </div>
+
+      {files.length > 0 && (
+        <div>
+          <p className="text-xs font-medium text-slate-500 mb-2">Files created</p>
+          <div className="flex flex-wrap gap-2">
+            {files.map((f, i) => (
+              <FileTag key={i} path={f} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 gap-3">
+        <Stat label="Input tokens" value={tokenInput.toLocaleString()} />
+        <Stat label="Output tokens" value={tokenOutput.toLocaleString()} />
+      </div>
+
+      {r.model && (
+        <p className="text-xs text-center text-slate-400">
+          Model: <span className="font-mono">{r.model}</span>
+        </p>
+      )}
+
+      {issues.length > 0 && (
+        <div>
+          <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">
+            Quality fixes applied
+          </p>
+          <div className="space-y-1.5">
+            {issues.map((issue, i) => (
+              <div key={i} className="bg-amber-50 border border-amber-100 rounded-md px-3 py-2 text-xs">
+                <div className="flex items-center gap-2">
+                  <IssueTag severity={issue.severity} />
+                  <span className="text-slate-400 flex-shrink-0">{issue.stage}</span>
+                  <span className="text-slate-700 font-medium">{issue.name}</span>
+                  {issue.count > 1 && (
+                    <span className="ml-auto flex-shrink-0 bg-amber-200 text-amber-800 text-[10px] font-bold px-1.5 py-0.5 rounded-full">
+                      ×{issue.count}
+                    </span>
+                  )}
+                  {issue.iterations?.length > 0 && (
+                    <span className="flex-shrink-0 text-slate-400">
+                      iter {issue.iterations.sort((a, b) => a - b).join(', ')}
+                    </span>
+                  )}
+                </div>
+                {issue.description && (
+                  <p className="mt-1 text-slate-500 pl-1">{issue.description}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="flex justify-center pt-2">
+        <button
+          onClick={onClose}
+          className="px-6 py-2 bg-slate-900 text-white text-sm font-medium rounded-lg hover:bg-slate-700 transition-colors"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  );
+}

package/kanban/client/src/components/ceremony/steps/DatabaseStep.jsx

@@ -0,0 +1,202 @@
+import { Info, BarChart2 } from 'lucide-react';
+import { useCeremonyStore } from '../../../store/ceremonyStore';
+
+/** Convert a monetary string like "$150-280/month" into a relative $ tier. */
+function costTier(monthly) {
+  if (!monthly) return null;
+  const str = String(monthly).toLowerCase();
+  const nums = (str.match(/\d+/g) || []).map(Number).filter((n) => n > 0);
+  const avg = nums.length ? nums.reduce((a, b) => a + b, 0) / nums.length : 0;
+  if (avg === 0) return { symbols: 'Free', color: 'text-green-600' };
+  if (avg <= 50)  return { symbols: '$',    color: 'text-green-600' };
+  if (avg <= 150) return { symbols: '$$',   color: 'text-amber-500' };
+  if (avg <= 350) return { symbols: '$$$',  color: 'text-orange-500' };
+  return           { symbols: '$$$$', color: 'text-red-500' };
+}
+
+function DbOptionCard({ option, type, selected, onSelect }) {
+  const label = type === 'sql' ? 'SQL' : 'NoSQL';
+  const color = type === 'sql' ? 'blue' : 'emerald';
+
+  const colorMap = {
+    blue: {
+      badge: 'bg-blue-100 text-blue-700',
+      border: 'border-blue-500',
+      bg: 'bg-blue-50',
+      btn: 'ring-blue-500',
+    },
+    emerald: {
+      badge: 'bg-emerald-100 text-emerald-700',
+      border: 'border-emerald-500',
+      bg: 'bg-emerald-50',
+      btn: 'ring-emerald-500',
+    },
+  };
+  const c = colorMap[color];
+
+  return (
+    <button
+      onClick={() => onSelect(type)}
+      className={`text-left rounded-xl border-2 p-5 w-full transition-all ${
+        selected ? `${c.border} ${c.bg}` : 'border-slate-200 hover:border-slate-300 bg-white'
+      }`}
+    >
+      <div className="flex items-center gap-2 mb-3">
+        <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${c.badge}`}>{label}</span>
+        <span className="font-semibold text-slate-900">{option.database}</span>
+      </div>
+
+      {option.specificVersion && (
+        <p className="text-xs text-slate-500 mb-2">Version: {option.specificVersion}</p>
+      )}
+
+      {option.estimatedCosts && (() => {
+        const tier = costTier(option.estimatedCosts.monthly);
+        return tier ? (
+          <p className={`text-sm font-semibold mb-2 ${tier.color}`}>{tier.symbols}</p>
+        ) : null;
+      })()}
+
+      {option.keyStrengths && option.keyStrengths.length > 0 && (
+        <div className="mt-2">
+          <p className="text-xs font-medium text-slate-500 mb-1">Strengths</p>
+          <ul className="space-y-0.5">
+            {option.keyStrengths.slice(0, 3).map((s, i) => (
+              <li key={i} className="text-xs text-slate-600 flex items-start gap-1.5">
+                <span className="mt-1 w-1 h-1 rounded-full bg-slate-400 flex-shrink-0" />
+                {s}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {option.tradeoffs && (
+        <p className="text-xs text-slate-400 mt-2 italic">{option.tradeoffs}</p>
+      )}
+    </button>
+  );
+}
+
+export function DatabaseStep({ onNext, onBack, analyzing }) {
+  const { dbResult, dbChoice, setDbChoice } = useCeremonyStore();
+
+  if (!dbResult) {
+    return (
+      <div className="flex items-center justify-center py-16">
+        <div className="text-center text-slate-400">
+          <p>Loading database analysis...</p>
+        </div>
+      </div>
+    );
+  }
+
+  const { comparison, rationale } = dbResult;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold text-slate-900">Database Choice</h2>
+        <p className="text-sm text-slate-500 mt-1">
+          Choose between SQL and NoSQL based on your project's data needs.
+        </p>
+        {rationale && (
+          <p className="text-sm text-slate-600 mt-2 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2">
+            {rationale}
+          </p>
+        )}
+      </div>
+
+      {comparison && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <DbOptionCard
+            option={comparison.sqlOption}
+            type="sql"
+            selected={dbChoice === 'sql'}
+            onSelect={setDbChoice}
+          />
+          <DbOptionCard
+            option={comparison.nosqlOption}
+            type="nosql"
+            selected={dbChoice === 'nosql'}
+            onSelect={setDbChoice}
+          />
+        </div>
+      )}
+
+      {dbResult.keyMetrics && (
+        <div className="rounded-xl border border-slate-200 bg-slate-50 overflow-hidden">
+          <div className="flex items-center gap-1.5 px-4 py-2 border-b border-slate-200 bg-white">
+            <BarChart2 className="w-3.5 h-3.5 text-slate-400" />
+            <span className="text-xs font-semibold text-slate-500">Project metrics analysed</span>
+          </div>
+          <div className="flex divide-x divide-slate-200">
+            {dbResult.keyMetrics.estimatedReadWriteRatio && (
+              <div className="flex-1 px-4 py-3">
+                <p className="text-[10px] font-medium text-slate-400 uppercase tracking-wide mb-1">Read / Write ratio</p>
+                <p className="text-sm font-semibold text-slate-700">{dbResult.keyMetrics.estimatedReadWriteRatio}</p>
+              </div>
+            )}
+            {dbResult.keyMetrics.expectedThroughput && (
+              <div className="flex-1 px-4 py-3">
+                <p className="text-[10px] font-medium text-slate-400 uppercase tracking-wide mb-1">Expected throughput</p>
+                <p className="text-sm font-semibold text-slate-700">{dbResult.keyMetrics.expectedThroughput}</p>
+              </div>
+            )}
+            {dbResult.keyMetrics.dataComplexity && (
+              <div className="flex-1 px-4 py-3">
+                <p className="text-[10px] font-medium text-slate-400 uppercase tracking-wide mb-1">Data complexity</p>
+                <p className="text-sm font-semibold text-slate-700">{dbResult.keyMetrics.dataComplexity}</p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="flex items-start gap-2 px-1 py-2 text-xs text-slate-400">
+        <Info className="w-3.5 h-3.5 flex-shrink-0 mt-0.5 text-slate-300" />
+        <p>
+          The SQL and NoSQL candidates above are AI-suggested based on your mission and scope —
+          specific technology (e.g. PostgreSQL vs MySQL, MongoDB vs DynamoDB) and configuration
+          will be refined during architecture analysis. Skipping lets the model choose the best fit autonomously,
+          which may include a vector database, a time-series store, or no database at all.
+        </p>
+      </div>
+
+      <div className="flex items-center justify-between pt-2">
+        <button
+          type="button"
+          onClick={onBack}
+          disabled={analyzing}
+          className="text-sm text-slate-400 hover:text-slate-600 disabled:opacity-40 transition-colors"
+        >
+          ← Back
+        </button>
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={onNext}
+            disabled={analyzing}
+            className="text-sm text-slate-400 hover:text-slate-600 disabled:opacity-40 transition-colors"
+          >
+            Skip — let the model decide
+          </button>
+          <button
+            onClick={onNext}
+            disabled={!dbChoice || analyzing}
+            className="px-5 py-2 bg-slate-900 text-white text-sm font-medium rounded-lg disabled:opacity-40 hover:bg-slate-700 transition-colors flex items-center gap-2"
+          >
+            {analyzing ? (
+              <>
+                <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                Analyzing...
+              </>
+            ) : (
+              'Continue'
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/kanban/client/src/components/ceremony/steps/DeploymentStep.jsx

@@ -0,0 +1,123 @@
+import { Info } from 'lucide-react';
+import { useCeremonyStore } from '../../../store/ceremonyStore';
+
+const strategies = [
+  {
+    id: 'local-mvp',
+    icon: '💻',
+    title: 'Local MVP First',
+    subtitle: 'Start on your machine, migrate later',
+    bullets: [
+      'Zero cloud costs during development',
+      'Fast iteration — no deployment delays',
+      'SQLite or local PostgreSQL/MongoDB',
+      'Docker Compose for production parity',
+    ],
+    color: 'blue',
+  },
+  {
+    id: 'cloud',
+    icon: '☁️',
+    title: 'Cloud Deployment',
+    subtitle: 'Production-ready from day one',
+    bullets: [
+      'Managed infrastructure (AWS / Azure / GCP)',
+      'Auto-scaling and high availability',
+      'Managed databases with backups',
+      'CI/CD pipeline recommendations',
+      'Monthly cost estimates included',
+    ],
+    color: 'purple',
+  },
+];
+
+export function DeploymentStep({ onNext }) {
+  const { strategy, setStrategy } = useCeremonyStore();
+
+  const colorMap = {
+    blue: {
+      border: 'border-blue-500',
+      bg: 'bg-blue-50',
+      icon: 'text-blue-600',
+      bullet: 'bg-blue-500',
+      btn: 'bg-blue-600 hover:bg-blue-700',
+    },
+    purple: {
+      border: 'border-purple-500',
+      bg: 'bg-purple-50',
+      icon: 'text-purple-600',
+      bullet: 'bg-purple-500',
+      btn: 'bg-purple-600 hover:bg-purple-700',
+    },
+  };
+
+  const handleSelect = (id) => {
+    setStrategy(id);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold text-slate-900">Deployment Strategy</h2>
+        <p className="text-sm text-slate-500 mt-1">
+          Choose how you want to deploy your project. This shapes architecture and technology recommendations.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {strategies.map((s) => {
+          const c = colorMap[s.color];
+          const selected = strategy === s.id;
+          return (
+            <button
+              key={s.id}
+              onClick={() => handleSelect(s.id)}
+              className={`text-left rounded-xl border-2 p-5 transition-all ${
+                selected ? `${c.border} ${c.bg}` : 'border-slate-200 hover:border-slate-300 bg-white'
+              }`}
+            >
+              <div className={`text-3xl mb-3 ${c.icon}`}>{s.icon}</div>
+              <div className="font-semibold text-slate-900 text-base">{s.title}</div>
+              <div className="text-xs text-slate-500 mb-3">{s.subtitle}</div>
+              <ul className="space-y-1">
+                {s.bullets.map((b, i) => (
+                  <li key={i} className="flex items-start gap-2 text-xs text-slate-600">
+                    <span className={`mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0 ${c.bullet}`} />
+                    {b}
+                  </li>
+                ))}
+              </ul>
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="flex items-start gap-2 px-1 py-2 text-xs text-slate-400">
+        <Info className="w-3.5 h-3.5 flex-shrink-0 mt-0.5 text-slate-300" />
+        <p>
+          Technologies listed (e.g. SQLite, MongoDB) are illustrative examples.
+          The ceremony tailors all recommendations to your actual requirements — your project may end up
+          using a vector database, a search engine, no database at all, or something else entirely.
+        </p>
+      </div>
+
+      <div className="flex items-center justify-end gap-3 pt-2">
+        <button
+          type="button"
+          onClick={onNext}
+          className="text-sm text-slate-400 hover:text-slate-600 transition-colors"
+        >
+          Skip — let the model decide
+        </button>
+        <button
+          type="button"
+          onClick={onNext}
+          disabled={!strategy}
+          className="px-5 py-2 bg-slate-900 text-white text-sm font-medium rounded-lg disabled:opacity-40 hover:bg-slate-700 transition-colors"
+        >
+          Continue
+        </button>
+      </div>
+    </div>
+  );
+}