<!-- source-hash: f40f70a6039dee228c17777e9753c266 -->
Storybook stories for the `TimeTracker` feature, providing interactive demos of the time tracker panel and header button across all status states, along with a full playground with simulated server-side ticket search.

## Key Components

- **`useTimeTrackerHost`** — Custom React hook that simulates the OpenFrame frontend backend: manages timer state transitions (`ready` → `tracking` → `paused`), ticket search (sync or async with 350ms debounce), and entry persistence
- **`HeaderBar`** — Mock app header strip used to correctly anchor the `TimeTrackerHeaderButton` popover
- **Panel Stories** — `PanelReady`, `PanelTracking`, `PanelPaused`, `PanelFinishGate`, `PanelNoEntries`
- **Header Button Stories** — `HeaderButtonIdle`, `HeaderButtonTracking`, `HeaderButtonPaused`
- **`Playground`** — Fully interactive story combining provider, header button, and async ticket search

## Usage Example

```typescript
// Minimal host setup for a custom story
function MyStory() {
  const host = useTimeTrackerHost({
    status: 'tracking',
    runningSince: Date.now() - 30_000,
    selectedTicketId: 'TICK-102',
    serverSearch: true, // enables async ticket filtering
  })

  return (
    <TimeTrackerProvider {...host}>
      <HeaderBar />
      <TimeTrackerPanel {...host} onClose={() => {}} />
    </TimeTrackerProvider>
  )
}
```

The `HostInit` interface accepts `status`, `runningSince`, `accumulatedMs`, `selectedTicketId`, `notes`, `lastEntries`, and `serverSearch` to seed each story's initial state. `formatDuration` and `formatDate` are used internally to format submitted entries.

**Source:** [`TimeTracker.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/TimeTracker.stories.tsx)