popilot 0.6.0 → 0.7.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/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/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/pmTypes.ts

@@ -4,7 +4,7 @@
 
 // ── Domain types ──
 
-export type StoryStatus = 'draft' | 'backlog' | 'ready' | 'in-progress' | 'review' | 'done'
+export type StoryStatus = 'draft' | 'backlog' | 'ready' | 'in-progress' | 'review' | 'qa' | 'done'
 export type TaskStatus = 'todo' | 'in-progress' | 'done'
 export type Priority = 'low' | 'medium' | 'high' | 'critical'
 export type EpicStatus = 'active' | 'completed' | 'archived'
@@ -31,6 +31,10 @@ export interface PmStory {
   priority: Priority
   area: string
   storyPoints: number | null
+  startDate: string | null
+  dueDate: string | null
+  figmaUrl: string | null
+  relatedPrs: Array<{ prNumber: number; prUrl: string; prTitle: string; status: string }>
   sortOrder: number
   createdAt: string
   updatedAt: string
@@ -43,6 +47,8 @@ export interface PmTask {
   assignee: string | null
   status: TaskStatus
   description: string | null
+  storyPoints: number | null
+  dueDate: string | null
   sortOrder: number
   createdAt: string
   updatedAt: string
@@ -77,6 +83,10 @@ export function mapStory(r: PmStoryRow): PmStory {
     priority: (r.priority ?? 'medium') as Priority,
     area: r.area ?? 'FE',
     storyPoints: r.story_points,
+    startDate: r.start_date ?? null,
+    dueDate: r.due_date ?? null,
+    figmaUrl: r.figma_url ?? null,
+    relatedPrs: r.related_prs ? JSON.parse(r.related_prs) : [],
     sortOrder: r.sort_order,
     createdAt: r.created_at,
     updatedAt: r.updated_at,
@@ -91,6 +101,8 @@ export function mapTask(r: PmTaskRow): PmTask {
     assignee: r.assignee,
     status: r.status as TaskStatus,
     description: r.description,
+    storyPoints: r.story_points ?? null,
+    dueDate: r.due_date ?? null,
     sortOrder: r.sort_order,
     createdAt: r.created_at,
     updatedAt: r.updated_at,
@@ -99,7 +111,7 @@ export function mapTask(r: PmTaskRow): PmTask {
 
 // ── Status constants ──
 
-export const STORY_STATUSES: StoryStatus[] = ['draft', 'backlog', 'ready', 'in-progress', 'review', 'done']
+export const STORY_STATUSES: StoryStatus[] = ['draft', 'backlog', 'ready', 'in-progress', 'review', 'qa', 'done']
 export const TASK_STATUSES: TaskStatus[] = ['todo', 'in-progress', 'done']
 export const PRIORITIES: Priority[] = ['low', 'medium', 'high', 'critical']
 export const AREAS = ['FE', 'BE', 'Design', 'Data', 'Infra', 'PO'] as const
@@ -111,6 +123,7 @@ export const STORY_STATUS_LABELS: Record<StoryStatus, string> = {
   'ready': 'Ready',
   'in-progress': 'In Progress',
   'review': 'Review',
+  'qa': 'QA',
   'done': 'Done',
 }
 

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

@@ -0,0 +1,221 @@
+/**
+ * Dashboard composable — aggregates data from multiple dashboard APIs.
+ *
+ * In static mode, returns empty state gracefully.
+ */
+import { ref } from 'vue'
+import { apiGet, isStaticMode } from '@/api/client'
+
+export interface UnreadMemo {
+  id: number
+  content: string
+  memoType: string
+  createdBy: string
+  createdAt: string
+  reviewRequired: number
+  pageId: string
+  replyCount: number
+  title: string | null
+  supersedesId: number | null
+}
+
+export interface SprintProgress {
+  sprint: string
+  total: number
+  done: number
+  progressPercent: number
+  byStatus: Record<string, number>
+}
+
+export interface StandupStatus {
+  date: string
+  written: string[]
+  count: number
+}
+
+export interface MyRequest {
+  id: number
+  title: string | null
+  content: string
+  memoType: string
+  assignedTo: string | null
+  status: string
+  createdAt: string
+  supersedesId: number | null
+}
+
+export interface Decision {
+  id: number
+  title: string | null
+  content: string
+  createdBy: string
+  assignedTo: string | null
+  createdAt: string
+  supersedesId: number | null
+}
+
+export interface NudgeLogItem {
+  id: number
+  ruleId: string
+  title: string
+  body: string
+  createdAt: string
+}
+
+export interface TeamInitiative {
+  id: number
+  title: string | null
+  content: string
+  memoType: string
+  createdBy: string
+  createdAt: string
+}
+
+export function useDashboard() {
+  const unreadMemos = ref<UnreadMemo[]>([])
+  const pendingReviews = ref<UnreadMemo[]>([])
+  const myRequests = ref<MyRequest[]>([])
+  const activeDecisions = ref<Decision[]>([])
+  const sprintProgress = ref<SprintProgress | null>(null)
+  const mySprintProgress = ref<SprintProgress | null>(null)
+  const standupStatus = ref<StandupStatus | null>(null)
+  const loading = ref(false)
+  const errors = ref<string[]>([])
+  const nudgeLog = ref<NudgeLogItem[]>([])
+  const teamInitiatives = ref<TeamInitiative[]>([])
+
+  function todayStr(): string {
+    return new Date().toISOString().split('T')[0]
+  }
+
+  async function loadAll(sprint: string, userName?: string) {
+    if (isStaticMode()) { loading.value = false; return }
+    loading.value = true
+    errors.value = []
+
+    const fetches = [
+      apiGet<{ unreadMemos: Array<Record<string, unknown>> }>('/api/v2/dashboard/unread-memos'),
+      apiGet<{ unreadMemos: Array<Record<string, unknown>> }>('/api/v2/dashboard/unread-memos', { review_required: '1' }),
+      apiGet<{ sprint: string; total: number; done: number; progressPercent: number; byStatus: Record<string, number> }>('/api/v2/dashboard/sprint-progress', { sprint }),
+      apiGet<{ date: string; written: string[]; count: number }>('/api/v2/dashboard/standup-status', { sprint, date: todayStr() }),
+      apiGet<{ myRequests: Array<Record<string, unknown>> }>('/api/v2/dashboard/my-requests'),
+      apiGet<{ decisions: Array<Record<string, unknown>> }>('/api/v2/dashboard/active-decisions'),
+    ]
+
+    if (userName) {
+      fetches.push(
+        apiGet<SprintProgress>('/api/v2/dashboard/sprint-progress', { sprint, user: userName }),
+      )
+    }
+
+    const results = await Promise.all(fetches)
+
+    if (results[0].error) errors.value.push(results[0].error)
+    else if (results[0].data) unreadMemos.value = ((results[0].data as any).unreadMemos ?? []).map(mapMemo)
+
+    if (results[1].error) errors.value.push(results[1].error)
+    else if (results[1].data) pendingReviews.value = ((results[1].data as any).unreadMemos ?? []).map(mapMemo)
+
+    if (results[2].error) errors.value.push(results[2].error)
+    else if (results[2].data) sprintProgress.value = results[2].data as SprintProgress
+
+    if (results[3].error) errors.value.push(results[3].error)
+    else if (results[3].data) standupStatus.value = results[3].data as StandupStatus
+
+    if (results[4].error) errors.value.push(results[4].error)
+    else if (results[4].data) myRequests.value = ((results[4].data as any).myRequests ?? []).map(mapRequest)
+
+    if (results[5].error) errors.value.push(results[5].error)
+    else if (results[5].data) activeDecisions.value = ((results[5].data as any).decisions ?? []).map(mapDecision)
+
+    if (userName && results[6]) {
+      if (results[6].error) errors.value.push(results[6].error)
+      else if (results[6].data) mySprintProgress.value = results[6].data as SprintProgress
+    }
+
+    loading.value = false
+  }
+
+  async function loadNudgeLog() {
+    if (isStaticMode()) return
+    const { data } = await apiGet<{ nudges: Array<Record<string, unknown>> }>(
+      '/api/v2/dashboard/nudge-log', { limit: '10' },
+    )
+    if (data?.nudges) {
+      nudgeLog.value = (data.nudges as Array<Record<string, unknown>>).map(r => ({
+        id: r.id as number,
+        ruleId: (r.rule_id as string) ?? '',
+        title: (r.title as string) ?? '',
+        body: (r.body as string) ?? '',
+        createdAt: (r.created_at as string) ?? '',
+      }))
+    }
+  }
+
+  async function loadTeamInitiatives() {
+    if (isStaticMode()) return
+    const { data } = await apiGet<{ initiatives: Array<Record<string, unknown>> }>(
+      '/api/v2/initiatives', { limit: '20' },
+    )
+    if (data?.initiatives) {
+      teamInitiatives.value = (data.initiatives as Array<Record<string, unknown>>).map(r => ({
+        id: r.id as number,
+        title: (r.title as string) ?? null,
+        content: (r.content as string) ?? '',
+        memoType: (r.status as string) ?? 'pending',
+        createdBy: (r.author as string) ?? '',
+        createdAt: (r.created_at as string) ?? '',
+      }))
+    } else {
+      // Fallback: memo-based (when initiatives table is unavailable)
+      const { data: memoData } = await apiGet<{ memos: Array<Record<string, unknown>> }>(
+        '/api/v2/memos/all', { limit: '10', status: 'open' },
+      )
+      if (memoData?.memos) {
+        teamInitiatives.value = (memoData.memos as Array<Record<string, unknown>>)
+          .filter(r => r.memo_type === 'feature_request')
+          .map(r => ({
+            id: r.id as number,
+            title: (r.title as string) ?? null,
+            content: (r.content as string) ?? '',
+            memoType: (r.memo_type as string) ?? '',
+            createdBy: (r.created_by as string) ?? '',
+            createdAt: (r.created_at as string) ?? '',
+          }))
+      }
+    }
+  }
+
+  return {
+    unreadMemos, pendingReviews, myRequests, activeDecisions,
+    sprintProgress, mySprintProgress, standupStatus, nudgeLog, teamInitiatives,
+    loading, errors, loadAll, loadNudgeLog, loadTeamInitiatives,
+  }
+}
+
+function mapMemo(r: Record<string, unknown>): UnreadMemo {
+  return {
+    id: r.id as number, content: (r.content as string) ?? '', memoType: (r.memo_type as string) ?? 'memo',
+    createdBy: (r.created_by as string) ?? '', createdAt: (r.created_at as string) ?? '',
+    reviewRequired: (r.review_required as number) ?? 0, pageId: (r.page_id as string) ?? '',
+    replyCount: (r.reply_count as number) ?? 0, title: (r.title as string) ?? null,
+    supersedesId: (r.supersedes_id as number) ?? null,
+  }
+}
+
+function mapRequest(r: Record<string, unknown>): MyRequest {
+  return {
+    id: r.id as number, title: (r.title as string) ?? null, content: (r.content as string) ?? '',
+    memoType: (r.memo_type as string) ?? '', assignedTo: (r.assigned_to as string) ?? null,
+    status: (r.status as string) ?? 'open', createdAt: (r.created_at as string) ?? '',
+    supersedesId: (r.supersedes_id as number) ?? null,
+  }
+}
+
+function mapDecision(r: Record<string, unknown>): Decision {
+  return {
+    id: r.id as number, title: (r.title as string) ?? null, content: (r.content as string) ?? '',
+    createdBy: (r.created_by as string) ?? '', assignedTo: (r.assigned_to as string) ?? null,
+    createdAt: (r.created_at as string) ?? '', supersedesId: (r.supersedes_id as number) ?? null,
+  }
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Media query composable — generic reactive media query wrapper.
+ *
+ * Usage: const isMobile = useMediaQuery('(max-width: 767px)')
+ */
+
+import { ref, onMounted, onUnmounted, type Ref } from 'vue'
+
+export function useMediaQuery(query: string): Ref<boolean> {
+  const matches = ref(false)
+  let mql: MediaQueryList | null = null
+
+  function update(e: MediaQueryListEvent | MediaQueryList) {
+    matches.value = e.matches
+  }
+
+  onMounted(() => {
+    mql = window.matchMedia(query)
+    matches.value = mql.matches
+    mql.addEventListener('change', update)
+  })
+
+  onUnmounted(() => {
+    mql?.removeEventListener('change', update)
+  })
+
+  return matches
+}