story-kit: start 198_story_distinguish_work_item_types_in_web_ui

.story_kit/work/2_current/198_story_distinguish_work_item_types_in_web_ui.md

@@ -0,0 +1,24 @@
+---
+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