@shepai/cli 1.78.1 → 1.79.0

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

@@ -3,15 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import { toast } from 'sonner';
-import { Loader2, Trash2, ExternalLink, GitCommitHorizontal, Play, Square } from 'lucide-react';
-import { PrStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { Loader2, Trash2, Play, Square, Copy, Check } from 'lucide-react';
 import { approveFeature } from '../../../app/actions/approve-feature.js';
 import { rejectFeature } from '../../../app/actions/reject-feature.js';
 import { getFeatureArtifact } from '../../../app/actions/get-feature-artifact.js';
 import { getResearchArtifact } from '../../../app/actions/get-research-artifact.js';
 import { getMergeReviewData } from '../../../app/actions/get-merge-review-data.js';
 import { deleteFeature } from '../../../app/actions/delete-feature.js';
-import { cn } from '../../../lib/utils.js';
 import { useFeatureFlags } from '../../../hooks/feature-flags-context.js';
 import { useSoundAction } from '../../../hooks/use-sound-action.js';
 import { useGuardedDrawerClose } from '../../../hooks/drawer-close-guard.js';
@@ -21,21 +19,14 @@ import { BaseDrawer } from '../../common/base-drawer/index.js';
 import { DeploymentStatusBadge } from '../../common/deployment-status-badge/index.js';
 import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
 import { Button } from '../../ui/button.js';
-import { Badge } from '../../ui/badge.js';
-import { Separator } from '../../ui/separator.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
-import { CometSpinner } from '../../ui/comet-spinner.js';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '../../ui/alert-dialog.js';
-import { CiStatusBadge } from '../../common/ci-status-badge/index.js';
 import { ActionButton } from '../../common/action-button/index.js';
 import { OpenActionMenu } from '../../common/open-action-menu/index.js';
-import { PrdQuestionnaire } from '../../common/prd-questionnaire/index.js';
-import { TechReviewTabs } from '../../common/tech-review-tabs/index.js';
-import { MergeReview } from '../../common/merge-review/index.js';
-import { featureNodeStateConfig, lifecycleDisplayLabels } from '../../common/feature-node/index.js';
+import { FeatureDrawerTabs } from '../../common/feature-drawer-tabs/index.js';
 import { useFeatureActions } from '../../common/feature-drawer/use-feature-actions.js';
 import { resolveSseEventUpdates } from '../../common/feature-node/derive-feature-state.js';
-import { deriveFeatureViewType } from './drawer-view.js';
+import { deriveInitialTab } from './drawer-view.js';
 import { useArtifactFetch } from './use-artifact-fetch.js';
 export function FeatureDrawerClient({ view: initialView }) {
     const featureFlags = useFeatureFlags();
@@ -48,12 +39,7 @@ export function FeatureDrawerClient({ view: initialView }) {
     useEffect(() => {
         setView(initialView);
     }, [initialView]);
-    const featureNode = view.type === 'feature' ||
-        view.type === 'prd-review' ||
-        view.type === 'tech-review' ||
-        view.type === 'merge-review'
-        ? view.node
-        : null;
+    const featureNode = view.type === 'feature' ? view.node : null;
     // SSE: update drawer view when feature state changes
     const { events } = useAgentEventsContext();
     const processedCountRef = useRef(0);
@@ -75,21 +61,18 @@ export function FeatureDrawerClient({ view: initialView }) {
             if (isOpenRef.current && !isDirtyRef.current && !isRejectingRef.current)
                 router.refresh();
             if (update.state !== undefined || update.lifecycle !== undefined) {
-                // Optimistically update the node data AND re-derive the view type so the
-                // drawer switches immediately (e.g. prd-review → feature when agent resumes)
+                // Optimistically update the node data AND re-derive the initial tab so the
+                // drawer switches immediately (e.g. prd-review → overview when agent resumes)
                 // without waiting for the router.refresh() round-trip.
                 setView((prev) => {
-                    if (prev.type !== 'feature' &&
-                        prev.type !== 'prd-review' &&
-                        prev.type !== 'tech-review' &&
-                        prev.type !== 'merge-review')
+                    if (prev.type !== 'feature')
                         return prev;
                     const updatedNode = {
                         ...prev.node,
                         ...(update.state !== undefined && { state: update.state }),
                         ...(update.lifecycle !== undefined && { lifecycle: update.lifecycle }),
                     };
-                    return { ...prev, type: deriveFeatureViewType(updatedNode), node: updatedNode };
+                    return { ...prev, node: updatedNode, initialTab: deriveInitialTab(updatedNode) };
                 });
             }
         }
@@ -131,13 +114,15 @@ export function FeatureDrawerClient({ view: initialView }) {
     // ── Shared reject state ────────────────────────────────────────────────
     const [isRejecting, setIsRejecting] = useState(false);
     const isRejectingRef = useRef(false);
-    // Reset chat input whenever the view type changes
-    const viewType = view.type;
+    // Reset chat input whenever the initialTab changes (lifecycle transition)
+    const initialTab = view.type === 'feature' ? view.initialTab : undefined;
     useEffect(() => {
         setChatInput('');
-    }, [viewType]);
+    }, [initialTab]);
     // ── Data fetching ─────────────────────────────────────────────────────
-    const prdFeatureId = view.type === 'prd-review' ? view.node.featureId : null;
+    const prdFeatureId = featureNode?.lifecycle === 'requirements' && featureNode?.state === 'action-required'
+        ? featureNode.featureId
+        : null;
     const isLoadingPrd = useArtifactFetch(prdFeatureId, getFeatureArtifact, (result) => {
         if (result.error) {
             toast.error(result.error);
@@ -159,7 +144,9 @@ export function FeatureDrawerClient({ view: initialView }) {
         setPrdDefaultSelections({});
         setPrdData(null);
     }, 'Failed to load questionnaire');
-    const techFeatureId = view.type === 'tech-review' ? view.node.featureId : null;
+    const techFeatureId = featureNode?.lifecycle === 'implementation' && featureNode?.state === 'action-required'
+        ? featureNode.featureId
+        : null;
     const isLoadingTech = useArtifactFetch(techFeatureId, getResearchArtifact, (result) => {
         if (result.error) {
             toast.error(result.error);
@@ -172,7 +159,10 @@ export function FeatureDrawerClient({ view: initialView }) {
         if (result.productDecisions)
             setTechProductData(result.productDecisions);
     }, () => setTechProductData(undefined));
-    const mergeFeatureId = view.type === 'merge-review' ? view.node.featureId : null;
+    const mergeFeatureId = featureNode?.lifecycle === 'review' &&
+        (featureNode?.state === 'action-required' || featureNode?.state === 'error')
+        ? featureNode.featureId
+        : null;
     const isLoadingMerge = useArtifactFetch(mergeFeatureId, getMergeReviewData, (result) => {
         if ('error' in result) {
             toast.error(result.error);
@@ -182,7 +172,8 @@ export function FeatureDrawerClient({ view: initialView }) {
     }, () => setMergeData(null), 'Failed to load merge review data');
     // ── Close guard ──────────────────────────────────────────────────────
     const isChatDirty = chatInput.trim().length > 0;
-    const isPrdDirty = view.type === 'prd-review' &&
+    const isPrdDirty = featureNode?.lifecycle === 'requirements' &&
+        featureNode?.state === 'action-required' &&
         Object.keys(prdDefaultSelections).some((k) => prdDefaultSelections[k] !== prdSelections[k]);
     const isDirty = isChatDirty || isPrdDirty;
     // Keep dirty state in a ref so the SSE handler can read the latest value
@@ -195,16 +186,13 @@ export function FeatureDrawerClient({ view: initialView }) {
     }, [prdDefaultSelections]);
     const { attemptClose } = useGuardedDrawerClose({ open: isOpen, isDirty, onClose, onReset });
     // ── Approve / reject handlers ─────────────────────────────────────────
-    const reviewNode = view.type === 'prd-review' || view.type === 'tech-review' || view.type === 'merge-review'
-        ? view.node
-        : null;
     const handleReject = useCallback(async (feedback, label, onDone) => {
-        if (!reviewNode?.featureId)
+        if (!featureNode?.featureId)
             return;
         isRejectingRef.current = true;
         setIsRejecting(true);
         try {
-            const result = await rejectFeature(reviewNode.featureId, feedback);
+            const result = await rejectFeature(featureNode.featureId, feedback);
             if (!result.rejected) {
                 toast.error(result.error ?? `Failed to reject ${label.toLowerCase()}`);
                 return;
@@ -222,14 +210,14 @@ export function FeatureDrawerClient({ view: initialView }) {
             isRejectingRef.current = false;
             setIsRejecting(false);
         }
-    }, [reviewNode, onClose, rejectSound]);
+    }, [featureNode, onClose, rejectSound]);
     const handlePrdReject = useCallback((feedback) => handleReject(feedback, 'Requirements', () => setPrdSelections({})), [handleReject]);
     const handleTechReject = useCallback((feedback) => handleReject(feedback, 'Plan'), [handleReject]);
     const handleMergeReject = useCallback((feedback) => handleReject(feedback, 'Merge'), [handleReject]);
     const handleSimpleApprove = useCallback(async (label) => {
-        if (!reviewNode?.featureId)
+        if (!featureNode?.featureId)
             return;
-        const result = await approveFeature(reviewNode.featureId);
+        const result = await approveFeature(featureNode.featureId);
         if (!result.approved) {
             toast.error(result.error ?? `Failed to approve ${label.toLowerCase()}`);
             return;
@@ -238,12 +226,12 @@ export function FeatureDrawerClient({ view: initialView }) {
         toast.success(`${label} approved — agent resuming`);
         // Optimistically update canvas node before SSE arrives (~500ms delay)
         window.dispatchEvent(new CustomEvent('shep:feature-approved', {
-            detail: { featureId: reviewNode.featureId },
+            detail: { featureId: featureNode.featureId },
         }));
         onClose();
-    }, [reviewNode, onClose]);
+    }, [featureNode, onClose]);
     const handlePrdApprove = useCallback(async (_actionId) => {
-        if (view.type !== 'prd-review')
+        if (view.type !== 'feature' || !featureNode)
             return;
         let payload;
         if (prdData) {
@@ -257,7 +245,7 @@ export function FeatureDrawerClient({ view: initialView }) {
             }
             payload = { approved: true, changedSelections };
         }
-        const result = await approveFeature(view.node.featureId, payload);
+        const result = await approveFeature(featureNode.featureId, payload);
         if (!result.approved) {
             toast.error(result.error ?? 'Failed to approve requirements');
             return;
@@ -266,11 +254,11 @@ export function FeatureDrawerClient({ view: initialView }) {
         toast.success('Requirements approved — agent resuming');
         // Optimistically update canvas node before SSE arrives (~500ms delay)
         window.dispatchEvent(new CustomEvent('shep:feature-approved', {
-            detail: { featureId: view.node.featureId },
+            detail: { featureId: featureNode.featureId },
         }));
         setPrdSelections({});
         onClose();
-    }, [view, prdData, prdSelections, onClose]);
+    }, [view, featureNode, prdData, prdSelections, onClose]);
     const handleTechApprove = useCallback(() => handleSimpleApprove('Plan'), [handleSimpleApprove]);
     const handleMergeApprove = useCallback(() => handleSimpleApprove('Merge'), [handleSimpleApprove]);
     const handleDelete = useCallback(async (featureId) => {
@@ -312,51 +300,26 @@ export function FeatureDrawerClient({ view: initialView }) {
         : null;
     const deployAction = useDeployAction(featureDeployTarget);
     const isFeatureDeployActive = deployAction.status === 'Booting' || deployAction.status === 'Ready';
+    // ── Short ID copy ───────────────────────────────────────────────────
+    const COPY_FEEDBACK_DELAY = 2000;
+    const [idCopied, setIdCopied] = useState(false);
+    const handleCopyId = useCallback(() => {
+        if (!featureNode?.featureId)
+            return;
+        void navigator.clipboard.writeText(featureNode.featureId);
+        setIdCopied(true);
+        setTimeout(() => setIdCopied(false), COPY_FEEDBACK_DELAY);
+    }, [featureNode?.featureId]);
     // ── Header ────────────────────────────────────────────────────────────
     let header = undefined;
     if (featureNode) {
-        header = (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "feature-drawer-header", children: [_jsx(DrawerTitle, { children: featureNode.name }), featureNode.description ? (_jsx(DrawerDescription, { children: featureNode.description })) : featureNode.featureId ? (_jsx(DrawerDescription, { className: "sr-only", children: featureNode.featureId })) : null] }), featureActionsInput ? (_jsxs("div", { className: "flex items-center gap-2 pt-2", children: [_jsx(OpenActionMenu, { actions: featureActions, repositoryPath: featureActionsInput.repositoryPath, showSpecs: !!featureActionsInput.specPath }), featureFlags.envDeploy && featureDeployTarget ? (_jsxs(_Fragment, { children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: _jsx(ActionButton, { label: isFeatureDeployActive ? 'Stop Dev Server' : 'Start Dev Server', onClick: isFeatureDeployActive ? deployAction.stop : deployAction.deploy, loading: deployAction.deployLoading || deployAction.stopLoading, error: !!deployAction.deployError, icon: isFeatureDeployActive ? Square : Play, iconOnly: true, variant: "outline", size: "icon-sm" }) }) }), _jsx(TooltipContent, { children: isFeatureDeployActive ? 'Stop Dev Server' : 'Start Dev Server' })] }) }), isFeatureDeployActive ? (_jsx(DeploymentStatusBadge, { status: deployAction.status, url: deployAction.url, targetId: featureDeployTarget?.targetId })) : null] })) : null, featureNode.featureId ? (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Delete feature", disabled: isDeleting, className: "text-muted-foreground hover:text-destructive ml-auto", "data-testid": "feature-drawer-delete", children: isDeleting ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Trash2, { className: "size-4" })) }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete feature?" }), _jsxs(AlertDialogDescription, { children: ["This will permanently delete ", _jsx("strong", { children: featureNode.name }), " (", featureNode.featureId, "). This action cannot be undone.", featureNode.state === 'running' ? (_jsx(_Fragment, { children: " This feature has a running agent that will be stopped." })) : null] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isDeleting, children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", disabled: isDeleting, onClick: () => handleDelete(featureNode.featureId), children: isDeleting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Deleting\u2026"] })) : ('Delete') })] })] })] })) : null] })) : null] }));
+        const shortId = featureNode.featureId.slice(0, 8);
+        header = (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "feature-drawer-header", children: [_jsx(DrawerTitle, { children: featureNode.name }), _jsxs("div", { className: "flex items-center gap-1.5 pt-0.5", children: [_jsx("code", { className: "bg-muted text-muted-foreground rounded px-1.5 py-0.5 font-mono text-xs", children: shortId }), _jsx("button", { type: "button", onClick: handleCopyId, className: "text-muted-foreground hover:text-foreground inline-flex items-center rounded p-0.5 transition-colors", "aria-label": "Copy feature ID", "data-testid": "feature-drawer-copy-id", children: idCopied ? (_jsx(Check, { className: "size-3.5 text-green-600" })) : (_jsx(Copy, { className: "size-3.5" })) })] }), featureNode.oneLiner ? (_jsx(DrawerDescription, { children: featureNode.oneLiner })) : featureNode.userQuery ? (_jsx(DrawerDescription, { children: featureNode.userQuery })) : featureNode.description ? (_jsx(DrawerDescription, { children: featureNode.description })) : featureNode.featureId ? (_jsx(DrawerDescription, { className: "sr-only", children: featureNode.featureId })) : null] }), featureActionsInput ? (_jsxs("div", { className: "flex items-center gap-2 pt-2", children: [_jsx(OpenActionMenu, { actions: featureActions, repositoryPath: featureActionsInput.repositoryPath, showSpecs: !!featureActionsInput.specPath }), featureFlags.envDeploy && featureDeployTarget ? (_jsxs(_Fragment, { children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: _jsx(ActionButton, { label: isFeatureDeployActive ? 'Stop Dev Server' : 'Start Dev Server', onClick: isFeatureDeployActive ? deployAction.stop : deployAction.deploy, loading: deployAction.deployLoading || deployAction.stopLoading, error: !!deployAction.deployError, icon: isFeatureDeployActive ? Square : Play, iconOnly: true, variant: "outline", size: "icon-sm" }) }) }), _jsx(TooltipContent, { children: isFeatureDeployActive ? 'Stop Dev Server' : 'Start Dev Server' })] }) }), isFeatureDeployActive ? (_jsx(DeploymentStatusBadge, { status: deployAction.status, url: deployAction.url, targetId: featureDeployTarget?.targetId })) : null] })) : null, featureNode.featureId ? (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Delete feature", disabled: isDeleting, className: "text-muted-foreground hover:text-destructive ml-auto", "data-testid": "feature-drawer-delete", children: isDeleting ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Trash2, { className: "size-4" })) }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete feature?" }), _jsxs(AlertDialogDescription, { children: ["This will permanently delete ", _jsx("strong", { children: featureNode.name }), " (", featureNode.featureId, "). This action cannot be undone.", featureNode.state === 'running' ? (_jsx(_Fragment, { children: " This feature has a running agent that will be stopped." })) : null] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isDeleting, children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", disabled: isDeleting, onClick: () => handleDelete(featureNode.featureId), children: isDeleting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Deleting\u2026"] })) : ('Delete') })] })] })] })) : null] })) : null] }));
     }
     // ── Body ──────────────────────────────────────────────────────────────
     let body = null;
     if (view.type === 'feature' && featureNode) {
-        body = (_jsxs("div", { className: "flex-1 overflow-y-auto", 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[featureNode.lifecycle] }), _jsx(FeatureStateBadge, { data: featureNode }), featureNode.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: [featureNode.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[featureNode.state].progressClass), style: { width: `${featureNode.progress}%` } }) })] })) : null] }), featureNode.pr ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(FeaturePrInfo, { pr: featureNode.pr })] })) : null, _jsx(FeatureDetails, { data: featureNode })] }));
-    }
-    else if (view.type === 'prd-review') {
-        body = prdData ? (_jsx(PrdQuestionnaire, { data: prdData, selections: prdSelections, onSelect: (qId, oId) => setPrdSelections((prev) => ({ ...prev, [qId]: oId })), onApprove: handlePrdApprove, onReject: handlePrdReject, isProcessing: isLoadingPrd, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: setChatInput })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) }));
+        body = (_jsx(FeatureDrawerTabs, { featureNode: featureNode, featureId: featureNode.featureId, initialTab: view.initialTab, 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 }));
     }
-    else if (view.type === 'tech-review') {
-        body = techData ? (_jsx(TechReviewTabs, { techData: techData, productData: isLoadingTechProduct ? null : techProductData, onApprove: handleTechApprove, onReject: handleTechReject, isProcessing: isLoadingTech, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: setChatInput })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) }));
-    }
-    else if (view.type === 'merge-review') {
-        body = mergeData ? (_jsx(MergeReview, { data: mergeData, onApprove: handleMergeApprove, onReject: handleMergeReject, isProcessing: isLoadingMerge, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: setChatInput })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) }));
-    }
-    return (_jsx(BaseDrawer, { open: isOpen, onClose: attemptClose, size: "md", modal: false, header: header, "data-testid": view.type === 'feature'
-            ? 'feature-drawer'
-            : view.type === 'repository'
-                ? 'repository-drawer'
-                : 'review-drawer', children: body }));
-}
-// ── Private sub-components ──────────────────────────────────────────────────
-function FeatureStateBadge({ data }) {
-    const config = featureNodeStateConfig[data.state];
-    const Icon = config.icon;
-    return (_jsxs("div", { className: cn('flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium', config.badgeBgClass, config.badgeClass), children: [data.state === 'running' ? (_jsx(CometSpinner, { size: "sm", className: "shrink-0" })) : (_jsx(Icon, { className: "h-4 w-4 shrink-0" })), _jsx("span", { children: config.label })] }));
-}
-function FeaturePrInfo({ pr }) {
-    const prStatusStyles = {
-        [PrStatus.Open]: 'border-transparent bg-blue-50 text-blue-700 hover:bg-blue-50',
-        [PrStatus.Merged]: 'border-transparent bg-purple-50 text-purple-700 hover:bg-purple-50',
-        [PrStatus.Closed]: 'border-transparent bg-red-50 text-red-700 hover:bg-red-50',
-    };
-    return (_jsx("div", { "data-testid": "feature-drawer-pr", className: "border-border mx-4 rounded-lg border", children: _jsxs("div", { className: "space-y-3 px-4 py-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.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] }) }));
-}
-function FeatureDetails({ data }) {
-    const hasAnyDetail = data.agentType ?? data.runtime ?? 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.agentType ? _jsx(DetailRow, { label: "Agent", value: 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] })] }));
-}
-function DetailRow({ label, value }) {
-    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("span", { className: "text-sm", children: value })] }));
+    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/index.d.ts

@@ -1,2 +1,2 @@
-export { FeatureDrawer, type FeatureDrawerProps } from './feature-drawer.js';
+export { useFeatureActions, type FeatureActionsInput, type FeatureActionsState, } from './use-feature-actions.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,GACzB,MAAM,uBAAuB,CAAC"}

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

@@ -1 +1 @@
-export { FeatureDrawer } from './feature-drawer.js';
+export { useFeatureActions, } from './use-feature-actions.js';

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

@@ -0,0 +1,8 @@
+import type { PhaseTimingData } from '../../../app/actions/get-feature-phase-timings.js';
+export interface ActivityTabProps {
+    timings: PhaseTimingData[] | null;
+    loading: boolean;
+    error: string | null;
+}
+export declare function ActivityTab({ timings, loading, error }: ActivityTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=activity-tab.d.ts.map

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

@@ -0,0 +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,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAE/E,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AA+CD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CA0DxE"}

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

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Loader2, AlertCircle, Clock } from 'lucide-react';
+const NODE_TO_PHASE = {
+    analyze: 'Analyzing',
+    requirements: 'Requirements',
+    research: 'Researching',
+    plan: 'Planning',
+    implement: 'Implementing',
+    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' },
+};
+function isLifecycleEvent(phase) {
+    return phase.startsWith('run:');
+}
+function formatDuration(ms) {
+    return `${(ms / 1000).toFixed(1)}s`;
+}
+function groupTimingsByRun(timings) {
+    const groups = [];
+    for (const t of timings) {
+        const last = groups[groups.length - 1];
+        if (last?.runId === t.agentRunId) {
+            last.timings.push(t);
+        }
+        else {
+            groups.push({ runId: t.agentRunId, timings: [t] });
+        }
+    }
+    return groups;
+}
+export function ActivityTab({ timings, loading, error }) {
+    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" }) }));
+    }
+    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 })] }));
+    }
+    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" })] }));
+    }
+    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 groups = groupTimingsByRun(timings);
+    const multiRun = groups.length > 1;
+    const totalExecMs = nodeTimings.reduce((sum, t) => sum + (t.durationMs ?? 0), 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: groups.map((group, groupIdx) => (_jsx(RunGroup, { group: group, groupIdx: groupIdx, multiRun: multiRun, maxDurationMs: maxDurationMs }, group.runId))) }), totalExecMs > 0 ? (_jsx(SummaryTotals, { totalExecMs: totalExecMs, totalWaitMs: totalWaitMs })) : null] }));
+}
+function RunGroup({ group, groupIdx, multiRun, maxDurationMs, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [multiRun ? (_jsxs("div", { className: "text-muted-foreground text-xs font-medium", children: ["Run #", groupIdx + 1] })) : null, group.timings.map((t) => {
+                if (isLifecycleEvent(t.phase)) {
+                    return _jsx(LifecycleEventRow, { timing: t }, `${t.agentRunId}-${t.phase}-${t.startedAt}`);
+                }
+                return (_jsx(NodeTimingRow, { timing: t, maxDurationMs: maxDurationMs }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
+            })] }));
+}
+function LifecycleEventRow({ timing }) {
+    const event = LIFECYCLE_EVENTS[timing.phase];
+    if (!event)
+        return null;
+    return (_jsx("div", { className: `text-xs ${event.colorClass}`, children: _jsx("span", { children: event.label }) }));
+}
+function NodeTimingRow({ timing, maxDurationMs, }) {
+    const label = timing.phase.includes(':')
+        ? `rev ${timing.phase.split(':')[1]}`
+        : (NODE_TO_PHASE[timing.phase] ?? timing.phase);
+    const durationMs = timing.durationMs ?? 0;
+    const barPercent = maxDurationMs > 0 ? Math.max(2, (durationMs / maxDurationMs) * 100) : 2;
+    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] }));
+}
+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-3 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 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", children: formatDuration(waitMs) })] }));
+}
+function SummaryTotals({ totalExecMs, totalWaitMs }) {
+    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] }));
+}
+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 })] }));
+}

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ActivityTab } from './activity-tab.js';
+declare const meta: Meta<typeof ActivityTab>;
+export default meta;
+type Story = StoryObj<typeof ActivityTab>;
+/** Default — single run with complete phase timings and approval waits. */
+export declare const Default: Story;
+/** Multiple runs with run headers showing grouping. */
+export declare const MultipleRuns: Story;
+/** Running phase — a phase without completedAt shows blue bar. */
+export declare const RunningPhase: Story;
+/** Loading state — spinner displayed while data is being fetched. */
+export declare const Loading: Story;
+/** Empty state — no activity recorded yet. */
+export declare const Empty: Story;
+/** Error state — inline error message. */
+export declare const Error: Story;
+/** Approval wait indicators — phases with approval wait sub-rows. */
+export declare const WithApprovalWaits: Story;
+//# sourceMappingURL=activity-tab.stories.d.ts.map

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

@@ -0,0 +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,qEAAqE;AACrE,eAAO,MAAM,iBAAiB,EAAE,KAgC/B,CAAC"}