@nextclaw/ui 0.12.35-beta.6 → 0.12.35

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

@@ -1,111 +1,34 @@
 import type { ReactNode, Ref } from 'react';
 import {
-  ArrowLeft,
-  ArrowRight,
-  BookOpen,
   ExternalLink,
-  Maximize2,
-  PanelRightOpen,
   Search,
-  X,
 } from 'lucide-react';
 import {
   isDocsUrl,
   type DocBrowserTab,
 } from './doc-browser-context';
-import type { DocBrowserCustomTabRenderer } from './doc-browser-renderer.types';
-import { cn } from '@/shared/lib/utils';
 import { t } from '@/shared/lib/i18n';
 
-type DocBrowserPanelHeaderProps = {
-  currentTab?: DocBrowserTab;
-  customRenderer?: DocBrowserCustomTabRenderer;
-  isDocked: boolean;
-  isFullscreen: boolean;
-  onClose: () => void;
-  onDragStart: (e: React.PointerEvent<HTMLElement>) => void;
-  onToggleMode: () => void;
-};
-
 type DocBrowserDocsToolbarProps = {
-  currentTab?: DocBrowserTab;
   isDocsTab: boolean;
-  onBack: () => void;
-  onForward: () => void;
   onSubmit: (e: React.FormEvent) => void;
   onUrlInputChange: (value: string) => void;
   urlInput: string;
 };
 
 type DocBrowserFrameContentProps = {
-  activeTabId: string;
   currentTab?: DocBrowserTab;
   currentUrl: string;
   customContent: ReactNode;
   iframeRef: Ref<HTMLIFrameElement>;
-  iframeReloadVersion: number;
+  iframeInstanceId: string;
   iframeSandbox: string;
   isDragging: boolean;
   isResizing: boolean;
-  navVersion: number;
 };
 
-export function DocBrowserPanelHeader({
-  currentTab,
-  customRenderer,
-  isDocked,
-  isFullscreen,
-  onClose,
-  onDragStart,
-  onToggleMode,
-}: DocBrowserPanelHeaderProps) {
-  const title = currentTab && customRenderer?.getTitle
-    ? customRenderer.getTitle(currentTab)
-    : t('docBrowserTitle');
-  const icon = currentTab && customRenderer?.renderIcon
-    ? customRenderer.renderIcon(currentTab)
-    : <BookOpen className="w-4 h-4 text-primary shrink-0" />;
-
-  return (
-    <div
-      className={cn(
-        'flex items-center justify-between px-4 py-2.5 bg-gray-50 border-b border-gray-200 shrink-0 select-none',
-        !isDocked && !isFullscreen && 'cursor-grab active:cursor-grabbing',
-        isFullscreen && 'pt-[calc(env(safe-area-inset-top,0px)+0.625rem)]',
-      )}
-      onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
-    >
-      <div className="flex items-center gap-2.5 min-w-0">
-        {icon}
-        <span className="text-sm font-semibold text-gray-900 truncate">{title}</span>
-      </div>
-      <div className="flex items-center gap-1">
-        {!isFullscreen ? (
-          <button
-            onClick={onToggleMode}
-            className="hover:bg-gray-200 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
-            title={isDocked ? t('docBrowserFloatMode') : t('docBrowserDockMode')}
-          >
-            {isDocked ? <Maximize2 className="w-3.5 h-3.5" /> : <PanelRightOpen className="w-3.5 h-3.5" />}
-          </button>
-        ) : null}
-        <button
-          onClick={onClose}
-          className="hover:bg-gray-200 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
-          title={t('docBrowserClose')}
-        >
-          <X className="w-3.5 h-3.5" />
-        </button>
-      </div>
-    </div>
-  );
-}
-
 export function DocBrowserDocsToolbar({
-  currentTab,
   isDocsTab,
-  onBack,
-  onForward,
   onSubmit,
   onUrlInputChange,
   urlInput,
@@ -116,21 +39,6 @@ export function DocBrowserDocsToolbar({
 
   return (
     <div className="flex items-center gap-2 px-3.5 py-2 bg-white border-b border-gray-100 shrink-0">
-      <button
-        onClick={onBack}
-        disabled={!isDocsTab || (currentTab?.historyIndex ?? 0) <= 0}
-        className="p-1.5 rounded-md hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed text-gray-600 transition-colors"
-      >
-        <ArrowLeft className="w-4 h-4" />
-      </button>
-      <button
-        onClick={onForward}
-        disabled={!isDocsTab || (currentTab?.historyIndex ?? 0) >= (currentTab?.history.length ?? 0) - 1}
-        className="p-1.5 rounded-md hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed text-gray-600 transition-colors"
-      >
-        <ArrowRight className="w-4 h-4" />
-      </button>
-
       <form onSubmit={onSubmit} className="flex-1 relative">
         <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
         <input
@@ -146,16 +54,14 @@ export function DocBrowserDocsToolbar({
 }
 
 export function DocBrowserFrameContent({
-  activeTabId,
   currentTab,
   currentUrl,
   customContent,
   iframeRef,
-  iframeReloadVersion,
+  iframeInstanceId,
   iframeSandbox,
   isDragging,
   isResizing,
-  navVersion,
 }: DocBrowserFrameContentProps) {
   return (
     <div className="flex-1 relative overflow-hidden">
@@ -164,7 +70,7 @@ export function DocBrowserFrameContent({
       ) : (
         <iframe
           ref={iframeRef}
-          key={`${activeTabId}:${navVersion}:${iframeReloadVersion}`}
+          key={iframeInstanceId}
           src={currentUrl}
           className="absolute inset-0 w-full h-full border-0"
           title={currentTab?.title || 'NextClaw Docs'}

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

@@ -11,6 +11,7 @@ export type DocBrowserCustomTabRenderParams = {
 export type DocBrowserIframeMessageParams = {
   event: MessageEvent;
   iframe: HTMLIFrameElement | null;
+  iframeInstanceId: string;
   tab: DocBrowserTab;
 };
 

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

@@ -1,4 +1,5 @@
-import { Plus, X } from 'lucide-react';
+import type { PointerEvent } from 'react';
+import { ArrowLeft, ArrowRight, Maximize2, PanelRightOpen, Plus, X } from 'lucide-react';
 import type { DocBrowserTab } from './doc-browser-context';
 import { cn } from '@/shared/lib/utils';
 import { t } from '@/shared/lib/i18n';
@@ -6,62 +7,134 @@ import { t } from '@/shared/lib/i18n';
 type DocBrowserTabStripProps = {
   tabs: DocBrowserTab[];
   activeTabId: string;
-  onOpenDocs: () => void;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  isDocked: boolean;
+  isFullscreen: boolean;
+  onGoBack: () => void;
+  onGoForward: () => void;
+  onOpenNewTab: () => void;
   onSetActiveTab: (tabId: string) => void;
   onCloseTab: (tabId: string) => void;
+  onClose: () => void;
+  onDragStart: (event: PointerEvent<HTMLElement>) => void;
+  onToggleMode: () => void;
 };
 
 export function DocBrowserTabStrip({
   tabs,
   activeTabId,
-  onOpenDocs,
+  canGoBack,
+  canGoForward,
+  isDocked,
+  isFullscreen,
+  onGoBack,
+  onGoForward,
+  onOpenNewTab,
   onSetActiveTab,
   onCloseTab,
+  onClose,
+  onDragStart,
+  onToggleMode,
 }: DocBrowserTabStripProps) {
   return (
-    <div className="flex items-center gap-1.5 px-2.5 py-2 bg-background border-b border-[#f1e7d4] overflow-x-auto custom-scrollbar">
-      {tabs.map((tab) => {
-        const isActive = tab.id === activeTabId;
-        return (
-          <div
-            key={tab.id}
-            className={cn(
-              'inline-flex items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors',
-              isActive
-                ? 'bg-amber-50/80 border-amber-200 text-amber-900 shadow-[0_1px_2px_rgba(30,20,10,0.04)]'
-                : 'bg-[#f9f8f5] border-[#eee3d1] text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212]',
-            )}
-          >
-            <button
-              type="button"
-              onClick={() => onSetActiveTab(tab.id)}
-              className="truncate text-left px-1"
-              title={tab.title}
-            >
-              {tab.title || t('docBrowserTabUntitled')}
-            </button>
-            <button
-              type="button"
-              onClick={(event) => {
-                event.stopPropagation();
-                onCloseTab(tab.id);
-              }}
-              className="rounded p-0.5 hover:bg-black/10"
-              aria-label={t('docBrowserCloseTab')}
+    <div
+      data-testid="doc-browser-tab-strip"
+      className={cn(
+        'flex h-11 items-stretch gap-2 px-2.5 bg-background border-b border-[#f1e7d4] shrink-0 select-none',
+        isFullscreen && 'h-[calc(env(safe-area-inset-top,0px)+2.75rem)] pt-[env(safe-area-inset-top,0px)]',
+      )}
+      onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
+    >
+      <div
+        className="doc-browser-tab-scrollbar flex h-full min-w-0 flex-1 items-center gap-1.5 overflow-x-auto"
+        onPointerDown={(event) => event.stopPropagation()}
+      >
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeTabId;
+          return (
+            <div
+              key={tab.id}
+              className={cn(
+                'inline-flex items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors',
+                isActive
+                  ? 'bg-amber-50/80 border-amber-200 text-amber-900 shadow-[0_1px_2px_rgba(30,20,10,0.04)]'
+                  : 'bg-[#f9f8f5] border-[#eee3d1] text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212]',
+              )}
             >
-              <X className="w-3 h-3" />
-            </button>
-          </div>
-        );
-      })}
-      <button
-        type="button"
-        onClick={onOpenDocs}
-        className="inline-flex items-center justify-center w-7 h-7 rounded-lg border border-[#eee3d1] bg-white text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212] shrink-0"
-        title={t('docBrowserNewTab')}
+              <button
+                type="button"
+                onClick={() => onSetActiveTab(tab.id)}
+                className="truncate text-left px-1"
+                title={tab.title}
+              >
+                {tab.title || t('docBrowserTabUntitled')}
+              </button>
+              <button
+                type="button"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onCloseTab(tab.id);
+                }}
+                className="rounded p-0.5 hover:bg-black/10"
+                aria-label={t('docBrowserCloseTab')}
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+      <div
+        className="flex h-full items-center gap-1 shrink-0"
+        data-testid="doc-browser-tab-actions"
+        onPointerDown={(event) => event.stopPropagation()}
       >
-        <Plus className="w-3.5 h-3.5" />
-      </button>
+        <button
+          type="button"
+          onClick={onGoBack}
+          disabled={!canGoBack}
+          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:text-gray-300 disabled:opacity-60 disabled:hover:bg-transparent disabled:hover:text-gray-300"
+          title={t('docBrowserBack')}
+        >
+          <ArrowLeft className="w-3.5 h-3.5" />
+        </button>
+        <button
+          type="button"
+          onClick={onGoForward}
+          disabled={!canGoForward}
+          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:text-gray-300 disabled:opacity-60 disabled:hover:bg-transparent disabled:hover:text-gray-300"
+          title={t('docBrowserForward')}
+        >
+          <ArrowRight className="w-3.5 h-3.5" />
+        </button>
+        <button
+          type="button"
+          onClick={onOpenNewTab}
+          className="hover:bg-gray-100 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
+          title={t('docBrowserNewTab')}
+        >
+          <Plus className="w-3.5 h-3.5" />
+        </button>
+        {!isFullscreen ? (
+          <button
+            type="button"
+            onClick={onToggleMode}
+            className="hover:bg-gray-100 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
+            title={isDocked ? t('docBrowserFloatMode') : t('docBrowserDockMode')}
+          >
+            {isDocked ? <Maximize2 className="w-3.5 h-3.5" /> : <PanelRightOpen className="w-3.5 h-3.5" />}
+          </button>
+        ) : null}
+        <button
+          type="button"
+          onClick={onClose}
+          className="hover:bg-gray-100 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
+          title={t('docBrowserClose')}
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      </div>
     </div>
   );
 }

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

@@ -1,8 +1,18 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { DocBrowser } from "@/shared/components/doc-browser/doc-browser";
+import type { DocBrowserContextValue, DocBrowserTab } from "@/shared/components/doc-browser/doc-browser-context";
 
-const { docBrowserState } = vi.hoisted(() => ({
+const { navigateMock } = vi.hoisted(() => ({
+  navigateMock: vi.fn(),
+}));
+
+vi.mock("react-router-dom", async () => ({
+  ...(await vi.importActual("react-router-dom") as object),
+  useNavigate: () => navigateMock,
+}));
+
+const { docBrowserState } = vi.hoisted<{ docBrowserState: DocBrowserContextValue }>(() => ({
   docBrowserState: {
     isOpen: true,
     mode: "docked" as "docked" | "floating",
@@ -18,6 +28,12 @@ const { docBrowserState } = vi.hoisted(() => ({
       },
     ],
     activeTabId: "docs",
+    activeHistory: [{
+      kind: "docs" as const,
+      tabId: "docs",
+      url: "https://docs.nextclaw.io/en/guide/getting-started",
+    }],
+    activeHistoryIndex: 0,
     currentTab: {
       id: "docs",
       kind: "docs" as const,
@@ -27,6 +43,8 @@ const { docBrowserState } = vi.hoisted(() => ({
       historyIndex: 0,
       navVersion: 0,
     },
+    open: vi.fn(),
+    openNewTab: vi.fn(),
     close: vi.fn(),
     toggleMode: vi.fn(),
     goBack: vi.fn(),
@@ -65,7 +83,27 @@ function firePointerEvent(
 
 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,
@@ -99,6 +137,126 @@ describe("DocBrowser", () => {
     expect(panel.querySelector(".cursor-se-resize")).toBeNull();
   });
 
+  it("keeps browser window controls on the tab strip", () => {
+    render(<DocBrowser />);
+
+    const tabStrip = screen.getByTestId("doc-browser-tab-strip");
+    const tabActions = screen.getByTestId("doc-browser-tab-actions");
+
+    expect(tabActions.contains(screen.getByTitle("Back"))).toBe(true);
+    expect(tabActions.contains(screen.getByTitle("Forward"))).toBe(true);
+    expect(tabStrip.contains(screen.getByTitle("Float Window"))).toBe(true);
+    expect(tabStrip.contains(screen.getByTitle("Close"))).toBe(true);
+    expect(tabActions.contains(screen.getByTitle("New Tab"))).toBe(true);
+    expect(screen.queryByText("Embedded Browser")).toBeNull();
+  });
+
+  it("uses active history to enable browser back and forward actions", () => {
+    const history = [
+      "https://docs.nextclaw.io/en/guide/getting-started",
+      "https://docs.nextclaw.io/en/guide/channels",
+      "https://docs.nextclaw.io/en/guide/apps",
+    ];
+    const historyTab: DocBrowserTab = {
+      id: "docs",
+      kind: "docs",
+      title: "Docs",
+      currentUrl: history[1],
+      history,
+      historyIndex: 1,
+      navVersion: 0,
+    };
+    docBrowserState.tabs = [historyTab];
+    docBrowserState.activeTabId = historyTab.id;
+    docBrowserState.activeHistory = [
+      { kind: "home" as const, tabId: "home", url: "nextclaw://new-tab" },
+      { kind: "docs" as const, tabId: historyTab.id, url: history[1] },
+      { kind: "apps" as const, tabId: "apps", url: "nextclaw://apps" },
+    ];
+    docBrowserState.activeHistoryIndex = 1;
+    docBrowserState.currentTab = historyTab;
+
+    render(<DocBrowser />);
+
+    fireEvent.click(screen.getByTitle("Back"));
+    fireEvent.click(screen.getByTitle("Forward"));
+
+    expect(docBrowserState.goBack).toHaveBeenCalled();
+    expect(docBrowserState.goForward).toHaveBeenCalled();
+  });
+
+  it("disables browser history actions at the active history edges", () => {
+    const history = [
+      "https://docs.nextclaw.io/en/guide/getting-started",
+      "https://docs.nextclaw.io/en/guide/apps",
+    ];
+    const latestTab: DocBrowserTab = {
+      id: "docs",
+      kind: "docs",
+      title: "Docs",
+      currentUrl: history[1],
+      history,
+      historyIndex: 1,
+      navVersion: 0,
+    };
+    docBrowserState.tabs = [latestTab];
+    docBrowserState.activeTabId = latestTab.id;
+    docBrowserState.activeHistory = [
+      { kind: "docs" as const, tabId: latestTab.id, url: history[0] },
+      { kind: "docs" as const, tabId: latestTab.id, url: history[1] },
+    ];
+    docBrowserState.activeHistoryIndex = 1;
+    docBrowserState.currentTab = latestTab;
+
+    const { rerender } = render(<DocBrowser />);
+
+    expect(screen.getByTitle("Back")).toHaveProperty("disabled", false);
+    expect(screen.getByTitle("Forward")).toHaveProperty("disabled", true);
+
+    const oldestTab: DocBrowserTab = {
+      ...latestTab,
+      currentUrl: history[0],
+      historyIndex: 0,
+    };
+    docBrowserState.tabs = [oldestTab];
+    docBrowserState.currentTab = oldestTab;
+    docBrowserState.activeHistoryIndex = 0;
+    rerender(<DocBrowser />);
+
+    expect(screen.getByTitle("Back")).toHaveProperty("disabled", true);
+    expect(screen.getByTitle("Forward")).toHaveProperty("disabled", false);
+  });
+
+  it("opens the start page from the fixed new tab action", () => {
+    render(<DocBrowser />);
+
+    fireEvent.click(screen.getByTitle("New Tab"));
+
+    expect(docBrowserState.openNewTab).toHaveBeenCalled();
+  });
+
+  it("renders a start page for home tabs", () => {
+    const homeTab: DocBrowserTab = {
+      id: "home",
+      kind: "home" as const,
+      title: "Start Page",
+      currentUrl: "nextclaw://new-tab",
+      history: ["nextclaw://new-tab"],
+      historyIndex: 0,
+      navVersion: 0,
+    };
+    docBrowserState.tabs = [homeTab];
+    docBrowserState.activeTabId = homeTab.id;
+    docBrowserState.currentTab = homeTab;
+
+    render(<DocBrowser />);
+
+    expect(screen.getAllByText("Start Page").length).toBeGreaterThan(0);
+    expect(screen.getByText("Apps")).toBeTruthy();
+    expect(screen.getByText("Service Apps")).toBeTruthy();
+    expect(screen.getByText("Help Docs")).toBeTruthy();
+  });
+
   it("keeps the floating panel left edge stable when resizing from the right", () => {
     docBrowserState.mode = "floating";