From f758927848f89d2b821fe8eb954cdf6afa5be8a2 Mon Sep 17 00:00:00 2001
From: Hiro <hiro@claudia.docs>
Date: Mon, 30 Mar 2026 23:47:17 +0000
Subject: [PATCH] Phase 3: Graph View, Backlinks UI, Quick Switcher, Dark Mode,
 Export

Features:
- GraphView.vue: SVG-based force-directed graph visualization for projects
- QuickSwitcher.vue: Cmd+K modal with fuzzy search via /search API
- Dark Mode: Theme toggle in Header, persisted in localStorage, system pref support
- Backlinks UI: Incoming and outgoing links in DocumentView
- Export: Document (markdown/JSON) and Project (ZIP/JSON) export with download
- New composables: useTheme.ts for dark/light/system theme management
- New store methods: fetchBacklinks, fetchOutgoingLinks, search, exportDocument, fetchProjectGraph, exportProject
- TypeScript types for all Phase 3 API responses
---
 src/App.vue                             |   7 +
 src/components/common/GraphView.vue     | 419 ++++++++++++++++++++++++
 src/components/common/QuickSwitcher.vue | 360 ++++++++++++++++++++
 src/components/layout/Header.vue        |  61 +++-
 src/composables/useApi.ts               |   3 +-
 src/composables/useTheme.ts             |  76 +++++
 src/stores/documents.ts                 |  57 +++-
 src/stores/projects.ts                  |  27 +-
 src/types/index.ts                      |  97 ++++++
 src/views/DocumentView.vue              | 312 +++++++++++++++++-
 src/views/ProjectView.vue               | 154 +++++++++
 11 files changed, 1563 insertions(+), 10 deletions(-)
 create mode 100644 src/components/common/GraphView.vue
 create mode 100644 src/components/common/QuickSwitcher.vue
 create mode 100644 src/composables/useTheme.ts

diff --git a/src/App.vue b/src/App.vue
index fe45f3c..91f3223 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
+import { onMounted } from 'vue'
 import { RouterView } from 'vue-router'
+import { useTheme } from '@/composables/useTheme'
+
+const { initTheme } = useTheme()
+onMounted(() => {
+  initTheme()
+})
 </script>
 
 <template>
diff --git a/src/components/common/GraphView.vue b/src/components/common/GraphView.vue
new file mode 100644
index 0000000..93dcb52
--- /dev/null
+++ b/src/components/common/GraphView.vue
@@ -0,0 +1,419 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useProjectsStore } from '@/stores/projects'
+import type { GraphData } from '@/types'
+import Button from '@/components/common/Button.vue'
+
+const props = defineProps<{
+  projectId: string
+}>()
+
+defineEmits<{
+  close: []
+}>()
+
+const router = useRouter()
+const projectsStore = useProjectsStore()
+
+const graphData = ref<GraphData | null>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+const depth = ref<1 | 2 | 3>(2)
+
+// Node positions (computed by force simulation)
+interface NodePos {
+  id: string
+  title: string
+  x: number
+  y: number
+  vx: number
+  vy: number
+}
+
+const nodePositions = ref<Map<string, NodePos>>(new Map())
+const svgWidth = ref(800)
+const svgHeight = ref(600)
+const svgRef = ref<SVGSVGElement | null>(null)
+const containerRef = ref<HTMLDivElement | null>(null)
+
+async function loadGraph() {
+  loading.value = true
+  error.value = null
+  try {
+    graphData.value = await projectsStore.fetchProjectGraph(props.projectId, depth.value)
+    initializePositions()
+    runSimulation()
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to load graph'
+  } finally {
+    loading.value = false
+  }
+}
+
+function initializePositions() {
+  if (!graphData.value) return
+  const centerX = svgWidth.value / 2
+  const centerY = svgHeight.value / 2
+  const radius = Math.min(svgWidth.value, svgHeight.value) * 0.35
+
+  const newPositions = new Map<string, NodePos>()
+  graphData.value.nodes.forEach((node, i) => {
+    const angle = (2 * Math.PI * i) / graphData.value!.nodes.length
+    newPositions.set(node.id, {
+      id: node.id,
+      title: node.title,
+      x: centerX + radius * Math.cos(angle),
+      y: centerY + radius * Math.sin(angle),
+      vx: 0,
+      vy: 0
+    })
+  })
+  nodePositions.value = newPositions
+}
+
+function runSimulation(iterations = 150) {
+  if (!graphData.value) return
+
+  for (let i = 0; i < iterations; i++) {
+    simulateStep()
+  }
+}
+
+function simulateStep() {
+  if (!graphData.value) return
+  const nodes = Array.from(nodePositions.value.values())
+  const edges = graphData.value.edges
+
+  const repulsion = 3000
+  const attraction = 0.05
+  const centering = 0.01
+  const damping = 0.85
+
+  // Repulsion between all nodes
+  for (let a = 0; a < nodes.length; a++) {
+    for (let b = a + 1; b < nodes.length; b++) {
+      const na = nodes[a]
+      const nb = nodes[b]
+      const dx = nb.x - na.x
+      const dy = nb.y - na.y
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1
+      const force = repulsion / (dist * dist)
+      const fx = (dx / dist) * force
+      const fy = (dy / dist) * force
+      na.vx -= fx
+      na.vy -= fy
+      nb.vx += fx
+      nb.vy += fy
+    }
+  }
+
+  // Attraction along edges
+  for (const edge of edges) {
+    const source = nodePositions.value.get(edge.source)
+    const target = nodePositions.value.get(edge.target)
+    if (!source || !target) continue
+    const dx = target.x - source.x
+    const dy = target.y - source.y
+    const dist = Math.sqrt(dx * dx + dy * dy) || 1
+    const force = (dist - 80) * attraction
+    const fx = (dx / dist) * force
+    const fy = (dy / dist) * force
+    source.vx += fx
+    source.vy += fy
+    target.vx -= fx
+    target.vy -= fy
+  }
+
+  // Centering force
+  const centerX = svgWidth.value / 2
+  const centerY = svgHeight.value / 2
+  for (const node of nodes) {
+    node.vx += (centerX - node.x) * centering
+    node.vy += (centerY - node.y) * centering
+  }
+
+  // Apply velocities with damping
+  for (const node of nodes) {
+    node.vx *= damping
+    node.vy *= damping
+    node.x += node.vx
+    node.y += node.vy
+
+    // Keep within bounds
+    node.x = Math.max(40, Math.min(svgWidth.value - 40, node.x))
+    node.y = Math.max(40, Math.min(svgHeight.value - 40, node.y))
+
+    nodePositions.value.set(node.id, node)
+  }
+}
+
+function getEdgePath(sourceId: string, targetId: string): string {
+  const source = nodePositions.value.get(sourceId)
+  const target = nodePositions.value.get(targetId)
+  if (!source || !target) return ''
+  return `M ${source.x} ${source.y} L ${target.x} ${target.y}`
+}
+
+function handleNodeClick(nodeId: string) {
+  router.push(`/documents/${nodeId}`)
+}
+
+function handleResize() {
+  if (!containerRef.value) return
+  svgWidth.value = containerRef.value.clientWidth
+  svgHeight.value = containerRef.value.clientHeight
+  if (graphData.value) {
+    initializePositions()
+    runSimulation(100)
+  }
+}
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(async () => {
+  if (containerRef.value) {
+    svgWidth.value = containerRef.value.clientWidth
+    svgHeight.value = containerRef.value.clientHeight
+    resizeObserver = new ResizeObserver(handleResize)
+    resizeObserver.observe(containerRef.value)
+  }
+  await loadGraph()
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+})
+
+watch(depth, () => {
+  loadGraph()
+})
+</script>
+
+<template>
+  <div class="graph-view">
+    <div class="graph-view__header">
+      <h2 class="graph-view__title">Project Graph</h2>
+      <div class="graph-view__controls">
+        <div class="graph-view__depth">
+          <span class="graph-view__depth-label">Depth:</span>
+          <Button
+            v-for="d in [1, 2, 3] as const"
+            :key="d"
+            :variant="depth === d ? 'primary' : 'ghost'"
+            size="sm"
+            @click="depth = d"
+          >{{ d }}</Button>
+        </div>
+        <Button variant="ghost" size="sm" @click="loadGraph">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M23 4v6h-6"/><path d="M1 20v-6h6"/>
+            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+          </svg>
+          Refresh
+        </Button>
+      </div>
+    </div>
+
+    <div v-if="graphData" class="graph-view__stats">
+      <span>{{ graphData.stats.total_documents }} documents</span>
+      <span>{{ graphData.stats.total_references }} references</span>
+      <span v-if="graphData.stats.orphaned_documents > 0" class="graph-view__stat--warning">
+        {{ graphData.stats.orphaned_documents }} orphaned
+      </span>
+    </div>
+
+    <div ref="containerRef" class="graph-view__canvas">
+      <div v-if="loading" class="graph-view__loading">
+        <div class="graph-view__spinner"></div>
+        Loading graph...
+      </div>
+
+      <div v-else-if="error" class="graph-view__error">
+        {{ error }}
+      </div>
+
+      <svg
+        v-else-if="graphData && nodePositions.size > 0"
+        ref="svgRef"
+        :width="svgWidth"
+        :height="svgHeight"
+        class="graph-view__svg"
+      >
+        <!-- Edges -->
+        <g class="graph-view__edges">
+          <path
+            v-for="edge in graphData.edges"
+            :key="`${edge.source}-${edge.target}`"
+            :d="getEdgePath(edge.source, edge.target)"
+            class="graph-view__edge"
+          />
+        </g>
+
+        <!-- Nodes -->
+        <g class="graph-view__nodes">
+          <g
+            v-for="[id, pos] in nodePositions"
+            :key="id"
+            class="graph-view__node"
+            :transform="`translate(${pos.x}, ${pos.y})`"
+            @click="handleNodeClick(id)"
+          >
+            <circle
+              r="24"
+              class="graph-view__node-circle"
+            />
+            <text
+              class="graph-view__node-icon"
+              text-anchor="middle"
+              dominant-baseline="central"
+              dy="0.05em"
+            >📄</text>
+            <title>{{ pos.title }}</title>
+          </g>
+        </g>
+      </svg>
+
+      <div v-else-if="graphData && graphData.nodes.length === 0" class="graph-view__empty">
+        No documents in this project yet.
+      </div>
+    </div>
+
+    <div class="graph-view__legend">
+      <span>Click a node to open the document</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.graph-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--bg-primary);
+}
+
+.graph-view__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.graph-view__title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.graph-view__controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.graph-view__depth {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.graph-view__depth-label {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  margin-right: 0.25rem;
+}
+
+.graph-view__stats {
+  display: flex;
+  gap: 1.5rem;
+  padding: 0.625rem 1.5rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.graph-view__stat--warning {
+  color: #f59e0b;
+}
+
+.graph-view__canvas {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  min-height: 300px;
+}
+
+.graph-view__loading,
+.graph-view__error,
+.graph-view__empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.graph-view__spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.graph-view__svg {
+  display: block;
+  cursor: default;
+}
+
+.graph-view__edge {
+  stroke: var(--border);
+  stroke-width: 1.5;
+  fill: none;
+  transition: stroke 0.15s;
+}
+
+.graph-view__node-circle {
+  fill: var(--bg-secondary);
+  stroke: var(--accent);
+  stroke-width: 2;
+  cursor: pointer;
+  transition: fill 0.15s, stroke 0.15s, transform 0.15s;
+}
+
+.graph-view__node:hover .graph-view__node-circle {
+  fill: var(--accent);
+  stroke: var(--accent-hover);
+  transform: scale(1.1);
+}
+
+.graph-view__node-icon {
+  font-size: 14px;
+  pointer-events: none;
+  user-select: none;
+}
+
+.graph-view__legend {
+  padding: 0.5rem 1.5rem;
+  border-top: 1px solid var(--border);
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  text-align: center;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/components/common/QuickSwitcher.vue b/src/components/common/QuickSwitcher.vue
new file mode 100644
index 0000000..55a7b65
--- /dev/null
+++ b/src/components/common/QuickSwitcher.vue
@@ -0,0 +1,360 @@
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { useDocumentsStore } from '@/stores/documents'
+import type { SearchResult } from '@/types'
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const router = useRouter()
+const documentsStore = useDocumentsStore()
+
+const query = ref('')
+const results = ref<SearchResult[]>([])
+const selectedIndex = ref(0)
+const isLoading = ref(false)
+const inputRef = ref<HTMLInputElement | null>(null)
+const listRef = ref<HTMLUListElement | null>(null)
+
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+watch(() => props.show, async (val) => {
+  if (val) {
+    query.value = ''
+    results.value = []
+    selectedIndex.value = 0
+    await nextTick()
+    inputRef.value?.focus()
+  }
+})
+
+watch(query, (q) => {
+  if (debounceTimer) clearTimeout(debounceTimer)
+  if (!q.trim()) {
+    results.value = []
+    return
+  }
+  debounceTimer = setTimeout(() => {
+    performSearch(q)
+  }, 150)
+})
+
+async function performSearch(q: string) {
+  if (!q.trim()) return
+  isLoading.value = true
+  try {
+    const response = await documentsStore.search(q, 'all', 10)
+    results.value = response.results
+    selectedIndex.value = 0
+  } catch (e) {
+    console.error('Search failed:', e)
+    results.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    selectedIndex.value = Math.min(selectedIndex.value + 1, results.value.length - 1)
+    scrollToSelected()
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    selectedIndex.value = Math.max(selectedIndex.value - 1, 0)
+    scrollToSelected()
+  } else if (e.key === 'Enter') {
+    e.preventDefault()
+    if (results.value[selectedIndex.value]) {
+      selectResult(results.value[selectedIndex.value])
+    }
+  } else if (e.key === 'Escape') {
+    emit('close')
+  }
+}
+
+function scrollToSelected() {
+  nextTick(() => {
+    const item = listRef.value?.children[selectedIndex.value] as HTMLElement
+    item?.scrollIntoView({ block: 'nearest' })
+  })
+}
+
+function selectResult(result: SearchResult) {
+  if (result.type === 'document') {
+    router.push(`/documents/${result.id}`)
+  } else if (result.type === 'project') {
+    router.push(`/projects/${result.id}`)
+  }
+  emit('close')
+}
+
+function getIcon(type: string): string {
+  if (type === 'document') return '📄'
+  if (type === 'project') return '📁'
+  return '📄'
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="quick-switcher">
+      <div v-if="show" class="quick-switcher" @click.self="emit('close')">
+        <div class="quick-switcher__dialog">
+          <div class="quick-switcher__input-wrap">
+            <svg class="quick-switcher__icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="11" cy="11" r="8"/>
+              <path d="m21 21-4.35-4.35"/>
+            </svg>
+            <input
+              ref="inputRef"
+              v-model="query"
+              type="text"
+              class="quick-switcher__input"
+              placeholder="Search documents and projects..."
+              @keydown="handleKeydown"
+            />
+            <kbd class="quick-switcher__kbd">Esc</kbd>
+          </div>
+
+          <div v-if="isLoading" class="quick-switcher__loading">
+            <div class="quick-switcher__spinner"></div>
+            Searching...
+          </div>
+
+          <ul v-else-if="results.length > 0" ref="listRef" class="quick-switcher__results">
+            <li
+              v-for="(result, index) in results"
+              :key="result.id"
+              :class="['quick-switcher__result', { 'quick-switcher__result--selected': index === selectedIndex }]"
+              @click="selectResult(result)"
+              @mouseenter="selectedIndex = index"
+            >
+              <span class="quick-switcher__result-icon">{{ getIcon(result.type) }}</span>
+              <div class="quick-switcher__result-info">
+                <span class="quick-switcher__result-title" v-html="result.highlight || result.title"></span>
+                <span v-if="result.subtitle" class="quick-switcher__result-subtitle">{{ result.subtitle }}</span>
+              </div>
+              <span class="quick-switcher__result-type">{{ result.type }}</span>
+            </li>
+          </ul>
+
+          <div v-else-if="query.trim()" class="quick-switcher__empty">
+            No results found
+          </div>
+
+          <div v-else class="quick-switcher__hint">
+            <p>Start typing to search...</p>
+            <div class="quick-switcher__shortcuts">
+              <span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
+              <span><kbd>Enter</kbd> Open</span>
+              <span><kbd>Esc</kbd> Close</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.quick-switcher {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 15vh;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.quick-switcher__dialog {
+  width: 90%;
+  max-width: 600px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+.quick-switcher__input-wrap {
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+  border-bottom: 1px solid var(--border);
+  gap: 0.75rem;
+}
+
+.quick-switcher__icon {
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+
+.quick-switcher__input {
+  flex: 1;
+  padding: 1rem 0;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  color: var(--text-primary);
+  outline: none;
+}
+
+.quick-switcher__input::placeholder {
+  color: var(--text-secondary);
+}
+
+.quick-switcher__kbd {
+  padding: 0.25rem 0.5rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.quick-switcher__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 2rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.quick-switcher__spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.quick-switcher__results {
+  list-style: none;
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.quick-switcher__result {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.quick-switcher__result--selected {
+  background: var(--bg-secondary);
+}
+
+.quick-switcher__result-icon {
+  font-size: 1.125rem;
+  flex-shrink: 0;
+}
+
+.quick-switcher__result-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.quick-switcher__result-title {
+  font-size: 0.9375rem;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.quick-switcher__result-subtitle {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.quick-switcher__result-type {
+  font-size: 0.75rem;
+  padding: 0.125rem 0.5rem;
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+  color: var(--text-secondary);
+  text-transform: capitalize;
+  flex-shrink: 0;
+}
+
+.quick-switcher__empty {
+  padding: 2rem;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.quick-switcher__hint {
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.quick-switcher__shortcuts {
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+  margin-top: 1rem;
+  font-size: 0.8125rem;
+}
+
+.quick-switcher__shortcuts kbd {
+  padding: 0.125rem 0.375rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  margin-right: 0.25rem;
+}
+
+/* Transitions */
+.quick-switcher-enter-active,
+.quick-switcher-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.quick-switcher-enter-active .quick-switcher__dialog,
+.quick-switcher-leave-active .quick-switcher__dialog {
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.quick-switcher-enter-from,
+.quick-switcher-leave-to {
+  opacity: 0;
+}
+
+.quick-switcher-enter-from .quick-switcher__dialog,
+.quick-switcher-leave-to .quick-switcher__dialog {
+  transform: scale(0.95) translateY(-10px);
+  opacity: 0;
+}
+</style>
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index b69b248..b6a5a2a 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -1,13 +1,33 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import { useTheme } from '@/composables/useTheme'
+import QuickSwitcher from '@/components/common/QuickSwitcher.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
+const { resolvedTheme, toggleTheme } = useTheme()
 
 const searchQuery = ref('')
 const showUserMenu = ref(false)
+const showQuickSwitcher = ref(false)
+
+function handleGlobalKeydown(e: KeyboardEvent) {
+  // Cmd+K or Ctrl+K
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault()
+    showQuickSwitcher.value = true
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleGlobalKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleGlobalKeydown)
+})
 
 function handleSearch() {
   if (searchQuery.value.trim()) {
@@ -50,6 +70,24 @@ function logout() {
     </div>
 
     <div class="header__right">
+      <button class="header__theme-toggle" @click="toggleTheme" :title="resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'">
+        <!-- Sun icon for dark mode (click to go light) -->
+        <svg v-if="resolvedTheme === 'dark'" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="5"/>
+          <line x1="12" y1="1" x2="12" y2="3"/>
+          <line x1="12" y1="21" x2="12" y2="23"/>
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+          <line x1="1" y1="12" x2="3" y2="12"/>
+          <line x1="21" y1="12" x2="23" y2="12"/>
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+        </svg>
+        <!-- Moon icon for light mode (click to go dark) -->
+        <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+        </svg>
+      </button>
       <div class="header__user" @click="showUserMenu = !showUserMenu">
         <div class="header__avatar">
           {{ authStore.user?.username?.charAt(0).toUpperCase() || 'U' }}
@@ -79,6 +117,7 @@ function logout() {
       </div>
     </div>
   </header>
+  <QuickSwitcher :show="showQuickSwitcher" @close="showQuickSwitcher = false" />
 </template>
 
 <style scoped>
@@ -164,6 +203,26 @@ function logout() {
   justify-content: flex-end;
 }
 
+.header__theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+  margin-right: 0.5rem;
+}
+
+.header__theme-toggle:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
 .header__user {
   position: relative;
   display: flex;
diff --git a/src/composables/useApi.ts b/src/composables/useApi.ts
index ab0405d..b23f525 100644
--- a/src/composables/useApi.ts
+++ b/src/composables/useApi.ts
@@ -3,8 +3,7 @@ import router from '@/router'
 
 const BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000/api/v1'
 
-// Helper to get token - always accesses the store freshly to avoid stale closures
-function getToken(): string | null {
+export function getToken(): string | null {
   try {
     const authStore = useAuthStore()
     // In Pinia setup stores, refs are auto-unwrapped on store access
diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
new file mode 100644
index 0000000..5656df0
--- /dev/null
+++ b/src/composables/useTheme.ts
@@ -0,0 +1,76 @@
+import { ref, onMounted } from 'vue'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+const STORAGE_KEY = 'claudia-theme'
+
+function getSystemPrefersDark(): boolean {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+function getInitialTheme(): Theme {
+  const stored = localStorage.getItem(STORAGE_KEY)
+  if (stored === 'light' || stored === 'dark' || stored === 'system') {
+    return stored
+  }
+  return 'system'
+}
+
+function resolveTheme(theme: Theme): 'light' | 'dark' {
+  if (theme === 'system') {
+    return getSystemPrefersDark() ? 'dark' : 'light'
+  }
+  return theme
+}
+
+const theme = ref<Theme>(getInitialTheme())
+const resolvedTheme = ref<'light' | 'dark'>(resolveTheme(theme.value))
+
+function applyTheme(resolved: 'light' | 'dark') {
+  const root = document.documentElement
+  if (resolved === 'dark') {
+    root.classList.add('dark')
+  } else {
+    root.classList.remove('dark')
+  }
+}
+
+function setTheme(newTheme: Theme) {
+  theme.value = newTheme
+  localStorage.setItem(STORAGE_KEY, newTheme)
+  resolvedTheme.value = resolveTheme(newTheme)
+  applyTheme(resolvedTheme.value)
+}
+
+function toggleTheme() {
+  const current = resolvedTheme.value
+  setTheme(current === 'dark' ? 'light' : 'dark')
+}
+
+function initTheme() {
+  resolvedTheme.value = resolveTheme(theme.value)
+  applyTheme(resolvedTheme.value)
+
+  // Listen for system preference changes
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+  mediaQuery.addEventListener('change', () => {
+    if (theme.value === 'system') {
+      resolvedTheme.value = resolveTheme('system')
+      applyTheme(resolvedTheme.value)
+    }
+  })
+}
+
+export function useTheme() {
+  onMounted(() => {
+    initTheme()
+  })
+
+  return {
+    theme,
+    resolvedTheme,
+    setTheme,
+    toggleTheme,
+    initTheme
+  }
+}
diff --git a/src/stores/documents.ts b/src/stores/documents.ts
index 562815d..0da17ec 100644
--- a/src/stores/documents.ts
+++ b/src/stores/documents.ts
@@ -1,7 +1,18 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import type { Document, Tag, DocumentReasoning, ReasoningStep, ReasoningPanelData, TipTapContentResponse } from '@/types'
-import { useApi } from '@/composables/useApi'
+import type {
+  Document,
+  Tag,
+  DocumentReasoning,
+  ReasoningStep,
+  ReasoningPanelData,
+  TipTapContentResponse,
+  BacklinksResponse,
+  OutgoingLinksResponse,
+  DocumentLinksResponse,
+  SearchResponse
+} from '@/types'
+import { useApi, getToken } from '@/composables/useApi'
 
 export const useDocumentsStore = defineStore('documents', () => {
   const currentDocument = ref<Document | null>(null)
@@ -147,6 +158,40 @@ export const useDocumentsStore = defineStore('documents', () => {
     await api.delete(`/documents/${documentId}/reasoning-steps/${step}`)
   }
 
+  // Phase 3: Backlinks & Links
+  async function fetchBacklinks(documentId: string): Promise<BacklinksResponse> {
+    return await api.get<BacklinksResponse>(`/documents/${documentId}/backlinks`)
+  }
+
+  async function fetchOutgoingLinks(documentId: string): Promise<OutgoingLinksResponse> {
+    return await api.get<OutgoingLinksResponse>(`/documents/${documentId}/outgoing-links`)
+  }
+
+  async function fetchDocumentLinks(documentId: string): Promise<DocumentLinksResponse> {
+    return await api.get<DocumentLinksResponse>(`/documents/${documentId}/links`)
+  }
+
+  // Phase 3: Search
+  async function search(query: string, type = 'documents', limit = 10, projectId?: string): Promise<SearchResponse> {
+    const params = new URLSearchParams({ q: query, type, limit: String(limit) })
+    if (projectId) params.set('project_id', projectId)
+    return await api.get<SearchResponse>(`/search?${params}`)
+  }
+
+  // Phase 3: Export
+  async function exportDocument(documentId: string, format: 'markdown' | 'json'): Promise<Blob> {
+    const BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000/api/v1'
+    // Use raw fetch to handle binary response
+    const response = await fetch(`${BASE_URL}/documents/${documentId}/export?format=${format}`, {
+      headers: {
+        'Authorization': `Bearer ${getToken()}`
+      },
+      credentials: 'include'
+    })
+    if (!response.ok) throw new Error('Export failed')
+    return await response.blob()
+  }
+
   return {
     currentDocument,
     tags,
@@ -167,6 +212,12 @@ export const useDocumentsStore = defineStore('documents', () => {
     fetchTags,
     createTag,
     assignTags,
-    removeTag
+    removeTag,
+    // Phase 3
+    fetchBacklinks,
+    fetchOutgoingLinks,
+    fetchDocumentLinks,
+    search,
+    exportDocument
   }
 })
diff --git a/src/stores/projects.ts b/src/stores/projects.ts
index 4fd25d5..5aaa653 100644
--- a/src/stores/projects.ts
+++ b/src/stores/projects.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import type { Project, Folder, Document, TreeNode } from '@/types'
-import { useApi } from '@/composables/useApi'
+import type { Project, Folder, Document, TreeNode, GraphData } from '@/types'
+import { useApi, getToken } from '@/composables/useApi'
 
 export const useProjectsStore = defineStore('projects', () => {
   const projects = ref<Project[]>([])
@@ -157,6 +157,24 @@ export const useProjectsStore = defineStore('projects', () => {
     }
   }
 
+  // Phase 3: Graph
+  async function fetchProjectGraph(projectId: string, depth = 2): Promise<GraphData> {
+    return await api.get<GraphData>(`/projects/${projectId}/graph?depth=${depth}`)
+  }
+
+  // Phase 3: Project Export
+  async function exportProject(projectId: string, format: 'zip' | 'json', includeMetadata = true): Promise<Blob> {
+    const BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000/api/v1'
+    const response = await fetch(`${BASE_URL}/projects/${projectId}/export?format=${format}&include_metadata=${includeMetadata}`, {
+      headers: {
+        'Authorization': `Bearer ${getToken()}`
+      },
+      credentials: 'include'
+    })
+    if (!response.ok) throw new Error('Export failed')
+    return await response.blob()
+  }
+
   return {
     projects,
     currentProject,
@@ -172,6 +190,9 @@ export const useProjectsStore = defineStore('projects', () => {
     updateProject,
     deleteProject,
     createFolder,
-    deleteFolder
+    deleteFolder,
+    // Phase 3
+    fetchProjectGraph,
+    exportProject
   }
 })
diff --git a/src/types/index.ts b/src/types/index.ts
index cb751f6..ab41b28 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -106,6 +106,103 @@ export interface DocumentsResponse {
   documents: Document[]
 }
 
+// Graph types
+export interface GraphNode {
+  id: string
+  title: string
+  type: 'document'
+}
+
+export interface GraphEdge {
+  source: string
+  target: string
+  type: 'reference'
+}
+
+export interface GraphStats {
+  total_documents: number
+  total_references: number
+  orphaned_documents: number
+}
+
+export interface GraphData {
+  project_id: string
+  nodes: GraphNode[]
+  edges: GraphEdge[]
+  stats: GraphStats
+}
+
+// Backlinks types
+export interface BacklinkItem {
+  document_id: string
+  title: string
+  project_id: string
+  project_name: string
+  excerpt: string
+  updated_at: string
+}
+
+export interface BacklinksResponse {
+  document_id: string
+  backlinks_count: number
+  backlinks: BacklinkItem[]
+}
+
+export interface OutgoingLinkItem {
+  document_id: string
+  title: string
+  project_id: string
+  project_name: string
+  exists: boolean
+  updated_at: string
+}
+
+export interface OutgoingLinksResponse {
+  document_id: string
+  outgoing_links_count: number
+  outgoing_links: OutgoingLinkItem[]
+}
+
+export interface DocumentLinkRef {
+  document_id: string
+  title: string
+  anchor_text: string
+}
+
+export interface DocumentLinksResponse {
+  document_id: string
+  outgoing_links: DocumentLinkRef[]
+  backlinks: DocumentLinkRef[]
+}
+
+// Search / Quick Switcher types
+export interface SearchResult {
+  id: string
+  type: 'document' | 'project'
+  title: string
+  subtitle: string | null
+  highlight: string | null
+  icon: string
+  project_id?: string
+}
+
+export interface SearchResponse {
+  query: string
+  results: SearchResult[]
+  total: number
+  search_type: string
+}
+
+// Export types
+export interface DocumentExportResponse {
+  // The API returns the raw file, not JSON
+  // This is for type safety on the response
+}
+
+export interface ProjectExportResponse {
+  // The API returns the raw file, not JSON
+}
+
 // Form inputs
 export interface LoginForm {
   username: string
diff --git a/src/views/DocumentView.vue b/src/views/DocumentView.vue
index d88690e..546f079 100644
--- a/src/views/DocumentView.vue
+++ b/src/views/DocumentView.vue
@@ -2,7 +2,7 @@
 import { ref, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useDocumentsStore } from '@/stores/documents'
-import type { DocumentReasoning } from '@/types'
+import type { DocumentReasoning, BacklinksResponse, OutgoingLinksResponse } from '@/types'
 import Header from '@/components/layout/Header.vue'
 import Button from '@/components/common/Button.vue'
 import Modal from '@/components/common/Modal.vue'
@@ -22,6 +22,28 @@ const showReasoningPanel = ref(true)
 const saveTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 const isReady = ref(false)
 
+// Phase 3: Backlinks & Links
+const backlinks = ref<BacklinksResponse | null>(null)
+const outgoingLinks = ref<OutgoingLinksResponse | null>(null)
+const backlinksLoading = ref(false)
+const showExportModal = ref(false)
+const exportFormat = ref<'markdown' | 'json'>('markdown')
+const exporting = ref(false)
+
+async function fetchLinks(docId: string) {
+  backlinksLoading.value = true
+  try {
+    const [bl, ol] = await Promise.all([
+      documentsStore.fetchBacklinks(docId).catch(() => null),
+      documentsStore.fetchOutgoingLinks(docId).catch(() => null)
+    ])
+    backlinks.value = bl
+    outgoingLinks.value = ol
+  } finally {
+    backlinksLoading.value = false
+  }
+}
+
 onMounted(async () => {
   const docId = route.params.id as string
   await documentsStore.fetchDocument(docId)
@@ -40,6 +62,9 @@ onMounted(async () => {
     } else {
       tiptapContent.value = { type: 'doc', content: [{ type: 'paragraph' }] }
     }
+
+    // Load backlinks
+    await fetchLinks(docId)
   }
 })
 
@@ -55,6 +80,7 @@ watch(() => route.params.id, async (newId) => {
       } else {
         tiptapContent.value = markdownToTiptap(documentsStore.currentDocument.content)
       }
+      await fetchLinks(newId as string)
     }
   }
 })
@@ -189,6 +215,37 @@ async function goBack() {
   }
 }
 
+// Phase 3: Export
+async function handleExport() {
+  if (!documentsStore.currentDocument) return
+  exporting.value = true
+  try {
+    const blob = await documentsStore.exportDocument(documentsStore.currentDocument.id, exportFormat.value)
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    const title = documentsStore.currentDocument.title.replace(/[^a-z0-9]/gi, '_')
+    a.href = url
+    a.download = `${title}.${exportFormat.value}`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+    showExportModal.value = false
+  } catch (e) {
+    console.error('Export failed:', e)
+  } finally {
+    exporting.value = false
+  }
+}
+
+function openExportModal() {
+  showExportModal.value = true
+}
+
+function navigateToDocument(docId: string) {
+  router.push(`/documents/${docId}`)
+}
+
 async function handleReasoningUpdate(reasoning: DocumentReasoning) {
   if (!documentsStore.currentDocument) return
   await documentsStore.updateReasoning(documentsStore.currentDocument.id, reasoning)
@@ -265,6 +322,14 @@ const tagColors = [
                 </svg>
                 Saved
               </div>
+              <button class="doc-view__export" @click="openExportModal" title="Export document">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                  <polyline points="7 10 12 15 17 10"/>
+                  <line x1="12" y1="15" x2="12" y2="3"/>
+                </svg>
+                Export
+              </button>
             </div>
           </div>
 
@@ -298,6 +363,58 @@ const tagColors = [
             </button>
           </div>
 
+          <!-- Phase 3: Backlinks & Outgoing Links -->
+          <div class="doc-view__links" v-if="backlinks || outgoingLinks">
+            <div v-if="backlinks && backlinks.backlinks.length > 0" class="doc-view__links-section">
+              <h3 class="doc-view__links-title">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+                  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+                </svg>
+                Backlinks ({{ backlinks.backlinks_count }})
+              </h3>
+              <div class="doc-view__links-list">
+                <button
+                  v-for="bl in backlinks.backlinks"
+                  :key="bl.document_id"
+                  class="doc-view__link-item"
+                  @click="navigateToDocument(bl.document_id)"
+                >
+                  <span class="doc-view__link-icon">📄</span>
+                  <span class="doc-view__link-info">
+                    <span class="doc-view__link-title">{{ bl.title }}</span>
+                    <span class="doc-view__link-project">{{ bl.project_name }}</span>
+                  </span>
+                </button>
+              </div>
+            </div>
+
+            <div v-if="outgoingLinks && outgoingLinks.outgoing_links.length > 0" class="doc-view__links-section">
+              <h3 class="doc-view__links-title">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <line x1="5" y1="12" x2="19" y2="12"/>
+                  <polyline points="12 5 19 12 12 19"/>
+                </svg>
+                Outgoing Links ({{ outgoingLinks.outgoing_links_count }})
+              </h3>
+              <div class="doc-view__links-list">
+                <button
+                  v-for="ol in outgoingLinks.outgoing_links"
+                  :key="ol.document_id"
+                  class="doc-view__link-item"
+                  :class="{ 'doc-view__link-item--broken': !ol.exists }"
+                  @click="ol.exists && navigateToDocument(ol.document_id)"
+                >
+                  <span class="doc-view__link-icon">{{ ol.exists ? '📄' : '⚠️' }}</span>
+                  <span class="doc-view__link-info">
+                    <span class="doc-view__link-title">{{ ol.title || 'Unknown Document' }}</span>
+                    <span class="doc-view__link-project">{{ ol.exists ? ol.project_name : 'Document not found' }}</span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+
           <div class="doc-view__editor">
             <TipTapEditor
               v-if="tiptapContent"
@@ -352,6 +469,46 @@ const tagColors = [
         <Button variant="primary" @click="createAndAssignTag">Add Tag</Button>
       </template>
     </Modal>
+
+    <!-- Export Modal -->
+    <Modal :show="showExportModal" title="Export Document" @close="showExportModal = false">
+      <div class="form__field">
+        <label class="form__label">Format</label>
+        <div class="export-formats">
+          <button
+            :class="['export-format', { 'export-format--selected': exportFormat === 'markdown' }]"
+            @click="exportFormat = 'markdown'"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+              <polyline points="14 2 14 8 20 8"/>
+              <line x1="16" y1="13" x2="8" y2="13"/>
+              <line x1="16" y1="17" x2="8" y2="17"/>
+              <polyline points="10 9 9 9 8 9"/>
+            </svg>
+            <span>Markdown</span>
+            <small>.md file</small>
+          </button>
+          <button
+            :class="['export-format', { 'export-format--selected': exportFormat === 'json' }]"
+            @click="exportFormat = 'json'"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+              <polyline points="14 2 14 8 20 8"/>
+              <path d="M8 13h2"/><path d="M8 17h2"/>
+              <path d="M14 13h2"/><path d="M14 17h2"/>
+            </svg>
+            <span>JSON</span>
+            <small>.json with metadata</small>
+          </button>
+        </div>
+      </div>
+      <template #footer>
+        <Button variant="secondary" @click="showExportModal = false">Cancel</Button>
+        <Button variant="primary" :loading="exporting" @click="handleExport">Download</Button>
+      </template>
+    </Modal>
   </div>
 </template>
 
@@ -505,6 +662,26 @@ const tagColors = [
   color: #22c55e;
 }
 
+.doc-view__export {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  margin-left: 0.75rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.doc-view__export:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
 .doc-view__header {
   margin-bottom: 1rem;
 }
@@ -589,6 +766,139 @@ const tagColors = [
   flex-direction: column;
 }
 
+/* Phase 3: Backlinks */
+.doc-view__links {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.doc-view__links-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.doc-view__links-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.doc-view__links-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.doc-view__link-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.15s;
+  text-align: left;
+  max-width: 280px;
+}
+
+.doc-view__link-item:hover {
+  border-color: var(--accent);
+  background: var(--bg-tertiary);
+}
+
+.doc-view__link-item--broken {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.doc-view__link-item--broken:hover {
+  border-color: var(--border);
+  background: var(--bg-secondary);
+}
+
+.doc-view__link-icon {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.doc-view__link-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.doc-view__link-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.doc-view__link-project {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Export Modal Styles */
+.export-formats {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.export-format {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.25rem 1rem;
+  background: var(--bg-secondary);
+  border: 2px solid var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.15s;
+  color: var(--text-secondary);
+}
+
+.export-format:hover {
+  border-color: var(--accent);
+  color: var(--text-primary);
+}
+
+.export-format--selected {
+  border-color: var(--accent);
+  background: rgba(99, 102, 241, 0.08);
+  color: var(--accent);
+}
+
+.export-format span {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.export-format small {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
 /* Form styles */
 .form__field {
   margin-bottom: 1.25rem;
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index ac53edf..ea45a0d 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -7,6 +7,7 @@ import Header from '@/components/layout/Header.vue'
 import Sidebar from '@/components/layout/Sidebar.vue'
 import Button from '@/components/common/Button.vue'
 import Modal from '@/components/common/Modal.vue'
+import GraphView from '@/components/common/GraphView.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -20,6 +21,12 @@ const newDocName = ref('')
 const selectedParentId = ref<string | null>(null)
 const creating = ref(false)
 
+// Phase 3: Graph & Export
+const showGraphView = ref(false)
+const showExportModal = ref(false)
+const exportFormat = ref<'zip' | 'json'>('zip')
+const exporting = ref(false)
+
 onMounted(async () => {
   const projectId = route.params.id as string
   await projectsStore.fetchProject(projectId)
@@ -87,6 +94,38 @@ async function createDocument() {
     creating.value = false
   }
 }
+
+// Phase 3: Graph
+function openGraphView() {
+  showGraphView.value = true
+}
+
+// Phase 3: Export
+function openExportModal() {
+  showExportModal.value = true
+}
+
+async function handleExport() {
+  if (!projectsStore.currentProject) return
+  exporting.value = true
+  try {
+    const blob = await projectsStore.exportProject(projectsStore.currentProject.id, exportFormat.value)
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    const name = projectsStore.currentProject.name.replace(/[^a-z0-9]/gi, '_')
+    a.href = url
+    a.download = `${name}.${exportFormat.value}`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+    showExportModal.value = false
+  } catch (e) {
+    console.error('Export failed:', e)
+  } finally {
+    exporting.value = false
+  }
+}
 </script>
 
 <template>
@@ -119,6 +158,26 @@ async function createDocument() {
             <p class="project__hint">
               Select a document from the sidebar or create a new one to get started.
             </p>
+            <div class="project__actions">
+              <Button variant="secondary" @click="openGraphView">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <circle cx="18" cy="5" r="3"/>
+                  <circle cx="6" cy="12" r="3"/>
+                  <circle cx="18" cy="19" r="3"/>
+                  <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
+                  <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
+                </svg>
+                View Graph
+              </Button>
+              <Button variant="secondary" @click="openExportModal">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                  <polyline points="7 10 12 15 17 10"/>
+                  <line x1="12" y1="15" x2="12" y2="3"/>
+                </svg>
+                Export
+              </Button>
+            </div>
           </div>
         </div>
       </main>
@@ -165,6 +224,51 @@ async function createDocument() {
         <Button variant="primary" :loading="creating" @click="createDocument">Create Document</Button>
       </template>
     </Modal>
+
+    <!-- Graph View Modal -->
+    <Modal :show="showGraphView" title="" size="lg" @close="showGraphView = false">
+      <GraphView
+        v-if="projectsStore.currentProject"
+        :project-id="projectsStore.currentProject.id"
+        @close="showGraphView = false"
+      />
+    </Modal>
+
+    <!-- Export Modal -->
+    <Modal :show="showExportModal" title="Export Project" @close="showExportModal = false">
+      <div class="form__field">
+        <label class="form__label">Format</label>
+        <div class="export-formats">
+          <button
+            :class="['export-format', { 'export-format--selected': exportFormat === 'zip' }]"
+            @click="exportFormat = 'zip'"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+            </svg>
+            <span>ZIP Archive</span>
+            <small>Documents as .md files</small>
+          </button>
+          <button
+            :class="['export-format', { 'export-format--selected': exportFormat === 'json' }]"
+            @click="exportFormat = 'json'"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+              <polyline points="14 2 14 8 20 8"/>
+              <path d="M8 13h2"/><path d="M8 17h2"/>
+              <path d="M14 13h2"/><path d="M14 17h2"/>
+            </svg>
+            <span>JSON</span>
+            <small>Full project with metadata</small>
+          </button>
+        </div>
+      </div>
+      <template #footer>
+        <Button variant="secondary" @click="showExportModal = false">Cancel</Button>
+        <Button variant="primary" :loading="exporting" @click="handleExport">Download</Button>
+      </template>
+    </Modal>
   </div>
 </template>
 
@@ -244,6 +348,13 @@ async function createDocument() {
   color: var(--text-secondary);
 }
 
+.project__actions {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
 /* Form styles */
 .form__field {
   margin-bottom: 1.25rem;
@@ -282,4 +393,47 @@ async function createDocument() {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 }
+
+/* Export Modal Styles */
+.export-formats {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.export-format {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.25rem 1rem;
+  background: var(--bg-secondary);
+  border: 2px solid var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.15s;
+  color: var(--text-secondary);
+}
+
+.export-format:hover {
+  border-color: var(--accent);
+  color: var(--text-primary);
+}
+
+.export-format--selected {
+  border-color: var(--accent);
+  background: rgba(99, 102, 241, 0.08);
+  color: var(--accent);
+}
+
+.export-format span {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.export-format small {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
 </style>