@nextclaw/ui 0.12.10 → 0.12.12

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

@@ -0,0 +1,260 @@
+import type {
+  RuntimeActionCapability,
+  RuntimeControlAction,
+  RuntimeControlView,
+  RuntimeLifecycleState,
+  RuntimeServiceState
+} 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 = {
+  action: RuntimeControlAction;
+  capability: RuntimeActionCapability;
+  label: string;
+  icon: 'play' | 'rotate' | 'square';
+  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 {
+  return t(LIFECYCLE_LABEL_KEYS[lifecycle] ?? 'runtimeControlUnavailable');
+}
+
+function resolveServiceStateLabel(serviceState: RuntimeServiceState): string {
+  return t(SERVICE_STATE_LABEL_KEYS[serviceState] ?? 'runtimeControlServiceUnknown');
+}
+
+function resolveEnvironmentLabel(view: RuntimeControlView): string {
+  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 (action === 'stop-service') {
+    return controlView?.canStopService;
+  }
+  return controlView?.canRestartService;
+}
+
+function resolveVisibleActions(controlView: RuntimeControlView | undefined): VisibleRuntimeAction[] {
+  if (!controlView) {
+    return [];
+  }
+
+  const actions: VisibleRuntimeAction[] = [
+    {
+      action: 'start-service',
+      capability: controlView.canStartService,
+      label: t('runtimeControlStartService'),
+      icon: 'play'
+    },
+    {
+      action: 'restart-service',
+      capability: controlView.canRestartService,
+      label: t('runtimeControlRestartService'),
+      icon: 'rotate'
+    },
+    {
+      action: 'stop-service',
+      capability: controlView.canStopService,
+      label: t('runtimeControlStopService'),
+      icon: 'square',
+      variant: 'destructive'
+    },
+    {
+      action: 'restart-app',
+      capability: controlView.canRestartApp,
+      label: t('runtimeControlRestartApp'),
+      icon: 'rotate',
+      variant: 'secondary'
+    }
+  ];
+
+  return actions.filter((item) => item.capability.available || Boolean(item.capability.reasonIfUnavailable));
+}
+
+function RuntimeActionIcon(props: { icon: VisibleRuntimeAction['icon']; busy: boolean }) {
+  const { busy, icon } = props;
+  if (busy) {
+    return <Loader2 className="mr-2 h-4 w-4 animate-spin" />;
+  }
+  if (icon === 'play') {
+    return <Play className="mr-2 h-4 w-4" />;
+  }
+  if (icon === 'square') {
+    return <Square className="mr-2 h-4 w-4" />;
+  }
+  return <RotateCw className="mr-2 h-4 w-4" />;
+}
+
+export function RuntimeControlCard() {
+  const {
+    busy,
+    busyAction,
+    controlView,
+    errorMessage,
+    pendingRestart,
+    visibleLifecycle: displayedLifecycle,
+    visibleMessage: displayedMessage,
+    visibleServiceState: displayedServiceState
+  } = useRuntimeControlPanelView();
+  const visibleActions = resolveVisibleActions(controlView ?? undefined);
+
+  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'))
+    ) {
+      return;
+    }
+
+    try {
+      const result = await systemStatusManager.runRuntimeControlAction(action);
+      toast.success(result.message);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : t('runtimeControlActionFailed');
+      toast.error(`${t('runtimeControlActionFailed')}: ${message}`);
+    }
+  };
+
+  const handleRestartApp = async () => {
+    if (!controlView?.canRestartApp.available) {
+      toast.error(controlView?.canRestartApp.reasonIfUnavailable ?? t('runtimeRestartAppUnavailable'));
+      return;
+    }
+    if (!window.confirm(t('runtimeControlRestartAppConfirm'))) {
+      return;
+    }
+
+    try {
+      const result = await systemStatusManager.runRuntimeControlAction('restart-app');
+      toast.success(result.message);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : t('runtimeControlActionFailed');
+      toast.error(`${t('runtimeControlActionFailed')}: ${message}`);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('runtimeControlTitle')}</CardTitle>
+        <CardDescription>{t('runtimeControlDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <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">
+              {controlView ? resolveEnvironmentLabel(controlView) : t('runtimeControlLoading')}
+            </div>
+          </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}
+        </div>
+
+        {pendingRestart ? (
+          <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 ? (
+              <div className="space-y-2">
+                <div className="text-xs font-medium uppercase tracking-[0.08em] text-amber-700">
+                  {t('runtimeControlPendingRestartPaths')}
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {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"
+                    >
+                      {path}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        <div className="flex flex-col gap-3 md:flex-row md:flex-wrap">
+          {visibleActions.map((item) => {
+            const handleClick = () => {
+              if (item.action === 'restart-app') {
+                void handleRestartApp();
+                return;
+              }
+              void handleServiceAction(item.action);
+            };
+
+            return (
+              <Button
+                key={item.action}
+                type="button"
+                variant={item.variant ?? 'default'}
+                onClick={handleClick}
+                disabled={!item.capability.available || busy}
+              >
+                <RuntimeActionIcon icon={item.icon} busy={busyAction === item.action} />
+                {item.label}
+              </Button>
+            );
+          })}
+        </div>
+
+        {visibleActions
+          .filter((item) => !item.capability.available && item.capability.reasonIfUnavailable)
+          .map((item) => (
+            <p key={`${item.action}-reason`} className="text-xs text-gray-500">
+              {item.capability.reasonIfUnavailable}
+            </p>
+          ))}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -1,18 +1,18 @@
 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 { useDesktopPresenceStore } from '@/desktop/stores/desktop-presence.store';
-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(() => ({
-  useRuntimeControl: vi.fn(),
+  useSystemStatus: vi.fn(),
   toastSuccess: vi.fn(),
   toastError: vi.fn()
 }));
 
-vi.mock('@/hooks/use-runtime-control', () => ({
-  useRuntimeControl: (...args: unknown[]) => mocks.useRuntimeControl(...args)
+vi.mock('@/features/system-status', () => ({
+  useSystemStatus: (...args: unknown[]) => mocks.useSystemStatus(...args)
 }));
 
 vi.mock('sonner', () => ({
@@ -32,8 +32,8 @@ describe('RuntimePresenceCard', () => {
       busyAction: null,
       snapshot: null
     });
-    mocks.useRuntimeControl.mockReturnValue({
-      data: {
+    mocks.useSystemStatus.mockReturnValue({
+      runtimeControlView: {
         environment: 'managed-local-service',
         lifecycle: 'healthy',
         serviceState: 'running',
@@ -61,9 +61,7 @@ describe('RuntimePresenceCard', () => {
           reasonIfUnavailable: 'desktop only'
         },
         managementHint: 'managed service hint'
-      },
-      isError: false,
-      error: null
+      }
     });
     window.nextclawDesktop = undefined;
   });
@@ -106,8 +104,8 @@ describe('RuntimePresenceCard', () => {
       onUpdateStateChanged: vi.fn(() => () => {})
     };
 
-    mocks.useRuntimeControl.mockReturnValue({
-      data: {
+    mocks.useSystemStatus.mockReturnValue({
+      runtimeControlView: {
         environment: 'desktop-embedded',
         lifecycle: 'healthy',
         serviceState: 'running',
@@ -133,9 +131,7 @@ describe('RuntimePresenceCard', () => {
           impact: 'full-app-relaunch'
         },
         managementHint: 'desktop hint'
-      },
-      isError: false,
-      error: null
+      }
     });
 
     render(<RuntimePresenceCard />);

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

@@ -1,27 +1,42 @@
-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";
-import { desktopPresenceManager } from "@/desktop/managers/desktop-presence.manager";
-import { useDesktopPresenceStore } from "@/desktop/stores/desktop-presence.store";
-import { useRuntimeControl } from "@/hooks/use-runtime-control";
-import { t } from "@/lib/i18n";
+} 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 "@/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 runtimeControlQuery = useRuntimeControl();
-  const environment = runtimeControlQuery.data?.environment;
+  const systemStatus = useSystemStatus();
+  const environment = systemStatus.runtimeControlView?.environment;
   const supported = useDesktopPresenceStore((state) => state.supported);
   const initialized = useDesktopPresenceStore((state) => state.initialized);
   const busyAction = useDesktopPresenceStore((state) => state.busyAction);
@@ -37,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")}
@@ -107,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>
   );
 }