qarpeo 0.0.0-alpha.10

package/dist/runtime/app/pages/devtools/logs.vue

@@ -0,0 +1,655 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref } from "vue"
+
+definePageMeta({ layout: false })
+
+interface LogEntry {
+  id: string
+  timestamp: string
+  level: "info" | "warn" | "error"
+  source: string
+  message: string
+  durationMs?: number
+  status?: number
+  details?: Record<string, any>
+}
+
+const logs = ref<LogEntry[]>([])
+const logsLoading = ref(false)
+const initialLoading = ref(true)
+const logLevel = ref<"all" | "info" | "warn" | "error">("all")
+const logSearch = ref<string>("")
+const selectedSource = ref<string>("all")
+const isLive = ref(true)
+const autoScroll = ref(true)
+const expandedLogId = ref<string | null>(null)
+const logContainerRef = ref<HTMLElement | null>(null)
+
+let pollTimer: any = null
+
+function fmtTime(iso?: string) {
+  if (!iso) return "—"
+  const d = new Date(iso)
+  return d.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  })
+}
+
+function fmtFullDate(iso?: string) {
+  if (!iso) return "—"
+  return new Date(iso).toLocaleString()
+}
+
+function getLogLevelBadgeColor(level?: string): "error" | "warning" | "neutral" {
+  if (level === "error") return "error"
+  if (level === "warn") return "warning"
+  return "neutral"
+}
+
+function getStatusBadgeColor(status?: number): "success" | "warning" | "error" | "neutral" {
+  if (!status) return "neutral"
+  if (status >= 200 && status < 300) return "success"
+  if (status >= 400 && status < 500) return "warning"
+  if (status >= 500) return "error"
+  return "neutral"
+}
+
+const availableSources = computed(() => {
+  const set = new Set<string>()
+  for (const l of logs.value) {
+    if (l.source) set.add(l.source)
+  }
+  return ["all", ...Array.from(set)]
+})
+
+const counts = computed(() => {
+  const res = { all: logs.value.length, info: 0, warn: 0, error: 0 }
+  for (const l of logs.value) {
+    if (l.level === "info") res.info++
+    if (l.level === "warn") res.warn++
+    if (l.level === "error") res.error++
+  }
+  return res
+})
+
+const filteredLogs = computed(() => {
+  let list = logs.value
+
+  if (logLevel.value !== "all") {
+    list = list.filter((l) => l.level === logLevel.value)
+  }
+
+  if (selectedSource.value !== "all") {
+    list = list.filter((l) => l.source === selectedSource.value)
+  }
+
+  if (logSearch.value.trim()) {
+    const q = logSearch.value.toLowerCase()
+    list = list.filter(
+      (l) =>
+        l.message.toLowerCase().includes(q) ||
+        l.source.toLowerCase().includes(q) ||
+        String(l.status || "").includes(q),
+    )
+  }
+
+  return list
+})
+
+function scrollToBottom() {
+  if (!autoScroll.value) return
+  nextTick(() => {
+    if (logContainerRef.value) {
+      logContainerRef.value.scrollTop = logContainerRef.value.scrollHeight
+    }
+  })
+}
+
+async function loadLogs(isInitial = false) {
+  if (isInitial) logsLoading.value = true
+  try {
+    const data = await $fetch<any>("/_qarpeo/api/logs").catch(() => ({
+      logs: [],
+    }))
+    const fetched: LogEntry[] = data.logs || []
+    if (fetched.length > 0) {
+      if (logs.value.length === 0) {
+        logs.value = fetched
+        scrollToBottom()
+      } else {
+        const existingIds = new Set(logs.value.map((l) => l.id))
+        const newItems = fetched.filter((l) => !existingIds.has(l.id))
+        if (newItems.length > 0) {
+          logs.value = [...logs.value, ...newItems]
+          scrollToBottom()
+        }
+      }
+    }
+  } finally {
+    if (isInitial) logsLoading.value = false
+    initialLoading.value = false
+  }
+}
+
+function startPolling() {
+  stopPolling()
+  pollTimer = setInterval(() => {
+    if (isLive.value) {
+      loadLogs(false)
+    }
+  }, 2500)
+}
+
+function stopPolling() {
+  if (pollTimer) {
+    clearInterval(pollTimer)
+    pollTimer = null
+  }
+}
+
+function toggleLive() {
+  isLive.value = !isLive.value
+  if (isLive.value) {
+    startPolling()
+  } else {
+    stopPolling()
+  }
+}
+
+function toggleAutoScroll() {
+  autoScroll.value = !autoScroll.value
+  if (autoScroll.value) {
+    scrollToBottom()
+  }
+}
+
+async function clearLogs() {
+  logs.value = []
+  expandedLogId.value = null
+  await $fetch("/_qarpeo/api/logs", { method: "DELETE" }).catch(() => {})
+}
+
+function copyAllLogs() {
+  const text = filteredLogs.value
+    .map(
+      (l) =>
+        `[${l.timestamp}] [${l.level.toUpperCase()}] [${l.source}] ${l.message} ${
+          l.durationMs ? `(${l.durationMs}ms)` : ""
+        }`,
+    )
+    .join("\n")
+  if (typeof navigator !== "undefined") {
+    navigator.clipboard?.writeText(text)
+  }
+}
+
+function copyEntry(log: LogEntry) {
+  const text = `[${log.timestamp}] [${log.level.toUpperCase()}] [${log.source}] ${log.message}`
+  if (typeof navigator !== "undefined") {
+    navigator.clipboard?.writeText(text)
+  }
+}
+
+function toggleExpand(id: string) {
+  expandedLogId.value = expandedLogId.value === id ? null : id
+}
+
+async function emitTestLog() {
+  const sources = ["qarpeo:router", "qarpeo:d1", "qarpeo:kv", "qarpeo:auth", "qarpeo:blob"]
+  const levels: Array<"info" | "warn" | "error"> = ["info", "info", "warn", "error"]
+  const randomSource = sources[Math.floor(Math.random() * sources.length)]
+  const randomLevel = levels[Math.floor(Math.random() * levels.length)]
+
+  const sampleMessages: Record<string, string[]> = {
+    "qarpeo:router": [
+      "GET /api/user - 200 OK (Edge Cache HIT)",
+      "POST /api/auth/login - 200 OK (Session Issued)",
+      "GET /images/banner.webp - 304 Not Modified",
+    ],
+    "qarpeo:d1": [
+      "Executed prepared statement: SELECT * FROM users WHERE active = 1 LIMIT 50",
+      "D1 transaction committed in 4.2ms",
+    ],
+    "qarpeo:kv": [
+      "KV Namespace get: key=cache:page_home (HIT)",
+      "KV Namespace put: key=rate_limit:ip_102 ttl=60",
+    ],
+    "qarpeo:auth": [
+      "WebAuthn Passkey verification completed successfully",
+      "Issued JWT session token for user usr_4982",
+    ],
+    "qarpeo:blob": [
+      "R2 object uploaded: uploads/photo.jpg (128 KB)",
+      "Presigned upload ticket generated for key: avatar.png",
+    ],
+  }
+
+  const msgs = sampleMessages[randomSource] || ["Standard edge runtime operation"]
+  const randomMsg = msgs[Math.floor(Math.random() * msgs.length)]
+  const durationMs = +(Math.random() * 8 + 0.5).toFixed(1)
+  const status = randomLevel === "error" ? 500 : randomLevel === "warn" ? 429 : 200
+
+  try {
+    const res = await $fetch<any>("/_qarpeo/api/logs", {
+      method: "POST",
+      body: {
+        level: randomLevel,
+        source: randomSource,
+        message: randomMsg,
+        durationMs,
+        status,
+      },
+    })
+    if (res?.log) {
+      logs.value.push(res.log)
+      scrollToBottom()
+      return
+    }
+  } catch {}
+
+  const newLog: LogEntry = {
+    id: `log_${Date.now()}_${Math.random().toString(36).substring(2, 6)}`,
+    timestamp: new Date().toISOString(),
+    level: randomLevel,
+    source: randomSource,
+    message: randomMsg,
+    durationMs,
+    status,
+  }
+
+  logs.value.push(newLog)
+  scrollToBottom()
+}
+
+onMounted(() => {
+  loadLogs(true)
+  if (isLive.value) {
+    startPolling()
+  }
+})
+
+onUnmounted(() => {
+  stopPolling()
+})
+</script>
+
+<template>
+  <UDashboardPanel id="devtools-logs" :ui="{ body: 'p-0 sm:p-0' }">
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div class="flex items-center gap-2.5">
+            <div class="relative flex items-center justify-center">
+              <UIcon name="i-lucide-terminal" class="w-4 h-4 text-primary" />
+              <span
+                class="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full"
+                :class="isLive ? 'bg-success animate-pulse' : 'bg-muted'"
+              ></span>
+            </div>
+            <span class="font-bold text-sm text-highlighted">Tail Logs</span>
+            <UBadge size="xs" :color="isLive ? 'success' : 'neutral'" variant="subtle">
+              {{ isLive ? "Live" : "Paused" }}
+            </UBadge>
+            <UBadge size="xs" color="neutral" variant="subtle">
+              {{ filteredLogs.length }}
+            </UBadge>
+          </div>
+        </template>
+
+        <template #right>
+          <div class="flex items-center gap-1.5">
+            <!-- Live Tail Toggle -->
+            <UButton
+              :label="isLive ? 'Live Tail' : 'Paused'"
+              :icon="isLive ? 'i-lucide-pause' : 'i-lucide-play'"
+              size="xs"
+              :color="isLive ? 'success' : 'neutral'"
+              :variant="isLive ? 'subtle' : 'ghost'"
+              title="Toggle Live Polling"
+              @click="toggleLive"
+            />
+
+            <!-- Auto Scroll Toggle -->
+            <UButton
+              icon="i-lucide-arrow-down-to-line"
+              size="xs"
+              :color="autoScroll ? 'primary' : 'neutral'"
+              :variant="autoScroll ? 'subtle' : 'ghost'"
+              title="Auto-scroll to latest"
+              @click="toggleAutoScroll"
+            />
+
+            <!-- Emit Test Log -->
+            <UButton
+              icon="i-lucide-plus"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Simulate / Emit test log"
+              @click="emitTestLog"
+            />
+
+            <!-- Copy All -->
+            <UButton
+              icon="i-lucide-copy"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Copy visible logs"
+              @click="copyAllLogs"
+            />
+
+            <!-- Clear -->
+            <UButton
+              icon="i-lucide-trash"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Clear logs"
+              @click="clearLogs"
+            />
+
+            <!-- Refresh -->
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Refresh logs"
+              :loading="logsLoading"
+              @click="loadLogs(true)"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+
+      <!-- Filter Toolbar -->
+      <UDashboardToolbar>
+        <div class="flex items-center justify-between w-full flex-wrap gap-2 py-1">
+          <!-- Log Level Filter Segmented Buttons -->
+          <div class="flex items-center gap-1 bg-muted p-0.5 rounded border border-default">
+            <UButton
+              label="All"
+              size="xs"
+              :color="logLevel === 'all' ? 'primary' : 'neutral'"
+              :variant="logLevel === 'all' ? 'subtle' : 'ghost'"
+              @click="logLevel = 'all'"
+            >
+              <template #trailing>
+                <UBadge
+                  size="xs"
+                  :color="logLevel === 'all' ? 'primary' : 'neutral'"
+                  variant="subtle"
+                >
+                  {{ counts.all }}
+                </UBadge>
+              </template>
+            </UButton>
+
+            <UButton
+              label="Info"
+              size="xs"
+              :color="logLevel === 'info' ? 'primary' : 'neutral'"
+              :variant="logLevel === 'info' ? 'subtle' : 'ghost'"
+              @click="logLevel = 'info'"
+            >
+              <template #trailing>
+                <UBadge
+                  size="xs"
+                  :color="logLevel === 'info' ? 'primary' : 'neutral'"
+                  variant="subtle"
+                >
+                  {{ counts.info }}
+                </UBadge>
+              </template>
+            </UButton>
+
+            <UButton
+              label="Warn"
+              size="xs"
+              :color="logLevel === 'warn' ? 'warning' : 'neutral'"
+              :variant="logLevel === 'warn' ? 'subtle' : 'ghost'"
+              @click="logLevel = 'warn'"
+            >
+              <template #trailing>
+                <UBadge
+                  size="xs"
+                  :color="logLevel === 'warn' ? 'warning' : 'neutral'"
+                  variant="subtle"
+                >
+                  {{ counts.warn }}
+                </UBadge>
+              </template>
+            </UButton>
+
+            <UButton
+              label="Error"
+              size="xs"
+              :color="logLevel === 'error' ? 'error' : 'neutral'"
+              :variant="logLevel === 'error' ? 'subtle' : 'ghost'"
+              @click="logLevel = 'error'"
+            >
+              <template #trailing>
+                <UBadge
+                  size="xs"
+                  :color="logLevel === 'error' ? 'error' : 'neutral'"
+                  variant="subtle"
+                >
+                  {{ counts.error }}
+                </UBadge>
+              </template>
+            </UButton>
+          </div>
+
+          <!-- Search & Source Filter -->
+          <div class="flex items-center gap-2 flex-1 max-w-lg">
+            <USelect
+              v-model="selectedSource"
+              :items="availableSources"
+              size="xs"
+              class="w-36 shrink-0"
+            />
+            <UInput
+              v-model="logSearch"
+              icon="i-lucide-search"
+              placeholder="Search log messages, sources, status codes…"
+              class="w-full"
+            />
+          </div>
+        </div>
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col h-full overflow-hidden p-4 space-y-2">
+        <!-- Terminal Logs Window -->
+        <div
+          ref="logContainerRef"
+          class="flex-1 min-h-0 bg-slate-950 text-slate-100 border border-slate-800 rounded-lg p-3 overflow-y-auto font-mono text-xs select-text shadow-inner space-y-1"
+        >
+          <!-- Skeleton: Initial Loading -->
+          <template v-if="initialLoading">
+            <div
+              v-for="i in 12"
+              :key="`skel-${i}`"
+              class="flex items-center gap-2.5 py-1 px-1.5 animate-pulse"
+            >
+              <!-- chevron placeholder -->
+              <div class="w-3.5 h-3.5 rounded bg-slate-800 shrink-0" />
+              <!-- timestamp -->
+              <div class="w-14 h-3 rounded bg-slate-800 shrink-0" />
+              <!-- level badge -->
+              <div class="w-10 h-4 rounded bg-slate-800 shrink-0" />
+              <!-- source tag -->
+              <div class="w-24 h-3 rounded bg-slate-800 shrink-0" />
+              <!-- message bar (varying widths) -->
+              <div
+                class="h-3 rounded bg-slate-800 flex-1"
+                :style="{ width: `${40 + ((i * 13) % 50)}%` }"
+              />
+              <!-- duration -->
+              <div class="w-8 h-3 rounded bg-slate-800 shrink-0" />
+            </div>
+          </template>
+          <div
+            v-if="!initialLoading"
+            v-for="log in filteredLogs"
+            :key="log.id"
+            class="group rounded transition-colors"
+            :class="
+              expandedLogId === log.id
+                ? 'bg-slate-900 border border-slate-800 p-2 my-1'
+                : 'hover:bg-slate-900/70 py-1 px-1.5'
+            "
+          >
+            <!-- Log Main Line -->
+            <div class="flex items-start gap-2.5 leading-relaxed">
+              <!-- Expand toggle -->
+              <UButton
+                type="button"
+                :icon="
+                  expandedLogId === log.id ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'
+                "
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                title="Toggle details"
+                class="text-slate-500 hover:text-slate-300 mt-0.5 shrink-0"
+                @click="toggleExpand(log.id)"
+              />
+
+              <!-- Timestamp -->
+              <span
+                class="text-slate-400 text-[11px] whitespace-nowrap select-none"
+                :title="fmtFullDate(log.timestamp)"
+              >
+                {{ fmtTime(log.timestamp) }}
+              </span>
+
+              <!-- Level Badge -->
+              <UBadge
+                size="xs"
+                :color="getLogLevelBadgeColor(log.level)"
+                variant="subtle"
+                class="uppercase text-[9px] px-1.5 py-0 select-none shrink-0"
+              >
+                {{ log.level }}
+              </UBadge>
+
+              <!-- Source Tag -->
+              <span class="text-sky-400 font-semibold shrink-0 select-none"
+                >[{{ log.source }}]</span
+              >
+
+              <!-- Status Code Badge (if present) -->
+              <UBadge
+                v-if="log.status"
+                size="xs"
+                :color="getStatusBadgeColor(log.status)"
+                variant="subtle"
+                class="font-mono text-[10px] px-1 py-0 select-none shrink-0"
+              >
+                {{ log.status }}
+              </UBadge>
+
+              <!-- Message -->
+              <span class="text-slate-200 flex-1 break-words">{{ log.message }}</span>
+
+              <!-- Duration -->
+              <span
+                v-if="log.durationMs"
+                class="text-slate-400 text-[11px] select-none shrink-0 whitespace-nowrap"
+              >
+                {{ log.durationMs }}ms
+              </span>
+
+              <!-- Hover Copy Button -->
+              <UButton
+                type="button"
+                icon="i-lucide-copy"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                title="Copy log entry"
+                class="opacity-0 group-hover:opacity-100 transition-opacity text-slate-400 hover:text-slate-200 shrink-0"
+                @click="copyEntry(log)"
+              />
+            </div>
+
+            <!-- Expanded Details Drawer -->
+            <div
+              v-if="expandedLogId === log.id"
+              class="mt-2 pt-2 border-t border-slate-800 text-[11px] text-slate-300 space-y-2 pl-6"
+            >
+              <div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-slate-400">
+                <div>
+                  ID: <span class="text-slate-200">{{ log.id }}</span>
+                </div>
+                <div>
+                  Time:
+                  <span class="text-slate-200">{{ fmtFullDate(log.timestamp) }}</span>
+                </div>
+                <div>
+                  Source: <span class="text-sky-400">{{ log.source }}</span>
+                </div>
+                <div>
+                  Duration:
+                  <span class="text-slate-200">{{ log.durationMs ?? 0 }} ms</span>
+                </div>
+              </div>
+
+              <div>
+                <div class="text-slate-400 mb-1">Raw JSON:</div>
+                <pre
+                  class="bg-slate-950 p-2.5 rounded border border-slate-800 text-[11px] text-slate-300 overflow-x-auto whitespace-pre-wrap break-all"
+                  >{{ JSON.stringify(log, null, 2) }}</pre>
+              </div>
+            </div>
+          </div>
+
+          <!-- Empty State -->
+          <div
+            v-if="!initialLoading && !filteredLogs.length && !logsLoading"
+            class="text-center py-16 text-slate-400 text-xs space-y-3"
+          >
+            <UIcon name="i-lucide-terminal" class="w-8 h-8 opacity-40 mx-auto" />
+            <div>No logs found matching current filter.</div>
+            <UButton
+              label="Simulate Log Event"
+              icon="i-lucide-plus"
+              size="xs"
+              color="neutral"
+              variant="subtle"
+              @click="emitTestLog"
+            />
+          </div>
+        </div>
+
+        <!-- Terminal Status Bar -->
+        <div
+          class="flex items-center justify-between px-3 py-1.5 bg-muted/40 border border-default rounded text-[11px] text-muted font-mono"
+        >
+          <div class="flex items-center gap-4">
+            <span class="flex items-center gap-1.5">
+              <span
+                class="w-1.5 h-1.5 rounded-full"
+                :class="isLive ? 'bg-success' : 'bg-muted'"
+              ></span>
+              {{ isLive ? "Live Stream: Active" : "Live Stream: Paused" }}
+            </span>
+            <span>Total: {{ logs.length }}</span>
+            <span class="text-error">Errors: {{ counts.error }}</span>
+            <span class="text-warning">Warnings: {{ counts.warn }}</span>
+          </div>
+
+          <div class="flex items-center gap-3">
+            <span>Auto-Scroll: {{ autoScroll ? "ON" : "OFF" }}</span>
+            <span>Polling: 2.5s</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>