feat(ui): interactive graph, strip context menus, days by activity, message times, limit status words

ui/src/lib/shell/instruments.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { LimitWindow } from "$lib/api/types";
   import { fmtCountdown, fmtMoney, fmtRelative, fmtTokens } from "$lib/format";
-  import { limitLabel } from "$lib/limits";
+  import { limitLabel, limitWord } from "$lib/limits";
   import { cn } from "$lib/utils";
 
   let {
@@ -28,10 +28,12 @@
   const contextPct = $derived(
     Math.min(100, Math.round((contextTokens / contextWindow) * 100))
   );
-  const known = (w: LimitWindow) =>
-    w.utilization !== null && w.utilization !== undefined;
+  // The figure shown: the report's own, else the last one inside the window.
+  const figure = (w: LimitWindow) => w.utilization ?? w.last_known?.utilization;
   const pct = (w: LimitWindow) =>
-    Math.min(100, Math.round((w.utilization ?? 0) * 100));
+    Math.min(100, Math.round((figure(w) ?? 0) * 100));
+  const bound = (w: LimitWindow) =>
+    w.utilization === null || w.utilization === undefined ? "≥ " : "";
 </script>
 
 <div
@@ -65,16 +67,17 @@
     </span>
   </div>
   {#each windows as w (w.window)}
+    {@const known = figure(w) !== null && figure(w) !== undefined}
     <div class="flex flex-col gap-1.5">
       <span class="label-quiet">{limitLabel(w.window)}</span>
-      {#if known(w)}
+      {#if known}
         <span
           class={cn(
             "tabular font-semibold text-2xl leading-none tracking-tight",
             w.status === "rejected" && "text-destructive"
           )}
         >
-          {pct(w)}
+          {bound(w)}{pct(w)}
           <span class="font-normal text-muted-foreground text-sm">%</span>
           <span class="font-normal text-muted-foreground text-xs">
             {fmtCountdown(w.resets_at, now).replace("resets ", "")}
@@ -97,11 +100,23 @@
           ></span>
         </span>
       {:else}
-        <span class="text-muted-foreground text-sm leading-none">
-          no report
+        <span
+          class={cn(
+            "font-semibold text-2xl leading-none tracking-tight",
+            w.status === "rejected" && "text-destructive"
+          )}
+        >
+          {limitWord(w.status)}
+          <span class="font-normal text-muted-foreground text-xs">
+            {fmtCountdown(w.resets_at, now).replace("resets ", "")}
+          </span>
         </span>
-        <span class="text-muted-foreground text-xs">
-          last seen {fmtRelative(w.ts, now)}
+        <span class="tabular text-muted-foreground text-xs">
+          {fmtTokens(
+            w.gateway.input + w.gateway.output + w.gateway.cache_creation
+          )}
+          through here · {fmtMoney(w.gateway.cost_usd)} · seen
+          {fmtRelative(w.ts, now)}
         </span>
       {/if}
     </div>