feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/devops/debug/debug-panel/.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;

frontend/packages/devops/debug/debug-panel/.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;

frontend/packages/devops/debug/debug-panel/.stylelintrc.js

@@ -0,0 +1,5 @@
+const { defineConfig } = require('@coze-arch/stylelint-config');
+
+module.exports = defineConfig({
+  extends: [],
+});

frontend/packages/devops/debug/debug-panel/README.md

@@ -0,0 +1,16 @@
+# @coze-devops/debug-panel
+
+> 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`

frontend/packages/devops/debug/debug-panel/config/rush-project.json

@@ -0,0 +1,12 @@
+{
+  "operationSettings": [
+    {
+      "operationName": "test:cov",
+      "outputFolderNames": ["coverage"]
+    },
+    {
+      "operationName": "ts-check",
+      "outputFolderNames": ["./dist"]
+    }
+  ]
+}

frontend/packages/devops/debug/debug-panel/eslint.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('@coze-arch/eslint-config');
+
+module.exports = defineConfig({
+  packageRoot: __dirname,
+  preset: 'web',
+  rules: {},
+});

frontend/packages/devops/debug/debug-panel/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@coze-devops/debug-panel",
+  "version": "0.0.1",
+  "description": "coze debug panel",
+  "license": "Apache-2.0",
+  "author": "lukexian.bryce@bytedance.com",
+  "maintainers": [],
+  "main": "src/index.ts",
+  "typings": "src/index.ts",
+  "scripts": {
+    "build": "exit 0",
+    "lint": "eslint ./ --cache",
+    "test": "vitest --run --passWithNoTests",
+    "test:cov": "npm run test -- --coverage"
+  },
+  "dependencies": {
+    "@coze-devops/json-link-preview": "workspace:*",
+    "immer": "^10.0.3",
+    "json-bigint": "~1.0.0",
+    "qs": "^6.11.2",
+    "re-resizable": "~6.9.11",
+    "react-json-view": "~1.21.3"
+  },
+  "devDependencies": {
+    "@coze-arch/bot-api": "workspace:*",
+    "@coze-arch/bot-env": "workspace:*",
+    "@coze-arch/bot-flags": "workspace:*",
+    "@coze-arch/bot-icons": "workspace:*",
+    "@coze-arch/bot-semi": "workspace:*",
+    "@coze-arch/bot-tea": "workspace:*",
+    "@coze-arch/bot-typings": "workspace:*",
+    "@coze-arch/coze-design": "0.0.6-alpha.346d77",
+    "@coze-arch/eslint-config": "workspace:*",
+    "@coze-arch/i18n": "workspace:*",
+    "@coze-arch/logger": "workspace:*",
+    "@coze-arch/stylelint-config": "workspace:*",
+    "@coze-arch/ts-config": "workspace:*",
+    "@coze-arch/vitest-config": "workspace:*",
+    "@coze-devops/common-modules": "workspace:*",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/json-bigint": "~1.0.4",
+    "@types/lodash-es": "^4.17.10",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@vitest/coverage-v8": "~3.0.5",
+    "copy-to-clipboard": "^3.3.3",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "stylelint": "^15.11.0",
+    "tailwindcss": "~3.3.3",
+    "vite-plugin-svgr": "~3.3.0",
+    "vitest": "~3.0.5"
+  },
+  "peerDependencies": {
+    "@coze-arch/bot-api": "workspace:*",
+    "@coze-arch/bot-env": "workspace:*",
+    "@coze-arch/bot-flags": "workspace:*",
+    "@coze-arch/bot-icons": "workspace:*",
+    "@coze-arch/bot-semi": "workspace:*",
+    "@coze-arch/bot-tea": "workspace:*",
+    "@coze-arch/i18n": "workspace:*",
+    "@coze-devops/common-modules": "workspace:*",
+    "@douyinfe/semi-icons": "^2.36.0",
+    "@douyinfe/semi-illustrations": "^2.36.0",
+    "ahooks": "^3.7.8",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.7",
+    "lodash-es": "^4.17.21",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "zustand": "^4.4.7"
+  }
+}
+

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/chart/index.module.less

@@ -0,0 +1,68 @@
+/* stylelint-disable custom-property-pattern */
+@import '../common/common.module.less';
+
+.chat-trace-tabs {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  :global {
+    .semi-tabs-content {
+      overflow: hidden;
+      flex: 1;
+      padding: 0;
+    }
+
+    .semi-tabs-pane-motion-overlay {
+      height: 100%;
+    }
+  }
+}
+
+
+.chat-trace-tabs-bar {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 24px 24px 10px;
+
+  .chat-trace-tabs-bar-tab-bar {
+    cursor: pointer;
+
+    padding: 0 4px;
+
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22px;
+    color: var(--Light-usage-text---color-text-1, rgb(29 28 35 / 80%));
+
+    &.active {
+      color: var(--Light-color-brand---brand-5, #4D53E8);
+    }
+  }
+}
+
+.chat-trace-tab-pane_scroll {
+  .webkit-scrollbar_mixin();
+
+  overflow: auto;
+  height: 100%;
+}
+
+.chat-trace-tree {
+  overflow: visible;
+  height: 100%;
+  padding: 8px 24px 20px;
+}
+
+.chat-flamethread {
+  overflow: hidden;
+  height: 100%;
+  padding: 0 10px 20px 24px;
+}
+
+.resize-container-chat {
+  width: 100%;
+  height: 100%;
+}

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/chart/index.tsx

@@ -0,0 +1,190 @@
+/*
+ * 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 PropsWithChildren,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+import { Resizable } from 're-resizable';
+import classNames from 'classnames';
+import {
+  type CSpan,
+  DataSourceTypeEnum,
+  TraceFlamethread,
+  TraceTree,
+  type InteractionEventHandler,
+  type CTrace,
+} from '@coze-devops/common-modules/query-trace';
+import { I18n } from '@coze-arch/i18n';
+import { type TabsProps } from '@coze-arch/bot-semi/Tabs';
+import { TabPane, Tabs } from '@coze-arch/bot-semi';
+
+import { DebugPanelLayout } from '../../../typings';
+import { useDebugPanelStore } from '../../../store';
+import { useDebugPanelLayoutConfig } from '../../../hooks/use-debug-panel-layout-config';
+import {
+  DEBUG_PANEL_LAYOUT_DEFAULT_TEMPLATE_INFO,
+  GraphTabEnum,
+} from '../../../consts/static';
+
+import s from './index.module.less';
+
+interface PanelChartProps {
+  rootSpan: CTrace;
+  spans: CSpan[];
+  targetDetailSpan?: CSpan;
+  onTargetDetailSpanChange: (detailSpan: CSpan) => void;
+}
+
+const ChartResizableArea = (props: PropsWithChildren) => {
+  const { children } = props;
+  const [layoutConfig, setLayoutConfig] = useDebugPanelLayoutConfig();
+  return (
+    <Resizable
+      minHeight={
+        DEBUG_PANEL_LAYOUT_DEFAULT_TEMPLATE_INFO.side[DebugPanelLayout.Chat]
+          .height.min
+      }
+      maxHeight={
+        DEBUG_PANEL_LAYOUT_DEFAULT_TEMPLATE_INFO.side[DebugPanelLayout.Chat]
+          .height.max
+      }
+      minWidth="100%"
+      enable={{
+        bottom: true,
+      }}
+      defaultSize={{
+        height: layoutConfig.side[DebugPanelLayout.Chat],
+        width: '100%',
+      }}
+      // eslint-disable-next-line max-params
+      onResizeStop={(e, d, el, delta) => {
+        setLayoutConfig(config => {
+          config.side[DebugPanelLayout.Chat] += delta.height;
+        });
+      }}
+    >
+      <div className={classNames(s['resize-container-chat'])}>{children}</div>
+    </Resizable>
+  );
+};
+
+export const PanelChart = (props: PanelChartProps) => {
+  const { rootSpan, spans, targetDetailSpan, onTargetDetailSpanChange } = props;
+  const {
+    basicInfo: { spaceID },
+  } = useDebugPanelStore(
+    useShallow(state => ({
+      basicInfo: state.basicInfo,
+    })),
+  );
+  const [activeTab, setActiveTab] = useState<GraphTabEnum>(
+    GraphTabEnum.RunTree,
+  );
+
+  useEffect(() => {
+    onTargetDetailSpanChange(rootSpan as CSpan);
+  }, [rootSpan.id]);
+
+  const renderTabBar = useCallback<
+    Exclude<TabsProps['renderTabBar'], undefined>
+  >(tabBarProps => {
+    const { activeKey, list } = tabBarProps;
+
+    return (
+      <div className={s['chat-trace-tabs-bar']}>
+        {list?.map(({ tab, itemKey }) => (
+          <div
+            className={classNames(s['chat-trace-tabs-bar-tab-bar'], {
+              [s.active]: activeKey === itemKey,
+            })}
+            key={itemKey}
+            onClick={() => setActiveTab(itemKey as GraphTabEnum)}
+          >
+            {tab}
+          </div>
+        ))}
+      </div>
+    );
+  }, []);
+
+  const onFlamethreadClick: InteractionEventHandler = useCallback(
+    (_, element) => {
+      const { span } = element?.data?.[0]?.extra as { span: CSpan };
+      if (span?.id !== undefined) {
+        onTargetDetailSpanChange(span);
+      }
+    },
+    [],
+  );
+
+  return (
+    <ChartResizableArea>
+      <Tabs
+        className={s['chat-trace-tabs']}
+        activeKey={activeTab}
+        renderTabBar={renderTabBar}
+      >
+        <TabPane
+          tab={I18n.t('query_run_tree')}
+          itemKey={GraphTabEnum.RunTree}
+          className={s['chat-trace-tab-pane_scroll']}
+        >
+          <TraceTree
+            className={s['chat-trace-tree']}
+            dataSource={{
+              type: DataSourceTypeEnum.SpanData,
+              spanData: spans,
+            }}
+            spaceId={spaceID}
+            selectedSpanId={targetDetailSpan?.id}
+            onSelect={({ node }) => {
+              const { span } = node.extra as { span: CSpan };
+              if (span?.id !== undefined) {
+                onTargetDetailSpanChange(span);
+              }
+            }}
+          />
+        </TabPane>
+        <TabPane
+          tab={I18n.t('query_flamethread')}
+          className="h-full overflow-hidden"
+          itemKey={GraphTabEnum.Flamethread}
+        >
+          <div className={s['chat-flamethread']}>
+            <TraceFlamethread
+              dataSource={{
+                type: DataSourceTypeEnum.SpanData,
+                spanData: spans,
+              }}
+              disableViewScroll
+              selectedSpanId={targetDetailSpan?.id}
+              axisLabelSuffix="ms"
+              globalStyle={{
+                height: '100%',
+              }}
+              onClick={onFlamethreadClick}
+            />
+          </div>
+        </TabPane>
+      </Tabs>
+    </ChartResizableArea>
+  );
+};

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/common/common.module.less

@@ -0,0 +1,42 @@
+@scrollbar-size: 11px;
+@scrollbar-padding: 2px;
+@transition-timing-function-standard: cubic-bezier(0.34, 0.69, 0.1, 1);
+
+.webkit-scrollbar_mixin() {
+  &::-webkit-scrollbar-thumb {
+    background-color: rgb(125 125 125 / 30%);
+    background-clip: padding-box;
+    border: @scrollbar-padding solid transparent;
+    border-radius: 9999px;
+
+    transition: background .2s @transition-timing-function-standard;
+  }
+
+  &::-webkit-scrollbar {
+    width: @scrollbar-size;
+    height: @scrollbar-size;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    /* stylelint-disable-next-line declaration-no-important */
+    background-color: rgb(125 125 125 / 60%) !important;
+  }
+
+  &::-webkit-scrollbar:hover {
+    width: @scrollbar-size;
+    height: @scrollbar-size;
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+}

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/common/index.module.less

@@ -0,0 +1,104 @@
+.description-container {
+  display: flex;
+  gap: 24px;
+  justify-content: space-between;
+
+  .description-container-box {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    width: 0;
+
+    .description-container-item {
+      display: flex;
+      align-items: center;
+
+      width: 100%;
+
+      font-size: 12px;
+      line-height: 22px;
+      text-align: left;
+
+      .description-container-item-key {
+        flex-shrink: 0;
+        color: var(--Light-usage-text---color-text-3, rgb(29 28 35 / 35%));
+      }
+
+      .description-container-item-value {
+        display: flex;
+        flex: 1;
+        width: 0;
+        color: var(--Light-usage-text---color-text-1, rgb(29 28 35 / 80%));
+      }
+    }
+  }
+}
+
+.node-detail-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 20px;
+  margin: 20px 0 17px;
+
+  .node-detail-title-left {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--Light-color-black---black, #000);
+  }
+
+  .node-detail-title-right {
+    font-size: 12px;
+    color: var(--Light-usage-text---color-text-2, rgb(29 28 35 / 60%));
+  }
+}
+
+.common-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  :global(.semi-typography-action-copied) {
+    vertical-align: middle;
+  }
+
+  svg {
+    transform: translateY(-1px);
+  }
+}
+
+.common-text-content {
+  max-width: 400px;
+}
+
+.copy-icon {
+  color: #6b6b75;
+}
+
+.description-container-with-full-line {
+  .description-container-with-full-line-item {
+    display: flex;
+    align-items: center;
+
+    font-size: 12px;
+    line-height: 22px;
+    text-align: left;
+
+    &:nth-child(2) {
+      min-width: 182px;
+    }
+
+    .description-container-with-full-line-item-key {
+      flex-shrink: 0;
+      color: var(--Light-usage-text---color-text-3, rgb(29 28 35 / 35%));
+    }
+
+    .description-container-with-full-line-item-value {
+      display: flex;
+      flex: 1;
+      width: 0;
+      color: var(--Light-usage-text---color-text-1, rgb(29 28 35 / 80%));
+    }
+  }
+}

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/common/index.tsx

@@ -0,0 +1,203 @@
+/*
+ * 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 classNames from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import { type TextProps } from '@coze-arch/bot-semi/Typography';
+import { Typography } from '@coze-arch/bot-semi';
+import { IconCopy } from '@coze-arch/bot-icons';
+import { IconTick } from '@douyinfe/semi-icons';
+
+import { textWithFallback } from '../../../utils';
+import { type FieldCol } from '../../../typings';
+
+import s from './index.module.less';
+
+const { Text } = Typography;
+
+interface DebugTextProps extends TextProps {
+  text?: string;
+  useCopy?: boolean;
+}
+
+export const DebugText = (props: DebugTextProps) => {
+  const { text, useCopy, ...otherProps } = props;
+
+  return (
+    <div className={s['common-container']}>
+      <Text
+        ellipsis={{
+          showTooltip: {
+            opts: {
+              className: s['common-text-content'],
+              position: 'bottom',
+            },
+          },
+        }}
+        {...otherProps}
+      >
+        {textWithFallback(text)}
+      </Text>
+      {useCopy ? (
+        <Text
+          copyable={{
+            icon: <IconCopy className={s['copy-icon']} />,
+            successTip: <IconTick />,
+            content: text,
+            copyTip: I18n.t('query_detail_tip_copy'),
+          }}
+        />
+      ) : undefined}
+    </div>
+  );
+};
+
+interface NodeDescriptionProps {
+  cols: FieldCol[];
+}
+
+export const NodeDescription = (props: NodeDescriptionProps) => {
+  const { cols } = props;
+
+  return (
+    <div className={s['description-container']}>
+      {cols.map((col, colIndex) => {
+        const { fields } = col;
+        return (
+          <div className={s['description-container-box']} key={colIndex}>
+            {fields.map((field, fieldIndex) => {
+              const { key, value, options } = field;
+              return (
+                <div
+                  key={fieldIndex}
+                  className={s['description-container-item']}
+                >
+                  <div className={s['description-container-item-key']}>
+                    {key}&nbsp;:&nbsp;
+                  </div>
+                  <div className={s['description-container-item-value']}>
+                    {value === undefined || typeof value === 'string' ? (
+                      <DebugText
+                        text={value}
+                        useCopy={options?.copyable}
+                        style={{ fontSize: 12 }}
+                      />
+                    ) : (
+                      value
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+interface NodeDetailTitleProps {
+  text: string;
+  copyContent?: string;
+  description?: string;
+}
+
+export const NodeDetailTitle = (props: NodeDetailTitleProps) => {
+  const { text, copyContent, description } = props;
+
+  return (
+    <div className={s['node-detail-title']}>
+      <Text
+        className={classNames(s['node-detail-title-left'], s['common-text'])}
+        copyable={
+          copyContent
+            ? {
+                content: copyContent,
+                icon: <IconCopy className={s['copy-icon']} />,
+                successTip: <IconTick />,
+                copyTip: I18n.t('query_detail_tip_copy'),
+              }
+            : false
+        }
+      >
+        {text}
+      </Text>
+      {description ? (
+        <div className={s['node-detail-title-right']}>{description}</div>
+      ) : null}
+    </div>
+  );
+};
+
+export const NodeDescriptionWithFullLine = (props: NodeDescriptionProps) => {
+  const { cols } = props;
+
+  return (
+    <div
+      className={classNames(
+        'gap-x-[18px] flex flex-wrap justify-between',
+        s['description-container-with-full-line'],
+      )}
+    >
+      {cols.map(item => {
+        const { fields } = item;
+
+        return (
+          <>
+            {fields.map((field, index) => {
+              const { value, key, options } = field;
+              return (
+                <div
+                  key={index}
+                  className={classNames(
+                    s['description-container-with-full-line-item'],
+                    {
+                      '!w-full': options?.fullLine,
+                      'flex-1': !options?.fullLine,
+                    },
+                  )}
+                >
+                  <div
+                    className={
+                      s['description-container-with-full-line-item-key']
+                    }
+                  >
+                    {key}&nbsp;:&nbsp;
+                  </div>
+                  <div
+                    className={
+                      s['description-container-with-full-line-item-value']
+                    }
+                  >
+                    {value === undefined || typeof value === 'string' ? (
+                      <DebugText
+                        text={value}
+                        useCopy={options?.copyable}
+                        style={{ fontSize: 12 }}
+                      />
+                    ) : (
+                      <>{value}</>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </>
+        );
+      })}
+    </div>
+  );
+};

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/detail/index.module.less

@@ -0,0 +1,89 @@
+@import '../common/common.module.less';
+
+.detail-container {
+  .detail-title-container {
+    padding: 24px 0 10px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #000;
+  }
+
+  .detail-border-box {
+    .webkit-scrollbar_mixin();
+
+    overflow: auto;
+
+    max-height: 340px;
+    padding: 8px 4px;
+
+    font-family: Menlo;
+
+    border: 1px solid #1D1C2314;
+    border-radius: 8px;
+  }
+
+  .detail-border-box_error {
+    border: 1px solid #FF441E;
+  }
+
+  .detail-text {
+    font-size: 12px;
+    color: #1D1C23;
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+
+  .detail-pagination {
+    margin-bottom: 10px;
+
+    :global(.semi-page-prev),
+    :global(.semi-page-next) {
+      display: none;
+    }
+
+    :global(.semi-page-item) {
+      background: transparent;
+      border: 1px solid rgb(29 28 35 / 8%);
+      border-radius: 8px;
+
+      &:global(.semi-page-item-active),
+      &:global(:hover) {
+        font-weight: 600;
+        color: #4D53E8;
+
+        background: #F1F2FD;
+        border: none;
+        border-radius: 8px;
+      }
+    }
+  }
+
+  .react-json-container {
+    :global(.string-value) {
+      word-break: break-word;
+    }
+  }
+
+  .topology-flow {
+    width: 100%;
+    height: 300px;
+    padding: 24px 0;
+
+    .topology-flow-header {
+      display: flex;
+      align-items: center;
+
+      width: 100%;
+      height: 20px;
+      margin-bottom: 16px;
+
+      .topology-flow-header-title {
+        margin-right: 4px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #1D1C23;
+      }
+    }
+  }
+
+}

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/detail/index.tsx

@@ -0,0 +1,237 @@
+/*
+ * 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 ReactJson from 'react-json-view';
+import { useMemo } from 'react';
+
+import classNames from 'classnames';
+import { JsonLinkPreview } from '@coze-devops/json-link-preview';
+import {
+  type CSpanSingle,
+  type CSPanBatch,
+  type CSpan,
+  TopologyFlow,
+  DataSourceTypeEnum,
+  isBatchSpanType,
+} from '@coze-devops/common-modules/query-trace';
+import { I18n } from '@coze-arch/i18n';
+import { Divider, Pagination, Tag } from '@coze-arch/bot-semi';
+import { SpanStatus } from '@coze-arch/bot-api/ob_query_api';
+
+import { NodeDescription, NodeDetailTitle } from '../common';
+import { jsonParse, textWithFallback } from '../../../utils';
+import { useSpanCols } from '../../../hooks/use-span-cols';
+import { useBatchSpanCols } from '../../../hooks/use-batch-span-cols';
+import {
+  REACT_JSON_VIEW_CONFIG,
+  topologyTypeConfig,
+} from '../../../consts/static';
+
+import s from './index.module.less';
+
+export interface PanelDetailProps {
+  botId: string;
+  spaceId: string;
+  spans: CSpan[];
+  targetDetailSpan: CSpan;
+  curBatchPage: number;
+  setCurBatchPage: (curBatchPage: number) => void;
+}
+
+export const PanelDetail = (props: PanelDetailProps) => {
+  const {
+    botId,
+    spaceId,
+    spans,
+    targetDetailSpan,
+    curBatchPage,
+    setCurBatchPage,
+  } = props;
+
+  const isBatchNode = useMemo(
+    () => isBatchSpanType(targetDetailSpan.type),
+    [targetDetailSpan],
+  );
+
+  const { spanCols } = useSpanCols({ span: targetDetailSpan });
+
+  const { batchSpanCols } = useBatchSpanCols({
+    span: targetDetailSpan,
+    curBatchIndex: curBatchPage - 1,
+  });
+
+  const batchArea = useMemo(() => {
+    if (!isBatchNode) {
+      return null;
+    }
+    const batchSpan = targetDetailSpan as CSPanBatch;
+
+    return (
+      <>
+        <NodeDetailTitle text={I18n.t('query_select_batch')} />
+        <Pagination
+          className={s['detail-pagination']}
+          total={batchSpan.spans.length}
+          pageSize={1}
+          currentPage={curBatchPage}
+          onPageChange={setCurBatchPage}
+        />
+        <NodeDescription cols={batchSpanCols} />
+      </>
+    );
+  }, [isBatchNode, targetDetailSpan, curBatchPage, batchSpanCols]);
+
+  const inputArea = useMemo(() => {
+    const span = isBatchNode
+      ? (targetDetailSpan as CSPanBatch)?.spans[curBatchPage - 1]
+      : (targetDetailSpan as CSpanSingle);
+
+    const inputValue = jsonParse(
+      textWithFallback(span?.extra?.input) as string,
+    );
+
+    return (
+      <>
+        <NodeDetailTitle
+          text={I18n.t('query_detail_title_input')}
+          copyContent={
+            typeof inputValue === 'string'
+              ? inputValue
+              : JSON.stringify(inputValue)
+          }
+        />
+        <div className={s['detail-border-box']}>
+          {typeof inputValue === 'string' ? (
+            <div className={s['detail-text']}>{inputValue}</div>
+          ) : (
+            <div className={s['react-json-container']}>
+              {Array.isArray(inputValue) ? (
+                <JsonLinkPreview
+                  src={inputValue}
+                  bot_id={botId}
+                  space_id={spaceId}
+                />
+              ) : (
+                <ReactJson
+                  src={inputValue}
+                  {...REACT_JSON_VIEW_CONFIG}
+                  style={{
+                    fontSize: 12,
+                  }}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }, [isBatchNode, targetDetailSpan, curBatchPage]);
+
+  const outputArea = useMemo(() => {
+    const span = isBatchNode
+      ? (targetDetailSpan as CSPanBatch)?.spans[curBatchPage - 1]
+      : (targetDetailSpan as CSpanSingle);
+
+    const { status } = span;
+    const outputValue = jsonParse(
+      textWithFallback(span?.extra?.output) as string,
+    );
+
+    const isError = status === SpanStatus.Error;
+
+    return (
+      <>
+        <NodeDetailTitle
+          text={I18n.t('query_detail_title_output')}
+          copyContent={
+            typeof outputValue === 'string'
+              ? outputValue
+              : JSON.stringify(outputValue)
+          }
+        />
+        <div
+          className={classNames(
+            s['detail-border-box'],
+            isError && s['detail-border-box_error'],
+          )}
+        >
+          {typeof outputValue === 'string' ? (
+            <div className={s['detail-text']}>{outputValue}</div>
+          ) : (
+            <div className={s['react-json-container']}>
+              {Array.isArray(outputValue) ? (
+                <JsonLinkPreview
+                  src={outputValue}
+                  bot_id={botId}
+                  space_id={spaceId}
+                />
+              ) : (
+                <ReactJson
+                  src={outputValue}
+                  {...REACT_JSON_VIEW_CONFIG}
+                  style={{
+                    fontSize: 12,
+                  }}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }, [isBatchNode, targetDetailSpan, curBatchPage]);
+
+  const topologyArea = useMemo(
+    () => (
+      <TopologyFlow
+        botId={botId}
+        spaceId={spaceId}
+        dataSource={{
+          type: DataSourceTypeEnum.SpanData,
+          spanData: spans,
+        }}
+        selectedSpanId={targetDetailSpan.id}
+        className={s['topology-flow']}
+        renderHeader={type => (
+          <div className={s['topology-flow-header']}>
+            <div className={s['topology-flow-header-title']}>
+              {I18n.t('analytic_query_detail_topology')}
+            </div>
+            <Tag size="small" style={{ top: 1 }}>
+              {topologyTypeConfig[type]}
+            </Tag>
+          </div>
+        )}
+      />
+    ),
+    [botId, spaceId, spans, targetDetailSpan.id],
+  );
+
+  return (
+    <div className={s['detail-container']}>
+      <div className={s['detail-title-container']}>
+        {I18n.t('query_node_details')}
+      </div>
+      <NodeDescription cols={spanCols} />
+      <Divider margin={24} />
+      {batchArea}
+      {inputArea}
+      {outputArea}
+      {topologyArea}
+    </div>
+  );
+};

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/header/index.module.less

@@ -0,0 +1,35 @@
+.panel-header {
+  display: flex;
+  align-items: center;
+
+  height: 56px;
+  padding: 16px 24px;
+
+  background-color: var(--light-color-grey-grey-0, #f7f7fa);
+  border-bottom: 1px solid var(--light-usage-border-color-border, rgb(29 28 35 / 8%));
+
+  .panel-header-title {
+    flex-shrink: 0;
+
+    margin-right: 24px;
+
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 24px;
+    color: var(--light-usage-text-color-text-0, #1c1d23);
+  }
+
+  .panel-header-option {
+    display: flex;
+    flex: 1;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: flex-end;
+
+    width: 0;
+
+    .panel-header-option-icon {
+      color: var(--light-usage-text-color-text-2, rgb(29 28 35 / 60%));
+    }
+  }
+}

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/header/index.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 { UIButton } from '@coze-arch/bot-semi';
+import { IconClose } from '@douyinfe/semi-icons';
+
+import s from './index.module.less';
+
+export interface PanelHeaderProps {
+  onClose: () => void;
+}
+
+export const PanelHeader = (props: PanelHeaderProps) => {
+  const { onClose } = props;
+  return (
+    <div className={s['panel-header']}>
+      <div className={s['panel-header-title']}>
+        {I18n.t('debug_detail_tab')}
+      </div>
+      <div className={s['panel-header-option']}>
+        <UIButton
+          className={s['panel-header-option-icon']}
+          theme="borderless"
+          icon={<IconClose />}
+          size="small"
+          onClick={onClose}
+        />
+      </div>
+    </div>
+  );
+};

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/index.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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 { useEffect } from 'react';
+
+import { EVENT_NAMES, sendTeaEvent } from '@coze-arch/bot-tea';
+
+import { useDebugPanelStore } from '../../store';
+import { SideDebugPanel } from './side-panel';
+
+export interface DebugPanelProps {
+  botId: string;
+  spaceID?: string;
+  userID?: string;
+  placement: 'left';
+  currentQueryLogId: string;
+  isShow: boolean;
+  onClose: () => void;
+}
+
+export const DebugPanel = (props: DebugPanelProps) => {
+  const {
+    botId,
+    spaceID,
+    userID,
+    placement,
+    currentQueryLogId,
+    isShow,
+    onClose,
+  } = props;
+  const { setBasicInfo, setEntranceMessageLogId, setIsPanelShow, resetStore } =
+    useDebugPanelStore();
+
+  useEffect(() => {
+    setBasicInfo({
+      botId,
+      spaceID,
+      userID,
+      placement,
+    });
+    setEntranceMessageLogId(currentQueryLogId);
+    setIsPanelShow(isShow);
+  }, [botId, spaceID, userID, placement, isShow, currentQueryLogId]);
+
+  useEffect(() => {
+    sendTeaEvent(EVENT_NAMES.debug_page_show, {
+      bot_id: botId,
+      workspace_id: spaceID,
+    });
+  }, []);
+
+  const onDebugPanelClose = () => {
+    onClose();
+  };
+
+  useEffect(
+    () => () => {
+      resetStore();
+    },
+    [],
+  );
+
+  return <SideDebugPanel onClose={onDebugPanelClose} />;
+};

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/query-filter/index.module.less

@@ -0,0 +1,132 @@
+@import '../common/common.module.less';
+
+.query-filter {
+  width: 100%;
+
+  .query-filter-options {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+
+    height: 32px;
+    padding-right: 6px;
+    padding-left: 8px;
+
+    border: 1px solid  rgb(29 28 35 / 8%);
+    border-right: none;
+    border-radius: 8px 0 0 8px;
+
+    .query-filter-options-button_active {
+      background:  rgb(46 46 56 / 12%);
+    }
+  }
+
+  .query-filter-select {
+    flex: 1;
+    width: 0;
+
+    .query-filter-select-search-icon {
+      padding: 0 8px;
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+
+    }
+
+    .query-filter-select-tag {
+      overflow: hidden;
+
+      max-width: 100%;
+
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      border-radius: 6px;
+    }
+
+    .query-execute-status_success {
+      color: var(#1D1C23);
+      background: var(#F0F0F5);
+    }
+
+    .query-execute-status_broken {
+      color: var(#4D53E8);
+      background: var(#F1F2FD);
+    }
+
+    .query-execute-status_error {
+      color: var(#FF441E);
+      background: var(#FFF3EE);
+    }
+
+  }
+
+}
+
+.query-filter-select-dropdown {
+  :global(.semi-select-loading-wrapper) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+  }
+
+  :global(.semi-select-option-selected .semi-select-option-icon) {
+    color: #4D53E8;
+  }
+
+  .query-filter-select-dropdown-option {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 0;
+
+    font-size: 12px;
+    color: var(rgb(29 28 35 / 60%));
+
+    .query-filter-select-dropdown-option-icon {
+      display: flex;
+      align-items: center;
+      margin-right: 8px;
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    .query-filter-select-dropdown-option-text {
+      overflow: hidden;
+      flex: 1;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .query-filter-select-dropdown-option-time {
+      color: var(rgb(29 28 35 / 35%));
+    }
+
+  }
+}
+
+.dropdown-content {
+  :global(.semi-dropdown-item > .semi-icon) {
+    color: #4D53E8;
+  }
+}
+
+.custom-tooltip {
+  padding-right: 0;
+
+  :global(.semi-tooltip-content) {
+    overflow-y: auto;
+    /* stylelint-disable-next-line declaration-no-important */
+    max-height: 500px;
+    padding-right: 12px;
+    .webkit-scrollbar_mixin();
+  }
+}

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/query-filter/index.tsx

@@ -0,0 +1,282 @@
+/*
+ * 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, type PropsWithChildren, useRef } from 'react';
+
+import { debounce } from 'lodash-es';
+import classnames from 'classnames';
+import {
+  type CSpanSingle,
+  type CSpan,
+} from '@coze-devops/common-modules/query-trace';
+import { I18n, type I18nKeysNoOptionsType } from '@coze-arch/i18n';
+import {
+  Button,
+  Dropdown,
+  InputGroup,
+  Select,
+  Tag,
+  Tooltip,
+  UIButton,
+} from '@coze-arch/bot-semi';
+import { IconCalendar, IconFilter, IconSearch } from '@coze-arch/bot-icons';
+import { type SpanStatus } from '@coze-arch/bot-api/debugger_api';
+
+import { getPastWeekDates, getTimeInCurrentTimeZone } from '../../../utils';
+import {
+  type TargetOverallSpanInfo,
+  type QueryFilterItem,
+  type QueryFilterItemId,
+} from '../../../typings';
+import { EXECUTE_STATUS_FILTERING_OPTIONS } from '../../../consts/static';
+import { SPAN_STATUS_CONFIG_MAP } from '../../../consts/span';
+import {
+  FILTERING_OPTION_ALL,
+  QUERY_FILTER_DEBOUNCE_TIME,
+} from '../../../consts';
+
+import s from './index.module.less';
+export interface QueryFilterProps {
+  targetDateId?: QueryFilterItemId;
+  targetExecuteStatusId?: QueryFilterItemId;
+  targetOverallSpanInfo?: TargetOverallSpanInfo;
+  enhancedOverallSpans: CSpan[];
+  showLoadMore: boolean;
+  onSelectDate: (dateId: QueryFilterItemId) => void;
+  onSelectExecuteStatus: (executeStatusId: QueryFilterItemId) => void;
+  onFetchQuery: (inputSearch?: string, loadMore?: boolean) => Promise<CSpan[]>;
+  onSelectQuery: (overallSpanInfo: TargetOverallSpanInfo) => void;
+}
+
+export interface FilterDropdownProps {
+  dropdownMenuItem: QueryFilterItem[];
+  activeId?: QueryFilterItemId;
+  onSelectActiveId?: (id: QueryFilterItemId) => void;
+}
+
+const FilterDropdown = (props: PropsWithChildren<FilterDropdownProps>) => {
+  const { children, activeId, dropdownMenuItem, onSelectActiveId } = props;
+  return (
+    <Dropdown
+      clickToHide
+      position="bottomLeft"
+      showTick
+      contentClassName={s['dropdown-content']}
+      render={
+        <Dropdown.Menu>
+          {dropdownMenuItem.map(item => {
+            const { id, name } = item;
+            return (
+              <Dropdown.Item
+                key={id}
+                onClick={() => onSelectActiveId?.(id)}
+                active={activeId === id}
+              >
+                {name}
+              </Dropdown.Item>
+            );
+          })}
+        </Dropdown.Menu>
+      }
+    >
+      {children}
+    </Dropdown>
+  );
+};
+
+// eslint-disable-next-line @coze-arch/max-line-per-function
+export const QueryFilter = (props: QueryFilterProps) => {
+  const {
+    targetDateId,
+    targetExecuteStatusId,
+    targetOverallSpanInfo,
+    enhancedOverallSpans,
+    showLoadMore,
+    onSelectDate,
+    onSelectExecuteStatus,
+    onFetchQuery,
+    onSelectQuery,
+  } = props;
+
+  const [loading, setLoading] = useState(false);
+  const [loadMoreLoading, setLoadMoreLoading] = useState(false);
+
+  const currentInputSearchRef = useRef<string | undefined>(undefined);
+
+  const checkSelectAll = (targetId?: QueryFilterItemId) =>
+    targetId === FILTERING_OPTION_ALL;
+
+  const onFetchQueryWithLoading: (
+    inputSearch?: string,
+    loadMore?: boolean,
+  ) => Promise<void> = async (inputSearch, loadMore) => {
+    const setLoadingFn = loadMore ? setLoadMoreLoading : setLoading;
+    try {
+      setLoadingFn(true);
+      await onFetchQuery(inputSearch, loadMore);
+    } finally {
+      setLoadingFn(false);
+    }
+  };
+
+  const renderSelectedItem: (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    node: Record<string, any>,
+  ) => React.ReactNode = node => {
+    const { value, input, span } = node;
+    return value ? (
+      <Tooltip content={input} className={s['custom-tooltip']}>
+        <Tag
+          className={classnames(
+            s['query-filter-select-tag'],
+            s[SPAN_STATUS_CONFIG_MAP[span.status as SpanStatus].className],
+          )}
+        >
+          {input}
+        </Tag>
+      </Tooltip>
+    ) : null;
+  };
+
+  const renderInnerBottomSlot = () => (
+    <Button
+      theme="borderless"
+      type="primary"
+      loading={loadMoreLoading}
+      className="w-full"
+      onClick={() =>
+        onFetchQueryWithLoading(currentInputSearchRef.current, true)
+      }
+    >
+      {I18n.t('query_list_loadmore')}
+    </Button>
+  );
+
+  return (
+    <InputGroup className={s['query-filter']}>
+      <div className={s['query-filter-options']}>
+        <FilterDropdown
+          activeId={targetDateId}
+          onSelectActiveId={onSelectDate}
+          dropdownMenuItem={[FILTERING_OPTION_ALL, ...getPastWeekDates()].map(
+            item => {
+              const queryFilterItem: QueryFilterItem = {
+                id: item,
+                name:
+                  item === FILTERING_OPTION_ALL
+                    ? I18n.t('query_status_all')
+                    : item,
+              };
+              return queryFilterItem;
+            },
+          )}
+        >
+          <UIButton
+            theme="borderless"
+            icon={<IconCalendar />}
+            size="small"
+            className={classnames(
+              !checkSelectAll(targetDateId) &&
+                s['query-filter-options-button_active'],
+            )}
+          />
+        </FilterDropdown>
+        <FilterDropdown
+          activeId={targetExecuteStatusId}
+          onSelectActiveId={onSelectExecuteStatus}
+          dropdownMenuItem={EXECUTE_STATUS_FILTERING_OPTIONS.map(item => ({
+            id: item.id,
+            name: I18n.t(item.name as I18nKeysNoOptionsType),
+          }))}
+        >
+          <UIButton
+            theme="borderless"
+            icon={<IconFilter />}
+            size="small"
+            className={classnames(
+              !checkSelectAll(targetExecuteStatusId) &&
+                s['query-filter-options-button_active'],
+            )}
+          />
+        </FilterDropdown>
+      </div>
+
+      <Select
+        value={targetOverallSpanInfo}
+        prefix={<IconSearch className={s['query-filter-select-search-icon']} />}
+        filter
+        remote
+        loading={loading}
+        className={s['query-filter-select']}
+        dropdownClassName={s['query-filter-select-dropdown']}
+        onChangeWithObject
+        onSearch={debounce((value: string) => {
+          const input = value === '' ? undefined : value;
+          currentInputSearchRef.current = input;
+          onFetchQueryWithLoading(input);
+        }, QUERY_FILTER_DEBOUNCE_TIME)}
+        onDropdownVisibleChange={visible => {
+          if (visible) {
+            onFetchQueryWithLoading();
+          }
+        }}
+        onChange={value => {
+          onSelectQuery(value as TargetOverallSpanInfo);
+        }}
+        renderSelectedItem={renderSelectedItem}
+        innerBottomSlot={showLoadMore ? renderInnerBottomSlot() : null}
+      >
+        {enhancedOverallSpans.map(item => {
+          const { status, extra } = item as CSpanSingle;
+          const { dateString } = getTimeInCurrentTimeZone(item.start_time);
+          return (
+            <Select.Option
+              value={extra?.log_id}
+              key={extra?.log_id}
+              input={extra?.input}
+              span={item}
+            >
+              <div className={s['query-filter-select-dropdown-option']}>
+                <div className={s['query-filter-select-dropdown-option-icon']}>
+                  {SPAN_STATUS_CONFIG_MAP[status].icon}
+                </div>
+                <Tooltip
+                  content={extra?.input}
+                  className={s['custom-tooltip']}
+                  position="left"
+                >
+                  <div
+                    className={s['query-filter-select-dropdown-option-text']}
+                  >
+                    {extra?.input}
+                  </div>
+                </Tooltip>
+                <div className="ml-2 font-normal">
+                  {/* <span
+                    className={s['query-filter-select-dropdown-option-time']}
+                  >
+                    {timeOffsetString}
+                  </span>{' '} */}
+                  {dateString}
+                </div>
+              </div>
+            </Select.Option>
+          );
+        })}
+      </Select>
+    </InputGroup>
+  );
+};

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/side-panel/index.module.less

@@ -0,0 +1,95 @@
+@import '../common/common.module.less';
+
+.side-debug-panel {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: #fff;
+  box-shadow: 0 6px 8px 0 rgb(29 28 35 / 6%), 0 0 2px 0 rgb(29 28 35 / 18%);
+
+  .side-debug-panel-divider {
+    position: relative;
+    margin: 0;
+    border-bottom: 1px solid #EFEFF0;
+  }
+
+  .side-debug-panel-no-data {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+
+    height: 0;
+
+    :global(.semi-empty-description) {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--Light-usage-text---color-text-0, #1D1C23);
+    }
+
+  }
+
+  .side-debug-panel-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    width: 100%;
+    height: 0;
+
+    .side-debug-panel-container-sheet {
+      width: 100%;
+      padding: 24px 24px 4px;
+    }
+
+    .side-debug-panel-container-scroll-box {
+      .webkit-scrollbar_mixin();
+
+      overflow-y: auto;
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+
+      height: 0;
+
+      .side-debug-panel-container-scroll-box-summary {
+        position: relative;
+
+
+        width: 100%;
+        min-height: 145px;
+        padding: 16px 24px 24px;
+
+        background-color: #fff;
+      }
+
+      .side-debug-panel-container-scroll-box-sub-loading {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+
+        height: 0;
+      }
+
+      .side-debug-panel-container-scroll-box-chat {
+        position: relative;
+        width: 100%;
+        background-color: #fff;
+      }
+
+      .side-debug-panel-container-scroll-box-detail {
+        position: relative;
+        width: 100%;
+        padding: 0 24px 20px;
+        background-color: #fff;
+      }
+    }
+
+  }
+}

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/side-panel/index.tsx

@@ -0,0 +1,371 @@
+/*
+ * 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-per-function */
+/* eslint-disable max-params */
+/* eslint-disable @coze-arch/max-line-per-function */
+import { useRef, useState } from 'react';
+
+import { Resizable } from 're-resizable';
+import qs from 'qs';
+import { useAsyncEffect } from 'ahooks';
+import { IllustrationNoResult } from '@douyinfe/semi-illustrations';
+import { type CSpan } from '@coze-devops/common-modules/query-trace';
+import { I18n } from '@coze-arch/i18n';
+import { Divider, Empty, Spin } from '@coze-arch/bot-semi';
+import { type SpanStatus, SpanType } from '@coze-arch/bot-api/ob_query_api';
+import { obQueryApi } from '@coze-arch/bot-api';
+
+import { PanelSummary } from '../summary';
+import { QueryFilter } from '../query-filter';
+import { PanelHeader } from '../header';
+import { enhanceOriginalSpan, getSpanProp } from '../../../utils/span';
+import { getDailyTimestampByDate } from '../../../utils';
+import { DebugPanelLayout } from '../../../typings';
+import { useDebugPanelStore } from '../../../store';
+import { useDebugPanelLayoutConfig } from '../../../hooks/use-debug-panel-layout-config';
+import { DEBUG_PANEL_LAYOUT_DEFAULT_TEMPLATE_INFO } from '../../../consts/static';
+import {
+  FILTERING_LIMIT,
+  FILTERING_OPTION_ALL,
+  INITIAL_OFFSET,
+  TRACES_ADVANCE_INFO_TIME_BUFFER,
+} from '../../../consts';
+import { SpanInfoArea } from './span-info';
+
+import s from './index.module.less';
+
+export interface SideDebugPanelProps {
+  onClose: () => void;
+}
+
+export const SideDebugPanel = (props: SideDebugPanelProps) => {
+  const { onClose } = props;
+  const [subAreaLoading, setSubAreaLoading] = useState(false);
+  const [showLoadMore, setShowLoadMore] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const {
+    basicInfo: { spaceID = '', botId = '' },
+    isPanelShow,
+    targetDateId,
+    targetExecuteStatusId,
+    targetOverallSpanInfo,
+    enhancedOverallSpans,
+    spanCategory,
+    orgDetailSpans,
+    targetDetailSpan,
+    curBatchPage,
+    entranceMessageLogId,
+    setTargetOverallSpanInfo,
+    onSelectDate,
+    onSelectExecuteStatus,
+    setEnhancedOverallSpans,
+    setOrgDetailSpans,
+    setSpanCategory,
+    setTargetDetailSpan,
+    setCurBatchPage,
+  } = useDebugPanelStore();
+
+  const queryOffsetRef = useRef(INITIAL_OFFSET);
+
+  const [layoutConfig, setLayoutConfig] = useDebugPanelLayoutConfig();
+
+  const handleFetchQuery = async (inputSearch?: string, loadMore?: boolean) => {
+    if (!loadMore) {
+      setShowLoadMore(false);
+      queryOffsetRef.current = INITIAL_OFFSET;
+    }
+    const { data } = await obQueryApi.ListDebugQueries(
+      {
+        spaceID,
+        botID: botId,
+        status:
+          targetExecuteStatusId === FILTERING_OPTION_ALL
+            ? undefined
+            : [targetExecuteStatusId as SpanStatus],
+        inputSearch,
+        limit: FILTERING_LIMIT,
+        pageToken:
+          queryOffsetRef.current === INITIAL_OFFSET
+            ? undefined
+            : queryOffsetRef.current,
+        ...getDailyTimestampByDate(targetDateId),
+      },
+      {
+        paramsSerializer: p => qs.stringify(p, { arrayFormat: 'comma' }),
+      },
+    );
+    queryOffsetRef.current =
+      data?.next_page_token && data.next_page_token !== ''
+        ? data.next_page_token
+        : INITIAL_OFFSET;
+    const originSpans = data?.spans ?? [];
+    setShowLoadMore(data?.has_more ?? false);
+
+    if (originSpans.length === 0) {
+      setEnhancedOverallSpans([]);
+      return [];
+    }
+    const {
+      data: { traces_advance_info: traceAdvanceInfo },
+    } = await obQueryApi.BatchGetTracesAdvanceInfo({
+      space_id: spaceID ?? '',
+      bot_id: botId ?? '',
+      traces: originSpans.map(item => {
+        const { trace_id, start_time, latency } = item;
+        return {
+          trace_id,
+          start_time,
+          end_time: String(
+            Number(start_time) +
+              Number(latency) +
+              TRACES_ADVANCE_INFO_TIME_BUFFER,
+          ),
+        };
+      }),
+    });
+    const enhancedSpans = enhanceOriginalSpan(originSpans, traceAdvanceInfo);
+    const spans = loadMore
+      ? [...enhancedOverallSpans, ...enhancedSpans]
+      : enhancedSpans;
+    setEnhancedOverallSpans(spans);
+    return spans;
+  };
+
+  const handleFetchQueryDetail = async (logId: string) => {
+    const {
+      data: { spans },
+    } = await obQueryApi.GetTraceByLogID({
+      space_id: spaceID,
+      bot_id: botId,
+      log_id: logId,
+    });
+    setOrgDetailSpans(spans);
+    return spans;
+  };
+
+  const handleFetchTracesMetaInfo = async () => {
+    const { data } = await obQueryApi.GetTracesMetaInfo();
+    setSpanCategory(data?.span_category);
+  };
+
+  const selectQueryAuto = (span: CSpan) => {
+    const logId = getSpanProp(span, 'log_id') as string;
+    const input = getSpanProp(span, 'simple_input') as string;
+    const output = getSpanProp(span, 'output') as string;
+    setTargetOverallSpanInfo({
+      value: logId,
+      input,
+      output,
+      span,
+    });
+  };
+
+  useAsyncEffect(async () => {
+    if (targetOverallSpanInfo) {
+      const { span } = targetOverallSpanInfo;
+      const logId = getSpanProp(span, 'log_id') as string;
+      setSubAreaLoading(true);
+      try {
+        await handleFetchQueryDetail(logId);
+      } finally {
+        setSubAreaLoading(false);
+      }
+    }
+  }, [targetOverallSpanInfo]);
+
+  useAsyncEffect(async () => {
+    if (isPanelShow) {
+      setLoading(true);
+      onSelectDate(FILTERING_OPTION_ALL);
+      onSelectExecuteStatus(FILTERING_OPTION_ALL);
+      if (!spanCategory) {
+        await handleFetchTracesMetaInfo();
+      }
+      // 从某条消息进入
+      if (entranceMessageLogId) {
+        try {
+          const spans = await handleFetchQueryDetail(entranceMessageLogId);
+          const userInputSpan = spans.find(
+            item => item.type === SpanType.UserInput,
+          );
+          if (userInputSpan) {
+            const { trace_id, start_time, latency } = userInputSpan;
+            const {
+              data: { traces_advance_info: traceAdvanceInfo },
+            } = await obQueryApi.BatchGetTracesAdvanceInfo({
+              space_id: spaceID,
+              bot_id: botId,
+              traces: [
+                {
+                  trace_id,
+                  start_time,
+                  end_time: String(
+                    Number(start_time) +
+                      Number(latency) +
+                      TRACES_ADVANCE_INFO_TIME_BUFFER,
+                  ),
+                },
+              ],
+            });
+
+            const userInputCSpan = enhanceOriginalSpan(
+              [userInputSpan],
+              traceAdvanceInfo,
+            )?.[0];
+            selectQueryAuto(userInputCSpan);
+          }
+        } finally {
+          setLoading(false);
+        }
+      }
+      //直接进入
+      else {
+        try {
+          const spans = await handleFetchQuery();
+          const latestTrace = spans?.[0] as CSpan | undefined;
+          if (latestTrace) {
+            selectQueryAuto(latestTrace);
+          }
+        } finally {
+          setLoading(false);
+        }
+      }
+    }
+  }, [isPanelShow, entranceMessageLogId]);
+
+  return (
+    <Resizable
+      minWidth={
+        DEBUG_PANEL_LAYOUT_DEFAULT_TEMPLATE_INFO.side[DebugPanelLayout.Overall]
+          .width.min
+      }
+      maxWidth={
+        DEBUG_PANEL_LAYOUT_DEFAULT_TEMPLATE_INFO.side[DebugPanelLayout.Overall]
+          .width.max
+      }
+      enable={{
+        left: true,
+      }}
+      defaultSize={{
+        height: '100%',
+        width: layoutConfig.side[DebugPanelLayout.Overall],
+      }}
+      onResizeStop={(e, d, el, delta) => {
+        setLayoutConfig(config => {
+          config.side[DebugPanelLayout.Overall] += delta.width;
+        });
+      }}
+    >
+      <div className={s['side-debug-panel']}>
+        <PanelHeader onClose={onClose} />
+        {loading ? (
+          <div className={s['side-debug-panel-no-data']}>
+            <Spin />
+          </div>
+        ) : (
+          <>
+            <div className={s['side-debug-panel-container']}>
+              <div className={s['side-debug-panel-container-sheet']}>
+                <QueryFilter
+                  targetDateId={targetDateId}
+                  targetExecuteStatusId={targetExecuteStatusId}
+                  targetOverallSpanInfo={targetOverallSpanInfo}
+                  enhancedOverallSpans={enhancedOverallSpans}
+                  showLoadMore={showLoadMore}
+                  onSelectDate={onSelectDate}
+                  onSelectExecuteStatus={onSelectExecuteStatus}
+                  onSelectQuery={setTargetOverallSpanInfo}
+                  onFetchQuery={handleFetchQuery}
+                />
+              </div>
+              {!targetOverallSpanInfo ? (
+                <div className={s['side-debug-panel-no-data']}>
+                  <Empty
+                    image={<IllustrationNoResult />}
+                    description={I18n.t('query_data_empty')}
+                  />
+                </div>
+              ) : (
+                <div className={s['side-debug-panel-container-scroll-box']}>
+                  <Resizable
+                    minHeight={
+                      DEBUG_PANEL_LAYOUT_DEFAULT_TEMPLATE_INFO.side[
+                        DebugPanelLayout.Summary
+                      ].height.min
+                    }
+                    maxHeight={
+                      DEBUG_PANEL_LAYOUT_DEFAULT_TEMPLATE_INFO.side[
+                        DebugPanelLayout.Summary
+                      ].height.max
+                    }
+                    minWidth="100%"
+                    enable={{
+                      bottom: true,
+                    }}
+                    defaultSize={{
+                      height: layoutConfig.side[DebugPanelLayout.Summary],
+                      width: '100%',
+                    }}
+                    onResizeStop={(e, d, el, delta) => {
+                      setLayoutConfig(config => {
+                        config.side[DebugPanelLayout.Summary] += delta.height;
+                      });
+                    }}
+                  >
+                    <div
+                      className={
+                        s['side-debug-panel-container-scroll-box-summary']
+                      }
+                    >
+                      {targetOverallSpanInfo ? (
+                        <PanelSummary
+                          targetOverallSpanInfo={targetOverallSpanInfo}
+                        />
+                      ) : null}
+                    </div>
+                  </Resizable>
+                  <Divider className={s['side-debug-panel-divider']} />
+                  {subAreaLoading ? (
+                    <div
+                      className={
+                        s['side-debug-panel-container-scroll-box-sub-loading']
+                      }
+                    >
+                      <Spin />
+                    </div>
+                  ) : (
+                    <SpanInfoArea
+                      botId={botId}
+                      spaceId={spaceID}
+                      targetDetailSpan={targetDetailSpan}
+                      orgDetailSpans={orgDetailSpans}
+                      spanCategory={spanCategory}
+                      targetOverallSpanInfo={targetOverallSpanInfo}
+                      curBatchPage={curBatchPage}
+                      setTargetDetailSpan={setTargetDetailSpan}
+                      setCurBatchPage={setCurBatchPage}
+                    />
+                  )}
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </Resizable>
+  );
+};

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/side-panel/span-info.tsx

@@ -0,0 +1,116 @@
+/*
+ * 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 } from 'react';
+
+import {
+  useSpanTransform,
+  type CSpan,
+} from '@coze-devops/common-modules/query-trace';
+import { Divider } from '@coze-arch/bot-semi';
+import {
+  type TraceAdvanceInfo,
+  type Span,
+  SpanStatus,
+} from '@coze-arch/bot-api/ob_query_api';
+
+import { PanelDetail } from '../detail';
+import { PanelChart } from '../chart';
+import { type TargetOverallSpanInfo } from '../../../typings';
+import { type SpanCategory } from '../../../store';
+
+import s from './index.module.less';
+
+interface SpanInfoAreaProps {
+  botId: string;
+  spaceId: string;
+  targetDetailSpan?: CSpan;
+  orgDetailSpans?: Span[];
+  spanCategory?: SpanCategory;
+  targetOverallSpanInfo?: TargetOverallSpanInfo;
+  curBatchPage?: number;
+  setTargetDetailSpan: (targetDetailSpan: CSpan) => void;
+  setCurBatchPage: (curBatchPage: number) => void;
+}
+
+export const SpanInfoArea = (props: SpanInfoAreaProps) => {
+  const {
+    botId,
+    spaceId,
+    targetDetailSpan,
+    orgDetailSpans,
+    spanCategory,
+    targetOverallSpanInfo,
+    curBatchPage,
+    setTargetDetailSpan,
+    setCurBatchPage,
+  } = props;
+
+  const {
+    status = SpanStatus.Unknown,
+    input_tokens_sum = 0,
+    output_tokens_sum = 0,
+  } = targetOverallSpanInfo?.span ?? {};
+
+  const traceAdvanceInfo: Omit<TraceAdvanceInfo, 'trace_id'> = useMemo(
+    () => ({
+      tokens: {
+        input: input_tokens_sum,
+        output: output_tokens_sum,
+      },
+      status,
+    }),
+    [input_tokens_sum, output_tokens_sum, status],
+  );
+
+  const { rootSpan, spans } = useSpanTransform({
+    orgSpans: orgDetailSpans ?? [],
+    traceAdvanceInfo,
+    spanCategoryMeta: spanCategory,
+  });
+
+  return (
+    <>
+      <div className={s['side-debug-panel-container-scroll-box-chat']}>
+        {orgDetailSpans && spanCategory && targetOverallSpanInfo ? (
+          <PanelChart
+            rootSpan={rootSpan}
+            spans={spans}
+            targetDetailSpan={targetDetailSpan}
+            onTargetDetailSpanChange={detailSpan => {
+              setCurBatchPage(1);
+              setTargetDetailSpan(detailSpan);
+            }}
+          />
+        ) : null}
+      </div>
+
+      <Divider className={s['side-debug-panel-divider']} />
+      <div className={s['side-debug-panel-container-scroll-box-detail']}>
+        {targetDetailSpan && curBatchPage ? (
+          <PanelDetail
+            botId={botId}
+            spaceId={spaceId}
+            spans={spans}
+            targetDetailSpan={targetDetailSpan}
+            curBatchPage={curBatchPage}
+            setCurBatchPage={setCurBatchPage}
+          />
+        ) : null}
+      </div>
+    </>
+  );
+};

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/summary/index.module.less

@@ -0,0 +1,51 @@
+.summary-title-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+
+  .summary-title-container-data {
+    margin-right: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--Light-usage-text---color-text-0, #1d1c23);
+  }
+
+  .summary-title-container-tag {
+    display: inline-flex;
+    gap: 2px;
+    align-items: center;
+
+    height: 16px;
+    padding: 0 6px;
+
+    font-size: 12px;
+    white-space: nowrap;
+
+    border-radius: 4px;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  .query-execute-status_success {
+    color: var(--Light-usage-success---color-success, #3ec254);
+    background: var(--Light-color-green---green-1, #d2f3d5);
+  }
+
+  .query-execute-status_broken {
+    color: var(--Light-color-orange---orange-5, #ff9600);
+    background: var(--Light-color-orange---orange-1, #fff1cc);
+  }
+
+  .query-execute-status_error {
+    color: #ff441e;
+    background: var(--Light-color-red---red-1, #ffe0d2);
+  }
+
+  .feedback-button {
+    cursor: pointer;
+
+  }
+}

frontend/packages/devops/debug/debug-panel/src/components/debug-panel/summary/index.tsx

@@ -0,0 +1,117 @@
+/*
+ * 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 copy from 'copy-to-clipboard';
+import classNames from 'classnames';
+import { logger } from '@coze-arch/logger';
+import { I18n, type I18nKeysNoOptionsType } from '@coze-arch/i18n';
+import { Button } from '@coze-arch/coze-design';
+import { EVENT_NAMES, sendTeaEvent } from '@coze-arch/bot-tea';
+import { UIToast } from '@coze-arch/bot-semi';
+import { SpanStatus } from '@coze-arch/bot-api/debugger_api';
+
+import { NodeDescriptionWithFullLine } from '../common';
+import { fieldHandlers } from '../../../utils/field-item';
+import { type TargetOverallSpanInfo } from '../../../typings';
+import { useDebugPanelStore } from '../../../store';
+import { useTraceCols } from '../../../hooks/use-trace-cols';
+import { SPAN_STATUS_CONFIG_MAP } from '../../../consts/span';
+
+import s from './index.module.less';
+
+interface PanelSummaryProps {
+  targetOverallSpanInfo: TargetOverallSpanInfo;
+}
+
+export const PanelSummary = (props: PanelSummaryProps) => {
+  const { targetOverallSpanInfo } = props;
+  const {
+    basicInfo: { botId, userID, spaceID },
+  } = useDebugPanelStore();
+
+  const {
+    span,
+    output,
+    span: { status, latency, input_tokens_sum = 0, output_tokens_sum = 0 },
+  } = targetOverallSpanInfo;
+
+  const { icon, label, className } = SPAN_STATUS_CONFIG_MAP[status];
+
+  const { traceCols } = useTraceCols({ span });
+
+  const handleFeedback = () => {
+    try {
+      const feedbackMsg = [
+        `Logid: ${fieldHandlers.log_id(span).value}`,
+        `UID: ${userID}`,
+        `Botid: ${botId}`,
+        `StartTime: ${fieldHandlers.start_time(span).value}`,
+        `EndTime: ${fieldHandlers.end_time(span).value}`,
+        status === SpanStatus.Error && `ErrorMsg:${output}`,
+        `\n${I18n.t('debug_copy_suggestion')}`,
+      ]
+        .filter(Boolean)
+        .join('\n');
+
+      copy(feedbackMsg);
+      UIToast.success({
+        content: I18n.t('debug_copy_success'),
+      });
+
+      sendTeaEvent(EVENT_NAMES.click_debug_panel_feedback_button, {
+        bot_id: botId ?? '',
+        space_id: spaceID ?? '',
+        host: window.location.host,
+      });
+    } catch (error) {
+      logger.error({
+        eventName: 'fail_to_copy_debug_info',
+        error: error as Error,
+      });
+      UIToast.error(I18n.t('copy_failed'));
+    }
+  };
+  return (
+    <>
+      <div className={s['summary-title-container']}>
+        <div className={s['summary-title-container-data']}>
+          {I18n.t('query_latency', {
+            duration: latency,
+          })}
+          ms｜
+          {I18n.t('query_tokens_number', {
+            number: input_tokens_sum + output_tokens_sum,
+          })}
+        </div>
+        <div
+          className={classNames(s['summary-title-container-tag'], s[className])}
+        >
+          {icon}
+          {I18n.t(label as I18nKeysNoOptionsType)}
+        </div>
+        <Button
+          onClick={handleFeedback}
+          className="ml-2"
+          color="highlight"
+          size="small"
+        >
+          {I18n.t('debug_copy_report')}
+        </Button>
+      </div>
+      <NodeDescriptionWithFullLine cols={traceCols} />
+    </>
+  );
+};

frontend/packages/devops/debug/debug-panel/src/consts/env.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 const IS_DEV_MODE =
+  (process.env.NODE_ENV as 'production' | 'development' | 'test') ===
+  'development';

frontend/packages/devops/debug/debug-panel/src/consts/index.ts

@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+ 
+/**
+ * 支持筛选的query时间范围
+ */
+export const DATE_FILTERING_DAYS_NUMBER = 7;
+export const FILTERING_OPTION_ALL = 'ALL';
+/**
+ * query每次加载条数
+ */
+export const FILTERING_LIMIT = 30;
+export const TRACES_ADVANCE_INFO_TIME_BUFFER = 1000;
+export const TIME_MINUTE = 60;
+/**
+ * query拉取默认偏移量
+ */
+export const INITIAL_OFFSET = '0';
+export const EMPTY_TEXT = '-';
+/**
+ * query拉取防抖时间
+ */
+export const QUERY_FILTER_DEBOUNCE_TIME = 300;
+/**
+ * 调试台位置信息localStorage key
+ */
+export const DEBUG_PANEL_LAYOUT_KEY = 'coze_debug_panel_layout_config';

frontend/packages/devops/debug/debug-panel/src/consts/span.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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 {
+  spanCategoryConfigMap,
+  spanTypeConfigMap,
+  botEnvConfigMap,
+} from '@coze-devops/common-modules/query-trace';
+import { IconSuccess, IconError, IconWarningInfo } from '@coze-arch/bot-icons';
+import { SpanStatus } from '@coze-arch/bot-api/ob_query_api';
+
+import { type SpanStatusConfig } from '../typings';
+
+export const SPAN_TYPE_CONFIG_MAP = spanTypeConfigMap;
+
+export const SPAN_STATUS_CONFIG_MAP: Record<SpanStatus, SpanStatusConfig> = {
+  [SpanStatus.Success]: {
+    icon: <IconSuccess />,
+    className: 'query-execute-status_success',
+    label: 'query_status_success',
+  },
+  [SpanStatus.Broken]: {
+    icon: <IconWarningInfo />,
+    className: 'query-execute-status_broken',
+    label: 'query_status_broken',
+  },
+  [SpanStatus.Error]: {
+    icon: <IconError />,
+    className: 'query-execute-status_error',
+    label: 'query_status_error',
+  },
+  [SpanStatus.Unknown]: {
+    icon: <IconSuccess />,
+    className: 'query-execute-status_unknown',
+    label: 'query_status_unknown',
+  },
+};
+export const SPAN_CATEGORY_CONFIG_MAP = spanCategoryConfigMap;
+
+export const BOT_ENV_CONFIG_MAP = botEnvConfigMap;

frontend/packages/devops/debug/debug-panel/src/consts/static.tsx

@@ -0,0 +1,118 @@
+/*
+ * 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 ReactJsonViewProps } from 'react-json-view';
+
+import { TopoType } from '@coze-arch/bot-api/dp_manage_api';
+import { SpanStatus } from '@coze-arch/bot-api/debugger_api';
+
+import {
+  DebugPanelLayout,
+  type DebugPanelLayoutConfig,
+  type DebugPanelLayoutTemplateConfig,
+  type QueryFilterItem,
+} from '../typings';
+import { FILTERING_OPTION_ALL } from '.';
+
+export const EXECUTE_STATUS_FILTERING_OPTIONS: QueryFilterItem[] = [
+  {
+    id: FILTERING_OPTION_ALL,
+    name: 'query_status_all',
+  },
+  {
+    id: SpanStatus.Error,
+    name: 'query_status_failed',
+  },
+  {
+    id: SpanStatus.Success,
+    name: 'query_status_completed',
+  },
+];
+
+export enum GraphTabEnum {
+  RunTree = 'RunTree',
+  Flamethread = 'Flamethread',
+}
+
+export const DEBUG_PANEL_LAYOUT_DEFAULT_TEMPLATE_INFO: DebugPanelLayoutTemplateConfig =
+  {
+    side: {
+      [DebugPanelLayout.Overall]: {
+        width: {
+          min: 400,
+          max: 800,
+        },
+        height: {},
+      },
+      [DebugPanelLayout.Summary]: {
+        width: {},
+        height: {
+          min: 8,
+          max: 150,
+        },
+      },
+      [DebugPanelLayout.Chat]: {
+        width: {},
+        height: {
+          min: 1,
+          max: 500,
+        },
+      },
+    },
+    bottom: {
+      [DebugPanelLayout.Overall]: {
+        width: {},
+        height: {},
+      },
+      [DebugPanelLayout.Summary]: {
+        width: {},
+        height: {},
+      },
+      [DebugPanelLayout.Chat]: {
+        width: {},
+        height: {},
+      },
+    },
+  };
+
+export const DEBUG_PANEL_LAYOUT_DEFAULT_INFO: DebugPanelLayoutConfig = {
+  side: {
+    [DebugPanelLayout.Overall]: 400,
+    [DebugPanelLayout.Summary]: 124,
+    [DebugPanelLayout.Chat]: 280,
+  },
+  bottom: {
+    [DebugPanelLayout.Overall]: 0,
+    [DebugPanelLayout.Summary]: 0,
+    [DebugPanelLayout.Chat]: 0,
+  },
+};
+
+export const REACT_JSON_VIEW_CONFIG: Partial<ReactJsonViewProps> = {
+  name: false,
+  displayDataTypes: false,
+  indentWidth: 2,
+  iconStyle: 'triangle',
+  enableClipboard: false,
+  collapsed: 5,
+  collapseStringsAfterLength: 300,
+};
+
+export const topologyTypeConfig: Record<TopoType, string> = {
+  [TopoType.Agent]: 'Agent',
+  [TopoType.AgentFlow]: 'AgentFlow',
+  [TopoType.Workflow]: 'Workflow',
+};

frontend/packages/devops/debug/debug-panel/src/global.d.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.
+ */
+ 
+/// <reference types='@coze-arch/bot-typings' />
+
+declare module '*.less' {
+  const resource: { [key: string]: string };
+  export = resource;
+}

frontend/packages/devops/debug/debug-panel/src/hooks/use-batch-span-cols.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 { useMemo } from 'react';
+
+import {
+  isBatchSpanType,
+  type CSPanBatch,
+  type CSpan,
+} from '@coze-devops/common-modules/query-trace';
+import { SpanType } from '@coze-arch/bot-api/ob_query_api';
+
+import { fieldHandlers } from '../utils/field-item';
+import {
+  type FieldCol,
+  type BatchSpanType,
+  type FieldColConfig,
+} from '../typings';
+
+const colsConfigForLLMBatchCall: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'latency',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'tokens',
+      },
+    ],
+  },
+];
+
+const colsConfigForPluginToolBatch: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'latency',
+      },
+    ],
+  },
+];
+
+const colsConfigForCodeBatch: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'latency',
+      },
+    ],
+  },
+];
+
+const colsConfigMap = {
+  [SpanType.LLMBatchCall]: colsConfigForLLMBatchCall,
+  [SpanType.WorkflowLLMBatchCall]: colsConfigForLLMBatchCall,
+  [SpanType.PluginToolBatch]: colsConfigForPluginToolBatch,
+  [SpanType.WorkflowPluginToolBatch]: colsConfigForPluginToolBatch,
+  [SpanType.CodeBatch]: colsConfigForCodeBatch,
+  [SpanType.WorkflowCodeBatch]: colsConfigForCodeBatch,
+};
+
+export const useBatchSpanCols = (input: {
+  span?: CSpan;
+  curBatchIndex?: number;
+}): {
+  batchSpanCols: FieldCol[];
+} => {
+  const { span, curBatchIndex } = input;
+  const batchSpanCols: FieldCol[] = useMemo(() => {
+    if (!span || curBatchIndex === undefined || !isBatchSpanType(span.type)) {
+      return [];
+    }
+    const subSpan = (span as CSPanBatch).spans[curBatchIndex];
+    if (!subSpan) {
+      return [];
+    }
+    const colsConfig = colsConfigMap[subSpan.type as BatchSpanType];
+    return colsConfig.map(colConfig => {
+      const { fields } = colConfig;
+      return {
+        fields: fields?.map(fieldConfig => {
+          const { name, options } = fieldConfig;
+          return {
+            ...fieldHandlers[name](subSpan),
+            options,
+          };
+        }),
+      };
+    });
+  }, [span, curBatchIndex]);
+
+  return {
+    batchSpanCols,
+  };
+};

frontend/packages/devops/debug/debug-panel/src/hooks/use-debug-panel-layout-config.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 { useRef } from 'react';
+
+import { produce } from 'immer';
+
+import { isJsonString } from '../utils';
+import { type DebugPanelLayoutConfig } from '../typings';
+import { DEBUG_PANEL_LAYOUT_DEFAULT_INFO } from '../consts/static';
+import { DEBUG_PANEL_LAYOUT_KEY } from '../consts';
+
+export type SetLayoutConfigAction = (value: DebugPanelLayoutConfig) => void;
+
+export type UseDebugPanelLayoutConfig = () => [
+  DebugPanelLayoutConfig,
+  (input: DebugPanelLayoutConfig | SetLayoutConfigAction) => void,
+];
+
+/**
+ * 获取和修改存储在localStorage中的调试台布局数据
+ * @returns UseDebugPanelLayoutConfig
+ */
+export const useDebugPanelLayoutConfig: UseDebugPanelLayoutConfig = () => {
+  const initLayoutConfig = () => {
+    const layoutConfigString = localStorage.getItem(DEBUG_PANEL_LAYOUT_KEY);
+    if (layoutConfigString && isJsonString(layoutConfigString)) {
+      return JSON.parse(layoutConfigString) as DebugPanelLayoutConfig;
+    } else {
+      return DEBUG_PANEL_LAYOUT_DEFAULT_INFO;
+    }
+  };
+
+  const layoutConfigRef = useRef<DebugPanelLayoutConfig>(initLayoutConfig());
+
+  const setLayoutConfig = (
+    input: DebugPanelLayoutConfig | SetLayoutConfigAction,
+  ) => {
+    const layoutConfig =
+      typeof input === 'function'
+        ? produce(layoutConfigRef.current, draft => {
+            input(draft);
+          })
+        : input;
+    layoutConfigRef.current = layoutConfig;
+    window.localStorage.setItem(
+      DEBUG_PANEL_LAYOUT_KEY,
+      JSON.stringify(layoutConfig),
+    );
+  };
+
+  return [layoutConfigRef.current, setLayoutConfig];
+};

frontend/packages/devops/debug/debug-panel/src/hooks/use-span-cols.tsx

@@ -0,0 +1,656 @@
+/*
+ * 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 */
+import { useMemo } from 'react';
+
+import { type CSpan } from '@coze-devops/common-modules/query-trace';
+import { SpanType } from '@coze-arch/bot-api/ob_query_api';
+
+import { fieldHandlers } from '../utils/field-item';
+import { type FieldCol, type FieldColConfig } from '../typings';
+
+const colsConfigForStart: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'name',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+      {
+        name: 'first_response_time',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'latency_first',
+      },
+      {
+        name: 'tokens',
+      },
+    ],
+  },
+];
+
+const colsConfigForInvokeAgent: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'call_type',
+      },
+      {
+        name: 'agent_type',
+      },
+      {
+        name: 'temperature',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+      {
+        name: 'name',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'model',
+      },
+      {
+        name: 'tokens',
+      },
+      {
+        name: 'max_length_resp',
+      },
+      {
+        name: 'dialog_round',
+      },
+    ],
+  },
+];
+
+const colsConfigForSwitchAgent: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'name',
+      },
+    ],
+  },
+];
+
+const colsConfigForLLMCall: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'name',
+      },
+      {
+        name: 'call_type',
+      },
+      {
+        name: 'max_length_resp',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+      {
+        name: 'first_response_time',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'latency_first',
+      },
+      {
+        name: 'model',
+      },
+      {
+        name: 'tokens',
+      },
+      {
+        name: 'temperature',
+      },
+    ],
+  },
+];
+
+const colsConfigForWorkflow: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'tokens',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'name',
+      },
+    ],
+  },
+];
+
+const colsConfigForWorkflowEnd: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'tokens',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'name',
+      },
+    ],
+  },
+];
+
+const colsConfigForCode: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'name',
+      },
+    ],
+  },
+];
+
+const colsConfigForCondition: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'name',
+      },
+    ],
+  },
+];
+
+const colsConfigForPluginTool: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'call_type',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'name',
+      },
+    ],
+  },
+];
+
+const colsConfigForKnowledge: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'call_type',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'name',
+      },
+    ],
+  },
+];
+
+const colsConfigGeneral: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'name',
+      },
+    ],
+  },
+];
+
+const colsConfigForCard: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'call_type',
+      },
+      {
+        name: 'status',
+      },
+      {
+        name: 'card_id',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+      {
+        name: 'latency',
+      },
+    ],
+  },
+];
+
+const colsConfigForMessage: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'call_type',
+      },
+      {
+        name: 'status',
+      },
+      {
+        name: 'name',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'stream_output',
+      },
+    ],
+  },
+];
+
+const colsConfigForBWCondition: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+      {
+        name: 'branch_name',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'name',
+      },
+    ],
+  },
+];
+const colsConfigForBWConnector: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+      {
+        name: 'node_type',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'name',
+      },
+    ],
+  },
+];
+
+const colsConfigForHook: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'category',
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'end_time',
+      },
+      {
+        name: 'hook_type',
+      },
+      {
+        name: 'agent_id',
+      },
+      {
+        name: 'is_stream',
+      },
+    ],
+  },
+  {
+    fields: [
+      {
+        name: 'status',
+      },
+      {
+        name: 'latency',
+      },
+      {
+        name: 'name',
+      },
+      {
+        name: 'hook_resp_code',
+      },
+      {
+        name: 'hook_uri',
+      },
+    ],
+  },
+];
+const colsConfigMap = {
+  [SpanType.UserInput]: colsConfigForStart,
+  [SpanType.ThirdParty]: colsConfigForStart,
+  [SpanType.ScheduledTasks]: colsConfigForStart,
+  [SpanType.OpenDialog]: colsConfigForStart,
+  [SpanType.InvokeAgent]: colsConfigForInvokeAgent,
+  [SpanType.RestartAgent]: colsConfigForSwitchAgent,
+  [SpanType.SwitchAgent]: colsConfigForSwitchAgent,
+  [SpanType.LLMCall]: colsConfigForLLMCall,
+  [SpanType.WorkflowLLMCall]: colsConfigForLLMCall,
+  [SpanType.LLMBatchCall]: colsConfigForLLMCall,
+  [SpanType.WorkflowLLMBatchCall]: colsConfigForLLMCall,
+  [SpanType.Workflow]: colsConfigForWorkflow,
+  [SpanType.WorkflowStart]: colsConfigForWorkflowEnd,
+  [SpanType.WorkflowEnd]: colsConfigForWorkflowEnd,
+  [SpanType.PluginTool]: colsConfigForPluginTool,
+  [SpanType.WorkflowPluginTool]: colsConfigForPluginTool,
+  [SpanType.PluginToolBatch]: colsConfigForPluginTool,
+  [SpanType.WorkflowPluginToolBatch]: colsConfigForPluginTool,
+  [SpanType.Knowledge]: colsConfigForKnowledge,
+  [SpanType.WorkflowKnowledge]: colsConfigForKnowledge,
+  [SpanType.Code]: colsConfigForCode,
+  [SpanType.WorkflowCode]: colsConfigForCode,
+  [SpanType.CodeBatch]: colsConfigForCode,
+  [SpanType.WorkflowCodeBatch]: colsConfigForCode,
+  [SpanType.Condition]: colsConfigForCondition,
+  [SpanType.WorkflowCondition]: colsConfigForCondition,
+  [SpanType.Unknown]: colsConfigGeneral,
+  [SpanType.Chain]: [],
+  [SpanType.Card]: colsConfigForCard,
+  [SpanType.WorkflowMessage]: colsConfigForMessage,
+  [SpanType.Hook]: colsConfigForHook,
+  [SpanType.BWStart]: colsConfigGeneral,
+  [SpanType.BWEnd]: colsConfigGeneral,
+  [SpanType.BWBatch]: colsConfigGeneral,
+  [SpanType.BWLoop]: colsConfigGeneral,
+  [SpanType.BWCondition]: colsConfigForBWCondition,
+  [SpanType.BWLLM]: colsConfigForLLMCall,
+  [SpanType.BWParallel]: colsConfigGeneral,
+  [SpanType.BWScript]: colsConfigGeneral,
+  [SpanType.BWVariable]: colsConfigGeneral,
+  [SpanType.BWCallFlow]: colsConfigGeneral,
+  [SpanType.BWConnector]: colsConfigForBWConnector,
+};
+
+export const useSpanCols = (input: {
+  span?: CSpan;
+}): {
+  spanCols: FieldCol[];
+} => {
+  const { span } = input;
+  const spanCols: FieldCol[] = useMemo(() => {
+    if (!span) {
+      return [];
+    }
+    const colsConfig = colsConfigMap[span.type];
+    return (
+      colsConfig?.map(colConfig => {
+        const { fields } = colConfig;
+        return {
+          fields: fields?.map(fieldConfig => {
+            const { name, options } = fieldConfig;
+            return {
+              ...fieldHandlers[name](span),
+              options,
+            };
+          }),
+        };
+      }) || []
+    );
+  }, [span]);
+
+  return {
+    spanCols,
+  };
+};

frontend/packages/devops/debug/debug-panel/src/hooks/use-trace-cols.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 } from 'react';
+
+import { type CSpan } from '@coze-devops/common-modules/query-trace';
+
+import { fieldHandlers } from '../utils/field-item';
+import { type FieldCol, type FieldColConfig } from '../typings';
+
+const colsConfigForTrace: FieldColConfig[] = [
+  {
+    fields: [
+      {
+        name: 'log_id',
+        options: {
+          copyable: true,
+          fullLine: true,
+        },
+      },
+      {
+        name: 'start_time',
+      },
+      {
+        name: 'latency_first',
+      },
+    ],
+  },
+];
+
+export const useTraceCols = (input: {
+  span?: CSpan;
+}): {
+  traceCols: FieldCol[];
+} => {
+  const { span } = input;
+  const traceCols: FieldCol[] = useMemo(() => {
+    if (!span) {
+      return [];
+    }
+
+    return colsConfigForTrace.map(colConfig => {
+      const { fields } = colConfig;
+      return {
+        fields: fields?.map(fieldConfig => {
+          const { name, options } = fieldConfig;
+          return {
+            ...fieldHandlers[name](span),
+            options,
+          };
+        }),
+      };
+    });
+  }, [span]);
+
+  return {
+    traceCols,
+  };
+};

frontend/packages/devops/debug/debug-panel/src/index.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 './main.css';
+
+import { DebugPanel } from './components/debug-panel';
+export type { DebugPanelProps } from './components/debug-panel';
+
+export default DebugPanel;

frontend/packages/devops/debug/debug-panel/src/store/index.ts

@@ -0,0 +1,148 @@
+/*
+ * 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 { devtools } from 'zustand/middleware';
+import { create } from 'zustand';
+import { type CSpan } from '@coze-devops/common-modules/query-trace';
+import {
+  type GetTracesMetaInfoData,
+  type Span,
+} from '@coze-arch/bot-api/ob_query_api';
+
+import {
+  type BasicInfo,
+  type QueryFilterItemId,
+  type TargetOverallSpanInfo,
+} from '../typings';
+import { IS_DEV_MODE } from '../consts/env';
+import { FILTERING_OPTION_ALL } from '../consts';
+
+export type SpanCategory = GetTracesMetaInfoData['span_category'];
+
+interface DebugPanelStore {
+  isPanelShow: boolean;
+  basicInfo: BasicInfo;
+  /**
+   * 当前选中的Query LogID
+   */
+  entranceMessageLogId?: string;
+  /**
+   * 日期筛选结果
+   */
+  targetDateId?: QueryFilterItemId;
+  /**
+   * 状态筛选结果
+   */
+  targetExecuteStatusId?: QueryFilterItemId;
+  /**
+   * 当前选中的Trace节点信息
+   */
+  targetOverallSpanInfo?: TargetOverallSpanInfo;
+  /**
+   * 当前计算后的Trace列表
+   */
+  enhancedOverallSpans: CSpan[];
+  /**
+   * 某条Trace下Span节点列表
+   */
+  orgDetailSpans?: Span[];
+  /**
+   * 额外Span类型信息（服务端提供）
+   */
+  spanCategory?: SpanCategory;
+  /**
+   * 当前选中的Span节点信息
+   */
+  targetDetailSpan?: CSpan;
+  curBatchPage?: number;
+}
+
+interface DebugPanelAction {
+  setIsPanelShow: (isPanelShow: boolean) => void;
+  setBasicInfo: (basicInfo: BasicInfo) => void;
+  setEntranceMessageLogId: (entranceMessageLogId: string) => void;
+  setTargetOverallSpanInfo: (overallSpanInfo: TargetOverallSpanInfo) => void;
+  onSelectDate: (dateId: QueryFilterItemId) => void;
+  onSelectExecuteStatus: (executeStatusId: QueryFilterItemId) => void;
+  setEnhancedOverallSpans: (enhancedOverallSpans: CSpan[]) => void;
+  setOrgDetailSpans: (orgDetailSpans: Span[]) => void;
+  setSpanCategory: (spanCategory?: SpanCategory) => void;
+  setTargetDetailSpan: (targetDetailSpan?: CSpan) => void;
+  setCurBatchPage: (curBatchPage: number) => void;
+  resetStore: () => void;
+}
+
+const initialStore: DebugPanelStore = {
+  isPanelShow: false,
+  basicInfo: {
+    placement: 'left',
+  },
+  entranceMessageLogId: undefined,
+  targetDateId: FILTERING_OPTION_ALL,
+  targetExecuteStatusId: FILTERING_OPTION_ALL,
+  enhancedOverallSpans: [],
+  targetOverallSpanInfo: undefined,
+  orgDetailSpans: undefined,
+  targetDetailSpan: undefined,
+};
+
+export const useDebugPanelStore = create<DebugPanelStore & DebugPanelAction>()(
+  devtools(
+    set => ({
+      ...initialStore,
+      setIsPanelShow: (isPanelShow: boolean) => {
+        set({ isPanelShow });
+      },
+      setBasicInfo: basicInfo => {
+        set({ basicInfo });
+      },
+      setTargetOverallSpanInfo: overallSpanInfo => {
+        set({ targetOverallSpanInfo: overallSpanInfo });
+      },
+      onSelectDate: dateId => {
+        set({ targetDateId: dateId });
+      },
+      onSelectExecuteStatus: executeStatusId => {
+        set({ targetExecuteStatusId: executeStatusId });
+      },
+      setEnhancedOverallSpans: enhancedOverallSpans => {
+        set({ enhancedOverallSpans });
+      },
+      setEntranceMessageLogId: entranceMessageLogId => {
+        set({ entranceMessageLogId });
+      },
+      setOrgDetailSpans: orgDetailSpans => {
+        set({ orgDetailSpans });
+      },
+      setSpanCategory: spanCategory => {
+        set({ spanCategory });
+      },
+      setTargetDetailSpan: targetDetailSpan => {
+        set({ targetDetailSpan });
+      },
+      setCurBatchPage: curBatchPage => {
+        set({ curBatchPage });
+      },
+      resetStore: () => {
+        set(initialStore);
+      },
+    }),
+    {
+      enabled: IS_DEV_MODE,
+      name: 'debug.debugPanelStore',
+    },
+  ),
+);

frontend/packages/devops/debug/debug-panel/src/typings/index.ts

@@ -0,0 +1,121 @@
+/*
+ * 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 FieldItem,
+  type CSpan,
+} from '@coze-devops/common-modules/query-trace';
+import {
+  type SpanType,
+  type ListDebugQueriesRequest,
+} from '@coze-arch/bot-api/ob_query_api';
+import { type SpanStatus } from '@coze-arch/bot-api/debugger_api';
+
+import { type FieldType } from '../utils/field-item';
+
+export type QueryFilterItemId = SpanStatus | string;
+
+export type Placement = 'left' | 'bottom';
+
+export interface QueryFilterItem {
+  id: QueryFilterItemId;
+  name: string;
+}
+
+export type DailyTime = Pick<ListDebugQueriesRequest, 'startAtMS' | 'endAtMS'>;
+
+export interface BasicInfo {
+  botId?: string;
+  spaceID?: string;
+  userID?: string;
+  placement: Placement;
+}
+
+export interface UTCTimeInfo {
+  timeOffsetString: string;
+  dateString: string;
+}
+
+export interface TargetOverallSpanInfo {
+  value: string;
+  input: string;
+  output: string;
+  span: CSpan;
+}
+
+export interface SpanInfoConfig {
+  label?: string;
+}
+
+export interface SpanStatusConfig extends SpanInfoConfig {
+  icon: React.ReactNode;
+  className: string;
+}
+
+export interface FieldConfigOptions {
+  copyable?: boolean;
+  fullLine?: boolean;
+}
+export interface FieldConfig {
+  name: FieldType;
+  options?: FieldConfigOptions;
+}
+
+export interface FieldColConfig {
+  fields: FieldConfig[];
+}
+
+export type FieldColItem = FieldItem & {
+  options?: FieldConfigOptions;
+};
+
+export interface FieldCol {
+  fields: FieldColItem[];
+}
+
+export type BatchSpanType =
+  | SpanType.LLMBatchCall
+  | SpanType.WorkflowLLMBatchCall
+  | SpanType.PluginToolBatch
+  | SpanType.WorkflowPluginToolBatch
+  | SpanType.CodeBatch
+  | SpanType.WorkflowCodeBatch;
+
+export enum DebugPanelLayout {
+  Overall = 'Overall',
+  Summary = 'Summary',
+  Chat = 'Chat',
+}
+
+export interface LayoutData {
+  min?: number | string;
+  max?: number | string;
+}
+
+export interface LayoutConfig {
+  width: LayoutData;
+  height: LayoutData;
+}
+
+export interface DebugPanelLayoutTemplateConfig {
+  side: Record<DebugPanelLayout, LayoutConfig>;
+  bottom: Record<DebugPanelLayout, LayoutConfig>;
+}
+
+export interface DebugPanelLayoutConfig {
+  side: Record<DebugPanelLayout, number>;
+  bottom: Record<DebugPanelLayout, number>;
+}

frontend/packages/devops/debug/debug-panel/src/utils/field-item.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 {
+  type CSpanSingle,
+  type CSPanBatch,
+  type CSpan,
+  getTokens,
+  getSpanProp,
+  type FieldItem,
+  fieldItemHandlers,
+} from '@coze-devops/common-modules/query-trace';
+import { checkIsBatchBasicCSpan } from '@coze-devops/common-modules/query-trace';
+import { I18n, type I18nKeysNoOptionsType } from '@coze-arch/i18n';
+import { Tooltip } from '@coze-arch/bot-semi';
+
+import { SPAN_STATUS_CONFIG_MAP } from '../consts/span';
+import { EMPTY_TEXT } from '../consts';
+import { formatTime } from '.';
+
+const getLatencyFirst = (_span: CSpan) => {
+  if (_span === undefined) {
+    return undefined;
+  }
+
+  if (checkIsBatchBasicCSpan(_span)) {
+    const span = _span as CSPanBatch;
+    let startTimeFirstResp = Number.POSITIVE_INFINITY;
+    span.spans.forEach(subSpan => {
+      if (
+        subSpan.extra !== undefined &&
+        'start_time_first_resp' in subSpan.extra &&
+        subSpan.extra?.start_time_first_resp !== '0'
+      ) {
+        startTimeFirstResp = Math.min(
+          startTimeFirstResp,
+          Number(subSpan.extra?.start_time_first_resp),
+        );
+      }
+    });
+
+    if (startTimeFirstResp === Number.POSITIVE_INFINITY) {
+      return undefined;
+    }
+    return startTimeFirstResp - span.start_time;
+  } else {
+    const span = _span as CSpanSingle;
+    if (
+      span.extra !== undefined &&
+      'start_time_first_resp' in span.extra &&
+      span.extra?.start_time_first_resp !== '0'
+    ) {
+      return Number(span?.extra?.start_time_first_resp) - span.start_time;
+    } else {
+      return undefined;
+    }
+  }
+};
+
+const getFieldStatus = (span: CSpan): FieldItem => {
+  const { status } = span;
+  const { label } = SPAN_STATUS_CONFIG_MAP[status] ?? {};
+  return {
+    key: I18n.t('analytic_query_status'),
+    value: label ? I18n.t(label as I18nKeysNoOptionsType) : undefined,
+  };
+};
+
+const getFieldLatencyFirst = (span: CSpan): FieldItem => {
+  const latencyFirst = getLatencyFirst(span);
+  return {
+    key: I18n.t('analytic_query_latencyfirst'),
+    value: latencyFirst !== undefined ? `${latencyFirst}ms` : EMPTY_TEXT,
+  };
+};
+
+const getFieldFirstResponseTime = (span: CSpan): FieldItem => {
+  const startTimeFirstResp = getSpanProp(span, 'start_time_first_resp');
+  return {
+    key: I18n.t('analytic_query_firstrestime'),
+    value:
+      !startTimeFirstResp || startTimeFirstResp === '0'
+        ? '-'
+        : formatTime(Number(startTimeFirstResp)),
+  };
+};
+
+const getFieldTokens = (span: CSpan): FieldItem => {
+  const genValueRender = (
+    inputTokens?: number,
+    outputTokens?: number,
+  ): ReactNode => {
+    if (inputTokens !== undefined && outputTokens !== undefined) {
+      return (
+        <Tooltip
+          content={
+            <article>
+              <div className="whitespace-nowrap">
+                Input Tokens: {inputTokens}
+              </div>
+              <div className="whitespace-nowrap">
+                Output Tokens: {outputTokens}
+              </div>
+            </article>
+          }
+          position="bottom"
+        >
+          <div style={{ fontSize: 12 }}>{inputTokens + outputTokens}</div>
+        </Tooltip>
+      );
+    } else {
+      return EMPTY_TEXT;
+    }
+  };
+  const { input_tokens: inputTokens, output_tokens: outputTokens } =
+    getTokens(span);
+  return {
+    key: I18n.t('analytic_query_tokens'),
+    value: genValueRender(inputTokens, outputTokens),
+  };
+};
+
+const getFieldLogId = (span: CSpan): FieldItem => ({
+  key: I18n.t('analytic_query_logid'),
+  value: getSpanProp(span, 'log_id') as string,
+});
+
+export const fieldHandlers = {
+  ...fieldItemHandlers,
+  status: getFieldStatus,
+  latency_first: getFieldLatencyFirst,
+  first_response_time: getFieldFirstResponseTime,
+  tokens: getFieldTokens,
+  log_id: getFieldLogId,
+};
+
+export type FieldType = keyof typeof fieldHandlers;

frontend/packages/devops/debug/debug-panel/src/utils/index.ts

@@ -0,0 +1,135 @@
+/*
+ * 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 JSONBig from 'json-bigint';
+import utc from 'dayjs/plugin/utc';
+import dayjs from 'dayjs';
+import { type ob_query_trace } from '@coze-arch/bot-api/ob_query_api';
+
+import { type QueryFilterItemId, type UTCTimeInfo } from '../typings';
+import {
+  DATE_FILTERING_DAYS_NUMBER,
+  FILTERING_OPTION_ALL,
+  TIME_MINUTE,
+} from '../consts';
+
+dayjs.extend(utc);
+
+const jsonBig = JSONBig({ storeAsString: true });
+
+/**
+ * 转换时间戳为当前格式化当前时区时间
+ * @param timestamp string | number
+ * @returns UTCTimeInfo
+ */
+export const getTimeInCurrentTimeZone = (
+  timestamp: string | number,
+): UTCTimeInfo => {
+  const utcDate = dayjs.utc(timestamp);
+  const localDate = utcDate.local();
+  const offset = localDate.utcOffset();
+  const offsetString = `UTC${offset >= 0 ? '+' : '-'}${Math.abs(
+    offset / TIME_MINUTE,
+  )}`;
+  const dateString = localDate.format('MM-DD HH:mm');
+  return {
+    timeOffsetString: offsetString,
+    dateString,
+  };
+};
+
+export const getPastWeekDates = (): string[] => {
+  const today = dayjs();
+  const dateList: string[] = [];
+  for (let i = 0; i < DATE_FILTERING_DAYS_NUMBER; i++) {
+    const pastDay = today.subtract(i, 'day');
+    dateList.push(pastDay.format('YYYY-MM-DD'));
+  }
+  return dateList;
+};
+
+/**
+ * 从格式化时间提取其当前对应的开始/结束时间戳
+ * @param formattedDate QueryFilterItemId
+ * @returns DailyTime
+ */
+export const getDailyTimestampByDate = (
+  formattedDate?: QueryFilterItemId,
+): Pick<ob_query_trace.ListDebugQueriesRequest, 'startAtMS' | 'endAtMS'> => {
+  if (formattedDate === FILTERING_OPTION_ALL) {
+    const today = dayjs();
+    return {
+      startAtMS: today
+        .subtract(DATE_FILTERING_DAYS_NUMBER - 1, 'day')
+        .startOf('day')
+        .valueOf()
+        .toString(),
+      endAtMS: today.endOf('day').valueOf().toString(),
+    };
+  } else {
+    const date = dayjs(formattedDate);
+    return {
+      startAtMS: date.startOf('day').valueOf().toString(),
+      endAtMS: date.endOf('day').valueOf().toString(),
+    };
+  }
+};
+
+export const textWithFallback = (text?: string | number) =>
+  text && text !== '' ? text : '-';
+
+export const formatTime = (timestamp?: number | string) =>
+  dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
+
+export const isJsonString = (str: string) => {
+  try {
+    const jsonData = JSON.parse(str);
+    if (Object.prototype.toString.call(jsonData) !== '[object Object]') {
+      return false;
+    }
+  } catch (error) {
+    return false;
+  }
+  return true;
+};
+
+export const isDebugShowJsonString = (str: string) => {
+  try {
+    const jsonData = JSON.parse(str);
+    if (
+      Object.prototype.toString.call(jsonData) !== '[object Object]' &&
+      Object.prototype.toString.call(jsonData) !== '[object Array]'
+    ) {
+      return false;
+    }
+  } catch (error) {
+    return false;
+  }
+  return true;
+};
+
+export const jsonParseWithBigNumber = (jsonString: string) =>
+  JSON.parse(JSON.stringify(jsonBig.parse(jsonString)));
+
+export const jsonParse = (
+  jsonString: string,
+): Record<string, unknown> | string | unknown[] => {
+  if (isDebugShowJsonString(jsonString)) {
+    return jsonParseWithBigNumber(jsonString);
+  } else {
+    return jsonString;
+  }
+};

frontend/packages/devops/debug/debug-panel/src/utils/span.ts

@@ -0,0 +1,74 @@
+/*
+ * 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 { span2CSpan } from '@coze-devops/common-modules/query-trace';
+import {
+  checkIsBatchBasicCSpan,
+  type CSPanBatch,
+  type CSpan,
+  type CSpanSingle,
+} from '@coze-devops/common-modules/query-trace';
+import {
+  type Span,
+  type TraceAdvanceInfo,
+} from '@coze-arch/bot-api/ob_query_api';
+
+export const getSpanProp = (span: CSpan, key: string) => {
+  if (checkIsBatchBasicCSpan(span)) {
+    const batchSpan = span as CSPanBatch;
+    return (
+      batchSpan[key as keyof CSPanBatch] ??
+      batchSpan.spans[0]?.extra?.[key as keyof CSPanBatch['spans'][0]['extra']]
+    );
+  } else {
+    const singleSpan = span as CSpanSingle;
+    return (
+      singleSpan[key as keyof CSpanSingle] ??
+      singleSpan.extra?.[key as keyof CSpanSingle['extra']]
+    );
+  }
+};
+
+/**
+ * 加强原始Span信息（注入服务端采集的token、status等信息）
+ * @param originSpans Span[]
+ * @param traceAdvanceInfo TraceAdvanceInfo[]
+ * @returns CSpan[]
+ */
+export const enhanceOriginalSpan = (
+  originSpans: Span[],
+  traceAdvanceInfo: TraceAdvanceInfo[],
+): CSpan[] => {
+  const traceAdvanceInfoMap: Record<string, TraceAdvanceInfo> =
+    traceAdvanceInfo.reduce<Record<string, TraceAdvanceInfo>>((pre, cur) => {
+      pre[cur.trace_id] = cur;
+      return pre;
+    }, {});
+  const traceCSpans = originSpans.map(item => span2CSpan(item));
+  const enhancedOverallSpans: CSpan[] = traceCSpans.map(item => {
+    const {
+      tokens: { input, output },
+      status,
+    } = traceAdvanceInfoMap[item.trace_id];
+    return {
+      ...item,
+      status,
+      input_tokens_sum: input,
+      output_tokens_sum: output,
+    };
+  });
+  return enhancedOverallSpans;
+};

frontend/packages/devops/debug/debug-panel/src/utils/url.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 function windowOpen({ url, target }: { url: string; target?: string }) {
+  const element = document.createElement('a');
+  element.target = target || '_blank';
+  element.href = url;
+  element.click();
+}

frontend/packages/devops/debug/debug-panel/tailwind.config.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.
+ */
+ 
+export default {};

frontend/packages/devops/debug/debug-panel/tsconfig.build.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "compilerOptions": {
+    "types": [],
+    "strictNullChecks": true,
+    "noImplicitAny": false,
+    "jsx": "react-jsx",
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "dist/tsconfig.build.tsbuildinfo"
+  },
+  "include": ["src"],
+  "references": [
+    {
+      "path": "../../../arch/bot-api/tsconfig.build.json"
+    },
+    {
+      "path": "../../../arch/bot-env/tsconfig.build.json"
+    },
+    {
+      "path": "../../../arch/bot-flags/tsconfig.build.json"
+    },
+    {
+      "path": "../../../arch/bot-tea/tsconfig.build.json"
+    },
+    {
+      "path": "../../../arch/bot-typings/tsconfig.build.json"
+    },
+    {
+      "path": "../../../arch/i18n/tsconfig.build.json"
+    },
+    {
+      "path": "../../../arch/logger/tsconfig.build.json"
+    },
+    {
+      "path": "../../common-modules/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": "../../json-link-preview/tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/devops/debug/debug-panel/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.misc.json"
+    }
+  ],
+  "exclude": ["**/*"]
+}

frontend/packages/devops/debug/debug-panel/tsconfig.misc.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "include": ["__tests__", "stories", "vitest.config.ts", "tailwind.config.ts"],
+  "exclude": ["./dist"],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    }
+  ],
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "./dist",
+    "types": ["vitest/globals"],
+    "strictNullChecks": true,
+    "noImplicitAny": false,
+    "jsx": "react-jsx"
+  }
+}

frontend/packages/devops/debug/debug-panel/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',
+});