Improve permission policy scope selection

Author: clown145

apps/admin-web/src/styles/panels.css

@@ -18,7 +18,7 @@
 }
 
 .form-grid.policy-form {
-  grid-template-columns: 160px minmax(160px, 1fr) 110px minmax(260px, 1.4fr) auto;
+  grid-template-columns: 160px minmax(160px, 1fr) 110px auto;
 }
 
 .form-grid.model-form {
@@ -261,6 +261,144 @@
   align-items: center;
 }
 
+.permission-scope-picker {
+  display: grid;
+  gap: 16px;
+  margin: 2px 0 16px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--surface);
+  padding: 14px;
+}
+
+.permission-picker-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.permission-picker-head strong,
+.permission-picker-head span {
+  display: block;
+}
+
+.permission-picker-head > div > span {
+  margin-top: 3px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.permission-picker-section {
+  display: grid;
+  gap: 10px;
+}
+
+.permission-picker-section h2 {
+  margin: 0;
+  font-size: 14px;
+}
+
+.permission-preset-grid,
+.permission-tool-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 8px;
+}
+
+.permission-preset-button,
+.permission-tool-choice {
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: #f8fafc;
+  color: var(--text);
+  padding: 10px;
+  text-align: left;
+}
+
+.permission-preset-button:hover,
+.permission-tool-choice:hover,
+.permission-tool-choice.selected {
+  border-color: #87b8b2;
+  background: var(--accent-muted);
+}
+
+.permission-preset-button strong,
+.permission-preset-button span,
+.permission-tool-choice strong,
+.permission-tool-choice small {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.permission-preset-button span,
+.permission-tool-choice small {
+  margin-top: 3px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.permission-tool-choice {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr);
+  gap: 8px;
+}
+
+.permission-choice-icon {
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-strong);
+  border-radius: 4px;
+  color: var(--accent-strong);
+}
+
+.permission-tool-meta {
+  grid-column: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.scope-chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.scope-chip {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid #b8d5d0;
+  border-radius: 999px;
+  background: #eef8f6;
+  color: #24423e;
+  padding: 6px 9px;
+  font-size: 12px;
+}
+
+.scope-chip span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.permission-manual-scopes {
+  display: grid;
+  gap: 6px;
+}
+
+.muted-line {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
 .subsection-header {
   display: flex;
   align-items: center;

apps/admin-web/src/ui/i18n/translations.ts

@@ -228,7 +228,29 @@ export const translations: Record<Locale, Record<string, string>> = {
     "permissions.created": "策略已创建",
     "permissions.deleted": "策略已删除",
     "permissions.noScopes": "无范围",
-    "permissions.noPolicies": "暂无策略"
+    "permissions.noPolicies": "暂无策略",
+    "permissions.scopePickerTitle": "按工具选择权限",
+    "permissions.scopePickerDetail": "选择能力或具体工具，系统会自动填入需要的范围和最低等级。",
+    "permissions.quickGrants": "常用能力",
+    "permissions.grantWorkspaceRead": "读取工作区",
+    "permissions.grantWorkspaceReadDetail": "允许读取 VFS 文件和目录",
+    "permissions.grantWorkspaceWrite": "编辑工作区",
+    "permissions.grantWorkspaceWriteDetail": "允许创建、修改、移动和删除 VFS 内容",
+    "permissions.grantSearch": "网页搜索",
+    "permissions.grantSearchDetail": "允许使用已配置的搜索供应商",
+    "permissions.grantMessaging": "发送消息",
+    "permissions.grantMessagingDetail": "允许调用跨平台消息发送工具",
+    "permissions.grantBuiltinTools": "全部内置工具",
+    "permissions.grantBuiltinToolsDetail": "授予当前所有内置工具所需范围",
+    "permissions.grantMcpTools": "全部 MCP 工具",
+    "permissions.grantMcpToolsDetail": "授予当前已启用 MCP 工具所需范围",
+    "permissions.toolGrants": "具体工具",
+    "permissions.selectedScopes": "已选择范围",
+    "permissions.manualScopes": "高级范围",
+    "permissions.manualScopesPlaceholder": "可选，逗号分隔，例如 mcp:server:call",
+    "permissions.removeScope": "移除此范围",
+    "permissions.autoLevel": "当前 L{level}",
+    "permissions.noTools": "暂无可选择工具"
   },
   "en-US": {
     "app.brandSubtitle": "Admin Console",
@@ -452,6 +474,28 @@ export const translations: Record<Locale, Record<string, string>> = {
     "permissions.created": "Policy created",
     "permissions.deleted": "Policy deleted",
     "permissions.noScopes": "no scopes",
-    "permissions.noPolicies": "No policies"
+    "permissions.noPolicies": "No policies",
+    "permissions.scopePickerTitle": "Choose Permissions By Tool",
+    "permissions.scopePickerDetail": "Pick capabilities or concrete tools; required scopes and minimum level are filled automatically.",
+    "permissions.quickGrants": "Common Grants",
+    "permissions.grantWorkspaceRead": "Read Workspace",
+    "permissions.grantWorkspaceReadDetail": "Allow reading VFS files and directories",
+    "permissions.grantWorkspaceWrite": "Edit Workspace",
+    "permissions.grantWorkspaceWriteDetail": "Allow creating, updating, moving, and deleting VFS content",
+    "permissions.grantSearch": "Web Search",
+    "permissions.grantSearchDetail": "Allow using the configured search provider",
+    "permissions.grantMessaging": "Send Messages",
+    "permissions.grantMessagingDetail": "Allow cross-platform outbound messaging",
+    "permissions.grantBuiltinTools": "All Built-in Tools",
+    "permissions.grantBuiltinToolsDetail": "Grant scopes required by all current built-in tools",
+    "permissions.grantMcpTools": "All MCP Tools",
+    "permissions.grantMcpToolsDetail": "Grant scopes required by all enabled MCP tools",
+    "permissions.toolGrants": "Concrete Tools",
+    "permissions.selectedScopes": "Selected Scopes",
+    "permissions.manualScopes": "Advanced Scopes",
+    "permissions.manualScopesPlaceholder": "Optional, comma-separated, for example mcp:server:call",
+    "permissions.removeScope": "Remove this scope",
+    "permissions.autoLevel": "Current L{level}",
+    "permissions.noTools": "No selectable tools"
   }
 };

apps/admin-web/src/ui/panels/PermissionsPanel.tsx

@@ -1,10 +1,11 @@
 import { Plus, RefreshCw, Trash2 } from "lucide-react";
 import { useEffect, useState } from "react";
-import type { PermissionPolicy } from "../../api/types";
+import type { PermissionPolicy, ToolCatalogItem } from "../../api/types";
 import { EmptyState } from "../EmptyState";
 import { useI18n } from "../i18n/I18nProvider";
 import { StatusBadge } from "../StatusBadge";
 import { ToolbarButton } from "../ToolbarButton";
+import { PermissionScopePicker } from "./permissions/PermissionScopePicker";
 import type { PanelProps } from "./types";
 
 const subjectTypes: PermissionPolicy["subjectType"][] = [
@@ -18,27 +19,38 @@ const subjectTypes: PermissionPolicy["subjectType"][] = [
 export function PermissionsPanel({ client, notify }: PanelProps) {
   const { t } = useI18n();
   const [policies, setPolicies] = useState<PermissionPolicy[]>([]);
+  const [tools, setTools] = useState<ToolCatalogItem[]>([]);
   const [subjectType, setSubjectType] = useState<PermissionPolicy["subjectType"]>("platform");
   const [subjectId, setSubjectId] = useState("webui");
   const [maxLevel, setMaxLevel] = useState(4);
-  const [scopes, setScopes] = useState("workspace:read,workspace:write,message:send");
+  const [selectedScopes, setSelectedScopes] = useState<string[]>([
+    "workspace:read",
+    "workspace:write",
+    "message:send"
+  ]);
+  const [manualScopes, setManualScopes] = useState("");
 
   async function load() {
     try {
-      const result = await client.listPolicies();
-      setPolicies(result.policies);
+      const [policyResult, toolResult] = await Promise.all([
+        client.listPolicies(),
+        client.listTools()
+      ]);
+      setPolicies(policyResult.policies);
+      setTools(toolResult.tools);
     } catch (error) {
       notify(error instanceof Error ? error.message : "Failed to load policies", "error");
     }
   }
 
   async function create() {
     try {
+      const scopes = mergeScopes(selectedScopes, parseScopes(manualScopes));
       await client.createPolicy({
         subjectType,
         subjectId,
         maxLevel,
-        scopes: scopes.split(",").map((scope) => scope.trim()).filter(Boolean)
+        scopes
       });
       notify(t("permissions.created"), "ok");
       await load();
@@ -92,15 +104,20 @@ export function PermissionsPanel({ client, notify }: PanelProps) {
             onChange={(event) => setMaxLevel(Number(event.target.value))}
           />
         </label>
-        <label>
-          {t("permissions.scopes")}
-          <input value={scopes} onChange={(event) => setScopes(event.target.value)} />
-        </label>
         <button className="primary-button" type="button" onClick={() => void create()}>
           <Plus size={16} />
           {t("common.add")}
         </button>
       </div>
+      <PermissionScopePicker
+        tools={tools}
+        maxLevel={maxLevel}
+        onMaxLevelChange={setMaxLevel}
+        selectedScopes={selectedScopes}
+        onSelectedScopesChange={setSelectedScopes}
+        manualScopes={manualScopes}
+        onManualScopesChange={setManualScopes}
+      />
       <div className="table-list">
         {policies.map((policy) => (
           <div className="table-row" key={policy.id}>
@@ -123,3 +140,14 @@ export function PermissionsPanel({ client, notify }: PanelProps) {
     </section>
   );
 }
+
+function parseScopes(input: string): string[] {
+  return input
+    .split(",")
+    .map((scope) => scope.trim())
+    .filter(Boolean);
+}
+
+function mergeScopes(...groups: string[][]): string[] {
+  return Array.from(new Set(groups.flat())).sort();
+}