jazz-tools 0.20.1 → 0.20.3

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, ((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 === 0 ? "1px" : `${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>
+  );
+}

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

@@ -0,0 +1,242 @@
+import { styled } from "goober";
+import type { SubscriptionEntry } from "./types.js";
+import { formatDuration, getCallerLocation } from "./helpers.js";
+
+// ============================================================================
+// Styled Components
+// ============================================================================
+
+const RowWrapper = styled("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);
+  }
+`;
+
+const TimeBar = styled("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;
+    }
+  }
+`;
+
+const TimeLabel = styled("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;
+    }
+  }
+`;
+
+const Cell = styled("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;
+    }
+  }
+`;
+
+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);
+  }
+`;
+
+const PendingDot = styled("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;
+    }
+  }
+`;
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export interface SubscriptionRowProps {
+  entry: SubscriptionEntry;
+  isSelected: boolean;
+  onSelect: () => void;
+  barLeft: string;
+  barWidth: string;
+  barColor: string;
+}
+
+export function SubscriptionRow({
+  entry,
+  isSelected,
+  onSelect,
+  barLeft,
+  barWidth,
+  barColor,
+}: SubscriptionRowProps) {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect();
+    }
+  };
+
+  return (
+    <RowWrapper
+      className="row-wrapper"
+      data-expanded={isSelected}
+      onClick={onSelect}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      role="button"
+      aria-label={`View details for ${entry.source} ${entry.id}`}
+    >
+      <Cell>
+        <StatusBadge data-status={entry.status}>{entry.source}</StatusBadge>
+      </Cell>
+      <Cell>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.125rem",
+          }}
+        >
+          <span>{entry.id}</span>
+          <span style={{ color: "var(--j-neutral-500)" }}>{entry.resolve}</span>
+        </div>
+      </Cell>
+      <Cell>{getCallerLocation(entry.callerStack) ?? "-"}</Cell>
+      <Cell>
+        {entry.duration !== undefined ? (
+          entry.duration === 0 ? (
+            "⚡ cached"
+          ) : (
+            formatDuration(entry.duration)
+          )
+        ) : (
+          <PendingDot />
+        )}
+      </Cell>
+      <TimeBar
+        className="time-bar"
+        data-status={entry.status}
+        data-near-edge={parseFloat(barLeft) + parseFloat(barWidth) > 85}
+        style={{
+          left: barLeft,
+          width: barWidth,
+          backgroundColor: barColor,
+        }}
+      >
+        <TimeLabel className="time-label">
+          {entry.duration === 0
+            ? "⚡ cached"
+            : entry.duration
+              ? formatDuration(entry.duration)
+              : "-"}
+        </TimeLabel>
+      </TimeBar>
+    </RowWrapper>
+  );
+}