@manta-eu/react 0.3.0 → 0.5.0

package/src/components/tool-invocation-card/ToolOutputRenderer.tsx

@@ -1,3 +1,4 @@
+import { withChatModeQueryParam } from "@manta-eu/client/shared/chat-manager";
 import { withDatastoreQueryParam } from "@manta-eu/client/shared/datastore-path";
 import { isShowEntitiesResult } from "@manta-eu/client/shared/tools";
 import {
@@ -5,7 +6,7 @@ import {
   type WorkspaceArtifact,
 } from "@manta-eu/client/shared/workspace-artifacts";
 import type { ToolUIPart } from "ai";
-import { useCallback } from "react";
+import { useCallback, useContext } from "react";
 import { match } from "ts-pattern";
 import { FileMessagePart } from "../chat-view/FileMessagePart";
 import { ActionPlanShowcaseCard } from "./ActionPlanShowcaseCard";
@@ -45,6 +46,7 @@ import {
 } from "#components/chart/index";
 import { decodeChartEntities } from "#lib/decode-chart-entities";
 import { cn } from "#lib/utils";
+import { ChatManagerContext } from "#providers/chat-connection-context";
 import { useChatManagerConnection } from "#providers/ChatManagerProvider";
 import { useMantaClient } from "#providers/MantaClientProvider";
 
@@ -129,12 +131,13 @@ function WorkspaceArtifactResultDisplay(props: WorkspaceArtifactResultDisplayPro
   const { result } = props;
 
   const { datastoreId } = useMantaClient();
+  const mode = useContext(ChatManagerContext)?.managerConnection.mode;
 
   return (
     <FileMessagePart
       part={{
         type: "file",
-        url: withDatastoreQueryParam(result.url, datastoreId),
+        url: withChatModeQueryParam(withDatastoreQueryParam(result.url, datastoreId), mode),
         mediaType: result.mediaType,
         filename: result.filename,
       }}

package/src/graph/EntityCard.tsx

@@ -3,6 +3,7 @@ import { type JsonLdGraphDocument } from "@manta-eu/rdf-lib/jsonld";
 import { expandPrefix } from "@manta-eu/rdf-lib/namespaces";
 import { useMemo } from "react";
 import { findDetailViewForTypes } from "./detail-views";
+import { EntityViewWithLinks } from "./EntityViewWithLinks";
 import { rdfGraphToNodesAndEdges } from "./graph-model";
 import { jsonLdToRdfGraph } from "./jsonld-bridge";
 import { GenericView, getEntityView } from "./special-nodes";
@@ -35,7 +36,7 @@ export function EntityCard(props: EntityCardProps) {
 
   const View = node ? getEntityView(node.data.type, node.data.actionShape) : undefined;
 
-  if (node && View) return <View data={node.data} />;
+  if (node && View) return <EntityViewWithLinks view={View} data={node.data} />;
 
   return <GenericView data={node?.data ?? stubNodeData(entityIri)} />;
 }

package/src/graph/EntityViewWithLinks.tsx

@@ -0,0 +1,43 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { uniq } from "ramda";
+import { useMemo } from "react";
+import { type CardLinks, CardLinksProvider } from "./card-links";
+import { shouldHidePreviewField } from "./graph-list-utils";
+import { namedRelations } from "./special-nodes/card-facts";
+import type { EntityView, NodeRelation, RDFNodeData } from "./types";
+import { useInstanceLabels } from "#hooks/use-instance-labels";
+
+export type EntityViewWithLinksProps = { view: EntityView; data: RDFNodeData };
+
+const noRelations: NodeRelation[] = [];
+
+function relationKey(relation: NodeRelation): string {
+  return `${relation.predicate} ${relation.target}`;
+}
+
+// The named records a typed card links to go at the top of its frame.
+export function EntityViewWithLinks(props: EntityViewWithLinksProps) {
+  const { view: View, data } = props;
+
+  const relations = useMemo(
+    () => (data.relations ?? noRelations).filter((relation) => !shouldHidePreviewField("", relation.predicate)),
+    [data.relations],
+  );
+  const targets = useMemo(() => uniq(relations.map((relation) => relation.target)), [relations]);
+  const instanceLabels = useInstanceLabels(targets);
+
+  // Keyed on which links are named, so a card does not rebuild each time another card's names load.
+  const namedKey = namedRelations(relations, instanceLabels).map(relationKey).join("\n");
+
+  const links = useMemo((): CardLinks | null => {
+    const namedKeys = new Set(namedKey.split("\n"));
+    const named = relations.filter((relation) => namedKeys.has(relationKey(relation)));
+    return isPresent(named) ? { relations: named } : null;
+  }, [relations, namedKey]);
+
+  return (
+    <CardLinksProvider links={links}>
+      <View data={data} />
+    </CardLinksProvider>
+  );
+}

package/src/graph/card-links.tsx

@@ -0,0 +1,43 @@
+import type { IRI } from "@manta-eu/rdf-lib/namespaces";
+import { createContext, type ReactNode, useContext } from "react";
+import type { NodeRelation } from "./types";
+
+// The named records a card links to, for the card to list at the top of its frame.
+export type CardLinks = { relations: NodeRelation[] };
+
+// A surface such as chat hands the card the records it links to; the canvas sets none.
+const CardLinksContext = createContext<CardLinks | null>(null);
+
+const noRecords: ReadonlySet<IRI> = new Set();
+
+// The records the card already shows above its content, so a property table leaves them out.
+const LinksShownAboveContext = createContext(noRecords);
+
+export type CardLinksProviderProps = { links: CardLinks | null; children: ReactNode };
+
+export function CardLinksProvider(props: CardLinksProviderProps) {
+  const { links, children } = props;
+
+  return <CardLinksContext.Provider value={links}>{children}</CardLinksContext.Provider>;
+}
+
+export function useCardLinks(): CardLinks | null {
+  return useContext(CardLinksContext);
+}
+
+export type CardContentProviderProps = { shown: ReadonlySet<IRI>; children: ReactNode };
+
+// Wraps a card's own content: nested cards get no links of their own, and tables learn what is shown above.
+export function CardContentProvider(props: CardContentProviderProps) {
+  const { shown, children } = props;
+
+  return (
+    <CardLinksContext.Provider value={null}>
+      <LinksShownAboveContext.Provider value={shown}>{children}</LinksShownAboveContext.Provider>
+    </CardLinksContext.Provider>
+  );
+}
+
+export function useLinksShownAbove(): ReadonlySet<IRI> {
+  return useContext(LinksShownAboveContext);
+}

package/src/graph/nodes/BrandAssetAnalysisView.tsx

@@ -32,6 +32,7 @@ export const BrandAssetAnalysisView = memo(function BrandAssetAnalysisView(props
       icon={ScanEye}
       label={`Asset Analysis: ${displayName}`}
       labelMaxWidth="max-w-140"
+      omitPredicates={listedElsewhere}
       selected={selected}
       ringColor={ringColor}
       onContextMenu={onContextMenu}

package/src/graph/nodes/BrandFontSuggestionView.tsx

@@ -101,6 +101,7 @@ export const BrandFontSuggestionView = memo(function BrandFontSuggestionView(pro
       icon={Type}
       label={`Font Suggestion: ${family}`}
       labelMaxWidth="max-w-140"
+      omitPredicates={listedElsewhere}
       selected={selected}
       ringColor={ringColor}
       onContextMenu={onContextMenu}

package/src/graph/nodes/EntityCardShell.tsx

@@ -1,5 +1,10 @@
+import { isPresent } from "@manta-eu/lib/present";
+import type { IRI } from "@manta-eu/rdf-lib/namespaces";
 import type { LucideIcon } from "lucide-react";
-import { memo, type MouseEvent, type ReactNode } from "react";
+import { memo, type MouseEvent, type ReactNode, useMemo } from "react";
+import { CardContentProvider, useCardLinks } from "../card-links";
+import { RelatedSection } from "../special-nodes/RelatedSection";
+import type { NodeRelation } from "../types";
 import { cn } from "#style";
 
 export type EntityCardShellProps = {
@@ -9,11 +14,31 @@ export type EntityCardShellProps = {
   selected?: boolean;
   ringColor?: string;
   onContextMenu?: (e: MouseEvent) => void;
+  // Fields the card body shows itself (an image, a weights list), so the links section leaves them out too.
+  omitPredicates?: readonly IRI[];
   children: ReactNode;
 };
 
+const noRelations: NodeRelation[] = [];
+
 export const EntityCardShell = memo(function EntityCardShell(props: EntityCardShellProps) {
-  const { icon: Icon, label, labelMaxWidth = "max-w-50", selected = false, ringColor, onContextMenu, children } = props;
+  const {
+    icon: Icon,
+    label,
+    labelMaxWidth = "max-w-50",
+    selected = false,
+    ringColor,
+    onContextMenu,
+    omitPredicates,
+    children,
+  } = props;
+  const links = useCardLinks();
+
+  const listed = useMemo(() => {
+    const omitted = new Set(omitPredicates);
+    return (links?.relations ?? noRelations).filter((relation) => !omitted.has(relation.predicate));
+  }, [links, omitPredicates]);
+  const shown = useMemo(() => new Set(listed.map((relation) => relation.target)), [listed]);
 
   return (
     <div className="w-fit flex flex-col items-start gap-1" onContextMenu={onContextMenu}>
@@ -34,7 +59,16 @@ export const EntityCardShell = memo(function EntityCardShell(props: EntityCardSh
         )}
         style={selected && ringColor ? { boxShadow: `0 0 0 1.5px ${ringColor}` } : undefined}
       >
-        {children}
+        <CardContentProvider shown={shown}>
+          {isPresent(listed) ? (
+            <div className="overflow-hidden rounded-md bg-muted">
+              <RelatedSection relations={listed} />
+              {children}
+            </div>
+          ) : (
+            children
+          )}
+        </CardContentProvider>
       </div>
     </div>
   );

package/src/graph/nodes/NodePropertyTable.tsx

@@ -1,4 +1,7 @@
+import { isPresent } from "@manta-eu/lib/present";
+import type { IRI } from "@manta-eu/rdf-lib/namespaces";
 import { useCallback, useMemo } from "react";
+import { useLinksShownAbove } from "../card-links";
 import { shouldHidePreviewField } from "../graph-list-utils";
 import { AttributeList, useAttributeFacts } from "../special-nodes/AttributeList";
 import type { NodeProperty, NodeRelation } from "../types";
@@ -17,7 +20,7 @@ export type NodePropertyTableProps = {
   // The node's raw values, so a multi-valued property renders as tags rather than a joined string.
   jsonLd?: Record<string, unknown>;
   // Rendered above the table by the card itself, so the table skips them.
-  omitPredicates?: readonly string[];
+  omitPredicates?: readonly IRI[];
   relations?: NodeRelation[];
 };
 
@@ -45,6 +48,17 @@ export function NodePropertyTable(props: NodePropertyTableProps) {
   );
 
   const { facts, previewCount } = useAttributeFacts({ properties, relations: visibleRelations, jsonLd, include });
+  const shownAbove = useLinksShownAbove();
+  const shown = useMemo(
+    () =>
+      facts.flatMap((fact) => {
+        if (!isPresent(fact.entityIris)) return [fact];
+
+        const rest = fact.entityIris.filter((iri) => !shownAbove.has(iri));
+        return isPresent(rest) ? [{ ...fact, entityIris: rest }] : [];
+      }),
+    [facts, shownAbove],
+  );
 
-  return <AttributeList facts={facts} previewCount={previewCount} showAll />;
+  return <AttributeList facts={shown} previewCount={previewCount} showAll />;
 }

package/src/graph/nodes/node-property-display.ts

@@ -1,3 +1,4 @@
+import { isHexColor } from "@manta-eu/lib/color";
 import { formatPercent, parseNumeric } from "../property-formatters";
 
 export type PropertyDisplay =
@@ -9,12 +10,6 @@ export type PropertyDisplay =
   | { kind: "prose"; text: string }
   | { kind: "text"; text: string };
 
-const hexPattern = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
-
-// Shared with the palette swatch: both guard a style sink, so the two must not drift.
-export function isHexColor(value: string): boolean {
-  return hexPattern.test(value);
-}
 const prosePhraseLength = 60;
 
 // Wider than formatDisplayValue's isPercentLabel, which excludes score — merging them would change both.
@@ -36,7 +31,7 @@ export function classifyPropertyDisplay(args: { label: string; formatted: string
     if (values.length > 1) return { kind: "tags", values };
   }
 
-  if (hexPattern.test(formatted)) return { kind: "color", hex: formatted };
+  if (isHexColor(formatted)) return { kind: "color", hex: formatted };
 
   // RDF booleans arrive as the literals "true"/"false" from the graph, as real booleans from fixtures.
   if (raw === true || raw === false) return { kind: "boolean", value: raw };

package/src/graph/special-nodes/AttributeList.tsx

@@ -97,8 +97,10 @@ export function AttributeList(props: AttributeListProps) {
   );
 
   const visibleFacts = searching || expanded ? matchingFacts : facts.slice(0, previewCount);
-  const hasHiddenChips = visibleFacts.some((fact) => visibleChips(fact.entityIris, expanded).hiddenCount > 0);
   const hiddenCount = facts.length - previewCount;
+  const collapsible =
+    hiddenCount > 0 ||
+    facts.slice(0, previewCount).some((fact) => visibleChips(fact.entityIris, false).hiddenCount > 0);
 
   if (!isPresent(facts)) return null;
 
@@ -161,7 +163,7 @@ export function AttributeList(props: AttributeListProps) {
         {searching && !isPresent(visibleFacts) && (
           <span className="typography-tiny py-1 text-muted-foreground">No matching attributes.</span>
         )}
-        {!showAll && (hiddenCount > 0 || hasHiddenChips || expanded) && (
+        {!showAll && collapsible && (
           <NodePropertyExpander
             expanded={expanded}
             collapsedLabel={hiddenCount > 0 ? `Show all ${facts.length}` : "Show all"}

package/src/graph/special-nodes/RelatedSection.tsx

@@ -0,0 +1,29 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { useMemo } from "react";
+import type { NodeProperty, NodeRelation } from "../types";
+import { AttributeList, useAttributeFacts } from "./AttributeList";
+import { singleLinksFirst } from "./card-facts";
+
+export type RelatedSectionProps = { relations: NodeRelation[] };
+
+const noProperties: NodeProperty[] = [];
+const noJsonLd: Record<string, unknown> = {};
+
+export function RelatedSection(props: RelatedSectionProps) {
+  const { relations } = props;
+
+  const { facts, previewCount } = useAttributeFacts({ properties: noProperties, relations, jsonLd: noJsonLd });
+  const ordered = useMemo(() => singleLinksFirst(facts), [facts]);
+
+  if (!isPresent(ordered)) return null;
+
+  return (
+    <div
+      role="group"
+      aria-label="Related records"
+      className="flex max-w-90 flex-col border-b border-muted-border px-3 pb-2 pt-2.5 text-default-foreground"
+    >
+      <AttributeList facts={ordered} previewCount={previewCount} />
+    </div>
+  );
+}

package/src/graph/special-nodes/card-facts.ts

@@ -107,6 +107,19 @@ export function keyWords(key: string): string[] {
     .map((word) => word.toLowerCase());
 }
 
+// Links to records with a name of their own, so unnamed sub-records (an insight's action rows) stay off the card.
+export function namedRelations(relations: NodeRelation[], instanceLabels: Map<string, string | null>): NodeRelation[] {
+  return relations.filter((relation) => isPresent(instanceLabels.get(relation.target)));
+}
+
+// What the record belongs to (one campaign, one account) reads before what it has many of.
+export function singleLinksFirst(facts: CardFact[]): CardFact[] {
+  return [
+    ...facts.filter((fact) => fact.entityIris.length <= 1),
+    ...facts.filter((fact) => fact.entityIris.length > 1),
+  ];
+}
+
 export function relationFacts(
   relations: NodeRelation[],
   terms: Map<string, OntologyTerm>,

package/src/graph/types.ts

@@ -11,7 +11,7 @@ export type NodeProperty = {
 };
 
 // A property whose value is another entity in the graph; the canvas draws it as an edge instead.
-export type NodeRelation = { predicate: string; target: string };
+export type NodeRelation = { predicate: IRI; target: IRI };
 
 export type RDFNodeData = {
   label: string;

package/src/hooks/use-approve-anyway.ts

@@ -1,4 +1,6 @@
 import { useExecuteAgentActionAdditionMutation } from "@manta-eu/client";
+import { entityActionInput } from "@manta-eu/client/shared/action-document";
+import { BrandAssetDecisionSchema } from "@manta-eu/ldo/schemas/brand";
 import { isPresent } from "@manta-eu/lib/present";
 import { isValidFullIri, namespaces } from "@manta-eu/rdf-lib/namespaces";
 import { useQueryClient } from "@tanstack/react-query";
@@ -8,13 +10,12 @@ import { useCallback, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import type { ManualAction } from "./use-manual-actions";
 import { useSparqlSelect } from "./use-sparql-construct";
-import { buildActionDocument, mintSubjectIri } from "#lib/action-document";
+import { mintSubjectIri } from "#lib/action-document";
 import { useMantaClient } from "#providers/MantaClientProvider";
 import { invalidateActionPlanQueries } from "#shared/query-keys";
 
 const df = new DataFactory();
 const assetAnalysis = `${namespaces.brand}AssetAnalysis`;
-const assetDecision = `${namespaces.brand}AssetDecision`;
 const decideAssetShape = `${namespaces.brand}DecideAssetShape`;
 
 export type ApproveAnywayHandle = {
@@ -68,16 +69,12 @@ export function useApproveAnyway(planGraphIri: string): ApproveAnywayHandle {
       if (inFlight.current.has(analysisIri)) return;
       inFlight.current.add(analysisIri);
       setApproving(new Set(inFlight.current));
-      const subjectIri = mintSubjectIri(assetDecision);
-      const properties = buildActionDocument(
-        { subjectIri, rdfType: assetDecision },
-        {
-          [`${namespaces.brand}decisionOnAsset`]: { "@id": analysisIri },
-          [`${namespaces.brand}decision`]: "approved",
-        },
-      );
       void startAddition({
-        input: { subjectIri, rdfType: assetDecision, actionShape: decideAssetShape, properties },
+        input: entityActionInput(BrandAssetDecisionSchema, decideAssetShape, {
+          $id: mintSubjectIri(BrandAssetDecisionSchema["@type"]),
+          decisionOnAsset: analysisIri,
+          decision: "approved",
+        }),
       })
         .then(({ executeActionAddition }) => {
           if (!executeActionAddition.success) throw new Error(executeActionAddition.error ?? "The approval failed");

package/src/ldo-ui.ts

@@ -344,6 +344,7 @@ export {
 export { NodeFrame, type NodeFrameProps } from "./graph/special-nodes/NodeFrame";
 
 export { EntityCard, findEntityNode, type EntityCardProps } from "./graph/EntityCard";
+export { EntityViewWithLinks, type EntityViewWithLinksProps } from "./graph/EntityViewWithLinks";
 export { findDetailViewForTypes, findPluralViewForTypes, type DetailView, type PluralView } from "./graph/detail-views";
 export { EntityStripDisplay, type EntityStripDisplayProps } from "./graph/EntityStripDisplay";
 export { stubNodeData } from "./graph/stub-node";

package/src/lib/chat-types.ts

@@ -1,5 +1,6 @@
 /* eslint-disable import/order -- each type is imported beside the re-export it exists for, which is
    how this file is organized; they are type-only, so the positions have no runtime meaning. */
+import type { ConversationMode } from "@manta-eu/client/shared/chat-manager";
 import type { MantaModelId } from "@manta-eu/client/shared/model";
 import type { ReactNode } from "react";
 import type { Datastore } from "#ldo-ui";
@@ -26,6 +27,21 @@ export type CopilotMenuDefaults = {
 
 export type ChatDraft = { id: string; text: string };
 
+export type ChatStartupReport = {
+  surface: "embedded" | "app";
+  mode: "ticket" | "cookie";
+  openIndex: number;
+  hostTokenMs?: number;
+  ticketMs?: number;
+  ticketAttempts?: number;
+  socketMs: number;
+  socketAttempts: number;
+  chatMountMs: number;
+  socketReadyAtOpen: boolean;
+  firstPaintMs: number;
+  interactiveMs: number;
+};
+
 // NOTE: Adding to this is a breaking change to library clients
 export type AuthenticatedChatProps = {
   datastore?: Datastore;
@@ -39,6 +55,7 @@ export type AuthenticatedChatProps = {
   collapsible?: boolean;
   isCollapsed?: boolean;
   pageContext?: PageContext;
+  mode?: ConversationMode;
   allowedModels?: MantaModelId[];
   initialPrompt?: string;
   initialDraft?: ChatDraft;
@@ -48,6 +65,7 @@ export type AuthenticatedChatProps = {
   assistantIcon?: AssistantIcon;
   mark?: ReactNode;
   renderMenuItems?: (defaults: CopilotMenuDefaults) => ReactNode[];
+  onStartupTiming?: (report: ChatStartupReport) => void;
 };
 
 export type ResolvedChatProps = AuthenticatedChatProps & {