@buoy-gg/network 7.0.15 → 7.0.16

package/lib/module/network/components/NetworkEventItemCompact.web.js

@@ -0,0 +1,800 @@
+"use strict";
+
+/**
+ * NetworkEventItemCompact.web — DOM twin of NetworkEventItemCompact.tsx.
+ *
+ * Same row layout, prop contract, memoization and display logic as the native
+ * file: method badge + size indicators on the left, 2-line URL / GraphQL
+ * operation display in the middle (via the SAME pure `formatGraphQLDisplay`
+ * util), content-type badge + chevron on the right, absolute-positioned
+ * status/client chips top-right and duration/relative-time bottom-right, and
+ * the pinned/saved/overridden glyphs.
+ *
+ * Web consumers resolve `@buoy-gg/shared-ui` to a minimal shim (storage +
+ * JsModal + ignored-pattern helpers only), so the RN-only chrome the native
+ * row imports from shared-ui is replicated here as DOM with provenance:
+ *  - `DevToolsCard` / `MethodBadge` / `TypeBadge` — inlined DOM twins, values
+ *    copied from shared/src/ui/components/DevToolsCard.tsx and Badge.tsx
+ *    (buoyColors palette inlined below).
+ *  - `macOSColors` — inlined verbatim subset from
+ *    shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts.
+ *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports,
+ *    24×24 viewBox, strokeWidth 2).
+ *  - `formatBytes` / `formatDuration` — copied verbatim from
+ *    shared/src/utils/formatting/dataFormatting.ts (not in the web shim).
+ *  - `formatRelativeTime` — copied verbatim from
+ *    shared/src/utils/time/formatRelativeTime.ts.
+ *
+ * Intentional deviations (all logged):
+ *  - `useTickEveryMinute` (shared-ui TickProvider context, 5s interval as
+ *    mounted by NetworkModal) is replaced by a module-level shared 5s interval
+ *    hook — the shim exposes no `useTick`, and one shared timer keeps the
+ *    native "one clock for all rows" behavior.
+ *  - `onLongPress` (pin toggle) fires after a 500ms pointer hold — the native
+ *    TouchableOpacity default `delayLongPress`. The click that follows a long
+ *    press is swallowed, matching native semantics.
+ *  - `activeOpacity={0.8}` press feedback is a pointer-driven opacity state.
+ *  - `numberOfLines={2}` → `-webkit-line-clamp: 2`.
+ *  - The duration/relative-time separator is two literal spaces natively;
+ *    `white-space: pre` preserves them (HTML would collapse to one).
+ *
+ * @platform React DOM Web
+ */
+
+import { memo, useEffect, useState, useRef } from "react";
+import { formatGraphQLDisplay } from "../utils/formatGraphQLVariables";
+
+// =============================
+// Native palettes (provenance)
+// =============================
+
+/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const macOSColors = {
+  text: {
+    primary: "#F5F5F7",
+    secondary: "#A1A1A6",
+    muted: "#8E8E93"
+  },
+  semantic: {
+    success: "#34C759",
+    error: "#FF453A",
+    warning: "#FFEB3B",
+    info: "#00B8E6",
+    debug: "#BF5AF2"
+  }
+};
+
+/** buoyColors subset — shared/src/ui/gameUI/constants/gameUIColors.ts (macOS theme), verbatim. */
+const buoy = {
+  card: "#1A1A1A",
+  border: "#333333",
+  primary: "#20C997",
+  // Buoy teal (success/primary are the same value)
+  success: "#20C997",
+  warning: "#FFA94D",
+  error: "#EF4444",
+  textSecondary: "#A0A0A0",
+  textMuted: "#888888"
+};
+
+// =============================
+// Inline lucide icons (shared-ui icons are lucide re-exports)
+// =============================
+
+function Svg({
+  size = 14,
+  color = "currentColor",
+  children
+}) {
+  return /*#__PURE__*/_jsx("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: {
+      flexShrink: 0,
+      display: "block"
+    },
+    children: children
+  });
+}
+const ChevronRight = p => /*#__PURE__*/_jsx(Svg, {
+  ...p,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "m9 18 6-6-6-6"
+  })
+});
+const Upload = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+  }), /*#__PURE__*/_jsx("polyline", {
+    points: "17 8 12 3 7 8"
+  }), /*#__PURE__*/_jsx("line", {
+    x1: "12",
+    x2: "12",
+    y1: "3",
+    y2: "15"
+  })]
+});
+const Download = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+  }), /*#__PURE__*/_jsx("polyline", {
+    points: "7 10 12 15 17 10"
+  }), /*#__PURE__*/_jsx("line", {
+    x1: "12",
+    x2: "12",
+    y1: "15",
+    y2: "3"
+  })]
+});
+const Clock = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/_jsx("polyline", {
+    points: "12 6 12 12 16 14"
+  })]
+});
+const AlertCircle = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/_jsx("line", {
+    x1: "12",
+    x2: "12",
+    y1: "8",
+    y2: "12"
+  }), /*#__PURE__*/_jsx("line", {
+    x1: "12",
+    x2: "12.01",
+    y1: "16",
+    y2: "16"
+  })]
+});
+const Bookmark = p => /*#__PURE__*/_jsx(Svg, {
+  ...p,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"
+  })
+});
+const FlaskConical = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M8.5 2h7"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M7 16h10"
+  })]
+});
+const Pin = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M12 17v5"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1z"
+  })]
+});
+
+// =============================
+// Shared formatters (provenance copies — not in the web shim)
+// =============================
+
+/** shared/src/utils/formatting/dataFormatting.ts — verbatim. */
+function formatBytes(bytes) {
+  if (bytes === undefined || bytes === null) return "N/A";
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+}
+
+/** shared/src/utils/formatting/dataFormatting.ts — verbatim. */
+function formatDuration(ms) {
+  if (ms === undefined || ms === null) return "N/A";
+  if (ms < 1000) {
+    return `${ms}ms`;
+  }
+  if (ms < 60000) {
+    return `${(ms / 1000).toFixed(1)}s`;
+  }
+  if (ms < 3600000) {
+    const minutes = Math.floor(ms / 60000);
+    const seconds = Math.floor(ms % 60000 / 1000);
+    return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+  }
+  const hours = Math.floor(ms / 3600000);
+  const minutes = Math.floor(ms % 3600000 / 60000);
+  return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+}
+
+/** shared/src/utils/time/formatRelativeTime.ts — verbatim. */
+function formatRelativeTime(timestamp, currentTime = Date.now()) {
+  const timestampMs = timestamp instanceof Date ? timestamp.getTime() : timestamp;
+  const seconds = Math.floor((currentTime - timestampMs) / 1000);
+  if (seconds < 0) {
+    return "just now";
+  }
+  if (seconds < 60) {
+    return seconds === 0 ? "just now" : `${seconds}s ago`;
+  }
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {
+    return `${minutes}m ago`;
+  }
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+// =============================
+// Shared tick (DEVIATION: replaces shared-ui TickProvider/useTick)
+// =============================
+
+/**
+ * One module-level 5s clock shared by every mounted row — the same cadence the
+ * native rows get from NetworkModal's `TickProvider` (default `intervalMs`
+ * 5_000). The interval only runs while at least one row is mounted.
+ */
+const tickListeners = new Set();
+let tickInterval = null;
+function subscribeTick(listener) {
+  tickListeners.add(listener);
+  if (tickInterval == null) {
+    tickInterval = setInterval(() => {
+      const now = Date.now();
+      tickListeners.forEach(l => l(now));
+    }, 5_000);
+  }
+  return () => {
+    tickListeners.delete(listener);
+    if (tickListeners.size === 0 && tickInterval != null) {
+      clearInterval(tickInterval);
+      tickInterval = null;
+    }
+  };
+}
+function useSharedTick() {
+  const [tick, setTick] = useState(() => Date.now());
+  useEffect(() => subscribeTick(setTick), []);
+  return tick;
+}
+
+// =============================
+// Pure display helpers (copied verbatim from the native file)
+// =============================
+
+// Get color based on status
+function getStatusColor(status, error) {
+  if (error) return macOSColors.semantic.error;
+  if (!status) return macOSColors.semantic.warning;
+  if (status >= 200 && status < 300) return macOSColors.semantic.success;
+  if (status >= 300 && status < 400) return macOSColors.semantic.info;
+  if (status >= 400) return macOSColors.semantic.error;
+  return macOSColors.text.muted;
+}
+
+// Get content type badge with color
+function getContentTypeBadge(headers) {
+  const contentType = headers?.["content-type"] || headers?.["Content-Type"] || "";
+  if (contentType.includes("json")) return "JSON";
+  if (contentType.includes("xml")) return "XML";
+  if (contentType.includes("html")) return "HTML";
+  if (contentType.includes("text")) return "TEXT";
+  if (contentType.includes("image")) return "IMG";
+  if (contentType.includes("video")) return "VIDEO";
+  if (contentType.includes("audio")) return "AUDIO";
+  if (contentType.includes("form")) return "FORM";
+  return null;
+}
+
+/**
+ * The transport chip (`fetch` / `GQL` / `gRPC` / `XHR`), one brand colour each.
+ */
+function getClientChipColors(requestClient) {
+  switch (requestClient) {
+    case "fetch":
+      return {
+        backgroundColor: "rgba(74, 144, 226, 0.15)",
+        color: "#4A90E2"
+      };
+    case "graphql":
+      return {
+        backgroundColor: "rgba(229, 53, 171, 0.15)",
+        color: "#E535AB"
+      };
+    case "grpc-web":
+      return {
+        backgroundColor: "rgba(16, 185, 129, 0.15)",
+        color: "#10B981"
+      };
+    case "xhr":
+      return {
+        backgroundColor: "rgba(245, 158, 11, 0.15)",
+        color: "#F59E0B"
+      };
+    default:
+      return {
+        backgroundColor: "rgba(147, 51, 234, 0.15)",
+        color: "#9333EA"
+      };
+  }
+}
+
+// =============================
+// shared-ui DOM twins (provenance: Badge.tsx / DevToolsCard.tsx)
+// =============================
+
+/**
+ * MethodBadge twin — shared/src/ui/components/Badge.tsx `MethodBadge`
+ * (`size="small"`: 6/2 padding, 11px, weight 700, minWidth 45, `${color}15`
+ * fill, `${color}40` border, radius 4). METHOD_COLORS map, verbatim.
+ */
+const METHOD_COLORS = {
+  GET: buoy.success,
+  POST: buoy.primary,
+  PUT: buoy.warning,
+  PATCH: buoy.textSecondary,
+  DELETE: buoy.error,
+  HEAD: buoy.textMuted,
+  OPTIONS: buoy.primary
+};
+function MethodBadgeWeb({
+  method
+}) {
+  const color = METHOD_COLORS[method.toUpperCase()] || "#6B7280";
+  return /*#__PURE__*/_jsx("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: 45,
+      boxSizing: "border-box",
+      padding: "2px 6px",
+      fontSize: 11,
+      fontWeight: 700,
+      color,
+      backgroundColor: `${color}15`,
+      border: `1px solid ${color}40`,
+      borderRadius: 4
+    },
+    children: method.toUpperCase()
+  });
+}
+
+/**
+ * TypeBadge twin — shared/src/ui/components/Badge.tsx `TypeBadge`
+ * (`size="small"`). Content types ("JSON" etc.) are not in `getTypeColor`'s
+ * map, so they all resolve to `buoyColors.textMuted` — same as native.
+ */
+function TypeBadgeWeb({
+  type
+}) {
+  const color = buoy.textMuted;
+  return /*#__PURE__*/_jsx("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      padding: "2px 6px",
+      fontSize: 11,
+      fontWeight: 600,
+      color,
+      backgroundColor: `${color}15`,
+      border: `1px solid ${color}40`,
+      borderRadius: 4
+    },
+    children: type
+  });
+}
+
+/**
+ * DevToolsCard twin — shared/src/ui/components/DevToolsCard.tsx. Wrapper
+ * margin 4px vertical (the native row overrides horizontal to 8), card =
+ * buoyColors.card fill, `${border}40` outline + bottom hairline, radius 8,
+ * padding 12, minHeight 44, activeOpacity 0.8. Long-press = 500ms pointer
+ * hold (TouchableOpacity default delayLongPress) — see file header.
+ */
+function DevToolsCardWeb({
+  onPress,
+  onLongPress,
+  children,
+  contentStyle
+}) {
+  const [pressed, setPressed] = useState(false);
+  const longPressTimer = useRef(null);
+  const longPressFired = useRef(false);
+  const clearTimer = () => {
+    if (longPressTimer.current != null) {
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+    }
+  };
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      margin: "4px 8px"
+    },
+    children: /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onPointerDown: () => {
+        setPressed(true);
+        if (onLongPress) {
+          longPressFired.current = false;
+          clearTimer();
+          longPressTimer.current = setTimeout(() => {
+            longPressFired.current = true;
+            onLongPress();
+          }, 500);
+        }
+      },
+      onPointerUp: () => {
+        setPressed(false);
+        clearTimer();
+      },
+      onPointerLeave: () => {
+        setPressed(false);
+        clearTimer();
+      },
+      onPointerCancel: () => {
+        setPressed(false);
+        clearTimer();
+      },
+      onClick: () => {
+        // A long press toggles the pin; it must not ALSO open the detail.
+        if (longPressFired.current) {
+          longPressFired.current = false;
+          return;
+        }
+        onPress();
+      },
+      style: {
+        position: "relative",
+        display: "flex",
+        width: "100%",
+        boxSizing: "border-box",
+        backgroundColor: buoy.card,
+        borderRadius: 8,
+        border: `1px solid ${buoy.border}40`,
+        borderBottom: `1px solid ${buoy.border}40`,
+        padding: 12,
+        minHeight: 44,
+        margin: 0,
+        textAlign: "left",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        color: "inherit",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        opacity: pressed ? 0.8 : 1,
+        ...contentStyle
+      },
+      children: children
+    })
+  });
+}
+
+// =============================
+// Row (structure mirrors the native file 1:1)
+// =============================
+
+// Status indicator component - single responsibility
+function StatusIndicator({
+  event,
+  isPending,
+  statusColor
+}) {
+  if (isPending) {
+    return /*#__PURE__*/_jsxs("span", {
+      style: styles.pendingBadge,
+      children: [/*#__PURE__*/_jsx(Clock, {
+        size: 10,
+        color: macOSColors.semantic.warning
+      }), /*#__PURE__*/_jsx("span", {
+        style: styles.pendingText,
+        children: "..."
+      })]
+    });
+  }
+  if (event.error) {
+    return /*#__PURE__*/_jsxs("span", {
+      style: styles.errorBadge,
+      children: [/*#__PURE__*/_jsx(AlertCircle, {
+        size: 10,
+        color: macOSColors.semantic.error
+      }), /*#__PURE__*/_jsx("span", {
+        style: styles.errorText,
+        children: "ERR"
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx("span", {
+    style: styles.statusBadge,
+    children: /*#__PURE__*/_jsx("span", {
+      style: {
+        ...styles.statusText,
+        color: statusColor
+      },
+      children: String(event.status)
+    })
+  });
+}
+
+// Size indicators component - single responsibility
+function SizeIndicators({
+  requestSize,
+  responseSize
+}) {
+  if (!requestSize && !responseSize) return null;
+  return /*#__PURE__*/_jsxs("span", {
+    style: styles.sizeRow,
+    children: [requestSize ? /*#__PURE__*/_jsxs("span", {
+      style: styles.sizeItem,
+      children: [/*#__PURE__*/_jsx(Upload, {
+        size: 8,
+        color: macOSColors.semantic.info
+      }), /*#__PURE__*/_jsx("span", {
+        style: styles.sizeText,
+        children: formatBytes(requestSize)
+      })]
+    }) : null, responseSize ? /*#__PURE__*/_jsxs("span", {
+      style: styles.sizeItem,
+      children: [/*#__PURE__*/_jsx(Download, {
+        size: 8,
+        color: macOSColors.semantic.success
+      }), /*#__PURE__*/_jsx("span", {
+        style: styles.sizeText,
+        children: formatBytes(responseSize)
+      })]
+    }) : null]
+  });
+}
+
+/**
+ * Sole tick consumer in the row (rule2: composition over memo) — the periodic
+ * relative-timestamp tick re-renders ONLY this leaf, not the whole card.
+ */
+function BottomRightTime({
+  timestamp,
+  duration
+}) {
+  const tick = useSharedTick();
+  const relativeTime = formatRelativeTime(timestamp, tick);
+  return duration ? /*#__PURE__*/_jsxs("span", {
+    style: styles.bottomRightText,
+    children: [formatDuration(duration), "  ", relativeTime]
+  }) : /*#__PURE__*/_jsx("span", {
+    style: styles.bottomRightText,
+    children: relativeTime
+  });
+}
+export const NetworkEventItemCompact = /*#__PURE__*/memo(function NetworkEventItemCompact({
+  event,
+  onPress,
+  pinned = false,
+  saved = false,
+  overridden = false,
+  onLongPress
+}) {
+  const statusColor = getStatusColor(event.status, event.error);
+  const isPending = !event.status && !event.error;
+  const contentType = getContentTypeBadge(event.responseHeaders);
+
+  // Format URL for display (max 2 lines)
+  let displayUrl = event.path || event.url.replace(/^https?:\/\/[^/]+/, "");
+
+  // If this is a GraphQL request, show operation name with variables using
+  // arrow notation (same pure util as native).
+  if (event.requestClient === "graphql") {
+    if (event.operationName) {
+      displayUrl = formatGraphQLDisplay(event.operationName, event.graphqlVariables);
+    } else {
+      displayUrl = displayUrl.replace(/\/graphql[^?]*/, "/graphql");
+    }
+  } else if (event.operationName) {
+    // For non-GraphQL requests with operation names (e.g., gRPC)
+    displayUrl = `${displayUrl}\n(${event.operationName})`;
+  }
+  return /*#__PURE__*/_jsxs(DevToolsCardWeb, {
+    onPress: () => onPress(event),
+    onLongPress: onLongPress ? () => onLongPress(event) : undefined,
+    contentStyle: {
+      flexDirection: "row",
+      alignItems: "center",
+      borderLeft: `3px solid ${statusColor}`
+    },
+    children: [/*#__PURE__*/_jsxs("span", {
+      style: styles.topRightContainer,
+      children: [pinned ? /*#__PURE__*/_jsx(Pin, {
+        size: 10,
+        color: macOSColors.semantic.info
+      }) : null, saved ? /*#__PURE__*/_jsx(Bookmark, {
+        size: 10,
+        color: macOSColors.semantic.debug
+      }) : null, overridden || event.override ? /*#__PURE__*/_jsx(FlaskConical, {
+        size: 10,
+        color: macOSColors.semantic.warning
+      }) : null, /*#__PURE__*/_jsx(StatusIndicator, {
+        event: event,
+        isPending: isPending,
+        statusColor: statusColor
+      }), event.requestClient ? /*#__PURE__*/_jsx("span", {
+        style: {
+          ...styles.topRightBadge,
+          backgroundColor: getClientChipColors(event.requestClient).backgroundColor
+        },
+        children: /*#__PURE__*/_jsx("span", {
+          style: {
+            ...styles.clientText,
+            color: getClientChipColors(event.requestClient).color
+          },
+          children: event.requestClient === "graphql" ? "GQL" : event.requestClient === "grpc-web" ? "gRPC" : event.requestClient === "xhr" ? "XHR" : event.requestClient
+        })
+      }) : null]
+    }), /*#__PURE__*/_jsxs("span", {
+      style: styles.leftSection,
+      children: [/*#__PURE__*/_jsx(MethodBadgeWeb, {
+        method: event.method
+      }), /*#__PURE__*/_jsx(SizeIndicators, {
+        requestSize: event.requestSize,
+        responseSize: event.responseSize
+      })]
+    }), /*#__PURE__*/_jsx("span", {
+      style: styles.middleSection,
+      children: /*#__PURE__*/_jsx("span", {
+        style: styles.urlText,
+        children: displayUrl
+      })
+    }), /*#__PURE__*/_jsxs("span", {
+      style: styles.rightSection,
+      children: [contentType ? /*#__PURE__*/_jsx(TypeBadgeWeb, {
+        type: contentType
+      }) : null, /*#__PURE__*/_jsx(ChevronRight, {
+        size: 14,
+        color: macOSColors.text.muted
+      })]
+    }), /*#__PURE__*/_jsx("span", {
+      style: styles.bottomRightContainer,
+      children: /*#__PURE__*/_jsx(BottomRightTime, {
+        timestamp: event.timestamp,
+        duration: event.duration
+      })
+    })]
+  });
+});
+NetworkEventItemCompact.displayName = "NetworkEventItemCompact";
+
+// Values mirror the native StyleSheet block 1:1.
+const styles = {
+  leftSection: {
+    display: "flex",
+    flexDirection: "column",
+    marginRight: 8,
+    alignItems: "flex-start"
+  },
+  topRightContainer: {
+    position: "absolute",
+    top: 1,
+    right: 1,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  topRightBadge: {
+    display: "inline-flex",
+    padding: "2px 4px",
+    borderRadius: 4
+  },
+  middleSection: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    paddingRight: 8
+  },
+  urlText: {
+    fontSize: 12,
+    color: macOSColors.text.primary,
+    lineHeight: "16px",
+    fontFamily: "ui-monospace, Menlo, monospace",
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-all"
+  },
+  rightSection: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  bottomRightContainer: {
+    position: "absolute",
+    bottom: 4,
+    right: 8
+  },
+  bottomRightText: {
+    fontSize: 9,
+    color: macOSColors.text.muted,
+    fontFamily: "ui-monospace, Menlo, monospace",
+    whiteSpace: "pre"
+  },
+  statusBadge: {
+    display: "inline-flex",
+    padding: "1px 4px",
+    borderRadius: 3
+  },
+  statusText: {
+    fontSize: 10,
+    fontWeight: 600
+  },
+  pendingBadge: {
+    display: "inline-flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    padding: "1px 4px",
+    backgroundColor: macOSColors.semantic.warning + "26",
+    borderRadius: 3
+  },
+  pendingText: {
+    fontSize: 10,
+    color: macOSColors.semantic.warning,
+    fontWeight: 600
+  },
+  errorBadge: {
+    display: "inline-flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    padding: "1px 4px",
+    backgroundColor: macOSColors.semantic.error + "26",
+    borderRadius: 3
+  },
+  errorText: {
+    fontSize: 10,
+    color: macOSColors.semantic.error,
+    fontWeight: 600
+  },
+  sizeRow: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 4,
+    marginTop: 4
+  },
+  sizeItem: {
+    display: "inline-flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2
+  },
+  sizeText: {
+    fontSize: 8,
+    color: macOSColors.text.secondary,
+    fontFamily: "ui-monospace, Menlo, monospace"
+  },
+  clientText: {
+    fontSize: 8,
+    fontWeight: 700,
+    letterSpacing: 0.3,
+    textTransform: "uppercase"
+  }
+};