@shepai/cli 1.103.1 → 1.104.0

package/dist/packages/core/src/application/use-cases/upgrade/upgrade-cli.use-case.d.ts

@@ -0,0 +1,27 @@
+/**
+ * UpgradeCliUseCase
+ *
+ * Executes a self-upgrade of @shepai/cli to the latest published version.
+ * Mirrors the CLI upgrade command logic but designed for use from the web layer.
+ *
+ * Flow:
+ *   1. Check latest version from npm registry (fail-open)
+ *   2. Compare with current version — return early if up to date
+ *   3. Run `npm i -g @shepai/cli@latest` with streamed output
+ *   4. Return result with old/new version info
+ */
+import type { IVersionService } from '../../ports/output/services/version-service.interface.js';
+export interface UpgradeResult {
+    status: 'up-to-date' | 'upgraded' | 'error';
+    currentVersion: string;
+    latestVersion: string | null;
+    errorMessage?: string;
+}
+export declare class UpgradeCliUseCase {
+    private readonly versionService;
+    constructor(versionService: IVersionService);
+    execute(onOutput?: (data: string) => void): Promise<UpgradeResult>;
+    private getLatestVersion;
+    private runNpmInstall;
+}
+//# sourceMappingURL=upgrade-cli.use-case.d.ts.map

package/dist/packages/core/src/application/use-cases/upgrade/upgrade-cli.use-case.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upgrade-cli.use-case.d.ts","sourceRoot":"","sources":["../../../../../../../packages/core/src/application/use-cases/upgrade/upgrade-cli.use-case.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0DAA0D,CAAC;AAEhG,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC;IAC5C,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,qBACa,iBAAiB;IAG1B,OAAO,CAAC,QAAQ,CAAC,cAAc;gBAAd,cAAc,EAAE,eAAe;IAG5C,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC;IAkCxE,OAAO,CAAC,gBAAgB;IA6CxB,OAAO,CAAC,aAAa;CAuBtB"}

package/dist/packages/core/src/application/use-cases/upgrade/upgrade-cli.use-case.js

@@ -0,0 +1,128 @@
+/**
+ * UpgradeCliUseCase
+ *
+ * Executes a self-upgrade of @shepai/cli to the latest published version.
+ * Mirrors the CLI upgrade command logic but designed for use from the web layer.
+ *
+ * Flow:
+ *   1. Check latest version from npm registry (fail-open)
+ *   2. Compare with current version — return early if up to date
+ *   3. Run `npm i -g @shepai/cli@latest` with streamed output
+ *   4. Return result with old/new version info
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { injectable, inject } from 'tsyringe';
+import { spawn } from 'node:child_process';
+const VERSION_CHECK_TIMEOUT_MS = 10_000;
+let UpgradeCliUseCase = class UpgradeCliUseCase {
+    versionService;
+    constructor(versionService) {
+        this.versionService = versionService;
+    }
+    async execute(onOutput) {
+        const { version: currentVersion } = this.versionService.getVersion();
+        // 1. Check latest version (fail-open)
+        const latestVersion = await this.getLatestVersion(onOutput);
+        // 2. Already up to date
+        if (latestVersion && latestVersion === currentVersion) {
+            onOutput?.(`Already up to date (v${currentVersion})\n`);
+            return { status: 'up-to-date', currentVersion, latestVersion };
+        }
+        // 3. Run upgrade
+        const target = latestVersion ? `v${latestVersion}` : 'latest';
+        onOutput?.(`Upgrading from v${currentVersion} to ${target}...\n`);
+        try {
+            const exitCode = await this.runNpmInstall(onOutput);
+            if (exitCode === 0) {
+                onOutput?.(`Successfully upgraded to ${target}\n`);
+                return { status: 'upgraded', currentVersion, latestVersion };
+            }
+            else {
+                const msg = `npm install exited with code ${exitCode}`;
+                onOutput?.(`Error: ${msg}\n`);
+                return { status: 'error', currentVersion, latestVersion, errorMessage: msg };
+            }
+        }
+        catch (error) {
+            const msg = error instanceof Error ? error.message : 'Installation failed';
+            onOutput?.(`Error: ${msg}\n`);
+            return { status: 'error', currentVersion, latestVersion, errorMessage: msg };
+        }
+    }
+    getLatestVersion(onOutput) {
+        return new Promise((resolve) => {
+            let output = '';
+            let settled = false;
+            const child = spawn('npm', ['view', '@shepai/cli', 'version'], {
+                stdio: ['ignore', 'pipe', 'pipe'],
+            });
+            const timeout = setTimeout(() => {
+                if (!settled) {
+                    settled = true;
+                    child.kill();
+                    onOutput?.('Version check timed out, proceeding with upgrade...\n');
+                    resolve(null);
+                }
+            }, VERSION_CHECK_TIMEOUT_MS);
+            child.stdout?.on('data', (data) => {
+                output += data.toString();
+            });
+            child.on('close', (code) => {
+                if (!settled) {
+                    settled = true;
+                    clearTimeout(timeout);
+                    if (code === 0 && output.trim()) {
+                        resolve(output.trim());
+                    }
+                    else {
+                        resolve(null);
+                    }
+                }
+            });
+            child.on('error', () => {
+                if (!settled) {
+                    settled = true;
+                    clearTimeout(timeout);
+                    onOutput?.('Could not check latest version\n');
+                    resolve(null);
+                }
+            });
+        });
+    }
+    runNpmInstall(onOutput) {
+        return new Promise((resolve, reject) => {
+            const child = spawn('npm', ['i', '-g', '@shepai/cli@latest'], {
+                stdio: ['ignore', 'pipe', 'pipe'],
+            });
+            child.stdout?.on('data', (data) => {
+                onOutput?.(data.toString());
+            });
+            child.stderr?.on('data', (data) => {
+                onOutput?.(data.toString());
+            });
+            child.on('close', (code) => {
+                resolve(code ?? 1);
+            });
+            child.on('error', (err) => {
+                reject(err);
+            });
+        });
+    }
+};
+UpgradeCliUseCase = __decorate([
+    injectable(),
+    __param(0, inject('IVersionService')),
+    __metadata("design:paramtypes", [Object])
+], UpgradeCliUseCase);
+export { UpgradeCliUseCase };

package/dist/packages/core/src/infrastructure/di/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../../packages/core/src/infrastructure/di/container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAiHrC;;;;;;GAMG;AACH,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,OAAO,SAAS,CAAC,CA0SrE;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD;AAED;;;GAGG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../../packages/core/src/infrastructure/di/container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAkHrC;;;;;;GAMG;AACH,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,OAAO,SAAS,CAAC,CA8SrE;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD;AAED;;;GAGG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/packages/core/src/infrastructure/di/container.js

@@ -77,6 +77,7 @@ import { DeleteRepositoryUseCase } from '../../application/use-cases/repositorie
 import { CheckAndUnblockFeaturesUseCase } from '../../application/use-cases/features/check-and-unblock-features.use-case.js';
 import { UpdateFeatureLifecycleUseCase } from '../../application/use-cases/features/update/update-feature-lifecycle.use-case.js';
 import { CleanupFeatureWorktreeUseCase } from '../../application/use-cases/features/cleanup-feature-worktree.use-case.js';
+import { UpgradeCliUseCase } from '../../application/use-cases/upgrade/upgrade-cli.use-case.js';
 // Session listing
 import { ClaudeCodeSessionRepository } from '../services/agents/sessions/claude-code-session.repository.js';
 import { StubSessionRepository } from '../services/agents/sessions/stub-session.repository.js';
@@ -279,6 +280,7 @@ export async function initializeContainer() {
     container.registerSingleton(CheckAndUnblockFeaturesUseCase);
     container.registerSingleton(UpdateFeatureLifecycleUseCase);
     container.registerSingleton(CleanupFeatureWorktreeUseCase);
+    container.registerSingleton(UpgradeCliUseCase);
     // Session repositories (per-AgentType string tokens)
     container.register(`IAgentSessionRepository:${AgentType.ClaudeCode}`, {
         useFactory: () => new ClaudeCodeSessionRepository(),
@@ -360,6 +362,9 @@ export async function initializeContainer() {
     container.register('CleanupFeatureWorktreeUseCase', {
         useFactory: (c) => c.resolve(CleanupFeatureWorktreeUseCase),
     });
+    container.register('UpgradeCliUseCase', {
+        useFactory: (c) => c.resolve(UpgradeCliUseCase),
+    });
     _initialized = true;
     return container;
 }

package/dist/src/presentation/cli/ui/symbols.d.ts

@@ -19,7 +19,7 @@ export declare const symbols: {
     /** Warning triangle */
     readonly warning: "⚠" | "‼";
     /** Info circle */
-    readonly info: "ℹ" | "i";
+    readonly info: "i" | "ℹ";
     /** Arrow/pointer */
     readonly arrow: "→" | "->";
     /** Bullet point */

package/dist/src/presentation/web/app/api/cli-upgrade/route.d.ts

@@ -0,0 +1,3 @@
+export declare const dynamic = "force-dynamic";
+export declare function POST(): Promise<Response>;
+//# sourceMappingURL=route.d.ts.map

package/dist/src/presentation/web/app/api/cli-upgrade/route.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/app/api/cli-upgrade/route.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO,kBAAkB,CAAC;AAEvC,wBAAsB,IAAI,IAAI,OAAO,CAAC,QAAQ,CAAC,CA+B9C"}

package/dist/src/presentation/web/app/api/cli-upgrade/route.js

@@ -0,0 +1,31 @@
+import { resolve } from '../../../lib/server-container.js';
+// Force dynamic — SSE streams must never be statically optimized or cached
+export const dynamic = 'force-dynamic';
+export async function POST() {
+    const useCase = resolve('UpgradeCliUseCase');
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+        async start(controller) {
+            try {
+                const result = await useCase.execute((chunk) => {
+                    controller.enqueue(encoder.encode(`data: ${chunk.replace(/\n/g, '\ndata: ')}\n\n`));
+                });
+                controller.enqueue(encoder.encode(`event: done\ndata: ${JSON.stringify(result)}\n\n`));
+            }
+            catch (error) {
+                const message = error instanceof Error ? error.message : 'Upgrade failed';
+                controller.enqueue(encoder.encode(`event: done\ndata: ${JSON.stringify({ status: 'error', currentVersion: '', latestVersion: null, errorMessage: message })}\n\n`));
+            }
+            finally {
+                controller.close();
+            }
+        },
+    });
+    return new Response(stream, {
+        headers: {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            Connection: 'keep-alive',
+        },
+    });
+}

package/dist/src/presentation/web/components/common/control-center-drawer/feature-drawer-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-drawer-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/feature-drawer-client.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAG/D,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,wBAAwB,2CA4iB1F"}
+{"version":3,"file":"feature-drawer-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/feature-drawer-client.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAG/D,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,wBAAwB,2CA6iB1F"}

package/dist/src/presentation/web/components/common/control-center-drawer/feature-drawer-client.js

@@ -329,7 +329,7 @@ export function FeatureDrawerClient({ view: initialView, urlTab }) {
     // ── Body ──────────────────────────────────────────────────────────────
     let body = null;
     if (view.type === 'feature' && featureNode) {
-        body = (_jsx(FeatureDrawerTabs, { featureNode: featureNode, featureId: featureNode.featureId, initialTab: view.initialTab, urlTab: urlTab, prdData: prdData, prdSelections: prdSelections, onPrdSelect: (qId, oId) => setPrdSelections((prev) => ({ ...prev, [qId]: oId })), onPrdApprove: handlePrdApprove, onPrdReject: handlePrdReject, isPrdLoading: isLoadingPrd, techData: techData, onTechApprove: handleTechApprove, onTechReject: handleTechReject, isTechLoading: isLoadingTech, productData: isLoadingTechProduct ? null : techProductData, mergeData: mergeData, onMergeApprove: handleMergeApprove, onMergeReject: handleMergeReject, isMergeLoading: isLoadingMerge, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: setChatInput }));
+        body = (_jsx(FeatureDrawerTabs, { featureNode: featureNode, featureId: featureNode.featureId, initialTab: view.initialTab, urlTab: urlTab, sseEvents: events, prdData: prdData, prdSelections: prdSelections, onPrdSelect: (qId, oId) => setPrdSelections((prev) => ({ ...prev, [qId]: oId })), onPrdApprove: handlePrdApprove, onPrdReject: handlePrdReject, isPrdLoading: isLoadingPrd, techData: techData, onTechApprove: handleTechApprove, onTechReject: handleTechReject, isTechLoading: isLoadingTech, productData: isLoadingTechProduct ? null : techProductData, mergeData: mergeData, onMergeApprove: handleMergeApprove, onMergeReject: handleMergeReject, isMergeLoading: isLoadingMerge, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: setChatInput }));
     }
     return (_jsx(BaseDrawer, { open: isOpen, onClose: attemptClose, size: "md", modal: false, header: header, "data-testid": view.type === 'feature' ? 'feature-drawer' : 'repository-drawer', children: body }));
 }

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":"AAGA,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACtB,MAAM,yCAAyC,CAAC;AAIjD,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,2CAyD3F"}
+{"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;AA8CjD,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,2CA4D3F"}

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

@@ -1,8 +1,48 @@
 '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 } from 'lucide-react';
 import { InlineAttachments } from '../../common/inline-attachments/index.js';
 import { formatDuration } from '../../../lib/format-duration.js';
+/**
+ * Computes the effective duration for a phase timing entry.
+ * For completed phases, uses the server-provided durationMs.
+ * For in-progress phases (has startedAt but no completedAt), computes
+ * elapsed time client-side so the UI shows a live-updating timer.
+ */
+function getEffectiveDuration(timing, now) {
+    if (timing.durationMs != null && timing.durationMs > 0)
+        return timing.durationMs;
+    if (!timing.completedAt && timing.startedAt) {
+        const started = new Date(timing.startedAt).getTime();
+        if (!Number.isNaN(started))
+            return Math.max(0, now - started);
+    }
+    return 0;
+}
+/** Returns true if any non-lifecycle phase is still in progress. */
+function hasRunningPhase(timings) {
+    return timings.some((t) => !t.phase.startsWith('run:') && !t.completedAt && t.startedAt);
+}
+/** Hook that ticks every second while there are running phases. */
+function useTickingNow(timings) {
+    const [now, setNow] = useState(Date.now);
+    const intervalRef = useRef(null);
+    useEffect(() => {
+        const running = timings ? hasRunningPhase(timings) : false;
+        if (running) {
+            // Tick every second
+            intervalRef.current = setInterval(() => setNow(Date.now()), 1000);
+        }
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, [timings]);
+    return now;
+}
 const NODE_TO_PHASE = {
     analyze: 'Analyzing',
     requirements: 'Requirements',
@@ -94,6 +134,7 @@ export function buildLifecycleTimeline(timings, feedback) {
  * Component
  * ------------------------------------------------------------------------- */
 export function ActivityTab({ timings, loading, error, rejectionFeedback }) {
+    const now = useTickingNow(timings);
     if (loading) {
         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" }) }));
     }
@@ -104,24 +145,24 @@ export function ActivityTab({ timings, loading, error, rejectionFeedback }) {
         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" })] }));
     }
     const nodeTimings = timings.filter((t) => !isLifecycleEvent(t.phase));
-    const maxDurationMs = Math.max(...nodeTimings.map((t) => t.durationMs ?? 0), ...nodeTimings.map((t) => t.approvalWaitMs ?? 0), 0);
+    const maxDurationMs = Math.max(...nodeTimings.map((t) => getEffectiveDuration(t, now)), ...nodeTimings.map((t) => t.approvalWaitMs ?? 0), 0);
     const iterations = buildLifecycleTimeline(timings, rejectionFeedback);
     const hasMultipleIterations = iterations.length > 1;
-    const totalExecMs = nodeTimings.reduce((sum, t) => sum + (t.durationMs ?? 0), 0);
+    const totalExecMs = nodeTimings.reduce((sum, t) => sum + getEffectiveDuration(t, now), 0);
     const totalWaitMs = nodeTimings.reduce((sum, t) => sum + (t.approvalWaitMs ?? 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 }, iteration.number))) }), totalExecMs > 0 ? (_jsx(SummaryTotals, { totalExecMs: totalExecMs, totalWaitMs: totalWaitMs })) : null] }));
+    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 })) : null] }));
 }
 /* ---------------------------------------------------------------------------
  * Iteration group — one cycle of work
  * ------------------------------------------------------------------------- */
-function IterationGroup({ iteration, showHeader, maxDurationMs, }) {
+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 }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
+                return (_jsx(NodeTimingRow, { timing: t, maxDurationMs: maxDurationMs, now: now }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
             })] }));
 }
 /* ---------------------------------------------------------------------------
@@ -134,14 +175,15 @@ function LifecycleEventRow({ timing, message, attachments, }) {
     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] }));
 }
-function NodeTimingRow({ timing, maxDurationMs, }) {
+function NodeTimingRow({ timing, maxDurationMs, now, }) {
     const label = timing.phase.includes(':')
         ? `rev ${timing.phase.split(':')[1]}`
         : (NODE_TO_PHASE[timing.phase] ?? timing.phase);
-    const durationMs = timing.durationMs ?? 0;
+    const durationMs = getEffectiveDuration(timing, now);
     const barPercent = maxDurationMs > 0 ? Math.max(2, (durationMs / maxDurationMs) * 100) : 2;
+    const isRunning = !timing.completedAt && !!timing.startedAt;
     const barColorClass = timing.completedAt ? 'bg-emerald-500' : 'bg-blue-500';
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { "data-testid": `timing-bar-${timing.phase}`, className: "flex items-center gap-3", children: [_jsx("span", { className: "text-muted-foreground w-24 shrink-0 text-xs", children: label }), _jsx("div", { className: "bg-muted h-3 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: `h-full rounded-full ${barColorClass}`, style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-14 shrink-0 text-right text-xs", children: formatDuration(durationMs) })] }), timing.approvalWaitMs != null && timing.approvalWaitMs > 0 ? (_jsx(ApprovalWaitRow, { timing: timing, maxDurationMs: maxDurationMs })) : null] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { "data-testid": `timing-bar-${timing.phase}`, className: "flex items-center gap-3", children: [_jsx("span", { className: "text-muted-foreground w-24 shrink-0 text-xs", children: label }), _jsx("div", { className: "bg-muted h-3 flex-1 overflow-hidden rounded-full", 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-14 shrink-0 text-right text-xs", children: formatDuration(durationMs) })] }), timing.approvalWaitMs != null && timing.approvalWaitMs > 0 ? (_jsx(ApprovalWaitRow, { timing: timing, maxDurationMs: maxDurationMs })) : null] }));
 }
 function ApprovalWaitRow({ timing, maxDurationMs, }) {
     const waitMs = timing.approvalWaitMs ?? 0;

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

@@ -1,3 +1,4 @@
+import type { NotificationEvent } from '../../../../../../packages/core/src/domain/generated/output.js';
 import type { FeatureNodeData } from '../../common/feature-node/index.js';
 import type { PrdQuestionnaireData } from '../../common/prd-questionnaire/index.js';
 import type { TechDecisionsReviewData } from '../../common/tech-decisions-review/index.js';
@@ -11,6 +12,8 @@ export interface FeatureDrawerTabsProps {
     initialTab?: FeatureTabKey;
     /** Tab key from URL path segment (e.g. /feature/[id]/activity → 'activity'). */
     urlTab?: FeatureTabKey;
+    /** SSE events from the agent events provider, used to trigger tab data refresh. */
+    sseEvents?: readonly NotificationEvent[];
     prdData?: PrdQuestionnaireData | null;
     prdSelections?: Record<string, string>;
     onPrdSelect?: (questionId: string, optionId: string) => void;
@@ -30,5 +33,5 @@ export interface FeatureDrawerTabsProps {
     chatInput?: string;
     onChatInputChange?: (value: string) => void;
 }
-export declare function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab, prdData, prdSelections, onPrdSelect, onPrdApprove, onPrdReject, isPrdLoading, techData, onTechApprove, onTechReject, isTechLoading, productData, mergeData, onMergeApprove, onMergeReject, isMergeLoading, isRejecting, chatInput, onChatInputChange, }: FeatureDrawerTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab, prdData, prdSelections, onPrdSelect, onPrdApprove, onPrdReject, isPrdLoading, techData, onTechApprove, onTechReject, isTechLoading, productData, mergeData, onMergeApprove, onMergeReject, isMergeLoading, isRejecting, chatInput, onChatInputChange, sseEvents, }: FeatureDrawerTabsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=feature-drawer-tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"feature-drawer-tabs.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACzF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAMxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAQ9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAiD3F,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,eAAe,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,gFAAgF;IAChF,MAAM,CAAC,EAAE,aAAa,CAAC;IAGvB,OAAO,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC3E,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,WAAW,CAAC,EAAE,2BAA2B,GAAG,IAAI,CAAC;IAGjD,SAAS,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAwBD,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,SAAS,EACT,UAAU,EACV,MAAM,EACN,OAAO,EACP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,SAAS,EACT,iBAAiB,GAClB,EAAE,sBAAsB,2CAmSxB"}
+{"version":3,"file":"feature-drawer-tabs.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAS9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACzF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAMxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAQ9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAiD3F,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,eAAe,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,gFAAgF;IAChF,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,mFAAmF;IACnF,SAAS,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IAGzC,OAAO,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC3E,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,WAAW,CAAC,EAAE,2BAA2B,GAAG,IAAI,CAAC;IAGjD,SAAS,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAwBD,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,SAAS,EACT,UAAU,EACV,MAAM,EACN,OAAO,EACP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,SAAS,EACT,iBAAiB,EACjB,SAAS,GACV,EAAE,sBAAsB,2CAwTxB"}

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

@@ -64,7 +64,7 @@ const TAB_FETCHERS = {
     activity: fetchActivity,
     plan: fetchPlan,
 };
-export function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab, prdData, prdSelections, onPrdSelect, onPrdApprove, onPrdReject, isPrdLoading, techData, onTechApprove, onTechReject, isTechLoading, productData, mergeData, onMergeApprove, onMergeReject, isMergeLoading, isRejecting, chatInput, onChatInputChange, }) {
+export function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab, prdData, prdSelections, onPrdSelect, onPrdApprove, onPrdReject, isPrdLoading, techData, onTechApprove, onTechReject, isTechLoading, productData, mergeData, onMergeApprove, onMergeReject, isMergeLoading, isRejecting, chatInput, onChatInputChange, sseEvents, }) {
     const pathname = usePathname();
     const featureLogs = useFeatureLogs(featureId);
     const visibleTabs = useMemo(() => computeVisibleTabs(featureNode), [featureNode]);
@@ -159,6 +159,7 @@ export function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab,
     }, [featureId]);
     // When initialTab changes (e.g. SSE updates lifecycle), switch to it if visible
     // and sync the URL with replaceState so the address bar reflects the new tab.
+    // Also trigger lazy fetch for the new tab so data is ready immediately.
     const prevInitialTabRef = useRef(initialTab);
     useEffect(() => {
         if (prevInitialTabRef.current !== initialTab &&
@@ -166,13 +167,17 @@ export function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab,
             visibleTabs.includes(initialTab)) {
             prevInitialTabRef.current = initialTab;
             setActiveTab(initialTab);
+            // Trigger lazy fetch for the new tab if it's a lazy-loaded tab
+            if (initialTab === 'activity' || initialTab === 'plan') {
+                fetchTab(initialTab);
+            }
             // Sync URL to match the new tab
             const targetUrl = initialTab === 'overview' ? basePath : `${basePath}/${initialTab}`;
             if (targetUrl !== window.location.pathname) {
                 window.history.replaceState(null, '', targetUrl);
             }
         }
-    }, [initialTab, visibleTabs, basePath]);
+    }, [initialTab, visibleTabs, basePath, fetchTab]);
     // If the active tab becomes invisible (lifecycle changed), fall back to overview
     // and sync the URL accordingly.
     useEffect(() => {
@@ -183,19 +188,34 @@ export function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab,
             }
         }
     }, [visibleTabs, activeTab, basePath]);
-    // SSE refresh: re-fetch active lazy tab when featureNode reference changes
-    const featureNodeRef = useRef(featureNode);
+    // SSE refresh: re-fetch lazy tab data when relevant SSE events arrive
+    // for this feature (e.g. PhaseCompleted, AgentStarted, AgentCompleted).
+    // Always refresh 'activity' data (even if not the active tab) so switching
+    // to the activity tab shows up-to-date timings without a loading flash.
     const activeTabRef = useRef(activeTab);
     activeTabRef.current = activeTab;
+    const sseProcessedRef = useRef(0);
     useEffect(() => {
-        if (featureNodeRef.current !== featureNode) {
-            featureNodeRef.current = featureNode;
-            const current = activeTabRef.current;
-            if (current === 'activity' || current === 'plan') {
-                refreshTab(current);
-            }
+        if (!sseEvents || sseEvents.length === 0)
+            return;
+        // Clamp cursor if events were pruned
+        if (sseProcessedRef.current > sseEvents.length) {
+            sseProcessedRef.current = 0;
+        }
+        if (sseEvents.length <= sseProcessedRef.current)
+            return;
+        const newEvents = sseEvents.slice(sseProcessedRef.current);
+        sseProcessedRef.current = sseEvents.length;
+        const hasRelevantEvent = newEvents.some((e) => e.featureId === featureId);
+        if (!hasRelevantEvent)
+            return;
+        // Always refresh activity data so it stays current for when the user switches tabs
+        refreshTab('activity');
+        const current = activeTabRef.current;
+        if (current === 'plan') {
+            refreshTab(current);
         }
-    }, [featureNode, refreshTab]);
+    }, [sseEvents, featureId, refreshTab]);
     const handleTabChange = useCallback((value) => {
         const tab = value;
         isUserInteraction.current = true;

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":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAMxE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAwCrD"}
+{"version":3,"file":"overview-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/overview-tab.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAOxE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAwCrD"}

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
 import { AlertTriangle, ExternalLink, GitBranch, GitCommitHorizontal, Zap } from 'lucide-react';
 import { InlineAttachments } from '../../common/inline-attachments/index.js';
 import { PrStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
@@ -10,6 +11,7 @@ import { CiStatusBadge } from '../../common/ci-status-badge/index.js';
 import { CometSpinner } from '../../ui/comet-spinner.js';
 import { featureNodeStateConfig, lifecycleDisplayLabels } from '../../common/feature-node/index.js';
 import { getAgentTypeIcon, agentTypeLabels, } from '../../common/feature-node/agent-type-icons.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] }), _jsx(FeatureStateBadge, { data: data }), !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 })] }));
@@ -63,11 +65,42 @@ function FeaturePrInfo({ pr }) {
     return (_jsx("div", { "data-testid": "feature-drawer-pr", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("a", { href: pr.url, target: "_blank", rel: "noopener noreferrer", className: "text-primary flex items-center gap-1.5 text-sm font-semibold underline underline-offset-2", children: ["PR #", pr.number, _jsx(ExternalLink, { className: "h-3.5 w-3.5" })] }), _jsx(Badge, { className: prStatusStyles[pr.status], children: pr.status })] }), pr.ciStatus ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "CI Status" }), _jsx(CiStatusBadge, { status: pr.ciStatus })] })) : null, pr.mergeable === false ? (_jsxs("div", { "data-testid": "pr-merge-conflict", className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Merge Status" }), _jsxs(Badge, { className: "border-transparent bg-orange-50 text-orange-700 hover:bg-orange-50", children: [_jsx(AlertTriangle, { className: "mr-1 h-3.5 w-3.5" }), "Conflicts"] })] })) : null, pr.commitHash ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Commit" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(GitCommitHorizontal, { className: "text-muted-foreground h-3.5 w-3.5" }), _jsx("code", { className: "bg-muted text-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]", children: pr.commitHash.slice(0, 7) })] })] })) : null] }) }));
 }
 // ── Details section ──────────────────────────────────────────────────
+/** Hook that returns a live-updating elapsed time string for running features. */
+function useElapsedTime(startedAt) {
+    const [elapsed, setElapsed] = useState(null);
+    const intervalRef = useRef(null);
+    useEffect(() => {
+        if (!startedAt) {
+            setElapsed(null);
+            return;
+        }
+        // Compute immediately
+        setElapsed(formatDuration(Math.max(0, Date.now() - startedAt)));
+        // Tick every second
+        intervalRef.current = setInterval(() => {
+            setElapsed(formatDuration(Math.max(0, Date.now() - startedAt)));
+        }, 1000);
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, [startedAt]);
+    return elapsed;
+}
 function FeatureDetails({ data }) {
-    const hasAnyDetail = data.fastMode ?? data.agentType ?? data.runtime ?? data.blockedBy ?? data.errorMessage;
+    const isRunning = data.state === 'running' || data.state === 'action-required';
+    const elapsedTime = useElapsedTime(isRunning ? data.startedAt : undefined);
+    const hasAnyDetail = data.fastMode ??
+        data.agentType ??
+        data.runtime ??
+        elapsedTime ??
+        data.blockedBy ??
+        data.errorMessage;
     if (!hasAnyDetail)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-details", className: "flex flex-col gap-3 p-4", children: [data.fastMode ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Mode" }), _jsxs("span", { className: "flex items-center gap-2 text-sm", children: [_jsx(Zap, { className: "h-4 w-4 shrink-0 text-amber-500" }), "Fast Mode"] })] })) : null, data.agentType ? _jsx(AgentDetailRow, { agentType: data.agentType }) : null, data.runtime ? _jsx(DetailRow, { label: "Runtime", value: data.runtime }) : null, data.blockedBy ? _jsx(DetailRow, { label: "Blocked by", value: data.blockedBy }) : null, data.errorMessage ? _jsx(DetailRow, { label: "Error", value: data.errorMessage }) : null] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-details", className: "flex flex-col gap-3 p-4", children: [data.fastMode ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Mode" }), _jsxs("span", { className: "flex items-center gap-2 text-sm", children: [_jsx(Zap, { className: "h-4 w-4 shrink-0 text-amber-500" }), "Fast Mode"] })] })) : null, data.agentType ? _jsx(AgentDetailRow, { agentType: data.agentType }) : null, data.runtime ? _jsx(DetailRow, { label: "Runtime", value: data.runtime }) : null, !data.runtime && elapsedTime ? (_jsx(DetailRow, { label: "Running for", value: elapsedTime })) : null, data.blockedBy ? _jsx(DetailRow, { label: "Blocked by", value: data.blockedBy }) : null, data.errorMessage ? _jsx(DetailRow, { label: "Error", value: data.errorMessage }) : null] })] }));
 }
 function AgentDetailRow({ agentType }) {
     const Icon = getAgentTypeIcon(agentType);

package/dist/src/presentation/web/components/common/version-badge/version-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version-badge.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/version-badge/version-badge.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,UAAU,EACV,KAAa,EACb,WAA2B,EAC3B,WAAW,EACX,YAAY,GACb,EAAE,iBAAiB,2CAyDnB"}
+{"version":3,"file":"version-badge.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/version-badge/version-badge.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,UAAU,EACV,KAAa,EACb,WAA2B,EAC3B,WAAW,EACX,YAAY,GACb,EAAE,iBAAiB,2CA2EnB"}

package/dist/src/presentation/web/components/common/version-badge/version-badge.js

@@ -2,13 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { useNpmVersionCheck } from '../../../hooks/use-npm-version-check.js';
+import { useCliUpgrade } from '../../../hooks/use-cli-upgrade.js';
 export function VersionBadge({ version, branch, commitHash, isDev = false, packageName = '@shepai/cli', description, instancePath, }) {
     const shortHash = commitHash?.slice(0, 7);
     const { latest, updateAvailable } = useNpmVersionCheck(version);
+    const { status: upgradeStatus, startUpgrade } = useCliUpgrade();
     // In dev mode show "1.92.2-dev", in production show "v1.92.2"
     const displayVersion = isDev ? `${version}-dev` : `v${version}`;
-    const npmUrl = `https://www.npmjs.com/package/${packageName}`;
-    return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { className: "text-muted-foreground/80 hover:text-muted-foreground relative cursor-default text-[11px] leading-tight transition-colors", "data-testid": "version-label", children: [displayVersion, updateAvailable ? (_jsx("span", { className: "absolute -top-0.5 -right-1.5 size-1.5 rounded-full bg-emerald-400", "data-testid": "update-dot" })) : null] }) }), _jsxs(TooltipContent, { side: "right", className: "max-w-[280px] space-y-1 p-3 text-left", children: [_jsx("div", { className: "mb-1.5 text-xs font-semibold", children: packageName }), description ? (_jsx("div", { className: "text-[10px] leading-snug opacity-70", children: description })) : null, _jsxs("div", { className: "border-t border-white/10 pt-1.5", children: [_jsx(Row, { label: "Version", value: displayVersion }), isDev && branch ? _jsx(Row, { label: "Branch", value: branch }) : null, isDev && shortHash ? _jsx(Row, { label: "Commit", value: shortHash, mono: true }) : null, isDev && instancePath ? _jsx(Row, { label: "Path", value: instancePath, mono: true }) : null, latest ? (_jsx(Row, { label: "Latest", value: `v${latest}`, highlight: updateAvailable })) : null] }), updateAvailable ? (_jsx("div", { className: "border-t border-white/10 pt-1.5", children: _jsxs("a", { href: npmUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-[10px] font-medium text-emerald-400 transition-colors hover:text-emerald-300", "data-testid": "upgrade-link", children: ["Upgrade to v", latest, " \u2192"] }) })) : null] })] }) }));
+    const isUpgrading = upgradeStatus === 'upgrading';
+    const didUpgrade = upgradeStatus === 'upgraded';
+    const upgradeError = upgradeStatus === 'error';
+    return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { className: "text-muted-foreground/80 hover:text-muted-foreground relative cursor-default text-[11px] leading-tight transition-colors", "data-testid": "version-label", children: [displayVersion, updateAvailable && !didUpgrade ? (_jsx("span", { className: "absolute -top-0.5 -right-1.5 size-1.5 rounded-full bg-emerald-400", "data-testid": "update-dot" })) : null] }) }), _jsxs(TooltipContent, { side: "right", className: "max-w-[280px] space-y-1 p-3 text-left", children: [_jsx("div", { className: "mb-1.5 text-xs font-semibold", children: packageName }), description ? (_jsx("div", { className: "text-[10px] leading-snug opacity-70", children: description })) : null, _jsxs("div", { className: "border-t border-white/10 pt-1.5", children: [_jsx(Row, { label: "Version", value: displayVersion }), isDev && branch ? _jsx(Row, { label: "Branch", value: branch }) : null, isDev && shortHash ? _jsx(Row, { label: "Commit", value: shortHash, mono: true }) : null, isDev && instancePath ? _jsx(Row, { label: "Path", value: instancePath, mono: true }) : null, latest ? (_jsx(Row, { label: "Latest", value: `v${latest}`, highlight: updateAvailable })) : null] }), didUpgrade ? (_jsx("div", { className: "border-t border-white/10 pt-1.5", children: _jsx("span", { className: "text-[10px] font-medium text-emerald-400", "data-testid": "upgrade-success", children: "Upgraded successfully \u2014 restart to apply" }) })) : upgradeError ? (_jsx("div", { className: "border-t border-white/10 pt-1.5", children: _jsx("span", { className: "text-[10px] font-medium text-red-400", "data-testid": "upgrade-error", children: "Upgrade failed" }) })) : updateAvailable ? (_jsx("div", { className: "border-t border-white/10 pt-1.5", children: _jsx("button", { type: "button", onClick: startUpgrade, disabled: isUpgrading, className: "inline-flex items-center gap-1 text-[10px] font-medium text-emerald-400 transition-colors hover:text-emerald-300 disabled:opacity-50", "data-testid": "upgrade-button", children: isUpgrading ? 'Upgrading...' : `Upgrade to v${latest}` }) })) : null] })] }) }));
 }
 function Row({ label, value, highlight, mono, }) {
     return (_jsxs("div", { className: "flex items-center justify-between gap-4 text-[10px]", children: [_jsx("span", { className: "opacity-60", children: label }), _jsx("span", { className: [

package/dist/src/presentation/web/components/common/version-badge/version-badge.stories.d.ts

@@ -11,9 +11,9 @@ export declare const Development: Story;
 export declare const LongBranch: Story;
 /** Minimal info — no optional fields. */
 export declare const Minimal: Story;
-/** Update available — green dot appears, tooltip shows "Upgrade to v2.0.0" link. */
+/** Update available — green dot appears, tooltip shows "Upgrade to v2.0.0" button. */
 export declare const UpdateAvailable: Story;
-/** Update available in dev mode — green dot + upgrade link alongside dev info. */
+/** Update available in dev mode — green dot + upgrade button alongside dev info. */
 export declare const UpdateAvailableDev: Story;
 /** Fetch error — no update info shown, badge behaves normally. */
 export declare const FetchError: Story;