popilot 0.2.0

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

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useMemo } from '@/composables/useMemo'
+import { useUser } from '@/composables/useUser'
+
+const route = useRoute()
+const pageId = computed(() => (route.params.pageId as string) || 'global')
+const { currentUser } = useUser()
+
+const memoStore = ref(useMemo(pageId.value))
+
+watch(pageId, (newId) => {
+  memoStore.value = useMemo(newId)
+})
+
+const memoOpen = ref(false)
+const newMemo = ref('')
+const isComposing = ref(false)
+
+function openMemo() {
+  memoOpen.value = true
+  memoStore.value.loadMemos()
+}
+
+async function handleAdd() {
+  if (isComposing.value) return
+  const text = newMemo.value.trim()
+  if (!text) return
+  await memoStore.value.addMemo(text, currentUser.value ?? '')
+  newMemo.value = ''
+}
+
+function handleClearAll() {
+  if (confirm('Delete all memos?')) {
+    memoStore.value.clearAll()
+  }
+}
+</script>
+
+<template>
+  <!-- Tab -->
+  <div class="memo-tab" :class="{ hidden: memoOpen }" @click="openMemo">
+    <span class="memo-tab-icon">&#9998;</span>
+    <span class="memo-tab-label">Memo</span>
+    <span v-if="memoStore.memoCount > 0" class="memo-tab-count">
+      {{ memoStore.memoCount }}
+    </span>
+  </div>
+
+  <!-- Sidebar -->
+  <Teleport to="body">
+    <Transition name="memo-slide">
+      <div v-if="memoOpen" class="memo-sidebar">
+        <div class="memo-header">
+          <span class="memo-title">{{ pageId }} memo</span>
+          <button class="memo-close" @click="memoOpen = false">&times;</button>
+        </div>
+        <div class="memo-body">
+          <div class="memo-input-area">
+            <textarea
+              v-model="newMemo"
+              class="memo-textarea"
+              placeholder="Write a memo... (Enter to save, Shift+Enter for newline)"
+              rows="3"
+              @compositionstart="isComposing = true"
+              @compositionend="isComposing = false"
+              @keydown.enter.exact.prevent="handleAdd"
+            ></textarea>
+            <button class="memo-add-btn" @click="handleAdd" :disabled="!newMemo.trim()">Save</button>
+          </div>
+          <div class="memo-list">
+            <div v-if="memoStore.error" class="memo-error">
+              Sync issue: {{ memoStore.error }}
+            </div>
+            <div v-for="m in memoStore.memos" :key="m.id" class="memo-item">
+              <div class="memo-item-header">
+                <span class="memo-item-meta">
+                  <span v-if="m.author" class="memo-item-author">{{ m.author }}</span>
+                  <span class="memo-item-time">{{ memoStore.formatTime(m.ts) }}</span>
+                </span>
+                <button class="memo-item-del" @click="memoStore.deleteMemo(m.id)" title="Delete">&times;</button>
+              </div>
+              <div class="memo-item-text">{{ m.text }}</div>
+            </div>
+            <div v-if="memoStore.memos.length === 0" class="memo-empty">
+              No memos yet.<br>Record thoughts while reviewing specs.
+            </div>
+          </div>
+        </div>
+        <div class="memo-footer">
+          <span class="memo-footer-info">Team shared memos</span>
+          <button v-if="memoStore.memos.length > 0" class="memo-clear-btn" @click="handleClearAll">Clear all</button>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.memo-tab {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 10px 6px;
+  background: #1e293b;
+  color: #fff;
+  border-radius: 8px 0 0 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: -2px 0 8px rgba(0,0,0,0.15);
+  writing-mode: vertical-rl;
+}
+.memo-tab:hover { background: #334155; padding-right: 10px; }
+.memo-tab.hidden { display: none; }
+.memo-tab-icon { font-size: 16px; writing-mode: horizontal-tb; }
+.memo-tab-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; }
+.memo-tab-count {
+  writing-mode: horizontal-tb;
+  background: #ef4444;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
+
+<style>
+/* Teleported -- unscoped */
+.memo-sidebar {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 360px;
+  max-width: 90vw;
+  background: #fff;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
+  pointer-events: auto;
+}
+.memo-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
+  flex-shrink: 0;
+}
+.memo-title { font-size: 15px; font-weight: 700; color: #1e293b; }
+.memo-close {
+  background: none; border: none; font-size: 22px; color: #94a3b8;
+  cursor: pointer; padding: 0 4px; line-height: 1;
+}
+.memo-close:hover { color: #1e293b; }
+
+.memo-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
+
+.memo-input-area { padding: 16px 20px; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; }
+.memo-textarea {
+  width: 100%; border: 1px solid #e2e8f0; border-radius: 8px;
+  padding: 10px 12px; font-size: 13px; line-height: 1.5;
+  resize: vertical; font-family: inherit; color: #1e293b; box-sizing: border-box;
+}
+.memo-textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
+.memo-textarea::placeholder { color: #94a3b8; }
+
+.memo-add-btn {
+  margin-top: 8px; width: 100%; padding: 8px; background: #1e293b;
+  color: #fff; border: none; border-radius: 6px; font-size: 13px;
+  font-weight: 600; cursor: pointer;
+}
+.memo-add-btn:hover { background: #334155; }
+.memo-add-btn:disabled { background: #cbd5e1; cursor: not-allowed; }
+
+.memo-list { flex: 1; overflow-y: auto; padding: 12px 20px; }
+.memo-item {
+  padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0;
+  border-radius: 8px; margin-bottom: 8px;
+}
+.memo-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.memo-item-meta { display: flex; align-items: center; gap: 6px; }
+.memo-item-author { font-size: 11px; color: #3b82f6; font-weight: 600; }
+.memo-item-time { font-size: 11px; color: #94a3b8; font-weight: 500; }
+.memo-item-del {
+  background: none; border: none; font-size: 16px; color: #cbd5e1;
+  cursor: pointer; padding: 0 2px; line-height: 1;
+}
+.memo-item-del:hover { color: #ef4444; }
+.memo-item-text {
+  font-size: 13px; color: #1e293b; line-height: 1.6;
+  white-space: pre-wrap; word-break: break-word;
+}
+
+.memo-empty {
+  text-align: center; color: #94a3b8; font-size: 13px;
+  padding: 40px 20px; line-height: 1.6;
+}
+.memo-error {
+  margin-bottom: 10px;
+  padding: 8px 10px;
+  border: 1px solid #fecaca;
+  background: #fef2f2;
+  color: #b91c1c;
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.memo-footer {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 20px; border-top: 1px solid #e2e8f0;
+  background: #f8fafc; flex-shrink: 0;
+}
+.memo-footer-info { font-size: 11px; color: #94a3b8; }
+.memo-clear-btn {
+  background: none; border: 1px solid #fca5a5; color: #ef4444;
+  font-size: 11px; padding: 4px 10px; border-radius: 4px;
+  cursor: pointer; font-weight: 500;
+}
+.memo-clear-btn:hover { background: #fef2f2; }
+
+/* Transitions */
+.memo-slide-enter-active, .memo-slide-leave-active { transition: transform 0.25s ease; }
+.memo-slide-enter-from, .memo-slide-leave-to { transform: translateX(100%); }
+</style>

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useActiveSection } from '@/composables/useActiveSection'
+
+const route = useRoute()
+const router = useRouter()
+const { clearActiveSection } = useActiveSection()
+
+const currentSprint = computed(() => (route.params.sprint as string) || '')
+const currentPageId = computed(() => (route.params.pageId as string) || '')
+
+interface SidebarItem {
+  id: string
+  icon: string
+  label: string
+  pageId: string | null
+}
+
+// TODO: Replace with your project's sidebar items
+const sidebarItems: SidebarItem[] = [
+  { id: 'home', icon: '🏠', label: 'Home', pageId: 'home' },
+]
+
+function navigate(item: SidebarItem) {
+  if (!item.pageId || item.pageId === currentPageId.value) return
+  router.push(`/${item.pageId}/${currentSprint.value}`)
+}
+
+watch(currentPageId, () => {
+  clearActiveSection()
+})
+</script>
+
+<template>
+  <div class="mockup-shell">
+    <nav class="app-sidebar">
+      <div class="sidebar-logo">APP</div>
+      <div class="sidebar-menu">
+        <a
+          v-for="item in sidebarItems"
+          :key="item.id"
+          class="sidebar-item"
+          :class="{
+            active: item.pageId === currentPageId,
+            disabled: !item.pageId,
+          }"
+          @click="navigate(item)"
+        >
+          <span class="sidebar-icon">{{ item.icon }}</span>{{ item.label }}
+        </a>
+      </div>
+    </nav>
+    <div class="mockup-main">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mockup-shell {
+  display: flex;
+  min-height: 100%;
+  height: 100%;
+  background: var(--bg);
+}
+
+.app-sidebar {
+  width: var(--sidebar-width);
+  background: var(--text-primary);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0;
+  flex-shrink: 0;
+}
+.sidebar-logo {
+  width: 44px; height: 44px; background: var(--primary); border-radius: 10px;
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; font-size: 11px; margin-bottom: 24px; letter-spacing: -0.5px;
+}
+.sidebar-menu { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0 8px; }
+.sidebar-item {
+  display: flex; flex-direction: column; align-items: center; gap: 2px;
+  padding: 10px 4px; border-radius: 8px; font-size: 10px; color: #9ca3af;
+  cursor: pointer; transition: all 0.15s; text-decoration: none;
+}
+.sidebar-item:hover:not(.disabled) { background: rgba(255,255,255,0.08); color: #fff; }
+.sidebar-item.active { background: rgba(255,255,255,0.12); color: #fff; }
+.sidebar-item.disabled { opacity: 0.35; cursor: default; }
+.sidebar-icon { font-size: 18px; height: 20px; }
+
+.mockup-main {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  overflow-y: auto;
+}
+</style>

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

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { Rule } from '@/data/types'
+
+defineProps<{
+  rules: Rule[]
+}>()
+
+function severityClass(sev: string) {
+  const map: Record<string, string> = {
+    danger: 'sev-r',
+    warning: 'sev-y',
+    good: 'sev-g',
+    info: 'sev-b',
+    opportunity: 'sev-b',
+  }
+  return map[sev] ?? 'sev-b'
+}
+
+function implClass(status: string) {
+  const map: Record<string, string> = {
+    done: 'impl-done',
+    'data-ready': 'impl-ready',
+    'logic-needed': 'impl-logic',
+    'new-data': 'impl-new',
+  }
+  return map[status] ?? ''
+}
+</script>
+
+<template>
+  <table class="sb-rules">
+    <thead>
+      <tr>
+        <th>ID</th>
+        <th>Condition</th>
+        <th>Sev</th>
+        <th>Message</th>
+        <th>Impl</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="rule in rules" :key="rule.id">
+        <td class="rid">{{ rule.id }}</td>
+        <td>{{ rule.condition }}</td>
+        <td><span class="sev" :class="severityClass(rule.severity)" /></td>
+        <td class="msg">{{ rule.homeMessage }}</td>
+        <td><span class="impl" :class="implClass(rule.implStatus)">{{ rule.implStatus }}</span></td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+.sb-rules {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.sb-rules th {
+  text-align: left;
+  padding: 6px 8px;
+  background: #f8fafc;
+  border-bottom: 2px solid var(--border);
+  font-weight: 700;
+  color: var(--text-secondary);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.sb-rules td {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border-light);
+  vertical-align: top;
+}
+.rid { font-family: var(--font-num); font-weight: 600; white-space: nowrap; color: var(--primary); }
+.msg { color: var(--text-secondary); max-width: 200px; }
+.sev {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.sev-r { background: var(--red); }
+.sev-y { background: var(--yellow); }
+.sev-g { background: var(--green); }
+.sev-b { background: var(--blue); }
+.impl {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.impl-done { background: var(--green-bg); color: var(--green); }
+.impl-ready { background: var(--blue-bg); color: var(--blue); }
+.impl-logic { background: var(--yellow-bg); color: var(--yellow); }
+.impl-new { background: var(--red-bg); color: var(--red); }
+</style>

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

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { Scenario } from '@/data/types'
+
+const props = defineProps<{
+  scenarios: Scenario<any>[]
+  activeId: string
+}>()
+
+const emit = defineEmits<{
+  change: [id: string]
+  duplicate: [id: string]
+  deleteCustom: [id: string]
+}>()
+
+function isCustom(id: string) {
+  return id.startsWith('custom-')
+}
+</script>
+
+<template>
+  <div class="variant-bar">
+    <span>Scenario:</span>
+    <div
+      v-for="s in scenarios"
+      :key="s.id"
+      class="variant-item"
+    >
+      <button
+        class="variant-btn"
+        :class="{ active: activeId === s.id }"
+        @click="emit('change', s.id)"
+      >
+        {{ s.label }}
+      </button>
+      <button
+        v-if="activeId === s.id && !isCustom(s.id)"
+        class="action-btn duplicate-btn"
+        title="Duplicate scenario"
+        @click.stop="emit('duplicate', s.id)"
+      >+</button>
+      <button
+        v-if="isCustom(s.id)"
+        class="action-btn delete-btn"
+        title="Delete custom scenario"
+        @click.stop="emit('deleteCustom', s.id)"
+      >&times;</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.variant-bar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: #1f2123;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 20px;
+  font-size: 13px;
+  flex-wrap: wrap;
+}
+.variant-bar > span { opacity: 0.6; }
+.variant-item {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.variant-btn {
+  padding: 5px 14px;
+  border-radius: 6px;
+  border: 1px solid rgba(255,255,255,0.2);
+  background: transparent;
+  color: #fff;
+  font-size: 12px;
+  font-family: var(--font-kr);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.variant-btn:hover { background: rgba(255,255,255,0.1); }
+.variant-btn.active { background: var(--primary); border-color: var(--primary); }
+.action-btn {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid rgba(255,255,255,0.3);
+  background: transparent;
+  color: #fff;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+.action-btn:hover { background: rgba(255,255,255,0.15); }
+.delete-btn { border-color: rgba(255,100,100,0.5); color: #ff8a8a; }
+.delete-btn:hover { background: rgba(255,100,100,0.2); }
+</style>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SpecArea } from '@/data/types'
+
+defineProps<{
+  areas: SpecArea[]
+  activeId: string | null
+}>()
+
+const emit = defineEmits<{
+  select: [id: string]
+}>()
+</script>
+
+<template>
+  <div class="spec-nav">
+    <button
+      v-for="area in areas"
+      :key="area.id"
+      class="spec-nav-btn"
+      :class="{ active: activeId === area.id }"
+      @click="emit('select', area.id)"
+    >
+      {{ area.shortLabel }}
+    </button>
+  </div>
+</template>

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+defineProps<{
+  areaId: string
+  title: string
+  ruleCount?: number
+}>()
+</script>
+
+<template>
+  <div class="spec-section" :id="`spec-section-${areaId}`">
+    <div class="sb-area">
+      <div class="sb-area-head">
+        <div class="a-id">{{ areaId }}</div>
+        <div class="a-title">{{ title }}</div>
+        <div v-if="ruleCount" class="a-badge">{{ ruleCount }} rules</div>
+      </div>
+      <div class="sb-body">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.spec-section {
+  border-bottom: 1px solid var(--border);
+}
+.sb-area-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: #f8fafc;
+  border-bottom: 1px solid var(--border-light);
+}
+.a-id {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: var(--primary);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.a-title { font-size: 14px; font-weight: 700; flex: 1; }
+.a-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: var(--blue-bg);
+  color: var(--blue);
+  border: 1px solid var(--blue-border);
+}
+.sb-body { padding: 16px; }
+</style>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{
+  items: {
+    label: string
+    value: string
+    delta: string
+    deltaDir: 'up' | 'down' | 'flat'
+  }[]
+}>()
+</script>
+
+<template>
+  <div class="summary-grid">
+    <div v-for="(item, i) in items" :key="i" class="summary-item">
+      <div class="summary-label">{{ item.label }}</div>
+      <div class="summary-value">{{ item.value }}</div>
+      <div class="summary-delta" :class="`delta-${item.deltaDir}`">{{ item.delta }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+.summary-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
+.summary-value {
+  font-family: var(--font-num);
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+}
+.summary-delta { font-size: 12px; margin-top: 2px; font-family: var(--font-num); }
+.delta-up { color: var(--green); }
+.delta-down { color: var(--red); }
+.delta-flat { color: var(--text-muted); }
+</style>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PageVersion } from '@/data/types'
+
+defineProps<{
+  version: PageVersion
+}>()
+
+function statusColor(s: string) {
+  const m: Record<string, string> = { draft: 'yellow', review: 'blue', approved: 'green', dev: 'green' }
+  return m[s] ?? 'blue'
+}
+</script>
+
+<template>
+  <div class="version-badge">
+    <span class="ver-tag">v{{ version.version }}</span>
+    <span class="ver-status" :class="`status-${statusColor(version.status)}`">
+      {{ version.status }}
+    </span>
+    <span class="ver-date">{{ version.lastUpdated }}</span>
+  </div>
+</template>
+
+<style scoped>
+.version-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
+.ver-tag { font-family: var(--font-num); font-weight: 700; color: var(--text-secondary); }
+.ver-status {
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+.status-yellow { background: var(--yellow-bg); color: var(--yellow); }
+.status-blue { background: var(--blue-bg); color: var(--blue); }
+.status-green { background: var(--green-bg); color: var(--green); }
+.ver-date { color: var(--text-muted); }
+</style>