feat: add TTFB timing breakdown to execution detail view (#25)

* feat: add TTFB timing breakdown to execution detail view

Measure time-to-first-byte (TTFB) in the engine and display it in
the TUI execution detail panel alongside total request duration.

- Add ttfb field to fetchFinished engine event
- Capture TTFB from events in server service layer
- Update ExecutionTimingSchema with optional ttfb field
- Display Timing section in TUI with TTFB and Total

* chore: add changeset

Author: andrewmelchor

.changeset/lovely-ravens-trade.md

@@ -0,0 +1,6 @@
+---
+"@t-req/core": patch
+"@t-req/app": patch
+---
+
+Add TTFB timing measurement to execution details

packages/app/src/server/schemas.ts

@@ -413,7 +413,8 @@ export const ExecutionSourceSchema = z.object({
 export const ExecutionTimingSchema = z.object({
   startTime: z.number(),
   endTime: z.number().optional(),
-  durationMs: z.number().optional()
+  durationMs: z.number().optional(),
+  ttfb: z.number().optional()
 });
 
 export const ExecutionStatusSchema = z.enum(['pending', 'running', 'success', 'failed']);

packages/app/src/server/service.ts

@@ -158,6 +158,7 @@ export type StoredExecution = {
     startTime: number;
     endTime?: number;
     durationMs?: number;
+    ttfb?: number;
   };
   response?: {
     status: number;
@@ -853,6 +854,16 @@ export function createService(config: ServiceConfig) {
           }
         }
 
+        // Capture TTFB from fetchFinished
+        if (event.type === 'fetchFinished' && typeof event.ttfb === 'number') {
+          if (flow && reqExecId) {
+            const exec = flow.executions.get(reqExecId);
+            if (exec) {
+              exec.timing.ttfb = event.ttfb;
+            }
+          }
+        }
+
         // Capture errors
         if (event.type === 'error') {
           const stage = String(event.stage ?? 'unknown');

packages/app/src/tui/components/execution-detail.tsx

@@ -113,9 +113,22 @@ export function ExecutionDetailView(props: ExecutionDetailProps) {
                 <Show when={execution.reqLabel}>
                   <text fg={rgba(theme.textMuted)}>{execution.reqLabel}</text>
                 </Show>
-                {/* Line 3: Duration */}
-                <Show when={execution.timing.durationMs !== undefined}>
-                  <text fg={rgba(theme.textMuted)}>{formatDuration(execution.timing.durationMs)}</text>
+                <Show when={execution.timing.ttfb !== undefined || execution.timing.durationMs !== undefined}>
+                  <box flexDirection="column">
+                    <text fg={rgba(theme.primary)} attributes={1}>Timing</text>
+                    <Show when={execution.timing.ttfb !== undefined}>
+                      <box flexDirection="row">
+                        <text fg={rgba(theme.textMuted)}>  TTFB:  </text>
+                        <text fg={rgba(theme.text)}>{formatDuration(execution.timing.ttfb)}</text>
+                      </box>
+                    </Show>
+                    <Show when={execution.timing.durationMs !== undefined}>
+                      <box flexDirection="row">
+                        <text fg={rgba(theme.textMuted)}>  Total: </text>
+                        <text fg={rgba(theme.text)}>{formatDuration(execution.timing.durationMs)}</text>
+                      </box>
+                    </Show>
+                  </box>
                 </Show>
               </box>
 

packages/app/src/tui/sdk.ts

@@ -85,6 +85,7 @@ export interface ExecutionDetail {
     startTime: number;
     endTime?: number;
     durationMs?: number;
+    ttfb?: number;
   };
   response?: {
     status: number;

packages/core/src/engine/engine.ts

@@ -413,13 +413,16 @@ export function createEngine(config: EngineConfig = {}): Engine {
         .ifDefined('proxy', options.proxy)
         .build();
 
+      const fetchStart = performance.now();
       response = await executeWithTransport(requestWithCookies, execOptions, transport);
+      const ttfb = performance.now() - fetchStart;
 
       emitEvent({
         type: 'fetchFinished',
         method: requestWithCookies.method,
         url: urlForCookies,
-        status: response.status
+        status: response.status,
+        ttfb
       });
 
       // Update cookies

packages/core/src/runtime/types.ts

@@ -52,7 +52,7 @@ export type EngineEvent =
   | { type: 'compileStarted' }
   | { type: 'compileFinished' }
   | { type: 'fetchStarted'; method: string; url: string }
-  | { type: 'fetchFinished'; method: string; url: string; status: number }
+  | { type: 'fetchFinished'; method: string; url: string; status: number; ttfb?: number }
   | { type: 'error'; stage: string; message: string };
 
 export type EventSink = (event: EngineEvent) => void;