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

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

@@ -0,0 +1,201 @@
+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.MouseEvent) => 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;
+  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)]',
+      )}
+      onMouseDown={!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,
+}: DocBrowserDocsToolbarProps) {
+  if (!isDocsTab) {
+    return null;
+  }
+
+  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
+          type="text"
+          value={urlInput}
+          onChange={(e) => onUrlInputChange(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>
+  );
+}
+
+export function DocBrowserFrameContent({
+  activeTabId,
+  currentTab,
+  currentUrl,
+  customContent,
+  iframeRef,
+  iframeReloadVersion,
+  iframeSandbox,
+  isDragging,
+  isResizing,
+  navVersion,
+}: DocBrowserFrameContentProps) {
+  return (
+    <div className="flex-1 relative overflow-hidden">
+      {customContent ? (
+        customContent
+      ) : (
+        <iframe
+          ref={iframeRef}
+          key={`${activeTabId}:${navVersion}:${iframeReloadVersion}`}
+          src={currentUrl}
+          className="absolute inset-0 w-full h-full border-0"
+          title={currentTab?.title || 'NextClaw Docs'}
+          sandbox={iframeSandbox}
+          allow="clipboard-read; clipboard-write"
+        />
+      )}
+      {(isResizing || isDragging) && (
+        <div className="absolute inset-0 z-10" />
+      )}
+    </div>
+  );
+}
+
+export function DocBrowserExternalLink({ currentUrl, isDocsTab }: { currentUrl: string; isDocsTab: boolean }) {
+  if (!isDocsTab || !isDocsUrl(currentUrl)) {
+    return null;
+  }
+
+  return (
+    <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>
+  );
+}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { DocBrowserContextValue, DocBrowserTab } from './doc-browser-context';
+
+export type DocBrowserCustomTabRenderParams = {
+  currentUrl: string;
+  open: DocBrowserContextValue['open'];
+  refreshIframe: () => void;
+  tab: DocBrowserTab;
+};
+
+export type DocBrowserCustomTabRenderer = {
+  getIframeSandbox?: (tab: DocBrowserTab) => string;
+  getTitle?: (tab: DocBrowserTab) => string;
+  renderContent?: (params: DocBrowserCustomTabRenderParams) => ReactNode;
+  renderIcon?: (tab: DocBrowserTab) => ReactNode;
+  renderToolbar?: (params: DocBrowserCustomTabRenderParams) => ReactNode;
+};
+
+export type DocBrowserCustomTabRenderers = Record<string, DocBrowserCustomTabRenderer>;

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

@@ -0,0 +1,67 @@
+import { Plus, X } from 'lucide-react';
+import type { DocBrowserTab } from './doc-browser-context';
+import { cn } from '@/shared/lib/utils';
+import { t } from '@/shared/lib/i18n';
+
+type DocBrowserTabStripProps = {
+  tabs: DocBrowserTab[];
+  activeTabId: string;
+  onOpenDocs: () => void;
+  onSetActiveTab: (tabId: string) => void;
+  onCloseTab: (tabId: string) => void;
+};
+
+export function DocBrowserTabStrip({
+  tabs,
+  activeTabId,
+  onOpenDocs,
+  onSetActiveTab,
+  onCloseTab,
+}: 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')}
+            >
+              <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')}
+      >
+        <Plus className="w-3.5 h-3.5" />
+      </button>
+    </div>
+  );
+}

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

@@ -1,22 +1,22 @@
 import { useState, useRef, useCallback, useEffect, type CSSProperties } from 'react';
-import { DOCS_DEFAULT_BASE_URL, isDocsUrl, useDocBrowser } from './doc-browser-context';
+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';
 };
 
@@ -46,7 +46,10 @@ function getPanelStyle(params: {
   };
 }
 
-export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
+export function DocBrowser({
+  customTabRenderers = {},
+  displayMode = 'desktop',
+}: DocBrowserProps) {
   const {
     isOpen,
     mode,
@@ -67,6 +70,7 @@ export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
   const [urlInput, setUrlInput] = useState('');
   const [isDragging, setIsDragging] = useState(false);
   const [isResizing, setIsResizing] = useState(false);
+  const [iframeReloadVersion, setIframeReloadVersion] = useState(0);
   const [floatPos, setFloatPos] = useState(() => ({
     x: Math.max(40, window.innerWidth - 520),
     y: 80,
@@ -232,148 +236,73 @@ export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
     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>
+      <DocBrowserPanelHeader
+        currentTab={currentTab}
+        customRenderer={customRenderer}
+        isDocked={isDocked}
+        isFullscreen={isFullscreen}
+        onClose={close}
+        onDragStart={onDragStart}
+        onToggleMode={toggleMode}
+      />
 
-      <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>
+      <DocBrowserTabStrip
+        tabs={tabs}
+        activeTabId={activeTabId}
+        onOpenDocs={() => open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
+        onSetActiveTab={setActiveTab}
+        onCloseTab={closeTab}
+      />
 
-      {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>
+      <DocBrowserDocsToolbar
+        currentTab={currentTab}
+        isDocsTab={isDocsTab}
+        onBack={goBack}
+        onForward={goForward}
+        onSubmit={handleUrlSubmit}
+        onUrlInputChange={setUrlInput}
+        urlInput={urlInput}
+      />
 
-          <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>
-      )}
+      {customToolbar}
 
-      <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>
+      <DocBrowserFrameContent
+        activeTabId={activeTabId}
+        currentTab={currentTab}
+        currentUrl={currentUrl}
+        customContent={customContent}
+        iframeRef={iframeRef}
+        iframeReloadVersion={iframeReloadVersion}
+        iframeSandbox={iframeSandbox}
+        isDragging={isDragging}
+        isResizing={isResizing}
+        navVersion={navVersion}
+      />
 
-      {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>
-      )}
+      <DocBrowserExternalLink currentUrl={currentUrl} isDocsTab={isDocsTab} />
     </>
   );
 

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;