@shepai/cli 1.72.8 → 1.72.9-pr219.08421ee

package/web/.next/standalone/src/presentation/web/CLAUDE.md

@@ -0,0 +1,147 @@
+# Web UI Development Notes
+
+## Running the UI
+
+There are two distinct ways to run the web UI. **Always test in BOTH modes.**
+
+### 1. Dev Mode (local development)
+
+```bash
+pnpm dev:web
+```
+
+- Uses `dev-server.ts` which initializes the DI container and starts Next.js in dev mode
+- Turbopack HMR enabled
+- Runs on port 3000 by default
+
+### 2. Production Mode (how users run it)
+
+```bash
+shep ui
+# or
+pnpm dev:cli ui
+```
+
+- The CLI bootstraps the DI container (`src/presentation/cli/index.ts`), then starts Next.js via `WebServerService`
+- Runs on port 4050 by default
+- This is how real users experience the UI
+- **IMPORTANT**: Always test real-time features in this mode, not just dev mode
+
+### Key Differences Between Modes
+
+| Aspect             | Dev Mode (`pnpm dev:web`)                               | Production Mode (`shep ui`)                             |
+| ------------------ | ------------------------------------------------------- | ------------------------------------------------------- |
+| Entry point        | `dev-server.ts`                                         | `cli/index.ts` -> `ui.command.ts` -> `WebServerService` |
+| Port               | 3000                                                    | 4050                                                    |
+| DI container       | Set on `globalThis.__shepContainer` in dev-server.ts:73 | Set in cli/index.ts:76                                  |
+| WebSocket upgrades | Forwarded (HMR works)                                   | NOT forwarded in `WebServerService`                     |
+| Next.js mode       | Always dev                                              | dev when run from source, prod when installed           |
+
+## SSE / Real-Time Update Architecture
+
+```
+DB polling (500ms) -> /api/agent-events (SSE route)
+    -> Service Worker (public/agent-events-sw.js, single connection)
+        -> postMessage to all browser tabs
+            -> useAgentEvents hook (hooks/use-agent-events.ts)
+                -> AgentEventsProvider context (hooks/agent-events-provider.tsx)
+                    -> useControlCenterState (optimistic node updates via setNodes)
+                        -> React state updates -> sidebar + React Flow canvas
+```
+
+### SSE Key Files
+
+| File                                                             | Purpose                                                |
+| ---------------------------------------------------------------- | ------------------------------------------------------ |
+| `app/api/agent-events/route.ts`                                  | SSE endpoint, polls DB every 500ms, emits delta events |
+| `app/api/agent-events/health/route.ts`                           | Health check: `/api/agent-events/health`               |
+| `public/agent-events-sw.js`                                      | Service Worker: multiplexes single SSE to all tabs     |
+| `hooks/use-agent-events.ts`                                      | Client hook: registers with SW, receives events        |
+| `hooks/agent-events-provider.tsx`                                | React context wrapping `useAgentEvents`                |
+| `components/features/control-center/use-control-center-state.ts` | Processes SSE events into React Flow node updates      |
+| `components/common/feature-node/derive-feature-state.ts`         | Maps event types/phases to UI state/lifecycle          |
+
+### SSE Event Flow Details
+
+1. **SSE route** seeds a per-connection cache on first poll (no events emitted for initial state)
+2. Subsequent polls compare DB state against cache, emit only deltas
+3. **Service Worker** connects to `/api/agent-events` via EventSource on first subscriber
+4. SW broadcasts `{ type: 'notification', data }` to all tabs via `clients.matchAll()`
+5. **useControlCenterState** effect processes new events, calls `setNodes()` to update node state/lifecycle
+6. **Polling fallback** (5s interval) fetches via `fetchGraphData()` server action for active features
+
+### SSE Lifecycle Mappings
+
+The SSE route maps `SdlcLifecycle` enum -> agent graph node names -> client `FeatureLifecyclePhase`:
+
+```
+SdlcLifecycle.Started     -> 'requirements'  -> 'requirements'
+SdlcLifecycle.Analyze     -> 'analyze'       -> 'requirements'
+SdlcLifecycle.Requirements-> 'requirements'  -> 'requirements'
+SdlcLifecycle.Research    -> 'research'      -> 'research'
+SdlcLifecycle.Planning    -> 'plan'          -> 'implementation'
+SdlcLifecycle.Implementation -> 'implement'  -> 'implementation'
+SdlcLifecycle.Review      -> 'merge'         -> 'review'
+SdlcLifecycle.Maintain    -> 'maintain'      -> 'maintain'
+SdlcLifecycle.Blocked     -> 'blocked'       -> 'requirements'
+```
+
+## React Flow Rendering (CRITICAL)
+
+React Flow v12 (`@xyflow/react` ^12.10.0) has specific behaviors that affect real-time updates:
+
+- **Controlled mode**: `<ReactFlow nodes={nodes}>` passes nodes as props
+- **Internal Zustand store**: React Flow syncs props to an internal `nodeLookup` Map via `StoreUpdater`
+- **Memoized NodeWrapper**: Each node is wrapped in `memo(NodeWrapper)` which subscribes to store via `useStore(selector, shallow)`
+- **NodeWrapper gets node from store**, NOT from props directly. It does `s.nodeLookup.get(id)` with `shallow` comparison
+- **Single ReactFlowProvider**: There must be exactly ONE `ReactFlowProvider` ancestor. Multiple nested providers create separate stores, causing the outer one's `StoreUpdater` to sync nodes to a store that the inner components don't read from
+
+### Circular Update Loop (FIXED — do not reintroduce)
+
+In controlled mode, `enrichedNodes` (useMemo in FeaturesCanvas) creates new node objects every render
+(adding callbacks to `data`). StoreUpdater sees different references and emits `replace` changes via
+`onNodesChange`. If `onNodesChange` applies these 'replace' changes back to state via `applyNodeChanges`,
+it overwrites SSE-driven state updates with stale data from the previous render, AND triggers another
+`enrichedNodes` recalculation → infinite loop (110+ renders on page load).
+
+**Fix**: `onNodesChange` in `use-control-center-state.ts` filters out `replace` changes. Only `dimensions`,
+`position`, `select`, etc. are applied. StoreUpdater still syncs props to its internal store regardless —
+our state remains the source of truth.
+
+**NEVER** remove the `c.type !== 'replace'` filter from `onNodesChange`.
+
+## Testing Real-Time Updates
+
+1. Start the UI in the mode you want to test
+2. Check SSE health: `curl http://localhost:<port>/api/agent-events/health`
+3. Check SW status in browser: `navigator.serviceWorker.controller?.state` should be "activated"
+4. Trigger state changes: `pnpm dev:cli feat approve <id>` or start a new feature run
+5. Watch both **sidebar** and **canvas nodes** - they should both update
+6. Check browser console for errors
+7. Check server logs for `[SSE] emit:` messages confirming events are sent
+
+## Optimistic Feature Creation Flow
+
+When a user creates a feature, the UI uses optimistic updates:
+
+1. **Create drawer** dispatches `shep:feature-created` → canvas adds a temp node (`feature-<ts>` ID, state `creating`)
+2. Drawer closes immediately via `router.push('/')`
+3. Server action `createFeature` runs in background → agent starts
+4. SSE events arrive with real feature ID (`feat-<uuid>`) — **these won't match the temp node**
+5. **Polling fallback** (5s) detects new server node → replaces temp `creating` node in-place
+
+### Key constraints
+
+- **Temp node IDs don't match SSE events**: Optimistic nodes use `feature-<ts>` IDs, server uses `feat-<uuid>`.
+  SSE-driven `setNodes()` can't find the temp node. The polling fallback handles the swap.
+- **Create drawer `isSubmitting`**: Must NOT reset until pathname leaves `/create`. Resetting in `.finally()`
+  causes the drawer to flash open because `router.push('/')` is async and pathname hasn't changed yet.
+- **Parallel routes preserve state**: The `CreateDrawerClient` component is NOT unmounted on navigation.
+  `isOpen` is derived from pathname, not mount/unmount lifecycle.
+
+## Common Pitfalls
+
+- **No events when nothing changes**: SSE only emits deltas. If no feature state changes, no events are sent. This is correct behavior.
+- **Polling fallback dependency**: The 5s polling `useEffect` depends on a derived `hasActiveFeature` boolean (not `nodes` directly). Using `[nodes]` as a dependency would reset the interval on every node change, potentially preventing it from ever firing.
+- **Storybook mocks**: New server actions need mocks in `.storybook/mocks/app/actions/` or Storybook build breaks.
+- **`output: 'standalone'`** in next.config.ts: Production builds use standalone mode. Route handlers are bundled differently.

package/web/.next/standalone/src/presentation/web/app/actions/get-graph-data.ts

@@ -0,0 +1,12 @@
+'use server';
+
+import { getGraphData } from '@/app/(dashboard)/get-graph-data';
+
+/**
+ * Server action that fetches fresh graph nodes and edges.
+ * Used as a lightweight polling fallback for active features,
+ * avoiding full router.refresh() page re-renders.
+ */
+export async function fetchGraphData() {
+  return getGraphData();
+}

package/web/.next/standalone/src/presentation/web/app/api/agent-events/route.ts

@@ -44,13 +44,16 @@ interface CachedFeatureState {
  * Maps SdlcLifecycle values to agent graph node names so the client
  * can derive the correct FeatureLifecyclePhase via mapPhaseNameToLifecycle().
  */
-const LIFECYCLE_TO_NODE: Partial<Record<SdlcLifecycle, string>> = {
+const LIFECYCLE_TO_NODE: Record<SdlcLifecycle, string> = {
+  [SdlcLifecycle.Started]: 'requirements',
   [SdlcLifecycle.Analyze]: 'analyze',
   [SdlcLifecycle.Requirements]: 'requirements',
   [SdlcLifecycle.Research]: 'research',
   [SdlcLifecycle.Planning]: 'plan',
   [SdlcLifecycle.Implementation]: 'implement',
   [SdlcLifecycle.Review]: 'merge',
+  [SdlcLifecycle.Maintain]: 'maintain',
+  [SdlcLifecycle.Blocked]: 'blocked',
 };
 
 const STATUS_TO_EVENT: Partial<
@@ -149,7 +152,8 @@ export function GET(request: Request): Response {
               const prev = cache.get(feature.id);
 
               if (!prev) {
-                // First time seeing this feature — seed cache, don't emit
+                // First time seeing this feature — seed cache and emit so
+                // clients discover features created outside the UI (e.g. CLI).
                 const completedPhases = new Set<string>();
                 try {
                   const timings = await phaseTimingRepo.findByRunId(run.id);
@@ -166,6 +170,23 @@ export function GET(request: Request): Response {
                   completedPhases,
                   featureName: feature.name,
                 });
+
+                // Emit initial state so the client learns about new features
+                const mapping = STATUS_TO_EVENT[run.status];
+                if (mapping) {
+                  const phase = resultToPhase(run.result);
+                  emitEvent({
+                    eventType: mapping.eventType,
+                    agentRunId: run.id,
+                    featureId: feature.id,
+                    featureName: feature.name,
+                    ...(phase && { phaseName: phase }),
+                    message: `Agent status: ${run.status}`,
+                    severity: mapping.severity,
+                    timestamp: new Date().toISOString(),
+                  });
+                }
+
                 continue;
               }
 

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

@@ -34,15 +34,17 @@ export function CreateDrawerClient({
   // 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 = !isSubmitting && pathname.startsWith('/create');
+  const isOnCreateRoute = pathname.startsWith('/create');
+  const isOpen = !isSubmitting && isOnCreateRoute;
 
-  // 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.
+  // Reset isSubmitting once the route has actually changed away from /create,
+  // so the drawer can reopen on future visits. Without this, isSubmitting
+  // would stay true forever since parallel routes preserve component state.
   useEffect(() => {
-    if (!isOpen && pathname.startsWith('/create')) {
-      router.replace('/');
+    if (!isOnCreateRoute && isSubmitting) {
+      setIsSubmitting(false);
     }
-  }, [isOpen, pathname, router]);
+  }, [isOnCreateRoute, isSubmitting]);
 
   const onClose = useCallback(() => {
     router.push('/');
@@ -81,8 +83,7 @@ export function CreateDrawerClient({
         .catch(() => {
           toast.error('Failed to create feature');
           window.dispatchEvent(new CustomEvent('shep:feature-create-failed'));
-        })
-        .finally(() => {
+          // Reset on error so the user can retry without navigating away
           setIsSubmitting(false);
         });
     },

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

@@ -120,6 +120,8 @@ const phaseNameToLifecycle: Record<string, FeatureLifecyclePhase> = {
   plan: 'implementation',
   implement: 'implementation',
   merge: 'review',
+  maintain: 'maintain',
+  blocked: 'requirements',
 };
 
 export function mapPhaseNameToLifecycle(

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

@@ -39,7 +39,7 @@ export function RepositoryNode({ data }: { data: RepositoryNodeData; [key: strin
   const isDeploymentActive = deployAction.status === 'Booting' || deployAction.status === 'Ready';
 
   return (
-    <div className="group relative">
+    <div className={cn('group relative', data.onDelete && data.id && 'pl-10')}>
       {data.showHandles ? (
         <Handle
           type="target"
@@ -52,7 +52,7 @@ export function RepositoryNode({ data }: { data: RepositoryNodeData; [key: strin
       {/* Delete button — visible on hover, positioned to the left */}
       {data.onDelete && data.id ? (
         <>
-          <div className="absolute top-1/2 -left-10 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100">
+          <div className="absolute top-1/2 left-0 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100">
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>

package/web/.next/standalone/src/presentation/web/components/common/sidebar-section-header/sidebar-section-header.stories.tsx

@@ -28,16 +28,3 @@ export const Default: Story = {
     label: 'Features',
   },
 };
-
-function noop() {
-  // Intentional no-op for Storybook interaction demos
-  return;
-}
-
-export const WithActions: Story = {
-  args: {
-    label: 'Features',
-    onFolderClick: noop,
-    onMenuClick: noop,
-  },
-};

package/web/.next/standalone/src/presentation/web/components/common/sidebar-section-header/sidebar-section-header.tsx

@@ -1,62 +1,18 @@
 'use client';
 
-import { Folder, GripHorizontal } from 'lucide-react';
 import { SidebarGroup } from '@/components/ui/sidebar';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { useSidebar } from '@/components/ui/sidebar';
 import { cn } from '@/lib/utils';
 
 export interface SidebarSectionHeaderProps {
   label: string;
-  onFolderClick?: () => void;
-  onMenuClick?: () => void;
   className?: string;
 }
 
-export function SidebarSectionHeader({
-  label,
-  onFolderClick,
-  onMenuClick,
-  className,
-}: SidebarSectionHeaderProps) {
-  const { state, isMobile } = useSidebar();
-
+export function SidebarSectionHeader({ label, className }: SidebarSectionHeaderProps) {
   return (
     <SidebarGroup data-testid="sidebar-section-header" className={cn('px-2 py-1', className)}>
       <div className="text-sidebar-foreground flex h-7 w-full shrink-0 items-center px-2 text-sm font-medium">
         <span className="min-w-0 flex-1 truncate">{label}</span>
-        <span className="text-sidebar-foreground/70 flex shrink-0 items-center gap-0.5">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                onClick={onFolderClick}
-                className="ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex size-7 items-center justify-center rounded-md p-0 outline-hidden transition-colors focus-visible:ring-2 [&>svg]:size-4"
-                aria-label="Open features folder"
-              >
-                <Folder className="size-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right" align="center" hidden={state !== 'collapsed' || isMobile}>
-              Open features folder
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                onClick={onMenuClick}
-                className="ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex size-7 items-center justify-center rounded-md p-0 outline-hidden transition-colors focus-visible:ring-2 [&>svg]:size-4"
-                aria-label="Features options"
-              >
-                <GripHorizontal className="size-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right" align="center" hidden={state !== 'collapsed' || isMobile}>
-              Features options
-            </TooltipContent>
-          </Tooltip>
-        </span>
       </div>
     </SidebarGroup>
   );

package/web/.next/standalone/src/presentation/web/components/features/control-center/use-control-center-state.ts

@@ -15,6 +15,7 @@ import {
 import { deleteFeature } from '@/app/actions/delete-feature';
 import { addRepository } from '@/app/actions/add-repository';
 import { deleteRepository } from '@/app/actions/delete-repository';
+import { fetchGraphData } from '@/app/actions/get-graph-data';
 import { useAgentEventsContext } from '@/hooks/agent-events-provider';
 import { useSoundAction } from '@/hooks/use-sound-action';
 import {
@@ -190,13 +191,42 @@ export function useControlCenterState(
   // drop events when multiple SSE messages arrive in the same tick.
   const processedEventCountRef = useRef(0);
 
+  // Track known feature IDs so we can detect when SSE reports features not yet on the canvas.
+  // Initialised from initialNodes to avoid a race between first render and SSE arrival.
+  const knownFeatureIdsRef = useRef<Set<string>>(
+    new Set(
+      initialNodes
+        .filter((n) => n.type === 'featureNode')
+        .map((n) => (n.data as FeatureNodeData).featureId)
+    )
+  );
+  // Keep ref in sync as nodes change (new nodes added, temp nodes replaced, etc.)
+  useEffect(() => {
+    knownFeatureIdsRef.current = new Set(
+      nodes
+        .filter((n) => n.type === 'featureNode')
+        .map((n) => (n.data as FeatureNodeData).featureId)
+    );
+  }, [nodes]);
+
+  // Guard against concurrent fetchGraphData calls triggered by unknown-feature detection
+  const fetchingGraphRef = useRef(false);
+
   useEffect(() => {
     if (events.length <= processedEventCountRef.current) return;
 
     const newEvents = events.slice(processedEventCountRef.current);
     processedEventCountRef.current = events.length;
 
+    let hasUnknownFeature = false;
+
     for (const event of newEvents) {
+      // If the feature isn't on the canvas yet, flag for a full graph refresh
+      if (!knownFeatureIdsRef.current.has(event.featureId)) {
+        hasUnknownFeature = true;
+        continue;
+      }
+
       const newState = mapEventTypeToState(event.eventType);
       const newLifecycle = mapPhaseNameToLifecycle(event.phaseName);
 
@@ -206,6 +236,7 @@ export function useControlCenterState(
           if (node.type !== 'featureNode') return node;
           const data = node.data as FeatureNodeData;
           if (data.featureId !== event.featureId) return node;
+
           return {
             ...node,
             data: {
@@ -217,10 +248,141 @@ export function useControlCenterState(
         })
       );
     }
-  }, [events]);
+
+    // SSE reported features not on the canvas — fetch full graph data so new
+    // repository nodes, feature nodes, and edges all appear together.
+    if (hasUnknownFeature && !fetchingGraphRef.current) {
+      fetchingGraphRef.current = true;
+      fetchGraphData()
+        .then(({ nodes: serverNodes, edges: serverEdges }) => {
+          setNodes((currentNodes) => {
+            // Preserve positions of nodes already on the canvas
+            const currentById = new Map(currentNodes.map((n) => [n.id, n]));
+            const merged = serverNodes.map((serverNode) => {
+              const existing = currentById.get(serverNode.id);
+              return existing ? { ...serverNode, position: existing.position } : serverNode;
+            });
+
+            const layoutResult = layoutWithDagre(merged, serverEdges, CANVAS_LAYOUT_DEFAULTS);
+            setEdges(layoutResult.edges);
+            return layoutResult.nodes;
+          });
+        })
+        .catch(() => {
+          // Silently ignore — next SSE event or poll will retry
+        })
+        .finally(() => {
+          fetchingGraphRef.current = false;
+        });
+    }
+  }, [events, setEdges]);
+
+  // Lightweight server-action polling fallback: fetches fresh graph data every 5s
+  // when any feature is in an active state. This avoids full router.refresh() while
+  // ensuring the UI stays in sync even if SSE events are missed.
+  //
+  // We derive a stable boolean so the interval isn't torn down on every node change.
+  const hasActiveFeature = nodes.some((n) => {
+    if (n.type !== 'featureNode') return false;
+    const data = n.data as FeatureNodeData;
+    return (
+      data.state === 'running' || data.state === 'action-required' || data.state === 'creating'
+    );
+  });
+
+  useEffect(() => {
+    if (!hasActiveFeature) return;
+
+    const interval = setInterval(async () => {
+      try {
+        const { nodes: serverNodes } = await fetchGraphData();
+        setNodes((currentNodes) => {
+          const serverById = new Map(serverNodes.map((n) => [n.id, n]));
+          let changed = false;
+
+          const merged = currentNodes.map((node) => {
+            const serverNode = serverById.get(node.id);
+            if (!serverNode || node.type !== 'featureNode') return node;
+            const currentData = node.data as FeatureNodeData;
+            const serverData = serverNode.data as FeatureNodeData;
+
+            // Only update if server data has different state or lifecycle
+            if (
+              currentData.state === serverData.state &&
+              currentData.lifecycle === serverData.lifecycle
+            ) {
+              return node;
+            }
+
+            changed = true;
+            return {
+              ...node,
+              data: {
+                ...currentData,
+                state: serverData.state,
+                lifecycle: serverData.lifecycle,
+                progress: serverData.progress,
+                ...(serverData.errorMessage && { errorMessage: serverData.errorMessage }),
+                ...(serverData.runtime && { runtime: serverData.runtime }),
+                ...(serverData.agentType && { agentType: serverData.agentType }),
+                ...(serverData.pr && { pr: serverData.pr }),
+                ...(serverData.blockedBy && { blockedBy: serverData.blockedBy }),
+              },
+            };
+          });
+
+          // Find new server nodes not yet on the client
+          const clientIds = new Set(currentNodes.map((n) => n.id));
+          const newServerNodes = serverNodes.filter((n) => !clientIds.has(n.id));
+
+          // Replace optimistic "creating" temp nodes with their real server
+          // counterparts. Temp nodes have IDs like "feature-<ts>" while real
+          // nodes use "feat-<uuid>". Match by repositoryPath + name.
+          if (newServerNodes.length > 0) {
+            const creatingIndices: number[] = [];
+            merged.forEach((n, i) => {
+              if (n.type === 'featureNode' && (n.data as FeatureNodeData).state === 'creating') {
+                creatingIndices.push(i);
+              }
+            });
+
+            for (const serverNode of newServerNodes) {
+              if (serverNode.type !== 'featureNode' || creatingIndices.length === 0) continue;
+              const idx = creatingIndices.shift()!;
+              // Replace the temp node in-place, keeping its position
+              merged[idx] = { ...serverNode, position: merged[idx].position };
+              changed = true;
+            }
+
+            // Any remaining new server nodes that didn't replace a temp node
+            const replacedIds = new Set(merged.map((n) => n.id));
+            const trueNewNodes = newServerNodes.filter((n) => !replacedIds.has(n.id));
+            if (trueNewNodes.length > 0) {
+              changed = true;
+              return [...merged, ...trueNewNodes];
+            }
+          }
+
+          return changed ? merged : currentNodes;
+        });
+      } catch {
+        // Silently ignore polling errors — SSE is the primary mechanism
+      }
+    }, 5_000);
+
+    return () => clearInterval(interval);
+  }, [hasActiveFeature]);
 
   const onNodesChange = useCallback((changes: NodeChange<CanvasNodeType>[]) => {
-    setNodes((ns) => applyNodeChanges(changes, ns));
+    // Filter out 'replace' changes — in controlled mode these come from
+    // React Flow's StoreUpdater syncing the nodes prop back into state.
+    // Applying them creates a circular update loop (nodes → enrichedNodes →
+    // StoreUpdater → onNodesChange → setNodes → nodes → …) that both causes
+    // excessive re-renders and overwrites SSE-driven state changes with stale data.
+    const applicable = changes.filter((c) => c.type !== 'replace');
+    if (applicable.length > 0) {
+      setNodes((ns) => applyNodeChanges(applicable, ns));
+    }
   }, []);
 
   const handleConnect = useCallback(

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useMemo } from 'react';
-import { ReactFlow, Background, Controls, ReactFlowProvider } from '@xyflow/react';
+import { ReactFlow, Background, Controls } from '@xyflow/react';
 import type { Connection, Edge, NodeChange } from '@xyflow/react';
 import { Plus } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -163,28 +163,26 @@ export function FeaturesCanvas({
       data-no-drawer-close
       className="pointer-events-auto h-full w-full"
     >
-      <ReactFlowProvider>
-        <ReactFlow
-          nodes={enrichedNodes}
-          edges={edges}
-          nodeTypes={nodeTypes}
-          edgeTypes={edgeTypes}
-          isValidConnection={isValidConnection}
-          onConnect={onConnect}
-          onNodesChange={onNodesChange}
-          onNodeClick={onNodeClick}
-          onPaneClick={onPaneClick}
-          onMoveStart={onCanvasDrag}
-          defaultViewport={{ x: 30, y: 30, zoom: 0.85 }}
-          nodesDraggable={false}
-          nodesConnectable={false}
-          elementsSelectable={false}
-        >
-          <Background />
-          <Controls />
-          {toolbar}
-        </ReactFlow>
-      </ReactFlowProvider>
+      <ReactFlow
+        nodes={enrichedNodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        isValidConnection={isValidConnection}
+        onConnect={onConnect}
+        onNodesChange={onNodesChange}
+        onNodeClick={onNodeClick}
+        onPaneClick={onPaneClick}
+        onMoveStart={onCanvasDrag}
+        defaultViewport={{ x: 30, y: 30, zoom: 0.85 }}
+        nodesDraggable={false}
+        nodesConnectable={false}
+        elementsSelectable={false}
+      >
+        <Background />
+        <Controls />
+        {toolbar}
+      </ReactFlow>
     </div>
   );
 }

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/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>