@@ -28,7 +29,10 @@ Installs the TraceSift command globally. Requires Node.js 22.19 or newer and npm
tracesift init
```
-Run this once to download and verify the prebuilt web app for your platform. After updating the CLI, run `tracesift init` again to install its matching app release.
+Run this once to download and verify the prebuilt web app for your platform.
+
+> [!IMPORTANT]
+> After updating the CLI, run `tracesift init` again to install its matching app release.
@@ -44,75 +48,121 @@ Starts TraceSift at `http://127.0.0.1:3000` and opens it in your browser. Press
See the [CLI documentation](packages/cli/CLI.md) for storage, troubleshooting, and release details.
-Contributors can run `npm run test:release:local` to verify the packaged download and startup flow against a loopback artifact server before any GitHub release. See [Contributing](CONTRIBUTING.md) for the manual browser checkpoint and Changesets release process.
+> [!TIP]
+> Contributors can run `npm run test:release:local` to verify the packaged download and startup flow against a loopback artifact server before any GitHub release. See [Contributing](CONTRIBUTING.md) for the manual browser checkpoint and Changesets release process.
## Using the web interface
### 1. Configure Analysis settings
-Open **Settings** before your first analysis. Choose a provider, authentication method, and model, then select **Save model settings**.
+Without a provider configured, TraceSift still reads a profile end to end and produces its cards. Configure one for the optional extras:
+
+- the per-card **Explain with AI** reading;
+- a sharper split of which frames are your code rather than the framework's or the engine's.
+
+Open **Settings**, choose a provider, authentication method, and model, then select **Save model settings**.
- OpenAI and Callstack use API keys;
- ChatGPT Codex uses Plus/Pro subscription sign-in;
-- Anthropic supports a Claude subscription or API key.
-- Browser sign-in is available.
-- Subscription sign-in uses PI OAuth experimentally.
-- Connecting an account does not select a model automatically.
-- Credentials stay in the local TraceSift home directory.
-- TraceSift never reads PI's own auth file.
+- Anthropic supports a Claude subscription or API key;
+- browser sign-in is available, and subscription sign-in uses PI OAuth experimentally;
+- connecting an account does not select a model automatically;
+- credentials stay in the local TraceSift home directory, and TraceSift never reads PI's own auth file.
Enable **Save analyses automatically** to keep completed reports in local history, or disable it and save individual reports from their results page.
-> Clicking on "Save model settings" is required.
-
-
+> [!IMPORTANT]
+> Nothing is applied until you select **Save model settings**.
### 2. Start a new analysis
-Select **Get Started**, then choose the profile type that matches the profiler you used, then click on "Analyze Profile".
+Select **Get Started**, choose the profile type that matches the profiler you used, then select **Analyze Profile**.
+> [!TIP]
+> No profile at hand? **Open a sample CPU analysis** or **Open a sample React analysis** on the same screen loads a bundled recording with its cards, charts, prompts, and drill-down already in place.
+
+> [!WARNING]
+> Uploads are capped at 512 MB, the largest profile Node can still parse in one piece.
+>
+> - Set `TRACE_SIFT_MAX_UPLOAD_MB` before starting TraceSift to lower the cap; values above the ceiling are clamped.
+> - TraceSift sizes its own heap for large profiles — up to 8 GB, and never more than half of physical memory. Setting `--max-old-space-size` through `NODE_OPTIONS` overrides that.
+
#### JavaScript CPU and Hermes profiles
-Visualize the results sorted by slowest. Each card provides a short summary of from where the issue originates and its impact on the recorded flow.
+One card per task, slowest first. A task is one block of main-thread work as recorded — Chrome's `RunTask`, or one top-level call in a Hermes duration trace — and tasks never overlap, so their shares add up. Each card carries:
+
+- a heading naming the task and the feature it ran in;
+- the **culprits**, ranked by the time they burned in their own body, each with the shape of how it burned it (`ran 125 times in this task · 140 ms total · longest single call 4 ms`) and the named callers that reached it;
+- a chart of how that time is distributed across the task;
+- a footnote describing the remainder, so a short list over a long task reads as cost spread thin rather than a short measurement.
-
+> [!NOTE]
+> Where a trace carries no task boundaries, TraceSift splits sample runs on idle gaps and says on the card that the boundaries were inferred.
#### React profiles
-Visualize the results sorted by longest to render. Each card provides a short summary of from where the issue originates and its impact on the recorded flow.
-
-
+One card per commit, longest to render first. Each card names what the commit rendered, charts the components that held its time, and lists them with their render counts.
+#### Ask for a reading on one card
+
+**Explain with AI** sends that one task or commit — its timeline and culprits, framework and engine frames collapsed away — to your configured model, which answers with a few short technical bullets on what the issue is and where it comes from.
+
+- The reading renders above the card's rows, labelled as a reading rather than a measurement; the card keeps its measured heading.
+- It is a button rather than part of the upload because only some cards on a page are worth a model call, and which ones is your call.
+- A card that has been read carries its reading as the first section of the copied hand-off, above the measured evidence an agent can check it against.
+
### 3. Copy the handoff
-When the bottleneck or React issue cards appear, choose the card you want to investigate and select **Copy Prompt**.
+Choose the card you want to investigate and select **Copy Prompt**. The prompt is written for an agent holding your codebase:
-
+- the measured figures, and the culprit frames with the callers that locate them;
+- one merged tree — **Where those frames sit** — joining the task root to every culprit, rather than a separate stack per frame;
+- bundled frames named by chunk and position (`vendors.bundle.js:189:701931`) instead of a full hashed URL, while a path you can actually open is still printed whole.
-### 4. Reopen an analysis
+### 4. Explore the profile behind a card
-Open **Analyses** to browse locally saved reports, including their findings and generated prompts. Select a report to reopen it, or delete reports you no longer need.
+**Explore** opens that task or commit in a new tab, with the card's numbers at the top and the recording underneath. It answers what a card cannot: what else ran, and in what order.
+
+For a CPU or Hermes task:
-
+- **Timeline** — the task against the clock, so a function called five hundred times reads differently from one long call.
+- **Flame graph** — the same frames drawn by eye, zoomable on a `1×`–`64×` ladder. Click a frame to lay the graph out across its subtree (Esc, or the `zoomed into` button, to come back), or hold ⌘/Ctrl and scroll to stretch the whole graph about the pointer so thin frames widen where they sit.
+- **Call tree** — self and inclusive time per frame, where `total = self + sum(children)` holds exactly.
+- **Culprits** — the ranked table behind the card's rows, with the callers that locate each frame.
+
+Clicking into a frame gives that subtree its own **Flame graph**, **Call tree**, and **Repeated work** views.
+
+
+
+A React commit opens on its commit timeline, with **Render tree** and **Components** tabs.
+
+
+
+Every tree, table, and flame graph has an **Everything** / **Your code only** toggle. Collapsing a frame lifts its children into its place and charges the time it spent in its own body to the nearest kept frame above it, so the figures agree across every view.
+
+> [!TIP]
+> Each chart states how to read it in one line, keeps its controls beside that, and folds its caveats behind **What this doesn't show**.
+
+### 5. Reopen an analysis
+
+Open **Analyses** to browse locally saved reports, including their findings and generated prompts. Select a report to reopen it, or delete reports you no longer need.
-### 5. Open the guides
+### 6. Open the guides
Select **Guide** for built-in, step-by-step instructions for capturing and analyzing JavaScript CPU, Hermes, and React profiles.
-
-
## Development
@@ -121,6 +171,15 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for setup, manual testing, automated chec
The CLI package lives in `packages/cli`; it exports shared configuration, catalog, and server-runtime modules and uses the same pinned agent SDK version as the app.
+The analysis engines are deterministic and covered by tests under `tests/`:
+
+- `src/lib/task-cards.ts` and `src/lib/call-tree.ts` build the CPU and Hermes cards;
+- `src/lib/react-cards.ts` and `src/lib/react-commit-tree.ts` build the React ones;
+- `src/lib/task-timeline.ts` and `src/lib/react-explore.ts` back the Explore views.
+
+> [!NOTE]
+> `TRACESIFT_CPU_ENGINE=legacy` and `TRACESIFT_REACT_ENGINE=analyzer` run the previous model-backed engines, so a suspicious profile can be checked against them.
+
## Made with ❤️ at Callstack
**TraceSift** is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.
diff --git a/assets/analyses.gif b/assets/analyses.gif
index f2ab2a0..ccf0d63 100644
Binary files a/assets/analyses.gif and b/assets/analyses.gif differ
diff --git a/assets/cpu-result.png b/assets/cpu-result.png
index 3ccb9ff..0c8d6b1 100644
Binary files a/assets/cpu-result.png and b/assets/cpu-result.png differ
diff --git a/assets/drop-zone.png b/assets/drop-zone.png
index 2ade62e..9455725 100644
Binary files a/assets/drop-zone.png and b/assets/drop-zone.png differ
diff --git a/assets/explore-cpu.gif b/assets/explore-cpu.gif
new file mode 100644
index 0000000..6977c55
Binary files /dev/null and b/assets/explore-cpu.gif differ
diff --git a/assets/explore-react.gif b/assets/explore-react.gif
new file mode 100644
index 0000000..fde9f1a
Binary files /dev/null and b/assets/explore-react.gif differ
diff --git a/assets/guides.png b/assets/guides.png
index 31f9557..efee040 100644
Binary files a/assets/guides.png and b/assets/guides.png differ
diff --git a/assets/handoff.gif b/assets/handoff.gif
index a5ae1f4..a172f76 100644
Binary files a/assets/handoff.gif and b/assets/handoff.gif differ
diff --git a/assets/landing.png b/assets/landing.png
index 308b3b0..0f000af 100644
Binary files a/assets/landing.png and b/assets/landing.png differ
diff --git a/assets/react-result.png b/assets/react-result.png
index eccc021..e63661f 100644
Binary files a/assets/react-result.png and b/assets/react-result.png differ
diff --git a/assets/settings.png b/assets/settings.png
index c85725c..564f6d2 100644
Binary files a/assets/settings.png and b/assets/settings.png differ
diff --git a/package.json b/package.json
index 5db1d96..d5703eb 100644
--- a/package.json
+++ b/package.json
@@ -4,13 +4,13 @@
"private": true,
"scripts": {
"postinstall": "patch-package --error-on-fail",
- "dev": "node --import @callstack/tracesift/bootstrap node_modules/next/dist/bin/next dev",
+ "dev": "node --max-old-space-size=8192 --import @callstack/tracesift/bootstrap node_modules/next/dist/bin/next dev",
"build": "next build",
"artifact:package": "node scripts/package-standalone.mjs",
"changeset": "changeset",
"release:version": "changeset version && node scripts/sync-release-version.mjs && npm install --package-lock-only --ignore-scripts --no-audit --no-fund",
"release:publish": "changeset publish",
- "start": "node --import @callstack/tracesift/bootstrap node_modules/next/dist/bin/next start",
+ "start": "node --max-old-space-size=8192 --import @callstack/tracesift/bootstrap node_modules/next/dist/bin/next start",
"lint": "eslint",
"test": "node --experimental-strip-types --test tests/*.test.mjs packages/cli/test/*.test.js",
"test:production": "node --test packages/cli/test/production.smoke.js tests/react-profile.production.mjs",
diff --git a/packages/cli/src/models.js b/packages/cli/src/models.js
index 29d5902..4e489f8 100644
--- a/packages/cli/src/models.js
+++ b/packages/cli/src/models.js
@@ -6,7 +6,23 @@ export const APEX_MODEL_ID = 'callstack/Apex';
export function registerApexProvider(runtime) {
runtime.registerProvider(APEX_PROVIDER_ID, {
name: 'Apex', baseUrl: 'https://api.callstack.ai/v1', api: 'openai-completions', authHeader: true,
- models: [{ id: APEX_MODEL_ID, name: 'Apex', reasoning: false, input: ['text'], cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 }, contextWindow: 128000, maxTokens: 32000 }],
+ models: [{
+ id: APEX_MODEL_ID,
+ name: 'Apex',
+ // Apex can return hidden reasoning tokens even when the caller asks for
+ // no thinking. Declare that capability so the OpenAI-compatible adapter
+ // sends an explicit reasoning effort instead of leaving the provider to
+ // choose an unbounded default. Apex's lowest supported effort is `low`.
+ reasoning: true,
+ thinkingLevelMap: { off: 'low' },
+ // Keep the system-message wire format that Apex already accepted; only
+ // opt into the reasoning control needed for these bounded reports.
+ compat: { supportsReasoningEffort: true, supportsDeveloperRole: false },
+ input: ['text'],
+ cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
+ contextWindow: 128000,
+ maxTokens: 32000,
+ }],
});
}
export async function createModelRuntime() {
diff --git a/packages/cli/src/start.js b/packages/cli/src/start.js
index 24ff676..24e0ff5 100644
--- a/packages/cli/src/start.js
+++ b/packages/cli/src/start.js
@@ -1,12 +1,30 @@
import { join } from 'node:path';
import { spawn } from 'node:child_process';
import { createServer } from 'node:net';
+import { totalmem } from 'node:os';
import { randomUUID } from 'node:crypto';
import { setTimeout as delay } from 'node:timers/promises';
import { getHome, ensureHome } from './config.js';
import { readRelease, verifyInstallation } from './install.js';
import { acquireLock, launch } from './process.js';
+/**
+ * Profiles are parsed whole in memory, so the stock ~4 GB heap is the practical
+ * ceiling on profile size long before the upload limit is. Raising the cap costs
+ * nothing until it is used — V8 grows the heap on demand — but it should still
+ * stay well under physical memory so a runaway parse fails with a JavaScript
+ * out-of-memory error rather than pushing the machine into swap.
+ */
+export function heapLimitMb(total = totalmem()) {
+ const half = Math.round(total / 2 / 1024 / 1024);
+ return Math.min(8192, Math.max(2048, half));
+}
+/** A heap size the user set themselves always wins over ours. */
+export function serverNodeArgs(env = process.env) {
+ if (/--max[-_]old[-_]space[-_]size/.test(env.NODE_OPTIONS ?? '')) return [];
+ return [`--max-old-space-size=${heapLimitMb()}`];
+}
+
export function parsePort(value = '3000') {
if (!/^\d+$/.test(value) || Number(value) < 1 || Number(value) > 65535) throw new Error('--port must be an integer between 1 and 65535.');
return Number(value);
@@ -53,7 +71,7 @@ export async function start({ home = getHome(), port = 3000, open = true } = {})
const instance = randomUUID();
const url = `http://127.0.0.1:${port}`;
const app = join(home, 'app');
- proc = launch(process.execPath, ['--import', '@callstack/tracesift/bootstrap', join(app, 'server.js')], {
+ proc = launch(process.execPath, [...serverNodeArgs(), '--import', '@callstack/tracesift/bootstrap', join(app, 'server.js')], {
cwd: app,
env: { ...process.env, HOSTNAME: '127.0.0.1', PORT: String(port), TRACE_SIFT_HOME: home, TRACE_SIFT_INSTANCE: instance },
});
diff --git a/packages/cli/test/config-model.test.js b/packages/cli/test/config-model.test.js
index 1ac2c19..6d73d78 100644
--- a/packages/cli/test/config-model.test.js
+++ b/packages/cli/test/config-model.test.js
@@ -44,7 +44,12 @@ test('offline catalog contains only supported providers and native adapters', as
assert(models.some(m => m.provider === 'openai-codex' && m.api === 'openai-codex-responses'));
assert(models.some(m => m.provider === 'openai' && m.api === 'openai-responses'));
assert(models.some(m => m.provider === 'anthropic' && m.api === 'anthropic-messages'));
- assert.equal(models.find(m => m.provider === 'apex').id, 'callstack/Apex');
+ const apex = models.find(m => m.provider === 'apex');
+ assert.equal(apex.id, 'callstack/Apex');
+ assert.equal(apex.reasoning, true);
+ assert.equal(apex.thinkingLevelMap.off, 'low');
+ assert.equal(apex.compat.supportsReasoningEffort, true);
+ assert.equal(apex.compat.supportsDeveloperRole, false);
});
test('startup freezes configured, missing and malformed states before first agent access', async t => {
diff --git a/packages/cli/test/install-process.test.js b/packages/cli/test/install-process.test.js
index 38dabc6..e2a8ec2 100644
--- a/packages/cli/test/install-process.test.js
+++ b/packages/cli/test/install-process.test.js
@@ -8,7 +8,7 @@ import { createServer } from 'node:http';
import { EventEmitter } from 'node:events';
import { downloadArtifact, install, validateRelease, verifyInstallation } from '../src/install.js';
import { acquireLock, launch, alive, run } from '../src/process.js';
-import { parsePort, assertPortAvailable, waitForReady, openBrowser } from '../src/start.js';
+import { parsePort, assertPortAvailable, waitForReady, openBrowser, heapLimitMb, serverNodeArgs } from '../src/start.js';
async function home(t) { const dir = await mkdtemp(join(tmpdir(), 'tracesift-test-')); t.after(() => rm(dir, { recursive: true, force: true })); return dir; }
const bytes = Buffer.from('fake artifact');
@@ -184,3 +184,16 @@ test('browser launch detaches and handles opening failures without stopping the
assert(detached);
assert.doesNotThrow(() => browser.emit('error', new Error('missing opener')));
});
+
+test('the server heap is sized from physical memory and yields to an explicit NODE_OPTIONS', () => {
+ const gb = 1024 ** 3;
+ assert.equal(heapLimitMb(4 * gb), 2048, 'small machines keep the floor rather than half of 4 GB');
+ assert.equal(heapLimitMb(16 * gb), 8192);
+ assert.equal(heapLimitMb(48 * gb), 8192, 'large machines are capped, not given half of 48 GB');
+ assert.ok(heapLimitMb(2 * gb) <= 2048 * 2);
+
+ assert.deepEqual(serverNodeArgs({}), [`--max-old-space-size=${heapLimitMb()}`]);
+ assert.deepEqual(serverNodeArgs({ NODE_OPTIONS: '--max-old-space-size=2048' }), []);
+ assert.deepEqual(serverNodeArgs({ NODE_OPTIONS: '--max_old_space_size=2048' }), [], 'node accepts underscores too');
+ assert.deepEqual(serverNodeArgs({ NODE_OPTIONS: '--trace-warnings' }), [`--max-old-space-size=${heapLimitMb()}`]);
+});
diff --git a/patches/@rozenite+ui+2.4.0.patch b/patches/@rozenite+ui+2.4.0.patch
new file mode 100644
index 0000000..42c4fb0
--- /dev/null
+++ b/patches/@rozenite+ui+2.4.0.patch
@@ -0,0 +1,111 @@
+diff --git a/node_modules/@rozenite/ui/dist/index.cjs b/node_modules/@rozenite/ui/dist/index.cjs
+index bb315bc..acb0970 100644
+--- a/node_modules/@rozenite/ui/dist/index.cjs
++++ b/node_modules/@rozenite/ui/dist/index.cjs
+@@ -1 +1 @@
+-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const yt=require("clsx"),wt=require("tailwind-merge"),_=require("class-variance-authority"),n=require("react/jsx-runtime"),f=require("react"),C=require("@base-ui/react/use-render"),g=require("lucide-react"),W=require("@base-ui/react/tooltip"),V=require("@base-ui/react/menu"),xe=require("react-resizable-panels"),F=require("@base-ui/react/dialog"),O=require("@base-ui/react/toast"),E=require("@base-ui/react/select"),M=require("@base-ui/react/combobox"),ie=require("@base-ui/react/tabs"),Ct=require("@base-ui/react/toggle-group"),Nt=require("@base-ui/react/toggle"),X=require("@base-ui/react/scroll-area"),Z=require("@base-ui/react/field"),he=require("@base-ui/react/toolbar"),St=require("@base-ui/react/separator"),De=require("@base-ui/react/switch"),L=require("@tanstack/react-table"),Oe=require("react-virtuoso");function i(...e){return wt.twMerge(yt.clsx(e))}const Fe={sm:"h-6",md:"h-8",lg:"h-10"},Tt={sm:"px-2",md:"px-3",lg:"px-4"},_e={sm:"size-3.5",md:"size-4",lg:"size-5"},kt={neutral:"",primary:"",success:"",warning:"",danger:"",info:""},ee=_.cva("",{variants:{tone:kt,variant:{solid:"",soft:"",outline:"",ghost:""},interactive:{true:"",false:""}},compoundVariants:[{tone:"neutral",variant:"solid",class:"bg-secondary text-secondary-foreground"},{tone:"neutral",variant:"soft",class:"bg-muted text-foreground"},{tone:"neutral",variant:"outline",class:"border border-border text-foreground"},{tone:"neutral",variant:"ghost",class:"text-foreground"},{tone:"primary",variant:"solid",class:"bg-primary text-primary-foreground"},{tone:"primary",variant:"soft",class:"bg-accent text-accent-foreground"},{tone:"primary",variant:"outline",class:"border border-primary text-primary"},{tone:"primary",variant:"ghost",class:"text-primary"},{tone:"success",variant:"solid",class:"bg-success text-success-foreground"},{tone:"success",variant:"soft",class:"bg-success-soft text-success"},{tone:"success",variant:"outline",class:"border border-success text-success"},{tone:"success",variant:"ghost",class:"text-success"},{tone:"warning",variant:"solid",class:"bg-warning text-warning-foreground"},{tone:"warning",variant:"soft",class:"bg-warning-soft text-warning"},{tone:"warning",variant:"outline",class:"border border-warning text-warning"},{tone:"warning",variant:"ghost",class:"text-warning"},{tone:"danger",variant:"solid",class:"bg-danger text-danger-foreground"},{tone:"danger",variant:"soft",class:"bg-danger-soft text-danger"},{tone:"danger",variant:"outline",class:"border border-danger text-danger"},{tone:"danger",variant:"ghost",class:"text-danger"},{tone:"info",variant:"solid",class:"bg-info text-info-foreground"},{tone:"info",variant:"soft",class:"bg-info-soft text-info"},{tone:"info",variant:"outline",class:"border border-info text-info"},{tone:"info",variant:"ghost",class:"text-info"},{tone:"neutral",variant:"solid",interactive:!0,class:"hover:bg-secondary/80"},{tone:"neutral",variant:"soft",interactive:!0,class:"hover:bg-muted/80"},{tone:"neutral",variant:"outline",interactive:!0,class:"hover:bg-accent hover:text-accent-foreground"},{tone:"neutral",variant:"ghost",interactive:!0,class:"hover:bg-accent hover:text-accent-foreground"},{tone:"primary",variant:"solid",interactive:!0,class:"hover:bg-primary/90"},{tone:"primary",variant:"soft",interactive:!0,class:"hover:bg-accent/80"},{tone:"primary",variant:"outline",interactive:!0,class:"hover:bg-accent"},{tone:"primary",variant:"ghost",interactive:!0,class:"hover:bg-accent"},{tone:"success",variant:"solid",interactive:!0,class:"hover:bg-success/90"},{tone:"success",variant:"soft",interactive:!0,class:"hover:bg-success-soft/70"},{tone:"success",variant:"outline",interactive:!0,class:"hover:bg-success-soft"},{tone:"success",variant:"ghost",interactive:!0,class:"hover:bg-success-soft"},{tone:"warning",variant:"solid",interactive:!0,class:"hover:bg-warning/90"},{tone:"warning",variant:"soft",interactive:!0,class:"hover:bg-warning-soft/70"},{tone:"warning",variant:"outline",interactive:!0,class:"hover:bg-warning-soft"},{tone:"warning",variant:"ghost",interactive:!0,class:"hover:bg-warning-soft"},{tone:"danger",variant:"solid",interactive:!0,class:"hover:bg-danger/90"},{tone:"danger",variant:"soft",interactive:!0,class:"hover:bg-danger-soft/70"},{tone:"danger",variant:"outline",interactive:!0,class:"hover:bg-danger-soft"},{tone:"danger",variant:"ghost",interactive:!0,class:"hover:bg-danger-soft"},{tone:"info",variant:"solid",interactive:!0,class:"hover:bg-info/90"},{tone:"info",variant:"soft",interactive:!0,class:"hover:bg-info-soft/70"},{tone:"info",variant:"outline",interactive:!0,class:"hover:bg-info-soft"},{tone:"info",variant:"ghost",interactive:!0,class:"hover:bg-info-soft"}],defaultVariants:{tone:"neutral",variant:"solid",interactive:!1}}),le=_.cva("",{variants:{tone:{neutral:"text-foreground",primary:"text-primary",success:"text-success",warning:"text-warning",danger:"text-danger",info:"text-info"}},defaultVariants:{tone:"neutral"}}),pe=_.cva("text-foreground",{variants:{variant:{title:"text-base font-semibold",heading:"text-sm font-semibold",body:"text-sm font-normal",caption:"text-xs text-muted-foreground",code:"font-mono text-xs",numeric:"font-mono text-xs tabular-nums"}},defaultVariants:{variant:"body"}});function He({className:e,variant:t,tone:r,render:o,ref:s,...a}){return C.useRender({render:o??n.jsx("span",{}),ref:s,props:{"data-slot":"text",className:i(pe({variant:t}),r&&le({tone:r}),e),...a}})}const Pt={1:"h1",2:"h2",3:"h3",4:"h4",5:"h5",6:"h6"},Rt={1:"text-lg font-bold",2:"text-base font-semibold",3:"text-sm font-semibold",4:"text-sm font-medium",5:"text-xs font-semibold",6:"text-xs font-medium"};function zt({level:e=2,tone:t,className:r,render:o,ref:s,...a}){return C.useRender({render:o??f.createElement(Pt[e]),ref:s,props:{"data-slot":"heading",className:i(pe({variant:"title"}),Rt[e],t&&le({tone:t}),r),...a}})}const Be={0:"gap-0",1:"gap-1",2:"gap-2",3:"gap-3",4:"gap-4",6:"gap-6",8:"gap-8"},qe={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},Ge={start:"justify-start",center:"justify-center",end:"justify-end",between:"justify-between",around:"justify-around",evenly:"justify-evenly"};function Dt({className:e,gap:t,align:r,justify:o,wrap:s,fill:a,scroll:l,tabIndex:d,render:c,ref:u,...m}){return C.useRender({render:c??n.jsx("div",{}),ref:u,props:{"data-slot":"row",tabIndex:l?d??0:d,className:i("flex flex-row",t!==void 0&&Be[t],r&&qe[r],o&&Ge[o],s&&"flex-wrap",a&&"min-w-0 flex-1",l&&"overflow-auto outline-none focus-visible:ring-2 focus-visible:ring-ring",e),...m}})}function Lt({className:e,gap:t,align:r,justify:o,wrap:s,fill:a,scroll:l,tabIndex:d,render:c,ref:u,...m}){return C.useRender({render:c??n.jsx("div",{}),ref:u,props:{"data-slot":"column",tabIndex:l?d??0:d,className:i("flex flex-col",t!==void 0&&Be[t],r&&qe[r],o&&Ge[o],s&&"flex-wrap",a&&"min-h-0 flex-1",l&&"overflow-auto outline-none focus-visible:ring-2 focus-visible:ring-ring",e),...m}})}function Mt({icon:e,size:t="md",tone:r,className:o,"aria-hidden":s,...a}){return n.jsx(e,{"data-slot":"icon","aria-hidden":s??(a["aria-label"]?void 0:!0),className:i(_e[t],"shrink-0",r&&le({tone:r}),o),...a})}function It(e,t){return e==="light"||e==="dark"?e:t?"dark":"light"}const Ke="@rozenite/ui:theme";function Le(){try{return localStorage.getItem(Ke)}catch{return null}}function Et(e){try{localStorage.setItem(Ke,e)}catch{}}function Vt(){try{return window.matchMedia("(prefers-color-scheme: dark)").matches}catch{return!1}}const Ue=f.createContext(null);function At({children:e}){const[t,r]=f.useState(()=>It(Le(),Vt()));f.useEffect(()=>{if(Le()!==null)return;let l;try{l=window.matchMedia("(prefers-color-scheme: dark)")}catch{return}const d=()=>r(l.matches?"dark":"light");return d(),l.addEventListener("change",d),()=>l.removeEventListener("change",d)},[]);const o=f.useCallback(l=>{r(l),Et(l)},[]),s=f.useCallback(()=>{o(t==="dark"?"light":"dark")},[o,t]),a=f.useMemo(()=>({theme:t,setTheme:o,toggleTheme:s}),[t,o,s]);return n.jsx(Ue.Provider,{value:a,children:e})}function be(){const e=f.useContext(Ue);if(!e)throw new Error("usePluginTheme must be used within a PluginShell");return e}const Xe=f.createContext(null);function Y(){return f.useContext(Xe)}function Ot(e){return n.jsx(W.Tooltip.Provider,{"data-slot":"tooltip-provider",...e})}function Ft(e){return n.jsx(W.Tooltip.Root,{"data-slot":"tooltip",...e})}function _t(e){return n.jsx(W.Tooltip.Trigger,{"data-slot":"tooltip-trigger",...e})}function Ht({className:e,side:t="top",sideOffset:r=6,align:o="center",alignOffset:s=0,children:a,...l}){const d=Y();return n.jsx(W.Tooltip.Portal,{container:d,children:n.jsx(W.Tooltip.Positioner,{side:t,sideOffset:r,align:o,alignOffset:s,className:"z-50",children:n.jsx(W.Tooltip.Popup,{"data-slot":"tooltip-content",className:i("z-50 w-fit max-w-xs rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background","origin-(--transform-origin) transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0",e),...l,children:a})})})}const ae=Object.assign(Ft,{Provider:Ot,Trigger:_t,Content:Ht}),Bt={sm:"size-6 p-0 [&_svg]:size-3.5",md:"size-8 p-0 [&_svg]:size-4",lg:"size-10 p-0 [&_svg]:size-5"};function qt({className:e,tone:t="primary",variant:r,size:o="md",label:s,type:a="button",children:l,render:d,ref:c,...u}){const m=C.useRender({render:d??n.jsx("button",{type:a}),ref:c,props:{"aria-label":s,"data-slot":"icon-button",className:i("relative inline-flex shrink-0 items-center justify-center rounded-md transition-colors","outline-none focus-visible:ring-2 focus-visible:ring-ring","disabled:pointer-events-none disabled:opacity-50","[&_svg]:pointer-events-none [&_svg]:shrink-0",ee({tone:t,variant:r,interactive:!0}),Bt[o],e),children:l,...u}});return n.jsxs(ae,{children:[n.jsx(ae.Trigger,{render:m}),n.jsx(ae.Content,{children:s})]})}function Gt(e){return n.jsx(V.Menu.Root,{"data-slot":"menu",...e})}function Kt(e){return n.jsx(V.Menu.Trigger,{"data-slot":"menu-trigger",...e})}function Ut({className:e,side:t="bottom",sideOffset:r=4,align:o="start",alignOffset:s=0,children:a,...l}){const d=Y();return n.jsx(V.Menu.Portal,{container:d,children:n.jsx(V.Menu.Positioner,{side:t,sideOffset:r,align:o,alignOffset:s,className:"z-50",children:n.jsx(V.Menu.Popup,{"data-slot":"menu-content",className:i("max-h-(--available-height) min-w-40 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md","origin-(--transform-origin) transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",e),...l,children:a})})})}function Xt({className:e,...t}){return n.jsx(V.Menu.Item,{"data-slot":"menu-item",className:i("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground select-none","data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground","data-[disabled]:pointer-events-none data-[disabled]:opacity-50",e),...t})}function $t({className:e,children:t,...r}){return n.jsxs(V.Menu.CheckboxItem,{"data-slot":"menu-checkbox-item",className:i("flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground select-none","data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground","data-[disabled]:pointer-events-none data-[disabled]:opacity-50",e),...r,children:[t,n.jsx(V.Menu.CheckboxItemIndicator,{children:n.jsx(g.Check,{className:"size-3.5"})})]})}function Wt({className:e,...t}){return n.jsx(V.Menu.Separator,{"data-slot":"menu-separator",className:i("-mx-1 my-1 h-px bg-border",e),...t})}function Yt(e){return n.jsx(V.Menu.Group,{"data-slot":"menu-group",...e})}function Jt({className:e,...t}){return n.jsx(V.Menu.GroupLabel,{"data-slot":"menu-group-label",className:i("px-2 py-1.5 text-xs font-medium text-muted-foreground",e),...t})}const Qt=Object.assign(Gt,{Trigger:Kt,Content:Ut,Item:Xt,CheckboxItem:$t,Separator:Wt,Group:Yt,GroupLabel:Jt});function Zt({tone:e="neutral",className:t,render:r,ref:o,...s}){return C.useRender({render:r??n.jsx("div",{}),ref:o,props:{role:e==="danger"?"alert":"status","data-slot":"alert",className:i(ee({tone:e,variant:"soft",class:"flex flex-col gap-1 rounded-md border border-current/15 p-3 text-sm"}),t),...s}})}function en({className:e,...t}){return n.jsx("div",{"data-slot":"alert-title",className:i("font-medium",e),...t})}function tn({className:e,...t}){return n.jsx("div",{"data-slot":"alert-description",className:i("opacity-80",e),...t})}const nn=Object.assign(Zt,{Title:en,Description:tn});function rn({className:e,render:t,ref:r,...o}){return C.useRender({render:t??n.jsx("kbd",{}),ref:r,props:{"data-slot":"kbd",className:i("inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-border bg-muted px-1 font-mono text-xs font-medium text-muted-foreground",e),...o}})}function on({direction:e="horizontal",autoSaveId:t,id:r,className:o,disableCursor:s=!0,...a}){return n.jsx(xe.Group,{"data-slot":"split",orientation:e,id:r??t,disableCursor:s,className:i("flex h-full w-full",o),...a})}function oe(e){return typeof e=="number"?`${e}%`:e}function sn({className:e,defaultSize:t,minSize:r,maxSize:o,collapsedSize:s,...a}){return n.jsx(xe.Panel,{"data-slot":"split-pane",className:i("min-h-0 min-w-0",e),defaultSize:oe(t),minSize:oe(r),maxSize:oe(o),collapsedSize:oe(s),...a})}function an({className:e,withHandle:t=!1,children:r,...o}){return n.jsxs(xe.Separator,{"data-slot":"split-handle",className:i("group/split-handle relative flex items-center justify-center bg-border","aria-[orientation=vertical]:w-px aria-[orientation=vertical]:cursor-col-resize","aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:cursor-row-resize","after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2","outline-none",e),...o,children:[t&&n.jsx("div",{className:i("z-10 flex items-center justify-center rounded-sm border border-border bg-background","group-aria-[orientation=vertical]/split-handle:h-4 group-aria-[orientation=vertical]/split-handle:w-3","group-aria-[orientation=horizontal]/split-handle:h-3 group-aria-[orientation=horizontal]/split-handle:w-4 group-aria-[orientation=horizontal]/split-handle:rotate-90"),children:n.jsx(g.GripVertical,{className:"h-2.5 w-2.5 text-muted-foreground"})}),r]})}const ln=Object.assign(on,{Pane:sn,Handle:an}),$e=f.createContext(null);function cn(e){const[t,r]=f.useState(e.defaultOpen??!1),o=e.open??t;return n.jsx($e.Provider,{value:o,children:n.jsx(F.Dialog.Root,{...e,onOpenChange:(s,a)=>{e.open===void 0&&r(s),e.onOpenChange?.(s,a)}})})}function dn(e){return n.jsx(F.Dialog.Trigger,{"data-slot":"dialog-trigger",...e})}function un(e){return n.jsx(F.Dialog.Close,{"data-slot":"dialog-close",...e})}function fn({className:e,children:t,showCloseButton:r=!0,closeLabel:o="Close",...s}){const a=Y(),l=f.useContext($e),d=f.useRef(t);return n.jsxs(F.Dialog.Portal,{container:a,children:[n.jsx(F.Dialog.Backdrop,{"data-slot":"dialog-backdrop",className:i("fixed inset-0 z-50 bg-background/70","transition-opacity data-[ending-style]:opacity-0 data-[starting-style]:opacity-0")}),n.jsx(F.Dialog.Viewport,{className:"fixed inset-0 z-50 flex items-center justify-center p-4",children:n.jsxs(F.Dialog.Popup,{"data-slot":"dialog-content",className:i("relative flex w-full max-w-md flex-col gap-4 rounded-lg border border-border bg-card p-6 text-card-foreground shadow-lg","transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",e),render:c=>{const{children:u,...m}=c;return l&&(d.current=u),n.jsx("div",{...m,children:d.current})},...s,children:[t,r&&n.jsx(F.Dialog.Close,{"data-slot":"dialog-close","aria-label":o,className:i("absolute top-4 right-4 inline-flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground","hover:bg-accent hover:text-accent-foreground","outline-none focus-visible:ring-2 focus-visible:ring-ring"),children:n.jsx(g.X,{className:"h-4 w-4"})})]})})]})}function mn({className:e,...t}){return n.jsx("div",{"data-slot":"dialog-header",className:i("flex flex-col gap-1.5",e),...t})}function gn({className:e,...t}){return n.jsx("div",{"data-slot":"dialog-footer",className:i("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",e),...t})}function xn({className:e,...t}){return n.jsx(F.Dialog.Title,{"data-slot":"dialog-title",className:i("text-sm font-semibold text-foreground",e),...t})}function hn({className:e,...t}){return n.jsx(F.Dialog.Description,{"data-slot":"dialog-description",className:i("text-sm text-muted-foreground",e),...t})}const q=Object.assign(cn,{Trigger:dn,Close:un,Content:fn,Header:mn,Footer:gn,Title:xn,Description:hn}),We=_.cva(i("relative inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-colors","outline-none focus-visible:ring-2 focus-visible:ring-ring","disabled:pointer-events-none disabled:opacity-50","[&_svg]:pointer-events-none [&_svg]:shrink-0"),{variants:{size:{sm:"h-6 px-2 text-xs [&_svg]:size-3.5",md:"h-8 px-3 [&_svg]:size-4",lg:"h-10 px-4 [&_svg]:size-5"}},defaultVariants:{size:"md"}});function me({className:e,tone:t="primary",variant:r,size:o,type:s="button",trailing:a,children:l,render:d,ref:c,...u}){return C.useRender({render:d??n.jsx("button",{type:s}),ref:c,props:{"data-slot":"button",className:i(We({size:o}),ee({tone:t,variant:r,interactive:!0}),e),children:n.jsxs(n.Fragment,{children:[l,a]}),...u}})}function Ye({open:e,onOpenChange:t,title:r,description:o,className:s,variant:a="confirm",tone:l="primary",confirmLabel:d,cancelLabel:c="Cancel",onConfirm:u}){const m=a==="alert";return n.jsx(q,{open:e,onOpenChange:t,children:n.jsxs(q.Content,{showCloseButton:!1,className:s,children:[n.jsxs(q.Header,{children:[n.jsx(q.Title,{children:r}),o&&n.jsx(q.Description,{children:o})]}),n.jsxs(q.Footer,{children:[!m&&n.jsx(q.Close,{render:n.jsx(me,{tone:"neutral",variant:"outline"}),children:c}),n.jsx(q.Close,{render:n.jsx(me,{tone:l}),onClick:u,children:d??(m?"OK":"Confirm")})]})]})})}const Je=f.createContext(null);function pn({children:e}){const[t,r]=f.useState([]),o=f.useRef(t);o.current=t;const s=f.useRef(0),a=f.useCallback(c=>new Promise(u=>{const m=s.current++;r(h=>[...h,{id:m,options:c,resolve:u}])}),[]);f.useEffect(()=>()=>{o.current.forEach(c=>c.resolve(!1))},[]);const l=t[0]??null,d=c=>{l&&(l.resolve(c),r(u=>u.filter(m=>m.id!==l.id)))};return n.jsxs(Je.Provider,{value:a,children:[e,l&&n.jsx(Ye,{...l.options,open:!0,onOpenChange:c=>{c||d(!1)},onConfirm:()=>d(!0)},l.id)]})}function bn(){const e=f.useContext(Je);if(!e)throw new Error("useConfirmDialog must be used within a ConfirmDialog.Provider");return e}const ve=Object.assign(Ye,{Provider:pn}),vn=O.Toast.useToastManager;function Me({children:e,dismissLabel:t="Dismiss",viewportClassName:r,...o}){return n.jsxs(O.Toast.Provider,{"data-slot":"toast-provider",...o,children:[e,n.jsx(jn,{dismissLabel:t,viewportClassName:r})]})}function jn({dismissLabel:e,viewportClassName:t}){const{toasts:r}=O.Toast.useToastManager(),o=Y();return n.jsx(O.Toast.Portal,{container:o,children:n.jsx(O.Toast.Viewport,{"data-slot":"toast-viewport",className:i("fixed right-4 bottom-4 z-50 flex w-80 flex-col gap-2",t),children:r.map(s=>n.jsxs(O.Toast.Root,{toast:s,"data-slot":"toast",className:i("relative flex items-start gap-2 rounded-md border border-border bg-card p-3 text-card-foreground shadow-md","transition-[transform,opacity] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",s.type==="error"&&"border-danger/50 text-danger"),children:[n.jsxs(O.Toast.Content,{"data-slot":"toast-content",className:"flex min-w-0 flex-1 flex-col gap-0.5",children:[s.title&&n.jsx(O.Toast.Title,{"data-slot":"toast-title",className:"text-sm font-medium"}),s.description&&n.jsx(O.Toast.Description,{"data-slot":"toast-description",className:"text-xs text-muted-foreground"})]}),n.jsx(O.Toast.Close,{"data-slot":"toast-close","aria-label":e,className:"inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground",children:n.jsx(g.X,{className:"h-3.5 w-3.5"})})]},s.id))})})}const je=Object.assign(Me,{Provider:Me});function yn({unstyled:e=!1,className:t,children:r,...o}){return e?n.jsx("div",{"data-slot":"plugin-shell",className:i("flex h-screen min-h-0 flex-col",t),...o,children:n.jsx(je,{children:n.jsx(ve.Provider,{children:r})})}):n.jsx(At,{children:n.jsx(wn,{className:t,...o,children:r})})}function wn({className:e,children:t,...r}){const{theme:o}=be(),[s,a]=f.useState(null);return n.jsx("div",{ref:a,"data-slot":"plugin-shell",className:i(o==="dark"&&"dark","flex h-screen min-h-0 flex-col bg-background text-foreground",e),...r,children:n.jsx(Xe.Provider,{value:s,children:n.jsx(je,{children:n.jsx(ve.Provider,{children:t})})})})}function Cn({className:e,...t}){return n.jsx("div",{"data-slot":"plugin-shell-body",className:i("flex min-h-0 flex-1 flex-col overflow-auto",e),...t})}const Nn=Object.assign(yn,{Body:Cn});function Sn({className:e,render:t,ref:r,...o}){return C.useRender({render:t??n.jsx("header",{}),ref:r,props:{"data-slot":"plugin-header",className:i("flex shrink-0 items-center justify-between gap-3 border-b border-border bg-card px-4 py-3",e),...o}})}function Tn({className:e,render:t,ref:r,...o}){return C.useRender({render:t??n.jsx("h1",{}),ref:r,props:{"data-slot":"plugin-header-title",className:i("text-sm font-semibold text-foreground",e),...o}})}function kn({className:e,render:t,ref:r,...o}){return C.useRender({render:t??n.jsx("p",{}),ref:r,props:{"data-slot":"plugin-header-subtitle",className:i("text-xs text-muted-foreground",e),...o}})}function Pn({className:e,render:t,ref:r,...o}){return C.useRender({render:t??n.jsx("div",{}),ref:r,props:{"data-slot":"plugin-header-actions",className:i("flex items-center gap-2",e),...o}})}function Rn({className:e,lightLabel:t="Switch to light theme",darkLabel:r="Switch to dark theme",render:o,ref:s,children:a,...l}){const{theme:d,toggleTheme:c}=be();return C.useRender({render:o??n.jsx("button",{type:"button"}),ref:s,props:{"data-slot":"plugin-header-theme-switcher","aria-label":d==="dark"?t:r,onClick:c,className:i("inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground","hover:bg-accent hover:text-accent-foreground","outline-none focus-visible:ring-2 focus-visible:ring-ring","transition-colors",e),children:d==="dark"?n.jsx(g.Sun,{className:"h-3.5 w-3.5"}):n.jsx(g.Moon,{className:"h-3.5 w-3.5"}),...l}})}const zn=Object.assign(Sn,{Title:Tn,Subtitle:kn,Actions:Pn,ThemeSwitcher:Rn}),Qe=i("w-full rounded-md border border-input bg-transparent text-foreground shadow-xs transition-colors","outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50","placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"),U=_.cva(Qe,{variants:{size:{sm:"h-6 px-2 text-xs",md:"h-8 px-3 text-sm",lg:"h-10 px-4 text-base"}},defaultVariants:{size:"md"}}),Dn=_.cva(Qe,{variants:{size:{sm:"min-h-20 px-2 py-1.5 text-xs",md:"min-h-28 px-3 py-2 text-sm",lg:"min-h-36 px-4 py-2.5 text-base"}},defaultVariants:{size:"md"}}),Ze=_.cva(i("max-h-64 min-w-[--anchor-width] overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md","origin-(--transform-origin) transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0")),et=_.cva(i("flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground select-none","data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground","data-[disabled]:pointer-events-none data-[disabled]:opacity-50"));function Ln(e){return n.jsx(E.Select.Root,{...e})}function Mn({className:e,children:t,size:r="md",...o}){return n.jsxs(E.Select.Trigger,{"data-slot":"select-trigger",className:i(U({size:r}),"flex items-center justify-between gap-2",e),...o,children:[t,n.jsx(E.Select.Icon,{children:n.jsx(g.ChevronsUpDown,{className:"h-3.5 w-3.5 shrink-0 text-muted-foreground"})})]})}function In({className:e,...t}){return n.jsx(E.Select.Value,{"data-slot":"select-value",className:i("truncate",e),...t})}function En({className:e,side:t="bottom",sideOffset:r=4,align:o="start",children:s,...a}){const l=Y();return n.jsx(E.Select.Portal,{container:l,children:n.jsx(E.Select.Positioner,{side:t,sideOffset:r,align:o,className:"z-50",children:n.jsx(E.Select.Popup,{"data-slot":"select-content",className:i(Ze(),e),...a,children:n.jsx(E.Select.List,{children:s})})})})}function Vn({className:e,children:t,...r}){return n.jsxs(E.Select.Item,{"data-slot":"select-item",className:i(et(),e),...r,children:[n.jsx(E.Select.ItemText,{children:t}),n.jsx(E.Select.ItemIndicator,{children:n.jsx(g.Check,{className:"h-3.5 w-3.5"})})]})}const An=Object.assign(Ln,{Trigger:Mn,Value:In,Content:En,Item:Vn});function On(e){return n.jsx(M.Combobox.Root,{...e})}const Fn={sm:{pad:"pr-11",cluster:"right-1",control:"size-4",icon:"size-3"},md:{pad:"pr-14",cluster:"right-1.5",control:"size-5",icon:"size-3.5"},lg:{pad:"pr-16",cluster:"right-2",control:"size-6",icon:"size-4"}};function _n({className:e,size:t="md",...r}){const o=Fn[t];return n.jsxs(M.Combobox.InputGroup,{"data-slot":"combobox-input-group",className:"relative flex items-center",children:[n.jsx(M.Combobox.Input,{"data-slot":"combobox-input",className:i(U({size:t}),o.pad,e),...r}),n.jsxs("div",{className:i("absolute flex items-center gap-0.5",o.cluster),children:[n.jsx(M.Combobox.Clear,{"data-slot":"combobox-clear",className:i("inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground",o.control),children:n.jsx(g.X,{className:o.icon})}),n.jsx(M.Combobox.Icon,{"data-slot":"combobox-icon",children:n.jsx(g.ChevronsUpDown,{className:i("text-muted-foreground",o.icon)})})]})]})}function Hn({className:e,side:t="bottom",sideOffset:r=4,align:o="start",emptyMessage:s="No results found.",children:a,...l}){const d=Y();return n.jsx(M.Combobox.Portal,{container:d,children:n.jsx(M.Combobox.Positioner,{side:t,sideOffset:r,align:o,className:"z-50",children:n.jsxs(M.Combobox.Popup,{"data-slot":"combobox-content",className:i(Ze(),e),...l,children:[n.jsx(M.Combobox.Empty,{"data-slot":"combobox-empty",className:"px-2 py-1.5 text-sm text-muted-foreground",children:s}),n.jsx(M.Combobox.List,{children:a})]})})})}function Bn({className:e,children:t,...r}){return n.jsxs(M.Combobox.Item,{"data-slot":"combobox-item",className:i(et(),e),...r,children:[t,n.jsx(M.Combobox.ItemIndicator,{children:n.jsx(g.Check,{className:"h-3.5 w-3.5"})})]})}const qn=Object.assign(On,{Input:_n,Content:Hn,Item:Bn}),Gn={sm:"h-6 p-0.5",md:"h-8 p-1",lg:"h-10 p-1"},Kn={sm:"h-5 px-2 text-xs",md:"h-6 px-2.5 text-sm",lg:"h-8 px-3 text-base"};function Un(e){return n.jsx(ie.Tabs.Root,{"data-slot":"tabs",...e})}function Xn({className:e,size:t="md",...r}){return n.jsx(ie.Tabs.List,{"data-slot":"tabs-list",className:i("inline-flex items-center gap-1 rounded-md bg-muted text-muted-foreground",Gn[t],e),...r})}function $n({className:e,size:t="md",...r}){return n.jsx(ie.Tabs.Tab,{"data-slot":"tabs-tab",className:i("inline-flex items-center justify-center rounded-sm border border-transparent font-medium whitespace-nowrap text-muted-foreground","outline-none focus-visible:ring-2 focus-visible:ring-ring","data-[active]:border-border data-[active]:bg-background data-[active]:text-foreground data-[active]:shadow-xs","disabled:pointer-events-none disabled:opacity-50",Kn[t],e),...r})}function Wn({className:e,...t}){return n.jsx(ie.Tabs.Panel,{"data-slot":"tabs-panel",className:i("flex-1 outline-none",e),...t})}const Yn=Object.assign(Un,{List:Xn,Tab:$n,Panel:Wn}),Jn={sm:"h-6 p-0.5",md:"h-8 p-1",lg:"h-10 p-1"},Qn={sm:"h-5 px-2 text-xs [&_svg]:size-3.5",md:"h-6 px-2.5 text-sm [&_svg]:size-4",lg:"h-8 px-3 text-base [&_svg]:size-5"};function Zn({className:e,size:t="md",...r}){return n.jsx(Ct.ToggleGroup,{"data-slot":"toggle-group",className:i("inline-flex items-center gap-1 rounded-md bg-muted text-muted-foreground",Jn[t],e),...r})}function er({className:e,size:t="md",...r}){return n.jsx(Nt.Toggle,{"data-slot":"toggle-group-item",className:i("inline-flex items-center justify-center gap-1.5 rounded-sm font-medium whitespace-nowrap text-muted-foreground","outline-none focus-visible:ring-2 focus-visible:ring-ring","data-[pressed]:bg-background data-[pressed]:text-foreground data-[pressed]:shadow-xs","disabled:pointer-events-none disabled:opacity-50",Qn[t],e),...r})}const tr=Object.assign(Zn,{Item:er});function nr({className:e,viewportClassName:t,children:r,...o}){return n.jsxs(X.ScrollArea.Root,{"data-slot":"scroll-area",className:i("relative overflow-hidden",e),...o,children:[n.jsx(X.ScrollArea.Viewport,{"data-slot":"scroll-area-viewport",className:i("h-full w-full",t),children:n.jsx(X.ScrollArea.Content,{children:r})}),n.jsx(Ie,{orientation:"vertical"}),n.jsx(Ie,{orientation:"horizontal"}),n.jsx(X.ScrollArea.Corner,{"data-slot":"scroll-area-corner",className:"bg-background"})]})}function Ie({orientation:e}){return n.jsx(X.ScrollArea.Scrollbar,{"data-slot":"scroll-area-scrollbar",orientation:e,className:i("flex touch-none p-0.5 transition-colors select-none",e==="vertical"&&"h-full w-2.5",e==="horizontal"&&"h-2.5 w-full flex-col"),children:n.jsx(X.ScrollArea.Thumb,{"data-slot":"scroll-area-thumb",className:"relative flex-1 rounded-sm bg-border hover:bg-muted-foreground"})})}const rr=nr;function or({className:e,...t}){return n.jsx(Z.Field.Root,{"data-slot":"field",className:i("flex flex-col gap-1.5",e),...t})}function sr({className:e,...t}){return n.jsx(Z.Field.Label,{"data-slot":"field-label",className:i("text-sm font-medium text-foreground",e),...t})}function ar({className:e,size:t="md",...r}){return n.jsx(Z.Field.Control,{"data-slot":"field-control",className:i(U({size:t}),e),...r})}function ir({className:e,...t}){return n.jsx(Z.Field.Description,{"data-slot":"field-description",className:i("text-xs text-muted-foreground",e),...t})}function lr({className:e,...t}){return n.jsx(Z.Field.Error,{"data-slot":"field-error",className:i("text-xs text-danger",e),...t})}const cr=Object.assign(or,{Label:sr,Control:ar,Description:ir,Error:lr});function tt({orientation:e="horizontal",className:t,...r}){return n.jsx(St.Separator,{"data-slot":"separator",orientation:e,className:i("shrink-0 bg-border",e==="vertical"?"h-4 w-px":"h-px w-full",t),...r})}const dr={sm:"h-6 px-2 text-xs [&_svg]:size-3.5",md:"h-8 px-3 text-sm [&_svg]:size-4",lg:"h-10 px-4 text-base [&_svg]:size-5"};function ur({className:e,...t}){return n.jsx(he.Toolbar.Root,{"data-slot":"toolbar",className:i("flex items-center gap-1 border-b border-border bg-card px-2 py-1.5",e),...t})}function fr({className:e,size:t="sm",...r}){return n.jsx(he.Toolbar.Button,{"data-slot":"toolbar-button",className:i("inline-flex items-center justify-center gap-1.5 rounded-md font-medium text-foreground","hover:bg-accent hover:text-accent-foreground","outline-none focus-visible:ring-2 focus-visible:ring-ring","aria-disabled:pointer-events-none aria-disabled:opacity-50",dr[t],e),...r})}function mr({orientation:e="vertical",className:t,...r}){return n.jsx(tt,{"data-slot":"toolbar-separator",orientation:e,className:t,...r})}function gr({className:e,...t}){return n.jsx(he.Toolbar.Group,{"data-slot":"toolbar-group",className:i("flex items-center gap-1",e),...t})}const xr=Object.assign(ur,{Button:fr,Separator:mr,Group:gr});function hr({external:e=!1,className:t,children:r,render:o,ref:s,...a}){return C.useRender({render:o??n.jsx("a",{}),ref:s,props:{"data-slot":"link",rel:e?"noreferrer":void 0,target:e?"_blank":void 0,className:i("group inline-flex items-center gap-1 text-sm font-medium text-primary outline-none","hover:underline focus-visible:ring-2 focus-visible:ring-ring",t),children:n.jsxs(n.Fragment,{children:[r,e&&n.jsx(g.ArrowUpRight,{"aria-hidden":"true",className:"size-3.5 shrink-0 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5"})]}),...a}})}const pr={neutral:"bg-muted-foreground",primary:"bg-primary",success:"bg-success",warning:"bg-warning",danger:"bg-danger",info:"bg-info"},nt=_.cva("shrink-0 rounded-full",{variants:{tone:pr,size:{sm:"size-1",md:"size-1.5",lg:"size-2"}},defaultVariants:{tone:"primary",size:"md"}});function br({className:e,tone:t,size:r,...o}){return n.jsx("span",{"data-slot":"indicator-dot",className:i(nt({tone:t,size:r}),e),...o})}function vr({className:e,...t}){return n.jsx("div",{"data-slot":"description-list",className:i("grid grid-cols-[minmax(7rem,25%)_minmax(3rem,1fr)] gap-x-2 gap-y-2 text-sm",e),...t})}function jr({label:e,className:t,children:r,...o}){return n.jsxs("div",{"data-slot":"description-list-item",className:i("contents",t),...o,children:[n.jsx("span",{className:"text-muted-foreground",children:e}),n.jsx("span",{className:"min-w-0",children:r})]})}const yr=Object.assign(vr,{Item:jr}),ye=f.createContext(null);function wr({collapsible:e=!1,defaultOpen:t=!0,collapseLabel:r="Collapse",expandLabel:o="Expand",className:s,render:a,ref:l,...d}){const[c,u]=f.useState(t),m=C.useRender({render:a??n.jsx("div",{}),ref:l,props:{"data-slot":"card",className:i("rounded-lg border border-border bg-card text-card-foreground",s),...d}});return n.jsx(ye.Provider,{value:{collapsible:e,open:c,toggle:()=>u(h=>!h),collapseLabel:r,expandLabel:o},children:m})}function Cr({className:e,children:t,...r}){const o=f.useContext(ye);return n.jsxs("div",{"data-slot":"card-header",className:i("flex items-center gap-2 p-3",e),...r,children:[o?.collapsible&&n.jsx("button",{type:"button","data-slot":"card-collapse-toggle","aria-expanded":o.open,"aria-label":o.open?o.collapseLabel:o.expandLabel,className:i("flex size-5 shrink-0 items-center justify-center rounded outline-none","text-muted-foreground hover:bg-accent hover:text-accent-foreground","focus-visible:ring-2 focus-visible:ring-ring"),onClick:o.toggle,children:n.jsx(g.ChevronRight,{"aria-hidden":"true",className:i("size-4 transition-transform",o.open&&"rotate-90")})}),n.jsx("div",{className:"flex min-w-0 flex-1 items-center gap-2",children:t})]})}function Nr({className:e,...t}){const r=f.useContext(ye);return r?.collapsible&&!r.open?null:n.jsx("div",{"data-slot":"card-body",className:i("border-t border-border p-3",e),...t})}const Sr=Object.assign(wr,{Header:Cr,Body:Nr}),rt=_.cva("inline-flex w-fit shrink-0 items-center justify-center rounded-sm font-medium whitespace-nowrap",{variants:{size:{sm:"px-1.5 py-0 text-xs",md:"px-2 py-0.5 text-xs",lg:"px-2.5 py-1 text-sm"}},defaultVariants:{size:"md"}});function Tr({className:e,tone:t="primary",variant:r,size:o,render:s,ref:a,...l}){return C.useRender({render:s??n.jsx("span",{}),ref:a,props:{"data-slot":"badge",className:i(rt({size:o}),ee({tone:t,variant:r}),e),...l}})}function kr({className:e,type:t="text",size:r="md",...o}){return n.jsx("input",{type:t,"data-slot":"input",className:i(U({size:r}),"min-w-0",e),...o})}function Pr({className:e,size:t="md",...r}){return n.jsx("textarea",{"data-slot":"textarea",className:i(Dn({size:t}),"min-w-0 resize-y",e),...r})}function Rr({className:e,...t}){return n.jsx(De.Switch.Root,{"data-slot":"switch",className:i("relative inline-flex h-5 w-9 shrink-0 rounded-full border border-input bg-muted transition-colors","data-[checked]:border-primary data-[checked]:bg-primary","outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background","disabled:pointer-events-none disabled:opacity-50",e),...t,children:n.jsx(De.Switch.Thumb,{className:i("pointer-events-none absolute top-1/2 left-0.5 h-4 w-4 -translate-y-1/2 rounded-full bg-background shadow-xs transition-transform","data-[checked]:translate-x-4")})})}const zr={sm:{icon:"left-1.5 size-3",input:"pl-6",inputPad:{withClear:"pr-6",bare:"pr-2"},clear:"right-1 size-3.5",clearIcon:"size-3"},md:{icon:"left-2.5 size-3.5",input:"pl-8",inputPad:{withClear:"pr-8",bare:"pr-3"},clear:"right-2 size-4",clearIcon:"size-3.5"},lg:{icon:"left-3 size-4",input:"pl-10",inputPad:{withClear:"pr-10",bare:"pr-4"},clear:"right-2.5 size-5",clearIcon:"size-4"}};function Dr({className:e,value:t,onClear:r,clearLabel:o="Clear search",size:s="md",...a}){const l=!!r&&!!t,d=zr[s];return n.jsxs("div",{"data-slot":"search-field",className:"relative flex items-center",children:[n.jsx(g.Search,{className:i("pointer-events-none absolute text-muted-foreground",d.icon)}),n.jsx("input",{type:"search",value:t,className:i(U({size:s}),"min-w-0",d.input,l?d.inputPad.withClear:d.inputPad.bare,"[&::-webkit-search-cancel-button]:appearance-none",e),...a}),l&&n.jsx("button",{type:"button",onClick:r,"aria-label":o,className:i("absolute inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground",d.clear),children:n.jsx(g.X,{className:d.clearIcon})})]})}function Lr(e,t=[]){const r=e.length;if(r===0)return[];const o=t.map(c=>({start:Math.min(Math.max(c.start,0),r),end:Math.min(Math.max(c.end,0),r),kind:c.kind})).filter(c=>c.end>c.start).sort((c,u)=>c.start-u.start),s=[];let a=0;for(const c of o)c.start{title}
-{summary}
-{usage}
- -
- #1
- {issueTitle}
- {isCpu ? "2.11 s" : "high · commit 170 ms"}
+
+
+ Analysis results
+ {spec.resultsTitle}
+ {spec.summary}
+
+
+ onStart(type)}
+ >
+
);
}
-function ProfileSnapshotGallery() {
- const [activeSnapshot, setActiveSnapshot] = useState<"cpu" | "react">("cpu");
+const SLIDE_ORDER: ProfileType[] = ["javascript", "react"];
+/*
+ * The strip carries three copies of the slides and runs through the middle
+ * one, so there is always a slide either side of the one on show — no edge of
+ * the row is ever in view — and the move past the last slide lands on a clone
+ * rather than on nothing. Once that move has finished the index drops back to
+ * the matching slide in the middle copy with the transition off; the reader
+ * cannot see the jump, because the cell it jumps to shows the same card in the
+ * same place.
+ */
+const SLIDE_CELLS: ProfileType[] = [...SLIDE_ORDER, ...SLIDE_ORDER, ...SLIDE_ORDER];
+/** Where the middle copy — the one the index runs through — starts. */
+const SLIDE_OFFSET = SLIDE_ORDER.length;
+/** The middle copy is the row the reader is given; the others are its clones. */
+const isRealSlide = (index: number) => index >= SLIDE_OFFSET && index < SLIDE_OFFSET + SLIDE_ORDER.length;
+/* Measured from the start of one move to the start of the next, so the row
+ comes to rest for the remainder after the slide itself has landed. */
+const SLIDE_INTERVAL_MS = 3000;
+/** The track's own transition, in `.carousel-track`; the snap waits it out. */
+const SLIDE_SHIFT_MS = 620;
+
+function ProfileLanding({ onStart }: { onStart: (type: ProfileType) => void }) {
+ const [current, setCurrent] = useState(SLIDE_OFFSET);
+ /* Off for the one frame the loop snaps back on, so the return to the first
+ slide is a cut and not a long slide backwards — and so the slide the
+ class moves off does not fade and shrink out over the one it moves onto,
+ which is the same card in the same place and dips as they cross. */
+ const [animate, setAnimate] = useState(true);
+ /* Two reasons to stop advancing: the reader is on the slide (hover or focus),
+ or they have picked one themselves, which settles the question the
+ rotation was asking. */
+ const [held, setHeld] = useState(false);
+ const [picked, setPicked] = useState(false);
useEffect(() => {
+ if (held || picked) return;
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const interval = window.setInterval(() => {
- setActiveSnapshot((current) => current === "cpu" ? "react" : "cpu");
- }, 2000);
-
+ /* Counts up through the clones rather than wrapping, so every move is
+ forwards; the snap below brings the index home. */
+ setCurrent((index) => index + 1);
+ }, SLIDE_INTERVAL_MS);
return () => window.clearInterval(interval);
- }, []);
+ }, [held, picked]);
+
+ useEffect(() => {
+ if (current < SLIDE_OFFSET + SLIDE_ORDER.length) return;
+ const timer = window.setTimeout(() => {
+ setAnimate(false);
+ setCurrent(SLIDE_OFFSET + (current % SLIDE_ORDER.length));
+ }, SLIDE_SHIFT_MS);
+ return () => window.clearTimeout(timer);
+ }, [current]);
+
+ /* Two frames: the first paints the snapped-back position with the transition
+ off, the second puts the transition back for the move after it. */
+ useEffect(() => {
+ if (animate) return;
+ let second = 0;
+ const first = window.requestAnimationFrame(() => {
+ second = window.requestAnimationFrame(() => setAnimate(true));
+ });
+ return () => {
+ window.cancelAnimationFrame(first);
+ window.cancelAnimationFrame(second);
+ };
+ }, [animate]);
+
+ const show = (index: number) => {
+ setCurrent(SLIDE_OFFSET + index);
+ setPicked(true);
+ };
+
+ /*
+ * The shift is read off the cell itself rather than computed from a width
+ * this file also has to know: the slide width and the gap are the
+ * stylesheet's to set, and they change with the breakpoint. It brings the
+ * cell's centre to the strip's centre, so the slide on show sits in the
+ * middle with a shoulder of the slides either side of it; it is negative
+ * for the first cell, which the strip is happy to be pushed by. No cap,
+ * because the clones mean there is always another slide past the
+ * current one.
+ */
+ const trackRef = useRef(null);
+ const [shift, setShift] = useState(0);
+
+ useEffect(() => {
+ const track = trackRef.current;
+ const viewport = track?.parentElement;
+ if (!track || !viewport) return;
+ const measure = () => {
+ const cell = track.children[current] as HTMLElement | undefined;
+ if (!cell) return;
+ setShift(cell.offsetLeft + cell.offsetWidth / 2 - viewport.clientWidth / 2);
+ };
+ measure();
+ const observer = new ResizeObserver(measure);
+ observer.observe(viewport);
+ return () => observer.disconnect();
+ }, [current]);
return (
-
)}
-
+ #1
+
-
+ {spec.headline}
+ {spec.shape}
+
+ {spec.timeLabel}
-
+ );
+}
+
+function ProfileSlide({
+ type,
+ active,
+ onStart,
+}: {
+ type: ProfileType;
+ active: boolean;
+ onStart: (type: ProfileType) => void;
+}) {
+ const spec = SLIDES[type];
+
+ /*
+ * The click lands on the slide, with the button inside it for the keyboard
+ * and for anything reading the page out: the whole card is the target, and
+ * a stretched overlay on the button cannot be trusted to cover it — the
+ * button's own hover `filter` makes it the containing block.
+ */
+ return (
+
- {time}
- {share}
+
+
+
-
+
+ {spec.bands.map((band) => (
+
+ ))}
+
+
+
-
+
+ {lead.name}
+ {spec.detail.share}
+
+
+ {spec.detail.ms}
+ {spec.detail.secondary ? {spec.detail.secondary} : null}
+
+
+ {spec.detail.lineLabel}
+ {spec.detail.lineIsCode ? {spec.detail.line} : spec.detail.line}
+
{spec.detail.shape}
-
{detail}
+
+
+ {spec.label}
+ {spec.source}
+
+
- (null);
+
+ useEffect(() => {
+ if (!open) return;
+ const onKeyDown = (event: KeyboardEvent) => {
+ if (event.key === "Escape") setOpen(false);
+ };
+ const onPointerDown = (event: PointerEvent) => {
+ if (containerRef.current && !containerRef.current.contains(event.target as Node)) setOpen(false);
+ };
+ window.addEventListener("keydown", onKeyDown);
+ window.addEventListener("pointerdown", onPointerDown);
+ return () => {
+ window.removeEventListener("keydown", onKeyDown);
+ window.removeEventListener("pointerdown", onPointerDown);
+ };
+ }, [open]);
+
+ return (
+
)}
+ {insight && insight.length > 0 && readingOpen ? (
+
+
);
}
@@ -227,6 +525,25 @@ function PromptActionButton({
const MAX_RESULT_CARDS = 3;
+/**
+ * Component rows a React card shows. Eight is what the cards' own culprit floor
+ * admits on a realistic commit, and past it the footnote says as much as another
+ * row would.
+ */
+const MAX_REACT_CARD_ROWS = 8;
+
+/**
+ * The smallest share of a commit worth its own row.
+ *
+ * The cards' own culprit floor (0.5 ms, or 1% of the commit) is set for the
+ * hand-off, where an agent reading the repo can use a small component as a
+ * hint. On the card it produced rows like `VirtualizedList 3 ms / 1% of
+ * commit`: true, measured, and nothing a reader can act on, sitting at the
+ * same visual weight as the 142 ms row above it. Five percent is the point
+ * where fixing the component could plausibly move the commit.
+ */
+const REACT_ROW_MIN_SHARE = 5;
+
function reactIssueRemainingMs(issue: ReactIssue): number {
return Math.max(0, issue.commit.durationMs - issue.components.reduce((total, component) => total + component.selfTimeMs, 0));
}
@@ -238,35 +555,284 @@ interface HotPathRow {
title?: string;
ms?: number;
percentLabel?: string;
+ /** The second of a row's two figures, e.g. self time beside total time. */
+ secondaryLabel?: string;
barPercent?: number;
caption?: string;
+ /**
+ * How this row's time was distributed over separate calls. The single most
+ * actionable line on a task card: one 424 ms call is an algorithm to fix and
+ * 54 calls of 8 ms is a call site to stop hitting, and a total alone renders
+ * both identically.
+ */
+ shape?: string;
+ /**
+ * The named callers that reached this row's frame, outermost first. A
+ * function name alone rarely says what to do about it; the frames that called
+ * it place it in a feature and usually in a loop.
+ */
+ callers?: string;
+ /** Opens Explore on this row's frame inside the task. */
+ onFocus?: () => void;
}
interface HotPathCard {
rows: HotPathRow[];
- footnote?: string;
+ footnotes: string[];
+}
+
+/**
+ * A caller sampled in several bursts is one bottleneck, but its total and its
+ * worst single burst answer different questions: how much work it costs overall,
+ * and how much of that lands in one block a user could feel.
+ */
+function occurrenceLabel(hotspot: Hotspot): string | undefined {
+ if (!hotspot.occurrences || hotspot.occurrences < 2) return undefined;
+ return `${hotspot.occurrences} bursts · longest ${formatMs(hotspot.longestRunMs)}`;
}
function hotspotRows(hotspot: Hotspot): HotPathCard {
+ // The name is measured; only the explanation comes from the agent. Keying the
+ // explanation by function id keeps a row's caption about that row's function.
const ranked = hotspot.functions
- .map((fn, index) => ({ fn, detail: hotspot.summary[index] }))
+ .map((fn) => ({ fn, detail: hotspot.evidence?.[fn.id] }))
.sort((a, b) => b.fn.selfTimeMs - a.fn.selfTimeMs);
const shown = ranked.slice(0, MAX_RESULT_CARDS);
const rows: HotPathRow[] = shown.map(({ fn, detail }) => ({
location: fn.location,
+ title: fn.title,
ms: fn.selfTimeMs,
percentLabel: `${Math.round(fn.percentOfGroup)}% of group`,
barPercent: fn.percentOfGroup,
caption: detail,
}));
- const attributedMs = ranked.reduce((sum, { fn }) => sum + fn.selfTimeMs, 0);
- const leftoverMs = hotspot.combinedTimeMs - attributedMs;
- const footnote = leftoverMs >= 1
- ? `+ ~${formatMs(leftoverMs)} other time not attributed to a named function`
- : undefined;
+ // Only the top rows are published, so the group's own named total has to come
+ // from the server; subtracting the shown rows alone reported measured functions
+ // as unattributed time.
+ const shownMs = shown.reduce((sum, { fn }) => sum + fn.selfTimeMs, 0);
+ const namedMs = hotspot.namedTimeMs ?? ranked.reduce((sum, { fn }) => sum + fn.selfTimeMs, 0);
+ const unlistedCount = (hotspot.namedFunctionCount ?? ranked.length) - shown.length;
+ const unlistedMs = Math.max(0, namedMs - shownMs);
+ const unnamedMs = Math.max(0, hotspot.combinedTimeMs - namedMs);
+
+ const footnotes: string[] = [];
+ if (unlistedCount > 0 && unlistedMs >= 1) {
+ footnotes.push(`+ ~${formatMs(unlistedMs)} across ${unlistedCount} further measured function${unlistedCount === 1 ? "" : "s"}`);
+ }
+ // The naming threshold scales with the profile's sampling interval, so it has
+ // to be read off the group rather than restated as the group-ranking constant.
+ if (unnamedMs >= 1) {
+ const cutoff = hotspot.minFunctionTimeMs ?? MIN_HOTSPOT_TIME_MS;
+ footnotes.push(`+ ~${formatMs(unnamedMs)} spread thinly across functions under ${formatMs(cutoff)} each`);
+ }
+
+ return { rows, footnotes };
+}
+
+/**
+ * A card's "Main highlights": the heaviest named work inside the parent's
+ * subtree, each with both of its times. Inclusive time is what ranks them —
+ * self time alone cannot say that a 240 ms helper sits under this parent.
+ */
+function cardRows(card: ProfileCard): HotPathCard {
+ const locations = profileCardLocations(card);
+ const rows: HotPathRow[] = card.highlights.map((highlight) => ({
+ location: locations.shown(highlight.name, highlight.location),
+ title: highlight.name,
+ ms: highlight.totalMs,
+ secondaryLabel: `${formatMs(highlight.selfMs)} self`,
+ percentLabel: card.totalMs > 0 ? `${Math.round((highlight.totalMs / card.totalMs) * 100)}% of parent` : undefined,
+ barPercent: card.totalMs > 0 ? (highlight.totalMs / card.totalMs) * 100 : 0,
+ }));
+
+ const footnotes: string[] = [];
+ footnotes.push(
+ card.selfShape === "longTail"
+ ? `${formatMs(card.selfMs)} is spread across calls too small to list`
+ : `${formatMs(card.selfMs)} in its own body`
+ );
+ if (card.subtreeFunctionCount > card.highlights.length) {
+ footnotes.push(`${card.subtreeFunctionCount} functions ran under this parent in total`);
+ }
+ if (card.confidence === "low") {
+ footnotes.push("few samples landed here — treat these figures as a hint");
+ }
+ return { rows, footnotes };
+}
+
+/**
+ * A task card's content is a drawing of how the block divides between the
+ * features it entered, plus the footnotes that qualify the measurement.
+ *
+ * It was a list of culprit rows until the chart replaced it, and before that a
+ * list of boundary frames with inclusive-time bars. Both were readings of a
+ * card as eight independent rows, which is the thing the chart is not: the rows
+ * shared no whole, so a reader could not see that the eight heaviest culprits
+ * of a 3227 ms task account for 30% of it, nor what the other 70% was.
+ *
+ * Dividing by boundary frame instead is what makes the whole say something. See
+ * `contribution.ts` for why both levels of the chart are honest partitions, and
+ * why the residuals are slices rather than footnotes — which is also why the
+ * footnotes below no longer describe the remainder.
+ */
+function taskCardFootnotes(card: TaskCard): string[] {
+ const footnotes: string[] = [];
+ if (card.confidence === "low") footnotes.push("few samples landed in this task — treat these figures as a hint");
+ return footnotes;
+}
+
+/**
+ * A task that entered no frame of its own — a bundle whose identifiers are all
+ * mangled, or work that really was all framework — has no features to divide
+ * into, so the chart could only say "none of this was your code" and offer
+ * nothing to open. Its culprits can still name functions, so the card falls
+ * back to the rows they used to be drawn as.
+ */
+function taskFallbackRows(card: TaskCard, onFocus: (nodeId: string) => void): HotPathRow[] {
+ const locations = taskCardLocations(card);
+ return card.culprits.slice(0, CHART_SLICES).map((culprit) => ({
+ location: locations.shown(culprit.name, culprit.location),
+ title: culprit.name,
+ ms: culprit.selfMs,
+ // Only when the two differ. A leaf burns all of its own time, so printing
+ // `1.57 s` beside `1.57 s with callees` says the same thing twice.
+ secondaryLabel: culprit.totalMs - culprit.selfMs >= 1 ? `${formatMs(culprit.totalMs)} with callees` : undefined,
+ percentLabel: card.durationMs > 0 ? `${Math.round((culprit.selfMs / card.durationMs) * 100)}% of task` : undefined,
+ barPercent: card.durationMs > 0 ? (culprit.selfMs / card.durationMs) * 100 : 0,
+ shape: culprit.shapeText,
+ callers: culprit.callers.length > 0 ? culprit.callers.join(" › ") : undefined,
+ onFocus: () => onFocus(culprit.nodeId),
+ }));
+}
+
+/* A task card's heading used to carry a third line naming the rest of the
+ boundary frames ("also keysChanged 306 ms · …"). The breakdown beneath the
+ chart already names every one of them with its share, so the line repeated
+ the evidence in a form you could not click. The heading now stops at the
+ shape. */
+
+/**
+ * Which drawing the cards below are read as. One control for both families: a
+ * reader who prefers one reading of a part-of-whole prefers it on a commit for
+ * the same reason they prefer it on a task.
+ */
+/*
+ * Missing render reasons are a property of the recording, not of any one
+ * commit, so this is said once for the whole run. It is a light rather than a
+ * paragraph: most recordings have nothing to say here, and the sentence only
+ * matters to someone who noticed a card saying "render reason not recorded"
+ * and went looking for why.
+ */
+function CausesNotice() {
+ const [open, setOpen] = useState(false);
+ const containerRef = useRef
+
+ Find the code that makes your app feel slow
+Turn profiler traces into a focused list of bottlenecks
+
+
+ setHeld(true)}
+ onMouseLeave={() => setHeld(false)}
+ onFocus={() => setHeld(true)}
+ onBlur={() => setHeld(false)}
+ >
+ {/* Every slide stays in the track, so its height is the tallest of
+ them and the card does not resize under the reader mid-swap. */}
+ {/* The current slide centred, with the slides either side of it
+ shrunk and held back to a fraction of their opacity: the strip
+ reads as a row that moves rather than a card that is replaced. */}
+
+
+ {SLIDE_CELLS.map((type, index) => (
+
+ show(index % SLIDE_ORDER.length)}
+ >
+
+ ))}
+
+ {SLIDE_ORDER.map((type, index) => (
+
+
+ {open ? (
+
+ );
+}
+
+function ChartSwitch({
+ kind,
+ onChange,
+}: {
+ kind: ContributionChartKind;
+ onChange: (kind: ContributionChartKind) => void;
+}) {
+ return (
+
+ Render reasons not recorded
+
+ ) : null}
+ + This recording does not say why each component rendered. Re-record with React DevTools’ + “Record why each component rendered” setting on to get render causes. +
+
+ {(["bar", "treemap"] as const).map((option) => (
+
+ ))}
+
+ );
+}
+
+/** The second line of a card: how often this frame ran. */
+function cardSubtitle(card: ProfileCard, callCountIsExact: boolean): string | undefined {
+ const count = callCountIsExact ? card.invocations ?? card.callSites : card.callSites;
+ if (count <= 1) return undefined;
+ return callCountIsExact ? `called ${count} times` : `${count} call sites`;
+}
- return { rows, footnote };
+/**
+ * A React card's rows: the components that burned the commit's own time.
+ *
+ * The fallback the chart leaves behind. A commit whose components are all under
+ * the culprit floor — three hundred fibers at 0.1 ms each on a 20 ms commit —
+ * divides into nothing but residuals, so the chart could only say that none of
+ * it was any one component's fault. Its heaviest component is still a name, and
+ * these rows are where it is printed.
+ *
+ * `percentOfCommit` rather than a share of the summed self time, because the
+ * commit's duration is the figure the heading claims and the one a reader can
+ * check against the recording.
+ */
+function reactCardRows(card: ReactCard): HotPathCard {
+ // The top culprit is always shown, however small: a card exists because its
+ // commit went over budget, and a card with no rows states the problem while
+ // withholding the only name it has for it.
+ const worthARow = card.culprits.filter((culprit) => culprit.percentOfCommit >= REACT_ROW_MIN_SHARE);
+ const shown = (worthARow.length > 0 ? worthARow : card.culprits.slice(0, 1)).slice(0, MAX_REACT_CARD_ROWS);
+ const rows: HotPathRow[] = shown.map((culprit) => ({
+ location: culprit.sourceHint ?? undefined,
+ title: culprit.component,
+ ms: culprit.selfMs,
+ percentLabel: `${Math.round(culprit.percentOfCommit)}% of commit`,
+ barPercent: culprit.percentOfCommit,
+ shape: reactCulpritShape(culprit),
+ callers: culprit.path.length > 1 ? culprit.path.slice(0, -1).join(" › ") : undefined,
+ }));
+ /* No footnotes. The three this card used to carry — the sub-floor tail, the
+ reconciler residual, and the effect durations — were each a sentence of
+ arithmetic about time no component is responsible for, which is time the
+ reader cannot act on. They are still in the record, and still in the
+ hand-off, where an agent that can read the repo can use them. */
+ return { rows, footnotes: [] };
}
function reactIssueRows(issue: ReactIssue): HotPathCard {
@@ -279,44 +845,99 @@ function reactIssueRows(issue: ReactIssue): HotPathCard {
barPercent: component.percentOfCommit,
caption: component.evidence.trim() || undefined,
})),
- footnote: remainingMs >= 1
- ? `+ ~${formatMs(remainingMs)} other commit work not represented by these findings`
- : undefined,
+ footnotes: remainingMs >= 1
+ ? [`+ ~${formatMs(remainingMs)} other commit work not represented by these findings`]
+ : [],
};
}
function AnalysisResultCard({
rank,
title,
+ shape,
+ subtitle,
timeLabel,
+ insight,
+ onExplain,
+ explainDisabledReason,
+ explaining,
+ insightError,
+ chart,
rows,
- footnote,
+ footnotes,
loading,
error,
copied,
busy,
onCopy,
+ onExplore,
}: {
rank: number;
title: string;
+ /**
+ * The second heading row: the measured shape of the cost, where the card has
+ * one. Under evaluation beside `title`, so it is optional and the legacy
+ * engines below simply do not pass it.
+ */
+ shape?: string;
+ subtitle?: string;
timeLabel: string;
+ /**
+ * The model's reading of this finding, once asked for. Labelled on the
+ * card because it is the only thing there that was not measured, and placed
+ * below the rows: the reading is the conclusion the evidence above leads to,
+ * and it lands next to the button that asked for it.
+ */
+ insight?: string[];
+ /** Asks a model to read this task. Absent where no inference is on offer. */
+ onExplain?: () => void;
+ /**
+ * Why the reading cannot be asked for yet, which is only ever a missing
+ * model. The button stays on the card and carries this as its tooltip: the
+ * reading is the one thing here a model is needed for, so the card is where
+ * that is worth saying.
+ */
+ explainDisabledReason?: string;
+ explaining?: boolean;
+ insightError?: string;
+ /**
+ * The evidence as a drawing rather than as rows. Where a finding divides into
+ * parts of a whole it is the better reading, and where it does not — a React
+ * commit, a hotspot group — the card still takes rows.
+ */
+ chart?: ReactNode;
rows: HotPathRow[];
- footnote?: string;
+ footnotes: string[];
loading: boolean;
error?: string;
copied: boolean;
busy: boolean;
onCopy: () => void;
+ onExplore?: () => void;
}) {
+ /* The reading opens with the card that produced it; hiding it is for getting
+ back to the measured evidence without losing the reading. */
+ const [readingOpen, setReadingOpen] = useState(true);
+ const hasReading = Boolean(insight && insight.length > 0);
return (
#{rank}
+ {chart}
+ {/* The footnotes qualify whatever evidence the card carried, so they
+ belong to the chart as much as to the rows. */}
+ {chart && rows.length === 0 && footnotes.length > 0 ? (
+
{title}
+ {shape ? {shape} : null}
+ {subtitle ? {subtitle} : null}
{timeLabel}
+ {footnotes.map((footnote) =>
+ ) : null}
{rows.length > 0 && (
{footnote}
)} +
{rows.map((row, rowIndex) => (
@@ -324,14 +945,25 @@ function AnalysisResultCard({
{row.location ? (
))}
- {footnote ?
file
- {row.location}
+ {shortLocationLabel(row.location)}
+
+ via + {row.callers}
) : null} - {row.title ? {row.title} : null} {row.ms !== undefined && ( <>
{formatMs(row.ms)}
+ {row.secondaryLabel ? {row.secondaryLabel} : null}
{row.percentLabel ? {row.percentLabel} : null}
@@ -339,21 +971,67 @@ function AnalysisResultCard({
)}
+ {row.shape ? {row.shape}
: null} {row.caption ?{row.caption}
: null}{footnote}
: null} + {footnotes.map((footnote) =>{footnote}
)}
+ AI reading
+
+ ) : null}
+ {insightError ? - {insight.map((finding) =>
- {finding} )}
{insightError}
: null}
{error ? ([]);
const [profileType, setProfileType] = useState("javascript");
const [showWelcome, setShowWelcome] = useState(true);
+ /* A slide is a choice of profile, not just a way past the landing page: it
+ leaves the reader on the upload step for the kind they clicked. */
+ const startWith = (type: ProfileType) => {
+ setProfileType(type);
+ setShowWelcome(false);
+ };
const [files, setFiles] = useState>>({});
const [modelStatus, setModelStatus] = useState(null);
const [selectedProvider, setSelectedProvider] = useState("");
@@ -506,7 +1169,9 @@ function InspectorApp() {
};
useEffect(() => {
void refreshHistory();
- fetch("/api/analysis-settings", { cache: "no-store" }).then(r => r.json()).then(data => setAutoSave(data.autoSave !== false)).catch(() => undefined);
+ fetch("/api/analysis-settings", { cache: "no-store" }).then(r => r.json()).then(data => {
+ setAutoSave(data.autoSave !== false);
+ }).catch(() => undefined);
}, []);
useEffect(() => {
@@ -536,8 +1201,12 @@ function InspectorApp() {
const [analyzedType, setAnalyzedType] = useState("javascript");
const [totalMs, setTotalMs] = useState(0);
const [hotspots, setHotspots] = useState([]);
+ const [taskCards, setTaskCards] = useState(null);
+ const [cards, setCards] = useState([]);
+ const [callCountIsExact, setCallCountIsExact] = useState(false);
const [frameBudget, setFrameBudget] = useState("16");
const [appliedBudget, setAppliedBudget] = useState(16);
+ const [reactCards, setReactCards] = useState(null);
const [reactIssues, setReactIssues] = useState([]);
const [reactSummary, setReactSummary] = useState(null);
const [prompts, setPrompts] = useState>({});
@@ -546,16 +1215,25 @@ function InspectorApp() {
const [promptLoadingId, setPromptLoadingId] = useState(null);
const [promptErrors, setPromptErrors] = useState>({});
const [copiedId, setCopiedId] = useState(null);
+ const [explainingId, setExplainingId] = useState(null);
+ const [insightErrors, setInsightErrors] = useState>({});
const [saved, setSaved] = useState(false);
const [isSample, setIsSample] = useState(false);
+ // Two readings of the same slices are on offer while we decide which one a
+ // card keeps; the switch is per page rather than per card so the comparison
+ // is between pages of cards rather than between neighbours.
+ const [chartKind, setChartKind] = useState("bar");
const updateFile = (kind: UploadKind, file?: File) => {
setFiles((current) => ({ ...current, [kind]: file }));
};
const validBudget = frameBudget.trim() !== "" && Number.isFinite(Number(frameBudget)) && Number(frameBudget) > 0;
+ // A model is not part of this: every card an analysis produces is measured,
+ // and the model is only ever asked to read one afterwards.
const isReady = Boolean(
- (profileType === "javascript" ? files.cpu : files.reactProfile) && modelStatus?.configured && (profileType !== "react" || validBudget),
+ (profileType === "javascript" ? files.cpu : files.reactProfile)
+ && (profileType !== "react" || validBudget),
);
const handleAnalyze = async () => {
@@ -565,11 +1243,6 @@ function InspectorApp() {
setErrorDetail(null);
return;
}
- if (!modelStatus?.configured) {
- setError("Choose a provider and model in Analysis settings first.");
- setErrorDetail(null);
- return;
- }
if (profileType === "react" && !validBudget) {
setError("Enter a finite positive commit budget in milliseconds.");
return;
@@ -589,9 +1262,13 @@ function InspectorApp() {
analysisId?: string | null; saved?: boolean;
totalMs?: number;
hotspots?: Hotspot[];
+ taskCards?: TaskCardSet;
+ cards?: ProfileCard[];
+ callCountIsExact?: boolean;
usage?: TokenUsage;
model?: AnalysisModel;
summary?: ReactSummary;
+ reactCards?: ReactCardSet;
issues?: ReactIssue[];
noIssue?: boolean;
frameBudgetMs?: number;
@@ -613,19 +1290,24 @@ function InspectorApp() {
setIsSample(false);
if (profileType === "react") {
- if (!Array.isArray(data.issues) || data.noIssue !== (data.issues.length === 0)) {
- setError("The server did not return a valid React issue report. Check the dev server logs.");
+ // The measured engine returns cards; the analyzer engine returns the
+ // issue list it always did. Either is valid, neither is optional.
+ if (!data.reactCards && (!Array.isArray(data.issues) || data.noIssue !== (data.issues.length === 0))) {
+ setError("The server did not return a valid React report. Check the dev server logs.");
setPhase("upload");
return;
}
- if (data.issues.length > 0 && !data.analysisId) {
+ if ((data.reactCards?.cards.length || data.issues?.length) && !data.analysisId) {
setError("The server did not return an analysis id. Check the dev server logs.");
setPhase("upload");
return;
}
setAnalysisId(data.analysisId ?? null);
setHotspots([]);
- setReactIssues(data.issues);
+ setTaskCards(null);
+ setCards([]);
+ setReactCards(data.reactCards ?? null);
+ setReactIssues(data.issues ?? []);
setAppliedBudget(data.frameBudgetMs ?? Number(frameBudget));
setReactSummary(data.summary ?? null);
setTotalMs(data.summary?.totalCommitRenderDurationMs ?? 0);
@@ -638,6 +1320,9 @@ function InspectorApp() {
analysisId: data.analysisId ?? "",
totalMs: data.totalMs ?? 0,
hotspots: data.hotspots ?? [],
+ taskCards: data.taskCards,
+ cards: data.cards ?? [],
+ callCountIsExact: data.callCountIsExact === true,
usage: data.usage,
model: data.model,
};
@@ -649,7 +1334,11 @@ function InspectorApp() {
setAnalysisId(result.analysisId);
setTotalMs(result.totalMs);
setHotspots(result.hotspots);
+ setTaskCards(result.taskCards ?? null);
+ setCards(result.cards ?? []);
+ setCallCountIsExact(result.callCountIsExact === true);
setReactSummary(null);
+ setReactCards(null);
setPhase("results");
void refreshHistory();
} catch (err) {
@@ -679,6 +1368,132 @@ function InspectorApp() {
setTimeout(() => setCopiedId((current) => (current === id ? null : current)), 2000);
};
+ /**
+ * Open one card's subtree in its own tab. The card already carries everything
+ * the view needs, so this is a storage write and a `window.open` — no new
+ * endpoint, and nothing extra kept on the server.
+ */
+ const exploreCard = (card: ProfileCard) => {
+ if (!analysisId) return;
+ const href = storeCardForExplore({
+ analysisId,
+ totalMs,
+ callCountIsExact,
+ card,
+ });
+ window.open(href, "_blank", "noopener");
+ };
+
+ /**
+ * Open one task in its own tab. With a frame id the view opens focused on
+ * that frame; without one it opens on the whole task, which is what a click
+ * on the card header means.
+ */
+ const exploreTask = (card: TaskCard, focusNodeId?: string) => {
+ if (!analysisId) return;
+ window.open(taskExploreHref(analysisId, card.taskIndex, focusNodeId), "_blank", "noopener");
+ };
+
+ /**
+ * Open one React commit in its own tab.
+ *
+ * The recording is fetched there rather than handed over, like a task: the
+ * commit trees live on the analysis record and the drill-down opens on the
+ * whole strip, not on this commit alone.
+ */
+ const exploreReactCommit = (card: ReactCard) => {
+ if (!analysisId) return;
+ window.open(reactExploreHref(analysisId, card.rootId, card.commitIndex), "_blank", "noopener");
+ };
+
+ /**
+ * Ask a model to read one React commit.
+ *
+ * The same button, the same storage and the same discard of a stale hand-off
+ * as `explainTask` below. What the model is shown differs — a commit has no
+ * timeline and no call tree, only the components and the recorded reasons —
+ * and `react-insight.ts` is where that is said.
+ */
+ const explainReactCard = async (card: ReactCard) => {
+ if (!analysisId || explainingId) return;
+ setExplainingId(card.id);
+ setInsightErrors((current) => {
+ if (!(card.id in current)) return current;
+ const next = { ...current };
+ delete next[card.id];
+ return next;
+ });
+ try {
+ const response = await fetch("/api/react-insight", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ analysisId, cardId: card.id }),
+ });
+ const data = (await response.json().catch(() => ({}))) as { error?: string; insight?: ReactCard["insight"]; usage?: TokenUsage; model?: AnalysisModel };
+ if (!response.ok || !data.insight) throw new Error(data.error ?? `Could not read this commit (${response.status}).`);
+ const insight = data.insight;
+ setReactCards((current) => current && ({
+ ...current,
+ cards: current.cards.map((entry) => (entry.id === card.id ? { ...entry, insight } : entry)),
+ }));
+ setPrompts((current) => {
+ if (!(card.id in current)) return current;
+ const next = { ...current };
+ delete next[card.id];
+ return next;
+ });
+ if (data.usage) setAnalyzerUsage(data.usage);
+ if (data.model) setAnalysisModel(data.model);
+ } catch (err) {
+ setInsightErrors((current) => ({ ...current, [card.id]: errorMessageFrom(err) }));
+ } finally {
+ setExplainingId((current) => (current === card.id ? null : current));
+ }
+ };
+
+ /**
+ * Ask a model to read one task. The server stores what comes back on the
+ * analysis, so the card is updated in place rather than re-fetched, and a
+ * hand-off already copied for this task is dropped — the next one carries
+ * the inference the server has just cached against it.
+ */
+ const explainTask = async (card: TaskCard) => {
+ if (!analysisId || explainingId) return;
+ setExplainingId(card.id);
+ setInsightErrors((current) => {
+ if (!(card.id in current)) return current;
+ const next = { ...current };
+ delete next[card.id];
+ return next;
+ });
+ try {
+ const response = await fetch("/api/task-insight", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ analysisId, cardId: card.id }),
+ });
+ const data = (await response.json().catch(() => ({}))) as { error?: string; insight?: TaskCard["insight"]; usage?: TokenUsage; model?: AnalysisModel };
+ if (!response.ok || !data.insight) throw new Error(data.error ?? `Could not read this task (${response.status}).`);
+ const insight = data.insight;
+ setTaskCards((current) => current && ({
+ ...current,
+ cards: current.cards.map((entry) => (entry.id === card.id ? { ...entry, insight } : entry)),
+ }));
+ setPrompts((current) => {
+ if (!(card.id in current)) return current;
+ const next = { ...current };
+ delete next[card.id];
+ return next;
+ });
+ if (data.usage) setAnalyzerUsage(data.usage);
+ if (data.model) setAnalysisModel(data.model);
+ } catch (err) {
+ setInsightErrors((current) => ({ ...current, [card.id]: errorMessageFrom(err) }));
+ } finally {
+ setExplainingId((current) => (current === card.id ? null : current));
+ }
+ };
+
const copyHandoff = async (id: string) => {
if (!analysisId || promptLoadingId) return;
setPromptErrors((current) => {
@@ -724,7 +1539,11 @@ function InspectorApp() {
setAnalysisId(null);
setAnalyzedType("javascript");
setHotspots([]);
+ setTaskCards(null);
+ setCards([]);
+ setCallCountIsExact(false);
setReactSummary(null);
+ setReactCards(null);
setReactIssues([]);
setPrompts({});
setAnalyzerUsage(null);
@@ -732,6 +1551,8 @@ function InspectorApp() {
setPromptLoadingId(null);
setPromptErrors({});
setCopiedId(null);
+ setExplainingId(null);
+ setInsightErrors({});
setSaved(false);
setIsSample(false);
};
@@ -746,7 +1567,8 @@ function InspectorApp() {
if (!response.ok) return;
const { analysis } = await response.json() as { analysis: SavedAnalysis };
setAnalysisId(analysis.id); setAnalyzedType(analysis.profileType === "react" ? "react" : "javascript");
- setTotalMs(analysis.totalMs); setHotspots(analysis.hotspots ?? []); setReactIssues(analysis.reactIssues ?? []);
+ setTotalMs(analysis.totalMs); setHotspots(analysis.hotspots ?? []); setTaskCards(analysis.taskCards ?? null); setCards(analysis.cards ?? []);
+ setCallCountIsExact(analysis.callCountIsExact === true); setReactCards(analysis.reactCards ?? null); setReactIssues(analysis.reactIssues ?? []);
setPrompts(analysis.prompts ?? {}); setAnalyzerUsage(analysis.usage ?? null); setAnalysisModel(analysis.model ?? null);
setReactSummary(null); setSaved(true); setPhase("results"); setHistoryOpen(false);
setIsSample(false);
@@ -872,7 +1694,8 @@ function InspectorApp() {
if (!response.ok) return;
const { analysis } = await response.json() as { analysis: SavedAnalysis };
setAnalysisId(analysis.id); setAnalyzedType("javascript"); setTotalMs(analysis.totalMs);
- setHotspots(analysis.hotspots); setReactIssues([]); setReactSummary(null);
+ setHotspots(analysis.hotspots); setTaskCards(analysis.taskCards ?? null); setCards(analysis.cards ?? []);
+ setCallCountIsExact(analysis.callCountIsExact === true); setReactCards(null); setReactIssues([]); setReactSummary(null);
setPrompts({}); setAnalyzerUsage(analysis.usage); setAnalysisModel(analysis.model ?? null); setSaved(true); setIsSample(true); setPhase("results");
};
const loadReactSample = async () => {
@@ -882,11 +1705,10 @@ function InspectorApp() {
if (!response.ok) return;
const { analysis, summary } = await response.json() as { analysis: SavedAnalysis; summary: ReactSummary & { frameBudgetMs: number } };
setAnalysisId(analysis.id); setAnalyzedType("react"); setTotalMs(analysis.totalMs);
- setHotspots([]); setReactIssues(analysis.reactIssues); setReactSummary(summary); setAppliedBudget(summary.frameBudgetMs);
+ setHotspots([]); setTaskCards(null); setCards([]); setReactCards(analysis.reactCards ?? null); setReactIssues(analysis.reactIssues); setReactSummary(summary); setAppliedBudget(summary.frameBudgetMs);
setPrompts({}); setAnalyzerUsage(analysis.usage); setAnalysisModel(analysis.model ?? null); setSaved(true); setIsSample(true); setPhase("results");
};
- const reactIssueCards = reactIssues.slice(0, MAX_RESULT_CARDS);
const analyzing = phase === "analyzing";
return (
@@ -1052,25 +1874,7 @@ function InspectorApp() {
{(phase === "upload" || phase === "analyzing") && (
<>
{showWelcome ? (
- <>
-
@@ -1115,17 +1919,10 @@ function InspectorApp() {
disabled={analyzing}
aria-invalid={!validBudget} aria-describedby="react-budget-help"
onChange={event => setFrameBudget(event.target.value)} />
- {error}
: null} -
-
@@ -442,29 +1120,8 @@ function UploadPane({
);
}
-const ROZENITE_THEME_KEY = "@rozenite/ui:theme";
-
export default function Home() {
- const [themeReady, setThemeReady] = useState(false);
-
- useEffect(() => {
- try {
- const stored = localStorage.getItem(ROZENITE_THEME_KEY);
- if (stored !== "light" && stored !== "dark") {
- localStorage.setItem(ROZENITE_THEME_KEY, "dark");
- }
- } catch {
- // Theme still applies for this session even if storage is unavailable.
- }
- const frame = requestAnimationFrame(() => setThemeReady(true));
- return () => cancelAnimationFrame(frame);
- }, []);
-
- if (!themeReady) {
- return ;
- }
-
- return
+
+ {hasReading ? (
+
+ ) : onExplain ? (
+ // The tooltip sits on the wrapper, not the button: a disabled
+ // button takes `pointer-events: none`, so its own `title` never
+ // surfaces.
+
+
+
+ ) : null}
+
+
+ {onExplore ? (
+
+ ) : null}
+
-
-
+
-
- Find the code that makes your app feel slow
-Turn profiler traces into a focused list of bottlenecks
-
-
-
-
-
- Defaults to 16 ms. Use a lower budget, such as 8.33 ms, for a higher refresh-rate target.
+Defaults to 16 ms.
- {modelStatus === null ? "Loading model…" : modelStatus.configured
- ? `Model: ${modelStatus.provider} / ${modelStatus.model}`
- : modelStatus.error || "Choose a model in Analysis settings."}
-
-Change the provider or model from Analysis settings.
-
{error && (
@@ -1143,7 +1940,6 @@ function InspectorApp() {
)}
-
-
Your profile stays on this device and is analyzed via your configured model.