create-appraisejs 0.3.1-alpha.0 → 0.4.0-alpha.0

package/templates/starter/src/components/diagram/dynamic-parameters.test.tsx

@@ -26,7 +26,10 @@ const { inlineSaveResult } = vi.hoisted(() => ({
 
 vi.mock('@/app/(base)/locators/create/create-locator-workspace', () => ({
   __esModule: true,
-  default: ({ onSaveSuccess, onClose }: {
+  default: ({
+    onSaveSuccess,
+    onClose,
+  }: {
     onSaveSuccess?: (result: InlineLocatorSaveResult) => void
     onClose?: () => void
   }) => (

package/templates/starter/src/components/diagram/dynamic-parameters.tsx

@@ -80,7 +80,6 @@ function DynamicFormFields({
   onChange,
   initialParameterValues,
 }: DynamicFormFieldsProps & React.RefAttributes<DynamicFormFieldsRef>) {
-
   const resetKey = useMemo(() => {
     return JSON.stringify({
       params: templateStepParams.map(p => ({ name: p.name, type: p.type })),

package/templates/starter/src/components/diagram/flow-diagram-block-dialog.test.tsx

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { FlowDiagramBlockDialog } from './flow-diagram-block-dialog'
+
+describe('FlowDiagramBlockDialog', () => {
+  it('renders the create action with a save icon', () => {
+    render(
+      <FlowDiagramBlockDialog
+        open={true}
+        onOpenChange={vi.fn()}
+        editingBlockId={null}
+        blockName="Login flow"
+        onBlockNameChange={vi.fn()}
+        onSubmit={vi.fn()}
+      />,
+    )
+
+    const createButton = screen.getByRole('button', { name: 'Create' })
+
+    expect(createButton).toBeInTheDocument()
+    expect(createButton.querySelector('svg')).toBeInTheDocument()
+  })
+})

package/templates/starter/src/components/diagram/flow-diagram-block-dialog.tsx

@@ -10,6 +10,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
+import { Save } from 'lucide-react'
 
 type FlowDiagramBlockDialogProps = {
   open: boolean
@@ -47,7 +48,8 @@ export function FlowDiagramBlockDialog({
         />
         <DialogFooter>
           <Button type="button" onClick={onSubmit}>
-            {editingBlockId ? 'Rename' : 'Create'}
+            <Save className="size-4" aria-hidden />
+            <span className="font-bold">{editingBlockId ? 'Rename' : 'Create'}</span>
           </Button>
         </DialogFooter>
       </DialogContent>

package/templates/starter/src/components/diagram/flow-diagram-connection-guards.ts

@@ -1,4 +1,12 @@
-import { addEdge, type Connection, type Edge, type Node, type EdgeChange, type NodeChange, type OnConnect } from '@xyflow/react'
+import {
+  addEdge,
+  type Connection,
+  type Edge,
+  type Node,
+  type EdgeChange,
+  type NodeChange,
+  type OnConnect,
+} from '@xyflow/react'
 import {
   determineStartNodeIds,
   isAddNodePromptNode,
@@ -27,18 +35,24 @@ export function filterBlockedEdgeChanges(
 
   return {
     blockedDeleteIds,
-    allowedChanges: changes.filter(change => change.type !== 'remove' || !change.id || !blockedDeleteIds.has(change.id)),
+    allowedChanges: changes.filter(
+      change => change.type !== 'remove' || !change.id || !blockedDeleteIds.has(change.id),
+    ),
   }
 }
 
 export function filterBlockedNodeChanges(changes: NodeChange[], flowBlockMembership: Map<string, string>) {
   const blockedDeleteIds = new Set(
-    changes.flatMap(change => (change.type === 'remove' && change.id && flowBlockMembership.has(change.id) ? [change.id] : [])),
+    changes.flatMap(change =>
+      change.type === 'remove' && change.id && flowBlockMembership.has(change.id) ? [change.id] : [],
+    ),
   )
 
   return {
     blockedDeleteIds,
-    allowedChanges: changes.filter(change => change.type !== 'remove' || !change.id || !blockedDeleteIds.has(change.id)),
+    allowedChanges: changes.filter(
+      change => change.type !== 'remove' || !change.id || !blockedDeleteIds.has(change.id),
+    ),
   }
 }
 
@@ -92,8 +106,12 @@ export function syncFlowNodePresentationMetadata(
     const isFirstNode = startNodeIds.has(node.id)
     const hasOutgoingConnection = nextEdges.some(edge => edge.source === node.id)
     const currentIsFirstNode = Boolean((node.data as { isFirstNode?: boolean }).isFirstNode)
-    const currentHasOutgoingConnection = Boolean((node.data as { hasOutgoingConnection?: boolean }).hasOutgoingConnection)
-    const currentIsConnectionInProgress = Boolean((node.data as { isConnectionInProgress?: boolean }).isConnectionInProgress)
+    const currentHasOutgoingConnection = Boolean(
+      (node.data as { hasOutgoingConnection?: boolean }).hasOutgoingConnection,
+    )
+    const currentIsConnectionInProgress = Boolean(
+      (node.data as { isConnectionInProgress?: boolean }).isConnectionInProgress,
+    )
     const currentIsSearchHighlighted = Boolean((node.data as { isSearchHighlighted?: boolean }).isSearchHighlighted)
     const isDeleteDisabled = flowBlockMembership.has(node.id)
     const currentIsDeleteDisabled = Boolean((node.data as { isDeleteDisabled?: boolean }).isDeleteDisabled)

package/templates/starter/src/components/diagram/flow-diagram-helpers.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest'
 
 import {
   buildFlowNodeData,
+  buildNodeFormData,
   createAddNodePromptNode,
   determineNodeOrders,
   determineStartNodeIds,
@@ -119,6 +120,32 @@ describe('flow-diagram helpers', () => {
     expect(nodeData.isMissingParams).toBe(true)
   })
 
+  it('clears missing parameter state when mandatory values are supplied', () => {
+    const nodeData = buildNodeFormData(
+      {
+        label: 'Step',
+        gherkinStep: 'Given step',
+        parameters: [{ name: 'locator', value: 'Submit', type: StepParameterType.STRING, order: 1 }],
+        templateStepId: 'step-1',
+      },
+      [],
+      [
+        {
+          id: 'param-1',
+          name: 'locator',
+          type: StepParameterType.STRING,
+          order: 1,
+          isMandatory: true,
+          templateStepId: 'step-1',
+        } as never,
+      ],
+      false,
+      false,
+    )
+
+    expect(nodeData.isMissingParams).toBeUndefined()
+  })
+
   it('recomputes node orders and isolated nodes correctly', () => {
     const orders = determineNodeOrders(
       [

package/templates/starter/src/components/diagram/flow-diagram-node-search.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { RefObject } from 'react'
+import type { ReactNode, RefObject } from 'react'
 import { Search, X } from 'lucide-react'
 import { AnimatePresence, LazyMotion, domAnimation } from 'motion/react'
 import * as motion from 'motion/react-m'
@@ -23,6 +23,7 @@ type FlowDiagramNodeSearchProps = {
   onSearchQueryChange: (value: string) => void
   onToggleSearch: () => void
   onSelectResult: (nodeId: string) => void
+  shortcutHint: ReactNode
 }
 
 export function FlowDiagramNodeSearch({
@@ -34,75 +35,81 @@ export function FlowDiagramNodeSearch({
   onSearchQueryChange,
   onToggleSearch,
   onSelectResult,
+  shortcutHint,
 }: FlowDiagramNodeSearchProps) {
   return (
     <LazyMotion features={domAnimation} strict>
-    <div className="relative flex items-start gap-2" data-node-search-root="true">
-      <AnimatePresence>
-        {isSearchOpen ? (
-          <motion.div
-            className="flex flex-col items-end"
-            initial={{ opacity: 0, x: 14, scale: 0.98 }}
-            animate={{ opacity: 1, x: 0, scale: 1 }}
-            exit={{ opacity: 0, x: 14, scale: 0.98 }}
-            transition={{ duration: 0.18, ease: 'easeOut' }}
-          >
-            <Input
-              ref={searchInputRef}
-              aria-label="Search nodes"
-              value={searchQuery}
-              onChange={event => onSearchQueryChange(event.target.value)}
-              placeholder="Search labels..."
-              className="border-border/70 bg-background/95 h-9 w-56 shadow-md backdrop-blur"
-            />
-            <AnimatePresence>
-              {shouldShowSearchSuggestions ? (
-                <motion.div
-                  className="border-border/70 mt-2 w-64 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-xl"
-                  initial={{ opacity: 0, y: -6 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -6 }}
-                  transition={{ duration: 0.16, ease: 'easeOut' }}
-                >
-                  {nodeSearchResults.length > 0 ? (
-                    <div className="max-h-64 overflow-y-auto py-1">
-                      {nodeSearchResults.map(result => (
-                        <button
-                          key={result.id}
-                          type="button"
-                          className="block w-full px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:outline-none"
-                          onClick={() => onSelectResult(result.id)}
-                        >
-                          {result.label}
-                        </button>
-                      ))}
-                    </div>
-                  ) : (
-                    <div className="px-3 py-2 text-sm text-muted-foreground">No matching labels</div>
-                  )}
-                </motion.div>
-              ) : null}
-            </AnimatePresence>
-          </motion.div>
-        ) : null}
-      </AnimatePresence>
-      <TooltipProvider delayDuration={0}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              onClick={onToggleSearch}
-              aria-label={isSearchOpen ? 'Close node search' : 'Search nodes'}
+      <div className="relative flex items-start gap-2" data-node-search-root="true">
+        <AnimatePresence>
+          {isSearchOpen ? (
+            <motion.div
+              className="flex flex-col items-end"
+              initial={{ opacity: 0, x: 14, scale: 0.98 }}
+              animate={{ opacity: 1, x: 0, scale: 1 }}
+              exit={{ opacity: 0, x: 14, scale: 0.98 }}
+              transition={{ duration: 0.18, ease: 'easeOut' }}
             >
-              {isSearchOpen ? <X /> : <Search />}
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">{isSearchOpen ? 'Close search' : 'Search nodes'}</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
+              <Input
+                ref={searchInputRef}
+                aria-label="Search nodes"
+                value={searchQuery}
+                onChange={event => onSearchQueryChange(event.target.value)}
+                placeholder="Search labels..."
+                className="border-border/70 bg-background/95 h-9 w-56 shadow-md backdrop-blur"
+              />
+              <AnimatePresence>
+                {shouldShowSearchSuggestions ? (
+                  <motion.div
+                    className="border-border/70 mt-2 w-64 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-xl"
+                    initial={{ opacity: 0, y: -6 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -6 }}
+                    transition={{ duration: 0.16, ease: 'easeOut' }}
+                  >
+                    {nodeSearchResults.length > 0 ? (
+                      <div className="max-h-64 overflow-y-auto py-1">
+                        {nodeSearchResults.map(result => (
+                          <button
+                            key={result.id}
+                            type="button"
+                            className="block w-full px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:outline-none"
+                            onClick={() => onSelectResult(result.id)}
+                          >
+                            {result.label}
+                          </button>
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="px-3 py-2 text-sm text-muted-foreground">No matching labels</div>
+                    )}
+                  </motion.div>
+                ) : null}
+              </AnimatePresence>
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                onClick={onToggleSearch}
+                aria-label={isSearchOpen ? 'Close node search' : 'Search nodes'}
+              >
+                {isSearchOpen ? <X /> : <Search />}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <div className="flex items-center gap-2">
+                <span>{isSearchOpen ? 'Close search' : 'Search nodes'}</span>
+                {shortcutHint}
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
     </LazyMotion>
   )
 }

package/templates/starter/src/components/diagram/flow-diagram-toolbar.tsx

@@ -1,9 +1,10 @@
 'use client'
 
-import type { RefObject } from 'react'
+import { useEffect, useState, type RefObject } from 'react'
 import { Boxes, MousePointer2, Plus } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
+import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { FlowDiagramNodeSearch } from './flow-diagram-node-search'
 import type { FlowNodeSearchResult } from './flow-diagram-node-search'
@@ -24,6 +25,31 @@ type FlowDiagramToolbarProps = {
   onOpenAddNodeDialog: () => void
 }
 
+function ShortcutHint({ shortcutKey }: { shortcutKey: string }) {
+  const [isMac, setIsMac] = useState(false)
+
+  useEffect(() => {
+    queueMicrotask(() => setIsMac(navigator.userAgent.toLowerCase().includes('mac')))
+  }, [])
+
+  return (
+    <KbdGroup>
+      <Kbd>{isMac ? '⌘' : 'Ctrl'}</Kbd>
+      <Kbd>Shift</Kbd>
+      <Kbd>{shortcutKey}</Kbd>
+    </KbdGroup>
+  )
+}
+
+function TooltipWithShortcut({ label, shortcutKey }: { label: string; shortcutKey: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span>{label}</span>
+      <ShortcutHint shortcutKey={shortcutKey} />
+    </div>
+  )
+}
+
 export function FlowDiagramToolbar({
   enableNodeSearch,
   enableNodeGrouping,
@@ -51,6 +77,7 @@ export function FlowDiagramToolbar({
           onSearchQueryChange={onSearchQueryChange}
           onToggleSearch={onToggleSearch}
           onSelectResult={onSearchResultSelect}
+          shortcutHint={<ShortcutHint shortcutKey="S" />}
         />
       ) : null}
       {enableNodeGrouping ? (
@@ -68,7 +95,10 @@ export function FlowDiagramToolbar({
               </Button>
             </TooltipTrigger>
             <TooltipContent side="bottom">
-              {isGroupingSelectionMode ? 'Selection mode' : 'Create block'}
+              <TooltipWithShortcut
+                label={isGroupingSelectionMode ? 'Selection mode' : 'Create block'}
+                shortcutKey="B"
+              />
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
@@ -80,7 +110,9 @@ export function FlowDiagramToolbar({
               <Plus />
             </Button>
           </TooltipTrigger>
-          <TooltipContent side="bottom">Add Node</TooltipContent>
+          <TooltipContent side="bottom">
+            <TooltipWithShortcut label="Add Node" shortcutKey="C" />
+          </TooltipContent>
         </Tooltip>
       </TooltipProvider>
     </div>

package/templates/starter/src/components/diagram/flow-diagram-view.tsx

@@ -2,13 +2,7 @@
 
 /* eslint-disable react-hooks/refs -- The composite view model forwards refs without reading `.current` during render. */
 
-import {
-  Background,
-  ConnectionMode,
-  Controls,
-  ReactFlow,
-  type DefaultEdgeOptions,
-} from '@xyflow/react'
+import { Background, ConnectionMode, Controls, ReactFlow, type DefaultEdgeOptions } from '@xyflow/react'
 import { FlowDiagramBlockDialog } from './flow-diagram-block-dialog'
 import { FlowDiagramBlockOverlays } from './flow-diagram-block-overlays'
 import { FlowDiagramGroupingHints } from './flow-diagram-grouping-hints'

package/templates/starter/src/components/diagram/flow-diagram.test.tsx

@@ -149,6 +149,32 @@ function renderFlowDiagram(enableNodeSearch = true) {
   )
 }
 
+function renderInteractiveFlowDiagram() {
+  return render(
+    <FlowDiagram
+      {...requiredProps}
+      enableNodeSearch
+      enableNodeGrouping
+      nodeOrder={{
+        'node-1': {
+          order: 1,
+          label: 'Open Checkout',
+          gherkinStep: 'Given cart page',
+          parameters: [],
+          templateStepId: 'step-1',
+        },
+        'node-2': {
+          order: 2,
+          label: 'Submit Payment',
+          gherkinStep: 'When payment is submitted',
+          parameters: [],
+          templateStepId: 'step-2',
+        },
+      }}
+    />,
+  )
+}
+
 describe('FlowDiagram node search', () => {
   beforeEach(() => {
     xyflowMocks.setCenter.mockClear()
@@ -301,6 +327,205 @@ describe('FlowDiagram node search', () => {
   })
 })
 
+describe('FlowDiagram keyboard shortcuts', () => {
+  beforeEach(() => {
+    xyflowMocks.setCenter.mockClear()
+    xyflowMocks.updateNodeInternals.mockClear()
+  })
+
+  it('handles shortcuts while the flow builder page is mounted', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+
+    expect(await screen.findByRole('textbox', { name: /search nodes/i })).toBeInTheDocument()
+  })
+
+  it('opens and focuses search', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+
+    const searchInput = await screen.findByRole('textbox', { name: /search nodes/i })
+    await waitFor(() => {
+      expect(searchInput).toHaveFocus()
+    })
+  })
+
+  it('toggles search closed when the shortcut is pressed again', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+    expect(await screen.findByRole('textbox', { name: /search nodes/i })).toBeInTheDocument()
+
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+
+    await waitFor(() => {
+      expect(screen.queryByRole('textbox', { name: /search nodes/i })).not.toBeInTheDocument()
+    })
+  })
+
+  it('supports macOS-style meta search shortcuts', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Meta>}{Shift>}s{/Shift}{/Meta}')
+
+    expect(await screen.findByRole('textbox', { name: /search nodes/i })).toBeInTheDocument()
+  })
+
+  it('toggles block selection mode when grouping is enabled', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}b{/Shift}{/Control}')
+
+    expect(screen.getByRole('button', { name: /exit block selection mode/i })).toBeInTheDocument()
+
+    await user.keyboard('{Control>}{Shift>}b{/Shift}{/Control}')
+
+    expect(screen.getByRole('button', { name: /select nodes for block/i })).toBeInTheDocument()
+  })
+
+  it('toggles the add-node sheet', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}c{/Shift}{/Control}')
+
+    expect(screen.getByRole('dialog')).toHaveTextContent('Node form add')
+
+    await user.keyboard('{Control>}{Shift>}c{/Shift}{/Control}')
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('switches from the add-node sheet to block selection mode', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.click(screen.getByRole('button', { name: 'Add Node' }))
+    await user.keyboard('{Control>}{Shift>}b{/Shift}{/Control}')
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /exit block selection mode/i })).toBeInTheDocument()
+  })
+
+  it('switches from search to the add-node sheet', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+    expect(await screen.findByRole('textbox', { name: /search nodes/i })).toBeInTheDocument()
+
+    await user.keyboard('{Control>}{Shift>}c{/Shift}{/Control}')
+
+    await waitFor(() => {
+      expect(screen.queryByRole('textbox', { name: /search nodes/i })).not.toBeInTheDocument()
+    })
+    expect(screen.getByRole('dialog')).toHaveTextContent('Node form add')
+  })
+
+  it('switches from the add-node sheet to search', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}c{/Shift}{/Control}')
+    expect(screen.getByRole('dialog')).toHaveTextContent('Node form add')
+
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(await screen.findByRole('textbox', { name: /search nodes/i })).toBeInTheDocument()
+  })
+
+  it('switches from block selection mode to the add-node sheet', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}b{/Shift}{/Control}')
+    expect(screen.getByRole('button', { name: /exit block selection mode/i })).toBeInTheDocument()
+
+    await user.keyboard('{Control>}{Shift>}c{/Shift}{/Control}')
+
+    expect(screen.getByRole('button', { name: /select nodes for block/i })).toBeInTheDocument()
+    expect(screen.getByRole('dialog')).toHaveTextContent('Node form add')
+  })
+
+  it('ignores shortcuts while the block dialog is open', async () => {
+    const user = userEvent.setup()
+    render(
+      <FlowDiagram
+        {...requiredProps}
+        enableNodeSearch
+        enableNodeGrouping
+        nodeOrder={{
+          'node-1': {
+            order: 1,
+            label: 'Open Checkout',
+            gherkinStep: 'Given cart page',
+            parameters: [],
+            templateStepId: 'step-1',
+          },
+          'node-2': {
+            order: 2,
+            label: 'Submit Payment',
+            gherkinStep: 'When payment is submitted',
+            parameters: [],
+            templateStepId: 'step-2',
+          },
+        }}
+      />,
+    )
+
+    await user.keyboard('{Control>}{Shift>}b{/Shift}{/Control}')
+    await user.click(screen.getByRole('button', { name: /select all flow nodes/i }))
+    await user.click(screen.getByRole('button', { name: /^create block$/i }))
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.queryByRole('textbox', { name: /search nodes/i })).not.toBeInTheDocument()
+  })
+
+  it('switches from focused search input to the add-node sheet', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.click(screen.getByRole('button', { name: /search nodes/i }))
+    await user.click(screen.getByRole('textbox', { name: /search nodes/i }))
+    await user.keyboard('{Control>}{Shift>}c{/Shift}{/Control}')
+
+    await waitFor(() => {
+      expect(screen.queryByRole('textbox', { name: /search nodes/i })).not.toBeInTheDocument()
+    })
+    expect(screen.getByRole('dialog')).toHaveTextContent('Node form add')
+  })
+
+  it('shows shortcut hints in toolbar tooltips', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.hover(screen.getByRole('button', { name: /search nodes/i }))
+    expect((await screen.findAllByText('Search nodes')).length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Ctrl').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Shift').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('S').length).toBeGreaterThan(0)
+
+    await user.unhover(screen.getByRole('button', { name: /search nodes/i }))
+    await user.hover(screen.getByRole('button', { name: /select nodes for block/i }))
+    expect((await screen.findAllByText('Create block')).length).toBeGreaterThan(0)
+    expect(screen.getAllByText('B').length).toBeGreaterThan(0)
+
+    await user.unhover(screen.getByRole('button', { name: /select nodes for block/i }))
+    await user.hover(screen.getByRole('button', { name: 'Add Node' }))
+    expect((await screen.findAllByText('Add Node')).length).toBeGreaterThan(0)
+    expect(screen.getAllByText('C').length).toBeGreaterThan(0)
+  })
+})
+
 describe('FlowDiagram node grouping', () => {
   it('keeps the main add-node action available after a block exists', async () => {
     const user = userEvent.setup()

package/templates/starter/src/components/diagram/flow-node-data-helpers.ts

@@ -117,6 +117,6 @@ export function buildNodeFormData(
     ...formData,
     icon,
     isFirstNode,
-    isMissingParams,
+    isMissingParams: isMissingParams ? (true as const) : undefined,
   }
 }