@shepai/cli 1.76.0-pr245.808d0f5 → 1.77.0

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

@@ -49,6 +49,8 @@ export interface FeatureCreatePayload {
   push: boolean;
   openPr: boolean;
   parentId?: string;
+  /** When true, skip SDLC phases and implement directly from the prompt. */
+  fast: boolean;
 }
 
 const AUTO_APPROVE_OPTIONS = [
@@ -97,6 +99,7 @@ export function FeatureCreateDrawer({
   const [push, setPush] = useState(defaultPush);
   const [openPr, setOpenPr] = useState(defaultOpenPr);
   const [parentId, setParentId] = useState<string | undefined>(undefined);
+  const [fast, setFast] = useState(false);
 
   // Sync state when workflowDefaults load asynchronously
   useEffect(() => {
@@ -121,6 +124,7 @@ export function FeatureCreateDrawer({
     setPush(defaultPush);
     setOpenPr(defaultOpenPr);
     setParentId(undefined);
+    setFast(false);
   }, [defaultGates, defaultPush, defaultOpenPr]);
 
   // Track whether the form has unsaved data
@@ -145,6 +149,7 @@ export function FeatureCreateDrawer({
         },
         push: push || openPr,
         openPr,
+        fast,
         ...(parentId ? { parentId } : {}),
       });
       resetForm();
@@ -157,6 +162,7 @@ export function FeatureCreateDrawer({
       onSubmit,
       push,
       openPr,
+      fast,
       parentId,
       createSound,
       resetForm,
@@ -258,6 +264,21 @@ export function FeatureCreateDrawer({
             </div>
           ) : null}
 
+          {/* Fast mode toggle */}
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-muted-foreground text-xs font-semibold tracking-wider">
+              MODE
+            </Label>
+            <CheckboxGroupItem
+              id="fast-mode"
+              label="Fast Mode"
+              description="Skip SDLC phases and implement directly from your prompt."
+              checked={fast}
+              onCheckedChange={setFast}
+              disabled={isSubmitting}
+            />
+          </div>
+
           {/* Auto-approve checkboxes */}
           <div className="flex flex-col gap-1.5">
             <Label className="text-muted-foreground text-xs font-semibold tracking-wider">

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

@@ -1,8 +1,9 @@
 'use client';
 
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import type { Edge, Viewport } from '@xyflow/react';
+import { useReactFlow } from '@xyflow/react';
 import { FeaturesCanvas } from '@/components/features/features-canvas';
 import type { CanvasNodeType } from '@/components/features/features-canvas';
 import type { FeatureNodeData } from '@/components/common/feature-node';
@@ -18,6 +19,14 @@ import { useViewportPersistence } from '@/hooks/use-viewport-persistence';
 import { ControlCenterEmptyState } from './control-center-empty-state';
 import { useControlCenterState } from './use-control-center-state';
 
+const AUTO_FOCUS_OPTIONS = {
+  maxZoom: 1.0,
+  padding: 0.5,
+  duration: 500,
+} as const;
+
+const AUTO_FOCUS_DRAWER_DELAY_MS = 600;
+
 interface ControlCenterInnerProps {
   initialNodes: CanvasNodeType[];
   initialEdges: Edge[];
@@ -29,6 +38,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
   const selectedFeatureId = useSelectedFeatureId();
   const clickSound = useSoundAction('click');
   const { guardedNavigate } = useDrawerCloseGuard();
+  const { fitView } = useReactFlow();
+  const drawerTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const {
     defaultViewport,
@@ -164,11 +175,28 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
   useEffect(() => {
     const handler = (e: Event) => {
       const path = (e as CustomEvent<{ path: string }>).detail.path;
-      handleAddRepository(path);
+      const { wasEmpty, repoPath } = handleAddRepository(path);
+
+      if (wasEmpty) {
+        // Wait for next render so the repo node exists in the DOM, then auto-focus
+        setTimeout(() => {
+          fitView(AUTO_FOCUS_OPTIONS);
+
+          // Open the create-feature drawer after the fitView animation completes
+          drawerTimerRef.current = setTimeout(() => {
+            guardedNavigate(() => router.push(`/create?repo=${encodeURIComponent(repoPath)}`));
+          }, AUTO_FOCUS_DRAWER_DELAY_MS);
+        }, 0);
+      }
     };
     window.addEventListener('shep:add-repository', handler);
-    return () => window.removeEventListener('shep:add-repository', handler);
-  }, [handleAddRepository]);
+    return () => {
+      window.removeEventListener('shep:add-repository', handler);
+      if (drawerTimerRef.current != null) {
+        clearTimeout(drawerTimerRef.current);
+      }
+    };
+  }, [handleAddRepository, fitView, guardedNavigate, router]);
 
   // Listen for create events from the create drawer (with real feature ID from server)
   useEffect(() => {

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

@@ -36,7 +36,7 @@ export interface ControlCenterState {
   edges: Edge[];
   onNodesChange: (changes: NodeChange<CanvasNodeType>[]) => void;
   handleConnect: (connection: Connection) => void;
-  handleAddRepository: (path: string) => void;
+  handleAddRepository: (path: string) => { wasEmpty: boolean; repoPath: string };
   handleLayout: (direction: LayoutDirection) => void;
   handleDeleteFeature: (featureId: string) => void;
   handleDeleteRepository: (repositoryId: string) => Promise<void>;
@@ -57,6 +57,7 @@ export interface ControlCenterState {
 const METADATA_UPDATED_MESSAGE = 'Feature metadata updated';
 
 let nextFeatureId = 0;
+let nextRepoTempId = 0;
 
 export function useControlCenterState(
   initialNodes: CanvasNodeType[],
@@ -79,6 +80,7 @@ export function useControlCenterState(
     replaceRepository,
     getFeatureRepositoryPath,
     getRepositoryData,
+    getRepoMapSize,
     setCallbacks,
   } = useGraphState(initialNodes, initialEdges);
 
@@ -384,8 +386,9 @@ export function useControlCenterState(
   );
 
   const handleAddRepository = useCallback(
-    (path: string) => {
-      const tempId = `repo-temp-${Date.now()}`;
+    (path: string): { wasEmpty: boolean; repoPath: string } => {
+      const wasEmpty = getRepoMapSize() === 0;
+      const tempId = `repo-temp-${++nextRepoTempId}`;
       const repoName =
         path
           .replace(/[\\/]+$/, '')
@@ -414,8 +417,10 @@ export function useControlCenterState(
           removeRepository(tempId);
           toast.error('Failed to add repository');
         });
+
+      return { wasEmpty, repoPath: path };
     },
-    [addRepositoryToMap, removeRepository, replaceRepository, createSound]
+    [addRepositoryToMap, removeRepository, replaceRepository, createSound, getRepoMapSize]
   );
 
   return {

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

@@ -5,6 +5,7 @@ import type { CanvasNodeType } from './features-canvas';
 import type { FeatureNodeType } from '@/components/common/feature-node';
 import type { RepositoryNodeType } from '@/components/common/repository-node';
 import { layoutWithDagre } from '@/lib/layout-with-dagre';
+import { DEFAULT_VIEWPORT } from '@/hooks/use-viewport-persistence';
 
 const meta: Meta<typeof FeaturesCanvas> = {
   title: 'Features/FeaturesCanvas',
@@ -561,12 +562,14 @@ export const InteractiveWithRepository: Story = {
   },
 };
 
+// --- Viewport Persistence Stories ---
+
 export const WithSavedViewport: Story = {
   args: {
     nodes: repoFeatureNodes,
     edges: repoFeatureEdges,
     defaultViewport: { x: 200, y: 150, zoom: 1.0 },
-    onResetViewport: () => ({ x: 30, y: 30, zoom: 0.85 }),
+    onResetViewport: () => DEFAULT_VIEWPORT,
   },
 };
 
@@ -575,6 +578,82 @@ export const ZoomedOutViewport: Story = {
     nodes: mixedLayoutedNodes,
     edges: mixedLayoutedEdges,
     defaultViewport: { x: 0, y: 0, zoom: 0.5 },
-    onResetViewport: () => ({ x: 30, y: 30, zoom: 0.85 }),
+    onResetViewport: () => DEFAULT_VIEWPORT,
+  },
+};
+
+// --- Fast-mode feature scenario ---
+
+const fastModeNodesRaw: CanvasNodeType[] = [
+  {
+    id: 'repo-1',
+    type: 'repositoryNode',
+    position: { x: 0, y: 0 },
+    data: { name: 'shep-ai/cli' },
+  },
+  {
+    id: 'feat-fast-1',
+    type: 'featureNode',
+    position: { x: 0, y: 0 },
+    data: {
+      name: 'Quick Bug Fix',
+      description: 'Fast-mode feature — skips SDLC, starts at implementation',
+      featureId: '#ff1',
+      lifecycle: 'implementation',
+      state: 'running',
+      progress: 30,
+      repositoryPath: '/home/user/my-repo',
+      branch: 'feat/quick-bug-fix',
+    },
+  },
+  {
+    id: 'feat-full-1',
+    type: 'featureNode',
+    position: { x: 0, y: 0 },
+    data: {
+      name: 'Auth Module',
+      description: 'Full-pipeline feature — goes through all SDLC phases',
+      featureId: '#ff2',
+      lifecycle: 'requirements',
+      state: 'running',
+      progress: 15,
+      repositoryPath: '/home/user/my-repo',
+      branch: 'feat/auth-module',
+    },
+  },
+  {
+    id: 'feat-fast-2',
+    type: 'featureNode',
+    position: { x: 0, y: 0 },
+    data: {
+      name: 'Update README',
+      description: 'Fast-mode feature — already done',
+      featureId: '#ff3',
+      lifecycle: 'deploy',
+      state: 'done',
+      progress: 100,
+      repositoryPath: '/home/user/my-repo',
+      branch: 'feat/update-readme',
+    },
+  },
+];
+
+const fastModeEdges: Edge[] = [
+  { id: 'e-r1-ff1', source: 'repo-1', target: 'feat-fast-1', ...dashedEdge },
+  { id: 'e-r1-ff2', source: 'repo-1', target: 'feat-full-1', ...dashedEdge },
+  { id: 'e-r1-ff3', source: 'repo-1', target: 'feat-fast-2', ...dashedEdge },
+];
+
+const { nodes: fastModeLayoutedNodes, edges: fastModeLayoutedEdges } = layoutWithDagre(
+  fastModeNodesRaw,
+  fastModeEdges,
+  { direction: 'LR' }
+);
+
+export const FastModeFeatures: Story = {
+  name: 'Fast Mode Features (Mixed Pipeline)',
+  args: {
+    nodes: fastModeLayoutedNodes,
+    edges: fastModeLayoutedEdges,
   },
 };

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

@@ -43,7 +43,7 @@ function ResetButton({ onResetViewport }: { onResetViewport: () => Viewport }) {
 
   return (
     <ControlButton onClick={handleReset} title="Reset view" aria-label="Reset view">
-      <RotateCcw />
+      <RotateCcw style={{ fill: 'none' }} />
     </ControlButton>
   );
 }

package/web/.next/standalone/src/presentation/web/hooks/use-graph-state.ts

@@ -45,6 +45,8 @@ export interface UseGraphStateReturn {
   getFeatureRepositoryPath: (featureNodeId: string) => string | undefined;
   /** Stable lookup: get repository node data by nodeId. */
   getRepositoryData: (nodeId: string) => RepositoryNodeData | undefined;
+  /** Stable lookup: get the current number of repositories in the domain Map. */
+  getRepoMapSize: () => number;
   /** Update callbacks injected into node data (does NOT trigger re-render). */
   setCallbacks: (callbacks: GraphCallbacks) => void;
 }
@@ -353,6 +355,10 @@ export function useGraphState(
     return repoMapRef.current.get(nodeId)?.data;
   }, []);
 
+  const getRepoMapSize = useCallback((): number => {
+    return repoMapRef.current.size;
+  }, []);
+
   const setCallbacks = useCallback((callbacks: GraphCallbacks) => {
     callbacksRef.current = callbacks;
   }, []);
@@ -371,6 +377,7 @@ export function useGraphState(
     replaceRepository,
     getFeatureRepositoryPath,
     getRepositoryData,
+    getRepoMapSize,
     setCallbacks,
   };
 }

package/web/.next/standalone/src/presentation/web/hooks/use-viewport-persistence.ts

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useRef } from 'react';
 import type { Viewport } from '@xyflow/react';
 
+export type { Viewport } from '@xyflow/react';
+
 export const STORAGE_KEY = 'shep-canvas-viewport';
 export const DEBOUNCE_MS = 500;