agentworkshop 0.7.40 → 0.7.44

package/app/components/workshop/A2aRpcDebugger.vue

@@ -1,237 +1,237 @@
-<script setup lang="ts">
-/**
- * A2A JSON-RPC/SSE 调试器(P2):对 channel 内 agent 实例直发 JSON-RPC 2.0。
- * - 普通方法(tasks/send 等):POST /a2a/:agentId/rpc → 结果 JSON
- * - tasks/sendSubscribe:消费 SSE 流,事件逐条实时渲染(task/status-update/artifact-update/message/error)
- * - message/send 需 Bearer token(可选填)
- */
-import { message } from 'ant-design-vue'
-import { useStorage } from '@vueuse/core'
-import { useEntitiesStore } from '@/app/stores/workshop/entities'
-
-const { t } = useI18n()
-
-const props = defineProps<{ channelId: string }>()
-const open = defineModel<boolean>('open', { default: false })
-
-// 抽屉宽度拖拽调节(PaneSplitter;持久化,双击复位)
-const DRAWER_W_DEFAULT = 600
-const drawerWidth = useStorage('aw.drawer.a2aW', DRAWER_W_DEFAULT)
-const resizeDrawer = (d: number): void => {
-  drawerWidth.value = Math.min(1040, Math.max(420, drawerWidth.value - d))
-}
-
-const entities = useEntitiesStore()
-const agents = computed(() => entities.agents[props.channelId] ?? [])
-const agentId = ref('')
-watch(agents, (list) => {
-  if (!agentId.value && list.length > 0) agentId.value = list[0]?.agentId ?? ''
-}, { immediate: true })
-
-type Method = 'tasks/send' | 'tasks/sendSubscribe' | 'tasks/get' | 'tasks/list' | 'message/send' | 'agent/getCard'
-const method = ref<Method>('tasks/list')
-const methodOptions: Array<{ value: Method, label: string, sse?: boolean }> = [
-  { value: 'tasks/list', label: 'tasks/list' },
-  { value: 'tasks/get', label: 'tasks/get' },
-  { value: 'tasks/send', label: 'tasks/send' },
-  { value: 'tasks/sendSubscribe', label: 'tasks/sendSubscribe(SSE 流)', sse: true },
-  { value: 'message/send', label: 'message/send(需 token)' },
-  { value: 'agent/getCard', label: 'agent/getCard' },
-]
-
-const paramsJson = ref('{}')
-const token = ref('')
-const running = ref(false)
-const output = ref('')
-
-/** 按方法生成参数模板 */
-const template = (): Record<string, unknown> => {
-  switch (method.value) {
-    case 'tasks/send':
-    case 'tasks/sendSubscribe':
-      return { message: { role: 'ROLE_USER', parts: [{ text: t('a2aRpcDebugger.kq00d3v005') }] } }
-    case 'tasks/get':
-      return { taskId: '<taskId>' }
-    case 'message/send':
-      return { message: { role: 'ROLE_USER', parts: [{ text: t('a2aRpcDebugger.k1kgwib8006') }] } }
-    default:
-      return {}
-  }
-}
-
-const append = (line: string): void => {
-  output.value += `${line}\n`
-}
-
-/** SSE 消费:sendSubscribe 流式渲染 */
-const runSse = async (body: Record<string, unknown>): Promise<void> => {
-  const res = await fetch(`/api/workshop/a2a/${agentId.value}/rpc`, {
-    method: 'POST',
-    headers: {
-      'content-type': 'application/json',
-      'accept': 'text/event-stream',
-      ...(token.value ? { authorization: `Bearer ${token.value}` } : {}),
-    },
-    body: JSON.stringify(body),
-  })
-  append(`▶ HTTP ${res.status} ${res.headers.get('content-type') ?? ''}`)
-  if (!res.body) {
-    append(await res.text())
-    return
-  }
-  const reader = res.body.getReader()
-  const decoder = new TextDecoder()
-  let buf = ''
-  for (;;) {
-    const { done, value } = await reader.read()
-    if (done) break
-    buf += decoder.decode(value, { stream: true })
-    const frames = buf.split('\n\n')
-    buf = frames.pop() ?? ''
-    for (const frame of frames) {
-      const dataLine = frame.split('\n').find(l => l.startsWith('data:'))
-      if (dataLine) append(`◀ ${dataLine.slice(5).trim().slice(0, 400)}`)
-    }
-  }
-  append(t('a2aRpcDebugger.k1e1hi4u007'))
-}
-
-const run = async (): Promise<void> => {
-  if (!agentId.value) {
-    message.warning(t('a2aRpcDebugger.k1vryfv008'))
-    return
-  }
-  let params: Record<string, unknown>
-  try {
-    params = JSON.parse(paramsJson.value || '{}')
-  }
-  catch {
-    message.error('params 不是合法 JSON')
-    return
-  }
-  running.value = true
-  output.value = ''
-  const body = { jsonrpc: '2.0', id: Date.now(), method: method.value, params }
-  try {
-    if (method.value === 'tasks/sendSubscribe') {
-      await runSse(body)
-    }
-    else {
-      const res = await fetch(`/api/workshop/a2a/${agentId.value}/rpc`, {
-        method: 'POST',
-        headers: {
-          'content-type': 'application/json',
-          ...(token.value ? { authorization: `Bearer ${token.value}` } : {}),
-        },
-        body: JSON.stringify(body),
-      })
-      const text = await res.text()
-      append(`▶ POST /a2a/${agentId.value.slice(0, 8)}/rpc ${method.value} → HTTP ${res.status}`)
-      append(text.slice(0, 4000))
-    }
-  }
-  catch (e) {
-    append(`✖ ${apiErrorMessage(e)}`)
-  }
-  finally {
-    running.value = false
-  }
-}
-</script>
-
-<template>
-  <a-drawer
-    v-model:open="open"
-    placement="right"
-    :width="drawerWidth"
-    title="A2A RPC / SSE 调试器"
-    class="aw-resizable-drawer"
-  >
-    <workshop-pane-splitter
-      variant="bare"
-      class="drawer-resizer"
-      :label="$t('a2aRpcDebugger.k6hcbxi001')"
-      @resize="resizeDrawer"
-      @reset="drawerWidth = DRAWER_W_DEFAULT"
-    />
-    <div class="dbg">
-      <div class="row">
-        <a-select
-          v-model:value="agentId"
-          class="agent"
-          :placeholder="$t('a2aRpcDebugger.k34cz76002')"
-          :options="agents.map(a => ({ value: a.agentId, label: `${a.name}(${a.role})` }))"
-        />
-        <a-select
-          v-model:value="method"
-          class="method"
-          :options="methodOptions"
-        />
-      </div>
-      <a-input-password
-        v-model:value="token"
-        size="small"
-        placeholder="Bearer token(message/send 需要;留空匿名)"
-        class="token"
-      />
-      <div class="row">
-        <a-textarea
-          v-model:value="paramsJson"
-          :rows="6"
-          class="params"
-        />
-      </div>
-      <div class="row ops">
-        <a-button
-          size="small"
-          @click="paramsJson = JSON.stringify(template(), null, 2)"
-        >
-          {{ $t('a2aRpcDebugger.k1bqe2pj003') }}
-        </a-button>
-        <a-button
-          type="primary"
-          size="small"
-          :loading="running"
-          @click="run"
-        >
-          {{ $t('a2aRpcDebugger.k405w8004') }}
-        </a-button>
-      </div>
-      <pre class="output">{{ output || '(输出;sendSubscribe 将逐条渲染 SSE 事件)' }}</pre>
-    </div>
-  </a-drawer>
-</template>
-
-<style scoped>
-/* 抽屉左缘调宽手柄:锚定 panel 左缘(aw-resizable-drawer 提供 positioning 上下文) */
-.drawer-resizer {
-  position: absolute;
-  inset: 0 auto 0 0;
-  z-index: 8;
-}
-.dbg {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  font-size: 12px;
-}
-.row {
-  display: flex;
-  gap: 8px;
-}
-.agent { flex: 1 1 55%; }
-.method { flex: 1 1 45%; }
-.params { font-family: var(--font-mono); }
-.ops { justify-content: flex-end; }
-.output {
-  min-height: 240px;
-  padding: 10px;
-  overflow: auto;
-  font-size: 11px;
-  font-family: var(--font-mono);
-  white-space: pre-wrap;
-  word-break: break-all;
-  background: color-mix(in srgb, currentColor 5%, transparent);
-  border-radius: var(--radius-panel-sm);
-}
-</style>
+<script setup lang="ts">
+/**
+ * A2A JSON-RPC/SSE 调试器(P2):对 channel 内 agent 实例直发 JSON-RPC 2.0。
+ * - 普通方法(tasks/send 等):POST /a2a/:agentId/rpc → 结果 JSON
+ * - tasks/sendSubscribe:消费 SSE 流,事件逐条实时渲染(task/status-update/artifact-update/message/error)
+ * - message/send 需 Bearer token(可选填)
+ */
+import { message } from 'ant-design-vue'
+import { useStorage } from '@vueuse/core'
+import { useEntitiesStore } from '@/app/stores/workshop/entities'
+
+const { t } = useI18n()
+
+const props = defineProps<{ channelId: string }>()
+const open = defineModel<boolean>('open', { default: false })
+
+// 抽屉宽度拖拽调节(PaneSplitter;持久化,双击复位)
+const DRAWER_W_DEFAULT = 600
+const drawerWidth = useStorage('aw.drawer.a2aW', DRAWER_W_DEFAULT)
+const resizeDrawer = (d: number): void => {
+  drawerWidth.value = Math.min(1040, Math.max(420, drawerWidth.value - d))
+}
+
+const entities = useEntitiesStore()
+const agents = computed(() => entities.agents[props.channelId] ?? [])
+const agentId = ref('')
+watch(agents, (list) => {
+  if (!agentId.value && list.length > 0) agentId.value = list[0]?.agentId ?? ''
+}, { immediate: true })
+
+type Method = 'tasks/send' | 'tasks/sendSubscribe' | 'tasks/get' | 'tasks/list' | 'message/send' | 'agent/getCard'
+const method = ref<Method>('tasks/list')
+const methodOptions = computed<Array<{ value: Method, label: string, sse?: boolean }>>(() => [
+  { value: 'tasks/list', label: 'tasks/list' },
+  { value: 'tasks/get', label: 'tasks/get' },
+  { value: 'tasks/send', label: 'tasks/send' },
+  { value: 'tasks/sendSubscribe', label: t('a2aRpcDebugger.methodSse'), sse: true },
+  { value: 'message/send', label: t('a2aRpcDebugger.methodToken') },
+  { value: 'agent/getCard', label: 'agent/getCard' },
+])
+
+const paramsJson = ref('{}')
+const token = ref('')
+const running = ref(false)
+const output = ref('')
+
+/** 按方法生成参数模板 */
+const template = (): Record<string, unknown> => {
+  switch (method.value) {
+    case 'tasks/send':
+    case 'tasks/sendSubscribe':
+      return { message: { role: 'ROLE_USER', parts: [{ text: t('a2aRpcDebugger.kq00d3v005') }] } }
+    case 'tasks/get':
+      return { taskId: '<taskId>' }
+    case 'message/send':
+      return { message: { role: 'ROLE_USER', parts: [{ text: t('a2aRpcDebugger.k1kgwib8006') }] } }
+    default:
+      return {}
+  }
+}
+
+const append = (line: string): void => {
+  output.value += `${line}\n`
+}
+
+/** SSE 消费:sendSubscribe 流式渲染 */
+const runSse = async (body: Record<string, unknown>): Promise<void> => {
+  const res = await fetch(`/api/workshop/a2a/${agentId.value}/rpc`, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+      'accept': 'text/event-stream',
+      ...(token.value ? { authorization: `Bearer ${token.value}` } : {}),
+    },
+    body: JSON.stringify(body),
+  })
+  append(`▶ HTTP ${res.status} ${res.headers.get('content-type') ?? ''}`)
+  if (!res.body) {
+    append(await res.text())
+    return
+  }
+  const reader = res.body.getReader()
+  const decoder = new TextDecoder()
+  let buf = ''
+  for (;;) {
+    const { done, value } = await reader.read()
+    if (done) break
+    buf += decoder.decode(value, { stream: true })
+    const frames = buf.split('\n\n')
+    buf = frames.pop() ?? ''
+    for (const frame of frames) {
+      const dataLine = frame.split('\n').find(l => l.startsWith('data:'))
+      if (dataLine) append(`◀ ${dataLine.slice(5).trim().slice(0, 400)}`)
+    }
+  }
+  append(t('a2aRpcDebugger.k1e1hi4u007'))
+}
+
+const run = async (): Promise<void> => {
+  if (!agentId.value) {
+    message.warning(t('a2aRpcDebugger.k1vryfv008'))
+    return
+  }
+  let params: Record<string, unknown>
+  try {
+    params = JSON.parse(paramsJson.value || '{}')
+  }
+  catch {
+    message.error(t('a2aRpcDebugger.badParams'))
+    return
+  }
+  running.value = true
+  output.value = ''
+  const body = { jsonrpc: '2.0', id: Date.now(), method: method.value, params }
+  try {
+    if (method.value === 'tasks/sendSubscribe') {
+      await runSse(body)
+    }
+    else {
+      const res = await fetch(`/api/workshop/a2a/${agentId.value}/rpc`, {
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json',
+          ...(token.value ? { authorization: `Bearer ${token.value}` } : {}),
+        },
+        body: JSON.stringify(body),
+      })
+      const text = await res.text()
+      append(`▶ POST /a2a/${agentId.value.slice(0, 8)}/rpc ${method.value} → HTTP ${res.status}`)
+      append(text.slice(0, 4000))
+    }
+  }
+  catch (e) {
+    append(`✖ ${apiErrorMessage(e)}`)
+  }
+  finally {
+    running.value = false
+  }
+}
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    placement="right"
+    :width="drawerWidth"
+    :title="$t('a2aRpcDebugger.title')"
+    class="aw-resizable-drawer"
+  >
+    <workshop-pane-splitter
+      variant="bare"
+      class="drawer-resizer"
+      :label="$t('a2aRpcDebugger.k6hcbxi001')"
+      @resize="resizeDrawer"
+      @reset="drawerWidth = DRAWER_W_DEFAULT"
+    />
+    <div class="dbg">
+      <div class="row">
+        <a-select
+          v-model:value="agentId"
+          class="agent"
+          :placeholder="$t('a2aRpcDebugger.k34cz76002')"
+          :options="agents.map(a => ({ value: a.agentId, label: `${a.name}(${a.role})` }))"
+        />
+        <a-select
+          v-model:value="method"
+          class="method"
+          :options="methodOptions"
+        />
+      </div>
+      <a-input-password
+        v-model:value="token"
+        size="small"
+        :placeholder="$t('a2aRpcDebugger.tokenPh')"
+        class="token"
+      />
+      <div class="row">
+        <a-textarea
+          v-model:value="paramsJson"
+          :rows="6"
+          class="params"
+        />
+      </div>
+      <div class="row ops">
+        <a-button
+          size="small"
+          @click="paramsJson = JSON.stringify(template(), null, 2)"
+        >
+          {{ $t('a2aRpcDebugger.k1bqe2pj003') }}
+        </a-button>
+        <a-button
+          type="primary"
+          size="small"
+          :loading="running"
+          @click="run"
+        >
+          {{ $t('a2aRpcDebugger.k405w8004') }}
+        </a-button>
+      </div>
+      <pre class="output">{{ output || $t('a2aRpcDebugger.outputEmpty') }}</pre>
+    </div>
+  </a-drawer>
+</template>
+
+<style scoped>
+/* 抽屉左缘调宽手柄:锚定 panel 左缘(aw-resizable-drawer 提供 positioning 上下文) */
+.drawer-resizer {
+  position: absolute;
+  inset: 0 auto 0 0;
+  z-index: 8;
+}
+.dbg {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 12px;
+}
+.row {
+  display: flex;
+  gap: 8px;
+}
+.agent { flex: 1 1 55%; }
+.method { flex: 1 1 45%; }
+.params { font-family: var(--font-mono); }
+.ops { justify-content: flex-end; }
+.output {
+  min-height: 240px;
+  padding: 10px;
+  overflow: auto;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: color-mix(in srgb, currentColor 5%, transparent);
+  border-radius: var(--radius-panel-sm);
+}
+</style>