@agile-vibe-coding/avc 0.1.1 → 0.3.1

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

package/kanban/client/src/components/layout/LoadingScreen.jsx

@@ -0,0 +1,82 @@
+import { motion } from 'framer-motion';
+
+/**
+ * Loading Screen Component
+ * Beautiful loading state with animation
+ */
+export function LoadingScreen({ message = 'Loading...' }) {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-slate-50">
+      <div className="text-center">
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
+          className="inline-block"
+        >
+          <div className="w-16 h-16 border-4 border-blue-200 border-t-blue-600 rounded-full" />
+        </motion.div>
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.2 }}
+          className="mt-4 text-slate-600 font-medium"
+        >
+          {message}
+        </motion.p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Card Skeleton Component
+ * Skeleton placeholder for kanban cards
+ */
+export function CardSkeleton() {
+  return (
+    <div className="bg-white rounded-lg border border-slate-200 p-4 animate-pulse">
+      <div className="flex items-center justify-between mb-3">
+        <div className="h-6 bg-slate-200 rounded w-20"></div>
+        <div className="h-6 bg-slate-200 rounded w-16"></div>
+      </div>
+      <div className="h-4 bg-slate-200 rounded w-full mb-2"></div>
+      <div className="h-4 bg-slate-200 rounded w-3/4"></div>
+    </div>
+  );
+}
+
+/**
+ * Column Skeleton Component
+ * Skeleton placeholder for kanban columns
+ */
+export function ColumnSkeleton() {
+  return (
+    <div className="min-w-[320px] max-w-[380px] bg-slate-100 rounded-lg p-4">
+      <div className="flex items-center justify-between mb-4">
+        <div className="h-6 bg-slate-200 rounded w-24 animate-pulse"></div>
+        <div className="h-6 bg-slate-200 rounded-full w-16 animate-pulse"></div>
+      </div>
+      <div className="space-y-3">
+        <CardSkeleton />
+        <CardSkeleton />
+        <CardSkeleton />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Board Skeleton Component
+ * Skeleton placeholder for the entire kanban board
+ */
+export function BoardSkeleton() {
+  return (
+    <div className="flex gap-4 overflow-x-auto pb-4">
+      <ColumnSkeleton />
+      <ColumnSkeleton />
+      <ColumnSkeleton />
+      <ColumnSkeleton />
+      <ColumnSkeleton />
+    </div>
+  );
+}

package/kanban/client/src/components/process/ProcessMonitorBar.jsx

@@ -0,0 +1,80 @@
+import { Activity } from 'lucide-react';
+import { useProcessStore } from '../../store/processStore';
+import { useSprintPlanningStore } from '../../store/sprintPlanningStore';
+import { useCeremonyStore } from '../../store/ceremonyStore';
+
+const STATUS_PILL = {
+  running:   'bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100',
+  paused:    'bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100',
+  complete:  'bg-green-50 text-green-700 border-green-200 hover:bg-green-100',
+  error:     'bg-red-50 text-red-700 border-red-200 hover:bg-red-100',
+  cancelled: 'bg-slate-50 text-slate-500 border-slate-200 hover:bg-slate-100',
+};
+
+const STATUS_DOT = {
+  running:   <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse flex-shrink-0" />,
+  paused:    <span className="w-1.5 h-1.5 rounded-full bg-amber-500 flex-shrink-0" />,
+  complete:  <span className="w-1.5 h-1.5 rounded-full bg-green-500 flex-shrink-0" />,
+  error:     <span className="w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0" />,
+  cancelled: <span className="w-1.5 h-1.5 rounded-full bg-slate-400 flex-shrink-0" />,
+};
+
+function elapsed(startedAt, endedAt) {
+  const ms = (endedAt ?? Date.now()) - startedAt;
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  return `${Math.floor(s / 60)}m ${s % 60}s`;
+}
+
+export function ProcessMonitorBar() {
+  const { processes, clearCompleted } = useProcessStore();
+
+  // Sponsor call runs only once — hide its chip once it's no longer running.
+  // Sprint planning — hide when cancelled (nothing to review); keep for complete/error.
+  const visibleProcesses = processes.filter(p =>
+    !(p.type === 'sponsor-call' && p.status !== 'running') &&
+    !(p.type === 'sprint-planning' && p.status === 'cancelled')
+  );
+
+  if (visibleProcesses.length === 0) return null;
+
+  const hasCompleted = visibleProcesses.some(p =>
+    ['complete', 'error', 'cancelled'].includes(p.status)
+  );
+
+  const handleChipClick = (p) => {
+    if (p.type === 'sprint-planning') {
+      useSprintPlanningStore.getState().reopenModal();
+    } else if (p.type === 'sponsor-call') {
+      useCeremonyStore.getState().reopenWizard();
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-2 px-4 py-1.5 bg-white border-b border-slate-200 flex-shrink-0 flex-wrap">
+      <Activity className="w-4 h-4 text-slate-400 flex-shrink-0" />
+
+      {visibleProcesses.map(p => (
+        <button
+          key={p.id}
+          onClick={() => handleChipClick(p)}
+          title="Click to view"
+          className={`flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full border transition-colors cursor-pointer ${STATUS_PILL[p.status] ?? STATUS_PILL.cancelled}`}
+        >
+          {STATUS_DOT[p.status] ?? STATUS_DOT.cancelled}
+          <span className="font-medium">{p.label}</span>
+          <span className="opacity-60">{elapsed(p.startedAt, p.endedAt)}</span>
+        </button>
+      ))}
+
+      {hasCompleted && (
+        <button
+          onClick={clearCompleted}
+          className="ml-auto text-xs text-slate-400 hover:text-slate-600 px-2 py-0.5 transition-colors"
+        >
+          Clear done
+        </button>
+      )}
+    </div>
+  );
+}

package/kanban/client/src/components/settings/AgentEditorPopup.jsx

@@ -0,0 +1,171 @@
+import { useState, useEffect } from 'react';
+import { X, RotateCcw } from 'lucide-react';
+import { getAgentContent, saveAgentContent, resetAgent } from '../../lib/api';
+
+export function AgentEditorPopup({ agentName, onClose, onSaved, onReset }) {
+  const [data, setData] = useState(null);       // { content, isCustomized, defaultContent }
+  const [editValue, setEditValue] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState(null);
+  // pendingReset: editor has been loaded with defaultContent, Save will call resetAgent()
+  const [pendingReset, setPendingReset] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    setPendingReset(false);
+    getAgentContent(agentName)
+      .then(d => {
+        setData(d);
+        setEditValue(d.content);
+      })
+      .catch(err => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [agentName]);
+
+  const isDirty = data && editValue !== data.content;
+
+  const handleSave = async () => {
+    if (!data || !isDirty) return;
+    setSaving(true);
+    setError(null);
+    try {
+      if (pendingReset) {
+        // Reset to default: delete customized file
+        await resetAgent(agentName);
+        setData(prev => ({ ...prev, content: prev.defaultContent, isCustomized: false }));
+        setPendingReset(false);
+        onReset?.();
+      } else {
+        await saveAgentContent(agentName, editValue);
+        setData(prev => ({ ...prev, content: editValue, isCustomized: true }));
+        onSaved?.();
+      }
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Cancel closes the popup without saving
+  const handleCancel = () => {
+    onClose();
+  };
+
+  // Reset loads default content into the editor — persisted only on Save
+  const handleReset = () => {
+    if (!data?.defaultContent) return;
+    setEditValue(data.defaultContent);
+    setPendingReset(true);
+  };
+
+  const canReset = data?.isCustomized && !pendingReset;
+
+  return (
+    <div
+      className="fixed inset-0 z-[90] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div
+        className="w-full max-w-4xl bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden"
+        style={{ height: '85vh' }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-3 border-b border-slate-100 flex-shrink-0">
+          <div className="flex items-center gap-2 min-w-0">
+            <span className="text-sm font-mono font-medium text-slate-700 truncate">
+              {agentName}
+            </span>
+            {data?.isCustomized && !pendingReset && (
+              <span className="flex-shrink-0 text-xs font-medium px-1.5 py-0.5 rounded bg-amber-100 text-amber-700">
+                Custom
+              </span>
+            )}
+            {pendingReset && (
+              <span className="flex-shrink-0 text-xs font-medium px-1.5 py-0.5 rounded bg-blue-100 text-blue-700">
+                Reset pending — save to apply
+              </span>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-slate-400 hover:text-slate-600 transition-colors ml-4 flex-shrink-0"
+            aria-label="Close"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Body */}
+        {loading ? (
+          <div className="flex-1 flex items-center justify-center text-sm text-slate-400">
+            <span className="w-4 h-4 border border-slate-300 border-t-slate-600 rounded-full animate-spin mr-2" />
+            Loading…
+          </div>
+        ) : error && !data ? (
+          <div className="flex-1 flex items-center justify-center text-sm text-red-500 px-6 text-center">
+            {error}
+          </div>
+        ) : (
+          <textarea
+            value={editValue}
+            onChange={e => { setEditValue(e.target.value); setPendingReset(false); }}
+            className="flex-1 resize-none font-mono text-xs text-slate-800 leading-relaxed px-5 py-4 focus:outline-none"
+            spellCheck={false}
+          />
+        )}
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-5 py-3 border-t border-slate-100 flex-shrink-0">
+          <div>
+            {error && !loading && (
+              <p className="text-xs text-red-600">{error}</p>
+            )}
+            {saved && (
+              <p className="text-xs text-green-600 font-medium">Saved ✓</p>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            {/* Reset: loads default content into editor; Save then applies it */}
+            <button
+              type="button"
+              onClick={handleReset}
+              disabled={!canReset}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-slate-500 hover:text-amber-600 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              title={canReset ? 'Load default content into editor' : 'Only available for customized agents'}
+            >
+              <RotateCcw className="w-3 h-3" />
+              Reset to default
+            </button>
+            <button
+              type="button"
+              onClick={handleCancel}
+              className="px-3 py-1.5 text-xs font-medium text-slate-500 hover:text-slate-700 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={!isDirty || saving}
+              className="px-3 py-1.5 text-xs font-medium bg-slate-900 text-white rounded-md hover:bg-slate-700 transition-colors disabled:opacity-40"
+            >
+              {saving ? (
+                <span className="inline-flex items-center gap-1">
+                  <span className="w-3 h-3 border border-white/40 border-t-white rounded-full animate-spin" />
+                  Saving
+                </span>
+              ) : pendingReset ? 'Save & Reset' : 'Save'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}