qarpeo 0.0.0-alpha.10

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

@@ -0,0 +1,829 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue"
+
+definePageMeta({ layout: false })
+
+const route = useRoute()
+
+const {
+  data: kvData,
+  status: kvStatus,
+  pending: kvPending,
+  execute: executeLoadKV,
+} = useFetch<any>("/_qarpeo/api/kv/keys", {
+  query: { limit: 100 },
+  immediate: false,
+  lazy: true,
+  default: () => ({ keys: [] }),
+})
+
+const kvLoading = computed(
+  () => kvPending.value || kvStatus.value === "idle" || kvStatus.value === "pending",
+)
+
+const kvKeys = computed(() => kvData.value?.keys || [])
+const kvSearch = ref("")
+const filterCategory = ref<"all" | "session" | "cache" | "ratelimit" | "other">("all")
+
+const kvSelected = ref<any>(null)
+const kvValueLoading = ref(false)
+const kvEditing = ref(false)
+const kvEditValue = ref("")
+const kvEditTtl = ref("")
+const kvDeleting = ref(false)
+const showDeleteKeyModal = ref(false)
+
+const viewMode = ref<"raw" | "pretty">("pretty")
+const copiedKey = ref(false)
+const copiedValue = ref(false)
+
+const kvNewKey = ref("")
+const kvNewValue = ref("")
+const kvNewTtl = ref("")
+const kvAdding = ref(false)
+const showAddKeyModal = ref(false)
+
+const isJsonValue = computed(() => {
+  const val = kvSelected.value?.value
+  if (!val || typeof val !== "string") return false
+  const trimmed = val.trim()
+  if (
+    !(
+      (trimmed.startsWith("{") && trimmed.endsWith("}")) ||
+      (trimmed.startsWith("[") && trimmed.endsWith("]"))
+    )
+  ) {
+    return false
+  }
+  try {
+    JSON.parse(trimmed)
+    return true
+  } catch {
+    return false
+  }
+})
+
+const displayValue = computed(() => {
+  const val = kvSelected.value?.value
+  if (!val) return "(empty)"
+  if (viewMode.value === "pretty" && isJsonValue.value) {
+    try {
+      return JSON.stringify(JSON.parse(val), null, 2)
+    } catch {
+      return val
+    }
+  }
+  return val
+})
+
+function formatJsonInEdit() {
+  try {
+    const parsed = JSON.parse(kvEditValue.value)
+    kvEditValue.value = JSON.stringify(parsed, null, 2)
+  } catch {
+    // ignore
+  }
+}
+
+// selectedKey is derived from / synced to the ?key= query param
+const selectedKey = computed({
+  get: () => (route.query.key as string) || null,
+  set: (key: string | null) => {
+    navigateTo({ query: { ...route.query, key: key ?? undefined } })
+  },
+})
+
+const selectedKeyData = computed(
+  () => kvKeys.value.find((k) => k.name === selectedKey.value) || null,
+)
+
+const isSlideoverOpen = computed({
+  get: () => Boolean(selectedKey.value),
+  set: (val: boolean) => {
+    if (!val) {
+      selectedKey.value = null
+    }
+  },
+})
+
+function fmtExpiry(exp?: number) {
+  if (!exp) return "Persistent"
+  const diff = exp - Math.floor(Date.now() / 1000)
+  if (diff < 0) return "Expired"
+  if (diff < 60) return `${diff}s left`
+  if (diff < 3600) return `${Math.floor(diff / 60)}m left`
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h left`
+  return new Date(exp * 1000).toLocaleDateString()
+}
+
+function fmtFullExpiry(exp?: number) {
+  if (!exp) return "Never (Persistent key)"
+  return new Date(exp * 1000).toLocaleString()
+}
+
+function getKeyIcon(name: string): string {
+  if (name.startsWith("session:") || name.startsWith("auth:")) return "i-lucide-user-check"
+  if (name.startsWith("cache:") || name.startsWith("swr:")) return "i-lucide-database"
+  if (name.startsWith("ratelimit:") || name.startsWith("rl:")) return "i-lucide-shield-alert"
+  if (name.startsWith("domain:") || name.startsWith("tenant:")) return "i-lucide-globe"
+  return "i-lucide-key"
+}
+
+function getKeyPrefix(name: string): string {
+  if (name.includes(":")) {
+    return name.split(":")[0]
+  }
+  return "default"
+}
+
+const counts = computed(() => {
+  let session = 0
+  let cache = 0
+  let ratelimit = 0
+  let other = 0
+
+  for (const k of kvKeys.value) {
+    if (k.name.startsWith("session:") || k.name.startsWith("auth:")) {
+      session++
+    } else if (k.name.startsWith("cache:") || k.name.startsWith("swr:")) {
+      cache++
+    } else if (k.name.startsWith("ratelimit:") || k.name.startsWith("rl:")) {
+      ratelimit++
+    } else {
+      other++
+    }
+  }
+
+  return { all: kvKeys.value.length, session, cache, ratelimit, other }
+})
+
+const filteredKeys = computed(() => {
+  let list = kvKeys.value
+
+  if (filterCategory.value === "session") {
+    list = list.filter((k) => k.name.startsWith("session:") || k.name.startsWith("auth:"))
+  } else if (filterCategory.value === "cache") {
+    list = list.filter((k) => k.name.startsWith("cache:") || k.name.startsWith("swr:"))
+  } else if (filterCategory.value === "ratelimit") {
+    list = list.filter((k) => k.name.startsWith("ratelimit:") || k.name.startsWith("rl:"))
+  } else if (filterCategory.value === "other") {
+    list = list.filter(
+      (k) =>
+        !k.name.startsWith("session:") &&
+        !k.name.startsWith("auth:") &&
+        !k.name.startsWith("cache:") &&
+        !k.name.startsWith("swr:") &&
+        !k.name.startsWith("ratelimit:") &&
+        !k.name.startsWith("rl:"),
+    )
+  }
+
+  if (kvSearch.value.trim()) {
+    const q = kvSearch.value.toLowerCase()
+    list = list.filter((k) => k.name.toLowerCase().includes(q))
+  }
+
+  return list
+})
+
+// Re-fetch key value whenever URL ?key= param changes
+watch(
+  selectedKey,
+  async (key) => {
+    if (key) {
+      await fetchKeyValue(key)
+    } else {
+      kvSelected.value = null
+      kvEditing.value = false
+    }
+  },
+  { immediate: true },
+)
+
+async function loadKVKeys() {
+  await executeLoadKV()
+}
+
+async function fetchKeyValue(key: string) {
+  kvValueLoading.value = true
+  try {
+    const data = await $fetch<any>("/_qarpeo/api/kv/get", { query: { key } }).catch(() => null)
+    kvSelected.value = data ? { ...data, key } : { key, value: "(error loading value)" }
+    kvEditing.value = false
+  } finally {
+    kvValueLoading.value = false
+  }
+}
+
+function selectKey(item: any) {
+  selectedKey.value = item.name
+}
+
+function toggleKvEdit() {
+  kvEditing.value = !kvEditing.value
+  kvEditValue.value = kvSelected.value?.value || ""
+  const exp = selectedKeyData.value?.expiration || kvSelected.value?.expiration
+  if (exp) {
+    const diff = exp - Math.floor(Date.now() / 1000)
+    kvEditTtl.value = diff > 0 ? String(diff) : ""
+  } else {
+    kvEditTtl.value = ""
+  }
+}
+
+async function saveKVEdit() {
+  if (!kvSelected.value) return
+  await $fetch("/_qarpeo/api/kv/set", {
+    method: "POST",
+    body: {
+      key: kvSelected.value.key,
+      value: kvEditValue.value,
+      ttl: kvEditTtl.value ? parseInt(kvEditTtl.value, 10) : undefined,
+    },
+  })
+  kvSelected.value.value = kvEditValue.value
+  if (kvEditTtl.value) {
+    kvSelected.value.expiration = Math.floor(Date.now() / 1000) + parseInt(kvEditTtl.value, 10)
+  }
+  kvEditing.value = false
+  await loadKVKeys()
+}
+
+async function deleteKVKey(key: string) {
+  kvDeleting.value = true
+  try {
+    await $fetch("/_qarpeo/api/kv/delete", {
+      method: "POST",
+      body: { key },
+    })
+    showDeleteKeyModal.value = false
+    selectedKey.value = null
+    await loadKVKeys()
+  } finally {
+    kvDeleting.value = false
+  }
+}
+
+async function addKVKey() {
+  if (!kvNewKey.value || !kvNewValue.value) return
+  kvAdding.value = true
+  const addedKey = kvNewKey.value
+  try {
+    await $fetch("/_qarpeo/api/kv/set", {
+      method: "POST",
+      body: {
+        key: kvNewKey.value,
+        value: kvNewValue.value,
+        ttl: kvNewTtl.value ? parseInt(kvNewTtl.value, 10) : undefined,
+      },
+    })
+    kvNewKey.value = ""
+    kvNewValue.value = ""
+    kvNewTtl.value = ""
+    showAddKeyModal.value = false
+    await loadKVKeys()
+    selectedKey.value = addedKey
+  } finally {
+    kvAdding.value = false
+  }
+}
+
+function copyKeyName(key?: string) {
+  if (!key) return
+  if (typeof navigator !== "undefined") {
+    navigator.clipboard?.writeText(key)
+    copiedKey.value = true
+    setTimeout(() => {
+      copiedKey.value = false
+    }, 1500)
+  }
+}
+
+function copyValue() {
+  if (kvSelected.value?.value && typeof navigator !== "undefined") {
+    navigator.clipboard?.writeText(displayValue.value)
+    copiedValue.value = true
+    setTimeout(() => {
+      copiedValue.value = false
+    }, 1500)
+  }
+}
+
+onMounted(() => {
+  loadKVKeys()
+})
+</script>
+
+<template>
+  <!-- ── Single Full-Width Panel with Media/Card Grid ─────────────────── -->
+  <UDashboardPanel id="devtools-kv">
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-zap" class="w-4 h-4 text-primary" />
+            <span class="font-bold text-sm text-highlighted">KV Store</span>
+            <UBadge size="xs" color="neutral" variant="subtle">Cloudflare KV</UBadge>
+            <UBadge size="xs" color="neutral" variant="subtle">
+              {{ filteredKeys.length }}
+            </UBadge>
+          </div>
+        </template>
+
+        <template #right>
+          <div class="flex items-center gap-1.5">
+            <UButton
+              icon="i-lucide-plus"
+              label="Add Key"
+              size="xs"
+              color="primary"
+              @click="showAddKeyModal = true"
+            />
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Refresh keys"
+              :loading="kvLoading"
+              @click="loadKVKeys"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+
+      <!-- Category Filter & Search Toolbar -->
+      <UDashboardToolbar>
+        <div class="flex items-center gap-1 bg-muted p-0.5 rounded border border-default">
+          <UButton
+            label="All"
+            size="xs"
+            :color="filterCategory === 'all' ? 'primary' : 'neutral'"
+            :variant="filterCategory === 'all' ? 'subtle' : 'ghost'"
+            @click="filterCategory = 'all'"
+          >
+            <template #trailing>
+              <UBadge
+                size="xs"
+                :color="filterCategory === 'all' ? 'primary' : 'neutral'"
+                variant="subtle"
+              >
+                {{ counts.all }}
+              </UBadge>
+            </template>
+          </UButton>
+
+          <UButton
+            label="Sessions"
+            icon="i-lucide-user-check"
+            size="xs"
+            :color="filterCategory === 'session' ? 'primary' : 'neutral'"
+            :variant="filterCategory === 'session' ? 'subtle' : 'ghost'"
+            @click="filterCategory = 'session'"
+          >
+            <template #trailing>
+              <UBadge
+                size="xs"
+                :color="filterCategory === 'session' ? 'primary' : 'neutral'"
+                variant="subtle"
+              >
+                {{ counts.session }}
+              </UBadge>
+            </template>
+          </UButton>
+
+          <UButton
+            label="Cache"
+            icon="i-lucide-database"
+            size="xs"
+            :color="filterCategory === 'cache' ? 'primary' : 'neutral'"
+            :variant="filterCategory === 'cache' ? 'subtle' : 'ghost'"
+            @click="filterCategory = 'cache'"
+          >
+            <template #trailing>
+              <UBadge
+                size="xs"
+                :color="filterCategory === 'cache' ? 'primary' : 'neutral'"
+                variant="subtle"
+              >
+                {{ counts.cache }}
+              </UBadge>
+            </template>
+          </UButton>
+
+          <UButton
+            label="Rate Limit"
+            icon="i-lucide-shield-alert"
+            size="xs"
+            :color="filterCategory === 'ratelimit' ? 'primary' : 'neutral'"
+            :variant="filterCategory === 'ratelimit' ? 'subtle' : 'ghost'"
+            @click="filterCategory = 'ratelimit'"
+          >
+            <template #trailing>
+              <UBadge
+                size="xs"
+                :color="filterCategory === 'ratelimit' ? 'primary' : 'neutral'"
+                variant="subtle"
+              >
+                {{ counts.ratelimit }}
+              </UBadge>
+            </template>
+          </UButton>
+
+          <UButton
+            label="Other"
+            size="xs"
+            :color="filterCategory === 'other' ? 'primary' : 'neutral'"
+            :variant="filterCategory === 'other' ? 'subtle' : 'ghost'"
+            @click="filterCategory = 'other'"
+          >
+            <template #trailing>
+              <UBadge
+                size="xs"
+                :color="filterCategory === 'other' ? 'primary' : 'neutral'"
+                variant="subtle"
+              >
+                {{ counts.other }}
+              </UBadge>
+            </template>
+          </UButton>
+        </div>
+
+        <!-- Search Input -->
+        <div class="flex items-center gap-2 max-w-xs flex-1">
+          <UInput
+            v-model="kvSearch"
+            icon="i-lucide-search"
+            placeholder="Search keys…"
+            class="w-full"
+          />
+        </div>
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <div class="space-y-4">
+        <!-- Loading Skeleton Grid -->
+        <div
+          v-if="kvLoading"
+          class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3.5"
+        >
+          <div
+            v-for="i in 10"
+            :key="i"
+            class="bg-elevated/40 border border-default rounded-xl p-3.5 flex flex-col justify-between h-28 animate-pulse"
+          >
+            <div class="flex items-start justify-between gap-2">
+              <div class="flex items-center gap-2">
+                <div class="w-8 h-8 rounded-lg bg-muted"></div>
+                <div class="h-4 w-12 rounded bg-muted"></div>
+              </div>
+              <div class="h-4 w-14 rounded bg-muted"></div>
+            </div>
+            <div class="h-3 w-3/4 rounded bg-muted"></div>
+            <div class="h-2 w-1/2 rounded bg-muted"></div>
+          </div>
+        </div>
+
+        <!-- Interactive KV Cards Grid -->
+        <div
+          v-else-if="filteredKeys.length"
+          class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3.5"
+        >
+          <UCard v-for="item in filteredKeys" :key="item.name" @click="selectKey(item)">
+            <!-- Card Header: Icon + Namespace Tag + TTL Badge -->
+            <div class="flex items-start justify-between gap-2 mb-2">
+              <div class="flex items-center gap-2 min-w-0">
+                <div
+                  class="w-8 h-8 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center shrink-0 text-primary group-hover:scale-105 transition-transform"
+                >
+                  <UIcon :name="getKeyIcon(item.name)" class="w-4 h-4" />
+                </div>
+                <div class="min-w-0">
+                  <UBadge size="xs" color="neutral" variant="subtle" class="font-mono text-[10px]">
+                    {{ getKeyPrefix(item.name) }}
+                  </UBadge>
+                </div>
+              </div>
+
+              <UBadge
+                size="xs"
+                :color="item.expiration ? 'warning' : 'neutral'"
+                variant="subtle"
+                class="font-mono text-[10px] shrink-0"
+              >
+                {{ fmtExpiry(item.expiration) }}
+              </UBadge>
+            </div>
+
+            <!-- Card Body: Key Name -->
+            <div class="my-1.5 min-w-0">
+              <div
+                class="font-mono text-xs font-bold text-highlighted group-hover:text-primary transition-colors truncate"
+                :title="item.name"
+              >
+                {{ item.name }}
+              </div>
+            </div>
+          </UCard>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else class="flex flex-col items-center justify-center py-20 text-center space-y-3">
+          <div
+            class="w-12 h-12 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center text-primary"
+          >
+            <UIcon name="i-lucide-zap" class="w-6 h-6" />
+          </div>
+          <div class="font-bold text-sm text-highlighted">No KV keys found</div>
+          <p class="text-xs text-muted max-w-sm">
+            Store ultra-low latency global key-value data directly on Cloudflare Edge with optional
+            TTL expiration.
+          </p>
+          <UButton
+            label="Add First Key"
+            icon="i-lucide-plus"
+            size="sm"
+            color="primary"
+            @click="showAddKeyModal = true"
+          />
+        </div>
+      </div>
+    </template>
+  </UDashboardPanel>
+
+  <!-- ── Right Side Slideover for Key Value Inspector & Editor ──────────── -->
+  <USlideover v-model:open="isSlideoverOpen" side="right" :title="selectedKey || undefined">
+    <template #title>
+      <div class="flex items-center gap-2 min-w-0 pr-4">
+        <UIcon :name="getKeyIcon(selectedKey || '')" class="w-4 h-4 text-primary shrink-0" />
+        <span
+          class="font-mono font-bold text-sm text-highlighted truncate"
+          :title="selectedKey || ''"
+        >
+          {{ selectedKey }}
+        </span>
+      </div>
+    </template>
+
+    <template #body>
+      <div v-if="selectedKey" class="space-y-6">
+        <!-- Metadata Info Card -->
+        <div class="space-y-3">
+          <div class="text-xs font-semibold uppercase tracking-wider text-muted">Key Details</div>
+
+          <div
+            class="divide-y divide-default rounded-lg border border-default bg-elevated/40 text-xs font-mono"
+          >
+            <div class="flex items-center justify-between p-3">
+              <span class="text-muted">Key Name</span>
+              <div class="flex items-center gap-1.5 min-w-0 ml-2">
+                <span class="text-highlighted font-bold truncate">{{ selectedKey }}</span>
+                <UButton
+                  type="button"
+                  icon="i-lucide-copy"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  title="Copy key name"
+                  @click="copyKeyName(selectedKey)"
+                />
+              </div>
+            </div>
+
+            <div class="flex items-center justify-between p-3">
+              <span class="text-muted">Namespace Prefix</span>
+              <span class="text-default font-semibold">{{ getKeyPrefix(selectedKey) }}</span>
+            </div>
+
+            <div class="flex items-center justify-between p-3">
+              <span class="text-muted">Expiration</span>
+              <span class="text-default">{{
+                fmtFullExpiry(selectedKeyData?.expiration || kvSelected?.expiration)
+              }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Value Section (View / Edit Mode) -->
+        <div class="space-y-3">
+          <div class="flex items-center justify-between">
+            <span
+              class="text-xs font-semibold uppercase tracking-wider text-muted flex items-center gap-1.5"
+            >
+              <UIcon name="i-lucide-code" class="w-3.5 h-3.5 text-primary" />
+              Stored Value
+            </span>
+            <div class="flex items-center gap-1.5">
+              <!-- JSON Format Mode Toggle (only when value is JSON) -->
+              <div
+                v-if="!kvEditing && isJsonValue"
+                class="flex items-center bg-muted/60 rounded p-0.5 border border-default text-[10px]"
+              >
+                <UButton
+                  label="Pretty JSON"
+                  size="xs"
+                  :color="viewMode === 'pretty' ? 'primary' : 'neutral'"
+                  :variant="viewMode === 'pretty' ? 'subtle' : 'ghost'"
+                  @click="viewMode = 'pretty'"
+                />
+                <UButton
+                  label="Raw"
+                  size="xs"
+                  :color="viewMode === 'raw' ? 'primary' : 'neutral'"
+                  :variant="viewMode === 'raw' ? 'subtle' : 'ghost'"
+                  @click="viewMode = 'raw'"
+                />
+              </div>
+
+              <UButton
+                v-if="!kvEditing"
+                :icon="copiedValue ? 'i-lucide-check' : 'i-lucide-copy'"
+                size="xs"
+                :color="copiedValue ? 'success' : 'neutral'"
+                variant="ghost"
+                :title="copiedValue ? 'Copied to clipboard!' : 'Copy value'"
+                @click="copyValue"
+              />
+              <UButton
+                :label="kvEditing ? 'Cancel Edit' : 'Edit Value'"
+                :icon="kvEditing ? 'i-lucide-x' : 'i-lucide-edit'"
+                size="xs"
+                color="neutral"
+                variant="subtle"
+                @click="toggleKvEdit"
+              />
+            </div>
+          </div>
+
+          <!-- Loading state -->
+          <div
+            v-if="kvValueLoading"
+            class="bg-muted/30 border border-default rounded-xl p-8 text-center text-xs text-muted font-mono"
+          >
+            <UIcon name="i-lucide-loader" class="w-5 h-5 animate-spin mx-auto mb-2 text-primary" />
+            Loading value from KV store…
+          </div>
+
+          <!-- Edit Mode -->
+          <div v-else-if="kvEditing" class="space-y-3">
+            <div class="flex items-center justify-between text-xs text-muted">
+              <span>Value editor</span>
+              <UButton
+                icon="i-lucide-sparkles"
+                label="Format JSON"
+                size="xs"
+                color="primary"
+                variant="ghost"
+                class="cursor-pointer"
+                @click="formatJsonInEdit"
+              />
+            </div>
+            <UTextarea
+              v-model="kvEditValue"
+              class="font-mono text-xs w-full"
+              :rows="12"
+              placeholder="Enter new value…"
+            />
+
+            <!-- TTL Field in Edit Mode -->
+            <div>
+              <div class="text-[11px] text-muted mb-1 flex items-center gap-1">
+                <UIcon name="i-lucide-clock" class="w-3 h-3 text-primary" />
+                TTL (Seconds from now, leave blank to keep unchanged)
+              </div>
+              <UInput
+                v-model="kvEditTtl"
+                type="number"
+                placeholder="e.g. 86400 (24h)"
+                size="xs"
+                class="font-mono"
+              />
+            </div>
+
+            <div class="flex justify-end gap-2 pt-2">
+              <UButton
+                label="Cancel"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                @click="toggleKvEdit"
+              />
+              <UButton
+                label="Save Changes"
+                size="xs"
+                color="primary"
+                icon="i-lucide-check"
+                @click="saveKVEdit"
+              />
+            </div>
+          </div>
+
+          <!-- View Mode -->
+          <div
+            v-else
+            class="bg-muted/30 border border-default rounded-xl p-4 overflow-auto max-h-[380px]"
+          >
+            <pre class="font-mono text-xs text-default whitespace-pre-wrap break-all">{{
+              displayValue
+            }}</pre>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div v-if="selectedKey" class="flex items-center justify-between w-full gap-2">
+        <UButton
+          :label="copiedKey ? 'Copied!' : 'Copy Key'"
+          :icon="copiedKey ? 'i-lucide-check' : 'i-lucide-copy'"
+          size="xs"
+          :color="copiedKey ? 'success' : 'neutral'"
+          variant="subtle"
+          @click="copyKeyName(selectedKey)"
+        />
+        <UButton
+          label="Delete Key"
+          icon="i-lucide-trash"
+          size="xs"
+          color="error"
+          variant="subtle"
+          @click="showDeleteKeyModal = true"
+        />
+      </div>
+    </template>
+  </USlideover>
+
+  <!-- Delete Key Confirmation Modal -->
+  <UModal v-model:open="showDeleteKeyModal" title="Delete KV Key">
+    <template #body>
+      <div class="space-y-3">
+        <p class="text-xs text-default">
+          Are you sure you want to delete
+          <span class="font-mono font-bold text-highlighted">{{ selectedKey }}</span
+          >?
+        </p>
+        <p class="text-xs text-muted">
+          This key will be permanently removed from the Cloudflare KV namespace. Any clients or
+          sessions relying on it will receive null.
+        </p>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          @click="showDeleteKeyModal = false"
+        />
+        <UButton
+          label="Confirm Delete"
+          color="error"
+          size="xs"
+          icon="i-lucide-trash"
+          :loading="kvDeleting"
+          @click="selectedKey && deleteKVKey(selectedKey)"
+        />
+      </div>
+    </template>
+  </UModal>
+
+  <!-- Add Key Modal -->
+  <UModal v-model:open="showAddKeyModal" title="Add KV Key">
+    <template #body>
+      <div class="space-y-3">
+        <div>
+          <div class="text-xs text-muted mb-1">Key Name</div>
+          <UInput v-model="kvNewKey" placeholder="e.g. session:user_123" class="font-mono" />
+        </div>
+        <div>
+          <div class="text-xs text-muted mb-1">Value (String or JSON)</div>
+          <UTextarea
+            v-model="kvNewValue"
+            placeholder="{ ... }"
+            :rows="4"
+            class="font-mono text-xs"
+          />
+        </div>
+        <div>
+          <div class="text-xs text-muted mb-1">TTL (Seconds, optional)</div>
+          <UInput v-model="kvNewTtl" type="number" placeholder="86400" />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton label="Cancel" color="neutral" variant="ghost" @click="showAddKeyModal = false" />
+        <UButton
+          label="Create Key"
+          color="primary"
+          :loading="kvAdding"
+          :disabled="!kvNewKey || !kvNewValue"
+          @click="addKVKey"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>