popilot 0.6.0 → 0.8.0

package/scaffold/spec-site/src/mockup/PropertyPanel.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { getComponentDef } from './componentCatalog'
+interface CanvasComponent { id: string; componentType: string; props: Record<string, unknown>; children: CanvasComponent[] }
+
+const props = defineProps<{
+  selected: CanvasComponent | null
+  pageTitle: string
+  pageDescription: string
+}>()
+
+const emit = defineEmits<{
+  'update-prop': [key: string, value: unknown]
+  'update-spec': [desc: string]
+  'update-page-title': [title: string]
+  'update-page-desc': [desc: string]
+}>()
+
+const CSS_WHITELIST = [
+  'backgroundColor', 'color', 'fontSize', 'fontWeight',
+  'borderRadius', 'border', 'borderColor',
+  'padding', 'margin', 'gap', 'opacity', 'boxShadow',
+  'width', 'height', 'minWidth', 'minHeight', 'maxWidth',
+  'textAlign', 'display', 'flexDirection', 'justifyContent', 'alignItems', 'overflow',
+]
+
+const LAYOUT_CSS = ['display', 'flexDirection', 'justifyContent', 'alignItems', 'gap', 'overflow']
+const TEXT_CSS = ['textAlign', 'fontSize', 'fontWeight', 'color']
+
+function getRelevantCss(): string[] {
+  const type = props.selected?.componentType || ''
+  const def = getComponentDef(type)
+  if (def?.allowChildren) return CSS_WHITELIST // Container: all properties
+  if (['button', 'text', 'page-title', 'label'].includes(type)) return [...TEXT_CSS, 'backgroundColor', 'borderRadius', 'border', 'borderColor', 'padding', 'margin', 'opacity', 'boxShadow', 'width', 'height', 'minWidth', 'minHeight', 'maxWidth']
+  return CSS_WHITELIST.filter(k => !LAYOUT_CSS.includes(k)) // Default: exclude layout
+}
+
+// Show only currently active CSS properties
+const activeCssProps = computed(() => {
+  const css = (props.selected?.props.css as Record<string, string>) || {}
+  return Object.keys(css).filter(k => CSS_WHITELIST.includes(k))
+})
+
+const availableCssProps = computed(() => {
+  const active = new Set(activeCssProps.value)
+  return getRelevantCss().filter(k => !active.has(k))
+})
+
+const addCssPropKey = ref('')
+
+function addCssProp() {
+  if (!addCssPropKey.value) return
+  setCssProp(addCssPropKey.value, '')
+  addCssPropKey.value = ''
+}
+
+function removeCssProp(key: string) {
+  const css = { ...((props.selected?.props.css as Record<string, string>) || {}) }
+  delete css[key]
+  emit('update-prop', 'css', css)
+}
+
+function getCssProp(key: string): string {
+  const css = (props.selected?.props.css as Record<string, string>) || {}
+  return css[key] || ''
+}
+
+function setCssProp(key: string, value: string) {
+  const css = { ...((props.selected?.props.css as Record<string, string>) || {}), [key]: value }
+  if (value === undefined) delete css[key]
+  emit('update-prop', 'css', css)
+}
+
+function updateMenuItem(idx: number, field: string, value: string) {
+  const items = [...((props.selected?.props.menuItems as any[]) || [])]
+  items[idx] = { ...items[idx], [field]: value }
+  emit('update-prop', 'menuItems', items)
+}
+
+function removeMenuItem(idx: number) {
+  const items = [...((props.selected?.props.menuItems as any[]) || [])]
+  items.splice(idx, 1)
+  emit('update-prop', 'menuItems', items)
+}
+
+function addMenuItem() {
+  const items = [...((props.selected?.props.menuItems as any[]) || []), { text: '', icon: '📄', link: '' }]
+  emit('update-prop', 'menuItems', items)
+}
+
+const compDef = computed(() => props.selected ? getComponentDef(props.selected.componentType) : null)
+
+const SYSTEM_KEYS = ['css', 'menuItems', 'x', 'y', 'w', 'h', 'locked', 'specDescription', 'zIndex', 'onClick']
+
+const editableProps = computed(() => {
+  if (!props.selected) return []
+  const p = props.selected.props
+  return Object.entries(p).filter(([key]) => !SYSTEM_KEYS.includes(key)).map(([key, val]) => ({
+    key,
+    value: val,
+    type: typeof val === 'boolean' ? 'boolean'
+      : typeof val === 'number' ? 'number'
+      : Array.isArray(val) ? 'array'
+      : key.includes('color') ? 'color'
+      : key.includes('variant') || key.includes('type') || key.includes('level') ? 'select'
+      : 'text',
+  }))
+})
+
+function getSelectOptions(key: string): string[] {
+  if (key === 'variant') return ['primary', 'secondary', 'danger', 'ghost']
+  if (key === 'type') return ['info', 'warning', 'error', 'success']
+  if (key === 'level') return ['h1', 'h2', 'h3']
+  if (key === 'direction') return ['column', 'row']
+  if (key === 'position') return ['left', 'right']
+  if (key === 'size') return ['sm', 'md', 'lg']
+  return []
+}
+</script>
+
+<template>
+  <div class="prop-panel">
+    <!-- Component selected -->
+    <template v-if="selected">
+      <div class="panel-section">
+        <div class="panel-title">{{ compDef?.icon }} {{ compDef?.name }}</div>
+
+        <div v-for="p in editableProps" :key="p.key" class="prop-row">
+          <label class="prop-label">{{ p.key }}</label>
+
+          <input v-if="p.type === 'text'" class="prop-input" :value="p.value" @input="emit('update-prop', p.key, ($event.target as HTMLInputElement).value)" />
+          <input v-else-if="p.type === 'number'" class="prop-input" type="number" :value="p.value" @input="emit('update-prop', p.key, Number(($event.target as HTMLInputElement).value))" />
+          <input v-else-if="p.type === 'color'" class="prop-color" type="color" :value="p.value" @input="emit('update-prop', p.key, ($event.target as HTMLInputElement).value)" />
+          <label v-else-if="p.type === 'boolean'" class="prop-toggle">
+            <input type="checkbox" :checked="p.value as boolean" @change="emit('update-prop', p.key, ($event.target as HTMLInputElement).checked)" />
+          </label>
+          <select v-else-if="p.type === 'select'" class="prop-input" :value="p.value" @change="emit('update-prop', p.key, ($event.target as HTMLSelectElement).value)">
+            <option v-for="opt in getSelectOptions(p.key)" :key="opt" :value="opt">{{ opt }}</option>
+          </select>
+          <div v-else-if="p.key === 'menuItems' && Array.isArray(p.value)" class="menu-editor">
+            <div v-for="(item, idx) in (p.value as any[])" :key="idx" class="menu-item-row">
+              <input class="prop-input menu-input" :value="item.icon" @input="updateMenuItem(idx, 'icon', ($event.target as HTMLInputElement).value)" style="width:30px" />
+              <input class="prop-input menu-input" :value="item.text" @input="updateMenuItem(idx, 'text', ($event.target as HTMLInputElement).value)" placeholder="Name" />
+              <input class="prop-input menu-input" :value="item.link" @input="updateMenuItem(idx, 'link', ($event.target as HTMLInputElement).value)" placeholder="Link" style="width:60px" />
+              <button class="css-remove" @click="removeMenuItem(idx)">✕</button>
+            </div>
+            <button class="css-add-btn" @click="addMenuItem" style="margin-top:4px">+ Item</button>
+          </div>
+          <span v-else-if="p.type === 'array'" class="prop-muted">{{ (p.value as string[]).join(', ') }}</span>
+        </div>
+      </div>
+
+      <!-- Spec description -->
+      <div class="panel-section">
+        <div class="panel-subtitle">Spec Description</div>
+        <textarea class="spec-textarea" :value="selected.props.specDescription as string || ''" @input="emit('update-spec', ($event.target as HTMLTextAreaElement).value)" placeholder="Role/function of this component..." rows="4" />
+      </div>
+
+      <!-- CSS editing -->
+      <div class="panel-section">
+        <div class="panel-subtitle">CSS Styles</div>
+        <div v-for="cssProp in activeCssProps" :key="cssProp" class="prop-row css-row">
+          <label class="prop-label">{{ cssProp }}</label>
+          <div class="css-input-wrap">
+            <input class="prop-input css-val" :value="getCssProp(cssProp)" @input="setCssProp(cssProp, ($event.target as HTMLInputElement).value)" :type="cssProp.includes('color') || cssProp.includes('Color') ? 'color' : 'text'" />
+            <button class="css-remove" @click="removeCssProp(cssProp)" title="Remove">✕</button>
+          </div>
+        </div>
+        <div class="css-add-row">
+          <select v-model="addCssPropKey" class="prop-input css-select">
+            <option value="">+ Add property</option>
+            <option v-for="k in availableCssProps" :key="k" :value="k">{{ k }}</option>
+          </select>
+          <button v-if="addCssPropKey" class="css-add-btn" @click="addCssProp">Add</button>
+        </div>
+      </div>
+    </template>
+
+    <!-- No selection -> page meta -->
+    <template v-else>
+      <div class="panel-section">
+        <div class="panel-title">Page Settings</div>
+        <div class="prop-row">
+          <label class="prop-label">Title</label>
+          <input class="prop-input" :value="pageTitle" @input="emit('update-page-title', ($event.target as HTMLInputElement).value)" />
+        </div>
+        <div class="prop-row">
+          <label class="prop-label">Description</label>
+          <textarea class="spec-textarea" :value="pageDescription" @input="emit('update-page-desc', ($event.target as HTMLTextAreaElement).value)" rows="4" placeholder="Overall page description..." />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.prop-panel { width: 260px; min-width: 260px; border-left: 1px solid var(--border, #e5e7eb); padding: 12px; overflow-y: auto; height: 100%; flex-shrink: 0; }
+.panel-section { margin-bottom: 16px; }
+.panel-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
+.panel-subtitle { font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 8px; }
+.prop-row { margin-bottom: 8px; }
+.prop-label { display: block; font-size: 11px; font-weight: 500; color: #6b7280; margin-bottom: 2px; }
+.prop-input { width: 100%; border: 1px solid #d1d5db; border-radius: 4px; padding: 4px 6px; font-size: 12px; box-sizing: border-box; }
+.prop-color { width: 100%; height: 28px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; }
+.prop-muted { font-size: 11px; color: #9ca3af; }
+.spec-textarea { width: 100%; border: 1px solid #d1d5db; border-radius: 4px; padding: 6px; font-size: 12px; resize: vertical; box-sizing: border-box; }
+.css-row { position: relative; }
+.css-input-wrap { display: flex; gap: 4px; align-items: center; }
+.css-val { flex: 1; }
+.css-remove { border: none; background: none; color: #ef4444; font-size: 12px; cursor: pointer; padding: 2px; }
+.css-add-row { display: flex; gap: 4px; margin-top: 4px; }
+.css-select { flex: 1; }
+.css-add-btn { border: none; background: #3b82f6; color: #fff; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; }
+.menu-editor { margin-top: 4px; }
+.menu-item-row { display: flex; gap: 2px; align-items: center; margin-bottom: 3px; }
+.menu-input { font-size: 11px; padding: 2px 4px; }
+</style>

package/scaffold/spec-site/src/mockup/componentCatalog.ts

@@ -0,0 +1,68 @@
+/**
+ * Mockup builder component catalog
+ */
+
+export interface ComponentDef {
+  id: string
+  name: string
+  category: string
+  icon: string
+  allowChildren: boolean
+  defaultProps: Record<string, unknown>
+}
+
+export const COMPONENT_CATALOG: ComponentDef[] = [
+  // Layout
+  { id: 'container', name: 'Container', category: 'Layout', icon: '📦', allowChildren: true, defaultProps: { direction: 'column', gap: 8, padding: 16 } },
+  { id: 'page-wrapper', name: 'PageWrapper', category: 'Layout', icon: '📄', allowChildren: true, defaultProps: { maxWidth: 1200, padding: 24 } },
+  { id: 'widget-wrapper', name: 'WidgetWrapper', category: 'Layout', icon: '🧩', allowChildren: true, defaultProps: { title: 'Widget', padding: 16, borderRadius: 12 } },
+  { id: 'sidebar', name: 'Sidebar', category: 'Layout', icon: '📐', allowChildren: true, defaultProps: { width: 200, position: 'left', w: 200, h: 400, menuItems: [
+    { text: 'Home', icon: '🏠', link: '' },
+    { text: 'Dashboard', icon: '📊', link: '' },
+    { text: 'Projects', icon: '📦', link: '' },
+    { text: 'Reports', icon: '📈', link: '' },
+    { text: 'Analytics', icon: '🔍', link: '' },
+    { text: 'Settings', icon: '⚙️', link: '' },
+  ] } },
+  { id: 'row', name: 'Row', category: 'Layout', icon: '↔️', allowChildren: true, defaultProps: { direction: 'row', gap: 8, padding: 0 } },
+  { id: 'column', name: 'Column', category: 'Layout', icon: '↕️', allowChildren: true, defaultProps: { direction: 'column', gap: 8, padding: 0 } },
+
+  // Typography
+  { id: 'page-title', name: 'PageTitle', category: 'Typography', icon: '🔤', allowChildren: false, defaultProps: { text: 'Page Title', level: 'h1' } },
+  { id: 'text', name: 'Text', category: 'Typography', icon: '📝', allowChildren: false, defaultProps: { text: 'Text content', size: 14, color: '#333' } },
+  { id: 'label', name: 'Label', category: 'Typography', icon: '🏷️', allowChildren: false, defaultProps: { text: 'Label', size: 12, color: '#888' } },
+  { id: 'hint', name: 'Hint', category: 'Typography', icon: '💡', allowChildren: false, defaultProps: { text: 'Hint text', size: 11, color: '#999' } },
+
+  // Input
+  { id: 'text-field', name: 'TextField', category: 'Input', icon: '✏️', allowChildren: false, defaultProps: { placeholder: 'Enter text...', label: 'Field name', width: '100%' } },
+  { id: 'checkbox', name: 'Checkbox', category: 'Input', icon: '☑️', allowChildren: false, defaultProps: { label: 'Checkbox', checked: false } },
+  { id: 'radio', name: 'Radio', category: 'Input', icon: '🔘', allowChildren: false, defaultProps: { label: 'Radio', options: ['Option 1', 'Option 2'] } },
+  { id: 'date-picker', name: 'DatePicker', category: 'Input', icon: '📅', allowChildren: false, defaultProps: { label: 'Select date', placeholder: 'YYYY-MM-DD' } },
+  { id: 'combobox', name: 'Combobox', category: 'Input', icon: '📋', allowChildren: false, defaultProps: { label: 'Select', options: ['Item 1', 'Item 2', 'Item 3'] } },
+  { id: 'switch', name: 'SwitchButton', category: 'Input', icon: '🔀', allowChildren: false, defaultProps: { label: 'Switch', checked: false } },
+
+  // Data
+  { id: 'data-grid', name: 'DataGrid', category: 'Data', icon: '📊', allowChildren: false, defaultProps: { columns: ['Name', 'Value', 'Status'], rows: 5, w: 400, h: 300 } },
+  { id: 'chart', name: 'Chart', category: 'Data', icon: '📈', allowChildren: false, defaultProps: { type: 'bar', title: 'Chart', height: 200 } },
+  { id: 'trend-chart', name: 'TrendChart', category: 'Data', icon: '📉', allowChildren: false, defaultProps: { title: 'Trend', height: 160 } },
+
+  // Action
+  { id: 'button', name: 'Button', category: 'Action', icon: '🔵', allowChildren: false, defaultProps: { text: 'Button', variant: 'primary', size: 'md', onClick: '', w: 120, h: 40 } },
+  { id: 'pagination', name: 'Pagination', category: 'Action', icon: '📑', allowChildren: false, defaultProps: { totalPages: 10, current: 1 } },
+
+  // Feedback
+  { id: 'alert', name: 'Alert', category: 'Feedback', icon: '⚠️', allowChildren: false, defaultProps: { message: 'Alert message', type: 'info' } },
+  { id: 'loading', name: 'Loading', category: 'Feedback', icon: '⏳', allowChildren: false, defaultProps: { text: 'Loading...' } },
+  { id: 'no-data', name: 'NoData', category: 'Feedback', icon: '🚫', allowChildren: false, defaultProps: { message: 'No data' } },
+
+  // Custom
+  { id: 'card', name: 'Card', category: 'Custom', icon: '🃏', allowChildren: true, defaultProps: { title: 'Card', content: 'Enter content here', imageUrl: '', padding: 16, borderRadius: 8, w: 300, h: 200 } },
+  { id: 'divider', name: 'Divider', category: 'Custom', icon: '➖', allowChildren: false, defaultProps: { margin: 16 } },
+  { id: 'spacer', name: 'Spacer', category: 'Custom', icon: '⬜', allowChildren: false, defaultProps: { height: 24 } },
+]
+
+export const CATEGORIES = [...new Set(COMPONENT_CATALOG.map(c => c.category))]
+
+export function getComponentDef(id: string): ComponentDef | undefined {
+  return COMPONENT_CATALOG.find(c => c.id === id)
+}

package/scaffold/spec-site/src/mockup/useScenarios.ts

@@ -0,0 +1,67 @@
+import { ref } from 'vue'
+
+const API = import.meta.env.VITE_API_URL || ''
+
+interface Scenario {
+  id: number
+  name: string
+  description: string
+}
+
+interface ScenarioOverride {
+  component_id: number
+  override_props: string
+}
+
+export function useScenarios(slug: string, token: string) {
+  const scenarios = ref<Scenario[]>([])
+  const activeScenarioId = ref<number | null>(null)
+  const overrides = ref<Record<number, Record<string, unknown>>>({})
+
+  async function fetchScenarios() {
+    const res = await fetch(`${API}/api/v2/mockups/${slug}/scenarios`, {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    if (res.ok) {
+      const data = await res.json()
+      scenarios.value = data.scenarios || []
+    }
+  }
+
+  async function selectScenario(id: number | null) {
+    activeScenarioId.value = id
+    if (!id) { overrides.value = {}; return }
+
+    const res = await fetch(`${API}/api/v2/mockups/${slug}/scenarios/${id}/data`, {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    if (res.ok) {
+      const data = await res.json()
+      const map: Record<number, Record<string, unknown>> = {}
+      for (const ov of (data.overrides || []) as ScenarioOverride[]) {
+        map[ov.component_id] = JSON.parse(ov.override_props)
+      }
+      overrides.value = map
+    }
+  }
+
+  async function createScenario(name: string, description = '') {
+    await fetch(`${API}/api/v2/mockups/${slug}/scenarios`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, description }),
+    })
+    await fetchScenarios()
+  }
+
+  async function deleteScenario(id: number) {
+    await fetch(`${API}/api/v2/mockups/${slug}/scenarios/${id}`, {
+      method: 'DELETE',
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    if (activeScenarioId.value === id) { activeScenarioId.value = null; overrides.value = {} }
+    await fetchScenarios()
+  }
+
+  return { scenarios, activeScenarioId, overrides, fetchScenarios, selectScenario, createScenario, deleteScenario }
+}

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

@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { apiGet, apiPost, apiPatch, apiDelete, apiPut } from '@/api/client'
+
+interface MemberRow {
+  id: number
+  display_name: string
+  email: string | null
+  role: string
+  is_active: number
+  created_at: string
+  updated_at: string
+}
+
+const members = ref<MemberRow[]>([])
+const loading = ref(true)
+const error = ref('')
+
+// New member form
+const newName = ref('')
+const newEmail = ref('')
+const newTtlDays = ref<number | null>(null)
+
+// Status message
+const statusMsg = ref('')
+
+// LLM settings
+const llmApiKey = ref('')
+const llmProvider = ref('openai')
+const llmModel = ref('')
+const settingsSaved = ref(false)
+
+async function loadSettings() {
+  const { data } = await apiGet<{ settings: Record<string, string> }>('/api/v2/admin/settings')
+  if (data?.settings) {
+    llmApiKey.value = data.settings.llm_api_key ?? ''
+    llmProvider.value = data.settings.llm_provider ?? 'openai'
+    llmModel.value = data.settings.llm_model ?? ''
+  }
+}
+
+async function saveSettings() {
+  settingsSaved.value = false
+  await apiPut('/api/v2/admin/settings/llm_api_key', { value: llmApiKey.value || null })
+  await apiPut('/api/v2/admin/settings/llm_provider', { value: llmProvider.value || null })
+  await apiPut('/api/v2/admin/settings/llm_model', { value: llmModel.value || null })
+  settingsSaved.value = true
+  setTimeout(() => { settingsSaved.value = false }, 3000)
+}
+
+async function clearApiKey() {
+  await apiPut('/api/v2/admin/settings/llm_api_key', { value: null })
+  llmApiKey.value = ''
+  settingsSaved.value = true
+  setTimeout(() => { settingsSaved.value = false }, 3000)
+}
+
+loadSettings()
+
+async function loadMembers() {
+  loading.value = true
+  const { data, error: apiError } = await apiGet<{ members: MemberRow[] }>('/api/v2/admin/members')
+  if (apiError) {
+    error.value = apiError
+  } else if (data) {
+    members.value = data.members
+  }
+  loading.value = false
+}
+
+function generateToken(): string {
+  return crypto.randomUUID()
+}
+
+async function addMember() {
+  const name = newName.value.trim()
+  if (!name) return
+  const token = generateToken()
+  const email = newEmail.value.trim() || null
+  const ttl = newTtlDays.value
+  const body: Record<string, unknown> = { token, userName: name, userEmail: email }
+  if (ttl && Number.isInteger(ttl) && ttl > 0 && ttl <= 3650) body.ttlDays = ttl
+  const { error: apiError } = await apiPost('/api/v2/admin/members', body)
+  if (apiError) {
+    statusMsg.value = `Error: ${apiError}`
+  } else {
+    statusMsg.value = `${name} added`
+    newName.value = ''
+    newEmail.value = ''
+    newTtlDays.value = null
+    await loadMembers()
+  }
+  clearStatus()
+}
+
+async function revokeToken(id: string, name: string) {
+  if (!confirm(`Revoke token for ${name}?`)) return
+  const { error: apiError } = await apiPatch(`/api/v2/admin/members/${id}/revoke`, {})
+  if (!apiError) { statusMsg.value = `${name} token revoked`; await loadMembers() }
+  clearStatus()
+}
+
+async function reactivateToken(id: string, name: string) {
+  const { error: apiError } = await apiPatch(`/api/v2/admin/members/${id}/activate`, {})
+  if (!apiError) { statusMsg.value = `${name} token reactivated`; await loadMembers() }
+  clearStatus()
+}
+
+async function regenerateToken(oldToken: string, name: string) {
+  if (!confirm(`Regenerate token for ${name}? The old token will be invalidated.`)) return
+  const newToken = generateToken()
+  const { error: apiError } = await apiPost(`/api/v2/admin/members/${oldToken}/regenerate`, { newToken })
+  if (!apiError) { statusMsg.value = `${name} token regenerated`; await loadMembers() }
+  clearStatus()
+}
+
+async function deleteMember(id: string, name: string) {
+  if (!confirm(`Permanently delete ${name}? This cannot be undone.`)) return
+  const { error: apiError } = await apiDelete(`/api/v2/admin/members/${id}`)
+  if (!apiError) { statusMsg.value = `${name} deleted`; await loadMembers() }
+  clearStatus()
+}
+
+function clearStatus() {
+  setTimeout(() => { statusMsg.value = '' }, 3000)
+}
+
+function formatDate(d: string | null): string {
+  if (!d) return '-'
+  return d.replace('T', ' ').substring(0, 16)
+}
+
+const activeCount = computed(() => members.value.filter(m => m.is_active).length)
+const totalCount = computed(() => members.value.length)
+
+onMounted(loadMembers)
+</script>
+
+<template>
+  <div class="admin">
+    <div class="admin-header">
+      <div class="admin-header-row">
+        <div>
+          <h1>Team Token Management</h1>
+          <p class="admin-subtitle">This page is accessible only to administrators</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Status -->
+    <Transition name="fade">
+      <div v-if="statusMsg" class="admin-status">{{ statusMsg }}</div>
+    </Transition>
+
+    <!-- Stats -->
+    <div class="admin-stats">
+      <div class="stat">
+        <span class="stat-num">{{ activeCount }}</span>
+        <span class="stat-label">Active</span>
+      </div>
+      <div class="stat">
+        <span class="stat-num">{{ totalCount }}</span>
+        <span class="stat-label">Total</span>
+      </div>
+    </div>
+
+    <!-- Add Member -->
+    <div class="admin-card">
+      <h2>Add Member</h2>
+      <div class="add-form">
+        <input v-model="newName" class="input" placeholder="Name" />
+        <input v-model="newEmail" class="input" placeholder="Email (optional)" />
+        <input v-model.number="newTtlDays" class="input input--sm" type="number" placeholder="TTL (days)" min="1" />
+        <button class="btn btn--primary" @click="addMember" :disabled="!newName.trim()">Add</button>
+      </div>
+      <p class="add-hint">Leave TTL empty for unlimited</p>
+    </div>
+
+    <!-- Members Table -->
+    <div class="admin-card">
+      <h2>Members</h2>
+      <div v-if="loading" class="admin-loading">Loading...</div>
+      <div v-else-if="error" class="admin-error">{{ error }}</div>
+      <div v-else class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Status</th>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Role</th>
+              <th>Created</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="m in members" :key="String(m.id)" :class="{ inactive: !m.is_active }">
+              <td>
+                <span class="badge" :class="m.is_active ? 'badge--active' : 'badge--revoked'">
+                  {{ m.is_active ? 'active' : 'revoked' }}
+                </span>
+              </td>
+              <td class="td-name">{{ m.display_name }}</td>
+              <td class="td-email">{{ m.email || '-' }}</td>
+              <td>{{ m.role }}</td>
+              <td class="td-date">{{ formatDate(m.created_at) }}</td>
+              <td class="td-actions">
+                <button v-if="m.is_active" class="btn btn--sm btn--warn" @click="revokeToken(String(m.id), m.display_name)">Revoke</button>
+                <button v-else class="btn btn--sm btn--ok" @click="reactivateToken(String(m.id), m.display_name)">Activate</button>
+                <button class="btn btn--sm" @click="regenerateToken(String(m.id), m.display_name)">Regen</button>
+                <button class="btn btn--sm btn--danger" @click="deleteMember(String(m.id), m.display_name)">Delete</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- AI Settings -->
+    <div class="admin-section">
+      <h2>AI Settings (BYOM)</h2>
+      <div class="setting-row">
+        <label>API Key</label>
+        <input v-model="llmApiKey" type="password" class="setting-input" placeholder="sk-..." />
+      </div>
+      <div class="setting-row">
+        <label>Provider</label>
+        <select v-model="llmProvider" class="setting-input">
+          <option value="openai">OpenAI</option>
+          <option value="anthropic">Anthropic</option>
+          <option value="gemini">Gemini</option>
+        </select>
+      </div>
+      <div class="setting-row">
+        <label>Model</label>
+        <input v-model="llmModel" class="setting-input" placeholder="gpt-4o-mini" />
+      </div>
+      <div class="setting-actions">
+        <button class="btn btn--primary" @click="saveSettings">Save</button>
+        <button class="btn btn--danger" @click="clearApiKey">Clear API Key</button>
+        <span v-if="settingsSaved" class="save-ok">Saved</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.admin { max-width: 1000px; margin: 0 auto; padding: 32px 24px; }
+.admin-header { margin-bottom: 24px; }
+.admin-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.admin-header h1 { font-size: 24px; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
+.admin-subtitle { font-size: 13px; color: #94a3b8; }
+.admin-status { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; margin-bottom: 16px; }
+.admin-stats { display: flex; gap: 16px; margin-bottom: 24px; }
+.stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px 24px; display: flex; flex-direction: column; align-items: center; min-width: 80px; }
+.stat-num { font-size: 28px; font-weight: 700; color: #1e293b; }
+.stat-label { font-size: 12px; color: #94a3b8; margin-top: 2px; }
+.admin-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 24px; margin-bottom: 20px; }
+.admin-card h2 { font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 16px; }
+.add-form { display: flex; gap: 8px; flex-wrap: wrap; }
+.input { padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; flex: 1; min-width: 120px; }
+.input--sm { max-width: 100px; flex: none; }
+.input:focus { outline: none; border-color: #3b82f6; }
+.add-hint { font-size: 11px; color: #94a3b8; margin-top: 8px; }
+.btn { padding: 8px 16px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; background: #fff; color: #475569; white-space: nowrap; transition: all 0.15s; }
+.btn:hover { background: #f1f5f9; }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn--primary { background: #1e293b; color: #fff; border-color: #1e293b; }
+.btn--primary:hover { background: #334155; }
+.btn--sm { padding: 4px 10px; font-size: 11px; }
+.btn--warn { color: #f59e0b; border-color: #fcd34d; }
+.btn--ok { color: #22c55e; border-color: #86efac; }
+.btn--danger { color: #ef4444; border-color: #fca5a5; }
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; font-size: 13px; }
+th { text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #e2e8f0; }
+td { padding: 10px; border-bottom: 1px solid #f1f5f9; color: #475569; vertical-align: middle; }
+tr.inactive td { opacity: 0.5; }
+tr:hover td { background: #f8fafc; }
+.td-name { font-weight: 600; color: #1e293b; }
+.td-email { font-size: 12px; }
+.td-date { font-size: 11px; color: #94a3b8; white-space: nowrap; }
+.td-actions { display: flex; gap: 4px; flex-wrap: nowrap; }
+.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
+.badge--active { background: #ecfdf5; color: #059669; }
+.badge--revoked { background: #fef2f2; color: #dc2626; }
+.admin-loading, .admin-error { padding: 20px; text-align: center; color: #94a3b8; font-size: 14px; }
+.admin-error { color: #ef4444; }
+.admin-section { margin-top: 32px; padding: 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
+.admin-section h2 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
+.setting-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
+.setting-row label { width: 100px; font-size: 13px; font-weight: 500; color: #64748b; flex-shrink: 0; }
+.setting-input { flex: 1; padding: 8px 12px; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; font-size: 13px; }
+.setting-actions { display: flex; gap: 8px; align-items: center; }
+.save-ok { font-size: 12px; color: #16a34a; }
+.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+@media (max-width: 767px) { .admin { padding: 16px; } .add-form { flex-direction: column; } .td-actions { flex-wrap: wrap; } }
+</style>