@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/renderers/todo/TodoRenderer.tsx

@@ -1,137 +0,0 @@
-'use client';
-
-import { useState, useCallback, useMemo } from 'react';
-import { Circle } from 'lucide-react';
-import type { RendererContext } from '@/lib/renderers/registry';
-import type { SectionMeta, FilterState } from '@/lib/parsing/parse-todos';
-import {
-  parseMarkdownTodos,
-  setStatusInLines,
-  renameInLines,
-  deleteInLines,
-  addInLines,
-  countByStatus,
-  countTotal,
-  collectAllTags,
-  collectAllPriorities,
-} from '@/lib/parsing/parse-todos';
-import FilterBar from './FilterBar';
-import SectionCard from './SectionCard';
-
-export function TodoRenderer({ content, saveAction }: RendererContext) {
-  const [localContent, setLocalContent] = useState(content);
-  const [filters, setFilters] = useState<FilterState>({ priority: 'all', tag: 'all', status: 'all' });
-
-  const { sections, lines, sectionOrder } = useMemo(
-    () => parseMarkdownTodos(localContent),
-    [localContent],
-  );
-
-  const totalDone = useMemo(
-    () => Object.values(sections).reduce((n, m) => n + countByStatus(m.items, 'done'), 0),
-    [sections],
-  );
-  const totalInProgress = useMemo(
-    () => Object.values(sections).reduce((n, m) => n + countByStatus(m.items, 'in-progress'), 0),
-    [sections],
-  );
-  const totalItems = useMemo(
-    () => Object.values(sections).reduce((n, m) => n + countTotal(m.items), 0),
-    [sections],
-  );
-  const totalTodo = totalItems - totalDone - totalInProgress;
-
-  const allTags = useMemo(() => collectAllTags(sections), [sections]);
-  const allPriorities = useMemo(() => collectAllPriorities(sections), [sections]);
-
-  const persist = useCallback(async (next: string) => {
-    setLocalContent(next);
-    await saveAction(next);
-  }, [saveAction]);
-
-  const handleCycleStatus = useCallback(async (lineIndex: number, newStatus: Parameters<typeof setStatusInLines>[2]) => {
-    await persist(setStatusInLines(lines, lineIndex, newStatus));
-  }, [lines, persist]);
-
-  const handleRename = useCallback(async (lineIndex: number, newText: string) => {
-    await persist(renameInLines(lines, lineIndex, newText));
-  }, [lines, persist]);
-
-  const handleDelete = useCallback(async (lineIndex: number) => {
-    await persist(deleteInLines(lines, lineIndex));
-  }, [lines, persist]);
-
-  const handleAdd = useCallback(async (afterLineIndex: number, text: string) => {
-    await persist(addInLines(lines, afterLineIndex, text));
-  }, [lines, persist]);
-
-  const sectionEntries = sectionOrder
-    .filter(name => sections[name])
-    .map(name => [name, sections[name]] as [string, SectionMeta]);
-
-  const pct = totalItems ? Math.round((totalDone / totalItems) * 100) : 0;
-
-  return (
-    <div className="max-w-[900px] mx-auto xl:mr-[220px] px-0 py-2">
-      {/* Summary header */}
-      <div className="mb-5 flex items-center gap-4">
-        <div className="flex-1">
-          <div className="flex items-baseline gap-2">
-            <span className="text-lg font-semibold font-display text-foreground tabular-nums">
-              {pct}%
-            </span>
-            <span className="text-xs text-muted-foreground font-display">
-              {totalDone}/{totalItems} completed
-            </span>
-            {totalInProgress > 0 && (
-              <span className="flex items-center gap-1 text-xs text-[var(--amber)]">
-                <Circle size={8} className="fill-[var(--amber)]/30" />
-                {totalInProgress} in progress
-              </span>
-            )}
-          </div>
-          <div className="mt-2 w-full max-w-xs h-1.5 bg-muted rounded-full overflow-hidden">
-            <div
-              className="h-full rounded-full transition-all duration-500"
-              style={{ width: `${pct}%`, background: 'var(--amber)' }}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Filter bar */}
-      <FilterBar
-        filters={filters}
-        onFilterChange={setFilters}
-        allTags={allTags}
-        allPriorities={allPriorities}
-        counts={{
-          todo: totalTodo,
-          inProgress: totalInProgress,
-          done: totalDone,
-          total: totalItems,
-        }}
-      />
-
-      {/* Sections */}
-      <div className="flex flex-col gap-4">
-        {sectionEntries.map(([name, meta]) => (
-          <SectionCard
-            key={name}
-            name={name}
-            meta={meta}
-            filters={filters}
-            defaultCollapsed={name.includes('Done')}
-            onCycleStatus={handleCycleStatus}
-            onRename={handleRename}
-            onDelete={handleDelete}
-            onAdd={handleAdd}
-          />
-        ))}
-        {sectionEntries.length === 0 && (
-          <p className="text-sm text-muted-foreground">No TODO items found in this file.</p>
-        )}
-      </div>
-    </div>
-  );
-}

package/_standalone/components/renderers/video/VideoRenderer.tsx

@@ -1,91 +0,0 @@
-'use client';
-
-import { useState, useCallback, useRef, useEffect } from 'react';
-import type { RendererContext } from '@/lib/renderers/registry';
-
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-/**
- * Video Renderer — native HTML5 video player with file info bar.
- * Uses browser built-in controls (play/pause, seek, volume, fullscreen, PiP).
- * Supports Range requests for seeking without downloading entire file.
- */
-export function VideoRenderer({ filePath }: RendererContext) {
-  const src = `/api/file/raw?path=${encodeURIComponent(filePath)}`;
-  const fileName = filePath.split('/').pop() ?? 'video';
-  const ext = fileName.split('.').pop()?.toLowerCase() ?? '';
-
-  const [error, setError] = useState(false);
-  const [retryKey, setRetryKey] = useState(0);
-  const [fileSize, setFileSize] = useState<number | null>(null);
-  const [resolution, setResolution] = useState<{ w: number; h: number } | null>(null);
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    fetch(src, { method: 'HEAD' })
-      .then(res => {
-        const cl = res.headers.get('Content-Length');
-        if (cl) setFileSize(parseInt(cl, 10));
-      })
-      .catch(() => {});
-  }, [src]);
-
-  const handleLoadedMetadata = useCallback(() => {
-    const video = videoRef.current;
-    if (video) {
-      setResolution({ w: video.videoWidth, h: video.videoHeight });
-    }
-  }, []);
-
-  const handleRetry = useCallback(() => {
-    setError(false);
-    setRetryKey(k => k + 1);
-  }, []);
-
-  return (
-    <div className="w-full flex flex-col gap-0">
-      {/* Info bar */}
-      <div className="flex items-center gap-3 px-3 py-2 border-b border-border text-xs text-[var(--text-secondary)]">
-        {resolution && (
-          <span>{resolution.w} x {resolution.h}</span>
-        )}
-        {fileSize !== null && (
-          <span>{formatBytes(fileSize)}</span>
-        )}
-        <span className="uppercase opacity-60">{ext}</span>
-      </div>
-
-      {/* Player area */}
-      <div className="flex-1 min-h-[50vh] flex items-center justify-center bg-black rounded-b-lg overflow-hidden">
-        {error ? (
-          <div className="flex flex-col items-center gap-2">
-            <span className="text-sm text-neutral-400">Failed to load video</span>
-            <button
-              onClick={handleRetry}
-              className="text-xs px-3 py-1.5 rounded-md bg-neutral-800 hover:bg-neutral-700 text-neutral-200 transition-colors"
-            >
-              Retry
-            </button>
-          </div>
-        ) : (
-          /* eslint-disable-next-line jsx-a11y/media-has-caption */
-          <video
-            key={retryKey}
-            ref={videoRef}
-            controls
-            preload="metadata"
-            className="max-w-full max-h-[70vh]"
-            onLoadedMetadata={handleLoadedMetadata}
-            onError={() => setError(true)}
-          >
-            <source src={src} />
-          </video>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,164 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { ChevronDown, ChevronUp, Trash2, Settings2 } 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) {
-  const [expanded, setExpanded] = useState(!step.prompt);
-  const [showConfig, setShowConfig] = useState(false);
-
-  const update = (patch: Partial<WorkflowStep>) => onChange({ ...step, ...patch });
-  const allSkills = step.skills?.length ? step.skills : (step.skill ? [step.skill] : []);
-  const hasConfig = !!(step.agent || step.model || allSkills.length || step.context?.length || step.description || step.timeout);
-
-  // ── Collapsed ──
-  if (!expanded) {
-    return (
-      <div className="group flex items-start gap-2 px-3 py-2 rounded-lg hover:bg-muted/40 transition-colors cursor-pointer -ml-1"
-        onClick={() => setExpanded(true)}>
-        <div className="min-w-0 flex-1">
-          <span className={`text-sm leading-tight block ${step.name ? 'text-foreground font-medium' : 'text-muted-foreground/50 italic'}`}>
-            {step.name || 'Untitled step'}
-          </span>
-          {/* Config summary pills */}
-          {hasConfig && (
-            <div className="flex items-center gap-1 mt-1 flex-wrap">
-              {step.agent && <span className="text-2xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">{step.agent}</span>}
-              {allSkills.slice(0, 2).map(s => (
-                <span key={s} className="text-2xs px-1.5 py-0.5 rounded-full bg-[var(--amber)]/8 text-[var(--amber)]">{s}</span>
-              ))}
-              {allSkills.length > 2 && <span className="text-2xs text-muted-foreground/50">+{allSkills.length - 2}</span>}
-              {step.context?.length ? <span className="text-2xs text-muted-foreground/50">{step.context.length} files</span> : null}
-            </div>
-          )}
-          {/* Prompt preview */}
-          {step.prompt && (
-            <p className="text-2xs text-muted-foreground/50 mt-1 line-clamp-1 leading-relaxed">{step.prompt}</p>
-          )}
-        </div>
-        <ChevronDown size={12} className="text-muted-foreground/30 mt-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
-      </div>
-    );
-  }
-
-  // ── Expanded ──
-  return (
-    <div className="rounded-lg border border-[var(--amber)]/20 bg-card overflow-hidden shadow-sm">
-      {/* Header */}
-      <div className="flex items-center gap-2 px-3 py-2 bg-muted/20">
-        <span className={`text-xs font-medium flex-1 truncate ${step.name ? 'text-foreground' : 'text-muted-foreground/50 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/50 hover:text-foreground transition-colors" title="Move up">
-              <ChevronUp size={12} />
-            </button>
-          )}
-          {onMoveDown && (
-            <button onClick={onMoveDown} className="p-1 rounded hover:bg-muted text-muted-foreground/50 hover:text-foreground transition-colors" title="Move down">
-              <ChevronDown size={12} />
-            </button>
-          )}
-          <button onClick={onDelete} className="p-1 rounded hover:bg-[var(--error)]/10 text-muted-foreground/50 hover:text-[var(--error)] transition-colors" title="Delete">
-            <Trash2 size={11} />
-          </button>
-          <button onClick={() => setExpanded(false)} className="p-1 rounded hover:bg-muted text-muted-foreground/50 transition-colors" title="Collapse">
-            <ChevronUp size={12} />
-          </button>
-        </div>
-      </div>
-
-      {/* Body */}
-      <div className="px-3 py-3 space-y-3">
-        {/* Name — inline style, not a labeled field */}
-        <input type="text" value={step.name} onChange={e => update({ name: e.target.value })}
-          placeholder="Step name..."
-          autoFocus={!step.name}
-          className="w-full text-sm font-medium bg-transparent text-foreground placeholder:text-muted-foreground/30 focus:outline-none border-none p-0"
-        />
-
-        {/* Prompt — the main content */}
-        <textarea value={step.prompt} onChange={e => update({ prompt: e.target.value })}
-          placeholder="What should the AI do?"
-          rows={3}
-          className="w-full px-3 py-2.5 text-sm rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground/40 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y leading-relaxed"
-        />
-
-        {/* Agent selector — always visible, it's important */}
-        <div className={`grid ${step.agent ? 'grid-cols-2' : 'grid-cols-1'} gap-2`}>
-          <div>
-            <label className="block text-2xs text-muted-foreground/60 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 text-muted-foreground/60 mb-1">Model</label>
-              <ModelSelector value={step.model} onChange={model => update({ model })} />
-            </div>
-          )}
-        </div>
-
-        {/* Config toggle — progressive disclosure for skills, context, timeout */}
-        <button
-          onClick={() => setShowConfig(v => !v)}
-          className={`flex items-center gap-1.5 text-2xs transition-colors ${
-            showConfig || hasConfig ? 'text-muted-foreground' : 'text-muted-foreground/40 hover:text-muted-foreground'
-          }`}
-        >
-          <Settings2 size={11} />
-          {showConfig ? 'Less options' : 'More options'}
-          {!showConfig && hasConfig && <span className="w-1.5 h-1.5 rounded-full bg-[var(--amber)]" />}
-        </button>
-
-        {showConfig && (
-          <div className="space-y-3 pt-1">
-            {/* Skills */}
-            <div>
-              <label className="block text-2xs text-muted-foreground/60 mb-1">Skills</label>
-              <SkillsSelector value={allSkills} onChange={skills => update({ skills, skill: undefined })} />
-            </div>
-
-            {/* Context files */}
-            <div>
-              <label className="block text-2xs text-muted-foreground/60 mb-1">Context files</label>
-              <ContextSelector value={step.context ?? []} onChange={context => update({ context: context.length ? context : undefined })} />
-            </div>
-
-            {/* Description + Timeout */}
-            <div className="grid grid-cols-[1fr,auto] gap-3">
-              <div>
-                <label className="block text-2xs text-muted-foreground/60 mb-1">Description</label>
-                <input type="text" value={step.description || ''} onChange={e => update({ description: e.target.value || undefined })}
-                  placeholder="Optional note..."
-                  className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground/30 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                />
-              </div>
-              <div>
-                <label className="block text-2xs text-muted-foreground/60 mb-1">Timeout</label>
-                <div className="flex items-center gap-1">
-                  <input type="number" min={0} value={step.timeout || ''} onChange={e => update({ timeout: e.target.value ? Number(e.target.value) : undefined })}
-                    placeholder="120"
-                    className="w-16 px-2 py-1.5 text-xs rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground/30 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                  />
-                  <span className="text-2xs text-muted-foreground/40">s</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,201 +0,0 @@
-'use client';
-
-import { useState, useCallback, useEffect } from 'react';
-import { Plus, Save, Loader2, FolderOpen, Zap, CheckCircle2, GripVertical } from 'lucide-react';
-import StepEditor from './StepEditor';
-import { serializeWorkflowYaml, generateStepId } from './serializer';
-import type { WorkflowYaml, WorkflowStep } from './types';
-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);
-
-  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);
-    }
-  };
-
-  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 Section ── */}
-      <div className="space-y-3 mb-8">
-        {/* Title — large, inline feel */}
-        <input type="text" value={workflow.title} onChange={e => updateMeta({ title: e.target.value })}
-          placeholder="Flow title..."
-          className="w-full text-lg font-semibold bg-transparent text-foreground placeholder:text-muted-foreground/40 focus:outline-none border-none p-0 leading-tight"
-        />
-        {/* Description — subtle underline */}
-        <input type="text" value={workflow.description || ''} onChange={e => updateMeta({ description: e.target.value || undefined })}
-          placeholder="Add a description..."
-          className="w-full text-sm bg-transparent text-muted-foreground placeholder:text-muted-foreground/30 focus:outline-none border-none p-0"
-        />
-
-        {/* Working directory — always visible */}
-        <div className="flex items-center gap-2">
-          <FolderOpen size={12} className="text-muted-foreground/40 shrink-0" />
-          <DirPicker value={workflow.workDir || ''} onChange={v => updateMeta({ workDir: v || undefined })} />
-        </div>
-      </div>
-
-      {/* ── Steps Section — Timeline style ── */}
-      {workflow.steps.length > 0 ? (
-        <div className="relative">
-          {/* Vertical timeline line */}
-          {workflow.steps.length > 1 && (
-            <div className="absolute left-[19px] top-6 bottom-16 w-px bg-border" />
-          )}
-
-          {/* Step list */}
-          <div className="flex flex-col gap-3 mb-5 relative">
-            {workflow.steps.map((step, i) => (
-              <div key={step.id} className="relative pl-11">
-                {/* Timeline node */}
-                <div className="absolute left-[7px] top-3 w-[22px] h-[22px] rounded-full border-2 border-border bg-background z-10 flex items-center justify-center">
-                  <span className="text-[10px] font-bold text-muted-foreground/60">{i + 1}</span>
-                </div>
-                <StepEditor
-                  step={step}
-                  index={i}
-                  onChange={s => updateStep(i, s)}
-                  onDelete={() => deleteStep(i)}
-                  onMoveUp={i > 0 ? () => moveStep(i, i - 1) : undefined}
-                  onMoveDown={i < workflow.steps.length - 1 ? () => moveStep(i, i + 1) : undefined}
-                />
-              </div>
-            ))}
-          </div>
-
-          {/* Add step — at the end of timeline */}
-          <div className="relative pl-11">
-            <div className="absolute left-[7px] top-2.5 w-[22px] h-[22px] rounded-full border-2 border-dashed border-border bg-background z-10 flex items-center justify-center">
-              <Plus size={9} className="text-muted-foreground/40" />
-            </div>
-            <button onClick={addStep}
-              className="w-full text-left px-3 py-2 rounded-lg text-xs text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted/40 transition-colors">
-              Add step...
-            </button>
-          </div>
-        </div>
-      ) : (
-        /* Empty state */
-        <div className="flex flex-col items-center justify-center py-16 text-center">
-          <div className="w-12 h-12 rounded-2xl bg-[var(--amber)]/8 flex items-center justify-center mb-4">
-            <Zap size={22} className="text-[var(--amber)]/60" />
-          </div>
-          <p className="text-sm font-medium text-foreground mb-1">Build your flow</p>
-          <p className="text-xs text-muted-foreground/60 mb-5 max-w-[240px]">
-            Each step is a task for an AI agent. Chain them together to automate complex workflows.
-          </p>
-          <button onClick={addStep}
-            className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-xs font-medium bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90 transition-opacity">
-            <Plus size={12} />
-            Add first step
-          </button>
-        </div>
-      )}
-
-      {/* ── Save bar — sticky bottom feel ── */}
-      <div className="flex items-center gap-3 mt-8 pt-4 border-t border-border/50">
-        <button onClick={handleSave} disabled={!canSave}
-          title={!workflow.title.trim() ? 'Title is required' : workflow.steps.length === 0 ? 'Add at least one step' : undefined}
-          className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-xs font-medium transition-all disabled:opacity-40 disabled:cursor-not-allowed ${
-            canSave
-              ? 'bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90'
-              : 'bg-muted text-muted-foreground'
-          }`}>
-          {saving ? <Loader2 size={12} className="animate-spin" /> : <Save size={12} />}
-          {saving ? 'Saving...' : 'Save'}
-        </button>
-
-        {saveError && <span className="text-xs text-[var(--error)]">{saveError}</span>}
-
-        {saveSuccess && !saveError && (
-          <span className="flex items-center gap-1 text-2xs text-[var(--success)]">
-            <CheckCircle2 size={11} />
-            Saved
-          </span>
-        )}
-
-        <kbd className="text-2xs text-muted-foreground/30 ml-auto font-mono">Ctrl+S</kbd>
-      </div>
-    </div>
-  );
-}