agentworkshop 0.2.1

package/app/components/workshop/AgentInspectorDrawer.vue

@@ -0,0 +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(e instanceof Error ? e.message : String(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(e instanceof Error ? e.message : String(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(e instanceof Error ? e.message : String(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="t in group[1]"
+              :key="t.id"
+              class="queue-task"
+            >
+              <span class="state-chip aw-mono">{{ t.state }}</span>
+              <span class="qt-title">{{ t.title }}</span>
+              <span class="qt-meta">{{ t.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: 9px;
+  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>