@elevasis/ui 2.45.2 → 2.47.0

package/dist/knowledge/index.js

@@ -1,5 +1,5 @@
-import { SemanticIcon, getKnowledgeIconToken, PageContainer, getKnowledgeGraphNodeCommand, IdentityDomainSchema, WorkflowResourceEntrySchema, AgentResourceEntrySchema, IntegrationResourceEntrySchema, ScriptResourceEntrySchema, getKnowledgeNodeReadCommand, getKnowledgeOntologyProjection, getPrimaryOntologyItemsForDomain, projectNavigationSurfaces, projectNavigationGroups, SurfaceDefinitionSchema, RoleSchema, PolicySchema, getOntologyDomainLabel, getKnowledgeDomainFolderCommand, getKnowledgeTreeFolderCommand, KNOWLEDGE_DOMAINS_WITH_PANELS } from '../chunk-FLQKWUSH.js';
-export { KNOWLEDGE_ICON_TOKEN_BY_KIND, KnowledgeSearchBar, KnowledgeTree, OM_NESTED_TREE_GROUPS, OM_TREE_GROUPS, SemanticIcon, extendSemanticIconRegistry, findOmTreeGroup, getKnowledgeIconToken, getSemanticIconComponent, getSharedOrganizationGraph, resolveSemanticIconComponent } from '../chunk-FLQKWUSH.js';
+import { getConceptDefinition, normaliseConceptKey, SemanticIcon, getKnowledgeIconToken, PageContainer, getKnowledgeGraphNodeCommand, IdentityDomainSchema, WorkflowResourceEntrySchema, AgentResourceEntrySchema, IntegrationResourceEntrySchema, ScriptResourceEntrySchema, getKnowledgeNodeReadCommand, getKnowledgeOntologyProjection, getPrimaryOntologyItemsForDomain, projectNavigationSurfaces, projectNavigationGroups, SurfaceDefinitionSchema, RoleSchema, PolicySchema, getOntologyDomainLabel, getKnowledgeDomainFolderCommand, getKnowledgeTreeFolderCommand, KNOWLEDGE_DOMAINS_WITH_PANELS } from '../chunk-FVI3AMBM.js';
+export { FILTERABLE_DOMAIN_KEYS, KNOWLEDGE_DOMAINS_WITH_PANELS, KNOWLEDGE_ICON_TOKEN_BY_KIND, KnowledgeSearchBar, KnowledgeTree, OM_NESTED_TREE_GROUPS, OM_TREE_GROUPS, SemanticIcon, buildKnowledgeOmTreeData, extendSemanticIconRegistry, findKnowledgeTreeNodeByValue, findOmTreeGroup, getKnowledgeIconToken, getSemanticIconComponent, getSharedOrganizationGraph, resolveSemanticIconComponent } from '../chunk-FVI3AMBM.js';
 import { usePresetsContext } from '../chunk-NZ2F5RQ4.js';
 import '../chunk-OJJK27GC.js';
 import '../chunk-AUDNF2Q7.js';
@@ -10,7 +10,7 @@ import '../chunk-SJHM4WDG.js';
 import '../chunk-ZTWA5H77.js';
 import '../chunk-S3XR4II4.js';
 import '../chunk-6DO4PE3O.js';
-import '../chunk-L4RIHGPO.js';
+import '../chunk-OFLWSKSC.js';
 import '../chunk-DD3CCMCZ.js';
 import '../chunk-GMXGDO3I.js';
 import '../chunk-2IFYDILW.js';
@@ -19,7 +19,7 @@ import '../chunk-HENXLGVD.js';
 import '../chunk-7FPLLSHN.js';
 import '../chunk-RNP5R5I3.js';
 import '../chunk-W2SFTXMT.js';
-import { getSystem, SystemEntrySchema, EntitySchema, ActionSchema, OntologyIdSchema, ontologyGraphNodeId, compileOrganizationOntology, parseOntologyId } from '../chunk-HQPJ6TGV.js';
+import { getSystem, SystemEntrySchema, EntitySchema, ActionSchema, OntologyIdSchema, ontologyGraphNodeId, compileOrganizationOntology, parseOntologyId } from '../chunk-CDZB24OR.js';
 import '../chunk-KRWALB24.js';
 import '../chunk-2FTX4WO2.js';
 import '../chunk-MQZE7SUI.js';
@@ -27,7 +27,7 @@ import '../chunk-TVTSASST.js';
 import '../chunk-BRJ3QZ4E.js';
 import '../chunk-I2KLQ2HA.js';
 import { createContext, Children, isValidElement, cloneElement, useMemo, useContext, useRef, useState, useEffect } from 'react';
-import { Card, Text, SimpleGrid, Group, Stack, Alert, Tabs, Box, Table, CopyButton, Tooltip, ActionIcon, Title, Badge, Divider, Button, Paper, TableOfContents, ThemeIcon, UnstyledButton, List, Code, Progress, Loader } from '@mantine/core';
+import { Card, Text, SimpleGrid, Group, Stack, Alert, Tabs, Box, Table, CopyButton, Tooltip, ActionIcon, Title, Badge, Divider, Button, Paper, TableOfContents, ThemeIcon, UnstyledButton, List, Code, Progress, Loader, Spoiler } from '@mantine/core';
 import { IconBook, IconCheck, IconCopy, IconExternalLink, IconCircleX, IconAlertTriangle, IconInfoCircle } from '@tabler/icons-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Highlight, themes } from 'prism-react-renderer';
@@ -6897,6 +6897,19 @@ function useKnowledgeAllowlist() {
   }
   return ctx;
 }
+function ConceptTooltip({ conceptKey, variant = "chip", children }) {
+  const definition = getConceptDefinition(conceptKey);
+  if (!definition) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (variant === "label") {
+    return /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", align: "center", style: { display: "inline-flex" }, children: [
+      children,
+      /* @__PURE__ */ jsx(Tooltip, { label: definition.description, withArrow: true, multiline: true, maw: 260, children: /* @__PURE__ */ jsx(IconInfoCircle, { size: 12, style: { color: "var(--color-text-subtle)", cursor: "help", flexShrink: 0 } }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { label: definition.description, withArrow: true, multiline: true, maw: 260, children: /* @__PURE__ */ jsx("span", { style: { cursor: "help", display: "inline-flex", width: "fit-content" }, children }) });
+}
 var KIND_CHIP_TONE_STYLES = {
   subtle: {
     backgroundColor: "var(--color-surface-hover)",
@@ -6915,7 +6928,7 @@ var KIND_CHIP_TONE_STYLES = {
   }
 };
 function KindChip({ kind, tone = "subtle", style, ...spanProps }) {
-  return /* @__PURE__ */ jsx(
+  const chip = /* @__PURE__ */ jsx(
     "span",
     {
       ...spanProps,
@@ -6942,6 +6955,9 @@ function KindChip({ kind, tone = "subtle", style, ...spanProps }) {
       children: kind
     }
   );
+  const hasDefinition = Boolean(getConceptDefinition(normaliseConceptKey(kind)));
+  if (!hasDefinition) return chip;
+  return /* @__PURE__ */ jsx(ConceptTooltip, { conceptKey: kind, variant: "chip", children: chip });
 }
 function NodeHeader({
   title,
@@ -6996,7 +7012,7 @@ function EdgeChip({ id, onClick }) {
 }
 function EdgeGroup({ label, ids, onNavigateToNode }) {
   return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-    /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, style: { color: "var(--color-text-subtle)" }, children: label }),
+    /* @__PURE__ */ jsx(Text, { component: "span", size: "xs", fw: 500, style: { color: "var(--color-text-subtle)", display: "block" }, children: /* @__PURE__ */ jsx(ConceptTooltip, { conceptKey: label, variant: "label", children: label }) }),
     ids.map((id) => /* @__PURE__ */ jsx(EdgeChip, { id, onClick: onNavigateToNode ? () => onNavigateToNode(id) : void 0 }, id))
   ] });
 }
@@ -7789,7 +7805,7 @@ function SystemDescribeView({
   const ontologyObjectIds = getPrimaryOntologyNodeIds(systemSourceId, organizationModel, "ontology-objects") ?? getContainedOntologyNodeIds(node, graph, "object");
   const ontologyActionIds = getPrimaryOntologyNodeIds(systemSourceId, organizationModel, "ontology-actions") ?? getContainedOntologyNodeIds(node, graph, "action");
   const ontologyCatalogIds = getPrimaryOntologyNodeIds(systemSourceId, organizationModel, "ontology-catalogs") ?? getContainedOntologyNodeIds(node, graph, "catalog");
-  const ontologySurfaceIds = getPrimaryOntologyNodeIds(systemSourceId, organizationModel, "ontology-surfaces") ?? getContainedOntologyNodeIds(node, graph, "surface");
+  const ontologyEndpointIds = getPrimaryOntologyNodeIds(systemSourceId, organizationModel, "ontology-endpoints") ?? getContainedOntologyNodeIds(node, graph, "endpoint");
   const uiIcon = system?.ui?.icon ?? system?.icon;
   const uiPath = system?.ui?.path ?? system?.path;
   const uiSurfaces = system?.ui?.surfaces;
@@ -7906,11 +7922,11 @@ function SystemDescribeView({
             onNavigateToNode
           }
         ),
-        ontologySurfaceIds.length > 0 && /* @__PURE__ */ jsx(
+        ontologyEndpointIds.length > 0 && /* @__PURE__ */ jsx(
           EdgeGroup,
           {
-            label: `Ontology surfaces (${ontologySurfaceIds.length})`,
-            ids: ontologySurfaceIds,
+            label: `Ontology endpoints (${ontologyEndpointIds.length})`,
+            ids: ontologyEndpointIds,
             onNavigateToNode
           }
         ),
@@ -8885,31 +8901,66 @@ function SurfaceDescribeView({
     }
   );
 }
-function formatValue(value) {
-  if (value === null || value === void 0) return "";
-  if (typeof value === "string") return value;
-  if (typeof value === "number" || typeof value === "boolean") return String(value);
+var NESTED_BLOCK_STYLE = {
+  borderLeft: "2px solid var(--color-border)",
+  paddingLeft: "var(--mantine-spacing-sm)"
+};
+function isScalar(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+function isEmpty(value) {
+  if (value === null || value === void 0 || value === "") return true;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === "object") return Object.keys(value).length === 0;
+  return false;
+}
+function isComplex(value) {
+  if (Array.isArray(value)) return !value.every(isScalar);
+  return typeof value === "object" && value !== null;
+}
+function hasRenderableEntries(record) {
+  if (!record) return false;
+  return Object.values(record).some((value) => !isEmpty(value));
+}
+function JsonValueView({ value, depth = 0 }) {
+  if (isEmpty(value)) return null;
+  if (isScalar(value)) {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: String(value) });
+  }
   if (Array.isArray(value)) {
-    const items = value.map(
-      (item) => typeof item === "string" || typeof item === "number" || typeof item === "boolean" ? String(item) : JSON.stringify(item)
-    );
-    return items.join(", ");
+    if (value.every(isScalar)) {
+      return /* @__PURE__ */ jsx(Group, { gap: 6, wrap: "wrap", children: value.map((item, idx) => /* @__PURE__ */ jsx(KindChip, { kind: String(item), tone: "muted" }, idx)) });
+    }
+    return /* @__PURE__ */ jsx(Stack, { gap: "xs", children: value.map((item, idx) => /* @__PURE__ */ jsx(Box, { style: NESTED_BLOCK_STYLE, children: /* @__PURE__ */ jsx(JsonValueView, { value: item, depth: depth + 1 }) }, idx)) });
+  }
+  return /* @__PURE__ */ jsx(RecordRows, { record: value, gap: 6 });
+}
+function NestedRow({ label, value, depth }) {
+  if (!isComplex(value)) {
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "dimmed", style: { minWidth: 140, flexShrink: 0 }, children: label }),
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(JsonValueView, { value, depth: depth + 1 }) })
+    ] });
   }
-  return JSON.stringify(value, null, 2);
+  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "dimmed", children: label }),
+    /* @__PURE__ */ jsx(Box, { style: { paddingLeft: "var(--mantine-spacing-xs)" }, children: /* @__PURE__ */ jsx(JsonValueView, { value, depth: depth + 1 }) })
+  ] });
+}
+function RecordRows({ record, gap = "xs", depth = 0 }) {
+  if (!record) return null;
+  const entries = Object.entries(record).filter(([, value]) => !isEmpty(value));
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsx(Stack, { gap, children: entries.map(([key, value]) => /* @__PURE__ */ jsx(NestedRow, { label: key, value, depth }, key)) });
 }
 function AdditionalProperties({ domain, knownKeys }) {
   const knownSet = new Set(knownKeys);
-  const extras = Object.entries(domain).filter(
-    ([key, value]) => !knownSet.has(key) && value !== void 0 && value !== null && value !== ""
-  );
-  if (extras.length === 0) return null;
+  const extras = Object.fromEntries(Object.entries(domain).filter(([key]) => !knownSet.has(key)));
+  if (!hasRenderableEntries(extras)) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Divider, {}),
     /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: "Additional Properties" }),
-    /* @__PURE__ */ jsx(Stack, { gap: "xs", children: extras.map(([key, value]) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "dimmed", style: { minWidth: 140, flexShrink: 0 }, children: key }),
-      /* @__PURE__ */ jsx(Text, { size: "sm", style: { flex: 1, whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: formatValue(value) })
-    ] }, key)) })
+    /* @__PURE__ */ jsx(RecordRows, { record: extras })
   ] });
 }
 var BRANDING_KNOWN_KEYS = [
@@ -9076,10 +9127,167 @@ function ThemeSwatchRow({ tokens }) {
     /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", ta: "center", children: label })
   ] }, label)) });
 }
+function RecordSection({ title, record }) {
+  if (!record) return null;
+  if (!hasRenderableEntries(record)) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: title }),
+    /* @__PURE__ */ jsx(RecordRows, { record })
+  ] });
+}
+var IDENTITY_KNOWN_KEYS = [
+  "organizationName",
+  "shortName",
+  "clientBrief",
+  "geographicFocus",
+  "timeZone"
+];
+var BRANDING_KNOWN_KEYS2 = ["voice", "tagline", "values", "palette", "typography"];
+var PROMPTS_KNOWN_KEYS = ["defaultContext"];
 function formatLabel(value) {
   return value.split(/[-_]/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
 }
-function ClientsPanel({ model, filterToItemId }) {
+function ClientDetail({ client, onNavigateToNode }) {
+  const identity = client.identity;
+  const branding = client.branding;
+  const prompts = client.prompts;
+  const links = client.links;
+  const brandingRecord = branding;
+  const palette = brandingRecord["palette"];
+  const typography = brandingRecord["typography"];
+  const hasBrandingSection = branding.tagline || branding.voice || branding.values && branding.values.length > 0 || palette || typography;
+  const hasLinksSection = links.projectIds && links.projectIds.length > 0 || links.primaryCompanyId || links.primaryContactId || links.sourceDealId;
+  return /* @__PURE__ */ jsxs(Stack, { p: "md", gap: "md", children: [
+    /* @__PURE__ */ jsx(
+      KnowledgePageHeader,
+      {
+        title: client.name,
+        kind: "Client",
+        tone: "subtle",
+        copyCommand: getKnowledgeDomainFolderCommand("clients")
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: formatLabel(client.status) }),
+      client.source ? /* @__PURE__ */ jsx(Badge, { variant: "outline", size: "sm", children: formatLabel(client.source) }) : null,
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: client.slug })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: "Identity" }),
+    /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+      identity.organizationName ? /* @__PURE__ */ jsx(FieldRow, { label: "Organization", value: identity.organizationName }) : null,
+      identity.shortName ? /* @__PURE__ */ jsx(FieldRow, { label: "Short Name", value: identity.shortName }) : null,
+      identity.geographicFocus && identity.geographicFocus.length > 0 ? /* @__PURE__ */ jsx(FieldRow, { label: "Geographic Focus", value: identity.geographicFocus.join(", ") }) : null,
+      identity.timeZone && identity.timeZone !== "UTC" ? /* @__PURE__ */ jsx(FieldRow, { label: "Time Zone", value: identity.timeZone }) : null,
+      identity.clientBrief ? /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "dimmed", children: "Brief" }),
+        /* @__PURE__ */ jsx(Card, { withBorder: true, padding: "sm", style: { background: "var(--color-surface)" }, children: /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-wrap", lineHeight: 1.6 }, children: identity.clientBrief }) })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx(AdditionalProperties, { domain: identity, knownKeys: IDENTITY_KNOWN_KEYS }),
+    hasBrandingSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: "Branding" }),
+      /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+        branding.tagline ? /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "dimmed", children: "Tagline" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", children: branding.tagline })
+        ] }) : null,
+        branding.voice ? /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "dimmed", children: "Voice" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", children: branding.voice })
+        ] }) : null,
+        branding.values && branding.values.length > 0 ? /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "dimmed", children: "Values" }),
+          /* @__PURE__ */ jsx(Group, { gap: "xs", wrap: "wrap", children: branding.values.map((v) => /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: v }, v)) })
+        ] }) : null,
+        palette ? /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "dimmed", children: "Palette" }),
+          /* @__PURE__ */ jsx(PaletteSwatches, { palette })
+        ] }) : null,
+        typography ? /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "dimmed", children: "Typography" }),
+          /* @__PURE__ */ jsx(TypographyRows, { typography })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx(AdditionalProperties, { domain: brandingRecord, knownKeys: BRANDING_KNOWN_KEYS2 })
+    ] }) : null,
+    prompts.defaultContext ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: "Prompts" }),
+      /* @__PURE__ */ jsx(Spoiler, { maxHeight: 200, showLabel: "Show more", hideLabel: "Show less", children: /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-wrap", lineHeight: 1.6 }, children: prompts.defaultContext }) }),
+      /* @__PURE__ */ jsx(AdditionalProperties, { domain: prompts, knownKeys: PROMPTS_KNOWN_KEYS })
+    ] }) : null,
+    hasLinksSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: "Links" }),
+      /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+        links.projectIds && links.projectIds.length > 0 ? /* @__PURE__ */ jsx(
+          EdgeGroup,
+          {
+            label: `Project IDs (${links.projectIds.length})`,
+            ids: links.projectIds,
+            onNavigateToNode
+          }
+        ) : null,
+        links.primaryCompanyId ? /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, style: { color: "var(--color-text-subtle)" }, children: "Primary Company" }),
+          /* @__PURE__ */ jsx(
+            EdgeChip,
+            {
+              id: links.primaryCompanyId,
+              onClick: onNavigateToNode ? () => onNavigateToNode(links.primaryCompanyId) : void 0
+            }
+          )
+        ] }) : null,
+        links.primaryContactId ? /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, style: { color: "var(--color-text-subtle)" }, children: "Primary Contact" }),
+          /* @__PURE__ */ jsx(
+            EdgeChip,
+            {
+              id: links.primaryContactId,
+              onClick: onNavigateToNode ? () => onNavigateToNode(links.primaryContactId) : void 0
+            }
+          )
+        ] }) : null,
+        links.sourceDealId ? /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, style: { color: "var(--color-text-subtle)" }, children: "Source Deal" }),
+          /* @__PURE__ */ jsx(
+            EdgeChip,
+            {
+              id: links.sourceDealId,
+              onClick: onNavigateToNode ? () => onNavigateToNode(links.sourceDealId) : void 0
+            }
+          )
+        ] }) : null
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(RecordSection, { title: "Config", record: client.config }),
+    /* @__PURE__ */ jsx(RecordSection, { title: "Custom Values", record: client.customValues })
+  ] });
+}
+function ClientSummaryCard({ client }) {
+  return /* @__PURE__ */ jsx(Card, { withBorder: true, padding: "md", style: { background: "var(--color-surface)" }, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "space-between", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", lineClamp: 1, children: client.name }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 1, children: client.slug })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", style: { flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: formatLabel(client.status) }),
+        client.source ? /* @__PURE__ */ jsx(Badge, { variant: "outline", size: "sm", children: formatLabel(client.source) }) : null
+      ] })
+    ] }),
+    client.identity.clientBrief ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: client.identity.clientBrief }) : null,
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
+      client.workspace.kind ? /* @__PURE__ */ jsx(Badge, { variant: "light", color: "gray", size: "sm", children: formatLabel(client.workspace.kind) }) : null,
+      client.workspace.owner ? /* @__PURE__ */ jsx(Badge, { variant: "light", color: "gray", size: "sm", children: formatLabel(client.workspace.owner) }) : null,
+      client.workspace.projectId ? /* @__PURE__ */ jsx(Badge, { variant: "light", color: "gray", size: "sm", children: client.workspace.projectId }) : null
+    ] })
+  ] }) }, client.id);
+}
+function ClientsPanel({ model, filterToItemId, onNavigateToNode }) {
   const clients = Object.values(model.clients).filter((client) => !filterToItemId || client.id === filterToItemId).sort((left, right) => left.slug.localeCompare(right.slug));
   if (clients.length === 0) {
     return /* @__PURE__ */ jsxs(Stack, { p: "md", gap: "sm", children: [
@@ -9095,6 +9303,9 @@ function ClientsPanel({ model, filterToItemId }) {
       /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: filterToItemId ? "Client profile not found." : "No client profiles defined yet." })
     ] });
   }
+  if (filterToItemId) {
+    return /* @__PURE__ */ jsx(ClientDetail, { client: clients[0], onNavigateToNode });
+  }
   return /* @__PURE__ */ jsxs(Stack, { p: "md", gap: "md", children: [
     /* @__PURE__ */ jsx(
       KnowledgePageHeader,
@@ -9112,26 +9323,43 @@ function ClientsPanel({ model, filterToItemId }) {
       " defined."
     ] }),
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(Stack, { gap: "md", children: clients.map((client) => /* @__PURE__ */ jsx(Card, { withBorder: true, padding: "md", style: { background: "var(--color-surface)" }, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
-      /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "space-between", wrap: "nowrap", children: [
-        /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", lineClamp: 1, children: client.name }),
-          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 1, children: client.slug })
-        ] }),
-        /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", style: { flexShrink: 0 }, children: [
-          /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: formatLabel(client.status) }),
-          client.source ? /* @__PURE__ */ jsx(Badge, { variant: "outline", size: "sm", children: formatLabel(client.source) }) : null
-        ] })
-      ] }),
-      client.identity.clientBrief ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: client.identity.clientBrief }) : null,
-      /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
-        client.workspace.kind ? /* @__PURE__ */ jsx(Badge, { variant: "light", color: "gray", size: "sm", children: formatLabel(client.workspace.kind) }) : null,
-        client.workspace.owner ? /* @__PURE__ */ jsx(Badge, { variant: "light", color: "gray", size: "sm", children: formatLabel(client.workspace.owner) }) : null,
-        client.workspace.projectId ? /* @__PURE__ */ jsx(Badge, { variant: "light", color: "gray", size: "sm", children: client.workspace.projectId }) : null
-      ] })
-    ] }) }, client.id)) })
+    /* @__PURE__ */ jsx(Stack, { gap: "md", children: clients.map((client) => /* @__PURE__ */ jsx(ClientSummaryCard, { client }, client.id)) })
   ] });
 }
+function FieldRow({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "dimmed", style: { minWidth: 140, flexShrink: 0 }, children: label }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", children: value })
+  ] });
+}
+function PaletteSwatches({ palette }) {
+  const entries = Object.entries(palette).filter(([, v]) => typeof v === "string" && v.trim().length > 0);
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsx(Group, { gap: "sm", wrap: "wrap", children: entries.map(([name, color]) => /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", style: { minWidth: 56 }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: 6,
+          backgroundColor: color,
+          border: "1px solid var(--color-border, rgba(0,0,0,0.12))"
+        },
+        title: color
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", ta: "center", children: name })
+  ] }, name)) });
+}
+function TypographyRows({ typography }) {
+  const entries = Object.entries(typography).filter(([, v]) => typeof v === "string" && v.trim().length > 0);
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsx(Stack, { gap: "xs", children: entries.map(([name, fontValue]) => /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "dimmed", style: { minWidth: 140 }, children: name }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", style: { fontFamily: fontValue }, children: fontValue })
+  ] }, name)) });
+}
 function CustomersPanel({ model, filterToItemId }) {
   const customers = model.customers;
   const segments = Object.values(customers).filter((segment) => !filterToItemId || segment.id === filterToItemId).sort((a, b) => a.order - b.order);
@@ -9276,7 +9504,7 @@ function GoalsPanel({ model, filterToItemId }) {
   ] });
 }
 var DAYS_OF_WEEK = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
-var IDENTITY_KNOWN_KEYS = [
+var IDENTITY_KNOWN_KEYS2 = [
   "organizationName",
   "productName",
   "shortName",
@@ -9295,7 +9523,7 @@ var IDENTITY_KNOWN_KEYS = [
 function capitalize(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
-function FieldRow({ label, value }) {
+function FieldRow2({ label, value }) {
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
     /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "dimmed", style: { minWidth: 140, flexShrink: 0 }, children: label }),
     /* @__PURE__ */ jsx(Text, { size: "sm", children: value })
@@ -9321,7 +9549,7 @@ function IdentityPanel({ model }) {
         }
       ),
       /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No identity configured." }),
-      /* @__PURE__ */ jsx(AdditionalProperties, { domain: identity, knownKeys: IDENTITY_KNOWN_KEYS })
+      /* @__PURE__ */ jsx(AdditionalProperties, { domain: identity, knownKeys: IDENTITY_KNOWN_KEYS2 })
     ] });
   }
   const businessHoursRows = DAYS_OF_WEEK.map((day) => {
@@ -9343,10 +9571,10 @@ function IdentityPanel({ model }) {
     (organizationName || productName || shortName || description) && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: "Naming" }),
       /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
-        organizationName && /* @__PURE__ */ jsx(FieldRow, { label: "Organization Name", value: organizationName }),
-        productName && /* @__PURE__ */ jsx(FieldRow, { label: "Product Name", value: productName }),
-        shortName && /* @__PURE__ */ jsx(FieldRow, { label: "Short Name", value: shortName }),
-        description && /* @__PURE__ */ jsx(FieldRow, { label: "Description", value: description })
+        organizationName && /* @__PURE__ */ jsx(FieldRow2, { label: "Organization Name", value: organizationName }),
+        productName && /* @__PURE__ */ jsx(FieldRow2, { label: "Product Name", value: productName }),
+        shortName && /* @__PURE__ */ jsx(FieldRow2, { label: "Short Name", value: shortName }),
+        description && /* @__PURE__ */ jsx(FieldRow2, { label: "Description", value: description })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
@@ -9363,12 +9591,12 @@ function IdentityPanel({ model }) {
       /* @__PURE__ */ jsx(Divider, {}),
       /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: "Legal & Operational" }),
       /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
-        identity.legalName && /* @__PURE__ */ jsx(FieldRow, { label: "Legal Name", value: identity.legalName }),
-        identity.entityType && /* @__PURE__ */ jsx(FieldRow, { label: "Entity Type", value: identity.entityType }),
-        identity.jurisdiction && /* @__PURE__ */ jsx(FieldRow, { label: "Jurisdiction", value: identity.jurisdiction }),
-        identity.industryCategory && /* @__PURE__ */ jsx(FieldRow, { label: "Industry", value: identity.industryCategory }),
-        identity.geographicFocus && /* @__PURE__ */ jsx(FieldRow, { label: "Geographic Focus", value: identity.geographicFocus }),
-        identity.timeZone && /* @__PURE__ */ jsx(FieldRow, { label: "Timezone", value: identity.timeZone })
+        identity.legalName && /* @__PURE__ */ jsx(FieldRow2, { label: "Legal Name", value: identity.legalName }),
+        identity.entityType && /* @__PURE__ */ jsx(FieldRow2, { label: "Entity Type", value: identity.entityType }),
+        identity.jurisdiction && /* @__PURE__ */ jsx(FieldRow2, { label: "Jurisdiction", value: identity.jurisdiction }),
+        identity.industryCategory && /* @__PURE__ */ jsx(FieldRow2, { label: "Industry", value: identity.industryCategory }),
+        identity.geographicFocus && /* @__PURE__ */ jsx(FieldRow2, { label: "Geographic Focus", value: identity.geographicFocus }),
+        identity.timeZone && /* @__PURE__ */ jsx(FieldRow2, { label: "Timezone", value: identity.timeZone })
       ] })
     ] }),
     hasBusinessHours && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -9392,7 +9620,7 @@ function IdentityPanel({ model }) {
       /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: "Client Brief" }),
       /* @__PURE__ */ jsx(Card, { withBorder: true, padding: "sm", style: { background: "var(--color-surface)" }, children: /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-wrap", lineHeight: 1.6 }, children: identity.clientBrief }) })
     ] }),
-    /* @__PURE__ */ jsx(AdditionalProperties, { domain: identity, knownKeys: IDENTITY_KNOWN_KEYS })
+    /* @__PURE__ */ jsx(AdditionalProperties, { domain: identity, knownKeys: IDENTITY_KNOWN_KEYS2 })
   ] });
 }
 var SURFACE_TYPE_COLORS = {
@@ -9969,16 +10197,14 @@ var SOURCE_COLORS = {
 function formatSource(source) {
   return source === "legacy-bridge" ? "legacy bridge" : source;
 }
-function OntologyStats({
-  projection
-}) {
+function OntologyStats({ projection }) {
   const primaryStats = [
     "ontology-objects",
     "ontology-links",
     "ontology-actions",
     "ontology-catalogs",
     "ontology-events",
-    "ontology-surfaces"
+    "ontology-endpoints"
   ];
   const optionalStats = [
     "ontology-interfaces",
@@ -10016,9 +10242,24 @@ function MetadataSummary({ item }) {
 function OntologyPanel({ model, domainKey, filterToItemId }) {
   const projection = getKnowledgeOntologyProjection(model);
   const label = getOntologyDomainLabel(domainKey);
-  const items = getPrimaryOntologyItemsForDomain(projection, domainKey).filter(
-    (item) => !filterToItemId || item.id === filterToItemId
-  );
+  const decodedFilterId = filterToItemId ? (() => {
+    try {
+      return decodeURIComponent(filterToItemId);
+    } catch {
+      return filterToItemId;
+    }
+  })() : void 0;
+  const items = getPrimaryOntologyItemsForDomain(projection, domainKey).filter((item) => {
+    if (!decodedFilterId) return true;
+    const decodedItemId = (() => {
+      try {
+        return decodeURIComponent(item.id);
+      } catch {
+        return item.id;
+      }
+    })();
+    return item.id === decodedFilterId || decodedItemId === decodedFilterId;
+  });
   return /* @__PURE__ */ jsxs(Stack, { p: "md", gap: "md", children: [
     /* @__PURE__ */ jsx(
       KnowledgePageHeader,
@@ -10118,7 +10359,7 @@ function DomainPanel({
     case "ontology-value-types":
     case "ontology-properties":
     case "ontology-groups":
-    case "ontology-surfaces":
+    case "ontology-endpoints":
     case "ontology-resources":
       return /* @__PURE__ */ jsx(OntologyPanel, { model, domainKey, filterToItemId });
     default:
@@ -10139,7 +10380,10 @@ function childSummary(child) {
   const count = child.children?.length ?? 0;
   return count > 0 ? `${count} child${count === 1 ? "" : "ren"}` : "No child nodes";
 }
-function GroupOverviewPanel({ node }) {
+function GroupOverviewPanel({
+  node,
+  onNavigateToNode
+}) {
   const children = node.children ?? [];
   const copyCommand = node.value ? getKnowledgeTreeFolderCommand(node.value) : void 0;
   return /* @__PURE__ */ jsxs(Stack, { p: "md", gap: "md", children: [
@@ -10154,13 +10398,38 @@ function GroupOverviewPanel({ node }) {
       }
     ),
     /* @__PURE__ */ jsx(Divider, {}),
-    children.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No child branches available." }) : /* @__PURE__ */ jsx(Stack, { gap: "sm", children: children.map((child) => /* @__PURE__ */ jsx(Card, { withBorder: true, padding: "md", children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "start", gap: "md", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsxs(Stack, { gap: 4, style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx(Text, { fw: 650, size: "sm", lineClamp: 1, children: child.label }),
-        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", lineClamp: 2, children: childSummary(child) })
-      ] }),
-      /* @__PURE__ */ jsx(Badge, { variant: "light", color: "gray", style: { flexShrink: 0 }, children: child.nodeType })
-    ] }) }, child.value ?? child.id ?? `${child.nodeType}:${child.label}`)) })
+    children.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No child branches available." }) : /* @__PURE__ */ jsx(Stack, { gap: "sm", children: children.map((child) => {
+      const routeId = child.value;
+      const navigable = Boolean(routeId && onNavigateToNode);
+      const cardKey = routeId ?? child.id ?? `${child.nodeType}:${child.label}`;
+      const cardBody = /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "start", gap: "md", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Text, { fw: 650, size: "sm", lineClamp: 1, children: child.label }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", lineClamp: 2, children: childSummary(child) })
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { variant: "light", color: "gray", style: { flexShrink: 0 }, children: child.nodeType })
+      ] });
+      if (navigable) {
+        return /* @__PURE__ */ jsx(
+          UnstyledButton,
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: () => onNavigateToNode(routeId),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onNavigateToNode(routeId);
+              }
+            },
+            style: { cursor: "pointer", width: "100%", textAlign: "left", display: "block" },
+            children: /* @__PURE__ */ jsx(Card, { withBorder: true, padding: "md", children: cardBody })
+          },
+          cardKey
+        );
+      }
+      return /* @__PURE__ */ jsx(Card, { withBorder: true, padding: "md", children: cardBody }, cardKey);
+    }) })
   ] });
 }
 function OntologyDescribeView({
@@ -10213,7 +10482,7 @@ function OntologyDescribeView({
 }
 function renderTreeSelection(node, organizationModel, onNavigateToNode) {
   if (node.nodeType === "group") {
-    return /* @__PURE__ */ jsx(GroupOverviewPanel, { node });
+    return /* @__PURE__ */ jsx(GroupOverviewPanel, { node, onNavigateToNode });
   }
   if ((node.nodeType === "domain-collection" || node.nodeType === "domain") && node.domainKey) {
     return /* @__PURE__ */ jsx(DomainPanel, { domainKey: node.domainKey, model: organizationModel, onNavigateToNode });
@@ -10803,7 +11072,7 @@ function DomainPanelDispatcher({
     case "ontology-value-types":
     case "ontology-properties":
     case "ontology-groups":
-    case "ontology-surfaces":
+    case "ontology-endpoints":
     case "ontology-resources":
       return /* @__PURE__ */ jsx(DomainPanelFrame, { children: /* @__PURE__ */ jsx(OntologyPanel, { model, domainKey, filterToItemId }) });
     default: