From cf7560926b21bfdacb59bb22dc7d34da7926f01b Mon Sep 17 00:00:00 2001
From: Sara <sarah_yayun@163.com>
Date: Thu, 11 Jun 2026 18:16:56 +0800
Subject: [PATCH] fix agent settings permissions

---
 frontend/src/pages/OpenClawSettings.tsx       | 28 ++++++++++-------
 .../pages/agent-detail/AgentDetailPage.tsx    | 18 ++++++-----
 .../pages/agent-detail/tabs/ApprovalsTab.tsx  | 19 +++++++-----
 .../pages/agent-detail/tabs/SettingsTab.tsx   | 31 ++++++++++++-------
 .../src/pages/agent-detail/tabs/SkillsTab.tsx |  9 ++++--
 5 files changed, 64 insertions(+), 41 deletions(-)

diff --git a/frontend/src/pages/OpenClawSettings.tsx b/frontend/src/pages/OpenClawSettings.tsx
index 9c4a90328..2988297d8 100644
--- a/frontend/src/pages/OpenClawSettings.tsx
+++ b/frontend/src/pages/OpenClawSettings.tsx
@@ -15,9 +15,10 @@ function fetchAuth<T>(url: string, options?: RequestInit): Promise<T> {
 interface OpenClawSettingsProps {
     agent: any;
     agentId: string;
+    canManage: boolean;
 }
 
-export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsProps) {
+export default function OpenClawSettings({ agent, agentId, canManage }: OpenClawSettingsProps) {
     const { t, i18n } = useTranslation();
     const queryClient = useQueryClient();
     const navigate = useNavigate();
@@ -34,6 +35,7 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
     const hasKey = agent?.has_api_key || false;
 
     const handleRegenerate = async (autoCopy = false) => {
+        if (!canManage) return;
         setRegenerating(true);
         try {
             const result = await fetchAuth<{ api_key: string }>(`/agents/${agentId}/api-key`, { method: 'POST' });
@@ -56,6 +58,7 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
     };
 
     const handleDelete = async () => {
+        if (!canManage) return;
         setDeleting(true);
         try {
             await agentApi.delete(agentId);
@@ -75,6 +78,7 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
     });
 
     const handleScopeChange = async (newScope: string) => {
+        if (!canManage || !isOwner) return;
         try {
             await fetchAuth(`/agents/${agentId}/permissions`, {
                 method: 'PUT',
@@ -89,6 +93,7 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
     };
 
     const handleAccessLevelChange = async (newLevel: string) => {
+        if (!canManage || !isOwner) return;
         try {
             await fetchAuth(`/agents/${agentId}/permissions`, {
                 method: 'PUT',
@@ -103,6 +108,7 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
     };
 
     const isOwner = permData?.is_owner ?? false;
+    const canEditPermissions = canManage && isOwner;
     const currentScope = permData?.scope_type === 'user' ? 'private' : (permData?.scope_type || 'company');
     const currentAccessLevel = permData?.access_level || 'use';
 
@@ -146,13 +152,13 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
                                     copiedLabel="Copied"
                                     style={{ padding: '4px 12px', fontSize: '12px', whiteSpace: 'nowrap', minWidth: '70px', height: 'fit-content' }}
                                 />
-                                <button
+                                {canManage && <button
                                     className="btn btn-secondary"
                                     onClick={() => setShowConfirm(true)}
                                     style={{ padding: '4px 12px', fontSize: '12px', whiteSpace: 'nowrap' }}
                                 >
                                     {isChinese ? '重新生成' : 'Regenerate'}
-                                </button>
+                                </button>}
                             </div>
                         );
                     }
@@ -169,7 +175,7 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
                                     ? (isChinese ? '旧版密钥（已加密隐藏），请重新生成以查看明文' : 'Legacy key (encrypted), please regenerate to view')
                                     : (isChinese ? '未生成' : 'Not generated')}
                             </div>
-                            <button
+                            {canManage && <button
                                 className="btn btn-secondary"
                                 onClick={() => setShowConfirm(true)}
                                 style={{ padding: '6px 16px', fontSize: '12px', whiteSpace: 'nowrap' }}
@@ -177,7 +183,7 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
                                 {isLegacyHash
                                     ? (isChinese ? '重新生成' : 'Regenerate')
                                     : (isChinese ? '生成' : 'Generate')}
-                            </button>
+                            </button>}
                         </div>
                     );
                 })()}
@@ -214,7 +220,7 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
                             <button
                                 className="btn btn-primary"
                                 onClick={() => handleRegenerate(false)}
-                                disabled={regenerating}
+                                disabled={!canManage || regenerating}
                                 style={{ padding: '5px 14px', fontSize: '12px' }}
                             >
                                 {regenerating
@@ -243,14 +249,14 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
                             style={{
                                 display: 'flex', alignItems: 'center', gap: '10px',
                                 padding: '12px 14px', borderRadius: '8px',
-                                cursor: isOwner ? 'pointer' : 'default',
+                                cursor: canEditPermissions ? 'pointer' : 'default',
                                 border: currentScope === scope
                                     ? '1px solid var(--accent-primary)'
                                     : '1px solid var(--border-subtle)',
                                 background: currentScope === scope
                                     ? 'rgba(99,102,241,0.06)'
                                     : 'transparent',
-                                opacity: isOwner ? 1 : 0.7,
+                                opacity: canEditPermissions ? 1 : 0.7,
                                 transition: 'all 0.15s',
                             }}
                         >
@@ -258,7 +264,7 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
                                 type="radio"
                                 name="perm_scope_oc"
                                 checked={currentScope === scope}
-                                disabled={!isOwner}
+                                disabled={!canEditPermissions}
                                 onChange={() => handleScopeChange(scope)}
                                 style={{ accentColor: 'var(--accent-primary)' }}
                             />
@@ -281,7 +287,7 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
                 </div>
 
                 {/* Access Level for company scope */}
-                {currentScope === 'company' && isOwner && (
+                {currentScope === 'company' && canEditPermissions && (
                     <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: '12px' }}>
                         <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '8px' }}>
                             {t('agent.settings.perm.defaultAccess', 'Default Access Level')}
@@ -332,7 +338,7 @@ export default function OpenClawSettings({ agent, agentId }: OpenClawSettingsPro
             </div>
 
             {/* ── Danger Zone: Delete Agent ── */}
-            {isOwner && (
+            {canEditPermissions && (
                 <div className="card" style={{
                     marginBottom: '12px',
                     border: '1px solid rgba(255,80,80,0.2)',
diff --git a/frontend/src/pages/agent-detail/AgentDetailPage.tsx b/frontend/src/pages/agent-detail/AgentDetailPage.tsx
index ce7ee84e4..7e9324ad5 100644
--- a/frontend/src/pages/agent-detail/AgentDetailPage.tsx
+++ b/frontend/src/pages/agent-detail/AgentDetailPage.tsx
@@ -4885,11 +4885,12 @@ export default function AgentDetailPage() {
                             </>
                             {(agent as any)?.agent_type !== 'openclaw' && (
                                 <>
-                                    {agent.status === 'stopped' ? (
+                                    {canManage && agent.status === 'stopped' && (
                                         <button className="btn btn-secondary" onClick={async () => { await agentApi.start(id!); queryClient.invalidateQueries({ queryKey: ['agent', id] }); }}>{t('agent.actions.start')}</button>
-                                    ) : agent.status === 'running' ? (
+                                    )}
+                                    {canManage && agent.status === 'running' && (
                                         <button className="btn btn-secondary" onClick={async () => { await agentApi.stop(id!); queryClient.invalidateQueries({ queryKey: ['agent', id] }); }}>{t('agent.actions.stop')}</button>
-                                    ) : null}
+                                    )}
                                 </>
                             )}
                         </div>
@@ -4900,7 +4901,7 @@ export default function AgentDetailPage() {
                 {activeTab !== 'chat' && <div className="tabs">
                     {AGENT_DETAIL_TABS.filter(tab => {
                         if (['aware', 'workspace', 'chat'].includes(tab)) return false;
-                        // 'use' access: hide settings and approvals tabs
+                        // 'use' access keeps the existing tab bar unchanged; settings remains available via its own entry.
                         if ((agent as any)?.access_level === 'use') {
                             if (tab === 'settings' || tab === 'approvals') return false;
                         }
@@ -5109,7 +5110,7 @@ export default function AgentDetailPage() {
                             {/* Quick Actions */}
                             <div style={{ display: 'flex', gap: '10px', marginTop: '20px' }}>
                                 <button className="btn btn-secondary" onClick={() => setActiveTab('chat')}>{t('agent.actions.chat')}</button>
-                                <button className="btn btn-secondary" onClick={() => setActiveTab('settings')}>{t('agent.tabs.settings')}</button>
+                                {canManage && <button className="btn btn-secondary" onClick={() => setActiveTab('settings')}>{t('agent.tabs.settings')}</button>}
                             </div>
                         </div>
                     );
@@ -5353,9 +5354,10 @@ export default function AgentDetailPage() {
                                                             {trig.is_enabled ? t('agent.aware.inProgress') : t('agent.aware.completed')}
                                                         </span>
                                                         <div style={{ display: 'flex', gap: '4px' }}>
-                                                            {!trig.is_system && <button className="btn btn-ghost" style={{ padding: '2px 6px', fontSize: '11px', color: 'var(--error)' }}
+                                                            {canManage && !trig.is_system && <button className="btn btn-ghost" style={{ padding: '2px 6px', fontSize: '11px', color: 'var(--error)' }}
                                                                 onClick={async (e) => {
                                                                     e.stopPropagation();
+                                                                    if (!canManage) return;
                                                                     const ok = await dialog.confirm(t('agent.aware.deleteTriggerConfirm', { name: trig.name }), { title: '删除触发器', danger: true, confirmLabel: '删除' });
                                                                     if (ok) {
                                                                         await triggerApi.delete(id!, trig.id);
@@ -5782,7 +5784,7 @@ export default function AgentDetailPage() {
                             upload: (file, path, onProgress) => fileApi.upload(id!, file, path + '/', onProgress),
                             downloadUrl: (p) => fileApi.downloadUrl(id!, p),
                         };
-                        return <FileBrowser api={adapter} rootPath="workspace" features={{ upload: true, newFile: true, newFolder: true, edit: true, delete: canManage, directoryNavigation: true }} />;
+                        return <FileBrowser api={adapter} rootPath="workspace" features={{ upload: canManage, newFile: canManage, newFolder: canManage, edit: canManage, delete: canManage, directoryNavigation: true }} />;
                     })()
                 }
 
@@ -6716,7 +6718,7 @@ export default function AgentDetailPage() {
 
                 {/* ── Approvals Tab ── */}
                 {
-                    activeTab === 'approvals' && id && <ApprovalsTab agentId={id} />
+                    activeTab === 'approvals' && id && <ApprovalsTab agentId={id} canManage={canManage} />
                 }
 
                 {/* ── Settings Tab ── */}
diff --git a/frontend/src/pages/agent-detail/tabs/ApprovalsTab.tsx b/frontend/src/pages/agent-detail/tabs/ApprovalsTab.tsx
index df3cbd079..f24f40935 100644
--- a/frontend/src/pages/agent-detail/tabs/ApprovalsTab.tsx
+++ b/frontend/src/pages/agent-detail/tabs/ApprovalsTab.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import { fetchAuth } from '../utils/fetchAuth';
 
-export default function ApprovalsTab({ agentId }: { agentId: string }) {
+export default function ApprovalsTab({ agentId, canManage }: { agentId: string; canManage: boolean }) {
     const { i18n } = useTranslation();
     const queryClient = useQueryClient();
     const isChinese = i18n.language?.startsWith('zh');
@@ -16,6 +16,7 @@ export default function ApprovalsTab({ agentId }: { agentId: string }) {
 
     const resolveMut = useMutation({
         mutationFn: async ({ approvalId, action }: { approvalId: string; action: string }) => {
+            if (!canManage) return;
             const token = localStorage.getItem('token');
             return fetch(`/api/agents/${agentId}/approvals/${approvalId}/resolve`, {
                 method: 'POST',
@@ -79,24 +80,28 @@ export default function ApprovalsTab({ agentId }: { agentId: string }) {
                                     {typeof approval.details === 'string' ? approval.details : JSON.stringify(approval.details, null, 2)}
                                 </div>
                             )}
-                            <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+                            {canManage && <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
                                 <button
                                     className="btn btn-primary"
                                     style={{ padding: '6px 16px', fontSize: '12px' }}
-                                    onClick={() => resolveMut.mutate({ approvalId: approval.id, action: 'approve' })}
-                                    disabled={resolveMut.isPending}
+                                    onClick={() => {
+                                        if (canManage) resolveMut.mutate({ approvalId: approval.id, action: 'approve' });
+                                    }}
+                                    disabled={!canManage || resolveMut.isPending}
                                 >
                                     {isChinese ? '批准' : 'Approve'}
                                 </button>
                                 <button
                                     className="btn btn-danger"
                                     style={{ padding: '6px 16px', fontSize: '12px' }}
-                                    onClick={() => resolveMut.mutate({ approvalId: approval.id, action: 'reject' })}
-                                    disabled={resolveMut.isPending}
+                                    onClick={() => {
+                                        if (canManage) resolveMut.mutate({ approvalId: approval.id, action: 'reject' });
+                                    }}
+                                    disabled={!canManage || resolveMut.isPending}
                                 >
                                     {isChinese ? '拒绝' : 'Reject'}
                                 </button>
-                            </div>
+                            </div>}
                         </div>
                     ))}
                     <div style={{ borderTop: '1px solid var(--border-subtle)', margin: '16px 0' }} />
diff --git a/frontend/src/pages/agent-detail/tabs/SettingsTab.tsx b/frontend/src/pages/agent-detail/tabs/SettingsTab.tsx
index eef9d490f..6b4c6f327 100644
--- a/frontend/src/pages/agent-detail/tabs/SettingsTab.tsx
+++ b/frontend/src/pages/agent-detail/tabs/SettingsTab.tsx
@@ -68,30 +68,35 @@ export default function SettingsTab(props: Props) {
         onDeleteAgent,
     } = props;
     const { t, i18n } = useTranslation();
+    const readOnly = !canManage;
+    const canSave = canManage && hasChanges && !settingsSaving;
 
     if ((agent as any)?.agent_type === 'openclaw') {
-        return <OpenClawSettings agent={agent} agentId={agentId} />;
+        return <OpenClawSettings agent={agent} agentId={agentId} canManage={canManage} />;
     }
 
     return (
-        <div>
+        <fieldset disabled={readOnly} style={{ border: 0, padding: 0, margin: 0, minInlineSize: 0 }}>
+            <div>
             <div className="agent-settings-savebar">
                 <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                     {settingsSaved && <span style={{ fontSize: '12px', color: 'var(--success)' }}>{t('agent.settings.saved', 'Saved')}</span>}
                     {settingsError && <span style={{ fontSize: '12px', color: settingsError.includes('adjusted') ? 'var(--warning)' : 'var(--error)', whiteSpace: 'pre-line' }}>{settingsError}</span>}
-                    <button
+                    {canManage && <button
                         className="btn btn-primary"
-                        disabled={!hasChanges || settingsSaving}
-                        onClick={onSaveSettings}
+                        disabled={!canSave}
+                        onClick={() => {
+                            if (canManage) void onSaveSettings();
+                        }}
                         style={{
-                            opacity: hasChanges ? 1 : 0.5,
-                            cursor: hasChanges ? 'pointer' : 'default',
+                            opacity: canSave ? 1 : 0.5,
+                            cursor: canSave ? 'pointer' : 'default',
                             padding: '6px 20px',
                             fontSize: '13px',
                         }}
                     >
                         {settingsSaving ? t('agent.settings.saving', 'Saving...') : t('agent.settings.save', 'Save')}
-                    </button>
+                    </button>}
                 </div>
             </div>
 
@@ -237,7 +242,7 @@ export default function SettingsTab(props: Props) {
                         <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
                             {isChinese ? '当用户在网页端发起新对话时，Agent 会自动发送的欢迎语。支持 Markdown 语法。留空则不发送。' : 'Greeting message sent automatically when a user starts a new web conversation. Supports Markdown. Leave empty to disable.'}
                         </p>
-                        <textarea className="input" rows={4} value={wmDraft} onChange={(e) => setWmDraft(e.target.value)} onBlur={onSaveWelcomeMessage} placeholder={isChinese ? '例如：你好！我是你的 AI 助手，有什么可以帮你的吗？' : "e.g. Hello! I'm your AI assistant. How can I help you?"} style={{ width: '100%', minHeight: '80px', resize: 'vertical', fontFamily: 'inherit', fontSize: '13px' }} />
+                        <textarea className="input" rows={4} value={wmDraft} onChange={(e) => setWmDraft(e.target.value)} onBlur={() => { if (canManage) void onSaveWelcomeMessage(); }} placeholder={isChinese ? '例如：你好！我是你的 AI 助手，有什么可以帮你的吗？' : "e.g. Hello! I'm your AI assistant. How can I help you?"} style={{ width: '100%', minHeight: '80px', resize: 'vertical', fontFamily: 'inherit', fontSize: '13px' }} />
                     </div>
                 );
             })()}
@@ -265,6 +270,7 @@ export default function SettingsTab(props: Props) {
                                     className="input"
                                     value={currentLevel}
                                     onChange={async (e) => {
+                                        if (!canManage) return;
                                         const newPolicy = { ...(agent?.autonomy_policy as any || {}), [action.key]: e.target.value };
                                         await agentApi.update(agentId, { autonomy_policy: newPolicy } as any);
                                         queryClient.invalidateQueries({ queryKey: ['agent', agentId] });
@@ -394,10 +400,10 @@ export default function SettingsTab(props: Props) {
             </div>
 
             <div style={{ marginBottom: '12px' }}>
-                <ChannelConfig mode="edit" agentId={agentId} />
+                <ChannelConfig mode="edit" agentId={agentId} canManage={canManage} />
             </div>
 
-            <div className="card" style={{ borderColor: 'var(--error)' }}>
+            {canManage && <div className="card" style={{ borderColor: 'var(--error)' }}>
                 <h4 style={{ color: 'var(--error)', marginBottom: '12px' }}>{t('agent.settings.danger.title')}</h4>
                 <p style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '12px' }}>{t('agent.settings.danger.deleteWarning')}</p>
                 {!showDeleteConfirm ? (
@@ -409,7 +415,8 @@ export default function SettingsTab(props: Props) {
                         <button className="btn btn-secondary" onClick={() => setShowDeleteConfirm(false)}>{t('common.cancel')}</button>
                     </div>
                 )}
+            </div>}
             </div>
-        </div>
+        </fieldset>
     );
 }
diff --git a/frontend/src/pages/agent-detail/tabs/SkillsTab.tsx b/frontend/src/pages/agent-detail/tabs/SkillsTab.tsx
index 3c696f88a..41ca45eb3 100644
--- a/frontend/src/pages/agent-detail/tabs/SkillsTab.tsx
+++ b/frontend/src/pages/agent-detail/tabs/SkillsTab.tsx
@@ -96,7 +96,7 @@ export default function SkillsTab(props: Props) {
                         <h3 style={{ marginBottom: '4px' }}>{t('agent.skills.title')}</h3>
                         <p style={{ fontSize: '13px', color: 'var(--text-tertiary)' }}>{t('agent.skills.description')}</p>
                     </div>
-                    <div style={{ display: 'flex', gap: '8px', flexShrink: 0 }}>
+                    {canManage && <div style={{ display: 'flex', gap: '8px', flexShrink: 0 }}>
                         <button
                             className="btn btn-secondary"
                             style={{ fontSize: '13px' }}
@@ -118,7 +118,7 @@ export default function SkillsTab(props: Props) {
                         >
                             Import from Presets
                         </button>
-                    </div>
+                    </div>}
                 </div>
                 <div style={{ marginTop: '8px', padding: '10px 14px', background: 'var(--bg-secondary)', borderRadius: '8px', fontSize: '12px', color: 'var(--text-secondary)', lineHeight: 1.6 }}>
                     <strong>Skill Format:</strong><br />
@@ -126,7 +126,7 @@ export default function SkillsTab(props: Props) {
                 </div>
             </div>
 
-            <FileBrowser api={adapter} rootPath="skills" features={{ newFile: true, edit: true, delete: canManage, newFolder: true, upload: true, directoryNavigation: true }} title={t('agent.skills.skillFiles')} />
+            <FileBrowser api={adapter} rootPath="skills" features={{ newFile: canManage, edit: canManage, delete: canManage, newFolder: canManage, upload: canManage, directoryNavigation: true }} title={t('agent.skills.skillFiles')} />
 
             {showAgentClawhub && (
                 <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setShowAgentClawhub(false)}>
@@ -177,6 +177,7 @@ export default function SkillsTab(props: Props) {
                                         style={{ fontSize: '12px', padding: '5px 12px', marginLeft: '12px' }}
                                         disabled={agentClawhubInstalling === result.slug}
                                         onClick={async () => {
+                                            if (!canManage) return;
                                             setAgentClawhubInstalling(result.slug);
                                             try {
                                                 const response = await skillApi.agentImport.fromClawhub(agentId, result.slug);
@@ -221,6 +222,7 @@ export default function SkillsTab(props: Props) {
                                 className="btn btn-primary"
                                 disabled={!agentUrlInput.trim() || agentUrlImporting}
                                 onClick={async () => {
+                                    if (!canManage) return;
                                     setAgentUrlImporting(true);
                                     try {
                                         const response = await skillApi.agentImport.fromUrl(agentId, agentUrlInput.trim());
@@ -289,6 +291,7 @@ export default function SkillsTab(props: Props) {
                                             style={{ whiteSpace: 'nowrap', fontSize: '12px', padding: '6px 14px', display: 'inline-flex', alignItems: 'center', gap: '5px' }}
                                             disabled={importingSkillId === skill.id}
                                             onClick={async () => {
+                                                if (!canManage) return;
                                                 setImportingSkillId(skill.id);
                                                 try {
                                                     const response = await fileApi.importSkill(agentId, skill.id);