agentworkshop 0.7.41 → 0.7.44

package/app/components/workshop/AgentInspectorDrawer.vue

@@ -1,424 +1,424 @@
-<script setup lang="ts">
-/**
- * Agent 抽屉:单成员的独立作业视图 + 成员管理操作。
- *  - 独立 transcript(该 agent 的事件流,与主时间线同卡片体系)
- *  - 任务队列(assignee 视角:执行中/待执行/已完成)
- *  - 记忆页签(身份锁定本成员,token 自动装配)
- *  - 操作:聚焦主时间线 / 发消息(注入即时消息)/ 启停(PATCH)/ 移除(DELETE)
- * lead 成员不提供启停与移除(移除 lead 会使 channel 失去调度,须走 channel 删除)。
- */
-import { message } from 'ant-design-vue'
-import { useStorage } from '@vueuse/core'
-import { useEntitiesStore } from '@/app/stores/workshop/entities'
-import { useEventsStore } from '@/app/stores/workshop/events'
-import { useWorkshopApi } from '@/app/composables/workshop/useWorkshopApi'
-import { useClusteredBlocks } from '@/app/composables/workshop/useClusteredBlocks'
-import type { AepEnvelope } from '@/shared/workshop-protocol'
-
-const { t } = useI18n()
-
-const props = defineProps<{
-  channelId: string
-  agentId: string | null
-}>()
-const open = defineModel<boolean>('open', { default: false })
-const emit = defineEmits<{ (e: 'removed', agentId: string): void }>()
-
-// 抽屉宽度拖拽调节(PaneSplitter;持久化,双击复位)
-const DRAWER_W_DEFAULT = 520
-const drawerWidth = useStorage('aw.drawer.agentW', DRAWER_W_DEFAULT)
-const resizeDrawer = (d: number): void => {
-  drawerWidth.value = Math.min(900, Math.max(360, drawerWidth.value - d))
-}
-
-const entities = useEntitiesStore()
-const events = useEventsStore()
-const api = useWorkshopApi()
-
-const agent = computed(() =>
-  props.agentId ? entities.agentById(props.channelId, props.agentId) : undefined,
-)
-
-const tab = ref<'stream' | 'queue' | 'memory'>('stream')
-
-/** 启用/禁用(worker;enabled 来自快照/agent.member 事件,变更经事件回流) */
-const toggling = ref(false)
-const toggleEnabled = async (checked: string | number | boolean): Promise<void> => {
-  if (!props.agentId) return
-  toggling.value = true
-  try {
-    await api.updateChannelAgent(props.channelId, props.agentId, {
-      enabled: checked === true ? 1 : 0,
-      reason: checked === true ? t('agentInspectorDrawer.kgjqkq9014') : t('agentInspectorDrawer.kpkjhbz015'),
-    })
-    message.success(checked === true ? t('agentInspectorDrawer.k3n5z7y016') : t('agentInspectorDrawer.k1dst50d017'))
-  }
-  catch (e) {
-    message.error(apiErrorMessage(e))
-  }
-  finally {
-    toggling.value = false
-  }
-}
-
-/** 移除成员(worker;排队任务自动重派) */
-const removing = ref(false)
-const removeMember = async (): Promise<void> => {
-  if (!props.agentId) return
-  removing.value = true
-  try {
-    await api.removeChannelAgent(props.channelId, props.agentId)
-    message.success(t('agentInspectorDrawer.kane5dq018'))
-    open.value = false
-    emit('removed', props.agentId)
-  }
-  catch (e) {
-    message.error(apiErrorMessage(e))
-  }
-  finally {
-    removing.value = false
-  }
-}
-
-/** 该 agent 的独立事件流:聚类块视图(raw 源忽略全局 filter/focus,只按 agentId;重复内容折合) */
-const { blocks: stream } = useClusteredBlocks(() => props.channelId, {
-  predicate: (e: AepEnvelope) => e.agentId === props.agentId,
-  resetKey: () => props.agentId,
-  raw: true,
-})
-
-const assignedTasks = computed(() => {
-  const tasks = entities.tasks[props.channelId] ?? []
-  const own = props.agentId ? tasks.filter(t => t.assigneeId === props.agentId) : []
-  return {
-    working: own.filter(t => ['WORKING', 'ASSIGNED'].includes(t.state)),
-    queued: own.filter(t => t.state === 'SUBMITTED'),
-    done: own.filter(t => ['COMPLETED', 'FAILED', 'CANCELED'].includes(t.state)),
-  }
-})
-
-/** 当前执行任务标题(头部署上下文) */
-const currentTitle = computed(() =>
-  agent.value?.currentTaskId ? entities.taskTitle(props.channelId, agent.value.currentTaskId) : '',
-)
-
-const focusActive = computed(() =>
-  props.agentId && (events.focusAgents[props.channelId] ?? null) === props.agentId,
-)
-const toggleFocus = (): void => {
-  if (!props.agentId) return
-  events.setFocusAgent(props.channelId, focusActive.value ? null : props.agentId)
-  message.success(focusActive.value ? t('agentInspectorDrawer.k1p055kl019') : t('agentInspectorDrawer.ky2fhkf020'))
-}
-
-const sendText = ref('')
-const priority = ref<'immediate' | 'task'>('immediate')
-const requireReply = ref(false)
-const sending = ref(false)
-const send = async (): Promise<void> => {
-  if (!props.agentId || !sendText.value.trim()) return
-  sending.value = true
-  try {
-    await api.injectMessage(props.channelId, {
-      toAgentId: props.agentId,
-      text: sendText.value.trim(),
-      priority: priority.value,
-      requireReply: requireReply.value,
-    })
-    message.success(t('agentInspectorDrawer.k1y2jrsr021'))
-    sendText.value = ''
-  }
-  catch (e) {
-    message.error(apiErrorMessage(e))
-  }
-  finally {
-    sending.value = false
-  }
-}
-
-const stateDot: Record<string, string> = {
-  idle: 'var(--tone-success-dot)',
-  busy: 'var(--tone-info-dot)',
-  stopped: 'var(--tone-neutral-dot)',
-}
-</script>
-
-<template>
-  <a-drawer
-    v-model:open="open"
-    placement="right"
-    :width="drawerWidth"
-    :title="agent ? `${agent.name}(${agent.role})` : 'Agent'"
-    class="agent-drawer aw-resizable-drawer"
-  >
-    <workshop-pane-splitter
-      variant="bare"
-      class="drawer-resizer"
-      :label="$t('agentInspectorDrawer.k6hcbxi001')"
-      @resize="resizeDrawer"
-      @reset="drawerWidth = DRAWER_W_DEFAULT"
-    />
-    <template v-if="agent">
-      <div class="head">
-        <span
-          class="dot"
-          :style="{ background: stateDot[agent.state] ?? 'var(--tone-neutral-dot)' }"
-        />
-        <span class="state-text">{{ agent.state }}</span>
-        <span class="role-chip">{{ agent.harness }}</span>
-        <span class="queue-meta">{{ $t('agentInspectorDrawer.k498bf010') }}{{ agent.queued ?? 0 }} · {{ $t('agentInspectorDrawer.k3ypnl022') }}{{ agent.completed ?? 0 }}</span>
-        <a-button
-          size="small"
-          :type="focusActive ? 'primary' : 'default'"
-          @click="toggleFocus"
-        >
-          {{ focusActive ? $t('agentInspectorDrawer.k1bs9x43013') : $t('agentInspectorDrawer.k16t80ax023') }}
-        </a-button>
-      </div>
-      <div
-        v-if="currentTitle"
-        class="current-task"
-      >
-        {{ $t('agentInspectorDrawer.kk653nv011') }}{{ currentTitle }}」
-      </div>
-
-      <a-tabs
-        v-model:active-key="tab"
-        size="small"
-        class="drawer-tabs"
-      >
-        <a-tab-pane
-          key="stream"
-          tab="独立输出流"
-        >
-          <div class="stream">
-            <div
-              v-if="stream.length === 0"
-              class="empty"
-            >
-              {{ $t('agentInspectorDrawer.k1frr9es004') }}
-            </div>
-            <workshop-event-block
-              v-for="b in stream"
-              :key="b.id"
-              :block="b"
-            />
-          </div>
-        </a-tab-pane>
-
-        <a-tab-pane key="queue">
-          <template #tab>
-            {{ $t('agentInspectorDrawer.k1axbijb005') }}
-            <a-badge
-              :count="assignedTasks.working.length"
-              :number-style="{ backgroundColor: 'var(--tone-info-dot)' }"
-              size="small"
-            />
-          </template>
-          <div
-            v-for="group in [['执行中', assignedTasks.working], ['待执行', assignedTasks.queued], ['已完成', assignedTasks.done]]"
-            :key="group[0]"
-            class="queue-group"
-          >
-            <div class="group-title">
-              {{ group[0] }}({{ (group[1] as typeof assignedTasks.working).length }})
-            </div>
-            <div
-              v-for="task in group[1]"
-              :key="task.id"
-              class="queue-task"
-            >
-              <span class="state-chip aw-mono">{{ task.state }}</span>
-              <span class="qt-title">{{ task.title }}</span>
-              <span class="qt-meta">{{ task.progress }}%</span>
-            </div>
-            <div
-              v-if="(group[1] as typeof assignedTasks.working).length === 0"
-              class="empty"
-            >
-              ({{ $t('agentInspectorDrawer.k43rxk012') }}
-            </div>
-          </div>
-        </a-tab-pane>
-
-        <a-tab-pane
-          key="memory"
-          tab="记忆"
-        >
-          <workshop-memory-panel
-            :channel-id="channelId"
-            :agent-id="agentId ?? undefined"
-          />
-        </a-tab-pane>
-      </a-tabs>
-
-      <div class="footer">
-        <div
-          v-if="agent.role === 'worker'"
-          class="member-ops"
-        >
-          <span class="op-label">{{ $t('agentInspectorDrawer.kas9m5q006') }}</span>
-          <a-switch
-            :checked="(agent.enabled ?? 1) === 1"
-            :loading="toggling"
-            checked-children="启用"
-            un-checked-children="停用"
-            size="small"
-            @change="toggleEnabled"
-          />
-          <a-popconfirm
-            :title="$t('agentInspectorDrawer.k1ofh789002')"
-            ok-text="移除"
-            cancel-text="取消"
-            @confirm="removeMember"
-          >
-            <a-button
-              size="small"
-              danger
-              type="text"
-              :loading="removing"
-            >
-              {{ $t('agentInspectorDrawer.k1hrtylo007') }}
-            </a-button>
-          </a-popconfirm>
-        </div>
-        <div class="send-box">
-          <a-textarea
-            v-model:value="sendText"
-            :auto-size="{ minRows: 1, maxRows: 3 }"
-            :placeholder="$t('agentInspectorDrawer.kwsotdg003')"
-            @keydown.enter.ctrl.prevent="send"
-          />
-          <div class="send-ops">
-            <a-segmented
-              v-model:value="priority"
-              size="small"
-              :options="[{ value: 'immediate', label: '即时' }, { value: 'task', label: '排队' }]"
-            />
-            <a-checkbox v-model:checked="requireReply">
-              {{ $t('agentInspectorDrawer.k1jxt8vh008') }}
-            </a-checkbox>
-            <a-button
-              type="primary"
-              size="small"
-              :loading="sending"
-              @click="send"
-            >
-              {{ $t('agentInspectorDrawer.k3xkc7009') }}
-            </a-button>
-          </div>
-        </div>
-      </div>
-    </template>
-  </a-drawer>
-</template>
-
-<style scoped>
-/* 抽屉左缘调宽手柄:锚定 panel 左缘(aw-resizable-drawer 提供 positioning 上下文) */
-.drawer-resizer {
-  position: absolute;
-  inset: 0 auto 0 0;
-  z-index: 8;
-}
-.head {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--line);
-}
-.dot { width: 9px; height: 9px; border-radius: 50%; }
-.state-text { font-family: var(--font-mono); font-size: 12px; }
-/* 角色 chip:发丝线中性小标(去 antd tag,色锁) */
-.role-chip {
-  flex: 0 0 auto;
-  padding: 0 7px;
-  font-size: 9.5px;
-  letter-spacing: 0.04em;
-  line-height: 16px;
-  color: var(--ink-soft);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-pill);
-}
-.queue-meta { flex: 1 1 auto; font-size: 11px; color: var(--ink-faint); }
-.current-task {
-  padding: 6px 0;
-  font-size: 12px;
-  color: var(--tone-info-dot);
-  border-bottom: 1px dashed var(--divider-hair);
-}
-/* 抽屉体改 flex 列:tabs 区为唯一滚动区,footer 固定末列(旧 absolute 方案会把
- * 流/队列尾部滚进发送盒底下造成遮挡) */
-.agent-drawer :deep(.ant-drawer-body) {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 0;
-}
-.drawer-tabs {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-height: 0;
-}
-.drawer-tabs :deep(.ant-tabs-content-holder) {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-.stream {
-  font-size: 12px;
-}
-.empty { padding: 12px 4px; font-size: 12px; color: var(--ink-faint); }
-.queue-group { margin-bottom: 10px; }
-.group-title { padding: 4px 0; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
-.queue-task {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  padding: 4px 6px;
-  border-radius: var(--radius-panel-sm);
-}
-.queue-task:hover { background: var(--hover-tint); }
-/* 状态 chip:等宽枚举 + 细边(去 antd 彩色 tag;色锁,语义由文字传达) */
-.state-chip {
-  flex: none;
-  padding: 1px 6px;
-  font-size: 10px;
-  line-height: 15px;
-  letter-spacing: 0.03em;
-  color: var(--ink-soft);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-pill);
-}
-.qt-title {
-  flex: 1 1 auto;
-  overflow: hidden;
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.qt-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
-.footer {
-  flex: 0 0 auto;
-  margin: 8px -24px 0;
-  padding: 8px 24px 12px;
-  background: var(--paper-raised);
-  border-top: 1px solid var(--line);
-  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
-}
-.member-ops {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin-bottom: 8px;
-  font-size: 11px;
-}
-.op-label { color: var(--ink-faint); }
-.send-ops {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin-top: 6px;
-}
-</style>
+<script setup lang="ts">
+/**
+ * Agent 抽屉:单成员的独立作业视图 + 成员管理操作。
+ *  - 独立 transcript(该 agent 的事件流,与主时间线同卡片体系)
+ *  - 任务队列(assignee 视角:执行中/待执行/已完成)
+ *  - 记忆页签(身份锁定本成员,token 自动装配)
+ *  - 操作:聚焦主时间线 / 发消息(注入即时消息)/ 启停(PATCH)/ 移除(DELETE)
+ * lead 成员不提供启停与移除(移除 lead 会使 channel 失去调度,须走 channel 删除)。
+ */
+import { message } from 'ant-design-vue'
+import { useStorage } from '@vueuse/core'
+import { useEntitiesStore } from '@/app/stores/workshop/entities'
+import { useEventsStore } from '@/app/stores/workshop/events'
+import { useWorkshopApi } from '@/app/composables/workshop/useWorkshopApi'
+import { useClusteredBlocks } from '@/app/composables/workshop/useClusteredBlocks'
+import type { AepEnvelope } from '@/shared/workshop-protocol'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  channelId: string
+  agentId: string | null
+}>()
+const open = defineModel<boolean>('open', { default: false })
+const emit = defineEmits<{ (e: 'removed', agentId: string): void }>()
+
+// 抽屉宽度拖拽调节(PaneSplitter;持久化,双击复位)
+const DRAWER_W_DEFAULT = 520
+const drawerWidth = useStorage('aw.drawer.agentW', DRAWER_W_DEFAULT)
+const resizeDrawer = (d: number): void => {
+  drawerWidth.value = Math.min(900, Math.max(360, drawerWidth.value - d))
+}
+
+const entities = useEntitiesStore()
+const events = useEventsStore()
+const api = useWorkshopApi()
+
+const agent = computed(() =>
+  props.agentId ? entities.agentById(props.channelId, props.agentId) : undefined,
+)
+
+const tab = ref<'stream' | 'queue' | 'memory'>('stream')
+
+/** 启用/禁用(worker;enabled 来自快照/agent.member 事件,变更经事件回流) */
+const toggling = ref(false)
+const toggleEnabled = async (checked: string | number | boolean): Promise<void> => {
+  if (!props.agentId) return
+  toggling.value = true
+  try {
+    await api.updateChannelAgent(props.channelId, props.agentId, {
+      enabled: checked === true ? 1 : 0,
+      reason: checked === true ? t('agentInspectorDrawer.kgjqkq9014') : t('agentInspectorDrawer.kpkjhbz015'),
+    })
+    message.success(checked === true ? t('agentInspectorDrawer.k3n5z7y016') : t('agentInspectorDrawer.k1dst50d017'))
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e))
+  }
+  finally {
+    toggling.value = false
+  }
+}
+
+/** 移除成员(worker;排队任务自动重派) */
+const removing = ref(false)
+const removeMember = async (): Promise<void> => {
+  if (!props.agentId) return
+  removing.value = true
+  try {
+    await api.removeChannelAgent(props.channelId, props.agentId)
+    message.success(t('agentInspectorDrawer.kane5dq018'))
+    open.value = false
+    emit('removed', props.agentId)
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e))
+  }
+  finally {
+    removing.value = false
+  }
+}
+
+/** 该 agent 的独立事件流:聚类块视图(raw 源忽略全局 filter/focus,只按 agentId;重复内容折合) */
+const { blocks: stream } = useClusteredBlocks(() => props.channelId, {
+  predicate: (e: AepEnvelope) => e.agentId === props.agentId,
+  resetKey: () => props.agentId,
+  raw: true,
+})
+
+const assignedTasks = computed(() => {
+  const tasks = entities.tasks[props.channelId] ?? []
+  const own = props.agentId ? tasks.filter(t => t.assigneeId === props.agentId) : []
+  return {
+    working: own.filter(t => ['WORKING', 'ASSIGNED'].includes(t.state)),
+    queued: own.filter(t => t.state === 'SUBMITTED'),
+    done: own.filter(t => ['COMPLETED', 'FAILED', 'CANCELED'].includes(t.state)),
+  }
+})
+
+/** 当前执行任务标题(头部署上下文) */
+const currentTitle = computed(() =>
+  agent.value?.currentTaskId ? entities.taskTitle(props.channelId, agent.value.currentTaskId) : '',
+)
+
+const focusActive = computed(() =>
+  props.agentId && (events.focusAgents[props.channelId] ?? null) === props.agentId,
+)
+const toggleFocus = (): void => {
+  if (!props.agentId) return
+  events.setFocusAgent(props.channelId, focusActive.value ? null : props.agentId)
+  message.success(focusActive.value ? t('agentInspectorDrawer.k1p055kl019') : t('agentInspectorDrawer.ky2fhkf020'))
+}
+
+const sendText = ref('')
+const priority = ref<'immediate' | 'task'>('immediate')
+const requireReply = ref(false)
+const sending = ref(false)
+const send = async (): Promise<void> => {
+  if (!props.agentId || !sendText.value.trim()) return
+  sending.value = true
+  try {
+    await api.injectMessage(props.channelId, {
+      toAgentId: props.agentId,
+      text: sendText.value.trim(),
+      priority: priority.value,
+      requireReply: requireReply.value,
+    })
+    message.success(t('agentInspectorDrawer.k1y2jrsr021'))
+    sendText.value = ''
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e))
+  }
+  finally {
+    sending.value = false
+  }
+}
+
+const stateDot: Record<string, string> = {
+  idle: 'var(--tone-success-dot)',
+  busy: 'var(--tone-info-dot)',
+  stopped: 'var(--tone-neutral-dot)',
+}
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    placement="right"
+    :width="drawerWidth"
+    :title="agent ? `${agent.name}(${agent.role})` : 'Agent'"
+    class="agent-drawer aw-resizable-drawer"
+  >
+    <workshop-pane-splitter
+      variant="bare"
+      class="drawer-resizer"
+      :label="$t('agentInspectorDrawer.k6hcbxi001')"
+      @resize="resizeDrawer"
+      @reset="drawerWidth = DRAWER_W_DEFAULT"
+    />
+    <template v-if="agent">
+      <div class="head">
+        <span
+          class="dot"
+          :style="{ background: stateDot[agent.state] ?? 'var(--tone-neutral-dot)' }"
+        />
+        <span class="state-text">{{ agent.state }}</span>
+        <span class="role-chip">{{ agent.harness }}</span>
+        <span class="queue-meta">{{ $t('agentInspectorDrawer.k498bf010') }}{{ agent.queued ?? 0 }} · {{ $t('agentInspectorDrawer.k3ypnl022') }}{{ agent.completed ?? 0 }}</span>
+        <a-button
+          size="small"
+          :type="focusActive ? 'primary' : 'default'"
+          @click="toggleFocus"
+        >
+          {{ focusActive ? $t('agentInspectorDrawer.k1bs9x43013') : $t('agentInspectorDrawer.k16t80ax023') }}
+        </a-button>
+      </div>
+      <div
+        v-if="currentTitle"
+        class="current-task"
+      >
+        {{ $t('agentInspectorDrawer.kk653nv011') }}{{ currentTitle }}」
+      </div>
+
+      <a-tabs
+        v-model:active-key="tab"
+        size="small"
+        class="drawer-tabs"
+      >
+        <a-tab-pane
+          key="stream"
+          :tab="$t('agentInspectorDrawer.tabStream')"
+        >
+          <div class="stream">
+            <div
+              v-if="stream.length === 0"
+              class="empty"
+            >
+              {{ $t('agentInspectorDrawer.k1frr9es004') }}
+            </div>
+            <workshop-event-block
+              v-for="b in stream"
+              :key="b.id"
+              :block="b"
+            />
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="queue">
+          <template #tab>
+            {{ $t('agentInspectorDrawer.k1axbijb005') }}
+            <a-badge
+              :count="assignedTasks.working.length"
+              :number-style="{ backgroundColor: 'var(--tone-info-dot)' }"
+              size="small"
+            />
+          </template>
+          <div
+            v-for="group in [[$t('agentInspectorDrawer.grpWorking'), assignedTasks.working], [$t('agentInspectorDrawer.grpQueued'), assignedTasks.queued], [$t('agentInspectorDrawer.grpDone'), assignedTasks.done]]"
+            :key="group[0]"
+            class="queue-group"
+          >
+            <div class="group-title">
+              {{ group[0] }}({{ (group[1] as typeof assignedTasks.working).length }})
+            </div>
+            <div
+              v-for="task in group[1]"
+              :key="task.id"
+              class="queue-task"
+            >
+              <span class="state-chip aw-mono">{{ task.state }}</span>
+              <span class="qt-title">{{ task.title }}</span>
+              <span class="qt-meta">{{ task.progress }}%</span>
+            </div>
+            <div
+              v-if="(group[1] as typeof assignedTasks.working).length === 0"
+              class="empty"
+            >
+              ({{ $t('agentInspectorDrawer.k43rxk012') }}
+            </div>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane
+          key="memory"
+          :tab="$t('agentInspectorDrawer.tabMemory')"
+        >
+          <workshop-memory-panel
+            :channel-id="channelId"
+            :agent-id="agentId ?? undefined"
+          />
+        </a-tab-pane>
+      </a-tabs>
+
+      <div class="footer">
+        <div
+          v-if="agent.role === 'worker'"
+          class="member-ops"
+        >
+          <span class="op-label">{{ $t('agentInspectorDrawer.kas9m5q006') }}</span>
+          <a-switch
+            :checked="(agent.enabled ?? 1) === 1"
+            :loading="toggling"
+            :checked-children="$t('agentInspectorDrawer.swOn')"
+            :un-checked-children="$t('agentInspectorDrawer.swOff')"
+            size="small"
+            @change="toggleEnabled"
+          />
+          <a-popconfirm
+            :title="$t('agentInspectorDrawer.k1ofh789002')"
+            :ok-text="$t('agentInspectorDrawer.okRemove')"
+            :cancel-text="$t('common.cancel')"
+            @confirm="removeMember"
+          >
+            <a-button
+              size="small"
+              danger
+              type="text"
+              :loading="removing"
+            >
+              {{ $t('agentInspectorDrawer.k1hrtylo007') }}
+            </a-button>
+          </a-popconfirm>
+        </div>
+        <div class="send-box">
+          <a-textarea
+            v-model:value="sendText"
+            :auto-size="{ minRows: 1, maxRows: 3 }"
+            :placeholder="$t('agentInspectorDrawer.kwsotdg003')"
+            @keydown.enter.ctrl.prevent="send"
+          />
+          <div class="send-ops">
+            <a-segmented
+              v-model:value="priority"
+              size="small"
+              :options="[{ value: 'immediate', label: $t('agentInspectorDrawer.prioImmediate') }, { value: 'task', label: $t('agentInspectorDrawer.prioQueued') }]"
+            />
+            <a-checkbox v-model:checked="requireReply">
+              {{ $t('agentInspectorDrawer.k1jxt8vh008') }}
+            </a-checkbox>
+            <a-button
+              type="primary"
+              size="small"
+              :loading="sending"
+              @click="send"
+            >
+              {{ $t('agentInspectorDrawer.k3xkc7009') }}
+            </a-button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </a-drawer>
+</template>
+
+<style scoped>
+/* 抽屉左缘调宽手柄:锚定 panel 左缘(aw-resizable-drawer 提供 positioning 上下文) */
+.drawer-resizer {
+  position: absolute;
+  inset: 0 auto 0 0;
+  z-index: 8;
+}
+.head {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--line);
+}
+.dot { width: 9px; height: 9px; border-radius: 50%; }
+.state-text { font-family: var(--font-mono); font-size: 12px; }
+/* 角色 chip:发丝线中性小标(去 antd tag,色锁) */
+.role-chip {
+  flex: 0 0 auto;
+  padding: 0 7px;
+  font-size: 9.5px;
+  letter-spacing: 0.04em;
+  line-height: 16px;
+  color: var(--ink-soft);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-pill);
+}
+.queue-meta { flex: 1 1 auto; font-size: 11px; color: var(--ink-faint); }
+.current-task {
+  padding: 6px 0;
+  font-size: 12px;
+  color: var(--tone-info-dot);
+  border-bottom: 1px dashed var(--divider-hair);
+}
+/* 抽屉体改 flex 列:tabs 区为唯一滚动区,footer 固定末列(旧 absolute 方案会把
+ * 流/队列尾部滚进发送盒底下造成遮挡) */
+.agent-drawer :deep(.ant-drawer-body) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 0;
+}
+.drawer-tabs {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+.drawer-tabs :deep(.ant-tabs-content-holder) {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.stream {
+  font-size: 12px;
+}
+.empty { padding: 12px 4px; font-size: 12px; color: var(--ink-faint); }
+.queue-group { margin-bottom: 10px; }
+.group-title { padding: 4px 0; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
+.queue-task {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 4px 6px;
+  border-radius: var(--radius-panel-sm);
+}
+.queue-task:hover { background: var(--hover-tint); }
+/* 状态 chip:等宽枚举 + 细边(去 antd 彩色 tag;色锁,语义由文字传达) */
+.state-chip {
+  flex: none;
+  padding: 1px 6px;
+  font-size: 10px;
+  line-height: 15px;
+  letter-spacing: 0.03em;
+  color: var(--ink-soft);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-pill);
+}
+.qt-title {
+  flex: 1 1 auto;
+  overflow: hidden;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.qt-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
+.footer {
+  flex: 0 0 auto;
+  margin: 8px -24px 0;
+  padding: 8px 24px 12px;
+  background: var(--paper-raised);
+  border-top: 1px solid var(--line);
+  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
+}
+.member-ops {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 11px;
+}
+.op-label { color: var(--ink-faint); }
+.send-ops {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 6px;
+}
+</style>