@multiplatform.one/frappe 6.0.0

package/dist/cjs/devtools/FrappeDevtoolsPanel.cjs

@@ -0,0 +1,838 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FrappeDevtoolsPanel_exports = {};
+__export(FrappeDevtoolsPanel_exports, {
+  FrappeDevtoolsPanel: () => FrappeDevtoolsPanel
+});
+module.exports = __toCommonJS(FrappeDevtoolsPanel_exports);
+var import_react = require("react");
+var import_types = require("../sync/types.cjs");
+var import_theme = require("./theme.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const fontMono = "'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace";
+const fontUi = "system-ui, -apple-system, sans-serif";
+const sidebarWidth = 250;
+const virtualItemHeight = 28;
+const virtualOverscan = 10;
+function relativeTime(ts) {
+  const diff = Date.now() - ts;
+  if (diff < 1e3) return "just now";
+  if (diff < 6e4) return `${Math.floor(diff / 1e3)}s ago`;
+  if (diff < 36e5) return `${Math.floor(diff / 6e4)}m ago`;
+  return `${Math.floor(diff / 36e5)}h ago`;
+}
+function truncate(s, max) {
+  return s.length > max ? `${s.slice(0, max)}\u2026` : s;
+}
+function checkpointAge(checkpoint) {
+  if (!checkpoint) return "none";
+  try {
+    const diff = Date.now() - new Date(checkpoint).getTime();
+    return diff < 6e4 ? "fresh" : "stale";
+  } catch {
+    return "none";
+  }
+}
+const opIcons = {
+  [import_types.Operation.Create]: "+",
+  [import_types.Operation.Update]: "~",
+  [import_types.Operation.Delete]: "\xD7"
+};
+function useVirtualScroll(itemCount, containerHeight) {
+  const [scrollTop, setScrollTop] = (0, import_react.useState)(0);
+  const totalHeight = itemCount * virtualItemHeight;
+  const startIdx = Math.max(0, Math.floor(scrollTop / virtualItemHeight) - virtualOverscan);
+  const visibleCount = Math.ceil(containerHeight / virtualItemHeight) + virtualOverscan * 2;
+  const endIdx = Math.min(itemCount, startIdx + visibleCount);
+  const onScroll = (0, import_react.useCallback)(e => {
+    setScrollTop(e.currentTarget.scrollTop);
+  }, []);
+  return {
+    startIdx,
+    endIdx,
+    totalHeight,
+    onScroll,
+    offsetY: startIdx * virtualItemHeight
+  };
+}
+function StatusDot({
+  color,
+  size = 8
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    style: {
+      display: "inline-block",
+      width: size,
+      height: size,
+      borderRadius: "50%",
+      backgroundColor: color,
+      flexShrink: 0
+    }
+  });
+}
+function Badge({
+  children,
+  bg,
+  color
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    style: {
+      fontSize: 10,
+      fontFamily: fontMono,
+      padding: "1px 5px",
+      borderRadius: 3,
+      backgroundColor: bg,
+      color,
+      whiteSpace: "nowrap"
+    },
+    children
+  });
+}
+function TabButton({
+  active,
+  onClick,
+  children,
+  t
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+    type: "button",
+    onClick,
+    style: {
+      fontFamily: fontUi,
+      fontSize: 12,
+      padding: "4px 12px",
+      border: "none",
+      borderBottom: active ? `2px solid ${t.accent}` : "2px solid transparent",
+      background: "transparent",
+      color: active ? t.accent : t.textSecondary,
+      cursor: "pointer",
+      fontWeight: active ? 600 : 400
+    },
+    children
+  });
+}
+function Sidebar({
+  state,
+  selected,
+  onSelect,
+  t
+}) {
+  const ageColor = age => age === "fresh" ? t.success : age === "stale" ? t.warning : t.error;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      width: sidebarWidth,
+      minWidth: sidebarWidth,
+      borderRight: `1px solid ${t.border}`,
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden"
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        padding: "8px 10px",
+        fontFamily: fontUi,
+        fontSize: 11,
+        fontWeight: 600,
+        color: t.textSecondary,
+        textTransform: "uppercase",
+        letterSpacing: "0.5px",
+        borderBottom: `1px solid ${t.border}`
+      },
+      children: "Subscriptions"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        flex: 1,
+        overflowY: "auto"
+      },
+      children: [state.subscriptions.length === 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        style: {
+          padding: "16px 10px",
+          fontFamily: fontUi,
+          fontSize: 12,
+          color: t.textSecondary,
+          textAlign: "center"
+        },
+        children: "No active subscriptions"
+      }), state.subscriptions.map(sub => {
+        const age = checkpointAge(sub.checkpoint);
+        const isSelected = selected === sub.id;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          onClick: () => onSelect(sub.id),
+          style: {
+            padding: "6px 10px",
+            cursor: "pointer",
+            backgroundColor: isSelected ? t.bgHover : "transparent",
+            borderLeft: isSelected ? `3px solid ${t.accent}` : "3px solid transparent",
+            display: "flex",
+            alignItems: "center",
+            gap: 6
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(StatusDot, {
+            color: ageColor(age)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+            style: {
+              flex: 1,
+              minWidth: 0
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+              style: {
+                fontFamily: fontMono,
+                fontSize: 12,
+                color: t.text,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: sub.query.doctype
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+              style: {
+                fontFamily: fontUi,
+                fontSize: 10,
+                color: t.textSecondary
+              },
+              children: [sub.docCount, " docs", sub.tombstoneCount > 0 && ` \xB7 ${sub.tombstoneCount} tombstones`]
+            })]
+          })]
+        }, sub.id);
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        padding: "8px 10px",
+        borderTop: `1px solid ${t.border}`,
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        flexWrap: "wrap"
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(StatusDot, {
+        color: state.connection.socketConnected ? t.success : t.error
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+        style: {
+          fontFamily: fontUi,
+          fontSize: 10,
+          color: t.textSecondary
+        },
+        children: state.connection.socketConnected ? "Connected" : "Disconnected"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Badge, {
+        bg: state.connection.isLeader ? t.accent + "22" : t.bgSubtle,
+        color: state.connection.isLeader ? t.accent : t.textSecondary,
+        children: state.connection.isLeader ? "leader" : "follower"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StatusDot, {
+        color: state.connection.isOnline ? t.success : t.error,
+        size: 6
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+        style: {
+          fontFamily: fontUi,
+          fontSize: 10,
+          color: t.textSecondary
+        },
+        children: state.connection.isOnline ? "online" : "offline"
+      })]
+    })]
+  });
+}
+function PageNavigator({
+  sub,
+  syncModule,
+  t
+}) {
+  const pageInfo = sub.pageInfo;
+  if (!pageInfo) return null;
+  const islands = sub.progressiveCache?.islands || [];
+  const totalPages = pageInfo.totalPages === "unknown" ? pageInfo.knownPages + 1 : pageInfo.totalPages;
+  const maxDisplay = Math.min(totalPages, 50);
+  const isPageCached = page => {
+    return islands.some(isl => page >= isl.startPage && page <= isl.endPage);
+  };
+  const getIslandForPage = page => {
+    return islands.find(isl => page >= isl.startPage && page <= isl.endPage);
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        display: "flex",
+        gap: 16,
+        marginBottom: 8,
+        fontFamily: fontMono,
+        fontSize: 11,
+        color: t.textSecondary,
+        flexWrap: "wrap"
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+        children: ["page ", /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+          style: {
+            color: t.accent
+          },
+          children: pageInfo.currentPage
+        }), "/", pageInfo.totalPages === "unknown" ? "?" : pageInfo.totalPages]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+        children: ["known: ", pageInfo.knownPages]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+        children: ["cached: ", pageInfo.itemsInCache]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+        children: ["size: ", pageInfo.pageSize]
+      }), pageInfo.hasMore && /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+        style: {
+          color: t.warning
+        },
+        children: "hasMore"
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        display: "flex",
+        gap: 2,
+        flexWrap: "wrap",
+        alignItems: "center"
+      },
+      children: [Array.from({
+        length: maxDisplay
+      }, (_, i) => i + 1).map(page => {
+        const cached = isPageCached(page);
+        const isCurrent = page === pageInfo.currentPage;
+        const island = getIslandForPage(page);
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          onClick: () => syncModule.getPage(sub.id, page),
+          title: cached ? `Page ${page} \xB7 ${island?.fetchedVia || "cached"}` : `Page ${page} \xB7 not cached`,
+          style: {
+            width: 24,
+            height: 20,
+            fontSize: 9,
+            fontFamily: fontMono,
+            border: `1px solid ${isCurrent ? t.accent : cached ? t.border : t.border + "60"}`,
+            borderRadius: 3,
+            backgroundColor: isCurrent ? t.accent : cached ? t.bgSubtle : "transparent",
+            color: isCurrent ? "#fff" : cached ? t.text : t.textSecondary + "80",
+            cursor: "pointer",
+            padding: 0,
+            lineHeight: "20px"
+          },
+          children: page
+        }, page);
+      }), pageInfo.hasMore && /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+        style: {
+          fontFamily: fontMono,
+          fontSize: 11,
+          color: t.textSecondary
+        },
+        children: "\u2026"
+      })]
+    })]
+  });
+}
+function ProgressiveCacheView({
+  sub,
+  t
+}) {
+  const docIds = sub.progressiveCache?.docIds || [];
+  const nextCursor = sub.progressiveCache?.nextCursor;
+  const containerRef = (0, import_react.useRef)(null);
+  const [containerH, setContainerH] = (0, import_react.useState)(200);
+  (0, import_react.useEffect)(() => {
+    if (containerRef.current) setContainerH(containerRef.current.clientHeight);
+  }, []);
+  const {
+    startIdx,
+    endIdx,
+    totalHeight,
+    onScroll,
+    offsetY
+  } = useVirtualScroll(docIds.length, containerH);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    ref: containerRef,
+    onScroll,
+    style: {
+      maxHeight: 200,
+      overflowY: "auto",
+      border: `1px solid ${t.border}`,
+      borderRadius: 4,
+      fontFamily: fontMono,
+      fontSize: 11
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        height: totalHeight,
+        position: "relative"
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        style: {
+          transform: `translateY(${offsetY}px)`
+        },
+        children: Array.from({
+          length: endIdx - startIdx
+        }, (_, i) => {
+          const idx = startIdx + i;
+          const docId = docIds[idx];
+          const isGap = docId === "";
+          const isCursor = docId === nextCursor;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+            style: {
+              height: virtualItemHeight,
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "0 8px",
+              color: isGap ? t.textSecondary + "50" : t.text,
+              backgroundColor: isCursor ? t.accent + "15" : "transparent",
+              borderLeft: isCursor ? `2px solid ${t.accent}` : "2px solid transparent"
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+              style: {
+                width: 40,
+                color: t.textSecondary,
+                textAlign: "right"
+              },
+              children: idx
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+              style: {
+                flex: 1,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: isGap ? "\u2014 gap \u2014" : truncate(docId, 40)
+            }), isCursor && /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+              style: {
+                fontSize: 9,
+                color: t.accent
+              },
+              children: "cursor"
+            })]
+          }, idx);
+        })
+      })
+    })
+  });
+}
+function PagesTab({
+  sub,
+  syncModule,
+  t
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 12
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(PageNavigator, {
+      sub,
+      syncModule,
+      t
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        style: {
+          fontFamily: fontUi,
+          fontSize: 11,
+          fontWeight: 600,
+          color: t.textSecondary,
+          marginBottom: 4
+        },
+        children: ["Progressive Cache (", sub.progressiveCache?.docIds.length ?? 0, " entries)"]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProgressiveCacheView, {
+        sub,
+        t
+      })]
+    })]
+  });
+}
+function CacheTab({
+  state,
+  t
+}) {
+  const [selectedDoctype, setSelectedDoctype] = (0, import_react.useState)(null);
+  const [_expandedDoc, setExpandedDoc] = (0, import_react.useState)(null);
+  const doctypes = state.normalizedCache.doctypes;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      display: "flex",
+      gap: 12,
+      height: "100%"
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        width: 180,
+        minWidth: 180,
+        borderRight: `1px solid ${t.border}`,
+        overflowY: "auto"
+      },
+      children: doctypes.map(dt => /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        onClick: () => {
+          setSelectedDoctype(dt.doctype);
+          setExpandedDoc(null);
+        },
+        style: {
+          padding: "4px 8px",
+          cursor: "pointer",
+          backgroundColor: selectedDoctype === dt.doctype ? t.bgHover : "transparent",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+          style: {
+            fontFamily: fontMono,
+            fontSize: 11,
+            color: t.text,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          children: dt.doctype
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Badge, {
+          bg: t.bgSubtle,
+          color: t.textSecondary,
+          children: dt.count
+        })]
+      }, dt.doctype))
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        flex: 1,
+        overflowY: "auto",
+        padding: "0 4px"
+      },
+      children: [!selectedDoctype && /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        style: {
+          fontFamily: fontUi,
+          fontSize: 12,
+          color: t.textSecondary,
+          padding: 16,
+          textAlign: "center"
+        },
+        children: "Select a doctype to browse cached documents"
+      }), selectedDoctype && /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        style: {
+          fontFamily: fontMono,
+          fontSize: 11,
+          color: t.text,
+          padding: "8px 0"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          style: {
+            color: t.textSecondary,
+            marginBottom: 8
+          },
+          children: [selectedDoctype, ": ", doctypes.find(d => d.doctype === selectedDoctype)?.count ?? 0, " ", "documents in cache"]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          style: {
+            color: t.textSecondary,
+            fontSize: 10
+          },
+          children: ["Use browser devtools console to inspect individual documents via", " ", /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              color: t.accent
+            },
+            children: "syncModule.getDocFromCache()"
+          })]
+        })]
+      })]
+    })]
+  });
+}
+function MutationsTab({
+  state,
+  t
+}) {
+  const [filter, setFilter] = (0, import_react.useState)("all");
+  const [expandedId, setExpandedId] = (0, import_react.useState)(null);
+  const entries = (0, import_react.useMemo)(() => {
+    let list = [];
+    if (filter === "all" || filter === "pending") list = list.concat(state.mutationJournal.pending);
+    if (filter === "all" || filter === "confirmed") list = list.concat(state.mutationJournal.confirmed);
+    if (filter === "all" || filter === "failed") list = list.concat(state.mutationJournal.failed);
+    return list.sort((a, b) => b.createdAt - a.createdAt);
+  }, [state.mutationJournal, filter]);
+  const statusColor = s => s === import_types.Status.Pending ? t.pending : s === import_types.Status.Confirmed ? t.success : t.error;
+  const filters = [{
+    key: "all",
+    label: "All",
+    count: state.mutationJournal.pending.length + state.mutationJournal.confirmed.length + state.mutationJournal.failed.length
+  }, {
+    key: "pending",
+    label: "Pending",
+    count: state.mutationJournal.pending.length
+  }, {
+    key: "confirmed",
+    label: "Confirmed",
+    count: state.mutationJournal.confirmed.length
+  }, {
+    key: "failed",
+    label: "Failed",
+    count: state.mutationJournal.failed.length
+  }];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        display: "flex",
+        gap: 4,
+        marginBottom: 8
+      },
+      children: filters.map(f => /* @__PURE__ */(0, import_jsx_runtime.jsxs)("button", {
+        type: "button",
+        onClick: () => setFilter(f.key),
+        style: {
+          fontFamily: fontUi,
+          fontSize: 11,
+          padding: "3px 8px",
+          border: `1px solid ${filter === f.key ? t.accent : t.border}`,
+          borderRadius: 3,
+          backgroundColor: filter === f.key ? t.accent + "15" : "transparent",
+          color: filter === f.key ? t.accent : t.textSecondary,
+          cursor: "pointer"
+        },
+        children: [f.label, " (", f.count, ")"]
+      }, f.key))
+    }), entries.length === 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        fontFamily: fontUi,
+        fontSize: 12,
+        color: t.textSecondary,
+        padding: 16,
+        textAlign: "center"
+      },
+      children: "No mutations"
+    }), entries.map(entry => {
+      const isExpanded = expandedId === entry.id;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        style: {
+          padding: "4px 8px",
+          borderBottom: `1px solid ${t.border}`,
+          cursor: entry.error ? "pointer" : "default"
+        },
+        onClick: () => entry.error && setExpandedId(isExpanded ? null : entry.id),
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            fontFamily: fontMono,
+            fontSize: 11
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              width: 14,
+              textAlign: "center",
+              fontWeight: 700,
+              color: entry.operation === import_types.Operation.Create ? t.success : entry.operation === import_types.Operation.Delete ? t.error : t.warning
+            },
+            children: opIcons[entry.operation] ?? "?"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              color: t.text
+            },
+            children: entry.doctype
+          }), entry.docname && /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              color: t.textSecondary
+            },
+            children: truncate(entry.docname, 20)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              flex: 1
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Badge, {
+            bg: statusColor(entry.status) + "22",
+            color: statusColor(entry.status),
+            children: entry.status
+          }), entry.retryCount > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+            style: {
+              fontSize: 10,
+              color: t.textSecondary
+            },
+            children: ["retry: ", entry.retryCount]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+            style: {
+              fontSize: 10,
+              color: t.textSecondary
+            },
+            children: relativeTime(entry.createdAt)
+          })]
+        }), isExpanded && entry.error && /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          style: {
+            marginTop: 4,
+            padding: "4px 8px",
+            backgroundColor: t.error + "10",
+            borderRadius: 3,
+            fontFamily: fontMono,
+            fontSize: 10,
+            color: t.error,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-all"
+          },
+          children: entry.error
+        })]
+      }, entry.id);
+    })]
+  });
+}
+function StatsBar({
+  state,
+  t
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      padding: "4px 10px",
+      borderTop: `1px solid ${t.border}`,
+      fontFamily: fontMono,
+      fontSize: 10,
+      color: t.textSecondary,
+      display: "flex",
+      gap: 12,
+      alignItems: "center",
+      flexWrap: "wrap"
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+      children: [state.subscriptions.length, " subscriptions"]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: "\xB7"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+      children: [state.normalizedCache.size, " cached docs"]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: "\xB7"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
+      children: [state.mutationJournal.pending.length, " pending mutations"]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: "\xB7"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: state.connection.isLeader ? "leader" : "follower"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: "\xB7"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: state.connection.isOnline ? "online" : "offline"
+    })]
+  });
+}
+const emptyState = {
+  subscriptions: [],
+  normalizedCache: {
+    size: 0,
+    doctypes: []
+  },
+  mutationJournal: {
+    pending: [],
+    confirmed: [],
+    failed: []
+  },
+  connection: {
+    socketConnected: false,
+    isLeader: false,
+    isOnline: true
+  }
+};
+function FrappeDevtoolsPanel({
+  syncModule,
+  devtoolsTheme
+}) {
+  const t = import_theme.themes[devtoolsTheme];
+  const [state, setState] = (0, import_react.useState)(emptyState);
+  const [selectedSubId, setSelectedSubId] = (0, import_react.useState)(null);
+  const [activeTab, setActiveTab] = (0, import_react.useState)("pages");
+  (0, import_react.useEffect)(() => {
+    setState(syncModule.__debug());
+    return syncModule.subscribeStore(() => {
+      setState(syncModule.__debug());
+    });
+  }, [syncModule]);
+  const selectedSub = (0, import_react.useMemo)(() => state.subscriptions.find(s => s.id === selectedSubId) ?? null, [state.subscriptions, selectedSubId]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      backgroundColor: t.bg,
+      color: t.text,
+      fontFamily: fontUi,
+      fontSize: 12
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        display: "flex",
+        flex: 1,
+        overflow: "hidden"
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Sidebar, {
+        state,
+        selected: selectedSubId,
+        onSelect: setSelectedSubId,
+        t
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          style: {
+            display: "flex",
+            borderBottom: `1px solid ${t.border}`,
+            padding: "0 8px"
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TabButton, {
+            active: activeTab === "pages",
+            onClick: () => setActiveTab("pages"),
+            t,
+            children: "Pages"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabButton, {
+            active: activeTab === "cache",
+            onClick: () => setActiveTab("cache"),
+            t,
+            children: "Cache"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabButton, {
+            active: activeTab === "mutations",
+            onClick: () => setActiveTab("mutations"),
+            t,
+            children: "Mutations"
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          style: {
+            flex: 1,
+            overflow: "auto",
+            padding: 10
+          },
+          children: [activeTab === "pages" && selectedSub && /* @__PURE__ */(0, import_jsx_runtime.jsx)(PagesTab, {
+            sub: selectedSub,
+            syncModule,
+            t
+          }), activeTab === "pages" && !selectedSub && /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+            style: {
+              color: t.textSecondary,
+              textAlign: "center",
+              padding: 32
+            },
+            children: "Select a subscription from the sidebar to view page state"
+          }), activeTab === "cache" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(CacheTab, {
+            state,
+            t
+          }), activeTab === "mutations" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(MutationsTab, {
+            state,
+            t
+          })]
+        })]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StatsBar, {
+      state,
+      t
+    })]
+  });
+}