@steerable/agent-shell-web 0.6.50 → 0.6.52

package/src/pages/SettingsPage.tsx

@@ -1,9 +1,26 @@
-import { useRef, useState } from 'react';
-import { LuActivity, LuBlocks, LuBot, LuChartBar, LuDownload, LuMonitor, LuNetwork, LuPlug, LuSearch, LuSettings, LuShieldCheck } from 'react-icons/lu';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import {
+  LuActivity,
+  LuBlocks,
+  LuBot,
+  LuChartBar,
+  LuCodeXml,
+  LuDownload,
+  LuGitFork,
+  LuInfo,
+  LuMonitor,
+  LuNetwork,
+  LuPlug,
+  LuSearch,
+  LuSettings,
+  LuShieldCheck,
+} from 'react-icons/lu';
 import { useOutletContext, useSearchParams } from 'react-router-dom';
 import { isElectron } from '@/lib/electron-bridge';
+import { useAppRelease } from '@/components/SidebarRelease';
 import { AgentsSettingsPanel } from '@/components/settings/AgentsSettingsPanel';
 import { AppearanceSettingsPanel } from '@/components/settings/AppearanceSettingsPanel';
+import { OrchestrationSettingsPanel } from '@/components/settings/OrchestrationSettingsPanel';
 import { AppUpdateSettingsPanel } from '@/components/settings/AppUpdateSettingsPanel';
 import { PortableSettingsPanel } from '@/components/settings/PortableSettingsPanel';
 import { PythonRunnerSettingsPanel } from '@/components/settings/PythonRunnerSettingsPanel';
@@ -21,53 +38,279 @@ import { SettingsSaveButton } from '@/components/settings/SettingsSaveButton';
 import { TelemetrySettingsPanel } from '@/components/settings/TelemetrySettingsPanel';
 import { UsagePanel } from '@/components/settings/UsagePanel';
 import { WebSearchSettingsPanel } from '@/components/settings/WebSearchSettingsPanel';
+import { SettingsNavMenu, type SettingsNavItem } from '@/components/settings/SettingsNavMenu';
 import { getPackSettingsPanels } from '@/packs/registry';
 import { settingsChrome } from '@/lib/host-tools';
 import { isPortableEnabled } from '@/lib/portable';
 import type { AgentOutletContext } from '@/layouts/AgentLayout';
 
-type SettingsSection = 'skills' | 'mcp' | 'agents' | 'general';
+type SettingsSection = 'plugins' | 'general';
+type PluginTab = 'agents' | 'skills' | 'mcp' | 'web-search';
+
+const PLUGIN_TABS: readonly PluginTab[] = ['agents', 'skills', 'mcp', 'web-search'];
+
+const PLUGIN_TAB_META: Record<
+  PluginTab,
+  { label: string; noun: string; Icon: typeof LuBot }
+> = {
+  agents: { label: '智能体', noun: '智能体', Icon: LuBot },
+  skills: { label: 'Skills', noun: '技能', Icon: LuBlocks },
+  mcp: { label: 'MCP', noun: 'MCP 服务', Icon: LuPlug },
+  'web-search': { label: '网络搜索', noun: '网络搜索', Icon: LuSearch },
+};
+
+function isPluginTab(value: string | null): value is PluginTab {
+  return (PLUGIN_TABS as readonly string[]).includes(value ?? '');
+}
+
+function pluginsSummary(tabs: readonly PluginTab[]): string {
+  const nouns = tabs.map((id) => PLUGIN_TAB_META[id].noun);
+  if (nouns.length <= 1) return `管理${nouns[0] ?? '插件'}。`;
+  return `管理${nouns.slice(0, -1).join('、')}和${nouns[nouns.length - 1]}。`;
+}
+
+function enabledPluginTabs(): PluginTab[] {
+  return PLUGIN_TABS.filter((id) => settingsChrome(id));
+}
 
 function resolveSection(raw: string | null): SettingsSection {
-  if (raw === 'skills' && settingsChrome('skills')) return 'skills';
-  if (raw === 'mcp' && settingsChrome('mcp')) return 'mcp';
-  if (raw === 'agents' && settingsChrome('agents')) return 'agents';
+  if (raw === 'plugins') return enabledPluginTabs().length > 0 ? 'plugins' : 'general';
+  if ((raw === 'agents' || raw === 'skills' || raw === 'mcp') && settingsChrome(raw)) {
+    return 'plugins';
+  }
   return 'general';
 }
 
+/** `?section=agents|skills|mcp` 是旧深链，仍打开插件页上对应分类。 */
+function resolvePluginTab(section: string | null, tab: string | null): PluginTab | null {
+  const enabled = enabledPluginTabs();
+  const requested =
+    section === 'agents' || section === 'skills' || section === 'mcp' ? section : tab;
+  if (isPluginTab(requested) && enabled.includes(requested)) {
+    return requested;
+  }
+  return enabled[0] ?? null;
+}
+
 /**
  * `/settings` — 右侧内容区的设置页，按 `?section=` 分成独立页面：
- *   - `skills`  侧栏「Skill 设置」
- *   - `mcp`     侧栏「MCP 设置」
- *   - `agents`  侧栏「智能体管理」
+ *   - `plugins`  侧栏「插件」。顶栏分类切换智能体 / Skills / MCP / 网络搜索
+ *     （`?tab=`，旧的 `?section=agents|skills|mcp` 仍落到对应分类）
  *   - 缺省/`general`  侧栏底「设置」（界面 / 模型 / 搜索 / 用量 / 安全 / 洞察 / 遥测 / 关于）
  *
  * Panel 数据自管理（挂载即拉取），页面本身不持有后端状态。
  */
 export function SettingsPage() {
-  const [searchParams] = useSearchParams();
-  const section = resolveSection(searchParams.get('section'));
+  const [searchParams, setSearchParams] = useSearchParams();
+  const rawSection = searchParams.get('section');
+  const section = resolveSection(rawSection);
+  const pluginTab = section === 'plugins' ? resolvePluginTab(rawSection, searchParams.get('tab')) : null;
+  const pluginTabs = section === 'plugins' ? enabledPluginTabs() : [];
+  const selectPluginTab = useCallback((id: PluginTab) => {
+    setSearchParams({ section: 'plugins', tab: id });
+  }, [setSearchParams]);
   const catalog = useOutletContext<AgentOutletContext | null>();
+  const release = useAppRelease();
   const llmPanelRef = useRef<LlmSettingsPanelHandle>(null);
+  const pageContainerRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+  const [activeSectionId, setActiveSectionId] = useState<string | null>(null);
+  const [renderedSectionIds, setRenderedSectionIds] = useState<Set<string> | null>(null);
   const [llmSaveUi, setLlmSaveUi] = useState<LlmSaveUi>({
     saving: false,
     savedOk: false,
     loading: true,
   });
 
-  const title =
-    section === 'mcp'
-      ? 'MCP 设置'
-      : section === 'skills'
-        ? 'Skill 设置'
-        : section === 'agents'
-          ? '智能体管理'
-          : '设置';
+  useEffect(() => {
+    const el = pageContainerRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // 扫描右侧实际挂载且未被隐藏 (display !== 'none') 的设置分段
+  const updateRenderedSections = useCallback(() => {
+    const container = contentRef.current;
+    if (!container) return;
+    const sectionEls = container.querySelectorAll<HTMLElement>('[data-testid^="settings-section-"]');
+    const ids = new Set<string>();
+    sectionEls.forEach((el) => {
+      const tid = el.getAttribute('data-testid');
+      if (!tid) return;
+      const id = tid.replace('settings-section-', '');
+      if (typeof window !== 'undefined' && window.getComputedStyle) {
+        const style = window.getComputedStyle(el);
+        if (style.display === 'none' || style.visibility === 'hidden') return;
+      }
+      ids.add(id);
+    });
+
+    setRenderedSectionIds((prev) => {
+      if (prev && prev.size === ids.size && [...ids].every((id) => prev.has(id))) {
+        return prev;
+      }
+      return ids;
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    updateRenderedSections();
+    const container = contentRef.current;
+    if (!container || typeof MutationObserver === 'undefined') return;
+    const observer = new MutationObserver(() => {
+      updateRenderedSections();
+    });
+    observer.observe(container, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['style', 'class', 'hidden'],
+    });
+    return () => observer.disconnect();
+  }, [updateRenderedSections]);
+
+  // 页面宽度 >= 920px 视为宽屏（有足够空间并排容纳左侧边栏目录与主设置表单）
+  const isWide = containerWidth >= 920;
+
+  const allCandidates = useMemo<SettingsNavItem[]>(() => {
+    if (section !== 'general') return [];
+    const list: SettingsNavItem[] = [];
+
+    if (settingsChrome('appearance')) {
+      list.push({ id: 'appearance', label: '界面', Icon: LuMonitor });
+    }
+    list.push({ id: 'orchestration', label: '协同编排', Icon: LuGitFork });
+
+    if (settingsChrome('llm')) {
+      list.push({ id: 'llm', label: '本地模型设置', Icon: LuSettings });
+    }
+    if (settingsChrome('web-search')) {
+      list.push({ id: 'web-search', label: '网络搜索', Icon: LuSearch });
+    }
+    if (settingsChrome('usage')) {
+      list.push({ id: 'usage', label: '用量与成本', Icon: LuChartBar });
+    }
+    if (settingsChrome('diagnose')) {
+      list.push({ id: 'diagnose', label: '链路诊断', Icon: LuNetwork });
+    }
+    if (settingsChrome('security')) {
+      list.push({ id: 'security', label: '安全', Icon: LuShieldCheck });
+    }
+    if (settingsChrome('insights')) {
+      list.push({ id: 'insights', label: '帮助改进产品', Icon: LuChartBar });
+    }
+    if (settingsChrome('telemetry')) {
+      list.push({ id: 'telemetry', label: '遥测(OTLP)', Icon: LuActivity });
+    }
+
+    const packPanels = getPackSettingsPanels();
+    for (const panel of packPanels) {
+      list.push({
+        id: panel.panelId,
+        label: panel.title,
+        Icon: panel.Icon ?? LuSettings,
+      });
+    }
+
+    if (isPortableEnabled()) {
+      list.push({ id: 'portable', label: '备份与迁移', Icon: LuDownload });
+    }
+    if (isElectron()) {
+      list.push({ id: 'python-runner', label: 'Python 运行环境', Icon: LuCodeXml });
+    }
+    if (release.version) {
+      list.push({ id: 'update', label: '软件更新', Icon: LuInfo });
+    }
+
+    return list;
+  }, [section, release.version]);
+
+  // 严格过滤：右侧实际未挂载或隐藏的分段，左侧菜单一律不显示
+  const menuItems = useMemo<SettingsNavItem[]>(() => {
+    if (section !== 'general') return [];
+    if (renderedSectionIds !== null) {
+      return allCandidates.filter((item) => renderedSectionIds.has(item.id));
+    }
+    return allCandidates;
+  }, [section, allCandidates, renderedSectionIds]);
+
+  const handleSelectSection = useCallback((id: string) => {
+    setActiveSectionId(id);
+    const target = document.querySelector(`[data-testid="settings-section-${id}"]`);
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    if (!scrollRef.current || menuItems.length === 0) return;
+    const containerTop = scrollRef.current.getBoundingClientRect().top;
+    let closestId: string | null = null;
+    let minDistance = Infinity;
+
+    for (const item of menuItems) {
+      const el = document.querySelector(`[data-testid="settings-section-${item.id}"]`);
+      if (el) {
+        const top = el.getBoundingClientRect().top - containerTop;
+        if (top <= 120 && Math.abs(top) < minDistance) {
+          minDistance = Math.abs(top);
+          closestId = item.id;
+        }
+      }
+    }
+    if (closestId) {
+      setActiveSectionId(closestId);
+    }
+  }, [menuItems]);
+
+  const title = section === 'plugins' ? '插件' : '设置';
 
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden">
+    <div ref={pageContainerRef} className="flex h-full w-full flex-col overflow-hidden">
       <header className="flex h-9 flex-shrink-0 items-center justify-between gap-2 border-b border-agent-border px-2.5">
-        <h1 className="text-xs font-semibold text-agent-foreground">{title}</h1>
+        <div className="flex min-w-0 items-center gap-2">
+          <h1 className="shrink-0 text-xs font-semibold text-agent-foreground">{title}</h1>
+          {section === 'plugins' && pluginTabs.length > 1 && (
+            <div
+              role="tablist"
+              aria-label="插件"
+              data-testid="plugins-tabs"
+              className="flex min-w-0 items-center gap-1"
+            >
+              {pluginTabs.map((id) => {
+                const meta = PLUGIN_TAB_META[id];
+                const active = pluginTab === id;
+                return (
+                  <button
+                    key={id}
+                    type="button"
+                    role="tab"
+                    aria-selected={active}
+                    data-testid={`plugins-tab-${id}`}
+                    onClick={() => selectPluginTab(id)}
+                    className={[
+                      'flex h-7 items-center gap-1.5 rounded-full px-2.5 text-xs transition-colors',
+                      active
+                        ? 'bg-agent-foreground/10 font-medium text-agent-foreground'
+                        : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
+                    ].join(' ')}
+                  >
+                    <meta.Icon className="h-3.5 w-3.5" />
+                    {meta.label}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
         {section === 'general' && settingsChrome('llm') && (
           <SettingsSaveButton
             testId="settings-header-save"
@@ -79,42 +322,73 @@ export function SettingsPage() {
         )}
       </header>
 
-      <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="mx-auto max-w-3xl space-y-4 px-3 py-3">
-          {!isElectron() && (
-            <p className="rounded-agent-md border border-agent-destructive/20 bg-agent-destructive/10 p-2.5 text-xs text-agent-destructive">
-              浏览器预览模式 — 没有 Electron IPC 桥接，部分设置不可用。
-            </p>
-          )}
-
-          {section === 'skills' && (
-            <section className="space-y-2" data-testid="settings-section-skills">
-              <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
-                <LuBlocks className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                本地技能
-              </h2>
-              <SkillsSettingsPanel />
-            </section>
-          )}
+      <div
+        ref={scrollRef}
+        onScroll={handleScroll}
+        className="min-h-0 flex-1 overflow-y-auto"
+      >
+        <div
+          className={`mx-auto px-4 py-3 ${
+            isWide && menuItems.length > 0 ? 'flex max-w-5xl justify-center gap-6' : 'max-w-3xl'
+          }`}
+        >
+          {isWide && menuItems.length > 0 ? (
+            <SettingsNavMenu
+              items={menuItems}
+              activeId={activeSectionId ?? menuItems[0]?.id ?? null}
+              onSelect={handleSelectSection}
+            />
+          ) : null}
 
-          {section === 'mcp' && (
-            <section className="space-y-2" data-testid="settings-section-mcp">
-              <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
-                <LuPlug className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                MCP 服务
-              </h2>
-              <McpSettingsPanel />
-            </section>
-          )}
+          <div ref={contentRef} className="min-w-0 flex-1 max-w-3xl space-y-4">
+            {!isElectron() && (
+              <p className="rounded-agent-md border border-agent-destructive/20 bg-agent-destructive/10 p-2.5 text-xs text-agent-destructive">
+                浏览器预览模式 — 没有 Electron IPC 桥接，部分设置不可用。
+              </p>
+            )}
 
-          {section === 'agents' && (
-            <section className="space-y-2" data-testid="settings-section-agents">
-              <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
-                <LuBot className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                智能体
-              </h2>
-              <AgentsSettingsPanel onCatalogChange={catalog?.refreshAgents} />
-            </section>
+          {section === 'plugins' && (
+            <>
+              <p className="text-xs text-agent-muted-foreground" data-testid="plugins-summary">
+                {pluginsSummary(pluginTabs)}
+              </p>
+              {pluginTab === 'skills' && (
+                <section className="space-y-2" data-testid="settings-section-skills">
+                  <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                    <LuBlocks className="h-3.5 w-3.5 text-agent-muted-foreground" />
+                    本地技能
+                  </h2>
+                  <SkillsSettingsPanel />
+                </section>
+              )}
+              {pluginTab === 'mcp' && (
+                <section className="space-y-2" data-testid="settings-section-mcp">
+                  <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                    <LuPlug className="h-3.5 w-3.5 text-agent-muted-foreground" />
+                    MCP 服务
+                  </h2>
+                  <McpSettingsPanel />
+                </section>
+              )}
+              {pluginTab === 'agents' && (
+                <section className="space-y-2" data-testid="settings-section-agents">
+                  <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                    <LuBot className="h-3.5 w-3.5 text-agent-muted-foreground" />
+                    智能体
+                  </h2>
+                  <AgentsSettingsPanel onCatalogChange={catalog?.refreshAgents} />
+                </section>
+              )}
+              {pluginTab === 'web-search' && settingsChrome('web-search') && (
+                <section className="space-y-2" data-testid="settings-section-web-search">
+                  <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                    <LuSearch className="h-3.5 w-3.5 text-agent-muted-foreground" />
+                    网络搜索
+                  </h2>
+                  <WebSearchSettingsPanel />
+                </section>
+              )}
+            </>
           )}
 
           {section === 'general' && (
@@ -129,6 +403,14 @@ export function SettingsPage() {
               </section>
               )}
 
+              <section className="space-y-2" data-testid="settings-section-orchestration">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuSettings className="h-3.5 w-3.5 text-agent-muted-foreground" />
+                  协同编排
+                </h2>
+                <OrchestrationSettingsPanel />
+              </section>
+
               {settingsChrome('llm') && (
               <section className="space-y-2" data-testid="settings-section-llm">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
@@ -235,6 +517,7 @@ export function SettingsPage() {
               <AppUpdateSettingsPanel />
             </>
           )}
+          </div>
         </div>
       </div>
     </div>

package/src/vite-env.d.ts

@@ -5,6 +5,8 @@ interface ImportMetaEnv {
   readonly VITE_BRAND_NAME?: string;
   readonly VITE_BRAND_TITLE?: string;
   readonly VITE_BRAND_TAGLINE?: string;
+  /** 新对话落地页副文案。空字符串表示不显示。 */
+  readonly VITE_BRAND_HOME_HINT?: string;
   readonly VITE_DEFAULT_AGENT_ID?: string;
   readonly VITE_HOST_TOOLS?: string;
   readonly VITE_APPROVAL?: string;

package/vite.base.js

@@ -52,6 +52,7 @@ export function createProductViteConfig(options) {
             'import.meta.env.VITE_BRAND_NAME': JSON.stringify(brand?.displayName ?? 'Steerable Shell'),
             'import.meta.env.VITE_BRAND_TITLE': JSON.stringify(brand?.title ?? ''),
             'import.meta.env.VITE_BRAND_TAGLINE': JSON.stringify(brand?.tagline ?? '一款本地桌面 AI 伙伴'),
+            'import.meta.env.VITE_BRAND_HOME_HINT': JSON.stringify(brand?.homeHint ?? '输入消息，直接开始一段新对话。'),
             'import.meta.env.VITE_DEFAULT_AGENT_ID': JSON.stringify(brand?.defaultAgentId ?? 'local-assistant'),
             // 宿主工具族 / 安全询问：与 node 侧 setProductConfig 读同一份 product.json。
             'import.meta.env.VITE_HOST_TOOLS': JSON.stringify(JSON.stringify(product.hostTools ?? {})),