@geminilight/mindos 0.6.30 → 0.6.32

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo, useState, useCallback, useRef } from 'react';
-import { Pencil, Play, AlertCircle } from 'lucide-react';
+import { Pencil, Play, AlertCircle, Zap } from 'lucide-react';
 import type { RendererContext } from '@/lib/renderers/registry';
 import { parseWorkflowYaml } from './parser';
 import WorkflowEditor from './WorkflowEditor';
@@ -15,15 +15,12 @@ export function WorkflowYamlRenderer({ filePath, content }: RendererContext) {
   const [mode, setMode] = useState<Mode>('edit');
   const [dirty, setDirty] = useState(false);
 
-  // Editor state: start from parsed workflow or a blank template
   const [editWorkflow, setEditWorkflow] = useState<WorkflowYaml>(() => {
     if (parsed.workflow) return structuredClone(parsed.workflow);
     return { title: '', description: '', steps: [] };
   });
 
-  // Track original content for dirty detection
   const savedContentRef = useRef(content);
-
   const latestParsed = useMemo(() => parsed.workflow ?? null, [parsed.workflow]);
 
   const handleEditorChange = useCallback((wf: WorkflowYaml) => {
@@ -31,77 +28,88 @@ export function WorkflowYamlRenderer({ filePath, content }: RendererContext) {
     setDirty(true);
   }, []);
 
-  const handleSaved = useCallback(() => {
-    setDirty(false);
-  }, []);
+  const handleSaved = useCallback(() => setDirty(false), []);
 
-  // Runner uses latest parsed workflow (from file), not editor state
   const runWorkflow = latestParsed ?? editWorkflow;
   const canRun = runWorkflow.steps.length > 0 && !!runWorkflow.title;
   const hasParseErrors = parsed.errors.length > 0;
 
-  // Explain why Run is disabled
   const runDisabledReason = !runWorkflow.title
     ? 'Add a title first'
     : runWorkflow.steps.length === 0
       ? 'Add at least one step'
-      : dirty
-        ? 'Save changes first'
-        : undefined;
+      : dirty ? 'Save changes first' : undefined;
 
   const handleModeSwitch = (target: Mode) => {
-    if (target === 'run' && dirty) {
-      // Don't block, but show the tooltip
-    }
     if (target === 'run' && !canRun) return;
     setMode(target);
   };
 
   return (
-    <div className="max-w-[720px] mx-auto py-6 px-1">
-      {/* Mode switcher + title */}
-      <div className="flex items-center gap-3 mb-5">
-        <div className="flex rounded-lg border border-border overflow-hidden text-xs">
-          <button
-            onClick={() => handleModeSwitch('edit')}
-            className={`flex items-center gap-1.5 px-3.5 py-1.5 transition-colors ${
-              mode === 'edit'
-                ? 'bg-[var(--amber)] text-[var(--amber-foreground)] font-medium'
-                : 'bg-card text-muted-foreground hover:bg-muted'
-            }`}
-          >
-            <Pencil size={12} />
-            Edit
-          </button>
-          <button
-            onClick={() => handleModeSwitch('run')}
-            disabled={!canRun}
-            title={runDisabledReason}
-            className={`flex items-center gap-1.5 px-3.5 py-1.5 transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
-              mode === 'run'
-                ? 'bg-[var(--amber)] text-[var(--amber-foreground)] font-medium'
-                : 'bg-card text-muted-foreground hover:bg-muted'
-            }`}
-          >
-            <Play size={12} />
-            Run
-          </button>
+    <div className="max-w-[720px] mx-auto py-8 px-2">
+      {/* Hero header — gives the page identity */}
+      <div className="mb-8">
+        {/* Mode tabs + step count */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-1 p-0.5 rounded-lg bg-muted/50">
+            <button
+              onClick={() => handleModeSwitch('edit')}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                mode === 'edit'
+                  ? 'bg-background text-foreground shadow-sm'
+                  : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              <Pencil size={11} />
+              Edit
+            </button>
+            <button
+              onClick={() => handleModeSwitch('run')}
+              disabled={!canRun}
+              title={runDisabledReason}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all disabled:opacity-30 disabled:cursor-not-allowed ${
+                mode === 'run'
+                  ? 'bg-background text-foreground shadow-sm'
+                  : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              <Play size={11} />
+              Run
+            </button>
+          </div>
+
+          {editWorkflow.steps.length > 0 && (
+            <span className="text-2xs text-muted-foreground/60 font-mono">
+              {editWorkflow.steps.length} step{editWorkflow.steps.length !== 1 ? 's' : ''}
+            </span>
+          )}
         </div>
 
-        <h1 className="text-base font-semibold text-foreground truncate flex-1">
-          {editWorkflow.title || 'New Workflow'}
-          {dirty && <span className="text-[var(--amber)] ml-1" title="Unsaved changes">*</span>}
-        </h1>
+        {/* Title */}
+        <div className="flex items-start gap-3">
+          <div className="mt-1 w-8 h-8 rounded-lg bg-[var(--amber)]/10 flex items-center justify-center shrink-0">
+            <Zap size={16} className="text-[var(--amber)]" />
+          </div>
+          <div className="min-w-0 flex-1">
+            <h1 className="text-lg font-semibold text-foreground truncate leading-tight">
+              {editWorkflow.title || 'Untitled Flow'}
+              {dirty && <span className="text-[var(--amber)] ml-1.5 text-sm" title="Unsaved changes">*</span>}
+            </h1>
+            {editWorkflow.description && (
+              <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{editWorkflow.description}</p>
+            )}
+          </div>
+        </div>
       </div>
 
       {/* Parse error banner */}
       {hasParseErrors && mode === 'edit' && (
-        <div className="mb-4 px-3 py-2.5 rounded-lg bg-[var(--error)]/10 border border-[var(--error)]/30">
-          <div className="flex items-center gap-2 mb-1">
+        <div className="mb-5 px-3.5 py-3 rounded-lg bg-[var(--error)]/8 border border-[var(--error)]/20">
+          <div className="flex items-center gap-2 mb-1.5">
             <AlertCircle size={13} className="text-[var(--error)] shrink-0" />
-            <span className="text-xs font-medium text-[var(--error)]">File has parse issues</span>
+            <span className="text-xs font-medium text-[var(--error)]">Parse issues found</span>
           </div>
-          <ul className="text-2xs text-[var(--error)]/80 pl-5 list-disc">
+          <ul className="text-2xs text-[var(--error)]/70 pl-5 list-disc space-y-0.5">
             {parsed.errors.slice(0, 3).map((e, i) => <li key={i}>{e}</li>)}
           </ul>
         </div>
@@ -109,17 +117,9 @@ export function WorkflowYamlRenderer({ filePath, content }: RendererContext) {
 
       {/* Content */}
       {mode === 'edit' ? (
-        <WorkflowEditor
-          workflow={editWorkflow}
-          filePath={filePath}
-          onChange={handleEditorChange}
-          onSaved={handleSaved}
-        />
+        <WorkflowEditor workflow={editWorkflow} filePath={filePath} onChange={handleEditorChange} onSaved={handleSaved} />
       ) : (
-        <WorkflowRunner
-          workflow={runWorkflow}
-          filePath={filePath}
-        />
+        <WorkflowRunner workflow={runWorkflow} filePath={filePath} />
       )}
     </div>
   );

package/app/components/renderers/workflow-yaml/execution.ts

@@ -1,4 +1,4 @@
-// Workflow step execution logic — fetches skills, constructs prompts, streams AI responses
+// Workflow step execution logic — fetches skills, resolves agents, constructs prompts, streams AI responses
 
 import type { WorkflowYaml, WorkflowStepRuntime } from './types';
 
@@ -41,17 +41,45 @@ async function fetchSkillContent(name: string, signal: AbortSignal): Promise<str
 
 /**
  * Collect all unique skill names referenced by a step (step-level + workflow-level).
- * Step-level skill takes priority; workflow-level skills provide additional context.
+ * Handles both legacy `skill` (singular) and new `skills` (array) fields.
  */
 function collectSkillNames(step: WorkflowStepRuntime, workflow: WorkflowYaml): string[] {
   const names: string[] = [];
-  if (step.skill) names.push(step.skill);
+  // Step-level skills (new array format takes priority)
+  if (step.skills?.length) {
+    for (const s of step.skills) {
+      if (!names.includes(s)) names.push(s);
+    }
+  } else if (step.skill) {
+    names.push(step.skill);
+  }
+  // Workflow-level skills
   for (const s of workflow.skills ?? []) {
     if (!names.includes(s)) names.push(s);
   }
   return names;
 }
 
+// ─── ACP Agent Resolution ────────────────────────────────────────────────
+
+/** Resolve an agent name/id to an ACP agent selection { id, name } */
+async function resolveAcpAgent(
+  agentId: string,
+  signal: AbortSignal,
+): Promise<{ id: string; name: string } | null> {
+  try {
+    const res = await fetch(`/api/acp/registry?agent=${encodeURIComponent(agentId)}`, { signal });
+    if (!res.ok) return null;
+    const data = await res.json();
+    if (data.agent?.id) {
+      return { id: data.agent.id, name: data.agent.name || agentId };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
 // ─── Prompt Construction ──────────────────────────────────────────────────
 
 function buildPrompt(
@@ -61,12 +89,15 @@ function buildPrompt(
 ): string {
   const allStepsSummary = workflow.steps.map((s, i) => `${i + 1}. ${s.name}`).join('\n');
 
+  // Determine primary skill name for labeling
+  const primarySkill = step.skills?.length ? step.skills[0] : step.skill;
+
   // Build skill context block
   let skillBlock = '';
   if (skillContents.size > 0) {
     const sections: string[] = [];
     for (const [name, content] of skillContents) {
-      const isPrimary = name === step.skill;
+      const isPrimary = name === primarySkill;
       sections.push(
         `### ${isPrimary ? '[Primary] ' : ''}Skill: ${name}\n\n${content}`
       );
@@ -95,8 +126,9 @@ Be specific and actionable. Format in Markdown.`;
 /**
  * Execute a workflow step with AI:
  * 1. Fetch referenced skill(s) content
- * 2. Build prompt with injected skill context
- * 3. Stream response from /api/ask
+ * 2. Resolve ACP agent (if step.agent is set)
+ * 3. Build prompt with injected skill context
+ * 4. Stream response from /api/ask (routed to ACP agent if resolved)
  */
 export async function runStepWithAI(
   step: WorkflowStepRuntime,
@@ -121,17 +153,30 @@ export async function runStepWithAI(
     }
   }
 
-  // 2. Build prompt
+  // 2. Resolve ACP agent
+  let selectedAcpAgent: { id: string; name: string } | null = null;
+  if (step.agent) {
+    selectedAcpAgent = await resolveAcpAgent(step.agent, signal);
+    // If agent name doesn't resolve in ACP registry, skip silently
+    // (the step will run with the default MindOS agent)
+  }
+
+  // 3. Build prompt
   const prompt = buildPrompt(step, workflow, skillContents);
 
-  // 3. Stream from /api/ask
+  // 4. Stream from /api/ask
+  const body: Record<string, unknown> = {
+    messages: [{ role: 'user', content: prompt }],
+    currentFile: filePath,
+  };
+  if (selectedAcpAgent) {
+    body.selectedAcpAgent = selectedAcpAgent;
+  }
+
   const res = await fetch('/api/ask', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      messages: [{ role: 'user', content: prompt }],
-      currentFile: filePath,
-    }),
+    body: JSON.stringify(body),
     signal,
   });
 
@@ -155,6 +200,13 @@ export async function runStepWithAI(
           if (event.type === 'text_delta' && typeof event.delta === 'string') {
             acc += event.delta;
             onChunk(acc);
+          } else if (event.type === 'thinking_delta' && typeof event.delta === 'string') {
+            // Show agent thinking as dimmed text
+            acc += event.delta;
+            onChunk(acc);
+          } else if (event.type === 'error' && event.message) {
+            // ACP agent error — throw so WorkflowRunner shows it in step error state
+            throw new Error(event.message);
           }
         } catch {
           // Not valid JSON — try legacy Vercel AI SDK format: 0:"..."

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

@@ -32,42 +32,94 @@ function Dropdown({ trigger, children, open, onClose }: {
 
 // ─── Agent Selector ───────────────────────────────────────────────────────
 
-const KNOWN_AGENTS = ['cursor', 'claude-code', 'mindos', 'gemini'];
+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('');
 
-  const select = (v: string | undefined) => { onChange(v); setOpen(false); };
+  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)}
+      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' : 'text-muted-foreground'}>
-            {value || 'Select agent'}
+          <span className={value ? 'text-foreground truncate' : 'text-muted-foreground'}>
+            {displayName || 'MindOS'}
           </span>
-          <ChevronDown size={12} className="text-muted-foreground" />
+          <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-muted-foreground'}`}>
-        (none)
+        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>
-      {KNOWN_AGENTS.map(a => (
-        <button key={a} onClick={() => select(a)}
-          className={`w-full text-left px-3 py-1.5 text-xs hover:bg-muted transition-colors ${value === a ? 'text-[var(--amber)] font-medium' : 'text-foreground'}`}>
-          {a}
+      {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..."
+          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>