@geminilight/mindos 0.6.29 → 0.6.31

package/app/components/renderers/workflow-yaml/StepEditor.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronDown, ChevronUp, Trash2, Settings2 } from 'lucide-react';
+import { AgentSelector, ModelSelector, SkillsSelector, ContextSelector } from './selectors';
+import type { WorkflowStep } from './types';
+
+interface StepEditorProps {
+  step: WorkflowStep;
+  index: number;
+  onChange: (step: WorkflowStep) => void;
+  onDelete: () => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+}
+
+export default function StepEditor({ step, index, onChange, onDelete, onMoveUp, onMoveDown }: StepEditorProps) {
+  const [expanded, setExpanded] = useState(!step.prompt);
+  const [showConfig, setShowConfig] = useState(false);
+
+  const update = (patch: Partial<WorkflowStep>) => onChange({ ...step, ...patch });
+  const allSkills = step.skills?.length ? step.skills : (step.skill ? [step.skill] : []);
+  const hasConfig = !!(step.agent || step.model || allSkills.length || step.context?.length || step.description || step.timeout);
+
+  // ── Collapsed ──
+  if (!expanded) {
+    return (
+      <div className="group flex items-start gap-2 px-3 py-2 rounded-lg hover:bg-muted/40 transition-colors cursor-pointer -ml-1"
+        onClick={() => setExpanded(true)}>
+        <div className="min-w-0 flex-1">
+          <span className={`text-sm leading-tight block ${step.name ? 'text-foreground font-medium' : 'text-muted-foreground/50 italic'}`}>
+            {step.name || 'Untitled step'}
+          </span>
+          {/* Config summary pills */}
+          {hasConfig && (
+            <div className="flex items-center gap-1 mt-1 flex-wrap">
+              {step.agent && <span className="text-2xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">{step.agent}</span>}
+              {allSkills.slice(0, 2).map(s => (
+                <span key={s} className="text-2xs px-1.5 py-0.5 rounded-full bg-[var(--amber)]/8 text-[var(--amber)]">{s}</span>
+              ))}
+              {allSkills.length > 2 && <span className="text-2xs text-muted-foreground/50">+{allSkills.length - 2}</span>}
+              {step.context?.length ? <span className="text-2xs text-muted-foreground/50">{step.context.length} files</span> : null}
+            </div>
+          )}
+          {/* Prompt preview */}
+          {step.prompt && (
+            <p className="text-2xs text-muted-foreground/50 mt-1 line-clamp-1 leading-relaxed">{step.prompt}</p>
+          )}
+        </div>
+        <ChevronDown size={12} className="text-muted-foreground/30 mt-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+      </div>
+    );
+  }
+
+  // ── Expanded ──
+  return (
+    <div className="rounded-lg border border-[var(--amber)]/20 bg-card overflow-hidden shadow-sm">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3 py-2 bg-muted/20">
+        <span className={`text-xs font-medium flex-1 truncate ${step.name ? 'text-foreground' : 'text-muted-foreground/50 italic'}`}>
+          {step.name || 'Untitled step'}
+        </span>
+        <div className="flex items-center gap-0.5">
+          {onMoveUp && (
+            <button onClick={onMoveUp} className="p-1 rounded hover:bg-muted text-muted-foreground/50 hover:text-foreground transition-colors" title="Move up">
+              <ChevronUp size={12} />
+            </button>
+          )}
+          {onMoveDown && (
+            <button onClick={onMoveDown} className="p-1 rounded hover:bg-muted text-muted-foreground/50 hover:text-foreground transition-colors" title="Move down">
+              <ChevronDown size={12} />
+            </button>
+          )}
+          <button onClick={onDelete} className="p-1 rounded hover:bg-[var(--error)]/10 text-muted-foreground/50 hover:text-[var(--error)] transition-colors" title="Delete">
+            <Trash2 size={11} />
+          </button>
+          <button onClick={() => setExpanded(false)} className="p-1 rounded hover:bg-muted text-muted-foreground/50 transition-colors" title="Collapse">
+            <ChevronUp size={12} />
+          </button>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div className="px-3 py-3 space-y-3">
+        {/* Name — inline style, not a labeled field */}
+        <input type="text" value={step.name} onChange={e => update({ name: e.target.value })}
+          placeholder="Step name..."
+          autoFocus={!step.name}
+          className="w-full text-sm font-medium bg-transparent text-foreground placeholder:text-muted-foreground/30 focus:outline-none border-none p-0"
+        />
+
+        {/* Prompt — the main content */}
+        <textarea value={step.prompt} onChange={e => update({ prompt: e.target.value })}
+          placeholder="What should the AI do?"
+          rows={3}
+          className="w-full px-3 py-2.5 text-sm rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground/40 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y leading-relaxed"
+        />
+
+        {/* Agent selector — always visible, it's important */}
+        <div className={`grid ${step.agent ? 'grid-cols-2' : 'grid-cols-1'} gap-2`}>
+          <div>
+            <label className="block text-2xs text-muted-foreground/60 mb-1">Agent</label>
+            <AgentSelector value={step.agent} onChange={agent => update({ agent, model: agent ? step.model : undefined })} />
+          </div>
+          {step.agent && (
+            <div>
+              <label className="block text-2xs text-muted-foreground/60 mb-1">Model</label>
+              <ModelSelector value={step.model} onChange={model => update({ model })} />
+            </div>
+          )}
+        </div>
+
+        {/* Config toggle — progressive disclosure for skills, context, timeout */}
+        <button
+          onClick={() => setShowConfig(v => !v)}
+          className={`flex items-center gap-1.5 text-2xs transition-colors ${
+            showConfig || hasConfig ? 'text-muted-foreground' : 'text-muted-foreground/40 hover:text-muted-foreground'
+          }`}
+        >
+          <Settings2 size={11} />
+          {showConfig ? 'Less options' : 'More options'}
+          {!showConfig && hasConfig && <span className="w-1.5 h-1.5 rounded-full bg-[var(--amber)]" />}
+        </button>
+
+        {showConfig && (
+          <div className="space-y-3 pt-1">
+            {/* Skills */}
+            <div>
+              <label className="block text-2xs text-muted-foreground/60 mb-1">Skills</label>
+              <SkillsSelector value={allSkills} onChange={skills => update({ skills, skill: undefined })} />
+            </div>
+
+            {/* Context files */}
+            <div>
+              <label className="block text-2xs text-muted-foreground/60 mb-1">Context files</label>
+              <ContextSelector value={step.context ?? []} onChange={context => update({ context: context.length ? context : undefined })} />
+            </div>
+
+            {/* Description + Timeout */}
+            <div className="grid grid-cols-[1fr,auto] gap-3">
+              <div>
+                <label className="block text-2xs text-muted-foreground/60 mb-1">Description</label>
+                <input type="text" value={step.description || ''} onChange={e => update({ description: e.target.value || undefined })}
+                  placeholder="Optional note..."
+                  className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground/30 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                />
+              </div>
+              <div>
+                <label className="block text-2xs text-muted-foreground/60 mb-1">Timeout</label>
+                <div className="flex items-center gap-1">
+                  <input type="number" min={0} value={step.timeout || ''} onChange={e => update({ timeout: e.target.value ? Number(e.target.value) : undefined })}
+                    placeholder="120"
+                    className="w-16 px-2 py-1.5 text-xs rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground/30 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  />
+                  <span className="text-2xs text-muted-foreground/40">s</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/components/renderers/workflow-yaml/WorkflowEditor.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { Plus, Save, Loader2, FolderOpen, Zap, CheckCircle2, GripVertical } from 'lucide-react';
+import StepEditor from './StepEditor';
+import { serializeWorkflowYaml, generateStepId } from './serializer';
+import type { WorkflowYaml, WorkflowStep } from './types';
+import { DirPicker } from './selectors';
+
+interface WorkflowEditorProps {
+  workflow: WorkflowYaml;
+  filePath: string;
+  onChange: (workflow: WorkflowYaml) => void;
+  onSaved?: () => void;
+}
+
+export default function WorkflowEditor({ workflow, filePath, onChange, onSaved }: WorkflowEditorProps) {
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState('');
+  const [saveSuccess, setSaveSuccess] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(!!(workflow.workDir));
+
+  useEffect(() => {
+    if (!saveSuccess) return;
+    const t = setTimeout(() => setSaveSuccess(false), 3000);
+    return () => clearTimeout(t);
+  }, [saveSuccess]);
+
+  const updateMeta = (patch: Partial<WorkflowYaml>) => onChange({ ...workflow, ...patch });
+
+  const updateStep = useCallback((index: number, step: WorkflowStep) => {
+    const steps = [...workflow.steps];
+    steps[index] = step;
+    onChange({ ...workflow, steps });
+  }, [workflow, onChange]);
+
+  const deleteStep = useCallback((index: number) => {
+    const step = workflow.steps[index];
+    const hasContent = step.name || step.prompt;
+    if (hasContent && !window.confirm(`Delete step "${step.name || 'Untitled'}"?`)) return;
+    onChange({ ...workflow, steps: workflow.steps.filter((_, i) => i !== index) });
+  }, [workflow, onChange]);
+
+  const addStep = useCallback(() => {
+    const existingIds = workflow.steps.map(s => s.id);
+    const num = workflow.steps.length + 1;
+    const id = generateStepId(`step-${num}`, existingIds);
+    const step: WorkflowStep = { id, name: `Step ${num}`, prompt: '' };
+    onChange({ ...workflow, steps: [...workflow.steps, step] });
+  }, [workflow, onChange]);
+
+  const moveStep = useCallback((from: number, to: number) => {
+    if (to < 0 || to >= workflow.steps.length) return;
+    const steps = [...workflow.steps];
+    const [moved] = steps.splice(from, 1);
+    steps.splice(to, 0, moved);
+    onChange({ ...workflow, steps });
+  }, [workflow, onChange]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setSaveError('');
+    setSaveSuccess(false);
+    try {
+      const yaml = serializeWorkflowYaml(workflow);
+      const res = await fetch('/api/file', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: filePath, op: 'save_file', content: yaml }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || `Save failed (HTTP ${res.status})`);
+      }
+      setSaveSuccess(true);
+      onSaved?.();
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : 'Save failed');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault();
+        if (!saving && workflow.title.trim() && workflow.steps.length > 0) handleSave();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  });
+
+  const canSave = !saving && !!workflow.title.trim() && workflow.steps.length > 0;
+
+  return (
+    <div>
+      {/* ── Metadata Section ── */}
+      <div className="space-y-3 mb-8">
+        {/* Title — large, inline feel */}
+        <input type="text" value={workflow.title} onChange={e => updateMeta({ title: e.target.value })}
+          placeholder="Flow title..."
+          className="w-full text-lg font-semibold bg-transparent text-foreground placeholder:text-muted-foreground/40 focus:outline-none border-none p-0 leading-tight"
+        />
+        {/* Description — subtle underline */}
+        <input type="text" value={workflow.description || ''} onChange={e => updateMeta({ description: e.target.value || undefined })}
+          placeholder="Add a description..."
+          className="w-full text-sm bg-transparent text-muted-foreground placeholder:text-muted-foreground/30 focus:outline-none border-none p-0"
+        />
+
+        {/* Advanced toggle */}
+        <div className="flex items-center gap-3">
+          {!showAdvanced ? (
+            <button onClick={() => setShowAdvanced(true)}
+              className="text-2xs text-muted-foreground/50 hover:text-muted-foreground transition-colors">
+              + Working directory
+            </button>
+          ) : (
+            <div className="flex items-center gap-2 flex-1">
+              <FolderOpen size={12} className="text-muted-foreground/40 shrink-0" />
+              <DirPicker value={workflow.workDir || ''} onChange={v => updateMeta({ workDir: v || undefined })} />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ── Steps Section — Timeline style ── */}
+      {workflow.steps.length > 0 ? (
+        <div className="relative">
+          {/* Vertical timeline line */}
+          {workflow.steps.length > 1 && (
+            <div className="absolute left-[15px] top-6 bottom-16 w-px bg-border" />
+          )}
+
+          {/* Step list */}
+          <div className="flex flex-col gap-3 mb-5 relative">
+            {workflow.steps.map((step, i) => (
+              <div key={step.id} className="relative pl-9">
+                {/* Timeline node */}
+                <div className="absolute left-[9px] top-3 w-[13px] h-[13px] rounded-full border-2 border-border bg-background z-10 flex items-center justify-center">
+                  <span className="text-[7px] font-bold text-muted-foreground/60">{i + 1}</span>
+                </div>
+                <StepEditor
+                  step={step}
+                  index={i}
+                  onChange={s => updateStep(i, s)}
+                  onDelete={() => deleteStep(i)}
+                  onMoveUp={i > 0 ? () => moveStep(i, i - 1) : undefined}
+                  onMoveDown={i < workflow.steps.length - 1 ? () => moveStep(i, i + 1) : undefined}
+                />
+              </div>
+            ))}
+          </div>
+
+          {/* Add step — at the end of timeline */}
+          <div className="relative pl-9">
+            <div className="absolute left-[9px] top-2.5 w-[13px] h-[13px] rounded-full border-2 border-dashed border-border bg-background z-10 flex items-center justify-center">
+              <Plus size={7} className="text-muted-foreground/40" />
+            </div>
+            <button onClick={addStep}
+              className="w-full text-left px-3 py-2 rounded-lg text-xs text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted/40 transition-colors">
+              Add step...
+            </button>
+          </div>
+        </div>
+      ) : (
+        /* Empty state */
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <div className="w-12 h-12 rounded-2xl bg-[var(--amber)]/8 flex items-center justify-center mb-4">
+            <Zap size={22} className="text-[var(--amber)]/60" />
+          </div>
+          <p className="text-sm font-medium text-foreground mb-1">Build your flow</p>
+          <p className="text-xs text-muted-foreground/60 mb-5 max-w-[240px]">
+            Each step is a task for an AI agent. Chain them together to automate complex workflows.
+          </p>
+          <button onClick={addStep}
+            className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-xs font-medium bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90 transition-opacity">
+            <Plus size={12} />
+            Add first step
+          </button>
+        </div>
+      )}
+
+      {/* ── Save bar — sticky bottom feel ── */}
+      <div className="flex items-center gap-3 mt-8 pt-4 border-t border-border/50">
+        <button onClick={handleSave} disabled={!canSave}
+          title={!workflow.title.trim() ? 'Title is required' : workflow.steps.length === 0 ? 'Add at least one step' : undefined}
+          className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-xs font-medium transition-all disabled:opacity-40 disabled:cursor-not-allowed ${
+            canSave
+              ? 'bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90'
+              : 'bg-muted text-muted-foreground'
+          }`}>
+          {saving ? <Loader2 size={12} className="animate-spin" /> : <Save size={12} />}
+          {saving ? 'Saving...' : 'Save'}
+        </button>
+
+        {saveError && <span className="text-xs text-[var(--error)]">{saveError}</span>}
+
+        {saveSuccess && !saveError && (
+          <span className="flex items-center gap-1 text-2xs text-[var(--success)]">
+            <CheckCircle2 size={11} />
+            Saved
+          </span>
+        )}
+
+        <kbd className="text-2xs text-muted-foreground/30 ml-auto font-mono">Ctrl+S</kbd>
+      </div>
+    </div>
+  );
+}

package/app/components/renderers/workflow-yaml/WorkflowRunner.tsx

@@ -0,0 +1,269 @@
+'use client';
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Play, SkipForward, RotateCcw, CheckCircle2, Circle, Loader2, AlertCircle, ChevronDown, Sparkles, XCircle, Clock, ArrowRight } from 'lucide-react';
+import { runStepWithAI, clearSkillCache } from './execution';
+import type { WorkflowYaml, WorkflowStepRuntime, StepStatus } from './types';
+
+function initSteps(workflow: WorkflowYaml): WorkflowStepRuntime[] {
+  return workflow.steps.map((s, idx) => ({
+    ...s, index: idx, status: 'pending' as const, output: '', error: undefined,
+  }));
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const secs = Math.round(ms / 1000);
+  if (secs < 60) return `${secs}s`;
+  return `${Math.floor(secs / 60)}m ${secs % 60}s`;
+}
+
+/** Timeline node — the colored circle on the left */
+function TimelineNode({ status, index }: { status: StepStatus; index: number }) {
+  const base = 'w-[26px] h-[26px] rounded-full flex items-center justify-center shrink-0 transition-all';
+  if (status === 'running') return (
+    <div className={`${base} bg-[var(--amber)]/15 ring-2 ring-[var(--amber)]/30`}>
+      <Loader2 size={12} className="text-[var(--amber)] animate-spin" />
+    </div>
+  );
+  if (status === 'done') return (
+    <div className={`${base} bg-[var(--success)]/15`}>
+      <CheckCircle2 size={13} className="text-[var(--success)]" />
+    </div>
+  );
+  if (status === 'error') return (
+    <div className={`${base} bg-[var(--error)]/15`}>
+      <AlertCircle size={13} className="text-[var(--error)]" />
+    </div>
+  );
+  if (status === 'skipped') return (
+    <div className={`${base} bg-muted/50`}>
+      <SkipForward size={11} className="text-muted-foreground/40" />
+    </div>
+  );
+  // pending
+  return (
+    <div className={`${base} border-2 border-border bg-background`}>
+      <span className="text-[9px] font-bold text-muted-foreground/40">{index + 1}</span>
+    </div>
+  );
+}
+
+function RunStepCard({ step, canRun, onRun, onSkip, onCancel }: {
+  step: WorkflowStepRuntime; canRun: boolean;
+  onRun: () => void; onSkip: () => void; onCancel: () => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const hasOutput = !!(step.output || step.error);
+  const allSkills = step.skills?.length ? step.skills : (step.skill ? [step.skill] : []);
+  const isActive = step.status === 'running' || step.status === 'pending';
+
+  return (
+    <div className={`transition-opacity ${step.status === 'skipped' ? 'opacity-50' : ''}`}>
+      {/* Main row */}
+      <div className="flex items-start gap-3">
+        <TimelineNode status={step.status} index={step.index} />
+        <div className="flex-1 min-w-0 pt-0.5">
+          {/* Name + meta */}
+          <div className="flex items-center gap-2 justify-between">
+            <span className={`text-sm font-medium truncate ${
+              step.status === 'done' ? 'text-foreground' :
+              step.status === 'running' ? 'text-[var(--amber)]' :
+              step.status === 'error' ? 'text-[var(--error)]' :
+              'text-foreground/70'
+            }`}>
+              {step.name}
+            </span>
+            <div className="flex items-center gap-1.5 shrink-0">
+              {step.durationMs != null && (step.status === 'done' || step.status === 'error') && (
+                <span className="text-2xs text-muted-foreground/40 font-mono">{formatDuration(step.durationMs)}</span>
+              )}
+              {step.status === 'pending' && (
+                <>
+                  <button onClick={onRun} disabled={!canRun}
+                    className="flex items-center gap-1 px-2 py-0.5 rounded-md text-2xs font-medium transition-all disabled:opacity-30 bg-[var(--amber)] text-[var(--amber-foreground)]"
+                  ><Play size={9} /> Run</button>
+                  <button onClick={onSkip}
+                    className="px-1.5 py-0.5 rounded-md text-2xs text-muted-foreground/50 hover:text-muted-foreground hover:bg-muted transition-colors">
+                    Skip
+                  </button>
+                </>
+              )}
+              {step.status === 'running' && (
+                <button onClick={onCancel}
+                  className="flex items-center gap-1 px-2 py-0.5 rounded-md text-2xs text-[var(--error)]/70 hover:text-[var(--error)] hover:bg-[var(--error)]/10 transition-colors">
+                  <XCircle size={9} /> Stop
+                </button>
+              )}
+              {hasOutput && step.status !== 'running' && (
+                <button onClick={() => setExpanded(v => !v)}
+                  className="p-0.5 rounded text-muted-foreground/30 hover:text-muted-foreground transition-colors">
+                  <ChevronDown size={12} className={`transition-transform ${expanded ? 'rotate-180' : ''}`} />
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Agent/skill badges */}
+          {(step.agent || allSkills.length > 0) && (
+            <div className="flex gap-1 mt-0.5 flex-wrap">
+              {step.agent && <span className="text-2xs text-muted-foreground/50">{step.agent}</span>}
+              {step.agent && allSkills.length > 0 && <span className="text-2xs text-muted-foreground/20">/</span>}
+              {allSkills.map(s => <span key={s} className="text-2xs text-[var(--amber)]/60">{s}</span>)}
+            </div>
+          )}
+
+          {/* Output area — auto-show when running */}
+          {(expanded || step.status === 'running') && hasOutput && (
+            <div className="mt-2 rounded-lg overflow-hidden border border-border/50">
+              {step.error && (
+                <div className="px-3 py-2.5 bg-[var(--error)]/5">
+                  <div className="flex items-center gap-1.5 mb-1">
+                    <AlertCircle size={10} className="text-[var(--error)]" />
+                    <span className="text-2xs font-medium text-[var(--error)]">Error</span>
+                  </div>
+                  <div className="text-xs text-[var(--error)]/80 whitespace-pre-wrap break-words leading-relaxed">{step.error}</div>
+                </div>
+              )}
+              {step.output && (
+                <div className="px-3 py-2.5 bg-muted/20">
+                  <div className="flex items-center gap-1.5 mb-1.5">
+                    <Sparkles size={10} className="text-[var(--amber)]" />
+                    <span className="text-2xs text-muted-foreground/50 uppercase tracking-wider font-medium">Output</span>
+                    {step.status === 'running' && <span className="w-1.5 h-1.5 rounded-full bg-[var(--amber)] animate-pulse" />}
+                  </div>
+                  <div className="text-xs leading-relaxed text-foreground/80 whitespace-pre-wrap break-words">{step.output}</div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Runner ──────────────────────────────────────────────────────────
+
+export default function WorkflowRunner({ workflow, filePath }: { workflow: WorkflowYaml; filePath: string }) {
+  const [steps, setSteps] = useState<WorkflowStepRuntime[]>(() => initSteps(workflow));
+  const [running, setRunning] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    setSteps(initSteps(workflow));
+    setRunning(false);
+  }, [workflow]);
+
+  const cancelExecution = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setRunning(false);
+    setSteps(prev => prev.map(s => s.status === 'running' ? { ...s, status: 'error', error: 'Cancelled' } : s));
+  }, []);
+
+  const runStep = useCallback(async (idx: number) => {
+    if (running) return;
+    abortRef.current?.abort();
+    const ctrl = new AbortController();
+    abortRef.current = ctrl;
+    setRunning(true);
+    const startTime = Date.now();
+    setSteps(prev => prev.map((s, i) => i === idx ? { ...s, status: 'running', output: '', error: undefined, startedAt: new Date() } : s));
+    try {
+      const step = workflow.steps[idx];
+      const runtimeStep: WorkflowStepRuntime = { ...step, index: idx, status: 'running', output: '' };
+      await runStepWithAI(runtimeStep, workflow, filePath,
+        (acc) => setSteps(prev => prev.map((s, i) => i === idx ? { ...s, output: acc } : s)),
+        ctrl.signal);
+      const duration = Date.now() - startTime;
+      setSteps(prev => prev.map((s, i) => i === idx ? { ...s, status: 'done', completedAt: new Date(), durationMs: duration } : s));
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name === 'AbortError') return;
+      const duration = Date.now() - startTime;
+      setSteps(prev => prev.map((s, i) => i === idx ? { ...s, status: 'error', error: err instanceof Error ? err.message : String(err), durationMs: duration } : s));
+    } finally { setRunning(false); }
+  }, [running, workflow, filePath]);
+
+  const skipStep = useCallback((idx: number) => {
+    setSteps(prev => prev.map((s, i) => i === idx ? { ...s, status: 'skipped' } : s));
+  }, []);
+
+  const reset = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setRunning(false);
+    clearSkillCache();
+    setSteps(initSteps(workflow));
+  }, [workflow]);
+
+  const doneCount = steps.filter(s => s.status === 'done').length;
+  const progress = steps.length > 0 ? Math.round((doneCount / steps.length) * 100) : 0;
+  const allDone = doneCount === steps.length && steps.length > 0;
+  const nextPendingIdx = steps.findIndex(s => s.status === 'pending');
+  const hasErrors = steps.some(s => s.status === 'error');
+
+  return (
+    <div>
+      {/* Progress bar — full width, thin, elegant */}
+      <div className="mb-6">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            {allDone ? (
+              <span className="flex items-center gap-1.5 text-xs font-medium text-[var(--success)]">
+                <CheckCircle2 size={13} />
+                Complete
+              </span>
+            ) : hasErrors ? (
+              <span className="flex items-center gap-1.5 text-xs font-medium text-[var(--error)]">
+                <AlertCircle size={13} />
+                {doneCount}/{steps.length} done
+              </span>
+            ) : (
+              <span className="text-xs text-muted-foreground">
+                {doneCount}/{steps.length}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-1.5">
+            {nextPendingIdx >= 0 && (
+              <button onClick={() => runStep(nextPendingIdx)} disabled={running}
+                className="flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-medium transition-all disabled:opacity-40 bg-[var(--amber)] text-[var(--amber-foreground)]">
+                {running ? <Loader2 size={11} className="animate-spin" /> : <ArrowRight size={11} />}
+                {running ? 'Running...' : 'Run next'}
+              </button>
+            )}
+            <button onClick={reset}
+              className="flex items-center gap-1 px-2 py-1 rounded-md text-2xs text-muted-foreground/50 hover:text-muted-foreground hover:bg-muted transition-colors">
+              <RotateCcw size={10} />
+              Reset
+            </button>
+          </div>
+        </div>
+        <div className="h-1 rounded-full bg-border/50 overflow-hidden">
+          <div
+            className={`h-full rounded-full transition-all duration-500 ease-out ${
+              allDone ? 'bg-[var(--success)]' : hasErrors ? 'bg-[var(--error)]' : 'bg-[var(--amber)]'
+            }`}
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Timeline step list */}
+      <div className="relative">
+        {/* Vertical line */}
+        {steps.length > 1 && (
+          <div className="absolute left-[12px] top-5 bottom-5 w-px bg-border/50" />
+        )}
+
+        <div className="flex flex-col gap-4">
+          {steps.map((step, i) => (
+            <RunStepCard key={step.id} step={step} canRun={!running}
+              onRun={() => runStep(i)} onSkip={() => skipStep(i)} onCancel={cancelExecution} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}