From 35da38e1c98c43859ead26dc7099400dca1e57c6 Mon Sep 17 00:00:00 2001
From: 666ghj <670939375@qq.com>
Date: Thu, 11 Dec 2025 11:39:42 +0800
Subject: [PATCH] Add GraphPanel and WorkbenchPanel components for enhanced
 visualization and interaction

- Introduced GraphPanel.vue for dynamic graph visualization, featuring real-time updates, node and edge detail panels, and loading states.
- Added WorkbenchPanel.vue to manage ontology generation and graph building processes, including progress tracking and system logs.
- Updated MainView.vue to integrate both panels, allowing users to switch between graph and workbench views seamlessly.
- Enhanced styling across components for improved user experience and visual consistency.
---
 frontend/src/components/GraphPanel.vue     | 460 +++++++++++++++
 frontend/src/components/WorkbenchPanel.vue | 657 +++++++++++++++++++++
 frontend/src/router/index.js               |   2 +-
 frontend/src/views/MainView.vue            | 465 +++++++++++++++
 4 files changed, 1583 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/GraphPanel.vue
 create mode 100644 frontend/src/components/WorkbenchPanel.vue
 create mode 100644 frontend/src/views/MainView.vue

diff --git a/frontend/src/components/GraphPanel.vue b/frontend/src/components/GraphPanel.vue
new file mode 100644
index 0000000..e7ebf16
--- /dev/null
+++ b/frontend/src/components/GraphPanel.vue
@@ -0,0 +1,460 @@
+<template>
+  <div class="graph-panel">
+    <div class="panel-header">
+      <!-- 顶部工具栏 (Internal Top Right) -->
+      <div class="header-tools">
+        <button class="tool-btn" @click="$emit('refresh')" :disabled="loading" title="刷新图谱">
+          <span class="icon-refresh" :class="{ 'spinning': loading }">↻</span>
+        </button>
+        <button class="tool-btn" @click="$emit('toggle-maximize')" title="最大化/还原">
+          <span class="icon-maximize">⤢</span>
+        </button>
+      </div>
+    </div>
+    
+    <div class="graph-container" ref="graphContainer">
+      <!-- 图谱可视化 -->
+      <div v-if="graphData" class="graph-view">
+        <svg ref="graphSvg" class="graph-svg"></svg>
+        
+        <!-- 构建中提示 -->
+        <div v-if="currentPhase === 1" class="graph-building-hint">
+          <span class="building-dot"></span>
+          实时更新中...
+        </div>
+        
+        <!-- 节点/边详情面板 -->
+        <div v-if="selectedItem" class="detail-panel">
+          <div class="detail-panel-header">
+            <span class="detail-title">{{ selectedItem.type === 'node' ? 'Node Details' : 'Relationship' }}</span>
+            <button class="detail-close" @click="closeDetailPanel">×</button>
+          </div>
+          
+          <!-- 节点详情 -->
+          <div v-if="selectedItem.type === 'node'" class="detail-content">
+            <div class="detail-row">
+              <span class="detail-label">Name</span>
+              <span class="detail-value highlight">{{ selectedItem.data.name }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Type</span>
+              <span class="detail-badge" :style="{ background: selectedItem.color }">
+                {{ selectedItem.entityType }}
+              </span>
+            </div>
+            <!-- Properties -->
+            <div class="detail-section" v-if="selectedItem.data.attributes && Object.keys(selectedItem.data.attributes).length > 0">
+              <span class="detail-label">Properties</span>
+              <div class="properties-list">
+                <div v-for="(value, key) in selectedItem.data.attributes" :key="key" class="property-item">
+                  <span class="property-key">{{ key }}:</span>
+                  <span class="property-value">{{ value }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 边详情 -->
+          <div v-else class="detail-content">
+             <div class="edge-relation">
+              <span class="edge-source">{{ selectedItem.data.source_name }}</span>
+              <span class="edge-arrow">→</span>
+              <span class="edge-type">{{ selectedItem.data.name || 'RELATED_TO' }}</span>
+              <span class="edge-arrow">→</span>
+              <span class="edge-target">{{ selectedItem.data.target_name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 加载状态 -->
+      <div v-else-if="loading" class="graph-state">
+        <div class="loading-spinner"></div>
+        <p>图谱数据加载中...</p>
+      </div>
+      
+      <!-- 等待/空状态 -->
+      <div v-else class="graph-state">
+        <div class="empty-icon">❖</div>
+        <p class="empty-text">等待本体生成...</p>
+      </div>
+    </div>
+
+    <!-- 底部图例 (Bottom Left) -->
+    <div v-if="graphData && entityTypes.length" class="graph-legend">
+      <div class="legend-item" v-for="type in entityTypes" :key="type.name">
+        <span class="legend-dot" :style="{ background: type.color }"></span>
+        <span class="legend-label">{{ type.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, nextTick, computed } from 'vue'
+import * as d3 from 'd3'
+
+const props = defineProps({
+  graphData: Object,
+  loading: Boolean,
+  currentPhase: Number
+})
+
+const emit = defineEmits(['refresh', 'toggle-maximize'])
+
+const graphContainer = ref(null)
+const graphSvg = ref(null)
+const selectedItem = ref(null)
+
+// 计算实体类型用于图例
+const entityTypes = computed(() => {
+  if (!props.graphData?.nodes) return []
+  const typeMap = {}
+  const colors = ['#FF6B35', '#004E89', '#7B2D8E', '#1A936F', '#C5283D', '#E9724C']
+  
+  props.graphData.nodes.forEach(node => {
+    const type = node.labels?.find(l => l !== 'Entity') || 'Entity'
+    if (!typeMap[type]) {
+      typeMap[type] = { name: type, count: 0, color: colors[Object.keys(typeMap).length % colors.length] }
+    }
+    typeMap[type].count++
+  })
+  return Object.values(typeMap)
+})
+
+const closeDetailPanel = () => {
+  selectedItem.value = null
+}
+
+const renderGraph = () => {
+  if (!graphSvg.value || !props.graphData) return
+  
+  const container = graphContainer.value
+  const width = container.clientWidth
+  const height = container.clientHeight
+  
+  const svg = d3.select(graphSvg.value)
+    .attr('width', width)
+    .attr('height', height)
+    .attr('viewBox', `0 0 ${width} ${height}`)
+    
+  svg.selectAll('*').remove()
+  
+  const nodesData = props.graphData.nodes || []
+  const edgesData = props.graphData.edges || []
+  
+  if (nodesData.length === 0) return
+
+  // Prep data
+  const nodeMap = {}
+  nodesData.forEach(n => nodeMap[n.uuid] = n)
+  
+  const nodes = nodesData.map(n => ({
+    id: n.uuid,
+    name: n.name || 'Unnamed',
+    type: n.labels?.find(l => l !== 'Entity') || 'Entity',
+    rawData: n
+  }))
+  
+  const nodeIds = new Set(nodes.map(n => n.id))
+  const edges = edgesData
+    .filter(e => nodeIds.has(e.source_node_uuid) && nodeIds.has(e.target_node_uuid))
+    .map(e => ({
+      source: e.source_node_uuid,
+      target: e.target_node_uuid,
+      type: e.fact_type || e.name || 'RELATED',
+      rawData: {
+        ...e,
+        source_name: nodeMap[e.source_node_uuid]?.name,
+        target_name: nodeMap[e.target_node_uuid]?.name
+      }
+    }))
+    
+  // Color scale
+  const colorMap = {}
+  entityTypes.value.forEach(t => colorMap[t.name] = t.color)
+  const getColor = (type) => colorMap[type] || '#999'
+
+  // Simulation
+  const simulation = d3.forceSimulation(nodes)
+    .force('link', d3.forceLink(edges).id(d => d.id).distance(100))
+    .force('charge', d3.forceManyBody().strength(-200))
+    .force('center', d3.forceCenter(width / 2, height / 2))
+    .force('collide', d3.forceCollide(30))
+
+  const g = svg.append('g')
+  
+  // Zoom
+  svg.call(d3.zoom().extent([[0, 0], [width, height]]).scaleExtent([0.1, 4]).on('zoom', (event) => {
+    g.attr('transform', event.transform)
+  }))
+
+  // Links
+  const link = g.append('g').selectAll('line')
+    .data(edges)
+    .enter().append('line')
+    .attr('stroke', '#E0E0E0')
+    .attr('stroke-width', 1.5)
+
+  // Nodes
+  const node = g.append('g').selectAll('circle')
+    .data(nodes)
+    .enter().append('circle')
+    .attr('r', 8)
+    .attr('fill', d => getColor(d.type))
+    .attr('stroke', '#fff')
+    .attr('stroke-width', 2)
+    .style('cursor', 'pointer')
+    .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
+      })
+    )
+    .on('click', (event, d) => {
+      event.stopPropagation()
+      selectedItem.value = {
+        type: 'node',
+        data: d.rawData,
+        entityType: d.type,
+        color: getColor(d.type)
+      }
+    })
+
+  // Labels
+  const labels = g.append('g').selectAll('text')
+    .data(nodes)
+    .enter().append('text')
+    .text(d => d.name.substring(0, 10))
+    .attr('font-size', '10px')
+    .attr('fill', '#666')
+    .attr('dx', 12)
+    .attr('dy', 4)
+
+  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)
+
+    node
+      .attr('cx', d => d.x)
+      .attr('cy', d => d.y)
+
+    labels
+      .attr('x', d => d.x)
+      .attr('y', d => d.y)
+  })
+}
+
+watch(() => props.graphData, () => {
+  nextTick(renderGraph)
+}, { deep: true })
+
+onMounted(() => {
+  window.addEventListener('resize', renderGraph)
+})
+</script>
+
+<style scoped>
+.graph-panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #FAFAFA;
+  background-image: radial-gradient(#D0D0D0 1.5px, transparent 1.5px);
+  background-size: 24px 24px;
+  overflow: hidden;
+}
+
+.panel-header {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 16px;
+  z-index: 10;
+  pointer-events: none; /* Let clicks pass through to graph */
+}
+
+.header-tools {
+  pointer-events: auto;
+  display: flex;
+  gap: 8px;
+}
+
+.tool-btn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #E0E0E0;
+  background: #FFF;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #666;
+  transition: all 0.2s;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+}
+
+.tool-btn:hover {
+  background: #F5F5F5;
+  color: #000;
+  border-color: #CCC;
+}
+
+.icon-refresh.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+.graph-container {
+  width: 100%;
+  height: 100%;
+}
+
+.graph-view, .graph-svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.graph-state {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: #999;
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.2;
+}
+
+.graph-legend {
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  background: rgba(255,255,255,0.9);
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid #EAEAEA;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+  max-width: 80%;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #444;
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+/* Detail Panel */
+.detail-panel {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  width: 280px;
+  background: #FFF;
+  border: 1px solid #EAEAEA;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+  overflow: hidden;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+}
+
+.detail-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  background: #FAFAFA;
+  border-bottom: 1px solid #EEE;
+}
+
+.detail-title {
+  font-weight: 600;
+  color: #000;
+}
+
+.detail-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #999;
+}
+
+.detail-content {
+  padding: 14px;
+}
+
+.detail-row {
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detail-label {
+  color: #999;
+  font-size: 10px;
+  text-transform: uppercase;
+}
+
+.detail-value {
+  color: #333;
+}
+
+.detail-badge {
+  display: inline-block;
+  padding: 2px 6px;
+  color: #FFF;
+  border-radius: 4px;
+  font-size: 10px;
+  width: fit-content;
+}
+
+.properties-list {
+  margin-top: 8px;
+  border-top: 1px dashed #EEE;
+  padding-top: 8px;
+}
+
+.property-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.property-key {
+  color: #666;
+}
+</style>
diff --git a/frontend/src/components/WorkbenchPanel.vue b/frontend/src/components/WorkbenchPanel.vue
new file mode 100644
index 0000000..041c80d
--- /dev/null
+++ b/frontend/src/components/WorkbenchPanel.vue
@@ -0,0 +1,657 @@
+<template>
+  <div class="workbench-panel">
+    <div class="scroll-container">
+      <!-- Step 01: Ontology -->
+      <div class="step-card" :class="{ 'active': currentPhase === 0, 'completed': currentPhase > 0 }">
+        <div class="card-header">
+          <div class="step-info">
+            <span class="step-num">01</span>
+            <span class="step-title">本体生成</span>
+          </div>
+          <div class="step-status">
+            <span v-if="currentPhase > 0" class="badge success">已完成</span>
+            <span v-else-if="currentPhase === 0" class="badge processing">生成中</span>
+            <span v-else class="badge pending">等待</span>
+          </div>
+        </div>
+        
+        <div class="card-content">
+          <p class="api-note">POST /api/graph/ontology/generate</p>
+          <p class="description">
+            上传文档后，LLM分析文档内容，自动生成适合舆论模拟的本体结构（实体类型 + 关系类型）。
+          </p>
+
+          <!-- Loading / Progress -->
+          <div v-if="currentPhase === 0 && ontologyProgress" class="progress-section">
+            <div class="spinner-sm"></div>
+            <span>{{ ontologyProgress.message || '正在分析文档...' }}</span>
+          </div>
+
+          <!-- Detail Overlay -->
+          <div v-if="selectedOntologyItem" class="ontology-detail-overlay">
+            <div class="detail-header">
+               <div class="detail-title-group">
+                  <span class="detail-type-badge">{{ selectedOntologyItem.itemType === 'entity' ? 'ENTITY' : 'RELATION' }}</span>
+                  <span class="detail-name">{{ selectedOntologyItem.name }}</span>
+               </div>
+               <button class="close-btn" @click="selectedOntologyItem = null">×</button>
+            </div>
+            <div class="detail-body">
+               <div class="detail-desc">{{ selectedOntologyItem.description }}</div>
+               
+               <!-- Attributes -->
+               <div class="detail-section" v-if="selectedOntologyItem.attributes?.length">
+                  <span class="section-label">ATTRIBUTES</span>
+                  <div class="attr-list">
+                     <div v-for="attr in selectedOntologyItem.attributes" :key="attr.name" class="attr-item">
+                        <span class="attr-name">{{ attr.name }}</span>
+                        <span class="attr-type">({{ attr.type }})</span>
+                        <span class="attr-desc">{{ attr.description }}</span>
+                     </div>
+                  </div>
+               </div>
+
+               <!-- Examples (Entity) -->
+               <div class="detail-section" v-if="selectedOntologyItem.examples?.length">
+                  <span class="section-label">EXAMPLES</span>
+                  <div class="example-list">
+                     <span v-for="ex in selectedOntologyItem.examples" :key="ex" class="example-tag">{{ ex }}</span>
+                  </div>
+               </div>
+
+               <!-- Source/Target (Relation) -->
+               <div class="detail-section" v-if="selectedOntologyItem.source_targets?.length">
+                  <span class="section-label">CONNECTIONS</span>
+                  <div class="conn-list">
+                     <div v-for="(conn, idx) in selectedOntologyItem.source_targets" :key="idx" class="conn-item">
+                        <span class="conn-node">{{ conn.source }}</span>
+                        <span class="conn-arrow">→</span>
+                        <span class="conn-node">{{ conn.target }}</span>
+                     </div>
+                  </div>
+               </div>
+            </div>
+          </div>
+
+          <!-- Generated Entity Tags -->
+          <div v-if="projectData?.ontology?.entity_types" class="tags-container" :class="{ 'dimmed': selectedOntologyItem }">
+            <span class="tag-label">GENERATED ENTITY TYPES</span>
+            <div class="tags-list">
+              <span 
+                v-for="entity in projectData.ontology.entity_types" 
+                :key="entity.name" 
+                class="entity-tag clickable"
+                @click="selectOntologyItem(entity, 'entity')"
+              >
+                {{ entity.name }}
+              </span>
+            </div>
+          </div>
+
+          <!-- Generated Relation Tags -->
+          <div v-if="projectData?.ontology?.edge_types" class="tags-container" :class="{ 'dimmed': selectedOntologyItem }">
+            <span class="tag-label">GENERATED RELATION TYPES</span>
+            <div class="tags-list">
+              <span 
+                v-for="rel in projectData.ontology.edge_types" 
+                :key="rel.name" 
+                class="entity-tag clickable"
+                @click="selectOntologyItem(rel, 'relation')"
+              >
+                {{ rel.name }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 02: Graph Build -->
+      <div class="step-card" :class="{ 'active': currentPhase === 1, 'completed': currentPhase > 1 }">
+        <div class="card-header">
+          <div class="step-info">
+            <span class="step-num">02</span>
+            <span class="step-title">图谱构建</span>
+          </div>
+          <div class="step-status">
+            <span v-if="currentPhase > 1" class="badge success">已完成</span>
+            <span v-else-if="currentPhase === 1" class="badge processing">{{ buildProgress?.progress || 0 }}%</span>
+            <span v-else class="badge pending">等待</span>
+          </div>
+        </div>
+
+        <div class="card-content">
+          <p class="api-note">POST /api/graph/build</p>
+          <p class="description">
+            基于生成的本体，将文档分块后调用 Zep API 构建知识图谱，提取实体和关系。
+          </p>
+          
+          <!-- Stats Cards -->
+          <div class="stats-grid">
+            <div class="stat-card">
+              <span class="stat-value">{{ graphStats.nodes }}</span>
+              <span class="stat-label">实体节点</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value">{{ graphStats.edges }}</span>
+              <span class="stat-label">关系边</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value">{{ graphStats.types }}</span>
+              <span class="stat-label">SCHEMA类型</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 03: Complete -->
+      <div class="step-card" :class="{ 'active': currentPhase === 2, 'completed': currentPhase >= 2 }">
+        <div class="card-header">
+          <div class="step-info">
+            <span class="step-num">03</span>
+            <span class="step-title">构建完成</span>
+          </div>
+          <div class="step-status">
+            <span v-if="currentPhase >= 2" class="badge accent">进行中</span>
+          </div>
+        </div>
+        
+        <div class="card-content">
+          <p class="description">图谱构建已完成，请进入下一步进行环境参数配置。</p>
+          <button 
+            class="action-btn" 
+            :disabled="currentPhase < 2"
+            @click="$emit('next-step')"
+          >
+            进入环境搭建 ➝
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom Info / Logs -->
+    <div class="system-logs">
+      <div class="log-header">
+        <span class="log-title">SYSTEM DASHBOARD</span>
+        <span class="log-id">{{ projectData?.project_id || 'NO_PROJECT' }}</span>
+      </div>
+      <div class="log-content" ref="logContent">
+        <div class="log-line" v-for="(log, idx) in systemLogs" :key="idx">
+          <span class="log-time">{{ log.time }}</span>
+          <span class="log-msg">{{ log.msg }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch, nextTick } from 'vue'
+
+const props = defineProps({
+  currentPhase: { type: Number, default: 0 },
+  projectData: Object,
+  ontologyProgress: Object,
+  buildProgress: Object,
+  graphData: Object,
+  systemLogs: { type: Array, default: () => [] }
+})
+
+defineEmits(['next-step'])
+
+const selectedOntologyItem = ref(null)
+const logContent = ref(null)
+
+const selectOntologyItem = (item, type) => {
+  selectedOntologyItem.value = { ...item, itemType: type }
+}
+
+const graphStats = computed(() => {
+  const nodes = props.graphData?.node_count || props.graphData?.nodes?.length || 0
+  const edges = props.graphData?.edge_count || props.graphData?.edges?.length || 0
+  const types = props.projectData?.ontology?.entity_types?.length || 0
+  return { nodes, edges, types }
+})
+
+const formatDate = (dateStr) => {
+  if (!dateStr) return '--:--:--'
+  const d = new Date(dateStr)
+  return d.toLocaleTimeString('en-US', { hour12: false }) + '.' + d.getMilliseconds()
+}
+
+// Auto-scroll logs
+watch(() => props.systemLogs.length, () => {
+  nextTick(() => {
+    if (logContent.value) {
+      logContent.value.scrollTop = logContent.value.scrollHeight
+    }
+  })
+})
+</script>
+
+<style scoped>
+.workbench-panel {
+  height: 100%;
+  background-color: #FAFAFA;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+.scroll-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.step-card {
+  background: #FFF;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  border: 1px solid #EAEAEA;
+  transition: all 0.3s ease;
+  position: relative; /* For absolute overlay */
+}
+
+.step-card.active {
+  border-color: #FF5722;
+  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.08);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.step-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.step-num {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 20px;
+  font-weight: 700;
+  color: #E0E0E0;
+}
+
+.step-card.active .step-num,
+.step-card.completed .step-num {
+  color: #000;
+}
+
+.step-title {
+  font-weight: 600;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.badge {
+  font-size: 10px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.badge.success { background: #E8F5E9; color: #2E7D32; }
+.badge.processing { background: #FFF3E0; color: #EF6C00; }
+.badge.accent { background: #FF5722; color: #FFF; }
+.badge.pending { background: #F5F5F5; color: #999; }
+
+.api-note {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: #999;
+  margin-bottom: 8px;
+}
+
+.description {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+/* Step 01 Tags */
+.tags-container {
+  margin-top: 12px;
+  transition: opacity 0.3s;
+}
+
+.tags-container.dimmed {
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+.tag-label {
+  display: block;
+  font-size: 10px;
+  color: #AAA;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.tags-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.entity-tag {
+  background: #F5F5F5;
+  border: 1px solid #EEE;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 11px;
+  color: #333;
+  font-family: 'JetBrains Mono', monospace;
+  transition: all 0.2s;
+}
+
+.entity-tag.clickable {
+    cursor: pointer;
+}
+
+.entity-tag.clickable:hover {
+    background: #E0E0E0;
+    border-color: #CCC;
+}
+
+/* Ontology Detail Overlay */
+.ontology-detail-overlay {
+    position: absolute;
+    top: 60px; /* Below header roughly */
+    left: 20px;
+    right: 20px;
+    bottom: 20px;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(4px);
+    z-index: 10;
+    border: 1px solid #EAEAEA;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
+
+.detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #EAEAEA;
+    background: #FAFAFA;
+}
+
+.detail-title-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.detail-type-badge {
+    font-size: 9px;
+    font-weight: 700;
+    color: #FFF;
+    background: #000;
+    padding: 2px 6px;
+    border-radius: 2px;
+    text-transform: uppercase;
+}
+
+.detail-name {
+    font-size: 14px;
+    font-weight: 700;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    font-size: 18px;
+    color: #999;
+    cursor: pointer;
+    line-height: 1;
+}
+
+.close-btn:hover {
+    color: #333;
+}
+
+.detail-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+}
+
+.detail-desc {
+    font-size: 12px;
+    color: #444;
+    line-height: 1.5;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px dashed #EAEAEA;
+}
+
+.detail-section {
+    margin-bottom: 16px;
+}
+
+.section-label {
+    display: block;
+    font-size: 10px;
+    font-weight: 600;
+    color: #AAA;
+    margin-bottom: 8px;
+}
+
+.attr-list, .conn-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.attr-item {
+    font-size: 11px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: baseline;
+    padding: 4px;
+    background: #F9F9F9;
+    border-radius: 4px;
+}
+
+.attr-name {
+    font-family: 'JetBrains Mono', monospace;
+    font-weight: 600;
+    color: #000;
+}
+
+.attr-type {
+    color: #999;
+    font-size: 10px;
+}
+
+.attr-desc {
+    color: #555;
+    flex: 1;
+    min-width: 150px;
+}
+
+.example-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.example-tag {
+    font-size: 11px;
+    background: #FFF;
+    border: 1px solid #E0E0E0;
+    padding: 3px 8px;
+    border-radius: 12px;
+    color: #555;
+}
+
+.conn-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 11px;
+    padding: 6px;
+    background: #F5F5F5;
+    border-radius: 4px;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.conn-node {
+    font-weight: 600;
+    color: #333;
+}
+
+.conn-arrow {
+    color: #BBB;
+}
+
+/* Step 02 Stats */
+.stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 12px;
+  background: #F9F9F9;
+  padding: 16px;
+  border-radius: 6px;
+}
+
+.stat-card {
+  text-align: center;
+}
+
+.stat-value {
+  display: block;
+  font-size: 20px;
+  font-weight: 700;
+  color: #000;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.stat-label {
+  font-size: 9px;
+  color: #999;
+  text-transform: uppercase;
+  margin-top: 4px;
+  display: block;
+}
+
+/* Step 03 Button */
+.action-btn {
+  width: 100%;
+  background: #000;
+  color: #FFF;
+  border: none;
+  padding: 14px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.action-btn:hover:not(:disabled) {
+  opacity: 0.8;
+}
+
+.action-btn:disabled {
+  background: #CCC;
+  cursor: not-allowed;
+}
+
+.progress-section {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  color: #FF5722;
+  margin-bottom: 12px;
+}
+
+.spinner-sm {
+  width: 14px;
+  height: 14px;
+  border: 2px solid #FFCCBC;
+  border-top-color: #FF5722;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* System Logs */
+.system-logs {
+  background: #000;
+  color: #DDD;
+  padding: 16px;
+  font-family: 'JetBrains Mono', monospace;
+  border-top: 1px solid #222;
+  flex-shrink: 0;
+}
+
+.log-header {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #333;
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+  font-size: 10px;
+  color: #888;
+}
+
+.log-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  height: 80px; /* Approx 4 lines visible */
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.log-content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.log-content::-webkit-scrollbar-thumb {
+  background: #333;
+  border-radius: 2px;
+}
+
+.log-line {
+  font-size: 11px;
+  display: flex;
+  gap: 12px;
+  line-height: 1.5;
+}
+
+.log-time {
+  color: #666;
+  min-width: 75px;
+}
+
+.log-msg {
+  color: #CCC;
+  word-break: break-all;
+}
+</style>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 5df5ac0..4bae635 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
-import Process from '../views/Process.vue'
+import Process from '../views/MainView.vue'
 
 const routes = [
   {
diff --git a/frontend/src/views/MainView.vue b/frontend/src/views/MainView.vue
new file mode 100644
index 0000000..0dab5c3
--- /dev/null
+++ b/frontend/src/views/MainView.vue
@@ -0,0 +1,465 @@
+<template>
+  <div class="main-view">
+    <!-- Header -->
+    <header class="app-header">
+      <div class="header-left">
+        <div class="brand" @click="router.push('/')">MIROFISH</div>
+      </div>
+      
+      <div class="header-center">
+        <div class="view-switcher">
+          <button 
+            v-for="mode in ['graph', 'split', 'workbench']" 
+            :key="mode"
+            class="switch-btn"
+            :class="{ active: viewMode === mode }"
+            @click="viewMode = mode"
+          >
+            {{ mode.toUpperCase() }}
+          </button>
+        </div>
+      </div>
+
+      <div class="header-right">
+        <!-- Optional user info or status -->
+        <span class="status-indicator" :class="statusClass">
+          <span class="dot"></span>
+          {{ statusText }}
+        </span>
+      </div>
+    </header>
+
+    <!-- Main Content Area -->
+    <main class="content-area">
+      <!-- Left Panel: Graph -->
+      <div class="panel-wrapper left" :style="leftPanelStyle">
+        <GraphPanel 
+          :graphData="graphData"
+          :loading="graphLoading"
+          :currentPhase="currentPhase"
+          @refresh="refreshGraph"
+          @toggle-maximize="toggleMaximize('graph')"
+        />
+      </div>
+
+      <!-- Right Panel: Workbench -->
+      <div class="panel-wrapper right" :style="rightPanelStyle">
+        <WorkbenchPanel 
+          :currentPhase="currentPhase"
+          :projectData="projectData"
+          :ontologyProgress="ontologyProgress"
+          :buildProgress="buildProgress"
+          :graphData="graphData"
+          :systemLogs="systemLogs"
+          @next-step="handleNextStep"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import GraphPanel from '../components/GraphPanel.vue'
+import WorkbenchPanel from '../components/WorkbenchPanel.vue'
+import { generateOntology, getProject, buildGraph, getTaskStatus, getGraphData } from '../api/graph'
+import { getPendingUpload, clearPendingUpload } from '../store/pendingUpload'
+
+const route = useRoute()
+const router = useRouter()
+
+// Layout State
+const viewMode = ref('split') // graph | split | workbench
+
+// Data State
+const currentProjectId = ref(route.params.projectId)
+const loading = ref(false)
+const graphLoading = ref(false)
+const error = ref('')
+const projectData = ref(null)
+const graphData = ref(null)
+const currentPhase = ref(-1) // -1: Upload, 0: Ontology, 1: Build, 2: Complete
+const ontologyProgress = ref(null)
+const buildProgress = ref(null)
+const systemLogs = ref([])
+
+// Polling timers
+let pollTimer = null
+let graphPollTimer = null
+
+// --- Computed Layout Styles ---
+const leftPanelStyle = computed(() => {
+  if (viewMode.value === 'graph') return { width: '100%', opacity: 1, transform: 'translateX(0)' }
+  if (viewMode.value === 'workbench') return { width: '0%', opacity: 0, transform: 'translateX(-20px)' }
+  return { width: '50%', opacity: 1, transform: 'translateX(0)' }
+})
+
+const rightPanelStyle = computed(() => {
+  if (viewMode.value === 'workbench') return { width: '100%', opacity: 1, transform: 'translateX(0)' }
+  if (viewMode.value === 'graph') return { width: '0%', opacity: 0, transform: 'translateX(20px)' }
+  return { width: '50%', opacity: 1, transform: 'translateX(0)' }
+})
+
+// --- Status Computed ---
+const statusClass = computed(() => {
+  if (error.value) return 'error'
+  if (currentPhase.value >= 2) return 'completed'
+  return 'processing'
+})
+
+const statusText = computed(() => {
+  if (error.value) return 'Error'
+  if (currentPhase.value >= 2) return 'Ready'
+  if (currentPhase.value === 1) return 'Building Graph'
+  if (currentPhase.value === 0) return 'Generating Ontology'
+  return 'Initializing'
+})
+
+// --- Helpers ---
+const addLog = (msg) => {
+  const time = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }) + '.' + new Date().getMilliseconds().toString().padStart(3, '0')
+  systemLogs.value.push({ time, msg })
+  // Keep last 100 logs
+  if (systemLogs.value.length > 100) {
+    systemLogs.value.shift()
+  }
+}
+
+// --- Layout Methods ---
+const toggleMaximize = (target) => {
+  if (viewMode.value === target) {
+    viewMode.value = 'split'
+  } else {
+    viewMode.value = target
+  }
+}
+
+const handleNextStep = () => {
+  alert('Environment Setup coming soon...')
+}
+
+// --- Data Logic ---
+
+const initProject = async () => {
+  addLog('Project view initialized.')
+  if (currentProjectId.value === 'new') {
+    await handleNewProject()
+  } else {
+    await loadProject()
+  }
+}
+
+const handleNewProject = async () => {
+  const pending = getPendingUpload()
+  if (!pending.isPending || pending.files.length === 0) {
+    error.value = 'No pending files found.'
+    addLog('Error: No pending files found for new project.')
+    return
+  }
+  
+  try {
+    loading.value = true
+    currentPhase.value = 0
+    ontologyProgress.value = { message: 'Uploading and analyzing docs...' }
+    addLog('Starting ontology generation: Uploading files...')
+    
+    const formData = new FormData()
+    pending.files.forEach(f => formData.append('files', f))
+    formData.append('simulation_requirement', pending.simulationRequirement)
+    
+    const res = await generateOntology(formData)
+    if (res.success) {
+      clearPendingUpload()
+      currentProjectId.value = res.data.project_id
+      projectData.value = res.data
+      
+      router.replace({ name: 'Process', params: { projectId: res.data.project_id } })
+      ontologyProgress.value = null
+      addLog(`Ontology generated successfully for project ${res.data.project_id}`)
+      await startBuildGraph()
+    } else {
+      error.value = res.error || 'Ontology generation failed'
+      addLog(`Error generating ontology: ${error.value}`)
+    }
+  } catch (err) {
+    error.value = err.message
+    addLog(`Exception in handleNewProject: ${err.message}`)
+  } finally {
+    loading.value = false
+  }
+}
+
+const loadProject = async () => {
+  try {
+    loading.value = true
+    addLog(`Loading project ${currentProjectId.value}...`)
+    const res = await getProject(currentProjectId.value)
+    if (res.success) {
+      projectData.value = res.data
+      updatePhaseByStatus(res.data.status)
+      addLog(`Project loaded. Status: ${res.data.status}`)
+      
+      if (res.data.status === 'ontology_generated' && !res.data.graph_id) {
+        await startBuildGraph()
+      } else if (res.data.status === 'graph_building' && res.data.graph_build_task_id) {
+        currentPhase.value = 1
+        startPollingTask(res.data.graph_build_task_id)
+        startGraphPolling()
+      } else if (res.data.status === 'graph_completed' && res.data.graph_id) {
+        currentPhase.value = 2
+        await loadGraph(res.data.graph_id)
+      }
+    } else {
+      error.value = res.error
+      addLog(`Error loading project: ${res.error}`)
+    }
+  } catch (err) {
+    error.value = err.message
+    addLog(`Exception in loadProject: ${err.message}`)
+  } finally {
+    loading.value = false
+  }
+}
+
+const updatePhaseByStatus = (status) => {
+  switch (status) {
+    case 'created':
+    case 'ontology_generated': currentPhase.value = 0; break;
+    case 'graph_building': currentPhase.value = 1; break;
+    case 'graph_completed': currentPhase.value = 2; break;
+    case 'failed': error.value = 'Project failed'; break;
+  }
+}
+
+const startBuildGraph = async () => {
+  try {
+    currentPhase.value = 1
+    buildProgress.value = { progress: 0, message: 'Starting build...' }
+    addLog('Initiating graph build...')
+    
+    const res = await buildGraph({ project_id: currentProjectId.value })
+    if (res.success) {
+      addLog(`Graph build task started. Task ID: ${res.data.task_id}`)
+      startGraphPolling()
+      startPollingTask(res.data.task_id)
+    } else {
+      error.value = res.error
+      addLog(`Error starting build: ${res.error}`)
+    }
+  } catch (err) {
+    error.value = err.message
+    addLog(`Exception in startBuildGraph: ${err.message}`)
+  }
+}
+
+const startGraphPolling = () => {
+  addLog('Started polling for graph data...')
+  fetchGraphData()
+  graphPollTimer = setInterval(fetchGraphData, 10000)
+}
+
+const fetchGraphData = async () => {
+  try {
+    // Refresh project info to check for graph_id
+    const projRes = await getProject(currentProjectId.value)
+    if (projRes.success && projRes.data.graph_id) {
+      const gRes = await getGraphData(projRes.data.graph_id)
+      if (gRes.success) {
+        graphData.value = gRes.data
+        const nodeCount = gRes.data.node_count || gRes.data.nodes?.length || 0
+        const edgeCount = gRes.data.edge_count || gRes.data.edges?.length || 0
+        addLog(`Graph data refreshed. Nodes: ${nodeCount}, Edges: ${edgeCount}`)
+      }
+    }
+  } catch (err) {
+    console.warn('Graph fetch error:', err)
+  }
+}
+
+const startPollingTask = (taskId) => {
+  pollTaskStatus(taskId)
+  pollTimer = setInterval(() => pollTaskStatus(taskId), 2000)
+}
+
+const pollTaskStatus = async (taskId) => {
+  try {
+    const res = await getTaskStatus(taskId)
+    if (res.success) {
+      const task = res.data
+      
+      // Log progress message if it changed
+      if (task.message && task.message !== buildProgress.value?.message) {
+        addLog(task.message)
+      }
+      
+      buildProgress.value = { progress: task.progress || 0, message: task.message }
+      
+      if (task.status === 'completed') {
+        addLog('Graph build task completed.')
+        stopPolling()
+        stopGraphPolling() // Stop polling, do final load
+        currentPhase.value = 2
+        
+        // Final load
+        const projRes = await getProject(currentProjectId.value)
+        if (projRes.success && projRes.data.graph_id) {
+            projectData.value = projRes.data
+            await loadGraph(projRes.data.graph_id)
+        }
+      } else if (task.status === 'failed') {
+        stopPolling()
+        error.value = task.error
+        addLog(`Graph build task failed: ${task.error}`)
+      }
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+const loadGraph = async (graphId) => {
+  graphLoading.value = true
+  addLog(`Loading full graph data: ${graphId}`)
+  try {
+    const res = await getGraphData(graphId)
+    if (res.success) {
+      graphData.value = res.data
+      addLog('Graph data loaded successfully.')
+    } else {
+      addLog(`Failed to load graph data: ${res.error}`)
+    }
+  } catch (e) {
+    addLog(`Exception loading graph: ${e.message}`)
+  } finally {
+    graphLoading.value = false
+  }
+}
+
+const refreshGraph = () => {
+  if (projectData.value?.graph_id) {
+    addLog('Manual graph refresh triggered.')
+    loadGraph(projectData.value.graph_id)
+  }
+}
+
+const stopPolling = () => {
+  if (pollTimer) {
+    clearInterval(pollTimer)
+    pollTimer = null
+  }
+}
+
+const stopGraphPolling = () => {
+  if (graphPollTimer) {
+    clearInterval(graphPollTimer)
+    graphPollTimer = null
+    addLog('Graph polling stopped.')
+  }
+}
+
+onMounted(() => {
+  initProject()
+})
+
+onUnmounted(() => {
+  stopPolling()
+  stopGraphPolling()
+})
+</script>
+
+<style scoped>
+.main-view {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #FFF;
+  overflow: hidden;
+  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* Header */
+.app-header {
+  height: 60px;
+  border-bottom: 1px solid #EAEAEA;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  background: #FFF;
+  z-index: 100;
+}
+
+.brand {
+  font-weight: 800;
+  font-size: 18px;
+  letter-spacing: 1px;
+  cursor: pointer;
+}
+
+.view-switcher {
+  display: flex;
+  background: #F5F5F5;
+  padding: 4px;
+  border-radius: 6px;
+  gap: 4px;
+}
+
+.switch-btn {
+  border: none;
+  background: transparent;
+  padding: 6px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #666;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.switch-btn.active {
+  background: #FFF;
+  color: #000;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #666;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #CCC;
+}
+
+.status-indicator.processing .dot { background: #FF5722; animation: pulse 1s infinite; }
+.status-indicator.completed .dot { background: #4CAF50; }
+.status-indicator.error .dot { background: #F44336; }
+
+@keyframes pulse { 50% { opacity: 0.5; } }
+
+/* Content */
+.content-area {
+  flex: 1;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.panel-wrapper {
+  height: 100%;
+  overflow: hidden;
+  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, transform 0.3s ease;
+  will-change: width, opacity, transform;
+}
+
+.panel-wrapper.left {
+  border-right: 1px solid #EAEAEA;
+}
+</style>