@oharness/server 0.9.1 → 0.9.3

package/dist/page/client/usage.js

@@ -958,15 +958,13 @@ function showAccountUsage(body) {
       title.appendChild(el("span", "muted small",
         usageCredits(rows.reduce((sum, entry) => sum + (entry.spentMicro || 0), 0))));
       panel.appendChild(title);
-      for (const entry of rows) {
-        const row = el("div", "row-card");
-        const line = el("div", "row-head");
-        line.appendChild(el("span", "row-title", entry.key));
-        line.appendChild(el("span", "muted small usage-amount", usageCredits(entry.spentMicro || 0)));
-        row.appendChild(line);
-        row.appendChild(el("div", "muted small", usageCalls(entry.calls || 0)));
-        panel.appendChild(row);
-      }
+      const groupTotal = rows.reduce((sum, entry) => sum + (entry.spentMicro || 0), 0);
+      panel.appendChild(usageScrollList(rows, (entry) => usageModelRow(
+        entry.key,
+        usageCredits(entry.spentMicro || 0),
+        groupTotal ? (entry.spentMicro || 0) / groupTotal : 0,
+        usageSeriesFacts(entry),
+      )));
     }
   } else {
     panel.appendChild(el("p", "muted", t(kind === "all" ? "usage.none" : "usage.kindNone")));
@@ -984,8 +982,6 @@ function showAccountUsage(body) {
   panelBody.appendChild(panel);
 }
 
-/** How many sessions the usage page lists before "View more". */
-const USAGE_RECENT = 10;
 /** Sessions per request on the sessions page. */
 const USAGE_SESSIONS_PAGE = 50;
 
@@ -1022,11 +1018,81 @@ function usageSessionRow(entry) {
   return row;
 }
 
+/**
+ * One model: its name with what it cost at the top right, then a bar for its
+ * share of the list's spend with what it moved written across it. The bar is
+ * what makes a list of forty readable — the two that carried the bill stand
+ * out before a number is read.
+ */
+function usageModelRow(name, amount, share, details) {
+  const row = el("div", "row-card usage-model");
+  const line = el("div", "row-head");
+  line.appendChild(el("span", "row-title", name));
+  line.appendChild(el("span", "muted small usage-amount", amount));
+  row.appendChild(line);
+  const track = el("div", "usage-share");
+  const fill = el("span", "usage-share-fill");
+  // A sliver for anything that cost something, so it does not read as zero.
+  fill.style.width = (share > 0 ? Math.max(share * 100, 0.8) : 0).toFixed(2) + "%";
+  track.appendChild(fill);
+  const pct = share >= 0.995 ? "100%" : share >= 0.01 ? Math.round(share * 100) + "%" : share > 0 ? "<1%" : "0%";
+  const label = el("span", "usage-share-label");
+  label.appendChild(el("span", "usage-model-pct", pct));
+  if (details.length) label.appendChild(el("span", "usage-share-facts", details.join("  ·  ")));
+  track.appendChild(label);
+  row.appendChild(track);
+  return row;
+}
+
+/** What an account row moved: its tokens, or the media it made. */
+function usageSeriesFacts(entry) {
+  const facts = [];
+  const tokens = (entry.inputTokens || 0) + (entry.outputTokens || 0);
+  if (tokens) facts.push(t("usage.tokens", { n: formatTokens(tokens) }));
+  const media = entry.media || {};
+  if (media.images) facts.push(t("usage.images", { n: media.images.toLocaleString(LOCALE) }));
+  if (media.videoSeconds) facts.push(t("usage.videoSeconds", { n: usageSeconds(media.videoSeconds) }));
+  if (media.audioSeconds) facts.push(t("usage.audioSeconds", { n: usageSeconds(media.audioSeconds) }));
+  if (media.characters) facts.push(t("usage.characters", { n: media.characters.toLocaleString(LOCALE) }));
+  return facts;
+}
+
+/** How many rows a model list draws at a time. */
+const USAGE_LIST_PAGE = 20;
+
+/**
+ * A list of models in a box of its own height.
+ *
+ * A heavy month on OpenRouter is a hundred models, and drawn in full they
+ * pushed the sessions and the scope note a dozen screens down. The box keeps
+ * the page's shape and scrolls on its own; rows are drawn a page at a time as
+ * its bottom comes near, because most visits read the top few.
+ */
+function usageScrollList(entries, render) {
+  const box = el("div", "usage-list");
+  let shown = 0;
+  function more() {
+    for (const entry of entries.slice(shown, shown + USAGE_LIST_PAGE)) box.appendChild(render(entry));
+    shown = Math.min(entries.length, shown + USAGE_LIST_PAGE);
+    if (shown >= entries.length) box.removeEventListener("scroll", near);
+  }
+  // Read off the scroll position rather than an observer on a sentinel: a
+  // sentinel that stays in view after a page lands never re-enters it, and
+  // the list stopped at the second page.
+  function near() {
+    if (box.scrollTop + box.clientHeight >= box.scrollHeight - 160) more();
+  }
+  more();
+  if (shown < entries.length) box.addEventListener("scroll", near, { passive: true });
+  return box;
+}
+
 /** What the sessions page is searching for, kept while the page is open. */
 let usageSessionsQuery = "";
 
 /**
- * Every session that spent something on this machine, newest first.
+ * Every session that spent something on this machine, newest first — the
+ * Sessions page in the sidebar.
  *
  * Read a page at a time and drawn as the list is scrolled, because a machine
  * used daily has thousands and the first screen is the one almost always
@@ -1038,13 +1104,6 @@ async function showUsageSessions() {
   const panel = el("div", "panel usage");
   const head = el("div", "row-head");
   head.appendChild(el("h2", null, t("usage.allSessions")));
-  const back = el("button", "ghost", t("usage.backToUsage"));
-  back.type = "button";
-  back.addEventListener("click", () => {
-    setNav("usage");
-    void showUsage();
-  });
-  head.appendChild(back);
   panel.appendChild(head);
 
   const search = el("input", "art-search");
@@ -1078,7 +1137,7 @@ async function showUsageSessions() {
     const body = await getJson("/usage/sessions?limit=" + USAGE_SESSIONS_PAGE + "&offset=" + offset +
       (usageSessionsQuery ? "&q=" + encodeURIComponent(usageSessionsQuery) : ""));
     loading = false;
-    if (asked !== generation || shownPanel !== "usage-sessions") return;
+    if (asked !== generation || shownPanel !== "nav-sessions") return;
     if (body.error) {
       foot.textContent = body.error;
       return;
@@ -1109,7 +1168,7 @@ async function showUsageSessions() {
   const sentinel = el("div", "usage-sessions-sentinel");
   panel.appendChild(sentinel);
   const observer = new IntersectionObserver((entries) => {
-    if (shownPanel !== "usage-sessions") return void observer.disconnect();
+    if (shownPanel !== "nav-sessions") return void observer.disconnect();
     if (entries.some((entry) => entry.isIntersecting)) void load();
   }, { root: panelView, rootMargin: "0px 0px 400px 0px" });
   observer.observe(sentinel);
@@ -1215,38 +1274,11 @@ async function showUsage() {
 
   if (models.length) {
     panel.appendChild(el("h3", "section-title", t("usage.byModel")));
-    for (const entry of models) {
-      const row = el("div", "row-card");
-      const line = el("div", "row-head");
-      line.appendChild(el("span", "row-title", entry.model));
-      line.appendChild(el("span", "muted small usage-amount", "$" + (entry.costUsd || 0).toFixed(2)));
-      row.appendChild(line);
-      const bits = [
-        t("usage.tokens", { n: formatTokens(moved(entry)) }),
-        overSessions(entry.sessions),
-      ];
-      const share = cachePct(entry);
-      if (share !== null) bits.push(t("usage.cached", { pct: share }));
-      row.appendChild(el("div", "muted small", bits.join("  ·  ")));
-      panel.appendChild(row);
-    }
-  }
-
-  const sessions = body.sessions || [];
-  if (sessions.length) {
-    // The latest few, and a way to all of them: a page of rows here pushed
-    // the scope note below off the screen and still was not every session.
-    const title = el("div", "usage-section-head");
-    title.appendChild(el("h3", "section-title", t("usage.bySession")));
-    const more = el("button", "ghost", t("usage.moreSessions"));
-    more.type = "button";
-    more.addEventListener("click", () => {
-      setNav("usage-sessions");
-      void showUsageSessions();
-    });
-    title.appendChild(more);
-    panel.appendChild(title);
-    for (const entry of sessions.slice(0, USAGE_RECENT)) panel.appendChild(usageSessionRow(entry));
+    const spent = totals.costUsd || 0;
+    panel.appendChild(usageScrollList(models, (entry) => {
+      return usageModelRow(entry.model, "$" + (entry.costUsd || 0).toFixed(2), spent ? (entry.costUsd || 0) / spent : 0,
+        [t("usage.tokens", { n: formatTokens(moved(entry)) })]);
+    }));
   }
 
   if (!models.length) panel.appendChild(el("p", "muted", t("usage.none")));

package/dist/page/client/usage.js.map

@@ -1 +1 @@
-{"version":3,"file":"usage.js","sourceRoot":"","sources":["../../../src/page/client/usage.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4vC3B,CAAC"}
+{"version":3,"file":"usage.js","sourceRoot":"","sources":["../../../src/page/client/usage.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4xC3B,CAAC"}

package/dist/page/style.js

@@ -32,32 +32,98 @@ code,pre,.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
 
 /* sidebar */
 aside{
-  width:236px;flex:0 0 236px;background:var(--panel);
-  display:flex;flex-direction:column;overflow:hidden;transition:flex-basis .18s,width .18s;
-}
-/* Folded away on a desktop. Zero width rather than display:none, for the
-   slide, and so nothing inside has to be rebuilt when it comes back. */
+  --side-w:296px;width:var(--side-w);flex:0 0 var(--side-w);
+  display:flex;flex-direction:column;align-items:flex-end;overflow:hidden;
+}
+/* Folding, the sidebar narrows while its contents keep their width, pinned
+   to its right edge, so they slide out to the left behind the frame rather
+   than squeezing; the tab strip's inset grows by as much as the sidebar
+   loses, so the first tab glides to its place beside the toggle. Only once a
+   hand has touched the toggle: a page opened folded starts folded. */
+#side-top,#side-body{width:var(--side-w);flex-shrink:0}
+body.nav-anim>aside{transition:width .26s cubic-bezier(.2,0,0,1),flex-basis .26s cubic-bezier(.2,0,0,1)}
+body.nav-anim #tabs{transition:padding-left .26s cubic-bezier(.2,0,0,1)}
+body.nav-anim .wordmark{transition:opacity .14s}
+body.nav-collapsed .wordmark{opacity:0}
+@media (prefers-reduced-motion:reduce){body.nav-anim>aside,body.nav-anim #tabs,body.nav-anim .wordmark{transition:none}}
+/*
+ * A frame with the panel as a card inside it.
+ *
+ * The top bar and the rail are one L in the window's own colour, --frame, and
+ * the panel and the page sit inside it. It takes a third colour: a top bar
+ * over the sidebar in either of the other two runs into the surface below it
+ * in that colour — a grey one boxed the white rail in, a white one ran on
+ * into the page. The panel is a card set into the frame, rounded all round
+ * and clear of the page by a margin. The traffic lights sit on the frame, one
+ * colour, where the rail alone is too narrow to hold them.
+ */
+#side-top{height:36px;flex:0 0 36px;background:var(--frame);display:flex;align-items:center;overflow:hidden}
+/* Just past the toggle, which ends at 40px on the web and at 108px beside
+   the traffic lights, and fixed there, so the mark stays in the corner when
+   the sidebar folds and only the name goes with it. */
+.brand{position:fixed;z-index:30;top:0;left:48px;height:36px;display:flex;align-items:center;gap:8px;white-space:nowrap;pointer-events:none}
+body.inset-titlebar .brand{left:116px}
+body.inset-titlebar #side-top{-webkit-app-region:drag}
+#side-body{flex:1 1 auto;display:flex;min-height:0;background:var(--frame)}
+/*
+ * Two columns: a rail of the app's places, and the panel of the work.
+ *
+ * The rail is the frame and the panel a card in it, so the two read as
+ * different surfaces without a line between them.
+ */
+#rail{
+  width:52px;flex:0 0 52px;background:var(--frame);display:flex;flex-direction:column;
+  align-items:center;padding:8px 0 10px;gap:6px;overflow:hidden;
+}
+#rail #nav{padding:0;gap:4px;align-items:center}
+#rail .nav-item{width:36px;height:36px;padding:0;justify-content:center;border-radius:9px;color:var(--dim)}
+#rail .nav-item:hover{color:var(--fg)}
+#rail .nav-item.active{color:var(--fg)}
+/* Drawn at 18px on the 16 grid, the shared 1.5 stroke would render at 1.7px
+   and read heavier than every other icon on the page; 1.2 lands near 1.35. */
+#rail .nav-item .ico{width:18px;height:18px;stroke-width:1.2}
+/* The panel's icons follow at their own 14-16px, so the rail and the panel
+   beside it draw at one weight. Matched on the attribute, so the mark keeps its 2.5. */
+#side-panel svg[stroke-width="1.5"]{stroke-width:1.25}
+#rail .nav-item>span{display:none}
+.rail-tip{
+  position:fixed;z-index:80;transform:translateY(-50%);padding:4px 9px;border-radius:7px;
+  background:var(--accent);color:var(--bg);font-size:12px;line-height:1.4;white-space:nowrap;
+  pointer-events:none;opacity:0;transition:opacity .08s;
+}
+.rail-tip.on{opacity:1}
+#side-panel{
+  width:236px;flex:0 0 236px;background:var(--panel);border-radius:12px;margin:0 8px 8px 0;
+  display:flex;flex-direction:column;overflow:hidden;
+}
+#side-new{padding:0 8px 2px;display:flex;flex-direction:column}
+/* Folded away on a desktop, the whole sidebar goes, rail and all, and the
+   page has the window: keeping the rail left a strip of chrome and pushed the
+   tabs a rail's width plus the traffic lights in from the edge. */
 body.nav-collapsed>aside{width:0;flex-basis:0}
-#nav-collapse,#nav-expand{
-  width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--dim);
-  cursor:pointer;padding:0;display:grid;place-items:center;flex:0 0 auto;-webkit-app-region:no-drag;
-}
-#nav-collapse{margin-left:auto}
-#nav-collapse:hover,#nav-expand:hover{background:var(--hover);color:var(--fg)}
-#nav-collapse svg,#nav-expand svg{width:16px;height:16px;display:block;shape-rendering:geometricPrecision}
-#nav-expand{display:none;position:absolute;z-index:5;top:7px;left:8px}
-body.nav-collapsed #nav-expand{display:grid}
-body.nav-collapsed #tabs{padding-left:44px}
-/* The traffic lights sit where the sidebar's corner was; step past them. */
-body.inset-titlebar.nav-collapsed #nav-expand{left:80px}
-body.inset-titlebar.nav-collapsed #tabs{padding-left:116px;-webkit-app-region:drag}
-body.inset-titlebar.nav-collapsed #tabs>*{-webkit-app-region:no-drag}
-aside header{padding:15px 14px 8px;display:flex;gap:8px;align-items:center}
-/* The desktop shell hides the title bar, so on macOS the traffic lights float
- * over this corner. The wordmark moves below them, and the strip they sit in
- * becomes the window's drag handle — without it a title-bar-less window has
- * nothing to grab. */
-body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
+/* In the top bar, at the same spot folded or not, so the click that folded the
+   sidebar can bring it straight back. On a desktop it steps past the traffic
+   lights (14-74px, set in desktop/main.js). */
+#nav-toggle{
+  position:fixed;z-index:30;top:4px;left:12px;width:28px;height:28px;border:0;border-radius:7px;
+  background:transparent;color:var(--dim);cursor:pointer;padding:0;
+  display:grid;place-items:center;-webkit-app-region:no-drag;
+}
+#nav-toggle:hover{background:var(--hover);color:var(--fg)}
+#nav-toggle svg{width:16px;height:16px;display:block;shape-rendering:geometricPrecision}
+body.inset-titlebar #nav-toggle{left:80px}
+body.shelf-full #nav-toggle{display:none}
+/* The window has no title bar, so the strip's empty stretch is its handle.
+   Folded, the strip is the whole top bar and starts past the mark beside the
+   toggle: 66px on the web, 134px beside the traffic lights. */
+body.inset-titlebar #tabs{-webkit-app-region:drag}
+body.inset-titlebar #tabs>*{-webkit-app-region:no-drag}
+body.nav-collapsed #tabs{padding-left:74px}
+body.inset-titlebar.nav-collapsed #tabs{padding-left:142px}
+/* The name is in the top bar on a wide screen, so the panel's header is only
+   the phone drawer's, where it carries the name and the close button. */
+aside header{display:none;padding:8px 14px;min-height:44px;gap:8px;align-items:center}
+#side-panel{padding-top:8px}
 .mark{width:18px;height:18px;color:var(--fg);opacity:.85;flex:0 0 auto}
 .mark svg{width:18px;height:18px;display:block}
 /* Slightly tightened and a touch heavier than body text, which is what makes
@@ -518,31 +584,43 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
  * is in front. Spanning both left a band of empty chrome above the drawer that
  * belonged to neither.
  *
- * The strip is the shelf the tabs stand on, in the sidebar's grey, and the
- * front tab is cut from the page under it — the shape every browser uses.
- * It used to be the other way round: a transparent strip on the white
- * transcript with the front tab as a grey pill, so the row read as part of
- * the conversation rather than as the chrome above it. No bottom padding,
- * or a grey line would sit between the front tab and the page it is part of.
+ * The strip is the top of the frame, at #side-top's height, so one bar runs
+ * across the window, and the front tab is cut from the page under it — the
+ * shape every browser uses. No bottom padding, or a line of frame would sit
+ * between the front tab and the page it is part of; no left padding, so the
+ * first tab's edge is the page's.
  */
 #tabs{
-  display:flex;align-items:center;gap:2px;padding:6px 12px 0;overflow-x:auto;flex:0 0 auto;
-  background:var(--panel);
+  display:flex;align-items:flex-end;gap:2px;height:36px;padding:0 12px 0 0;overflow-x:auto;flex:0 0 auto;
+  background:var(--frame);
 }
 #tabs:empty{display:none}
+/* A scrollbar here takes its height out of the strip and lifts every tab off
+   the page, and a hovered tab's buttons were enough to bring one on. Tabs
+   shrink first, as a browser's do, and past that the strip still scrolls by
+   wheel or trackpad, only without the bar. */
+#tabs{scrollbar-width:none}
+#tabs::-webkit-scrollbar{display:none}
 .tab{
-  display:flex;align-items:center;gap:7px;max-width:230px;height:30px;padding:0 6px 0 10px;
+  display:flex;align-items:center;gap:7px;max-width:230px;min-width:72px;height:30px;padding:0 14px;
   border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--dim);
-  font:inherit;font-size:12.5px;cursor:pointer;flex:0 0 auto;
-}
-.tab:hover{background:var(--hover);color:var(--fg)}
+  font:inherit;font-size:12.5px;cursor:pointer;flex:0 1 auto;
+}
+/* The tab under the pointer or in front keeps its width, so its buttons fit
+   and it is the others that give way. */
+.tab:hover,.tab:focus-within,.tab.on{flex-shrink:0}
+/* Hovered, a tab lifts halfway toward the page it would become, the way a
+   browser's do, rather than sinking into a darker grey the front tab never
+   is. Mixed from --bg so the dark theme lifts the same way. */
+.tab:hover{background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--fg)}
 .tab.on{background:var(--bg);color:var(--fg)}
-.tab .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tab-page .ico-sm{width:14px;height:14px;opacity:.75}
+.tab .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 /* Which project a tab is in, ahead of its title. Set quieter than the title,
    which is still what identifies it. */
 .tab .where{
   max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
-  font-size:11px;opacity:.6;flex:0 0 auto;
+  font-size:11px;opacity:.6;flex:0 1 auto;min-width:0;
 }
 .tab .where::after{content:"/";padding-left:5px;opacity:.5}
 .tab .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto}
@@ -556,6 +634,10 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
    transparent — a transparent button still holds its space. A running
    browser keeps its button, because its dot is what says so. */
 .tab:hover .x,.tab:focus-within .x{display:grid}
+/* Even padding while the title is alone, as a label is set; the right side
+   gives some back when a button comes in, so the button sits near the edge
+   and the tab grows by less. */
+.tab:hover,.tab:focus-within,.tab:has(.tab-browser.running){padding-right:6px}
 /* The tab's browser button's size. Much smaller and the 1.5px strokes thin
    below a pixel and blur; the full 16px outweighs the tab's own text. */
 .tab .x svg{width:14px;height:14px}
@@ -571,7 +653,7 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
 .tab:hover .tab-browser,.tab.on .tab-browser,.tab-browser.running{opacity:.62}
 .tab-browser:hover,.tab-browser.on{opacity:1;background:var(--sel)}
 .tab-browser svg{width:14px;height:14px}
-.tab-browser i{display:none;position:absolute;right:2px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 1.5px var(--panel)}
+.tab-browser i{display:none;position:absolute;right:2px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 1.5px var(--frame)}
 .tab.on .tab-browser i{box-shadow:0 0 0 1.5px var(--bg)}
 .tab-browser.running i{display:block}
 #tab-add{
@@ -1472,6 +1554,17 @@ details.setting>summary:focus-visible{outline:none;background:var(--hover)}
 .usage-kind.on{background:var(--accent);color:var(--bg);box-shadow:none}
 .usage-kind.on .usage-kind-label,.usage-kind.on .usage-kind-sub,.usage-kind.on.empty .usage-kind-value{color:var(--bg);opacity:.72}
 .usage-counted{margin:0 0 10px}
+/* A model list: its own height, its own scroll, no frame drawn round it. */
+.usage-list{max-height:440px;overflow-y:auto;overscroll-behavior:contain}
+.usage-list>.row-card:last-of-type{margin-bottom:0}
+/* The share bar: a filled track, no outline, thick enough to carry its facts. */
+.usage-model{padding:12px 14px}
+.usage-model .row-head{margin-bottom:8px}
+.usage-share{position:relative;height:28px;border-radius:6px;background:var(--field);overflow:hidden}
+.usage-share-fill{position:absolute;inset:0 auto 0 0;border-radius:6px;background:color-mix(in srgb,var(--brand) 34%,transparent)}
+.usage-share-label{position:relative;display:flex;align-items:center;gap:12px;height:100%;padding:0 10px;min-width:0;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
+.usage-model-pct{flex:none;color:var(--fg);font-weight:600}
+.usage-share-facts{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--fg);opacity:.72}
 /* Amounts in one column at the right edge, so a list is compared by glancing down it. */
 .usage .row-head .usage-amount{margin-left:auto;flex:none;font-variant-numeric:tabular-nums}
 .usage .row-head .row-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -2902,19 +2995,31 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
  */
 @media (max-width:760px){
   body>aside{
-    position:fixed;inset:0 auto 0 0;z-index:20;width:min(280px,84vw);flex-basis:auto;
+    position:fixed;inset:0 auto 0 0;z-index:20;width:min(332px,90vw);flex-basis:auto;
     transform:translateX(-100%);transition:transform .2s;
     padding-bottom:env(safe-area-inset-bottom);
   }
   body>aside.open{transform:none;box-shadow:0 0 0 1px #0000000a,0 12px 40px #00000040}
   body.nav-open #scrim{display:block}
   #nav-close{display:grid}
-  #nav-collapse,body.nav-collapsed #nav-expand{display:none}
-  body.nav-collapsed>aside{width:min(280px,84vw);flex-basis:auto}
-  body.nav-collapsed #tabs{padding-left:12px}
+  #nav-toggle,#side-top{display:none}
+  aside header{display:flex}
+  #side-panel{padding-top:0}
+  #side-panel{border-radius:0;margin:0}
+  body.nav-collapsed>aside{width:min(332px,90vw);flex-basis:auto}
+  #side-body{width:auto;align-self:stretch}
+  #side-panel,body.nav-collapsed #side-panel{flex:1 1 auto;width:auto;min-width:0;margin:0}
   #burger{display:grid}
-  #top{padding:6px 10px}
-  #top:has(#changes-btn:not([hidden])){padding:6px 10px}
+  /* One bar, not two: the burger sits at the head of the tab strip, in the
+     frame's colour, rather than on a white row of its own above it. #top
+     keeps its row only while it has the changes button to show. */
+  #top{padding:0;min-height:0}
+  #top:has(#changes-btn:not([hidden])){padding:6px 10px 6px 52px;background:var(--frame)}
+  #burger{position:fixed;z-index:15;top:0;left:4px;width:40px;height:36px;margin:0;border-radius:8px}
+  #tabs,body.nav-collapsed #tabs{padding-left:44px}
+  /* The front tab has the width it needs: its buttons show on a phone, where
+     there is no hover to wait for, and they left the title as "Unt…". */
+  .tab.on{max-width:none}
 
   /* Both panes are the screen while open, and each gets a way out of its own:
      the top bar with the changes button is underneath them. */

package/dist/page/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,0EAA0E;AAC1E,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;EAC7B,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAm+FV,CAAC"}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,0EAA0E;AAC1E,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;EAC7B,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4kGV,CAAC"}