@johndimm/constellations 1.0.1 → 1.0.3

package/components/ControlPanel.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
-import { Search, Github, HelpCircle, Minimize2, Maximize2, Maximize, Plus, AlertCircle, Scissors, Calendar, Network, X, Link as LinkIcon, ArrowRight, Type, Trash2, ChevronLeft, ChevronRight, ChevronDown, Download, Upload, Share2, Copy, Users, Cpu } from 'lucide-react';
+"use client";
+import React, { useState, useEffect, useRef } from 'react';
+import { Search, Minimize2, Maximize2, Maximize, Calendar, Network, X, Link as LinkIcon, ArrowRight, Type, ChevronLeft, ChevronRight, ChevronDown, Settings, Download, Trash2, Share2, Copy, Upload, Plus, HelpCircle, Cpu } from 'lucide-react';
 import type { LlmProviderId } from '../services/aiUtils';
 import { getBrowserLlmOverride, setBrowserLlmOverride, getEnvCacheUrl } from '../services/aiUtils';
 import { DEFAULT_KIOSK_DOMAINS, saveKioskDomains, saveSelectedKioskDomainId } from '../kioskDomains';
@@ -23,9 +24,18 @@ interface ControlPanelProps {
   selectedKioskDomainId?: string;
   onSelectKioskDomain?: (domainId: string) => void;
   onUpdateKioskDomains?: (domains: KioskDomain[]) => void;
-  onClear: () => void;
+  onClear?: () => void;
   onClearCache?: () => void;
   onExpandAllLeafNodes?: () => void;
+  onSave?: (name: string) => void;
+  onLoad?: (name: string) => void;
+  onDeleteGraph?: (name: string) => void;
+  onImport?: (data: any) => void;
+  savedGraphs?: string[];
+  helpHover?: string | null;
+  onHelpHoverChange?: (value: string | null) => void;
+  onToggleHelp?: () => void;
+  showHelp?: boolean;
   isProcessing: boolean;
   isCompact: boolean;
   onToggleCompact: () => void;
@@ -33,20 +43,23 @@ interface ControlPanelProps {
   onToggleTimeline: () => void;
   isTextOnly: boolean;
   onToggleTextOnly: () => void;
-  onPrune?: () => void;
-  error?: string | null;
-  onSave: (name: string) => void;
-  onLoad: (name: string) => void;
-  onDeleteGraph: (name: string) => void;
-  onImport: (data: any) => void; // New prop for importing
-  savedGraphs: string[];
-  helpHover: string | null;
-  onHelpHoverChange: (value: string | null) => void;
   isCollapsed: boolean;
   onSetCollapsed: (val: boolean) => void;
   onOpenPeopleBrowser?: () => void;
-  onToggleHelp: () => void;
-  showHelp?: boolean;
+  /** When set, shows a link to the graph settings page at the top of the panel. */
+  settingsHref?: string;
+  /** Fixed top offset (viewport). Default `top-14` = below constellations header. Use `top-[6.25rem]` when a host app nav (~44px) sits above. */
+  offsetTopClass?: string;
+  /**
+   * When true (e.g. embedded with `hideHeader`), the rail is `top-2 bottom-2` and inner heights
+   * use the graph column instead of `100vh` / `60vh` so the panel does not “fall” to the viewport.
+   */
+  constrainToParentHeight?: boolean;
+  /**
+   * When true, use `position: fixed` and viewport-based width so the rail matches full-screen
+   * overlay hosts (same family as a `fixed` details sidebar). Ignored for normal in-layout absolute rails.
+   */
+  pinToViewport?: boolean;
 }
 
 const ControlPanel: React.FC<ControlPanelProps> = ({
@@ -70,6 +83,15 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
   onClear,
   onClearCache,
   onExpandAllLeafNodes,
+  onSave,
+  onLoad,
+  onDeleteGraph,
+  onImport,
+  savedGraphs = [],
+  helpHover,
+  onHelpHoverChange,
+  onToggleHelp,
+  showHelp,
   isProcessing,
   isCompact,
   onToggleCompact,
@@ -77,20 +99,13 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
   onToggleTimeline,
   isTextOnly,
   onToggleTextOnly,
-  onPrune,
-  error,
-  onSave,
-  onLoad,
-  onDeleteGraph,
-  onImport,
-  savedGraphs,
-  helpHover,
-  onHelpHoverChange,
   isCollapsed,
   onSetCollapsed,
   onOpenPeopleBrowser,
-  onToggleHelp,
-  showHelp = false
+  settingsHref,
+  offsetTopClass = "top-14",
+  constrainToParentHeight = false,
+  pinToViewport = false,
 }) => {
   const [hasStarted, setHasStarted] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -99,22 +114,42 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
   const [newDomainLabel, setNewDomainLabel] = useState('');
   const [newTerm, setNewTerm] = useState('');
   const [bulkTerms, setBulkTerms] = useState('');
-
-  // Collapsible sections state - combined toggle for examples section
-  const [showExamples, setShowExamples] = useState(false);
-
-  const [llmSelectValue, setLlmSelectValue] = useState<"env" | LlmProviderId>(() =>
-    getBrowserLlmOverride() ?? "env"
-  );
-
-  // Save/Load/Share State
   const [showSave, setShowSave] = useState(false);
   const [showLoad, setShowLoad] = useState(false);
   const [showShare, setShowShare] = useState(false);
   const [saveName, setSaveName] = useState('');
-  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [llmSelectValue, setLlmSelectValue] = useState<'env' | LlmProviderId>(() => getBrowserLlmOverride() ?? 'env');
+
+  // Collapsible sections state - combined toggle for examples section
+  const [showExamples, setShowExamples] = useState(false);
+
   const domainsImportRef = React.useRef<HTMLInputElement>(null);
 
+  const handleSaveSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (saveName.trim() && onSave) {
+      onSave(saveName.trim());
+      setShowSave(false);
+      setSaveName('');
+    }
+  };
+
+  const handleImportFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !onImport) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      try {
+        const data = JSON.parse(ev.target?.result as string);
+        onImport(data);
+        setShowLoad(false);
+      } catch { alert('Invalid JSON file'); }
+      finally { e.target.value = ''; }
+    };
+    reader.readAsText(file);
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (searchMode === 'explore') {
@@ -132,59 +167,6 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
     }
   };
 
-  const handleSaveSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (saveName.trim()) {
-      onSave(saveName.trim());
-      setSaveName('');
-      setShowSave(false);
-    }
-  };
-
-  const handleExport = () => {
-    // We need the current graph data. Ideally passed down, but we can grab from what we know or ask parent.
-    // Actually, onSave usually saves *current* state. 
-    // To export, we probably need access to the current `nodes` and `links` or a way to get them.
-    // BUT we don't have them in props here.
-    // Solution: Let the PARENT handle the export triggered by a callback, OR pass the data down.
-    // Adding `onExport` prop is safer. 
-    // Wait, the prompt says "Export as JSON and send it". 
-    // I can modify `onSave` to optionally accept an "export" flag? Or just add `onExport` prop.
-    // Let's add `onExportRequest` prop to `ControlPanel` and implement it in `App`.
-
-    // Changing approach slightly: I will add `onExport` to props in the NEXT step (App.tsx updates),
-    // but for now I will structure this file to expect it.
-    // Actually I can keep local logic if I pass the data down? No, passing all nodes/links to ControlPanel causes rerenders.
-    // Best: `onExport` callback.
-  };
-
-  // Re-thinking export: User clicks "Export", App.tsx gathers data and downloads it.
-  // So I need an `onExport` prop. I will add it to the interface above in a sec (or assume it exists and fix App later).
-  // Actually, I can fix the interface now.
-
-  const handleImportFile = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = (event) => {
-      try {
-        const json = JSON.parse(event.target?.result as string);
-        // Basic validation
-        if (json.nodes && json.links) {
-          onImport(json);
-          setShowLoad(false);
-        } else {
-          alert("Invalid graph JSON");
-        }
-      } catch (err) {
-        console.error(err);
-        alert("Failed to parse JSON");
-      }
-    };
-    reader.readAsText(file);
-  };
-
   const EXAMPLES = [
     "The Godfather",
     "Watergate Scandal",
@@ -219,12 +201,24 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
     <>
       {headerActions}
       <div
-        className={`absolute left-0 z-40 flex flex-col gap-2 transition-transform duration-300 ease-in-out pointer-events-none ${isCollapsed ? '-translate-x-[calc(100%-24px)]' : 'translate-x-[12px] sm:translate-x-[16px]'} top-16`}
-        style={{ width: 'calc(100% - 1.5rem)', maxWidth: '28rem' }}
+        className={`${pinToViewport ? "fixed" : "absolute"} left-0 z-50 flex flex-col gap-2 transition-transform duration-300 ease-in-out pointer-events-none ${isCollapsed ? "-translate-x-[calc(100%-24px)]" : "translate-x-[12px] sm:translate-x-[16px]"} ${offsetTopClass}`}
+        style={
+          pinToViewport
+            ? { width: "min(28rem, calc(100vw - 1.5rem))", maxWidth: "28rem" }
+            : { width: "calc(100% - 1.5rem)", maxWidth: "28rem" }
+        }
       >
-        <div className="bg-slate-900/95 backdrop-blur-xl p-4 rounded-xl border border-slate-700 shadow-2xl pointer-events-auto relative overflow-hidden flex flex-col max-h-[calc(100vh-64px)]">
+        <div
+          className={`bg-slate-900/95 backdrop-blur-xl p-4 rounded-xl border border-slate-700 shadow-2xl pointer-events-auto relative overflow-hidden flex flex-col ${constrainToParentHeight
+            ? "h-full min-h-0 max-h-full"
+            : "max-h-[calc(100vh-64px)]"}`}
+        >
           {/* Scrollable area for everything above the Start Here list if it gets too tall (e.g. Help open) */}
-          <div className="overflow-y-auto overflow-x-hidden flex-shrink-0 custom-scrollbar max-h-[60vh]">
+          <div
+            className={`overflow-y-auto overflow-x-hidden custom-scrollbar ${constrainToParentHeight
+              ? "min-h-0 max-h-[min(14rem,45%)] flex-shrink-0"
+              : "flex-shrink-0 max-h-[60vh]"}`}
+          >
             {/* Persistent Toggle Handle */}
             <button
               onClick={() => onSetCollapsed?.(!isCollapsed)}
@@ -235,63 +229,74 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
               <div className="[writing-mode:vertical-lr] text-[9px] uppercase tracking-tighter mt-1 font-bold">Controls</div>
             </button>
 
+            {/* Settings link */}
+            {settingsHref && (
+              <div className="mb-3">
+                <a href={settingsHref} className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-200 transition-colors">
+                  <Settings size={12} />
+                  Settings
+                </a>
+              </div>
+            )}
+
+            {/* Dev docs links */}
+            <div className="mb-3 flex gap-3">
+              <a href="/doc/help.html" target="_blank" rel="noreferrer"
+                 className="text-[10px] text-slate-500 hover:text-slate-300 transition-colors">
+                Help
+              </a>
+              <a href="/doc/prompt.html" target="_blank" rel="noreferrer"
+                 className="text-[10px] text-slate-500 hover:text-slate-300 transition-colors">
+                Prompt
+              </a>
+              <a href="/doc/journal.html" target="_blank" rel="noreferrer"
+                 className="text-[10px] text-slate-500 hover:text-slate-300 transition-colors">
+                Dev Journal
+              </a>
+            </div>
+
             {/* Button Groups */}
             <div className="space-y-4 mb-4">
               {/* Group: File */}
-              <div>
-                <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
-                  <Download size={10} /> File
-                </div>
-                <div className="flex flex-wrap gap-2 text-xs">
-                  <button
-                    onClick={() => {
-                      let defaultName = "";
-                      if (searchMode === 'explore' && exploreTerm) {
-                        defaultName = exploreTerm;
-                      } else if (searchMode === 'connect' && pathStart && pathEnd) {
-                        defaultName = `${pathStart} to ${pathEnd}`;
-                      } else {
-                        defaultName = `Graph ${new Date().toLocaleTimeString()}`;
-                      }
-                      setSaveName(defaultName);
-                      setShowSave(!showSave);
-                      setShowLoad(false);
-                      setShowShare(false);
-                      if (showHelp) onToggleHelp();
-                      onHelpHoverChange(null);
-                    }}
-                    className={`px-3 py-1.5 rounded-md border border-slate-700 bg-slate-800/80 text-slate-200 hover:text-amber-300 transition-colors ${helpHover === 'save' ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-slate-900' : ''}`}
-                    title="Save Graph"
-                  >
-                    SAVE
-                  </button>
-                  <button
-                    onClick={() => {
-                      setShowLoad(!showLoad);
-                      setShowSave(false);
-                      setShowShare(false);
-                      if (showHelp) onToggleHelp();
-                    }}
-                    className={`px-3 py-1.5 rounded-md border border-slate-700 bg-slate-800/80 text-slate-200 hover:text-amber-300 transition-colors ${helpHover === 'load' ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-slate-900' : ''}`}
-                    title="Load Graph"
-                  >
-                    LOAD
-                  </button>
-                  <button
-                    onClick={() => {
-                      setShowShare(!showShare);
-                      setShowSave(false);
-                      setShowLoad(false);
-                      if (showHelp) onToggleHelp();
-                      onHelpHoverChange(null);
-                    }}
-                    className={`px-3 py-1.5 rounded-md border border-slate-700 bg-slate-800/80 text-slate-200 hover:text-amber-300 transition-colors ${helpHover === 'share' ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-slate-900' : ''}`}
-                    title="Share Graph"
-                  >
-                    SHARE
-                  </button>
+              {onSave && (
+                <div>
+                  <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
+                    <Download size={10} /> File
+                  </div>
+                  <div className="flex flex-wrap gap-2 text-xs">
+                    <button
+                      onClick={() => {
+                        let defaultName = searchMode === 'explore' && exploreTerm ? exploreTerm
+                          : searchMode === 'connect' && pathStart && pathEnd ? `${pathStart} to ${pathEnd}`
+                          : `Graph ${new Date().toLocaleTimeString()}`;
+                        setSaveName(defaultName);
+                        setShowSave(!showSave);
+                        setShowLoad(false);
+                        setShowShare(false);
+                        onHelpHoverChange?.(null);
+                      }}
+                      className={`px-3 py-1.5 rounded-md border border-slate-700 bg-slate-800/80 text-slate-200 hover:text-amber-300 transition-colors ${helpHover === 'save' ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-slate-900' : ''}`}
+                      title="Save Graph"
+                    >
+                      SAVE
+                    </button>
+                    <button
+                      onClick={() => { setShowLoad(!showLoad); setShowSave(false); setShowShare(false); }}
+                      className={`px-3 py-1.5 rounded-md border border-slate-700 bg-slate-800/80 text-slate-200 hover:text-amber-300 transition-colors ${helpHover === 'load' ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-slate-900' : ''}`}
+                      title="Load Graph"
+                    >
+                      LOAD
+                    </button>
+                    <button
+                      onClick={() => { setShowShare(!showShare); setShowSave(false); setShowLoad(false); onHelpHoverChange?.(null); }}
+                      className={`px-3 py-1.5 rounded-md border border-slate-700 bg-slate-800/80 text-slate-200 hover:text-amber-300 transition-colors ${helpHover === 'share' ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-slate-900' : ''}`}
+                      title="Share Graph"
+                    >
+                      SHARE
+                    </button>
+                  </div>
                 </div>
-              </div>
+              )}
 
               {/* Group: View */}
               <div>
@@ -329,7 +334,7 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
                 </div>
               </div>
 
-              {/* Group: LLM — browser override; with cache proxy, sent as llmProvider on each request */}
+              {/* Group: LLM */}
               <div>
                 <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
                   <Cpu size={10} /> LLM
@@ -337,14 +342,9 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
                 <select
                   value={llmSelectValue}
                   onChange={(e) => {
-                    const v = e.target.value as "env" | LlmProviderId;
-                    if (v === "env") {
-                      setBrowserLlmOverride(null);
-                      setLlmSelectValue("env");
-                    } else {
-                      setBrowserLlmOverride(v);
-                      setLlmSelectValue(v);
-                    }
+                    const v = e.target.value as 'env' | LlmProviderId;
+                    setBrowserLlmOverride(v === 'env' ? null : v);
+                    setLlmSelectValue(v);
                   }}
                   className="w-full bg-slate-900 border border-slate-600 text-slate-100 text-xs rounded-md px-2 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                   title="Model provider for AI calls from this tab"
@@ -355,74 +355,66 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
                   <option value="deepseek">DeepSeek</option>
                   <option value="anthropic">Anthropic</option>
                 </select>
-                <p className="text-[9px] text-slate-500 mt-1 leading-snug">
-                  {getEnvCacheUrl() ? (
-                    <>
-                      Proxied requests include <span className="text-slate-400">llmProvider</span> when you pick a provider
-                      (Default uses the cache server&apos;s <span className="text-slate-400">LLM_PROVIDER</span>). Keys live on
-                      the server (e.g. Render).
-                    </>
-                  ) : (
-                    <>
-                      Overrides <span className="text-slate-400">VITE_LLM_PROVIDER</span> for this tab. Keys:{" "}
-                      <span className="text-slate-400">VITE_GEMINI_API_KEY</span>,{" "}
-                      <span className="text-slate-400">VITE_OPENAI_API_KEY</span>, etc. in{" "}
-                      <span className="text-slate-400">.env.local</span>.
-                    </>
-                  )}
-                </p>
+                {getEnvCacheUrl() && (
+                  <p className="text-[9px] text-slate-500 mt-1 leading-snug">
+                    Proxied — keys live on the server. Default uses{' '}
+                    <span className="text-slate-400">LLM_PROVIDER</span> env var.
+                  </p>
+                )}
               </div>
 
               {/* Group: Actions */}
-              <div>
-                <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
-                  <Plus size={10} /> Actions
-                </div>
-                <div className="flex flex-wrap gap-2 text-xs">
-                  <button
-                    onClick={onClear}
-                    className="text-slate-300 hover:text-red-300 p-1.5 rounded-md border border-slate-700 bg-slate-800/80 transition-colors"
-                    title="Clear graph"
-                  >
-                    <Trash2 size={16} />
-                  </button>
-                  {onClearCache && (
-                    <button
-                      onClick={onClearCache}
-                      className="px-3 py-1.5 rounded-md border border-slate-700 bg-slate-800/80 text-slate-200 hover:text-orange-300 transition-colors text-xs"
-                      title="Clear API cache (forces fresh data from LLM)"
-                    >
-                      CLEAR CACHE
-                    </button>
-                  )}
-                  {onExpandAllLeafNodes && (
-                    <button
-                      onClick={onExpandAllLeafNodes}
-                      disabled={isProcessing}
-                      className={`px-3 py-1.5 rounded-md border border-slate-700 bg-slate-800/80 text-slate-200 hover:text-emerald-300 inline-flex items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed transition-colors`}
-                      title="Expand everything reachable from the current graph frontier"
-                    >
-                      <Maximize size={14} className="text-emerald-400" />
-                      EXPAND ALL
-                    </button>
-                  )}
-                  <button
-                    onClick={() => {
-                      onToggleHelp();
-                    }}
-                    className={`px-3 py-1.5 rounded-md border border-slate-700 bg-slate-800/80 text-slate-200 hover:text-white flex items-center gap-1 transition-colors ${helpHover === 'help' ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-slate-900' : ''}`}
-                    title="Help & Info"
-                  >
-                    <HelpCircle size={14} /> HELP
-                  </button>
+              {(onClear || onClearCache || onExpandAllLeafNodes || onToggleHelp) && (
+                <div>
+                  <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
+                    <Plus size={10} /> Actions
+                  </div>
+                  <div className="flex flex-wrap gap-2 text-xs">
+                    {onClear && (
+                      <button
+                        onClick={onClear}
+                        className="text-slate-300 hover:text-red-300 p-1.5 rounded-md border border-slate-700 bg-slate-800/80 transition-colors"
+                        title="Clear graph"
+                      >
+                        <Trash2 size={16} />
+                      </button>
+                    )}
+                    {onClearCache && (
+                      <button
+                        onClick={onClearCache}
+                        className="px-3 py-1.5 rounded-md border border-slate-700 bg-slate-800/80 text-slate-200 hover:text-orange-300 transition-colors"
+                        title="Clear API cache (forces fresh data from LLM)"
+                      >
+                        CLEAR CACHE
+                      </button>
+                    )}
+                    {onExpandAllLeafNodes && (
+                      <button
+                        onClick={onExpandAllLeafNodes}
+                        disabled={isProcessing}
+                        className="px-3 py-1.5 rounded-md border border-slate-700 bg-slate-800/80 text-slate-200 hover:text-emerald-300 inline-flex items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                        title="Expand all leaf nodes"
+                      >
+                        <Maximize size={14} className="text-emerald-400" />
+                        EXPAND ALL
+                      </button>
+                    )}
+                    {onToggleHelp && (
+                      <button
+                        onClick={onToggleHelp}
+                        className={`px-3 py-1.5 rounded-md border border-slate-700 bg-slate-800/80 text-slate-200 hover:text-white flex items-center gap-1 transition-colors ${helpHover === 'help' ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-slate-900' : ''}`}
+                        title="Help & Info"
+                      >
+                        <HelpCircle size={14} /> HELP
+                      </button>
+                    )}
+                  </div>
                 </div>
-              </div>
+              )}
             </div>
 
-            {/* Help Dialog moved to shared App-level HelpOverlay */}
-
             {/* Share Dialog */}
-            {showShare && (
+            {showShare && onSave && (
               <div className="mb-4 bg-slate-800 p-3 rounded-lg border border-slate-600 animate-in fade-in slide-in-from-top-2 duration-200">
                 <div className="flex justify-between items-center mb-3">
                   <h3 className="text-sm font-bold text-white flex items-center gap-2">
@@ -453,14 +445,11 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
                     <span className="text-[10px] font-bold uppercase tracking-wider text-center">Download File</span>
                   </button>
                 </div>
-                <p className="mt-3 text-[10px] text-slate-400 text-center italic">
-                  Share the JSON data with others to let them view your graph.
-                </p>
               </div>
             )}
 
             {/* Save Dialog */}
-            {showSave && (
+            {showSave && onSave && (
               <div className="mb-4 bg-slate-800 p-3 rounded-lg border border-slate-600">
                 <div className="flex justify-between items-center mb-2">
                   <h3 className="text-sm font-bold text-white">Save Graph</h3>
@@ -478,10 +467,9 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
                   <button type="submit" className="bg-green-600 hover:bg-green-500 text-white px-3 py-1 rounded text-sm font-medium">
                     Save
                   </button>
-                  {/* Export Button (Downloads current as JSON) */}
                   <button
                     type="button"
-                    onClick={() => onSave('__EXPORT__')} // Special signal to export
+                    onClick={() => onSave('__EXPORT__')}
                     className="bg-indigo-600 hover:bg-indigo-500 text-white px-2 py-1 rounded text-sm font-medium flex items-center"
                     title="Export as JSON"
                   >
@@ -492,29 +480,24 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
             )}
 
             {/* Load Dialog */}
-            {showLoad && (
+            {showLoad && onLoad && (
               <div className="mb-4 bg-slate-800 p-3 rounded-lg border border-slate-600 max-h-60 overflow-y-auto">
                 <div className="flex justify-between items-center mb-2">
                   <h3 className="text-sm font-bold text-white">Load Graph</h3>
                   <div className="flex items-center gap-2">
-                    <button
-                      onClick={() => fileInputRef.current?.click()}
-                      className="text-slate-400 hover:text-blue-400 flex items-center gap-1 text-xs"
-                      title="Import JSON"
-                    >
-                      <Upload size={14} /> Import
-                    </button>
+                    {onImport && (
+                      <button
+                        onClick={() => fileInputRef.current?.click()}
+                        className="text-slate-400 hover:text-blue-400 flex items-center gap-1 text-xs"
+                        title="Import JSON"
+                      >
+                        <Upload size={14} /> Import
+                      </button>
+                    )}
                     <button onClick={() => setShowLoad(false)}><X size={14} className="text-slate-400" /></button>
                   </div>
                 </div>
-                <input
-                  type="file"
-                  ref={fileInputRef}
-                  onChange={handleImportFile}
-                  accept=".json"
-                  className="hidden"
-                />
-
+                <input type="file" ref={fileInputRef} onChange={handleImportFile} accept=".json" className="hidden" />
                 {savedGraphs.length === 0 ? (
                   <p className="text-slate-400 text-xs italic">No saved graphs.</p>
                 ) : (
@@ -527,17 +510,15 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
                         >
                           {name}
                         </button>
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            onDeleteGraph(name);
-                            setShowLoad(false);
-                          }}
-                          className="text-slate-400 hover:text-red-400 transition-colors p-1.5 rounded-md hover:bg-slate-800"
-                          title="Delete Graph"
-                        >
-                          <Trash2 size={14} />
-                        </button>
+                        {onDeleteGraph && (
+                          <button
+                            onClick={(e) => { e.stopPropagation(); onDeleteGraph(name); setShowLoad(false); }}
+                            className="text-slate-400 hover:text-red-400 transition-colors p-1.5 rounded-md hover:bg-slate-800"
+                            title="Delete Graph"
+                          >
+                            <Trash2 size={14} />
+                          </button>
+                        )}
                       </div>
                     ))}
                   </div>
@@ -673,8 +654,6 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
               </div>
             </form>
 
-            {error && <p className="text-red-400 text-xs mb-3">{error}</p>}
-
             <div className="space-y-2 flex-1 min-h-0 flex flex-col">
               {showExamples && (
                 <div className="flex flex-wrap gap-1.5 overflow-y-auto overflow-x-hidden pr-1 flex-1 min-h-0">