@osdk/react-devtools 0.5.0

package/build/esm/components/ComponentCard.module.scss.js

@@ -0,0 +1,31 @@
+// AUTO-GENERATED by scripts/build-css.mjs. Do not edit by hand.
+const styles = {
+  "componentCard": "ComponentCard-module__componentCard___CXSvCQzk",
+  "dt-fade-up": "ComponentCard-module__dt-fade-up___psFECV6x",
+  "header": "ComponentCard-module__header___Jn2yzzpo",
+  "headerLeft": "ComponentCard-module__headerLeft___lSFBRZeU",
+  "expandIcon": "ComponentCard-module__expandIcon___bVDJMvCw",
+  "componentName": "ComponentCard-module__componentName___zi9kmHje",
+  "headerRight": "ComponentCard-module__headerRight___Onizt4Xz",
+  "hookCountTag": "ComponentCard-module__hookCountTag___Au-g656K",
+  "warningTag": "ComponentCard-module__warningTag___SEHm7XTm",
+  "renderCount": "ComponentCard-module__renderCount___x5573ve1",
+  "avgDuration": "ComponentCard-module__avgDuration___DNliVFhR",
+  "healthDot": "ComponentCard-module__healthDot___am-3Y3CP",
+  "health_healthy": "ComponentCard-module__health_healthy___SzlgxyYl",
+  "health_warning": "ComponentCard-module__health_warning___ArfusCDB",
+  "health_error": "ComponentCard-module__health_error___douF5P6Z",
+  "issueCountTag": "ComponentCard-module__issueCountTag___nGCcS8sq",
+  "healthyLabel": "ComponentCard-module__healthyLabel___4ZF6SbZo",
+  "body": "ComponentCard-module__body___8jD0iuDQ",
+  "hooks": "ComponentCard-module__hooks___FXXF01wg",
+  "inlineIssues": "ComponentCard-module__inlineIssues___KDlbm-3o",
+  "inlineIssue": "ComponentCard-module__inlineIssue___NaFdeja5",
+  "inlineIssue_error": "ComponentCard-module__inlineIssue_error___Amx-Dk0L",
+  "inlineIssue_warning": "ComponentCard-module__inlineIssue_warning___nObMVMm3",
+  "inlineIssue_info": "ComponentCard-module__inlineIssue_info___8eBQmfKv",
+  "inlineIssueText": "ComponentCard-module__inlineIssueText___2VPigAUS",
+  "inlineIssueSuggestion": "ComponentCard-module__inlineIssueSuggestion___tcOUGQc-",
+  "dt-shimmer": "ComponentCard-module__dt-shimmer___Tet5666-"
+};
+export default styles;

package/build/esm/components/ComputeTab.js

@@ -0,0 +1,175 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button } from "@blueprintjs/core";
+import classNames from "classnames";
+import React, { useMemo } from "react";
+import { useComputeMetrics, useComputeNetworkPaused, useComputeRecording, useComputeRequests } from "../hooks/useComputeSelectors.js";
+import { formatBytes, formatNumber } from "../utils/format.js";
+import { BubbleChart } from "./BubbleChart.js";
+import styles from "./MonitoringPanel.module.scss.js";
+export const ComputeTab = ({
+  computeStore
+}) => {
+  const metrics = useComputeMetrics(computeStore);
+  const requests = useComputeRequests(computeStore);
+  const isRecording = useComputeRecording(computeStore);
+  const isNetworkPaused = useComputeNetworkPaused(computeStore);
+  const [selectedIds, setSelectedIds] = React.useState([]);
+  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  const recentRequests = useMemo(() => requests.slice(-50).reverse(), [requests]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.computeControls
+  }, isRecording ? /*#__PURE__*/React.createElement(Button, {
+    onClick: () => computeStore.setIsRecording(false),
+    icon: "stop",
+    intent: "danger",
+    size: "small"
+  }, "Stop Recording") : /*#__PURE__*/React.createElement(Button, {
+    onClick: () => computeStore.setIsRecording(true),
+    icon: "record",
+    intent: "primary",
+    size: "small"
+  }, "Start Recording"), /*#__PURE__*/React.createElement(Button, {
+    onClick: () => computeStore.toggleNetworkPaused(),
+    icon: isNetworkPaused ? "play" : "pause",
+    size: "small",
+    title: "Block all OSDK network requests"
+  }, isNetworkPaused ? "Resume" : "Pause", " Network")), (() => /*#__PURE__*/React.createElement("div", {
+    className: styles.computeMetricsGrid
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.metricCell
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.metricLabel
+  }, "Total Usage"), /*#__PURE__*/React.createElement("span", {
+    className: styles.metricValue
+  }, formatNumber(metrics.totalUsage)), /*#__PURE__*/React.createElement("span", {
+    className: styles.metricSubtext
+  }, metrics.fulfilledCount, " requests")), /*#__PURE__*/React.createElement("div", {
+    className: styles.metricCell
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.metricLabel
+  }, "Last Minute"), /*#__PURE__*/React.createElement("span", {
+    className: styles.metricValue
+  }, formatNumber(metrics.lastMinuteUsage)), /*#__PURE__*/React.createElement("span", {
+    className: styles.metricSubtext
+  }, "compute units")), /*#__PURE__*/React.createElement("div", {
+    className: styles.metricCell
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.metricLabel
+  }, "Avg per Request"), /*#__PURE__*/React.createElement("span", {
+    className: styles.metricValue
+  }, formatNumber(metrics.averageUsagePerRequest)), /*#__PURE__*/React.createElement("span", {
+    className: styles.metricSubtext
+  }, "compute units")), /*#__PURE__*/React.createElement("div", {
+    className: styles.metricCell
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.metricLabel
+  }, "Avg Response Size"), /*#__PURE__*/React.createElement("span", {
+    className: styles.metricValue
+  }, formatBytes(metrics.averageResponseBytes)), /*#__PURE__*/React.createElement("span", {
+    className: styles.metricSubtext
+  }, metrics.requestCount, " total", metrics.fulfilledWithoutUsageCount > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, ", ", metrics.fulfilledWithoutUsageCount, " without usage data")))))(), requests.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: styles.bubbleChartContainer
+  }, /*#__PURE__*/React.createElement(BubbleChart, {
+    computeStore: computeStore,
+    fillHeight: false,
+    selectedIds: selectedIds,
+    onSelectRequest: id => {
+      if (id) {
+        setSelectedIds([id]);
+      } else {
+        setSelectedIds([]);
+      }
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.operationsList
+  }, recentRequests.length > 0 ? recentRequests.map(req => /*#__PURE__*/React.createElement(ComputeRequestItem, {
+    key: req.id,
+    request: req,
+    isSelected: selectedIdSet.has(req.id)
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: styles.emptyState
+  }, isRecording ? "No compute requests yet" : "Start recording to track compute usage")));
+};
+const REQUEST_DISPLAY = {
+  "fulfilled": {
+    icon: "\u2713",
+    class: styles.computeFulfilled
+  },
+  "fulfilled-without-usage": {
+    icon: "\u00b7",
+    class: styles.computeFulfilledWithoutUsage
+  },
+  "failed": {
+    icon: "\u00d7",
+    class: styles.computeFailed
+  },
+  "pending": {
+    icon: "\u22ef",
+    class: styles.computePending
+  }
+};
+const DEFAULT_REQUEST_DISPLAY = {
+  icon: "\u2022",
+  class: ""
+};
+function getUsageClass(usage) {
+  if (usage > 1000) {
+    return styles.danger;
+  }
+  if (usage > 100) {
+    return styles.warning;
+  }
+  return styles.success;
+}
+const ComputeRequestItem = ({
+  request,
+  isSelected
+}) => {
+  const {
+    icon: requestIcon,
+    class: requestClass
+  } = REQUEST_DISPLAY[request.type] ?? DEFAULT_REQUEST_DISPLAY;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.operationItem, {
+      [styles.selectedItem]: isSelected
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames(styles.operationType, requestClass)
+  }, requestIcon), /*#__PURE__*/React.createElement("div", {
+    className: styles.operationDetails
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.operationSignature
+  }, request.requestUrl), /*#__PURE__*/React.createElement("div", {
+    className: styles.operationTime
+  }, new Date(request.requestTimestamp).toLocaleTimeString()), /*#__PURE__*/React.createElement("div", {
+    className: styles.operationMetrics
+  }, request.type === "fulfilled" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: classNames(styles.operationMetric, getUsageClass(request.computeUsage))
+  }, formatNumber(request.computeUsage), " CU"), /*#__PURE__*/React.createElement("span", {
+    className: styles.operationMetric
+  }, formatBytes(request.responsePayloadBytes))), request.type === "fulfilled-without-usage" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: styles.operationMetric
+  }, "no usage data"), /*#__PURE__*/React.createElement("span", {
+    className: styles.operationMetric
+  }, formatBytes(request.responsePayloadBytes))), request.type === "failed" && /*#__PURE__*/React.createElement("span", {
+    className: classNames(styles.operationMetric, styles.danger)
+  }, request.error.type), request.type === "pending" && /*#__PURE__*/React.createElement("span", {
+    className: styles.operationMetric
+  }, "Loading..."))));
+};
+//# sourceMappingURL=ComputeTab.js.map

package/build/esm/components/ComputeTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComputeTab.js","names":["Button","classNames","React","useMemo","useComputeMetrics","useComputeNetworkPaused","useComputeRecording","useComputeRequests","formatBytes","formatNumber","BubbleChart","styles","ComputeTab","computeStore","metrics","requests","isRecording","isNetworkPaused","selectedIds","setSelectedIds","useState","selectedIdSet","Set","recentRequests","slice","reverse","createElement","Fragment","className","computeControls","onClick","setIsRecording","icon","intent","size","toggleNetworkPaused","title","computeMetricsGrid","metricCell","metricLabel","metricValue","totalUsage","metricSubtext","fulfilledCount","lastMinuteUsage","averageUsagePerRequest","averageResponseBytes","requestCount","fulfilledWithoutUsageCount","length","bubbleChartContainer","fillHeight","onSelectRequest","id","operationsList","map","req","ComputeRequestItem","key","request","isSelected","has","emptyState","REQUEST_DISPLAY","class","computeFulfilled","computeFulfilledWithoutUsage","computeFailed","computePending","DEFAULT_REQUEST_DISPLAY","getUsageClass","usage","danger","warning","success","requestIcon","requestClass","type","operationItem","selectedItem","operationType","operationDetails","operationSignature","requestUrl","operationTime","Date","requestTimestamp","toLocaleTimeString","operationMetrics","operationMetric","computeUsage","responsePayloadBytes","error"],"sources":["ComputeTab.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@blueprintjs/core\";\nimport classNames from \"classnames\";\nimport React, { useMemo } from \"react\";\nimport {\n  useComputeMetrics,\n  useComputeNetworkPaused,\n  useComputeRecording,\n  useComputeRequests,\n} from \"../hooks/useComputeSelectors.js\";\nimport type { ComputeStore } from \"../store/ComputeStore.js\";\nimport type { ComputeRequest } from \"../types/compute.js\";\nimport { formatBytes, formatNumber } from \"../utils/format.js\";\nimport { BubbleChart } from \"./BubbleChart.js\";\nimport styles from \"./MonitoringPanel.module.scss\";\n\nexport interface ComputeTabProps {\n  computeStore: ComputeStore;\n}\n\nexport const ComputeTab: React.FC<ComputeTabProps> = ({ computeStore }) => {\n  const metrics = useComputeMetrics(computeStore);\n  const requests = useComputeRequests(computeStore);\n  const isRecording = useComputeRecording(computeStore);\n  const isNetworkPaused = useComputeNetworkPaused(computeStore);\n  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);\n\n  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);\n\n  const renderMetrics = () => (\n    <div className={styles.computeMetricsGrid}>\n      <div className={styles.metricCell}>\n        <span className={styles.metricLabel}>Total Usage</span>\n        <span className={styles.metricValue}>\n          {formatNumber(metrics.totalUsage)}\n        </span>\n        <span className={styles.metricSubtext}>\n          {metrics.fulfilledCount} requests\n        </span>\n      </div>\n\n      <div className={styles.metricCell}>\n        <span className={styles.metricLabel}>Last Minute</span>\n        <span className={styles.metricValue}>\n          {formatNumber(metrics.lastMinuteUsage)}\n        </span>\n        <span className={styles.metricSubtext}>compute units</span>\n      </div>\n\n      <div className={styles.metricCell}>\n        <span className={styles.metricLabel}>Avg per Request</span>\n        <span className={styles.metricValue}>\n          {formatNumber(metrics.averageUsagePerRequest)}\n        </span>\n        <span className={styles.metricSubtext}>compute units</span>\n      </div>\n\n      <div className={styles.metricCell}>\n        <span className={styles.metricLabel}>Avg Response Size</span>\n        <span className={styles.metricValue}>\n          {formatBytes(metrics.averageResponseBytes)}\n        </span>\n        <span className={styles.metricSubtext}>\n          {metrics.requestCount} total\n          {metrics.fulfilledWithoutUsageCount > 0 && (\n            <>\n              {\", \"}\n              {metrics.fulfilledWithoutUsageCount} without usage data\n            </>\n          )}\n        </span>\n      </div>\n    </div>\n  );\n\n  const recentRequests = useMemo(\n    () => requests.slice(-50).reverse(),\n    [requests],\n  );\n\n  return (\n    <>\n      <div className={styles.computeControls}>\n        {isRecording\n          ? (\n            <Button\n              onClick={() => computeStore.setIsRecording(false)}\n              icon=\"stop\"\n              intent=\"danger\"\n              size=\"small\"\n            >\n              Stop Recording\n            </Button>\n          )\n          : (\n            <Button\n              onClick={() => computeStore.setIsRecording(true)}\n              icon=\"record\"\n              intent=\"primary\"\n              size=\"small\"\n            >\n              Start Recording\n            </Button>\n          )}\n        <Button\n          onClick={() => computeStore.toggleNetworkPaused()}\n          icon={isNetworkPaused ? \"play\" : \"pause\"}\n          size=\"small\"\n          title=\"Block all OSDK network requests\"\n        >\n          {isNetworkPaused ? \"Resume\" : \"Pause\"} Network\n        </Button>\n      </div>\n\n      {renderMetrics()}\n\n      {requests.length > 0 && (\n        <div className={styles.bubbleChartContainer}>\n          <BubbleChart\n            computeStore={computeStore}\n            fillHeight={false}\n            selectedIds={selectedIds}\n            onSelectRequest={(id) => {\n              if (id) {\n                setSelectedIds([id]);\n              } else {\n                setSelectedIds([]);\n              }\n            }}\n          />\n        </div>\n      )}\n\n      <div className={styles.operationsList}>\n        {recentRequests.length > 0\n          ? recentRequests.map((req) => (\n            <ComputeRequestItem\n              key={req.id}\n              request={req}\n              isSelected={selectedIdSet.has(req.id)}\n            />\n          ))\n          : (\n            <div className={styles.emptyState}>\n              {isRecording\n                ? \"No compute requests yet\"\n                : \"Start recording to track compute usage\"}\n            </div>\n          )}\n      </div>\n    </>\n  );\n};\n\nconst REQUEST_DISPLAY: Record<string, { icon: string; class: string }> = {\n  \"fulfilled\": { icon: \"\\u2713\", class: styles.computeFulfilled },\n  \"fulfilled-without-usage\": {\n    icon: \"\\u00b7\",\n    class: styles.computeFulfilledWithoutUsage,\n  },\n  \"failed\": { icon: \"\\u00d7\", class: styles.computeFailed },\n  \"pending\": { icon: \"\\u22ef\", class: styles.computePending },\n};\n\nconst DEFAULT_REQUEST_DISPLAY = { icon: \"\\u2022\", class: \"\" };\n\ninterface ComputeRequestItemProps {\n  request: ComputeRequest;\n  isSelected: boolean;\n}\n\nfunction getUsageClass(usage: number): string {\n  if (usage > 1000) {\n    return styles.danger;\n  }\n  if (usage > 100) {\n    return styles.warning;\n  }\n  return styles.success;\n}\n\nconst ComputeRequestItem: React.FC<ComputeRequestItemProps> = ({\n  request,\n  isSelected,\n}) => {\n  const { icon: requestIcon, class: requestClass } =\n    REQUEST_DISPLAY[request.type] ?? DEFAULT_REQUEST_DISPLAY;\n\n  return (\n    <div\n      className={classNames(styles.operationItem, {\n        [styles.selectedItem]: isSelected,\n      })}\n    >\n      <span className={classNames(styles.operationType, requestClass)}>\n        {requestIcon}\n      </span>\n      <div className={styles.operationDetails}>\n        <div className={styles.operationSignature}>\n          {request.requestUrl}\n        </div>\n        <div className={styles.operationTime}>\n          {new Date(request.requestTimestamp).toLocaleTimeString()}\n        </div>\n        <div className={styles.operationMetrics}>\n          {request.type === \"fulfilled\" && (\n            <>\n              <span\n                className={classNames(\n                  styles.operationMetric,\n                  getUsageClass(request.computeUsage),\n                )}\n              >\n                {formatNumber(request.computeUsage)} CU\n              </span>\n              <span className={styles.operationMetric}>\n                {formatBytes(request.responsePayloadBytes)}\n              </span>\n            </>\n          )}\n          {request.type === \"fulfilled-without-usage\" && (\n            <>\n              <span className={styles.operationMetric}>\n                no usage data\n              </span>\n              <span className={styles.operationMetric}>\n                {formatBytes(request.responsePayloadBytes)}\n              </span>\n            </>\n          )}\n          {request.type === \"failed\" && (\n            <span className={classNames(styles.operationMetric, styles.danger)}>\n              {request.error.type}\n            </span>\n          )}\n          {request.type === \"pending\" && (\n            <span className={styles.operationMetric}>\n              Loading...\n            </span>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/CopyableCodeBlock.js

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button } from "@blueprintjs/core";
+import classNames from "classnames";
+import React, { useCallback, useRef, useState } from "react";
+import styles from "./CopyableCodeBlock.module.scss.js";
+export const CopyableCodeBlock = ({
+  children,
+  className
+}) => {
+  const [copied, setCopied] = useState(false);
+  const copyTimeoutRef = useRef(undefined);
+  const handleCopy = useCallback(async () => {
+    const text = typeof children === "string" ? children : String(children ?? "");
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      clearTimeout(copyTimeoutRef.current);
+      copyTimeoutRef.current = setTimeout(() => setCopied(false), 1500);
+    } catch {}
+  }, [children]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement("pre", {
+    className: classNames(styles.code, className)
+  }, children), /*#__PURE__*/React.createElement(Button, {
+    variant: "minimal",
+    size: "small",
+    icon: copied ? "tick" : "clipboard",
+    className: classNames(styles.copyButton, copied && styles.copied),
+    onClick: () => void handleCopy(),
+    "aria-label": "Copy to clipboard"
+  }));
+};
+//# sourceMappingURL=CopyableCodeBlock.js.map

package/build/esm/components/CopyableCodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableCodeBlock.js","names":["Button","classNames","React","useCallback","useRef","useState","styles","CopyableCodeBlock","children","className","copied","setCopied","copyTimeoutRef","undefined","handleCopy","text","String","navigator","clipboard","writeText","clearTimeout","current","setTimeout","createElement","container","code","variant","size","icon","copyButton","onClick"],"sources":["CopyableCodeBlock.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@blueprintjs/core\";\nimport classNames from \"classnames\";\nimport React, { useCallback, useRef, useState } from \"react\";\nimport styles from \"./CopyableCodeBlock.module.scss\";\n\ninterface CopyableCodeBlockProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const CopyableCodeBlock: React.FC<CopyableCodeBlockProps> = ({\n  children,\n  className,\n}) => {\n  const [copied, setCopied] = useState(false);\n  const copyTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  const handleCopy = useCallback(async () => {\n    const text = typeof children === \"string\"\n      ? children\n      : String(children ?? \"\");\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      clearTimeout(copyTimeoutRef.current);\n      copyTimeoutRef.current = setTimeout(() => setCopied(false), 1500);\n    } catch {\n    }\n  }, [children]);\n\n  return (\n    <div className={styles.container}>\n      <pre className={classNames(styles.code, className)}>{children}</pre>\n      <Button\n        variant=\"minimal\"\n        size=\"small\"\n        icon={copied ? \"tick\" : \"clipboard\"}\n        className={classNames(styles.copyButton, copied && styles.copied)}\n        onClick={() => void handleCopy()}\n        aria-label=\"Copy to clipboard\"\n      />\n    </div>\n  );\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC5D,OAAOC,MAAM,MAAM,iCAAiC;AAOpD,OAAO,MAAMC,iBAAmD,GAAGA,CAAC;EAClEC,QAAQ;EACRC;AACF,CAAC,KAAK;EACJ,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGN,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAMO,cAAc,GAAGR,MAAM,CAAgCS,SAAS,CAAC;EAEvE,MAAMC,UAAU,GAAGX,WAAW,CAAC,YAAY;IACzC,MAAMY,IAAI,GAAG,OAAOP,QAAQ,KAAK,QAAQ,GACrCA,QAAQ,GACRQ,MAAM,CAACR,QAAQ,IAAI,EAAE,CAAC;IAC1B,IAAI;MACF,MAAMS,SAAS,CAACC,SAAS,CAACC,SAAS,CAACJ,IAAI,CAAC;MACzCJ,SAAS,CAAC,IAAI,CAAC;MACfS,YAAY,CAACR,cAAc,CAACS,OAAO,CAAC;MACpCT,cAAc,CAACS,OAAO,GAAGC,UAAU,CAAC,MAAMX,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;IACnE,CAAC,CAAC,MAAM,CACR;EACF,CAAC,EAAE,CAACH,QAAQ,CAAC,CAAC;EAEd,oBACEN,KAAA,CAAAqB,aAAA;IAAKd,SAAS,EAAEH,MAAM,CAACkB;EAAU,gBAC/BtB,KAAA,CAAAqB,aAAA;IAAKd,SAAS,EAAER,UAAU,CAACK,MAAM,CAACmB,IAAI,EAAEhB,SAAS;EAAE,GAAED,QAAc,CAAC,eACpEN,KAAA,CAAAqB,aAAA,CAACvB,MAAM;IACL0B,OAAO,EAAC,SAAS;IACjBC,IAAI,EAAC,OAAO;IACZC,IAAI,EAAElB,MAAM,GAAG,MAAM,GAAG,WAAY;IACpCD,SAAS,EAAER,UAAU,CAACK,MAAM,CAACuB,UAAU,EAAEnB,MAAM,IAAIJ,MAAM,CAACI,MAAM,CAAE;IAClEoB,OAAO,EAAEA,CAAA,KAAM,KAAKhB,UAAU,CAAC,CAAE;IACjC,cAAW;EAAmB,CAC/B,CACE,CAAC;AAEV,CAAC","ignoreList":[]}

package/build/esm/components/CopyableCodeBlock.module.scss.js

@@ -0,0 +1,10 @@
+// AUTO-GENERATED by scripts/build-css.mjs. Do not edit by hand.
+const styles = {
+  "container": "CopyableCodeBlock-module__container___sqmTeXF-",
+  "copyButton": "CopyableCodeBlock-module__copyButton___L3vWF1Yx",
+  "code": "CopyableCodeBlock-module__code___Pn9fDhKT",
+  "copied": "CopyableCodeBlock-module__copied___TlrZLIlu",
+  "dt-shimmer": "CopyableCodeBlock-module__dt-shimmer___vnQsR71K",
+  "dt-fade-up": "CopyableCodeBlock-module__dt-fade-up___HbuWnBAS"
+};
+export default styles;

package/build/esm/components/DebuggingTab.js

@@ -0,0 +1,342 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Icon, InputGroup } from "@blueprintjs/core";
+import classNames from "classnames";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { createPollingStore } from "../hooks/createPollingStore.js";
+import { useActiveComponents } from "../hooks/useActiveComponents.js";
+import { useConsoleLogs } from "../hooks/useConsoleLogs.js";
+import { formatTime } from "../utils/format.js";
+import { CacheInspectorTab } from "./CacheInspectorTab.js";
+import { ComponentCard } from "./ComponentCard.js";
+import styles from "./DebuggingTab.module.scss.js";
+import { ImprovementsTab } from "./ImprovementsTab.js";
+import { IssueCard } from "./IssueCard.js";
+import { LogEntryCard } from "./LogEntryCard.js";
+import { resolveComponentName } from "./resolveComponentName.js";
+const SEVERITY_ORDER = {
+  error: 0,
+  warning: 1,
+  info: 2
+};
+function collectIssues(monitorStore, now) {
+  const issues = [];
+  for (const err of monitorStore.getMetricsStore().getActionErrors()) {
+    issues.push({
+      id: err.id,
+      severity: "error",
+      category: "action failure",
+      title: "Action failed",
+      message: err.message,
+      suggestion: err.validationErrors?.length ? "Fix validation errors before retrying" : undefined,
+      timestamp: err.timestamp,
+      expandable: {
+        stack: err.stack,
+        detailsJson: JSON.stringify({
+          actionType: err.actionType,
+          parameters: err.parameters
+        }, null, 2)
+      }
+    });
+  }
+  const windowErrors = monitorStore.getWindowErrorStore().getEntries();
+  // Bucketed at 100ms granularity. The lookup checks the current bucket plus
+  // the two adjacent buckets so that any console.error within ±100ms of a
+  // window error collides regardless of where the timestamps fall.
+  const windowErrorBuckets = new Set();
+  for (const we of windowErrors) {
+    const expandable = {};
+    if (we.stack) {
+      expandable.stack = we.stack;
+    }
+    if (we.filename || we.lineno || we.colno) {
+      expandable.detailsJson = JSON.stringify({
+        filename: we.filename,
+        lineno: we.lineno,
+        colno: we.colno
+      }, null, 2);
+    }
+    const hasExpandable = expandable.stack !== undefined || expandable.detailsJson !== undefined;
+    issues.push({
+      id: `windowError-${we.id}`,
+      severity: "error",
+      category: we.kind === "unhandledrejection" ? "unhandled rejection" : "uncaught error",
+      title: we.kind === "unhandledrejection" ? "Unhandled promise rejection" : "Uncaught error",
+      message: we.message,
+      timestamp: we.timestamp,
+      ...(hasExpandable ? {
+        expandable
+      } : {})
+    });
+    const bucket = Math.floor(we.timestamp / 100);
+    windowErrorBuckets.add(`${we.message}|${bucket}`);
+  }
+  for (const entry of monitorStore.getConsoleLogStore().getEntries()) {
+    if (entry.level !== "error") {
+      continue;
+    }
+    const messageText = entry.args.join(" ");
+    const bucket = Math.floor(entry.timestamp / 100);
+    if (windowErrorBuckets.has(`${messageText}|${bucket - 1}`) || windowErrorBuckets.has(`${messageText}|${bucket}`) || windowErrorBuckets.has(`${messageText}|${bucket + 1}`)) {
+      continue;
+    }
+    const issue = {
+      id: `console-${entry.id}`,
+      severity: "error",
+      category: "console error",
+      title: "console.error",
+      message: messageText,
+      timestamp: entry.timestamp
+    };
+    if (entry.source) {
+      issue.expandable = {
+        detailsJson: JSON.stringify({
+          source: entry.source
+        }, null, 2)
+      };
+    }
+    issues.push(issue);
+  }
+  for (const wr of monitorStore.getPropertyAccessTracker().getWastedRenders()) {
+    issues.push({
+      id: `wasted-${wr.componentId}-${wr.timestamp}`,
+      severity: "warning",
+      category: "wasted render",
+      title: `${wr.count} renders without property access`,
+      message: `${wr.componentName} renders but doesn't use the data`,
+      suggestion: "Check if this component needs this data subscription",
+      componentId: wr.componentId,
+      componentName: wr.componentName,
+      timestamp: wr.timestamp
+    });
+  }
+  for (const up of monitorStore.getPropertyAccessTracker().getUnusedProperties()) {
+    issues.push({
+      id: `unused-${up.componentId}-${up.propertyName}`,
+      severity: "info",
+      category: "unused field",
+      title: `"${up.propertyName}" loaded but never accessed`,
+      message: `${up.componentName} fetches this field but never reads it`,
+      suggestion: "Remove from query to reduce payload",
+      componentId: up.componentId,
+      componentName: up.componentName,
+      timestamp: now
+    });
+  }
+  issues.sort((a, b) => SEVERITY_ORDER[a.severity] - SEVERITY_ORDER[b.severity] || b.timestamp - a.timestamp);
+  return issues;
+}
+export const DebuggingTab = ({
+  monitorStore
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [cacheExpanded, setCacheExpanded] = useState(false);
+  const [consoleExpanded, setConsoleExpanded] = useState(true);
+  const [improvementsExpanded, setImprovementsExpanded] = useState(true);
+  const componentRefs = useRef(new Map());
+  const activeComponents = useActiveComponents(monitorStore);
+  const {
+    entries: consoleEntries,
+    count: consoleCount,
+    clear: clearConsole
+  } = useConsoleLogs(monitorStore);
+  const issueStore = React.useMemo(() => createPollingStore(() => collectIssues(monitorStore, Date.now()), 2000), [monitorStore]);
+  const issues = React.useSyncExternalStore(issueStore.subscribe, issueStore.getSnapshot) ?? [];
+  const cacheCountStore = React.useMemo(() => createPollingStore(async () => {
+    const entries = await monitorStore.loadCacheEntries();
+    return entries.length;
+  }, 5000), [monitorStore]);
+  const cacheCount = React.useSyncExternalStore(cacheCountStore.subscribe, cacheCountStore.getSnapshot) ?? 0;
+  const searchFilter = useCallback(issue => {
+    if (!searchQuery.trim()) {
+      return true;
+    }
+    const q = searchQuery.toLowerCase();
+    return issue.title.toLowerCase().includes(q) || issue.message.toLowerCase().includes(q) || (issue.componentName?.toLowerCase().includes(q) ?? false) || issue.category.toLowerCase().includes(q);
+  }, [searchQuery]);
+  const errorIssues = useMemo(() => issues.filter(i => i.severity === "error").filter(searchFilter), [issues, searchFilter]);
+  const filteredConsoleEntries = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return consoleEntries;
+    }
+    const q = searchQuery.toLowerCase();
+    return consoleEntries.filter(entry => entry.args.some(arg => arg.toLowerCase().includes(q)) || entry.level.includes(q) || (entry.source?.toLowerCase().includes(q) ?? false));
+  }, [consoleEntries, searchQuery]);
+  const issuesByComponent = useMemo(() => {
+    const map = new Map();
+    for (const issue of issues) {
+      if (issue.componentId) {
+        const existing = map.get(issue.componentId);
+        if (existing) {
+          existing.push(issue);
+        } else {
+          map.set(issue.componentId, [issue]);
+        }
+      }
+    }
+    return map;
+  }, [issues]);
+  const filteredComponents = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return activeComponents;
+    }
+    const q = searchQuery.toLowerCase();
+    const filtered = new Map();
+    for (const [componentId, bindings] of activeComponents) {
+      const displayName = resolveComponentName(bindings).toLowerCase();
+      if (displayName.includes(q) || componentId.includes(q)) {
+        filtered.set(componentId, bindings);
+      }
+    }
+    return filtered;
+  }, [activeComponents, searchQuery]);
+  const handleComponentClick = useCallback(componentId => {
+    const el = componentRefs.current.get(componentId);
+    if (el) {
+      el.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+      el.click();
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.debuggingTab
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.controls
+  }, /*#__PURE__*/React.createElement(InputGroup, {
+    leftIcon: "search",
+    placeholder: "Search issues and components...",
+    value: searchQuery,
+    onChange: e => setSearchQuery(e.target.value),
+    className: styles.searchInput,
+    fill: true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.feed
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.section
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.sectionHeader, styles.errorSectionHeader)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "error",
+    size: 14,
+    color: "var(--dt-red)"
+  }), /*#__PURE__*/React.createElement("span", null, "Errors"), /*#__PURE__*/React.createElement("span", {
+    className: styles.sectionCount
+  }, errorIssues.length)), errorIssues.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    className: styles.emptyState
+  }, "No errors") : errorIssues.map((issue, index) => /*#__PURE__*/React.createElement(IssueCard, {
+    key: issue.id,
+    issue: issue,
+    onComponentClick: handleComponentClick,
+    style: {
+      "--entrance-index": index
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.section
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.sectionHeaderButton,
+    onClick: () => setConsoleExpanded(!consoleExpanded)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "console",
+    size: 14,
+    color: "var(--dt-text-tertiary)"
+  }), /*#__PURE__*/React.createElement("span", null, "Console"), /*#__PURE__*/React.createElement("span", {
+    className: styles.sectionCount
+  }, consoleCount), consoleCount > 0 && /*#__PURE__*/React.createElement("span", {
+    className: styles.sectionCount,
+    role: "button",
+    tabIndex: 0,
+    onClick: e => {
+      e.stopPropagation();
+      clearConsole();
+    },
+    onKeyDown: e => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.stopPropagation();
+        e.preventDefault();
+        clearConsole();
+      }
+    }
+  }, "clear"), /*#__PURE__*/React.createElement(Icon, {
+    icon: consoleExpanded ? "chevron-down" : "chevron-right",
+    size: 14,
+    className: styles.sectionChevron
+  })), consoleExpanded && (filteredConsoleEntries.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    className: styles.emptyState
+  }, "No console output captured") : filteredConsoleEntries.slice(-100).map((entry, index) => /*#__PURE__*/React.createElement(LogEntryCard, {
+    key: entry.id,
+    entry: entry,
+    style: {
+      "--entrance-index": index
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: styles.section
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.sectionHeader
+  }, /*#__PURE__*/React.createElement("span", null, "Components"), /*#__PURE__*/React.createElement("span", {
+    className: styles.sectionCount
+  }, filteredComponents.size)), filteredComponents.size === 0 && /*#__PURE__*/React.createElement("div", {
+    className: styles.emptyState
+  }, searchQuery ? "No components match your search" : "No active components found"), Array.from(filteredComponents).map(([componentId, bindings], index) => /*#__PURE__*/React.createElement("div", {
+    key: componentId,
+    ref: el => {
+      if (el) {
+        componentRefs.current.set(componentId, el);
+      } else {
+        componentRefs.current.delete(componentId);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(ComponentCard, {
+    componentId: componentId,
+    bindings: bindings,
+    formatTime: formatTime,
+    monitorStore: monitorStore,
+    issues: issuesByComponent.get(componentId),
+    style: {
+      "--entrance-index": index
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: styles.section
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.sectionHeaderButton,
+    onClick: () => setImprovementsExpanded(!improvementsExpanded)
+  }, /*#__PURE__*/React.createElement("span", null, "Improvements"), /*#__PURE__*/React.createElement(Icon, {
+    icon: improvementsExpanded ? "chevron-down" : "chevron-right",
+    size: 14,
+    className: styles.sectionChevron
+  })), improvementsExpanded && /*#__PURE__*/React.createElement(ImprovementsTab, {
+    monitorStore: monitorStore
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.section
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.sectionHeaderButton,
+    onClick: () => setCacheExpanded(!cacheExpanded)
+  }, /*#__PURE__*/React.createElement("span", null, "Cache"), /*#__PURE__*/React.createElement("span", {
+    className: styles.sectionCount
+  }, cacheCount, " entries"), /*#__PURE__*/React.createElement(Icon, {
+    icon: cacheExpanded ? "chevron-down" : "chevron-right",
+    size: 14,
+    className: styles.sectionChevron
+  })), cacheExpanded && /*#__PURE__*/React.createElement(CacheInspectorTab, {
+    monitorStore: monitorStore
+  }))));
+};
+//# sourceMappingURL=DebuggingTab.js.map