popilot 0.6.0 → 0.8.0

package/scaffold/spec-site/src/components/DocsSidebar.vue

@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { apiGet, apiPut, apiPatch } from '@/composables/useTurso'
+import TreeNode from './TreeNode.vue'
+import Icon from './Icon.vue'
+
+interface DocNode {
+  id: string; title: string; icon: string | null; is_folder: number
+  parent_id: string | null; sort_order: number; children: DocNode[]
+}
+
+const props = defineProps<{ activeDocId?: string }>()
+const emit = defineEmits<{ refresh: [] }>()
+const router = useRouter()
+
+const tree = ref<DocNode[]>([])
+const expanded = ref<Set<string>>(new Set())
+const searchQuery = ref('')
+const searchResults = ref<any[]>([])
+const selectedTag = ref('')
+let searchTimer: ReturnType<typeof setTimeout> | null = null
+
+async function onSearch() {
+  if (searchTimer) clearTimeout(searchTimer)
+  if (!searchQuery.value.trim()) { searchResults.value = []; return }
+  searchTimer = setTimeout(async () => {
+    const { data } = await apiGet<{ results: any[] }>(`/api/v2/docs/search?q=${encodeURIComponent(searchQuery.value)}`)
+    searchResults.value = data?.results || []
+  }, 300)
+}
+
+const allTags = computed(() => {
+  const tags = new Set<string>()
+  function collect(nodes: DocNode[]) {
+    for (const n of nodes) {
+      if ((n as any).tags) {
+        try { JSON.parse((n as any).tags).forEach((t: string) => tags.add(t)) } catch {}
+      }
+      if (n.children) collect(n.children)
+    }
+  }
+  collect(tree.value)
+  return Array.from(tags)
+})
+const creatingFolder = ref(false)
+const newFolderName = ref('')
+const dragId = ref('')
+const ctxMenu = ref<{ x: number; y: number; node: any } | null>(null)
+const renamingId = ref<string | null>(null)
+const renameText = ref('')
+
+function onCtxMenu(e: MouseEvent, node: any) {
+  // Adjust scroll position + prevent overflow off-screen
+  const menuH = 120 // estimated menu height
+  const y = Math.min(e.clientY, window.innerHeight - menuH)
+  const x = Math.min(e.clientX, window.innerWidth - 160)
+  ctxMenu.value = { x, y, node }
+}
+
+function closeCtxMenu() { ctxMenu.value = null }
+
+// Bulk MD file upload
+const uploadProgress = ref({ current: 0, total: 0 })
+
+async function bulkUploadMd(e: Event) {
+  const input = e.target as HTMLInputElement
+  const files = input.files
+  if (!files?.length) return
+  const fileArr = Array.from(files)
+  uploadProgress.value = { current: 0, total: fileArr.length }
+
+  // Parent ID of current selected folder
+  const parentId = props.activeDocId || null
+  let count = 0
+  // Fetch existing sibling titles from BE
+  const { data: sibData } = await apiGet(`/api/v2/docs/children?parentId=${parentId || ''}`)
+  const existingTitles = new Set(((sibData as any)?.docs || []).map((d: any) => d.title))
+
+  for (const file of fileArr) {
+    const text = await file.text()
+    let title = file.name.replace(/\.(md|txt)$/i, '')
+    // Duplicate title suffix
+    let suffix = 1
+    while (existingTitles.has(title)) { title = `${file.name.replace(/\.(md|txt)$/i, '')} (${suffix++})` }
+    existingTitles.add(title)
+
+    const slug = `upload-${Date.now()}-${count}`
+    const { error } = await apiPut(`/api/v2/docs/${slug}`, { title, content: text, contentFormat: 'markdown', parentId })
+    if (!error) count++
+    uploadProgress.value.current = uploadProgress.value.current + 1
+  }
+  input.value = ''
+  const failed = fileArr.length - count
+  uploadProgress.value = { current: 0, total: 0 }
+  alert(`${count} uploaded successfully${failed ? `, ${failed} failed` : ''}`)
+  await loadTree()
+}
+
+async function ctxDelete() {
+  if (!ctxMenu.value || !confirm('Delete this document?')) return
+  await apiPatch(`/api/v2/docs/${ctxMenu.value.node.id}`, { archived: 1 })
+  closeCtxMenu(); await loadTree()
+}
+
+function ctxRename() {
+  if (!ctxMenu.value) return
+  renamingId.value = ctxMenu.value.node.id
+  renameText.value = ctxMenu.value.node.title
+  closeCtxMenu()
+}
+
+async function submitRename() {
+  if (!renamingId.value || !renameText.value.trim()) return
+  await apiPatch(`/api/v2/docs/${renamingId.value}`, { title: renameText.value.trim() })
+  renamingId.value = null; await loadTree()
+}
+
+async function ctxNewChild() {
+  if (!ctxMenu.value) return
+  const slug = `doc-${Date.now()}`
+  await apiPut(`/api/v2/docs/${slug}`, { title: 'New Document', content: '' })
+  await apiPatch(`/api/v2/docs/${slug}/move`, { parentId: ctxMenu.value.node.id })
+  closeCtxMenu(); await loadTree()
+  router.push(`/docs/${slug}`)
+}
+
+async function loadTree() {
+  const { data } = await apiGet<{ tree: DocNode[] }>('/api/v2/docs/tree')
+  tree.value = data?.tree || []
+  // Auto-expand: parents of the current document
+  if (props.activeDocId) expandParents(tree.value, props.activeDocId)
+}
+
+function expandParents(nodes: DocNode[], targetId: string): boolean {
+  for (const n of nodes) {
+    if (n.id === targetId) return true
+    if (n.children.length && expandParents(n.children, targetId)) {
+      expanded.value.add(n.id)
+      return true
+    }
+  }
+  return false
+}
+
+function toggle(id: string) {
+  if (expanded.value.has(id)) expanded.value.delete(id)
+  else expanded.value.add(id)
+}
+
+function navigate(id: string) {
+  router.push(`/docs/${id}`)
+}
+
+async function createFolder() {
+  if (!newFolderName.value.trim()) return
+  const slug = newFolderName.value.trim().toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '')
+  await apiPut('/api/v2/docs/' + slug, { title: newFolderName.value.trim(), content: '' })
+  newFolderName.value = ''
+  creatingFolder.value = false
+  await loadTree()
+}
+
+function onDragStart(e: DragEvent, id: string) {
+  dragId.value = id
+  e.dataTransfer?.setData('doc-id', id)
+}
+
+async function onDropRoot(e: DragEvent) {
+  e.preventDefault()
+  const sourceId = e.dataTransfer?.getData('doc-id') || dragId.value
+  if (!sourceId) return
+  await apiPatch(`/api/v2/docs/${sourceId}/move`, { parentId: null })
+  await loadTree(); dragId.value = ''
+}
+
+async function onDrop(e: DragEvent, target: DocNode) {
+  e.preventDefault()
+  const sourceId = e.dataTransfer?.getData('doc-id') || dragId.value
+  if (!sourceId || sourceId === target.id) return
+
+  await apiPatch(`/api/v2/docs/${sourceId}/move`, { parentId: target.id })
+  await loadTree()
+  dragId.value = ''
+}
+
+// Sidebar tree polling (60s)
+let treePollTimer: ReturnType<typeof setInterval> | null = null
+onMounted(() => { loadTree(); treePollTimer = setInterval(loadTree, 60000) })
+onUnmounted(() => { if (treePollTimer) clearInterval(treePollTimer) })
+</script>
+
+<template>
+  <div class="docs-sidebar">
+    <div class="sidebar-header">
+      <span class="sidebar-title">Documents</span>
+      <button class="sidebar-btn" @click="creatingFolder = true" title="New folder"><Icon name="folderPlus" :size="16" /></button>
+      <button class="sidebar-btn" @click="router.push('/docs/new')" title="New document"><Icon name="filePlus" :size="16" /></button>
+      <!-- Bulk MD file upload -->
+      <label class="sidebar-btn" title="Upload MD files">
+        <Icon name="upload" :size="16" />
+        <input type="file" accept=".md,.txt" multiple hidden @change="bulkUploadMd" />
+      </label>
+      <span v-if="uploadProgress.total" class="upload-prog">{{ uploadProgress.current }}/{{ uploadProgress.total }}</span>
+    </div>
+
+    <div v-if="creatingFolder" class="folder-input-wrap">
+      <input v-model="newFolderName" class="folder-input" placeholder="Folder name" @keyup.enter="createFolder" autofocus />
+      <button class="sidebar-btn" @click="createFolder">&#10003;</button>
+    </div>
+
+    <!-- Search -->
+    <div class="sidebar-search">
+      <input v-model="searchQuery" class="search-input" placeholder="Search..." @input="onSearch" />
+    </div>
+
+    <!-- Search results -->
+    <div v-if="searchResults.length" class="search-results">
+      <div v-for="r in searchResults" :key="r.id" class="search-item" @click="navigate(r.id)">
+        <span class="search-icon">{{ (r.icon && !r.icon.startsWith('Icon') && !r.icon.startsWith('<')) ? r.icon : '📄' }}</span>
+        <div>
+          <div class="search-title">{{ r.title }}</div>
+          <div class="search-snippet">{{ r.snippet }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tag filter -->
+    <div v-if="allTags.length && !searchQuery" class="tag-filter">
+      <span v-for="tag in allTags" :key="tag" class="tag-chip" :class="{ active: selectedTag === tag }" @click="selectedTag = selectedTag === tag ? '' : tag">{{ tag }}</span>
+    </div>
+
+    <!-- Root drop zone -->
+    <div class="root-drop" @dragover.prevent @drop.prevent.stop="onDropRoot">Move to root</div>
+
+    <div class="tree-list">
+      <TreeNode
+        v-for="node in tree"
+        :key="node.id"
+        :node="node"
+        :active-doc-id="activeDocId"
+        :expanded="expanded"
+        :depth="0"
+        @toggle="toggle"
+        @dragstart="onDragStart"
+        @drop="onDrop"
+        @contextmenu="onCtxMenu"
+      />
+    </div>
+    <!-- Context menu -->
+    <div v-if="ctxMenu" class="ctx-overlay" @click="closeCtxMenu" />
+    <div v-if="ctxMenu" class="ctx-menu" :style="{ left: ctxMenu.x + 'px', top: ctxMenu.y + 'px' }">
+      <div class="ctx-item" @click="ctxNewChild"><Icon name="filePlus" :size="14" /> New sub-document</div>
+      <div class="ctx-item" @click="ctxRename"><Icon name="pencil" :size="14" /> Rename</div>
+      <div class="ctx-item ctx-danger" @click="ctxDelete"><Icon name="trash" :size="14" /> Delete</div>
+    </div>
+
+    <!-- Rename inline -->
+    <div v-if="renamingId" class="rename-overlay" @click.self="renamingId = null">
+      <div class="rename-box">
+        <input v-model="renameText" class="rename-input" @keyup.enter="submitRename" autofocus />
+        <button class="btn btn--xs btn--primary" @click="submitRename">OK</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.docs-sidebar { width: 260px; min-width: 260px; height: 100%; overflow-y: auto; background: var(--bg-sidebar, #2b2d36); display: flex; flex-direction: column; color: var(--text-sidebar, #d1d5db); }
+.sidebar-header { display: flex; align-items: center; padding: 12px 16px; gap: 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }
+.tree-list { flex: 1; overflow-y: auto; padding: 8px 0; }
+.sidebar-title { font-size: 13px; font-weight: 700; flex: 1; }
+.sidebar-btn { border: none; background: none; font-size: 14px; cursor: pointer; padding: 2px 4px; border-radius: 4px; color: var(--text-sidebar); }
+.sidebar-btn:hover { background: rgba(255,255,255,0.08); }
+.folder-input-wrap { display: flex; gap: 4px; padding: 8px 12px; }
+.folder-input { flex: 1; border: 1px solid #d1d5db; border-radius: 4px; padding: 4px 8px; font-size: 12px; }
+.tree-list { padding: 4px 0; }
+.tree-item { display: flex; align-items: center; gap: 4px; padding: 5px 12px; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 1px 4px; }
+.tree-item:hover { background: #f3f4f6; }
+.tree-item.active { background: #eff6ff; color: #3b82f6; font-weight: 600; }
+.tree-arrow { font-size: 10px; width: 14px; text-align: center; }
+.tree-icon { font-size: 14px; }
+.tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tree-children { padding-left: 16px; }
+.tree-item.child { font-size: 12px; }
+.root-drop { padding: 6px 12px; text-align: center; font-size: 11px; color: #9ca3af; border: 1px dashed #d1d5db; border-radius: 4px; margin: 4px 8px; }
+.root-drop:hover { background: #f3f4f6; border-color: #3b82f6; }
+.sidebar-search { padding: 8px 12px; }
+.search-input { width: 100%; border: none; background: rgba(255,255,255,0.08); border-radius: 6px; padding: 8px 10px; font-size: 12px; box-sizing: border-box; outline: none; transition: box-shadow 0.15s; color: #fff; }
+.search-input:focus { box-shadow: 0 0 0 2px var(--primary); background: rgba(255,255,255,0.12); }
+.search-input::placeholder { color: rgba(255,255,255,0.4); }
+.search-results { padding: 0 8px; }
+.search-item { display: flex; gap: 6px; padding: 6px 4px; cursor: pointer; border-radius: 4px; }
+.search-item:hover { background: #f3f4f6; }
+.search-icon { font-size: 14px; }
+.search-title { font-size: 12px; font-weight: 600; }
+.search-snippet { font-size: 10px; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
+.tag-filter { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 12px; }
+.tag-chip { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #f3f4f6; color: #6b7280; cursor: pointer; }
+.tag-chip.active { background: #3b82f6; color: #fff; }
+.ctx-overlay { position: fixed; inset: 0; z-index: 998; }
+.ctx-menu { position: fixed; z-index: 999; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 4px 0; min-width: 140px; }
+.ctx-item { padding: 6px 12px; font-size: 12px; cursor: pointer; }
+.ctx-item:hover { background: #f3f4f6; }
+.ctx-danger { color: #ef4444; }
+.rename-overlay { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.2); }
+.rename-box { background: #fff; padding: 16px; border-radius: 8px; display: flex; gap: 8px; }
+.rename-input { border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 10px; font-size: 13px; min-width: 200px; }
+</style>

package/scaffold/spec-site/src/components/EmptyState.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+  title?: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div class="empty-state">
+    <div v-if="icon" class="empty-icon">{{ icon }}</div>
+    <div class="empty-title">{{ title || 'No data' }}</div>
+    <div v-if="description" class="empty-desc">{{ description }}</div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+}
+.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
+.empty-title { font-size: 16px; font-weight: 600; color: var(--text-primary, #333); margin-bottom: 8px; }
+.empty-desc { font-size: 13px; color: var(--text-muted, #888); max-width: 300px; line-height: 1.5; }
+</style>

package/scaffold/spec-site/src/components/ErrorBanner.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps<{
+  message?: string
+}>()
+const emit = defineEmits<{ retry: [] }>()
+</script>
+
+<template>
+  <div class="error-banner">
+    <span class="error-text">{{ message || 'Failed to load data' }}</span>
+    <button class="error-retry" @click="emit('retry')">Retry</button>
+  </div>
+</template>
+
+<style scoped>
+.error-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 12px;
+  margin: 16px;
+}
+.error-text { font-size: 13px; color: #dc2626; }
+.error-retry {
+  padding: 4px 12px;
+  border: 1px solid #dc2626;
+  border-radius: 6px;
+  background: none;
+  color: #dc2626;
+  font-size: 12px;
+  cursor: pointer;
+}
+.error-retry:hover { background: #fee2e2; }
+</style>

package/scaffold/spec-site/src/components/Icon.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import {
+  LayoutDashboard, FileText, MessageSquare, MessageCircle, Calendar, Trophy, Settings,
+  ClipboardList, GitBranch, BarChart3, BarChart2, Users, Search, Plus, ChevronDown,
+  Check, X, Edit, Pencil, Trash2, Link, Eye, Clock, Bell,
+  FolderPlus, FilePlus, Moon, Sun, Home, Target, Pin, RefreshCw,
+  Lock, Unlock, Bug, HelpCircle, Monitor
+} from 'lucide-vue-next'
+
+const props = defineProps<{ name: string; size?: number }>()
+
+const iconMap: Record<string, any> = {
+  dashboard: LayoutDashboard,
+  document: FileText,
+  memo: MessageSquare,
+  calendar: Calendar,
+  trophy: Trophy,
+  settings: Settings,
+  sprint: ClipboardList,
+  branch: GitBranch,
+  chart: BarChart3,
+  users: Users,
+  search: Search,
+  plus: Plus,
+  chevronDown: ChevronDown,
+  check: Check,
+  close: X,
+  edit: Edit,
+  trash: Trash2,
+  link: Link,
+  eye: Eye,
+  clock: Clock,
+  bell: Bell,
+  folderPlus: FolderPlus,
+  filePlus: FilePlus,
+  moon: Moon,
+  sun: Sun,
+  home: Home,
+  target: Target,
+  messageCircle: MessageCircle,
+  pin: Pin,
+  refreshCw: RefreshCw,
+  pencil: Pencil,
+  lock: Lock,
+  unlock: Unlock,
+  bug: Bug,
+  helpCircle: HelpCircle,
+  monitor: Monitor,
+  barChart2: BarChart2,
+}
+
+const IconComponent = iconMap[props.name]
+</script>
+
+<template>
+  <component v-if="IconComponent" :is="IconComponent" :size="size || 16" />
+  <span v-else>{{ name }}</span>
+</template>

package/scaffold/spec-site/src/components/MemberSelect.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { apiGet } from '@/api/client'
+
+interface MemberItem { id: number; display_name: string }
+
+const props = defineProps<{
+  modelValue: string[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]]
+}>()
+
+const members = ref<MemberItem[]>([])
+
+function toggle(name: string) {
+  const current = new Set(props.modelValue)
+  if (current.has(name)) current.delete(name)
+  else current.add(name)
+  emit('update:modelValue', [...current])
+}
+
+onMounted(async () => {
+  const { data } = await apiGet<{ members: MemberItem[] }>('/api/v2/admin/members')
+  if (data?.members) members.value = data.members.filter(m => (m as any).is_active)
+})
+</script>
+
+<template>
+  <div class="member-select">
+    <label v-for="m in members" :key="m.id"
+      class="member-tag" :class="{ selected: modelValue.includes(m.display_name) }"
+      @click="toggle(m.display_name)">
+      {{ m.display_name }}
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.member-select { display: flex; flex-wrap: wrap; gap: 6px; }
+.member-tag {
+  padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
+  border: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.02);
+  transition: all 0.15s; user-select: none;
+}
+.member-tag.selected { background: var(--primary); color: #fff; border-color: var(--primary); }
+</style>

package/scaffold/spec-site/src/components/MemoChecklist.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { apiGet, apiPost, apiPatch, apiDelete } from '@/composables/useTurso'
+
+interface CheckItem { id: number; content: string; assignee: string | null; is_done: number; sort_order: number }
+
+const props = defineProps<{ memoId: number; members?: string[] }>()
+const items = ref<CheckItem[]>([])
+const newContent = ref('')
+
+async function load() {
+  const { data } = await apiGet<{ items: CheckItem[] }>(`/api/v2/memos/${props.memoId}/checklist`)
+  items.value = data?.items || []
+}
+
+const progress = computed(() => {
+  const total = items.value.length
+  const done = items.value.filter(i => i.is_done).length
+  return { done, total, percent: total ? Math.round(done / total * 100) : 0 }
+})
+
+async function addItem() {
+  if (!newContent.value.trim()) return
+  await apiPost(`/api/v2/memos/${props.memoId}/checklist`, { content: newContent.value.trim() })
+  newContent.value = ''
+  await load()
+}
+
+async function toggleDone(item: CheckItem) {
+  await apiPatch(`/api/v2/memos/checklist/${item.id}`, { is_done: item.is_done ? 0 : 1 })
+  item.is_done = item.is_done ? 0 : 1
+}
+
+async function setAssignee(item: CheckItem, assignee: string) {
+  await apiPatch(`/api/v2/memos/checklist/${item.id}`, { assignee })
+  item.assignee = assignee
+}
+
+async function removeItem(id: number) {
+  await apiDelete(`/api/v2/memos/checklist/${id}`)
+  await load()
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="memo-checklist">
+    <div class="cl-header">
+      <span class="cl-title">Checklist</span>
+      <span class="cl-progress">{{ progress.done }}/{{ progress.total }} ({{ progress.percent }}%)</span>
+    </div>
+    <div class="cl-progress-bar"><div class="cl-progress-fill" :style="{ width: progress.percent + '%' }" /></div>
+
+    <div v-for="item in items" :key="item.id" class="cl-item" :class="{ done: item.is_done }">
+      <input type="checkbox" :checked="!!item.is_done" @change="toggleDone(item)" />
+      <span class="cl-content">{{ item.content }}</span>
+      <select class="cl-assignee" :value="item.assignee || ''" @change="setAssignee(item, ($event.target as HTMLSelectElement).value)">
+        <option value="">Assignee</option>
+        <option v-for="m in (members || [])" :key="m" :value="m">{{ m }}</option>
+      </select>
+      <button class="cl-remove" @click="removeItem(item.id)">✕</button>
+    </div>
+
+    <div class="cl-add">
+      <input v-model="newContent" class="cl-input" placeholder="Add item..." @keyup.enter="addItem" />
+      <button class="btn btn--xs btn--primary" @click="addItem">Add</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.memo-checklist { margin: 12px 0; padding: 12px; background: #fafafa; border-radius: 8px; }
+.cl-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+.cl-title { font-size: 13px; font-weight: 600; }
+.cl-progress { font-size: 11px; color: #6b7280; }
+.cl-progress-bar { height: 4px; background: #e5e7eb; border-radius: 2px; margin-bottom: 8px; }
+.cl-progress-fill { height: 100%; background: #22c55e; border-radius: 2px; transition: width 0.2s; }
+.cl-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
+.cl-item.done .cl-content { text-decoration: line-through; color: #9ca3af; }
+.cl-content { flex: 1; }
+.cl-assignee { border: 1px solid #e5e7eb; border-radius: 4px; padding: 1px 4px; font-size: 11px; }
+.cl-remove { border: none; background: none; color: #9ca3af; cursor: pointer; font-size: 12px; }
+.cl-remove:hover { color: #ef4444; }
+.cl-add { display: flex; gap: 4px; margin-top: 8px; }
+.cl-input { flex: 1; border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 8px; font-size: 12px; }
+@media (max-width: 767px) { .btn { min-height: 44px; } input, select { min-height: 44px; font-size: 16px; } }
+</style>

package/scaffold/spec-site/src/components/MemoGraph.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { apiGet } from '@/composables/useTurso'
+
+interface Memo { id: number; content: string; status: string; created_by: string }
+interface Relation { id: number; source_memo_id: number; target_memo_id: number; relation_type: string }
+
+const props = defineProps<{ memos: Memo[] }>()
+const router = useRouter()
+
+const allRelations = ref<Relation[]>([])
+
+async function loadAllRelations() {
+  // Batch-load relations for recent 20 memos
+  const recent = props.memos.slice(0, 20)
+  const results: Relation[] = []
+  for (const m of recent) {
+    const { data } = await apiGet<{ relations: Relation[] }>(`/api/v2/memos/${m.id}/relations`)
+    if (data?.relations) results.push(...data.relations)
+  }
+  // Deduplicate
+  const seen = new Set<number>()
+  allRelations.value = results.filter(r => { if (seen.has(r.id)) return false; seen.add(r.id); return true })
+}
+
+const nodes = computed(() => {
+  const ids = new Set<number>()
+  for (const r of allRelations.value) { ids.add(r.source_memo_id); ids.add(r.target_memo_id) }
+  return props.memos.filter(m => ids.has(m.id)).map((m, i) => ({
+    ...m,
+    x: 80 + (i % 5) * 140,
+    y: 60 + Math.floor(i / 5) * 100,
+    title: m.content.split('\n')[0].slice(0, 30),
+  }))
+})
+
+const edges = computed(() => {
+  return allRelations.value.map(r => {
+    const s = nodes.value.find(n => n.id === r.source_memo_id)
+    const t = nodes.value.find(n => n.id === r.target_memo_id)
+    if (!s || !t) return null
+    return { id: r.id, x1: s.x + 60, y1: s.y + 20, x2: t.x + 60, y2: t.y + 20, type: r.relation_type }
+  }).filter(Boolean) as { id: number; x1: number; y1: number; x2: number; y2: number; type: string }[]
+})
+
+const svgWidth = computed(() => Math.max(700, ...nodes.value.map(n => n.x + 140)))
+const svgHeight = computed(() => Math.max(300, ...nodes.value.map(n => n.y + 80)))
+
+const statusColors: Record<string, string> = { open: '#3b82f6', resolved: '#22c55e', 'request-changes': '#f59e0b' }
+
+onMounted(loadAllRelations)
+</script>
+
+<template>
+  <div class="memo-graph">
+    <svg :width="svgWidth" :height="svgHeight">
+      <!-- edges -->
+      <line v-for="e in edges" :key="e.id" :x1="e.x1" :y1="e.y1" :x2="e.x2" :y2="e.y2" stroke="#d1d5db" stroke-width="2" />
+      <!-- nodes -->
+      <g v-for="n in nodes" :key="n.id" @click="router.push({ query: { memo: String(n.id) } })" style="cursor:pointer">
+        <rect :x="n.x" :y="n.y" width="120" height="40" rx="8" :fill="statusColors[n.status] || '#e5e7eb'" opacity="0.15" stroke="#d1d5db" />
+        <text :x="n.x + 60" :y="n.y + 16" text-anchor="middle" font-size="11" font-weight="600" fill="#374151">#{{ n.id }}</text>
+        <text :x="n.x + 60" :y="n.y + 30" text-anchor="middle" font-size="9" fill="#6b7280">{{ n.title }}</text>
+      </g>
+    </svg>
+    <div v-if="!nodes.length" class="graph-empty">No connected memos found.</div>
+  </div>
+</template>
+
+<style scoped>
+.memo-graph { overflow-x: auto; padding: 12px; background: #fafafa; border-radius: 8px; margin: 12px 0; }
+.graph-empty { color: #9ca3af; text-align: center; padding: 24px; font-size: 13px; }
+@media (max-width: 767px) { .btn { min-height: 44px; } input, select { min-height: 44px; font-size: 16px; } }
+</style>