@shepai/cli 1.138.0 → 1.139.0

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

@@ -1 +1 @@
-{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AA4CnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CA+bA"}
+{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AA4CnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CAgcA"}

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

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { Handle, Position } from '@xyflow/react';
 import { Plus, Trash2, Zap, Loader2, Globe, RotateCcw, Play, Eye, Archive, ArchiveRestore, } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
+import { Button } from '../../ui/button.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '../../ui/alert-dialog.js';
 import { DeleteFeatureDialog } from '../../common/delete-feature-dialog/index.js';
@@ -75,7 +76,8 @@ export function FeatureNode({ data, selected, }) {
                 data.state !== 'archived' ? (_jsx(AlertDialog, { open: archiveConfirmOpen, onOpenChange: setArchiveConfirmOpen, children: _jsxs(AlertDialogContent, { onCloseAutoFocus: (e) => e.preventDefault(), children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Archive feature?" }), _jsxs(AlertDialogDescription, { children: [_jsx("strong", { children: data.name }), " will be hidden from the canvas. You can unarchive it later to restore it."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { onClick: () => setArchiveConfirmOpen(false), children: "Cancel" }), _jsx(AlertDialogAction, { onClick: () => {
                                         setArchiveConfirmOpen(false);
                                         data.onArchive?.(data.featureId);
-                                    }, children: "Archive" })] })] }) })) : null, _jsxs("div", { "data-testid": "feature-node-card", "aria-busy": data.state === 'creating' || data.state === 'deleting' ? 'true' : undefined, className: cn('bg-card flex min-h-35 w-97 cursor-pointer flex-col rounded-lg border p-3 shadow-sm dark:bg-neutral-800/80', data.state === 'action-required' && 'border-amber-300/60 dark:border-amber-700/40', selected && 'ring-primary ring-2', data.state === 'deleting' && 'opacity-60', data.state === 'archived' && 'opacity-50'), children: [data.state !== 'creating' ? (_jsx("div", { className: "absolute top-3 right-4", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { "data-testid": "feature-node-phase-badge", className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-[10px]", children: lifecyclePhaseBadge[data.lifecycle].tooltip }), _jsx("span", { className: cn('h-1.5 w-1.5 -translate-y-px rounded-full', lifecyclePhaseBadge[data.lifecycle].dot) })] }) }), _jsxs(TooltipContent, { side: "bottom", className: "max-w-56 bg-white text-neutral-900 shadow-lg dark:bg-neutral-100 dark:text-neutral-900", children: [_jsx("p", { className: "font-semibold", children: lifecyclePhaseBadge[data.lifecycle].tooltip }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-neutral-500", children: lifecyclePhaseBadge[data.lifecycle].description })] })] }) }) })) : null, _jsxs("div", { className: "flex items-center gap-1.5", children: [data.agentType ? (_jsx(AgentIcon, { agentType: data.agentType, className: "h-4 w-4 shrink-0" })) : null, _jsx("h3", { className: "min-w-0 truncate text-sm font-bold", children: data.name })] }), data.description ? (_jsx("p", { "data-testid": "feature-node-description", className: "text-muted-foreground mt-1 line-clamp-2 text-xs", children: data.description })) : null, _jsxs("div", { className: "mt-auto pt-2", children: [config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground flex items-center justify-end text-[10px]", children: _jsxs("span", { children: [data.progress, "%"] }) }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) })] })) : null, !config.showProgressBar &&
+                                    }, children: "Archive" })] })] }) })) : null, _jsxs("div", { "data-testid": "feature-node-card", "aria-busy": data.state === 'creating' || data.state === 'deleting' ? 'true' : undefined, className: cn('bg-card flex min-h-35 w-97 cursor-pointer flex-col rounded-lg border p-3 shadow-sm dark:bg-neutral-800/80', data.state === 'action-required' &&
+                    'border-l-[3px] border-l-rose-400 dark:border-l-amber-500', selected && 'ring-primary ring-2', data.state === 'deleting' && 'opacity-60', data.state === 'archived' && 'opacity-50'), children: [data.state !== 'creating' ? (_jsx("div", { className: "absolute top-3 right-4", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { "data-testid": "feature-node-phase-badge", className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-[10px]", children: lifecyclePhaseBadge[data.lifecycle].tooltip }), _jsx("span", { className: cn('h-1.5 w-1.5 -translate-y-px rounded-full', lifecyclePhaseBadge[data.lifecycle].dot) })] }) }), _jsxs(TooltipContent, { side: "bottom", className: "max-w-56 bg-white text-neutral-900 shadow-lg dark:bg-neutral-100 dark:text-neutral-900 [&_svg]:!bg-white [&_svg]:!fill-white dark:[&_svg]:!bg-neutral-100 dark:[&_svg]:!fill-neutral-100", children: [_jsx("p", { className: "font-semibold", children: lifecyclePhaseBadge[data.lifecycle].tooltip }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-neutral-500", children: lifecyclePhaseBadge[data.lifecycle].description })] })] }) }) })) : null, _jsxs("div", { className: "flex items-center gap-1.5 pr-24", children: [data.agentType ? (_jsx(AgentIcon, { agentType: data.agentType, className: "h-4 w-4 shrink-0" })) : null, _jsx("h3", { className: "min-w-0 truncate text-sm font-bold", children: data.name })] }), data.description ? (_jsx("p", { "data-testid": "feature-node-description", className: "text-muted-foreground mt-1 line-clamp-2 text-xs", children: data.description })) : null, _jsxs("div", { className: "mt-auto pt-2", children: [config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground flex items-center justify-end text-[10px]", children: _jsxs("span", { children: [data.progress, "%"] }) }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) })] })) : null, !config.showProgressBar &&
                                 ![
                                     'deleting',
                                     'creating',
@@ -102,21 +104,21 @@ export function FeatureNode({ data, selected, }) {
                                                                     ? 'cursor-pointer opacity-80 transition-opacity hover:opacity-100'
                                                                     : 'cursor-default'), children: data.deployment.status === DeploymentState.Booting ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin text-blue-500" })) : (_jsx(Globe, { className: "h-3 w-3 text-green-600" })) }) }), _jsx(TooltipContent, { side: "top", children: data.deployment.status === DeploymentState.Booting
                                                                 ? 'Deploying...'
-                                                                : (data.deployment.url ?? 'Live') })] }) })) : null, data.fastMode ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { "data-testid": "feature-node-fast-mode-badge", children: _jsx(Zap, { className: "h-3 w-3 text-amber-500" }) }) }), _jsx(TooltipContent, { side: "top", children: "Fast Mode" })] }) })) : null] }), data.state === 'deleting' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-gray-400" }), _jsx("span", { className: "text-muted-foreground", children: "Deleting\u2026" })] })) : data.state === 'creating' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 animate-spin" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] })) : data.state === 'running' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 animate-spin" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] })) : data.state === 'action-required' ? (_jsxs("button", { type: "button", "aria-label": getActionRequiredLabel(data), "data-testid": "feature-node-approve-button", 
+                                                                : (data.deployment.url ?? 'Live') })] }) })) : null, data.fastMode ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { "data-testid": "feature-node-fast-mode-badge", children: _jsx(Zap, { className: "h-3 w-3 text-amber-500" }) }) }), _jsx(TooltipContent, { side: "top", children: "Fast Mode" })] }) })) : null] }), data.state === 'deleting' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-gray-400" }), _jsx("span", { className: "text-muted-foreground", children: "Deleting\u2026" })] })) : data.state === 'creating' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 animate-spin" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] })) : data.state === 'running' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 animate-spin" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] })) : data.state === 'action-required' ? (_jsxs(Button, { variant: "default", size: "xs", "aria-label": getActionRequiredLabel(data), "data-testid": "feature-node-approve-button", 
                                         // eslint-disable-next-line @typescript-eslint/no-empty-function -- click bubbles to card's onNodeClick
-                                        onClick: () => { }, className: "nodrag relative inline-flex shrink-0 cursor-pointer items-center gap-1.5 overflow-hidden rounded-md bg-gradient-to-b from-neutral-800 via-neutral-900 to-neutral-950 px-3 py-1.5 text-[11px] font-semibold transition-all hover:from-neutral-700 hover:via-neutral-800 hover:to-neutral-900 active:from-neutral-900 active:to-black", children: [_jsx("span", { className: "animate-shimmer pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent via-white/15 to-transparent bg-[length:200%_100%]" }), _jsx(Eye, { className: "relative h-3 w-3 text-amber-400" }), _jsx("span", { className: "animate-shimmer relative bg-gradient-to-r from-amber-400 via-yellow-200 to-amber-400 bg-[length:200%_100%] bg-clip-text text-transparent", children: getActionRequiredLabel(data) })] })) : data.state === 'error' && data.onRetry ? (_jsxs("button", { type: "button", "aria-label": "Retry", "data-testid": "feature-node-retry-button", onClick: (e) => {
+                                        onClick: () => { }, className: "nodrag dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90 cursor-pointer bg-neutral-900 text-[11px] text-white hover:bg-neutral-800", children: [_jsx(Eye, { className: "h-3 w-3" }), getActionRequiredLabel(data)] })) : data.state === 'error' && data.onRetry ? (_jsxs(Button, { variant: "outline", size: "xs", "aria-label": "Retry", "data-testid": "feature-node-retry-button", onClick: (e) => {
                                             e.stopPropagation();
                                             data.onRetry(data.featureId);
-                                        }, className: "nodrag inline-flex shrink-0 cursor-pointer items-center gap-1 rounded-md bg-neutral-800 px-2.5 py-1 text-[11px] font-medium text-white shadow-sm transition-all hover:bg-neutral-700 active:bg-neutral-900 dark:bg-neutral-200 dark:text-neutral-900 dark:hover:bg-neutral-300", children: [_jsx(RotateCcw, { className: "h-3 w-3" }), "Retry"] })) : data.state === 'blocked' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", "data-testid": "feature-node-badge", children: [(() => {
+                                        }, className: "nodrag cursor-pointer text-[11px] font-medium", children: [_jsx(RotateCcw, { className: "h-3 w-3" }), "Retry"] })) : data.state === 'blocked' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", "data-testid": "feature-node-badge", children: [(() => {
                                                 const BadgeIcon = getBadgeIcon(data);
                                                 return _jsx(BadgeIcon, { className: cn('h-3.5 w-3.5 shrink-0', config.badgeClass) });
                                             })(), _jsx("span", { className: cn('truncate text-[11px] font-medium', config.badgeClass), children: getBadgeText(data) })] })) : data.state === 'done' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", "data-testid": "feature-node-badge", children: [(() => {
                                                 const BadgeIcon = getBadgeIcon(data);
                                                 return _jsx(BadgeIcon, { className: cn('h-3.5 w-3.5 shrink-0', config.badgeClass) });
-                                            })(), _jsx("span", { className: cn('text-[11px] font-medium', config.badgeClass), children: getBadgeText(data) })] })) : data.state === 'pending' && data.onStart ? (_jsxs("button", { type: "button", "aria-label": "Start", "data-testid": "feature-node-start-button", onClick: (e) => {
+                                            })(), _jsx("span", { className: cn('text-[11px] font-medium', config.badgeClass), children: getBadgeText(data) })] })) : data.state === 'pending' && data.onStart ? (_jsxs(Button, { variant: "outline", size: "xs", "aria-label": "Start", "data-testid": "feature-node-start-button", onClick: (e) => {
                                             e.stopPropagation();
                                             data.onStart(data.featureId);
-                                        }, className: "nodrag inline-flex shrink-0 cursor-pointer items-center gap-1 rounded-md bg-neutral-800 px-2.5 py-1 text-[11px] font-medium text-white shadow-sm transition-all hover:bg-neutral-700 active:bg-neutral-900 dark:bg-neutral-200 dark:text-neutral-900 dark:hover:bg-neutral-300", children: [_jsx(Play, { className: "h-3 w-3" }), "Start"] })) : null] })] })] }), data.onAction && data.state !== 'deleting' ? (_jsx(Handle, { type: "source", position: Position.Right, className: "h-0! w-0! border-0! bg-transparent!", style: { top: 70 }, children: _jsx("button", { type: "button", "aria-label": "Add", "data-testid": "feature-node-action-button", onClick: (e) => {
+                                        }, className: "nodrag cursor-pointer text-[11px] font-medium", children: [_jsx(Play, { className: "h-3 w-3" }), "Start"] })) : null] })] })] }), data.onAction && data.state !== 'deleting' ? (_jsx(Handle, { type: "source", position: Position.Right, className: "h-0! w-0! border-0! bg-transparent!", style: { top: 70 }, children: _jsx("button", { type: "button", "aria-label": "Add", "data-testid": "feature-node-action-button", onClick: (e) => {
                         e.stopPropagation();
                         data.onAction?.();
                     }, className: "nodrag absolute top-1/2 left-1/2 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-blue-500 text-white opacity-0 shadow-md transition-opacity group-hover:opacity-100 hover:bg-blue-600", children: _jsx(Plus, { className: "h-3.5 w-3.5" }) }) })) : data.showHandles ? (_jsx(Handle, { type: "source", position: Position.Right, isConnectable: false, className: "opacity-0!", style: { top: 70 } })) : null] }));

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

@@ -31,4 +31,6 @@ export declare const ArchivedWithUnarchive: Story;
 export declare const DoneWithArchive: Story;
 /** Shows the archive confirmation dialog in its open state. */
 export declare const ArchiveConfirmationDialog: Story;
+/** Side-by-side comparison of 10 highlight color options for action-required cards. */
+export declare const HighlightColorExploration: Story;
 //# sourceMappingURL=feature-node.stories.d.ts.map

package/dist/src/presentation/web/components/common/feature-node/feature-node.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-node.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,6BAA6B,CAAC;AAoCrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CAqB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AA+LF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAYF,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAC;AA2EF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAUvC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAYlC,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAe5C,CAAC;AA4EF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,yBAAyB,EAAE,KAyBvC,CAAC"}
+{"version":3,"file":"feature-node.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,6BAA6B,CAAC;AAoCrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CAqB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AA+LF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAYF,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAC;AA2EF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAUvC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAYlC,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAe5C,CAAC;AA4EF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,yBAAyB,EAAE,KAyBvC,CAAC;AA0DF,uFAAuF;AACvF,eAAO,MAAM,yBAAyB,EAAE,KAoCvC,CAAC"}

package/dist/src/presentation/web/components/common/feature-node/feature-node.stories.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import { ReactFlowProvider, ReactFlow, useNodesState } from '@xyflow/react';
+import { Eye } from 'lucide-react';
 import { DeploymentState, PrStatus, CiStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
 import { FeatureNode } from './feature-node.js';
 const nodeTypes = { featureNode: FeatureNode };
@@ -668,3 +669,62 @@ export const ArchiveConfirmationDialog = {
         });
     },
 };
+// ---------------------------------------------------------------------------
+// Highlight color exploration — 10 candidate colors for action-required cards
+// ---------------------------------------------------------------------------
+const highlightColors = [
+    {
+        label: '1. Yellow (current)',
+        card: 'bg-[#fffef8]',
+        btn: 'bg-amber-50 text-amber-700 hover:bg-amber-100',
+    },
+    {
+        label: '2. Warm Peach',
+        card: 'bg-[#fff8f5]',
+        btn: 'bg-orange-50 text-orange-700 hover:bg-orange-100',
+    },
+    {
+        label: '3. Soft Rose',
+        card: 'bg-[#fff5f7]',
+        btn: 'bg-rose-50 text-rose-700 hover:bg-rose-100',
+    },
+    {
+        label: '4. Lavender',
+        card: 'bg-[#f8f5ff]',
+        btn: 'bg-violet-50 text-violet-700 hover:bg-violet-100',
+    },
+    {
+        label: '5. Ice Blue',
+        card: 'bg-[#f5f8ff]',
+        btn: 'bg-blue-50 text-blue-700 hover:bg-blue-100',
+    },
+    {
+        label: '6. Sky',
+        card: 'bg-[#f2f9ff]',
+        btn: 'bg-sky-50 text-sky-700 hover:bg-sky-100',
+    },
+    {
+        label: '7. Mint',
+        card: 'bg-[#f2fdf6]',
+        btn: 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100',
+    },
+    {
+        label: '8. Teal',
+        card: 'bg-[#f0fdfa]',
+        btn: 'bg-teal-50 text-teal-700 hover:bg-teal-100',
+    },
+    {
+        label: '9. Neutral Warm',
+        card: 'bg-[#fdfcfa]',
+        btn: 'bg-stone-100 text-stone-700 hover:bg-stone-200',
+    },
+    {
+        label: '10. Pink',
+        card: 'bg-[#fef5ff]',
+        btn: 'bg-fuchsia-50 text-fuchsia-700 hover:bg-fuchsia-100',
+    },
+];
+/** Side-by-side comparison of 10 highlight color options for action-required cards. */
+export const HighlightColorExploration = {
+    render: () => (_jsx("div", { className: "flex flex-wrap gap-6 p-4", children: highlightColors.map(({ label, card, btn }) => (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsxs("div", { className: `${card} flex min-h-35 w-97 cursor-pointer flex-col rounded-lg border p-3 shadow-sm`, children: [_jsx("div", { className: "flex items-center gap-1.5", children: _jsx("h3", { className: "min-w-0 truncate text-sm font-bold", children: "Rate Limiter" }) }), _jsx("p", { className: "text-muted-foreground mt-1 line-clamp-2 text-xs", children: "Sliding window \u2014 awaiting merge approval" }), _jsx("div", { className: "mt-auto pt-2", children: _jsxs("div", { className: "mt-1.5 flex min-h-[26px] items-center justify-between gap-2", children: [_jsx("div", { className: "flex items-center gap-1.5", style: { transform: 'translateY(1px)' }, children: _jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx("span", { className: "text-muted-foreground/50 text-[10px]", children: "ID" }), _jsx("span", { className: "text-muted-foreground/60 font-mono text-[10px]", children: "3b5d7f" })] }) }), _jsxs("button", { className: `${btn} inline-flex shrink-0 items-center gap-1 rounded-md border-0 px-2 py-1 text-[11px] font-normal shadow-none`, children: [_jsx(Eye, { className: "h-3 w-3" }), "Review Changes"] })] }) })] })] }, label))) })),
+};

package/dist/src/presentation/web/components/features/control-center/control-center.stories.d.ts

@@ -5,16 +5,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Empty: Story;
 export declare const WithFeatures: Story;
-export declare const WithToolbar: Story;
-export declare const WithNodeActions: Story;
-/**
- * Dagre auto-layout story — two repositories with interconnected feature trees.
- *
- * Demonstrates the Vertical / Horizontal toolbar buttons that re-layout the graph.
- * Initial layout is LR (horizontal). Click "Vertical" to switch to TB, or
- * "Horizontal" to switch back.
- */
-export declare const DagreLayout: Story;
 /**
  * Canvas with active and archived features.
  * The archive toggle button appears in the top-right corner ("Show archived").

package/dist/src/presentation/web/components/features/control-center/control-center.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-center.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAkBpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA0EnC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAiIF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AA4DF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC"}
+{"version":3,"file":"control-center.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAejD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAoBpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAyVnC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AA4DF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC"}