@shepai/cli 1.77.1 → 1.77.2-pr240.0ae5c6e

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,
+    },
+  },
+};

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

@@ -0,0 +1,94 @@
+'use client';
+
+import { useState, useTransition, useRef, useEffect } from 'react';
+import { Flag, 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 { Switch } from '@/components/ui/switch';
+import { updateSettingsAction } from '@/app/actions/update-settings';
+import type { FeatureFlags } from '@shepai/core/domain/generated/output';
+
+const FLAG_DESCRIPTIONS: Record<keyof FeatureFlags, string> = {
+  skills: 'Enable Skills navigation and functionality in the web UI',
+  envDeploy: 'Enable environment deployment features in the web UI',
+  debug: 'Enable debug UI elements and verbose client-side logging',
+};
+
+const FLAG_LABELS: Record<keyof FeatureFlags, string> = {
+  skills: 'Skills',
+  envDeploy: 'Deployments',
+  debug: 'Debug',
+};
+
+const FLAG_KEYS: (keyof FeatureFlags)[] = ['skills', 'envDeploy', 'debug'];
+
+export interface FeatureFlagsSettingsSectionProps {
+  featureFlags: FeatureFlags;
+}
+
+export function FeatureFlagsSettingsSection({ featureFlags }: FeatureFlagsSettingsSectionProps) {
+  const [flags, setFlags] = useState<FeatureFlags>({ ...featureFlags });
+  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 handleFlagChange(key: keyof FeatureFlags, value: boolean) {
+    const newFlags = { ...flags, [key]: value };
+    setFlags(newFlags);
+    startTransition(async () => {
+      const result = await updateSettingsAction({ featureFlags: newFlags });
+      if (!result.success) {
+        toast.error(result.error ?? 'Failed to save feature flags');
+      }
+    });
+  }
+
+  return (
+    <Card id="feature-flags" className="scroll-mt-6" data-testid="feature-flags-settings-section">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Flag className="text-muted-foreground h-4 w-4" />
+            <CardTitle>Feature Flags</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>
+          Toggle experimental and optional features. Changes take effect after page navigation.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {FLAG_KEYS.map((key) => (
+          <div key={key} className="flex items-center justify-between gap-4">
+            <div className="space-y-0.5">
+              <Label htmlFor={`flag-${key}`}>{FLAG_LABELS[key]}</Label>
+              <p className="text-muted-foreground text-xs">{FLAG_DESCRIPTIONS[key]}</p>
+            </div>
+            <Switch
+              id={`flag-${key}`}
+              data-testid={`switch-flag-${key}`}
+              checked={flags[key]}
+              onCheckedChange={(v) => handleFlagChange(key, v)}
+            />
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NotificationSettingsSection } from './notification-settings-section';
+
+const meta = {
+  title: 'Features/Settings/NotificationSettingsSection',
+  component: NotificationSettingsSection,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof NotificationSettingsSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const allEvents = {
+  agentStarted: true,
+  phaseCompleted: true,
+  waitingApproval: true,
+  agentCompleted: true,
+  agentFailed: true,
+  prMerged: true,
+  prClosed: true,
+  prChecksPassed: true,
+  prChecksFailed: true,
+};
+
+const noEvents = {
+  agentStarted: false,
+  phaseCompleted: false,
+  waitingApproval: false,
+  agentCompleted: false,
+  agentFailed: false,
+  prMerged: false,
+  prClosed: false,
+  prChecksPassed: false,
+  prChecksFailed: false,
+};
+
+export const Default: Story = {
+  args: {
+    notifications: {
+      inApp: { enabled: true },
+      browser: { enabled: true },
+      desktop: { enabled: false },
+      events: allEvents,
+    },
+  },
+};
+
+export const AllEnabled: Story = {
+  args: {
+    notifications: {
+      inApp: { enabled: true },
+      browser: { enabled: true },
+      desktop: { enabled: true },
+      events: allEvents,
+    },
+  },
+};
+
+export const AllDisabled: Story = {
+  args: {
+    notifications: {
+      inApp: { enabled: false },
+      browser: { enabled: false },
+      desktop: { enabled: false },
+      events: noEvents,
+    },
+  },
+};