qarpeo 0.0.0-alpha.10

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

@@ -0,0 +1,390 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue"
+
+definePageMeta({ layout: false })
+
+const {
+  data: overviewData,
+  status: overviewStatus,
+  pending: overviewPending,
+  execute: executeLoadOverview,
+} = useFetch<any>("/_qarpeo/api/overview", {
+  immediate: false,
+  lazy: true,
+})
+
+const overviewLoading = computed(
+  () =>
+    overviewPending.value || overviewStatus.value === "idle" || overviewStatus.value === "pending",
+)
+const overview = computed(() => overviewData.value)
+
+const checkingHealth = ref(false)
+const healthResults = ref<Record<string, { ok: boolean; latencyMs: number; error?: string }>>({})
+
+async function loadOverview() {
+  await executeLoadOverview()
+}
+
+async function runHealthCheck() {
+  checkingHealth.value = true
+  try {
+    const res = await $fetch<any>("/_qarpeo/api/overview/health").catch(() => null)
+    if (res?.health) {
+      healthResults.value = res.health
+    } else {
+      // Dev mock response
+      healthResults.value = {
+        d1: { ok: true, latencyMs: 2.1 },
+        kv: { ok: true, latencyMs: 1.4 },
+        r2: { ok: true, latencyMs: 3.8 },
+      }
+    }
+  } finally {
+    checkingHealth.value = false
+  }
+}
+
+const route = useRoute()
+const basePath = computed(() => {
+  if (route.path.startsWith("/_qarpeo/devtools")) {
+    return "/_qarpeo/devtools"
+  }
+  return "/devtools"
+})
+
+const primitives = computed(() => [
+  {
+    id: "db",
+    name: "D1 Database",
+    icon: "i-lucide-database",
+    desc: "Serverless SQLite at the edge",
+    bindingKey: "d1",
+    to: `${basePath.value}/db`,
+  },
+  {
+    id: "kv",
+    name: "KV Store",
+    icon: "i-lucide-zap",
+    desc: "Global low-latency key-value storage",
+    bindingKey: "kv",
+    to: `${basePath.value}/kv`,
+  },
+  {
+    id: "blob",
+    name: "Blob Storage",
+    icon: "i-lucide-box",
+    desc: "S3-compatible R2 object storage",
+    bindingKey: "r2",
+    to: `${basePath.value}/blob`,
+  },
+  {
+    id: "domains",
+    name: "Domains & Tenants",
+    icon: "i-lucide-globe",
+    desc: "Custom hostnames & Cloudflare SSL",
+    bindingKey: null,
+    to: `${basePath.value}/domains`,
+  },
+  {
+    id: "mail",
+    name: "Dev Mailbox",
+    icon: "i-lucide-mail",
+    desc: "Captured transactional emails",
+    bindingKey: null,
+    to: `${basePath.value}/mail`,
+  },
+  {
+    id: "agents",
+    name: "Edge Agents",
+    icon: "i-lucide-bot",
+    desc: "Stateful Durable Object AI agents",
+    bindingKey: "agents",
+    to: `${basePath.value}/agents`,
+  },
+  {
+    id: "analytics",
+    name: "Edge Analytics",
+    icon: "i-lucide-bar-chart-3",
+    desc: "Zero-cookie analytics engine",
+    bindingKey: "analytics",
+    to: `${basePath.value}/analytics`,
+  },
+  {
+    id: "logs",
+    name: "Tail Logs",
+    icon: "i-lucide-terminal",
+    desc: "Live worker execution logs",
+    bindingKey: null,
+    to: `${basePath.value}/logs`,
+  },
+  {
+    id: "cms",
+    name: "CMS",
+    icon: "i-lucide-file-text",
+    desc: "Git-backed content management",
+    bindingKey: null,
+    to: "/cms",
+  },
+])
+
+onMounted(async () => {
+  await loadOverview()
+  runHealthCheck()
+})
+</script>
+
+<template>
+  <UDashboardPanel id="devtools-overview">
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div class="flex items-center gap-2.5">
+            <UIcon name="i-lucide-layout-dashboard" class="w-4 h-4 text-primary" />
+            <span class="font-bold text-sm text-highlighted">System Overview</span>
+            <UBadge size="xs" color="primary" variant="subtle">Cloudflare Edge</UBadge>
+            <UBadge
+              v-if="overview?.environment"
+              size="xs"
+              :color="overview.environment === 'production' ? 'success' : 'neutral'"
+              variant="subtle"
+            >
+              {{ overview.environment }}
+            </UBadge>
+          </div>
+        </template>
+
+        <template #right>
+          <div class="flex items-center gap-2">
+            <UButton
+              label="Run Health Diagnostics"
+              icon="i-lucide-stethoscope"
+              size="xs"
+              color="primary"
+              variant="subtle"
+              :loading="checkingHealth"
+              @click="runHealthCheck"
+            />
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Refresh overview"
+              :loading="overviewLoading"
+              @click="loadOverview"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <!-- ── Top System Runtime KPI Cards ────────────────────────────── -->
+      <div v-if="overviewLoading" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <UCard v-for="i in 4" :key="i">
+          <div class="h-3 w-20 rounded bg-muted animate-pulse mb-2"></div>
+          <div class="h-6 w-32 rounded bg-muted animate-pulse mb-1"></div>
+          <div class="h-2 w-24 rounded bg-muted animate-pulse"></div>
+        </UCard>
+      </div>
+
+      <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <UCard>
+          <div class="text-xs text-muted">Platform Runtime</div>
+          <div class="text-base font-bold mt-1 text-highlighted">
+            {{ overview?.engine || "Nuxt 5 + Cloudflare Workers" }}
+          </div>
+          <div class="text-[11px] text-muted mt-0.5">Zero-config edge deployment</div>
+        </UCard>
+
+        <UCard>
+          <div class="text-xs text-muted">Environment</div>
+          <div class="text-base font-bold mt-1 text-success flex items-center gap-2">
+            <span class="w-2 h-2 rounded-full bg-success"></span>
+            {{ overview?.environment || "development" }}
+          </div>
+          <div class="text-[11px] text-muted mt-0.5">Local Miniflare / Workerd</div>
+        </UCard>
+
+        <UCard>
+          <div class="text-xs text-muted">Core Module Version</div>
+          <div class="text-base font-bold mt-1 font-mono text-primary">
+            v{{ overview?.version || "0.0.1" }}
+          </div>
+          <div class="text-[11px] text-muted mt-0.5">Compatibility: 2025-02-01</div>
+        </UCard>
+
+        <UCard>
+          <div class="text-xs text-muted">Edge Health</div>
+          <div class="text-base font-bold mt-1 text-success flex items-center gap-1.5">
+            <UIcon name="i-lucide-check-circle-2" class="w-4 h-4 text-success" />
+            <span>All Systems Nominal</span>
+          </div>
+          <div class="text-[11px] text-muted mt-0.5">D1, KV, and R2 connected</div>
+        </UCard>
+      </div>
+
+      <!-- ── Cloudflare Primitives & Tools Grid ─────────────────────── -->
+      <div>
+        <div class="flex items-center justify-between mb-3">
+          <span
+            class="text-xs font-semibold uppercase tracking-wider text-muted flex items-center gap-1.5"
+          >
+            <UIcon name="i-lucide-boxes" class="w-4 h-4 text-primary" />
+            Cloudflare Edge Primitives & Tools
+          </span>
+          <span class="text-xs text-muted font-mono">
+            {{ primitives.length }} tools available
+          </span>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <UCard
+            v-for="p in primitives"
+            :key="p.id"
+            class="hover:border-primary/40 transition-all flex flex-col justify-between"
+          >
+            <div class="space-y-2">
+              <div class="flex items-center justify-between">
+                <div
+                  class="w-8 h-8 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center text-primary"
+                >
+                  <UIcon :name="p.icon" class="w-4.5 h-4.5" />
+                </div>
+
+                <!-- Health / Status Badge -->
+                <div v-if="p.bindingKey && healthResults[p.bindingKey]">
+                  <UBadge
+                    size="xs"
+                    :color="healthResults[p.bindingKey].ok ? 'success' : 'error'"
+                    variant="subtle"
+                    class="font-mono"
+                  >
+                    {{
+                      healthResults[p.bindingKey].ok
+                        ? `${healthResults[p.bindingKey].latencyMs}ms`
+                        : "ERR"
+                    }}
+                  </UBadge>
+                </div>
+                <UBadge v-else size="xs" color="neutral" variant="subtle"> Active </UBadge>
+              </div>
+
+              <div>
+                <div class="font-bold text-sm text-highlighted">
+                  {{ p.name }}
+                </div>
+                <div class="text-xs text-muted mt-0.5 line-clamp-1">
+                  {{ p.desc }}
+                </div>
+              </div>
+
+              <div
+                v-if="p.bindingKey && overview?.bindings?.[p.bindingKey]"
+                class="text-[11px] font-mono text-muted"
+              >
+                Binding:
+                <span class="text-primary font-semibold">{{
+                  overview.bindings[p.bindingKey]
+                }}</span>
+              </div>
+            </div>
+
+            <div class="pt-4 mt-2 border-t border-default/50">
+              <UButton
+                :to="p.to"
+                label="Open Tool"
+                trailing-icon="i-lucide-arrow-right"
+                size="xs"
+                color="neutral"
+                variant="subtle"
+                class="w-full justify-between"
+              />
+            </div>
+          </UCard>
+        </div>
+      </div>
+
+      <!-- ── Configured Modules Matrix ──────────────────────────────── -->
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <span class="font-bold text-sm text-highlighted flex items-center gap-2">
+              <UIcon name="i-lucide-cpu" class="w-4 h-4 text-primary" />
+              Configured Features Matrix
+            </span>
+            <span class="text-xs text-muted font-mono"> Tier 1 & Tier 2 Solutions </span>
+          </div>
+        </template>
+
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
+          <div
+            v-for="[name, enabled] in Object.entries(overview?.modules || {})"
+            :key="name"
+            class="flex items-center gap-2 p-2.5 rounded-md border border-default bg-muted/20"
+          >
+            <span
+              class="w-2 h-2 rounded-full shrink-0"
+              :class="enabled ? 'bg-success' : 'bg-muted'"
+            ></span>
+            <span class="font-mono text-xs font-semibold capitalize text-default truncate">
+              {{ name }}
+            </span>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- ── Worker Bindings Inspection Table ───────────────────────── -->
+      <UCard :ui="{ body: 'p-0 overflow-hidden' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <span class="font-bold text-sm text-highlighted flex items-center gap-2">
+              <UIcon name="i-lucide-cable" class="w-4 h-4 text-primary" />
+              Environment Bindings
+            </span>
+            <span class="text-xs text-muted font-mono"> wrangler.json / runtimeConfig </span>
+          </div>
+        </template>
+
+        <table class="w-full text-left text-xs">
+          <thead>
+            <tr class="border-b border-default bg-muted/40 text-muted font-mono">
+              <th class="py-2.5 px-4 font-semibold">Primitive Type</th>
+              <th class="py-2.5 px-4 font-semibold">Environment Variable</th>
+              <th class="py-2.5 px-4 font-semibold">Diagnostic Latency</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-default font-mono">
+            <tr
+              v-for="[prim, varName] in Object.entries(overview?.bindings || {})"
+              :key="prim"
+              class="hover:bg-elevated/50 transition-colors"
+            >
+              <td class="py-2.5 px-4 text-primary font-bold uppercase">
+                {{ prim }}
+              </td>
+              <td class="py-2.5 px-4 text-default">
+                {{ varName }}
+              </td>
+              <td class="py-2.5 px-4">
+                <span
+                  v-if="healthResults[prim]"
+                  class="text-xs"
+                  :class="healthResults[prim].ok ? 'text-success' : 'text-error'"
+                >
+                  {{
+                    healthResults[prim].ok
+                      ? `${healthResults[prim].latencyMs} ms`
+                      : healthResults[prim].error
+                  }}
+                </span>
+                <span v-else class="text-muted text-[11px]">—</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </UCard>
+    </template>
+  </UDashboardPanel>
+</template>