@nextclaw/ui 0.12.10 → 0.12.12

package/src/features/system-status/components/runtime-security-card.tsx

@@ -0,0 +1,263 @@
+import { useState, type ReactNode } from 'react';
+import { Button } from '@/shared/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
+import { Input } from '@/shared/components/ui/input';
+import { Label } from '@/shared/components/ui/label';
+import { Switch } from '@/shared/components/ui/switch';
+import {
+  useAuthStatus,
+  useLogoutAuth,
+  useSetupAuth,
+  useUpdateAuthEnabled,
+  useUpdateAuthPassword
+} from '@/hooks/use-auth';
+import { t } from '@/shared/lib/i18n';
+import { toast } from 'sonner';
+
+const MIN_PASSWORD_LENGTH = 8;
+
+function hasValidPasswordLength(password: string): boolean {
+  return password.trim().length >= MIN_PASSWORD_LENGTH;
+}
+
+function validatePasswordConfirmation(password: string, confirmPassword: string): boolean {
+  if (password !== confirmPassword) {
+    toast.error(t('authPasswordMismatch'));
+    return false;
+  }
+  return true;
+}
+
+function SecurityCardFrame({ children, contentClassName = 'space-y-6' }: { children: ReactNode; contentClassName?: string }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('authSecurityTitle')}</CardTitle>
+        <CardDescription>{t('authSecurityDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent className={contentClassName}>{children}</CardContent>
+    </Card>
+  );
+}
+
+function RuntimeSecuritySetupSection(props: { setupUsername: string; setSetupUsername: (value: string) => void; setupPassword: string; setSetupPassword: (value: string) => void; setupConfirmPassword: string; setSetupConfirmPassword: (value: string) => void; canSubmitSetup: boolean; isPending: boolean; onSubmit: () => void }) {
+  return (
+    <SecurityCardFrame contentClassName="space-y-5">
+      <div className="rounded-xl border border-dashed border-gray-200 bg-gray-50/70 p-4">
+        <p className="text-sm font-medium text-gray-900">{t('authSetupTitle')}</p>
+        <p className="mt-1 text-sm text-gray-500">{t('authSetupDescription')}</p>
+      </div>
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="space-y-2">
+          <Label htmlFor="auth-setup-username">{t('authUsername')}</Label>
+          <Input
+            id="auth-setup-username"
+            value={props.setupUsername}
+            onChange={(event) => props.setSetupUsername(event.target.value)}
+            placeholder={t('authUsernamePlaceholder')}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="auth-setup-password">{t('authPassword')}</Label>
+          <Input
+            id="auth-setup-password"
+            type="password"
+            value={props.setupPassword}
+            onChange={(event) => props.setSetupPassword(event.target.value)}
+            placeholder={t('authPasswordPlaceholder')}
+          />
+        </div>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="auth-setup-confirm">{t('authConfirmPassword')}</Label>
+        <Input
+          id="auth-setup-confirm"
+          type="password"
+          value={props.setupConfirmPassword}
+          onChange={(event) => props.setSetupConfirmPassword(event.target.value)}
+          placeholder={t('authConfirmPasswordPlaceholder')}
+        />
+        <p className="text-xs text-gray-500">{t('authPasswordMinLengthHint')}</p>
+      </div>
+      <Button type="button" disabled={!props.canSubmitSetup} onClick={() => void props.onSubmit()}>
+        {props.isPending ? t('authSettingUp') : t('authSetupAction')}
+      </Button>
+    </SecurityCardFrame>
+  );
+}
+
+function RuntimeSecurityConfiguredSection(props: { authenticated: boolean; enabled: boolean; username: string | null | undefined; nextPassword: string; setNextPassword: (value: string) => void; nextConfirmPassword: string; setNextConfirmPassword: (value: string) => void; canUpdatePassword: boolean; isUpdatingEnabled: boolean; isUpdatingPassword: boolean; isLoggingOut: boolean; onEnabledChange: (enabled: boolean) => void; onPasswordUpdate: () => void; onLogout: () => void }) {
+  return (
+    <SecurityCardFrame>
+      <div className="rounded-xl border border-gray-200 p-4">
+        <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-gray-900">{t('authStatusLabel')}</p>
+            <p className="text-sm text-gray-600">{t('authStatusConfiguredUser').replace('{username}', props.username ?? '')}</p>
+            <p className="text-xs text-gray-500">{t('authUsernameFixedHelp')}</p>
+          </div>
+          <span className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
+            {props.enabled ? t('enabled') : t('disabled')}
+          </span>
+        </div>
+        <div className="mt-4 flex flex-col gap-4 border-t border-gray-200 pt-4 md:flex-row md:items-center md:justify-between">
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-gray-900">{t('authEnableLabel')}</p>
+            <p className="text-xs text-gray-500">{props.enabled ? t('authEnableOnHelp') : t('authEnableOffHelp')}</p>
+          </div>
+          <Switch
+            checked={props.enabled}
+            disabled={props.isUpdatingEnabled}
+            onCheckedChange={(checked) => {
+              void props.onEnabledChange(checked);
+            }}
+          />
+        </div>
+      </div>
+      <div className="rounded-xl border border-gray-200 p-4 space-y-4">
+        <div className="space-y-1">
+          <p className="text-sm font-medium text-gray-900">{t('authPasswordSectionTitle')}</p>
+          <p className="text-xs text-gray-500">{t('authPasswordSectionDescription')}</p>
+        </div>
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="auth-password-next">{t('authPassword')}</Label>
+            <Input
+              id="auth-password-next"
+              type="password"
+              value={props.nextPassword}
+              onChange={(event) => props.setNextPassword(event.target.value)}
+              placeholder={t('authPasswordPlaceholder')}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="auth-password-confirm">{t('authConfirmPassword')}</Label>
+            <Input
+              id="auth-password-confirm"
+              type="password"
+              value={props.nextConfirmPassword}
+              onChange={(event) => props.setNextConfirmPassword(event.target.value)}
+              placeholder={t('authConfirmPasswordPlaceholder')}
+            />
+          </div>
+        </div>
+        <div className="flex flex-wrap items-center gap-3">
+          <Button type="button" disabled={!props.canUpdatePassword} onClick={() => void props.onPasswordUpdate()}>
+            {props.isUpdatingPassword ? t('authPasswordUpdating') : t('authPasswordAction')}
+          </Button>
+          {props.enabled && props.authenticated ? (
+            <Button type="button" variant="outline" disabled={props.isLoggingOut} onClick={() => void props.onLogout()}>
+              {props.isLoggingOut ? t('authLoggingOut') : t('authLogoutAction')}
+            </Button>
+          ) : null}
+        </div>
+        <p className="text-xs text-gray-500">{t('authSessionMemoryNotice')}</p>
+      </div>
+    </SecurityCardFrame>
+  );
+}
+
+export function RuntimeSecurityCard() {
+  const authStatus = useAuthStatus();
+  const setupAuth = useSetupAuth();
+  const updateAuthEnabled = useUpdateAuthEnabled();
+  const updateAuthPassword = useUpdateAuthPassword();
+  const logoutAuth = useLogoutAuth();
+  const [setupUsername, setSetupUsername] = useState('');
+  const [setupPassword, setSetupPassword] = useState('');
+  const [setupConfirmPassword, setSetupConfirmPassword] = useState('');
+  const [nextPassword, setNextPassword] = useState('');
+  const [nextConfirmPassword, setNextConfirmPassword] = useState('');
+  const auth = authStatus.data;
+  const canSubmitSetup = setupUsername.trim().length > 0 && hasValidPasswordLength(setupPassword) && setupPassword === setupConfirmPassword && !setupAuth.isPending;
+  const canUpdatePassword = hasValidPasswordLength(nextPassword) && nextPassword === nextConfirmPassword && !updateAuthPassword.isPending;
+
+  const handleSetup = async () => {
+    if (!validatePasswordConfirmation(setupPassword, setupConfirmPassword)) {
+      return;
+    }
+    try {
+      await setupAuth.mutateAsync({ username: setupUsername.trim(), password: setupPassword });
+      setSetupPassword('');
+      setSetupConfirmPassword('');
+    } catch {
+      // handled by mutation toast
+    }
+  };
+
+  const handlePasswordUpdate = async () => {
+    if (!validatePasswordConfirmation(nextPassword, nextConfirmPassword)) {
+      return;
+    }
+    try {
+      await updateAuthPassword.mutateAsync({ password: nextPassword });
+      setNextPassword('');
+      setNextConfirmPassword('');
+    } catch {
+      // handled by mutation toast
+    }
+  };
+
+  const handleEnabledChange = async (enabled: boolean) => {
+    try {
+      await updateAuthEnabled.mutateAsync({ enabled });
+    } catch {
+      // handled by mutation toast
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      await logoutAuth.mutateAsync();
+    } catch {
+      // handled by mutation toast
+    }
+  };
+
+  if (authStatus.isLoading && !auth) {
+    return <SecurityCardFrame contentClassName="text-sm text-gray-500">{t('loading')}</SecurityCardFrame>;
+  }
+  if (authStatus.isError || !auth) {
+    return (
+      <SecurityCardFrame contentClassName="space-y-4">
+        <p className="text-sm text-gray-500">{t('authStatusLoadFailed')}</p>
+        <Button variant="outline" onClick={() => void authStatus.refetch()}>
+          {t('authRetryStatus')}
+        </Button>
+      </SecurityCardFrame>
+    );
+  }
+  if (!auth.configured) {
+    return (
+      <RuntimeSecuritySetupSection
+        setupUsername={setupUsername}
+        setSetupUsername={setSetupUsername}
+        setupPassword={setupPassword}
+        setSetupPassword={setSetupPassword}
+        setupConfirmPassword={setupConfirmPassword}
+        setSetupConfirmPassword={setSetupConfirmPassword}
+        canSubmitSetup={canSubmitSetup}
+        isPending={setupAuth.isPending}
+        onSubmit={handleSetup}
+      />
+    );
+  }
+  return (
+    <RuntimeSecurityConfiguredSection
+      authenticated={auth.authenticated}
+      enabled={auth.enabled}
+      username={auth.username}
+      nextPassword={nextPassword}
+      setNextPassword={setNextPassword}
+      nextConfirmPassword={nextConfirmPassword}
+      setNextConfirmPassword={setNextConfirmPassword}
+      canUpdatePassword={canUpdatePassword}
+      isUpdatingEnabled={updateAuthEnabled.isPending}
+      isUpdatingPassword={updateAuthPassword.isPending}
+      isLoggingOut={logoutAuth.isPending}
+      onEnabledChange={handleEnabledChange}
+      onPasswordUpdate={handlePasswordUpdate}
+      onLogout={handleLogout}
+    />
+  );
+}

package/src/{components/config → features/system-status/components}/security-config.tsx

@@ -1,6 +1,6 @@
-import { RuntimeSecurityCard } from '@/components/config/runtime-security-card';
-import { PageHeader, PageLayout } from '@/components/layout/page-layout';
-import { t } from '@/lib/i18n';
+import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { t } from '@/shared/lib/i18n';
+import { RuntimeSecurityCard } from '@/features/system-status/components/runtime-security-card';
 
 export function SecurityConfig() {
   return (

package/src/features/system-status/hooks/use-system-status.ts

@@ -0,0 +1,104 @@
+import { useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { fetchBootstrapStatus } from '@/shared/lib/api';
+import type { BootstrapStatusView } from '@/shared/lib/api';
+import {
+  toRuntimeControlPanelView,
+  toRuntimeStatusBadgeView,
+  toSystemStatusView,
+} from '@/features/system-status/utils/system-status.utils';
+import { systemStatusManager } from '@/features/system-status/managers/system-status.manager';
+import { useSystemStatusStore } from '@/features/system-status/stores/system-status.store';
+
+function createPendingBootstrapStatus(): BootstrapStatusView {
+  return {
+    phase: 'kernel-starting',
+    ncpAgent: {
+      state: 'pending',
+    },
+    pluginHydration: {
+      state: 'pending',
+      loadedPluginCount: 0,
+      totalPluginCount: 0,
+    },
+    channels: {
+      state: 'pending',
+      enabled: [],
+    },
+    remote: {
+      state: 'pending',
+    },
+  };
+}
+
+export function useSystemStatusSources() {
+  const runtimeBootstrapStatus = useQuery({
+    queryKey: ['runtime-bootstrap-status'],
+    queryFn: fetchBootstrapStatus,
+    placeholderData: createPendingBootstrapStatus,
+    refetchInterval: (query) => {
+      return systemStatusManager.getRuntimeBootstrapPollInterval(
+        query.state.data
+      );
+    },
+    refetchIntervalInBackground: true,
+    retry: false,
+    refetchOnWindowFocus: true,
+  });
+  const runtimeControl = useQuery({
+    queryKey: ['runtime-control'],
+    queryFn: async () => await systemStatusManager.getRuntimeControl(),
+    staleTime: 5_000,
+    refetchOnWindowFocus: true,
+  });
+
+  useEffect(() => {
+    if (runtimeBootstrapStatus.data) {
+      systemStatusManager.reportBootstrapStatus(runtimeBootstrapStatus.data);
+    }
+  }, [runtimeBootstrapStatus.data]);
+
+  useEffect(() => {
+    if (runtimeBootstrapStatus.error) {
+      systemStatusManager.reportBootstrapQueryError(runtimeBootstrapStatus.error);
+    }
+  }, [runtimeBootstrapStatus.error]);
+
+  useEffect(() => {
+    if (runtimeControl.data) {
+      systemStatusManager.reportRuntimeControlView(runtimeControl.data);
+    }
+  }, [runtimeControl.data]);
+
+  useEffect(() => {
+    if (runtimeControl.error) {
+      systemStatusManager.reportRuntimeControlError(runtimeControl.error);
+    }
+  }, [runtimeControl.error]);
+}
+
+export function useSystemStatus() {
+  const state = useSystemStatusStore((store) => store.state);
+  return toSystemStatusView(state);
+}
+
+export function useChatRuntimeAvailability() {
+  const state = useSystemStatusStore((store) => store.state);
+  const view = toSystemStatusView(state);
+  return {
+    isBlocked: view.isChatBlocked,
+    message: view.chatMessage,
+    phase: view.phase,
+    lastReadyAt: view.lastReadyAt,
+  };
+}
+
+export function useRuntimeStatusBadgeView() {
+  const state = useSystemStatusStore((store) => store.state);
+  return toRuntimeStatusBadgeView(state);
+}
+
+export function useRuntimeControlPanelView() {
+  const state = useSystemStatusStore((store) => store.state);
+  return toRuntimeControlPanelView(state);
+}

package/src/features/system-status/index.ts

@@ -0,0 +1,4 @@
+export { useChatRuntimeAvailability, useRuntimeControlPanelView, useRuntimeStatusBadgeView, useSystemStatus, useSystemStatusSources } from './hooks/use-system-status';
+export { isTransientRuntimeConnectionErrorMessage, systemStatusManager } from './managers/system-status.manager';
+export { useSystemStatusStore } from './stores/system-status.store';
+export { SecurityConfig } from './components/security-config';

package/src/features/system-status/managers/system-status.manager.bootstrap-polling.test.ts

@@ -0,0 +1,126 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { systemStatusManager } from './system-status.manager';
+import { useSystemStatusStore } from '@/features/system-status/stores/system-status.store';
+
+describe('getRuntimeBootstrapPollInterval', () => {
+  beforeEach(() => {
+    useSystemStatusStore.setState({
+      state: {
+        ...useSystemStatusStore.getState().state,
+        lifecyclePhase: 'cold-starting',
+        hasReachedReady: false,
+        activeSystemAction: null,
+      },
+    });
+  });
+
+  it('keeps polling while bootstrap status is missing', () => {
+    expect(systemStatusManager.getRuntimeBootstrapPollInterval(undefined)).toBe(
+      500
+    );
+  });
+
+  it('keeps polling while ncp agent is still initializing', () => {
+    expect(
+      systemStatusManager.getRuntimeBootstrapPollInterval({
+        phase: 'shell-ready',
+        ncpAgent: {
+          state: 'running',
+        },
+        pluginHydration: {
+          state: 'pending',
+          loadedPluginCount: 0,
+          totalPluginCount: 0,
+        },
+        channels: {
+          state: 'pending',
+          enabled: [],
+        },
+        remote: {
+          state: 'pending',
+        },
+      })
+    ).toBe(500);
+  });
+
+  it('continues polling even when bootstrap status reports an ncp agent error', () => {
+    expect(
+      systemStatusManager.getRuntimeBootstrapPollInterval({
+        phase: 'error',
+        ncpAgent: {
+          state: 'error',
+          error: 'startup failed',
+        },
+        pluginHydration: {
+          state: 'pending',
+          loadedPluginCount: 0,
+          totalPluginCount: 0,
+        },
+        channels: {
+          state: 'pending',
+          enabled: [],
+        },
+        remote: {
+          state: 'pending',
+        },
+        lastError: 'startup failed',
+      })
+    ).toBe(500);
+  });
+
+  it('stops polling once the ncp agent is ready', () => {
+    expect(
+      systemStatusManager.getRuntimeBootstrapPollInterval({
+        phase: 'ready',
+        ncpAgent: {
+          state: 'ready',
+        },
+        pluginHydration: {
+          state: 'ready',
+          loadedPluginCount: 1,
+          totalPluginCount: 1,
+        },
+        channels: {
+          state: 'ready',
+          enabled: [],
+        },
+        remote: {
+          state: 'disabled',
+        },
+      })
+    ).toBe(false);
+  });
+
+  it('keeps polling while the runtime is recovering even if the last bootstrap status was ready', () => {
+    useSystemStatusStore.setState({
+      state: {
+        ...useSystemStatusStore.getState().state,
+        lifecyclePhase: 'recovering',
+        hasReachedReady: true,
+        lastReadyAt: Date.now(),
+        recoveryStartedAt: Date.now(),
+      },
+    });
+
+    expect(
+      systemStatusManager.getRuntimeBootstrapPollInterval({
+        phase: 'ready',
+        ncpAgent: {
+          state: 'ready',
+        },
+        pluginHydration: {
+          state: 'ready',
+          loadedPluginCount: 1,
+          totalPluginCount: 1,
+        },
+        channels: {
+          state: 'ready',
+          enabled: [],
+        },
+        remote: {
+          state: 'disabled',
+        },
+      })
+    ).toBe(500);
+  });
+});

package/src/features/system-status/managers/system-status.manager.test.ts

@@ -0,0 +1,142 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { BootstrapStatusView } from '@/shared/lib/api';
+import { appQueryClient } from '@/app-query-client';
+import { t } from '@/shared/lib/i18n';
+import {
+  isTransientRuntimeConnectionErrorMessage,
+  systemStatusManager,
+} from './system-status.manager';
+import { useSystemStatusStore } from '@/features/system-status/stores/system-status.store';
+
+const readyBootstrapStatus: BootstrapStatusView = {
+  phase: 'ready',
+  ncpAgent: {
+    state: 'ready',
+  },
+  pluginHydration: {
+    state: 'ready',
+    loadedPluginCount: 1,
+    totalPluginCount: 1,
+  },
+  channels: {
+    state: 'ready',
+    enabled: [],
+  },
+  remote: {
+    state: 'disabled',
+  },
+};
+
+describe('systemStatusManager', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    systemStatusManager.resetForTests();
+  });
+
+  afterEach(() => {
+    systemStatusManager.resetForTests();
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it('keeps cold start in cold-starting when transport fails before the first ready state', () => {
+    expect(
+      systemStatusManager.reportTransportFailure(new Error('Failed to fetch'))
+    ).toBe(true);
+
+    expect(useSystemStatusStore.getState().state.lifecyclePhase).toBe(
+      'cold-starting'
+    );
+  });
+
+  it('enters startup-failed when bootstrap explicitly reports an error before the first ready state', () => {
+    systemStatusManager.reportBootstrapStatus({
+      phase: 'error',
+      ncpAgent: {
+        state: 'error',
+        error: 'startup failed',
+      },
+      pluginHydration: {
+        state: 'pending',
+        loadedPluginCount: 0,
+        totalPluginCount: 0,
+      },
+      channels: {
+        state: 'pending',
+        enabled: [],
+      },
+      remote: {
+        state: 'pending',
+      },
+      lastError: 'startup failed',
+    });
+
+    expect(useSystemStatusStore.getState().state.lifecyclePhase).toBe(
+      'startup-failed'
+    );
+  });
+
+  it('enters recovering only after the page has previously reached ready', async () => {
+    const invalidateQueriesSpy = vi
+      .spyOn(appQueryClient, 'invalidateQueries')
+      .mockResolvedValue(undefined as never);
+    const refetchQueriesSpy = vi
+      .spyOn(appQueryClient, 'refetchQueries')
+      .mockResolvedValue(undefined as never);
+
+    systemStatusManager.reportBootstrapStatus(readyBootstrapStatus);
+    systemStatusManager.handleConnectionInterrupted('websocket error');
+
+    expect(useSystemStatusStore.getState().state.lifecyclePhase).toBe(
+      'recovering'
+    );
+
+    systemStatusManager.reportBootstrapStatus(readyBootstrapStatus);
+
+    expect(useSystemStatusStore.getState().state.lifecyclePhase).toBe('ready');
+    expect(invalidateQueriesSpy).toHaveBeenCalled();
+    expect(refetchQueriesSpy).toHaveBeenCalledWith({ type: 'active' });
+  });
+
+  it('marks recovery as stalled after the timeout window elapses', async () => {
+    systemStatusManager.reportBootstrapStatus(readyBootstrapStatus);
+    systemStatusManager.handleConnectionInterrupted('websocket error');
+
+    await vi.advanceTimersByTimeAsync(30_000);
+
+    expect(useSystemStatusStore.getState().state.lifecyclePhase).toBe('stalled');
+  });
+
+  it('maps transient chat errors to friendly recovery copy while recovering', () => {
+    systemStatusManager.reportBootstrapStatus(readyBootstrapStatus);
+    systemStatusManager.handleConnectionInterrupted('Failed to fetch');
+
+    expect(
+      systemStatusManager.getDisplayMessage(
+        'NCP fetch failed for POST /api/ncp/agent: Error: Failed to fetch'
+      )
+    ).toBe(t('runtimeControlRecoveringHelp'));
+  });
+
+  it('suppresses transient transport errors after recovery stalls', async () => {
+    systemStatusManager.reportBootstrapStatus(readyBootstrapStatus);
+    systemStatusManager.handleConnectionInterrupted('Failed to fetch');
+
+    await vi.advanceTimersByTimeAsync(30_000);
+
+    expect(
+      systemStatusManager.getDisplayMessage(
+        'NCP fetch failed for POST /api/ncp/agent: Error: Failed to fetch'
+      )
+    ).toBeNull();
+  });
+
+  it('keeps only transport-level failures in the recovery flow', () => {
+    expect(isTransientRuntimeConnectionErrorMessage('Failed to fetch')).toBe(
+      true
+    );
+    expect(
+      isTransientRuntimeConnectionErrorMessage('HTTP 500 internal server error')
+    ).toBe(false);
+  });
+});