feat(ui,docs): Agent 流式侧栏 + 结果区/MCP 点/确认条 + 官网文案

- 侧栏消费 Agent SSE：时间线边 append、正文 ▌、停止按钮
- 「在结果区打开」不抢编辑器 focus；MCP 活跃点；写操作确认条
- 文档/落地页补充 Ask|Agent 与 npx @rlwj-lab/opsxdb-mcp（不宣传默认可写）

src/AiPanel.tsx

@@ -1,7 +1,18 @@
-import { useEffect, useState } from "react";
-import { callAi, callAiAgent, getAiConfig, saveAiConfig, schemaContextFor, type AiAction } from "./api";
+import { useEffect, useRef, useState } from "react";
+import {
+  callAi,
+  callAiAgentStream,
+  confirmAiAgentWrite,
+  getAiConfig,
+  getMcpStatus,
+  saveAiConfig,
+  schemaContextFor,
+  type AiAction,
+  type AiAgentStepExt,
+  type McpStatus,
+} from "./api";
 import { AI_PRESETS, findAiPreset, type AiAuthStyle, type AiProtocol } from "./aiPresets";
-import { useWorkspaceStore, type AiAgentStepView, type AiChatMode } from "./store";
+import { useWorkspaceStore, type AiAgentStepView, type AiChatMode, type QueryResult } from "./store";
 import { editorDatabase } from "./redisContext";
 
 const ACTIONS: { id: AiAction; label: string }[] = [
@@ -49,30 +60,16 @@ function CodeBlock({ code }: { code: string }) {
         className="flex items-center justify-end gap-1.5 border-b px-1.5 py-0.5"
         style={{ borderColor: "var(--ops-border-soft)" }}
       >
-        <button
-          type="button"
-          className="text-[10px] hover:underline"
-          style={{ color: "var(--ops-accent)" }}
-          onClick={() => void copy()}
-        >
+        <button type="button" className="text-[10px] hover:underline" style={{ color: "var(--ops-accent)" }} onClick={() => void copy()}>
           复制
         </button>
-        <button
-          type="button"
-          className="text-[10px] hover:underline"
-          style={{ color: "var(--ops-accent)" }}
-          onClick={insertToEditor}
-        >
+        <button type="button" className="text-[10px] hover:underline" style={{ color: "var(--ops-accent)" }} onClick={insertToEditor}>
           插入编辑器
         </button>
       </div>
       <pre
         className="m-0 overflow-auto whitespace-pre-wrap break-all px-2 py-1 font-mono"
-        style={{
-          fontSize: "var(--ops-text-xs)",
-          background: "var(--ops-editor-bg)",
-          color: "var(--ops-text)",
-        }}
+        style={{ fontSize: "var(--ops-text-xs)", background: "var(--ops-editor-bg)", color: "var(--ops-text)" }}
       >
         {code}
       </pre>
@@ -80,53 +77,77 @@ function CodeBlock({ code }: { code: string }) {
   );
 }
 
-/** R2-F7:AI 消息渲染 —— 代码块走等宽块,其余纯文本(无代码块时整体不变) */
-function MessageContent({ content }: { content: string }) {
+function MessageContent({ content, streaming }: { content: string; streaming?: boolean }) {
   const segs = splitContent(content);
-  if (segs.length === 1 && segs[0].kind === "text") return <>{content}</>;
+  const cursor = streaming ? <span className="ops-ai-cursor">▌</span> : null;
+  if (segs.length === 1 && segs[0].kind === "text") {
+    return (
+      <>
+        {content}
+        {cursor}
+      </>
+    );
+  }
   return (
     <>
-      {segs.map((s, i) =>
-        s.kind === "code" ? <CodeBlock key={i} code={s.text} /> : <span key={i}>{s.text}</span>,
-      )}
+      {segs.map((s, i) => (s.kind === "code" ? <CodeBlock key={i} code={s.text} /> : <span key={i}>{s.text}</span>))}
+      {cursor}
     </>
   );
 }
 
+function openStepResult(step: AiAgentStepView) {
+  const r = step.result;
+  if (!r || (!r.columns?.length && !r.rows?.length)) return;
+  const st = useWorkspaceStore.getState();
+  const qr: QueryResult = {
+    columns: r.columns || [],
+    rows: (r.rows || []) as Record<string, unknown>[],
+    rowCount: r.rowCount ?? (r.rows?.length || 0),
+    timeMs: step.ms || 0,
+  };
+  st.openAiResultSet(step.tool.replace(/^opsxdb_/, "") || "AI 结果", r.sql || "", qr);
+  st.notify({ kind: "success", title: "已在结果区打开", message: `${qr.rowCount} 行`, mode: "toast", durationMs: 1400 });
+}
 
-/** 阶段 2：Agent 步骤时间线 — 挂在回复下，默认可折叠，展示最近步骤 */
 function AgentSteps({ steps }: { steps: AiAgentStepView[] }) {
-  const [open, setOpen] = useState(false); // 默认最近 3 步
+  const [open, setOpen] = useState(false);
   if (!steps.length) return null;
   const shown = open || steps.length <= 3 ? steps : steps.slice(-3);
   return (
     <div className="ops-ai-steps mt-1.5 border-t pt-1" style={{ borderColor: "var(--ops-border-soft)" }}>
-      <button
-        type="button"
-        className="mb-0.5 text-[10px] hover:underline"
-        style={{ color: "var(--ops-muted)" }}
-        onClick={() => setOpen(!open)}
-      >
+      <button type="button" className="mb-0.5 text-[10px] hover:underline" style={{ color: "var(--ops-muted)" }} onClick={() => setOpen(!open)}>
         {open ? "收起" : "展开"}步骤 · {steps.length}
       </button>
       <ul className="m-0 list-none space-y-0.5 p-0">
         {shown.map((s, i) => (
-          <li
-            key={i}
-            className="flex items-start gap-1.5 text-[10px] leading-snug"
-            style={{ color: "var(--ops-muted)" }}
-            title={s.args || s.error || s.summary}
-          >
+          <li key={i} className="flex items-start gap-1.5 text-[10px] leading-snug" style={{ color: "var(--ops-muted)" }} title={s.args || s.error || s.summary}>
             <span
-              className="mt-0.5 inline-block h-1.5 w-1.5 shrink-0 rounded-full"
-              style={{ background: s.ok ? "var(--ops-success, #22c55e)" : "var(--ops-danger, #ef4444)" }}
+              className={`mt-0.5 inline-block h-1.5 w-1.5 shrink-0 rounded-full ${s.pending ? "ops-ai-step-spin" : ""}`}
+              style={{
+                background: s.pending
+                  ? "var(--ops-accent)"
+                  : s.needConfirm
+                    ? "var(--ops-warning, #f59e0b)"
+                    : s.ok
+                      ? "var(--ops-success, #22c55e)"
+                      : "var(--ops-danger, #ef4444)",
+              }}
               aria-hidden
             />
             <span className="min-w-0 break-all">
               <span style={{ color: "var(--ops-text)" }}>{s.tool.replace(/^opsxdb_/, "")}</span>
               {" · "}
-              {s.summary || s.error || (s.ok ? "ok" : "fail")}
-              {s.ms != null ? ` · ${s.ms}ms` : ""}
+              {s.pending ? "执行中…" : s.summary || s.error || (s.ok ? "ok" : "fail")}
+              {!s.pending && s.ms != null ? ` · ${s.ms}ms` : ""}
+              {s.result && (s.result.columns?.length || s.result.rows?.length) ? (
+                <>
+                  {" · "}
+                  <button type="button" className="hover:underline" style={{ color: "var(--ops-accent)" }} onClick={() => openStepResult(s)}>
+                    在结果区打开
+                  </button>
+                </>
+              ) : null}
             </span>
           </li>
         ))}
@@ -135,6 +156,61 @@ function AgentSteps({ steps }: { steps: AiAgentStepView[] }) {
   );
 }
 
+function DangerConfirmBar({
+  sql,
+  connectionId,
+  database,
+  kind,
+  onDone,
+}: {
+  sql: string;
+  connectionId?: string;
+  database?: string;
+  kind: "query" | "redis";
+  onDone: (ok: boolean, msg?: string) => void;
+}) {
+  const [busy, setBusy] = useState(false);
+  const run = async () => {
+    if (!connectionId || busy) return;
+    setBusy(true);
+    try {
+      await confirmAiAgentWrite({
+        connectionId,
+        sql: kind === "query" ? sql : undefined,
+        command: kind === "redis" ? sql : undefined,
+        database,
+        kind,
+      });
+      onDone(true);
+    } catch (e) {
+      onDone(false, e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <div
+      className="mt-1.5 rounded border px-2 py-1.5 text-[11px]"
+      style={{ borderColor: "color-mix(in srgb, var(--ops-danger, #ef4444) 45%, var(--ops-border))", background: "color-mix(in srgb, var(--ops-danger, #ef4444) 8%, transparent)" }}
+    >
+      <div className="mb-1" style={{ color: "var(--ops-text)" }}>
+        写操作需确认（一次一刀）
+      </div>
+      <pre className="mb-1.5 max-h-16 overflow-auto whitespace-pre-wrap break-all font-mono text-[10px]" style={{ color: "var(--ops-muted)" }}>
+        {sql}
+      </pre>
+      <div className="flex gap-1.5">
+        <button type="button" className="ops-btn-ghost h-6 px-2 text-[11px]" disabled={busy} onClick={() => onDone(false)}>
+          取消
+        </button>
+        <button type="button" className="ops-btn-primary h-6 px-2 text-[11px]" style={{ background: "var(--ops-danger, #ef4444)" }} disabled={busy || !connectionId} onClick={() => void run()}>
+          {busy ? "…" : "执行"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
 /** C4:AI 设置(预设 Provider / Base URL / API Key / 模型 + 保存/测试),配置持久化在服务端 ~/.opsxdb/ai.json */
 export function AiSettings({ onClose }: { onClose: () => void }) {
   const notify = useWorkspaceStore((s) => s.notify);
@@ -326,8 +402,13 @@ export function AiPanel() {
   const result = useWorkspaceStore((s) => s.result);
   const set = useWorkspaceStore((s) => s.set);
   const pushAi = useWorkspaceStore((s) => s.pushAi);
+  const patchAiMessage = useWorkspaceStore((s) => s.patchAiMessage);
   const updateTabSqlIfUnchanged = useWorkspaceStore((s) => s.updateTabSqlIfUnchanged);
   const [showSettings, setShowSettings] = useState(false);
+  const [mcp, setMcp] = useState<McpStatus | null>(null);
+  const [mcpOpen, setMcpOpen] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+
   useEffect(() => {
     let alive = true;
     getAiConfig()
@@ -344,6 +425,25 @@ export function AiPanel() {
     };
   }, [set]);
 
+  useEffect(() => {
+    let alive = true;
+    const tick = () => {
+      getMcpStatus()
+        .then((st) => {
+          if (alive) setMcp(st);
+        })
+        .catch(() => {
+          if (alive) setMcp(null);
+        });
+    };
+    tick();
+    const id = window.setInterval(tick, 15000);
+    return () => {
+      alive = false;
+      window.clearInterval(id);
+    };
+  }, []);
+
   const conn = connections.find((c) => c.id === activeConnectionId);
   const tab = tabs.find((t) => t.id === activeTabId);
   const sql = tab?.sql ?? "";
@@ -352,6 +452,12 @@ export function AiPanel() {
 
   const setMode = (mode: AiChatMode) => set("aiMode", mode);
 
+  const stopAgent = () => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    set("aiBusy", false);
+  };
+
   const runAsk = async (action: AiAction, prompt?: string) => {
     const text = (prompt ?? ask).trim();
     if (busy || !conn || ((action === "ask" || action === "generate") && !text)) return;
@@ -388,21 +494,67 @@ export function AiPanel() {
     if (busy || !text) return;
     set("aiBusy", true);
     pushAi("user", text);
+    set("aiAsk", "");
+    const asstId = pushAi("assistant", "", [], { streaming: true });
+    const ac = new AbortController();
+    abortRef.current = ac;
     try {
-      const res = await callAiAgent({
-        prompt: text,
-        connectionId: conn?.id || undefined,
-        driver: conn?.driver,
-        database: database || undefined,
-        model: model && model !== "opsxdb-stub" ? model : undefined,
-      });
-      pushAi("assistant", res.content, res.steps || []);
-      if (res.sql && tab) updateTabSqlIfUnchanged(tab.id, sql, tab.connectionId, tab.database, res.sql);
-      set("aiAsk", "");
+      const res = await callAiAgentStream(
+        {
+          prompt: text,
+          connectionId: conn?.id || undefined,
+          driver: conn?.driver,
+          database: database || undefined,
+          model: model && model !== "opsxdb-stub" ? model : undefined,
+        },
+        {
+          onStepStart: (step) => {
+            patchAiMessage(asstId, (m) => ({
+              ...m,
+              steps: [...(m.steps || []).filter((s) => !s.pending), { ...step, pending: true, ok: false, summary: "执行中…", ms: 0 }],
+            }));
+          },
+          onStep: (step: AiAgentStepExt) => {
+            patchAiMessage(asstId, (m) => {
+              const withoutPending = (m.steps || []).filter((s) => !s.pending);
+              return { ...m, steps: [...withoutPending, step] };
+            });
+          },
+          onDelta: (delta) => {
+            patchAiMessage(asstId, (m) => ({ ...m, content: (m.content || "") + delta, streaming: true }));
+          },
+          onDone: (final) => {
+            patchAiMessage(asstId, {
+              content: final.content,
+              steps: final.steps || [],
+              streaming: false,
+            });
+            if (final.sql && tab) updateTabSqlIfUnchanged(tab.id, sql, tab.connectionId, tab.database, final.sql);
+          },
+          onError: (err, partial) => {
+            patchAiMessage(asstId, {
+              content: partial?.content || `失败：${err}`,
+              steps: (partial?.steps as AiAgentStepView[]) || [],
+              streaming: false,
+            });
+          },
+        },
+        ac.signal,
+      );
+      void res;
     } catch (e) {
-      pushAi("assistant", `失败：${e instanceof Error ? e.message : String(e)}`);
+      if ((e as Error)?.name === "AbortError") {
+        patchAiMessage(asstId, (m) => ({ ...m, content: m.content || "已停止", streaming: false }));
+      } else {
+        patchAiMessage(asstId, {
+          content: `失败：${e instanceof Error ? e.message : String(e)}`,
+          streaming: false,
+        });
+      }
     } finally {
+      abortRef.current = null;
       set("aiBusy", false);
+      patchAiMessage(asstId, (m) => ({ ...m, streaming: false }));
     }
   };
 
@@ -411,10 +563,34 @@ export function AiPanel() {
     else void runAsk(action);
   };
 
+  const pendingConfirm = (() => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const m = messages[i];
+      if (m.role !== "assistant" || !m.steps) continue;
+      const step = [...m.steps].reverse().find((s) => s.needConfirm && s.confirmSql);
+      if (step) return { messageId: m.id, step };
+    }
+    return null;
+  })();
+
   return (
     <aside className="ops-panel flex h-full w-full min-w-0 flex-col border-l">
       <div className="ops-section-label justify-between border-b gap-1">
-        <span>新对话</span>
+        <span className="inline-flex items-center gap-1.5">
+          新对话
+          {mcp?.active ? (
+            <button
+              type="button"
+              className="inline-flex items-center gap-1 rounded px-1 text-[10px]"
+              style={{ color: "var(--ops-muted)" }}
+              title={mcp.recent?.[mcp.recent.length - 1]?.summary || "外部 MCP 近期有调用"}
+              onClick={() => setMcpOpen(!mcpOpen)}
+            >
+              <span className="inline-block h-2 w-2 rounded-full" style={{ background: "var(--ops-success, #22c55e)" }} aria-hidden />
+              MCP
+            </button>
+          ) : null}
+        </span>
         <div className="flex items-center gap-1">
           <button
             type="button"
@@ -440,16 +616,34 @@ export function AiPanel() {
         </div>
       </div>
 
+      {mcpOpen && mcp?.active ? (
+        <div className="border-b px-2 py-1.5 text-[10px]" style={{ borderColor: "var(--ops-border-soft)", color: "var(--ops-muted)" }}>
+          <div className="mb-1 flex items-center justify-between">
+            <span>最近 MCP 调用</span>
+            <button type="button" className="hover:underline" style={{ color: "var(--ops-accent)" }} onClick={() => setMcpOpen(false)}>
+              关闭
+            </button>
+          </div>
+          <ul className="m-0 max-h-24 list-none space-y-0.5 overflow-auto p-0">
+            {(mcp.recent || []).slice(-8).reverse().map((e, i) => (
+              <li key={i}>
+                {e.tool?.replace(/^opsxdb_/, "")} · {e.ok ? "ok" : "fail"} · {e.summary || e.error || ""}
+              </li>
+            ))}
+          </ul>
+          <div className="mt-1" style={{ color: "var(--ops-muted)" }}>
+            断开请在 Cursor / 客户端停用 opsxdb-mcp；本面板仅展示审计。
+          </div>
+        </div>
+      ) : null}
+
       {showSettings && <AiSettings onClose={() => setShowSettings(false)} />}
 
       <div className="min-h-0 flex-1 space-y-1.5 overflow-auto p-1.5">
         {messages.length === 0 && (
-          <div
-            className="grid h-full place-items-center px-2 text-center text-[12px]"
-            style={{ color: "var(--ops-muted)" }}
-          >
+          <div className="grid h-full place-items-center px-2 text-center text-[12px]" style={{ color: "var(--ops-muted)" }}>
             {aiMode === "agent"
-              ? "Agent 会真查白名单里的库（只读）。试试：列出 demo 有哪些表"
+              ? "Agent 会真查白名单里的库。试试：列出 demo 有哪些表"
               : "聊聊你想查什么，我来写 SQL"}
           </div>
         )}
@@ -469,26 +663,64 @@ export function AiPanel() {
                   }
             }
           >
-            <div
-              className="mb-0.5 text-[10px]"
-              style={{ color: "var(--ops-muted)" }}
-            >
+            <div className="mb-0.5 text-[10px]" style={{ color: "var(--ops-muted)" }}>
               {m.role === "user" ? "你" : "AI"} · {m.at}
             </div>
-            <MessageContent content={m.content} />
+            <MessageContent content={m.content} streaming={m.streaming} />
             {m.role === "assistant" && m.steps && m.steps.length > 0 ? <AgentSteps steps={m.steps} /> : null}
+            {pendingConfirm && pendingConfirm.messageId === m.id && pendingConfirm.step.confirmSql ? (
+              <DangerConfirmBar
+                sql={pendingConfirm.step.confirmSql}
+                connectionId={conn?.id}
+                database={database || undefined}
+                kind={pendingConfirm.step.tool?.includes("redis") ? "redis" : "query"}
+                onDone={(ok, msg) => {
+                  if (ok) {
+                    patchAiMessage(m.id, (cur) => ({
+                      ...cur,
+                      steps: (cur.steps || []).map((s) =>
+                        s.needConfirm ? { ...s, needConfirm: false, ok: true, summary: "已确认执行" } : s,
+                      ),
+                      content: cur.content + (cur.content ? "\n" : "") + "（已确认执行写操作）",
+                    }));
+                    useWorkspaceStore.getState().notify({
+                      kind: "success",
+                      title: "已执行",
+                      message: "写操作已确认执行",
+                      mode: "toast",
+                      durationMs: 1400,
+                    });
+                  } else if (msg) {
+                    useWorkspaceStore.getState().notify({ kind: "error", title: "执行失败", message: msg, mode: "toast", durationMs: 2400 });
+                  } else {
+                    patchAiMessage(m.id, (cur) => ({
+                      ...cur,
+                      steps: (cur.steps || []).map((s) => (s.needConfirm ? { ...s, needConfirm: false, summary: "已取消" } : s)),
+                    }));
+                  }
+                }}
+              />
+            ) : null}
           </div>
         ))}
       </div>
 
       <div className="ops-ai-composer">
         <div className="ops-ai-mode" role="group" aria-label="Ask 或 Agent">
-          <button type="button" aria-pressed={aiMode === "ask"} className={aiMode === "ask" ? "ops-ai-mode-active" : undefined} onClick={() => setMode("ask")} disabled={busy}>Ask</button>
-          <button type="button" aria-pressed={aiMode === "agent"} className={aiMode === "agent" ? "ops-ai-mode-active" : undefined} onClick={() => setMode("agent")} disabled={busy}>Agent</button>
+          <button type="button" aria-pressed={aiMode === "ask"} className={aiMode === "ask" ? "ops-ai-mode-active" : undefined} onClick={() => setMode("ask")} disabled={busy}>
+            Ask
+          </button>
+          <button type="button" aria-pressed={aiMode === "agent"} className={aiMode === "agent" ? "ops-ai-mode-active" : undefined} onClick={() => setMode("agent")} disabled={busy}>
+            Agent
+          </button>
+        </div>
+        <div className="ops-ai-context" title="跟随 SQL 编辑器当前数据库">
+          {conn?.name || "未选择连接"} › {conn?.driver.toLowerCase() === "redis" ? `DB${database}` : database || "未选择数据库"}
+          {aiMode === "agent" ? (mcp?.writesEnabled ? " · 可写需确认" : " · 只读工具") : ""}
         </div>
-        <div className="ops-ai-context" title="跟随 SQL 编辑器当前数据库">{conn?.name || "未选择连接"} › {conn?.driver.toLowerCase() === "redis" ? `DB${database}` : database || "未选择数据库"}{aiMode === "agent" ? " · 只读工具" : ""}</div>
         <div className="flex gap-1">
-          <textarea rows={3}
+          <textarea
+            rows={3}
             className="ops-input min-w-0 flex-1 resize-none"
             placeholder={aiMode === "agent" ? "让 Agent 查库…例如：demo 有哪些表？users 前 5 行" : "描述你想查询什么…"}
             value={ask}
@@ -497,23 +729,37 @@ export function AiPanel() {
             onKeyDown={(e) => {
               if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
                 e.preventDefault();
-                send();
+                if (!busy) send();
               }
             }}
           />
-          <button type="button" className="ops-btn-primary" disabled={busy || (aiMode === "agent" && !ask.trim())} onClick={send}>
-            {busy ? "…" : "发送"}
-          </button>
+          {busy && aiMode === "agent" ? (
+            <button type="button" className="ops-btn-secondary" onClick={stopAgent}>
+              停止
+            </button>
+          ) : (
+            <button type="button" className="ops-btn-primary" disabled={busy || (aiMode === "agent" && !ask.trim())} onClick={send}>
+              {busy ? "…" : "发送"}
+            </button>
+          )}
         </div>
         {aiMode === "ask" ? (
           <div className="ops-ai-actions" role="group" aria-label="AI 操作">
-            {ACTIONS.map(a => <button type="button" key={a.id} aria-pressed={action === a.id}
-              className={action === a.id ? "ops-ai-action-active" : undefined}
-              onClick={() => setAction(a.id)}>{a.id === "generate" ? "生成 SQL" : a.label}</button>)}
+            {ACTIONS.map((a) => (
+              <button
+                type="button"
+                key={a.id}
+                aria-pressed={action === a.id}
+                className={action === a.id ? "ops-ai-action-active" : undefined}
+                onClick={() => setAction(a.id)}
+              >
+                {a.id === "generate" ? "生成 SQL" : a.label}
+              </button>
+            ))}
           </div>
         ) : (
           <div className="mt-1.5 text-[10px]" style={{ color: "var(--ops-muted)" }}>
-            Agent 经 aitools 只读查库（与 MCP 同源）；写操作一律拒绝。连接须在 ~/.opsxdb/mcp.json 白名单。
+            Agent 与 MCP 同源工具；默认只读。写操作需 mcp.json mode=read_write 且在气泡内确认。
           </div>
         )}
       </div>

src/api.ts

@@ -552,6 +552,149 @@ export async function callAiAgent(payload: {
   return post<AiAgentRes>("/api/ai/agent", payload);
 }
 
+export type AiAgentQueryResult = {
+  columns: string[];
+  rows: Record<string, unknown>[];
+  rowCount: number;
+  sql?: string;
+  tool?: string;
+};
+
+export type AiAgentStepExt = AiAgentStep & {
+  pending?: boolean;
+  needConfirm?: boolean;
+  confirmSql?: string;
+  result?: AiAgentQueryResult;
+};
+
+export type AiAgentStreamHandlers = {
+  onStepStart?: (step: AiAgentStepExt) => void;
+  onStep?: (step: AiAgentStepExt) => void;
+  onDelta?: (delta: string) => void;
+  onDone?: (res: AiAgentRes) => void;
+  onError?: (error: string, partial?: Partial<AiAgentRes>) => void;
+};
+
+/** Agent SSE（stream=true）；不可用时回落非流式。signal 供「停止」。 */
+export async function callAiAgentStream(
+  payload: {
+    prompt: string;
+    connectionId?: string;
+    driver?: string;
+    database?: string;
+    model?: string;
+  },
+  handlers: AiAgentStreamHandlers,
+  signal?: AbortSignal,
+): Promise<AiAgentRes> {
+  try {
+    const res = await fetch(`${API}/api/ai/agent`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "text/event-stream",
+        ...authHeaders(),
+      },
+      body: JSON.stringify({ ...payload, stream: true }),
+      signal,
+    });
+    if (!res.ok || !res.body || !(res.headers.get("content-type") || "").includes("text/event-stream")) {
+      const plain = await callAiAgent(payload);
+      handlers.onDone?.(plain);
+      return plain;
+    }
+    const reader = res.body.getReader();
+    const dec = new TextDecoder();
+    let buf = "";
+    let content = "";
+    const steps: AiAgentStep[] = [];
+    let rounds = 0;
+    let finalRes: AiAgentRes | null = null;
+
+    const handleEvent = (event: string, data: string) => {
+      let ev: Record<string, unknown>;
+      try {
+        ev = JSON.parse(data) as Record<string, unknown>;
+      } catch {
+        return;
+      }
+      const typ = event || String(ev.type || "");
+      if (typ === "step_start" && ev.step) {
+        handlers.onStepStart?.(ev.step as AiAgentStepExt);
+      } else if (typ === "step" && ev.step) {
+        const st = ev.step as AiAgentStepExt;
+        steps.push(st);
+        handlers.onStep?.(st);
+      } else if (typ === "delta") {
+        const d = String(ev.delta || "");
+        content += d;
+        handlers.onDelta?.(d);
+      } else if (typ === "done") {
+        finalRes = {
+          content: String(ev.content ?? content),
+          sql: ev.sql ? String(ev.sql) : undefined,
+          steps: (ev.steps as AiAgentStep[]) || steps,
+          rounds: Number(ev.rounds ?? rounds) || 0,
+        };
+        rounds = finalRes.rounds;
+        handlers.onDone?.(finalRes);
+      } else if (typ === "error") {
+        handlers.onError?.(String(ev.error || "agent error"), { content, steps, rounds: Number(ev.rounds) || 0 });
+      }
+    };
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buf += dec.decode(value, { stream: true });
+      let idx: number;
+      while ((idx = buf.indexOf("\n\n")) >= 0) {
+        const chunk = buf.slice(0, idx);
+        buf = buf.slice(idx + 2);
+        let event = "";
+        let data = "";
+        for (const line of chunk.split("\n")) {
+          if (line.startsWith("event:")) event = line.slice(6).trim();
+          else if (line.startsWith("data:")) data += (data ? "\n" : "") + line.slice(5).trim();
+        }
+        if (data) handleEvent(event, data);
+      }
+    }
+    if (finalRes) return finalRes;
+    const fallback: AiAgentRes = { content, steps, rounds };
+    handlers.onDone?.(fallback);
+    return fallback;
+  } catch (e) {
+    if (signal?.aborted) throw e;
+    const plain = await callAiAgent(payload);
+    handlers.onDone?.(plain);
+    return plain;
+  }
+}
+
+export type McpStatus = {
+  configured: boolean;
+  mode: string;
+  whitelistCount: number;
+  writesEnabled: boolean;
+  active: boolean;
+  recent?: { time: string; tool: string; ok: boolean; summary?: string; error?: string; source?: string }[];
+};
+
+export async function getMcpStatus(signal?: AbortSignal) {
+  return get<McpStatus>("/api/ai/mcp-status", signal);
+}
+
+export async function confirmAiAgentWrite(payload: {
+  connectionId: string;
+  sql?: string;
+  command?: string;
+  database?: string;
+  kind?: "query" | "redis";
+}) {
+  return post<Record<string, unknown>>("/api/ai/agent/confirm", payload);
+}
+
 /** C4:AI 配置(key 脱敏,只回掩码与是否已配置);protocol/authStyle/allowInsecureHttp 见 aiPresets.ts */
 export type AiConfig = {
   provider: string;

src/store.ts

@@ -189,6 +189,14 @@ export type ConfirmRequest = {
   items?: string[];
 };
 
+export type AiAgentQueryResultView = {
+  columns: string[];
+  rows: Record<string, unknown>[];
+  rowCount: number;
+  sql?: string;
+  tool?: string;
+};
+
 export type AiAgentStepView = {
   tool: string;
   args?: string;
@@ -196,6 +204,10 @@ export type AiAgentStepView = {
   summary: string;
   error?: string;
   ms: number;
+  pending?: boolean;
+  needConfirm?: boolean;
+  confirmSql?: string;
+  result?: AiAgentQueryResultView;
 };
 
 export type AiMessage = {
@@ -205,6 +217,7 @@ export type AiMessage = {
   at: string;
   /** Agent 工具步骤时间线（仅 assistant） */
   steps?: AiAgentStepView[];
+  streaming?: boolean;
 };
 
 export type AiChatMode = "ask" | "agent";
@@ -320,11 +333,14 @@ type State = {
   updateActiveSql: (sql: string) => void;
   /** AI 异步返回只写入原标签；用户编辑或切库后跳过。 */
   updateTabSqlIfUnchanged: (id: string, originalSql: string, connectionId: string | undefined, database: string | undefined, sql: string) => boolean;
-  pushAi: (role: AiMessage["role"], content: string, steps?: AiAgentStepView[]) => void;
+  pushAi: (role: AiMessage["role"], content: string, steps?: AiAgentStepView[], extra?: Partial<AiMessage>) => string;
+  patchAiMessage: (id: string, patch: Partial<AiMessage> | ((m: AiMessage) => AiMessage)) => void;
   setSession: (connectionId: string, sessionId: string | null) => void;
   pushHistory: (item: Omit<QueryHistoryItem, "id" | "at"> & { at?: number }) => void;
   clearHistory: () => void;
   setResultSets: (items: ResultSetItem[]) => void;
+  /** AI「在结果区打开」：新开/切换结果页，不改 SQL Tab、不抢编辑器 focus */
+  openAiResultSet: (label: string, sql: string, result: QueryResult) => void;
   selectResultSet: (id: string) => void;
   /** C5/G3:局部更新某个结果集(翻页结果、视图持久化);若为激活项同步 result */
   updateResultSet: (id: string, patch: Partial<Omit<ResultSetItem, "id">>) => void;
@@ -894,14 +910,33 @@ export const useWorkspaceStore = create<State>((set, get) => ({
     return true;
   },
 
-  pushAi: (role, content, steps) =>
+  pushAi: (role, content, steps, extra) => {
+    const id = crypto.randomUUID();
     set((s) => ({
       aiMessages: [
         ...s.aiMessages,
-        { id: crypto.randomUUID(), role, content, at: new Date().toLocaleTimeString(), steps },
+        {
+          id,
+          role,
+          content,
+          at: new Date().toLocaleTimeString(),
+          steps,
+          ...extra,
+        },
       ],
+    }));
+    return id;
+  },
+
+  patchAiMessage: (id, patch) =>
+    set((s) => ({
+      aiMessages: s.aiMessages.map((m) => {
+        if (m.id !== id) return m;
+        return typeof patch === "function" ? patch(m) : { ...m, ...patch };
+      }),
     })),
 
+
   setSession: (connectionId, sessionId) => {
     const sessions = { ...get().sessions };
     if (sessionId) sessions[connectionId] = sessionId;
@@ -942,6 +977,18 @@ export const useWorkspaceStore = create<State>((set, get) => ({
       resultTab: "data",
     });
   },
+  openAiResultSet: (label, sql, result) => {
+    const id = crypto.randomUUID();
+    const item: ResultSetItem = { id, label: label || "AI 结果", sql: sql || "", result };
+    const prev = get().resultSets.filter((x) => x.id !== id);
+    set({
+      resultSets: [item, ...prev].slice(0, 30),
+      activeResultSetId: id,
+      result,
+      resultTab: "data",
+    });
+  },
+
 
   selectResultSet: (id) => {
     const item = get().resultSets.find((x) => x.id === id);

src/styles.css

@@ -702,3 +702,9 @@
 .ops-ai-mode .ops-ai-mode-active { color: var(--ops-accent); background: var(--ops-accent-soft); font-weight: 600; }
 .ops-ai-steps { font-variant-numeric: tabular-nums; }
 
+
+/* Agent 流式光标 / 步骤 spinner */
+.ops-ai-cursor { display: inline-block; margin-left: 1px; animation: ops-ai-blink 1s step-end infinite; color: var(--ops-accent); }
+@keyframes ops-ai-blink { 50% { opacity: 0; } }
+.ops-ai-step-spin { animation: ops-ai-pulse 0.9s ease-in-out infinite; }
+@keyframes ops-ai-pulse { 50% { opacity: 0.35; transform: scale(0.85); } }