---
name: "Distinguish work item types in web UI"
---

# Story 198: Distinguish work item types in web UI

## User Story

As a project operator using the web UI, I want to visually distinguish between stories, bugs, and spikes in the pipeline board, so that I can quickly scan the board and understand what type of work is in each lane.

## Acceptance Criteria

- [ ] Work items display a visual indicator (e.g. icon, badge, or color) distinguishing stories, bugs, and spikes
- [ ] The item type is derived from the filename prefix/convention (e.g. `story_`, `bug_`, `spike_`)
- [ ] The type indicator is visible in all pipeline columns (upcoming, current, QA, merge, done)
- [ ] Each card in `StagePanel.tsx` has a 3px colored left border: green (#3fb950) for stories, red (#f85149) for bugs, blue (#58a6ff) for spikes
- [ ] Each card displays a small uppercase text badge (STORY, BUG, SPIKE) next to the #ID, colored to match the left border
- [ ] Item type is parsed from the story_id field by matching the segment after the numeric prefix (N_story_..., N_bug_..., N_spike_...)
- [ ] Items with an unrecognised type prefix get a neutral border and no badge
- [ ] No backend changes — type is derived purely from the existing story_id on the frontend

## Out of Scope

- TBD
