@statezero/core 0.2.45 → 0.2.47

package/dist/adaptors/vue/components/StateZeroDebugPanel.js

@@ -0,0 +1,781 @@
+import { ref as f, computed as d, onMounted as qe, onBeforeUnmount as Me, watch as G, createElementBlock as a, openBlock as o, createElementVNode as t, createVNode as ue, toDisplayString as n, createCommentVNode as _, Fragment as y, renderList as w, normalizeClass as ce, normalizeStyle as W, withDirectives as q, createTextVNode as M, vModelCheckbox as ve, vModelSelect as _e, Transition as pe, withCtx as me } from "vue";
+import { querysets as Ie } from "../../../../composables.js";
+import { querysetStoreRegistry as Y } from "../../../../../../syncEngine/registries/querysetStoreRegistry.js";
+import { getDebugEntries as ze, startStateZeroDebug as Ve, setDebugMaxEntries as fe, subscribeDebugEvents as Qe, subscribeDebugClear as Re, clearDebugEntries as Le } from "../../../../../../debug/statezeroDebug.js";
+const je = (D, c) => {
+  const g = D.__vccOpts || D;
+  for (const [I, S] of c)
+    g[I] = S;
+  return g;
+}, Be = { class: "szd" }, Ue = { class: "szd-header" }, Je = { class: "szd-header__top" }, He = { class: "szd-header__left" }, Ze = {
+  key: 0,
+  class: "szd-header__model"
+}, Ge = {
+  key: 1,
+  class: "szd-header__model szd-header__model--empty"
+}, We = { class: "szd-header__right" }, Ye = {
+  key: 0,
+  class: "szd-header__badge szd-header__badge--syncing"
+}, Xe = {
+  key: 1,
+  class: "szd-header__badge"
+}, es = { class: "szd-header__badge" }, ss = { class: "szd-tabs" }, ts = ["onClick"], ls = { class: "szd-content" }, ns = {
+  key: 0,
+  class: "szd-panel"
+}, as = { class: "szd-panel__section" }, os = { class: "szd-kv" }, is = { class: "szd-kv__row" }, ds = { class: "szd-kv__value" }, rs = { class: "szd-kv__row" }, us = { class: "szd-kv__value" }, cs = { class: "szd-kv__row" }, vs = { class: "szd-kv__value" }, _s = { class: "szd-kv__row" }, ps = { class: "szd-kv__value" }, ms = { class: "szd-panel__section" }, zs = { class: "szd-stats" }, fs = { class: "szd-stat" }, ys = { class: "szd-stat__value" }, gs = { class: "szd-stat" }, hs = { class: "szd-stat__value" }, ks = { class: "szd-stat" }, bs = { class: "szd-stat__value" }, Ss = { class: "szd-stat" }, Cs = { class: "szd-stat__value" }, ws = {
+  class: "szd-kv",
+  style: { "margin-top": "12px" }
+}, Ts = { class: "szd-kv__row" }, Ns = { class: "szd-kv__value" }, Ks = {
+  key: 0,
+  class: "szd-panel__section"
+}, $s = { class: "szd-event-preview__text" }, As = { class: "szd-event-preview__time" }, Es = {
+  key: 1,
+  class: "szd-panel"
+}, xs = { class: "szd-timeline-filters" }, Ds = ["onUpdate:modelValue"], Os = { class: "szd-timeline" }, Fs = ["onClick"], Ps = { class: "szd-timeline__time" }, qs = { class: "szd-timeline__text" }, Ms = {
+  key: 0,
+  class: "szd-empty"
+}, Is = {
+  key: 2,
+  class: "szd-panel"
+}, Vs = { class: "szd-pipeline" }, Qs = ["onClick"], Rs = { class: "szd-pipeline__label" }, Ls = { class: "szd-pipeline__count" }, js = {
+  key: 0,
+  class: "szd-pipeline__arrow"
+}, Bs = {
+  class: "szd-panel__section",
+  style: { "margin-top": "20px" }
+}, Us = { class: "szd-preview-header" }, Js = ["value"], Hs = {
+  key: 0,
+  class: "szd-data-grid"
+}, Zs = { class: "szd-data-card__header" }, Gs = {
+  key: 0,
+  class: "szd-data-card__badge"
+}, Ws = {
+  key: 1,
+  class: "szd-data-card__badge szd-data-card__badge--absent"
+}, Ys = { class: "szd-data-card__content" }, Xs = {
+  key: 1,
+  class: "szd-empty"
+}, et = {
+  key: 3,
+  class: "szd-panel"
+}, st = {
+  class: "szd-kv",
+  style: { "margin-bottom": "16px" }
+}, tt = { class: "szd-kv__row" }, lt = { class: "szd-kv__value szd-kv__value--mono" }, nt = { class: "szd-ast" }, at = {
+  key: 0,
+  class: "szd-detail"
+}, ot = { class: "szd-detail__panel szd-detail__panel--sm" }, it = { class: "szd-detail__header" }, dt = { class: "szd-detail__body" }, rt = { class: "szd-settings-section" }, ut = ["value"], ct = {
+  key: 0,
+  class: "szd-settings-section"
+}, vt = { class: "szd-settings-row" }, _t = { class: "szd-settings-code" }, pt = { class: "szd-settings-section" }, mt = { class: "szd-settings-actions" }, zt = ["disabled"], ft = { class: "szd-settings-section" }, yt = { class: "szd-toggle" }, gt = {
+  key: 1,
+  class: "szd-settings-section"
+}, ht = { class: "szd-kv" }, kt = { class: "szd-kv__row" }, bt = { class: "szd-kv__value" }, St = { class: "szd-kv__row" }, Ct = { class: "szd-kv__value" }, wt = { class: "szd-kv__row" }, Tt = { class: "szd-kv__value" }, Nt = { class: "szd-kv__row" }, Kt = { class: "szd-kv__value" }, $t = { class: "szd-kv__row" }, At = { class: "szd-kv__value" }, Et = {
+  key: 0,
+  class: "szd-detail"
+}, xt = { class: "szd-detail__panel" }, Dt = { class: "szd-detail__header" }, Ot = { class: "szd-detail__title" }, Ft = { class: "szd-detail__body" }, Pt = { class: "szd-kv" }, qt = { class: "szd-kv__key" }, Mt = { class: "szd-kv__value" }, It = { class: "szd-ast" }, Vt = {
+  class: "szd-kv",
+  style: { "margin-bottom": "16px" }
+}, Qt = { class: "szd-kv__row" }, Rt = { class: "szd-kv__value" }, Lt = { class: "szd-kv__row" }, jt = { class: "szd-kv__value" }, Bt = {
+  key: 0,
+  class: "szd-kv__note"
+}, Ut = { class: "szd-ast" }, ye = 100, Jt = {
+  __name: "StateZeroDebugPanel",
+  props: {
+    queryset: { type: [Object, String], default: null },
+    useQueryset: { type: Boolean, default: !1 },
+    maxEntries: { type: Number, default: 500 },
+    sampleSize: { type: Number, default: 5 }
+  },
+  setup(D) {
+    const c = D, g = f("overview"), I = [
+      { id: "overview", label: "Overview" },
+      { id: "timeline", label: "Timeline" },
+      { id: "data", label: "Data" },
+      { id: "ast", label: "AST" }
+    ], S = f(""), X = f(c.useQueryset), V = f(!0), v = f(ze()), N = f(0), x = f(!1), r = f(null), O = f(!1), h = f(null), T = f({
+      request: !0,
+      response: !0,
+      render: !0,
+      operation: !0,
+      event: !0,
+      sync: !0,
+      routing: !0,
+      groupSync: !0,
+      error: !0
+    });
+    function ge(s, e) {
+      if (!s) return null;
+      let l = s;
+      return e && l && typeof l == "object" && "value" in l && (l = l.value), l?.original?.queryset ? l.original.queryset : l?.queryset ? l.queryset : l?.semanticKey ? l : null;
+    }
+    const F = d(
+      () => ge(c.queryset, X.value)
+    ), ee = d(() => {
+      N.value;
+      const s = [];
+      return Ie.forEach((e) => {
+        e?.semanticKey && s.push({
+          semanticKey: e.semanticKey,
+          modelName: e.ModelClass?.modelName,
+          configKey: e.ModelClass?.configKey,
+          queryset: e
+        });
+      }), s;
+    }), he = d(() => (N.value, Array.from(Y._stores.entries()).map(
+      ([s, e]) => ({
+        semanticKey: s,
+        modelName: e?.modelClass?.modelName,
+        configKey: e?.modelClass?.configKey,
+        store: e
+      })
+    ))), ke = d(() => {
+      const s = /* @__PURE__ */ new Map();
+      return ee.value.forEach((e) => {
+        s.set(e.semanticKey, e.queryset);
+      }), s;
+    }), be = d(() => {
+      const s = /* @__PURE__ */ new Map();
+      return ee.value.forEach((e) => {
+        s.set(e.semanticKey, e);
+      }), he.value.forEach((e) => {
+        s.has(e.semanticKey) || s.set(e.semanticKey, e);
+      }), Array.from(s.values());
+    }), p = d(() => F.value?.semanticKey ? F.value.semanticKey : S.value ? S.value : ""), K = d(() => F.value ? F.value : S.value && ke.value.get(S.value) || null), k = d(() => {
+      if (K.value)
+        try {
+          return Y.getStore(K.value);
+        } catch {
+          return null;
+        }
+      return p.value && Y._stores.get(p.value) || null;
+    }), u = d(() => {
+      N.value;
+      const s = k.value, e = K.value, l = s?.modelClass?.modelName || e?.ModelClass?.modelName, i = s?.modelClass?.configKey || e?.ModelClass?.configKey, m = s?.groundTruthPks?.length ?? 0, b = s?.operationsMap?.size ?? 0, C = s?.getInflightOperations?.() || [], E = s?.isSyncing ?? !1, P = s?.lastSync ? new Date(s.lastSync).toLocaleString() : "—", Z = s && Array.isArray(s._lastRenderedPks) ? s._lastRenderedPks.length : null, Oe = s?.groundTruthPks?.length ?? 0, Fe = s ? s.lastSync === null ? "model store" : "ground truth" : "—", Pe = E ? "Sync in progress — results may change." : b > 0 ? "Optimistic operations are applied to results." : s?.lastSync === null ? "No ground truth yet — rendering from model store." : "Using ground truth + local filters.";
+      return {
+        modelName: l,
+        configKey: i,
+        groundTruthCount: m,
+        opsCount: b,
+        inFlightCount: C.length,
+        isSyncing: E,
+        lastSync: P,
+        optimisticCount: Z,
+        confirmedCount: Oe,
+        source: Fe,
+        reason: Pe
+      };
+    }), Q = d(() => {
+      N.value;
+      try {
+        return k.value?.queryset?.build?.() || null;
+      } catch (s) {
+        return { error: s?.message || "Failed to build AST" };
+      }
+    });
+    function Se(s) {
+      if (!s?.filter?.conditions) return "—";
+      const e = s.filter.conditions;
+      return typeof e != "object" ? String(e) : Object.entries(e).map(([i, m]) => m === null ? `${i}: null` : typeof m == "object" ? `${i}: ${JSON.stringify(m)}` : `${i}: ${m}`).join(", ");
+    }
+    function Ce(s) {
+      const e = s?.orderBy;
+      return !e || Array.isArray(e) && e.length === 0 ? "—" : Array.isArray(e) ? e.join(", ") : String(e);
+    }
+    const R = d(() => {
+      const s = Q.value;
+      return {
+        filter: Se(s),
+        orderBy: Ce(s),
+        limit: s?.serializerOptions?.limit ?? "—"
+      };
+    });
+    function $(s, e, l, i) {
+      if (!s || !Array.isArray(l)) return [];
+      const m = [];
+      for (const b of l.slice(0, i))
+        try {
+          const C = s.fromPk(b, e);
+          C && m.push(C.serialize());
+        } catch {
+        }
+      return m;
+    }
+    const z = d(() => {
+      N.value;
+      const s = k.value, e = K.value;
+      if (!s || !e)
+        return {
+          modelStoreFiltered: [],
+          groundTruth: [],
+          optimistic: [],
+          filtered: [],
+          final: [],
+          modelStoreSample: [],
+          groundTruthSample: [],
+          optimisticSample: [],
+          filteredSample: [],
+          finalSample: [],
+          limit: null
+        };
+      const l = Array.isArray(s.groundTruthPks) ? [...s.groundTruthPks] : [], i = s.renderFromData(!0), m = s.renderFromData(!1), b = s._getValidatedAndFilteredPks(i), C = s.lastSync === null ? s.renderFromModelStore() : [], E = e.build()?.serializerOptions?.limit ?? null, P = E ? b.slice(0, E) : b, Z = C.length > 0 ? $(
+        s.modelClass,
+        e,
+        C,
+        c.sampleSize
+      ) : [];
+      return {
+        modelStoreFiltered: C,
+        groundTruth: l,
+        optimistic: i,
+        filtered: b,
+        final: P,
+        modelStoreSample: Z,
+        groundTruthSample: $(
+          s.modelClass,
+          e,
+          l,
+          c.sampleSize
+        ),
+        optimisticSample: $(
+          s.modelClass,
+          e,
+          i,
+          c.sampleSize
+        ),
+        filteredSample: $(
+          s.modelClass,
+          e,
+          b,
+          c.sampleSize
+        ),
+        finalSample: $(
+          s.modelClass,
+          e,
+          P,
+          c.sampleSize
+        ),
+        limit: E,
+        confirmed: m
+      };
+    }), L = d(() => [
+      { id: "model-store", label: "Model Store", count: z.value.modelStoreFiltered.length, pks: z.value.modelStoreFiltered },
+      { id: "ground-truth", label: "Ground Truth", count: z.value.groundTruth.length, pks: z.value.groundTruth },
+      { id: "optimistic", label: "Optimistic", count: z.value.optimistic.length, pks: z.value.optimistic },
+      { id: "filtered", label: "Filtered", count: z.value.filtered.length, pks: z.value.filtered },
+      { id: "final", label: "Final", count: z.value.final.length, pks: z.value.final }
+    ]), we = d(() => z.value.final || []);
+    function se(s) {
+      const e = k.value, l = K.value;
+      if (!e || !l || s == null) return null;
+      try {
+        const i = e.modelClass.fromPk(s, l);
+        return i ? i.serialize() : null;
+      } catch {
+        return null;
+      }
+    }
+    d(() => h.value == null ? null : se(h.value));
+    const te = d(() => {
+      if (!r.value || r.value.type !== "snapshot") return [];
+      const s = r.value.data, e = k.value, l = K.value;
+      return !e || !l || !s.pks ? [] : $(e.modelClass, l, s.pks, ye);
+    }), Te = d(() => !r.value || r.value.type !== "snapshot" ? !1 : r.value.data.count > ye), Ne = d(() => {
+      if (!p.value) return v.value;
+      const s = k.value;
+      return v.value.filter((e) => e.semanticKey === p.value ? !0 : s ? e.modelName === s.modelClass?.modelName && e.configKey === s.modelClass?.configKey : !1);
+    }), le = d(() => Ne.value.filter((s) => T.value[s.type])), Ke = d(() => v.value.length), A = d(
+      () => v.value.length ? v.value[v.value.length - 1] : null
+    ), ne = [
+      { id: "request", label: "Requests", color: "#3b82f6" },
+      { id: "response", label: "Responses", color: "#22c55e" },
+      { id: "render", label: "Renders", color: "#a855f7" },
+      { id: "operation", label: "Operations", color: "#f59e0b" },
+      { id: "event", label: "Events", color: "#ec4899" },
+      { id: "sync", label: "Sync", color: "#06b6d4" },
+      { id: "routing", label: "Routing", color: "#64748b" },
+      { id: "groupSync", label: "Group Sync", color: "#8b5cf6" },
+      { id: "error", label: "Errors", color: "#ef4444" }
+    ];
+    function ae(s) {
+      return ne.find((e) => e.id === s)?.color || "#6b7280";
+    }
+    function j(s) {
+      if (!s) return "";
+      try {
+        return new Date(s).toLocaleTimeString();
+      } catch {
+        return "";
+      }
+    }
+    function oe(s) {
+      if (!s) return "";
+      switch (s.type) {
+        case "request":
+          return `${s.operationType} → ${s.modelName}`;
+        case "response":
+          return `${s.operationType} ← ${s.modelName} (${s.dataCount})`;
+        case "render":
+          return `${s.source} (${s.resultCount})`;
+        case "operation":
+          return `${s.subtype} ${s.operationType || ""}`;
+        case "event":
+          return `${s.eventType} (${s.instanceCount || 0})`;
+        case "sync":
+          return `${s.phase} (${s.dataCount || 0})`;
+        case "routing":
+          return `${s.decision || "route"} (opt:${s.optimistic ? "y" : "n"}, verify:${s.verify ? "y" : "n"})`;
+        case "groupSync":
+          return `${s.phase} ${s.iAmRoot ? "(root)" : ""}`;
+        case "error":
+          return s.message || "error";
+        default:
+          return s.type;
+      }
+    }
+    function $e(s) {
+      if (!s) return null;
+      const e = {
+        type: s.type,
+        time: j(s.ts),
+        model: s.modelName,
+        config: s.configKey,
+        semanticKey: s.semanticKey
+      };
+      switch (s.type) {
+        case "request":
+          return { ...e, operation: s.operationType, url: s.url };
+        case "response":
+          return { ...e, operation: s.operationType, status: s.status, dataCount: s.dataCount, includedCount: s.includedCount };
+        case "render":
+          return { ...e, source: s.source, rawCount: s.rawCount, filteredCount: s.filteredCount, resultCount: s.resultCount, limit: s.limit, operationsCount: s.operationsCount };
+        case "operation":
+          return { ...e, operation: s.operationType, status: s.status, instanceCount: s.instanceCount };
+        case "event":
+          return { ...e, eventType: s.eventType, instanceCount: s.instanceCount, operationId: s.operationId };
+        case "routing":
+          return { ...e, operation: s.operationType, decision: s.decision, optimistic: s.optimistic, verify: s.verify };
+        case "groupSync":
+          return { ...e, phase: s.phase, rootKey: s.rootKey, iAmRoot: s.iAmRoot, dataCount: s.dataCount };
+        case "sync":
+          return { ...e, phase: s.phase, dataCount: s.dataCount, includedCount: s.includedCount };
+        case "error":
+          return { ...e, message: s.message, status: s.status };
+        default:
+          return e;
+      }
+    }
+    function Ae() {
+      Le(), v.value = [];
+    }
+    function Ee() {
+      !p.value || !navigator?.clipboard || navigator.clipboard.writeText(p.value);
+    }
+    async function xe() {
+      if (!(!k.value || x.value)) {
+        x.value = !0;
+        try {
+          await k.value.sync();
+        } catch {
+        } finally {
+          x.value = !1;
+        }
+      }
+    }
+    function ie(s) {
+      r.value = { type: "entry", data: s };
+    }
+    function De(s) {
+      r.value = { type: "snapshot", data: s };
+    }
+    function de() {
+      r.value = null;
+    }
+    function re(s) {
+      Object.keys(T.value).forEach((e) => {
+        T.value[e] = s;
+      });
+    }
+    let B = null, U = null, J = null, H = null;
+    return qe(() => {
+      Ve(), fe(c.maxEntries), B = Qe((s) => {
+        V.value && (v.value = [...v.value, s], v.value.length > c.maxEntries && (v.value = v.value.slice(-c.maxEntries)));
+      }), U = Re(() => {
+        v.value = [];
+      }), J = setInterval(() => {
+        N.value += 1;
+      }, 2e3), H = setInterval(() => {
+        v.value = ze();
+      }, 1e3);
+    }), Me(() => {
+      B && B(), U && U(), J && clearInterval(J), H && clearInterval(H);
+    }), G(
+      () => c.maxEntries,
+      (s) => fe(s)
+    ), G(
+      () => c.useQueryset,
+      (s) => {
+        X.value = s;
+      }
+    ), G(p, () => {
+      h.value = null;
+    }), (s, e) => (o(), a("section", Be, [
+      t("header", Ue, [
+        t("div", Je, [
+          t("div", He, [
+            e[9] || (e[9] = t("div", { class: "szd-header__title" }, "StateZero", -1)),
+            p.value ? (o(), a("span", Ze, n(u.value.modelName || "?"), 1)) : (o(), a("span", Ge, "No queryset"))
+          ]),
+          t("div", We, [
+            u.value.isSyncing ? (o(), a("span", Ye, "Syncing")) : _("", !0),
+            u.value.opsCount > 0 ? (o(), a("span", Xe, n(u.value.opsCount) + " ops", 1)) : _("", !0),
+            t("span", es, n(Ke.value) + " events", 1),
+            t("button", {
+              class: "szd-btn szd-btn--icon",
+              onClick: e[0] || (e[0] = (l) => O.value = !0),
+              title: "Settings"
+            }, [...e[10] || (e[10] = [
+              t("svg", {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2"
+              }, [
+                t("circle", {
+                  cx: "12",
+                  cy: "12",
+                  r: "3"
+                }),
+                t("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+              ], -1)
+            ])])
+          ])
+        ]),
+        t("nav", ss, [
+          (o(), a(y, null, w(I, (l) => t("button", {
+            key: l.id,
+            class: ce(["szd-tabs__tab", { "szd-tabs__tab--active": g.value === l.id }]),
+            onClick: (i) => g.value = l.id
+          }, n(l.label), 11, ts)), 64))
+        ])
+      ]),
+      t("main", ls, [
+        g.value === "overview" ? (o(), a("div", ns, [
+          t("div", as, [
+            e[15] || (e[15] = t("h3", { class: "szd-panel__heading" }, "Why This View?", -1)),
+            t("div", os, [
+              t("div", is, [
+                e[11] || (e[11] = t("span", { class: "szd-kv__key" }, "Filter:", -1)),
+                t("span", ds, n(R.value.filter), 1)
+              ]),
+              t("div", rs, [
+                e[12] || (e[12] = t("span", { class: "szd-kv__key" }, "Order:", -1)),
+                t("span", us, n(R.value.orderBy), 1)
+              ]),
+              t("div", cs, [
+                e[13] || (e[13] = t("span", { class: "szd-kv__key" }, "Limit:", -1)),
+                t("span", vs, n(R.value.limit), 1)
+              ]),
+              t("div", _s, [
+                e[14] || (e[14] = t("span", { class: "szd-kv__key" }, "Reason:", -1)),
+                t("span", ps, n(u.value.reason), 1)
+              ])
+            ])
+          ]),
+          t("div", ms, [
+            e[21] || (e[21] = t("h3", { class: "szd-panel__heading" }, "Current State", -1)),
+            t("div", zs, [
+              t("div", fs, [
+                t("div", ys, n(u.value.optimisticCount ?? "—"), 1),
+                e[16] || (e[16] = t("div", { class: "szd-stat__label" }, "Optimistic", -1))
+              ]),
+              t("div", gs, [
+                t("div", hs, n(u.value.confirmedCount), 1),
+                e[17] || (e[17] = t("div", { class: "szd-stat__label" }, "Confirmed", -1))
+              ]),
+              t("div", ks, [
+                t("div", bs, n(u.value.groundTruthCount), 1),
+                e[18] || (e[18] = t("div", { class: "szd-stat__label" }, "Ground Truth", -1))
+              ]),
+              t("div", Ss, [
+                t("div", Cs, n(u.value.inFlightCount), 1),
+                e[19] || (e[19] = t("div", { class: "szd-stat__label" }, "In-Flight", -1))
+              ])
+            ]),
+            t("div", ws, [
+              t("div", Ts, [
+                e[20] || (e[20] = t("span", { class: "szd-kv__key" }, "Last Sync:", -1)),
+                t("span", Ns, n(u.value.lastSync), 1)
+              ])
+            ])
+          ]),
+          A.value ? (o(), a("div", Ks, [
+            e[22] || (e[22] = t("h3", { class: "szd-panel__heading" }, "Last Event", -1)),
+            t("button", {
+              class: "szd-event-preview",
+              onClick: e[1] || (e[1] = (l) => ie(A.value))
+            }, [
+              t("span", {
+                class: "szd-event-preview__badge",
+                style: W({ background: ae(A.value.type) })
+              }, n(A.value.type), 5),
+              t("span", $s, n(oe(A.value)), 1),
+              t("span", As, n(j(A.value.ts)), 1)
+            ])
+          ])) : _("", !0)
+        ])) : _("", !0),
+        g.value === "timeline" ? (o(), a("div", Es, [
+          t("div", xs, [
+            t("button", {
+              class: "szd-btn szd-btn--sm",
+              onClick: e[2] || (e[2] = (l) => re(!0))
+            }, "All"),
+            t("button", {
+              class: "szd-btn szd-btn--sm",
+              onClick: e[3] || (e[3] = (l) => re(!1))
+            }, "None"),
+            (o(), a(y, null, w(ne, (l) => t("label", {
+              key: l.id,
+              class: ce(["szd-filter-chip", { "szd-filter-chip--active": T.value[l.id] }]),
+              style: W(T.value[l.id] ? { background: l.color, borderColor: l.color } : {})
+            }, [
+              q(t("input", {
+                type: "checkbox",
+                "onUpdate:modelValue": (i) => T.value[l.id] = i,
+                class: "szd-filter-chip__input"
+              }, null, 8, Ds), [
+                [ve, T.value[l.id]]
+              ]),
+              M(" " + n(l.label), 1)
+            ], 6)), 64))
+          ]),
+          t("div", Os, [
+            (o(!0), a(y, null, w(le.value, (l) => (o(), a("div", {
+              key: l.id,
+              class: "szd-timeline__item",
+              onClick: (i) => ie(l)
+            }, [
+              t("span", Ps, n(j(l.ts)), 1),
+              t("span", {
+                class: "szd-timeline__badge",
+                style: W({ background: ae(l.type) })
+              }, n(l.type), 5),
+              t("span", qs, n(oe(l)), 1)
+            ], 8, Fs))), 128)),
+            le.value.length ? _("", !0) : (o(), a("div", Ms, " No events match current filters "))
+          ])
+        ])) : _("", !0),
+        g.value === "data" ? (o(), a("div", Is, [
+          e[25] || (e[25] = t("h3", { class: "szd-panel__heading" }, "Data Pipeline", -1)),
+          t("div", Vs, [
+            (o(!0), a(y, null, w(L.value, (l, i) => (o(), a(y, {
+              key: l.id
+            }, [
+              t("div", {
+                class: "szd-pipeline__stage",
+                onClick: (m) => De(l)
+              }, [
+                t("div", Rs, n(l.label), 1),
+                t("div", Ls, n(l.count), 1)
+              ], 8, Qs),
+              i < L.value.length - 1 ? (o(), a("div", js, "→")) : _("", !0)
+            ], 64))), 128))
+          ]),
+          t("div", Bs, [
+            t("div", Us, [
+              e[24] || (e[24] = t("h3", { class: "szd-panel__heading" }, "Instance Preview", -1)),
+              q(t("select", {
+                "onUpdate:modelValue": e[4] || (e[4] = (l) => h.value = l),
+                class: "szd-select"
+              }, [
+                e[23] || (e[23] = t("option", { value: null }, "Select instance...", -1)),
+                (o(!0), a(y, null, w(we.value, (l) => (o(), a("option", {
+                  key: l,
+                  value: l
+                }, n(l), 9, Js))), 128))
+              ], 512), [
+                [_e, h.value]
+              ])
+            ]),
+            h.value != null ? (o(), a("div", Hs, [
+              (o(!0), a(y, null, w(L.value, (l) => (o(), a("div", {
+                key: l.id,
+                class: "szd-data-card"
+              }, [
+                t("div", Zs, [
+                  M(n(l.label) + " ", 1),
+                  l.pks.includes(h.value) ? (o(), a("span", Gs, "Present")) : (o(), a("span", Ws, "Absent"))
+                ]),
+                t("pre", Ys, n(l.pks.includes(h.value) ? JSON.stringify(se(h.value), null, 2) : "—"), 1)
+              ]))), 128))
+            ])) : (o(), a("div", Xs, "Select an instance to preview"))
+          ])
+        ])) : _("", !0),
+        g.value === "ast" ? (o(), a("div", et, [
+          e[27] || (e[27] = t("h3", { class: "szd-panel__heading" }, "Query AST", -1)),
+          t("div", st, [
+            t("div", tt, [
+              e[26] || (e[26] = t("span", { class: "szd-kv__key" }, "Semantic Key:", -1)),
+              t("code", lt, n(p.value || "—"), 1)
+            ])
+          ]),
+          t("pre", nt, n(Q.value ? JSON.stringify(Q.value, null, 2) : "Select a queryset to view AST"), 1)
+        ])) : _("", !0)
+      ]),
+      ue(pe, { name: "szd-slide" }, {
+        default: me(() => [
+          O.value ? (o(), a("div", at, [
+            t("div", {
+              class: "szd-detail__backdrop",
+              onClick: e[5] || (e[5] = (l) => O.value = !1)
+            }),
+            t("div", ot, [
+              t("div", it, [
+                e[28] || (e[28] = t("h3", { class: "szd-detail__title" }, "Debug Settings", -1)),
+                t("button", {
+                  class: "szd-btn",
+                  onClick: e[6] || (e[6] = (l) => O.value = !1)
+                }, "Close")
+              ]),
+              t("div", dt, [
+                t("div", rt, [
+                  e[30] || (e[30] = t("label", { class: "szd-settings-label" }, "Queryset", -1)),
+                  q(t("select", {
+                    "onUpdate:modelValue": e[7] || (e[7] = (l) => S.value = l),
+                    class: "szd-select szd-select--full"
+                  }, [
+                    e[29] || (e[29] = t("option", { value: "" }, "Select queryset...", -1)),
+                    (o(!0), a(y, null, w(be.value, (l) => (o(), a("option", {
+                      key: l.semanticKey,
+                      value: l.semanticKey
+                    }, n(l.modelName || "?") + " · " + n(l.semanticKey), 9, ut))), 128))
+                  ], 512), [
+                    [_e, S.value]
+                  ])
+                ]),
+                p.value ? (o(), a("div", ct, [
+                  e[31] || (e[31] = t("label", { class: "szd-settings-label" }, "Semantic Key", -1)),
+                  t("div", vt, [
+                    t("code", _t, n(p.value), 1),
+                    t("button", {
+                      class: "szd-btn szd-btn--sm",
+                      onClick: Ee
+                    }, "Copy")
+                  ])
+                ])) : _("", !0),
+                t("div", pt, [
+                  e[32] || (e[32] = t("label", { class: "szd-settings-label" }, "Actions", -1)),
+                  t("div", mt, [
+                    t("button", {
+                      class: "szd-btn",
+                      onClick: xe,
+                      disabled: !k.value || x.value
+                    }, n(x.value ? "Syncing..." : "Sync Now"), 9, zt),
+                    t("button", {
+                      class: "szd-btn",
+                      onClick: Ae
+                    }, "Clear Events")
+                  ])
+                ]),
+                t("div", ft, [
+                  e[34] || (e[34] = t("label", { class: "szd-settings-label" }, "Options", -1)),
+                  t("label", yt, [
+                    q(t("input", {
+                      type: "checkbox",
+                      "onUpdate:modelValue": e[8] || (e[8] = (l) => V.value = l)
+                    }, null, 512), [
+                      [ve, V.value]
+                    ]),
+                    e[33] || (e[33] = M(" Live updates ", -1))
+                  ])
+                ]),
+                p.value ? (o(), a("div", gt, [
+                  e[40] || (e[40] = t("label", { class: "szd-settings-label" }, "Current State", -1)),
+                  t("div", ht, [
+                    t("div", kt, [
+                      e[35] || (e[35] = t("span", { class: "szd-kv__key" }, "Model:", -1)),
+                      t("span", bt, n(u.value.modelName || "—"), 1)
+                    ]),
+                    t("div", St, [
+                      e[36] || (e[36] = t("span", { class: "szd-kv__key" }, "Source:", -1)),
+                      t("span", Ct, n(u.value.source), 1)
+                    ]),
+                    t("div", wt, [
+                      e[37] || (e[37] = t("span", { class: "szd-kv__key" }, "Syncing:", -1)),
+                      t("span", Tt, n(u.value.isSyncing ? "Yes" : "No"), 1)
+                    ]),
+                    t("div", Nt, [
+                      e[38] || (e[38] = t("span", { class: "szd-kv__key" }, "Operations:", -1)),
+                      t("span", Kt, n(u.value.opsCount), 1)
+                    ]),
+                    t("div", $t, [
+                      e[39] || (e[39] = t("span", { class: "szd-kv__key" }, "Last Sync:", -1)),
+                      t("span", At, n(u.value.lastSync), 1)
+                    ])
+                  ])
+                ])) : _("", !0)
+              ])
+            ])
+          ])) : _("", !0)
+        ]),
+        _: 1
+      }),
+      ue(pe, { name: "szd-slide" }, {
+        default: me(() => [
+          r.value ? (o(), a("div", Et, [
+            t("div", {
+              class: "szd-detail__backdrop",
+              onClick: de
+            }),
+            t("div", xt, [
+              t("div", Dt, [
+                t("h3", Ot, n(r.value.type === "entry" ? "Event Detail" : "Snapshot: " + r.value.data.label), 1),
+                t("button", {
+                  class: "szd-btn",
+                  onClick: de
+                }, "Close")
+              ]),
+              t("div", Ft, [
+                r.value.type === "entry" ? (o(), a(y, { key: 0 }, [
+                  t("div", Pt, [
+                    (o(!0), a(y, null, w($e(r.value.data), (l, i) => (o(), a("div", {
+                      key: i,
+                      class: "szd-kv__row"
+                    }, [
+                      t("span", qt, n(i) + ":", 1),
+                      t("span", Mt, n(l ?? "—"), 1)
+                    ]))), 128))
+                  ]),
+                  e[41] || (e[41] = t("h4", { style: { margin: "16px 0 8px" } }, "Raw JSON", -1)),
+                  t("pre", It, n(JSON.stringify(r.value.data, null, 2)), 1)
+                ], 64)) : (o(), a(y, { key: 1 }, [
+                  t("div", Vt, [
+                    t("div", Qt, [
+                      e[42] || (e[42] = t("span", { class: "szd-kv__key" }, "Total Count:", -1)),
+                      t("span", Rt, n(r.value.data.count), 1)
+                    ]),
+                    t("div", Lt, [
+                      e[43] || (e[43] = t("span", { class: "szd-kv__key" }, "Showing:", -1)),
+                      t("span", jt, [
+                        M(n(te.value.length) + " items ", 1),
+                        Te.value ? (o(), a("span", Bt, "(limited to first 100)")) : _("", !0)
+                      ])
+                    ])
+                  ]),
+                  e[44] || (e[44] = t("h4", { style: { margin: "0 0 8px" } }, "Data", -1)),
+                  t("pre", Ut, n(JSON.stringify(te.value, null, 2)), 1)
+                ], 64))
+              ])
+            ])
+          ])) : _("", !0)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+}, Yt = /* @__PURE__ */ je(Jt, [["__scopeId", "data-v-6d80920c"]]);
+export {
+  Yt as default
+};