popilot 0.5.0 → 0.7.0

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

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { apiGet, isStaticMode } from '@/api/client'
+
+interface DocEntry {
+  id: number
+  title: string
+  path: string
+  updated_by: string
+  updated_at: string
+  children?: DocEntry[]
+}
+
+interface DocsData {
+  documents: DocEntry[]
+  recent_edits: { id: number; title: string; user: string; updated_at: string }[]
+}
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+const docs = ref<DocEntry[]>([])
+const recentEdits = ref<DocsData['recent_edits']>([])
+const expandedIds = ref<Set<number>>(new Set())
+
+function toggleExpand(id: number) {
+  if (expandedIds.value.has(id)) {
+    expandedIds.value.delete(id)
+  } else {
+    expandedIds.value.add(id)
+  }
+}
+
+onMounted(async () => {
+  if (isStaticMode()) { loading.value = false; return }
+  const { data, error: err } = await apiGet<DocsData>('/api/v2/docs')
+  if (err) {
+    error.value = err
+  } else if (data) {
+    docs.value = data.documents
+    recentEdits.value = data.recent_edits
+  }
+  loading.value = false
+})
+</script>
+
+<template>
+  <div class="docs-page">
+    <h1>Documents</h1>
+    <p class="page-desc">Team documentation hub.</p>
+
+    <div v-if="loading" class="loading-state">
+      <div class="loading-spinner" />
+      <span>Loading documents...</span>
+    </div>
+
+    <div v-else-if="error" class="error-state">
+      <div class="error-icon">&#9888;</div>
+      <p>{{ error }}</p>
+    </div>
+
+    <template v-else>
+      <div class="docs-layout">
+        <!-- Document tree -->
+        <div class="docs-tree">
+          <h2>All Documents</h2>
+          <div v-if="!docs.length" class="empty-msg">No documents yet.</div>
+          <ul class="tree-list">
+            <li v-for="doc in docs" :key="doc.id" class="tree-item">
+              <div class="tree-row" @click="toggleExpand(doc.id)">
+                <span class="tree-icon" v-if="doc.children?.length">
+                  {{ expandedIds.has(doc.id) ? '&#9660;' : '&#9654;' }}
+                </span>
+                <span class="tree-icon tree-leaf" v-else>&#9679;</span>
+                <span class="tree-title">{{ doc.title }}</span>
+                <span class="tree-meta">{{ doc.updated_by }}</span>
+              </div>
+              <ul v-if="doc.children?.length && expandedIds.has(doc.id)" class="tree-children">
+                <li v-for="child in doc.children" :key="child.id" class="tree-item tree-child">
+                  <div class="tree-row">
+                    <span class="tree-icon tree-leaf">&#9679;</span>
+                    <span class="tree-title">{{ child.title }}</span>
+                    <span class="tree-meta">{{ child.updated_by }}</span>
+                  </div>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Recent edits -->
+        <div class="docs-recent">
+          <h2>Recent Edits</h2>
+          <div v-if="!recentEdits.length" class="empty-msg">No recent edits.</div>
+          <ul class="edit-list">
+            <li v-for="edit in recentEdits" :key="edit.id" class="edit-item">
+              <div class="edit-title">{{ edit.title }}</div>
+              <div class="edit-meta">
+                <span>{{ edit.user }}</span>
+                <span>{{ edit.updated_at }}</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.docs-page { padding: 32px 40px; max-width: 960px; margin: 0 auto; }
+h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
+.page-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; }
+
+.loading-state, .error-state {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  padding: 80px 0; gap: 12px; color: var(--text-muted);
+}
+.loading-spinner {
+  width: 28px; height: 28px; border: 3px solid var(--border);
+  border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.error-icon { font-size: 32px; }
+.error-state p { color: var(--red); font-size: 14px; }
+.empty-msg { font-size: 13px; color: var(--text-muted); }
+
+.docs-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
+@media (max-width: 768px) { .docs-layout { grid-template-columns: 1fr; } }
+
+.docs-tree, .docs-recent {
+  background: var(--card-bg); border: 1px solid var(--border-light);
+  border-radius: var(--radius); padding: 20px;
+}
+h2 { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
+
+.tree-list { list-style: none; padding: 0; margin: 0; }
+.tree-item { margin-bottom: 2px; }
+.tree-row {
+  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
+  border-radius: 6px; cursor: pointer; font-size: 13px;
+}
+.tree-row:hover { background: var(--bg); }
+.tree-icon { font-size: 8px; color: var(--text-muted); width: 12px; text-align: center; flex-shrink: 0; }
+.tree-leaf { font-size: 6px; }
+.tree-title { flex: 1; font-weight: 500; }
+.tree-meta { font-size: 11px; color: var(--text-muted); }
+.tree-children { list-style: none; padding-left: 20px; margin: 0; }
+.tree-child .tree-row { padding: 6px 10px; }
+
+.edit-list { list-style: none; padding: 0; margin: 0; }
+.edit-item {
+  padding: 10px 0; border-bottom: 1px solid var(--border-light);
+}
+.edit-item:last-child { border-bottom: none; }
+.edit-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
+.edit-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
+</style>

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

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { apiGet, apiPost, apiPatch } from '@/api/client'
+import { useAuth } from '@/composables/useAuth'
+
+const router = useRouter()
+const { authUser: currentUser } = useAuth()
+
+interface Notification {
+  id: number
+  user_name: string
+  type: string
+  title: string
+  body: string | null
+  source_type: string
+  source_id: string
+  page_id: string
+  actor: string
+  is_read: number
+  created_at: string
+}
+
+const notifications = ref<Notification[]>([])
+const loading = ref(true)
+
+const unreadCount = computed(() => notifications.value.filter(n => !n.is_read).length)
+
+async function loadNotifications() {
+  loading.value = true
+  const user = currentUser.value
+  if (!user) { loading.value = false; return }
+  const { data } = await apiGet(`/api/v2/notifications?user=${encodeURIComponent(user)}`)
+  if (data?.notifications) notifications.value = data.notifications as Notification[]
+  loading.value = false
+}
+
+async function markRead(n: Notification) {
+  if (!n.is_read) {
+    await apiPatch(`/api/v2/notifications/${n.id}/read`, {})
+    n.is_read = 1
+  }
+  navigate(n)
+}
+
+async function markAllRead() {
+  const user = currentUser.value
+  if (!user) return
+  await apiPost('/api/v2/notifications/mark-all-read', { user })
+  notifications.value.forEach(n => { n.is_read = 1 })
+}
+
+function navigate(n: Notification) {
+  if (n.source_type === 'story') {
+    router.push(`/board?story=${n.source_id}`)
+  } else if (n.source_type === 'nudge') {
+    router.push('/')
+  } else if (n.page_id) {
+    router.push(`/${n.page_id}`)
+  }
+}
+
+function typeIcon(type: string) {
+  const map: Record<string, string> = {
+    mention: '@', assign: '📋', review: '👀',
+    nudge: '🔔', memo: '💬', comment: '💬',
+  }
+  return map[type] || '📬'
+}
+
+function typeColor(type: string) {
+  const map: Record<string, string> = {
+    mention: '#3b82f6', assign: '#f59e0b', review: '#8b5cf6',
+    nudge: '#ef4444', memo: '#10b981',
+  }
+  return map[type] || '#6b7280'
+}
+
+function formatDate(d: string) {
+  const date = new Date(d.endsWith('Z') ? d : d + 'Z')
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+onMounted(loadNotifications)
+</script>
+
+<template>
+  <div class="inbox-page">
+    <div class="inbox-header">
+      <h1>Inbox</h1>
+      <div class="inbox-actions">
+        <span v-if="unreadCount" class="unread-badge">{{ unreadCount }} unread</span>
+        <button v-if="unreadCount" class="btn btn--primary btn--sm" @click="markAllRead">Mark All Read</button>
+      </div>
+    </div>
+
+    <div v-if="loading" class="loading">Loading...</div>
+    <div v-else-if="!notifications.length" class="empty">No notifications.</div>
+
+    <div v-else class="notification-list">
+      <div
+        v-for="n in notifications"
+        :key="n.id"
+        class="notification-item"
+        :class="{ unread: !n.is_read }"
+        @click="markRead(n)"
+      >
+        <span class="notif-icon" :style="{ background: typeColor(n.type) }">{{ typeIcon(n.type) }}</span>
+        <div class="notif-content">
+          <div class="notif-title">{{ n.title }}</div>
+          <div v-if="n.body" class="notif-body">{{ n.body.slice(0, 100) }}{{ n.body.length > 100 ? '...' : '' }}</div>
+          <div class="notif-meta">
+            <span class="notif-actor">{{ n.actor }}</span>
+            <span class="notif-date">{{ formatDate(n.created_at) }}</span>
+          </div>
+        </div>
+        <span v-if="!n.is_read" class="notif-dot" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.inbox-page { max-width: 700px; margin: 0 auto; padding: 24px 16px; }
+.inbox-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.inbox-header h1 { font-size: 20px; font-weight: 700; }
+.inbox-actions { display: flex; align-items: center; gap: 8px; }
+.unread-badge { background: #ef4444; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
+
+.notification-list { display: flex; flex-direction: column; gap: 4px; }
+.notification-item {
+  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
+  background: var(--card-bg, #fff); border: 1px solid var(--border-light, #e2e8f0);
+  border-radius: 12px; cursor: pointer; transition: transform 0.1s;
+}
+.notification-item:hover { transform: translateY(-1px); }
+.notification-item.unread { background: rgba(59,130,246,0.08); border-left: 3px solid #3b82f6; }
+
+.notif-icon {
+  width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
+  color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0;
+}
+.notif-content { flex: 1; min-width: 0; }
+.notif-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
+.notif-body { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
+.notif-meta { display: flex; gap: 8px; font-size: 11px; color: var(--text-muted); }
+.notif-actor { font-weight: 500; }
+.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; flex-shrink: 0; margin-top: 6px; }
+
+.btn { padding: 8px 16px; border: 1px solid var(--border-light, #e2e8f0); border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; background: var(--card-bg, #fff); color: var(--text-secondary); transition: all 0.15s; }
+.btn--primary { background: #1e293b; color: #fff; border-color: #1e293b; }
+.btn--primary:hover { background: #334155; }
+.btn--sm { padding: 4px 10px; font-size: 11px; }
+
+.loading, .empty { text-align: center; color: var(--text-muted); padding: 40px; }
+</style>

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

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { apiGet, apiPost, apiPatch, isStaticMode } from '@/api/client'
+import MemberSelect from '@/components/MemberSelect.vue'
+
+interface Meeting { id: number; title: string; date: string; participants: string | null; created_by: string }
+
+const meetings = ref<Meeting[]>([])
+const meetingsLoading = ref(true)
+const showCreate = ref(false)
+const form = ref({ title: '', date: new Date().toISOString().split('T')[0], rawTranscript: '' })
+const selectedParticipants = ref<string[]>([])
+const selectedMeeting = ref<Record<string, unknown> | null>(null)
+
+const structurizing = ref(false)
+const uploading = ref(false)
+
+const editSummary = ref('')
+const editAgenda = ref('')
+const editDecisions = ref('')
+const editActionItems = ref('')
+
+async function loadMeetings() {
+  if (isStaticMode()) { meetingsLoading.value = false; return }
+  meetingsLoading.value = true
+  const { data } = await apiGet<{ meetings: Meeting[] }>('/api/v2/meetings')
+  if (data?.meetings) meetings.value = data.meetings
+  meetingsLoading.value = false
+}
+
+async function createMeeting() {
+  await apiPost('/api/v2/meetings', {
+    ...form.value,
+    participants: selectedParticipants.value.join(', ') || null,
+  })
+  form.value = { title: '', date: new Date().toISOString().split('T')[0], rawTranscript: '' }
+  selectedParticipants.value = []
+  showCreate.value = false
+  await loadMeetings()
+}
+
+async function viewMeeting(id: number) {
+  const { data } = await apiGet<{ meeting: Record<string, unknown> }>(`/api/v2/meetings/${id}`)
+  if (data?.meeting) {
+    selectedMeeting.value = data.meeting
+    editSummary.value = (data.meeting.summary as string) ?? ''
+    editAgenda.value = (data.meeting.agenda as string) ?? ''
+    editDecisions.value = (data.meeting.decisions as string) ?? ''
+    editActionItems.value = (data.meeting.action_items as string) ?? ''
+  }
+}
+
+async function saveMeetingEdits() {
+  if (!selectedMeeting.value) return
+  await apiPatch(`/api/v2/meetings/${selectedMeeting.value.id}`, {
+    summary: editSummary.value || null,
+    agenda: editAgenda.value || null,
+    decisions: editDecisions.value || null,
+    actionItems: editActionItems.value || null,
+  })
+  await viewMeeting(selectedMeeting.value.id as number)
+}
+
+async function uploadAudio(e: Event, meetingId: number) {
+  const input = e.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+  if (file.size > 25 * 1024 * 1024) { alert('File size exceeds 25MB limit'); return }
+
+  uploading.value = true
+  const formData = new FormData()
+  formData.append('file', file)
+
+  const url = import.meta.env.VITE_API_URL as string
+  const token = localStorage.getItem('spec-auth-token') || ''
+  const res = await fetch(`${url}/api/v2/meetings/${meetingId}/transcribe`, {
+    method: 'POST',
+    headers: { 'Authorization': `Bearer ${token}` },
+    body: formData,
+  })
+  const data = await res.json()
+  uploading.value = false
+  input.value = ''
+
+  if (data.error) { alert(data.error); return }
+  alert('Transcription complete')
+  await viewMeeting(meetingId)
+}
+
+async function structurize(id: number) {
+  if (!selectedMeeting.value?.raw_transcript) { alert('No transcript available'); return }
+
+  const { data: settingsData } = await apiGet<{ settings: Record<string, string> }>('/api/v2/admin/settings')
+  const settings = settingsData?.settings ?? {}
+  const apiKey = settings.llm_api_key
+  if (!apiKey) { alert('Please set an API key in /admin settings'); return }
+
+  const provider = settings.llm_provider ?? (apiKey.startsWith('sk-ant') ? 'anthropic' : apiKey.startsWith('AI') ? 'gemini' : 'openai')
+  const model = settings.llm_model ?? (provider === 'openai' ? 'gpt-4o-mini' : provider === 'gemini' ? 'gemini-2.0-flash' : 'claude-sonnet-4-20250514')
+  const transcript = selectedMeeting.value.raw_transcript as string
+
+  const systemPrompt = `You are an expert at structuring meeting transcripts.
+Analyze the transcript below and return a JSON object:
+{
+  "summary": "One-line summary",
+  "agenda": "Agenda items (newline-separated)",
+  "decisions": "Decisions made (newline-separated)",
+  "action_items": "Action items (newline-separated, include assignee on each line)"
+}
+Return only JSON.`
+
+  structurizing.value = true
+  try {
+    let result: { summary?: string; agenda?: string; decisions?: string; action_items?: string }
+
+    if (provider === 'openai') {
+      const res = await fetch('https://api.openai.com/v1/chat/completions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` },
+        body: JSON.stringify({
+          model,
+          messages: [{ role: 'system', content: systemPrompt }, { role: 'user', content: transcript }],
+          response_format: { type: 'json_object' },
+        }),
+      })
+      const data = await res.json() as { choices?: Array<{ message?: { content?: string } }> }
+      result = JSON.parse(data.choices?.[0]?.message?.content ?? '{}')
+    } else if (provider === 'gemini') {
+      const geminiModel = model || 'gemini-2.0-flash'
+      const res = await fetch(
+        `https://generativelanguage.googleapis.com/v1beta/models/${geminiModel}:generateContent?key=${apiKey}`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            contents: [{ parts: [{ text: `${systemPrompt}\n\n${transcript}` }] }],
+            generationConfig: { responseMimeType: 'application/json' },
+          }),
+        },
+      )
+      const data = await res.json() as { candidates?: Array<{ content?: { parts?: Array<{ text?: string }> } }> }
+      const geminiText = data.candidates?.[0]?.content?.parts?.[0]?.text ?? '{}'
+      const gMatch = geminiText.match(/\{[\s\S]*\}/)
+      result = JSON.parse(gMatch?.[0] ?? '{}')
+    } else {
+      const res = await fetch('https://api.anthropic.com/v1/messages', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'x-api-key': apiKey, 'anthropic-version': '2023-06-01' },
+        body: JSON.stringify({
+          model, max_tokens: 4096, system: systemPrompt,
+          messages: [{ role: 'user', content: transcript }],
+        }),
+      })
+      const data = await res.json() as { content?: Array<{ text?: string }> }
+      const text = data.content?.[0]?.text ?? '{}'
+      const jsonMatch = text.match(/\{[\s\S]*\}/)
+      result = JSON.parse(jsonMatch?.[0] ?? '{}')
+    }
+
+    editSummary.value = result.summary ?? ''
+    editAgenda.value = result.agenda ?? ''
+    editDecisions.value = result.decisions ?? ''
+    editActionItems.value = result.action_items ?? ''
+    await saveMeetingEdits()
+    await viewMeeting(id)
+  } catch (e) {
+    alert(`AI structuring failed: ${String(e)}`)
+  } finally { structurizing.value = false }
+}
+
+async function createTasks(id: number) {
+  const { data } = await apiPost(`/api/v2/meetings/${id}/create-tasks`, {})
+  if (data) alert(`${(data as any).created} tasks created`)
+}
+
+onMounted(loadMeetings)
+</script>
+
+<template>
+  <div class="meetings-page">
+    <div class="meetings-header">
+      <h1>Meeting Notes</h1>
+      <button class="btn btn--primary" @click="showCreate = !showCreate">+ New Meeting</button>
+    </div>
+
+    <!-- Create form -->
+    <div v-if="showCreate" class="create-form glass-card">
+      <input v-model="form.title" class="form-input" placeholder="Meeting title" />
+      <input v-model="form.date" type="date" class="form-input" />
+      <div class="participants-select">
+        <span class="participants-label">Participants:</span>
+        <MemberSelect v-model="selectedParticipants" />
+      </div>
+      <textarea v-model="form.rawTranscript" class="form-textarea" placeholder="Paste transcript here..." rows="8"></textarea>
+      <button class="btn btn--primary" @click="createMeeting">Save</button>
+    </div>
+
+    <!-- List -->
+    <div class="meetings-list">
+      <div v-for="m in meetings" :key="m.id" class="meeting-card glass-card" @click="viewMeeting(m.id)">
+        <div class="meeting-title">{{ m.title }}</div>
+        <div class="meeting-meta">
+          <span>{{ m.date }}</span>
+          <span v-if="m.participants">{{ m.participants }}</span>
+          <span>{{ m.created_by }}</span>
+        </div>
+      </div>
+      <div v-if="meetingsLoading" class="empty">Loading...</div>
+      <div v-else-if="!meetings.length" class="empty">No meeting notes yet. Create one to get started.</div>
+    </div>
+
+    <!-- Detail -->
+    <div v-if="selectedMeeting" class="meeting-detail glass-card">
+      <div class="detail-header">
+        <h2>{{ selectedMeeting.title }}</h2>
+        <button class="btn btn--sm" @click="selectedMeeting = null">Close</button>
+      </div>
+      <div class="detail-meta">{{ selectedMeeting.date }} | {{ selectedMeeting.participants }}</div>
+
+      <!-- Structured results (editable) -->
+      <div class="detail-section">
+        <h3>Summary</h3>
+        <textarea v-model="editSummary" class="edit-textarea" rows="2" placeholder="Meeting summary"></textarea>
+      </div>
+      <div class="detail-section">
+        <h3>Agenda</h3>
+        <textarea v-model="editAgenda" class="edit-textarea" rows="3" placeholder="Agenda items (one per line)"></textarea>
+      </div>
+      <div class="detail-section">
+        <h3>Decisions</h3>
+        <textarea v-model="editDecisions" class="edit-textarea" rows="3" placeholder="Decisions (one per line)"></textarea>
+      </div>
+      <div class="detail-section">
+        <h3>Action Items</h3>
+        <textarea v-model="editActionItems" class="edit-textarea" rows="3" placeholder="Action items (one per line, include assignee)"></textarea>
+        <button v-if="editActionItems" class="btn btn--sm btn--primary" @click="createTasks(selectedMeeting.id as number)">Auto-create Tasks</button>
+      </div>
+
+      <div class="detail-actions">
+        <button class="btn btn--primary" @click="saveMeetingEdits">Save</button>
+        <label class="btn btn--sm upload-btn">
+          Upload Audio
+          <input type="file" accept=".mp3,.wav,.m4a,.webm,.ogg" hidden @change="uploadAudio($event, selectedMeeting.id as number)" />
+        </label>
+        <span v-if="uploading" class="upload-status">Transcribing...</span>
+        <button v-if="selectedMeeting.raw_transcript" class="btn btn--sm" :disabled="structurizing" @click="structurize(selectedMeeting.id as number)">
+          {{ structurizing ? 'AI Structuring...' : 'AI Structure' }}
+        </button>
+      </div>
+
+      <div v-if="selectedMeeting.raw_transcript" class="detail-section">
+        <h3>Transcript</h3>
+        <pre class="transcript">{{ selectedMeeting.raw_transcript }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.meetings-page { max-width: 800px; margin: 0 auto; padding: 24px; min-height: 100vh; }
+.meetings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+.meetings-header h1 { font-size: 22px; font-weight: 700; }
+.create-form { padding: 20px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
+.form-input { padding: 8px 12px; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; font-size: 14px; }
+.form-textarea { padding: 8px 12px; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; font-size: 13px; font-family: monospace; resize: vertical; }
+.meetings-list { display: flex; flex-direction: column; gap: 8px; }
+.meeting-card { padding: 16px; cursor: pointer; }
+.meeting-card:hover { transform: translateY(-1px); }
+.meeting-title { font-size: 15px; font-weight: 600; }
+.meeting-meta { font-size: 12px; color: var(--text-secondary); display: flex; gap: 12px; margin-top: 4px; }
+.meeting-detail { padding: 24px; margin-top: 20px; }
+.detail-header { display: flex; justify-content: space-between; align-items: center; }
+.detail-header h2 { font-size: 18px; }
+.detail-meta { font-size: 13px; color: var(--text-secondary); margin: 8px 0 16px; }
+.detail-section { margin-bottom: 16px; }
+.detail-section h3 { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
+.detail-section pre { font-size: 13px; white-space: pre-wrap; line-height: 1.6; }
+.transcript { max-height: 300px; overflow-y: auto; background: rgba(0,0,0,0.03); padding: 12px; border-radius: 8px; }
+.empty { color: var(--text-muted); padding: 20px; text-align: center; }
+.edit-textarea { width: 100%; padding: 8px 12px; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; font-size: 13px; resize: vertical; font-family: inherit; }
+.detail-actions { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
+.participants-select { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.participants-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; flex-shrink: 0; }
+.btn { padding: 8px 16px; border-radius: 8px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; }
+.btn--primary { background: var(--primary); color: #fff; }
+.btn--sm { padding: 4px 10px; font-size: 12px; }
+.glass-card {
+  background: rgba(255,255,255,0.25); backdrop-filter: blur(40px) saturate(1.8);
+  border: 1px solid rgba(255,255,255,0.45); border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.5);
+}
+.upload-btn { cursor: pointer; background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
+.upload-status { font-size: 12px; color: #f59e0b; }
+</style>