@shepai/cli 1.66.4 → 1.68.0

package/web/.next/standalone/src/presentation/web/components/common/feature-drawer/feature-drawer.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { Loader2, Trash2, ExternalLink, GitCommitHorizontal } from 'lucide-react';
 import { PrStatus } from '@shepai/core/domain/generated/output';
 import { cn } from '@/lib/utils';
-import { useSoundAction } from '@/hooks/use-sound-action';
 import { OpenActionMenu } from '@/components/common/open-action-menu';
 import { BaseDrawer } from '@/components/common/base-drawer';
 import { DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
@@ -41,33 +40,101 @@ export function FeatureDrawer({
   onDelete,
   isDeleting = false,
 }: FeatureDrawerProps) {
-  const drawerOpenSound = useSoundAction('drawer-open');
-  const drawerCloseSound = useSoundAction('drawer-close');
-
-  const isOpen = selectedNode !== null;
-  const playDrawerOpen = drawerOpenSound.play;
-  useEffect(() => {
-    if (isOpen) playDrawerOpen();
-  }, [isOpen, playDrawerOpen]);
-
   const handleClose = useCallback(() => {
-    drawerCloseSound.play();
     onClose();
-  }, [onClose, drawerCloseSound]);
+  }, [onClose]);
+
+  const actionsInput =
+    selectedNode?.repositoryPath && selectedNode?.branch
+      ? {
+          repositoryPath: selectedNode.repositoryPath,
+          branch: selectedNode.branch,
+          specPath: selectedNode.specPath,
+        }
+      : null;
+  const actions = useFeatureActions(actionsInput);
 
   return (
     <BaseDrawer
       open={selectedNode !== null}
       onClose={handleClose}
-      size="sm"
+      size="md"
       modal={false}
       data-testid="feature-drawer"
       header={
         selectedNode ? (
-          <div data-testid="feature-drawer-header">
-            <DrawerTitle>{selectedNode.name}</DrawerTitle>
-            <DrawerDescription>{selectedNode.featureId}</DrawerDescription>
-          </div>
+          <>
+            <div data-testid="feature-drawer-header">
+              <DrawerTitle>{selectedNode.name}</DrawerTitle>
+              {selectedNode.description ? (
+                <DrawerDescription>{selectedNode.description}</DrawerDescription>
+              ) : selectedNode.featureId ? (
+                <DrawerDescription className="sr-only">{selectedNode.featureId}</DrawerDescription>
+              ) : null}
+            </div>
+
+            {actionsInput ? (
+              <div className="flex items-center gap-2 pt-2">
+                <OpenActionMenu
+                  actions={actions}
+                  repositoryPath={actionsInput.repositoryPath}
+                  showSpecs={!!actionsInput.specPath}
+                />
+                {onDelete && selectedNode.featureId ? (
+                  <>
+                    <div className="bg-border mx-1 h-4 w-px" />
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label="Delete feature"
+                          disabled={isDeleting}
+                          className="text-muted-foreground hover:text-destructive"
+                          data-testid="feature-drawer-delete"
+                        >
+                          {isDeleting ? (
+                            <Loader2 className="size-4 animate-spin" />
+                          ) : (
+                            <Trash2 className="size-4" />
+                          )}
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>Delete feature?</AlertDialogTitle>
+                          <AlertDialogDescription>
+                            This will permanently delete <strong>{selectedNode.name}</strong> (
+                            {selectedNode.featureId}). This action cannot be undone.
+                            {selectedNode.state === 'running' ? (
+                              <> This feature has a running agent that will be stopped.</>
+                            ) : null}
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+                          <AlertDialogAction
+                            variant="destructive"
+                            disabled={isDeleting}
+                            onClick={() => onDelete(selectedNode.featureId)}
+                          >
+                            {isDeleting ? (
+                              <>
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                Deleting…
+                              </>
+                            ) : (
+                              'Delete'
+                            )}
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  </>
+                ) : null}
+              </div>
+            ) : null}
+          </>
         ) : undefined
       }
       deployTarget={
@@ -82,18 +149,7 @@ export function FeatureDrawer({
       }
     >
       {selectedNode ? (
-        <>
-          {/* Action buttons */}
-          {selectedNode.repositoryPath && selectedNode.branch ? (
-            <DrawerActions
-              repositoryPath={selectedNode.repositoryPath}
-              branch={selectedNode.branch}
-              specPath={selectedNode.specPath}
-            />
-          ) : null}
-
-          <Separator />
-
+        <div className="flex-1 overflow-y-auto">
           {/* Status */}
           <div data-testid="feature-drawer-status" className="flex flex-col gap-3 p-4">
             <div className="text-muted-foreground text-xs font-semibold tracking-wider">
@@ -129,57 +185,9 @@ export function FeatureDrawer({
             </>
           ) : null}
 
-          <Separator />
-
           {/* Details */}
           <DetailsSection data={selectedNode} />
-
-          {/* Delete action */}
-          {onDelete ? (
-            <>
-              <Separator />
-              <div data-testid="feature-drawer-delete" className="p-4">
-                <AlertDialog>
-                  <AlertDialogTrigger asChild>
-                    <Button variant="destructive" className="w-full" disabled={isDeleting}>
-                      <Trash2 className="mr-2 h-4 w-4" />
-                      Delete feature
-                    </Button>
-                  </AlertDialogTrigger>
-                  <AlertDialogContent>
-                    <AlertDialogHeader>
-                      <AlertDialogTitle>Delete feature?</AlertDialogTitle>
-                      <AlertDialogDescription>
-                        This will permanently delete <strong>{selectedNode.name}</strong> (
-                        {selectedNode.featureId}). This action cannot be undone.
-                        {selectedNode.state === 'running' ? (
-                          <> This feature has a running agent that will be stopped.</>
-                        ) : null}
-                      </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                      <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-                      <AlertDialogAction
-                        variant="destructive"
-                        disabled={isDeleting}
-                        onClick={() => onDelete(selectedNode.featureId)}
-                      >
-                        {isDeleting ? (
-                          <>
-                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                            Deleting…
-                          </>
-                        ) : (
-                          'Delete'
-                        )}
-                      </AlertDialogAction>
-                    </AlertDialogFooter>
-                  </AlertDialogContent>
-                </AlertDialog>
-              </div>
-            </>
-          ) : null}
-        </>
+        </div>
       ) : null}
     </BaseDrawer>
   );
@@ -208,19 +216,20 @@ function StateBadge({ data }: { data: FeatureNodeData }) {
 }
 
 function DetailsSection({ data }: { data: FeatureNodeData }) {
-  const hasAnyDetail =
-    data.description ?? data.agentType ?? data.runtime ?? data.blockedBy ?? data.errorMessage;
+  const hasAnyDetail = data.agentType ?? data.runtime ?? data.blockedBy ?? data.errorMessage;
 
   if (!hasAnyDetail) return null;
 
   return (
-    <div data-testid="feature-drawer-details" className="flex flex-col gap-3 p-4">
-      {data.description ? <DetailRow label="Description" value={data.description} /> : null}
-      {data.agentType ? <DetailRow label="Agent" value={data.agentType} /> : null}
-      {data.runtime ? <DetailRow label="Runtime" value={data.runtime} /> : null}
-      {data.blockedBy ? <DetailRow label="Blocked by" value={data.blockedBy} /> : null}
-      {data.errorMessage ? <DetailRow label="Error" value={data.errorMessage} /> : null}
-    </div>
+    <>
+      <Separator />
+      <div data-testid="feature-drawer-details" className="flex flex-col gap-3 p-4">
+        {data.agentType ? <DetailRow label="Agent" value={data.agentType} /> : null}
+        {data.runtime ? <DetailRow label="Runtime" value={data.runtime} /> : null}
+        {data.blockedBy ? <DetailRow label="Blocked by" value={data.blockedBy} /> : null}
+        {data.errorMessage ? <DetailRow label="Error" value={data.errorMessage} /> : null}
+      </div>
+    </>
   );
 }
 
@@ -281,21 +290,3 @@ function PrInfoSection({ pr }: { pr: NonNullable<FeatureNodeData['pr']> }) {
     </div>
   );
 }
-
-function DrawerActions({
-  repositoryPath,
-  branch,
-  specPath,
-}: {
-  repositoryPath: string;
-  branch: string;
-  specPath?: string;
-}) {
-  const actions = useFeatureActions({ repositoryPath, branch, specPath });
-
-  return (
-    <div className="flex gap-2 px-4 pb-3">
-      <OpenActionMenu actions={actions} repositoryPath={repositoryPath} showSpecs={!!specPath} />
-    </div>
-  );
-}

package/web/.next/standalone/src/presentation/web/components/common/feature-node/feature-node-state-config.ts

@@ -71,6 +71,7 @@ export interface FeatureNodeData {
   };
   onAction?: () => void;
   onSettings?: () => void;
+  onDelete?: (featureId: string) => void;
   showHandles?: boolean;
 }
 

package/web/.next/standalone/src/presentation/web/components/common/feature-node/feature-node.stories.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, waitFor } from '@storybook/test';
+import { expect, fn, waitFor } from '@storybook/test';
 import { ReactFlowProvider, ReactFlow, useNodesState } from '@xyflow/react';
 import { FeatureNode } from './feature-node';
 import type { AgentTypeValue } from './agent-type-icons';
@@ -351,6 +351,19 @@ export const ErrorWithMessage: Story = {
   render: (args) => <FeatureNodeCanvas data={args} />,
 };
 
+export const WithDeleteButton: Story = {
+  args: {
+    name: 'Auth Module',
+    description: 'Implement OAuth2 authentication flow',
+    featureId: '#f1',
+    lifecycle: 'implementation',
+    state: 'running',
+    progress: 45,
+    onDelete: fn(),
+  },
+  render: (args) => <FeatureNodeCanvas data={args} />,
+};
+
 const interactiveInitialNodes: FeatureNodeType[] = [
   {
     id: 'node-1',

package/web/.next/standalone/src/presentation/web/components/common/feature-node/feature-node.tsx

@@ -1,8 +1,20 @@
 'use client';
 
+import { useState } from 'react';
 import { Handle, Position } from '@xyflow/react';
-import { Settings, Plus, FileText, Wrench, GitMerge, type LucideIcon } from 'lucide-react';
+import { Settings, Plus, FileText, Wrench, GitMerge, Trash2, type LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import {
   featureNodeStateConfig,
   lifecycleDisplayLabels,
@@ -74,6 +86,7 @@ export function FeatureNode({
 }) {
   const config = featureNodeStateConfig[data.state];
   const Icon = config.icon;
+  const [confirmOpen, setConfirmOpen] = useState(false);
 
   return (
     <div className="group relative">
@@ -86,6 +99,53 @@ export function FeatureNode({
         />
       ) : null}
 
+      {/* Delete button — visible on hover, positioned to the left */}
+      {data.onDelete && data.featureId ? (
+        <>
+          <div className="absolute top-1/2 -left-10 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    aria-label="Delete feature"
+                    data-testid="feature-node-delete-button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setConfirmOpen(true);
+                    }}
+                    className="bg-card text-muted-foreground hover:border-destructive hover:text-destructive flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>Delete feature</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+
+          <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+            <AlertDialogContent size="sm">
+              <AlertDialogHeader>
+                <AlertDialogTitle>Delete feature?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This will permanently delete <strong>{data.name}</strong> and all associated data
+                  including specs, branches, and progress.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                  variant="destructive"
+                  onClick={() => data.onDelete?.(data.featureId)}
+                >
+                  Delete
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </>
+      ) : null}
+
       <div
         data-testid="feature-node-card"
         aria-busy={data.state === 'creating' ? 'true' : undefined}

package/web/.next/standalone/src/presentation/web/components/common/index.ts

@@ -1,3 +1,9 @@
+export {
+  ControlCenterDrawer,
+  type ControlCenterDrawerProps,
+  computeDrawerView,
+  type DrawerView,
+} from './control-center-drawer';
 export {
   AddRepositoryNode,
   type AddRepositoryNodeData,

package/web/.next/standalone/src/presentation/web/components/common/merge-review/merge-review.stories.tsx

@@ -42,7 +42,7 @@ const defaultActions = {
 /* ─── Standalone MergeReview ─── */
 
 const meta: Meta<typeof MergeReview> = {
-  title: 'Common/MergeReview',
+  title: 'Drawers/Review/MergeReview',
   component: MergeReview,
   tags: ['autodocs'],
   parameters: {
@@ -161,7 +161,6 @@ export const WithPhases: Story = {
 type DrawerStory = StoryObj<typeof MergeReviewDrawer>;
 
 const drawerMeta = {
-  title: 'Common/MergeReviewDrawer',
   component: MergeReviewDrawer,
   tags: ['autodocs'],
   parameters: {

package/web/.next/standalone/src/presentation/web/components/common/merge-review/merge-review.tsx

@@ -56,7 +56,7 @@ export function MergeReview({
   const { pr, diffSummary, phases, branch, warning } = data;
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex flex-1 flex-col">
       <div className="flex-1 space-y-4 overflow-y-auto p-4">
         {/* Header */}
         <div className="flex items-start gap-3">
@@ -186,7 +186,6 @@ export function MergeReview({
           )
         }
         revisionPlaceholder="Ask AI to revise before merging..."
-        rejectDialogTitle="Reject Merge"
         isProcessing={isProcessing}
         isRejecting={isRejecting}
       />

package/web/.next/standalone/src/presentation/web/components/common/prd-questionnaire/prd-questionnaire.stories.tsx

@@ -164,7 +164,7 @@ function InteractiveQuestionnaire({
 /* ─── Standalone PrdQuestionnaire ─── */
 
 const meta: Meta<typeof PrdQuestionnaire> = {
-  title: 'Composed/PrdQuestionnaire',
+  title: 'Drawers/Review/PrdQuestionnaire',
   component: PrdQuestionnaire,
   tags: ['autodocs'],
   parameters: {
@@ -280,7 +280,6 @@ export const MinimalData: Story = {
 type DrawerStory = StoryObj<typeof PrdQuestionnaireDrawer>;
 
 const drawerMeta = {
-  title: 'Composed/PrdQuestionnaireDrawer',
   component: PrdQuestionnaireDrawer,
   tags: ['autodocs'],
   parameters: {

package/web/.next/standalone/src/presentation/web/components/common/prd-questionnaire/prd-questionnaire.tsx

@@ -46,7 +46,7 @@ export function PrdQuestionnaire({
   if (total === 0) return null;
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex flex-1 flex-col">
       <div className="flex-1 space-y-4 overflow-y-auto p-4">
         {/* Header */}
         {showHeader ? (

package/web/.next/standalone/src/presentation/web/components/common/repository-node/repository-drawer.stories.tsx

@@ -5,7 +5,7 @@ import { RepositoryDrawer } from './repository-drawer';
 import type { RepositoryNodeData } from './repository-node-config';
 
 const meta: Meta<typeof RepositoryDrawer> = {
-  title: 'Composed/RepositoryDrawer',
+  title: 'Drawers/Feature/RepositoryDrawer',
   component: RepositoryDrawer,
   tags: ['autodocs'],
   parameters: {
@@ -36,7 +36,7 @@ function DrawerTrigger({ data, label }: { data: RepositoryNodeData; label: strin
 }
 
 export const Default: Story = {
-  render: () => <DrawerTrigger data={repoData} label="Open Repository" />,
+  render: () => <RepositoryDrawerShellTemplate data={repoData} />,
 };
 
 export const LongPath: Story = {
@@ -56,3 +56,29 @@ export const WithoutPath: Story = {
     <DrawerTrigger data={{ ...repoData, repositoryPath: undefined }} label="Open Without Path" />
   ),
 };
+
+/* ---------------------------------------------------------------------------
+ * Shell template — full page context, starts open (matches ReviewDrawerShell pattern)
+ * ------------------------------------------------------------------------- */
+
+function RepositoryDrawerShellTemplate({ data }: { data: RepositoryNodeData }) {
+  const [selected, setSelected] = useState<RepositoryNodeData | null>(data);
+
+  return (
+    <div style={{ height: '100vh', background: '#f8fafc', padding: '2rem' }}>
+      <button
+        type="button"
+        onClick={() => setSelected(data)}
+        style={{ padding: '8px 16px', border: '1px solid #ccc', borderRadius: '6px' }}
+      >
+        Open Drawer
+      </button>
+      <RepositoryDrawer data={selected} onClose={() => setSelected(null)} />
+    </div>
+  );
+}
+
+/** Repository drawer rendered inside a full-page context — starts open. */
+export const InDrawer: Story = {
+  render: () => <RepositoryDrawerShellTemplate data={repoData} />,
+};

package/web/.next/standalone/src/presentation/web/components/common/repository-node/repository-drawer.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useCallback } from 'react';
 import { Code2, Terminal, FolderOpen } from 'lucide-react';
 import { BaseDrawer } from '@/components/common/base-drawer';
 import { DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
@@ -14,6 +15,10 @@ export interface RepositoryDrawerProps {
 }
 
 export function RepositoryDrawer({ data, onClose }: RepositoryDrawerProps) {
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
   const actions = useRepositoryActions(
     data?.repositoryPath ? { repositoryPath: data.repositoryPath } : null
   );
@@ -21,8 +26,8 @@ export function RepositoryDrawer({ data, onClose }: RepositoryDrawerProps) {
   return (
     <BaseDrawer
       open={data !== null}
-      onClose={onClose}
-      size="sm"
+      onClose={handleClose}
+      size="md"
       modal={false}
       data-testid="repository-drawer"
       deployTarget={

package/web/.next/standalone/src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.stories.tsx

@@ -4,7 +4,7 @@ import { fn } from '@storybook/test';
 import { ReviewDrawerShell } from './review-drawer-shell';
 
 const meta: Meta<typeof ReviewDrawerShell> = {
-  title: 'Composed/ReviewDrawerShell',
+  title: 'Drawers/Review/ReviewDrawerShell',
   component: ReviewDrawerShell,
   tags: ['autodocs'],
   parameters: {

package/web/.next/standalone/src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.tsx

@@ -1,10 +1,10 @@
 'use client';
 
+import { useCallback } from 'react';
 import { Loader2, Trash2, Play, Square } from 'lucide-react';
 import { BaseDrawer } from '@/components/common/base-drawer';
 import { DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
 import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -38,6 +38,10 @@ export function ReviewDrawerShell({
   isDeleting,
   children,
 }: ReviewDrawerShellProps) {
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
   const actionsInput = repositoryPath && branch ? { repositoryPath, branch, specPath } : null;
   const actions = useFeatureActions(actionsInput);
 
@@ -51,7 +55,7 @@ export function ReviewDrawerShell({
   return (
     <BaseDrawer
       open={open}
-      onClose={onClose}
+      onClose={handleClose}
       size="md"
       modal={false}
       data-testid="review-drawer"
@@ -151,10 +155,7 @@ export function ReviewDrawerShell({
         </>
       }
     >
-      <Separator />
-
-      {/* Content slot */}
-      <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+      {children}
     </BaseDrawer>
   );
 }

package/web/.next/standalone/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.stories.tsx

@@ -45,7 +45,7 @@ const mockData: TechDecisionsReviewData = {
 /* ─── Standalone TechDecisionsReview ─── */
 
 const meta: Meta<typeof TechDecisionsReview> = {
-  title: 'Composed/TechDecisionsReview',
+  title: 'Drawers/Review/TechDecisionsReview',
   component: TechDecisionsReview,
   tags: ['autodocs'],
   parameters: {
@@ -104,7 +104,6 @@ export const NoTechnologies: Story = {
 type DrawerStory = StoryObj<typeof TechDecisionsDrawer>;
 
 const drawerMeta = {
-  title: 'Composed/TechDecisionsDrawer',
   component: TechDecisionsDrawer,
   tags: ['autodocs'],
   parameters: {

package/web/.next/standalone/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.tsx

@@ -131,7 +131,7 @@ export function TechDecisionsReview({
   if (decisions.length === 0) return null;
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex flex-1 flex-col">
       <div className="flex-1 space-y-4 overflow-y-auto p-4">
         {/* Header */}
         <div className="flex items-start gap-3">
@@ -164,7 +164,6 @@ export function TechDecisionsReview({
         approveLabel="Approve Plan"
         approveIcon={<Check className="mr-1.5 h-4 w-4" />}
         revisionPlaceholder="Ask AI to revise the plan..."
-        rejectDialogTitle="Reject Plan"
         isProcessing={isProcessing}
         isRejecting={isRejecting}
       />