jazz-tools 0.20.1 → 0.20.2

package/dist/inspector/index.js

@@ -2,18 +2,22 @@
 import {
   GlobalStyles,
   Header,
+  HomePage,
   InMemoryRouterProvider,
   NodeProvider,
-  PageStack
-} from "./chunk-MCTB5ZJC.js";
+  PageStack,
+  useRouter
+} from "./chunk-6JPVMI3V.js";
 
 // src/inspector/index.tsx
-import React, { useEffect as useEffect2, useState as useState2 } from "react";
+import React, { useEffect as useEffect4, useState as useState6 } from "react";
 import { setup } from "goober";
 import { useJazzContextValue } from "jazz-tools/react-core";
+import { SubscriptionScope as SubscriptionScope2 } from "jazz-tools";
 
 // src/inspector/in-app.tsx
-import { styled as styled2 } from "goober";
+import { styled as styled6 } from "goober";
+import { useCallback, useState as useState5 } from "react";
 
 // src/inspector/viewer/inspector-button.tsx
 import { styled } from "goober";
@@ -115,30 +119,1049 @@ function useOpenInspector() {
   return [open, setOpen];
 }
 
+// src/inspector/pages/performance/PerformancePage.tsx
+import { styled as styled5 } from "goober";
+import { useMemo as useMemo2, useState as useState4, useDeferredValue } from "react";
+
+// src/inspector/pages/performance/Timeline.tsx
+import { styled as styled2 } from "goober";
+import {
+  useEffect as useEffect2,
+  useMemo,
+  useRef,
+  useState as useState2
+} from "react";
+
+// src/inspector/pages/performance/helpers.ts
+function formatTime(startTime) {
+  const date = new Date(performance.timeOrigin + startTime);
+  return date.toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    fractionalSecondDigits: 3
+  });
+}
+function formatDuration(duration) {
+  if (duration < 1) {
+    return `${(duration * 1e3).toFixed(0)}\u03BCs`;
+  }
+  if (duration < 1e3) {
+    return `${duration.toFixed(2)}ms`;
+  }
+  return `${(duration / 1e3).toFixed(2)}s`;
+}
+function getCallerLocation(stack) {
+  if (!stack) return void 0;
+  const lines = stack.split("\n").slice(2, 15);
+  const normalizeLine = (line) => line.replace(/https?:\/\/[^/\s)]+/g, "");
+  const userFrame = lines.find(
+    (line) => !line.includes("node_modules") && !line.includes("useCoValueSubscription") && !line.includes("useCoState") && !line.includes("useAccount") && !line.includes("useSuspenseCoState") && !line.includes("useSuspenseAccount") && !line.includes("jazz-tools") && !line.includes("trackLoadingPerformance")
+  );
+  if (userFrame) {
+    const cleanedFrame = normalizeLine(userFrame).trim();
+    const match = cleanedFrame.match(/\(?([^)]+:\d+:\d+)\)?$/);
+    if (match) {
+      return match[1];
+    }
+    return cleanedFrame;
+  }
+  return lines[0] ? normalizeLine(lines[0]).trim() : void 0;
+}
+function getCallerStack(stack) {
+  if (!stack) return void 0;
+  const lines = stack.split("\n").slice(2, 15);
+  return lines.filter(
+    (line) => !line.includes("Error:") && !line.includes("renderWithHooks") && !line.includes("react-stack-bottom-frame")
+  ).map((line) => line.replace(/https?:\/\/[^/\s)]+/g, "").trim()).reverse().join("\n");
+}
+
+// src/inspector/pages/performance/Timeline.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TimelineContainer = styled2("div")`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-sm);
+  overflow: hidden;
+`;
+var TimelineTrack = styled2("div")`
+  position: relative;
+  height: 48px;
+  background-color: var(--j-background);
+  cursor: crosshair;
+  user-select: none;
+`;
+var TimeMarker = styled2("div")`
+  position: absolute;
+  font-size: 0.5rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color: var(--j-text-color);
+  padding: 2px 4px;
+  white-space: nowrap;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--j-neutral-500);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 100%;
+    width: 1px;
+    height: 32px;
+    background-color: var(--j-border-color);
+  }
+`;
+var TimelineBars = styled2("div")`
+  position: absolute;
+  top: 16px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+`;
+var TimelineBar = styled2("div")`
+  position: absolute;
+  border-radius: 1px;
+  min-width: 2px;
+`;
+var TimelineSelection = styled2("div")`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background-color: var(--j-primary-color);
+  opacity: 0.2;
+  cursor: grab;
+  pointer-events: auto;
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
+var TimelineSelectionHandle = styled2("div")`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--j-primary-color);
+  cursor: ew-resize;
+  pointer-events: auto;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 8px;
+    height: 16px;
+    background-color: var(--j-primary-color);
+    border-radius: 2px;
+  }
+`;
+var ClearSelectionButton = styled2("button")`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  font-size: 0.5rem;
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-sm);
+  cursor: pointer;
+  color: var(--j-neutral-500);
+  z-index: 10;
+
+  &:hover {
+    background-color: var(--j-background);
+    color: var(--j-text-color);
+  }
+`;
+function Timeline({
+  entries,
+  timeRange,
+  selection,
+  onSelectionChange
+}) {
+  const trackRef = useRef(null);
+  const [dragMode, setDragMode] = useState2(null);
+  const [dragStartTime, setDragStartTime] = useState2(null);
+  const [dragCurrentTime, setDragCurrentTime] = useState2(null);
+  const [dragInitialSelection, setDragInitialSelection] = useState2(null);
+  const duration = timeRange.max - timeRange.min;
+  const timeMarkers = useMemo(() => {
+    const markers = [];
+    if (duration <= 0) return markers;
+    const maxMarkers = 5;
+    const minInterval = duration / maxMarkers;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(minInterval)));
+    const normalized = minInterval / magnitude;
+    let niceMultiplier;
+    if (normalized <= 1) niceMultiplier = 1;
+    else if (normalized <= 2) niceMultiplier = 2;
+    else if (normalized <= 5) niceMultiplier = 5;
+    else niceMultiplier = 10;
+    const interval = niceMultiplier * magnitude;
+    const startMarker = Math.ceil(timeRange.min / interval) * interval;
+    for (let time = startMarker; time <= timeRange.max; time += interval) {
+      const position = (time - timeRange.min) / duration * 100;
+      markers.push({
+        time,
+        label: formatDuration(time),
+        position
+      });
+    }
+    return markers;
+  }, [timeRange, duration]);
+  const getTimeFromPosition = (clientX) => {
+    if (!trackRef.current) return 0;
+    const rect = trackRef.current.getBoundingClientRect();
+    const position = Math.max(
+      0,
+      Math.min(1, (clientX - rect.left) / rect.width)
+    );
+    return timeRange.min + position * duration;
+  };
+  const handleTrackMouseDown = (e) => {
+    const time = getTimeFromPosition(e.clientX);
+    setDragMode("creating");
+    setDragStartTime(time);
+    setDragCurrentTime(time);
+  };
+  const handleSelectionMouseDown = (e) => {
+    e.stopPropagation();
+    if (!selection) return;
+    const time = getTimeFromPosition(e.clientX);
+    setDragMode("moving");
+    setDragStartTime(time);
+    setDragCurrentTime(time);
+    setDragInitialSelection(selection);
+  };
+  const handleLeftHandleMouseDown = (e) => {
+    e.stopPropagation();
+    if (!selection) return;
+    setDragMode("resizing-left");
+    setDragStartTime(selection[0]);
+    setDragCurrentTime(selection[0]);
+    setDragInitialSelection(selection);
+  };
+  const handleRightHandleMouseDown = (e) => {
+    e.stopPropagation();
+    if (!selection) return;
+    setDragMode("resizing-right");
+    setDragStartTime(selection[1]);
+    setDragCurrentTime(selection[1]);
+    setDragInitialSelection(selection);
+  };
+  useEffect2(() => {
+    if (!dragMode) return;
+    const handleMouseMove = (e) => {
+      const time = getTimeFromPosition(e.clientX);
+      setDragCurrentTime(time);
+    };
+    const handleMouseUp = () => {
+      if (dragMode === "creating" && dragStartTime !== null && dragCurrentTime !== null) {
+        const start = Math.min(dragStartTime, dragCurrentTime);
+        const end = Math.max(dragStartTime, dragCurrentTime);
+        if ((end - start) / duration > 0.01) {
+          onSelectionChange([start, end]);
+        }
+      } else if (dragMode === "moving" && dragInitialSelection && dragStartTime !== null && dragCurrentTime !== null) {
+        const delta = dragCurrentTime - dragStartTime;
+        const selectionWidth2 = dragInitialSelection[1] - dragInitialSelection[0];
+        let newStart = dragInitialSelection[0] + delta;
+        let newEnd = dragInitialSelection[1] + delta;
+        if (newStart < timeRange.min) {
+          newStart = timeRange.min;
+          newEnd = timeRange.min + selectionWidth2;
+        }
+        if (newEnd > timeRange.max) {
+          newEnd = timeRange.max;
+          newStart = timeRange.max - selectionWidth2;
+        }
+        onSelectionChange([newStart, newEnd]);
+      } else if (dragMode === "resizing-left" && dragInitialSelection && dragCurrentTime !== null) {
+        const newStart = Math.min(
+          dragCurrentTime,
+          dragInitialSelection[1] - duration * 0.01
+        );
+        onSelectionChange([
+          Math.max(timeRange.min, newStart),
+          dragInitialSelection[1]
+        ]);
+      } else if (dragMode === "resizing-right" && dragInitialSelection && dragCurrentTime !== null) {
+        const newEnd = Math.max(
+          dragCurrentTime,
+          dragInitialSelection[0] + duration * 0.01
+        );
+        onSelectionChange([
+          dragInitialSelection[0],
+          Math.min(timeRange.max, newEnd)
+        ]);
+      }
+      setDragMode(null);
+      setDragStartTime(null);
+      setDragCurrentTime(null);
+      setDragInitialSelection(null);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [
+    dragMode,
+    dragStartTime,
+    dragCurrentTime,
+    dragInitialSelection,
+    duration,
+    timeRange,
+    onSelectionChange
+  ]);
+  const laneAssignments = useMemo(() => {
+    const now = performance.now();
+    const barHeight = 3;
+    const barGap = 1;
+    const maxLanes = 8;
+    const sortedEntries = [...entries].sort(
+      (a, b) => a.startTime - b.startTime
+    );
+    const laneEndTimes = Array(maxLanes).fill(0);
+    const assignments = /* @__PURE__ */ new Map();
+    for (const entry of sortedEntries) {
+      const entryEnd = entry.endTime ?? now;
+      let assignedLane = laneEndTimes.findIndex(
+        (endTime) => entry.startTime >= endTime
+      );
+      if (assignedLane === -1) {
+        const earliestEnd = Math.min(...laneEndTimes);
+        assignedLane = laneEndTimes.indexOf(earliestEnd);
+      }
+      laneEndTimes[assignedLane] = entryEnd;
+      assignments.set(entry.uuid, assignedLane * (barHeight + barGap));
+    }
+    return assignments;
+  }, [entries]);
+  const getBarStyle = (entry) => {
+    const now = performance.now();
+    const start = entry.startTime;
+    const end = entry.endTime ?? now;
+    const left = (start - timeRange.min) / duration * 100;
+    const width = Math.max(0.5, (end - start) / duration * 100);
+    const color = entry.status === "pending" ? "var(--j-warning-color)" : entry.status === "error" ? "var(--j-error-color)" : "var(--j-success-color)";
+    const top = laneAssignments.get(entry.uuid) ?? 0;
+    return {
+      left: `${left}%`,
+      width: `${width}%`,
+      backgroundColor: color,
+      top: `${top}px`,
+      height: "3px"
+    };
+  };
+  const currentSelection = useMemo(() => {
+    if (dragMode === "creating" && dragStartTime !== null && dragCurrentTime !== null) {
+      return [
+        Math.min(dragStartTime, dragCurrentTime),
+        Math.max(dragStartTime, dragCurrentTime)
+      ];
+    }
+    if (dragMode === "moving" && dragInitialSelection && dragStartTime !== null && dragCurrentTime !== null) {
+      const delta = dragCurrentTime - dragStartTime;
+      const selectionWidth2 = dragInitialSelection[1] - dragInitialSelection[0];
+      let newStart = dragInitialSelection[0] + delta;
+      let newEnd = dragInitialSelection[1] + delta;
+      if (newStart < timeRange.min) {
+        newStart = timeRange.min;
+        newEnd = timeRange.min + selectionWidth2;
+      }
+      if (newEnd > timeRange.max) {
+        newEnd = timeRange.max;
+        newStart = timeRange.max - selectionWidth2;
+      }
+      return [newStart, newEnd];
+    }
+    if (dragMode === "resizing-left" && dragInitialSelection && dragCurrentTime !== null) {
+      const newStart = Math.max(
+        timeRange.min,
+        Math.min(dragCurrentTime, dragInitialSelection[1] - duration * 0.01)
+      );
+      return [newStart, dragInitialSelection[1]];
+    }
+    if (dragMode === "resizing-right" && dragInitialSelection && dragCurrentTime !== null) {
+      const newEnd = Math.min(
+        timeRange.max,
+        Math.max(dragCurrentTime, dragInitialSelection[0] + duration * 0.01)
+      );
+      return [dragInitialSelection[0], newEnd];
+    }
+    return selection;
+  }, [
+    dragMode,
+    dragStartTime,
+    dragCurrentTime,
+    dragInitialSelection,
+    selection,
+    timeRange,
+    duration
+  ]);
+  const selectionLeft = currentSelection ? (currentSelection[0] - timeRange.min) / duration * 100 : 0;
+  const selectionWidth = currentSelection ? (currentSelection[1] - currentSelection[0]) / duration * 100 : 0;
+  return /* @__PURE__ */ jsxs2(TimelineContainer, { children: [
+    /* @__PURE__ */ jsxs2(TimelineTrack, { ref: trackRef, onMouseDown: handleTrackMouseDown, children: [
+      timeMarkers.map((marker) => /* @__PURE__ */ jsx2(TimeMarker, { style: { left: `${marker.position}%` }, children: marker.label }, marker.time)),
+      /* @__PURE__ */ jsx2(TimelineBars, { children: entries.map((entry) => /* @__PURE__ */ jsx2(TimelineBar, { style: getBarStyle(entry) }, entry.uuid)) }),
+      currentSelection && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(
+          TimelineSelection,
+          {
+            style: {
+              left: `${selectionLeft}%`,
+              width: `${selectionWidth}%`
+            },
+            onMouseDown: handleSelectionMouseDown
+          }
+        ),
+        !dragMode && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2(
+            TimelineSelectionHandle,
+            {
+              style: { left: `${selectionLeft}%` },
+              onMouseDown: handleLeftHandleMouseDown
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            TimelineSelectionHandle,
+            {
+              style: { left: `${selectionLeft + selectionWidth}%` },
+              onMouseDown: handleRightHandleMouseDown
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    currentSelection && !dragMode && /* @__PURE__ */ jsx2(
+      ClearSelectionButton,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onSelectionChange(null);
+        },
+        children: "Clear selection"
+      }
+    )
+  ] });
+}
+
+// src/inspector/pages/performance/SubscriptionRow.tsx
+import { styled as styled3 } from "goober";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var RowWrapper = styled3("div")`
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  position: relative;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    background-color: var(--j-foreground);
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--j-primary-color);
+    outline-offset: -2px;
+  }
+
+  &[data-expanded="true"] {
+    background-color: var(--j-foreground);
+  }
+`;
+var TimeBar = styled3("div")`
+  position: absolute;
+  bottom: 0;
+  height: 4px;
+  transition: transform 0.15s ease;
+  z-index: 1;
+  container-type: inline-size;
+
+  .row-wrapper:hover &, [data-expanded="true"] & {
+    transform: scaleY(4);
+
+    .time-label {
+      opacity: 1;
+    }
+  }
+
+  &[data-status="pending"] {
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+`;
+var TimeLabel = styled3("span")`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) scaleY(0.25);
+  font-size: 0.5rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color: white;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+  left: 4px;
+  --time-label-overflow-color: black;
+
+  @media (prefers-color-scheme: dark) {
+    --time-label-overflow-color: white;
+  }
+
+  @container (max-width: 50px) {
+    color: var(--time-label-overflow-color);
+    left: 100%;
+    margin-left: 4px;
+  }
+
+  [data-near-edge="true"] & {
+    @container (max-width: 50px) {
+      left: auto;
+      right: 100%;
+      margin-left: 0;
+      margin-right: 4px;
+    }
+  }
+`;
+var Cell = styled3("div")`
+  padding: 0.5rem;
+  padding-bottom: 0.75rem;
+  font-size: 0.625rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  border-bottom: 1px solid var(--j-border-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &[data-clickable="true"] {
+    cursor: pointer;
+    color: var(--j-link-color);
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
+var StatusBadge = styled3("span")`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.625rem;
+
+  &[data-status="pending"] {
+    background-color: var(--j-warning-bg);
+    color: var(--j-warning-color);
+  }
+  &[data-status="loaded"] {
+    background-color: var(--j-success-bg);
+    color: var(--j-success-color);
+  }
+  &[data-status="error"] {
+    background-color: var(--j-error-bg);
+    color: var(--j-error-color);
+  }
+`;
+var PendingDot = styled3("span")`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--j-warning-color);
+  animation: pendingPulse 1.5s ease-in-out infinite;
+
+  @keyframes pendingPulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+`;
+function SubscriptionRow({
+  entry,
+  isSelected,
+  onSelect,
+  barLeft,
+  barWidth,
+  barColor
+}) {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect();
+    }
+  };
+  return /* @__PURE__ */ jsxs3(
+    RowWrapper,
+    {
+      className: "row-wrapper",
+      "data-expanded": isSelected,
+      onClick: onSelect,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "button",
+      "aria-label": `View details for ${entry.source} ${entry.id}`,
+      children: [
+        /* @__PURE__ */ jsx3(Cell, { children: /* @__PURE__ */ jsx3(StatusBadge, { "data-status": entry.status, children: entry.source }) }),
+        /* @__PURE__ */ jsx3(Cell, { children: /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "0.125rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx3("span", { children: entry.id }),
+              /* @__PURE__ */ jsx3("span", { style: { color: "var(--j-neutral-500)" }, children: entry.resolve })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx3(Cell, { children: getCallerLocation(entry.callerStack) ?? "-" }),
+        /* @__PURE__ */ jsx3(Cell, { children: entry.duration !== void 0 ? entry.duration === 0 ? "\u26A1 cached" : formatDuration(entry.duration) : /* @__PURE__ */ jsx3(PendingDot, {}) }),
+        /* @__PURE__ */ jsx3(
+          TimeBar,
+          {
+            className: "time-bar",
+            "data-status": entry.status,
+            "data-near-edge": parseFloat(barLeft) + parseFloat(barWidth) > 85,
+            style: {
+              left: barLeft,
+              width: barWidth,
+              backgroundColor: barColor
+            },
+            children: /* @__PURE__ */ jsx3(TimeLabel, { className: "time-label", children: entry.duration === 0 ? "\u26A1 cached" : entry.duration ? formatDuration(entry.duration) : "-" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/inspector/pages/performance/SubscriptionDetailPanel.tsx
+import { styled as styled4 } from "goober";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DetailPanel = styled4("div")`
+  width: 320px;
+  flex-shrink: 0;
+  padding: 0.75rem 1rem;
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-sm);
+  overflow-y: auto;
+  position: relative;
+`;
+var CloseButton = styled4("button")`
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--j-radius-sm);
+  cursor: pointer;
+  color: var(--j-neutral-500);
+
+  &:hover {
+    background-color: var(--j-background);
+    color: var(--j-text-color);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--j-primary-color);
+    outline-offset: -2px;
+  }
+`;
+var DetailsGrid = styled4("div")`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem 1rem;
+  font-size: 0.625rem;
+`;
+var DetailLabel = styled4("span")`
+  color: var(--j-neutral-500);
+  font-weight: 500;
+`;
+var DetailValue = styled4("span")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color: var(--j-text-color);
+`;
+var Pre = styled4("pre")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.625rem;
+  color: var(--j-text-color);
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 200px;
+  overflow-y: auto;
+  background-color: var(--j-background);
+  padding: 0.5rem;
+  border-radius: var(--j-radius-sm);
+`;
+var StatusBadge2 = styled4("span")`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.625rem;
+
+  &[data-status="pending"] {
+    background-color: var(--j-warning-bg);
+    color: var(--j-warning-color);
+  }
+  &[data-status="loaded"] {
+    background-color: var(--j-success-bg);
+    color: var(--j-success-color);
+  }
+  &[data-status="error"] {
+    background-color: var(--j-error-bg);
+    color: var(--j-error-color);
+  }
+`;
+function SubscriptionDetailPanel({
+  entry,
+  onNavigate,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxs4(DetailPanel, { children: [
+    /* @__PURE__ */ jsx4(CloseButton, { onClick: onClose, "aria-label": "Close detail panel", children: /* @__PURE__ */ jsx4(
+      "svg",
+      {
+        width: "10",
+        height: "10",
+        viewBox: "0 0 14 14",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx4(
+          "path",
+          {
+            d: "M1 1L13 13M1 13L13 1",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxs4(DetailsGrid, { children: [
+      /* @__PURE__ */ jsx4(DetailLabel, { children: "Source" }),
+      /* @__PURE__ */ jsx4(DetailValue, { children: /* @__PURE__ */ jsx4(StatusBadge2, { "data-status": entry.status, children: entry.source }) }),
+      /* @__PURE__ */ jsx4(DetailLabel, { children: "CoValue" }),
+      /* @__PURE__ */ jsx4(DetailValue, { children: /* @__PURE__ */ jsx4(
+        "button",
+        {
+          title: "Click to navigate to CoValue",
+          onClick: () => onNavigate(entry.id),
+          style: {
+            color: "var(--j-link-color)",
+            cursor: "pointer",
+            background: "none",
+            border: "none",
+            padding: 0,
+            font: "inherit"
+          },
+          children: entry.id
+        }
+      ) }),
+      /* @__PURE__ */ jsx4(DetailLabel, { children: "Time" }),
+      /* @__PURE__ */ jsxs4(DetailValue, { children: [
+        formatTime(entry.startTime),
+        " -",
+        " ",
+        entry.duration !== void 0 ? formatTime(entry.startTime + entry.duration) : "Pending..."
+      ] }),
+      /* @__PURE__ */ jsx4(DetailLabel, { children: "Duration" }),
+      /* @__PURE__ */ jsx4(DetailValue, { children: entry.duration !== void 0 ? formatDuration(entry.duration) : "Pending..." }),
+      /* @__PURE__ */ jsx4(DetailLabel, { children: "Resolve Query" }),
+      /* @__PURE__ */ jsx4(Pre, { children: JSON.stringify(JSON.parse(entry.resolve), null, 2) }),
+      /* @__PURE__ */ jsx4(DetailLabel, { children: "Stack Trace" }),
+      /* @__PURE__ */ jsx4(Pre, { children: getCallerStack(entry.callerStack) ?? "No stack trace available" })
+    ] })
+  ] });
+}
+
+// src/inspector/pages/performance/usePerformanceEntries.ts
+import { useState as useState3, useEffect as useEffect3 } from "react";
+function usePerformanceEntries() {
+  const [entries, setEntries] = useState3([]);
+  useEffect3(() => {
+    const entriesByUuid = /* @__PURE__ */ new Map();
+    const handlePerformanceEntries = (entries2) => {
+      for (const mark of entries2) {
+        const detail = mark.detail;
+        if (detail?.type !== "jazz-subscription") continue;
+        const prevEntry = entriesByUuid.get(detail.uuid);
+        if (mark.entryType === "mark" && prevEntry) continue;
+        entriesByUuid.set(detail.uuid, {
+          uuid: detail.uuid,
+          id: detail.id,
+          source: detail.source,
+          resolve: JSON.stringify(detail.resolve),
+          status: detail.status,
+          startTime: mark.startTime,
+          callerStack: detail.callerStack ?? prevEntry?.callerStack,
+          duration: mark.entryType === "mark" ? void 0 : mark.duration,
+          endTime: mark.startTime + mark.duration,
+          errorType: detail.errorType
+        });
+      }
+    };
+    handlePerformanceEntries(performance.getEntriesByType("mark"));
+    handlePerformanceEntries(performance.getEntriesByType("measure"));
+    setEntries(Array.from(entriesByUuid.values()));
+    const observer = new PerformanceObserver((list) => {
+      handlePerformanceEntries(list.getEntries());
+      setEntries(Array.from(entriesByUuid.values()));
+    });
+    observer.observe({ entryTypes: ["mark", "measure"] });
+    return () => observer.disconnect();
+  }, []);
+  return entries;
+}
+
+// src/inspector/pages/performance/PerformancePage.tsx
+import { SubscriptionScope } from "jazz-tools";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var Container = styled5("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  height: 100%;
+  min-height: 0;
+`;
+var MainLayout = styled5("div")`
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: 1rem;
+`;
+var ListPanel = styled5("div")`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+`;
+var Grid = styled5("div")`
+  display: grid;
+  grid-template-columns:
+    minmax(100px, 150px)
+    minmax(150px, 1fr)
+    minmax(100px, 200px)
+    80px;
+  grid-template-rows: min-content;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+`;
+var HeaderCell = styled5("div")`
+  padding: 0.5rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--j-neutral-500);
+  border-bottom: 1px solid var(--j-border-color);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+`;
+var EmptyState = styled5("div")`
+  text-align: center;
+  padding: 2rem;
+  color: var(--j-neutral-500);
+  font-size: 0.875rem;
+`;
+function PerformancePage({ onNavigate, style }) {
+  const entries = usePerformanceEntries();
+  const [selectedRow, setSelectedRow] = useState4(null);
+  const [timeSelection, setTimeSelection] = useState4(
+    null
+  );
+  const deferredSelection = useDeferredValue(timeSelection);
+  const { setPage } = useRouter();
+  const selectRow = (uuid) => {
+    setSelectedRow((prev) => prev === uuid ? null : uuid);
+  };
+  const sortedEntries = useMemo2(() => {
+    return [...entries].sort((a, b) => a.startTime - b.startTime);
+  }, [entries]);
+  const overallTimeRange = useMemo2(() => {
+    if (entries.length === 0) return null;
+    const now = performance.now();
+    return {
+      min: Math.min(...entries.map((e) => e.startTime)),
+      max: Math.max(...entries.map((e) => e.endTime ?? now))
+    };
+  }, [entries]);
+  const filteredEntries = useMemo2(() => {
+    if (!deferredSelection) return sortedEntries;
+    const [startTime, endTime] = deferredSelection;
+    const now = performance.now();
+    return sortedEntries.filter((entry) => {
+      const entryEnd = entry.endTime ?? now;
+      return entry.startTime <= endTime && entryEnd >= startTime;
+    });
+  }, [sortedEntries, deferredSelection]);
+  const displayRange = deferredSelection ? { min: deferredSelection[0], max: deferredSelection[1] } : overallTimeRange;
+  const getBarProps = (entry) => {
+    const range = (displayRange?.max ?? 1) - (displayRange?.min ?? 0) || 1;
+    const now = performance.now();
+    const clampedStart = Math.max(entry.startTime, displayRange?.min ?? 0);
+    const clampedEnd = Math.min(entry.endTime ?? now, displayRange?.max ?? now);
+    const left = Math.max(
+      0,
+      (clampedStart - (displayRange?.min ?? 0)) / range * 100
+    );
+    const width = Math.max(0.5, (clampedEnd - clampedStart) / range * 100);
+    const color = entry.status === "pending" ? "var(--j-warning-color)" : entry.status === "error" ? "var(--j-error-color)" : "var(--j-success-color)";
+    return {
+      barLeft: `${left}%`,
+      barWidth: `${width}%`,
+      barColor: color
+    };
+  };
+  const handleNavigateToCoValue = (id) => {
+    setPage(id);
+    onNavigate();
+  };
+  if (!SubscriptionScope.isProfilingEnabled) {
+    return /* @__PURE__ */ jsx5(Container, { style, children: /* @__PURE__ */ jsx5(EmptyState, { children: "Profiling is not enabled in production builds." }) });
+  }
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx5(Container, { style, children: /* @__PURE__ */ jsx5(EmptyState, { children: "No subscriptions recorded yet. Interact with your app to see subscription performance data." }) });
+  }
+  const selectedEntry = selectedRow ? filteredEntries.find((e) => e.uuid === selectedRow) : null;
+  return /* @__PURE__ */ jsxs5(Container, { style, children: [
+    overallTimeRange && /* @__PURE__ */ jsx5(
+      Timeline,
+      {
+        entries: sortedEntries,
+        timeRange: overallTimeRange,
+        selection: timeSelection,
+        onSelectionChange: setTimeSelection
+      }
+    ),
+    /* @__PURE__ */ jsxs5(MainLayout, { children: [
+      /* @__PURE__ */ jsx5(ListPanel, { children: /* @__PURE__ */ jsxs5(Grid, { children: [
+        /* @__PURE__ */ jsx5(HeaderCell, { children: "Source" }),
+        /* @__PURE__ */ jsx5(HeaderCell, { children: "CoValue" }),
+        /* @__PURE__ */ jsx5(HeaderCell, { children: "Caller" }),
+        /* @__PURE__ */ jsx5(HeaderCell, { children: "Duration" }),
+        filteredEntries.map((entry) => /* @__PURE__ */ jsx5(
+          SubscriptionRow,
+          {
+            entry,
+            isSelected: selectedRow === entry.uuid,
+            onSelect: () => selectRow(entry.uuid),
+            ...getBarProps(entry)
+          },
+          entry.uuid
+        ))
+      ] }) }),
+      selectedEntry && /* @__PURE__ */ jsx5(
+        SubscriptionDetailPanel,
+        {
+          entry: selectedEntry,
+          onNavigate: handleNavigateToCoValue,
+          onClose: () => setSelectedRow(null)
+        }
+      )
+    ] })
+  ] });
+}
+
 // src/inspector/in-app.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var STORAGE_KEY2 = "jazz-inspector-tab";
+function getStoredTab() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY2);
+    if (stored === "inspector" || stored === "performance") {
+      return stored;
+    }
+  } catch {
+  }
+  return "inspector";
+}
 function InspectorInApp({
   position = "right",
   localNode,
   accountId
 }) {
   const [open, setOpen] = useOpenInspector();
+  const [activeTab, setActiveTabState] = useState5(getStoredTab);
+  const setActiveTab = useCallback((tab) => {
+    setActiveTabState(tab);
+    try {
+      localStorage.setItem(STORAGE_KEY2, tab);
+    } catch {
+    }
+  }, []);
   if (!open) {
-    return /* @__PURE__ */ jsx2(InspectorButton, { position, onClick: () => setOpen(true) });
+    return /* @__PURE__ */ jsx6(InspectorButton, { position, onClick: () => setOpen(true) });
   }
-  return /* @__PURE__ */ jsx2(NodeProvider, { localNode: localNode ?? null, accountID: accountId ?? null, children: /* @__PURE__ */ jsx2(InMemoryRouterProvider, { children: /* @__PURE__ */ jsxs2(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx6(NodeProvider, { localNode: localNode ?? null, accountID: accountId ?? null, children: /* @__PURE__ */ jsx6(InMemoryRouterProvider, { children: /* @__PURE__ */ jsxs6(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
+    /* @__PURE__ */ jsx6(
       Header,
       {
-        showDeleteLocalData: true,
         showClose: true,
-        onClose: () => setOpen(false)
+        onClose: () => setOpen(false),
+        activeTab,
+        onTabChange: setActiveTab
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      PageStack,
+      {
+        style: { display: activeTab === "inspector" ? "flex" : "none" },
+        homePage: /* @__PURE__ */ jsx6(HomePage, { showDeleteLocalData: true })
       }
     ),
-    /* @__PURE__ */ jsx2(PageStack, {})
+    /* @__PURE__ */ jsx6(
+      PerformancePage,
+      {
+        style: { display: activeTab === "performance" ? "flex" : "none" },
+        onNavigate: () => setActiveTab("inspector")
+      }
+    )
   ] }) }) });
 }
-var InspectorContainer = styled2("div")`
+var InspectorContainer = styled6("div")`
   position: fixed;
   height: 50vh;
   max-height: 800px;
@@ -157,19 +1180,22 @@ var InspectorContainer = styled2("div")`
 `;
 
 // src/inspector/index.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function enableProfiling() {
+  SubscriptionScope2.enableProfiling();
+}
 function JazzInspector({ position = "right" }) {
   const context = useJazzContextValue();
   const localNode = context.node;
   const me = "me" in context ? context.me : void 0;
-  const [isCSR, setIsCSR] = useState2(false);
-  useEffect2(() => {
+  const [isCSR, setIsCSR] = useState6(false);
+  useEffect4(() => {
     setIsCSR(true);
   }, []);
   if (!isCSR) {
     return null;
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx7(
     InspectorInApp,
     {
       position,
@@ -180,6 +1206,7 @@ function JazzInspector({ position = "right" }) {
 }
 setup(React.createElement);
 export {
-  JazzInspector
+  JazzInspector,
+  enableProfiling
 };
 //# sourceMappingURL=index.js.map