story-kit: merge 300_story_show_token_cost_badge_on_pipeline_board_work_items

frontend/src/components/Chat.tsx

@@ -202,6 +202,9 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 	const [agentConfigVersion, setAgentConfigVersion] = useState(0);
 	const [agentStateVersion, setAgentStateVersion] = useState(0);
 	const [pipelineVersion, setPipelineVersion] = useState(0);
+	const [storyTokenCosts, setStoryTokenCosts] = useState<Map<string, number>>(
+		new Map(),
+	);
 	const [needsOnboarding, setNeedsOnboarding] = useState(false);
 	const onboardingTriggeredRef = useRef(false);
 	const [selectedWorkItemId, setSelectedWorkItemId] = useState<string | null>(
@@ -363,6 +366,29 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 			onPipelineState: (state) => {
 				setPipeline(state);
 				setPipelineVersion((v) => v + 1);
+				const allItems = [
+					...state.backlog,
+					...state.current,
+					...state.qa,
+					...state.merge,
+					...state.done,
+				];
+				for (const item of allItems) {
+					api
+						.getTokenCost(item.story_id)
+						.then((cost) => {
+							if (cost.total_cost_usd > 0) {
+								setStoryTokenCosts((prev) => {
+									const next = new Map(prev);
+									next.set(item.story_id, cost.total_cost_usd);
+									return next;
+								});
+							}
+						})
+						.catch(() => {
+							// Silently ignore — cost data may not exist yet.
+						});
+				}
 			},
 			onPermissionRequest: (requestId, toolName, toolInput) => {
 				setPermissionQueue((prev) => [
@@ -1005,26 +1031,31 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 								<StagePanel
 									title="Done"
 									items={pipeline.done ?? []}
+									costs={storyTokenCosts}
 									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
 								/>
 								<StagePanel
 									title="To Merge"
 									items={pipeline.merge}
+									costs={storyTokenCosts}
 									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
 								/>
 								<StagePanel
 									title="QA"
 									items={pipeline.qa}
+									costs={storyTokenCosts}
 									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
 								/>
 								<StagePanel
 									title="Current"
 									items={pipeline.current}
+									costs={storyTokenCosts}
 									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
 								/>
 								<StagePanel
 									title="Backlog"
 									items={pipeline.backlog}
+									costs={storyTokenCosts}
 									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
 								/>
 								<ServerLogsPanel logs={serverLogs} />