story-kit: merge 224_story_expand_work_item_to_full_screen_detail_view

frontend/src/components/Chat.tsx

@@ -13,6 +13,7 @@ import { ChatInput } from "./ChatInput";
 import { LozengeFlyProvider } from "./LozengeFlyContext";
 import { MessageItem } from "./MessageItem";
 import { StagePanel } from "./StagePanel";
+import { WorkItemDetailPanel } from "./WorkItemDetailPanel";
 
 const { useCallback, useEffect, useMemo, useRef, useState } = React;
 
@@ -189,6 +190,9 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 	const [agentStateVersion, setAgentStateVersion] = useState(0);
 	const [needsOnboarding, setNeedsOnboarding] = useState(false);
 	const onboardingTriggeredRef = useRef(false);
+	const [selectedWorkItemId, setSelectedWorkItemId] = useState<string | null>(
+		null,
+	);
 	const [queuedMessages, setQueuedMessages] = useState<
 		{ id: string; text: string }[]
 	>([]);
@@ -879,16 +883,45 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 					}}
 				>
 					<LozengeFlyProvider pipeline={pipeline}>
-						<AgentPanel
-							configVersion={agentConfigVersion}
-							stateVersion={agentStateVersion}
-						/>
+						{selectedWorkItemId ? (
+							<WorkItemDetailPanel
+								storyId={selectedWorkItemId}
+								onClose={() => setSelectedWorkItemId(null)}
+							/>
+						) : (
+							<>
+								<AgentPanel
+									configVersion={agentConfigVersion}
+									stateVersion={agentStateVersion}
+								/>
 
-						<StagePanel title="Done" items={pipeline.done ?? []} />
-						<StagePanel title="To Merge" items={pipeline.merge} />
-						<StagePanel title="QA" items={pipeline.qa} />
-						<StagePanel title="Current" items={pipeline.current} />
-						<StagePanel title="Upcoming" items={pipeline.upcoming} />
+								<StagePanel
+									title="Done"
+									items={pipeline.done ?? []}
+									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
+								/>
+								<StagePanel
+									title="To Merge"
+									items={pipeline.merge}
+									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
+								/>
+								<StagePanel
+									title="QA"
+									items={pipeline.qa}
+									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
+								/>
+								<StagePanel
+									title="Current"
+									items={pipeline.current}
+									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
+								/>
+								<StagePanel
+									title="Upcoming"
+									items={pipeline.upcoming}
+									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
+								/>
+							</>
+						)}
 					</LozengeFlyProvider>
 				</div>
 			</div>