@nextclaw/ui 0.12.9 → 0.12.10

package/src/components/config/runtime-presence-card.tsx

@@ -1,20 +1,22 @@
-import { useEffect } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-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';
+import { 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";
 
 function PresenceHint(props: { title: string; description: string }) {
   const { description, title } = props;
-  return (
-    <div className="rounded-xl border border-gray-200 bg-gray-50 p-4">
-      <p className="text-sm font-medium text-gray-900">{title}</p>
-      <p className="mt-2 text-sm leading-6 text-gray-600">{description}</p>
-    </div>
-  );
+  return <NoticeCard tone="neutral" title={title} description={description} />;
 }
 
 export function RuntimePresenceCard() {
@@ -26,71 +28,83 @@ export function RuntimePresenceCard() {
   const snapshot = useDesktopPresenceStore((state) => state.snapshot);
 
   useEffect(() => {
-    if (environment === 'desktop-embedded') {
+    if (environment === "desktop-embedded") {
       void desktopPresenceManager.start();
       return;
     }
     desktopPresenceManager.markUnsupported();
   }, [environment]);
 
-  if (environment === 'desktop-embedded') {
+  if (environment === "desktop-embedded") {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>{t('runtimePresenceTitle')}</CardTitle>
-          <CardDescription>{t('runtimePresenceDescription')}</CardDescription>
+          <CardTitle>{t("runtimePresenceTitle")}</CardTitle>
+          <CardDescription>{t("runtimePresenceDescription")}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="rounded-xl border border-gray-200 bg-gray-50 p-4">
-            <p className="text-xs font-medium uppercase tracking-[0.08em] text-gray-500">
-              {t('runtimePresenceBehaviorLabel')}
-            </p>
-            <p className="mt-2 text-sm font-medium text-gray-900">
-              {snapshot?.closeToBackground ? t('runtimePresenceBehaviorBackground') : t('runtimePresenceBehaviorQuit')}
-            </p>
-          </div>
+          <NoticeCard
+            tone="neutral"
+            title={t("runtimePresenceBehaviorLabel")}
+            description={
+              snapshot?.closeToBackground
+                ? t("runtimePresenceBehaviorBackground")
+                : t("runtimePresenceBehaviorQuit")
+            }
+            className="rounded-xl"
+          />
 
           {!initialized || (supported && !snapshot) ? (
-            <p className="text-sm text-gray-500">{t('runtimePresenceLoading')}</p>
+            <p className="text-sm text-gray-500">
+              {t("runtimePresenceLoading")}
+            </p>
           ) : null}
 
           {snapshot ? (
             <div className="space-y-4">
-              <div className="flex items-start justify-between gap-4 rounded-xl border border-gray-200 p-4">
-                <div className="space-y-2">
-                  <Label htmlFor="runtime-presence-close-background">{t('runtimePresenceCloseToBackground')}</Label>
-                  <p className="text-sm text-gray-500">{t('runtimePresenceCloseToBackgroundHelp')}</p>
-                </div>
-                <Switch
-                  id="runtime-presence-close-background"
-                  aria-label={t('runtimePresenceCloseToBackground')}
-                  checked={snapshot.closeToBackground}
-                  disabled={busyAction === 'saving-preferences'}
-                  onCheckedChange={(checked) => {
-                    void desktopPresenceManager.updatePreferences({ closeToBackground: checked });
-                  }}
-                />
-              </div>
+              <SettingRow
+                title={t("runtimePresenceCloseToBackground")}
+                description={t("runtimePresenceCloseToBackgroundHelp")}
+                control={
+                  <Switch
+                    id="runtime-presence-close-background"
+                    aria-label={t("runtimePresenceCloseToBackground")}
+                    checked={snapshot.closeToBackground}
+                    disabled={busyAction === "saving-preferences"}
+                    onCheckedChange={(checked) => {
+                      void desktopPresenceManager.updatePreferences({
+                        closeToBackground: checked,
+                      });
+                    }}
+                  />
+                }
+              />
 
-              <div className="flex items-start justify-between gap-4 rounded-xl border border-gray-200 p-4">
-                <div className="space-y-2">
-                  <Label htmlFor="runtime-presence-launch-login">{t('runtimePresenceLaunchAtLogin')}</Label>
-                  <p className="text-sm text-gray-500">
-                    {snapshot.supportsLaunchAtLogin
-                      ? t('runtimePresenceLaunchAtLoginHelp')
-                      : snapshot.launchAtLoginReason ?? t('runtimePresenceLaunchAtLoginUnavailable')}
-                  </p>
-                </div>
-                <Switch
-                  id="runtime-presence-launch-login"
-                  aria-label={t('runtimePresenceLaunchAtLogin')}
-                  checked={snapshot.launchAtLogin}
-                  disabled={!snapshot.supportsLaunchAtLogin || busyAction === 'saving-preferences'}
-                  onCheckedChange={(checked) => {
-                    void desktopPresenceManager.updatePreferences({ launchAtLogin: checked });
-                  }}
-                />
-              </div>
+              <SettingRow
+                title={t("runtimePresenceLaunchAtLogin")}
+                description={
+                  snapshot.supportsLaunchAtLogin
+                    ? t("runtimePresenceLaunchAtLoginHelp")
+                    : (snapshot.launchAtLoginReason ??
+                      t("runtimePresenceLaunchAtLoginUnavailable"))
+                }
+                control={
+                  <Switch
+                    id="runtime-presence-launch-login"
+                    aria-label={t("runtimePresenceLaunchAtLogin")}
+                    checked={snapshot.launchAtLogin}
+                    disabled={
+                      !snapshot.supportsLaunchAtLogin ||
+                      busyAction === "saving-preferences"
+                    }
+                    onCheckedChange={(checked) => {
+                      void desktopPresenceManager.updatePreferences({
+                        launchAtLogin: checked,
+                      });
+                    }}
+                  />
+                }
+              />
             </div>
           ) : null}
         </CardContent>
@@ -98,51 +112,51 @@ export function RuntimePresenceCard() {
     );
   }
 
-  if (environment === 'managed-local-service') {
+  if (environment === "managed-local-service") {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>{t('runtimePresenceTitle')}</CardTitle>
-          <CardDescription>{t('runtimePresenceDescription')}</CardDescription>
+          <CardTitle>{t("runtimePresenceTitle")}</CardTitle>
+          <CardDescription>{t("runtimePresenceDescription")}</CardDescription>
         </CardHeader>
         <CardContent>
           <PresenceHint
-            title={t('runtimePresenceManagedLocalTitle')}
-            description={t('runtimePresenceManagedLocalDescription')}
+            title={t("runtimePresenceManagedLocalTitle")}
+            description={t("runtimePresenceManagedLocalDescription")}
           />
         </CardContent>
       </Card>
     );
   }
 
-  if (environment === 'self-hosted-web') {
+  if (environment === "self-hosted-web") {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>{t('runtimePresenceTitle')}</CardTitle>
-          <CardDescription>{t('runtimePresenceDescription')}</CardDescription>
+          <CardTitle>{t("runtimePresenceTitle")}</CardTitle>
+          <CardDescription>{t("runtimePresenceDescription")}</CardDescription>
         </CardHeader>
         <CardContent>
           <PresenceHint
-            title={t('runtimePresenceSelfHostedTitle')}
-            description={t('runtimePresenceSelfHostedDescription')}
+            title={t("runtimePresenceSelfHostedTitle")}
+            description={t("runtimePresenceSelfHostedDescription")}
           />
         </CardContent>
       </Card>
     );
   }
 
-  if (environment === 'shared-web') {
+  if (environment === "shared-web") {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>{t('runtimePresenceTitle')}</CardTitle>
-          <CardDescription>{t('runtimePresenceDescription')}</CardDescription>
+          <CardTitle>{t("runtimePresenceTitle")}</CardTitle>
+          <CardDescription>{t("runtimePresenceDescription")}</CardDescription>
         </CardHeader>
         <CardContent>
           <PresenceHint
-            title={t('runtimePresenceSharedTitle')}
-            description={t('runtimePresenceSharedDescription')}
+            title={t("runtimePresenceSharedTitle")}
+            description={t("runtimePresenceSharedDescription")}
           />
         </CardContent>
       </Card>
@@ -152,11 +166,11 @@ export function RuntimePresenceCard() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>{t('runtimePresenceTitle')}</CardTitle>
-        <CardDescription>{t('runtimePresenceDescription')}</CardDescription>
+        <CardTitle>{t("runtimePresenceTitle")}</CardTitle>
+        <CardDescription>{t("runtimePresenceDescription")}</CardDescription>
       </CardHeader>
       <CardContent>
-        <p className="text-sm text-gray-500">{t('runtimePresenceLoading')}</p>
+        <p className="text-sm text-gray-500">{t("runtimePresenceLoading")}</p>
       </CardContent>
     </Card>
   );

package/src/components/layout/AppLayout.tsx

@@ -1,13 +1,17 @@
-import { lazy, Suspense, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-import { Sidebar } from './Sidebar';
-import { DocBrowserProvider, useDocBrowser } from '@/components/doc-browser/DocBrowserContext';
-import { useDocLinkInterceptor } from '@/components/doc-browser/useDocLinkInterceptor';
-import { useI18n } from '@/components/providers/I18nProvider';
-import { resolveUiDocumentTitle } from '@/lib/ui-document-title';
-import { cn } from '@/lib/utils';
+import { lazy, Suspense, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { Sidebar } from "./Sidebar";
+import {
+  DocBrowserProvider,
+  useDocBrowser,
+} from "@/components/doc-browser/DocBrowserContext";
+import { useDocLinkInterceptor } from "@/components/doc-browser/useDocLinkInterceptor";
+import { useI18n } from "@/components/providers/I18nProvider";
+import { resolveUiDocumentTitle } from "@/lib/ui-document-title";
 
-const DocBrowser = lazy(async () => ({ default: (await import('@/components/doc-browser/DocBrowser')).DocBrowser }));
+const DocBrowser = lazy(async () => ({
+  default: (await import("@/components/doc-browser/DocBrowser")).DocBrowser,
+}));
 
 interface AppLayoutProps {
   children: React.ReactNode;
@@ -16,29 +20,23 @@ interface AppLayoutProps {
 function isMainWorkspaceRoute(pathname: string): boolean {
   const normalized = pathname.toLowerCase();
   return (
-    normalized === '/chat' ||
-    normalized.startsWith('/chat/') ||
-    normalized === '/skills' ||
-    normalized.startsWith('/skills/') ||
-    normalized === '/cron' ||
-    normalized.startsWith('/cron/') ||
-    normalized === '/agents' ||
-    normalized.startsWith('/agents/')
+    normalized === "/chat" ||
+    normalized.startsWith("/chat/") ||
+    normalized === "/skills" ||
+    normalized.startsWith("/skills/") ||
+    normalized === "/cron" ||
+    normalized.startsWith("/cron/") ||
+    normalized === "/agents" ||
+    normalized.startsWith("/agents/")
   );
 }
 
-function isChannelsRoute(pathname: string): boolean {
-  const normalized = pathname.toLowerCase();
-  return normalized === '/channels' || normalized.startsWith('/channels/');
-}
-
 function AppLayoutInner({ children }: AppLayoutProps) {
   const { isOpen, mode } = useDocBrowser();
   useDocLinkInterceptor();
   const { pathname } = useLocation();
   const { language } = useI18n();
   const isMainRoute = isMainWorkspaceRoute(pathname);
-  const lockPageScroll = isChannelsRoute(pathname);
 
   useEffect(() => {
     document.title = resolveUiDocumentTitle(pathname);
@@ -52,31 +50,21 @@ function AppLayoutInner({ children }: AppLayoutProps) {
           {isMainRoute ? (
             <div className="flex-1 h-full overflow-hidden">{children}</div>
           ) : (
-            <main
-              className={cn(
-                'flex-1 custom-scrollbar p-8 pb-24',
-                lockPageScroll ? 'overflow-auto xl:overflow-hidden' : 'overflow-auto'
-              )}
-            >
-              <div
-                className={cn(
-                  'max-w-6xl mx-auto animate-fade-in h-full',
-                  lockPageScroll && 'min-h-0 xl:overflow-hidden'
-                )}
-              >
+            <main className="flex-1 overflow-auto p-8 pb-16 custom-scrollbar">
+              <div className="mx-auto h-full max-w-6xl animate-fade-in">
                 {children}
               </div>
             </main>
           )}
         </div>
         {/* Doc Browser: docked mode renders inline, floating mode renders as overlay */}
-        {isOpen && mode === 'docked' && (
+        {isOpen && mode === "docked" && (
           <Suspense fallback={null}>
             <DocBrowser />
           </Suspense>
         )}
       </div>
-      {isOpen && mode === 'floating' && (
+      {isOpen && mode === "floating" && (
         <Suspense fallback={null}>
           <DocBrowser />
         </Suspense>

package/src/components/layout/app-layout.test.tsx

@@ -1,30 +1,62 @@
-import { render, screen } from '@testing-library/react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { describe, expect, it } from 'vitest';
-import { AppLayout } from '@/components/layout/AppLayout';
-import { I18nProvider } from '@/components/providers/I18nProvider';
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import { AppLayout } from "@/components/layout/AppLayout";
+import { I18nProvider } from "@/components/providers/I18nProvider";
 
-describe('AppLayout', () => {
-  it('treats /agents as a main workspace route instead of the settings shell', () => {
+vi.mock("@/components/layout/Sidebar", () => ({
+  Sidebar: () => (
+    <aside data-testid="settings-sidebar-header">Settings Sidebar</aside>
+  ),
+}));
+
+describe("AppLayout", () => {
+  it("treats /agents as a main workspace route instead of the settings shell", () => {
     const { container } = render(
       <I18nProvider>
-        <MemoryRouter initialEntries={['/agents']}>
+        <MemoryRouter initialEntries={["/agents"]}>
           <Routes>
             <Route
               path="*"
-              element={(
+              element={
                 <AppLayout>
                   <div data-testid="agents-content">Agents Content</div>
                 </AppLayout>
-              )}
+              }
+            />
+          </Routes>
+        </MemoryRouter>
+      </I18nProvider>,
+    );
+
+    expect(screen.getByTestId("agents-content")).toBeTruthy();
+    expect(screen.queryByTestId("settings-sidebar-header")).toBeNull();
+    expect(container.querySelector("aside")).toBeNull();
+  });
+
+  it("keeps settings routes on the shared shell without channel-specific scroll locking", () => {
+    const { container } = render(
+      <I18nProvider>
+        <MemoryRouter initialEntries={["/channels"]}>
+          <Routes>
+            <Route
+              path="*"
+              element={
+                <AppLayout>
+                  <div data-testid="channels-content">Channels Content</div>
+                </AppLayout>
+              }
             />
           </Routes>
         </MemoryRouter>
-      </I18nProvider>
+      </I18nProvider>,
     );
 
-    expect(screen.getByTestId('agents-content')).toBeTruthy();
-    expect(screen.queryByTestId('settings-sidebar-header')).toBeNull();
-    expect(container.querySelector('aside')).toBeNull();
+    const main = container.querySelector("main");
+
+    expect(screen.getByTestId("channels-content")).toBeTruthy();
+    expect(main).toBeTruthy();
+    expect(main?.className).toContain("overflow-auto");
+    expect(main?.className).not.toContain("xl:overflow-hidden");
   });
 });

package/src/components/layout/runtime-status-entry.test.tsx

@@ -0,0 +1,157 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { toast } from 'sonner';
+import { RuntimeStatusEntry } from '@/components/layout/runtime-status-entry';
+import { setLanguage } from '@/lib/i18n';
+
+const mocks = vi.hoisted(() => ({
+  useRuntimeControl: vi.fn(),
+  controlService: vi.fn()
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn()
+  }
+}));
+
+vi.mock('@/hooks/use-runtime-control', () => ({
+  useRuntimeControl: (...args: unknown[]) => mocks.useRuntimeControl(...args)
+}));
+
+vi.mock('@/runtime-control/runtime-control.manager', () => ({
+  runtimeControlManager: {
+    controlService: (...args: unknown[]) => mocks.controlService(...args)
+  }
+}));
+
+function createWrapper(queryClient: QueryClient) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  };
+}
+
+describe('RuntimeStatusEntry', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    vi.clearAllMocks();
+  });
+
+  it('shows a compact pending-restart entry with reasons and a restart action', async () => {
+    const queryClient = new QueryClient();
+    const user = userEvent.setup();
+    const invalidateQueriesSpy = vi.spyOn(queryClient, 'invalidateQueries');
+
+    mocks.useRuntimeControl.mockReturnValue({
+      data: {
+        environment: 'managed-local-service',
+        lifecycle: 'healthy',
+        serviceState: 'running',
+        message: 'runtime healthy',
+        pendingRestart: {
+          changedPaths: ['plugins', 'ui'],
+          message: 'Saved changes are waiting for a manual restart.',
+          reasons: ['config reload requires restart: plugins, ui'],
+          requestedAt: '2026-04-17T12:00:00.000Z'
+        },
+        canStartService: {
+          available: false,
+          requiresConfirmation: false,
+          impact: 'brief-ui-disconnect'
+        },
+        canRestartService: {
+          available: true,
+          requiresConfirmation: false,
+          impact: 'brief-ui-disconnect'
+        },
+        canStopService: {
+          available: true,
+          requiresConfirmation: true,
+          impact: 'brief-ui-disconnect'
+        },
+        canRestartApp: {
+          available: false,
+          requiresConfirmation: true,
+          impact: 'full-app-relaunch'
+        }
+      },
+      isError: false,
+      error: null
+    });
+    mocks.controlService.mockResolvedValue({
+      accepted: true,
+      action: 'restart-service',
+      lifecycle: 'restarting-service',
+      message: 'Restart scheduled. This page may disconnect for a few seconds.'
+    });
+
+    render(<RuntimeStatusEntry />, {
+      wrapper: createWrapper(queryClient)
+    });
+
+    await user.click(screen.getByTestId('runtime-status-entry'));
+
+    expect(screen.getByText('待重启')).toBeTruthy();
+    expect(screen.getByText('这些改动已经保存，但不会自动重启。你可以在这里查看原因，并在方便的时候手动重启。')).toBeTruthy();
+    expect(screen.getByText('plugins 改动将在重启后生效。')).toBeTruthy();
+    expect(screen.getByText('ui 改动将在重启后生效。')).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: '立即重启' }));
+
+    await waitFor(() => {
+      expect(mocks.controlService).toHaveBeenCalledWith('restart-service');
+    });
+    expect(toast.success).toHaveBeenCalledWith('Restart scheduled. This page may disconnect for a few seconds.');
+    expect(invalidateQueriesSpy).toHaveBeenCalledWith({ queryKey: ['runtime-control'] });
+  });
+
+  it('shows a healthy status without restart controls when no action is needed', async () => {
+    const queryClient = new QueryClient();
+    const user = userEvent.setup();
+
+    mocks.useRuntimeControl.mockReturnValue({
+      data: {
+        environment: 'managed-local-service',
+        lifecycle: 'healthy',
+        serviceState: 'running',
+        message: 'runtime healthy',
+        pendingRestart: null,
+        canStartService: {
+          available: false,
+          requiresConfirmation: false,
+          impact: 'brief-ui-disconnect'
+        },
+        canRestartService: {
+          available: true,
+          requiresConfirmation: false,
+          impact: 'brief-ui-disconnect'
+        },
+        canStopService: {
+          available: true,
+          requiresConfirmation: true,
+          impact: 'brief-ui-disconnect'
+        },
+        canRestartApp: {
+          available: false,
+          requiresConfirmation: true,
+          impact: 'full-app-relaunch'
+        }
+      },
+      isError: false,
+      error: null
+    });
+
+    render(<RuntimeStatusEntry />, {
+      wrapper: createWrapper(queryClient)
+    });
+
+    await user.click(screen.getByTestId('runtime-status-entry'));
+
+    expect(screen.getByText('系统正常')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: '立即重启' })).toBeNull();
+  });
+});