qarpeo 0.0.0-alpha.10

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

@@ -0,0 +1,546 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui"
+import { computed, onMounted, ref, watch } from "vue"
+
+definePageMeta({ layout: false })
+
+const route = useRoute()
+
+const {
+  data: dbData,
+  status: dbStatus,
+  pending: dbPending,
+  execute: executeLoadTables,
+} = useFetch<any>("/_qarpeo/api/db/tables", {
+  immediate: false,
+  lazy: true,
+  default: () => ({ tables: [] }),
+})
+
+const dbTablesLoading = computed(
+  () => dbPending.value || dbStatus.value === "idle" || dbStatus.value === "pending",
+)
+
+const dbTables = computed(() => dbData.value?.tables || [])
+const sqlQuery = ref("")
+const sqlResult = ref<any>(null)
+const sqlRunning = ref(false)
+const sqlError = ref<string | null>(null)
+const tableSearch = ref("")
+
+// selectedTable is derived from the ?table= query param
+const selectedTable = computed(() => (route.query.table as string) || null)
+
+const filteredTables = computed(() => {
+  if (!tableSearch.value.trim()) return dbTables.value
+  const q = tableSearch.value.toLowerCase()
+  return dbTables.value.filter((t: any) => t.name.toLowerCase().includes(q))
+})
+
+const tableNavItems = computed<NavigationMenuItem[]>(() =>
+  filteredTables.value.map((t: any) => ({
+    label: t.name,
+    icon: "i-lucide-table-2",
+    value: t.name,
+    badge: {
+      label: String(t.rows ?? 0),
+      size: "sm" as const,
+      color: "neutral" as const,
+      variant: "subtle" as const,
+    },
+    to: { query: { ...route.query, table: t.name } },
+    active: route.query.table == t.name,
+  })),
+)
+
+const currentTableColumns = computed(() => {
+  if (!selectedTable.value) return []
+  return dbTables.value.find((t: any) => t.name === selectedTable.value)?.columns || []
+})
+
+const resultRows = computed(() => {
+  if (!sqlResult.value) return []
+  return sqlResult.value.rows || sqlResult.value.results || []
+})
+
+const resultColumns = computed(() => {
+  if (!resultRows.value.length) return []
+  return Object.keys(resultRows.value[0])
+})
+
+// Re-run default query whenever the URL ?table= param changes
+watch(selectedTable, (name) => {
+  if (name && dbTables.value.some((t: any) => t.name === name)) {
+    sqlQuery.value = `SELECT * FROM "${name}" LIMIT 20;`
+    runQuery()
+  } else {
+    sqlQuery.value = ""
+    sqlResult.value = null
+    sqlError.value = null
+  }
+})
+
+// Insert Row State
+const showInsertModal = ref(false)
+const insertForm = ref<Record<string, any>>({})
+const insertLoading = ref(false)
+const insertError = ref<string | null>(null)
+
+// Delete Row State
+const deletingRowId = ref<string | number | null>(null)
+
+const primaryKeyColumn = computed(() => {
+  const pk = currentTableColumns.value.find((c: any) => c.primaryKey)
+  if (pk) return pk.name
+  if (currentTableColumns.value.some((c: any) => c.name.toLowerCase() === "id")) return "id"
+  return currentTableColumns.value[0]?.name || null
+})
+
+function openInsertModal() {
+  insertForm.value = {}
+  insertError.value = null
+  for (const col of currentTableColumns.value) {
+    insertForm.value[col.name] = col.defaultValue != null ? String(col.defaultValue) : ""
+  }
+  showInsertModal.value = true
+}
+
+async function insertRow() {
+  if (!selectedTable.value) return
+  insertLoading.value = true
+  insertError.value = null
+
+  try {
+    const entries = Object.entries(insertForm.value).filter(
+      ([_, v]) => v !== "" && v !== undefined && v !== null,
+    )
+    if (entries.length === 0) {
+      insertError.value = "Please provide at least one column value."
+      return
+    }
+
+    // Parameterized INSERT — values are bound server-side (d1.prepare(sql).bind(...params))
+    // instead of interpolated into the SQL string, eliminating SQL-injection from user input.
+    const colNames = entries.map(([k]) => `"${k}"`).join(", ")
+    const placeholders = entries.map(() => "?").join(", ")
+    const params = entries.map(([, v]) => {
+      const s = String(v)
+      // Preserve numeric affinity for numeric input (matches prior behavior).
+      if (/^-?\d+(\.\d+)?$/.test(s) && !isNaN(Number(s))) return Number(s)
+      return s
+    })
+
+    const sql = `INSERT INTO "${selectedTable.value}" (${colNames}) VALUES (${placeholders});`
+    const res = await $fetch<any>("/_qarpeo/api/db/query", {
+      method: "POST",
+      body: { sql, params },
+    })
+
+    if (res?.error) {
+      insertError.value = res.error
+    } else {
+      showInsertModal.value = false
+      runQuery()
+      loadTables()
+    }
+  } catch (err: any) {
+    insertError.value = err?.data?.message || err?.message || "Failed to insert row"
+  } finally {
+    insertLoading.value = false
+  }
+}
+
+async function deleteRow(row: any) {
+  if (!selectedTable.value || !primaryKeyColumn.value) return
+  const pkVal = row[primaryKeyColumn.value]
+  if (pkVal == null) return
+
+  if (
+    typeof window !== "undefined" &&
+    !window.confirm(
+      `Are you sure you want to delete this row where ${primaryKeyColumn.value} = '${pkVal}'?`,
+    )
+  ) {
+    return
+  }
+
+  deletingRowId.value = pkVal
+  try {
+    const escapedVal = typeof pkVal === "number" ? pkVal : `'${String(pkVal).replace(/'/g, "''")}'`
+    const sql = `DELETE FROM "${selectedTable.value}" WHERE "${primaryKeyColumn.value}" = ${escapedVal};`
+    await $fetch<any>("/_qarpeo/api/db/query", {
+      method: "POST",
+      body: { sql },
+    })
+    runQuery()
+    loadTables()
+  } catch (err: any) {
+    if (typeof window !== "undefined") {
+      window.alert(`Failed to delete row: ${err?.data?.message || err?.message}`)
+    }
+  } finally {
+    deletingRowId.value = null
+  }
+}
+
+async function loadTables() {
+  await executeLoadTables()
+  // If ?table= is already in URL on mount, trigger query
+  if (selectedTable.value && dbTables.value.some((t: any) => t.name === selectedTable.value)) {
+    sqlQuery.value = `SELECT * FROM "${selectedTable.value}" LIMIT 20;`
+    runQuery()
+  }
+}
+
+function setSqlSnippet(type: "select" | "count" | "schema") {
+  if (!selectedTable.value) return
+  if (type === "select") {
+    sqlQuery.value = `SELECT * FROM "${selectedTable.value}" LIMIT 20;`
+  } else if (type === "count") {
+    sqlQuery.value = `SELECT count(*) as total_rows FROM "${selectedTable.value}";`
+  } else if (type === "schema") {
+    sqlQuery.value = `PRAGMA table_info("${selectedTable.value}");`
+  }
+  runQuery()
+}
+
+async function runQuery() {
+  const query = sqlQuery.value.trim()
+  if (!query) return
+
+  sqlRunning.value = true
+  sqlError.value = null
+  sqlResult.value = null
+
+  try {
+    const data = await $fetch<any>("/_qarpeo/api/db/query", {
+      method: "POST",
+      body: { sql: query },
+    })
+
+    if (data?.error) {
+      sqlError.value = data.error
+    } else {
+      sqlResult.value = data
+    }
+  } catch (err: any) {
+    sqlError.value = err?.data?.message || err?.message || "Failed to execute query"
+  } finally {
+    sqlRunning.value = false
+  }
+}
+
+onMounted(() => {
+  loadTables()
+})
+</script>
+
+<template>
+  <!-- ── Panel 1: Tables List ─────────────────────────────────────────── -->
+  <UDashboardPanel id="db-tables" :default-size="25" :min-size="20" :max-size="40" resizable>
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-database" class="w-4 h-4 text-primary" />
+            <span class="font-bold text-sm text-highlighted">Tables</span>
+            <UBadge size="xs" color="neutral" variant="subtle">
+              {{ filteredTables.length }}
+            </UBadge>
+          </div>
+        </template>
+        <template #right>
+          <UButton
+            icon="i-lucide-refresh-cw"
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            title="Refresh tables"
+            :loading="dbTablesLoading"
+            @click="loadTables"
+          />
+        </template>
+      </UDashboardNavbar>
+      <UDashboardToolbar>
+        <UInput
+          v-model="tableSearch"
+          icon="i-lucide-search"
+          placeholder="Search tables…"
+          class="w-full"
+        />
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <!-- Loading Skeleton/State -->
+      <div v-if="dbTablesLoading" class="p-3 space-y-2">
+        <div
+          v-for="i in 5"
+          :key="i"
+          class="h-7 rounded bg-muted/60 animate-pulse flex items-center px-3"
+        >
+          <div class="h-3 w-3 rounded bg-muted/40 mr-2.5"></div>
+          <div class="h-3 w-24 rounded bg-muted/40"></div>
+        </div>
+      </div>
+
+      <template v-else>
+        <UNavigationMenu
+          v-model="selectedTable"
+          :items="tableNavItems"
+          orientation="vertical"
+          variant="pill"
+        />
+        <div v-if="!filteredTables.length" class="text-xs text-muted p-6 text-center">
+          No tables found
+        </div>
+      </template>
+    </template>
+  </UDashboardPanel>
+
+  <!-- ── Panel 2: Table Data & Direct Query Console ────────────────────── -->
+  <UDashboardPanel id="db-data" class="hidden lg:flex flex-1">
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div v-if="selectedTable" class="flex items-center gap-2">
+            <UIcon name="i-lucide-table" class="w-4 h-4 text-primary" />
+            <span class="font-mono font-bold text-sm text-highlighted">{{ selectedTable }}</span>
+            <UBadge size="xs" color="primary" variant="subtle">D1 SQLite</UBadge>
+          </div>
+          <span v-else class="text-sm font-semibold text-muted">Select a table</span>
+        </template>
+
+        <template #right>
+          <div v-if="selectedTable" class="flex items-center gap-1.5">
+            <UButton
+              label="Insert Row"
+              icon="i-lucide-plus"
+              size="xs"
+              color="primary"
+              variant="subtle"
+              @click="openInsertModal"
+            />
+            <UButton
+              label="SELECT 20"
+              size="xs"
+              color="neutral"
+              variant="subtle"
+              @click="setSqlSnippet('select')"
+            />
+            <UButton
+              label="COUNT"
+              size="xs"
+              color="neutral"
+              variant="subtle"
+              @click="setSqlSnippet('count')"
+            />
+            <UButton
+              label="SCHEMA"
+              size="xs"
+              color="neutral"
+              variant="subtle"
+              @click="setSqlSnippet('schema')"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <div v-if="selectedTable" class="flex flex-col h-full p-6 space-y-4 overflow-hidden">
+        <!-- Columns chips -->
+        <div v-if="currentTableColumns.length" class="flex flex-wrap gap-1.5 shrink-0">
+          <UBadge
+            v-for="col in currentTableColumns"
+            :key="col.name"
+            size="xs"
+            color="neutral"
+            variant="subtle"
+            class="font-mono"
+          >
+            <span :class="col.primaryKey ? 'text-primary font-bold' : 'text-default'">{{
+              col.name
+            }}</span>
+            <span class="text-muted ml-1 text-[10px]">{{ col.type }}</span>
+            <span v-if="col.primaryKey" class="text-primary ml-1 text-[9px] font-bold">PK</span>
+          </UBadge>
+        </div>
+
+        <!-- SQL Query Box -->
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <span class="text-xs font-semibold text-muted flex items-center gap-1.5">
+                <UIcon name="i-lucide-terminal" class="w-3.5 h-3.5 text-primary" />
+                SQL Query
+              </span>
+              <div class="flex items-center gap-2">
+                <span class="text-[10px] text-muted hidden sm:inline">Ctrl + Enter to run</span>
+                <UButton
+                  label="Execute"
+                  icon="i-lucide-play"
+                  size="xs"
+                  color="primary"
+                  :loading="sqlRunning"
+                  @click="runQuery"
+                />
+              </div>
+            </div>
+          </template>
+          <UTextarea
+            v-model="sqlQuery"
+            placeholder="SELECT * FROM table LIMIT 20;"
+            :rows="3"
+            class="font-mono w-full text-xs border-0 rounded-none focus:ring-0"
+            @keydown.ctrl.enter.prevent="runQuery"
+            @keydown.meta.enter.prevent="runQuery"
+          />
+        </UCard>
+
+        <!-- Error alert -->
+        <div
+          v-if="sqlError"
+          class="p-3 bg-error/10 border border-error/20 rounded-md text-error text-xs font-mono"
+        >
+          {{ sqlError }}
+        </div>
+
+        <!-- Results Table -->
+        <div
+          v-if="sqlResult"
+          class="flex-1 flex flex-col min-h-0 bg-default border border-default rounded-md overflow-hidden"
+        >
+          <div
+            class="flex items-center justify-between px-3 py-2 bg-muted/50 border-b border-default text-xs text-muted"
+          >
+            <span>{{ resultRows.length }} rows returned</span>
+            <div class="flex items-center gap-3">
+              <span class="font-mono text-[11px]"
+                >{{ sqlResult.durationMs?.toFixed(2) ?? "?" }} ms</span
+              >
+              <UButton
+                icon="i-lucide-refresh-cw"
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                title="Rerun query"
+                :loading="sqlRunning"
+                @click="runQuery"
+              />
+            </div>
+          </div>
+
+          <div class="flex-1 overflow-auto">
+            <table v-if="resultRows.length" class="w-full text-left text-xs">
+              <thead>
+                <tr class="border-b border-default bg-muted/30 text-muted font-mono">
+                  <th
+                    v-for="col in resultColumns"
+                    :key="col"
+                    class="py-2 px-3 whitespace-nowrap font-semibold"
+                  >
+                    {{ col }}
+                  </th>
+                  <th
+                    v-if="primaryKeyColumn"
+                    class="py-2 px-3 whitespace-nowrap font-semibold text-right"
+                  >
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-default font-mono">
+                <tr v-for="(row, idx) in resultRows" :key="idx" class="hover:bg-elevated/50 group">
+                  <td
+                    v-for="col in resultColumns"
+                    :key="col"
+                    class="py-2 px-3 whitespace-nowrap text-default"
+                  >
+                    <span v-if="row[col] == null" class="text-muted/60 italic text-[11px]"
+                      >NULL</span
+                    >
+                    <span v-else>{{ String(row[col]) }}</span>
+                  </td>
+                  <td v-if="primaryKeyColumn" class="py-2 px-3 whitespace-nowrap text-right">
+                    <UButton
+                      icon="i-lucide-trash"
+                      size="xs"
+                      color="neutral"
+                      variant="ghost"
+                      class="opacity-0 group-hover:opacity-100 transition-opacity hover:text-error"
+                      title="Delete row"
+                      :loading="deletingRowId === row[primaryKeyColumn]"
+                      @click="deleteRow(row)"
+                    />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div v-else class="text-xs text-muted p-8 text-center">Query returned 0 rows.</div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="flex-1 flex flex-col items-center justify-center text-muted text-xs p-12 text-center"
+      >
+        <UIcon name="i-lucide-database" class="w-8 h-8 mb-2 opacity-50 text-muted" />
+        Select a table from the list to view its columns and query records.
+      </div>
+    </template>
+  </UDashboardPanel>
+
+  <!-- ── Insert Row Modal ─────────────────────────────────────────────── -->
+  <UModal
+    v-model:open="showInsertModal"
+    :title="`Insert Row into ${selectedTable}`"
+    description="Enter values for each column. Auto-generated columns can be left blank."
+  >
+    <template #body>
+      <div class="space-y-3 max-h-[60vh] overflow-y-auto p-1">
+        <div
+          v-if="insertError"
+          class="p-2.5 bg-error/10 border border-error/20 rounded text-error text-xs font-mono"
+        >
+          {{ insertError }}
+        </div>
+
+        <UFormField
+          v-for="col in currentTableColumns"
+          :key="col.name"
+          :label="col.name"
+          :name="col.name"
+          :required="col.notNull && !col.primaryKey"
+          :help="`${col.type}${col.primaryKey ? ' · PRIMARY KEY' : ''}${col.notNull ? ' · NOT NULL' : ''}`"
+        >
+          <UInput
+            v-model="insertForm[col.name]"
+            :placeholder="
+              col.defaultValue != null ? String(col.defaultValue) : `Enter ${col.name}...`
+            "
+            class="w-full font-mono text-xs"
+          />
+        </UFormField>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2 w-full">
+        <UButton size="xs" color="neutral" variant="ghost" @click="showInsertModal = false">
+          Cancel
+        </UButton>
+        <UButton
+          size="xs"
+          color="primary"
+          icon="i-lucide-plus"
+          :loading="insertLoading"
+          @click="insertRow"
+        >
+          Insert Row
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>