@nextclaw/ui 0.12.10 → 0.12.11

package/src/{account → features/account}/components/account-panel.tsx

@@ -9,10 +9,10 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { NoticeCard } from "@/components/ui/notice-card";
-import { useRemoteStatus } from "@/hooks/useRemoteAccess";
+import { useRemoteStatus } from "@/features/remote";
 import { formatDateTime, t } from "@/lib/i18n";
-import { useAccountStore } from "@/account/stores/account.store";
-import { useAppPresenter } from "@/presenter/app-presenter-context";
+import { useAppManager } from "@/app/components/app-manager-provider";
+import { useAccountStore } from "@/features/account/stores/account.store";
 import { KeyRound, LogOut, SquareArrowOutUpRight } from "lucide-react";
 import { useEffect, useState } from "react";
 
@@ -175,7 +175,7 @@ function SignedOutAccountSection(props: {
 }
 
 export function AccountPanel() {
-  const presenter = useAppPresenter();
+  const manager = useAppManager();
   const remoteStatus = useRemoteStatus();
   const panelOpen = useAccountStore((state) => state.panelOpen);
   const authSessionId = useAccountStore((state) => state.authSessionId);
@@ -189,8 +189,8 @@ export function AccountPanel() {
   const [savingUsername, setSavingUsername] = useState(false);
 
   useEffect(() => {
-    presenter.accountManager.syncRemoteStatus(status);
-  }, [presenter, status]);
+    manager.accountManager.syncRemoteStatus(status);
+  }, [manager, status]);
 
   const canSubmitUsername =
     !savingUsername &&
@@ -202,8 +202,8 @@ export function AccountPanel() {
       open={panelOpen}
       onOpenChange={(open) =>
         open
-          ? presenter.accountManager.openAccountPanel()
-          : presenter.accountManager.closeAccountPanel()
+          ? manager.accountManager.openAccountPanel()
+          : manager.accountManager.closeAccountPanel()
       }
     >
       <DialogContent className="max-w-xl">
@@ -227,13 +227,13 @@ export function AccountPanel() {
             onSubmitUsername={async () => {
               setSavingUsername(true);
               try {
-                await presenter.accountManager.updateUsername(usernameDraft);
+                await manager.accountManager.updateUsername(usernameDraft);
               } finally {
                 setSavingUsername(false);
               }
             }}
-            onOpenDeviceList={() => presenter.accountManager.openNextClawWeb('/account')}
-            onLogout={() => presenter.accountManager.logout()}
+            onOpenDeviceList={() => manager.accountManager.openNextClawWeb('/account')}
+            onLogout={() => manager.accountManager.logout()}
           />
         ) : (
           <SignedOutAccountSection
@@ -242,10 +242,10 @@ export function AccountPanel() {
             authStatusMessage={authStatusMessage}
             authVerificationUri={authVerificationUri}
             onStartBrowserSignIn={() =>
-              presenter.accountManager.startBrowserSignIn()
+              manager.accountManager.startBrowserSignIn()
             }
             onResumeBrowserSignIn={() =>
-              presenter.accountManager.resumeBrowserSignIn()
+              manager.accountManager.resumeBrowserSignIn()
             }
           />
         )}

package/src/features/account/index.ts

@@ -0,0 +1,6 @@
+export { AccountPanel } from './components/account-panel';
+export { AccountManager } from './managers/account.manager';
+export {
+  useAccountStore,
+  type AccountPendingAction,
+} from './stores/account.store';

package/src/{account → features/account}/managers/account.manager.ts

@@ -1,15 +1,15 @@
 import { logoutRemote, pollRemoteBrowserAuth, startRemoteBrowserAuth, updateRemoteAccountProfile } from '@/api/remote';
 import type { RemoteAccessView } from '@/api/remote.types';
-import type { AccountPendingAction } from '@/account/stores/account.store';
-import { useAccountStore } from '@/account/stores/account.store';
 import {
   ensureRemoteStatus,
   refreshRemoteStatus,
   resolveRemotePlatformApiBase,
   resolveRemoteWebBase
-} from '@/remote/remote-access.query';
+} from '@/features/remote';
 import { formatDateTime, t } from '@/lib/i18n';
 import { toast } from 'sonner';
+import type { AccountPendingAction } from '@/features/account/stores/account.store';
+import { useAccountStore } from '@/features/account/stores/account.store';
 
 type SignedInContinuation = (action: AccountPendingAction, status: RemoteAccessView) => Promise<void>;
 

package/src/{components/remote → features/remote/components}/remote-access-page.test.tsx

@@ -1,8 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { RemoteAccessPage } from "@/components/remote/remote-access-page";
+import { RemoteAccessPage, useRemoteAccessStore } from "@/features/remote";
 import { setLanguage } from "@/lib/i18n";
-import { useRemoteAccessStore } from "@/remote/stores/remote-access.store";
 
 const mocks = vi.hoisted(() => ({
   reauthorizeRemoteAccess: vi.fn(),
@@ -17,12 +16,12 @@ const mocks = vi.hoisted(() => ({
   },
 }));
 
-vi.mock("@/hooks/useRemoteAccess", () => ({
+vi.mock("@/features/remote/hooks/use-remote-access", () => ({
   useRemoteStatus: () => mocks.statusQuery,
 }));
 
-vi.mock("@/presenter/app-presenter-context", () => ({
-  useAppPresenter: () => ({
+vi.mock("@/app/components/app-manager-provider", () => ({
+  useAppManager: () => ({
     remoteAccessManager: {
       reauthorizeRemoteAccess: mocks.reauthorizeRemoteAccess,
       repairRemoteAccess: mocks.repairRemoteAccess,

package/src/{components/remote → features/remote/components}/remote-access-page.tsx

@@ -9,12 +9,14 @@ import {
 } from "@/components/ui/card";
 import { NoticeCard } from "@/components/ui/notice-card";
 import { StatusDot } from "@/components/ui/status-dot";
-import { useRemoteStatus } from "@/hooks/useRemoteAccess";
+import { useAppManager } from "@/app/components/app-manager-provider";
+import {
+  buildRemoteAccessFeedbackView,
+  resolveRemoteWebBase,
+  useRemoteAccessStore,
+} from "@/features/remote";
+import { useRemoteStatus } from "@/features/remote/hooks/use-remote-access";
 import { formatDateTime, t } from "@/lib/i18n";
-import { useAppPresenter } from "@/presenter/app-presenter-context";
-import { resolveRemoteWebBase } from "@/remote/remote-access.query";
-import { buildRemoteAccessFeedbackView } from "@/remote/remote-access-feedback.service";
-import { useRemoteAccessStore } from "@/remote/stores/remote-access.store";
 import { Laptop, RefreshCcw, SquareArrowOutUpRight } from "lucide-react";
 import { useEffect, useMemo } from "react";
 
@@ -43,7 +45,7 @@ function KeyValueRow(props: {
 }
 
 export function RemoteAccessPage() {
-  const presenter = useAppPresenter();
+  const manager = useAppManager();
   const remoteStatus = useRemoteStatus();
   const status = remoteStatus.data;
   const actionLabel = useRemoteAccessStore((state) => state.actionLabel);
@@ -62,8 +64,8 @@ export function RemoteAccessPage() {
   const { hero: heroView, issueHint } = feedbackView;
 
   useEffect(() => {
-    presenter.remoteAccessManager.syncStatus(status);
-  }, [presenter, status]);
+    manager.remoteAccessManager.syncStatus(status);
+  }, [manager, status]);
 
   if (remoteStatus.isLoading && !status) {
     return <div className="p-8 text-gray-400">{t("remoteLoading")}</div>;
@@ -115,18 +117,18 @@ export function RemoteAccessPage() {
                 <Button
                   onClick={() => {
                     if (feedbackView.primaryAction?.kind === "reauthorize") {
-                      void presenter.remoteAccessManager.reauthorizeRemoteAccess(
+                      void manager.remoteAccessManager.reauthorizeRemoteAccess(
                         status,
                       );
                       return;
                     }
                     if (feedbackView.primaryAction?.kind === "repair") {
-                      void presenter.remoteAccessManager.repairRemoteAccess(
+                      void manager.remoteAccessManager.repairRemoteAccess(
                         status,
                       );
                       return;
                     }
-                    void presenter.remoteAccessManager.enableRemoteAccess(
+                    void manager.remoteAccessManager.enableRemoteAccess(
                       status,
                     );
                   }}
@@ -141,7 +143,7 @@ export function RemoteAccessPage() {
 
               <Button
                 variant="outline"
-                onClick={() => void presenter.accountManager.openNextClawWeb()}
+                onClick={() => void manager.accountManager.openNextClawWeb()}
                 disabled={busy || !canOpenDeviceList}
               >
                 <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
@@ -152,7 +154,7 @@ export function RemoteAccessPage() {
                 <Button
                   variant="outline"
                   onClick={() =>
-                    void presenter.remoteAccessManager.disableRemoteAccess(
+                    void manager.remoteAccessManager.disableRemoteAccess(
                       status,
                     )
                   }

package/src/{hooks/useRemoteAccess.ts → features/remote/hooks/use-remote-access.ts}

@@ -9,8 +9,8 @@ import {
   startRemoteBrowserAuth,
   updateRemoteSettings
 } from '@/api/remote';
+import { REMOTE_STATUS_QUERY_KEY } from '@/features/remote';
 import { t } from '@/lib/i18n';
-import { REMOTE_STATUS_QUERY_KEY } from '@/remote/remote-access.query';
 import { toast } from 'sonner';
 
 export function useRemoteStatus() {

package/src/features/remote/index.ts

@@ -0,0 +1,27 @@
+export { RemoteAccessPage } from './components/remote-access-page';
+export {
+  useRemoteBrowserAuthPoll,
+  useRemoteBrowserAuthStart,
+  useRemoteDoctor,
+  useRemoteLogin,
+  useRemoteLogout,
+  useRemoteServiceControl,
+  useRemoteSettings,
+  useRemoteStatus,
+} from './hooks/use-remote-access';
+export { RemoteAccessManager } from './managers/remote-access.manager';
+export {
+  buildRemoteAccessFeedbackView,
+  requiresRemoteReauthorization,
+  type RemoteAccessFeedbackView,
+} from './services/remote-access-feedback.service';
+export {
+  REMOTE_STATUS_QUERY_KEY,
+  ensureRemoteStatus,
+  getRemoteStatusSnapshot,
+  refreshRemoteStatus,
+  resolveRemotePlatformApiBase,
+  resolveRemotePlatformBase,
+  resolveRemoteWebBase,
+} from './services/remote-access-query.service';
+export { useRemoteAccessStore } from './stores/remote-access.store';

package/src/{remote → features/remote}/managers/remote-access.manager.ts

@@ -1,11 +1,10 @@
 import { controlRemoteService, fetchRemoteDoctor, updateRemoteSettings } from '@/api/remote';
 import type { RemoteAccessView } from '@/api/remote.types';
-import type { AccountPendingAction } from '@/account/stores/account.store';
-import type { AccountManager } from '@/account/managers/account.manager';
-import { useRemoteAccessStore } from '@/remote/stores/remote-access.store';
-import { refreshRemoteStatus } from '@/remote/remote-access.query';
+import type { AccountManager, AccountPendingAction } from '@/features/account';
 import { t } from '@/lib/i18n';
 import { toast } from 'sonner';
+import { refreshRemoteStatus } from '@/features/remote/services/remote-access-query.service';
+import { useRemoteAccessStore } from '@/features/remote/stores/remote-access.store';
 
 export class RemoteAccessManager {
   private accountManager: AccountManager | null = null;

package/src/{remote → features/remote/services}/remote-access-feedback.service.test.ts

@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 import type { RemoteAccessView } from '@/api/remote.types';
 import { setLanguage } from '@/lib/i18n';
-import { buildRemoteAccessFeedbackView, requiresRemoteReauthorization } from '@/remote/remote-access-feedback.service';
+import { buildRemoteAccessFeedbackView, requiresRemoteReauthorization } from './remote-access-feedback.service';
 
 function createRemoteAccessView(overrides: Partial<RemoteAccessView> = {}): RemoteAccessView {
   return {

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

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

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

@@ -0,0 +1,12 @@
+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';

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

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

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

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