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

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

@@ -0,0 +1,217 @@
+// What is the drag actually spending time on?
+//
+// The render counters proved React is no longer the cost (commits 83 -> 12
+// after the $layoutTree fix) yet drag fps stayed ~3 while p95 halved. That
+// pattern says a fixed per-frame floor outside React. This takes a real CDP
+// trace of one sash drag and prints the category split — Recalculate Style,
+// Layout, Paint, Scripting — so the next fix targets the actual cost instead
+// of the next plausible-looking thing.
+//
+//   node scripts/diag-drag-trace.mjs [--port 9222] [--tiles 5]
+
+import { attach } from './perf/lib/launch.mjs'
+import { sleep } from './perf/lib/cdp.mjs'
+
+const arg = (name, fallback) => {
+  const i = process.argv.indexOf(`--${name}`)
+
+  return i === -1 ? fallback : process.argv[i + 1]
+}
+
+const port = Number(arg('port', 9222))
+const TILES = Number(arg('tiles', 5))
+const TURNS = Number(arg('turns', 20))
+
+const setup = `
+  (() => {
+    const hook = window.__HERMES_SESSION_TILES__
+    if (!hook) return 'no-hook'
+    const turn = (sid, i) => ([
+      { id: sid + '-u' + i, role: 'user', timestamp: Date.now(),
+        parts: [{ type: 'text', text: 'Question ' + i }] },
+      { id: sid + '-a' + i, role: 'assistant', timestamp: Date.now(), pending: false,
+        parts: [{ type: 'text', text: '## Finding ' + i + '\\n\\nProse with **bold** and \`code\`.\\n' }] }
+    ])
+    window.__T__ = { ids: [] }
+    for (let n = 1; n <= ${TILES}; n++) {
+      const sid = 'trace-tile-' + n
+      const rid = 'trace-rt-' + n
+      const messages = []
+      for (let i = 0; i < ${TURNS}; i++) messages.push(...turn(sid, i))
+      messages.push({ id: sid + '-stream', role: 'assistant', timestamp: Date.now(), pending: true,
+        parts: [{ type: 'text', text: 'Working.' }] })
+      window.__T__.ids.push({ sid, rid })
+      hook.open(sid, 'center')
+      hook.patch(sid, { runtimeId: rid })
+      hook.publish(rid, {
+        storedSessionId: sid, messages, branch: '', cwd: '', model: '', provider: '',
+        reasoningEffort: '', serviceTier: '', fast: false, yolo: false, personality: '',
+        busy: true, awaitingResponse: false, streamId: sid + '-stream', sawAssistantPayload: true,
+        pendingBranchGroup: null, interrupted: false, interimBoundaryPending: false,
+        needsInput: false, turnStartedAt: Date.now(), usage: null
+      })
+    }
+    return 'ok'
+  })()
+`
+
+const reveal = sid => `window.__HERMES_LAYOUT_TREE__.reveal(${JSON.stringify(`session-tile:${sid}`)})`
+
+// Drive the sash WITHOUT awaiting rAF: a slow app would stretch a rAF-paced
+// loop and make the window itself a function of the slowness. Fixed wall-clock
+// pacing keeps the trace window comparable run to run.
+const DRAG = `
+  (async () => {
+    const handle = document.querySelector('[role="separator"]')
+    if (!handle) return 'none'
+    const box = handle.getBoundingClientRect()
+    const y = box.top + box.height / 2
+    const x0 = box.left + box.width / 2
+    let x = x0
+    const opts = { bubbles: true, cancelable: true, pointerId: 1, pointerType: 'mouse', isPrimary: true, button: 0, buttons: 1 }
+    handle.dispatchEvent(new PointerEvent('pointerdown', { ...opts, clientX: x, clientY: y }))
+    for (let i = 0; i < 40; i++) {
+      x += (i < 20 ? 3 : -3)
+      window.dispatchEvent(new PointerEvent('pointermove', { ...opts, clientX: x, clientY: y }))
+      await new Promise(r => setTimeout(r, 16))
+    }
+    window.dispatchEvent(new PointerEvent('pointerup', { ...opts, buttons: 0, clientX: x, clientY: y }))
+    return 'dragged'
+  })()
+`
+
+const CLEANUP = `
+  (() => {
+    if (window.__T__) {
+      for (const { sid, rid } of window.__T__.ids) {
+        const s = window.__HERMES_SESSION_TILES__.states()
+        window.__HERMES_SESSION_TILES__.publish(rid, { ...s[rid], busy: false, streamId: null })
+        window.__HERMES_SESSION_TILES__.close(sid)
+      }
+      window.__T__ = null
+    }
+    return 'cleaned'
+  })()
+`
+
+const { cdp, teardown } = await attach({ port })
+
+try {
+  await cdp.send('Runtime.enable')
+
+  const ok = await cdp.eval(setup)
+
+  if (ok !== 'ok') {
+    throw new Error(`setup failed: ${ok}`)
+  }
+
+  for (let n = 1; n <= TILES; n++) {
+    await cdp.eval(reveal(`trace-tile-${n}`))
+    await sleep(300)
+  }
+
+  await sleep(1500)
+
+  // Collect trace events for the drag window only. `cdp.on` is the client's
+  // only event API (no `once`), so completion is signalled through a flag.
+  const events = []
+  let complete = false
+  cdp.on('Tracing.dataCollected', params => events.push(...(params.value ?? [])))
+  cdp.on('Tracing.tracingComplete', () => {
+    complete = true
+  })
+
+  await cdp.send('Tracing.start', {
+    transferMode: 'ReportEvents',
+    traceConfig: { includedCategories: ['devtools.timeline', 'blink.user_timing'] }
+  })
+
+  const dragged = await cdp.eval(DRAG)
+
+  await cdp.send('Tracing.end')
+
+  for (let waited = 0; !complete && waited < 10000; waited += 200) {
+    await sleep(200)
+  }
+
+  await cdp.eval(CLEANUP)
+
+  // Sum self-time per timeline category. Nested events would double-count, so
+  // attribute each event's duration minus the duration of its direct children.
+  const INTERESTING = new Set([
+    'UpdateLayoutTree', // Recalculate Style
+    'Layout',
+    'Paint',
+    'PaintImage',
+    'Layerize',
+    'UpdateLayer',
+    'CompositeLayers',
+    'FunctionCall',
+    'EvaluateScript',
+    'TimerFire',
+    'EventDispatch',
+    'HitTest',
+    'ParseHTML',
+    'CommitLoad'
+  ])
+
+  const totals = new Map()
+  let traced = 0
+
+  for (const e of events) {
+    if (e.ph !== 'X' || typeof e.dur !== 'number') {
+      continue
+    }
+
+    traced += 1
+    const name = e.name
+
+    if (!INTERESTING.has(name)) {
+      continue
+    }
+
+    totals.set(name, (totals.get(name) ?? 0) + e.dur / 1000)
+  }
+
+  console.log(`drag=${dragged}  trace events=${events.length} (complete=${traced})\n`)
+  console.log('TIMELINE COST (ms, total duration by event):')
+
+  const rows = [...totals.entries()].sort((a, b) => b[1] - a[1])
+
+  if (rows.length === 0) {
+    console.log('  (no timeline events — category filter or tracing domain unavailable)')
+  }
+
+  for (const [name, ms] of rows) {
+    console.log(`  ${name.padEnd(20)} ${ms.toFixed(1)}ms`)
+  }
+
+  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: style=${style.toFixed(0)}ms layout=${layout.toFixed(0)}ms script=${script.toFixed(0)}ms`)
+
+  // Script dominates -> name the functions. Timeline FunctionCall events carry
+  // the callsite in args.data, so the top offenders can be attributed without
+  // a separate CPU profile.
+  const byFn = new Map()
+
+  for (const e of events) {
+    if (e.ph !== 'X' || e.name !== 'FunctionCall' || typeof e.dur !== 'number') {
+      continue
+    }
+
+    const d = e.args?.data ?? {}
+    const key = `${d.functionName || '(anonymous)'} @ ${(d.url || '?').split('/').pop()}:${d.lineNumber ?? '?'}`
+    byFn.set(key, (byFn.get(key) ?? 0) + e.dur / 1000)
+  }
+
+  console.log('\nTOP SCRIPT CALLSITES (ms):')
+
+  for (const [name, ms] of [...byFn.entries()].sort((a, b) => b[1] - a[1]).slice(0, 15)) {
+    console.log(`  ${ms.toFixed(1).padStart(8)}  ${name}`)
+  }
+} finally {
+  teardown?.()
+}