test(frontend): extract Markdown renderer to utils/markdown.ts + add vitest regression tests

VERSION

@@ -1 +1 @@
-v2026.07.19.10
+v2026.07.20.1

backend/python/app/api/chat_media.py

@@ -1430,7 +1430,7 @@ async def _generate_media_task(ai_msg_id: str, ai_model_id: str, prompt: str, us
         logger.info(f"[_generate_media_task] 启动 media 生成 msg={ai_msg_id} model={ai_model_id} prompt={prompt[:60]!r}")
         caps = [c.lower() for c in (ai_model.capabilities or [])]
         is_video = "video" in caps
-        timeout_seconds = 300 if is_video else 90
+        timeout_seconds = 300 if is_video else 180
         try:
             result = await asyncio.wait_for(
                 _generate_media(db, ai_model, prompt, user_id),

backend/python/app/api/chat_service.py

@@ -1657,6 +1657,16 @@ async def _send_message_core(
 
 
 
+    # 媒体分支直接返回，不会进入 LLM 工具调用；提前初始化避免未绑定
+
+    called_skill_names = []
+
+
+
+    called_mcp_names = []
+
+
+
     if effective_skill_ids:
 
 

backend/python/app/config.py

@@ -128,7 +128,15 @@ def setup_file_logging():
     root_logger.setLevel(logging.INFO)
     root_logger.addHandler(app_handler)
     root_logger.addHandler(error_handler)
-    root_logger.addFilter(TraceIdFilter())
+
+    # TraceIdFilter 必须挂在 handler 上，而非 root logger。
+    # logger 级 filter 只对「直接经该 logger 发射」的记录生效；子 logger 的记录向上冒泡
+    # 到 root 的 handler 时不会经过 root 的 logger 级 filter，导致 %(trace_id)s 缺失并抛
+    # KeyError('trace_id')。handler 级 filter 对经它格式化的每条记录都生效。
+    _tid_filter = TraceIdFilter()
+    app_handler.addFilter(_tid_filter)
+    error_handler.addFilter(_tid_filter)
+    access_handler.addFilter(_tid_filter)
 
     # 配置访问日志专用logger
     access_logger = logging.getLogger("aiflow.access")

backend/python/app/services/evolution_service.py

@@ -96,10 +96,24 @@ class PipelineScheduler:
                             self._process_trajectory(db, traj)
                         except Exception as e:
                             logger.error(f"处理轨迹 {traj.id} 失败: {e}")
-                            traj.error_msg = str(e)[:500]
+                            # 先回滚失效事务（_process_trajectory 内 commit 失败会让 session
-                            traj.retry_count = (traj.retry_count or 0) + 1
+                            # 进入 rolled-back 状态，不回滚直接再 commit 会抛 PendingRollbackError
-                            traj.status = "error"
+                            # 并级联到外层日志），再写错误状态。
-                            db.commit()
+                            try:
+                                db.rollback()
+                            except Exception:
+                                pass
+                            try:
+                                traj.error_msg = str(e)[:500]
+                                traj.retry_count = (traj.retry_count or 0) + 1
+                                traj.status = "error"
+                                db.commit()
+                            except Exception as ce:
+                                logger.error(f"更新轨迹 {traj.id} 错误状态失败: {ce}")
+                                try:
+                                    db.rollback()
+                                except Exception:
+                                    pass
                 finally:
                     db.close()
             except Exception as e:

frontend/src/api/index.ts

@@ -894,6 +894,12 @@ export const adminAPI = {
   // Phase 3.3: 多 Agent 编排图 (orchestration)
   getAgentOrchestration: (id: string) => get<any>(`/admin/agents/${id}/orchestration`),
   setAgentOrchestration: (id: string, orchestration: any) => put<any>(`/admin/agents/${id}/orchestration`, { orchestration }),
+  importYamlOrch: (id: string, yaml: string) => post<any>(`/admin/agents/${id}/orchestration/yaml/import`, { yaml_text: yaml }),
+  exportYamlOrch: (id: string) => post<any>(`/admin/agents/${id}/orchestration/yaml/export`),
+  getYamlTemplates: () => get<any>('/admin/agents/orchestration/yaml/templates'),
+  getAcaProtocols: () => get<any>("/admin/agents/aca/protocols"),
+  getAcaProtocolTools: (name: string) => get<any>(`/admin/agents/aca/protocols/${name}/tools`),
+  checkAcaHealth: (name: string) => post<any>(`/admin/agents/aca/protocols/${name}/health`, {}),
 
   getAdminAvailableSkills: (params?: any) => {
 

frontend/src/pages/admin/Achievement.tsx

@@ -1121,7 +1121,7 @@ const Achievement: React.FC = () => {
 
                     <td style={{ color: 'rgba(0,0,0,0.4)' }}>
 
-                      {entry.last_completed ? new Date(entry.last_completed).toLocaleDateString('zh-CN') : '-'}
+                      {entry.last_completed ? formatBjDate(entry.last_completed) : '-'}
 
                     </td>
 

frontend/src/pages/admin/Ads.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { adminAPI, marketAPI } from '@/api';
 import type { AdBanner, MarketApp } from '@/types';
+import { formatBjDate } from '@/utils/datetime';
 import './Ads.css';
 
 const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ children, size = 16 }) => (
@@ -281,7 +282,7 @@ const Ads: React.FC = () => {
                       </span>
                     </td>
                     <td style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)' }}>
-                      {new Date(banner.createdAt).toLocaleDateString()}
+                      {formatBjDate(banner.createdAt)}
                     </td>
                     <td>
                       <div style={{ display: 'flex', gap: 'var(--space-xs)' }}>

frontend/src/pages/admin/Apps.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { adminAPI } from '@/api';
 import './Apps.css';
-import { formatBjTime } from '@/utils/datetime';
+import { formatBjTime, formatBjDate } from '@/utils/datetime';
 
 interface AIApp {
   id: string;
@@ -224,11 +224,7 @@ export default function AdminApps() {
   };
 
   const formatDate = (dt: string | null) => {
-    if (!dt) return '-';
+    return formatBjTime(dt);
-    try {
-      const d = new Date(dt);
-      return d.toLocaleDateString('zh-CN') + ' ' + d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
-    } catch { return dt; }
   };
 
   return (
@@ -738,7 +734,7 @@ function AppDetailDrawer({ app, analytics, onClose, onAction }: {
                   <div key={v.id} className="version-item">
                     <span className="version-num">v{v.version}</span>
                     <span className="version-log">{v.changelog}</span>
-                    <span className="version-date">{v.created_at ? new Date(v.created_at).toLocaleDateString('zh-CN') : '-'}</span>
+                    <span className="version-date">{v.created_at ? formatBjDate(v.created_at) : '-'}</span>
                   </div>
                 ))}
               </div>

frontend/src/pages/admin/Mcp.tsx

@@ -34,6 +34,29 @@ const styles: Record<string, React.CSSProperties> = {
   detailsGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 16 },
   detailsItem: { fontSize: 13 },
   detailsLabel: { color: '#6b7280', marginBottom: 4 },
+  // ACA 协议抽象层 (Phase 4.3)
+  acaSection: { marginTop: 32, backgroundColor: '#fff', borderRadius: 12, padding: 24, boxShadow: '0 1px 3px rgba(0,0,0,0.08)' },
+  acaHead: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 },
+  acaTitle: { fontSize: 18, fontWeight: 700, color: '#1A1F36' },
+  acaSub: { fontSize: 13, color: '#6b7280', marginTop: 4 },
+  acaRefresh: { padding: '8px 16px', border: '1px solid #e5e7eb', borderRadius: 8, cursor: 'pointer', backgroundColor: '#fff', fontSize: 13 },
+  acaGrid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 },
+  acaCard: { border: '1px solid #e5e7eb', borderRadius: 12, padding: 16 },
+  acaCardTop: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' },
+  acaProtoName: { fontSize: 16, fontWeight: 700, color: '#1A1F36', textTransform: 'uppercase' },
+  acaVer: { fontSize: 12, color: '#9ca3af', marginLeft: 8 },
+  acaCaps: { display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 10 },
+  acaCap: { fontSize: 12, padding: '2px 8px', borderRadius: 12, backgroundColor: '#eef2ff', color: '#4338ca' },
+  acaActions: { display: 'flex', gap: 8, marginTop: 14 },
+  acaBtn: { padding: '6px 14px', border: '1px solid #e5e7eb', borderRadius: 6, cursor: 'pointer', backgroundColor: '#fff', fontSize: 13 },
+  acaBtnPrimary: { padding: '6px 14px', border: 'none', borderRadius: 6, cursor: 'pointer', backgroundColor: '#4f46e5', color: '#fff', fontSize: 13 },
+  acaHealth: { fontSize: 12, fontWeight: 600, marginTop: 10 },
+  acaTools: { marginTop: 12, borderTop: '1px solid #f3f4f6', paddingTop: 12 },
+  acaTool: { padding: '8px 0', borderBottom: '1px solid #f9fafb' },
+  acaToolName: { fontSize: 13, fontWeight: 600, color: '#374151' },
+  acaToolServer: { fontSize: 11, color: '#4f46e5', marginLeft: 8 },
+  acaToolDesc: { fontSize: 12, color: '#9ca3af', marginTop: 2 },
+  acaEmpty: { fontSize: 13, color: '#9ca3af', padding: '12px 0' },
 };
 
 const TRANSPORT_TYPES = [
@@ -83,6 +106,13 @@ export default function AdminMcp() {
   const [editingServer, setEditingServer] = useState<MCPServer | null>(null);
   const [toast, setToast] = useState<{ message: string; type: string } | null>(null);
   const pageSize = 20;
+  // ACA 协议抽象层 (Phase 4.3)
+  const [acaProtocols, setAcaProtocols] = useState<any[]>([]);
+  const [acaLoading, setAcaLoading] = useState(true);
+  const [acaTools, setAcaTools] = useState<Record<string, any[]>>({});
+  const [acaExpanded, setAcaExpanded] = useState<Record<string, boolean>>({});
+  const [acaHealth, setAcaHealth] = useState<Record<string, boolean>>({});
+  const [acaChecking, setAcaChecking] = useState<Record<string, boolean>>({});
 
   const showToast = (message: string, type: string = 'success') => {
     setToast({ message, type });
@@ -119,6 +149,52 @@ export default function AdminMcp() {
     fetchStats();
     fetchServers();
   }, [fetchStats, fetchServers]);
+  // ACA 协议抽象层 (Phase 4.3)
+  const fetchAcaProtocols = useCallback(async () => {
+    setAcaLoading(true);
+    try {
+      const result = await adminAPI.getAcaProtocols() as any;
+      const list = Array.isArray(result) ? result : (result && result.data ? result.data : []);
+      setAcaProtocols(list);
+    } catch (e) {
+      setAcaProtocols([]);
+    } finally {
+      setAcaLoading(false);
+    }
+  }, []);
+
+  const fetchAcaTools = useCallback(async (name: string) => {
+    try {
+      const result = await adminAPI.getAcaProtocolTools(name) as any;
+      const tools = result && result.tools ? result.tools : (result && result.data ? (result.data.tools || []) : []);
+      setAcaTools(prev => ({ ...prev, [name]: tools }));
+    } catch (e) {
+      setAcaTools(prev => ({ ...prev, [name]: [] }));
+    }
+  }, []);
+
+  const toggleAcaTools = (name: string) => {
+    setAcaExpanded(prev => {
+      const next = !prev[name];
+      if (next && !acaTools[name]) fetchAcaTools(name);
+      return { ...prev, [name]: next };
+    });
+  };
+
+  const checkAcaHealth = async (name: string) => {
+    setAcaChecking(prev => ({ ...prev, [name]: true }));
+    try {
+      const result = await adminAPI.checkAcaHealth(name) as any;
+      const healthy = result ? (result.healthy !== undefined ? result.healthy : (result.data ? result.data.healthy : false)) : false;
+      setAcaHealth(prev => ({ ...prev, [name]: healthy }));
+    } catch (e) {
+      setAcaHealth(prev => ({ ...prev, [name]: false }));
+    } finally {
+      setAcaChecking(prev => ({ ...prev, [name]: false }));
+    }
+  };
+
+  useEffect(() => { fetchAcaProtocols(); }, [fetchAcaProtocols]);
 
   const handleCreate = () => {
     setEditingServer(null);
@@ -238,6 +314,71 @@ export default function AdminMcp() {
         </div>
       </div>
 
+      {/* Phase 4.3: ACA 协议抽象层 */}
+      <div style={styles.acaSection}>
+        <div style={styles.acaHead}>
+          <div>
+            <div style={styles.acaTitle}>ACA 协议抽象层</div>
+            <div style={styles.acaSub}>统一协议接入（MCP / A2A / 自定义），隔离底层实现，防止协议绑架</div>
+          </div>
+          <button style={styles.acaRefresh} onClick={() => fetchAcaProtocols()}>刷新</button>
+        </div>
+        {acaLoading ? (
+          <div style={styles.acaEmpty}>加载中...</div>
+        ) : acaProtocols.length === 0 ? (
+          <div style={styles.acaEmpty}>未注册任何 ACA 协议</div>
+        ) : (
+          <div style={styles.acaGrid}>
+            {acaProtocols.map((p: any) => (
+              <div key={p.name} style={styles.acaCard}>
+                <div style={styles.acaCardTop}>
+                  <div>
+                    <span style={styles.acaProtoName}>{p.name}</span>
+                    <span style={styles.acaVer}>v{p.version}</span>
+                  </div>
+                  <span style={{ ...styles.badge, backgroundColor: '#dcfce7', color: '#166534' }}>已注册</span>
+                </div>
+                <div style={styles.acaCaps}>
+                  {(p.capabilities || []).map((c: string) => (
+                    <span key={c} style={styles.acaCap}>{c}</span>
+                  ))}
+                </div>
+                {acaHealth[p.name] !== undefined && (
+                  <div style={{ ...styles.acaHealth, color: acaHealth[p.name] ? '#166534' : '#991b1b' }}>
+                    健康：{acaHealth[p.name] ? '正常' : '异常'}
+                  </div>
+                )}
+                <div style={styles.acaActions}>
+                  <button style={styles.acaBtnPrimary} onClick={() => toggleAcaTools(p.name)}>
+                    {acaExpanded[p.name] ? '隐藏工具' : `查看工具${acaTools[p.name] ? ' (' + acaTools[p.name].length + ')' : ''}`}
+                  </button>
+                  <button style={styles.acaBtn} disabled={acaChecking[p.name]} onClick={() => checkAcaHealth(p.name)}>
+                    {acaChecking[p.name] ? '检测中...' : '健康检查'}
+                  </button>
+                </div>
+                {acaExpanded[p.name] && (
+                  <div style={styles.acaTools}>
+                    {(acaTools[p.name] || []).length === 0 ? (
+                      <div style={styles.acaEmpty}>暂无工具</div>
+                    ) : (
+                      (acaTools[p.name] || []).map((t: any, idx: number) => (
+                        <div key={(t.name || '') + idx} style={styles.acaTool}>
+                          <div>
+                            <span style={styles.acaToolName}>{t.name}</span>
+                            {t._mcp_server_name && <span style={styles.acaToolServer}>@{t._mcp_server_name}</span>}
+                          </div>
+                          {t.description && <div style={styles.acaToolDesc}>{String(t.description).substring(0, 120)}</div>}
+                        </div>
+                      ))
+                    )}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
       <div style={styles.toolbar}>
         <input
           style={styles.searchInput}

frontend/src/pages/front/AppServices.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React, { useState, useEffect, useCallback } from 'react';
 import { imUserAPI } from '@/api';
+import { formatBjDate } from '@/utils/datetime';
 
 const PRIMARY = '#5B5FED';
 
@@ -106,7 +107,7 @@ const AppServices: React.FC = () => {
                 </div>
                 <p style={{ fontSize: '13px', color: '#6B7280', lineHeight: 1.7, flex: 1, margin: '0 0 14px 0' }}>{app.description || '暂无描述'}</p>
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <span style={{ fontSize: '12px', color: '#9CA3AF' }}>{app.published_at ? '上架于 ' + new Date(app.published_at).toLocaleDateString('zh-CN') : ''}</span>
+                  <span style={{ fontSize: '12px', color: '#9CA3AF' }}>{app.published_at ? '上架于 ' + formatBjDate(app.published_at) : ''}</span>
                   <button onClick={() => showToast('已加入「我的应用」，可在 AI 聊天中调用')} style={{ padding: '7px 16px', background: PRIMARY, border: 'none', borderRadius: '8px', color: '#fff', fontSize: '13px', fontWeight: 500, cursor: 'pointer' }}>使用</button>
                 </div>
               </div>

frontend/src/pages/front/AssetsPage.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import type { Asset, AssetCategory, AssetCategoryDef, AssetFileType } from '@/types';
 import { assetsAPI } from '@/api';
+import { formatBjTime } from '@/utils/datetime';
 import './AssetsPage.css';
 
 const fileTypeLabels: Record<string, { label: string; bg: string; color: string }> = {
@@ -46,7 +47,7 @@ function formatSize(bytes?: number): string {
 }
 
 function formatDate(dateStr: string): string {
-  return new Date(dateStr).toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
+  return formatBjTime(dateStr);
 }
 
 // 将文件扩展名或API返回的file_type映射到前端fileType标签

frontend/src/pages/front/MarketPage.tsx

@@ -1596,6 +1596,7 @@ const MarketPage: React.FC = () => {
   const [localApps, setLocalApps] = useState<MarketApp[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
+  const searchTimerRef = useRef<number | null>(null);
   const [capabilityFilter, setCapabilityFilter] = useState<string | null>(null);
   const [installToast, setInstallToast] = useState<string | null>(null);
 
@@ -1893,7 +1894,7 @@ const MarketPage: React.FC = () => {
             className="form-input"
             placeholder="搜索应用名称或描述..."
             value={searchQuery}
-            onChange={e => { setSearchQuery(e.target.value); loadApps(e.target.value); }}
+            onChange={e => { const v = e.target.value; setSearchQuery(v); if (searchTimerRef.current) clearTimeout(searchTimerRef.current); searchTimerRef.current = window.setTimeout(() => loadApps(v), 350); }}
             style={{ paddingLeft: 32, flex: 1, maxWidth: 400 }}
           />
           {searchQuery && (

frontend/src/utils/datetime.ts

@@ -7,3 +7,34 @@ export function formatBjTime(t?: string | null): string {
   if (isNaN(d.getTime())) return t;
   return d.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false });
 }
+
+// 仅日期（北京时间）
+export function formatBjDate(t?: string | null): string {
+  if (!t) return '-';
+  const iso = /[Z+]/.test(t) ? t : t + '+08:00';
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) return t;
+  return d.toLocaleDateString('zh-CN', { timeZone: 'Asia/Shanghai' });
+}
+
+// 将任意 Date 换算为「北京墙钟」对应的 UTC 视图，便于按北京日历日比较
+function toBjView(d: Date): Date {
+  return new Date(d.getTime() + (d.getTimezoneOffset() + 480) * 60000);
+}
+
+// 聊天消息时间：今天 HH:MM / 昨天 HH:MM / MM-DD HH:MM / YYYY-MM-DD HH:MM（北京时间）
+export function formatChatTime(iso?: string | null): string {
+  if (!iso) return '';
+  const s = /[Z+]/.test(iso) ? iso : iso + '+08:00';
+  const d = new Date(s);
+  if (isNaN(d.getTime())) return '';
+  const bj = toBjView(d);
+  const nowBj = toBjView(new Date());
+  const dayDiff = Math.floor(nowBj.getTime() / 86400000) - Math.floor(bj.getTime() / 86400000);
+  const hhmm = d.toLocaleTimeString('zh-CN', { timeZone: 'Asia/Shanghai', hour: '2-digit', minute: '2-digit' });
+  if (dayDiff <= 0) return hhmm;
+  if (dayDiff === 1) return '昨天 ' + hhmm;
+  const md = d.toLocaleDateString('zh-CN', { timeZone: 'Asia/Shanghai', month: '2-digit', day: '2-digit' });
+  if (bj.getUTCFullYear() === nowBj.getUTCFullYear()) return md + ' ' + hhmm;
+  return d.toLocaleDateString('zh-CN', { timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit' }) + ' ' + hhmm;
+}

frontend/src/utils/markdown.test.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect } from 'vitest';
+import { renderMarkdownToHtml } from './markdown';
+
+// 前台聊天 Markdown 渲染曾两次被 bug 击穿：
+//  1) 段落内单个 \n 被转成 <br/>，导致 AI 回复被强制大量换行、内容撑成多行；
+//  2) 表格在加粗/链接转换之前被提取，单元格内 **xxx** 原样显示、且 <br> 未压缩。
+// 本测试固化「渲染管线」契约，防止回归。管线代码见 ./markdown.ts（从 ChatPage 抽出）。
+describe('renderMarkdownToHtml', () => {
+  it('段落内单个 \\n 转为空格（而非 <br/>）', () => {
+    const { html } = renderMarkdownToHtml('第一行\n第二行');
+    expect(html).not.toContain('<br');
+    expect(html).toContain('第一行 第二行');
+  });
+
+  it('双换行转为段落分隔', () => {
+    const { html } = renderMarkdownToHtml('段一\n\n段二');
+    expect(html).toContain('段一</p><p class="md-p">段二');
+  });
+
+  it('3+ 连续空行压缩为 2 个（与 2 个空行结果一致）', () => {
+    const many = renderMarkdownToHtml('a\n\n\n\n\nb').html;
+    const few = renderMarkdownToHtml('a\n\nb').html;
+    expect(many).toBe(few);
+    expect(many).toContain('a</p><p class="md-p">b');
+  });
+
+  it('表格在加粗之后提取，单元格内的 **xxx** 被渲染为 <strong>', () => {
+    const input = '| 能力 | 说明 |\n| --- | --- |\n| **渠道排序** | 按优先级 |\n';
+    const { html } = renderMarkdownToHtml(input);
+    expect(html).toContain('<table class="md-table">');
+    expect(html).toContain('<th');
+    expect(html).toContain('<td');
+    expect(html).toContain('<strong>渠道排序</strong>');
+  });
+
+  it('单元格内连续 <br> 被压缩为单个', () => {
+    const input = '| 列 |\n| --- |\n| a<br/><br/>b |\n';
+    const { html } = renderMarkdownToHtml(input);
+    expect(html).toContain('a<br/>b');
+    expect(html).not.toContain('<br/><br/>');
+  });
+
+  it('无序列表渲染为 <ul><li>', () => {
+    const { html } = renderMarkdownToHtml('- a\n- b');
+    expect(html).toContain('<ul class="md-ul">');
+    expect(html).toContain('<li class="md-li">a</li>');
+    expect(html).toContain('<li class="md-li">b</li>');
+  });
+
+  it('一级标题渲染为 h2', () => {
+    const { html } = renderMarkdownToHtml('# Title');
+    expect(html).toContain('<h2 class="md-h2">Title</h2>');
+  });
+
+  it('代码块内容不被行内加粗转换', () => {
+    const { html } = renderMarkdownToHtml('```\n**not bold**\n```');
+    expect(html).toContain('<pre class="md-code-block">');
+    expect(html).not.toContain('<strong>not bold</strong>');
+  });
+
+  it('行内代码被抽取保护', () => {
+    const { html } = renderMarkdownToHtml('use `npm run` here');
+    expect(html).toContain('<code class="md-inline-code">npm run</code>');
+  });
+
+  it('[文本](url) 链接渲染', () => {
+    const { html } = renderMarkdownToHtml('[Google](https://g.com)');
+    expect(html).toContain('<a class="md-link" href="https://g.com"');
+    expect(html).toContain('Google');
+  });
+
+  it('媒体(<img>)以占位符保留并返回结构化 media 列表', () => {
+    const { html, media } = renderMarkdownToHtml('看这张图 <img src="https://x.com/a.png" alt="图">');
+    expect(media.length).toBe(1);
+    expect(media[0].type).toBe('img');
+    expect(media[0].src).toBe('https://x.com/a.png');
+    expect(media[0].alt).toBe('图');
+    expect(html).toContain('\x00MEDIA0\x00');
+  });
+});

frontend/src/utils/markdown.ts

@@ -0,0 +1,205 @@
+import katex from 'katex';
+import hljs from 'highlight.js';
+
+export interface MediaInfo {
+  type: 'img' | 'video';
+  src: string;
+  alt?: string;
+}
+
+export interface RenderResult {
+  html: string;
+  media: MediaInfo[];
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+/**
+ * 将 Markdown 文本转为带占位符的 HTML 字符串。
+ *
+ * 设计契约（曾被线上 bug 击穿、用单测固化，见 markdown.test.ts）：
+ *  - 段落内【单个 \n 转为空格】而非 <br/>，避免 AI 回复被强制大量换行；
+ *  - 【3+ 连续空行压缩为 2 个】（/\n{3,}/ -> \n\n），避免多余空白把内容撑成多行；
+ *  - 【表格在加粗/链接转换之后提取】，单元格内的 **xxx** / [文本](url) 才能被渲染；
+ *    且单元格内连续 <br> 被压缩为单个（normalizeCell）。
+ *
+ * 媒体(<img>/<video>)以 \x00MEDIA<n>\x00 占位符保留在返回的 html 中，
+ * 由调用方（ChatPage 的 MarkdownContent）切分后渲染为 React 组件。
+ */
+export function renderMarkdownToHtml(content: string): RenderResult {
+  let text = content;
+
+  // 1. Extract code blocks first (protect from other replacements)
+  const codeBlocks: string[] = [];
+  const mermaidBlocks: string[] = [];
+  text = text.replace(/```(\w*)\n?([\s\S]*?)```/g, (_m: string, _lang: string, code: string) => {
+    if (_lang === 'mermaid') {
+      const idx = mermaidBlocks.length;
+      mermaidBlocks.push('<div class="md-mermaid" data-code="' + escapeHtml(code.trim()) + '"></div>');
+      return '\x00MERMAID' + idx + '\x00';
+    }
+    const idx = codeBlocks.length;
+    codeBlocks.push('<pre class="md-code-block"><code class="md-code">' + escapeHtml(code.trim()) + '</code></pre>');
+    return '\x00CODEBLOCK' + idx + '\x00';
+  });
+
+  // 2. Extract inline code
+  const inlineCodes: string[] = [];
+  text = text.replace(/`([^`]+)`/g, (_m: string, code: string) => {
+    const idx = inlineCodes.length;
+    inlineCodes.push('<code class="md-inline-code">' + escapeHtml(code) + '</code>');
+    return '\x00INLINE' + idx + '\x00';
+  });
+
+  // 2.5 Extract media blocks (<img>/<video>) -> 结构化，后续渲染为 React 组件
+  const mediaBlocks: MediaInfo[] = [];
+  text = text.replace(/<(img|video)([^>]*?)\/?>/gi, (_m: string, tag: string, attrs: string) => {
+    const type = tag.toLowerCase() === 'img' ? 'img' : 'video';
+    const srcM = attrs.match(/src=["']([^"']+)["']/i);
+    const altM = attrs.match(/alt=["']([^"']*)["']/i);
+    mediaBlocks.push({ type, src: srcM ? srcM[1] : '', alt: altM ? altM[1] : '' });
+    return '\x00MEDIA' + (mediaBlocks.length - 1) + '\x00';
+  });
+
+  // 2.6 Normalize excessive blank lines in prose (code blocks already extracted)
+  text = text.replace(/\n{3,}/g, '\n\n').trim();
+
+  // 2.8 LaTeX 数学公式：$$...$$（块级）和 $...$（行内）
+  const mathBlocks: string[] = [];
+  text = text.replace(/\$\$([\s\S]+?)\$\$/g, (_m: string, formula: string) => {
+    try {
+      const rendered = katex.renderToString(formula.trim(), { displayMode: true, throwOnError: false });
+      const idx = mathBlocks.length;
+      mathBlocks.push(`<div class="md-math-block">${rendered}</div>`);
+      return '\x00MATHBLOCK' + idx + '\x00';
+    } catch { return _m; }
+  });
+  text = text.replace(/\$([^\s$][^$]*[^\s$])\$/g, (_m: string, formula: string) => {
+    try {
+      const rendered = katex.renderToString(formula.trim(), { displayMode: false, throwOnError: false });
+      const idx = mathBlocks.length;
+      mathBlocks.push(`<span class="md-math-inline">${rendered}</span>`);
+      return '\x00MATHBLOCK' + idx + '\x00';
+    } catch { return _m; }
+  });
+
+  // 2.9 Strikethrough: ~~text~~ -> <del>text</del>
+  text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
+
+  // 2.10 Auto-link bare URLs: http(s)://... -> <a>
+  text = text.replace(/(?<![="'>])https?:\/\/[^\s<>[\]()]+/g, (url: string) =>
+    `<a class="md-link" href="${url}" target="_blank" rel="noopener">${url}</a>`
+  );
+
+  // 3. Headers
+  text = text.replace(/^#### (.+)$/gm, '<h4 class="md-h4">$1</h4>');
+  text = text.replace(/^### (.+)$/gm, '<h4 class="md-h4">$1</h4>');
+  text = text.replace(/^## (.+)$/gm, '<h3 class="md-h3">$1</h3>');
+  text = text.replace(/^# (.+)$/gm, '<h2 class="md-h2">$1</h2>');
+
+  // 4. Horizontal rule
+  text = text.replace(/^---+$/gm, '<hr class="md-hr">');
+
+  // 5. Blockquotes
+  text = text.replace(/^> (.+)$/gm, '<blockquote class="md-blockquote">$1</blockquote>');
+
+  // 6. Links [text](url)
+  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a class="md-link" href="$2" target="_blank" rel="noopener">$1</a>');
+
+  // 7. Bold and italic
+  text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+  text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  text = text.replace(/(?<!\w)\*(?!\*)(.+?)(?<!\*)\*(?!\w)/g, '<em>$1</em>');
+
+  // 7.5 Extract Markdown tables after inline formatting so cells support bold/italic/links.
+  // 表格提取放在加粗/链接之后，避免单元格内 **xxx** 原样显示；同时压缩单元格内多余 <br>。
+  const tableBlocks: string[] = [];
+  text = text.replace(
+    /((?:^\|.+\|\r?\n)+^\|[\s\-:|]+\|\r?\n(?:^\|.+\|\r?\n?)+)/gm,
+    (_m: string, block: string) => {
+      const lines = block.trim().split(/\r?\n/).filter((l: string) => l.trim());
+      if (lines.length < 2) return block;
+      const headerCells = lines[0].split('|').slice(1, -1).map((c: string) => c.trim());
+      const alignCells = lines[1].split('|').slice(1, -1).map((c: string) => {
+        const t = c.trim();
+        const left = t.startsWith(':');
+        const right = t.endsWith(':');
+        if (left && right) return 'center';
+        if (right) return 'right';
+        if (left) return 'left';
+        return 'left';
+      });
+      const normalizeCell = (cell: string) => {
+        return cell
+          .replace(/<br\s*\/?>\s*/gi, '<br/>')
+          .replace(/\n/g, '<br/>')
+          .replace(/(<br\/>){2,}/g, '<br/>')
+          .replace(/^(<br\/>)+|(<br\/>)+$/g, '');
+      };
+      const bodyRows = lines.slice(2).map((row: string) =>
+        row.split('|').slice(1, -1).map((c: string) => normalizeCell(c.trim()))
+      );
+      const thead = headerCells.map((c: string, i: number) =>
+        `<th style="text-align:${alignCells[i] || 'left'}">${normalizeCell(c)}</th>`
+      ).join('');
+      const tbody = bodyRows.map((r: string[]) =>
+        '<tr>' + r.map((c: string, i: number) =>
+          `<td style="text-align:${alignCells[i] || 'left'}">${c}</td>`
+        ).join('') + '</tr>'
+      ).join('');
+      const html = `<table class="md-table"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table>`;
+      const idx = tableBlocks.length;
+      tableBlocks.push(html);
+      return '\x00TABLE' + idx + '\x00';
+    }
+  );
+
+  // 8. Lists
+  text = text.replace(/^\s*[-*] (.+)$/gm, '<li class="md-li">$1</li>');
+  text = text.replace(/^\s*\d+\. (.+)$/gm, '<li class="md-li">$1</li>');
+  // Wrap consecutive <li> in <ul>
+  text = text.replace(/((?:<li class="md-li">[\s\S]*?<\/li>\n?)+)/g, '<ul class="md-ul">$1</ul>');
+
+  // 9. Convert double newlines to paragraph breaks, single newlines to spaces
+  text = text.replace(/\n\n/g, '</p><p class="md-p">');
+  text = text.replace(/\n/g, ' ');
+
+  // 10. Restore code blocks and inline codes
+  text = text.replace(/\x00CODEBLOCK(\d+)\x00/g, (_m: string, idx: string) => codeBlocks[parseInt(idx)] || '');
+  text = text.replace(/\x00MERMAID(\d+)\x00/g, (_m: string, idx: string) => mermaidBlocks[parseInt(idx)] || '');
+  text = text.replace(/\x00INLINE(\d+)\x00/g, (_m: string, idx: string) => inlineCodes[parseInt(idx)] || '');
+  text = text.replace(/\x00TABLE(\d+)\x00/g, (_m: string, idx: string) => tableBlocks[parseInt(idx)] || '');
+  text = text.replace(/\x00MATHBLOCK(\d+)\x00/g, (_m: string, idx: string) => mathBlocks[parseInt(idx)] || '');
+
+  // 10.5 Apply syntax highlighting to code blocks + add copy button
+  text = text.replace(
+    /<pre class="md-code-block"><code class="md-code">([\s\S]*?)<\/code><\/pre>/g,
+    (_m: string, code: string) => {
+      const decoded = code.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+      let highlighted: string;
+      try { highlighted = hljs.highlightAuto(decoded).value; } catch { highlighted = code; }
+      return `<div class="md-code-wrapper">
+        <button class="md-code-copy" onclick="navigator.clipboard.writeText(this.parentElement.querySelector('code').textContent);this.textContent='已复制';setTimeout(()=>this.textContent='复制',2000)">复制</button>
+        <pre class="md-code-block"><code class="md-code hljs">${highlighted}</code></pre>
+      </div>`;
+    }
+  );
+
+  // 11. Wrap in paragraph and clean up
+  text = '<p class="md-p">' + text + '</p>';
+  text = text.replace(/<p class="md-p"><\/p>/g, '');
+  text = text.replace(/<p class="md-p">(<h[234][\s\S]*?<\/h[234]>)<\/p>/g, '$1');
+  text = text.replace(/<p class="md-p">(<pre[\s\S]*?<\/pre>)<\/p>/g, '$1');
+  text = text.replace(/<p class="md-p">(<ul[\s\S]*?<\/ul>)<\/p>/g, '$1');
+  text = text.replace(/<p class="md-p">(<hr[\s\S]*?)<\/p>/g, '$1');
+  text = text.replace(/<p class="md-p">(<blockquote[\s\S]*?<\/blockquote>)<\/p>/g, '$1');
+  text = text.replace(/<p class="md-p">(<table[\s\S]*?<\/table>)<\/p>/g, '$1');
+
+  return { html: text, media: mediaBlocks };
+}

migrations/007_evolution_tables.sql

@@ -70,7 +70,7 @@ CREATE TABLE IF NOT EXISTS `skill_trajectory_links` (
     `skill_name` VARCHAR(200) NOT NULL,
     `user_id` VARCHAR(36) NOT NULL,
     `trajectory_id` VARCHAR(36),
-    `atom_id` VARCHAR(36),
+    `atom_id` VARCHAR(128),
     `weightscore` INT DEFAULT 0,
     `created_at` DATETIME DEFAULT CURRENT_TIMESTAMP,
     INDEX `idx_stl_user_skill` (`user_id`, `skill_name`),

migrations/021_widen_atom_id.sql

@@ -0,0 +1,7 @@
+-- 021: 加宽 skill_trajectory_links.atom_id 列
+-- 背景：atom_id 实际值形如 "{trajectory_id}_atom_{i}"（UUID 36 + "_atom_" + 序号 ≈ 45 字符），
+-- 原 VARCHAR(36) 过短导致写入时 DataError(1406) Data too long，并使会话进入 rolled-back 状态，
+-- 级联触发 PendingRollbackError 与日志 trace_id KeyError 刷屏。
+-- 本迁移幂等：重复执行 MODIFY 到相同类型为无害 no-op。
+
+ALTER TABLE `skill_trajectory_links` MODIFY COLUMN `atom_id` VARCHAR(128) NULL;

migrations/mig_g4_distribution.sql

@@ -56,7 +56,7 @@ CREATE TABLE IF NOT EXISTS `distribution_licenses` (
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
 -- Insert seed data: sample distributions
-INSERT INTO `distributions` (`id`, `name`, `description`, `brand_name`, `brand_color`, `provider`, `model`, `features`, `status`) VALUES
+INSERT IGNORE INTO `distributions` (`id`, `name`, `description`, `brand_name`, `brand_color`, `provider`, `model`, `features`, `status`) VALUES
 ('distro-starter', 'Starter Edition', '基础版发行包，适合个人开发者和小团队', 'AI Starter', '#6366f1', 'siliconflow', 'deepseek-ai/DeepSeek-V4-Flash', '["chat", "code_exec"]', 'active'),
 ('distro-enterprise', 'Enterprise Edition', '企业版发行包，包含完整 MCP 生态 + Agent 协作', 'AI Enterprise', '#f59e0b', 'siliconflow', 'deepseek-ai/DeepSeek-V4-Flash', '["chat", "code_exec", "knowledge_search", "agent_collab"]', 'active'),
 ('distro-devops', 'DevOps Edition', 'DevOps 专用发行包，CI/CD + 代码审查 + 部署', 'AI DevOps', '#10b981', 'siliconflow', 'deepseek-ai/DeepSeek-V4-Flash', '["chat", "code_exec", "automation", "webhook"]', 'active');

migrations/mig_g5_privacy.sql

@@ -84,6 +84,11 @@ CREATE TABLE IF NOT EXISTS usage_reports (
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
 -- 5. Add privacy_mode to distributions table
-ALTER TABLE distributions 
+-- MariaDB 11.8 不支持 ADD COLUMN IF NOT EXISTS 语法，改用 information_schema 预检 + 动态 PREPARE 实现幂等
-    ADD COLUMN IF NOT EXISTS privacy_mode ENUM('local', 'cloud', 'hybrid') NOT NULL DEFAULT 'cloud' 
+SET @exist_pm := (SELECT COUNT(*) FROM information_schema.COLUMNS WHERE TABLE_SCHEMA = 'aiflow' AND TABLE_NAME = 'distributions' AND COLUMN_NAME = 'privacy_mode');
-    COMMENT 'Deployment mode for distribution' AFTER status;
+SET @sql_pm := IF(@exist_pm = 0,
+    "ALTER TABLE distributions ADD COLUMN privacy_mode ENUM('local', 'cloud', 'hybrid') NOT NULL DEFAULT 'cloud' COMMENT 'Deployment mode for distribution' AFTER status",
+    'SELECT 1');
+PREPARE stmt_pm FROM @sql_pm;
+EXECUTE stmt_pm;
+DEALLOCATE PREPARE stmt_pm;