@shepai/cli 1.76.0 → 1.77.0-pr244.422e487

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/components/features/settings/agent-settings-section.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AgentSettingsSection } from './agent-settings-section';
+import { AgentType, AgentAuthMethod } from '@shepai/core/domain/generated/output';
+
+const meta = {
+  title: 'Features/Settings/AgentSettingsSection',
+  component: AgentSettingsSection,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof AgentSettingsSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    agent: {
+      type: AgentType.ClaudeCode,
+      authMethod: AgentAuthMethod.Session,
+    },
+  },
+};
+
+export const TokenAuth: Story = {
+  args: {
+    agent: {
+      type: AgentType.GeminiCli,
+      authMethod: AgentAuthMethod.Token,
+      token: 'sk-test-token-12345',
+    },
+  },
+};
+
+export const AiderSession: Story = {
+  args: {
+    agent: {
+      type: AgentType.Aider,
+      authMethod: AgentAuthMethod.Session,
+    },
+  },
+};

package/web/.next/standalone/src/presentation/web/components/features/settings/agent-settings-section.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { useState, useTransition, useRef, useEffect } from 'react';
+import { Bot, Eye, EyeOff, Check } from 'lucide-react';
+import { toast } from 'sonner';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { updateSettingsAction } from '@/app/actions/update-settings';
+import { AgentType, AgentAuthMethod } from '@shepai/core/domain/generated/output';
+import type { AgentConfig } from '@shepai/core/domain/generated/output';
+
+const AGENT_TYPE_OPTIONS = [
+  { value: AgentType.ClaudeCode, label: 'Claude Code' },
+  { value: AgentType.Cursor, label: 'Cursor' },
+  { value: AgentType.GeminiCli, label: 'Gemini CLI' },
+  { value: AgentType.Aider, label: 'Aider' },
+  { value: AgentType.Continue, label: 'Continue' },
+  { value: AgentType.Dev, label: 'Dev' },
+];
+
+const AUTH_METHOD_OPTIONS = [
+  { value: AgentAuthMethod.Session, label: 'Session' },
+  { value: AgentAuthMethod.Token, label: 'Token' },
+];
+
+export interface AgentSettingsSectionProps {
+  agent: AgentConfig;
+}
+
+export function AgentSettingsSection({ agent }: AgentSettingsSectionProps) {
+  const [agentType, setAgentType] = useState(agent.type);
+  const [authMethod, setAuthMethod] = useState(agent.authMethod);
+  const [token, setToken] = useState(agent.token ?? '');
+  const [showToken, setShowToken] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const [showSaved, setShowSaved] = useState(false);
+  const prevPendingRef = useRef(false);
+
+  useEffect(() => {
+    if (prevPendingRef.current && !isPending) {
+      setShowSaved(true);
+      const timer = setTimeout(() => setShowSaved(false), 2000);
+      return () => clearTimeout(timer);
+    }
+    prevPendingRef.current = isPending;
+  }, [isPending]);
+
+  function save(payload: { agent: AgentConfig }) {
+    startTransition(async () => {
+      const result = await updateSettingsAction(payload);
+      if (!result.success) {
+        toast.error(result.error ?? 'Failed to save agent settings');
+      }
+    });
+  }
+
+  function buildPayload(overrides: Partial<AgentConfig> = {}): { agent: AgentConfig } {
+    const merged = { type: agentType, authMethod, ...overrides };
+    const result: Record<string, unknown> = { type: merged.type, authMethod: merged.authMethod };
+    if (merged.authMethod === AgentAuthMethod.Token) {
+      result.token = overrides.token ?? token;
+    }
+    return { agent: result as AgentConfig };
+  }
+
+  function handleAgentTypeChange(value: string) {
+    setAgentType(value as AgentType);
+    save(buildPayload({ type: value as AgentType }));
+  }
+
+  function handleAuthMethodChange(value: string) {
+    setAuthMethod(value as AgentAuthMethod);
+    save(buildPayload({ authMethod: value as AgentAuthMethod }));
+  }
+
+  function handleTokenBlur() {
+    if (token !== (agent.token ?? '')) {
+      save(buildPayload({ token }));
+    }
+  }
+
+  return (
+    <Card id="agent" className="scroll-mt-6" data-testid="agent-settings-section">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Bot className="text-muted-foreground h-4 w-4" />
+            <CardTitle>Preferred Agent</CardTitle>
+          </div>
+          {isPending ? <span className="text-muted-foreground text-xs">Saving...</span> : null}
+          {showSaved && !isPending ? (
+            <span className="flex items-center gap-1 text-xs text-green-600">
+              <Check className="h-3 w-3" />
+              Saved
+            </span>
+          ) : null}
+        </div>
+        <CardDescription>Choose your AI coding agent and authentication method</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="agent-type">Agent Type</Label>
+          <Select value={agentType} onValueChange={handleAgentTypeChange}>
+            <SelectTrigger id="agent-type" data-testid="agent-type-select">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {AGENT_TYPE_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="auth-method">Authentication Method</Label>
+          <Select value={authMethod} onValueChange={handleAuthMethodChange}>
+            <SelectTrigger id="auth-method" data-testid="auth-method-select">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {AUTH_METHOD_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {authMethod === AgentAuthMethod.Token && (
+          <div className="space-y-2">
+            <Label htmlFor="agent-token">API Token</Label>
+            <div className="relative">
+              <Input
+                id="agent-token"
+                data-testid="agent-token-input"
+                type={showToken ? 'text' : 'password'}
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+                onBlur={handleTokenBlur}
+                placeholder="Enter your API token"
+                className="pr-10"
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="absolute top-0 right-0 h-full px-3 hover:bg-transparent"
+                onClick={() => setShowToken(!showToken)}
+                data-testid="toggle-token-visibility"
+                aria-label={showToken ? 'Hide token' : 'Show token'}
+              >
+                {showToken ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </Button>
+            </div>
+            <p className="text-muted-foreground text-xs">
+              Saves automatically when you leave the field
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/settings/database-settings-section.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DatabaseSettingsSection } from './database-settings-section';
+
+const meta = {
+  title: 'Features/Settings/DatabaseSettingsSection',
+  component: DatabaseSettingsSection,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof DatabaseSettingsSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    shepHome: '/home/user/.shep',
+    dbFileSize: '2.4 MB',
+  },
+};
+
+export const LargeDatabase: Story = {
+  args: {
+    shepHome: '/opt/shep/production',
+    dbFileSize: '156.7 MB',
+  },
+};

package/web/.next/standalone/src/presentation/web/components/features/settings/database-settings-section.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { Database, Info } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+
+export interface DatabaseSettingsSectionProps {
+  shepHome: string;
+  dbFileSize: string;
+}
+
+export function DatabaseSettingsSection({ shepHome, dbFileSize }: DatabaseSettingsSectionProps) {
+  return (
+    <Card id="database" className="scroll-mt-6" data-testid="database-settings-section">
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Database className="text-muted-foreground h-4 w-4" />
+          <CardTitle>Database Location</CardTitle>
+        </div>
+        <CardDescription>
+          <span className="inline-flex items-center gap-1">
+            <Info className="h-3 w-3" />
+            Read-only information about your Shep data directory and database
+          </span>
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="bg-muted/50 space-y-3 rounded-b-lg">
+        <div className="space-y-1">
+          <Label className="text-muted-foreground text-xs">SHEP_HOME Directory</Label>
+          <p className="font-mono text-sm" data-testid="shep-home-path">
+            {shepHome}
+          </p>
+        </div>
+        <div className="space-y-1">
+          <Label className="text-muted-foreground text-xs">Database File Size</Label>
+          <p className="text-sm" data-testid="db-file-size">
+            {dbFileSize}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/settings/environment-settings-section.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EnvironmentSettingsSection } from './environment-settings-section';
+import { EditorType } from '@shepai/core/domain/generated/output';
+
+const meta = {
+  title: 'Features/Settings/EnvironmentSettingsSection',
+  component: EnvironmentSettingsSection,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof EnvironmentSettingsSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    environment: {
+      defaultEditor: EditorType.VsCode,
+      shellPreference: 'bash',
+    },
+  },
+};
+
+export const CursorWithZsh: Story = {
+  args: {
+    environment: {
+      defaultEditor: EditorType.Cursor,
+      shellPreference: 'zsh',
+    },
+  },
+};

package/web/.next/standalone/src/presentation/web/components/features/settings/environment-settings-section.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { useState, useTransition, useRef, useEffect } from 'react';
+import { Terminal, Check } from 'lucide-react';
+import { toast } from 'sonner';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { updateSettingsAction } from '@/app/actions/update-settings';
+import { EditorType } from '@shepai/core/domain/generated/output';
+import type { EnvironmentConfig } from '@shepai/core/domain/generated/output';
+
+const EDITOR_OPTIONS = [
+  { value: EditorType.VsCode, label: 'VS Code' },
+  { value: EditorType.Cursor, label: 'Cursor' },
+  { value: EditorType.Windsurf, label: 'Windsurf' },
+  { value: EditorType.Zed, label: 'Zed' },
+  { value: EditorType.Antigravity, label: 'Antigravity' },
+];
+
+const SHELL_OPTIONS = [
+  { value: 'bash', label: 'Bash' },
+  { value: 'zsh', label: 'Zsh' },
+  { value: 'fish', label: 'Fish' },
+];
+
+export interface EnvironmentSettingsSectionProps {
+  environment: EnvironmentConfig;
+}
+
+export function EnvironmentSettingsSection({ environment }: EnvironmentSettingsSectionProps) {
+  const [editor, setEditor] = useState(environment.defaultEditor);
+  const [shell, setShell] = useState(environment.shellPreference);
+  const [isPending, startTransition] = useTransition();
+  const [showSaved, setShowSaved] = useState(false);
+  const prevPendingRef = useRef(false);
+
+  useEffect(() => {
+    if (prevPendingRef.current && !isPending) {
+      setShowSaved(true);
+      const timer = setTimeout(() => setShowSaved(false), 2000);
+      return () => clearTimeout(timer);
+    }
+    prevPendingRef.current = isPending;
+  }, [isPending]);
+
+  function save(payload: { environment: Partial<EnvironmentConfig> }) {
+    startTransition(async () => {
+      const result = await updateSettingsAction(payload);
+      if (!result.success) {
+        toast.error(result.error ?? 'Failed to save IDE & Terminal settings');
+      }
+    });
+  }
+
+  function handleEditorChange(value: string) {
+    setEditor(value as EditorType);
+    save({ environment: { defaultEditor: value as EditorType, shellPreference: shell } });
+  }
+
+  function handleShellChange(value: string) {
+    setShell(value);
+    save({ environment: { defaultEditor: editor, shellPreference: value } });
+  }
+
+  return (
+    <Card id="environment" className="scroll-mt-6" data-testid="environment-settings-section">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Terminal className="text-muted-foreground h-4 w-4" />
+            <CardTitle>IDE & Terminal</CardTitle>
+          </div>
+          {isPending ? <span className="text-muted-foreground text-xs">Saving...</span> : null}
+          {showSaved && !isPending ? (
+            <span className="flex items-center gap-1 text-xs text-green-600">
+              <Check className="h-3 w-3" />
+              Saved
+            </span>
+          ) : null}
+        </div>
+        <CardDescription>Configure your default editor and shell preferences</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="default-editor">Default Editor</Label>
+          <Select value={editor} onValueChange={handleEditorChange}>
+            <SelectTrigger id="default-editor" data-testid="editor-select">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {EDITOR_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="shell-preference">Shell Preference</Label>
+          <Select value={shell} onValueChange={handleShellChange}>
+            <SelectTrigger id="shell-preference" data-testid="shell-select">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {SHELL_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/settings/feature-flags-settings-section.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeatureFlagsSettingsSection } from './feature-flags-settings-section';
+
+const meta = {
+  title: 'Features/Settings/FeatureFlagsSettingsSection',
+  component: FeatureFlagsSettingsSection,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof FeatureFlagsSettingsSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    featureFlags: {
+      skills: false,
+      envDeploy: false,
+      debug: false,
+    },
+  },
+};
+
+export const AllEnabled: Story = {
+  args: {
+    featureFlags: {
+      skills: true,
+      envDeploy: true,
+      debug: true,
+    },
+  },
+};
+
+export const AllDisabled: Story = {
+  args: {
+    featureFlags: {
+      skills: false,
+      envDeploy: false,
+      debug: false,
+    },
+  },
+};