feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/agent-ide/bot-plugin/entry/src/components/check_failed/index.module.less

@@ -0,0 +1,115 @@
+/* stylelint-disable declaration-no-important */
+.tool-wrap {
+  min-height: 100%;
+  padding-bottom: 20px;
+  background-color: #f7f7fa;
+
+  :global {
+    .semi-table-row-head {
+      font-size: 12px;
+      color: var(
+        --light-usage-text-color-text-1,
+        rgb(28 29 35 / 80%)
+      ) !important;
+    }
+
+    .semi-steps-item-title-text {
+      font-size: 14px;
+    }
+
+    .semi-table-row.semi-table-row-expanded:last-child {
+      .semi-table-row-cell {
+        border-bottom: 1px solid transparent;
+      }
+    }
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    padding: 16px 24px 12px;
+    border-bottom: 1px solid rgb(29 28 35 / 8%);
+
+    .simple-title {
+      display: flex;
+      align-items: center;
+      height: 56px;
+
+      .title {
+        flex: 1;
+
+        margin-left: 12px;
+
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 56px;
+        color: #1d1c23;
+      }
+    }
+
+    .preview-header {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+
+      .simple-title .title {
+        margin-left: 0;
+      }
+    }
+
+    .breadcrumb {
+      margin-bottom: 24px;
+    }
+  }
+
+  .content {
+    padding: 36px 0 30px;
+  }
+
+  .modal-steps {
+    width: 1008px;
+    margin: 0 auto;
+  }
+
+  .form-wrap {
+    margin: 42px auto 0;
+
+    :global {
+      .semi-form-vertical .semi-form-field:last-child {
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  .tool-footer {
+    width: calc(100% - 200px);
+    min-width: 1008px;
+    margin: 0 auto;
+    text-align: right;
+
+    &.step-one {
+      max-width: 1008px;
+      margin: 0 auto;
+    }
+
+    .error-msg {
+      padding: 8px 24px;
+
+      font-size: 14px;
+      line-height: 16px;
+      color: #f93920;
+      text-align: left;
+
+      .link {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 16px;
+        color: #4d53e8;
+      }
+    }
+
+    .footer-content {
+      padding-top: 24px;
+    }
+  }
+}

frontend/packages/agent-ide/bot-plugin/entry/src/components/check_failed/index.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { I18n } from '@coze-arch/i18n';
+import { STARTNODE } from '@coze-agent-ide/bot-plugin-tools/pluginModal/config';
+import { PluginDocs } from '@coze-agent-ide/bot-plugin-export/pluginDocs';
+
+import s from './index.module.less';
+
+// @ts-expect-error -- linter-disable-autofix
+export const SecurityCheckFailed = ({ step }) => (
+  <div className={s['error-msg']}>
+    {step !== STARTNODE
+      ? I18n.t('plugin_parameter_create_modal_safe_error')
+      : I18n.t('plugin_tool_create_modal_safe_error')}
+    <PluginDocs />
+  </div>
+);

frontend/packages/agent-ide/bot-plugin/entry/src/components/code-snippet/index.module.less

@@ -0,0 +1,21 @@
+.editor-container {
+  position: relative;
+  height: 100%;
+}
+
+.editor {
+  height: 100%;
+  padding: 0;
+
+  background-color: white;
+  border: 1px solid #1D1C231F;
+  border-radius: 8px;
+
+
+  :global {
+    .monaco-editor .scroll-decoration {
+      box-shadow: unset;
+    }
+
+  }
+}

frontend/packages/agent-ide/bot-plugin/entry/src/components/code-snippet/index.tsx

@@ -0,0 +1,195 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useState, useEffect } from 'react';
+
+import copy from 'copy-to-clipboard';
+import classNames from 'classnames';
+import { userStoreService } from '@coze-studio/user-store';
+import { I18n } from '@coze-arch/i18n';
+import { EVENT_NAMES, sendTeaEvent } from '@coze-arch/bot-tea';
+import { useSpaceStore } from '@coze-arch/bot-studio-store';
+import {
+  UIButton,
+  UIModal,
+  Space,
+  UIToast,
+  RadioGroup,
+} from '@coze-arch/bot-semi';
+import { Editor as MonacoEditor } from '@coze-arch/bot-monaco-editor';
+import { ProgramLang } from '@coze-arch/bot-api/plugin_develop';
+import {
+  SpaceType,
+  type PluginAPIInfo,
+} from '@coze-arch/bot-api/developer_api';
+import { PluginDevelopApi } from '@coze-arch/bot-api';
+
+import { getEnv } from '../../util';
+
+import styles from './index.module.less';
+
+const LANG_OPTIONS = [
+  { label: 'cURL', value: ProgramLang.Curl },
+  { label: 'Wget', value: ProgramLang.Wget },
+  { label: 'Node.js', value: ProgramLang.NodeJS },
+  { label: 'Python', value: ProgramLang.Python },
+  { label: 'Golang', value: ProgramLang.Golang },
+];
+
+function getReportLang(lang: ProgramLang) {
+  switch (lang) {
+    case ProgramLang.Curl:
+      return 'curl';
+    case ProgramLang.Wget:
+      return 'wget';
+    case ProgramLang.NodeJS:
+      return 'javascript';
+    case ProgramLang.Python:
+      return 'python';
+    case ProgramLang.Golang:
+      return 'golang';
+    default:
+      return '';
+  }
+}
+function getEditorMode(lang: ProgramLang) {
+  switch (lang) {
+    case ProgramLang.Curl:
+      return 'javascript';
+    case ProgramLang.Wget:
+      return 'javascript';
+    case ProgramLang.NodeJS:
+      return 'javascript';
+    case ProgramLang.Python:
+      return 'python';
+    case ProgramLang.Golang:
+      return 'go';
+    default:
+      return 'javascript';
+  }
+}
+
+interface CodeSnippetModalProps {
+  visible: boolean;
+  onCancel?: () => void;
+  pluginAPIInfo?: PluginAPIInfo;
+}
+
+export const CodeSnippetModal: React.FC<CodeSnippetModalProps> = props => {
+  const { onCancel, visible, pluginAPIInfo } = props;
+  const [lang, setLang] = useState<ProgramLang>(ProgramLang.Curl);
+  const [content, setContent] = useState<string>('');
+
+  const { id: spaceId, space_type } = useSpaceStore(s => s.space);
+
+  const isPersonal = space_type === SpaceType.Personal;
+
+  const userInfo = userStoreService.useUserInfo();
+
+  useEffect(() => {
+    setLang(ProgramLang.Curl);
+    setContent('');
+  }, [visible]);
+
+  useEffect(() => {
+    if (pluginAPIInfo) {
+      const fetchCode = async () => {
+        setContent('');
+        const res = await PluginDevelopApi.PluginAPI2Code({
+          plugin_id: pluginAPIInfo.plugin_id || '',
+          api_id: pluginAPIInfo.api_id || '',
+          space_id: spaceId || '',
+          dev_id: userInfo?.user_id_str || '',
+          program_lang: lang,
+        });
+        setContent(res?.program_code || '');
+      };
+      fetchCode();
+    }
+  }, [lang, pluginAPIInfo]);
+
+  const handleCopy = () => {
+    const resp = copy(content);
+    const basicParams = {
+      environment: getEnv(),
+      workspace_id: spaceId || '',
+      workspace_type: isPersonal ? 'personal_workspace' : 'team_workspace',
+      tool_id: pluginAPIInfo?.api_id || '',
+      code_type: getReportLang(lang) || '',
+      status: 1,
+    };
+    if (resp) {
+      UIToast.success({ content: I18n.t('copy_success') });
+      sendTeaEvent(EVENT_NAMES.code_snippet_front, {
+        ...basicParams,
+        status: 0,
+      });
+    } else {
+      UIToast.warning({ content: I18n.t('copy_failed') });
+      sendTeaEvent(EVENT_NAMES.code_snippet_front, {
+        ...basicParams,
+        status: 1,
+        error_message: 'copy_failed',
+      });
+    }
+  };
+
+  return (
+    <UIModal
+      type="base-composition"
+      title={I18n.t('code_snippet')}
+      visible={visible}
+      onCancel={onCancel}
+      footer={
+        <Space>
+          <UIButton theme="solid" type="primary" onClick={handleCopy}>
+            {I18n.t('copy')}
+          </UIButton>
+        </Space>
+      }
+      maskClosable={false}
+    >
+      <div className="h-[100%] flex flex-col min-h-0">
+        <div>
+          <RadioGroup
+            type="card"
+            options={LANG_OPTIONS}
+            defaultValue={lang}
+            className={'mb-[16px]'}
+            value={lang}
+            onChange={e => setLang(e.target.value)}
+          />
+        </div>
+        <div
+          className={classNames(styles['editor-container'], 'flex-1 min-h-0')}
+        >
+          <MonacoEditor
+            className={styles.editor}
+            options={{
+              readOnly: true,
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+            }}
+            language={getEditorMode(lang)}
+            theme={'tomorrow'}
+            width="100%"
+            value={content}
+          />
+        </div>
+      </div>
+    </UIModal>
+  );
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/index.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export {
+  CreateCodePluginModal,
+  CreateFormPluginModal,
+} from '@coze-agent-ide/bot-plugin-export/botEdit';
+export { ImportPluginModal } from '@coze-agent-ide/bot-plugin-export/fileImport';
+export { CodeSnippetModal } from './code-snippet';
+export { PluginDocs } from '@coze-agent-ide/bot-plugin-export/pluginDocs';
+export { Editor } from '@coze-agent-ide/bot-plugin-export/editor';
+export { usePluginApisModal } from './plugin-apis/use-plugin-apis-modal';

frontend/packages/agent-ide/bot-plugin/entry/src/components/oauth-action/index.tsx

@@ -0,0 +1,147 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/* eslint-disable max-len */
+import { type FC } from 'react';
+
+import classNames from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import {
+  IconCozArrowRight,
+  IconCozCheckMarkFill,
+} from '@coze-arch/coze-design/icons';
+import { Space, Typography } from '@coze-arch/coze-design';
+import { Modal } from '@coze-arch/bot-semi';
+
+import { useAuthForApiTool } from '@/hooks/auth/use-auth-for-api-tool';
+
+interface IOauthProps {
+  className?: string;
+}
+
+const doConfirmOAuth = (doOauth: () => void) => {
+  Modal.info({
+    title: I18n.t('plugin_tool_config_auth_modal_auth_required'),
+    content: I18n.t('plugin_tool_config_auth_modal_auth_required_desc'),
+    onOk: doOauth,
+    okText: I18n.t('Confirm'),
+    cancelText: I18n.t('Cancel'),
+  });
+};
+
+const doConfirmCancelOauth = (doCancelOauth: () => void) => {
+  Modal.warning({
+    title: I18n.t('plugin_tool_config_auth_modal_cancel_confirmation'),
+    content: I18n.t('plugin_tool_config_auth_modal_cancel_confirmation_desc'),
+    onOk: doCancelOauth,
+    okText: I18n.t('Confirm'),
+    cancelText: I18n.t('Cancel'),
+  });
+};
+
+const OauthHeaderAction = () => {
+  const {
+    needAuth,
+    isHasAuth,
+    doCancelOauth,
+    isUpdateLoading,
+    doOauth,
+    canEdit,
+  } = useAuthForApiTool();
+
+  if (!canEdit) {
+    return <></>;
+  }
+
+  const isEnableCancelAuthorization = needAuth && isHasAuth;
+  const isEnableAuthorization = needAuth && !isHasAuth;
+
+  return (
+    <Space spacing={8}>
+      {needAuth ? (
+        <span className="rounded-[4px] bg-[#EDD5FC] px-[8px] py-[2px] text-[#6C2CC6] text-[12px] font-medium leading-[16px]">
+          {I18n.t('plugin_mark_created_by_existing_services')}
+        </span>
+      ) : null}
+      {needAuth ? (
+        <Typography.Text
+          disabled={isUpdateLoading}
+          onClick={() => {
+            if (isEnableAuthorization) {
+              doConfirmOAuth(doOauth);
+              return;
+            }
+            if (isEnableCancelAuthorization) {
+              doConfirmCancelOauth(doCancelOauth);
+            }
+          }}
+          icon={isHasAuth ? <IconCozCheckMarkFill /> : undefined}
+          className={classNames(
+            'overflow-hidden text-[#4C54F0] overflow-ellipsis text-[14px] font-normal leading-[20px]',
+            (isEnableAuthorization || isEnableCancelAuthorization) &&
+              'cursor-pointer',
+          )}
+        >
+          {isHasAuth
+            ? I18n.t('plugin_tool_config_status_authorized')
+            : I18n.t('plugin_tool_config_status_unauthorized')}
+        </Typography.Text>
+      ) : null}
+      {!isHasAuth && needAuth ? (
+        <IconCozArrowRight className="w-[12px] h-[12px] ml-[-6px]" />
+      ) : null}
+    </Space>
+  );
+};
+
+const OauthButtonAction: FC<IOauthProps> = ({ className }) => {
+  const {
+    needAuth,
+    isHasAuth,
+    doCancelOauth,
+    isUpdateLoading,
+    doOauth,
+    canEdit,
+  } = useAuthForApiTool();
+
+  if (!canEdit) {
+    return <></>;
+  }
+
+  return needAuth ? (
+    <Typography.Text
+      disabled={isUpdateLoading}
+      onClick={e => {
+        e.preventDefault();
+        e.stopPropagation();
+        console.log('click');
+        if (isHasAuth) {
+          doConfirmCancelOauth(doCancelOauth);
+        } else {
+          doConfirmOAuth(doOauth);
+        }
+      }}
+      icon={isHasAuth ? <IconCozCheckMarkFill /> : undefined}
+      className={`overflow-hidden text-[#4C54F0] overflow-ellipsis text-[14px] font-normal leading-[20px] cursor-pointer px-[12px] py-[0] items-center ${className}`}
+    >
+      {isHasAuth
+        ? I18n.t('plugin_tool_config_status_authorized')
+        : I18n.t('plugin_tool_config_status_unauthorized')}
+    </Typography.Text>
+  ) : null;
+};
+
+export { OauthHeaderAction, OauthButtonAction };

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-apis/index.module.less

@@ -0,0 +1,346 @@
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable declaration-no-important */
+@import '@coze-common/assets/style/common.less';
+@import '@coze-common/assets/style/mixins.less';
+
+.tools-content {
+  .tools-table-thead {
+    padding-bottom: 6px;
+
+    th {
+      padding: var(--spacing-spacing-button-default-padding-top, 6px) 0 var(--spacing-tight, 8px) 0;
+    }
+  }
+}
+
+.api-table {
+  table-layout: fixed;
+  border-collapse: collapse;
+
+  width: 100%;
+  height: 32px;
+
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px; // 133.333%
+  color: var(--light-usage-text-color-text-2, rgb(28 31 35 / 60%));
+  word-wrap: break-word;
+
+  thead {
+    th {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px; // 133.333%
+      color: var(--light-color-grey-grey-4,
+          var(--light-color-grey-grey-4, #888d92));
+      text-align: left;
+    }
+  }
+
+  .auto-add-api {
+    animation: flash 6s linear;
+    animation-delay: 300ms;
+
+    td:first-child {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+
+    td:last-child {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+  }
+
+  @keyframes flash {
+    10% {
+      background: rgb(180 186 246 / 24%);
+    }
+
+    20% {
+      background: unset;
+    }
+
+    30% {
+      background: rgb(180 186 246 / 24%);
+    }
+
+    40% {
+      background: unset;
+    }
+
+    50% {
+      background: rgb(180 186 246 / 24%);
+    }
+
+    95% {
+      background: rgb(180 186 246 / 24%);
+    }
+  }
+
+  .api-row {
+    border-bottom: 1px solid transparent;
+
+    &.border-top {
+      position: relative;
+
+      td {
+        margin-top: 4px;
+      }
+    }
+
+    // &:last-child {
+    //   border-bottom: 1px solid #f9f9f9;
+    // }
+    td {
+      overflow: hidden;
+      padding: 2px 4px;
+    }
+
+    &-name {
+      vertical-align: middle;
+    }
+
+    :global {
+      .semi-tag-grey-light {
+        height: 20px;
+        background: var(--light-color-white-white, #fff);
+        border-radius: var(--spacing-spacing-button-default-padding-top, 6px);
+      }
+
+      .semi-tag-content {
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+
+    &.api-disable {
+      .api-plugin-name,
+      .api-name-text,
+      .icon-disabled,
+      {
+      cursor: default;
+      opacity: 0.2;
+    }
+  }
+}
+
+.api-plugin {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  padding-right: 10px;
+
+  &-image {
+    display: flex;
+    flex-shrink: 0;
+    margin-right: 8px;
+
+    >img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  :global {
+    .semi-image-status {
+      background-color: rgba(#fff, 0) !important;
+    }
+  }
+
+  &-name {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 22px;
+    color: var(--light-usage-text-color-text-1, rgb(28 29 35 / 80%));
+  }
+
+  &-icon {
+    margin-left: 4px;
+  }
+}
+
+.api-method {
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+
+  span {
+    color: var(--light-color-grey-grey-5, rgb(107 107 117 / 100%));
+  }
+
+  .icon-config {
+    cursor: pointer;
+    color: rgb(107 109 117 / 100%);
+  }
+}
+
+.api-method-read {
+  justify-content: flex-end;
+}
+
+.api-name {
+  display: flex;
+  align-items: center;
+  padding: 2px 0;
+  padding-right: 10px;
+
+  &-text {
+    margin-right: 4px;
+
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    color: rgb(29 28 35 / 80%);
+  }
+
+  :global {
+    .semi-tag-grey-light {
+      background: #fff !important;
+    }
+  }
+
+  .api-divider {
+    height: 12px;
+    border-color: var(--light-color-brand-brand-2, #b3c4ff);
+  }
+
+  .copy {
+    cursor: copy;
+  }
+
+  .icon-tips {
+    cursor: pointer;
+    .common-svg-icon(14px, rgba(107, 109, 117, 1));
+
+    padding: 1px;
+    border-radius: 4px;
+  }
+
+  &-publish {
+    flex-shrink: 0;
+    margin-left: 4px;
+  }
+}
+}
+
+.plugin-modal {
+  height: 100%;
+
+  .plugin-filter {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+
+    width: 218px;
+
+    background: #ebedf0;
+  }
+
+  :global {
+    .semi-modal-content {
+      padding: 0;
+    }
+
+    .semi-spin-children {
+      height: 100%;
+    }
+  }
+}
+
+.plugin-collapse {
+  :global {
+    .semi-collapse-header {
+      height: 120px !important;
+      margin: 0 !important;
+      padding: 14px 16px;
+
+      &[aria-expanded='true'] {
+        border-radius: 8px 8px 0 0 !important;
+      }
+    }
+
+    .semi-collapse {
+      padding: 16px 0 12px;
+    }
+
+    .semi-collapse-content {
+      // background-color: #fff;
+      padding: 0;
+      border-radius: 0 0 8px 8px;
+      // border-color: var(
+      //   --light-usage-border-color-border,
+      //   rgba(28, 31, 35, 0.08)
+      // );
+      // border-width: 0 1px 1px 1px;
+      // border-style: solid;
+    }
+
+    .semi-collapse-item {
+      // border: 0;
+    }
+  }
+}
+
+.default-text {
+  .tip-text;
+}
+
+.hide-button-model-wrap {
+  .ml20 {
+    margin-left: 20px;
+  }
+
+  .h56 {
+    height: 56px;
+  }
+
+  .search-input {
+    position: absolute;
+    z-index: 9;
+    top: 20px;
+
+    width: 100%;
+
+    background: #fff;
+  }
+}
+
+.plugin-func-collapse {
+  .plugin-api-desc {
+    cursor: pointer;
+    width: 200px !important;
+  }
+}
+
+
+.icon-button-16 {
+  cursor: pointer;
+
+  &:hover {
+    border-radius: 4px;
+  }
+
+  :global {
+    .semi-button {
+      &.semi-button-size-small {
+        height: 16px;
+        padding: 1px !important;
+
+        svg {
+           @apply text-foreground-2;
+        }
+      }
+    }
+  }
+}
+
+// 能力模块默认说明文案样式
+.tip-text {
+  font-size: 14px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 22px;
+  color: var(--light-usage-text-color-text-2, rgb(28 29 35 / 60%));
+}

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-apis/plugin-modal.tsx

@@ -0,0 +1,93 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { type ComponentProps } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+import classNames from 'classnames';
+import { useBotSkillStore } from '@coze-studio/bot-detail-store/bot-skill';
+import { I18n } from '@coze-arch/i18n';
+import { UICompositionModal, type Modal } from '@coze-arch/bot-semi';
+import { OpenModeType } from '@coze-arch/bot-hooks';
+import { type PluginModalModeProps } from '@coze-agent-ide/plugin-shared';
+import { PluginFeatButton } from '@coze-agent-ide/bot-plugin-export/pluginFeatModal/featButton';
+import { usePluginModalParts } from '@coze-agent-ide/bot-plugin-export/agentSkillPluginModal/hooks';
+
+import s from './index.module.less';
+
+export type PluginModalProps = ComponentProps<typeof Modal> &
+  PluginModalModeProps & {
+    type: number;
+  };
+
+export const PluginModal: React.FC<PluginModalProps> = ({
+  type,
+  openMode,
+  from,
+  openModeCallback,
+  showButton,
+  showCopyPlugin,
+  onCopyPluginCallback,
+  pluginApiList,
+  projectId,
+  clickProjectPluginCallback,
+  hideCreateBtn,
+  initQuery,
+  ...props
+}) => {
+  const { pluginApis, updateSkillPluginApis } = useBotSkillStore(
+    useShallow(store => ({
+      pluginApis: store.pluginApis,
+      updateSkillPluginApis: store.updateSkillPluginApis,
+    })),
+  );
+  const getPluginApiList = () => {
+    if (pluginApiList) {
+      return pluginApiList;
+    }
+    return openMode === OpenModeType.OnlyOnceAdd ? [] : pluginApis;
+  };
+  const { sider, filter, content } = usePluginModalParts({
+    // 如果是仅添加一次，清空默认选中
+    pluginApiList: getPluginApiList(),
+    onPluginApiListChange: updateSkillPluginApis,
+    openMode,
+    from,
+    openModeCallback,
+    showButton,
+    showCopyPlugin,
+    onCopyPluginCallback,
+    projectId,
+    clickProjectPluginCallback,
+    onCreateSuccess: props?.onCreateSuccess,
+    isShowStorePlugin: props?.isShowStorePlugin,
+    hideCreateBtn,
+    initQuery,
+  });
+
+  return (
+    <UICompositionModal
+      data-testid="plugin-modal"
+      {...props}
+      header={I18n.t('bot_edit_plugin_select_title')}
+      className={classNames(s['plugin-modal'], props.className)}
+      sider={sider}
+      extra={!IS_OPEN_SOURCE ? <PluginFeatButton /> : null}
+      filter={filter}
+      content={content}
+    />
+  );
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-apis/use-plugin-apis-modal.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useState } from 'react';
+
+import { isNumber } from 'lodash-es';
+import {
+  type PluginModalModeProps,
+  type PluginQuery,
+} from '@coze-agent-ide/plugin-shared';
+
+import { PluginModal } from './plugin-modal';
+
+export const usePluginApisModal = (props?: PluginModalModeProps) => {
+  const { closeCallback, ...restProps } = props || {};
+  const [visible, setVisible] = useState(false);
+  const [type, setType] = useState(1);
+  const [initQuery, setInitQuery] = useState<Partial<PluginQuery>>();
+  const open = (
+    params?: number | { openType?: number; initQuery?: Partial<PluginQuery> },
+  ) => {
+    const openType = isNumber(params) ? params : params?.openType;
+    const _initQuery = isNumber(params) ? undefined : params?.initQuery;
+    setVisible(true);
+    setInitQuery(_initQuery);
+    // 0 也有效
+    if (isNumber(openType)) {
+      setType(openType);
+    }
+  };
+  const close = () => {
+    setVisible(false);
+    setInitQuery(undefined);
+    closeCallback?.();
+  };
+  const node = visible ? (
+    <PluginModal
+      type={type}
+      visible={visible}
+      onCancel={() => {
+        setVisible(false);
+        closeCallback?.();
+      }}
+      initQuery={initQuery}
+      footer={null}
+      {...restProps}
+    />
+  ) : null;
+  return {
+    node,
+    open,
+    close,
+  };
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-header/index.module.less

@@ -0,0 +1,44 @@
+.plugin-detail-info {
+  position: relative;
+  padding-bottom: 12px;
+
+  &::after {
+    content: '';
+
+    position: absolute;
+    bottom: 0;
+    left: -24px;
+
+    width: calc(100% + 48px);
+    height: 1px;
+
+    background-color: rgb(29 28 35 / 8%);
+  }
+
+  .plugin-detail-title {
+    max-width: 300px;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 24px;
+  }
+
+  .plugin-detail-published {
+    font-size: 12px;
+    line-height: 16px;
+    color: rgb(28 29 35 / 60%);
+
+  }
+
+  .plugin-detail-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 6px;
+  }
+
+  .plugin-detail-desc {
+    max-width: 300px;
+    line-height: 16px;
+    color: rgb(28 29 35 / 80%);
+  }
+}
+

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-header/index.tsx

@@ -0,0 +1,152 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { type ReactNode } from 'react';
+
+import classNames from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import {
+  IconButton,
+  Tag,
+  Typography,
+  Space,
+  Avatar,
+} from '@coze-arch/coze-design';
+import { IconCardSearchOutlined, IconEdit } from '@coze-arch/bot-icons';
+import {
+  CreationMethod,
+  type GetPluginInfoResponse,
+} from '@coze-arch/bot-api/plugin_develop';
+import { IconTickCircle, IconClock } from '@douyinfe/semi-icons';
+
+import { OauthHeaderAction } from '../../components/oauth-action';
+import { PLUGIN_PUBLISH_MAP } from '../../common';
+
+import s from './index.module.less';
+
+const { Text } = Typography;
+
+const PluginHeader = ({
+  pluginInfo,
+  loading,
+  canEdit,
+  extraRight,
+  onClickEdit,
+}: {
+  pluginInfo: GetPluginInfoResponse;
+  loading: boolean;
+  canEdit: boolean;
+  extraRight?: ReactNode;
+  onClickEdit?: () => void;
+}) => (
+  <Space
+    className={classNames(
+      s['plugin-detail-info'],
+      'w-full',
+      'px-[16px]',
+      'py-[16px]',
+      'shrink-0',
+      'grow-0',
+    )}
+    spacing={20}
+  >
+    <Space style={{ flex: 1 }} spacing={12}>
+      <Avatar
+        className={classNames(s['plugin-detail-avatar'])}
+        size="medium"
+        shape="square"
+        src={pluginInfo?.meta_info?.icon?.url}
+      />
+      <div>
+        <div>
+          <Space spacing={4} className="mb-1">
+            <Text
+              ellipsis={{
+                showTooltip: {
+                  opts: { style: { wordBreak: 'break-word' } },
+                },
+              }}
+              className={classNames(s['plugin-detail-title'])}
+            >
+              {pluginInfo?.meta_info?.name}
+            </Text>
+            {!loading ? (
+              <IconButton
+                icon={canEdit ? <IconEdit /> : <IconCardSearchOutlined />}
+                size="small"
+                color="secondary"
+                className={classNames(s['edit-plugin-btn'], {
+                  [s.edit]: canEdit,
+                })}
+                onClick={onClickEdit}
+              />
+            ) : null}
+          </Space>
+        </div>
+        <Space spacing={4}>
+          <Tag size="mini" color="primary">
+            <Space spacing={2}>
+              {pluginInfo?.published ? (
+                <IconTickCircle
+                  size="small"
+                  style={{
+                    color: PLUGIN_PUBLISH_MAP.get(Boolean(pluginInfo.published))
+                      ?.color,
+                  }}
+                />
+              ) : (
+                <IconClock
+                  size="small"
+                  style={{
+                    color: PLUGIN_PUBLISH_MAP.get(
+                      Boolean(pluginInfo?.published),
+                    )?.color,
+                  }}
+                />
+              )}
+              {PLUGIN_PUBLISH_MAP.get(Boolean(pluginInfo?.published))?.label}
+            </Space>
+          </Tag>
+          {pluginInfo?.creation_method === CreationMethod.IDE && (
+            <Tag size="mini" color="purple">
+              {I18n.t('plugin_mark_created_by_ide')}
+            </Tag>
+          )}
+          <Text
+            ellipsis={{
+              showTooltip: {
+                opts: {
+                  style: {
+                    wordBreak: 'break-word',
+                    maxWidth: '560px',
+                  },
+                },
+              },
+            }}
+            className={classNames(s['plugin-detail-desc'])}
+          >
+            {pluginInfo?.meta_info?.desc}
+          </Text>
+          <OauthHeaderAction />
+        </Space>
+      </div>
+    </Space>
+    {/* filter */}
+    {extraRight ? <Space spacing={12}>{extraRight}</Space> : null}
+  </Space>
+);
+
+export default PluginHeader;

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/index.module.less

@@ -0,0 +1,114 @@
+/* stylelint-disable declaration-no-important */
+.tool-wrap {
+  min-height: 100%;
+  padding-bottom: 20px;
+  background-color: #f7f7fa;
+
+  :global {
+    .semi-table-row-head {
+      font-size: 12px;
+      color: var(
+        --light-usage-text-color-text-1,
+        rgb(28 29 35 / 80%)
+      ) !important;
+    }
+
+    .semi-steps-item-title-text {
+      font-size: 14px;
+    }
+
+    .semi-table-row.semi-table-row-expanded:last-child {
+      .semi-table-row-cell {
+        border-bottom: 1px solid transparent;
+      }
+    }
+  }
+
+  .header {
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid rgb(29 28 35 / 8%);
+
+    .simple-title {
+      display: flex;
+      align-items: center;
+      height: 32px;
+
+      .title {
+        flex: 1;
+
+        margin-left: 12px;
+
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 32px;
+        color: #1d1c23;
+      }
+    }
+
+    .preview-header {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+
+      .simple-title .title {
+        margin-left: 0;
+      }
+    }
+
+    .breadcrumb {
+      margin-bottom: 24px;
+    }
+  }
+
+  .content {
+    padding: 36px 0 30px;
+  }
+
+  .modal-steps {
+    width: 1008px;
+    margin: 0 auto;
+  }
+
+  .form-wrap {
+    margin: 42px auto 0;
+
+    :global {
+      .semi-form-vertical .semi-form-field:last-child {
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  .tool-footer {
+    width: calc(100% - 200px);
+    min-width: 1008px;
+    margin: 0 auto;
+    text-align: right;
+
+    &.step-one {
+      max-width: 1008px;
+      margin: 0 auto;
+    }
+
+    .error-msg {
+      padding: 8px 24px;
+
+      font-size: 14px;
+      line-height: 16px;
+      color: #f93920;
+      text-align: left;
+
+      .link {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 16px;
+        color: #4d53e8;
+      }
+    }
+
+    .footer-content {
+      padding-top: 24px;
+    }
+  }
+}

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/index.tsx

@@ -0,0 +1,354 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/* eslint-disable @coze-arch/max-line-per-function */
+
+import { type FC, useEffect, useState } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+import { cloneDeep } from 'lodash-es';
+import { useUpdateEffect } from 'ahooks';
+import { usePluginStore } from '@coze-studio/bot-plugin-store';
+import {
+  REPORT_EVENTS,
+  REPORT_EVENTS as ReportEventNames,
+} from '@coze-arch/report-events';
+import { useErrorHandler } from '@coze-arch/logger';
+import { Spin, Collapse } from '@coze-arch/coze-design';
+import { CustomError } from '@coze-arch/bot-error';
+import {
+  type APIParameter,
+  type PluginAPIInfo,
+  DebugExampleStatus,
+  type UpdateAPIResponse,
+} from '@coze-arch/bot-api/plugin_develop';
+import { PluginDevelopApi } from '@coze-arch/bot-api';
+import { addDepthAndValue } from '@coze-agent-ide/bot-plugin-tools/pluginModal/utils';
+import { type RenderEnhancedComponentProps } from '@coze-agent-ide/bot-plugin-tools/pluginModal/types';
+import { setEditToolExampleValue } from '@coze-agent-ide/bot-plugin-tools/example/utils';
+
+import { useContentResponse } from './use-content-response';
+import { useContentRequest } from './use-content-request';
+import { useContentBaseInfo } from './use-content-baseinfo';
+import { useContentBaseMore } from './use-content-base-more';
+import { ToolHeader } from './tool-header';
+
+import s from './index.module.less';
+
+export interface ToolDetailPageProps
+  extends Partial<RenderEnhancedComponentProps> {
+  toolID: string;
+  onDebugSuccessCallback?: () => void;
+}
+
+// 页面-编辑插件API
+export const ToolDetailPage: FC<ToolDetailPageProps> = ({
+  toolID,
+  onDebugSuccessCallback,
+  renderDescComponent,
+  renderParamsComponent,
+}) => {
+  //捕获错误信息，跳转统一落地页
+  const capture = useErrorHandler();
+  const [editVersion, setEditVersion] = useState<number>();
+  //插件-API详情
+  const [apiInfo, setApiInfo] = useState<PluginAPIInfo>();
+  const [debugApiInfo, setDebugApiInfo] = useState<PluginAPIInfo>();
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const {
+    canEdit,
+    init,
+    pluginInfo,
+    updatedInfo,
+    wrapWithCheckLock,
+    unlockPlugin,
+    spaceID,
+    pluginID,
+    updatePluginInfoByImmer,
+    version,
+  } = usePluginStore(
+    useShallow(store => ({
+      canEdit: store.canEdit,
+      init: store.init,
+      pluginInfo: store.pluginInfo,
+      updatedInfo: store.updatedInfo,
+      wrapWithCheckLock: store.wrapWithCheckLock,
+      unlockPlugin: store.unlockPlugin,
+      spaceID: store.spaceID,
+      pluginID: store.pluginId,
+      updatePluginInfoByImmer: store.updatePluginInfoByImmer,
+      version: store.version,
+    })),
+  );
+
+  const handleSuccess = (baseResData: UpdateAPIResponse) => {
+    updatePluginInfoByImmer(draft => {
+      if (!draft) {
+        return;
+      }
+      draft.edit_version = baseResData?.edit_version;
+    });
+  };
+
+  // 重置 request 参数
+  const resetRequestParams = (data: PluginAPIInfo) => {
+    const requestParams = cloneDeep(data.request_params as APIParameter[]);
+    if (
+      data?.debug_example_status === DebugExampleStatus.Enable &&
+      data?.debug_example?.req_example
+    ) {
+      setEditToolExampleValue(
+        requestParams,
+        JSON.parse((data as PluginAPIInfo)?.debug_example?.req_example ?? '{}'),
+      );
+    }
+    addDepthAndValue(requestParams);
+    return requestParams;
+  };
+
+  // 设置接口信息（回显和置空）
+  const handleInit = async (useloading = false) => {
+    setApiInfo({
+      ...apiInfo,
+      debug_example_status: DebugExampleStatus.Disable,
+    });
+    useloading && setLoading(true);
+    try {
+      const {
+        api_info = [],
+        msg,
+        edit_version,
+      } = await PluginDevelopApi.GetPluginAPIs({
+        plugin_id: pluginID,
+        api_ids: [toolID],
+        preview_version_ts: version,
+      });
+
+      if (api_info.length > 0) {
+        const apiInfoTemp = api_info.length > 0 ? api_info[0] : {};
+        // debug 的数据 如果有 example 需要回显 入参数据额外处理
+        setDebugApiInfo({
+          ...apiInfoTemp,
+          request_params: resetRequestParams(apiInfoTemp),
+        });
+        // 给对象增加层级标识
+        addDepthAndValue(apiInfoTemp.request_params);
+        addDepthAndValue(apiInfoTemp.response_params);
+        setApiInfo(apiInfoTemp);
+        setEditVersion(edit_version);
+      } else {
+        capture(
+          new CustomError(
+            ReportEventNames.responseValidation,
+            msg || 'GetPluginAPIs error',
+          ),
+        );
+      }
+    } catch (error) {
+      capture(
+        new CustomError(
+          REPORT_EVENTS.PluginInitError,
+          // @ts-expect-error -- linter-disable-autofix
+          `plugin init error: ${error.message}`,
+        ),
+      );
+    }
+    useloading && setLoading(false);
+  };
+
+  // 1.基本信息
+  const {
+    isBaseInfoDisabled,
+    header: baseInfoHeader,
+    itemKey: baseInfoItemKey,
+    extra: baseInfoExtra,
+    content: baseInfoContent,
+    classNameWrap: baseInfoClassNameWrap,
+  } = useContentBaseInfo({
+    space_id: spaceID,
+    plugin_id: pluginID,
+    tool_id: toolID,
+    apiInfo,
+    canEdit,
+    handleInit,
+    wrapWithCheckLock,
+    editVersion,
+    renderDescComponent,
+  });
+
+  // 2 更多设置
+  const {
+    isBaseMoreDisabled,
+    header: baseMoreHeader,
+    itemKey: baseMoreItemKey,
+    extra: baseMoreExtra,
+    content: baseMoreContent,
+    classNameWrap: baseMoreClassNameWrap,
+  } = useContentBaseMore({
+    plugin_id: pluginID,
+    pluginInfo,
+    tool_id: toolID,
+    apiInfo,
+    canEdit,
+    handleInit,
+    wrapWithCheckLock,
+    editVersion,
+    space_id: spaceID,
+    onSuccess: handleSuccess,
+  });
+
+  // 3.设置 request
+  const {
+    isRequestParamsDisabled,
+    itemKey: requestItemKey,
+    header: requestHeader,
+    extra: requestExtra,
+    content: requestContent,
+    classNameWrap: requestClassNameWrap,
+  } = useContentRequest({
+    apiInfo,
+    plugin_id: pluginID,
+    tool_id: toolID,
+    pluginInfo,
+    canEdit,
+    handleInit,
+    wrapWithCheckLock,
+    editVersion,
+    spaceID,
+    onSuccess: handleSuccess,
+    renderParamsComponent,
+  });
+
+  // 4.设置 response
+  const {
+    isResponseParamsDisabled,
+    itemKey: responseItemKey,
+    header: responseHeader,
+    extra: responseExtra,
+    content: responseContent,
+    classNameWrap: responseClassNameWrap,
+  } = useContentResponse({
+    apiInfo,
+    plugin_id: pluginID,
+    tool_id: toolID,
+    editVersion,
+    pluginInfo,
+    canEdit,
+    handleInit,
+    wrapWithCheckLock,
+    debugApiInfo,
+    setDebugApiInfo,
+    spaceID,
+    onSuccess: handleSuccess,
+    renderParamsComponent,
+  });
+
+  const collapseItems = [
+    {
+      header: baseInfoHeader,
+      itemKey: baseInfoItemKey,
+      extra: baseInfoExtra,
+      content: baseInfoContent,
+      classNameWrap: baseInfoClassNameWrap,
+    },
+    {
+      header: baseMoreHeader,
+      itemKey: baseMoreItemKey,
+      extra: baseMoreExtra,
+      content: baseMoreContent,
+      classNameWrap: baseMoreClassNameWrap,
+    },
+    {
+      header: requestHeader,
+      itemKey: requestItemKey,
+      extra: requestExtra,
+      content: requestContent,
+      classNameWrap: requestClassNameWrap,
+    },
+    {
+      header: responseHeader,
+      itemKey: responseItemKey,
+      extra: responseExtra,
+      content: responseContent,
+      classNameWrap: responseClassNameWrap,
+    },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      await init();
+      handleInit(true);
+    })();
+    return () => {
+      unlockPlugin();
+    };
+  }, []);
+
+  // 预览状态解锁，如果有一步为编辑态，则不解锁
+  useUpdateEffect(() => {
+    if (
+      !isBaseInfoDisabled ||
+      !isRequestParamsDisabled ||
+      !isResponseParamsDisabled ||
+      !isBaseMoreDisabled
+    ) {
+      return;
+    }
+    unlockPlugin();
+  }, [
+    isBaseInfoDisabled,
+    isRequestParamsDisabled,
+    isResponseParamsDisabled,
+    isBaseMoreDisabled,
+  ]);
+
+  return !loading ? (
+    <div className={s.toolWrap}>
+      <ToolHeader
+        space_id={spaceID}
+        plugin_id={pluginID}
+        unlockPlugin={unlockPlugin}
+        tool_id={toolID}
+        pluginInfo={pluginInfo}
+        updatedInfo={updatedInfo}
+        apiInfo={apiInfo}
+        editVersion={editVersion || 0}
+        canEdit={canEdit}
+        debugApiInfo={debugApiInfo}
+        onDebugSuccessCallback={onDebugSuccessCallback}
+      />
+      <Collapse
+        keepDOM={true}
+        defaultActiveKey={collapseItems.map(item => item.itemKey)}
+      >
+        {collapseItems.map((item, index) => (
+          <Collapse.Panel
+            className={item.classNameWrap}
+            header={item.header}
+            itemKey={item.itemKey}
+            extra={item.extra}
+            key={`${index}collapse`}
+          >
+            {item.content}
+          </Collapse.Panel>
+        ))}
+      </Collapse>
+    </div>
+  ) : (
+    <Spin size="large" spinning style={{ height: '100%', width: '100%' }} />
+  );
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/tool-header.tsx

@@ -0,0 +1,146 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useMemo, type FC } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { useFlags } from '@coze-arch/bot-flags';
+import {
+  type GetPluginInfoResponse,
+  type GetUpdatedAPIsResponse,
+  type PluginAPIInfo,
+  PluginType,
+} from '@coze-arch/bot-api/plugin_develop';
+import { IconChevronLeft } from '@douyinfe/semi-icons';
+import { usePluginNavigate } from '@coze-studio/bot-plugin-store';
+import { Button, IconButton, Tooltip } from '@coze-arch/coze-design';
+
+import { OauthButtonAction } from '@/components/oauth-action';
+
+import { useContentDebug } from './use-content-debug';
+
+import s from './index.module.less';
+
+interface ToolHeaderProps {
+  space_id: string;
+  plugin_id: string;
+  unlockPlugin: () => void;
+  tool_id: string;
+  pluginInfo?: GetPluginInfoResponse & { plugin_id?: string };
+  updatedInfo?: GetUpdatedAPIsResponse;
+  apiInfo?: PluginAPIInfo;
+  editVersion: number;
+  canEdit: boolean;
+  debugApiInfo?: PluginAPIInfo;
+  onDebugSuccessCallback?: () => void;
+}
+
+const ToolHeader: FC<ToolHeaderProps> = ({
+  space_id,
+  plugin_id,
+  unlockPlugin,
+  tool_id,
+  pluginInfo,
+  updatedInfo,
+  apiInfo,
+  editVersion,
+  canEdit,
+  debugApiInfo,
+  onDebugSuccessCallback,
+}) => {
+  const resourceNavigate = usePluginNavigate();
+
+  const [FLAGS] = useFlags();
+  const goBack = () => {
+    resourceNavigate.toResource?.('plugin', plugin_id);
+    unlockPlugin();
+  };
+
+  // 管理模拟集
+  const handleManageMockset = () => {
+    resourceNavigate.mocksetList?.(tool_id);
+  };
+
+  const mocksetDisabled = useMemo(
+    () =>
+      pluginInfo?.plugin_type === PluginType.LOCAL ||
+      !pluginInfo?.published ||
+      (pluginInfo?.status &&
+        updatedInfo?.created_api_names &&
+        Boolean(updatedInfo.created_api_names.includes(apiInfo?.name || ''))),
+    [pluginInfo, updatedInfo, apiInfo],
+  );
+
+  const { modalContent: debugModalContent } = useContentDebug({
+    debugApiInfo,
+    canEdit,
+    space_id: space_id || '',
+    plugin_id: plugin_id || '',
+    tool_id: tool_id || '',
+    unlockPlugin,
+    editVersion,
+    pluginInfo,
+    onDebugSuccessCallback,
+  });
+
+  return (
+    <div className={s.header}>
+      <div className={s['simple-title']}>
+        {/* <UIBreadcrumb
+          showTooltip={{
+            width: '160px',
+            opts: {
+              style: { wordBreak: 'break-word' },
+            },
+          }}
+          pluginInfo={pluginInfo?.meta_info}
+          pluginToolInfo={apiInfo}
+          compact={false}
+          className={s.breadcrumb}
+        /> */}
+        <IconButton
+          icon={<IconChevronLeft style={{ color: 'rgba(29, 28, 35, 0.6)' }} />}
+          onClick={goBack}
+          size="small"
+          color="secondary"
+        />
+        <span className={s.title}>{I18n.t('plugin_edit_tool_title')}</span>
+        <OauthButtonAction />
+        {/* 社区版暂不支持该功能 */}
+        {FLAGS['bot.devops.plugin_mockset'] ? (
+          <Tooltip
+            style={{ display: mocksetDisabled ? 'block' : 'none' }}
+            content={I18n.t('unreleased_plugins_tool_cannot_create_mockset')}
+            position="left"
+            trigger="hover"
+          >
+            <Button
+              onClick={handleManageMockset}
+              disabled={mocksetDisabled}
+              color="primary"
+              style={{ marginRight: 8 }}
+            >
+              {I18n.t('manage_mockset')}
+            </Button>
+          </Tooltip>
+        ) : null}
+        {canEdit ? debugModalContent : null}
+      </div>
+    </div>
+  );
+};
+
+export { ToolHeader };

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/use-content-base-more.tsx

@@ -0,0 +1,140 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useState } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { IconEdit } from '@coze-arch/bot-icons';
+import {
+  type UpdateAPIResponse,
+  type GetPluginInfoResponse,
+  type PluginAPIInfo,
+} from '@coze-arch/bot-api/plugin_develop';
+import { useBaseMore } from '@coze-agent-ide/bot-plugin-tools/useBaseMore';
+import { REQUESTNODE } from '@coze-agent-ide/bot-plugin-tools/pluginModal/config';
+import { Button } from '@coze-arch/coze-design';
+
+import { SecurityCheckFailed } from '@/components/check_failed';
+
+interface UseContentBaseInfoProps {
+  plugin_id: string;
+  pluginInfo?: GetPluginInfoResponse & { plugin_id?: string };
+  tool_id: string;
+  apiInfo?: PluginAPIInfo;
+  space_id: string;
+  canEdit: boolean;
+  handleInit: (loading?: boolean) => Promise<void>;
+  wrapWithCheckLock: (fn: () => void) => () => Promise<void>;
+  editVersion?: number;
+  onSuccess?: (params: UpdateAPIResponse) => void;
+}
+
+export const useContentBaseMore = ({
+  plugin_id,
+  pluginInfo,
+  tool_id,
+  apiInfo,
+  space_id,
+  canEdit,
+  handleInit,
+  wrapWithCheckLock,
+  editVersion,
+  onSuccess,
+}: UseContentBaseInfoProps) => {
+  // 是否显示安全检查失败信息
+  const [showSecurityCheckFailedMsg, setShowSecurityCheckFailedMsg] =
+    useState(false);
+  const [isBaseMoreDisabled, setIsBaseMoreDisabled] = useState(true);
+
+  // 基本信息
+  const { baseInfoNode, submitBaseInfo } = useBaseMore({
+    pluginId: plugin_id || '',
+    pluginMeta: pluginInfo?.meta_info || {},
+    apiId: tool_id,
+    baseInfo: apiInfo,
+    showModal: false,
+    disabled: isBaseMoreDisabled,
+    showSecurityCheckFailedMsg,
+    setShowSecurityCheckFailedMsg,
+    editVersion,
+    pluginType: pluginInfo?.plugin_type,
+    spaceId: space_id,
+    onSuccess,
+  });
+
+  return {
+    isBaseMoreDisabled,
+    header: I18n.t('project_plugin_setup_metadata_more_info'),
+    itemKey: 'baseMore',
+    extra: (
+      <>
+        {showSecurityCheckFailedMsg ? (
+          <SecurityCheckFailed step={REQUESTNODE} />
+        ) : null}
+        {!isBaseMoreDisabled && (
+          <Button
+            color="primary"
+            className="mr-2"
+            onClick={e => {
+              e.stopPropagation();
+              setIsBaseMoreDisabled(true);
+            }}
+          >
+            {I18n.t('project_plugin_setup_metadata_cancel')}
+          </Button>
+        )}
+        {canEdit && !isBaseMoreDisabled ? (
+          <Button
+            onClick={async e => {
+              e.stopPropagation();
+              const status = await submitBaseInfo();
+              // 更新成功后进入下一步
+              if (status) {
+                handleInit();
+              }
+              setIsBaseMoreDisabled(true);
+            }}
+            className="mr-2"
+          >
+            {I18n.t('project_plugin_setup_metadata_save')}
+          </Button>
+        ) : null}
+        {canEdit && isBaseMoreDisabled ? (
+          <Button
+            icon={<IconEdit className="!pr-0" />}
+            color="primary"
+            className="!bg-transparent !coz-fg-secondary"
+            onClick={e => {
+              const el = document.querySelector(
+                '.plugin-tool-detail-baseMore .semi-collapsible-wrapper',
+              ) as HTMLElement;
+              if (parseInt(el?.style?.height) !== 0) {
+                e.stopPropagation();
+              }
+              wrapWithCheckLock(() => {
+                setIsBaseMoreDisabled(false);
+              })();
+            }}
+          >
+            {I18n.t('project_plugin_setup_metadata_edit')}
+          </Button>
+        ) : null}
+      </>
+    ),
+    content: baseInfoNode,
+    classNameWrap: 'plugin-tool-detail-baseMore',
+  };
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/use-content-baseinfo.tsx

@@ -0,0 +1,133 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useState } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { type PluginAPIInfo } from '@coze-arch/bot-api/plugin_develop';
+import { IconEdit } from '@coze-arch/bot-icons';
+import { useBaseInfo } from '@coze-agent-ide/bot-plugin-tools/useBaseInfo';
+import { type RenderEnhancedComponentProps } from '@coze-agent-ide/bot-plugin-tools/pluginModal/types';
+import { STARTNODE } from '@coze-agent-ide/bot-plugin-tools/pluginModal/config';
+import { Button } from '@coze-arch/coze-design';
+
+import { SecurityCheckFailed } from '@/components/check_failed';
+
+interface UseContentBaseInfoProps
+  extends Pick<Partial<RenderEnhancedComponentProps>, 'renderDescComponent'> {
+  space_id: string;
+  plugin_id: string;
+  tool_id: string;
+  apiInfo?: PluginAPIInfo;
+  canEdit: boolean;
+  handleInit: (loading?: boolean) => Promise<void>;
+  wrapWithCheckLock: (fn: () => void) => () => Promise<void>;
+  editVersion?: number;
+}
+export const useContentBaseInfo = ({
+  space_id,
+  plugin_id,
+  tool_id,
+  apiInfo,
+  canEdit,
+  handleInit,
+  wrapWithCheckLock,
+  editVersion,
+  renderDescComponent,
+}: UseContentBaseInfoProps) => {
+  // 是否显示安全检查失败信息
+  const [showSecurityCheckFailedMsg, setShowSecurityCheckFailedMsg] =
+    useState(false);
+  const [isBaseInfoDisabled, setIsBaseInfoDisabled] = useState(true);
+
+  // 基本信息
+  const { baseInfoNode, submitBaseInfo } = useBaseInfo({
+    pluginId: plugin_id || '',
+    apiId: tool_id,
+    baseInfo: apiInfo,
+    showModal: false,
+    disabled: isBaseInfoDisabled,
+    showSecurityCheckFailedMsg,
+    setShowSecurityCheckFailedMsg,
+    editVersion,
+    space_id,
+    renderEnhancedComponent: renderDescComponent,
+  });
+
+  return {
+    isBaseInfoDisabled,
+    header: I18n.t('Create_newtool_s1_title'),
+    itemKey: 'baseInfo',
+    extra: (
+      <>
+        {showSecurityCheckFailedMsg ? (
+          <SecurityCheckFailed step={STARTNODE} />
+        ) : null}
+        {!isBaseInfoDisabled && (
+          <Button
+            color="primary"
+            className="mr-2"
+            onClick={e => {
+              e.stopPropagation();
+              setIsBaseInfoDisabled(true);
+            }}
+          >
+            {I18n.t('project_plugin_setup_metadata_cancel')}
+          </Button>
+        )}
+        {canEdit && !isBaseInfoDisabled ? (
+          <Button
+            onClick={async e => {
+              e.stopPropagation();
+              const status = await submitBaseInfo();
+              // 更新成功后进入下一步
+              if (status) {
+                handleInit();
+              }
+              setIsBaseInfoDisabled(true);
+            }}
+            className="mr-2"
+          >
+            {I18n.t('project_plugin_setup_metadata_save')}
+          </Button>
+        ) : null}
+
+        {canEdit && isBaseInfoDisabled ? (
+          <Button
+            icon={<IconEdit className="!pr-0" />}
+            color="primary"
+            className="!bg-transparent !coz-fg-secondary"
+            onClick={e => {
+              const el = document.querySelector(
+                '.plugin-tool-detail-baseInfo .semi-collapsible-wrapper',
+              ) as HTMLElement;
+              if (parseInt(el?.style?.height) !== 0) {
+                e.stopPropagation();
+              }
+              wrapWithCheckLock(() => {
+                setIsBaseInfoDisabled(false);
+              })();
+            }}
+          >
+            {I18n.t('project_plugin_setup_metadata_edit')}
+          </Button>
+        ) : null}
+      </>
+    ),
+    content: baseInfoNode,
+    classNameWrap: 'plugin-tool-detail-baseInfo',
+  };
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/use-content-debug.tsx

@@ -0,0 +1,130 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useState } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import {
+  type GetPluginInfoResponse,
+  type PluginAPIInfo,
+} from '@coze-arch/bot-api/plugin_develop';
+import { usePluginNavigate } from '@coze-studio/bot-plugin-store';
+import { type STATUS } from '@coze-agent-ide/bot-plugin-tools/pluginModal/types';
+import { Debug } from '@coze-agent-ide/bot-plugin-tools/pluginModal/debug';
+import { useDebugFooter } from '@coze-agent-ide/bot-plugin-tools/example/useDebugFooter';
+import { IconCozPlayFill } from '@coze-arch/coze-design/icons';
+import { Button, Modal } from '@coze-arch/coze-design';
+
+interface UseContentDebugProps {
+  debugApiInfo?: PluginAPIInfo;
+  pluginInfo?: GetPluginInfoResponse & { plugin_id?: string };
+  canEdit: boolean;
+  space_id: string;
+  plugin_id: string;
+  tool_id: string;
+  unlockPlugin: () => void;
+  editVersion?: number;
+  onDebugSuccessCallback?: () => void;
+}
+
+export const useContentDebug = ({
+  debugApiInfo,
+  canEdit,
+  plugin_id,
+  tool_id,
+  unlockPlugin,
+  editVersion,
+  pluginInfo,
+  onDebugSuccessCallback,
+}: UseContentDebugProps) => {
+  const resourceNavigate = usePluginNavigate();
+
+  const [dugStatus, setDebugStatus] = useState<STATUS | undefined>();
+  const [visible, setVisible] = useState(false);
+  const [loading] = useState<boolean>(false);
+
+  const { debugFooterNode, setDebugExample, debugExample } = useDebugFooter({
+    apiInfo: debugApiInfo,
+    loading,
+    dugStatus,
+    btnLoading: false,
+    nextStep: () => {
+      resourceNavigate.toResource?.('plugin', plugin_id);
+
+      unlockPlugin();
+    },
+    editVersion,
+  });
+
+  return {
+    itemKey: 'tool_debug',
+    header: I18n.t('Create_newtool_s4_debug'),
+    extra: <>{canEdit ? debugFooterNode : null}</>,
+    content:
+      debugApiInfo && tool_id ? (
+        <Debug
+          pluginType={pluginInfo?.plugin_type}
+          disabled={false} // 是否可调试
+          setDebugStatus={setDebugStatus}
+          pluginId={String(plugin_id)}
+          apiId={String(tool_id)}
+          apiInfo={debugApiInfo as PluginAPIInfo}
+          pluginName={String(pluginInfo?.meta_info?.name)}
+          setDebugExample={setDebugExample}
+          debugExample={debugExample}
+        />
+      ) : (
+        <></>
+      ),
+    modalContent: (
+      <>
+        {debugApiInfo && tool_id ? (
+          <Button
+            onClick={() => {
+              setVisible(true);
+            }}
+            icon={<IconCozPlayFill />}
+            color="highlight"
+          >
+            {I18n.t('project_plugin_testrun')}
+          </Button>
+        ) : null}
+        <Modal
+          title={I18n.t('project_plugin_testrun')}
+          width={1000}
+          visible={visible}
+          onOk={() => setVisible(false)}
+          onCancel={() => setVisible(false)}
+          closeOnEsc={true}
+          footer={debugFooterNode}
+        >
+          <Debug
+            pluginType={pluginInfo?.plugin_type}
+            disabled={false} // 是否可调试
+            setDebugStatus={setDebugStatus}
+            pluginId={String(plugin_id)}
+            apiId={String(tool_id)}
+            apiInfo={debugApiInfo as PluginAPIInfo}
+            pluginName={String(pluginInfo?.meta_info?.name)}
+            setDebugExample={setDebugExample}
+            debugExample={debugExample}
+            onSuccessCallback={onDebugSuccessCallback}
+          />
+        </Modal>
+      </>
+    ),
+  };
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/use-content-request.tsx

@@ -0,0 +1,146 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useState } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { IconEdit } from '@coze-arch/bot-icons';
+import {
+  PluginType,
+  type UpdateAPIResponse,
+  type GetPluginInfoResponse,
+  type PluginAPIInfo,
+} from '@coze-arch/bot-api/plugin_develop';
+import { useRequestParams } from '@coze-agent-ide/bot-plugin-tools/useRequestParams';
+import { type RenderEnhancedComponentProps } from '@coze-agent-ide/bot-plugin-tools/pluginModal/types';
+import { RESPONSENODE } from '@coze-agent-ide/bot-plugin-tools/pluginModal/config';
+import { Button } from '@coze-arch/coze-design';
+
+import { SecurityCheckFailed } from '@/components/check_failed';
+
+interface UseContentRequestProps
+  extends Pick<Partial<RenderEnhancedComponentProps>, 'renderParamsComponent'> {
+  apiInfo?: PluginAPIInfo;
+  plugin_id: string;
+  tool_id: string;
+  pluginInfo?: GetPluginInfoResponse & { plugin_id?: string };
+  canEdit: boolean;
+  handleInit: () => Promise<void>;
+  wrapWithCheckLock: (fn: () => void) => () => Promise<void>;
+  editVersion?: number;
+  spaceID: string;
+  onSuccess?: (params: UpdateAPIResponse) => void;
+}
+
+export const useContentRequest = ({
+  apiInfo,
+  plugin_id,
+  tool_id,
+  pluginInfo,
+  canEdit,
+  handleInit,
+  wrapWithCheckLock,
+  editVersion,
+  spaceID,
+  onSuccess,
+  renderParamsComponent,
+}: UseContentRequestProps) => {
+  // 是否显示安全检查失败信息
+  const [showSecurityCheckFailedMsg, setShowSecurityCheckFailedMsg] =
+    useState(false);
+  const [isRequestParamsDisabled, setIsRequestParamsDisabled] = useState(true);
+  // 设置请求参数
+  const { requestParamsNode, submitRequestParams, nlTool } = useRequestParams({
+    apiInfo,
+    pluginId: plugin_id || '',
+    requestParams: apiInfo?.request_params,
+    apiId: tool_id,
+    disabled: isRequestParamsDisabled,
+    showSecurityCheckFailedMsg,
+    setShowSecurityCheckFailedMsg,
+    editVersion,
+    functionName:
+      pluginInfo?.plugin_type === PluginType.LOCAL
+        ? apiInfo?.function_name
+        : undefined,
+    spaceID,
+    onSuccess,
+    renderEnhancedComponent: renderParamsComponent,
+  });
+  return {
+    isRequestParamsDisabled,
+    itemKey: 'request',
+    header: I18n.t('Create_newtool_s2'),
+    extra: (
+      <>
+        {showSecurityCheckFailedMsg ? (
+          <SecurityCheckFailed step={RESPONSENODE} />
+        ) : null}
+        {!isRequestParamsDisabled ? nlTool : null}
+        {!isRequestParamsDisabled ? (
+          <Button
+            onClick={e => {
+              e.stopPropagation();
+              setIsRequestParamsDisabled(true);
+            }}
+            color="primary"
+            className="mr-2"
+          >
+            {I18n.t('project_plugin_setup_metadata_cancel')}
+          </Button>
+        ) : null}
+        {canEdit && !isRequestParamsDisabled ? (
+          <Button
+            onClick={async e => {
+              e.stopPropagation();
+              const status = await submitRequestParams();
+              // 更新成功后进入下一步
+              if (status) {
+                handleInit();
+                setIsRequestParamsDisabled(true);
+              }
+            }}
+            className="mr-2"
+          >
+            {I18n.t('project_plugin_setup_metadata_save')}
+          </Button>
+        ) : null}
+        {canEdit && isRequestParamsDisabled ? (
+          <Button
+            icon={<IconEdit className="!pr-0" />}
+            color="primary"
+            className="!bg-transparent !coz-fg-secondary"
+            onClick={e => {
+              const el = document.querySelector(
+                '.plugin-tool-detail-request .semi-collapsible-wrapper',
+              ) as HTMLElement;
+              if (parseInt(el?.style?.height) !== 0) {
+                e.stopPropagation();
+              }
+              wrapWithCheckLock(() => {
+                setIsRequestParamsDisabled(false);
+              })();
+            }}
+          >
+            {I18n.t('project_plugin_setup_metadata_edit')}
+          </Button>
+        ) : null}
+      </>
+    ),
+    content: requestParamsNode,
+    classNameWrap: 'plugin-tool-detail-request',
+  };
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/use-content-response.tsx

@@ -0,0 +1,173 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/* eslint-disable complexity */
+
+import { useEffect, useState } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { IconEdit } from '@coze-arch/bot-icons';
+import {
+  PluginType,
+  type GetPluginInfoResponse,
+  type PluginAPIInfo,
+  DebugExampleStatus,
+  type UpdateAPIResponse,
+} from '@coze-arch/bot-api/plugin_develop';
+import { useResponseParams } from '@coze-agent-ide/bot-plugin-tools/useResponseParams';
+import { type RenderEnhancedComponentProps } from '@coze-agent-ide/bot-plugin-tools/pluginModal/types';
+import { RESPONSENODE } from '@coze-agent-ide/bot-plugin-tools/pluginModal/config';
+import { Button } from '@coze-arch/coze-design';
+
+import { OauthButtonAction } from '@/components/oauth-action';
+import { SecurityCheckFailed } from '@/components/check_failed';
+
+interface UseContentResponseProps
+  extends Pick<Partial<RenderEnhancedComponentProps>, 'renderParamsComponent'> {
+  apiInfo?: PluginAPIInfo;
+  plugin_id: string;
+  tool_id: string;
+  editVersion?: number;
+  pluginInfo?: GetPluginInfoResponse & { plugin_id?: string };
+  canEdit: boolean;
+  handleInit: (loading?: boolean) => Promise<void>;
+  wrapWithCheckLock: (fn: () => void) => () => Promise<void>;
+  debugApiInfo?: PluginAPIInfo;
+  setDebugApiInfo: (apiInfo: PluginAPIInfo) => void;
+  spaceID: string;
+  onSuccess?: (params: UpdateAPIResponse) => void;
+}
+
+export const useContentResponse = ({
+  apiInfo,
+  plugin_id,
+  tool_id,
+  editVersion,
+  pluginInfo,
+  canEdit,
+  handleInit,
+  wrapWithCheckLock,
+  debugApiInfo,
+  setDebugApiInfo,
+  spaceID,
+  onSuccess,
+  renderParamsComponent,
+}: UseContentResponseProps) => {
+  // 是否显示安全检查失败信息
+  const [showSecurityCheckFailedMsg, setShowSecurityCheckFailedMsg] =
+    useState(false);
+  const [isResponseParamsDisabled, setIsResponseParamsDisabled] =
+    useState(true);
+  // 第三步，设置相应参数的hooks组件
+  const { responseParamsNode, submitResponseParams, extra } = useResponseParams(
+    {
+      apiInfo,
+      pluginId: plugin_id || '',
+      responseParams: apiInfo?.response_params,
+      requestParams: apiInfo?.request_params,
+      apiId: tool_id || '',
+      disabled: isResponseParamsDisabled,
+      showSecurityCheckFailedMsg,
+      setShowSecurityCheckFailedMsg,
+      editVersion,
+      pluginType: pluginInfo?.plugin_type,
+      functionName:
+        pluginInfo?.plugin_type === PluginType.LOCAL
+          ? apiInfo?.function_name
+          : undefined,
+      spaceID,
+      onSuccess,
+      renderEnhancedComponent: renderParamsComponent,
+    },
+  );
+
+  // 处理 debug 时 example数据先显示后隐藏的问题
+  useEffect(() => {
+    if (!isResponseParamsDisabled) {
+      setDebugApiInfo({
+        ...debugApiInfo,
+        debug_example: {},
+        debug_example_status: DebugExampleStatus.Disable,
+      });
+    }
+  }, [isResponseParamsDisabled]);
+
+  return {
+    isResponseParamsDisabled,
+    header: I18n.t('Create_newtool_s3_Outputparameters'),
+    itemKey: 'response',
+    extra: (
+      <>
+        {showSecurityCheckFailedMsg ? (
+          <SecurityCheckFailed step={RESPONSENODE} />
+        ) : null}
+        {!isResponseParamsDisabled && canEdit ? <OauthButtonAction /> : null}
+        {!isResponseParamsDisabled ? extra : null}
+        {!isResponseParamsDisabled ? (
+          <Button
+            onClick={e => {
+              e.stopPropagation();
+              setIsResponseParamsDisabled(true);
+            }}
+            color="primary"
+            className="mr-2"
+          >
+            {I18n.t('project_plugin_setup_metadata_cancel')}
+          </Button>
+        ) : null}
+        {canEdit && !isResponseParamsDisabled ? (
+          <Button
+            onClick={async e => {
+              e.stopPropagation();
+              const status = await submitResponseParams();
+              // 更新成功后进入下一步
+              if (status) {
+                handleInit();
+                setIsResponseParamsDisabled(true);
+              }
+            }}
+            className="mr-2"
+          >
+            {I18n.t('project_plugin_setup_metadata_save')}
+          </Button>
+        ) : null}
+
+        {canEdit && isResponseParamsDisabled ? (
+          <Button
+            icon={<IconEdit className="!pr-0" />}
+            color="primary"
+            className="!bg-transparent !coz-fg-secondary"
+            onClick={e => {
+              const el = document.querySelector(
+                '.plugin-tool-detail-response .semi-collapsible-wrapper',
+              ) as HTMLElement;
+              if (parseInt(el?.style?.height) !== 0) {
+                e.stopPropagation();
+              }
+              wrapWithCheckLock(() => {
+                setIsResponseParamsDisabled(false);
+              })();
+            }}
+          >
+            {I18n.t('project_plugin_setup_metadata_edit')}
+          </Button>
+        ) : null}
+      </>
+    ),
+    content: responseParamsNode,
+    classNameWrap: 'plugin-tool-detail-response',
+  };
+};