In the most used models we have to show top 10 but only if those top 10 contain the 10% of…

const r = await tools.exec_command({cmd:"sed -n '1,240p' ~/.codex/skills/surgical-patch/SKILL.md && rg -n \"Agentprint|most used models|Most used models|metric\" ~/.codex/memories/MEMORY.md | head -40","workdir":"<project>","yield_time_ms":10000,"max_output_tokens":20000}); text(r.output);

[{"type":"input_text","text":"Script completed\nWall time 0.1 seconds\nOutput:\n"},{"type":"input_text","text":"sed: ~/.codex/skills/surgical-patch/SKILL.md: No such file or directory\n"}]

const r = await tools.exec_command({cmd:"sed -n '1,260p' ~/.agents/skills/surgical-patch/SKILL.md\nrg -n \"Agentprint|most used models|Most used models|metric\" ~/.codex/memories/MEMORY.md | head -40","workdir":"<project>","yield_time_ms":10000,"max_output_tokens":30000}); text(r.output);

[{"type":"input_text","text":"Script completed\nWall time 0.2 seconds\nOutput:\n"},{"type":"input_text","text":"---\nname: surgical-patch\ndescription: Fix bugs and small behavior changes at the narrowest responsible layer. Use when regression proof, preserved surrounding behavior, and task-relevant tests matter.\n---\n\n# Surgical patch\n\nReproduce failure first when economical; otherwise capture strongest available evidence.\n\n- Trace symptom to responsible mechanism.\n- Change narrowest layer that owns incorrect behavior.\n- Preserve unrelated behavior and user changes.\n- Avoid cleanup, renaming, and abstraction outside fix.\n- Add only regression proof relevant to task.\n\nRun focused proof plus nearest affected gate. Stop when failure is fixed and regression proof passes.\n114:# Task Group: Agentprint metric artwork, landing performance, and scoped publishing\n116:scope: Agentprint profile-card visuals and landing-animation performance changes while preserving unrelated local CSS work.\n119:## Task 1: Add semantic metric art, reduce landing jank, and push approved scope, success\n123:- rollout_summaries/2026-08-19T09-03-10-IFPz-agentprint_metric_art_and_landing_performance_push.md (cwd=<project>, rollout_path=~/.codex/sessions/2026/08/19/rollout-2026-08-19T14-33-10-01a01942-99eb-7473-a0f9-e8e4e1390eb1.jsonl, updated_at=2026-08-19T09:39:09+00:00, thread_id=01a01942-99eb-7473-a0f9-e8e4e1390eb1, branch pushed with matching remote SHA)\n127:- Agentprint, profile-view.tsx, metrics/generated, lifetime-tokens.png, landing-preview.tsx, share-globe.tsx, prefers-reduced-motion, gh auth status, 37a4ae07\n136:- Profile markup is `apps/web/components/profile-view.tsx`, metric styling `apps/web/app/globals.css`, and committed generated images belong in `apps/web/public/metrics/generated/`, not only `.codex/generated_images`. [Task 1]\n583:applies_to: cwd=~/Desktop/noscrubs; reuse_rule=metrics are historical; inspect current codecs, worker settings, and bounded production samples before changing the pipeline\n1496:- when narrowing scope, the user said \"one is content creator base, one will be b2b online/local and one b2c way\" -> preserve separate objectives, data, channels, and metrics for all three motions. [Task 1]\n1504:- The proposed AI-first vertical slice is a campaign compiler: classify motion/mode/objective, select capabilities, build a typed cost-aware approval-safe DAG, validate cycles/dependencies/success metrics, then use mocked capabilities and evidence-backed qualification before real providers. It is not implementation evidence. [Task 1]\n1836:scope: Diagnose failed fragmented-video generation and calculate bounded production compression metrics safely.\n1908:# Task Group: Agentprint CLI self-update, installed binary, and profile design-lab exploration\n1910:scope: Consent-based Agentprint updater/local CLI installation and isolated profile-page visual exploration.\n2496:# Task Group: Agentprint Codex collection, model attribution, and local usage audits\n2509:- Agentprint, Codex, CLI, `bufio.Scanner: token too long`, bufio.Reader, oversized JSONL, AGENTPRINT_HOME, invalid signing private key, GOCACHE, ccusage, MultiAgent V2\n2540:# Task Group: Agentprint production deployment, canonical OAuth, and GitHub presentation\n2542:scope: Publish the Agentprint monorepo to GitHub/Vercel, configure production OAuth correctly, and keep public README branding accurate across GitHub themes.\n2584:- Agentprint, Vercel, Neon, `apps/web`, agentprint.tech, www.agentprint.tech, Namify, Orderbox, authoritative DNS, `redirect_uri_mismatch`, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, sin1, ap-southeast-1, `gh auth status`\n2725:# Task Group: Agentprint branding, provider-only OAuth, and onboarding UI\n2727:scope: Agentprint/Promptmaxxing Bun + Next.js work: local setup, visible-product rebrand, provider-only authentication, onboarding identity, and restrained visual cleanup.\n2730:## Task 1: Start locally, rebrand visible product to Agentprint, and refine heatmap/landing UI, partial\n2738:- Agentprint, Promptmaxxing, bun run dev, docker-compose, PostgreSQL 54329, landing-preview.tsx, contribution-field.tsx, globals.css, `--signal`, heatmap, stale browser tab\n2836:- Initial adapters are Codex, Claude Code, and OpenCode. Tokens are the headline public metric; estimated spend is secondary and provenance-labeled. The privacy boundary excludes prompts, responses, source code, repo names/paths, shell history, API keys, and credentials. [Task 1]\n3429:- when the user agreed `yeah let's do that` for a separate ticket -> preserve distinct task semantics and metrics for unsupported requests versus supported-but-unselected products [Task 1]\n6182:# Task Group: Agentprint CLI self-update and privacy-safe social discovery\n6195:- Agentprint, agentprint update, `update --check`, `update --yes`, 0.2.0, manifest.json, SHA-256, apps/web/public/releases/latest, command -v agentprint, build-local-releases.sh\n6220:- when the user asks for “adding friends and then comparing the stats b/w friends” end to end -> use mutual consent, privacy-controlled shared metrics, and neutral comparisons rather than followers, public leaderboards, or winner badges. [Task 2]\n6221:- for Agentprint social/product UI, preserve the restrained developer-tool design and enforce private data at the query boundary, not merely by hiding browser fields. [Task 2][Task 3]\n6227:- Friend requests support accept/decline/block/unblock/removal and exact-handle lookup. Comparisons are mutual and opt-in, return only metrics both users share, and support 7/30/90-day paired traces. [Task 2]\n"}]

const r = await tools.exec_command({cmd:"git status --short\nrg -n -i \"most used models|used models|top models|model usage\" . --glob '!node_modules' --glob '!dist' --glob '!build'\nrg -n \"slice\\(0, ?10\\)|tokens.*model|model.*tokens\" apps packages --glob '*.{ts,tsx,js,jsx}'","workdir":"<project>","yield_time_ms":10000,"max_output_tokens":30000}); text(r.output);

[{"type":"input_text","text":"Script completed\nWall time 0.2 seconds\nOutput:\n"},{"type":"input_text","text":"?? docs/\n./apps/web/components/profile-view.tsx:222:                <div><h2 id=\"models-title\" className={sectionHeading.title}>Most used models</h2></div>\n./apps/web/components/profile-view.tsx:225:                <p className={BREAKDOWN_EMPTY}>Model usage will appear after the first sync.</p>\npackages/database/src/index.ts:375:          harness_id, harness_version, provider_id, model_id, input_tokens,\npackages/database/src/index.ts:385:          record.model_id ?? null, record.input_tokens, record.output_tokens,\npackages/database/src/index.ts:439:                user_id, local_date, harness_id, model_id, input_tokens, output_tokens,\npackages/database/src/index.ts:461:          user_id, local_date, harness_id, model_id, input_tokens, output_tokens,\npackages/database/src/index.ts:472:          record.model_id ?? \"unknown\", record.input_tokens, record.output_tokens,\npackages/database/src/index.ts:853:    `SELECT user_id, local_date::text, harness_id, model_id, total_tokens:[redacted:assignment]    return date.toISOString().slice(0, 10);\npackages/database/src/index.ts:906:  rows: { local_date: string; harness_id: string; model_id: string; total_tokens: string }[],\npackages/database/src/index.ts:908:  visibility: { tokens: [redacted:assignment] harnesses: boolean; models: boolean; streaks: boolean }\npackages/database/src/index.ts:917:    models[row.model_id] = (models[row.model_id] ?? 0) + tokens;\npackages/database/src/index.ts:996:    models[row.model_id] = (models[row.model_id] ?? 0) + tokens;\npackages/database/src/index.ts:1126:            harness_version, provider_id, model_id, input_tokens::text,\npackages/database/src/seed.ts:70:    const occurredAt = new Date(`${date.toISOString().slice(0, 10)}T18:30:00.000Z`);\npackages/database/src/seed.ts:71:    const stable = `${date.toISOString().slice(0, 10)}:${harness}`;\npackages/database/src/seed.ts:76:      local_date: date.toISOString().slice(0, 10),\npackages/database/src/index.test.ts:95:        user_id, local_date, harness_id, model_id, total_tokens, event_count\npackages/database/src/index.test.ts:110:\t\texpect(comparison.visibility).toEqual({ tokens: true, harnesses: true, models: true, streaks: true });\npackages/database/src/index.test.ts:301:      `SELECT model_id, total_tokens::int AS total, event_count\napps/web/components/contribution-field.tsx:45:  return date.toISOString().slice(0, 10);\napps/web/components/settings-controls.tsx:41:type FieldKey = \"show_tokens\" | \"show_cost\" | \"show_harnesses\" | \"show_models\" | \"show_streaks\";\napps/web/components/settings-controls.tsx:292:              aria-label={`Token volume by model: ${models.map((model) => `${model.id} ${compactTokens(model.tokens)}`).join(\", \")}`}\napps/web/components/settings-controls.tsx:298:                    <span className={modelChart.value}>{compactTokens(model.tokens)}</span>\napps/web/components/settings-controls.tsx:303:                          height: `${Math.max((model.tokens / models[0].tokens) * 100, 2)}%`,\napps/web/components/profile-view.tsx:191:                {Object.entries(harnesses).sort((a, b) => b[1] - a[1]).slice(0, 10).map(([name, tokens], index) => {\napps/web/components/profile-view.tsx:228:                  const ranked = Object.entries(models).sort((a, b) => b[1] - a[1]).slice(0, 10);\napps/web/components/profile-view.tsx:233:                      aria-label={`Token volume by model: ${ranked.map(([name, tokens]) => `${name} ${compactTokens(tokens)}, ${Math.round((tokens / modelTotal) * 100)} percent`).join(\"; \")}`}\napps/web/components/profile-view.tsx:239:                            <span className={modelChart.value}>{compactTokens(tokens)}</span>\napps/web/app/settings/page.tsx:57:    .slice(0, 10);\napps/web/app/settings/page.tsx:62:    .slice(0, 10);\n"}]

const r = await tools.exec_command({cmd:"sed -n '160,265p' apps/web/components/profile-view.tsx\nsed -n '1,100p' apps/web/app/settings/page.tsx\nsed -n '260,325p' apps/web/components/settings-controls.tsx\nrg --files apps/web | rg '(test|spec)\\.(ts|tsx)$|package.json$'\ncat apps/web/package.json\ncat package.json","workdir":"<project>","yield_time_ms":10000,"max_output_tokens":30000}); text(r.output);

[{"type":"input_text","text":"Script completed\nWall time 0.2 seconds\nOutput:\n"},{"type":"input_text","text":"                note=\"local calendar\"\n                art=\"/metrics/generated/current-streak.png\"\n                cardClass=\"col-span-3 min-h-[216px]\"\n                artClass=\"right-[1px] -bottom-[54px] w-[44%] max-tablet:right-0 max-tablet:-bottom-[42px] max-tablet:w-[42%]\"\n              />\n              <MetricCard\n                label=\"Longest streak\"\n                value={<>{summary.longestStreak}<i className=\"text-sm not-italic text-muted\"> days</i></>}\n                note=\"all time\"\n                art=\"/metrics/generated/longest-streak.png\"\n                cardClass=\"col-span-3 min-h-[216px] max-desktop:col-span-full max-tablet:col-auto\"\n                artClass=\"-right-[3px] -bottom-[38px] w-[42%] max-tablet:right-0 max-tablet:-bottom-[42px] max-tablet:w-[42%]\"\n              />\n            </>\n          )}\n        </section>\n\n        <div className=\"grid grid-cols-[1fr] gap-0 pb-7 pt-9\">\n          {profile.show_harnesses && (\n            <section\n              className=\"min-w-0 not-first:mt-8 not-first:border-t not-first:border-line not-first:pt-8\"\n              aria-labelledby=\"harness-title\"\n            >\n              <div className={sectionHeading.root}>\n                <div><h2 id=\"harness-title\" className={sectionHeading.title}>Connected harnesses</h2></div>\n                <span className={sectionHeading.meta}>{Object.keys(harnesses).length} detected</span>\n              </div>\n              <div className=\"rounded-sm border border-line bg-panel px-[18px] py-1.5\">\n                {Object.entries(harnesses).length === 0 && (\n                  <p className={BREAKDOWN_EMPTY}>Harness activity will appear after the first sync.</p>\n                )}\n                {Object.entries(harnesses).sort((a, b) => b[1] - a[1]).slice(0, 10).map(([name, tokens], index) => {\n                  const percent = Math.round((tokens / harnessTotal) * 100);\n                  const brand = harnessBrand(name);\n                  return (\n                    <div className={MIX_ROW} key={name}>\n                      <span className=\"text-xs text-faint\">{String(index + 1).padStart(2, \"0\")}</span>\n                      <span className=\"grid size-[30px] place-items-center rounded-xs border border-line bg-canvas\">\n                        {brand.logo\n                          ? <Image src={brand.logo} alt=\"\" width={17} height={17} className=\"size-[17px] object-contain\" />\n                          : <em className=\"size-[9px] rounded-full\" style={{ background: brand.color }} />}\n                      </span>\n                      <div className=\"min-w-0\">\n                        <b className=\"block truncate text-xs font-[weight:520]\">{harnessLabels[name] ?? name}</b>\n                        <span className=\"block truncate text-xs text-faint\">{formatTokens(tokens)} tokens</span>\n                      </div>\n                      <div className=\"h-2 overflow-hidden rounded-full bg-canvas-deep max-tablet:hidden\">\n                        <i className=\"block h-full rounded-full bg-blue\" style={{ width: `${percent}%`, background: brand.color }} />\n                      </div>\n                      <strong className=\"text-right text-xs font-medium\">{percent}%</strong>\n                    </div>\n                  );\n                })}\n              </div>\n            </section>\n          )}\n          {profile.show_models && (\n            <section\n              className=\"min-w-0 not-first:mt-8 not-first:border-t not-first:border-line not-first:pt-8\"\n              aria-labelledby=\"models-title\"\n            >\n              <div className={sectionHeading.root}>\n                <div><h2 id=\"models-title\" className={sectionHeading.title}>Most used models</h2></div>\n              </div>\n              {Object.entries(models).length === 0 ? (\n                <p className={BREAKDOWN_EMPTY}>Model usage will appear after the first sync.</p>\n              ) : (\n                (() => {\n                  const ranked = Object.entries(models).sort((a, b) => b[1] - a[1]).slice(0, 10);\n                  return (\n                    <div\n                      className={modelChart.root}\n                      role=\"img\"\n                      aria-label={`Token volume by model: ${ranked.map(([name, tokens]) => `${name} ${compactTokens(tokens)}, ${Math.round((tokens / modelTotal) * 100)} percent`).join(\"; \")}`}\n                    >\n                      {ranked.map(([name, tokens]) => {\n                        const brand = modelBrand(name);\n                        return (\n                          <div className={modelChart.column} key={name}>\n                            <span className={modelChart.value}>{compactTokens(tokens)}</span>\n                            <span className={modelChart.barWrap}>\n                              <i\n                                className={modelChart.bar}\n                                style={{ height: `${Math.max((tokens / ranked[0][1]) * 100, 2)}%`, background: brand.color }}\n                              />\n                            </span>\n                            <span className={modelChart.mark}>\n                              {brand.logo\n                                ? <Image src={brand.logo} alt=\"\" width={15} height={15} className={modelChart.markImage} />\n                                : <em className={modelChart.markDot} style={{ background: brand.color }} />}\n                            </span>\n                            <span className={modelChart.name}>{name}</span>\n                          </div>\n                        );\n                      })}\n                    </div>\n                  );\n                })()\n              )}\n            </section>\n          )}\n        </div>\n\n        {data.sharedSessions.length > 0 && (\n          <section\n            className=\"my-9 min-w-0 rounded-md border border-line bg-panel p-7 max-tablet:p-[22px]\"\nimport type { Metadata } from \"next\";\nimport { getProfile, listDevices } from \"@agentprint/database\";\nimport { formatTokens } from \"@agentprint/analytics\";\nimport { requireViewer } from \"@/lib/auth\";\nimport { SiteHeader } from \"@/components/site-header\";\nimport { SettingsControls } from \"@/components/settings-controls\";\nimport { appMainClass } from \"@/lib/ui\";\n\nexport const metadata: Metadata = { title: \"Settings\" };\n\nfunction syncStamp(value: string) {\n  return new Date(value).toLocaleString(undefined, {\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"2-digit\"\n  });\n}\n\nexport default async function SettingsPage() {\n  const current = await requireViewer();\n  const [data, devices] = await Promise.all([\n    getProfile(current.handle, current.id),\n    listDevices(current.id)\n  ]);\n  if (!data) return null;\n  const active = devices.filter((device) => !device.revoked_at);\n  const lastSync = active.map((device) => device.last_sync_at).filter(Boolean).sort().at(-1);\n  const baseUrl = process.env.NEXT_PUBLIC_APP_URL ?? \"https://agentprint.tech\";\n\n  // Volume comes from daily_usage (user-level); detection, version and last-collected\n  // come from device_sources (per device). Neither alone answers \"is this still\n  // reporting?\", so the harness table joins them.\n  const detected = new Map<string, { version: string | null; lastCollected: string | null; live: boolean }>();\n  for (const device of devices) {\n    for (const source of device.sources) {\n      const seen = detected.get(source.harness_id);\n      detected.set(source.harness_id, {\n        version: source.version ?? seen?.version ?? null,\n        lastCollected: [seen?.lastCollected, source.last_collected_at]\n          .filter(Boolean).sort().at(-1) ?? null,\n        
… 1 more lines hidden

const r = await tools.exec_command({cmd:"sed -n '1,165p' apps/web/components/profile-view.tsx\nfind apps/web -maxdepth 3 -type f \\( -name '*.test.ts' -o -name '*.test.tsx' -o -name '*.spec.ts' -o -name '*.spec.tsx' \\) -print\nrg -n \"export function|function .*rank|slice\\(0, 10\\)\" apps/web/lib apps/web/components --glob '*.{ts,tsx}' | head -80","workdir":"<project>","yield_time_ms":10000,"max_output_tokens":20000}); text(r.output);

[{"type":"input_text","text":"Script completed\nWall time 0.2 seconds\nOutput:\n"},{"type":"input_text","text":"import Link from \"next/link\";\nimport Image from \"next/image\";\nimport type { ReactNode } from \"react\";\nimport { Calendar, CheckCircle2, Clock3, ExternalLink, MapPin } from \"lucide-react\";\nimport { formatTokens } from \"@agentprint/analytics\";\nimport type { getProfile } from \"@agentprint/database\";\nimport { compactTokens, harnessBrand, harnessLabels, modelBrand } from \"@/lib/brands\";\nimport { cx, handleClass, modelChart, profileAvatarClass, sectionHeading } from \"@/lib/ui\";\nimport { ContributionField } from \"./contribution-field\";\nimport { ShareButton } from \"./share-button\";\n\ntype ProfileData = NonNullable<Awaited<ReturnType<typeof getProfile>>>;\n\nconst METRIC_CARD =\n  \"group relative col-span-2 min-h-[226px] overflow-hidden rounded-md border border-line bg-panel px-[25px] py-[27px] isolate after:absolute after:-right-8 after:-bottom-[54px] after:-z-[1] after:aspect-square after:w-[210px] after:rounded-full after:bg-[color-mix(in_srgb,var(--color-panel-raised)_56%,transparent)] after:content-[''] max-desktop:col-auto max-desktop:min-h-[210px] max-tablet:min-h-[174px] max-tablet:px-5 max-tablet:py-[22px]\";\nconst METRIC_LABEL = \"block text-sm font-medium text-faint\";\nconst METRIC_VALUE =\n  \"mb-2 mt-[18px] block text-[46px] font-[weight:540] leading-none text-ink-strong [font-variant-numeric:tabular-nums] max-desktop:text-[40px] max-tablet:mb-1.5 max-tablet:mt-3.5 max-tablet:text-[36px]\";\nconst METRIC_ART =\n  \"pointer-events-none absolute h-auto select-none object-contain opacity-[.48] transition-opacity duration-[140ms] group-hover:opacity-100\";\nconst MIX_ROW =\n  \"grid min-h-[63px] grid-cols-[30px_30px_minmax(0,190px)_minmax(0,1fr)_52px] items-center gap-[13px] border-b border-line last:border-b-0 max-tablet:grid-cols-[24px_30px_minmax(0,1fr)_46px] max-tablet:gap-2.5\";\nconst BREAKDOWN_EMPTY = \"m-0 py-[18px] text-sm text-faint\";\n\nfunction initials(name: string) {\n  return name.split(/\\s+/).map((part) => part[0]).join(\"\").slice(0, 2).toUpperCase();\n}\n\nfunction MetricCard({\n  label,\n  value,\n  note,\n  noteTone,\n  art,\n  artClass,\n  cardClass\n}: {\n  label: string;\n  value: ReactNode;\n  note: string;\n  noteTone?: string;\n  art: string;\n  artClass: string;\n  cardClass?: string;\n}) {\n  return (\n    <div className={cx(METRIC_CARD, cardClass)}>\n      <div className=\"relative z-[1] w-[58%] max-tablet:w-[60%]\">\n        <span className={METRIC_LABEL}>{label}</span>\n        <strong className={METRIC_VALUE}>{value}</strong>\n        <small className={cx(METRIC_LABEL, noteTone)}>{note}</small>\n      </div>\n      <Image className={cx(METRIC_ART, artClass)} src={art} alt=\"\" width={512} height={512} aria-hidden=\"true\" />\n    </div>\n  );\n}\n\nexport function ProfileView({\n  data,\n  preview = false,\n  friendAction\n}: {\n  data: ProfileData;\n  preview?: boolean;\n  friendAction?: ReactNode;\n}) {\n  const { profile, activity, thresholds, summary, harnesses, models } = data;\n  const harnessTotal = Object.values(harnesses).reduce((sum, value) => sum + value, 0);\n  const modelTotal = Object.values(models).reduce((sum, value) => sum + value, 0);\n  const topMetricCount = Number(profile.show_tokens) + Number(profile.show_cost) + 1;\n  const topMetricCardClass = topMetricCount === 1\n    ? \"col-span-full\"\n    : topMetricCount === 2\n      ? \"col-span-3\"\n      : undefined;\n  return (\n    <main id=\"main\" data-profile-main className=\"overflow-x-clip pb-[var(--page-bottom)]\">\n      <div className=\"shell pt-[var(--page-top)]\">\n        <section className=\"mb-9 grid grid-cols-[auto_1fr_auto] items-center gap-6 rounded-md border border-line bg-panel p-7 max-tablet:grid-cols-[auto_1fr] max-tablet:p-[22px]\">\n          <div className={profileAvatarClass} aria-hidden=\"true\">{initials(profile.display_name)}</div>\n          <div>\n            <div className=\"flex items-center gap-3 max-tablet:flex-col max-tablet:items-start max-tablet:gap-[5px]\">\n              <h1 className=\"m-0 text-[36px] font-[weight:540] leading-none tracking-[-.04em] text-ink-strong\">\n                {profile.display_name}\n              </h1>\n              <span className=\"inline-flex items-center gap-[5px] text-xs font-[weight:560] text-blue\">\n                <CheckCircle2 size={13} /> Synced profile\n              </span>\n            </div>\n            <p className={handleClass}>@{profile.handle}</p>\n            <p className=\"m-0 text-sm text-muted\">{profile.bio || \"Building with agents, one trace at a time.\"}</p>\n            <div className=\"mt-[11px] flex gap-[18px] text-xs text-faint max-tablet:flex-col max-tablet:gap-1\">\n              <span className=\"flex items-center gap-[5px]\"><MapPin size={13} /> {profile.timezone.replaceAll(\"_\", \" \")}</span>\n              <span className=\"flex items-center gap-[5px]\">\n                <Calendar size={13} /> Joined {new Date(profile.created_at).toLocaleDateString(\"en\", { month: \"long\", year: \"numeric\" })}\n              </span>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2 max-tablet:col-span-full max-tablet:w-full [&>*]:max-tablet:flex-1\">\n            {preview && (\n              <Link\n                className=\"inline-flex min-h-[39px] items-center justify-center gap-[7px] whitespace-nowrap rounded-full border border-[color-mix(in_srgb,var(--color-amber)_28%,var(--color-line))] bg-[color-mix(in_srgb,var(--color-amber)_7%,transparent)] px-[13px] text-xs font-semibold text-amber hover:border-[color-mix(in_srgb,var(--color-amber)_44%,var(--color-line))] hover:bg-[color-mix(in_srgb,var(--color-amber)_11%,transparent)]\"\n                href=\"/settings#visibility\"\n                aria-label=\"Private preview. Manage profile visibility.\"\n              >\n                <Clock3 size={14} /> Private preview\n              </Link>\n            )}\n            {friendAction}\n            <ShareButton title={`${profile.display_name} on Agentprint`} />\n          </div>\n        </section>\n\n        <ContributionField\n          activity={activity}\n          thresholds={thresholds}\n          showTokens=[redacted:assignment]}\n          showCost={profile.show_cost}\n          showHarnesses={profile.show_harnesses}\n        />\n\n        <section\n          className=\"grid grid-flow-row-dense grid-cols-[repeat(6,minmax(0,1fr))] gap-3.5 pt-9 max-desktop:grid-cols-[repeat(2,minmax(0,1fr))] max-tablet:grid-cols-[1fr] max-tablet:py-0\"\n          aria-label=\"Profile summary\"\n        >\n          {profile.show_tokens && (\n            <MetricCard\n              label=\"Lifetime tokens\"\n              value={formatTokens(summary.totalTokens)}\n              note=\"input + output\"\n              art=\"/metrics/generated/lifetime-tokens.png\"\n              cardClass={topMetricCardClass}\n              artClass=\"-right-[21px] -bottom-[30px] w-[56%] max-w-[250px] max-tablet:-right-[9px] max-tablet:-bottom-[35px] max-tablet:w-[47%]\"\n            />\n          )}\n          {profile.show_cost && (\n            <MetricCard\n              label=\"Estimated spend\"\n              value={`$${(summary.estimatedCostMicros / 1_000_000).toLocaleString(\"en\", { maximumFractionDigits: 0 })}`}\n              note=\"price-table estimate\"\n              noteTone=\"text-amber\"\n              art=\"/metrics/generated/estimated-spend.png\"\n              cardClass={topMetricCardClass}\n              artClass=\"-right-[21px] -bottom-[30px] w-[56%] max-w-[250px] max-tablet:-right-[9px] max-tablet:-bottom-[35px] max-tablet:w-[47%]\"\n            />\n          )}\n          <MetricCard\n            label=\"Active days\"\n            value={summary.activeDays}\n            note=\"trailing 12 months\"\n            art=\"/metrics/generated/active-days.png\"\n            cardClass={topMetr
… 1 more lines hidden

const r = await tools.exec_command({cmd:"rg --files . --glob '!node_modules' | rg '\\.(test|spec)\\.(ts|tsx)$' | head -80\nsed -n '1,100p' packages/analytics/src/index.test.ts 2>/dev/null || true\nsed -n '100,145p' ~/.codex/memories/MEMORY.md","workdir":"<project>","yield_time_ms":10000,"max_output_tokens":16000}); text(r.output);

[{"type":"input_text","text":"Script completed\nWall time 0.1 seconds\nOutput:\n"},{"type":"input_text","text":"./packages/analytics/src/index.test.ts\n./packages/contracts/src/index.test.ts\n./packages/database/src/index.test.ts\n./tests/e2e/product.spec.ts\nimport { describe, expect, test } from \"bun:test\";\nimport { calculateStreaks, intensityFor, intensityThresholds } from \"./index\";\n\ndescribe(\"calculateStreaks\", () => {\n  test(\"deduplicates dates and calculates current and longest runs\", () => {\n    const days = [\n      { localDate: \"2026-01-01\", totalTokens: 10 },\n      { localDate: \"2026-01-02\", totalTokens: 20 },\n      { localDate: \"2026-01-04\", totalTokens: 30 },\n      { localDate: \"2026-01-05\", totalTokens: 40 },\n      { localDate: \"2026-01-06\", totalTokens: 50 }\n    ];\n    expect(calculateStreaks(days, \"2026-01-06\")).toEqual({ current: 3, longest: 3 });\n  });\n\n  test(\"allows a streak to continue from yesterday\", () => {\n    expect(calculateStreaks(\n      [{ localDate: \"2026-01-05\", totalTokens: 1 }],\n      \"2026-01-06\"\n    ).current).toBe(1);\n  });\n});\n\ntest(\"personal intensity distribution stays bounded\", () => {\n  const thresholds = intensityThresholds([0, 10, 20, 30, 100]);\n  expect(intensityFor(0, thresholds)).toBe(0);\n  expect(intensityFor(1000, thresholds)).toBe(4);\n});\n- when the user says \"focus towards the backend\" and \"don't update app_config.ts\" -> keep rollout ownership in Rails SDUI, add only generic runtime support, preserve config, and prove old/new contracts. [Task 2]\n\n## Reusable knowledge\n\n- High-frequency inputs must not use whole-state `useSduiState()` unless they render from all state. Use store-only/key selectors; action-only `$.state.*` is resolved at action execution and must not create live renderer subscriptions. [Task 1]\n- `getReactiveStateKeys` must include state in live `sdui:*` props but exclude action-array references. This stopped keyboard digits from re-rendering unrelated timers, dialogs, uploads, camera, and footer. [Task 1]\n- `VersionChecker.satisfied?(nil, \"3.5.13\")` reads `X-App-Version`, not `app.config.ts`: 3.5.12 retains legacy payload/hidden fields, 3.5.13+ receives backend SDUI cards. Keep legacy until new client release. [Task 2]\n- Missing worktree/stash does not prove implementation loss: inspect `refs/heads/codex/*`, archived sessions, and Codex snapshot refs before rebuilding. [Task 2]\n\n## Failures and how to do differently\n\n- symptom: a performance patch is declared device-verified -> cause: missing Orca/Appium and RN-web import failure -> fix: state build/shared checks only; retain device-smoke limitation. [Task 1]\n- symptom: Figma implementation appears lost -> cause: only ordinary worktrees/branches/stashes were checked -> fix: inspect Codex archive/snapshot refs; recovered `codex/check-figma-mcp-or-cli` must be rebased before PR. [Task 2]\n\n# Task Group: Agentprint metric artwork, landing performance, and scoped publishing\n\nscope: Agentprint profile-card visuals and landing-animation performance changes while preserving unrelated local CSS work.\napplies_to: cwd=<project>; reuse_rule=re-check visual direction and dirty worktree ownership before editing/publishing\n\n## Task 1: Add semantic metric art, reduce landing jank, and push approved scope, success\n\n### rollout_summary_files\n\n- rollout_summaries/2026-08-19T09-03-10-IFPz-agentprint_metric_art_and_landing_performance_push.md (cwd=<project>, rollout_path=~/.codex/sessions/2026/08/19/rollout-2026-08-19T14-33-10-01a01942-99eb-7473-a0f9-e8e4e1390eb1.jsonl, updated_at=2026-08-19T09:39:09+00:00, thread_id=01a01942-99eb-7473-a0f9-e8e4e1390eb1, branch pushed with matching remote SHA)\n\n### keywords\n\n- Agentprint, profile-view.tsx, metrics/generated, lifetime-tokens.png, landing-preview.tsx, share-globe.tsx, prefers-reduced-motion, gh auth status, 37a4ae07\n\n## User preferences\n\n- when the user asks for profile images and allows boxes to be rearranged -> use dedicated semantic imagery and adjust layout for fit while preserving restrained blue/yellow developer-tool styling. [Task 1]\n- when the user says \"gh cli use karo brother?\" and asks only commit/push -> verify `gh` auth/repo identity, push the requested scope, and do not open a PR. [Task 1]\n\n## Reusable knowledge\n\n- Profile markup is `apps/web/components/profile-view.tsx`, metric styling `apps/web/app/globals.css`, and committed generated images belong in `apps/web/public/metrics/generated/`, not only `.codex/generated_images`. [Task 1]\n- Landing heatmap/globe updates should pause when off-screen or page-hidden and honor reduced motion; radial gradients avoid expensive decorative blur. [Task 1]\n\n## Failures and how to do differently\n\n- symptom: desired files are committed with unrelated CSS -> fix: preserve pre-existing `globals.css` edits unstaged, stage explicit approved paths, and verify remote/local SHA. [Task 1]\n\n# Task Group: macOS Kivi accessibility-source and network-egress audit\n\nscope: Read-only causal privacy/network audit of Kivi macOS behavior, with redacted artifacts and explicit evidence limits.\n"}]

const r = await tools.exec_command({cmd:"sed -n '1,220p' packages/analytics/src/index.ts\ncat packages/analytics/package.json\ncat tsconfig.json\ncat apps/web/tsconfig.json","workdir":"<project>","yield_time_ms":10000,"max_output_tokens":24000}); text(r.output);

[{"type":"input_text","text":"Script completed\nWall time 0.2 seconds\nOutput:\n"},{"type":"input_text","text":"export type DailyTotal = {\n  localDate: string;\n  totalTokens: [redacted:assignment]};\n\nexport function calculateStreaks(days: DailyTotal[], today: string) {\n  const activeDates = [...new Set(\n    days.filter((day) => day.totalTokens > 0).map((day) => day.localDate)\n  )].sort();\n\n  let longest = 0;\n  let run = 0;\n  let previous: Date | undefined;\n\n  for (const value of activeDates) {\n    const current = new Date(`${value}T00:00:00Z`);\n    const delta = previous ? (current.getTime() - previous.getTime()) / 86_400_000 : 1;\n    run = delta === 1 ? run + 1 : 1;\n    longest = Math.max(longest, run);\n    previous = current;\n  }\n\n  let current = 0;\n  if (activeDates.length) {\n    const last = activeDates.at(-1)!;\n    const todayDate = new Date(`${today}T00:00:00Z`);\n    const lastDate = new Date(`${last}T00:00:00Z`);\n    const age = (todayDate.getTime() - lastDate.getTime()) / 86_400_000;\n    if (age <= 1 && age >= 0) {\n      current = 1;\n      for (let index = activeDates.length - 1; index > 0; index -= 1) {\n        const later = new Date(`${activeDates[index]}T00:00:00Z`);\n        const earlier = new Date(`${activeDates[index - 1]}T00:00:00Z`);\n        if ((later.getTime() - earlier.getTime()) / 86_400_000 !== 1) break;\n        current += 1;\n      }\n    }\n  }\n\n  return { current, longest };\n}\n\nexport function intensityThresholds(values: number[]) {\n  const positive = values.filter((value) => value > 0).sort((a, b) => a - b);\n  if (!positive.length) return [0, 0, 0, 0] as const;\n  const quantile = (percent: number) =>\n    positive[Math.min(positive.length - 1, Math.floor((positive.length - 1) * percent))];\n  return [quantile(0.2), quantile(0.45), quantile(0.7), quantile(0.9)] as const;\n}\n\nexport function intensityFor(value: number, thresholds: readonly number[]) {\n  if (value <= 0) return 0;\n  for (let index = 0; index < thresholds.length; index += 1) {\n    if (value <= thresholds[index]) return index + 1;\n  }\n  return thresholds.length;\n}\n\nexport function formatTokens(value: number) {\n  if (value >= 1_000_000_000) return `${(value / 1_000_000_000).toFixed(1)}B`;\n  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;\n  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;\n  return String(value);\n}\n{\n  \"name\": \"@agentprint/analytics\",\n  \"version\": \"0.0.1\",\n  \"type\": \"module\",\n  \"exports\": {\n    \".\": \"./src/index.ts\"\n  }\n}\n{\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Bundler\",\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"resolveJsonModule\": true,\n    \"esModuleInterop\": true,\n    \"noEmit\": true\n  }\n}\n{\n  \"extends\": \"../../tsconfig.json\",\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"plugins\": [{ \"name\": \"next\" }],\n    \"paths\": {\n      \"@/*\": [\"./*\"]\n    },\n    \"incremental\": true\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \".next/types/**/*.ts\"\n  ],\n  \"exclude\": [\"node_modules\"]\n}\n"}]

const patch = "*** Begin Patch\n*** Update File: <project>/packages/analytics/src/index.ts\n@@\n export function formatTokens(value: number) {\n   if (value >= 1_000_000_000) return `${(value / 1_000_000_000).toFixed(1)}B`;\n   if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;\n   if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;\n   return String(value);\n }\n+\n+export function rankModelUsage(models: Record<string, number>) {\n+  const ranked = Object.entries(models).sort((left, right) => right[1] - left[1]).slice(0, 10);\n+  const highest = ranked[0]?.[1] ?? 0;\n+\n+  return ranked.filter(([, tokens], index) => index < 5 || tokens >= highest * 0.1);\n+}\n*** Update File: <project>/packages/analytics/src/index.test.ts\n@@\n-import { calculateStreaks, intensityFor, intensityThresholds } from \"./index\";\n+import { calculateStreaks, intensityFor, intensityThresholds, rankModelUsage } from \"./index\";\n@@\n test(\"personal intensity distribution stays bounded\", () => {\n   const thresholds = intensityThresholds([0, 10, 20, 30, 100]);\n   expect(intensityFor(0, thresholds)).toBe(0);\n   expect(intensityFor(1000, thresholds)).toBe(4);\n });\n+\n+describe(\"rankModelUsage\", () => {\n+  test(\"always keeps the first five models\", () => {\n+    const models = Object.fromEntries(\n+      [101, 80, 60, 40, 20, 10, 9].map((tokens, index) => [`model-${index + 1}`, tokens])\n+    );\n+\n+    expect(rankModelUsage(models).map(([name]) => name)).toEqual([\n+      \"model-1\",\n+      \"model-2\",\n+      \"model-3\",\n+      \"model-4\",\n+      \"model-5\"\n+    ]);\n+  });\n+\n+  test(\"includes up to ten models at or above ten percent of the highest\", () => {\n+    const models = Object.fromEntries(\n+      [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 10].map((tokens, index) => [`model-${index + 1}`, tokens])\n+    );\n+\n+    expect(rankModelUsage(models)).toHaveLength(10);\n+    expect(rankModelUsage(models).at(-1)).toEqual([\"model-10\", 10]);\n+  });\n+});\n*** Update File: <project>/apps/web/components/profile-view.tsx\n@@\n-import { formatTokens } from \"@agentprint/analytics\";\n+import { formatTokens, rankModelUsage } from \"@agentprint/analytics\";\n@@\n-                  const ranked = Object.entries(models).sort((a, b) => b[1] - a[1]).slice(0, 10);\n+                  const ranked = rankModelUsage(models);\n*** End Patch";
text(await tools.apply_patch(patch));

[{"type":"input_text","text":"Script completed\nWall time 0.1 seconds\nOutput:\n"},{"type":"input_text","text":"{}"}]

const r = await tools.exec_command({cmd:"git diff --check\ngit diff -- packages/analytics/src/index.ts packages/analytics/src/index.test.ts apps/web/components/profile-view.tsx\nbun test packages/analytics/src/index.test.ts\nbun run typecheck\nbun run lint","workdir":"<project>","yield_time_ms":30000,"max_output_tokens":30000}); text(r.output);

[{"type":"input_text","text":"Script completed\nWall time 3.8 seconds\nOutput:\n"},{"type":"input_text","text":"diff --git a/apps/web/components/profile-view.tsx b/apps/web/components/profile-view.tsx\nindex ac1474a..4adf440 100644\n--- a/apps/web/components/profile-view.tsx\n+++ b/apps/web/components/profile-view.tsx\n@@ -2,7 +2,7 @@ import Link from \"next/link\";\n import Image from \"next/image\";\n import type { ReactNode } from \"react\";\n import { Calendar, CheckCircle2, Clock3, ExternalLink, MapPin } from \"lucide-react\";\n-import { formatTokens } from \"@agentprint/analytics\";\n+import { formatTokens, rankModelUsage } from \"@agentprint/analytics\";\n import type { getProfile } from \"@agentprint/database\";\n import { compactTokens, harnessBrand, harnessLabels, modelBrand } from \"@/lib/brands\";\n import { cx, handleClass, modelChart, profileAvatarClass, sectionHeading } from \"@/lib/ui\";\n@@ -225,7 +225,7 @@ export function ProfileView({\n                 <p className={BREAKDOWN_EMPTY}>Model usage will appear after the first sync.</p>\n               ) : (\n                 (() => {\n-                  const ranked = Object.entries(models).sort((a, b) => b[1] - a[1]).slice(0, 10);\n+                  const ranked = rankModelUsage(models);\n                   return (\n                     <div\n                       className={modelChart.root}\ndiff --git a/packages/analytics/src/index.test.ts b/packages/analytics/src/index.test.ts\nindex 9f00ecd..006ff49 100644\n--- a/packages/analytics/src/index.test.ts\n+++ b/packages/analytics/src/index.test.ts\n@@ -1,5 +1,5 @@\n import { describe, expect, test } from \"bun:test\";\n-import { calculateStreaks, intensityFor, intensityThresholds } from \"./index\";\n+import { calculateStreaks, intensityFor, intensityThresholds, rankModelUsage } from \"./index\";\n \n describe(\"calculateStreaks\", () => {\n   test(\"deduplicates dates and calculates current and longest runs\", () => {\n@@ -26,3 +26,28 @@ test(\"personal intensity distribution stays bounded\", () => {\n   expect(intensityFor(0, thresholds)).toBe(0);\n   expect(intensityFor(1000, thresholds)).toBe(4);\n });\n+\n+describe(\"rankModelUsage\", () => {\n+  test(\"always keeps the first five models\", () => {\n+    const models = Object.fromEntries(\n+      [101, 80, 60, 40, 20, 10, 9].map((tokens, index) => [`model-${index + 1}`, tokens])\n+    );\n+\n+    expect(rankModelUsage(models).map(([name]) => name)).toEqual([\n+      \"model-1\",\n+      \"model-2\",\n+      \"model-3\",\n+      \"model-4\",\n+      \"model-5\"\n+    ]);\n+  });\n+\n+  test(\"includes up to ten models at or above ten percent of the highest\", () => {\n+    const models = Object.fromEntries(\n+      [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 10].map((tokens, index) => [`model-${index + 1}`, tokens])\n+    );\n+\n+    expect(rankModelUsage(models)).toHaveLength(10);\n+    expect(rankModelUsage(models).at(-1)).toEqual([\"model-10\", 10]);\n+  });\n+});\ndiff --git a/packages/analytics/src/index.ts b/packages/analytics/src/index.ts\nindex c3ec498..71e8ec7 100644\n--- a/packages/analytics/src/index.ts\n+++ b/packages/analytics/src/index.ts\n@@ -62,3 +62,10 @@ export function formatTokens(value: number) {\n   if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;\n   return String(value);\n }\n+\n+export function rankModelUsage(models: Record<string, number>) {\n+  const ranked = Object.entries(models).sort((left, right) => right[1] - left[1]).slice(0, 10);\n+  const highest = ranked[0]?.[1] ?? 0;\n+\n+  return ranked.filter(([, tokens], index) => index < 5 || tokens >= highest * 0.1);\n+}\nbun test v1.3.9 (cf6cdbbb)\n\npackages/analytics/src/index.test.ts:\n(pass) calculateStreaks > deduplicates dates and calculates current and longest runs [3.75ms]\n(pass) calculateStreaks > allows a streak to continue from yesterday [0.76ms]\n(pass) personal intensity distribution stays bounded [0.33ms]\n(pass) rankModelUsage > always keeps the first five models [0.38ms]\n(pass) rankModelUsage > includes up to ten models at or above ten percent of the highest [0.18ms]\n\n 5 pass\n 0 fail\n 7 expect() calls\nRan 5 tests across 1 file. [34.00ms]\n$ bun --cwd apps/web typecheck\n$ tsc --noEmit\n$ bun --cwd apps/web lint\n$ eslint .\n"}]

const r = await tools.exec_command({cmd:"git diff --check\ngit status --short\nnl -ba packages/analytics/src/index.ts | sed -n '58,82p'\nnl -ba packages/analytics/src/index.test.ts | sed -n '22,65p'\nnl -ba apps/web/components/profile-view.tsx | sed -n '220,238p'","workdir":"<project>","yield_time_ms":10000,"max_output_tokens":12000}); text(r.output);

[{"type":"input_text","text":"Script completed\nWall time 0.2 seconds\nOutput:\n"},{"type":"input_text","text":" M apps/web/components/profile-view.tsx\n M packages/analytics/src/index.test.ts\n M packages/analytics/src/index.ts\n?? docs/\n    58\t\n    59\texport function formatTokens(value: number) {\n    60\t  if (value >= 1_000_000_000) return `${(value / 1_000_000_000).toFixed(1)}B`;\n    61\t  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;\n    62\t  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;\n    63\t  return String(value);\n    64\t}\n    65\t\n    66\texport function rankModelUsage(models: Record<string, number>) {\n    67\t  const ranked = Object.entries(models).sort((left, right) => right[1] - left[1]).slice(0, 10);\n    68\t  const highest = ranked[0]?.[1] ?? 0;\n    69\t\n    70\t  return ranked.filter(([, tokens], index) => index < 5 || tokens >= highest * 0.1);\n    71\t}\n    22\t});\n    23\t\n    24\ttest(\"personal intensity distribution stays bounded\", () => {\n    25\t  const thresholds = intensityThresholds([0, 10, 20, 30, 100]);\n    26\t  expect(intensityFor(0, thresholds)).toBe(0);\n    27\t  expect(intensityFor(1000, thresholds)).toBe(4);\n    28\t});\n    29\t\n    30\tdescribe(\"rankModelUsage\", () => {\n    31\t  test(\"always keeps the first five models\", () => {\n    32\t    const models = Object.fromEntries(\n    33\t      [101, 80, 60, 40, 20, 10, 9].map((tokens, index) => [`model-${index + 1}`, tokens])\n    34\t    );\n    35\t\n    36\t    expect(rankModelUsage(models).map(([name]) => name)).toEqual([\n    37\t      \"model-1\",\n    38\t      \"model-2\",\n    39\t      \"model-3\",\n    40\t      \"model-4\",\n    41\t      \"model-5\"\n    42\t    ]);\n    43\t  });\n    44\t\n    45\t  test(\"includes up to ten models at or above ten percent of the highest\", () => {\n    46\t    const models = Object.fromEntries(\n    47\t      [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 10].map((tokens, index) => [`model-${index + 1}`, tokens])\n    48\t    );\n    49\t\n    50\t    expect(rankModelUsage(models)).toHaveLength(10);\n    51\t    expect(rankModelUsage(models).at(-1)).toEqual([\"model-10\", 10]);\n    52\t  });\n    53\t});\n   220\t            >\n   221\t              <div className={sectionHeading.root}>\n   222\t                <div><h2 id=\"models-title\" className={sectionHeading.title}>Most used models</h2></div>\n   223\t              </div>\n   224\t              {Object.entries(models).length === 0 ? (\n   225\t                <p className={BREAKDOWN_EMPTY}>Model usage will appear after the first sync.</p>\n   226\t              ) : (\n   227\t                (() => {\n   228\t                  const ranked = rankModelUsage(models);\n   229\t                  return (\n   230\t                    <div\n   231\t                      className={modelChart.root}\n   232\t                      role=\"img\"\n   233\t                      aria-label={`Token volume by model: ${ranked.map(([name, tokens]) => `${name} ${compactTokens(tokens)}, ${Math.round((tokens / modelTotal) * 100)} percent`).join(\"; \")}`}\n   234\t                    >\n   235\t                      {ranked.map(([name, tokens]) => {\n   236\t                        const brand = modelBrand(name);\n   237\t                        return (\n   238\t                          <div className={modelChart.column} key={name}>\n"}]