@qwik.dev/devtools 0.2.7 → 0.3.0-beta.3

package/dist/ui/packages/devtools/ui/src/features/Preloads/Preloads.qwik.mjs

@@ -0,0 +1,478 @@
+import { componentQrl, inlinedQrl, useSignal, useStore, useVisibleTaskQrl, _captures, useComputedQrl, _jsxSorted, _fnSignal, _wrapProp } from "@qwik.dev/core";
+import { StatCard } from "../Performance/components/StatCard.qwik.mjs";
+import { formatMs } from "../Performance/utils/formatMs.qwik.mjs";
+import { computePreloadViewModel, filterPreloadRows, createDefaultPreloadFilters } from "./computePreloadViewModel.qwik.mjs";
+import { getPageDataSource } from "../../devtools/page-data-source.qwik.mjs";
+const _hf0 = (p0) => `${p0.value.overview.csr} CSR • ${p0.value.overview.ssr} SSR`;
+const _hf1 = (p0) => p0.value.initialized ? "active" : "inactive";
+const _hf2 = (p0) => p0.value.qrlRequests;
+const _hf3 = (p0) => p0.value.sourceCounts["current-project"];
+const _hf4 = (p0) => p0.rel || "-";
+const _hf5 = (p0) => p0.as || p0.resourceType || "-";
+const DEFAULT_FILTERS = createDefaultPreloadFilters();
+const FILTERS = [
+  {
+    id: "all",
+    label: "All"
+  },
+  {
+    id: "loaded",
+    label: "Loaded"
+  },
+  {
+    id: "pending",
+    label: "Pending"
+  },
+  {
+    id: "error",
+    label: "Error"
+  },
+  {
+    id: "qrl-correlated",
+    label: "QRL Matched"
+  },
+  {
+    id: "unmatched",
+    label: "Unmatched"
+  }
+];
+function formatRelativeMs(ms) {
+  if (!Number.isFinite(ms)) {
+    return "-";
+  }
+  return `${(ms || 0).toFixed(2)}ms`;
+}
+function makeLabelCount(label, count) {
+  return `${label} (${count})`;
+}
+const Preloads = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
+  const version = useSignal(0);
+  const activeFilter = useSignal("all");
+  const sourceFilters = useStore({
+    ...DEFAULT_FILTERS.sourceFilters
+  });
+  const phaseFilters = useStore({
+    ...DEFAULT_FILTERS.phaseFilters
+  });
+  const store = useSignal(null);
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(async () => {
+    const store2 = _captures[0], version2 = _captures[1];
+    const source = getPageDataSource();
+    store2.value = await source.readPreloadStore();
+    version2.value++;
+    const refresh = () => {
+      source.readPreloadStore().then((s) => {
+        store2.value = s;
+        version2.value++;
+      });
+    };
+    const unsub = source.subscribePreloadUpdates(refresh);
+    return () => {
+      unsub?.();
+    };
+  }, "Preloads_component_useVisibleTask_0vUhmjcSbAc", [
+    store,
+    version
+  ]));
+  const vm = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const phaseFilters2 = _captures[0], sourceFilters2 = _captures[1], store2 = _captures[2], version2 = _captures[3];
+    version2.value;
+    return computePreloadViewModel(store2.value, {
+      sourceFilters: {
+        ...sourceFilters2
+      },
+      phaseFilters: {
+        ...phaseFilters2
+      }
+    });
+  }, "Preloads_component_vm_useComputed_OQEJfIwCbOM", [
+    phaseFilters,
+    sourceFilters,
+    store,
+    version
+  ]));
+  const rows = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const activeFilter2 = _captures[0], vm2 = _captures[1];
+    return filterPreloadRows(vm2.value.rows, activeFilter2.value);
+  }, "Preloads_component_rows_useComputed_Zff0cdUKId0", [
+    activeFilter,
+    vm
+  ]));
+  const runtimeState = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const store2 = _captures[0], version2 = _captures[1];
+    version2.value;
+    return {
+      initialized: !!store2.value,
+      qrlRequests: store2.value?.qrlRequests.length ?? 0
+    };
+  }, "Preloads_component_runtimeState_useComputed_EHPIU4e0Nko", [
+    store,
+    version
+  ]));
+  const clear = /* @__PURE__ */ inlinedQrl(async () => {
+    const store2 = _captures[0], version2 = _captures[1];
+    const source = getPageDataSource();
+    await source.clearPreloadStore();
+    store2.value = await source.readPreloadStore();
+    version2.value++;
+  }, "Preloads_component_clear_zTejYm3eOBI", [
+    store,
+    version
+  ]);
+  const toggleSourceFilter = /* @__PURE__ */ inlinedQrl((key) => {
+    const sourceFilters2 = _captures[0];
+    sourceFilters2[key] = !sourceFilters2[key];
+  }, "Preloads_component_toggleSourceFilter_zJPQ6oCTEQw", [
+    sourceFilters
+  ]);
+  const togglePhaseFilter = /* @__PURE__ */ inlinedQrl((key) => {
+    const phaseFilters2 = _captures[0];
+    phaseFilters2[key] = !phaseFilters2[key];
+  }, "Preloads_component_togglePhaseFilter_TkDMzfHnpcI", [
+    phaseFilters
+  ]);
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "h-full w-full flex-1 overflow-auto"
+  }, /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "flex min-h-full flex-col gap-4"
+  }, [
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5"
+    }, [
+      /* @__PURE__ */ _jsxSorted(StatCard, {
+        value: String(vm.value.overview.total)
+      }, {
+        label: "Visible QRLs",
+        subtitle: _fnSignal(_hf0, [
+          vm
+        ])
+      }, null, 3, "LY_0"),
+      /* @__PURE__ */ _jsxSorted(StatCard, {
+        subtitle: `Max ${formatMs(vm.value.overview.maxImportDuration)}`,
+        value: formatMs(vm.value.overview.avgImportDuration)
+      }, {
+        label: "Average Import Duration"
+      }, null, 3, "LY_1"),
+      /* @__PURE__ */ _jsxSorted(StatCard, {
+        subtitle: `Max ${formatMs(vm.value.overview.maxLoadDuration)}`,
+        value: formatMs(vm.value.overview.avgLoadDuration)
+      }, {
+        label: "Average Load Duration"
+      }, null, 3, "LY_2"),
+      /* @__PURE__ */ _jsxSorted(StatCard, {
+        value: String(vm.value.overview.correlated)
+      }, {
+        label: "Preloaded Before Use",
+        subtitle: "Matched before the QRL fired"
+      }, null, 3, "LY_3"),
+      /* @__PURE__ */ _jsxSorted(StatCard, {
+        value: String(Math.max(0, vm.value.overview.total - vm.value.overview.correlated))
+      }, {
+        label: "Missed Preloads",
+        subtitle: "QRLs that were used first"
+      }, null, 3, "LY_4")
+    ], 1, null),
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "border-glass-border bg-card-item-bg flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border"
+    }, [
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "border-glass-border flex flex-wrap items-start justify-between gap-4 border-b p-4"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "flex flex-col gap-3"
+        }, [
+          /* @__PURE__ */ _jsxSorted("div", null, {
+            class: "text-muted-foreground text-[11px]"
+          }, [
+            "Runtime: ",
+            _fnSignal(_hf1, [
+              runtimeState
+            ]),
+            " • QRL requests:",
+            " ",
+            _fnSignal(_hf2, [
+              runtimeState
+            ])
+          ], 3, null),
+          /* @__PURE__ */ _jsxSorted("div", null, {
+            class: "flex flex-wrap gap-2"
+          }, FILTERS.map((filter) => {
+            const qrl_0 = /* @__PURE__ */ inlinedQrl((_, _1, filter2) => {
+              const activeFilter2 = _captures[0];
+              activeFilter2.value = filter2.id;
+            }, "Preloads_component_div_div_div_div_div_div_button_q_e_click_mEfAxj9bfwU", [
+              activeFilter
+            ]).m();
+            return /* @__PURE__ */ _jsxSorted("button", {
+              class: activeFilter.value === filter.id ? "bg-primary text-primary-foreground rounded-full px-3 py-1.5 text-xs font-medium" : "border-border text-muted-foreground rounded-full border px-3 py-1.5 text-xs font-medium",
+              "q-e:click": qrl_0,
+              "q:p": filter
+            }, {
+              type: "button"
+            }, _wrapProp(filter, "label"), 4, filter.id);
+          }), 1, null),
+          /* @__PURE__ */ _jsxSorted("div", null, {
+            class: "flex flex-wrap gap-2"
+          }, [
+            /* @__PURE__ */ _jsxSorted("div", null, {
+              class: "text-muted-foreground mr-1 text-xs font-medium tracking-wide uppercase"
+            }, "Sources", 3, null),
+            /* @__PURE__ */ _jsxSorted("label", null, {
+              class: "border-border text-muted-foreground flex cursor-default items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium opacity-90"
+            }, [
+              /* @__PURE__ */ _jsxSorted("input", null, {
+                type: "checkbox",
+                checked: true,
+                disabled: true,
+                class: "h-3.5 w-3.5 rounded"
+              }, null, 3, null),
+              "Current Project (",
+              _fnSignal(_hf3, [
+                vm
+              ]),
+              ")"
+            ], 3, null),
+            /* @__PURE__ */ _jsxSorted("label", null, {
+              class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium"
+            }, [
+              /* @__PURE__ */ _jsxSorted("input", {
+                "q-e:change": /* @__PURE__ */ inlinedQrl((_, _1, toggleSourceFilter2) => toggleSourceFilter2("vitePluginInjected"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_PO4w6A5Idk4").m(),
+                "q:p": toggleSourceFilter
+              }, {
+                type: "checkbox",
+                checked: _wrapProp(sourceFilters, "vitePluginInjected"),
+                class: "h-3.5 w-3.5 rounded focus:ring-0",
+                style: {
+                  accentColor: "var(--color-primary-active)"
+                }
+              }, null, 6, null),
+              makeLabelCount("Vite Plugin Injected", vm.value.sourceCounts["vite-plugin-injected"])
+            ], 1, null),
+            /* @__PURE__ */ _jsxSorted("label", null, {
+              class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium"
+            }, [
+              /* @__PURE__ */ _jsxSorted("input", {
+                "q-e:change": /* @__PURE__ */ inlinedQrl((_, _1, toggleSourceFilter2) => toggleSourceFilter2("nodeModules"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_1_a4f6Hw5N5s4").m(),
+                "q:p": toggleSourceFilter
+              }, {
+                type: "checkbox",
+                checked: _wrapProp(sourceFilters, "nodeModules"),
+                class: "h-3.5 w-3.5 rounded focus:ring-0",
+                style: {
+                  accentColor: "var(--color-primary-active)"
+                }
+              }, null, 6, null),
+              makeLabelCount("Node Modules", vm.value.sourceCounts.node_modules)
+            ], 1, null),
+            /* @__PURE__ */ _jsxSorted("label", null, {
+              class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium"
+            }, [
+              /* @__PURE__ */ _jsxSorted("input", {
+                "q-e:change": /* @__PURE__ */ inlinedQrl((_, _1, toggleSourceFilter2) => toggleSourceFilter2("virtualModule"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_2_JsdB9QG1WM0").m(),
+                "q:p": toggleSourceFilter
+              }, {
+                type: "checkbox",
+                checked: _wrapProp(sourceFilters, "virtualModule"),
+                class: "h-3.5 w-3.5 rounded focus:ring-0",
+                style: {
+                  accentColor: "var(--color-primary-active)"
+                }
+              }, null, 6, null),
+              makeLabelCount("Virtual Module", vm.value.sourceCounts["virtual-module"])
+            ], 1, null),
+            /* @__PURE__ */ _jsxSorted("label", null, {
+              class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium"
+            }, [
+              /* @__PURE__ */ _jsxSorted("input", {
+                "q-e:change": /* @__PURE__ */ inlinedQrl((_, _1, toggleSourceFilter2) => toggleSourceFilter2("generated"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_3_90iPosvF3mQ").m(),
+                "q:p": toggleSourceFilter
+              }, {
+                type: "checkbox",
+                checked: _wrapProp(sourceFilters, "generated"),
+                class: "h-3.5 w-3.5 rounded focus:ring-0",
+                style: {
+                  accentColor: "var(--color-primary-active)"
+                }
+              }, null, 6, null),
+              makeLabelCount("Generated", vm.value.sourceCounts.generated)
+            ], 1, null),
+            /* @__PURE__ */ _jsxSorted("label", null, {
+              class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium"
+            }, [
+              /* @__PURE__ */ _jsxSorted("input", {
+                "q-e:change": /* @__PURE__ */ inlinedQrl((_, _1, toggleSourceFilter2) => toggleSourceFilter2("external"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_4_AuLKgSZkHes").m(),
+                "q:p": toggleSourceFilter
+              }, {
+                type: "checkbox",
+                checked: _wrapProp(sourceFilters, "external"),
+                class: "h-3.5 w-3.5 rounded focus:ring-0",
+                style: {
+                  accentColor: "var(--color-primary-active)"
+                }
+              }, null, 6, null),
+              makeLabelCount("External", vm.value.sourceCounts.external)
+            ], 1, null),
+            /* @__PURE__ */ _jsxSorted("label", null, {
+              class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium"
+            }, [
+              /* @__PURE__ */ _jsxSorted("input", {
+                "q-e:change": /* @__PURE__ */ inlinedQrl((_, _1, toggleSourceFilter2) => toggleSourceFilter2("unknown"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_5_0E0MQZDqb5U").m(),
+                "q:p": toggleSourceFilter
+              }, {
+                type: "checkbox",
+                checked: _wrapProp(sourceFilters, "unknown"),
+                class: "h-3.5 w-3.5 rounded focus:ring-0",
+                style: {
+                  accentColor: "var(--color-primary-active)"
+                }
+              }, null, 6, null),
+              makeLabelCount("Unknown", vm.value.sourceCounts.unknown)
+            ], 1, null)
+          ], 1, null),
+          /* @__PURE__ */ _jsxSorted("div", null, {
+            class: "flex flex-wrap gap-2"
+          }, [
+            /* @__PURE__ */ _jsxSorted("div", null, {
+              class: "text-muted-foreground mr-1 text-xs font-medium tracking-wide uppercase"
+            }, "Phase", 3, null),
+            /* @__PURE__ */ _jsxSorted("label", null, {
+              class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium"
+            }, [
+              /* @__PURE__ */ _jsxSorted("input", {
+                "q-e:change": /* @__PURE__ */ inlinedQrl((_, _1, togglePhaseFilter2) => togglePhaseFilter2("csr"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_6_L5lgZJlMTm8").m(),
+                "q:p": togglePhaseFilter
+              }, {
+                type: "checkbox",
+                checked: _wrapProp(phaseFilters, "csr"),
+                class: "h-3.5 w-3.5 rounded focus:ring-0",
+                style: {
+                  accentColor: "var(--color-primary-active)"
+                }
+              }, null, 6, null),
+              makeLabelCount("CSR", vm.value.phaseCounts.csr)
+            ], 1, null),
+            /* @__PURE__ */ _jsxSorted("label", null, {
+              class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium"
+            }, [
+              /* @__PURE__ */ _jsxSorted("input", {
+                "q-e:change": /* @__PURE__ */ inlinedQrl((_, _1, togglePhaseFilter2) => togglePhaseFilter2("ssr"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_7_PiCA1ivS01Y").m(),
+                "q:p": togglePhaseFilter
+              }, {
+                type: "checkbox",
+                checked: _wrapProp(phaseFilters, "ssr"),
+                class: "h-3.5 w-3.5 rounded focus:ring-0",
+                style: {
+                  accentColor: "var(--color-primary-active)"
+                }
+              }, null, 6, null),
+              makeLabelCount("SSR", vm.value.phaseCounts.ssr)
+            ], 1, null)
+          ], 1, null)
+        ], 1, null),
+        /* @__PURE__ */ _jsxSorted("button", null, {
+          type: "button",
+          class: "border-border text-muted-foreground rounded-full border px-3 py-1.5 text-xs font-medium",
+          "q-e:click": clear
+        }, "Clear", 3, null)
+      ], 1, null),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "min-h-0 flex-1 overflow-auto"
+      }, /* @__PURE__ */ _jsxSorted("table", null, {
+        class: "w-full min-w-[1080px] text-left text-sm"
+      }, [
+        /* @__PURE__ */ _jsxSorted("thead", null, {
+          class: "bg-background/60 text-muted-foreground sticky top-0 z-10 text-xs tracking-wide uppercase"
+        }, /* @__PURE__ */ _jsxSorted("tr", null, null, [
+          /* @__PURE__ */ _jsxSorted("th", null, {
+            class: "px-4 py-3 font-medium"
+          }, "Content", 3, null),
+          /* @__PURE__ */ _jsxSorted("th", null, {
+            class: "px-4 py-3 font-medium"
+          }, "Type", 3, null),
+          /* @__PURE__ */ _jsxSorted("th", null, {
+            class: "px-4 py-3 font-medium"
+          }, "Environment", 3, null),
+          /* @__PURE__ */ _jsxSorted("th", null, {
+            class: "px-4 py-3 font-medium"
+          }, "Status", 3, null),
+          /* @__PURE__ */ _jsxSorted("th", null, {
+            class: "px-4 py-3 font-medium"
+          }, "Import Duration", 3, null),
+          /* @__PURE__ */ _jsxSorted("th", null, {
+            class: "px-4 py-3 font-medium"
+          }, "Load Duration", 3, null),
+          /* @__PURE__ */ _jsxSorted("th", null, {
+            class: "px-4 py-3 font-medium"
+          }, "QRL Requested", 3, null)
+        ], 3, null), 3, null),
+        /* @__PURE__ */ _jsxSorted("tbody", null, null, rows.value.length ? rows.value.map((row) => /* @__PURE__ */ _jsxSorted("tr", null, {
+          class: "border-glass-border border-t align-top"
+        }, [
+          /* @__PURE__ */ _jsxSorted("td", null, {
+            class: "px-4 py-3"
+          }, [
+            /* @__PURE__ */ _jsxSorted("div", null, {
+              class: "font-medium break-all"
+            }, _wrapProp(row, "shortHref"), 1, null),
+            /* @__PURE__ */ _jsxSorted("div", null, {
+              class: "text-muted-foreground mt-1 text-xs break-all"
+            }, _wrapProp(row, "href"), 1, null),
+            row.qrlSymbol ? /* @__PURE__ */ _jsxSorted("div", null, {
+              class: "text-muted-foreground mt-1 text-xs"
+            }, [
+              "Symbol: ",
+              _wrapProp(row, "qrlSymbol")
+            ], 1, "LY_5") : null
+          ], 1, null),
+          /* @__PURE__ */ _jsxSorted("td", null, {
+            class: "px-4 py-3"
+          }, [
+            /* @__PURE__ */ _jsxSorted("div", null, null, _fnSignal(_hf4, [
+              row
+            ]), 1, null),
+            /* @__PURE__ */ _jsxSorted("div", null, {
+              class: "text-muted-foreground mt-1 text-xs"
+            }, _fnSignal(_hf5, [
+              row
+            ]), 1, null),
+            /* @__PURE__ */ _jsxSorted("div", null, {
+              class: "text-muted-foreground mt-1 text-[11px] tracking-wide uppercase"
+            }, _wrapProp(row, "originKind"), 1, null)
+          ], 1, null),
+          /* @__PURE__ */ _jsxSorted("td", null, {
+            class: "px-4 py-3"
+          }, /* @__PURE__ */ _jsxSorted("div", null, {
+            class: "font-medium tracking-wide uppercase"
+          }, _wrapProp(row, "phase"), 1, null), 1, null),
+          /* @__PURE__ */ _jsxSorted("td", null, {
+            class: "px-4 py-3"
+          }, [
+            /* @__PURE__ */ _jsxSorted("div", null, {
+              class: "font-medium"
+            }, _wrapProp(row, "status"), 1, null),
+            /* @__PURE__ */ _jsxSorted("div", null, {
+              class: "text-muted-foreground mt-1 text-xs"
+            }, _wrapProp(row, "source"), 1, null)
+          ], 1, null),
+          /* @__PURE__ */ _jsxSorted("td", null, {
+            class: "px-4 py-3"
+          }, formatMs(row.importDuration ?? NaN), 1, null),
+          /* @__PURE__ */ _jsxSorted("td", null, {
+            class: "px-4 py-3"
+          }, formatMs(row.loadDuration ?? NaN), 1, null),
+          /* @__PURE__ */ _jsxSorted("td", null, {
+            class: "px-4 py-3"
+          }, formatRelativeMs(row.qrlRequestedAt), 1, null)
+        ], 1, row.id)) : /* @__PURE__ */ _jsxSorted("tr", null, {
+          class: "border-glass-border border-t"
+        }, /* @__PURE__ */ _jsxSorted("td", null, {
+          class: "text-muted-foreground px-4 py-8 text-center text-sm",
+          colSpan: 7
+        }, "No rows match the current filters. Uncheck a filter or re-enable CSR to view data.", 3, null), 3, "LY_6"), 1, null)
+      ], 1, null), 1, null)
+    ], 1, null)
+  ], 1, null), 1, "LY_7");
+}, "Preloads_component_fKcrex5znk4"));
+export {
+  Preloads
+};

package/dist/ui/packages/devtools/ui/src/features/Preloads/computePreloadViewModel.qwik.mjs

@@ -0,0 +1,178 @@
+const DEFAULT_SOURCE_FILTERS = {
+  vitePluginInjected: false,
+  nodeModules: false,
+  virtualModule: false,
+  generated: false,
+  external: false,
+  unknown: false
+};
+const DEFAULT_PHASE_FILTERS = {
+  csr: true,
+  ssr: true
+};
+function createDefaultPreloadFilters() {
+  return {
+    sourceFilters: {
+      ...DEFAULT_SOURCE_FILTERS
+    },
+    phaseFilters: {
+      ...DEFAULT_PHASE_FILTERS
+    }
+  };
+}
+function summarizeHref(href) {
+  try {
+    const url = new URL(href);
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch {
+    return href;
+  }
+}
+function latestTimestamp(entry) {
+  return entry.completedAt ?? entry.requestedAt ?? entry.discoveredAt;
+}
+function averageBy(entries, field) {
+  const timed = entries.filter((entry) => typeof entry[field] === "number");
+  if (timed.length === 0) {
+    return 0;
+  }
+  const total = timed.reduce((sum, entry) => sum + (entry[field] || 0), 0);
+  return total / timed.length;
+}
+function buildRow(entry) {
+  return {
+    id: entry.id,
+    href: entry.href,
+    shortHref: summarizeHref(entry.href),
+    rel: entry.rel,
+    as: entry.as,
+    resourceType: entry.resourceType,
+    status: entry.status,
+    source: entry.source,
+    originKind: entry.originKind,
+    phase: entry.phase,
+    importDuration: entry.importDuration ?? entry.duration,
+    loadDuration: entry.loadDuration ?? entry.qrlToLoadDuration,
+    qrlRequestedAt: entry.qrlRequestedAt,
+    loadMatchQuality: entry.loadMatchQuality || "none",
+    matchedBy: entry.matchedBy,
+    qrlSymbol: entry.qrlSymbol,
+    latestAt: latestTimestamp(entry)
+  };
+}
+function matchesOrigin(row, filters) {
+  if (row.originKind === "current-project") {
+    return true;
+  }
+  switch (row.originKind) {
+    case "vite-plugin-injected":
+      return filters.vitePluginInjected;
+    case "node_modules":
+      return filters.nodeModules;
+    case "virtual-module":
+      return filters.virtualModule;
+    case "generated":
+      return filters.generated;
+    case "external":
+      return filters.external;
+    case "unknown":
+      return filters.unknown;
+    default:
+      return false;
+  }
+}
+function matchesPhase(row, filters) {
+  if (row.phase === "unknown") {
+    return false;
+  }
+  return filters[row.phase];
+}
+function filterPreloadRows(rows, filter) {
+  switch (filter) {
+    case "loaded":
+    case "pending":
+    case "error":
+      return rows.filter((row) => row.status === filter);
+    case "qrl-correlated":
+      return rows.filter((row) => typeof row.qrlRequestedAt === "number");
+    case "unmatched":
+      return rows.filter((row) => typeof row.qrlRequestedAt !== "number");
+    default:
+      return rows;
+  }
+}
+function computePreloadViewModel(store, filters = createDefaultPreloadFilters()) {
+  const entries = store?.entries ?? [];
+  const rows = entries.map(buildRow);
+  const sourceCounts = {
+    "current-project": 0,
+    "vite-plugin-injected": 0,
+    node_modules: 0,
+    "virtual-module": 0,
+    generated: 0,
+    external: 0,
+    unknown: 0
+  };
+  const phaseCounts = {
+    csr: 0,
+    ssr: 0,
+    unknown: 0
+  };
+  for (const row of rows) {
+    sourceCounts[row.originKind] += 1;
+    phaseCounts[row.phase] += 1;
+  }
+  const visibleRows = rows.filter((row) => matchesOrigin(row, filters.sourceFilters)).filter((row) => matchesPhase(row, filters.phaseFilters)).sort((a, b) => b.latestAt - a.latestAt);
+  const visibleEntries = entries.filter((entry) => {
+    const origin = entry.originKind;
+    if (origin === "current-project") {
+      return true;
+    }
+    const sourceFilters = filters.sourceFilters;
+    switch (origin) {
+      case "vite-plugin-injected":
+        return sourceFilters.vitePluginInjected;
+      case "node_modules":
+        return sourceFilters.nodeModules;
+      case "virtual-module":
+        return sourceFilters.virtualModule;
+      case "generated":
+        return sourceFilters.generated;
+      case "external":
+        return sourceFilters.external;
+      case "unknown":
+        return sourceFilters.unknown;
+      default:
+        return false;
+    }
+  }).filter((entry) => {
+    if (entry.phase === "unknown") {
+      return false;
+    }
+    return filters.phaseFilters[entry.phase];
+  });
+  return {
+    overview: {
+      total: visibleEntries.length,
+      loaded: visibleEntries.filter((entry) => entry.status === "loaded").length,
+      pending: visibleEntries.filter((entry) => entry.status === "pending").length,
+      error: visibleEntries.filter((entry) => entry.status === "error").length,
+      correlated: visibleEntries.filter((entry) => typeof entry.qrlRequestedAt === "number").length,
+      ssr: visibleEntries.filter((entry) => entry.phase === "ssr").length,
+      csr: visibleEntries.filter((entry) => entry.phase === "csr").length,
+      avgImportDuration: averageBy(visibleEntries, "importDuration"),
+      maxImportDuration: visibleEntries.reduce((max, entry) => Math.max(max, entry.importDuration ?? entry.duration ?? 0), 0),
+      avgLoadDuration: averageBy(visibleEntries, "loadDuration"),
+      maxLoadDuration: visibleEntries.reduce((max, entry) => Math.max(max, entry.loadDuration ?? entry.qrlToLoadDuration ?? 0), 0)
+    },
+    rows: visibleRows,
+    sourceCounts,
+    phaseCounts
+  };
+}
+export {
+  computePreloadViewModel,
+  createDefaultPreloadFilters,
+  filterPreloadRows,
+  summarizeHref
+};