diff --git a/apps/webapp/app/components/dashboard-agent/ActionsBlock.tsx b/apps/webapp/app/components/dashboard-agent/ActionsBlock.tsx
deleted file mode 100644
index 4ef3a276b..000000000
--- a/apps/webapp/app/components/dashboard-agent/ActionsBlock.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type {
- ActionsBlock as ActionsBlockPayload,
- AgentIntent,
-} from "@internal/dashboard-agent-contracts";
-import { Button } from "~/components/primitives/Buttons";
-import { ChatActionsRow } from "./chat-layout";
-import { renderableActions } from "./view-actions";
-
-export function ActionsBlock({
- block,
- onIntent,
-}: {
- block: ActionsBlockPayload;
- onIntent?: (intent: AgentIntent) => void;
-}) {
- const renderable = renderableActions(block.actions);
- if (!onIntent || renderable.length === 0) return null;
- return (
-
- {renderable.map((action, i) => (
-
- ))}
-
- );
-}
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx
index 955464b87..1d02bf466 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx
@@ -1,24 +1,17 @@
import type { UIMessage } from "@ai-sdk/react";
-import { memo, useMemo, useRef } from "react";
+import { memo } from "react";
import { Spinner } from "~/components/primitives/Spinner";
import { MessageBubble, renderPart } from "~/components/runs/v3/agent/AgentMessageView";
import { useAutoScrollToBottom } from "~/hooks/useAutoScrollToBottom";
-import { reuseWinners } from "./investigation-winners";
-import { answerContinuesAfter } from "./view-actions";
import { ViewBlocks } from "./view-catalog";
-// The shared MessageBubble renders `step-start` parts as a dashed "step" separator —
-// useful in the run inspector / playground, just noise in this simple chat.
-// Cached so a stripped message keeps its identity across renders and memoization holds.
-const strippedMessages = new WeakMap();
-
+// The shared MessageBubble renders `step-start` parts as a dashed "step"
+// separator — useful in the run inspector / playground, just noise in this
+// simple chat. Drop them before rendering (reference preserved when there are
+// none, so memoization still holds for those messages).
function stripStepParts(message: UIMessage): UIMessage {
if (!message.parts?.some((p) => p.type === "step-start")) return message;
- const cached = strippedMessages.get(message);
- if (cached) return cached;
- const stripped = { ...message, parts: message.parts.filter((p) => p.type !== "step-start") };
- strippedMessages.set(message, stripped);
- return stripped;
+ return { ...message, parts: message.parts.filter((p) => p.type !== "step-start") };
}
// A completed render_view tool part carries a `{ blocks }` view spec the agent
@@ -30,109 +23,28 @@ function viewSpecFor(part: UIMessage["parts"][number]): { blocks: unknown[] } |
return Array.isArray(p.output?.blocks) ? { blocks: p.output!.blocks! } : null;
}
-function hostViewBlocks(part: UIMessage["parts"][number]): unknown[] | null {
- const p = part as { type: string; data?: { blocks?: unknown[] } };
- if (p.type !== "data-view") return null;
- return Array.isArray(p.data?.blocks) ? p.data!.blocks! : null;
-}
-
-// Both carriers render as cards, so whichever one wins a revision is one the panel
-// can actually draw — a host-written card can never suppress a tool-rendered one
-// into nothing.
-function viewBlocksFor(part: UIMessage["parts"][number]): unknown[] | null {
- return viewSpecFor(part)?.blocks ?? hostViewBlocks(part);
-}
-
-type InvestigationRef = { id: string; revision: number };
-
-function investigationRef(block: unknown): InvestigationRef | null {
- const b = block as { type?: string; id?: string; revision?: number };
- if (b?.type !== "investigation" || typeof b.id !== "string") return null;
- return { id: b.id, revision: typeof b.revision === "number" ? b.revision : 0 };
-}
-
-/**
- * Per investigation id, the one `messageId:partIndex` allowed to render: highest revision.
- * Indexed over the same stripped parts the renderer walks, so the two agree on what part 0 is.
- */
-export function winningInvestigationOccurrences(messages: UIMessage[]): Map {
- const best = new Map();
- for (const message of messages.map(stripStepParts)) {
- (message.parts ?? []).forEach((part, partIndex) => {
- for (const block of viewBlocksFor(part) ?? []) {
- const ref = investigationRef(block);
- if (!ref) continue;
- const current = best.get(ref.id);
- if (!current || ref.revision >= current.revision) {
- best.set(ref.id, { revision: ref.revision, occurrence: `${message.id}:${partIndex}` });
- }
- }
- });
- }
- return new Map([...best.entries()].map(([id, w]) => [id, w.occurrence]));
-}
-
-// The stable identity is the point: a fresh `Map` re-renders the whole transcript per token.
-function useInvestigationWinners(messages: UIMessage[]): Map {
- const previous = useRef>();
- const next = useMemo(() => winningInvestigationOccurrences(messages), [messages]);
- previous.current = reuseWinners(previous.current, next);
- return previous.current;
-}
-
-function withoutSupersededInvestigations(
- blocks: unknown[],
- occurrence: string,
- winners: Map | undefined
-): unknown[] {
- if (!winners) return blocks;
- return blocks.filter((block) => {
- const ref = investigationRef(block);
- return !ref || winners.get(ref.id) === occurrence;
- });
-}
-
-// Renders one message. Assistant messages carrying a view spec get the catalog
-// cards (plus the gather tool rows / lead-in text for transparency); everything
-// else uses the shared MessageBubble unchanged, so its streaming memoization is
-// preserved for the common case.
-export function DashboardAgentMessageBubble({
+// Renders one message. Assistant messages that include a completed render_view
+// part get the catalog cards (plus the gather tool rows / lead-in text for
+// transparency); everything else uses the shared MessageBubble unchanged, so
+// its streaming memoization is preserved for the common case.
+const DashboardAgentMessageBubble = memo(function DashboardAgentMessageBubble({
message,
- investigationWinners,
}: {
message: UIMessage;
- /** See {@link winningInvestigationOccurrences}. */
- investigationWinners?: Map;
}) {
- if (message.role !== "assistant" || !message.parts?.some((p) => viewBlocksFor(p))) {
+ if (message.role !== "assistant" || !message.parts?.some((p) => viewSpecFor(p))) {
return ;
}
return (
{message.parts.map((part, i) => {
- const spec = viewBlocksFor(part);
- if (!spec) return renderPart(part, i);
- const blocks = withoutSupersededInvestigations(
- spec,
- `${message.id}:${i}`,
- investigationWinners
- );
- if (blocks.length === 0) return null;
- // No `onIntent`: nothing here can act on one yet, so the cards drop their
- // action rows rather than offer buttons that would do nothing.
- return (
-
- );
+ const spec = viewSpecFor(part);
+ if (spec) return ;
+ return renderPart(part, i);
})}
);
-}
-
-const MemoizedMessageBubble = memo(DashboardAgentMessageBubble);
+});
// Renders the conversation with the shared agent message renderer — the same
// MessageBubble the run inspector and playground use, so agent output looks
@@ -148,19 +60,12 @@ export function DashboardAgentMessages({
error?: Error;
}) {
const rootRef = useAutoScrollToBottom([messages, isThinking]);
- // Must be the exact parts the bubbles render: the winners map keys by part index.
- const stripped = useMemo(() => messages.map(stripStepParts), [messages]);
- const investigationWinners = useInvestigationWinners(stripped);
return (
;
-}
diff --git a/apps/webapp/app/components/dashboard-agent/chat-layout.tsx b/apps/webapp/app/components/dashboard-agent/chat-layout.tsx
deleted file mode 100644
index 0dfd401e0..000000000
--- a/apps/webapp/app/components/dashboard-agent/chat-layout.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-// Transcript spacing lives here, so a card writes no spacing classes of its own.
-export function ChatActionsRow({ children }: { children: React.ReactNode }) {
- return
{children}
;
-}
diff --git a/apps/webapp/app/components/dashboard-agent/investigation-winners.test.ts b/apps/webapp/app/components/dashboard-agent/investigation-winners.test.ts
deleted file mode 100644
index 71eea76c3..000000000
--- a/apps/webapp/app/components/dashboard-agent/investigation-winners.test.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
-import { describe, expect, it } from "vitest";
-import { reuseWinners, sameOccurrences } from "./investigation-winners";
-
-describe("reuseWinners", () => {
- it("keeps the previous map when the winners are unchanged", () => {
- const first = new Map([["inv_1", "msg_a:0"]]);
- const second = new Map([["inv_1", "msg_a:0"]]);
- expect(sameOccurrences(first, second)).toBe(true);
- expect(reuseWinners(first, second)).toBe(first);
- });
-
- it("takes the next map when a winner moves", () => {
- const first = new Map([["inv_1", "msg_a:0"]]);
- const moved = new Map([["inv_1", "msg_b:2"]]);
- expect(reuseWinners(first, moved)).toBe(moved);
- });
-
- it("takes the next map when an investigation appears", () => {
- const first = new Map([["inv_1", "msg_a:0"]]);
- const grown = new Map([
- ["inv_1", "msg_a:0"],
- ["inv_2", "msg_b:1"],
- ]);
- expect(reuseWinners(first, grown)).toBe(grown);
- });
-
- it("takes the next map on the first render", () => {
- const only = new Map([["inv_1", "msg_a:0"]]);
- expect(reuseWinners(undefined, only)).toBe(only);
- });
-});
-
-// Structural: there is no jsdom here, so the wiring is asserted against the source.
-describe("DashboardAgentMessages wiring", () => {
- const source = readFileSync(join(__dirname, "DashboardAgentMessages.tsx"), "utf8");
-
- it("stabilises the winners map and the stripped messages it renders", () => {
- expect(source).toContain("reuseWinners(previous.current, next)");
- expect(source).toContain("useInvestigationWinners(stripped)");
- expect(source).toContain("useMemo(() => messages.map(stripStepParts), [messages])");
- expect(source).toContain("strippedMessages.set(message, stripped)");
- });
-});
diff --git a/apps/webapp/app/components/dashboard-agent/investigation-winners.ts b/apps/webapp/app/components/dashboard-agent/investigation-winners.ts
deleted file mode 100644
index 5d430e434..000000000
--- a/apps/webapp/app/components/dashboard-agent/investigation-winners.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export function sameOccurrences(a: Map, b: Map): boolean {
- if (a.size !== b.size) return false;
- for (const [id, occurrence] of a) {
- if (b.get(id) !== occurrence) return false;
- }
- return true;
-}
-
-export function reuseWinners(
- previous: Map | undefined,
- next: Map
-): Map {
- return previous && sameOccurrences(previous, next) ? previous : next;
-}
diff --git a/apps/webapp/app/components/dashboard-agent/report-spark.test.ts b/apps/webapp/app/components/dashboard-agent/report-spark.test.ts
deleted file mode 100644
index 6fd476409..000000000
--- a/apps/webapp/app/components/dashboard-agent/report-spark.test.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { readFileSync } from "node:fs";
-import { describe, expect, it } from "vitest";
-import { barTimesMs, condense, hotBarCount, MAX_BARS, seriesEndMs } from "./report-spark";
-
-describe("condense", () => {
- it("leaves a series that already fits alone, by reference", () => {
- const points = [1, 2, 3];
- expect(condense(points, 18)).toBe(points);
- });
-
- it("averages adjacent points down to the bar count", () => {
- expect(condense([0, 2, 4, 6], 2)).toEqual([1, 5]);
- });
-
- it("covers every point exactly once", () => {
- const points = Array.from({ length: 97 }, (_, i) => i);
- const bars = condense(points, MAX_BARS);
- expect(bars).toHaveLength(MAX_BARS);
- // Each bar is a mean of a non-empty slice, so no bar is NaN and the whole
- // series is inside the bars' range.
- expect(bars.every((bar) => Number.isFinite(bar))).toBe(true);
- expect(Math.min(...bars)).toBeGreaterThanOrEqual(0);
- expect(Math.max(...bars)).toBeLessThanOrEqual(96);
- });
-
- it("never asks for a slice ending before the first point", () => {
- // Why the removed `Math.max(end, 1)` was unreachable: past the early return
- // `perBar > 1`, so even the first bar's end index is already at least 1.
- for (let maxBars = 1; maxBars <= 30; maxBars++) {
- for (let length = maxBars + 1; length <= maxBars + 40; length++) {
- const perBar = length / maxBars;
- for (let i = 0; i < maxBars; i++) {
- expect(Math.floor((i + 1) * perBar)).toBeGreaterThanOrEqual(1);
- }
- }
- }
- });
-
- it("gives the first bar the first points, not a slice starting past them", () => {
- // The old `Math.max(end, 1)` claimed to guard an empty first slice. With
- // `points.length > maxBars` the end index is already at least 1, so the guard
- // never fired — and if it ever had, the first bar would be a single point.
- expect(condense([10, 20, 30, 40, 50, 60], 3)).toEqual([15, 35, 55]);
- });
-});
-
-describe("seriesEndMs", () => {
- it("reads the presenter's timestamp", () => {
- expect(seriesEndMs("2026-07-27T10:15:00.000Z")).toBe(Date.parse("2026-07-27T10:15:00.000Z"));
- });
-
- it("is null for a missing or unparseable timestamp", () => {
- expect(seriesEndMs(undefined)).toBeNull();
- expect(seriesEndMs("")).toBeNull();
- expect(seriesEndMs("not a date")).toBeNull();
- });
-});
-
-/**
- * The bars are the report's, not the reader's: two people opening the same report an hour apart,
- * and one reader re-rendering, must all see the same time on the same bar.
- */
-describe("barTimesMs", () => {
- const end = Date.parse("2026-07-27T10:00:00.000Z");
-
- it("spreads the bars back from the series' end", () => {
- const times = barTimesMs(4, 60, end);
- expect(times).toEqual([
- Date.parse("2026-07-27T09:00:00.000Z"),
- Date.parse("2026-07-27T09:15:00.000Z"),
- Date.parse("2026-07-27T09:30:00.000Z"),
- Date.parse("2026-07-27T09:45:00.000Z"),
- ]);
- });
-
- it("returns the same times however long after the report they are asked for", () => {
- expect(barTimesMs(4, 60, end)).toEqual(barTimesMs(4, 60, end));
- });
-
- it("gives every bar no time at all when the end is unknown", () => {
- expect(barTimesMs(3, 60, null)).toEqual([null, null, null]);
- });
-
- it("has no bars to time when there are no bars", () => {
- expect(barTimesMs(0, 60, end)).toEqual([]);
- });
-});
-
-describe("hotBarCount", () => {
- it("is none without an anomaly window", () => {
- expect(hotBarCount(18, 60, undefined)).toBe(0);
- });
-
- it("marks the trailing bars the window covers", () => {
- expect(hotBarCount(12, 60, 15)).toBe(3);
- });
-
- it("marks at least one bar, and never more than there are", () => {
- expect(hotBarCount(12, 60, 1)).toBe(1);
- expect(hotBarCount(12, 60, 600)).toBe(12);
- });
-});
-
-/**
- * Structural guard, not behavioural proof: it asserts the renderer's source never reaches for a
- * clock, which is what keeps the bars above stable. It does not render the card.
- */
-describe("the report card reads no clock", () => {
- const sources = ["report-sparkline.tsx", "ReportView.tsx"];
-
- it.each(sources)("%s calls neither Date.now nor new Date()", (file) => {
- const source = readFileSync(new URL(`./${file}`, import.meta.url), "utf8");
- expect(source).not.toMatch(/Date\.now\(\)/);
- expect(source).not.toMatch(/new Date\(\s*\)/);
- });
-});
diff --git a/apps/webapp/app/components/dashboard-agent/report-spark.ts b/apps/webapp/app/components/dashboard-agent/report-spark.ts
deleted file mode 100644
index 79dd79a7c..000000000
--- a/apps/webapp/app/components/dashboard-agent/report-spark.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * The sparkline's arithmetic. It lives here rather than in `report-sparkline.tsx` so it stays
- * clock-free: bar timestamps come from the presenter's `generatedAt`, never from the renderer.
- */
-
-/** How many bars a series is condensed to, so each bar stays wide enough to hover. */
-export const MAX_BARS = 18;
-
-/** Average adjacent points down so each bar is wide enough to read and hover. */
-export function condense(points: number[], maxBars: number = MAX_BARS): number[] {
- if (points.length <= maxBars) return points;
- const perBar = points.length / maxBars;
- return Array.from({ length: maxBars }, (_, i) => {
- const slice = points.slice(Math.floor(i * perBar), Math.floor((i + 1) * perBar));
- return slice.reduce((sum, v) => sum + v, 0) / Math.max(slice.length, 1);
- });
-}
-
-/** The series' end, from the view model. Null when the report carries no usable timestamp. */
-export function seriesEndMs(generatedAt: string | undefined): number | null {
- if (!generatedAt) return null;
- const ms = Date.parse(generatedAt);
- return Number.isNaN(ms) ? null : ms;
-}
-
-/**
- * Each bar's start, spread back from the series' end. All null when the end is unknown: a bar
- * with no time reads as one, where a guessed time reads as a fact.
- */
-export function barTimesMs(
- barCount: number,
- windowMinutes: number,
- endMs: number | null
-): (number | null)[] {
- const length = Math.max(barCount, 0);
- if (endMs === null || length === 0) return Array.from({ length }, () => null);
- const windowMs = windowMinutes * 60_000;
- const intervalMs = windowMs / length;
- const startMs = endMs - windowMs;
- return Array.from({ length }, (_, i) => startMs + i * intervalMs);
-}
-
-/** Trailing bars inside the anomaly window, which paint at full strength. */
-export function hotBarCount(
- barCount: number,
- windowMinutes: number,
- anomalyMinutes: number | undefined
-): number {
- const minutesPerBar = barCount > 0 ? windowMinutes / barCount : 0;
- if (!anomalyMinutes || minutesPerBar <= 0) return 0;
- return Math.min(barCount, Math.max(1, Math.round(anomalyMinutes / minutesPerBar)));
-}
diff --git a/apps/webapp/app/components/dashboard-agent/report-sparkline.tsx b/apps/webapp/app/components/dashboard-agent/report-sparkline.tsx
deleted file mode 100644
index 96e6eb709..000000000
--- a/apps/webapp/app/components/dashboard-agent/report-sparkline.tsx
+++ /dev/null
@@ -1,698 +0,0 @@
-/**
- * The parts a report card is built from: severity vocabulary, card chrome, the
- * metric row and its sparkline. Both report cards render this layout, so the
- * pieces take resolved strings rather than metric objects.
- *
- * Keep this file pure: no Remix hooks, no loader data, no router context. Footer
- * `LinkButton`s are only ever given external URLs, which render as plain anchors.
- */
-import {
- ArrowUpRightIcon,
- BookOpenIcon,
- CheckCircleIcon,
- ExclamationCircleIcon,
- ExclamationTriangleIcon,
- QuestionMarkCircleIcon,
-} from "@heroicons/react/20/solid";
-import { Children, Fragment, type ReactNode } from "react";
-import { Bar, Cell, type TooltipProps } from "recharts";
-import {
- REPORT_LABELS,
- reportFooterStyle,
- type ReportFooterStyle,
- type ReportTone,
-} from "~/presenters/v3/reports/report-layout";
-import { ActivityBarChart } from "~/components/metrics/ActivityBarChart";
-import { Button, LinkButton } from "~/components/primitives/Buttons";
-import { formatDateTime } from "~/components/primitives/DateTime";
-import { Header3 } from "~/components/primitives/Headers";
-import { InfoIconTooltip } from "~/components/primitives/Tooltip";
-import TooltipPortal from "~/components/primitives/TooltipPortal";
-import { cn } from "~/utils/cn";
-import { AgentStatusIcon, type AgentTone } from "./agent-badges";
-import { AgentCard, AgentCardBody, AgentCardHeader } from "./agent-card";
-import { barTimesMs, condense, hotBarCount } from "./report-spark";
-
-/** Both cards' severity type (`Severity` / `ReportSeverity`) resolves to this. */
-export type ReportSeverityKey = "ok" | "warn" | "crit";
-
-// Semantic tokens, not raw palette classes: only these are remapped by the theme
-// layer (see tailwind.css). Keyed by tone, so a genuinely-unknown state can't
-// borrow a verdict's colour.
-export const SEVERITY_TEXT: Record = {
- ok: "text-success",
- warn: "text-warning",
- crit: "text-error",
- neutral: "text-text-dimmed",
-};
-
-/** The same colours as CSS values, for the sparkline's line. */
-const SEVERITY_COLOR: Record = {
- ok: "var(--color-success)",
- warn: "var(--color-warning)",
- crit: "var(--color-error)",
- neutral: "var(--color-text-dimmed)",
-};
-
-const SEVERITY_TONE: Record = {
- ok: "success",
- warn: "warning",
- crit: "error",
- neutral: "neutral",
-};
-
-const SEVERITY_ICON = {
- ok: CheckCircleIcon,
- warn: ExclamationTriangleIcon,
- crit: ExclamationCircleIcon,
- neutral: QuestionMarkCircleIcon,
-} as const;
-
-/**
- * The state marker on a finding or a summary statement. `tone` is the shared
- * layout's tone, which is the severity unless the state is genuinely unknown —
- * the card's counterpart to the text surfaces' `○` glyph.
- */
-export function ReportSeverityIcon({
- severity,
- tone,
- className,
-}: {
- severity: ReportSeverityKey;
- tone?: ReportTone;
- className?: string;
-}) {
- const key = tone ?? severity;
- return (
-
- );
-}
-
-// --- card chrome ------------------------------------------------------------
-
-export function ReportCard({ children }: { children: ReactNode }) {
- return {children};
-}
-
-/**
- * The quiet top line: the report's name, then its scope, period and baseline.
- * Anything urgent belongs in the headline below.
- */
-export function ReportHeaderLine({
- name,
- meta,
- children,
-}: {
- name: string;
- meta: string;
- /** State badges that sit next to the name. */
- children?: ReactNode;
-}) {
- return (
-
- {name}
- {children}
- {meta}
-
- );
-}
-
-/** The card body. */
-export function ReportBody({ children, dimmed }: { children: ReactNode; dimmed?: boolean }) {
- return {children};
-}
-
-/** The verdict as one sentence: icon, the coloured phrase, then why. */
-export function ReportHeadline({
- severity,
- tone,
- phrase,
- continuation,
-}: {
- severity: ReportSeverityKey;
- tone?: ReportTone;
- phrase: string;
- continuation?: string;
-}) {
- return (
-
- );
-}
-
-/**
- * A finding other than the one in the headline. Fixed columns so consecutive
- * lines start on the same vertical.
- */
-export function ReportFindingLine({
- severity,
- tone,
- type,
- text,
- bright,
-}: {
- severity: ReportSeverityKey;
- tone?: ReportTone;
- type: string;
- text: string;
- bright?: boolean;
-}) {
- return (
-
-
- {type}
-
- {text}
-
-
- );
-}
-
-// --- prose highlighting -----------------------------------------------------
-
-/**
- * Highlight rules for report prose. Quantities render bright and tabular,
- * entities mono, verdict phrases bright and medium, everything else dimmed.
- * Colour stays reserved for severity, so emphasis here is weight only.
- */
-const QUANTITY_RE = /~?\d[\d,.]*\s?(?:%|×|\/min|ms\b|s\b|min\b|h\b)?/g;
-
-const VERDICT_PHRASES = [
- "not your code",
- "not a code problem",
- "not the workers",
- "not the platform",
-];
-
-type ProseSegment = { text: string; kind: "plain" | "quantity" | "entity" | "verdict" };
-
-function splitBy(
- segments: ProseSegment[],
- match: (text: string) => { start: number; end: number } | null,
- kind: ProseSegment["kind"]
-): ProseSegment[] {
- return segments.flatMap((segment) => {
- if (segment.kind !== "plain") return [segment];
- const out: ProseSegment[] = [];
- let rest = segment.text;
- for (;;) {
- const hit = match(rest);
- if (!hit) break;
- if (hit.start > 0) out.push({ text: rest.slice(0, hit.start), kind: "plain" });
- out.push({ text: rest.slice(hit.start, hit.end), kind });
- rest = rest.slice(hit.end);
- }
- if (rest) out.push({ text: rest, kind: "plain" });
- return out;
- });
-}
-
-/** Apply the highlight rules to one resolved prose line. */
-export function ReportProse({ text, entities }: { text: string; entities?: string[] }) {
- let segments: ProseSegment[] = [{ text, kind: "plain" }];
-
- for (const entity of entities ?? []) {
- if (!entity) continue;
- segments = splitBy(
- segments,
- (t) => {
- const i = t.indexOf(entity);
- return i === -1 ? null : { start: i, end: i + entity.length };
- },
- "entity"
- );
- }
-
- for (const phrase of VERDICT_PHRASES) {
- segments = splitBy(
- segments,
- (t) => {
- const i = t.toLowerCase().indexOf(phrase);
- return i === -1 ? null : { start: i, end: i + phrase.length };
- },
- "verdict"
- );
- }
-
- segments = splitBy(
- segments,
- (t) => {
- QUANTITY_RE.lastIndex = 0;
- const m = QUANTITY_RE.exec(t);
- return m && m[0].trim().length > 0 ? { start: m.index, end: m.index + m[0].length } : null;
- },
- "quantity"
- );
-
- return (
- <>
- {segments.map((segment, i) => {
- switch (segment.kind) {
- case "quantity":
- return (
-
- {segment.text}
-
- );
- case "entity":
- return (
-
- {segment.text}
-
- );
- case "verdict":
- return (
-
- {segment.text}
-
- );
- default:
- return {segment.text};
- }
- })}
-
- );
-}
-
-/**
- * A labelled block of lines. The label sits in its own column so the lines hang
- * together as one indented paragraph.
- */
-export function ReportNoteBlock({ label, children }: { label: string; children: ReactNode }) {
- const lines = Children.toArray(children).filter(Boolean);
- if (lines.length === 0) return null;
-
- return (
-
- {label}
-
- {lines.map((line, i) => (
-
{line}
- ))}
-
-
- );
-}
-
-// --- footer -----------------------------------------------------------------
-
-// The footer vocabulary lives in the shared layout spec, so the card and the text
-// surfaces classify a code the same way. `action` is a primary button, `docs` the
-// docs button, `reference` a text link because a button would promise an action,
-// and `note` is prose for an option stated rather than offered.
-export { reportFooterStyle, type ReportFooterStyle };
-
-/** A dimmed line that accompanies a row entry. */
-const FOOTER_NOTE_LINES: Record = {
- check_control_plane: "There's nothing to fix on your side.",
-};
-
-/** One resolved footer entry: the code it came from, and what it renders as. */
-export type ReportFooterItem = { code: string; node: ReactNode };
-
-function isRowEntry(item: ReportFooterItem): boolean {
- const style = reportFooterStyle(item.code);
- return style === "action" || style === "docs" || style === "reference";
-}
-
-/**
- * The footer: a "Next steps" heading, the controls in one wrapping row, and
- * stated options as a dimmed line under it.
- */
-export function ReportFooterLine({ items }: { items: ReportFooterItem[] }) {
- const entries = items.filter((item) => item.node);
- if (entries.length === 0) return null;
-
- const row = entries.filter(isRowEntry);
- const noteLines = entries
- .map((item) => FOOTER_NOTE_LINES[item.code])
- .filter((line): line is string => Boolean(line));
- const rest = entries.filter((item) => !isRowEntry(item));
-
- return (
-
-
- {REPORT_LABELS.nextSteps}
-
- {row.length > 0 ? (
- // text-xs so a text link in the row (a cited reference) sits at the
- // same size as the buttons beside it.
-
-
- );
-}
-
-/**
- * A metric's series as an `ActivityBarChart`. Bars inside the anomaly window paint
- * at full strength and the rest recede to a tint of the same colour, so the breach
- * reads as one chart changing intensity rather than a second series.
- */
-export function ReportSparkline({
- points,
- severity,
- /** Minutes the whole series covers. Turns a bar into its tooltip time. */
- windowMinutes,
- /**
- * Length of the anomaly window when it runs to the end of the series. The
- * matching trailing bars paint at full strength.
- */
- anomalyMinutes,
- /** When the series ends, from the report's `generatedAt`. Turns a bar into a time. */
- seriesEndMs,
- /** The metric's own formatter, used by the tooltip and the peak label. */
- formatPoint,
- label,
- className,
-}: {
- points: number[];
- severity: ReportSeverityKey;
- windowMinutes: number;
- anomalyMinutes?: number;
- seriesEndMs: number | null;
- formatPoint: (value: number) => string;
- label: string;
- className?: string;
-}) {
- const bars = condense(points);
- // The view model carries buckets, not timestamps, so spread them back from the
- // series' end. Never from the renderer's clock: see `report-spark.ts`.
- const times = barTimesMs(bars.length, windowMinutes, seriesEndMs);
- const hotBars = hotBarCount(bars.length, windowMinutes, anomalyMinutes);
-
- const data: ReportSparkDatum[] = bars.map((count, i) => ({
- count,
- date: times[i] === null ? null : new Date(times[i]!),
- hot: i >= bars.length - hotBars,
- }));
-
- const color = SEVERITY_COLOR[severity];
- const calm = `color-mix(in srgb, ${color} 35%, transparent)`;
- const peak = points.length > 0 ? Math.max(...points) : 0;
-
- return (
-
- );
-}
-
-// --- metric row -------------------------------------------------------------
-
-/**
- * Label, value, delta and sparkline in fixed columns, so every row's label and
- * chart start on the same vertical whatever the value's width.
- */
-/**
- * Below a 19rem container the fixed tracks no longer fit beside the value, so the
- * sparkline drops to its own line. The columns never change, so the value, delta
- * and note stay on the same verticals at every panel width.
- */
-const METRIC_ROW_CLASS =
- "grid grid-cols-[6rem_minmax(0,1fr)_2.75rem_5.5rem] items-center gap-x-2 @max-[19rem]:grid-cols-[6rem_minmax(0,1fr)_2.75rem] @max-[19rem]:gap-y-1.5";
-
-/** The sparkline cell: its own full-width line once the row goes narrow. */
-const SPARK_CELL_CLASS = "@max-[19rem]:col-span-3 @max-[19rem]:justify-self-end";
-
-// Labels are never truncated: the column fits the common ones and anything
-// longer wraps.
-const LABEL_CLASS = "text-xs uppercase leading-tight tracking-wide text-text-dimmed";
-
-/** A metric's movement against its baseline. Direction is always an arrow. */
-export type ReportDelta = { text: string; dir: "up" | "down" | "flat" };
-
-/**
- * A view model `Delta` as the row's arrow. A multiplier only reads as movement
- * once it rounds past 1×; below that a metric with a baseline is flat, and one
- * without a baseline has nothing to compare against.
- */
-export function reportDelta(
- delta: { dir: "up" | "down" | "flat"; mult?: number } | undefined,
- hasBaseline: boolean
-): ReportDelta | undefined {
- if (delta && delta.mult !== undefined && delta.mult > 1 && delta.dir !== "flat") {
- return { text: `${delta.dir === "up" ? "↑" : "↓"} ${delta.mult}×`, dir: delta.dir };
- }
- return hasBaseline ? { text: "→ flat", dir: "flat" } : undefined;
-}
-
-export function ReportMetricRow({
- label,
- value,
- severity,
- /** A composite metric's parts, indented under it as their own rows. */
- subRows,
- /** The movement against the baseline. */
- delta,
- /**
- * The row's aside, such as its baseline. It goes in a tooltip because as
- * trailing text it broke the sparkline column and read like part of the value.
- */
- note,
- /** The finding-explaining row's annotation. Joins `note` in the info tooltip. */
- heroNote,
- series,
- windowMinutes,
- anomalyMinutes,
- seriesEndMs,
- formatPoint,
-}: {
- label: string;
- value: string;
- severity: ReportSeverityKey;
- subRows?: { label: string; value: string }[];
- delta?: ReportDelta;
- note?: string;
- heroNote?: string;
- series?: number[];
- windowMinutes: number;
- anomalyMinutes?: number;
- seriesEndMs: number | null;
- formatPoint: (value: number) => string;
-}) {
- const deltaClass =
- delta?.dir === "up"
- ? severity === "ok"
- ? "text-text-dimmed"
- : SEVERITY_TEXT[severity]
- : delta?.dir === "down"
- ? "text-text-dimmed"
- : "text-text-faint";
-
- return (
- <>
-
-
- {(subRows ?? []).map((sub) => (
- // A sub-row keeps the grid's columns so its number stays on the same
- // vertical as every other row's value.
-
- {/* Indented under the parent label, shallow enough to stay inside the
- 6rem label column. */}
- {sub.label}
-
- {sub.value}
-
-
- ))}
-
- );
-}
-
-/** The metric grid. Rows are `ReportMetricRow`s, which may expand to several. */
-export function ReportMetricList({ children }: { children: ReactNode }) {
- // The container the rows measure themselves against.
- return
{children}
;
-}
diff --git a/apps/webapp/app/components/dashboard-agent/view-actions.test.ts b/apps/webapp/app/components/dashboard-agent/view-actions.test.ts
deleted file mode 100644
index a9914da14..000000000
--- a/apps/webapp/app/components/dashboard-agent/view-actions.test.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { ActionsBlockAction } from "@internal/dashboard-agent-contracts";
-import { readFileSync } from "node:fs";
-import { describe, expect, it } from "vitest";
-import { answerContinuesAfter, renderableActions } from "./view-actions";
-
-const askAction: ActionsBlockAction = {
- label: "Investigate it",
- intent: { kind: "ask", prompt: "Investigate the send-order-receipt failures." },
-};
-
-describe("renderableActions", () => {
- it("drops a navigate action whose target isn't a trigger:// URI", () => {
- const actions: ActionsBlockAction[] = [
- askAction,
- { label: "Runs", intent: { kind: "navigate", target: "/runs?status=FAILED" } },
- ];
- expect(renderableActions(actions)).toEqual([askAction]);
- });
-
- it("keeps a navigate action with a canonical target", () => {
- const navigate: ActionsBlockAction = {
- label: "See its failed runs",
- intent: { kind: "navigate", target: "trigger://proj_abc/env_abc/runs" },
- };
- expect(renderableActions([navigate])).toEqual([navigate]);
- });
-
- it("can filter every action out, leaving nothing to render", () => {
- expect(
- renderableActions([{ label: "Nowhere", intent: { kind: "navigate", target: "nope" } }])
- ).toEqual([]);
- });
-});
-
-describe("keep digging, only while there is digging left", () => {
- const card = { type: "data-view" };
- const text = (t: string) => ({ type: "text", text: t });
-
- it("sees the answer the turn went on to give", () => {
- expect(answerContinuesAfter([card, text("so here is why")] as never, 0)).toBe(true);
- });
-
- it("leaves a card the turn ended on", () => {
- expect(answerContinuesAfter([text("looking"), card] as never, 1)).toBe(false);
- // An empty trailing text part is not an answer.
- expect(answerContinuesAfter([card, text(" ")] as never, 0)).toBe(false);
- });
-});
-
-describe("ActionsBlock", () => {
- const source = readFileSync(new URL("./ActionsBlock.tsx", import.meta.url), "utf8");
-
- it("hands the action's own intent to the host, and renders nothing without one", () => {
- expect(source).toContain("onIntent(action.intent");
- expect(source).toContain("if (!onIntent || renderable.length === 0) return null;");
- });
-
- it("filters through the shared filter rather than rendering every action", () => {
- expect(source).toContain("renderableActions(block.actions)");
- });
-
- it("is a pure component: no app hooks, no server module, no Remix", () => {
- expect(source).not.toMatch(/from\s+"~\/hooks\//);
- expect(source).not.toMatch(/from\s+"@remix-run\//);
- expect(source).not.toMatch(/\.server"/);
- });
-});
diff --git a/apps/webapp/app/components/dashboard-agent/view-actions.ts b/apps/webapp/app/components/dashboard-agent/view-actions.ts
deleted file mode 100644
index 1d59d20b0..000000000
--- a/apps/webapp/app/components/dashboard-agent/view-actions.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// A navigate target is a plain string at the contract boundary, so only targets
-// that parse become buttons: a hallucinated URI costs a button, never a dead click.
-import {
- isTriggerUri,
- type ActionsBlockAction,
- type ChartAction,
-} from "@internal/dashboard-agent-contracts";
-
-type CardAction = ChartAction | ActionsBlockAction;
-
-export function renderableActions(actions: T[]): T[] {
- return actions.filter((action) => {
- const intent: CardAction["intent"] = action.intent;
- return intent.kind !== "navigate" || isTriggerUri(intent.target);
- });
-}
-
-/**
- * "Keep digging" asks the agent to carry on — which is pointless once it already has.
- * A turn that renders an inconclusive card and then keeps answering leaves the button
- * offering work that is already done.
- */
-export function answerContinuesAfter(parts: { type: string; text?: string }[], index: number) {
- return parts
- .slice(index + 1)
- .some((part) => part.type === "text" && (part.text ?? "").trim().length > 0);
-}
diff --git a/apps/webapp/app/components/dashboard-agent/view-blocks.test.ts b/apps/webapp/app/components/dashboard-agent/view-blocks.test.ts
deleted file mode 100644
index 9df716b9e..000000000
--- a/apps/webapp/app/components/dashboard-agent/view-blocks.test.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
- blockIdentity,
- blockKey,
- latestRevisionBlocks,
- latestRevisionEntries,
-} from "./view-blocks";
-
-const enveloped = (id: string, revision: number, type = "diagnosis") => ({ type, id, revision });
-
-describe("latestRevisionBlocks", () => {
- it("keeps every block when none carry an envelope", () => {
- const blocks = [{ type: "diagnosis" }, { type: "chart" }, { type: "diagnosis" }];
- expect(latestRevisionBlocks(blocks)).toEqual(blocks);
- });
-
- it("collapses revisions of the same (type, id) to the highest revision", () => {
- const blocks = [enveloped("d1", 1), enveloped("d1", 3), enveloped("d1", 2)];
- expect(latestRevisionBlocks(blocks)).toEqual([enveloped("d1", 3)]);
- });
-
- it("keeps the last block on a revision tie", () => {
- const first = { type: "diagnosis", id: "d1", revision: 2, summary: "old" };
- const second = { type: "diagnosis", id: "d1", revision: 2, summary: "new" };
- expect(latestRevisionBlocks([first, second])).toEqual([second]);
- });
-
- it("treats a missing revision as 0", () => {
- const blocks = [{ type: "diagnosis", id: "d1" }, enveloped("d1", 1)];
- expect(latestRevisionBlocks(blocks)).toEqual([enveloped("d1", 1)]);
- });
-
- it("does not group across types or ids", () => {
- const blocks = [enveloped("d1", 1), enveloped("d1", 1, "chart"), enveloped("d2", 1)];
- expect(latestRevisionBlocks(blocks)).toEqual(blocks);
- });
-
- it("keeps envelope-less blocks alongside collapsed ones, in order", () => {
- const legacy = { type: "chart" };
- const blocks = [enveloped("d1", 1), legacy, enveloped("d1", 2)];
- expect(latestRevisionBlocks(blocks)).toEqual([legacy, enveloped("d1", 2)]);
- });
-
- it("collapses an investigation's revisions to the current one", () => {
- const revision = (n: number, outcome: string) => ({
- type: "investigation",
- id: "inv_abc123",
- revision: n,
- version: 1,
- investigation: { outcome },
- });
- const blocks = [
- revision(0, "in_progress"),
- revision(1, "in_progress"),
- revision(2, "concluded"),
- ];
- expect(latestRevisionBlocks(blocks)).toEqual([revision(2, "concluded")]);
- });
-
- it("keeps two different investigations apart", () => {
- const blocks = [enveloped("inv_1", 1, "investigation"), enveloped("inv_2", 0, "investigation")];
- expect(latestRevisionBlocks(blocks)).toEqual(blocks);
- });
-
- it("tolerates a non-array", () => {
- expect(latestRevisionBlocks(undefined as unknown as unknown[])).toEqual([]);
- });
-});
-
-/**
- * The positions are what `ViewBlocks` keys envelope-less blocks on. Looking one up afterwards
- * with `indexOf` answers with the first equal block, so two of them collide on one React key.
- */
-describe("latestRevisionEntries", () => {
- it("reports each survivor's position in the original array", () => {
- const legacy = { type: "chart" };
- const blocks = [enveloped("d1", 1), legacy, enveloped("d1", 2)];
- expect(latestRevisionEntries(blocks)).toEqual([
- { block: legacy, index: 1 },
- { block: enveloped("d1", 2), index: 2 },
- ]);
- });
-
- it("gives two occurrences of the same block object distinct positions", () => {
- const repeated = { type: "chart" };
- const entries = latestRevisionEntries([repeated, repeated]);
- expect(entries.map((entry) => entry.index)).toEqual([0, 1]);
- expect(new Set(entries.map((entry) => blockKey(entry.block, entry.index))).size).toBe(2);
- });
-
- it("agrees with `latestRevisionBlocks` on which blocks survive", () => {
- const blocks = [enveloped("d1", 1), { type: "chart" }, enveloped("d1", 2)];
- expect(latestRevisionEntries(blocks).map((entry) => entry.block)).toEqual(
- latestRevisionBlocks(blocks)
- );
- });
-
- it("tolerates a non-array", () => {
- expect(latestRevisionEntries(undefined as unknown as unknown[])).toEqual([]);
- });
-});
-
-describe("blockIdentity / blockKey", () => {
- it("identifies enveloped blocks by type and id", () => {
- expect(blockIdentity(enveloped("d1", 1))).toBe("diagnosis::d1");
- });
-
- it("has no identity without a usable id", () => {
- expect(blockIdentity({ type: "diagnosis" })).toBeUndefined();
- expect(blockIdentity({ type: "diagnosis", id: "" })).toBeUndefined();
- expect(blockIdentity({ id: "d1" })).toBeUndefined();
- expect(blockIdentity(null)).toBeUndefined();
- });
-
- it("falls back to the index as the key", () => {
- expect(blockKey({ type: "diagnosis" }, 2)).toBe("index:2");
- expect(blockKey(enveloped("d1", 1), 2)).toBe("diagnosis::d1");
- });
-});
diff --git a/apps/webapp/app/components/dashboard-agent/view-blocks.ts b/apps/webapp/app/components/dashboard-agent/view-blocks.ts
deleted file mode 100644
index 1b7379bef..000000000
--- a/apps/webapp/app/components/dashboard-agent/view-blocks.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-// Envelope is `blockEnvelopeSchema` in `@internal/dashboard-agent-contracts`. Blocks
-// arrive as tool output, so every read here is defensive rather than typed.
-
-type MaybeEnveloped = {
- type?: unknown;
- id?: unknown;
- revision?: unknown;
-};
-
-// Undefined when the block has no envelope; such blocks are never grouped.
-export function blockIdentity(block: unknown): string | undefined {
- const { type, id } = (block ?? {}) as MaybeEnveloped;
- if (typeof id !== "string" || id.length === 0) return undefined;
- if (typeof type !== "string") return undefined;
- return `${type}::${id}`;
-}
-
-function blockRevision(block: unknown): number {
- const { revision } = (block ?? {}) as MaybeEnveloped;
- return typeof revision === "number" && Number.isFinite(revision) ? revision : 0;
-}
-
-// Falls back to the array index: pre-envelope blocks have nothing stable to key on.
-export function blockKey(block: unknown, index: number): string {
- return blockIdentity(block) ?? `index:${index}`;
-}
-
-/**
- * Latest-wins within one array only: highest `revision` at the winner's position, ties to the
- * last. Blocks without an envelope are all kept, in order. Each survivor keeps the index it had
- * in `blocks`, which is what an envelope-less block is keyed on — a search for it afterwards
- * would answer with the first equal block, not this one.
- */
-export function latestRevisionEntries(blocks: readonly T[]): { block: T; index: number }[] {
- if (!Array.isArray(blocks)) return [];
-
- const winnerIndexByIdentity = new Map();
- blocks.forEach((block, index) => {
- const identity = blockIdentity(block);
- if (identity === undefined) return;
- const currentWinner = winnerIndexByIdentity.get(identity);
- if (
- currentWinner === undefined ||
- blockRevision(blocks[currentWinner]) <= blockRevision(block)
- ) {
- winnerIndexByIdentity.set(identity, index);
- }
- });
-
- const entries: { block: T; index: number }[] = [];
- blocks.forEach((block, index) => {
- const identity = blockIdentity(block);
- if (identity === undefined || winnerIndexByIdentity.get(identity) === index) {
- entries.push({ block, index });
- }
- });
- return entries;
-}
-
-/** {@link latestRevisionEntries} without the positions. */
-export function latestRevisionBlocks(blocks: readonly T[]): T[] {
- return latestRevisionEntries(blocks).map((entry) => entry.block);
-}
diff --git a/apps/webapp/app/components/dashboard-agent/view-catalog.test.ts b/apps/webapp/app/components/dashboard-agent/view-catalog.test.ts
deleted file mode 100644
index 8b36e0c3f..000000000
--- a/apps/webapp/app/components/dashboard-agent/view-catalog.test.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Contract coverage, not a snapshot: every block the schema union allows must find a
- * renderer in `ViewBlocks`. The block types are read off `viewBlockSchema`, so adding a
- * union member without a `case` fails here instead of rendering an empty div in the panel.
- */
-import { viewBlockSchema, type EnvelopedViewBlock } from "@internal/dashboard-agent-contracts";
-import { isValidElement } from "react";
-import { describe, expect, it } from "vitest";
-import { ViewBlocks } from "./view-catalog";
-
-const envelope = (id: string, revision = 0) => ({ id, revision, version: 1 });
-
-// Typed by the union's discriminant: a new block type stops typechecking until it has one.
-const FIXTURES: Record = {
- diagnosis: {
- ...envelope("diagnosis-1"),
- type: "diagnosis",
- runId: "run_abc123",
- summary: "The run failed on its last retry.",
- category: "user_code_error",
- likelyCause: "A null order id reaches the receipt builder.",
- confidence: "high",
- evidence: [{ type: "error", detail: "TypeError: cannot read id of null" }],
- nextSteps: ["Guard the receipt builder against a missing order."],
- },
- chart: {
- ...envelope("chart-1"),
- type: "chart",
- query: "SELECT toStartOfHour(created_at) AS bucket, count() AS runs FROM runs",
- chartType: "line",
- xAxisColumn: "bucket",
- yAxisColumns: ["runs"],
- },
- actions: {
- ...envelope("actions-1"),
- type: "actions",
- actions: [{ label: "See its failed runs", intent: { kind: "ask", prompt: "Show them" } }],
- },
- report: {
- ...envelope("report-1"),
- type: "report",
- revision: 0,
- asOf: "2026-01-01T00:00:00.000Z",
- vm: {
- title: "health",
- scope: "environment",
- period: "24h",
- generatedAt: "2026-01-01T00:00:00.000Z",
- windowMinutes: 1440,
- summary: { severity: "ok", statements: [] },
- findings: [],
- metrics: [],
- facts: {},
- links: [],
- footer: [],
- },
- },
- investigation: {
- ...envelope("investigation-1"),
- type: "investigation",
- investigation: {
- outcome: "concluded",
- severity: "crit",
- confidence: "high",
- title: "send-order-receipt fails on every retry",
- headline: "Every attempt dies on a null order id.",
- remediation: "Guard the receipt builder against a missing order.",
- hypotheses: [],
- evidence: [],
- },
- },
-};
-
-const blockTypes = viewBlockSchema.options.map((option) => option.shape.type.value);
-
-function renderedChildren(blocks: EnvelopedViewBlock[]) {
- const tree = ViewBlocks({ blocks, onIntent: () => {} });
- expect(isValidElement(tree)).toBe(true);
- const children = (tree as { props: { children: unknown } }).props.children;
- return Array.isArray(children) ? children : [children];
-}
-
-describe("ViewBlocks covers the block contract", () => {
- it("knows every type the schema union allows", () => {
- expect(new Set(blockTypes)).toEqual(new Set(Object.keys(FIXTURES)));
- });
-
- it.each(blockTypes)("returns a renderer for a %s block", (type) => {
- const fixture = FIXTURES[type as EnvelopedViewBlock["type"]];
- expect(fixture, `no fixture for the ${type} block`).toBeDefined();
- // Parsing first proves the fixture is a block the producer could really emit.
- const block = viewBlockSchema.parse(fixture) as EnvelopedViewBlock;
-
- const [rendered] = renderedChildren([block]);
- expect(rendered, `ViewBlocks renders nothing for a ${type} block`).not.toBeNull();
- expect(isValidElement(rendered)).toBe(true);
- });
-
- it("renders every block type together, in order", () => {
- const blocks = blockTypes.map((type) =>
- viewBlockSchema.parse(FIXTURES[type as EnvelopedViewBlock["type"]])
- ) as EnvelopedViewBlock[];
- const rendered = renderedChildren(blocks);
- expect(rendered).toHaveLength(blockTypes.length);
- expect(rendered.every((node) => isValidElement(node))).toBe(true);
- });
-});
diff --git a/apps/webapp/app/components/dashboard-agent/view-catalog.tsx b/apps/webapp/app/components/dashboard-agent/view-catalog.tsx
index 2e0887703..ab9fdbb13 100644
--- a/apps/webapp/app/components/dashboard-agent/view-catalog.tsx
+++ b/apps/webapp/app/components/dashboard-agent/view-catalog.tsx
@@ -1,63 +1,25 @@
-import type { AgentIntent, ViewBlock } from "@internal/dashboard-agent-contracts";
-import { ActionsBlock } from "./ActionsBlock";
+import type { ViewBlock } from "@internal/dashboard-agent";
import { AgentChart } from "./AgentChart";
-import { InvestigationCard } from "./InvestigationCard";
-import { ReportView, type ResolvedUri } from "./ReportView";
import { RunDiagnosisCard } from "./RunDiagnosisCard";
-import { blockKey, latestRevisionEntries } from "./view-blocks";
-// Unknown block types are skipped, so an older or newer agent cannot render
-// arbitrary content. A new block needs a `case` here and a `viewBlockSchema` member.
-export function ViewBlocks({
- blocks,
- onIntent,
- resolveUri,
- pagePaths,
- answered = false,
-}: {
- blocks: ViewBlock[];
- onIntent?: (intent: AgentIntent) => void;
- resolveUri?: (uri: string) => ResolvedUri | null;
- pagePaths?: Record;
- /** The turn kept answering after this card, so "keep digging" has nothing to ask for. */
- answered?: boolean;
-}) {
+// The render registry for the dashboard agent's view catalog — our small
+// "generative UI" layer. The agent emits a `render_view` tool call whose output
+// is `{ blocks: ViewBlock[] }` (a spec drawn from the catalog defined in
+// internal-packages/dashboard-agent). Here we map each block `type` to its
+// component. Unknown types are skipped, so an older/newer agent can never
+// render arbitrary content — same guarantee a generative-UI framework gives,
+// without the dependency. Add a block by adding a `case` here and a union
+// member in the package's `viewBlockSchema`.
+export function ViewBlocks({ blocks }: { blocks: ViewBlock[] }) {
if (!Array.isArray(blocks)) return null;
return (
- {latestRevisionEntries(blocks).map(({ block, index }) => {
- // The original array's index, so collapsing a revision above an
- // envelope-less block can't shift its key.
- const key = blockKey(block, index);
+ {blocks.map((block, i) => {
switch (block.type) {
case "diagnosis":
- return ;
+ return ;
case "chart":
- return ;
- case "actions":
- return ;
- // Revisions share the investigationId, so latest-wins keeps one card.
- case "investigation":
- return (
-
- );
- case "report":
- return (
-
- );
+ return ;
default:
return null;
}
diff --git a/apps/webapp/app/routes/storybook.ai-agent/route.tsx b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
index f69a43c57..010f9ac65 100644
--- a/apps/webapp/app/routes/storybook.ai-agent/route.tsx
+++ b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
@@ -11,7 +11,6 @@ import { Header1, Header2 } from "~/components/primitives/Headers";
import { Paragraph } from "~/components/primitives/Paragraph";
import {
AgentDotMatrix,
- AgentMonoLogo,
DOT_MATRIX_PALETTES,
DOT_SHAPES,
EXTRA_FACE_SHAPES,
@@ -27,7 +26,7 @@ export default function Story() {
return (
- Trigger Agent — Icons & Buttons
+ AI agent
A resting logo that animates while the agent thinks. Each tab is a separate experiment.
@@ -60,6 +59,12 @@ export default function Story() {
// --- Dot matrix (5x5) ---------------------------------------------------------
+// Dark-ink mono ramp for light surfaces (the built-in mono palette is white-based).
+const LIGHT_MONO = {
+ stops: ["#0d0e12", "#1a1b1f", "#3b3e45"] as [string, string, string],
+ glow: "#1a1b1f",
+};
+
function DotMatrixTab() {
return (
@@ -78,8 +83,8 @@ function DotMatrixTab() {
))}
- The ask-trigger Button variant. Mono logo, click
- to think for 5s.
+ The ask-ai Button variant. Mono logo, click to
+ think for 5s.
{(
@@ -90,7 +95,7 @@ function DotMatrixTab() {
] as [ButtonVariant, number, string][]
).map(([variant, matrixSize, label]) => (
-
+
{label}
))}
@@ -101,7 +106,7 @@ function DotMatrixTab() {
{[14, 15, 16].map((s) => (
-
+
{s}px icon
))}
@@ -128,10 +133,10 @@ function DotMatrixTab() {
/>
-
+
@@ -180,7 +185,7 @@ function DotMatrixTab() {
);
}
-function AskTriggerButton({ variant, matrixSize }: { variant: ButtonVariant; matrixSize: number }) {
+function AskAiButton({ variant, matrixSize }: { variant: ButtonVariant; matrixSize: number }) {
const [active, setActive] = useState(false);
const timeout = useRef>();
@@ -197,9 +202,17 @@ function AskTriggerButton({ variant, matrixSize }: { variant: ButtonVariant; mat
}
+ LeadingIcon={
+
+ }
>
- Ask Trigger
+ Ask AI
);
}
@@ -220,7 +233,16 @@ function FaceButton({ name }: { name: DotShapeName }) {
}
+ LeadingIcon={
+
+ }
>
{name}
diff --git a/apps/webapp/test/__snapshots__/reportRenderParity.test.ts.snap b/apps/webapp/test/__snapshots__/reportRenderParity.test.ts.snap
deleted file mode 100644
index 9ba7e1dc7..000000000
--- a/apps/webapp/test/__snapshots__/reportRenderParity.test.ts.snap
+++ /dev/null
@@ -1,161 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`ANSI surface > paints the same layout (degraded) 1`] = `
-"/report health prod · last 1h · vs your 7d normal
-
-✕ Flow stalled — at your env concurrency limit for the last 38 min
-
- concurrency 50/50 ▁▂▃▄▅▆▇█ 38 min at limit
-
- pending 4,812 ↑ 120× ▁▂▃▄▅▆▇█ (normal ~40)
-
- start latency p95 43s ↑ 6× ▁▂▃▄▅▆▇█ (normal ~7s)
-
- throughput −180/min
- done 820/min
- triggered 1,000/min
-
- why: 71% of pending is demo-email-sends
- not your code — failures and durations normal
- runs are finishing at ~820/min
-
-✓ EXECUTION runs are executing normally
-
-✓ LIVENESS fresh — telemetry current, updated 18s ago
-
- read: limit saturated → incoming work exceeds capacity → backlog grows
- NOT a code problem
-
-→ Contact us to raise the limit
- Read concurrency docs
- or do nothing — backlog drains in ~26.7 min once triggers ease"
-`;
-
-exports[`ANSI surface > paints the same layout (empty) 1`] = `
-"/report health prod · last 1h
-
-✓ health ok
-
-✓ data fresh
-
-→ nothing to do"
-`;
-
-exports[`ANSI surface > paints the same layout (healthy) 1`] = `
-"/report health prod · last 1h · vs your 7d normal
-
-✓ Flow healthy — starting normally
-
- start latency p95 6.8s → flat ▇▆▁▅█▂▃█ (normal ~7s)
-
- pending 34 → flat ▇▆▁▅█▂▃█ (normal ~40)
-
- throughput +12/min
- done 842/min
- triggered 830/min
-
-✓ EXECUTION runs are executing normally
-
-✓ LIVENESS fresh — telemetry current, updated 21s ago
-
- read: runs are starting on time
- runs are completing normally
-
-→ nothing to do"
-`;
-
-exports[`ANSI surface > paints the same layout (untrustworthy) 1`] = `
-"/report health ⚑ stale data prod · last 1h · vs your 7d normal
-
-✕ Flow unknown — data stale
-
-⚑ The telemetry behind this report is stale, so the numbers below are informational only.
-
-✕ EXECUTION execution can't be assessed — the telemetry is stale
-
-✕ LIVENESS stale — no telemetry in 21m
-
- liveness 21m
-
-→ Check control plane"
-`;
-
-exports[`markdown surface > renders (degraded) 1`] = `
-"/report health prod · last 1h · vs your 7d normal
-
-🔴 Flow stalled — at your env concurrency limit for the last 38 min
-
- concurrency 50/50 ▁▂▃▄▅▆▇█ 38 min at limit
-
- pending 4,812 ↑ 120× ▁▂▃▄▅▆▇█ (normal ~40)
-
- start latency p95 43s ↑ 6× ▁▂▃▄▅▆▇█ (normal ~7s)
-
- throughput −180/min
- done 820/min
- triggered 1,000/min
-
- why: 71% of pending is demo-email-sends
- not your code — failures and durations normal
- runs are finishing at ~820/min
-
-🟢 EXECUTION runs are executing normally
-
-🟢 LIVENESS fresh — telemetry current, updated 18s ago
-
- read: limit saturated → incoming work exceeds capacity → backlog grows
- NOT a code problem
-
-→ Contact us to raise the limit
- Read concurrency docs
- or do nothing — backlog drains in ~26.7 min once triggers ease"
-`;
-
-exports[`markdown surface > renders (empty) 1`] = `
-"/report health prod · last 1h
-
-🟢 health ok
-
-🟢 data fresh
-
-→ nothing to do"
-`;
-
-exports[`markdown surface > renders (healthy) 1`] = `
-"/report health prod · last 1h · vs your 7d normal
-
-🟢 Flow healthy — starting normally
-
- start latency p95 6.8s → flat ▇▆▁▅█▂▃█ (normal ~7s)
-
- pending 34 → flat ▇▆▁▅█▂▃█ (normal ~40)
-
- throughput +12/min
- done 842/min
- triggered 830/min
-
-🟢 EXECUTION runs are executing normally
-
-🟢 LIVENESS fresh — telemetry current, updated 21s ago
-
- read: runs are starting on time
- runs are completing normally
-
-→ nothing to do"
-`;
-
-exports[`markdown surface > renders (untrustworthy) 1`] = `
-"/report health 🚩 stale data prod · last 1h · vs your 7d normal
-
-🔴 Flow unknown — data stale
-
-🚩 The telemetry behind this report is stale, so the numbers below are informational only.
-
-🔴 EXECUTION execution can't be assessed — the telemetry is stale
-
-🔴 LIVENESS stale — no telemetry in 21m
-
- liveness 21m
-
-→ Check control plane"
-`;