popilot 0.2.0

package/scaffold/spec-site/src/pages/PolicyDetail.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { sprints, getPagesByCategory, getEpicSpecFileName } from '../data/navigation'
+import { renderMarkdown } from '../utils/markdown'
+
+const route = useRoute()
+const router = useRouter()
+
+const sprintId = computed(() => (route.params.sprint as string) || sprints[0]?.id || '')
+const epicId = computed(() => (route.params.epicId as string) || '')
+const sprintConfig = computed(() => sprints.find(s => s.id === sprintId.value))
+const epics = computed(() => getPagesByCategory(sprintId.value, 'policy'))
+const currentEpic = computed(() => epics.value.find(e => e.id === epicId.value))
+
+const markdownHtml = ref('')
+const loading = ref(true)
+const error = ref(false)
+
+// Glob import all epic spec markdown files
+const mdModules = import.meta.glob(
+  '../../../.context/sprints/*/epic-specs/*.md',
+  { query: '?raw', import: 'default' }
+)
+
+watchEffect(async () => {
+  loading.value = true
+  error.value = false
+  markdownHtml.value = ''
+
+  const fileName = getEpicSpecFileName(sprintId.value, epicId.value)
+  if (!fileName) {
+    error.value = true
+    loading.value = false
+    return
+  }
+
+  const key = `../../../.context/sprints/${sprintId.value}/epic-specs/${fileName}`
+  const loader = mdModules[key]
+
+  if (!loader) {
+    error.value = true
+    loading.value = false
+    return
+  }
+
+  try {
+    const raw = (await loader()) as string
+    markdownHtml.value = renderMarkdown(raw)
+  } catch {
+    error.value = true
+  }
+  loading.value = false
+})
+
+function goBack() {
+  router.push(`/policy/${sprintId.value}`)
+}
+</script>
+
+<template>
+  <div class="policy-detail">
+    <!-- Sidebar: epic list -->
+    <aside class="policy-sidebar">
+      <div class="sidebar-header">
+        <button class="back-btn" @click="goBack">&larr; {{ sprintConfig?.label }}</button>
+      </div>
+      <router-link
+        v-for="epic in epics"
+        :key="epic.id"
+        :to="`/policy/${sprintId}/${epic.id}`"
+        class="sidebar-item"
+        :class="{ active: epic.id === epicId }"
+      >
+        <span class="sidebar-id">{{ epic.id }}</span>
+        <span class="sidebar-label">{{ epic.label }}</span>
+      </router-link>
+    </aside>
+
+    <!-- Content -->
+    <main class="policy-content">
+      <div v-if="loading" class="policy-loading">Loading...</div>
+      <div v-else-if="error" class="policy-error">
+        <p>Document not found.</p>
+      </div>
+      <article v-else class="markdown-body" v-html="markdownHtml"></article>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.policy-detail {
+  display: flex;
+  height: calc(100vh - var(--header-height));
+  overflow: hidden;
+}
+
+/* ---- Sidebar ---- */
+.policy-sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--border);
+  background: #fff;
+  overflow-y: auto;
+  padding: 12px 0;
+}
+
+.sidebar-header { padding: 0 12px 8px; }
+.back-btn {
+  font-size: 12px;
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-kr);
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.15s;
+}
+.back-btn:hover { background: var(--bg); color: var(--text-primary); }
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: all 0.1s;
+  border-left: 3px solid transparent;
+}
+.sidebar-item:hover { background: var(--bg); color: var(--text-primary); }
+.sidebar-item.active {
+  background: var(--primary-light);
+  color: var(--primary);
+  border-left-color: var(--primary);
+  font-weight: 600;
+}
+
+.sidebar-id {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-muted);
+  min-width: 32px;
+}
+.sidebar-item.active .sidebar-id { color: var(--primary); }
+.sidebar-label { flex: 1; }
+
+/* ---- Content ---- */
+.policy-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px 40px;
+  background: var(--bg);
+}
+
+.policy-loading,
+.policy-error {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+/* ---- Markdown styles ---- */
+.markdown-body {
+  max-width: 800px;
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--text-primary);
+}
+.markdown-body :deep(h1) { font-size: 24px; font-weight: 700; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--border); }
+.markdown-body :deep(h2) { font-size: 19px; font-weight: 700; margin: 32px 0 12px; }
+.markdown-body :deep(h3) { font-size: 15px; font-weight: 700; margin: 24px 0 8px; }
+.markdown-body :deep(h4) { font-size: 14px; font-weight: 700; margin: 20px 0 6px; color: var(--text-secondary); }
+.markdown-body :deep(p) { margin: 0 0 10px; }
+.markdown-body :deep(strong) { font-weight: 700; }
+.markdown-body :deep(code) {
+  font-size: 12px;
+  background: var(--border-light);
+  padding: 2px 5px;
+  border-radius: 3px;
+  font-family: 'SF Mono', 'Menlo', monospace;
+}
+.markdown-body :deep(pre) {
+  background: var(--text-primary);
+  color: #e5e7eb;
+  padding: 16px;
+  border-radius: var(--radius-sm);
+  overflow-x: auto;
+  margin: 12px 0;
+  font-size: 12px;
+  line-height: 1.6;
+}
+.markdown-body :deep(pre code) { background: none; padding: 0; color: inherit; }
+.markdown-body :deep(ul), .markdown-body :deep(ol) { margin: 8px 0; padding-left: 24px; }
+.markdown-body :deep(li) { margin: 4px 0; }
+.markdown-body :deep(blockquote) {
+  border-left: 3px solid var(--primary);
+  padding: 8px 16px;
+  margin: 12px 0;
+  background: var(--primary-light);
+  color: var(--text-secondary);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+.markdown-body :deep(hr) { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
+.markdown-body :deep(table) { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
+.markdown-body :deep(th) { text-align: left; padding: 8px 12px; background: var(--border-light); font-weight: 700; border: 1px solid var(--border); }
+.markdown-body :deep(td) { padding: 8px 12px; border: 1px solid var(--border); }
+.markdown-body :deep(a) { color: var(--primary); text-decoration: none; }
+.markdown-body :deep(a:hover) { text-decoration: underline; }
+</style>

package/scaffold/spec-site/src/pages/PolicyIndex.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { sprints, getPagesByCategory } from '../data/navigation'
+
+const route = useRoute()
+const router = useRouter()
+
+const sprintId = computed(() => (route.params.sprint as string) || sprints[0]?.id || '')
+const sprintConfig = computed(() => sprints.find(s => s.id === sprintId.value))
+const epics = computed(() => getPagesByCategory(sprintId.value, 'policy'))
+</script>
+
+<template>
+  <div class="policy-index">
+    <div class="policy-header">
+      <h1>{{ sprintConfig?.label }} Policy</h1>
+      <p class="policy-subtitle">{{ sprintConfig?.theme }} · {{ epics.length }} epic specs</p>
+    </div>
+
+    <div class="epic-grid">
+      <div
+        v-for="epic in epics"
+        :key="epic.id"
+        class="epic-card"
+        @click="router.push(`/policy/${sprintId}/${epic.id}`)"
+      >
+        <div class="epic-card-header">
+          <span class="epic-id">{{ epic.id }}</span>
+          <span v-if="epic.badge" class="epic-badge" :class="badgeClass(epic.badge)">{{ epic.badge }}</span>
+        </div>
+        <div class="epic-title">{{ epic.label }}</div>
+        <div v-if="epic.description" class="epic-desc">{{ epic.description }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+function badgeClass(badge: string): string {
+  if (badge === 'P0') return 'badge-red'
+  if (badge === 'P1') return 'badge-yellow'
+  if (badge === 'out') return 'badge-muted'
+  return 'badge-blue'
+}
+</script>
+
+<style scoped>
+.policy-index { padding: 48px 40px; max-width: 960px; margin: 0 auto; }
+.policy-header { margin-bottom: 32px; }
+h1 { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
+.policy-subtitle { font-size: 13px; color: var(--text-secondary); }
+
+.epic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
+.epic-card {
+  padding: 20px;
+  background: var(--card-bg);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-light);
+  box-shadow: var(--shadow);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.epic-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
+.epic-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.epic-id { font-size: 11px; font-weight: 700; color: var(--primary); padding: 2px 6px; background: var(--primary-light); border-radius: 4px; }
+.epic-badge { font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 3px; text-transform: uppercase; margin-left: auto; }
+.badge-red { background: var(--red-bg); color: var(--red); }
+.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
+.badge-blue { background: var(--blue-bg); color: var(--blue); }
+.badge-muted { background: var(--border-light); color: var(--text-muted); }
+.epic-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
+.epic-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
+</style>

package/scaffold/spec-site/src/pages/retro/RetroActions.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import type { RetroAction } from '@/composables/useRetro'
+import { ref } from 'vue'
+
+defineProps<{
+  actions: RetroAction[]
+  teamMembers: string[]
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'add-action', content: string, assignee: string | null): void
+  (e: 'toggle-status', id: number, status: 'pending' | 'done'): void
+}>()
+
+const newContent = ref('')
+const newAssignee = ref('')
+
+function handleAdd() {
+  const text = newContent.value.trim()
+  if (!text) return
+  emit('add-action', text, newAssignee.value || null)
+  newContent.value = ''
+  newAssignee.value = ''
+}
+</script>
+
+<template>
+  <div class="retro-actions">
+    <div class="actions-title">Action Items</div>
+
+    <div v-if="!readonly" class="actions-add">
+      <input
+        v-model="newContent"
+        class="actions-input"
+        placeholder="Add action item..."
+        @keydown.enter="handleAdd"
+      />
+      <select v-model="newAssignee" class="actions-select">
+        <option value="">Assignee</option>
+        <option v-for="m in teamMembers" :key="m" :value="m">{{ m }}</option>
+      </select>
+      <button class="actions-add-btn" :disabled="!newContent.trim()" @click="handleAdd">
+        Add
+      </button>
+    </div>
+
+    <div class="actions-list">
+      <div
+        v-for="action in actions"
+        :key="action.id"
+        class="action-row"
+        :class="{ done: action.status === 'done' }"
+      >
+        <button
+          class="action-check"
+          :disabled="readonly"
+          @click="emit('toggle-status', action.id, action.status)"
+        >
+          {{ action.status === 'done' ? '&#9989;' : '&#11036;' }}
+        </button>
+        <span class="action-content">{{ action.content }}</span>
+        <span v-if="action.assignee" class="action-assignee">@{{ action.assignee }}</span>
+      </div>
+      <div v-if="actions.length === 0" class="actions-empty">No action items yet</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.retro-actions {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+  margin: 0 16px 16px;
+}
+
+.actions-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 12px;
+}
+
+.actions-add {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.actions-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-family: var(--font-kr);
+  outline: none;
+  transition: border-color 0.15s;
+}
+.actions-input:focus {
+  border-color: var(--primary);
+}
+
+.actions-select {
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-family: var(--font-kr);
+  background: #fff;
+  min-width: 90px;
+}
+
+.actions-add-btn {
+  padding: 8px 16px;
+  background: var(--primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-weight: 600;
+  font-family: var(--font-kr);
+  cursor: pointer;
+  transition: opacity 0.15s;
+  white-space: nowrap;
+}
+.actions-add-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.actions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.action-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 6px;
+  transition: background 0.1s;
+}
+.action-row:hover {
+  background: var(--bg);
+}
+.action-row.done .action-content {
+  text-decoration: line-through;
+  color: var(--text-muted);
+}
+
+.action-check {
+  border: none;
+  background: none;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.action-check:disabled {
+  cursor: default;
+}
+
+.action-content {
+  flex: 1;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.action-assignee {
+  font-size: 12px;
+  color: var(--primary);
+  font-weight: 500;
+  background: var(--primary-light);
+  padding: 2px 8px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+
+.actions-empty {
+  text-align: center;
+  padding: 20px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+</style>

package/scaffold/spec-site/src/pages/retro/RetroBoard.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import type { RetroItem, RetroCategory, RetroPhase } from '@/composables/useRetro'
+import RetroCard from './RetroCard.vue'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  keepItems: RetroItem[]
+  problemItems: RetroItem[]
+  tryItems: RetroItem[]
+  phase: RetroPhase
+  currentUser: string
+  votesRemaining: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'add-item', category: RetroCategory, content: string, author: string): void
+  (e: 'delete-item', id: number): void
+  (e: 'toggle-vote', id: number, hasVoted: boolean): void
+}>()
+
+const newContent = ref<Record<RetroCategory, string>>({
+  keep: '',
+  problem: '',
+  try: '',
+})
+
+function handleAdd(cat: RetroCategory, e?: KeyboardEvent) {
+  if (e?.isComposing) return
+  const text = newContent.value[cat].trim()
+  if (!text) return
+  emit('add-item', cat, text, props.currentUser)
+  newContent.value[cat] = ''
+}
+
+function getItems(cat: RetroCategory): RetroItem[] {
+  if (cat === 'keep') return props.keepItems
+  if (cat === 'problem') return props.problemItems
+  return props.tryItems
+}
+
+function getSortedItems(cat: RetroCategory): RetroItem[] {
+  const list = getItems(cat)
+  if (props.phase === 'discuss') {
+    return [...list].sort((a, b) => b.voteCount - a.voteCount)
+  }
+  return list
+}
+
+const COLUMNS: { id: RetroCategory; label: string; emoji: string; bg: string }[] = [
+  { id: 'keep', label: 'Keep', emoji: '&#9989;', bg: '#E8F5E9' },
+  { id: 'problem', label: 'Problem', emoji: '&#128308;', bg: '#FFF4F4' },
+  { id: 'try', label: 'Try', emoji: '&#128161;', bg: '#EFF6FF' },
+]
+</script>
+
+<template>
+  <div class="retro-board">
+    <div
+      v-for="col in COLUMNS"
+      :key="col.id"
+      class="retro-col"
+      :style="{ '--col-bg': col.bg }"
+    >
+      <div class="col-header">
+        <span class="col-emoji" v-html="col.emoji" />
+        <span class="col-label">{{ col.label }}</span>
+        <span class="col-count">{{ getItems(col.id).length }}</span>
+      </div>
+
+      <!-- Input area: write phase only -->
+      <div v-if="phase === 'write'" class="col-input">
+        <textarea
+          v-model="newContent[col.id]"
+          class="col-textarea"
+          placeholder="Add card... (Enter to submit)"
+          rows="2"
+          @keydown.enter.exact.prevent="handleAdd(col.id, $event)"
+        />
+        <button
+          class="col-add-btn"
+          :disabled="!newContent[col.id].trim()"
+          @click="handleAdd(col.id)"
+        >
+          Add
+        </button>
+      </div>
+
+      <!-- Cards -->
+      <div class="col-cards">
+        <RetroCard
+          v-for="item in getSortedItems(col.id)"
+          :key="item.id"
+          :item="item"
+          :phase="phase"
+          :current-user="currentUser"
+          :can-vote="votesRemaining > 0 || item.hasVoted"
+          @delete="emit('delete-item', item.id)"
+          @toggle-vote="emit('toggle-vote', item.id, item.hasVoted)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.retro-board {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  padding: 16px;
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.retro-col {
+  background: var(--col-bg);
+  border-radius: var(--radius);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 200px;
+}
+
+.col-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 700;
+  font-size: 14px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.col-count {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--text-muted);
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 10px;
+  padding: 1px 7px;
+  font-weight: 600;
+}
+
+.col-input {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.col-textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  font-size: 13px;
+  font-family: var(--font-kr);
+  resize: none;
+  outline: none;
+  transition: border-color 0.15s;
+  background: #fff;
+  box-sizing: border-box;
+}
+.col-textarea:focus {
+  border-color: var(--primary);
+}
+
+.col-add-btn {
+  align-self: flex-end;
+  padding: 5px 14px;
+  background: var(--primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: var(--font-kr);
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.col-add-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.col-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>