agentworkshop 0.7.6 → 0.7.7

package/app/components/workshop/ChannelSessionList.vue

@@ -1,593 +1,703 @@
-<script setup lang="ts">
-/**
- * 左栏 Channel 会话列表(Zcode session 栏):workspace 内挂载的 channel,
- * 实时状态徽标(忙碌成员数/活跃任务数),点击聚焦;挂载/移出/设置操作。
- * v10 模板化:
- *  - 「从模板挂载」:选择 Channel 模板 → 实例化 + 挂载一步完成(替代"挂载已有 Channel");
- *  - 「设置」:热修改当前 Channel 实例的场景描述与工作目录(成员运行时自动回收重装配);
- *  - 「保存为模板」:把当前 Channel 实例捕获为可复用模板(场景/目录/团队快照)。
- */
-import { message } from 'ant-design-vue'
-import { useWorkspacesStore } from '@/app/stores/workshop/workspaces'
-import { useEntitiesStore } from '@/app/stores/workshop/entities'
-import { useWorkshopApi, type ChannelDto, type ChannelTemplateDto } from '@/app/composables/workshop/useWorkshopApi'
-
-const { t } = useI18n()
-
-const props = defineProps<{ wsId: string }>()
-const wsStore = useWorkspacesStore()
-const entities = useEntitiesStore()
-const api = useWorkshopApi()
-
-const workspace = computed(() => wsStore.workspaces.find(w => w.id === props.wsId))
-
-const channels = ref<ChannelDto[]>([])
-const channelTemplates = ref<ChannelTemplateDto[]>([])
-const refreshChannels = async (): Promise<void> => {
-  // SSR 守卫:axios 相对 baseURL 仅客户端有效(服务端拉取会 Invalid URL)
-  if (typeof window === 'undefined') return
-  const [ch, tpl] = await Promise.all([
-    api.listChannels(),
-    api.listChannelTemplates().catch(() => null),
-  ])
-  channels.value = (ch as unknown as { data?: ChannelDto[] })?.data ?? []
-  channelTemplates.value = (tpl as unknown as { data?: ChannelTemplateDto[] } | null)?.data ?? []
-}
-void refreshChannels()
-
-const mountedChannels = computed(() =>
-  (workspace.value?.channelIds ?? [])
-    .map(id => ({ id, meta: channels.value.find(c => c.id === id), entity: entities.channels[id] }))
-    .map(({ id, meta, entity }) => ({
-      id,
-      name: entity?.name ?? meta?.name ?? id.slice(0, 8),
-      /** 实体基线(WS 快照)是否已到达:未到时计数不可信,展示"同步中"而非误导性的 0 */
-      synced: entity !== undefined,
-      busy: entities.busyCount(id),
-      agents: entities.agents[id]?.length ?? 0,
-      activeTasks: (entities.tasks[id] ?? []).filter(t => !['COMPLETED', 'CANCELED', 'FAILED'].includes(t.state)).length,
-      workspace: meta?.workspace ?? '',
-    })),
-)
-
-const select = (channelId: string): void => {
-  wsStore.setActiveChannel(props.wsId, channelId)
-}
-
-/** 点击工作目录行:复制完整路径到剪贴板(有真实作用;title 提示全路径) */
-const copyWorkspace = async (path: string): Promise<void> => {
-  try {
-    await navigator.clipboard.writeText(path)
-    message.success(t('channelSessionList.kud74vg040', { p0: path }))
-  }
-  catch {
-    message.error(t('channelSessionList.krij3gg026'))
-  }
-}
-/** 路径显示 basename(E:\codes\AgentWorkShop → AgentWorkShop),全路径在 title/复制 */
-const baseName = (path: string): string => path.replace(/[\\/]+$/, '').split(/[\\/]/).pop() ?? path
-/** 默认目录(data/workspaces/<uuid>)的 basename 是 36 位裸 UUID,对用户零信息量 → 不展示该行 */
-const UUID_RE = /^[\da-f]{8}-[\da-f]{4}-[\da-f]{4}-[\da-f]{4}-[\da-f]{12}$/i
-const displayWorkspace = (path: string): string => {
-  const base = baseName(path)
-  return UUID_RE.test(base) ? '' : base
-}
-
-// ===== 新建 Channel 并挂载(空团队) =====
-const mountModal = ref(false)
-const mountForm = reactive({ name: '', description: '', workspace: '', scenarioPrompt: '' })
-const mountSubmitting = ref(false)
-/** FileSelector 弹窗(选择服务器目录作为 workspace) */
-const fileSelectorOpen = ref(false)
-const createAndMount = async (): Promise<void> => {
-  if (!mountForm.name.trim()) {
-    message.warning('Channel 名称必填')
-    return
-  }
-  mountSubmitting.value = true
-  try {
-    const res = await api.createChannel({
-      name: mountForm.name.trim(),
-      description: mountForm.description || undefined,
-      scenarioPrompt: mountForm.scenarioPrompt.trim() || undefined,
-      workspace: mountForm.workspace.trim() || undefined,
-    })
-    const created = (res as unknown as { data?: { channelId?: string } })?.data
-    const channelId = created?.channelId
-    if (!channelId) throw new Error(t('channelSessionList.k1bg6shc027'))
-    await wsStore.mountChannel(props.wsId, channelId)
-    mountModal.value = false
-    mountForm.name = ''
-    mountForm.description = ''
-    mountForm.workspace = ''
-    mountForm.scenarioPrompt = ''
-    void refreshChannels()
-    message.success(t('channelSessionList.kn89jvs028'))
-  }
-  catch (e) {
-    message.error(t('channelSessionList.k1x2th9e041', { p0: e instanceof Error ? e.message : String(e) }))
-  }
-  finally {
-    mountSubmitting.value = false
-  }
-}
-
-// ===== 从 Channel 模板挂载(实例化 + mount 一步) =====
-const templateMountId = ref<string | undefined>()
-const templateMounting = ref(false)
-const mountFromTemplate = async (): Promise<void> => {
-  if (!templateMountId.value) return
-  templateMounting.value = true
-  try {
-    const res = await api.mountChannelTemplate(props.wsId, templateMountId.value)
-    const data = (res as unknown as { data?: { agentCount?: number } })?.data
-    message.success(t('channelSessionList.kai50qc042', { p0: data?.agentCount ?? 0 }))
-    templateMountId.value = undefined
-    void refreshChannels()
-  }
-  catch (e) {
-    const err = e as { data?: { message?: string }, message?: string }
-    message.error(err?.data?.message ?? err?.message ?? t('channelSessionList.k97xi7u029'))
-  }
-  finally {
-    templateMounting.value = false
-  }
-}
-
-const unmount = (channelId: string): void => {
-  wsStore.unmountChannel(props.wsId, channelId)
-    .catch((e: { data?: { message?: string }, message?: string }) => { message.error(e?.data?.message ?? e?.message ?? t('channelSessionList.k1hgfvdc030')) })
-}
-
-// ===== Channel 实例设置(场景/工作目录热更新)+ 保存为模板 =====
-const settingsOpen = ref(false)
-const settingsChannelId = ref<string>('')
-const settingsForm = reactive({ name: '', scenarioPrompt: '', workspace: '' })
-const settingsSaving = ref(false)
-const fileSelectorOpen2 = ref(false)
-const openSettings = (channelId: string): void => {
-  const meta = channels.value.find(c => c.id === channelId)
-  settingsChannelId.value = channelId
-  settingsForm.name = meta?.name ?? ''
-  settingsForm.scenarioPrompt = meta?.scenarioPrompt ?? ''
-  settingsForm.workspace = meta?.workspace ?? ''
-  settingsOpen.value = true
-}
-const saveSettings = async (): Promise<void> => {
-  settingsSaving.value = true
-  try {
-    await api.patchChannel(settingsChannelId.value, {
-      scenarioPrompt: settingsForm.scenarioPrompt,
-      workspace: settingsForm.workspace.trim() || undefined,
-    })
-    message.success(t('channelSessionList.kvsxlu6031'))
-    settingsOpen.value = false
-    void refreshChannels()
-  }
-  catch (e) {
-    message.error(e instanceof Error ? e.message : String(e))
-  }
-  finally {
-    settingsSaving.value = false
-  }
-}
-
-// 保存为模板(捕获当前 channel 的场景/目录/团队)
-const saveTplOpen = ref(false)
-const saveTplForm = reactive({ name: '', description: '', visibility: 'private' as 'private' | 'public' })
-const saveTplSubmitting = ref(false)
-const openSaveTemplate = (): void => {
-  saveTplForm.name = t('channelSessionList.k2hfym5043', { p0: settingsForm.name || 'channel' })
-  saveTplForm.description = ''
-  saveTplForm.visibility = 'private'
-  saveTplOpen.value = true
-}
-const saveAsTemplate = async (): Promise<void> => {
-  if (!saveTplForm.name.trim()) {
-    message.warning(t('channelSessionList.k1i0ji0y032'))
-    return
-  }
-  saveTplSubmitting.value = true
-  try {
-    await api.captureChannelTemplate({
-      channelId: settingsChannelId.value,
-      name: saveTplForm.name.trim(),
-      description: saveTplForm.description || undefined,
-      visibility: saveTplForm.visibility,
-    })
-    message.success(t('channelSessionList.kjpguxw033'))
-    saveTplOpen.value = false
-    void refreshChannels()
-  }
-  catch (e) {
-    message.error(e instanceof Error ? e.message : String(e))
-  }
-  finally {
-    saveTplSubmitting.value = false
-  }
-}
-</script>
-
-<template>
-  <div class="channel-list">
-    <div class="list-head">
-      <span class="title">Channels</span>
-      <span class="head-actions">
-        <button
-          class="head-op im"
-          type="button"
-          title="Channel 模板中心"
-          @click="navigateTo('/workshop/channel-templates')"
-        >
-          <span class="i-tabler-layout-grid-add im-pop" />
-        </button>
-        <button
-          class="head-op im"
-          type="button"
-          title="新建 Channel"
-          @click="mountModal = true"
-        >
-          <span class="i-tabler-plus im-pop" />
-        </button>
-      </span>
-    </div>
-
-    <!-- 频道列表主体:数据源(REST channels + WS entities)均为客户端态,
-         SSR 首帧为空 → 硬刷新水合时结构与客户端首渲染不一致,节点会错配到
-         相邻 antd Select 的 DOM 上(行内 .row1 布局丢失、按钮错位)。
-         ClientOnly 隔离:SSR 输出空壳,客户端一次性渲染,无水合配对。 -->
-    <ClientOnly>
-      <div
-        v-if="mountedChannels.length === 0"
-        class="empty"
-      >
-        {{ $t('channelSessionList.kkv789s014') }}
-      </div>
-
-      <div
-        v-for="ch in mountedChannels"
-        :key="ch.id"
-        class="channel-item"
-        :class="{ active: workspace?.activeChannelId === ch.id }"
-        @click="select(ch.id)"
-      >
-        <div class="row1">
-          <span
-            class="dot"
-            :class="{ live: ch.activeTasks > 0 }"
-          />
-          <span class="ch-name">{{ ch.name }}</span>
-          <button
-            class="op im"
-            type="button"
-            :title="$t('channelSessionList.kne35ug001')"
-            :aria-label="$t('channelSessionList.kjmldih035', { p0: ch.name })"
-            @click.stop="openSettings(ch.id)"
-          >
-            <span class="i-tabler-settings2 im-pop" />
-          </button>
-          <button
-            class="op im"
-            type="button"
-            title="移出 workspace"
-            :aria-label="$t('channelSessionList.k1yurooi036', { p0: ch.name })"
-            @click.stop="unmount(ch.id)"
-          >
-            <span class="i-tabler-x im-pop" />
-          </button>
-        </div>
-        <div class="row2">
-          <!-- 快照未到达:计数不可信,显示同步占位(不呈现误导性的"0 成员") -->
-          <span
-            v-if="!ch.synced"
-            class="meta syncing"
-          >{{ $t('channelSessionList.k1bst7s9015') }}</span>
-          <span
-            v-else
-            class="meta"
-          >{{ ch.agents }} {{ $t('channelSessionList.k1ggoa45025') }} {{ ch.busy }} / {{ $t('channelSessionList.k3wcox034') }} {{ ch.activeTasks }}</span>
-        </div>
-        <button
-          v-if="displayWorkspace(ch.workspace)"
-          class="row2 ws im"
-          type="button"
-          :title="$t('channelSessionList.kfe4pzq037', { p0: ch.workspace })"
-          @click.stop="copyWorkspace(ch.workspace)"
-        >
-          <span class="i-tabler-folder" /> {{ displayWorkspace(ch.workspace) }}
-        </button>
-      </div>
-    </ClientOnly>
-
-    <div class="mount-template">
-      <a-select
-        v-model:value="templateMountId"
-        size="small"
-        :placeholder="'从 Channel 模板挂载'"
-        class="select"
-        :loading="templateMounting"
-        :options="channelTemplates.map(t => ({
-          value: t.id,
-          label: $t('channelSessionList.k1oes209038', { p0: t.isBuiltin ? '内置 · ' : t.visibility === 'public' ? '公开 · ' : '', p1: t.name, p2: (t.lead ? 1 : 0) + t.members.length }),
-        }))"
-        @change="mountFromTemplate"
-      />
-      <div class="tpl-hint">
-        {{ $t('channelSessionList.k18ppu31016') }}
-      </div>
-    </div>
-
-    <a-modal
-      v-model:open="mountModal"
-      :title="$t('channelSessionList.k1qjyl6l002')"
-      :confirm-loading="mountSubmitting"
-      ok-text="创建"
-      cancel-text="取消"
-      @ok="createAndMount"
-    >
-      <a-form layout="vertical">
-        <a-form-item label="Channel 名称">
-          <a-input v-model:value="mountForm.name" />
-        </a-form-item>
-        <a-form-item :label="$t('channelSessionList.k40gkk003')">
-          <a-input v-model:value="mountForm.description" />
-        </a-form-item>
-        <a-form-item :label="$t('channelSessionList.k1wj4f38004')">
-          <a-textarea
-            v-model:value="mountForm.scenarioPrompt"
-            :rows="4"
-            :placeholder="$t('channelSessionList.k1098zie005')"
-          />
-          <template #extra>
-            <span class="ws-hint">{{ $t('channelSessionList.k1u3zsr5017') }}</span>
-          </template>
-        </a-form-item>
-        <a-form-item :label="$t('channelSessionList.kmgv4h5006')">
-          <a-input-group compact>
-            <a-input
-              v-model:value="mountForm.workspace"
-              style="width: 70%"
-              placeholder="留空 = data/workspaces/<channelId>"
-              allow-clear
-              @press-enter="createAndMount"
-            />
-            <a-button
-              style="width: 30%"
-              @click="fileSelectorOpen = true"
-            >
-              {{ $t('channelSessionList.k3pz0ma018') }}
-            </a-button>
-          </a-input-group>
-          <template #extra>
-            <span class="ws-hint">{{ $t('channelSessionList.kucq30k019') }}</span>
-          </template>
-        </a-form-item>
-        <a-form-item>
-          <span class="ws-hint">{{ $t('channelSessionList.k1ful761020') }}</span>
-        </a-form-item>
-      </a-form>
-    </a-modal>
-
-    <!-- Channel 实例设置:场景/工作目录热更新 + 保存为模板 -->
-    <a-modal
-      v-model:open="settingsOpen"
-      :title="$t('channelSessionList.k1pmemvt039', { p0: settingsForm.name })"
-      :confirm-loading="settingsSaving"
-      ok-text="保存"
-      cancel-text="取消"
-      @ok="saveSettings"
-    >
-      <a-form layout="vertical">
-        <a-form-item :label="$t('channelSessionList.k1i8q46x007')">
-          <a-textarea
-            v-model:value="settingsForm.scenarioPrompt"
-            :rows="4"
-            :placeholder="$t('channelSessionList.ku3ugac008')"
-          />
-        </a-form-item>
-        <a-form-item :label="$t('channelSessionList.k67dzev009')">
-          <a-input-group compact>
-            <a-input
-              v-model:value="settingsForm.workspace"
-              style="width: 70%"
-              placeholder="data/workspaces/<channelId>"
-              allow-clear
-            />
-            <a-button
-              style="width: 30%"
-              @click="fileSelectorOpen2 = true"
-            >
-              {{ $t('channelSessionList.k3pz0ma018') }}
-            </a-button>
-          </a-input-group>
-        </a-form-item>
-        <a-form-item>
-          <a-button
-            size="small"
-            @click="openSaveTemplate"
-          >
-            <span class="i-tabler-template" />
-            {{ $t('channelSessionList.k6kpql010') }}
-          </a-button>
-          <span class="ws-hint">{{ $t('channelSessionList.k1x6kznr021') }}</span>
-        </a-form-item>
-      </a-form>
-    </a-modal>
-
-    <!-- 保存为模板 -->
-    <a-modal
-      v-model:open="saveTplOpen"
-      :title="$t('channelSessionList.k6kpql010')"
-      :confirm-loading="saveTplSubmitting"
-      ok-text="保存模板"
-      cancel-text="取消"
-      @ok="saveAsTemplate"
-    >
-      <a-form layout="vertical">
-        <a-form-item :label="$t('channelSessionList.k1f55q76011')">
-          <a-input v-model:value="saveTplForm.name" />
-        </a-form-item>
-        <a-form-item :label="$t('channelSessionList.k40gkk003')">
-          <a-input v-model:value="saveTplForm.description" />
-        </a-form-item>
-        <a-form-item :label="$t('channelSessionList.k3lrqn0012')">
-          <a-radio-group v-model:value="saveTplForm.visibility">
-            <a-radio value="private">
-              {{ $t('channelSessionList.k1otvrfv022') }}
-            </a-radio>
-            <a-radio value="public">
-              {{ $t('channelSessionList.k1cc399s023') }}
-            </a-radio>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item>
-          <span class="ws-hint">{{ $t('channelSessionList.kl9btf7024') }}</span>
-        </a-form-item>
-      </a-form>
-    </a-modal>
-
-    <!-- FileSelector:服务器目录选择 -> 回填工作目录 -->
-    <workshop-file-selector-modal
-      v-model:open="fileSelectorOpen"
-      :title="$t('channelSessionList.kbdp56k013')"
-      :initial-path="mountForm.workspace || undefined"
-      @select="(p) => { mountForm.workspace = p }"
-    />
-    <workshop-file-selector-modal
-      v-model:open="fileSelectorOpen2"
-      :title="$t('channelSessionList.kbdp56k013')"
-      :initial-path="settingsForm.workspace || undefined"
-      @select="(p) => { settingsForm.workspace = p }"
-    />
-  </div>
-</template>
-
-<style scoped>
-.channel-list {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  padding: 12px 10px 8px;
-}
-.list-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 8px 8px;
-}
-.title {
-  font-family: var(--font-display);
-  font-size: 16px;
-  letter-spacing: -0.01em;
-  color: var(--ink);
-}
-.head-actions { display: inline-flex; gap: 2px; }
-.head-op {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  font-size: 14px;
-  color: var(--ink-faint);
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-chip);
-  transition: background var(--transition-fast), color var(--transition-fast);
-}
-.head-op:hover { color: var(--ink); background: var(--paper-deep); }
-.empty {
-  padding: 14px 10px;
-  font-size: 12px;
-  color: var(--ink-faint);
-}
-.channel-item {
-  padding: 7px 9px;
-  margin: 1px 0;
-  cursor: pointer;
-  border-radius: var(--radius-panel-sm);
-  transition: background var(--transition-fast);
-}
-.channel-item:hover { background: var(--paper-deep); }
-.channel-item.active { background: var(--paper-deep); box-shadow: inset 2px 0 0 var(--accent); }
-.row1 {
-  display: flex;
-  gap: 7px;
-  align-items: center;
-  font-size: 13px;
-  color: var(--ink-soft);
-}
-.channel-item.active .row1 { color: var(--ink); font-weight: 500; }
-.dot {
-  flex: 0 0 auto;
-  width: 7px;
-  height: 7px;
-  background: var(--tone-neutral-dot);
-  opacity: 0.55;
-  border-radius: 50%;
-}
-.dot.live {
-  background: var(--tone-success-dot);
-  opacity: 1;
-}
-.ch-name {
-  flex: 1 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.op {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  font-size: 13px;
-  color: var(--ink-fainter);
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-chip);
-  /* 常显(低透明度):不再 hover-only——行级操作入口不应时隐时现 */
-  opacity: 0.55;
-  transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
-}
-.channel-item:hover .op,
-.channel-item.active .op { opacity: 0.9; }
-.op:hover { opacity: 1; color: var(--ink); background: var(--paper-deep); }
-.op:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
-.row2 { padding-left: 14px; font-size: 11px; color: var(--ink-faint); }
-.meta.syncing { font-style: italic; opacity: 0.6; }
-.row2.ws {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  overflow: hidden;
-  max-width: 100%;
-  padding: 0 2px 0 14px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--ink-fainter);
-  text-align: left;
-  cursor: copy; /* 点击复制完整路径(title 提示) */
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-chip);
-  transition: color var(--transition-fast), background var(--transition-fast);
-}
-.row2.ws:hover { color: var(--ink-soft); background: color-mix(in srgb, currentColor 6%, transparent); }
-.row2.ws:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
-.mount-template { padding: 12px 6px 6px; border-top: 1px solid var(--line); margin-top: 10px; }
-.select { width: 100%; }
-.tpl-hint {
-  padding: 5px 2px 0;
-  font-size: 10.5px;
-  color: var(--ink-fainter);
-}
-.ws-hint { font-size: 11px; color: var(--ink-faint); }
-</style>
+<script setup lang="ts">
+/**
+ * 左栏 Channel 会话列表(Zcode session 栏):workspace 内挂载的 channel,
+ * 实时状态徽标(忙碌成员数/活跃任务数),点击聚焦;挂载/移出/设置操作。
+ * v10 模板化:
+ *  - 「从模板挂载」:选择 Channel 模板 → 实例化 + 挂载一步完成(替代"挂载已有 Channel");
+ *  - 「设置」:热修改当前 Channel 实例的场景描述与工作目录(成员运行时自动回收重装配);
+ *  - 「保存为模板」:把当前 Channel 实例捕获为可复用模板(场景/目录/团队快照)。
+ */
+import { message } from 'ant-design-vue'
+import { useWorkspacesStore } from '@/app/stores/workshop/workspaces'
+import { useEntitiesStore } from '@/app/stores/workshop/entities'
+import { useWorkshopApi, type ChannelDto, type ChannelTemplateDto } from '@/app/composables/workshop/useWorkshopApi'
+
+const { t } = useI18n()
+
+const props = defineProps<{ wsId: string }>()
+const wsStore = useWorkspacesStore()
+const entities = useEntitiesStore()
+const api = useWorkshopApi()
+
+const workspace = computed(() => wsStore.workspaces.find(w => w.id === props.wsId))
+
+const channels = ref<ChannelDto[]>([])
+const channelTemplates = ref<ChannelTemplateDto[]>([])
+const refreshChannels = async (): Promise<void> => {
+  // SSR 守卫:axios 相对 baseURL 仅客户端有效(服务端拉取会 Invalid URL)
+  if (typeof window === 'undefined') return
+  const [ch, tpl] = await Promise.all([
+    api.listChannels(),
+    api.listChannelTemplates().catch(() => null),
+  ])
+  channels.value = (ch as unknown as { data?: ChannelDto[] })?.data ?? []
+  channelTemplates.value = (tpl as unknown as { data?: ChannelTemplateDto[] } | null)?.data ?? []
+}
+void refreshChannels()
+
+const mountedChannels = computed(() =>
+  (workspace.value?.channelIds ?? [])
+    .map(id => ({ id, meta: channels.value.find(c => c.id === id), entity: entities.channels[id] }))
+    .map(({ id, meta, entity }) => ({
+      id,
+      name: entity?.name ?? meta?.name ?? id.slice(0, 8),
+      /** 实体基线(WS 快照)是否已到达:未到时计数不可信,展示"同步中"而非误导性的 0 */
+      synced: entity !== undefined,
+      busy: entities.busyCount(id),
+      agents: entities.agents[id]?.length ?? 0,
+      activeTasks: (entities.tasks[id] ?? []).filter(t => !['COMPLETED', 'CANCELED', 'FAILED'].includes(t.state)).length,
+      workspace: meta?.workspace ?? '',
+    })),
+)
+
+const select = (channelId: string): void => {
+  wsStore.setActiveChannel(props.wsId, channelId)
+}
+
+/** 点击工作目录行:复制完整路径到剪贴板(有真实作用;title 提示全路径) */
+const copyWorkspace = async (path: string): Promise<void> => {
+  try {
+    await navigator.clipboard.writeText(path)
+    message.success(t('channelSessionList.kud74vg040', { p0: path }))
+  }
+  catch {
+    message.error(t('channelSessionList.krij3gg026'))
+  }
+}
+/** 路径显示 basename(E:\codes\AgentWorkShop → AgentWorkShop),全路径在 title/复制 */
+const baseName = (path: string): string => path.replace(/[\\/]+$/, '').split(/[\\/]/).pop() ?? path
+/** 默认目录(data/workspaces/<uuid>)的 basename 是 36 位裸 UUID,对用户零信息量 → 不展示该行 */
+const UUID_RE = /^[\da-f]{8}-[\da-f]{4}-[\da-f]{4}-[\da-f]{4}-[\da-f]{12}$/i
+const displayWorkspace = (path: string): string => {
+  const base = baseName(path)
+  return UUID_RE.test(base) ? '' : base
+}
+
+// ===== 新建 Channel 并挂载(空团队) =====
+const mountModal = ref(false)
+const mountForm = reactive({ name: '', description: '', workspace: '', scenarioPrompt: '' })
+const mountSubmitting = ref(false)
+/** FileSelector 弹窗(选择服务器目录作为 workspace) */
+const fileSelectorOpen = ref(false)
+const createAndMount = async (): Promise<void> => {
+  if (!mountForm.name.trim()) {
+    message.warning('Channel 名称必填')
+    return
+  }
+  mountSubmitting.value = true
+  try {
+    const res = await api.createChannel({
+      name: mountForm.name.trim(),
+      description: mountForm.description || undefined,
+      scenarioPrompt: mountForm.scenarioPrompt.trim() || undefined,
+      workspace: mountForm.workspace.trim() || undefined,
+    })
+    const created = (res as unknown as { data?: { channelId?: string } })?.data
+    const channelId = created?.channelId
+    if (!channelId) throw new Error(t('channelSessionList.k1bg6shc027'))
+    await wsStore.mountChannel(props.wsId, channelId)
+    mountModal.value = false
+    mountForm.name = ''
+    mountForm.description = ''
+    mountForm.workspace = ''
+    mountForm.scenarioPrompt = ''
+    void refreshChannels()
+    message.success(t('channelSessionList.kn89jvs028'))
+  }
+  catch (e) {
+    message.error(t('channelSessionList.k1x2th9e041', { p0: e instanceof Error ? e.message : String(e) }))
+  }
+  finally {
+    mountSubmitting.value = false
+  }
+}
+
+// ===== 从 Channel 模板挂载(实例化 + mount 一步) =====
+const templateMountId = ref<string | undefined>()
+const templateMounting = ref(false)
+const mountFromTemplate = async (): Promise<void> => {
+  if (!templateMountId.value) return
+  templateMounting.value = true
+  try {
+    const res = await api.mountChannelTemplate(props.wsId, templateMountId.value)
+    const data = (res as unknown as { data?: { agentCount?: number } })?.data
+    message.success(t('channelSessionList.kai50qc042', { p0: data?.agentCount ?? 0 }))
+    templateMountId.value = undefined
+    void refreshChannels()
+  }
+  catch (e) {
+    const err = e as { data?: { message?: string }, message?: string }
+    message.error(err?.data?.message ?? err?.message ?? t('channelSessionList.k97xi7u029'))
+  }
+  finally {
+    templateMounting.value = false
+  }
+}
+
+const unmount = (channelId: string): void => {
+  wsStore.unmountChannel(props.wsId, channelId)
+    .catch((e: { data?: { message?: string }, message?: string }) => { message.error(e?.data?.message ?? e?.message ?? t('channelSessionList.k1hgfvdc030')) })
+}
+
+// ===== Channel 实例设置(场景/工作目录热更新)+ 保存为模板 =====
+const settingsOpen = ref(false)
+const settingsChannelId = ref<string>('')
+const settingsForm = reactive({ name: '', scenarioPrompt: '', workspace: '' })
+
+// ===== Channel 级默认 LLM(harness → provider/model/effort;空 = 用引擎默认) =====
+interface CatalogProvider {
+  id: string
+  models: Array<{ id: string, efforts: string[], defaultEffort?: string }>
+}
+const llmForm = reactive({ harness: 'omp', provider: '', model: '', effort: '', enabled: false })
+const llmProviders = ref<CatalogProvider[]>([])
+const llmEffortMode = ref<'levels' | 'freetext' | 'unsupported'>('levels')
+const llmLoading = ref(false)
+const llmProviderOptions = computed(() => llmProviders.value.map(p => ({ value: p.id, label: p.id })))
+const llmModelOptions = computed(() =>
+  (llmProviders.value.find(p => p.id === llmForm.provider)?.models ?? []).map(m => ({ value: m.id, label: m.id })),
+)
+const llmEffortOptions = computed(() => {
+  const m = llmProviders.value.find(p => p.id === llmForm.provider)?.models.find(x => x.id === llmForm.model)
+  return (m?.efforts ?? []).map(e => ({ value: e, label: e + (m?.defaultEffort === e ? '(默认)' : '') }))
+})
+const loadLlmCatalog = async (harness: string): Promise<void> => {
+  llmLoading.value = true
+  llmProviders.value = []
+  try {
+    const res = await api.listHarnessProviders(harness)
+    const cat = (res as unknown as { data?: { catalog?: { providers?: CatalogProvider[], effortMode?: 'levels' | 'freetext' | 'unsupported' } } })?.data?.catalog
+    llmProviders.value = cat?.providers ?? []
+    llmEffortMode.value = cat?.effortMode ?? 'unsupported'
+  }
+  catch { /* 目录拉取失败保留空表 */ }
+  finally { llmLoading.value = false }
+}
+const onLlmHarnessChange = async (): Promise<void> => {
+  llmForm.provider = ''
+  llmForm.model = ''
+  llmForm.effort = ''
+  await loadLlmCatalog(llmForm.harness)
+}
+const onLlmProviderChange = (): void => {
+  llmForm.model = ''
+  llmForm.effort = ''
+}
+const onLlmModelChange = (): void => {
+  llmForm.effort = ''
+}
+const settingsSaving = ref(false)
+const fileSelectorOpen2 = ref(false)
+const openSettings = (channelId: string): void => {
+  const meta = channels.value.find(c => c.id === channelId)
+  settingsChannelId.value = channelId
+  settingsForm.name = meta?.name ?? ''
+  settingsForm.scenarioPrompt = meta?.scenarioPrompt ?? ''
+  settingsForm.workspace = meta?.workspace ?? ''
+  // 预填 channel 默认 LLM(llmJson 由列表接口透传)
+  let saved: { provider?: string, model?: string, effort?: string } | null = null
+  try {
+    const metaAny = meta as unknown as { llmJson?: string } | undefined
+    saved = metaAny?.llmJson ? JSON.parse(metaAny.llmJson) as typeof saved : null
+  }
+  catch { saved = null }
+  llmForm.enabled = !!saved?.model
+  llmForm.harness = 'omp'
+  llmForm.provider = saved?.provider ?? ''
+  llmForm.model = saved?.model ?? ''
+  llmForm.effort = saved?.effort ?? ''
+  settingsOpen.value = true
+  if (llmForm.enabled) void loadLlmCatalog(llmForm.harness)
+}
+const saveSettings = async (): Promise<void> => {
+  settingsSaving.value = true
+  try {
+    await api.patchChannel(settingsChannelId.value, {
+      scenarioPrompt: settingsForm.scenarioPrompt,
+      workspace: settingsForm.workspace.trim() || undefined,
+      llm: llmForm.enabled && llmForm.model
+        ? { ...(llmForm.provider ? { provider: llmForm.provider } : {}), model: llmForm.model, ...(llmForm.effort ? { effort: llmForm.effort } : {}) }
+        : null,
+    })
+    message.success(t('channelSessionList.kvsxlu6031'))
+    settingsOpen.value = false
+    void refreshChannels()
+  }
+  catch (e) {
+    message.error(e instanceof Error ? e.message : String(e))
+  }
+  finally {
+    settingsSaving.value = false
+  }
+}
+
+// 保存为模板(捕获当前 channel 的场景/目录/团队)
+const saveTplOpen = ref(false)
+const saveTplForm = reactive({ name: '', description: '', visibility: 'private' as 'private' | 'public' })
+const saveTplSubmitting = ref(false)
+const openSaveTemplate = (): void => {
+  saveTplForm.name = t('channelSessionList.k2hfym5043', { p0: settingsForm.name || 'channel' })
+  saveTplForm.description = ''
+  saveTplForm.visibility = 'private'
+  saveTplOpen.value = true
+}
+const saveAsTemplate = async (): Promise<void> => {
+  if (!saveTplForm.name.trim()) {
+    message.warning(t('channelSessionList.k1i0ji0y032'))
+    return
+  }
+  saveTplSubmitting.value = true
+  try {
+    await api.captureChannelTemplate({
+      channelId: settingsChannelId.value,
+      name: saveTplForm.name.trim(),
+      description: saveTplForm.description || undefined,
+      visibility: saveTplForm.visibility,
+    })
+    message.success(t('channelSessionList.kjpguxw033'))
+    saveTplOpen.value = false
+    void refreshChannels()
+  }
+  catch (e) {
+    message.error(e instanceof Error ? e.message : String(e))
+  }
+  finally {
+    saveTplSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="channel-list">
+    <div class="list-head">
+      <span class="title">Channels</span>
+      <span class="head-actions">
+        <button
+          class="head-op im"
+          type="button"
+          title="Channel 模板中心"
+          @click="navigateTo('/workshop/channel-templates')"
+        >
+          <span class="i-tabler-layout-grid-add im-pop" />
+        </button>
+        <button
+          class="head-op im"
+          type="button"
+          title="新建 Channel"
+          @click="mountModal = true"
+        >
+          <span class="i-tabler-plus im-pop" />
+        </button>
+      </span>
+    </div>
+
+    <!-- 频道列表主体:数据源(REST channels + WS entities)均为客户端态,
+         SSR 首帧为空 → 硬刷新水合时结构与客户端首渲染不一致,节点会错配到
+         相邻 antd Select 的 DOM 上(行内 .row1 布局丢失、按钮错位)。
+         ClientOnly 隔离:SSR 输出空壳,客户端一次性渲染,无水合配对。 -->
+    <ClientOnly>
+      <div
+        v-if="mountedChannels.length === 0"
+        class="empty"
+      >
+        {{ $t('channelSessionList.kkv789s014') }}
+      </div>
+
+      <div
+        v-for="ch in mountedChannels"
+        :key="ch.id"
+        class="channel-item"
+        :class="{ active: workspace?.activeChannelId === ch.id }"
+        @click="select(ch.id)"
+      >
+        <div class="row1">
+          <span
+            class="dot"
+            :class="{ live: ch.activeTasks > 0 }"
+          />
+          <span class="ch-name">{{ ch.name }}</span>
+          <button
+            class="op im"
+            type="button"
+            :title="$t('channelSessionList.kne35ug001')"
+            :aria-label="$t('channelSessionList.kjmldih035', { p0: ch.name })"
+            @click.stop="openSettings(ch.id)"
+          >
+            <span class="i-tabler-settings2 im-pop" />
+          </button>
+          <button
+            class="op im"
+            type="button"
+            title="移出 workspace"
+            :aria-label="$t('channelSessionList.k1yurooi036', { p0: ch.name })"
+            @click.stop="unmount(ch.id)"
+          >
+            <span class="i-tabler-x im-pop" />
+          </button>
+        </div>
+        <div class="row2">
+          <!-- 快照未到达:计数不可信,显示同步占位(不呈现误导性的"0 成员") -->
+          <span
+            v-if="!ch.synced"
+            class="meta syncing"
+          >{{ $t('channelSessionList.k1bst7s9015') }}</span>
+          <span
+            v-else
+            class="meta"
+          >{{ ch.agents }} {{ $t('channelSessionList.k1ggoa45025') }} {{ ch.busy }} / {{ $t('channelSessionList.k3wcox034') }} {{ ch.activeTasks }}</span>
+        </div>
+        <button
+          v-if="displayWorkspace(ch.workspace)"
+          class="row2 ws im"
+          type="button"
+          :title="$t('channelSessionList.kfe4pzq037', { p0: ch.workspace })"
+          @click.stop="copyWorkspace(ch.workspace)"
+        >
+          <span class="i-tabler-folder" /> {{ displayWorkspace(ch.workspace) }}
+        </button>
+      </div>
+    </ClientOnly>
+
+    <div class="mount-template">
+      <a-select
+        v-model:value="templateMountId"
+        size="small"
+        :placeholder="'从 Channel 模板挂载'"
+        class="select"
+        :loading="templateMounting"
+        :options="channelTemplates.map(t => ({
+          value: t.id,
+          label: $t('channelSessionList.k1oes209038', { p0: t.isBuiltin ? '内置 · ' : t.visibility === 'public' ? '公开 · ' : '', p1: t.name, p2: (t.lead ? 1 : 0) + t.members.length }),
+        }))"
+        @change="mountFromTemplate"
+      />
+      <div class="tpl-hint">
+        {{ $t('channelSessionList.k18ppu31016') }}
+      </div>
+    </div>
+
+    <a-modal
+      v-model:open="mountModal"
+      :title="$t('channelSessionList.k1qjyl6l002')"
+      :confirm-loading="mountSubmitting"
+      ok-text="创建"
+      cancel-text="取消"
+      @ok="createAndMount"
+    >
+      <a-form layout="vertical">
+        <a-form-item label="Channel 名称">
+          <a-input v-model:value="mountForm.name" />
+        </a-form-item>
+        <a-form-item :label="$t('channelSessionList.k40gkk003')">
+          <a-input v-model:value="mountForm.description" />
+        </a-form-item>
+        <a-form-item :label="$t('channelSessionList.k1wj4f38004')">
+          <a-textarea
+            v-model:value="mountForm.scenarioPrompt"
+            :rows="4"
+            :placeholder="$t('channelSessionList.k1098zie005')"
+          />
+          <template #extra>
+            <span class="ws-hint">{{ $t('channelSessionList.k1u3zsr5017') }}</span>
+          </template>
+        </a-form-item>
+        <a-form-item :label="$t('channelSessionList.kmgv4h5006')">
+          <a-input-group compact>
+            <a-input
+              v-model:value="mountForm.workspace"
+              style="width: 70%"
+              placeholder="留空 = data/workspaces/<channelId>"
+              allow-clear
+              @press-enter="createAndMount"
+            />
+            <a-button
+              style="width: 30%"
+              @click="fileSelectorOpen = true"
+            >
+              {{ $t('channelSessionList.k3pz0ma018') }}
+            </a-button>
+          </a-input-group>
+          <template #extra>
+            <span class="ws-hint">{{ $t('channelSessionList.kucq30k019') }}</span>
+          </template>
+        </a-form-item>
+        <a-form-item>
+          <span class="ws-hint">{{ $t('channelSessionList.k1ful761020') }}</span>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- Channel 实例设置:场景/工作目录热更新 + 保存为模板 -->
+    <a-modal
+      v-model:open="settingsOpen"
+      :title="$t('channelSessionList.k1pmemvt039', { p0: settingsForm.name })"
+      :confirm-loading="settingsSaving"
+      ok-text="保存"
+      cancel-text="取消"
+      @ok="saveSettings"
+    >
+      <a-form layout="vertical">
+        <a-form-item :label="$t('channelSessionList.k1i8q46x007')">
+          <a-textarea
+            v-model:value="settingsForm.scenarioPrompt"
+            :rows="4"
+            :placeholder="$t('channelSessionList.ku3ugac008')"
+          />
+        </a-form-item>
+        <a-form-item :label="$t('channelSessionList.k67dzev009')">
+          <a-input-group compact>
+            <a-input
+              v-model:value="settingsForm.workspace"
+              style="width: 70%"
+              placeholder="data/workspaces/<channelId>"
+              allow-clear
+            />
+            <a-button
+              style="width: 30%"
+              @click="fileSelectorOpen2 = true"
+            >
+              {{ $t('channelSessionList.k3pz0ma018') }}
+            </a-button>
+          </a-input-group>
+        </a-form-item>
+        <a-form-item label="默认模型(可选;留空用各 Harness 默认)">
+          <a-space>
+            <a-switch
+              v-model:checked="llmForm.enabled"
+              size="small"
+              @change="(v: any) => { if (v) void loadLlmCatalog(llmForm.harness) }"
+            />
+            <a-select
+              v-model:value="llmForm.harness"
+              style="width: 130px"
+              :options="[{ value: 'omp', label: 'omp' }, { value: 'codex', label: 'codex' }, { value: 'opencode', label: 'opencode' }, { value: 'dsh', label: 'dsh' }]"
+              :disabled="!llmForm.enabled"
+              @change="onLlmHarnessChange"
+            />
+            <a-select
+              v-model:value="llmForm.provider"
+              style="width: 170px"
+              :placeholder="llmLoading ? '目录加载中…' : 'provider'"
+              :options="llmProviderOptions"
+              :disabled="!llmForm.enabled || llmLoading"
+              show-search
+              @change="onLlmProviderChange"
+            />
+            <a-select
+              v-model:value="llmForm.model"
+              style="width: 210px"
+              placeholder="model"
+              :options="llmModelOptions"
+              :disabled="!llmForm.enabled || !llmForm.provider"
+              show-search
+              @change="onLlmModelChange"
+            />
+            <a-select
+              v-if="llmEffortMode === 'levels'"
+              v-model:value="llmForm.effort"
+              style="width: 130px"
+              placeholder="effort(可选)"
+              :options="llmEffortOptions"
+              :disabled="!llmForm.enabled || !llmForm.model"
+              allow-clear
+            />
+            <a-input
+              v-else-if="llmEffortMode === 'freetext'"
+              v-model:value="llmForm.effort"
+              style="width: 130px"
+              placeholder="variant(可选)"
+              :disabled="!llmForm.enabled || !llmForm.model"
+              allow-clear
+            />
+          </a-space>
+        </a-form-item>
+        <a-form-item>
+          <a-button
+            size="small"
+            @click="openSaveTemplate"
+          >
+            <span class="i-tabler-template" />
+            {{ $t('channelSessionList.k6kpql010') }}
+          </a-button>
+          <span class="ws-hint">{{ $t('channelSessionList.k1x6kznr021') }}</span>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- 保存为模板 -->
+    <a-modal
+      v-model:open="saveTplOpen"
+      :title="$t('channelSessionList.k6kpql010')"
+      :confirm-loading="saveTplSubmitting"
+      ok-text="保存模板"
+      cancel-text="取消"
+      @ok="saveAsTemplate"
+    >
+      <a-form layout="vertical">
+        <a-form-item :label="$t('channelSessionList.k1f55q76011')">
+          <a-input v-model:value="saveTplForm.name" />
+        </a-form-item>
+        <a-form-item :label="$t('channelSessionList.k40gkk003')">
+          <a-input v-model:value="saveTplForm.description" />
+        </a-form-item>
+        <a-form-item :label="$t('channelSessionList.k3lrqn0012')">
+          <a-radio-group v-model:value="saveTplForm.visibility">
+            <a-radio value="private">
+              {{ $t('channelSessionList.k1otvrfv022') }}
+            </a-radio>
+            <a-radio value="public">
+              {{ $t('channelSessionList.k1cc399s023') }}
+            </a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item>
+          <span class="ws-hint">{{ $t('channelSessionList.kl9btf7024') }}</span>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- FileSelector:服务器目录选择 -> 回填工作目录 -->
+    <workshop-file-selector-modal
+      v-model:open="fileSelectorOpen"
+      :title="$t('channelSessionList.kbdp56k013')"
+      :initial-path="mountForm.workspace || undefined"
+      @select="(p) => { mountForm.workspace = p }"
+    />
+    <workshop-file-selector-modal
+      v-model:open="fileSelectorOpen2"
+      :title="$t('channelSessionList.kbdp56k013')"
+      :initial-path="settingsForm.workspace || undefined"
+      @select="(p) => { settingsForm.workspace = p }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.channel-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  padding: 12px 10px 8px;
+}
+.list-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px 8px;
+}
+.title {
+  font-family: var(--font-display);
+  font-size: 16px;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+}
+.head-actions { display: inline-flex; gap: 2px; }
+.head-op {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 14px;
+  color: var(--ink-faint);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-chip);
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.head-op:hover { color: var(--ink); background: var(--paper-deep); }
+.empty {
+  padding: 14px 10px;
+  font-size: 12px;
+  color: var(--ink-faint);
+}
+.channel-item {
+  padding: 7px 9px;
+  margin: 1px 0;
+  cursor: pointer;
+  border-radius: var(--radius-panel-sm);
+  transition: background var(--transition-fast);
+}
+.channel-item:hover { background: var(--paper-deep); }
+.channel-item.active { background: var(--paper-deep); box-shadow: inset 2px 0 0 var(--accent); }
+.row1 {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  font-size: 13px;
+  color: var(--ink-soft);
+}
+.channel-item.active .row1 { color: var(--ink); font-weight: 500; }
+.dot {
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  background: var(--tone-neutral-dot);
+  opacity: 0.55;
+  border-radius: 50%;
+}
+.dot.live {
+  background: var(--tone-success-dot);
+  opacity: 1;
+}
+.ch-name {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.op {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  font-size: 13px;
+  color: var(--ink-fainter);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-chip);
+  /* 常显(低透明度):不再 hover-only——行级操作入口不应时隐时现 */
+  opacity: 0.55;
+  transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
+}
+.channel-item:hover .op,
+.channel-item.active .op { opacity: 0.9; }
+.op:hover { opacity: 1; color: var(--ink); background: var(--paper-deep); }
+.op:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.row2 { padding-left: 14px; font-size: 11px; color: var(--ink-faint); }
+.meta.syncing { font-style: italic; opacity: 0.6; }
+.row2.ws {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  overflow: hidden;
+  max-width: 100%;
+  padding: 0 2px 0 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-fainter);
+  text-align: left;
+  cursor: copy; /* 点击复制完整路径(title 提示) */
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-chip);
+  transition: color var(--transition-fast), background var(--transition-fast);
+}
+.row2.ws:hover { color: var(--ink-soft); background: color-mix(in srgb, currentColor 6%, transparent); }
+.row2.ws:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.mount-template { padding: 12px 6px 6px; border-top: 1px solid var(--line); margin-top: 10px; }
+.select { width: 100%; }
+.tpl-hint {
+  padding: 5px 2px 0;
+  font-size: 10.5px;
+  color: var(--ink-fainter);
+}
+.ws-hint { font-size: 11px; color: var(--ink-faint); }
+</style>