feat(persona-agent): 光湖人格 Agent v0.1.0 — Grok Build 架构拆解+Git驱动人格体

核心架构（拆解自 xAI Grok Build 开源 Rust crate）：
- PersonaAgent: Agent = Definition + ToolBridge + PromptContext（映射自 xai-grok-agent）
- 7个内置工具: read/create/update/delete/search/list/history（直接操作 Git 引擎）
- LLM 调用层: 可插拔 OpenAI-compatible API（支持 tool calling）
- 离线模式: 无 API Key 时降级为本地响应

API 端点：
- POST /api/agent/chat — Agent 对话（支持工具调用链）
- GET  /api/agent/status — Agent 状态
- GET  /api/agent/conversation — 对话历史
- POST /api/agent/clear — 清空对话

前端：
- AgentChat 组件: 对话气泡+工具调用展示+欢迎建议
- 三栏布局: 文档树 | 编辑器 | Agent 面板（可收起）

设计原则：
- Agent 是活的人格体，不是孤立的功能模块
- Agent 直接操作 Git（知识库引擎 = 人格体记忆空间）
- 所有 Git 依赖模块由人格体驱动
- 不搬 Rust 代码，拆设计模式用 TypeScript 重新实现

product-source/guanghu-knowledge-base/src/App.tsx

@@ -4,6 +4,7 @@ import { DocTree } from './components/DocTree';
 import { Editor } from './components/Editor';
 import { SearchBar } from './components/SearchBar';
 import { VersionHistory } from './components/VersionHistory';
+import AgentChat from './components/AgentChat';
 
 type View = 'editor' | 'history';
 
@@ -15,6 +16,7 @@ export default function App() {
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [agentPanelOpen, setAgentPanelOpen] = useState(true);
 
   const refreshTree = useCallback(async () => {
     try {
@@ -123,6 +125,13 @@ export default function App() {
               </button>
             </>
           )}
+          <button
+            className={`kb-btn-tab kb-btn-agent ${agentPanelOpen ? 'active' : ''}`}
+            onClick={() => setAgentPanelOpen(!agentPanelOpen)}
+            title={agentPanelOpen ? '收起 Agent' : '展开 Agent'}
+          >
+            🌊 Agent
+          </button>
         </div>
       </header>
 
@@ -168,6 +177,13 @@ export default function App() {
             <VersionHistory docPath={currentPath} />
           )}
         </main>
+
+        {/* Agent 面板 */}
+        {agentPanelOpen && (
+          <aside className="kb-agent-panel">
+            <AgentChat apiBase="" onDocSelect={openDoc} />
+          </aside>
+        )}
       </div>
     </div>
   );

product-source/guanghu-knowledge-base/src/components/AgentChat.tsx

@@ -0,0 +1,251 @@
+/**
+ * AgentChat — 人格体对话组件
+ *
+ * 与光湖人格体对话，Agent 直接操作 Git 引擎管理知识库。
+ * 支持：对话、工具调用展示、对话历史、清空对话。
+ */
+
+import { useState, useRef, useEffect } from 'react';
+import { marked } from 'marked';
+
+interface Message {
+  role: 'user' | 'assistant' | 'tool' | 'system';
+  content: string;
+  toolCalls?: Array<{ id: string; name: string; arguments: Record<string, unknown> }>;
+  toolResults?: Array<{ id: string; name: string; output: string; error?: string }>;
+  timestamp: string;
+}
+
+interface AgentStatus {
+  name: string;
+  role: string;
+  model: string;
+  conversationLength: number;
+}
+
+interface Props {
+  apiBase: string;
+  onDocSelect?: (path: string) => void;
+}
+
+export default function AgentChat({ apiBase, onDocSelect }: Props) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [sending, setSending] = useState(false);
+  const [status, setStatus] = useState<AgentStatus | null>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    fetchStatus();
+  }, []);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  async function fetchStatus() {
+    try {
+      const res = await fetch(`${apiBase}/api/agent/status`);
+      const data = await res.json();
+      if (data.ok) {
+        setStatus({
+          name: data.persona.name,
+          role: data.persona.role,
+          model: data.persona.model,
+          conversationLength: data.conversationLength,
+        });
+      }
+    } catch {}
+  }
+
+  async function sendMessage() {
+    const text = input.trim();
+    if (!text || sending) return;
+
+    setInput('');
+    setSending(true);
+
+    // 本地先显示用户消息
+    const userMsg: Message = {
+      role: 'user',
+      content: text,
+      timestamp: new Date().toISOString(),
+    };
+    setMessages(prev => [...prev, userMsg]);
+
+    try {
+      const res = await fetch(`${apiBase}/api/agent/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: text }),
+      });
+      const data = await res.json();
+
+      if (data.ok) {
+        const assistantMsg: Message = {
+          role: 'assistant',
+          content: data.reply,
+          timestamp: new Date().toISOString(),
+        };
+        setMessages(prev => [...prev, assistantMsg]);
+        fetchStatus(); // 刷新状态
+      } else {
+        setMessages(prev => [
+          ...prev,
+          { role: 'assistant', content: `错误: ${data.error}`, timestamp: new Date().toISOString() },
+        ]);
+      }
+    } catch (err: any) {
+      setMessages(prev => [
+        ...prev,
+        { role: 'assistant', content: `网络错误: ${err.message}`, timestamp: new Date().toISOString() },
+      ]);
+    } finally {
+      setSending(false);
+      inputRef.current?.focus();
+    }
+  }
+
+  async function clearConversation() {
+    try {
+      await fetch(`${apiBase}/api/agent/clear`, { method: 'POST' });
+      setMessages([]);
+      fetchStatus();
+    } catch {}
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  }
+
+  return (
+    <div className="agent-chat">
+      {/* 头部状态栏 */}
+      <div className="agent-header">
+        <div className="agent-info">
+          <div className="agent-avatar">🌊</div>
+          <div className="agent-meta">
+            <h3>{status?.name || '光湖人格体'}</h3>
+            <span className="agent-role">{status?.role || '知识库管理者'}</span>
+          </div>
+        </div>
+        <div className="agent-actions">
+          <span className="agent-model">{status?.model || 'offline'}</span>
+          <button className="btn-clear" onClick={clearConversation} title="清空对话">
+            ✕
+          </button>
+        </div>
+      </div>
+
+      {/* 对话区域 */}
+      <div className="agent-messages">
+        {messages.length === 0 && (
+          <div className="agent-welcome">
+            <div className="welcome-icon">🌊</div>
+            <h2>光湖人格体</h2>
+            <p>我是知识库的 AI Agent，可以直接操作 Git 引擎管理你的文档。</p>
+            <p className="welcome-hint">试试说：</p>
+            <div className="welcome-suggestions">
+              <button onClick={() => { setInput('帮我列出所有文档'); inputRef.current?.focus(); }}>
+                📋 列出所有文档
+              </button>
+              <button onClick={() => { setInput('搜索关于协议的内容'); inputRef.current?.focus(); }}>
+                🔍 搜索关于协议的内容
+              </button>
+              <button onClick={() => { setInput('创建一篇新的学习笔记'); inputRef.current?.focus(); }}>
+                ✏️ 创建学习笔记
+              </button>
+            </div>
+          </div>
+        )}
+
+        {messages.map((msg, i) => (
+          <div key={i} className={`msg msg-${msg.role}`}>
+            {msg.role === 'user' ? (
+              <div className="msg-bubble msg-user-bubble">
+                <p>{msg.content}</p>
+              </div>
+            ) : (
+              <div className="msg-bubble msg-assistant-bubble">
+                <div className="msg-avatar">🌊</div>
+                <div className="msg-content">
+                  {msg.toolCalls && msg.toolCalls.length > 0 && (
+                    <div className="tool-calls">
+                      {msg.toolCalls.map((tc, j) => (
+                        <div key={j} className="tool-call">
+                          <span className="tool-icon">⚙️</span>
+                          <span className="tool-name">{tc.name}</span>
+                          <code className="tool-args">{JSON.stringify(tc.arguments)}</code>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {msg.toolResults && msg.toolResults.length > 0 && (
+                    <div className="tool-results">
+                      {msg.toolResults.map((tr, j) => (
+                        <div key={j} className={`tool-result ${tr.error ? 'tool-error' : ''}`}>
+                          <span className="tool-icon">{tr.error ? '❌' : '✅'}</span>
+                          <pre>{tr.error || tr.output}</pre>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  <div
+                    className="msg-markdown"
+                    dangerouslySetInnerHTML={{
+                      __html: marked.parse(msg.content, { async: false }) as string,
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+
+        {sending && (
+          <div className="msg msg-assistant">
+            <div className="msg-bubble msg-assistant-bubble">
+              <div className="msg-avatar">🌊</div>
+              <div className="msg-content typing">
+                <span className="dot" />
+                <span className="dot" />
+                <span className="dot" />
+              </div>
+            </div>
+          </div>
+        )}
+        <div ref={bottomRef} />
+      </div>
+
+      {/* 输入区 */}
+      <div className="agent-input-area">
+        <div className="agent-input-wrapper">
+          <textarea
+            ref={inputRef}
+            className="agent-input"
+            placeholder="和人格体对话…"
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            rows={1}
+            disabled={sending}
+          />
+          <button
+            className="btn-send"
+            onClick={sendMessage}
+            disabled={sending || !input.trim()}
+          >
+            {sending ? '⏳' : '↑'}
+          </button>
+        </div>
+        <div className="agent-hint">
+          Enter 发送 · Shift+Enter 换行 · Agent 可直接操作知识库
+        </div>
+      </div>
+    </div>
+  );
+}

product-source/guanghu-knowledge-base/src/styles/app.css

@@ -744,3 +744,441 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: var(--kb-text-muted);
 }
+
+/* ═══════════════════════════════════════════════
+   Agent 面板
+   ═══════════════════════════════════════════════ */
+
+.kb-btn-agent {
+  margin-left: 8px;
+  background: linear-gradient(135deg, #1a5f7a 0%, #0d3b66 100%);
+  border: 1px solid rgba(88, 166, 255, 0.3);
+}
+
+.kb-btn-agent.active {
+  background: linear-gradient(135deg, #2980b9 0%, #1a5f7a 100%);
+  border-color: var(--kb-accent);
+  box-shadow: 0 0 12px rgba(88, 166, 255, 0.2);
+}
+
+.kb-agent-panel {
+  width: 380px;
+  min-width: 320px;
+  max-width: 480px;
+  border-left: 1px solid var(--kb-border);
+  background: var(--kb-bg);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+/* ─── AgentChat 内部布局 ─── */
+
+.agent-chat {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.agent-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--kb-border);
+  background: var(--kb-bg-secondary);
+}
+
+.agent-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.agent-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #1a5f7a 0%, #0d3b66 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+}
+
+.agent-meta h3 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--kb-text);
+  line-height: 1.3;
+}
+
+.agent-role {
+  font-size: 11px;
+  color: var(--kb-text-muted);
+  display: block;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.agent-model {
+  font-size: 11px;
+  color: var(--kb-text-muted);
+  padding: 2px 8px;
+  background: var(--kb-bg-tertiary);
+  border-radius: var(--kb-radius);
+  font-family: var(--kb-font-mono);
+}
+
+.btn-clear {
+  background: none;
+  border: none;
+  color: var(--kb-text-muted);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--kb-radius);
+  font-size: 14px;
+  transition: all 0.15s;
+}
+
+.btn-clear:hover {
+  background: var(--kb-bg-tertiary);
+  color: var(--kb-danger);
+}
+
+/* ─── 对话区域 ─── */
+
+.agent-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.agent-welcome {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.welcome-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
+}
+
+.agent-welcome h2 {
+  font-size: 18px;
+  color: var(--kb-text);
+  margin-bottom: 8px;
+}
+
+.agent-welcome p {
+  color: var(--kb-text-muted);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.welcome-hint {
+  margin-top: 16px !important;
+  font-size: 12px !important;
+}
+
+.welcome-suggestions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.welcome-suggestions button {
+  background: var(--kb-bg-secondary);
+  border: 1px solid var(--kb-border);
+  color: var(--kb-text);
+  padding: 10px 14px;
+  border-radius: var(--kb-radius);
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.15s;
+}
+
+.welcome-suggestions button:hover {
+  background: var(--kb-bg-tertiary);
+  border-color: var(--kb-accent);
+}
+
+/* ─── 消息气泡 ─── */
+
+.msg-user-bubble {
+  margin-left: auto;
+  max-width: 85%;
+  background: linear-gradient(135deg, #1a5f7a 0%, #0d4a6b 100%);
+  border-radius: 16px 16px 4px 16px;
+  padding: 10px 14px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.msg-user-bubble p {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.msg-assistant-bubble {
+  display: flex;
+  gap: 8px;
+  max-width: 90%;
+}
+
+.msg-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--kb-bg-tertiary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.msg-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.msg-markdown {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--kb-text);
+}
+
+.msg-markdown p {
+  margin-bottom: 8px;
+}
+
+.msg-markdown p:last-child {
+  margin-bottom: 0;
+}
+
+.msg-markdown code {
+  background: var(--kb-bg-tertiary);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: var(--kb-font-mono);
+}
+
+.msg-markdown pre {
+  background: var(--kb-bg-secondary);
+  border: 1px solid var(--kb-border);
+  padding: 10px 12px;
+  border-radius: var(--kb-radius);
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+.msg-markdown pre code {
+  background: none;
+  padding: 0;
+}
+
+.msg-markdown ul,
+.msg-markdown ol {
+  padding-left: 20px;
+  margin-bottom: 8px;
+}
+
+.msg-markdown li {
+  margin-bottom: 4px;
+}
+
+.msg-markdown a {
+  color: var(--kb-accent);
+  text-decoration: none;
+}
+
+.msg-markdown a:hover {
+  text-decoration: underline;
+}
+
+/* ─── 工具调用展示 ─── */
+
+.tool-calls,
+.tool-results {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.tool-call,
+.tool-result {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 4px 8px;
+  background: var(--kb-bg-tertiary);
+  border-radius: 4px;
+  font-size: 11px;
+}
+
+.tool-icon {
+  flex-shrink: 0;
+}
+
+.tool-name {
+  font-weight: 600;
+  color: var(--kb-accent);
+}
+
+.tool-args {
+  color: var(--kb-text-muted);
+  font-size: 10px;
+  word-break: break-all;
+}
+
+.tool-result pre {
+  font-size: 10px;
+  color: var(--kb-text-muted);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 120px;
+  overflow-y: auto;
+  font-family: var(--kb-font-mono);
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+}
+
+.tool-result.tool-error pre {
+  color: var(--kb-danger);
+}
+
+/* ─── 输入区 ─── */
+
+.agent-input-area {
+  padding: 12px 16px 16px;
+  border-top: 1px solid var(--kb-border);
+  background: var(--kb-bg-secondary);
+}
+
+.agent-input-wrapper {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  background: var(--kb-bg);
+  border: 1px solid var(--kb-border);
+  border-radius: 12px;
+  padding: 8px 12px;
+  transition: border-color 0.15s;
+}
+
+.agent-input-wrapper:focus-within {
+  border-color: var(--kb-accent);
+}
+
+.agent-input {
+  flex: 1;
+  background: none;
+  border: none;
+  color: var(--kb-text);
+  font-size: 13px;
+  font-family: var(--kb-font-sans);
+  resize: none;
+  outline: none;
+  min-height: 20px;
+  max-height: 120px;
+  line-height: 1.5;
+}
+
+.agent-input::placeholder {
+  color: var(--kb-text-muted);
+}
+
+.btn-send {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: var(--kb-accent);
+  border: none;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+
+.btn-send:hover:not(:disabled) {
+  background: var(--kb-accent-hover);
+}
+
+.btn-send:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.agent-hint {
+  margin-top: 6px;
+  font-size: 10px;
+  color: var(--kb-text-muted);
+  text-align: center;
+}
+
+/* ─── 加载动画 ─── */
+
+.typing {
+  display: flex;
+  gap: 4px;
+  padding: 8px 0;
+}
+
+.typing .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--kb-text-muted);
+  animation: typing 1.2s infinite;
+}
+
+.typing .dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing .dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing {
+  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
+  30% { opacity: 1; transform: translateY(-4px); }
+}
+
+/* ─── 响应式 ─── */
+
+@media (max-width: 900px) {
+  .kb-agent-panel {
+    width: 100%;
+    max-width: none;
+    border-left: none;
+    border-top: 1px solid var(--kb-border);
+  }
+  
+  .kb-body {
+    flex-direction: column;
+  }
+}