agentworkshop 0.7.44 → 0.7.47

package/app/components/logs/LogsManualModal.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+/**
+ * 人工记录弹窗:摘要(必填)+ 可选详情 + 归属维度(产线/产品/Recipe),Teleport 到 body。
+ *
+ * 草稿由本组件持有:打开时按页面给出的筛选口径重置(关闭不清空,下一次打开再重置);
+ * 提交流程在页面(useLogsManual):成功后关窗并重查,失败时弹窗保持打开、输入不丢,
+ * 错误经 error 属性呈现(useOpsLog.error.post),不在此处再弹一层提示。
+ *
+ * 级联选项仍按筛选口径过滤(与原实现一致):弹窗内改选产线不会重建选项列表,
+ * 只清空下游选择 —— 这是既有行为,不要"顺手修正"成按草稿过滤。
+ */
+import { computed, reactive, watch } from 'vue'
+import type { LogsManualDraft, LogsManualScope } from '@/app/pages/logs/composables/useLogsManual'
+import { useLogsScope } from '@/app/pages/logs/composables/useLogsScope'
+
+const props = defineProps<{
+  /** 筛选口径(= 筛选区当前维度):草稿初值与级联选项都取它 */
+  scope: LogsManualScope
+  /** 提交中(提交按钮置灰) */
+  posting: boolean
+  /** 提交失败信息(空串 = 无错误) */
+  error: string
+}>()
+
+const emit = defineEmits<{
+  submit: [draft: LogsManualDraft]
+}>()
+
+/** 开合经 v-model 回流页面:页面持有唯一副本,页头入口与遮罩/取消按钮都落在它上面 */
+const open = defineModel<boolean>('open', { required: true })
+
+const draft = reactive<LogsManualDraft>({ summary: '', detail: '', lineId: '', productId: '', recipeId: '' })
+
+const { lines, productsOfLine, recipesOfScope } = useLogsScope()
+
+const productOptions = computed(() => productsOfLine(props.scope.lineId))
+const recipeOptions = computed(() => recipesOfScope(props.scope.lineId, props.scope.productId))
+
+// 打开即重置草稿(与筛选区同维度起步);关闭不清空,避免失败重试时丢输入
+watch(open, (on) => {
+  if (!on) return
+  draft.summary = ''
+  draft.detail = ''
+  draft.lineId = props.scope.lineId
+  draft.productId = props.scope.productId
+  draft.recipeId = props.scope.recipeId
+})
+
+function close(): void {
+  open.value = false
+}
+
+/** 产线变更 → 产品/Recipe 选择失效 */
+function onLineChange(): void {
+  draft.productId = ''
+  draft.recipeId = ''
+}
+
+/** 产品变更 → Recipe 选择失效 */
+function onProductChange(): void {
+  draft.recipeId = ''
+}
+
+/** 提交取当前草稿快照(值在点击瞬间定稿,后续编辑不影响已发请求) */
+function onSubmit(): void {
+  emit('submit', { ...draft })
+}
+</script>
+
+<template>
+  <!-- 人工记录弹窗 -->
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="modal-mask"
+      @click.self="close"
+    >
+      <div class="modal">
+        <h3 class="m-title">
+          {{ $t('logs.manual') }}
+        </h3>
+        <label class="m-f">
+          <span>{{ $t('logs.mSummary') }} *</span>
+          <textarea
+            v-model="draft.summary"
+            rows="3"
+            :placeholder="$t('logs.mSummaryPh')"
+          />
+        </label>
+        <label class="m-f">
+          <span>{{ $t('logs.mDetail') }}</span>
+          <textarea
+            v-model="draft.detail"
+            rows="2"
+            :placeholder="$t('logs.mDetailPh')"
+          />
+        </label>
+        <div class="m-grid">
+          <label class="m-f">
+            <span>{{ $t('logs.fLine') }}</span>
+            <select
+              v-model="draft.lineId"
+              class="inp-sel"
+              @change="onLineChange"
+            >
+              <option value="">
+                {{ $t('logs.all') }}
+              </option>
+              <option
+                v-for="l in lines"
+                :key="l.id"
+                :value="l.id"
+              >
+                {{ l.name }}
+              </option>
+            </select>
+          </label>
+          <label class="m-f">
+            <span>{{ $t('logs.fProduct') }}</span>
+            <select
+              v-model="draft.productId"
+              class="inp-sel"
+              @change="onProductChange"
+            >
+              <option value="">
+                {{ $t('logs.all') }}
+              </option>
+              <option
+                v-for="p in productOptions"
+                :key="p.id"
+                :value="p.id"
+              >
+                {{ p.name }}
+              </option>
+            </select>
+          </label>
+          <label class="m-f">
+            <span>Recipe</span>
+            <select
+              v-model="draft.recipeId"
+              class="inp-sel"
+            >
+              <option value="">
+                {{ $t('logs.all') }}
+              </option>
+              <option
+                v-for="r in recipeOptions"
+                :key="r.id"
+                :value="r.id"
+              >
+                {{ r.name }}
+              </option>
+            </select>
+          </label>
+        </div>
+        <p
+          v-if="error"
+          class="err"
+        >
+          {{ error }}
+        </p>
+        <div class="m-actions">
+          <button
+            class="ghost-btn"
+            @click="close"
+          >
+            {{ $t('common.cancel') }}
+          </button>
+          <button
+            class="pill-btn"
+            :disabled="posting || !draft.summary.trim()"
+            @click="onSubmit"
+          >
+            {{ $t('logs.mSubmit') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+/* 错误条:结果表内的同名规则是逐字复制(样式随标记走,不抽公共 css) */
+.err { margin: 0; padding: 8px 14px; font-size: 13px; color: var(--tone-danger-dot); }
+/* 输入框工具类:筛选卡内的同名规则是逐字复制(同上;.m-f .inp-sel 的更高特异性压制它,
+   与原页面同一层叠关系) */
+.inp-sel {
+  min-width: 0; padding: 6px 9px; font-size: 13px; color: var(--ink);
+  background: var(--frost-bg);
+  border: 1px solid var(--glass-line); border-radius: 7px; outline: none;
+}
+.inp-sel:focus { border-color: color-mix(in srgb, var(--tone-info-dot) 55%, transparent); }
+
+.m-title { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
+.modal-mask {
+  position: fixed; inset: 0; z-index: 60;
+  display: flex; align-items: center; justify-content: center;
+  padding: 20px;
+  background: color-mix(in srgb, var(--ink) 32%, transparent);
+  backdrop-filter: blur(3px);
+}
+.modal {
+  width: min(560px, 94vw);
+  padding: 16px 18px;
+  background: var(--surface-glass);
+  border: 1px solid var(--glass-line);
+  border-radius: 12px;
+  backdrop-filter: blur(calc(var(--aurora-blur) * 1.4)) saturate(1.2);
+}
+.m-f { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-faint); }
+.m-f textarea, .m-f .inp-sel {
+  padding: 7px 9px; font-size: 13px; color: var(--ink);
+  background: var(--frost-bg); border: 1px solid var(--glass-line); border-radius: 7px; outline: none;
+  font-family: inherit; resize: vertical;
+}
+.m-f textarea:focus, .m-f .inp-sel:focus { border-color: color-mix(in srgb, var(--tone-info-dot) 55%, transparent); }
+.m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
+.m-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
+
+@media (max-width: 899px) {
+  /* 手指命中区:弹窗动作按钮的原始高度偏小。
+     同一组声明(原页面 scoped 块 @media 899 内)按"样式随标记走"的约束
+     逐字复制进需要它的每个组件 —— 此处与 LogsPageHead/LogsFilterCard/LogsEventTable
+     的对应块是有意重复,不要合并成公共 css。 */
+  .m-actions .pill-btn,
+  .m-actions .ghost-btn {
+    min-height: 40px;
+    padding: 8px 14px;
+  }
+}
+</style>

package/app/components/logs/LogsPageHead.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/**
+ * 日志页页头:aw-page-head 规范(kicker + 大标题 + 描述)+ 实时轨计数 + 手动记录入口。
+ * 计数取自 WS 实时轨(ops.log 帧的环形缓冲),与结果表的 REST 快照互不干扰。
+ * 手动记录只上报点击,弹窗开合与提交由页面持有(页头不持有任何状态)。
+ */
+defineProps<{
+  /** 实时轨当前条数(useOpsLog.recent) */
+  recentCount: number
+}>()
+
+defineEmits<{
+  manual: []
+}>()
+</script>
+
+<template>
+  <!-- 页头(aw-page-head 规范:kicker + 大标题 + 描述)+ 手动记录入口 -->
+  <header class="aw-page-head">
+    <div>
+      <p class="aw-kicker">
+        agentworkshop / audit log
+      </p>
+      <h1>{{ $t('logs.title') }}</h1>
+      <p class="sub">
+        {{ $t('logs.sub') }}
+      </p>
+    </div>
+    <div class="head-actions">
+      <span
+        class="live-dot"
+        :title="$t('logs.liveHint')"
+      /><span class="live-txt mono">{{ $t('logs.live') }} {{ recentCount }}</span>
+      <button
+        class="pill-btn"
+        @click="$emit('manual')"
+      >
+        <span class="i-tabler-plus" />
+        {{ $t('logs.manual') }}
+      </button>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.head-actions { display: flex; gap: 10px; align-items: center; padding-bottom: 4px; }
+.sub { margin: 8px 0 0; font-size: 13px; color: var(--ink-faint); }
+.live-dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: var(--tone-success-dot);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone-success-dot) 45%, transparent);
+  animation: livePulse 2s ease-out infinite;
+}
+@keyframes livePulse {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone-success-dot) 45%, transparent); }
+  70% { box-shadow: 0 0 0 8px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}
+.live-txt { font-size: 11.5px; color: var(--ink-faint); }
+
+@media (max-width: 899px) {
+  /* 手指命中区:表格内的 mini-btn 原始高度只有 ~24px。
+     同一组声明(原页面 scoped 块 @media 899 内)按"样式随标记走"的约束
+     逐字复制进需要它的每个组件 —— 此处与 LogsEventTable/LogsFilterCard/LogsManualModal
+     的对应块是有意重复,不要合并成公共 css。 */
+  .head-actions .pill-btn {
+    min-height: 40px;
+    padding: 8px 14px;
+  }
+}
+</style>

package/app/components/monitor/MonitorAgentTable.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+/**
+ * AgentRuntime 表:已装配 Agent(角色 / harness / 状态 / 当前任务 / 归属进程)+ 行内动作
+ * (打开原生终端镜像、终止该 AgentRuntime)。
+ *
+ * 纯呈现:快照行、loading、terminating 全部由页面下发;终止请求由页面统一发起,
+ * 组件不取数、不订阅、不各自持有 in-flight 状态。
+ */
+import type { AgentView } from '@/app/pages/monitor/types'
+import { useAgentColumns } from '@/app/pages/monitor/composables/useMonitorColumns'
+import { useAgentStateLabels, useMonitorFormat } from '@/app/pages/monitor/composables/useMonitorFormat'
+
+defineProps<{
+  /** AgentRuntime 行(页面持有的快照切片) */
+  rows: AgentView[]
+  /** 快照加载中 */
+  loading: boolean
+  /** 终止请求在途(禁用全部终止按钮,防连点) */
+  terminating: boolean
+}>()
+
+defineEmits<{
+  /** 打开该 Agent 归属进程的原生终端镜像(HITL) */
+  openTerminal: [pid: number, name: string | null, role: string | null]
+  /** 终止该 AgentRuntime(服务端随之 stop/卸载) */
+  terminate: [agent: AgentView]
+}>()
+
+const { t } = useI18n()
+const { shortId } = useMonitorFormat()
+const { stateColor, stateText } = useAgentStateLabels()
+const agentColumns = useAgentColumns()
+</script>
+
+<template>
+  <!-- AgentRuntime 表 -->
+  <a-card
+    class="aw-panel"
+    :title="t('monitor.agentRuntimes')"
+  >
+    <template #extra>
+      <span class="aw-mono count-extra">{{ rows.length }} wired</span>
+    </template>
+    <a-table
+      :columns="agentColumns"
+      :data-source="rows"
+      :pagination="false"
+      :loading="loading"
+      row-key="agentId"
+      size="small"
+      :scroll="{ x: 980 }"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'role'">
+          <a-tag :color="record.role === 'lead' ? 'gold' : 'blue'">
+            {{ record.role }}
+          </a-tag>
+        </template>
+        <template v-else-if="column.key === 'harness'">
+          <a-tag>{{ record.harness }}</a-tag>
+        </template>
+        <template v-else-if="column.key === 'state'">
+          <a-tag :color="stateColor[record.state] ?? 'default'">
+            {{ stateText[record.state] ?? record.state }}
+          </a-tag>
+        </template>
+        <template v-else-if="column.key === 'currentTaskId'">
+          <span class="aw-mono">{{ shortId(record.currentTaskId) }}</span>
+        </template>
+        <template v-else-if="column.key === 'channelId'">
+          <span class="aw-mono">{{ shortId(record.channelId) }}</span>
+        </template>
+        <template v-else-if="column.key === 'pid'">
+          <span v-if="record.process">
+            <a-tag
+              :color="record.process.alive ? 'success' : 'default'"
+              class="aw-mono"
+            >
+              PID {{ record.process.pid }}
+            </a-tag>
+          </span>
+          <span
+            v-else
+            class="aw-mono"
+          >in-proc</span>
+        </template>
+        <template v-else-if="column.key === 'actions'">
+          <a-space :size="4">
+            <a-button
+              v-if="record.process?.alive"
+              size="small"
+              type="primary"
+              ghost
+              :title="t('monitor.openTerminalHint')"
+              @click="$emit('openTerminal', record.process.pid, record.name, record.role)"
+            >
+              <template #icon>
+                <span class="i-tabler-terminal-2" />
+              </template>
+              {{ t('monitor.openTerminal') }}
+            </a-button>
+            <a-popconfirm
+              :title="`${t('monitor.terminateConfirm')}(${record.name})`"
+              :ok-text="t('common.confirm')"
+              :cancel-text="t('common.cancel')"
+              @confirm="$emit('terminate', record as AgentView)"
+            >
+              <a-button
+                size="small"
+                danger
+                :disabled="terminating"
+              >
+                <template #icon>
+                  <span class="i-tabler-square-x" />
+                </template>
+                {{ t('monitor.terminate') }}
+              </a-button>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<style scoped>
+/* 卡片右上角计数:tabular mono 数据(非眉题)。
+   同一规则在 MonitorChannelTable / MonitorProcessTable 的 scoped 块里逐字复制
+   (样式随标记走,不抽公共 css):有意重复,改一处同步所有副本。 */
+.count-extra {
+  font-size: 11.5px;
+  color: var(--ink-faint);
+}
+
+/* 空表占位行:antd 会给固定列单元格加 position: sticky,而 scroll.x=980
+   让整行宽 980px —— 在 375px 视口里它就成了"视口外的固定元素"(实测
+   td.ant-table-cell 暂无数据 left=47 right=1027)。占位单元格没有固定列语义,
+   取消 sticky 即可(有数据时固定列行为不变)。
+   同规则在 MonitorChannelTable / MonitorProcessTable 逐字复制:有意重复,改一处同步所有副本。 */
+:deep(.ant-table-placeholder > td) {
+  position: static !important;
+}
+</style>

package/app/components/monitor/MonitorChannelTable.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+/**
+ * ChannelRuntime 表:已装配的 Channel(成员数 / 已装配 Agent 数 / 调度器 / lead)。
+ *
+ * 纯呈现:行数据是页面的唯一快照切片,组件不取数、不订阅、不持有状态。
+ */
+import type { ChannelView } from '@/app/pages/monitor/types'
+import { useChannelColumns } from '@/app/pages/monitor/composables/useMonitorColumns'
+import { useMonitorFormat } from '@/app/pages/monitor/composables/useMonitorFormat'
+
+defineProps<{
+  /** ChannelRuntime 行(页面持有的快照切片) */
+  rows: ChannelView[]
+  /** 快照加载中 */
+  loading: boolean
+}>()
+
+const { t } = useI18n()
+const { shortId } = useMonitorFormat()
+const channelColumns = useChannelColumns()
+</script>
+
+<template>
+  <!-- ChannelRuntime 表 -->
+  <a-card
+    class="aw-panel"
+    :title="t('monitor.channelRuntimes')"
+  >
+    <template #extra>
+      <span class="aw-mono count-extra">{{ rows.length }} wired</span>
+    </template>
+    <a-table
+      :columns="channelColumns"
+      :data-source="rows"
+      :pagination="false"
+      :loading="loading"
+      row-key="channelId"
+      size="small"
+      :scroll="{ x: 720 }"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'channelId'">
+          <span class="aw-mono">{{ shortId(record.channelId) }}</span>
+        </template>
+        <template v-else-if="column.key === 'hasScheduler'">
+          <a-tag
+            v-if="record.hasScheduler"
+            color="purple"
+          >
+            {{ t('monitor.scheduling') }}
+          </a-tag>
+          <a-tag v-else>
+            –
+          </a-tag>
+        </template>
+        <template v-else-if="column.key === 'leadAgentId'">
+          <span class="aw-mono">{{ shortId(record.leadAgentId) }}</span>
+        </template>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<style scoped>
+/* 卡片右上角计数:tabular mono 数据(非眉题)。
+   同一规则在 MonitorAgentTable / MonitorProcessTable 的 scoped 块里逐字复制
+   (样式随标记走,不抽公共 css):有意重复,改一处同步所有副本。 */
+.count-extra {
+  font-size: 11.5px;
+  color: var(--ink-faint);
+}
+
+/* 空表占位行:antd 会给固定列单元格加 position: sticky,而 scroll.x=720
+   让整行宽 720px —— 在 375px 视口里它就成了"视口外的固定元素"。占位单元格没有
+   固定列语义,取消 sticky 即可(有数据时固定列行为不变)。
+   同规则在 MonitorAgentTable / MonitorProcessTable 逐字复制:有意重复,改一处同步所有副本。 */
+:deep(.ant-table-placeholder > td) {
+  position: static !important;
+}
+</style>

package/app/components/monitor/MonitorLoginGate.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/**
+ * 未登录门:没有 token 时不发请求(useMonitorData.poll 自带 token 判空),
+ * 只把用户引到 /workshop 登录。
+ *
+ * 纯呈现,无状态、无样式需求(卡片的 .aw-panel 只作为"页面里的一张面板"标记)。
+ */
+const { t } = useI18n()
+</script>
+
+<template>
+  <a-card class="aw-panel">
+    <a-result :title="t('monitor.needLogin')">
+      <template #extra>
+        <a-button
+          type="primary"
+          @click="navigateTo('/workshop')"
+        >
+          {{ t('monitor.goLogin') }}
+        </a-button>
+      </template>
+    </a-result>
+  </a-card>
+</template>

package/app/components/monitor/MonitorPageHead.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * 监控页页头:标题 + 视图范围徽标(本人/全量) + 自动刷新开关 + 手动刷新按钮。
+ *
+ * 纯呈现:快照范围、loading、开关值都由页面下发 —— 轮询与 5s 定时器只在
+ * useMonitorData 里注册一次,这里只把开关变化与点击冒泡回页面。
+ */
+defineProps<{
+  /** 视图范围(user = 本人资源 | admin = 全量);快照未到位时为 undefined */
+  scope?: 'user' | 'admin'
+  /** 手动刷新按钮的 loading(与自动刷新共用同一份 loading) */
+  loading: boolean
+}>()
+
+const autoRefresh = defineModel<boolean>('autoRefresh', { required: true })
+
+defineEmits<{
+  /** 手动刷新一次快照 */
+  refresh: []
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="aw-page-head">
+    <div>
+      <p class="aw-kicker">
+        {{ t('menu.system') }} / runtime ledger
+      </p>
+      <h1>
+        {{ t('monitor.title') }}
+        <a-tag
+          :color="scope === 'admin' ? 'volcano' : 'blue'"
+          class="scope-tag"
+        >
+          <span :class="scope === 'admin' ? 'i-tabler-shield-check' : 'i-tabler-user'" />
+          {{ scope === 'admin' ? $t('monitor.k16zpmg9002') : $t('monitor.k1dzryry003') }}
+        </a-tag>
+      </h1>
+    </div>
+    <div class="head-right">
+      <a-switch
+        v-model:checked="autoRefresh"
+        size="small"
+      />
+      <span class="toggle-label">{{ t('monitor.autoRefresh') }}</span>
+      <a-button
+        size="small"
+        :loading="loading"
+        @click="$emit('refresh')"
+      >
+        <template #icon>
+          <span class="i-tabler-refresh" />
+        </template>
+        {{ t('monitor.refresh') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.head-right {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.scope-tag {
+  margin-left: 10px;
+  font-size: 11.5px;
+  vertical-align: 3px;
+}
+
+.toggle-label {
+  font-size: 12.5px;
+  color: var(--ink-soft);
+}
+
+/* 窄屏(≤899px):页头右侧操作组换行 + 标签字号收边。原页面里它与
+   MonitorStatGrid 的 .stat-updated 同属一个 @media 899 块,拆组件时随各自标记走。 */
+@media (max-width: 899px) {
+  .head-right {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .toggle-label {
+    font-size: 13px;
+  }
+}
+</style>