@nextclaw/ui 0.12.10 → 0.12.12

package/src/{hooks → app/hooks}/use-realtime-query-bridge.ts

@@ -1,12 +1,9 @@
 import { useEffect, useRef } from 'react';
-import { applyNcpSessionRealtimeEvent } from '@/api/ncp-session-query-cache';
-import { appClient } from '@/transport';
-import { useUiStore } from '@/stores/ui.store';
+import { applyNcpSessionRealtimeEvent } from '@/shared/lib/api';
+import { systemStatusManager } from '@/features/system-status';
+import { appClient } from '@/shared/lib/transport';
 import type { QueryClient } from '@tanstack/react-query';
 
-type ConnectionStatus = 'connected' | 'disconnected' | 'connecting';
-type SetConnectionStatus = (status: ConnectionStatus) => void;
-
 function shouldInvalidateConfigQuery(configPath: string) {
   const normalized = configPath.trim().toLowerCase();
   if (!normalized) {
@@ -39,22 +36,34 @@ function handleConfigUpdatedEvent(queryClient: QueryClient | undefined, path: st
 }
 
 function handleRealtimeEvent(
-  queryClient: QueryClient | undefined,
-  setConnectionStatus: SetConnectionStatus,
-  shouldResyncSessionsRef: { current: boolean },
-  event: Parameters<Parameters<typeof appClient.subscribe>[0]>[0]
+  params: {
+    queryClient: QueryClient | undefined;
+    shouldResyncSessions: boolean;
+    clearShouldResyncSessions: () => void;
+    markShouldResyncSessions: () => void;
+    event: Parameters<Parameters<typeof appClient.subscribe>[0]>[0];
+  }
 ): void {
+  const {
+    queryClient,
+    shouldResyncSessions,
+    clearShouldResyncSessions,
+    markShouldResyncSessions,
+    event,
+  } = params;
   if (event.type === 'connection.open') {
-    setConnectionStatus('connected');
-    if (shouldResyncSessionsRef.current) {
-      shouldResyncSessionsRef.current = false;
+    systemStatusManager.handleConnectionRestored();
+    if (shouldResyncSessions) {
+      clearShouldResyncSessions();
       queryClient?.invalidateQueries({ queryKey: ['ncp-sessions'] });
     }
     return;
   }
   if (event.type === 'connection.close' || event.type === 'connection.error') {
-    setConnectionStatus('disconnected');
-    shouldResyncSessionsRef.current = true;
+    systemStatusManager.handleConnectionInterrupted(
+      event.type === 'connection.error' ? event.payload?.message : null
+    );
+    markShouldResyncSessions();
     return;
   }
   if (event.type === 'config.updated') {
@@ -76,14 +85,21 @@ function handleRealtimeEvent(
 }
 
 export function useRealtimeQueryBridge(queryClient?: QueryClient) {
-  const { setConnectionStatus } = useUiStore();
   const shouldResyncSessionsRef = useRef(false);
 
   useEffect(() => {
-    setConnectionStatus('connecting');
-
     return appClient.subscribe((event) =>
-      handleRealtimeEvent(queryClient, setConnectionStatus, shouldResyncSessionsRef, event)
+      handleRealtimeEvent({
+        queryClient,
+        shouldResyncSessions: shouldResyncSessionsRef.current,
+        clearShouldResyncSessions: () => {
+          shouldResyncSessionsRef.current = false;
+        },
+        markShouldResyncSessions: () => {
+          shouldResyncSessionsRef.current = true;
+        },
+        event,
+      })
     );
-  }, [queryClient, setConnectionStatus]);
+  }, [queryClient]);
 }

package/src/app/hooks/use-viewport-layout.ts

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
+
+export function useViewportLayout() {
+  useEffect(() => viewportLayoutManager.attach(), []);
+
+  const mode = useViewportLayoutStore((state) => state.mode);
+
+  return {
+    mode,
+    isMobile: mode === "mobile",
+    isDesktop: mode === "desktop",
+  };
+}

package/src/app/index.tsx

@@ -0,0 +1,261 @@
+import { lazy, Suspense, useEffect } from "react";
+import type { ReactElement } from "react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { Toaster } from "sonner";
+import { appQueryClient } from "@/app-query-client";
+import { AppManagerProvider } from "@/app/components/app-manager-provider";
+import { AppLayout } from "@/app/components/layout/app-layout";
+import { LanguageSettingsPage } from "@/features/settings";
+import { SettingsEntryPage } from "@/app/components/layout/settings-entry-page";
+import { LoginPage } from "@/components/auth/login-page";
+import { AccountPanel } from "@/features/account";
+import { useSystemStatusSources } from "@/features/system-status";
+import {
+  isTransientAuthStatusBootstrapError,
+  useAuthStatus,
+} from "@/hooks/use-auth";
+import { useRealtimeQueryBridge } from "@/hooks/use-realtime-query-bridge";
+import {
+  PwaInstallBanner,
+  PwaUpdateBanner,
+} from "@/pwa/components/pwa-install-entry";
+import { startNextClawPwa } from "@/pwa/register-pwa";
+
+const ModelConfigPage = lazy(async () => ({
+  default: (await import("@/components/config/ModelConfig")).ModelConfig,
+}));
+const ChatPage = lazy(async () => ({
+  default: (await import("@/components/chat/chat-page")).ChatPage,
+}));
+const SearchConfigPage = lazy(async () => ({
+  default: (await import("@/components/config/SearchConfig")).SearchConfig,
+}));
+const ProvidersListPage = lazy(async () => ({
+  default: (await import("@/components/config/ProvidersList")).ProvidersList,
+}));
+const ChannelsListPage = lazy(async () => ({
+  default: (await import("@/components/config/ChannelsList")).ChannelsList,
+}));
+const RuntimeConfigPage = lazy(async () => ({
+  default: (await import("@/components/config/RuntimeConfig")).RuntimeConfig,
+}));
+const DesktopUpdateConfigPage = lazy(async () => ({
+  default: (await import("@/components/config/desktop-update-config"))
+    .DesktopUpdateConfig,
+}));
+const SecurityConfigPage = lazy(async () => ({
+  default: (await import("@/components/config/security-config")).SecurityConfig,
+}));
+const SessionsConfigPage = lazy(async () => ({
+  default: (await import("@/components/config/SessionsConfig")).SessionsConfig,
+}));
+const SecretsConfigPage = lazy(async () => ({
+  default: (await import("@/components/config/SecretsConfig")).SecretsConfig,
+}));
+const RemoteAccessPage = lazy(async () => ({
+  default: (await import("@/features/remote")).RemoteAccessPage,
+}));
+const MarketplacePage = lazy(async () => ({
+  default: (await import("@/components/marketplace/marketplace-page"))
+    .MarketplacePage,
+}));
+const McpMarketplacePage = lazy(async () => ({
+  default: (await import("@/components/marketplace/mcp/mcp-marketplace-page"))
+    .McpMarketplacePage,
+}));
+
+type RedirectRouteDefinition = {
+  path: string;
+  redirectTo: string;
+};
+
+type ElementRouteDefinition = {
+  path: string;
+  element: ReactElement;
+};
+
+type ProtectedRouteDefinition =
+  | RedirectRouteDefinition
+  | ElementRouteDefinition;
+
+function RouteFallback() {
+  return (
+    <div className="h-full w-full animate-pulse rounded-2xl border border-border/40 bg-card/40" />
+  );
+}
+
+function LazyRoute({ children }: { children: ReactElement }) {
+  return <Suspense fallback={<RouteFallback />}>{children}</Suspense>;
+}
+
+function createLazyElement(element: ReactElement): ReactElement {
+  return <LazyRoute>{element}</LazyRoute>;
+}
+
+const protectedRouteDefinitions: ProtectedRouteDefinition[] = [
+  { path: "/chat/skills", redirectTo: "/skills" },
+  { path: "/chat/cron", redirectTo: "/cron" },
+  { path: "/chat/agents", redirectTo: "/agents" },
+  {
+    path: "/chat/:sessionId?",
+    element: createLazyElement(<ChatPage view="chat" />),
+  },
+  {
+    path: "/agents",
+    element: createLazyElement(<ChatPage view="agents" />),
+  },
+  {
+    path: "/skills",
+    element: createLazyElement(<ChatPage view="skills" />),
+  },
+  {
+    path: "/cron",
+    element: createLazyElement(<ChatPage view="cron" />),
+  },
+  {
+    path: "/model",
+    element: createLazyElement(<ModelConfigPage />),
+  },
+  {
+    path: "/search",
+    element: createLazyElement(<SearchConfigPage />),
+  },
+  {
+    path: "/providers",
+    element: createLazyElement(<ProvidersListPage />),
+  },
+  {
+    path: "/channels",
+    element: createLazyElement(<ChannelsListPage />),
+  },
+  {
+    path: "/runtime",
+    element: createLazyElement(<RuntimeConfigPage />),
+  },
+  {
+    path: "/updates",
+    element: createLazyElement(<DesktopUpdateConfigPage />),
+  },
+  {
+    path: "/remote",
+    element: createLazyElement(<RemoteAccessPage />),
+  },
+  {
+    path: "/security",
+    element: createLazyElement(<SecurityConfigPage />),
+  },
+  {
+    path: "/sessions",
+    element: createLazyElement(<SessionsConfigPage />),
+  },
+  {
+    path: "/secrets",
+    element: createLazyElement(<SecretsConfigPage />),
+  },
+  {
+    path: "/language",
+    element: <LanguageSettingsPage />,
+  },
+  {
+    path: "/settings",
+    element: <SettingsEntryPage />,
+  },
+  {
+    path: "/marketplace/skills",
+    redirectTo: "/skills",
+  },
+  {
+    path: "/marketplace",
+    redirectTo: "/marketplace/plugins",
+  },
+  {
+    path: "/marketplace/mcp",
+    element: createLazyElement(<McpMarketplacePage />),
+  },
+  {
+    path: "/marketplace/:type",
+    element: createLazyElement(<MarketplacePage />),
+  },
+  {
+    path: "/",
+    redirectTo: "/chat",
+  },
+  {
+    path: "*",
+    redirectTo: "/chat",
+  },
+];
+
+function renderProtectedRoute(definition: ProtectedRouteDefinition) {
+  if ("redirectTo" in definition) {
+    return (
+      <Route
+        key={definition.path}
+        path={definition.path}
+        element={<Navigate to={definition.redirectTo} replace />}
+      />
+    );
+  }
+
+  return (
+    <Route
+      key={definition.path}
+      path={definition.path}
+      element={definition.element}
+    />
+  );
+}
+
+function ProtectedRoutes() {
+  return <Routes>{protectedRouteDefinitions.map(renderProtectedRoute)}</Routes>;
+}
+
+function ProtectedApp() {
+  useRealtimeQueryBridge(appQueryClient);
+  useSystemStatusSources();
+
+  return (
+    <AppManagerProvider>
+      <AppLayout>
+        <ProtectedRoutes />
+      </AppLayout>
+      <AccountPanel />
+    </AppManagerProvider>
+  );
+}
+
+function AuthGate() {
+  const authStatus = useAuthStatus();
+  const isTransientBootstrapFailure =
+    authStatus.isError && isTransientAuthStatusBootstrapError(authStatus.error);
+
+  if (
+    (authStatus.isLoading && !authStatus.isError) ||
+    isTransientBootstrapFailure ||
+    authStatus.isError
+  ) {
+    return <ProtectedApp />;
+  }
+
+  if (authStatus.data?.enabled && !authStatus.data.authenticated) {
+    return <LoginPage username={authStatus.data.username} />;
+  }
+
+  return <ProtectedApp />;
+}
+
+export default function AppContent() {
+  useEffect(() => {
+    startNextClawPwa();
+  }, []);
+
+  return (
+    <QueryClientProvider client={appQueryClient}>
+      <AuthGate />
+      <PwaInstallBanner />
+      <PwaUpdateBanner />
+      <Toaster position="top-right" richColors />
+    </QueryClientProvider>
+  );
+}

package/src/app/managers/app.manager.ts

@@ -0,0 +1,12 @@
+import { AccountManager } from '@/features/account';
+import { RemoteAccessManager } from '@/features/remote';
+
+export class AppManager {
+  accountManager = new AccountManager();
+  remoteAccessManager = new RemoteAccessManager();
+}
+
+export const appManager = new AppManager();
+
+appManager.accountManager.bindSignedInContinuation(appManager.remoteAccessManager.resumePendingActionAfterSignIn);
+appManager.remoteAccessManager.bindAccountManager(appManager.accountManager);

package/src/app/managers/viewport-layout.manager.ts

@@ -0,0 +1,73 @@
+import {
+  createInitialViewportLayoutSnapshot,
+  resolveViewportLayoutMode,
+  useViewportLayoutStore,
+  type ViewportLayoutSnapshot,
+} from "@/app/stores/viewport-layout.store";
+
+export class ViewportLayoutManager {
+  private consumerCount = 0;
+
+  private started = false;
+
+  attach = (): (() => void) => {
+    this.consumerCount += 1;
+    if (this.consumerCount === 1) {
+      this.start();
+    }
+
+    return () => {
+      this.consumerCount = Math.max(0, this.consumerCount - 1);
+      if (this.consumerCount === 0) {
+        this.stop();
+      }
+    };
+  };
+
+  start = () => {
+    if (this.started || typeof window === "undefined") {
+      return;
+    }
+
+    this.started = true;
+    window.addEventListener("resize", this.handleViewportChange);
+    window.addEventListener("orientationchange", this.handleViewportChange);
+    this.syncFromWindow();
+  };
+
+  stop = () => {
+    if (!this.started || typeof window === "undefined") {
+      return;
+    }
+
+    window.removeEventListener("resize", this.handleViewportChange);
+    window.removeEventListener("orientationchange", this.handleViewportChange);
+    this.started = false;
+  };
+
+  getSnapshot = (): ViewportLayoutSnapshot => useViewportLayoutStore.getState();
+
+  resetForTests = () => {
+    this.consumerCount = 0;
+    this.stop();
+    useViewportLayoutStore.setState(createInitialViewportLayoutSnapshot());
+  };
+
+  private handleViewportChange = () => {
+    this.syncFromWindow();
+  };
+
+  private syncFromWindow = () => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const width = window.innerWidth ?? null;
+    useViewportLayoutStore.setState({
+      width,
+      mode: resolveViewportLayoutMode(width),
+    });
+  };
+}
+
+export const viewportLayoutManager = new ViewportLayoutManager();

package/src/app/stores/viewport-layout.store.ts

@@ -0,0 +1,32 @@
+import { create } from "zustand";
+
+export type ViewportLayoutMode = "mobile" | "desktop";
+
+export type ViewportLayoutSnapshot = {
+  mode: ViewportLayoutMode;
+  width: number | null;
+};
+
+export const MOBILE_VIEWPORT_MAX_WIDTH = 767;
+
+export function resolveViewportLayoutMode(
+  width: number | null | undefined,
+): ViewportLayoutMode {
+  if (typeof width !== "number" || !Number.isFinite(width)) {
+    return "desktop";
+  }
+  return width <= MOBILE_VIEWPORT_MAX_WIDTH ? "mobile" : "desktop";
+}
+
+export function createInitialViewportLayoutSnapshot(): ViewportLayoutSnapshot {
+  const width =
+    typeof window === "undefined" ? null : window.innerWidth ?? null;
+  return {
+    mode: resolveViewportLayoutMode(width),
+    width,
+  };
+}
+
+export const useViewportLayoutStore = create<ViewportLayoutSnapshot>(() =>
+  createInitialViewportLayoutSnapshot(),
+);

package/src/{test/setup.ts → app/test/vitest-setup.ts}

@@ -6,11 +6,11 @@ Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
 });
 
 class MockResizeObserver {
-  observe() {}
+  observe = () => {}
 
-  unobserve() {}
+  unobserve = () => {}
 
-  disconnect() {}
+  disconnect = () => {}
 }
 
 vi.stubGlobal('ResizeObserver', MockResizeObserver);

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

@@ -1,18 +1,18 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/shared/components/ui/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
-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 { formatDateTime, t } from "@/lib/i18n";
-import { useAccountStore } from "@/account/stores/account.store";
-import { useAppPresenter } from "@/presenter/app-presenter-context";
+} from "@/shared/components/ui/dialog";
+import { Input } from "@/shared/components/ui/input";
+import { Label } from "@/shared/components/ui/label";
+import { NoticeCard } from "@/shared/components/ui/notice-card";
+import { useRemoteStatus } from "@/features/remote";
+import { formatDateTime, t } from "@/shared/lib/i18n";
+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/{components/auth → features/account/components}/login-page.tsx

@@ -1,9 +1,9 @@
 import { useState, type FormEvent } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
+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 { useLoginAuth } from '@/hooks/use-auth';
-import { t } from '@/lib/i18n';
+import { t } from '@/shared/lib/i18n';
 
 type LoginPageProps = {
   username?: string;

package/src/{hooks → features/account/hooks}/use-auth.test.ts

@@ -3,7 +3,7 @@ import {
   AUTH_STATUS_BOOTSTRAP_RETRY_DELAY_MS,
   isTransientAuthStatusBootstrapError,
   shouldRetryAuthStatusBootstrap
-} from '@/hooks/use-auth';
+} from './use-auth';
 
 describe('auth status bootstrap retry policy', () => {
   it('retries transient transport failures during startup', () => {

package/src/{hooks → features/account/hooks}/use-auth.ts

@@ -7,10 +7,10 @@ import {
   setupAuth,
   updateAuthEnabled,
   updateAuthPassword
-} from '@/api/config';
-import type { AuthStatusView } from '@/api/types';
+} from '@/shared/lib/api';
+import type { AuthStatusView } from '@/shared/lib/api';
 import { toast } from 'sonner';
-import { t } from '@/lib/i18n';
+import { t } from '@/shared/lib/i18n';
 
 const AUTH_STATUS_BOOTSTRAP_MAX_RETRIES = 40;
 const AUTH_STATUS_BOOTSTRAP_TIMEOUT_MS = 400;

package/src/features/account/index.ts

@@ -0,0 +1,7 @@
+export { AccountPanel } from './components/account-panel';
+export { LoginPage } from './components/login-page';
+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 { logoutRemote, pollRemoteBrowserAuth, startRemoteBrowserAuth, updateRemoteAccountProfile } from '@/shared/lib/api';
+import type { RemoteAccessView } from '@/shared/lib/api';
 import {
   ensureRemoteStatus,
   refreshRemoteStatus,
   resolveRemotePlatformApiBase,
   resolveRemoteWebBase
-} from '@/remote/remote-access.query';
-import { formatDateTime, t } from '@/lib/i18n';
+} from '@/features/remote';
+import { formatDateTime, t } from '@/shared/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>;