@shepai/cli 1.78.1-pr241.ee88d2d → 1.78.1-pr246.ca9db57

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

@@ -3,13 +3,15 @@ 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, Play, Square, Copy, Check } from 'lucide-react';
+import { Loader2, Trash2, ExternalLink, GitCommitHorizontal, Play, Square } from 'lucide-react';
+import { PrStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
 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';
@@ -19,14 +21,21 @@ 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 { FeatureDrawerTabs } from '../../common/feature-drawer-tabs/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 { useFeatureActions } from '../../common/feature-drawer/use-feature-actions.js';
 import { resolveSseEventUpdates } from '../../common/feature-node/derive-feature-state.js';
-import { deriveInitialTab } from './drawer-view.js';
+import { deriveFeatureViewType } from './drawer-view.js';
 import { useArtifactFetch } from './use-artifact-fetch.js';
 export function FeatureDrawerClient({ view: initialView }) {
     const featureFlags = useFeatureFlags();
@@ -39,7 +48,12 @@ export function FeatureDrawerClient({ view: initialView }) {
     useEffect(() => {
         setView(initialView);
     }, [initialView]);
-    const featureNode = view.type === 'feature' ? view.node : null;
+    const featureNode = view.type === 'feature' ||
+        view.type === 'prd-review' ||
+        view.type === 'tech-review' ||
+        view.type === 'merge-review'
+        ? view.node
+        : null;
     // SSE: update drawer view when feature state changes
     const { events } = useAgentEventsContext();
     const processedCountRef = useRef(0);
@@ -61,18 +75,21 @@ 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 initial tab so the
-                // drawer switches immediately (e.g. prd-review → overview when agent resumes)
+                // Optimistically update the node data AND re-derive the view type so the
+                // drawer switches immediately (e.g. prd-review → feature when agent resumes)
                 // without waiting for the router.refresh() round-trip.
                 setView((prev) => {
-                    if (prev.type !== 'feature')
+                    if (prev.type !== 'feature' &&
+                        prev.type !== 'prd-review' &&
+                        prev.type !== 'tech-review' &&
+                        prev.type !== 'merge-review')
                         return prev;
                     const updatedNode = {
                         ...prev.node,
                         ...(update.state !== undefined && { state: update.state }),
                         ...(update.lifecycle !== undefined && { lifecycle: update.lifecycle }),
                     };
-                    return { ...prev, node: updatedNode, initialTab: deriveInitialTab(updatedNode) };
+                    return { ...prev, type: deriveFeatureViewType(updatedNode), node: updatedNode };
                 });
             }
         }
@@ -114,15 +131,13 @@ export function FeatureDrawerClient({ view: initialView }) {
     // ── Shared reject state ────────────────────────────────────────────────
     const [isRejecting, setIsRejecting] = useState(false);
     const isRejectingRef = useRef(false);
-    // Reset chat input whenever the initialTab changes (lifecycle transition)
-    const initialTab = view.type === 'feature' ? view.initialTab : undefined;
+    // Reset chat input whenever the view type changes
+    const viewType = view.type;
     useEffect(() => {
         setChatInput('');
-    }, [initialTab]);
+    }, [viewType]);
     // ── Data fetching ─────────────────────────────────────────────────────
-    const prdFeatureId = featureNode?.lifecycle === 'requirements' && featureNode?.state === 'action-required'
-        ? featureNode.featureId
-        : null;
+    const prdFeatureId = view.type === 'prd-review' ? view.node.featureId : null;
     const isLoadingPrd = useArtifactFetch(prdFeatureId, getFeatureArtifact, (result) => {
         if (result.error) {
             toast.error(result.error);
@@ -144,9 +159,7 @@ export function FeatureDrawerClient({ view: initialView }) {
         setPrdDefaultSelections({});
         setPrdData(null);
     }, 'Failed to load questionnaire');
-    const techFeatureId = featureNode?.lifecycle === 'implementation' && featureNode?.state === 'action-required'
-        ? featureNode.featureId
-        : null;
+    const techFeatureId = view.type === 'tech-review' ? view.node.featureId : null;
     const isLoadingTech = useArtifactFetch(techFeatureId, getResearchArtifact, (result) => {
         if (result.error) {
             toast.error(result.error);
@@ -159,10 +172,7 @@ export function FeatureDrawerClient({ view: initialView }) {
         if (result.productDecisions)
             setTechProductData(result.productDecisions);
     }, () => setTechProductData(undefined));
-    const mergeFeatureId = featureNode?.lifecycle === 'review' &&
-        (featureNode?.state === 'action-required' || featureNode?.state === 'error')
-        ? featureNode.featureId
-        : null;
+    const mergeFeatureId = view.type === 'merge-review' ? view.node.featureId : null;
     const isLoadingMerge = useArtifactFetch(mergeFeatureId, getMergeReviewData, (result) => {
         if ('error' in result) {
             toast.error(result.error);
@@ -172,8 +182,7 @@ export function FeatureDrawerClient({ view: initialView }) {
     }, () => setMergeData(null), 'Failed to load merge review data');
     // ── Close guard ──────────────────────────────────────────────────────
     const isChatDirty = chatInput.trim().length > 0;
-    const isPrdDirty = featureNode?.lifecycle === 'requirements' &&
-        featureNode?.state === 'action-required' &&
+    const isPrdDirty = view.type === 'prd-review' &&
         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
@@ -186,13 +195,16 @@ 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 (!featureNode?.featureId)
+        if (!reviewNode?.featureId)
             return;
         isRejectingRef.current = true;
         setIsRejecting(true);
         try {
-            const result = await rejectFeature(featureNode.featureId, feedback);
+            const result = await rejectFeature(reviewNode.featureId, feedback);
             if (!result.rejected) {
                 toast.error(result.error ?? `Failed to reject ${label.toLowerCase()}`);
                 return;
@@ -210,14 +222,14 @@ export function FeatureDrawerClient({ view: initialView }) {
             isRejectingRef.current = false;
             setIsRejecting(false);
         }
-    }, [featureNode, onClose, rejectSound]);
+    }, [reviewNode, 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 (!featureNode?.featureId)
+        if (!reviewNode?.featureId)
             return;
-        const result = await approveFeature(featureNode.featureId);
+        const result = await approveFeature(reviewNode.featureId);
         if (!result.approved) {
             toast.error(result.error ?? `Failed to approve ${label.toLowerCase()}`);
             return;
@@ -226,12 +238,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: featureNode.featureId },
+            detail: { featureId: reviewNode.featureId },
         }));
         onClose();
-    }, [featureNode, onClose]);
+    }, [reviewNode, onClose]);
     const handlePrdApprove = useCallback(async (_actionId) => {
-        if (view.type !== 'feature' || !featureNode)
+        if (view.type !== 'prd-review')
             return;
         let payload;
         if (prdData) {
@@ -245,7 +257,7 @@ export function FeatureDrawerClient({ view: initialView }) {
             }
             payload = { approved: true, changedSelections };
         }
-        const result = await approveFeature(featureNode.featureId, payload);
+        const result = await approveFeature(view.node.featureId, payload);
         if (!result.approved) {
             toast.error(result.error ?? 'Failed to approve requirements');
             return;
@@ -254,11 +266,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: featureNode.featureId },
+            detail: { featureId: view.node.featureId },
         }));
         setPrdSelections({});
         onClose();
-    }, [view, featureNode, prdData, prdSelections, onClose]);
+    }, [view, prdData, prdSelections, onClose]);
     const handleTechApprove = useCallback(() => handleSimpleApprove('Plan'), [handleSimpleApprove]);
     const handleMergeApprove = useCallback(() => handleSimpleApprove('Merge'), [handleSimpleApprove]);
     const handleDelete = useCallback(async (featureId) => {
@@ -300,26 +312,51 @@ 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) {
-        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] }));
+        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] }));
     }
     // ── Body ──────────────────────────────────────────────────────────────
     let body = null;
     if (view.type === 'feature' && featureNode) {
-        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 }));
+        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" }) }));
     }
-    return (_jsx(BaseDrawer, { open: isOpen, onClose: attemptClose, size: "md", modal: false, header: header, "data-testid": view.type === 'feature' ? 'feature-drawer' : 'repository-drawer', children: body }));
+    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 })] }));
 }

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

@@ -1,6 +1,14 @@
-import type { FileAttachment } from '../../../../../../packages/core/src/infrastructure/services/file-dialog.service.js';
 import type { WorkflowDefaults } from '../../../app/actions/get-workflow-defaults.js';
 export type { FileAttachment } from '../../../../../../packages/core/src/infrastructure/services/file-dialog.service.js';
+/** Attachment record for the create form — supports both picker and upload sources. */
+export interface FormAttachment {
+    id: string;
+    name: string;
+    size: number;
+    mimeType: string;
+    path: string;
+    loading?: boolean;
+}
 /** Minimal feature descriptor for the parent selector. */
 export interface ParentFeatureOption {
     id: string;
@@ -8,7 +16,7 @@ export interface ParentFeatureOption {
 }
 export interface FeatureCreatePayload {
     description: string;
-    attachments: FileAttachment[];
+    attachments: FormAttachment[];
     repositoryPath: string;
     approvalGates: {
         allowPrd: boolean;
@@ -24,6 +32,7 @@ export interface FeatureCreatePayload {
     agentType?: string;
     /** Optional model override for this feature run */
     model?: string;
+    sessionId?: string;
 }
 export interface FeatureCreateDrawerProps {
     open: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"feature-create-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAC/F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAI5E,YAAY,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAE/F,0DAA0D;AAC1D,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,IAAI,EAAE,OAAO,CAAC;IACd,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAcD,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,kGAAkG;IAClG,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,cAAc,EACd,YAAoB,EACpB,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,YAAY,GACb,EAAE,wBAAwB,2CA6X1B"}
+{"version":3,"file":"feature-create-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAI5E,YAAY,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAE/F,uFAAuF;AACvF,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,0DAA0D;AAC1D,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,IAAI,EAAE,OAAO,CAAC;IACd,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+ED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,kGAAkG;IAClG,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,cAAc,EACd,YAAoB,EACpB,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,YAAY,GACb,EAAE,wBAAwB,2CAuiB1B"}