@ifc-lite/viewer 1.23.0 → 1.25.0

package/src/components/viewer/MainToolbar.tsx

@@ -24,11 +24,9 @@ import {
   ArrowRight,
   Box,
   HelpCircle,
-  Sparkles,
   Loader2,
   Camera,
   Info,
-  Layers,
   Layers2,
   SquareX,
   Building2,
@@ -36,6 +34,7 @@ import {
   PackagePlus,
   MessageSquare,
   ClipboardCheck,
+  Puzzle,
   Palette,
   Orbit,
   Layout,
@@ -85,6 +84,7 @@ import { useFloorplanView } from '@/hooks/useFloorplanView';
 import { buildDesktopUpgradeUrl, hasDesktopFeatureAccess, type DesktopFeature } from '@/lib/desktop-product';
 import { recordRecentFiles, cacheFileBlobs } from '@/lib/recent-files';
 import { ThemeSwitch } from './ThemeSwitch';
+import { ExtensionToolbarSlot } from '@/components/extensions/ExtensionToolbarSlot';
 import { toast } from '@/components/ui/toast';
 import { navigateToPath } from '@/services/app-navigation';
 import { getStartupHarnessRequest, setActiveHarnessRequest, tryClaimStartupHarnessRequest } from '@/services/desktop-harness';
@@ -497,6 +497,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const editEnabled = useViewerStore((state) => state.editEnabled);
   const toggleEditEnabled = useViewerStore((state) => state.toggleEditEnabled);
   const selectedEntityId = useViewerStore((state) => state.selectedEntityId);
+  const selectedEntityIds = useViewerStore((state) => state.selectedEntityIds);
   const hideEntities = useViewerStore((state) => state.hideEntities);
   const error = useViewerStore((state) => state.error);
   const cameraCallbacks = useViewerStore((state) => state.cameraCallbacks);
@@ -528,6 +529,8 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   // Lens state
   const lensPanelVisible = useViewerStore((state) => state.lensPanelVisible);
   const setLensPanelVisible = useViewerStore((state) => state.setLensPanelVisible);
+  const extensionsPanelVisible = useViewerStore((state) => state.extensionsPanelVisible);
+  const setExtensionsPanelVisible = useViewerStore((state) => state.setExtensionsPanelVisible);
   const scriptPanelVisible = useViewerStore((state) => state.scriptPanelVisible);
   const setScriptPanelVisible = useViewerStore((state) => state.setScriptPanelVisible);
   const ganttPanelVisible = useViewerStore((state) => state.ganttPanelVisible);
@@ -624,6 +627,30 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     // eslint-disable-next-line react-hooks/exhaustive-deps -- meshLen is a stable proxy for geometryResult
   }, [models, meshLen]);
 
+  // IfcAnnotation has no body mesh, so it can't be detected via the mesh scan.
+  // Look up the entity table directly. byType keys are uppercase STEP names
+  // ('IFCANNOTATION') but cache loads sometimes preserve PascalCase too.
+  // Symbolic 2D overlays cover BOTH IfcAnnotation (text, dimensions, leader
+  // lines, filled regions) AND IfcGrid (axis lines + synthesized bubble +
+  // tag). Some files ship only grids (Snowdon Towers Structural is the
+  // canonical example — no IfcAnnotation at all), so the toggle must
+  // surface for either entity type or grid-only models get no way to hide
+  // the overlay.
+  const hasIfcAnnotations = useMemo(() => {
+    const has = (store: typeof ifcDataStore | undefined) => {
+      const byType = store?.entityIndex?.byType;
+      if (!byType) return false;
+      return (byType.get('IFCANNOTATION')?.length ?? 0) > 0
+        || (byType.get('IfcAnnotation')?.length ?? 0) > 0
+        || (byType.get('IFCGRID')?.length ?? 0) > 0
+        || (byType.get('IfcGrid')?.length ?? 0) > 0;
+    };
+    if (models.size > 0) {
+      for (const [, m] of models) if (has(m.ifcDataStore)) return true;
+    }
+    return has(ifcDataStore);
+  }, [models, ifcDataStore]);
+
   const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (!files || files.length === 0) return;
@@ -699,6 +726,12 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   }, [loadFilesSequentially, addIfcxOverlays, ifcDataStore]);
 
   const hasSelection = selectedEntityId !== null;
+  // Selection chip uses the multi-select size when present; falls back
+  // to the single legacy `selectedEntityId` so the chip still says
+  // "1 selected" for the click-to-pick flow that hasn't migrated.
+  const selectionCount = selectedEntityIds.size > 0
+    ? selectedEntityIds.size
+    : (selectedEntityId !== null ? 1 : 0);
 
   const clearSelection = useViewerStore((state) => state.clearSelection);
 
@@ -765,7 +798,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     setScriptPanelVisible,
   ]);
 
-  const handleToggleRightPanel = useCallback((panel: 'bcf' | 'ids' | 'lens' | 'addElement') => {
+  const handleToggleRightPanel = useCallback((panel: 'bcf' | 'ids' | 'lens' | 'addElement' | 'extensions') => {
     if (activeAnalysisExtension?.placement !== 'bottom') {
       closeActiveAnalysisExtension();
     }
@@ -775,16 +808,21 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     if (panel === 'ids' && !requireDesktopFeature('ids_validation', 'IDS validation')) {
       return;
     }
+    if (panel === 'extensions' && !requireDesktopFeature('extensions', 'Extensions')) {
+      return;
+    }
 
     const nextBcfVisible = panel === 'bcf' ? !bcfPanelVisible : false;
     const nextIdsVisible = panel === 'ids' ? !idsPanelVisible : false;
     const nextLensVisible = panel === 'lens' ? !lensPanelVisible : false;
+    const nextExtensionsVisible = panel === 'extensions' ? !extensionsPanelVisible : false;
     const isAddElementActive = activeTool === 'addElement';
     const nextAddElementActive = panel === 'addElement' ? !isAddElementActive : false;
 
     setBcfPanelVisible(nextBcfVisible);
     setIdsPanelVisible(nextIdsVisible);
     setLensPanelVisible(nextLensVisible);
+    setExtensionsPanelVisible(nextExtensionsVisible);
 
     if (panel === 'addElement') {
       setActiveTool(nextAddElementActive ? 'addElement' : 'select');
@@ -792,18 +830,20 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       setActiveTool('select');
     }
 
-    if (nextBcfVisible || nextIdsVisible || nextLensVisible || nextAddElementActive) {
+    if (nextBcfVisible || nextIdsVisible || nextLensVisible || nextExtensionsVisible || nextAddElementActive) {
       setRightPanelCollapsed(false);
     }
   }, [
     activeAnalysisExtension?.placement,
     activeTool,
     bcfPanelVisible,
+    extensionsPanelVisible,
     idsPanelVisible,
     lensPanelVisible,
     requireDesktopFeature,
     setActiveTool,
     setBcfPanelVisible,
+    setExtensionsPanelVisible,
     setIdsPanelVisible,
     setLensPanelVisible,
     setRightPanelCollapsed,
@@ -836,6 +876,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     setBcfPanelVisible(false);
     setIdsPanelVisible(false);
     setLensPanelVisible(false);
+    setExtensionsPanelVisible(false);
     // The right slot is single-tenant: when an analysis extension takes
     // it over, the AddElement tool must release it too, otherwise its 3D
     // click handler keeps placing elements behind the extension panel.
@@ -849,6 +890,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     analysisExtensionState.extensions,
     setActiveTool,
     setBcfPanelVisible,
+    setExtensionsPanelVisible,
     setGanttPanelVisible,
     setIdsPanelVisible,
     setLensPanelVisible,
@@ -865,6 +907,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     if (bcfPanelVisible) panels.add('bcf');
     if (idsPanelVisible) panels.add('ids');
     if (lensPanelVisible) panels.add('lens');
+    if (extensionsPanelVisible) panels.add('extensions');
     if (activeTool === 'addElement') panels.add('addElement');
     if (analysisExtensionState.activeId) panels.add(analysisExtensionState.activeId);
     return panels;
@@ -872,6 +915,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     activeTool,
     analysisExtensionState.activeId,
     bcfPanelVisible,
+    extensionsPanelVisible,
     ganttPanelVisible,
     idsPanelVisible,
     lensPanelVisible,
@@ -888,6 +932,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     if (activeWorkspacePanels.has('bcf')) return 'BCF Issues';
     if (activeWorkspacePanels.has('ids')) return 'IDS Validation';
     if (activeWorkspacePanels.has('lens')) return 'Lens Rules';
+    if (activeWorkspacePanels.has('extensions')) return 'Extensions';
     if (activeWorkspacePanels.has('addElement')) return 'Add Element';
     return activeAnalysisExtension?.label ?? 'Analysis';
   }, [activeAnalysisExtension?.label, activeWorkspacePanels]);
@@ -1192,6 +1237,9 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
           <TooltipContent>{workspacePanelLabel ? `Panels: ${workspacePanelLabel}` : 'Panels'}</TooltipContent>
         </Tooltip>
         <DropdownMenuContent align="start" className="w-56">
+          <DropdownMenuLabel className="text-[10px] uppercase tracking-wide text-muted-foreground">
+            Workspace
+          </DropdownMenuLabel>
           <DropdownMenuCheckboxItem
             checked={activeWorkspacePanels.has('script')}
             onCheckedChange={() => handleToggleBottomPanel('script')}
@@ -1214,6 +1262,9 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             Schedule (Gantt)
           </DropdownMenuCheckboxItem>
           <DropdownMenuSeparator />
+          <DropdownMenuLabel className="text-[10px] uppercase tracking-wide text-muted-foreground">
+            Inspect & validate
+          </DropdownMenuLabel>
           <DropdownMenuCheckboxItem
             checked={activeWorkspacePanels.has('bcf')}
             onCheckedChange={() => handleToggleRightPanel('bcf')}
@@ -1235,6 +1286,10 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             <Palette className="h-4 w-4 mr-2" />
             Lens Rules
           </DropdownMenuCheckboxItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuLabel className="text-[10px] uppercase tracking-wide text-muted-foreground">
+            Author
+          </DropdownMenuLabel>
           <DropdownMenuCheckboxItem
             checked={activeWorkspacePanels.has('addElement')}
             onCheckedChange={() => handleToggleRightPanel('addElement')}
@@ -1242,9 +1297,19 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             <PackagePlus className="h-4 w-4 mr-2" />
             Add Element
           </DropdownMenuCheckboxItem>
-          {rightAnalysisExtensions.length > 0 && (
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('extensions')}
+            onCheckedChange={() => handleToggleRightPanel('extensions')}
+          >
+            <Puzzle className="h-4 w-4 mr-2" />
+            Extensions
+          </DropdownMenuCheckboxItem>
+          {(rightAnalysisExtensions.length > 0 || bottomAnalysisExtensions.length > 0) && (
             <>
               <DropdownMenuSeparator />
+              <DropdownMenuLabel className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                Analysis extensions
+              </DropdownMenuLabel>
               {rightAnalysisExtensions.map((extension) => {
                 const Icon = extension.icon;
                 return (
@@ -1258,11 +1323,6 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
                   </DropdownMenuCheckboxItem>
                 );
               })}
-            </>
-          )}
-          {bottomAnalysisExtensions.length > 0 && (
-            <>
-              <DropdownMenuSeparator />
               {bottomAnalysisExtensions.map((extension) => {
                 const Icon = extension.icon;
                 return (
@@ -1414,17 +1474,42 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         </TooltipContent>
       </Tooltip>
 
-      <ActionButton icon={Equal} label="Isolate (Set Basket)" onClick={handleIsolate} shortcut="I / =" />
-      <ActionButton icon={EyeOff} label="Hide Selection" onClick={handleHide} shortcut="Del / Space" disabled={!hasSelection} />
+      {/*
+        Selection action cluster — Hide / Frame / Isolate only make
+        sense with a selection, so they don't get to live in the
+        toolbar chrome at rest. When a user selects anything, the
+        slot opens with a "N selected" pill + the three actions next
+        to it. Hotkeys (Del / F / I / =) keep working regardless of
+        whether the chip is rendered, so power users feel no change.
+
+        The chip lives in the same separator zone the buttons used to
+        occupy so the spatial location is familiar to muscle memory.
+      */}
+      {selectionCount > 0 && (
+        <div
+          className="flex items-center gap-0.5 pl-1.5 pr-0.5 rounded-md border border-primary/30 bg-primary/5 transition-opacity duration-150"
+          role="group"
+          aria-label={`Selection actions — ${selectionCount} selected`}
+        >
+          <span
+            className="text-[10px] font-semibold tabular-nums text-primary uppercase tracking-wide whitespace-nowrap pr-1.5"
+            aria-hidden="true"
+          >
+            {selectionCount} sel
+          </span>
+          <ActionButton icon={Equal} label="Isolate Selection (Set Basket)" onClick={handleIsolate} shortcut="I / =" />
+          <ActionButton icon={EyeOff} label="Hide Selection" onClick={handleHide} shortcut="Del / Space" />
+          <ActionButton
+            icon={Crosshair}
+            label="Frame Selection"
+            onClick={() => cameraCallbacks.frameSelection?.()}
+            shortcut="F"
+          />
+        </div>
+      )}
+
       <ActionButton icon={Eye} label="Show All (Reset Filters)" onClick={handleShowAll} shortcut="A" />
       <ActionButton icon={Maximize2} label="Fit All" onClick={() => cameraCallbacks.fitAll?.()} shortcut="Z" />
-      <ActionButton
-        icon={Crosshair}
-        label="Frame Selection"
-        onClick={() => cameraCallbacks.frameSelection?.()}
-        shortcut="F"
-        disabled={!hasSelection}
-      />
 
       <DropdownMenu>
         <Tooltip>
@@ -1441,7 +1526,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
                 aria-label={mergeLayers ? 'Class Visibility (Merge Multilayer Walls is on)' : 'Class Visibility'}
                 className="relative"
               >
-                <Layers className="h-4 w-4" />
+                <Filter className="h-4 w-4" />
                 {mergeLayers && (
                   // Tiny accent dot announcing that a non-default load
                   // setting is active. Decorative — semantics live on
@@ -1486,6 +1571,15 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
               Show Site
             </DropdownMenuCheckboxItem>
           )}
+          {hasIfcAnnotations && (
+            <DropdownMenuCheckboxItem
+              checked={typeVisibility.ifcAnnotations}
+              onCheckedChange={() => toggleTypeVisibility('ifcAnnotations')}
+            >
+              <Pencil className="h-4 w-4 mr-2" style={{ color: '#e4b400' }} />
+              Show Annotations & Grids
+            </DropdownMenuCheckboxItem>
+          )}
 
           {/* Load-time toggles live below the runtime visibility
               switches — they apply on next model open rather than
@@ -1518,29 +1612,15 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       {/* ── Camera & View ── */}
       <ActionButton icon={Home} label="Home (Isometric + Reset Visibility)" onClick={handleHome} shortcut="H" />
 
-      {/* Orthographic / Perspective toggle */}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant={projectionMode === 'orthographic' ? 'default' : 'ghost'}
-            size="icon-sm"
-            onClick={(e) => {
-              (e.currentTarget as HTMLButtonElement).blur();
-              toggleProjectionMode();
-            }}
-            className={cn(projectionMode === 'orthographic' && 'bg-primary text-primary-foreground')}
-          >
-            <Orbit className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          {projectionMode === 'orthographic' ? 'Switch to Perspective' : 'Switch to Orthographic'}
-        </TooltipContent>
-      </Tooltip>
-
-      {/* Cesium 3D Context toggle — web only, only when model has georeferencing */}
+      {/*
+        Cesium 3D World Context — sits next to Home as a raw button so
+        the world-context affordance is one click away when a model has
+        georeferencing. When active, the "Move georeference" sub-toggle
+        appears beside it (its amber tint signals a modal pose whose
+        exit affordance must stay visible).
+      */}
       {cesiumAvailable && !desktopShell && (
-        <div className="flex items-center gap-1">
+        <>
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
@@ -1589,46 +1669,40 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
               </TooltipContent>
             </Tooltip>
           )}
-        </div>
+        </>
       )}
 
-      {/* Hover Tooltips toggle */}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant={hoverTooltipsEnabled ? 'default' : 'ghost'}
-            size="icon-sm"
-            onClick={(e) => {
-              (e.currentTarget as HTMLButtonElement).blur();
-              toggleHoverTooltips();
-            }}
-            className={cn(hoverTooltipsEnabled && 'bg-primary text-primary-foreground')}
-          >
-            <Info className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          {hoverTooltipsEnabled ? 'Disable' : 'Enable'} Hover Tooltips
-        </TooltipContent>
-      </Tooltip>
-
-      {/* Preset Views dropdown */}
+      {/*
+        Consolidated View dropdown — holds projection toggle, preset
+        views, and hover tooltips. These are "view options" the user
+        reaches for occasionally, and rendering each as a raw icon
+        button used to dominate the toolbar's right half. Cesium stayed
+        inline (above) because the world-context overlay is a primary
+        affordance, not a tucked-away view setting.
+      */}
       <DropdownMenu>
         <Tooltip>
           <TooltipTrigger asChild>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon-sm">
+              <Button
+                variant={(projectionMode === 'orthographic' || hoverTooltipsEnabled) ? 'default' : 'ghost'}
+                size="icon-sm"
+                aria-label="View options"
+                className={cn((projectionMode === 'orthographic' || hoverTooltipsEnabled) && 'bg-primary text-primary-foreground')}
+              >
                 <Grid3x3 className="h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
           </TooltipTrigger>
-          <TooltipContent>Preset Views</TooltipContent>
+          <TooltipContent>View options</TooltipContent>
         </Tooltip>
-        <DropdownMenuContent>
+        <DropdownMenuContent align="end" className="w-56">
+          <DropdownMenuLabel className="text-[10px] uppercase tracking-wide text-muted-foreground">
+            Preset views
+          </DropdownMenuLabel>
           <DropdownMenuItem onClick={handleHome}>
             <Box className="h-4 w-4 mr-2" /> Isometric <span className="ml-auto text-xs opacity-60">H</span>
           </DropdownMenuItem>
-          <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => cameraCallbacks.setPresetView?.('top')}>
             <ArrowUp className="h-4 w-4 mr-2" /> Top <span className="ml-auto text-xs opacity-60">1</span>
           </DropdownMenuItem>
@@ -1647,12 +1721,37 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
           <DropdownMenuItem onClick={() => cameraCallbacks.setPresetView?.('right')}>
             <ArrowRight className="h-4 w-4 mr-2" /> Right <span className="ml-auto text-xs opacity-60">6</span>
           </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuLabel className="text-[10px] uppercase tracking-wide text-muted-foreground">
+            Projection
+          </DropdownMenuLabel>
+          <DropdownMenuCheckboxItem
+            checked={projectionMode === 'orthographic'}
+            onCheckedChange={() => toggleProjectionMode()}
+          >
+            <Orbit className="h-4 w-4 mr-2" />
+            Orthographic
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuLabel className="text-[10px] uppercase tracking-wide text-muted-foreground">
+            Helpers
+          </DropdownMenuLabel>
+          <DropdownMenuCheckboxItem
+            checked={hoverTooltipsEnabled}
+            onCheckedChange={() => toggleHoverTooltips()}
+          >
+            <Info className="h-4 w-4 mr-2" />
+            Hover tooltips
+          </DropdownMenuCheckboxItem>
         </DropdownMenuContent>
       </DropdownMenu>
 
       {/* Spacer */}
       <div className="flex-1" />
 
+      {/* Extension toolbar contributions (right-aligned) */}
+      <ExtensionToolbarSlot slot="toolbar.right" />
+
       {/* Loading Progress */}
       {loading && (geometryProgress || metadataProgress || progress) && (
         <div className="flex items-center gap-2 mr-4">
@@ -1678,26 +1777,10 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         <span className="text-xs text-destructive mr-4">{error}</span>
       )}
 
-      {/* Right Side Actions */}
+      {/* Right Side Actions — /mcp moved to the Info dialog header so
+          the toolbar's meta cluster stays focused on shell chrome
+          (Settings · Theme · Help). */}
       <div className="flex items-center gap-2 ml-2 pl-2 border-l border-zinc-200 dark:border-zinc-700/60">
-        {/* /mcp cross-link — lives in the meta cluster (Settings / Theme /
-            Help) so it shares space with shell-level navigation rather
-            than competing with the modeling tools to its left. */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="rounded-full"
-              onClick={() => navigateToPath('/mcp')}
-              aria-label="Open ifc-lite MCP"
-            >
-              <Sparkles className="!h-[20px] !w-[20px]" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Drive ifc-lite from any LLM (MCP)</TooltipContent>
-        </Tooltip>
-
         {desktopShell ? (
           <Tooltip>
             <TooltipTrigger asChild>

package/src/components/viewer/ScriptPanel.tsx

@@ -29,6 +29,7 @@ import {
   PanelRightOpen,
   Undo2,
   Redo2,
+  Wrench,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -57,6 +58,8 @@ import { SCRIPT_TEMPLATES } from '@/lib/scripts/templates';
 import { navigateToPath } from '@/services/app-navigation';
 import { CodeEditor } from './CodeEditor';
 import { ChatPanel } from './ChatPanel';
+import { PromoteToolDialog } from '@/components/extensions/PromoteToolDialog';
+import { useOptionalExtensionHost } from '@/sdk/ExtensionHostProvider';
 import type { LogEntry } from '@/store/slices/scriptSlice';
 
 interface ScriptPanelProps {
@@ -87,6 +90,8 @@ function useScriptState() {
   const undoScriptEditor = useViewerStore((s) => s.undoScriptEditor);
   const redoScriptEditor = useViewerStore((s) => s.redoScriptEditor);
   const queueChatRepairRequest = useViewerStore((s) => s.queueChatRepairRequest);
+  const chatToolReady = useViewerStore((s) => s.chatToolReady);
+  const setChatToolReady = useViewerStore((s) => s.setChatToolReady);
 
   return {
     editorContent,
@@ -111,6 +116,8 @@ function useScriptState() {
     undoScriptEditor,
     redoScriptEditor,
     queueChatRepairRequest,
+    chatToolReady,
+    setChatToolReady,
   };
 }
 
@@ -138,9 +145,12 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
     undoScriptEditor,
     redoScriptEditor,
     queueChatRepairRequest,
+    chatToolReady,
+    setChatToolReady,
   } = useScriptState();
 
   const { execute, reset } = useSandbox();
+  const extensionHost = useOptionalExtensionHost();
   const [outputCollapsed, setOutputCollapsed] = useState(false);
   const chatPanelVisible = useViewerStore((s) => s.chatPanelVisible);
   const setChatPanelVisible = useViewerStore((s) => s.setChatPanelVisible);
@@ -218,8 +228,13 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
 
   const handleRun = useCallback(async () => {
     if (executionState === 'running') return;
+    const startedAt = performance.now();
     await execute(editorContent);
-  }, [execute, editorContent, executionState]);
+    extensionHost?.emitAction('script.execute', {
+      templateId: activeScriptId ?? undefined,
+      durationMs: Math.round(performance.now() - startedAt),
+    });
+  }, [execute, editorContent, executionState, extensionHost, activeScriptId]);
 
   const handleSave = useCallback(() => {
     if (activeScriptId) {
@@ -233,6 +248,9 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
     createScript(name, code);
   }, [createScript]);
 
+  const [promoteOpen, setPromoteOpen] = useState(false);
+  const canPromote = !!extensionHost && editorContent.trim().length > 0;
+
   const handleDeleteConfirm = useCallback(() => {
     if (deleteConfirmId) {
       deleteScript(deleteConfirmId);
@@ -330,6 +348,47 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
           )}
         </div>
 
+        {/* Post-authoring "install as tool" banner — surfaces right
+            where the AI-written code lands so the user never has to
+            hunt for the Promote button. Highlighted (accent fill +
+            ring) so the install step reads as the obvious next move,
+            not a faint afterthought. */}
+        {chatToolReady?.kind === 'script' && (
+          <div className="shrink-0 border-b bg-primary/15 px-3 py-2.5 ring-1 ring-inset ring-primary/40">
+            <div className="flex items-center gap-2.5">
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
+                <Wrench className="h-4 w-4" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-xs font-semibold">This script is ready</div>
+                <div className="text-[11px] text-muted-foreground">
+                  Install it as a one-click button in your toolbar.
+                </div>
+              </div>
+              <Button
+                size="sm"
+                onClick={() => {
+                  setPromoteOpen(true);
+                  setChatToolReady(null);
+                }}
+                className="shrink-0"
+              >
+                <Wrench className="mr-1 h-3.5 w-3.5" />
+                Install as tool
+              </Button>
+              <Button
+                size="icon-xs"
+                variant="ghost"
+                onClick={() => setChatToolReady(null)}
+                aria-label="Dismiss"
+                className="shrink-0"
+              >
+                <X className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          </div>
+        )}
+
         {/* Toolbar */}
         <div className="flex items-center gap-1 px-2 py-1 border-b shrink-0">
           <Tooltip>
@@ -357,6 +416,29 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
             <TooltipContent>Save (Ctrl+S)</TooltipContent>
           </Tooltip>
 
+          {/* Save-as-tool — the explicit, always-visible bridge from a
+              one-shot script to a persistent toolbar button. A labelled
+              outline button (not a buried icon) so the "keep this"
+              step is discoverable without nagging. */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPromoteOpen(true)}
+                disabled={!canPromote}
+                aria-label="Save this script as a persistent tool"
+                className="gap-1"
+              >
+                <Wrench className="h-3.5 w-3.5" />
+                Save as tool
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              Turn this script into a permanent one-click button in your toolbar
+            </TooltipContent>
+          </Tooltip>
+
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
@@ -479,6 +561,16 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
                     <AlertCircle className="h-3 w-3 mt-0.5 shrink-0" />
                     <div className="min-w-0">
                       <span className="whitespace-pre-wrap break-all">{lastError}</span>
+                      {/* Sandbox-globals hint — when the error names a
+                          browser-context API the sandbox doesn't expose,
+                          surface a one-line cue so the user understands
+                          why the rewrite is needed before clicking Fix. */}
+                      {/(document|window|navigator|location|fetch|XMLHttpRequest|localStorage|indexedDB|setTimeout|setInterval) is not defined/.test(lastError) && (
+                        <div className="mt-1 text-[11px] text-muted-foreground font-sans">
+                          Scripts run in a QuickJS sandbox — no DOM, no <code className="font-mono">fetch</code>, no browser globals.
+                          Use <code className="font-mono">bim.*</code> APIs for viewer / data / export side-effects.
+                        </div>
+                      )}
                       <div className="mt-1">
                         <Button
                           variant="outline"
@@ -555,6 +647,18 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {promoteOpen && extensionHost && (
+        <PromoteToolDialog
+          open={promoteOpen}
+          source={editorContent}
+          initialName={
+            savedScripts.find((s) => s.id === activeScriptId)?.name
+            ?? 'My tool'
+          }
+          onClose={() => setPromoteOpen(false)}
+        />
+      )}
     </div>
   );
 }