@flanksource/clicky-ui 0.3.1 → 0.3.3

package/dist/index.js

@@ -33,12 +33,14 @@ import { Field } from "./components/Field.js";
 import { useForm } from "./components/use-form.js";
 import { TreePickerField } from "./components/TreePickerField.js";
 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 { ThemeSwitcher } from "./components/theme-switcher.js";
 import { DensitySwitcher } from "./components/density-switcher.js";
 import { IconMenuPicker } from "./components/icon-menu-picker.js";
 import { JsonSchemaForm } from "./components/JsonSchemaForm.js";
+import { FormLookupProvider, resolveLookupScope, useLookupFetcher } from "./components/form-lookup-context.js";
 import { DEFAULT_FORM_SIZE } from "./components/json-schema-form-size.js";
 import { DEFAULT_PREFERENCES_STORAGE_KEY, readPreferences, writePreferences } from "./components/json-schema-form-preferences.js";
 import { effectiveProperties, isOpenStringMap, matchesIf, resolveControl } from "./components/json-schema-form-resolve.js";
@@ -77,6 +79,8 @@ import { Icon, LabelIcon } from "./data/Icon.js";
 import { setFallbackIconProvider } from "./data/icon-fallback.js";
 import { JsonView } from "./data/JsonView.js";
 import { KeyValueList } from "./data/KeyValueList.js";
+import { SchemaFieldMetaPanel, SchemaViewer, SchemaViewerRow } from "./data/SchemaViewer.js";
+import { buildSchemaTree, buildSchemaViewerTree, buildStepBranchTree, hasHoverMeta } from "./data/schema-viewer-model.js";
 import { Properties } from "./data/Properties.js";
 import { formatPropertyLabel } from "./data/properties-utils.js";
 import { LogViewer } from "./data/LogViewer.js";
@@ -84,6 +88,8 @@ import { LogsTable } from "./data/LogsTable.js";
 import { normalizeLogsTableRows } from "./data/logs-normalize.js";
 import { MatrixTable } from "./data/MatrixTable.js";
 import { Markdown } from "./data/Markdown.js";
+import { MarkdownEditor } from "./data/MarkdownEditor.js";
+import { MARKDOWN_EDITOR_PREVIEW_FORMATS, buildMarkdownPreviewUrl, clickyFormatForMarkdownPreview } from "./data/MarkdownEditor.model.js";
 import { MethodBadge } from "./data/MethodBadge.js";
 import { ProgressBar } from "./data/ProgressBar.js";
 import { SignedDeltaBar } from "./data/SignedDeltaBar.js";
@@ -94,6 +100,8 @@ import { mergeSeries, resolveBreakdown, resolveSeries } from "./data/TimeseriesP
 import { assignAxes, latestOf } from "./data/TimeseriesPanel.axes.js";
 import { TimeseriesGauge } from "./data/TimeseriesGauge.js";
 import { TimeseriesCoreBars } from "./data/TimeseriesCoreBars.js";
+import { GaugeHoverCard } from "./data/GaugeHoverCard.js";
+import { seriesStats } from "./data/gauge-stats.js";
 import { WorkloadCard } from "./data/WorkloadCard.js";
 import { formatReplicaCounts, workloadKindLabel, workloadStatusLabel, workloadStatusTone } from "./data/WorkloadCard.model.js";
 import { deriveCoreBars } from "./data/TimeseriesCoreBars.model.js";
@@ -102,6 +110,8 @@ import { segment } from "./data/status-breakdown-utils.js";
 import { Version } from "./data/Version.js";
 import { getVersionInfo } from "./data/version-info.js";
 import { Tree } from "./data/Tree.js";
+import { ObjectGraph } from "./data/ObjectGraph.js";
+import { ExecutionTree } from "./data/ExecutionTree.js";
 import { TreeNode } from "./data/TreeNode.js";
 import { TreeGroupHeader } from "./data/TreeGroupHeader.js";
 import { Timeline } from "./data/Timeline.js";
@@ -122,11 +132,26 @@ import { parseJavaStackTrace } from "./data/diagnostics/stacktrace-parse.js";
 import { CopyBadge, ErrorDetails, PrettyStackTrace } from "./data/diagnostics/ErrorDetails.js";
 import { compactStackPath, isApplicationStackFrame, normalizeErrorDiagnostics, parseDiagnosticsStackTrace, parseInlineJsonContextValue } from "./data/diagnostics/error-diagnostics.js";
 import { HarPanel } from "./data/har/HarPanel.js";
+import { DEFAULT_CHECKLIST_CYCLE, DEFAULT_COMMENT_STATUSES, DOCUMENT_ANCHOR } from "./comments/comment-types.js";
+import { applyCommentFilters, authorDisplayName, buildReplyMap, buildThreadListHandlers, commentCountForPrefix, defaultStatusValue, deriveAnchorCounts, deriveAnchorMeta, emptyCommentFilters, getRoots, groupByFacet, hasActiveFilters, isUnresolved, matchMentionsInBody, nextChecklistStatus, resolveFacetOption, resolveStatusConfig, sortReplies, toneToBadgeTone, truncatePlain } from "./comments/comment-utils.js";
+import { CommentMarkdown } from "./comments/CommentMarkdown.js";
+import { CommentAuthorAvatar } from "./comments/CommentAuthor.js";
+import { MentionTextarea } from "./comments/MentionTextarea.js";
+import { CommentCard } from "./comments/CommentCard.js";
+import { CommentComposer } from "./comments/CommentComposer.js";
+import { CommentThreadList } from "./comments/CommentThreadList.js";
+import { CommentThread } from "./comments/CommentThread.js";
+import { CommentProvider } from "./comments/CommentProvider.js";
+import { dottedAnchorResolver, exactAnchorResolver, useCommentContext, useCommentContextOptional } from "./comments/comment-context.js";
+import { CommentSidePanel } from "./comments/CommentSidePanel.js";
+import { GroupedComments } from "./comments/GroupedComments.js";
+import { CommentFilterBar } from "./comments/CommentFilterBar.js";
+import { CommentProgress } from "./comments/CommentProgress.js";
 import { Clicky, ClickyNodeView, ClickyTable } from "./data/Clicky.js";
 import { OperationCatalog } from "./rpc/OperationCatalog.js";
 import { EntityExplorerApp } from "./rpc/EntityExplorerApp.js";
-import { AcceptPicker } from "./rpc/AcceptPicker.js";
 import { ACCEPT_OPTIONS, VIEW_OPTIONS } from "./rpc/accept-options.js";
+import { SchemaActionForm } from "./rpc/SchemaActionForm.js";
 import { CommandForm } from "./rpc/CommandForm.js";
 import { normalizeParameters, pathParamNames, submitValue } from "./rpc/command-form-utils.js";
 import { CommandOutput } from "./rpc/CommandOutput.js";
@@ -135,6 +160,7 @@ import { InlineError } from "./rpc/InlineError.js";
 import { OperationActionDialog } from "./rpc/OperationActionDialog.js";
 import { OperationEntityPage } from "./rpc/OperationEntityPage.js";
 import { OperationCommandPage } from "./rpc/OperationCommandPage.js";
+import { OperationResultView } from "./rpc/OperationResultView.js";
 import { EndpointList } from "./rpc/EndpointList.js";
 import { useOpenAPI, useOperationById, useOperations } from "./rpc/useOperations.js";
 import { OperationsApiClientError, createOperationsApiClient } from "./rpc/apiClient.js";
@@ -428,7 +454,6 @@ import { isLeaf } from "./data/cache-browser/types.js";
 export {
   ACCEPT_OPTIONS,
   AVATAR_PALETTE,
-  AcceptPicker,
   AnsiHtml,
   AppLayout,
   AppShell,
@@ -452,9 +477,22 @@ export {
   Combobox,
   CommandForm,
   CommandOutput,
+  CommentAuthorAvatar,
+  CommentCard,
+  CommentComposer,
+  CommentFilterBar,
+  CommentMarkdown,
+  CommentProgress,
+  CommentProvider,
+  CommentSidePanel,
+  CommentThread,
+  CommentThreadList,
   CopyBadge,
+  DEFAULT_CHECKLIST_CYCLE,
+  DEFAULT_COMMENT_STATUSES,
   DEFAULT_FORM_SIZE,
   DEFAULT_PREFERENCES_STORAGE_KEY,
+  DOCUMENT_ANCHOR,
   DataTable,
   DateField,
   DatePicker,
@@ -469,15 +507,19 @@ export {
   EndpointList,
   EntityExplorerApp,
   ErrorDetails,
+  ExecutionTree,
   Field,
   FilterBar,
   FilterForm,
   FilterPill,
   FilterPillGroup,
   FilterSeparator,
+  FormLookupProvider,
   FormatOptionsDropdown,
   FrameSourceWindow,
   Gauge,
+  GaugeHoverCard,
+  GroupedComments,
   HarPanel,
   HoverCard,
   Icon,
@@ -494,15 +536,21 @@ export {
   LoadingDots,
   LogViewer,
   LogsTable,
+  MARKDOWN_EDITOR_PREVIEW_FORMATS,
   Markdown,
+  MarkdownEditor,
   MatrixTable,
+  MentionTextarea,
   MethodBadge,
   Modal,
   MultiSelect,
+  NamespacePicker,
+  ObjectGraph,
   OperationActionDialog,
   OperationCatalog,
   OperationCommandPage,
   OperationEntityPage,
+  OperationResultView,
   OperationsApiClientError,
   Panel,
   PrettyStackTrace,
@@ -513,6 +561,10 @@ export {
   RouterProvider,
   SIZE_TOKENS,
   STATUS_TOKEN_GROUPS,
+  SchemaActionForm,
+  SchemaFieldMetaPanel,
+  SchemaViewer,
+  SchemaViewerRow,
   SearchInput,
   SecretKeySelector,
   Section,
@@ -1053,18 +1105,28 @@ export {
   WorkloadPicker,
   allGroupsTerminal,
   annotateRoutePaths,
+  applyCommentFilters,
   applyFilterExtensions,
   assignAxes,
+  authorDisplayName,
   badgeVariants,
   bucketTasks,
   buildCommandHref,
+  buildMarkdownPreviewUrl,
+  buildReplyMap,
+  buildSchemaTree,
+  buildSchemaViewerTree,
+  buildStepBranchTree,
+  buildThreadListHandlers,
   buttonVariants,
   cacheQueryKeys,
   changeIconAliases,
   chooseTimestampFormat,
+  clickyFormatForMarkdownPreview,
   cn,
   collapseSingleChildChains,
   collectFrameworks,
+  commentCountForPrefix,
   compactStackPath,
   countGoroutinesByState,
   countProcesses,
@@ -1076,11 +1138,17 @@ export {
   createTestRunnerRegistry,
   cycleFilterState,
   decodeFilterState,
+  defaultStatusValue,
+  deriveAnchorCounts,
+  deriveAnchorMeta,
   deriveCoreBars,
   detectDumpFormat,
+  dottedAnchorResolver,
   effectiveProperties,
+  emptyCommentFilters,
   emptyTestFilters,
   encodeFilterState,
+  exactAnchorResolver,
   filterOperationsByDomain,
   filterTests,
   findDetailEndpoint,
@@ -1105,8 +1173,12 @@ export {
   frameworkIcon,
   getChangeIcon,
   getClickySurfaces,
+  getRoots,
   getVersionInfo,
+  groupByFacet,
+  hasActiveFilters,
   hasFailed,
+  hasHoverMeta,
   hasPending,
   humanizeName,
   inferColumns,
@@ -1115,15 +1187,18 @@ export {
   isOpenStringMap,
   isPositionalParam,
   isTerminalStatus,
+  isUnresolved,
   kindForValue,
   latestOf,
   loadedWorkloads,
   logLevelColor,
   makeSurfaceDefinition,
+  matchMentionsInBody,
   matchesFilterState,
   matchesIf,
   mergeSeries,
   modeToFormat,
+  nextChecklistStatus,
   normalizeErrorDiagnostics,
   normalizeLogsTableRows,
   normalizeParameters,
@@ -1149,11 +1224,16 @@ export {
   rehydrateRefs,
   resolveBreakdown,
   resolveControl,
+  resolveFacetOption,
+  resolveLookupScope,
   resolveSeries,
   resolveSize,
+  resolveStatusConfig,
   segment,
+  seriesStats,
   setFallbackIconProvider,
   slugify,
+  sortReplies,
   splitTagToken,
   statusIconFor,
   statusToneFor,
@@ -1168,12 +1248,17 @@ export {
   taskStatusIcon,
   templateValuePre,
   testStatus,
+  toneToBadgeTone,
   totalDuration,
+  truncatePlain,
   useBrowserRouter,
+  useCommentContext,
+  useCommentContextOptional,
   useDensity,
   useDensityValue,
   useForm,
   useHistoryRoute,
+  useLookupFetcher,
   useMemoryRouter,
   useModalStack,
   useOpenAPI,

package/dist/index.js.map

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

package/dist/rpc/EntityExplorerApp.cjs

@@ -3,47 +3,30 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const themeSwitcher = require("../components/theme-switcher.cjs");
+const AppShell = require("../layout/AppShell.cjs");
 const clickyMetadata = require("./clickyMetadata.cjs");
 const commandHref = require("./commandHref.cjs");
 const router = require("./router.cjs");
 const OperationCatalog = require("./OperationCatalog.cjs");
 const OperationCommandPage = require("./OperationCommandPage.cjs");
 const OperationEntityPage = require("./OperationEntityPage.cjs");
+const surfaceIconMap = require("./surfaceIconMap.cjs");
 const useOperations = require("./useOperations.cjs");
-const SURFACE_GROUP_STATE_KEY = "clicky-ui:sidebar:groupCollapsed";
+const SIDEBAR_COLLAPSED_KEY = "clicky-ui:sidebar:collapsed";
 function EntityExplorerApp({
   client,
   basePath = "",
   showApiExplorer = true,
-  surfaceIcons
+  formExtensions,
+  formActions,
+  resultRenderer
 }) {
+  const formPre = formExtensions == null ? void 0 : formExtensions.pre;
+  const formPost = formExtensions == null ? void 0 : formExtensions.post;
   const { pathname, renderLink, navigate } = router.useRouter();
-  const { operations, spec } = useOperations.useOperations(client);
+  const { spec } = useOperations.useOperations(client);
   const surfaces = react.useMemo(() => clickyMetadata.getClickySurfaces(spec), [spec]);
   const surfaceGroups = react.useMemo(() => groupSurfacesByParent(surfaces), [surfaces]);
-  const listHrefBySurface = react.useMemo(() => {
-    const out = {};
-    for (const surface of surfaces) {
-      const listOp = clickyMetadata.findSurfaceListOperation(operations, surface.key);
-      if (!(listOp == null ? void 0 : listOp.operation.operationId)) continue;
-      const href = commandHref.buildCommandHref(basePath, {
-        operation: listOp,
-        request: { command: listOp.operation.operationId, autoRun: true }
-      });
-      if (href) out[surface.key] = href;
-    }
-    return out;
-  }, [basePath, operations, surfaces]);
-  const [collapsedGroups, setCollapsedGroups] = react.useState(
-    () => readCollapsedGroups()
-  );
-  const toggleGroup = react.useCallback((parent) => {
-    setCollapsedGroups((prev) => {
-      const next = { ...prev, [parent]: !prev[parent] };
-      writeCollapsedGroups(next);
-      return next;
-    });
-  }, []);
   const defaultSurface = react.useMemo(
     () => surfaces.find((surface) => !surface.admin) ?? surfaces[0],
     [surfaces]
@@ -75,104 +58,104 @@ function EntityExplorerApp({
     }),
     []
   );
+  const navSections = react.useMemo(() => {
+    const sections = surfaceGroups.map((group) => ({
+      label: group.label,
+      items: group.surfaces.map((surface) => {
+        const icon = surfaceIconMap.resolveSurfaceIcon(surface.icon);
+        return {
+          key: surface.key,
+          label: surface.title,
+          ...icon ? { icon } : {},
+          active: isSurfaceRouteActive(resolvedRoute, surface.key),
+          to: commandHref.withBasePath(basePath, `/${surface.key}`)
+        };
+      })
+    }));
+    if (showApiExplorer) {
+      sections.push({
+        items: [
+          {
+            key: explorerDefinition.key,
+            label: explorerDefinition.title,
+            active: resolvedRoute.kind === "explorer" || resolvedRoute.kind === "command",
+            to: commandHref.withBasePath(basePath, "/explorer")
+          }
+        ]
+      });
+    }
+    return sections;
+  }, [surfaceGroups, basePath, resolvedRoute, showApiExplorer, explorerDefinition]);
   react.useEffect(() => {
     if (defaultSurface == null || relativePath !== "/") return;
     navigate(commandHref.withBasePath(basePath, `/${defaultSurface.key}`), { replace: true });
   }, [basePath, defaultSurface, relativePath, navigate]);
-  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "flex w-64 shrink-0 flex-col border-r border-border bg-muted/30 p-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: (spec == null ? void 0 : spec.info.title) ?? "Clicky Explorer" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: "Metadata-driven entity explorer" })
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    AppShell.AppShell,
+    {
+      brand: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-semibold", children: (spec == null ? void 0 : spec.info.title) ?? "Clicky Explorer" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-sidebar-foreground/60", children: "Metadata-driven entity explorer" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-col gap-2", children: [
-        surfaceGroups.map((group) => {
-          const collapsed = collapsedGroups[group.parent] ?? false;
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => toggleGroup(group.parent),
-                "aria-expanded": !collapsed,
-                className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground transition-colors hover:bg-accent/40",
-                children: [
-                  (surfaceIcons == null ? void 0 : surfaceIcons[group.parent]) != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 items-center justify-center text-current", children: surfaceIcons[group.parent] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: group.label }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[0.65rem] opacity-60", children: collapsed ? "▸" : "▾" })
-                ]
-              }
-            ),
-            !collapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-2 mt-1 flex flex-col gap-1 border-l border-border/60 pl-2", children: group.surfaces.map(
-              (surface) => renderLink({
-                key: surface.key,
-                to: listHrefBySurface[surface.key] ?? commandHref.withBasePath(basePath, `/${surface.key}`),
-                className: navLinkClassName(
-                  isSurfaceRouteActive(resolvedRoute, surface.key)
-                ),
-                children: surface.title
-              })
-            ) })
-          ] }, group.parent);
-        }),
-        showApiExplorer && renderLink({
-          key: explorerDefinition.key,
-          to: commandHref.withBasePath(basePath, "/explorer"),
-          className: navLinkClassName(
-            resolvedRoute.kind === "explorer" || resolvedRoute.kind === "command"
-          ),
-          children: explorerDefinition.title
-        })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(themeSwitcher.ThemeSwitcher, {}) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto p-6", children: resolvedRoute.kind === "surface" ? resolvedRoute.surface ? /* @__PURE__ */ jsxRuntime.jsx(
-      OperationCatalog.OperationCatalog,
-      {
-        definition: clickyMetadata.makeSurfaceDefinition(resolvedRoute.surface),
-        entities: [resolvedRoute.surface.entity],
-        client,
-        renderLink,
-        surfaceKey: resolvedRoute.surface.key,
-        commandRuntime
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(UnknownSurface, { surfaceKey: resolvedRoute.surfaceKey }) : resolvedRoute.kind === "entity" ? resolvedRoute.surface ? /* @__PURE__ */ jsxRuntime.jsx(
-      OperationEntityPage.OperationEntityPage,
-      {
-        definition: clickyMetadata.makeSurfaceDefinition(resolvedRoute.surface),
-        entities: [resolvedRoute.surface.entity],
-        client,
-        renderLink,
-        surfaceKey: resolvedRoute.surface.key,
-        backHref: commandHref.withBasePath(basePath, `/${resolvedRoute.surface.key}`),
-        backLabel: `Back to ${resolvedRoute.surface.title}`,
-        commandRuntime,
-        ...resolvedRoute.id ? { id: resolvedRoute.id } : {}
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(UnknownSurface, { surfaceKey: resolvedRoute.surfaceKey }) : resolvedRoute.kind === "command" ? /* @__PURE__ */ jsxRuntime.jsx(
-      OperationCommandPage.OperationCommandPage,
-      {
-        client,
-        backHref: commandHref.withBasePath(basePath, "/explorer"),
-        backLabel: "Back to API Explorer",
-        renderLink,
-        commandRuntime,
-        initialValues: commandInitialValues,
-        autoRun: true,
-        ...resolvedRoute.operationId ? { operationId: resolvedRoute.operationId } : {}
-      }
-    ) : resolvedRoute.kind === "explorer" ? /* @__PURE__ */ jsxRuntime.jsx(
-      OperationCatalog.OperationCatalog,
-      {
-        definition: explorerDefinition,
-        entities: [],
-        allOperations: true,
-        client,
-        renderLink,
-        commandRuntime
-      }
-    ) : defaultSurface == null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Loading surfaces…" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Redirecting…" }) })
-  ] });
+      navSections,
+      sidebarFooter: /* @__PURE__ */ jsxRuntime.jsx(themeSwitcher.ThemeSwitcher, {}),
+      collapsedStorageKey: SIDEBAR_COLLAPSED_KEY,
+      contentClassName: "p-6",
+      children: resolvedRoute.kind === "surface" ? resolvedRoute.surface ? /* @__PURE__ */ jsxRuntime.jsx(
+        OperationCatalog.OperationCatalog,
+        {
+          definition: clickyMetadata.makeSurfaceDefinition(resolvedRoute.surface),
+          entities: [resolvedRoute.surface.entity],
+          client,
+          renderLink,
+          surfaceKey: resolvedRoute.surface.key,
+          commandRuntime,
+          ...formPre ? { formPre } : {},
+          ...formPost ? { formPost } : {},
+          ...formActions ? { formActions } : {},
+          ...resultRenderer ? { resultRenderer } : {}
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(UnknownSurface, { surfaceKey: resolvedRoute.surfaceKey }) : resolvedRoute.kind === "entity" ? resolvedRoute.surface ? /* @__PURE__ */ jsxRuntime.jsx(
+        OperationEntityPage.OperationEntityPage,
+        {
+          definition: clickyMetadata.makeSurfaceDefinition(resolvedRoute.surface),
+          entities: [resolvedRoute.surface.entity],
+          client,
+          renderLink,
+          surfaceKey: resolvedRoute.surface.key,
+          backHref: commandHref.withBasePath(basePath, `/${resolvedRoute.surface.key}`),
+          backLabel: `Back to ${resolvedRoute.surface.title}`,
+          commandRuntime,
+          ...formPre ? { formPre } : {},
+          ...formPost ? { formPost } : {},
+          ...formActions ? { formActions } : {},
+          ...resolvedRoute.id ? { id: resolvedRoute.id } : {}
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(UnknownSurface, { surfaceKey: resolvedRoute.surfaceKey }) : resolvedRoute.kind === "command" ? /* @__PURE__ */ jsxRuntime.jsx(
+        OperationCommandPage.OperationCommandPage,
+        {
+          client,
+          backHref: commandHref.withBasePath(basePath, "/explorer"),
+          backLabel: "Back to API Explorer",
+          renderLink,
+          commandRuntime,
+          initialValues: commandInitialValues,
+          autoRun: true,
+          ...resolvedRoute.operationId ? { operationId: resolvedRoute.operationId } : {}
+        }
+      ) : resolvedRoute.kind === "explorer" ? /* @__PURE__ */ jsxRuntime.jsx(
+        OperationCatalog.OperationCatalog,
+        {
+          definition: explorerDefinition,
+          entities: [],
+          allOperations: true,
+          client,
+          renderLink,
+          commandRuntime
+        }
+      ) : defaultSurface == null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Loading surfaces…" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Redirecting…" })
+    }
+  );
   return content;
 }
 function parseExplorerRoute(pathname) {
@@ -207,12 +190,6 @@ function resolveRouteSurface(route, surfaces) {
 function isSurfaceRouteActive(route, surfaceKey) {
   return route.kind === "surface" && route.surfaceKey === surfaceKey || route.kind === "entity" && route.surfaceKey === surfaceKey;
 }
-function navLinkClassName(active) {
-  return [
-    "rounded-md px-2 py-1.5 text-sm transition-colors",
-    active ? "bg-accent text-accent-foreground" : "text-foreground hover:bg-accent"
-  ].join(" ");
-}
 function stripBasePath(pathname, basePath) {
   const base = commandHref.trimTrailingSlash(basePath);
   if (!base || base === "/") {
@@ -254,24 +231,6 @@ function titleCase(value) {
   if (!value) return value;
   return value.charAt(0).toUpperCase() + value.slice(1);
 }
-function readCollapsedGroups() {
-  if (typeof window === "undefined") return {};
-  try {
-    const raw = window.localStorage.getItem(SURFACE_GROUP_STATE_KEY);
-    if (!raw) return {};
-    const parsed = JSON.parse(raw);
-    return parsed && typeof parsed === "object" ? parsed : {};
-  } catch {
-    return {};
-  }
-}
-function writeCollapsedGroups(state) {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.setItem(SURFACE_GROUP_STATE_KEY, JSON.stringify(state));
-  } catch {
-  }
-}
 function readCommandQueryParams() {
   if (typeof window === "undefined") {
     return { initialValues: {}, autoRun: false };