popilot 0.2.0

package/scaffold/spec-site/src/composables/useTurso.ts

@@ -0,0 +1,160 @@
+/**
+ * Turso HTTP API v2 (/v2/pipeline) direct call
+ * Uses raw fetch + /v2/pipeline for browser CORS compatibility
+ */
+
+const url = import.meta.env.VITE_TURSO_URL as string
+const authToken = import.meta.env.VITE_TURSO_AUTH_TOKEN as string
+
+let _reachable: boolean | null = null
+let _lastFailureAt = 0
+const RETRY_COOLDOWN_MS = 15_000
+
+export interface QueryResult<T = Record<string, unknown>> {
+  rows: T[]
+  error?: string
+}
+
+type ArgValue = string | number | null
+
+interface HranaValue {
+  type: 'text' | 'integer' | 'float' | 'null'
+  value?: string
+}
+
+function toHranaArg(v: ArgValue): HranaValue {
+  if (v === null) return { type: 'null' }
+  if (typeof v === 'number') {
+    return Number.isInteger(v)
+      ? { type: 'integer', value: String(v) }
+      : { type: 'float', value: String(v) }
+  }
+  return { type: 'text', value: String(v) }
+}
+
+interface PipelineResult {
+  results: Array<{
+    type: 'ok' | 'error'
+    response?: {
+      type: string
+      result?: {
+        cols: Array<{ name: string }>
+        rows: Array<Array<HranaValue>>
+        affected_row_count: number
+        last_insert_rowid: string | null
+      }
+    }
+    error?: { message: string }
+  }>
+}
+
+async function pipeline(
+  sql: string,
+  args: ArgValue[],
+): Promise<{
+  cols: string[]
+  rows: Array<Record<string, unknown>>
+  affectedRowCount: number
+  lastInsertRowid: number | null
+  error?: string
+}> {
+  if (!url || !authToken) {
+    return { cols: [], rows: [], affectedRowCount: 0, lastInsertRowid: null, error: 'Missing credentials' }
+  }
+
+  if (_reachable === false) {
+    if (Date.now() - _lastFailureAt >= RETRY_COOLDOWN_MS) {
+      _reachable = null
+    } else {
+      return { cols: [], rows: [], affectedRowCount: 0, lastInsertRowid: null, error: 'Turso unreachable' }
+    }
+  }
+
+  try {
+    const resp = await fetch(url + '/v2/pipeline', {
+      method: 'POST',
+      headers: {
+        Authorization: 'Bearer ' + authToken,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        requests: [
+          { type: 'execute', stmt: { sql, args: args.map(toHranaArg) } },
+          { type: 'close' },
+        ],
+      }),
+      signal: AbortSignal.timeout(5000),
+    })
+
+    if (!resp.ok) {
+      const text = await resp.text().catch(() => '')
+      _reachable = false
+      _lastFailureAt = Date.now()
+      return { cols: [], rows: [], affectedRowCount: 0, lastInsertRowid: null, error: `HTTP ${resp.status}: ${text}` }
+    }
+
+    _reachable = true
+    const data: PipelineResult = await resp.json()
+    const first = data.results[0]
+
+    if (first.type === 'error') {
+      return { cols: [], rows: [], affectedRowCount: 0, lastInsertRowid: null, error: first.error?.message ?? 'Unknown error' }
+    }
+
+    const result = first.response?.result
+    if (!result) {
+      return { cols: [], rows: [], affectedRowCount: 0, lastInsertRowid: null }
+    }
+
+    const colNames = result.cols.map((c) => c.name)
+    const rows = result.rows.map((row) => {
+      const obj: Record<string, unknown> = {}
+      colNames.forEach((col, i) => {
+        const cell = row[i]
+        if (cell.type === 'null') obj[col] = null
+        else if (cell.type === 'integer') obj[col] = Number(cell.value)
+        else if (cell.type === 'float') obj[col] = Number(cell.value)
+        else obj[col] = cell.value
+      })
+      return obj
+    })
+
+    return {
+      cols: colNames,
+      rows,
+      affectedRowCount: result.affected_row_count,
+      lastInsertRowid: result.last_insert_rowid ? Number(result.last_insert_rowid) : null,
+    }
+  } catch (err: unknown) {
+    if (_reachable !== false) {
+      console.warn('[useTurso] Turso unreachable, using offline mode')
+    }
+    _reachable = false
+    _lastFailureAt = Date.now()
+    const message = err instanceof Error ? err.message : 'Unknown error'
+    return { cols: [], rows: [], affectedRowCount: 0, lastInsertRowid: null, error: message }
+  }
+}
+
+// -- Public API --
+
+export async function query<T = Record<string, unknown>>(
+  sql: string,
+  args: ArgValue[] = [],
+): Promise<QueryResult<T>> {
+  const result = await pipeline(sql, args)
+  if (result.error) return { rows: [], error: result.error }
+  return { rows: result.rows as T[] }
+}
+
+export async function execute(
+  sql: string,
+  args: ArgValue[] = [],
+): Promise<{ lastInsertRowid?: number | bigint; rowsAffected: number; error?: string }> {
+  const result = await pipeline(sql, args)
+  if (result.error) return { rowsAffected: 0, error: result.error }
+  return {
+    lastInsertRowid: result.lastInsertRowid ?? undefined,
+    rowsAffected: result.affectedRowCount,
+  }
+}

package/scaffold/spec-site/src/composables/useUser.ts

@@ -0,0 +1,25 @@
+import { ref } from 'vue'
+
+// TODO: Replace with your team members
+export const TEAM_MEMBERS = ['Member1', 'Member2', 'Member3'] as const
+export type TeamMember = (typeof TEAM_MEMBERS)[number]
+
+const STORAGE_KEY = 'retro-user-name'
+
+const currentUser = ref<TeamMember | null>(
+  (localStorage.getItem(STORAGE_KEY) as TeamMember | null) ?? null,
+)
+
+export function useUser() {
+  function setUser(name: TeamMember) {
+    currentUser.value = name
+    localStorage.setItem(STORAGE_KEY, name)
+  }
+
+  function clearUser() {
+    currentUser.value = null
+    localStorage.removeItem(STORAGE_KEY)
+  }
+
+  return { currentUser, setUser, clearUser, TEAM_MEMBERS }
+}

package/scaffold/spec-site/src/data/navigation.ts

@@ -0,0 +1,59 @@
+import type { PageVersion } from './types'
+
+export interface SprintConfig {
+  id: string
+  label: string
+  theme: string
+  active: boolean
+}
+
+export interface FeaturePage {
+  id: string
+  label: string
+  icon: string
+  epicMap: Record<string, string>  // sprint -> epicId (policy fallback)
+}
+
+export interface PageConfig {
+  id: string
+  label: string
+  badge?: string
+  category: string
+  sprint: string
+  description?: string
+  /** Relative path from spec-site/src/ to the markdown file */
+  mdPath?: string
+}
+
+/** Sprint definitions -- TODO: Replace with your sprints */
+export const sprints: SprintConfig[] = [
+  { id: 's1', label: 'S1', theme: '', active: true },
+]
+
+/** Feature pages for the sidebar navigation -- TODO: Add your feature pages */
+export const featurePages: FeaturePage[] = []
+
+export function isValidFeaturePage(id: string): boolean {
+  return featurePages.some(p => p.id === id)
+}
+
+// -- Policy pages (epic specs per sprint) -- TODO: Add your policy pages
+export const pages: PageConfig[] = []
+
+export function getPagesByCategory(sprint: string, category: string): PageConfig[] {
+  return pages.filter(p => p.sprint === sprint && p.category === category)
+}
+
+export function getActiveSprint(): SprintConfig {
+  return sprints.find(s => s.active) ?? sprints[0]
+}
+
+/** All navigable pages (features + extras like retro) */
+export const allPages = [...featurePages]
+
+/** Epic spec file mapping: sprint -> epic files -- TODO: Add your epic spec files */
+const epicSpecFiles: Record<string, Record<string, string>> = {}
+
+export function getEpicSpecFileName(sprint: string, epicId: string): string | null {
+  return epicSpecFiles[sprint]?.[epicId] ?? null
+}

package/scaffold/spec-site/src/data/types.ts

@@ -0,0 +1,90 @@
+export type Severity = 'danger' | 'warning' | 'info' | 'good' | 'opportunity'
+
+export type ImplStatus = 'done' | 'data-ready' | 'logic-needed' | 'new-data'
+
+export type RuleCategory =
+  | 'AD' | 'PROD' | 'REV' | 'SET' | 'MALL'
+  | 'TAC' | 'SETUP' | 'OPP' | 'KW' | 'ACT'
+
+export interface Rule {
+  id: string
+  category: RuleCategory
+  name: string
+  condition: string
+  severity: Severity
+  homeMessage: string
+  action: string
+  dataSource: string
+  implStatus: ImplStatus
+  implNote?: string
+}
+
+export interface RuleGroup {
+  category: RuleCategory
+  label: string
+  icon: string
+  ruleCount: number
+  dataSource: string
+  rules: Rule[]
+}
+
+export interface ScenarioMockData {
+  greeting: string
+  healthStatus: 'good' | 'caution' | 'critical'
+  healthLabel: string
+  summary: {
+    revenue: string
+    revenueDelta: string
+    revenueDeltaDir: 'up' | 'down' | 'flat'
+    netProfit: string
+    netProfitDelta: string
+    netProfitDeltaDir: 'up' | 'down' | 'flat'
+    marginRate: string
+    marginRateDelta: string
+    marginRateDeltaDir: 'up' | 'down' | 'flat'
+    adCost: string
+    adCostDelta: string
+    adCostDeltaDir: 'up' | 'down' | 'flat'
+  }
+  coachingCards: CoachingCardData[]
+  showMallSection: boolean
+  showAdsSection: boolean
+  showGrowthCard: boolean
+  showExternalCta: boolean
+}
+
+export interface CoachingCardData {
+  severity: 'red' | 'yellow' | 'green'
+  severityLabel: string
+  title: string
+  action: string
+  effect: string
+  buttons: { label: string; variant: 'primary' | 'outline' }[]
+}
+
+export interface Scenario<T = ScenarioMockData> {
+  id: string
+  label: string
+  data: T
+}
+
+export interface SpecArea {
+  id: string
+  label: string
+  shortLabel: string
+  ruleCount: number
+}
+
+export interface VersionChange {
+  date: string
+  description: string
+}
+
+export interface PageVersion {
+  page: string
+  version: string
+  lastUpdated: string
+  sprint: string
+  status: 'draft' | 'review' | 'approved' | 'dev'
+  changelog: VersionChange[]
+}

package/scaffold/spec-site/src/data/wireframeRegistry.ts

@@ -0,0 +1,25 @@
+import type { Component } from 'vue'
+import type { Scenario, SpecArea, PageVersion } from './types'
+
+export interface WireframePageConfig {
+  id: string
+  mockup: Component
+  specPanel: Component
+  scenarios: Scenario<any>[]
+  defaultScenarioId: string
+  specAreas: SpecArea[]
+  version: PageVersion
+  specTitle: string
+  routeTitle: string
+}
+
+/** Wireframe page registry: pageId -> sprint -> config */
+export const wireframePages: Record<string, Record<string, WireframePageConfig>> = {}
+
+export function getWireframe(pageId: string, sprint: string): WireframePageConfig | null {
+  return wireframePages[pageId]?.[sprint] ?? null
+}
+
+export function getAvailableSprints(pageId: string): string[] {
+  return Object.keys(wireframePages[pageId] ?? {})
+}

package/scaffold/spec-site/src/layouts/SplitPaneLayout.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { provideActiveSection } from '@/composables/useActiveSection'
+import SpecNav from '@/components/SpecNav.vue'
+import type { SpecArea } from '@/data/types'
+
+defineProps<{
+  specAreas: SpecArea[]
+  title?: string
+}>()
+
+const { activeSection, setActiveSection } = provideActiveSection()
+
+// Resizable divider
+const leftPane = ref<HTMLElement | null>(null)
+const divider = ref<HTMLElement | null>(null)
+let isDragging = false
+let startX = 0
+let startWidth = 0
+
+function onMouseDown(e: MouseEvent) {
+  if (!leftPane.value) return
+  isDragging = true
+  startX = e.clientX
+  startWidth = leftPane.value.offsetWidth
+  divider.value?.classList.add('dragging')
+  document.body.style.cursor = 'col-resize'
+  document.body.style.userSelect = 'none'
+}
+
+function onMouseMove(e: MouseEvent) {
+  if (!isDragging || !leftPane.value) return
+  const newWidth = Math.max(400, Math.min(startWidth + e.clientX - startX, window.innerWidth - 560))
+  leftPane.value.style.width = newWidth + 'px'
+  leftPane.value.style.flex = 'none'
+}
+
+function onMouseUp() {
+  if (!isDragging) return
+  isDragging = false
+  divider.value?.classList.remove('dragging')
+  document.body.style.cursor = ''
+  document.body.style.userSelect = ''
+}
+
+onMounted(() => {
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', onMouseUp)
+})
+</script>
+
+<template>
+  <div class="split-pane">
+    <div class="pane-left" ref="leftPane">
+      <slot name="mockup" />
+    </div>
+
+    <div class="pane-divider" ref="divider" @mousedown="onMouseDown" />
+
+    <div class="pane-right">
+      <div class="spec-panel-header">
+        <div class="spec-panel-title">{{ title ?? 'Storyboard Spec' }}</div>
+        <SpecNav
+          :areas="specAreas"
+          :active-id="activeSection"
+          @select="setActiveSection"
+        />
+      </div>
+      <div class="spec-panel-body" id="spec-body">
+        <slot name="spec" />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import './styles/variables.css'
+import './styles/base.css'
+import './styles/split-pane.css'
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { featurePages } from '@/data/navigation'
+
+const router = useRouter()
+</script>
+
+<template>
+  <div class="index-page">
+    <div class="index-header">
+      <!-- TODO: Replace with your project name and description -->
+      <h1>Spec Site</h1>
+      <p class="index-subtitle">Interactive mockups + detailed specs</p>
+    </div>
+
+    <div class="feature-grid" v-if="featurePages.length > 0">
+      <div
+        v-for="feat in featurePages"
+        :key="feat.id"
+        class="feature-card"
+        @click="router.push(`/${feat.id}`)"
+      >
+        <div class="feature-card-header">
+          <span class="feature-icon">{{ feat.icon }}</span>
+        </div>
+        <div class="feature-title">{{ feat.label }}</div>
+      </div>
+    </div>
+
+    <div v-else class="empty-state">
+      <div class="empty-icon">📋</div>
+      <h2>No feature pages yet</h2>
+      <p>Add feature pages in <code>src/data/navigation.ts</code> and register wireframes in <code>src/data/wireframeRegistry.ts</code>.</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.index-page { padding: 48px 40px; max-width: 900px; margin: 0 auto; }
+.index-header { margin-bottom: 40px; }
+h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
+.index-subtitle { font-size: 14px; color: var(--text-secondary); }
+.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
+.feature-card {
+  padding: 24px;
+  background: var(--card-bg);
+  border-radius: var(--radius);
+  border: 1px solid var(--border-light);
+  box-shadow: var(--shadow);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
+.feature-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+.feature-icon { font-size: 28px; }
+.feature-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
+
+.empty-state {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  padding: 80px 40px; text-align: center; color: var(--text-muted);
+}
+.empty-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.3; }
+.empty-state h2 { font-size: 24px; color: var(--text-primary); margin-bottom: 8px; }
+.empty-state p { font-size: 14px; line-height: 1.6; max-width: 480px; }
+.empty-state code { background: var(--border-light); padding: 2px 6px; border-radius: 4px; font-size: 12px; }
+</style>