Skip to content

Commit 0760f1b

Browse files
kathiekiwikathiekiwi
committed
refactor(webapp): give the agent cards one card primitive
1 parent 3f85acc commit 0760f1b

8 files changed

Lines changed: 115 additions & 33 deletions

File tree

‎apps/webapp/app/components/dashboard-agent/AgentChart.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { useOptionalEnvironment } from "~/hooks/useEnvironment";
1010
import { useOptionalOrganization } from "~/hooks/useOrganizations";
1111
import { useOptionalProject } from "~/hooks/useProject";
1212
import { cn } from "~/utils/cn";
13+
import { AgentCard, AgentCardHeader } from "./agent-card";
1314
import { ChatActionsRow } from "./chat-layout";
1415
import { renderableActions } from "./view-actions";
1516

@@ -148,11 +149,11 @@ export function AgentChart({
148149
};
149150

150151
return (
151-
<div className="overflow-hidden rounded-lg border border-border-bright bg-background-dimmed">
152+
<AgentCard>
152153
{block.title ? (
153-
<div className="border-b border-grid-bright bg-background-bright px-3 py-2 text-xs font-medium text-text-dimmed">
154+
<AgentCardHeader className="text-xs font-medium text-text-dimmed">
154155
{block.title}
155-
</div>
156+
</AgentCardHeader>
156157
) : null}
157158
<div className={cn(AGENT_CHART_PLOT_CLASS)}>
158159
{state.status === "loading" ? (
@@ -174,6 +175,6 @@ export function AgentChart({
174175
)}
175176
</div>
176177
<ChartActions actions={block.actions ?? []} onIntent={onIntent} />
177-
</div>
178+
</AgentCard>
178179
);
179180
}

‎apps/webapp/app/components/dashboard-agent/InvestigationCard.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
SeverityBadge,
2020
VerdictBadge,
2121
} from "./agent-badges";
22+
import { AgentCard, AgentCardBody, AgentCardHeader } from "./agent-card";
2223
import { ChatActionsRow } from "./chat-layout";
2324
import type { ResolvedUri } from "./ReportView";
2425

@@ -149,8 +150,8 @@ export function InvestigationCard({
149150
const concluded = investigation.outcome === "concluded";
150151

151152
return (
152-
<div className="overflow-hidden rounded-lg border border-border-bright bg-background-dimmed">
153-
<div className="space-y-1.5 border-b border-grid-bright bg-background-bright px-4 py-3">
153+
<AgentCard>
154+
<AgentCardHeader className="space-y-1.5">
154155
<div className="flex flex-wrap items-center gap-2">
155156
<span className="text-xs font-medium text-text-dimmed">Investigation</span>
156157
<SeverityBadge severity={investigation.severity}>
@@ -161,9 +162,9 @@ export function InvestigationCard({
161162
{investigation.runId ? (
162163
<div className="truncate font-mono text-xs text-text-dimmed">{investigation.runId}</div>
163164
) : null}
164-
</div>
165+
</AgentCardHeader>
165166

166-
<div className="space-y-5 px-4 py-4">
167+
<AgentCardBody density="roomy">
167168
<p className="text-sm font-medium text-text-bright">{investigation.title}</p>
168169

169170
<Section title={concluded ? "What happened" : "What we know"}>
@@ -237,7 +238,7 @@ export function InvestigationCard({
237238
</div>
238239

239240
<InvestigationActions actions={block.capabilities?.actions ?? []} onIntent={onIntent} />
240-
</div>
241-
</div>
241+
</AgentCardBody>
242+
</AgentCard>
242243
);
243244
}

‎apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Button, LinkButton } from "~/components/primitives/Buttons";
44
import { TextLink } from "~/components/primitives/TextLink";
55
import { toSafeUrl } from "~/components/runs/v3/agent/AgentMessageView";
66
import { CategoryBadge, ConfidenceBadge, EVIDENCE_ROW_CLASS } from "./agent-badges";
7+
import { AgentCard, AgentCardBody, AgentCardHeader } from "./agent-card";
78
import { useOptionalEnvironment } from "~/hooks/useEnvironment";
89
import { useOptionalOrganization } from "~/hooks/useOrganizations";
910
import { useOptionalProject } from "~/hooks/useProject";
@@ -164,8 +165,8 @@ export function RunDiagnosisCard({ block }: { block: DiagnosisBlock }) {
164165
const actions = block.actions ?? [];
165166

166167
return (
167-
<div className="overflow-hidden rounded-lg border border-border-bright bg-background-dimmed">
168-
<div className="space-y-1.5 border-b border-grid-bright bg-background-bright px-4 py-3">
168+
<AgentCard>
169+
<AgentCardHeader className="space-y-1.5">
169170
<div className="flex flex-wrap items-center gap-2">
170171
<span className="text-xs font-medium text-text-dimmed">Run diagnosis</span>
171172
<ConfidenceBadge confidence={block.confidence} />
@@ -179,9 +180,9 @@ export function RunDiagnosisCard({ block }: { block: DiagnosisBlock }) {
179180
<RunLink runId={block.runId} className="block truncate font-mono text-xs" />
180181
</div>
181182
) : null}
182-
</div>
183+
</AgentCardHeader>
183184

184-
<div className="space-y-5 px-4 py-4">
185+
<AgentCardBody density="roomy">
185186
<p className="text-sm text-text-bright">{block.summary}</p>
186187

187188
<Section title="Likely cause">
@@ -229,8 +230,8 @@ export function RunDiagnosisCard({ block }: { block: DiagnosisBlock }) {
229230
) : null}
230231

231232
{actions.length > 0 ? <DiagnosisActions actions={actions} /> : null}
232-
</div>
233-
</div>
233+
</AgentCardBody>
234+
</AgentCard>
234235
);
235236
}
236237

‎apps/webapp/app/components/dashboard-agent/agent-card.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// The transcript's card chrome. `ChatCardSlot` places a card; this owns the box,
2+
// so stacked cards can't drift apart on border, surface or header inset.
3+
import type { ReactNode } from "react";
4+
import { cn } from "~/utils/cn";
5+
6+
const CARD_BOX = "overflow-hidden rounded-lg border border-border-bright bg-background-dimmed";
7+
8+
/** One header inset for every card, whatever its body density. */
9+
const CARD_HEADER = "border-b border-grid-bright bg-background-bright px-3 py-2";
10+
11+
const CARD_BODY: Record<AgentCardDensity, string> = {
12+
compact: "space-y-4 px-3 py-3.5",
13+
roomy: "space-y-5 px-3 py-4",
14+
};
15+
16+
/** How much air a card's body gives its sections. */
17+
export type AgentCardDensity = "compact" | "roomy";
18+
19+
export function AgentCard({ className, children }: { className?: string; children: ReactNode }) {
20+
return <div className={cn(CARD_BOX, className)}>{children}</div>;
21+
}
22+
23+
/** The card's top strip. `className` carries its own layout, never its inset. */
24+
export function AgentCardHeader({
25+
className,
26+
children,
27+
}: {
28+
className?: string;
29+
children: ReactNode;
30+
}) {
31+
return <div className={cn(CARD_HEADER, className)}>{children}</div>;
32+
}
33+
34+
export function AgentCardBody({
35+
density = "compact",
36+
className,
37+
children,
38+
}: {
39+
density?: AgentCardDensity;
40+
className?: string;
41+
children: ReactNode;
42+
}) {
43+
return <div className={cn(CARD_BODY[density], className)}>{children}</div>;
44+
}

‎apps/webapp/app/components/dashboard-agent/demo/components/DemoChartCard.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { AgentIntent, ChartAction } from "@internal/dashboard-agent-contracts";
22
import { QueryResultsChart } from "~/components/code/QueryResultsChart";
33
import { AGENT_CHART_PLOT_CLASS, ChartActions } from "../../AgentChart";
4+
import { AgentCard, AgentCardHeader } from "../../agent-card";
45
import { demoChart } from "../fixtures/chart";
56

67
export function DemoChartCard({
@@ -13,11 +14,9 @@ export function DemoChartCard({
1314
onIntent?: (intent: AgentIntent) => void;
1415
}) {
1516
return (
16-
<div className="overflow-hidden rounded-lg border border-border-bright bg-background-dimmed">
17+
<AgentCard>
1718
{title ? (
18-
<div className="border-b border-grid-bright bg-background-bright px-3 py-2 text-xs font-medium text-text-dimmed">
19-
{title}
20-
</div>
19+
<AgentCardHeader className="text-xs font-medium text-text-dimmed">{title}</AgentCardHeader>
2120
) : null}
2221
<div className={AGENT_CHART_PLOT_CLASS}>
2322
<QueryResultsChart
@@ -28,6 +27,6 @@ export function DemoChartCard({
2827
/>
2928
</div>
3029
<ChartActions actions={actions ?? []} onIntent={onIntent} />
31-
</div>
30+
</AgentCard>
3231
);
3332
}

‎apps/webapp/app/components/dashboard-agent/report-sparkline.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { InfoIconTooltip } from "~/components/primitives/Tooltip";
3030
import TooltipPortal from "~/components/primitives/TooltipPortal";
3131
import { cn } from "~/utils/cn";
3232
import { AgentStatusIcon, type AgentTone } from "./agent-badges";
33+
import { AgentCard, AgentCardBody, AgentCardHeader } from "./agent-card";
3334

3435
/** Both cards' severity type (`Severity` / `ReportSeverity`) resolves to this. */
3536
export type ReportSeverityKey = "ok" | "warn" | "crit";
@@ -93,11 +94,7 @@ export function ReportSeverityIcon({
9394
// --- card chrome ------------------------------------------------------------
9495

9596
export function ReportCard({ children }: { children: ReactNode }) {
96-
return (
97-
<div className="overflow-hidden rounded-lg border border-border-bright bg-background-dimmed">
98-
{children}
99-
</div>
100-
);
97+
return <AgentCard>{children}</AgentCard>;
10198
}
10299

103100
/**
@@ -115,17 +112,17 @@ export function ReportHeaderLine({
115112
children?: ReactNode;
116113
}) {
117114
return (
118-
<div className="flex flex-wrap items-center gap-2 border-b border-grid-bright px-3 py-2">
115+
<AgentCardHeader className="flex flex-wrap items-center gap-2">
119116
<span className="text-xs font-medium text-text-bright">{name}</span>
120117
{children}
121118
<span className="ml-auto text-xs text-text-dimmed">{meta}</span>
122-
</div>
119+
</AgentCardHeader>
123120
);
124121
}
125122

126123
/** The card body. */
127124
export function ReportBody({ children, dimmed }: { children: ReactNode; dimmed?: boolean }) {
128-
return <div className={cn("space-y-4 px-3 py-3.5", dimmed && "opacity-80")}>{children}</div>;
125+
return <AgentCardBody className={cn(dimmed && "opacity-80")}>{children}</AgentCardBody>;
129126
}
130127

131128
/** The verdict as one sentence: icon, the coloured phrase, then why. */

‎apps/webapp/app/routes/storybook.agent-ui/manifest.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export const GALLERY_PAGES: GalleryPage[] = [
4747
];
4848

4949
export type GalleryGroup =
50+
| "card"
5051
| "diagnosis"
5152
| "view-blocks"
5253
| "investigation"
@@ -79,6 +80,7 @@ export const GALLERY_GROUPS: { group: GalleryGroup; page: GalleryPageId; label:
7980
{ group: "watches", page: "chat", label: "Watch chips" },
8081
{ group: "banner", page: "chat", label: "Context banner" },
8182
{ group: "view-blocks", page: "view-blocks", label: "Envelope & actions" },
83+
{ group: "card", page: "view-blocks", label: "Card chrome" },
8284
{ group: "diagnosis", page: "view-blocks", label: "Diagnosis card" },
8385
{ group: "chart", page: "view-blocks", label: "Chart card" },
8486
{ group: "report", page: "report", label: "Report view" },
@@ -176,6 +178,10 @@ export const MANIFEST: GallerySection[] = [
176178
group: "view-blocks",
177179
},
178180

181+
{ sectionId: "card-compact", title: "Header plus a compact body", group: "card" },
182+
{ sectionId: "card-roomy", title: "Header plus a roomy body", group: "card" },
183+
{ sectionId: "card-headerless", title: "No header — body only", group: "card" },
184+
179185
{ sectionId: "diagnosis-full-high", title: "Full card, high confidence", group: "diagnosis" },
180186
{
181187
sectionId: "diagnosis-low-minimal",

‎apps/webapp/app/routes/storybook.agent-view-blocks/route.tsx‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ import type { DiagnosisBlock, ViewBlock } from "@internal/dashboard-agent";
22
import { VIEW_BLOCK_VERSION } from "@internal/dashboard-agent-contracts";
33
import { QueryResultsChart } from "~/components/code/QueryResultsChart";
44
import { AGENT_CHART_PLOT_CLASS } from "~/components/dashboard-agent/AgentChart";
5+
import { ConfidenceBadge } from "~/components/dashboard-agent/agent-badges";
6+
import {
7+
AgentCard,
8+
AgentCardBody,
9+
AgentCardHeader,
10+
type AgentCardDensity,
11+
} from "~/components/dashboard-agent/agent-card";
512
import { DemoChartCard, demoFixtures } from "~/components/dashboard-agent/demo";
613
import { RunDiagnosisCard } from "~/components/dashboard-agent/RunDiagnosisCard";
714
import { ViewBlocks } from "~/components/dashboard-agent/view-catalog";
@@ -167,10 +174,10 @@ const badgeMatrixBlocks: DiagnosisBlock[] = DIAGNOSIS_CATEGORIES.map((category,
167174

168175
function EmptyChartCard() {
169176
return (
170-
<div className="overflow-hidden rounded-lg border border-border-bright bg-background-dimmed">
171-
<div className="border-b border-grid-bright bg-background-bright px-3 py-2 text-xs font-medium text-text-dimmed">
177+
<AgentCard>
178+
<AgentCardHeader className="text-xs font-medium text-text-dimmed">
172179
{demoFixtures.demoChart.title}
173-
</div>
180+
</AgentCardHeader>
174181
<div className={AGENT_CHART_PLOT_CLASS}>
175182
<QueryResultsChart
176183
rows={[]}
@@ -179,7 +186,29 @@ function EmptyChartCard() {
179186
timeRange={demoFixtures.demoChart.timeRange}
180187
/>
181188
</div>
182-
</div>
189+
</AgentCard>
190+
);
191+
}
192+
193+
/** The card primitive on its own: both body densities, and a card with no header. */
194+
function CardChrome({ density, header }: { density?: AgentCardDensity; header?: boolean }) {
195+
return (
196+
<AgentCard>
197+
{header ? (
198+
<AgentCardHeader className="flex flex-wrap items-center gap-2">
199+
<span className="text-xs font-medium text-text-dimmed">Card header</span>
200+
<ConfidenceBadge confidence="high" />
201+
</AgentCardHeader>
202+
) : null}
203+
<AgentCardBody density={density}>
204+
<p className="text-sm text-text-bright">
205+
The card owns its border, surface and insets; the transcript owns where it sits.
206+
</p>
207+
<p className="text-sm text-text-dimmed">
208+
A second section, so the body's density is visible as the gap between them.
209+
</p>
210+
</AgentCardBody>
211+
</AgentCard>
183212
);
184213
}
185214

@@ -196,6 +225,10 @@ const STATES: Record<string, React.ReactNode> = {
196225
),
197226
"view-blocks-actions-offer": <ViewBlocks blocks={[offerActionsBlock]} onIntent={noop} />,
198227

228+
"card-compact": <CardChrome header density="compact" />,
229+
"card-roomy": <CardChrome header density="roomy" />,
230+
"card-headerless": <CardChrome />,
231+
199232
"diagnosis-full-high": <RunDiagnosisCard block={fullDiagnosis} />,
200233
"diagnosis-low-minimal": <RunDiagnosisCard block={lowConfidenceDiagnosis} />,
201234
"diagnosis-badge-matrix": (

0 commit comments

Comments
 (0)