huskies: merge 1088

frontend/src/api/client/types.ts

@@ -241,6 +241,8 @@ export interface WorkItemContent {
 	stage: string;
 	name: string;
 	agent: string | null;
+	/** Origin JSON string (story 1088), or null for pre-origin items. */
+	origin: string | null;
 }
 
 /** Result for a single test case from the server's test runner. */

frontend/src/components/WorkItemDetailPanel.agents.test.tsx

@@ -43,6 +43,7 @@ const DEFAULT_CONTENT = {
 	stage: "current",
 	name: "Big Title Story",
 	agent: null,
+	origin: null,
 };
 
 beforeEach(() => {

frontend/src/components/WorkItemDetailPanel.data.test.tsx

@@ -43,6 +43,7 @@ const DEFAULT_CONTENT = {
 	stage: "current",
 	name: "Big Title Story",
 	agent: null,
+	origin: null,
 };
 
 const sampleTestResults: TestResultsResponse = {

frontend/src/components/WorkItemDetailPanel.test.tsx

@@ -42,6 +42,7 @@ const DEFAULT_CONTENT = {
 	stage: "current",
 	name: "Big Title Story",
 	agent: null,
+	origin: null,
 };
 
 beforeEach(() => {
@@ -127,6 +128,7 @@ describe("WorkItemDetailPanel", () => {
 			stage: "current",
 			name: "My Story Name",
 			agent: null,
+			origin: null,
 		});
 		render(
 			<WorkItemDetailPanel
@@ -146,6 +148,7 @@ describe("WorkItemDetailPanel", () => {
 			stage: "current",
 			name: "My Story Name",
 			agent: null,
+			origin: null,
 		});
 		render(
 			<WorkItemDetailPanel
@@ -164,6 +167,7 @@ describe("WorkItemDetailPanel", () => {
 			stage: "current",
 			name: "My Story Name",
 			agent: null,
+			origin: null,
 		});
 		render(
 			<WorkItemDetailPanel
@@ -186,6 +190,7 @@ describe("WorkItemDetailPanel", () => {
 			stage: "current",
 			name: "My Story Name",
 			agent: null,
+			origin: null,
 		});
 		render(
 			<WorkItemDetailPanel

frontend/src/components/WorkItemDetailPanel.tsx

@@ -20,6 +20,26 @@ import { stripDisplayContent } from "./workItemDetailPanelUtils";
 
 const { useCallback, useEffect, useRef, useState } = React;
 
+/** Parse and format an origin JSON string for display. */
+function formatOrigin(origin: string | null): string {
+	if (!origin) return "unknown";
+	try {
+		const obj = JSON.parse(origin) as {
+			kind?: string;
+			id?: string;
+			ts?: number;
+		};
+		const kind = obj.kind ?? "unknown";
+		const id = obj.id ? ` (${obj.id})` : "";
+		const ts = obj.ts
+			? ` at ${new Date(obj.ts * 1000).toISOString().replace("T", " ").slice(0, 19)}Z`
+			: "";
+		return `${kind}${id}${ts}`;
+	} catch {
+		return origin;
+	}
+}
+
 interface WorkItemDetailPanelProps {
 	storyId: string;
 	pipelineVersion: number;
@@ -38,6 +58,7 @@ export function WorkItemDetailPanel({
 	const [stage, setStage] = useState<string>("");
 	const [name, setName] = useState<string | null>(null);
 	const [assignedAgent, setAssignedAgent] = useState<string | null>(null);
+	const [origin, setOrigin] = useState<string | null>(null);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
 	const [agentInfo, setAgentInfo] = useState<AgentInfo | null>(null);
@@ -63,6 +84,7 @@ export function WorkItemDetailPanel({
 				setStage(data.stage);
 				setName(data.name);
 				setAssignedAgent(data.agent);
+				setOrigin(data.origin);
 			})
 			.catch((err: unknown) => {
 				setError(err instanceof Error ? err.message : "Failed to load content");
@@ -289,6 +311,19 @@ export function WorkItemDetailPanel({
 
 				<TestResultsSection testResults={testResults} />
 
+				{!loading && (
+					<div
+						data-testid="detail-panel-origin"
+						style={{
+							fontSize: "0.75em",
+							color: "#555",
+							fontFamily: "monospace",
+						}}
+					>
+						origin: {formatOrigin(origin)}
+					</div>
+				)}
+
 				<div
 					style={{
 						display: "flex",