popilot 0.7.0 → 0.8.0

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { apiPatch } from '@/composables/useTurso'
+
+interface Story { id: number; title: string; status: string; priority: string; assignee: string; story_points: number; epic_id: number; epic_uid?: string }
+
+const props = defineProps<{ stories: Story[]; onUpdate?: () => void }>()
+
+const COLUMNS = [
+  { id: 'backlog', label: 'Backlog', color: '#9ca3af' },
+  { id: 'ready-for-dev', label: 'Ready', color: '#3b82f6' },
+  { id: 'in-progress', label: 'In Progress', color: '#f59e0b' },
+  { id: 'review', label: 'Review', color: '#8b5cf6' },
+  { id: 'done', label: 'Done', color: '#22c55e' },
+]
+
+const grouped = computed(() => {
+  const groups: Record<string, Story[]> = {}
+  for (const col of COLUMNS) groups[col.id] = []
+  for (const s of props.stories) {
+    const col = COLUMNS.find(c => c.id === s.status) ? s.status : 'backlog'
+    groups[col].push(s)
+  }
+  return groups
+})
+
+let dragStoryId: number | null = null
+
+function onDragStart(e: DragEvent, storyId: number) {
+  dragStoryId = storyId
+  e.dataTransfer?.setData('story-id', String(storyId))
+}
+
+async function onDrop(e: DragEvent, newStatus: string) {
+  e.preventDefault()
+  const id = Number(e.dataTransfer?.getData('story-id') || dragStoryId)
+  if (!id) return
+  await apiPatch(`/api/v2/pm/stories/${id}`, { status: newStatus })
+  const story = props.stories.find(s => s.id === id)
+  if (story) story.status = newStatus
+  props.onUpdate?.()
+  dragStoryId = null
+}
+
+const priorityColors: Record<string, string> = { high: '#ef4444', medium: '#f59e0b', low: '#22c55e' }
+</script>
+
+<template>
+  <div class="kanban-board">
+    <div v-for="col in COLUMNS" :key="col.id" class="kanban-column" @dragover.prevent @drop="onDrop($event, col.id)">
+      <div class="column-header" :style="{ borderTopColor: col.color }">
+        <span class="column-title">{{ col.label }}</span>
+        <span class="column-count">{{ grouped[col.id].length }}</span>
+      </div>
+      <div class="column-body">
+        <div
+          v-for="story in grouped[col.id]" :key="story.id"
+          class="kanban-card"
+          draggable="true"
+          @dragstart="onDragStart($event, story.id)"
+        >
+          <div class="card-top">
+            <span class="card-id">SID:{{ story.id }}</span>
+            <span class="card-sp" v-if="story.story_points">{{ story.story_points }}SP</span>
+          </div>
+          <div class="card-title">{{ story.title }}</div>
+          <div class="card-bottom">
+            <span class="card-priority" :style="{ color: priorityColors[story.priority] || '#9ca3af' }">{{ story.priority }}</span>
+            <span v-if="story.assignee" class="card-assignee">{{ story.assignee }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.kanban-board { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; min-height: 400px; }
+.kanban-column { flex: 1; min-width: 200px; background: var(--bg-card, #fff); border-radius: var(--radius-lg, 12px); display: flex; flex-direction: column; }
+.column-header { padding: 12px 14px; border-top: 3px solid; display: flex; justify-content: space-between; align-items: center; border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0; }
+.column-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
+.column-count { font-size: 11px; background: var(--bg-hover); padding: 1px 6px; border-radius: 8px; color: var(--text-secondary); }
+.column-body { padding: 8px; flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 100px; }
+.kanban-card { background: var(--bg-main, #f5f6f8); border-radius: var(--radius-md, 8px); padding: 10px 12px; cursor: grab; transition: transform 0.1s; }
+.kanban-card:active { cursor: grabbing; opacity: 0.7; }
+.kanban-card:hover { transform: translateY(-1px); }
+.card-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
+.card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
+.card-bottom { display: flex; justify-content: space-between; font-size: 11px; margin-top: 6px; }
+.card-priority { font-weight: 600; }
+.card-assignee { color: var(--text-secondary); }
+.card-sp { font-weight: 600; }
+</style>

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}`
+}