@dfosco/storyboard-react 4.2.0-beta.4 → 4.2.1

package/src/CommandPalette/CommandPalette.jsx

@@ -1,8 +1,8 @@
-import { useState, useEffect, useCallback, useMemo } from 'react'
-import 'react-cmdk/dist/cmdk.css'
-import * as ReactCmdk from 'react-cmdk'
-const CommandPalette = ReactCmdk.default || ReactCmdk
-const { filterItems, getItemIndex } = ReactCmdk
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import { Command } from 'cmdk'
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import Icon from '../Icon.jsx'
 import {
   buildPrototypeIndex,
   listStories,
@@ -16,9 +16,11 @@ import {
   trackRecent,
   getCommandPaletteConfig,
   getToolbarConfig,
+  getConfig,
   setTheme,
   getTheme,
   isExcludedByRoute,
+  scoreMatch,
 } from '@dfosco/storyboard-core'
 import { widgetTypes } from '../canvas/widgets/widgetConfig.js'
 import CreateDialog from './CreateDialog.jsx'
@@ -26,6 +28,34 @@ import BranchBar from '../BranchBar/BranchBar.jsx'
 import AuthModal from '../AuthModal/AuthModal.jsx'
 import './command-palette.css'
 
+// Icon size for all palette items
+const ICON_SIZE = 16
+
+function getIconMap() {
+  const config = getCommandPaletteConfig()
+  return config?.icons || {}
+}
+
+function ItemIcon({ type, toolIcon, toolMeta }) {
+  const icons = getIconMap()
+  const entry = toolIcon || icons[type] || icons.fallback || 'feather/hexagon'
+  const iconName = typeof entry === 'object' ? entry.name : entry
+  const meta = toolMeta || (typeof entry === 'object' ? entry.meta : undefined)
+  return <Icon name={iconName} size={ICON_SIZE} color="var(--fgColor-muted, #656d76)" {...(meta || {})} />
+}
+
+function AvatarIcon({ username }) {
+  return (
+    <img
+      src={`https://github.com/${username}.png?size=32`}
+      alt={username}
+      width={ICON_SIZE}
+      height={ICON_SIZE}
+      style={{ flexShrink: 0, borderRadius: '50%' }}
+    />
+  )
+}
+
 /**
  * Check if a tool should be hidden from the command palette on the current route.
  * Uses the same pattern-matching logic as excludeRoutes.
@@ -58,7 +88,8 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
   const sections = config?.sections || []
   const groups = []
   const toolMenus = []
-  const usedToolIds = new Set() // Track tools already listed by source:"tools" sections
+  const usedToolIds = new Set()
+  const hiddenFromSearchIds = new Set()
   const basePath = prefix || '/'
 
   for (const section of sections) {
@@ -80,6 +111,7 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
       if (result?.group) groups.push(result.group)
       if (result?.subPages) toolMenus.push(...result.subPages)
       if (result?.usedToolIds) result.usedToolIds.forEach(id => usedToolIds.add(id))
+      if (result?.hiddenFromSearchIds) result.hiddenFromSearchIds.forEach(id => hiddenFromSearchIds.add(id))
       continue
     }
 
@@ -90,13 +122,14 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
         items: section.items.map((item, i) => {
           const id = `cfg:${section.id}:${i}`
           if (item.type === 'link') {
+            const resolvedUrl = item.url?.startsWith('/') ? prefix + item.url : item.url
             return {
               id,
               children: item.label,
               keywords: item.keywords || [item.label],
+              url: resolvedUrl,
               onClick: () => {
-                const url = item.url?.startsWith('/') ? prefix + item.url : item.url
-                if (url) window.location.href = url
+                if (resolvedUrl) window.location.href = resolvedUrl
               },
             }
           }
@@ -204,14 +237,21 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
         continue
       }
 
+      if (tool.inlineAction === 'open-palette') {
+        // Skip — no point opening the palette from within itself
+        continue
+      }
+
       // Any remaining tools (all surfaces)
       if (tool.render === 'link' && tool.url) {
+        const resolvedUrl = tool.url.startsWith('/') ? prefix + tool.url : tool.url
         remainingItems.push({
           id: `cfg:${section.id}:${toolId}`,
           children: label,
           keywords: [label, toolId].filter(Boolean),
           showType: false,
-          onClick: () => { window.location.href = tool.url },
+          url: resolvedUrl,
+          onClick: () => { window.location.href = resolvedUrl },
         })
       } else {
         // Menu tools: close palette and click the toolbar button to open the menu
@@ -252,9 +292,10 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
       }
     }
 
-    // Also include any toolMenus sub-pages not yet listed
+    // Also include any tool sub-pages not yet listed (skip non-tool sub-pages like create-widget)
     for (const menu of toolMenus) {
-      const menuToolId = menu.id?.replace('tool:', '')
+      if (!menu.id?.startsWith('tool:')) continue
+      const menuToolId = menu.id.replace('tool:', '')
       if (usedToolIds.has(menuToolId)) continue
       if (remainingItems.some(i => i.id === `cfg:${section.id}:${menuToolId}`)) continue
       remainingItems.push({
@@ -268,6 +309,18 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
     }
 
     if (remainingItems.length === 0) continue
+
+    // Stamp toolIcon from toolbar config onto remaining items
+    for (const item of remainingItems) {
+      if (!item.toolIcon) {
+        const match = item.id?.match(/cfg:[^:]+:(.+)/)
+        if (match) {
+          const t = allTools[match[1]]
+          if (t?.icon) item.toolIcon = t.icon
+        }
+      }
+    }
+
     groups.push({
       heading: section.title,
       id: `cfg:${section.id}`,
@@ -275,7 +328,7 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
     })
   }
 
-  return { groups, toolMenus }
+  return { groups, toolMenus, hiddenFromSearchIds }
 }
 
 function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction) {
@@ -288,11 +341,11 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
     const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
     if (!isLocalDev) return null
     const createItems = [
-      { id: 'create:canvas', children: 'Canvas', keywords: ['create', 'canvas', 'new', 'board'], showType: false, onClick: () => onCreateAction?.('Canvas') },
-      { id: 'create:prototype', children: 'Prototype', keywords: ['create', 'prototype', 'new', 'page'], showType: false, onClick: () => onCreateAction?.('Prototype') },
-      { id: 'create:component', children: 'Component', keywords: ['create', 'component', 'new', 'story'], showType: false, onClick: () => onCreateAction?.('Component') },
-      { id: 'create:flow', children: 'Prototype Flow', keywords: ['create', 'flow', 'new', 'data'], showType: false, onClick: () => onCreateAction?.('Flow') },
-      { id: 'create:page', children: 'Prototype Page', keywords: ['create', 'page', 'new'], showType: false, onClick: () => onCreateAction?.('Page') },
+      { id: 'create:canvas', children: 'Canvas', keywords: ['create', 'canvas', 'new', 'board'], itemType: 'create', onClick: () => onCreateAction?.('Canvas') },
+      { id: 'create:prototype', children: 'Prototype', keywords: ['create', 'prototype', 'new', 'page'], itemType: 'create', onClick: () => onCreateAction?.('Prototype') },
+      { id: 'create:component', children: 'Component', keywords: ['create', 'component', 'new', 'story'], itemType: 'create', onClick: () => onCreateAction?.('Component') },
+      { id: 'create:flow', children: 'Prototype Flow', keywords: ['create', 'flow', 'new', 'data'], itemType: 'create', onClick: () => onCreateAction?.('Flow') },
+      { id: 'create:page', children: 'Prototype Page', keywords: ['create', 'page', 'new'], itemType: 'create', onClick: () => onCreateAction?.('Page') },
     ]
     return { group: { heading: section.title, id: `cfg:${section.id}`, items: createItems } }
   }
@@ -303,23 +356,68 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
     if (!isLocalDev) return null
     const isCanvasRoute = typeof window !== 'undefined' && window.location.pathname.includes('/canvas/')
     if (!isCanvasRoute) return null
-    const items = Object.entries(widgetTypes).map(([type, def]) => ({
+    const hiddenTypes = new Set(['link-preview', 'image', 'figma-embed', 'codepen-embed', 'story', 'terminal-read', 'agent'])
+    const items = Object.entries(widgetTypes).filter(([type]) => !hiddenTypes.has(type)).map(([type, def]) => ({
       id: `create-widget:${type}`,
       children: def.label,
       keywords: ['add', 'widget', 'create', type, def.label.toLowerCase()],
-      showType: false,
+      itemType: type,
       onClick: () => {
         document.dispatchEvent(new CustomEvent('storyboard:canvas:add-widget', { detail: { type } }))
       },
     }))
-    return { group: { heading: section.title, id: `cfg:${section.id}`, items } }
+
+    // Build agent submenu from canvas.agents config
+    const subPages = []
+    const canvasConfig = getConfig('canvas')
+    const agentsConfig = canvasConfig?.agents
+    if (agentsConfig && typeof agentsConfig === 'object') {
+      const agentEntries = Object.entries(agentsConfig)
+      if (agentEntries.length > 0) {
+        const pageId = 'create-widget:agents'
+        subPages.push({
+          id: pageId,
+          label: 'Add agent to canvas',
+          title: 'Add agent to canvas',
+          keywords: ['agent', 'add', 'widget', 'copilot', 'claude', 'codex'],
+          options: agentEntries.map(([id, cfg]) => ({
+            label: cfg.label || id,
+            icon: cfg.icon,
+            execute: () => {
+              document.dispatchEvent(new CustomEvent('storyboard:canvas:add-widget', {
+                detail: {
+                  type: 'agent',
+                  props: {
+                    agentId: id,
+                    startupCommand: cfg.startupCommand || id,
+                    ...(cfg.defaultWidth ? { width: cfg.defaultWidth } : {}),
+                    ...(cfg.defaultHeight ? { height: cfg.defaultHeight } : {}),
+                  },
+                },
+              }))
+            },
+          })),
+        })
+        items.push({
+          id: 'create-widget:agent',
+          children: 'Agent',
+          keywords: ['add', 'widget', 'create', 'agent'],
+          itemType: 'agent',
+          hideFromSearch: true,
+          onClick: () => onNavigateToPage?.(pageId),
+          closeOnSelect: false,
+        })
+      }
+    }
+
+    return { group: { heading: section.title, id: `cfg:${section.id}`, items }, subPages }
   }
 
   // --- Starred source (reads from viewfinder localStorage) ---
   if (section.source === 'starred') {
-    const STARRED_KEY = 'sb-viewfinder-starred'
+    const STARRED_KEY = 'sb-workspace-starred'
     let starredIds = []
-    try { starredIds = JSON.parse(localStorage.getItem(STARRED_KEY)) || [] } catch {}
+    try { starredIds = JSON.parse(localStorage.getItem(STARRED_KEY)) || [] } catch { /* empty */ }
     if (starredIds.length === 0) return null
 
     const index = buildPrototypeIndex()
@@ -346,7 +444,8 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
         id: `starred:${id}`,
         children: artifact.name,
         keywords: ['starred', 'star', artifact.name.toLowerCase()],
-        showType: false,
+        itemType: artifact._type === 'canvas' ? 'canvas' : 'prototype',
+        url: route,
         onClick: () => {
           if (artifact.isExternal) {
             window.open(route, '_blank')
@@ -378,17 +477,20 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
             id: `cmd:${action.id}/${child.id || child.label}`,
             children: child.label,
             keywords: [action.label, child.label],
+            itemType: 'command',
             onClick: () => { if (child.execute) child.execute() },
           })
         }
       } else if (action.type === 'link' && action.url) {
+        const resolvedUrl = action.url.startsWith('/') && !action.url.startsWith('//') ? prefix + action.url : action.url
         commandItems.push({
           id: `cmd:${action.id}`,
           children: action.label,
           keywords: [action.label],
+          itemType: 'link',
+          url: resolvedUrl,
           onClick: () => {
-            const url = action.url.startsWith('/') && !action.url.startsWith('//') ? prefix + action.url : action.url
-            window.location.href = url
+            window.location.href = resolvedUrl
           },
         })
       } else {
@@ -396,6 +498,7 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
           id: `cmd:${action.id}`,
           children: action.label,
           keywords: [action.label],
+          itemType: 'command',
           onClick: () => executeAction(action.id),
         })
       }
@@ -414,16 +517,20 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
       group: {
         heading: section.title,
         id: `cfg:${section.id}`,
-        items: items.map(entry => ({
-          id: `cfg:${section.id}:${entry.type}:${entry.key}`,
-          children: entry.label,
-          keywords: [entry.type, entry.key, entry.label],
-          onClick: () => {
-            trackRecent(entry.type, entry.key, entry.label)
-            const route = resolveRecentRoute(entry, prefix)
-            if (route) window.location.href = route
-          },
-      })),
+        items: items.map(entry => {
+          const route = resolveRecentRoute(entry, prefix)
+          return {
+            id: `cfg:${section.id}:${entry.type}:${entry.key}`,
+            children: entry.label,
+            keywords: [entry.type, entry.key, entry.label],
+            itemType: entry.type,
+            url: route || undefined,
+            onClick: () => {
+              trackRecent(entry.type, entry.key, entry.label)
+              if (route) window.location.href = route
+            },
+          }
+        }),
       },
     }
   }
@@ -477,6 +584,8 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
         id: `cfg:${section.id}:${item.id}`,
         children: item.name,
         keywords: [item.name, item.id, item.type],
+        itemType: item.type,
+        url: item.route,
         onClick: () => {
           trackRecent(item.type, item.id, item.name)
           window.location.href = item.route
@@ -489,7 +598,7 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
 /**
  * Build a section from toolbar.config.json tools.
  * If toolIds is provided, only include those tools in that order (with optional custom labels).
- * Otherwise include all command-list tools.
+ * Otherwise include all command-palette tools.
  *
  * toolIds format: ["theme", "flows"] or [{ id: "theme", label: "Change theme" }]
  */
@@ -506,20 +615,22 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
     for (const entry of section.toolIds) {
       const toolId = typeof entry === 'string' ? entry : entry.id
       const customLabel = typeof entry === 'object' ? entry.label : null
+      const closeOnSelect = typeof entry === 'object' ? entry.closeOnSelect : undefined
+      const iconMeta = typeof entry === 'object' ? entry.meta : undefined
       const tool = tools[toolId]
       if (!tool) continue
       const state = getToolbarToolState(toolId)
       if (state === 'disabled' || state === 'hidden') continue
       if (isHiddenInPalette(tool, basePath)) continue
-      entries.push({ toolId, tool, label: customLabel || tool.label || toolId })
+      entries.push({ toolId, tool, label: customLabel || tool.label || toolId, toolIcon: tool.icon, toolMeta: iconMeta, closeOnSelect: closeOnSelect ?? tool.closeOnSelect })
     }
   } else {
     for (const [toolId, tool] of Object.entries(tools)) {
-      if (tool.surface !== 'command-list') continue
+      if (tool.surface !== 'command-palette') continue
       const state = getToolbarToolState(toolId)
       if (state === 'disabled' || state === 'hidden') continue
       if (isHiddenInPalette(tool, basePath)) continue
-      entries.push({ toolId, tool, label: tool.label || toolId })
+      entries.push({ toolId, tool, label: tool.label || toolId, toolIcon: tool.icon, toolMeta: undefined, closeOnSelect: tool.closeOnSelect })
     }
   }
 
@@ -528,14 +639,20 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
   const items = []
   const subPages = []
 
-  for (const { toolId, tool, label } of entries) {
+  for (const { toolId, tool, label, closeOnSelect: entryCloseOnSelect } of entries) {
     // Inline actions
     if (tool.inlineAction === 'toggle-chrome') {
+      const isHidden = document.documentElement.classList.contains('storyboard-chrome-hidden')
       items.push({
         id: `cfg:${section.id}:${toolId}`,
-        children: label,
+        toolIcon: isHidden ? 'primer/light-bulb' : 'primer/light-bulb',
+        children: <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
+          <span>Hide toolbars</span>
+          <span>{isHidden ? '✓' : ''}</span>
+        </span>,
         keywords: [label, toolId, 'hide', 'show', 'toolbar'].filter(Boolean),
         showType: false,
+        closeOnSelect: entryCloseOnSelect,
         onClick: () => {
           document.documentElement.classList.toggle('storyboard-chrome-hidden')
         },
@@ -543,14 +660,29 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
       continue
     }
 
+    if (tool.inlineAction === 'open-palette') {
+      items.push({
+        id: `cfg:${section.id}:${toolId}`,
+        children: label,
+        keywords: [label, toolId, 'command', 'palette', 'search'].filter(Boolean),
+        showType: false,
+        onClick: () => {
+          document.dispatchEvent(new CustomEvent('storyboard:open-palette'))
+        },
+      })
+      continue
+    }
+
     if (tool.render === 'link' && tool.url) {
+      const resolvedUrl = tool.url.startsWith('/') ? prefix + tool.url : tool.url
       items.push({
         id: `cfg:${section.id}:${toolId}`,
         children: label,
         keywords: [label, toolId].filter(Boolean),
+        url: resolvedUrl,
+        closeOnSelect: entryCloseOnSelect,
         onClick: () => {
-          const url = tool.url.startsWith('/') ? prefix + tool.url : tool.url
-          window.location.href = url
+          window.location.href = resolvedUrl
         },
       })
       continue
@@ -570,6 +702,8 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
             options: children.map(child => ({
               label: child.label,
               execute: child.execute,
+              type: child.type,
+              active: child.active,
             })),
           })
           items.push({
@@ -611,7 +745,7 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
         continue
       }
 
-      // Menu tool without sub-items or options — click toolbar button
+      // Menu tool without sub-items or options — dispatch open event, fall back to clicking toolbar button
       const ariaLabel = tool.ariaLabel || tool.label || toolId
       items.push({
         id: `cfg:${section.id}:${toolId}`,
@@ -620,6 +754,7 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
         showType: false,
         onClick: () => {
           setTimeout(() => {
+            document.dispatchEvent(new CustomEvent(`storyboard:open-${toolId}`))
             const btn = document.querySelector(`[aria-label="${ariaLabel}"]`)
             if (btn) btn.click()
           }, 100)
@@ -634,6 +769,7 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
         id: `cfg:${section.id}:${toolId}`,
         children: label,
         keywords: [label, toolId].filter(Boolean),
+        closeOnSelect: entryCloseOnSelect,
         onClick: () => { if (action) executeAction(action.id) },
       })
       continue
@@ -643,10 +779,24 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
       id: `cfg:${section.id}:${toolId}`,
       children: label,
       keywords: [label, toolId].filter(Boolean),
+      closeOnSelect: entryCloseOnSelect,
       onClick: () => executeAction(toolId),
     })
   }
 
+  // Add toolIcon and toolMeta to all items from their entry
+  const iconByToolId = new Map(entries.map(e => [e.toolId, { icon: e.toolIcon, meta: e.toolMeta }]))
+  for (const item of items) {
+    if (!item.toolIcon) {
+      const match = item.id?.match(/cfg:[^:]+:(.+)/)
+      if (match && iconByToolId.has(match[1])) {
+        const entry = iconByToolId.get(match[1])
+        item.toolIcon = entry.icon
+        if (!item.toolMeta && entry.meta) item.toolMeta = entry.meta
+      }
+    }
+  }
+
   return {
     group: {
       heading: section.title,
@@ -722,10 +872,10 @@ function buildPaletteItems(basePath, onCreateAction, onNavigateToPage) {
   const base = (basePath || '/').replace(/\/+$/, '')
   const prefix = base === '/' ? '' : base
 
-  const { groups, toolMenus } = buildConfigSections(prefix, onNavigateToPage, onCreateAction)
+  const { groups, toolMenus, hiddenFromSearchIds } = buildConfigSections(prefix, onNavigateToPage, onCreateAction)
   const authorIndex = buildAuthorIndex(prefix)
 
-  return { groups, toolMenus, authorIndex }
+  return { groups, toolMenus, authorIndex, hiddenFromSearchIds }
 }
 
 /**
@@ -738,9 +888,29 @@ export default function StoryboardCommandPalette({ basePath }) {
   const [items, setItems] = useState([])
   const [toolMenus, setToolMenus] = useState([])
   const [authorIndex, setAuthorIndex] = useState(new Map())
+  const [hiddenFromSearchIds, setHiddenFromSearchIds] = useState(new Set())
   const [activePage, setActivePage] = useState('root')
   const [createType, setCreateType] = useState(null)
   const [currentTheme, setCurrentTheme] = useState(() => getTheme())
+  const [refreshKey, setRefreshKey] = useState(0)
+
+  // Track modifier keys for link items (cmd/ctrl → new tab, alt → copy link).
+  // Updated from the most recent keyboard/mouse event via a capturing listener
+  // on the document so it fires before cmdk's own handlers.
+  const modifierHeldRef = useRef(false)
+  const altHeldRef = useRef(false)
+  useEffect(() => {
+    const track = (e) => { modifierHeldRef.current = e.metaKey || e.ctrlKey; altHeldRef.current = e.altKey }
+    const reset = () => { modifierHeldRef.current = false; altHeldRef.current = false }
+    document.addEventListener('keydown', track, true)
+    document.addEventListener('keyup', reset, true)
+    document.addEventListener('mousedown', track, true)
+    return () => {
+      document.removeEventListener('keydown', track, true)
+      document.removeEventListener('keyup', reset, true)
+      document.removeEventListener('mousedown', track, true)
+    }
+  }, [])
 
   // Keep currentTheme in sync when theme changes
   useEffect(() => {
@@ -759,43 +929,29 @@ export default function StoryboardCommandPalette({ basePath }) {
     setActivePage(pageId)
   }
 
-  // Listen for Cmd+K directly
-  // The Svelte CoreUIBar also handles Cmd+K by dispatching
-  // 'storyboard:toggle-palette'. We use rAF to detect if Svelte
-  // already fired the toggle event and skip to avoid double-toggle.
+  // Listen for Cmd+K directly to toggle the palette
   useEffect(() => {
-    let toggledByEvent = false
-
-    function handleToggleEvent() {
-      toggledByEvent = true
-    }
-
     function handleKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
         e.preventDefault()
-        toggledByEvent = false
-        requestAnimationFrame(() => {
-          if (toggledByEvent) return
-          const built = buildPaletteItems(basePath, handleCreateAction, handleNavigateToPage)
-          setItems(built.groups)
-          setToolMenus(built.toolMenus)
-          setAuthorIndex(built.authorIndex)
-          setSearch('')
-          setActivePage('root')
-          setOpen(prev => !prev)
-        })
+        const built = buildPaletteItems(basePath, handleCreateAction, handleNavigateToPage)
+        setItems(built.groups)
+        setToolMenus(built.toolMenus)
+        setAuthorIndex(built.authorIndex)
+        setHiddenFromSearchIds(built.hiddenFromSearchIds || new Set())
+        setSearch('')
+        setActivePage('root')
+        setOpen(prev => !prev)
       }
     }
 
-    document.addEventListener('storyboard:toggle-palette', handleToggleEvent)
     document.addEventListener('keydown', handleKeyDown)
     return () => {
-      document.removeEventListener('storyboard:toggle-palette', handleToggleEvent)
       document.removeEventListener('keydown', handleKeyDown)
     }
   }, [basePath])
 
-  // Listen for toggle events from Svelte CoreUIBar
+  // Listen for toggle/open events from toolbar buttons (e.g. CommandPaletteTrigger)
   useEffect(() => {
     function handleToggle() {
       setOpen(prev => {
@@ -806,6 +962,7 @@ export default function StoryboardCommandPalette({ basePath }) {
             setItems(built.groups)
             setToolMenus(built.toolMenus)
             setAuthorIndex(built.authorIndex)
+            setHiddenFromSearchIds(built.hiddenFromSearchIds || new Set())
             setSearch('')
             setActivePage('root')
           }, 0)
@@ -819,6 +976,7 @@ export default function StoryboardCommandPalette({ basePath }) {
       setItems(built.groups)
       setToolMenus(built.toolMenus)
       setAuthorIndex(built.authorIndex)
+      setHiddenFromSearchIds(built.hiddenFromSearchIds || new Set())
       setSearch('')
       setActivePage('root')
       setOpen(true)
@@ -832,12 +990,27 @@ export default function StoryboardCommandPalette({ basePath }) {
     }
   }, [basePath])
 
+  // Rebuild palette items when a toggle is clicked (refreshKey changes)
+  useEffect(() => {
+    if (refreshKey === 0) return
+    const built = buildPaletteItems(basePath, handleCreateAction, handleNavigateToPage)
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setItems(built.groups)
+    setToolMenus(built.toolMenus)
+  }, [refreshKey, basePath])
+
   const handleChangeOpen = useCallback((value) => {
     if (!value) {
+      // Escape from a sub-page goes back to root instead of closing
+      if (activePage !== 'root') {
+        setActivePage('root')
+        setSearch('')
+        return
+      }
       setOpen(false)
       setActivePage('root')
     }
-  }, [])
+  }, [activePage])
 
   // Flatten sub-page options into searchable groups so they appear in root search
   const subPageGroups = useMemo(() => {
@@ -846,12 +1019,13 @@ export default function StoryboardCommandPalette({ basePath }) {
       id: `subpage:${menu.id}`,
       items: (menu.options || []).map((opt, i) => ({
         id: `subpage:${menu.id}:${i}`,
-        children: opt.toolHandler === 'core:theme' && opt.value === currentTheme
-          ? <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}><span>{opt.label}</span><span>✓</span></span>
-          : opt.label,
+        label: opt.label,
+        icon: opt.icon,
+        isToggle: opt.type === 'toggle',
+        isActiveToggle: opt.type === 'toggle' && opt.active,
+        isActiveTheme: opt.toolHandler === 'core:theme' && opt.value === currentTheme,
         keywords: [opt.label, menu.label || menu.id],
-        showType: false,
-        onClick: () => {
+        onSelect: () => {
           if (opt.execute) {
             opt.execute()
           } else if (opt.toolHandler === 'core:theme' && opt.value) {
@@ -859,147 +1033,266 @@ export default function StoryboardCommandPalette({ basePath }) {
           } else if (opt.action) {
             executeAction(opt.action, opt.value)
           }
-          setOpen(false)
-          setActivePage('root')
+          if (opt.type === 'toggle') {
+            setRefreshKey(k => k + 1)
+          } else {
+            setOpen(false)
+            setActivePage('root')
+          }
         },
       })),
     })).filter(g => g.items.length > 0)
-  }, [toolMenus, currentTheme])
-
-  const filteredItems = useMemo(() => {
-    const base = filterItems(items, search)
-    if (!search) return base
-    const matchingSub = filterItems(subPageGroups, search)
-    const result = [...base, ...matchingSub]
-
-    // Author search: match usernames against author index
-    const q = search.toLowerCase()
-    const authorQ = q.startsWith('@') ? q.slice(1) : q
-    for (const [key, { author, items: authorItems }] of authorIndex) {
-      if (!key.includes(authorQ)) continue
-      // Avoid duplicates with already-shown artifact items
-      const shownIds = new Set(result.flatMap(g => g.items.map(i => i.id)))
-      const uniqueItems = authorItems.filter(item => !shownIds.has(`author:${item.id}`))
-      if (uniqueItems.length === 0) continue
-      result.push({
+  }, [toolMenus, currentTheme, refreshKey])
+
+  // Build author groups from the index
+  const authorGroups = useMemo(() => {
+    const groups = []
+    for (const [, { author, items: authorItems }] of authorIndex) {
+      groups.push({
         heading: `Artifacts by @${author}`,
-        id: `author:${key}`,
-        items: uniqueItems.map(item => ({
+        id: `author:${author.toLowerCase()}`,
+        author,
+        items: authorItems.map(item => ({
           id: `author:${item.id}`,
-          children: (
-            <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
-              <span>{item.name}</span>
-              <span style={{ fontSize: '12px', color: 'var(--fgColor-muted, #999)' }}>{item.type}</span>
-            </span>
-          ),
+          label: item.name,
+          type: item.type,
+          url: item.route,
           keywords: [item.name, item.id, item.type, author, `@${author}`],
-          showType: false,
-          onClick: () => {
+          onSelect: () => {
             trackRecent(item.type.toLowerCase(), item.id, item.name)
+            setOpen(false)
+            setActivePage('root')
             window.location.href = item.route
           },
         })),
       })
     }
-
-    return result
-  }, [items, search, subPageGroups, authorIndex])
+    return groups
+  }, [authorIndex])
 
   // Remove consecutive separators and leading/trailing separators
-  const deduplicatedItems = useMemo(() => {
+  const cleanedItems = useMemo(() => {
     const result = []
-    for (const item of filteredItems) {
+    for (const item of items) {
       const isSep = item.id?.startsWith('cfg:sep')
       if (isSep && (result.length === 0 || result[result.length - 1].id?.startsWith('cfg:sep'))) continue
       result.push(item)
     }
-    // Remove trailing separator
     while (result.length > 0 && result[result.length - 1].id?.startsWith('cfg:sep')) result.pop()
     return result
-  }, [filteredItems])
-
-  // Items without separators — used for keyboard navigation indexing
-  const navigableItems = useMemo(
-    () => deduplicatedItems.filter(list => !list.id?.startsWith('cfg:sep')),
-    [deduplicatedItems]
-  )
+  }, [items])
+
+  // Build search value string from keywords array
+  function itemValue(item) {
+    const parts = []
+    if (typeof item.children === 'string') parts.push(item.children)
+    if (item.label) parts.push(item.label)
+    if (item.keywords) parts.push(...item.keywords)
+    return parts.filter(Boolean).join(' ')
+  }
 
-  const handleChangeSearch = useCallback((value) => {
-    setSearch(value)
+  // Custom filter using scoreMatch for better ranking.
+  // scoreMatch tiers: prefix (100) > word-boundary (75) > substring (50) > fuzzy (5-25).
+  // Normalizes to 0-1 for cmdk; weak fuzzy matches (score < 10) are hidden to
+  // prevent garbage results from dominating above exact matches in other groups.
+  const MAX_SCORE = 110
+  const cmdkFilter = useCallback((value, search) => {
+    if (!search) return 1
+    const score = scoreMatch(value, search.toLowerCase().trim())
+    if (score < 10) return 0
+    return Math.min(1, score / MAX_SCORE)
   }, [])
 
+  function showCenterToast(message) {
+    const el = document.createElement('div')
+    Object.assign(el.style, {
+      position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
+      zIndex: '10000', padding: '0.625rem 1rem', borderRadius: '0.5rem',
+      background: 'var(--bgColor-emphasis, #1f2328)', color: 'var(--fgColor-onEmphasis, #fff)',
+      fontSize: '0.8125rem', fontFamily: 'var(--fontStack-sansSerif, system-ui)',
+      opacity: '0', transition: 'opacity 0.15s ease',
+      pointerEvents: 'none',
+    })
+    el.textContent = message
+    document.body.appendChild(el)
+    requestAnimationFrame(() => { el.style.opacity = '1' })
+    setTimeout(() => { el.style.opacity = '0'; setTimeout(() => el.remove(), 200) }, 1800)
+  }
+
+  function copyLinkToClipboard(url, itemType) {
+    const fullUrl = url.startsWith('/') ? window.location.origin + url : url
+    const isCanvasRoute = typeof window !== 'undefined' && window.location.pathname.includes('/canvas/')
+    const isPasteable = itemType === 'prototype' || itemType === 'story'
+    const shouldPaste = isCanvasRoute && isPasteable
+
+    navigator.clipboard.writeText(fullUrl).then(() => {
+      showCenterToast(shouldPaste ? 'Link copied and pasted' : 'Link copied to clipboard')
+    })
+
+    if (shouldPaste) {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:paste-url', { detail: { url: fullUrl } }))
+    }
+  }
+
   return (
     <>
-    <CommandPalette
-      onChangeSearch={handleChangeSearch}
-      onChangeOpen={handleChangeOpen}
-      search={search}
-      isOpen={open}
-      page={activePage}
-      placeholder={activePage === 'root'
-        ? 'Search commands, prototypes, canvases, stories...'
-        : `Search ${toolMenus.find(m => m.id === activePage)?.label || ''}...`
-      }
+    <Command.Dialog
+      open={open}
+      onOpenChange={handleChangeOpen}
+      label="Command Menu"
+      className="command-palette"
+      shouldFilter={activePage === 'root'}
+      filter={cmdkFilter}
+      aria-describedby={undefined}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape' && activePage !== 'root') {
+          e.preventDefault()
+          e.stopPropagation()
+          setActivePage('root')
+          setSearch('')
+        }
+      }}
     >
-      <CommandPalette.Page id="root">
-        {deduplicatedItems.length ? (
-          deduplicatedItems.map((list) => (
-            list.id?.startsWith('cfg:sep') ? (
-              !search && <hr key={list.id} style={{ border: 'none', borderTop: '1px solid var(--borderColor-muted, #e5e5e5)', margin: '4px 14px' }} />
-            ) : (
-              <CommandPalette.List key={list.id} heading={list.heading}>
-                {list.items.map(({ id, ...rest }) => (
-                  <CommandPalette.ListItem
-                    key={id}
-                    index={getItemIndex(navigableItems, id)}
-                    {...rest}
-                  />
+      <VisuallyHidden.Root asChild>
+        <DialogPrimitive.Title>Command Menu</DialogPrimitive.Title>
+      </VisuallyHidden.Root>
+      <DialogPrimitive.Description className="sr-only" style={{ display: 'none' }} />
+      <Command.Input
+        placeholder={activePage === 'root'
+          ? 'Search commands, prototypes, canvases, stories...'
+          : `Search ${toolMenus.find(m => m.id === activePage)?.label || ''}...`
+        }
+        value={search}
+        onValueChange={setSearch}
+      />
+      <Command.List>
+        <Command.Empty>No results found.</Command.Empty>
+
+        {activePage === 'root' ? (
+          <>
+            {/* Sub-page options flattened for root search — rendered first
+                so high-scoring items (e.g. "Copilot CLI" for query "cop")
+                appear above weaker matches in later groups. */}
+            {search && subPageGroups.map(group => (
+              <Command.Group key={group.id} heading={group.heading}>
+                {group.items.map(item => (
+                  <Command.Item
+                    key={item.id}
+                    value={itemValue(item)}
+                    onSelect={item.onSelect}
+                  >
+                    {item.icon && <Icon name={item.icon} size={ICON_SIZE} color="var(--fgColor-muted, #656d76)" />}
+                    <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
+                      <span>{item.label}</span>
+                      {(item.isActiveToggle || item.isActiveTheme) && <span>✓</span>}
+                    </span>
+                  </Command.Item>
                 ))}
-              </CommandPalette.List>
-            )
-          ))
+              </Command.Group>
+            ))}
+
+            {/* Main config-driven groups */}
+            {cleanedItems.map((list) => (
+              list.id?.startsWith('cfg:sep') ? (
+                !search && <Command.Separator key={list.id} />
+              ) : (
+                <Command.Group key={list.id} heading={list.heading}>
+                  {list.items.map(({ id, children, keywords, onClick, itemType, toolIcon, toolMeta, closeOnSelect, hideFromSearch, url }) => {
+                    if (search && hideFromSearch) return null
+                    if (hiddenFromSearchIds.size > 0) {
+                      for (const toolId of hiddenFromSearchIds) {
+                        if (id?.includes(toolId)) return null
+                      }
+                    }
+                    return (
+                      <Command.Item
+                        key={id}
+                        value={itemValue({ children, keywords })}
+                        onSelect={() => {
+                          if (url && altHeldRef.current) {
+                            copyLinkToClipboard(url, itemType)
+                          } else if (url && modifierHeldRef.current) {
+                            window.open(url, '_blank')
+                          } else {
+                            onClick?.()
+                          }
+                          if (closeOnSelect !== false) {
+                            setOpen(false)
+                            setActivePage('root')
+                          }
+                        }}
+                      >
+                        <ItemIcon type={itemType} toolIcon={toolIcon} toolMeta={toolMeta} />
+                        {children}
+                      </Command.Item>
+                    )
+                  })}
+                </Command.Group>
+              )
+            ))}
+
+            {/* Author groups */}
+            {search && authorGroups.map(group => (
+              <Command.Group key={group.id} heading={group.heading}>
+                {group.items.map(item => (
+                  <Command.Item
+                    key={item.id}
+                    value={itemValue(item)}
+                    onSelect={() => {
+                      if (item.url && altHeldRef.current) {
+                        copyLinkToClipboard(item.url, item.type?.toLowerCase())
+                        setOpen(false)
+                        setActivePage('root')
+                      } else if (item.url && modifierHeldRef.current) {
+                        window.open(item.url, '_blank')
+                        setOpen(false)
+                        setActivePage('root')
+                      } else {
+                        item.onSelect()
+                      }
+                    }}
+                  >
+                    <AvatarIcon username={group.author} />
+                    <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
+                      <span>{item.label}</span>
+                      <span style={{ fontSize: '12px', color: 'var(--fgColor-muted, #999)' }}>{item.type}</span>
+                    </span>
+                  </Command.Item>
+                ))}
+              </Command.Group>
+            ))}
+          </>
         ) : (
-          <div style={{ padding: '2rem', textAlign: 'center', color: '#6b7280' }}>
-            No results for &ldquo;{search}&rdquo;
-          </div>
+          /* Tool-menu sub-pages */
+          toolMenus.filter(menu => menu.id === activePage).map(menu => (
+            <Command.Group key={menu.id} heading={menu.title || menu.label || menu.id}>
+              {(menu.options || []).map((opt, i) => (
+                <Command.Item
+                  key={`${menu.id}:${i}`}
+                  value={opt.label}
+                  onSelect={() => {
+                    if (opt.execute) {
+                      opt.execute()
+                    } else if (opt.toolHandler === 'core:theme' && opt.value) {
+                      setTheme(opt.value)
+                    } else if (opt.action) {
+                      executeAction(opt.action, opt.value)
+                    }
+                    setOpen(false)
+                    setActivePage('root')
+                  }}
+                >
+                  {opt.icon && <Icon name={opt.icon} size={ICON_SIZE} color="var(--fgColor-muted, #656d76)" />}
+                  {opt.toolHandler === 'core:theme' && opt.value === currentTheme
+                    ? <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}><span>{opt.label}</span><span>✓</span></span>
+                    : opt.label}
+                </Command.Item>
+              ))}
+            </Command.Group>
+          ))
         )}
-      </CommandPalette.Page>
-
-      {/* Tool-menu sub-pages */}
-      {toolMenus.map(menu => (
-        <CommandPalette.Page
-          key={menu.id}
-          id={menu.id}
-          onEscape={() => { setActivePage('root'); setSearch('') }}
-          searchPrefix={[menu.label || menu.id]}
-        >
-          <CommandPalette.List heading={menu.title || menu.label || menu.id}>
-            {(menu.options || []).map((opt, i) => (
-              <CommandPalette.ListItem
-                key={`${menu.id}:${i}`}
-                index={i}
-                showType={false}
-                onClick={() => {
-                  if (opt.execute) {
-                    opt.execute()
-                  } else if (opt.toolHandler === 'core:theme' && opt.value) {
-                    setTheme(opt.value)
-                  } else if (opt.action) {
-                    executeAction(opt.action, opt.value)
-                  }
-                  setOpen(false)
-                  setActivePage('root')
-                }}
-              >
-                {opt.toolHandler === 'core:theme' && opt.value === currentTheme
-                  ? <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}><span>{opt.label}</span><span>✓</span></span>
-                  : opt.label}
-              </CommandPalette.ListItem>
-            ))}
-          </CommandPalette.List>
-        </CommandPalette.Page>
-      ))}
-    </CommandPalette>
+      </Command.List>
+    </Command.Dialog>
 
     <CreateDialog
       type={createType}