feat: add profile commit command for per-commit details

Author: piotrski

packages/agent-react-devtools/src/cli.ts

@@ -16,6 +16,7 @@ import {
   formatSlowest,
   formatRerenders,
   formatTimeline,
+  formatCommitDetail,
 } from './formatters.js';
 import type { IpcCommand } from './types.js';
 
@@ -39,7 +40,8 @@ Profiling:
   profile report <@c1 | id>    Render report for component
   profile slow [--limit N]      Slowest components (by avg)
   profile rerenders [--limit N] Most re-rendered components
-  profile timeline [--limit N]  Commit timeline`;
+  profile timeline [--limit N]  Commit timeline
+  profile commit <N | #N>       Detail for specific commit`;
 }
 
 function parseArgs(argv: string[]): {
@@ -265,6 +267,27 @@ async function main(): Promise<void> {
       return;
     }
 
+    if (cmd0 === 'profile' && cmd1 === 'commit') {
+      const raw = command[2];
+      if (!raw) {
+        console.error('Usage: devtools profile commit <N | #N>');
+        process.exit(1);
+      }
+      const index = parseInt(raw.replace(/^#/, ''), 10);
+      if (isNaN(index)) {
+        console.error('Usage: devtools profile commit <N | #N>');
+        process.exit(1);
+      }
+      const resp = await sendCommand({ type: 'profile-commit', index });
+      if (resp.ok) {
+        console.log(formatCommitDetail(resp.data as any));
+      } else {
+        console.error(resp.error);
+        process.exit(1);
+      }
+      return;
+    }
+
     if (cmd0 === 'profile' && cmd1 === 'timeline') {
       const limit = flags['limit'] ? parseInt(flags['limit'] as string, 10) : undefined;
       const resp = await sendCommand({ type: 'profile-timeline', limit });

packages/agent-react-devtools/src/daemon.ts

@@ -218,6 +218,14 @@ class Daemon {
             data: this.profiler.getTimeline(cmd.limit),
           };
 
+        case 'profile-commit': {
+          const detail = this.profiler.getCommitDetails(cmd.index, this.tree);
+          if (!detail) {
+            return { ok: false, error: `Commit #${cmd.index} not found` };
+          }
+          return { ok: true, data: detail };
+        }
+
         default:
           return { ok: false, error: `Unknown command: ${(cmd as any).type}` };
       }

packages/agent-react-devtools/src/formatters.ts

@@ -4,7 +4,7 @@ import type {
   ComponentRenderReport,
 } from './types.js';
 import type { TreeNode } from './component-tree.js';
-import type { ProfileSummary, TimelineEntry } from './profiler.js';
+import type { ProfileSummary, TimelineEntry, CommitDetail } from './profiler.js';
 
 // ── Abbreviations for component types ──
 const TYPE_ABBREV: Record<string, string> = {
@@ -220,6 +220,17 @@ export function formatTimeline(entries: TimelineEntry[]): string {
   return lines.join('\n');
 }
 
+export function formatCommitDetail(detail: CommitDetail): string {
+  const lines: string[] = [];
+  lines.push(`Commit #${detail.index}  ${detail.duration.toFixed(1)}ms  ${detail.components.length} components`);
+  lines.push('');
+  for (const c of detail.components) {
+    const causes = c.causes.length > 0 ? c.causes.join(', ') : '?';
+    lines.push(`  ${pad(c.displayName, 24)} self:${c.selfDuration.toFixed(1)}ms  total:${c.actualDuration.toFixed(1)}ms  ${causes}`);
+  }
+  return lines.join('\n');
+}
+
 // ── Helpers ──
 
 function formatValue(obj: unknown): string {

packages/agent-react-devtools/src/profiler.ts

@@ -21,6 +21,19 @@ export interface TimelineEntry {
   componentCount: number;
 }
 
+export interface CommitDetail {
+  index: number;
+  timestamp: number;
+  duration: number;
+  components: Array<{
+    id: number;
+    displayName: string;
+    actualDuration: number;
+    selfDuration: number;
+    causes: RenderCause[];
+  }>;
+}
+
 export class Profiler {
   private session: ProfilingSession | null = null;
   /** Display names captured during profiling (survives unmounts) */
@@ -240,6 +253,35 @@ export class Profiler {
       .slice(0, limit);
   }
 
+  getCommitDetails(index: number, tree: ComponentTree): CommitDetail | null {
+    if (!this.session) return null;
+    if (index < 0 || index >= this.session.commits.length) return null;
+
+    const commit = this.session.commits[index];
+    const components: CommitDetail['components'] = [];
+
+    for (const [id, actualDuration] of commit.fiberActualDurations) {
+      const selfDuration = commit.fiberSelfDurations.get(id) || 0;
+      const desc = commit.changeDescriptions.get(id);
+      components.push({
+        id,
+        displayName: tree.getNode(id)?.displayName || this.displayNames.get(id) || `Component#${id}`,
+        actualDuration,
+        selfDuration,
+        causes: desc ? describeCauses(desc) : [],
+      });
+    }
+
+    components.sort((a, b) => b.selfDuration - a.selfDuration);
+
+    return {
+      index,
+      timestamp: commit.timestamp,
+      duration: commit.duration,
+      components,
+    };
+  }
+
   getTimeline(limit?: number): TimelineEntry[] {
     if (!this.session) return [];
 

packages/agent-react-devtools/src/types.ts

@@ -96,7 +96,8 @@ export type IpcCommand =
   | { type: 'profile-report'; componentId: number | string }
   | { type: 'profile-slow'; limit?: number }
   | { type: 'profile-rerenders'; limit?: number }
-  | { type: 'profile-timeline'; limit?: number };
+  | { type: 'profile-timeline'; limit?: number }
+  | { type: 'profile-commit'; index: number };
 
 export interface IpcResponse {
   ok: boolean;