popilot 0.5.0 → 0.7.0

package/scaffold/spec-site/src/pages/board/BoardStoryCard.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PmStory } from '@/composables/usePmStore'
+import { getTasksForStory, STORY_STATUS_LABELS, PRIORITY_LABELS } from '@/composables/usePmStore'
+import StatusBadge from './StatusBadge.vue'
+
+const props = defineProps<{
+  story: PmStory
+}>()
+
+const emit = defineEmits<{ select: [story: PmStory]; updated: [] }>()
+
+const storyTasks = computed(() => getTasksForStory(props.story.id))
+const doneCount = computed(() => storyTasks.value.filter(t => t.status === 'done').length)
+</script>
+
+<template>
+  <div
+    class="story-card"
+    :class="{ 'story-done': story.status === 'done' }"
+    @click="emit('select', story)"
+  >
+    <div class="story-header">
+      <div class="story-top-row">
+        <StatusBadge :label="STORY_STATUS_LABELS[story.status]" type="status" :value="story.status" />
+        <StatusBadge :label="PRIORITY_LABELS[story.priority]" type="priority" :value="story.priority" />
+        <span class="story-area">{{ story.area }}</span>
+        <span v-if="story.storyPoints" class="story-points">{{ story.storyPoints }}pt</span>
+      </div>
+      <div class="story-title">{{ story.title }}</div>
+      <div class="story-bottom">
+        <span v-if="story.assignee" class="story-assignee">{{ story.assignee }}</span>
+        <span v-if="storyTasks.length > 0" class="story-task-count">{{ doneCount }}/{{ storyTasks.length }} tasks</span>
+        <span v-if="story.relatedPrs?.length" class="story-pr-badge" title="PRs linked">{{ story.relatedPrs.length }} PR</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.story-card {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 12px;
+  cursor: pointer;
+  transition: box-shadow 0.15s, border-color 0.15s;
+}
+.story-card:hover {
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  border-color: #cbd5e1;
+}
+.story-done { opacity: 0.6; }
+.story-header { display: flex; flex-direction: column; gap: 6px; }
+.story-top-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
+.story-area { font-size: 10px; font-weight: 600; color: #64748b; background: #f1f5f9; padding: 1px 6px; border-radius: 3px; }
+.story-points { font-size: 10px; font-weight: 600; color: #3b82f6; margin-left: auto; }
+.story-title { font-size: 13px; font-weight: 600; color: #1e293b; line-height: 1.4; }
+.story-bottom { display: flex; align-items: center; gap: 8px; }
+.story-assignee { font-size: 11px; color: #64748b; }
+.story-task-count { font-size: 10px; color: #94a3b8; margin-left: auto; }
+.story-pr-badge { font-size: 11px; color: #3b82f6; }
+@media (max-width: 767px) {
+  .story-card { padding: 8px 10px; }
+  .story-title { font-size: 12px; }
+}
+</style>

package/scaffold/spec-site/src/pages/board/BoardTaskItem.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { PmTask } from '@/composables/usePmStore'
+import { TASK_STATUSES, TASK_STATUS_LABELS, updateTaskStatus, updateTask } from '@/composables/usePmStore'
+
+const props = defineProps<{
+  task: PmTask
+}>()
+
+const emit = defineEmits<{
+  updated: []
+}>()
+
+async function updateTaskDate(value: string) {
+  await updateTask(props.task.id, { dueDate: value || null } as any)
+  emit('updated')
+}
+
+async function cycleStatus() {
+  const idx = TASK_STATUSES.indexOf(props.task.status)
+  const next = TASK_STATUSES[(idx + 1) % TASK_STATUSES.length]
+  await updateTaskStatus(props.task.id, next)
+  emit('updated')
+}
+</script>
+
+<template>
+  <div class="task-item" :class="{ done: task.status === 'done' }">
+    <button class="task-check" @click="cycleStatus" :title="TASK_STATUS_LABELS[task.status]">
+      <span v-if="task.status === 'done'">&#10003;</span>
+      <span v-else-if="task.status === 'in-progress'" class="check-progress">&#9654;</span>
+      <span v-else class="check-empty">&#9675;</span>
+    </button>
+    <span class="task-title">{{ task.title }}</span>
+    <span v-if="task.storyPoints" class="task-sp">{{ task.storyPoints }}SP</span>
+    <span v-if="task.assignee" class="task-assignee">{{ task.assignee }}</span>
+    <input type="date" class="task-date" :value="task.dueDate ?? ''" @change="updateTaskDate(($event.target as HTMLInputElement).value)" title="Due date" />
+  </div>
+</template>
+
+<style scoped>
+.task-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px; font-size: 12px; transition: background 0.1s; }
+.task-item:hover { background: #f8fafc; }
+.task-item.done .task-title { text-decoration: line-through; color: #94a3b8; }
+.task-check { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: none; cursor: pointer; font-size: 14px; flex-shrink: 0; border-radius: 4px; transition: background 0.1s; }
+.task-check:hover { background: #e2e8f0; }
+.check-empty { color: #cbd5e1; }
+.check-progress { color: #f59e0b; font-size: 10px; }
+.task-title { flex: 1; color: #334155; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.task-sp { font-size: 10px; font-weight: 700; color: #3b82f6; flex-shrink: 0; }
+.task-date { border: 1px solid rgba(0,0,0,0.06); border-radius: 4px; padding: 1px 4px; font-size: 10px; background: transparent; color: var(--text-muted); flex-shrink: 0; width: 100px; }
+.task-assignee { font-size: 11px; color: #94a3b8; flex-shrink: 0; background: #f1f5f9; padding: 1px 6px; border-radius: 3px; }
+</style>

package/scaffold/spec-site/src/pages/board/MyTasksPage.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  stories, tasks, pmLoaded, loadPmData,
+  getMyStories, getMyTasks,
+  updateStoryStatus, updateTaskStatus,
+  STORY_STATUSES, TASK_STATUSES,
+  STORY_STATUS_LABELS, TASK_STATUS_LABELS,
+  type PmStory, type PmTask,
+} from '@/composables/usePmStore'
+import { useUser } from '@/composables/useUser'
+import StatusBadge from './StatusBadge.vue'
+
+const route = useRoute()
+const { currentUser } = useUser()
+const loading = ref(true)
+
+const sprint = computed(() => route.params.sprint as string)
+
+const myStories = computed(() => {
+  if (!currentUser.value) return []
+  return getMyStories(currentUser.value).filter((s: PmStory) => s.sprint === sprint.value)
+})
+
+const myTasks = computed(() => {
+  if (!currentUser.value) return []
+  return getMyTasks(currentUser.value).filter((t: PmTask) => {
+    const story = stories.value.find((s: PmStory) => s.id === t.storyId)
+    return story && story.sprint === sprint.value
+  })
+})
+
+async function cycleStoryStatus(story: PmStory) {
+  const idx = STORY_STATUSES.indexOf(story.status)
+  const next = STORY_STATUSES[(idx + 1) % STORY_STATUSES.length]
+  await updateStoryStatus(story.id, next)
+}
+
+async function cycleTaskStatus(task: PmTask) {
+  const idx = TASK_STATUSES.indexOf(task.status)
+  const next = TASK_STATUSES[(idx + 1) % TASK_STATUSES.length]
+  await updateTaskStatus(task.id, next)
+}
+
+function getStoryTitle(storyId: number): string {
+  return stories.value.find(s => s.id === storyId)?.title ?? '?'
+}
+
+onMounted(async () => {
+  await loadPmData(sprint.value)
+  loading.value = false
+})
+</script>
+
+<template>
+  <div class="my-tasks-page">
+    <h1>My Tasks — {{ sprint.toUpperCase() }}</h1>
+
+    <div v-if="!currentUser" class="empty">
+      User setup required. Please select your name on the retrospective page.
+    </div>
+
+    <div v-else-if="loading" class="loading">Loading...</div>
+
+    <template v-else>
+      <p class="user-label">{{ currentUser }}</p>
+
+      <!-- My stories -->
+      <section class="section">
+        <h2>Assigned Stories <span class="count">{{ myStories.length }}</span></h2>
+        <div v-if="myStories.length === 0" class="empty-section">No assigned stories</div>
+        <div v-else class="item-list">
+          <div
+            v-for="s in myStories"
+            :key="s.id"
+            class="item-row"
+            @click="cycleStoryStatus(s)"
+          >
+            <StatusBadge :label="STORY_STATUS_LABELS[s.status]" type="status" :value="s.status" />
+            <span class="item-title">{{ s.title }}</span>
+            <span v-if="s.storyPoints" class="item-points">{{ s.storyPoints }}pt</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- My tasks -->
+      <section class="section">
+        <h2>Assigned Tasks <span class="count">{{ myTasks.length }}</span></h2>
+        <div v-if="myTasks.length === 0" class="empty-section">No assigned tasks</div>
+        <div v-else class="item-list">
+          <div
+            v-for="t in myTasks"
+            :key="t.id"
+            class="item-row"
+            @click="cycleTaskStatus(t)"
+          >
+            <StatusBadge :label="TASK_STATUS_LABELS[t.status]" type="status" :value="t.status" />
+            <span class="item-title">{{ t.title }}</span>
+            <span class="item-story">{{ getStoryTitle(t.storyId) }}</span>
+          </div>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.my-tasks-page {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 24px;
+  height: 100%;
+  overflow-y: auto;
+}
+
+h1 {
+  font-size: 22px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 4px;
+}
+
+.user-label {
+  font-size: 14px;
+  color: #3b82f6;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+.section {
+  margin-bottom: 24px;
+}
+.section h2 {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+.count {
+  font-size: 12px;
+  color: #94a3b8;
+  font-weight: 400;
+}
+
+.item-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.item-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.item-row:hover { background: #f8fafc; }
+
+.item-title {
+  flex: 1;
+  font-size: 13px;
+  color: #334155;
+  font-weight: 500;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-points {
+  font-size: 11px;
+  color: #3b82f6;
+  font-weight: 600;
+}
+
+.item-story {
+  font-size: 11px;
+  color: #94a3b8;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.loading, .empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: #94a3b8;
+  font-size: 14px;
+}
+
+.empty-section {
+  padding: 16px;
+  text-align: center;
+  color: #cbd5e1;
+  font-size: 13px;
+}
+</style>

package/scaffold/spec-site/src/pages/board/SprintClose.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { apiGet, apiPost } from '@/api/client'
+
+const route = useRoute()
+const router = useRouter()
+const sprintId = computed(() => route.params.sprintId as string)
+
+const loading = ref(false)
+const error = ref('')
+const planData = ref<{
+  sprint: { status: string; velocity: number | null }
+  summary: { completedCount: number; incompleteCount: number; totalStories: number; doneSP: number; totalSP?: number }
+  incompleteStories: Array<{ id: number; title: string; story_points: number | null; status: string; assignee: string | null }>
+  velocity?: Array<{ assignee: string; doneSP: number; totalSP: number }>
+} | null>(null)
+
+const result = ref<{
+  summary: {
+    completedCount: number; incompleteCount: number; totalStories: number
+    doneSP: number; totalSP: number; completionRate: number
+    movedToBacklog: Array<{ id: number; title: string }>
+  }
+} | null>(null)
+
+const incomplete = computed(() => planData.value?.incompleteStories ?? [])
+const doneSP = computed(() => planData.value?.summary?.doneSP ?? 0)
+const totalSP = computed(() => planData.value?.summary?.totalSP ?? 0)
+const completionRate = computed(() => {
+  const total = planData.value?.summary?.totalStories ?? 0
+  const completed = planData.value?.summary?.completedCount ?? 0
+  return total > 0 ? Math.round((completed / total) * 100) : 0
+})
+
+async function closeSprint() {
+  loading.value = true
+  error.value = ''
+  const { data, error: e } = await apiPost(`/api/v2/kickoff/${sprintId.value}/close`, {})
+  loading.value = false
+  if (e) { error.value = e; return }
+  result.value = data as typeof result.value
+}
+
+onMounted(async () => {
+  const { data } = await apiGet<typeof planData.value>(`/api/v2/kickoff/${sprintId.value}/close-preview`)
+  if (data) planData.value = data
+  if (data?.sprint?.status !== 'active') {
+    error.value = `${sprintId.value} is not in active status (current: ${data?.sprint?.status})`
+  }
+})
+</script>
+
+<template>
+  <div class="close-page">
+    <!-- Close complete -->
+    <div v-if="result" class="close-result">
+      <h1>{{ sprintId }} Closed</h1>
+      <div class="summary-cards">
+        <div class="summary-card">
+          <div class="summary-value">{{ result.summary.completedCount }}</div>
+          <div class="summary-label">Completed Stories</div>
+        </div>
+        <div class="summary-card">
+          <div class="summary-value">{{ result.summary.doneSP }}</div>
+          <div class="summary-label">Completed SP</div>
+        </div>
+        <div class="summary-card">
+          <div class="summary-value">{{ result.summary.completionRate }}%</div>
+          <div class="summary-label">Completion Rate</div>
+        </div>
+      </div>
+      <div v-if="result.summary.movedToBacklog.length" class="backlog-list">
+        <h3>Stories Moved to Backlog ({{ result.summary.incompleteCount }})</h3>
+        <div v-for="s in result.summary.movedToBacklog" :key="s.id" class="backlog-item">
+          S{{ s.id }}: {{ s.title }}
+        </div>
+      </div>
+      <div class="close-actions">
+        <button class="btn btn--primary" @click="router.push(`/retro/${sprintId}`)">Start Retrospective &rarr;</button>
+        <button class="btn" @click="router.push('/')">Dashboard</button>
+      </div>
+    </div>
+
+    <!-- Close confirmation -->
+    <div v-else>
+      <h1>Close {{ sprintId }}</h1>
+      <p v-if="error" class="error-msg">{{ error }}</p>
+
+      <div v-if="planData && !error" class="close-preview">
+        <div class="summary-cards">
+          <div class="summary-card">
+            <div class="summary-value">{{ planData?.summary?.completedCount ?? 0 }} / {{ planData?.summary?.totalStories ?? 0 }}</div>
+            <div class="summary-label">Completed Stories</div>
+          </div>
+          <div class="summary-card">
+            <div class="summary-value">{{ doneSP }} / {{ totalSP }}</div>
+            <div class="summary-label">Story Points</div>
+          </div>
+          <div class="summary-card">
+            <div class="summary-value">{{ completionRate }}%</div>
+            <div class="summary-label">Completion Rate</div>
+          </div>
+        </div>
+
+        <!-- Per-member velocity -->
+        <div v-if="planData?.velocity" class="velocity-section">
+          <h3>Team Member Performance</h3>
+          <div v-for="v in (planData as any).velocity" :key="v.assignee" class="velocity-row">
+            <span class="velocity-name">{{ v.assignee }}</span>
+            <span class="velocity-sp">{{ v.doneSP }} / {{ v.totalSP }} SP</span>
+          </div>
+        </div>
+
+        <div v-if="incomplete.length" class="incomplete-section">
+          <h3>Incomplete Stories ({{ incomplete.length }}) — will be moved to backlog</h3>
+          <div v-for="s in incomplete" :key="s.id" class="incomplete-item">
+            <span class="status-dot" />
+            S{{ s.id }}: {{ s.title }}
+            <span class="sp-badge">{{ s.story_points ?? '-' }} SP</span>
+          </div>
+        </div>
+
+        <button class="btn btn--danger btn--lg" :disabled="loading" @click="closeSprint">
+          {{ loading ? 'Closing...' : `Close ${sprintId}` }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.close-page { max-width: 720px; margin: 0 auto; padding: 32px 24px; }
+.close-page h1 { font-size: 24px; font-weight: 700; margin-bottom: 20px; }
+.summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
+.summary-card { background: #fff; border-radius: 12px; padding: 16px; text-align: center; }
+.summary-value { font-size: 28px; font-weight: 800; color: var(--text-primary); }
+.summary-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
+.velocity-section { margin-bottom: 20px; }
+.velocity-section h3 { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
+.velocity-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
+.velocity-name { font-weight: 500; }
+.velocity-sp { color: var(--text-secondary); }
+.incomplete-section { margin-bottom: 24px; }
+.incomplete-section h3 { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
+.incomplete-item { padding: 6px 0; font-size: 13px; display: flex; align-items: center; gap: 6px; }
+.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; }
+.sp-badge { font-size: 11px; color: var(--text-muted); margin-left: auto; }
+.backlog-list { margin: 20px 0; }
+.backlog-list h3 { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
+.backlog-item { padding: 4px 0; font-size: 13px; color: var(--text-secondary); }
+.close-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
+.close-result { text-align: center; }
+.close-result h1 { margin-bottom: 24px; }
+.btn { padding: 10px 20px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.06); background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
+.btn--primary { background: var(--primary); color: #fff; border: none; }
+.btn--danger { background: #ef4444; color: #fff; border: none; }
+.btn--lg { width: 100%; padding: 14px; font-size: 16px; }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.error-msg { color: #ef4444; background: rgba(239,68,68,0.08); padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
+@media (max-width: 640px) {
+  .close-page { padding: 16px; }
+  .summary-cards { grid-template-columns: 1fr; }
+  .summary-value { font-size: 22px; }
+  .close-page h1 { font-size: 20px; }
+}
+</style>

package/scaffold/spec-site/src/pages/board/SprintColumn.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PmStory, StoryStatus } from '@/composables/usePmStore'
+import TaskCard from './TaskCard.vue'
+
+defineProps<{ status: StoryStatus; label: string; stories: PmStory[]; dragOver: boolean }>()
+defineEmits<{
+  (e: 'drag-over', event: DragEvent): void
+  (e: 'drag-leave'): void
+  (e: 'drop', event: DragEvent): void
+  (e: 'drag-start', event: DragEvent, story: PmStory): void
+  (e: 'drag-end'): void
+  (e: 'select', story: PmStory): void
+}>()
+
+function statusDotColor(status: string): string {
+  const map: Record<string, string> = { draft: '#94a3b8', backlog: '#a78bfa', ready: '#3b82f6', 'ready-for-dev': '#3b82f6', 'in-progress': '#f59e0b', review: '#8b5cf6', qa: '#ec4899', done: '#22c55e' }
+  return map[status] || '#94a3b8'
+}
+</script>
+
+<template>
+  <div class="kanban-col" :class="{ 'kanban-col--dragover': dragOver }"
+    @dragover="$emit('drag-over', $event)" @dragleave="$emit('drag-leave')" @drop="$emit('drop', $event)">
+    <div class="kanban-col-header">
+      <span class="kanban-col-dot" :style="{ background: statusDotColor(status) }" />
+      <span class="kanban-col-label">{{ label }}</span>
+      <span class="kanban-col-count">{{ stories.length }}</span>
+    </div>
+    <div class="kanban-col-body">
+      <div v-for="story in stories" :key="story.id" class="kanban-card-wrap" draggable="true"
+        @dragstart="$emit('drag-start', $event, story)" @dragend="$emit('drag-end')">
+        <TaskCard :story="story" @click="$emit('select', story)" />
+      </div>
+      <div v-if="stories.length === 0" class="kanban-empty">Drag to move</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.kanban-col { min-width: 200px; flex: 1; display: flex; flex-direction: column; }
+.kanban-col-header { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--text-secondary); background: var(--card-bg, #fff); border: 1px solid var(--border-light, #e2e8f0); border-radius: 12px 12px 0 0; border-bottom: none; }
+.kanban-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.kanban-col-count { margin-left: auto; background: rgba(0,0,0,0.06); color: var(--text-secondary); font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
+.kanban-col-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid rgba(0,0,0,0.06); border-radius: 0 0 8px 8px; background: rgba(0,0,0,0.02); min-height: 100px; }
+.kanban-empty { text-align: center; padding: 20px 0; color: var(--text-muted); font-size: 13px; }
+.kanban-card-wrap { cursor: grab; transition: opacity 0.15s, transform 0.15s; }
+.kanban-card-wrap:active { cursor: grabbing; }
+.kanban-col--dragover .kanban-col-body { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.3); border-style: dashed; }
+</style>