@nextclaw/ui 0.12.11 → 0.12.13

package/src/shared/components/config/secrets-config.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { SecretsConfig } from '@/shared/components/config/secrets-config';
+import { setLanguage } from '@/shared/lib/i18n';
+
+const mocks = vi.hoisted(() => ({
+  mutate: vi.fn(),
+  useConfigData: {
+    isLoading: false,
+    data: {
+      secrets: {
+        enabled: true,
+        defaults: {
+          env: 'vault-env',
+          file: 'vault-file',
+        },
+        providers: {
+          'vault-env': { source: 'env', prefix: 'NEXTCLAW_' },
+          'vault-file': { source: 'file', path: '/tmp/secrets.json', format: 'json' },
+        },
+        refs: {
+          'agents.defaults.model': {
+            source: 'env',
+            provider: 'vault-env',
+            id: 'DEFAULT_MODEL',
+          },
+        },
+      },
+    },
+  },
+}));
+
+vi.mock('@/shared/hooks/use-config', () => ({
+  useConfig: () => mocks.useConfigData,
+  useUpdateSecrets: () => ({
+    mutate: mocks.mutate,
+    isPending: false,
+  }),
+}));
+
+describe('SecretsConfig', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    mocks.mutate.mockReset();
+    if (!HTMLElement.prototype.hasPointerCapture) {
+      HTMLElement.prototype.hasPointerCapture = () => false;
+    }
+    if (!HTMLElement.prototype.setPointerCapture) {
+      HTMLElement.prototype.setPointerCapture = () => {};
+    }
+    if (!HTMLElement.prototype.releasePointerCapture) {
+      HTMLElement.prototype.releasePointerCapture = () => {};
+    }
+  });
+
+  it('submits the loaded secrets config through updateSecrets', async () => {
+    const user = userEvent.setup();
+
+    render(<SecretsConfig />);
+
+    expect(screen.getByText('Secret Providers')).toBeTruthy();
+    expect(screen.getByDisplayValue('vault-env')).toBeTruthy();
+    expect(screen.getByDisplayValue('NEXTCLAW_')).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: '保存' }));
+
+    expect(mocks.mutate).toHaveBeenCalledWith({
+      data: {
+        enabled: true,
+        defaults: {
+          env: 'vault-env',
+          file: 'vault-file',
+          exec: null,
+        },
+        providers: {
+          'vault-env': { source: 'env', prefix: 'NEXTCLAW_' },
+          'vault-file': { source: 'file', path: '/tmp/secrets.json', format: 'json' },
+        },
+        refs: {
+          'agents.defaults.model': {
+            source: 'env',
+            provider: 'vault-env',
+            id: 'DEFAULT_MODEL',
+          },
+        },
+      },
+    });
+  });
+});

package/src/shared/components/config/secrets-config.tsx

@@ -0,0 +1,25 @@
+import { useConfig, useUpdateSecrets } from '@/shared/hooks/use-config';
+import { t } from '@/shared/lib/i18n';
+import { buildSecretsFormState, buildSecretsSubmitPayload, SecretsConfigForm } from '@/shared/components/config/secrets-config-form';
+
+export function SecretsConfig() {
+  const { data: config, isLoading } = useConfig();
+  const updateSecrets = useUpdateSecrets();
+
+  if (isLoading) {
+    return <div className="p-8 text-gray-400">{t('loading')}</div>;
+  }
+
+  return (
+    <SecretsConfigForm
+      key={JSON.stringify(config?.secrets ?? null)}
+      initialState={buildSecretsFormState(config?.secrets)}
+      isPending={updateSecrets.isPending}
+      onSubmit={(state) =>
+        updateSecrets.mutate({
+          data: buildSecretsSubmitPayload(state),
+        })
+      }
+    />
+  );
+}

package/src/{components/config → shared/components}/config-split-page.tsx

@@ -1,17 +1,61 @@
-import type { ButtonHTMLAttributes, HTMLAttributes } from "react";
-import type { LucideIcon } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { Children, type ButtonHTMLAttributes, type HTMLAttributes } from "react";
+import { ArrowLeft, type LucideIcon } from "lucide-react";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
-const CARD_CLASS =
-  "min-w-0 overflow-hidden rounded-2xl border border-gray-200/70 bg-white shadow-card xl:h-[calc(100vh-180px)] xl:max-h-[860px]";
-type DivProps = HTMLAttributes<HTMLDivElement>;
-type SectionProps = HTMLAttributes<HTMLElement>;
+const CARD_CLASS = "min-w-0 overflow-hidden rounded-2xl border border-gray-200/70 bg-white shadow-card xl:h-[calc(100vh-180px)] xl:max-h-[860px]";
+type DivProps = HTMLAttributes<HTMLDivElement>; type SectionProps = HTMLAttributes<HTMLElement>;
 
 function ConfigSplitPane({ className, ...props }: SectionProps) {
   return <section className={cn(CARD_CLASS, "flex flex-col", className)} {...props} />;
 }
 
-export function ConfigSplitPage({ className, ...props }: DivProps) {
+export function ConfigSplitPage({
+  className,
+  children,
+  mobileView,
+  onMobileBack,
+  mobileListLabel,
+  ...props
+}: DivProps & {
+  mobileView?: "list" | "detail";
+  onMobileBack?: () => void;
+  mobileListLabel?: string;
+}) {
+  const childArray = Children.toArray(children);
+  const [sidebarChild, detailChild, ...remainingChildren] = childArray;
+
+  if (mobileView && sidebarChild && detailChild) {
+    return (
+      <div
+        className={cn("grid min-h-0 grid-cols-1 gap-4", className)}
+        {...props}
+      >
+        {mobileView === "detail" ? (
+          <>
+            <div className="shrink-0">
+              <button
+                type="button"
+                onClick={onMobileBack}
+                className="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900"
+              >
+                <ArrowLeft className="h-4 w-4" />
+                <span>{mobileListLabel ?? t("backToMain")}</span>
+              </button>
+            </div>
+            {detailChild}
+            {remainingChildren}
+          </>
+        ) : (
+          <>
+            {sidebarChild}
+            {remainingChildren}
+          </>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div
       className={cn(
@@ -19,7 +63,9 @@ export function ConfigSplitPage({ className, ...props }: DivProps) {
         className,
       )}
       {...props}
-    />
+    >
+      {children}
+    </div>
   );
 }
 

package/src/{components/config/CronConfig.tsx → shared/components/cron-config.tsx}

@@ -1,14 +1,14 @@
 import { useMemo, useState } from 'react';
-import type { CronJobView } from '@/api/types';
-import { useConfirmDialog } from '@/hooks/useConfirmDialog';
-import { useCronJobs, useDeleteCronJob, useToggleCronJob, useRunCronJob } from '@/hooks/useConfig';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Card, CardContent } from '@/components/ui/card';
-import { cn } from '@/lib/utils';
-import { formatDateTime, t } from '@/lib/i18n';
-import { PageLayout, PageHeader } from '@/components/layout/page-layout';
+import type { CronJobView } from '@/shared/lib/api';
+import { useConfirmDialog } from '@/shared/hooks/use-confirm-dialog';
+import { useCronJobs, useDeleteCronJob, useToggleCronJob, useRunCronJob } from '@/shared/hooks/use-config';
+import { Button } from '@/shared/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
+import { Card, CardContent } from '@/shared/components/ui/card';
+import { cn } from '@/shared/lib/utils';
+import { formatDateTime, t } from '@/shared/lib/i18n';
+import { PageLayout, PageHeader } from '@/app/components/layout/page-layout';
 import { AlarmClock, RefreshCw, Trash2, Play, Power } from 'lucide-react';
 
 type StatusFilter = 'all' | 'enabled' | 'disabled';
@@ -80,6 +80,58 @@ function filterByStatus(job: CronJobView, status: StatusFilter): boolean {
   return !job.enabled;
 }
 
+function CronJobCard(props: {
+  job: CronJobView;
+  onDelete: (job: CronJobView) => void;
+  onRun: (job: CronJobView) => void;
+  onToggle: (job: CronJobView) => void;
+}) {
+  const { job, onDelete, onRun, onToggle } = props;
+  return (
+    <Card className="border border-gray-200">
+      <CardContent className="pt-5 pb-5">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div className="min-w-[220px] flex-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="text-sm font-semibold text-gray-900">{job.name || job.id}</span>
+              <span className="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-semibold text-gray-500">{job.id}</span>
+              <span className={cn('rounded-full px-2 py-0.5 text-[10px] font-semibold', job.enabled ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-500')}>
+                {job.enabled ? t('enabled') : t('disabled')}
+              </span>
+              {job.deleteAfterRun ? (
+                <span className="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-semibold text-amber-700">{t('cronOneShot')}</span>
+              ) : null}
+            </div>
+            <div className="mt-2 text-xs text-gray-500">{t('cronScheduleLabel')}: {describeSchedule(job)}</div>
+            <div className="mt-2 whitespace-pre-wrap break-words text-sm text-gray-700">{job.payload.message}</div>
+            <div className="mt-2 text-xs text-gray-500">{t('cronDeliverTo')}: {describeDelivery(job)}</div>
+          </div>
+          <div className="min-w-[220px] space-y-2 text-xs text-gray-500">
+            <div><span className="font-medium text-gray-700">{t('cronNextRun')}:</span> {formatDate(job.state.nextRunAt)}</div>
+            <div><span className="font-medium text-gray-700">{t('cronLastRun')}:</span> {formatDate(job.state.lastRunAt)}</div>
+            <div><span className="font-medium text-gray-700">{t('cronLastStatus')}:</span> {job.state.lastStatus ?? '-'}</div>
+            {job.state.lastError ? <div className="break-words text-[11px] text-red-500">{job.state.lastError}</div> : null}
+          </div>
+          <div className="flex flex-wrap items-start justify-end gap-2">
+            <Button variant="subtle" size="sm" onClick={() => onRun(job)} className="gap-1">
+              <Play className="h-3.5 w-3.5" />
+              {t('cronRunNow')}
+            </Button>
+            <Button variant={job.enabled ? 'outline' : 'primary'} size="sm" onClick={() => onToggle(job)} className="gap-1">
+              <Power className="h-3.5 w-3.5" />
+              {job.enabled ? t('cronDisable') : t('cronEnable')}
+            </Button>
+            <Button variant="destructive" size="sm" onClick={() => onDelete(job)} className="gap-1">
+              <Trash2 className="h-3.5 w-3.5" />
+              {t('delete')}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
 export function CronConfig() {
   const [query, setQuery] = useState('');
   const [status, setStatus] = useState<StatusFilter>('all');
@@ -184,92 +236,7 @@ export function CronConfig() {
         ) : (
           <div className="space-y-4">
             {jobs.map((job) => (
-              <Card key={job.id} className="border border-gray-200">
-                <CardContent className="pt-5 pb-5">
-                  <div className="flex flex-wrap items-start justify-between gap-4">
-                    <div className="min-w-[220px] flex-1">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <span className="text-sm font-semibold text-gray-900">
-                          {job.name || job.id}
-                        </span>
-                        <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-gray-100 text-gray-500">
-                          {job.id}
-                        </span>
-                        <span
-                          className={cn(
-                            'text-[10px] font-semibold px-2 py-0.5 rounded-full',
-                            job.enabled ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-500'
-                          )}
-                        >
-                          {job.enabled ? t('enabled') : t('disabled')}
-                        </span>
-                        {job.deleteAfterRun && (
-                          <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-amber-50 text-amber-700">
-                            {t('cronOneShot')}
-                          </span>
-                        )}
-                      </div>
-                      <div className="mt-2 text-xs text-gray-500">
-                        {t('cronScheduleLabel')}: {describeSchedule(job)}
-                      </div>
-                      <div className="mt-2 text-sm text-gray-700 whitespace-pre-wrap break-words">
-                        {job.payload.message}
-                      </div>
-                      <div className="mt-2 text-xs text-gray-500">
-                        {t('cronDeliverTo')}: {describeDelivery(job)}
-                      </div>
-                    </div>
-                    <div className="min-w-[220px] text-xs text-gray-500 space-y-2">
-                      <div>
-                        <span className="font-medium text-gray-700">{t('cronNextRun')}:</span>{' '}
-                        {formatDate(job.state.nextRunAt)}
-                      </div>
-                      <div>
-                        <span className="font-medium text-gray-700">{t('cronLastRun')}:</span>{' '}
-                        {formatDate(job.state.lastRunAt)}
-                      </div>
-                      <div>
-                        <span className="font-medium text-gray-700">{t('cronLastStatus')}:</span>{' '}
-                        {job.state.lastStatus ?? '-'}
-                      </div>
-                      {job.state.lastError && (
-                        <div className="text-[11px] text-red-500 break-words">
-                          {job.state.lastError}
-                        </div>
-                      )}
-                    </div>
-                    <div className="flex items-start gap-2 flex-wrap justify-end">
-                      <Button
-                        variant="subtle"
-                        size="sm"
-                        onClick={() => handleRun(job)}
-                        className="gap-1"
-                      >
-                        <Play className="h-3.5 w-3.5" />
-                        {t('cronRunNow')}
-                      </Button>
-                      <Button
-                        variant={job.enabled ? 'outline' : 'primary'}
-                        size="sm"
-                        onClick={() => handleToggle(job)}
-                        className="gap-1"
-                      >
-                        <Power className="h-3.5 w-3.5" />
-                        {job.enabled ? t('cronDisable') : t('cronEnable')}
-                      </Button>
-                      <Button
-                        variant="destructive"
-                        size="sm"
-                        onClick={() => handleDelete(job)}
-                        className="gap-1"
-                      >
-                        <Trash2 className="h-3.5 w-3.5" />
-                        {t('delete')}
-                      </Button>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
+              <CronJobCard key={job.id} job={job} onDelete={handleDelete} onRun={handleRun} onToggle={handleToggle} />
             ))}
           </div>
         )}

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

@@ -0,0 +1,102 @@
+import { act, renderHook } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { DocBrowserProvider, useDocBrowser } from './doc-browser-context';
+
+vi.mock('@/shared/lib/i18n', async () => {
+  const actual = await vi.importActual('@/shared/lib/i18n');
+  return {
+    ...(actual as object),
+    getLanguage: () => 'en',
+  };
+});
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+  <DocBrowserProvider>{children}</DocBrowserProvider>
+);
+
+describe('DocBrowserProvider dedupe keys', () => {
+  it('opens different dedupe keys as separate content tabs', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open('data:text/html,A', {
+        dedupeKey: 'marketplace:skill:a',
+        kind: 'content',
+        title: 'Skill A',
+      });
+    });
+    act(() => {
+      result.current.open('data:text/html,B', {
+        dedupeKey: 'marketplace:skill:b',
+        kind: 'content',
+        title: 'Skill B',
+      });
+    });
+
+    const contentTabs = result.current.tabs.filter((tab) => tab.kind === 'content');
+    expect(contentTabs).toHaveLength(2);
+    expect(contentTabs.map((tab) => tab.dedupeKey)).toEqual([
+      'marketplace:skill:a',
+      'marketplace:skill:b',
+    ]);
+  });
+
+  it('updates the existing tab for the same dedupe key', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open('data:text/html,Loading', {
+        dedupeKey: 'marketplace:skill:a',
+        kind: 'content',
+        title: 'Loading',
+      });
+    });
+    act(() => {
+      result.current.open('data:text/html,Loaded', {
+        dedupeKey: 'marketplace:skill:a',
+        kind: 'content',
+        title: 'Loaded',
+      });
+    });
+
+    const contentTabs = result.current.tabs.filter((tab) => tab.kind === 'content');
+    expect(contentTabs).toHaveLength(1);
+    expect(contentTabs[0]).toMatchObject({
+      currentUrl: 'data:text/html,Loaded',
+      dedupeKey: 'marketplace:skill:a',
+      title: 'Loaded',
+    });
+  });
+
+  it('updates a matched tab without stealing focus when activation is disabled', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open('data:text/html,A', {
+        dedupeKey: 'marketplace:skill:a',
+        kind: 'content',
+        title: 'Skill A',
+      });
+      result.current.open('data:text/html,B', {
+        dedupeKey: 'marketplace:skill:b',
+        kind: 'content',
+        title: 'Skill B',
+      });
+    });
+    const activeTabId = result.current.activeTabId;
+
+    act(() => {
+      result.current.open('data:text/html,A-loaded', {
+        activate: false,
+        dedupeKey: 'marketplace:skill:a',
+        kind: 'content',
+        title: 'Skill A',
+      });
+    });
+
+    expect(result.current.activeTabId).toBe(activeTabId);
+    expect(result.current.tabs.find((tab) => tab.dedupeKey === 'marketplace:skill:a')).toMatchObject({
+      currentUrl: 'data:text/html,A-loaded',
+    });
+  });
+});

package/src/{components/doc-browser/DocBrowserContext.tsx → shared/components/doc-browser/doc-browser-context.tsx}

@@ -1,5 +1,5 @@
 import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';
-import { getLanguage, type I18nLanguage } from '@/lib/i18n';
+import { getLanguage, type I18nLanguage } from '@/shared/lib/i18n';
 
 const DOCS_PRIMARY_DOMAIN = 'docs.nextclaw.io';
 const DOCS_PAGES_DEV = 'nextclaw-docs.pages.dev';
@@ -21,6 +21,7 @@ export type DocBrowserTab = {
   kind: DocBrowserTabKind;
   title: string;
   currentUrl: string;
+  dedupeKey?: string;
   history: string[];
   historyIndex: number;
   /** Increments on parent-initiated navigation to trigger iframe remount */
@@ -28,6 +29,8 @@ export type DocBrowserTab = {
 };
 
 export type DocBrowserOpenOptions = {
+  activate?: boolean;
+  dedupeKey?: string;
   newTab?: boolean;
   title?: string;
   kind?: DocBrowserTabKind;
@@ -133,7 +136,12 @@ function inferTabTitle(url: string, kind: DocBrowserTabKind, fallback = 'Docs'):
   }
 }
 
-function createTab(url: string, kind: DocBrowserTabKind, title?: string): DocBrowserTab {
+function createTab(
+  url: string,
+  kind: DocBrowserTabKind,
+  title?: string,
+  dedupeKey?: string,
+): DocBrowserTab {
   const tabTitle = title?.trim() || inferTabTitle(url, kind, kind === 'docs' ? 'Docs' : 'Detail');
 
   return {
@@ -141,6 +149,7 @@ function createTab(url: string, kind: DocBrowserTabKind, title?: string): DocBro
     kind,
     title: tabTitle,
     currentUrl: url,
+    dedupeKey,
     history: [url],
     historyIndex: 0,
     navVersion: 0,
@@ -148,9 +157,44 @@ function createTab(url: string, kind: DocBrowserTabKind, title?: string): DocBro
 }
 
 function updateActiveTab(state: DocBrowserState, updater: (tab: DocBrowserTab) => DocBrowserTab): DocBrowserState {
+  return updateTab(state, state.activeTabId, updater);
+}
+
+function updateTab(
+  state: DocBrowserState,
+  tabId: string,
+  updater: (tab: DocBrowserTab) => DocBrowserTab,
+): DocBrowserState {
   return {
     ...state,
-    tabs: state.tabs.map((tab) => (tab.id === state.activeTabId ? updater(tab) : tab)),
+    tabs: state.tabs.map((tab) => (tab.id === tabId ? updater(tab) : tab)),
+  };
+}
+
+function updateTabForOpen(
+  tab: DocBrowserTab,
+  url: string,
+  kind: DocBrowserTabKind,
+  options?: DocBrowserOpenOptions,
+  dedupeKey?: string,
+): DocBrowserTab {
+  const baseTab = {
+    ...tab,
+    title: options?.title || tab.title,
+    kind,
+    dedupeKey,
+  };
+
+  if (normalizeDocUrl(url) === normalizeDocUrl(tab.currentUrl)) {
+    return baseTab;
+  }
+
+  return {
+    ...baseTab,
+    currentUrl: url,
+    history: [...tab.history.slice(0, tab.historyIndex + 1), url],
+    historyIndex: tab.historyIndex + 1,
+    navVersion: tab.navVersion + 1,
   };
 }
 
@@ -197,6 +241,56 @@ function resolveOpenTargetUrl(params: {
   return params.activeTab?.currentUrl ?? getDefaultDocsUrl();
 }
 
+function openDocBrowserState(
+  prev: DocBrowserState,
+  url?: string,
+  options?: DocBrowserOpenOptions,
+): DocBrowserState {
+  const {
+    activate,
+    dedupeKey: rawDedupeKey,
+    kind,
+    newTab: shouldForceNewTab,
+    title,
+  } = options ?? {};
+  const activeTab = prev.tabs.find((tab) => tab.id === prev.activeTabId) ?? prev.tabs[0];
+  const targetKind = kind ?? (url ? inferTabKind(url) : activeTab?.kind ?? 'docs');
+  const targetUrl = resolveOpenTargetUrl({ url, kind: targetKind, activeTab });
+  const dedupeKey = rawDedupeKey?.trim() || undefined;
+  const matchedTab = dedupeKey
+    ? prev.tabs.find((tab) => tab.dedupeKey === dedupeKey)
+    : undefined;
+
+  if (matchedTab) {
+    const next = updateTab(
+      prev,
+      matchedTab.id,
+      (tab) => updateTabForOpen(tab, targetUrl, targetKind, options, dedupeKey),
+    );
+    return {
+      ...next,
+      activeTabId: activate === false ? prev.activeTabId : matchedTab.id,
+      isOpen: true,
+    };
+  }
+
+  if (shouldForceNewTab || dedupeKey || !activeTab || activeTab.kind !== targetKind) {
+    const newTab = createTab(targetUrl, targetKind, title, dedupeKey);
+    return {
+      ...prev,
+      isOpen: true,
+      tabs: [...prev.tabs, newTab],
+      activeTabId: newTab.id,
+    };
+  }
+
+  const next = updateActiveTab(
+    prev,
+    (tab) => updateTabForOpen(tab, targetUrl, targetKind, options, dedupeKey),
+  );
+  return { ...next, isOpen: true };
+}
+
 export function DocBrowserProvider({ children }: { children: ReactNode }) {
   const initialUrl = getDefaultDocsUrl();
   const initialTab = createTab(initialUrl, 'docs', 'Docs');
@@ -213,48 +307,7 @@ export function DocBrowserProvider({ children }: { children: ReactNode }) {
   }, [state.tabs, state.activeTabId]);
 
   const open = useCallback((url?: string, options?: DocBrowserOpenOptions) => {
-    setState((prev) => {
-      const activeTab = prev.tabs.find((tab) => tab.id === prev.activeTabId) ?? prev.tabs[0];
-      const targetKind = options?.kind ?? (url ? inferTabKind(url) : activeTab?.kind ?? 'docs');
-      const targetUrl = resolveOpenTargetUrl({
-        url,
-        kind: targetKind,
-        activeTab
-      });
-
-      const shouldOpenNewTab = Boolean(options?.newTab || !activeTab || activeTab.kind !== targetKind);
-
-      if (shouldOpenNewTab) {
-        const newTab = createTab(targetUrl, targetKind, options?.title);
-        return {
-          ...prev,
-          isOpen: true,
-          tabs: [...prev.tabs, newTab],
-          activeTabId: newTab.id,
-        };
-      }
-
-      const next = updateActiveTab(prev, (tab) => {
-        if (normalizeDocUrl(targetUrl) === normalizeDocUrl(tab.currentUrl)) {
-          return options?.title ? { ...tab, title: options.title } : tab;
-        }
-
-        return {
-          ...tab,
-          title: options?.title || tab.title,
-          kind: targetKind,
-          currentUrl: targetUrl,
-          history: [...tab.history.slice(0, tab.historyIndex + 1), targetUrl],
-          historyIndex: tab.historyIndex + 1,
-          navVersion: tab.navVersion + 1,
-        };
-      });
-
-      return {
-        ...next,
-        isOpen: true,
-      };
-    });
+    setState((prev) => openDocBrowserState(prev, url, options));
   }, []);
 
   const close = useCallback(() => {