@nextclaw/ui 0.12.35-beta.1 → 0.12.35-beta.3

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

@@ -1,52 +1,47 @@
-import { useState, useRef, useCallback, useEffect, type CSSProperties } from 'react';
-import { DOCS_DEFAULT_BASE_URL, isDocsUrl, useDocBrowser } from './doc-browser-context';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import {
+  DOCS_DEFAULT_BASE_URL,
+  useDocBrowser,
+} from './doc-browser-context';
+import type { DocBrowserCustomTabRenderers } from './doc-browser-renderer.types';
+import {
+  DocBrowserDocsToolbar,
+  DocBrowserExternalLink,
+  DocBrowserFrameContent,
+  DocBrowserPanelHeader,
+} from './doc-browser-panel-parts';
+import { DocBrowserTabStrip } from './doc-browser-tab-strip';
 import { ResizableRightPanel } from '@/shared/components/resizable-right-panel/resizable-right-panel';
 import { cn } from '@/shared/lib/utils';
-import { t } from '@/shared/lib/i18n';
-import {
-  ArrowLeft,
-  ArrowRight,
-  X,
-  ExternalLink,
-  PanelRightOpen,
-  Maximize2,
-  GripVertical,
-  Search,
-  BookOpen,
-  Plus,
-} from 'lucide-react';
+import { GripVertical } from 'lucide-react';
 
 type DocBrowserProps = {
+  customTabRenderers?: DocBrowserCustomTabRenderers;
   displayMode?: 'desktop' | 'fullscreen';
 };
 
-function getPanelClassName(isFullscreen: boolean): string {
-  return cn(
-    'flex flex-col bg-white overflow-hidden relative',
-    isFullscreen
-      ? 'fixed inset-0 z-[9999] h-[100dvh] w-screen rounded-none border-0 shadow-2xl'
-      : 'rounded-2xl shadow-2xl border border-gray-200',
-  );
-}
+type FloatingPanelRect = { x: number; y: number; w: number; h: number };
+type FloatingPanelResizeEdge = 'left' | 'right' | 'top' | 'bottom' | 'bottom-right';
+type FloatingPanelInteraction = {
+  kind: 'drag' | 'resize';
+  edge?: FloatingPanelResizeEdge;
+  startX: number;
+  startY: number;
+  startRect: FloatingPanelRect;
+};
 
-function getPanelStyle(params: {
-  isFullscreen: boolean;
-  floatPos: { x: number; y: number };
-  floatSize: { w: number; h: number };
-}): CSSProperties | undefined {
-  const { isFullscreen, floatPos, floatSize } = params;
-  if (isFullscreen) return undefined;
-  return {
-    position: 'fixed',
-    left: floatPos.x,
-    top: floatPos.y,
-    width: floatSize.w,
-    height: floatSize.h,
-    zIndex: 9999,
-  };
+const FLOATING_PANEL_MARGIN = 40;
+const FLOATING_PANEL_MIN_WIDTH = 360;
+const FLOATING_PANEL_MIN_HEIGHT = 400;
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
 }
 
-export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
+export function DocBrowser({
+  customTabRenderers = {},
+  displayMode = 'desktop',
+}: DocBrowserProps) {
   const {
     isOpen,
     mode,
@@ -65,15 +60,14 @@ export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
   } = useDocBrowser();
 
   const [urlInput, setUrlInput] = useState('');
-  const [isDragging, setIsDragging] = useState(false);
-  const [isResizing, setIsResizing] = useState(false);
-  const [floatPos, setFloatPos] = useState(() => ({
-    x: Math.max(40, window.innerWidth - 520),
+  const [iframeReloadVersion, setIframeReloadVersion] = useState(0);
+  const [floatRect, setFloatRect] = useState<FloatingPanelRect>(() => ({
+    x: Math.max(FLOATING_PANEL_MARGIN, window.innerWidth - 520),
     y: 80,
+    w: 480,
+    h: 600,
   }));
-  const [floatSize, setFloatSize] = useState({ w: 480, h: 600 });
-  const dragRef = useRef<{ startX: number; startY: number; startPosX: number; startPosY: number } | null>(null);
-  const resizeRef = useRef<{ startX: number; startY: number; startW: number; startH: number } | null>(null);
+  const [floatInteraction, setFloatInteraction] = useState<FloatingPanelInteraction | null>(null);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const currentUrl = currentTab?.currentUrl ?? DOCS_DEFAULT_BASE_URL;
   const navVersion = currentTab?.navVersion ?? 0;
@@ -114,15 +108,6 @@ export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
     }
   }, [currentUrl, navVersion, isDocsTab]);
 
-  useEffect(() => {
-    if (mode === 'floating') {
-      setFloatPos((prev) => ({
-        x: Math.max(40, window.innerWidth - floatSize.w - 40),
-        y: prev.y,
-      }));
-    }
-  }, [mode, floatSize.w]);
-
   useEffect(() => {
     const handler = (e: MessageEvent) => {
       if (!isDocsTab) {
@@ -136,6 +121,76 @@ export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
     return () => window.removeEventListener('message', handler);
   }, [syncUrl, isDocsTab]);
 
+  const startFloatDrag = useCallback((event: React.PointerEvent<HTMLElement>) => {
+    event.preventDefault();
+    setFloatInteraction({
+      kind: 'drag',
+      startX: event.clientX,
+      startY: event.clientY,
+      startRect: floatRect,
+    });
+  }, [floatRect]);
+
+  const startFloatResize = useCallback((edge: FloatingPanelResizeEdge) => (event: React.PointerEvent<HTMLElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setFloatInteraction({
+      kind: 'resize',
+      edge,
+      startX: event.clientX,
+      startY: event.clientY,
+      startRect: floatRect,
+    });
+  }, [floatRect]);
+
+  useEffect(() => {
+    if (!floatInteraction) return;
+
+    const onMove = (event: PointerEvent) => {
+      const { startRect, startX, startY } = floatInteraction;
+      const dx = event.clientX - startX;
+      const dy = event.clientY - startY;
+
+      if (floatInteraction.kind === 'drag') {
+        setFloatRect({
+          ...startRect,
+          x: clamp(startRect.x + dx, FLOATING_PANEL_MARGIN, window.innerWidth - FLOATING_PANEL_MARGIN - startRect.w),
+          y: clamp(startRect.y + dy, FLOATING_PANEL_MARGIN, window.innerHeight - FLOATING_PANEL_MARGIN - startRect.h),
+        });
+        return;
+      }
+
+      if (floatInteraction.edge === 'left' || floatInteraction.edge === 'top') {
+        const isLeftEdge = floatInteraction.edge === 'left';
+        const fixedEdge = isLeftEdge ? startRect.x + startRect.w : startRect.y + startRect.h;
+        const movingEdge = isLeftEdge ? startRect.x + dx : startRect.y + dy;
+        const minSize = isLeftEdge ? FLOATING_PANEL_MIN_WIDTH : FLOATING_PANEL_MIN_HEIGHT;
+        const nextEdge = clamp(movingEdge, FLOATING_PANEL_MARGIN, fixedEdge - minSize);
+        setFloatRect(isLeftEdge ? { ...startRect, x: nextEdge, w: fixedEdge - nextEdge } : { ...startRect, y: nextEdge, h: fixedEdge - nextEdge });
+        return;
+      }
+
+      const right = clamp(startRect.x + startRect.w + dx, startRect.x + FLOATING_PANEL_MIN_WIDTH, window.innerWidth - FLOATING_PANEL_MARGIN);
+      const bottom = clamp(startRect.y + startRect.h + dy, startRect.y + FLOATING_PANEL_MIN_HEIGHT, window.innerHeight - FLOATING_PANEL_MARGIN);
+      setFloatRect({
+        ...startRect,
+        w: floatInteraction.edge === 'bottom' ? startRect.w : right - startRect.x,
+        h: floatInteraction.edge === 'right' ? startRect.h : bottom - startRect.y,
+      });
+    };
+
+    const onEnd = () => setFloatInteraction(null);
+
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onEnd);
+    window.addEventListener('pointercancel', onEnd);
+    return () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onEnd);
+      window.removeEventListener('pointercancel', onEnd);
+    };
+  }, [floatInteraction]);
+
   const handleUrlSubmit = useCallback((e: React.FormEvent) => {
     e.preventDefault();
     if (!isDocsTab) return;
@@ -150,230 +205,73 @@ export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
     }
   }, [urlInput, navigate, isDocsTab]);
 
-  const onDragStart = useCallback((e: React.MouseEvent) => {
-    if (mode !== 'floating') return;
-    setIsDragging(true);
-    dragRef.current = {
-      startX: e.clientX,
-      startY: e.clientY,
-      startPosX: floatPos.x,
-      startPosY: floatPos.y,
-    };
-  }, [mode, floatPos]);
-
-  useEffect(() => {
-    if (!isDragging) return;
-    const onMove = (e: MouseEvent) => {
-      if (!dragRef.current) return;
-      setFloatPos({
-        x: dragRef.current.startPosX + (e.clientX - dragRef.current.startX),
-        y: dragRef.current.startPosY + (e.clientY - dragRef.current.startY),
-      });
-    };
-    const onUp = () => {
-      setIsDragging(false);
-      dragRef.current = null;
-    };
-    window.addEventListener('mousemove', onMove);
-    window.addEventListener('mouseup', onUp);
-    return () => {
-      window.removeEventListener('mousemove', onMove);
-      window.removeEventListener('mouseup', onUp);
-    };
-  }, [isDragging]);
-
-  const onResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsResizing(true);
-    const { axis } = (e.currentTarget as HTMLElement).dataset;
-    resizeRef.current = {
-      startX: e.clientX,
-      startY: e.clientY,
-      startW: floatSize.w,
-      startH: floatSize.h,
-    };
-    const onMove = (ev: MouseEvent) => {
-      if (!resizeRef.current) return;
-      setFloatSize((prev) => ({
-        w: axis === 'y' ? prev.w : Math.max(360, resizeRef.current!.startW + (ev.clientX - resizeRef.current!.startX)),
-        h: axis === 'x' ? prev.h : Math.max(400, resizeRef.current!.startH + (ev.clientY - resizeRef.current!.startY)),
-      }));
-    };
-    const onUp = () => {
-      setIsResizing(false);
-      resizeRef.current = null;
-      window.removeEventListener('mousemove', onMove);
-      window.removeEventListener('mouseup', onUp);
-    };
-    window.addEventListener('mousemove', onMove);
-    window.addEventListener('mouseup', onUp);
-  }, [floatSize]);
-
-  const onLeftResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsResizing(true);
-    const startX = e.clientX;
-    const startW = floatSize.w;
-    const startPosX = floatPos.x;
-    const onMove = (ev: MouseEvent) => {
-      const delta = startX - ev.clientX;
-      const newW = Math.max(360, startW + delta);
-      setFloatSize((prev) => ({ ...prev, w: newW }));
-      setFloatPos((prev) => ({ ...prev, x: startPosX - (newW - startW) }));
-    };
-    const onUp = () => {
-      setIsResizing(false);
-      window.removeEventListener('mousemove', onMove);
-      window.removeEventListener('mouseup', onUp);
-    };
-    window.addEventListener('mousemove', onMove);
-    window.addEventListener('mouseup', onUp);
-  }, [floatSize.w, floatPos.x]);
+  const refreshIframe = useCallback(() => {
+    setIframeReloadVersion((version) => version + 1);
+  }, []);
 
   if (!isOpen) return null;
 
   const isDocked = mode === 'docked';
   const isFullscreen = displayMode === 'fullscreen';
+  const customRenderer = currentTab ? customTabRenderers[currentTab.kind] : undefined;
+  const customRenderParams = currentTab ? {
+    currentUrl,
+    open,
+    refreshIframe,
+    tab: currentTab,
+  } : undefined;
+  const customToolbar = customRenderParams ? customRenderer?.renderToolbar?.(customRenderParams) : null;
+  const customContent = customRenderParams ? customRenderer?.renderContent?.(customRenderParams) : 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 panelContent = (
     <>
-      <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)]',
-        )}
-        onMouseDown={!isDocked && !isFullscreen ? onDragStart : undefined}
-      >
-        <div className="flex items-center gap-2.5 min-w-0">
-          <BookOpen className="w-4 h-4 text-primary shrink-0" />
-          <span className="text-sm font-semibold text-gray-900 truncate">{t('docBrowserTitle')}</span>
-        </div>
-        <div className="flex items-center gap-1">
-          {!isFullscreen ? (
-            <button
-              onClick={toggleMode}
-              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={close}
-            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>
-
-      <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={() => setActiveTab(tab.id)}
-                className="truncate text-left px-1"
-                title={tab.title}
-              >
-                {tab.title || t('docBrowserTabUntitled')}
-              </button>
-              <button
-                type="button"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  closeTab(tab.id);
-                }}
-                className="rounded p-0.5 hover:bg-black/10"
-                aria-label={t('docBrowserCloseTab')}
-              >
-                <X className="w-3 h-3" />
-              </button>
-            </div>
-          );
-        })}
-        <button
-          onClick={() => open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
-          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')}
-        >
-          <Plus className="w-3.5 h-3.5" />
-        </button>
-      </div>
-
-      {isDocsTab && (
-        <div className="flex items-center gap-2 px-3.5 py-2 bg-white border-b border-gray-100 shrink-0">
-          <button
-            onClick={goBack}
-            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={goForward}
-            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={handleUrlSubmit} 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
-              type="text"
-              value={urlInput}
-              onChange={(e) => setUrlInput(e.target.value)}
-              placeholder={t('docBrowserSearchPlaceholder')}
-              className="w-full h-8 pl-8 pr-3 rounded-lg bg-gray-50 border border-gray-200 text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary/40 transition-colors placeholder:text-gray-400"
-            />
-          </form>
-        </div>
-      )}
+      <DocBrowserPanelHeader
+        currentTab={currentTab}
+        customRenderer={customRenderer}
+        isDocked={isDocked}
+        isFullscreen={isFullscreen}
+        onClose={close}
+        onDragStart={startFloatDrag}
+        onToggleMode={toggleMode}
+      />
 
-      <div className="flex-1 relative overflow-hidden">
-        <iframe
-          ref={iframeRef}
-          key={`${activeTabId}:${navVersion}`}
-          src={currentUrl}
-          className="absolute inset-0 w-full h-full border-0"
-          title={currentTab?.title || 'NextClaw Docs'}
-          sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-          allow="clipboard-read; clipboard-write"
-        />
-        {(isResizing || isDragging) && (
-          <div className="absolute inset-0 z-10" />
-        )}
-      </div>
-
-      {isDocsTab && isDocsUrl(currentUrl) && (
-        <div className="flex items-center justify-between px-4 py-2 bg-gray-50 border-t border-gray-200 shrink-0">
-          <a
-            href={currentUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            data-doc-external
-            className="flex items-center gap-1.5 text-xs text-primary hover:text-primary-hover font-medium transition-colors"
-          >
-            {t('docBrowserOpenExternal')}
-            <ExternalLink className="w-3 h-3" />
-          </a>
-        </div>
-      )}
+      <DocBrowserTabStrip
+        tabs={tabs}
+        activeTabId={activeTabId}
+        onOpenDocs={() => open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
+        onSetActiveTab={setActiveTab}
+        onCloseTab={closeTab}
+      />
+
+      <DocBrowserDocsToolbar
+        currentTab={currentTab}
+        isDocsTab={isDocsTab}
+        onBack={goBack}
+        onForward={goForward}
+        onSubmit={handleUrlSubmit}
+        onUrlInputChange={setUrlInput}
+        urlInput={urlInput}
+      />
+
+      {customToolbar}
+
+      <DocBrowserFrameContent
+        activeTabId={activeTabId}
+        currentTab={currentTab}
+        currentUrl={currentUrl}
+        customContent={customContent}
+        iframeRef={iframeRef}
+        iframeReloadVersion={iframeReloadVersion}
+        iframeSandbox={iframeSandbox}
+        isDragging={floatInteraction?.kind === 'drag'}
+        isResizing={floatInteraction?.kind === 'resize'}
+        navVersion={navVersion}
+      />
+
+      <DocBrowserExternalLink currentUrl={currentUrl} isDocsTab={isDocsTab} />
     </>
   );
 
@@ -390,22 +288,52 @@ export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
     );
   }
 
-  const panel = (
+  return (
     <div
       data-testid="doc-browser-panel"
-      className={getPanelClassName(isFullscreen)}
-      style={getPanelStyle({ isFullscreen, floatPos, floatSize })}
+      className={cn(
+        'flex flex-col bg-white overflow-hidden relative',
+        isFullscreen
+          ? 'fixed inset-0 z-[9999] h-[100dvh] w-screen rounded-none border-0 shadow-2xl'
+          : 'rounded-2xl shadow-2xl border border-gray-200',
+      )}
+      style={
+        isFullscreen
+          ? undefined
+          : {
+              position: 'fixed',
+              left: floatRect.x,
+              top: floatRect.y,
+              width: floatRect.w,
+              height: floatRect.h,
+              zIndex: 9999,
+            }
+      }
     >
       {panelContent}
 
       {!isDocked && !isFullscreen && (
         <>
-          <div className="absolute top-0 left-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors" onMouseDown={onLeftResizeStart} />
-          <div className="absolute top-0 right-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors" onMouseDown={onResizeStart} data-axis="x" />
-          <div className="absolute bottom-0 left-0 h-1.5 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors" onMouseDown={onResizeStart} data-axis="y" />
+          <div className="absolute top-0 left-0 h-1.5 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors" data-testid="doc-browser-resize-top" onPointerDown={startFloatResize('top')} />
+          <div
+            className="absolute top-0 left-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
+            data-testid="doc-browser-resize-left"
+            onPointerDown={startFloatResize('left')}
+          />
+          <div
+            className="absolute top-0 right-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
+            data-testid="doc-browser-resize-right"
+            onPointerDown={startFloatResize('right')}
+          />
+          <div
+            className="absolute bottom-0 left-0 h-1.5 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors"
+            data-testid="doc-browser-resize-bottom"
+            onPointerDown={startFloatResize('bottom')}
+          />
           <div
             className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize z-30 flex items-center justify-center text-gray-300 hover:text-gray-500 transition-colors"
-            onMouseDown={onResizeStart}
+            data-testid="doc-browser-resize-bottom-right"
+            onPointerDown={startFloatResize('bottom-right')}
           >
             <GripVertical className="w-3 h-3 rotate-[-45deg]" />
           </div>
@@ -413,6 +341,4 @@ export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
       )}
     </div>
   );
-
-  return panel;
 }

package/src/shared/lib/api/types.ts

@@ -351,6 +351,30 @@ export type ServerPathBrowseView = {
 
 export type ServerPathReadView = { requestedPath: string; resolvedPath: string; kind: "text" | "markdown" | "binary"; sizeBytes: number; truncated: boolean; text?: string; languageHint?: string | null };
 
+export type PanelAppEntryView = {
+  id: string;
+  fileName: string;
+  title: string;
+  description?: string;
+  icon?: string;
+  contentPath: string;
+  updatedAt: string;
+  sizeBytes: number;
+  favorite: boolean;
+  lastOpenedAt?: string;
+  openCount: number;
+};
+
+export type PanelAppListView = {
+  workspacePath: string;
+  panelsPath: string;
+  entries: PanelAppEntryView[];
+};
+
+export type PanelAppPreferencesUpdateView = {
+  favorite?: boolean;
+};
+
 export type {
   ChatSessionTypeCtaView,
   ChatSessionTypeOptionView,

package/src/shared/lib/i18n/index.ts

@@ -13,6 +13,7 @@ import {
   type I18nLanguage
 } from './runtime/i18n-language-owner';
 import { DESKTOP_UPDATE_LABELS } from './desktop-update-labels.utils';
+import { DOC_BROWSER_LABELS } from './runtime/doc-browser-labels.utils';
 import { MARKETPLACE_LABELS } from './marketplace';
 import { PATH_PICKER_LABELS } from './runtime/i18n.path-picker';
 import { PWA_LABELS } from './pwa';
@@ -476,18 +477,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   enterTag: { zh: '输入后按回车...', en: 'Type and press Enter...' },
   headerName: { zh: 'Header 名称', en: 'Header Name' },
   headerValue: { zh: 'Header 值', en: 'Header Value' },
-  // Doc Browser
-  docBrowserTitle: { zh: '内嵌浏览器', en: 'Embedded Browser' },
-  docBrowserSearchPlaceholder: { zh: '搜索，也可以输入文档地址直接打开', en: 'Search, or enter a doc URL to open' },
-  docBrowserUrlPlaceholder: { zh: '输入文档路径，如 /guide/channels', en: 'Enter a doc path, e.g. /guide/channels' },
-  docBrowserOpenExternal: { zh: '文档中心打开', en: 'Open in Docs' },
-  docBrowserFloatMode: { zh: '悬浮窗口', en: 'Float Window' },
-  docBrowserDockMode: { zh: '固定到侧栏', en: 'Dock to Sidebar' },
-  docBrowserClose: { zh: '关闭', en: 'Close' },
-  docBrowserHelp: { zh: '帮助文档', en: 'Help Docs' },
-  docBrowserNewTab: { zh: '新建标签', en: 'New Tab' },
-  docBrowserCloseTab: { zh: '关闭标签', en: 'Close Tab' },
-  docBrowserTabUntitled: { zh: '未命名', en: 'Untitled' },
+  ...DOC_BROWSER_LABELS,
   ...PATH_PICKER_LABELS,
   ...PWA_LABELS,
   ...CHANNEL_AUTH_LABELS,

package/src/shared/lib/i18n/runtime/doc-browser-labels.utils.ts

@@ -0,0 +1,29 @@
+export const DOC_BROWSER_LABELS = {
+  docBrowserTitle: { zh: '内嵌浏览器', en: 'Embedded Browser' },
+  docBrowserSearchPlaceholder: { zh: '搜索，也可以输入文档地址直接打开', en: 'Search, or enter a doc URL to open' },
+  docBrowserUrlPlaceholder: { zh: '输入文档路径，如 /guide/channels', en: 'Enter a doc path, e.g. /guide/channels' },
+  docBrowserOpenExternal: { zh: '文档中心打开', en: 'Open in Docs' },
+  docBrowserFloatMode: { zh: '悬浮窗口', en: 'Float Window' },
+  docBrowserDockMode: { zh: '固定到侧栏', en: 'Dock to Sidebar' },
+  docBrowserClose: { zh: '关闭', en: 'Close' },
+  docBrowserHelp: { zh: '帮助文档', en: 'Help Docs' },
+  docBrowserNewTab: { zh: '新建标签', en: 'New Tab' },
+  docBrowserCloseTab: { zh: '关闭标签', en: 'Close Tab' },
+  docBrowserTabUntitled: { zh: '未命名', en: 'Untitled' },
+  panelAppsTitle: { zh: '面板应用', en: 'Panel Apps' },
+  panelAppsLoading: { zh: '加载面板应用中...', en: 'Loading panel apps...' },
+  panelAppsLoadFailed: { zh: '面板应用加载失败', en: 'Failed to load panel apps' },
+  panelAppsEmpty: { zh: '暂无面板应用', en: 'No panel apps yet' },
+  panelAppsRefresh: { zh: '刷新面板应用', en: 'Refresh panel apps' },
+  panelAppsRefreshCurrent: { zh: '刷新当前面板应用', en: 'Refresh current panel app' },
+  panelAppsSortLabel: { zh: '排序', en: 'Sort' },
+  panelAppsSortSmart: { zh: '智能排序', en: 'Smart' },
+  panelAppsFavorites: { zh: '收藏', en: 'Favorites' },
+  panelAppsSortRecentOpen: { zh: '最近打开', en: 'Recently Opened' },
+  panelAppsSortUpdated: { zh: '最近更新', en: 'Recently Updated' },
+  panelAppsSortName: { zh: '名称', en: 'Name' },
+  panelAppsFavorite: { zh: '收藏面板应用', en: 'Favorite panel app' },
+  panelAppsUnfavorite: { zh: '取消收藏面板应用', en: 'Unfavorite panel app' },
+  panelAppsLastOpened: { zh: '上次打开', en: 'Last opened' },
+  panelAppsUpdated: { zh: '更新于', en: 'Updated' },
+} as const;