huskies: merge 715_refactor_decompose_frontend_src_components_workitemdetailpanel_tsx_827_lines
This commit is contained in:
dave
@@ -0,0 +1,112 @@
|
||||
/** Agent logs card sub-component for WorkItemDetailPanel. */
|
||||
|
||||
import type { AgentInfo, AgentStatusValue } from "../api/agents";
|
||||
import { STATUS_COLORS } from "./workItemDetailPanelUtils";
|
||||
|
||||
interface AgentLogsSectionProps {
|
||||
agentInfo: AgentInfo | null;
|
||||
agentStatus: AgentStatusValue | null;
|
||||
agentLog: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the "Agent Logs" card when an agent is active, or a placeholder
|
||||
* when no agent is assigned to the story.
|
||||
*/
|
||||
export function AgentLogsSection({
|
||||
agentInfo,
|
||||
agentStatus,
|
||||
agentLog,
|
||||
}: AgentLogsSectionProps) {
|
||||
if (!agentInfo) {
|
||||
return (
|
||||
<div
|
||||
data-testid="placeholder-agent-logs"
|
||||
style={{
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 12px",
|
||||
background: "#161616",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.8em",
|
||||
color: "#555",
|
||||
marginBottom: "4px",
|
||||
}}
|
||||
>
|
||||
Agent Logs
|
||||
</div>
|
||||
<div style={{ fontSize: "0.75em", color: "#444" }}>Coming soon</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="agent-logs-section"
|
||||
style={{
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 12px",
|
||||
background: "#161616",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "6px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.8em",
|
||||
color: "#888",
|
||||
}}
|
||||
>
|
||||
Agent Logs
|
||||
</div>
|
||||
{agentStatus && (
|
||||
<div
|
||||
data-testid="agent-status-badge"
|
||||
style={{
|
||||
fontSize: "0.7em",
|
||||
color: STATUS_COLORS[agentStatus],
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{agentInfo.agent_name} — {agentStatus}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{agentLog.length > 0 ? (
|
||||
<div
|
||||
data-testid="agent-log-output"
|
||||
style={{
|
||||
fontSize: "0.75em",
|
||||
fontFamily: "monospace",
|
||||
color: "#ccc",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
lineHeight: "1.5",
|
||||
maxHeight: "200px",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
{agentLog.join("")}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ fontSize: "0.75em", color: "#444" }}>
|
||||
{agentStatus === "running" || agentStatus === "pending"
|
||||
? "Waiting for output..."
|
||||
: "No output."}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
/** Test results card sub-components for WorkItemDetailPanel. */
|
||||
|
||||
import type { TestCaseResult, TestResultsResponse } from "../api/client";
|
||||
|
||||
function TestCaseRow({ tc }: { tc: TestCaseResult }) {
|
||||
const isPassing = tc.status === "pass";
|
||||
return (
|
||||
<div
|
||||
data-testid={`test-case-${tc.name}`}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "2px",
|
||||
padding: "4px 0",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
|
||||
<span
|
||||
data-testid={`test-status-${tc.name}`}
|
||||
style={{
|
||||
fontSize: "0.85em",
|
||||
color: isPassing ? "#3fb950" : "#f85149",
|
||||
}}
|
||||
>
|
||||
{isPassing ? "PASS" : "FAIL"}
|
||||
</span>
|
||||
<span style={{ fontSize: "0.82em", color: "#ccc" }}>{tc.name}</span>
|
||||
</div>
|
||||
{tc.details && (
|
||||
<div
|
||||
data-testid={`test-details-${tc.name}`}
|
||||
style={{
|
||||
fontSize: "0.75em",
|
||||
color: "#888",
|
||||
paddingLeft: "22px",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{tc.details}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TestSection({
|
||||
title,
|
||||
tests,
|
||||
testId,
|
||||
}: {
|
||||
title: string;
|
||||
tests: TestCaseResult[];
|
||||
testId: string;
|
||||
}) {
|
||||
const passCount = tests.filter((t) => t.status === "pass").length;
|
||||
const failCount = tests.length - passCount;
|
||||
return (
|
||||
<div data-testid={testId}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.78em",
|
||||
fontWeight: 600,
|
||||
color: "#aaa",
|
||||
marginBottom: "6px",
|
||||
}}
|
||||
>
|
||||
{title} ({passCount} passed, {failCount} failed)
|
||||
</div>
|
||||
{tests.length === 0 ? (
|
||||
<div style={{ fontSize: "0.75em", color: "#555", fontStyle: "italic" }}>
|
||||
No tests recorded
|
||||
</div>
|
||||
) : (
|
||||
tests.map((tc) => <TestCaseRow key={tc.name} tc={tc} />)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Renders the "Test Results" card in the detail panel. */
|
||||
export function TestResultsSection({
|
||||
testResults,
|
||||
}: {
|
||||
testResults: TestResultsResponse | null;
|
||||
}) {
|
||||
const hasTestResults =
|
||||
testResults &&
|
||||
(testResults.unit.length > 0 || testResults.integration.length > 0);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="test-results-section"
|
||||
style={{
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 12px",
|
||||
background: "#161616",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.8em",
|
||||
color: "#555",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
Test Results
|
||||
</div>
|
||||
{hasTestResults ? (
|
||||
<div
|
||||
data-testid="test-results-content"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "12px",
|
||||
}}
|
||||
>
|
||||
<TestSection
|
||||
title="Unit Tests"
|
||||
tests={testResults.unit}
|
||||
testId="test-section-unit"
|
||||
/>
|
||||
<TestSection
|
||||
title="Integration Tests"
|
||||
tests={testResults.integration}
|
||||
testId="test-section-integration"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
data-testid="test-results-empty"
|
||||
style={{ fontSize: "0.75em", color: "#444" }}
|
||||
>
|
||||
No test results recorded
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
/** Token cost card sub-component for WorkItemDetailPanel. */
|
||||
|
||||
import type { AgentCostEntry, TokenCostResponse } from "../api/client";
|
||||
|
||||
/** Renders the "Token Cost" card in the detail panel. */
|
||||
export function TokenCostSection({
|
||||
tokenCost,
|
||||
}: {
|
||||
tokenCost: TokenCostResponse | null;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-testid="token-cost-section"
|
||||
style={{
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 12px",
|
||||
background: "#161616",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.8em",
|
||||
color: "#555",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
Token Cost
|
||||
</div>
|
||||
{tokenCost && tokenCost.agents.length > 0 ? (
|
||||
<div data-testid="token-cost-content">
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.75em",
|
||||
color: "#888",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
Total:{" "}
|
||||
<span data-testid="token-cost-total" style={{ color: "#ccc" }}>
|
||||
${tokenCost.total_cost_usd.toFixed(6)}
|
||||
</span>
|
||||
</div>
|
||||
{tokenCost.agents.map((agent: AgentCostEntry) => (
|
||||
<div
|
||||
key={agent.agent_name}
|
||||
data-testid={`token-cost-agent-${agent.agent_name}`}
|
||||
style={{
|
||||
fontSize: "0.75em",
|
||||
color: "#888",
|
||||
padding: "4px 0",
|
||||
borderTop: "1px solid #222",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "2px",
|
||||
}}
|
||||
>
|
||||
<span style={{ color: "#ccc", fontWeight: 600 }}>
|
||||
{agent.agent_name}
|
||||
{agent.model ? (
|
||||
<span
|
||||
style={{ color: "#666", fontWeight: 400 }}
|
||||
>{` (${agent.model})`}</span>
|
||||
) : null}
|
||||
</span>
|
||||
<span style={{ color: "#aaa" }}>
|
||||
${agent.total_cost_usd.toFixed(6)}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ color: "#555" }}>
|
||||
in {agent.input_tokens.toLocaleString()} / out{" "}
|
||||
{agent.output_tokens.toLocaleString()}
|
||||
{(agent.cache_creation_input_tokens > 0 ||
|
||||
agent.cache_read_input_tokens > 0) && (
|
||||
<>
|
||||
{" "}
|
||||
/ cache +
|
||||
{agent.cache_creation_input_tokens.toLocaleString()}{" "}
|
||||
read {agent.cache_read_input_tokens.toLocaleString()}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
data-testid="token-cost-empty"
|
||||
style={{ fontSize: "0.75em", color: "#444" }}
|
||||
>
|
||||
No token data recorded
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -8,71 +8,18 @@ import type {
|
||||
} from "../api/agents";
|
||||
import { agentsApi, subscribeAgentStream } from "../api/agents";
|
||||
import type {
|
||||
AgentCostEntry,
|
||||
TestCaseResult,
|
||||
TestResultsResponse,
|
||||
TokenCostResponse,
|
||||
} from "../api/client";
|
||||
import { api } from "../api/client";
|
||||
import { AgentLogsSection } from "./AgentLogsSection";
|
||||
import { TestResultsSection } from "./TestResultsSection";
|
||||
import { TokenCostSection } from "./TokenCostSection";
|
||||
import { WorkItemDetailPanelHeader } from "./WorkItemDetailPanelHeader";
|
||||
import { stripDisplayContent } from "./workItemDetailPanelUtils";
|
||||
|
||||
const { useCallback, useEffect, useRef, useState } = React;
|
||||
|
||||
/**
|
||||
* Strip YAML front matter and the first H1 heading from story content before
|
||||
* rendering. The panel header already shows the story ID/title, so rendering
|
||||
* them again inside the markdown body creates duplicate information.
|
||||
*/
|
||||
function stripDisplayContent(content: string): string {
|
||||
let text = content;
|
||||
// Strip YAML front matter (--- ... ---)
|
||||
if (text.startsWith("---")) {
|
||||
const eol = text.indexOf("\n");
|
||||
if (eol !== -1) {
|
||||
const closeIdx = text.indexOf("\n---", eol);
|
||||
if (closeIdx !== -1) {
|
||||
text = text.slice(closeIdx + 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Trim leading blank lines left by the front matter
|
||||
text = text.trimStart();
|
||||
// Strip the first H1 heading — it duplicates the panel header title
|
||||
if (text.startsWith("# ")) {
|
||||
const eol = text.indexOf("\n");
|
||||
text = eol !== -1 ? text.slice(eol + 1).trimStart() : "";
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format the story ID/title line shown in the panel header.
|
||||
* Produces e.g. "Story 454: My Story Name" or "Bug 12: Crash on startup".
|
||||
* Falls back to name or storyId when the pattern doesn't match.
|
||||
*/
|
||||
function formatStoryTitle(storyId: string, name: string | null): string {
|
||||
const match = storyId.match(/^(\d+)_([a-z]+)_/);
|
||||
if (!match || !name) return name ?? storyId;
|
||||
const [, number, type] = match;
|
||||
const typeLabel = type.charAt(0).toUpperCase() + type.slice(1);
|
||||
return `${typeLabel} ${number}: ${name}`;
|
||||
}
|
||||
|
||||
const STAGE_LABELS: Record<string, string> = {
|
||||
backlog: "Backlog",
|
||||
current: "Current",
|
||||
qa: "QA",
|
||||
merge: "To Merge",
|
||||
done: "Done",
|
||||
archived: "Archived",
|
||||
};
|
||||
|
||||
const STATUS_COLORS: Record<AgentStatusValue, string> = {
|
||||
running: "#3fb950",
|
||||
pending: "#e3b341",
|
||||
completed: "#aaa",
|
||||
failed: "#f85149",
|
||||
};
|
||||
|
||||
interface WorkItemDetailPanelProps {
|
||||
storyId: string;
|
||||
pipelineVersion: number;
|
||||
@@ -81,82 +28,6 @@ interface WorkItemDetailPanelProps {
|
||||
reviewHold?: boolean;
|
||||
}
|
||||
|
||||
function TestCaseRow({ tc }: { tc: TestCaseResult }) {
|
||||
const isPassing = tc.status === "pass";
|
||||
return (
|
||||
<div
|
||||
data-testid={`test-case-${tc.name}`}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "2px",
|
||||
padding: "4px 0",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
|
||||
<span
|
||||
data-testid={`test-status-${tc.name}`}
|
||||
style={{
|
||||
fontSize: "0.85em",
|
||||
color: isPassing ? "#3fb950" : "#f85149",
|
||||
}}
|
||||
>
|
||||
{isPassing ? "PASS" : "FAIL"}
|
||||
</span>
|
||||
<span style={{ fontSize: "0.82em", color: "#ccc" }}>{tc.name}</span>
|
||||
</div>
|
||||
{tc.details && (
|
||||
<div
|
||||
data-testid={`test-details-${tc.name}`}
|
||||
style={{
|
||||
fontSize: "0.75em",
|
||||
color: "#888",
|
||||
paddingLeft: "22px",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{tc.details}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TestSection({
|
||||
title,
|
||||
tests,
|
||||
testId,
|
||||
}: {
|
||||
title: string;
|
||||
tests: TestCaseResult[];
|
||||
testId: string;
|
||||
}) {
|
||||
const passCount = tests.filter((t) => t.status === "pass").length;
|
||||
const failCount = tests.length - passCount;
|
||||
return (
|
||||
<div data-testid={testId}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.78em",
|
||||
fontWeight: 600,
|
||||
color: "#aaa",
|
||||
marginBottom: "6px",
|
||||
}}
|
||||
>
|
||||
{title} ({passCount} passed, {failCount} failed)
|
||||
</div>
|
||||
{tests.length === 0 ? (
|
||||
<div style={{ fontSize: "0.75em", color: "#555", fontStyle: "italic" }}>
|
||||
No tests recorded
|
||||
</div>
|
||||
) : (
|
||||
tests.map((tc) => <TestCaseRow key={tc.name} tc={tc} />)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function WorkItemDetailPanel({
|
||||
storyId,
|
||||
pipelineVersion,
|
||||
@@ -302,17 +173,6 @@ export function WorkItemDetailPanel({
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Map pipeline stage → agent stage filter.
|
||||
const STAGE_TO_AGENT_STAGE: Record<string, string> = {
|
||||
current: "coder",
|
||||
qa: "qa",
|
||||
merge: "mergemaster",
|
||||
};
|
||||
|
||||
const filteredAgents = agentConfig.filter(
|
||||
(a) => a.stage === STAGE_TO_AGENT_STAGE[stage],
|
||||
);
|
||||
|
||||
// The currently active agent name for this story (running or pending).
|
||||
const activeAgentName =
|
||||
agentInfo && (agentStatus === "running" || agentStatus === "pending")
|
||||
@@ -343,11 +203,6 @@ export function WorkItemDetailPanel({
|
||||
[storyId, activeAgentName],
|
||||
);
|
||||
|
||||
const stageLabel = STAGE_LABELS[stage] ?? stage;
|
||||
const hasTestResults =
|
||||
testResults &&
|
||||
(testResults.unit.length > 0 || testResults.integration.length > 0);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="work-item-detail-panel"
|
||||
@@ -362,138 +217,19 @@ export function WorkItemDetailPanel({
|
||||
border: "1px solid #333",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: "12px 16px",
|
||||
borderBottom: "1px solid #333",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "2px",
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
data-testid="detail-panel-title"
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.95em",
|
||||
color: "#ececec",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{formatStoryTitle(storyId, name)}
|
||||
</div>
|
||||
{stage && (
|
||||
<div
|
||||
data-testid="detail-panel-stage"
|
||||
style={{ fontSize: "0.75em", color: "#888" }}
|
||||
>
|
||||
{stageLabel}
|
||||
</div>
|
||||
)}
|
||||
{filteredAgents.length > 0 && (
|
||||
<div
|
||||
data-testid="detail-panel-agent-assignment"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "6px",
|
||||
marginTop: "4px",
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: "0.75em", color: "#666" }}>Agent:</span>
|
||||
<select
|
||||
data-testid="agent-assignment-dropdown"
|
||||
disabled={assigning}
|
||||
value={activeAgentName ?? assignedAgent ?? ""}
|
||||
onChange={(e) => handleAgentAssign(e.target.value)}
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "4px",
|
||||
color: "#ccc",
|
||||
cursor: assigning ? "not-allowed" : "pointer",
|
||||
fontSize: "0.75em",
|
||||
padding: "2px 6px",
|
||||
opacity: assigning ? 0.6 : 1,
|
||||
}}
|
||||
>
|
||||
<option value="">— none —</option>
|
||||
{filteredAgents.map((a) => {
|
||||
const isRunning =
|
||||
agentInfo?.agent_name === a.name &&
|
||||
agentStatus === "running";
|
||||
const isPending =
|
||||
agentInfo?.agent_name === a.name &&
|
||||
agentStatus === "pending";
|
||||
const statusLabel = isRunning
|
||||
? " — running"
|
||||
: isPending
|
||||
? " — pending"
|
||||
: " — idle";
|
||||
const modelPart = a.model ? ` (${a.model})` : "";
|
||||
return (
|
||||
<option key={a.name} value={a.name}>
|
||||
{a.name}
|
||||
{modelPart}
|
||||
{statusLabel}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
{assigning && (
|
||||
<span style={{ fontSize: "0.7em", color: "#888" }}>
|
||||
Assigning…
|
||||
</span>
|
||||
)}
|
||||
{assignError && (
|
||||
<span
|
||||
data-testid="agent-assignment-error"
|
||||
style={{ fontSize: "0.7em", color: "#f85149" }}
|
||||
>
|
||||
{assignError}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{filteredAgents.length === 0 && assignedAgent ? (
|
||||
<div
|
||||
data-testid="detail-panel-assigned-agent"
|
||||
style={{ fontSize: "0.75em", color: "#888" }}
|
||||
>
|
||||
Agent: {assignedAgent}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="detail-panel-close"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "6px",
|
||||
color: "#aaa",
|
||||
cursor: "pointer",
|
||||
padding: "4px 10px",
|
||||
fontSize: "0.8em",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<WorkItemDetailPanelHeader
|
||||
storyId={storyId}
|
||||
name={name}
|
||||
stage={stage}
|
||||
assignedAgent={assignedAgent}
|
||||
agentConfig={agentConfig}
|
||||
agentInfo={agentInfo}
|
||||
agentStatus={agentStatus}
|
||||
assigning={assigning}
|
||||
assignError={assignError}
|
||||
onAgentAssign={handleAgentAssign}
|
||||
onClose={onClose}
|
||||
/>
|
||||
|
||||
{/* Scrollable content area */}
|
||||
<div
|
||||
@@ -549,145 +285,9 @@ export function WorkItemDetailPanel({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Token Cost section */}
|
||||
<div
|
||||
data-testid="token-cost-section"
|
||||
style={{
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 12px",
|
||||
background: "#161616",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.8em",
|
||||
color: "#555",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
Token Cost
|
||||
</div>
|
||||
{tokenCost && tokenCost.agents.length > 0 ? (
|
||||
<div data-testid="token-cost-content">
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.75em",
|
||||
color: "#888",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
Total:{" "}
|
||||
<span data-testid="token-cost-total" style={{ color: "#ccc" }}>
|
||||
${tokenCost.total_cost_usd.toFixed(6)}
|
||||
</span>
|
||||
</div>
|
||||
{tokenCost.agents.map((agent: AgentCostEntry) => (
|
||||
<div
|
||||
key={agent.agent_name}
|
||||
data-testid={`token-cost-agent-${agent.agent_name}`}
|
||||
style={{
|
||||
fontSize: "0.75em",
|
||||
color: "#888",
|
||||
padding: "4px 0",
|
||||
borderTop: "1px solid #222",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "2px",
|
||||
}}
|
||||
>
|
||||
<span style={{ color: "#ccc", fontWeight: 600 }}>
|
||||
{agent.agent_name}
|
||||
{agent.model ? (
|
||||
<span
|
||||
style={{ color: "#666", fontWeight: 400 }}
|
||||
>{` (${agent.model})`}</span>
|
||||
) : null}
|
||||
</span>
|
||||
<span style={{ color: "#aaa" }}>
|
||||
${agent.total_cost_usd.toFixed(6)}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ color: "#555" }}>
|
||||
in {agent.input_tokens.toLocaleString()} / out{" "}
|
||||
{agent.output_tokens.toLocaleString()}
|
||||
{(agent.cache_creation_input_tokens > 0 ||
|
||||
agent.cache_read_input_tokens > 0) && (
|
||||
<>
|
||||
{" "}
|
||||
/ cache +
|
||||
{agent.cache_creation_input_tokens.toLocaleString()}{" "}
|
||||
read {agent.cache_read_input_tokens.toLocaleString()}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
data-testid="token-cost-empty"
|
||||
style={{ fontSize: "0.75em", color: "#444" }}
|
||||
>
|
||||
No token data recorded
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<TokenCostSection tokenCost={tokenCost} />
|
||||
|
||||
{/* Test Results section */}
|
||||
<div
|
||||
data-testid="test-results-section"
|
||||
style={{
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 12px",
|
||||
background: "#161616",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.8em",
|
||||
color: "#555",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
Test Results
|
||||
</div>
|
||||
{hasTestResults ? (
|
||||
<div
|
||||
data-testid="test-results-content"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "12px",
|
||||
}}
|
||||
>
|
||||
<TestSection
|
||||
title="Unit Tests"
|
||||
tests={testResults.unit}
|
||||
testId="test-section-unit"
|
||||
/>
|
||||
<TestSection
|
||||
title="Integration Tests"
|
||||
tests={testResults.integration}
|
||||
testId="test-section-integration"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
data-testid="test-results-empty"
|
||||
style={{ fontSize: "0.75em", color: "#444" }}
|
||||
>
|
||||
No test results recorded
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<TestResultsSection testResults={testResults} />
|
||||
|
||||
<div
|
||||
style={{
|
||||
@@ -696,97 +296,11 @@ export function WorkItemDetailPanel({
|
||||
gap: "8px",
|
||||
}}
|
||||
>
|
||||
{/* Agent Logs section */}
|
||||
{!agentInfo && (
|
||||
<div
|
||||
data-testid="placeholder-agent-logs"
|
||||
style={{
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 12px",
|
||||
background: "#161616",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.8em",
|
||||
color: "#555",
|
||||
marginBottom: "4px",
|
||||
}}
|
||||
>
|
||||
Agent Logs
|
||||
</div>
|
||||
<div style={{ fontSize: "0.75em", color: "#444" }}>
|
||||
Coming soon
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{agentInfo && (
|
||||
<div
|
||||
data-testid="agent-logs-section"
|
||||
style={{
|
||||
border: "1px solid #2a2a2a",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 12px",
|
||||
background: "#161616",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "6px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.8em",
|
||||
color: "#888",
|
||||
}}
|
||||
>
|
||||
Agent Logs
|
||||
</div>
|
||||
{agentStatus && (
|
||||
<div
|
||||
data-testid="agent-status-badge"
|
||||
style={{
|
||||
fontSize: "0.7em",
|
||||
color: STATUS_COLORS[agentStatus],
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{agentInfo.agent_name} — {agentStatus}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{agentLog.length > 0 ? (
|
||||
<div
|
||||
data-testid="agent-log-output"
|
||||
style={{
|
||||
fontSize: "0.75em",
|
||||
fontFamily: "monospace",
|
||||
color: "#ccc",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
lineHeight: "1.5",
|
||||
maxHeight: "200px",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
{agentLog.join("")}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ fontSize: "0.75em", color: "#444" }}>
|
||||
{agentStatus === "running" || agentStatus === "pending"
|
||||
? "Waiting for output..."
|
||||
: "No output."}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<AgentLogsSection
|
||||
agentInfo={agentInfo}
|
||||
agentStatus={agentStatus}
|
||||
agentLog={agentLog}
|
||||
/>
|
||||
|
||||
{/* Placeholder sections for future content */}
|
||||
{(
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
/** Header sub-component for WorkItemDetailPanel. */
|
||||
|
||||
import type { AgentConfigInfo, AgentInfo, AgentStatusValue } from "../api/agents";
|
||||
import { STAGE_LABELS, formatStoryTitle } from "./workItemDetailPanelUtils";
|
||||
|
||||
const STAGE_TO_AGENT_STAGE: Record<string, string> = {
|
||||
current: "coder",
|
||||
qa: "qa",
|
||||
merge: "mergemaster",
|
||||
};
|
||||
|
||||
interface WorkItemDetailPanelHeaderProps {
|
||||
storyId: string;
|
||||
name: string | null;
|
||||
stage: string;
|
||||
assignedAgent: string | null;
|
||||
agentConfig: AgentConfigInfo[];
|
||||
agentInfo: AgentInfo | null;
|
||||
agentStatus: AgentStatusValue | null;
|
||||
assigning: boolean;
|
||||
assignError: string | null;
|
||||
onAgentAssign: (agentName: string) => Promise<void>;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Panel header: title, stage label, agent assignment dropdown, and close button.
|
||||
*/
|
||||
export function WorkItemDetailPanelHeader({
|
||||
storyId,
|
||||
name,
|
||||
stage,
|
||||
assignedAgent,
|
||||
agentConfig,
|
||||
agentInfo,
|
||||
agentStatus,
|
||||
assigning,
|
||||
assignError,
|
||||
onAgentAssign,
|
||||
onClose,
|
||||
}: WorkItemDetailPanelHeaderProps) {
|
||||
const stageLabel = STAGE_LABELS[stage] ?? stage;
|
||||
const filteredAgents = agentConfig.filter(
|
||||
(a) => a.stage === STAGE_TO_AGENT_STAGE[stage],
|
||||
);
|
||||
const activeAgentName =
|
||||
agentInfo && (agentStatus === "running" || agentStatus === "pending")
|
||||
? agentInfo.agent_name
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: "12px 16px",
|
||||
borderBottom: "1px solid #333",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "2px",
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
data-testid="detail-panel-title"
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.95em",
|
||||
color: "#ececec",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{formatStoryTitle(storyId, name)}
|
||||
</div>
|
||||
{stage && (
|
||||
<div
|
||||
data-testid="detail-panel-stage"
|
||||
style={{ fontSize: "0.75em", color: "#888" }}
|
||||
>
|
||||
{stageLabel}
|
||||
</div>
|
||||
)}
|
||||
{filteredAgents.length > 0 && (
|
||||
<div
|
||||
data-testid="detail-panel-agent-assignment"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "6px",
|
||||
marginTop: "4px",
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: "0.75em", color: "#666" }}>Agent:</span>
|
||||
<select
|
||||
data-testid="agent-assignment-dropdown"
|
||||
disabled={assigning}
|
||||
value={activeAgentName ?? assignedAgent ?? ""}
|
||||
onChange={(e) => onAgentAssign(e.target.value)}
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "4px",
|
||||
color: "#ccc",
|
||||
cursor: assigning ? "not-allowed" : "pointer",
|
||||
fontSize: "0.75em",
|
||||
padding: "2px 6px",
|
||||
opacity: assigning ? 0.6 : 1,
|
||||
}}
|
||||
>
|
||||
<option value="">— none —</option>
|
||||
{filteredAgents.map((a) => {
|
||||
const isRunning =
|
||||
agentInfo?.agent_name === a.name &&
|
||||
agentStatus === "running";
|
||||
const isPending =
|
||||
agentInfo?.agent_name === a.name &&
|
||||
agentStatus === "pending";
|
||||
const statusLabel = isRunning
|
||||
? " — running"
|
||||
: isPending
|
||||
? " — pending"
|
||||
: " — idle";
|
||||
const modelPart = a.model ? ` (${a.model})` : "";
|
||||
return (
|
||||
<option key={a.name} value={a.name}>
|
||||
{a.name}
|
||||
{modelPart}
|
||||
{statusLabel}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
{assigning && (
|
||||
<span style={{ fontSize: "0.7em", color: "#888" }}>
|
||||
Assigning…
|
||||
</span>
|
||||
)}
|
||||
{assignError && (
|
||||
<span
|
||||
data-testid="agent-assignment-error"
|
||||
style={{ fontSize: "0.7em", color: "#f85149" }}
|
||||
>
|
||||
{assignError}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{filteredAgents.length === 0 && assignedAgent ? (
|
||||
<div
|
||||
data-testid="detail-panel-assigned-agent"
|
||||
style={{ fontSize: "0.75em", color: "#888" }}
|
||||
>
|
||||
Agent: {assignedAgent}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="detail-panel-close"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "6px",
|
||||
color: "#aaa",
|
||||
cursor: "pointer",
|
||||
padding: "4px 10px",
|
||||
fontSize: "0.8em",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/** Shared utility functions and constants for WorkItemDetailPanel sub-components. */
|
||||
|
||||
import type { AgentStatusValue } from "../api/agents";
|
||||
|
||||
export const STAGE_LABELS: Record<string, string> = {
|
||||
backlog: "Backlog",
|
||||
current: "Current",
|
||||
qa: "QA",
|
||||
merge: "To Merge",
|
||||
done: "Done",
|
||||
archived: "Archived",
|
||||
};
|
||||
|
||||
export const STATUS_COLORS: Record<AgentStatusValue, string> = {
|
||||
running: "#3fb950",
|
||||
pending: "#e3b341",
|
||||
completed: "#aaa",
|
||||
failed: "#f85149",
|
||||
};
|
||||
|
||||
/**
|
||||
* Strip YAML front matter and the first H1 heading from story content before
|
||||
* rendering. The panel header already shows the story ID/title, so rendering
|
||||
* them again inside the markdown body creates duplicate information.
|
||||
*/
|
||||
export function stripDisplayContent(content: string): string {
|
||||
let text = content;
|
||||
// Strip YAML front matter (--- ... ---)
|
||||
if (text.startsWith("---")) {
|
||||
const eol = text.indexOf("\n");
|
||||
if (eol !== -1) {
|
||||
const closeIdx = text.indexOf("\n---", eol);
|
||||
if (closeIdx !== -1) {
|
||||
text = text.slice(closeIdx + 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Trim leading blank lines left by the front matter
|
||||
text = text.trimStart();
|
||||
// Strip the first H1 heading — it duplicates the panel header title
|
||||
if (text.startsWith("# ")) {
|
||||
const eol = text.indexOf("\n");
|
||||
text = eol !== -1 ? text.slice(eol + 1).trimStart() : "";
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format the story ID/title line shown in the panel header.
|
||||
* Produces e.g. "Story 454: My Story Name" or "Bug 12: Crash on startup".
|
||||
* Falls back to name or storyId when the pattern doesn't match.
|
||||
*/
|
||||
export function formatStoryTitle(storyId: string, name: string | null): string {
|
||||
const match = storyId.match(/^(\d+)_([a-z]+)_/);
|
||||
if (!match || !name) return name ?? storyId;
|
||||
const [, number, type] = match;
|
||||
const typeLabel = type.charAt(0).toUpperCase() + type.slice(1);
|
||||
return `${typeLabel} ${number}: ${name}`;
|
||||
}
|
||||
Reference in New Issue
Block a user