@nextclaw/ui 0.12.9 → 0.12.11

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

@@ -1,96 +1,112 @@
-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,
+  useDesktopPresenceStore,
+} from "@/platforms/desktop";
+import { useSystemStatus } from "@/features/system-status";
+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() {
-  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);
   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 +114,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 +168,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/Sidebar.tsx

@@ -9,8 +9,8 @@ import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/comp
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useTheme } from '@/components/providers/ThemeProvider';
 import { SelectItem } from '@/components/ui/select';
-import { useRemoteStatus } from '@/hooks/useRemoteAccess';
-import { useAppPresenter } from '@/presenter/app-presenter-context';
+import { useAppManager } from '@/app/components/app-manager-provider';
+import { useRemoteStatus } from '@/features/remote';
 
 type SidebarMode = 'main' | 'settings';
 
@@ -19,7 +19,7 @@ type SidebarProps = {
 };
 
 export function Sidebar({ mode }: SidebarProps) {
-  const presenter = useAppPresenter();
+  const manager = useAppManager();
   const docBrowser = useDocBrowser();
   const remoteStatus = useRemoteStatus();
   const { language, setLanguage } = useI18n();
@@ -182,7 +182,7 @@ export function Sidebar({ mode }: SidebarProps) {
         <div className={cn('shrink-0 border-t border-[#dde0ea] bg-secondary', isSettingsMode ? 'mt-2 pt-3' : 'mt-3 pt-3')}>
           {isSettingsMode ? (
             <SidebarActionItem
-              onClick={() => presenter.accountManager.openAccountPanel()}
+              onClick={() => manager.accountManager.openAccountPanel()}
               icon={KeyRound}
               label={t('remoteAccountEntryManage')}
               density="compact"

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,101 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+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(() => ({
+  useRuntimeStatusBadgeView: vi.fn(),
+  runRuntimeControlAction: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('@/features/system-status', () => ({
+  useRuntimeStatusBadgeView: (...args: unknown[]) =>
+    mocks.useRuntimeStatusBadgeView(...args),
+  systemStatusManager: {
+    runRuntimeControlAction: (...args: unknown[]) =>
+      mocks.runRuntimeControlAction(...args),
+  },
+}));
+
+describe('RuntimeStatusEntry', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    vi.clearAllMocks();
+  });
+
+  it('shows a compact pending-restart entry with reasons and a restart action', async () => {
+    const user = userEvent.setup();
+
+    mocks.useRuntimeStatusBadgeView.mockReturnValue({
+      tone: 'attention',
+      title: '待重启',
+      description:
+        '这些改动已经保存，但不会自动重启。你可以在这里查看原因，并在方便的时候手动重启。',
+      reasonLines: [
+        'plugins 改动将在重启后生效。',
+        'ui 改动将在重启后生效。',
+      ],
+      actionLabel: '立即重启',
+      isBusy: false,
+    });
+    mocks.runRuntimeControlAction.mockResolvedValue({
+      accepted: true,
+      action: 'restart-service',
+      lifecycle: 'restarting-service',
+      message: 'Restart scheduled. This page may disconnect for a few seconds.',
+    });
+
+    render(<RuntimeStatusEntry />);
+
+    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.runRuntimeControlAction).toHaveBeenCalledWith(
+        'restart-service'
+      );
+    });
+    expect(toast.success).toHaveBeenCalledWith(
+      'Restart scheduled. This page may disconnect for a few seconds.'
+    );
+  });
+
+  it('shows a healthy status without restart controls when no action is needed', async () => {
+    const user = userEvent.setup();
+
+    mocks.useRuntimeStatusBadgeView.mockReturnValue({
+      tone: 'healthy',
+      title: '系统正常',
+      description: '所有系统状态都正常。',
+      reasonLines: [],
+      actionLabel: null,
+      isBusy: false,
+    });
+
+    render(<RuntimeStatusEntry />);
+
+    await user.click(screen.getByTestId('runtime-status-entry'));
+
+    expect(screen.getByText('系统正常')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: '立即重启' })).toBeNull();
+  });
+});

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

@@ -0,0 +1,95 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  systemStatusManager,
+  useRuntimeStatusBadgeView,
+} from '@/features/system-status';
+import { t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+import { toast } from 'sonner';
+
+type RuntimeStatusTone = 'healthy' | 'attention' | 'inactive';
+
+const runtimeStatusToneStyles: Record<RuntimeStatusTone, string> = {
+  healthy: 'bg-emerald-500 shadow-[0_0_0_3px_rgba(16,185,129,0.14)]',
+  attention: 'bg-amber-400 shadow-[0_0_0_3px_rgba(251,191,36,0.16)]',
+  inactive: 'bg-gray-300 shadow-[0_0_0_3px_rgba(156,163,175,0.12)]'
+};
+
+type RuntimeStatusSummary = {
+  actionLabel: string | null;
+  description: string;
+  reasonLines: string[];
+  title: string;
+  tone: RuntimeStatusTone;
+  isBusy: boolean;
+};
+
+export function RuntimeStatusEntry() {
+  const summary = useRuntimeStatusBadgeView() as RuntimeStatusSummary;
+  const canRestart = summary.actionLabel === t('runtimeStatusRestartAction');
+
+  const handleRestart = async () => {
+    if (!canRestart) {
+      return;
+    }
+    try {
+      const result =
+        await systemStatusManager.runRuntimeControlAction('restart-service');
+      toast.success(result.message);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : t('runtimeControlActionFailed');
+      toast.error(`${t('runtimeControlActionFailed')}: ${message}`);
+    }
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex items-center justify-center rounded-full p-0.5 transition-transform hover:scale-105"
+          aria-label={summary.title}
+          title={summary.title}
+          data-testid="runtime-status-entry"
+        >
+          <span className={cn('h-2.5 w-2.5 rounded-full', runtimeStatusToneStyles[summary.tone])} />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        sideOffset={10}
+        className="w-[290px] space-y-3 rounded-2xl border border-gray-200 bg-white p-4"
+      >
+        <div className="space-y-1">
+          <div className="text-sm font-semibold text-gray-900">{summary.title}</div>
+          <p className="text-xs leading-5 text-gray-600">{summary.description}</p>
+        </div>
+        {summary.reasonLines.length > 0 ? (
+          <div className="space-y-2">
+            {summary.reasonLines.map((reason) => (
+              <div
+                key={reason}
+                className="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-900"
+              >
+                {reason}
+              </div>
+            ))}
+          </div>
+        ) : null}
+        {summary.actionLabel ? (
+          <div className="flex items-center justify-between border-t border-gray-100 pt-1">
+            <span className="text-[11px] text-gray-500">{t('runtimeStatusActionHint')}</span>
+            <button
+              type="button"
+              onClick={() => void handleRestart()}
+              disabled={summary.isBusy}
+              className="text-sm font-semibold text-sky-600 transition-colors hover:text-sky-700 disabled:text-gray-400"
+            >
+              {summary.isBusy ? t('runtimeStatusRestartingAction') : summary.actionLabel}
+            </button>
+          </div>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  );
+}