@nextclaw/ui 0.13.4 → 0.13.6

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

@@ -2,6 +2,9 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import {
   DOCS_DEFAULT_BASE_URL,
   DOC_BROWSER_HOME_TAB_KIND,
+  type DocBrowserDockControls,
+  type DocBrowserDockState,
+  type DocBrowserTab,
   useDocBrowser,
 } from './doc-browser-context';
 import { normalizeDocUrl } from './utils/doc-browser-url.utils';
@@ -20,6 +23,7 @@ import { GripVertical } from 'lucide-react';
 type DocBrowserProps = {
   customTabRenderers?: DocBrowserCustomTabRenderers;
   displayMode?: 'desktop' | 'fullscreen';
+  dockControls?: DocBrowserDockControls;
 };
 
 type FloatingPanelRect = { x: number; y: number; w: number; h: number };
@@ -35,6 +39,33 @@ type FloatingPanelInteraction = {
 const FLOATING_PANEL_MARGIN = 40;
 const FLOATING_PANEL_MIN_WIDTH = 360;
 const FLOATING_PANEL_MIN_HEIGHT = 400;
+const DEFAULT_IFRAME_SANDBOX = 'allow-same-origin allow-scripts allow-popups allow-forms';
+
+function resolveIframeSandbox(
+  customRenderer: DocBrowserCustomTabRenderers[string] | undefined,
+  currentTab: DocBrowserTab | undefined,
+): string {
+  return currentTab ? customRenderer?.getIframeSandbox?.(currentTab) ?? DEFAULT_IFRAME_SANDBOX : DEFAULT_IFRAME_SANDBOX;
+}
+
+function useDocBrowserDockAction(
+  dockControls: DocBrowserDockControls | undefined,
+  currentTab: DocBrowserTab | undefined,
+  dockState: DocBrowserDockState | undefined,
+) {
+  return useCallback(() => {
+    if (!dockState?.canDock) {
+      return;
+    }
+    if (dockState.isDocked) {
+      if (dockState.removable) {
+        dockControls?.unpinTab(currentTab);
+      }
+      return;
+    }
+    dockControls?.pinTab(currentTab);
+  }, [currentTab, dockControls, dockState]);
+}
 
 function clamp(value: number, min: number, max: number): number {
   return Math.min(max, Math.max(min, value));
@@ -49,10 +80,7 @@ function createInitialFloatingPanelRect(): FloatingPanelRect {
   };
 }
 
-export function DocBrowser({
-  customTabRenderers = {},
-  displayMode = 'desktop',
-}: DocBrowserProps) {
+export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', dockControls }: DocBrowserProps) {
   const {
     isOpen,
     mode,
@@ -89,6 +117,7 @@ export function DocBrowser({
   const canGoBack = activeHistoryIndex > 0;
   const canGoForward = activeHistoryIndex < activeHistory.length - 1;
   const customRenderer = currentTab ? customTabRenderers[currentTab.kind] : undefined;
+  const dockState = dockControls?.getDockState(currentTab);
 
   useEffect(() => {
     if (!isDocsTab) {
@@ -249,6 +278,8 @@ export function DocBrowser({
     setIframeReloadVersion((version) => version + 1);
   }, []);
 
+  const handleToggleDock = useDocBrowserDockAction(dockControls, currentTab, dockState);
+
   if (!isOpen) return null;
 
   const isDocked = mode === 'docked';
@@ -264,9 +295,7 @@ export function DocBrowser({
   const customContent = customRenderParams
     ? customRenderer?.renderContent?.(customRenderParams) ?? (isHomeTab ? <DocBrowserHomePage /> : null)
     : null;
-  const iframeSandbox = currentTab
-    ? customRenderer?.getIframeSandbox?.(currentTab) ?? 'allow-same-origin allow-scripts allow-popups allow-forms'
-    : 'allow-same-origin allow-scripts allow-popups allow-forms';
+  const iframeSandbox = resolveIframeSandbox(customRenderer, currentTab);
 
   const panelContent = (
     <>
@@ -275,11 +304,13 @@ export function DocBrowser({
         activeTabId={activeTabId}
         canGoBack={canGoBack}
         canGoForward={canGoForward}
+        dockState={dockState}
         isDocked={isDocked}
         isFullscreen={isFullscreen}
         onGoBack={goBack}
         onGoForward={goForward}
         onOpenNewTab={openNewTab}
+        onToggleDock={handleToggleDock}
         onSetActiveTab={setActiveTab}
         onCloseTab={closeTab}
         onClose={close}

package/src/shared/components/doc-browser/index.ts

@@ -1,3 +1,4 @@
 export { DocBrowser } from './doc-browser';
 export { DocBrowserProvider, useDocBrowser, isDocsUrl } from './doc-browser-context';
+export type { DocBrowserDockIcon } from './doc-browser-context';
 export { useDocLinkInterceptor } from './use-doc-link-interceptor';

package/src/shared/components/doc-browser/managers/doc-browser.manager.ts

@@ -50,9 +50,23 @@ function areActiveHistoryEntriesEquivalent(
   current: DocBrowserActiveHistoryEntry,
   next: DocBrowserActiveHistoryEntry,
 ): boolean {
+  const currentUri = current.resourceUri ?? current.url;
+  const nextUri = next.resourceUri ?? next.url;
   return current.tabId === next.tabId
     && current.kind === next.kind
-    && routeResolver.areUrlsEquivalent(current.url, next.url, current.kind, next.kind);
+    && routeResolver.areUrlsEquivalent(currentUri, nextUri, current.kind, next.kind);
+}
+
+function createActiveHistoryEntryFromTarget(
+  tabId: string,
+  target: DocBrowserRouteTarget,
+): DocBrowserActiveHistoryEntry {
+  return {
+    kind: target.kind,
+    resourceUri: target.resourceUri ?? target.url,
+    tabId,
+    url: target.url,
+  };
 }
 
 function pushActiveHistory(
@@ -90,12 +104,14 @@ function restoreActiveHistoryEntry(
   if (!tab) {
     return state;
   }
+  const restoreUri = entry.resourceUri ?? entry.url;
   const target = routeResolver.resolveOpenTarget({
     activeTab: tab,
     kind: entry.kind,
-    url: entry.url,
+    url: restoreUri,
   });
   const historyIndex = findTabHistoryIndex(routeResolver, tab, target.url);
+  const shouldPreserveCurrentTitle = entry.resourceUri !== undefined && entry.resourceUri === tab.resourceUri;
   return updateTab(
     {
       ...state,
@@ -107,9 +123,11 @@ function restoreActiveHistoryEntry(
       ...currentTab,
       currentUrl: target.url,
       dedupeKey: target.dedupeKey,
+      dockIcon: target.dockIcon ?? currentTab.dockIcon,
       historyIndex: historyIndex >= 0 ? historyIndex : currentTab.historyIndex,
       kind: target.kind,
-      title: target.title,
+      resourceUri: target.resourceUri ?? target.url,
+      title: shouldPreserveCurrentTitle ? currentTab.title : target.title,
     }),
   );
 }
@@ -125,6 +143,8 @@ function updateTabForOpen(
     ...tab,
     title: options?.title || target.title || tab.title,
     kind: target.kind,
+    resourceUri: target.resourceUri ?? target.url,
+    dockIcon: options?.dockIcon ?? target.dockIcon,
     dedupeKey,
   };
 
@@ -180,12 +200,12 @@ function openResolvedDocBrowserState(
     };
     const shouldPushActiveHistory = shouldActivate || matchedTab.id === prev.activeTabId;
     return shouldPushActiveHistory
-      ? pushActiveHistory(routeResolver, nextState, { kind: target.kind, tabId: matchedTab.id, url: target.url })
+      ? pushActiveHistory(routeResolver, nextState, createActiveHistoryEntryFromTarget(matchedTab.id, target))
       : nextState;
   }
 
   if (shouldForceNewTab || dedupeKey || !activeTab || activeTab.kind !== target.kind) {
-    const newTab = createDocBrowserTab(target.url, target.kind, title ?? target.title, dedupeKey);
+    const newTab = createDocBrowserTab(target.url, target.kind, title ?? target.title, dedupeKey, target.resourceUri ?? target.url, options?.dockIcon ?? target.dockIcon);
     if (isClosedDefaultHomeState(prev, activeTab)) {
       const nextState = {
         ...prev,
@@ -213,7 +233,7 @@ function openResolvedDocBrowserState(
   return pushActiveHistory(
     routeResolver,
     { ...next, isOpen: true },
-    { kind: target.kind, tabId: prev.activeTabId, url: target.url },
+    createActiveHistoryEntryFromTarget(prev.activeTabId, target),
   );
 }
 
@@ -290,9 +310,11 @@ export class DocBrowserManager {
           ...tab,
           currentUrl: target.url,
           dedupeKey: target.dedupeKey,
+          dockIcon: target.dockIcon,
           ...appendManualNavigation(tab, target.url),
           kind: target.kind,
           navVersion: tab.navVersion + 1,
+          resourceUri: target.resourceUri ?? target.url,
           title: target.title,
         };
       });
@@ -328,8 +350,10 @@ export class DocBrowserManager {
           ...tab,
           currentUrl: target.url,
           dedupeKey: target.dedupeKey,
+          dockIcon: target.dockIcon,
           ...appendManualNavigation(tab, target.url),
           kind: target.kind,
+          resourceUri: target.resourceUri ?? target.url,
           title: target.title,
         };
       });

package/src/shared/components/doc-browser/stores/doc-browser.store.ts

@@ -2,6 +2,7 @@ import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import type {
   DocBrowserActiveHistoryEntry,
+  DocBrowserDockIcon,
   DocBrowserMode,
   DocBrowserState,
   DocBrowserStateUpdate,
@@ -42,6 +43,22 @@ function normalizePersistedNumber(value: unknown, min: number, max: number, fall
     : fallback;
 }
 
+function normalizePersistedDockIcon(value: unknown): DocBrowserDockIcon | undefined {
+  if (!isRecord(value) || typeof value.type !== 'string') {
+    return undefined;
+  }
+  if (value.type === 'builtin' && typeof value.name === 'string' && value.name.trim().length > 0) {
+    return { type: 'builtin', name: value.name.trim() };
+  }
+  if (value.type === 'url' && typeof value.url === 'string' && value.url.trim().length > 0) {
+    return { type: 'url', url: value.url.trim() };
+  }
+  if (value.type === 'text' && typeof value.value === 'string' && value.value.trim().length > 0) {
+    return { type: 'text', value: value.value.trim() };
+  }
+  return undefined;
+}
+
 function normalizePersistedDocBrowserTab(value: unknown): DocBrowserTab | null {
   if (
     !isRecord(value)
@@ -59,12 +76,18 @@ function normalizePersistedDocBrowserTab(value: unknown): DocBrowserTab | null {
   const dedupeKey = typeof value.dedupeKey === 'string' && value.dedupeKey.trim().length > 0
     ? value.dedupeKey
     : undefined;
+  const resourceUri = typeof value.resourceUri === 'string' && value.resourceUri.trim().length > 0
+    ? value.resourceUri.trim()
+    : undefined;
+  const dockIcon = normalizePersistedDockIcon(value.dockIcon);
 
   return {
     id: value.id,
     kind: value.kind,
     title: value.title,
     currentUrl: history[historyIndex] ?? value.currentUrl,
+    resourceUri,
+    dockIcon,
     dedupeKey,
     history,
     historyIndex,
@@ -75,6 +98,7 @@ function normalizePersistedDocBrowserTab(value: unknown): DocBrowserTab | null {
 function createActiveHistoryEntryFromTab(tab: DocBrowserTab): DocBrowserActiveHistoryEntry {
   return {
     kind: tab.kind,
+    resourceUri: tab.resourceUri,
     tabId: tab.id,
     url: tab.currentUrl,
   };
@@ -95,8 +119,13 @@ function normalizePersistedActiveHistoryEntry(
     return null;
   }
 
+  const resourceUri = typeof value.resourceUri === 'string' && value.resourceUri.trim().length > 0
+    ? value.resourceUri.trim()
+    : undefined;
+
   return {
     kind: value.kind,
+    resourceUri,
     tabId: value.tabId,
     url: value.url,
   };

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

@@ -6,6 +6,8 @@ export type DocBrowserTab = {
   kind: DocBrowserTabKind;
   title: string;
   currentUrl: string;
+  resourceUri?: string;
+  dockIcon?: DocBrowserDockIcon;
   dedupeKey?: string;
   history: string[];
   historyIndex: number;
@@ -14,13 +16,32 @@ export type DocBrowserTab = {
 };
 
 export type DocBrowserRouteTarget = {
+  dockIcon?: DocBrowserDockIcon;
   dedupeKey?: string;
   historyPolicy: 'managed' | 'none';
   kind: DocBrowserTabKind;
+  resourceUri?: string;
   title: string;
   url: string;
 };
 
+export type DocBrowserDockIcon =
+  | { type: 'builtin'; name: string }
+  | { type: 'url'; url: string }
+  | { type: 'text'; value: string };
+
+export type DocBrowserDockState = {
+  canDock: boolean;
+  isDocked: boolean;
+  removable: boolean;
+};
+
+export type DocBrowserDockControls = {
+  getDockState: (tab?: DocBrowserTab) => DocBrowserDockState;
+  pinTab: (tab?: DocBrowserTab) => void;
+  unpinTab: (tab?: DocBrowserTab) => void;
+};
+
 export type DocBrowserRouteResolver = {
   areUrlsEquivalent: (
     currentUrl: string,
@@ -38,6 +59,7 @@ export type DocBrowserRouteResolver = {
 
 export type DocBrowserActiveHistoryEntry = {
   kind: DocBrowserTabKind;
+  resourceUri?: string;
   tabId: string;
   url: string;
 };
@@ -45,6 +67,7 @@ export type DocBrowserActiveHistoryEntry = {
 export type DocBrowserOpenOptions = {
   activate?: boolean;
   dedupeKey?: string;
+  dockIcon?: DocBrowserDockIcon;
   newTab?: boolean;
   title?: string;
   kind?: DocBrowserTabKind;

package/src/shared/components/doc-browser/utils/doc-browser-state.utils.ts

@@ -1,5 +1,6 @@
 import type {
   DocBrowserActiveHistoryEntry,
+  DocBrowserDockIcon,
   DocBrowserState,
   DocBrowserTab,
   DocBrowserTabKind,
@@ -23,14 +24,19 @@ export function createDocBrowserTab(
   kind: DocBrowserTabKind,
   title?: string,
   dedupeKey?: string,
+  resourceUri?: string,
+  dockIcon?: DocBrowserDockIcon,
 ): DocBrowserTab {
   const tabTitle = title?.trim() || inferTabTitle(url, kind, kind === 'docs' ? t('docBrowserHelp') : 'Detail');
+  const normalizedResourceUri = resourceUri?.trim();
 
   return {
     id: nextTabId(),
     kind,
     title: tabTitle,
     currentUrl: url,
+    resourceUri: normalizedResourceUri ? normalizedResourceUri : undefined,
+    dockIcon,
     dedupeKey,
     history: [url],
     historyIndex: 0,
@@ -41,6 +47,7 @@ export function createDocBrowserTab(
 export function createDocBrowserActiveHistoryEntry(tab: DocBrowserTab): DocBrowserActiveHistoryEntry {
   return {
     kind: tab.kind,
+    resourceUri: tab.resourceUri,
     tabId: tab.id,
     url: tab.currentUrl,
   };

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

@@ -4,7 +4,7 @@ import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
 import { Skeleton } from '@/shared/components/ui/skeleton';
 import { ProviderScopedModelInput } from '@/shared/components/common/provider-scoped-model-input';
-import { useConfig, useConfigMeta, useConfigSchema, useUpdateModel } from '@/shared/hooks/use-config';
+import { useConfig, useConfigSchema, useProviderTemplates, useProviders, useUpdateModel } from '@/shared/hooks/use-config';
 import { hintForPath } from '@/shared/lib/config-hints';
 import { t } from '@/shared/lib/i18n';
 import { buildProviderModelCatalog } from '@/shared/lib/provider-models';
@@ -85,7 +85,8 @@ function ModelConfigForm(props: {
 
 export function ModelConfig() {
   const { data: config, isLoading } = useConfig();
-  const { data: meta } = useConfigMeta();
+  const { data: providersView } = useProviders();
+  const { data: templatesView } = useProviderTemplates();
   const { data: schema } = useConfigSchema();
   const updateModel = useUpdateModel();
   const uiHints = schema?.uiHints;
@@ -93,8 +94,8 @@ export function ModelConfig() {
   const workspaceHint = hintForPath('agents.defaults.workspace', uiHints);
 
   const providerCatalog = useMemo(
-    () => buildProviderModelCatalog({ meta, config, onlyConfigured: true }),
-    [config, meta]
+    () => buildProviderModelCatalog({ providersView, templatesView, config, onlyConfigured: true }),
+    [config, providersView, templatesView]
   );
   const modelHelpText = t('modelIdentifierHelp') || modelHint?.help || '';
   const initialModel = (config?.agents?.defaults?.model || '').trim();

package/src/shared/components/provider-auth-section.tsx

@@ -2,10 +2,10 @@ import { Button } from '@/shared/components/ui/button';
 import { Label } from '@/shared/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
 import { t } from '@/shared/lib/i18n';
-import type { ProviderSpecView } from '@/shared/lib/api';
+import type { ProviderTemplateView } from '@/shared/lib/api';
 import { ProviderPillSelector } from './provider-pill-selector';
 
-type ProviderAuthSectionProps = { providerAuth: ProviderSpecView['auth']; providerAuthNote: string; providerAuthMethodOptions: Array<{ value: string; label: string }>; providerAuthMethodsCount: number; selectedAuthMethodHint: string; shouldUseAuthMethodPills: boolean; resolvedAuthMethodId: string; onAuthMethodChange: (value: string) => void; onStartProviderAuth: () => void; onImportProviderAuthFromCli: () => void; startPending: boolean; importPending: boolean; authSessionId: string | null; authStatusMessage: string };
+type ProviderAuthSectionProps = { providerAuth: ProviderTemplateView['auth']; providerAuthNote: string; providerAuthMethodOptions: Array<{ value: string; label: string }>; providerAuthMethodsCount: number; selectedAuthMethodHint: string; shouldUseAuthMethodPills: boolean; resolvedAuthMethodId: string; onAuthMethodChange: (value: string) => void; onStartProviderAuth: () => void; onImportProviderAuthFromCli: () => void; startPending: boolean; importPending: boolean; authSessionId: string | null; authStatusMessage: string };
 
 export function ProviderAuthSection(props: ProviderAuthSectionProps) {
   const {

package/src/shared/components/ui/switch.tsx

@@ -4,10 +4,11 @@ import { cn } from '@/shared/lib/utils';
 interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
+  thumbClassName?: string;
 }
 
 const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
-  ({ className, checked = false, onCheckedChange, ...props }, ref) => {
+  ({ className, checked = false, onCheckedChange, thumbClassName, ...props }, ref) => {
     return (
       <button
         type="button"
@@ -23,9 +24,11 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         {...props}
       >
         <span
+          data-state={checked ? 'checked' : 'unchecked'}
           className={cn(
             'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-md ring-0 transition-transform duration-fast',
-            checked ? 'translate-x-5' : 'translate-x-0'
+            checked ? 'translate-x-5' : 'translate-x-0',
+            thumbClassName
           )}
         />
       </button>

package/src/shared/hooks/use-config.ts

@@ -8,6 +8,8 @@ import {
   fetchConfig,
   fetchConfigMeta,
   fetchConfigSchema,
+  fetchProviders,
+  fetchProviderTemplates,
   updateModel,
   updateSearch,
   createProvider,
@@ -61,6 +63,23 @@ export function useConfigMeta() {
   });
 }
 
+export function useProviders() {
+  return useQuery({
+    queryKey: ['providers'],
+    queryFn: fetchProviders,
+    staleTime: 30_000,
+    refetchOnWindowFocus: true
+  });
+}
+
+export function useProviderTemplates() {
+  return useQuery({
+    queryKey: ['provider-templates'],
+    queryFn: fetchProviderTemplates,
+    staleTime: Infinity
+  });
+}
+
 export function useConfigSchema() {
   return useQuery({
     queryKey: ['config-schema'],
@@ -104,12 +123,14 @@ export function useUpdateProvider() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({ provider, data }: { provider: string; data: unknown }) =>
+    mutationFn: ({ provider, data }: { provider: string; data: unknown; silentSuccess?: boolean }) =>
       updateProvider(provider, data as Parameters<typeof updateProvider>[1]),
-    onSuccess: () => {
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['providers'] });
       queryClient.invalidateQueries({ queryKey: ['config'] });
-      queryClient.invalidateQueries({ queryKey: ['config-meta'] });
-      toast.success(t('configSaved'));
+      if (!variables.silentSuccess) {
+        toast.success(t('configSaved'));
+      }
     },
     onError: (error: Error) => {
       toast.error(t('configSaveFailed') + ': ' + error.message);
@@ -124,8 +145,8 @@ export function useCreateProvider() {
     mutationFn: ({ data }: { data?: unknown }) =>
       createProvider((data ?? {}) as Parameters<typeof createProvider>[0]),
     onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['providers'] });
       queryClient.invalidateQueries({ queryKey: ['config'] });
-      queryClient.invalidateQueries({ queryKey: ['config-meta'] });
       toast.success(t('configSaved'));
     },
     onError: (error: Error) => {
@@ -140,8 +161,8 @@ export function useDeleteProvider() {
   return useMutation({
     mutationFn: ({ provider }: { provider: string }) => deleteProvider(provider),
     onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['providers'] });
       queryClient.invalidateQueries({ queryKey: ['config'] });
-      queryClient.invalidateQueries({ queryKey: ['config-meta'] });
       toast.success(t('configSaved'));
     },
     onError: (error: Error) => {