bridges-cli 0.0.1 → 0.1.0

package/src/components/HashiRow.tsx

@@ -1,94 +1,82 @@
 import { Box, Text } from 'ink'
+import type React from 'react'
 
-import type { HashiNodeData } from '../types.ts'
-import { NODE_WIDTH, OUTER_PADDING, SPACE_BETWEEN } from './HashiGrid.tsx'
+import type { HashiNodeData, SelectionState } from '../types.ts'
+import {
+    constructNode,
+    getDisplayMode,
+    NODE_WIDTH,
+    OUTER_PADDING,
+    ROW_HEIGHT,
+    SPACE_BETWEEN,
+} from '../utils/bridges.ts'
 
 type HashiRowProps = {
     nodes: HashiNodeData[]
+    highlightedNode?: number
+    rowIndex: number
+    selectionState?: SelectionState
 }
 
-const TOP_ROW = 0
-const MIDDLE_ROW = 1
-const BOTTOM_ROW = 2
-const ROW_HEIGHT = 3
-
-/**
- * Build the HashiGrid node with its value and borders. Options:
- *   - node with a value (always 1 digit)
- *   - empty node - render just spaces
- *   - horizontal line - single and double
- *   - vertical line - single and double
- */
-export function constructNode(node: HashiNodeData, line: 0 | 1 | 2): string {
-    // Horizontal line
-    if (node.value === '-') {
-        return line === MIDDLE_ROW ? '─────' : ' '.repeat(NODE_WIDTH)
-    }
-
-    // Double horizontal line
-    if (node.value === '=') {
-        return line === MIDDLE_ROW ? '═════' : ' '.repeat(NODE_WIDTH)
-    }
-
-    // Vertical line
-    if (node.value === '|') {
-        return '  │  '
-    }
-
-    // Double vertical line
-    if (node.value === '#') {
-        return '  ║  '
-    }
+export default function HashiRow({
+    nodes,
+    highlightedNode,
+    rowIndex,
+    selectionState,
+}: HashiRowProps) {
+    // Each row consists of multiple lines of terminal output
+    const lines: React.ReactNode[] = []
 
-    // Node with value to render
-    if (node.value !== ' ') {
-        if (line === TOP_ROW) {
-            const up = node.lineUp === 2 ? '╨' : node.lineUp === 1 ? '┴' : '─'
-            return `╭─${up}─╮`
-        } else if (line === MIDDLE_ROW) {
-            const left = node.lineLeft === 2 ? '╡' : node.lineLeft === 1 ? '┤' : '│'
-            const right = node.lineRight === 2 ? '╞' : node.lineRight === 1 ? '├' : '│'
-            return `${left} ${node.value} ${right}`
-        } else if (line === BOTTOM_ROW) {
-            const down = node.lineDown === 2 ? '╥' : node.lineDown === 1 ? '┬' : '─'
-            return `╰─${down}─╯`
+    // Build a map of col index to disambiguation label for this row
+    const disambiguationMap: Record<number, string> = {}
+    if (selectionState?.mode === 'disambiguation' && selectionState.matchingNodes) {
+        for (let i = 0; i < selectionState.matchingNodes.length; i++) {
+            const match = selectionState.matchingNodes[i]
+            const label = selectionState.disambiguationLabels[i]
+            if (match && match.row === rowIndex) {
+                disambiguationMap[match.col] = label ?? ''
+            }
         }
     }
 
-    // Empty node
-    return ' '.repeat(NODE_WIDTH)
-}
-
-export default function HashiRow({ nodes }: HashiRowProps) {
-    // Each row consists of multiple lines of terminal output
-    const lines: string[] = []
     for (let line = 0; line < ROW_HEIGHT; line++) {
-        let rowStr = ' '.repeat(OUTER_PADDING)
+        const rowItems: React.ReactNode[] = []
 
         // Render each node into the terminal line output
         for (let i = 0; i < nodes.length; i++) {
             const node = nodes[i]
+
             if (!node) {
-                rowStr += ' '.repeat(NODE_WIDTH)
+                rowItems.push(' '.repeat(NODE_WIDTH))
                 continue
             }
 
-            rowStr += constructNode(node, line as 0 | 1 | 2)
+            const displayMode = getDisplayMode(
+                node,
+                highlightedNode,
+                rowIndex,
+                i,
+                selectionState?.selectedNode ?? null,
+                selectionState?.mode
+            )
+            const label = disambiguationMap[i]
+            rowItems.push(constructNode(node, line as 0 | 1 | 2, displayMode, label))
 
             // Add space between columns except the last
             if (i < nodes.length - 1) {
-                rowStr += ' '.repeat(SPACE_BETWEEN)
+                rowItems.push(' '.repeat(SPACE_BETWEEN))
             }
         }
-        rowStr += ' '.repeat(OUTER_PADDING)
-        lines.push(rowStr)
+
+        const rowStr = (
+            <>
+                {' '.repeat(OUTER_PADDING)}
+                {rowItems}
+                {' '.repeat(OUTER_PADDING)}
+            </>
+        )
+        lines.push(<Text key={line}>{rowStr}</Text>)
     }
 
-    return (
-        <Box flexDirection="column">
-            {lines.map((line, i) => (
-                <Text key={i}>{line}</Text>
-            ))}
-        </Box>
-    )
+    return <Box flexDirection="column">{lines}</Box>
 }

package/src/components/Header.tsx

@@ -1,10 +1,22 @@
 import { Box, Text } from 'ink'
 
+import type { SelectionState } from '../types.ts'
+
 type HeaderProps = {
     puzzleIndex: number
     puzzle: string
     isCustomPuzzle?: boolean
     showSolution?: boolean
+    selectionState?: SelectionState
+    minNumber?: number
+    maxNumber?: number
+}
+
+const directionNames: Record<string, string> = {
+    h: 'left',
+    j: 'down',
+    k: 'up',
+    l: 'right',
 }
 
 export default function Header({
@@ -12,14 +24,48 @@ export default function Header({
     puzzle,
     isCustomPuzzle = false,
     showSolution = false,
+    selectionState,
+    minNumber,
+    maxNumber,
 }: HeaderProps) {
     const title = isCustomPuzzle
         ? `Bridges: Puzzle - ${puzzle}`
-        : `Bridges: Puzzle #${puzzleIndex + 1}${showSolution ? ' (Solution)' : ''}`
+        : `Bridges: Puzzle #${puzzleIndex + 1}`
+
+    let statusText = ''
+    if (selectionState) {
+        const { mode, selectedNumber, direction, bridgeErased, isDoubleBridge } = selectionState
+        if (mode === 'selecting-node' && selectedNumber !== null) {
+            statusText = 'Select direction with h/j/k/l (H/J/K/L = double line)'
+        } else if (mode === 'disambiguation' && selectedNumber !== null) {
+            statusText = 'Press label shown to select that node'
+        } else if (mode === 'selected' && selectedNumber !== null && direction) {
+            if (bridgeErased) {
+                statusText = 'Erased bridge'
+            } else {
+                const lineType = direction === 'h' || direction === 'l' ? 'horizontal' : 'vertical'
+                const bridgeType = isDoubleBridge ? 'double ' : ''
+                statusText = `Drew ${bridgeType}${lineType} bridge`
+            }
+        } else if (mode === 'invalid' && selectedNumber !== null && direction) {
+            statusText = `Cannot draw bridge ${directionNames[direction]} from node`
+        }
+    }
+
+    const idleMessage = showSolution
+        ? 'Viewing solution (press s to return to puzzle)'
+        : minNumber !== undefined && maxNumber !== undefined
+          ? `Type a number [${minNumber}-${maxNumber}] to select a node`
+          : 'Type a number to select a node'
 
     return (
-        <Box marginBottom={1}>
+        <Box flexDirection="column" marginBottom={1}>
             <Text bold>{title}</Text>
+            {statusText ? (
+                <Text dimColor>• {statusText}</Text>
+            ) : (
+                <Text dimColor>• {idleMessage}</Text>
+            )}
         </Box>
     )
 }

package/src/components/Messages.tsx

@@ -1,27 +1,34 @@
 import { Box, Text } from 'ink'
 
+import type { SelectionState } from '../types.ts'
+
 type LegendItem = {
     key: string
     description: string
     disabled?: boolean
 }
 
-const LEGEND_ITEMS = (hasSolution: boolean): LegendItem[] => [
-    { key: 'p', description: 'Previous puzzle' },
-    { key: 'n', description: 'Next puzzle' },
-    { key: 's', description: 'Show solution', disabled: !hasSolution },
-    { key: 'q', description: 'Quit' },
-]
+export function legendItems(hasSolution: boolean, isSelecting: boolean): LegendItem[] {
+    return [
+        { key: 'p', description: 'Previous puzzle', disabled: isSelecting },
+        { key: 'n', description: 'Next puzzle', disabled: isSelecting },
+        { key: 's', description: 'Show solution', disabled: isSelecting || !hasSolution },
+        { key: 'q', description: 'Quit' },
+    ]
+}
 
 type MessagesProps = {
     hasSolution?: boolean
+    selectionState?: SelectionState
 }
 
-export default function Messages({ hasSolution = false }: MessagesProps) {
+export default function Messages({ hasSolution = false, selectionState }: MessagesProps) {
+    const isSelecting = selectionState !== undefined && selectionState.mode !== 'idle'
+
     return (
         <Box flexDirection="column" marginTop={1}>
             <Text bold>Controls:</Text>
-            {LEGEND_ITEMS(hasSolution).map(item => (
+            {legendItems(hasSolution, isSelecting).map(item => (
                 <Box key={item.key}>
                     <Text bold color={item.disabled ? 'gray' : undefined}>
                         {item.key}

package/src/components/__tests__/HashiGrid.test.tsx

@@ -19,6 +19,7 @@ describe('HashiGrid', () => {
 
         expect(lastFrame()).toEqual(
             `Bridges: Puzzle #1
+• Type a number to select a node
 
 ┌───────────────────────────┐
 │ ╭───╮     ╭───╮           │

package/src/components/__tests__/HashiRow.test.tsx

@@ -1,119 +1,12 @@
 import { render } from 'ink-testing-library'
 import { describe, expect, it } from 'vitest'
-
-import type { HashiNodeData } from '../../types.ts'
-import HashiRow, { constructNode } from '../HashiRow.tsx'
-
-describe('constructNode()', () => {
-    describe('empty node', () => {
-        it('renders space value with no lines', () => {
-            const node: HashiNodeData = { value: ' ' }
-            expect(constructNode(node, 0)).toEqual('     ')
-            expect(constructNode(node, 1)).toEqual('     ')
-            expect(constructNode(node, 2)).toEqual('     ')
-        })
-    })
-
-    describe('horizontal line node', () => {
-        it('renders a horizontal line in the middle', () => {
-            const node: HashiNodeData = { value: '-' }
-            expect(constructNode(node, 0)).toEqual('     ')
-            expect(constructNode(node, 1)).toEqual('─────')
-            expect(constructNode(node, 2)).toEqual('     ')
-        })
-
-        it('renders a double horizontal line in the middle', () => {
-            const node: HashiNodeData = { value: '=' }
-            expect(constructNode(node, 0)).toEqual('     ')
-            expect(constructNode(node, 1)).toEqual('═════')
-            expect(constructNode(node, 2)).toEqual('     ')
-        })
-    })
-
-    describe('vertical line node', () => {
-        it('renders a vertical line in the center', () => {
-            const node: HashiNodeData = { value: '|' }
-            expect(constructNode(node, 0)).toEqual('  │  ')
-            expect(constructNode(node, 1)).toEqual('  │  ')
-            expect(constructNode(node, 2)).toEqual('  │  ')
-        })
-
-        it('renders a double vertical line in the center', () => {
-            const node: HashiNodeData = { value: '#' }
-            expect(constructNode(node, 0)).toEqual('  ║  ')
-            expect(constructNode(node, 1)).toEqual('  ║  ')
-            expect(constructNode(node, 2)).toEqual('  ║  ')
-        })
-    })
-
-    describe('node with value', () => {
-        describe('TOP_ROW', () => {
-            it('renders top border', () => {
-                const node: HashiNodeData = { value: 5 }
-                expect(constructNode(node, 0)).toEqual('╭───╮')
-            })
-
-            it('renders border with vertical line up', () => {
-                const node: HashiNodeData = { value: 5, lineUp: 1 }
-                expect(constructNode(node, 0)).toEqual('╭─┴─╮')
-            })
-
-            it('renders border with double vertical line up', () => {
-                const node: HashiNodeData = { value: 5, lineUp: 2 }
-                expect(constructNode(node, 0)).toEqual('╭─╨─╮')
-            })
-        })
-
-        describe('MIDDLE_ROW', () => {
-            it('renders middle row - value with vertical borders', () => {
-                const node: HashiNodeData = { value: 5 }
-                expect(constructNode(node, 1)).toEqual('│ 5 │')
-            })
-
-            it('renders value with horizontal line on left', () => {
-                const node: HashiNodeData = { value: 5, lineLeft: 1 }
-                expect(constructNode(node, 1)).toEqual('┤ 5 │')
-            })
-
-            it('renders value with horizontal line on right', () => {
-                const node: HashiNodeData = { value: 5, lineRight: 1 }
-                expect(constructNode(node, 1)).toEqual('│ 5 ├')
-            })
-
-            it('renders value with horizontal lines on both sides', () => {
-                const node: HashiNodeData = { value: 5, lineLeft: 1, lineRight: 1 }
-                expect(constructNode(node, 1)).toEqual('┤ 5 ├')
-            })
-
-            it('renders value with double horizontal lines on both sides', () => {
-                const node: HashiNodeData = { value: 5, lineLeft: 2, lineRight: 2 }
-                expect(constructNode(node, 1)).toEqual('╡ 5 ╞')
-            })
-        })
-
-        describe('BOTTOM_ROW', () => {
-            it('renders bottom border without lines', () => {
-                const node: HashiNodeData = { value: 5 }
-                expect(constructNode(node, 2)).toEqual('╰───╯')
-            })
-
-            it('renders border with vertical line down', () => {
-                const node: HashiNodeData = { value: 5, lineDown: 1 }
-                expect(constructNode(node, 2)).toEqual('╰─┬─╯')
-            })
-
-            it('renders border with double vertical line down', () => {
-                const node: HashiNodeData = { value: 5, lineDown: 2 }
-                expect(constructNode(node, 2)).toEqual('╰─╥─╯')
-            })
-        })
-    })
-})
+import HashiRow from '../../components/HashiRow.tsx'
+import type { SelectionState } from '../../types.ts'
 
 describe('HashiRow component', () => {
     it('renders three nodes', () => {
         const { lastFrame } = render(
-            <HashiRow nodes={[{ value: 1 }, { value: 2 }, { value: 3 }]} />
+            <HashiRow nodes={[{ value: 1 }, { value: 2 }, { value: 3 }]} rowIndex={0} />
         )
         expect(lastFrame()).toEqual(
             ` ╭───╮╭───╮╭───╮
@@ -126,6 +19,7 @@ describe('HashiRow component', () => {
         const { lastFrame } = render(
             <HashiRow
                 nodes={[{ value: 1, lineRight: 1 }, { value: '-' }, { value: 3, lineLeft: 1 }]}
+                rowIndex={0}
             />
         )
         expect(lastFrame()).toEqual(` ╭───╮     ╭───╮
@@ -135,7 +29,7 @@ describe('HashiRow component', () => {
 
     it('renders a vertical node', () => {
         const { lastFrame } = render(
-            <HashiRow nodes={[{ value: 1 }, { value: '|' }, { value: 3 }]} />
+            <HashiRow nodes={[{ value: 1 }, { value: '|' }, { value: 3 }]} rowIndex={0} />
         )
         expect(lastFrame()).toEqual(` ╭───╮  │  ╭───╮
  │ 1 │  │  │ 3 │
@@ -144,7 +38,7 @@ describe('HashiRow component', () => {
 
     it('renders empty positions as spaces', () => {
         const { lastFrame } = render(
-            <HashiRow nodes={[{ value: 1 }, { value: ' ' }, { value: 3 }]} />
+            <HashiRow nodes={[{ value: 1 }, { value: ' ' }, { value: 3 }]} rowIndex={0} />
         )
         expect(lastFrame()).toEqual(
             ` ╭───╮     ╭───╮
@@ -152,4 +46,98 @@ describe('HashiRow component', () => {
  ╰───╯     ╰───╯`
         )
     })
+
+    describe('highlighted nodes', () => {
+        it('renders highlighted node with bold when value matches', () => {
+            const { lastFrame } = render(
+                <HashiRow nodes={[{ value: 1 }]} rowIndex={0} highlightedNode={1} />
+            )
+            expect(lastFrame()).toEqual(
+                ` \x1b[1m╭───╮\x1b[22m
+ \x1b[1m│ 1 │\x1b[22m
+ \x1b[1m╰───╯\x1b[22m`
+            )
+        })
+
+        it('renders dimmed node when value does not match', () => {
+            const { lastFrame } = render(
+                <HashiRow nodes={[{ value: 1 }]} rowIndex={0} highlightedNode={2} />
+            )
+            expect(lastFrame()).toEqual(
+                ` \x1b[2m╭───╮\x1b[22m
+ \x1b[2m│ 1 │\x1b[22m
+ \x1b[2m╰───╯\x1b[22m`
+            )
+        })
+
+        it('renders multiple nodes with one highlighted and others dimmed', () => {
+            const { lastFrame } = render(
+                <HashiRow
+                    nodes={[{ value: 1 }, { value: 2 }, { value: 3 }]}
+                    rowIndex={0}
+                    highlightedNode={2}
+                />
+            )
+            expect(lastFrame()).toEqual(
+                ` \x1b[2m╭───╮\x1b[22m\x1b[1m╭───╮\x1b[22m\x1b[2m╭───╮\x1b[22m
+ \x1b[2m│ 1 │\x1b[22m\x1b[1m│ 2 │\x1b[22m\x1b[2m│ 3 │\x1b[22m
+ \x1b[2m╰───╯\x1b[22m\x1b[1m╰───╯\x1b[22m\x1b[2m╰───╯\x1b[22m`
+            )
+        })
+
+        it('renders normal when highlightedNode is undefined', () => {
+            const { lastFrame } = render(<HashiRow nodes={[{ value: 1 }]} rowIndex={0} />)
+            expect(lastFrame()).toEqual(
+                ` ╭───╮
+ │ 1 │
+ ╰───╯`
+            )
+        })
+
+        it('highlights only specific node in selecting-node mode', () => {
+            const selectionState: SelectionState = {
+                mode: 'selecting-node',
+                selectedNumber: 1,
+                direction: null,
+                matchingNodes: [{ row: 0, col: 1 }],
+                disambiguationLabels: [],
+                selectedNode: { row: 0, col: 1 },
+            }
+            const { lastFrame } = render(
+                <HashiRow
+                    nodes={[{ value: 1 }, { value: 1 }, { value: 1 }]}
+                    rowIndex={0}
+                    selectionState={selectionState}
+                />
+            )
+            expect(lastFrame()).toEqual(
+                ` \x1b[2m╭───╮\x1b[22m\x1b[1m╭───╮\x1b[22m\x1b[2m╭───╮\x1b[22m
+ \x1b[2m│ 1 │\x1b[22m\x1b[1m│ 1 │\x1b[22m\x1b[2m│ 1 │\x1b[22m
+ \x1b[2m╰───╯\x1b[22m\x1b[1m╰───╯\x1b[22m\x1b[2m╰───╯\x1b[22m`
+            )
+        })
+
+        it('dims non-selected nodes in invalid mode but keeps selected highlighted', () => {
+            const selectionState: SelectionState = {
+                mode: 'invalid',
+                selectedNumber: 1,
+                direction: 'h',
+                matchingNodes: [{ row: 0, col: 1 }],
+                disambiguationLabels: [],
+                selectedNode: { row: 0, col: 1 },
+            }
+            const { lastFrame } = render(
+                <HashiRow
+                    nodes={[{ value: 1 }, { value: 1 }, { value: 1 }]}
+                    rowIndex={0}
+                    selectionState={selectionState}
+                />
+            )
+            expect(lastFrame()).toEqual(
+                ` \x1b[2m╭───╮\x1b[22m\x1b[1m╭───╮\x1b[22m\x1b[2m╭───╮\x1b[22m
+ \x1b[2m│ 1 │\x1b[22m\x1b[1m│ 1 │\x1b[22m\x1b[2m│ 1 │\x1b[22m
+ \x1b[2m╰───╯\x1b[22m\x1b[1m╰───╯\x1b[22m\x1b[2m╰───╯\x1b[22m`
+            )
+        })
+    })
 })

package/src/components/__tests__/Header.test.tsx

@@ -0,0 +1,156 @@
+import { render } from 'ink-testing-library'
+import { describe, expect, it } from 'vitest'
+import type { SelectionState } from '../../types.ts'
+import Header from '../Header.tsx'
+
+describe('Header', () => {
+    it('shows idle message when no selection state and no number range', () => {
+        const { lastFrame } = render(<Header puzzleIndex={0} puzzle="5x5:1a1" />)
+        expect(lastFrame()).toContain('Type a number to select a node')
+    })
+
+    it('shows dynamic number range when provided', () => {
+        const { lastFrame } = render(
+            <Header puzzleIndex={0} puzzle="5x5:1a1" minNumber={2} maxNumber={7} />
+        )
+        expect(lastFrame()).toContain('Type a number [2-7] to select a node')
+    })
+
+    describe('selection state messages', () => {
+        it('shows "select direction" message after we disambiguate which node', () => {
+            const selectionState: SelectionState = {
+                mode: 'selecting-node',
+                selectedNumber: 1,
+                direction: null,
+                matchingNodes: [
+                    { row: 0, col: 0 },
+                    { row: 1, col: 1 },
+                ],
+                disambiguationLabels: [],
+                selectedNode: { row: 0, col: 0 },
+            }
+            const { lastFrame } = render(
+                <Header puzzleIndex={0} puzzle="5x5:1a1" selectionState={selectionState} />
+            )
+            expect(lastFrame()).toContain(`Select direction with`)
+        })
+
+        it('shows disambiguation message without direction', () => {
+            const selectionState: SelectionState = {
+                mode: 'disambiguation',
+                selectedNumber: 1,
+                direction: null,
+                matchingNodes: [
+                    { row: 0, col: 0 },
+                    { row: 1, col: 2 },
+                ],
+                disambiguationLabels: ['a', 'b'],
+                selectedNode: null,
+            }
+            const { lastFrame } = render(
+                <Header puzzleIndex={0} puzzle="5x5:1a1" selectionState={selectionState} />
+            )
+            expect(lastFrame()).toContain('Press label shown to select that node')
+        })
+
+        it('shows disambiguation message with direction', () => {
+            const selectionState: SelectionState = {
+                mode: 'disambiguation',
+                selectedNumber: 1,
+                direction: 'h',
+                matchingNodes: [
+                    { row: 0, col: 0 },
+                    { row: 1, col: 2 },
+                ],
+                disambiguationLabels: ['a', 'b'],
+                selectedNode: null,
+            }
+            const { lastFrame } = render(
+                <Header puzzleIndex={0} puzzle="5x5:1a1" selectionState={selectionState} />
+            )
+            expect(lastFrame()).toContain('Press label shown to select that node')
+        })
+
+        it('shows selected message with direction (horizontal)', () => {
+            const selectionState: SelectionState = {
+                mode: 'selected',
+                selectedNumber: 1,
+                direction: 'l',
+                matchingNodes: [{ row: 0, col: 0 }],
+                disambiguationLabels: [],
+                selectedNode: { row: 0, col: 0 },
+            }
+            const { lastFrame } = render(
+                <Header puzzleIndex={0} puzzle="5x5:1a1" selectionState={selectionState} />
+            )
+            expect(lastFrame()).toContain('Drew horizontal bridge')
+        })
+
+        it('shows selected message with direction (vertical)', () => {
+            const selectionState: SelectionState = {
+                mode: 'selected',
+                selectedNumber: 1,
+                direction: 'k',
+                matchingNodes: [{ row: 0, col: 0 }],
+                disambiguationLabels: [],
+                selectedNode: { row: 0, col: 0 },
+            }
+            const { lastFrame } = render(
+                <Header puzzleIndex={0} puzzle="5x5:1a1" selectionState={selectionState} />
+            )
+            expect(lastFrame()).toContain('Drew vertical bridge')
+        })
+
+        it('shows erased bridge message when bridgeErased is true', () => {
+            const selectionState: SelectionState = {
+                mode: 'selected',
+                selectedNumber: 1,
+                direction: 'l',
+                matchingNodes: [{ row: 0, col: 0 }],
+                disambiguationLabels: [],
+                selectedNode: { row: 0, col: 0 },
+                bridgeErased: true,
+            }
+            const { lastFrame } = render(
+                <Header puzzleIndex={0} puzzle="5x5:1a1" selectionState={selectionState} />
+            )
+            expect(lastFrame()).toContain('Erased bridge')
+        })
+
+        it('shows invalid message when no node in direction', () => {
+            const selectionState: SelectionState = {
+                mode: 'invalid',
+                selectedNumber: 1,
+                direction: 'h',
+                matchingNodes: [{ row: 0, col: 0 }],
+                disambiguationLabels: [],
+                selectedNode: { row: 0, col: 0 },
+            }
+            const { lastFrame } = render(
+                <Header puzzleIndex={0} puzzle="5x5:1a1" selectionState={selectionState} />
+            )
+            expect(lastFrame()).toContain('Cannot draw bridge left from node')
+        })
+    })
+
+    describe('puzzle display', () => {
+        it('shows puzzle number for indexed puzzles', () => {
+            const { lastFrame } = render(<Header puzzleIndex={2} puzzle="5x5:1a1" />)
+            expect(lastFrame()).toContain('Bridges: Puzzle #3')
+        })
+
+        it('shows solution suffix when showSolution is true', () => {
+            const { lastFrame } = render(
+                <Header puzzleIndex={0} puzzle="5x5:1a1" showSolution={true} />
+            )
+            expect(lastFrame()).toContain('Viewing solution (press s to return to puzzle)')
+        })
+
+        it('shows custom puzzle label for custom puzzles', () => {
+            const { lastFrame } = render(
+                <Header puzzleIndex={0} puzzle="5x5:1a1" isCustomPuzzle={true} />
+            )
+            expect(lastFrame()).toContain('Bridges: Puzzle - 5x5:1a1')
+        })
+    })
+})