@shepai/cli 1.77.1 → 1.77.2-pr240.88b3534

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

@@ -106,6 +106,16 @@ const allStatesData: FeatureNodeData[] = [
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/data-pipeline',
   },
+  {
+    name: 'Tech Plan Review',
+    description: 'Technical plan awaiting review',
+    featureId: '#bi4',
+    lifecycle: 'planning' as FeatureLifecyclePhase,
+    state: 'action-required',
+    progress: 25,
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/tech-plan',
+  },
   {
     name: 'Merge Review',
     description: 'PR ready for merge approval',
@@ -163,7 +173,9 @@ export const AllStates: Story = {
 
 const allLifecycles: FeatureLifecyclePhase[] = [
   'requirements',
+  'gathering',
   'research',
+  'planning',
   'implementation',
   'review',
   'deploy',
@@ -326,6 +338,18 @@ export const Creating: Story = {
   render: (args) => <FeatureNodeCanvas data={args} />,
 };
 
+export const PlanningActionRequired: Story = {
+  args: {
+    name: 'Tech Plan Review',
+    description: 'Technical planning awaiting review',
+    featureId: '#bi4',
+    lifecycle: 'planning',
+    state: 'action-required',
+    progress: 30,
+  },
+  render: (args) => <FeatureNodeCanvas data={args} />,
+};
+
 export const MergeReviewActionRequired: Story = {
   args: {
     name: 'Merge Review',

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

@@ -31,7 +31,8 @@ function AgentIcon({ agentType, className }: { agentType?: string; className?: s
 function getBadgeIcon(data: FeatureNodeData): LucideIcon {
   const config = featureNodeStateConfig[data.state];
   if (data.state === 'action-required') {
-    if (data.lifecycle === 'requirements') return FileText;
+    if (data.lifecycle === 'requirements' || data.lifecycle === 'gathering') return FileText;
+    if (data.lifecycle === 'planning') return Wrench;
     if (data.lifecycle === 'implementation') return Wrench;
     if (data.lifecycle === 'review') return GitMerge;
   }
@@ -44,13 +45,13 @@ function getActionRequiredBadgeClasses(data: FeatureNodeData): {
   badgeBgClass: string;
 } | null {
   if (data.state !== 'action-required') return null;
-  if (data.lifecycle === 'implementation') {
+  if (data.lifecycle === 'planning' || data.lifecycle === 'implementation') {
     return { badgeClass: 'text-indigo-700', badgeBgClass: 'bg-indigo-50' };
   }
   if (data.lifecycle === 'review') {
     return { badgeClass: 'text-emerald-700', badgeBgClass: 'bg-emerald-50' };
   }
-  return null; // requirements stays amber (default)
+  return null; // requirements/gathering stays amber (default)
 }
 
 function getBadgeText(data: FeatureNodeData): string {
@@ -65,8 +66,10 @@ function getBadgeText(data: FeatureNodeData): string {
     case 'blocked':
       return data.blockedBy ? `Waiting on ${data.blockedBy}` : 'Blocked';
     case 'action-required':
-      if (data.lifecycle === 'requirements') return 'Review Product Requirements';
-      if (data.lifecycle === 'implementation') return 'Review Technical Planning';
+      if (data.lifecycle === 'requirements' || data.lifecycle === 'gathering')
+        return 'Review Product Requirements';
+      if (data.lifecycle === 'planning') return 'Review Technical Planning';
+      if (data.lifecycle === 'implementation') return 'Review Implementation';
       if (data.lifecycle === 'review') return 'Review Merge Request';
       return config.label;
     case 'error':

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

@@ -18,11 +18,12 @@ import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { DeploymentStatusBadge } from '@/components/common/deployment-status-badge';
 import { useDeployAction } from '@/hooks/use-deploy-action';
-import { featureFlags } from '@/lib/feature-flags';
+import { useFeatureFlags } from '@/hooks/feature-flags-context';
 import type { RepositoryNodeData } from './repository-node-config';
 import { useRepositoryActions } from './use-repository-actions';
 
 export function RepositoryNode({ data }: { data: RepositoryNodeData; [key: string]: unknown }) {
+  const featureFlags = useFeatureFlags();
   const [confirmOpen, setConfirmOpen] = useState(false);
   const actions = useRepositoryActions(
     data.repositoryPath ? { repositoryPath: data.repositoryPath } : null

package/web/.next/standalone/src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.tsx

@@ -22,7 +22,7 @@ import { ActionButton } from '@/components/common/action-button';
 import { useFeatureActions } from '@/components/common/feature-drawer/use-feature-actions';
 import { DeploymentStatusBadge } from '@/components/common/deployment-status-badge';
 import { useDeployAction } from '@/hooks/use-deploy-action';
-import { featureFlags } from '@/lib/feature-flags';
+import { useFeatureFlags } from '@/hooks/feature-flags-context';
 import type { ReviewDrawerShellProps } from './review-drawer-shell-config';
 
 export function ReviewDrawerShell({
@@ -38,6 +38,7 @@ export function ReviewDrawerShell({
   isDeleting,
   children,
 }: ReviewDrawerShellProps) {
+  const featureFlags = useFeatureFlags();
   const handleClose = useCallback(() => {
     onClose();
   }, [onClose]);

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,183 @@
+'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 { getAgentTypeIcon } from '@/components/common/feature-node/agent-type-icons';
+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) => {
+                const Icon = getAgentTypeIcon(opt.value);
+                return (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    <span className="flex items-center gap-2">
+                      <Icon className="h-4 w-4 shrink-0" />
+                      {opt.label}
+                    </span>
+                  </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,
+    },
+  },
+};