@nextclaw/ui 0.25.3 → 0.26.0

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}

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

@@ -1,18 +1,10 @@
-import { useState, type PointerEvent } from "react";
+import { PageResourceIcon } from '@/features/right-panel-resources';
 import {
-  AppWindow,
   ArrowLeft,
   ArrowRight,
-  BookOpen,
-  Boxes,
-  Github,
-  PanelRightOpen,
-  PictureInPicture2,
   Pin,
   PinOff,
   Plus,
-  X,
-  type LucideIcon,
 } from "lucide-react";
 import type { DocBrowserDockState, DocBrowserTab } from "./doc-browser-context";
 import type { ContextMenuGroup } from "@/shared/components/ui/context-menu/context-menu";
@@ -21,7 +13,6 @@ import {
   type CompactTabStripAction,
   type CompactTabStripTab,
 } from "@/shared/components/ui/tab-strip/compact-tab-strip";
-import { cn } from "@/shared/lib/utils";
 import { t } from "@/shared/lib/i18n";
 
 type DocBrowserTabStripProps = {
@@ -29,8 +20,6 @@ type DocBrowserTabStripProps = {
   activeTabId: string;
   canGoBack: boolean;
   canGoForward: boolean;
-  isDocked: boolean;
-  isFullscreen: boolean;
   dockState?: DocBrowserDockState;
   onGoBack: () => void;
   onGoForward: () => void;
@@ -38,78 +27,11 @@ type DocBrowserTabStripProps = {
   onToggleDock?: () => void;
   onSetActiveTab: (tabId: string) => void;
   onCloseTab: (tabId: string) => void;
-  onClose: () => void;
-  onDragStart: (event: PointerEvent<HTMLElement>) => void;
-  onToggleMode: () => void;
   getTabMenuGroups?: (tab: DocBrowserTab) => readonly ContextMenuGroup[] | undefined;
 };
 
-const DOC_BROWSER_BUILTIN_TAB_ICONS: Record<string, LucideIcon> = {
-  apps: Boxes,
-  docs: BookOpen,
-  github: Github,
-  "new-tab": Plus,
-  "panel-app": AppWindow,
-  "service-apps": AppWindow,
-};
-
-function DocBrowserUrlTabIcon({
-  fallbackIcon: FallbackIcon,
-  url,
-}: {
-  fallbackIcon: LucideIcon;
-  url: string;
-}) {
-  const [loadFailed, setLoadFailed] = useState(false);
-  return loadFailed ? (
-    <FallbackIcon className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
-  ) : (
-    <img
-      src={url}
-      alt=""
-      className="h-3.5 w-3.5 rounded-sm object-cover"
-      onError={() => setLoadFailed(true)}
-    />
-  );
-}
-
 function DocBrowserTabIcon({ tab }: { tab: DocBrowserTab }) {
-  const { dockIcon } = tab;
-  const fallbackIcon = tab.kind === "docs"
-    ? BookOpen
-    : tab.kind === "home"
-      ? Plus
-      : tab.kind === "apps"
-        ? Boxes
-        : AppWindow;
-  const Icon = dockIcon?.type === "builtin"
-    ? (DOC_BROWSER_BUILTIN_TAB_ICONS[dockIcon.name] ?? fallbackIcon)
-      : fallbackIcon;
-
-  if (dockIcon?.type === "url") {
-    return (
-      <DocBrowserUrlTabIcon
-        key={dockIcon.url}
-        fallbackIcon={fallbackIcon}
-        url={dockIcon.url}
-      />
-    );
-  }
-  if (dockIcon?.type === "text") {
-    return (
-      <span className="max-w-3.5 truncate text-[10px] font-semibold leading-none" aria-hidden="true">
-        {dockIcon.value}
-      </span>
-    );
-  }
-
-  return <Icon className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />;
-}
-
-function shouldBlockHeaderDrag(target: EventTarget | null): boolean {
-  return target instanceof Element && Boolean(
-    target.closest("button, a, input, textarea, select, [data-compact-tab-item]"),
-  );
+  return <PageResourceIcon uri={tab.resourceUri ?? tab.currentUrl} icon={tab.dockIcon} />;
 }
 
 export function DocBrowserTabStrip({
@@ -117,8 +39,6 @@ export function DocBrowserTabStrip({
   activeTabId,
   canGoBack,
   canGoForward,
-  isDocked,
-  isFullscreen,
   dockState,
   onGoBack,
   onGoForward,
@@ -126,21 +46,16 @@ export function DocBrowserTabStrip({
   onToggleDock,
   onSetActiveTab,
   onCloseTab,
-  onClose,
-  onDragStart,
-  onToggleMode,
   getTabMenuGroups,
 }: DocBrowserTabStripProps) {
   const backLabel = t("docBrowserBack");
-  const closeLabel = t("docBrowserClose");
-  const closeTabLabel = t("docBrowserCloseTab");
+  const closeTabLabel = t("workbenchCloseTab");
   const dockLabel = dockState?.isDocked
     ? dockState.removable
       ? t("sideDockUnpinCurrent")
       : t("sideDockBuiltInDocked")
     : t("sideDockPinCurrent");
   const forwardLabel = t("docBrowserForward");
-  const modeLabel = isDocked ? t("docBrowserFloatMode") : t("docBrowserDockMode");
   const newTabLabel = t("docBrowserNewTab");
   const compactTabs: CompactTabStripTab[] = tabs.map((tab) => ({
     key: tab.id,
@@ -170,17 +85,6 @@ export function DocBrowserTabStrip({
           },
         ]
       : []),
-    ...(!isFullscreen
-      ? [
-          {
-            key: "mode",
-            icon: isDocked ? <PictureInPicture2 className="h-3.5 w-3.5" /> : <PanelRightOpen className="h-3.5 w-3.5" />,
-            label: modeLabel,
-            onClick: onToggleMode,
-          },
-        ]
-      : []),
-    { key: "close", icon: <X className="h-3.5 w-3.5" />, label: closeLabel, onClick: onClose },
   ];
 
   return (
@@ -189,14 +93,8 @@ export function DocBrowserTabStrip({
       actionsTestId="doc-browser-tab-actions"
       tabs={compactTabs}
       actions={actions}
-      className={cn(
-        "h-10 gap-1.5 border-border/50 bg-card/80 px-2 shrink-0 select-none",
-        isFullscreen && "h-[calc(env(safe-area-inset-top,0px)+2.5rem)] pt-[env(safe-area-inset-top,0px)]",
-      )}
-      scrollClassName={cn(
-        "doc-browser-tab-scrollbar flex h-full items-center gap-0.5",
-        !isDocked && !isFullscreen && "cursor-grab active:cursor-grabbing",
-      )}
+      className="h-10 min-w-0 flex-1 gap-1 border-0 bg-transparent px-0 select-none"
+      scrollClassName="doc-browser-tab-scrollbar flex h-full items-center gap-0.5"
       tabsClassName="items-center gap-0.5"
       actionsClassName="h-full items-center gap-0.5"
       actionButtonClassName="rounded-md p-1.5 text-muted-foreground hover:bg-muted/60 hover:text-foreground disabled:opacity-50"
@@ -204,17 +102,7 @@ export function DocBrowserTabStrip({
       activeTabClassName="bg-muted/80 text-foreground"
       inactiveTabClassName="text-muted-foreground hover:bg-muted/45 hover:text-foreground"
       labelClassName="px-0.5 text-xs font-normal"
-      onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
-      onScrollPointerDown={(event) => {
-        if (shouldBlockHeaderDrag(event.target)) {
-          event.stopPropagation();
-          return;
-        }
-        if (!isDocked && !isFullscreen) {
-          event.stopPropagation();
-          onDragStart(event);
-        }
-      }}
+
     />
   );
 }