@shepai/cli 1.52.2 → 1.53.1

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

@@ -0,0 +1,43 @@
+'use client';
+
+import { useState } from 'react';
+import { Plus, Loader2 } from 'lucide-react';
+import { pickFolder } from './pick-folder';
+
+interface AddRepositoryButtonProps {
+  onSelect?: (path: string) => void;
+}
+
+export function AddRepositoryButton({ onSelect }: AddRepositoryButtonProps) {
+  const [loading, setLoading] = useState(false);
+
+  async function handleClick() {
+    if (loading) return;
+    setLoading(true);
+    try {
+      const path = await pickFolder();
+      if (path) {
+        onSelect?.(path);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      data-testid="add-repository-button"
+      onClick={handleClick}
+      disabled={loading}
+      className="border-muted-foreground/30 flex cursor-pointer items-center gap-2 rounded-full border-2 border-dashed px-3 py-1.5 text-xs transition-colors hover:border-blue-500 hover:text-blue-500 disabled:cursor-wait disabled:opacity-60"
+    >
+      {loading ? (
+        <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" />
+      ) : (
+        <Plus className="h-3.5 w-3.5 shrink-0" />
+      )}
+      <span className="font-medium">{loading ? 'Opening...' : 'Add Repository'}</span>
+    </button>
+  );
+}

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

@@ -1,2 +1,3 @@
 export { AddRepositoryNode } from './add-repository-node';
+export { AddRepositoryButton } from './add-repository-button';
 export type { AddRepositoryNodeData, AddRepositoryNodeType } from './add-repository-node-config';

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import type { LucideIcon } from 'lucide-react';
 import {
   XIcon,
@@ -10,6 +10,8 @@ import {
   ImageIcon,
   CodeIcon,
   Trash2Icon,
+  ChevronsUpDown,
+  CheckIcon,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import {
@@ -28,12 +30,19 @@ import { CheckboxGroup } from '@/components/ui/checkbox-group';
 import { CheckboxGroupItem } from '@/components/ui/checkbox-group-item';
 import { Separator } from '@/components/ui/separator';
 import { Badge } from '@/components/ui/badge';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import type { FileAttachment } from '@shepai/core/infrastructure/services/file-dialog.service';
 import type { WorkflowDefaults } from '@/app/actions/get-workflow-defaults';
 import { pickFiles } from './pick-files';
 
 export type { FileAttachment } from '@shepai/core/infrastructure/services/file-dialog.service';
 
+/** Minimal feature descriptor for the parent selector. */
+export interface ParentFeatureOption {
+  id: string;
+  name: string;
+}
+
 export interface FeatureCreatePayload {
   name: string;
   description?: string;
@@ -46,6 +55,7 @@ export interface FeatureCreatePayload {
   };
   push: boolean;
   openPr: boolean;
+  parentId?: string;
 }
 
 const AUTO_APPROVE_OPTIONS = [
@@ -67,6 +77,10 @@ export interface FeatureCreateDrawerProps {
   repositoryPath: string;
   isSubmitting?: boolean;
   workflowDefaults?: WorkflowDefaults;
+  /** List of existing features available for selection as a parent. */
+  features?: ParentFeatureOption[];
+  /** Pre-select a parent feature when the drawer opens (e.g. from (+) button on a feature node). */
+  initialParentId?: string;
 }
 
 export function FeatureCreateDrawer({
@@ -76,6 +90,8 @@ export function FeatureCreateDrawer({
   repositoryPath,
   isSubmitting = false,
   workflowDefaults,
+  features,
+  initialParentId,
 }: FeatureCreateDrawerProps) {
   const defaultGates = workflowDefaults?.approvalGates ?? EMPTY_GATES;
   const defaultPush = workflowDefaults?.push ?? false;
@@ -87,6 +103,7 @@ export function FeatureCreateDrawer({
   const [approvalGates, setApprovalGates] = useState<Record<string, boolean>>({ ...defaultGates });
   const [push, setPush] = useState(defaultPush);
   const [openPr, setOpenPr] = useState(defaultOpenPr);
+  const [parentId, setParentId] = useState<string | undefined>(undefined);
 
   // Sync state when workflowDefaults load asynchronously
   useEffect(() => {
@@ -97,6 +114,13 @@ export function FeatureCreateDrawer({
     }
   }, [workflowDefaults]);
 
+  // Pre-select parent when initialParentId changes (e.g. (+) button on feature node)
+  useEffect(() => {
+    if (open && initialParentId) {
+      setParentId(initialParentId);
+    }
+  }, [open, initialParentId]);
+
   const resetForm = useCallback(() => {
     setName('');
     setDescription('');
@@ -104,6 +128,7 @@ export function FeatureCreateDrawer({
     setApprovalGates({ ...defaultGates });
     setPush(defaultPush);
     setOpenPr(defaultOpenPr);
+    setParentId(undefined);
   }, [defaultGates, defaultPush, defaultOpenPr]);
 
   const handleOpenChange = useCallback(
@@ -133,9 +158,20 @@ export function FeatureCreateDrawer({
         },
         push: push || openPr,
         openPr,
+        ...(parentId ? { parentId } : {}),
       });
     },
-    [name, description, attachments, approvalGates, repositoryPath, onSubmit, push, openPr]
+    [
+      name,
+      description,
+      attachments,
+      approvalGates,
+      repositoryPath,
+      onSubmit,
+      push,
+      openPr,
+      parentId,
+    ]
   );
 
   const handleAddFiles = useCallback(async () => {
@@ -153,6 +189,8 @@ export function FeatureCreateDrawer({
     setAttachments((prev) => prev.filter((f) => f.path !== path));
   }, []);
 
+  const hasFeatures = features && features.length > 0;
+
   return (
     <Drawer direction="right" modal={false} handleOnly open={open} onOpenChange={handleOpenChange}>
       <DrawerContent direction="right" className="w-96" showCloseButton={false}>
@@ -220,6 +258,24 @@ export function FeatureCreateDrawer({
               />
             </div>
 
+            {/* Parent feature selector (only when features are available) */}
+            {hasFeatures ? (
+              <div className="flex flex-col gap-1.5">
+                <Label
+                  htmlFor="parent-feature"
+                  className="text-muted-foreground text-xs font-semibold tracking-wider"
+                >
+                  PARENT FEATURE
+                </Label>
+                <ParentFeatureCombobox
+                  features={features}
+                  value={parentId}
+                  onChange={setParentId}
+                  disabled={isSubmitting}
+                />
+              </div>
+            ) : null}
+
             {/* Auto-approve checkboxes */}
             <div className="flex flex-col gap-1.5">
               <Label className="text-muted-foreground text-xs font-semibold tracking-wider">
@@ -313,6 +369,147 @@ export function FeatureCreateDrawer({
   );
 }
 
+/* ---------------------------------------------------------------------------
+ * ParentFeatureCombobox — searchable dropdown for parent feature selection
+ * ------------------------------------------------------------------------- */
+
+interface ParentFeatureComboboxProps {
+  features: ParentFeatureOption[];
+  value: string | undefined;
+  onChange: (id: string | undefined) => void;
+  disabled?: boolean;
+}
+
+function ParentFeatureCombobox({
+  features,
+  value,
+  onChange,
+  disabled,
+}: ParentFeatureComboboxProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const selectedFeature = features.find((f) => f.id === value);
+
+  const filtered = query.trim()
+    ? features.filter(
+        (f) =>
+          f.name.toLowerCase().includes(query.toLowerCase()) ||
+          f.id.toLowerCase().includes(query.toLowerCase())
+      )
+    : features;
+
+  const handleSelect = useCallback(
+    (id: string | undefined) => {
+      onChange(id);
+      setOpen(false);
+      setQuery('');
+    },
+    [onChange]
+  );
+
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 0);
+    } else {
+      setQuery('');
+    }
+  }, [open]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          id="parent-feature"
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          aria-label="Parent Feature"
+          disabled={disabled}
+          data-testid="parent-feature-combobox"
+          className={cn(
+            'border-input bg-background ring-offset-background focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+            !selectedFeature && 'text-muted-foreground'
+          )}
+        >
+          <span className="truncate">
+            {selectedFeature
+              ? `${selectedFeature.name} (${selectedFeature.id.slice(0, 8)})`
+              : 'Select parent feature...'}
+          </span>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-80 p-0"
+        align="start"
+        data-testid="parent-feature-combobox-content"
+      >
+        <div className="flex flex-col">
+          {/* Search input */}
+          <div className="border-b p-2">
+            <Input
+              ref={inputRef}
+              placeholder="Search features..."
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              className="h-8 border-0 p-0 text-sm shadow-none focus-visible:ring-0"
+              data-testid="parent-feature-search"
+            />
+          </div>
+
+          {/* Options list */}
+          <div className="max-h-48 overflow-y-auto py-1" role="listbox" aria-label="Features">
+            {/* No parent option */}
+            <button
+              type="button"
+              role="option"
+              aria-selected={value === undefined}
+              onClick={() => handleSelect(undefined)}
+              className={cn(
+                'hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 px-3 py-2 text-sm',
+                value === undefined && 'bg-accent/50'
+              )}
+              data-testid="parent-feature-option-none"
+            >
+              <CheckIcon className={cn('h-4 w-4 shrink-0', value !== undefined && 'invisible')} />
+              <span className="text-muted-foreground italic">No parent</span>
+            </button>
+
+            {filtered.length === 0 && query ? (
+              <p className="text-muted-foreground px-3 py-2 text-sm">No features found.</p>
+            ) : (
+              filtered.map((f) => (
+                <button
+                  key={f.id}
+                  type="button"
+                  role="option"
+                  aria-selected={value === f.id}
+                  onClick={() => handleSelect(f.id)}
+                  className={cn(
+                    'hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 px-3 py-2 text-sm',
+                    value === f.id && 'bg-accent/50'
+                  )}
+                  data-testid={`parent-feature-option-${f.id}`}
+                >
+                  <CheckIcon className={cn('h-4 w-4 shrink-0', value !== f.id && 'invisible')} />
+                  <span className="truncate">
+                    {f.name}{' '}
+                    <span className="text-muted-foreground font-mono text-xs">
+                      ({f.id.slice(0, 8)})
+                    </span>
+                  </span>
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 /* ---------------------------------------------------------------------------
  * Private sub-components & utilities
  * ------------------------------------------------------------------------- */

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

@@ -21,6 +21,11 @@ import type { FeatureNodeState } from './feature-node-state-config';
  * 6. No agent run → fall back to plan tasks / lifecycle
  */
 export function deriveNodeState(feature: Feature, agentRun?: AgentRun | null): FeatureNodeState {
+  // Blocked lifecycle takes priority — child waiting on parent regardless of agent run
+  if (feature.lifecycle === SdlcLifecycle.Blocked) {
+    return 'blocked';
+  }
+
   if (agentRun) {
     switch (agentRun.status) {
       case AgentRunStatus.waitingApproval:

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

@@ -100,7 +100,7 @@ export function FeatureNode({
             data-testid="feature-node-lifecycle-label"
             className={cn('text-[10px] font-semibold tracking-wider')}
           >
-            {lifecycleDisplayLabels[data.lifecycle]}
+            {data.state === 'blocked' ? 'BLOCKED' : lifecycleDisplayLabels[data.lifecycle]}
           </span>
           {data.onSettings ? (
             <button

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { Edge } from '@xyflow/react';
 import { toast } from 'sonner';
 import type {
@@ -18,6 +18,7 @@ import type { TechDecisionsReviewData } from '@/components/common/tech-decisions
 import type { MergeReviewData } from '@/components/common/merge-review';
 import { FeaturesCanvas } from '@/components/features/features-canvas';
 import type { CanvasNodeType } from '@/components/features/features-canvas';
+import type { FeatureNodeData } from '@/components/common/feature-node';
 import { FeatureDrawer, FeatureCreateDrawer } from '@/components/common';
 import { PrdQuestionnaireDrawer } from '@/components/common/prd-questionnaire';
 import type { PrdQuestionnaireData } from '@/components/common/prd-questionnaire';
@@ -52,8 +53,22 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     handleDeleteFeature,
     handleDeleteRepository,
     closeCreateDrawer,
+    pendingParentFeatureId,
   } = useControlCenterState(initialNodes, initialEdges);
 
+  // Extract feature list for the parent selector in the create drawer
+  const featureOptions = useMemo(
+    () =>
+      nodes
+        .filter((n) => n.type === 'featureNode')
+        .map((n) => {
+          const data = n.data as FeatureNodeData;
+          return { id: data.featureId, name: data.name };
+        })
+        .filter((f) => f.id && !f.id.startsWith('#')), // exclude optimistic temp nodes
+    [nodes]
+  );
+
   // Workflow defaults for the create-feature drawer
   const [workflowDefaults, setWorkflowDefaults] = useState<WorkflowDefaults | undefined>();
   useEffect(() => {
@@ -321,6 +336,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
           onSubmit={handleCreateFeatureSubmit}
           repositoryPath={pendingRepositoryPath}
           workflowDefaults={workflowDefaults}
+          features={featureOptions}
+          initialParentId={pendingParentFeatureId}
         />
       </>
     );
@@ -414,6 +431,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
         onSubmit={handleCreateFeatureSubmit}
         repositoryPath={pendingRepositoryPath}
         workflowDefaults={workflowDefaults}
+        features={featureOptions}
+        initialParentId={pendingParentFeatureId}
       />
     </>
   );

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

@@ -21,6 +21,8 @@ export interface ControlCenterState {
   selectedNode: FeatureNodeData | null;
   isCreateDrawerOpen: boolean;
   pendingRepositoryPath: string;
+  /** Parent feature ID pre-selected when (+) is clicked on a feature node. */
+  pendingParentFeatureId: string | undefined;
   onNodesChange: (changes: NodeChange<CanvasNodeType>[]) => void;
   handleConnect: (connection: Connection) => void;
   clearSelection: () => void;
@@ -191,7 +193,11 @@ export function useControlCenterState(
   );
 
   const createFeatureNode = useCallback(
-    (sourceNodeId: string | null, dataOverride?: Partial<FeatureNodeData>): string => {
+    (
+      sourceNodeId: string | null,
+      dataOverride?: Partial<FeatureNodeData>,
+      edgeType?: string
+    ): string => {
       const id = `feature-${Date.now()}-${nextFeatureId++}`;
       const newFeatureData: FeatureNodeData = {
         name: dataOverride?.name ?? 'New Feature',
@@ -292,10 +298,13 @@ export function useControlCenterState(
         setEdges((currentEdges) => [
           ...currentEdges,
           {
-            id: `edge-${sourceNodeId}-${id}`,
+            id:
+              edgeType === 'dependencyEdge'
+                ? `dep-${sourceNodeId}-${id}`
+                : `edge-${sourceNodeId}-${id}`,
             source: sourceNodeId,
             target: id,
-            style: { strokeDasharray: '5 5' },
+            ...(edgeType ? { type: edgeType } : { style: { strokeDasharray: '5 5' } }),
           },
         ]);
       }
@@ -314,19 +323,30 @@ export function useControlCenterState(
     setIsCreateDrawerOpen(true);
   }, []);
 
+  const [pendingParentFeatureId, setPendingParentFeatureId] = useState<string | undefined>();
+
   const handleCreateFeatureSubmit = useCallback(
     (data: FeatureCreatePayload) => {
       // 1. Insert optimistic node instantly
-      const tempId = createFeatureNode(pendingRepoNodeId, {
-        state: 'creating',
-        name: data.name,
-        description: data.description,
-        repositoryPath: data.repositoryPath,
-      });
+      // For child features, connect to the parent feature node instead of the repo node
+      const sourceNodeId = pendingParentFeatureId
+        ? `feat-${pendingParentFeatureId}`
+        : pendingRepoNodeId;
+      const tempId = createFeatureNode(
+        sourceNodeId,
+        {
+          state: 'creating',
+          name: data.name,
+          description: data.description,
+          repositoryPath: data.repositoryPath,
+        },
+        pendingParentFeatureId ? 'dependencyEdge' : undefined
+      );
 
       // 2. Close drawer and clear pending state immediately
       setIsCreateDrawerOpen(false);
       setPendingRepoNodeId(null);
+      setPendingParentFeatureId(undefined);
 
       // 3. Fire server action in the background
       createFeature(data)
@@ -348,11 +368,12 @@ export function useControlCenterState(
           toast.error('Failed to create feature');
         });
     },
-    [router, createFeatureNode, pendingRepoNodeId, setEdges]
+    [router, createFeatureNode, pendingRepoNodeId, pendingParentFeatureId, setEdges]
   );
 
   const closeCreateDrawer = useCallback(() => {
     setIsCreateDrawerOpen(false);
+    setPendingParentFeatureId(undefined);
   }, []);
 
   const handleDeleteFeature = useCallback(
@@ -426,9 +447,18 @@ export function useControlCenterState(
 
   const handleAddFeatureToFeature = useCallback(
     (featureNodeId: string) => {
-      createFeatureNode(featureNodeId);
+      // Extract feature ID from node ID (format: "feat-<uuid>")
+      const featureId = featureNodeId.startsWith('feat-') ? featureNodeId.slice(5) : featureNodeId;
+      // Find the repo node that owns this feature
+      const repoEdge = edges.find((e) => e.target === featureNodeId);
+      const repoNodeId = repoEdge?.source ?? null;
+
+      setSelectedNode(null);
+      setPendingRepoNodeId(repoNodeId);
+      setPendingParentFeatureId(featureId);
+      setIsCreateDrawerOpen(true);
     },
-    [createFeatureNode]
+    [edges]
   );
 
   const handleLayout = useCallback(
@@ -564,6 +594,7 @@ export function useControlCenterState(
     selectedNode,
     isCreateDrawerOpen,
     pendingRepositoryPath,
+    pendingParentFeatureId,
     onNodesChange,
     handleConnect,
     clearSelection,

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

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReactFlow, ReactFlowProvider } from '@xyflow/react';
+import { DependencyEdge } from './dependency-edge';
+import { FeatureNode } from '@/components/common/feature-node';
+import type { FeatureNodeData } from '@/components/common/feature-node';
+
+import '@xyflow/react/dist/style.css';
+
+const meta: Meta = {
+  title: 'Features/DependencyEdge',
+  decorators: [
+    (Story) => (
+      <div style={{ width: '800px', height: '400px' }}>
+        <ReactFlowProvider>
+          <Story />
+        </ReactFlowProvider>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+const parentData: FeatureNodeData = {
+  name: 'Auth System',
+  description: 'User authentication',
+  featureId: 'feat-1234',
+  lifecycle: 'implementation',
+  state: 'running',
+  progress: 60,
+  repositoryPath: '/repo',
+  branch: 'feat/auth',
+  showHandles: true,
+};
+
+const childData: FeatureNodeData = {
+  name: 'Login Page',
+  description: 'Login UI component',
+  featureId: 'feat-5678',
+  lifecycle: 'requirements',
+  state: 'blocked',
+  progress: 0,
+  repositoryPath: '/repo',
+  branch: 'feat/login',
+  blockedBy: 'Auth System',
+  showHandles: true,
+};
+
+export const Default: StoryObj = {
+  render: () => (
+    <ReactFlow
+      nodes={[
+        {
+          id: 'parent',
+          type: 'featureNode',
+          position: { x: 50, y: 100 },
+          data: parentData,
+        },
+        {
+          id: 'child',
+          type: 'featureNode',
+          position: { x: 450, y: 100 },
+          data: childData,
+        },
+      ]}
+      edges={[
+        {
+          id: 'dep-1',
+          source: 'parent',
+          target: 'child',
+          type: 'dependencyEdge',
+        },
+      ]}
+      nodeTypes={{ featureNode: FeatureNode }}
+      edgeTypes={{ dependencyEdge: DependencyEdge }}
+      fitView
+      nodesDraggable={false}
+      nodesConnectable={false}
+    />
+  ),
+};

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

@@ -0,0 +1,29 @@
+'use client';
+
+import { BaseEdge, getBezierPath } from '@xyflow/react';
+import type { EdgeProps } from '@xyflow/react';
+
+/**
+ * Custom React Flow edge for parent→child feature dependencies.
+ * Uses bezier curves and dashed style matching repo→feature edges.
+ */
+export function DependencyEdge(props: EdgeProps) {
+  const [edgePath] = getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    sourcePosition: props.sourcePosition,
+    targetPosition: props.targetPosition,
+  });
+
+  return (
+    <BaseEdge
+      id={props.id}
+      path={edgePath}
+      style={{
+        strokeDasharray: '5 5',
+      }}
+    />
+  );
+}