create-interview-cockpit 0.27.0 → 0.28.0

package/template/client/src/components/DiagramsModal.tsx

@@ -0,0 +1,839 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  GripVertical,
+  Maximize2,
+  Minimize2,
+  Plus,
+  Save,
+  Trash2,
+  X,
+  Download,
+  RefreshCw,
+} from "lucide-react";
+
+const MIN_W = 720;
+const MIN_H = 560;
+const DEFAULT_W = 1100;
+const DEFAULT_H = 760;
+type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n" | null;
+
+// draw.io embed endpoint. Uses postMessage proto for save/load/export.
+// Docs: https://www.drawio.com/doc/faq/embed-mode
+const DRAWIO_SRC =
+  "https://embed.diagrams.net/?embed=1&ui=dark&spin=1&proto=json&saveAndExit=0&noSaveBtn=1&noExitBtn=1&libraries=1&configure=1";
+
+// ── Data model ───────────────────────────────────────────────────
+interface Diagram {
+  id: string;
+  name: string;
+  xml: string;
+  svgPreview?: string; // data URL for thumbnail
+  updatedAt: number;
+}
+
+export function diagramsKey(questionId?: string | null): string {
+  return questionId ? `diagrams:q:${questionId}` : "diagrams:global";
+}
+
+function loadDiagrams(key: string): Diagram[] {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+function persistDiagrams(key: string, diagrams: Diagram[]): void {
+  try {
+    if (diagrams.length === 0) {
+      localStorage.removeItem(key);
+    } else {
+      localStorage.setItem(key, JSON.stringify(diagrams));
+    }
+  } catch {
+    // storage full — ignore
+  }
+}
+
+function genId(): string {
+  return Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+}
+
+// ── Component ────────────────────────────────────────────────────
+interface Props {
+  questionId?: string | null;
+  onClose: () => void;
+}
+
+export default function DiagramsModal({ questionId, onClose }: Props) {
+  const storageKey = diagramsKey(questionId);
+
+  const [diagrams, setDiagrams] = useState<Diagram[]>(() =>
+    loadDiagrams(storageKey),
+  );
+  const [activeId, setActiveId] = useState<string | null>(
+    () => loadDiagrams(storageKey)[0]?.id ?? null,
+  );
+  const [draftName, setDraftName] = useState<string>(
+    () => loadDiagrams(storageKey)[0]?.name ?? "",
+  );
+  const [nameDirty, setNameDirty] = useState(false);
+  const [saveAsValue, setSaveAsValue] = useState<string | null>(null);
+  const [iframeReady, setIframeReady] = useState(false);
+  const [lastSavedAt, setLastSavedAt] = useState<number | null>(null);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  // Track which diagram's XML the iframe currently holds so we don't
+  // overwrite a user's edits on unrelated state changes.
+  const loadedIdRef = useRef<string | null>(null);
+
+  const activeDiagram = useMemo(
+    () => diagrams.find((d) => d.id === activeId) ?? null,
+    [diagrams, activeId],
+  );
+
+  // Re-load when the question changes
+  useEffect(() => {
+    const loaded = loadDiagrams(storageKey);
+    setDiagrams(loaded);
+    const first = loaded[0] ?? null;
+    setActiveId(first?.id ?? null);
+    setDraftName(first?.name ?? "");
+    setNameDirty(false);
+    loadedIdRef.current = null;
+  }, [storageKey]);
+
+  // Sync draft name when active diagram changes
+  const prevActiveId = useRef<string | null>(null);
+  useEffect(() => {
+    if (activeId === prevActiveId.current) return;
+    prevActiveId.current = activeId;
+    const d = diagrams.find((x) => x.id === activeId);
+    if (d) {
+      setDraftName(d.name);
+      setNameDirty(false);
+    }
+  }, [activeId, diagrams]);
+
+  // ── postMessage helpers ──────────────────────────────────────
+  const postToFrame = useCallback((msg: object) => {
+    const w = iframeRef.current?.contentWindow;
+    if (!w) return;
+    w.postMessage(JSON.stringify(msg), "*");
+  }, []);
+
+  const loadIntoFrame = useCallback(
+    (xml: string, id: string) => {
+      postToFrame({ action: "load", xml: xml || "", autosave: 1 });
+      loadedIdRef.current = id;
+    },
+    [postToFrame],
+  );
+
+  // Listen for drawio events
+  useEffect(() => {
+    const onMsg = (e: MessageEvent) => {
+      if (e.source !== iframeRef.current?.contentWindow) return;
+      let msg: { event?: string; xml?: string; data?: string };
+      try {
+        msg =
+          typeof e.data === "string" ? JSON.parse(e.data) : (e.data as object);
+      } catch {
+        return;
+      }
+      if (!msg || typeof msg !== "object" || !msg.event) return;
+
+      switch (msg.event) {
+        case "configure":
+          // Optional: pass UI config if desired. We accept defaults.
+          postToFrame({ action: "configure", config: {} });
+          break;
+        case "init":
+          setIframeReady(true);
+          if (activeDiagram) {
+            loadIntoFrame(activeDiagram.xml, activeDiagram.id);
+          } else {
+            loadIntoFrame("", "__none__");
+          }
+          break;
+        case "autosave":
+        case "save": {
+          const id = loadedIdRef.current;
+          if (!id || !msg.xml) break;
+          setDiagrams((prev) => {
+            const updated = prev.map((d) =>
+              d.id === id ? { ...d, xml: msg.xml!, updatedAt: Date.now() } : d,
+            );
+            persistDiagrams(storageKey, updated);
+            return updated;
+          });
+          setLastSavedAt(Date.now());
+          // Ask for an SVG snapshot for the thumbnail.
+          postToFrame({ action: "export", format: "xmlsvg" });
+          break;
+        }
+        case "export": {
+          const id = loadedIdRef.current;
+          if (!id || !msg.data) break;
+          setDiagrams((prev) => {
+            const updated = prev.map((d) =>
+              d.id === id ? { ...d, svgPreview: msg.data } : d,
+            );
+            persistDiagrams(storageKey, updated);
+            return updated;
+          });
+          break;
+        }
+        case "exit":
+          onClose();
+          break;
+        default:
+          break;
+      }
+    };
+    window.addEventListener("message", onMsg);
+    return () => window.removeEventListener("message", onMsg);
+  }, [activeDiagram, loadIntoFrame, onClose, postToFrame, storageKey]);
+
+  // When activeId changes after iframe is ready, swap XML in the embedded editor.
+  useEffect(() => {
+    if (!iframeReady) return;
+    if (!activeDiagram) {
+      loadIntoFrame("", "__none__");
+      return;
+    }
+    if (loadedIdRef.current === activeDiagram.id) return;
+    loadIntoFrame(activeDiagram.xml, activeDiagram.id);
+  }, [iframeReady, activeDiagram, loadIntoFrame]);
+
+  // ── Actions ──────────────────────────────────────────────────
+  const handleAddDiagram = useCallback(() => {
+    setDiagrams((prev) => {
+      const count = prev.length + 1;
+      const d: Diagram = {
+        id: genId(),
+        name: `Diagram ${count}`,
+        xml: "",
+        updatedAt: Date.now(),
+      };
+      const updated = [...prev, d];
+      persistDiagrams(storageKey, updated);
+      setActiveId(d.id);
+      setDraftName(d.name);
+      setNameDirty(false);
+      return updated;
+    });
+  }, [storageKey]);
+
+  const handleSelectDiagram = useCallback(
+    (id: string) => {
+      if (id === activeId) return;
+      // Force the embedded editor to flush pending edits before switching.
+      postToFrame({ action: "save" });
+      setActiveId(id);
+    },
+    [activeId, postToFrame],
+  );
+
+  const handleDeleteDiagram = useCallback(
+    (id: string) => {
+      setDiagrams((prev) => {
+        const updated = prev.filter((d) => d.id !== id);
+        persistDiagrams(storageKey, updated);
+        if (id === activeId) {
+          const next = updated[0] ?? null;
+          setActiveId(next?.id ?? null);
+          setDraftName(next?.name ?? "");
+          setNameDirty(false);
+          if (!next) loadedIdRef.current = null;
+        }
+        return updated;
+      });
+    },
+    [activeId, storageKey],
+  );
+
+  const handleSaveName = useCallback(() => {
+    if (!activeId || !nameDirty) return;
+    setDiagrams((prev) => {
+      const updated = prev.map((d) =>
+        d.id === activeId
+          ? {
+              ...d,
+              name: draftName.trim() || "Untitled",
+              updatedAt: Date.now(),
+            }
+          : d,
+      );
+      persistDiagrams(storageKey, updated);
+      return updated;
+    });
+    setNameDirty(false);
+  }, [activeId, draftName, nameDirty, storageKey]);
+
+  const handleManualSave = useCallback(() => {
+    // Asks drawio to emit a `save` event with current XML, which our listener
+    // persists. Also commits any pending name change.
+    handleSaveName();
+    postToFrame({ action: "save" });
+  }, [handleSaveName, postToFrame]);
+
+  const handleSaveAs = useCallback(() => {
+    if (!activeDiagram) return;
+    setSaveAsValue((activeDiagram.name.trim() || "Untitled") + " copy");
+  }, [activeDiagram]);
+
+  const confirmSaveAs = useCallback(() => {
+    if (!activeDiagram) return;
+    const name = (saveAsValue ?? "").trim() || "Untitled";
+    const clone: Diagram = {
+      id: genId(),
+      name,
+      xml: activeDiagram.xml,
+      svgPreview: activeDiagram.svgPreview,
+      updatedAt: Date.now(),
+    };
+    setDiagrams((prev) => {
+      const updated = [...prev, clone];
+      persistDiagrams(storageKey, updated);
+      return updated;
+    });
+    setActiveId(clone.id);
+    setDraftName(name);
+    setNameDirty(false);
+    setSaveAsValue(null);
+  }, [activeDiagram, saveAsValue, storageKey]);
+
+  const handleExportSvg = useCallback(() => {
+    if (!activeDiagram?.svgPreview) {
+      // Trigger an export pass; the listener will store svgPreview and the
+      // user can click again. Cheap fallback.
+      postToFrame({ action: "export", format: "xmlsvg" });
+      return;
+    }
+    const a = document.createElement("a");
+    a.href = activeDiagram.svgPreview;
+    a.download =
+      (activeDiagram.name || "diagram").replace(/[^a-z0-9-_]+/gi, "_") + ".svg";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  }, [activeDiagram, postToFrame]);
+
+  // ── Drag / resize ─────────────────────────────────────────────
+  const [pos, setPos] = useState(() => ({
+    x: Math.max(0, (window.innerWidth - DEFAULT_W) / 2),
+    y: Math.max(0, (window.innerHeight - DEFAULT_H) / 2),
+  }));
+  const [size, setSize] = useState({ w: DEFAULT_W, h: DEFAULT_H });
+  const [maximized, setMaximized] = useState(false);
+
+  const dragStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+  } | null>(null);
+  const resizeDir = useRef<ResizeDir>(null);
+  const resizeStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+    ow: number;
+    oh: number;
+  } | null>(null);
+  const savedPos = useRef(pos);
+  const savedSize = useRef(size);
+
+  const onTitleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      dragStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+      };
+    },
+    [maximized, pos],
+  );
+
+  const startResize = useCallback(
+    (dir: ResizeDir) => (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      e.stopPropagation();
+      resizeDir.current = dir;
+      resizeStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+        ow: size.w,
+        oh: size.h,
+      };
+    },
+    [maximized, pos, size],
+  );
+
+  const toggleMax = useCallback(() => {
+    if (!maximized) {
+      savedPos.current = pos;
+      savedSize.current = size;
+      setMaximized(true);
+    } else {
+      setPos(savedPos.current);
+      setSize(savedSize.current);
+      setMaximized(false);
+    }
+  }, [maximized, pos, size]);
+
+  // While dragging/resizing we want to disable iframe pointer events,
+  // otherwise the embedded editor will swallow mousemove events.
+  const [interacting, setInteracting] = useState(false);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      const drag = dragStart.current;
+      const resize = resizeStart.current;
+      const dir = resizeDir.current;
+      if (drag) {
+        setPos({
+          x: Math.max(0, drag.ox + e.clientX - drag.mx),
+          y: Math.max(0, drag.oy + e.clientY - drag.my),
+        });
+      }
+      if (resize && dir) {
+        const dx = e.clientX - resize.mx;
+        const dy = e.clientY - resize.my;
+        setSize((prev) => {
+          let w = prev.w,
+            h = prev.h;
+          if (dir.includes("e")) w = Math.max(MIN_W, resize.ow + dx);
+          if (dir.includes("s")) h = Math.max(MIN_H, resize.oh + dy);
+          if (dir.includes("w")) w = Math.max(MIN_W, resize.ow - dx);
+          if (dir.includes("n")) h = Math.max(MIN_H, resize.oh - dy);
+          return { w, h };
+        });
+        if (dir.includes("w"))
+          setPos((p) => ({
+            ...p,
+            x: Math.min(resize.ox + resize.ow - MIN_W, resize.ox + dx),
+          }));
+        if (dir.includes("n"))
+          setPos((p) => ({
+            ...p,
+            y: Math.min(resize.oy + resize.oh - MIN_H, resize.oy + dy),
+          }));
+      }
+    };
+    const onUp = () => {
+      dragStart.current = null;
+      resizeStart.current = null;
+      resizeDir.current = null;
+      setInteracting(false);
+    };
+    const onDown = () => {
+      if (dragStart.current || resizeStart.current) setInteracting(true);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    document.addEventListener("mousedown", onDown, true);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      document.removeEventListener("mousedown", onDown, true);
+    };
+  }, []);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && saveAsValue === null) onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose, saveAsValue]);
+
+  const windowStyle: React.CSSProperties = maximized
+    ? {
+        position: "fixed",
+        inset: 0,
+        width: "100vw",
+        height: "100vh",
+        borderRadius: 0,
+      }
+    : {
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        width: size.w,
+        height: size.h,
+        minWidth: MIN_W,
+        minHeight: MIN_H,
+      };
+
+  // ── Render ───────────────────────────────────────────────────
+  return (
+    <div
+      className="z-50 flex flex-col bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden select-none"
+      style={windowStyle}
+    >
+      {/* Resize handles */}
+      {!maximized && (
+        <>
+          <div
+            className="absolute top-0 left-0 right-0 h-1 cursor-n-resize z-10"
+            onMouseDown={startResize("n")}
+          />
+          <div
+            className="absolute bottom-0 left-0 right-0 h-1 cursor-s-resize z-10"
+            onMouseDown={startResize("s")}
+          />
+          <div
+            className="absolute top-0 left-0 bottom-0 w-1 cursor-w-resize z-10"
+            onMouseDown={startResize("w")}
+          />
+          <div
+            className="absolute top-0 right-0 bottom-0 w-1 cursor-e-resize z-10"
+            onMouseDown={startResize("e")}
+          />
+          <div
+            className="absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20"
+            onMouseDown={startResize("nw")}
+          />
+          <div
+            className="absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20"
+            onMouseDown={startResize("ne")}
+          />
+          <div
+            className="absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20"
+            onMouseDown={startResize("sw")}
+          />
+          <div
+            className="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20"
+            onMouseDown={startResize("se")}
+          />
+        </>
+      )}
+
+      {/* Title bar */}
+      <div
+        className="flex items-center gap-2 px-3 py-2.5 bg-slate-800 border-b border-slate-700 shrink-0"
+        onMouseDown={onTitleMouseDown}
+        style={{ cursor: maximized ? "default" : "grab" }}
+      >
+        <GripVertical className="w-3.5 h-3.5 text-slate-600 shrink-0" />
+        <span className="text-sm font-semibold text-slate-100 flex-1">
+          Diagrams
+          {questionId && (
+            <span className="ml-2 text-xs font-normal text-slate-500">
+              — this question
+            </span>
+          )}
+        </span>
+        {lastSavedAt && (
+          <span className="text-[10px] text-emerald-500/70 mr-1">
+            saved {new Date(lastSavedAt).toLocaleTimeString()}
+          </span>
+        )}
+        <button
+          type="button"
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={toggleMax}
+          className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+          title={maximized ? "Restore" : "Maximise"}
+        >
+          {maximized ? (
+            <Minimize2 className="w-3.5 h-3.5" />
+          ) : (
+            <Maximize2 className="w-3.5 h-3.5" />
+          )}
+        </button>
+        <button
+          type="button"
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={onClose}
+          className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-red-400 transition-colors shrink-0"
+          title="Close (Esc)"
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      {/* Body: sidebar + drawio editor */}
+      <div className="flex-1 min-h-0 flex overflow-hidden">
+        {/* Diagrams list sidebar */}
+        <div
+          className={`${
+            sidebarCollapsed ? "w-12" : "w-52"
+          } shrink-0 flex flex-col border-r border-slate-700 bg-slate-900 transition-[width] duration-200 ease-out`}
+        >
+          <div
+            className={`${
+              sidebarCollapsed
+                ? "flex-col justify-center gap-1 px-1.5"
+                : "justify-between px-2.5"
+            } flex items-center py-2 border-b border-slate-800 shrink-0`}
+          >
+            {sidebarCollapsed ? (
+              <>
+                <button
+                  type="button"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={() => setSidebarCollapsed(false)}
+                  title="Expand diagram list"
+                  className="p-1 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200 transition-colors"
+                >
+                  <ChevronRight className="w-3.5 h-3.5" />
+                </button>
+                <button
+                  type="button"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={handleAddDiagram}
+                  title="New diagram"
+                  className="p-1 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200 transition-colors"
+                >
+                  <Plus className="w-3.5 h-3.5" />
+                </button>
+              </>
+            ) : (
+              <>
+                <span className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
+                  All diagrams
+                </span>
+                <div className="flex items-center gap-1">
+                  <button
+                    type="button"
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onClick={handleAddDiagram}
+                    title="New diagram"
+                    className="p-1 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200 transition-colors"
+                  >
+                    <Plus className="w-3.5 h-3.5" />
+                  </button>
+                  <button
+                    type="button"
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onClick={() => setSidebarCollapsed(true)}
+                    title="Collapse diagram list"
+                    className="p-1 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200 transition-colors"
+                  >
+                    <ChevronLeft className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+          <div className="flex-1 overflow-y-auto">
+            {diagrams.length === 0 && (
+              <p
+                className={`${
+                  sidebarCollapsed ? "px-1 text-center" : "px-3"
+                } py-3 text-xs text-slate-600 italic`}
+              >
+                No diagrams yet
+              </p>
+            )}
+            {diagrams.map((d) => (
+              <div
+                key={d.id}
+                onClick={() => handleSelectDiagram(d.id)}
+                title={sidebarCollapsed ? d.name || "Untitled" : undefined}
+                className={`group flex items-center cursor-pointer text-xs ${
+                  sidebarCollapsed
+                    ? "justify-center px-1.5 py-2"
+                    : "gap-2 px-2.5 py-2"
+                } ${
+                  d.id === activeId
+                    ? "bg-slate-700 text-slate-100"
+                    : "text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+                }`}
+              >
+                {d.svgPreview ? (
+                  <img
+                    src={d.svgPreview}
+                    alt=""
+                    className="w-8 h-8 rounded bg-slate-950 object-contain shrink-0 border border-slate-800"
+                  />
+                ) : (
+                  <div className="w-8 h-8 rounded bg-slate-950 border border-slate-800 shrink-0" />
+                )}
+                {!sidebarCollapsed && (
+                  <>
+                    <span className="flex-1 truncate">
+                      {d.name || "Untitled"}
+                    </span>
+                    <button
+                      type="button"
+                      onMouseDown={(e) => e.stopPropagation()}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteDiagram(d.id);
+                      }}
+                      className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:text-red-400 transition-all shrink-0"
+                      title="Delete diagram"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </button>
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Editor pane */}
+        <div className="flex-1 flex flex-col min-w-0">
+          {activeDiagram ? (
+            <>
+              {/* Name + toolbar */}
+              <div className="flex items-center gap-2 px-3 py-2 border-b border-slate-800 shrink-0">
+                <input
+                  value={draftName}
+                  onChange={(e) => {
+                    setDraftName(e.target.value);
+                    setNameDirty(true);
+                  }}
+                  onBlur={handleSaveName}
+                  onMouseDown={(e) => e.stopPropagation()}
+                  placeholder="Diagram name…"
+                  className="flex-1 bg-transparent text-sm font-semibold text-slate-100 placeholder-slate-600 outline-none"
+                />
+                <button
+                  type="button"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={handleManualSave}
+                  className="flex items-center gap-1.5 px-2 py-0.5 rounded text-xs bg-blue-600 hover:bg-blue-500 text-white transition-colors"
+                  title="Save now (drawio also autosaves)"
+                >
+                  <Save className="w-3 h-3" />
+                  Save
+                </button>
+                <button
+                  type="button"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={handleSaveAs}
+                  className="px-2 py-0.5 rounded text-xs bg-slate-800 hover:bg-slate-700 text-slate-300 transition-colors"
+                  title="Save as a new named diagram"
+                >
+                  Save As
+                </button>
+                <button
+                  type="button"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={handleExportSvg}
+                  className="flex items-center gap-1 px-2 py-0.5 rounded text-xs text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors"
+                  title="Download as SVG"
+                >
+                  <Download className="w-3 h-3" />
+                  SVG
+                </button>
+                <button
+                  type="button"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={() => {
+                    if (!activeDiagram) return;
+                    setIframeReady(false);
+                    loadedIdRef.current = null;
+                    // Force iframe reload by toggling src.
+                    const f = iframeRef.current;
+                    if (f) {
+                      const src = f.src;
+                      f.src = "about:blank";
+                      requestAnimationFrame(() => {
+                        f.src = src;
+                      });
+                    }
+                  }}
+                  className="p-1 rounded text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors"
+                  title="Reload editor"
+                >
+                  <RefreshCw className="w-3 h-3" />
+                </button>
+              </div>
+
+              {/* drawio iframe */}
+              <div className="relative flex-1 bg-slate-950">
+                {!iframeReady && (
+                  <div className="absolute inset-0 flex items-center justify-center text-xs text-slate-500">
+                    Loading drawio…
+                  </div>
+                )}
+                <iframe
+                  ref={iframeRef}
+                  src={DRAWIO_SRC}
+                  title="drawio"
+                  className="w-full h-full border-0"
+                  style={{
+                    pointerEvents: interacting ? "none" : "auto",
+                  }}
+                  allow="clipboard-read; clipboard-write"
+                />
+              </div>
+            </>
+          ) : (
+            <div className="flex-1 flex flex-col items-center justify-center gap-3 text-slate-600">
+              <p className="text-sm">No diagram selected</p>
+              <button
+                type="button"
+                onMouseDown={(e) => e.stopPropagation()}
+                onClick={handleAddDiagram}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs transition-colors"
+              >
+                <Plus className="w-3.5 h-3.5" />
+                New diagram
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Save As dialog */}
+      {saveAsValue !== null && (
+        <div className="absolute inset-0 bg-slate-900/80 backdrop-blur-sm flex items-center justify-center z-30">
+          <div
+            className="bg-slate-800 border border-slate-700 rounded-lg p-4 w-72 flex flex-col gap-3"
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            <p className="text-sm font-semibold text-slate-100">Save As</p>
+            <input
+              autoFocus
+              value={saveAsValue}
+              onChange={(e) => setSaveAsValue(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") confirmSaveAs();
+                if (e.key === "Escape") setSaveAsValue(null);
+              }}
+              placeholder="Diagram name…"
+              className="px-3 py-1.5 rounded bg-slate-950 border border-slate-700 text-sm text-slate-100 outline-none focus:border-blue-500 transition-colors"
+            />
+            <div className="flex gap-2 justify-end">
+              <button
+                type="button"
+                onClick={() => setSaveAsValue(null)}
+                className="px-3 py-1 rounded text-xs text-slate-400 hover:bg-slate-700 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={confirmSaveAs}
+                className="px-3 py-1 rounded text-xs bg-blue-600 hover:bg-blue-500 text-white transition-colors"
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}