agentworkshop 0.2.1

package/app/components/workshop/FileSelectorModal.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+/**
+ * FileSelector:服务器目录选择弹窗(FileSelector 数据源 = GET /api/workshop/fs/dirs)。
+ * 面包屑导航 + 目录列表(点击进入 / 📂 图标指示有子目录);支持地址栏直接输入绝对路径跳转。
+ * 确定 -> emit('select', 绝对路径);浏览器自身无法读服务器路径,故走后端目录浏览。
+ */
+import { message } from 'ant-design-vue'
+import { useUserStore } from '@/app/stores/workshop/user'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  /** 受控 open(v-model:open) */
+  open: boolean
+  /** 初始浏览路径(空 = 项目根) */
+  initialPath?: string
+  title?: string
+}>()
+const emit = defineEmits<{
+  (e: 'update:open', v: boolean): void
+  (e: 'select', path: string): void
+}>()
+
+const userStore = useUserStore()
+const cwd = ref('')
+const parent = ref<string | null>(null)
+const dirs = ref<Array<{ name: string, path: string, hasChildren: boolean }>>([])
+const loading = ref(false)
+/** 地址栏(手动输入绝对路径跳转) */
+const manualPath = ref('')
+
+const load = async (path?: string): Promise<void> => {
+  loading.value = true
+  try {
+    const res = await fetch(`/api/workshop/fs/dirs${path ? `?path=${encodeURIComponent(path)}` : ''}`, {
+      headers: { authorization: `Bearer ${userStore.token}` },
+    })
+    const json = await res.json()
+    if (json.code !== 0) {
+      message.warning(json.message ?? t('fileSelectorModal.kz99pgv004'))
+      return
+    }
+    cwd.value = json.data.cwd
+    parent.value = json.data.parent
+    dirs.value = json.data.dirs ?? []
+    manualPath.value = json.data.cwd
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+watch(() => props.open, (v) => {
+  if (v) void load(props.initialPath || cwd.value || undefined)
+})
+
+/** 面包屑:把 cwd 按分隔符拆段,逐级可点 */
+const crumbs = computed(() => {
+  const sep = cwd.value.includes('\\') ? '\\' : '/'
+  const parts = cwd.value.split(sep).filter(Boolean)
+  const out: Array<{ label: string, path: string }> = []
+  // Windows 盘符("D:")从根拼;POSIX 首段带根斜杠
+  let acc = ''
+  for (const p of parts) {
+    acc = acc ? acc + sep + p : (p.endsWith(':') ? p + sep : sep + p)
+    out.push({ label: p, path: acc })
+  }
+  return out
+})
+
+const enter = (path: string): void => void load(path)
+const goManual = (): void => {
+  const p = manualPath.value.trim()
+  if (p) void load(p)
+}
+const confirm = (): void => {
+  if (!cwd.value) return
+  emit('select', cwd.value)
+  emit('update:open', false)
+}
+const cancel = (): void => emit('update:open', false)
+</script>
+
+<template>
+  <a-modal
+    :open="open"
+    :title="title ?? '选择工作目录'"
+    :width="640"
+    ok-text="选择此目录"
+    cancel-text="取消"
+    :confirm-loading="loading"
+    @ok="confirm"
+    @cancel="cancel"
+  >
+    <div class="fs">
+      <!-- 地址栏:面包屑 + 手动输入跳转 -->
+      <div class="addr">
+        <a-breadcrumb class="crumbs">
+          <a-breadcrumb-item
+            v-for="(c, i) in crumbs"
+            :key="c.path + i"
+          >
+            <a @click.prevent="enter(c.path)">{{ c.label }}</a>
+          </a-breadcrumb-item>
+        </a-breadcrumb>
+      </div>
+      <a-input-search
+        v-model:value="manualPath"
+        size="small"
+        class="manual"
+        placeholder="输入绝对路径跳转(如 D:\\projects\\my-app)"
+        enter-button="跳转"
+        @search="goManual"
+      />
+
+      <!-- 目录列表 -->
+      <a-spin :spinning="loading">
+        <div class="list">
+          <div
+            v-if="parent"
+            class="row up"
+            @click="enter(parent)"
+          >
+            <span class="icon">⬆</span>
+            <span class="name">{{ $t('fileSelectorModal.kvwnnvn001') }}</span>
+          </div>
+          <div
+            v-for="d in dirs"
+            :key="d.path"
+            class="row"
+            @click="enter(d.path)"
+            @dblclick="confirm"
+          >
+            <span class="icon">{{ d.hasChildren ? '📂' : '📁' }}</span>
+            <span class="name">{{ d.name }}</span>
+          </div>
+          <div
+            v-if="!loading && dirs.length === 0"
+            class="empty"
+          >
+            {{ $t('fileSelectorModal.k268o2o002') }}
+          </div>
+        </div>
+      </a-spin>
+
+      <div class="hint">
+        {{ $t('fileSelectorModal.k1rt80dq003') }}
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<style scoped>
+.fs { display: flex; flex-direction: column; gap: 8px; }
+.addr {
+  padding: 4px 8px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  background: color-mix(in srgb, currentColor 5%, transparent);
+  border-radius: var(--radius-chip);
+}
+.crumbs :deep(a) { color: var(--color-primary); }
+.manual { max-width: 100%; }
+.list {
+  height: 280px;
+  overflow-y: auto;
+  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+  border-radius: var(--radius-chip);
+}
+.row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 4px 10px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.row:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
+.row.up { opacity: 0.7; }
+.icon { flex: 0 0 auto; }
+.name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.empty { padding: 24px; font-size: 12px; opacity: 0.4; text-align: center; }
+.hint { font-size: 11px; opacity: 0.55; }
+</style>

package/app/components/workshop/InspectorPanel.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+/**
+ * 右侧 Inspector:成员/任务/记忆 三 Tab。
+ * 成员:实时状态 + 队列;点击 → 打开 Agent 抽屉(独立流/队列/记忆)。
+ * 任务:根任务列表;点击 → 打开 Task 抽屉(状态时间线/交付物/取消)。
+ */
+import { useEntitiesStore } from '@/app/stores/workshop/entities'
+
+const { t } = useI18n()
+
+const props = defineProps<{ channelId: string }>()
+const emit = defineEmits<{
+  (e: 'openAgent' | 'openTask', id: string): void
+}>()
+const entities = useEntitiesStore()
+
+const tab = ref<'members' | 'tasks' | 'memory' | 'stats'>('members')
+
+const agents = computed(() => entities.agents[props.channelId] ?? [])
+const tasks = computed(() => entities.tasks[props.channelId] ?? [])
+const rootTasks = computed(() => tasks.value.filter(t => !t.parentId))
+/** 实体基线(WS 快照)是否已到达:未到时列表为空 ≠ 真的没有,展示同步提示 */
+const synced = computed(() => entities.channels[props.channelId] !== undefined)
+
+// 成员能力画像(koda 运营信号):按任务历史算成功率/均耗时
+const capability = computed(() => {
+  const map = new Map<string, { total: number, completed: number, failed: number, durationSum: number }>()
+  for (const t of tasks.value) {
+    if (t.state !== 'COMPLETED' && t.state !== 'FAILED') continue
+    const agg = map.get(t.assigneeId) ?? { total: 0, completed: 0, failed: 0, durationSum: 0 }
+    agg.total += 1
+    if (t.state === 'COMPLETED') {
+      agg.completed += 1
+      if (t.updatedAt && t.createdAt) {
+        agg.durationSum += Math.max(0, new Date(t.updatedAt).getTime() - new Date(t.createdAt).getTime())
+      }
+    }
+    else {
+      agg.failed += 1
+    }
+    map.set(t.assigneeId, agg)
+  }
+  return map
+})
+const capLine = (agentId: string): string => {
+  const agg = capability.value.get(agentId)
+  if (!agg || agg.total === 0) return t('inspectorPanel.k1el1plr007')
+  const rate = Math.round((agg.completed / agg.total) * 100)
+  const avg = agg.completed > 0 ? Math.round(agg.durationSum / agg.completed / 1000) : 0
+  return t('inspectorPanel.k12oip5c010', { p0: rate, p1: avg, p2: agg.failed })
+}
+const childCount = (id: string): number => tasks.value.filter(t => t.parentId === id).length
+
+const stateDot: Record<string, string> = {
+  idle: 'var(--tone-success-dot)',
+  busy: 'var(--tone-info-dot)',
+  stopped: 'var(--tone-neutral-dot)',
+}
+</script>
+
+<template>
+  <div class="inspector">
+    <a-tabs
+      v-model:active-key="tab"
+      size="small"
+      class="tabs"
+    >
+      <a-tab-pane
+        key="members"
+        tab="成员"
+      >
+        <div
+          v-for="a in agents"
+          :key="a.agentId"
+          class="member aw-tile"
+          role="button"
+          tabindex="0"
+          @click="emit('openAgent', a.agentId)"
+          @keydown.enter="emit('openAgent', a.agentId)"
+        >
+          <span
+            class="dot"
+            :style="{ background: stateDot[a.state] ?? 'var(--tone-neutral-dot)' }"
+          />
+          <div class="member-info">
+            <div class="member-name">
+              <span class="name-text">{{ a.name }}</span>
+              <span
+                class="role-chip"
+                :class="a.role"
+              >{{ a.role }}</span>
+            </div>
+            <div class="member-meta">
+              <template v-if="a.state === 'busy' && a.currentTaskTitle">
+                {{ a.currentTaskTitle }}
+                <span
+                  v-if="a.currentTaskProgress != null"
+                  class="prog"
+                >{{ a.currentTaskProgress }}%</span>
+              </template>
+              <template v-else>
+                {{ a.state }}
+                <template v-if="a.queued">
+                  · {{ $t('inspectorPanel.k498bf001') }} {{ a.queued }}
+                </template>
+                <template v-if="a.completed">
+                  · {{ $t('inspectorPanel.k3ypnl002') }} {{ a.completed }}
+                </template>
+              </template>
+            </div>
+            <div class="member-cap">
+              {{ capLine(a.agentId) }}
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="agents.length === 0"
+          class="empty"
+        >
+          {{ synced ? $t('inspectorPanel.k1el4cgf005') : $t('inspectorPanel.k1tqitzl008') }}
+        </div>
+      </a-tab-pane>
+
+      <a-tab-pane
+        key="tasks"
+        tab="任务"
+      >
+        <div
+          v-for="t in rootTasks"
+          :key="t.id"
+          class="task aw-tile"
+          role="button"
+          tabindex="0"
+          @click="emit('openTask', t.id)"
+          @keydown.enter="emit('openTask', t.id)"
+        >
+          <div class="task-head">
+            <span class="state-chip aw-mono">{{ t.state }}</span>
+            <span class="task-title">{{ t.title }}</span>
+          </div>
+          <div class="task-meta">
+            {{ t.id.slice(0, 8) }} · {{ t.progress }}%
+            <span v-if="childCount(t.id)">· {{ $t('inspectorPanel.k3mp44x003') }} {{ childCount(t.id) }}</span>
+            <span v-if="t.artifacts">· {{ $t('inspectorPanel.k3w9q9004') }} {{ t.artifacts }}</span>
+          </div>
+          <a-progress
+            v-if="t.state === 'WORKING'"
+            :percent="t.progress"
+            size="small"
+            :show-info="false"
+          />
+        </div>
+        <div
+          v-if="rootTasks.length === 0"
+          class="empty"
+        >
+          {{ synced ? $t('inspectorPanel.k1el0vqb006') : $t('inspectorPanel.kks0y5h009') }}
+        </div>
+      </a-tab-pane>
+
+      <a-tab-pane
+        key="memory"
+        tab="记忆"
+      >
+        <workshop-memory-panel :channel-id="channelId" />
+      </a-tab-pane>
+
+      <a-tab-pane
+        key="stats"
+        tab="统计"
+      >
+        <workshop-stats-panel :channel-id="channelId" />
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<style scoped>
+.inspector {
+  height: 100%;
+  padding: 0 8px;
+  overflow-y: auto;
+}
+.tabs { height: 100%; }
+.tabs :deep(.ant-tabs-content-holder) {
+  overflow-y: auto;
+}
+.tabs :deep(.ant-tabs-nav) {
+  margin-bottom: 8px;
+}
+.member {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  padding: 8px 10px;
+  margin: 3px 0;
+  cursor: pointer;
+}
+.member:hover { border-color: var(--line-strong); }
+.dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
+.member-info { flex: 1 1 auto; min-width: 0; }
+.member-name {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  font-size: 13px;
+}
+.name-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 角色 chip:lead 墨色填充 / worker 发丝线(去 antd 彩色 tag,色锁) */
+.role-chip {
+  flex: 0 0 auto;
+  padding: 0 7px;
+  font-size: 9.5px;
+  letter-spacing: 0.05em;
+  line-height: 16px;
+  text-transform: uppercase;
+  border-radius: var(--radius-pill);
+}
+.role-chip.lead { color: var(--on-accent); background: var(--accent); }
+.role-chip.worker { color: var(--ink-soft); border: 1px solid var(--line-strong); }
+.member-meta { font-size: 11px; font-family: var(--font-mono); color: var(--ink-faint); }
+.prog { padding: 0 5px; color: var(--tone-info-dot); background: color-mix(in srgb, var(--tone-info-dot) 10%, transparent); border-radius: var(--radius-pill); }
+
+.member-cap {
+  margin-top: 2px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.02em;
+  color: var(--ink-faint);
+}
+.ct { opacity: 0.8; }
+.task {
+  padding: 8px 10px;
+  margin: 3px 0;
+  cursor: pointer;
+}
+.task:hover { border-color: var(--line-strong); }
+.task-head { display: flex; gap: 6px; align-items: center; }
+/* 状态 chip:等宽枚举 + 细边(不靠彩色 tag 堆叠,色锁;语义仍由文字传达) */
+.state-chip {
+  flex: none;
+  padding: 1px 7px;
+  font-size: 9.5px;
+  line-height: 15px;
+  letter-spacing: 0.04em;
+  color: var(--ink-soft);
+  background: transparent;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-pill);
+}
+.task-title {
+  flex: 1 1 auto;
+  overflow: hidden;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.task-meta { font-size: 11px; font-family: var(--font-mono); color: var(--ink-faint); }
+.empty { padding: 16px 8px; font-size: 12px; color: var(--ink-faint); }
+</style>