feat(frontend): filter the session-start playbook picker by category

[sourcehawk]

Description

The single playbook select at session start listed every playbook as one long unwrapped id — symptom line with no grouping. It is now two selects side by side: a Category select over the playbook types (investigation first, then alphabetical) that filters the Playbook select next to it. Native <option> elements can't render two lines, so the category description and the chosen playbook's symptom render as wrapping helper text under each select rather than inside the list.

Changes

• Category select ("All categories" + each type) filters the Playbook select; picking a playbook snaps the category to its type, and switching to a category that no longer contains the chosen playbook clears it back to the guided default.
• Type descriptions from GET /api/playbook-types render under the Category select; the chosen playbook's symptom (or description) renders under the Playbook select. Both wrap inside a max-w-2xl grid.
• groupPlaybooks in lib/playbook-select.ts owns the grouping and description lookup, so the form only renders.

Testing

Unit tests cover the grouping helper (order, description lookup, unknown types) and the form (category filtering, description rendering, category snap on pick, reset on category switch). Full frontend vitest suite passes (241 tests) and npm run typecheck is clean. Worth poking at in the browser: the picker with a type that has no description, and a catalog where every playbook shares one type.

🤖 Generated with Claude Code

https://claude.ai/code/session_017UzTvd2zctxr2LYid6SucC

[Copilot]

🟢 Approval recommended

The grouping/filtering logic is self-contained, aligns with the stated behavior in the PR description, and is covered by targeted unit/UI tests.

Pull request overview

This PR improves the session-start playbook picker UX in the embedded Next.js frontend by introducing a category (“type”) selector that filters the playbook selector, while still keeping the underlying catalog rules (locked/disabled/broken filtering and investigation-first ordering) centralized in frontend/lib.

Changes:

• Added groupPlaybooks() helper to bucket selectable playbooks by type and attach type descriptions from GET /api/playbook-types.
• Updated InvestigationForm to render side-by-side Category and Playbook selects, with wrapping helper text for the selected category and playbook.
• Added unit tests covering grouping/description behavior and the form’s category filtering + snap/reset interactions.

File summaries

File	Description
frontend/lib/playbook-select.ts	Introduces PlaybookGroup + groupPlaybooks() to group selectable playbooks and decorate them with type descriptions.
frontend/lib/playbook-select.test.ts	Adds tests for grouping order, description lookup, and unknown type handling.
frontend/components/investigations/InvestigationForm.tsx	Replaces the single playbook select with a Category + Playbook picker driven by groupPlaybooks().
frontend/components/investigations/InvestigationForm.test.tsx	Adds UI tests for category filtering, description rendering, category snap-on-playbook-pick, and reset on category switch.

Review details

• Files reviewed: 4/4 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🟢 Approval recommended

The changes are cohesive, match the stated behavior in the PR description, and include targeted tests for both the helper and the updated form interactions.

Review details

• Files reviewed: 4/4 changed files
• Comments generated: 0 new
• Review effort level: Lite