@shepai/cli 1.72.8 → 1.72.9-pr220.99e5e13

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

@@ -0,0 +1,191 @@
+# 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           |
+
+## Graph State Architecture (Domain-Model-Driven)
+
+All canvas node/edge state is managed through **domain Maps as the single source of truth**.
+
+```
+Server (layout.tsx)                    Client (useGraphState)
+┌──────────────────┐                  ┌─────────────────────────────┐
+│ initialNodes[]   │──parseMaps──→    │ Domain Maps (source of truth)│
+│ initialEdges[]   │                  │  featureMap: Map<id, Entry>  │
+└──────────────────┘                  │  repoMap: Map<id, Entry>     │
+                                      │  pendingMap: Map<id, Entry>  │
+SSE Events                            │                              │
+┌──────────────────┐                  └──────────┬──────────────────┘
+│ NotificationEvent│──updateFeature──→           │
+└──────────────────┘                             │ deriveGraph() + layoutWithDagre()
+                                                 ▼
+Optimistic UI                         ┌─────────────────────────────┐
+┌──────────────────┐                  │ Derived (read-only)          │
+│ shep:feature-    │──addPending───→  │  nodes: CanvasNodeType[]     │
+│ created event    │                  │  edges: Edge[]               │
+└──────────────────┘                  │  (callbacks + layout applied)│
+                                      └─────────────────────────────┘
+```
+
+### Key Files
+
+| File                                                             | Purpose                                                              |
+| ---------------------------------------------------------------- | -------------------------------------------------------------------- |
+| `lib/derive-graph.ts`                                            | Pure function: domain Maps → nodes + edges (with callbacks injected) |
+| `hooks/use-graph-state.ts`                                       | Hook: domain Maps state + reconciliation + derivation + layout       |
+| `components/features/control-center/use-control-center-state.ts` | Wraps useGraphState, handles server actions + SSE events             |
+| `components/features/control-center/control-center-inner.tsx`    | Wires callbacks via `setCallbacks()`, passes nodes/edges to canvas   |
+| `components/features/features-canvas/features-canvas.tsx`        | Renders React Flow; only adds `selectedFeatureId` highlighting       |
+
+### Design Principles
+
+1. **Domain Maps are the source of truth** — all mutations go through Maps (featureMap, repoMap, pendingMap)
+2. **Edges are derived, never stored** — repo→feature edges from `repositoryPath` matching, dep edges from `parentNodeId`
+3. **Callbacks via ref** — `callbacksRef` + stable `useMemo([])` wrapper prevents circular re-renders
+4. **Layout in derivation** — `layoutWithDagre` runs inside `useMemo` after `deriveGraph()`
+5. **`onNodesChange` is a no-op** — since `nodesDraggable=false`, we ignore all React Flow changes
+
+### Mutation Paths
+
+| Operation         | Flow                                                                                                    |
+| ----------------- | ------------------------------------------------------------------------------------------------------- |
+| SSE event         | `useAgentEventsContext` → `updateFeature(nodeId, {state, lifecycle})`                                   |
+| Server prop sync  | `useEffect` watches `initialNodeKey` → `reconcile(newNodes, newEdges)`                                  |
+| Optimistic create | `shep:feature-created` event → `createFeatureNode()` → `addPendingFeature()`                            |
+| Delete feature    | `handleDeleteFeature()` → `removeFeature()` → server action → `restoreFeature()` on error               |
+| Add repository    | `handleAddRepository()` → `addRepository(tempId)` → server action → `replaceRepository(tempId, realId)` |
+
+### Reconciliation
+
+`reconcile(newNodes, newEdges)` merges server data into domain Maps:
+
+- Replaces featureMap and repoMap with fresh server data
+- Preserves pending (creating) features in featureMap unless matched by `name + repositoryPath`
+- Cleans pendingMap entries that now have a real counterpart in server data
+
+## 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 (SSE effect calls updateFeature)
+                        -> domain Maps update -> derivation -> 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` | SSE effect calls `updateFeature()` on domain Maps      |
+| `components/common/feature-node/derive-feature-state.ts`         | Maps event types/phases to UI state/lifecycle          |
+
+### 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
+
+### Circular Update Loop Prevention
+
+With the domain-model-driven architecture, the circular update loop is prevented by design:
+
+1. **Callbacks are stable** — injected via `callbacksRef` + stable `useMemo([])` wrapper, so node objects don't change when callbacks change
+2. **`onNodesChange` is a no-op** — domain Maps are the source of truth, React Flow's internal changes are ignored
+3. **`enrichedNodes` only adds `selectedFeatureId`** — no callback injection in FeaturesCanvas
+
+**NEVER** make `onNodesChange` apply `replace` changes back to state.
+
+## 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` → `createFeatureNode()` → `addPendingFeature()` adds temp node to pendingMap
+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 update featureMap via `updateFeature()`
+5. **Server prop sync** (rerender with new initialNodes) → `reconcile()` detects matching real feature → removes pending from both featureMap and pendingMap
+
+### Key constraints
+
+- **Temp node IDs don't match SSE events**: Optimistic nodes use `feature-<ts>` IDs, server uses `feat-<uuid>`. SSE events call `updateFeature('feat-<uuid>', ...)` which doesn't match the temp ID. The reconcile on next server prop update 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.
+- **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.
+- **Map insertion order affects dagre layout**: After remove+restore of a feature, the Map insertion order may change, causing slightly different dagre positions. This is expected behavior — don't write tests asserting exact position preservation across remove/restore cycles.

package/web/.next/standalone/src/presentation/web/app/actions/create-feature.ts

@@ -72,15 +72,40 @@ export async function createFeature(
 
   try {
     const createFeatureUseCase = resolve<CreateFeatureUseCase>('CreateFeatureUseCase');
-    const result = await createFeatureUseCase.execute({
+
+    // Phase 1 (fast): create DB record with real UUID — returns immediately
+    const { feature, shouldSpawn } = await createFeatureUseCase.createRecord({
       userInput,
       repositoryPath,
       approvalGates: gates,
       push: push ?? false,
       openPr: openPr ?? false,
       ...(parentId ? { parentId } : {}),
+      name,
+      description,
     });
-    return { feature: result.feature };
+
+    // Phase 2 (background): metadata generation, worktree, spec, agent spawn
+    // Fire-and-forget — the UI gets the real feature ID immediately
+    createFeatureUseCase
+      .initializeAndSpawn(
+        feature,
+        {
+          userInput,
+          repositoryPath,
+          approvalGates: gates,
+          push: push ?? false,
+          openPr: openPr ?? false,
+          ...(parentId ? { parentId } : {}),
+        },
+        shouldSpawn
+      )
+      .catch((err: unknown) => {
+        // eslint-disable-next-line no-console
+        console.error('[createFeature] initializeAndSpawn failed:', err);
+      });
+
+    return { feature };
   } catch (error: unknown) {
     const message = error instanceof Error ? error.message : 'Failed to create feature';
     return { error: message };

package/web/.next/standalone/src/presentation/web/app/actions/get-feature-metadata.ts

@@ -0,0 +1,18 @@
+'use server';
+
+import { resolve } from '@/lib/server-container';
+import type { IFeatureRepository } from '@shepai/core/application/ports/output/repositories/feature-repository.interface';
+
+/**
+ * Lightweight server action to fetch a single feature's name and description.
+ * Used by the SSE effect to update node metadata after AI metadata generation
+ * without a full graph reconcile (which can overwrite SSE-driven state).
+ */
+export async function getFeatureMetadata(
+  featureId: string
+): Promise<{ name: string; description: string } | null> {
+  const featureRepo = resolve<IFeatureRepository>('IFeatureRepository');
+  const feature = await featureRepo.findById(featureId);
+  if (!feature) return null;
+  return { name: feature.name, description: feature.description };
+}

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<
@@ -188,6 +191,23 @@ export function GET(request: Request): Response {
                 }
               }
 
+              // Check for feature name change (AI metadata generation updates name)
+              if (prev.featureName !== feature.name) {
+                prev.featureName = feature.name;
+                const nodeName =
+                  LIFECYCLE_TO_NODE[feature.lifecycle as SdlcLifecycle] ?? 'requirements';
+                emitEvent({
+                  eventType: NotificationEventType.PhaseCompleted,
+                  agentRunId: run.id,
+                  featureId: feature.id,
+                  featureName: feature.name,
+                  phaseName: nodeName,
+                  message: `Feature metadata updated`,
+                  severity: NotificationSeverity.Info,
+                  timestamp: new Date().toISOString(),
+                });
+              }
+
               // Check for lifecycle change (agent stays "running" but moves through phases)
               if (prev.lifecycle !== feature.lifecycle) {
                 prev.lifecycle = feature.lifecycle;

package/web/.next/standalone/src/presentation/web/components/common/add-repository-button/index.ts

@@ -0,0 +1 @@
+export { AddRepositoryButton } from './add-repository-button';

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

@@ -8,7 +8,6 @@ import { FeatureCreateDrawer } from '@/components/common/feature-create-drawer';
 import type { FeatureCreatePayload } from '@/components/common/feature-create-drawer';
 import type { ParentFeatureOption } from '@/components/common/feature-create-drawer/feature-create-drawer';
 import type { WorkflowDefaults } from '@/app/actions/get-workflow-defaults';
-import { useSoundAction } from '@/hooks/use-sound-action';
 
 export interface CreateDrawerClientProps {
   repositoryPath: string;
@@ -24,7 +23,6 @@ export function CreateDrawerClient({
   workflowDefaults,
 }: CreateDrawerClientProps) {
   const router = useRouter();
-  const createSound = useSoundAction('create');
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Derive open state from the URL. Next.js parallel routes preserve slot
@@ -34,15 +32,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('/');
@@ -52,41 +52,38 @@ export function CreateDrawerClient({
     (data: FeatureCreatePayload) => {
       setIsSubmitting(true);
 
-      // Dispatch event for optimistic canvas update before navigating
-      window.dispatchEvent(
-        new CustomEvent('shep:feature-created', {
-          detail: {
-            name: data.name,
-            description: data.description,
-            repositoryPath: data.repositoryPath,
-            parentId: data.parentId,
-          },
-        })
-      );
-
       // Close the drawer immediately for responsive UI
       router.push('/');
 
-      // Fire server action in the background
+      // Server action Phase 1 returns fast with real feature ID (DB record created)
+      // Phase 2 (metadata, worktree, agent) runs in background on server
       createFeature(data)
         .then((result) => {
           if (result.error) {
             toast.error(result.error);
-            // Dispatch rollback event
             window.dispatchEvent(new CustomEvent('shep:feature-create-failed'));
             return;
           }
-          createSound.play();
+          // Dispatch event with real feature ID so control center adds it to featureMap
+          window.dispatchEvent(
+            new CustomEvent('shep:feature-created', {
+              detail: {
+                featureId: result.feature!.id,
+                name: result.feature!.name,
+                description: result.feature!.description,
+                repositoryPath: result.feature!.repositoryPath,
+                parentId: data.parentId,
+              },
+            })
+          );
         })
         .catch(() => {
           toast.error('Failed to create feature');
           window.dispatchEvent(new CustomEvent('shep:feature-create-failed'));
-        })
-        .finally(() => {
           setIsSubmitting(false);
         });
     },
-    [router, createSound]
+    [router]
   );
 
   return (

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

@@ -8,7 +8,7 @@ import type {
   PrdApprovalPayload,
   QuestionSelectionChange,
 } from '@shepai/core/domain/generated/output';
-import { PrStatus } from '@shepai/core/domain/generated/output';
+import { PrStatus, NotificationEventType } from '@shepai/core/domain/generated/output';
 import { approveFeature } from '@/app/actions/approve-feature';
 import { rejectFeature } from '@/app/actions/reject-feature';
 import { getFeatureArtifact } from '@/app/actions/get-feature-artifact';
@@ -94,9 +94,22 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
     const newEvents = events.slice(processedCountRef.current);
     processedCountRef.current = events.length;
 
+    // PhaseCompleted must NOT set state when WaitingApproval is in the same poll batch.
+    // But when it arrives without WaitingApproval (e.g. post-approval), allow it as
+    // a fallback for missed AgentStarted events.
+    const waitingApprovalInBatch = newEvents.some(
+      (e) =>
+        e.featureId === featureNode.featureId &&
+        e.eventType === NotificationEventType.WaitingApproval
+    );
+
     for (const event of newEvents) {
       if (event.featureId !== featureNode.featureId) continue;
-      const newState = mapEventTypeToState(event.eventType);
+
+      const newState =
+        event.eventType === NotificationEventType.PhaseCompleted && waitingApprovalInBatch
+          ? undefined
+          : mapEventTypeToState(event.eventType);
       const newLifecycle = mapPhaseNameToLifecycle(event.phaseName);
 
       // Trigger a server refresh to get the latest drawer view,
@@ -104,24 +117,26 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
       // 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) => {
-        if (
-          prev.type !== 'feature' &&
-          prev.type !== 'prd-review' &&
-          prev.type !== 'tech-review' &&
-          prev.type !== 'merge-review'
-        )
-          return prev;
-        return {
-          ...prev,
-          node: {
+      if (newState !== undefined || newLifecycle !== undefined) {
+        // Optimistically update the node data AND re-derive the view type so the
+        // drawer switches immediately (e.g. prd-review → feature when agent resumes)
+        // without waiting for the router.refresh() round-trip.
+        setView((prev) => {
+          if (
+            prev.type !== 'feature' &&
+            prev.type !== 'prd-review' &&
+            prev.type !== 'tech-review' &&
+            prev.type !== 'merge-review'
+          )
+            return prev;
+          const updatedNode = {
             ...prev.node,
-            state: newState,
+            ...(newState !== undefined && { state: newState }),
             ...(newLifecycle !== undefined && { lifecycle: newLifecycle }),
-          },
-        };
-      });
+          };
+          return { ...prev, type: deriveViewType(updatedNode), node: updatedNode };
+        });
+      }
     }
   }, [events, featureNode, router]);
 
@@ -765,3 +780,14 @@ function DetailRow({ label, value }: { label: string; value: string }) {
     </div>
   );
 }
+
+/** Mirrors computeDrawerView logic — derives view type from live node data. */
+function deriveViewType(
+  node: FeatureNodeData
+): 'feature' | 'prd-review' | 'tech-review' | 'merge-review' {
+  if (node.lifecycle === 'requirements' && node.state === 'action-required') return 'prd-review';
+  if (node.lifecycle === 'implementation' && node.state === 'action-required') return 'tech-review';
+  if (node.lifecycle === 'review' && (node.state === 'action-required' || node.state === 'error'))
+    return 'merge-review';
+  return 'feature';
+}

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/index.ts

@@ -4,11 +4,7 @@ export {
   computeDrawerView,
   type DrawerView,
 } from './control-center-drawer';
-export {
-  AddRepositoryNode,
-  type AddRepositoryNodeData,
-  type AddRepositoryNodeType,
-} from './add-repository-node';
+export { AddRepositoryButton } from './add-repository-button';
 export { ElapsedTime, formatElapsed } from './elapsed-time';
 export { EmptyState, type EmptyStateProps } from './empty-state';
 export {
@@ -35,7 +31,6 @@ export {
 export { FeatureStatusBadges, type FeatureStatusBadgesProps } from './feature-status-badges';
 export { FeatureStatusGroup, type FeatureStatusGroupProps } from './feature-status-group';
 export { LoadingSkeleton } from './loading-skeleton';
-export { NotificationPermissionBanner } from './notification-permission-banner';
 export {
   RepositoryNode,
   type RepositoryNodeData,

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/control-center-empty-state.tsx

@@ -3,7 +3,7 @@
 import { useState, useCallback } from 'react';
 import { Github, Plus, TerminalSquare, Copy, Check, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { pickFolder } from '@/components/common/add-repository-node/pick-folder';
+import { pickFolder } from '@/components/common/add-repository-button/pick-folder';
 
 export interface ControlCenterEmptyStateProps {
   onRepositorySelect?: (path: string) => void;