宜博 / lemonboss

<template>
  <div class="agent-chat-page">
    <AppNav />
    <div class="agent-chat-layout">
      <!-- 左列: 对话列表 -->
      <aside class="conv-sidebar">
        <div class="sidebar-header">
          <!-- Agent 切换器 -->
          <select v-model="agentId" class="agent-select" @change="switchAgent">
            <option v-for="a in agentList" :key="a.id" :value="a.id">
               {{ a.emoji || '🤖' }} {{ a.name }}
            </option>
          </select>
          <button class="new-chat-btn" @click="newConversation">
            <span>＋</span> 新对话
          </button>
        </div>
        <div class="conv-list">
          <div
            v-for="conv in conversations"
            :key="conv.conversationId || conv.id"
            class="conv-card"
            :class="{ active: activeConvId === (conv.conversationId || conv.id) }"
            @click="switchConversation(conv.conversationId || conv.id)"
          >
            <div class="conv-title">{{ conv.title || '新对话' }}</div>
            <div class="conv-meta">
              <span class="conv-time">{{ formatTime(conv.updatedAt) }}</span>
              <span class="conv-count">{{ conv.messageCount }} 条</span>
            </div>
          </div>
          <div v-if="conversations.length === 0" class="empty-state">
            还没有对话，开始聊天吧
          </div>
        </div>
        <!-- Agent 基本信息 -->
        <div class="sidebar-footer">
          <div class="agent-badge">
            <span class="agent-emoji">{{ agentInfo.emoji || '🧬' }}</span>
            <div>
              <div class="agent-name-small">{{ agentInfo.name }}</div>
              <div class="agent-status-small" :class="agentInfo.status">{{ agentInfo.status }}</div>
            </div>
          </div>
        </div>
      </aside>

      <!-- 右列: 对话 -->
      <section class="chat-panel">
        <!-- 欢迎屏 -->
        <div v-if="messages.length === 0 && !streaming" class="welcome-screen">
          <div class="welcome-content">
            <div class="welcome-emoji">{{ agentInfo.emoji || '🧬' }}</div>
            <h2 class="welcome-title">{{ agentInfo.name || 'Innovator' }}</h2>
            <p class="welcome-greeting">{{ agentInfo.greeting || '准备就绪。' }}</p>
            <div class="welcome-hints">
              <button class="hint-chip" @click="quickSend('帮我创建一个 Master Agent')">🏛️ 创建 Master Agent</button>
              <button class="hint-chip" @click="quickSend('你有哪些技能？')">🧠 查看技能</button>
              <button class="hint-chip" @click="quickSend('你好')">👋 打个招呼</button>
            </div>
          </div>
        </div>

        <!-- 消息列表 -->
        <div v-else ref="messageListRef" class="message-list">
          <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' ? '👤' : (agentInfo.emoji || '🧬') }}
            </div>
            <div class="msg-body">
              <div class="msg-header">
                <span class="msg-role">{{ msg.role === 'user' ? '你' : agentInfo.name }}</span>
                <span class="msg-time">{{ formatMsgTime(msg.timestamp) }}</span>
              </div>
              <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">{{ agentInfo.emoji || '🧬' }}</div>
            <div class="msg-body">
              <div class="msg-header">
                <span class="msg-role">{{ agentInfo.name }}</span>
                <span class="typing-indicator"><span></span><span></span><span></span></span>
              </div>
              <div class="msg-content" v-html="renderMarkdown(streamContent)"></div>
              
              <!-- 子 Agent 并发窗口区 -->
              <div v-if="Object.keys(subAgents).length > 0" class="sub-agents-container">
                 <div v-for="(sub, callId) in subAgents" :key="callId" class="sub-agent-window" :class="sub.status">
                     <div class="sub-agent-header">
                         <span class="sub-agent-name">🤖 [{{ sub.agent }}]</span>
                         <span class="sub-agent-status">{{ sub.status === 'running' ? '🚀 执行中...' : (sub.status === 'success' ? '✅ 完成' : '❌ 失败') }}</span>
                     </div>
                     <div class="sub-agent-content terminal" ref="subAgentContentRefs">
                        {{ sub.content || '等待输出...' }}
                     </div>
                 </div>
              </div>

            </div>
          </div>

          <!-- 思考中 -->
          <div v-if="sending && thinkingContent" class="thinking-block">
            <div class="thinking-header" @click="showThinking = !showThinking">
              <div class="thinking-pulse"></div>
              <span class="thinking-label">{{ streaming ? '💭 思考完成' : '💭 思考中...' }}</span>
              <span class="thinking-toggle">{{ showThinking ? '▼' : '▶' }}</span>
            </div>
            <div v-if="showThinking" class="thinking-content">{{ thinkingContent }}</div>
          </div>

          <!-- 等待（无思考内容时） -->
          <div v-if="sending && !streaming && !thinkingContent" class="thinking-row">
            <div class="thinking-pulse"></div>
            <span class="thinking-text">{{ thinkingText }}</span>
          </div>
        </div>

        <!-- 输入区 -->
        <div class="chat-input-area">
          <div class="input-box" :class="{ focused: inputFocused }">
            <textarea
              ref="inputRef"
              v-model="inputText"
              :disabled="sending"
              :placeholder="sending ? '等待回复中...' : '跟 ' + agentInfo.name + ' 对话...'"
              class="msg-textarea"
              rows="1"
              @keydown="handleKeydown"
              @focus="inputFocused = true"
              @blur="inputFocused = false"
              @input="autoResize"
            ></textarea>
            <!-- 发送/停止按钮切换 -->
            <button v-if="sending" class="send-btn stop-btn" @click="handleStop">
              ⏹
            </button>
            <button v-else class="send-btn" :class="{ ready: inputText.trim() && !sending }" :disabled="!inputText.trim()" @click="handleSend">
              ➤
            </button>
          </div>
          <div class="input-hint">Shift+Enter 换行 · {{ messages.length }} 条消息</div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AppNav from '@/components/AppNav.vue'
import { marked } from 'marked'

const route = useRoute()
const router = useRouter()
const agentId = ref(route.params.agentId || 'innovator-001')
const agentList = ref([])

const agentInfo = ref({ name: 'Innovator', emoji: '🧬', type: 'meta', status: 'ready', greeting: '', bootstrapFiles: [] })
const conversations = ref([])
const messages = ref([])
const inputText = ref('')
const inputFocused = ref(false)
const sending = ref(false)
const streaming = ref(false)
const streamContent = ref('')
const subAgents = ref({}) // 用来存储并发子 Agent 状态
const thinkingText = ref('🧬 启动中...')
const thinkingContent = ref('')
const showThinking = ref(true)
const messageListRef = ref(null)
const inputRef = ref(null)
const activeConvId = ref(null)

// ─── Load ───

async function loadAgentList() {
  try {
    const r = await fetch('/api/agent/list')
    if (r.ok) {
      agentList.value = await r.json()
    }
  } catch (e) {
    console.error('Failed to load agent list', e)
  }
}

async function loadAgentInfo() {
  try {
    const r = await fetch(`/api/agent/${agentId.value}/info`)
    if (r.ok) agentInfo.value = await r.json()
  } catch (e) { console.error('Agent info error:', e) }
}

async function loadConversations() {
  try {
    const r = await fetch(`/api/agent/${agentId.value}/conversations`)
    if (r.ok) conversations.value = await r.json()
  } catch (e) { console.error('Conv list error:', e) }
}

async function loadConversation(convId) {
  try {
    const r = await fetch(`/api/agent/${agentId.value}/conversations/${convId}`)
    if (r.ok) {
      const conv = await r.json()
      messages.value = conv.messages || []
    }
  } catch { messages.value = [] }
}

function newConversation() {
  activeConvId.value = null
  messages.value = []
  streamContent.value = ''
  subAgents.value = {}
  router.replace({ params: { agentId: agentId.value, convId: undefined }})
}

async function switchAgent() {
  newConversation()
  await loadAgentInfo()
  await loadConversations()
  router.replace({ params: { agentId: agentId.value, convId: undefined }})
}

async function switchConversation(convId) {
  activeConvId.value = convId
  router.replace({ params: { agentId: agentId.value, convId } })
  await loadConversation(convId)
  scrollToBottom()
}

function quickSend(text) {
  inputText.value = text
  handleSend()
}

// ─── Chat (SSE) ───

async function handleSend() {
  const text = inputText.value.trim()
  if (!text || sending.value) return

  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 = ''
  subAgents.value = {}
  thinkingContent.value = ''
  showThinking.value = true
  thinkingText.value = `${agentInfo.value.emoji} ${agentInfo.value.name} 思考中...`
  scrollToBottom()

  try {
    const r = await fetch(`/api/agent/${agentId.value}/chat`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: text, conversationId: activeConvId.value }),
    })

    const reader = r.body.getReader()
    const decoder = new TextDecoder()
    let buffer = ''
    let 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 {
            const data = JSON.parse(line.slice(6))
            handleEvent(lastEventType, data)
          } catch { /* parse error */ }
        }
      }
    }

    // 流式完成 → 保存为消息
    if (streamContent.value) {
      messages.value.push({ role: 'assistant', content: streamContent.value, timestamp: new Date().toISOString() })
    }

    await loadConversations()

  } catch (err) {
    messages.value.push({ role: 'assistant', content: `❌ 错误: ${err.message}`, timestamp: new Date().toISOString() })
  } finally {
    sending.value = false
    streaming.value = false
    streamContent.value = ''
    thinkingContent.value = ''
  }
}

async function handleStop() {
  if (!activeConvId.value) return
  try {
    await fetch(`/api/agent/${agentId.value}/chat/${activeConvId.value}/stop`, { method: 'POST' })
  } catch(e) { console.error('Stop error:', e) }
  sending.value = false
  streaming.value = false
  messages.value.push({ role: 'assistant', content: `*[已终止]*`, timestamp: new Date().toISOString() })
  scrollToBottom()
}

function handleEvent(type, data) {
  switch (type) {
    case 'session':
      if (data.conversationId && !activeConvId.value) {
        activeConvId.value = data.conversationId
        router.replace({ params: { agentId: agentId.value, convId: data.conversationId } })
      }
      break
    case 'thinking':
      if (data.message && !data.message.startsWith('🧬')) {
        thinkingContent.value += data.message
        scrollToBottom()
      } else {
        thinkingText.value = data.message || '思考中...'
      }
      break
    case 'agent_output':
      streaming.value = true
      streamContent.value += (data.message || '')
      scrollToBottom()
      break
    case 'tool_call':
      thinkingText.value = data.message || `🔧 ${data.tool}`
      break
    case 'sub_agent':
      if (!subAgents.value[data.callId]) {
        subAgents.value[data.callId] = { agent: data.agent, status: 'running', content: '' }
      }
      if (data.event === 'chunk' && data.chunk) {
        subAgents.value[data.callId].content += data.chunk
        // scroll its container if possible, but global scrollToBottom works too
        setTimeout(() => {
          const els = document.querySelectorAll('.sub-agent-content')
          if (els) els.forEach(el => el.scrollTop = el.scrollHeight)
        }, 50)
      } else if (data.event === 'done') {
        subAgents.value[data.callId].status = data.status
      } else if (data.event === 'start') {
        subAgents.value[data.callId].status = 'running'
      }
      scrollToBottom()
      break
    case 'error':
      messages.value.push({ role: 'assistant', content: `❌ ${data.message}`, timestamp: new Date().toISOString() })
      break
  }
}

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, 160) + 'px'
}

function scrollToBottom() {
  nextTick(() => { if (messageListRef.value) messageListRef.value.scrollTop = messageListRef.value.scrollHeight })
}

function formatTime(d) {
  if (!d) return ''
  const diff = Date.now() - new Date(d)
  if (diff < 60000) return '刚刚'
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
  return new Date(d).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
}

function formatMsgTime(t) {
  if (!t) return ''
  return new Date(t).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
}

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>') }
}

watch([messages, streamContent], () => scrollToBottom(), { deep: true })

onMounted(async () => {
  await loadAgentList()
  await loadAgentInfo()
  await loadConversations()
  if (route.params.convId) {
    activeConvId.value = route.params.convId
    await loadConversation(route.params.convId)
    scrollToBottom()
  }
})
</script>

<style scoped>
.agent-chat-page {
  height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(145deg, #0a0e1a 0%, #111827 50%, #0d1321 100%);
  color: #e5e7eb; font-family: 'Inter', -apple-system, sans-serif;
}
.agent-chat-layout { flex: 1; display: flex; overflow: hidden; }

/* 左列 */
.conv-sidebar {
  width: 260px; min-width: 260px; border-right: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02); display: flex; flex-direction: column;
}
.sidebar-header {
  padding: 16px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.agent-select {
  flex: 1; padding: 6px; background: var(--bg-deep); border: 1px solid var(--border-color); color: #fff; border-radius: 4px; font-size: 14px;
}
.new-chat-btn {
  background: var(--primary-color); color: #fff; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; transition: all 0.2s ease;
}
.new-chat-btn:hover { box-shadow: 0 4px 12px rgba(16,185,129,0.3); transform: translateY(-1px); }
.conv-list { flex: 1; overflow-y: auto; padding: 8px; }
.conv-card {
  padding: 12px; border-radius: 10px; cursor: pointer; transition: all 0.15s;
  margin-bottom: 4px; border: 1px solid transparent;
}
.conv-card:hover { background: rgba(16,185,129,0.04); }
.conv-card.active { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2); }
.conv-title {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-meta { display: flex; align-items: center; gap: 8px; }
.conv-time { font-size: 11px; color: rgba(255,255,255,0.25); }
.conv-count { font-size: 10px; color: rgba(255,255,255,0.2); }
.empty-state { text-align: center; padding: 40px 20px; color: rgba(255,255,255,0.2); font-size: 13px; }

.sidebar-footer {
  padding: 12px; border-top: 1px solid rgba(255,255,255,0.04);
}
.agent-badge { display: flex; align-items: center; gap: 10px; }
.agent-emoji { font-size: 24px; }
.agent-name-small { font-size: 13px; font-weight: 600; color: #34d399; }
.agent-status-small { font-size: 11px; color: rgba(255,255,255,0.35); }
.agent-status-small.ready { color: #10b981; }

/* 右列 */
.chat-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.welcome-screen { flex: 1; display: flex; align-items: center; justify-content: center; }
.welcome-content { text-align: center; max-width: 500px; }
.welcome-emoji { font-size: 64px; margin-bottom: 16px; filter: drop-shadow(0 8px 20px rgba(16,185,129,0.4)); animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.welcome-title { font-size: 28px; font-weight: 800; margin: 0 0 12px; background: linear-gradient(135deg,#10b981,#34d399,#6ee7b7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.welcome-greeting { font-size: 15px; color: rgba(255,255,255,0.45); line-height: 1.8; margin: 0 0 32px; white-space: pre-line; }
.welcome-hints { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hint-chip {
  padding: 10px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); font-size: 13px;
  cursor: pointer; transition: all 0.2s;
}
.hint-chip:hover { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); color: #34d399; transform: translateY(-2px); }

/* 消息 */
.message-list { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.msg-row { display: flex; gap: 12px; max-width: 85%; animation: msgIn 0.3s ease-out; }
@keyframes msgIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.msg-user { align-self: flex-end; flex-direction: row-reverse; }
.msg-assistant { align-self: flex-start; }
.msg-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.avatar-user { background: rgba(59,130,246,0.15); }
.avatar-assistant { background: rgba(16,185,129,0.15); }
.msg-body { flex: 1; min-width: 0; }
.msg-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.msg-role { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.6); }
.msg-time { font-size: 11px; color: rgba(255,255,255,0.25); }
.msg-content { padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.7; }
.msg-user .msg-content { background: linear-gradient(135deg,rgba(59,130,246,0.2),rgba(99,102,241,0.15)); border: 1px solid rgba(59,130,246,0.15); color: rgba(255,255,255,0.9); }
.msg-assistant .msg-content { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
.msg-content :deep(pre) { background: rgba(0,0,0,0.3); padding: 12px; border-radius: 8px; overflow-x: auto; font-size: 12px; margin: 8px 0; }
.msg-content :deep(code) { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.msg-content :deep(p) { margin: 0 0 8px; } .msg-content :deep(p:last-child) { margin: 0; }
.msg-content :deep(ul),.msg-content :deep(ol) { margin: 4px 0; padding-left: 20px; }
.msg-content :deep(table) { border-collapse: collapse; margin: 8px 0; width: 100%; }
.msg-content :deep(th),.msg-content :deep(td) { border: 1px solid rgba(255,255,255,0.1); padding: 6px 10px; font-size: 12px; }
.msg-content :deep(th) { background: rgba(255,255,255,0.05); }

.typing-indicator { display: inline-flex; gap: 4px; margin-left: 8px; }
.typing-indicator span { width: 5px; height: 5px; border-radius: 50%; background: #34d399; animation: td 1.4s ease-in-out infinite; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes td { 0%,80%,100%{opacity:0.3;transform:scale(0.8)} 40%{opacity:1;transform:scale(1.2)} }

.thinking-row { display: flex; align-items: center; gap: 12px; padding: 16px 20px; animation: msgIn 0.3s ease-out; }
.thinking-pulse { width: 10px; height: 10px; border-radius: 50%; background: #34d399; animation: pulse 1.5s ease-in-out infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.thinking-text { font-size: 13px; color: rgba(255,255,255,0.4); }

.thinking-block { margin: 0 20px; animation: msgIn 0.3s ease-out; }
.thinking-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 10px 10px 0 0; background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.1); border-bottom: none;
  cursor: pointer; user-select: none;
}
.thinking-label { font-size: 12px; color: rgba(16,185,129,0.7); flex: 1; }
.thinking-toggle { font-size: 10px; color: rgba(255,255,255,0.25); }
.thinking-content {
  max-height: 200px; overflow-y: auto; padding: 10px 14px; font-size: 12px; line-height: 1.6;
  color: rgba(255,255,255,0.35); font-family: 'JetBrains Mono', monospace; white-space: pre-wrap;
  background: rgba(16,185,129,0.03); border: 1px solid rgba(16,185,129,0.08);
  border-radius: 0 0 10px 10px; word-break: break-word;
}

/* 输入区 */
.chat-input-area { padding: 16px 24px 20px; border-top: 1px solid rgba(255,255,255,0.04); }
.input-box {
  display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; border-radius: 16px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); transition: all 0.2s;
}
.input-box.focused { border-color: rgba(16,185,129,0.4); box-shadow: 0 0 0 3px rgba(16,185,129,0.08); background: rgba(255,255,255,0.06); }
.msg-textarea { flex: 1; border: none; outline: none; background: transparent; color: #e5e7eb; font-size: 14px; line-height: 1.5; resize: none; font-family: inherit; max-height: 160px; }
.msg-textarea::placeholder { color: rgba(255,255,255,0.25); }
.send-btn {
  width: 36px; height: 36px; border-radius: 10px; border: none; font-size: 16px;
  cursor: pointer; transition: all 0.2s; flex-shrink: 0;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3);
}
.send-btn.ready { background: linear-gradient(135deg,#10b981,#34d399); color: #fff; box-shadow: 0 4px 12px rgba(16,185,129,0.3); }
.send-btn.ready:hover { transform: scale(1.05); }
.input-hint { margin-top: 6px; font-size: 11px; color: rgba(255,255,255,0.2); text-align: center; }
.sub-agents-container {
  display: flex;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 16px;
}
.sub-agent-window {
  flex: 1;
  min-width: 280px;
  background: var(--bg-deep);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sub-agent-window.running {
  border-color: var(--primary-color);
  box-shadow: 0 0 10px rgba(0, 194, 255, 0.1);
}
.sub-agent-window.success { border-color: #2ea043; }
.sub-agent-window.error { border-color: #da3633; }
.sub-agent-header {
  padding: 6px 10px;
  background: rgba(0,0,0,0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  font-size: 11px;
}
.sub-agent-name {
  font-weight: 600;
  color: #c9d1d9;
}
.sub-agent-status {
  font-family: inherit;
  color: var(--text-color-muted);
}
.sub-agent-content {
  padding: 10px;
  font-size: 11px;
  color: #8b949e;
  background: #0d1117;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.sub-agent-content.terminal {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
}
</style>