@nextclaw/ui 0.14.4 → 0.15.0

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

@@ -1,6 +1,6 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
 import type { ReactNode } from 'react';
-import { DocBrowserProvider, useDocBrowser } from '../doc-browser-context';
+import { DocBrowserProvider, useDocBrowser } from '@/shared/components/doc-browser/doc-browser-context';
 import { RightPanelResourceRouteResolver } from '@/features/right-panel-resources';
 import { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
 import { createDefaultDocBrowserState } from '@/shared/components/doc-browser/utils/doc-browser-state.utils';
@@ -53,6 +53,35 @@ async function resetMemoryThenRehydrate(savedState: string | null) {
   await rehydrateDocBrowserFromStorage();
 }
 
+describe('DocBrowserManager layout notifications', () => {
+  it('notifies the app layout coordinator after opening the docked browser', () => {
+    const onRightPanelOpened = vi.fn();
+    const manager = new DocBrowserManager(
+      new RightPanelResourceRouteResolver(),
+      onRightPanelOpened,
+    );
+
+    manager.open('https://example.com/read', {
+      kind: 'content',
+      title: 'Example',
+    });
+
+    expect(onRightPanelOpened).toHaveBeenCalledTimes(1);
+  });
+
+  it('notifies the app layout coordinator after changing dock mode', () => {
+    const onRightPanelOpened = vi.fn();
+    const manager = new DocBrowserManager(
+      new RightPanelResourceRouteResolver(),
+      onRightPanelOpened,
+    );
+
+    manager.toggleMode();
+
+    expect(onRightPanelOpened).toHaveBeenCalledTimes(1);
+  });
+});
+
 describe('DocBrowserProvider dedupe keys', () => {
   it('opens different dedupe keys as separate content tabs', () => {
     const { result } = renderHook(() => useDocBrowser(), { wrapper });

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

@@ -2,6 +2,7 @@ import { fireEvent, render, 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";
+import { DocBrowserTabStrip } from "@/shared/components/doc-browser/doc-browser-tab-strip";
 import type {
   DocBrowserContextValue,
   DocBrowserTab,
@@ -66,6 +67,15 @@ const { docBrowserState } = vi.hoisted<{
   },
 }));
 
+class TestPointerEvent extends MouseEvent {
+  pointerId: number;
+
+  constructor(type: string, init: PointerEventInit = {}) {
+    super(type, init);
+    this.pointerId = init.pointerId ?? 1;
+  }
+}
+
 vi.mock("@/shared/components/doc-browser/doc-browser-context", async () => {
   const actual = await vi.importActual(
     "@/shared/components/doc-browser/doc-browser-context",
@@ -82,49 +92,61 @@ function firePointerEvent(
   type: string,
   point: { clientX: number; clientY?: number; pointerId?: number },
 ) {
-  const event = new Event(type, { bubbles: true });
-  Object.defineProperties(event, {
-    clientX: { value: point.clientX },
-    clientY: { value: point.clientY ?? 0 },
-    pointerId: { value: point.pointerId ?? 1 },
+  const event = new window.PointerEvent(type, {
+    bubbles: true,
+    clientX: point.clientX,
+    clientY: point.clientY ?? 0,
+    pointerId: point.pointerId ?? 1,
   });
   fireEvent(target, event);
 }
 
+function resetDocBrowserTestState() {
+  vi.clearAllMocks();
+  docBrowserState.mode = "docked";
+  docBrowserState.tabs = [
+    {
+      id: "docs",
+      kind: "docs" as const,
+      title: "Docs",
+      currentUrl: "https://docs.nextclaw.io/en/guide/getting-started",
+      history: ["https://docs.nextclaw.io/en/guide/getting-started"],
+      historyIndex: 0,
+      navVersion: 0,
+    },
+  ];
+  docBrowserState.activeTabId = "docs";
+  docBrowserState.activeHistory = [
+    {
+      kind: "docs" as const,
+      tabId: "docs",
+      url: "https://docs.nextclaw.io/en/guide/getting-started",
+    },
+  ];
+  docBrowserState.activeHistoryIndex = 0;
+  docBrowserState.currentTab = docBrowserState.tabs[0];
+}
+
+function installDocBrowserPointerTestEnvironment() {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    value: 1200,
+  });
+  Object.defineProperty(window, "innerHeight", {
+    configurable: true,
+    value: 900,
+  });
+  Object.defineProperty(window, "PointerEvent", {
+    configurable: true,
+    value: TestPointerEvent,
+  });
+  HTMLElement.prototype.setPointerCapture = vi.fn();
+}
+
 describe("DocBrowser", () => {
   beforeEach(() => {
-    vi.clearAllMocks();
-    docBrowserState.mode = "docked";
-    docBrowserState.tabs = [
-      {
-        id: "docs",
-        kind: "docs" as const,
-        title: "Docs",
-        currentUrl: "https://docs.nextclaw.io/en/guide/getting-started",
-        history: ["https://docs.nextclaw.io/en/guide/getting-started"],
-        historyIndex: 0,
-        navVersion: 0,
-      },
-    ];
-    docBrowserState.activeTabId = "docs";
-    docBrowserState.activeHistory = [
-      {
-        kind: "docs" as const,
-        tabId: "docs",
-        url: "https://docs.nextclaw.io/en/guide/getting-started",
-      },
-    ];
-    docBrowserState.activeHistoryIndex = 0;
-    docBrowserState.currentTab = docBrowserState.tabs[0];
-    Object.defineProperty(window, "innerWidth", {
-      configurable: true,
-      value: 1200,
-    });
-    Object.defineProperty(window, "innerHeight", {
-      configurable: true,
-      value: 900,
-    });
-    HTMLElement.prototype.setPointerCapture = vi.fn();
+    resetDocBrowserTestState();
+    installDocBrowserPointerTestEnvironment();
   });
 
   it("uses the shared right panel resize handle in docked mode", () => {
@@ -158,6 +180,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 newTabButton = screen.getByRole("button", { name: "New Tab" });
 
     expect(
@@ -167,8 +190,10 @@ describe("DocBrowser", () => {
       tabActions.contains(screen.getByRole("button", { name: "Forward" })),
     ).toBe(true);
     expect(
-      tabStrip.contains(screen.getByRole("button", { name: "Float Window" })),
+      tabStrip.contains(floatButton),
     ).toBe(true);
+    expect(floatButton.querySelector(".lucide-picture-in-picture2")).toBeTruthy();
+    expect(floatButton.querySelector(".lucide-maximize2")).toBeNull();
     expect(
       tabStrip.contains(screen.getByRole("button", { name: "Close" })),
     ).toBe(true);
@@ -372,6 +397,50 @@ describe("DocBrowser", () => {
     expect(screen.getByText("Help Docs")).toBeTruthy();
   });
 
+});
+
+describe("DocBrowser floating interactions", () => {
+  beforeEach(() => {
+    resetDocBrowserTestState();
+    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("keeps the floating panel left edge stable when resizing from the right", () => {
     docBrowserState.mode = "floating";
 
@@ -436,4 +505,103 @@ describe("DocBrowser", () => {
     expect(panel.style.top).toBe("120px");
     expect(panel.style.height).toBe("560px");
   });
+
+  it("resizes the floating panel from the bottom-left corner", () => {
+    docBrowserState.mode = "floating";
+
+    render(<DocBrowser />);
+
+    firePointerEvent(
+      screen.getByTestId("doc-browser-resize-bottom-left"),
+      "pointerdown",
+      {
+        clientX: 680,
+        clientY: 680,
+        pointerId: 1,
+      },
+    );
+    firePointerEvent(window, "pointermove", {
+      clientX: 620,
+      clientY: 720,
+      pointerId: 1,
+    });
+
+    const panel = screen.getByTestId("doc-browser-panel");
+    expect(panel.style.left).toBe("620px");
+    expect(panel.style.top).toBe("80px");
+    expect(panel.style.width).toBe("540px");
+    expect(panel.style.height).toBe("640px");
+  });
+
+  it("resizes the floating panel from the top-right corner", () => {
+    docBrowserState.mode = "floating";
+
+    render(<DocBrowser />);
+
+    firePointerEvent(
+      screen.getByTestId("doc-browser-resize-top-right"),
+      "pointerdown",
+      {
+        clientX: 1160,
+        clientY: 80,
+        pointerId: 1,
+      },
+    );
+    firePointerEvent(window, "pointermove", {
+      clientX: 1120,
+      clientY: 120,
+      pointerId: 1,
+    });
+
+    const panel = screen.getByTestId("doc-browser-panel");
+    expect(panel.style.left).toBe("680px");
+    expect(panel.style.top).toBe("120px");
+    expect(panel.style.width).toBe("440px");
+    expect(panel.style.height).toBe("560px");
+  });
+});
+
+describe("DocBrowser content tabs", () => {
+  beforeEach(() => {
+    resetDocBrowserTestState();
+  });
+
+  it("shows browser controls for content iframe tabs", () => {
+    const contentTab: DocBrowserTab = {
+      id: "local-app",
+      kind: "content",
+      title: "Local App",
+      currentUrl: "http://127.0.0.1:5173/dashboard",
+      history: ["http://127.0.0.1:5173/dashboard"],
+      historyIndex: 0,
+      navVersion: 0,
+    };
+    docBrowserState.tabs = [contentTab];
+    docBrowserState.activeTabId = contentTab.id;
+    docBrowserState.currentTab = contentTab;
+    docBrowserState.activeHistory = [
+      {
+        kind: "content",
+        tabId: contentTab.id,
+        url: contentTab.currentUrl,
+      },
+    ];
+
+    render(<DocBrowser />);
+
+    const addressInput = screen.getByRole("textbox", { name: "Address" }) as HTMLInputElement;
+    const iframe = screen.getByTitle("Local App") as HTMLIFrameElement;
+    const externalLink = screen.getByRole("link", { name: /Open in Browser/i }) as HTMLAnchorElement;
+
+    expect(addressInput.value).toBe("http://127.0.0.1:5173/dashboard");
+    expect(iframe.getAttribute("src")).toBe(contentTab.currentUrl);
+    expect(iframe.getAttribute("sandbox")).toBeNull();
+    expect(screen.getByRole("button", { name: "Refresh" })).toBeTruthy();
+    expect(externalLink.getAttribute("href")).toBe(contentTab.currentUrl);
+
+    fireEvent.change(addressInput, { target: { value: "localhost:5173/settings" } });
+    fireEvent.submit(addressInput.closest("form")!);
+
+    expect(docBrowserState.navigate).toHaveBeenCalledWith("http://localhost:5173/settings");
+  });
 });

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

@@ -1,18 +1,22 @@
 import type { ReactNode, Ref } from 'react';
 import {
   ExternalLink,
+  RefreshCw,
   Search,
 } from 'lucide-react';
 import {
   isDocsUrl,
   type DocBrowserTab,
 } from './doc-browser-context';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import { t } from '@/shared/lib/i18n';
 
-type DocBrowserDocsToolbarProps = {
-  isDocsTab: boolean;
+type DocBrowserAddressToolbarProps = {
+  isVisible: boolean;
+  onRefresh: () => void;
   onSubmit: (e: React.FormEvent) => void;
   onUrlInputChange: (value: string) => void;
+  placeholder: string;
   urlInput: string;
 };
 
@@ -22,18 +26,20 @@ type DocBrowserFrameContentProps = {
   customContent: ReactNode;
   iframeRef: Ref<HTMLIFrameElement>;
   iframeInstanceId: string;
-  iframeSandbox: string;
+  iframeSandbox?: string;
   isDragging: boolean;
   isResizing: boolean;
 };
 
-export function DocBrowserDocsToolbar({
-  isDocsTab,
+export function DocBrowserAddressToolbar({
+  isVisible,
+  onRefresh,
   onSubmit,
   onUrlInputChange,
+  placeholder,
   urlInput,
-}: DocBrowserDocsToolbarProps) {
-  if (!isDocsTab) {
+}: DocBrowserAddressToolbarProps) {
+  if (!isVisible) {
     return null;
   }
 
@@ -45,10 +51,16 @@ export function DocBrowserDocsToolbar({
           type="text"
           value={urlInput}
           onChange={(e) => onUrlInputChange(e.target.value)}
-          placeholder={t('docBrowserSearchPlaceholder')}
+          aria-label={t('docBrowserAddressLabel')}
+          placeholder={placeholder}
           className="h-8 w-full rounded-lg border border-border bg-background pl-8 pr-3 text-xs text-foreground transition-colors placeholder:text-muted-foreground/55 focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/30"
         />
       </form>
+      <IconActionButton
+        icon={<RefreshCw className="h-3.5 w-3.5" />}
+        label={t('docBrowserRefresh')}
+        onClick={onRefresh}
+      />
     </div>
   );
 }
@@ -76,6 +88,7 @@ export function DocBrowserFrameContent({
           title={currentTab?.title || 'NextClaw Docs'}
           sandbox={iframeSandbox}
           allow="clipboard-read; clipboard-write"
+          allowFullScreen
         />
       )}
       {(isResizing || isDragging) && (
@@ -85,10 +98,20 @@ export function DocBrowserFrameContent({
   );
 }
 
-export function DocBrowserExternalLink({ currentUrl, isDocsTab }: { currentUrl: string; isDocsTab: boolean }) {
-  if (!isDocsTab || !isDocsUrl(currentUrl)) {
+function canOpenExternalUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url, window.location.origin);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+export function DocBrowserExternalLink({ currentUrl, isVisible }: { currentUrl: string; isVisible: boolean }) {
+  if (!isVisible || !canOpenExternalUrl(currentUrl)) {
     return null;
   }
+  const label = isDocsUrl(currentUrl) ? t('docBrowserOpenExternal') : t('docBrowserOpenInBrowser');
 
   return (
     <div className="flex items-center justify-between border-t border-border/70 bg-muted/55 px-4 py-2 shrink-0">
@@ -99,7 +122,7 @@ export function DocBrowserExternalLink({ currentUrl, isDocsTab }: { currentUrl:
         data-doc-external
         className="flex items-center gap-1.5 text-xs text-primary hover:text-primary-hover font-medium transition-colors"
       >
-        {t('docBrowserOpenExternal')}
+        {label}
         <ExternalLink className="w-3 h-3" />
       </a>
     </div>

package/src/shared/components/doc-browser/doc-browser-renderer.types.ts

@@ -17,7 +17,7 @@ export type DocBrowserIframeMessageParams = {
 };
 
 export type DocBrowserCustomTabRenderer = {
-  getIframeSandbox?: (tab: DocBrowserTab) => string;
+  getIframeSandbox?: (tab: DocBrowserTab) => string | undefined;
   getTitle?: (tab: DocBrowserTab) => string;
   onIframeMessage?: (params: DocBrowserIframeMessageParams) => void;
   renderContent?: (params: DocBrowserCustomTabRenderParams) => ReactNode;

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

@@ -2,8 +2,8 @@ import type { PointerEvent } from "react";
 import {
   ArrowLeft,
   ArrowRight,
-  Maximize2,
   PanelRightOpen,
+  PictureInPicture2,
   Pin,
   PinOff,
   Plus,
@@ -37,6 +37,12 @@ type DocBrowserTabStripProps = {
   onToggleMode: () => void;
 };
 
+function shouldBlockHeaderDrag(target: EventTarget | null): boolean {
+  return target instanceof Element && Boolean(
+    target.closest("button, a, input, textarea, select, [data-compact-tab-item]"),
+  );
+}
+
 export function DocBrowserTabStrip({
   tabs,
   activeTabId,
@@ -95,7 +101,7 @@ export function DocBrowserTabStrip({
       ? [
           {
             key: "mode",
-            icon: isDocked ? <Maximize2 className="h-3.5 w-3.5" /> : <PanelRightOpen className="h-3.5 w-3.5" />,
+            icon: isDocked ? <PictureInPicture2 className="h-3.5 w-3.5" /> : <PanelRightOpen className="h-3.5 w-3.5" />,
             label: modeLabel,
             onClick: onToggleMode,
           },
@@ -114,16 +120,28 @@ export function DocBrowserTabStrip({
         "h-11 gap-2 border-border/70 bg-card px-2.5 shrink-0 select-none",
         isFullscreen && "h-[calc(env(safe-area-inset-top,0px)+2.75rem)] pt-[env(safe-area-inset-top,0px)]",
       )}
-      scrollClassName="doc-browser-tab-scrollbar flex h-full items-center gap-1.5"
+      scrollClassName={cn(
+        "doc-browser-tab-scrollbar flex h-full items-center gap-1.5",
+        !isDocked && !isFullscreen && "cursor-grab active:cursor-grabbing",
+      )}
       tabsClassName="items-center gap-1.5"
       actionsClassName="h-full items-center gap-1"
       actionButtonClassName="rounded-md p-1.5 hover:text-foreground disabled:opacity-60"
-      tabBaseClassName="group inline-flex min-w-0 items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors"
+      tabBaseClassName="group inline-flex min-w-0 cursor-pointer items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors"
       activeTabClassName="border-primary/30 bg-primary-50/70 text-foreground shadow-[0_1px_2px_rgba(30,20,10,0.04)]"
       inactiveTabClassName="border-border bg-muted/60 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
       labelClassName="px-1 text-xs font-normal"
       onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
-      onScrollPointerDown={(event) => event.stopPropagation()}
+      onScrollPointerDown={(event) => {
+        if (shouldBlockHeaderDrag(event.target)) {
+          event.stopPropagation();
+          return;
+        }
+        if (!isDocked && !isFullscreen) {
+          event.stopPropagation();
+          onDragStart(event);
+        }
+      }}
     />
   );
 }