@geminilight/mindos 0.6.72 → 0.6.73

package/_standalone/components/renderers/workflow-yaml/selectors.tsx

@@ -0,0 +1,574 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { ChevronDown, X, Search, FileText, FolderOpen, Folder, ChevronRight } from 'lucide-react';
+
+// ─── Dropdown Shell ───────────────────────────────────────────────────────
+
+function Dropdown({ trigger, children, open, onClose }: {
+  trigger: React.ReactNode; children: React.ReactNode; open: boolean; onClose: () => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open, onClose]);
+
+  return (
+    <div ref={ref} className="relative">
+      {trigger}
+      {open && (
+        <div className="absolute top-full left-0 mt-1 w-full min-w-[220px] max-h-[260px] overflow-y-auto bg-card border border-border rounded-lg shadow-lg z-50">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Agent Selector ───────────────────────────────────────────────────────
+
+interface AcpAgentInfo { id: string; name: string }
+
+/** Cache ACP agents globally */
+let _agentsCache: AcpAgentInfo[] | null = null;
+let _agentsFetching = false;
+const _agentsListeners: Array<(agents: AcpAgentInfo[]) => void> = [];
+
+function fetchAgentsOnce(cb: (agents: AcpAgentInfo[]) => void) {
+  if (_agentsCache) { cb(_agentsCache); return; }
+  _agentsListeners.push(cb);
+  if (_agentsFetching) return;
+  _agentsFetching = true;
+  fetch('/api/acp/registry').then(r => r.json()).then(data => {
+    const agents: AcpAgentInfo[] = (data.registry?.agents ?? []).map((a: { id: string; name?: string }) => ({
+      id: a.id, name: a.name || a.id,
+    }));
+    _agentsCache = agents;
+    _agentsListeners.forEach(fn => fn(agents));
+    _agentsListeners.length = 0;
+  }).catch(() => {
+    _agentsCache = [];
+    _agentsListeners.forEach(fn => fn([]));
+    _agentsListeners.length = 0;
+  });
+}
+
+export function AgentSelector({ value, onChange }: { value?: string; onChange: (v: string | undefined) => void }) {
+  const [open, setOpen] = useState(false);
+  const [custom, setCustom] = useState('');
+  const [agents, setAgents] = useState<AcpAgentInfo[]>(_agentsCache ?? []);
+  const [query, setQuery] = useState('');
+
+  useEffect(() => {
+    fetchAgentsOnce(setAgents);
+  }, []);
+
+  const filtered = query
+    ? agents.filter(a => a.id.toLowerCase().includes(query.toLowerCase()) || a.name.toLowerCase().includes(query.toLowerCase()))
+    : agents;
+
+  const select = (v: string | undefined) => { onChange(v); setOpen(false); setQuery(''); };
+
+  // Find display name for current value
+  const displayName = value ? (agents.find(a => a.id === value)?.name || value) : undefined;
+
+  return (
+    <Dropdown
+      open={open}
+      onClose={() => { setOpen(false); setQuery(''); }}
+      trigger={
+        <button type="button" onClick={() => setOpen(v => !v)}
+          className="w-full flex items-center justify-between px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground hover:bg-muted transition-colors">
+          <span className={value ? 'text-foreground truncate' : 'text-muted-foreground'}>
+            {displayName || 'MindOS'}
+          </span>
+          <ChevronDown size={12} className="text-muted-foreground shrink-0" />
+        </button>
+      }
+    >
+      {/* Search */}
+      <div className="sticky top-0 bg-card border-b border-border px-2.5 py-1.5">
+        <div className="flex items-center gap-1.5 px-2 py-1 rounded border border-border bg-background">
+          <Search size={11} className="text-muted-foreground shrink-0" />
+          <input type="text" value={query} onChange={e => setQuery(e.target.value)} autoFocus
+            placeholder="Search agents..."
+            className="flex-1 text-xs bg-transparent text-foreground placeholder:text-muted-foreground focus:outline-none"
+          />
+        </div>
+      </div>
+
+      <button onClick={() => select(undefined)}
+        className={`w-full text-left px-3 py-1.5 text-xs hover:bg-muted transition-colors ${!value ? 'text-[var(--amber)] font-medium' : 'text-foreground'}`}>
+        MindOS <span className="text-muted-foreground/50 ml-1">(default)</span>
+      </button>
+      {filtered.slice(0, 30).map(a => (
+        <button key={a.id} onClick={() => select(a.id)}
+          className={`w-full text-left px-3 py-1.5 text-xs hover:bg-muted transition-colors ${value === a.id ? 'text-[var(--amber)] font-medium' : 'text-foreground'}`}>
+          {a.name} {a.name !== a.id && <span className="text-muted-foreground/50 ml-1">({a.id})</span>}
+        </button>
+      ))}
+      {agents.length === 0 && <div className="px-3 py-2 text-xs text-muted-foreground">Loading...</div>}
+      {agents.length > 0 && filtered.length === 0 && !query && (
+        <div className="px-3 py-2 text-xs text-muted-foreground">No ACP agents found</div>
+      )}
+      <div className="border-t border-border px-2.5 py-1.5">
+        <input type="text" value={custom} onChange={e => setCustom(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter' && custom.trim()) { select(custom.trim()); setCustom(''); } }}
+          placeholder="Custom agent ID..."
+          className="w-full px-2 py-1 text-xs rounded border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+      </div>
+    </Dropdown>
+  );
+}
+
+// ─── Model Selector ───────────────────────────────────────────────────────
+
+const KNOWN_MODELS = [
+  { group: 'Anthropic', models: ['claude-sonnet-4-6', 'claude-opus-4', 'claude-3.5-sonnet', 'claude-3.5-haiku'] },
+  { group: 'OpenAI', models: ['gpt-4o', 'gpt-4o-mini', 'o3', 'o4-mini'] },
+  { group: 'Google', models: ['gemini-2.5-pro', 'gemini-2.5-flash'] },
+];
+
+export function ModelSelector({ value, onChange }: { value?: string; onChange: (v: string | undefined) => void }) {
+  const [open, setOpen] = useState(false);
+  const [custom, setCustom] = useState('');
+
+  const select = (v: string | undefined) => { onChange(v); setOpen(false); };
+
+  return (
+    <Dropdown
+      open={open}
+      onClose={() => setOpen(false)}
+      trigger={
+        <button type="button" onClick={() => setOpen(v => !v)}
+          className="w-full flex items-center justify-between px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground hover:bg-muted transition-colors">
+          <span className={value ? 'text-foreground truncate' : 'text-muted-foreground'}>
+            {value || 'Default model'}
+          </span>
+          {value ? (
+            <X size={12} className="text-muted-foreground shrink-0 hover:text-foreground cursor-pointer" onClick={e => { e.stopPropagation(); select(undefined); }} />
+          ) : (
+            <ChevronDown size={12} className="text-muted-foreground shrink-0" />
+          )}
+        </button>
+      }
+    >
+      <button onClick={() => select(undefined)}
+        className={`w-full text-left px-3 py-1.5 text-xs hover:bg-muted transition-colors ${!value ? 'text-[var(--amber)] font-medium' : 'text-muted-foreground'}`}>
+        (default)
+      </button>
+      {KNOWN_MODELS.map(g => (
+        <div key={g.group}>
+          <div className="px-3 py-1 text-2xs font-semibold text-muted-foreground/60 uppercase tracking-wide bg-muted/30">{g.group}</div>
+          {g.models.map(m => (
+            <button key={m} onClick={() => select(m)}
+              className={`w-full text-left px-3 py-1.5 text-xs hover:bg-muted transition-colors ${value === m ? 'text-[var(--amber)] font-medium' : 'text-foreground'}`}>
+              {m}
+            </button>
+          ))}
+        </div>
+      ))}
+      <div className="border-t border-border px-2.5 py-1.5">
+        <input type="text" value={custom} onChange={e => setCustom(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter' && custom.trim()) { select(custom.trim()); setCustom(''); } }}
+          placeholder="Custom model ID..."
+          className="w-full px-2 py-1 text-xs rounded border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+      </div>
+    </Dropdown>
+  );
+}
+
+// ─── Skills Multi-Select ─────────────────────────────────────────────────
+
+interface SkillInfo { name: string; description?: string }
+
+/** Cache skill list globally so all SkillsSelector instances share it */
+let _skillsCache: SkillInfo[] | null = null;
+let _skillsFetching = false;
+const _skillsListeners: Array<(skills: SkillInfo[]) => void> = [];
+
+function fetchSkillsOnce(cb: (skills: SkillInfo[]) => void) {
+  if (_skillsCache) { cb(_skillsCache); return; }
+  _skillsListeners.push(cb);
+  if (_skillsFetching) return;
+  _skillsFetching = true;
+  fetch('/api/skills').then(r => r.json()).then(data => {
+    _skillsCache = (data.skills ?? []).map((s: { name: string; description?: string }) => ({
+      name: s.name, description: s.description,
+    }));
+    _skillsListeners.forEach(fn => fn(_skillsCache!));
+    _skillsListeners.length = 0;
+  }).catch(() => {
+    _skillsCache = [];
+    _skillsListeners.forEach(fn => fn([]));
+    _skillsListeners.length = 0;
+  });
+}
+
+export function SkillsSelector({ value, onChange }: { value: string[]; onChange: (v: string[]) => void }) {
+  const [open, setOpen] = useState(false);
+  const [skills, setSkills] = useState<SkillInfo[]>(_skillsCache ?? []);
+  const [query, setQuery] = useState('');
+
+  useEffect(() => {
+    fetchSkillsOnce(setSkills);
+  }, []);
+
+  const filtered = query
+    ? skills.filter(s => s.name.toLowerCase().includes(query.toLowerCase()))
+    : skills;
+
+  const toggle = (name: string) => {
+    if (value.includes(name)) {
+      onChange(value.filter(v => v !== name));
+    } else {
+      onChange([...value, name]);
+    }
+  };
+
+  const remove = (name: string) => onChange(value.filter(v => v !== name));
+
+  return (
+    <div>
+      {/* Selected chips */}
+      {value.length > 0 && (
+        <div className="flex flex-wrap gap-1 mb-1.5">
+          {value.map(s => (
+            <span key={s} className="inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-md text-2xs bg-[var(--amber)]/10 text-[var(--amber)] border border-[var(--amber)]/20">
+              {s}
+              <button onClick={() => remove(s)} className="p-0.5 rounded hover:bg-[var(--amber)]/20 transition-colors">
+                <X size={10} />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Dropdown trigger */}
+      <Dropdown
+        open={open}
+        onClose={() => { setOpen(false); setQuery(''); }}
+        trigger={
+          <button type="button" onClick={() => setOpen(v => !v)}
+            className="w-full flex items-center justify-between px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground hover:bg-muted transition-colors">
+            <span className="text-muted-foreground">
+              {value.length === 0 ? 'Add skills...' : `${value.length} selected`}
+            </span>
+            <ChevronDown size={12} className="text-muted-foreground" />
+          </button>
+        }
+      >
+        {/* Search */}
+        <div className="sticky top-0 bg-card border-b border-border px-2.5 py-1.5">
+          <div className="flex items-center gap-1.5 px-2 py-1 rounded border border-border bg-background">
+            <Search size={11} className="text-muted-foreground shrink-0" />
+            <input type="text" value={query} onChange={e => setQuery(e.target.value)} autoFocus
+              placeholder="Search skills..."
+              className="flex-1 text-xs bg-transparent text-foreground placeholder:text-muted-foreground focus:outline-none"
+            />
+          </div>
+        </div>
+
+        {/* Skill list with checkboxes */}
+        {filtered.slice(0, 60).map(s => {
+          const checked = value.includes(s.name);
+          return (
+            <button key={s.name} onClick={() => toggle(s.name)}
+              className={`w-full text-left px-3 py-1.5 text-xs hover:bg-muted transition-colors flex items-center gap-2 ${checked ? 'bg-[var(--amber)]/5' : ''}`}>
+              <span className={`w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0 transition-colors ${
+                checked ? 'bg-[var(--amber)] border-[var(--amber)] text-[var(--amber-foreground)]' : 'border-border'
+              }`}>
+                {checked && <span className="text-[9px]">✓</span>}
+              </span>
+              <div className="min-w-0 flex-1">
+                <span className="block truncate">{s.name}</span>
+                {s.description && <span className="block text-2xs text-muted-foreground truncate mt-0.5">{s.description}</span>}
+              </div>
+            </button>
+          );
+        })}
+        {skills.length === 0 && <div className="px-3 py-2 text-xs text-muted-foreground">Loading...</div>}
+        {skills.length > 0 && filtered.length === 0 && (
+          <div className="px-3 py-2 text-xs text-muted-foreground">No skills found</div>
+        )}
+      </Dropdown>
+    </div>
+  );
+}
+
+// ─── Context Selector (file drop zone) ───────────────────────────────────
+
+export function ContextSelector({ value, onChange }: { value: string[]; onChange: (v: string[]) => void }) {
+  const [dragOver, setDragOver] = useState(false);
+  const [manualInput, setManualInput] = useState('');
+
+  const addPath = useCallback((path: string) => {
+    const trimmed = path.trim();
+    if (trimmed && !value.includes(trimmed)) {
+      onChange([...value, trimmed]);
+    }
+  }, [value, onChange]);
+
+  const remove = (path: string) => onChange(value.filter(v => v !== path));
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    // FileTree drag format: text/mindos-path
+    const mindosPath = e.dataTransfer.getData('text/mindos-path');
+    if (mindosPath) {
+      addPath(mindosPath);
+      return;
+    }
+    // Fallback: plain text
+    const text = e.dataTransfer.getData('text/plain');
+    if (text) addPath(text);
+  }, [addPath]);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+    setDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback(() => setDragOver(false), []);
+
+  return (
+    <div>
+      {/* Selected files */}
+      {value.length > 0 && (
+        <div className="flex flex-col gap-1 mb-1.5">
+          {value.map(p => (
+            <div key={p} className="flex items-center gap-1.5 pl-2 pr-1 py-1 rounded-md text-2xs bg-muted/60 border border-border group">
+              <FileText size={11} className="text-muted-foreground shrink-0" />
+              <span className="text-foreground truncate flex-1" title={p}>{p}</span>
+              <button onClick={() => remove(p)} className="p-0.5 rounded hover:bg-[var(--error)]/10 text-muted-foreground hover:text-[var(--error)] opacity-0 group-hover:opacity-100 transition-all">
+                <X size={10} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Drop zone */}
+      <div
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        className={`flex items-center gap-2 px-3 py-2.5 rounded-lg border-2 border-dashed transition-colors ${
+          dragOver
+            ? 'border-[var(--amber)] bg-[var(--amber)]/5'
+            : 'border-border hover:border-muted-foreground/30'
+        }`}
+      >
+        <FolderOpen size={14} className={`shrink-0 ${dragOver ? 'text-[var(--amber)]' : 'text-muted-foreground/40'}`} />
+        <span className="text-2xs text-muted-foreground">
+          Drag files here from the sidebar
+        </span>
+      </div>
+
+      {/* Manual input */}
+      <div className="mt-1.5">
+        <input type="text" value={manualInput} onChange={e => setManualInput(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter' && manualInput.trim()) { addPath(manualInput.trim()); setManualInput(''); } }}
+          placeholder="Or type a file path..."
+          className="w-full px-2.5 py-1 text-2xs rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+      </div>
+    </div>
+  );
+}
+
+// ─── Directory Picker ────────────────────────────────────────────────────
+
+async function fetchDirs(dirPath: string): Promise<string[]> {
+  try {
+    const res = await fetch('/api/setup/ls', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path: dirPath || '~' }),
+    });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.dirs ?? [];
+  } catch { return []; }
+}
+
+/** Get parent directory from a path (supports / and \) */
+function getParentDir(p: string): string {
+  const trimmed = p.trim();
+  if (!trimmed) return '';
+  if (trimmed.endsWith('/') || trimmed.endsWith('\\')) return trimmed;
+  const lastSlash = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'));
+  return lastSlash >= 0 ? trimmed.slice(0, lastSlash + 1) : '';
+}
+
+export function DirPicker({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  // ── Autocomplete state ──
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [activeIdx, setActiveIdx] = useState(-1);
+  const justSelectedRef = useRef(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // ── Browse dialog state ──
+  const [browseOpen, setBrowseOpen] = useState(false);
+  const [browsePath, setBrowsePath] = useState(value || '~');
+  const [browseDirs, setBrowseDirs] = useState<string[]>([]);
+  const [browseLoading, setBrowseLoading] = useState(false);
+
+  // Debounced autocomplete on typing
+  useEffect(() => {
+    if (justSelectedRef.current) { justSelectedRef.current = false; return; }
+    if (!value.trim()) { setSuggestions([]); setShowSuggestions(false); return; }
+    const timer = setTimeout(async () => {
+      const parent = getParentDir(value) || '~';
+      const dirs = await fetchDirs(parent);
+      if (!dirs.length) { setSuggestions([]); setShowSuggestions(false); return; }
+      const sep = parent.includes('\\') ? '\\' : '/';
+      const parentNorm = (parent.endsWith('/') || parent.endsWith('\\')) ? parent : parent + sep;
+      const full = dirs.map(d => parentNorm + d);
+      const endsWithSep = value.endsWith('/') || value.endsWith('\\');
+      const filtered = endsWithSep ? full : full.filter(f => f.startsWith(value.trim()));
+      setSuggestions(filtered.slice(0, 15));
+      setShowSuggestions(filtered.length > 0);
+      setActiveIdx(-1);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [value]);
+
+  const hideSuggestions = () => { setSuggestions([]); setShowSuggestions(false); setActiveIdx(-1); };
+
+  const selectSuggestion = (val: string) => {
+    justSelectedRef.current = true;
+    onChange(val);
+    hideSuggestions();
+    inputRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!showSuggestions || suggestions.length === 0) return;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIdx(i => Math.min(i + 1, suggestions.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIdx(i => Math.max(i - 1, -1));
+    } else if (e.key === 'Enter' && activeIdx >= 0) {
+      e.preventDefault();
+      selectSuggestion(suggestions[activeIdx]);
+    } else if (e.key === 'Escape') {
+      hideSuggestions();
+    } else if (e.key === 'Tab' && activeIdx >= 0) {
+      e.preventDefault();
+      selectSuggestion(suggestions[activeIdx]);
+    }
+  };
+
+  // Browse dialog
+  const loadBrowse = useCallback(async (dirPath: string) => {
+    setBrowseLoading(true);
+    const result = await fetchDirs(dirPath);
+    setBrowseDirs(result);
+    setBrowseLoading(false);
+  }, []);
+
+  useEffect(() => {
+    if (browseOpen) loadBrowse(browsePath);
+  }, [browseOpen, browsePath, loadBrowse]);
+
+  const navigateInto = (subDir: string) => {
+    const next = browsePath === '~' ? `~/${subDir}` : `${browsePath.replace(/\/+$/, '')}/${subDir}`;
+    setBrowsePath(next);
+  };
+
+  const selectBrowsed = () => { onChange(browsePath); setBrowseOpen(false); };
+
+  const goUp = () => {
+    const parts = browsePath.split('/');
+    if (parts.length <= 1) return;
+    parts.pop();
+    setBrowsePath(parts.join('/') || '~');
+  };
+
+  return (
+    <div className="relative flex gap-1.5">
+      {/* Input with autocomplete */}
+      <div className="relative flex-1">
+        <input
+          ref={inputRef}
+          type="text"
+          value={value}
+          onChange={e => { onChange(e.target.value); setShowSuggestions(true); }}
+          onKeyDown={handleKeyDown}
+          onBlur={() => setTimeout(hideSuggestions, 150)}
+          onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
+          placeholder="~/projects/my-app"
+          className="w-full px-2.5 py-1.5 text-xs rounded-lg border border-border bg-background text-foreground font-mono placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+        {showSuggestions && suggestions.length > 0 && (
+          <div role="listbox"
+            className="absolute z-50 left-0 right-0 top-full mt-1 rounded-lg border border-border bg-card shadow-lg overflow-auto max-h-[200px]">
+            {suggestions.map((s, i) => (
+              <button key={s} type="button" role="option" aria-selected={i === activeIdx}
+                onMouseDown={() => selectSuggestion(s)}
+                className={`w-full text-left px-3 py-1.5 text-xs font-mono transition-colors flex items-center gap-1.5 ${
+                  i === activeIdx ? 'bg-muted text-foreground' : 'text-foreground hover:bg-muted/50'
+                }`}>
+                <Folder size={11} className="text-[var(--amber)] shrink-0" />
+                <span className="truncate">{s}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Browse button */}
+      <Dropdown
+        open={browseOpen}
+        onClose={() => setBrowseOpen(false)}
+        trigger={
+          <button type="button" onClick={() => { setBrowsePath(value || '~'); setBrowseOpen(v => !v); }}
+            className="px-2 py-1.5 rounded-lg border border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+            title="Browse directories"
+          >
+            <FolderOpen size={13} />
+          </button>
+        }
+      >
+        <div className="sticky top-0 bg-card border-b border-border px-2.5 py-2 flex items-center gap-1.5">
+          <span className="text-2xs font-mono text-muted-foreground truncate flex-1" title={browsePath}>{browsePath}</span>
+          <button onClick={selectBrowsed}
+            className="px-2 py-0.5 text-2xs rounded font-medium bg-[var(--amber)] text-[var(--amber-foreground)] shrink-0">
+            Select
+          </button>
+        </div>
+        {browsePath !== '~' && (
+          <button onClick={goUp}
+            className="w-full text-left px-3 py-1.5 text-xs hover:bg-muted transition-colors text-muted-foreground flex items-center gap-1.5">
+            <Folder size={12} className="shrink-0" /> ..
+          </button>
+        )}
+        {browseLoading && <div className="px-3 py-2 text-xs text-muted-foreground">Loading...</div>}
+        {!browseLoading && browseDirs.length === 0 && (
+          <div className="px-3 py-2 text-xs text-muted-foreground">No subdirectories</div>
+        )}
+        {browseDirs.map(d => (
+          <button key={d} onClick={() => navigateInto(d)}
+            className="w-full text-left px-3 py-1.5 text-xs hover:bg-muted transition-colors text-foreground flex items-center gap-1.5">
+            <Folder size={12} className="text-[var(--amber)] shrink-0" />
+            <span className="truncate flex-1">{d}</span>
+            <ChevronRight size={10} className="text-muted-foreground/40 shrink-0" />
+          </button>
+        ))}
+      </Dropdown>
+    </div>
+  );
+}

package/_standalone/components/renderers/workflow-yaml/serializer.ts

@@ -0,0 +1,56 @@
+import YAML from 'js-yaml';
+import type { WorkflowYaml } from './types';
+
+/**
+ * Serialize a WorkflowYaml object to a YAML string.
+ * Strips undefined/empty optional fields to keep output clean.
+ */
+export function serializeWorkflowYaml(workflow: WorkflowYaml): string {
+  const clean: Record<string, unknown> = {
+    title: workflow.title,
+  };
+  if (workflow.description) clean.description = workflow.description;
+  if (workflow.workDir) clean.workDir = workflow.workDir;
+  if (workflow.skills?.length) clean.skills = workflow.skills;
+  if (workflow.tools?.length) clean.tools = workflow.tools;
+
+  clean.steps = workflow.steps.map((step) => {
+    const s: Record<string, unknown> = {
+      id: step.id,
+      name: step.name,
+    };
+    if (step.description) s.description = step.description;
+    if (step.agent) s.agent = step.agent;
+    if (step.model) s.model = step.model;
+    if (step.skill) s.skill = step.skill;
+    if (step.skills?.length) s.skills = step.skills;
+    if (step.tools?.length) s.tools = step.tools;
+    if (step.context?.length) s.context = step.context;
+    s.prompt = step.prompt;
+    if (step.timeout) s.timeout = step.timeout;
+    return s;
+  });
+
+  return YAML.dump(clean, {
+    lineWidth: -1,
+    noRefs: true,
+    quotingType: '"',
+    forceQuotes: false,
+  });
+}
+
+/** Generate a URL-safe step ID from a name */
+export function generateStepId(name: string, existingIds: string[]): string {
+  const base = name
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '')
+    || 'step';
+  let id = base;
+  let i = 2;
+  while (existingIds.includes(id)) {
+    id = `${base}-${i}`;
+    i++;
+  }
+  return id;
+}

package/_standalone/components/renderers/workflow-yaml/types.ts

@@ -0,0 +1,46 @@
+// Types for YAML Workflow
+
+export type StepStatus = 'pending' | 'running' | 'done' | 'error' | 'skipped';
+
+export interface WorkflowStep {
+  id: string;
+  name: string;
+  description?: string;
+  agent?: string;
+  model?: string;
+  skill?: string;
+  skills?: string[];
+  tools?: string[];
+  context?: string[];
+  prompt: string;
+  timeout?: number;
+}
+
+export interface WorkflowYaml {
+  title: string;
+  description?: string;
+  workDir?: string;
+  skills?: string[];
+  tools?: string[];
+  steps: WorkflowStep[];
+}
+
+export interface WorkflowStepRuntime extends WorkflowStep {
+  index: number;
+  status: StepStatus;
+  output: string;
+  error?: string;
+  startedAt?: Date;
+  completedAt?: Date;
+  durationMs?: number;
+}
+
+export interface ParseResult {
+  workflow: WorkflowYaml | null;
+  errors: string[];
+}
+
+export interface ValidationResult {
+  valid: boolean;
+  errors: string[];
+}