fix(dashboard): Refine system dashboard UI

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

@@ -159,7 +159,7 @@ test("hydrates the built dashboard client in a real browser", async ({
 
   await page.goto(baseURL);
 
-  await expect(page.getByRole("heading", { name: "Junior" })).toBeVisible();
+  await expect(page.getByRole("link", { name: "Junior home" })).toBeVisible();
   await expect(
     page.getByRole("heading", { name: "Conversations" }),
   ).toBeVisible();

packages/junior-dashboard/src/client/App.tsx

@@ -85,15 +85,11 @@ export function DashboardShell() {
           )}
         >
           <Link
-            className="flex min-w-0 max-w-full items-center gap-3 justify-self-start text-inherit no-underline"
+            aria-label="Junior home"
+            className="flex min-w-0 max-w-full items-center justify-self-start text-inherit no-underline"
             to="/"
           >
             <JuniorLogo />
-            <div className="min-w-0 border-l border-white/10 pl-3">
-              <h1 className="m-0 font-display text-xl font-medium leading-none tracking-[-0.03em]">
-                Junior
-              </h1>
-            </div>
           </Link>
           <nav className="col-span-2 row-start-2 flex min-w-0 items-center gap-6 overflow-x-auto md:col-span-1 md:col-start-2 md:row-start-1 md:justify-self-start md:overflow-visible">
             <NavLink className={navLinkClass} to="/locations">

packages/junior-dashboard/src/client/format.ts

@@ -126,6 +126,8 @@ function formatNumber(value: number | undefined): string {
   if (number < 1000) return String(number);
 
   const units: Array<[string, number]> = [
+    ["t", 1_000_000_000_000],
+    ["b", 1_000_000_000],
     ["m", 1_000_000],
     ["k", 1_000],
   ];

packages/junior-dashboard/src/client/pages/system/PluginInventory.tsx

@@ -63,9 +63,9 @@ function PluginRosterRow(props: { row: PluginRow }) {
   const metricCount = props.row.report?.metrics?.length ?? 0;
   const recordSetCount = props.row.report?.recordSets?.length ?? 0;
   return (
-    <article className="grid min-w-0 gap-4 rounded-lg border border-white/[0.065] bg-white/[0.025] p-4 transition-colors hover:border-white/[0.11] hover:bg-white/[0.035] md:grid-cols-[minmax(12rem,1fr)_auto] md:items-center">
+    <article className="grid min-w-0 gap-3 rounded-lg border border-white/[0.065] bg-white/[0.025] px-4 py-2.5 transition-colors hover:border-white/[0.11] hover:bg-white/[0.035] md:grid-cols-[minmax(12rem,1fr)_auto] md:items-center">
       <div className="flex min-w-0 items-center gap-3">
-        <div className="grid size-10 shrink-0 place-items-center rounded border border-cyan-300/15 bg-cyan-300/[0.075] text-cyan-200">
+        <div className="grid size-9 shrink-0 place-items-center rounded border border-cyan-300/15 bg-cyan-300/[0.075] text-cyan-200">
           <Boxes aria-hidden="true" size={18} strokeWidth={1.8} />
         </div>
         <div className="min-w-0">
@@ -85,7 +85,7 @@ function PluginRosterRow(props: { row: PluginRow }) {
         </div>
       </div>
 
-      <div className="flex min-w-[10rem] items-center justify-between gap-5 rounded-lg border border-white/[0.055] bg-black/15 px-3 py-2.5 md:justify-end">
+      <div className="flex min-w-[10rem] items-center justify-between gap-5 rounded-lg border border-white/[0.055] bg-black/15 px-3 py-1.5 md:justify-end">
         <OperationalCount label="metrics" value={metricCount} />
         <OperationalCount label="datasets" value={recordSetCount} />
       </div>

packages/junior-dashboard/src/client/pages/system/SystemMetricCharts.tsx

@@ -33,7 +33,7 @@ const charts: ChartConfig[] = [
   {
     axisFormat: formatCompactNumber,
     color: "#22d3ee",
-    description: "Daily model tokens consumed across completed work.",
+    description: "Daily model tokens",
     format: formatCompactNumber,
     metric: "tokens",
     title: "Token usage",
@@ -42,7 +42,7 @@ const charts: ChartConfig[] = [
   {
     axisFormat: compactCurrency,
     color: "#fbbf24",
-    description: "Daily estimated model cost in US dollars.",
+    description: "Daily estimated cost",
     format: (value) => formatCostSummary({ total: value }),
     metric: "costUsd",
     title: "Model spend",
@@ -51,7 +51,7 @@ const charts: ChartConfig[] = [
   {
     axisFormat: compactDuration,
     color: "#a78bfa",
-    description: "Daily cumulative runtime, with outliers left visible.",
+    description: "Daily cumulative runtime",
     format: formatDuration,
     metric: "durationMs",
     title: "Runtime",

packages/junior-dashboard/tests/format.test.ts

@@ -10,6 +10,7 @@ import {
   conversationIdentityMeta,
   conversationActorLabel,
   filterConversationList,
+  formatCompactNumber,
   formatConversationDuration,
   formatCostTotal,
   formatRuntime,
@@ -52,6 +53,11 @@ function transcript(
 }
 
 describe("dashboard token formatting", () => {
+  it("scales large values through billions and trillions", () => {
+    expect(formatCompactNumber(1_912_000_000)).toBe("1.9b");
+    expect(formatCompactNumber(2_100_000_000_000)).toBe("2.1t");
+  });
+
   it("formats cumulative conversation usage", () => {
     expect(
       formatUsageTotal({