@nextclaw/ui 0.14.1 → 0.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.14.1",
+  "version": "0.14.3",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -28,14 +28,14 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/client-sdk": "0.4.4",
-    "@nextclaw/ncp-http-agent-client": "0.3.46",
-    "@nextclaw/ncp-react": "0.4.54",
-    "@nextclaw/ncp-toolkit": "0.5.39",
-    "@nextclaw/shared": "0.3.1",
-    "@nextclaw/agent-chat": "0.2.14",
-    "@nextclaw/agent-chat-ui": "0.5.1",
-    "@nextclaw/ncp": "0.6.4"
+    "@nextclaw/agent-chat-ui": "0.5.3",
+    "@nextclaw/client-sdk": "0.4.6",
+    "@nextclaw/ncp": "0.6.5",
+    "@nextclaw/ncp-toolkit": "0.5.40",
+    "@nextclaw/shared": "0.3.2",
+    "@nextclaw/ncp-http-agent-client": "0.3.47",
+    "@nextclaw/agent-chat": "0.2.15",
+    "@nextclaw/ncp-react": "0.4.55"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/app/components/app-presenter-provider.tsx

@@ -1,7 +1,16 @@
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { createContext, useContext, useMemo, type Context, type ReactNode } from 'react';
 import { getAppPresenter, type AppPresenter } from '@/app/presenters/app.presenter';
 
-const AppPresenterContext = createContext<AppPresenter | null>(null);
+type AppPresenterContextGlobal = typeof globalThis & {
+  __NEXTCLAW_APP_PRESENTER_CONTEXT__?: Context<AppPresenter | null>;
+};
+
+const appPresenterContextGlobal = globalThis as AppPresenterContextGlobal;
+const AppPresenterContext =
+  appPresenterContextGlobal.__NEXTCLAW_APP_PRESENTER_CONTEXT__ ??
+  createContext<AppPresenter | null>(null);
+
+appPresenterContextGlobal.__NEXTCLAW_APP_PRESENTER_CONTEXT__ = AppPresenterContext;
 
 type AppPresenterProviderProps = {
   children: ReactNode;

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

@@ -5,6 +5,7 @@ import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { AppLayout } from "@/app/components/layout/app-layout";
 import { I18nProvider } from "@/app/components/i18n-provider";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 
 const { useViewportLayoutMock } = vi.hoisted(() => ({
   useViewportLayoutMock: vi.fn(() => ({
@@ -44,6 +45,8 @@ vi.mock("@/platforms/mobile", () => ({
 
 describe("AppLayout", () => {
   beforeEach(() => {
+    window.localStorage.clear();
+    viewportLayoutManager.resetForTests();
     useViewportLayoutMock.mockReturnValue({
       mode: "desktop",
       isMobile: false,
@@ -171,7 +174,9 @@ describe("AppLayout", () => {
 
     expect(screen.getByTestId("chat-content")).toBeTruthy();
     expect(screen.getByTestId("desktop-window-chrome")).toBeTruthy();
-    expect(screen.getByTestId("desktop-window-chrome-sidebar").className).toContain("desktop-window-drag");
+    expect(
+      screen.getByTestId("desktop-window-chrome-sidebar").className,
+    ).toContain("desktop-window-drag");
     expect(screen.getByTestId("mobile-bottom-nav")).toBeTruthy();
   });
 
@@ -203,7 +208,11 @@ describe("AppLayout", () => {
     );
 
     expect(screen.getByTestId("chat-content")).toBeTruthy();
-    expect(screen.getByTestId("mobile-app-shell").getAttribute("data-topbar-leading-inset")).toBe("4.75rem");
+    expect(
+      screen
+        .getByTestId("mobile-app-shell")
+        .getAttribute("data-topbar-leading-inset"),
+    ).toBe("4.75rem");
     expect(screen.queryByTestId("desktop-window-chrome")).toBeNull();
   });
 });

package/src/app/components/layout/__tests__/sidebar.layout.test.tsx

@@ -1,8 +1,10 @@
-import { render, screen, within } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import { describe, expect, it, vi } from 'vitest';
-import { Sidebar } from '@/app/components/layout/sidebar';
-import type * as RemoteFeature from '@/features/remote';
+import { render, screen, within } from "@testing-library/react";
+import { fireEvent } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Sidebar } from "@/app/components/layout/sidebar";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import type * as RemoteFeature from "@/features/remote";
 
 const mocks = vi.hoisted(() => ({
   openAccountPanel: vi.fn(),
@@ -11,133 +13,162 @@ const mocks = vi.hoisted(() => ({
     data: {
       account: {
         loggedIn: true,
-        email: 'user@example.com'
-      }
-    }
-  }
+        email: "user@example.com",
+      },
+    },
+  },
 }));
 
-vi.mock('@/shared/components/doc-browser', () => ({
+vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({
-    open: mocks.docOpen
-  })
+    open: mocks.docOpen,
+  }),
 }));
 
-vi.mock('@/app/components/app-presenter-provider', () => ({
+vi.mock("@/app/components/app-presenter-provider", () => ({
   useAppPresenter: () => ({
     accountManager: {
-      openAccountPanel: mocks.openAccountPanel
-    }
-  })
+      openAccountPanel: mocks.openAccountPanel,
+    },
+  }),
 }));
 
-vi.mock('@/features/remote', async () => {
-  const actual = await vi.importActual<typeof RemoteFeature>('@/features/remote');
+vi.mock("@/features/remote", async () => {
+  const actual =
+    await vi.importActual<typeof RemoteFeature>("@/features/remote");
   return {
     ...actual,
-    useRemoteStatus: () => mocks.remoteStatus
+    useRemoteStatus: () => mocks.remoteStatus,
   };
 });
 
-vi.mock('@/app/components/i18n-provider', () => ({
+vi.mock("@/app/components/i18n-provider", () => ({
   useI18n: () => ({
-    language: 'en',
-    setLanguage: vi.fn()
-  })
+    language: "en",
+    setLanguage: vi.fn(),
+  }),
 }));
 
-vi.mock('@/app/components/theme-provider', () => ({
+vi.mock("@/app/components/theme-provider", () => ({
   useTheme: () => ({
-    theme: 'warm',
-    setTheme: vi.fn()
-  })
+    theme: "warm",
+    setTheme: vi.fn(),
+  }),
 }));
 
-describe('Sidebar', () => {
-  it('keeps the settings sidebar bounded and lets the navigation scroll independently', () => {
+describe("Sidebar", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    viewportLayoutManager.resetForTests();
+  });
+
+  it("keeps the settings sidebar bounded and lets the navigation scroll independently", () => {
     const { container } = render(
-      <MemoryRouter initialEntries={['/model']}>
+      <MemoryRouter initialEntries={["/model"]}>
         <Sidebar mode="settings" />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
-    const aside = container.querySelector('aside');
-    const nav = container.querySelector('nav');
-
-    expect(aside?.className).toContain('min-h-0');
-    expect(aside?.className).toContain('overflow-hidden');
-    expect(screen.getByTestId('settings-sidebar-header').parentElement?.className).toContain('py-2.5');
-    expect(aside?.className).not.toContain('py-6');
-    expect(nav?.className).toContain('flex-1');
-    expect(nav?.className).toContain('min-h-0');
-    expect(nav?.className).toContain('overflow-y-auto');
-    expect(screen.getByRole('link', { current: 'page' }).className).not.toContain('font-semibold');
+    const aside = container.querySelector("aside");
+    const nav = container.querySelector("nav");
+
+    expect(aside?.className).toContain("min-h-0");
+    expect(aside?.className).toContain("overflow-hidden");
+    expect(
+      screen.getByTestId("settings-sidebar-header").parentElement?.className,
+    ).toMatch(/(?:^|\s)py-2(?:\s|$)/);
+    expect(aside?.className).not.toContain("py-6");
+    expect(nav?.className).toContain("flex-1");
+    expect(nav?.className).toContain("min-h-0");
+    expect(nav?.className).toContain("overflow-y-auto");
+    expect(
+      screen.getByRole("link", { current: "page" }).className,
+    ).not.toContain("font-semibold");
   });
 
-  it('keeps the original compact single-row header in settings mode', () => {
+  it("keeps the original compact single-row header in settings mode", () => {
     render(
-      <MemoryRouter initialEntries={['/model']}>
+      <MemoryRouter initialEntries={["/model"]}>
         <Sidebar mode="settings" />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
-    const header = screen.getByTestId('settings-sidebar-header');
-    const backLink = screen.getByRole('link', { name: 'Back to Main' });
+    const header = screen.getByTestId("settings-sidebar-header");
+    const backLink = screen.getByRole("link", { name: "Back to Main" });
 
     expect(header).toBeTruthy();
-    expect(screen.getByRole('heading', { name: 'Settings' })).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "Settings" })).toBeTruthy();
     expect(backLink).toBeTruthy();
-    expect(header.className).not.toContain('bg-white');
-    expect(header.className).not.toContain('rounded-2xl');
-    expect(backLink.className).toContain('hover:bg-gray-200/60');
+    expect(header.className).not.toContain("bg-white");
+    expect(header.className).not.toContain("rounded-2xl");
+    expect(backLink.className).toContain("hover:bg-accent");
   });
 
-  it('keeps the settings navigation in the expected product order', () => {
+  it("keeps the settings navigation in the expected product order", () => {
     const { container } = render(
-      <MemoryRouter initialEntries={['/model']}>
+      <MemoryRouter initialEntries={["/model"]}>
         <Sidebar mode="settings" />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
-    const nav = container.querySelector('nav');
+    const nav = container.querySelector("nav");
     if (!(nav instanceof HTMLElement)) {
-      throw new Error('settings nav not found');
+      throw new Error("settings nav not found");
     }
 
     const linkTexts = within(nav)
-      .getAllByRole('link')
-      .map((link) => link.textContent?.trim() || '');
+      .getAllByRole("link")
+      .map((link) => link.textContent?.trim() || "");
 
     expect(linkTexts).toEqual([
-      'Model',
-      'Providers',
-      'Channels',
-      'Search Channels',
-      'Routing & Runtime',
-      'Updates',
-      'Remote Access',
-      'Security',
-      'Secrets',
-      'MCP'
+      "Model",
+      "Providers",
+      "Channels",
+      "Search Channels",
+      "Routing & Runtime",
+      "Updates",
+      "Remote Access",
+      "Security",
+      "Secrets",
+      "MCP",
     ]);
   });
 
-  it('keeps the footer utilities compact without changing the top header structure', () => {
+  it("keeps the footer utilities compact without changing the top header structure", () => {
     render(
-      <MemoryRouter initialEntries={['/model']}>
+      <MemoryRouter initialEntries={["/model"]}>
         <Sidebar mode="settings" />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
-    const accountEntry = screen.getByTestId('settings-sidebar-account-entry');
-    const accountStatus = screen.getByTestId('settings-sidebar-account-status');
+    const accountEntry = screen.getByTestId("settings-sidebar-account-entry");
+    const accountStatus = screen.getByTestId("settings-sidebar-account-status");
 
     expect(accountEntry).toBeTruthy();
-    expect(accountEntry.textContent).toContain('Account');
-    expect(screen.getByText('user@example.com')).toBeTruthy();
-    expect(accountEntry.className).toContain('py-2');
-    expect(accountEntry.className).toContain('text-gray-600');
-    expect(accountEntry.className).toContain('hover:bg-gray-200/60');
-    expect(accountStatus.className).toContain('text-[11px]');
+    expect(accountEntry.textContent).toContain("Account");
+    expect(screen.getByText("user@example.com")).toBeTruthy();
+    expect(accountEntry.className).toContain("py-2");
+    expect(accountEntry.className).toContain("text-muted-foreground");
+    expect(accountEntry.className).toContain("hover:bg-accent");
+    expect(accountStatus.className).toContain("text-[11px]");
+  });
+
+  it("persists the shared sidebar collapsed state through the viewport layout store", () => {
+    const { container } = render(
+      <MemoryRouter initialEntries={["/model"]}>
+        <Sidebar mode="settings" />
+      </MemoryRouter>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Collapse sidebar" }));
+
+    const aside = container.querySelector("aside");
+    const persistedState = JSON.parse(
+      window.localStorage.getItem("nextclaw.app.viewport-layout") ?? "{}",
+    ) as { state?: { isSidebarCollapsed?: boolean } };
+
+    expect(aside?.getAttribute("data-sidebar-collapsed")).toBe("true");
+    expect(persistedState.state?.isSidebarCollapsed).toBe(true);
+    expect(screen.getByRole("button", { name: "Expand sidebar" })).toBeTruthy();
   });
 });

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

@@ -10,7 +10,11 @@ import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { DesktopAppShell, getDesktopHostPlatform } from "@/platforms/desktop";
 import { MobileAppShell } from "@/platforms/mobile";
 import { PANEL_APPS_DOC_BROWSER_RENDERERS } from "@/features/panel-apps";
-import { SideDock, type SideDockManager, useSideDockStore } from "@/features/side-dock";
+import {
+  SideDock,
+  type SideDockManager,
+  useSideDockStore,
+} from "@/features/side-dock";
 import { getPresenter } from "@/app/presenters/app.presenter";
 import { resolveUiDocumentTitle } from "@/shared/lib/ui-document-title";
 import type { DocBrowserDockControls } from "@/shared/components/doc-browser/doc-browser-context";
@@ -37,12 +41,20 @@ function AppLayoutInner({
   };
 
   useEffect(() => {
-    document.title = resolveUiDocumentTitle(pathname);
+    document.title = resolveUiDocumentTitle(pathname, window.location);
   }, [pathname, language]);
 
   if (isMobile && desktopHostPlatform !== "win32") {
     return (
-      <MobileAppShell pathname={pathname} isDocBrowserOpen={isOpen} docBrowserDockControls={docBrowserDockControls} docBrowserRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} topbarLeadingInset={desktopHostPlatform === "darwin" ? "4.75rem" : undefined}>
+      <MobileAppShell
+        pathname={pathname}
+        isDocBrowserOpen={isOpen}
+        docBrowserDockControls={docBrowserDockControls}
+        docBrowserRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS}
+        topbarLeadingInset={
+          desktopHostPlatform === "darwin" ? "4.75rem" : undefined
+        }
+      >
         {children}
       </MobileAppShell>
     );
@@ -68,7 +80,9 @@ export function AppLayout({ children }: AppLayoutProps) {
 
   return (
     <DocBrowserProvider manager={presenter.docBrowserManager}>
-      <AppLayoutInner sideDockManager={presenter.sideDockManager}>{children}</AppLayoutInner>
+      <AppLayoutInner sideDockManager={presenter.sideDockManager}>
+        {children}
+      </AppLayoutInner>
     </DocBrowserProvider>
   );
 }

package/src/app/components/layout/header.tsx

@@ -5,13 +5,13 @@ interface HeaderProps {
 
 export function Header({ title, description }: HeaderProps) {
   return (
-    <header className="h-14 bg-white/90 backdrop-blur-sm sticky top-0 z-10 flex items-center px-6 transition-all duration-base">
+    <header className="sticky top-0 z-10 flex h-14 items-center bg-background/90 px-6 backdrop-blur-sm transition-all duration-base">
       <div className="flex items-center gap-3">
         {title && (
           <div>
-            <h2 className="text-[15px] font-semibold text-gray-900">{title}</h2>
+            <h2 className="text-[15px] font-semibold text-foreground">{title}</h2>
             {description && (
-              <p className="text-xs text-gray-400 mt-0.5">{description}</p>
+              <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>
             )}
           </div>
         )}

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

@@ -43,9 +43,9 @@ export function PageHeader({ title, description, actions, className }: PageHeade
     return (
         <div className={cn('flex items-center justify-between mb-6 shrink-0', className)}>
             <div>
-                <h2 className="text-xl font-semibold text-gray-900">{title}</h2>
+                <h2 className="text-xl font-semibold text-foreground">{title}</h2>
                 {description && (
-                    <p className="text-sm text-gray-500 mt-1">{description}</p>
+                    <p className="text-sm text-muted-foreground mt-1">{description}</p>
                 )}
             </div>
             {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}

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

@@ -12,7 +12,7 @@ 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)]'
+  inactive: 'bg-muted-foreground/45 shadow-[0_0_0_3px_rgba(156,163,175,0.12)]'
 };
 
 type RuntimeStatusSummary = {
@@ -66,11 +66,11 @@ export function RuntimeStatusEntry() {
       <PopoverContent
         align="start"
         sideOffset={10}
-        className="w-[290px] space-y-3 rounded-2xl border border-gray-200 bg-white p-4"
+        className="w-[290px] space-y-3 rounded-2xl border border-border bg-popover p-4 text-popover-foreground"
       >
         <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 className="text-sm font-semibold text-foreground">{summary.title}</div>
+          <p className="text-xs leading-5 text-muted-foreground">{summary.description}</p>
         </div>
         {summary.reasonLines.length > 0 ? (
           <div className="space-y-2">
@@ -85,13 +85,13 @@ export function RuntimeStatusEntry() {
           </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>
+          <div className="flex items-center justify-between border-t border-border/70 pt-1">
+            <span className="text-[11px] text-muted-foreground">{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"
+              className="text-sm font-semibold text-primary transition-colors hover:text-primary-hover disabled:text-muted-foreground/45"
             >
               {summary.isBusy ? t('runtimeStatusRestartingAction') : summary.actionLabel}
             </button>