@shepai/cli 1.72.6 → 1.72.7-pr187.0bb1028

package/web/.next/standalone/src/presentation/web/app/api/tools/[id]/install/stream/route.ts

@@ -0,0 +1,42 @@
+import { resolve } from '@/lib/server-container';
+import type { InstallToolUseCase } from '@shepai/core/application/use-cases/tools/install-tool.use-case';
+
+// Force dynamic — SSE streams must never be statically optimized or cached
+export const dynamic = 'force-dynamic';
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+): Promise<Response> {
+  const { id } = await params;
+  const useCase = resolve<InstallToolUseCase>('InstallToolUseCase');
+
+  const encoder = new TextEncoder();
+  const stream = new ReadableStream({
+    async start(controller) {
+      try {
+        const status = await useCase.execute(id, (chunk: string) => {
+          controller.enqueue(encoder.encode(`data: ${chunk.replace(/\n/g, '\ndata: ')}\n\n`));
+        });
+        controller.enqueue(encoder.encode(`event: done\ndata: ${JSON.stringify(status)}\n\n`));
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Installation failed';
+        controller.enqueue(
+          encoder.encode(
+            `event: done\ndata: ${JSON.stringify({ status: 'error', toolName: id, errorMessage: message })}\n\n`
+          )
+        );
+      } finally {
+        controller.close();
+      }
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    },
+  });
+}

package/web/.next/standalone/src/presentation/web/app/build-graph-nodes.ts

@@ -117,7 +117,20 @@ function appendFeatureNodes(
   nodes: CanvasNodeType[],
   edges: Edge[]
 ): void {
-  repoFeatures.forEach(({ feature, run }) => {
+  // Sort by createdAt so newest features appear last (bottom) in the layout
+  const sorted = [...repoFeatures].sort((a, b) => {
+    const aTime =
+      a.feature.createdAt instanceof Date
+        ? a.feature.createdAt.getTime()
+        : Number(a.feature.createdAt);
+    const bTime =
+      b.feature.createdAt instanceof Date
+        ? b.feature.createdAt.getTime()
+        : Number(b.feature.createdAt);
+    return aTime - bTime;
+  });
+
+  sorted.forEach(({ feature, run }) => {
     const agentNode = run?.result?.startsWith('node:') ? run.result.slice(5) : undefined;
     const lifecycle: FeatureLifecyclePhase =
       run?.status === 'completed'

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

@@ -12,6 +12,8 @@ import {
   DrawerHeader,
   DrawerFooter,
   DrawerOverlay,
+  DrawerTitle,
+  DrawerDescription,
 } from '@/components/ui/drawer';
 import { Separator } from '@/components/ui/separator';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
@@ -34,6 +36,9 @@ export interface BaseDrawerProps extends VariantProps<typeof drawerVariants> {
   open: boolean;
   onClose: () => void;
   modal?: boolean;
+  /** When true, clicking anywhere outside the drawer closes it, ignoring `data-no-drawer-close` guards. */
+  dismissOnOutsideClick?: boolean;
+  title?: string;
   header?: React.ReactNode;
   children: React.ReactNode;
   footer?: React.ReactNode;
@@ -46,6 +51,8 @@ export function BaseDrawer({
   open,
   onClose,
   modal = false,
+  dismissOnOutsideClick = false,
+  title = 'Drawer',
   size,
   header,
   children,
@@ -68,19 +75,18 @@ export function BaseDrawer({
       // longer in the DOM tree — treat it as an internal click, not an outside one.
       if (!document.body.contains(target)) return;
       if (contentRef.current?.contains(target)) return;
-      // Don't close when clicking inside the canvas or other Radix overlays
-      if (
-        target.closest(
-          '[data-no-drawer-close], [role="alertdialog"], [role="menu"], [role="listbox"], [data-radix-popper-content-wrapper]'
-        )
-      )
-        return;
+      // Don't close when clicking inside Radix overlays.
+      // When dismissOnOutsideClick is false (default), also respect data-no-drawer-close guards.
+      const ignoreSelector = dismissOnOutsideClick
+        ? '[role="alertdialog"], [role="dialog"], [role="menu"], [role="listbox"], [data-radix-popper-content-wrapper]'
+        : '[data-no-drawer-close], [role="alertdialog"], [role="dialog"], [role="menu"], [role="listbox"], [data-radix-popper-content-wrapper]';
+      if (target.closest(ignoreSelector)) return;
       onClose();
     };
 
     document.addEventListener('click', handleClick);
     return () => document.removeEventListener('click', handleClick);
-  }, [open, modal, onClose]);
+  }, [open, modal, onClose, dismissOnOutsideClick]);
 
   return (
     <Drawer
@@ -99,8 +105,16 @@ export function BaseDrawer({
         showCloseButton={false}
         className={cn(drawerVariants({ size }), className)}
         data-testid={testId}
-        onInteractOutside={(e) => e.preventDefault()}
+        onInteractOutside={modal ? undefined : (e) => e.preventDefault()}
       >
+        {/* Visually hidden title & description required by Radix Dialog for accessibility */}
+        <DrawerTitle asChild>
+          <span className="sr-only">{title}</span>
+        </DrawerTitle>
+        <DrawerDescription asChild>
+          <span className="sr-only">{title}</span>
+        </DrawerDescription>
+
         {/* Close button */}
         <button
           type="button"

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/create-drawer-client.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import { toast } from 'sonner';
 import { createFeature } from '@/app/actions/create-feature';
@@ -31,8 +31,18 @@ export function CreateDrawerClient({
   // content during soft navigation, so this component is NOT unmounted when
   // navigating to `/`. We watch the pathname and let Vaul handle the close
   // animation when the path no longer matches the create route.
+  // When submitting, force the drawer closed immediately — router.push('/')
+  // is async and the pathname may not update before the next render.
   const pathname = usePathname();
-  const isOpen = pathname.startsWith('/create');
+  const isOpen = !isSubmitting && pathname.startsWith('/create');
+
+  // Safety net: if the drawer is closed (e.g. via form submit + isSubmitting)
+  // but router.push('/') hasn't taken effect yet, force-clear the route.
+  useEffect(() => {
+    if (!isOpen && pathname.startsWith('/create')) {
+      router.replace('/');
+    }
+  }, [isOpen, pathname, router]);
 
   const onClose = useCallback(() => {
     router.push('/');
@@ -49,6 +59,7 @@ export function CreateDrawerClient({
             name: data.name,
             description: data.description,
             repositoryPath: data.repositoryPath,
+            parentId: data.parentId,
           },
         })
       );
@@ -66,7 +77,6 @@ export function CreateDrawerClient({
             return;
           }
           createSound.play();
-          router.refresh();
         })
         .catch(() => {
           toast.error('Failed to create feature');

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

@@ -100,8 +100,9 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
       const newLifecycle = mapPhaseNameToLifecycle(event.phaseName);
 
       // Trigger a server refresh to get the latest drawer view,
-      // but skip when the user has unsaved changes to avoid losing form state.
-      if (!isDirtyRef.current) router.refresh();
+      // but skip when the user has unsaved changes or a rejection is in-flight
+      // to avoid the refresh interfering with the reject handler's navigation.
+      if (!isDirtyRef.current && !isRejectingRef.current) router.refresh();
 
       // Optimistically update the node data for immediate UI feedback
       setView((prev) => {
@@ -163,6 +164,7 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
 
   // ── Shared reject state ────────────────────────────────────────────────
   const [isRejecting, setIsRejecting] = useState(false);
+  const isRejectingRef = useRef(false);
 
   // Reset chat input whenever the view type changes
   const viewType = view.type;
@@ -317,6 +319,7 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
   const handleReject = useCallback(
     async (feedback: string, label: string, onDone?: () => void) => {
       if (!reviewNode?.featureId) return;
+      isRejectingRef.current = true;
       setIsRejecting(true);
       try {
         const result = await rejectFeature(reviewNode.featureId, feedback);
@@ -335,6 +338,7 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
         onClose();
         onDone?.();
       } finally {
+        isRejectingRef.current = false;
         setIsRejecting(false);
       }
     },

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

@@ -46,6 +46,7 @@ export function DrawerActionBar({
             value={chatInput}
             onChange={(e) => setChatInput(e.target.value)}
             className="flex-1"
+            data-testid="drawer-chat-input"
           />
           <Button
             type="submit"
@@ -53,6 +54,7 @@ export function DrawerActionBar({
             size="icon"
             aria-label="Send"
             disabled={disabled}
+            data-testid="drawer-chat-send"
           >
             <Send />
           </Button>

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

@@ -192,6 +192,7 @@ export function FeatureCreateDrawer({
       onClose={attemptClose}
       size="md"
       modal={false}
+      dismissOnOutsideClick
       data-testid="feature-create-drawer"
       header={
         <>
@@ -199,11 +200,13 @@ export function FeatureCreateDrawer({
             <div className="h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" />
             <DrawerTitle>NEW FEATURE</DrawerTitle>
           </div>
-          <DrawerDescription asChild>
-            <div>
-              <Badge variant="secondary">Creating...</Badge>
-            </div>
-          </DrawerDescription>
+          {isSubmitting ? (
+            <DrawerDescription asChild>
+              <div>
+                <Badge variant="secondary">Creating...</Badge>
+              </div>
+            </DrawerDescription>
+          ) : null}
         </>
       }
       footer={

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

@@ -5,15 +5,15 @@ import { Handle, Position } from '@xyflow/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';
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import {
   featureNodeStateConfig,
@@ -123,26 +123,32 @@ export function FeatureNode({
             </TooltipProvider>
           </div>
 
-          <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
-            <AlertDialogContent size="sm">
-              <AlertDialogHeader>
-                <AlertDialogTitle>Delete feature?</AlertDialogTitle>
-                <AlertDialogDescription>
+          <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+            <DialogContent className="max-w-xs">
+              <DialogHeader>
+                <DialogTitle>Delete feature?</DialogTitle>
+                <DialogDescription>
                   This will permanently delete <strong>{data.name}</strong> and all associated data
                   including specs, branches, and progress.
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                <AlertDialogAction
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter className="grid grid-cols-2 gap-2 sm:flex-none">
+                <DialogClose asChild>
+                  <Button variant="outline">Cancel</Button>
+                </DialogClose>
+                <Button
                   variant="destructive"
-                  onClick={() => data.onDelete?.(data.featureId)}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setConfirmOpen(false);
+                    data.onDelete?.(data.featureId);
+                  }}
                 >
                   Delete
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
         </>
       ) : null}
 

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

@@ -6,15 +6,15 @@ import { Github, Plus, Code2, Terminal, FolderOpen, Trash2, Play, Square } from
 import { cn } from '@/lib/utils';
 import { ActionButton } from '@/components/common/action-button';
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { DeploymentStatusBadge } from '@/components/common/deployment-status-badge';
 import { useDeployAction } from '@/hooks/use-deploy-action';
@@ -73,23 +73,31 @@ export function RepositoryNode({ data }: { data: RepositoryNodeData; [key: strin
             </TooltipProvider>
           </div>
 
-          <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
-            <AlertDialogContent size="sm">
-              <AlertDialogHeader>
-                <AlertDialogTitle>Remove repository?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  This will remove <strong>{data.name}</strong> from your workspace. The repository
-                  files on disk won&apos;t be affected.
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                <AlertDialogAction variant="destructive" onClick={() => data.onDelete?.(data.id!)}>
+          <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+            <DialogContent className="max-w-xs">
+              <DialogHeader>
+                <DialogTitle>Remove repository?</DialogTitle>
+                <DialogDescription>
+                  This will remove <strong>{data.name}</strong> and all its features from your
+                  workspace. The repository files on disk won&apos;t be affected.
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter className="grid grid-cols-2 gap-2 sm:flex-none">
+                <DialogClose asChild>
+                  <Button variant="outline">Cancel</Button>
+                </DialogClose>
+                <Button
+                  variant="destructive"
+                  onClick={() => {
+                    setConfirmOpen(false);
+                    data.onDelete?.(data.id!);
+                  }}
+                >
                   Remove
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
         </>
       ) : null}
 

package/web/.next/standalone/src/presentation/web/components/features/control-center/control-center-inner.tsx

@@ -28,7 +28,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
   const pathname = usePathname();
   const selectedFeatureId = useSelectedFeatureId();
   const clickSound = useSoundAction('click');
-  const { guardedNavigate, getIsDirty } = useDrawerCloseGuard();
+  const { guardedNavigate } = useDrawerCloseGuard();
 
   const {
     nodes,
@@ -39,7 +39,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     handleDeleteFeature,
     handleDeleteRepository,
     createFeatureNode,
-  } = useControlCenterState(initialNodes, initialEdges, getIsDirty);
+  } = useControlCenterState(initialNodes, initialEdges);
 
   // Publish sidebar features to context whenever feature node data changes
   const { setFeatures: setSidebarFeatures } = useSidebarFeaturesContext();
@@ -167,9 +167,31 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
   useEffect(() => {
     const handler = (e: Event) => {
       const detail = (
-        e as CustomEvent<{ name: string; description?: string; repositoryPath: string }>
+        e as CustomEvent<{
+          name: string;
+          description?: string;
+          repositoryPath: string;
+          parentId?: string;
+        }>
       ).detail;
 
+      // When a parentId is provided, connect to the parent feature node
+      // via a dependency edge instead of the repo node.
+      if (detail.parentId) {
+        const parentNodeId = `feat-${detail.parentId}`;
+        createFeatureNode(
+          parentNodeId,
+          {
+            state: 'creating',
+            name: detail.name,
+            description: detail.description,
+            repositoryPath: detail.repositoryPath,
+          },
+          'dependencyEdge'
+        );
+        return;
+      }
+
       // Find the repo node to connect to
       const repoNode = nodes.find(
         (n) =>