jazz-tools 0.20.1 → 0.20.2

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

@@ -0,0 +1,83 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { setup } from "goober";
+import React from "react";
+import { PerformancePage } from "../../../pages/performance/index.js";
+import { RouterContext } from "../../../router/context.js";
+import type { Router } from "../../../router/context.js";
+import { SubscriptionScope } from "jazz-tools";
+
+beforeAll(() => {
+  SubscriptionScope.enableProfiling();
+  setup(React.createElement);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+const mockRouter: Router = {
+  path: [],
+  setPage: vi.fn(),
+  addPages: vi.fn(),
+  goToIndex: vi.fn(),
+  goBack: vi.fn(),
+};
+
+function RouterProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <RouterContext.Provider value={mockRouter}>
+      {children}
+    </RouterContext.Provider>
+  );
+}
+
+describe("PerformancePage", () => {
+  it("shows empty state when no entries", () => {
+    vi.spyOn(performance, "getEntriesByType").mockReturnValue([]);
+
+    render(
+      <RouterProvider>
+        <PerformancePage onNavigate={() => {}} />
+      </RouterProvider>,
+    );
+
+    expect(screen.getByText(/No subscriptions recorded yet/)).toBeDefined();
+  });
+
+  it("renders a row when performance entries are provided", () => {
+    const mockMeasure = {
+      entryType: "measure",
+      name: "jazz.subscription:test-uuid",
+      startTime: 100,
+      duration: 50,
+      detail: {
+        type: "jazz-subscription",
+        uuid: "test-uuid",
+        id: "co_z123abc",
+        source: "useCoState",
+        resolve: { depth: 1 },
+        status: "loaded",
+        startTime: 100,
+        endTime: 150,
+        duration: 50,
+      },
+    } as unknown as PerformanceEntry;
+
+    vi.spyOn(performance, "getEntriesByType").mockImplementation((type) => {
+      if (type === "measure") return [mockMeasure];
+      return [];
+    });
+
+    render(
+      <RouterProvider>
+        <PerformancePage onNavigate={() => {}} />
+      </RouterProvider>,
+    );
+
+    expect(screen.getByText("co_z123abc")).toBeDefined();
+    expect(screen.getByText("useCoState")).toBeDefined();
+  });
+});

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

@@ -0,0 +1,68 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen, fireEvent } from "@testing-library/react";
+import { setup } from "goober";
+import React from "react";
+import { SubscriptionDetailPanel } from "../../../pages/performance/SubscriptionDetailPanel.js";
+
+beforeAll(() => {
+  setup(React.createElement);
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("SubscriptionDetailPanel", () => {
+  const mockEntry = {
+    uuid: "test-uuid",
+    id: "co_z123",
+    source: "useCoState",
+    resolve: "{}",
+    status: "loaded" as const,
+    startTime: 0,
+    endTime: 100,
+    duration: 100,
+  };
+
+  it("calls onClose when close button is clicked", () => {
+    const onClose = vi.fn();
+    render(
+      <SubscriptionDetailPanel
+        entry={mockEntry}
+        onNavigate={() => {}}
+        onClose={onClose}
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText("Close detail panel"));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("calls onNavigate when CoValue link is clicked", () => {
+    const onNavigate = vi.fn();
+    render(
+      <SubscriptionDetailPanel
+        entry={mockEntry}
+        onNavigate={onNavigate}
+        onClose={() => {}}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("co_z123"));
+    expect(onNavigate).toHaveBeenCalledWith("co_z123");
+  });
+
+  it("displays entry details", () => {
+    render(
+      <SubscriptionDetailPanel
+        entry={mockEntry}
+        onNavigate={() => {}}
+        onClose={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("useCoState")).toBeDefined();
+    expect(screen.getByText("co_z123")).toBeDefined();
+  });
+});

package/src/inspector/tests/pages/performance/SubscriptionRow.test.tsx

@@ -0,0 +1,93 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen, fireEvent } from "@testing-library/react";
+import { setup } from "goober";
+import React from "react";
+import { SubscriptionRow } from "../../../pages/performance/SubscriptionRow.js";
+
+beforeAll(() => {
+  setup(React.createElement);
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("SubscriptionRow", () => {
+  const mockEntry = {
+    uuid: "test-uuid",
+    id: "co_z123",
+    source: "useCoState",
+    resolve: "{}",
+    status: "loaded" as const,
+    startTime: 0,
+    endTime: 100,
+    duration: 100,
+  };
+
+  it("triggers selection on Enter key", () => {
+    const onSelect = vi.fn();
+    render(
+      <SubscriptionRow
+        entry={mockEntry}
+        isSelected={false}
+        onSelect={onSelect}
+        barLeft="0%"
+        barWidth="10%"
+        barColor="green"
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+    expect(onSelect).toHaveBeenCalled();
+  });
+
+  it("triggers selection on Space key", () => {
+    const onSelect = vi.fn();
+    render(
+      <SubscriptionRow
+        entry={mockEntry}
+        isSelected={false}
+        onSelect={onSelect}
+        barLeft="0%"
+        barWidth="10%"
+        barColor="green"
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("button"), { key: " " });
+    expect(onSelect).toHaveBeenCalled();
+  });
+
+  it("is focusable with tabIndex", () => {
+    render(
+      <SubscriptionRow
+        entry={mockEntry}
+        isSelected={false}
+        onSelect={() => {}}
+        barLeft="0%"
+        barWidth="10%"
+        barColor="green"
+      />,
+    );
+
+    expect(screen.getByRole("button").getAttribute("tabindex")).toBe("0");
+  });
+
+  it("triggers selection on click", () => {
+    const onSelect = vi.fn();
+    render(
+      <SubscriptionRow
+        entry={mockEntry}
+        isSelected={false}
+        onSelect={onSelect}
+        barLeft="0%"
+        barWidth="10%"
+        barColor="green"
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button"));
+    expect(onSelect).toHaveBeenCalled();
+  });
+});

package/src/inspector/tests/pages/performance/Timeline.test.tsx

@@ -0,0 +1,57 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen, fireEvent } from "@testing-library/react";
+import { setup } from "goober";
+import React from "react";
+import { Timeline } from "../../../pages/performance/Timeline.js";
+
+beforeAll(() => {
+  setup(React.createElement);
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("Timeline", () => {
+  it("shows clear selection button when selection exists", () => {
+    render(
+      <Timeline
+        entries={[]}
+        timeRange={{ min: 0, max: 1000 }}
+        selection={[100, 500]}
+        onSelectionChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Clear selection")).toBeDefined();
+  });
+
+  it("calls onSelectionChange(null) when clear button clicked", () => {
+    const onSelectionChange = vi.fn();
+    render(
+      <Timeline
+        entries={[]}
+        timeRange={{ min: 0, max: 1000 }}
+        selection={[100, 500]}
+        onSelectionChange={onSelectionChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Clear selection"));
+    expect(onSelectionChange).toHaveBeenCalledWith(null);
+  });
+
+  it("does not show clear selection button when no selection", () => {
+    render(
+      <Timeline
+        entries={[]}
+        timeRange={{ min: 0, max: 1000 }}
+        selection={null}
+        onSelectionChange={() => {}}
+      />,
+    );
+
+    expect(screen.queryByText("Clear selection")).toBeNull();
+  });
+});

package/src/inspector/tests/pages/performance/helpers.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, it } from "vitest";
+import {
+  formatDuration,
+  getCallerLocation,
+  getCallerStack,
+} from "../../../pages/performance/helpers.js";
+
+describe("formatDuration", () => {
+  it("returns microseconds for duration < 1ms", () => {
+    expect(formatDuration(0.5)).toBe("500μs");
+    expect(formatDuration(0.001)).toBe("1μs");
+    expect(formatDuration(0.999)).toBe("999μs");
+  });
+
+  it("returns milliseconds for duration < 1000ms", () => {
+    expect(formatDuration(1)).toBe("1.00ms");
+    expect(formatDuration(123.456)).toBe("123.46ms");
+    expect(formatDuration(999.99)).toBe("999.99ms");
+  });
+
+  it("returns seconds for duration >= 1000ms", () => {
+    expect(formatDuration(1000)).toBe("1.00s");
+    expect(formatDuration(1500)).toBe("1.50s");
+    expect(formatDuration(60000)).toBe("60.00s");
+  });
+});
+
+describe("getCallerLocation", () => {
+  it("returns undefined for undefined stack", () => {
+    expect(getCallerLocation(undefined)).toBeUndefined();
+  });
+
+  it("returns undefined for empty stack", () => {
+    expect(getCallerLocation("")).toBeUndefined();
+  });
+
+  it("extracts user frame location filtering out internals", () => {
+    const stack = `Error
+    at trackLoadingPerformance (jazz-tools/src/subscribe.js:100:10)
+    at useCoState (jazz-tools/src/hooks.js:50:5)
+    at MyComponent (src/components/MyComponent.tsx:25:10)
+    at renderWithHooks (react-dom.js:100:5)`;
+
+    const result = getCallerLocation(stack);
+    expect(result).toContain("MyComponent.tsx:25:10");
+  });
+
+  it("filters out node_modules frames", () => {
+    const stack = `Error
+    at someFunction (node_modules/some-lib/index.js:10:5)
+    at MyComponent (src/App.tsx:15:3)`;
+
+    const result = getCallerLocation(stack);
+    expect(result).toContain("App.tsx:15:3");
+  });
+});
+
+describe("getCallerStack", () => {
+  it("returns undefined for undefined stack", () => {
+    expect(getCallerStack(undefined)).toBeUndefined();
+  });
+
+  it("filters out Error: and React internals", () => {
+    // Stack trace format: first two lines are skipped by slice(2, 15)
+    const stack = `Error: test
+    at internalFunction (jazz-tools/src/internal.js:10:5)
+    at Component (src/App.tsx:10:5)
+    at renderWithHooks (react-dom.js:100:5)
+    at react-stack-bottom-frame (react.js:50:3)
+    at Parent (src/Parent.tsx:20:10)`;
+
+    const result = getCallerStack(stack);
+    expect(result).not.toContain("Error:");
+    expect(result).not.toContain("renderWithHooks");
+    expect(result).not.toContain("react-stack-bottom-frame");
+    expect(result).toContain("App.tsx");
+    expect(result).toContain("Parent.tsx");
+  });
+
+  it("reverses the stack order", () => {
+    // Stack trace format: first two lines are skipped, so we need padding lines
+    const stack = `Error
+    at internalFunction (jazz-tools/src/internal.js:10:5)
+    at First (src/First.tsx:10:5)
+    at Second (src/Second.tsx:20:5)`;
+
+    const result = getCallerStack(stack);
+    // Second should come before First after reversing
+    expect(result!.indexOf("Second")).toBeLessThan(result!.indexOf("First"));
+  });
+});

package/src/inspector/viewer/delete-local-data.tsx

@@ -2,17 +2,37 @@ import { Button } from "../ui/button.js";
 import { Modal } from "../ui/modal.js";
 import { Input } from "../ui/input.js";
 import { useState } from "react";
+import { useJazzContext } from "jazz-tools/react-core";
 
 const DELETE_LOCAL_DATA_STRING = "delete my local data";
 
 export function DeleteLocalData() {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [confirmDeleteString, setConfirmDeleteString] = useState("");
+  const jazzContext = useJazzContext();
 
   return (
     <>
-      <Button variant="destructive" onClick={() => setShowDeleteModal(true)}>
-        Delete my local data
+      <Button
+        variant="destructive"
+        onClick={() => setShowDeleteModal(true)}
+        title="Delete my local data"
+      >
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M2 4h12M5.333 4V2.667a1.333 1.333 0 011.334-1.334h2.666a1.333 1.333 0 011.334 1.334V4m2 0v9.333a1.333 1.333 0 01-1.334 1.334H4.667a1.333 1.333 0 01-1.334-1.334V4h9.334z"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
       </Button>
       <Modal
         isOpen={showDeleteModal}
@@ -83,10 +103,9 @@ export function DeleteLocalData() {
             variant="destructive"
             disabled={confirmDeleteString !== DELETE_LOCAL_DATA_STRING}
             onClick={() => {
-              const jazzKeys = Object.keys(localStorage).filter(
-                (key) => key.startsWith("jazz-") || key.startsWith("co_z"),
+              localStorage.removeItem(
+                jazzContext.getAuthSecretStorage().getStorageKey(),
               );
-              jazzKeys.forEach((key) => localStorage.removeItem(key));
               indexedDB.deleteDatabase("jazz-storage");
               window.location.reload();
               setShowDeleteModal(false);

package/src/inspector/viewer/header.tsx

@@ -4,18 +4,20 @@ import React, { type PropsWithChildren, useState } from "react";
 import { Button } from "../ui/button.js";
 import { Input } from "../ui/input.js";
 import { Breadcrumbs } from "./breadcrumbs.js";
-import { DeleteLocalData } from "./delete-local-data.js";
 import { useRouter } from "../router/context.js";
+import type { InspectorTab } from "../in-app.js";
 
 export function Header({
-  showDeleteLocalData = false,
   showClose = false,
   onClose,
+  activeTab,
+  onTabChange,
   children,
 }: PropsWithChildren<{
-  showDeleteLocalData?: boolean;
   showClose?: boolean;
   onClose?: () => void;
+  activeTab?: InspectorTab;
+  onTabChange?: (tab: InspectorTab) => void;
 }>) {
   const [coValueId, setCoValueId] = useState<CoID<RawCoValue> | "">("");
   const { path, setPage } = useRouter();
@@ -30,24 +32,59 @@ export function Header({
 
   return (
     <HeaderContainer>
-      <Breadcrumbs />
-      {path.length !== 0 && (
-        <Form onSubmit={handleCoValueIdSubmit}>
-          <Input
-            label="CoValue ID"
-            style={{ fontFamily: "monospace" }}
-            hideLabel
-            placeholder="co_z1234567890abcdef123456789"
-            value={coValueId}
-            onChange={(e) => setCoValueId(e.target.value as CoID<RawCoValue>)}
-          />
-        </Form>
+      {activeTab && onTabChange && (
+        <TabBar>
+          <Tab
+            active={activeTab === "inspector"}
+            onClick={() => onTabChange("inspector")}
+          >
+            Inspector
+          </Tab>
+          <Tab
+            active={activeTab === "performance"}
+            onClick={() => onTabChange("performance")}
+          >
+            Performance
+          </Tab>
+        </TabBar>
+      )}
+      {(activeTab === "inspector" || !activeTab) && (
+        <>
+          <Breadcrumbs />
+          {path.length !== 0 && (
+            <Form onSubmit={handleCoValueIdSubmit}>
+              <Input
+                label="CoValue ID"
+                style={{ fontFamily: "monospace" }}
+                hideLabel
+                placeholder="co_z1234567890abcdef123456789"
+                value={coValueId}
+                onChange={(e) =>
+                  setCoValueId(e.target.value as CoID<RawCoValue>)
+                }
+              />
+            </Form>
+          )}
+        </>
       )}
       {children}
-      {showDeleteLocalData && <DeleteLocalData />}
+      <Spacer />
       {showClose && (
         <Button variant="plain" type="button" onClick={onClose}>
-          Close
+          <svg
+            width="14"
+            height="14"
+            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>
         </Button>
       )}
     </HeaderContainer>
@@ -65,3 +102,45 @@ const HeaderContainer = styled("div")`
 const Form = styled("form")`
   width: 24rem;
 `;
+
+const TabBar = styled("div")`
+  display: flex;
+  gap: 0.25rem;
+  background-color: var(--j-foreground);
+  border-radius: var(--j-radius-lg);
+  padding: 0.25rem;
+`;
+
+const Tab = styled("button")<{ active?: boolean }>`
+  padding: 0.375rem 0.75rem;
+  border: none;
+  border-radius: var(--j-radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  ${(props) =>
+    props.active
+      ? `
+    background-color: white;
+    color: var(--j-text-color-strong);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--j-neutral-800);
+    }
+  `
+      : `
+    background-color: transparent;
+    color: var(--j-neutral-500);
+
+    &:hover {
+      color: var(--j-text-color-strong);
+    }
+  `}
+`;
+
+const Spacer = styled("div")`
+  flex: 1;
+`;

package/src/inspector/viewer/page-stack.tsx

@@ -1,5 +1,6 @@
 import { CoID, LocalNode, RawCoValue } from "cojson";
 import { styled } from "goober";
+import type { CSSProperties } from "react";
 import { Page } from "./page.js";
 import { ErrorBoundary } from "../ui/error-boundary.js";
 import { useRouter } from "../router/context.js";
@@ -17,9 +18,10 @@ const PageStackContainer = styled("article")`
 
 type PageStackProps = {
   homePage?: React.ReactNode;
+  style?: CSSProperties;
 };
 
-export function PageStack({ homePage }: PageStackProps) {
+export function PageStack({ homePage, style }: PageStackProps) {
   const { path, addPages, goBack } = useRouter();
   const { localNode } = useNode();
 
@@ -27,25 +29,27 @@ export function PageStack({ homePage }: PageStackProps) {
   const index = path.length - 1;
 
   if (path.length <= 0) {
-    return <PageStackContainer>{homePage ?? <HomePage />}</PageStackContainer>;
+    return (
+      <PageStackContainer style={style}>
+        {homePage ?? <HomePage />}
+      </PageStackContainer>
+    );
   }
 
   return (
-    <>
-      <PageStackContainer>
-        {localNode && page && (
-          <ErrorBoundary title="An error occurred while rendering this CoValue">
-            <Page
-              coId={page.coId}
-              node={localNode}
-              name={page.name || page.coId}
-              onHeaderClick={goBack}
-              onNavigate={addPages}
-              isTopLevel={index === path.length - 1}
-            />
-          </ErrorBoundary>
-        )}
-      </PageStackContainer>
-    </>
+    <PageStackContainer style={style}>
+      {localNode && page && (
+        <ErrorBoundary title="An error occurred while rendering this CoValue">
+          <Page
+            coId={page.coId}
+            node={localNode}
+            name={page.name || page.coId}
+            onHeaderClick={goBack}
+            onNavigate={addPages}
+            isTopLevel={index === path.length - 1}
+          />
+        </ErrorBoundary>
+      )}
+    </PageStackContainer>
   );
 }