@powersync/nuxt 0.0.0-dev-20260128023420

package/dist/runtime/components/LoadingSpinner.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="loading-overlay">
+    <div class="loading-content">
+      <div class="spinner-icon"></div>
+      <div class="loading-text">Loading...</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.loading-overlay{align-items:center;background:#fff;display:flex;inset:0;justify-content:center;position:fixed;z-index:9999}@media (prefers-color-scheme:dark){.loading-overlay{background:#0a0a0a}.loading-text{color:hsla(0,0%,100%,.7)}}.loading-content{align-items:center;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;display:flex;flex-direction:column;font-size:18px;gap:12px}.loading-text{color:rgba(0,0,0,.7)}.spinner-icon{animation:spin 1s linear infinite;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik03LjcgNC43YTE0LjcgMTQuNyAwIDAgMC0zIDMuMUw2LjMgOWExMy4zIDEzLjMgMCAwIDEgMi42LTIuN1ptLTMuMSA3LjYtMS45LS42QTEyLjUgMTIuNSAwIDAgMCAyIDE2aDJhMTEuNSAxMS41IDAgMCAxIC42LTMuN20tMS45IDguMWExNC40IDE0LjQgMCAwIDAgMiAzLjlsMS42LTEuMmExMi45IDEyLjkgMCAwIDEtMS43LTMuM1ptNS4xIDYuOWExNC40IDE0LjQgMCAwIDAgMy45IDJsLjYtMS45QTEyLjkgMTIuOSAwIDAgMSA5IDI1LjdabTMuOS0yNC42LjYgMS45QTExLjUgMTEuNSAwIDAgMSAxNiA0VjJhMTIuNSAxMi41IDAgMCAwLTQuMy43bTEyLjUgMjQuNmExNS4yIDE1LjIgMCAwIDAgMy4xLTMuMUwyNS43IDIzYTExLjUgMTEuNSAwIDAgMS0yLjcgMi43Wm0zLjItNy42IDEuOS42QTE1LjUgMTUuNSAwIDAgMCAzMCAxNmgtMmExMS41IDExLjUgMCAwIDEtLjYgMy43bTEuOC04LjFhMTQuNCAxNC40IDAgMCAwLTItMy45bC0xLjYgMS4yYTEyLjkgMTIuOSAwIDAgMSAxLjcgMy4zWm0tNS4xLTdhMTQuNCAxNC40IDAgMCAwLTMuOS0ybC0uNiAxLjlhMTIuOSAxMi45IDAgMCAxIDMuMyAxLjdabS0zLjggMjQuNy0uNi0xLjlhMTEuNSAxMS41IDAgMCAxLTMuNy42djJhMjEuNCAyMS40IDAgMCAwIDQuMy0uNyIvPjwvc3ZnPg==");background-repeat:no-repeat;background-size:contain;height:36px;opacity:.5;width:36px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{to{transform:rotate(1turn)}}
+</style>

package/dist/runtime/components/LoadingSpinner.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/LogsTab.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/LogsTab.vue

@@ -0,0 +1,325 @@
+<template>
+  <div
+    border="t"
+    border-color="gray-100"
+    relative
+    n-bg="base"
+    flex="~ col"
+    h="screen"
+    overflow="hidden"
+  >
+    <!-- Toolbar -->
+    <div
+      class="flex items-center justify-between gap-3 px-3 py-2 border-b border-gray-200 dark:border-neutral-700"
+    >
+      <div class="flex items-center gap-2 flex-1">
+        <NTextInput
+          v-model="searchQuery"
+          n="xs"
+          class="flex-1 max-w-md"
+          placeholder="Search logs..."
+          icon="carbon:search"
+        />
+
+        <select
+          v-model="selectedLevel"
+          class="px-2 py-1 text-xs border border-gray-300 dark:border-neutral-600 rounded bg-white dark:bg-neutral-800"
+        >
+          <option value="all">
+            All Levels
+          </option>
+          <option value="error">
+            Error
+          </option>
+          <option value="warn">
+            Warning
+          </option>
+          <option value="info">
+            Info
+          </option>
+          <option value="debug">
+            Debug
+          </option>
+        </select>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <NBadge n="slate xs">
+          {{ filteredLogs.length }}
+        </NBadge>
+        <NButton
+          n="xs red"
+          icon="carbon:trash-can"
+          @click="clearLogs"
+        >
+          Clear
+        </NButton>
+      </div>
+    </div>
+
+    <!-- Logs Table -->
+    <div class="flex-1 overflow-auto">
+      <div
+        v-if="filteredLogs.length === 0"
+        class="text-center py-12"
+      >
+        <div class="text-gray-500 dark:text-gray-400 text-sm">
+          No logs found
+        </div>
+      </div>
+
+      <table
+        v-else
+        class="w-full"
+      >
+        <thead class="sticky top-0 bg-gray-50 dark:bg-neutral-900 border-b border-gray-200 dark:border-neutral-700 z-10">
+          <tr>
+            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-8" />
+            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-32">
+              Time
+            </th>
+            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-20">
+              Source
+            </th>
+            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-20">
+              Level
+            </th>
+            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400">
+              Message
+            </th>
+            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-16" />
+          </tr>
+        </thead>
+        <tbody>
+          <template
+            v-for="log in filteredLogs"
+            :key="log.key"
+          >
+            <tr
+              class="log-entry hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors cursor-pointer border-b border-b-gray-100 dark:border-b-neutral-800"
+              @click="toggleExpand(log.key)"
+            >
+              <td class="px-2 py-1.5">
+                <div
+                  class="w-1.5 h-1.5 rounded-full"
+                  :class="getLogDotClass(log)"
+                />
+              </td>
+              <td class="px-2 py-1.5">
+                <span class="text-xs font-mono text-gray-600 dark:text-gray-400">
+                  {{ log.value ? formatTime(log.value.date) : "" }}
+                </span>
+              </td>
+              <td class="px-2 py-1.5">
+                <div class="text-xs text-gray-700 dark:text-gray-300 truncate max-w-3xl">
+                  {{ getLogSource(log) }}
+                </div>
+              </td>
+              <td class="px-2 py-1.5">
+                <NBadge
+                  :n="`${getLogBadgeColor(log)} xs`"
+                >
+                  {{ getLogType(log) }}
+                </NBadge>
+              </td>
+              <td class="px-2 py-1.5">
+                <div class="text-xs text-gray-700 dark:text-gray-300 truncate max-w-3xl">
+                  {{ getLogMessage(log) }}
+                </div>
+              </td>
+              <td class="px-2 py-1.5 text-center">
+                <NIcon
+                  v-if="hasExtraData(log)"
+                  :icon="expandedLogs.has(log.key) ? 'carbon:chevron-up' : 'carbon:constraint'"
+                  class="text-gray-600 text-xs"
+                />
+              </td>
+            </tr>
+            <tr
+              v-if="expandedLogs.has(log.key) && hasExtraData(log)"
+              class="bg-gray-50 dark:bg-neutral-900/50"
+            >
+              <td colspan="12">
+                <div class="px-10 py-2">
+                  <div class="inline-flex items-center gap-2 mb-2">
+                    <NIcon
+                      n="sm"
+                      icon="carbon:object"
+                    />
+                    <span class="text-xs text-gray-600 dark:text-gray-400">JSON</span>
+                  </div>
+                  <div class="bg-white dark:bg-neutral-800 p-3 rounded border border-gray-200 dark:border-neutral-700 overflow-x-auto">
+                    <div
+                      class="json-code-block text-xs"
+                      v-html="highlightedJson.get(log.key)"
+                    />
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useDiagnosticsLogger } from "#imports";
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import Fuse from "fuse.js";
+import { codeToHtml } from "shiki";
+const { logsStorage, emitter } = useDiagnosticsLogger();
+const searchQuery = ref("");
+const selectedLevel = ref("all");
+const expandedLogs = ref(/* @__PURE__ */ new Set());
+const logs = ref([]);
+const highlightedJson = ref(/* @__PURE__ */ new Map());
+async function loadInitialLogs() {
+  const keys = await logsStorage.getKeys("log:");
+  const items = await logsStorage.getItems(keys.map((key) => ({ key })));
+  logs.value = items.sort((a, b) => {
+    const dateA = a.value ? new Date(a.value.date).getTime() : 0;
+    const dateB = b.value ? new Date(b.value.date).getTime() : 0;
+    return dateB - dateA;
+  });
+}
+const handleLog = (event) => {
+  logs.value.unshift({ key: event.key, value: event.value });
+};
+onMounted(() => {
+  loadInitialLogs();
+  emitter.on("log", handleLog);
+});
+onUnmounted(() => {
+  emitter.off("log", handleLog);
+});
+const fuse = computed(() => {
+  if (!logs.value || logs.value.length === 0) return null;
+  return new Fuse(logs.value, {
+    keys: [
+      { name: "message", getFn: (log) => getLogMessage(log), weight: 2 },
+      { name: "type", getFn: (log) => log.value?.type || "" },
+      { name: "extraData", getFn: (log) => getSearchableExtraData(log), weight: 0.5 }
+    ],
+    threshold: 0.3,
+    includeScore: true,
+    useExtendedSearch: true,
+    includeMatches: true
+  });
+});
+const filteredLogs = computed(() => {
+  let filtered = logs.value || [];
+  if (selectedLevel.value !== "all") {
+    filtered = filtered.filter(
+      (log) => log.value?.type === selectedLevel.value
+    );
+  }
+  if (searchQuery.value && fuse.value) {
+    const searchResults = fuse.value.search(searchQuery.value);
+    const searchedItems = searchResults.map((result) => result.item);
+    if (selectedLevel.value !== "all") {
+      filtered = filtered.filter(
+        (log) => searchedItems.some((item) => item.key === log.key)
+      );
+    } else {
+      filtered = searchedItems;
+    }
+  }
+  return filtered;
+});
+async function toggleExpand(key) {
+  if (expandedLogs.value.has(key)) {
+    expandedLogs.value.delete(key);
+  } else {
+    expandedLogs.value.add(key);
+    if (!highlightedJson.value.has(key)) {
+      const log = logs.value.find((l) => l.key === key);
+      if (log) {
+        const jsonStr = formatExtraData(log);
+        const html = await codeToHtml(jsonStr, {
+          lang: "json",
+          themes: {
+            light: "catppuccin-latte",
+            dark: "catppuccin-frappe"
+          }
+        });
+        highlightedJson.value.set(key, html);
+      }
+    }
+  }
+}
+function getLogMessage(log) {
+  if (!log.value?.args || log.value.args.length === 0) return "Empty log message";
+  return String(log.value.args[0] || "Empty log message");
+}
+function getLogSource(log) {
+  return log.value?.args[2]?.name || "";
+}
+function hasExtraData(log) {
+  return !!(log.value?.args && log.value.args.length > 2 && log.value.args[1] && !(typeof log.value.args[1] === "object" && log.value.args[1] !== null && Object.keys(log.value.args[1]).length === 0));
+}
+function formatExtraData(log) {
+  if (!log.value?.args || log.value.args.length <= 1) return "";
+  return JSON.stringify(log.value.args[1], null, 2);
+}
+function getSearchableExtraData(log) {
+  if (!log.value?.args || log.value.args.length <= 1) return "";
+  const data = log.value.args[1];
+  if (!data) return "";
+  try {
+    const jsonStr = JSON.stringify(data);
+    const result = jsonStr.replace(/[{}[\]",:]/g, " ").replace(/\s+/g, " ").trim();
+    return result;
+  } catch {
+    return String(data);
+  }
+}
+function formatTime(date) {
+  return new Date(date).toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    fractionalSecondDigits: 3
+  });
+}
+function getLogType(log) {
+  return (log.value?.type || "info").toUpperCase();
+}
+function getLogDotClass(log) {
+  const type = log.value?.type || "info";
+  const classes = {
+    error: "bg-red-500",
+    warn: "bg-yellow-500",
+    info: "bg-blue-500",
+    debug: "bg-gray-400"
+  };
+  return classes[type] || classes.info;
+}
+function getLogBadgeColor(log) {
+  const type = log.value?.type || "info";
+  const colors = {
+    error: "red",
+    warn: "yellow",
+    info: "blue",
+    debug: "gray"
+  };
+  return colors[type] || colors.info;
+}
+async function clearLogs() {
+  const keys = await logsStorage.getKeys("log:");
+  await Promise.all(keys.map((key) => logsStorage.removeItem(key)));
+  logs.value = [];
+  expandedLogs.value.clear();
+  highlightedJson.value.clear();
+}
+</script>
+
+<style scoped>
+.log-entry{animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
+</style>
+
+<style>
+.json-code-block{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;line-height:1.4}.json-code-block pre{background:transparent!important;overflow:visible}.json-code-block code,.json-code-block pre{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}.json-code-block code{counter-increment:step 0;counter-reset:step;display:block}.json-code-block code .line:before{color:rgba(115,138,148,.4);content:counter(step);counter-increment:step;display:inline-block;margin-right:1.5rem;text-align:right;width:1rem}.dark .json-code-block code .line:before{color:#858080}
+</style>

package/dist/runtime/components/LogsTab.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/PowerSyncInstanceTab.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/PowerSyncInstanceTab.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h1>PowerSync Instance</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>

package/dist/runtime/components/PowerSyncInstanceTab.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/SyncStatusTab.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/SyncStatusTab.vue

@@ -0,0 +1,272 @@
+<template>
+  <div
+    border="t"
+    border-color="gray-100"
+    relative
+    n-bg="base"
+    flex="~ col"
+    h="screen"
+  >
+    <div flex="~ col gap-2">
+      <NSectionBlock
+        icon="carbon:data-share"
+        text="Data Flow"
+      >
+        <div
+          grid="~ cols-6 gap-4"
+          mb="4"
+        >
+          <!-- Download Progress -->
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Download Progress</span>
+            <div flex="~ items-center gap-2">
+              <template v-if="downloadProgressDetails !== null">
+                <div
+                  flex="1"
+                  bg="gray-200"
+                  rounded="full"
+                  h="2"
+                >
+                  <div
+                    bg="blue-600"
+                    h="2"
+                    rounded="full"
+                    transition="all"
+                    duration="300"
+                    :style="{
+  width: `${totalDownloadProgress}%`
+}"
+                  />
+                </div>
+                <span
+                  text="sm"
+                  font="medium"
+                >{{ totalDownloadProgress }}%</span>
+              </template>
+              <template v-else>
+                <span text="sm gray-400">No active download</span>
+              </template>
+            </div>
+          </div>
+
+          <!-- Error Indicator -->
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Status</span>
+            <NBadge
+              :n="downloadError ? 'red' : 'green'"
+              :icon="
+  downloadError ? 'carbon:warning-filled' : 'carbon:checkmark-filled'
+"
+            >
+              {{ downloadError ? "Error" : "Healthy" }}
+            </NBadge>
+          </div>
+
+          <!-- Error Details -->
+          <div
+            flex="~ col gap-2"
+            col="span-4"
+          >
+            <span text="sm gray-500">Error Message</span>
+            <NBadge
+              v-if="downloadError"
+              n="red sm"
+              icon="carbon:warning-filled"
+            >
+              {{ downloadError.message }}
+            </NBadge>
+            <NBadge
+              v-else
+              n="slate sm"
+              icon="carbon:checkmark-filled"
+            >
+              N/A
+            </NBadge>
+          </div>
+        </div>
+
+        <div
+          grid="~ cols-6 gap-4"
+          mb="4"
+        >
+          <!-- Upload Progress -->
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Upload Progress</span>
+            <div flex="~ items-center gap-2">
+              <span v-if="syncStatus?.dataFlowStatus.uploading">upload in progress...</span>
+              <span
+                v-else
+                text="sm gray-400"
+              >No active upload</span>
+            </div>
+          </div>
+
+          <!-- Error Indicator -->
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Status</span>
+            <NBadge
+              :n="uploadError ? 'red' : 'green'"
+              :icon="
+  uploadError ? 'carbon:warning-filled' : 'carbon:checkmark-filled'
+"
+            >
+              {{ uploadError ? "Error" : "Healthy" }}
+            </NBadge>
+          </div>
+
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Upload Queue Count</span>
+            <span text="sm"> {{ uploadQueueCount }} </span>
+          </div>
+
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Upload Queue Size</span>
+            <span text="sm">
+              {{ uploadQueueSize }}
+            </span>
+          </div>
+
+          <!-- Error Details -->
+          <div
+            flex="~ col gap-2"
+            col="span-2"
+          >
+            <span text="sm gray-500">Error Message</span>
+            <NBadge
+              v-if="uploadError"
+              n="red sm"
+              icon="carbon:warning-filled"
+            >
+              {{ uploadError.message }}
+            </NBadge>
+            <NBadge
+              v-else
+              n="slate sm"
+              icon="carbon:checkmark-filled"
+            >
+              N/A
+            </NBadge>
+          </div>
+        </div>
+      </NSectionBlock>
+
+      <span
+        border="b"
+        border-color="gray-100"
+      />
+
+      <NSectionBlock
+        icon="carbon:data-volume"
+        text="Data Size"
+      >
+        <NTip
+          v-if="!isDiagnosticSchemaSetup"
+          n="red6 dark:red5"
+          icon="carbon:warning-alt"
+        >
+          Make sure to extend your schema with the diagnostics schema using the
+          `diagnosticsSchema` from the `usePowerSyncInspector` composable.
+        </NTip>
+        <div
+          v-else
+          grid="~ cols-5 gap-4"
+          mb="4"
+        >
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Buckets Synced</span>
+            <span text="sm"> {{ totals?.buckets }} </span>
+          </div>
+
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Rows Synced</span>
+            <span text="sm"> {{ totals?.row_count }} </span>
+          </div>
+
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Data size</span>
+            <span text="sm">
+              {{ totals?.data_size }}
+            </span>
+          </div>
+
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Metadata size</span>
+            <span text="sm">
+              {{ totals?.metadata_size }}
+            </span>
+          </div>
+
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Download size</span>
+            <span text="sm">
+              {{ totals?.download_size }}
+            </span>
+          </div>
+        </div>
+      </NSectionBlock>
+
+      <span
+        border="b"
+        border-color="gray-100"
+      />
+
+      <NSectionBlock
+        icon="carbon:data-share"
+        text="Operations"
+      >
+        <NTip
+          v-if="!isDiagnosticSchemaSetup"
+          n="red6 dark:red5"
+          icon="carbon:warning-alt"
+        >
+          Make sure to extend your schema with the diagnostics schema using the
+          `diagnosticsSchema` from the `usePowerSyncInspector` composable.
+        </NTip>
+        <div
+          v-else
+          grid="~ cols-2 gap-4"
+          mb="4"
+        >
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Total operations</span>
+            <span text="sm">
+              {{ totals?.total_operations }}
+            </span>
+          </div>
+
+          <div flex="~ col gap-2">
+            <span text="sm gray-500">Downloaded operations</span>
+            <span text="sm">
+              {{ totals?.downloaded_operations }}
+            </span>
+          </div>
+        </div>
+      </NSectionBlock>
+
+      <span
+        border="b"
+        border-color="gray-100"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { usePowerSyncInspectorDiagnostics } from "#imports";
+import { onMounted } from "vue";
+const {
+  db,
+  isDiagnosticSchemaSetup,
+  syncStatus,
+  downloadProgressDetails,
+  totalDownloadProgress,
+  downloadError,
+  uploadError,
+  uploadQueueCount,
+  uploadQueueSize,
+  totals
+} = usePowerSyncInspectorDiagnostics();
+onMounted(async () => {
+  await db.value?.waitForFirstSync();
+});
+</script>

package/dist/runtime/components/SyncStatusTab.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useDiagnosticsLogger.d.ts

@@ -0,0 +1,27 @@
+import { type ILogHandler } from '@powersync/web';
+/**
+ * Provides a logger configured for PowerSync diagnostics.
+ *
+ * This composable creates a logger instance that is automatically configured for diagnostics
+ * recording. The logger stores logs in session storage and emits events for real-time log monitoring.
+ *
+ * @param customHandler - Optional custom log handler to process log messages
+ *
+ * @returns An object containing:
+ * - `logger` - The configured ILogHandler instance
+ * - `logsStorage` - Storage instance for log persistence
+ * - `emitter` - Event emitter for log events
+ *
+ * @example
+ * ```typescript
+ * const { logger } = useDiagnosticsLogger()
+ *
+ * // Logger is automatically configured for diagnostics
+ * // Use it in your PowerSync setup if needed
+ * ```
+ */
+export declare const useDiagnosticsLogger: (customHandler?: ILogHandler) => {
+    logger: import("js-logger").GlobalLogger;
+    logsStorage: import("unstorage").Storage<import("unstorage").StorageValue>;
+    emitter: import("mitt").Emitter<Record<import("mitt").EventType, unknown>>;
+};