From 2bee467f1abbdf4ea6b6798e1463d18840f097e9 Mon Sep 17 00:00:00 2001
From: yibo <bboonnee@gmail.com>
Date: Tue, 1 Sep 2026 13:03:30 +0800
Subject: [PATCH] feat(graph-console): 底部聊天条联动 CEO agent，自动带上当前 task/goal 上下文

---
 web/src/components/GraphChatBar.vue | 309 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/views/GraphConsole.vue      |  16 ++++++++++++++++
 2 files changed, 325 insertions(+), 0 deletions(-)
 create mode 100644 web/src/components/GraphChatBar.vue

diff --git a/web/src/components/GraphChatBar.vue b/web/src/components/GraphChatBar.vue
new file mode 100644
index 0000000..840d2f9
--- /dev/null
+++ b/web/src/components/GraphChatBar.vue
@@ -0,0 +1,309 @@
+<template>
+  <div class="chat-bar" :class="{ expanded }">
+    <div class="bar-row" @click="!expanded && (expanded = true)">
+      <span class="bar-avatar">🤖</span>
+      <span class="bar-name">{{ agentId }}</span>
+      <span v-if="context" class="context-chip" :title="contextTooltip">🔗 {{ contextLabel }}</span>
+      <div class="bar-input" @click.stop>
+        <textarea
+          ref="inputRef"
+          v-model="inputText"
+          :disabled="sending"
+          placeholder="跟 CEO 聊两句…"
+          class="msg-textarea"
+          rows="1"
+          @keydown="handleKeydown"
+          @input="autoResize"
+          @focus="expanded = true"
+        ></textarea>
+        <button v-if="sending" class="send-btn stop-btn" title="停止" @click="handleStop">⏹</button>
+        <button v-else class="send-btn" :class="{ ready: inputText.trim() && !sending }" :disabled="!inputText.trim()" @click="handleSend">➤</button>
+      </div>
+      <button class="collapse-btn" :title="expanded ? '收起' : '展开'" @click.stop="expanded = !expanded">{{ expanded ? '▾' : '▴' }}</button>
+    </div>
+
+    <div v-if="expanded" class="panel">
+      <div class="message-list" ref="messageListRef">
+        <div v-if="messages.length === 0 && !streaming" class="empty-chat">跟 CEO 聊两句吧，选中的任务/目标会自动带给它。</div>
+        <div v-for="(msg, idx) in messages" :key="idx" class="msg-row" :class="`msg-${msg.role}`">
+          <div class="msg-avatar" :class="`avatar-${msg.role}`">{{ msg.role === 'user' ? '👤' : '🤖' }}</div>
+          <div class="msg-body">
+            <div class="msg-content" v-html="renderMarkdown(msg.content)"></div>
+          </div>
+        </div>
+        <div v-if="streaming" class="msg-row msg-assistant streaming">
+          <div class="msg-avatar avatar-assistant">🤖</div>
+          <div class="msg-body">
+            <div class="msg-content" v-html="renderMarkdown(streamContent)"></div>
+            <span class="typing-indicator"><span></span><span></span><span></span></span>
+          </div>
+        </div>
+        <div v-if="sending && thinkingText" class="thinking-row">
+          <div class="thinking-pulse"></div>
+          <span class="thinking-text">{{ thinkingText }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, watch, onMounted } from 'vue'
+import { marked } from 'marked'
+
+const props = defineProps({
+  companyId: { type: String, required: true },
+  agentId: { type: String, default: 'ceo' },
+  context: { type: Object, default: null }, // { taskId, taskTitle, taskStatus, goalId, goalTitle }
+})
+
+const expanded = ref(false)
+const activeConvId = ref('')
+const CONV_KEY = `lemonboss.graphChatBar.conv.${props.companyId}`
+
+const messages = ref([])
+const inputText = ref('')
+const sending = ref(false)
+const streaming = ref(false)
+const streamContent = ref('')
+const thinkingText = ref('')
+const messageListRef = ref(null)
+const inputRef = ref(null)
+
+const lastSentContextKey = ref('')
+
+const contextLabel = computed(() => {
+  const c = props.context
+  if (!c) return ''
+  return `${c.taskTitle || c.taskId}`
+})
+const contextTooltip = computed(() => {
+  const c = props.context
+  if (!c) return ''
+  return `任务 ${c.taskId}《${c.taskTitle}》(${c.taskStatus}) · 目标 ${c.goalId}《${c.goalTitle}》`
+})
+
+function contextKey(c) {
+  if (!c) return ''
+  return `${c.taskId || ''}|${c.goalId || ''}`
+}
+
+function renderMarkdown(text) {
+  try { return marked.parse(text || '', { breaks: true, gfm: true }) }
+  catch { return (text || '').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>') }
+}
+
+async function hydrateHistory() {
+  if (!activeConvId.value) return
+  try {
+    const r = await fetch(`/api/agent/${props.agentId}/conversations/${activeConvId.value}`)
+    if (!r.ok) return
+    const j = await r.json()
+    messages.value = (j.messages || []).map(m => ({ role: m.role, content: m.content, timestamp: m.timestamp }))
+  } catch (e) { /* 历史拉取失败不影响继续新对话 */ }
+}
+
+onMounted(() => {
+  activeConvId.value = localStorage.getItem(CONV_KEY) || ''
+  hydrateHistory()
+})
+
+async function handleSend() {
+  const text = inputText.value.trim()
+  if (!text || sending.value) return
+
+  const key = contextKey(props.context)
+  let payload = text
+  if (props.context && key !== lastSentContextKey.value) {
+    payload = `[当前上下文] 任务 ${props.context.taskId}《${props.context.taskTitle}》(状态: ${props.context.taskStatus}) · 目标 ${props.context.goalId}《${props.context.goalTitle}》\n\n${text}`
+    lastSentContextKey.value = key
+  }
+
+  messages.value.push({ role: 'user', content: text, timestamp: new Date().toISOString() })
+  inputText.value = ''
+  if (inputRef.value) inputRef.value.style.height = 'auto'
+
+  sending.value = true
+  streaming.value = false
+  streamContent.value = ''
+  thinkingText.value = '🤖 思考中...'
+  scrollToBottom()
+
+  try {
+    const r = await fetch(`/api/agent/${props.agentId}/chat`, {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message: payload, conversationId: activeConvId.value }),
+    })
+    if (!r.ok) {
+      const errBody = await r.json().catch(() => ({}))
+      messages.value.push({ role: 'assistant', content: `❌ 错误 (${r.status}): ${errBody.error || r.statusText}` })
+      return
+    }
+    const reader = r.body.getReader()
+    const decoder = new TextDecoder()
+    let buffer = '', lastEventType = ''
+
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      buffer += decoder.decode(value, { stream: true })
+      const lines = buffer.split('\n')
+      buffer = lines.pop() || ''
+      for (const line of lines) {
+        if (line.startsWith('event: ')) lastEventType = line.slice(7)
+        else if (line.startsWith('data: ')) {
+          try { handleEvent(lastEventType, JSON.parse(line.slice(6))) } catch {}
+        }
+      }
+    }
+
+    if (streamContent.value) {
+      messages.value.push({ role: 'assistant', content: streamContent.value, timestamp: new Date().toISOString() })
+    }
+  } catch (err) {
+    messages.value.push({ role: 'assistant', content: `❌ 错误: ${err.message}` })
+  } finally {
+    sending.value = false; streaming.value = false; streamContent.value = ''; thinkingText.value = ''
+  }
+}
+
+function handleEvent(type, data) {
+  if (type === 'session' && data.conversationId && !activeConvId.value) {
+    activeConvId.value = data.conversationId
+    localStorage.setItem(CONV_KEY, activeConvId.value)
+  }
+  if (type === 'thinking') {
+    thinkingText.value = data.message || '思考中...'
+  }
+  if (type === 'queued') {
+    const waitSec = Math.round((data.waitBudgetMs || 0) / 1000)
+    thinkingText.value = `⏳ 排队等待中，最多等待 ${waitSec} 秒`
+  }
+  if (type === 'queue_timeout') {
+    messages.value.push({ role: 'assistant', content: `⏳ ${data.error || 'Agent 排队等待超时，请稍后重试'}` })
+  }
+  if (type === 'agent_output') {
+    streaming.value = true
+    streamContent.value += (data.message || '')
+    scrollToBottom()
+  }
+  if (type === 'tool_call') {
+    thinkingText.value = data.message || `🔧 ${data.tool}`
+  }
+  if (type === 'error') {
+    messages.value.push({ role: 'assistant', content: `❌ ${data.message}` })
+  }
+}
+
+async function handleStop() {
+  if (!activeConvId.value) return
+  try { await fetch(`/api/agent/${props.agentId}/chat/${activeConvId.value}/stop`, { method: 'POST' }) } catch (e) {}
+  sending.value = false; streaming.value = false
+  messages.value.push({ role: 'assistant', content: `*[已终止]*` })
+  scrollToBottom()
+}
+
+function handleKeydown(e) {
+  if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+    e.preventDefault(); handleSend()
+  }
+}
+
+function autoResize() {
+  const el = inputRef.value; if (!el) return
+  el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, 80) + 'px'
+}
+
+function scrollToBottom() {
+  nextTick(() => {
+    if (messageListRef.value) messageListRef.value.scrollTop = messageListRef.value.scrollHeight
+  })
+}
+
+watch([messages, streamContent, thinkingText], () => scrollToBottom(), { deep: true })
+</script>
+
+<style scoped>
+.chat-bar {
+  flex-shrink: 0;
+  border-top: 1px solid var(--border-primary, #e5e5e5);
+  background: var(--bg-secondary, #fafafa);
+  display: flex;
+  flex-direction: column;
+}
+
+.bar-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  cursor: pointer;
+}
+.bar-avatar { font-size: 16px; }
+.bar-name { font-size: 12px; font-weight: 700; color: var(--text-secondary, #555); text-transform: uppercase; }
+.context-chip {
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: var(--accent-soft, #e6f7f0);
+  color: var(--accent, #10b981);
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bar-input { flex: 1; display: flex; gap: 8px; align-items: flex-end; }
+.msg-textarea {
+  flex: 1;
+  border: 1px solid var(--border-primary, #ddd);
+  outline: none;
+  background: var(--bg-input, #fff);
+  color: var(--text-primary, #111);
+  font-size: 13px;
+  line-height: 1.5;
+  resize: none;
+  padding: 6px 10px;
+  border-radius: 8px;
+  max-height: 80px;
+}
+.msg-textarea:focus { border-color: var(--accent, #10b981); }
+.send-btn {
+  width: 32px; height: 32px; border-radius: 8px; border: none; font-size: 14px;
+  cursor: pointer; flex-shrink: 0; background: var(--bg-input, #eee); color: var(--text-muted, #999);
+}
+.send-btn.ready { background: var(--accent, #10b981); color: #fff; }
+.collapse-btn {
+  border: none; background: none; cursor: pointer; font-size: 12px; color: var(--text-muted, #999);
+  flex-shrink: 0;
+}
+
+.panel {
+  border-top: 1px solid var(--border-primary, #eee);
+  max-height: 45vh;
+  display: flex;
+  flex-direction: column;
+}
+.message-list { overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
+.empty-chat { text-align: center; color: var(--text-muted, #999); font-size: 12px; padding: 12px 0; }
+
+.msg-row { display: flex; gap: 8px; max-width: 80%; }
+.msg-user { align-self: flex-end; flex-direction: row-reverse; }
+.msg-assistant { align-self: flex-start; }
+.msg-avatar { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
+.avatar-user { background: var(--avatar-user-bg, #dbeafe); }
+.avatar-assistant { background: var(--avatar-assistant-bg, #d1fae5); }
+.msg-body { flex: 1; min-width: 0; }
+.msg-content { padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
+.msg-user .msg-content { background: var(--msg-user-bg, #eff6ff); border: 1px solid var(--msg-user-border, #dbeafe); color: var(--text-primary, #111); }
+.msg-assistant .msg-content { background: var(--msg-assistant-bg, #f0fdf4); border: 1px solid var(--msg-assistant-border, #d1fae5); color: var(--text-secondary, #333); }
+.msg-content :deep(pre) { background: var(--bg-code, #f5f5f5); padding: 8px; border-radius: 6px; overflow-x: auto; font-size: 11px; margin: 4px 0; }
+.msg-content :deep(p) { margin: 0 0 4px; }
+.msg-content :deep(p:last-child) { margin: 0; }
+
+.thinking-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
+.thinking-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #10b981); animation: glow 1.5s infinite; }
+@keyframes glow { 0%,100%{opacity:1} 50%{opacity:0.3} }
+.thinking-text { font-size: 11px; color: var(--text-muted, #999); font-family: monospace; }
+.typing-indicator span { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted, #999); margin: 0 2px; animation: bounce 1.4s infinite; }
+@keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-4px)} }
+</style>
diff --git a/web/src/views/GraphConsole.vue b/web/src/views/GraphConsole.vue
index 55669ef..24356df 100644
--- a/web/src/views/GraphConsole.vue
+++ b/web/src/views/GraphConsole.vue
@@ -171,6 +171,8 @@
         />
       </aside>
     </div>
+
+    <GraphChatBar :company-id="companyId" :context="chatContext" />
   </div>
 </template>
 
@@ -183,6 +185,7 @@ import NodeDetailPanel from '@/components/graph-console/NodeDetailPanel.vue';
 import ReplanOrgGraphButton from '@/components/graph-console/ReplanOrgGraphButton.vue';
 import GoalTaskPane from '@/components/graph-console/GoalTaskPane.vue';
 import TaskFilesPanel from '@/components/graph-console/TaskFilesPanel.vue';
+import GraphChatBar from '@/components/GraphChatBar.vue';
 import {
   findTask, pickDefaultSelection, runStateToTaskPatch, hasStartedRun, pendingRunHint,
 } from '@/components/graph-console/goal-task-model.js';
@@ -263,6 +266,19 @@ const taskProjectRoot = computed(() => rootState.value.projectRoot ?? midState.v
 
 const selectedTask = computed(() => (findTask(goals.value, selectedTaskId.value) || {}).task || null);
 
+// 底部聊天条要带给 agent 的当前上下文（GraphChatBar 消费）
+const chatContext = computed(() => {
+  const hit = findTask(goals.value, selectedTaskId.value);
+  if (!hit) return null;
+  return {
+    taskId: hit.task.taskId,
+    taskTitle: hit.task.title,
+    taskStatus: hit.task.status,
+    goalId: hit.goal.goalId,
+    goalTitle: hit.goal.title,
+  };
+});
+
 /**
  * **左栏画哪张图，由选中的 task 决定**（P3C §七.3 / §一.A）。
  *
--
libgit2 0.21.4