@geminilight/mindos 0.6.28 → 0.6.30

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

@@ -0,0 +1,226 @@
+'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 { 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 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);
+  if (secs < 60) return `${secs}s`;
+  return `${Math.floor(secs / 60)}m ${secs % 60}s`;
+}
+
+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 allSkills = step.skills?.length ? step.skills : (step.skill ? [step.skill] : []);
+
+  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)}>
+              {step.name}
+            </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>
+            </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>
+            </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 by user' } : 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');
+
+  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}%` }} />
+        </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} />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,126 @@
+'use client';
+
+import { useMemo, useState, useCallback, useRef } from 'react';
+import { Pencil, Play, AlertCircle } from 'lucide-react';
+import type { RendererContext } from '@/lib/renderers/registry';
+import { parseWorkflowYaml } from './parser';
+import WorkflowEditor from './WorkflowEditor';
+import WorkflowRunner from './WorkflowRunner';
+import type { WorkflowYaml } from './types';
+
+type Mode = 'edit' | 'run';
+
+export function WorkflowYamlRenderer({ filePath, content }: RendererContext) {
+  const parsed = useMemo(() => parseWorkflowYaml(content), [content]);
+  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) => {
+    setEditWorkflow(wf);
+    setDirty(true);
+  }, []);
+
+  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;
+
+  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>
+
+        <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>
+      </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">
+            <AlertCircle size={13} className="text-[var(--error)] shrink-0" />
+            <span className="text-xs font-medium text-[var(--error)]">File has parse issues</span>
+          </div>
+          <ul className="text-2xs text-[var(--error)]/80 pl-5 list-disc">
+            {parsed.errors.slice(0, 3).map((e, i) => <li key={i}>{e}</li>)}
+          </ul>
+        </div>
+      )}
+
+      {/* Content */}
+      {mode === 'edit' ? (
+        <WorkflowEditor
+          workflow={editWorkflow}
+          filePath={filePath}
+          onChange={handleEditorChange}
+          onSaved={handleSaved}
+        />
+      ) : (
+        <WorkflowRunner
+          workflow={runWorkflow}
+          filePath={filePath}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,177 @@
+// Workflow step execution logic — fetches skills, constructs prompts, streams AI responses
+
+import type { WorkflowYaml, WorkflowStepRuntime } from './types';
+
+// ─── Skill Fetching ───────────────────────────────────────────────────────
+
+/** Cache skill content for the duration of a workflow run to avoid redundant fetches */
+const skillCache = new Map<string, string | null>();
+
+export function clearSkillCache() {
+  skillCache.clear();
+}
+
+/**
+ * Fetch skill content from /api/skills. Returns the full SKILL.md content,
+ * or null if the skill doesn't exist. Results are cached per skill name.
+ */
+async function fetchSkillContent(name: string, signal: AbortSignal): Promise<string | null> {
+  if (skillCache.has(name)) return skillCache.get(name)!;
+
+  try {
+    const res = await fetch('/api/skills', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'read', name }),
+      signal,
+    });
+    if (!res.ok) {
+      skillCache.set(name, null);
+      return null;
+    }
+    const data = await res.json();
+    const content = data.content as string | undefined;
+    skillCache.set(name, content ?? null);
+    return content ?? null;
+  } catch {
+    // Network error or abort — don't cache failures
+    return null;
+  }
+}
+
+/**
+ * Collect all unique skill names referenced by a step (step-level + workflow-level).
+ * Step-level skill takes priority; workflow-level skills provide additional context.
+ */
+function collectSkillNames(step: WorkflowStepRuntime, workflow: WorkflowYaml): string[] {
+  const names: string[] = [];
+  if (step.skill) names.push(step.skill);
+  for (const s of workflow.skills ?? []) {
+    if (!names.includes(s)) names.push(s);
+  }
+  return names;
+}
+
+// ─── Prompt Construction ──────────────────────────────────────────────────
+
+function buildPrompt(
+  step: WorkflowStepRuntime,
+  workflow: WorkflowYaml,
+  skillContents: Map<string, string>,
+): string {
+  const allStepsSummary = workflow.steps.map((s, i) => `${i + 1}. ${s.name}`).join('\n');
+
+  // Build skill context block
+  let skillBlock = '';
+  if (skillContents.size > 0) {
+    const sections: string[] = [];
+    for (const [name, content] of skillContents) {
+      const isPrimary = name === step.skill;
+      sections.push(
+        `### ${isPrimary ? '[Primary] ' : ''}Skill: ${name}\n\n${content}`
+      );
+    }
+    skillBlock = `\n\n---\n## Skill Reference\n\nFollow the guidelines from these skills when executing this step:\n\n${sections.join('\n\n---\n\n')}`;
+  }
+
+  return `You are executing step ${step.index + 1} of a workflow: "${step.name}".
+
+Context of the full workflow "${workflow.title}":
+${allStepsSummary}
+
+Current step instructions:
+${step.prompt || '(No specific instructions — use common sense.)'}${skillBlock}
+
+Execute concisely. Provide:
+1. What you did / what the output is
+2. Any decisions made
+3. What the next step should watch out for
+
+Be specific and actionable. Format in Markdown.`;
+}
+
+// ─── Streaming Execution ──────────────────────────────────────────────────
+
+/**
+ * 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
+ */
+export async function runStepWithAI(
+  step: WorkflowStepRuntime,
+  workflow: WorkflowYaml,
+  filePath: string,
+  onChunk: (accumulated: string) => void,
+  signal: AbortSignal,
+): Promise<void> {
+  // 1. Fetch skill content
+  const skillNames = collectSkillNames(step, workflow);
+  const skillContents = new Map<string, string>();
+
+  if (skillNames.length > 0) {
+    const results = await Promise.all(
+      skillNames.map(async (name) => {
+        const content = await fetchSkillContent(name, signal);
+        return [name, content] as const;
+      })
+    );
+    for (const [name, content] of results) {
+      if (content) skillContents.set(name, content);
+    }
+  }
+
+  // 2. Build prompt
+  const prompt = buildPrompt(step, workflow, skillContents);
+
+  // 3. Stream from /api/ask
+  const res = await fetch('/api/ask', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      messages: [{ role: 'user', content: prompt }],
+      currentFile: filePath,
+    }),
+    signal,
+  });
+
+  if (!res.ok) throw new Error(`Request failed (HTTP ${res.status})`);
+  if (!res.body) throw new Error('No response body');
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let acc = '';
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    const raw = decoder.decode(value, { stream: true });
+    for (const line of raw.split('\n')) {
+      // SSE format: data:{"type":"text_delta","delta":"..."}
+      const sseMatch = line.match(/^data:(.+)$/);
+      if (sseMatch) {
+        try {
+          const event = JSON.parse(sseMatch[1]);
+          if (event.type === 'text_delta' && typeof event.delta === 'string') {
+            acc += event.delta;
+            onChunk(acc);
+          }
+        } catch {
+          // Not valid JSON — try legacy Vercel AI SDK format: 0:"..."
+          const legacyMatch = line.match(/^0:"((?:[^"\\]|\\.)*)"$/);
+          if (legacyMatch) {
+            acc += legacyMatch[1].replace(/\\n/g, '\n').replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+            onChunk(acc);
+          }
+        }
+        continue;
+      }
+      // Legacy Vercel AI SDK format (without SSE prefix)
+      const legacyMatch = line.match(/^0:"((?:[^"\\]|\\.)*)"$/);
+      if (legacyMatch) {
+        acc += legacyMatch[1].replace(/\\n/g, '\n').replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+        onChunk(acc);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+export { manifest } from './manifest';
+export { WorkflowYamlRenderer } from './WorkflowYamlRenderer';
+export { parseWorkflowYaml, validateWorkflowSchema, getStepDescription } from './parser';
+export { runStepWithAI, clearSkillCache } from './execution';
+export { serializeWorkflowYaml, generateStepId } from './serializer';
+export type { WorkflowStep, WorkflowYaml, WorkflowStepRuntime, StepStatus, ParseResult, ValidationResult } from './types';

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

@@ -0,0 +1,21 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+export const manifest: RendererDefinition = {
+  id: 'workflow-yaml',
+  name: 'Workflow Runner',
+  description: 'Execute step-by-step YAML workflows with Skills & Agent support.',
+  author: 'MindOS',
+  icon: '⚡',
+  tags: ['workflow', 'automation', 'steps', 'ai', 'yaml'],
+  builtin: true,
+  core: true,
+  appBuiltinFeature: true,
+  entryPath: '.mindos/workflows/',
+  match: ({ extension, filePath }) => {
+    if (extension !== 'yaml' && extension !== 'yml') return false;
+    return /\.flow\.(yaml|yml)$/i.test(filePath);
+  },
+  load: () => import('./WorkflowYamlRenderer').then(m => ({ 
+    default: m.WorkflowYamlRenderer 
+  })),
+};