popilot 0.2.0

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

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { RetroItem, RetroPhase } from '@/composables/useRetro'
+
+const props = defineProps<{
+  item: RetroItem
+  phase: RetroPhase
+  currentUser: string
+  canVote: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'delete'): void
+  (e: 'toggle-vote'): void
+}>()
+</script>
+
+<template>
+  <div class="retro-card" :class="{ voted: item.hasVoted }">
+    <div class="card-content">{{ item.content }}</div>
+    <div class="card-footer">
+      <span class="card-author">{{ item.author }}</span>
+      <div class="card-actions">
+        <button
+          v-if="phase === 'vote' || phase === 'discuss'"
+          class="card-vote-btn"
+          :class="{ active: item.hasVoted, disabled: !canVote && !item.hasVoted }"
+          :disabled="!canVote && !item.hasVoted"
+          @click="emit('toggle-vote')"
+        >
+          {{ item.hasVoted ? '&#128077;' : '&#9757;' }} {{ item.voteCount }}
+        </button>
+        <button
+          v-if="phase === 'write' && item.author === currentUser"
+          class="card-del-btn"
+          @click="emit('delete')"
+        >
+          &times;
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.retro-card {
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 8px;
+  padding: 12px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: all 0.15s;
+}
+.retro-card.voted {
+  border-color: var(--primary);
+  background: var(--primary-light);
+}
+
+.card-content {
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+  gap: 8px;
+}
+
+.card-author {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.card-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.card-vote-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+  color: var(--text-secondary);
+}
+.card-vote-btn:hover:not(:disabled) {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+.card-vote-btn.active {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+}
+.card-vote-btn.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.card-del-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+.card-del-btn:hover {
+  background: var(--red-bg);
+  color: var(--red);
+}
+</style>

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

@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { RetroSession, RetroPhase } from '@/composables/useRetro'
+import { VOTES_PER_PERSON } from '@/composables/useRetro'
+import type { TeamMember } from '@/composables/useUser'
+
+const props = defineProps<{
+  session: RetroSession | null
+  sprintId: string
+  currentUser: string | null
+  votesRemaining: number
+  teamMembers: string[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'phase-change', phase: RetroPhase): void
+  (e: 'select-user', name: TeamMember): void
+  (e: 'reset'): void
+  (e: 'export'): void
+}>()
+
+const userOpen = ref(false)
+
+const PHASE_META: Record<RetroPhase, { label: string; next: string }> = {
+  write: { label: 'Writing', next: 'Start Voting' },
+  vote: { label: 'Voting', next: 'Start Discussion' },
+  discuss: { label: 'Discussing', next: 'Complete' },
+  done: { label: 'Done', next: '' },
+}
+
+const PHASE_ORDER: RetroPhase[] = ['write', 'vote', 'discuss', 'done']
+
+function prevPhase() {
+  if (!props.session) return
+  const idx = PHASE_ORDER.indexOf(props.session.phase)
+  if (idx > 0) emit('phase-change', PHASE_ORDER[idx - 1])
+}
+
+function nextPhase() {
+  if (!props.session) return
+  const idx = PHASE_ORDER.indexOf(props.session.phase)
+  if (idx < PHASE_ORDER.length - 1) emit('phase-change', PHASE_ORDER[idx + 1])
+}
+
+function phase(): RetroPhase {
+  return props.session?.phase ?? 'write'
+}
+
+function selectMember(name: string) {
+  emit('select-user', name as TeamMember)
+  userOpen.value = false
+}
+
+const menuOpen = ref(false)
+
+function handleReset() {
+  menuOpen.value = false
+  if (confirm('Reset all retro data for this sprint?')) {
+    emit('reset')
+  }
+}
+
+function handleExport() {
+  menuOpen.value = false
+  emit('export')
+}
+</script>
+
+<template>
+  <div class="retro-header">
+    <div class="rh-left">
+      <span class="rh-sprint">{{ sprintId.toUpperCase() }} Retro</span>
+      <span class="rh-phase" :data-phase="phase()">
+        {{ PHASE_META[phase()].label }}
+      </span>
+      <span v-if="phase() === 'vote'" class="rh-votes">
+        Votes left: <strong>{{ votesRemaining }}</strong>/{{ VOTES_PER_PERSON }}
+      </span>
+    </div>
+    <div class="rh-right">
+      <!-- User selector -->
+      <div class="rh-user-wrap">
+        <button class="rh-user-btn" @click.stop="userOpen = !userOpen">
+          {{ currentUser ?? 'Select name' }}
+          <span class="rh-chevron">&#9662;</span>
+        </button>
+        <div v-if="userOpen" class="rh-user-menu">
+          <div
+            v-for="m in teamMembers"
+            :key="m"
+            class="rh-user-item"
+            :class="{ active: m === currentUser }"
+            @click="selectMember(m)"
+          >
+            {{ m }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Phase controls -->
+      <button v-if="phase() !== 'write'" class="rh-prev" @click="prevPhase">
+        &larr; Prev
+      </button>
+      <button v-if="phase() !== 'done'" class="rh-next" @click="nextPhase">
+        {{ PHASE_META[phase()].next }} &rarr;
+      </button>
+
+      <!-- More menu -->
+      <div class="rh-menu-wrap">
+        <button class="rh-menu-btn" @click.stop="menuOpen = !menuOpen">&#8943;</button>
+        <div v-if="menuOpen" class="rh-menu-dropdown">
+          <div class="rh-menu-item" @click="handleExport">&#128203; Copy Markdown</div>
+          <div class="rh-menu-item rh-menu-danger" @click="handleReset">&#128465; Reset</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.retro-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--card-bg);
+  flex-shrink: 0;
+}
+
+.rh-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.rh-sprint {
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--text-primary);
+  letter-spacing: -0.3px;
+}
+
+.rh-phase {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 12px;
+}
+.rh-phase[data-phase='write'] { background: var(--blue-bg); color: var(--blue); }
+.rh-phase[data-phase='vote'] { background: var(--yellow-bg); color: var(--yellow); }
+.rh-phase[data-phase='discuss'] { background: var(--green-bg); color: var(--green); }
+.rh-phase[data-phase='done'] { background: var(--border-light); color: var(--text-muted); }
+
+.rh-votes { font-size: 13px; color: var(--text-secondary); }
+.rh-votes strong { color: var(--yellow); }
+
+.rh-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* -- User dropdown -- */
+.rh-user-wrap { position: relative; }
+
+.rh-user-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font-kr);
+  cursor: pointer;
+  color: var(--text-primary);
+  transition: all 0.15s;
+}
+.rh-user-btn:hover { background: var(--bg); }
+
+.rh-chevron {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.rh-user-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 120px;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: var(--shadow-md);
+  padding: 4px;
+  z-index: 100;
+}
+
+.rh-user-item {
+  padding: 6px 12px;
+  font-size: 13px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all 0.1s;
+}
+.rh-user-item:hover { background: var(--bg); color: var(--text-primary); }
+.rh-user-item.active { color: var(--primary); font-weight: 600; }
+
+/* -- Phase buttons -- */
+.rh-prev {
+  padding: 6px 12px;
+  background: none;
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font-kr);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.rh-prev:hover { background: var(--bg); color: var(--text-primary); }
+
+.rh-next {
+  padding: 6px 14px;
+  background: var(--primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: var(--font-kr);
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.rh-next:hover { opacity: 0.9; }
+
+/* -- More menu -- */
+.rh-menu-wrap { position: relative; }
+
+.rh-menu-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 18px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.rh-menu-btn:hover { background: var(--bg); color: var(--text-primary); }
+
+.rh-menu-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 150px;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: var(--shadow-md);
+  padding: 4px;
+  z-index: 100;
+}
+
+.rh-menu-item {
+  padding: 8px 12px;
+  font-size: 13px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all 0.1s;
+  white-space: nowrap;
+}
+.rh-menu-item:hover { background: var(--bg); color: var(--text-primary); }
+
+.rh-menu-danger { color: var(--red); }
+.rh-menu-danger:hover { background: #FFF4F4; color: var(--red); }
+</style>

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

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useUser } from '@/composables/useUser'
+import { useRetro } from '@/composables/useRetro'
+import { getActiveSprint } from '@/data/navigation'
+import RetroHeader from './RetroHeader.vue'
+import RetroBoard from './RetroBoard.vue'
+import RetroActions from './RetroActions.vue'
+
+const route = useRoute()
+const sprintId = (route.params.sprint as string) || getActiveSprint().id
+
+const { currentUser, setUser, TEAM_MEMBERS } = useUser()
+const retro = useRetro(sprintId)
+
+onMounted(async () => {
+  await retro.loadOrCreateSession()
+  retro.startPolling(currentUser.value ?? '')
+})
+
+watch(currentUser, (nextUser) => {
+  retro.startPolling(nextUser ?? '')
+})
+
+function handleExport() {
+  const md = retro.exportMarkdown()
+  if (!md) return
+  navigator.clipboard.writeText(md).then(() => {
+    alert('Copied to clipboard')
+  })
+}
+</script>
+
+<template>
+  <div class="retro-page">
+    <RetroHeader
+      :session="retro.session.value"
+      :sprint-id="sprintId"
+      :current-user="currentUser"
+      :votes-remaining="retro.votesRemaining.value"
+      :team-members="[...TEAM_MEMBERS]"
+      @phase-change="retro.setPhase"
+      @select-user="setUser"
+      @reset="retro.resetSession"
+      @export="handleExport"
+    />
+
+    <div v-if="retro.loading.value" class="retro-loading">
+      <div class="loading-spinner" />
+      <span>Loading...</span>
+    </div>
+
+    <div v-else-if="retro.error.value" class="retro-error">
+      <div class="error-icon">&#9888;</div>
+      <div class="error-msg">Connection error: {{ retro.error.value }}</div>
+      <button class="error-retry" @click="retro.loadOrCreateSession()">Retry</button>
+    </div>
+
+    <template v-else>
+      <RetroBoard
+        v-if="retro.session.value && retro.session.value.phase !== 'done'"
+        :keep-items="retro.keepItems.value"
+        :problem-items="retro.problemItems.value"
+        :try-items="retro.tryItems.value"
+        :phase="retro.session.value.phase"
+        :current-user="currentUser ?? ''"
+        :votes-remaining="retro.votesRemaining.value"
+        @add-item="retro.addItem"
+        @delete-item="(id) => retro.deleteItem(id, currentUser ?? '')"
+        @toggle-vote="(id, hasVoted) => retro.toggleVote(id, currentUser ?? '', hasVoted)"
+      />
+
+      <div v-if="retro.session.value?.phase === 'done'" class="retro-done">
+        <div class="done-banner">Retro completed</div>
+        <RetroBoard
+          :keep-items="retro.keepItems.value"
+          :problem-items="retro.problemItems.value"
+          :try-items="retro.tryItems.value"
+          phase="discuss"
+          :current-user="currentUser ?? ''"
+          :votes-remaining="0"
+          @add-item="() => {}"
+          @delete-item="() => {}"
+          @toggle-vote="() => {}"
+        />
+      </div>
+
+      <RetroActions
+        v-if="
+          retro.session.value?.phase === 'discuss' ||
+          retro.session.value?.phase === 'done'
+        "
+        :actions="retro.actions.value"
+        :team-members="[...TEAM_MEMBERS]"
+        :readonly="retro.session.value?.phase === 'done'"
+        @add-action="retro.addAction"
+        @toggle-status="retro.toggleActionStatus"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.retro-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg);
+}
+
+/* -- Loading -- */
+.retro-loading {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.loading-spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid var(--border);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* -- Error -- */
+.retro-error {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.error-icon { font-size: 32px; }
+.error-msg { font-size: 14px; color: var(--red); }
+.error-retry {
+  margin-top: 8px;
+  padding: 8px 20px;
+  background: var(--primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: var(--font-kr);
+  cursor: pointer;
+}
+
+/* -- Done -- */
+.retro-done {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.done-banner {
+  text-align: center;
+  padding: 10px;
+  background: var(--green-bg);
+  color: var(--green);
+  font-weight: 700;
+  font-size: 14px;
+  border-bottom: 1px solid var(--green-border);
+}
+</style>

package/scaffold/spec-site/src/pages/shared/NoContentPlaceholder.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { sprints } from '@/data/navigation'
+
+const props = defineProps<{
+  pageId: string
+  sprint: string
+}>()
+
+const sprintLabel = computed(() => sprints.find(s => s.id === props.sprint)?.label ?? props.sprint)
+</script>
+
+<template>
+  <div class="no-content">
+    <div class="no-content-icon">📭</div>
+    <h2>No spec available</h2>
+    <p>No spec has been created for this feature in {{ sprintLabel }}.</p>
+    <div class="no-content-badge">Sprint not available</div>
+  </div>
+</template>
+
+<style scoped>
+.no-content {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  height: calc(100vh - var(--header-height)); color: var(--text-muted); text-align: center; padding: 40px;
+}
+.no-content-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.3; }
+h2 { font-size: 24px; color: var(--text-primary); margin-bottom: 8px; }
+p { font-size: 14px; margin-bottom: 24px; }
+.no-content-badge {
+  padding: 8px 16px; border-radius: 6px;
+  background: var(--border-light); color: var(--text-muted); font-size: 12px; font-weight: 600;
+}
+</style>

package/scaffold/spec-site/src/pages/shared/PlaceholderContent.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="placeholder-content">
+    <div class="placeholder-icon">📝</div>
+    <h2>Spec coming soon</h2>
+    <p>Interactive mockup for this screen will be added soon.</p>
+    <div class="placeholder-badge">In progress</div>
+  </div>
+</template>
+
+<style scoped>
+.placeholder-content {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  height: 100%; color: var(--text-muted); text-align: center; padding: 40px;
+}
+.placeholder-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.3; }
+h2 { font-size: 24px; color: var(--text-primary); margin-bottom: 8px; }
+p { font-size: 14px; margin-bottom: 24px; }
+.placeholder-badge {
+  padding: 8px 16px; border-radius: 6px;
+  background: var(--yellow-bg); color: var(--yellow); font-size: 12px; font-weight: 600;
+}
+</style>

package/scaffold/spec-site/src/pages/shared/PlaceholderSpecPanel.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="spec-placeholder">
+    <div class="placeholder-icon">👈</div>
+    When the mockup is ready,<br>
+    specs will appear here.
+  </div>
+</template>
+
+<style scoped>
+.spec-placeholder {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  height: 200px; color: var(--text-muted); text-align: center;
+  font-size: 14px; line-height: 1.6;
+}
+.placeholder-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.3; }
+</style>