feat: 初始化 OnceLove GraphRAG 项目基础架构

- 添加完整的项目结构，包括前端（Vue3 + Vite）、后端（Fastify）和基础设施配置
- 实现核心 GraphRAG 服务，集成 Neo4j 图数据库和 Qdrant 向量数据库
- 添加用户认证系统和管理员登录界面
- 提供 Docker 容器化部署方案和开发环境配置
- 包含项目文档、API 文档（Swagger）和测试脚本

OnceLove/oncelove-graphrag/frontend/src/views/Dashboard.vue

@@ -0,0 +1,768 @@
+<template>
+  <div class="dashboard">
+    <aside class="sidebar">
+      <div class="sidebar-header">
+        <div class="logo-mark">
+          <svg width="32" height="32" viewBox="0 0 48 48" fill="none">
+            <circle cx="24" cy="24" r="20" stroke="#6366f1" stroke-width="2.5"/>
+            <circle cx="24" cy="24" r="6" fill="#6366f1"/>
+            <line x1="24" y1="4" x2="24" y2="18" stroke="#6366f1" stroke-width="2.5"/>
+            <line x1="24" y1="30" x2="24" y2="44" stroke="#6366f1" stroke-width="2.5"/>
+            <line x1="4" y1="24" x2="18" y2="24" stroke="#6366f1" stroke-width="2.5"/>
+            <line x1="30" y1="24" x2="44" y2="24" stroke="#6366f1" stroke-width="2.5"/>
+          </svg>
+        </div>
+        <div class="logo-text">
+          <span class="logo-name">GraphRAG</span>
+          <span class="logo-sub">管理平台</span>
+        </div>
+      </div>
+
+      <nav class="sidebar-nav">
+        <button
+          v-for="item in navItems"
+          :key="item.id"
+          class="nav-btn"
+          :class="{ active: activeTab === item.id }"
+          @click="activeTab = item.id"
+        >
+          <span class="nav-icon" v-html="item.icon"></span>
+          <span>{{ item.label }}</span>
+        </button>
+      </nav>
+
+      <div class="sidebar-footer">
+        <div class="user-card">
+          <div class="user-avatar">A</div>
+          <div class="user-info">
+            <span class="user-role">管理员</span>
+            <span class="user-name">Admin</span>
+          </div>
+        </div>
+        <button class="logout-btn" @click="handleLogout">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+            <polyline points="16 17 21 12 16 7"/>
+            <line x1="21" y1="12" x2="9" y2="12"/>
+          </svg>
+          退出登录
+        </button>
+      </div>
+    </aside>
+
+    <main class="main-panel">
+      <header class="top-header">
+        <div class="header-left">
+          <h1 class="page-title">{{ currentNav.label }}</h1>
+          <p class="page-desc">{{ currentNav.desc }}</p>
+        </div>
+        <div class="header-actions">
+          <button class="btn-ghost" @click="refreshData">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="23 4 23 10 17 10"/>
+              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+            </svg>
+            刷新
+          </button>
+        </div>
+      </header>
+
+      <div class="content-area">
+        <div v-if="activeTab === 'graph'" class="graph-view">
+          <div class="graph-toolbar">
+            <div class="toolbar-left">
+              <span class="data-badge">实时数据</span>
+              <span class="node-count">{{ graphStats.nodes }} 节点 · {{ graphStats.edges }} 关系</span>
+            </div>
+            <div class="toolbar-right">
+              <button class="btn-outline" @click="zoomIn">+ 放大</button>
+              <button class="btn-outline" @click="zoomOut">- 缩小</button>
+              <button class="btn-primary" @click="fitView">适应画布</button>
+            </div>
+          </div>
+          <div class="graph-canvas" ref="graphCanvas">
+            <div v-if="graphLoading" class="graph-loading">
+              <div class="spinner"></div>
+              <p>加载图谱数据...</p>
+            </div>
+            <svg v-show="!graphLoading" ref="svgEl" class="graph-svg"></svg>
+          </div>
+        </div>
+
+        <div v-if="activeTab === 'ingest'" class="ingest-view">
+          <div class="panel-grid">
+            <div class="panel-card">
+              <div class="panel-header">
+                <h3>文本导入</h3>
+                <span class="panel-tag">Ingest</span>
+              </div>
+              <div class="panel-body">
+                <textarea
+                  v-model="ingestText"
+                  class="text-area"
+                  placeholder="在此输入文本内容，系统将自动完成分句、向量化并写入 Neo4j 与 Qdrant..."
+                  rows="8"
+                ></textarea>
+                <div class="panel-actions">
+                  <button class="btn-primary" @click="handleIngest" :disabled="!ingestText || ingestLoading">
+                    {{ ingestLoading ? '导入中...' : '开始导入' }}
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div class="panel-card">
+              <div class="panel-header">
+                <h3>导入记录</h3>
+                <span class="panel-tag info">Recent</span>
+              </div>
+              <div class="panel-body">
+                <div class="log-list">
+                  <div v-for="(log, i) in ingestLogs" :key="i" class="log-item" :class="log.type">
+                    <span class="log-time">{{ log.time }}</span>
+                    <span class="log-msg">{{ log.msg }}</span>
+                  </div>
+                  <p v-if="!ingestLogs.length" class="log-empty">暂无导入记录</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="activeTab === 'query'" class="query-view">
+          <div class="panel-grid">
+            <div class="panel-card wide">
+              <div class="panel-header">
+                <h3>时序检索</h3>
+                <span class="panel-tag">Query</span>
+              </div>
+              <div class="panel-body">
+                <div class="query-input-row">
+                  <input
+                    v-model="queryText"
+                    class="query-input"
+                    placeholder="输入查询内容，例如：张三和张四的关系是什么？"
+                    @keyup.enter="handleQuery"
+                  />
+                  <button class="btn-primary" @click="handleQuery" :disabled="!queryText || queryLoading">
+                    {{ queryLoading ? '检索中...' : '检索' }}
+                  </button>
+                </div>
+
+                <div v-if="queryResult" class="query-result">
+                  <div class="result-section">
+                    <h4>检索结果</h4>
+                    <p class="result-text">{{ queryResult.answer }}</p>
+                  </div>
+                  <div v-if="queryResult.chunks?.length" class="result-section">
+                    <h4>相关片段</h4>
+                    <div class="chunk-list">
+                      <div v-for="(chunk, i) in queryResult.chunks" :key="i" class="chunk-item">
+                        <p>{{ chunk.text || chunk.content }}</p>
+                        <span v-if="chunk.score" class="chunk-score">相关度: {{ (chunk.score * 100).toFixed(1) }}%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="activeTab === 'api'" class="api-view">
+          <div class="panel-grid">
+            <div class="panel-card wide">
+              <div class="panel-header">
+                <h3>接口调试</h3>
+                <span class="panel-tag">API Tester</span>
+              </div>
+              <div class="panel-body">
+                <div class="api-row">
+                  <select v-model="apiMethod" class="method-select">
+                    <option value="GET">GET</option>
+                    <option value="POST">POST</option>
+                    <option value="PUT">PUT</option>
+                    <option value="DELETE">DELETE</option>
+                  </select>
+                  <input v-model="apiUrl" class="api-url-input" placeholder="/graph/stats" @keyup.enter="sendApiRequest" />
+                  <button class="btn-primary" @click="sendApiRequest" :disabled="apiLoading">
+                    {{ apiLoading ? '发送中...' : '发送' }}
+                  </button>
+                </div>
+                <div class="api-endpoints">
+                  <span class="endpoint-label">快速调用：</span>
+                  <button v-for="ep in quickEndpoints" :key="ep.path" class="endpoint-chip" @click="fillApi(ep)">
+                    <span class="chip-method" :class="ep.method.toLowerCase()">{{ ep.method }}</span>
+                    {{ ep.path }}
+                  </button>
+                </div>
+                <div v-if="apiMethod === 'POST' || apiMethod === 'PUT'" class="api-body-section">
+                  <h4 class="body-label">请求体 (JSON)</h4>
+                  <textarea v-model="apiBody" class="text-area code-area" placeholder='{"key": "value"}' rows="8"></textarea>
+                </div>
+                <div class="api-response-section">
+                  <div class="response-header">
+                    <h4>响应结果</h4>
+                    <span v-if="apiStatus" class="status-badge" :class="apiStatus >= 200 && apiStatus < 300 ? 'success' : 'error'">
+                      {{ apiStatus }}
+                    </span>
+                  </div>
+                  <pre class="response-pre">{{ apiResponse || '等待发送请求...' }}</pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import * as d3 from 'd3'
+
+const router = useRouter()
+const activeTab = ref('graph')
+const graphLoading = ref(false)
+const ingestLoading = ref(false)
+const queryLoading = ref(false)
+const ingestText = ref('')
+const queryText = ref('')
+const queryResult = ref(null)
+const ingestLogs = ref([])
+const graphStats = ref({ nodes: 0, edges: 0 })
+const graphCanvas = ref(null)
+const svgEl = ref(null)
+const apiMethod = ref('GET')
+const apiUrl = ref('')
+const apiBody = ref('')
+const apiResponse = ref('')
+const apiStatus = ref(null)
+const apiLoading = ref(false)
+const quickEndpoints = [
+  { method: 'GET', path: '/health', body: '' },
+  { method: 'GET', path: '/ready', body: '' },
+  { method: 'POST', path: '/bootstrap', body: '{}' },
+  { method: 'GET', path: '/graph/stats', body: '' },
+  { method: 'POST', path: '/ingest', body: '{"persons":[{"id":"p1","name":"张三"}],"events":[{"id":"e1","summary":"测试事件","occurred_at":"2024-01-01T00:00:00Z","participants":["p1"],"topics":["t1"]}],"chunks":[{"id":"c1","text":"这是测试内容","payload":{"event_id":"e1"}}]}' },
+  { method: 'POST', path: '/query/timeline', body: '{"a_id":"p1","b_id":"p2"}' },
+  { method: 'POST', path: '/query/graphrag', body: '{"query_text":"张三的事件","top_k":5}' },
+  { method: 'POST', path: '/auth/verify', body: '{"password":"your-password"}' }
+]
+
+const fillApi = (ep) => {
+  apiMethod.value = ep.method
+  apiUrl.value = ep.path
+  apiBody.value = ep.body
+}
+
+const sendApiRequest = async () => {
+  if (!apiUrl.value) return
+  apiLoading.value = true
+  apiResponse.value = ''
+  apiStatus.value = null
+  try {
+    let targetUrl = apiUrl.value
+    if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
+      const apiBase = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000'
+      targetUrl = `${apiBase}${apiUrl.value}`
+    }
+    const opts = { method: apiMethod.value, headers: { 'Content-Type': 'application/json' } }
+    if ((apiMethod.value === 'POST' || apiMethod.value === 'PUT') && apiBody.value) {
+      opts.body = apiBody.value
+    }
+    const res = await fetch(targetUrl, opts)
+    apiStatus.value = res.status
+    const text = await res.text()
+    try { apiResponse.value = JSON.stringify(JSON.parse(text), null, 2) }
+    catch { apiResponse.value = text }
+  } catch (err) {
+    apiStatus.value = 0
+    apiResponse.value = '请求失败: ' + err.message
+  } finally {
+    apiLoading.value = false
+  }
+}
+
+const navItems = [
+  { id: 'graph', label: '知识图谱', desc: '可视化关系网络与时序事件', icon: '◉' },
+  { id: 'ingest', label: '数据导入', desc: '导入文本并自动完成向量化', icon: '↓' },
+  { id: 'query', label: '时序检索', desc: '基于 GraphRAG 的智能问答', icon: '⌕' },
+  { id: 'api', label: 'API 测试', desc: '在线调试后端接口', icon: '⚡' }
+]
+
+const currentNav = computed(() => navItems.find(n => n.id === activeTab.value) || navItems[0])
+
+const handleLogout = () => {
+  localStorage.removeItem('auth_token')
+  router.push('/login')
+}
+
+const refreshData = () => {
+  if (activeTab.value === 'graph') renderGraph()
+}
+
+const zoomIn = () => {
+  if (!svgEl.value) return
+  d3.select(svgEl.value).transition().call(d3.zoom().scaleBy, 1.3)
+}
+
+const zoomOut = () => {
+  if (!svgEl.value) return
+  d3.select(svgEl.value).transition().call(d3.zoom().scaleBy, 0.7)
+}
+
+const fitView = () => {
+  if (!svgEl.value) return
+  d3.select(svgEl.value).transition().call(d3.zoom().transform, d3.zoomIdentity)
+}
+
+const fetchGraphData = async () => {
+  const apiBase = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000'
+  try {
+    const res = await fetch(`${apiBase}/graph/stats`, { method: 'GET' })
+    if (res.ok) return await res.json()
+  } catch {}
+  return null
+}
+
+const renderGraph = async () => {
+  if (!graphCanvas.value || !svgEl.value) return
+  graphLoading.value = true
+
+  const width = graphCanvas.value.clientWidth
+  const height = graphCanvas.value.clientHeight
+
+  d3.select(svgEl.value).selectAll('*').remove()
+
+  const svg = d3.select(svgEl.value)
+    .attr('width', width)
+    .attr('height', height)
+
+  const data = await fetchGraphData()
+  const nodes = Array.isArray(data?.nodes) ? data.nodes : []
+  const links = Array.isArray(data?.links) ? data.links : []
+  graphStats.value = { nodes: nodes.length, edges: links.length }
+
+  if (!nodes.length) {
+    svg.append('text')
+      .attr('x', width / 2)
+      .attr('y', height / 2)
+      .attr('text-anchor', 'middle')
+      .attr('font-size', 14)
+      .attr('fill', '#9ca3af')
+      .text('暂无节点数据')
+    graphLoading.value = false
+    return
+  }
+
+  const colorMap = { person: '#6366f1', event: '#10b981', topic: '#f59e0b' }
+  const color = d => colorMap[d.type] || '#6366f1'
+
+  const g = svg.append('g')
+
+  svg.call(d3.zoom().scaleExtent([0.2, 3]).on('zoom', (event) => {
+    g.attr('transform', event.transform)
+  }))
+
+  const simulation = d3.forceSimulation(nodes)
+    .force('link', d3.forceLink(links).id(d => d.id).distance(140))
+    .force('charge', d3.forceManyBody().strength(-350))
+    .force('center', d3.forceCenter(width / 2, height / 2))
+    .force('collision', d3.forceCollide().radius(40))
+
+  const link = g.append('g')
+    .selectAll('line')
+    .data(links)
+    .join('line')
+    .attr('stroke', '#e5e7eb')
+    .attr('stroke-width', 1.5)
+
+  const nodeGroup = g.append('g')
+    .selectAll('g')
+    .data(nodes)
+    .join('g')
+    .call(d3.drag()
+      .on('start', (event, d) => { if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y })
+      .on('drag', (event, d) => { d.fx = event.x; d.fy = event.y })
+      .on('end', (event, d) => { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null })
+    )
+
+  nodeGroup.append('circle')
+    .attr('r', 24)
+    .attr('fill', d => color(d))
+    .attr('stroke', '#fff')
+    .attr('stroke-width', 2)
+
+  nodeGroup.append('text')
+    .attr('dy', 36)
+    .attr('text-anchor', 'middle')
+    .attr('font-size', 12)
+    .attr('fill', '#6b7280')
+    .text(d => d.name)
+
+  simulation.on('tick', () => {
+    link
+      .attr('x1', d => d.source.x)
+      .attr('y1', d => d.source.y)
+      .attr('x2', d => d.target.x)
+      .attr('y2', d => d.target.y)
+    nodeGroup.attr('transform', d => `translate(${d.x},${d.y})`)
+  })
+
+  graphLoading.value = false
+}
+
+const handleIngest = async () => {
+  if (!ingestText.value) return
+  ingestLoading.value = true
+  const apiBase = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000'
+  const now = new Date().toLocaleTimeString()
+  try {
+    const res = await fetch(`${apiBase}/ingest`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text: ingestText.value })
+    })
+    const data = await res.json()
+    ingestLogs.value.unshift({ time: now, msg: `导入成功: ${data.chunks?.length || 0} 个 chunk`, type: 'success' })
+    ingestText.value = ''
+  } catch (e) {
+    ingestLogs.value.unshift({ time: now, msg: `导入失败: ${e.message}`, type: 'error' })
+  } finally {
+    ingestLoading.value = false
+  }
+}
+
+const handleQuery = async () => {
+  if (!queryText.value) return
+  queryLoading.value = true
+  const apiBase = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000'
+  try {
+    const res = await fetch(`${apiBase}/query/graphrag`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ query: queryText.value })
+    })
+    queryResult.value = await res.json()
+  } catch (e) {
+    queryResult.value = { answer: `检索失败: ${e.message}`, chunks: [] }
+  } finally {
+    queryLoading.value = false
+  }
+}
+
+let resizeObserver
+let graphRendered = false
+onMounted(() => {
+  renderGraph()
+  graphRendered = true
+  if (graphCanvas.value) {
+    resizeObserver = new ResizeObserver(() => {
+      if (graphRendered) renderGraph()
+    })
+    resizeObserver.observe(graphCanvas.value)
+  }
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+})
+</script>
+
+<style scoped>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+.dashboard {
+  display: flex;
+  height: 100vh;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #f7f8fa;
+  color: #1f2937;
+}
+
+.sidebar {
+  width: 240px;
+  background: #fff;
+  border-right: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 24px 20px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.logo-mark { flex-shrink: 0; }
+
+.logo-text { display: flex; flex-direction: column; }
+.logo-name { font-size: 1rem; font-weight: 700; color: #0f0f0f; }
+.logo-sub { font-size: 0.75rem; color: #9ca3af; }
+
+.sidebar-nav {
+  flex: 1;
+  padding: 16px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nav-btn {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  color: #6b7280;
+  transition: all 0.15s ease;
+  text-align: left;
+  width: 100%;
+}
+
+.nav-btn:hover { background: #f3f4f6; color: #1f2937; }
+.nav-btn.active { background: #eef2ff; color: #6366f1; font-weight: 600; }
+.nav-icon { font-size: 1.1rem; width: 20px; text-align: center; }
+
+.sidebar-footer {
+  padding: 16px 12px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.user-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.user-avatar {
+  width: 32px; height: 32px;
+  background: #6366f1;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  color: white; font-size: 0.85rem; font-weight: 600;
+}
+
+.user-info { display: flex; flex-direction: column; }
+.user-role { font-size: 0.7rem; color: #9ca3af; }
+.user-name { font-size: 0.85rem; font-weight: 600; color: #1f2937; }
+
+.logout-btn {
+  display: flex; align-items: center; gap: 8px;
+  width: 100%; padding: 8px 12px;
+  background: transparent; border: 1px solid #e5e7eb;
+  border-radius: 8px; cursor: pointer;
+  font-size: 0.85rem; color: #6b7280;
+  transition: all 0.15s;
+}
+.logout-btn:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
+
+.main-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.top-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 32px;
+  background: #fff;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.page-title { font-size: 1.25rem; font-weight: 700; color: #0f0f0f; }
+.page-desc { font-size: 0.85rem; color: #9ca3af; margin-top: 2px; }
+
+.btn-ghost {
+  display: flex; align-items: center; gap: 6px;
+  padding: 8px 16px;
+  background: transparent; border: 1px solid #e5e7eb;
+  border-radius: 8px; cursor: pointer;
+  font-size: 0.85rem; color: #6b7280;
+  transition: all 0.15s;
+}
+.btn-ghost:hover { background: #f3f4f6; color: #1f2937; }
+
+.content-area { flex: 1; overflow: hidden; padding: 24px 32px; }
+
+.graph-view { height: 100%; display: flex; flex-direction: column; gap: 16px; }
+
+.graph-toolbar {
+  display: flex; align-items: center; justify-content: space-between;
+  background: #fff; padding: 12px 16px;
+  border-radius: 10px; border: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.toolbar-left { display: flex; align-items: center; gap: 16px; }
+
+.data-badge {
+  background: #dcfce7; color: #16a34a;
+  font-size: 0.75rem; font-weight: 600;
+  padding: 3px 10px; border-radius: 20px;
+}
+
+.node-count { font-size: 0.85rem; color: #6b7280; }
+
+.toolbar-right { display: flex; gap: 8px; }
+
+.btn-outline {
+  padding: 6px 14px;
+  background: transparent; border: 1px solid #e5e7eb;
+  border-radius: 6px; cursor: pointer;
+  font-size: 0.8rem; color: #6b7280;
+  transition: all 0.15s;
+}
+.btn-outline:hover { background: #f3f4f6; color: #1f2937; }
+
+.btn-primary {
+  padding: 6px 16px;
+  background: #6366f1; color: white;
+  border: none; border-radius: 6px;
+  cursor: pointer; font-size: 0.8rem; font-weight: 600;
+  transition: all 0.15s;
+}
+.btn-primary:hover:not(:disabled) { background: #4f46e5; }
+.btn-primary:disabled { background: #d1d5db; cursor: not-allowed; }
+
+.graph-canvas {
+  flex: 1;
+  background: #fff;
+  border-radius: 10px;
+  border: 1px solid #e5e7eb;
+  position: relative;
+  overflow: hidden;
+}
+
+.graph-loading {
+  position: absolute; inset: 0;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 12px;
+  background: rgba(255,255,255,0.9);
+}
+
+.spinner {
+  width: 32px; height: 32px;
+  border: 3px solid #e5e7eb;
+  border-top-color: #6366f1;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.graph-loading p { font-size: 0.9rem; color: #6b7280; }
+
+.graph-svg { width: 100%; height: 100%; }
+
+.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 100%; }
+.panel-grid .wide { grid-column: 1 / -1; }
+
+.panel-card {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.panel-header h3 { font-size: 0.95rem; font-weight: 700; }
+
+.panel-tag {
+  font-size: 0.7rem; font-weight: 600;
+  padding: 2px 8px; border-radius: 20px;
+  background: #e0e7ff; color: #6366f1;
+}
+.panel-tag.info { background: #dbeafe; color: #2563eb; }
+
+.panel-body { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
+
+.text-area {
+  width: 100%; padding: 12px;
+  border: 1px solid #e5e7eb; border-radius: 8px;
+  font-size: 0.9rem; resize: none; outline: none;
+  font-family: inherit;
+  transition: border-color 0.15s;
+}
+.text-area:focus { border-color: #6366f1; }
+
+.panel-actions { display: flex; justify-content: flex-end; }
+
+.log-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 300px; }
+
+.log-item {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 8px 10px; border-radius: 6px;
+  font-size: 0.8rem;
+}
+.log-item.success { background: #dcfce7; color: #16a34a; }
+.log-item.error { background: #fee2e2; color: #ef4444; }
+
+.log-time { color: #9ca3af; flex-shrink: 0; }
+.log-msg { flex: 1; }
+.log-empty { color: #9ca3af; font-size: 0.85rem; text-align: center; padding: 20px; }
+
+.query-input-row { display: flex; gap: 12px; }
+
+.query-input {
+  flex: 1; padding: 10px 14px;
+  border: 1px solid #e5e7eb; border-radius: 8px;
+  font-size: 0.9rem; outline: none;
+  transition: border-color 0.15s;
+}
+.query-input:focus { border-color: #6366f1; }
+
+.query-result { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
+
+.result-section { display: flex; flex-direction: column; gap: 8px; }
+.result-section h4 { font-size: 0.85rem; font-weight: 600; color: #6b7280; }
+.result-text { font-size: 0.95rem; color: #1f2937; line-height: 1.6; }
+
+.chunk-list { display: flex; flex-direction: column; gap: 8px; }
+.chunk-item {
+  padding: 10px 12px;
+  background: #f9fafb; border: 1px solid #e5e7eb;
+  border-radius: 6px; font-size: 0.85rem;
+}
+.chunk-score { color: #6366f1; font-size: 0.75rem; margin-top: 4px; display: block; }
+.api-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
+.method-select { padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.85rem; background: #fff; min-width: 90px; }
+.api-url-input { flex: 1; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.85rem; }
+.api-endpoints { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
+.endpoint-label { font-size: 0.8rem; color: #6b7280; }
+.endpoint-chip { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; cursor: pointer; font-size: 0.78rem; transition: all 0.2s; }
+.endpoint-chip:hover { border-color: #6366f1; background: #eef2ff; }
+.chip-method { font-weight: 700; font-size: 0.7rem; padding: 1px 4px; border-radius: 3px; }
+.chip-method.get { color: #10b981; } .chip-method.post { color: #6366f1; } .chip-method.put { color: #f59e0b; } .chip-method.delete { color: #ef4444; }
+.api-body-section { margin-bottom: 12px; }
+.body-label { font-size: 0.82rem; color: #6b7280; margin-bottom: 6px; font-weight: 500; }
+.code-area { font-family: 'Fira Code', monospace; font-size: 0.82rem; }
+.api-response-section { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; }
+.response-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+.response-header h4 { font-size: 0.85rem; font-weight: 600; }
+.status-badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
+.status-badge.success { background: #d1fae5; color: #065f46; } .status-badge.error { background: #fee2e2; color: #991b1b; }
+.response-pre { font-family: 'Fira Code', monospace; font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; max-height: 300px; overflow-y: auto; color: #374151; }
+</style>