feat(dashboard): improve cost breakdowns (#1181)

Cost reporting in the dashboard now keeps long conversation cost
tooltips aligned with their trigger instead of opening below it. The
Memories overview replaces extraction-only bars with a stacked
extraction-and-recall chart, including per-series totals and accessible
labels across the existing time ranges.

The memory dashboard endpoint now returns a required 90-day `recallDays`
series sourced from `memories_recalled`. The strict server and client
schemas move together in this repository, and the updated contract is
covered by the memory REST integration test.

Dashboard tests, package typechecks, memory lint, and the Chromium
memory-page journey pass.

Author: dcramer

packages/junior-dashboard/e2e/harness.ts

@@ -223,6 +223,11 @@ export async function mockDashboardApis(page: Page) {
           events: index % 3 === 0 ? 2 : 1,
         })),
         generatedAt: "2026-07-30T12:00:00.000Z",
+        recallDays: days.map((day, index) => ({
+          costUsd: index % 5 === 0 ? 0.04 : index % 7 === 0 ? 0.015 : 0,
+          date: day.date,
+          events: index % 4 === 0 ? 3 : 1,
+        })),
         stats: {
           active: 210,
           automatic: 189,

packages/junior-dashboard/e2e/user-pages.spec.ts

@@ -47,6 +47,13 @@ test("opens a registered plugin page from primary navigation", async ({
     page.getByRole("heading", { name: "Activity over time" }),
   ).toBeVisible();
   await expect(page.getByRole("heading", { name: /^\$/ })).toBeVisible();
+  await expect(page.getByText(/^Extraction \$/)).toBeVisible();
+  await expect(page.getByText(/^Recall \$/)).toBeVisible();
+  await expect(
+    page.getByRole("img", {
+      name: "Memory extraction and recall cost during the last 30 days",
+    }),
+  ).toBeVisible();
   await expect(
     page.getByRole("heading", { name: "What Junior remembers" }),
   ).toBeVisible();
@@ -59,6 +66,11 @@ test("opens a registered plugin page from primary navigation", async ({
   await expect(sevenDays).toHaveAttribute("aria-pressed", "true");
   await ninetyDays.click();
   await expect(ninetyDays).toHaveAttribute("aria-pressed", "true");
+  const costRange = page.getByLabel("Memory cost range");
+  await expect(costRange.getByRole("button", { name: "30d" })).toHaveAttribute(
+    "aria-pressed",
+    "true",
+  );
   await page
     .getByRole("navigation", { name: "Memory navigation" })
     .getByRole("link", { name: "Memories" })

packages/junior-dashboard/src/client/components/Metric.tsx

@@ -33,6 +33,7 @@ function clamp(value: number, min: number, max: number): number {
 function tooltipPosition(
   trigger: HTMLElement,
   align: "left" | "right" | undefined,
+  topAligned: boolean,
   wide: boolean,
 ): TooltipPosition {
   const margin = 16;
@@ -45,7 +46,7 @@ function tooltipPosition(
     left: Math.round(
       clamp(preferredLeft, margin, viewportWidth - width - margin),
     ),
-    top: Math.round(rect.bottom + 8),
+    top: Math.round(topAligned ? rect.top : rect.bottom + 8),
     width,
   };
 }
@@ -100,6 +101,7 @@ export function MetricValue(props: {
   className?: string;
   tooltip?: MetricTooltipLine[];
   tooltipColumns?: MetricTooltipLine[][];
+  tooltipTopAligned?: boolean;
 }) {
   const tooltipId = useId();
   const triggerRef = useRef<HTMLSpanElement>(null);
@@ -118,6 +120,7 @@ export function MetricValue(props: {
       tooltipPosition(
         triggerRef.current,
         props.align,
+        Boolean(props.tooltipTopAligned),
         Boolean(tooltipColumns?.length),
       ),
     );

packages/junior-dashboard/src/client/conversations/TelemetryMetrics.tsx

@@ -228,6 +228,7 @@ export function CostMetric(props: {
   return (
     <MetricValue
       align={props.align}
+      tooltipTopAligned
       {...costTooltip(props.summary, props.modelUsage, props.auxiliaryCosts)}
     >
       {formatCostSummary(total)}

…nt/pages/memory/MemoryExtractionCost.tsx …/client/pages/memory/MemoryCostChart.tsxpackages/junior-dashboard/src/client/pages/memory/MemoryExtractionCost.tsx renamed to packages/junior-dashboard/src/client/pages/memory/MemoryCostChart.tsx packages/junior-dashboard/src/client/pages/memory/MemoryExtractionCost.tsx renamed to packages/junior-dashboard/src/client/pages/memory/MemoryCostChart.tsx

@@ -3,17 +3,40 @@ import { useState } from "react";
 import { Card } from "../../components/layout/Card";
 import { formatCostSummary } from "../../format";
 import { cn } from "../../styles";
-import type { MemoryExtractionDay } from "./memoryDashboard";
+import type { MemoryCostDay } from "./memoryDashboard";
 
 type MemoryRange = 7 | 30 | 90;
 
-/** Render passive memory extraction cost from durable plugin events. */
-export function MemoryExtractionCost(props: { days: MemoryExtractionDay[] }) {
+/** Render stacked memory extraction and recall cost from durable plugin events. */
+export function MemoryCostChart(props: {
+  extractionDays: MemoryCostDay[];
+  recallDays: MemoryCostDay[];
+}) {
   const [range, setRange] = useState<MemoryRange>(30);
-  const days = props.days.slice(-range);
-  const total = days.reduce((sum, day) => sum + day.costUsd, 0);
-  const runs = days.reduce((sum, day) => sum + day.events, 0);
-  const maximum = Math.max(0.01, ...days.map((day) => day.costUsd));
+  const recallByDate = new Map(props.recallDays.map((day) => [day.date, day]));
+  const days = props.extractionDays.slice(-range).map((extraction) => ({
+    date: extraction.date,
+    extraction,
+    recall: recallByDate.get(extraction.date) ?? {
+      costUsd: 0,
+      date: extraction.date,
+      events: 0,
+    },
+  }));
+  const extractionTotal = days.reduce(
+    (sum, day) => sum + day.extraction.costUsd,
+    0,
+  );
+  const recallTotal = days.reduce((sum, day) => sum + day.recall.costUsd, 0);
+  const total = extractionTotal + recallTotal;
+  const runs = days.reduce(
+    (sum, day) => sum + day.extraction.events + day.recall.events,
+    0,
+  );
+  const maximum = Math.max(
+    0.01,
+    ...days.map((day) => day.extraction.costUsd + day.recall.costUsd),
+  );
   const width = 720;
   const height = 200;
   const left = 48;
@@ -29,17 +52,34 @@ export function MemoryExtractionCost(props: { days: MemoryExtractionDay[] }) {
       <div className="flex flex-wrap items-start justify-between gap-4">
         <div>
           <div className="font-mono text-[0.6rem] uppercase tracking-[0.16em] text-cyan-200/65">
-            Extraction cost
+            Memory cost
           </div>
           <h2 className="mt-1 mb-0 font-display text-xl font-medium text-dashboard-text">
             {formatCostSummary({ total })}
           </h2>
           <p className="mt-1 mb-0 font-mono text-[0.64rem] leading-relaxed text-dashboard-text-muted">
-            System-wide estimate across {runs.toLocaleString()} passive runs.
+            System-wide estimate across {formatRunCount(runs)} spanning
+            extraction and recall.
           </p>
+          <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 font-mono text-[0.6rem] text-dashboard-text-muted">
+            <span className="inline-flex items-center gap-1.5">
+              <span
+                aria-hidden="true"
+                className="h-2 w-2 rounded-[1px] bg-cyan-300"
+              />
+              Extraction {formatCostSummary({ total: extractionTotal })}
+            </span>
+            <span className="inline-flex items-center gap-1.5">
+              <span
+                aria-hidden="true"
+                className="h-2 w-2 rounded-[1px] bg-fuchsia-400"
+              />
+              Recall {formatCostSummary({ total: recallTotal })}
+            </span>
+          </div>
         </div>
         <div
-          aria-label="Memory extraction cost range"
+          aria-label="Memory cost range"
           className="inline-flex rounded border border-white/[0.08] bg-black/20 p-0.5"
         >
           {([7, 30, 90] as const).map((days) => (
@@ -63,7 +103,7 @@ export function MemoryExtractionCost(props: { days: MemoryExtractionDay[] }) {
 
       <div className="relative mt-4 overflow-hidden">
         <svg
-          aria-label={`Memory extraction cost during the last ${range} days`}
+          aria-label={`Memory extraction and recall cost during the last ${range} days`}
           className="block h-auto min-h-40 w-full"
           role="img"
           viewBox={`0 0 ${width} ${height}`}
@@ -94,22 +134,39 @@ export function MemoryExtractionCost(props: { days: MemoryExtractionDay[] }) {
             );
           })}
           {days.map((day, index) => {
-            const height = (day.costUsd / maximum) * plotHeight;
+            const extractionHeight =
+              (day.extraction.costUsd / maximum) * plotHeight;
+            const recallHeight = (day.recall.costUsd / maximum) * plotHeight;
             const x = left + index * step + (step - barWidth) / 2;
+            const extractionLabel = `${formatDate(day.date)} extraction: ${formatCostSummary({ total: day.extraction.costUsd })}, ${formatRunCount(day.extraction.events)}`;
+            const recallLabel = `${formatDate(day.date)} recall: ${formatCostSummary({ total: day.recall.costUsd })}, ${formatRunCount(day.recall.events)}`;
             return (
-              <rect
-                aria-label={`${formatDate(day.date)}: ${formatCostSummary({ total: day.costUsd })}, ${day.events} runs`}
-                fill="#67e8f9"
-                height={height}
-                key={day.date}
-                opacity={day.costUsd > 0 ? 0.82 : 0.1}
-                rx="1"
-                width={barWidth}
-                x={x}
-                y={top + plotHeight - height}
-              >
-                <title>{`${formatDate(day.date)}: ${formatCostSummary({ total: day.costUsd })}, ${day.events} runs`}</title>
-              </rect>
+              <g key={day.date}>
+                <rect
+                  aria-label={extractionLabel}
+                  fill="#67e8f9"
+                  height={extractionHeight}
+                  opacity={day.extraction.costUsd > 0 ? 0.82 : 0.1}
+                  rx="1"
+                  width={barWidth}
+                  x={x}
+                  y={top + plotHeight - extractionHeight}
+                >
+                  <title>{extractionLabel}</title>
+                </rect>
+                <rect
+                  aria-label={recallLabel}
+                  fill="#e879f9"
+                  height={recallHeight}
+                  opacity={day.recall.costUsd > 0 ? 0.82 : 0.1}
+                  rx="1"
+                  width={barWidth}
+                  x={x}
+                  y={top + plotHeight - extractionHeight - recallHeight}
+                >
+                  <title>{recallLabel}</title>
+                </rect>
+              </g>
             );
           })}
           {[0, Math.floor((days.length - 1) / 2), days.length - 1].map(
@@ -146,14 +203,18 @@ export function MemoryExtractionCost(props: { days: MemoryExtractionDay[] }) {
         </svg>
         {runs === 0 ? (
           <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-mono text-[0.68rem] text-dashboard-text-muted">
-            No passive extractions ran in this period.
+            No memory extraction or recall ran in this period.
           </div>
         ) : null}
       </div>
     </Card>
   );
 }
 
+function formatRunCount(count: number): string {
+  return `${count.toLocaleString()} ${count === 1 ? "run" : "runs"}`;
+}
+
 function formatDate(date: string): string {
   return new Intl.DateTimeFormat("en-US", {
     day: "numeric",

packages/junior-dashboard/src/client/pages/memory/MemoryPage.tsx

@@ -35,7 +35,7 @@ import {
   useMemoryDashboardData,
 } from "./memoryDashboard";
 import { MemoryTimeline } from "./MemoryTimeline";
-import { MemoryExtractionCost } from "./MemoryExtractionCost";
+import { MemoryCostChart } from "./MemoryCostChart";
 
 /** Render the temporary first-class dashboard experience for memory. */
 export function MemoryPage(props: { page: PluginUserPageLink }) {
@@ -108,7 +108,10 @@ function MemoryOverview() {
     <>
       <section className="grid gap-4 xl:grid-cols-2">
         <MemoryTimeline days={dashboardQuery.data.days} />
-        <MemoryExtractionCost days={dashboardQuery.data.extractionDays} />
+        <MemoryCostChart
+          extractionDays={dashboardQuery.data.extractionDays}
+          recallDays={dashboardQuery.data.recallDays}
+        />
       </section>
       <MemorySummary data={dashboardQuery.data} />
       <section className="grid gap-4 md:grid-cols-2">

packages/junior-dashboard/src/client/pages/memory/memoryDashboard.ts

@@ -11,7 +11,7 @@ const memoryDaySchema = z
   })
   .strict();
 
-const memoryExtractionDaySchema = z
+const memoryCostDaySchema = z
   .object({
     costUsd: z.number().finite().min(0),
     date: z.iso.date(),
@@ -22,8 +22,9 @@ const memoryExtractionDaySchema = z
 export const memoryDashboardSchema = z
   .object({
     days: z.array(memoryDaySchema).length(90),
-    extractionDays: z.array(memoryExtractionDaySchema).length(90),
+    extractionDays: z.array(memoryCostDaySchema).length(90),
     generatedAt: z.iso.datetime(),
+    recallDays: z.array(memoryCostDaySchema).length(90),
     stats: z
       .object({
         active: z.number().int().min(0),
@@ -43,7 +44,7 @@ export const memoryDashboardSchema = z
 
 export type MemoryDashboardData = z.output<typeof memoryDashboardSchema>;
 export type MemoryDay = MemoryDashboardData["days"][number];
-export type MemoryExtractionDay = MemoryDashboardData["extractionDays"][number];
+export type MemoryCostDay = MemoryDashboardData["extractionDays"][number];
 
 /** Load the viewer-scoped Memory dashboard summary. */
 export function useMemoryDashboardData() {

packages/junior-dashboard/tests/memory-cost-chart.test.tsx

@@ -0,0 +1,36 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { MemoryCostChart } from "../src/client/pages/memory/MemoryCostChart";
+
+function costDays(costUsd: number, events: number) {
+  const start = Date.parse("2026-05-02T00:00:00.000Z");
+  return Array.from({ length: 90 }, (_, index) => ({
+    costUsd: index === 89 ? costUsd : 0,
+    date: new Date(start + index * 24 * 60 * 60 * 1_000)
+      .toISOString()
+      .slice(0, 10),
+    events: index === 89 ? events : 0,
+  }));
+}
+
+describe("MemoryCostChart", () => {
+  it("stacks extraction and recall cost for each day", () => {
+    const html = renderToStaticMarkup(
+      <MemoryCostChart
+        extractionDays={costDays(0.005, 1)}
+        recallDays={costDays(0.005, 2)}
+      />,
+    );
+
+    expect(html).toContain("Memory cost");
+    expect(html).toContain("Extraction $0.005");
+    expect(html).toContain("Recall $0.005");
+    expect(html).toMatch(
+      /aria-label="Jul 30 extraction: \$0\.005, 1 run"[^>]+height="76"[^>]+y="90"/,
+    );
+    expect(html).toMatch(
+      /aria-label="Jul 30 recall: \$0\.005, 2 runs"[^>]+height="76"[^>]+y="14"/,
+    );
+  });
+});

packages/junior-dashboard/tests/telemetry-metrics.test.tsx

@@ -7,8 +7,9 @@ vi.mock("../src/client/components/Metric", () => ({
     children: ReactNode;
     tooltip?: Array<{ label?: string; value: string }>;
     tooltipColumns?: Array<Array<{ label?: string; value: string }>>;
+    tooltipTopAligned?: boolean;
   }) => (
-    <span>
+    <span data-tooltip-top-aligned={props.tooltipTopAligned || undefined}>
       {props.children}
       {[...(props.tooltip ?? []), ...(props.tooltipColumns?.flat() ?? [])].map(
         (line) => (
@@ -89,5 +90,6 @@ describe("CostMetric", () => {
     expect(html).toContain("total: $0.0018");
     expect(html).toContain("Memory recall (2): $0.0004");
     expect(html).toContain("Guardian (1): $0.0014");
+    expect(html).toContain('data-tooltip-top-aligned="true"');
   });
 });

packages/junior-memory/src/api.ts

@@ -48,7 +48,7 @@ const memoryDashboardDaySchema = z
   })
   .strict();
 
-const memoryExtractionDaySchema = z
+const memoryCostDaySchema = z
   .object({
     costUsd: z.number().finite().nonnegative(),
     date: z.iso.date(),
@@ -59,8 +59,9 @@ const memoryExtractionDaySchema = z
 export const memoryDashboardResponseSchema = z
   .object({
     days: z.array(memoryDashboardDaySchema).length(90),
-    extractionDays: z.array(memoryExtractionDaySchema).length(90),
+    extractionDays: z.array(memoryCostDaySchema).length(90),
     generatedAt: z.iso.datetime(),
+    recallDays: z.array(memoryCostDaySchema).length(90),
     stats: z
       .object({
         active: z.number().int().min(0),
@@ -155,18 +156,23 @@ export function createMemoryApi(options: MemoryApiOptions): PluginRouteApp {
           isDashboard &&
           (request.method === "GET" || request.method === "HEAD")
         ) {
-          const [stats, days, extractionDays] = await Promise.all([
+          const [stats, days, extractionDays, recallDays] = await Promise.all([
             memories.stats(),
             memories.timeline({ days: 90 }),
             options.eventStats.costsByDay({
               days: 90,
               eventName: "memories_captured",
             }),
+            options.eventStats.costsByDay({
+              days: 90,
+              eventName: "memories_recalled",
+            }),
           ]);
           const body = memoryDashboardResponseSchema.parse({
             days,
             extractionDays,
             generatedAt: new Date().toISOString(),
+            recallDays,
             stats,
           });
           return request.method === "HEAD"