qarpeo 0.0.0-alpha.10

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

@@ -0,0 +1,560 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue"
+
+definePageMeta({ layout: false })
+
+const {
+  data: settingsData,
+  status: settingsStatus,
+  pending: settingsPending,
+  execute: executeLoadSettings,
+} = useFetch<any>("/_qarpeo/api/settings", {
+  immediate: false,
+  lazy: true,
+  default: () => ({
+    system: {},
+    bindings: {},
+    modules: {},
+    devSandbox: {},
+    securityGateway: {},
+  }),
+})
+
+const loading = computed(
+  () =>
+    settingsPending.value || settingsStatus.value === "idle" || settingsStatus.value === "pending",
+)
+
+const activeTab = ref<"bindings" | "modules" | "sandbox" | "security">("bindings")
+
+const system = computed(() => settingsData.value?.system || {})
+const bindings = computed(() => settingsData.value?.bindings || {})
+const modules = computed(() => settingsData.value?.modules || {})
+const devSandbox = computed(() => settingsData.value?.devSandbox || {})
+const security = computed(() => settingsData.value?.securityGateway || {})
+
+// Reset dev sandbox state
+const resetting = ref(false)
+const showResetModal = ref(false)
+const resetTarget = ref<"all" | "kv" | "blob">("all")
+const resetSuccessMessage = ref("")
+
+async function loadSettings() {
+  await executeLoadSettings()
+}
+
+async function handleResetData() {
+  resetting.value = true
+  try {
+    const res = await $fetch<any>("/_qarpeo/api/settings/reset-dev-data", {
+      method: "POST",
+      body: { target: resetTarget.value },
+    })
+    resetSuccessMessage.value = res.message || "Dev sandbox reset successfully."
+    showResetModal.value = false
+    await loadSettings()
+    setTimeout(() => {
+      resetSuccessMessage.value = ""
+    }, 4000)
+  } catch (err: any) {
+    console.error("Failed to reset sandbox:", err)
+  } finally {
+    resetting.value = false
+  }
+}
+
+function openResetModal(target: "all" | "kv" | "blob") {
+  resetTarget.value = target
+  showResetModal.value = true
+}
+
+onMounted(() => {
+  loadSettings()
+})
+</script>
+
+<template>
+  <UDashboardPanel id="devtools-settings">
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-settings" class="w-4 h-4 text-primary" />
+            <span class="font-bold text-sm text-highlighted">DevTools Settings & Runtime</span>
+            <UBadge size="xs" color="neutral" variant="subtle">Diagnostics</UBadge>
+          </div>
+        </template>
+
+        <template #right>
+          <div class="flex items-center gap-1.5">
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Refresh settings"
+              :loading="loading"
+              @click="loadSettings"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+
+      <!-- Subheader Category Tabs -->
+      <UDashboardToolbar>
+        <div class="flex items-center gap-1 bg-muted p-0.5 rounded border border-default">
+          <UButton
+            label="Edge Bindings"
+            icon="i-lucide-cpu"
+            size="xs"
+            :color="activeTab === 'bindings' ? 'primary' : 'neutral'"
+            :variant="activeTab === 'bindings' ? 'subtle' : 'ghost'"
+            @click="activeTab = 'bindings'"
+          />
+          <UButton
+            label="Modules & Tiers"
+            icon="i-lucide-layers"
+            size="xs"
+            :color="activeTab === 'modules' ? 'primary' : 'neutral'"
+            :variant="activeTab === 'modules' ? 'subtle' : 'ghost'"
+            @click="activeTab = 'modules'"
+          />
+          <UButton
+            label="Dev Sandbox"
+            icon="i-lucide-flask-conical"
+            size="xs"
+            :color="activeTab === 'sandbox' ? 'primary' : 'neutral'"
+            :variant="activeTab === 'sandbox' ? 'subtle' : 'ghost'"
+            @click="activeTab = 'sandbox'"
+          >
+            <template #trailing>
+              <UBadge
+                size="xs"
+                :color="activeTab === 'sandbox' ? 'primary' : 'neutral'"
+                variant="subtle"
+              >
+                Mock
+              </UBadge>
+            </template>
+          </UButton>
+          <UButton
+            label="Security & Gateway"
+            icon="i-lucide-shield-check"
+            size="xs"
+            :color="activeTab === 'security' ? 'primary' : 'neutral'"
+            :variant="activeTab === 'security' ? 'subtle' : 'ghost'"
+            @click="activeTab = 'security'"
+          />
+        </div>
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <!-- Success Toast / Notification Banner -->
+      <div
+        v-if="resetSuccessMessage"
+        class="bg-success/10 border border-success/30 text-success rounded-lg p-3 text-xs flex items-center justify-between mb-4"
+      >
+        <div class="flex items-center gap-2">
+          <UIcon name="i-lucide-check-circle" class="w-4 h-4 shrink-0" />
+          <span>{{ resetSuccessMessage }}</span>
+        </div>
+        <UButton color="success" variant="ghost" size="xs" @click="resetSuccessMessage = ''">
+          Dismiss
+        </UButton>
+      </div>
+
+      <!-- Loading Skeleton State -->
+      <div v-if="loading" class="space-y-6">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div
+            v-for="i in 4"
+            :key="i"
+            class="bg-elevated/40 border border-default rounded-xl p-4 h-24 animate-pulse flex flex-col justify-between"
+          >
+            <div class="h-3 w-1/2 bg-muted rounded"></div>
+            <div class="h-6 w-3/4 bg-muted rounded"></div>
+          </div>
+        </div>
+        <div class="border border-default rounded-xl p-6 h-64 bg-elevated/40 animate-pulse"></div>
+      </div>
+
+      <div v-else class="space-y-6">
+        <!-- ── System Overview KPI Cards ──────────────────────────────── -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3.5">
+          <div
+            class="bg-elevated/40 border border-default rounded-xl p-4 flex flex-col justify-between shadow-xs"
+          >
+            <div class="flex items-center justify-between text-muted text-xs">
+              <span>Environment</span>
+              <UIcon name="i-lucide-globe" class="w-4 h-4 text-primary" />
+            </div>
+            <div class="mt-2 flex items-center gap-2">
+              <span class="text-base font-bold text-highlighted capitalize">{{
+                system.environment
+              }}</span>
+              <UBadge :color="system.devMode ? 'warning' : 'success'" variant="subtle" size="xs">
+                {{ system.devMode ? "Dev Mode" : "Production" }}
+              </UBadge>
+            </div>
+            <div class="text-[11px] text-muted mt-1 font-mono">Node {{ system.nodeVersion }}</div>
+          </div>
+
+          <div
+            class="bg-elevated/40 border border-default rounded-xl p-4 flex flex-col justify-between shadow-xs"
+          >
+            <div class="flex items-center justify-between text-muted text-xs">
+              <span>Runtime Engine</span>
+              <UIcon name="i-lucide-server" class="w-4 h-4 text-primary" />
+            </div>
+            <div class="mt-2 text-base font-bold text-highlighted">Cloudflare Edge</div>
+            <div class="text-[11px] text-muted mt-1 font-mono truncate">Nuxt 5 + Nitro Engine</div>
+          </div>
+
+          <div
+            class="bg-elevated/40 border border-default rounded-xl p-4 flex flex-col justify-between shadow-xs"
+          >
+            <div class="flex items-center justify-between text-muted text-xs">
+              <span>Framework Version</span>
+              <UIcon name="i-lucide-tag" class="w-4 h-4 text-primary" />
+            </div>
+            <div class="mt-2 text-base font-bold text-highlighted font-mono">
+              v{{ system.version }}
+            </div>
+            <div class="text-[11px] text-muted mt-1">@qarpeo/core</div>
+          </div>
+
+          <div
+            class="bg-elevated/40 border border-default rounded-xl p-4 flex flex-col justify-between shadow-xs"
+          >
+            <div class="flex items-center justify-between text-muted text-xs">
+              <span>Dev Mock Sandbox</span>
+              <UIcon name="i-lucide-flask-conical" class="w-4 h-4 text-primary" />
+            </div>
+            <div class="mt-2 flex items-center gap-2">
+              <span class="text-base font-bold text-highlighted">
+                {{ devSandbox.kvItems }} KV / {{ devSandbox.blobFiles }} Blob
+              </span>
+            </div>
+            <div class="text-[11px] text-muted mt-1">In-Memory Active</div>
+          </div>
+        </div>
+
+        <!-- ── TAB 1: EDGE BINDINGS ───────────────────────────────────── -->
+        <div v-if="activeTab === 'bindings'" class="space-y-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <h3 class="text-sm font-bold text-highlighted">Cloudflare Edge Bindings</h3>
+              <p class="text-xs text-muted">
+                Runtime infrastructure bindings attached to Cloudflare Workers and Nitro context.
+              </p>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3.5">
+            <div
+              v-for="(binding, key) in bindings"
+              :key="key"
+              class="bg-elevated/40 border border-default rounded-xl p-4 flex flex-col justify-between space-y-3"
+            >
+              <div class="flex items-start justify-between">
+                <div class="flex items-center gap-2.5">
+                  <div
+                    class="w-8 h-8 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center text-primary shrink-0"
+                  >
+                    <UIcon
+                      :name="
+                        key === 'db'
+                          ? 'i-lucide-database'
+                          : key === 'kv'
+                            ? 'i-lucide-zap'
+                            : key === 'blob'
+                              ? 'i-lucide-box'
+                              : key === 'agents'
+                                ? 'i-lucide-bot'
+                                : key === 'analytics'
+                                  ? 'i-lucide-bar-chart'
+                                  : 'i-lucide-cpu'
+                      "
+                      class="w-4 h-4"
+                    />
+                  </div>
+                  <div>
+                    <div class="text-xs font-bold text-highlighted uppercase tracking-wide">
+                      {{ key }}
+                    </div>
+                    <div class="text-[11px] text-muted">{{ binding.type }}</div>
+                  </div>
+                </div>
+
+                <UBadge size="xs" :color="binding.enabled ? 'success' : 'neutral'" variant="subtle">
+                  {{ binding.enabled ? "Configured" : "Disabled" }}
+                </UBadge>
+              </div>
+
+              <div class="divide-y divide-default/50 text-xs font-mono pt-1">
+                <div class="flex justify-between py-1.5">
+                  <span class="text-muted">Binding Name</span>
+                  <span class="text-highlighted font-bold">{{ binding.name }}</span>
+                </div>
+                <div class="flex justify-between py-1.5">
+                  <span class="text-muted">Dev Fallback</span>
+                  <span class="text-default">In-Memory Mock</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ── TAB 2: MODULES & TIERS ─────────────────────────────────── -->
+        <div v-else-if="activeTab === 'modules'" class="space-y-4">
+          <div>
+            <h3 class="text-sm font-bold text-highlighted">Active Framework Modules</h3>
+            <p class="text-xs text-muted">
+              Tier 1 infrastructure primitives and Tier 2 integrated business solutions.
+            </p>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3.5">
+            <div
+              v-for="(mod, key) in modules"
+              :key="key"
+              class="bg-elevated/40 border border-default rounded-xl p-4 flex flex-col justify-between space-y-2"
+            >
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                  <UIcon name="i-lucide-check-circle" class="w-4 h-4 text-primary" />
+                  <span class="text-xs font-bold text-highlighted">{{ mod.label }}</span>
+                </div>
+                <UBadge size="xs" :color="mod.enabled ? 'primary' : 'neutral'" variant="subtle">
+                  {{ mod.enabled ? "Enabled" : "Optional" }}
+                </UBadge>
+              </div>
+
+              <p class="text-xs text-muted leading-relaxed">
+                {{ mod.description }}
+              </p>
+
+              <div
+                v-if="key === 'multitenant' && mod.enabled"
+                class="pt-2 text-[11px] font-mono text-muted space-y-0.5"
+              >
+                <div>
+                  Root: <span class="text-highlighted">{{ mod.rootDomains?.join(", ") }}</span>
+                </div>
+                <div>
+                  Custom Domains:
+                  <span class="text-highlighted">{{ mod.customDomains ? "Active" : "Off" }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ── TAB 3: DEV SANDBOX MANAGEMENT ──────────────────────────── -->
+        <div v-else-if="activeTab === 'sandbox'" class="space-y-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <h3 class="text-sm font-bold text-highlighted">Development Mock Sandbox</h3>
+              <p class="text-xs text-muted">
+                Manage and reset temporary in-memory mock data across DevTools panels.
+              </p>
+            </div>
+            <UButton
+              label="Reset All Sandbox Data"
+              icon="i-lucide-rotate-ccw"
+              color="error"
+              size="xs"
+              variant="subtle"
+              @click="openResetModal('all')"
+            />
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <!-- KV Sandbox Card -->
+            <div
+              class="bg-elevated/40 border border-default rounded-xl p-4 flex flex-col justify-between space-y-4"
+            >
+              <div class="flex items-start justify-between">
+                <div class="flex items-center gap-2">
+                  <UIcon name="i-lucide-zap" class="w-5 h-5 text-primary" />
+                  <div>
+                    <div class="text-xs font-bold text-highlighted">KV Store Sandbox</div>
+                    <div class="text-[11px] text-muted">
+                      {{ devSandbox.kvItems }} keys currently stored
+                    </div>
+                  </div>
+                </div>
+                <UBadge size="xs" color="neutral" variant="subtle">In-Memory</UBadge>
+              </div>
+              <p class="text-xs text-muted">
+                Stores mock session tokens, cache tags, rate limit windows, and domain mapping
+                records.
+              </p>
+              <div class="flex justify-end pt-2">
+                <UButton
+                  label="Reset KV Store"
+                  size="xs"
+                  color="neutral"
+                  variant="subtle"
+                  icon="i-lucide-rotate-ccw"
+                  @click="openResetModal('kv')"
+                />
+              </div>
+            </div>
+
+            <!-- Blob Sandbox Card -->
+            <div
+              class="bg-elevated/40 border border-default rounded-xl p-4 flex flex-col justify-between space-y-4"
+            >
+              <div class="flex items-start justify-between">
+                <div class="flex items-center gap-2">
+                  <UIcon name="i-lucide-box" class="w-5 h-5 text-primary" />
+                  <div>
+                    <div class="text-xs font-bold text-highlighted">Blob / R2 Sandbox</div>
+                    <div class="text-[11px] text-muted">
+                      {{ devSandbox.blobFiles }} files uploaded
+                    </div>
+                  </div>
+                </div>
+                <UBadge size="xs" color="neutral" variant="subtle">In-Memory</UBadge>
+              </div>
+              <p class="text-xs text-muted">
+                Stores uploaded mock avatars, documents, and media buffers with live serve
+                endpoints.
+              </p>
+              <div class="flex justify-end pt-2">
+                <UButton
+                  label="Reset Blob Store"
+                  size="xs"
+                  color="neutral"
+                  variant="subtle"
+                  icon="i-lucide-rotate-ccw"
+                  @click="openResetModal('blob')"
+                />
+              </div>
+            </div>
+
+            <!-- Tenants Sandbox Card -->
+            <div
+              class="bg-elevated/40 border border-default rounded-xl p-4 flex flex-col justify-between space-y-4"
+            >
+              <div class="flex items-start justify-between">
+                <div class="flex items-center gap-2">
+                  <UIcon name="i-lucide-globe" class="w-5 h-5 text-primary" />
+                  <div>
+                    <div class="text-xs font-bold text-highlighted">Tenants & Domains</div>
+                    <div class="text-[11px] text-muted">
+                      {{ devSandbox.tenantsCount }} organizations registered
+                    </div>
+                  </div>
+                </div>
+                <UBadge size="xs" color="neutral" variant="subtle">In-Memory</UBadge>
+              </div>
+              <p class="text-xs text-muted">
+                Simulates multi-tenant organization directories, subdomains, and CNAME custom
+                hostnames.
+              </p>
+              <div class="flex justify-end pt-2">
+                <UButton
+                  label="Manage Tenants"
+                  size="xs"
+                  color="neutral"
+                  variant="subtle"
+                  to="/devtools/domains"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ── TAB 4: SECURITY GATEWAY ────────────────────────────────── -->
+        <div v-else-if="activeTab === 'security'" class="space-y-4">
+          <div>
+            <h3 class="text-sm font-bold text-highlighted">DevTools Security Gateway</h3>
+            <p class="text-xs text-muted">
+              Access control policies safeguarding DevTools endpoints from unauthorized external
+              access.
+            </p>
+          </div>
+
+          <div class="bg-elevated/40 border border-default rounded-xl p-5 space-y-4 max-w-2xl">
+            <div class="divide-y divide-default text-xs">
+              <div class="flex items-center justify-between py-3">
+                <div>
+                  <div class="font-bold text-highlighted">Authentication Required</div>
+                  <div class="text-muted text-[11px]">
+                    Enforce Bearer token verification on /_qarpeo/api/* endpoints
+                  </div>
+                </div>
+                <UBadge :color="security.tokenRequired ? 'warning' : 'success'" variant="subtle">
+                  {{ security.tokenRequired ? "Token Enforced" : "Local Dev Open" }}
+                </UBadge>
+              </div>
+
+              <div class="flex items-center justify-between py-3">
+                <div>
+                  <div class="font-bold text-highlighted">Allowed Local IP Addresses</div>
+                  <div class="text-muted text-[11px]">
+                    Whitelisted loopback addresses for embedded DevTools dock
+                  </div>
+                </div>
+                <div class="font-mono text-[11px] text-default">
+                  {{ security.allowedIps?.join(", ") || "127.0.0.1, ::1" }}
+                </div>
+              </div>
+
+              <div class="flex items-center justify-between py-3">
+                <div>
+                  <div class="font-bold text-highlighted">Nuxt DevTools Dock Path</div>
+                  <div class="text-muted text-[11px]">
+                    Embedded iframe mount path inside Nuxt DevTools
+                  </div>
+                </div>
+                <div class="font-mono text-[11px] text-primary">
+                  {{ security.dockRoute || "/_qarpeo/devtools" }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UDashboardPanel>
+
+  <!-- Reset Dev Data Confirmation Modal -->
+  <UModal v-model:open="showResetModal" title="Reset Dev Sandbox">
+    <template #body>
+      <div class="space-y-3">
+        <p class="text-xs text-default">
+          Are you sure you want to reset
+          <span class="font-bold text-highlighted uppercase">{{ resetTarget }}</span>
+          in-memory sandbox data?
+        </p>
+        <p class="text-xs text-muted">
+          All mock items created in this development session will be erased and restored to their
+          original seed fixtures.
+        </p>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          @click="showResetModal = false"
+        />
+        <UButton
+          label="Confirm Reset"
+          color="error"
+          size="xs"
+          icon="i-lucide-rotate-ccw"
+          :loading="resetting"
+          @click="handleResetData"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>