@talgent/workbench-ui 0.0.0-stage → 0.1.2

package/README.md

@@ -1,3 +1,16 @@
-# Temporary Holding Version
+# workbench-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The Agent Workbench's pages, components, hooks, clients and styles. Every web app built on the
+Workbench uses it; each app mounts the pages in its own shell through `EntryShellContext`
+(`components/shell/entry-shell.ts`).
+
+An app imports modules by path, such as `@talgent/workbench-ui/lib/client`, its stylesheet
+right after Tailwind (`@import "@talgent/workbench-ui/styles/workbench.css"`), and its Vite
+settings from `vite-preset.ts`: the public icons, bundle splitting, test environment and the
+dev proxy to the core. Test support for apps is in `test-support/`.
+
+The package is published as TypeScript source; the app's Vite and Tailwind compile it. Node does
+not strip types from files under `node_modules`, so an app that installs the package from the
+registry loads its Vite config with `--configLoader runner` (on `vite` and `vitest` alike).
+
+The package depends only on the core.

package/assets/brand-icons/LICENSE.md

@@ -0,0 +1,30 @@
+# CC0 1.0 Universal
+
+## Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer exclusive Copyright and Related Rights (defined below) upon the creator and subsequent owner(s) (each and all, an “owner”) of an original work of authorship and/or a database (each, a “Work”).
+
+Certain owners wish to permanently relinquish those rights to a Work for the purpose of contributing to a commons of creative, cultural and scientific works (“Commons”) that the public can reliably and without fear of later claims of infringement build upon, modify, incorporate in other works, reuse and redistribute as freely as possible in any form whatsoever and for any purposes, including without limitation commercial purposes. These owners may contribute to the Commons to promote the ideal of a free culture and the further production of creative, cultural and scientific works, or to gain reputation or greater distribution for their Work in part through the use and efforts of others.
+
+For these and/or other purposes and motivations, and without any expectation of additional consideration or compensation, the person associating CC0 with a Work (the “Affirmer”), to the extent that he or she is an owner of Copyright and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and publicly distribute the Work under its terms, with knowledge of his or her Copyright and Related Rights in the Work and the meaning and intended legal effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be protected by copyright and related or neighboring rights (“Copyright and Related Rights”). Copyright and Related Rights include, but are not limited to, the following:
+    1. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work;
+    2. moral rights retained by the original author(s) and/or performer(s);
+    3. publicity and privacy rights pertaining to a person’s image or likeness depicted in a Work;
+    4. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(i), below;
+    5. rights protecting the extraction, dissemination, use and reuse of data in a Work;
+    6. database rights (such as those arising under Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, and under any national implementation thereof, including any amended or successor version of such directive); and
+    7. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention of, applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and unconditionally waives, abandons, and surrenders all of Affirmer’s Copyright and Related Rights and associated claims and causes of action, whether now known or unknown (including existing as well as future claims and causes of action), in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the “Waiver”). Affirmer makes the Waiver for the benefit of each member of the public at large and to the detriment of Affirmer’s heirs and successors, fully intending that such Waiver shall not be subject to revocation, rescission, cancellation, termination, or any other legal or equitable action to disrupt the quiet enjoyment of the Work by the public as contemplated by Affirmer’s express Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason be judged legally invalid or ineffective under applicable law, then the Waiver shall be preserved to the maximum extent permitted taking into account Affirmer’s express Statement of Purpose. In addition, to the extent the Waiver is so judged Affirmer hereby grants to each affected person a royalty-free, non transferable, non sublicensable, non exclusive, irrevocable and unconditional license to exercise Affirmer’s Copyright and Related Rights in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the “License”). The License shall be deemed effective as of the date CC0 was applied by Affirmer to the Work. Should any part of the License for any reason be judged legally invalid or ineffective under applicable law, such partial invalidity or ineffectiveness shall not invalidate the remainder of the License, and in such case Affirmer hereby affirms that he or she will not (i) exercise any of his or her remaining Copyright and Related Rights in the Work or (ii) assert any associated claims and causes of action with respect to the Work, in either case contrary to Affirmer’s express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+    1. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document.
+    2. Affirmer offers the Work as-is and makes no representations or warranties of any kind concerning the Work, express, implied, statutory or otherwise, including without limitation warranties of title, merchantability, fitness for a particular purpose, non infringement, or the absence of latent or other defects, accuracy, or the present or absence of errors, whether or not discoverable, all to the greatest extent permissible under applicable law.
+    3. Affirmer disclaims responsibility for clearing rights of other persons that may apply to the Work or any use thereof, including without limitation any person’s Copyright and Related Rights in the Work. Further, Affirmer disclaims responsibility for obtaining any necessary consents, permissions or other rights required for any use of the Work.
+    4. Affirmer understands and acknowledges that Creative Commons is not a party to this document and has no duty or obligation with respect to this CC0 or use of the Work.
+
+For more information, please see <https://creativecommons.org/publicdomain/zero/1.0/>.

package/assets/brand-icons/README.md

@@ -0,0 +1,5 @@
+# Brand icons
+
+Brand marks from [Simple Icons](https://simpleicons.org/) 14.0.0, released under CC0 1.0 (see `LICENSE.md`).
+They identify known services in Marketplace; the brand-to-item mapping lives in
+`components/marketplace/marketplace-icons.tsx`. Brand names and marks remain their owners' trademarks.

package/assets/brand-icons/figma.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Figma</title><path d="M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z"/></svg>

package/assets/brand-icons/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

package/assets/brand-icons/linear.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Linear</title><path d="M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z"/></svg>

package/assets/brand-icons/notion.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Notion</title><path d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"/></svg>

package/assets/brand-icons/sentry.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Sentry</title><path d="M13.91 2.505c-.873-1.448-2.972-1.448-3.844 0L6.904 7.92a15.478 15.478 0 0 1 8.53 12.811h-2.221A13.301 13.301 0 0 0 5.784 9.814l-2.926 5.06a7.65 7.65 0 0 1 4.435 5.848H2.194a.365.365 0 0 1-.298-.534l1.413-2.402a5.16 5.16 0 0 0-1.614-.913L.296 19.275a2.182 2.182 0 0 0 .812 2.999 2.24 2.24 0 0 0 1.086.288h6.983a9.322 9.322 0 0 0-3.845-8.318l1.11-1.922a11.47 11.47 0 0 1 4.95 10.24h5.915a17.242 17.242 0 0 0-7.885-15.28l2.244-3.845a.37.37 0 0 1 .504-.13c.255.14 9.75 16.708 9.928 16.9a.365.365 0 0 1-.327.543h-2.287c.029.612.029 1.223 0 1.831h2.297a2.206 2.206 0 0 0 1.922-3.31z"/></svg>

package/assets/brand-icons/slack.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Slack</title><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>

package/assets/fonts/Inter-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/components/agent/agent-icon.css

@@ -0,0 +1,14 @@
+/* The Agent color tints the tile and inks the glyph, legible in both themes. */
+.agent-icon {
+  --agent-icon-radius: calc(var(--agent-icon-size) * 0.27);
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: var(--agent-icon-size);
+  height: var(--agent-icon-size);
+  border-radius: var(--agent-icon-radius);
+  background: color-mix(in oklab, var(--agent-ink) 14%, var(--surface));
+  color: color-mix(in oklab, var(--agent-ink) 85%, var(--foreground));
+}
+
+.agent-color-swatch { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; color: #fff; }

package/components/agent/agent-icon.tsx

@@ -0,0 +1,14 @@
+import type { CSSProperties } from "react";
+import { Bot } from "lucide-react";
+import { agentColors, agentGlyphs, agentIconOf, type AgentIconValue } from "../../lib/agent-icon";
+import "./agent-icon.css";
+
+// Decorative: the surrounding control or text names the Agent.
+export function AgentIcon({ icon, size = 24, className }: { icon: Partial<AgentIconValue> | undefined; size?: number; className?: string }) {
+  const { glyph, color } = agentIconOf(icon);
+  const Glyph = agentGlyphs.find(item => item.id === glyph)?.Icon ?? Bot;
+  const style = { "--agent-ink": agentColors[color], "--agent-icon-size": `${size}px` } as CSSProperties;
+  return <span aria-hidden="true" className={className ? `agent-icon ${className}` : "agent-icon"} data-glyph={glyph} data-color={color} style={style}>
+    <Glyph size={Math.round(size * 0.6)} />
+  </span>;
+}

package/components/analytics/chart-geometry.ts

@@ -0,0 +1,95 @@
+export type TrendSeries<TPoint> = { key: keyof TPoint; label: string; color: string; defaultHidden?: boolean };
+
+export function trendPath<TPoint extends { label: string }>(points: TPoint[], key: keyof TPoint, maxValue: number) {
+  if (points.length === 1) {
+    const y = pointY(numericValue(points[0], key), maxValue).toFixed(2);
+    return `M 0.00 ${y} L 100.00 ${y}`;
+  }
+  return points
+    .map((point) => {
+      const coords = pointCoords(points, point, key, maxValue);
+      return `${points.indexOf(point) === 0 ? "M" : "L"} ${coords.x.toFixed(2)} ${coords.y.toFixed(2)}`;
+    })
+    .join(" ");
+}
+
+export function pointCoords<TPoint extends { label: string }>(points: TPoint[], point: TPoint, key: keyof TPoint, maxValue: number) {
+  const index = points.indexOf(point);
+  const x = pointX(points.length, index);
+  const y = pointY(numericValue(point, key), maxValue);
+  return { x, y };
+}
+
+export function numericValue<TPoint>(point: TPoint, key: keyof TPoint): number {
+  const value = point[key];
+  return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+
+export function pointX(pointCount: number, index: number) {
+  return pointCount <= 1 ? 50 : (index / (pointCount - 1)) * 100;
+}
+
+export function pointY(value: number, maxValue: number) {
+  return 88 - (value / maxValue) * 72;
+}
+
+export function niceAxisMax(value: number) {
+  const safeValue = Number.isFinite(value) && value > 0 ? value : 1;
+  const step = niceTickStep(safeValue / 4);
+  return Math.max(step, Math.ceil(safeValue / step) * step);
+}
+
+export function yTickValues(maxValue: number) {
+  const step = niceTickStep(maxValue / 4);
+  const ticks: number[] = [];
+  for (let value = maxValue; value >= 0; value -= step) {
+    ticks.push(Number(value.toFixed(6)));
+  }
+  if (ticks[ticks.length - 1] !== 0) ticks.push(0);
+  return ticks;
+}
+
+function niceTickStep(rawStep: number) {
+  const safeStep = Number.isFinite(rawStep) && rawStep > 0 ? rawStep : 1;
+  const magnitude = 10 ** Math.floor(Math.log10(safeStep));
+  const normalized = safeStep / magnitude;
+  const niceNormalized = normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10;
+  return Math.max(1, niceNormalized * magnitude);
+}
+
+export function stackedAreaPath<TPoint extends { label: string }>(
+  points: TPoint[],
+  series: readonly TrendSeries<TPoint>[],
+  seriesIndex: number,
+  maxValue: number,
+) {
+  if (points.length === 1) {
+    const point = points[0];
+    const top = pointY(cumulativeValue(point, series, seriesIndex), maxValue).toFixed(2);
+    const bottom = pointY(cumulativeValue(point, series, seriesIndex - 1), maxValue).toFixed(2);
+    return `M 0.00 ${top} L 100.00 ${top} L 100.00 ${bottom} L 0.00 ${bottom} Z`;
+  }
+  const top = points.map((point, pointIndex) => {
+    const value = cumulativeValue(point, series, seriesIndex);
+    return `${pointIndex === 0 ? "M" : "L"} ${pointX(points.length, pointIndex).toFixed(2)} ${pointY(value, maxValue).toFixed(2)}`;
+  });
+  const bottom = [...points].reverse().map((point, reverseIndex) => {
+    const originalIndex = points.length - 1 - reverseIndex;
+    const value = cumulativeValue(point, series, seriesIndex - 1);
+    return `L ${pointX(points.length, originalIndex).toFixed(2)} ${pointY(value, maxValue).toFixed(2)}`;
+  });
+  return [...top, ...bottom, "Z"].join(" ");
+}
+
+export function cumulativeValue<TPoint>(point: TPoint, series: readonly TrendSeries<TPoint>[], throughIndex: number) {
+  if (throughIndex < 0) return 0;
+  return series.slice(0, throughIndex + 1).reduce((sum, item) => sum + numericValue(point, item.key), 0);
+}
+
+// Labelled buckets for the time axis: at most `max`, a whole number of buckets
+// apart, so the labels are evenly spaced (the last may fall short of the end).
+export function xTickIndices(pointCount: number, max = 5) {
+  if (pointCount <= 0) return [];
+  const step = Math.max(1, Math.ceil((pointCount - 1) / (max - 1)));
+  return Array.from({ length: Math.floor((pointCount - 1) / step) + 1 }, (_, index) => index * step);
+}

package/components/analytics/dashboard-charts.tsx

@@ -0,0 +1,136 @@
+// HeroUI owns card/control appearance. SVG marks reuse the existing chart geometry.
+import { useState, type ReactNode } from "react";
+import { typographyVariants, Avatar, Button, Card, Chip, Disclosure, Table, Tooltip, Typography } from "@heroui/react";
+import { niceAxisMax, numericValue, pointY, stackedAreaPath, trendPath, xTickIndices, yTickValues } from "./chart-geometry";
+import type { TrendSeries } from "./chart-geometry";
+import { compareMetric, previousReportPeriod, type DashboardReportPeriod } from "../../lib/dashboard-report";
+import { Activity, Archive, ArrowDownToLine, ArrowUpFromLine, Database, DatabaseZap, FilePlus2, MessageCircleQuestion, Sigma, ArrowDownRight, ArrowUpRight, Minus, type LucideIcon } from "lucide-react";
+import { formatDashboardNumber } from "../../lib/dashboard";
+
+export function MetricTrend({current, previous, period, snapshot = false, bounds}: {current: number | null; previous: number | null; period: string; snapshot?: boolean; bounds?: DashboardReportPeriod}) {
+  const {direction, percent} = compareMetric(current, previous);
+  const Icon = direction === "up" || direction === "new" ? ArrowUpRight : direction === "down" ? ArrowDownRight : Minus;
+  const text = direction === "unknown" ? "—" : direction === "new" ? "New" : `${percent && Math.abs(percent) < .1 ? "<0.1" : Math.abs(percent ?? 0).toFixed(1)}%`;
+  const description = direction === "unknown" ? "Comparison unavailable" : direction === "new" ? "Previous value was zero; percentage change is undefined" : `${direction === "up" ? "Up" : direction === "down" ? "Down" : "Unchanged"} ${text}`;
+  const color = direction === "up" || direction === "new" ? "success" : direction === "down" ? "danger" : "default";
+  const interval = (range: DashboardReportPeriod) => `${range.start.toISOString().slice(0, 16).replace("T", " ")} – ${range.end.toISOString().slice(0, 16).replace("T", " ")} UTC`;
+  return <Tooltip><Tooltip.Trigger className="p-metric-trend" aria-label={`${description} versus previous ${period}`}><Chip size="sm" variant="soft" color={color}><Icon size={13} /><Chip.Label>{text}</Chip.Label></Chip></Tooltip.Trigger><Tooltip.Content><Typography type="body-sm">{description} · vs previous {period}</Typography><Typography type="body-xs">{current === null ? "—" : current.toLocaleString()} vs {previous === null ? "—" : previous.toLocaleString()}{snapshot ? " · period-end snapshots" : " · equal-length windows"}</Typography>{bounds && <><Typography type="body-xs">Current: {interval(bounds)}</Typography><Typography type="body-xs">Previous: {interval(previousReportPeriod(bounds))}</Typography></>}</Tooltip.Content></Tooltip>;
+}
+
+export function MetricCard({ label, value, hint, icon, comparison }: {label: string; value: string; hint?: string; icon: ReactNode; comparison: Parameters<typeof MetricTrend>[0]}) {
+  const icons: Partial<Record<string, LucideIcon>> = { Created: FilePlus2, Active: Activity, Waiting: MessageCircleQuestion, Closed: Archive, Total: Sigma, Input: ArrowDownToLine, "Cache read": Database, "Cache write": DatabaseZap, Output: ArrowUpFromLine };
+  const Icon = icons[label];
+  return <Card role="group" aria-label={`${label} metric`}><Card.Content><div className="flex items-start gap-3">
+    {(Icon || icon) && <Avatar size="sm" variant="soft" color="warning" aria-hidden="true"><Avatar.Fallback>{Icon ? <Icon size={18} strokeWidth={1.75} /> : icon}</Avatar.Fallback></Avatar>}
+    <div className="min-w-0 flex-1"><Card.Title role="heading" aria-level={2}>{hint ? <Tooltip><Tooltip.Trigger aria-label={`${label} definition`}>{label}</Tooltip.Trigger><Tooltip.Content>{hint}</Tooltip.Content></Tooltip> : label}</Card.Title>
+      <div className="p-metric-value mt-1"><p className={typographyVariants({ type: "h2" }).base()}>{value}</p><MetricTrend {...comparison} /></div>
+    </div>
+  </div></Card.Content></Card>;
+}
+
+// "1 call", not "1 calls": a plural unit reads singular for exactly one.
+const unitOf = (unit: string, value: number) => value === 1 && unit.endsWith("s") ? unit.slice(0, -1) : unit;
+
+export function TimeChart<PlotPoint extends {label: string; interval: string}>({ title, points, series, kind = "line", unit, hint, summary, missingValueLabel, formatValue, hover, onHover }: {title: string; points: PlotPoint[]; series: TrendSeries<PlotPoint>[]; kind?: "line" | "area" | "bar"; unit: string; hint?: string; summary?: string; missingValueLabel?: string; /** The hover card's value, in place of the full number and unit. */ formatValue?: (value: number) => string; hover: {index: number; chart: string} | null; onHover: (value: {index: number; chart: string} | null) => void}) {
+  const [plotWidth, setPlotWidth] = useState(0);
+  const [hidden, setHidden] = useState<string[]>([]);
+  const active = series.filter(s => !hidden.includes(String(s.key)));
+  const value = (p: PlotPoint, key: keyof PlotPoint) => Number(p[key]) || 0;
+  const known = (p: PlotPoint, key: keyof PlotPoint) => typeof p[key] === "number" && Number.isFinite(p[key]);
+  const display = (p: PlotPoint, key: keyof PlotPoint) => known(p, key) ? value(p, key).toLocaleString() : (missingValueLabel ?? "—");
+  const incomplete = points.some(p => series.some(s => !known(p, s.key)));
+  const maximum = niceAxisMax(Math.max(1, ...points.map(p => kind === "area" ? active.reduce((sum, s) => sum + value(p, s.key), 0) : Math.max(...series.map(s => value(p, s.key))))));
+  const ticks = yTickValues(maximum);
+  const x = (index: number) => (index + .5) * 100 / points.length;
+  const total = points.reduce((sum, p) => sum + series.reduce((n, s) => n + value(p, s.key), 0), 0);
+  const point = hover ? points[hover.index] : undefined;
+  const isSource = hover?.chart === title;
+  const selectBucket = (index: number, element: HTMLElement) => {
+    setPlotWidth(element.getBoundingClientRect().width);
+    if (hover?.index !== index || !isSource) onHover({index, chart: title});
+  };
+  const selectAt = (event: {clientX: number; currentTarget: HTMLElement}) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    const fraction = Math.max(0, Math.min(1, (event.clientX - box.left) / box.width));
+    selectBucket(Math.min(points.length - 1, Math.floor(fraction * points.length)), event.currentTarget);
+  };
+  const bandStart = hover ? hover.index * 100 / points.length : 0;
+  const bandEnd = hover ? (hover.index + 1) * 100 / points.length : 0;
+  return <Card role="group" className="p-plot-card" aria-label={title}>
+    <Card.Header><div className="p-section-title"><Card.Title role="heading" aria-level={2}>{hint ? <Tooltip><Tooltip.Trigger aria-label={`${title} definition`}>{title}</Tooltip.Trigger><Tooltip.Content>{hint}</Tooltip.Content></Tooltip> : title}</Card.Title>{summary !== "" && <Chip size="sm">{summary ?? (incomplete ? "Incomplete data" : `${formatDashboardNumber(total)} ${unitOf(unit, total)}`)}</Chip>}</div></Card.Header>
+    <Card.Content>
+      {incomplete && !missingValueLabel && <Typography type="body-sm" color="muted">Some values are unavailable. Missing values appear as — in the data table.</Typography>}
+      {series.length > 1 && <div className="p-chart-legend" role="group" aria-label={`${title} series`}>{series.map(s => {
+        const selected = !hidden.includes(String(s.key));
+        const lastVisible = active.length === 1 && active[0].key === s.key;
+        return <Chip<"button"> key={String(s.key)} size="sm" variant={selected ? "secondary" : "tertiary"} className="p-series-chip" render={props => <button {...props} type="button" />}
+          aria-pressed={selected} aria-disabled={lastVisible || undefined} onClick={() => {if (!lastVisible) setHidden(keys => selected ? [...keys, String(s.key)] : keys.filter(k => k !== s.key));}}>
+          <span className="p-series-label"><span className="p-series-dot"><svg width="8" height="8" aria-hidden="true"><circle cx="4" cy="4" r="3" fill={selected ? s.color : "none"} stroke={s.color} /></svg></span><span className={typographyVariants({ type: "body-xs", color: selected ? "default" : "muted" }).base()}  >{s.label}</span></span>
+        </Chip>;
+      })}</div>}
+
+      {points.length ? <Tooltip delay={0} closeDelay={100} isOpen={!!point && isSource} onOpenChange={open => {if (!open && isSource) onHover(null);}}><Tooltip.Trigger className="p-time-plot" role="slider" aria-valuemin={1} aria-valuemax={points.length} aria-valuenow={(hover?.index ?? 0) + 1} aria-valuetext={`${(point ?? points[0]).interval}. ${active.map(s => `${s.label}: ${display(point ?? points[0], s.key)} ${unitOf(unit, numericValue(point ?? points[0], s.key))}`).join(". ")}`} aria-label={`Explore ${title} timeline. Use arrow keys to select a time interval.`}
+        onPointerMove={selectAt} onPointerDown={selectAt}
+        onFocus={event => selectBucket(hover?.index ?? 0, event.currentTarget)}
+        onKeyDown={event => {
+          if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
+            event.preventDefault();
+            const index = event.key === "Home" ? 0 : event.key === "End" ? points.length - 1 : Math.max(0, Math.min(points.length - 1, (hover?.index ?? 0) + (event.key === "ArrowRight" ? 1 : -1)));
+            selectBucket(index, event.currentTarget);
+          }
+          if (event.key === "Escape") onHover(null);
+        }}><div className="p-y-axis">{ticks.map(t => <span className={typographyVariants({ type: "body-xs" }).base()}  key={t} style={{top: `${pointY(t, maximum)}%`}}>{formatDashboardNumber(t)}</span>)}</div><svg viewBox="0 0 100 100" preserveAspectRatio="none" role="img" aria-label={`${title}: ${points.length} time buckets. Exact values in View data.`}>
+        {point && hover && <rect className="p-chart-time-band" data-interval={point.interval} x={bandStart} y="0" width={bandEnd - bandStart} height="88" fill="var(--accent)" fillOpacity="0.07" />}
+        {ticks.map(t => <path key={t} d={`M 0 ${pointY(t, maximum)} H 100`} stroke="var(--separator)" strokeWidth="1" strokeDasharray="3 4" vectorEffect="non-scaling-stroke" />)}
+        {kind === "bar" ? points.flatMap((p, i) => active.map((s, j) => {if (!known(p, s.key)) return null; const width = 65 / points.length / active.length; return <rect className="p-bar-mark" data-series={String(s.key)} key={`${i}-${String(s.key)}`} x={(i + .175) * 100 / points.length + j * width} y={pointY(value(p, s.key), maximum)} width={width * .8} height={88 - pointY(value(p, s.key), maximum)} fill={s.color} />;})) : !incomplete && active.map((s, i) => <g key={String(s.key)} transform={points.length > 1 ? `translate(${50 / points.length} 0) scale(${(points.length - 1) / points.length} 1)` : undefined}>{kind === "area" ? <path d={stackedAreaPath(points, active, i, maximum)} fill={s.color} fillOpacity="0.7" /> : <><path d={`${trendPath(points, s.key, maximum)} L 100 88 L 0 88 Z`} fill={s.color} fillOpacity="0.08" /><path d={trendPath(points, s.key, maximum)} stroke={s.color} strokeWidth="2.5" fill="none" strokeLinejoin="round" vectorEffect="non-scaling-stroke" /></>}</g>)}
+        {point && hover && <path className="p-chart-time-cursor" d={`M ${x(hover.index)} 0 V 88`} stroke="var(--muted)" strokeWidth="1" strokeDasharray="3 3" vectorEffect="non-scaling-stroke" />}
+      </svg></Tooltip.Trigger><Tooltip.Content className="p-chart-hover-tip" placement="top" crossOffset={hover ? (x(hover.index) / 100 - .5) * plotWidth : 0}>
+        {point && <><Typography type="body-xs" color="muted" className="p-chart-hover-interval">{point.interval}</Typography><dl className="p-chart-hover-values">{active.map(s => <div key={String(s.key)}><dt className="p-series-label"><span className="p-series-dot"><svg width="8" height="8" aria-hidden="true"><circle cx="4" cy="4" r="3" fill={s.color} /></svg></span>{s.label}</dt><dd>{formatValue && known(point, s.key) ? formatValue(value(point, s.key)) : `${display(point, s.key)} ${unitOf(unit, numericValue(point, s.key))}`}</dd></div>)}</dl></>}
+      </Tooltip.Content></Tooltip> : <Typography type="body-sm" className="p-chart-empty">No observations in this window.</Typography>}
+
+      <div className="p-x-axis">{xTickIndices(points.length).map(i => <Typography type="body-xs" key={i} style={{left: `${x(i)}%`}}>{points[i].label.split(" · ").map(part => <span key={part}>{part}</span>)}</Typography>)}</div>
+      <Disclosure><Disclosure.Heading><Button slot="trigger" variant="ghost" size="sm" aria-label={`View ${title} data`}><span className={typographyVariants({ type: "body-xs", color: "muted" }).base()}  >View data</span><Disclosure.Indicator /></Button></Disclosure.Heading><Disclosure.Content><Table><Table.ScrollContainer><Table.Content aria-label={`${title} data`}><Table.Header><Table.Column isRowHeader>Time</Table.Column>{series.map(s => <Table.Column key={String(s.key)}>{s.label}</Table.Column>)}</Table.Header><Table.Body>{points.map(p => <Table.Row key={p.label}><Table.Cell>{p.interval}</Table.Cell>{series.map(s => <Table.Cell key={String(s.key)}>{display(p, s.key)}</Table.Cell>)}</Table.Row>)}</Table.Body></Table.Content></Table.ScrollContainer></Table></Disclosure.Content></Disclosure>
+    </Card.Content>
+  </Card>;
+}
+
+export function DistributionChart({ title, data, unit }: {title: string; data: {key?: string; label: string; value: number; color: string}[]; unit: string}) {
+  const total = data.reduce((n, d) => n + d.value, 0);
+  const [active, setActive] = useState<number | null>(null);
+  const [open, setOpen] = useState(false);
+  const selected = active === null ? null : data[active];
+  const percentage = (value: number) => total ? `${(value / total * 100).toFixed(1)}%` : "0.0%";
+  const select = (index: number) => { setActive(index); setOpen(true); };
+  return <Card role="group" aria-label={`${title} distribution`}>
+    <Card.Header><Card.Title role="heading" aria-level={2}>{title}</Card.Title></Card.Header>
+    <Card.Content><div className="p-distribution">
+      <Tooltip delay={0} closeDelay={0} isOpen={open} onOpenChange={value => {setOpen(value); if (!value) setActive(null);}}>
+        <Tooltip.Trigger className="p-donut" role="slider" aria-valuemin={1} aria-valuemax={Math.max(1, data.length)} aria-valuenow={(active ?? 0) + 1} aria-valuetext={selected ? `${selected.label}: ${selected.value} ${unit}, ${percentage(selected.value)}` : total ? `${total} ${unit}` : "No observations"} aria-label={`${title}: ${data.map(d => `${d.label} ${d.value} (${percentage(d.value)})`).join(", ")}. Use arrow keys to explore.`}
+          onFocus={() => {if (data.length) select(0);}}
+          onBlur={() => {setOpen(false); setActive(null);}}
+          onKeyDown={event => {
+            if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key) && data.length) {
+              event.preventDefault();
+              select(((active ?? 0) + (event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1) + data.length) % data.length);
+            }
+            if (event.key === "Home" && data.length) {event.preventDefault(); select(0);}
+            if (event.key === "End" && data.length) {event.preventDefault(); select(data.length - 1);}
+            if (event.key === "Escape") {setOpen(false); setActive(null);}
+          }}>
+          <svg viewBox="0 0 120 120" aria-hidden="true">
+            <circle cx="60" cy="60" r="42" stroke="var(--default)" strokeWidth="24" fill="none" />
+            {total > 0 && data.map((d, i) => <circle key={d.key ?? d.label} className="p-donut-slice" data-label={d.label} cx="60" cy="60" r="42" pathLength="100" stroke={d.color}
+              strokeWidth={active === i ? 28 : 24} opacity={active === null || active === i ? 1 : .45}
+              strokeDasharray={`${Math.max(0, d.value / total * 100 - .8)} 100`}
+              strokeDashoffset={-data.slice(0, i).reduce((n, row) => n + row.value / total * 100, 0)} transform="rotate(-90 60 60)" fill="none"
+              onPointerEnter={() => select(i)} onClick={() => select(i)} />)}
+          </svg>
+          <div className="p-donut-total" aria-hidden="true">
+            <Typography type="body" weight="semibold">{formatDashboardNumber(selected?.value ?? total)}</Typography>
+          </div>
+        </Tooltip.Trigger>
+        <Tooltip.Content placement="top"><Typography type="body-sm">{selected?.label ?? title}</Typography><Typography type="body-xs">{(selected?.value ?? total).toLocaleString()} {unit} · {percentage(selected?.value ?? total)}</Typography></Tooltip.Content>
+      </Tooltip>
+    </div><div className="p-donut-legend">{data.map(d => <span className="p-series-label" key={d.key ?? d.label}><span className="p-series-dot"><svg width="8" height="8" aria-hidden="true"><circle cx="4" cy="4" r="3" fill={d.color} /></svg></span><span className={typographyVariants({ type: "body-xs", color: "muted" }).base()}  >{d.label}</span></span>)}</div></Card.Content>
+  </Card>;
+}

package/components/analytics/model-usage-chart.tsx

@@ -0,0 +1,84 @@
+// Grouped bars: one per model in each window, height its Total Tokens. Hover,
+// focus or tap a bar for that model's four categories and Cache hit rate.
+import { useState } from "react";
+import { typographyVariants, Button, Card, Chip, Disclosure, Table, Tooltip, Typography } from "@heroui/react";
+import { niceAxisMax, pointY, xTickIndices, yTickValues } from "./chart-geometry";
+import { formatDashboardNumber } from "../../lib/dashboard";
+import { tokenTotal, type TokenUsage } from "../../lib/token-usage";
+import { formatCompactTokenCount } from "../../lib/trace-view-model";
+import { TokenBreakdown } from "./token-breakdown";
+
+export type ModelUsagePoint = { label: string; interval: string; usage: Record<string, TokenUsage> };
+
+export function ModelUsageChart({ points, models, colors }: { points: ModelUsagePoint[]; models: string[]; colors: Record<string, string> }) {
+  const [selected, setSelected] = useState<{ bucket: number; model: number } | null>(null);
+  const [plotWidth, setPlotWidth] = useState(0);
+  const total = (bucket: number, model: number) => { const usage = points[bucket]?.usage[models[model]]; return usage ? tokenTotal(usage) : 0; };
+  // Keyboard moves through the bars that exist, in reading order.
+  const bars = points.flatMap((_, bucket) => models.flatMap((__, model) => total(bucket, model) > 0 ? [{ bucket, model }] : []));
+  const maximum = niceAxisMax(Math.max(1, ...bars.map(bar => total(bar.bucket, bar.model))));
+  const ticks = yTickValues(maximum);
+  const groupWidth = 100 / Math.max(points.length, 1);
+  const barWidth = groupWidth * .8 / Math.max(models.length, 1);
+  const barX = (bucket: number, model: number) => bucket * groupWidth + groupWidth * .1 + model * barWidth;
+  const grandTotal = bars.reduce((sum, bar) => sum + total(bar.bucket, bar.model), 0);
+  const usage = selected ? points[selected.bucket].usage[models[selected.model]] : undefined;
+  const select = (bar: { bucket: number; model: number } | undefined, element: Element) => {
+    if (!bar) return;
+    setPlotWidth(element.getBoundingClientRect().width);
+    setSelected(bar);
+  };
+  const step = (offset: number, element: Element) => {
+    const index = selected ? bars.findIndex(bar => bar.bucket === selected.bucket && bar.model === selected.model) : -1;
+    select(bars[Math.max(0, Math.min(bars.length - 1, index + offset))], element);
+  };
+  const describe = (bar: { bucket: number; model: number }) => `${points[bar.bucket].interval}, ${models[bar.model]}: ${total(bar.bucket, bar.model).toLocaleString()} tokens`;
+
+  return <Card role="group" className="p-plot-card" aria-label="Model usage">
+    <Card.Header><div className="p-section-title"><Card.Title role="heading" aria-level={2}>Model usage</Card.Title><Chip size="sm">{formatDashboardNumber(grandTotal)} tokens</Chip></div></Card.Header>
+    <Card.Content>
+      {models.length > 0 && <div className="p-chart-legend" role="list" aria-label="Models">{models.map(model => <span role="listitem" className="p-series-label" key={model}><span className="p-series-dot"><svg width="8" height="8" aria-hidden="true"><circle cx="4" cy="4" r="3" fill={colors[model]} /></svg></span><span className={typographyVariants({ type: "body-xs" }).base()}>{model}</span></span>)}</div>}
+      {bars.length ? <Tooltip delay={0} closeDelay={100} isOpen={Boolean(usage)} onOpenChange={open => { if (!open) setSelected(null); }}>
+        <Tooltip.Trigger className="p-time-plot" role="slider" aria-label="Explore Model usage. Use arrow keys to move between bars."
+          aria-valuemin={1} aria-valuemax={bars.length} aria-valuenow={selected ? bars.findIndex(bar => bar.bucket === selected.bucket && bar.model === selected.model) + 1 : 1}
+          aria-valuetext={describe(selected ?? bars[0])}
+          onFocus={event => { if (!selected) select(bars[0], event.currentTarget); }}
+          onKeyDown={event => {
+            if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
+              event.preventDefault();
+              if (event.key === "Home") select(bars[0], event.currentTarget);
+              else if (event.key === "End") select(bars.at(-1), event.currentTarget);
+              else step(event.key === "ArrowRight" ? 1 : -1, event.currentTarget);
+            }
+            if (event.key === "Escape") setSelected(null);
+          }}>
+          <div className="p-y-axis">{ticks.map(tick => <span className={typographyVariants({ type: "body-xs" }).base()} key={tick} style={{ top: `${pointY(tick, maximum)}%` }}>{formatDashboardNumber(tick)}</span>)}</div>
+          <svg viewBox="0 0 100 100" preserveAspectRatio="none" role="img" aria-label={`Model usage: ${points.length} time buckets. Exact values in View data.`}>
+            {ticks.map(tick => <path key={tick} d={`M 0 ${pointY(tick, maximum)} H 100`} stroke="var(--separator)" strokeWidth="1" strokeDasharray="3 4" vectorEffect="non-scaling-stroke" />)}
+            {bars.map(bar => {
+              const value = total(bar.bucket, bar.model);
+              const active = selected?.bucket === bar.bucket && selected.model === bar.model;
+              return <rect key={`${bar.bucket}-${bar.model}`} className="p-bar-mark" data-model={models[bar.model]} x={barX(bar.bucket, bar.model)} y={pointY(value, maximum)} width={barWidth * .85} height={88 - pointY(value, maximum)}
+                fill={colors[models[bar.model]]} opacity={!selected || active ? 1 : .45}
+                onPointerEnter={event => select(bar, event.currentTarget.closest(".p-time-plot") ?? event.currentTarget)}
+                onPointerDown={event => select(bar, event.currentTarget.closest(".p-time-plot") ?? event.currentTarget)} />;
+            })}
+          </svg>
+        </Tooltip.Trigger>
+        <Tooltip.Content className="p-chart-hover-tip" placement="top" crossOffset={selected ? ((barX(selected.bucket, selected.model) + barWidth / 2) / 100 - .5) * plotWidth : 0}>
+          {selected && usage && <>
+            <Typography type="body-xs" color="muted" className="p-chart-hover-interval">{points[selected.bucket].interval}</Typography>
+            <p className="p-chart-hover-head"><span className="p-series-label"><span className="p-series-dot"><svg width="8" height="8" aria-hidden="true"><circle cx="4" cy="4" r="3" fill={colors[models[selected.model]]} /></svg></span>{models[selected.model]}</span><strong>{formatCompactTokenCount(tokenTotal(usage))}</strong></p>
+            <TokenBreakdown usage={usage} />
+          </>}
+        </Tooltip.Content>
+      </Tooltip> : <Typography type="body-sm" className="p-chart-empty">No observations in this window.</Typography>}
+      <div className="p-x-axis">{xTickIndices(points.length).map(index => <Typography type="body-xs" key={index} style={{ left: `${(index + .5) * groupWidth}%` }}>{points[index].label.split(" · ").map(part => <span key={part}>{part}</span>)}</Typography>)}</div>
+      <Disclosure><Disclosure.Heading><Button slot="trigger" variant="ghost" size="sm" aria-label="View Model usage data"><span className={typographyVariants({ type: "body-xs", color: "muted" }).base()}>View data</span><Disclosure.Indicator /></Button></Disclosure.Heading><Disclosure.Content>
+        <Table><Table.ScrollContainer><Table.Content aria-label="Model usage data"><Table.Header><Table.Column isRowHeader>Time</Table.Column>{models.map(model => <Table.Column key={model}>{model}</Table.Column>)}</Table.Header>
+          <Table.Body>{points.map((point, bucket) => <Table.Row key={point.label}><Table.Cell>{point.interval}</Table.Cell>{models.map((model, index) => <Table.Cell key={model}>{total(bucket, index).toLocaleString()}</Table.Cell>)}</Table.Row>)}</Table.Body>
+        </Table.Content></Table.ScrollContainer></Table>
+      </Disclosure.Content></Disclosure>
+    </Card.Content>
+  </Card>;
+}

package/components/analytics/token-breakdown.css

@@ -0,0 +1,13 @@
+.token-breakdown { display: grid; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
+.token-breakdown>div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.token-breakdown dt { display: flex; align-items: center; gap: 7px; color: var(--muted); }
+.token-breakdown i { display: block; width: 6px; height: 6px; border-radius: 2px; }
+/* The hit-rate ring sits in the swatch column; 8px so its fill stays legible. */
+.token-hit-mark { flex-shrink: 0; margin-inline: -1px; fill: none; stroke-width: 2; stroke: var(--default); }
+.token-hit-mark [data-filled] { stroke: var(--foreground); }
+.token-breakdown dd { font-weight: 500; }
+/* Category tones, shared with any bar of the same categories. */
+[data-token-tone="input"] { background: var(--foreground); }
+[data-token-tone="cacheRead"] { background: color-mix(in oklch,var(--foreground) 52%,var(--surface)); }
+[data-token-tone="cacheWrite"] { background: color-mix(in oklch,var(--foreground) 32%,var(--surface)); }
+[data-token-tone="output"] { background: color-mix(in oklch,var(--foreground) 17%,var(--surface)); }

package/components/analytics/token-breakdown.tsx

@@ -0,0 +1,23 @@
+import { formatCompactTokenCount } from "../../lib/trace-view-model";
+import { cacheHitRate, formatHitRate, tokenCategories, type TokenUsage } from "../../lib/token-usage";
+import "./token-breakdown.css";
+
+/** One usage's Cache hit rate and its four categories, as one list. Shared by
+ * the Work context card and the usage charts' hover cards. */
+export function TokenBreakdown({ usage, className }: { usage: TokenUsage; className?: string }) {
+  const rate = cacheHitRate(usage);
+  return <dl className={["token-breakdown", className].filter(Boolean).join(" ")}>
+    {rate !== null && <div><dt><HitRateMark rate={rate} />Cache hit rate</dt><dd>{formatHitRate(rate)}</dd></div>}
+    {tokenCategories.map(({ key, label }) => <div key={key}><dt><i data-token-tone={key} />{label}</dt><dd>{formatCompactTokenCount(usage[key])}</dd></div>)}
+  </dl>;
+}
+
+/** Cache hit rate's legend mark: a small ring filled to the rate. It leads the
+ * list in the darkest tone, above the categories' lightening swatches. */
+function HitRateMark({ rate }: { rate: number }) {
+  const circumference = 2 * Math.PI * 3;
+  return <svg className="token-hit-mark" width="8" height="8" viewBox="0 0 8 8" aria-hidden="true">
+    <circle cx="4" cy="4" r="3" />
+    <circle cx="4" cy="4" r="3" data-filled="" strokeDasharray={`${circumference * Math.min(Math.max(rate, 0), 1)} ${circumference}`} transform="rotate(-90 4 4)" />
+  </svg>;
+}