@nextclaw/ui 0.12.11 → 0.12.13

package/src/{components/config → features/system-status/components}/runtime-control-card.tsx

@@ -4,15 +4,12 @@ import type {
   RuntimeControlView,
   RuntimeLifecycleState,
   RuntimeServiceState
-} from '@/api/runtime-control.types';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { t } from '@/lib/i18n';
-import {
-  useRuntimeControlPanelView,
-  systemStatusManager,
-} from '@/features/system-status';
-import { Loader2, RotateCw, Square, Play } from 'lucide-react';
+} from '@/shared/lib/api';
+import { Button } from '@/shared/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
+import { useRuntimeControlPanelView, systemStatusManager } from '@/features/system-status';
+import { t } from '@/shared/lib/i18n';
+import { Loader2, Play, RotateCw, Square } from 'lucide-react';
 import { toast } from 'sonner';
 
 type VisibleRuntimeAction = {
@@ -23,61 +20,54 @@ type VisibleRuntimeAction = {
   variant?: 'default' | 'secondary' | 'destructive';
 };
 
+const LIFECYCLE_LABEL_KEYS: Partial<Record<RuntimeLifecycleState, string>> = {
+  healthy: 'runtimeControlHealthy',
+  'starting-service': 'runtimeControlStartingService',
+  'restarting-service': 'runtimeControlRestartingService',
+  'stopping-service': 'runtimeControlStoppingService',
+  'restarting-app': 'runtimeControlRestartingApp',
+  recovering: 'runtimeControlRecovering',
+  failed: 'runtimeControlFailed'
+};
+
+const SERVICE_STATE_LABEL_KEYS: Partial<Record<RuntimeServiceState, string>> = {
+  running: 'runtimeControlServiceRunning',
+  stopped: 'runtimeControlServiceStopped',
+  starting: 'runtimeControlServiceStarting',
+  stopping: 'runtimeControlServiceStopping',
+  restarting: 'runtimeControlServiceRestarting'
+};
+
+const ENVIRONMENT_LABEL_KEYS: Record<RuntimeControlView['environment'], string> = {
+  'desktop-embedded': 'runtimeControlEnvironmentDesktop',
+  'managed-local-service': 'runtimeControlEnvironmentManagedService',
+  'self-hosted-web': 'runtimeControlEnvironmentSelfHosted',
+  'shared-web': 'runtimeControlEnvironmentSharedWeb'
+};
+
 function resolveLifecycleLabel(lifecycle: RuntimeLifecycleState): string {
-  if (lifecycle === 'healthy') {
-    return t('runtimeControlHealthy');
-  }
-  if (lifecycle === 'starting-service') {
-    return t('runtimeControlStartingService');
-  }
-  if (lifecycle === 'restarting-service') {
-    return t('runtimeControlRestartingService');
-  }
-  if (lifecycle === 'stopping-service') {
-    return t('runtimeControlStoppingService');
-  }
-  if (lifecycle === 'restarting-app') {
-    return t('runtimeControlRestartingApp');
-  }
-  if (lifecycle === 'recovering') {
-    return t('runtimeControlRecovering');
-  }
-  if (lifecycle === 'failed') {
-    return t('runtimeControlFailed');
-  }
-  return t('runtimeControlUnavailable');
+  return t(LIFECYCLE_LABEL_KEYS[lifecycle] ?? 'runtimeControlUnavailable');
 }
 
 function resolveServiceStateLabel(serviceState: RuntimeServiceState): string {
-  if (serviceState === 'running') {
-    return t('runtimeControlServiceRunning');
-  }
-  if (serviceState === 'stopped') {
-    return t('runtimeControlServiceStopped');
-  }
-  if (serviceState === 'starting') {
-    return t('runtimeControlServiceStarting');
-  }
-  if (serviceState === 'stopping') {
-    return t('runtimeControlServiceStopping');
-  }
-  if (serviceState === 'restarting') {
-    return t('runtimeControlServiceRestarting');
-  }
-  return t('runtimeControlServiceUnknown');
+  return t(SERVICE_STATE_LABEL_KEYS[serviceState] ?? 'runtimeControlServiceUnknown');
 }
 
 function resolveEnvironmentLabel(view: RuntimeControlView): string {
-  if (view.environment === 'desktop-embedded') {
-    return t('runtimeControlEnvironmentDesktop');
-  }
-  if (view.environment === 'managed-local-service') {
-    return t('runtimeControlEnvironmentManagedService');
+  return t(ENVIRONMENT_LABEL_KEYS[view.environment]);
+}
+
+function resolveActionCapability(
+  controlView: RuntimeControlView | null | undefined,
+  action: Extract<RuntimeControlAction, 'start-service' | 'restart-service' | 'stop-service'>
+): RuntimeActionCapability | undefined {
+  if (action === 'start-service') {
+    return controlView?.canStartService;
   }
-  if (view.environment === 'self-hosted-web') {
-    return t('runtimeControlEnvironmentSelfHosted');
+  if (action === 'stop-service') {
+    return controlView?.canStopService;
   }
-  return t('runtimeControlEnvironmentSharedWeb');
+  return controlView?.canRestartService;
 }
 
 function resolveVisibleActions(controlView: RuntimeControlView | undefined): VisibleRuntimeAction[] {
@@ -140,22 +130,24 @@ export function RuntimeControlCard() {
     pendingRestart,
     visibleLifecycle: displayedLifecycle,
     visibleMessage: displayedMessage,
-    visibleServiceState: displayedServiceState,
+    visibleServiceState: displayedServiceState
   } = useRuntimeControlPanelView();
   const visibleActions = resolveVisibleActions(controlView ?? undefined);
 
-  const handleServiceAction = async (action: Extract<RuntimeControlAction, 'start-service' | 'restart-service' | 'stop-service'>) => {
-    const capability = action === 'start-service'
-      ? controlView?.canStartService
-      : action === 'stop-service'
-        ? controlView?.canStopService
-        : controlView?.canRestartService;
+  const handleServiceAction = async (
+    action: Extract<RuntimeControlAction, 'start-service' | 'restart-service' | 'stop-service'>
+  ) => {
+    const capability = resolveActionCapability(controlView, action);
 
     if (!capability?.available) {
       toast.error(capability?.reasonIfUnavailable ?? t('runtimeControlLoadFailed'));
       return;
     }
-    if (action === 'stop-service' && capability.requiresConfirmation && !window.confirm(t('runtimeControlStopServiceConfirm'))) {
+    if (
+      action === 'stop-service' &&
+      capability.requiresConfirmation &&
+      !window.confirm(t('runtimeControlStopServiceConfirm'))
+    ) {
       return;
     }
 
@@ -193,7 +185,7 @@ export function RuntimeControlCard() {
         <CardDescription>{t('runtimeControlDescription')}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
-        <div className="rounded-xl border border-gray-200 bg-gray-50 p-4 space-y-3">
+        <div className="space-y-3 rounded-xl border border-gray-200 bg-gray-50 p-4">
           <div className="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
             <div className="text-sm font-medium text-gray-900">{resolveServiceStateLabel(displayedServiceState)}</div>
             <div className="text-xs text-gray-500">
@@ -202,18 +194,12 @@ export function RuntimeControlCard() {
           </div>
           <p className="text-sm text-gray-600">{displayedMessage}</p>
           <div className="text-xs text-gray-500">{resolveLifecycleLabel(displayedLifecycle)}</div>
-          {controlView?.managementHint ? (
-            <p className="text-xs text-gray-500">{controlView.managementHint}</p>
-          ) : null}
-          {errorMessage && !busy ? (
-            <p className="text-sm text-amber-700">
-              {errorMessage}
-            </p>
-          ) : null}
+          {controlView?.managementHint ? <p className="text-xs text-gray-500">{controlView.managementHint}</p> : null}
+          {errorMessage && !busy ? <p className="text-sm text-amber-700">{errorMessage}</p> : null}
         </div>
 
         {pendingRestart ? (
-          <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 space-y-3">
+          <div className="space-y-3 rounded-xl border border-amber-200 bg-amber-50 p-4">
             <div className="text-sm font-medium text-amber-900">{t('runtimeControlPendingRestartTitle')}</div>
             <p className="text-sm text-amber-800">{t('runtimeControlPendingRestartDescription')}</p>
             {pendingRestart.changedPaths.length > 0 ? (
@@ -222,7 +208,7 @@ export function RuntimeControlCard() {
                   {t('runtimeControlPendingRestartPaths')}
                 </div>
                 <div className="flex flex-wrap gap-2">
-                  {pendingRestart.changedPaths.map((path: string) => (
+                  {pendingRestart.changedPaths.map((path) => (
                     <span
                       key={path}
                       className="rounded-full border border-amber-200 bg-white px-2.5 py-1 text-xs text-amber-800"
@@ -238,8 +224,6 @@ export function RuntimeControlCard() {
 
         <div className="flex flex-col gap-3 md:flex-row md:flex-wrap">
           {visibleActions.map((item) => {
-            const isBusyAction = busyAction === item.action;
-            const disabled = !item.capability.available || busy;
             const handleClick = () => {
               if (item.action === 'restart-app') {
                 void handleRestartApp();
@@ -254,9 +238,9 @@ export function RuntimeControlCard() {
                 type="button"
                 variant={item.variant ?? 'default'}
                 onClick={handleClick}
-                disabled={disabled}
+                disabled={!item.capability.available || busy}
               >
-                <RuntimeActionIcon icon={item.icon} busy={isBusyAction} />
+                <RuntimeActionIcon icon={item.icon} busy={busyAction === item.action} />
                 {item.label}
               </Button>
             );

package/src/{components/config → features/system-status/components}/runtime-presence-card.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { RuntimePresenceCard } from '@/components/config/runtime-presence-card';
-import { setLanguage } from '@/lib/i18n';
+import { RuntimePresenceCard } from './runtime-presence-card';
+import { setLanguage } from '@/shared/lib/i18n';
 import { useDesktopPresenceStore } from '@/platforms/desktop';
 
 const mocks = vi.hoisted(() => ({

package/src/{components/config → features/system-status/components}/runtime-presence-card.tsx

@@ -1,26 +1,39 @@
-import { useEffect } from "react";
+import { type ReactNode, useEffect } from "react";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { NoticeCard } from "@/components/ui/notice-card";
-import { SettingRow } from "@/components/ui/setting-row";
-import { Switch } from "@/components/ui/switch";
+} from "@/shared/components/ui/card";
+import { NoticeCard } from "@/shared/components/ui/notice-card";
+import { SettingRow } from "@/shared/components/ui/setting-row";
+import { Switch } from "@/shared/components/ui/switch";
 import {
   desktopPresenceManager,
   useDesktopPresenceStore,
 } from "@/platforms/desktop";
 import { useSystemStatus } from "@/features/system-status";
-import { t } from "@/lib/i18n";
+import { t } from "@/shared/lib/i18n";
 
 function PresenceHint(props: { title: string; description: string }) {
   const { description, title } = props;
   return <NoticeCard tone="neutral" title={title} description={description} />;
 }
 
+function PresenceCardFrame(props: { children: ReactNode }) {
+  const { children } = props;
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("runtimePresenceTitle")}</CardTitle>
+        <CardDescription>{t("runtimePresenceDescription")}</CardDescription>
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}
+
 export function RuntimePresenceCard() {
   const systemStatus = useSystemStatus();
   const environment = systemStatus.runtimeControlView?.environment;
@@ -39,12 +52,8 @@ export function RuntimePresenceCard() {
 
   if (environment === "desktop-embedded") {
     return (
-      <Card>
-        <CardHeader>
-          <CardTitle>{t("runtimePresenceTitle")}</CardTitle>
-          <CardDescription>{t("runtimePresenceDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
+      <PresenceCardFrame>
+        <div className="space-y-4">
           <NoticeCard
             tone="neutral"
             title={t("runtimePresenceBehaviorLabel")}
@@ -109,71 +118,47 @@ export function RuntimePresenceCard() {
               />
             </div>
           ) : null}
-        </CardContent>
-      </Card>
+        </div>
+      </PresenceCardFrame>
     );
   }
 
   if (environment === "managed-local-service") {
     return (
-      <Card>
-        <CardHeader>
-          <CardTitle>{t("runtimePresenceTitle")}</CardTitle>
-          <CardDescription>{t("runtimePresenceDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent>
+      <PresenceCardFrame>
           <PresenceHint
             title={t("runtimePresenceManagedLocalTitle")}
             description={t("runtimePresenceManagedLocalDescription")}
           />
-        </CardContent>
-      </Card>
+      </PresenceCardFrame>
     );
   }
 
   if (environment === "self-hosted-web") {
     return (
-      <Card>
-        <CardHeader>
-          <CardTitle>{t("runtimePresenceTitle")}</CardTitle>
-          <CardDescription>{t("runtimePresenceDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent>
+      <PresenceCardFrame>
           <PresenceHint
             title={t("runtimePresenceSelfHostedTitle")}
             description={t("runtimePresenceSelfHostedDescription")}
           />
-        </CardContent>
-      </Card>
+      </PresenceCardFrame>
     );
   }
 
   if (environment === "shared-web") {
     return (
-      <Card>
-        <CardHeader>
-          <CardTitle>{t("runtimePresenceTitle")}</CardTitle>
-          <CardDescription>{t("runtimePresenceDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent>
+      <PresenceCardFrame>
           <PresenceHint
             title={t("runtimePresenceSharedTitle")}
             description={t("runtimePresenceSharedDescription")}
           />
-        </CardContent>
-      </Card>
+      </PresenceCardFrame>
     );
   }
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t("runtimePresenceTitle")}</CardTitle>
-        <CardDescription>{t("runtimePresenceDescription")}</CardDescription>
-      </CardHeader>
-      <CardContent>
+    <PresenceCardFrame>
         <p className="text-sm text-gray-500">{t("runtimePresenceLoading")}</p>
-      </CardContent>
-    </Card>
+    </PresenceCardFrame>
   );
 }

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

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { fetchBootstrapStatus } from '@/api/config';
-import type { BootstrapStatusView } from '@/api/types';
+import { fetchBootstrapStatus } from '@/shared/lib/api';
+import type { BootstrapStatusView } from '@/shared/lib/api';
 import {
   toRuntimeControlPanelView,
   toRuntimeStatusBadgeView,

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

@@ -1,12 +1,4 @@
-export {
-  useChatRuntimeAvailability,
-  useRuntimeControlPanelView,
-  useRuntimeStatusBadgeView,
-  useSystemStatus,
-  useSystemStatusSources,
-} from './hooks/use-system-status';
-export {
-  isTransientRuntimeConnectionErrorMessage,
-  systemStatusManager,
-} from './managers/system-status.manager';
+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';