Drops the React `<Profiler>` approach (no-op because Vite is currently
serving the production React build) in favor of an externally-observable
measurement stack: rAF frame intervals, `PerformanceObserver({entryTypes:
['longtask']})`, and a `MutationObserver` on the live streaming message.
Adds a synthetic stream driver — `window.__PERF_DRIVE__.stream({...})` —
that pushes tokens through the live `$messages` atom at a controlled rate,
so the assistant-ui runtime, incremental repository, and Streamdown
markdown pipeline see the same workload they'd see during a real LLM
stream, without the LLM cost.
The driver lives in `src/app/chat/perf-probe.tsx`; `main.tsx` side-imports
it under `import.meta.env.MODE !== 'production'` so it tree-shakes out of
prod builds. (Using `MODE` rather than `DEV` because our Vite setup
currently reports `DEV=false` even under `vite dev` — see the dev-build
note in `profile-typing-lag.md`.)
Scripts:
- measure-synthetic-stream.mjs drive synthetic + record frame/longtask/mutation
- profile-synth-stream.mjs CPU profile + top self-time during synthetic
- measure-real-stream.mjs same harness, real LLM stream
- profile-real-stream.mjs CPU profile bracketing the real stream window
- eval.mjs / reload.mjs small CDP helpers
A real-LLM measurement on Cloud Shadows (gpt-4o-mini, 39 s window) showed
12 longtasks in the same 75-127 ms range the synthetic predicted, so the
synthetic is a faithful proxy.
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import './styles.css'
|
|
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
|
import { StrictMode } from 'react'
|
|
import { createRoot } from 'react-dom/client'
|
|
import { HashRouter } from 'react-router-dom'
|
|
|
|
import App from './app'
|
|
import { HapticsProvider } from './components/haptics-provider'
|
|
import { installClipboardShim } from './lib/clipboard'
|
|
import { ThemeProvider } from './themes/context'
|
|
|
|
installClipboardShim()
|
|
|
|
// Dev-only: install __PERF_DRIVE__ + __PERF_PROBE__ on window so the
|
|
// scripts/ harnesses can drive a synthetic stream + record render cost.
|
|
// Tree-shaken out of production builds. (Uses MODE rather than DEV because
|
|
// our Vite setup currently bundles with PROD=true even in `vite dev`; see
|
|
// scripts/dev-no-hmr.mjs for the surrounding workarounds.)
|
|
if (import.meta.env.MODE !== 'production') {
|
|
import('./app/chat/perf-probe')
|
|
}
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
refetchOnWindowFocus: false,
|
|
staleTime: 60_000
|
|
}
|
|
}
|
|
})
|
|
|
|
createRoot(document.getElementById('root')!).render(
|
|
<StrictMode>
|
|
<QueryClientProvider client={queryClient}>
|
|
<ThemeProvider>
|
|
<HapticsProvider>
|
|
<HashRouter>
|
|
<App />
|
|
</HashRouter>
|
|
</HapticsProvider>
|
|
</ThemeProvider>
|
|
</QueryClientProvider>
|
|
</StrictMode>
|
|
)
|