jazz-tools 0.20.0 → 0.20.2

package/dist/tools/subscribe/utils.d.ts

@@ -2,7 +2,7 @@ import { RawCoValue, Role } from "cojson";
 import { CoValue, RefEncoded, RefsToResolve } from "../internal.js";
 import { SubscriptionScope } from "./SubscriptionScope.js";
 export declare function myRoleForRawValue(raw: RawCoValue): Role | undefined;
-export declare function createCoValue<D extends CoValue>(ref: RefEncoded<D>, raw: RawCoValue, subscriptionScope: SubscriptionScope<D>): {
+export declare function createCoValue<D extends CoValue>(ref: RefEncoded<CoValue>, raw: RawCoValue, subscriptionScope: SubscriptionScope<D>): {
     type: "loaded";
     value: D;
     id: string;

package/dist/tools/subscribe/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tools/subscribe/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,UAAU,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEtD,OAAO,EACL,OAAO,EACP,UAAU,EACV,aAAa,EAGd,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,CAUnE;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,OAAO,EAC7C,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,EAClB,GAAG,EAAE,UAAU,EACf,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC;;;;EAgBxC;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC9C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAKjE;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAKxE;AAED,wBAAgB,oBAAoB,CAClC,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,EACrB,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,WAoDtB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tools/subscribe/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,UAAU,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEtD,OAAO,EACL,OAAO,EACP,UAAU,EACV,aAAa,EAGd,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,CAUnE;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,OAAO,EAC7C,GAAG,EAAE,UAAU,CAAC,OAAO,CAAC,EACxB,GAAG,EAAE,UAAU,EACf,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC;;WAaG,CAAC;;EAG5C;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC9C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAKjE;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAKxE;AAED,wBAAgB,oBAAoB,CAClC,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,EACrB,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,WAoDtB"}

package/dist/tools/tests/SubscriptionScope.performance.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SubscriptionScope.performance.test.d.ts.map

package/dist/tools/tests/SubscriptionScope.performance.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionScope.performance.test.d.ts","sourceRoot":"","sources":["../../../src/tools/tests/SubscriptionScope.performance.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -196,7 +196,7 @@
   },
   "type": "module",
   "license": "MIT",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "dependencies": {
     "@manuscripts/prosemirror-recreate-steps": "^0.1.4",
     "@scure/base": "1.2.1",
@@ -213,9 +213,9 @@
     "prosemirror-transform": "^1.9.0",
     "use-sync-external-store": "^1.5.0",
     "zod": "4.1.11",
-    "cojson": "0.20.0",
-    "cojson-storage-indexeddb": "0.20.0",
-    "cojson-transport-ws": "0.20.0"
+    "cojson": "0.20.2",
+    "cojson-storage-indexeddb": "0.20.2",
+    "cojson-transport-ws": "0.20.2"
   },
   "devDependencies": {
     "@scure/bip39": "^1.3.0",

package/src/inspector/in-app.tsx

@@ -1,5 +1,6 @@
 import { CoID, LocalNode, RawAccount } from "cojson";
 import { styled } from "goober";
+import { useCallback, useState } from "react";
 import { PageStack } from "./viewer/page-stack.js";
 import { GlobalStyles } from "./ui/global-styles.js";
 import { InspectorButton, type Position } from "./viewer/inspector-button.js";
@@ -7,6 +8,25 @@ import { useOpenInspector } from "./viewer/use-open-inspector.js";
 import { NodeProvider } from "./contexts/node.js";
 import { InMemoryRouterProvider } from "./router/in-memory-router.js";
 import { Header } from "./viewer/header.js";
+import { PerformancePage } from "./pages/performance/index.js";
+import { HomePage } from "./pages/home.js";
+import { SubscriptionScope } from "jazz-tools";
+
+export type InspectorTab = "inspector" | "performance";
+
+const STORAGE_KEY = "jazz-inspector-tab";
+
+function getStoredTab(): InspectorTab {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "inspector" || stored === "performance") {
+      return stored;
+    }
+  } catch {
+    // localStorage not available
+  }
+  return "inspector";
+}
 
 export function InspectorInApp({
   position = "right",
@@ -18,6 +38,16 @@ export function InspectorInApp({
   accountId?: CoID<RawAccount>;
 }) {
   const [open, setOpen] = useOpenInspector();
+  const [activeTab, setActiveTabState] = useState<InspectorTab>(getStoredTab);
+
+  const setActiveTab = useCallback((tab: InspectorTab) => {
+    setActiveTabState(tab);
+    try {
+      localStorage.setItem(STORAGE_KEY, tab);
+    } catch {
+      // localStorage not available
+    }
+  }, []);
 
   if (!open) {
     return (
@@ -30,12 +60,20 @@ export function InspectorInApp({
       <InMemoryRouterProvider>
         <InspectorContainer as={GlobalStyles} style={{ zIndex: 999 }}>
           <Header
-            showDeleteLocalData={true}
             showClose={true}
             onClose={() => setOpen(false)}
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+          />
+          {/* Both components stay mounted, visibility controlled by CSS */}
+          <PageStack
+            style={{ display: activeTab === "inspector" ? "flex" : "none" }}
+            homePage={<HomePage showDeleteLocalData />}
+          />
+          <PerformancePage
+            style={{ display: activeTab === "performance" ? "flex" : "none" }}
+            onNavigate={() => setActiveTab("inspector")}
           />
-
-          <PageStack />
         </InspectorContainer>
       </InMemoryRouterProvider>
     </NodeProvider>

package/src/inspector/index.tsx

@@ -1,10 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { setup } from "goober";
 import { useJazzContextValue } from "jazz-tools/react-core";
-import { Account } from "jazz-tools";
+import { Account, SubscriptionScope } from "jazz-tools";
 import { InspectorInApp } from "./in-app.js";
 import { Position } from "./viewer/inspector-button.js";
 
+export function enableProfiling() {
+  SubscriptionScope.enableProfiling();
+}
+
 export function JazzInspector({ position = "right" }: { position?: Position }) {
   const context = useJazzContextValue<Account>();
   const localNode = context.node;

package/src/inspector/pages/home.tsx

@@ -5,8 +5,13 @@ import { Button, Input } from "../ui";
 import { useState } from "react";
 import { CoID, RawCoValue } from "cojson";
 import { useRouter } from "../router";
+import { DeleteLocalData } from "../viewer/delete-local-data.js";
 
-export function HomePage() {
+export interface HomePageProps {
+  showDeleteLocalData?: boolean;
+}
+
+export function HomePage({ showDeleteLocalData }: HomePageProps) {
   const { localNode, accountID } = useNode();
   const { path, setPage } = useRouter();
   const [coValueId, setCoValueId] = useState<CoID<RawCoValue> | "">("");
@@ -24,7 +29,7 @@ export function HomePage() {
   };
 
   return (
-    <>
+    <PageContainer>
       <CenteredForm
         onSubmit={handleCoValueIdSubmit}
         aria-hidden={path.length !== 0}
@@ -55,10 +60,22 @@ export function HomePage() {
           Inspect my account
         </Button>
       </CenteredForm>
-    </>
+
+      {showDeleteLocalData && (
+        <BottomRight>
+          <DeleteLocalData />
+        </BottomRight>
+      )}
+    </PageContainer>
   );
 }
 
+const PageContainer = styled("div")`
+  position: relative;
+  height: 100%;
+  width: 100%;
+`;
+
 const CenteredForm = styled("form")`
   display: flex;
   flex-direction: column;
@@ -75,3 +92,9 @@ const CenteredForm = styled("form")`
 const OrText = styled("p")`
   text-align: center;
 `;
+
+const BottomRight = styled("div")`
+  position: absolute;
+  bottom: 0.75rem;
+  right: 0;
+`;

package/src/inspector/pages/performance/PerformancePage.tsx

@@ -0,0 +1,215 @@
+import { styled } from "goober";
+import { type CSSProperties, useMemo, useState, useDeferredValue } from "react";
+import { CoID, RawCoValue } from "cojson";
+import { useRouter } from "../../router/context.js";
+import { Timeline } from "./Timeline.js";
+import { SubscriptionRow } from "./SubscriptionRow.js";
+import { SubscriptionDetailPanel } from "./SubscriptionDetailPanel.js";
+import { usePerformanceEntries } from "./usePerformanceEntries.js";
+import type { SubscriptionEntry } from "./types.js";
+import { SubscriptionScope } from "jazz-tools";
+
+// ============================================================================
+// Styled Components
+// ============================================================================
+
+const Container = styled("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  height: 100%;
+  min-height: 0;
+`;
+
+const MainLayout = styled("div")`
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: 1rem;
+`;
+
+const ListPanel = styled("div")`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+const Grid = styled("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;
+`;
+
+const HeaderCell = styled("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;
+`;
+
+const EmptyState = styled("div")`
+  text-align: center;
+  padding: 2rem;
+  color: var(--j-neutral-500);
+  font-size: 0.875rem;
+`;
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export interface PerformancePageProps {
+  onNavigate: () => void;
+  style?: CSSProperties;
+}
+
+export function PerformancePage({ onNavigate, style }: PerformancePageProps) {
+  const entries = usePerformanceEntries();
+  const [selectedRow, setSelectedRow] = useState<string | null>(null);
+  const [timeSelection, setTimeSelection] = useState<[number, number] | null>(
+    null,
+  );
+  const deferredSelection = useDeferredValue(timeSelection);
+  const { setPage } = useRouter();
+
+  const selectRow = (uuid: string) => {
+    setSelectedRow((prev) => (prev === uuid ? null : uuid));
+  };
+
+  const sortedEntries = useMemo(() => {
+    return [...entries].sort((a, b) => a.startTime - b.startTime);
+  }, [entries]);
+
+  const overallTimeRange = useMemo(() => {
+    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 = useMemo(() => {
+    if (!deferredSelection) return sortedEntries;
+    const [startTime, endTime] = deferredSelection;
+    const now = performance.now();
+    return sortedEntries.filter((entry) => {
+      const entryEnd = entry.endTime ?? now;
+      // Entry overlaps with selection if it starts before selection ends and ends after selection starts
+      return entry.startTime <= endTime && entryEnd >= startTime;
+    });
+  }, [sortedEntries, deferredSelection]);
+
+  const displayRange = deferredSelection
+    ? { min: deferredSelection[0], max: deferredSelection[1] }
+    : overallTimeRange;
+
+  // Calculate bar position for each entry
+  const getBarProps = (entry: SubscriptionEntry) => {
+    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: string) => {
+    setPage(id as CoID<RawCoValue>);
+    onNavigate();
+  };
+
+  if (!SubscriptionScope.isProfilingEnabled) {
+    return (
+      <Container style={style}>
+        <EmptyState>Profiling is not enabled in production builds.</EmptyState>
+      </Container>
+    );
+  }
+
+  if (entries.length === 0) {
+    return (
+      <Container style={style}>
+        <EmptyState>
+          No subscriptions recorded yet. Interact with your app to see
+          subscription performance data.
+        </EmptyState>
+      </Container>
+    );
+  }
+
+  const selectedEntry = selectedRow
+    ? filteredEntries.find((e) => e.uuid === selectedRow)
+    : null;
+
+  return (
+    <Container style={style}>
+      {overallTimeRange && (
+        <Timeline
+          entries={sortedEntries}
+          timeRange={overallTimeRange}
+          selection={timeSelection}
+          onSelectionChange={setTimeSelection}
+        />
+      )}
+      <MainLayout>
+        <ListPanel>
+          <Grid>
+            <HeaderCell>Source</HeaderCell>
+            <HeaderCell>CoValue</HeaderCell>
+            <HeaderCell>Caller</HeaderCell>
+            <HeaderCell>Duration</HeaderCell>
+            {filteredEntries.map((entry) => (
+              <SubscriptionRow
+                key={entry.uuid}
+                entry={entry}
+                isSelected={selectedRow === entry.uuid}
+                onSelect={() => selectRow(entry.uuid)}
+                {...getBarProps(entry)}
+              />
+            ))}
+          </Grid>
+        </ListPanel>
+        {selectedEntry && (
+          <SubscriptionDetailPanel
+            entry={selectedEntry}
+            onNavigate={handleNavigateToCoValue}
+            onClose={() => setSelectedRow(null)}
+          />
+        )}
+      </MainLayout>
+    </Container>
+  );
+}

package/src/inspector/pages/performance/SubscriptionDetailPanel.tsx

@@ -0,0 +1,182 @@
+import { styled } from "goober";
+import type { SubscriptionEntry } from "./types.js";
+import { formatTime, formatDuration, getCallerStack } from "./helpers.js";
+
+// ============================================================================
+// Styled Components
+// ============================================================================
+
+const DetailPanel = styled("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;
+`;
+
+const CloseButton = styled("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;
+  }
+`;
+
+const DetailsGrid = styled("div")`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem 1rem;
+  font-size: 0.625rem;
+`;
+
+const DetailLabel = styled("span")`
+  color: var(--j-neutral-500);
+  font-weight: 500;
+`;
+
+const DetailValue = styled("span")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color: var(--j-text-color);
+`;
+
+const Pre = styled("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);
+`;
+
+const StatusBadge = styled("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);
+  }
+`;
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export interface SubscriptionDetailPanelProps {
+  entry: SubscriptionEntry;
+  onNavigate: (id: string) => void;
+  onClose: () => void;
+}
+
+export function SubscriptionDetailPanel({
+  entry,
+  onNavigate,
+  onClose,
+}: SubscriptionDetailPanelProps) {
+  return (
+    <DetailPanel>
+      <CloseButton onClick={onClose} aria-label="Close detail panel">
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1 1L13 13M1 13L13 1"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+          />
+        </svg>
+      </CloseButton>
+      <DetailsGrid>
+        <DetailLabel>Source</DetailLabel>
+        <DetailValue>
+          <StatusBadge data-status={entry.status}>{entry.source}</StatusBadge>
+        </DetailValue>
+
+        <DetailLabel>CoValue</DetailLabel>
+        <DetailValue>
+          <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",
+            }}
+          >
+            {entry.id}
+          </button>
+        </DetailValue>
+
+        <DetailLabel>Time</DetailLabel>
+        <DetailValue>
+          {formatTime(entry.startTime)} -{" "}
+          {entry.duration !== undefined
+            ? formatTime(entry.startTime + entry.duration)
+            : "Pending..."}
+        </DetailValue>
+
+        <DetailLabel>Duration</DetailLabel>
+        <DetailValue>
+          {entry.duration !== undefined
+            ? formatDuration(entry.duration)
+            : "Pending..."}
+        </DetailValue>
+
+        <DetailLabel>Resolve Query</DetailLabel>
+        <Pre>{JSON.stringify(JSON.parse(entry.resolve), null, 2)}</Pre>
+
+        <DetailLabel>Stack Trace</DetailLabel>
+        <Pre>
+          {getCallerStack(entry.callerStack) ?? "No stack trace available"}
+        </Pre>
+      </DetailsGrid>
+    </DetailPanel>
+  );
+}