popilot 0.6.0 → 0.8.0

package/scaffold/spec-site/src/components/MemoItem.vue

@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import Icon from '@/components/Icon.vue'
+import type { MemoItem, MemoType, ReplyItem } from '@/composables/useMemo'
+import { MEMO_TYPES } from '@/composables/useMemo'
+import { parseMentions } from '@/utils/parseMentions'
+import { useRouter } from 'vue-router'
+import MentionInput from '@/components/MentionInput.vue'
+
+const props = defineProps<{
+  memo: MemoItem
+  replies: ReplyItem[]
+  authUser: string | null
+  replyOpenId: number | null
+  replyText: string
+  replyReviewType: string
+  showPageLabel?: boolean
+}>()
+
+const router = useRouter()
+
+const emit = defineEmits<{
+  resolve: [id: number]
+  reopen: [id: number]
+  delete: [id: number]
+  toggleReply: [id: number]
+  'update:replyText': [text: string]
+  'update:replyReviewType': [type: string]
+  addReply: [memoId: number]
+  deleteReply: [replyId: number]
+  convertToTask: [memo: MemoItem]
+  convertToInitiative: [memo: MemoItem]
+}>()
+
+function getMemoTypeInfo(type: MemoType | undefined) {
+  return MEMO_TYPES.find(t => t.value === type) ?? MEMO_TYPES[0]
+}
+
+function formatTime(ts: number | string): string {
+  const d = typeof ts === 'string' ? new Date(ts) : new Date(ts)
+  const mm = String(d.getMonth() + 1).padStart(2, '0')
+  const dd = String(d.getDate()).padStart(2, '0')
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mi = String(d.getMinutes()).padStart(2, '0')
+  return `${mm}/${dd} ${hh}:${mi}`
+}
+
+function handleMentionClick(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (target.classList.contains('memo-mention')) {
+    e.preventDefault()
+    const path = target.getAttribute('data-mention-page')
+    if (path) router.push(path)
+  }
+}
+
+const PAGE_LABELS: Record<string, string> = {
+  home: 'Home', diagnosis: 'AI Diagnosis', worknote: 'Coaching Notes',
+  onboarding: 'Onboarding', pricing: 'Pricing',
+}
+
+function getPageLabel(pageId: string): string {
+  if (PAGE_LABELS[pageId]) return PAGE_LABELS[pageId]
+  if (pageId.startsWith('policy/')) {
+    const parts = pageId.split('/')
+    return parts.length === 3 ? `Policy ${parts[2]}` : `Policy`
+  }
+  if (pageId.startsWith('retro/')) return 'Retrospective'
+  return pageId
+}
+</script>
+
+<template>
+  <div
+    class="memo-item"
+    :class="[`memo-item--${memo.memo_type}`, { 'memo-item--resolved': memo.status === 'resolved' }]"
+  >
+    <div class="memo-item-type-bar" :style="{ background: getMemoTypeInfo(memo.memo_type).color }"></div>
+    <div class="memo-item-content">
+      <div class="memo-item-header">
+        <span class="memo-item-type-label">{{ getMemoTypeInfo(memo.memo_type).icon }} {{ getMemoTypeInfo(memo.memo_type).label }}</span>
+        <span class="memo-item-time">{{ formatTime(memo.ts) }}</span>
+      </div>
+      <div class="memo-item-route">
+        <span class="memo-item-author">{{ memo.author }}</span>
+        <span class="memo-item-arrow">→</span>
+        <template v-if="memo.assigned_to">
+          <span
+            v-for="name in memo.assigned_to.split(',').map((s: string) => s.trim()).filter(Boolean)"
+            :key="name"
+            class="memo-item-recipient-tag"
+          >@{{ name }}</span>
+        </template>
+        <span v-else class="memo-item-assigned memo-item-assigned--all">Everyone</span>
+      </div>
+      <div v-if="showPageLabel && memo.page_id" class="memo-item-page" @click="router.push('/' + memo.page_id)">
+        📄 {{ getPageLabel(memo.page_id) }}
+      </div>
+      <div v-if="memo.title" class="memo-item-title">{{ memo.title }}</div>
+      <div
+        class="memo-item-text"
+        :class="{ 'memo-item-text--resolved': memo.status === 'resolved' }"
+        v-html="parseMentions(memo.text)"
+        @click="handleMentionClick"
+      ></div>
+
+      <!-- Replies -->
+      <div v-if="replies.length" class="memo-reply-list">
+        <div v-for="r in replies" :key="r.id" class="memo-reply-item" :class="`reply-${(r.review_type || 'comment').replace('_', '-')}`">
+          <div class="memo-reply-header">
+            <span v-if="r.review_type === 'approve'" class="memo-review-badge badge-approve"><Icon name="check" :size="14" /> Approved</span>
+            <span v-else-if="r.review_type === 'request_changes'" class="memo-review-badge badge-changes"><Icon name="refreshCw" :size="14" /> Changes Requested</span>
+            <span class="memo-reply-author">{{ r.created_by }}</span>
+            <span class="memo-reply-time">{{ formatTime(r.created_at) }}</span>
+            <button
+              v-if="r.created_by === authUser"
+              class="memo-action-btn memo-action-btn--delete"
+              @click="emit('deleteReply', r.id)"
+              title="Delete reply"
+              style="margin-left:auto;padding:1px 4px;font-size:10px;"
+            ><Icon name="trash" :size="14" /></button>
+          </div>
+          <div class="memo-reply-text" v-html="parseMentions(r.content)" @click="handleMentionClick"></div>
+        </div>
+      </div>
+
+      <!-- Reply Input -->
+      <div v-if="replyOpenId === memo.id" class="memo-reply-input">
+        <div class="memo-review-type-select">
+          <label class="review-type-option" :class="{ active: replyReviewType === 'comment' }">
+            <input type="radio" name="replyReviewType" :checked="replyReviewType === 'comment'" @change="emit('update:replyReviewType', 'comment')" /> <Icon name="messageCircle" :size="14" /> Comment
+          </label>
+          <label class="review-type-option" :class="{ active: replyReviewType === 'approve' }">
+            <input type="radio" name="replyReviewType" :checked="replyReviewType === 'approve'" @change="emit('update:replyReviewType', 'approve')" /> <Icon name="check" :size="14" /> Approve
+          </label>
+          <label class="review-type-option" :class="{ active: replyReviewType === 'request_changes' }">
+            <input type="radio" name="replyReviewType" :checked="replyReviewType === 'request_changes'" @change="emit('update:replyReviewType', 'request_changes')" /> <Icon name="refreshCw" :size="14" /> Request Changes
+          </label>
+        </div>
+        <MentionInput
+          :model-value="replyText"
+          placeholder="Write a reply... (@ to mention)"
+          :rows="2"
+          @update:model-value="emit('update:replyText', $event)"
+          @submit="emit('addReply', memo.id)"
+        />
+        <div class="memo-reply-input-actions">
+          <button class="memo-reply-send" @click="emit('addReply', memo.id)" :disabled="!replyText.trim()">Send</button>
+          <button class="memo-reply-cancel" @click="emit('toggleReply', memo.id)">Cancel</button>
+        </div>
+      </div>
+
+      <div class="memo-item-actions">
+        <button
+          class="memo-action-btn memo-action-btn--reply"
+          @click="emit('toggleReply', memo.id)"
+          title="Reply"
+        ><Icon name="messageCircle" :size="14" /> {{ replies.length || '' }}</button>
+        <button
+          v-if="memo.status === 'open'"
+          class="memo-action-btn memo-action-btn--convert"
+          @click="emit('convertToTask', memo)"
+          title="Convert to task"
+        ><Icon name="sprint" :size="14" /> Convert to Task</button>
+        <button
+          v-if="memo.status === 'open'"
+          class="memo-action-btn memo-action-btn--initiative"
+          @click="emit('convertToInitiative', memo)"
+          title="Convert to initiative"
+        >Convert to Initiative</button>
+        <button
+          v-if="memo.status === 'open'"
+          class="memo-action-btn memo-action-btn--resolve"
+          @click="emit('resolve', memo.id)"
+          title="Mark as resolved"
+        >✓ resolve</button>
+        <button
+          v-else
+          class="memo-action-btn memo-action-btn--reopen"
+          @click="emit('reopen', memo.id)"
+          title="Reopen"
+        >↩ reopen</button>
+        <button
+          v-if="memo.author === authUser"
+          class="memo-action-btn memo-action-btn--delete"
+          @click="emit('delete', memo.id)"
+          title="Delete"
+        ><Icon name="trash" :size="14" /></button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.memo-item {
+  display: flex; border-radius: 8px; margin-bottom: 10px;
+  background: #f8fafc; border: 1px solid #e2e8f0;
+  overflow: hidden; transition: opacity 0.2s;
+}
+.memo-item--resolved { opacity: 0.6; }
+.memo-item-type-bar { width: 3px; flex-shrink: 0; }
+.memo-item-content { flex: 1; padding: 10px 12px; min-width: 0; }
+
+.memo-item-header {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 4px;
+}
+.memo-item-type-label { font-size: 10px; font-weight: 600; color: #64748b; }
+.memo-item-time { font-size: 10px; color: #94a3b8; }
+
+.memo-item-route {
+  display: flex; align-items: center; gap: 4px;
+  margin-bottom: 6px; font-size: 12px;
+}
+.memo-item-author { color: #3b82f6; font-weight: 600; }
+.memo-item-arrow { color: #94a3b8; }
+.memo-item-assigned { color: #1e293b; font-weight: 500; }
+.memo-item-assigned--all { color: #94a3b8; font-weight: 400; }
+.memo-item-recipient-tag {
+  display: inline-block;
+  padding: 1px 7px; background: #dbeafe; color: #1d4ed8;
+  font-size: 11px; font-weight: 600; border-radius: 10px;
+  margin-right: 2px;
+}
+
+.memo-item-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+.memo-item-text {
+  font-size: 13px; color: #1e293b; line-height: 1.6;
+  white-space: pre-wrap; word-break: break-word;
+}
+.memo-item-text--resolved { text-decoration: line-through; color: #94a3b8; }
+
+.memo-item-actions {
+  display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end;
+}
+.memo-action-btn {
+  background: none; border: 1px solid transparent; font-size: 11px;
+  padding: 3px 8px; border-radius: 4px; cursor: pointer; font-weight: 500;
+  transition: all 0.15s;
+}
+.memo-action-btn--resolve { color: #22c55e; border-color: #bbf7d0; }
+.memo-action-btn--resolve:hover { background: #f0fdf4; }
+.memo-action-btn--reopen { color: #3b82f6; border-color: #bfdbfe; }
+.memo-action-btn--reopen:hover { background: #eff6ff; }
+.memo-action-btn--delete { color: #cbd5e1; border-color: transparent; }
+.memo-action-btn--delete:hover { color: #ef4444; }
+.memo-action-btn--reply { color: #3b82f6; border-color: #bfdbfe; }
+.memo-action-btn--reply:hover { background: #eff6ff; }
+.memo-action-btn--convert { color: #f59e0b; border-color: #fde68a; }
+.memo-action-btn--convert:hover { background: #fffbeb; }
+.memo-action-btn--initiative { color: #1d4ed8; border-color: #bfdbfe; }
+.memo-action-btn--initiative:hover { background: #eff6ff; }
+
+/* Reply */
+.memo-reply-list {
+  margin-top: 8px; padding-left: 10px; border-left: 2px solid #e2e8f0;
+}
+.memo-reply-item { padding: 6px 0; font-size: 12px; }
+.memo-reply-item + .memo-reply-item { border-top: 1px solid #f1f5f9; }
+.memo-reply-header {
+  display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
+}
+.memo-reply-author { color: #3b82f6; font-weight: 600; font-size: 11px; }
+.memo-reply-time { color: #94a3b8; font-size: 10px; }
+.memo-reply-text { color: #334155; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
+
+.memo-reply-input { margin-top: 8px; }
+.memo-reply-textarea {
+  width: 100%; border: 1px solid #e2e8f0; border-radius: 6px;
+  padding: 8px 10px; font-size: 12px; line-height: 1.4;
+  resize: none; font-family: inherit; color: #1e293b; box-sizing: border-box;
+}
+.memo-reply-textarea:focus { outline: none; border-color: #3b82f6; }
+.memo-reply-input-actions { display: flex; gap: 6px; margin-top: 4px; justify-content: flex-end; }
+.memo-reply-send {
+  padding: 4px 12px; background: #1e293b; color: #fff; border: none;
+  border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer;
+}
+.memo-reply-send:hover { background: #334155; }
+.memo-reply-send:disabled { background: #cbd5e1; cursor: not-allowed; }
+.memo-reply-cancel {
+  padding: 4px 10px; background: none; border: 1px solid #e2e8f0;
+  border-radius: 4px; font-size: 11px; color: #94a3b8; cursor: pointer;
+}
+.memo-reply-cancel:hover { color: #64748b; border-color: #94a3b8; }
+
+/* Page label (global inbox) */
+.memo-item-page {
+  display: inline-block;
+  font-size: 10px; font-weight: 600; color: #3b82f6;
+  background: #eff6ff; padding: 2px 8px; border-radius: 10px;
+  margin-bottom: 4px; cursor: pointer;
+}
+.memo-item-page:hover { background: #dbeafe; }
+
+/* Mention links (v-html injected) */
+.memo-item-text :deep(.memo-mention),
+.memo-reply-text :deep(.memo-mention) {
+  color: #3b82f6; font-weight: 600; text-decoration: none;
+  background: #eff6ff; padding: 1px 4px; border-radius: 3px;
+  cursor: pointer;
+}
+.memo-item-text :deep(.memo-mention:hover),
+.memo-reply-text :deep(.memo-mention:hover) {
+  background: #dbeafe; text-decoration: underline;
+}
+.memo-item-text :deep(.mention-chip),
+.memo-reply-text :deep(.mention-chip) {
+  background: #dbeafe; color: #1d4ed8; padding: 1px 4px; border-radius: 4px; font-weight: 500;
+}
+.memo-review-type-select {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 6px;
+  flex-wrap: wrap;
+}
+.review-type-option {
+  font-size: 10px;
+  padding: 2px 6px;
+  border: 1px solid #e2e8f0;
+  border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  transition: all 0.1s;
+}
+.review-type-option input[type="radio"] {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap; border: 0;
+}
+.review-type-option.active { border-color: #8b5cf6; background: #f5f3ff; color: #7c3aed; font-weight: 600; }
+
+.memo-review-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-right: 4px;
+}
+.badge-approve { background: #dcfce7; color: #16a34a; }
+.badge-changes { background: #fef3c7; color: #d97706; }
+.reply-approve { border-left-color: #22c55e; }
+.reply-request-changes { border-left-color: #f59e0b; }
+</style>

package/scaffold/spec-site/src/components/MemoRelations.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { apiGet, apiPost, apiDelete } from '@/composables/useTurso'
+
+interface Relation { id: number; source_memo_id: number; target_memo_id: number; relation_type: string; created_by: string }
+
+const props = defineProps<{ memoId: number }>()
+const router = useRouter()
+
+const relations = ref<Relation[]>([])
+const showModal = ref(false)
+const searchQuery = ref('')
+const searchResults = ref<any[]>([])
+const selectedRelType = ref('related')
+let searchTimer: ReturnType<typeof setTimeout> | null = null
+
+async function loadRelations() {
+  const { data } = await apiGet<{ relations: Relation[] }>(`/api/v2/memos/${props.memoId}/relations`)
+  relations.value = data?.relations || []
+}
+
+async function searchMemos() {
+  if (searchTimer) clearTimeout(searchTimer)
+  if (!searchQuery.value.trim()) { searchResults.value = []; return }
+  searchTimer = setTimeout(async () => {
+    const { data } = await apiGet<{ results: any[] }>(`/api/v2/search?q=${encodeURIComponent(searchQuery.value)}&type=memo`)
+    searchResults.value = (data?.results || []).filter((r: any) => r.id !== props.memoId)
+  }, 300)
+}
+
+async function addRelation(targetId: number) {
+  await apiPost(`/api/v2/memos/${props.memoId}/relations`, { targetMemoId: targetId, relationType: selectedRelType.value })
+  showModal.value = false; searchQuery.value = ''; searchResults.value = []
+  await loadRelations()
+}
+
+async function removeRelation(relId: number) {
+  if (!confirm('Delete this relation?')) return
+  await apiDelete(`/api/v2/memos/relations/${relId}`)
+  await loadRelations()
+}
+
+function getLinkedMemoId(r: Relation): number {
+  return r.source_memo_id === props.memoId ? r.target_memo_id : r.source_memo_id
+}
+
+const typeLabels: Record<string, string> = { related: 'Related', blocks: 'Blocks', duplicate: 'Duplicate' }
+
+onMounted(loadRelations)
+</script>
+
+<template>
+  <div class="memo-relations">
+    <div class="rel-header">
+      <span class="rel-title">Related Memos ({{ relations.length }})</span>
+      <button class="btn btn--xs btn--ghost" @click="showModal = true">+ Link</button>
+    </div>
+    <div v-for="r in relations" :key="r.id" class="rel-item">
+      <span class="rel-type-badge">{{ typeLabels[r.relation_type] || r.relation_type }}</span>
+      <span class="rel-link" @click="router.push({ query: { memo: String(getLinkedMemoId(r)) } })">#{{ getLinkedMemoId(r) }}</span>
+      <button class="rel-remove" @click="removeRelation(r.id)">✕</button>
+    </div>
+
+    <!-- Link modal -->
+    <div v-if="showModal" class="rel-modal-overlay" @click.self="showModal = false">
+      <div class="rel-modal">
+        <h4>Link Memo</h4>
+        <select v-model="selectedRelType" class="rel-type-select">
+          <option value="related">Related</option>
+          <option value="blocks">Blocks</option>
+          <option value="duplicate">Duplicate</option>
+        </select>
+        <input v-model="searchQuery" class="rel-search" placeholder="Search memos..." @input="searchMemos" autofocus />
+        <div v-for="m in searchResults" :key="m.id" class="rel-search-item" @click="addRelation(m.id)">
+          #{{ m.id }} {{ m.title || m.preview }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.memo-relations { margin: 16px 0; padding: 12px; background: #fafafa; border-radius: 8px; }
+.rel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+.rel-title { font-size: 13px; font-weight: 600; }
+.rel-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
+.rel-type-badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #e5e7eb; }
+.rel-link { color: #3b82f6; cursor: pointer; }
+.rel-link:hover { text-decoration: underline; }
+.rel-remove { border: none; background: none; color: #9ca3af; cursor: pointer; font-size: 12px; }
+.rel-remove:hover { color: #ef4444; }
+.rel-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 9999; display: flex; align-items: center; justify-content: center; }
+.rel-modal { background: #fff; border-radius: 12px; padding: 20px; width: 360px; max-height: 400px; overflow-y: auto; }
+.rel-modal h4 { margin: 0 0 12px; }
+.rel-type-select { width: 100%; border: 1px solid #d1d5db; border-radius: 6px; padding: 6px; font-size: 13px; margin-bottom: 8px; }
+.rel-search { width: 100%; border: 1px solid #d1d5db; border-radius: 6px; padding: 8px; font-size: 13px; box-sizing: border-box; margin-bottom: 8px; }
+.rel-search-item { padding: 8px; cursor: pointer; border-radius: 6px; font-size: 13px; }
+.rel-search-item:hover { background: #eff6ff; }
+@media (max-width: 767px) { .btn { min-height: 44px; } input, select { min-height: 44px; font-size: 16px; } }
+</style>

package/scaffold/spec-site/src/components/MemoTimeline.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import Icon from '@/components/Icon.vue'
+import { ref, onMounted } from 'vue'
+import { apiGet } from '@/composables/useTurso'
+import { renderMarkdown } from '@/utils/markdown'
+
+interface TimelineEntry { type: string; id: number; content: string; author: string; created_at: string }
+
+const props = defineProps<{ memoId: number }>()
+const timeline = ref<TimelineEntry[]>([])
+
+async function load() {
+  const { data } = await apiGet<{ timeline: TimelineEntry[] }>(`/api/v2/memos/${props.memoId}/timeline`)
+  timeline.value = data?.timeline || []
+}
+
+const typeIcons: Record<string, string> = { reply: '<Icon name="messageCircle" :size="14" />', activity: '<Icon name="document" :size="14" />', status_change: '<Icon name="refreshCw" :size="14" />' }
+const typeLabels: Record<string, string> = { reply: 'Reply', activity: 'Activity', status_change: 'Status Change' }
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="memo-timeline">
+    <div v-for="entry in timeline" :key="`${entry.type}-${entry.id}`" class="tl-entry">
+      <div class="tl-dot" />
+      <div class="tl-content">
+        <div class="tl-header">
+          <span class="tl-icon">{{ typeIcons[entry.type] || '<Icon name="pin" :size="14" />' }}</span>
+          <span class="tl-author">{{ entry.author }}</span>
+          <span class="tl-type">{{ typeLabels[entry.type] || entry.type }}</span>
+          <span class="tl-time">{{ entry.created_at }}</span>
+        </div>
+        <div class="tl-body" v-html="renderMarkdown(entry.content || '')"></div>
+      </div>
+    </div>
+    <div v-if="!timeline.length" class="tl-empty">Timeline is empty.</div>
+  </div>
+</template>
+
+<style scoped>
+.memo-timeline { padding: 8px 0; }
+.tl-entry { display: flex; gap: 12px; padding: 8px 0; border-left: 2px solid #e5e7eb; margin-left: 8px; padding-left: 16px; position: relative; }
+.tl-dot { position: absolute; left: -5px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; }
+.tl-content { flex: 1; }
+.tl-header { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #6b7280; margin-bottom: 4px; }
+.tl-icon { font-size: 14px; }
+.tl-author { font-weight: 600; color: #374151; }
+.tl-time { margin-left: auto; font-size: 11px; }
+.tl-body { font-size: 13px; line-height: 1.5; }
+.tl-empty { color: #9ca3af; font-size: 13px; text-align: center; padding: 24px; }
+@media (max-width: 767px) { .btn { min-height: 44px; } input, select { min-height: 44px; font-size: 16px; } }
+</style>

package/scaffold/spec-site/src/components/MentionInput.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted } from 'vue'
+import { apiGet } from '@/composables/useTurso'
+
+const props = defineProps<{
+  modelValue: string
+  placeholder?: string
+  rows?: number
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  submit: []
+}>()
+
+interface Member { id: number; name: string; role: string }
+
+const members = ref<Member[]>([])
+const showSuggestions = ref(false)
+const suggestions = ref<Member[]>([])
+const cursorPos = ref(0)
+const mentionStart = ref(-1)
+const selectedIdx = ref(0)
+const textareaRef = ref<HTMLTextAreaElement>()
+
+onMounted(() => loadMembers())
+
+async function loadMembers() {
+  if (members.value.length) return
+  const { data } = await apiGet<{ members: any[] }>('/api/v2/admin/members')
+  if (data?.members) {
+    members.value = data.members
+      .filter((m: any) => m.is_active)
+      .map((m: any) => ({ id: m.id, name: m.display_name || m.name || '', role: m.role || '' }))
+  }
+}
+
+async function onInput(e: Event) {
+  const el = e.target as HTMLTextAreaElement
+  const val = el.value
+  emit('update:modelValue', val)
+  cursorPos.value = el.selectionStart || 0
+  await checkMention(val, cursorPos.value)
+}
+
+async function checkMention(text: string, pos: number) {
+  // Find text after @
+  const before = text.slice(0, pos)
+  const atIdx = before.lastIndexOf('@')
+  if (atIdx === -1 || (atIdx > 0 && before[atIdx - 1] !== ' ' && before[atIdx - 1] !== '\n')) {
+    showSuggestions.value = false
+    return
+  }
+  const query = before.slice(atIdx + 1).toLowerCase()
+  if (query.includes(' ') || query.includes('\n')) {
+    showSuggestions.value = false
+    return
+  }
+  mentionStart.value = atIdx
+  await loadMembers()
+  suggestions.value = members.value.filter(m =>
+    m.name.toLowerCase().includes(query)
+  ).slice(0, 5)
+  showSuggestions.value = suggestions.value.length > 0
+  selectedIdx.value = 0
+}
+
+function selectMember(m: Member) {
+  const text = props.modelValue
+  const before = text.slice(0, mentionStart.value)
+  const after = text.slice(cursorPos.value)
+  const newText = `${before}@${m.name} ${after}`
+  emit('update:modelValue', newText)
+  showSuggestions.value = false
+  nextTick(() => {
+    if (textareaRef.value) {
+      const newPos = mentionStart.value + m.name.length + 2
+      textareaRef.value.focus()
+      textareaRef.value.setSelectionRange(newPos, newPos)
+    }
+  })
+}
+
+const isComposing = ref(false)
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' && !e.shiftKey && !showSuggestions.value && !isComposing.value) {
+    e.preventDefault()
+    emit('submit')
+  }
+  if (e.key === 'Escape') {
+    showSuggestions.value = false
+  }
+  // Keyboard navigation
+  if (showSuggestions.value) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      selectedIdx.value = Math.min(selectedIdx.value + 1, suggestions.value.length - 1)
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      selectedIdx.value = Math.max(selectedIdx.value - 1, 0)
+    } else if ((e.key === 'Tab' || e.key === 'Enter') && suggestions.value.length > 0) {
+      e.preventDefault()
+      selectMember(suggestions.value[selectedIdx.value])
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="mention-input-wrap">
+    <textarea
+      ref="textareaRef"
+      :value="modelValue"
+      :placeholder="placeholder || 'Write a reply... (@ to mention)'"
+      :rows="rows || 3"
+      @input="onInput"
+      @compositionstart="isComposing = true"
+      @compositionend="isComposing = false; onInput($event)"
+      @keydown="onKeydown"
+    />
+    <div v-if="showSuggestions" class="mention-suggestions">
+      <div
+        v-for="(m, i) in suggestions"
+        :key="m.id"
+        class="mention-item"
+        :class="{ 'mention-item--selected': i === selectedIdx }"
+        @mousedown.prevent="selectMember(m)"
+        @touchend.prevent="selectMember(m)"
+      >
+        <span class="mention-name">{{ m.name }}</span>
+        <span class="mention-role">{{ m.role }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mention-input-wrap { position: relative; overflow: visible; }
+.mention-input-wrap textarea {
+  width: 100%;
+  border: 1px solid rgba(0,0,0,0.15);
+  border-radius: 8px;
+  padding: 8px;
+  font-size: 13px;
+  resize: vertical;
+  box-sizing: border-box;
+}
+.mention-suggestions {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  min-width: 200px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.15);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  z-index: 1000;
+  max-height: 160px;
+  overflow-y: auto;
+}
+.mention-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+}
+.mention-item:hover, .mention-item--selected { background: #f0f4ff; }
+.mention-name { font-weight: 600; }
+.mention-role { font-size: 11px; color: #888; }
+</style>