@shepai/cli 1.72.9 → 1.73.0

package/web/.next/standalone/src/presentation/web/components/features/features-canvas/features-canvas.stories.tsx

@@ -4,7 +4,6 @@ import { FeaturesCanvas } from './features-canvas';
 import type { CanvasNodeType } from './features-canvas';
 import type { FeatureNodeType } from '@/components/common/feature-node';
 import type { RepositoryNodeType } from '@/components/common/repository-node';
-import type { AddRepositoryNodeType } from '@/components/common/add-repository-node';
 import { layoutWithDagre } from '@/lib/layout-with-dagre';
 
 const meta: Meta<typeof FeaturesCanvas> = {
@@ -229,8 +228,6 @@ export const Interactive: Story = {
       { id: 'e3-4', source: 'node-3', target: 'node-4' },
     ],
     onAddFeature: () => undefined,
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
   },
 };
 
@@ -243,16 +240,8 @@ const repoNode: RepositoryNodeType = {
   },
 };
 
-const addRepoNode: AddRepositoryNodeType = {
-  id: 'add-repo',
-  type: 'addRepositoryNode',
-  position: { x: 50, y: 302 },
-  data: {},
-};
-
 const repoFeatureNodes: CanvasNodeType[] = [
   repoNode,
-  addRepoNode,
   {
     id: 'feat-1',
     type: 'featureNode',
@@ -296,8 +285,6 @@ export const ConnectedRepositoryMultipleFeatures: Story = {
   args: {
     nodes: repoFeatureNodes,
     edges: repoFeatureEdges,
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
   },
 };
 
@@ -310,12 +297,6 @@ const singleRepoSingleFeatureNodes: CanvasNodeType[] = [
     position: { x: 50, y: 127 },
     data: { name: 'shep-ai/cli' },
   },
-  {
-    id: 'add-repo',
-    type: 'addRepositoryNode',
-    position: { x: 50, y: 267 },
-    data: {},
-  },
   {
     id: 'feat-1',
     type: 'featureNode',
@@ -339,8 +320,6 @@ export const ConnectedRepositorySingleFeature: Story = {
     edges: [
       { id: 'e-repo-f1', source: 'repo-1', target: 'feat-1', type: 'straight', ...dashedEdge },
     ],
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
   },
 };
 
@@ -353,12 +332,6 @@ const singleRepoMultiFeatNodes: CanvasNodeType[] = [
     position: { x: 50, y: 162 },
     data: { name: 'shep-ai/cli' },
   },
-  {
-    id: 'add-repo',
-    type: 'addRepositoryNode',
-    position: { x: 50, y: 450 },
-    data: {},
-  },
   {
     id: 'feat-1',
     type: 'featureNode',
@@ -414,8 +387,6 @@ export const SingleRepositoryMultipleFeatures: Story = {
       { id: 'e-r1-f2', source: 'repo-1', target: 'feat-2', ...dashedEdge },
       { id: 'e-r1-f3', source: 'repo-1', target: 'feat-3', ...dashedEdge },
     ],
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
   },
 };
 
@@ -434,12 +405,6 @@ const multiRepoNodes: CanvasNodeType[] = [
     position: { x: 50, y: 270 },
     data: { name: 'shep-ai/web' },
   },
-  {
-    id: 'add-repo',
-    type: 'addRepositoryNode',
-    position: { x: 50, y: 470 },
-    data: {},
-  },
   {
     id: 'feat-1',
     type: 'featureNode',
@@ -479,8 +444,6 @@ export const MultipleRepositories: Story = {
       { id: 'e-r1-f1', source: 'repo-1', target: 'feat-1', ...dashedEdge },
       { id: 'e-r2-f2', source: 'repo-2', target: 'feat-2', ...dashedEdge },
     ],
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
   },
 };
 
@@ -505,12 +468,6 @@ const mixedRepoFeatureNodesRaw: CanvasNodeType[] = [
     position: { x: 0, y: 0 },
     data: { name: 'shep-ai/api' },
   },
-  {
-    id: 'add-repo',
-    type: 'addRepositoryNode',
-    position: { x: 0, y: 0 },
-    data: {},
-  },
   {
     id: 'feat-1',
     type: 'featureNode',
@@ -593,8 +550,6 @@ export const MultipleRepositoriesMixedConnections: Story = {
   args: {
     nodes: mixedLayoutedNodes,
     edges: mixedLayoutedEdges,
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
   },
 };
 
@@ -603,8 +558,5 @@ export const InteractiveWithRepository: Story = {
     nodes: repoFeatureNodes,
     edges: repoFeatureEdges,
     onAddFeature: () => undefined,
-    onNodeAction: () => undefined,
-    onNodeSettings: () => undefined,
-    onRepositoryAdd: () => undefined,
   },
 };

package/web/.next/standalone/src/presentation/web/components/features/features-canvas/features-canvas.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import { ReactFlow, Background, Controls } from '@xyflow/react';
 import type { Connection, Edge, NodeChange } from '@xyflow/react';
 import { Plus } from 'lucide-react';
@@ -10,11 +10,9 @@ import { FeatureNode } from '@/components/common/feature-node';
 import type { FeatureNodeType, FeatureNodeData } from '@/components/common/feature-node';
 import { RepositoryNode } from '@/components/common/repository-node';
 import type { RepositoryNodeType } from '@/components/common/repository-node';
-import { AddRepositoryNode } from '@/components/common/add-repository-node';
-import type { AddRepositoryNodeType } from '@/components/common/add-repository-node';
 import { DependencyEdge } from './dependency-edge';
 
-export type CanvasNodeType = FeatureNodeType | RepositoryNodeType | AddRepositoryNodeType;
+export type CanvasNodeType = FeatureNodeType | RepositoryNodeType;
 
 export interface FeaturesCanvasProps {
   nodes: CanvasNodeType[];
@@ -22,16 +20,9 @@ export interface FeaturesCanvasProps {
   selectedFeatureId?: string | null;
   onNodesChange?: (changes: NodeChange<CanvasNodeType>[]) => void;
   onAddFeature?: () => void;
-  onNodeAction?: (nodeId: string) => void;
-  onNodeSettings?: (nodeId: string) => void;
   onNodeClick?: (event: React.MouseEvent, node: CanvasNodeType) => void;
   onPaneClick?: (event: React.MouseEvent) => void;
-  onRepositoryAdd?: (repoNodeId: string) => void;
-  onRepositoryClick?: (nodeId: string) => void;
-  onRepositoryDelete?: (repositoryId: string) => void;
-  onFeatureDelete?: (featureId: string) => void;
   onConnect?: (connection: Connection) => void;
-  onRepositorySelect?: (path: string) => void;
   onCanvasDrag?: () => void;
   toolbar?: React.ReactNode;
   emptyState?: React.ReactNode;
@@ -43,16 +34,9 @@ export function FeaturesCanvas({
   selectedFeatureId,
   onNodesChange,
   onAddFeature,
-  onNodeAction,
-  onNodeSettings,
   onConnect,
   onNodeClick,
   onPaneClick,
-  onRepositoryAdd,
-  onRepositoryClick,
-  onRepositoryDelete,
-  onFeatureDelete,
-  onRepositorySelect,
   onCanvasDrag,
   toolbar,
   emptyState,
@@ -61,7 +45,6 @@ export function FeaturesCanvas({
     () => ({
       featureNode: FeatureNode,
       repositoryNode: RepositoryNode,
-      addRepositoryNode: AddRepositoryNode,
     }),
     []
   );
@@ -73,64 +56,19 @@ export function FeaturesCanvas({
     []
   );
 
-  // Prevent a feature from having more than one source repository
-  const isValidConnection = useCallback(
-    (connection: Edge | Connection) => {
-      const sourceNode = nodes.find((n) => n.id === connection.source);
-      if (sourceNode?.type !== 'repositoryNode') return true;
-
-      const targetAlreadyHasRepo = edges.some((e) => {
-        const edgeSourceNode = nodes.find((n) => n.id === e.source);
-        return edgeSourceNode?.type === 'repositoryNode' && e.target === connection.target;
-      });
-
-      return !targetAlreadyHasRepo;
-    },
-    [nodes, edges]
-  );
-
+  // Callbacks and showHandles are already injected into node.data by deriveGraph.
+  // Only selectedFeatureId highlighting needs to be applied here.
   const enrichedNodes = useMemo(
     () =>
-      nodes.map((node) => ({
-        ...node,
-        // React Flow passes `selected` as a prop to the node component
-        ...(node.type === 'featureNode' && {
-          selected:
-            selectedFeatureId != null &&
-            (node.data as FeatureNodeData).featureId === selectedFeatureId,
-        }),
-        data: {
-          ...node.data,
-          showHandles: edges.length > 0,
-          ...(node.type === 'featureNode' && (node.data as FeatureNodeData).state !== 'creating'
-            ? {
-                onAction: onNodeAction ? () => onNodeAction(node.id) : undefined,
-                onSettings: onNodeSettings ? () => onNodeSettings(node.id) : undefined,
-                onDelete: onFeatureDelete,
-              }
-            : {}),
-          ...(node.type === 'repositoryNode' && {
-            onAdd: onRepositoryAdd ? () => onRepositoryAdd(node.id) : undefined,
-            onClick: onRepositoryClick ? () => onRepositoryClick(node.id) : undefined,
-            onDelete: onRepositoryDelete,
-          }),
-          ...(node.type === 'addRepositoryNode' && {
-            onSelect: onRepositorySelect ? (path: string) => onRepositorySelect(path) : undefined,
-          }),
-        },
-      })) as CanvasNodeType[],
-    [
-      nodes,
-      edges.length,
-      selectedFeatureId,
-      onNodeAction,
-      onNodeSettings,
-      onFeatureDelete,
-      onRepositoryAdd,
-      onRepositoryClick,
-      onRepositoryDelete,
-      onRepositorySelect,
-    ]
+      selectedFeatureId == null
+        ? nodes
+        : (nodes.map((node) =>
+            node.type === 'featureNode' &&
+            (node.data as FeatureNodeData).featureId === selectedFeatureId
+              ? { ...node, selected: true }
+              : node
+          ) as CanvasNodeType[]),
+    [nodes, selectedFeatureId]
   );
 
   if (nodes.length === 0) {
@@ -168,7 +106,6 @@ export function FeaturesCanvas({
         edges={edges}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
-        isValidConnection={isValidConnection}
         onConnect={onConnect}
         onNodesChange={onNodesChange}
         onNodeClick={onNodeClick}

package/web/.next/standalone/src/presentation/web/components/layouts/app-shell/app-shell.tsx

@@ -4,7 +4,7 @@ import { useCallback, type ReactNode } from 'react';
 import { useRouter } from 'next/navigation';
 import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar';
 import { AppSidebar } from '@/components/layouts/app-sidebar';
-import { AddRepositoryButton } from '@/components/common/add-repository-node';
+import { AddRepositoryButton } from '@/components/common/add-repository-button';
 import { ThemeToggle } from '@/components/common/theme-toggle';
 import { SoundToggle } from '@/components/common/sound-toggle';
 import { AgentEventsProvider } from '@/hooks/agent-events-provider';

package/web/.next/standalone/src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx

@@ -37,17 +37,9 @@ export interface AppSidebarProps {
   features: FeatureItem[];
   onNewFeature?: () => void;
   onFeatureClick?: (featureId: string) => void;
-  onFeaturesFolderClick?: () => void;
-  onFeaturesMenuClick?: () => void;
 }
 
-export function AppSidebar({
-  features,
-  onNewFeature,
-  onFeatureClick,
-  onFeaturesFolderClick,
-  onFeaturesMenuClick,
-}: AppSidebarProps) {
+export function AppSidebar({ features, onNewFeature, onFeatureClick }: AppSidebarProps) {
   const pathname = usePathname();
   const { state } = useSidebar();
   const collapsed = state === 'collapsed';
@@ -109,11 +101,7 @@ export function AppSidebar({
               expandedVisible ? 'opacity-100' : 'opacity-0',
             ].join(' ')}
           >
-            <SidebarSectionHeader
-              label="Features"
-              onFolderClick={onFeaturesFolderClick}
-              onMenuClick={onFeaturesMenuClick}
-            />
+            <SidebarSectionHeader label="Features" />
             <ScrollArea>
               {grouped.map(({ key, label, items }) =>
                 items.length > 0 ? (

package/web/.next/standalone/src/presentation/web/components/ui/alert-dialog.tsx

@@ -28,10 +28,7 @@ function AlertDialogOverlay({
   return (
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-        className
-      )}
+      className={cn('fixed inset-0 z-50 bg-black/50', className)}
       onClick={(e) => {
         // Prevent overlay clicks from propagating to document-level handlers
         // (e.g. BaseDrawer outside-click) — only the dialog should dismiss.
@@ -57,7 +54,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
+          'bg-background group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
           className
         )}
         {...props}

package/web/.next/standalone/src/presentation/web/components/ui/dialog.tsx

@@ -20,10 +20,7 @@ const DialogOverlay = React.forwardRef<
 >(({ className, onClick, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
-    className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
-      className
-    )}
+    className={cn('fixed inset-0 z-50 bg-black/80', className)}
     onClick={(e) => {
       // Prevent overlay clicks from propagating to document-level handlers
       // (e.g. BaseDrawer outside-click) — only the dialog should dismiss.
@@ -44,7 +41,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg',
         className
       )}
       {...props}

package/web/.next/standalone/src/presentation/web/components/ui/scroll-area.tsx

@@ -18,7 +18,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:block!"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>

package/web/.next/standalone/src/presentation/web/hooks/agent-events-provider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, type ReactNode } from 'react';
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
 import {
   useAgentEvents,
   type UseAgentEventsOptions,
@@ -18,7 +18,12 @@ interface AgentEventsProviderProps extends UseAgentEventsOptions {
  * Wrap the app once; use `useAgentEventsContext()` to read.
  */
 export function AgentEventsProvider({ children, runId }: AgentEventsProviderProps) {
-  const value = useAgentEvents({ runId });
+  const { events, lastEvent, connectionStatus } = useAgentEvents({ runId });
+
+  const value = useMemo<UseAgentEventsResult>(
+    () => ({ events, lastEvent, connectionStatus }),
+    [events, lastEvent, connectionStatus]
+  );
 
   return <AgentEventsContext.Provider value={value}>{children}</AgentEventsContext.Provider>;
 }

package/web/.next/standalone/src/presentation/web/hooks/use-agent-events.ts

@@ -16,6 +16,8 @@ export interface UseAgentEventsResult {
 }
 
 const SW_PATH = '/agent-events-sw.js';
+const MAX_EVENTS = 500;
+const PRUNE_KEEP = 250;
 
 /**
  * Hook that receives real-time agent notification events via a Service Worker.
@@ -38,7 +40,12 @@ export function useAgentEvents(options?: UseAgentEventsOptions): UseAgentEventsR
 
     if (msg.type === 'notification') {
       const parsed = msg.data as NotificationEvent;
-      setEvents((prev) => [...prev, parsed]);
+      // eslint-disable-next-line no-console
+      console.log('[SSE] event received:', parsed.eventType, parsed);
+      setEvents((prev) => {
+        const next = [...prev, parsed];
+        return next.length > MAX_EVENTS ? next.slice(-PRUNE_KEEP) : next;
+      });
       setLastEvent(parsed);
     } else if (msg.type === 'status') {
       setConnectionStatus(msg.status as ConnectionStatus);
@@ -103,9 +110,13 @@ export function useAgentEvents(options?: UseAgentEventsOptions): UseAgentEventsR
         if (sw.state === 'activated') {
           subscribeToWorker(sw);
         } else {
-          sw.addEventListener('statechange', () => {
-            if (sw.state === 'activated') subscribeToWorker(sw);
-          });
+          const onStateChange = () => {
+            if (sw.state === 'activated') {
+              sw.removeEventListener('statechange', onStateChange);
+              subscribeToWorker(sw);
+            }
+          };
+          sw.addEventListener('statechange', onStateChange);
         }
       })
       .catch(() => {
@@ -193,7 +204,10 @@ function connectDirectEventSource(
 
     es.addEventListener('notification', ((event: MessageEvent) => {
       const parsed: NotificationEvent = JSON.parse(event.data);
-      setEvents((prev) => [...prev, parsed]);
+      setEvents((prev) => {
+        const next = [...prev, parsed];
+        return next.length > MAX_EVENTS ? next.slice(-PRUNE_KEEP) : next;
+      });
       setLastEvent(parsed);
     }) as EventListener);
   }

package/web/.next/standalone/src/presentation/web/hooks/use-deploy-action.ts

@@ -48,6 +48,12 @@ export function useDeployAction(input: DeployActionInput | null): DeployActionSt
   const errorTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const mountedRef = useRef(true);
+  const statusRef = useRef(status);
+
+  // Keep statusRef in sync with latest status
+  useEffect(() => {
+    statusRef.current = status;
+  }, [status]);
 
   // Track mounted state
   useEffect(() => {
@@ -96,15 +102,17 @@ export function useDeployAction(input: DeployActionInput | null): DeployActionSt
           setUrl(null);
           stopPolling();
         } else {
-          if (result.state !== status) {
-            log.info(`poll state changed: ${status} → ${result.state}, url=${result.url}`);
+          if (result.state !== statusRef.current) {
+            log.info(
+              `poll state changed: ${statusRef.current} → ${result.state}, url=${result.url}`
+            );
           }
           setStatus(result.state as DeploymentState);
           setUrl(result.url);
         }
       }, POLL_INTERVAL);
     },
-    [stopPolling, status]
+    [stopPolling]
   );
 
   const handleDeploy = useCallback(async () => {