@nextclaw/ui 0.24.0 → 0.24.2

package/src/features/account/hooks/use-auth.ts

@@ -1,69 +1,19 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
-  fetchAuthStatus,
   loginAuth,
   logoutAuth,
   setupAuth,
   updateAuthEnabled,
   updateAuthPassword
 } from '@/shared/lib/api';
-import type { AuthStatusView } from '@/shared/lib/api';
 import { toast } from 'sonner';
 import { t } from '@/shared/lib/i18n';
-import { isTransientRuntimeConnectionErrorMessage } from '@/shared/lib/transport';
-
-const AUTH_STATUS_BOOTSTRAP_PROBE_POLICY = {
-  maxRetries: 8,
-  startupTimeoutMs: 2_000,
-  settledTimeoutMs: 5_000,
-  retryBaseDelayMs: 500,
-  retryMaxDelayMs: 3_000,
-} as const;
-
-export function isTransientAuthStatusBootstrapError(error: unknown): boolean {
-  if (!(error instanceof Error)) {
-    return false;
-  }
-  return isTransientRuntimeConnectionErrorMessage(error.message);
-}
-
-export function shouldRetryAuthStatusBootstrap(failureCount: number, error: unknown): boolean {
-  if (failureCount >= AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.maxRetries) {
-    return false;
-  }
-  return isTransientAuthStatusBootstrapError(error);
-}
-
-export function resolveAuthStatusBootstrapRetryDelay(failureCount: number): number {
-  return Math.min(
-    AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.retryMaxDelayMs,
-    AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.retryBaseDelayMs * 2 ** Math.max(0, failureCount - 1)
-  );
-}
-
-export function useAuthStatus() {
-  const [bootstrapSettled, setBootstrapSettled] = useState(false);
-  const query = useQuery<AuthStatusView>({
-    queryKey: ['auth-status'],
-    queryFn: () => fetchAuthStatus({
-      timeoutMs: bootstrapSettled
-        ? AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.settledTimeoutMs
-        : AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.startupTimeoutMs,
-    }),
-    staleTime: 5_000,
-    retry: shouldRetryAuthStatusBootstrap,
-    retryDelay: resolveAuthStatusBootstrapRetryDelay
-  });
-
-  useEffect(() => {
-    if (query.isSuccess && !bootstrapSettled) {
-      setBootstrapSettled(true);
-    }
-  }, [bootstrapSettled, query.isSuccess]);
-
-  return query;
-}
+export {
+  isTransientAuthStatusBootstrapError,
+  resolveAuthStatusBootstrapRetryDelay,
+  shouldRetryAuthStatusBootstrap,
+  useAuthStatus,
+} from "@/shared/hooks/use-auth-status";
 
 function invalidateProtectedQueries(queryClient: ReturnType<typeof useQueryClient>): Promise<unknown[]> {
   return Promise.all([

package/src/features/account/index.ts

@@ -1,4 +1,5 @@
-export { AccountPanel } from './components/account-panel';
-export { LoginPage } from './components/login-page';
 export { AccountManager } from './managers/account.manager';
 export { useAccountStore } from './stores/account.store';
+export async function loadAccountPanel() {
+  return await import('./components/account-panel');
+}

package/src/features/apps/components/__tests__/apps-panel.test.tsx

@@ -14,11 +14,13 @@ vi.mock('@/features/panel-apps', () => ({
   PanelAppsList: () => <div>panel-apps-content</div>,
 }));
 vi.mock('@/features/service-apps', () => ({
-  ServiceAppsPanel: ({ onManagePackage }: { onManagePackage: (packageId: string) => void }) => (
-    <button type="button" onClick={() => onManagePackage('nextclaw.personal-organizer')}>
-      service-apps-content
-    </button>
-  ),
+  loadServiceAppsPanel: async () => ({
+    ServiceAppsPanel: ({ onManagePackage }: { onManagePackage: (packageId: string) => void }) => (
+      <button type="button" onClick={() => onManagePackage('nextclaw.personal-organizer')}>
+        service-apps-content
+      </button>
+    ),
+  }),
 }));
 
 function AppsPanelHarness() {

package/src/features/apps/components/apps-panel.tsx

@@ -1,14 +1,18 @@
-import { useState } from 'react';
+import { lazy, Suspense, useState } from 'react';
 import { AppWindow, Boxes, Server } from 'lucide-react';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import { AppPackagesPanel } from '@/features/apps/components/app-packages-panel';
 import { PanelAppsList } from '@/features/panel-apps';
-import { ServiceAppsPanel } from '@/features/service-apps';
+import { loadServiceAppsPanel } from '@/features/service-apps';
 import { Tabs, TabsList, TabsTrigger } from '@/shared/components/ui/tabs';
 import { t } from '@/shared/lib/i18n';
 
 export type AppsPanelTab = 'apps' | 'panel-apps' | 'service-apps';
 
+const ServiceAppsPanel = lazy(async () => ({
+  default: (await loadServiceAppsPanel()).ServiceAppsPanel,
+}));
+
 export function AppsPanel({
   activeTab,
   onActiveTabChange,
@@ -54,7 +58,9 @@ export function AppsPanel({
         ) : activeTab === 'panel-apps' ? (
           <PanelAppsList onOpenPanelApp={onOpenPanelApp} />
         ) : (
-          <ServiceAppsPanel onManagePackage={managePackage} />
+          <Suspense fallback={null}>
+            <ServiceAppsPanel onManagePackage={managePackage} />
+          </Suspense>
         )}
       </div>
     </div>

package/src/features/chat/features/session/utils/__tests__/chat-sidebar-session-groups.utils.test.ts

@@ -10,7 +10,7 @@ describe("groupSessionsByProject", () => {
       template: "knowledge-base",
       createdAt: "2026-07-15T00:00:00.000Z",
       updatedAt: "2026-07-15T00:00:00.000Z",
-    }]);
+    },]);
 
     expect(groups).toEqual([{
       projectId: "project-knowledge",
@@ -19,6 +19,31 @@ describe("groupSessionsByProject", () => {
       items: [],
       latestUpdatedAt: new Date("2026-07-15T00:00:00.000Z").getTime(),
       isPinned: false,
-    }]);
+    },
+    ]);
+  });
+
+  it("keeps sessions for removed projects out of the project-first view", () => {
+    const groups = groupSessionsByProject(
+      [
+        {
+          session: {
+            key: "session:removed-project",
+            projectRoot: "/tmp/removed",
+            projectName: "Removed",
+            createdAt: "2026-07-15T00:00:00.000Z",
+            updatedAt: "2026-07-15T00:00:00.000Z",
+            sessionType: "native",
+            sessionTypeMutable: false,
+            messageCount: 1,
+          },
+        },
+      ],
+      new Set(),
+      new Set(),
+      [],
+    );
+
+    expect(groups).toEqual([]);
   });
 });

package/src/features/chat/features/session/utils/chat-sidebar-session-groups.utils.ts

@@ -1,6 +1,5 @@
 import type { ProjectView, SessionEntryView } from "@/shared/lib/api";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
-import { getSessionProjectName } from "@/shared/lib/session-project";
 import { t } from "@/shared/lib/i18n";
 
 export type ChatSidebarDateGroup = {
@@ -127,16 +126,6 @@ export function groupSessionsByProject(
       );
       continue;
     }
-    grouped.set(projectRoot, {
-      projectRoot,
-      projectName:
-        item.session.projectName?.trim() ||
-        getSessionProjectName(projectRoot) ||
-        projectRoot,
-      items: [item],
-      latestUpdatedAt: updatedAt,
-      isPinned: pinnedProjectRoots.has(projectRoot),
-    });
   }
 
   return [...grouped.values()]

package/src/features/panel-apps/components/__tests__/panel-app-list-item.test.tsx

@@ -124,4 +124,22 @@ describe('PanelAppListItem', () => {
       preferences: { mainSidebar: false },
     });
   });
+
+  it('offers the standalone app link from the more-actions menu', async () => {
+    const user = userEvent.setup();
+    render(
+      <PanelAppListItem
+        deletePending={false}
+        entry={baseEntry}
+        favoritePending={false}
+        onDelete={vi.fn()}
+        onOpen={vi.fn()}
+        onToggleFavorite={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
+    const link = screen.getByRole('link', { name: 'Open in New Tab' });
+    expect(link.getAttribute('href')).toBe('/apps/panel/demo/standalone');
+  });
 });

package/src/features/panel-apps/components/__tests__/panel-app-open-standalone-menu-item.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PanelAppOpenStandaloneMenuItem } from "@/features/panel-apps/components/panel-app-open-standalone-menu-item";
+import type { PanelAppEntryView } from "@/shared/lib/api";
+
+const entry: PanelAppEntryView = {
+  appId: "publisher.todo board",
+  clientDeclared: false,
+  clientGranted: false,
+  contentPath: "/api/panel-apps/publisher.todo%20board/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: "Todo",
+  updatedAt: "2026-09-03T00:00:00.000Z",
+};
+
+function setDesktopHost(value: Window["nextclawDesktop"] | undefined) {
+  Object.defineProperty(window, "nextclawDesktop", {
+    configurable: true,
+    value,
+  });
+}
+
+describe("PanelAppOpenStandaloneMenuItem", () => {
+  afterEach(() => {
+    setDesktopHost(undefined);
+  });
+
+  it("uses a real new-tab link on the web", () => {
+    const onSelect = vi.fn();
+    setDesktopHost(undefined);
+    render(
+      <PanelAppOpenStandaloneMenuItem entry={entry} onSelect={onSelect} />,
+    );
+
+    const link = screen.getByRole("link", { name: "Open in New Tab" });
+    expect(link.getAttribute("href")).toBe(
+      "/apps/panel/publisher.todo%20board/standalone",
+    );
+    expect(link.getAttribute("target")).toBe("_blank");
+    expect(link.getAttribute("rel")).toBe("noopener noreferrer");
+  });
+
+  it("describes the same link as opening in the browser inside Desktop", () => {
+    setDesktopHost({ platform: "darwin" } as Window["nextclawDesktop"]);
+    render(<PanelAppOpenStandaloneMenuItem entry={entry} />);
+
+    expect(screen.getByRole("link", { name: "Open in Browser" })).toBeTruthy();
+  });
+});

package/src/features/panel-apps/components/__tests__/panel-app-toolbar.test.tsx

@@ -82,4 +82,19 @@ describe('PanelAppToolbar', () => {
       preferences: { mainSidebar: false },
     });
   });
+
+  it('offers the standalone app link from the toolbar menu', async () => {
+    const user = userEvent.setup();
+    render(
+      <PanelAppToolbar
+        appTitle="墨爪助手"
+        entry={entry}
+        onRefresh={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
+    const link = screen.getByRole('link', { name: 'Open in New Tab' });
+    expect(link.getAttribute('href')).toBe('/apps/panel/ink-assistant/standalone');
+  });
 });

package/src/features/panel-apps/components/panel-app-list-item.tsx

@@ -3,6 +3,7 @@ import { MoreVertical, Star, Trash2, type LucideIcon } from 'lucide-react';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import { PanelAppIcon } from '@/features/panel-apps/components/panel-app-icon';
 import { PanelAppMainSidebarMenuItem } from '@/features/panel-apps/components/panel-app-main-sidebar-menu-item';
+import { PanelAppOpenStandaloneMenuItem } from '@/features/panel-apps/components/panel-app-open-standalone-menu-item';
 import { ConfirmDialog } from '@/shared/components/ui/confirm-dialog';
 import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
 import { getLanguage, getLocale, t } from '@/shared/lib/i18n';
@@ -76,6 +77,10 @@ export function PanelAppListItem({
               </button>
             </PopoverTrigger>
             <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+              <PanelAppOpenStandaloneMenuItem
+                entry={entry}
+                onSelect={() => setIsMenuOpen(false)}
+              />
               <PanelAppMainSidebarMenuItem
                 entry={entry}
                 onSelect={() => setIsMenuOpen(false)}

package/src/features/panel-apps/components/panel-app-open-standalone-menu-item.tsx

@@ -0,0 +1,29 @@
+import { ExternalLink } from "lucide-react";
+import type { PanelAppEntryView } from "@/shared/lib/api";
+import { t } from "@/shared/lib/i18n";
+
+export function PanelAppOpenStandaloneMenuItem({
+  entry,
+  onSelect,
+}: {
+  entry: PanelAppEntryView;
+  onSelect?: () => void;
+}) {
+  const label = typeof window !== "undefined" && window.nextclawDesktop
+    ? t("panelAppsOpenInBrowser")
+    : t("panelAppsOpenInNewTab");
+  const href = `/apps/panel/${encodeURIComponent(entry.appId)}/standalone`;
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
+      onClick={onSelect}
+    >
+      <ExternalLink className="h-4 w-4 shrink-0" />
+      <span>{label}</span>
+    </a>
+  );
+}

package/src/features/panel-apps/components/panel-app-runtime-surface.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useMemo, useRef } from "react";
+import { Boxes, RotateCcw } from "lucide-react";
+import { usePanelAppHostPresenter } from "@/features/panel-apps/providers/panel-app-host.provider";
+import { usePanelAppRuntime } from "@/features/panel-apps/hooks/use-panel-app-runtime";
+import { usePanelApp } from "@/features/panel-apps/hooks/use-panel-apps";
+import {
+  PANEL_APP_IFRAME_SANDBOX,
+  focusPanelAppIframe,
+} from "@/features/panel-apps/utils/panel-app-iframe.utils";
+import { usePanelAppScrollRestoration } from "@/shared/hooks/use-panel-app-scroll-restoration";
+import { t } from "@/shared/lib/i18n";
+
+type PanelAppUnavailableAction = {
+  label: string;
+  onAction: () => void;
+};
+
+export function PanelAppRuntimeSurface({
+  appId,
+  restorationScope,
+  unavailableAction,
+}: {
+  appId: string;
+  restorationScope: "main" | "standalone";
+  unavailableAction?: PanelAppUnavailableAction;
+}) {
+  const presenter = usePanelAppHostPresenter();
+  const panelApp = usePanelApp(appId);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const entry = useMemo(
+    () => panelApp.data,
+    [panelApp.data],
+  );
+  const runtime = usePanelAppRuntime(entry);
+  const restoreScroll = usePanelAppScrollRestoration({
+    currentUrl: entry?.contentPath ?? null,
+    iframeRef,
+    isEnabled: Boolean(entry),
+    restorationKey: entry
+      ? `panel-app:${restorationScope}:${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 (panelApp.isLoading) {
+    return <PanelAppRuntimeStatus message={t("panelAppsLoading")} />;
+  }
+
+  if (panelApp.isError) {
+    return (
+      <PanelAppRuntimeStatus
+        message={panelApp.error instanceof Error
+          ? panelApp.error.message
+          : t("panelAppsLoadFailed")}
+        actionLabel={t("panelAppsTryAgain")}
+        onAction={() => void panelApp.refetch()}
+      />
+    );
+  }
+
+  if (!entry) {
+    return (
+      <PanelAppRuntimeStatus
+        message={t("panelAppsMainUnavailable")}
+        actionLabel={unavailableAction?.label}
+        onAction={unavailableAction?.onAction}
+      />
+    );
+  }
+
+  if (runtime.state === "checking" || runtime.state === "idle") {
+    return <PanelAppRuntimeStatus message={t("panelAppsCheckingPermission")} />;
+  }
+
+  if (runtime.state === "denied" || runtime.state === "error") {
+    return (
+      <PanelAppRuntimeStatus
+        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 PanelAppRuntimeStatus({
+  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>
+  );
+}

package/src/features/{service-apps/components/service-action-authorization-dialog.tsx → panel-apps/components/panel-app-service-action-authorization-dialog.tsx}

@@ -9,11 +9,11 @@ import {
 } from '@/shared/components/ui/dialog';
 import { Button } from '@/shared/components/ui/button';
 import { t } from '@/shared/lib/i18n';
-import { useServiceActionAuthorizationStore } from '@/features/service-apps/stores/service-action-authorization.store';
+import { usePanelAppServiceActionAuthorizationStore } from '@/features/panel-apps/stores/panel-app-service-action-authorization.store';
 
-export function ServiceActionAuthorizationDialog() {
-  const pending = useServiceActionAuthorizationStore((state) => state.pending);
-  const resolveAuthorization = useServiceActionAuthorizationStore(
+export function PanelAppServiceActionAuthorizationDialog() {
+  const pending = usePanelAppServiceActionAuthorizationStore((state) => state.pending);
+  const resolveAuthorization = usePanelAppServiceActionAuthorizationStore(
     (state) => state.resolveAuthorization,
   );
 

package/src/features/panel-apps/components/panel-app-toolbar.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { MoreVertical, RefreshCw } from 'lucide-react';
 import { PanelAppMainSidebarMenuItem } from '@/features/panel-apps/components/panel-app-main-sidebar-menu-item';
+import { PanelAppOpenStandaloneMenuItem } from '@/features/panel-apps/components/panel-app-open-standalone-menu-item';
 import { usePanelApps } from '@/features/panel-apps/hooks/use-panel-apps';
 import { readPanelAppIdFromTab } from '@/features/right-panel-resources';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
@@ -39,6 +40,10 @@ export function PanelAppToolbar({
             />
           </PopoverTrigger>
           <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+            <PanelAppOpenStandaloneMenuItem
+              entry={entry}
+              onSelect={() => setIsMenuOpen(false)}
+            />
             <PanelAppMainSidebarMenuItem
               entry={entry}
               onSelect={() => setIsMenuOpen(false)}

package/src/features/panel-apps/hooks/use-panel-app-client-grant.ts

@@ -1,11 +1,11 @@
 import { useCallback, useRef } from "react";
-import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { usePanelAppHostPresenter } from "@/features/panel-apps/providers/panel-app-host.provider";
 import { useGrantPanelAppClient } from "@/features/panel-apps/hooks/use-panel-apps";
 import type { PanelAppEntryView } from "@/shared/lib/api";
 import { t } from "@/shared/lib/i18n";
 
 export function usePanelAppClientGrant() {
-  const presenter = useAppPresenter();
+  const presenter = usePanelAppHostPresenter();
   const { isPending, mutateAsync: grantPanelAppClient } = useGrantPanelAppClient();
   const pendingGrantsRef = useRef(new Map<string, Promise<boolean>>());
 

package/src/features/panel-apps/hooks/{use-panel-app-main-runtime.ts → use-panel-app-runtime.ts}

@@ -2,6 +2,7 @@ import { useId } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { usePanelAppClientGrant } from "@/features/panel-apps/hooks/use-panel-app-client-grant";
 import {
+  PANEL_APP_QUERY_KEY,
   PANEL_APPS_QUERY_KEY,
   replacePanelAppListEntry,
 } from "@/features/panel-apps/hooks/use-panel-apps";
@@ -11,9 +12,9 @@ import {
   type PanelAppListView,
 } from "@/shared/lib/api";
 
-export type PanelAppMainRuntimeState = "allowed" | "checking" | "denied" | "error" | "idle";
+export type PanelAppRuntimeState = "allowed" | "checking" | "denied" | "error" | "idle";
 
-export function usePanelAppMainRuntime(entry: PanelAppEntryView | undefined) {
+export function usePanelAppRuntime(entry: PanelAppEntryView | undefined) {
   const queryClient = useQueryClient();
   const runtimeInstanceId = useId();
   const { ensurePanelAppClientGrant } = usePanelAppClientGrant();
@@ -22,7 +23,7 @@ export function usePanelAppMainRuntime(entry: PanelAppEntryView | undefined) {
   );
   const grantQuery = useQuery({
     queryKey: [
-      "panel-app-main-client-grant",
+      "panel-app-client-grant",
       entry?.appId ?? "none",
       entry?.clientGranted ?? false,
     ],
@@ -32,7 +33,7 @@ export function usePanelAppMainRuntime(entry: PanelAppEntryView | undefined) {
     retry: false,
     staleTime: Number.POSITIVE_INFINITY,
   });
-  const state: PanelAppMainRuntimeState = !entry
+  const state: PanelAppRuntimeState = !entry
     ? "idle"
     : !requiresClientGrant
       ? "allowed"
@@ -45,13 +46,14 @@ export function usePanelAppMainRuntime(entry: PanelAppEntryView | undefined) {
             : "denied";
 
   useQuery({
-    queryKey: ["panel-app-main-open", runtimeInstanceId, entry?.appId ?? "none"],
+    queryKey: ["panel-app-open", runtimeInstanceId, entry?.appId ?? "none"],
     queryFn: async () => {
       const opened = await nextclawClient.panelApps.recordPanelAppOpened(entry!.id);
       queryClient.setQueryData<PanelAppListView>(
         PANEL_APPS_QUERY_KEY,
         (current) => replacePanelAppListEntry(current, opened),
       );
+      queryClient.setQueryData([...PANEL_APP_QUERY_KEY, opened.appId], opened);
       return opened;
     },
     enabled: Boolean(entry && state === "allowed"),

package/src/features/panel-apps/hooks/use-panel-apps.ts

@@ -9,6 +9,7 @@ import type {
 import { t } from '@/shared/lib/i18n';
 
 export const PANEL_APPS_QUERY_KEY = ['panel-apps'] as const;
+export const PANEL_APP_QUERY_KEY = ['panel-app'] as const;
 
 type PanelAppPreferencesMutation = {
   id: string;
@@ -75,6 +76,15 @@ export function usePanelApps(options: { enabled?: boolean } = {}) {
   });
 }
 
+export function usePanelApp(id: string, options: { enabled?: boolean } = {}) {
+  return useQuery({
+    queryKey: [...PANEL_APP_QUERY_KEY, id],
+    queryFn: () => nextclawClient.panelApps.getPanelApp(id),
+    enabled: Boolean(id) && (options.enabled ?? true),
+    staleTime: 5_000,
+  });
+}
+
 export function useUpdatePanelAppPreferences() {
   const queryClient = useQueryClient();
   return useMutation({
@@ -96,6 +106,7 @@ export function useUpdatePanelAppPreferences() {
         PANEL_APPS_QUERY_KEY,
         (current) => replacePanelAppListEntry(current, entry),
       );
+      queryClient.setQueryData([...PANEL_APP_QUERY_KEY, entry.appId], entry);
     },
     onError: (error, mutation, context) => {
       const previousEntry = context?.previousEntry;
@@ -124,6 +135,7 @@ export function useRecordPanelAppOpened() {
         PANEL_APPS_QUERY_KEY,
         (current) => replacePanelAppListEntry(current, entry),
       );
+      queryClient.setQueryData([...PANEL_APP_QUERY_KEY, entry.appId], entry);
     },
   });
 }
@@ -134,6 +146,7 @@ export function useGrantPanelAppClient() {
     mutationFn: (appId: string) => nextclawClient.panelApps.grantClient(appId),
     onSuccess: () => {
       void queryClient.invalidateQueries({ queryKey: PANEL_APPS_QUERY_KEY });
+      void queryClient.invalidateQueries({ queryKey: PANEL_APP_QUERY_KEY });
     },
   });
 }
@@ -144,6 +157,7 @@ export function useDeletePanelApp() {
     mutationFn: (id: string) => nextclawClient.panelApps.deletePanelApp(id),
     onSuccess: () => {
       void queryClient.invalidateQueries({ queryKey: PANEL_APPS_QUERY_KEY });
+      void queryClient.invalidateQueries({ queryKey: PANEL_APP_QUERY_KEY });
     },
   });
 }

package/src/features/panel-apps/index.ts

@@ -1,7 +1,12 @@
 export { PanelAppsList } from './components/panel-apps-list';
 export { PanelAppMainSidebarNav } from './components/panel-app-main-sidebar-nav';
 export { PanelAppMainPage } from './pages/panel-app-main-page';
+export { PanelAppStandalonePage } from './pages/panel-app-standalone-page';
+export { PanelAppServiceActionAuthorizationDialog } from './components/panel-app-service-action-authorization-dialog';
+export { PanelAppHostPresenter } from './presenters/panel-app-host.presenter';
+export { PanelAppHostProvider } from './providers/panel-app-host.provider';
 export {
+  usePanelApp,
   useGrantPanelAppClient,
   usePanelApps,
   useRecordPanelAppOpened,