Add profiler

apps/demo/src/views/SettingsView.vue

@@ -3,11 +3,41 @@ import { ref } from 'vue'
 import { useNativeRouter } from '@native-vue-router/core'
 import AppHeader from '../components/AppHeader.vue'
 import { useDemoStore } from '../data'
+import {
+  profilerHasCapture,
+  profilerRecording,
+  shareDemoProfile,
+  startDemoProfile,
+  stopDemoProfile,
+} from '../navigation-profiler'
 import { pwaBuildId, pwaEnvironment } from '../pwa'
 
 const store = useDemoStore()
 const native = useNativeRouter()
 const unloadResult = ref('Unload cached Stories')
+const profileStatus = ref(profilerRecording.value ? 'Recording navigation now' : 'Ready to record')
+
+function describeProfile(report: ReturnType<typeof stopDemoProfile>) {
+  return `${report.transactions.length} navigations · ${report.summary.droppedFrames} dropped frames · ${report.summary.p95FrameMs} ms p95`
+}
+
+function startProfile() {
+  startDemoProfile(native)
+  profileStatus.value = 'Recording. Leave this page, reproduce the jank, then return here.'
+}
+
+function stopProfile() {
+  profileStatus.value = describeProfile(stopDemoProfile(native))
+}
+
+async function exportProfile() {
+  try {
+    const result = await shareDemoProfile(native)
+    profileStatus.value = `${describeProfile(result.report)} · ${result.method}`
+  } catch (error) {
+    if ((error as DOMException)?.name !== 'AbortError') profileStatus.value = 'Profile export failed'
+  }
+}
 
 function unloadStories() {
   const count = native.unload('/stories')
@@ -31,6 +61,16 @@ function unloadStories() {
       <p v-if="pwaEnvironment.ios && !pwaEnvironment.standalone">In Safari, choose Share → Add to Home Screen, then launch the new icon. Edge interception is intentionally disabled inside a normal browser tab.</p>
       <p v-else-if="pwaEnvironment.ios">The leading edge is reserved before WebKit navigation begins. Open a conversation and drag from the extreme left edge to verify the live back preview.</p>
     </section>
+    <section class="settings-group">
+      <h2>Frame pacing profiler</h2>
+      <div><span><strong>{{ profilerRecording ? 'Recording' : 'Profiler idle' }}</strong><small data-testid="profile-status">{{ profileStatus }}</small></span><b :class="{ offline: !profilerRecording }">{{ profilerRecording ? 'LIVE' : 'OFF' }}</b></div>
+      <p>Start here, reproduce the choppy navigation, return here, then stop and export. The JSON includes rAF frame intervals and navigation phases but omits route params, query values, and application data.</p>
+    </section>
+    <div class="profiler-controls">
+      <button type="button" data-testid="profile-start" :disabled="profilerRecording" @click="startProfile">Start profiling</button>
+      <button type="button" data-testid="profile-stop" :disabled="!profilerRecording" @click="stopProfile">Stop</button>
+      <button type="button" data-testid="profile-export" :disabled="!profilerHasCapture" @click="exportProfile">Share JSON</button>
+    </div>
     <section class="settings-group">
       <h2>Native view cache</h2>
       <div><span><strong>Mounted views</strong><small>{{ native.cacheStats.value.inactive }} inactive of {{ native.cacheStats.value.maxInactive }} allowed</small></span><b data-testid="cache-mounted">{{ native.cacheStats.value.mounted }}</b></div>