@flanksource/clicky-ui 0.3.10 → 0.3.11

package/dist/components.js

@@ -1,8 +1,9 @@
 import { Button } from "./components/button.js";
-import { Loading, LoadingDots } from "./components/loading.js";
+import { Loading, LoadingBar, LoadingDots } from "./components/loading.js";
 import { buttonVariants } from "./components/button-variants.js";
 import { IconButton } from "./components/IconButton.js";
 import { SplitButton } from "./components/SplitButton.js";
+import { InputField } from "./components/InputField.js";
 import { SegmentedControl } from "./components/SegmentedControl.js";
 import { SearchInput } from "./components/SearchInput.js";
 import { Switch } from "./components/Switch.js";
@@ -13,7 +14,7 @@ import { DatePicker } from "./components/DatePicker.js";
 import { DateTimePicker } from "./components/DateTimePicker.js";
 import { TimeRange } from "./components/TimeRange.js";
 import { RangeSlider } from "./components/RangeSlider.js";
-import { FilterBar, TriStateMultiSelect } from "./components/FilterBar.js";
+import { FilterBar } from "./components/FilterBar.js";
 import { applyFilterExtensions } from "./components/filter-bar-utils.js";
 import { MultiSelect } from "./components/MultiSelect.js";
 import { Select } from "./components/select.js";
@@ -25,6 +26,7 @@ import { WorkloadPicker } from "./components/WorkloadPicker.js";
 import { NamespacePicker } from "./components/NamespacePicker.js";
 import { kindForValue, loadedWorkloads, parseWorkloadKey, workloadKey } from "./components/workload-picker-utils.js";
 import { SecretKeySelector } from "./components/SecretKeySelector.js";
+import { parseSecretRef, serializeSecretRef } from "./components/SecretKeySelector.model.js";
 import { ThemeSwitcher } from "./components/theme-switcher.js";
 import { DensitySwitcher } from "./components/density-switcher.js";
 import { IconMenuPicker } from "./components/icon-menu-picker.js";
@@ -39,23 +41,28 @@ import { effectiveProperties, isOpenStringMap, matchesIf, resolveControl } from
 import { rehydrateRefs } from "./components/json-schema-form-refs.js";
 import { templateValuePre } from "./components/json-schema-form-template.js";
 import { SplitPane } from "./layout/SplitPane.js";
+import { Workspace } from "./layout/Workspace.js";
 import { AppShell } from "./layout/AppShell.js";
 import { AppLayout, AppSidebar } from "./layout/AppSidebar.js";
 import { Panel } from "./layout/Panel.js";
 import { Tabs } from "./layout/Tabs.js";
 import { DetailEmptyState, Section } from "./layout/Section.js";
 import { DropdownMenu } from "./overlay/DropdownMenu.js";
+import { CellActionButton, CellActions } from "./overlay/CellActions.js";
 import { HoverCard } from "./overlay/HoverCard.js";
 import { Modal } from "./overlay/Modal.js";
 import { useModalStack } from "./overlay/modalStack.js";
 import { ToastProvider } from "./overlay/Toast.js";
 import { useToast } from "./overlay/toast-context.js";
+import { TriStateMultiSelect } from "./components/filter-bar-multi.js";
 export {
   AppLayout,
   AppShell,
   AppSidebar,
   Button,
   CLICKY_FORMAT_OPTIONS,
+  CellActionButton,
+  CellActions,
   Combobox,
   DEFAULT_FORM_SIZE,
   DEFAULT_PREFERENCES_STORAGE_KEY,
@@ -72,6 +79,7 @@ export {
   HoverCard,
   IconButton,
   IconMenuPicker,
+  InputField,
   JsonSchemaForm,
   ListMenu,
   ListMenuActionBar,
@@ -79,6 +87,7 @@ export {
   ListMenuItem,
   ListMenuSection,
   Loading,
+  LoadingBar,
   LoadingDots,
   Modal,
   MultiSelect,
@@ -100,6 +109,7 @@ export {
   TreePickerField,
   TriStateMultiSelect,
   WorkloadPicker,
+  Workspace,
   applyFilterExtensions,
   buttonVariants,
   effectiveProperties,
@@ -107,11 +117,13 @@ export {
   kindForValue,
   loadedWorkloads,
   matchesIf,
+  parseSecretRef,
   parseWorkloadKey,
   readPreferences,
   rehydrateRefs,
   resolveControl,
   resolveLookupScope,
+  serializeSecretRef,
   templateValuePre,
   useForm,
   useListMenuSelection,

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/data/Clicky.cjs

@@ -15,6 +15,7 @@ const ObjectGraph = require("./ObjectGraph.cjs");
 const ExecutionTree = require("./ExecutionTree.cjs");
 const Icon = require("./Icon.cjs");
 const CodeBlock = require("./CodeBlock.cjs");
+const JsonView = require("./JsonView.cjs");
 const htmlUtils = require("./html-utils.cjs");
 const RenderedStackTrace = require("./diagnostics/RenderedStackTrace.cjs");
 const Badge = require("./Badge.cjs");
@@ -88,6 +89,7 @@ function Clicky(props) {
       ...props.timeRange ? { tableTimeRange: props.timeRange } : {},
       ...props.externalFilters ? { tableExternalFilters: props.externalFilters } : {},
       ...props.pagination ? { tablePagination: props.pagination } : {},
+      ...props.rowSelection ? { tableRowSelection: props.rowSelection } : {},
       ...tableMenuActions.length > 0 ? { tableMenuActions } : {},
       children: props.url ? /* @__PURE__ */ jsxRuntime.jsx(ClickyRemoteRenderer, { ...props, url: props.url }) : /* @__PURE__ */ jsxRuntime.jsx(
         ClickyContent,
@@ -112,11 +114,12 @@ function ClickyRuntimeProvider({
   tableTimeRange,
   tableExternalFilters,
   tablePagination,
+  tableRowSelection,
   tableMenuActions,
   children
 }) {
   if (!commandRuntime) {
-    const hasOverrides = onTableRowClick || getTableRowHref || isTableRowClickable || tableSearch || tableTimeRange || tableExternalFilters || tablePagination || tableMenuActions;
+    const hasOverrides = onTableRowClick || getTableRowHref || isTableRowClickable || tableSearch || tableTimeRange || tableExternalFilters || tablePagination || tableRowSelection || tableMenuActions;
     return /* @__PURE__ */ jsxRuntime.jsx(
       ClickyRuntimeContext.Provider,
       {
@@ -129,6 +132,7 @@ function ClickyRuntimeProvider({
           tableTimeRange,
           tableExternalFilters,
           tablePagination,
+          tableRowSelection,
           tableMenuActions
         } : clickyRuntimeContextDefault,
         children
@@ -146,6 +150,7 @@ function ClickyRuntimeProvider({
       ...tableTimeRange ? { tableTimeRange } : {},
       ...tableExternalFilters ? { tableExternalFilters } : {},
       ...tablePagination ? { tablePagination } : {},
+      ...tableRowSelection ? { tableRowSelection } : {},
       ...tableMenuActions ? { tableMenuActions } : {},
       children
     }
@@ -160,6 +165,7 @@ function ClickyCommandRuntimeProvider({
   tableTimeRange,
   tableExternalFilters,
   tablePagination,
+  tableRowSelection,
   tableMenuActions,
   children
 }) {
@@ -174,6 +180,7 @@ function ClickyCommandRuntimeProvider({
       tableTimeRange,
       tableExternalFilters,
       tablePagination,
+      tableRowSelection,
       tableMenuActions,
       operations,
       operationsLoading: isLoading
@@ -189,6 +196,7 @@ function ClickyCommandRuntimeProvider({
       tableTimeRange,
       tableExternalFilters,
       tablePagination,
+      tableRowSelection,
       tableMenuActions
     ]
   );
@@ -320,7 +328,7 @@ function ClickyRemoteRenderer({
           {
             url,
             formats: downloadFormats,
-            label: download == null ? void 0 : download.label
+            download
           }
         )
       ] })
@@ -352,7 +360,13 @@ function ClickyRemoteRenderer({
         ClickyRuntimeContext.Provider,
         {
           value: { ...runtime, tableMenuActions: combinedTableActions },
-          children: /* @__PURE__ */ jsxRuntime.jsx(ClickyContent, { data: effectiveClickyData })
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            ClickyContent,
+            {
+              data: effectiveClickyData,
+              className: "flex min-h-0 flex-1 flex-col"
+            }
+          )
         }
       )
     ] }) : activeView === "json" ? activeQuery.isPending && effectiveJsonData === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ClickyNotice, { title: "Loading JSON", message: loadingMessage }) : activeQuery.isError && effectiveJsonData === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -385,7 +399,13 @@ function ClickyRemoteRenderer({
         message: activeQuery.error instanceof Error ? activeQuery.error.message : "Request failed",
         tone: "destructive"
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(ClickyRemotePreview, { format: activeView, response: activeQuery.data })
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      ClickyRemotePreview,
+      {
+        format: activeView,
+        response: activeQuery.data
+      }
+    )
   ] });
 }
 function ClickyViewMenu({
@@ -474,13 +494,15 @@ function ClickyViewMenu({
 function ClickyDownloadMenu({
   url,
   formats,
-  label
+  download
 }) {
   const rootRef = react.useRef(null);
   const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
-  const primaryFormat = "json";
+  const primaryFormat = formats.includes("json") ? "json" : formats[0];
   const primaryMeta = getRemoteFormatMeta(primaryFormat);
+  const scopes = getDownloadScopes(download);
+  const primaryScope = scopes[0];
   useDismissablePopup(open, rootRef, triggerRef, () => setOpen(false));
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
@@ -488,9 +510,16 @@ function ClickyDownloadMenu({
         "button",
         {
           type: "button",
-          "aria-label": label ? `Download ${primaryMeta.label} ${label}` : `Download ${primaryMeta.label}`,
+          "aria-label": (download == null ? void 0 : download.label) ? `Download ${primaryMeta.label} ${download.label}` : `Download ${primaryMeta.label}`,
           className: "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          onClick: () => triggerDownload(buildDownloadUrl(url, primaryFormat, label)),
+          onClick: () => triggerDownload(
+            buildDownloadUrl(
+              url,
+              primaryFormat,
+              download == null ? void 0 : download.label,
+              primaryScope
+            )
+          ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCloudDownload.UiCloudDownload, className: "text-sm" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: `Download ${primaryMeta.label}` })
@@ -516,37 +545,57 @@ function ClickyDownloadMenu({
       {
         role: "menu",
         className: "absolute right-0 top-[calc(100%+0.375rem)] z-50 min-w-[18rem] rounded-md border border-border bg-popover p-1.5 text-popover-foreground shadow-lg shadow-black/5",
-        children: formats.map((format) => {
-          const meta = getRemoteFormatMeta(format);
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              role: "menuitem",
-              className: utils.cn(
-                "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none"
-              ),
-              onClick: () => {
-                triggerDownload(buildDownloadUrl(url, format, label));
-                setOpen(false);
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Icon.Icon,
+        children: scopes.map((scope, scopeIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              scopeIndex > 0 && "mt-1 border-t border-border pt-1"
+            ),
+            children: [
+              scope && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: downloadSection(scope) }),
+              formats.map((format) => {
+                const meta = getRemoteFormatMeta(format);
+                const description = downloadDescription(
+                  format,
+                  scope,
+                  download
+                );
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
                   {
-                    icon: meta.icon,
-                    className: utils.cn(
-                      "shrink-0 text-sm",
-                      meta.iconClassName ?? "text-muted-foreground"
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: meta.label }) })
-              ]
-            },
-            format
-          );
-        })
+                    type: "button",
+                    role: "menuitem",
+                    className: "flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+                    onClick: () => {
+                      triggerDownload(
+                        buildDownloadUrl(url, format, download == null ? void 0 : download.label, scope)
+                      );
+                      setOpen(false);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Icon.Icon,
+                        {
+                          icon: meta.icon,
+                          className: utils.cn(
+                            "mt-0.5 shrink-0 text-sm",
+                            meta.iconClassName ?? "text-muted-foreground"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: meta.label }),
+                        description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-muted-foreground", children: description })
+                      ] })
+                    ]
+                  },
+                  `${scope ?? "legacy"}-${format}`
+                );
+              })
+            ]
+          },
+          scope ?? "legacy"
+        ))
       }
     )
   ] });
@@ -840,11 +889,33 @@ function getDownloadFormats({
   url,
   download
 }) {
+  var _a;
   const enabled = download ? download.all ?? true : !!url;
   if (!enabled || !url) {
     return [];
   }
-  return [...CLICKY_DOWNLOAD_FORMATS];
+  return ((_a = download == null ? void 0 : download.formats) == null ? void 0 : _a.length) ? [...download.formats] : [...CLICKY_DOWNLOAD_FORMATS];
+}
+function getDownloadScopes(download) {
+  var _a;
+  return ((_a = download == null ? void 0 : download.scopes) == null ? void 0 : _a.length) ? download.scopes : [void 0];
+}
+function downloadSection(scope) {
+  return scope === "all" ? "Download all rows" : "Download current page";
+}
+function downloadDescription(format, scope, download) {
+  var _a;
+  const maxRows = (_a = download == null ? void 0 : download.formatMaxRows) == null ? void 0 : _a[format];
+  if (maxRows) {
+    return `Limited to ${maxRows.toLocaleString()} rows`;
+  }
+  if (scope === "all" && (download == null ? void 0 : download.allRowsMode) === "buffered") {
+    return "Compatibility mode buffers the complete result";
+  }
+  if (scope === "all" && (download == null ? void 0 : download.allRowsMode) === "streaming") {
+    return "Streams rows as they are read";
+  }
+  return void 0;
 }
 function getDownloadMenuActions({
   url,
@@ -852,16 +923,22 @@ function getDownloadMenuActions({
 }) {
   const formats = getDownloadFormats({ url, download });
   if (!url || formats.length === 0) return [];
-  return formats.map((format) => {
-    const meta = getRemoteFormatMeta(format);
-    return {
-      id: `download-${format}`,
-      label: meta.label,
-      icon: meta.icon,
-      ...meta.iconClassName ? { iconClassName: meta.iconClassName } : {},
-      onSelect: () => triggerDownload(buildDownloadUrl(url, format, download == null ? void 0 : download.label))
-    };
-  });
+  return getDownloadScopes(download).flatMap(
+    (scope) => formats.map((format) => {
+      const meta = getRemoteFormatMeta(format);
+      return {
+        id: `download-${scope ?? "legacy"}-${format}`,
+        label: meta.label,
+        description: downloadDescription(format, scope, download),
+        icon: meta.icon,
+        ...meta.iconClassName ? { iconClassName: meta.iconClassName } : {},
+        ...scope ? { section: downloadSection(scope) } : {},
+        onSelect: () => triggerDownload(
+          buildDownloadUrl(url, format, download == null ? void 0 : download.label, scope)
+        )
+      };
+    })
+  );
 }
 function getRemoteFormatMeta(format) {
   switch (format) {
@@ -879,6 +956,13 @@ function getRemoteFormatMeta(format) {
         icon: UiJson.UiJson,
         accept: "application/json, text/plain;q=0.8,*/*;q=0.7"
       };
+    case "ndjson":
+      return {
+        label: "NDJSON",
+        description: "Newline-delimited JSON for streaming data pipelines",
+        icon: UiJson.UiJson,
+        accept: "application/x-ndjson, application/ndjson;q=0.9,*/*;q=0.7"
+      };
     case "pdf":
       return {
         label: "PDF",
@@ -955,12 +1039,20 @@ function buildFormatUrl(url, format) {
   }
   return `${resolved.pathname}${resolved.search}${resolved.hash}`;
 }
-function buildDownloadUrl(url, format, label) {
+function buildDownloadUrl(url, format, label, scope) {
   const formatted = buildFormatUrl(url, format);
   const base = typeof window === "undefined" ? "http://localhost" : window.location.origin;
   const resolved = new URL(formatted, base);
   resolved.searchParams.set("filename", downloadFilename(url, format, label));
   resolved.searchParams.set("_download", Date.now().toString());
+  if (scope) {
+    resolved.searchParams.set("scope", scope);
+  }
+  if (scope === "all") {
+    resolved.searchParams.delete("limit");
+    resolved.searchParams.delete("offset");
+    resolved.searchParams.delete("page");
+  }
   if (isAbsoluteUrl(formatted)) {
     return resolved.toString();
   }
@@ -988,6 +1080,8 @@ function downloadExtension(format) {
       return ".clicky.json";
     case "json":
       return ".json";
+    case "ndjson":
+      return ".ndjson";
     case "pdf":
       return ".pdf";
     case "html":
@@ -1877,6 +1971,7 @@ function ClickyList({ node }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: utils.cn("ml-5 space-y-1 text-sm", listClass), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: item }) }, index)) });
 }
 function ClickyMap({ node }) {
+  var _a;
   const runtime = react.useContext(ClickyRuntimeContext);
   const fields = (node.fields ?? []).filter(
     (field) => !(runtime.tablePagination && isPaginationMetadataField(field))
@@ -1884,6 +1979,10 @@ function ClickyMap({ node }) {
   if (fields.length === 0) return null;
   const inlineFields = fields.filter((field) => isInlineNode(field.value));
   const blockFields = fields.filter((field) => !isInlineNode(field.value));
+  const unwrapsSingleTable = inlineFields.length === 0 && blockFields.length === 1 && ((_a = blockFields[0]) == null ? void 0 : _a.value.kind) === "table";
+  if (unwrapsSingleTable) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: blockFields[0].value });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-density-4", children: [
     inlineFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid gap-density-3 md:grid-cols-2", children: inlineFields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: field.label || prettifyName(field.name) }),
@@ -1924,6 +2023,7 @@ function ClickyTable({
   timeRange,
   externalFilters,
   pagination,
+  rowSelection,
   menuActions
 }) {
   const runtime = react.useContext(ClickyRuntimeContext);
@@ -1934,6 +2034,7 @@ function ClickyTable({
   const effectiveTimeRange = timeRange ?? runtime.tableTimeRange;
   const effectiveExternalFilters = externalFilters ?? runtime.tableExternalFilters;
   const effectivePagination = pagination ?? runtime.tablePagination;
+  const effectiveRowSelection = rowSelection ?? runtime.tableRowSelection;
   const effectiveMenuActions = menuActions ?? runtime.tableMenuActions;
   if (columns.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "No data" });
@@ -1943,6 +2044,8 @@ function ClickyTable({
   }
   const tableColumns = columns.map((column) => {
     const tagColumn = isClickyTagColumn(column);
+    const keyValueColumn = isClickyKeyValueColumn(column);
+    const jsonColumn = column.type === "json";
     const base = {
       key: `cells.${column.name}`,
       label: column.header ? /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: column.header }) : column.label || prettifyName(column.name),
@@ -1952,6 +2055,23 @@ function ClickyTable({
       ...column.grow !== void 0 ? { grow: column.grow } : {},
       ...column.shrink !== void 0 ? { shrink: column.shrink } : {}
     };
+    if (keyValueColumn) {
+      return {
+        ...base,
+        kind: "tags",
+        render: (value) => /* @__PURE__ */ jsxRuntime.jsx(ClickyKeyValueCell, { node: value }),
+        sortValue: (value) => clickyKeyValueText(value),
+        filterValue: (value) => clickyKeyValueTokens(value)
+      };
+    }
+    if (jsonColumn) {
+      return {
+        ...base,
+        render: (value) => /* @__PURE__ */ jsxRuntime.jsx(ClickyJSONCell, { node: value }),
+        sortValue: (value) => clickyJSONText(value),
+        filterValue: (value) => clickyJSONText(value)
+      };
+    }
     if (tagColumn) {
       return {
         ...base,
@@ -1976,6 +2096,7 @@ function ClickyTable({
   return /* @__PURE__ */ jsxRuntime.jsx(
     DataTable.DataTable,
     {
+      className: "min-h-0 flex-1",
       data: rows,
       columns: tableColumns,
       ...autoFilter !== void 0 ? { autoFilter } : {},
@@ -1985,7 +2106,8 @@ function ClickyTable({
           dir: "asc"
         }
       } : {},
-      getRowId: (row, index) => `${index}-${columns.map((column) => clickyNodeText(row.cells[column.name])).filter(Boolean).join("|")}`,
+      getRowId: (row, index) => (effectiveRowSelection == null ? void 0 : effectiveRowSelection.getRowId(row, index)) ?? `${index}-${columns.map((column) => clickyNodeText(row.cells[column.name])).filter(Boolean).join("|")}`,
+      ...effectiveRowSelection ? { rowSelection: effectiveRowSelection } : {},
       ...rowClick ? { onRowClick: rowClick } : {},
       ...rowHref ? { getRowHref: rowHref } : {},
       ...rowClick && (rowClickable || rowHref) ? {
@@ -2021,6 +2143,11 @@ function ClickyCollapsedStructRows({
 }
 function shouldRenderRowsAsCollapsedStructs(columns, rows) {
   if (rows.length === 0) return false;
+  if (columns.some(
+    (column) => isClickyKeyValueColumn(column) || column.type === "json"
+  )) {
+    return false;
+  }
   return rows.every((row) => {
     const cells = columns.map((column) => row.cells[column.name]).filter(Boolean);
     if (cells.length === 0) return false;
@@ -2033,6 +2160,129 @@ function isClickyTagColumn(column) {
   const normalized = column.name.toLowerCase();
   return /(^|[._-])(tags?|labels?|annotations?)$/.test(normalized);
 }
+function isClickyKeyValueColumn(column) {
+  return column.type === "key_value" || column.type === "key_values";
+}
+function ClickyKeyValueCell({ node }) {
+  const pairs = clickyNodeKeyValues(node);
+  if (pairs.length === 0) {
+    const fallback = clickyNodeText(node).trim();
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: fallback }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "—" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid grid-cols-[max-content_minmax(0,1fr)] gap-x-2 gap-y-1 text-xs", children: pairs.map((pair, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-medium text-muted-foreground", children: pair.key }),
+    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "min-w-0 break-words text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: pair.value }) })
+  ] }, `${pair.key}-${index}`)) });
+}
+function ClickyJSONCell({ node }) {
+  const value = clickyNodeJSONValue(node);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "max-h-40 min-w-40 max-w-xl overflow-auto text-xs",
+      onClick: (event) => event.stopPropagation(),
+      children: /* @__PURE__ */ jsxRuntime.jsx(JsonView.JsonView, { data: value, defaultOpenDepth: 0 })
+    }
+  );
+}
+function clickyNodeKeyValues(node) {
+  if (!node) return [];
+  if (node.kind === "map") return clickyFieldsToKeyValues(node.fields ?? []);
+  if (node.kind === "list") {
+    return (node.items ?? []).flatMap((item) => clickyNodeKeyValues(item));
+  }
+  const source = node.kind === "code" ? node.source : node.text ?? node.plain;
+  if (!source) return [];
+  try {
+    return unknownToKeyValues(JSON.parse(source));
+  } catch {
+    return [];
+  }
+}
+function clickyFieldsToKeyValues(fields) {
+  const keyField = fields.find((field) => /^(key|name)$/i.test(field.name));
+  const valueField = fields.find((field) => /^value$/i.test(field.name));
+  if (keyField && valueField) {
+    const key = clickyNodeText(keyField.value).trim();
+    if (key) return [{ key, value: valueField.value }];
+  }
+  return fields.map((field) => ({
+    key: field.label || field.name,
+    value: field.value
+  }));
+}
+function unknownToKeyValues(value) {
+  if (Array.isArray(value)) return value.flatMap(unknownToKeyValues);
+  if (!value || typeof value !== "object") return [];
+  const object = value;
+  const keyName = Object.keys(object).find((key) => /^(key|name)$/i.test(key));
+  const valueName = Object.keys(object).find((key) => /^value$/i.test(key));
+  if (keyName && valueName && typeof object[keyName] === "string") {
+    return [
+      {
+        key: object[keyName],
+        value: unknownToClickyNode(object[valueName])
+      }
+    ];
+  }
+  return Object.keys(object).sort((left, right) => left.localeCompare(right)).map((key) => ({ key, value: unknownToClickyNode(object[key]) }));
+}
+function unknownToClickyNode(value) {
+  if (Array.isArray(value)) {
+    return {
+      kind: "list",
+      plain: JSON.stringify(value),
+      items: value.map(unknownToClickyNode)
+    };
+  }
+  if (value && typeof value === "object") {
+    const object = value;
+    return {
+      kind: "map",
+      plain: JSON.stringify(value),
+      fields: Object.keys(object).sort((left, right) => left.localeCompare(right)).map((key) => ({ name: key, value: unknownToClickyNode(object[key]) }))
+    };
+  }
+  const text = value === null ? "null" : String(value ?? "");
+  return { kind: "text", text, plain: text };
+}
+function clickyKeyValueTokens(node) {
+  return clickyNodeKeyValues(node).map((pair) => `${pair.key}=${clickyNodeCanonicalText(pair.value)}`).filter((token) => !token.endsWith("="));
+}
+function clickyKeyValueText(node) {
+  return clickyKeyValueTokens(node).join(", ");
+}
+function clickyNodeCanonicalText(node) {
+  const text = clickyNodeText(node).trim();
+  if (text) return text;
+  const value = clickyNodeJSONValue(node);
+  return value === void 0 ? "" : JSON.stringify(value);
+}
+function clickyNodeJSONValue(node) {
+  if (!node) return void 0;
+  if (node.kind === "map") {
+    return Object.fromEntries(
+      (node.fields ?? []).map((field) => [
+        field.name,
+        clickyNodeJSONValue(field.value)
+      ])
+    );
+  }
+  if (node.kind === "list") {
+    return (node.items ?? []).map(clickyNodeJSONValue);
+  }
+  const source = node.kind === "code" ? node.source ?? node.plain : node.text ?? node.plain;
+  if (source === void 0) return clickyNodeText(node);
+  try {
+    return JSON.parse(source);
+  } catch {
+    return source;
+  }
+}
+function clickyJSONText(node) {
+  const value = clickyNodeJSONValue(node);
+  return value === void 0 ? "" : JSON.stringify(value);
+}
 function clickyNodeTags(node, column) {
   if (!isClickyTagColumn(column)) return [];
   const value = clickyNodeTagsValue(node);