feat: add profile commit command for per-commit details

Author: piotrski

.changeset/profiler.md

@@ -7,8 +7,9 @@
 Start and stop profiling sessions to capture render performance data from connected React apps.
 
 - **Render reports** — Per-component render duration and count
-- **Slowest components** — Ranked by render time
+- **Slowest components** — Ranked by self render time
 - **Most re-rendered** — Ranked by render count
 - **Commit timeline** — Chronological view of React commits with durations
+- **Commit details** — Per-component breakdown for a specific commit, sorted by self time
 
-CLI commands: `profile start`, `profile stop`, `profile report`, `profile slow`, `profile rerenders`, `profile timeline`.
+CLI commands: `profile start`, `profile stop`, `profile report`, `profile slow`, `profile rerenders`, `profile timeline`, `profile commit`.

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> [--limit N]  Detail for specific commit`;
 }
 
 function parseArgs(argv: string[]): {
@@ -265,6 +267,28 @@ 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 limit = flags['limit'] ? parseInt(flags['limit'] as string, 10) : undefined;
+      const resp = await sendCommand({ type: 'profile-commit', index, limit });
+      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, cmd.limit);
+          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,21 @@ 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.totalComponents} 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}`);
+  }
+  const hidden = detail.totalComponents - detail.components.length;
+  if (hidden > 0) {
+    lines.push(`  ... ${hidden} more (use --limit to show more)`);
+  }
+  return lines.join('\n');
+}
+
 // ── Helpers ──
 
 function formatValue(obj: unknown): string {

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

@@ -21,6 +21,20 @@ 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[];
+  }>;
+  totalComponents: number;
+}
+
 export class Profiler {
   private session: ProfilingSession | null = null;
   /** Display names captured during profiling (survives unmounts) */
@@ -240,6 +254,38 @@ export class Profiler {
       .slice(0, limit);
   }
 
+  getCommitDetails(index: number, tree: ComponentTree, limit = 10): 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);
+
+    const totalCount = components.length;
+
+    return {
+      index,
+      timestamp: commit.timestamp,
+      duration: commit.duration,
+      components: limit > 0 ? components.slice(0, limit) : components,
+      totalComponents: totalCount,
+    };
+  }
+
   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; limit?: number };
 
 export interface IpcResponse {
   ok: boolean;