@johndimm/constellations 1.0.0 → 1.0.2

package/components/AppHeader.tsx

@@ -1,70 +1,110 @@
+"use client";
 import React from 'react';
-import { ChevronRight, ChevronLeft, Key } from 'lucide-react';
+import { ChevronRight, ChevronLeft, X } from 'lucide-react';
 import { GraphNode } from '../types';
 
 interface AppHeaderProps {
     showHeader: boolean;
     panelCollapsed: boolean;
     setPanelCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
-    showBrowse: boolean;
-    handleOpenPeopleBrowser: () => void;
     selectedNode: GraphNode | null;
     sidebarCollapsed: boolean;
-    setSidebarCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
     setSidebarToggleSignal: React.Dispatch<React.SetStateAction<number>>;
-    onReset: () => void;
+    /** When set, shows a top-right control that leaves full-screen (e.g. back to player). */
+    onClose?: () => void;
+    /**
+     * When set (e.g. `/` or `/player`), the close control is a real `href` link so navigation works
+     * even if pointer-event layering blocked the old button. `onClick` can still run for cleanup.
+     */
+    closeHref?: string;
+    /**
+     * When the host app shows its own top bar (e.g. Trailer Vision nav, ~44px), set so this header
+     * does not sit at viewport top:0 and steal clicks from the host nav. Use `top-11` for 2.75rem.
+     */
+    offsetTopClass?: string;
 }
 
 const AppHeader: React.FC<AppHeaderProps> = ({
     showHeader,
     panelCollapsed,
     setPanelCollapsed,
-    showBrowse,
-    handleOpenPeopleBrowser,
     selectedNode,
     sidebarCollapsed,
-    setSidebarCollapsed,
     setSidebarToggleSignal,
-    onReset
+    onClose,
+    closeHref,
+    offsetTopClass = "top-0",
 }) => {
     if (!showHeader) return null;
 
+    const showLeave = closeHref || onClose;
+
     return (
-        <header className="fixed top-0 left-0 right-0 z-50 min-h-14 bg-slate-900/95 backdrop-blur border-b border-slate-800 flex items-center justify-between px-2 sm:px-3 py-2 gap-2 overflow-x-hidden max-w-full">
-            <div className="flex items-center gap-1.5 sm:gap-2 min-w-0">
+        <header
+            className={`absolute left-0 right-0 z-[200] h-14 max-h-14 min-h-14 shrink-0 pointer-events-auto bg-slate-900/95 backdrop-blur flex items-center justify-between px-2 sm:px-3 py-2 gap-2 overflow-x-hidden max-w-full ${offsetTopClass}`}
+        >
+            <div className="pointer-events-auto flex min-w-0 items-center gap-1.5 sm:gap-2">
                 <button
+                    type="button"
                     onClick={() => setPanelCollapsed(c => !c)}
                     className="w-9 h-9 sm:w-10 sm:h-10 bg-slate-800/80 border border-slate-700 rounded-lg flex items-center justify-center text-slate-300 hover:text-white transition flex-shrink-0"
-                    title={panelCollapsed ? "Show controls" : "Hide controls"}
+                    title={
+                        panelCollapsed
+                            ? "Show left panel — search, save/load, graph options"
+                            : "Hide left panel"
+                    }
+                    aria-label={panelCollapsed ? "Show control panel" : "Hide control panel"}
                 >
                     {panelCollapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
                 </button>
-                <button
-                    onClick={(e) => {
-                        e.preventDefault();
-                        window.location.href = window.location.origin + window.location.pathname;
-                    }}
-                    className="text-base sm:text-lg font-bold text-red-500 whitespace-nowrap hover:text-red-400 transition-colors"
-                >
+                <span className="text-base sm:text-lg font-bold text-red-500 whitespace-nowrap">
                     Constellations
-                </button>
+                </span>
             </div>
-            <div className="flex items-center gap-3 sm:gap-4 flex-shrink-0 mr-2">
-                <button
-                    onClick={handleOpenPeopleBrowser}
-                    className={`text-sm font-bold uppercase tracking-widest transition-colors ${showBrowse ? 'text-red-500' : 'text-slate-400 hover:text-white'}`}
-                >
-                    People
-                </button>
+            <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0 mr-1">
                 {selectedNode && (
                     <button
-                        onClick={() => { setSidebarCollapsed(c => !c); setSidebarToggleSignal(s => s + 1); }}
+                        type="button"
+                        onClick={() => {
+                            setSidebarToggleSignal((s) => s + 1);
+                        }}
                         className="w-9 h-9 sm:w-10 sm:h-10 bg-slate-800/80 border border-slate-700 rounded-lg flex items-center justify-center text-slate-300 hover:text-white transition flex-shrink-0"
-                        title="Toggle details"
+                        title={
+                            sidebarCollapsed
+                                ? "Show right details (selected node on graph)"
+                                : "Hide right details"
+                        }
+                        aria-label={sidebarCollapsed ? "Show details panel" : "Hide details panel"}
                     >
                         {sidebarCollapsed ? <ChevronLeft size={18} /> : <ChevronRight size={18} />}
                     </button>
                 )}
+                {showLeave && closeHref && (
+                    <a
+                        href={closeHref}
+                        onClick={onClose}
+                        className="w-9 h-9 sm:w-10 sm:h-10 bg-slate-800/80 border border-slate-700 rounded-lg flex items-center justify-center text-slate-300 hover:text-white hover:border-slate-600 transition flex-shrink-0"
+                        title="Return to the main app"
+                        aria-label="Return to the main app"
+                    >
+                        <X size={20} strokeWidth={2} />
+                    </a>
+                )}
+                {showLeave && !closeHref && onClose && (
+                    <button
+                        type="button"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onClose();
+                        }}
+                        className="w-9 h-9 sm:w-10 sm:h-10 bg-slate-800/80 border border-slate-700 rounded-lg flex items-center justify-center text-slate-300 hover:text-white hover:border-slate-600 transition flex-shrink-0"
+                        title="Leave full screen and return to Trailer Vision"
+                        aria-label="Close constellations"
+                    >
+                        <X size={20} strokeWidth={2} />
+                    </button>
+                )}
             </div>
         </header>
     );

package/components/AppNotifications.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from 'react';
 
 interface AppNotificationsProps {

package/components/BrowsePeople.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState, useEffect, useCallback } from 'react';
 import { Search, ChevronLeft, ChevronRight, X, Filter } from 'lucide-react';
 
@@ -124,6 +125,8 @@ const BrowsePeople: React.FC<BrowsePeopleProps> = ({ baseUrl = '', onSelect, exp
     'South African', 'New Zealander', 'Israeli', 'Saudi Arabian', 'Korean', 'Thai', 'Vietnamese', 'Indonesian'
   ];
 
+  const isPureBrowse = useCallback(() => !searchTerm.trim() && !occupation && !nationality, [searchTerm, occupation, nationality]);
+
   const buildSearchQuery = useCallback(() => {
     const parts: string[] = [];
     

package/components/ControlPanel.tsx

@@ -1,7 +1,6 @@
+"use client";
 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';
-import type { LlmProviderId } from '../services/aiUtils';
-import { getBrowserLlmOverride, setBrowserLlmOverride, getEnvCacheUrl } from '../services/aiUtils';
+import { Search, Minimize2, Maximize2, Calendar, Network, X, Link as LinkIcon, ArrowRight, Type, ChevronLeft, ChevronRight, ChevronDown, Settings } from 'lucide-react';
 import { DEFAULT_KIOSK_DOMAINS, saveKioskDomains, saveSelectedKioskDomainId } from '../kioskDomains';
 import type { KioskDomain } from '../kioskDomains';
 
@@ -23,9 +22,6 @@ interface ControlPanelProps {
   selectedKioskDomainId?: string;
   onSelectKioskDomain?: (domainId: string) => void;
   onUpdateKioskDomains?: (domains: KioskDomain[]) => void;
-  onClear: () => void;
-  onClearCache?: () => void;
-  onExpandAllLeafNodes?: () => void;
   isProcessing: boolean;
   isCompact: boolean;
   onToggleCompact: () => void;
@@ -33,20 +29,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> = ({
@@ -67,9 +66,6 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
   selectedKioskDomainId,
   onSelectKioskDomain,
   onUpdateKioskDomains,
-  onClear,
-  onClearCache,
-  onExpandAllLeafNodes,
   isProcessing,
   isCompact,
   onToggleCompact,
@@ -77,20 +73,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);
@@ -103,16 +92,6 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
   // 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 domainsImportRef = React.useRef<HTMLInputElement>(null);
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -132,59 +111,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 +145,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,64 +173,18 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
               <div className="[writing-mode:vertical-lr] text-[9px] uppercase tracking-tighter mt-1 font-bold">Controls</div>
             </button>
 
-            {/* 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>
-                </div>
+            {/* 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>
+            )}
 
+            {/* Button Groups */}
+            <div className="space-y-4 mb-4">
               {/* Group: View */}
               <div>
                 <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
@@ -328,223 +220,8 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
                   </button>
                 </div>
               </div>
-
-              {/* Group: LLM — browser override; with cache proxy, sent as llmProvider on each request */}
-              <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
-                </div>
-                <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);
-                    }
-                  }}
-                  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"
-                >
-                  <option value="env">Default (from .env)</option>
-                  <option value="gemini">Google Gemini</option>
-                  <option value="openai">OpenAI</option>
-                  <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>
-              </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>
-                </div>
-              </div>
             </div>
 
-            {/* Help Dialog moved to shared App-level HelpOverlay */}
-
-            {/* Share Dialog */}
-            {showShare && (
-              <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">
-                    <Share2 size={14} /> Share Graph
-                  </h3>
-                  <button onClick={() => setShowShare(false)}><X size={14} className="text-slate-400" /></button>
-                </div>
-                <div className="grid grid-cols-3 gap-2">
-                  <button
-                    onClick={() => onSave('__COPY_LINK__')}
-                    className="flex flex-col items-center justify-center gap-2 bg-slate-700 hover:bg-slate-600 text-white p-3 rounded-lg transition-colors border border-slate-600"
-                  >
-                    <LinkIcon size={20} className="text-orange-400" />
-                    <span className="text-[10px] font-bold uppercase tracking-wider text-center">Copy Link</span>
-                  </button>
-                  <button
-                    onClick={() => onSave('__COPY__')}
-                    className="flex flex-col items-center justify-center gap-2 bg-slate-700 hover:bg-slate-600 text-white p-3 rounded-lg transition-colors border border-slate-600"
-                  >
-                    <Copy size={20} className="text-purple-400" />
-                    <span className="text-[10px] font-bold uppercase tracking-wider text-center">Copy JSON</span>
-                  </button>
-                  <button
-                    onClick={() => onSave('__EXPORT__')}
-                    className="flex flex-col items-center justify-center gap-2 bg-slate-700 hover:bg-slate-600 text-white p-3 rounded-lg transition-colors border border-slate-600"
-                  >
-                    <Download size={20} className="text-indigo-400" />
-                    <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 && (
-              <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>
-                  <button onClick={() => setShowSave(false)}><X size={14} className="text-slate-400" /></button>
-                </div>
-                <form onSubmit={handleSaveSubmit} className="flex gap-2">
-                  <input
-                    type="text"
-                    value={saveName}
-                    onChange={(e) => setSaveName(e.target.value)}
-                    placeholder="Graph Name..."
-                    className="flex-1 bg-slate-900 border border-slate-700 text-white px-2 py-1 rounded text-sm focus:outline-none focus:border-indigo-500"
-                    autoFocus
-                  />
-                  <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
-                    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"
-                  >
-                    <Download size={14} />
-                  </button>
-                </form>
-              </div>
-            )}
-
-            {/* Load Dialog */}
-            {showLoad && (
-              <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>
-                    <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"
-                />
-
-                {savedGraphs.length === 0 ? (
-                  <p className="text-slate-400 text-xs italic">No saved graphs.</p>
-                ) : (
-                  <div className="space-y-1">
-                    {savedGraphs.map(name => (
-                      <div key={name} className="flex justify-between items-center bg-slate-900 p-2 rounded hover:bg-slate-700 group transition-colors">
-                        <button
-                          onClick={() => { onLoad(name); setShowLoad(false); }}
-                          className="text-white text-sm text-left flex-1"
-                        >
-                          {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>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-
           </div>
 
           <div onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className="flex-1 min-h-0 flex flex-col overflow-hidden">
@@ -673,8 +350,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">