♻️ Refactor: Optimize agent page layout & refactor agent generate page#3020
Conversation
This reverts commit d0aad14.
There was a problem hiding this comment.
Pull request overview
This PR refactors the Agents UI to a header-driven, two-column layout and extracts the agent prompt-generation flow into a dedicated hook with local cache restore. It also extends agent detail APIs/types to include per-agent edit permission, skills, and external A2A sub-agent relations to support the refactor.
Changes:
- Refactored the Agents page layout (new fixed header selector + version panel) and migrated tabs to Radix UI tabs.
- Extracted agent prompt generation into
useAgentGeneration, added local cache restore in the store, and centralized read-only handling. - Extended agent detail payloads/types to include
permission,skills, andexternal_sub_agent_id_list(backend + frontend).
Reviewed changes
Copilot reviewed 33 out of 33 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/types/auth.ts | Adds getAccessibleGroupIds to the authz context type. |
| frontend/types/agentConfig.ts | Introduces AgentConfigUpdate and adds skills / external_sub_agent_id_list to Agent. |
| frontend/styles/globals.css | Adjusts tool/skill tab widths and forces dropdown title content full-width. |
| frontend/stores/agentConfigStore.ts | Refactors dirty checking, adds generation state + cache restore, and consolidates update APIs. |
| frontend/services/agentConfigService.ts | Maps permission from agent detail response. |
| frontend/public/locales/zh/common.json | Updates a few strings and adds “generation completed for other agent” message. |
| frontend/public/locales/en/common.json | Updates a few strings and adds “generation completed for other agent” message. |
| frontend/package.json | Adds @radix-ui/react-tabs and reorders a couple dependencies. |
| frontend/lib/agentGenerationCache.ts | Simplifies generation cache structure and status setter. |
| frontend/hooks/useConfig.ts | Exposes defaultLlmModelConfig from app config. |
| frontend/hooks/group/useGroupList.ts | Returns allGroupIds and adds useGroupDetails filtering helper. |
| frontend/hooks/auth/useAuthorization.ts | Fetches tenant groups and exposes getAccessibleGroupIds. |
| frontend/hooks/agent/useAgentGeneration.ts | New: encapsulates prompt generation + streaming cache/update flow. |
| frontend/components/ui/tabs.tsx | New: Radix Tabs wrapper components. |
| frontend/components/ui/card.tsx | Removed: custom Card component (migrated to AntD Card). |
| frontend/components/agent/AgentImportWizard.tsx | Raises modal zIndex to avoid stacking issues. |
| frontend/components/agent/AgentCallRelationshipModal.tsx | Raises modal zIndex to avoid stacking issues. |
| frontend/app/[locale]/space/components/AgentCard.tsx | Fixes import path for AgentCallRelationshipModal. |
| frontend/app/[locale]/page.tsx | Migrates to AntD Card and adjusts card body styling. |
| frontend/app/[locale]/models/components/model/ModelAddDialog.tsx | Removes unused isRerankModel. |
| frontend/app/[locale]/agents/page.tsx | Replaces 3-column layout with Layout + new AgentSelectorHeader + version side panel. |
| frontend/app/[locale]/agents/components/AgentSelectorHeader.tsx | New: header agent selector + quick actions (copy/export/delete/import/version/manage/A2A). |
| frontend/app/[locale]/agents/components/agentManage/AgentList.tsx | Uses unified agent detail response (no manual permission merge). |
| frontend/app/[locale]/agents/components/agentManage/AgentCallRelationshipModal.tsx | Removed: old modal implementation (centralized component used instead). |
| frontend/app/[locale]/agents/components/AgentInfoComp.tsx | Removes version-manage props; reads isGenerating from store and simplifies header. |
| frontend/app/[locale]/agents/components/agentInfo/AgentGenerateDetail.tsx | Major refactor: Radix tabs, group filtering via auth hook, generation via useAgentGeneration, streaming display. |
| frontend/app/[locale]/agents/components/AgentConfigComp.tsx | Adds Radix tool/skill tabs and uses store isReadOnly. |
| frontend/app/[locale]/agents/components/agentConfig/ToolManagement.tsx | Adds isReadOnly prop and adjusts widths. |
| frontend/app/[locale]/agents/components/agentConfig/SkillManagement.tsx | Adds isReadOnly prop and adjusts widths. |
| frontend/app/[locale]/agents/components/agentConfig/CollaborativeAgent.tsx | Syncs external A2A relations into store external sub-agent IDs. |
| frontend/app/[locale]/agents/AgentVersionCard.tsx | Uses unified agent detail response (no manual permission merge). |
| backend/services/agent_service.py | Adds permission calculation, skills, and external sub-agent IDs to agent detail response. |
| backend/apps/agent_app.py | Passes user_id into agent detail impl so permission can be computed. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
# Conflicts: # frontend/app/[locale]/agents/components/agentConfig/SkillManagement.tsx # frontend/app/[locale]/agents/components/agentInfo/AgentGenerateDetail.tsx # frontend/types/agentConfig.ts # test/backend/app/test_agent_app.py
| else: | ||
| ingroup_permission = agent_info.get("ingroup_permission") | ||
| agent_info["permission"] = ingroup_permission if ingroup_permission is not None else PERMISSION_READ | ||
| except Exception as e: |
There was a problem hiding this comment.
[代码规范] except Exception: 过于宽泛,建议捕获更具体的异常类型,避免掩盖潜在错误。
| version_no=version_no | ||
| ) | ||
| agent_info["skills"] = instances | ||
| except Exception as e: |
There was a problem hiding this comment.
[代码规范] except Exception: 过于宽泛,建议捕获更具体的异常类型,避免掩盖潜在错误。
| agent_info["external_sub_agent_id_list"] = [ | ||
| ea["external_agent_id"] for ea in external_agents | ||
| ] | ||
| except Exception as e: |
There was a problem hiding this comment.
[代码规范] except Exception: 过于宽泛,建议捕获更具体的异常类型,避免掩盖潜在错误。
No description provided.