diff --git a/.trae/rules/rule.md b/.trae/rules/rule.md
index 1d820e5..6342d13 100644
--- a/.trae/rules/rule.md
+++ b/.trae/rules/rule.md
@@ -9,5 +9,6 @@ alwaysApply: true
 3. **代码修改** - 任何时候，当存在字段格式不对，变量名不对，表使用不对等，禁止做兼容修改，必须按唯一性修改。比如约定字段是string，正确：只能传string；错误：可以传int。 比如约定字段名是data，正确：只能传data；错误：可以传sourceData或者data。
 4. **语言** - 永远使用中文跟用户沟通，专有名词可以用英文。
 5. **文档** - 在用户没有明确要求先提供文档时，禁止创建文档。避免生产垃圾文件。用户明确要求提供文档时，才创建文档。
+6. **注释** - 你生成的代码，尽可能完善中文注释。注释的格式需要按照Go语言的注释规范。要描述清楚代码的功能，参数，返回值，异常等。
 
 
diff --git a/src/components/ExternalToolEditor.tsx b/src/components/ExternalToolEditor.tsx
index c72c12a..7d800c3 100644
--- a/src/components/ExternalToolEditor.tsx
+++ b/src/components/ExternalToolEditor.tsx
@@ -1,5 +1,6 @@
-import { CopyOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { CopyOutlined, DownOutlined, MinusCircleOutlined, PlusOutlined, RightOutlined } from '@ant-design/icons';
 import { App as AntApp, Button, Card, Form, Input, Modal, Select, Space } from 'antd';
+import { useEffect, useRef, useState } from 'react';
 import { AgentAPI, ExternalToolApi, ExternalToolApiRouting, ExternalToolPlugin, ExternalToolPluginPayload } from '../api';
 
 interface Props {
@@ -137,6 +138,43 @@ export default function ExternalToolEditor({ open, agentId, plugin, onClose, onS
   const { message } = AntApp.useApp();
   const [form] = Form.useForm<ToolPluginFormValue>();
   const isEditing = Boolean(plugin);
+  const apis = Form.useWatch('apis', form) || [];
+  const [expandedApiIndexes, setExpandedApiIndexes] = useState<number[]>([]);
+  const previousApiCountRef = useRef(0);
+
+  useEffect(() => {
+    if (!open) {
+      previousApiCountRef.current = 0;
+      setExpandedApiIndexes([]);
+      return;
+    }
+
+    const apiCount = apis.length;
+    if (apiCount < 1) {
+      previousApiCountRef.current = 0;
+      setExpandedApiIndexes([]);
+      return;
+    }
+
+    const previousApiCount = previousApiCountRef.current;
+    if (previousApiCount === 0) {
+      setExpandedApiIndexes(apiCount === 1 ? [0] : []);
+    } else if (previousApiCount === 1 && apiCount > 1) {
+      setExpandedApiIndexes([]);
+    } else if (apiCount === 1) {
+      setExpandedApiIndexes([0]);
+    } else {
+      setExpandedApiIndexes((current) => current.filter((index) => index < apiCount));
+    }
+
+    previousApiCountRef.current = apiCount;
+  }, [apis.length, open]);
+
+  const toggleApiCard = (index: number) => {
+    setExpandedApiIndexes((current) =>
+      current.includes(index) ? current.filter((item) => item !== index) : [...current, index],
+    );
+  };
 
   const handleSubmit = async () => {
     try {
@@ -264,149 +302,167 @@ export default function ExternalToolEditor({ open, agentId, plugin, onClose, onS
                 </Button>
               </div>
 
-              {fields.map((field, index) => (
-                <Card
-                  key={field.key}
-                  size="small"
-                  title={`API ${index + 1}`}
-                  className="agent-editor-tool-card"
-                  extra={
-                    <Space>
+              {fields.map((field, index) => {
+                const isExpanded = expandedApiIndexes.includes(index);
+
+                return (
+                  <Card
+                    key={field.key}
+                    size="small"
+                    title={
                       <Button
                         type="text"
                         size="small"
-                        icon={<CopyOutlined />}
-                        onClick={() => {
-                          const currentApis = form.getFieldValue('apis') || [];
-                          const apiToCopy = currentApis[field.name];
-                          if (apiToCopy) {
-                            add({
-                              ...apiToCopy,
-                              name: `${apiToCopy.name}-copy`,
-                            });
-                          }
-                        }}
+                        onClick={() => toggleApiCard(index)}
+                        style={{ padding: 0, fontWeight: 500 }}
+                        icon={isExpanded ? <DownOutlined /> : <RightOutlined />}
                       >
-                        复制
+                        {`API ${index + 1}`}
                       </Button>
-                      {fields.length > 1 ? (
-                        <Button type="text" danger size="small" icon={<MinusCircleOutlined />} onClick={() => remove(field.name)}>
-                          删除
+                    }
+                    className="agent-editor-tool-card"
+                    extra={
+                      <Space>
+                        <Button
+                          type="text"
+                          size="small"
+                          icon={<CopyOutlined />}
+                          onClick={() => {
+                            const currentApis = form.getFieldValue('apis') || [];
+                            const apiToCopy = currentApis[field.name];
+                            if (apiToCopy) {
+                              add({
+                                ...apiToCopy,
+                                name: `${apiToCopy.name}-copy`,
+                              });
+                            }
+                          }}
+                        >
+                          复制
                         </Button>
-                      ) : null}
-                    </Space>
-                  }
-                >
-                  <div className="agent-editor-tool-grid">
-                    <Form.Item
-                      label="name（工具名）"
-                      name={[field.name, 'name']}
-                      rules={[
-                        { required: true, message: '请输入工具名' },
-                        { pattern: /^[A-Za-z0-9_]+$/, message: '仅支持字母、数字和下划线' },
-                      ]}
-                    >
-                      <Input placeholder="query_hot_selling_products" />
-                    </Form.Item>
-                    <Form.Item label="method（调用方法）" name={[field.name, 'method']} rules={[{ required: true }]}>
-                      <Select options={['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].map((value) => ({ value, label: value }))} />
-                    </Form.Item>
-                  </div>
-                  <Form.Item
-                    label="description（描述）"
-                    name={[field.name, 'description']}
-                    rules={[{ validator: validateTrimmedText('请输入描述') }]}
+                        {fields.length > 1 ? (
+                          <Button type="text" danger size="small" icon={<MinusCircleOutlined />} onClick={() => remove(field.name)}>
+                            删除
+                          </Button>
+                        ) : null}
+                      </Space>
+                    }
                   >
-                    <Input.TextArea rows={2} placeholder="描述调用时机和工具能力" />
-                  </Form.Item>
-                  <Form.Item
-                    label="path（API 地址）"
-                    name={[field.name, 'path']}
-                    rules={[{ validator: validateTrimmedText('请输入 API 地址') }]}
-                  >
-                    <Input placeholder="/v1/products/hot-selling" />
-                  </Form.Item>
-                  <div className="agent-editor-tool-grid">
-                    <Form.Item label="headers（请求头 JSON 或对象）" name={[field.name, 'headers']}>
-                      <Input.TextArea rows={7} className="agent-editor-code-input" placeholder={'{\n  "X-Custom-Source": "aura-agent"\n}'} />
-                    </Form.Item>
-                    <Form.Item
-                      label="parametersSchema（依赖参数 JSON 或对象）"
-                      name={[field.name, 'parametersSchema']}
-                      rules={[{ required: true, message: '请输入依赖参数 Schema' }]}
-                    >
-                      <Input.TextArea rows={7} className="agent-editor-code-input" />
-                    </Form.Item>
-                  </div>
-                  <Card size="small" title="routing（路由规则）">
-                    <Form.Item label="summary" name={[field.name, 'routing', 'summary']}>
-                      <Input placeholder="查询商品维度数据" />
-                    </Form.Item>
-                    <Form.List name={[field.name, 'routing', 'useWhen']} rules={[{ validator: validateRoutingList('至少添加一条 useWhen', 1) }]}>
-                      {(routingFields, { add: addUseWhen, remove: removeUseWhen }, { errors }) => (
-                        <Space direction="vertical" size={8} className="agent-editor-tool-list">
-                          <div className="agent-editor-tool-list-header">
-                            <div>
-                              <strong>useWhen</strong>
-                              <div className="agent-editor-tool-help">至少一项，描述什么情况下应该调用这个 API。</div>
-                            </div>
-                            <Button type="dashed" icon={<PlusOutlined />} onClick={() => addUseWhen('')}>
-                              添加条件
-                            </Button>
-                          </div>
-                          {routingFields.map((routingField) => (
-                            <Space key={routingField.key} align="start" className="agent-editor-tool-list">
-                              <Form.Item
-                                name={routingField.name}
-                                className="flex-1 mb-0"
-                                rules={[{ validator: validateTrimmedText('条件不能为空') }]}
-                              >
-                                <Input placeholder="用户明确要求商品数据" style={{ width: 600 }} />
-                              </Form.Item>
-                              <Button
-                                danger
-                                type="text"
-                                icon={<MinusCircleOutlined />}
-                                onClick={() => removeUseWhen(routingField.name)}
-                                disabled={routingFields.length <= 1}
-                              />
-                            </Space>
-                          ))}
-                          <Form.ErrorList errors={errors} />
-                        </Space>
-                      )}
-                    </Form.List>
-                    <Form.List name={[field.name, 'routing', 'doNotUseWhen']} rules={[{ validator: validateRoutingList('列表项不能为空') }]}>
-                      {(routingFields, { add: addDoNotUseWhen, remove: removeDoNotUseWhen }, { errors }) => (
-                        <Space direction="vertical" size={8} className="agent-editor-tool-list" style={{ marginTop: 16 }}>
-                          <div className="agent-editor-tool-list-header">
-                            <div>
-                              <strong>doNotUseWhen</strong>
-                              <div className="agent-editor-tool-help">可为空，描述什么情况下不要调用这个 API。</div>
-                            </div>
-                            <Button type="dashed" icon={<PlusOutlined />} onClick={() => addDoNotUseWhen('')}>
-                              添加条件
-                            </Button>
-                          </div>
-                          {routingFields.map((routingField) => (
-                            <Space key={routingField.key} align="start" className="agent-editor-tool-list">
-                              <Form.Item
-                                name={routingField.name}
-                                className="flex-1 mb-0"
-                                rules={[{ validator: validateTrimmedText('条件不能为空') }]}
-                              >
-                                <Input placeholder="当前问题只需要其他维度数据"  style={{ width: 600 }} />
-                              </Form.Item>
-                              <Button danger type="text" icon={<MinusCircleOutlined />} onClick={() => removeDoNotUseWhen(routingField.name)} />
-                            </Space>
-                          ))}
-                          <Form.ErrorList errors={errors} />
-                        </Space>
-                      )}
-                    </Form.List>
+                    {isExpanded ? (
+                      <>
+                        <div className="agent-editor-tool-grid">
+                          <Form.Item
+                            label="name（工具名）"
+                            name={[field.name, 'name']}
+                            rules={[
+                              { required: true, message: '请输入工具名' },
+                              { pattern: /^[A-Za-z0-9_]+$/, message: '仅支持字母、数字和下划线' },
+                            ]}
+                          >
+                            <Input placeholder="query_hot_selling_products" />
+                          </Form.Item>
+                          <Form.Item label="method（调用方法）" name={[field.name, 'method']} rules={[{ required: true }]}>
+                            <Select options={['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].map((value) => ({ value, label: value }))} />
+                          </Form.Item>
+                        </div>
+                        <Form.Item
+                          label="description（描述）"
+                          name={[field.name, 'description']}
+                          rules={[{ validator: validateTrimmedText('请输入描述') }]}
+                        >
+                          <Input.TextArea rows={2} placeholder="描述调用时机和工具能力" />
+                        </Form.Item>
+                        <Form.Item
+                          label="path（API 地址）"
+                          name={[field.name, 'path']}
+                          rules={[{ validator: validateTrimmedText('请输入 API 地址') }]}
+                        >
+                          <Input placeholder="/v1/products/hot-selling" />
+                        </Form.Item>
+                        <div className="agent-editor-tool-grid">
+                          <Form.Item label="headers（请求头 JSON 或对象）" name={[field.name, 'headers']}>
+                            <Input.TextArea rows={7} className="agent-editor-code-input" placeholder={'{\n  "X-Custom-Source": "aura-agent"\n}'} />
+                          </Form.Item>
+                          <Form.Item
+                            label="parametersSchema（依赖参数 JSON 或对象）"
+                            name={[field.name, 'parametersSchema']}
+                            rules={[{ required: true, message: '请输入依赖参数 Schema' }]}
+                          >
+                            <Input.TextArea rows={7} className="agent-editor-code-input" />
+                          </Form.Item>
+                        </div>
+                        <Card size="small" title="routing（路由规则）">
+                          <Form.Item label="summary" name={[field.name, 'routing', 'summary']}>
+                            <Input placeholder="查询商品维度数据" />
+                          </Form.Item>
+                          <Form.List name={[field.name, 'routing', 'useWhen']} rules={[{ validator: validateRoutingList('至少添加一条 useWhen', 1) }]}>
+                            {(routingFields, { add: addUseWhen, remove: removeUseWhen }, { errors }) => (
+                              <Space direction="vertical" size={8} className="agent-editor-tool-list">
+                                <div className="agent-editor-tool-list-header">
+                                  <div>
+                                    <strong>useWhen</strong>
+                                    <div className="agent-editor-tool-help">至少一项，描述什么情况下应该调用这个 API。</div>
+                                  </div>
+                                  <Button type="dashed" icon={<PlusOutlined />} onClick={() => addUseWhen('')}>
+                                    添加条件
+                                  </Button>
+                                </div>
+                                {routingFields.map((routingField) => (
+                                  <Space key={routingField.key} align="start" className="agent-editor-tool-list">
+                                    <Form.Item
+                                      name={routingField.name}
+                                      className="flex-1 mb-0"
+                                      rules={[{ validator: validateTrimmedText('条件不能为空') }]}
+                                    >
+                                      <Input placeholder="用户明确要求商品数据" style={{ width: 600 }} />
+                                    </Form.Item>
+                                    <Button
+                                      danger
+                                      type="text"
+                                      icon={<MinusCircleOutlined />}
+                                      onClick={() => removeUseWhen(routingField.name)}
+                                      disabled={routingFields.length <= 1}
+                                    />
+                                  </Space>
+                                ))}
+                                <Form.ErrorList errors={errors} />
+                              </Space>
+                            )}
+                          </Form.List>
+                          <Form.List name={[field.name, 'routing', 'doNotUseWhen']} rules={[{ validator: validateRoutingList('列表项不能为空') }]}>
+                            {(routingFields, { add: addDoNotUseWhen, remove: removeDoNotUseWhen }, { errors }) => (
+                              <Space direction="vertical" size={8} className="agent-editor-tool-list" style={{ marginTop: 16 }}>
+                                <div className="agent-editor-tool-list-header">
+                                  <div>
+                                    <strong>doNotUseWhen</strong>
+                                    <div className="agent-editor-tool-help">可为空，描述什么情况下不要调用这个 API。</div>
+                                  </div>
+                                  <Button type="dashed" icon={<PlusOutlined />} onClick={() => addDoNotUseWhen('')}>
+                                    添加条件
+                                  </Button>
+                                </div>
+                                {routingFields.map((routingField) => (
+                                  <Space key={routingField.key} align="start" className="agent-editor-tool-list">
+                                    <Form.Item
+                                      name={routingField.name}
+                                      className="flex-1 mb-0"
+                                      rules={[{ validator: validateTrimmedText('条件不能为空') }]}
+                                    >
+                                      <Input placeholder="当前问题只需要其他维度数据" style={{ width: 600 }} />
+                                    </Form.Item>
+                                    <Button danger type="text" icon={<MinusCircleOutlined />} onClick={() => removeDoNotUseWhen(routingField.name)} />
+                                  </Space>
+                                ))}
+                                <Form.ErrorList errors={errors} />
+                              </Space>
+                            )}
+                          </Form.List>
+                        </Card>
+                      </>
+                    ) : null}
                   </Card>
-                </Card>
-              ))}
+                );
+              })}
             </Space>
           )}
         </Form.List>