Phase 4.3 ACA: MCP.tsx protocol selector panel + api ACA methods (v2026.07.19.12)

VERSION

@@ -1 +1 @@
-v2026.07.19.10
+v2026.07.19.11

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/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/ChatPage.css

@@ -519,6 +519,22 @@
   padding: 0 2px;
 }
 
+/* Mermaid 图表 */
+.md-mermaid {
+  display: flex;
+  justify-content: center;
+  margin: 16px 0;
+  padding: 12px;
+  background: #f8f9fb;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  overflow-x: auto;
+}
+.md-mermaid-rendered svg {
+  max-width: 100%;
+  height: auto;
+}
+
 /* 代码块包装器 + 复制按钮 */
 .md-code-wrapper {
   position: relative;

frontend/src/pages/front/ChatPage.tsx

@@ -9,6 +9,9 @@ import hljs from 'highlight.js';
 import 'highlight.js/styles/github.css';
 import katex from 'katex';
 import 'katex/dist/katex.min.css';
+import mermaid from 'mermaid';
+
+mermaid.initialize({ startOnLoad: false, theme: 'default' });
 
 // ===== Enhanced Markdown Renderer =====
 // 媒体(图片/视频)以受限缩略图呈现，并提供下载(格式+尺寸)选项
@@ -155,7 +158,13 @@ const MarkdownContent: React.FC<{ content: string }> = ({ 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';
@@ -275,6 +284,7 @@ const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
 
     // 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)] || '');
@@ -320,7 +330,29 @@ const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
     });
   }, [content]);
 
-  return <div className="markdown-body">{nodes}</div>;
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const diagrams = containerRef.current.querySelectorAll('.md-mermaid:not(.md-mermaid-rendered)');
+    if (diagrams.length === 0) return;
+    const timer = setTimeout(async () => {
+      for (const el of diagrams) {
+        try {
+          const code = el.getAttribute('data-code') || '';
+          if (!code) continue;
+          const id = 'mermaid-' + Math.random().toString(36).slice(2, 10);
+          const { svg } = await mermaid.render(id, code);
+          el.innerHTML = svg;
+          el.classList.add('md-mermaid-rendered');
+        } catch (e) {
+          el.innerHTML = '<pre class="md-code-block"><code>Mermaid: ' + (e as Error).message + '</code></pre>';
+        }
+      }
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [content]);
+
+  return <div className="markdown-body" ref={containerRef}>{nodes}</div>;
 };
 
 // 解析后端返回的「模糊创作意图」确认指令：<<CLARIFY>>{json}<<CLARIFY>>