@shepai/cli 1.72.9 → 1.73.0

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;

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

@@ -7,7 +7,6 @@ import { FeaturesCanvas } from '@/components/features/features-canvas';
 import type { CanvasNodeType } from '@/components/features/features-canvas';
 import type { FeatureNodeData } from '@/components/common/feature-node';
 import type { RepositoryNodeData } from '@/components/common/repository-node';
-import { NotificationPermissionBanner } from '@/components/common/notification-permission-banner';
 import {
   useSidebarFeaturesContext,
   mapNodeStateToSidebarStatus,
@@ -39,25 +38,26 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     handleDeleteFeature,
     handleDeleteRepository,
     createFeatureNode,
+    setCallbacks,
   } = useControlCenterState(initialNodes, initialEdges);
 
   // Publish sidebar features to context whenever feature node data changes
   const { setFeatures: setSidebarFeatures } = useSidebarFeaturesContext();
 
+  const featureNodes = useMemo(() => nodes.filter((n) => n.type === 'featureNode'), [nodes]);
+
   const sidebarKey = useMemo(() => {
-    return nodes
-      .filter((n) => n.type === 'featureNode')
+    return featureNodes
       .map((n) => {
         const d = n.data as FeatureNodeData;
-        return `${d.featureId}:${d.state}:${d.runtime ?? ''}:${d.startedAt ?? ''}`;
+        return `${d.featureId}:${d.state}:${d.name}`;
       })
       .sort()
       .join(',');
-  }, [nodes]);
+  }, [featureNodes]);
 
   useEffect(() => {
-    const sidebarItems = nodes
-      .filter((n) => n.type === 'featureNode')
+    const sidebarItems = featureNodes
       .map((n) => {
         const d = n.data as FeatureNodeData;
         const status = mapNodeStateToSidebarStatus(d.state);
@@ -79,7 +79,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     }[];
 
     setSidebarFeatures(sidebarItems);
-  }, [sidebarKey, nodes, setSidebarFeatures]);
+  }, [sidebarKey, featureNodes, setSidebarFeatures]);
 
   // ── URL-based navigation handlers ────────────────────────────────────
 
@@ -163,11 +163,12 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     return () => window.removeEventListener('shep:add-repository', handler);
   }, [handleAddRepository]);
 
-  // Listen for optimistic create events from the create drawer
+  // Listen for create events from the create drawer (with real feature ID from server)
   useEffect(() => {
     const handler = (e: Event) => {
       const detail = (
         e as CustomEvent<{
+          featureId: string;
           name: string;
           description?: string;
           repositoryPath: string;
@@ -183,6 +184,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
           parentNodeId,
           {
             state: 'creating',
+            featureId: detail.featureId,
             name: detail.name,
             description: detail.description,
             repositoryPath: detail.repositoryPath,
@@ -200,7 +202,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
       );
 
       createFeatureNode(repoNode?.id ?? null, {
-        state: 'creating',
+        state: 'running',
+        featureId: detail.featureId,
         name: detail.name,
         description: detail.description,
         repositoryPath: detail.repositoryPath,
@@ -210,37 +213,41 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     return () => window.removeEventListener('shep:feature-created', handler);
   }, [nodes, createFeatureNode]);
 
+  // Wire callbacks into derived node data (via ref — no re-render).
+  useEffect(() => {
+    setCallbacks({
+      onNodeAction: handleAddFeatureToFeature,
+      onFeatureDelete: handleDeleteFeature,
+      onRepositoryAdd: handleAddFeatureToRepo,
+      onRepositoryClick: handleRepositoryClick,
+      onRepositoryDelete: handleDeleteRepository,
+    });
+  }, [
+    setCallbacks,
+    handleAddFeatureToFeature,
+    handleDeleteFeature,
+    handleAddFeatureToRepo,
+    handleRepositoryClick,
+    handleDeleteRepository,
+  ]);
+
   const hasRepositories = nodes.some((n) => n.type === 'repositoryNode');
 
   if (!hasRepositories) {
-    return (
-      <>
-        <NotificationPermissionBanner />
-        <ControlCenterEmptyState onRepositorySelect={handleAddRepository} />
-      </>
-    );
+    return <ControlCenterEmptyState onRepositorySelect={handleAddRepository} />;
   }
 
   return (
-    <>
-      <NotificationPermissionBanner />
-      <FeaturesCanvas
-        nodes={nodes}
-        edges={edges}
-        selectedFeatureId={selectedFeatureId}
-        onNodesChange={onNodesChange}
-        onConnect={handleConnect}
-        onAddFeature={handleAddFeature}
-        onNodeAction={handleAddFeatureToFeature}
-        onNodeClick={handleNodeClick}
-        onPaneClick={handleClearDrawers}
-        onRepositoryAdd={handleAddFeatureToRepo}
-        onRepositoryClick={handleRepositoryClick}
-        onRepositoryDelete={handleDeleteRepository}
-        onFeatureDelete={handleDeleteFeature}
-        onRepositorySelect={handleAddRepository}
-        emptyState={<ControlCenterEmptyState onRepositorySelect={handleAddRepository} />}
-      />
-    </>
+    <FeaturesCanvas
+      nodes={nodes}
+      edges={edges}
+      selectedFeatureId={selectedFeatureId}
+      onNodesChange={onNodesChange}
+      onConnect={handleConnect}
+      onAddFeature={handleAddFeature}
+      onNodeClick={handleNodeClick}
+      onPaneClick={handleClearDrawers}
+      emptyState={<ControlCenterEmptyState onRepositorySelect={handleAddRepository} />}
+    />
   );
 }

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

@@ -4,7 +4,6 @@ import { ControlCenter } from './control-center';
 import type { CanvasNodeType } from '@/components/features/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';
 import { AgentEventsProvider } from '@/hooks/agent-events-provider';
 import { DrawerCloseGuardProvider } from '@/hooks/drawer-close-guard';
@@ -102,13 +101,6 @@ const repoNode: RepositoryNodeType = {
   data: { name: 'shep-ai/cli' },
 };
 
-const addRepoNode: AddRepositoryNodeType = {
-  id: 'add-repo',
-  type: 'addRepositoryNode',
-  position: { x: 50, y: 302 },
-  data: {},
-};
-
 const dashedEdge = { style: { strokeDasharray: '5 5' } };
 
 export const Empty: Story = {
@@ -137,7 +129,7 @@ export const WithToolbar: Story = {
 
 export const WithNodeActions: Story = {
   args: {
-    initialNodes: [repoNode, addRepoNode, ...featureNodes] as CanvasNodeType[],
+    initialNodes: [repoNode, ...featureNodes] as CanvasNodeType[],
     initialEdges: [
       { id: 'e-repo-f1', source: 'repo-1', target: 'feat-1', ...dashedEdge },
       { id: 'e-repo-f2', source: 'repo-1', target: 'feat-2', ...dashedEdge },
@@ -146,30 +138,6 @@ export const WithNodeActions: Story = {
   },
 };
 
-/**
- * Interactive story — starts with just an "Add Repository" button.
- *
- * User flow:
- * 1. Click "Add Repository" → native folder picker → select a folder → repo node appears
- * 2. Hover the repo node → click (+) → a new feature node appears connected to the repo
- * 3. Hover the feature node → click (+) → another feature appears connected to the first
- *
- * You can also use the toolbar "Add Feature" button to create unconnected features.
- */
-export const Interactive: Story = {
-  args: {
-    initialNodes: [
-      {
-        id: 'add-repo',
-        type: 'addRepositoryNode',
-        position: { x: 50, y: 50 },
-        data: {},
-      } as AddRepositoryNodeType,
-    ] as CanvasNodeType[],
-    initialEdges: [],
-  },
-};
-
 // --- Dagre-layouted story: multiple repos with feature trees ---
 
 const dagreRepoNodes: RepositoryNodeType[] = [
@@ -266,14 +234,7 @@ const dagreFeatureNodes: FeatureNodeType[] = [
   },
 ];
 
-const dagreAddRepo: AddRepositoryNodeType = {
-  id: 'add-repo',
-  type: 'addRepositoryNode',
-  position: { x: 0, y: 0 },
-  data: {},
-};
-
-const dagreNodesRaw: CanvasNodeType[] = [...dagreRepoNodes, ...dagreFeatureNodes, dagreAddRepo];
+const dagreNodesRaw: CanvasNodeType[] = [...dagreRepoNodes, ...dagreFeatureNodes];
 
 const dagreEdges: Edge[] = [
   // cli repo → Auth, SSO