popilot 0.6.0 → 0.8.0

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

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { type NotificationItem } from '@/composables/useNotification'
+
+defineProps<{
+  notifications: NotificationItem[]
+  unreadCount: number
+}>()
+
+const emit = defineEmits<{
+  toggle: []
+  click: [n: NotificationItem]
+  markAllRead: []
+}>()
+
+function getNotifIcon(type: string): string {
+  if (type === 'memo_assigned') return '📩'
+  if (type === 'memo_mention_all') return '📢'
+  if (type === 'reply_received') return '💬'
+  return '🔔'
+}
+
+function formatTimeAgo(ts: number): string {
+  const diff = Date.now() - ts
+  const mins = Math.floor(diff / 60_000)
+  if (mins < 1) return 'just now'
+  if (mins < 60) return `${mins}min ago`
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `${hours}hr ago`
+  const days = Math.floor(hours / 24)
+  return `${days}d ago`
+}
+</script>
+
+<template>
+  <div class="notification-bell">
+    <button class="bell-trigger" @click.stop="emit('toggle')">
+      <span class="bell-icon">&#128276;</span>
+      <span v-if="unreadCount > 0" class="bell-badge">{{ unreadCount > 9 ? '9+' : unreadCount }}</span>
+    </button>
+    <div class="notif-dropdown">
+      <div class="notif-header">
+        <span class="notif-header-title">Notifications</span>
+        <button v-if="unreadCount > 0" class="notif-mark-all" @click="emit('markAllRead')">Mark all read</button>
+      </div>
+      <div class="notif-list">
+        <div
+          v-for="n in notifications"
+          :key="n.id"
+          class="notif-item"
+          :class="{ unread: !n.isRead }"
+          @click="emit('click', n)"
+        >
+          <span class="notif-item-icon">{{ getNotifIcon(n.type) }}</span>
+          <div class="notif-item-content">
+            <div class="notif-item-title">{{ n.title }}</div>
+            <div v-if="n.body" class="notif-item-body">{{ n.body }}</div>
+            <div class="notif-item-meta">
+              <span class="notif-item-page">{{ n.pageId }}</span>
+              <span class="notif-item-time">{{ formatTimeAgo(n.createdAt) }}</span>
+            </div>
+          </div>
+        </div>
+        <div v-if="notifications.length === 0" class="notif-empty">No notifications</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.notification-bell { position: relative; }
+.bell-trigger {
+  position: relative; display: flex; align-items: center; justify-content: center;
+  width: 36px; height: 36px; border-radius: 6px; border: none; background: none;
+  cursor: pointer; transition: background 0.15s;
+}
+.bell-trigger:hover { background: var(--bg); }
+.bell-icon { font-size: 18px; }
+.bell-badge {
+  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
+  padding: 0 4px; border-radius: 8px; background: #ef4444; color: #fff;
+  font-size: 10px; font-weight: 700; display: flex; align-items: center;
+  justify-content: center; line-height: 1; animation: pulse-notif 2s infinite;
+}
+@keyframes pulse-notif { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
+.notif-dropdown {
+  position: absolute; top: calc(100% + 4px); right: 0; width: 340px; max-height: 440px;
+  background: #fff; border: 1px solid var(--border); border-radius: 8px;
+  box-shadow: var(--shadow-md); z-index: 1000; display: flex; flex-direction: column; overflow: hidden;
+}
+.notif-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
+}
+.notif-header-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
+.notif-mark-all {
+  background: none; border: none; color: #3b82f6; font-size: 12px; font-weight: 500;
+  cursor: pointer; padding: 2px 6px; border-radius: 4px;
+}
+.notif-mark-all:hover { background: #eff6ff; }
+.notif-list { flex: 1; overflow-y: auto; }
+.notif-item {
+  display: flex; gap: 10px; padding: 10px 16px; cursor: pointer;
+  transition: background 0.1s; border-bottom: 1px solid #f1f5f9;
+}
+.notif-item:hover { background: #f8fafc; }
+.notif-item.unread { background: #eff6ff; }
+.notif-item.unread:hover { background: #dbeafe; }
+.notif-item-icon { font-size: 16px; flex-shrink: 0; padding-top: 2px; }
+.notif-item-content { flex: 1; min-width: 0; }
+.notif-item-title { font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
+.notif-item-body { font-size: 12px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.notif-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--text-muted); }
+.notif-item-page { background: #f1f5f9; padding: 1px 6px; border-radius: 3px; font-size: 10px; }
+.notif-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
+@media (max-width: 767px) { .notif-dropdown { width: 300px; right: -8px; } }
+</style>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ArrowUp, Minus, ArrowDown } from 'lucide-vue-next'
+
+const props = defineProps<{ priority: string }>()
+
+const config: Record<string, { icon: any; color: string; label: string }> = {
+  high: { icon: ArrowUp, color: '#ef4444', label: 'High' },
+  medium: { icon: Minus, color: '#f59e0b', label: 'Medium' },
+  low: { icon: ArrowDown, color: '#3b82f6', label: 'Low' },
+}
+
+const c = config[props.priority] || { icon: Minus, color: '#9ca3af', label: props.priority || '-' }
+</script>
+
+<template>
+  <span class="priority-badge" :style="{ color: c.color }" :title="c.label">
+    <component :is="c.icon" :size="14" />
+  </span>
+</template>
+
+<style scoped>
+.priority-badge { display: inline-flex; align-items: center; }
+</style>

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

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { apiGet } from '@/api/client'
+
+const props = defineProps<{ visible: boolean }>()
+const emit = defineEmits<{ close: [] }>()
+const router = useRouter()
+
+const query = ref('')
+const results = ref<any[]>([])
+const loading = ref(false)
+let debounceTimer: ReturnType<typeof setTimeout>
+
+watch(query, (q) => {
+  clearTimeout(debounceTimer)
+  if (q.length < 2) { results.value = []; return }
+  debounceTimer = setTimeout(() => search(q), 300)
+})
+
+async function search(q: string) {
+  loading.value = true
+  const { data } = await apiGet(`/api/v2/search?q=${encodeURIComponent(q)}`)
+  if (data?.results) results.value = data.results as any[]
+  loading.value = false
+}
+
+function navigate(r: any) {
+  router.push(r.url)
+  emit('close')
+}
+
+function typeIcon(t: string) {
+  return { story: '📋', memo: '💬', doc: '📄', meeting: '🎙️' }[t] || '📌'
+}
+
+function typeLabel(t: string) {
+  return { story: 'Story', memo: 'Memo', doc: 'Document', meeting: 'Meeting' }[t] || t
+}
+
+const grouped = ref<Record<string, any[]>>({})
+watch(results, (r) => {
+  const g: Record<string, any[]> = {}
+  for (const item of r) {
+    if (!g[item.type]) g[item.type] = []
+    g[item.type].push(item)
+  }
+  grouped.value = g
+})
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') emit('close')
+}
+
+onMounted(() => window.addEventListener('keydown', onKeydown))
+onUnmounted(() => window.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="search-overlay" @click.self="emit('close')">
+      <div class="search-modal">
+        <input
+          v-model="query"
+          class="search-input"
+          placeholder="Search stories, memos, documents... (Esc to close)"
+          autofocus
+        />
+        <div v-if="loading" class="search-loading">Searching...</div>
+        <div v-else-if="query.length >= 2 && !results.length" class="search-empty">No results</div>
+        <div v-else class="search-results">
+          <template v-for="(items, type) in grouped" :key="type">
+            <div class="search-group-title">{{ typeIcon(type) }} {{ typeLabel(type) }}</div>
+            <div
+              v-for="r in items"
+              :key="r.type + r.id"
+              class="search-item"
+              @click="navigate(r)"
+            >
+              <div class="search-item-title">{{ r.title || r.id }}</div>
+              <div v-if="r.preview" class="search-item-preview">{{ r.preview }}</div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 9999; display: flex; justify-content: center; padding-top: 120px; }
+.search-modal { background: #fff; border-radius: 12px; width: 560px; max-height: 480px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.2); display: flex; flex-direction: column; }
+.search-input { border: none; padding: 16px 20px; font-size: 16px; outline: none; border-bottom: 1px solid #e5e7eb; }
+.search-results { overflow-y: auto; padding: 8px; flex: 1; }
+.search-group-title { font-size: 12px; font-weight: 600; color: #9ca3af; padding: 8px 12px 4px; }
+.search-item { padding: 8px 12px; border-radius: 6px; cursor: pointer; }
+.search-item:hover { background: #f3f4f6; }
+.search-item-title { font-size: 14px; font-weight: 500; }
+.search-item-preview { font-size: 12px; color: #6b7280; margin-top: 2px; }
+.search-loading, .search-empty { padding: 24px; text-align: center; color: #9ca3af; font-size: 14px; }
+@media (max-width: 640px) { .search-modal { width: 95%; margin: 0 auto; } }
+</style>

package/scaffold/spec-site/src/components/SlashCommand.ts

@@ -0,0 +1,123 @@
+import { Extension } from '@tiptap/core'
+import Suggestion from '@tiptap/suggestion'
+
+interface SlashItem {
+  title: string
+  icon: string
+  command: (editor: any) => void
+}
+
+const items: SlashItem[] = [
+  { title: 'Heading 1', icon: 'H1', command: (e) => e.chain().focus().toggleHeading({ level: 1 }).run() },
+  { title: 'Heading 2', icon: 'H2', command: (e) => e.chain().focus().toggleHeading({ level: 2 }).run() },
+  { title: 'Heading 3', icon: 'H3', command: (e) => e.chain().focus().toggleHeading({ level: 3 }).run() },
+  { title: 'Bullet List', icon: '•', command: (e) => e.chain().focus().toggleBulletList().run() },
+  { title: 'Numbered List', icon: '1.', command: (e) => e.chain().focus().toggleOrderedList().run() },
+  { title: 'Code Block', icon: '<>', command: (e) => e.chain().focus().toggleCodeBlock().run() },
+  { title: 'Blockquote', icon: '"', command: (e) => e.chain().focus().toggleBlockquote().run() },
+  { title: 'Table', icon: '⊞', command: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() },
+  { title: 'Divider', icon: '—', command: (e) => e.chain().focus().setHorizontalRule().run() },
+  { title: 'Embed', icon: '🔗', command: (e) => {
+    const url = prompt('Enter the URL to embed:')
+    if (url) e.chain().focus().insertContent(`<p><a href="${url}" target="_blank">${url}</a></p>`).run()
+  }},
+  { title: 'Sub Page', icon: '📑', command: async (e) => {
+    const title = prompt('Sub page title:')
+    if (!title) return
+    const match = window.location.pathname.match(/\/docs\/([^/]+)/)
+    const parentId = match?.[1] || null
+    const slug = `sub-${Date.now()}`
+    try {
+      const { apiPut } = await import('@/composables/useTurso')
+      const { error } = await apiPut(`/api/v2/docs/${slug}`, { title, content: '', contentFormat: 'markdown', parentId })
+      if (error) { alert(`Failed to create sub page: ${error}`); return }
+      e.chain().focus().insertContent(`<p><a href="/docs/${slug}">${title}</a></p>`).run()
+    } catch (err) { alert(`Failed to create sub page: ${err}`) }
+  }},
+]
+
+export const SlashCommand = Extension.create({
+  name: 'slashCommand',
+  addOptions() {
+    return {
+      suggestion: {
+        char: '/',
+        items: ({ query }: { query: string }) => items.filter(i => i.title.toLowerCase().includes(query.toLowerCase())),
+        render: () => {
+          let popup: HTMLElement | null = null
+          let selectedIndex = 0
+          let currentItems: SlashItem[] = []
+
+          function updatePopup() {
+            if (!popup) return
+            popup.innerHTML = currentItems.map((item, i) =>
+              `<div class="slash-item${i === selectedIndex ? ' slash-active' : ''}" data-index="${i}">
+                <span class="slash-icon">${item.icon}</span>
+                <span>${item.title}</span>
+              </div>`
+            ).join('')
+          }
+
+          return {
+            onStart(props: any) {
+              currentItems = props.items
+              selectedIndex = 0
+              popup = document.createElement('div')
+              popup.className = 'slash-menu'
+              popup.addEventListener('click', (e) => {
+                const target = (e.target as HTMLElement).closest('.slash-item')
+                if (target) {
+                  const idx = Number(target.getAttribute('data-index'))
+                  currentItems[idx]?.command(props.editor)
+                  props.command({})
+                }
+              })
+              updatePopup()
+              const { view } = props.editor
+              const coords = view.coordsAtPos(props.range.from)
+              popup.style.position = 'fixed'
+              popup.style.left = `${coords.left}px`
+              popup.style.top = `${coords.bottom + 4}px`
+              document.body.appendChild(popup)
+            },
+            onUpdate(props: any) {
+              currentItems = props.items
+              selectedIndex = 0
+              updatePopup()
+            },
+            onKeyDown(props: any) {
+              if (props.event.key === 'ArrowDown') {
+                selectedIndex = (selectedIndex + 1) % currentItems.length
+                updatePopup()
+                return true
+              }
+              if (props.event.key === 'ArrowUp') {
+                selectedIndex = (selectedIndex - 1 + currentItems.length) % currentItems.length
+                updatePopup()
+                return true
+              }
+              if (props.event.key === 'Enter') {
+                currentItems[selectedIndex]?.command(props.editor)
+                props.command({})
+                return true
+              }
+              return false
+            },
+            onExit() {
+              popup?.remove()
+              popup = null
+            },
+          }
+        },
+      },
+    }
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+      }),
+    ]
+  },
+})

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+defineProps<{
+  type: 'loading' | 'empty' | 'error'
+  message?: string
+  ctaLabel?: string
+  ctaTo?: string
+}>()
+
+const emit = defineEmits<{ cta: [] }>()
+</script>
+
+<template>
+  <div class="state-display" :class="`state--${type}`">
+    <template v-if="type === 'loading'">
+      <div class="spinner" />
+      <p>{{ message || 'Loading...' }}</p>
+    </template>
+
+    <template v-if="type === 'empty'">
+      <div class="empty-icon">📭</div>
+      <p>{{ message || 'No data available' }}</p>
+      <router-link v-if="ctaTo" :to="ctaTo" class="cta-btn">{{ ctaLabel || 'Get started' }}</router-link>
+      <button v-else-if="ctaLabel" class="cta-btn" @click="emit('cta')">{{ ctaLabel }}</button>
+    </template>
+
+    <template v-if="type === 'error'">
+      <div class="error-icon">⚠️</div>
+      <p>{{ message || 'Something went wrong' }}</p>
+      <button class="cta-btn" @click="emit('cta')">{{ ctaLabel || 'Retry' }}</button>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.state-display {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  padding: 48px 24px; text-align: center; gap: 12px;
+}
+.state-display p { color: var(--text-secondary); font-size: 14px; }
+.spinner {
+  width: 32px; height: 32px; border: 3px solid rgba(0,0,0,0.06);
+  border-top-color: var(--primary); border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.empty-icon, .error-icon { font-size: 40px; }
+.cta-btn {
+  margin-top: 8px; padding: 8px 20px; border-radius: 10px;
+  background: var(--primary); color: #fff; border: none;
+  font-size: 14px; font-weight: 500; cursor: pointer;
+  text-decoration: none; display: inline-block;
+}
+.cta-btn:hover { opacity: 0.9; }
+</style>

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+interface DocNode {
+  id: string; title: string; icon: string | null; is_folder: number
+  parent_id: string | null; sort_order: number; children: DocNode[]
+}
+
+const props = defineProps<{
+  node: DocNode
+  activeDocId?: string
+  expanded: Set<string>
+  depth?: number
+}>()
+
+const emit = defineEmits<{
+  toggle: [id: string]
+  dragstart: [e: DragEvent, id: string]
+  drop: [e: DragEvent, node: DocNode]
+  dropRoot: [e: DragEvent]
+  contextmenu: [e: MouseEvent, node: DocNode]
+}>()
+
+const router = useRouter()
+const depth = props.depth ?? 0
+
+function onDragStart(e: DragEvent) {
+  e.stopPropagation()
+  e.dataTransfer?.setData('doc-id', props.node.id)
+  emit('dragstart', e, props.node.id)
+}
+
+function navigate() {
+  router.push(`/docs/${props.node.id}`)
+}
+</script>
+
+<template>
+  <div>
+    <div
+      class="tree-item"
+      :class="{ active: activeDocId === node.id }"
+      :style="{ paddingLeft: (12 + depth * 16) + 'px' }"
+      draggable="true"
+      @dragstart.stop="onDragStart($event)"
+      @dragover.prevent
+      @drop.prevent.stop="emit('drop', $event, node)"
+      @contextmenu.prevent.stop="emit('contextmenu', $event, node)"
+      @click="navigate"
+    >
+      <span v-if="node.children.length" class="tree-arrow" @click.stop="emit('toggle', node.id)">
+        {{ expanded.has(node.id) ? '▼' : '▶' }}
+      </span>
+      <span class="tree-icon">{{ (node.icon && !node.icon.startsWith('Icon') && !node.icon.startsWith('<')) ? node.icon : '📄' }}</span>
+      <span class="tree-label">{{ node.title }}</span>
+    </div>
+    <div v-if="node.children.length && expanded.has(node.id)">
+      <TreeNode
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :active-doc-id="activeDocId"
+        :expanded="expanded"
+        :depth="depth + 1"
+        @toggle="emit('toggle', $event)"
+        @dragstart="(e: DragEvent, id: string) => emit('dragstart', e, id)"
+        @drop="(e: DragEvent, n: any) => emit('drop', e, n)"
+        @contextmenu="(e: MouseEvent, n: any) => emit('contextmenu', e, n)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tree-item { display: flex; align-items: center; gap: 8px; padding: 4px 12px; font-size: 13px; line-height: 28px; cursor: pointer; border-radius: 6px; margin: 1px 6px; transition: background 0.1s; position: relative; color: var(--text-sidebar, #d1d5db); }
+.tree-item:hover { background: rgba(255,255,255,0.06); }
+.tree-item.active { background: rgba(255,255,255,0.1); color: #fff; font-weight: 600; }
+.tree-item.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--primary); border-radius: 2px; }
+.tree-arrow { font-size: 10px; width: 14px; text-align: center; cursor: pointer; transition: transform 0.15s; }
+.tree-icon { font-size: 15px; flex-shrink: 0; }
+.tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+</style>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = defineProps<{ name: string; size?: number }>()
+
+function hashColor(str: string): string {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash)
+  const colors = ['#3b82f6', '#ef4444', '#22c55e', '#f59e0b', '#8b5cf6', '#ec4899', '#06b6d4', '#f97316']
+  return colors[Math.abs(hash) % colors.length]
+}
+
+const initial = props.name ? (props.name.length <= 3 ? props.name : props.name.slice(0, 3)) : '?'
+const bg = hashColor(props.name || '')
+const sz = props.size || 24
+</script>
+
+<template>
+  <span class="user-avatar" :style="{ width: sz + 'px', height: sz + 'px', background: bg }" :title="name">
+    {{ initial }}
+  </span>
+</template>
+
+<style scoped>
+.user-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; cursor: default; flex-shrink: 0; letter-spacing: -0.5px; }
+</style>

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  data: Array<{ label: string; planned: number; actual: number }>
+}>()
+
+const maxValue = computed(() => {
+  const vals = props.data.flatMap(d => [d.planned, d.actual])
+  return Math.max(...vals, 1)
+})
+
+const chartWidth = 600
+const chartHeight = 200
+const padding = { top: 20, right: 20, bottom: 40, left: 50 }
+const innerW = chartWidth - padding.left - padding.right
+const innerH = chartHeight - padding.top - padding.bottom
+
+function x(i: number): number {
+  return padding.left + (i / Math.max(props.data.length - 1, 1)) * innerW
+}
+
+function y(val: number): number {
+  return padding.top + innerH - (val / maxValue.value) * innerH
+}
+
+const plannedPath = computed(() => {
+  return props.data.map((d, i) => `${i === 0 ? 'M' : 'L'}${x(i)},${y(d.planned)}`).join(' ')
+})
+
+const actualPath = computed(() => {
+  return props.data.map((d, i) => `${i === 0 ? 'M' : 'L'}${x(i)},${y(d.actual)}`).join(' ')
+})
+
+const yTicks = computed(() => {
+  const max = maxValue.value
+  const step = Math.ceil(max / 4)
+  return [0, step, step * 2, step * 3, step * 4].filter(v => v <= max + step)
+})
+</script>
+
+<template>
+  <div class="velocity-chart">
+    <svg :viewBox="`0 0 ${chartWidth} ${chartHeight}`" preserveAspectRatio="xMidYMid meet">
+      <line v-for="tick in yTicks" :key="tick"
+        :x1="padding.left" :x2="chartWidth - padding.right"
+        :y1="y(tick)" :y2="y(tick)"
+        stroke="rgba(0,0,0,0.06)" stroke-dasharray="4,4" />
+      <text v-for="tick in yTicks" :key="'t'+tick"
+        :x="padding.left - 8" :y="y(tick) + 4"
+        text-anchor="end" font-size="10" fill="var(--text-muted)">{{ tick }}</text>
+      <text v-for="(d, i) in data" :key="'x'+i"
+        :x="x(i)" :y="chartHeight - 8"
+        text-anchor="middle" font-size="10" fill="var(--text-muted)">{{ d.label }}</text>
+      <path :d="plannedPath" fill="none" stroke="rgba(148,163,184,0.5)" stroke-width="2" stroke-dasharray="6,4" />
+      <path :d="actualPath" fill="none" stroke="#3B82F6" stroke-width="2.5" />
+      <circle v-for="(d, i) in data" :key="'d'+i"
+        :cx="x(i)" :cy="y(d.actual)" r="4" fill="#3B82F6" stroke="#fff" stroke-width="2" />
+      <circle v-for="(d, i) in data" :key="'p'+i"
+        :cx="x(i)" :cy="y(d.planned)" r="3" fill="rgba(148,163,184,0.6)" />
+    </svg>
+    <div class="chart-legend">
+      <span class="legend-item"><span class="legend-line legend--actual"></span> Actual</span>
+      <span class="legend-item"><span class="legend-line legend--planned"></span> Planned</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.velocity-chart { width: 100%; }
+.velocity-chart svg { width: 100%; height: auto; }
+.chart-legend { display: flex; gap: 16px; justify-content: center; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
+.legend-item { display: flex; align-items: center; gap: 4px; }
+.legend-line { width: 16px; height: 2px; display: inline-block; }
+.legend--actual { background: #3B82F6; }
+.legend--planned { background: rgba(148,163,184,0.5); border-top: 2px dashed rgba(148,163,184,0.5); height: 0; }
+</style>

package/scaffold/spec-site/src/composables/navTypes.ts

@@ -12,8 +12,11 @@ export interface SprintConfig {
   label: string
   theme: string
   active: boolean
+  status?: 'planning' | 'active' | 'closed'
   startDate?: string | null
   endDate?: string | null
+  velocity?: number | null
+  teamSize?: number | null
   sortOrder: number
 }