@geminilight/mindos 0.6.28 → 0.6.30

package/app/components/panels/WorkflowsPanel.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import Link from 'next/link';
+import { Plus, Zap, AlertTriangle, Loader2 } from 'lucide-react';
+import PanelHeader from './PanelHeader';
+import { useLocale } from '@/lib/LocaleContext';
+import { encodePath, relativeTime } from '@/lib/utils';
+
+interface WorkflowItem {
+  path: string;
+  fileName: string;
+  title: string;
+  description?: string;
+  stepCount: number;
+  mtime: number;
+  error?: string;
+}
+
+interface WorkflowsPanelProps {
+  active: boolean;
+  maximized?: boolean;
+  onMaximize?: () => void;
+}
+
+export default function WorkflowsPanel({ active, maximized, onMaximize }: WorkflowsPanelProps) {
+  const { t } = useLocale();
+  const wt = t.panels.workflows as {
+    title: string;
+    empty: string;
+    emptyDesc: string;
+    newWorkflow: string;
+    nSteps: (n: number) => string;
+    parseError: string;
+    name: string;
+    namePlaceholder: string;
+    template: string;
+    templateBlank: string;
+    create: string;
+    cancel: string;
+    creating: string;
+    exists: string;
+  };
+
+  const [workflows, setWorkflows] = useState<WorkflowItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreate, setShowCreate] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState('');
+
+  const fetchWorkflows = useCallback(async () => {
+    try {
+      const res = await fetch('/api/workflows');
+      if (!res.ok) return;
+      const data = await res.json();
+      setWorkflows(data.workflows ?? []);
+    } catch {
+      // silent
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (active) fetchWorkflows();
+  }, [active, fetchWorkflows]);
+
+  const handleCreate = async () => {
+    const name = newName.trim();
+    if (!name || creating) return;
+    setCreating(true);
+    setCreateError('');
+
+    try {
+      const res = await fetch('/api/workflows', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setCreateError(res.status === 409 ? wt.exists : (data.error || 'Error'));
+        return;
+      }
+      // Refresh list and navigate to new file
+      setShowCreate(false);
+      setNewName('');
+      await fetchWorkflows();
+      window.location.href = `/view/${encodePath(data.path)}`;
+    } catch {
+      setCreateError('Network error');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
+      <PanelHeader title={wt.title} maximized={maximized} onMaximize={onMaximize}>
+        <button
+          onClick={() => setShowCreate(v => !v)}
+          className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors focus-visible:ring-1 focus-visible:ring-ring"
+          aria-label={wt.newWorkflow}
+          title={wt.newWorkflow}
+        >
+          <Plus size={13} />
+        </button>
+      </PanelHeader>
+
+      <div className="flex-1 overflow-y-auto min-h-0">
+        {/* Create form */}
+        {showCreate && (
+          <div className="px-3 py-3 border-b border-border">
+            <label className="block text-xs font-medium text-muted-foreground mb-1.5">{wt.name}</label>
+            <input
+              type="text"
+              value={newName}
+              onChange={e => { setNewName(e.target.value); setCreateError(''); }}
+              onKeyDown={e => e.key === 'Enter' && handleCreate()}
+              placeholder={wt.namePlaceholder}
+              autoFocus
+              className="w-full px-2.5 py-1.5 text-sm rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+            />
+            {createError && (
+              <p className="text-xs text-[var(--error)] mt-1">{createError}</p>
+            )}
+            <div className="flex gap-2 mt-2.5">
+              <button
+                onClick={() => { setShowCreate(false); setNewName(''); setCreateError(''); }}
+                className="flex-1 px-3 py-1.5 text-xs rounded-md border border-border text-muted-foreground hover:bg-muted transition-colors"
+              >
+                {wt.cancel}
+              </button>
+              <button
+                onClick={handleCreate}
+                disabled={!newName.trim() || creating}
+                className="flex-1 px-3 py-1.5 text-xs rounded-md font-medium transition-colors disabled:opacity-50 bg-[var(--amber)] text-[var(--amber-foreground)]"
+              >
+                {creating ? wt.creating : wt.create}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Loading */}
+        {loading && (
+          <div className="flex items-center justify-center py-8 text-muted-foreground">
+            <Loader2 size={16} className="animate-spin" />
+          </div>
+        )}
+
+        {/* Empty state */}
+        {!loading && workflows.length === 0 && !showCreate && (
+          <div className="flex flex-col items-center justify-center py-10 px-4 text-center">
+            <Zap size={24} className="text-muted-foreground/40 mb-3" />
+            <p className="text-sm font-medium text-muted-foreground mb-1">{wt.empty}</p>
+            <p className="text-xs text-muted-foreground/70 mb-4 max-w-[200px]">{wt.emptyDesc}</p>
+            <button
+              onClick={() => setShowCreate(true)}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md font-medium bg-[var(--amber)] text-[var(--amber-foreground)] transition-colors"
+            >
+              <Plus size={12} />
+              {wt.newWorkflow}
+            </button>
+          </div>
+        )}
+
+        {/* Workflow list */}
+        {!loading && workflows.length > 0 && (
+          <div className="flex flex-col gap-0.5 py-1.5">
+            {workflows.map(w => (
+              <Link
+                key={w.path}
+                href={`/view/${encodePath(w.path)}`}
+                className={`flex items-start gap-2.5 px-3 py-2 mx-1 rounded-lg transition-colors hover:bg-muted ${
+                  w.error ? 'opacity-70' : ''
+                }`}
+              >
+                <Zap size={14} className="shrink-0 mt-0.5 text-[var(--amber)]" />
+                <div className="min-w-0 flex-1">
+                  <span className="text-sm font-medium text-foreground block truncate">{w.title}</span>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    {w.error ? (
+                      <span className="inline-flex items-center gap-1 text-2xs text-[var(--error)]">
+                        <AlertTriangle size={10} />
+                        {wt.parseError}
+                      </span>
+                    ) : (
+                      <span className="text-2xs text-muted-foreground">
+                        {wt.nSteps(w.stepCount)}
+                      </span>
+                    )}
+                    <span className="text-2xs text-muted-foreground/60" suppressHydrationWarning>
+                      {relativeTime(w.mtime, t.home?.relativeTime)}
+                    </span>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,157 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronDown, ChevronUp, Trash2 } from 'lucide-react';
+import { AgentSelector, ModelSelector, SkillsSelector, ContextSelector } from './selectors';
+import type { WorkflowStep } from './types';
+
+interface StepEditorProps {
+  step: WorkflowStep;
+  index: number;
+  onChange: (step: WorkflowStep) => void;
+  onDelete: () => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+}
+
+export default function StepEditor({ step, index, onChange, onDelete, onMoveUp, onMoveDown }: StepEditorProps) {
+  // Auto-expand if step has no prompt (newly created)
+  const [expanded, setExpanded] = useState(!step.prompt);
+
+  const update = (patch: Partial<WorkflowStep>) => onChange({ ...step, ...patch });
+
+  // Merge legacy single skill into skills array for display
+  const allSkills = step.skills?.length ? step.skills : (step.skill ? [step.skill] : []);
+
+  // Collapsed view: summary line
+  if (!expanded) {
+    return (
+      <div className="group flex items-center gap-2 px-3 py-2.5 rounded-xl border border-border bg-card hover:border-[var(--amber)]/30 transition-colors cursor-pointer"
+        onClick={() => setExpanded(true)}>
+        <span className="text-2xs text-muted-foreground/60 font-mono w-5 text-center shrink-0">{index + 1}</span>
+        <span className={`text-sm font-medium truncate flex-1 ${step.name ? 'text-foreground' : 'text-muted-foreground italic'}`}>
+          {step.name || 'Untitled step'}
+        </span>
+        <div className="flex items-center gap-1 shrink-0 flex-wrap justify-end">
+          {allSkills.slice(0, 2).map(s => (
+            <span key={s} className="text-2xs px-1.5 py-0.5 rounded bg-[var(--amber)]/10 text-[var(--amber)] border border-[var(--amber)]/20">{s}</span>
+          ))}
+          {allSkills.length > 2 && (
+            <span className="text-2xs px-1 py-0.5 rounded bg-muted text-muted-foreground">+{allSkills.length - 2}</span>
+          )}
+          {step.agent && <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">🤖 {step.agent}</span>}
+          {step.agent && step.model && <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">🧠 {step.model}</span>}
+          {step.context?.length ? <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">📎 {step.context.length}</span> : null}
+        </div>
+        <ChevronDown size={12} className="text-muted-foreground/50 shrink-0" />
+      </div>
+    );
+  }
+
+  // Expanded edit form
+  return (
+    <div className="rounded-xl border border-[var(--amber)]/30 bg-card overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3.5 py-2.5 border-b border-border bg-muted/30">
+        <span className="text-2xs text-muted-foreground/60 font-mono w-5 text-center shrink-0">{index + 1}</span>
+        <span className={`text-xs font-medium flex-1 truncate ${step.name ? 'text-foreground' : 'text-muted-foreground italic'}`}>
+          {step.name || 'Untitled step'}
+        </span>
+        <div className="flex items-center gap-0.5">
+          {onMoveUp && (
+            <button onClick={onMoveUp} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title="Move up">
+              <ChevronUp size={13} />
+            </button>
+          )}
+          {onMoveDown && (
+            <button onClick={onMoveDown} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title="Move down">
+              <ChevronDown size={13} />
+            </button>
+          )}
+          <button onClick={onDelete} className="p-1 rounded hover:bg-[var(--error)]/10 text-muted-foreground hover:text-[var(--error)] transition-colors" title="Delete step">
+            <Trash2 size={12} />
+          </button>
+          <button onClick={() => setExpanded(false)} className="p-1 rounded hover:bg-muted text-muted-foreground transition-colors" title="Collapse">
+            <ChevronUp size={13} />
+          </button>
+        </div>
+      </div>
+
+      {/* Form body */}
+      <div className="px-3.5 py-3 space-y-3">
+        {/* Step name */}
+        <div>
+          <label className="block text-2xs font-medium text-muted-foreground mb-1">Step name</label>
+          <input type="text" value={step.name} onChange={e => update({ name: e.target.value })}
+            placeholder="e.g. Run Tests"
+            autoFocus={!step.name}
+            className="w-full px-2.5 py-1.5 text-sm 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>
+
+        {/* Prompt */}
+        <div>
+          <label className="block text-2xs font-medium text-muted-foreground mb-1">Prompt</label>
+          <textarea value={step.prompt} onChange={e => update({ prompt: e.target.value })}
+            placeholder="Describe what the AI should do in this step..."
+            rows={4}
+            className="w-full px-2.5 py-1.5 text-sm rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y leading-relaxed"
+          />
+        </div>
+
+        {/* Agent + Model */}
+        <div className={`grid ${step.agent ? 'grid-cols-2' : 'grid-cols-1'} gap-3`}>
+          <div>
+            <label className="block text-2xs font-medium text-muted-foreground mb-1">Agent</label>
+            <AgentSelector value={step.agent} onChange={agent => update({ agent, model: agent ? step.model : undefined })} />
+          </div>
+          {step.agent && (
+            <div>
+              <label className="block text-2xs font-medium text-muted-foreground mb-1">Model</label>
+              <ModelSelector value={step.model} onChange={model => update({ model })} />
+            </div>
+          )}
+        </div>
+
+        {/* Skills (multi-select) */}
+        <div>
+          <label className="block text-2xs font-medium text-muted-foreground mb-1">Skills</label>
+          <SkillsSelector
+            value={allSkills}
+            onChange={skills => update({ skills, skill: undefined })}
+          />
+        </div>
+
+        {/* Context files */}
+        <div>
+          <label className="block text-2xs font-medium text-muted-foreground mb-1">Context files</label>
+          <ContextSelector
+            value={step.context ?? []}
+            onChange={context => update({ context: context.length ? context : undefined })}
+          />
+        </div>
+
+        {/* Description + Timeout in one row */}
+        <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={step.description || ''} onChange={e => update({ description: e.target.value || undefined })}
+              placeholder="Brief description of this step"
+              className="w-full px-2.5 py-1.5 text-xs 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>
+            <label className="block text-2xs font-medium text-muted-foreground mb-1">Timeout</label>
+            <div className="flex items-center gap-1.5">
+              <input type="number" min={0} value={step.timeout || ''} onChange={e => update({ timeout: e.target.value ? Number(e.target.value) : undefined })}
+                placeholder="120"
+                className="w-20 px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              />
+              <span className="text-2xs text-muted-foreground/50">sec</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,201 @@
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { Plus, Save, Loader2, FolderOpen, Zap, CheckCircle2 } from 'lucide-react';
+import StepEditor from './StepEditor';
+import { serializeWorkflowYaml, generateStepId } from './serializer';
+import type { WorkflowYaml, WorkflowStep } from './types';
+import { DirPicker } from './selectors';
+
+interface WorkflowEditorProps {
+  workflow: WorkflowYaml;
+  filePath: string;
+  onChange: (workflow: WorkflowYaml) => void;
+  onSaved?: () => void;
+}
+
+export default function WorkflowEditor({ workflow, filePath, onChange, onSaved }: WorkflowEditorProps) {
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState('');
+  const [saveSuccess, setSaveSuccess] = useState(false);
+
+  // 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 updateStep = useCallback((index: number, step: WorkflowStep) => {
+    const steps = [...workflow.steps];
+    steps[index] = step;
+    onChange({ ...workflow, steps });
+  }, [workflow, onChange]);
+
+  const deleteStep = useCallback((index: number) => {
+    const step = workflow.steps[index];
+    const hasContent = step.name || step.prompt;
+    if (hasContent && !window.confirm(`Delete step "${step.name || 'Untitled'}"?`)) return;
+    onChange({ ...workflow, steps: workflow.steps.filter((_, i) => i !== index) });
+  }, [workflow, onChange]);
+
+  const addStep = useCallback(() => {
+    const existingIds = workflow.steps.map(s => s.id);
+    const num = workflow.steps.length + 1;
+    const id = generateStepId(`step-${num}`, existingIds);
+    const step: WorkflowStep = { id, name: `Step ${num}`, prompt: '' };
+    onChange({ ...workflow, steps: [...workflow.steps, step] });
+  }, [workflow, onChange]);
+
+  const moveStep = useCallback((from: number, to: number) => {
+    if (to < 0 || to >= workflow.steps.length) return;
+    const steps = [...workflow.steps];
+    const [moved] = steps.splice(from, 1);
+    steps.splice(to, 0, moved);
+    onChange({ ...workflow, steps });
+  }, [workflow, onChange]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setSaveError('');
+    setSaveSuccess(false);
+    try {
+      const yaml = serializeWorkflowYaml(workflow);
+      const res = await fetch('/api/file', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: filePath, op: 'save_file', content: yaml }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || `Save failed (HTTP ${res.status})`);
+      }
+      setSaveSuccess(true);
+      onSaved?.();
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : 'Save failed');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 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();
+        }
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  });
+
+  const canSave = !saving && !!workflow.title.trim() && workflow.steps.length > 0;
+
+  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>
+        </div>
+      </div>
+
+      {/* Steps section */}
+      {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>
+
+          {/* Step list */}
+          <div className="flex flex-col gap-2 mb-4">
+            {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>
+
+          {/* 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>
+        </>
+      ) : (
+        /* 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.
+          </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} />
+            Add first step
+          </button>
+        </div>
+      )}
+
+      {/* Save bar */}
+      <div className="flex items-center gap-3 mt-6 pt-4 border-t border-border">
+        <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} />}
+          {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">
+            <CheckCircle2 size={11} />
+            Saved
+          </span>
+        )}
+
+        <span className="text-2xs text-muted-foreground/40 ml-auto">Ctrl+S</span>
+      </div>
+    </div>
+  );
+}