@shepai/cli 1.121.0 → 1.122.0-pr392.ff1c944

package/dist/src/presentation/web/app/actions/get-feature-phase-timings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-feature-phase-timings.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/get-feature-phase-timings.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,KAAK,qBAAqB,GACtB;IAAE,OAAO,EAAE,eAAe,EAAE,CAAC;IAAC,iBAAiB,EAAE,qBAAqB,EAAE,CAAA;CAAE,GAC1E;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtB,wBAAsB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,qBAAqB,CAAC,CA6B9F"}
+{"version":3,"file":"get-feature-phase-timings.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/get-feature-phase-timings.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,KAAK,qBAAqB,GACtB;IAAE,OAAO,EAAE,eAAe,EAAE,CAAC;IAAC,iBAAiB,EAAE,qBAAqB,EAAE,CAAA;CAAE,GAC1E;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtB,wBAAsB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAoC9F"}

package/dist/src/presentation/web/app/actions/get-feature-phase-timings.js

@@ -17,6 +17,11 @@ export async function getFeaturePhaseTimings(featureId) {
             approvalWaitMs: t.approvalWaitMs != null ? Number(t.approvalWaitMs) : undefined,
             inputTokens: t.inputTokens != null ? Number(t.inputTokens) : undefined,
             outputTokens: t.outputTokens != null ? Number(t.outputTokens) : undefined,
+            cacheCreationInputTokens: t.cacheCreationInputTokens != null ? Number(t.cacheCreationInputTokens) : undefined,
+            cacheReadInputTokens: t.cacheReadInputTokens != null ? Number(t.cacheReadInputTokens) : undefined,
+            costUsd: t.costUsd != null ? Number(t.costUsd) : undefined,
+            numTurns: t.numTurns ?? undefined,
+            durationApiMs: t.durationApiMs != null ? Number(t.durationApiMs) : undefined,
         }));
         // Read rejection feedback from spec.yaml
         const rejectionFeedback = await readRejectionFeedback(featureId);

package/dist/src/presentation/web/app/actions/reject-feature.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reject-feature.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/reject-feature.ts"],"names":[],"mappings":"AAMA,wBAAsB,aAAa,CACjC,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,MAAM,EAAE,GACrB,OAAO,CAAC;IACT,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAqCD"}
+{"version":3,"file":"reject-feature.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/reject-feature.ts"],"names":[],"mappings":"AAWA,wBAAsB,aAAa,CACjC,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,MAAM,EAAE,GACrB,OAAO,CAAC;IACT,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CA8CD"}

package/dist/src/presentation/web/app/actions/reject-feature.js

@@ -1,5 +1,7 @@
 'use server';
 import { resolve } from '../../lib/server-container.js';
+import { AgentRunStatus } from '../../../../../packages/core/src/domain/generated/output.js';
+const ERROR_STATUSES = new Set([AgentRunStatus.failed, AgentRunStatus.interrupted]);
 export async function rejectFeature(featureId, feedback, attachments) {
     if (!featureId.trim()) {
         return { rejected: false, error: 'Feature id is required' };
@@ -16,6 +18,13 @@ export async function rejectFeature(featureId, feedback, attachments) {
         if (!feature.agentRunId) {
             return { rejected: false, error: 'Feature has no agent run' };
         }
+        const runRepo = resolve('IAgentRunRepository');
+        const run = await runRepo.findById(feature.agentRunId);
+        if (run && ERROR_STATUSES.has(run.status)) {
+            const resumeUseCase = resolve('ResumeFeatureUseCase');
+            await resumeUseCase.execute(featureId, { promptPrefix: feedback });
+            return { rejected: true, iteration: 1 };
+        }
         const rejectUseCase = resolve('RejectAgentRunUseCase');
         const result = await rejectUseCase.execute(feature.agentRunId, feedback, attachments);
         if (!result.rejected) {

package/dist/src/presentation/web/app/actions/stop-feature.d.ts

@@ -0,0 +1,5 @@
+export declare function stopFeature(featureId: string): Promise<{
+    stopped: boolean;
+    error?: string;
+}>;
+//# sourceMappingURL=stop-feature.d.ts.map

package/dist/src/presentation/web/app/actions/stop-feature.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stop-feature.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/stop-feature.ts"],"names":[],"mappings":"AAMA,wBAAsB,WAAW,CAC/B,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAiC/C"}

package/dist/src/presentation/web/app/actions/stop-feature.js

@@ -0,0 +1,30 @@
+'use server';
+import { resolve } from '../../lib/server-container.js';
+export async function stopFeature(featureId) {
+    if (!featureId.trim()) {
+        return { stopped: false, error: 'Feature id is required' };
+    }
+    try {
+        // Find the active agent run for this feature
+        const runRepo = resolve('IAgentRunRepository');
+        const allRuns = await runRepo.list();
+        const activeRun = allRuns.find((r) => r.featureId === featureId &&
+            r.status !== 'completed' &&
+            r.status !== 'failed' &&
+            r.status !== 'interrupted' &&
+            r.status !== 'cancelled');
+        if (!activeRun) {
+            return { stopped: false, error: 'No active agent run found for this feature' };
+        }
+        const useCase = resolve('StopAgentRunUseCase');
+        const result = await useCase.execute(activeRun.id);
+        if (!result.stopped) {
+            return { stopped: false, error: result.reason };
+        }
+        return { stopped: true };
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : 'Failed to stop agent';
+        return { stopped: false, error: message };
+    }
+}

package/dist/src/presentation/web/app/api/npm-version/route.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/app/api/npm-version/route.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,wBAAsB,GAAG,IAAI,OAAO,CAAC,YAAY,CAAC,CAejD"}
+{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/app/api/npm-version/route.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK3C,wBAAsB,GAAG,IAAI,OAAO,CAAC,YAAY,CAAC,CAsBjD"}

package/dist/src/presentation/web/app/api/npm-version/route.js

@@ -1,5 +1,11 @@
 import { NextResponse } from 'next/server';
+const CACHE_TTL_MS = 5 * 60_000; // 5 minutes
+let cachedVersion = null;
 export async function GET() {
+    // Return cached value if fresh
+    if (cachedVersion && Date.now() - cachedVersion.fetchedAt < CACHE_TTL_MS) {
+        return NextResponse.json({ latest: cachedVersion.latest });
+    }
     const packageName = '@shepai/cli';
     try {
         const res = await fetch(`https://registry.npmjs.org/${packageName}/latest`, {
@@ -9,7 +15,9 @@ export async function GET() {
             return NextResponse.json({ error: `npm registry returned ${res.status}` }, { status: 502 });
         }
         const data = (await res.json());
-        return NextResponse.json({ latest: data.version ?? null });
+        const latest = data.version ?? null;
+        cachedVersion = { latest, fetchedAt: Date.now() };
+        return NextResponse.json({ latest });
     }
     catch (error) {
         const message = error instanceof Error ? error.message : 'Failed to check npm version';

package/dist/src/presentation/web/app/api/sessions/route.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/app/api/sessions/route.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK3C,eAAO,MAAM,OAAO,kBAAkB,CAAC;AA4QvC;;;;;GAKG;AACH,wBAAsB,GAAG,CAAC,OAAO,EAAE,OAAO;;;;YA/QpC,MAAM;mBACC,MAAM;iBACR,MAAM,GAAG,IAAI;sBACR,MAAM;wBACJ,MAAM,GAAG,IAAI;uBACd,MAAM,GAAG,IAAI;mBACjB,MAAM,GAAG,IAAI;qBACX,MAAM;kBACT,MAAM;;IAoSjB"}
+{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/app/api/sessions/route.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK3C,eAAO,MAAM,OAAO,kBAAkB,CAAC;AAgTvC;;;;;GAKG;AACH,wBAAsB,GAAG,CAAC,OAAO,EAAE,OAAO;;;;YAnTpC,MAAM;mBACC,MAAM;iBACR,MAAM,GAAG,IAAI;sBACR,MAAM;wBACJ,MAAM,GAAG,IAAI;uBACd,MAAM,GAAG,IAAI;mBACjB,MAAM,GAAG,IAAI;qBACX,MAAM;kBACT,MAAM;;IAwUjB"}

package/dist/src/presentation/web/app/api/sessions/route.js

@@ -1,7 +1,7 @@
 import { NextResponse } from 'next/server';
 import { homedir } from 'node:os';
 import { join } from 'node:path';
-import { readdir, stat, readFile } from 'node:fs/promises';
+import { readdir, stat } from 'node:fs/promises';
 export const dynamic = 'force-dynamic';
 // ── Path encoding helpers ─────────────────────────────────────────────
 /**
@@ -49,14 +49,32 @@ async function scanClaudeSessions(repositoryPath, limit) {
         .map((r) => r.value)
         .filter((s) => s !== null);
 }
+/**
+ * Read the first N bytes of a file to extract preview and timestamps
+ * without loading the entire (potentially multi-MB) session file.
+ */
+const PREVIEW_READ_BYTES = 8_192; // 8KB is enough for first few messages
 async function parseClaudeSession(filePath, fileName, mtime, repositoryPath) {
-    const content = await readFile(filePath, 'utf-8');
-    const lines = content.split('\n').filter((l) => l.trim());
+    const { createReadStream } = await import('node:fs');
     const id = fileName.replace('.jsonl', '');
+    // Read only the first chunk to extract preview and first timestamp
     let preview = null;
-    let messageCount = 0;
     let firstTimestamp = null;
-    let lastTimestamp = null;
+    let messageCount = 0;
+    const head = await new Promise((resolve) => {
+        const chunks = [];
+        let size = 0;
+        const stream = createReadStream(filePath, { end: PREVIEW_READ_BYTES - 1 });
+        stream.on('data', (chunk) => {
+            chunks.push(chunk);
+            size += chunk.length;
+        });
+        stream.on('end', () => resolve(Buffer.concat(chunks, size).toString('utf-8')));
+        stream.on('error', () => resolve(''));
+    });
+    if (!head)
+        return null;
+    const lines = head.split('\n').filter((l) => l.trim());
     for (const line of lines) {
         try {
             const entry = JSON.parse(line);
@@ -66,7 +84,6 @@ async function parseClaudeSession(filePath, fileName, mtime, repositoryPath) {
                     messageCount++;
                     if (entry.timestamp) {
                         firstTimestamp ??= entry.timestamp;
-                        lastTimestamp = entry.timestamp;
                     }
                     if (role === 'user' && preview === null) {
                         preview = extractText(entry.message?.content);
@@ -80,14 +97,16 @@ async function parseClaudeSession(filePath, fileName, mtime, repositoryPath) {
     }
     if (messageCount === 0)
         return null;
+    // Use mtime as lastMessageAt — avoids reading entire file for last line
+    const mtimeIso = new Date(mtime).toISOString();
     return {
         id,
         agentType: 'claude-code',
         preview,
         messageCount,
         firstMessageAt: firstTimestamp,
-        lastMessageAt: lastTimestamp,
-        createdAt: firstTimestamp ?? new Date(mtime).toISOString(),
+        lastMessageAt: mtimeIso,
+        createdAt: firstTimestamp ?? mtimeIso,
         projectPath: repositoryPath,
         filePath,
         _mtime: mtime,
@@ -144,11 +163,25 @@ async function scanCursorSessions(repositoryPath, limit) {
         .filter((s) => s !== null);
 }
 async function parseCursorSession(filePath, fileName, mtime, repositoryPath) {
-    const content = await readFile(filePath, 'utf-8');
-    const lines = content.split('\n').filter((l) => l.trim());
+    const { createReadStream } = await import('node:fs');
     const id = fileName.replace('.jsonl', '');
+    // Read only the first chunk for preview extraction
+    const head = await new Promise((resolve) => {
+        const chunks = [];
+        let size = 0;
+        const stream = createReadStream(filePath, { end: PREVIEW_READ_BYTES - 1 });
+        stream.on('data', (chunk) => {
+            chunks.push(chunk);
+            size += chunk.length;
+        });
+        stream.on('end', () => resolve(Buffer.concat(chunks, size).toString('utf-8')));
+        stream.on('error', () => resolve(''));
+    });
+    if (!head)
+        return null;
     let preview = null;
     let messageCount = 0;
+    const lines = head.split('\n').filter((l) => l.trim());
     for (const line of lines) {
         try {
             const entry = JSON.parse(line);

package/dist/src/presentation/web/components/common/feature-drawer-tabs/activity-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"activity-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/activity-tab.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACtB,MAAM,yCAAyC,CAAC;AAqDjD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,qBAAqB,EAAE,CAAC;CAC7C;AA6BD;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8DAA8D;IAC9D,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,eAAe,EAAE,EAC1B,QAAQ,CAAC,EAAE,qBAAqB,EAAE,GACjC,iBAAiB,EAAE,CAgErB;AAMD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,gBAAgB,2CAmE3F"}
+{"version":3,"file":"activity-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/activity-tab.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACtB,MAAM,yCAAyC,CAAC;AAmEjD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,qBAAqB,EAAE,CAAC;CAC7C;AAmED;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8DAA8D;IAC9D,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,eAAe,EAAE,EAC1B,QAAQ,CAAC,EAAE,qBAAqB,EAAE,GACjC,iBAAiB,EAAE,CAgErB;AA6BD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,gBAAgB,2CAqE3F"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/activity-tab.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import { Loader2, AlertCircle, Clock, Zap } from 'lucide-react';
+import { Loader2, AlertCircle, Clock, Zap, DollarSign, Play, RotateCcw, CheckCircle2, XCircle, Square, Ban, MessageSquare, Timer, } from 'lucide-react';
 import { InlineAttachments } from '../../common/inline-attachments/index.js';
 import { formatDuration } from '../../../lib/format-duration.js';
 /**
@@ -51,6 +51,21 @@ function formatTokens(count) {
         return `${(count / 1_000).toFixed(1)}K`;
     return String(count);
 }
+/** Format a timestamp to a short local time string (e.g. "10:05:30 AM"). */
+function formatTimestamp(value) {
+    const d = value instanceof Date ? value : new Date(String(value));
+    if (Number.isNaN(d.getTime()))
+        return '';
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+/** Format a USD cost with appropriate precision. */
+function formatCost(usd) {
+    if (usd >= 1)
+        return `$${usd.toFixed(2)}`;
+    if (usd >= 0.01)
+        return `$${usd.toFixed(3)}`;
+    return `$${usd.toFixed(4)}`;
+}
 const NODE_TO_PHASE = {
     analyze: 'Analyzing',
     requirements: 'Requirements',
@@ -60,13 +75,48 @@ const NODE_TO_PHASE = {
     merge: 'Merging',
 };
 const LIFECYCLE_EVENTS = {
-    'run:started': { label: 'started', colorClass: 'text-blue-600' },
-    'run:resumed': { label: 'resumed', colorClass: 'text-blue-600' },
-    'run:completed': { label: 'completed', colorClass: 'text-emerald-600' },
-    'run:failed': { label: 'failed', colorClass: 'text-red-600' },
-    'run:stopped': { label: 'stopped', colorClass: 'text-amber-600' },
-    'run:crashed': { label: 'crashed', colorClass: 'text-red-600' },
-    'run:rejected': { label: 'rejected', colorClass: 'text-orange-600' },
+    'run:started': {
+        label: 'started',
+        colorClass: 'text-blue-600',
+        bgClass: 'bg-blue-50 dark:bg-blue-950/30',
+        icon: Play,
+    },
+    'run:resumed': {
+        label: 'resumed',
+        colorClass: 'text-blue-600',
+        bgClass: 'bg-blue-50 dark:bg-blue-950/30',
+        icon: RotateCcw,
+    },
+    'run:completed': {
+        label: 'completed',
+        colorClass: 'text-emerald-600',
+        bgClass: 'bg-emerald-50 dark:bg-emerald-950/30',
+        icon: CheckCircle2,
+    },
+    'run:failed': {
+        label: 'failed',
+        colorClass: 'text-red-600',
+        bgClass: 'bg-red-50 dark:bg-red-950/30',
+        icon: XCircle,
+    },
+    'run:stopped': {
+        label: 'stopped',
+        colorClass: 'text-amber-600',
+        bgClass: 'bg-amber-50 dark:bg-amber-950/30',
+        icon: Square,
+    },
+    'run:crashed': {
+        label: 'crashed',
+        colorClass: 'text-red-600',
+        bgClass: 'bg-red-50 dark:bg-red-950/30',
+        icon: XCircle,
+    },
+    'run:rejected': {
+        label: 'rejected',
+        colorClass: 'text-orange-600',
+        bgClass: 'bg-orange-50 dark:bg-orange-950/30',
+        icon: Ban,
+    },
 };
 function isLifecycleEvent(phase) {
     return phase.startsWith('run:');
@@ -138,6 +188,26 @@ export function buildLifecycleTimeline(timings, feedback) {
     }
     return iterations;
 }
+/** Determine the outcome status of an iteration */
+function getIterationOutcome(iteration) {
+    const lastLifecycle = [...iteration.timings].reverse().find((t) => isLifecycleEvent(t.phase));
+    if (!lastLifecycle)
+        return null;
+    switch (lastLifecycle.phase) {
+        case 'run:rejected':
+            return { label: 'Rejected', colorClass: 'text-orange-600', dotClass: 'bg-orange-500' };
+        case 'run:completed':
+            return { label: 'Completed', colorClass: 'text-emerald-600', dotClass: 'bg-emerald-500' };
+        case 'run:failed':
+            return { label: 'Failed', colorClass: 'text-red-600', dotClass: 'bg-red-500' };
+        case 'run:crashed':
+            return { label: 'Crashed', colorClass: 'text-red-600', dotClass: 'bg-red-500' };
+        case 'run:stopped':
+            return { label: 'Stopped', colorClass: 'text-amber-600', dotClass: 'bg-amber-500' };
+        default:
+            return null;
+    }
+}
 /* ---------------------------------------------------------------------------
  * Component
  * ------------------------------------------------------------------------- */
@@ -147,10 +217,10 @@ export function ActivityTab({ timings, loading, error, rejectionFeedback }) {
         return (_jsx("div", { "data-testid": "activity-tab-loading", className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) }));
     }
     if (error) {
-        return (_jsxs("div", { className: "flex items-center gap-2 p-4 text-sm text-red-600", children: [_jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }), _jsx("span", { children: error })] }));
+        return (_jsxs("div", { className: "flex items-center gap-2 p-4 text-base text-red-600", children: [_jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }), _jsx("span", { children: error })] }));
     }
     if (!timings || timings.length === 0) {
-        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(Clock, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "No activity recorded yet" })] }));
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(Clock, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-base", children: "No activity recorded yet" })] }));
     }
     const nodeTimings = timings.filter((t) => !isLifecycleEvent(t.phase));
     const maxDurationMs = Math.max(...nodeTimings.map((t) => getEffectiveDuration(t, now)), ...nodeTimings.map((t) => t.approvalWaitMs ?? 0), 0);
@@ -160,35 +230,37 @@ export function ActivityTab({ timings, loading, error, rejectionFeedback }) {
     const totalWaitMs = nodeTimings.reduce((sum, t) => sum + (t.approvalWaitMs ?? 0), 0);
     const totalInputTokens = nodeTimings.reduce((sum, t) => sum + (t.inputTokens ?? 0), 0);
     const totalOutputTokens = nodeTimings.reduce((sum, t) => sum + (t.outputTokens ?? 0), 0);
-    return (_jsxs("div", { className: "flex flex-col gap-4 p-4", children: [_jsx("div", { "data-testid": "activity-timings", className: "flex flex-col gap-3", children: iterations.map((iteration) => (_jsx(IterationGroup, { iteration: iteration, showHeader: hasMultipleIterations, maxDurationMs: maxDurationMs, now: now }, iteration.number))) }), totalExecMs > 0 ? (_jsx(SummaryTotals, { totalExecMs: totalExecMs, totalWaitMs: totalWaitMs, totalInputTokens: totalInputTokens, totalOutputTokens: totalOutputTokens })) : null] }));
+    const totalCostUsd = nodeTimings.reduce((sum, t) => sum + (t.costUsd ?? 0), 0);
+    return (_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { "data-testid": "activity-timings", className: "flex flex-col gap-3", children: iterations.map((iteration) => (_jsx(IterationGroup, { iteration: iteration, showHeader: hasMultipleIterations, maxDurationMs: maxDurationMs, now: now }, iteration.number))) }), totalExecMs > 0 ? (_jsx(SummaryTotals, { totalExecMs: totalExecMs, totalWaitMs: totalWaitMs, totalInputTokens: totalInputTokens, totalOutputTokens: totalOutputTokens, totalCostUsd: totalCostUsd })) : null] }));
 }
 /* ---------------------------------------------------------------------------
  * Iteration group — one cycle of work
  * ------------------------------------------------------------------------- */
 function IterationGroup({ iteration, showHeader, maxDurationMs, now, }) {
-    return (_jsxs("div", { "data-testid": `iteration-${iteration.number}`, className: "flex flex-col gap-1.5", children: [showHeader ? (_jsxs("div", { className: "text-muted-foreground text-xs font-medium", children: ["Iteration ", iteration.number] })) : null, iteration.timings.map((t) => {
-                if (isLifecycleEvent(t.phase)) {
-                    // For run:rejected, the message comes from the iteration, not a separate map
-                    const isRejection = t.phase === 'run:rejected';
-                    return (_jsx(LifecycleEventRow, { timing: t, message: isRejection ? iteration.rejectionMessage : undefined, attachments: isRejection ? iteration.rejectionAttachments : undefined }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
-                }
-                return (_jsx(NodeTimingRow, { timing: t, maxDurationMs: maxDurationMs, now: now }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
-            })] }));
+    const outcome = getIterationOutcome(iteration);
+    return (_jsxs("div", { "data-testid": `iteration-${iteration.number}`, className: "border-border/50 bg-card/50 flex flex-col overflow-hidden rounded-lg border", children: [showHeader ? (_jsxs("div", { className: "bg-muted/30 border-border/50 flex items-center justify-between border-b px-3 py-1.5", children: [_jsxs("span", { className: "text-muted-foreground text-sm font-semibold tracking-wide", children: ["Iteration ", iteration.number] }), outcome ? (_jsxs("span", { className: `flex items-center gap-1 text-xs font-medium ${outcome.colorClass}`, children: [_jsx("span", { className: `inline-block h-1.5 w-1.5 rounded-full ${outcome.dotClass}` }), outcome.label] })) : null] })) : null, _jsxs("div", { className: "relative flex flex-col", children: [_jsx("div", { className: "bg-border/60 absolute top-4 bottom-4 left-[21.5px] w-px" }), iteration.timings.map((t, idx) => {
+                        if (isLifecycleEvent(t.phase)) {
+                            const isRejection = t.phase === 'run:rejected';
+                            return (_jsx(LifecycleEventRow, { timing: t, message: isRejection ? iteration.rejectionMessage : undefined, attachments: isRejection ? iteration.rejectionAttachments : undefined, isFirst: idx === 0, isLast: idx === iteration.timings.length - 1 }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
+                        }
+                        return (_jsx(NodeTimingRow, { timing: t, maxDurationMs: maxDurationMs, now: now }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
+                    })] })] }));
 }
 /* ---------------------------------------------------------------------------
  * Row components
  * ------------------------------------------------------------------------- */
-function LifecycleEventRow({ timing, message, attachments, }) {
+function LifecycleEventRow({ timing, message, attachments, isFirst, isLast, }) {
     const event = LIFECYCLE_EVENTS[timing.phase];
     if (!event)
         return null;
     const hasAttachments = attachments && attachments.length > 0;
-    return (_jsxs("div", { className: `text-xs ${event.colorClass}`, children: [_jsx("span", { children: event.label }), message ? (_jsxs("span", { "data-testid": "rejection-feedback-text", className: "text-muted-foreground ml-2 font-normal italic", children: ["\u2014 ", message] })) : null, hasAttachments ? (_jsx("div", { "data-testid": "rejection-feedback-attachments", className: "mt-1.5 ml-2", children: _jsx(InlineAttachments, { text: "", attachmentPaths: attachments }) })) : null] }));
+    const Icon = event.icon;
+    return (_jsxs("div", { className: `relative flex flex-col gap-1 px-3 ${isFirst ? 'pt-2' : 'pt-1'} ${isLast ? 'pb-2' : 'pb-1'}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: `relative z-10 flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${event.bgClass}`, children: _jsx(Icon, { className: `h-3 w-3 ${event.colorClass}` }) }), _jsx("span", { className: `text-sm font-medium ${event.colorClass}`, children: event.label }), timing.startedAt &&
+                        !(typeof timing.startedAt === 'string' && timing.startedAt.startsWith('synthetic')) ? (_jsx("span", { className: "text-muted-foreground/60 ml-auto text-xs tabular-nums", children: formatTimestamp(String(timing.startedAt)) })) : null] }), message ? (_jsxs("div", { className: "ml-[26px] flex items-start gap-1.5 rounded-md bg-orange-50/50 px-2 py-1.5 dark:bg-orange-950/20", children: [_jsx(MessageSquare, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-orange-400" }), _jsxs("span", { "data-testid": "rejection-feedback-text", className: "text-muted-foreground text-xs leading-relaxed italic", children: ["\u2014 ", message] })] })) : null, hasAttachments ? (_jsx("div", { "data-testid": "rejection-feedback-attachments", className: "ml-[26px]", children: _jsx(InlineAttachments, { text: "", attachmentPaths: attachments }) })) : null] }));
 }
 function NodeTimingRow({ timing, maxDurationMs, now, }) {
     const suffix = timing.phase.includes(':') ? timing.phase.split(':')[1] : null;
     const isSubPhase = suffix !== null;
-    // Distinguish implementation sub-phases (phase-1, phase-2) from rejection retries (2, 3)
     const isImplPhase = suffix?.startsWith('phase-') ?? false;
     const label = isImplPhase
         ? `Phase ${suffix.replace('phase-', '')}`
@@ -208,17 +280,21 @@ function NodeTimingRow({ timing, maxDurationMs, now, }) {
     const totalTokens = timing.inputTokens != null || timing.outputTokens != null
         ? (timing.inputTokens ?? 0) + (timing.outputTokens ?? 0)
         : null;
-    return (_jsxs("div", { className: isSubPhase ? 'flex flex-col gap-1 pl-6' : 'flex flex-col gap-1', children: [_jsxs("div", { "data-testid": `timing-bar-${timing.phase}`, className: "flex items-center gap-2", children: [_jsx("span", { className: `text-muted-foreground shrink-0 text-xs ${isSubPhase ? 'w-18' : 'w-24'}`, children: label }), _jsx("div", { className: `bg-muted min-w-0 flex-1 overflow-hidden rounded-full ${isSubPhase ? 'h-2.5' : 'h-3'}`, children: _jsx("div", { className: `h-full rounded-full ${barColorClass}${isRunning ? 'animate-pulse' : ''}`, style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-10 shrink-0 text-right text-xs tabular-nums", children: formatDuration(durationMs) }), _jsx("span", { className: "text-muted-foreground w-12 shrink-0 text-right text-[10px] tabular-nums", children: totalTokens != null && totalTokens > 0 ? (_jsxs("span", { className: "inline-flex items-center gap-0.5", children: [_jsx(Zap, { className: "h-2 w-2 opacity-50" }), formatTokens(totalTokens)] })) : null })] }), timing.approvalWaitMs != null && timing.approvalWaitMs > 0 ? (_jsx(ApprovalWaitRow, { timing: timing, maxDurationMs: maxDurationMs })) : null] }));
+    return (_jsxs("div", { className: `relative flex flex-col gap-0.5 px-3 py-1.5 ${isSubPhase ? 'ml-4' : ''}`, children: [_jsxs("div", { "data-testid": `timing-bar-${timing.phase}`, className: "flex items-center gap-2", children: [_jsx("div", { className: "relative z-10 flex h-5 w-5 shrink-0 items-center justify-center", children: _jsx("div", { className: `rounded-full ${isRunning ? 'h-3 w-3 animate-pulse' : 'h-2.5 w-2.5'} ${isRunning
+                                ? 'bg-blue-500'
+                                : timing.completedAt
+                                    ? 'bg-emerald-500'
+                                    : 'bg-muted-foreground/30'}` }) }), _jsx("span", { className: `w-28 shrink-0 truncate text-sm font-medium ${isSubPhase ? 'text-muted-foreground' : 'text-foreground/80'}`, children: label }), _jsx("div", { className: `bg-muted min-w-0 flex-1 overflow-hidden rounded-full ${isSubPhase ? 'h-1.5' : 'h-2'}`, children: _jsx("div", { className: `h-full rounded-full transition-all duration-300 ${barColorClass}${isRunning ? 'animate-pulse' : ''}`, style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-14 shrink-0 text-right text-sm font-medium tabular-nums", children: formatDuration(durationMs) })] }), _jsxs("div", { className: "ml-[28px] flex items-center gap-3 text-xs", children: [timing.startedAt ? (_jsx("span", { className: "text-muted-foreground/60 tabular-nums", children: formatTimestamp(timing.startedAt) })) : null, totalTokens != null && totalTokens > 0 ? (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-0.5", children: [_jsx(Zap, { className: "h-3 w-3 opacity-50" }), formatTokens(totalTokens)] })) : null, timing.costUsd != null && timing.costUsd > 0 ? (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-0.5", children: [_jsx(DollarSign, { className: "h-3 w-3 opacity-50" }), formatCost(timing.costUsd)] })) : null] }), timing.approvalWaitMs != null && timing.approvalWaitMs > 0 ? (_jsx(ApprovalWaitRow, { timing: timing, maxDurationMs: maxDurationMs })) : null] }));
 }
 function ApprovalWaitRow({ timing, maxDurationMs, }) {
     const waitMs = timing.approvalWaitMs ?? 0;
     const barPercent = maxDurationMs > 0 ? Math.max(2, (waitMs / maxDurationMs) * 100) : 2;
-    return (_jsxs("div", { "data-testid": `approval-wait-${timing.phase}`, className: "flex items-center gap-2 pl-4", children: [_jsx("span", { className: "text-muted-foreground w-20 shrink-0 text-xs", children: "approval" }), _jsx("div", { className: "bg-muted h-2.5 min-w-0 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: "h-full rounded-full bg-amber-500", style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-10 shrink-0 text-right text-xs tabular-nums", children: formatDuration(waitMs) }), _jsx("span", { className: "w-12 shrink-0" })] }));
+    return (_jsxs("div", { "data-testid": `approval-wait-${timing.phase}`, className: "ml-[26px] flex items-center gap-2 rounded-md bg-amber-50/50 px-1.5 py-1 dark:bg-amber-950/20", children: [_jsx(Timer, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" }), _jsx("span", { className: "text-muted-foreground w-16 shrink-0 text-xs", children: "approval" }), _jsx("div", { className: "bg-muted h-1.5 min-w-0 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: "h-full rounded-full bg-amber-500", style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-14 shrink-0 text-right text-xs tabular-nums", children: formatDuration(waitMs) })] }));
 }
-function SummaryTotals({ totalExecMs, totalWaitMs, totalInputTokens, totalOutputTokens, }) {
+function SummaryTotals({ totalExecMs, totalWaitMs, totalInputTokens, totalOutputTokens, totalCostUsd, }) {
     const totalTokens = totalInputTokens + totalOutputTokens;
-    return (_jsxs("div", { "data-testid": "activity-summary", className: "border-border flex flex-col gap-1.5 border-t pt-3", children: [_jsx(SummaryRow, { label: "Total execution", value: formatDuration(totalExecMs) }), totalWaitMs > 0 ? (_jsxs(_Fragment, { children: [_jsx(SummaryRow, { label: "Total wait", value: formatDuration(totalWaitMs) }), _jsx(SummaryRow, { label: "Total wall-clock", value: formatDuration(totalExecMs + totalWaitMs) })] })) : null, totalTokens > 0 ? (_jsx(SummaryRow, { label: "Total tokens", value: `${formatTokens(totalTokens)} (${formatTokens(totalInputTokens)} in · ${formatTokens(totalOutputTokens)} out)` })) : null] }));
+    return (_jsxs("div", { "data-testid": "activity-summary", className: "border-border bg-card/30 flex flex-col gap-2 rounded-lg border p-3", children: [_jsx("div", { className: "text-muted-foreground mb-0.5 text-xs font-semibold tracking-wider uppercase", children: "Summary" }), _jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2", children: [_jsx(SummaryItem, { icon: Clock, label: "Total execution", value: formatDuration(totalExecMs) }), totalWaitMs > 0 ? (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { icon: Timer, label: "Total wait", value: formatDuration(totalWaitMs) }), _jsx(SummaryItem, { icon: Clock, label: "Total wall-clock", value: formatDuration(totalExecMs + totalWaitMs), className: "col-span-2" })] })) : null, totalTokens > 0 ? (_jsx(SummaryItem, { icon: Zap, label: "Total tokens", value: `${formatTokens(totalTokens)} (${formatTokens(totalInputTokens)} in · ${formatTokens(totalOutputTokens)} out)`, className: "col-span-2" })) : null, totalCostUsd > 0 ? (_jsx(SummaryItem, { icon: DollarSign, label: "Total cost", value: formatCost(totalCostUsd) })) : null] })] }));
 }
-function SummaryRow({ label, value }) {
-    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("span", { className: "text-xs font-medium", children: value })] }));
+function SummaryItem({ icon: Icon, label, value, className = '', }) {
+    return (_jsxs("div", { className: `flex items-center justify-between ${className}`, children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1.5 text-sm", children: [_jsx(Icon, { className: "h-3.5 w-3.5 opacity-50" }), _jsx("span", { className: "font-medium", children: label })] }), _jsx("span", { className: "text-sm font-semibold tabular-nums", children: value })] }));
 }

package/dist/src/presentation/web/components/common/feature-drawer-tabs/activity-tab.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"activity-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/activity-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAclC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAmK1C,2EAA2E;AAC3E,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,0CAA0C;AAC1C,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAwEhC,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,iBAAiB,EAAE,KAgC/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAiI3B,CAAC"}
+{"version":3,"file":"activity-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/activity-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAclC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAsM1C,2EAA2E;AAC3E,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,0CAA0C;AAC1C,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAwEhC,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,iBAAiB,EAAE,KAgC/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAiI3B,CAAC"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/activity-tab.stories.js

@@ -29,6 +29,13 @@ const singleRunTimings = [
         startedAt: '2025-01-15T10:00:01Z',
         completedAt: '2025-01-15T10:00:15Z',
         durationMs: 14000,
+        inputTokens: 28500,
+        outputTokens: 3200,
+        cacheCreationInputTokens: 22000,
+        cacheReadInputTokens: 0,
+        costUsd: 0.1245,
+        numTurns: 2,
+        durationApiMs: 8400,
     },
     {
         agentRunId: 'run-1',
@@ -38,6 +45,13 @@ const singleRunTimings = [
         durationMs: 90000,
         waitingApprovalAt: '2025-01-15T10:01:00Z',
         approvalWaitMs: 30000,
+        inputTokens: 45200,
+        outputTokens: 8100,
+        cacheCreationInputTokens: 12000,
+        cacheReadInputTokens: 22000,
+        costUsd: 0.2831,
+        numTurns: 5,
+        durationApiMs: 42000,
     },
     {
         agentRunId: 'run-1',
@@ -45,6 +59,13 @@ const singleRunTimings = [
         startedAt: '2025-01-15T10:01:45Z',
         completedAt: '2025-01-15T10:03:30Z',
         durationMs: 105000,
+        inputTokens: 92400,
+        outputTokens: 15600,
+        cacheCreationInputTokens: 8000,
+        cacheReadInputTokens: 34000,
+        costUsd: 0.5127,
+        numTurns: 8,
+        durationApiMs: 78000,
     },
     {
         agentRunId: 'run-1',
@@ -54,6 +75,13 @@ const singleRunTimings = [
         durationMs: 90000,
         waitingApprovalAt: '2025-01-15T10:04:30Z',
         approvalWaitMs: 15000,
+        inputTokens: 68300,
+        outputTokens: 12400,
+        cacheCreationInputTokens: 5000,
+        cacheReadInputTokens: 34000,
+        costUsd: 0.3892,
+        numTurns: 6,
+        durationApiMs: 55000,
     },
     {
         agentRunId: 'run-1',
@@ -61,6 +89,13 @@ const singleRunTimings = [
         startedAt: '2025-01-15T10:05:00Z',
         completedAt: '2025-01-15T10:15:00Z',
         durationMs: 600000,
+        inputTokens: 485000,
+        outputTokens: 128000,
+        cacheCreationInputTokens: 45000,
+        cacheReadInputTokens: 34000,
+        costUsd: 3.2451,
+        numTurns: 42,
+        durationApiMs: 385000,
     },
     {
         agentRunId: 'run-1',

package/dist/src/presentation/web/components/common/feature-drawer-tabs/overview-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overview-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/overview-tab.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAQxE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAqDrD"}
+{"version":3,"file":"overview-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/overview-tab.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAQxE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CA+DrD"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/overview-tab.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import { AlertTriangle, Check, ExternalLink, FileSearch, GitBranch, GitCommitHorizontal, RotateCcw, ShieldCheck, X, Zap, } from 'lucide-react';
+import { AlertTriangle, Check, ExternalLink, FileSearch, GitBranch, GitCommitHorizontal, RotateCcw, ShieldCheck, Square, X, Zap, } from 'lucide-react';
 import { InlineAttachments } from '../../common/inline-attachments/index.js';
 import { PrStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
 import { cn } from '../../../lib/utils.js';
@@ -15,7 +15,7 @@ import { getModelMeta } from '../../../lib/model-metadata.js';
 import { formatDuration } from '../../../lib/format-duration.js';
 export function OverviewTab({ data }) {
     const isCompleted = data.lifecycle === 'maintain';
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "feature-drawer-status", className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: lifecycleDisplayLabels[data.lifecycle] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FeatureStateBadge, { data: data }), data.state === 'error' && data.onRetry ? (_jsxs("button", { "data-testid": "feature-drawer-retry-button", onClick: () => data.onRetry(data.featureId), className: "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full bg-red-50 px-3 py-1.5 text-sm font-medium text-red-700 transition-colors hover:bg-red-100", children: [_jsx(RotateCcw, { className: "h-3.5 w-3.5" }), "Retry"] })) : null] }), !isCompleted && data.progress > 0 ? (_jsxs("div", { "data-testid": "feature-drawer-progress", className: "flex flex-col gap-1", children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-xs", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { children: [data.progress, "%"] })] }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', featureNodeStateConfig[data.state].progressClass), style: { width: `${data.progress}%` } }) })] })) : null, isCompleted && data.pr ? _jsx(FeaturePrInfo, { pr: data.pr }) : null] }), _jsx(FeatureInfo, { data: data }), !isCompleted && data.pr ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", { className: "p-4", children: _jsx(FeaturePrInfo, { pr: data.pr }) })] })) : null, _jsx(FeatureDetails, { data: data }), _jsx(FeatureSettings, { data: data })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "feature-drawer-status", className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: lifecycleDisplayLabels[data.lifecycle] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FeatureStateBadge, { data: data }), data.state === 'error' && data.onRetry ? (_jsxs("button", { "data-testid": "feature-drawer-retry-button", onClick: () => data.onRetry(data.featureId), className: "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full bg-red-50 px-3 py-1.5 text-sm font-medium text-red-700 transition-colors hover:bg-red-100", children: [_jsx(RotateCcw, { className: "h-3.5 w-3.5" }), "Retry"] })) : null, (data.state === 'running' || data.state === 'action-required') && data.onStop ? (_jsxs("button", { "data-testid": "feature-drawer-stop-button", onClick: () => data.onStop(data.featureId), className: "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full bg-red-50 px-3 py-1.5 text-sm font-medium text-red-700 transition-colors hover:bg-red-100", children: [_jsx(Square, { className: "h-3.5 w-3.5" }), "Stop"] })) : null] }), !isCompleted && data.progress > 0 ? (_jsxs("div", { "data-testid": "feature-drawer-progress", className: "flex flex-col gap-1", children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-xs", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { children: [data.progress, "%"] })] }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', featureNodeStateConfig[data.state].progressClass), style: { width: `${data.progress}%` } }) })] })) : null, isCompleted && data.pr ? _jsx(FeaturePrInfo, { pr: data.pr }) : null] }), _jsx(FeatureInfo, { data: data }), !isCompleted && data.pr ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", { className: "p-4", children: _jsx(FeaturePrInfo, { pr: data.pr }) })] })) : null, _jsx(FeatureDetails, { data: data }), _jsx(FeatureSettings, { data: data })] }));
 }
 function FeatureStateBadge({ data }) {
     const config = featureNodeStateConfig[data.state];

package/dist/src/presentation/web/components/common/feature-drawer-tabs/overview-tab.stories.d.ts

@@ -17,6 +17,8 @@ export declare const Blocked: Story;
 export declare const Error: Story;
 /** Error state with retry button visible. */
 export declare const ErrorWithRetry: Story;
+/** Running state with stop button visible. */
+export declare const RunningWithStop: Story;
 /** Minimal data — only required fields, no optional details or PR. */
 export declare const Minimal: Story;
 /** Fast mode feature — shows lightning icon in details section. */

package/dist/src/presentation/web/components/common/feature-drawer-tabs/overview-tab.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overview-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/overview-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAclC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AA0G1C,uEAAuE;AACvE,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AAEF,iDAAiD;AACjD,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,gDAAgD;AAChD,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAOF,6CAA6C;AAC7C,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAwBF,mEAAmE;AACnE,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAMF,0BAA0B;AAC1B,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAEF,sBAAsB;AACtB,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,oBAAoB;AACpB,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,sBAAsB;AACtB,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,oBAAoB,EAAE,KAclC,CAAC;AAqBF,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,EAAE,KAEpC,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF,+FAA+F;AAC/F,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC;AAMF,oFAAoF;AACpF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,kDAAkD;AAClD,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAEF,2CAA2C;AAC3C,eAAO,MAAM,oBAAoB,EAAE,KAYlC,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,mBAAmB,EAAE,KAQjC,CAAC"}
+{"version":3,"file":"overview-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/overview-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAclC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AA0G1C,uEAAuE;AACvE,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AAEF,iDAAiD;AACjD,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,gDAAgD;AAChD,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAOF,6CAA6C;AAC7C,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAwBF,mEAAmE;AACnE,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAMF,0BAA0B;AAC1B,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAEF,sBAAsB;AACtB,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,oBAAoB;AACpB,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,sBAAsB;AACtB,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,oBAAoB,EAAE,KAclC,CAAC;AAqBF,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,EAAE,KAEpC,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF,+FAA+F;AAC/F,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC;AAMF,oFAAoF;AACpF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,kDAAkD;AAClD,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAEF,2CAA2C;AAC3C,eAAO,MAAM,oBAAoB,EAAE,KAYlC,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,mBAAmB,EAAE,KAQjC,CAAC"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/overview-tab.stories.js

@@ -141,6 +141,10 @@ const errorWithRetryData = {
 export const ErrorWithRetry = {
     args: { data: errorWithRetryData },
 };
+/** Running state with stop button visible. */
+export const RunningWithStop = {
+    args: { data: { ...fullData, onStop: fn() } },
+};
 /** Minimal data — only required fields, no optional details or PR. */
 export const Minimal = {
     args: { data: minimalData },

package/dist/src/presentation/web/components/common/feature-node/feature-node-state-config.d.ts

@@ -90,6 +90,7 @@ export interface FeatureNodeData {
     onDelete?: (featureId: string, cleanup?: boolean, cascadeDelete?: boolean) => void;
     onRetry?: (featureId: string) => void;
     onStart?: (featureId: string) => void;
+    onStop?: (featureId: string) => void;
     showHandles?: boolean;
 }
 export type FeatureNodeType = Node<FeatureNodeData, 'featureNode'>;