Import AITURK IDE 1.0.0-beta.1 from Hermes 63279301; preserve MIT license

apps/desktop/scripts/diag-switch-trace.mjs

@@ -0,0 +1,74 @@
+// What happens during a SLOW session switch? Click a heavy row with tracing
+// on, dump the style/layout/script split plus top callsites.
+import { attach } from './perf/lib/launch.mjs'
+import { sleep } from './perf/lib/cdp.mjs'
+
+const { cdp, teardown } = await attach({ port: 9222 })
+
+const CLICK_HEAVIEST = `
+  (() => {
+    const rows = [...document.querySelectorAll('[data-slot="row-button"]')].filter(el => el.offsetParent)
+    if (rows.length < 2) return 'need rows'
+    // Alternate between the first two rows so every run actually switches.
+    const current = location.hash
+    const target = rows.find(r => !r.getAttribute('data-active')) ?? rows[1]
+    target.click()
+    return 'clicked: ' + (target.textContent ?? '').slice(0, 40)
+  })()
+`
+
+const events = []
+let complete = false
+cdp.on('Tracing.dataCollected', p => events.push(...(p.value ?? [])))
+cdp.on('Tracing.tracingComplete', () => {
+  complete = true
+})
+
+try {
+  await cdp.send('Runtime.enable')
+
+  await cdp.send('Tracing.start', {
+    transferMode: 'ReportEvents',
+    traceConfig: { includedCategories: ['devtools.timeline'] }
+  })
+
+  console.log(await cdp.eval(CLICK_HEAVIEST))
+  await sleep(2500)
+  console.log(await cdp.eval(CLICK_HEAVIEST))
+  await sleep(2500)
+
+  await cdp.send('Tracing.end')
+
+  for (let w = 0; !complete && w < 10000; w += 200) {
+    await sleep(200)
+  }
+
+  const totals = new Map()
+  const byFn = new Map()
+
+  for (const e of events) {
+    if (e.ph !== 'X' || typeof e.dur !== 'number') {
+      continue
+    }
+
+    totals.set(e.name, (totals.get(e.name) ?? 0) + e.dur / 1000)
+
+    if (e.name === 'FunctionCall') {
+      const d = e.args?.data ?? {}
+      const key = `${d.functionName || '(anon)'} @ ${(d.url || '?').split('/').pop()}:${d.lineNumber ?? '?'}`
+      byFn.set(key, (byFn.get(key) ?? 0) + e.dur / 1000)
+    }
+  }
+
+  const style = totals.get('UpdateLayoutTree') ?? 0
+  const layout = totals.get('Layout') ?? 0
+  const script = (totals.get('FunctionCall') ?? 0) + (totals.get('EvaluateScript') ?? 0) + (totals.get('TimerFire') ?? 0)
+  console.log(`\nVERDICT over 2 switches: style=${style.toFixed(0)}ms layout=${layout.toFixed(0)}ms script=${script.toFixed(0)}ms paint=${(totals.get('Paint') ?? 0).toFixed(0)}ms`)
+  console.log('\nTOP CALLSITES:')
+
+  for (const [name, ms] of [...byFn.entries()].sort((a, b) => b[1] - a[1]).slice(0, 12)) {
+    console.log(`  ${ms.toFixed(1).padStart(8)}  ${name}`)
+  }
+} finally {
+  teardown?.()
+}