@nextclaw/ui 0.24.0 → 0.24.2

package/src/features/panel-apps/managers/__tests__/panel-app-bridge.manager.test.ts

@@ -2,7 +2,7 @@ import { NextClawClientError } from '@nextclaw/client-sdk';
 import { waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { PanelAppBridgeManager } from '@/features/panel-apps/managers/panel-app-bridge.manager';
-import type { ServiceActionAuthorizationManager } from '@/features/service-apps';
+import type { PanelAppServiceActionAuthorizationManager } from '@/features/panel-apps/managers/panel-app-service-action-authorization.manager';
 
 const mocks = vi.hoisted(() => ({
   generateAgentObject: vi.fn(),
@@ -45,7 +45,7 @@ afterEach(() => {
 function createManager(): PanelAppBridgeManager {
   return new PanelAppBridgeManager({
     requestAuthorization: mocks.requestAuthorization,
-  } as unknown as ServiceActionAuthorizationManager);
+  } as unknown as PanelAppServiceActionAuthorizationManager);
 }
 
 function createIframeHarness(manager: PanelAppBridgeManager) {

package/src/features/panel-apps/managers/panel-app-bridge.manager.ts

@@ -13,7 +13,7 @@ import type {
   PortableRuntimeAcceptanceStatusApiView,
   RuntimeVerificationRecordListView,
 } from '@nextclaw/client-sdk';
-import type { ServiceActionAuthorizationManager } from '@/features/service-apps';
+import type { PanelAppServiceActionAuthorizationManager } from '@/features/panel-apps/managers/panel-app-service-action-authorization.manager';
 import { nextclawClient } from '@/shared/lib/api';
 
 export type PanelAppIframeMessageParams = {
@@ -71,7 +71,7 @@ type PanelAppBridgeResponse =
     };
 
 export class PanelAppBridgeManager {
-  constructor(private readonly authorizationManager: ServiceActionAuthorizationManager) {}
+  constructor(private readonly authorizationManager: PanelAppServiceActionAuthorizationManager) {}
 
   handleIframeMessage = ({ event, iframe }: PanelAppIframeMessageParams): void => {
     if (!this.isBridgeRequest(event.data)) {

package/src/features/panel-apps/managers/panel-app-service-action-authorization.manager.ts

@@ -0,0 +1,10 @@
+import { usePanelAppServiceActionAuthorizationStore } from '@/features/panel-apps/stores/panel-app-service-action-authorization.store';
+import type { PanelAppServiceActionAuthorizationRequest } from '@/features/panel-apps/stores/panel-app-service-action-authorization.store';
+
+export class PanelAppServiceActionAuthorizationManager {
+  requestAuthorization = async (
+    request: Omit<PanelAppServiceActionAuthorizationRequest, 'id'>,
+  ): Promise<boolean> => {
+    return await usePanelAppServiceActionAuthorizationStore.getState().requestAuthorization(request);
+  };
+}

package/src/features/panel-apps/pages/__tests__/panel-app-main-page.test.tsx

@@ -19,8 +19,8 @@ const mocks = vi.hoisted(() => ({
   updatePreferences: vi.fn(),
 }));
 
-vi.mock("@/app/components/app-presenter-provider", () => ({
-  useAppPresenter: () => ({
+vi.mock("@/features/panel-apps/providers/panel-app-host.provider", () => ({
+  usePanelAppHostPresenter: () => ({
     panelAppBridgeManager: { handleIframeMessage: mocks.bridgeMessage },
   }),
 }));
@@ -33,6 +33,15 @@ vi.mock("@/features/panel-apps/hooks/use-panel-app-client-grant", () => ({
 }));
 
 vi.mock("@/features/panel-apps/hooks/use-panel-apps", () => ({
+  PANEL_APP_QUERY_KEY: ["panel-app"],
+  PANEL_APPS_QUERY_KEY: ["panel-apps"],
+  usePanelApp: (appId: string) => ({
+    data: mocks.entries.find((entry) => entry.appId === appId),
+    error: null,
+    isError: false,
+    isLoading: false,
+    refetch: mocks.refetch,
+  }),
   usePanelApps: () => ({
     data: { entries: mocks.entries },
     error: null,
@@ -161,7 +170,7 @@ describe("PanelAppMainPage", () => {
 
     first.unmount();
     await waitFor(() => expect(queryClient.getQueryData([
-      "panel-app-main-client-grant",
+      "panel-app-client-grant",
       "publisher.todo",
       false,
     ])).toBeUndefined());

package/src/features/panel-apps/pages/__tests__/panel-app-standalone-page.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PanelAppStandalonePage } from "@/features/panel-apps/pages/panel-app-standalone-page";
+import type { PanelAppEntryView } from "@/shared/lib/api";
+
+const entry: PanelAppEntryView = {
+  appId: "publisher.todo",
+  clientDeclared: false,
+  clientGranted: false,
+  contentPath: "/api/panel-apps/publisher.todo/content",
+  createdAt: "2026-09-03T00:00:00.000Z",
+  favorite: false,
+  fileName: "todo.panel.html",
+  id: "todo",
+  kind: "single-file",
+  mainSidebar: false,
+  openCount: 0,
+  sizeBytes: 10,
+  title: "Rust Todo",
+  updatedAt: "2026-09-03T00:00:00.000Z",
+};
+
+vi.mock("@/features/panel-apps/hooks/use-panel-apps", () => ({
+  usePanelApp: () => ({
+    data: entry,
+  }),
+}));
+
+vi.mock("@/features/panel-apps/components/panel-app-runtime-surface", () => ({
+  PanelAppRuntimeSurface: ({
+    appId,
+    restorationScope,
+  }: {
+    appId: string;
+    restorationScope: string;
+  }) => (
+    <div
+      data-testid="panel-app-runtime-surface"
+      data-app-id={appId}
+      data-restoration-scope={restorationScope}
+    />
+  ),
+}));
+
+describe("PanelAppStandalonePage", () => {
+  const originalTitle = document.title;
+
+  afterEach(() => {
+    document.title = originalTitle;
+  });
+
+  it("renders only the standalone runtime surface and sets the tab title", () => {
+    const { container } = render(
+      <PanelAppStandalonePage appId="publisher.todo" />,
+    );
+
+    const surface = screen.getByTestId("panel-app-runtime-surface");
+    expect(surface.getAttribute("data-app-id")).toBe("publisher.todo");
+    expect(surface.getAttribute("data-restoration-scope")).toBe("standalone");
+    expect(document.title).toBe("Rust Todo · NextClaw");
+    expect(container.querySelector("main")?.children).toHaveLength(1);
+  });
+});

package/src/features/panel-apps/pages/panel-app-main-page.tsx

@@ -1,133 +1,21 @@
-import { useEffect, useMemo, useRef } from "react";
-import { Boxes, RotateCcw } from "lucide-react";
 import { useParams } from "react-router-dom";
-import { useAppPresenter } from "@/app/components/app-presenter-provider";
-import { usePanelAppMainRuntime } from "@/features/panel-apps/hooks/use-panel-app-main-runtime";
-import {
-  usePanelApps,
-} from "@/features/panel-apps/hooks/use-panel-apps";
-import {
-  PANEL_APP_IFRAME_SANDBOX,
-  focusPanelAppIframe,
-} from "@/features/panel-apps/utils/panel-app-iframe.utils";
+import { PanelAppRuntimeSurface } from "@/features/panel-apps/components/panel-app-runtime-surface";
 import { openApps } from "@/features/panel-apps/utils/panel-app-doc-browser.utils";
 import { useDocBrowser } from "@/shared/components/doc-browser";
-import { usePanelAppScrollRestoration } from "@/shared/hooks/use-panel-app-scroll-restoration";
 import { t } from "@/shared/lib/i18n";
 
 export function PanelAppMainPage() {
   const { appId = "" } = useParams<{ appId: string }>();
-  const presenter = useAppPresenter();
   const docBrowser = useDocBrowser();
-  const panelApps = usePanelApps();
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const entry = useMemo(
-    () => panelApps.data?.entries.find((candidate) => candidate.appId === appId),
-    [appId, panelApps.data?.entries],
-  );
-  const runtime = usePanelAppMainRuntime(entry);
-  const restoreScroll = usePanelAppScrollRestoration({
-    currentUrl: entry?.contentPath ?? null,
-    iframeRef,
-    isEnabled: Boolean(entry),
-    restorationKey: entry ? `panel-app:main:${entry.appId}` : null,
-  });
-
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      presenter.panelAppBridgeManager.handleIframeMessage({
-        event,
-        iframe: iframeRef.current,
-      });
-    };
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [presenter]);
-
-  if (panelApps.isLoading) {
-    return <PanelAppMainStatus message={t("panelAppsLoading")} />;
-  }
-
-  if (panelApps.isError) {
-    return (
-      <PanelAppMainStatus
-        message={panelApps.error instanceof Error
-          ? panelApps.error.message
-          : t("panelAppsLoadFailed")}
-        actionLabel={t("panelAppsTryAgain")}
-        onAction={() => void panelApps.refetch()}
-      />
-    );
-  }
-
-  if (!entry) {
-    return (
-      <PanelAppMainStatus
-        message={t("panelAppsMainUnavailable")}
-        actionLabel={t("panelAppsOpenApps")}
-        onAction={() => openApps(docBrowser)}
-      />
-    );
-  }
-
-  if (runtime.state === "checking" || runtime.state === "idle") {
-    return <PanelAppMainStatus message={t("panelAppsCheckingPermission")} />;
-  }
-
-  if (runtime.state === "denied" || runtime.state === "error") {
-    return (
-      <PanelAppMainStatus
-        message={runtime.state === "denied"
-          ? t("panelAppsPermissionDenied")
-          : t("panelAppsPermissionFailed")}
-        actionLabel={t("panelAppsTryAgain")}
-        onAction={() => void runtime.retryClientGrant()}
-      />
-    );
-  }
-
-  return (
-    <div className="h-full min-h-0 bg-background">
-      <iframe
-        key={entry.appId}
-        ref={iframeRef}
-        src={entry.contentPath}
-        title={entry.title}
-        sandbox={PANEL_APP_IFRAME_SANDBOX}
-        className="block h-full w-full border-0 bg-background"
-        onLoad={restoreScroll}
-        onPointerOver={(event) => focusPanelAppIframe(event.currentTarget)}
-      />
-    </div>
-  );
-}
 
-function PanelAppMainStatus({
-  actionLabel,
-  message,
-  onAction,
-}: {
-  actionLabel?: string;
-  message: string;
-  onAction?: () => void;
-}) {
   return (
-    <div className="flex h-full min-h-0 items-center justify-center bg-background px-6 text-center">
-      <div className="max-w-sm">
-        <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground">
-          {onAction ? <RotateCcw className="h-5 w-5" /> : <Boxes className="h-5 w-5" />}
-        </div>
-        <p className="mt-3 text-sm leading-6 text-muted-foreground">{message}</p>
-        {actionLabel && onAction ? (
-          <button
-            type="button"
-            className="mt-4 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
-            onClick={onAction}
-          >
-            {actionLabel}
-          </button>
-        ) : null}
-      </div>
-    </div>
+    <PanelAppRuntimeSurface
+      appId={appId}
+      restorationScope="main"
+      unavailableAction={{
+        label: t("panelAppsOpenApps"),
+        onAction: () => openApps(docBrowser),
+      }}
+    />
   );
 }

package/src/features/panel-apps/pages/panel-app-standalone-page.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useMemo } from "react";
+import { PanelAppRuntimeSurface } from "@/features/panel-apps/components/panel-app-runtime-surface";
+import { usePanelApp } from "@/features/panel-apps/hooks/use-panel-apps";
+import { t } from "@/shared/lib/i18n";
+
+export function PanelAppStandalonePage({ appId }: { appId: string }) {
+  const panelApp = usePanelApp(appId);
+  const entry = useMemo(
+    () => panelApp.data,
+    [panelApp.data],
+  );
+
+  useEffect(() => {
+    const previousTitle = document.title;
+    document.title = `${entry?.title ?? t("panelAppsTitle")} · NextClaw`;
+    return () => {
+      document.title = previousTitle;
+    };
+  }, [entry?.title]);
+
+  return (
+    <main className="h-dvh min-h-0 w-full overflow-hidden bg-background">
+      <PanelAppRuntimeSurface
+        appId={appId}
+        restorationScope="standalone"
+      />
+    </main>
+  );
+}

package/src/features/panel-apps/presenters/panel-app-host.presenter.ts

@@ -0,0 +1,9 @@
+import { PanelAppBridgeManager } from "@/features/panel-apps/managers/panel-app-bridge.manager";
+import { PanelAppServiceActionAuthorizationManager } from "@/features/panel-apps/managers/panel-app-service-action-authorization.manager";
+
+export class PanelAppHostPresenter {
+  readonly serviceActionAuthorizationManager = new PanelAppServiceActionAuthorizationManager();
+  readonly panelAppBridgeManager = new PanelAppBridgeManager(
+    this.serviceActionAuthorizationManager,
+  );
+}

package/src/features/panel-apps/providers/panel-app-host.provider.tsx

@@ -0,0 +1,45 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type Context,
+  type ReactNode,
+} from "react";
+import { PanelAppHostPresenter } from "@/features/panel-apps/presenters/panel-app-host.presenter";
+
+type PanelAppHostContextGlobal = typeof globalThis & {
+  __NEXTCLAW_PANEL_APP_HOST_CONTEXT__?: Context<PanelAppHostPresenter | null>;
+};
+
+const contextGlobal = globalThis as PanelAppHostContextGlobal;
+const PanelAppHostContext =
+  contextGlobal.__NEXTCLAW_PANEL_APP_HOST_CONTEXT__ ??
+  createContext<PanelAppHostPresenter | null>(null);
+
+contextGlobal.__NEXTCLAW_PANEL_APP_HOST_CONTEXT__ = PanelAppHostContext;
+
+export function PanelAppHostProvider({
+  children,
+  presenter: providedPresenter,
+}: {
+  children: ReactNode;
+  presenter?: PanelAppHostPresenter;
+}) {
+  const presenter = useMemo(
+    () => providedPresenter ?? new PanelAppHostPresenter(),
+    [providedPresenter],
+  );
+  return (
+    <PanelAppHostContext.Provider value={presenter}>
+      {children}
+    </PanelAppHostContext.Provider>
+  );
+}
+
+export function usePanelAppHostPresenter(): PanelAppHostPresenter {
+  const presenter = useContext(PanelAppHostContext);
+  if (!presenter) {
+    throw new Error("usePanelAppHostPresenter must be used inside PanelAppHostProvider");
+  }
+  return presenter;
+}

package/src/features/panel-apps/routes/__tests__/panel-app-standalone.route.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  PanelAppStandaloneRoute,
+  readStandalonePanelAppId,
+} from '@/features/panel-apps/routes/panel-app-standalone.route';
+
+vi.mock('sonner', () => ({
+  Toaster: () => <div data-testid="toaster" />,
+}));
+
+vi.mock('@/shared/hooks/use-auth-status', () => ({
+  isTransientAuthStatusBootstrapError: () => false,
+  useAuthStatus: () => ({
+    data: { authenticated: true, enabled: false },
+    isError: false,
+    isLoading: false,
+  }),
+}));
+
+vi.mock('@/features/panel-apps/pages/panel-app-standalone-page', () => ({
+  PanelAppStandalonePage: ({ appId }: { appId: string }) => (
+    <main data-testid="standalone-panel-app" data-app-id={appId} />
+  ),
+}));
+
+vi.mock('@/features/panel-apps/providers/panel-app-host.provider', () => ({
+  PanelAppHostProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+vi.mock('@/features/panel-apps/components/panel-app-service-action-authorization-dialog', () => ({
+  PanelAppServiceActionAuthorizationDialog: () => <div data-testid="authorization-dialog" />,
+}));
+
+describe('PanelAppStandaloneRoute', () => {
+  it('parses only the dedicated standalone route', () => {
+    expect(readStandalonePanelAppId('/apps/panel/publisher.todo/standalone')).toBe('publisher.todo');
+    expect(readStandalonePanelAppId('/apps/panel/a%20b/standalone/')).toBe('a b');
+    expect(readStandalonePanelAppId('/apps/panel/publisher.todo')).toBeNull();
+  });
+
+  it('renders the lightweight Panel host for the requested app', () => {
+    render(<PanelAppStandaloneRoute pathname="/apps/panel/publisher.todo/standalone" />);
+
+    expect(screen.getByTestId('standalone-panel-app').getAttribute('data-app-id'))
+      .toBe('publisher.todo');
+    expect(screen.getByTestId('authorization-dialog')).toBeTruthy();
+    expect(screen.getByTestId('toaster')).toBeTruthy();
+  });
+});

package/src/features/panel-apps/routes/panel-app-standalone.route.tsx

@@ -0,0 +1,94 @@
+import { lazy, StrictMode, Suspense } from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { Toaster } from 'sonner';
+import { appQueryClient } from '@/app-query-client';
+import { I18nProvider } from '@/app/components/i18n-provider';
+import { ThemeProvider } from '@/app/components/theme-provider';
+import { PanelAppStandalonePage } from '@/features/panel-apps/pages/panel-app-standalone-page';
+import { PanelAppHostProvider } from '@/features/panel-apps/providers/panel-app-host.provider';
+import { PanelAppServiceActionAuthorizationDialog } from '@/features/panel-apps/components/panel-app-service-action-authorization-dialog';
+import { installPanelAppI18nCatalog, t } from '@/shared/lib/i18n';
+import { isTransientAuthStatusBootstrapError, useAuthStatus } from '@/shared/hooks/use-auth-status';
+import '@/app/styles/panel-app-standalone.css';
+
+const LoginPage = lazy(async () => ({
+  default: (await import('@/features/account/components/login-page')).LoginPage,
+}));
+
+const PANEL_APP_STANDALONE_PATH = /^\/apps\/panel\/([^/]+)\/standalone\/?$/;
+
+export function readStandalonePanelAppId(pathname: string): string | null {
+  const match = PANEL_APP_STANDALONE_PATH.exec(pathname);
+  if (!match) return null;
+  try {
+    return decodeURIComponent(match[1]);
+  } catch {
+    return null;
+  }
+}
+
+function StandaloneAuthGate({ appId }: { appId: string }) {
+  const authStatus = useAuthStatus();
+  const isTransientBootstrapFailure =
+    authStatus.isError && isTransientAuthStatusBootstrapError(authStatus.error);
+
+  if (
+    (authStatus.isLoading && !authStatus.isError) ||
+    isTransientBootstrapFailure ||
+    authStatus.isError
+  ) {
+    return <PanelAppStandalonePage appId={appId} />;
+  }
+
+  if (authStatus.data?.enabled && !authStatus.data.authenticated) {
+    return (
+      <Suspense fallback={<StandaloneStatus message={t('loading')} />}>
+        <LoginPage username={authStatus.data.username} />
+      </Suspense>
+    );
+  }
+
+  return <PanelAppStandalonePage appId={appId} />;
+}
+
+function StandaloneStatus({ message }: { message: string }) {
+  return (
+    <main className="flex h-dvh items-center justify-center bg-background px-6 text-sm text-muted-foreground">
+      {message}
+    </main>
+  );
+}
+
+export function PanelAppStandaloneRoute({ pathname = window.location.pathname }: { pathname?: string }) {
+  const appId = readStandalonePanelAppId(pathname);
+
+  if (!appId) {
+    return <StandaloneStatus message={t('panelAppsMainUnavailable')} />;
+  }
+
+  return (
+    <QueryClientProvider client={appQueryClient}>
+      <PanelAppHostProvider>
+        <StandaloneAuthGate appId={appId} />
+        <PanelAppServiceActionAuthorizationDialog />
+        <Toaster position="top-right" richColors offset={16} />
+      </PanelAppHostProvider>
+    </QueryClientProvider>
+  );
+}
+
+await installPanelAppI18nCatalog();
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  createRoot(rootElement).render(
+    <StrictMode>
+      <ThemeProvider>
+        <I18nProvider>
+          <PanelAppStandaloneRoute />
+        </I18nProvider>
+      </ThemeProvider>
+    </StrictMode>,
+  );
+}

package/src/features/{service-apps/stores/service-action-authorization.store.ts → panel-apps/stores/panel-app-service-action-authorization.store.ts}

@@ -3,28 +3,28 @@ import type { ServiceActionListView } from '@nextclaw/client-sdk';
 
 type ServiceActionRisk = ServiceActionListView['actions'][number]['risk'];
 
-export type ServiceActionAuthorizationItem = {
+export type PanelAppServiceActionAuthorizationItem = {
   actionId: string;
   actionTitle?: string;
   actionDescription?: string;
   risk?: ServiceActionRisk;
 };
 
-export type ServiceActionAuthorizationRequest = {
+export type PanelAppServiceActionAuthorizationRequest = {
   id: string;
   panelAppId: string;
-  actions: ServiceActionAuthorizationItem[];
+  actions: PanelAppServiceActionAuthorizationItem[];
   inputPreview?: string;
 };
 
-type PendingAuthorization = ServiceActionAuthorizationRequest & {
+type PendingAuthorization = PanelAppServiceActionAuthorizationRequest & {
   resolve: (allowed: boolean) => void;
 };
 
 type ServiceActionAuthorizationState = {
   pending: PendingAuthorization | null;
   requestAuthorization: (
-    request: Omit<ServiceActionAuthorizationRequest, 'id'>,
+    request: Omit<PanelAppServiceActionAuthorizationRequest, 'id'>,
   ) => Promise<boolean>;
   resolveAuthorization: (allowed: boolean) => void;
 };
@@ -33,7 +33,7 @@ function createAuthorizationId(): string {
   return `service-action-auth-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
 }
 
-export const useServiceActionAuthorizationStore = create<ServiceActionAuthorizationState>((set, get) => ({
+export const usePanelAppServiceActionAuthorizationStore = create<ServiceActionAuthorizationState>((set, get) => ({
   pending: null,
   requestAuthorization: async (request) =>
     await new Promise<boolean>((resolve) => {

package/src/features/projects/components/project-overview.test.tsx

@@ -0,0 +1,70 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ProjectOverview } from "./project-overview";
+
+vi.mock("@/features/projects/hooks/use-project-work", () => ({
+  useProjectWorkEvents: vi.fn(),
+  useProjectWorkSummary: () => ({
+    data: { total: 4, active: 2, attention: 1, completed: 1 },
+    isLoading: false,
+    isError: false,
+  }),
+  useProjectWork: () => ({
+    data: {
+      pages: [
+        {
+          items: [
+            {
+              id: "work-1",
+              title: "Current work",
+              state: { name: "In Progress" },
+            },
+          ],
+        },
+      ],
+    },
+    isLoading: false,
+    isError: false,
+  }),
+  useProjectRecentArtifacts: () => ({
+    data: {
+      artifacts: [
+        {
+          id: "artifact-1",
+          path: "docs/design.md",
+          label: "Design",
+          workItemTitle: "Current work",
+          createdAt: "2026-09-03T00:00:00.000Z",
+          exists: true,
+        },
+      ],
+    },
+    isLoading: false,
+    isError: false,
+  }),
+}));
+
+describe("ProjectOverview", () => {
+  it("renders current work and recent artifacts as equal wide-layout columns", () => {
+    const onOpenWorkItem = vi.fn();
+    const onOpenArtifact = vi.fn();
+    const { container } = render(
+      <ProjectOverview
+        projectId="project-1"
+        onOpenWorkItem={onOpenWorkItem}
+        onOpenArtifact={onOpenArtifact}
+      />,
+    );
+
+    expect(screen.getByText(/Recently updated|最近更新/)).toBeTruthy();
+    expect(screen.getByText(/Recent artifacts|最近产物/)).toBeTruthy();
+    expect(container.querySelector(".lg\\:grid-cols-2")).toBeTruthy();
+
+    fireEvent.click(
+      screen.getAllByRole("button", { name: /Current work/ })[0]!,
+    );
+    fireEvent.click(screen.getByRole("button", { name: /Design/ }));
+    expect(onOpenWorkItem).toHaveBeenCalledWith("work-1");
+    expect(onOpenArtifact).toHaveBeenCalledWith("docs/design.md", "Design");
+  });
+});