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

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

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

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState, useTransition, useRef, useEffect } from 'react';
+import { Bell, 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 { Separator } from '@/components/ui/separator';
+import { updateSettingsAction } from '@/app/actions/update-settings';
+import type { NotificationPreferences } from '@shepai/core/domain/generated/output';
+
+const AGENT_EVENT_TOGGLES = [
+  { key: 'agentStarted', label: 'Agent Started' },
+  { key: 'phaseCompleted', label: 'Phase Completed' },
+  { key: 'waitingApproval', label: 'Waiting Approval' },
+  { key: 'agentCompleted', label: 'Agent Completed' },
+  { key: 'agentFailed', label: 'Agent Failed' },
+] as const;
+
+const PR_EVENT_TOGGLES = [
+  { key: 'prMerged', label: 'PR Merged' },
+  { key: 'prClosed', label: 'PR Closed' },
+  { key: 'prChecksPassed', label: 'PR Checks Passed' },
+  { key: 'prChecksFailed', label: 'PR Checks Failed' },
+] as const;
+
+export interface NotificationSettingsSectionProps {
+  notifications: NotificationPreferences;
+}
+
+export function NotificationSettingsSection({ notifications }: NotificationSettingsSectionProps) {
+  const [inApp, setInApp] = useState(notifications.inApp.enabled);
+  const [browser, setBrowser] = useState(notifications.browser.enabled);
+  const [desktop, setDesktop] = useState(notifications.desktop.enabled);
+  const [events, setEvents] = useState({ ...notifications.events });
+  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: { notifications: Partial<NotificationPreferences> }) {
+    startTransition(async () => {
+      const result = await updateSettingsAction(payload);
+      if (!result.success) {
+        toast.error(result.error ?? 'Failed to save notification settings');
+      }
+    });
+  }
+
+  function buildFullPayload(
+    overrides: {
+      inApp?: boolean;
+      browser?: boolean;
+      desktop?: boolean;
+      events?: typeof events;
+    } = {}
+  ) {
+    return {
+      notifications: {
+        inApp: { enabled: overrides.inApp ?? inApp },
+        browser: { enabled: overrides.browser ?? browser },
+        desktop: { enabled: overrides.desktop ?? desktop },
+        events: overrides.events ?? events,
+      },
+    };
+  }
+
+  function handleChannelChange(
+    channel: 'inApp' | 'browser' | 'desktop',
+    setter: (v: boolean) => void,
+    value: boolean
+  ) {
+    setter(value);
+    save(buildFullPayload({ [channel]: value }));
+  }
+
+  function handleEventChange(key: string, value: boolean) {
+    const newEvents = { ...events, [key]: value };
+    setEvents(newEvents);
+    save(buildFullPayload({ events: newEvents }));
+  }
+
+  return (
+    <Card id="notifications" className="scroll-mt-6" data-testid="notification-settings-section">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Bell className="text-muted-foreground h-4 w-4" />
+            <CardTitle>Notifications</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 notification channels and event preferences</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-3">
+          <h3 className="text-sm font-semibold">Channels</h3>
+          <div className="flex items-center justify-between">
+            <Label htmlFor="notif-in-app">In-App</Label>
+            <Switch
+              id="notif-in-app"
+              data-testid="switch-in-app"
+              checked={inApp}
+              onCheckedChange={(v) => handleChannelChange('inApp', setInApp, v)}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <Label htmlFor="notif-browser">Browser</Label>
+            <Switch
+              id="notif-browser"
+              data-testid="switch-browser"
+              checked={browser}
+              onCheckedChange={(v) => handleChannelChange('browser', setBrowser, v)}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <Label htmlFor="notif-desktop">Desktop</Label>
+            <Switch
+              id="notif-desktop"
+              data-testid="switch-desktop"
+              checked={desktop}
+              onCheckedChange={(v) => handleChannelChange('desktop', setDesktop, v)}
+            />
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="space-y-3">
+          <h3 className="text-sm font-semibold">Agent Events</h3>
+          {AGENT_EVENT_TOGGLES.map(({ key, label }) => (
+            <div key={key} className="flex items-center justify-between">
+              <Label htmlFor={`notif-event-${key}`}>{label}</Label>
+              <Switch
+                id={`notif-event-${key}`}
+                data-testid={`switch-event-${key}`}
+                checked={events[key]}
+                onCheckedChange={(v) => handleEventChange(key, v)}
+              />
+            </div>
+          ))}
+        </div>
+
+        <Separator />
+
+        <div className="space-y-3">
+          <h3 className="text-sm font-semibold">PR Events</h3>
+          {PR_EVENT_TOGGLES.map(({ key, label }) => (
+            <div key={key} className="flex items-center justify-between">
+              <Label htmlFor={`notif-event-${key}`}>{label}</Label>
+              <Switch
+                id={`notif-event-${key}`}
+                data-testid={`switch-event-${key}`}
+                checked={events[key]}
+                onCheckedChange={(v) => handleEventChange(key, v)}
+              />
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/settings/settings-page-client.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SettingsPageClient } from './settings-page-client';
+import { createDefaultSettings } from '@shepai/core/domain/factories/settings-defaults.factory';
+import { AgentType, AgentAuthMethod } from '@shepai/core/domain/generated/output';
+
+const defaultSettings = createDefaultSettings();
+
+const meta = {
+  title: 'Features/Settings/SettingsPageClient',
+  component: SettingsPageClient,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof SettingsPageClient>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    settings: defaultSettings,
+    shepHome: '/home/user/.shep',
+    dbFileSize: '2.4 MB',
+  },
+};
+
+export const AllSections: Story = {
+  args: {
+    settings: {
+      ...defaultSettings,
+      agent: {
+        type: AgentType.GeminiCli,
+        authMethod: AgentAuthMethod.Token,
+        token: 'sk-test-token-12345',
+      },
+      featureFlags: {
+        skills: true,
+        envDeploy: true,
+        debug: false,
+      },
+    },
+    shepHome: '/opt/shep',
+    dbFileSize: '12.8 MB',
+  },
+};

package/web/.next/standalone/src/presentation/web/components/features/settings/settings-page-client.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Bot, Terminal, GitBranch, Bell, Flag, Database } from 'lucide-react';
+import { AgentSettingsSection } from './agent-settings-section';
+import { EnvironmentSettingsSection } from './environment-settings-section';
+import { WorkflowSettingsSection } from './workflow-settings-section';
+import { NotificationSettingsSection } from './notification-settings-section';
+import { FeatureFlagsSettingsSection } from './feature-flags-settings-section';
+import { DatabaseSettingsSection } from './database-settings-section';
+import type { Settings } from '@shepai/core/domain/generated/output';
+
+const SECTIONS = [
+  { id: 'agent', label: 'Agent', icon: Bot },
+  { id: 'environment', label: 'IDE & Terminal', icon: Terminal },
+  { id: 'workflow', label: 'Workflow', icon: GitBranch },
+  { id: 'notifications', label: 'Notifications', icon: Bell },
+  { id: 'feature-flags', label: 'Feature Flags', icon: Flag },
+  { id: 'database', label: 'Database', icon: Database },
+] as const;
+
+export interface SettingsPageClientProps {
+  settings: Settings;
+  shepHome: string;
+  dbFileSize: string;
+}
+
+export function SettingsPageClient({ settings, shepHome, dbFileSize }: SettingsPageClientProps) {
+  const featureFlags = settings.featureFlags ?? { skills: false, envDeploy: false, debug: false };
+
+  return (
+    <div data-testid="settings-page-client" className="space-y-6">
+      <div>
+        <h1 className="text-lg font-semibold tracking-tight">Settings</h1>
+        <p className="text-muted-foreground text-sm">Manage your preferences and configuration</p>
+      </div>
+
+      <nav className="flex flex-wrap gap-1" aria-label="Settings sections">
+        {SECTIONS.map(({ id, label, icon: Icon }) => (
+          <a
+            key={id}
+            href={`#${id}`}
+            className="text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors"
+          >
+            <Icon className="h-3 w-3" />
+            {label}
+          </a>
+        ))}
+      </nav>
+
+      <div className="max-w-2xl space-y-6">
+        <AgentSettingsSection agent={settings.agent} />
+        <EnvironmentSettingsSection environment={settings.environment} />
+        <WorkflowSettingsSection workflow={settings.workflow} />
+        <NotificationSettingsSection notifications={settings.notifications} />
+        <FeatureFlagsSettingsSection featureFlags={featureFlags} />
+        <DatabaseSettingsSection shepHome={shepHome} dbFileSize={dbFileSize} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { WorkflowSettingsSection } from './workflow-settings-section';
+
+const meta = {
+  title: 'Features/Settings/WorkflowSettingsSection',
+  component: WorkflowSettingsSection,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof WorkflowSettingsSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    workflow: {
+      openPrOnImplementationComplete: false,
+      approvalGateDefaults: {
+        allowPrd: false,
+        allowPlan: false,
+        allowMerge: false,
+        pushOnImplementationComplete: false,
+      },
+    },
+  },
+};
+
+export const AllEnabled: Story = {
+  args: {
+    workflow: {
+      openPrOnImplementationComplete: true,
+      approvalGateDefaults: {
+        allowPrd: true,
+        allowPlan: true,
+        allowMerge: true,
+        pushOnImplementationComplete: true,
+      },
+      ciMaxFixAttempts: 3,
+      ciWatchTimeoutMs: 300000,
+      ciLogMaxChars: 50000,
+    },
+  },
+};
+
+export const WithCiSettings: Story = {
+  args: {
+    workflow: {
+      openPrOnImplementationComplete: false,
+      approvalGateDefaults: {
+        allowPrd: false,
+        allowPlan: false,
+        allowMerge: false,
+        pushOnImplementationComplete: false,
+      },
+      ciMaxFixAttempts: 5,
+      ciWatchTimeoutMs: 600000,
+      ciLogMaxChars: 100000,
+    },
+  },
+};