agentworkshop 0.8.6 → 0.8.7

package/app/components/workshop/composer/StatusChip.vue

@@ -1,171 +1,171 @@
-<script setup lang="ts">
-/**
- * 状态行 chip:说明当前模式(群聊/任务/消息)与参数、@提及将触发几次执行、
- * 目标成员与 HITL 可达性提示。纯展示,无状态、无事件。
- */
-import type { AepChatMention } from '#shared/workshop-protocol'
-import type { ComposerMode } from '@/app/composables/workshop/useComposerMentions'
-
-defineProps<{
-  mode: ComposerMode
-  draftAgentMentions: AepChatMention[]
-  draftUserMentions: AepChatMention[]
-  taskMode: 'goal' | 'loop' | 'pipeline'
-  loopIntervalSeconds: number | null
-  targetName: string
-  isDefaultLead: boolean
-  reachHint: { tone: 'ok' | 'info' | 'warn', text: string, title: string } | null
-  priority: 'task' | 'immediate'
-}>()
-</script>
-
-<template>
-  <div class="composer-status-chip">
-    <template v-if="mode === 'chat'">
-      <span class="chip-key">{{ $t('chat.title') }}</span>
-      <span
-        v-if="draftAgentMentions.length > 0"
-        class="reach-chip"
-        data-tone="info"
-        :title="$t('chat.reachAgentsTitle')"
-      >
-        <span
-          class="reach-dot"
-          aria-hidden="true"
-        />{{ $t('chat.reachAgentsText', { p0: draftAgentMentions.map(m => m.label).join(' @'), p1: draftAgentMentions.length }) }}
-      </span>
-      <span
-        v-else
-        class="reach-chip"
-        data-tone="ok"
-        :title="$t('chat.reachNoAgentTitle')"
-      >
-        <span
-          class="reach-dot"
-          aria-hidden="true"
-        />{{ $t('chat.reachNoAgentText') }}
-      </span>
-      <span
-        v-if="draftUserMentions.length > 0"
-        class="chip-hint"
-      >@{{ draftUserMentions.map(m => m.label).join(' @') }}{{ $t('chat.notifyMembersSuffix') }}</span>
-      <span
-        v-else
-        class="chip-hint"
-      >{{ $t('chat.mentionHint') }}</span>
-    </template>
-    <template v-else-if="mode === 'task'">
-      <span class="chip-key">{{ $t('composer.k3wcox005') }}</span>
-      <span>{{ taskMode }}</span>
-      <span v-if="taskMode === 'loop'">
-        {{ $t('composer.k49kr1011') }} {{ loopIntervalSeconds ?? '-' }}s
-      </span>
-      <span
-        class="chip-target"
-        :title="isDefaultLead ? $t('composer.defaultLeadTitle') : $t('composer.kl3604i033', { p0: targetName })"
-      >→ {{ targetName ? `@${targetName}` : 'lead' }}{{ isDefaultLead ? $t('composer.k2z7yuw012') : $t('composer.k2z0fsx032') }}</span>
-      <!-- HITL 送达语义提示 -->
-      <span
-        v-if="reachHint"
-        class="reach-chip"
-        :data-tone="reachHint.tone"
-        :title="reachHint.title"
-      >
-        <span
-          class="reach-dot"
-          aria-hidden="true"
-        />{{ reachHint.text }}
-      </span>
-      <span class="chip-hint">{{ $t('composer.k17u6q77006') }}</span>
-    </template>
-    <template v-else>
-      <span class="chip-key">{{ $t('composer.k41ykc007') }}</span>
-      <span v-if="targetName">@{{ targetName }}{{ isDefaultLead ? $t('composer.k2z7yuw012') : '' }}</span>
-      <span>{{ priority === 'immediate' ? $t('composer.k1bosqfv013') : $t('composer.k40g8m009') }}</span>
-      <!-- 可达性提示(open-tag reach hint):对方能否收到、将以何种方式送达 -->
-      <span
-        v-if="reachHint"
-        class="reach-chip"
-        :data-tone="reachHint.tone"
-        :title="reachHint.title"
-      >
-        <span
-          class="reach-dot"
-          aria-hidden="true"
-        />{{ reachHint.text }}
-      </span>
-      <span class="chip-hint">{{ $t('composer.chipHint') }}</span>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-/* 状态行:轻 chip 说明当前模式参数 */
-.composer-status-chip {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  width: max-content;
-  max-width: 100%;
-  margin: 0 0 4px 2px;
-  padding: 2px 8px;
-  font-size: 11.5px;
-  color: var(--ink-faint);
-  background: var(--paper-deep);
-  border-radius: var(--radius-chip);
-}
-.chip-key {
-  font-weight: 600;
-  color: var(--ink-soft);
-}
-.chip-target {
-  font-weight: 600;
-  color: var(--ink);
-}
-.chip-hint {
-  margin-left: auto;
-  padding-left: 8px;
-  color: var(--ink-faint);
-}
-
-/* 可达性提示 chip:ok 绿 / info 蓝 / warn 琥珀 —— 状态不只靠颜色(附文字) */
-.reach-chip {
-  display: inline-flex;
-  gap: 5px;
-  align-items: center;
-  padding: 0 6px;
-  font-size: 10.5px;
-  border-radius: var(--radius-chip);
-}
-.reach-chip .reach-dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: currentColor;
-}
-.reach-chip[data-tone='ok'] { color: var(--tone-success-dot); background: color-mix(in srgb, var(--tone-success-dot) 10%, transparent); }
-.reach-chip[data-tone='info'] { color: var(--tone-info-dot); background: color-mix(in srgb, var(--tone-info-dot) 10%, transparent); }
-.reach-chip[data-tone='warn'] { color: var(--tone-warning-dot); background: color-mix(in srgb, var(--tone-warning-dot) 13%, transparent); }
-
-/* 窄屏覆盖(≤1023.98px):原 Composer.vue 同段规则按选择器归属拆分到此 */
-@media (max-width: 1023.98px) {
-  /* 状态 chip:桌面宽度自适应内容,窄屏必须允许折行,否则顶破输入卡 */
-  .composer-status-chip {
-    width: auto;
-    flex-wrap: wrap;
-    row-gap: 2px;
-    font-size: 11.5px;
-    line-height: 1.45;
-  }
-
-  .chip-hint {
-    flex: 1 1 100%;
-    padding-left: 0;
-    margin-left: 0;
-  }
-
-  .reach-chip {
-    font-size: 11.5px;
-  }
-}
-</style>
+<script setup lang="ts">
+/**
+ * 状态行 chip:说明当前模式(群聊/任务/消息)与参数、@提及将触发几次执行、
+ * 目标成员与 HITL 可达性提示。纯展示,无状态、无事件。
+ */
+import type { AepChatMention } from '#shared/workshop-protocol'
+import type { ComposerMode } from '@/app/composables/workshop/useComposerMentions'
+
+defineProps<{
+  mode: ComposerMode
+  draftAgentMentions: AepChatMention[]
+  draftUserMentions: AepChatMention[]
+  taskMode: 'goal' | 'loop' | 'pipeline'
+  loopIntervalSeconds: number | null
+  targetName: string
+  isDefaultLead: boolean
+  reachHint: { tone: 'ok' | 'info' | 'warn', text: string, title: string } | null
+  priority: 'task' | 'immediate'
+}>()
+</script>
+
+<template>
+  <div class="composer-status-chip">
+    <template v-if="mode === 'chat'">
+      <span class="chip-key">{{ $t('chat.title') }}</span>
+      <span
+        v-if="draftAgentMentions.length > 0"
+        class="reach-chip"
+        data-tone="info"
+        :title="$t('chat.reachAgentsTitle')"
+      >
+        <span
+          class="reach-dot"
+          aria-hidden="true"
+        />{{ $t('chat.reachAgentsText', { p0: draftAgentMentions.map(m => m.label).join(' @'), p1: draftAgentMentions.length }) }}
+      </span>
+      <span
+        v-else
+        class="reach-chip"
+        data-tone="ok"
+        :title="$t('chat.reachNoAgentTitle')"
+      >
+        <span
+          class="reach-dot"
+          aria-hidden="true"
+        />{{ $t('chat.reachNoAgentText') }}
+      </span>
+      <span
+        v-if="draftUserMentions.length > 0"
+        class="chip-hint"
+      >@{{ draftUserMentions.map(m => m.label).join(' @') }}{{ $t('chat.notifyMembersSuffix') }}</span>
+      <span
+        v-else
+        class="chip-hint"
+      >{{ $t('chat.mentionHint') }}</span>
+    </template>
+    <template v-else-if="mode === 'task'">
+      <span class="chip-key">{{ $t('composer.k3wcox005') }}</span>
+      <span>{{ taskMode }}</span>
+      <span v-if="taskMode === 'loop'">
+        {{ $t('composer.k49kr1011') }} {{ loopIntervalSeconds ?? '-' }}s
+      </span>
+      <span
+        class="chip-target"
+        :title="isDefaultLead ? $t('composer.defaultLeadTitle') : $t('composer.kl3604i033', { p0: targetName })"
+      >→ {{ targetName ? `@${targetName}` : 'lead' }}{{ isDefaultLead ? $t('composer.k2z7yuw012') : $t('composer.k2z0fsx032') }}</span>
+      <!-- HITL 送达语义提示 -->
+      <span
+        v-if="reachHint"
+        class="reach-chip"
+        :data-tone="reachHint.tone"
+        :title="reachHint.title"
+      >
+        <span
+          class="reach-dot"
+          aria-hidden="true"
+        />{{ reachHint.text }}
+      </span>
+      <span class="chip-hint">{{ $t('composer.k17u6q77006') }}</span>
+    </template>
+    <template v-else>
+      <span class="chip-key">{{ $t('composer.k41ykc007') }}</span>
+      <span v-if="targetName">@{{ targetName }}{{ isDefaultLead ? $t('composer.k2z7yuw012') : '' }}</span>
+      <span>{{ priority === 'immediate' ? $t('composer.k1bosqfv013') : $t('composer.k40g8m009') }}</span>
+      <!-- 可达性提示(open-tag reach hint):对方能否收到、将以何种方式送达 -->
+      <span
+        v-if="reachHint"
+        class="reach-chip"
+        :data-tone="reachHint.tone"
+        :title="reachHint.title"
+      >
+        <span
+          class="reach-dot"
+          aria-hidden="true"
+        />{{ reachHint.text }}
+      </span>
+      <span class="chip-hint">{{ $t('composer.chipHint') }}</span>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* 状态行:轻 chip 说明当前模式参数 */
+.composer-status-chip {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  width: max-content;
+  max-width: 100%;
+  margin: 0 0 4px 2px;
+  padding: 2px 8px;
+  font-size: 11.5px;
+  color: var(--ink-faint);
+  background: var(--paper-deep);
+  border-radius: var(--radius-chip);
+}
+.chip-key {
+  font-weight: 600;
+  color: var(--ink-soft);
+}
+.chip-target {
+  font-weight: 600;
+  color: var(--ink);
+}
+.chip-hint {
+  margin-left: auto;
+  padding-left: 8px;
+  color: var(--ink-faint);
+}
+
+/* 可达性提示 chip:ok 绿 / info 蓝 / warn 琥珀 —— 状态不只靠颜色(附文字) */
+.reach-chip {
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  padding: 0 6px;
+  font-size: 10.5px;
+  border-radius: var(--radius-chip);
+}
+.reach-chip .reach-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.reach-chip[data-tone='ok'] { color: var(--tone-success-dot); background: color-mix(in srgb, var(--tone-success-dot) 10%, transparent); }
+.reach-chip[data-tone='info'] { color: var(--tone-info-dot); background: color-mix(in srgb, var(--tone-info-dot) 10%, transparent); }
+.reach-chip[data-tone='warn'] { color: var(--tone-warning-dot); background: color-mix(in srgb, var(--tone-warning-dot) 13%, transparent); }
+
+/* 窄屏覆盖(≤1023.98px):原 Composer.vue 同段规则按选择器归属拆分到此 */
+@media (max-width: 1023.98px) {
+  /* 状态 chip:桌面宽度自适应内容,窄屏必须允许折行,否则顶破输入卡 */
+  .composer-status-chip {
+    width: auto;
+    flex-wrap: wrap;
+    row-gap: 2px;
+    font-size: 11.5px;
+    line-height: 1.45;
+  }
+
+  .chip-hint {
+    flex: 1 1 100%;
+    padding-left: 0;
+    margin-left: 0;
+  }
+
+  .reach-chip {
+    font-size: 11.5px;
+  }
+}
+</style>

package/app/components/workshop/console/Dock.vue

@@ -1,71 +1,71 @@
-<script setup lang="ts">
-/**
- * 控制台底部区:Composer + 全部覆盖层(Agent/Task 抽屉、A2A 调试器、⌘K 命令面板)。
- *
- * 覆盖层与 Composer 同处一棵子树:抽屉宽度拖拽、⌘K 的「写消息」聚焦都依赖这层关系,
- * 故整块一起搬进本组件 —— composerBox 引用与 focusComposer 随之归位于此(聚焦目标
- * 仍是这棵子树里的第一个 textarea,与原页面 DOM 顺序一致)。
- *
- * 开关状态仍由页面持有(活动条、中部画布、右栏都要驱动抽屉),这里经 v-model
- * 读写同一份状态,不产生第二副本。
- */
-import type { CenterView } from '@/app/pages/workshop/composables/useWorkspaceShell'
-
-defineProps<{
-  wsId: string
-  /** 聚焦 channel(页面已确认存在,本组件只在其挂载时渲染) */
-  channelId: string
-}>()
-
-const view = defineModel<CenterView>('view', { required: true })
-const agentOpen = defineModel<boolean>('agentOpen', { required: true })
-const agentId = defineModel<string | null>('agentId', { required: true })
-const taskOpen = defineModel<boolean>('taskOpen', { required: true })
-const taskId = defineModel<string | null>('taskId', { required: true })
-const paletteOpen = defineModel<boolean>('paletteOpen', { required: true })
-const a2aOpen = defineModel<boolean>('a2aOpen', { required: true })
-
-/** 底部区根节点:⌘K「写消息」按 DOM 顺序取其中第一个 textarea 聚焦 */
-const composerBox = ref<HTMLElement | null>(null)
-const focusComposer = (): void => {
-  composerBox.value?.querySelector('textarea')?.focus()
-}
-</script>
-
-<template>
-  <div
-    ref="composerBox"
-    class="composer-pane"
-  >
-    <workshop-composer :channel-id="channelId" />
-
-    <!-- 抽屉 -->
-    <workshop-agent-inspector-drawer
-      v-model:open="agentOpen"
-      :channel-id="channelId"
-      :agent-id="agentId"
-    />
-    <workshop-task-inspector-drawer
-      v-model:open="taskOpen"
-      :channel-id="channelId"
-      :task-id="taskId"
-    />
-    <workshop-a2a-rpc-debugger
-      v-model:open="a2aOpen"
-      :channel-id="channelId"
-    />
-
-    <!-- ⌘K 命令面板 -->
-    <workshop-command-palette
-      v-model:open="paletteOpen"
-      :ws-id="wsId"
-      @set-view="view = $event"
-      @open-a2a-debug="a2aOpen = true"
-      @compose="focusComposer"
-    />
-  </div>
-</template>
-
-<style scoped>
-.composer-pane { flex: 0 0 auto; }
-</style>
+<script setup lang="ts">
+/**
+ * 控制台底部区:Composer + 全部覆盖层(Agent/Task 抽屉、A2A 调试器、⌘K 命令面板)。
+ *
+ * 覆盖层与 Composer 同处一棵子树:抽屉宽度拖拽、⌘K 的「写消息」聚焦都依赖这层关系,
+ * 故整块一起搬进本组件 —— composerBox 引用与 focusComposer 随之归位于此(聚焦目标
+ * 仍是这棵子树里的第一个 textarea,与原页面 DOM 顺序一致)。
+ *
+ * 开关状态仍由页面持有(活动条、中部画布、右栏都要驱动抽屉),这里经 v-model
+ * 读写同一份状态,不产生第二副本。
+ */
+import type { CenterView } from '@/app/pages/workshop/composables/useWorkspaceShell'
+
+defineProps<{
+  wsId: string
+  /** 聚焦 channel(页面已确认存在,本组件只在其挂载时渲染) */
+  channelId: string
+}>()
+
+const view = defineModel<CenterView>('view', { required: true })
+const agentOpen = defineModel<boolean>('agentOpen', { required: true })
+const agentId = defineModel<string | null>('agentId', { required: true })
+const taskOpen = defineModel<boolean>('taskOpen', { required: true })
+const taskId = defineModel<string | null>('taskId', { required: true })
+const paletteOpen = defineModel<boolean>('paletteOpen', { required: true })
+const a2aOpen = defineModel<boolean>('a2aOpen', { required: true })
+
+/** 底部区根节点:⌘K「写消息」按 DOM 顺序取其中第一个 textarea 聚焦 */
+const composerBox = ref<HTMLElement | null>(null)
+const focusComposer = (): void => {
+  composerBox.value?.querySelector('textarea')?.focus()
+}
+</script>
+
+<template>
+  <div
+    ref="composerBox"
+    class="composer-pane"
+  >
+    <workshop-composer :channel-id="channelId" />
+
+    <!-- 抽屉 -->
+    <workshop-agent-inspector-drawer
+      v-model:open="agentOpen"
+      :channel-id="channelId"
+      :agent-id="agentId"
+    />
+    <workshop-task-inspector-drawer
+      v-model:open="taskOpen"
+      :channel-id="channelId"
+      :task-id="taskId"
+    />
+    <workshop-a2a-rpc-debugger
+      v-model:open="a2aOpen"
+      :channel-id="channelId"
+    />
+
+    <!-- ⌘K 命令面板 -->
+    <workshop-command-palette
+      v-model:open="paletteOpen"
+      :ws-id="wsId"
+      @set-view="view = $event"
+      @open-a2a-debug="a2aOpen = true"
+      @compose="focusComposer"
+    />
+  </div>
+</template>
+
+<style scoped>
+.composer-pane { flex: 0 0 auto; }
+</style>

package/app/components/workshop/console/LeftPane.vue

@@ -1,84 +1,84 @@
-<script setup lang="ts">
-/**
- * 控制台左栏:Channel 会话列表(可滚动)+ 底部实时代理活动条。
- * 宽度由页面注入(拖拽分隔条住在页面那一层,宽度状态因此不在此组件);
- * 窄屏时本栏退化成覆盖式抽屉(见文末 @media:绝对定位 + pane-in 动画)。
- */
-defineProps<{
-  wsId: string
-  leftWidth: number
-  /** 窄屏档(≤1023):宽度不再由拖拽决定,改为抽屉定宽 */
-  narrow: boolean
-}>()
-
-const emit = defineEmits<{ (e: 'openAgent', target: { channelId: string, agentId: string }): void }>()
-</script>
-
-<template>
-  <div
-    class="left-pane"
-    :style="{ flexBasis: narrow ? 'auto' : `${leftWidth}px` }"
-  >
-    <div class="left-scroll">
-      <workshop-channel-session-list :ws-id="wsId" />
-    </div>
-    <workshop-live-agent-bar
-      :ws-id="wsId"
-      @open-agent="emit('openAgent', $event)"
-    />
-  </div>
-</template>
-
-<style scoped>
-.left-pane {
-  display: flex;
-  flex: 0 0 auto; /* 宽度由拖拽分隔条驱动(inline flexBasis) */
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-  background: var(--paper);
-}
-.left-scroll {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: hidden auto;
-}
-
-/* ══════════════════════════════════════════════════════════════════════════
-   窄屏形态 · 左栏部分(≤1023px) —— 完整设计说明见页面
-   app/pages/workshop/w/[wsId].vue 的「窄屏形态 · 单通道示波器」样式块:
-   会话列表不再占位,收成覆盖式抽屉(点遮罩/Esc/选中频道收起)。
-   断点数值与 main.css v5 / useResponsive.ts 一致,不引入新魔数。
-   ══════════════════════════════════════════════════════════════════════════ */
-@media (max-width: 1023.98px) {
-  .left-pane {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 30;
-    width: min(86vw, 320px);
-    border-right: 1px solid var(--line);
-    box-shadow: var(--shadow-float);
-    animation: pane-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .left-pane {
-    animation: none;
-  }
-}
-
-@keyframes pane-in {
-  from {
-    opacity: 0.5;
-    transform: translateX(-16px);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-</style>
+<script setup lang="ts">
+/**
+ * 控制台左栏:Channel 会话列表(可滚动)+ 底部实时代理活动条。
+ * 宽度由页面注入(拖拽分隔条住在页面那一层,宽度状态因此不在此组件);
+ * 窄屏时本栏退化成覆盖式抽屉(见文末 @media:绝对定位 + pane-in 动画)。
+ */
+defineProps<{
+  wsId: string
+  leftWidth: number
+  /** 窄屏档(≤1023):宽度不再由拖拽决定,改为抽屉定宽 */
+  narrow: boolean
+}>()
+
+const emit = defineEmits<{ (e: 'openAgent', target: { channelId: string, agentId: string }): void }>()
+</script>
+
+<template>
+  <div
+    class="left-pane"
+    :style="{ flexBasis: narrow ? 'auto' : `${leftWidth}px` }"
+  >
+    <div class="left-scroll">
+      <workshop-channel-session-list :ws-id="wsId" />
+    </div>
+    <workshop-live-agent-bar
+      :ws-id="wsId"
+      @open-agent="emit('openAgent', $event)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.left-pane {
+  display: flex;
+  flex: 0 0 auto; /* 宽度由拖拽分隔条驱动(inline flexBasis) */
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--paper);
+}
+.left-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden auto;
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   窄屏形态 · 左栏部分(≤1023px) —— 完整设计说明见页面
+   app/pages/workshop/w/[wsId].vue 的「窄屏形态 · 单通道示波器」样式块:
+   会话列表不再占位,收成覆盖式抽屉(点遮罩/Esc/选中频道收起)。
+   断点数值与 main.css v5 / useResponsive.ts 一致,不引入新魔数。
+   ══════════════════════════════════════════════════════════════════════════ */
+@media (max-width: 1023.98px) {
+  .left-pane {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 30;
+    width: min(86vw, 320px);
+    border-right: 1px solid var(--line);
+    box-shadow: var(--shadow-float);
+    animation: pane-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .left-pane {
+    animation: none;
+  }
+}
+
+@keyframes pane-in {
+  from {
+    opacity: 0.5;
+    transform: translateX(-16px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+</style>