Add Run History, Run Comparison Modal, Analytics Profiler, and Workspace Manager

dev_server.log

@@ -1,6 +1,6 @@
 $ vite --host 0.0.0.0 --port 3000
 
-  VITE v5.4.21  ready in 312 ms
+  VITE v5.4.21  ready in 306 ms
 
   ➜  Local:   http://localhost:3000/
   ➜  Network: http://192.168.0.2:3000/

frontend/src/flow/WorkspaceManager.tsx

@@ -0,0 +1,284 @@
+import { useState, useRef } from "react";
+import type { Workflow } from "./workflows";
+import type { GlobalVar, SecretVar } from "./globals";
+import type { Gateway } from "./gateways";
+import {
+  exportWorkspaceBundle,
+  validateWorkspaceBundle,
+  importWorkspaceBundle,
+} from "./workspace";
+import { toast } from "sonner";
+
+interface WorkspaceManagerProps {
+  workflows: Workflow[];
+  globals: GlobalVar[];
+  secrets: SecretVar[];
+  gateways: Gateway[];
+  onWorkspaceRestored: (data: {
+    workflows: Workflow[];
+    globals: GlobalVar[];
+    secrets: SecretVar[];
+    gateways: Gateway[];
+  }) => void;
+  onClose: () => void;
+}
+
+export function WorkspaceManager({
+  workflows,
+  globals,
+  secrets,
+  gateways,
+  onWorkspaceRestored,
+  onClose,
+}: WorkspaceManagerProps) {
+  const [activeTab, setActiveTab] = useState<"export" | "import">("export");
+  const [importMode, setImportMode] = useState<"merge" | "replace">("merge");
+  const [pastedJson, setPastedJson] = useState("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleDownloadBackup = () => {
+    const bundle = exportWorkspaceBundle(workflows, globals, secrets, gateways);
+    const data = JSON.stringify(bundle, null, 2);
+    const blob = new Blob([data], { type: "application/json;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `agent_flow_workspace_backup_${new Date().toISOString().slice(0, 10)}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    toast.success("Workspace backup downloaded");
+  };
+
+  const handleCopyBackup = () => {
+    const bundle = exportWorkspaceBundle(workflows, globals, secrets, gateways);
+    const data = JSON.stringify(bundle, null, 2);
+    navigator.clipboard.writeText(data).then(() => {
+      toast.success("Workspace backup JSON copied to clipboard");
+    });
+  };
+
+  const processImportText = (text: string) => {
+    try {
+      const parsed = JSON.parse(text);
+      const validation = validateWorkspaceBundle(parsed);
+      if (!validation.valid) {
+        toast.error(`Invalid workspace bundle: ${validation.error}`);
+        return;
+      }
+
+      if (
+        importMode === "replace" &&
+        !confirm("WARNING: Replace Mode will overwrite your current workspace components. Proceed?")
+      ) {
+        return;
+      }
+
+      const restored = importWorkspaceBundle(
+        parsed,
+        importMode,
+        workflows,
+        globals,
+        secrets,
+        gateways
+      );
+
+      onWorkspaceRestored(restored);
+      toast.success(
+        `Workspace ${importMode === "merge" ? "merged" : "replaced"} successfully!`
+      );
+      onClose();
+    } catch (e) {
+      toast.error(`Import failed: ${e instanceof Error ? e.message : "Invalid JSON"}`);
+    }
+  };
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const text = event.target?.result;
+      if (typeof text === "string") {
+        processImportText(text);
+      }
+      e.target.value = "";
+    };
+    reader.readAsText(file);
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-150">
+      <div className="w-full max-w-2xl bg-[hsl(var(--paper))] border-2 border-[hsl(var(--ink))] shadow-2xl flex flex-col font-mono text-[11px] overflow-hidden">
+        {/* Header */}
+        <div
+          className="flex items-center justify-between px-4 py-3 border-b border-dashed border-[hsl(var(--grid-line))]"
+          style={{ background: "var(--gradient-header)" }}
+        >
+          <div>
+            <div className="text-[10px] uppercase tracking-[0.2em] text-[hsl(var(--ink-faint))]">
+              portability & backup
+            </div>
+            <h2 className="text-sm font-bold text-[hsl(var(--ink))]">
+              Workspace Backup & Restore Manager
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="px-2.5 py-1 border border-dashed border-[hsl(var(--ink))] hover:bg-[hsl(var(--ink))] hover:text-[hsl(var(--paper))] transition-colors"
+          >
+            × Close
+          </button>
+        </div>
+
+        {/* Tab Switcher */}
+        <div className="flex border-b border-dashed border-[hsl(var(--grid-line))] bg-[hsl(var(--ink)/0.02)]">
+          <button
+            onClick={() => setActiveTab("export")}
+            className={`flex-1 py-2 text-center uppercase tracking-wider font-bold transition-colors border-r border-dashed border-[hsl(var(--grid-line))] ${
+              activeTab === "export"
+                ? "bg-[hsl(var(--paper))] text-[hsl(var(--ink))]"
+                : "text-[hsl(var(--ink-soft))] hover:bg-[hsl(var(--ink)/0.04)]"
+            }`}
+          >
+            📦 Backup / Export Workspace
+          </button>
+          <button
+            onClick={() => setActiveTab("import")}
+            className={`flex-1 py-2 text-center uppercase tracking-wider font-bold transition-colors ${
+              activeTab === "import"
+                ? "bg-[hsl(var(--paper))] text-[hsl(var(--ink))]"
+                : "text-[hsl(var(--ink-soft))] hover:bg-[hsl(var(--ink)/0.04)]"
+            }`}
+          >
+            📥 Restore / Import Workspace
+          </button>
+        </div>
+
+        <div className="p-4 space-y-4 max-h-[75vh] overflow-y-auto">
+          {activeTab === "export" ? (
+            <div className="space-y-4">
+              <div className="p-3 border border-dashed border-[hsl(var(--grid-line))] bg-[hsl(var(--ink)/0.015)] space-y-2">
+                <span className="font-bold uppercase tracking-wider text-[hsl(var(--ink))] block">
+                  Current Workspace Overview:
+                </span>
+                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-center">
+                  <div className="p-2 border border-dashed border-[hsl(var(--grid-line))] bg-[hsl(var(--paper))]">
+                    <div className="text-[9px] uppercase text-[hsl(var(--ink-faint))]">Workflows</div>
+                    <div className="font-bold text-xs">{workflows.length}</div>
+                  </div>
+                  <div className="p-2 border border-dashed border-[hsl(var(--grid-line))] bg-[hsl(var(--paper))]">
+                    <div className="text-[9px] uppercase text-[hsl(var(--ink-faint))]">Globals</div>
+                    <div className="font-bold text-xs">{globals.length}</div>
+                  </div>
+                  <div className="p-2 border border-dashed border-[hsl(var(--grid-line))] bg-[hsl(var(--paper))]">
+                    <div className="text-[9px] uppercase text-[hsl(var(--ink-faint))]">Secrets</div>
+                    <div className="font-bold text-xs">{secrets.length}</div>
+                  </div>
+                  <div className="p-2 border border-dashed border-[hsl(var(--grid-line))] bg-[hsl(var(--paper))]">
+                    <div className="text-[9px] uppercase text-[hsl(var(--ink-faint))]">Gateways</div>
+                    <div className="font-bold text-xs">{gateways.length}</div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-2 pt-2">
+                <button
+                  onClick={handleDownloadBackup}
+                  className="w-full py-2.5 bg-[hsl(var(--ink))] text-[hsl(var(--paper))] uppercase font-bold tracking-wider hover:opacity-90 transition-opacity"
+                >
+                  Download Full Workspace Backup (.json)
+                </button>
+                <button
+                  onClick={handleCopyBackup}
+                  className="w-full py-2 border border-dashed border-[hsl(var(--ink))] uppercase font-bold tracking-wider hover:bg-[hsl(var(--ink))] hover:text-[hsl(var(--paper))] transition-colors"
+                >
+                  Copy Backup JSON to Clipboard
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {/* Import Mode Radio */}
+              <div className="p-3 border border-dashed border-[hsl(var(--grid-line))] bg-[hsl(var(--ink)/0.015)] space-y-2">
+                <span className="font-bold uppercase tracking-wider text-[hsl(var(--ink))] block">
+                  Select Import Mode:
+                </span>
+                <div className="grid grid-cols-2 gap-2">
+                  <label
+                    onClick={() => setImportMode("merge")}
+                    className={`p-2.5 border border-dashed cursor-pointer flex flex-col gap-1 ${
+                      importMode === "merge"
+                        ? "border-[hsl(var(--ink))] bg-[hsl(var(--paper))] font-bold"
+                        : "border-[hsl(var(--grid-line))]"
+                    }`}
+                  >
+                    <span>➔ Merge Mode</span>
+                    <span className="text-[9px] font-normal text-[hsl(var(--ink-soft))]">
+                      Combines imported components with your existing workspace.
+                    </span>
+                  </label>
+
+                  <label
+                    onClick={() => setImportMode("replace")}
+                    className={`p-2.5 border border-dashed cursor-pointer flex flex-col gap-1 ${
+                      importMode === "replace"
+                        ? "border-[hsl(var(--issue))] bg-[hsl(var(--issue)/0.04)] text-[hsl(var(--issue))] font-bold"
+                        : "border-[hsl(var(--grid-line))]"
+                    }`}
+                  >
+                    <span>⚠ Replace Mode</span>
+                    <span className="text-[9px] font-normal text-[hsl(var(--ink-soft))]">
+                      Overwrites current workspace with imported workspace bundle.
+                    </span>
+                  </label>
+                </div>
+              </div>
+
+              {/* Upload File Zone */}
+              <div className="space-y-2">
+                <span className="font-bold uppercase tracking-wider text-[hsl(var(--ink-soft))] block">
+                  Option 1: Upload Workspace File
+                </span>
+                <input
+                  type="file"
+                  ref={fileInputRef}
+                  onChange={handleFileUpload}
+                  accept=".json"
+                  className="hidden"
+                />
+                <button
+                  onClick={() => fileInputRef.current?.click()}
+                  className="w-full py-3 border-2 border-dashed border-[hsl(var(--ink))] hover:bg-[hsl(var(--ink)/0.03)] uppercase font-bold tracking-wider transition-colors"
+                >
+                  📁 Select .json Backup File
+                </button>
+              </div>
+
+              {/* Paste Text Zone */}
+              <div className="space-y-2 pt-2 border-t border-dashed border-[hsl(var(--grid-line))]">
+                <span className="font-bold uppercase tracking-wider text-[hsl(var(--ink-soft))] block">
+                  Option 2: Paste Workspace JSON Text
+                </span>
+                <textarea
+                  value={pastedJson}
+                  onChange={(e) => setPastedJson(e.target.value)}
+                  placeholder='Paste workspace bundle JSON string here...'
+                  rows={5}
+                  className="w-full font-mono text-[10px] p-2 bg-transparent border border-dashed border-[hsl(var(--grid-line))] focus:border-[hsl(var(--ink))] outline-none resize-none"
+                />
+                <button
+                  disabled={!pastedJson.trim()}
+                  onClick={() => processImportText(pastedJson)}
+                  className="w-full py-2 bg-[hsl(var(--edge-selected))] text-[hsl(var(--paper))] uppercase font-bold tracking-wider disabled:opacity-40 transition-opacity"
+                >
+                  Import Pasted Workspace
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/flow/runHistory.ts

@@ -0,0 +1,86 @@
+import type { RunLog } from "./runFlow";
+
+export interface RunRecord {
+  id: string;
+  workflowId: string | null;
+  timestamp: number;
+  durationMs: number;
+  status: "success" | "error";
+  stepCount: number;
+  initialState: Record<string, unknown>;
+  finalState?: Record<string, unknown>;
+  logs: RunLog[];
+}
+
+const STORAGE_KEY_PREFIX = "agent_flow.run_history.v1";
+
+export function getRunHistoryKey(workflowId: string | null): string {
+  const safeId = workflowId && workflowId.trim() ? workflowId.trim() : "default";
+  return `${STORAGE_KEY_PREFIX}.${safeId}`;
+}
+
+export function loadRunHistory(workflowId: string | null): RunRecord[] {
+  try {
+    const key = getRunHistoryKey(workflowId);
+    const raw = localStorage.getItem(key);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) {
+        return parsed;
+      }
+    }
+  } catch (e) {
+    console.error("Failed to load run history:", e);
+  }
+  return [];
+}
+
+export function saveRunHistory(workflowId: string | null, history: RunRecord[]): void {
+  try {
+    const key = getRunHistoryKey(workflowId);
+    // Limit stored history to last 30 runs per workflow to prevent excessive localStorage usage
+    const truncated = history.slice(0, 30);
+    localStorage.setItem(key, JSON.stringify(truncated));
+  } catch (e) {
+    console.error("Failed to save run history:", e);
+  }
+}
+
+export function addRunRecord(
+  workflowId: string | null,
+  recordData: Omit<RunRecord, "id" | "timestamp" | "workflowId">
+): RunRecord {
+  const newRecord: RunRecord = {
+    ...recordData,
+    workflowId,
+    id: cryptoId(),
+    timestamp: Date.now(),
+  };
+
+  const existing = loadRunHistory(workflowId);
+  const updated = [newRecord, ...existing];
+  saveRunHistory(workflowId, updated);
+  return newRecord;
+}
+
+export function deleteRunRecord(workflowId: string | null, runId: string): void {
+  const existing = loadRunHistory(workflowId);
+  const updated = existing.filter((r) => r.id !== runId);
+  saveRunHistory(workflowId, updated);
+}
+
+export function clearRunHistory(workflowId: string | null): void {
+  try {
+    const key = getRunHistoryKey(workflowId);
+    localStorage.removeItem(key);
+  } catch (e) {
+    console.error("Failed to clear run history:", e);
+  }
+}
+
+function cryptoId(): string {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return "run_" + Math.random().toString(36).slice(2, 11);
+}