weifuwu 0.94.0 → 0.95.0

package/dist/level6/apps/agent-platform/ui/blocks/LogsSection.tsx

@@ -0,0 +1,44 @@
+/**
+ * 执行日志区（AgentDetail 拆分子组件——ai 类型自动加载）
+ */
+import type { Component } from '../../../../client/vdom/index.ts'
+import { Button, Card, Icon, Loading, Timeline } from '../../../../client/components/index.ts'
+import type { AgentLog } from '../lib/types.ts'
+
+export const LogsSection: Component<{ agentId: string }> = (_init, ctx) => {
+  let logs: AgentLog[] = []
+  let logsLoading = true
+  let started = false
+  const rerender = () => ctx.render()
+  const agentId = _init.agentId
+
+  async function loadLogs() {
+    logsLoading = true
+    try {
+      const d = await ctx.api!.get<{ logs: AgentLog[] }>(`/api/stats/agents/${agentId}/logs`)
+      logs = d.logs ?? []; logsLoading = false
+      rerender()
+    } catch { logsLoading = false; rerender() }
+  }
+  if (!started) { started = true; void loadLogs() }
+
+  return () => (
+    <Card id="sec-logs">
+      <div class="wf-split wf-margin-bottom-sm">
+        <div class="wf-font-sm wf-semibold wf-uppercase wf-tracking-wide wf-text-secondary"><Icon name="list" size={14} /> 执行日志</div>
+        <Button size="sm" variant="ghost" onClick={loadLogs}>刷新</Button>
+      </div>
+      {logsLoading && <Loading />}
+      {!logsLoading && logs.length === 0 && <div class="wf-font-sm wf-text-tertiary wf-padding-y-md">暂无执行日志</div>}
+      {!logsLoading && logs.length > 0 && (
+        <Timeline items={logs.map((log: AgentLog) => ({
+          key: log.id,
+          title: '🤖 AI 执行',
+          time: log.created_at ? new Date(log.created_at).toLocaleTimeString() : undefined,
+          status: log.success === false ? 'error' : 'success',
+          content: `${log.messages_count ?? 0} 条消息 · ${log.tokens_total ?? 0} tokens · ${log.elapsed_ms ?? 0}ms`,
+        }))} />
+      )}
+    </Card>
+  )
+}

package/dist/level6/apps/agent-platform/ui/blocks/MessageItem.tsx

@@ -0,0 +1,332 @@
+/**
+ * 单条消息组件（P1 从 Chat.tsx 拆分——686 行 → 组件集）
+ *
+ * 职责：消息渲染（内容/工具步骤/审批/操作/编辑态）——纯展示 + 回调上抛，
+ * 状态与 WS 逻辑留在 Chat 页（createStore 化 P2）。
+ */
+import type { Component } from '../../../../client/vdom/index.ts'
+import { Ava } from './ux.tsx'
+import { Alert, Badge, Button, CopyButton, Icon, Img, Input, Markdown, MessageBubble } from '../../../../client/components/index.ts'
+import { inputValue } from '../lib/types.ts'
+import type { ChatMessage, MessageTool } from '../lib/types.ts'
+import { detectTaskMarker } from '../../src/services/task-markers.ts'
+
+/** B-下载（2026-08）：聊天流文件卡片带鉴权下载（<a href> 无 Bearer → 401 实证） */
+async function downloadFileCard(deptId: string, rel: string): Promise<void> {
+  const { downloadFileAuthorized } = await import('../lib/download.ts')
+  await downloadFileAuthorized(
+    `/api/departments/${deptId}/workspace/file?path=${encodeURIComponent(rel)}&download=1`,
+    rel.split('/').pop() ?? rel,
+  )
+}
+
+/** 聊天图片预览（2026-09——三态统一走 Img 组件：
+ * - loading：占位块（300×300——布局恒定——chat hydrate 先行挂载）
+ * - ready：<Img preview>——占位→图（组件内 onLoad 替换）——点击放大预览
+ * - error：占位块失败文案（fetch 失败——解码失败由 Img errorText 兜底）
+ * 注意：普通函数返回 vnode——**不能作为 JSX 组件**（组件契约 = 工厂→renderFn——
+ * 误用 seg.renderFn is not a function 实证）——调用点 {ChatImagePreview(...)} */
+function ChatImagePreview(preview: NonNullable<ChatMessage['preview']>): any {
+  const common = { width: 300, height: 300, className: 'wf-radius wf-border' }
+  if (preview.state === 'ready' && preview.url) {
+    return <Img src={preview.url} alt="AI 生成图片" preview {...common} style={{ objectFit: 'cover' }} />
+  }
+  return <Img {...common} placeholder
+    placeholderText={preview.state === 'error' ? '图片加载失败' : '图片加载中…'} />
+}
+
+/** 聊天视频块（2026-09——同图片三态：内置 VideoPlayer 内嵌播放——点击放大弹窗）
+ * 占位 300×169（16:9——布局恒定）；ready → <VideoPlayer>（点击打开全屏弹窗）
+ * 注意：同样普通函数返回 vnode——调用点 {ChatVideoBlock(...)} */
+function ChatVideoBlock(video: NonNullable<ChatMessage['video']>, name: string, ctx: { ui: { openPopup: Function } }): any {
+  if (video.state === 'ready' && video.url) {
+    return (
+      <div class="wf-stack wf-gap-xs">
+        <div
+          class="wf-radius wf-border wf-pointer"
+          style="width: 300px; height: 169px; overflow: hidden; position: relative;"
+          onClick={() => {
+            void import('../lib/video-popup.ts').then(({ openVideoPopup }) =>
+              openVideoPopup(ctx as any, video.url!, name))
+          }}
+        >
+          <video src={video.url} style="width: 100%; height: 100%; object-fit: cover;" muted playsInline preload="metadata" />
+          <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;">▶</div>
+        </div>
+        <div class="wf-font-xs wf-text-tertiary">🎬 {name}——点击播放</div>
+      </div>
+    )
+  }
+  return (
+    <div class="wf-radius wf-border wf-bg-tertiary" style="width: 300px; height: 169px; display: flex; align-items: center; justify-content: center;">
+      <span class="wf-text-tertiary wf-font-sm">{video.state === 'error' ? '视频加载失败' : '视频加载中…'}</span>
+    </div>
+  )
+}
+
+export interface MessageItemProps {
+  msg: ChatMessage
+  departmentId: string
+  own: boolean
+  canEditMsg: boolean
+  isAdmin: boolean
+  approving: boolean
+  editing: boolean
+  editValue: string
+  expandedToolKey: string | null
+  onToggleTool: (key: string) => void
+  onReply: (msg: ChatMessage) => void
+  onEdit: (msg: ChatMessage) => void
+  onDelete: (msg: ChatMessage) => void
+  onFeedback: (msg: ChatMessage, v: 'like' | 'dislike' | null) => void
+  /** CHAT-INTERACTION 波次 2：快捷确认 chip（仅最后一条 AI 消息渲染——Chat 侧计算） */
+  showQuickReplies?: boolean
+  onQuickReply?: (msg: ChatMessage, text: string) => void
+  onApprove: (id: string) => void
+  onReject: (id: string) => void
+  onRetry: (id: string) => void
+  onContinue: (id: string) => void
+  /** 产物审批（2026-12）：聊天流内直接批准/拒绝待审产物 */
+  onReview: (action: 'approve' | 'reject', path: string) => void
+  reviewBusy: boolean
+  onEditChange: (v: string) => void
+  onEditSave: () => void
+  onEditCancel: () => void
+}
+
+// CHAT-UX 波次 3（D3）：绝对时间 HH:mm（相对时间「N 分钟前」需重渲染才更新——
+// 死状态 timeVersion 已删；日期由分隔线表达——时间用稳定 HH:mm）
+function fmtTime(iso: string): string {
+  try {
+    const d = new Date(iso)
+    return d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+  } catch { return '' }
+}
+
+function toolLabel(name: string): string {
+  const labels: Record<string, string> = { 'search-knowledge-base': '搜索知识库', 'get-current-time': '获取当前时间', list_files: '列出文件', read: '读取文件', write: '写入文件', edit: '编辑文件', grep: '搜索文件', bash: '执行命令' }
+  return labels[name] ?? name.replace(/_/g, ' ')
+}
+
+export const MessageItem: Component<MessageItemProps> = (_init, ctx) => {
+  return (props: MessageItemProps) => {
+    const { msg } = props
+    const st = msg.status
+    const isActive = st === 'thinking' || st === 'generating'
+    const isError = st === 'error'
+    const showTools = msg.sender_type === 'ai' && (msg.tools ?? []).length > 0
+
+    if (msg.msg_type === 'system') {
+      return <div class="wf-center"><span class="wf-pill wf-bg-tertiary wf-text-secondary wf-padding-x-sm wf-padding-y-xs wf-font-xs">{msg.content}</span></div>
+    }
+
+    // P2-4：交付物文件卡片（AI 刚生成的文件——可点击下载；进场动效 wf-panel-in）
+    // 产物审批（2026-12）：pending 待审——显示徽标 + 批准/拒绝按钮（聊天流内直接审批）
+    if (msg.msg_type === 'file_card') {
+      const rel = props.msg.content
+      const already = rel.includes('（已发布）') || rel.includes('（已拒绝）')
+      return (
+        <div class="wf-row wf-gap-sm wf-items-center wf-panel-in">
+          <Ava name={msg.sender_name ?? 'AI'} type="ai" small />
+          <button type="button" class="wf-pill wf-bg-tertiary wf-padding-x-sm wf-padding-y-xs wf-font-xs wf-row wf-gap-xs wf-items-center"
+            style="text-decoration: none"
+            onClick={() => { void downloadFileCard(props.departmentId, rel.replace(/（已发布|已拒绝）$/, '')) }}>
+            <Icon name="file-text" size={12} /> {msg.sender_name ?? 'AI'} 刚生成了 <b class="wf-text-primary">{rel}</b> 下载 ↓
+          </button>
+          {msg.pending && !already && (
+            <>
+              <span class="wf-pill wf-bg-warning wf-text-on-warning wf-padding-x-sm wf-padding-y-xs wf-font-xs">⏳ 待审批</span>
+              <Button size="sm" variant="primary" disabled={props.reviewBusy} onClick={() => props.onReview('approve', rel)}>批准发布</Button>
+              <Button size="sm" variant="danger-ghost" disabled={props.reviewBusy} onClick={() => props.onReview('reject', rel)}>拒绝</Button>
+            </>
+          )}
+          {/* 图片产物卡片直显（2026-09——与 AI 回复文本同链路：hydrate → blob 预览） */}
+          {msg.preview && (
+            <div class="wf-margin-top-sm">
+              {ChatImagePreview(msg.preview)}
+            </div>
+          )}
+          {/* 视频产物卡片（2026-09——hydrate video → 内嵌缩略 + 点击弹窗播放） */}
+          {msg.video && (
+            <div class="wf-margin-top-sm">
+              {ChatVideoBlock(msg.video, rel, ctx)}
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    return (
+      <div data-msgid={String(msg.id).slice(0, 8)} data-msgtype={msg.msg_type} class={`wf-row wf-items-start wf-gap-sm${props.own ? ' wf-row-reverse' : ''}`}>
+        <Ava name={msg.sender_name ?? '未知'} type={msg.sender_type ?? 'user'} small />
+        <div class={`wf-stack wf-gap-xs wf-shrink${props.own ? ' wf-items-end' : ''}`}>
+          <div class={`ap-msg-meta wf-row wf-gap-xs wf-font-xs wf-text-tertiary${props.own ? ' wf-row-reverse' : ''}`}>
+            <span>{msg.sender_name ?? '未知'}</span>
+            {msg.sender_type === 'ai' && st === 'complete' && (() => { const mk = detectTaskMarker(msg.content); return mk.marker ? <span class="wf-pill wf-padding-x-sm wf-padding-y-xs wf-font-xs wf-text-secondary">{mk.label}</span> : null })()}
+            {msg.sender_type === 'ai' && msg.routed_to && st === 'complete' && <span class="wf-pill wf-padding-x-sm wf-padding-y-xs wf-font-xs wf-text-tertiary">任务派给 {msg.routed_to}</span>}
+            <span>{fmtTime(msg.created_at)}</span>
+            {isActive && <span class="wf-text-primary">{st === 'thinking' ? '思考中...' : '生成中...'}</span>}
+            {isError && <span class="wf-text-error">出错了</span>}
+            {/* CHAT-UX 波次 3（D1）：操作行 hover 化（ap-msg-actions——触屏常驻、
+                键盘 focus-within 展开——A8 可交互红线不影响键盘路径） */}
+            {!props.editing && !isActive && (
+              <span class="ap-msg-actions wf-row wf-gap-xs">
+                <Button size="sm" variant="ghost" onClick={() => props.onReply(msg)}>回复</Button>
+                {props.canEditMsg && (
+                  <>
+                    <Button size="sm" variant="ghost" onClick={() => props.onEdit(msg)}>编辑</Button>
+                    <Button size="sm" variant="ghost" onClick={() => props.onDelete(msg)}>撤回</Button>
+                  </>
+                )}
+                {!props.own && props.isAdmin && (
+                  <Button size="sm" variant="ghost" onClick={() => props.onDelete(msg)}>删除</Button>
+                )}
+              </span>
+            )}
+            {st === 'complete' && msg.sender_type === 'ai' && msg.content && (
+              <span class="ap-msg-actions wf-row wf-gap-xs"><CopyButton size="sm" variant="ghost" value={msg.content} label="复制" /></span>
+            )}
+            {st === 'complete' && msg.sender_type === 'ai' && !isActive && (
+              <span class="ap-msg-actions wf-row wf-gap-xs">
+                <button type="button" class="wf-btn wf-btn--ghost wf-btn--sm" aria-label="赞" title="有帮助"
+                  style={msg.feedback === 'like' ? { background: 'var(--wf-color-primary-bg)', opacity: 1 } : { opacity: 0.6 }}
+                  onClick={() => props.onFeedback(msg, msg.feedback === 'like' ? null : 'like')}>👍</button>
+                <button type="button" class="wf-btn wf-btn--ghost wf-btn--sm" aria-label="踩" title="需改进"
+                  style={msg.feedback === 'dislike' ? { background: 'var(--wf-color-error-bg)', opacity: 1 } : { opacity: 0.6 }}
+                  onClick={() => props.onFeedback(msg, msg.feedback === 'dislike' ? null : 'dislike')}>👎</button>
+              </span>
+            )}
+          </div>
+
+          {msg.reply_content && !props.editing && (
+            <div class="wf-border-left wf-padding-left-sm wf-font-xs wf-text-tertiary">
+              <span class="wf-text-secondary">↩ {msg.reply_sender ?? '消息'}</span> {String(msg.reply_content ?? '').slice(0, 40)}
+            </div>
+          )}
+
+          {/* CHAT-INTERACTION 波次 2：HITL 快捷确认 chip（AI 确认型提问——点击即发送；
+              仅最后一条 AI 消息渲染——Chat 侧 showQuickReplies 计算，已答/新消息自动消失）。
+              不卡 st：历史消息 status 为 null（GET 无此列）——只在流式进行中（isActive）隐藏 */}
+          {props.showQuickReplies && !props.editing && !isActive && (msg.quick_replies ?? []).length > 0 && (
+            <div class="wf-row wf-gap-xs" role="group" aria-label="快捷回复选项">
+              {(msg.quick_replies ?? []).map((qr: string) => (
+                <Button key={qr} size="sm" variant="ghost" class="ap-quick-chip"
+                  onClick={() => { props.onQuickReply?.(msg, qr) }}>{qr}</Button>
+              ))}
+            </div>
+          )}
+
+          {msg.attachments && msg.attachments.length > 0 && (
+            <div class="wf-row wf-gap-xs">
+              {msg.attachments.map((att: { name: string; size: number }, i: number) => (
+                <span key={i} class="wf-pill wf-bg-tertiary wf-padding-x-sm wf-padding-y-xs wf-font-xs">
+                  📎 {att.name}{att.size >= 1024 ? `（${Math.round(att.size / 1024)}KB）` : `（${att.size}B）`}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {showTools && (
+            <div class="wf-stack wf-gap-xs">
+              {(msg.tools ?? []).map((t: MessageTool, i: number) => {
+                const tk = `${msg.id}:${i}`
+                const expanded = props.expandedToolKey === tk
+                return (
+                  <div key={i} class="wf-stack wf-gap-none">
+                    <button type="button" class="wf-pill wf-bg-primary wf-padding-x-sm wf-padding-y-xs wf-font-xs wf-text-primary wf-text-left"
+                      style="background: none; border: none; cursor: pointer"
+                      onClick={() => props.onToggleTool(tk)}>
+                      <Icon name={t.status === 'running' ? 'clock' : t.status === 'error' ? 'warning' : 'check'} size={12} /> {toolLabel(t.name)}
+                      {expanded ? ' ▾' : ' ▸'}
+                    </button>
+                    {expanded && (
+                      <div class="wf-stack wf-gap-xs wf-margin-left-xs wf-margin-top-xs wf-padding-x-sm wf-padding-y-sm wf-radius wf-bg-tertiary">
+                        {t.args !== undefined && t.args !== null && (
+                          <div class="wf-font-xs">
+                            <span class="wf-text-tertiary">参数 </span>
+                            <pre class="wf-margin-top-none wf-font-xs" style="margin: 4px 0 0; white-space: pre-wrap; word-break: break-all">{typeof t.args === 'string' ? t.args : JSON.stringify(t.args)}</pre>
+                          </div>
+                        )}
+                        {t.result !== undefined && t.result !== null && (
+                          <div class="wf-font-xs">
+                            <span class="wf-text-tertiary">结果 </span>
+                            <pre class="wf-margin-top-none wf-font-xs" style="margin: 4px 0 0; white-space: pre-wrap; word-break: break-all">{String(t.result).slice(0, 500)}</pre>
+                          </div>
+                        )}
+                        {t.status === 'error' && <span class="wf-text-error wf-font-xs">执行失败</span>}
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {!props.editing && (
+            <div>
+              <MessageBubble
+                role={props.own ? 'user' : 'assistant'}
+                status={isActive ? 'streaming' : isError ? 'error' : 'complete'}
+                className={isActive ? 'wf-dim' : ''}
+                content={msg.sender_type === 'ai'
+                  ? <Markdown content={msg.content || ''} />
+                  : (msg.content || '')}
+              />
+              {/* 视频产物（2026-09——text 消息含 /ws/*.mp4——hydrate video → 内嵌缩略 + 弹窗） */}
+              {msg.video && (
+                <div class="wf-margin-top-sm">
+                  {ChatVideoBlock(msg.video, (msg.content.match(/\/ws\/([^\s"'()<>，。]+)/)?.[1] ?? '视频'), ctx)}
+                </div>
+              )}
+              {st === 'complete' && msg.usage && (
+                <div class="wf-text-right wf-margin-top-xs">
+                  <Badge variant="default"><Icon name="zap" size={12} /> {msg.usage.total_tokens} tokens</Badge>
+                </div>
+              )}
+              {/* 图片预览：API 加载的历史消息无 status 字段——以 preview 存在为准
+              · 三态统一走 Img 组件（placeholder 下沉——占位/失败/预览组件内自理） */}
+              {msg.preview && (
+                <div class="wf-margin-top-sm">
+                  {ChatImagePreview(msg.preview)}
+                </div>
+              )}
+              {isError && (
+                <div class="wf-row wf-gap-xs wf-margin-top-xs">
+                  <Button size="sm" variant="ghost" onClick={() => props.onRetry(msg.id)}><Icon name="refresh" size={12} /> 重新生成</Button>
+                  <Button size="sm" variant="primary" onClick={() => props.onContinue(msg.id)}><Icon name="arrow-right" size={12} /> 断点续跑</Button>
+                </div>
+              )}
+
+              {msg.ai_draft && msg.ai_approved === null && (
+                <div class="wf-margin-top-sm">
+                  <Alert variant="warning">
+                    <div class="wf-font-xs wf-semibold wf-margin-bottom-xs"><Icon name="clock" size={12} /> AI 草稿待审批</div>
+                    {msg.ai_draft}
+                  </Alert>
+                  <div class="wf-row wf-gap-xs wf-margin-top-xs">
+                    <Button size="sm" disabled={props.approving}
+                      onClick={() => props.onApprove(msg.id)}>{props.approving ? '处理中...' : (<><Icon name="check" size={12} /> 批准</>)}
+                    </Button>
+                    <Button size="sm" variant="danger" disabled={props.approving}
+                      onClick={() => props.onReject(msg.id)}><Icon name="close" size={12} /> 拒绝</Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {props.editing && (
+            <form onSubmit={(e: Event) => { e.preventDefault(); props.onEditSave() }} class="wf-row wf-gap-xs wf-items-start">
+              <div class="wf-fill">
+                <Input value={props.editValue} onInput={(e: Event) => { props.onEditChange(inputValue(e)) }}
+                  onKeyDown={(e: KeyboardEvent) => { if (e.key === 'Escape') props.onEditCancel() }} />
+              </div>
+              <Button type="submit" size="sm"><Icon name="check" size={14} /></Button>
+              <Button type="button" size="sm" variant="secondary" onClick={props.onEditCancel}><Icon name="close" size={14} /></Button>
+            </form>
+          )}
+        </div>
+      </div>
+    )
+  }
+}

package/dist/level6/apps/agent-platform/ui/blocks/PreviewSection.tsx

@@ -0,0 +1,64 @@
+/**
+ * 测试对话区（AgentDetail 拆分子组件）
+ */
+import type { Component } from '../../../../client/vdom/index.ts'
+import { Button, Card, Icon, Input } from '../../../../client/components/index.ts'
+import { errMsg } from './ux.tsx'
+import { inputValue } from '../lib/types.ts'
+
+export const PreviewSection: Component<{ agentId: string }> = (_init, ctx) => {
+  let previewQuery = ''
+  let previewText = ''
+  let previewing = false
+  const rerender = () => ctx.render()
+  const agentId = _init.agentId
+
+  async function previewSend() {
+    if (!previewQuery.trim()) return
+    previewing = true; previewText = ''; rerender()
+    try {
+      const token = ctx.browser?.storageGet?.('agent_platform_token') ?? ''
+      const res = await fetch(`/api/agents/${agentId}/preview`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+        body: JSON.stringify({ content: previewQuery }),
+      })
+      const reader = res.body?.getReader()
+      const dec = new TextDecoder()
+      if (reader) {
+        let buf = ''
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) break
+          buf += dec.decode(value)
+          for (const line of buf.split('\n')) {
+            if (line.startsWith('data: ')) {
+              try {
+                const d = JSON.parse(line.slice(6))
+                if (d.text) { previewText += d.text; rerender() }
+                if (d.content) { previewText = d.content; rerender() }
+              } catch { /* 非 JSON 行跳过 */ }
+            }
+          }
+        }
+      }
+    } catch (e) { previewText = '预览失败：' + errMsg(e, '') }
+    previewing = false; rerender()
+  }
+
+  return () => (
+    <Card id="sec-preview">
+      <div class="wf-font-sm wf-semibold wf-uppercase wf-tracking-wide wf-text-secondary wf-margin-bottom-sm"><Icon name="message" size={14} /> 测试对话</div>
+      <div class="wf-row wf-gap-xs">
+        <div class="wf-fill">
+          <Input placeholder="输入消息测试提示词（如：介绍一下你自己）" value={previewQuery}
+            onInput={(e: Event) => { previewQuery = inputValue(e); rerender() }} />
+        </div>
+        <Button size="sm" variant="primary" disabled={previewing} onClick={previewSend}>
+          {previewing ? '回复中...' : '发送'}
+        </Button>
+      </div>
+      {previewText && <pre class="wf-bg-secondary wf-radius wf-padding-sm wf-margin-top-sm wf-font-sm" style="white-space: pre-wrap; line-height: 1.6">{previewText}</pre>}
+    </Card>
+  )
+}

package/dist/level6/apps/agent-platform/ui/blocks/SkillsSection.tsx

@@ -0,0 +1,126 @@
+/**
+ * 技能管理区（AgentDetail 拆分子组件——自有状态，工厂 await 取数）
+ */
+import type { Component } from '../../../../client/vdom/index.ts'
+import { Button, Card, Icon, Input } from '../../../../client/components/index.ts'
+import type { AvailableSkill, BoundSkill } from '../lib/types.ts'
+
+export interface SectionProps { agentId: string }
+
+export const SkillsSection: Component<SectionProps> = (_init, ctx) => {
+  let boundSkills: BoundSkill[] = []
+  let availableSkills: AvailableSkill[] = []
+  let showSkillPicker = false
+  let skillSearch = ''
+  const rerender = () => ctx.render()
+
+  // C6 技能市场：评分（每租户每技能一次，可改评）
+  async function rateSkill(skill: AvailableSkill, liked: boolean) {
+    const skillDir = skill.dir ?? skill.skill_dir
+    if (!skillDir) return
+    try {
+      await ctx.api!.post('/api/skills/rate', { skill_dir: skillDir, liked })
+      const d = await ctx.api!.get<{ skills: AvailableSkill[] }>('/api/skills/available').catch(() => ({ skills: [] }))
+      availableSkills = d.skills ?? []
+      rerender()
+    } catch (e) { ctx.toast!('评分失败', 'error') }
+  }
+
+  // 异步启动（2027-08 同步化：工厂无 await——首次加载异步启动——闭包语义保留）
+  let started = false
+  const loadSkills = () => {
+    Promise.all([
+      ctx.api!.get<{ skills: BoundSkill[] }>(`/api/agents/${_init.agentId}/skills`).catch(() => ({ skills: [] })),
+      ctx.api!.get<{ skills: AvailableSkill[] }>('/api/skills/available').catch(() => ({ skills: [] })),
+    ]).then(([skillRes, availRes]) => {
+      boundSkills = skillRes.skills ?? []
+      availableSkills = availRes.skills ?? []
+      rerender()
+    })
+  }
+  if (!started) { started = true; loadSkills() }
+
+  async function bindSkill(skill: AvailableSkill) {
+    // 后端契约：POST /api/agents/:id/skills 需要 { skill_name, skill_dir }
+    const skillName = skill.meta?.name ?? skill.name ?? skill.slug
+    const skillDir = skill.dir ?? skill.skill_dir
+    if (!skillName || !skillDir) return
+    await ctx.api!.post(`/api/agents/${_init.agentId}/skills`, { skill_name: skillName, skill_dir: skillDir })
+    const d = await ctx.api!.get<{ skills: BoundSkill[] }>(`/api/agents/${_init.agentId}/skills`)
+    boundSkills = d.skills ?? []
+    rerender()
+  }
+
+  async function unbindSkill(id: string) {
+    // 后端契约：DELETE /api/agents/:id/skills/:skillId 需要 agent_skills.id（UUID）
+    await ctx.api!.delete(`/api/agents/${_init.agentId}/skills/${id}`)
+    const d = await ctx.api!.get<{ skills: BoundSkill[] }>(`/api/agents/${_init.agentId}/skills`)
+    boundSkills = d.skills ?? []
+    rerender()
+  }
+
+  return () => (
+    <Card id="sec-skills">
+      <div class="wf-font-sm wf-semibold wf-uppercase wf-tracking-wide wf-text-secondary wf-margin-bottom-sm"><Icon name="settings" size={14} /> 技能管理</div>
+      {boundSkills.length === 0 && <div class="wf-font-sm wf-text-tertiary wf-padding-y-md">暂无绑定技能</div>}
+      {boundSkills.map((s: BoundSkill) => (
+        <div key={s.slug} class="wf-split wf-padding-y-sm wf-border-bottom">
+          <div class="wf-stack wf-gap-none">
+            <span class="wf-font-sm wf-medium">{s.name ?? s.skill_name}</span>
+            <span class="wf-font-xs wf-text-tertiary">{s.description ?? ''}</span>
+          </div>
+          <Button size="sm" variant="danger" onClick={() => unbindSkill(s.id)}>解绑</Button>
+        </div>
+      ))}
+      {availableSkills.length > 0 && (
+        <Button size="sm" variant="ghost" onClick={() => { showSkillPicker = !showSkillPicker; rerender() }}>
+          {showSkillPicker ? '收起' : '+ 绑定技能'}
+        </Button>
+      )}
+      {showSkillPicker && (
+        <div class="wf-stack wf-gap-xs wf-margin-top-sm">
+          <div class="wf-row wf-gap-xs">
+            <div class="wf-fill">
+              <Input type="text" placeholder="搜索技能（名称/描述）..." value={skillSearch}
+                onInput={(e: Event) => { skillSearch = (e.target as HTMLInputElement).value; rerender() }} />
+            </div>
+            <span class="wf-font-xs wf-text-tertiary wf-self-center wf-nums">{availableSkills.filter((as: AvailableSkill) => {
+              const name = as.meta?.name ?? as.name ?? as.slug
+              const desc = as.meta?.description ?? as.description ?? ''
+              const q = skillSearch.trim().toLowerCase()
+              return !boundSkills.some((bs: BoundSkill) => bs.skill_name === name) &&
+                (!q || String(name).toLowerCase().includes(q) || String(desc).toLowerCase().includes(q))
+            }).length} 个</span>
+          </div>
+          {availableSkills.filter((as: AvailableSkill) => {
+            const name = as.meta?.name ?? as.name ?? as.slug
+            const desc = as.meta?.description ?? as.description ?? ''
+            const q = skillSearch.trim().toLowerCase()
+            return !boundSkills.some((bs: BoundSkill) => bs.skill_name === name) &&
+              (!q || String(name).toLowerCase().includes(q) || String(desc).toLowerCase().includes(q))
+          }).map((s: AvailableSkill) => {
+            const rating = (s as any).rating ?? { likes: 0, dislikes: 0 }
+            const rated = (rating.likes ?? 0) + (rating.dislikes ?? 0)
+            const goodRate = rated > 0 ? Math.round((rating.likes ?? 0) / rated * 100) : null
+            return (
+              <div key={s.dir ?? s.slug ?? s.id} class="wf-row wf-gap-xs wf-padding-y-xs">
+                <div class="wf-fill wf-stack wf-gap-none">
+                  <span class="wf-font-sm">{s.meta?.name ?? s.name}</span>
+                  <span class="wf-font-xs wf-text-tertiary">{s.meta?.description ?? s.description ?? ''}</span>
+                  <span class="wf-font-xs wf-text-secondary wf-nums">
+                    {goodRate === null ? '暂无评分' : `⭐ 好评率 ${goodRate}%（👍${rating.likes ?? 0} · 👎${rating.dislikes ?? 0}）`}
+                  </span>
+                </div>
+                <div class="wf-row wf-gap-xs">
+                  <Button size="sm" variant="ghost" title="好评（技能有用）" onClick={() => rateSkill(s, true)}>👍</Button>
+                  <Button size="sm" variant="ghost" title="差评（技能不好用）" onClick={() => rateSkill(s, false)}>👎</Button>
+                  <Button size="sm" variant="primary" onClick={() => bindSkill(s)}>绑定</Button>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </Card>
+  )
+}

package/dist/level6/apps/agent-platform/ui/blocks/VersionsSection.tsx

@@ -0,0 +1,67 @@
+/**
+ * 版本管理区（AgentDetail 拆分子组件——保存快照/回滚）
+ */
+import type { Component } from '../../../../client/vdom/index.ts'
+import { Button, Card, Icon, Input } from '../../../../client/components/index.ts'
+import { inputValue, type AgentVersion } from '../lib/types.ts'
+
+export const VersionsSection: Component<{ agentId: string }> = (_init, ctx) => {
+  let versions: AgentVersion[] = []
+  let versionNote = ''
+  let savingVersion = false
+  let rollingBack: string | null = null
+  const rerender = () => ctx.render()
+  const agentId = _init.agentId
+
+  function fmtVersionTime(t: string): string {
+    try { return new Date(t).toLocaleString().slice(0, 16) } catch { return String(t ?? '').slice(0, 16) }
+  }
+  function loadVersions() {
+    void ctx.api!.get<{ versions: AgentVersion[] }>(`/api/agents/${agentId}/versions`).then((d) => { versions = d.versions ?? []; rerender() }).catch(() => {})
+  }
+  async function saveVersionFn() {
+    savingVersion = true; rerender()
+    await ctx.api!.post(`/api/agents/${agentId}/versions`, { note: versionNote }).then(() => {
+      versionNote = ''; ctx.toast?.('版本已保存', 'success'); loadVersions()
+    }).catch(() => ctx.toast?.('保存失败', 'error'))
+    savingVersion = false; rerender()
+  }
+  async function rollbackVersionFn(versionId: string) {
+    const ok = await ctx.confirm?.('回滚将覆盖当前配置，确定继续？')
+    if (ok === false) return
+    rollingBack = versionId; rerender()
+    await ctx.api!.post(`/api/agents/${agentId}/versions/${versionId}/rollback`).then(() => {
+      ctx.toast?.('已回滚', 'success'); ctx.browser?.reload?.()
+    }).catch(() => ctx.toast?.('回滚失败', 'error'))
+    rollingBack = null; rerender()
+  }
+  loadVersions()
+
+  return () => (
+    <Card id="sec-versions">
+      <div class="wf-font-sm wf-semibold wf-uppercase wf-tracking-wide wf-text-secondary wf-margin-bottom-sm"><Icon name="refresh" size={14} /> 版本管理</div>
+      <div class="wf-font-xs wf-text-tertiary wf-margin-bottom-sm">保存当前配置快照，可随时回滚（系统提示/模型/工具/配额等）</div>
+      <div class="wf-row wf-gap-xs wf-margin-bottom-sm">
+        <div class="wf-fill"><Input placeholder="版本备注（可选）" value={versionNote}
+          onInput={(e: Event) => { versionNote = inputValue(e); rerender() }} /></div>
+        <Button size="sm" disabled={savingVersion} onClick={saveVersionFn}>
+          {savingVersion ? '保存中...' : '保存版本'}
+        </Button>
+      </div>
+      <div class="wf-stack wf-gap-xs">
+        {versions.length === 0 ? (
+          <div class="wf-font-sm wf-text-tertiary wf-padding-y-sm">暂无版本——保存第一个版本开始管理</div>
+        ) : versions.map((v: AgentVersion) => (
+          <div key={v.id} class="wf-split wf-padding-y-sm wf-border-bottom">
+            <div class="wf-stack wf-gap-none">
+              <span class="wf-font-sm">v{v.version} · {v.note ?? '版本'}</span>
+              <span class="wf-font-xs wf-text-tertiary">{fmtVersionTime(v.created_at)}</span>
+            </div>
+            <Button size="sm" variant="ghost" disabled={rollingBack === v.id}
+              onClick={() => rollbackVersionFn(v.id)}>{rollingBack === v.id ? '回滚中...' : '回滚'}</Button>
+          </div>
+        ))}
+      </div>
+    </Card>
+  )
+}