@steerable/agent-shell-web 0.6.32 → 0.6.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.32",
+  "version": "0.6.33",
   "type": "module",
   "description": "Steerable framework — product-neutral renderer SPA source for @steerable/agent-shell (React + Vite). Consumed by product web entry points via the `@/` alias (anchored at this package's src/) and the createProductViteConfig factory. Published as a source package (src/), plus the compiled vite.base config factory (vite.base.js + .d.ts) for Node-side config loading.",
   "license": "Apache-2.0",
@@ -15,10 +15,7 @@
   },
   "exports": {
     "./auth/gate": "./src/auth/gate.ts",
-    "./vite.base": {
-      "types": "./vite.base.d.ts",
-      "default": "./vite.base.js"
-    },
+    "./vite.base": "./vite.base.ts",
     "./package.json": "./package.json"
   },
   "files": [
@@ -46,8 +43,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-protocol": "0.6.32",
-    "@steerable/agent-ui": "0.6.32"
+    "@steerable/agent-protocol": "0.6.33",
+    "@steerable/agent-ui": "0.6.33"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -60,7 +57,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.6.32"
+    "@steerable/pack-sdk": "0.6.33"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/components/AgentSidebar.tsx

@@ -103,6 +103,7 @@ import {
 import { parseChatTitle } from "@/lib/chat-title";
 import { getDateGroupLabel, getDateGroupPriority } from "@/lib/date-groups";
 import { getElectronBridge, isElectron } from "@/lib/electron-bridge";
+import { hasGeneralSettingsChrome, hostToolChrome, settingsChrome } from "@/lib/host-tools";
 import {
   createProject,
   deleteProject,
@@ -173,7 +174,7 @@ function ProjectOverflowMenu({
   onClose: () => void;
   onRename: () => void;
   onChangeFolder: () => void;
-  onReveal: () => void;
+  onReveal?: () => void;
   onDelete: () => void;
 }) {
   const pos = placeProjectMenu(anchor);
@@ -229,6 +230,7 @@ function ProjectOverflowMenu({
           <LuFolderOpen className="h-3.5 w-3.5 shrink-0 text-agent-muted-foreground" />
           编辑项目
         </button>
+        {onReveal && (
         <button
           type="button"
           role="menuitem"
@@ -239,6 +241,7 @@ function ProjectOverflowMenu({
           <LuFolder className="h-3.5 w-3.5 shrink-0 text-agent-muted-foreground" />
           {revealLabel}
         </button>
+        )}
         <div className="mx-1 my-1 border-t border-agent-border/60" />
         <button
           type="button"
@@ -351,8 +354,10 @@ export function AgentSidebar({
     anchor: HTMLElement;
   } | null>(null);
 
+  const showProjectsChrome = hostToolChrome("projects");
+
   const fetchProjects = useCallback(async () => {
-    if (!isElectron()) return;
+    if (!isElectron() || !hostToolChrome("projects")) return;
     try {
       const res = await listProjects();
       setProjects(res.projects || []);
@@ -547,8 +552,11 @@ export function AgentSidebar({
   // 顶层按项目分组：无项目对话（含项目已被删但列表还没刷新的孤儿会话）
   // 保持原有的日期分组；每个项目一个分组，组内按 pin + 时间排序。
   const knownProjectIds = useMemo(
-    () => new Set(projects.map((p) => p.id)),
-    [projects],
+    () =>
+      showProjectsChrome
+        ? new Set(projects.map((p) => p.id))
+        : new Set<string>(),
+    [projects, showProjectsChrome],
   );
 
   const noProjectChats = useMemo(
@@ -561,11 +569,13 @@ export function AgentSidebar({
 
   const projectGroups = useMemo(
     () =>
-      projects.map((project) => ({
-        project,
-        items: normalizedChats.filter((c) => c.projectId === project.id),
-      })),
-    [projects, normalizedChats],
+      showProjectsChrome
+        ? projects.map((project) => ({
+            project,
+            items: normalizedChats.filter((c) => c.projectId === project.id),
+          }))
+        : [],
+    [projects, normalizedChats, showProjectsChrome],
   );
 
   const chatGroups = useMemo(() => {
@@ -750,15 +760,17 @@ export function AgentSidebar({
   // `menu:open-terminal`). Same pattern as `menu:new-chat` above. The
   // terminal is a toggleable panel beside the chat, so this just flips
   // the layout state owned by AgentLayout.
+  const showTerminalChrome = hostToolChrome("terminal");
+
   useEffect(() => {
-    if (!bridge?.onMenuOpenTerminal) return;
+    if (!showTerminalChrome || !bridge?.onMenuOpenTerminal) return;
     bridge.onMenuOpenTerminal(() => {
       onToggleRightPanel("terminal");
     });
     return () => {
       bridge.offMenuOpenTerminal?.();
     };
-  }, [bridge, onToggleRightPanel]);
+  }, [bridge, onToggleRightPanel, showTerminalChrome]);
 
   const hasElectron = isElectron();
 
@@ -799,6 +811,7 @@ export function AgentSidebar({
             <LuPlus className="h-3.5 w-3.5" />
             <span>新对话</span>
           </button>
+          {settingsChrome("agents") && (
           <button
             type="button"
             onClick={() => navigate("/settings?section=agents")}
@@ -814,6 +827,8 @@ export function AgentSidebar({
             <LuBot className="h-3.5 w-3.5" />
             <span>智能体管理</span>
           </button>
+          )}
+          {settingsChrome("skills") && (
           <button
             type="button"
             onClick={() => navigate("/settings?section=skills")}
@@ -829,6 +844,8 @@ export function AgentSidebar({
             <LuBlocks className="h-3.5 w-3.5" />
             <span>Skill 设置</span>
           </button>
+          )}
+          {settingsChrome("mcp") && (
           <button
             type="button"
             onClick={() => navigate("/settings?section=mcp")}
@@ -844,6 +861,7 @@ export function AgentSidebar({
             <LuPlug className="h-3.5 w-3.5" />
             <span>MCP 设置</span>
           </button>
+          )}
         </div>
         <div className="flex flex-shrink-0 items-center justify-between py-1 pl-2.5 pr-2.5">
           <button
@@ -861,7 +879,7 @@ export function AgentSidebar({
             </span>
           </button>
           <div className="flex items-center gap-1">
-            {hasElectron && (
+            {hasElectron && showProjectsChrome && (
               <button
                 type="button"
                 onClick={() => setCreateProjectOpen(true)}
@@ -893,7 +911,8 @@ export function AgentSidebar({
             ) : (
               <>
                 {/* 项目分组在前：组头可折叠，hover 出 + 新建对话 / ·· 菜单 */}
-                {projectGroups.map(({ project, items }) => (
+                {showProjectsChrome &&
+                  projectGroups.map(({ project, items }) => (
                   <div key={project.id} className="mb-1">
                     <div className="group/proj relative">
                       {renamingProjectId === project.id ? (
@@ -1036,6 +1055,7 @@ export function AgentSidebar({
       {/* ───── Footer: 右侧面板切换（终端 | 包槽位）+ 设置 ───── */}
       <div className="flex-shrink-0 border-t border-agent-border/40 px-2.5 py-1.5">
         {chatSlots.length === 0 ? (
+          showTerminalChrome ? (
           <button
             type="button"
             onClick={() => onToggleRightPanel("terminal")}
@@ -1054,12 +1074,14 @@ export function AgentSidebar({
               {isMac ? "⌘T" : "Ctrl+T"}
             </span>
           </button>
+          ) : null
         ) : (
           <div
             role="group"
             aria-label="右侧面板切换"
             className="flex h-7 w-full items-center gap-0.5 rounded-full bg-agent-foreground/5 p-0.5"
           >
+            {showTerminalChrome ? (
             <button
               type="button"
               onClick={() => onToggleRightPanel("terminal")}
@@ -1075,6 +1097,7 @@ export function AgentSidebar({
               <LuTerminal className="h-3.5 w-3.5" />
               <span>终端</span>
             </button>
+            ) : null}
             {chatSlots.map((slot) => (
               <button
                 key={slot.slotId}
@@ -1095,6 +1118,7 @@ export function AgentSidebar({
             ))}
           </div>
         )}
+        {hasGeneralSettingsChrome() && (
         <button
           type="button"
           onClick={() => navigate("/settings")}
@@ -1110,6 +1134,7 @@ export function AgentSidebar({
           <LuSettings className="h-3.5 w-3.5" />
           <span>设置</span>
         </button>
+        )}
       </div>
 
       {projectMenu &&
@@ -1137,10 +1162,14 @@ export function AgentSidebar({
                 setProjectMenu(null);
                 setEditingProjectId(project.id);
               }}
-              onReveal={() => {
-                setProjectMenu(null);
-                void handleRevealProjectFolder(project.folderPath);
-              }}
+              onReveal={
+                hostToolChrome("local-fs")
+                  ? () => {
+                      setProjectMenu(null);
+                      void handleRevealProjectFolder(project.folderPath);
+                    }
+                  : undefined
+              }
               onDelete={() => void handleDeleteProject(project.id)}
             />
           );

package/src/components/CreateProjectModal.tsx

@@ -77,16 +77,18 @@ export function CreateProjectModal({
       addSourceFolder(typed);
       return;
     }
-    const result = await getElectronBridge()?.local?.selectDirectory({
-      title: '添加源文件夹',
-    });
-    if (!result || result.canceled || result.filePaths.length === 0) {
-      if (!getElectronBridge()?.local?.selectDirectory) {
-        setError('请输入文件夹路径');
-      }
+    const picker = getElectronBridge()?.local?.selectDirectory;
+    if (!picker) {
+      setError('请输入文件夹路径');
       return;
     }
-    addSourceFolder(result.filePaths[0]);
+    try {
+      const result = await picker({ title: '添加源文件夹' });
+      if (!result || result.canceled || result.filePaths.length === 0) return;
+      addSourceFolder(result.filePaths[0]);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
   };
 
   const handleSubmit = async () => {

package/src/components/chat/ChatInput.tsx

@@ -32,6 +32,7 @@ import {
 } from 'react-icons/lu';
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
 import type { ExecPolicy } from '@/lib/exec-policy';
+import { getWebChatModes, hostToolChrome, settingsChrome } from '@/lib/host-tools';
 import type { AttachmentFile } from '@/lib/attachments';
 import type { SteerOutcome } from '@steerable/agent-ui';
 import {
@@ -1112,8 +1113,11 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     const trimmed = value.trim();
     const canSend = (trimmed.length > 0 || actualFiles.length > 0) && !disabled && !isStreaming;
 
+    const allowFileAttach = hostToolChrome('local-fs');
+
     const handleDragOver = (event: React.DragEvent) => {
       event.preventDefault();
+      if (!allowFileAttach) return;
       if (event.dataTransfer.types.includes('Files') && !disabled) {
         setIsDragging(true);
       }
@@ -1143,7 +1147,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     // 按钮点击 → 触发隐藏的 <input type="file" multiple>，由浏览器/Electron
     // 直接弹出系统文件选择框（不依赖 IPC，避免「点击无反应」）。
     const handlePickFiles = () => {
-      if (disabled) return;
+      if (disabled || !allowFileAttach) return;
       fileInputRef.current?.click();
     };
     const handleFileInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -1158,7 +1162,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       event.preventDefault();
       setIsDragging(false);
 
-      if (disabled) return;
+      if (disabled || !allowFileAttach) return;
 
       const droppedFiles = Array.from(event.dataTransfer.files);
       if (droppedFiles.length > 0) {
@@ -1816,7 +1820,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 Agent picker lives in the meta row above the box, next to
                 the project badge. min-w-0 允许窄屏时胶囊截断收缩。 */}
             <div ref={toolbarLeftRef} className="flex min-w-0 items-center gap-1">
-              {mode && onModeChange && (
+              {mode && onModeChange && getWebChatModes().length > 1 && (
                 <ModeToggle
                   mode={mode}
                   disabled={disabled || isStreaming}
@@ -1831,6 +1835,8 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 />
               )}
               {toolbarExtras}
+              {allowFileAttach && (
+                <>
               <button
                 type="button"
                 onClick={handlePickFiles}
@@ -1851,6 +1857,8 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 tabIndex={-1}
                 onChange={handleFileInputChange}
               />
+                </>
+              )}
               {onOpenSettings && (
                 <button
                   type="button"
@@ -2142,6 +2150,7 @@ function AgentSelect({
               </button>
             );
           })}
+          {settingsChrome('agents') && (
           <button
             type="button"
             role="menuitem"
@@ -2155,6 +2164,7 @@ function AgentSelect({
             <LuBot className="h-3.5 w-3.5 shrink-0" />
             <span className="text-xs font-medium">管理智能体</span>
           </button>
+          )}
         </div>
       )}
     </div>

package/src/components/chat/FilePathCode.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import { openLocalPath, type ResolvedLocalPath } from '@/lib/local-api';
+import { hostToolChrome } from '@/lib/host-tools';
 import { peekResolvedPath, subscribeResolvedPath } from './path-mentions';
 import { splitTurnFilePath } from './turn-files';
 
@@ -27,12 +28,15 @@ export function FilePathCode({ candidate, chatId, children, ...rest }: FilePathC
   );
   const [openError, setOpenError] = useState<string | null>(null);
 
+  const allowOpenPath = hostToolChrome('local-fs');
+
   useEffect(() => {
     setOpenError(null);
+    if (!allowOpenPath) return;
     return subscribeResolvedPath(candidate, chatId, (entry) => setResolved(entry));
-  }, [candidate, chatId]);
+  }, [allowOpenPath, candidate, chatId]);
 
-  if (!resolved) {
+  if (!resolved || !allowOpenPath) {
     return (
       <code {...rest} className={INLINE_CODE_CLASS}>
         {children}

package/src/components/chat/TurnFilesCard.tsx

@@ -6,6 +6,7 @@ import {
   LuLoaderCircle,
 } from 'react-icons/lu';
 import { openLocalPath } from '@/lib/local-api';
+import { hostToolChrome } from '@/lib/host-tools';
 import {
   formatFileSize,
   splitTurnFilePath,
@@ -30,10 +31,12 @@ interface TurnFilesCardProps {
 export function TurnFilesCard({ files }: TurnFilesCardProps) {
   const [openingPath, setOpeningPath] = useState<string | null>(null);
   const [openError, setOpenError] = useState<{ path: string; message: string } | null>(null);
+  const allowOpenPath = hostToolChrome('local-fs');
 
   if (files.length === 0) return null;
 
   const handleOpen = async (file: TurnFile) => {
+    if (!allowOpenPath) return;
     if (openingPath) return;
     setOpeningPath(file.path);
     setOpenError(null);
@@ -59,7 +62,11 @@ export function TurnFilesCard({ files }: TurnFilesCardProps) {
     >
       <div className="flex items-center gap-1.5 border-b border-agent-border/60 px-2.5 py-1 text-[11px] text-agent-muted-foreground">
         <LuFiles className="h-3.5 w-3.5" />
-        <span>本轮产生了 {files.length} 个文件，点击打开</span>
+        <span>
+          {allowOpenPath
+            ? `本轮产生了 ${files.length} 个文件，点击打开`
+            : `本轮产生了 ${files.length} 个文件`}
+        </span>
       </div>
       <ul className="max-h-64 overflow-y-auto py-1">
         {files.map((file) => {
@@ -72,9 +79,13 @@ export function TurnFilesCard({ files }: TurnFilesCardProps) {
               <button
                 type="button"
                 onClick={() => void handleOpen(file)}
-                disabled={openingPath !== null}
+                disabled={!allowOpenPath || openingPath !== null}
                 title={file.path}
-                className="flex w-full items-center gap-2 px-2.5 py-1 text-left text-xs transition-colors hover:bg-agent-foreground/5 disabled:cursor-wait"
+                className={`flex w-full items-center gap-2 px-2.5 py-1 text-left text-xs transition-colors ${
+                  allowOpenPath
+                    ? 'hover:bg-agent-foreground/5 disabled:cursor-wait'
+                    : 'cursor-default'
+                }`}
                 data-turn-file=""
                 data-kind={file.kind}
               >

package/src/layouts/AgentLayout.tsx

@@ -15,6 +15,7 @@ import {
   useChatsAndAgents,
   type UseChatsAndAgentsResult,
 } from '@/hooks/useChatsAndAgents';
+import { hostToolChrome, sanitizeRightPanelKind, settingsChrome } from '@/lib/host-tools';
 
 /**
  * AgentLayout wraps `/agent`, `/agent/:chatId`, and `/` (default) with a
@@ -272,14 +273,16 @@ function AgentLayoutContent() {
     try {
       const saved = window.localStorage.getItem(RIGHT_PANEL_KEY);
       if (saved !== null) {
-        return saved === 'terminal' || packChatSlots.some((s) => s.slotId === saved)
-          ? saved
-          : null;
+        const raw =
+          saved === 'terminal' || packChatSlots.some((s) => s.slotId === saved)
+            ? saved
+            : null;
+        return sanitizeRightPanelKind(raw);
       }
       // 新 key 不存在时才迁移老版本仅持久化终端的旧 key。
-      return window.localStorage.getItem(TERMINAL_OPEN_KEY) === '1'
-        ? 'terminal'
-        : null;
+      return sanitizeRightPanelKind(
+        window.localStorage.getItem(TERMINAL_OPEN_KEY) === '1' ? 'terminal' : null,
+      );
     } catch {
       return null;
     }
@@ -311,7 +314,8 @@ function AgentLayoutContent() {
       打开任一面板即离开任务 dock（栏位同一时刻只呈现一个内容）。 */
   const toggleRightPanel = useCallback(
     (kind: string) => {
-      const next: RightPanelState = rightPanelRef.current === kind ? null : kind;
+      const raw: RightPanelState = rightPanelRef.current === kind ? null : kind;
+      const next = sanitizeRightPanelKind(raw);
       rightPanelRef.current = next;
       if (next !== null) setInspectedTask(null);
       setRightPanelState(next);
@@ -363,6 +367,7 @@ function AgentLayoutContent() {
   }, []);
 
   const showTerminalFromTask = useCallback(() => {
+    if (!hostToolChrome('terminal')) return;
     setInspectedTask(null);
     rightPanelRef.current = 'terminal';
     setRightPanelState('terminal');
@@ -499,7 +504,7 @@ function AgentLayoutContent() {
                 } satisfies AgentOutletContext}
               />
             </div>
-            <InsightsConsentBanner />
+            {settingsChrome('insights') && <InsightsConsentBanner />}
           </div>
           {(rightPanel !== null || inspectedTask !== null) && (
             <>
@@ -523,7 +528,9 @@ function AgentLayoutContent() {
                   <TaskProcessPanel
                     inspected={inspectedTask}
                     onClose={closeTaskProcess}
-                    onShowTerminal={showTerminalFromTask}
+                    onShowTerminal={
+                      hostToolChrome('terminal') ? showTerminalFromTask : undefined
+                    }
                   />
                 ) : rightPanel === 'terminal' ? (
                   <TerminalPanel

package/src/lib/exec-policy.ts

@@ -6,6 +6,8 @@
  * = 关闭逐条命令沙箱。工具审批（允许/拒绝）仍按原策略生效。
  */
 
+import { hostToolChrome } from './host-tools';
+
 export type ExecPolicy = 'workspace' | 'full';
 
 export const EXEC_POLICY_STORAGE_KEY = 'agent-exec-policy';
@@ -16,6 +18,7 @@ export function parseExecPolicy(value: unknown): ExecPolicy {
 
 export function readStoredExecPolicy(): ExecPolicy {
   if (typeof localStorage === 'undefined') return 'workspace';
+  if (!hostToolChrome('local-fs')) return 'workspace';
   return parseExecPolicy(localStorage.getItem(EXEC_POLICY_STORAGE_KEY));
 }
 

package/src/lib/host-tools.ts

@@ -0,0 +1,206 @@
+/**
+ * 渲染层读构建期注入的宿主工具族 / 安全询问。
+ * 解析规则与 ts/src/host-tools.ts 对齐：缺省全开；对象必须显式 chrome:true。
+ */
+
+export type HostToolFamilyId =
+  | 'terminal'
+  | 'local-fs'
+  | 'projects'
+  | 'background-tasks'
+  | 'mcp'
+  | 'web'
+  | 'plugins';
+
+export interface HostToolFamilySurface {
+  capability: boolean;
+  chrome: boolean;
+}
+
+export type HostToolsConfig = Partial<
+  Record<HostToolFamilyId, boolean | { capability?: boolean; chrome?: boolean }>
+>;
+
+export type ResolvedHostTools = Record<HostToolFamilyId, HostToolFamilySurface>;
+
+const FAMILY_IDS: readonly HostToolFamilyId[] = [
+  'terminal',
+  'local-fs',
+  'projects',
+  'background-tasks',
+  'mcp',
+  'web',
+  'plugins',
+];
+
+function resolveSurface(
+  value: boolean | { capability?: boolean; chrome?: boolean } | undefined,
+): HostToolFamilySurface {
+  if (value === undefined || value === true) return { capability: true, chrome: true };
+  if (value === false) return { capability: false, chrome: false };
+  return {
+    capability: value.capability !== false,
+    chrome: value.chrome === true,
+  };
+}
+
+export function resolveWebHostTools(config?: HostToolsConfig | null): ResolvedHostTools {
+  const out = {} as ResolvedHostTools;
+  for (const id of FAMILY_IDS) {
+    out[id] = resolveSurface(config?.[id]);
+  }
+  return out;
+}
+
+function readHostToolsConfig(): HostToolsConfig {
+  const raw = import.meta.env.VITE_HOST_TOOLS;
+  if (!raw) return {};
+  try {
+    const parsed = typeof raw === 'string' ? (JSON.parse(raw) as unknown) : raw;
+    return parsed && typeof parsed === 'object' ? (parsed as HostToolsConfig) : {};
+  } catch {
+    return {};
+  }
+}
+
+let cached: ResolvedHostTools | null = null;
+
+export function getWebHostTools(): ResolvedHostTools {
+  cached ??= resolveWebHostTools(readHostToolsConfig());
+  return cached;
+}
+
+export function hostToolChrome(id: HostToolFamilyId): boolean {
+  return getWebHostTools()[id].chrome;
+}
+
+export function hostToolCapability(id: HostToolFamilyId): boolean {
+  return getWebHostTools()[id].capability;
+}
+
+export function isWebApprovalEnabled(): boolean {
+  return import.meta.env.VITE_APPROVAL !== 'off';
+}
+
+export type ChatModeId = 'agent' | 'plan';
+
+const DEFAULT_CHAT_MODES: ChatModeId[] = ['agent', 'plan'];
+
+export function resolveWebChatModes(value?: unknown): ChatModeId[] {
+  if (!Array.isArray(value)) return [...DEFAULT_CHAT_MODES];
+  const allowed = DEFAULT_CHAT_MODES.filter((id) => value.includes(id));
+  return allowed.length > 0 ? allowed : ['agent'];
+}
+
+function readChatModesConfig(): unknown {
+  const raw = import.meta.env.VITE_CHAT_MODES;
+  if (!raw) return undefined;
+  try {
+    return typeof raw === 'string' ? JSON.parse(raw) : raw;
+  } catch {
+    return undefined;
+  }
+}
+
+let cachedModes: ChatModeId[] | null = null;
+
+export function getWebChatModes(): ChatModeId[] {
+  cachedModes ??= resolveWebChatModes(readChatModesConfig());
+  return cachedModes;
+}
+
+export function clampWebChatMode(requested: unknown): ChatModeId {
+  return requested === 'plan' && getWebChatModes().includes('plan') ? 'plan' : 'agent';
+}
+
+export const SETTINGS_ITEM_IDS = [
+  'agents',
+  'skills',
+  'mcp',
+  'appearance',
+  'llm',
+  'web-search',
+  'usage',
+  'diagnose',
+  'security',
+  'insights',
+  'telemetry',
+] as const;
+
+export type SettingsItemId = (typeof SETTINGS_ITEM_IDS)[number];
+
+export const GENERAL_SETTINGS_ITEM_IDS = [
+  'appearance',
+  'llm',
+  'web-search',
+  'usage',
+  'diagnose',
+  'security',
+  'insights',
+  'telemetry',
+] as const;
+
+export type SettingsChromeConfig = Partial<Record<SettingsItemId, boolean>>;
+
+export type ResolvedSettingsChrome = Record<SettingsItemId, boolean>;
+
+function settingsFollowsHostTool(id: SettingsItemId, tools: ResolvedHostTools): boolean {
+  if (id === 'skills') return tools.plugins.chrome;
+  if (id === 'mcp') return tools.mcp.chrome;
+  if (id === 'web-search') return tools.web.chrome;
+  return true;
+}
+
+export function resolveWebSettingsChrome(
+  value?: unknown,
+  tools: ResolvedHostTools = resolveWebHostTools(),
+): ResolvedSettingsChrome {
+  const config =
+    value && typeof value === 'object' && !Array.isArray(value)
+      ? (value as Record<string, unknown>)
+      : {};
+  const out = {} as ResolvedSettingsChrome;
+  for (const id of SETTINGS_ITEM_IDS) {
+    out[id] = config[id] !== false && settingsFollowsHostTool(id, tools);
+  }
+  return out;
+}
+
+function readSettingsConfig(): unknown {
+  const raw = import.meta.env.VITE_SETTINGS;
+  if (!raw) return undefined;
+  try {
+    return typeof raw === 'string' ? JSON.parse(raw) : raw;
+  } catch {
+    return undefined;
+  }
+}
+
+let cachedSettings: ResolvedSettingsChrome | null = null;
+
+export function getWebSettingsChrome(): ResolvedSettingsChrome {
+  cachedSettings ??= resolveWebSettingsChrome(readSettingsConfig(), getWebHostTools());
+  return cachedSettings;
+}
+
+export function settingsChrome(id: SettingsItemId): boolean {
+  return getWebSettingsChrome()[id];
+}
+
+export function hasGeneralSettingsChrome(): boolean {
+  const chrome = getWebSettingsChrome();
+  return GENERAL_SETTINGS_ITEM_IDS.some((id) => chrome[id]);
+}
+
+export function sanitizeRightPanelKind(kind: string | null | undefined): string | null {
+  if (!kind) return null;
+  if (kind === 'terminal') return hostToolChrome('terminal') ? 'terminal' : null;
+  return kind;
+}
+
+/** 测试用：清掉缓存，让下次按新 env 重读。 */
+export function resetWebHostToolsForTests(): void {
+  cached = null;
+  cachedModes = null;
+  cachedSettings = null;
+}

package/src/pages/AgentPage.tsx

@@ -22,6 +22,7 @@ import {
   readStoredExecPolicy,
   type ExecPolicy,
 } from "@/lib/exec-policy";
+import { clampWebChatMode, hostToolChrome, settingsChrome } from "@/lib/host-tools";
 import type { ExecutedAction } from "@/components/chat/ExecutedActionsCard";
 import { inspectTaskTitle, type InspectTaskInput } from "@/components/chat/executed-actions-model";
 import type { ChildInfo } from "@/components/chat/OrchestrationChildrenCard";
@@ -85,10 +86,8 @@ type ChatMessageWithMetadata = ChatMessage & LocalChatMessage;
 const CHAT_MODE_STORAGE_KEY = "agent-chat-mode";
 
 function readStoredMode(): ChatMode {
-  if (typeof localStorage === "undefined") return "agent";
-  return localStorage.getItem(CHAT_MODE_STORAGE_KEY) === "plan"
-    ? "plan"
-    : "agent";
+  if (typeof localStorage === "undefined") return clampWebChatMode("agent");
+  return clampWebChatMode(localStorage.getItem(CHAT_MODE_STORAGE_KEY));
 }
 
 function extractPersistedActions(
@@ -374,8 +373,9 @@ function AgentChatView({
   // 当前会话绑定的项目 — Codex 式 cwd 指示：输入框上方显示项目名徽章，
   // 点击可关联到其他项目 / 修改项目目录 / 移出项目。无项目会话不显示。
   const [projects, setProjects] = useState<LocalProject[]>([]);
+  const showProjectsChrome = hostToolChrome("projects");
   const fetchProjects = useCallback(async () => {
-    if (!isElectron()) return;
+    if (!isElectron() || !hostToolChrome("projects")) return;
     try {
       const res = await listProjects();
       setProjects(res.projects ?? []);
@@ -516,9 +516,10 @@ function AgentChatView({
   );
 
   const handleModeChange = useCallback((next: ChatMode) => {
-    setMode(next);
+    const clamped = clampWebChatMode(next);
+    setMode(clamped);
     if (typeof localStorage !== "undefined") {
-      localStorage.setItem(CHAT_MODE_STORAGE_KEY, next);
+      localStorage.setItem(CHAT_MODE_STORAGE_KEY, clamped);
     }
   }, []);
 
@@ -1121,7 +1122,9 @@ function AgentChatView({
         suggestedReplies={visibleSuggestedReplies}
         onSelectSuggestion={handleSelectSuggestion}
         onOpenSettings={
-          isElectron() ? () => setLlmSettingsOpen(true) : undefined
+          isElectron() && settingsChrome("llm")
+            ? () => setLlmSettingsOpen(true)
+            : undefined
         }
         inputToolbarExtras={
           <ModelPicker
@@ -1134,25 +1137,31 @@ function AgentChatView({
         }
         mode={mode}
         onModeChange={handleModeChange}
-        execPolicy={execPolicy}
-        onExecPolicyChange={handleExecPolicyChange}
+        execPolicy={hostToolChrome("local-fs") ? execPolicy : "workspace"}
+        onExecPolicyChange={
+          hostToolChrome("local-fs") ? handleExecPolicyChange : undefined
+        }
         inputLeadingChrome={
-          <ChatProjectBadge
-            chatId={chatId}
-            project={chatProject}
-            projects={projects}
-            onProjectsChanged={fetchProjects}
-            onChatProjectChanged={ctx.refreshChats}
-          />
+          showProjectsChrome ? (
+            <ChatProjectBadge
+              chatId={chatId}
+              project={chatProject}
+              projects={projects}
+              onProjectsChanged={fetchProjects}
+              onChatProjectChanged={ctx.refreshChats}
+            />
+          ) : undefined
         }
         inputBanner={
           <>
             {/* W6-5 项目信任门控：项目含规则文件但未信任时提示授权。 */}
+            {showProjectsChrome ? (
             <ProjectTrustBanner
               chatId={chatId}
               project={chatProject}
               onTrustChanged={fetchProjects}
             />
+            ) : null}
             {planReady && !isStreaming ? (
             <div className="mx-2.5 mb-1 flex items-center justify-between gap-2 rounded-agent-md border border-amber-400/50 bg-amber-400/10 px-2.5 py-1.5 text-xs">
               <div className="flex items-center gap-2 text-amber-700 dark:text-amber-300">
@@ -1183,7 +1192,7 @@ function AgentChatView({
           </>
         }
       />
-      {isElectron() && (
+      {isElectron() && settingsChrome("llm") && (
         <LocalLlmSettingsModal
           open={llmSettingsOpen}
           onClose={() => setLlmSettingsOpen(false)}
@@ -1234,8 +1243,9 @@ function EmptyChatGate() {
   useEffect(() => {
     setSelectedProjectId(projectIdFromUrl);
   }, [projectIdFromUrl]);
+  const showProjectsChrome = hostToolChrome("projects");
   const fetchProjects = useCallback(async () => {
-    if (!isElectron()) return;
+    if (!isElectron() || !hostToolChrome("projects")) return;
     try {
       const res = await listProjects();
       setProjects(res.projects ?? []);
@@ -1258,9 +1268,10 @@ function EmptyChatGate() {
     null;
 
   const handleModeChange = useCallback((next: ChatMode) => {
-    setMode(next);
+    const clamped = clampWebChatMode(next);
+    setMode(clamped);
     if (typeof localStorage !== "undefined") {
-      localStorage.setItem(CHAT_MODE_STORAGE_KEY, next);
+      localStorage.setItem(CHAT_MODE_STORAGE_KEY, clamped);
     }
   }, []);
 
@@ -1316,7 +1327,7 @@ function EmptyChatGate() {
     setCreateError(null);
     try {
       const id = await ctx.createChat({
-        ...(selectedProjectId ? { projectId: selectedProjectId } : {}),
+        ...(selectedProjectId && showProjectsChrome ? { projectId: selectedProjectId } : {}),
         ...(ctx.selectedAgentId ? { agentId: ctx.selectedAgentId } : {}),
       });
       if (!id) throw new Error("创建对话失败，请重试");
@@ -1365,7 +1376,9 @@ function EmptyChatGate() {
             selectedAgentId={ctx.selectedAgentId}
             onSelectAgent={handleSelectAgent}
             onOpenSettings={
-              isElectron() ? () => setLlmSettingsOpen(true) : undefined
+              isElectron() && settingsChrome("llm")
+                ? () => setLlmSettingsOpen(true)
+                : undefined
             }
             toolbarExtras={
               <ModelPicker
@@ -1377,7 +1390,7 @@ function EmptyChatGate() {
               />
             }
             leadingChrome={
-              isElectron() ? (
+              isElectron() && showProjectsChrome ? (
                 <ProjectPickerButton
                   projects={projects}
                   value={selectedProjectId}
@@ -1388,8 +1401,10 @@ function EmptyChatGate() {
             }
             mode={mode}
             onModeChange={handleModeChange}
-            execPolicy={execPolicy}
-            onExecPolicyChange={handleExecPolicyChange}
+            execPolicy={hostToolChrome("local-fs") ? execPolicy : "workspace"}
+            onExecPolicyChange={
+              hostToolChrome("local-fs") ? handleExecPolicyChange : undefined
+            }
             files={files}
             onFilesChange={setFiles}
             onMentionReferencesChange={setMentionReferences}
@@ -1411,7 +1426,7 @@ function EmptyChatGate() {
           </p>
         )}
       </div>
-      {isElectron() && (
+      {isElectron() && settingsChrome("llm") && (
         <LocalLlmSettingsModal
           open={llmSettingsOpen}
           onClose={() => setLlmSettingsOpen(false)}

package/src/pages/SettingsPage.tsx

@@ -19,12 +19,15 @@ import { TelemetrySettingsPanel } from '@/components/settings/TelemetrySettingsP
 import { UsagePanel } from '@/components/settings/UsagePanel';
 import { WebSearchSettingsPanel } from '@/components/settings/WebSearchSettingsPanel';
 import { getPackSettingsPanels } from '@/packs/registry';
+import { settingsChrome } from '@/lib/host-tools';
 import type { AgentOutletContext } from '@/layouts/AgentLayout';
 
 type SettingsSection = 'skills' | 'mcp' | 'agents' | 'general';
 
 function resolveSection(raw: string | null): SettingsSection {
-  if (raw === 'skills' || raw === 'mcp' || raw === 'agents') return raw;
+  if (raw === 'skills' && settingsChrome('skills')) return 'skills';
+  if (raw === 'mcp' && settingsChrome('mcp')) return 'mcp';
+  if (raw === 'agents' && settingsChrome('agents')) return 'agents';
   return 'general';
 }
 
@@ -61,7 +64,7 @@ export function SettingsPage() {
     <div 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>
-        {section === 'general' && (
+        {section === 'general' && settingsChrome('llm') && (
           <SettingsSaveButton
             testId="settings-header-save"
             saving={llmSaveUi.saving}
@@ -112,6 +115,7 @@ export function SettingsPage() {
 
           {section === 'general' && (
             <>
+              {settingsChrome('appearance') && (
               <section className="space-y-2" data-testid="settings-section-appearance">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuMonitor className="h-3.5 w-3.5 text-agent-muted-foreground" />
@@ -119,7 +123,9 @@ export function SettingsPage() {
                 </h2>
                 <AppearanceSettingsPanel />
               </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">
                   <LuSettings className="h-3.5 w-3.5 text-agent-muted-foreground" />
@@ -131,7 +137,9 @@ export function SettingsPage() {
                   onSaveUiChange={setLlmSaveUi}
                 />
               </section>
+              )}
 
+              {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" />
@@ -139,7 +147,9 @@ export function SettingsPage() {
                 </h2>
                 <WebSearchSettingsPanel />
               </section>
+              )}
 
+              {settingsChrome('usage') && (
               <section className="space-y-2" data-testid="settings-section-usage">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuChartBar className="h-3.5 w-3.5 text-agent-muted-foreground" />
@@ -147,7 +157,9 @@ export function SettingsPage() {
                 </h2>
                 <UsagePanel />
               </section>
+              )}
 
+              {settingsChrome('diagnose') && (
               <section className="space-y-2" data-testid="settings-section-diagnose">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuNetwork className="h-3.5 w-3.5 text-agent-muted-foreground" />
@@ -155,7 +167,9 @@ export function SettingsPage() {
                 </h2>
                 <DiagnoseSettingsPanel />
               </section>
+              )}
 
+              {settingsChrome('security') && (
               <section className="space-y-2" data-testid="settings-section-security">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuShieldCheck className="h-3.5 w-3.5 text-agent-muted-foreground" />
@@ -163,7 +177,9 @@ export function SettingsPage() {
                 </h2>
                 <SecuritySettingsPanel />
               </section>
+              )}
 
+              {settingsChrome('insights') && (
               <section className="space-y-2" data-testid="settings-section-insights">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuChartBar className="h-3.5 w-3.5 text-agent-muted-foreground" />
@@ -171,7 +187,9 @@ export function SettingsPage() {
                 </h2>
                 <InsightsSettingsPanel />
               </section>
+              )}
 
+              {settingsChrome('telemetry') && (
               <section className="space-y-2" data-testid="settings-section-telemetry">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuActivity className="h-3.5 w-3.5 text-agent-muted-foreground" />
@@ -179,6 +197,7 @@ export function SettingsPage() {
                 </h2>
                 <TelemetrySettingsPanel />
               </section>
+              )}
 
               {/* 场景包设置面板（1.2 起由包渲染层贡献）。
                   包经 packs/registry 注册，未激活 flavor 的产物里没有包组件。 */}

package/src/vite-env.d.ts

@@ -1 +1,17 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_FLAVOR?: string;
+  readonly VITE_BRAND_NAME?: string;
+  readonly VITE_BRAND_TITLE?: string;
+  readonly VITE_BRAND_TAGLINE?: string;
+  readonly VITE_DEFAULT_AGENT_ID?: string;
+  readonly VITE_HOST_TOOLS?: string;
+  readonly VITE_APPROVAL?: string;
+  readonly VITE_CHAT_MODES?: string;
+  readonly VITE_SETTINGS?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/vite.base.js

@@ -53,6 +53,11 @@ export function createProductViteConfig(options) {
             '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_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 ?? {})),
+            'import.meta.env.VITE_APPROVAL': JSON.stringify(product.approval ?? 'host'),
+            'import.meta.env.VITE_CHAT_MODES': JSON.stringify(JSON.stringify(product.chatModes ?? ['agent', 'plan'])),
+            'import.meta.env.VITE_SETTINGS': JSON.stringify(JSON.stringify(product.settings ?? {})),
         },
         resolve: {
             alias: {