<!-- source-hash: 1c7447069bb7b63321514a5ef06052ac -->
Storybook stories for the `SlashCommandSuggestions` chat autocomplete component, providing visual test cases for the `/`-triggered command dropdown used in the Flamingo/OpenFrame chat interface.

## Key Components

### Stories

| Story | Description |
|-------|-------------|
| `Default` | Full command list with the first row statically highlighted |
| `Interactive` | Live hover-driven highlight via `useState`, mimics keyboard navigation |
| `FilteredSingle` | Single result row, simulates typing `/road` to filter |
| `NoActions` | Hides action chips when `onAction` is `undefined`, row becomes click-only |

### Sample Data (`SAMPLE_COMMANDS`)

14 `SlashCommandSummary` entries covering all production `/api/docs/commands` sources: ClickUp (`roadmap`, `delivery`), GitHub (`commits`, `pull-requests`, `pr-reviews`), Slack (`slack`), and OpenFrame content types (`docs`, `blogs`, `releases`, `case-studies`, `getting-started`, `webinars`, `events`, `podcasts`). Each entry includes `iconName` keys wired to the `resolveOnboardingIcon` registry.

## Usage Example

```typescript
// Render the interactive story manually outside Storybook
import { SlashCommandSuggestions } from '../components/chat/slash-command-suggestions'
import { useState } from 'react'

export function Demo() {
  const [idx, setIdx] = useState(0)

  return (
    <SlashCommandSuggestions
      commands={SAMPLE_COMMANDS}
      highlightedIdx={idx}
      onHover={setIdx}
      onSelect={(cmd) => console.log('selected:', cmd.id)}
      onAction={(cmd, actionId) => console.log('action:', cmd.id, actionId)}
    />
  )
}
```

The decorator wraps every story in a `640px` container with a mock chat input row below, replicating the `absolute bottom-full` anchor behavior of the real `ChatInput` component.