popilot 0.6.0 → 0.8.0

package/scaffold/spec-site/src/pages/standup/StandupPage.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStandup, type StandupFeedback } from '@/composables/useStandup'
+import { useUser, TEAM_MEMBERS } from '@/composables/useUser'
+import { loadPmData, loadEpics, stories, tasks, addTask } from '@/composables/usePmStore'
+import StandupEntryCard from './StandupEntryCard.vue'
+
+const route = useRoute()
+const { currentUser, dynamicMembers, loadMembers } = useUser()
+
+const sprint = computed(() => route.params.sprint as string)
+const { entries, loading, error, feedback, loadEntries, saveEntry, getEntryForUser, loadFeedback, submitFeedback, startPolling, stopPolling } = useStandup()
+
+// Track feedback per entry
+const feedbackByEntry = ref<Record<number, StandupFeedback[]>>({})
+
+async function loadAllFeedback() {
+  const { apiGet } = await import('@/api/client')
+  const results = await Promise.all(entries.value.map(async (entry) => {
+    const { data } = await apiGet<{ feedback: Array<{
+      id: number; standup_entry_id: number; sprint: string; target_user: string
+      feedback_by: string; feedback_text: string; review_type: string; created_at: string
+    }> }>('/api/v2/standup/feedback', { standup_entry_id: String(entry.id) })
+    const items: StandupFeedback[] = (data?.feedback ?? []).map(r => ({
+      id: r.id, standupEntryId: r.standup_entry_id, sprint: r.sprint,
+      targetUser: r.target_user, feedbackBy: r.feedback_by,
+      feedbackText: r.feedback_text,
+      reviewType: (r.review_type as StandupFeedback['reviewType']) || 'comment',
+      createdAt: r.created_at,
+    }))
+    return { id: entry.id, items }
+  }))
+  const map: Record<number, StandupFeedback[]> = {}
+  for (const r of results) map[r.id] = r.items
+  feedbackByEntry.value = map
+}
+
+function getFeedbackForEntry(entryId: number | undefined): StandupFeedback[] {
+  if (!entryId) return []
+  return feedbackByEntry.value[entryId] ?? []
+}
+
+function todayStr(): string {
+  return new Date().toISOString().split('T')[0]
+}
+
+const selectedDate = ref(todayStr())
+
+const members = computed(() => {
+  return dynamicMembers.value.length > 0 ? dynamicMembers.value : [...TEAM_MEMBERS]
+})
+
+// PM data — sprint scoped (for story picker in edit mode)
+const sprintStories = computed(() => stories.value.filter(s => s.sprint === sprint.value))
+const sprintTasks = computed(() => {
+  const storyIds = new Set(sprintStories.value.map(s => s.id))
+  return tasks.value.filter(t => storyIds.has(t.storyId))
+})
+
+async function onDateChange() {
+  await loadEntries(selectedDate.value)
+  await loadAllFeedback()
+  stopPolling()
+  startPolling(selectedDate.value)
+}
+
+async function handleSave(userName: string, data: { doneText: string | null; planText: string | null; planStoryIds: number[]; blockers: string | null }) {
+  await saveEntry(userName, selectedDate.value, sprint.value, data)
+}
+
+async function handleCreateTask(userName: string, data: { storyId: number; title: string }) {
+  await addTask({ storyId: data.storyId, title: data.title, assignee: userName })
+}
+
+async function handleSubmitFeedback(userName: string, data: { feedbackText: string; reviewType: string }) {
+  const entry = getEntryForUser(userName, selectedDate.value)
+  if (!entry) return
+  if (!currentUser.value) return
+  await submitFeedback(entry.id, sprint.value, userName, currentUser.value, data.feedbackText, data.reviewType)
+  await loadAllFeedback()
+}
+
+function changeDate(delta: number) {
+  const d = new Date(selectedDate.value)
+  d.setDate(d.getDate() + delta)
+  selectedDate.value = d.toISOString().split('T')[0]
+}
+
+watch(selectedDate, () => onDateChange())
+
+onMounted(async () => {
+  await loadMembers()
+  await Promise.all([
+    loadEntries(selectedDate.value),
+    loadEpics(),
+    loadPmData(sprint.value),
+  ])
+  await loadAllFeedback()
+  startPolling(selectedDate.value)
+})
+</script>
+
+<template>
+  <div class="standup-page">
+    <div class="standup-header">
+      <h1>Daily Standup</h1>
+      <div class="date-nav">
+        <button class="date-btn" @click="changeDate(-1)">&larr;</button>
+        <input
+          type="date"
+          v-model="selectedDate"
+          class="date-input"
+        />
+        <button class="date-btn" @click="changeDate(1)">&rarr;</button>
+        <button class="date-btn date-btn--today" @click="selectedDate = todayStr()">Today</button>
+      </div>
+    </div>
+
+    <div v-if="error" class="error-msg">{{ error }}</div>
+    <div v-if="loading" class="loading">Loading...</div>
+
+    <div v-else class="entries-grid">
+      <StandupEntryCard
+        v-for="member in members"
+        :key="member"
+        :entry="getEntryForUser(member, selectedDate)"
+        :user-name="member"
+        :editable="currentUser === member"
+        :current-user="currentUser ?? ''"
+        :sprint-stories="sprintStories"
+        :sprint-tasks="sprintTasks"
+        :feedback="getFeedbackForEntry(getEntryForUser(member, selectedDate)?.id)"
+        @save="(data) => handleSave(member, data)"
+        @create-task="(data) => handleCreateTask(member, data)"
+        @submit-feedback="(data) => handleSubmitFeedback(member, data)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.standup-page {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 24px;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.standup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+h1 {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.date-nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.date-btn {
+  padding: 6px 10px;
+  border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 6px;
+  background: rgba(255,255,255,0.25);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.1s;
+}
+.date-btn:hover { background: rgba(255,255,255,0.4); }
+.date-btn--today {
+  color: #3b82f6;
+  border-color: #bfdbfe;
+}
+
+.date-input {
+  padding: 6px 10px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: rgba(255,255,255,0.25);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 6px;
+  font-size: 13px;
+  color: var(--text-primary);
+  font-weight: 600;
+}
+.date-input:focus { outline: none; border-color: #3b82f6; }
+
+.entries-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 12px;
+}
+
+.loading, .error-msg {
+  text-align: center;
+  padding: 40px;
+  font-size: 14px;
+}
+.loading { color: var(--text-muted); }
+.error-msg { color: var(--red); }
+
+@media (max-width: 767px) {
+  .standup-page { padding: 12px; }
+  .standup-header { flex-direction: column; align-items: flex-start; gap: 8px; }
+  .standup-header h1 { font-size: 18px; }
+  .entries-grid { grid-template-columns: 1fr; gap: 8px; }
+  .date-nav { flex-wrap: wrap; }
+  .date-input { font-size: 12px; }
+}
+</style>

package/scaffold/spec-site/src/router.ts

@@ -2,14 +2,154 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { isValidFeaturePage, featurePages } from './data/navigation'
 import { getWireframe, getAvailableSprints } from './data/wireframeRegistry'
 import { getActiveSprint, sprints } from './composables/useNavStore'
+import { isFeatureEnabled } from './features'
 
 function currentActiveSprint(): string {
   return getActiveSprint().id
 }
 
+/** Guard: redirect to '/' if feature is disabled */
+function featureGuard(featureId: string) {
+  return () => {
+    if (!isFeatureEnabled(featureId as any)) return '/'
+  }
+}
+
 const routes = [
   { path: '/', component: () => import('./pages/IndexPage.vue') },
 
+  // -- Tier 2: Dashboard --
+  {
+    path: '/dashboard',
+    component: () => import('./pages/DashboardPage.vue'),
+    meta: { title: 'Dashboard' },
+    beforeEnter: featureGuard('dashboard'),
+  },
+
+  // -- Tier 2: Board --
+  {
+    path: '/board',
+    redirect: () => `/board/${currentActiveSprint()}`,
+  },
+  {
+    path: '/board/backlog',
+    component: () => import('./pages/board/BoardPage.vue'),
+    meta: { title: 'Backlog' },
+    beforeEnter: featureGuard('board'),
+  },
+  {
+    path: '/board/:sprint',
+    component: () => import('./pages/board/BoardPage.vue'),
+    meta: { title: 'Board' },
+    beforeEnter: featureGuard('board'),
+  },
+
+  // -- Board Admin --
+  {
+    path: '/admin/board',
+    component: () => import('./pages/board/BoardAdmin.vue'),
+    meta: { title: 'Board Admin' },
+    beforeEnter: featureGuard('admin'),
+  },
+
+  // -- My Tasks --
+  {
+    path: '/my-tasks',
+    redirect: () => `/my-tasks/${currentActiveSprint()}`,
+  },
+  {
+    path: '/my-tasks/:sprint',
+    component: () => import('./pages/board/MyTasksPage.vue'),
+    meta: { title: 'My Tasks' },
+    beforeEnter: featureGuard('board'),
+  },
+
+  // -- Sprint Kickoff --
+  {
+    path: '/kickoff/new',
+    component: () => import('./pages/board/SprintKickoff.vue'),
+    meta: { title: 'Sprint Kickoff' },
+    beforeEnter: featureGuard('board'),
+  },
+  {
+    path: '/kickoff/:sprintId',
+    component: () => import('./pages/board/SprintKickoff.vue'),
+    meta: { title: 'Sprint Kickoff' },
+    beforeEnter: featureGuard('board'),
+  },
+
+  // -- Sprint Close --
+  {
+    path: '/close/:sprintId',
+    component: () => import('./pages/board/SprintClose.vue'),
+    meta: { title: 'Sprint Close' },
+    beforeEnter: featureGuard('board'),
+  },
+
+  // -- Tier 2: Standup --
+  {
+    path: '/standup',
+    redirect: () => `/standup/${currentActiveSprint()}`,
+  },
+  {
+    path: '/standup/:sprint',
+    component: () => import('./pages/standup/StandupPage.vue'),
+    meta: { title: 'Standup' },
+    beforeEnter: featureGuard('standup'),
+  },
+
+  // -- Tier 2: Inbox --
+  {
+    path: '/inbox',
+    component: () => import('./pages/InboxPage.vue'),
+    meta: { title: 'Inbox' },
+    beforeEnter: featureGuard('inbox'),
+  },
+
+  // -- Tier 2: My Page --
+  {
+    path: '/my',
+    component: () => import('./pages/MyPage.vue'),
+    meta: { title: 'My Page' },
+    beforeEnter: featureGuard('my-page'),
+  },
+  {
+    path: '/me',
+    redirect: '/my',
+  },
+  {
+    path: '/my-page',
+    redirect: '/my',
+  },
+
+  // -- Tier 2: Admin --
+  {
+    path: '/admin',
+    component: () => import('./pages/AdminPage.vue'),
+    meta: { title: 'Admin' },
+    beforeEnter: featureGuard('admin'),
+  },
+
+  // -- Tier 2: Optional modules --
+  {
+    path: '/rewards',
+    component: () => import('./pages/RewardsPage.vue'),
+    meta: { title: 'Rewards' },
+    beforeEnter: featureGuard('rewards'),
+  },
+  {
+    path: '/meetings',
+    component: () => import('./pages/MeetingsPage.vue'),
+    meta: { title: 'Meetings' },
+    beforeEnter: featureGuard('meetings'),
+  },
+  {
+    path: '/docs',
+    component: () => import('./pages/DocsHub.vue'),
+    meta: { title: 'Docs' },
+    beforeEnter: featureGuard('docs'),
+  },
+
   // -- Policy documents --
   {
     path: '/policy',
@@ -35,6 +175,7 @@ const routes = [
     path: '/retro/:sprint',
     component: () => import('./pages/retro/RetroPage.vue'),
     meta: { title: 'Retro' },
+    beforeEnter: featureGuard('retro'),
   },
 
   // -- Feature pages (wireframe shell) --

package/scaffold/spec-site/src/styles/buttons.css

@@ -0,0 +1,124 @@
+/* Button design system */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  border-radius: var(--radius-md, 8px);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  padding: 8px 16px;
+  line-height: 1.4;
+  white-space: nowrap;
+  font-family: inherit;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Primary */
+.btn--primary {
+  background: #3b82f6;
+  color: #fff;
+}
+.btn--primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+/* Secondary */
+.btn--secondary {
+  background: #f3f4f6;
+  color: #374151;
+}
+.btn--secondary:hover:not(:disabled) {
+  background: #e5e7eb;
+}
+
+/* Ghost */
+.btn--ghost {
+  background: transparent;
+  color: #6b7280;
+}
+.btn--ghost:hover:not(:disabled) {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+/* Danger */
+.btn--danger {
+  background: #fef2f2;
+  color: #dc2626;
+}
+.btn--danger:hover:not(:disabled) {
+  background: #fee2e2;
+}
+
+/* Sizes */
+.btn--xs {
+  font-size: 11px;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.btn--sm {
+  font-size: 12px;
+  padding: 6px 12px;
+}
+.btn--lg {
+  font-size: 15px;
+  padding: 10px 20px;
+}
+
+/* Icon button */
+.btn--icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 8px;
+}
+.btn--icon.btn--xs {
+  width: 24px;
+  height: 24px;
+}
+
+/* Input/Select globals */
+.input, .select,
+input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="date"],
+select, textarea {
+  font-family: inherit;
+  font-size: 13px;
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius-md, 8px);
+  padding: 8px 12px;
+  background: var(--bg-input, #f5f5f5);
+  color: var(--text-primary, #1a1a1a);
+  transition: border-color 0.15s, box-shadow 0.15s;
+  outline: none;
+}
+input:focus, select:focus, textarea:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-light, rgba(59,130,246,0.12));
+  background: var(--bg-card, #fff);
+}
+input::placeholder, textarea::placeholder {
+  color: var(--text-muted, #9ca3af);
+}
+
+/* Badge */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.badge--success { background: #dcfce7; color: #16a34a; }
+.badge--warning { background: #fef3c7; color: #d97706; }
+.badge--danger { background: #fee2e2; color: #dc2626; }
+.badge--info { background: #dbeafe; color: #1d4ed8; }

package/scaffold/spec-site/src/utils/parseMentions.ts

@@ -0,0 +1,56 @@
+/**
+ * @pageName mentions → clickable links
+ * XSS-safe: text is escaped first, then only known page names are linked.
+ *
+ * Page mentions are empty by default — register your project's pages
+ * by editing the PAGE_MENTIONS array below.
+ */
+
+const PAGE_MENTIONS: { label: string; path: string }[] = [
+  // TODO: Add your project's page mentions
+  // { label: 'Home', path: '/home' },
+  // { label: 'Board', path: '/board' },
+  // { label: 'Standup', path: '/standup' },
+  // { label: 'Retro', path: '/retro' },
+]
+
+// Match longest labels first
+const SORTED_LABELS = [...PAGE_MENTIONS].sort((a, b) => b.label.length - a.label.length)
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+/**
+ * Convert @pageName and @person mentions to clickable HTML.
+ * Returns an HTML string (use with v-html).
+ */
+export function parseMentions(text: string): string {
+  let html = escapeHtml(text)
+
+  for (const { label, path } of SORTED_LABELS) {
+    const escaped = escapeHtml(label)
+    const regex = new RegExp(`@${escaped}`, 'g')
+    html = html.replace(
+      regex,
+      `<a href="${path}" class="memo-mention" data-mention-page="${path}">@${escaped}</a>`,
+    )
+  }
+
+  // Person mentions — unmatched @name rendered as blue chip
+  html = html.replace(/@([^@\s&lt;][^@\n]*?)(?=\s|$|&lt;|@)/g, (match, name) => {
+    if (match.includes('class="memo-mention"')) return match
+    return `<span class="mention-chip">@${name}</span>`
+  })
+
+  return html
+}
+
+/** Check if text contains any page mentions */
+export function hasMentions(text: string): boolean {
+  return SORTED_LABELS.some(({ label }) => text.includes(`@${label}`))
+}

package/scaffold/spec-site/src/utils/timezone.ts

@@ -0,0 +1,18 @@
+/**
+ * Timezone-aware date/time helpers.
+ * Default timezone can be configured via VITE_TIMEZONE env var.
+ */
+
+const DEFAULT_TZ = (import.meta.env.VITE_TIMEZONE as string) || Intl.DateTimeFormat().resolvedOptions().timeZone
+
+/** YYYY-MM-DD in the configured timezone */
+export function toDateString(date: Date = new Date(), tz: string = DEFAULT_TZ): string {
+  return date.toLocaleDateString('en-CA', { timeZone: tz })
+}
+
+/** YYYY-MM-DD HH:mm in the configured timezone */
+export function toDateTimeString(date: Date = new Date(), tz: string = DEFAULT_TZ): string {
+  const d = date.toLocaleDateString('en-CA', { timeZone: tz })
+  const t = date.toLocaleTimeString('en-GB', { timeZone: tz, hour: '2-digit', minute: '2-digit', hour12: false })
+  return `${d} ${t}`
+}