@agile-vibe-coding/avc 0.2.3 → 0.3.2

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { ArrowDownToLine } from 'lucide-react';
 import { useCeremonyStore } from '../../../store/ceremonyStore';
 import { resetCeremony } from '../../../lib/api';
@@ -32,6 +32,17 @@ function buildStageGroups(progressLog) {
 export function RunningStep({ transitioning, onPause, onResume, onCancel, onBackground }) {
   const { progressLog, ceremonyStatus, ceremonyError, isPaused, setWizardStep, setCeremonyStatus, setCeremonyError } = useCeremonyStore();
   const logBottomRef = useRef(null);
+  const [showForceStop, setShowForceStop] = useState(false);
+
+  // Show "Force Stop" button after 5s of cancelling
+  useEffect(() => {
+    if (transitioning === 'cancelling') {
+      setShowForceStop(false);
+      const timer = setTimeout(() => setShowForceStop(true), 5000);
+      return () => clearTimeout(timer);
+    }
+    setShowForceStop(false);
+  }, [transitioning]);
 
   const handleForceReset = async () => {
     try { await resetCeremony(); } catch (_) {}
@@ -197,7 +208,17 @@ export function RunningStep({ transitioning, onPause, onResume, onCancel, onBack
           {transitioning === 'pausing' ? (
             <span className="flex items-center gap-1.5 text-xs text-slate-400"><span className="inline-block w-3 h-3 border border-slate-400 border-t-slate-200 rounded-full animate-spin" />Pausing…</span>
           ) : transitioning === 'cancelling' ? (
-            <span className="flex items-center gap-1.5 text-xs text-red-400"><span className="inline-block w-3 h-3 border border-red-400 border-t-red-200 rounded-full animate-spin" />Cancelling…</span>
+            <div className="flex items-center gap-3">
+              <span className="flex items-center gap-1.5 text-xs text-red-400"><span className="inline-block w-3 h-3 border border-red-400 border-t-red-200 rounded-full animate-spin" />Cancelling…</span>
+              {showForceStop && (
+                <button
+                  onClick={handleForceReset}
+                  className="px-3 py-1.5 text-xs rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors"
+                >
+                  Force Stop
+                </button>
+              )}
+            </div>
           ) : !isPaused ? (
             <button
               onClick={onPause}

package/kanban/client/src/components/kanban/CardDetailModal.jsx

@@ -8,6 +8,8 @@ import {
 } from '../ui/dialog';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/tabs';
 import { Badge } from '../ui/badge';
+import { SeedButton } from './SeedButton';
+import { RunButton } from './RunButton';
 import {
   FileText,
   BookOpen,
@@ -22,6 +24,8 @@ import {
   Save,
   ChevronUp,
   Wand2,
+  ListChecks,
+  Lock,
 } from 'lucide-react';
 import {
   getWorkItem,
@@ -33,6 +37,7 @@ import {
 import { getStatusMetadata } from '../../lib/status-grouping';
 import { cn } from '../../lib/utils';
 import { RefineWorkItemPopup } from './RefineWorkItemPopup';
+import { useKanbanStore } from '../../store/kanbanStore';
 
 /**
  * Clickable item box — same visual style as the children list.
@@ -151,6 +156,9 @@ export function CardDetailModal({ workItem, open, onOpenChange, onNavigate, onIt
   // Parent chain for navigation
   const [parentChain, setParentChain] = useState([]);
 
+  // Read-only during active ceremony
+  const ceremonyActive = useKanbanStore((s) => s.ceremonyActive);
+
   // Refine popup state
   const [refineOpen, setRefineOpen] = useState(false);
 
@@ -302,6 +310,11 @@ export function CardDetailModal({ workItem, open, onOpenChange, onNavigate, onIt
                     Children ({fullDetails.children.length})
                   </TabsTrigger>
                 )}
+                {fullDetails?.functions && fullDetails.functions.length > 0 && (
+                  <TabsTrigger value="code">
+                    Code ({fullDetails.functions.length})
+                  </TabsTrigger>
+                )}
               </TabsList>
             </Tabs>
 
@@ -334,14 +347,24 @@ export function CardDetailModal({ workItem, open, onOpenChange, onNavigate, onIt
                   </div>
                 );
               })()}
-              {fullDetails && (
-                <button
-                  onClick={() => setRefineOpen(true)}
-                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-violet-700 bg-violet-50 border border-violet-200 rounded-lg hover:bg-violet-100 transition-colors"
-                >
-                  <Wand2 className="w-3.5 h-3.5" />
-                  Refine with AI
-                </button>
+              {fullDetails && !ceremonyActive && (
+                <div className="flex items-center gap-2">
+                  {/* Seed button — stories without children */}
+                  {workItem.type === 'story' && (!fullDetails.children || fullDetails.children.length === 0) && (
+                    <SeedButton storyId={workItem.id} onStarted={loadFullDetails} />
+                  )}
+                  {/* Run button — tasks that are planned, ready, or failed */}
+                  {workItem.type === 'task' && (workItem.status === 'planned' || workItem.status === 'ready' || workItem.status === 'failed') && (
+                    <RunButton taskId={workItem.id} onStarted={loadFullDetails} />
+                  )}
+                  <button
+                    onClick={() => setRefineOpen(true)}
+                    className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-violet-700 bg-violet-50 border border-violet-200 rounded-lg hover:bg-violet-100 transition-colors"
+                  >
+                    <Wand2 className="w-3.5 h-3.5" />
+                    Refine with AI
+                  </button>
+                </div>
               )}
             </div>
           </div>
@@ -371,7 +394,11 @@ export function CardDetailModal({ workItem, open, onOpenChange, onNavigate, onIt
                     )}
                     {/* Edit toolbar */}
                     <div className="flex justify-end mb-2">
-                      {editingDoc ? (
+                      {ceremonyActive ? (
+                        <span className="flex items-center gap-1 px-2 py-1 text-xs text-slate-400">
+                          <Lock className="w-3 h-3" /> Read-only during ceremony
+                        </span>
+                      ) : editingDoc ? (
                         <div className="flex gap-2">
                           <button
                             onClick={() => setEditingDoc(false)}
@@ -449,12 +476,45 @@ export function CardDetailModal({ workItem, open, onOpenChange, onNavigate, onIt
                       );
                     })()}
 
+                    {/* Acceptance Criteria (stories use .acceptance, epics use .features) */}
+                    {(() => {
+                      const items = workItem.type === 'epic'
+                        ? fullDetails?.features
+                        : fullDetails?.acceptance;
+                      if (!items || items.length === 0) return null;
+                      return (
+                        <div>
+                          <div className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-2">
+                            <ListChecks className="w-4 h-4" />
+                            <span>Acceptance Criteria</span>
+                            <span className="ml-auto flex items-center gap-1 text-xs font-normal text-slate-400">
+                              <Lock className="w-3 h-3" />
+                              updated by tests
+                            </span>
+                          </div>
+                          <ul className="space-y-1.5">
+                            {items.map((ac, idx) => (
+                              <li key={idx} className="flex items-start gap-2.5 text-sm text-slate-700">
+                                <input
+                                  type="checkbox"
+                                  readOnly
+                                  disabled
+                                  className="mt-0.5 h-4 w-4 flex-shrink-0 rounded border-slate-300 text-indigo-600 cursor-not-allowed opacity-60"
+                                />
+                                <span className="leading-snug">{ac}</span>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      );
+                    })()}
+
                     {/* Dependencies */}
                     {fullDetails?.dependencies && fullDetails.dependencies.length > 0 && (
                       <div>
                         <div className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-2">
                           <Link2 className="w-4 h-4" />
-                          <span>Dependencies ({fullDetails.dependencies.length})</span>
+                          <span>Depends On ({fullDetails.dependencies.length})</span>
                         </div>
                         <div className="space-y-2">
                           {fullDetails.dependencies.map((depId) => {
@@ -516,6 +576,33 @@ export function CardDetailModal({ workItem, open, onOpenChange, onNavigate, onIt
                     </div>
                   </TabsContent>
                 )}
+
+                {/* Code Tab — Function Registry */}
+                {fullDetails?.functions && fullDetails.functions.length > 0 && (
+                  <TabsContent value="code">
+                    <div className="space-y-2">
+                      {fullDetails.functions.map((fn, idx) => (
+                        <div key={fn.name || idx} className="flex items-start gap-3 p-2 rounded-lg border border-slate-200 hover:bg-slate-50">
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2">
+                              <code className="text-sm font-mono text-blue-700 truncate">{fn.name}</code>
+                              {fn.pure && (
+                                <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-green-100 text-green-700 border border-green-200">pure</span>
+                              )}
+                              {fn.type === 'exported' && (
+                                <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-blue-100 text-blue-700 border border-blue-200">export</span>
+                              )}
+                            </div>
+                            <div className="text-xs text-slate-500 mt-0.5 truncate">{fn.file}</div>
+                            {fn.satisfies && <div className="text-xs text-slate-400 mt-0.5">{fn.satisfies}</div>}
+                            {fn.task && <div className="text-xs text-slate-400 mt-0.5">Task: {fn.task}</div>}
+                          </div>
+                          {fn.lines && <span className="text-xs text-slate-400 whitespace-nowrap">{fn.lines}L</span>}
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+                )}
               </Tabs>
             )}
           </div>

package/kanban/client/src/components/kanban/GroupingSelector.jsx

@@ -1,4 +1,4 @@
-import { LayoutGrid, Package, Box } from 'lucide-react';
+import { LayoutGrid, Package, Box, ListOrdered } from 'lucide-react';
 import { useFilterStore } from '../../store/filterStore';
 import { cn } from '../../lib/utils';
 
@@ -28,6 +28,12 @@ export function GroupingSelector() {
       icon: Box,
       description: 'Separate boards by type',
     },
+    {
+      value: 'phase',
+      label: 'Phase',
+      icon: ListOrdered,
+      description: 'Implementation order by dependencies',
+    },
   ];
 
   return (

package/kanban/client/src/components/kanban/KanbanCard.jsx

@@ -59,21 +59,30 @@ export function KanbanCard({ workItem, onClick }) {
             {statusMeta?.icon} {statusMeta?.label}
           </div>
 
-          {/* Type Badge */}
-          <div
-            className={cn(
-              'px-2 py-1 rounded border text-xs font-medium',
-              typeMeta.color === 'indigo' &&
-                'border-indigo-300 bg-indigo-50 text-indigo-700',
-              typeMeta.color === 'blue' &&
-                'border-blue-300 bg-blue-50 text-blue-700',
-              typeMeta.color === 'emerald' &&
-                'border-emerald-300 bg-emerald-50 text-emerald-700',
-              typeMeta.color === 'gray' &&
-                'border-gray-300 bg-gray-50 text-gray-700'
+          <div className="flex items-center gap-1.5">
+            {/* Phase Badge */}
+            {workItem.metadata?.codingPhase && (
+              <div className="px-1.5 py-0.5 rounded text-[10px] font-bold bg-amber-100 text-amber-800 border border-amber-300" title={`Implementation Phase ${workItem.metadata.codingPhase}`}>
+                P{workItem.metadata.codingPhase}
+              </div>
             )}
-          >
-            {typeMeta.label}
+
+            {/* Type Badge */}
+            <div
+              className={cn(
+                'px-2 py-1 rounded border text-xs font-medium',
+                typeMeta.color === 'indigo' &&
+                  'border-indigo-300 bg-indigo-50 text-indigo-700',
+                typeMeta.color === 'blue' &&
+                  'border-blue-300 bg-blue-50 text-blue-700',
+                typeMeta.color === 'emerald' &&
+                  'border-emerald-300 bg-emerald-50 text-emerald-700',
+                typeMeta.color === 'gray' &&
+                  'border-gray-300 bg-gray-50 text-gray-700'
+              )}
+            >
+              {typeMeta.label}
+            </div>
           </div>
         </div>
       </div>

package/kanban/client/src/components/kanban/RefineWorkItemPopup.jsx

@@ -249,21 +249,16 @@ export function RefineWorkItemPopup({
     Promise.all([getModels(), getSettings()])
       .then(([data, settings]) => {
         setModels(data);
-        const firstReady = data.find(
-          (m) => settings.apiKeys?.[normalizeProvider(m.provider)]?.isSet
-        );
-        const genId = firstReady
-          ? firstReady.modelId
-          : data.length > 0
-          ? data[0].modelId
-          : '';
+        const ready = data.filter((m) => settings.apiKeys?.[normalizeProvider(m.provider)]?.isSet);
+        const isPro = (id) => /pro|opus|sonnet/i.test(id);
+        const isLite = (id) => /flash|lite|haiku|mini/i.test(id);
+        const generator = ready.find((m) => isPro(m.modelId)) || ready[0];
+        const genId = generator ? generator.modelId : (data.length > 0 ? data[0].modelId : '');
         setSelectedModelId(genId);
-        const otherReady = data.find(
-          (m) =>
-            settings.apiKeys?.[normalizeProvider(m.provider)]?.isSet &&
-            m.modelId !== genId
-        );
-        setSelectedValidatorModelId(otherReady ? otherReady.modelId : genId);
+        const validator = ready.find((m) => isLite(m.modelId) && m.modelId !== genId)
+          || ready.find((m) => m.modelId !== genId)
+          || generator;
+        setSelectedValidatorModelId(validator ? validator.modelId : genId);
       })
       .catch(() => setConfigError('Failed to load models.'));
   }, []);

package/kanban/client/src/components/kanban/RunButton.jsx

@@ -0,0 +1,162 @@
+import { useState, useEffect, useRef } from 'react';
+import { Play, Loader2, AlertTriangle, X, ChevronDown, ChevronUp } from 'lucide-react';
+import { getDependencyStatus, startRunTask } from '../../lib/api';
+import { cn } from '../../lib/utils';
+
+/**
+ * Run Button — runs a task in a git worktree (implement + test + commit).
+ * Shows dependency check, and streaming progress log.
+ */
+export function RunButton({ taskId, onStarted }) {
+  const [state, setState] = useState('idle'); // idle | checking | blocked | running | complete | error
+  const [blockers, setBlockers] = useState([]);
+  const [error, setError] = useState(null);
+  const [progress, setProgress] = useState([]);
+  const [showLog, setShowLog] = useState(false);
+  const [processId, setProcessId] = useState(null);
+  const logRef = useRef(null);
+
+  useEffect(() => {
+    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
+  }, [progress]);
+
+  // Listen for WebSocket run-task events dispatched by App.jsx
+  useEffect(() => {
+    if (!processId) return;
+
+    const handler = (event) => {
+      const msg = event.detail;
+      if (!msg || msg.processId !== processId) return;
+
+      if (msg.type === 'run-task:progress') {
+        setProgress(prev => [...prev, msg.message]);
+      } else if (msg.type === 'run-task:complete') {
+        setState('complete');
+        setProgress(prev => [...prev, 'Task complete — code committed.']);
+        onStarted?.();
+      } else if (msg.type === 'run-task:error') {
+        setState('error');
+        setError(msg.error || 'Run failed');
+        setProgress(prev => [...prev, `Error: ${msg.error}`]);
+      }
+    };
+
+    window.addEventListener('avc-ws-message', handler);
+    return () => window.removeEventListener('avc-ws-message', handler);
+  }, [processId, onStarted]);
+
+  const handleClick = async () => {
+    if (state === 'checking' || state === 'running') return;
+
+    setState('checking');
+    setError(null);
+    setBlockers([]);
+    setProgress([]);
+
+    try {
+      const depStatus = await getDependencyStatus(taskId);
+      if (!depStatus.ready) {
+        setState('blocked');
+        setBlockers(depStatus.blockers || []);
+        return;
+      }
+
+      setState('running');
+      setShowLog(true);
+      setProgress(['Starting task implementation...']);
+      const result = await startRunTask(taskId);
+      setProcessId(result.processId);
+      setProgress(prev => [...prev, `Process started: ${result.processId}`]);
+    } catch (err) {
+      setError(err.message);
+      setState('error');
+    }
+  };
+
+  const dismiss = () => {
+    setState('idle');
+    setBlockers([]);
+    setError(null);
+    setProgress([]);
+    setShowLog(false);
+    setProcessId(null);
+  };
+
+  if (state === 'blocked') {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center gap-2 text-amber-700 text-sm bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
+          <AlertTriangle className="w-4 h-4 flex-shrink-0" />
+          <div>
+            <div className="font-medium">Dependencies not met</div>
+            <ul className="mt-1 text-xs space-y-0.5">
+              {blockers.map((b) => (<li key={b.id}>{b.id}: {b.name} ({b.status})</li>))}
+            </ul>
+          </div>
+        </div>
+        <button onClick={dismiss} className="text-xs text-slate-500 hover:text-slate-700">Dismiss</button>
+      </div>
+    );
+  }
+
+  if ((state === 'running' || state === 'complete' || state === 'error') && showLog) {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm font-medium">
+            {state === 'running' && <Loader2 className="w-4 h-4 animate-spin text-blue-600" />}
+            {state === 'complete' && <Play className="w-4 h-4 text-green-600" />}
+            {state === 'error' && <AlertTriangle className="w-4 h-4 text-red-600" />}
+            <span className={cn(
+              state === 'running' && 'text-blue-700',
+              state === 'complete' && 'text-green-700',
+              state === 'error' && 'text-red-700',
+            )}>
+              {state === 'running' ? 'Implementing...' : state === 'complete' ? 'Complete' : 'Failed'}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <button onClick={() => setShowLog(!showLog)} className="p-1 text-slate-400 hover:text-slate-600">
+              {showLog ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
+            </button>
+            {state !== 'running' && (
+              <button onClick={dismiss} className="p-1 text-slate-400 hover:text-slate-600">
+                <X className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+        </div>
+        {showLog && (
+          <div ref={logRef} className="max-h-32 overflow-y-auto bg-slate-900 text-slate-300 text-xs font-mono rounded-md p-2 space-y-0.5">
+            {progress.map((msg, i) => (
+              <div key={i} className={cn(
+                msg.startsWith('Error') && 'text-red-400',
+                msg.includes('complete') && 'text-green-400',
+              )}>{msg}</div>
+            ))}
+            {state === 'running' && <div className="text-slate-500 animate-pulse">...</div>}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      <button
+        onClick={handleClick}
+        disabled={state === 'checking'}
+        className={cn(
+          'flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors',
+          state === 'checking'
+            ? 'bg-blue-100 text-blue-700 cursor-wait'
+            : 'bg-blue-600 text-white hover:bg-blue-700'
+        )}
+      >
+        {state === 'checking' ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
+        {state === 'checking' ? 'Checking...' : 'Run'}
+      </button>
+      {error && <p className="text-xs text-red-600">{error}</p>}
+    </div>
+  );
+}

package/kanban/client/src/components/kanban/SeedButton.jsx

@@ -0,0 +1,176 @@
+import { useState, useEffect, useRef } from 'react';
+import { Sprout, Loader2, AlertTriangle, X, ChevronDown, ChevronUp, Settings } from 'lucide-react';
+import { getDependencyStatus, startSeedCeremony, getSettings } from '../../lib/api';
+import { cn } from '../../lib/utils';
+
+/**
+ * Seed Button — decomposes a story into tasks/subtasks.
+ * Shows dependency check, model selector, and streaming progress log.
+ */
+export function SeedButton({ storyId, onStarted }) {
+  const [state, setState] = useState('idle'); // idle | checking | blocked | configuring | seeding | complete | error
+  const [blockers, setBlockers] = useState([]);
+  const [error, setError] = useState(null);
+  const [progress, setProgress] = useState([]);
+  const [showLog, setShowLog] = useState(false);
+  const [processId, setProcessId] = useState(null);
+  const logRef = useRef(null);
+
+  // Auto-scroll progress log
+  useEffect(() => {
+    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
+  }, [progress]);
+
+  // Listen for WebSocket seed events dispatched by App.jsx
+  useEffect(() => {
+    if (!processId) return;
+
+    const handler = (event) => {
+      const msg = event.detail;
+      if (!msg || msg.processId !== processId) return;
+
+      if (msg.type === 'seed:progress') {
+        setProgress(prev => [...prev, msg.message]);
+      } else if (msg.type === 'seed:complete') {
+        setState('complete');
+        setProgress(prev => [...prev, 'Seed complete — tasks created.']);
+        onStarted?.();
+      } else if (msg.type === 'seed:error') {
+        setState('error');
+        setError(msg.error || 'Seed failed');
+        setProgress(prev => [...prev, `Error: ${msg.error}`]);
+      }
+    };
+
+    window.addEventListener('avc-ws-message', handler);
+    return () => window.removeEventListener('avc-ws-message', handler);
+  }, [processId, onStarted]);
+
+  const handleClick = async () => {
+    if (state === 'checking' || state === 'seeding') return;
+
+    setState('checking');
+    setError(null);
+    setBlockers([]);
+    setProgress([]);
+
+    try {
+      const depStatus = await getDependencyStatus(storyId);
+      if (!depStatus.ready) {
+        setState('blocked');
+        setBlockers(depStatus.blockers || []);
+        return;
+      }
+
+      // Go straight to seeding (model config comes from avc.json server-side)
+      setState('seeding');
+      setShowLog(true);
+      setProgress(['Starting seed ceremony...']);
+      const result = await startSeedCeremony(storyId);
+      setProcessId(result.processId);
+      setProgress(prev => [...prev, `Process started: ${result.processId}`]);
+    } catch (err) {
+      setError(err.message);
+      setState('error');
+    }
+  };
+
+  const dismiss = () => {
+    setState('idle');
+    setBlockers([]);
+    setError(null);
+    setProgress([]);
+    setShowLog(false);
+    setProcessId(null);
+  };
+
+  // Blocked state — show blockers
+  if (state === 'blocked') {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center gap-2 text-amber-700 text-sm bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
+          <AlertTriangle className="w-4 h-4 flex-shrink-0" />
+          <div>
+            <div className="font-medium">Dependencies not met</div>
+            <ul className="mt-1 text-xs space-y-0.5">
+              {blockers.map((b) => (
+                <li key={b.id}>{b.id}: {b.name} ({b.status})</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        <button onClick={dismiss} className="text-xs text-slate-500 hover:text-slate-700">Dismiss</button>
+      </div>
+    );
+  }
+
+  // Seeding/complete/error state — show progress log
+  if ((state === 'seeding' || state === 'complete' || state === 'error') && showLog) {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm font-medium">
+            {state === 'seeding' && <Loader2 className="w-4 h-4 animate-spin text-green-600" />}
+            {state === 'complete' && <Sprout className="w-4 h-4 text-green-600" />}
+            {state === 'error' && <AlertTriangle className="w-4 h-4 text-red-600" />}
+            <span className={cn(
+              state === 'seeding' && 'text-green-700',
+              state === 'complete' && 'text-green-700',
+              state === 'error' && 'text-red-700',
+            )}>
+              {state === 'seeding' ? 'Seeding...' : state === 'complete' ? 'Seed Complete' : 'Seed Failed'}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <button onClick={() => setShowLog(!showLog)} className="p-1 text-slate-400 hover:text-slate-600">
+              {showLog ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
+            </button>
+            {state !== 'seeding' && (
+              <button onClick={dismiss} className="p-1 text-slate-400 hover:text-slate-600">
+                <X className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+        </div>
+        {showLog && (
+          <div
+            ref={logRef}
+            className="max-h-32 overflow-y-auto bg-slate-900 text-slate-300 text-xs font-mono rounded-md p-2 space-y-0.5"
+          >
+            {progress.map((msg, i) => (
+              <div key={i} className={cn(
+                msg.startsWith('Error') && 'text-red-400',
+                msg.includes('complete') && 'text-green-400',
+              )}>{msg}</div>
+            ))}
+            {state === 'seeding' && <div className="text-slate-500 animate-pulse">...</div>}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Default idle state — seed button
+  return (
+    <div className="space-y-1">
+      <button
+        onClick={handleClick}
+        disabled={state === 'checking'}
+        className={cn(
+          'flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors',
+          state === 'checking'
+            ? 'bg-green-100 text-green-700 cursor-wait'
+            : 'bg-green-600 text-white hover:bg-green-700'
+        )}
+      >
+        {state === 'checking' ? (
+          <Loader2 className="w-4 h-4 animate-spin" />
+        ) : (
+          <Sprout className="w-4 h-4" />
+        )}
+        {state === 'checking' ? 'Checking...' : 'Seed'}
+      </button>
+      {error && <p className="text-xs text-red-600">{error}</p>}
+    </div>
+  );
+}