diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index b5b762aea73..2101ce06947 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -1,8 +1,8 @@
 import type { UsageProviderKind } from "@t3tools/contracts";
-import { useCanGoBack, useNavigate, useRouter } from "@tanstack/react-router";
-import { ArrowLeftIcon, CheckIcon, RefreshCwIcon, XIcon } from "lucide-react";
+import { CheckIcon, RefreshCwIcon, XIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 
+import { isElectron } from "../../env";
 import { cn } from "../../lib/utils";
 import { useUsage, type EnvironmentUsageStatus } from "../../state/usage";
 import {
@@ -15,6 +15,8 @@ import {
   makeWindow,
 } from "@t3tools/shared/usageFormat";
 import { ScrollArea } from "../ui/scroll-area";
+import { SidebarInset } from "../ui/sidebar";
+import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "../../workspaceTitlebar";
 import { UsageChartLegend, UsageProviderChart, type UsageChartMetric } from "./UsageProviderChart";
 import { PROVIDER_COLOR, PROVIDER_LABEL, PROVIDER_MARK, PROVIDER_ORDER } from "./usageProviders";
 
@@ -28,9 +30,6 @@ export function UsagePage() {
   const [windowDays, setWindowDays] = useState<number>(30);
   const [metric, setMetric] = useState<UsageChartMetric>("cost");
   const [breakdown, setBreakdown] = useState<"model" | "day">("model");
-  const canGoBack = useCanGoBack();
-  const navigate = useNavigate();
-  const router = useRouter();
 
   // Recomputed only when the window length changes, so a re-render does not
   // shift the range and refetch every environment.
@@ -63,143 +62,207 @@ export function UsagePage() {
   const cachedShare = observedInput === 0 ? 0 : merged.cachedInputTokens / observedInput;
 
   return (
-    <ScrollArea className="h-full">
-      <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-6 py-6">
-        <header className="flex flex-wrap items-start justify-between gap-4">
-          <div className="flex items-start gap-3">
-            <button
-              type="button"
-              aria-label="Back"
-              onClick={() => {
-                if (canGoBack) {
-                  router.history.back();
-                  return;
-                }
-                void navigate({ to: "/" });
-              }}
-              className="mt-1 cursor-pointer rounded-md border border-border p-2 text-muted-foreground hover:text-foreground"
-            >
-              <ArrowLeftIcon className="size-3.5" />
-            </button>
-            <div className="flex flex-col gap-1">
-              <h1 className="text-2xl font-semibold text-foreground">Usage</h1>
+    <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">
+        {!isElectron && (
+          <header
+            className={cn(
+              "workspace-topbar px-3 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:px-5",
+              COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
+            )}
+          >
+            <h1 className="text-sm font-medium text-foreground">Usage</h1>
+          </header>
+        )}
+
+        {isElectron && (
+          <div
+            className={cn(
+              "drag-region flex h-[52px] shrink-0 items-center px-5 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none wco:h-[env(titlebar-area-height)] wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+1em)]",
+              COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
+            )}
+          >
+            <h1 className="text-xs font-medium tracking-wide text-muted-foreground/70">Usage</h1>
+          </div>
+        )}
+
+        <ScrollArea className="min-h-0 flex-1">
+          <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-6 py-6">
+            <div className="flex flex-wrap items-center justify-between gap-4">
               <p className="text-sm text-muted-foreground">
                 {formatDayShort(window.sinceDay)} to {formatDayShort(window.untilDay)}
               </p>
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="flex overflow-hidden rounded-md border border-border">
-              {WINDOW_OPTIONS.map((option) => (
+              <div className="flex items-center gap-2">
+                <div className="flex overflow-hidden rounded-md border border-border">
+                  {WINDOW_OPTIONS.map((option) => (
+                    <button
+                      key={option.days}
+                      type="button"
+                      onClick={() => setWindowDays(option.days)}
+                      className={cn(
+                        "cursor-pointer px-3 py-1.5 text-xs",
+                        option.days === windowDays
+                          ? "bg-muted text-foreground"
+                          : "text-muted-foreground hover:text-foreground",
+                      )}
+                    >
+                      {option.label}
+                    </button>
+                  ))}
+                </div>
                 <button
-                  key={option.days}
                   type="button"
-                  onClick={() => setWindowDays(option.days)}
-                  className={cn(
-                    "cursor-pointer px-3 py-1.5 text-xs",
-                    option.days === windowDays
-                      ? "bg-muted text-foreground"
-                      : "text-muted-foreground hover:text-foreground",
-                  )}
+                  onClick={refresh}
+                  aria-label="Refresh usage"
+                  className="cursor-pointer rounded-md border border-border p-2 text-muted-foreground hover:text-foreground"
                 >
-                  {option.label}
+                  <RefreshCwIcon className="size-3.5" />
                 </button>
-              ))}
+              </div>
             </div>
-            <button
-              type="button"
-              onClick={refresh}
-              aria-label="Refresh usage"
-              className="cursor-pointer rounded-md border border-border p-2 text-muted-foreground hover:text-foreground"
-            >
-              <RefreshCwIcon className="size-3.5" />
-            </button>
-          </div>
-        </header>
 
-        {settling ? (
-          <>
-            {environments.length > 1 ? <UsageDeviceStrip environments={environments} /> : null}
-            <UsageSkeleton />
-          </>
-        ) : (
-          <>
-            <UsageCoverageNotice
-              environments={environments}
-              duplicateSources={merged.duplicateSources}
-              staleEnvironments={merged.staleEnvironments}
-            />
+            {settling ? (
+              <>
+                {environments.length > 1 ? <UsageDeviceStrip environments={environments} /> : null}
+                <UsageSkeleton />
+              </>
+            ) : (
+              <>
+                <UsageCoverageNotice
+                  environments={environments}
+                  duplicateSources={merged.duplicateSources}
+                  staleEnvironments={merged.staleEnvironments}
+                />
 
-            {/* Cost first: the financial answer, then the provider split. */}
-            <section className="grid gap-6 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)]">
-              {/* The summary follows the chart toggle, so the headline and the
+                {/* Cost first: the financial answer, then the provider split. */}
+                <section className="grid gap-6 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)]">
+                  {/* The summary follows the chart toggle, so the headline and the
                   series are always reading the same units. */}
-              <div className="flex flex-col gap-5">
-                <div className="flex flex-col gap-1">
-                  <span className="text-xs tracking-wide text-muted-foreground uppercase">
-                    {metric === "cost" ? "Raw token cost" : "Processed tokens"}
-                  </span>
-                  <span className="text-4xl font-semibold text-foreground tabular-nums">
-                    {metric === "cost"
-                      ? `${formatUsd(merged.costUsd)}*`
-                      : formatTokens(merged.totalTokens)}
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    {metric === "cost"
-                      ? "* if billed at full API rate"
-                      : `Input, cache reads and output across ${formatCount(merged.sessions)} sessions.`}
-                  </span>
-                </div>
-
-                {orderedProviders.map((provider) => {
-                  const share = metric === "cost" ? provider.costShare : provider.tokenShare;
-                  return (
-                    <div key={provider.provider} className="flex flex-col gap-1.5">
-                      <div className="flex items-baseline justify-between">
-                        <span className="flex items-center gap-2 text-sm text-foreground">
-                          <ProviderMark provider={provider.provider} className="size-4" />
-                          {PROVIDER_LABEL[provider.provider]}
-                        </span>
-                        <span className="text-sm text-foreground tabular-nums">
-                          {metric === "cost"
-                            ? formatUsd(provider.costUsd)
-                            : formatTokens(provider.totalTokens)}
-                        </span>
-                      </div>
-                      <div className="h-1 w-full overflow-hidden rounded-full bg-muted">
-                        <div
-                          className="h-full"
-                          style={{
-                            width: `${(share * 100).toFixed(1)}%`,
-                            backgroundColor: PROVIDER_COLOR[provider.provider],
-                          }}
-                        />
-                      </div>
+                  <div className="flex flex-col gap-5">
+                    <div className="flex flex-col gap-1">
+                      <span className="text-xs tracking-wide text-muted-foreground uppercase">
+                        {metric === "cost" ? "Raw token cost" : "Processed tokens"}
+                      </span>
+                      <span className="text-4xl font-semibold text-foreground tabular-nums">
+                        {metric === "cost"
+                          ? `${formatUsd(merged.costUsd)}*`
+                          : formatTokens(merged.totalTokens)}
+                      </span>
                       <span className="text-xs text-muted-foreground">
                         {metric === "cost"
-                          ? `${formatPercent(share)} of cost · ${formatTokens(provider.totalTokens)} tokens`
-                          : `${formatPercent(share)} of tokens · ${formatUsd(provider.costUsd)}`}
+                          ? "* if billed at full API rate"
+                          : `Input, cache reads and output across ${formatCount(merged.sessions)} sessions.`}
                       </span>
                     </div>
-                  );
-                })}
-              </div>
 
-              <div className="flex flex-col gap-3">
-                <div className="flex flex-wrap items-center justify-between gap-3">
-                  <h2 className="text-sm font-medium text-foreground">
-                    Daily {metric === "tokens" ? "processed tokens" : "cost"}
-                  </h2>
-                  <div className="flex items-center gap-4">
+                    {orderedProviders.map((provider) => {
+                      const share = metric === "cost" ? provider.costShare : provider.tokenShare;
+                      return (
+                        <div key={provider.provider} className="flex flex-col gap-1.5">
+                          <div className="flex items-baseline justify-between">
+                            <span className="flex items-center gap-2 text-sm text-foreground">
+                              <ProviderMark provider={provider.provider} className="size-4" />
+                              {PROVIDER_LABEL[provider.provider]}
+                            </span>
+                            <span className="text-sm text-foreground tabular-nums">
+                              {metric === "cost"
+                                ? formatUsd(provider.costUsd)
+                                : formatTokens(provider.totalTokens)}
+                            </span>
+                          </div>
+                          <div className="h-1 w-full overflow-hidden rounded-full bg-muted">
+                            <div
+                              className="h-full"
+                              style={{
+                                width: `${(share * 100).toFixed(1)}%`,
+                                backgroundColor: PROVIDER_COLOR[provider.provider],
+                              }}
+                            />
+                          </div>
+                          <span className="text-xs text-muted-foreground">
+                            {metric === "cost"
+                              ? `${formatPercent(share)} of cost · ${formatTokens(provider.totalTokens)} tokens`
+                              : `${formatPercent(share)} of tokens · ${formatUsd(provider.costUsd)}`}
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+
+                  <div className="flex flex-col gap-3">
+                    <div className="flex flex-wrap items-center justify-between gap-3">
+                      <h2 className="text-sm font-medium text-foreground">
+                        Daily {metric === "tokens" ? "processed tokens" : "cost"}
+                      </h2>
+                      <div className="flex items-center gap-4">
+                        <div className="flex overflow-hidden rounded-md border border-border">
+                          {(["cost", "tokens"] as const).map((option) => (
+                            <button
+                              key={option}
+                              type="button"
+                              onClick={() => setMetric(option)}
+                              className={cn(
+                                "cursor-pointer px-2.5 py-1 text-[10px] tracking-wide uppercase",
+                                option === metric
+                                  ? "bg-muted text-foreground"
+                                  : "text-muted-foreground hover:text-foreground",
+                              )}
+                            >
+                              {option}
+                            </button>
+                          ))}
+                        </div>
+                        <UsageChartLegend />
+                      </div>
+                    </div>
+                    <UsageProviderChart days={days} daily={merged.daily} metric={metric} />
+                  </div>
+                </section>
+
+                <section className="grid grid-cols-2 gap-px border-y border-border bg-border md:grid-cols-5">
+                  <Metric
+                    label="Processed tokens"
+                    value={formatTokens(merged.totalTokens)}
+                    detail={`${formatTokens(dailyAverage)} per active day`}
+                  />
+                  <Metric
+                    label="Cached input"
+                    value={formatTokens(merged.cachedInputTokens)}
+                    detail={`${formatPercent(cachedShare)} of observed input`}
+                  />
+                  <Metric
+                    label="Uncached input"
+                    value={formatTokens(merged.uncachedInputTokens)}
+                    detail={`${formatTokens(merged.cacheCreationTokens)} cache writes`}
+                  />
+                  <Metric
+                    label="Output"
+                    value={formatTokens(merged.outputTokens)}
+                    detail={`includes ${formatTokens(merged.reasoningTokens)} reasoning`}
+                  />
+                  <Metric
+                    label="Cache savings"
+                    value={formatUsd(merged.costQuality.cacheSavingsUsd)}
+                    detail={
+                      merged.costUsd > 0
+                        ? `${(merged.costQuality.cacheSavingsUsd / merged.costUsd).toFixed(1)}x the raw token cost`
+                        : "vs full input rates"
+                    }
+                  />
+                </section>
+
+                <section className="flex flex-col gap-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <h2 className="text-sm font-medium text-foreground">Breakdown</h2>
                     <div className="flex overflow-hidden rounded-md border border-border">
-                      {(["cost", "tokens"] as const).map((option) => (
+                      {(["model", "day"] as const).map((option) => (
                         <button
                           key={option}
                           type="button"
-                          onClick={() => setMetric(option)}
+                          onClick={() => setBreakdown(option)}
                           className={cn(
                             "cursor-pointer px-2.5 py-1 text-[10px] tracking-wide uppercase",
-                            option === metric
+                            option === breakdown
                               ? "bg-muted text-foreground"
                               : "text-muted-foreground hover:text-foreground",
                           )}
@@ -208,160 +271,103 @@ export function UsagePage() {
                         </button>
                       ))}
                     </div>
-                    <UsageChartLegend />
                   </div>
-                </div>
-                <UsageProviderChart days={days} daily={merged.daily} metric={metric} />
-              </div>
-            </section>
-
-            <section className="grid grid-cols-2 gap-px border-y border-border bg-border md:grid-cols-5">
-              <Metric
-                label="Processed tokens"
-                value={formatTokens(merged.totalTokens)}
-                detail={`${formatTokens(dailyAverage)} per active day`}
-              />
-              <Metric
-                label="Cached input"
-                value={formatTokens(merged.cachedInputTokens)}
-                detail={`${formatPercent(cachedShare)} of observed input`}
-              />
-              <Metric
-                label="Uncached input"
-                value={formatTokens(merged.uncachedInputTokens)}
-                detail={`${formatTokens(merged.cacheCreationTokens)} cache writes`}
-              />
-              <Metric
-                label="Output"
-                value={formatTokens(merged.outputTokens)}
-                detail={`includes ${formatTokens(merged.reasoningTokens)} reasoning`}
-              />
-              <Metric
-                label="Cache savings"
-                value={formatUsd(merged.costQuality.cacheSavingsUsd)}
-                detail={
-                  merged.costUsd > 0
-                    ? `${(merged.costQuality.cacheSavingsUsd / merged.costUsd).toFixed(1)}x the raw token cost`
-                    : "vs full input rates"
-                }
-              />
-            </section>
-
-            <section className="flex flex-col gap-3">
-              <div className="flex items-center justify-between gap-3">
-                <h2 className="text-sm font-medium text-foreground">Breakdown</h2>
-                <div className="flex overflow-hidden rounded-md border border-border">
-                  {(["model", "day"] as const).map((option) => (
-                    <button
-                      key={option}
-                      type="button"
-                      onClick={() => setBreakdown(option)}
-                      className={cn(
-                        "cursor-pointer px-2.5 py-1 text-[10px] tracking-wide uppercase",
-                        option === breakdown
-                          ? "bg-muted text-foreground"
-                          : "text-muted-foreground hover:text-foreground",
-                      )}
-                    >
-                      {option}
-                    </button>
-                  ))}
-                </div>
-              </div>
 
-              {breakdown === "model" ? (
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="border-b border-border text-left text-xs text-muted-foreground">
-                      <th className="py-2 font-normal">Model</th>
-                      <th className="py-2 text-right font-normal">Cost</th>
-                      <th className="py-2 text-right font-normal">Share</th>
-                      <th className="py-2 text-right font-normal">Tokens</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {merged.models.length === 0 ? (
-                      <tr>
-                        <td colSpan={4} className="py-6 text-center text-muted-foreground">
-                          No activity in this window.
-                        </td>
-                      </tr>
-                    ) : (
-                      merged.models.map((model) => (
-                        <tr
-                          key={`${model.provider}:${model.model}`}
-                          className="border-b border-border/50"
-                        >
-                          <td className="py-2 text-foreground">
-                            <span className="flex items-center gap-2">
-                              <ProviderMark provider={model.provider} className="size-3.5" />
-                              {model.model}
-                            </span>
-                          </td>
-                          <td className="py-2 text-right text-foreground tabular-nums">
-                            {formatUsd(model.costUsd)}
-                          </td>
-                          <td className="py-2 text-right text-muted-foreground tabular-nums">
-                            {formatPercent(model.costShare)}
-                          </td>
-                          <td className="py-2 text-right text-muted-foreground tabular-nums">
-                            {formatTokens(model.totalTokens)}
-                          </td>
+                  {breakdown === "model" ? (
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="border-b border-border text-left text-xs text-muted-foreground">
+                          <th className="py-2 font-normal">Model</th>
+                          <th className="py-2 text-right font-normal">Cost</th>
+                          <th className="py-2 text-right font-normal">Share</th>
+                          <th className="py-2 text-right font-normal">Tokens</th>
                         </tr>
-                      ))
-                    )}
-                  </tbody>
-                </table>
-              ) : (
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="border-b border-border text-left text-xs text-muted-foreground">
-                      <th className="py-2 font-normal">Day</th>
-                      {PROVIDER_ORDER.map((provider) => (
-                        <th key={provider} className="py-2 text-right font-normal">
-                          {PROVIDER_LABEL[provider]}
-                        </th>
-                      ))}
-                      <th className="py-2 text-right font-normal">Total</th>
-                      <th className="py-2 text-right font-normal">Tokens</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {recentDays.length === 0 ? (
-                      <tr>
-                        <td colSpan={5} className="py-6 text-center text-muted-foreground">
-                          No activity in this window.
-                        </td>
-                      </tr>
-                    ) : (
-                      recentDays.map((day) => (
-                        <tr key={day.day} className="border-b border-border/50">
-                          <td className="py-2 text-foreground">{formatDayShort(day.day)}</td>
-                          {PROVIDER_ORDER.map((provider) => (
-                            <td
-                              key={provider}
-                              className="py-2 text-right text-muted-foreground tabular-nums"
-                            >
-                              {formatUsd(day.byProvider.get(provider)?.costUsd ?? 0)}
+                      </thead>
+                      <tbody>
+                        {merged.models.length === 0 ? (
+                          <tr>
+                            <td colSpan={4} className="py-6 text-center text-muted-foreground">
+                              No activity in this window.
                             </td>
+                          </tr>
+                        ) : (
+                          merged.models.map((model) => (
+                            <tr
+                              key={`${model.provider}:${model.model}`}
+                              className="border-b border-border/50"
+                            >
+                              <td className="py-2 text-foreground">
+                                <span className="flex items-center gap-2">
+                                  <ProviderMark provider={model.provider} className="size-3.5" />
+                                  {model.model}
+                                </span>
+                              </td>
+                              <td className="py-2 text-right text-foreground tabular-nums">
+                                {formatUsd(model.costUsd)}
+                              </td>
+                              <td className="py-2 text-right text-muted-foreground tabular-nums">
+                                {formatPercent(model.costShare)}
+                              </td>
+                              <td className="py-2 text-right text-muted-foreground tabular-nums">
+                                {formatTokens(model.totalTokens)}
+                              </td>
+                            </tr>
+                          ))
+                        )}
+                      </tbody>
+                    </table>
+                  ) : (
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="border-b border-border text-left text-xs text-muted-foreground">
+                          <th className="py-2 font-normal">Day</th>
+                          {PROVIDER_ORDER.map((provider) => (
+                            <th key={provider} className="py-2 text-right font-normal">
+                              {PROVIDER_LABEL[provider]}
+                            </th>
                           ))}
-                          <td className="py-2 text-right text-foreground tabular-nums">
-                            {formatUsd(day.costUsd)}
-                          </td>
-                          <td className="py-2 text-right text-muted-foreground tabular-nums">
-                            {formatTokens(day.totalTokens)}
-                          </td>
+                          <th className="py-2 text-right font-normal">Total</th>
+                          <th className="py-2 text-right font-normal">Tokens</th>
                         </tr>
-                      ))
-                    )}
-                  </tbody>
-                </table>
-              )}
-            </section>
-          </>
-        )}
+                      </thead>
+                      <tbody>
+                        {recentDays.length === 0 ? (
+                          <tr>
+                            <td colSpan={5} className="py-6 text-center text-muted-foreground">
+                              No activity in this window.
+                            </td>
+                          </tr>
+                        ) : (
+                          recentDays.map((day) => (
+                            <tr key={day.day} className="border-b border-border/50">
+                              <td className="py-2 text-foreground">{formatDayShort(day.day)}</td>
+                              {PROVIDER_ORDER.map((provider) => (
+                                <td
+                                  key={provider}
+                                  className="py-2 text-right text-muted-foreground tabular-nums"
+                                >
+                                  {formatUsd(day.byProvider.get(provider)?.costUsd ?? 0)}
+                                </td>
+                              ))}
+                              <td className="py-2 text-right text-foreground tabular-nums">
+                                {formatUsd(day.costUsd)}
+                              </td>
+                              <td className="py-2 text-right text-muted-foreground tabular-nums">
+                                {formatTokens(day.totalTokens)}
+                              </td>
+                            </tr>
+                          ))
+                        )}
+                      </tbody>
+                    </table>
+                  )}
+                </section>
+              </>
+            )}
+          </div>
+        </ScrollArea>
       </div>
-    </ScrollArea>
+    </SidebarInset>
   );
 }