@geminilight/mindos 0.6.30 → 0.6.31

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useCallback, useEffect } from 'react';
-import { Plus, Save, Loader2, FolderOpen, Zap, CheckCircle2 } from 'lucide-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';
@@ -18,17 +18,15 @@ export default function WorkflowEditor({ workflow, filePath, onChange, onSaved }
   const [saving, setSaving] = useState(false);
   const [saveError, setSaveError] = useState('');
   const [saveSuccess, setSaveSuccess] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(!!(workflow.workDir));
 
-  // Clear success indicator after 3s
   useEffect(() => {
     if (!saveSuccess) return;
     const t = setTimeout(() => setSaveSuccess(false), 3000);
     return () => clearTimeout(t);
   }, [saveSuccess]);
 
-  const updateMeta = (patch: Partial<WorkflowYaml>) => {
-    onChange({ ...workflow, ...patch });
-  };
+  const updateMeta = (patch: Partial<WorkflowYaml>) => onChange({ ...workflow, ...patch });
 
   const updateStep = useCallback((index: number, step: WorkflowStep) => {
     const steps = [...workflow.steps];
@@ -83,14 +81,11 @@ export default function WorkflowEditor({ workflow, filePath, onChange, onSaved }
     }
   };
 
-  // Keyboard shortcut: Cmd/Ctrl+S to save
   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();
-        }
+        if (!saving && workflow.title.trim() && workflow.steps.length > 0) handleSave();
       }
     };
     window.addEventListener('keydown', handler);
@@ -101,100 +96,115 @@ export default function WorkflowEditor({ workflow, filePath, onChange, onSaved }
 
   return (
     <div>
-      {/* Metadata */}
-      <div className="space-y-3 mb-6">
-        <div>
-          <label className="block text-2xs font-medium text-muted-foreground mb-1">Title</label>
-          <input type="text" value={workflow.title} onChange={e => updateMeta({ title: e.target.value })}
-            placeholder="Workflow title"
-            className="w-full px-3 py-2 text-sm font-medium rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          />
-        </div>
-        <div className="grid grid-cols-[1fr,auto] gap-3">
-          <div>
-            <label className="block text-2xs font-medium text-muted-foreground mb-1">Description <span className="text-muted-foreground/50">(optional)</span></label>
-            <input type="text" value={workflow.description || ''} onChange={e => updateMeta({ description: e.target.value || undefined })}
-              placeholder="What does this workflow do?"
-              className="w-full px-3 py-1.5 text-xs rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-            />
-          </div>
-          <div>
-            <label className="block text-2xs font-medium text-muted-foreground mb-1">
-              <FolderOpen size={10} className="inline mr-0.5 -mt-0.5" />
-              Working dir
-            </label>
-            <DirPicker value={workflow.workDir || ''} onChange={v => updateMeta({ workDir: v || undefined })} />
-          </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 */}
+      {/* ── Steps Section — Timeline style ── */}
       {workflow.steps.length > 0 ? (
-        <>
-          {/* Steps header */}
-          <div className="flex items-center justify-between mb-3">
-            <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
-              Steps ({workflow.steps.length})
-            </h3>
-          </div>
+        <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-2 mb-4">
+          <div className="flex flex-col gap-3 mb-5 relative">
             {workflow.steps.map((step, i) => (
-              <StepEditor
-                key={step.id}
-                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 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 */}
-          <button onClick={addStep}
-            className="w-full flex items-center justify-center gap-1.5 px-3 py-2 rounded-xl border border-dashed border-border text-xs text-muted-foreground hover:text-foreground hover:border-[var(--amber)]/30 hover:bg-muted/30 transition-colors">
-            <Plus size={13} />
-            Add step
-          </button>
-        </>
+          {/* 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: prominent CTA */
-        <div className="flex flex-col items-center justify-center py-10 px-4 text-center rounded-xl border border-dashed border-border bg-muted/10">
-          <Zap size={28} className="text-muted-foreground/30 mb-3" />
-          <p className="text-sm font-medium text-muted-foreground mb-1">No steps yet</p>
-          <p className="text-xs text-muted-foreground/60 mb-4 max-w-[260px]">
-            Add your first step to define what the AI should do.
+        /* 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)] transition-colors hover:opacity-90">
-            <Plus size={13} />
+            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 */}
-      <div className="flex items-center gap-3 mt-6 pt-4 border-t border-border">
+      {/* ── 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-colors disabled:opacity-50 disabled:cursor-not-allowed bg-[var(--amber)] text-[var(--amber-foreground)]">
-          {saving ? <Loader2 size={13} className="animate-spin" /> : <Save size={13} />}
+          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)] animate-in fade-in">
+          <span className="flex items-center gap-1 text-2xs text-[var(--success)]">
             <CheckCircle2 size={11} />
             Saved
           </span>
         )}
 
-        <span className="text-2xs text-muted-foreground/40 ml-auto">Ctrl+S</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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { Play, SkipForward, RotateCcw, CheckCircle2, Circle, Loader2, AlertCircle, ChevronDown, Sparkles, XCircle, Clock } from 'lucide-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';
 
@@ -11,26 +11,6 @@ function initSteps(workflow: WorkflowYaml): WorkflowStepRuntime[] {
   }));
 }
 
-function StatusIcon({ status }: { status: StepStatus }) {
-  if (status === 'pending') return <Circle size={15} className="text-border" />;
-  if (status === 'running') return <Loader2 size={15} className="text-[var(--amber)] animate-spin" />;
-  if (status === 'done') return <CheckCircle2 size={15} className="text-[var(--success)]" />;
-  if (status === 'skipped') return <SkipForward size={15} className="text-muted-foreground opacity-50" />;
-  return <AlertCircle size={15} className="text-[var(--error)]" />;
-}
-
-function Badge({ label, variant }: { label: string; variant?: 'amber' | 'default' }) {
-  return (
-    <span className={`inline-flex items-center gap-1 text-2xs px-2 py-0.5 rounded whitespace-nowrap ${
-      variant === 'amber'
-        ? 'bg-[var(--amber)]/10 text-[var(--amber)] border border-[var(--amber)]/20'
-        : 'bg-muted text-muted-foreground'
-    }`}>
-      {label}
-    </span>
-  );
-}
-
 function formatDuration(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
   const secs = Math.round(ms / 1000);
@@ -38,96 +18,127 @@ function formatDuration(ms: number): string {
   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 hasContent = !!(step.description || step.output || step.error);
-  const borderColor = {
-    pending: 'border-border', running: 'border-[var(--amber)]/50',
-    done: 'border-[var(--success)]/40', skipped: 'border-border', error: 'border-[var(--error)]/40',
-  }[step.status];
-
-  // Merge skills for display
+  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={`rounded-xl border overflow-hidden bg-card transition-all ${borderColor} ${step.status === 'skipped' ? 'opacity-60' : ''}`}>
-      <div className="flex items-center gap-2.5 px-3.5 py-2.5 justify-between flex-wrap">
-        <div className="flex items-center gap-2 flex-1 min-w-0">
-          <StatusIcon status={step.status} />
-          <div className="min-w-0">
-            <div className="font-semibold text-sm text-foreground cursor-pointer" onClick={() => hasContent && setExpanded(v => !v)}>
+    <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>
-            {(step.agent || allSkills.length > 0 || step.model) && (
-              <div className="flex gap-1.5 mt-1 flex-wrap">
-                {allSkills.map(s => <Badge key={s} label={`🎓 ${s}`} variant="amber" />)}
-                {step.agent && <Badge label={`🤖 ${step.agent}`} />}
-                {step.model && <Badge label={`🧠 ${step.model}`} />}
-              </div>
-            )}
           </div>
-        </div>
-        <div className="flex items-center gap-1.5 shrink-0">
-          {/* Duration display */}
-          {step.durationMs != null && (step.status === 'done' || step.status === 'error') && (
-            <span className="flex items-center gap-1 text-2xs text-muted-foreground/60">
-              <Clock size={10} />
-              {formatDuration(step.durationMs)}
-            </span>
-          )}
 
-          {step.status === 'pending' && (
-            <>
-              <button onClick={onRun} disabled={!canRun}
-                title={!canRun ? 'Another step is running' : undefined}
-                className="flex items-center gap-1 px-2.5 py-1 rounded-md text-2xs font-medium border-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-[var(--amber)] text-[var(--amber-foreground)] disabled:bg-muted disabled:text-muted-foreground"
-              ><Play size={10} /> Run</button>
-              <button onClick={onSkip} className="px-2 py-1 rounded-md text-2xs border border-border bg-transparent text-muted-foreground hover:bg-muted transition-colors">Skip</button>
-            </>
-          )}
-          {step.status === 'running' && (
-            <button onClick={onCancel} className="flex items-center gap-1 px-2.5 py-1 rounded-md text-2xs border border-[var(--error)] bg-transparent text-[var(--error)] hover:bg-[var(--error)]/10 transition-colors">
-              <XCircle size={10} /> Cancel
-            </button>
-          )}
-          {(step.status === 'done' || step.status === 'error') && (
-            <button onClick={() => setExpanded(v => !v)} className="px-2 py-1 rounded-md text-2xs border border-border bg-transparent text-muted-foreground hover:bg-muted transition-colors">
-              <ChevronDown size={11} className={`inline transition-transform ${expanded ? 'rotate-180' : ''}`} />
-            </button>
-          )}
-        </div>
-      </div>
-      {(expanded || step.status === 'running') && hasContent && (
-        <div className="border-t border-border">
-          {step.description && (
-            <div className={`px-3.5 py-2.5 text-xs leading-relaxed text-muted-foreground ${(step.output || step.error) ? 'border-b border-border' : ''}`}>
-              {step.description}
-            </div>
-          )}
-          {step.error && (
-            <div className="px-3.5 py-2.5 bg-[var(--error)]/10">
-              <div className="flex items-center gap-1.5 mb-1.5">
-                <AlertCircle size={11} className="text-[var(--error)]" />
-                <span className="text-2xs text-[var(--error)] uppercase font-medium">Error</span>
-              </div>
-              <div className="text-xs text-[var(--error)] whitespace-pre-wrap break-words">{step.error}</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>
           )}
-          {step.output && (
-            <div className="px-3.5 py-2.5 bg-background">
-              <div className="flex items-center gap-1.5 mb-1.5">
-                <Sparkles size={11} className="text-[var(--amber)]" />
-                <span className="text-2xs text-muted-foreground uppercase tracking-wide">AI Output</span>
-                {step.status === 'running' && <span className="w-1.5 h-1.5 rounded-full bg-[var(--amber)] animate-pulse ml-1" />}
-              </div>
-              <div className="text-xs leading-relaxed text-foreground whitespace-pre-wrap break-words">{step.output}</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>
   );
 }
@@ -148,7 +159,7 @@ export default function WorkflowRunner({ workflow, filePath }: { workflow: Workf
     abortRef.current?.abort();
     abortRef.current = null;
     setRunning(false);
-    setSteps(prev => prev.map(s => s.status === 'running' ? { ...s, status: 'error', error: 'Cancelled by user' } : s));
+    setSteps(prev => prev.map(s => s.status === 'running' ? { ...s, status: 'error', error: 'Cancelled' } : s));
   }, []);
 
   const runStep = useCallback(async (idx: number) => {
@@ -157,10 +168,8 @@ export default function WorkflowRunner({ workflow, filePath }: { workflow: Workf
     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: '' };
@@ -192,34 +201,68 @@ export default function WorkflowRunner({ workflow, filePath }: { workflow: Workf
   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>
-      {workflow.description && (
-        <p className="text-xs text-muted-foreground leading-relaxed mb-3">{workflow.description}</p>
-      )}
-      <div className="flex items-center gap-2.5 flex-wrap mb-4">
-        <div className="flex-1 min-w-[120px] h-1 rounded-full bg-border overflow-hidden">
-          <div className={`h-full rounded-full transition-all duration-300 ${allDone ? 'bg-[var(--success)]' : 'bg-[var(--amber)]'}`} style={{ width: `${progress}%` }} />
+      {/* 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>
-        <span className={`text-2xs shrink-0 ${allDone ? 'text-[var(--success)] font-medium' : 'text-muted-foreground'}`}>
-          {doneCount}/{steps.length}{allDone ? ' Complete' : ''}
-        </span>
-        {nextPendingIdx >= 0 && (
-          <button onClick={() => runStep(nextPendingIdx)} disabled={running}
-            title={running ? 'A step is currently running' : undefined}
-            className="flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-medium border-none transition-colors disabled:opacity-60 disabled:cursor-not-allowed bg-[var(--amber)] text-[var(--amber-foreground)] disabled:bg-muted disabled:text-muted-foreground"
-          >{running ? <Loader2 size={11} className="animate-spin" /> : <Play size={11} />} Run next</button>
-        )}
-        <button onClick={reset} className="flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs border border-border bg-transparent text-muted-foreground hover:bg-muted transition-colors">
-          <RotateCcw size={11} /> Reset
-        </button>
       </div>
-      <div className="flex flex-col gap-2">
-        {steps.map((step, i) => (
-          <RunStepCard key={step.id} step={step} canRun={!running}
-            onRun={() => runStep(i)} onSkip={() => skipStep(i)} onCancel={cancelExecution} />
-        ))}
+
+      {/* 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>
   );