@nextclaw/ui 0.25.4 → 0.26.0

package/src/platforms/mobile/components/mobile-app-shell.tsx

@@ -1,3 +1,4 @@
+import { CurrentPageActions } from '@/features/right-panel-resources';
 import { lazy, Suspense } from "react";
 import {
   isChatSessionDetailRoute,
@@ -25,7 +26,6 @@ type MobileAppShellProps = {
 
 export function MobileAppShell({
   pathname,
-  isDocBrowserOpen,
   docBrowserDockControls,
   docBrowserRenderers = {},
   docBrowserTabMenuGroups,
@@ -33,12 +33,13 @@ export function MobileAppShell({
   children,
 }: MobileAppShellProps) {
   const isMainRoute = isMainWorkspaceRoute(pathname);
-  const showTopbar = !isChatSessionDetailRoute(pathname);
+  const showTopbar = pathname !== '/chat' && !isChatSessionDetailRoute(pathname);
   const showBottomNav = !isChatSessionDetailRoute(pathname);
 
   return (
     <div className="flex h-[100svh] flex-col bg-background font-sans text-foreground supports-[height:100dvh]:h-[100dvh]">
       {showTopbar ? <MobileTopbar leadingInset={topbarLeadingInset} /> : null}
+      {!isMainRoute ? <CurrentPageActions /> : null}
       <div className="relative flex-1 min-h-0 overflow-hidden">
         {isMainRoute ? (
           <div className="h-full min-h-0 overflow-hidden">{children}</div>
@@ -49,7 +50,7 @@ export function MobileAppShell({
         )}
       </div>
       {showBottomNav ? <MobileBottomNav /> : null}
-      {isDocBrowserOpen ? (
+      {(
         <Suspense fallback={null}>
           <DocBrowser
             customTabRenderers={docBrowserRenderers}
@@ -58,7 +59,7 @@ export function MobileAppShell({
             getTabMenuGroups={docBrowserTabMenuGroups}
           />
         </Suspense>
-      ) : null}
+      )}
     </div>
   );
 }

package/src/platforms/mobile/components/mobile-bottom-nav.tsx

@@ -20,7 +20,7 @@ export function MobileBottomNav() {
     <nav
       data-testid="mobile-bottom-nav"
       aria-label={t("settings")}
-      className="shrink-0 border-t border-gray-200/80 bg-white/95 backdrop-blur-sm"
+      className="shrink-0 border-t border-border/60 bg-background text-foreground"
       style={{
         paddingBottom: "calc(env(safe-area-inset-bottom, 0px) + 0.25rem)",
       }}
@@ -39,19 +39,19 @@ export function MobileBottomNav() {
                 className={cn(
                   "group flex min-h-[2.875rem] flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 text-[10px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                   active
-                    ? "bg-gray-100 text-gray-900"
-                    : "text-gray-500 hover:bg-gray-50 hover:text-gray-800",
+                    ? "bg-muted text-foreground"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                 )}
               >
                 <span className="relative">
                   <item.icon
                     className={cn(
                       "h-3.5 w-3.5",
-                      active ? "text-gray-900" : "text-gray-400",
+                      active ? "text-foreground" : "text-muted-foreground",
                     )}
                   />
                   {item.target === "/inbox" && unreadCount > 0 ? (
-                    <span className="absolute -right-1 -top-1 h-1.5 w-1.5 rounded-full bg-primary ring-1 ring-white" />
+                    <span className="absolute -right-1 -top-1 h-1.5 w-1.5 rounded-full bg-primary ring-1 ring-background" />
                   ) : null}
                 </span>
                 <span className="max-w-full truncate">{item.label}</span>
@@ -63,9 +63,9 @@ export function MobileBottomNav() {
           <button
             type="button"
             onClick={() => openApps(docBrowser)}
-            className="group flex min-h-[2.875rem] w-full flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 text-[10px] font-medium text-gray-500 transition-colors hover:bg-gray-50 hover:text-gray-800 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            className="group flex min-h-[2.875rem] w-full flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
-            <Boxes className="h-3.5 w-3.5 text-gray-400" />
+            <Boxes className="h-3.5 w-3.5 text-muted-foreground" />
             <span className="max-w-full truncate">{t("appsTitle")}</span>
           </button>
         </li>

package/src/platforms/mobile/components/mobile-topbar.tsx

@@ -11,7 +11,7 @@ export function MobileTopbar({ leadingInset }: { leadingInset?: string }) {
   return (
     <header
       data-testid="mobile-topbar"
-      className="shrink-0 border-b border-gray-200/80 bg-white/95 backdrop-blur-sm"
+      className="shrink-0 border-b border-border/60 bg-secondary text-foreground"
       style={{
         paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.25rem)",
       }}
@@ -24,18 +24,18 @@ export function MobileTopbar({ leadingInset }: { leadingInset?: string }) {
           <button
             type="button"
             onClick={() => navigate(routeMeta.backTarget as string)}
-            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-gray-200 text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900"
+            className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
             aria-label={routeMeta.backLabel ?? t("backToMain")}
           >
             <ArrowLeft className="h-4 w-4" />
           </button>
         ) : null}
         <div className="min-w-0 flex-1">
-          <h1 className="truncate text-center text-[15px] font-semibold text-gray-900">
+          <h1 className="truncate text-center text-[17px] font-semibold text-foreground">
             {routeMeta.title}
           </h1>
         </div>
-        {routeMeta.backTarget ? <div className="h-8 w-8 shrink-0" aria-hidden="true" /> : null}
+        {routeMeta.backTarget ? <div className="h-11 w-11 shrink-0" aria-hidden="true" /> : null}
       </div>
     </header>
   );

package/src/shared/components/doc-browser/__tests__/doc-browser-context.test.tsx

@@ -1,3 +1,4 @@
+import { WorkbenchSurfaceManager } from '@/shared/components/workbench/managers/workbench-surface.manager';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { DocBrowserProvider, useDocBrowser } from '@/shared/components/doc-browser/doc-browser-context';
@@ -18,7 +19,7 @@ const wrapper = ({ children }: { children: ReactNode }) => (
   <DocBrowserProvider manager={testDocBrowserManager}>{children}</DocBrowserProvider>
 );
 
-const testDocBrowserManager = new DocBrowserManager(new RightPanelResourceRouteResolver());
+const testDocBrowserManager = new DocBrowserManager(new WorkbenchSurfaceManager(), new RightPanelResourceRouteResolver());
 
 const docBrowserStorageKey = 'nextclaw.doc-browser.state';
 
@@ -56,7 +57,7 @@ async function resetMemoryThenRehydrate(savedState: string | null) {
 describe('DocBrowserManager layout notifications', () => {
   it('notifies the app layout coordinator after opening the docked browser', () => {
     const onRightPanelOpened = vi.fn();
-    const manager = new DocBrowserManager(
+    const manager = new DocBrowserManager(new WorkbenchSurfaceManager(),
       new RightPanelResourceRouteResolver(),
       onRightPanelOpened,
     );
@@ -71,7 +72,7 @@ describe('DocBrowserManager layout notifications', () => {
 
   it('notifies the app layout coordinator after changing dock mode', () => {
     const onRightPanelOpened = vi.fn();
-    const manager = new DocBrowserManager(
+    const manager = new DocBrowserManager(new WorkbenchSurfaceManager(),
       new RightPanelResourceRouteResolver(),
       onRightPanelOpened,
     );

package/src/shared/components/doc-browser/__tests__/doc-browser-tab-strip.test.tsx

@@ -20,16 +20,11 @@ function renderTabStrip(tabs: DocBrowserTab[]) {
       activeTabId={tabs[0]?.id ?? ""}
       canGoBack={false}
       canGoForward={false}
-      isDocked={true}
-      isFullscreen={false}
       onGoBack={vi.fn()}
       onGoForward={vi.fn()}
       onOpenNewTab={vi.fn()}
       onSetActiveTab={vi.fn()}
       onCloseTab={vi.fn()}
-      onClose={vi.fn()}
-      onDragStart={vi.fn()}
-      onToggleMode={vi.fn()}
     />,
   );
 }

package/src/shared/components/doc-browser/__tests__/doc-browser.test.tsx

@@ -1,4 +1,14 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from 'react-router-dom';
+import { AppPresenterProvider } from '@/app/components/app-presenter-provider';
+import type { ReactElement } from 'react';
+
+function render(ui: ReactElement) {
+  return renderUi(<MemoryRouter><AppPresenterProvider>{ui}</AppPresenterProvider></MemoryRouter>);
+}
+
+import { WorkbenchSurfaceManager } from '@/shared/components/workbench/managers/workbench-surface.manager';
+import { useWorkbenchSurfaceStore } from '@/shared/components/workbench/stores/workbench-surface.store';
+import { fireEvent, render as renderUi, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { DocBrowser } from "@/shared/components/doc-browser/doc-browser";
@@ -137,6 +147,7 @@ function firePointerEvent(
 }
 
 function resetDocBrowserTestState() {
+  useWorkbenchSurfaceStore.setState({ surfaces: {} });
   vi.clearAllMocks();
   docBrowserState.mode = "docked";
   docBrowserState.tabs = [
@@ -190,7 +201,7 @@ describe("DocBrowser", () => {
     expect(screen.getByTestId("doc-browser-panel").style.width).toBe("420px");
     expect(
       screen.getByTestId("doc-browser-panel").getAttribute("data-theme-surface"),
-    ).toBe("doc-browser");
+    ).toBe("workspace-panel");
     expect(screen.getByTestId("resizable-right-panel-handle")).toBeTruthy();
   });
 
@@ -213,9 +224,9 @@ describe("DocBrowser", () => {
 
     const panel = screen.getByTestId("doc-browser-panel");
 
-    expect(panel.className).toContain("fixed");
-    expect(panel.className).toContain("inset-0");
-    expect(panel.className).toContain("w-screen");
+    expect(panel.style.position).toBe("fixed");
+    expect(panel.style.inset).toBe("0");
+    expect(panel.style.width).toBe("100%");
     expect(
       screen.queryByRole("button", { name: /float/i }) ??
         screen.queryByRole("button", { name: /dock/i }),
@@ -224,7 +235,7 @@ describe("DocBrowser", () => {
     expect(panel.querySelector(".cursor-se-resize")).toBeNull();
   });
 
-  it("keeps browser window controls on the tab strip", async () => {
+  it("separates shared window controls from navigation", async () => {
     const user = userEvent.setup();
     render(
       <DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />,
@@ -232,7 +243,7 @@ describe("DocBrowser", () => {
 
     const tabStrip = screen.getByTestId("doc-browser-tab-strip");
     const tabActions = screen.getByTestId("doc-browser-tab-actions");
-    const floatButton = screen.getByRole("button", { name: "Float Window" });
+    const floatButton = screen.getByRole("button", { name: "Float view group" });
     const newTabButton = screen.getByRole("button", { name: "New Tab" });
 
     expect(
@@ -243,12 +254,12 @@ describe("DocBrowser", () => {
     ).toBe(true);
     expect(
       tabStrip.contains(floatButton),
-    ).toBe(true);
+    ).toBe(false);
     expect(floatButton.querySelector(".lucide-picture-in-picture2")).toBeTruthy();
     expect(floatButton.querySelector(".lucide-maximize2")).toBeNull();
     expect(
-      tabStrip.contains(screen.getByRole("button", { name: "Close" })),
-    ).toBe(true);
+      tabStrip.contains(screen.getByRole("button", { name: "Hide view group" })),
+    ).toBe(false);
     expect(tabActions.contains(newTabButton)).toBe(true);
     expect(screen.queryByText("Embedded Browser")).toBeNull();
 
@@ -532,9 +543,9 @@ describe("DocBrowser panel app navigation", () => {
     await user.click(screen.getByRole("button", { name: "Back" }));
     expect(docBrowserState.goBack).toHaveBeenCalledTimes(1);
 
-    expect(screen.queryByRole("button", { name: "Add to main sidebar" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Pin to left sidebar" })).toBeNull();
     await user.click(screen.getByRole("button", { name: "More panel app actions" }));
-    await user.click(screen.getByRole("button", { name: "Add to main sidebar" }));
+    await user.click(screen.getByRole("button", { name: "Pin to left sidebar" }));
     expect(panelAppHooks.mutate).toHaveBeenCalledWith({
       id: "piano",
       preferences: { mainSidebar: true },
@@ -560,7 +571,7 @@ describe("DocBrowser panel app navigation", () => {
     render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
 
     await user.click(screen.getByRole("button", { name: "More panel app actions" }));
-    await user.click(screen.getByRole("button", { name: "Add to main sidebar" }));
+    await user.click(screen.getByRole("button", { name: "Pin to left sidebar" }));
     expect(panelAppHooks.mutate).toHaveBeenCalledWith({
       id: "piano",
       preferences: { mainSidebar: true },
@@ -640,40 +651,18 @@ describe("DocBrowser floating interactions", () => {
     installDocBrowserPointerTestEnvironment();
   });
 
-  it("starts floating drag from the header background without stealing tab actions", () => {
-    const onDragStart = vi.fn();
-
-    render(
-      <DocBrowserTabStrip
-        tabs={docBrowserState.tabs}
-        activeTabId="docs"
-        canGoBack={false}
-        canGoForward={false}
-        isDocked={false}
-        isFullscreen={false}
-        onGoBack={vi.fn()}
-        onGoForward={vi.fn()}
-        onOpenNewTab={vi.fn()}
-        onSetActiveTab={vi.fn()}
-        onCloseTab={vi.fn()}
-        onClose={vi.fn()}
-        onDragStart={onDragStart}
-        onToggleMode={vi.fn()}
-      />,
-    );
-
-    fireEvent.pointerDown(screen.getByRole("button", { name: "Docs" }));
-    expect(onDragStart).not.toHaveBeenCalled();
-
-    const tabStrip = screen.getByTestId("doc-browser-tab-strip");
-    const headerDragSurface = tabStrip.querySelector(".doc-browser-tab-scrollbar");
-    expect(headerDragSurface).toBeInstanceOf(HTMLElement);
-    expect((headerDragSurface as HTMLElement).className).toContain("cursor-grab");
-    expect(screen.getByRole("button", { name: "Docs" }).parentElement?.className).toContain("cursor-pointer");
-
-    fireEvent.pointerDown(headerDragSurface as HTMLElement);
-
-    expect(onDragStart).toHaveBeenCalledTimes(1);
+  it("drags the shared header without stealing tab actions", () => {
+    new WorkbenchSurfaceManager().place('global-resources', 'floating');
+    render(<DocBrowser />);
+    const panel = screen.getByTestId('doc-browser-panel');
+    const before = panel.style.left;
+    firePointerEvent(screen.getByRole('button', { name: 'Docs' }), 'pointerdown', { clientX: 100, pointerId: 1 });
+    firePointerEvent(window, 'pointermove', { clientX: 120, pointerId: 1 });
+    expect(panel.style.left).toBe(before);
+    firePointerEvent(panel.querySelector('header')!, 'pointerdown', { clientX: 100, pointerId: 1 });
+    firePointerEvent(window, 'pointermove', { clientX: 140, pointerId: 1 });
+    firePointerEvent(window, 'pointerup', { clientX: 140, pointerId: 1 });
+    expect(parseFloat(panel.style.left)).toBe(parseFloat(before) + 40);
   });
 
   it("opens the same tab action from right click and the more button", () => {
@@ -685,16 +674,11 @@ describe("DocBrowser floating interactions", () => {
         activeTabId="docs"
         canGoBack={false}
         canGoForward={false}
-        isDocked={true}
-        isFullscreen={false}
         onGoBack={vi.fn()}
         onGoForward={vi.fn()}
         onOpenNewTab={vi.fn()}
         onSetActiveTab={vi.fn()}
         onCloseTab={vi.fn()}
-        onClose={vi.fn()}
-        onDragStart={vi.fn()}
-        onToggleMode={vi.fn()}
         getTabMenuGroups={() => [{
           key: "chat",
           items: [{ key: "add", label: "Add to Chat", onSelect: onAddToChat }],
@@ -711,12 +695,12 @@ describe("DocBrowser floating interactions", () => {
   });
 
   it("keeps the floating panel left edge stable when resizing from the right", () => {
-    docBrowserState.mode = "floating";
+    new WorkbenchSurfaceManager().place('global-resources', 'floating');
 
     render(<DocBrowser />);
 
     firePointerEvent(
-      screen.getByTestId("doc-browser-resize-right"),
+      document.querySelector('[data-workbench-resize="right"]')!,
       "pointerdown",
       {
         clientX: 1160,
@@ -726,17 +710,17 @@ describe("DocBrowser floating interactions", () => {
     firePointerEvent(window, "pointermove", { clientX: 1120, pointerId: 1 });
 
     const panel = screen.getByTestId("doc-browser-panel");
-    expect(panel.style.left).toBe("680px");
-    expect(panel.style.width).toBe("440px");
+    expect(panel.style.left).toBe("80px");
+    expect(panel.style.width).toBe("520px");
   });
 
   it("keeps the floating panel right edge stable when resizing from the left", () => {
-    docBrowserState.mode = "floating";
+    new WorkbenchSurfaceManager().place('global-resources', 'floating');
 
     render(<DocBrowser />);
 
     firePointerEvent(
-      screen.getByTestId("doc-browser-resize-left"),
+      document.querySelector('[data-workbench-resize="left"]')!,
       "pointerdown",
       {
         clientX: 680,
@@ -746,17 +730,17 @@ describe("DocBrowser floating interactions", () => {
     firePointerEvent(window, "pointermove", { clientX: 620, pointerId: 1 });
 
     const panel = screen.getByTestId("doc-browser-panel");
-    expect(panel.style.left).toBe("620px");
-    expect(panel.style.width).toBe("540px");
+    expect(panel.style.left).toBe("20px");
+    expect(panel.style.width).toBe("620px");
   });
 
   it("keeps the floating panel bottom edge stable when resizing from the top", () => {
-    docBrowserState.mode = "floating";
+    new WorkbenchSurfaceManager().place('global-resources', 'floating');
 
     render(<DocBrowser />);
 
     firePointerEvent(
-      screen.getByTestId("doc-browser-resize-top"),
+      document.querySelector('[data-workbench-resize="top"]')!,
       "pointerdown",
       {
         clientX: 900,
@@ -772,16 +756,16 @@ describe("DocBrowser floating interactions", () => {
 
     const panel = screen.getByTestId("doc-browser-panel");
     expect(panel.style.top).toBe("120px");
-    expect(panel.style.height).toBe("560px");
+    expect(panel.style.height).toBe("600px");
   });
 
   it("resizes the floating panel from the bottom-left corner", () => {
-    docBrowserState.mode = "floating";
+    new WorkbenchSurfaceManager().place('global-resources', 'floating');
 
     render(<DocBrowser />);
 
     firePointerEvent(
-      screen.getByTestId("doc-browser-resize-bottom-left"),
+      document.querySelector('[data-workbench-resize="bottom-left"]')!,
       "pointerdown",
       {
         clientX: 680,
@@ -796,19 +780,19 @@ describe("DocBrowser floating interactions", () => {
     });
 
     const panel = screen.getByTestId("doc-browser-panel");
-    expect(panel.style.left).toBe("620px");
+    expect(panel.style.left).toBe("20px");
     expect(panel.style.top).toBe("80px");
-    expect(panel.style.width).toBe("540px");
-    expect(panel.style.height).toBe("640px");
+    expect(panel.style.width).toBe("620px");
+    expect(panel.style.height).toBe("680px");
   });
 
   it("resizes the floating panel from the top-right corner", () => {
-    docBrowserState.mode = "floating";
+    new WorkbenchSurfaceManager().place('global-resources', 'floating');
 
     render(<DocBrowser />);
 
     firePointerEvent(
-      screen.getByTestId("doc-browser-resize-top-right"),
+      document.querySelector('[data-workbench-resize="top-right"]')!,
       "pointerdown",
       {
         clientX: 1160,
@@ -823,10 +807,10 @@ describe("DocBrowser floating interactions", () => {
     });
 
     const panel = screen.getByTestId("doc-browser-panel");
-    expect(panel.style.left).toBe("680px");
+    expect(panel.style.left).toBe("80px");
     expect(panel.style.top).toBe("120px");
-    expect(panel.style.width).toBe("440px");
-    expect(panel.style.height).toBe("560px");
+    expect(panel.style.width).toBe("520px");
+    expect(panel.style.height).toBe("600px");
   });
 });
 

package/src/shared/components/doc-browser/__tests__/resource-link-interceptor.test.tsx

@@ -0,0 +1,104 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter, useLocation } from "react-router-dom";
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  ChatMessageMarkdown,
+  ChatResourceLinkProvider,
+} from "@nextclaw/agent-chat-ui";
+import { AppPresenterProvider } from "@/app/components/app-presenter-provider";
+import { getPresenter } from "@/app/presenters/app.presenter";
+import { useDocLinkInterceptor } from "@/shared/components/doc-browser/use-doc-link-interceptor";
+import { useDocBrowserStore } from "@/shared/components/doc-browser/stores/doc-browser.store";
+import { createDefaultDocBrowserState } from "@/shared/components/doc-browser/utils/doc-browser-state.utils";
+import { PageResourceIcon } from "@/features/right-panel-resources";
+import { pageResourceTab } from "@/features/right-panel-resources";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+function LinkedMarkdown({
+  text = "[Notes](nextclaw://panel-app/example-notes)",
+}: {
+  text?: string;
+}) {
+  useDocLinkInterceptor();
+  const { pathname } = useLocation();
+  return (
+    <>
+      <output data-testid="route">{pathname}</output>
+      <ChatResourceLinkProvider
+        renderIcon={(uri) => (
+          <PageResourceIcon uri={uri} icon={{ type: "text", value: "✎" }} />
+        )}
+      >
+        <ChatMessageMarkdown
+          text={text}
+          role="assistant"
+          texts={{ copyCodeLabel: "Copy", copiedCodeLabel: "Copied" }}
+        />
+      </ChatResourceLinkProvider>
+    </>
+  );
+}
+
+describe("ordinary Markdown resource links end to end", () => {
+  beforeEach(() =>
+    useDocBrowserStore.setState({ snapshot: createDefaultDocBrowserState() }),
+  );
+  function setup(text?: string) {
+    return render(
+      <QueryClientProvider client={new QueryClient()}>
+        <MemoryRouter initialEntries={["/chat"]}>
+          <AppPresenterProvider>
+            <LinkedMarkdown text={text} />
+          </AppPresenterProvider>
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+  }
+  it.each(["cron-job", "skill", "agent", "project", "inbox-delivery"])(
+    "opens a normal Markdown %s object link in the shared resource viewer",
+    (kind) => {
+      const uri = "nextclaw://objects/" + kind + "/existing-object";
+      setup("[Object](" + uri + ")");
+      fireEvent.click(screen.getByRole("link", { name: "Object" }));
+      const { snapshot } = useDocBrowserStore.getState();
+      expect(snapshot.isOpen).toBe(true);
+      expect(
+        snapshot.tabs.find((tab) => tab.id === snapshot.activeTabId),
+      ).toMatchObject({
+        kind: "system-object",
+        resourceUri: uri,
+        title: "Object",
+      });
+      expect(screen.getByTestId("route").textContent).toBe("/chat");
+    },
+  );
+  it("opens a normal Panel App link in the global sidebar without a catalog lookup", () => {
+    setup();
+    const link = screen.getByRole("link", { name: "Notes" });
+    expect(link.querySelector("span")?.textContent).toContain("✎");
+    fireEvent.click(link);
+    expect(screen.getByTestId("route").textContent).toBe("/chat");
+    const { snapshot } = useDocBrowserStore.getState();
+    expect(snapshot.isOpen).toBe(true);
+    expect(snapshot.tabs.find((tab) => tab.id === snapshot.activeTabId)).toMatchObject({ kind: "panel-app", resourceUri: "nextclaw://panel-app/example-notes" });
+  });
+  it("focuses an existing global tab without navigating the main conversation away", () => {
+    const page = getPresenter().pageResourceManager.resolve(
+      "nextclaw://panel-app/example-notes",
+    )!;
+    const tab = pageResourceTab(page);
+    useDocBrowserStore.setState({
+      snapshot: {
+        ...createDefaultDocBrowserState(),
+        isOpen: true,
+        tabs: [tab],
+        activeTabId: tab.id,
+      },
+    });
+    setup();
+    fireEvent.click(screen.getByRole("link", { name: "Notes" }));
+    expect(screen.getByTestId("route").textContent).toBe("/chat");
+    expect(useDocBrowserStore.getState().snapshot.tabs).toHaveLength(1);
+    expect(useDocBrowserStore.getState().snapshot.isOpen).toBe(true);
+  });
+});

package/src/shared/components/doc-browser/doc-browser-context.tsx

@@ -1,3 +1,5 @@
+import { useWorkbenchSurfaceStore } from '@/shared/components/workbench/stores/workbench-surface.store';
+import { GLOBAL_WORKBENCH_SURFACE } from '@/shared/components/workbench/types/workbench-surface.types';
 import { createContext, useContext, useMemo, type ReactNode } from 'react';
 import type { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
 import { useDocBrowserStore } from '@/shared/components/doc-browser/stores/doc-browser.store';
@@ -44,6 +46,7 @@ export function DocBrowserProvider({
   children: ReactNode;
   manager: DocBrowserManager;
 }) {
+  const mode = useWorkbenchSurfaceStore((state) => state.surfaces[GLOBAL_WORKBENCH_SURFACE]?.placement ?? 'docked');
   const snapshot = useDocBrowserStore((state) => state.snapshot);
   const currentTab = useMemo(() => {
     return snapshot.tabs.find((tab) => tab.id === snapshot.activeTabId) ?? snapshot.tabs[0];
@@ -51,6 +54,7 @@ export function DocBrowserProvider({
 
   const value = useMemo<DocBrowserContextValue>(() => ({
     ...snapshot,
+    mode,
     currentTab,
     open: manager.open,
     openTarget: manager.openTarget,
@@ -64,7 +68,7 @@ export function DocBrowserProvider({
     goForward: manager.goForward,
     closeTab: manager.closeTab,
     setActiveTab: manager.setActiveTab,
-  }), [currentTab, manager, snapshot]);
+  }), [currentTab, manager, snapshot, mode]);
 
   return (
     <DocBrowserContext.Provider value={value}>

package/src/shared/components/doc-browser/doc-browser-panel-parts.tsx

@@ -92,7 +92,7 @@ export function DocBrowserFrameContent({
           name={createUiContentParamsWindowName(currentTab?.contentParams)}
           className="absolute inset-0 w-full h-full border-0"
           title={currentTab?.title || 'NextClaw Docs'}
-          sandbox={iframeSandbox}
+          sandbox={iframeSandbox ?? (currentTab?.kind === 'content' ? undefined : 'allow-same-origin allow-scripts allow-popups allow-forms')}
           tabIndex={onIframePointerOver ? 0 : undefined}
           onLoad={onIframeLoad}
           onPointerOver={onIframePointerOver}