fix: fix frontend graph edit

[xinquiry]

变更内容

• 新功能
• 修复 Bug
• 增强重构
• 其他（请描述）

简要描述本次 PR 的主要变更内容。

相关 Issue

请关联相关 Issue（如有）：#编号

检查清单

默认已勾选，如不满足，请检查。

• 已在本地测试通过
• 已补充/更新相关文档
• 已添加测试用例
• 代码风格已经过 pre-commit 钩子检查

其他说明

如有特殊说明或注意事项，请补充。

Summary by Sourcery

处理缺失的图配置数据，并确保在切换代理时代理编辑弹窗能够正确重置。

Bug 修复：

• 当图配置或其节点/边缺失时，返回默认节点和空边。
• 在编辑不同的代理时强制重新挂载代理编辑弹窗，以避免使用过期状态。

Original summary in English

Summary by Sourcery

Handle missing graph configuration data and ensure the agent edit modal resets correctly when switching agents.

Bug Fixes:

• Return default nodes and empty edges when graph configuration or its nodes/edges are missing.
• Force re-mount of the agent edit modal when editing a different agent to avoid stale state.

[sourcery-ai]

审阅者指南（在小型 PR 中折叠显示）

审阅者指南

调整在配置缺少结构时的图编辑器配置处理方式，并通过使用与正在编辑的 agent 绑定的 key 来稳定其 React 标识，从而修复 agent 编辑模态框的渲染问题。

使用基于 agent 的 key 重新挂载 EditAgentModal 的时序图

sequenceDiagram
  actor User
  participant XyzenAgent
  participant EditAgentModal
  participant ReactReconciler

  User->>XyzenAgent: Select agent A and click edit
  XyzenAgent->>XyzenAgent: Set editingAgent to agent A
  XyzenAgent->>EditAgentModal: Render with key A_id and agent A
  ReactReconciler-->>EditAgentModal: Mount modal component
  User->>XyzenAgent: Select agent B and click edit
  XyzenAgent->>XyzenAgent: Update editingAgent to agent B
  XyzenAgent->>EditAgentModal: Render with key B_id and agent B
  ReactReconciler-->>EditAgentModal: Unmount old instance
  ReactReconciler-->>EditAgentModal: Mount new instance with agent B

Loading

更新后的 graphConfigToFlow 在配置结构缺失时的流程图

flowchart TD
  A[graphConfigToFlow called] --> B{config exists?}
  B -- No --> G[Return default nodes and empty edge list]
  B -- Yes --> C{config.nodes exists?}
  C -- No --> G
  C -- Yes --> D{config.edges exists?}
  D -- No --> G
  D -- Yes --> E[Transform config.nodes to AgentNode list]
  E --> F[Transform config.edges to AgentEdge list]
  F --> H[Return transformed nodes and edges]

Loading

文件级变更

变更	详情	文件
增强图配置到流程转换逻辑，以应对部分未定义的配置。	更新 graphConfigToFlow，将为 null 的配置，或缺少 nodes 或 edges 的配置视为空配置，并使用默认节点和无边初始化	web/src/components/editors/AgentGraphEditor/useGraphConfig.ts
在在 agent 间切换或创建新 agent 时稳定 EditAgentModal 的渲染行为。	为 EditAgentModal 添加基于当前正在编辑的 agent id 的 React key，在创建新 agent 时回退为 'new' key	web/src/components/layouts/XyzenAgent.tsx

---

提示与命令

与 Sourcery 交互

• 触发新的审阅： 在 pull request 中评论 @sourcery-ai review。
• 继续讨论： 直接回复 Sourcery 的审阅评论。
• 从审阅评论生成 GitHub issue： 在审阅评论下回复，请 Sourcery 根据该评论创建一个 issue。你也可以在审阅评论中回复 @sourcery-ai issue 来从该评论创建 issue。
• 生成 pull request 标题： 在 pull request 标题任意位置写入 @sourcery-ai，即可随时生成标题。你也可以在 pull request 中评论 @sourcery-ai title 来在任意时间（重新）生成标题。
• 生成 pull request 摘要： 在 pull request 正文的任意位置写入 @sourcery-ai summary，即可在你希望的位置生成 PR 摘要。你也可以在 pull request 中评论 @sourcery-ai summary 来在任意时间（重新）生成摘要。
• 生成审阅者指南： 在 pull request 中评论 @sourcery-ai guide，即可在任意时间（重新）生成审阅者指南。
• 批量解决所有 Sourcery 评论： 在 pull request 中评论 @sourcery-ai resolve，即可标记解决所有 Sourcery 评论。如果你已经处理完所有评论且不想再看到它们，这会非常有用。
• 批量撤销所有 Sourcery 审阅： 在 pull request 中评论 @sourcery-ai dismiss，即可撤销所有现有的 Sourcery 审阅。如果你想从头开始新的审阅，这尤其有用——别忘了再评论 @sourcery-ai review 以触发新的审阅！

自定义你的体验

访问你的 控制面板 以：

• 启用或禁用诸如 Sourcery 生成的 pull request 摘要、审阅者指南等审阅功能。
• 更改审阅语言。
• 添加、移除或编辑自定义审阅指令。
• 调整其他审阅设置。

获取帮助

• 联系我们的支持团队 以获取帮助或提交反馈。
• 访问我们的文档 以查看详细指南和信息。
• 通过关注我们的 X/Twitter、LinkedIn 或 GitHub 与 Sourcery 团队保持联系。

Original review guide in English

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Adjusts graph editor configuration handling when config is missing structure and fixes agent edit modal rendering by stabilizing its React identity via a key tied to the editing agent.

Sequence diagram for EditAgentModal re-mount using agent-based key

sequenceDiagram
  actor User
  participant XyzenAgent
  participant EditAgentModal
  participant ReactReconciler

  User->>XyzenAgent: Select agent A and click edit
  XyzenAgent->>XyzenAgent: Set editingAgent to agent A
  XyzenAgent->>EditAgentModal: Render with key A_id and agent A
  ReactReconciler-->>EditAgentModal: Mount modal component
  User->>XyzenAgent: Select agent B and click edit
  XyzenAgent->>XyzenAgent: Update editingAgent to agent B
  XyzenAgent->>EditAgentModal: Render with key B_id and agent B
  ReactReconciler-->>EditAgentModal: Unmount old instance
  ReactReconciler-->>EditAgentModal: Mount new instance with agent B

Loading

Flow diagram for updated graphConfigToFlow handling of missing config structure

flowchart TD
  A[graphConfigToFlow called] --> B{config exists?}
  B -- No --> G[Return default nodes and empty edge list]
  B -- Yes --> C{config.nodes exists?}
  C -- No --> G
  C -- Yes --> D{config.edges exists?}
  D -- No --> G
  D -- Yes --> E[Transform config.nodes to AgentNode list]
  E --> F[Transform config.edges to AgentEdge list]
  F --> H[Return transformed nodes and edges]

Loading

File-Level Changes

Change	Details	Files
Harden graph configuration-to-flow conversion against partially undefined configs.	Update graphConfigToFlow to treat null configs or configs lacking nodes or edges as empty and initialize with default nodes and no edges	web/src/components/editors/AgentGraphEditor/useGraphConfig.ts
Stabilize EditAgentModal rendering when switching between agents or creating a new one.	Add a React key to EditAgentModal based on the current editing agent id, falling back to a 'new' key when creating a new agent	web/src/components/layouts/XyzenAgent.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - 我在这里给出了一些整体性的反馈：

• 在 graphConfigToFlow 中，考虑收紧 GraphConfig 的类型，或者引入一个小的类型守卫（type guard），以保证 nodes 和 edges 一定存在，这样就可以避免多处运行时的 null/undefined 检查。
• 在为 EditAgentModal 设置 key 时，建议使用空值合并运算符（editingAgent?.id ?? 'new'）而不是 ||，以避免将合法但为 falsy 的 ID（例如 0 或空字符串）当作 'new' 这个 key。

给 AI Agents 的提示词

Please address the comments from this code review:

## Overall Comments
- In `graphConfigToFlow`, consider tightening the `GraphConfig` type or introducing a small type guard so that `nodes` and `edges` are guaranteed to be present, avoiding the need for multiple runtime `null`/`undefined` checks.
- When setting the `key` on `EditAgentModal`, prefer the nullish coalescing operator (`editingAgent?.id ?? 'new'`) instead of `||` to avoid treating valid falsy IDs (e.g., `0` or empty string) as the `'new'` key.

---

Sourcery 对开源项目免费——如果你觉得我们的代码评审有帮助，欢迎分享给更多人 ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{帮我变得更有用！请对每条评论点一下 👍 或 👎，我会根据你的反馈改进后续的评审质量。}

Original comment in English

Hey - I've left some high level feedback:

• In graphConfigToFlow, consider tightening the GraphConfig type or introducing a small type guard so that nodes and edges are guaranteed to be present, avoiding the need for multiple runtime null/undefined checks.
• When setting the key on EditAgentModal, prefer the nullish coalescing operator (editingAgent?.id ?? 'new') instead of || to avoid treating valid falsy IDs (e.g., 0 or empty string) as the 'new' key.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In `graphConfigToFlow`, consider tightening the `GraphConfig` type or introducing a small type guard so that `nodes` and `edges` are guaranteed to be present, avoiding the need for multiple runtime `null`/`undefined` checks.
- When setting the `key` on `EditAgentModal`, prefer the nullish coalescing operator (`editingAgent?.id ?? 'new'`) instead of `||` to avoid treating valid falsy IDs (e.g., `0` or empty string) as the `'new'` key.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}