feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf
2025-07-20 17:36:12 +08:00
commit 890153324f
14811 changed files with 1923430 additions and 0 deletions
--- a/frontend/packages/agent-ide/plugin-shared/.storybook/main.js
+++ b/frontend/packages/agent-ide/plugin-shared/.storybook/main.js
@@ -0,0 +1,31 @@
+import { mergeConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.tsx'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  viteFinal: config =>
+    mergeConfig(config, {
+      plugins: [
+        svgr({
+          svgrOptions: {
+            native: false,
+          },
+        }),
+      ],
+    }),
+};
+export default config;
--- a/frontend/packages/agent-ide/plugin-shared/.storybook/preview.js
+++ b/frontend/packages/agent-ide/plugin-shared/.storybook/preview.js
@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
--- a/frontend/packages/agent-ide/plugin-shared/.stylelintrc.js
+++ b/frontend/packages/agent-ide/plugin-shared/.stylelintrc.js
@@ -0,0 +1,5 @@
+const { defineConfig } = require('@coze-arch/stylelint-config');
+
+module.exports = defineConfig({
+  extends: [],
+});
--- a/frontend/packages/agent-ide/plugin-shared/README.md
+++ b/frontend/packages/agent-ide/plugin-shared/README.md
@@ -0,0 +1,16 @@
+# @coze-agent-ide/plugin-shared
+
+> Project template for react component with storybook.
+
+## Features
+
+- [x] eslint & ts
+- [x] esm bundle
+- [x] umd bundle
+- [x] storybook
+
+## Commands
+
+- init: `rush update`
+- dev: `npm run dev`
+- build: `npm run build`
--- a/frontend/packages/agent-ide/plugin-shared/tests/.gitkeep
+++ b/frontend/packages/agent-ide/plugin-shared/tests/.gitkeep
--- a/frontend/packages/agent-ide/plugin-shared/config/rush-project.json
+++ b/frontend/packages/agent-ide/plugin-shared/config/rush-project.json
@@ -0,0 +1,12 @@
+{
+  "operationSettings": [
+    {
+      "operationName": "test:cov",
+      "outputFolderNames": ["coverage"]
+    },
+    {
+      "operationName": "ts-check",
+      "outputFolderNames": ["dist"]
+    }
+  ]
+}
--- a/frontend/packages/agent-ide/plugin-shared/eslint.config.js
+++ b/frontend/packages/agent-ide/plugin-shared/eslint.config.js
@@ -0,0 +1,7 @@
+const { defineConfig } = require('@coze-arch/eslint-config');
+
+module.exports = defineConfig({
+  packageRoot: __dirname,
+  preset: 'web',
+  rules: {},
+});
--- a/frontend/packages/agent-ide/plugin-shared/package.json
+++ b/frontend/packages/agent-ide/plugin-shared/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@coze-agent-ide/plugin-shared",
+  "version": "0.0.1",
+  "description": "agent ide plugin shared componets",
+  "license": "Apache-2.0",
+  "author": "gaoyuanhan.duty@bytedance.com",
+  "maintainers": [],
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "exit 0",
+    "lint": "eslint ./ --cache",
+    "test": "vitest --run --passWithNoTests",
+    "test:cov": "npm run test -- --coverage"
+  },
+  "dependencies": {
+    "@blueprintjs/core": "^5.1.5",
+    "@coze-agent-ide/bot-plugin-tools": "workspace:*",
+    "@coze-arch/bot-api": "workspace:*",
+    "@coze-arch/bot-flags": "workspace:*",
+    "@coze-arch/bot-hooks": "workspace:*",
+    "@coze-arch/bot-icons": "workspace:*",
+    "@coze-arch/bot-semi": "workspace:*",
+    "@coze-arch/bot-studio-store": "workspace:*",
+    "@coze-arch/bot-tea": "workspace:*",
+    "@coze-arch/bot-utils": "workspace:*",
+    "@coze-arch/coze-design": "0.0.6-alpha.346d77",
+    "@coze-arch/i18n": "workspace:*",
+    "@coze-arch/report-events": "workspace:*",
+    "@coze-common/assets": "workspace:*",
+    "@coze-community/components": "workspace:*",
+    "@coze-foundation/space-store": "workspace:*",
+    "@coze-studio/bot-detail-store": "workspace:*",
+    "@coze-studio/bot-utils": "workspace:*",
+    "@coze-studio/components": "workspace:*",
+    "@flowgram-adapter/free-layout-editor": "workspace:*",
+    "ahooks": "^3.7.8",
+    "classnames": "^2.3.2",
+    "lodash-es": "^4.17.21",
+    "qs": "^6.11.2"
+  },
+  "devDependencies": {
+    "@coze-arch/bot-typings": "workspace:*",
+    "@coze-arch/eslint-config": "workspace:*",
+    "@coze-arch/stylelint-config": "workspace:*",
+    "@coze-arch/ts-config": "workspace:*",
+    "@coze-arch/vitest-config": "workspace:*",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/lodash-es": "^4.17.10",
+    "@types/qs": "^6.9.7",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@vitest/coverage-v8": "~3.0.5",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "stylelint": "^15.11.0",
+    "vite-plugin-svgr": "~3.3.0",
+    "vitest": "~3.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  }
+}
+
--- a/frontend/packages/agent-ide/plugin-shared/src/components/plugin-panel/helper.ts
+++ b/frontend/packages/agent-ide/plugin-shared/src/components/plugin-panel/helper.ts
@@ -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.
+ */
+ 
+interface ApiParam {
+  name: string;
+  input: {
+    type: string;
+    value: {
+      type: string;
+      content: string;
+    };
+  };
+}
+
+export const extractApiParams = (paramName: string, apiParams: ApiParam[]) => {
+  const param = apiParams.find(item => item.name === paramName);
+  return param?.input?.value?.content ?? '';
+};
--- a/frontend/packages/agent-ide/plugin-shared/src/components/plugin-panel/index.module.less
+++ b/frontend/packages/agent-ide/plugin-shared/src/components/plugin-panel/index.module.less
@@ -0,0 +1,463 @@
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable max-nesting-depth */
+/* stylelint-disable selector-class-pattern */
+@import '@coze-common/assets/style/common.less';
+@import '@coze-common/assets/style/mixins.less';
+
+.plugin-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  box-sizing: border-box;
+  width: calc(100% - 68px);
+  margin: 14px 0 0 68px;
+  padding-right: 12px;
+  padding-bottom: 14px;
+
+  &:not(:last-child) {
+    position: relative;
+    border-bottom: 1px solid var(--light-usage-border-color-border, rgba(28, 31, 35, 8%));
+  }
+
+  .plugin-api-main {
+    flex: 1;
+
+    .plugin-api-name {
+      width: 100%;
+
+      :global {
+        .semi-typography {
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 22px;
+          color: var(--light-usage-text-color-text-0, #1c1d23) !important;
+        }
+      }
+    }
+
+    .plugin-api-desc {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      margin-top: 4px;
+
+      :global {
+        .semi-typography {
+          font-size: 12px;
+          line-height: 16px;
+          color: var(--light-usage-text-color-text-2,
+              rgba(28, 31, 35, 60%)) !important;
+        }
+      }
+
+      .api-params {
+        display: flex;
+        align-items: center;
+        margin-top: 12px;
+
+        .params-tags {
+          max-width: 500px;
+
+          .tag-item {
+            width: fit-content;
+            min-width: fit-content;
+
+            font-size: 12px;
+            font-weight: 500;
+            font-style: normal;
+            line-height: 16px;
+            color: var(--light-usage-text-color-text-2, rgba(28, 29, 35, 60%));
+
+            border-radius: 6px;
+
+            /* 133.333% */
+          }
+
+          &> :not(:first-child) {
+            margin-left: 16px;
+          }
+        }
+
+        .params-desc {
+          cursor: pointer;
+
+          flex-shrink: 0;
+
+          font-size: 12px;
+          line-height: 16px;
+          color: #4d53e8;
+          letter-spacing: 0.12px !important;
+        }
+      }
+    }
+  }
+
+  .plugin-api-method {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    margin-left: 20px;
+  }
+}
+
+.plugin-panel-header {
+  display: flex;
+  flex: 1;
+  flex-wrap: nowrap;
+  align-items: center;
+
+  width: 0;
+  min-width: 0;
+  height: 80px;
+
+  font-weight: 400;
+
+  .creator-icon {
+    display: flex;
+    flex-shrink: 0;
+    border-radius: 50%;
+
+    img {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  .creator-time {
+    /* Paragraph/small/EN-Regular */
+
+    font-size: 12px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 16px;
+    color: var(--light-usage-text-color-text-3, rgba(28, 29, 35, 35%));
+    text-align: right;
+
+    /* 133.333% */
+    letter-spacing: 0.12px;
+  }
+
+  .header-icon {
+    display: flex;
+    flex-shrink: 0;
+
+    img {
+      width: 36px;
+      height: 36px;
+      background: #fff;
+    }
+  }
+
+  .header-main {
+    overflow: hidden;
+    flex: 1;
+
+    width: 0;
+    min-width: 0;
+    margin: 0 16px;
+
+    // margin-top: -12px;
+    .header-name {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      :global {
+        .semi-typography {
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 22px;
+          color: var(--light-usage-text-color-text-0, #1c1d23) !important;
+          word-wrap: break-word !important;
+        }
+
+        .semi-highlight-tag {
+          color: #fda633;
+          background-color: transparent;
+        }
+      }
+
+      .market-link-icon {
+        display: none;
+      }
+
+    }
+
+    .header-desc {
+      width: 100%;
+
+      :global {
+        .semi-typography {
+          font-size: 12px;
+          font-weight: 400;
+          color: var(--light-usage-text-color-text-1,
+              rgba(28, 29, 35, 80%)) !important;
+          letter-spacing: 0.12px;
+          word-wrap: break-word !important;
+        }
+      }
+    }
+  }
+
+  .header-info {
+    /* Paragraph/small/EN-Regular */
+
+    font-size: 12px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 16px;
+    color: var(--light-usage-text-color-text-3, rgba(28, 29, 35, 35%));
+    text-align: right;
+
+    /* 133.333% */
+    :global {
+      .semi-divider-vertical {
+        height: 10px;
+        color: var(--light-usage-border-color-border-1, rgba(28, 29, 35, 12%));
+      }
+    }
+  }
+}
+
+.plugin-content {
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  padding-bottom: 12px;
+
+  .loading-more {
+    text-align: center;
+  }
+
+  .plugin-content-filter {
+    display: flex;
+    padding: 0 36px;
+    padding-left: 22px;
+
+    .plugin-content-sort {
+      width: 150px;
+    }
+
+    .bot-tag {
+      display: flex;
+      align-items: center;
+    }
+
+    :global {
+      .semi-tabs-content {
+        padding: 0;
+      }
+
+      .semi-tabs-tab-button.semi-tabs-tab-active {
+        color: var(--light-usage-text-color-text-1, rgba(28, 29, 35, 80%));
+        background-color: transparent;
+
+        .semi-icon {
+          .common-svg-icon(20px, rgba(28, 29, 35, 0.8));
+        }
+      }
+
+      .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick,
+        .semi-icon-radio,
+        .semi-icon-checkbox_indeterminate) {
+        top: 0;
+        color: var(--light-usage-text-color-text-1, rgba(28, 29, 35, 80%));
+      }
+
+      .semi-tabs-tab-single.semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick,
+        .semi-icon-radio,
+        .semi-icon-checkbox_indeterminate) {
+        top: 0;
+      }
+
+      .semi-tabs-tab:last-child::before {
+        content: '';
+
+        position: absolute;
+        top: 12px;
+        left: -4px;
+
+        width: 1px;
+        height: 16px;
+
+        background-color: var(--light-usage-border-color-border,
+            rgba(28, 29, 35, 12%));
+      }
+    }
+  }
+
+  .plugin-collapse {
+    width: 100%;
+
+    :global {
+      .semi-collapse-item {
+        position: relative;
+        border: none;
+      }
+
+      .semi-collapse-header:hover::before {
+        content: '';
+
+        position: absolute;
+        top: -1px;
+        left: 0;
+
+        width: 100%;
+        height: 1px;
+
+        background-color: #f7f7fa;
+      }
+
+      .semi-collapse-header {
+        margin: 0;
+        border-bottom: 1px solid #dfdfdf;
+        border-radius: 0;
+
+        &:hover {
+          background: var(--light-usage-fill-color-fill-0,
+              rgba(46, 47, 56, 5%));
+          border-bottom: 1px solid transparent;
+          border-radius: 8px;
+
+
+        }
+
+        &:active {
+          background: var(--light-usage-fill-color-fill-0,
+              rgba(46, 47, 56, 5%));
+        }
+      }
+
+      .semi-collapse-header-icon {
+        width: auto;
+        height: 24px;
+
+        &:hover {
+          background: var(--light-usage-fill-color-fill-1,
+              rgba(46, 47, 56, 9%));
+          border-radius: 5px;
+        }
+      }
+    }
+
+    :global(.semi-collapse-header) {
+      &:hover {
+        .market-link-icon {
+          display: block;
+        }
+      }
+    }
+
+    .item-container {
+      padding: 0;
+    }
+
+    .collapse-icon {
+      .common-svg-icon(16px, rgba(28, 29, 35, 0.35));
+
+      cursor: pointer;
+      padding: 4px;
+    }
+
+    .activePanel {
+      margin-bottom: 8px;
+      background: var(--light-usage-fill-color-fill-0, rgba(46, 47, 56, 5%));
+      border: none;
+      border-radius: 8px;
+
+      :global {
+        .semi-collapse-header {
+          border-bottom: 1px solid #dfdfdf;
+        }
+
+        .semi-collapse-header:hover {
+          background: transparent;
+        }
+      }
+    }
+  }
+}
+
+.plugin-content,
+.plugin-collapse {
+  :global {
+    .semi-collapse-header {
+      min-width: 870px;
+      height: 140px !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;
+    }
+  }
+}
+
+button.operator-btn {
+  width: 98px;
+
+  &.added {
+    color: var(--light-usage-primary-color-primary-disabled, #b4baf6);
+    background: var(--light-usage-bg-color-bg-0, #fff);
+    border: 1px solid var(--light-usage-disabled-color-disabled-border, #f0f0f5);
+  }
+
+  &.addedMouseIn {
+    color: var(--light-color-red-red-5, #ff441e);
+    background: #fff;
+    border: 1px solid var(--light-usage-border-color-border-1, rgba(29, 28, 35, 12%));
+  }
+}
+
+.workflow_count_span {
+  display: inline-block;
+
+  width: 16px;
+  height: 16px;
+  margin-left: 6px;
+
+  font-size: 10px;
+  line-height: 17px;
+  color: #fff;
+  vertical-align: 1px;
+
+  background-color: rgba(77, 83, 232, 100%);
+  border-radius: 8px;
+}
+
+.store-plugin-tools {
+  display: flex;
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--light-usage-text-color-text-3, rgba(28, 29, 35, 35%));
+}
+
+.plugin-total {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  font-size: 12px;
+  color: var(--light-usage-text-color-text-3, rgba(28, 29, 35, 35%));
+}
--- a/frontend/packages/agent-ide/plugin-shared/src/components/plugin-panel/index.tsx
+++ b/frontend/packages/agent-ide/plugin-shared/src/components/plugin-panel/index.tsx
@@ -0,0 +1,661 @@
+/*
+ * 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-lines */
+/* eslint-disable @coze-arch/max-line-per-function */
+
+/* eslint-disable max-lines-per-function, complexity -- PluginItem 的 onApiToggle 后续可以提取优化 */
+/* eslint-disable import/order */
+import {
+  type MutableRefObject,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { type WorkflowNodeJSON } from '@flowgram-adapter/free-layout-editor';
+
+import classNames from 'classnames';
+import { useInViewport } from 'ahooks';
+import groupBy from 'lodash-es/groupBy';
+
+import {
+  Collapse,
+  Divider,
+  Highlight,
+  Image,
+  Space,
+  Toast,
+  Typography,
+  UIButton,
+} from '@coze-arch/bot-semi';
+import { IconViewinchatOutlined } from '@coze-arch/bot-icons';
+import { ConnectorList, OfficialLabel } from '@coze-community/components';
+import { I18n } from '@coze-arch/i18n';
+import {
+  emitEvent,
+  OpenBlockEvent,
+  formatDate,
+  formatNumber,
+} from '@coze-arch/bot-utils';
+
+import { EVENT_NAMES, sendTeaEvent } from '@coze-arch/bot-tea';
+import { PluginDevelopApi } from '@coze-arch/bot-api';
+import { useBotInfoStore } from '@coze-studio/bot-detail-store/bot-info';
+
+import { useSpaceStore } from '@coze-arch/bot-studio-store';
+import { OpenModeType } from '@coze-arch/bot-hooks';
+import {
+  From,
+  type PluginModalModeProps,
+} from '../../types/plugin-modal-types';
+import { getPluginApiKey } from '../../utils';
+import {
+  type PluginApi,
+  type PluginInfoForPlayground,
+  PluginType,
+} from '@coze-arch/bot-api/plugin_develop';
+import { type Int64 } from '@coze-arch/bot-api/developer_api';
+
+import s from './index.module.less';
+import { type SimplifyProductInfo } from '../../service/fetch-plugin';
+import { PluginItem } from './item';
+import { extractApiParams } from './helper';
+import { AvatarName } from '@coze-studio/components';
+
+import { PluginPerfStatics } from './plugin-perf-statics';
+import { withSlardarIdButton } from '@coze-studio/bot-utils';
+import { Tag, Tooltip } from '@coze-arch/coze-design';
+
+import {
+  IconCozDesktop,
+  IconCozInfoCircle,
+} from '@coze-arch/coze-design/icons';
+
+import { isBoolean, isUndefined } from 'lodash-es';
+import {
+  type CommercialSetting,
+  PluginType as ProductPluginType,
+} from '@coze-arch/bot-api/product_api';
+import { PluginAuthMode } from '../../types/auth-mode';
+export interface PluginPanelProps extends PluginModalModeProps {
+  info: PluginInfoForPlayground & {
+    listed_at?: Int64;
+    version_name?: string;
+    version_ts?: string;
+  };
+  highlightWords?: string[];
+  showButton?: boolean;
+  showCreator?: boolean;
+  showCreateTime?: boolean;
+  showMarketLink?: boolean;
+  showProjectPluginLink?: boolean;
+  showPublishTime?: boolean;
+  className?: string;
+  pluginApiList: PluginApi[];
+  onPluginApiListChange: (list: PluginApi[]) => void;
+  productInfo?: SimplifyProductInfo;
+  commercialSetting?: CommercialSetting;
+  isFromMarket?: boolean;
+  type?: string;
+  scrollContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  activeKey?: string | string[] | undefined;
+  agentId?: string;
+  workflowNodes?: WorkflowNodeJSON[];
+  index?: number;
+  addonBefore?: React.ReactNode;
+  addonAfter?: React.ReactNode;
+}
+
+const CopyPlugin = ({ onApiToggle }: { onApiToggle: () => void }) => (
+  <UIButton
+    onClick={e => {
+      e.stopPropagation();
+      onApiToggle?.();
+    }}
+  >
+    {I18n.t('add_resource_modal_copy_to_project')}
+  </UIButton>
+);
+
+export const PluginPanel: React.FC<PluginPanelProps> = ({
+  info,
+  highlightWords,
+  showCreator = false,
+  showCreateTime = true,
+  showPublishTime = false,
+  showButton = true,
+  showCopyPlugin = false,
+  className = '',
+  pluginApiList,
+  productInfo,
+  showMarketLink,
+  showProjectPluginLink,
+  clickProjectPluginCallback,
+  isFromMarket,
+  onPluginApiListChange,
+  openMode,
+  from,
+  workflowNodes,
+  openModeCallback,
+  onCopyPluginCallback,
+  scrollContainerRef,
+  type,
+  activeKey,
+  agentId,
+  index = 0,
+  addonBefore,
+  addonAfter,
+}) => {
+  const {
+    name,
+    plugin_apis,
+    id,
+    plugin_icon,
+    project_id,
+    desc_for_human,
+    create_time = 0,
+    update_time = 0,
+    statistic_data,
+    listed_at,
+    plugin_product_status,
+    plugin_type,
+    is_official,
+    version_name,
+    version_ts,
+  } = info;
+  const botId = useBotInfoStore(state => state.botId);
+  const { id: productId, status: marketStatus, auth_mode } = productInfo || {};
+  const refTarget = useRef(null);
+  const refHasReport = useRef(false);
+
+  // 记录当前点击插件的 apiId
+  const currentApiId = useRef('');
+
+  // 记录当前是否在拉取 store 的最新插件数据
+  const [isFetching, setIsFetching] = useState(false);
+
+  // 例如 { 'pluginID_apiID': [node1, node2, node3, ...] }
+  const pluginApiNodesMap = useMemo(
+    () =>
+      groupBy(workflowNodes || [], item => {
+        const apiParams = item.data?.inputs?.apiParam ?? [];
+        const pluginID = extractApiParams('pluginID', apiParams);
+        const apiID = extractApiParams('apiID', apiParams);
+        return `${pluginID}_${apiID}`;
+      }),
+    [workflowNodes],
+  );
+
+  const [isInView] = useInViewport(refTarget, {
+    root: () => scrollContainerRef?.current,
+  });
+  const isCheckNow = useMemo(() => {
+    if (!id) {
+      return false;
+    }
+    if (activeKey === id || activeKey?.includes(id)) {
+      return true;
+    }
+    return false;
+  }, [activeKey, id]);
+  useEffect(() => {
+    if (isCheckNow) {
+      sendTeaEvent(EVENT_NAMES.product_click_front, {
+        plugin_id: info.id,
+        product_id: `${productInfo?.id}`,
+        product_name: info?.name || '',
+        entity_type: 'plugin',
+        source: 'add_plugin_menu',
+        from: 'add_plugin_menu',
+        filter_tag: type || '',
+        action: 'expand_tools',
+        c_position: index,
+      });
+    }
+  }, [isCheckNow, productInfo?.id]);
+  useEffect(() => {
+    if (!isFromMarket || refHasReport.current) {
+      return;
+    }
+    if (isInView) {
+      refHasReport.current = true;
+      sendTeaEvent(EVENT_NAMES.product_show_front, {
+        plugin_id: info.id,
+        product_id: `${productInfo?.id}`,
+        product_name: info?.name || '',
+        entity_type: 'plugin',
+        source: 'add_plugin_menu',
+        from: 'add_plugin_menu',
+        filter_tag: type || '',
+        c_position: index,
+      });
+    }
+  }, [isInView, productInfo, info, type]);
+
+  const timePrefixText = showPublishTime
+    ? I18n.t('mkl_plugin_publish')
+    : showCreateTime
+      ? I18n.t('mkl_plugin_created')
+      : I18n.t('mkl_plugin_updated');
+  const timeToShow =
+    (showPublishTime
+      ? Number(listed_at)
+      : showCreateTime
+        ? Number(create_time)
+        : Number(update_time)) || 0;
+
+  const renderAuthStatus = () => {
+    if (isUndefined(auth_mode) || auth_mode === PluginAuthMode.NoAuth) {
+      return null;
+    }
+    if (
+      auth_mode === PluginAuthMode.Required ||
+      auth_mode === PluginAuthMode.Supported
+    ) {
+      return (
+        <Tag color="yellow" className="font-medium !py-2px !px-4px !h-20px">
+          {I18n.t('plugin_tool_config_status_unauthorized')}
+        </Tag>
+      );
+    }
+    return (
+      <Tag color="brand" className="font-medium !py-2px !px-4px !h-20px">
+        {I18n.t('plugin_tool_config_status_authorized')}
+      </Tag>
+    );
+  };
+
+  return (
+    <Collapse.Panel
+      data-testid="plugin-collapse-panel"
+      className={classNames(s['plugin-panel'], className)}
+      disabled={!plugin_apis?.length}
+      header={
+        <div className={s['plugin-panel-header']} ref={refTarget}>
+          <OfficialLabel
+            size="small"
+            visible={productInfo?.is_official ?? false}
+          >
+            <Image
+              className={s['header-icon']}
+              src={plugin_icon}
+              preview={false}
+            />
+          </OfficialLabel>
+
+          <div className={s['header-main']}>
+            <div className={s['header-name']}>
+              <Space spacing={8} className="flex-1">
+                {/* 插件名称最长30字符，无需ellipsis */}
+                <Typography.Text>
+                  <Highlight
+                    sourceString={name}
+                    searchWords={highlightWords}
+                    component="strong"
+                  />
+                </Typography.Text>
+                {renderAuthStatus()}
+                {showProjectPluginLink && clickProjectPluginCallback ? (
+                  <IconViewinchatOutlined
+                    className={s['market-link-icon']}
+                    onClick={event => {
+                      event.stopPropagation();
+                      clickProjectPluginCallback?.({
+                        ...info,
+                      });
+                    }}
+                  />
+                ) : null}
+                {showMarketLink && Number(productId) > 0 ? (
+                  <IconViewinchatOutlined
+                    className={s['market-link-icon']}
+                    onClick={event => {
+                      event.stopPropagation();
+                      sendTeaEvent(EVENT_NAMES.product_click_front, {
+                        plugin_id: info.id,
+                        product_id: `${productInfo?.id}`,
+                        product_name: info?.name || '',
+                        entity_type: 'plugin',
+                        source: 'add_plugin_menu',
+                        from: 'add_plugin_menu',
+                        filter_tag: type || '',
+                        action: 'enter_detailpage',
+                        c_position: index,
+                      });
+                      window.open(
+                        `/store/plugin/${productId}?from=add_plugin_menu`,
+                      );
+                    }}
+                  />
+                ) : null}
+              </Space>
+            </div>
+            <div className={classNames(s['header-desc'], 'flex items-center')}>
+              {plugin_type === PluginType.LOCAL ? (
+                <>
+                  <Tag color="cyan" size="mini">
+                    {I18n.t('local_plugin_label')}
+                  </Tag>
+                  <Divider layout="vertical" margin="4px" className="h-[9px]" />
+                </>
+              ) : null}
+              <Typography.Text
+                ellipsis={{
+                  showTooltip: {
+                    opts: {
+                      content: desc_for_human,
+                      style: { wordWrap: 'break-word', maxWidth: '560px' },
+                    },
+                  },
+                  rows: 1,
+                }}
+              >
+                {desc_for_human}
+              </Typography.Text>
+            </div>
+
+            <div className="my-[8px] leading-[16px]">
+              <Space spacing={4}>
+                {/* 条件 */}
+
+                {addonBefore}
+                {productInfo?.plugin_type === ProductPluginType.LocalPlugin ? (
+                  <Tag
+                    color="cyan"
+                    prefixIcon={
+                      <IconCozDesktop className="coz-fg-color-cyan text-[10px]" />
+                    }
+                    size="mini"
+                  >
+                    {I18n.t('store_service_plugin')}
+                  </Tag>
+                ) : null}
+                <Tag color="primary" size="mini">
+                  {I18n.t('bot_edit_page_plugin_list_plugin_has_n_tools', {
+                    n: plugin_apis?.length,
+                  })}
+                </Tag>
+                {!!statistic_data?.bot_quote && (
+                  <Tag color="primary" size="mini">
+                    {I18n.t('bot_edit_page_plugin_list_plugin_n_bots_using', {
+                      n: formatNumber(statistic_data?.bot_quote),
+                    })}
+                  </Tag>
+                )}
+                {productInfo?.connectors?.length ? (
+                  <>
+                    <Divider
+                      layout="vertical"
+                      margin={0}
+                      className="coz-stroke-primary"
+                    />
+                    <div className="ml-auto coz-fg-secondary text-base flex items-center gap-6px">
+                      {I18n.t('store_service_plugin_connector')}
+                      <ConnectorList connectors={productInfo?.connectors} />
+                      <Tooltip
+                        content={I18n.t('store_add_connector_tootip')}
+                        theme="dark"
+                      >
+                        <IconCozInfoCircle className="coz-fg-secondary text-lg" />
+                      </Tooltip>
+                    </div>
+                  </>
+                ) : null}
+              </Space>
+            </div>
+
+            <div className={'flex justify-between'}>
+              <Space className={s['header-info']}>
+                {showCreator ? (
+                  <span className={'max-w-[260px]'}>
+                    <AvatarName
+                      avatar={productInfo?.user_info?.avatar_url}
+                      username={productInfo?.user_info?.user_name}
+                      name={productInfo?.user_info?.name}
+                      label={{
+                        name: productInfo?.user_info?.user_label?.label_name,
+                        icon: productInfo?.user_info?.user_label?.icon_url,
+                        href: productInfo?.user_info?.user_label?.jump_link,
+                      }}
+                      nameMaxWidth={150}
+                    />
+                  </span>
+                ) : null}
+                {showCreator ? <Divider layout="vertical" /> : null}
+                <div className={s['creator-time']}>
+                  {`${timePrefixText} `}
+                  {formatDate(timeToShow, 'YYYY-MM-DD HH:mm')}
+                </div>
+                {addonAfter}
+              </Space>
+              <PluginPerfStatics
+                className={s['plugin-total']}
+                successRate={productInfo?.success_rate}
+                callAmount={productInfo?.call_amount}
+                avgExecTime={productInfo?.avg_exec_time}
+                botsUseCount={productInfo?.bots_use_count}
+              />
+            </div>
+          </div>
+          {showCopyPlugin ? (
+            <div>
+              <CopyPlugin
+                onApiToggle={() => {
+                  onCopyPluginCallback?.({
+                    pluginID: id,
+                    name,
+                  });
+                }}
+              />
+            </div>
+          ) : null}
+        </div>
+      }
+      itemKey={`${id}`}
+    >
+      {plugin_apis?.map(api => {
+        const isAdded = pluginApiList.some(
+          addedApi =>
+            (addedApi.api_id && addedApi.api_id === api.api_id) ||
+            (addedApi.plugin_id?.toString() ?? '0') + (addedApi.name ?? '') ===
+              (api.plugin_id?.toString() ?? '0') + (api.name ?? ''),
+        );
+        return (
+          <PluginItem
+            data-testid="plugin-panel-item-pluginapi"
+            isAdded={isAdded}
+            pluginApi={api}
+            from={from}
+            workflowNodes={
+              pluginApiNodesMap[`${api?.plugin_id}_${api?.api_id}`] ?? []
+            }
+            marketPluginInfo={
+              isFromMarket
+                ? productInfo?.tools?.find(item => item.id === api.api_id)
+                : undefined
+            }
+            isLocalPlugin={
+              productInfo?.plugin_type === ProductPluginType.LocalPlugin
+            }
+            connectors={productInfo?.connectors?.map(item => item.name ?? '')}
+            marketStatus={isFromMarket ? marketStatus : undefined}
+            onApiToggle={async () => {
+              let isSuccess = true;
+              emitEvent(OpenBlockEvent.PLUGIN_API_BLOCK_OPEN);
+              if (isAdded) {
+                onPluginApiListChange(
+                  pluginApiList.filter(
+                    item =>
+                      getPluginApiKey(item) !== getPluginApiKey(api) &&
+                      (!item?.api_id || item?.api_id !== api?.api_id),
+                  ),
+                );
+                Toast.success({
+                  content: I18n.t('bot_edit_tool_removed_toast', {
+                    api_name: api.name,
+                  }),
+                  showClose: false,
+                });
+                sendTeaEvent(EVENT_NAMES.click_tool_select, {
+                  operation: 'remove',
+                  bot_id: botId,
+                  operation_type: 'single',
+                  tool_id: api?.api_id || '',
+                  tool_name: api?.name || '',
+                  product_id: `${productInfo?.id}`,
+                  product_name: info?.name || '',
+                  source: 'add_plugin_list',
+                  from: 'bot_develop',
+                });
+              } else {
+                let apiToSend: PluginApi | undefined;
+                // api所在的plugin的信息，添加后存入store，避免GetPlaygroundPluginList多次请求
+                const pluginInfo = {
+                  plugin_icon,
+                  plugin_type,
+                  is_official,
+                  project_id,
+                  version_name,
+                  version_ts,
+                };
+                // 检测当前要添加的 Plugins名称在已添加列表里是否有重名的情况（模型不支持，所以加此处理）
+                if (
+                  pluginApiList
+                    .map(i => (i.plugin_name ?? '') + i.name)
+                    .includes((api.plugin_name ?? '') + (api.name ?? ''))
+                ) {
+                  Toast.error({
+                    content: I18n.t('plugin_name_conflict_error'),
+                    showClose: false,
+                  });
+                  isSuccess = false;
+                } else {
+                  if (isFromMarket) {
+                    if (api.plugin_id && api?.api_id && api?.api_id !== '0') {
+                      setIsFetching(true);
+                      currentApiId.current = api.api_id;
+
+                      // 从market 过来的数据，需要重新拉取最新数据。
+                      const result =
+                        await PluginDevelopApi.GetPlaygroundPluginList({
+                          page: 1,
+                          size: 1,
+                          plugin_ids: [api.plugin_id],
+                          plugin_types: [
+                            PluginType.PLUGIN,
+                            PluginType.APP,
+                            PluginType.LOCAL,
+                          ],
+                          space_id: useSpaceStore.getState().getSpaceId(),
+                        });
+
+                      setIsFetching(false);
+                      const targetApi =
+                        result?.data?.plugin_list?.[0]?.plugin_apis?.find(
+                          item => item?.api_id === api?.api_id,
+                        );
+                      if (targetApi) {
+                        Object.assign(targetApi, {
+                          plugin_product_status:
+                            result?.data?.plugin_list?.[0]
+                              .plugin_product_status,
+                          ...pluginInfo,
+                        });
+                      }
+                      apiToSend = targetApi;
+                    }
+                  } else {
+                    apiToSend = Object.assign(
+                      { ...api },
+                      { plugin_product_status, ...pluginInfo },
+                    );
+                  }
+                  if (apiToSend) {
+                    // 如果仅可添加一次，则添加后调用callback，并且关闭弹窗
+                    if (
+                      openMode === OpenModeType.OnlyOnceAdd ||
+                      (from &&
+                        [
+                          From.WorkflowAddNode,
+                          From.ProjectIde,
+                          From.ProjectWorkflow,
+                        ].includes(from))
+                    ) {
+                      const cbResult = await openModeCallback?.({
+                        ...apiToSend,
+                        ...pluginInfo,
+                      });
+                      /** 允许添加失败的场景  */
+                      if (isBoolean(cbResult)) {
+                        return cbResult;
+                      }
+                      return isSuccess;
+                    }
+                    if (!IS_OPEN_SOURCE) {
+                      // 添加plugin成功后，快速绑定预设卡片信息
+                      await PluginDevelopApi.QuickBindPluginPresetCard({
+                        plugin_id: apiToSend.plugin_id,
+                        api_name: apiToSend.name,
+                        bot_id: botId,
+                        agent_id: agentId,
+                        space_id: useSpaceStore.getState().getSpaceId(),
+                      });
+                    }
+                    onPluginApiListChange([...pluginApiList, apiToSend]);
+                    Toast.success({
+                      content: I18n.t('bot_edit_tool_added_toast', {
+                        api_name: api.name,
+                      }),
+                      showClose: false,
+                    });
+                  } else {
+                    Toast.error({
+                      content: withSlardarIdButton(
+                        I18n.t('bot_edit_tool_added_toast_error', {
+                          api_name: api.name,
+                        }),
+                      ),
+                      showClose: false,
+                    });
+                    isSuccess = false;
+                  }
+                }
+
+                sendTeaEvent(EVENT_NAMES.click_tool_select, {
+                  operation: 'add',
+                  bot_id: botId,
+                  operation_type: 'single',
+                  tool_id: api?.api_id || '',
+                  tool_name: api?.name || '',
+                  product_id: `${productInfo?.id}`,
+                  product_name: info?.name || '',
+                  source: 'add_plugin_list',
+                  from: 'bot_develop',
+                });
+              }
+
+              return isSuccess;
+            }}
+            key={(api.plugin_id?.toString() ?? '') + (api.name ?? '')}
+            showButton={showButton}
+            loading={isFetching && api?.api_id === currentApiId.current}
+          />
+        );
+      })}
+    </Collapse.Panel>
+  );
+};
--- a/frontend/packages/agent-ide/plugin-shared/src/components/plugin-panel/item.tsx
+++ b/frontend/packages/agent-ide/plugin-shared/src/components/plugin-panel/item.tsx
@@ -0,0 +1,293 @@
+/*
+ * 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 { useState } from 'react';
+
+import { sortBy } from 'lodash-es';
+import classNames from 'classnames';
+import { useBoolean } from 'ahooks';
+import { type WorkflowNodeJSON } from '@flowgram-adapter/free-layout-editor';
+import { ParametersPopover } from '@coze-studio/components/parameters-popover';
+import { CardThumbnailPopover } from '@coze-studio/components';
+import { I18n } from '@coze-arch/i18n';
+import {
+  Space,
+  Tooltip,
+  Typography,
+  UIButton,
+  UITag,
+} from '@coze-arch/bot-semi';
+import {
+  ProductStatus,
+  type public_api,
+} from '@coze-arch/bot-api/product_api';
+import { type PluginApi } from '@coze-arch/bot-api/plugin_develop';
+import { useViewExample } from '@coze-agent-ide/bot-plugin-tools/useViewExample';
+import { Popconfirm } from '@coze-arch/coze-design';
+import { OverflowList } from '@blueprintjs/core';
+
+import { From } from '../../types/plugin-modal-types';
+import { PluginPerfStatics } from './plugin-perf-statics';
+
+import s from './index.module.less';
+
+type PluginToolInfo = public_api.PluginToolInfo;
+
+export interface PluginItemProps {
+  isAdded?: boolean;
+  onApiToggle: () => Promise<boolean>;
+  pluginApi: PluginApi;
+  showButton?: boolean;
+  marketStatus?: ProductStatus;
+  from?: From;
+  workflowNodes?: WorkflowNodeJSON[];
+  loading?: boolean;
+  marketPluginInfo?: PluginToolInfo;
+  isLocalPlugin?: boolean;
+  connectors?: string[];
+}
+
+interface OverflowTagItem {
+  tagName?: string;
+  key?: string;
+}
+
+// eslint-disable-next-line complexity
+export const PluginItem: React.FC<PluginItemProps> = ({
+  isAdded,
+  onApiToggle,
+  pluginApi,
+  marketStatus,
+  showButton,
+  from,
+  workflowNodes,
+  loading,
+  marketPluginInfo,
+  isLocalPlugin,
+  connectors,
+}) => {
+  const { name, desc, parameters, debug_example } = pluginApi;
+  const { exampleNode, doShowExample } = useViewExample();
+  const [isMouseIn, { setFalse, setTrue }] = useBoolean(false);
+
+  const onMouseEnter = () => {
+    setTrue();
+  };
+  const onMouseLeave = () => {
+    setFalse();
+  };
+
+  const [count, setCount] = useState((workflowNodes || []).length);
+  const isFromWorkflow =
+    from === From.WorkflowAddNode || from === From.ProjectWorkflow;
+
+  const renderOverflow = (items: OverflowTagItem[]) =>
+    items.length ? (
+      <UITag className={s['tag-item']} size="small">
+        +{items.length}
+      </UITag>
+    ) : null;
+
+  const renderItem = (item: OverflowTagItem) => (
+    <UITag className={s['tag-item']} size="small" key={item.key}>
+      {item.tagName}
+    </UITag>
+  );
+  const isDisabled = marketStatus === ProductStatus?.Unlisted;
+  // 端插件且未添加过 提示适用渠道
+  const showAddConfirm =
+    isLocalPlugin &&
+    ((!isFromWorkflow && !isAdded) || (isFromWorkflow && count === 0));
+  return (
+    <>
+      {exampleNode}
+      <div className={s['plugin-item']}>
+        <div className={s['plugin-api-main']}>
+          <Space className={s['plugin-api-name']}>
+            <Typography.Text
+              ellipsis={{
+                showTooltip: {
+                  opts: {
+                    content: name,
+                    style: { wordBreak: 'break-word' },
+                  },
+                },
+              }}
+            >
+              {name}
+            </Typography.Text>
+            {/* 预览预置卡片 */}
+            {pluginApi?.card_binding_info?.thumbnail ? (
+              <CardThumbnailPopover
+                url={pluginApi?.card_binding_info?.thumbnail}
+              />
+            ) : null}
+          </Space>
+          <div className={s['plugin-api-desc']}>
+            <Typography.Text
+              style={{ width: 640 }}
+              ellipsis={{
+                showTooltip: {
+                  opts: {
+                    content: desc,
+                    style: { wordBreak: 'break-word', maxWidth: '560px' },
+                  },
+                },
+                rows: 1,
+              }}
+            >
+              {desc}
+            </Typography.Text>
+            {!!parameters?.length && (
+              <div className={s['api-params']}>
+                <OverflowList
+                  items={sortBy(
+                    parameters,
+                    item => item.name?.length,
+                  )?.map<OverflowTagItem>((tag, index) => ({
+                    tagName: tag.name,
+                    key: String(index),
+                  }))}
+                  overflowRenderer={renderOverflow}
+                  visibleItemRenderer={renderItem}
+                  collapseFrom="end"
+                  className={s['params-tags']}
+                />
+                <ParametersPopover pluginApi={pluginApi}>
+                  <div className={s['params-desc']}>{I18n.t('parameters')}</div>
+                </ParametersPopover>
+                {debug_example ? (
+                  <div
+                    className={s['params-desc']}
+                    style={{ marginLeft: '8px' }}
+                    onClick={() =>
+                      doShowExample({
+                        scene: 'bot',
+                        requestParams: parameters,
+                        debugExample: debug_example,
+                      })
+                    }
+                  >
+                    {I18n.t('plugin_edit_tool_view_example')}
+                  </div>
+                ) : null}
+              </div>
+            )}
+            <PluginPerfStatics
+              className={s['store-plugin-tools']}
+              callAmount={marketPluginInfo?.call_amount}
+              avgExecTime={marketPluginInfo?.avg_exec_time}
+              successRate={marketPluginInfo?.success_rate}
+              botsUseCount={marketPluginInfo?.bots_use_count}
+            />
+          </div>
+        </div>
+        <div className={s['plugin-api-method']}>
+          {showButton ? (
+            <Popconfirm
+              key={`${showAddConfirm}`}
+              trigger={!isDisabled && showAddConfirm ? 'click' : 'custom'}
+              position="bottomRight"
+              title={I18n.t('store_service_plugin_connector_only', {
+                connector_names: connectors?.join('、'),
+              })}
+              okText={I18n.t('Add_1')}
+              cancelText={I18n.t('Cancel')}
+              onConfirm={() => {
+                onApiToggle?.().then(isSuccess => {
+                  if (isSuccess) {
+                    setCount(prev => prev + 1);
+                  }
+                });
+              }}
+            >
+              <div>
+                <Tooltip
+                  content={I18n.t('mkpl_plugin_delisted_tips')}
+                  trigger={isDisabled ? 'hover' : 'custom'}
+                >
+                  <UIButton
+                    data-testid="bot.ide.plugin.plugin-panel-plugin-item-btn"
+                    className={classNames(s['operator-btn'], {
+                      [s.added]: !isDisabled && isAdded,
+                      [s.addedMouseIn]: !isDisabled && isAdded && isMouseIn,
+                    })}
+                    onClick={() => {
+                      if (showAddConfirm) {
+                        return;
+                      }
+                      onApiToggle?.().then(isSuccess => {
+                        if (isSuccess) {
+                          setCount(prev => prev + 1);
+                        }
+                      });
+                    }}
+                    onMouseEnter={onMouseEnter}
+                    disabled={isDisabled}
+                    loading={loading && isFromWorkflow}
+                    onMouseLeave={onMouseLeave}
+                  >
+                    {isAdded && !isDisabled ? (
+                      isMouseIn ? (
+                        I18n.t('Remove')
+                      ) : (
+                        I18n.t('Added')
+                      )
+                    ) : (
+                      <>
+                        <span>{I18n.t('Add_1')}</span>
+                        {isFromWorkflow && count !== 0 ? (
+                          <span className={s.workflow_count_span}>{count}</span>
+                        ) : null}
+                      </>
+                    )}
+                  </UIButton>
+                </Tooltip>
+              </div>
+            </Popconfirm>
+          ) : null}
+        </div>
+        {/* <Switch
+        disabled={isReadonly}
+        checked={Boolean(
+          $enabledPluginApiList.apiList.find(
+            api =>
+              (api.plugin_id?.toString() ?? '0') + (api.name ?? '') ===
+              (plugin_id?.toString() ?? '0') + (name ?? ''),
+          ),
+        )}
+        onChange={checked => {
+          if (!checked) {
+            const index = $enabledPluginApiList.apiList.findIndex(
+              api =>
+                (api.plugin_id?.toString() ?? '0') + (api.name ?? '') ===
+                (plugin_id?.toString() ?? '0') + (name ?? ''),
+            );
+
+            if (index >= 0) {
+              $enabledPluginApiList.apiList.splice(index, 1);
+            }
+            return;
+          }
+          $enabledPluginApiList.apiList.push(pluginApi);
+        }}
+      /> */}
+      </div>
+    </>
+  );
+};
--- a/frontend/packages/agent-ide/plugin-shared/src/components/plugin-panel/plugin-perf-statics/index.module.less
+++ b/frontend/packages/agent-ide/plugin-shared/src/components/plugin-panel/plugin-perf-statics/index.module.less
@@ -0,0 +1,24 @@
+.plugin-perf-statics {
+  display: flex;
+  gap: 8px;
+
+  .statics-metrics {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+
+    &:not(:last-child)::after {
+      content: '';
+
+      display: block;
+
+      width: 1px;
+      height: 8px;
+      margin-right: 6px;
+      margin-left: 8px;
+
+      background-color: currentcolor;
+    }
+  }
+}
+
--- a/frontend/packages/agent-ide/plugin-shared/src/components/plugin-panel/plugin-perf-statics/index.tsx
+++ b/frontend/packages/agent-ide/plugin-shared/src/components/plugin-panel/plugin-perf-statics/index.tsx
@@ -0,0 +1,82 @@
+/*
+ * 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 cls from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import {
+  IconCozPluginCitation,
+  IconCozBot,
+  IconCozClock,
+  IconCozSuccessRate,
+} from '@coze-arch/coze-design/icons';
+import { Tooltip } from '@coze-arch/coze-design';
+import { formatNumber, formatPercent, formatTime } from '@coze-arch/bot-utils';
+
+import s from './index.module.less';
+
+export interface PluginPerfStaticsProps {
+  avgExecTime?: number;
+  callAmount?: number;
+  successRate?: number;
+  botsUseCount?: number;
+  className?: string;
+}
+
+export const PluginPerfStatics = (props: PluginPerfStaticsProps) => {
+  const { avgExecTime, callAmount, successRate, botsUseCount, className } =
+    props;
+
+  if (IS_OPEN_SOURCE) {
+    return null;
+  }
+
+  if (
+    [avgExecTime, callAmount, successRate, botsUseCount].every(
+      r => r === undefined,
+    )
+  ) {
+    return null;
+  }
+
+  return (
+    <div className={cls(className, s['plugin-perf-statics'])}>
+      <Tooltip content={I18n.t('plugin_metric_usage_count')}>
+        <div className={s['statics-metrics']}>
+          <IconCozPluginCitation />
+          {formatNumber(callAmount || 0)}
+        </div>
+      </Tooltip>
+      <Tooltip content={I18n.t('plugin_metric_bots_using')}>
+        <div className={s['statics-metrics']}>
+          <IconCozBot />
+          {formatNumber(botsUseCount || 0)}
+        </div>
+      </Tooltip>
+      <Tooltip content={I18n.t('plugin_metric_average_time')}>
+        <div className={s['statics-metrics']}>
+          <IconCozClock />
+          {formatTime(avgExecTime || 0)}
+        </div>
+      </Tooltip>
+      <Tooltip content={I18n.t('plugin_metric_success_rate')}>
+        <div className={s['statics-metrics']}>
+          <IconCozSuccessRate />
+          {formatPercent(successRate)}
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
--- a/frontend/packages/agent-ide/plugin-shared/src/constants/plugin-modal-constants.ts
+++ b/frontend/packages/agent-ide/plugin-shared/src/constants/plugin-modal-constants.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 enum MineActiveEnum {
+  All = '1',
+  Mine = '2',
+}
+export const DEFAULT_PAGE = 1;
+export const DEFAULT_PAGE_SIZE = 10;
+
+export enum PluginFilterType {
+  Mine = 'mine',
+  Team = 'team',
+  Favorite = 'favorite',
+  Project = 'project',
+}
--- a/frontend/packages/agent-ide/plugin-shared/src/index.ts
+++ b/frontend/packages/agent-ide/plugin-shared/src/index.ts
@@ -0,0 +1,50 @@
+/*
+ * 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 {
+  MineActiveEnum,
+  DEFAULT_PAGE,
+  DEFAULT_PAGE_SIZE,
+  PluginFilterType,
+} from './constants/plugin-modal-constants';
+
+export {
+  type CommonQuery,
+  type ListItemCommon,
+  type RequestServiceResp,
+  type PluginQuery,
+  type PluginModalModeProps,
+  OpenModeType,
+  From,
+} from './types/plugin-modal-types';
+
+export { type MockSetSelectProps } from './types/mockset-interface';
+
+export {
+  getDefaultPluginCategory,
+  getPluginApiKey,
+  getRecommendPluginCategory,
+} from './utils';
+
+export { getApiUniqueId } from './utils/get-api-unique-id';
+
+export {
+  formatCacheKey,
+  fetchPlugin,
+  type PluginContentListItem,
+} from './service/fetch-plugin';
+
+export { PluginPanel, type PluginPanelProps } from './components/plugin-panel';
--- a/frontend/packages/agent-ide/plugin-shared/src/service/fetch-plugin.ts
+++ b/frontend/packages/agent-ide/plugin-shared/src/service/fetch-plugin.ts
@@ -0,0 +1,330 @@
+/*
+ * 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 qs from 'qs';
+import { useSpaceStore } from '@coze-foundation/space-store';
+import {
+  type Int64,
+  ProductEntityType,
+  type ProductInfo,
+  type public_api,
+  ProductListSource,
+  type CommercialSetting,
+} from '@coze-arch/bot-api/product_api';
+import {
+  type PluginInfoForPlayground,
+  PluginType,
+} from '@coze-arch/bot-api/plugin_develop';
+// import { type PluginInfoForPlayground } from '@coze-arch/bot-api/developer_api';
+import { ProductApi, PluginDevelopApi } from '@coze-arch/bot-api';
+
+import { type RequestServiceResp } from '../types/plugin-modal-types';
+import { type AuthMode } from '../types/auth-mode';
+import { DEFAULT_PAGE_SIZE } from '../constants/plugin-modal-constants';
+
+type ProductMetaInfo = public_api.ProductMetaInfo;
+type PluginExtraInfo = public_api.PluginExtraInfo;
+
+export type SimplifyProductInfo = Pick<
+  ProductMetaInfo,
+  | 'id'
+  | 'category'
+  | 'entity_type'
+  | 'favorite_count'
+  | 'heat'
+  | 'is_favorited'
+  | 'is_free'
+  | 'status'
+  | 'listed_at'
+  | 'user_info'
+> & { favorite_time: string; version_name?: string } & PluginExtraInfo &
+  AuthMode;
+
+export interface PluginContentListItem {
+  productInfo?: SimplifyProductInfo;
+  pluginInfo: PluginInfoForPlayground;
+  belong_page?: number;
+  isFromMarket?: boolean; //数据是从哪里获取的
+  commercial_setting?: CommercialSetting;
+}
+
+const filterProductListParams = (key: string, value: unknown) => {
+  const keyMap: {
+    [K in keyof Pick<
+      Required<public_api.GetProductListRequest>,
+      'current_entity_id' | 'current_entity_version'
+    >]: K;
+  } = {
+    current_entity_id: 'current_entity_id',
+    current_entity_version: 'current_entity_version',
+  };
+  if (!(key in keyMap)) {
+    return value;
+  }
+  // keyMap 键对应 value 为 stringifyNumber 过滤掉非法值 ''
+  if (value === '') {
+    return;
+  }
+  return value;
+};
+
+function formatPluginApiProductInfo(productInfo: ProductInfo) {
+  const name = productInfo?.meta_info?.name;
+  const pluginId = `${productInfo?.meta_info?.entity_id || ''}`;
+  const apiList = productInfo?.plugin_extra?.tools;
+  return apiList?.map(item => ({
+    api_id: `${item?.id || ''}`,
+    desc: item?.description,
+    name: item?.name,
+    plugin_id: pluginId,
+    plugin_name: name,
+    record_id: '',
+    // 插件预设卡片信息
+    card_binding_info: {
+      thumbnail: item?.card_info?.card_url,
+    },
+    parameters: item?.parameters?.map(param => ({
+      name: param?.name,
+      desc: param?.description,
+      required: param?.required,
+      type: param?.type,
+      sub_params: param?.sub_params,
+    })),
+    debug_example: item?.example,
+  }));
+}
+
+function formatPluginProductInfo(
+  item: ProductInfo,
+  currentPage: number,
+  favoriteTime: Int64 = '',
+): PluginContentListItem {
+  return {
+    productInfo: {
+      id: String(item?.meta_info?.id),
+      category: item?.meta_info?.category,
+      entity_type: item?.meta_info?.entity_type,
+      favorite_count: item?.meta_info?.favorite_count,
+      heat: item?.meta_info?.heat,
+      is_favorited: item?.meta_info?.is_favorited,
+      is_free: item?.meta_info?.is_free,
+      favorite_time: String(favoriteTime || ''),
+      status: item?.meta_info?.status,
+      listed_at: item?.meta_info?.listed_at,
+      user_info: item.meta_info.user_info,
+      ...item.plugin_extra,
+    },
+    pluginInfo: {
+      name: item?.meta_info?.name,
+      plugin_apis: formatPluginApiProductInfo(item),
+      id: `${item?.meta_info?.entity_id || ''}`,
+      plugin_icon: item?.meta_info?.icon_url,
+      desc_for_human: item?.meta_info?.description,
+      creator: {
+        id: `${item?.meta_info?.user_info?.user_id || ''}`,
+        name: item?.meta_info?.user_info?.name,
+        avatar_url: item?.meta_info?.user_info?.avatar_url,
+      },
+      statistic_data: {
+        bot_quote: item?.plugin_extra?.bots_use_count || 0,
+      },
+      tag: item?.meta_info?.category?.id,
+    },
+    isFromMarket: true,
+    belong_page: currentPage,
+
+    commercial_setting: item.commercial_setting,
+  };
+}
+
+// 拉取 插件市场的  插件商品列表
+async function getPluginFromMarket(
+  // @ts-expect-error -- linter-disable-autofix
+  queryParams,
+  // @ts-expect-error -- linter-disable-autofix
+  commParams,
+): Promise<RequestServiceResp<PluginContentListItem> | undefined> {
+  const { nextPage } = commParams;
+
+  const {
+    search,
+    type,
+    orderByPublic,
+    botInfo = {},
+    isOfficial,
+    pluginType,
+  } = queryParams;
+
+  const res = await ProductApi.PublicGetProductList(
+    {
+      entity_type: ProductEntityType.Plugin,
+      category_id: type === 'recommend' || IS_OPEN_SOURCE ? undefined : type,
+      sort_type: orderByPublic,
+      page_num: nextPage,
+      page_size: 20,
+      keyword: search,
+      source:
+        type === 'recommend'
+          ? ProductListSource.CustomizedRecommend
+          : undefined,
+      is_official: isOfficial,
+      plugin_type: pluginType,
+      ...botInfo,
+    },
+    {
+      paramsSerializer: p =>
+        qs.stringify(p, {
+          filter: filterProductListParams,
+        }),
+    },
+  );
+  const list = (res?.data?.products || []).map(item =>
+    formatPluginProductInfo(item, nextPage),
+  );
+  const hasMore = (list.length > 0 && res?.data?.has_more) || false;
+  return {
+    list,
+    total: -1,
+    hasMore,
+  };
+}
+
+async function getPluginFromFavorite(
+  // @ts-expect-error -- linter-disable-autofix
+  queryParams,
+  // @ts-expect-error -- linter-disable-autofix
+  commParams,
+): Promise<RequestServiceResp<PluginContentListItem> | undefined> {
+  const { nextPage } = commParams;
+
+  const { search, orderByFavorite } = queryParams;
+  const res = await ProductApi.PublicGetUserFavoriteList({
+    entity_type: ProductEntityType.Plugin,
+    sort_type: orderByFavorite,
+    page_num: nextPage,
+    page_size: 20,
+    key_wrod: search,
+  });
+  const list = (res?.data?.favorite_products || [])?.map(item =>
+    formatPluginProductInfo(
+      item.product,
+      nextPage,
+      `${item?.created_at || ''}`,
+    ),
+  );
+  const hasMore = (list.length > 0 && res?.data?.has_more) || false;
+  return {
+    list,
+    total: -1,
+    hasMore,
+  };
+}
+function getPluginFromMinOrTeam(
+  // @ts-expect-error -- linter-disable-autofix
+  queryParams,
+  // @ts-expect-error -- linter-disable-autofix
+  commParams,
+): Promise<RequestServiceResp<PluginContentListItem> | undefined> {
+  const { isMine, isTeam, isCreatorMine, isTemplate, nextPage } = commParams;
+  const pluginTypes = [PluginType.PLUGIN, PluginType.APP, PluginType.LOCAL];
+
+  const { search, orderByPublic, orderBy } = queryParams;
+  const params = {
+    page: nextPage || 1,
+    size: DEFAULT_PAGE_SIZE,
+    name: search || void 0,
+    self_created: isMine || (isTeam && isCreatorMine) ? true : undefined,
+    order_by: isTemplate ? orderByPublic : orderBy,
+    plugin_types: pluginTypes,
+    space_id: useSpaceStore.getState().getSpaceId(),
+    channel_id: 1,
+  };
+
+  return PluginDevelopApi.GetPlaygroundPluginList(params).then(res => {
+    const list =
+      res.data?.plugin_list?.map(item => ({
+        pluginInfo: item,
+        isFromMarket: false,
+        // 当前数据属于第几页的数据，用于page数据替换
+        // 如果后面用id + count代替page + size，可以把这个逻辑去掉
+        belong_page: nextPage,
+      })) || [];
+    const hasMore =
+      list.length > 0 && nextPage * DEFAULT_PAGE_SIZE < Number(res.data?.total);
+    return {
+      list,
+      total: -1,
+      hasMore,
+    };
+  });
+}
+
+async function getPluginFromProject(
+  // @ts-expect-error -- linter-disable-autofix
+  queryParams,
+  // @ts-expect-error -- linter-disable-autofix
+  commParams,
+): Promise<RequestServiceResp<PluginContentListItem> | undefined> {
+  const { nextPage } = commParams;
+  const { search, projectId, devId, orderBy } = queryParams;
+  const res = await PluginDevelopApi.GetDevPluginList({
+    page: nextPage,
+    size: DEFAULT_PAGE_SIZE,
+    space_id: useSpaceStore.getState().getSpaceId(),
+    name: search,
+    dev_id: devId,
+    project_id: projectId,
+    order_by: orderBy,
+  });
+  const list = (res?.plugin_list || [])?.map(item => ({
+    pluginInfo: item,
+    isFromMarket: false,
+    belong_page: nextPage,
+  }));
+  const hasMore =
+    list.length > 0 && nextPage * DEFAULT_PAGE_SIZE < Number(res?.total);
+  return {
+    list,
+    total: -1,
+    hasMore,
+  };
+}
+
+// @ts-expect-error -- linter-disable-autofix
+export const fetchPlugin = (queryParams, commParams) => {
+  const { isMine, isTeam, isFavorite, isProject } = commParams;
+  console.log('[div] params:', queryParams, commParams);
+  if (isMine || isTeam) {
+    return getPluginFromMinOrTeam(queryParams, commParams);
+  } else if (isFavorite) {
+    return getPluginFromFavorite(queryParams, commParams);
+  } else if (isProject) {
+    return getPluginFromProject(queryParams, commParams);
+  }
+  return getPluginFromMarket(queryParams, commParams);
+};
+
+// @ts-expect-error -- linter-disable-autofix
+export const formatCacheKey = ({ query, isSearching, isTemplate, page }) => {
+  const { orderBy, orderByPublic, type, mineActive } = query;
+  if (isSearching) {
+    return;
+  }
+  if (isTemplate) {
+    return `plugin-${type}-${page}-${orderByPublic}`;
+  }
+  return `plugin-${type}-${page}-${orderBy}-${mineActive}`;
+};
--- a/frontend/packages/agent-ide/plugin-shared/src/types/auth-mode.ts
+++ b/frontend/packages/agent-ide/plugin-shared/src/types/auth-mode.ts
@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+/** for open coze */
+export enum PluginAuthMode {
+  /** No authorization required */
+  NoAuth = 0,
+  /** Authorization is required, but not configured */
+  Required = 1,
+  /** Authorization is required and has been configured */
+  Configured = 2,
+  /** Authorization is required, but the configuration can be empty */
+  Supported = 3,
+}
+
+export interface AuthMode {
+  /** for open coze */
+  auth_mode?: PluginAuthMode;
+}
--- a/frontend/packages/agent-ide/plugin-shared/src/types/mockset-interface.ts
+++ b/frontend/packages/agent-ide/plugin-shared/src/types/mockset-interface.ts
@@ -0,0 +1,63 @@
+/*
+ * 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 CSSProperties } from 'react';
+
+import {
+  type OptionProps,
+  type optionRenderProps,
+} from '@coze-arch/bot-semi/Select';
+import {
+  type BizCtx,
+  type MockSet,
+  type ComponentSubject,
+} from '@coze-arch/bot-api/debugger_api';
+
+export interface BizCtxInfo
+  extends Omit<BizCtx, 'connectorID' | 'connectorUID' | 'ext'> {
+  ext?: { mockSubjectInfo?: string } & Record<string, string>;
+}
+
+export type BindSubjectInfo = ComponentSubject & { detail?: BindSubjectDetail };
+
+export interface BasicMockSetInfo {
+  bindSubjectInfo: ComponentSubject;
+  bizCtx: BizCtx;
+}
+
+export interface BindSubjectDetail {
+  name?: string;
+}
+export interface MockSetSelectProps {
+  bindSubjectInfo: BindSubjectInfo;
+  bizCtx: BizCtxInfo;
+  className?: string;
+  style?: CSSProperties;
+  readonly?: boolean;
+}
+
+export enum MockSetStatus {
+  Incompatible = 'Incompatible',
+  Normal = 'Normal',
+}
+
+export interface MockSelectOptionProps extends OptionProps {
+  detail?: MockSet;
+}
+
+export interface MockSelectRenderOptionProps extends optionRenderProps {
+  detail?: MockSet;
+}
--- a/frontend/packages/agent-ide/plugin-shared/src/types/plugin-modal-types.ts
+++ b/frontend/packages/agent-ide/plugin-shared/src/types/plugin-modal-types.ts
@@ -0,0 +1,127 @@
+/*
+ * 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 { OpenModeType } from '@coze-arch/bot-hooks';
+import {
+  type PluginType,
+  type Int64,
+  type product_common,
+  type SortType,
+} from '@coze-arch/bot-api/product_api';
+import { type PluginInfoForPlayground } from '@coze-arch/bot-api/plugin_develop';
+import {
+  type OrderBy,
+  type PluginApi,
+} from '@coze-arch/bot-api/developer_api';
+
+import { type MineActiveEnum } from '../constants/plugin-modal-constants';
+
+export interface CommonQuery {
+  search: string;
+  type: string | number;
+  page: number;
+  orderBy: OrderBy;
+  mineActive: MineActiveEnum;
+}
+export interface ListItemCommon {
+  belong_page?: number;
+}
+export interface RequestServiceResp<ListItem extends ListItemCommon> {
+  list: Array<ListItem>;
+  total: number;
+  hasMore?: boolean;
+}
+
+export interface PluginQuery {
+  projectId?: string;
+  devId?: string;
+  page: number;
+  search: string;
+  type: string | number;
+  orderBy: OrderBy;
+  orderByPublic: SortType | OrderBy;
+  mineActive: MineActiveEnum;
+  orderByFavorite: SortType;
+  // 后端规定传 undefined 才不拼 query，
+  isOfficial: undefined | true;
+  // multiAgent模式下传递
+  agentId?: string;
+  // 根据bot推荐插件
+  botInfo?: {
+    current_entity_type?: product_common.ProductEntityType;
+    current_entity_id?: Int64;
+    current_entity_version?: Int64;
+  };
+  pluginType?: PluginType;
+}
+
+/** plugin 弹窗打开来源 */
+export enum From {
+  /** 在 workflow 打开 */
+  WorkflowAddNode = 'workflow_addNode',
+
+  /** 在 bot skills 打开 */
+  BotSkills = 'bot_skills',
+
+  /** 在 bot triggers 打开  */
+  BotTrigger = 'bot_trigger',
+
+  /** 在 project ide 打开 */
+  ProjectIde = 'project_ide',
+
+  /** 在 project workflow 打开 */
+  ProjectWorkflow = 'project_workflow',
+}
+
+export { OpenModeType };
+export interface PluginModalModeProps {
+  /** 打开弹窗模式：
+   * 默认不传
+   * only_once_add：仅可添加一次后关闭，并返回callback函数
+   */
+  openMode?: OpenModeType;
+  from?: From;
+  openModeCallback?: (
+    val?: PluginApi & {
+      plugin_icon?: string;
+      project_id?: string;
+      version_name?: string;
+      version_ts?: string;
+    },
+  ) => void;
+  showButton?: boolean;
+  showCopyPlugin?: boolean;
+  onCopyPluginCallback?: (val: { pluginID?: string; name?: string }) => void;
+  // project ide 场景下传递需要传已选的插件，反显用
+  pluginApiList?: PluginApi[];
+  // project ide 场景下传递projectId
+  projectId?: string;
+  // 关闭弹窗回调
+  closeCallback?: () => void;
+  // project 场景下点击插件回调
+  clickProjectPluginCallback?: (
+    val?: PluginInfoForPlayground & {
+      listed_at?: Int64;
+    },
+  ) => void;
+  // 创建成功回调
+  onCreateSuccess?: (val?: { spaceId?: string; pluginId?: string }) => void;
+  // 是否展示商店插件
+  isShowStorePlugin?: boolean;
+  // 隐藏创建按钮
+  hideCreateBtn?: boolean;
+  initQuery?: Partial<PluginQuery>;
+}
--- a/frontend/packages/agent-ide/plugin-shared/src/typings.d.ts
+++ b/frontend/packages/agent-ide/plugin-shared/src/typings.d.ts
@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+ 
+/// <reference types='@coze-arch/bot-typings' />
--- a/frontend/packages/agent-ide/plugin-shared/src/utils/get-api-unique-id.ts
+++ b/frontend/packages/agent-ide/plugin-shared/src/utils/get-api-unique-id.ts
@@ -0,0 +1,26 @@
+/*
+ * 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 PluginApi } from '@coze-arch/bot-api/developer_api';
+
+export const getApiUniqueId = ({
+  apiInfo,
+}: {
+  apiInfo?: Pick<PluginApi, 'plugin_id' | 'name'>;
+}): string =>
+  apiInfo?.name && apiInfo?.plugin_id
+    ? `${apiInfo.name}_${apiInfo.plugin_id}`
+    : '';
--- a/frontend/packages/agent-ide/plugin-shared/src/utils/index.ts
+++ b/frontend/packages/agent-ide/plugin-shared/src/utils/index.ts
@@ -0,0 +1,39 @@
+/*
+ * 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 { type PluginApi } from '@coze-arch/bot-api/developer_api';
+import IconAllActive from '@coze-common/assets/svg/icon_all_active.svg';
+import IconAll from '@coze-common/assets/svg/icon_all.svg';
+import IconAIActive from '@coze-common/assets/svg/icon_ai_active.svg';
+import IconAI from '@coze-common/assets/svg/icon_ai.svg';
+
+export const getDefaultPluginCategory = () => ({
+  active_icon_url: IconAllActive,
+  icon_url: IconAll,
+  id: '',
+  name: I18n.t('All'),
+});
+
+export const getRecommendPluginCategory = () => ({
+  active_icon_url: IconAIActive,
+  icon_url: IconAI,
+  id: 'recommend',
+  name: I18n.t('plugin_category_auto_suggestion'),
+});
+
+export const getPluginApiKey = (api: Pick<PluginApi, 'plugin_id' | 'name'>) =>
+  (api.plugin_id ?? '0') + (api.name ?? '');
--- a/frontend/packages/agent-ide/plugin-shared/tsconfig.build.json
+++ b/frontend/packages/agent-ide/plugin-shared/tsconfig.build.json
@@ -0,0 +1,87 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "target": "ES2020",
+    "tsBuildInfoFile": "dist/tsconfig.build.tsbuildinfo",
+    "noImplicitAny": true,
+    "strictNullChecks": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"],
+  "references": [
+    {
+      "path": "../../arch/bot-api/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-flags/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-hooks/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-store/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-tea/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-typings/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-utils/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/i18n/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/report-events/tsconfig.build.json"
+    },
+    {
+      "path": "../bot-plugin/tools/tsconfig.build.json"
+    },
+    {
+      "path": "../../common/assets/tsconfig.build.json"
+    },
+    {
+      "path": "../../common/flowgram-adapter/free-layout-editor/tsconfig.build.json"
+    },
+    {
+      "path": "../../community/component/tsconfig.build.json"
+    },
+    {
+      "path": "../../components/bot-icons/tsconfig.build.json"
+    },
+    {
+      "path": "../../components/bot-semi/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/eslint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/stylelint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/ts-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/vitest-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../foundation/space-store/tsconfig.build.json"
+    },
+    {
+      "path": "../../studio/bot-utils/tsconfig.build.json"
+    },
+    {
+      "path": "../../studio/components/tsconfig.build.json"
+    },
+    {
+      "path": "../../studio/stores/bot-detail/tsconfig.build.json"
+    }
+  ]
+}
--- a/frontend/packages/agent-ide/plugin-shared/tsconfig.json
+++ b/frontend/packages/agent-ide/plugin-shared/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "exclude": ["**/*"],
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.misc.json"
+    }
+  ]
+}
--- a/frontend/packages/agent-ide/plugin-shared/tsconfig.misc.json
+++ b/frontend/packages/agent-ide/plugin-shared/tsconfig.misc.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler"
+  },
+  "include": ["__tests__", "vitest.config.ts", "stories"],
+  "exclude": ["./dist"],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    }
+  ]
+}
--- a/frontend/packages/agent-ide/plugin-shared/vitest.config.ts
+++ b/frontend/packages/agent-ide/plugin-shared/vitest.config.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { defineConfig } from '@coze-arch/vitest-config';
+
+export default defineConfig({
+  dirname: __dirname,
+  preset: 'web',
+});