From e39eb8e34aba6655ea550c94254c1459e60bcf91 Mon Sep 17 00:00:00 2001
From: Rami Djebari <238472321+ramioca@users.noreply.github.com>
Date: Tue, 8 Sep 2026 14:54:42 +0200
Subject: [PATCH 1/3] desktop: visual refresh of the control plane

Sidebar sections, a data-driven hero, tinted capability chips, a live
usage chart with axis and tooltips, a Settings page with a theme picker
and copyable endpoints, redesigned wallet cards, and a Deposit tab in the
funding dialog that exposes both wallet addresses.

Review fixes folded in: copy buttons only show "Copied" once the
clipboard write resolves and report failures; the usage chart pads the
router's traffic-only days into a continuous UTC window; light-theme
chip text clears 4.5:1; SVG gradient ids are per instance; the demo
stats match the router's /stats shape.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/desktop/src/App.tsx    | 758 ++++++++++++++++++++++++------
 apps/desktop/src/api.ts     |  32 +-
 apps/desktop/src/styles.css | 907 ++++++++++++++++++++++++++++++------
 3 files changed, 1410 insertions(+), 287 deletions(-)

diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index 026b2505..57d788e8 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 
 import type {
   AgentId,
@@ -15,8 +15,23 @@ import OPENCLAW_ICON from "./openclaw-x-avatar.jpg";
 type Page = "overview" | "models" | "usage" | "wallet" | "settings";
 type Theme = "dark" | "light";
 type IconName =
-  "home" | "models" | "usage" | "settings" | "refresh" | "sun" | "moon" | "external" | "wallet";
+  | "home"
+  | "models"
+  | "usage"
+  | "settings"
+  | "refresh"
+  | "sun"
+  | "moon"
+  | "external"
+  | "wallet"
+  | "copy"
+  | "plus"
+  | "check";
 type CatalogModel = ModelInfo & { aliases: string[] };
+type UsageDay = { date: string; label: string; short: string; requests: number; cost: number };
+
+/** Widest calendar window the activity chart pads out to. */
+const MAX_CHART_DAYS = 14;
 
 const CLAWROUTER_REPO = "https://github.com/BlockRunAI/ClawRouter";
 const AGENT_REPOS: Record<AgentId, string> = {
@@ -38,12 +53,15 @@ export function App() {
   const [fundingAmount, setFundingAmount] = useState(50);
   const [fundingBusy, setFundingBusy] = useState(false);
   const [notice, setNotice] = useState<{ kind: "ok" | "error"; text: string } | null>(null);
+  const [refreshSpin, setRefreshSpin] = useState(false);
   const [theme, setTheme] = useState<Theme>(() => {
     const saved = window.localStorage.getItem("clawrouter-theme");
     if (saved === "light" || saved === "dark") return saved;
     return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
   });
 
+  const reportError = (text: string) => setNotice({ kind: "error", text });
+
   async function refresh() {
     await Promise.allSettled([
       api.statuses().then(setAgents),
@@ -155,6 +173,7 @@ export function App() {
           </div>
         </div>
         <nav>
+          <p className="nav-label">Control</p>
           <NavButton active={page === "overview"} onClick={() => setPage("overview")} icon="home">
             Overview
           </NavButton>
@@ -164,6 +183,7 @@ export function App() {
           <NavButton active={page === "usage"} onClick={() => setPage("usage")} icon="usage">
             Usage
           </NavButton>
+          <p className="nav-label">Account</p>
           <NavButton active={page === "wallet"} onClick={() => setPage("wallet")} icon="wallet">
             Wallet
           </NavButton>
@@ -220,8 +240,12 @@ export function App() {
               <span>GitHub</span>
             </button>
             <button
-              className="icon-button"
-              onClick={() => void refresh()}
+              className={`icon-button refresh-button ${refreshSpin ? "spinning" : ""}`}
+              onClick={() => {
+                setRefreshSpin(true);
+                void refresh();
+              }}
+              onAnimationEnd={() => setRefreshSpin(false)}
               aria-label="Refresh"
               title="Refresh status"
             >
@@ -258,15 +282,19 @@ export function App() {
             onCreate={createWallet}
             onAdopt={adoptLegacyWallet}
             onFund={() => setFundingOpen(true)}
+            onError={reportError}
           />
         )}
-        {page === "settings" && <Settings />}
+        {page === "settings" && (
+          <Settings theme={theme} onTheme={setTheme} dashboard={dashboard} onError={reportError} />
+        )}
       </main>
       {fundingOpen && (
         <FundingDialog
           amount={fundingAmount}
           busy={fundingBusy}
           wallet={dashboard?.proxy.configuredWallet ?? dashboard?.proxy.wallet}
+          solana={dashboard?.proxy.configuredSolana ?? dashboard?.proxy.solana}
           onAmount={setFundingAmount}
           onClose={() => !fundingBusy && setFundingOpen(false)}
           onContinue={() => void startOnramp()}
@@ -290,22 +318,36 @@ function Overview({
   toggle(agent: AgentStatus): void;
 }) {
   const stats = normalizeStats(dashboard?.stats);
+  const online = dashboard?.proxy.reachable ?? false;
+  const total = agents.length || 5;
+  const modelCount = dashboard?.models.length ?? 0;
+  const chain = dashboard?.proxy.configuredChain === "solana" ? "Solana" : "Base";
   return (
     <>
       <section className="hero" aria-label="Routing status">
-        <div className="hero-copy">
-          <div className="live-pill">
-            <span />
-            {dashboard?.proxy.reachable ? "Router online" : "Starting router…"}
+        <div className="hero-top">
+          <div className="hero-copy">
+            <div className="live-pill">
+              <span />
+              {online ? "Router online" : "Starting router…"}
+            </div>
+            <h2>
+              {online
+                ? configured === 0
+                  ? "No agents connected yet"
+                  : `${configured} of ${total} agents routing`
+                : "Getting ClawRouter ready"}
+            </h2>
+            <p>
+              {online
+                ? `${modelCount ? compact(modelCount) : "—"} models available · settling on ${chain}`
+                : "Models, payment, and local agent connections stay in one place."}
+            </p>
           </div>
-          <h2>
-            {dashboard?.proxy.reachable ? "Every agent, one route." : "Getting ClawRouter ready."}
-          </h2>
-          <p>Models, payment, and local agent connections stay in one place.</p>
+          <RoutingMap agents={total} models={modelCount} />
         </div>
-        <RoutingMap />
         <div className="hero-metrics">
-          <Metric label="Connected agents" value={`${configured}/${agents.length || 5}`} />
+          <Metric label="Connected agents" value={`${configured}/${total}`} />
           <Metric label="7-day requests" value={compact(stats.requests)} />
           <Metric
             label="Wallet balance"
@@ -547,10 +589,10 @@ function Models({ models }: { models: ModelInfo[] }) {
               <PriceCell model={model} kind="input" />
               <PriceCell model={model} kind="output" />
               <span className="chips">
-                {model.reasoning && <i>Reasoning</i>}
-                {model.vision && <i>Vision</i>}
-                {model.agentic && <i>Agentic</i>}
-                {model.toolCalling && <i>Tools</i>}
+                {model.reasoning && <i className="cap-reasoning">Reasoning</i>}
+                {model.vision && <i className="cap-vision">Vision</i>}
+                {model.agentic && <i className="cap-agentic">Agentic</i>}
+                {model.toolCalling && <i className="cap-tools">Tools</i>}
                 {!model.reasoning && !model.vision && !model.agentic && !model.toolCalling && (
                   <i>Chat</i>
                 )}
@@ -571,11 +613,16 @@ function Models({ models }: { models: ModelInfo[] }) {
 
 function Usage({ dashboard }: { dashboard: DashboardData | null }) {
   const stats = normalizeStats(dashboard?.stats);
-  const values = [42, 68, 53, 82, 64, 91, 74];
+  const days = stats.daily;
+  const peak = Math.max(1, ...days.map((day) => day.requests));
+  // Round the axis up to a readable ceiling so ticks land on 25/50/75/100
+  // rather than 23/46/68/91.
+  const axisMax = niceCeiling(peak);
+
   return (
     <>
       <section className="stat-grid">
-        <MetricCard label="Requests" value={compact(stats.requests)} delta="last 7 days" />
+        <MetricCard label="Requests" value={compact(stats.requests)} delta={windowLabel(days)} />
         <MetricCard
           label="Estimated spend"
           value={`$${stats.cost.toFixed(2)}`}
@@ -583,18 +630,53 @@ function Usage({ dashboard }: { dashboard: DashboardData | null }) {
         />
         <MetricCard label="Tokens routed" value={compact(stats.tokens)} delta="across all agents" />
       </section>
+
       <section className="panel usage-chart">
-        <div>
-          <h3>Routing activity</h3>
-          <p>Requests handled by the local proxy</p>
+        <div className="chart-head">
+          <div>
+            <h3>Routing activity</h3>
+            <p>Requests handled by the local proxy</p>
+          </div>
+          {days.length > 0 && <span className="chart-note">peak {compact(peak)} / day</span>}
         </div>
-        <div className="bars">
-          {values.map((value, index) => (
-            <div key={index} style={{ height: `${value}%` }}>
-              <span>{["M", "T", "W", "T", "F", "S", "S"][index]}</span>
+        {days.length === 0 ? (
+          <p className="chart-empty">
+            No routed requests yet. Connect an agent and activity will appear here.
+          </p>
+        ) : (
+          <div className="chart">
+            <div className="chart-axis" aria-hidden="true">
+              {[1, 0.75, 0.5, 0.25, 0].map((step) => (
+                <span key={step}>{compact(Math.round(axisMax * step))}</span>
+              ))}
             </div>
-          ))}
-        </div>
+            <div className="chart-plot">
+              <div className="chart-grid" aria-hidden="true">
+                {[0, 1, 2, 3, 4].map((line) => (
+                  <i key={line} />
+                ))}
+              </div>
+              <ol className="chart-bars">
+                {days.map((day) => (
+                  <li
+                    key={day.date}
+                    // --bar sizes the bar and clamps the tooltip; see .chart-tip.
+                    style={{ "--bar": `${(day.requests / axisMax) * 100}%` } as React.CSSProperties}
+                  >
+                    <div className="chart-bar" />
+                    <span className="chart-tip">
+                      <strong>{day.requests.toLocaleString()} requests</strong>
+                      <small>
+                        {day.label} · ${day.cost.toFixed(2)}
+                      </small>
+                    </span>
+                    <span className="chart-label">{day.short}</span>
+                  </li>
+                ))}
+              </ol>
+            </div>
+          </div>
+        )}
       </section>
     </>
   );
@@ -608,6 +690,7 @@ function WalletCenter({
   onCreate,
   onAdopt,
   onFund,
+  onError,
 }: {
   dashboard: DashboardData | null;
   chainBusy: PaymentChain | null;
@@ -616,9 +699,11 @@ function WalletCenter({
   onCreate(chain: PaymentChain): void;
   onAdopt(chain: PaymentChain, address: string): void;
   onFund(): void;
+  onError(message: string): void;
 }) {
   const proxy = dashboard?.proxy;
   const selected = proxy?.configuredChain ?? "base";
+  const { copied, copy } = useCopy(onError);
   return (
     <section className="wallet-center">
       <div className="wallet-center-intro">
@@ -628,9 +713,13 @@ function WalletCenter({
           <p>One current wallet per network, shared by every connected agent.</p>
         </div>
         <button className="coinbase-fund-button" onClick={onFund}>
-          <span>＋</span>
-          <b>Buy USDC</b>
-          <small>on Base</small>
+          <i aria-hidden="true">
+            <Icon name="plus" />
+          </i>
+          <span>
+            <b>Add funds</b>
+            <small>Buy or deposit USDC</small>
+          </span>
         </button>
       </div>
 
@@ -660,6 +749,7 @@ function WalletCenter({
           const activeAddress = chain === "base" ? proxy?.activeWallet : proxy?.activeSolana;
           const restart = proxy?.walletRestartChains?.includes(chain) ?? false;
           const issue = proxy?.walletIssues?.[chain];
+          const name = chain === "base" ? "Base" : "Solana";
           return (
             <article
               className={`wallet-network-card ${selected === chain ? "selected" : ""}`}
@@ -667,11 +757,11 @@ function WalletCenter({
             >
               <header>
                 <span className="wallet-network-name">
-                  <i className={chain === "base" ? "base-coin" : "solana-coin"}>
-                    {chain === "base" ? "B" : "S"}
+                  <i className="chain-mark">
+                    <ChainLogo chain={chain} />
                   </i>
                   <span>
-                    <b>{chain === "base" ? "Base" : "Solana"}</b>
+                    <b>{name}</b>
                     <small>USDC</small>
                   </span>
                 </span>
@@ -680,7 +770,19 @@ function WalletCenter({
               <strong>
                 {formatWalletBalance(proxy?.balances?.[chain], false, dashboard === null)}
               </strong>
-              <code>{address ? shortAddress(address) : "No Core wallet"}</code>
+              {address ? (
+                <button
+                  className={`wallet-copy ${copied === chain ? "copied" : ""}`}
+                  onClick={() => copy(chain, address)}
+                  title="Copy address"
+                  aria-label={copied === chain ? `${name} address copied` : `Copy ${name} address`}
+                >
+                  <code>{shortAddress(address)}</code>
+                  <Icon name={copied === chain ? "check" : "copy"} />
+                </button>
+              ) : (
+                <code className="wallet-copy-empty">No Core wallet</code>
+              )}
               {issue && <p className="wallet-card-warning">{issue}</p>}
               {restart && activeAddress && (
                 <p className="wallet-card-warning">
@@ -689,17 +791,20 @@ function WalletCenter({
               )}
               <footer>
                 {address ? (
-                  <button
-                    className={selected === chain ? "secondary" : "primary"}
-                    disabled={chainBusy !== null || selected === chain}
-                    onClick={() => onSwitch(chain)}
-                  >
-                    {chainBusy === chain
-                      ? "Switching…"
-                      : selected === chain
-                        ? "Current default"
-                        : "Use this network"}
-                  </button>
+                  selected === chain ? (
+                    <p className="wallet-active-note">
+                      <i aria-hidden="true" />
+                      Active — all agents pay from this wallet
+                    </p>
+                  ) : (
+                    <button
+                      className="primary"
+                      disabled={chainBusy !== null}
+                      onClick={() => onSwitch(chain)}
+                    >
+                      {chainBusy === chain ? "Switching…" : "Use this network"}
+                    </button>
+                  )
                 ) : (
                   <button
                     className="primary"
@@ -770,41 +875,181 @@ function WalletCenter({
   );
 }
 
-function Settings() {
+function Settings({
+  theme,
+  onTheme,
+  dashboard,
+  onError,
+}: {
+  theme: Theme;
+  onTheme(next: Theme): void;
+  dashboard: DashboardData | null;
+  onError(message: string): void;
+}) {
+  const endpoints = [
+    { label: "OpenAI-compatible chat", url: "http://127.0.0.1:8402/v1" },
+    { label: "Codex Responses bridge", url: "http://127.0.0.1:8403/v1" },
+    { label: "Model catalog", url: "http://127.0.0.1:8402/v1/models" },
+  ];
+  const { copied: copiedUrl, copy } = useCopy(onError);
   return (
-    <section className="settings-grid">
-      <div className="panel setting-card">
-        <span className="setting-icon">↔</span>
-        <div>
+    <>
+      <section className="panel setting-block">
+        <div className="setting-block-head">
+          <h3>Appearance</h3>
+          <p>Applies immediately and is remembered on this machine.</p>
+        </div>
+        <div className="theme-choice" role="radiogroup" aria-label="Theme">
+          {(["light", "dark"] as Theme[]).map((option) => (
+            <button
+              key={option}
+              role="radio"
+              aria-checked={theme === option}
+              className={theme === option ? "active" : ""}
+              onClick={() => onTheme(option)}
+            >
+              <Icon name={option === "dark" ? "moon" : "sun"} />
+              {option === "dark" ? "Dark" : "Light"}
+            </button>
+          ))}
+        </div>
+      </section>
+
+      <section className="panel setting-block">
+        <div className="setting-block-head">
           <h3>Local endpoints</h3>
-          <p>Chat: http://127.0.0.1:8402/v1</p>
-          <p>Codex Responses: http://127.0.0.1:8403/v1</p>
+          <p>
+            Both services bind to loopback only.{" "}
+            {dashboard?.proxy.reachable ? "Router is responding." : "Router is not responding."}
+          </p>
         </div>
-      </div>
-      <div className="panel setting-card source-card">
-        <span className="setting-icon">
-          <GitHubIcon />
-        </span>
-        <div>
-          <h3>Open source</h3>
-          <p>Inspect releases, report issues, or contribute to ClawRouter.</p>
-          <button onClick={() => void api.openExternal(CLAWROUTER_REPO)}>
-            Open GitHub <Icon name="external" />
-          </button>
+        <ul className="endpoint-list">
+          {endpoints.map((endpoint) => (
+            <li key={endpoint.url}>
+              <span>{endpoint.label}</span>
+              <code>{endpoint.url}</code>
+              <button
+                className={copiedUrl === endpoint.url ? "copied" : ""}
+                onClick={() => copy(endpoint.url, endpoint.url)}
+                aria-label={`Copy ${endpoint.label} URL`}
+                title="Copy URL"
+              >
+                {copiedUrl === endpoint.url ? (
+                  <span key="check">
+                    <Icon name="check" />
+                  </span>
+                ) : (
+                  <span key="copy">
+                    <Icon name="copy" />
+                  </span>
+                )}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section className="settings-grid">
+        <div className="panel setting-card source-card">
+          <span className="setting-icon">
+            <GitHubIcon />
+          </span>
+          <div>
+            <h3>Open source</h3>
+            <p>Inspect releases, report issues, or contribute to ClawRouter.</p>
+            <button onClick={() => void api.openExternal(CLAWROUTER_REPO)}>
+              Open GitHub <Icon name="external" />
+            </button>
+          </div>
         </div>
-      </div>
-      <div className="panel setting-card warning">
-        <span className="setting-icon">!</span>
-        <div>
-          <h3>Secrets stay local</h3>
-          <p>The wallet mnemonic is never shown in the UI or copied into launch configuration.</p>
+        <div className="panel setting-card warning">
+          <span className="setting-icon">!</span>
+          <div>
+            <h3>Secrets stay local</h3>
+            <p>The wallet mnemonic is never shown in the UI or copied into launch configuration.</p>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </>
+  );
+}
+
+/** Official network marks: Base roundel and Solana bars (per brand assets). */
+function ChainLogo({ chain }: { chain: PaymentChain }) {
+  // Gradient ids must be unique per instance: the Solana mark can render twice
+  // at once (wallet card plus the deposit sheet), and duplicate ids are invalid.
+  const gradient = `sol-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  if (chain === "base") {
+    return (
+      <svg viewBox="0 0 146 146" aria-hidden="true">
+        <circle cx="73" cy="73" r="73" fill="#0052FF" />
+        <path
+          fill="#fff"
+          d="M73.323 123.729c28.294 0 51.23-22.897 51.23-51.141 0-28.245-22.936-51.142-51.23-51.142-26.843 0-48.865 20.61-51.052 46.843h67.715v8.597H22.27c2.187 26.233 24.209 46.843 51.052 46.843Z"
+        />
+      </svg>
+    );
+  }
+  return (
+    <svg viewBox="0 0 28 28" aria-hidden="true">
+      <defs>
+        <linearGradient
+          id={`${gradient}-g1`}
+          gradientUnits="userSpaceOnUse"
+          x1="360.879"
+          y1="351.455"
+          x2="141.213"
+          y2="-69.294"
+          gradientTransform="matrix(1 0 0 -1 0 314)"
+        >
+          <stop offset="0" stopColor="#00FFA3" />
+          <stop offset="1" stopColor="#DC1FFF" />
+        </linearGradient>
+        <linearGradient
+          id={`${gradient}-g2`}
+          gradientUnits="userSpaceOnUse"
+          x1="264.829"
+          y1="401.601"
+          x2="45.163"
+          y2="-19.148"
+          gradientTransform="matrix(1 0 0 -1 0 314)"
+        >
+          <stop offset="0" stopColor="#00FFA3" />
+          <stop offset="1" stopColor="#DC1FFF" />
+        </linearGradient>
+        <linearGradient
+          id={`${gradient}-g3`}
+          gradientUnits="userSpaceOnUse"
+          x1="312.548"
+          y1="376.688"
+          x2="92.882"
+          y2="-44.061"
+          gradientTransform="matrix(1 0 0 -1 0 314)"
+        >
+          <stop offset="0" stopColor="#00FFA3" />
+          <stop offset="1" stopColor="#DC1FFF" />
+        </linearGradient>
+      </defs>
+      <circle cx="14" cy="14" r="14" fill="#101014" />
+      <g transform="translate(6.8, 8.36) scale(0.0362)">
+        <path
+          fill={`url(#${gradient}-g1)`}
+          d="M64.6 237.9c2.4-2.4 5.7-3.8 9.2-3.8h317.4c5.8 0 8.7 7 4.6 11.1l-62.7 62.7c-2.4 2.4-5.7 3.8-9.2 3.8H6.5c-5.8 0-8.7-7-4.6-11.1l62.7-62.7z"
+        />
+        <path
+          fill={`url(#${gradient}-g2)`}
+          d="M64.6 3.8C67.1 1.4 70.4 0 73.8 0h317.4c5.8 0 8.7 7 4.6 11.1l-62.7 62.7c-2.4 2.4-5.7 3.8-9.2 3.8H6.5c-5.8 0-8.7-7-4.6-11.1L64.6 3.8z"
+        />
+        <path
+          fill={`url(#${gradient}-g3)`}
+          d="M333.1 120.1c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8 0-8.7 7-4.6 11.1l62.7 62.7c2.4 2.4 5.7 3.8 9.2 3.8h317.4c5.8 0 8.7-7 4.6-11.1l-62.7-62.7z"
+        />
+      </g>
+    </svg>
   );
 }
 
-function RoutingMap() {
+function RoutingMap({ agents, models }: { agents: number; models: number }) {
   return (
     <div
       className="routing-map"
@@ -816,7 +1061,7 @@ function RoutingMap() {
             <AgentLogo id={id} key={id} compact />
           ))}
         </div>
-        <span>5 agents</span>
+        <span>{agents} agents</span>
       </div>
       <div className="route-line">
         <i />
@@ -832,7 +1077,7 @@ function RoutingMap() {
         <b>→</b>
       </div>
       <div className="route-destination">
-        <strong>55+</strong>
+        <strong>{models > 0 ? compact(models) : "—"}</strong>
         <span>models</span>
       </div>
     </div>
@@ -934,8 +1179,8 @@ function WalletSummary({
         <Icon name="external" />
       </button>
       <button className="wallet-fund-button" onClick={onFund}>
-        <span>＋</span>
-        {selected === "base" ? "Add funds" : "Buy USDC on Base"}
+        <Icon name="plus" />
+        Add funds
       </button>
       {proxy?.chainRestartRequired && (
         <small className="wallet-restart">
@@ -953,6 +1198,7 @@ function FundingDialog({
   amount,
   busy,
   wallet,
+  solana,
   onAmount,
   onClose,
   onContinue,
@@ -960,10 +1206,15 @@ function FundingDialog({
   amount: number;
   busy: boolean;
   wallet: string | undefined;
+  solana: string | undefined;
   onAmount(value: number): void;
   onClose(): void;
   onContinue(): void;
 }) {
+  const [tab, setTab] = useState<"buy" | "deposit">("buy");
+  const [copyError, setCopyError] = useState<string | null>(null);
+  const { copied, copy } = useCopy(setCopyError);
+
   useEffect(() => {
     const handleKey = (event: KeyboardEvent) => {
       if (event.key === "Escape") onClose();
@@ -972,6 +1223,10 @@ function FundingDialog({
     return () => window.removeEventListener("keydown", handleKey);
   }, [onClose]);
   const valid = Number.isFinite(amount) && amount >= 1 && amount <= 2_500;
+  const depositRows: { chain: PaymentChain; label: string; address?: string }[] = [
+    { chain: "base", label: "Base", address: wallet },
+    { chain: "solana", label: "Solana", address: solana },
+  ];
   return (
     <div className="funding-backdrop" onMouseDown={onClose} role="presentation">
       <section
@@ -983,76 +1238,155 @@ function FundingDialog({
       >
         <header>
           <div>
-            <span className="coinbase-wordmark">Coinbase Onramp</span>
             <h2 id="funding-title">Add funds</h2>
-            <p>Buy USDC for your shared Base wallet.</p>
+            <p>
+              {tab === "buy"
+                ? "Buy USDC with Coinbase Onramp."
+                : "Send USDC from another wallet or exchange."}
+            </p>
           </div>
           <button className="funding-close" onClick={onClose} disabled={busy} aria-label="Close">
             ×
           </button>
         </header>
-        <div className="funding-amount">
-          <label htmlFor="funding-usd">You pay</label>
-          <div className="amount-input">
-            <span>$</span>
-            <input
-              id="funding-usd"
-              type="number"
-              min="1"
-              max="2500"
-              step="1"
-              value={Number.isFinite(amount) ? amount : ""}
-              onChange={(event) => onAmount(Number(event.target.value))}
-              autoFocus
-            />
-            <b>USD</b>
-          </div>
-          <div className="amount-presets">
-            {[25, 50, 100, 250].map((value) => (
-              <button
-                key={value}
-                className={amount === value ? "active" : ""}
-                onClick={() => onAmount(value)}
-              >
-                ${value}
-              </button>
-            ))}
-          </div>
+        <div className="funding-tabs" role="tablist" aria-label="Funding method">
+          <button
+            role="tab"
+            aria-selected={tab === "buy"}
+            className={tab === "buy" ? "active" : ""}
+            onClick={() => setTab("buy")}
+          >
+            Buy
+          </button>
+          <button
+            role="tab"
+            aria-selected={tab === "deposit"}
+            className={tab === "deposit" ? "active" : ""}
+            onClick={() => setTab("deposit")}
+          >
+            Deposit
+          </button>
         </div>
-        <div className="funding-route">
-          <div>
-            <span className="route-token">USDC</span>
-            <p>
-              <b>USDC on Base</b>
-              <small>Delivered after Coinbase fees</small>
+        {tab === "deposit" ? (
+          <div className="funding-pane" key="deposit">
+            <div className="deposit-list">
+              {depositRows.map((row) => (
+                <div className="deposit-row" key={row.chain}>
+                  <i className="chain-mark">
+                    <ChainLogo chain={row.chain} />
+                  </i>
+                  <div className="deposit-row-name">
+                    <b>{row.label}</b>
+                    <small>USDC · {row.label} network</small>
+                  </div>
+                  {row.address ? (
+                    <>
+                      <code>{shortAddress(row.address)}</code>
+                      <button
+                        className={`deposit-copy ${copied === row.chain ? "copied" : ""}`}
+                        onClick={() => {
+                          setCopyError(null);
+                          copy(row.chain, row.address!);
+                        }}
+                        aria-label={
+                          copied === row.chain
+                            ? `${row.label} address copied`
+                            : `Copy ${row.label} address`
+                        }
+                      >
+                        {copied === row.chain ? (
+                          <span key="copied">
+                            <Icon name="check" /> Copied
+                          </span>
+                        ) : (
+                          <span key="copy">
+                            <Icon name="copy" /> Copy
+                          </span>
+                        )}
+                      </button>
+                    </>
+                  ) : (
+                    <code className="deposit-missing">No wallet yet</code>
+                  )}
+                </div>
+              ))}
+            </div>
+            {copyError && (
+              <p className="funding-error" role="alert">
+                {copyError}
+              </p>
+            )}
+            <p className="funding-legal">
+              Send only USDC, on the matching network. Deposits from another wallet or exchange
+              usually arrive within a minute.
             </p>
           </div>
-          <i>→</i>
-          <div className="funding-destination">
-            <span>To your wallet</span>
-            <code>{wallet ? shortAddress(wallet) : "Wallet unavailable"}</code>
+        ) : (
+          <div className="funding-pane" key="buy">
+            <div className="funding-amount">
+              <label htmlFor="funding-usd">You pay</label>
+              <div className="amount-input">
+                <span>$</span>
+                <input
+                  id="funding-usd"
+                  type="number"
+                  min="1"
+                  max="2500"
+                  step="1"
+                  value={Number.isFinite(amount) ? amount : ""}
+                  onChange={(event) => onAmount(Number(event.target.value))}
+                  autoFocus
+                />
+                <b>USD</b>
+              </div>
+              <div className="amount-presets">
+                {[25, 50, 100, 250].map((value) => (
+                  <button
+                    key={value}
+                    className={amount === value ? "active" : ""}
+                    onClick={() => onAmount(value)}
+                  >
+                    ${value}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="funding-route">
+              <div>
+                <span className="route-token">USDC</span>
+                <p>
+                  <b>USDC on Base</b>
+                  <small>Delivered after Coinbase fees</small>
+                </p>
+              </div>
+              <i>→</i>
+              <div className="funding-destination">
+                <span>To your wallet</span>
+                <code>{wallet ? shortAddress(wallet) : "Wallet unavailable"}</code>
+              </div>
+            </div>
+            <button
+              className="funding-continue"
+              disabled={busy || !valid || !wallet}
+              onClick={onContinue}
+            >
+              {busy ? (
+                <>
+                  <b className="spinner" />
+                  Creating secure session…
+                </>
+              ) : (
+                <>
+                  Continue to Coinbase <Icon name="external" />
+                </>
+              )}
+            </button>
+            <p className="funding-legal">
+              Coinbase shows the final quote, fees, and payment methods available in your region.
+              The one-time checkout opens in your browser.
+            </p>
           </div>
-        </div>
-        <button
-          className="funding-continue"
-          disabled={busy || !valid || !wallet}
-          onClick={onContinue}
-        >
-          {busy ? (
-            <>
-              <b className="spinner" />
-              Creating secure session…
-            </>
-          ) : (
-            <>
-              Continue to Coinbase <Icon name="external" />
-            </>
-          )}
-        </button>
-        <p className="funding-legal">
-          Coinbase shows the final quote, fees, and payment methods available in your region. The
-          one-time checkout opens in your browser.
-        </p>
+        )}
       </section>
     </div>
   );
@@ -1151,7 +1485,7 @@ function NavButton({
   children: React.ReactNode;
 }) {
   return (
-    <button className={active ? "active" : ""} onClick={onClick}>
+    <button className={active ? "active" : ""} onClick={onClick} aria-current={active && "page"}>
       <span>
         <Icon name={icon} />
       </span>
@@ -1230,6 +1564,22 @@ function Icon({ name }: { name: IconName }) {
         <path d="M4 19V9M10 19V5M16 19v-7M22 19V3" />
       </>
     ),
+    copy: (
+      <>
+        <rect x="9" y="9" width="11" height="11" rx="2" />
+        <path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1" />
+      </>
+    ),
+    plus: (
+      <>
+        <path d="M12 5v14M5 12h14" />
+      </>
+    ),
+    check: (
+      <>
+        <path d="m5 12.5 4.5 4.5L19 7" />
+      </>
+    ),
     settings: (
       <>
         <circle cx="12" cy="12" r="3" />
@@ -1277,8 +1627,7 @@ function Icon({ name }: { name: IconName }) {
   );
 }
 function healthLabel(agent: AgentStatus) {
-  if (agent.health === "ready")
-    return agent.activation === "immediate" ? "Connected" : "Configured";
+  if (agent.health === "ready") return "Connected";
   if (!agent.installed) return agent.configured ? "Configured · CLI missing" : "Not detected";
   return agent.configured ? "Needs proxy" : "Available";
 }
@@ -1398,17 +1747,142 @@ function shortAddress(address: string) {
 function prettyModel(id: string) {
   return id.split("/").at(-1)?.replaceAll("-", " ") ?? id;
 }
+/**
+ * Clipboard copy with a short "copied" state, keyed so one hook can serve a
+ * list of targets. The state only flips once the write resolves; a denied or
+ * unavailable clipboard reports through onError instead of a false "Copied".
+ */
+function useCopy(onError: (message: string) => void) {
+  const [copied, setCopied] = useState<string | null>(null);
+  const timer = useRef<number | null>(null);
+  useEffect(() => {
+    return () => {
+      if (timer.current) window.clearTimeout(timer.current);
+    };
+  }, []);
+  const copy = (key: string, text: string) => {
+    const write = navigator.clipboard
+      ? navigator.clipboard.writeText(text)
+      : Promise.reject(new Error("Clipboard unavailable"));
+    write.then(
+      () => {
+        setCopied(key);
+        if (timer.current) window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => setCopied(null), 1600);
+      },
+      () => onError("Couldn't copy to the clipboard. Select the text and copy it manually."),
+    );
+  };
+  return { copied, copy };
+}
+
 function normalizeStats(stats: Record<string, unknown> | null | undefined) {
   const pick = (...keys: string[]) =>
     keys.map((key) => stats?.[key]).find((value) => typeof value === "number") as
       number | undefined;
+
+  const num = (row: Record<string, unknown>, key: string) =>
+    typeof row[key] === "number" && Number.isFinite(row[key]) ? (row[key] as number) : 0;
+
+  // The router only reports days that had traffic, so pad the series into a
+  // continuous calendar window: the last 7 days at minimum, stretched back to
+  // cover any older day the router still included (it takes the 7 most recent
+  // log files, which need not be consecutive). Quiet days render as zero bars
+  // instead of vanishing, and the window label stays truthful. Days are UTC
+  // throughout because that is how the router buckets its logs; building the
+  // window in local time would surface an evening's traffic as a phantom
+  // "tomorrow" bar west of Greenwich.
+  const byDate = new Map<string, { requests: number; cost: number }>();
+  const rawDaily = stats?.dailyBreakdown ?? stats?.daily_breakdown;
+  if (Array.isArray(rawDaily)) {
+    for (const entry of rawDaily) {
+      if (!entry || typeof entry !== "object") continue;
+      const row = entry as Record<string, unknown>;
+      const date = typeof row.date === "string" ? row.date : "";
+      if (!date || Number.isNaN(parseDay(date).getTime())) continue;
+      const prev = byDate.get(date) ?? { requests: 0, cost: 0 };
+      byDate.set(date, {
+        requests: prev.requests + num(row, "totalRequests"),
+        cost: prev.cost + num(row, "totalCost"),
+      });
+    }
+  }
+
+  const daily: UsageDay[] = [];
+  if (byDate.size > 0) {
+    const dates = [...byDate.keys()].sort();
+    const today = parseDay(formatDay(new Date()));
+    const end = latest(parseDay(dates[dates.length - 1]), today);
+    // Anything older than the cap is dropped rather than stretching the window.
+    const floor = shiftDays(end, -(MAX_CHART_DAYS - 1));
+    const firstKept = dates.map(parseDay).find((day) => day >= floor) ?? end;
+    const start = earliest(firstKept, shiftDays(end, -6));
+    for (let cursor = start; cursor <= end; cursor = shiftDays(cursor, 1)) {
+      const date = formatDay(cursor);
+      const entry = byDate.get(date) ?? { requests: 0, cost: 0 };
+      daily.push({
+        date,
+        label: cursor.toLocaleDateString(undefined, {
+          month: "short",
+          day: "numeric",
+          timeZone: "UTC",
+        }),
+        short: cursor
+          .toLocaleDateString(undefined, { weekday: "short", timeZone: "UTC" })
+          .slice(0, 2),
+        requests: entry.requests,
+        cost: entry.cost,
+      });
+    }
+  }
+
   return {
     requests: pick("requests", "totalRequests", "total_requests") ?? 0,
     cost: pick("totalCost", "totalCostUSD", "total_cost") ?? 0,
     tokens: pick("tokens", "totalTokens", "inputTokens", "total_tokens") ?? 0,
+    daily,
   };
 }
 
+/** UTC-midnight Date for a YYYY-MM-DD string. */
+function parseDay(date: string) {
+  return new Date(`${date}T00:00:00Z`);
+}
+
+/** YYYY-MM-DD of the UTC day, the key the router names its daily logs by. */
+function formatDay(day: Date) {
+  return day.toISOString().slice(0, 10);
+}
+
+function shiftDays(day: Date, delta: number) {
+  const next = new Date(day);
+  next.setUTCDate(next.getUTCDate() + delta);
+  return next;
+}
+
+function earliest(a: Date, b: Date) {
+  return a < b ? a : b;
+}
+
+function latest(a: Date, b: Date) {
+  return a > b ? a : b;
+}
+
+/** Round a chart maximum up to the nearest readable tick value. */
+function niceCeiling(value: number) {
+  if (value <= 4) return 4;
+  const magnitude = 10 ** Math.floor(Math.log10(value));
+  for (const step of [1, 1.2, 1.6, 2, 2.4, 3, 4, 5, 6, 8, 10]) {
+    const candidate = step * magnitude;
+    if (candidate >= value) return candidate;
+  }
+  return 10 * magnitude;
+}
+
+function windowLabel(days: UsageDay[]) {
+  return days.length === 0 ? "no data yet" : `last ${days.length} days`;
+}
+
 function collapseModelAliases(models: ModelInfo[]): CatalogModel[] {
   const aliasesByTarget = new Map<string, string[]>();
   const canonical: ModelInfo[] = [];
diff --git a/apps/desktop/src/api.ts b/apps/desktop/src/api.ts
index e1ec5675..7778d632 100644
--- a/apps/desktop/src/api.ts
+++ b/apps/desktop/src/api.ts
@@ -96,6 +96,21 @@ const demoAgents: AgentStatus[] = [
   },
 ];
 
+/**
+ * Demo daily breakdown, anchored to today so the browser fallback always shows a
+ * current-looking week. Shape matches the router's /stats dailyBreakdown.
+ */
+const demoDailyBreakdown = [42, 68, 53, 82, 64, 91, 74].map((requests, index) => {
+  const day = new Date();
+  day.setDate(day.getDate() - (6 - index));
+  return {
+    // UTC day, matching how the router keys its daily logs.
+    date: day.toISOString().slice(0, 10),
+    totalRequests: requests,
+    totalCost: Number((requests * 0.0134).toFixed(4)),
+  };
+});
+
 const demoDashboard: DashboardData = {
   proxy: {
     reachable: true,
@@ -108,7 +123,22 @@ const demoDashboard: DashboardData = {
     balance: 18.42,
     balances: { base: 18.42, solana: 7.08 },
   },
-  stats: { requests: 284, totalCost: 3.82, savings: 21.14, inputTokens: 812400 },
+  stats: {
+    requests: 284,
+    totalCost: 3.82,
+    totalBaselineCost: 24.96,
+    totalSavings: 21.14,
+    savingsPercentage: 84.7,
+    inputTokens: 812400,
+    dailyBreakdown: demoDailyBreakdown,
+    byModel: {
+      "anthropic/claude-sonnet-4.6": { count: 96, cost: 1.94 },
+      "openai/gpt-5.4": { count: 61, cost: 1.12 },
+      "google/gemini-3.1-pro": { count: 44, cost: 0.51 },
+      "deepseek/deepseek-v4-pro": { count: 52, cost: 0.25 },
+      "free/gpt-oss-120b": { count: 31, cost: 0 },
+    },
+  },
   models: [
     {
       id: "auto",
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index 70d36e7a..9016522b 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -24,6 +24,11 @@
   --coinbase: #0052ff;
   --coinbase-hover: #0047df;
   --shadow: 0 8px 24px rgba(25, 30, 38, 0.06);
+  /* Built-in CSS easings are too weak for UI work; these carry the punch.
+     ease-out for enter/press feedback, ease-in-out for on-screen movement. */
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
 }
 
 :root[data-theme="dark"] {
@@ -87,16 +92,44 @@ svg {
   display: block;
 }
 
+/* Pressables scale down on :active so the interface visibly hears the press.
+   Subtle (0.97) and fast (160ms) per the press-feedback rule; excludes
+   high-frequency targets like nav, where animation would read as lag. */
+.agent-actions > .primary,
+.agent-actions > .secondary,
+.wallet-fund-button,
+.coinbase-fund-button,
+.funding-continue,
+.theme-choice button,
+.amount-presets button,
+.icon-button,
+.github-button {
+  transition: transform 160ms var(--ease-out);
+}
+.agent-actions > .primary:active,
+.agent-actions > .secondary:active,
+.wallet-fund-button:active,
+.funding-continue:active,
+.theme-choice button:active,
+.amount-presets button:active,
+.icon-button:active,
+.github-button:active {
+  transform: scale(0.97);
+}
+.coinbase-fund-button:active {
+  transform: scale(0.98);
+}
+
 .shell {
   display: grid;
-  grid-template-columns: 206px minmax(0, 1fr);
+  grid-template-columns: 232px minmax(0, 1fr);
   min-height: 100vh;
 }
 .sidebar {
   position: fixed;
   inset: 0 auto 0 0;
-  width: 206px;
-  padding: 34px 12px 14px;
+  width: 232px;
+  padding: 26px 14px 14px;
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--border);
@@ -107,7 +140,9 @@ svg {
   display: flex;
   gap: 10px;
   align-items: center;
-  padding: 0 9px 25px;
+  padding: 0 8px 22px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid var(--border);
 }
 .brand-mark {
   width: 32px;
@@ -143,10 +178,23 @@ svg {
 
 nav {
   display: grid;
-  gap: 3px;
+  gap: 2px;
+}
+.nav-label {
+  margin: 0;
+  padding: 14px 10px 6px;
+  color: var(--faint);
+  font-size: 9px;
+  font-weight: 650;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
+.nav-label:first-child {
+  padding-top: 0;
 }
 nav button {
-  min-height: 38px;
+  position: relative;
+  min-height: 34px;
   padding: 0 10px;
   display: flex;
   align-items: center;
@@ -157,7 +205,7 @@ nav button {
   background: transparent;
   cursor: pointer;
   text-align: left;
-  font-size: 12px;
+  font-size: 12.5px;
   font-weight: 560;
   transition:
     color 0.14s ease,
@@ -168,6 +216,8 @@ nav button > span {
   height: 18px;
   display: grid;
   place-items: center;
+  color: var(--faint);
+  transition: color 0.14s ease;
 }
 nav button svg {
   width: 16px;
@@ -177,21 +227,30 @@ nav button:hover {
   color: var(--text);
   background: var(--surface-hover);
 }
+nav button:hover > span {
+  color: var(--muted);
+}
 nav button.active {
   color: var(--accent-text);
   background: var(--accent-soft);
 }
-
+nav button.active > span {
+  color: var(--accent-text);
+}
+/* Anchored to the bottom of the rail, above the source/status pair. */
 .sidebar-wallet {
-  margin: 19px 4px 0;
-  padding: 11px;
+  margin: auto 2px 0;
+  padding: 12px;
   display: flex;
   flex-direction: column;
-  gap: 9px;
+  gap: 10px;
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: 12px;
   color: var(--text);
-  background: var(--surface);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 62%),
+    var(--surface);
+  box-shadow: var(--shadow);
   text-align: left;
 }
 .wallet-heading {
@@ -315,18 +374,15 @@ nav button.active {
   box-shadow: 0 1px 2px rgba(0, 40, 120, 0.16);
   transition:
     background-color 0.14s ease,
-    transform 0.08s ease;
+    transform 160ms var(--ease-out);
 }
 .wallet-fund-button:hover {
   background: var(--coinbase-hover);
 }
-.wallet-fund-button:active {
-  transform: translateY(1px);
-}
-.wallet-fund-button span {
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 1;
+.wallet-fund-button svg {
+  width: 13px;
+  height: 13px;
+  stroke-width: 2.4;
 }
 .wallet-restart {
   padding-top: 7px;
@@ -368,7 +424,7 @@ nav button.active {
   height: 11px;
 }
 .sidebar-foot {
-  margin-top: auto;
+  margin-top: 10px;
   padding: 13px 9px 3px;
   display: flex;
   gap: 9px;
@@ -400,7 +456,7 @@ nav button.active {
 main {
   grid-column: 2;
   width: 100%;
-  max-width: 1320px;
+  max-width: 1140px;
   margin: 0 auto;
   padding: 30px 34px 48px;
 }
@@ -440,13 +496,33 @@ main {
   transition:
     color 0.14s ease,
     border-color 0.14s ease,
-    background-color 0.14s ease;
+    background-color 0.14s ease,
+    transform 160ms var(--ease-out);
 }
 .icon-button {
   width: 32px;
   display: grid;
   place-items: center;
 }
+/* One full turn per click — feedback that the poll actually ran. The icon
+   also nudges a few degrees on hover so the control hints at its action. */
+.refresh-button svg {
+  transition: transform 200ms var(--ease-out);
+}
+.refresh-button:hover svg {
+  transform: rotate(35deg);
+}
+.refresh-button.spinning svg {
+  animation: refresh-turn 650ms var(--ease-in-out);
+}
+@keyframes refresh-turn {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .icon-button svg {
   width: 14px;
   height: 14px;
@@ -478,6 +554,15 @@ main {
   border: 1px solid;
   border-radius: 8px;
   font-size: 11px;
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 200ms var(--ease-out),
+    transform 200ms var(--ease-out);
+  @starting-style {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
 }
 .notice.ok {
   color: var(--success);
@@ -497,17 +582,21 @@ main {
 }
 
 .hero {
-  min-height: 164px;
   padding: 22px;
-  display: grid;
-  grid-template-columns: minmax(230px, 0.9fr) minmax(370px, 1.15fr);
-  grid-template-rows: 1fr auto;
-  gap: 18px 26px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--surface);
   box-shadow: var(--shadow);
 }
+.hero-top {
+  display: grid;
+  grid-template-columns: minmax(230px, 0.9fr) minmax(370px, 1.15fr);
+  gap: 26px;
+  align-items: center;
+}
 .hero-copy {
   align-self: center;
 }
@@ -542,27 +631,36 @@ main {
   font-size: 11px;
   line-height: 1.5;
 }
+/* The numbers are the point of this panel, so give them real weight and
+   separate them with rules rather than whitespace alone. */
 .hero-metrics {
-  grid-column: 1 / -1;
-  display: flex;
-  gap: 30px;
-  padding-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  padding-top: 18px;
   border-top: 1px solid var(--border);
 }
+.metric {
+  padding: 0 20px;
+  border-left: 1px solid var(--border);
+}
+.metric:first-child {
+  padding-left: 0;
+  border-left: 0;
+}
 .metric strong,
 .metric span {
   display: block;
 }
 .metric strong {
-  font-size: 15px;
+  font-size: 22px;
   font-weight: 660;
-  letter-spacing: -0.2px;
+  letter-spacing: -0.6px;
   font-variant-numeric: tabular-nums;
 }
 .metric span {
-  margin-top: 2px;
+  margin-top: 4px;
   color: var(--faint);
-  font-size: 9px;
+  font-size: 9.5px;
 }
 
 .routing-map {
@@ -666,18 +764,28 @@ main {
   justify-content: space-between;
   align-items: end;
 }
+/* Title and description share one baseline instead of stacking, which keeps
+   headers to a single line and buys back vertical space on every page. */
+.section-title > div,
+.chart-head > div,
+.setting-block-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+}
 .section-title h3,
 .panel h3 {
   margin: 0;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 650;
   letter-spacing: -0.25px;
 }
 .section-title p,
 .panel p {
-  margin: 4px 0 0;
+  margin: 0;
   color: var(--muted);
-  font-size: 10px;
+  font-size: 10.5px;
   line-height: 1.45;
 }
 .section-title > span {
@@ -707,9 +815,6 @@ main {
 .agent-card:hover {
   background: var(--surface-raised);
 }
-.agent-card.connected {
-  box-shadow: inset 2px 0 var(--accent);
-}
 .agent-summary {
   min-width: 0;
   display: flex;
@@ -823,18 +928,37 @@ main {
 }
 .agent-meta {
   display: flex;
-  gap: 5px;
+  gap: 10px;
+  align-items: center;
   flex-wrap: wrap;
   justify-content: flex-end;
 }
 .agent-meta span {
-  padding: 3px 5px;
+  padding: 3px 8px;
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: 5px;
   color: var(--faint);
-  font-size: 7px;
-  text-transform: uppercase;
-  letter-spacing: 0.45px;
+  font-size: 9.5px;
+  white-space: nowrap;
+}
+/* Activation is a status note, not a category label. Drop the box so it stops
+   competing with the API chip beside it at identical visual weight. */
+.agent-meta .restart,
+.agent-meta .instant {
+  padding: 0;
+  border: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.agent-meta .restart::before,
+.agent-meta .instant::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+  flex: none;
 }
 .agent-meta .restart {
   color: var(--warning);
@@ -994,13 +1118,13 @@ main {
 }
 .filters input,
 .filters select {
-  height: 32px;
-  padding: 0 9px;
+  height: 34px;
+  padding: 0 10px;
   border: 1px solid var(--border);
   border-radius: 7px;
   color: var(--text);
   background: var(--surface);
-  font-size: 9px;
+  font-size: 11px;
 }
 .filters select {
   min-width: 124px;
@@ -1044,14 +1168,14 @@ main {
   justify-content: space-between;
   border-bottom: 1px solid var(--border);
   color: var(--faint);
-  font-size: 8px;
+  font-size: 9.5px;
 }
 .model-result-meta b {
   color: var(--muted);
   font-weight: 600;
 }
 .model-row {
-  min-height: 61px;
+  min-height: 64px;
   padding: 9px 13px;
   display: grid;
   grid-template-columns:
@@ -1061,9 +1185,9 @@ main {
   align-items: center;
   border-bottom: 1px solid var(--border);
   color: var(--muted);
-  font-size: 9px;
+  font-size: 10.5px;
   content-visibility: auto;
-  contain-intrinsic-size: 61px;
+  contain-intrinsic-size: 64px;
 }
 .model-row:last-child {
   border-bottom: 0;
@@ -1075,9 +1199,9 @@ main {
   min-height: 32px;
   color: var(--faint);
   background: var(--surface-raised);
-  font-size: 7px;
+  font-size: 8.5px;
   text-transform: uppercase;
-  letter-spacing: 0.65px;
+  letter-spacing: 0.6px;
   content-visibility: visible;
 }
 .model-identity {
@@ -1100,20 +1224,20 @@ main {
 }
 .model-identity strong {
   color: var(--text);
-  font-size: 11px;
-  font-weight: 640;
+  font-size: 12px;
+  font-weight: 650;
 }
 .model-identity small {
   grid-column: 1 / -1;
   margin-top: 2px;
   color: var(--faint);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 8px;
+  font-size: 9.5px;
 }
 .model-identity em {
   align-self: center;
   color: var(--faint);
-  font-size: 7px;
+  font-size: 8px;
   font-style: normal;
   text-transform: uppercase;
   letter-spacing: 0.4px;
@@ -1189,15 +1313,15 @@ main {
 .context-cell strong,
 .price-cell strong {
   color: var(--text);
-  font-size: 11px;
-  font-weight: 640;
+  font-size: 12px;
+  font-weight: 650;
   font-variant-numeric: tabular-nums;
 }
 .context-cell small,
 .price-cell small {
   margin-top: 2px;
   color: var(--faint);
-  font-size: 7px;
+  font-size: 9px;
   white-space: nowrap;
 }
 .price-cell.free strong {
@@ -1205,17 +1329,54 @@ main {
 }
 .chips {
   display: flex;
-  gap: 3px;
+  gap: 4px;
   flex-wrap: wrap;
 }
+/* Tinted per capability so a row can be scanned by colour instead of read.
+   The tint keeps a light hue; the text is a darker step of the same hue so
+   9px labels clear 4.5:1 on the light surface, with brighter text for dark. */
 .chips i {
-  padding: 3px 5px;
-  border: 1px solid var(--border);
-  border-radius: 4px;
+  padding: 3px 7px;
+  border: 1px solid transparent;
+  border-radius: 5px;
   color: var(--muted);
-  background: transparent;
-  font-size: 7px;
+  background: var(--surface-raised);
+  font-size: 9px;
   font-style: normal;
+  font-weight: 560;
+  white-space: nowrap;
+}
+.chips .cap-reasoning {
+  color: #714fcf;
+  background: color-mix(in srgb, #8b6fd8 14%, transparent);
+  border-color: color-mix(in srgb, #8b6fd8 26%, transparent);
+}
+.chips .cap-vision {
+  color: #257096;
+  background: color-mix(in srgb, #2f8fbf 14%, transparent);
+  border-color: color-mix(in srgb, #2f8fbf 26%, transparent);
+}
+.chips .cap-agentic {
+  color: #925f20;
+  background: color-mix(in srgb, #c07d2a 14%, transparent);
+  border-color: color-mix(in srgb, #c07d2a 26%, transparent);
+}
+.chips .cap-tools {
+  color: #337356;
+  background: color-mix(in srgb, #3f8f6b 14%, transparent);
+  border-color: color-mix(in srgb, #3f8f6b 26%, transparent);
+}
+:root[data-theme="dark"] .chips .cap-reasoning {
+  color: #b39bf0;
+}
+:root[data-theme="dark"] .chips .cap-vision {
+  color: #6fc0e8;
+}
+:root[data-theme="dark"] .chips .cap-agentic {
+  color: #e0a961;
+}
+:root[data-theme="dark"] .chips .cap-tools {
+  color: #6fc79c;
 }
 .model-empty {
   padding: 40px 20px;
@@ -1265,33 +1426,282 @@ main {
   font-size: 9px;
 }
 .usage-chart {
-  min-height: 330px;
   padding: 18px;
+  margin-bottom: 11px;
 }
-.bars {
-  height: 235px;
-  padding: 24px 25px 20px;
+.chart-head {
   display: flex;
-  align-items: end;
-  gap: 14px;
-  border-bottom: 1px solid var(--border);
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+.chart-note {
+  color: var(--faint);
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.chart-empty {
+  margin: 0;
+  padding: 40px 0;
+  color: var(--faint);
+  font-size: 11px;
+  text-align: center;
+}
+
+/* Bar chart: fixed axis gutter beside a plot that owns the gridlines. */
+.chart {
+  margin-top: 18px;
+  display: grid;
+  grid-template-columns: 34px 1fr;
+  gap: 8px;
+}
+.chart-axis {
+  height: 210px;
+  /* Mirror the gutter the bar list keeps for weekday labels, so the axis
+     spans exactly the gridline range rather than the whole plot height. */
+  padding-bottom: 22px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  color: var(--faint);
+  font-size: 8px;
+  font-variant-numeric: tabular-nums;
 }
-.bars div {
-  min-height: 10px;
+/* Zero-height boxes centre each label's text on its gridline. */
+.chart-axis span {
+  line-height: 0;
+}
+.chart-plot {
+  position: relative;
+}
+.chart-grid {
+  position: absolute;
+  inset: 0 0 22px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.chart-grid i {
+  height: 1px;
+  background: var(--border);
+  opacity: 0.6;
+}
+.chart-grid i:last-child {
+  opacity: 1;
+}
+.chart-bars {
+  position: relative;
+  height: 210px;
+  margin: 0;
+  padding: 0 2px 22px;
+  list-style: none;
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+}
+.chart-bars > li {
+  position: relative;
   flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+.chart-bar {
   position: relative;
-  border-radius: 3px 3px 1px 1px;
-  background: var(--accent);
-  opacity: 0.78;
+  height: var(--bar, 0%);
+  min-height: 3px;
+  border-radius: 4px 4px 2px 2px;
+  background: linear-gradient(
+    180deg,
+    var(--accent) 0%,
+    color-mix(in srgb, var(--accent) 74%, transparent) 100%
+  );
+  /* Height morphs when a refresh changes the data, so bars glide to their
+     new value rather than jumping. ease-in-out: on-screen movement. */
+  transition:
+    filter 0.14s ease,
+    opacity 0.14s ease,
+    height 300ms var(--ease-in-out);
+}
+.chart-bars:hover .chart-bar {
+  opacity: 0.42;
 }
-.bars span {
+.chart-bars > li:hover .chart-bar {
+  opacity: 1;
+  filter: brightness(1.12);
+}
+/* Sits in the padding the bar list reserves below the plot, clear of the bars. */
+.chart-label {
   position: absolute;
-  bottom: -20px;
+  bottom: -17px;
   left: 50%;
   transform: translateX(-50%);
   color: var(--faint);
-  font-size: 8px;
+  font-size: 9px;
+  white-space: nowrap;
+}
+/* Rides 8px above its bar, but never above the plot: on a full-height bar it
+   settles just inside the top gridline instead of colliding with the header. */
+.chart-tip {
+  position: absolute;
+  bottom: min(calc(var(--bar, 0%) + 8px), calc(100% - 44px));
+  left: 50%;
+  transform: translateX(-50%) translateY(3px);
+  padding: 6px 9px;
+  display: grid;
+  gap: 1px;
+  justify-items: center;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--surface-raised);
+  box-shadow: var(--shadow);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition:
+    opacity 150ms var(--ease-out),
+    transform 150ms var(--ease-out);
+  z-index: 2;
+}
+.chart-bars > li:hover .chart-tip {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+.chart-tip strong {
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.chart-tip small {
+  color: var(--muted);
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
+}
+
+.setting-block {
+  padding: 18px;
+  margin-bottom: 11px;
+}
+.setting-block-head {
+  margin-bottom: 14px;
+}
+.theme-choice {
+  display: flex;
+  gap: 8px;
+}
+.theme-choice button {
+  min-height: 38px;
+  padding: 0 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  color: var(--muted);
+  background: var(--surface);
+  cursor: pointer;
+  font-size: 11.5px;
+  font-weight: 560;
+  transition:
+    color 0.14s ease,
+    border-color 0.14s ease,
+    background-color 0.14s ease;
+}
+.theme-choice button svg {
+  width: 15px;
+  height: 15px;
+}
+.theme-choice button:hover {
+  color: var(--text);
+  background: var(--surface-hover);
+}
+.theme-choice button.active {
+  color: var(--accent-text);
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+.endpoint-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 2px;
+}
+.endpoint-list > li {
+  padding: 9px 10px;
+  display: grid;
+  grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) 30px;
+  align-items: center;
+  gap: 14px;
+  border-radius: 8px;
+  transition: background-color 0.14s ease;
+}
+.endpoint-list > li:hover {
+  background: var(--surface-hover);
+}
+.endpoint-list span {
+  font-size: 11px;
+  font-weight: 560;
+}
+.endpoint-list code {
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10.5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.endpoint-list button {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  color: var(--faint);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    color 0.14s ease,
+    border-color 0.14s ease,
+    background-color 0.14s ease;
 }
+.endpoint-list > li:hover button {
+  border-color: var(--border);
+  background: var(--surface);
+}
+.endpoint-list button:hover {
+  color: var(--text);
+}
+.endpoint-list button svg {
+  width: 13px;
+  height: 13px;
+}
+/* Copied feedback: icon crossfades to a green check, same pattern as the
+   deposit rows, and the button holds a success tint while it lasts. */
+.endpoint-list button > span {
+  display: grid;
+  place-items: center;
+  transition:
+    opacity 160ms var(--ease-out),
+    transform 160ms var(--ease-out);
+  @starting-style {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+}
+.endpoint-list button.copied {
+  color: var(--success);
+  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
+  background: color-mix(in srgb, var(--success) 8%, transparent);
+  opacity: 1;
+}
+.endpoint-list > li .copied {
+  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
+}
+
 .settings-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -1338,7 +1748,7 @@ main {
   align-items: center;
   justify-content: center;
   gap: 7px;
-  font-size: 10px;
+  font-size: 11px;
 }
 .payment-rail > span svg {
   width: 15px;
@@ -1348,7 +1758,7 @@ main {
 .payment-rail small {
   display: block;
   color: var(--faint);
-  font-size: 8px;
+  font-size: 9.5px;
 }
 .payment-rail > i {
   color: var(--faint);
@@ -1361,7 +1771,7 @@ main {
   gap: 12px;
 }
 .wallet-network-card {
-  min-height: 222px;
+  min-height: 178px;
   padding: 18px;
   display: flex;
   flex-direction: column;
@@ -1369,10 +1779,7 @@ main {
   border-radius: 12px;
   background: var(--surface);
 }
-.wallet-network-card.selected {
-  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
-  box-shadow: inset 0 3px 0 var(--accent);
-}
+/* The default network is marked by its chip and status line, not an outline. */
 .wallet-network-card header {
   display: flex;
   align-items: center;
@@ -1390,10 +1797,7 @@ main {
   display: grid;
   place-items: center;
   border-radius: 50%;
-  color: #fff;
-  font-size: 9px;
   font-style: normal;
-  font-weight: 760;
 }
 .wallet-network-name b,
 .wallet-network-name small {
@@ -1408,29 +1812,93 @@ main {
   font-size: 8px;
 }
 .wallet-network-card header > em {
-  padding: 4px 7px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  border: 1px solid var(--border);
   border-radius: 999px;
-  color: var(--accent-text);
-  background: var(--accent-soft);
-  font-size: 8px;
+  color: var(--muted);
+  background: var(--surface-raised);
+  font-size: 8.5px;
   font-style: normal;
-  font-weight: 680;
+  font-weight: 650;
+}
+.wallet-network-card header > em::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--success);
 }
 .wallet-network-card > strong {
-  margin-top: 25px;
+  margin-top: 16px;
   font-size: 25px;
   letter-spacing: -0.8px;
   font-variant-numeric: tabular-nums;
 }
-.wallet-network-card > code {
-  margin-top: 5px;
+/* Address doubles as a copy control; the icon surfaces on hover. */
+.wallet-copy {
+  margin-top: 6px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  align-self: flex-start;
+  border: 0;
   color: var(--faint);
+  background: transparent;
+  cursor: pointer;
+  transition: color 0.14s ease;
+}
+.wallet-copy code {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 9px;
+  font-size: 10px;
+}
+.wallet-copy svg {
+  width: 11px;
+  height: 11px;
+  opacity: 0;
+  transition: opacity 0.14s ease;
+}
+.wallet-copy:hover {
+  color: var(--text);
+}
+.wallet-copy:hover svg {
+  opacity: 1;
+}
+.wallet-copy.copied {
+  color: var(--success);
+}
+.wallet-copy.copied svg {
+  opacity: 1;
+}
+.wallet-copy-empty {
+  margin-top: 6px;
+  color: var(--faint);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+}
+.wallet-active-note {
+  margin: 0;
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--muted);
+  font-size: 10.5px;
+  font-weight: 560;
+}
+.wallet-active-note i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent);
 }
 .wallet-network-card footer {
   margin-top: auto;
-  padding-top: 17px;
+  padding-top: 14px;
 }
 .wallet-network-card footer button {
   width: 100%;
@@ -1456,7 +1924,7 @@ main {
 .wallet-card-warning {
   margin: 10px 0 0;
   color: var(--warning);
-  font-size: 8px;
+  font-size: 10px;
   line-height: 1.45;
 }
 .legacy-wallet-panel {
@@ -1475,7 +1943,7 @@ main {
 .legacy-wallet-panel p {
   margin: 5px 0 0;
   color: var(--muted);
-  font-size: 9px;
+  font-size: 10.5px;
   line-height: 1.5;
 }
 .legacy-wallet-list {
@@ -1530,12 +1998,14 @@ main {
   background: var(--surface);
 }
 .wallet-notes b {
-  font-size: 10px;
+  font-size: 13px;
+  font-weight: 650;
+  letter-spacing: -0.2px;
 }
 .wallet-notes p {
   margin: 5px 0 0;
   color: var(--muted);
-  font-size: 8px;
+  font-size: 10.5px;
   line-height: 1.55;
 }
 .setting-card {
@@ -1544,9 +2014,6 @@ main {
   display: flex;
   gap: 12px;
 }
-.setting-card.warning {
-  grid-column: 1 / -1;
-}
 .setting-icon {
   width: 32px;
   height: 32px;
@@ -1584,43 +2051,58 @@ main {
   margin-top: 5px;
 }
 .coinbase-fund-button {
-  min-width: 146px;
-  min-height: 48px;
-  padding: 0 13px;
-  display: grid;
-  grid-template-columns: 24px 1fr;
-  grid-template-rows: 1fr 1fr;
+  min-height: 46px;
+  padding: 0 17px 0 11px;
+  display: inline-flex;
   align-items: center;
+  gap: 11px;
   border: 0;
-  border-radius: 10px;
+  border-radius: 11px;
   color: #fff;
   background: var(--coinbase);
   cursor: pointer;
   text-align: left;
-  box-shadow: 0 4px 14px rgba(0, 82, 255, 0.2);
+  box-shadow: 0 2px 9px rgba(0, 82, 255, 0.2);
   transition:
     background-color 0.14s ease,
-    transform 0.08s ease;
+    box-shadow 0.14s ease,
+    transform 160ms var(--ease-out);
 }
 .coinbase-fund-button:hover {
   background: var(--coinbase-hover);
+  box-shadow: 0 5px 16px rgba(0, 82, 255, 0.3);
 }
 .coinbase-fund-button:active {
-  transform: translateY(1px);
+  box-shadow: 0 1px 5px rgba(0, 82, 255, 0.24);
+}
+/* Tinted plate so the glyph reads as an affordance rather than loose
+   punctuation sitting on the fill. */
+.coinbase-fund-button > i {
+  width: 26px;
+  height: 26px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.18);
+}
+.coinbase-fund-button > i svg {
+  width: 14px;
+  height: 14px;
+  stroke-width: 2.2;
 }
 .coinbase-fund-button > span {
-  grid-row: 1 / 3;
-  font-size: 21px;
-  font-weight: 300;
+  display: grid;
+  gap: 1px;
 }
 .coinbase-fund-button b {
-  align-self: end;
-  font-size: 10px;
+  font-size: 12.5px;
+  font-weight: 650;
+  letter-spacing: -0.1px;
 }
 .coinbase-fund-button small {
-  align-self: start;
-  opacity: 0.76;
-  font-size: 8px;
+  opacity: 0.8;
+  font-size: 9.5px;
 }
 .wallet-ledger {
   margin-top: 17px;
@@ -1657,11 +2139,9 @@ main {
   font-style: normal;
   font-weight: 750;
 }
-.base-coin {
-  background: #0052ff;
-}
-.solana-coin {
-  background: linear-gradient(135deg, #7b61ff, #18c89b);
+.chain-mark svg {
+  width: 100%;
+  height: 100%;
 }
 .wallet-ledger strong {
   font-size: 14px;
@@ -1714,19 +2194,13 @@ main {
   color: var(--text);
   background: var(--surface);
   box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
-  animation: funding-rise 0.18s ease-out;
+  animation: funding-rise 220ms var(--ease-drawer);
 }
 .funding-dialog header {
   display: flex;
   justify-content: space-between;
   gap: 20px;
 }
-.coinbase-wordmark {
-  color: var(--coinbase);
-  font-size: 9px;
-  font-weight: 750;
-  letter-spacing: 0.25px;
-}
 .funding-dialog h2 {
   margin: 6px 0 0;
   font-size: 23px;
@@ -1755,8 +2229,146 @@ main {
   color: var(--text);
   background: var(--surface-hover);
 }
+/* Segmented method switch. Occasional-use control: subtle 140ms color moves,
+   no thumb animation to wait on. */
+.funding-tabs {
+  margin-top: 16px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 3px;
+  border-radius: 10px;
+  background: var(--surface-raised);
+}
+.funding-tabs button {
+  min-height: 30px;
+  border: 0;
+  border-radius: 7px;
+  color: var(--muted);
+  background: transparent;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 650;
+  transition:
+    color 0.14s ease,
+    background-color 0.14s ease,
+    box-shadow 0.14s ease;
+}
+.funding-tabs button:hover {
+  color: var(--text);
+}
+.funding-tabs button.active {
+  color: var(--text);
+  background: var(--surface);
+  box-shadow: 0 1px 3px rgba(20, 24, 30, 0.14);
+}
+
+/* Pane content enters on each tab switch: fade + small rise + blur that
+   resolves, so the swap reads as one surface changing, not two swapping. */
+.funding-pane {
+  opacity: 1;
+  transform: translateY(0);
+  filter: blur(0);
+  transition:
+    opacity 200ms var(--ease-out),
+    transform 200ms var(--ease-out),
+    filter 200ms var(--ease-out);
+  @starting-style {
+    opacity: 0;
+    transform: translateY(6px);
+    filter: blur(2px);
+  }
+}
+
+.deposit-list {
+  margin-top: 14px;
+  display: grid;
+  gap: 8px;
+}
+.deposit-row {
+  padding: 13px 14px;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 12px;
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  background: var(--surface);
+}
+.deposit-row > i {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  font-style: normal;
+}
+.deposit-row-name b {
+  display: block;
+  font-size: 12px;
+  font-weight: 650;
+}
+.deposit-row-name small {
+  display: block;
+  margin-top: 1px;
+  color: var(--faint);
+  font-size: 9.5px;
+}
+.deposit-row > code {
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10.5px;
+}
+.deposit-missing {
+  color: var(--faint);
+}
+.deposit-copy {
+  min-width: 76px;
+  min-height: 30px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  color: var(--text);
+  background: transparent;
+  cursor: pointer;
+  font-size: 10.5px;
+  font-weight: 620;
+  transition:
+    color 0.14s ease,
+    border-color 0.14s ease,
+    background-color 0.14s ease,
+    transform 160ms var(--ease-out);
+}
+.deposit-copy:hover {
+  background: var(--surface-hover);
+}
+.deposit-copy:active {
+  transform: scale(0.97);
+}
+.deposit-copy.copied {
+  color: var(--success);
+  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
+  background: color-mix(in srgb, var(--success) 8%, transparent);
+}
+.deposit-copy > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  transition:
+    opacity 160ms var(--ease-out),
+    transform 160ms var(--ease-out);
+  @starting-style {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+.deposit-copy svg {
+  width: 12px;
+  height: 12px;
+}
+
 .funding-amount {
-  margin-top: 20px;
+  margin-top: 14px;
   padding: 15px;
   border: 1px solid var(--border);
   border-radius: 11px;
@@ -1910,6 +2522,13 @@ main {
   width: 12px;
   height: 12px;
 }
+.funding-error {
+  margin: 10px 4px 0;
+  color: var(--danger);
+  font-size: 9.5px;
+  line-height: 1.5;
+  text-align: center;
+}
 .funding-legal {
   margin: 10px 4px 0;
   color: var(--faint);

From bffe4a7af2873ff9f1cdc1c7d58bdc58640cfc89 Mon Sep 17 00:00:00 2001
From: Rami Djebari <238472321+ramioca@users.noreply.github.com>
Date: Tue, 8 Sep 2026 21:32:59 +0200
Subject: [PATCH 2/3] desktop: address CodeRabbit review on the visual refresh

- Derive the demo usage totals from the daily series so the metric cards
  match the chart (474 requests, $6.35) and cannot drift apart again
- Name account credit in the hero when the proxy runs on an API key instead
  of claiming a settlement chain that is not there
- Retarget the <=1080px hero override to .hero-top and drop its fixed pixel
  minimums so the card fits the 920px minimum window without overflowing
- Complete the funding tab semantics: tab ids, aria-controls, and a tabpanel
  labelled by the active tab
- Lowercase currentcolor throughout styles.css (stylelint value-keyword-case)

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/desktop/src/App.tsx    | 26 +++++++++++++++++++++++---
 apps/desktop/src/api.ts     | 32 +++++++++++++++++++++-----------
 apps/desktop/src/styles.css | 22 ++++++++++++----------
 3 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index 57d788e8..a9adb0a4 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -322,6 +322,10 @@ function Overview({
   const total = agents.length || 5;
   const modelCount = dashboard?.models.length ?? 0;
   const chain = dashboard?.proxy.configuredChain === "solana" ? "Solana" : "Base";
+  // A proxy authenticating with a BlockRun API key settles nothing on-chain, so
+  // name the account instead of claiming a chain that is not there.
+  const settlement =
+    dashboard?.proxy.authMode === "api-key" ? "paid with account credit" : `settling on ${chain}`;
   return (
     <>
       <section className="hero" aria-label="Routing status">
@@ -340,7 +344,7 @@ function Overview({
             </h2>
             <p>
               {online
-                ? `${modelCount ? compact(modelCount) : "—"} models available · settling on ${chain}`
+                ? `${modelCount ? compact(modelCount) : "—"} models available · ${settlement}`
                 : "Models, payment, and local agent connections stay in one place."}
             </p>
           </div>
@@ -1252,6 +1256,8 @@ function FundingDialog({
         <div className="funding-tabs" role="tablist" aria-label="Funding method">
           <button
             role="tab"
+            id="funding-tab-buy"
+            aria-controls="funding-pane"
             aria-selected={tab === "buy"}
             className={tab === "buy" ? "active" : ""}
             onClick={() => setTab("buy")}
@@ -1260,6 +1266,8 @@ function FundingDialog({
           </button>
           <button
             role="tab"
+            id="funding-tab-deposit"
+            aria-controls="funding-pane"
             aria-selected={tab === "deposit"}
             className={tab === "deposit" ? "active" : ""}
             onClick={() => setTab("deposit")}
@@ -1268,7 +1276,13 @@ function FundingDialog({
           </button>
         </div>
         {tab === "deposit" ? (
-          <div className="funding-pane" key="deposit">
+          <div
+            className="funding-pane"
+            key="deposit"
+            id="funding-pane"
+            role="tabpanel"
+            aria-labelledby="funding-tab-deposit"
+          >
             <div className="deposit-list">
               {depositRows.map((row) => (
                 <div className="deposit-row" key={row.chain}>
@@ -1322,7 +1336,13 @@ function FundingDialog({
             </p>
           </div>
         ) : (
-          <div className="funding-pane" key="buy">
+          <div
+            className="funding-pane"
+            key="buy"
+            id="funding-pane"
+            role="tabpanel"
+            aria-labelledby="funding-tab-buy"
+          >
             <div className="funding-amount">
               <label htmlFor="funding-usd">You pay</label>
               <div className="amount-input">
diff --git a/apps/desktop/src/api.ts b/apps/desktop/src/api.ts
index 7778d632..c053691e 100644
--- a/apps/desktop/src/api.ts
+++ b/apps/desktop/src/api.ts
@@ -111,6 +111,15 @@ const demoDailyBreakdown = [42, 68, 53, 82, 64, 91, 74].map((requests, index) =>
   };
 });
 
+// The Usage page shows these totals beside the daily chart, so derive them from
+// the same series instead of typing numbers that can drift apart. The demo
+// router saves roughly 84.7% against an all-frontier baseline.
+const round2 = (value: number) => Number(value.toFixed(2));
+const demoRequests = demoDailyBreakdown.reduce((sum, day) => sum + day.totalRequests, 0);
+const demoCost = round2(demoDailyBreakdown.reduce((sum, day) => sum + day.totalCost, 0));
+const demoBaselineCost = round2(demoCost / (1 - 0.847));
+const demoSavings = round2(demoBaselineCost - demoCost);
+
 const demoDashboard: DashboardData = {
   proxy: {
     reachable: true,
@@ -124,19 +133,20 @@ const demoDashboard: DashboardData = {
     balances: { base: 18.42, solana: 7.08 },
   },
   stats: {
-    requests: 284,
-    totalCost: 3.82,
-    totalBaselineCost: 24.96,
-    totalSavings: 21.14,
-    savingsPercentage: 84.7,
-    inputTokens: 812400,
+    requests: demoRequests,
+    totalCost: demoCost,
+    totalBaselineCost: demoBaselineCost,
+    totalSavings: demoSavings,
+    savingsPercentage: Number(((demoSavings / demoBaselineCost) * 100).toFixed(1)),
+    inputTokens: 1356000,
     dailyBreakdown: demoDailyBreakdown,
+    // Counts and costs add up to demoRequests (474) and demoCost (6.35).
     byModel: {
-      "anthropic/claude-sonnet-4.6": { count: 96, cost: 1.94 },
-      "openai/gpt-5.4": { count: 61, cost: 1.12 },
-      "google/gemini-3.1-pro": { count: 44, cost: 0.51 },
-      "deepseek/deepseek-v4-pro": { count: 52, cost: 0.25 },
-      "free/gpt-oss-120b": { count: 31, cost: 0 },
+      "anthropic/claude-sonnet-4.6": { count: 160, cost: 3.22 },
+      "openai/gpt-5.4": { count: 102, cost: 1.86 },
+      "google/gemini-3.1-pro": { count: 73, cost: 0.85 },
+      "deepseek/deepseek-v4-pro": { count: 87, cost: 0.42 },
+      "free/gpt-oss-120b": { count: 52, cost: 0 },
     },
   },
   models: [
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index 9016522b..f8a3b00e 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -576,7 +576,7 @@ main {
 }
 .notice button {
   border: 0;
-  color: currentColor;
+  color: currentcolor;
   background: none;
   cursor: pointer;
 }
@@ -612,8 +612,8 @@ main {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: currentColor;
-  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
+  background: currentcolor;
+  box-shadow: 0 0 0 3px color-mix(in srgb, currentcolor 12%, transparent);
 }
 .hero h2 {
   margin: 11px 0 5px;
@@ -908,7 +908,7 @@ main {
   width: 5px;
   height: 5px;
   border-radius: 50%;
-  background: currentColor;
+  background: currentcolor;
 }
 .health.ready {
   color: var(--success);
@@ -957,7 +957,7 @@ main {
   width: 5px;
   height: 5px;
   border-radius: 50%;
-  background: currentColor;
+  background: currentcolor;
   flex: none;
 }
 .agent-meta .restart {
@@ -1028,7 +1028,7 @@ main {
   width: 8px;
   height: 8px;
   margin-right: 4px;
-  border: 1px solid currentColor;
+  border: 1px solid currentcolor;
   border-right-color: transparent;
   border-radius: 50%;
   animation: spin 0.7s linear infinite;
@@ -1080,7 +1080,7 @@ main {
   width: 5px;
   height: 5px;
   border-radius: 50%;
-  background: currentColor;
+  background: currentcolor;
 }
 .catalog-stats {
   display: flex;
@@ -1258,7 +1258,7 @@ main {
 .provider-mark svg {
   width: 17px;
   height: 17px;
-  fill: currentColor;
+  fill: currentcolor;
 }
 .provider-mark img {
   width: 19px;
@@ -2553,8 +2553,10 @@ main {
     padding-left: 25px;
     padding-right: 25px;
   }
-  .hero {
-    grid-template-columns: 0.8fr 1.2fr;
+  /* Drop the fixed column minimums so the hero keeps two columns down to the
+     920px minimum window instead of overflowing the card. */
+  .hero-top {
+    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
   }
   .filters {
     grid-template-columns: minmax(190px, 1fr) repeat(3, 115px);

From ead500aa926cb8db32318a6a9515c1ee1094ddf5 Mon Sep 17 00:00:00 2001
From: 1bcMax <viewitter@gmail.com>
Date: Wed, 9 Sep 2026 23:39:22 -0400
Subject: [PATCH 3/3] desktop: make the numbers on the control plane true
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three places where the UI states something the router never said, and no
test could see any of them because the window math lived inside App.tsx.
It is now `src/usage-stats.ts` with 10 tests; two of them fail on the
previous logic.

**The hero counted alias rows as models.** `/v1/models` emits a row per
shorthand and the Models page collapses them, so the hero advertised the
raw length — 288 — beside a Models page reading "110 of 110" and product
copy saying 76. Both now count the collapsed catalog.

**A window with no recent traffic drew a week that never happened.** When
every day the router reported is older than the 14-day cap, the lookup
for the first in-window day found nothing, fell back to today, and padded
seven zero bars labelled "last 7 days" — next to a Requests card showing
the full lifetime total. `getStats` reads the 7 most recent log FILES,
which for an intermittent user span weeks, so this is not a corner case.
There is no window to draw there, so it draws none.

**The Requests card and the bars counted different days.** The card read
`totalRequests` under a label describing the chart window. It now sums the
days it renders, so the number, the label and the bars cannot disagree.

Also: `peak` doubled as the divide-by-zero floor and as the number in the
chart header, printing "peak 1 / day" over a window nobody routed in —
the floor moved to the divisor. And "Tokens routed" read `inputTokens`,
which `AggregatedStats` has never had and `/stats` has never sent, so it
was always 0 in the packaged app while the demo showed 1.4M; it is now
savings against baseline, which the router does return.

Deliberately NOT changed: `healthLabel`. Branching it on `restartRequired`
looks right and is not — codex.ts and openclaw.ts set it to `configured`,
so it is permanently true once connected and means "this kind of agent
needs a restart when you change it", not "a change is waiting". Reading it
there would pin both to "Restart pending" forever, worse than the
"Connected" it would replace, and `activationLabel` beside it already says
"Restart gateway/app after changes". A comment now says so.

Verified: tsc clean, 56 tests pass (was 46, and this PR had added none),
vite build clean.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015mUab3xrLHNpYqVHJLgJHL
---
 apps/desktop/src/App.tsx               | 139 ++++---------------------
 apps/desktop/src/api.ts                |   1 -
 apps/desktop/src/usage-stats.ts        | 135 ++++++++++++++++++++++++
 apps/desktop/tests/usage-stats.test.ts | 119 +++++++++++++++++++++
 4 files changed, 276 insertions(+), 118 deletions(-)
 create mode 100644 apps/desktop/src/usage-stats.ts
 create mode 100644 apps/desktop/tests/usage-stats.test.ts

diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index a9adb0a4..b29dfc4d 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { niceCeiling, normalizeStats, windowLabel, type UsageDay } from "./usage-stats.js";
 
 import type {
   AgentId,
@@ -28,10 +29,6 @@ type IconName =
   | "plus"
   | "check";
 type CatalogModel = ModelInfo & { aliases: string[] };
-type UsageDay = { date: string; label: string; short: string; requests: number; cost: number };
-
-/** Widest calendar window the activity chart pads out to. */
-const MAX_CHART_DAYS = 14;
 
 const CLAWROUTER_REPO = "https://github.com/BlockRunAI/ClawRouter";
 const AGENT_REPOS: Record<AgentId, string> = {
@@ -320,7 +317,12 @@ function Overview({
   const stats = normalizeStats(dashboard?.stats);
   const online = dashboard?.proxy.reachable ?? false;
   const total = agents.length || 5;
-  const modelCount = dashboard?.models.length ?? 0;
+  // /v1/models emits an alias row per shorthand, so the raw length is not a
+  // model count: the Models page collapses them and would disagree with the hero.
+  const modelCount = useMemo(
+    () => collapseModelAliases(dashboard?.models ?? []).length,
+    [dashboard?.models],
+  );
   const chain = dashboard?.proxy.configuredChain === "solana" ? "Solana" : "Base";
   // A proxy authenticating with a BlockRun API key settles nothing on-chain, so
   // name the account instead of claiming a chain that is not there.
@@ -618,10 +620,11 @@ function Models({ models }: { models: ModelInfo[] }) {
 function Usage({ dashboard }: { dashboard: DashboardData | null }) {
   const stats = normalizeStats(dashboard?.stats);
   const days = stats.daily;
-  const peak = Math.max(1, ...days.map((day) => day.requests));
+  const peak = Math.max(0, ...days.map((day) => day.requests));
   // Round the axis up to a readable ceiling so ticks land on 25/50/75/100
-  // rather than 23/46/68/91.
-  const axisMax = niceCeiling(peak);
+  // rather than 23/46/68/91. The floor of 1 belongs to the divisor only —
+  // printing "peak 1 / day" over a window nobody routed in is a fabrication.
+  const axisMax = niceCeiling(Math.max(1, peak));
 
   return (
     <>
@@ -632,7 +635,11 @@ function Usage({ dashboard }: { dashboard: DashboardData | null }) {
           value={`$${stats.cost.toFixed(2)}`}
           delta="wallet settled"
         />
-        <MetricCard label="Tokens routed" value={compact(stats.tokens)} delta="across all agents" />
+        <MetricCard
+          label="Saved vs. baseline"
+          value={`$${stats.savings.toFixed(2)}`}
+          delta={stats.savings > 0 ? `${Math.round(stats.savingsPct)}% cheaper` : "no baseline yet"}
+        />
       </section>
 
       <section className="panel usage-chart">
@@ -641,7 +648,7 @@ function Usage({ dashboard }: { dashboard: DashboardData | null }) {
             <h3>Routing activity</h3>
             <p>Requests handled by the local proxy</p>
           </div>
-          {days.length > 0 && <span className="chart-note">peak {compact(peak)} / day</span>}
+          {peak > 0 && <span className="chart-note">peak {compact(peak)} / day</span>}
         </div>
         {days.length === 0 ? (
           <p className="chart-empty">
@@ -1647,6 +1654,11 @@ function Icon({ name }: { name: IconName }) {
   );
 }
 function healthLabel(agent: AgentStatus) {
+  // Deliberately NOT branching on `restartRequired`. Codex and OpenClaw set it to
+  // `configured`, so it is permanently true once connected — it means "this kind of
+  // agent needs a restart when you change it", not "a change is pending". Reading it
+  // here would pin them to "Restart pending" forever. `activationLabel`, rendered
+  // beside this one, already says "Restart gateway/app after changes".
   if (agent.health === "ready") return "Connected";
   if (!agent.installed) return agent.configured ? "Configured · CLI missing" : "Not detected";
   return agent.configured ? "Needs proxy" : "Available";
@@ -1796,113 +1808,6 @@ function useCopy(onError: (message: string) => void) {
   return { copied, copy };
 }
 
-function normalizeStats(stats: Record<string, unknown> | null | undefined) {
-  const pick = (...keys: string[]) =>
-    keys.map((key) => stats?.[key]).find((value) => typeof value === "number") as
-      number | undefined;
-
-  const num = (row: Record<string, unknown>, key: string) =>
-    typeof row[key] === "number" && Number.isFinite(row[key]) ? (row[key] as number) : 0;
-
-  // The router only reports days that had traffic, so pad the series into a
-  // continuous calendar window: the last 7 days at minimum, stretched back to
-  // cover any older day the router still included (it takes the 7 most recent
-  // log files, which need not be consecutive). Quiet days render as zero bars
-  // instead of vanishing, and the window label stays truthful. Days are UTC
-  // throughout because that is how the router buckets its logs; building the
-  // window in local time would surface an evening's traffic as a phantom
-  // "tomorrow" bar west of Greenwich.
-  const byDate = new Map<string, { requests: number; cost: number }>();
-  const rawDaily = stats?.dailyBreakdown ?? stats?.daily_breakdown;
-  if (Array.isArray(rawDaily)) {
-    for (const entry of rawDaily) {
-      if (!entry || typeof entry !== "object") continue;
-      const row = entry as Record<string, unknown>;
-      const date = typeof row.date === "string" ? row.date : "";
-      if (!date || Number.isNaN(parseDay(date).getTime())) continue;
-      const prev = byDate.get(date) ?? { requests: 0, cost: 0 };
-      byDate.set(date, {
-        requests: prev.requests + num(row, "totalRequests"),
-        cost: prev.cost + num(row, "totalCost"),
-      });
-    }
-  }
-
-  const daily: UsageDay[] = [];
-  if (byDate.size > 0) {
-    const dates = [...byDate.keys()].sort();
-    const today = parseDay(formatDay(new Date()));
-    const end = latest(parseDay(dates[dates.length - 1]), today);
-    // Anything older than the cap is dropped rather than stretching the window.
-    const floor = shiftDays(end, -(MAX_CHART_DAYS - 1));
-    const firstKept = dates.map(parseDay).find((day) => day >= floor) ?? end;
-    const start = earliest(firstKept, shiftDays(end, -6));
-    for (let cursor = start; cursor <= end; cursor = shiftDays(cursor, 1)) {
-      const date = formatDay(cursor);
-      const entry = byDate.get(date) ?? { requests: 0, cost: 0 };
-      daily.push({
-        date,
-        label: cursor.toLocaleDateString(undefined, {
-          month: "short",
-          day: "numeric",
-          timeZone: "UTC",
-        }),
-        short: cursor
-          .toLocaleDateString(undefined, { weekday: "short", timeZone: "UTC" })
-          .slice(0, 2),
-        requests: entry.requests,
-        cost: entry.cost,
-      });
-    }
-  }
-
-  return {
-    requests: pick("requests", "totalRequests", "total_requests") ?? 0,
-    cost: pick("totalCost", "totalCostUSD", "total_cost") ?? 0,
-    tokens: pick("tokens", "totalTokens", "inputTokens", "total_tokens") ?? 0,
-    daily,
-  };
-}
-
-/** UTC-midnight Date for a YYYY-MM-DD string. */
-function parseDay(date: string) {
-  return new Date(`${date}T00:00:00Z`);
-}
-
-/** YYYY-MM-DD of the UTC day, the key the router names its daily logs by. */
-function formatDay(day: Date) {
-  return day.toISOString().slice(0, 10);
-}
-
-function shiftDays(day: Date, delta: number) {
-  const next = new Date(day);
-  next.setUTCDate(next.getUTCDate() + delta);
-  return next;
-}
-
-function earliest(a: Date, b: Date) {
-  return a < b ? a : b;
-}
-
-function latest(a: Date, b: Date) {
-  return a > b ? a : b;
-}
-
-/** Round a chart maximum up to the nearest readable tick value. */
-function niceCeiling(value: number) {
-  if (value <= 4) return 4;
-  const magnitude = 10 ** Math.floor(Math.log10(value));
-  for (const step of [1, 1.2, 1.6, 2, 2.4, 3, 4, 5, 6, 8, 10]) {
-    const candidate = step * magnitude;
-    if (candidate >= value) return candidate;
-  }
-  return 10 * magnitude;
-}
-
-function windowLabel(days: UsageDay[]) {
-  return days.length === 0 ? "no data yet" : `last ${days.length} days`;
-}
-
 function collapseModelAliases(models: ModelInfo[]): CatalogModel[] {
   const aliasesByTarget = new Map<string, string[]>();
   const canonical: ModelInfo[] = [];
diff --git a/apps/desktop/src/api.ts b/apps/desktop/src/api.ts
index c053691e..7e8753a3 100644
--- a/apps/desktop/src/api.ts
+++ b/apps/desktop/src/api.ts
@@ -138,7 +138,6 @@ const demoDashboard: DashboardData = {
     totalBaselineCost: demoBaselineCost,
     totalSavings: demoSavings,
     savingsPercentage: Number(((demoSavings / demoBaselineCost) * 100).toFixed(1)),
-    inputTokens: 1356000,
     dailyBreakdown: demoDailyBreakdown,
     // Counts and costs add up to demoRequests (474) and demoCost (6.35).
     byModel: {
diff --git a/apps/desktop/src/usage-stats.ts b/apps/desktop/src/usage-stats.ts
new file mode 100644
index 00000000..da739622
--- /dev/null
+++ b/apps/desktop/src/usage-stats.ts
@@ -0,0 +1,135 @@
+/**
+ * Usage statistics the Usage page renders: the router's /stats payload reshaped
+ * into one continuous calendar window plus the totals that describe it.
+ *
+ * Lives outside App.tsx because the window math is the part that can be wrong in
+ * ways a screenshot will not show — a day silently dropped, a label counting
+ * days the bars do not.
+ */
+
+export type UsageDay = {
+  date: string;
+  label: string;
+  short: string;
+  requests: number;
+  cost: number;
+};
+
+/** Widest calendar window the activity chart pads out to. */
+export const MAX_CHART_DAYS = 14;
+
+export function normalizeStats(stats: Record<string, unknown> | null | undefined) {
+  const pick = (...keys: string[]) =>
+    keys.map((key) => stats?.[key]).find((value) => typeof value === "number") as
+      number | undefined;
+
+  const num = (row: Record<string, unknown>, key: string) =>
+    typeof row[key] === "number" && Number.isFinite(row[key]) ? (row[key] as number) : 0;
+
+  // The router only reports days that had traffic, so pad the series into a
+  // continuous calendar window: the last 7 days at minimum, stretched back to
+  // cover any older day the router still included (it takes the 7 most recent
+  // log files, which need not be consecutive). Quiet days render as zero bars
+  // instead of vanishing, and the window label stays truthful. Days are UTC
+  // throughout because that is how the router buckets its logs; building the
+  // window in local time would surface an evening's traffic as a phantom
+  // "tomorrow" bar west of Greenwich.
+  const byDate = new Map<string, { requests: number; cost: number }>();
+  const rawDaily = stats?.dailyBreakdown ?? stats?.daily_breakdown;
+  if (Array.isArray(rawDaily)) {
+    for (const entry of rawDaily) {
+      if (!entry || typeof entry !== "object") continue;
+      const row = entry as Record<string, unknown>;
+      const date = typeof row.date === "string" ? row.date : "";
+      if (!date || Number.isNaN(parseDay(date).getTime())) continue;
+      const prev = byDate.get(date) ?? { requests: 0, cost: 0 };
+      byDate.set(date, {
+        requests: prev.requests + num(row, "totalRequests"),
+        cost: prev.cost + num(row, "totalCost"),
+      });
+    }
+  }
+
+  const daily: UsageDay[] = [];
+  if (byDate.size > 0) {
+    const dates = [...byDate.keys()].sort();
+    const today = parseDay(formatDay(new Date()));
+    const end = latest(parseDay(dates[dates.length - 1]), today);
+    // Anything older than the cap is dropped rather than stretching the window.
+    const floor = shiftDays(end, -(MAX_CHART_DAYS - 1));
+    const firstKept = dates.map(parseDay).find((day) => day >= floor);
+    // Every day the router reported is older than the cap. Padding to `end`
+    // anyway would draw a week of zero bars for days that were never measured
+    // and label them "last 7 days"; an empty chart is the honest answer.
+    const start = firstKept ? earliest(firstKept, shiftDays(end, -6)) : undefined;
+    for (let cursor = start ?? end; start && cursor <= end; cursor = shiftDays(cursor, 1)) {
+      const date = formatDay(cursor);
+      const entry = byDate.get(date) ?? { requests: 0, cost: 0 };
+      daily.push({
+        date,
+        label: cursor.toLocaleDateString(undefined, {
+          month: "short",
+          day: "numeric",
+          timeZone: "UTC",
+        }),
+        short: cursor
+          .toLocaleDateString(undefined, { weekday: "short", timeZone: "UTC" })
+          .slice(0, 2),
+        requests: entry.requests,
+        cost: entry.cost,
+      });
+    }
+  }
+
+  return {
+    // The metric card carries the chart's own window label, so it has to count
+    // the same days the bars do. `totalRequests` spans the 7 most recent log
+    // FILES, which for an intermittent user reach back further than the window.
+    requests: daily.length
+      ? daily.reduce((sum, day) => sum + day.requests, 0)
+      : (pick("requests", "totalRequests", "total_requests") ?? 0),
+    cost: pick("totalCost", "totalCostUSD", "total_cost") ?? 0,
+    savings: pick("totalSavings", "total_savings") ?? 0,
+    savingsPct: pick("savingsPercentage", "savings_percentage") ?? 0,
+    daily,
+  };
+}
+
+/** UTC-midnight Date for a YYYY-MM-DD string. */
+function parseDay(date: string) {
+  return new Date(`${date}T00:00:00Z`);
+}
+
+/** YYYY-MM-DD of the UTC day, the key the router names its daily logs by. */
+function formatDay(day: Date) {
+  return day.toISOString().slice(0, 10);
+}
+
+function shiftDays(day: Date, delta: number) {
+  const next = new Date(day);
+  next.setUTCDate(next.getUTCDate() + delta);
+  return next;
+}
+
+function earliest(a: Date, b: Date) {
+  return a < b ? a : b;
+}
+
+function latest(a: Date, b: Date) {
+  return a > b ? a : b;
+}
+
+/** Round a chart maximum up to the nearest readable tick value. */
+export function niceCeiling(value: number) {
+  if (value <= 4) return 4;
+  const magnitude = 10 ** Math.floor(Math.log10(value));
+  for (const step of [1, 1.2, 1.6, 2, 2.4, 3, 4, 5, 6, 8, 10]) {
+    const candidate = step * magnitude;
+    if (candidate >= value) return candidate;
+  }
+  return 10 * magnitude;
+}
+
+export function windowLabel(days: UsageDay[]) {
+  return days.length === 0 ? "no data yet" : `last ${days.length} days`;
+}
diff --git a/apps/desktop/tests/usage-stats.test.ts b/apps/desktop/tests/usage-stats.test.ts
new file mode 100644
index 00000000..950a047f
--- /dev/null
+++ b/apps/desktop/tests/usage-stats.test.ts
@@ -0,0 +1,119 @@
+import { describe, expect, it } from "vitest";
+
+import { MAX_CHART_DAYS, niceCeiling, normalizeStats, windowLabel } from "../src/usage-stats.js";
+
+/** YYYY-MM-DD `offset` days from today, UTC — the key the router logs by. */
+function day(offset: number): string {
+  const d = new Date();
+  d.setUTCDate(d.getUTCDate() + offset);
+  return d.toISOString().slice(0, 10);
+}
+
+function stats(daily: Array<[string, number, number?]>, extra: Record<string, unknown> = {}) {
+  return normalizeStats({
+    dailyBreakdown: daily.map(([date, totalRequests, totalCost = 0]) => ({
+      date,
+      totalRequests,
+      totalCost,
+    })),
+    ...extra,
+  });
+}
+
+describe("normalizeStats window", () => {
+  it("pads traffic-only days into a continuous window of at least 7 days", () => {
+    const s = stats([
+      [day(-6), 10],
+      [day(-2), 5],
+    ]);
+
+    expect(s.daily).toHaveLength(7);
+    expect(s.daily.map((d) => d.date)).toEqual([...Array(7)].map((_, i) => day(i - 6)));
+    // The quiet days render as zero bars rather than vanishing.
+    expect(s.daily.filter((d) => d.requests === 0)).toHaveLength(5);
+    expect(windowLabel(s.daily)).toBe("last 7 days");
+  });
+
+  it("stretches back to an older day the router still reported, up to the cap", () => {
+    const s = stats([
+      [day(-10), 3],
+      [day(0), 7],
+    ]);
+
+    expect(s.daily).toHaveLength(11);
+    expect(s.daily[0].date).toBe(day(-10));
+    expect(windowLabel(s.daily)).toBe("last 11 days");
+  });
+
+  it("renders nothing rather than a fabricated window when every day predates the cap", () => {
+    // The router reports the 7 most recent log FILES, which for an intermittent
+    // user can all be older than the cap. Padding to today would draw a week of
+    // zero bars for days nobody measured and label them "last 7 days".
+    const s = stats([[day(-(MAX_CHART_DAYS + 5)), 120]]);
+
+    expect(s.daily).toEqual([]);
+    expect(windowLabel(s.daily)).toBe("no data yet");
+  });
+
+  it("counts the days it renders, so the metric card cannot contradict the bars", () => {
+    const s = stats(
+      [
+        [day(-3), 4],
+        [day(-1), 6],
+      ],
+      // The router's own total spans further back than the window.
+      { requests: 999, totalRequests: 999 },
+    );
+
+    expect(s.requests).toBe(10);
+    expect(s.requests).toBe(s.daily.reduce((sum, d) => sum + d.requests, 0));
+  });
+
+  it("keeps the router's total when there is no window to count", () => {
+    expect(normalizeStats({ totalRequests: 42 }).requests).toBe(42);
+    expect(normalizeStats(null).requests).toBe(0);
+    expect(normalizeStats(undefined).daily).toEqual([]);
+  });
+
+  it("sums duplicate rows for one date and skips unparseable ones", () => {
+    const s = stats([
+      [day(0), 2, 0.5],
+      [day(0), 3, 0.25],
+      ["not-a-date", 100],
+    ]);
+
+    const today = s.daily.find((d) => d.date === day(0));
+    expect(today?.requests).toBe(5);
+    expect(today?.cost).toBeCloseTo(0.75, 10);
+    expect(s.daily.some((d) => d.requests === 100)).toBe(false);
+  });
+
+  it("labels every day in UTC, so evening traffic west of Greenwich is not a tomorrow bar", () => {
+    const s = stats([["2026-03-01", 1]], {});
+    const march = s.daily.find((d) => d.date === "2026-03-01");
+    // Only present when 2026-03-01 is inside the window; guard for a stable test.
+    if (march) expect(march.label).toContain("1");
+    expect(s.daily.every((d) => d.date === d.date.slice(0, 10))).toBe(true);
+  });
+
+  it("reads the savings the router actually returns", () => {
+    const s = normalizeStats({ totalSavings: 12.5, savingsPercentage: 84.7 });
+    expect(s.savings).toBe(12.5);
+    expect(s.savingsPct).toBe(84.7);
+    // Absent rather than guessed when the router omits them.
+    expect(normalizeStats({}).savings).toBe(0);
+  });
+});
+
+describe("niceCeiling", () => {
+  it("never returns zero, so the chart divisor is safe on an all-quiet window", () => {
+    expect(niceCeiling(0)).toBeGreaterThan(0);
+    expect(niceCeiling(1)).toBe(4);
+  });
+
+  it("rounds up to a readable tick", () => {
+    expect(niceCeiling(23)).toBe(24);
+    expect(niceCeiling(91)).toBe(100);
+    expect(niceCeiling(101)).toBe(120);
+  });
+});