(null);
+ const { entities, isLoading } = useGraphData();
+
+ // Notification when graph loads
+ useEffect(() => {
+ if (!isLoading && entities.length > 0) {
+ toast.success(`Graph loaded: ${entities.length} entities`);
+ }
+ }, [isLoading, entities.length]);
+
+ const handleTabChange = (tab: TabKey) => {
+ setActiveTab(tab);
+ if (tab !== "graph") {
+ setSelectedNode(null);
+ }
+ };
+
+ return (
+
+
+
+ {activeTab === "graph" && (
+
+ )}
+
+ {activeTab === "query" && }
+
+ {activeTab === "explain" && }
+
+ {activeTab === "data" && }
+
+ {activeTab === "ontology" && }
+
+
+
+
+ );
+}
diff --git a/ai-context/trustgraph-templates/src/assets/react.svg b/ai-context/trustgraph-templates/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ai-context/trustgraph-templates/src/components/common/Badge.tsx b/ai-context/trustgraph-templates/src/components/common/Badge.tsx
new file mode 100644
index 00000000..d5a0836e
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/components/common/Badge.tsx
@@ -0,0 +1,39 @@
+interface BadgeProps {
+ children: React.ReactNode;
+ color: string;
+ size?: "small" | "medium";
+ selected?: boolean;
+ onClick?: () => void;
+}
+
+export function Badge({
+ children,
+ color,
+ size = "medium",
+ selected = false,
+ onClick,
+}: BadgeProps) {
+ const isSmall = size === "small";
+
+ return (
+
+ );
+}
diff --git a/ai-context/trustgraph-templates/src/components/common/Card.tsx b/ai-context/trustgraph-templates/src/components/common/Card.tsx
new file mode 100644
index 00000000..89b17156
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/components/common/Card.tsx
@@ -0,0 +1,35 @@
+import { surface, border } from "../../theme";
+
+interface CardProps {
+ children: React.ReactNode;
+ padding?: number | string;
+ borderRadius?: number;
+ borderColor?: string;
+ onClick?: () => void;
+ style?: React.CSSProperties;
+}
+
+export function Card({
+ children,
+ padding = 24,
+ borderRadius = 12,
+ borderColor = border.subtle,
+ onClick,
+ style,
+}: CardProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/ai-context/trustgraph-templates/src/components/common/FilterBar.tsx b/ai-context/trustgraph-templates/src/components/common/FilterBar.tsx
new file mode 100644
index 00000000..01a7f63c
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/components/common/FilterBar.tsx
@@ -0,0 +1,78 @@
+import { FilterButton } from "./FilterButton";
+import { text, border } from "../../theme";
+
+export interface FilterItem {
+ key: string;
+ label: string;
+ icon?: string;
+ color?: string;
+}
+
+interface FilterBarProps {
+ items: FilterItem[];
+ selectedKey: string | null;
+ onSelect: (key: string | null) => void;
+ stats?: string;
+ showAll?: boolean;
+ allLabel?: string;
+ emptyMessage?: string;
+ maxItems?: number;
+}
+
+export function FilterBar({
+ items,
+ selectedKey,
+ onSelect,
+ stats,
+ showAll = true,
+ allLabel = "All",
+ emptyMessage,
+ maxItems = 10,
+}: FilterBarProps) {
+ const displayItems = items.slice(0, maxItems);
+
+ return (
+
+
+ FILTER:
+
+
+ {emptyMessage && items.length === 0 ? (
+
{emptyMessage}
+ ) : (
+ <>
+ {showAll && (
+
onSelect(null)}
+ />
+ )}
+ {displayItems.map((item) => (
+ onSelect(selectedKey === item.key ? null : item.key)}
+ />
+ ))}
+
+ )}
+
+ {stats && (
+
+ {stats}
+
+ )}
+
+
+
+
+
+ TrustGraph
+
+
+ CONTEXT GRAPH DEMO
+
+
+
+
+ {(["graph", "query", "explain", "data", "ontology"] as const).map((tab) => {
+ const labels: Record = {
+ graph: "◈ Context Graph",
+ query: "⚡ Agent Query",
+ explain: "◉ Explain",
+ data: "▤ Table Explorer",
+ ontology: "◇ Ontology",
+ };
+ return (
+
+ );
+ })}
+
+
+ {message || defaultMessage}
+
+ );
+}
diff --git a/ai-context/trustgraph-templates/src/components/common/MessageBubble.tsx b/ai-context/trustgraph-templates/src/components/common/MessageBubble.tsx
new file mode 100644
index 00000000..bccb3c13
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/components/common/MessageBubble.tsx
@@ -0,0 +1,97 @@
+import { semantic, text, surface, border, withGlow } from "../../theme";
+
+export interface Message {
+ role: string;
+ text: string;
+ type?: string;
+}
+
+interface MessageBubbleProps {
+ message: Message;
+}
+
+export function MessageBubble({ message }: MessageBubbleProps) {
+ const isUser = message.role === "human";
+ const messageType = message.type;
+
+ const getTypeStyles = () => {
+ switch (messageType) {
+ case "thinking":
+ return {
+ bg: withGlow(semantic.thinking, 0.08),
+ border: withGlow(semantic.thinking, 0.2),
+ icon: "◈",
+ label: "THINKING",
+ color: semantic.thinking,
+ };
+ case "observation":
+ return {
+ bg: withGlow(semantic.observation, 0.08),
+ border: withGlow(semantic.observation, 0.2),
+ icon: "◉",
+ label: "OBSERVATION",
+ color: semantic.observation,
+ };
+ case "answer":
+ return {
+ bg: withGlow(semantic.answer, 0.08),
+ border: withGlow(semantic.answer, 0.2),
+ icon: "✓",
+ label: "ANSWER",
+ color: semantic.answer,
+ };
+ default:
+ return null;
+ }
+ };
+
+ const typeStyles = getTypeStyles();
+
+ if (isUser) {
+ return (
+
+
+ YOU
+
+
+ {message.text}
+
+
+ {typeStyles && (
+
+ {typeStyles.icon}
+ {typeStyles.label}
+
+ )}
+
+ {message.text}
+
+
+ onChange(e.target.value)}
+ onKeyDown={handleKeyDown}
+ placeholder={placeholder}
+ disabled={isLoading}
+ style={{
+ flex: 1,
+ padding: "12px 16px",
+ borderRadius: 8,
+ border: `1px solid ${border.medium}`,
+ background: surface.card,
+ color: text.primary,
+ fontSize: 14,
+ fontFamily: "'IBM Plex Sans', sans-serif",
+ outline: "none",
+ }}
+ />
+
+
+ );
+}
diff --git a/ai-context/trustgraph-templates/src/components/common/SectionLabel.tsx b/ai-context/trustgraph-templates/src/components/common/SectionLabel.tsx
new file mode 100644
index 00000000..56deb1b9
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/components/common/SectionLabel.tsx
@@ -0,0 +1,22 @@
+import { text } from "../../theme";
+
+interface SectionLabelProps {
+ children: React.ReactNode;
+ marginBottom?: number;
+ marginTop?: number;
+}
+
+export function SectionLabel({ children, marginBottom = 10, marginTop }: SectionLabelProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/ai-context/trustgraph-templates/src/components/common/StatusBar.tsx b/ai-context/trustgraph-templates/src/components/common/StatusBar.tsx
new file mode 100644
index 00000000..c3f23e09
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/components/common/StatusBar.tsx
@@ -0,0 +1,60 @@
+import { useConnectionState } from "@trustgraph/react-provider";
+import { useProgressStateStore } from "@trustgraph/react-state";
+import { semantic, palette, text, border } from "../../theme";
+
+export function StatusBar() {
+ const connectionState = useConnectionState();
+ const activity = useProgressStateStore((state) => state.activity);
+
+ const getStatusDisplay = () => {
+ if (!connectionState) return { color: text.subtle, text: "Initializing..." };
+ switch (connectionState.status) {
+ case "authenticated":
+ return { color: semantic.success, text: "Authenticated" };
+ case "connected":
+ return { color: semantic.success, text: "Connected" };
+ case "unauthenticated":
+ return { color: semantic.info, text: "Connected" };
+ case "connecting":
+ return { color: palette.amber, text: "Connecting..." };
+ case "reconnecting":
+ return { color: semantic.warning, text: `Reconnecting (${connectionState.reconnectAttempt}/${connectionState.maxAttempts})...` };
+ case "failed":
+ return { color: semantic.error, text: "Connection failed" };
+ default:
+ return { color: text.subtle, text: connectionState.status };
+ }
+ };
+
+ const status = getStatusDisplay();
+ const activeActivity = activity.size > 0 ? Array.from(activity)[0] : null;
+
+ return (
+
+
+ {activeActivity ? (
+ <>
+ ◌
+ {activeActivity}...
+
+ ) : (
+ <>
+ ◈
+ Ready
+
+ )}
+
+
+ ● {status.text}
+ |
+ trustgraph.ai
+
+
+
+ {style.icon}
+
+
+ {toast.message}
+
+
+
+ );
+}
+
+export function Toaster() {
+ const toasts = useToastStore((state) => state.toasts);
+ const removeToast = useToastStore((state) => state.removeToast);
+
+ if (toasts.length === 0) return null;
+
+ return (
+ <>
+
+
+ {toasts.map((toast) => (
+ removeToast(toast.id)}
+ />
+ ))}
+
+
+ );
+}
diff --git a/ai-context/trustgraph-templates/src/components/common/Typewriter.tsx b/ai-context/trustgraph-templates/src/components/common/Typewriter.tsx
new file mode 100644
index 00000000..8503deec
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/components/common/Typewriter.tsx
@@ -0,0 +1,37 @@
+import { useState, useEffect, useRef } from "react";
+
+interface TypewriterProps {
+ text: string;
+ speed?: number;
+ onDone?: () => void;
+}
+
+export function Typewriter({ text, speed = 12, onDone }: TypewriterProps) {
+ const [displayed, setDisplayed] = useState("");
+ const idx = useRef(0);
+
+ useEffect(() => {
+ idx.current = 0;
+ setDisplayed("");
+ const interval = setInterval(() => {
+ idx.current++;
+ if (idx.current >= text.length) {
+ setDisplayed(text);
+ clearInterval(interval);
+ onDone?.();
+ } else {
+ setDisplayed(text.slice(0, idx.current));
+ }
+ }, speed);
+ return () => clearInterval(interval);
+ }, [text, speed, onDone]);
+
+ return (
+
+ {displayed}
+
+ ▌
+
+
+ );
+}
diff --git a/ai-context/trustgraph-templates/src/components/common/index.ts b/ai-context/trustgraph-templates/src/components/common/index.ts
new file mode 100644
index 00000000..540ae1f9
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/components/common/index.ts
@@ -0,0 +1,14 @@
+export { SectionLabel } from "./SectionLabel";
+export { FilterButton } from "./FilterButton";
+export { Header } from "./Header";
+export { StatusBar } from "./StatusBar";
+export { Typewriter } from "./Typewriter";
+export { Card } from "./Card";
+export { Badge } from "./Badge";
+export { LoadingState } from "./LoadingState";
+export { Toaster } from "./Toaster";
+export { SearchInput } from "./SearchInput";
+export { FilterBar } from "./FilterBar";
+export type { FilterItem } from "./FilterBar";
+export { MessageBubble } from "./MessageBubble";
+export type { Message } from "./MessageBubble";
diff --git a/ai-context/trustgraph-templates/src/components/graph/ExplainGraph.tsx b/ai-context/trustgraph-templates/src/components/graph/ExplainGraph.tsx
new file mode 100644
index 00000000..8d24510c
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/components/graph/ExplainGraph.tsx
@@ -0,0 +1,451 @@
+import { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import { ZoomControls } from "./ZoomControls";
+import { border, palette, text, withGlow } from "../../theme";
+
+// ── Types ───────────────────────────────────────────────────────────
+
+export interface ExplainGraphNode {
+ id: string;
+ label: string;
+ color?: string;
+}
+
+export interface ExplainGraphEdge {
+ id: string;
+ from: string;
+ to: string;
+ label: string;
+ reasoning?: string;
+}
+
+interface LayoutNode extends ExplainGraphNode {
+ x: number;
+ y: number;
+ vx: number;
+ vy: number;
+}
+
+interface ExplainGraphProps {
+ nodes: ExplainGraphNode[];
+ edges: ExplainGraphEdge[];
+ highlightedNodeIds: string[];
+ highlightedEdgeIds: string[];
+ onNodeClick?: (nodeId: string) => void;
+ onEdgeClick?: (edgeId: string) => void;
+}
+
+// ── Simple force layout ─────────────────────────────────────────────
+
+function computeLayout(
+ nodes: ExplainGraphNode[],
+ edges: ExplainGraphEdge[],
+ width: number,
+ height: number,
+): LayoutNode[] {
+ if (nodes.length === 0 || width === 0) return [];
+
+ const cx = width / 2;
+ const cy = height / 2;
+
+ // Initial positions: circle layout
+ const layoutNodes: LayoutNode[] = nodes.map((n, i) => {
+ const angle = (Math.PI * 2 * i) / nodes.length - Math.PI / 2;
+ const radius = Math.min(cx, cy) * 0.55;
+ return {
+ ...n,
+ x: cx + Math.cos(angle) * radius,
+ y: cy + Math.sin(angle) * radius,
+ vx: 0,
+ vy: 0,
+ };
+ });
+
+ // Run simple force simulation
+ const iterations = 120;
+ const repulsion = 2000;
+ const attraction = 0.005;
+ const damping = 0.85;
+ const centerPull = 0.01;
+
+ const nodeMap = new Map(layoutNodes.map((n, i) => [n.id, i]));
+
+ for (let iter = 0; iter < iterations; iter++) {
+ // Repulsion between all pairs
+ for (let i = 0; i < layoutNodes.length; i++) {
+ for (let j = i + 1; j < layoutNodes.length; j++) {
+ const a = layoutNodes[i];
+ const b = layoutNodes[j];
+ let dx = a.x - b.x;
+ let dy = a.y - b.y;
+ const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+ const force = repulsion / (dist * dist);
+ dx = (dx / dist) * force;
+ dy = (dy / dist) * force;
+ a.vx += dx;
+ a.vy += dy;
+ b.vx -= dx;
+ b.vy -= dy;
+ }
+ }
+
+ // Attraction along edges
+ for (const edge of edges) {
+ const ai = nodeMap.get(edge.from);
+ const bi = nodeMap.get(edge.to);
+ if (ai === undefined || bi === undefined) continue;
+ const a = layoutNodes[ai];
+ const b = layoutNodes[bi];
+ const dx = b.x - a.x;
+ const dy = b.y - a.y;
+ const fx = dx * attraction;
+ const fy = dy * attraction;
+ a.vx += fx;
+ a.vy += fy;
+ b.vx -= fx;
+ b.vy -= fy;
+ }
+
+ // Center pull
+ for (const n of layoutNodes) {
+ n.vx += (cx - n.x) * centerPull;
+ n.vy += (cy - n.y) * centerPull;
+ }
+
+ // Apply velocity
+ for (const n of layoutNodes) {
+ n.vx *= damping;
+ n.vy *= damping;
+ n.x += n.vx;
+ n.y += n.vy;
+
+ // Keep in bounds with padding
+ const pad = 40;
+ n.x = Math.max(pad, Math.min(width - pad, n.x));
+ n.y = Math.max(pad, Math.min(height - pad, n.y));
+ }
+ }
+
+ return layoutNodes;
+}
+
+// ── Component ───────────────────────────────────────────────────────
+
+export function ExplainGraph({
+ nodes,
+ edges,
+ highlightedNodeIds,
+ highlightedEdgeIds,
+ onNodeClick,
+ onEdgeClick,
+}: ExplainGraphProps) {
+ const containerRef = useRef(null);
+ const svgRef = useRef(null);
+ const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+ const [hovered, setHovered] = useState(null);
+
+ // Zoom and pan
+ const [zoom, setZoom] = useState(1);
+ const [pan, setPan] = useState({ x: 0, y: 0 });
+ const isPanningRef = useRef(false);
+ const lastPanPosRef = useRef({ x: 0, y: 0 });
+
+ // Track container size
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!container) return;
+ const ro = new ResizeObserver((entries) => {
+ const entry = entries[0];
+ if (entry) {
+ setContainerSize({ width: entry.contentRect.width, height: entry.contentRect.height });
+ }
+ });
+ ro.observe(container);
+ return () => ro.disconnect();
+ }, []);
+
+ // Layout
+ const layoutNodes = useMemo(
+ () => computeLayout(nodes, edges, containerSize.width, containerSize.height),
+ [nodes, edges, containerSize],
+ );
+
+ const nodeMap = useMemo(
+ () => new Map(layoutNodes.map(n => [n.id, n])),
+ [layoutNodes],
+ );
+
+ // Grid lines
+ const gridLines = useMemo(() => {
+ const lines: React.ReactElement[] = [];
+ const { width, height } = containerSize;
+ if (width === 0) return lines;
+ for (let x = 0; x < width; x += 30) {
+ lines.push();
+ }
+ for (let y = 0; y < height; y += 30) {
+ lines.push();
+ }
+ return lines;
+ }, [containerSize]);
+
+ // Zoom
+ const handleWheel = useCallback((e: React.WheelEvent) => {
+ e.preventDefault();
+ const delta = e.deltaY > 0 ? 0.9 : 1.1;
+ const newZoom = Math.min(4, Math.max(0.25, zoom * delta));
+ const svg = svgRef.current;
+ if (!svg) return;
+ const rect = svg.getBoundingClientRect();
+ const cursorX = e.clientX - rect.left;
+ const cursorY = e.clientY - rect.top;
+ const zoomRatio = newZoom / zoom;
+ setPan(p => ({ x: cursorX - (cursorX - p.x) * zoomRatio, y: cursorY - (cursorY - p.y) * zoomRatio }));
+ setZoom(newZoom);
+ }, [zoom]);
+
+ // Pan
+ const handleMouseDown = useCallback((e: React.MouseEvent) => {
+ if (e.button === 1 || (e.button === 0 && e.shiftKey)) {
+ e.preventDefault();
+ isPanningRef.current = true;
+ lastPanPosRef.current = { x: e.clientX, y: e.clientY };
+ }
+ }, []);
+
+ const handleMouseMove = useCallback((e: React.MouseEvent) => {
+ if (!isPanningRef.current) return;
+ const dx = e.clientX - lastPanPosRef.current.x;
+ const dy = e.clientY - lastPanPosRef.current.y;
+ lastPanPosRef.current = { x: e.clientX, y: e.clientY };
+ setPan(p => ({ x: p.x + dx, y: p.y + dy }));
+ }, []);
+
+ const handleMouseUp = useCallback(() => { isPanningRef.current = false; }, []);
+
+ const handleResetView = useCallback(() => { setZoom(1); setPan({ x: 0, y: 0 }); }, []);
+
+ const hasHighlights = highlightedNodeIds.length > 0 || highlightedEdgeIds.length > 0;
+ const NODE_R = 10;
+
+ if (containerSize.width === 0) {
+ return ;
+ }
+
+ return (
+
+
+
+
setZoom(z => Math.min(4, z * 1.2))}
+ onZoomOut={() => setZoom(z => Math.max(0.25, z / 1.2))}
+ onReset={handleResetView}
+ />
+
+ {/* Empty state */}
+ {nodes.length === 0 && (
+
+ Graph will populate as explain events arrive
+
+ )}
+
+ {/* Tooltip */}
+ {hovered && !hovered.startsWith("edge-") && (() => {
+ const node = nodeMap.get(hovered);
+ if (!node) return null;
+ return (
+
+ );
+ })()}
+
+ {/* Edge tooltip */}
+ {hovered?.startsWith("edge-") && (() => {
+ const edgeId = hovered.slice(5);
+ const edge = edges.find(e => e.id === edgeId);
+ if (!edge) return null;
+ const from = nodeMap.get(edge.from);
+ const to = nodeMap.get(edge.to);
+ if (!from || !to) return null;
+ const mx = ((from.x + to.x) / 2) * zoom + pan.x;
+ const my = ((from.y + to.y) / 2) * zoom + pan.y;
+ return (
+
+
+ {edge.label}
+
+ {edge.reasoning && (
+
+ {edge.reasoning.length > 150 ? edge.reasoning.slice(0, 150) + "..." : edge.reasoning}
+
+ )}
+
+ {/* Layer 1: Static (grid + domain labels) */}
+
+ {/* Layer 2: Edges */}
+
+ {/* Layer 3: Nodes (on top for interaction) */}
+
+
+
setZoom(z => Math.min(4, z * 1.2))}
+ onZoomOut={() => setZoom(z => Math.max(0.25, z / 1.2))}
+ onReset={handleResetView}
+ />
+
+ {/* Tooltip */}
+ {hovered && (() => {
+ const node = nodesRef.current.find((n) => n.id === hovered);
+ if (!node) return null;
+ // Transform node position to screen coordinates
+ const sx = (node.x * zoomRef.current + panRef.current.x) / 2;
+ const sy = (node.y * zoomRef.current + panRef.current.y) / 2;
+ return (
+
+
+ {node.icon} {node.label}
+
+
+ {Object.entries(node.props || {}).map(([k, v]) => (
+
{k}: {String(v)}
+ ))}
+
+
+
+
+
setZoom(z => Math.min(4, z * 1.2))}
+ onZoomOut={() => setZoom(z => Math.max(0.25, z / 1.2))}
+ onReset={handleResetView}
+ />
+
+ {/* Tooltip */}
+ {hovered && (() => {
+ const node = nodes.find((n) => n.id === hovered);
+ if (!node) return null;
+ const { x, y } = getNodePosition(node, time, settled);
+ return (
+
+
+ {node.icon} {node.label}
+
+
+ {Object.entries(node.props || {}).map(([k, v]) => (
+
{k}: {String(v)}
+ ))}
+
+
+
+
+ {ontology[node.domain].label.toUpperCase()} ENTITY
+
+
+
+
+ {node.icon} {node.label}
+
+
+
PROPERTIES
+ {Object.entries(node.props || {}).map(([k, v]) => (
+
+ {propertyLabels[k] || k}
+ {String(v)}
+
+ ))}
+
+
+
RELATIONSHIPS
+ {nodeRelationships.map((r, i) => {
+ const otherId = r.from === node.id ? r.to : r.from;
+ const other = entities.find(e => e.id === otherId);
+ const direction = r.from === node.id ? "→" : "←";
+ return (
+
{ if (other) onNodeSelect(other); }}
+ style={{ marginBottom: 4 }}
+ >
+
+ {direction} {other?.label}
+
+
+ {r.predicate.replace(/_/g, " ")}
+
+
+ );
+ })}
+
+
+
+
+
+
+
+ {/* Zoom indicator */}
+ {zoom !== 1 && (
+
+ {Math.round(zoom * 100)}%
+
+ )}
+
+ );
+}
diff --git a/ai-context/trustgraph-templates/src/components/graph/index.ts b/ai-context/trustgraph-templates/src/components/graph/index.ts
new file mode 100644
index 00000000..6f8ebcaf
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/components/graph/index.ts
@@ -0,0 +1,6 @@
+export { GraphCanvas } from "./GraphCanvas";
+export { GraphCanvasSVG } from "./GraphCanvasSVG";
+export { ExplainGraph } from "./ExplainGraph";
+export type { ExplainGraphNode, ExplainGraphEdge } from "./ExplainGraph";
+export { NodeDetailPanel } from "./NodeDetailPanel";
+export { ZoomControls } from "./ZoomControls";
diff --git a/ai-context/trustgraph-templates/src/components/index.ts b/ai-context/trustgraph-templates/src/components/index.ts
new file mode 100644
index 00000000..aca26425
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/components/index.ts
@@ -0,0 +1,7 @@
+// Common shared components
+export { SectionLabel, FilterButton, Header, StatusBar, Typewriter, Card, Badge, LoadingState, Toaster, SearchInput, FilterBar, MessageBubble } from "./common";
+export type { FilterItem, Message } from "./common";
+
+// Graph visualization components
+export { GraphCanvas, GraphCanvasSVG, ExplainGraph, NodeDetailPanel, ZoomControls } from "./graph";
+export type { ExplainGraphNode, ExplainGraphEdge } from "./graph";
diff --git a/ai-context/trustgraph-templates/src/config.ts b/ai-context/trustgraph-templates/src/config.ts
new file mode 100644
index 00000000..1a831d15
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/config.ts
@@ -0,0 +1,2 @@
+// TrustGraph collection identifier
+export const COLLECTION = "default";
diff --git a/ai-context/trustgraph-templates/src/index.css b/ai-context/trustgraph-templates/src/index.css
new file mode 100644
index 00000000..57ced3fc
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/index.css
@@ -0,0 +1,18 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html, body, #root {
+ width: 100%;
+ height: 100%;
+ background: #0A0A0F;
+}
+
+body {
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
diff --git a/ai-context/trustgraph-templates/src/main.tsx b/ai-context/trustgraph-templates/src/main.tsx
new file mode 100644
index 00000000..9f851904
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/main.tsx
@@ -0,0 +1,29 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { SocketProvider } from '@trustgraph/react-provider'
+import { NotificationProvider, NotificationHandler } from '@trustgraph/react-state'
+import { toast } from './state'
+import './index.css'
+import App from './App'
+
+const queryClient = new QueryClient()
+
+const notificationHandler: NotificationHandler = {
+ success: (message: string) => toast.success(message),
+ error: (message: string) => toast.error(message),
+ warning: (message: string) => toast.warning(message),
+ info: (message: string) => toast.info(message),
+}
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+
+
+
+
+
+ ,
+)
diff --git a/ai-context/trustgraph-templates/src/pages/DataView.tsx b/ai-context/trustgraph-templates/src/pages/DataView.tsx
new file mode 100644
index 00000000..58e355e7
--- /dev/null
+++ b/ai-context/trustgraph-templates/src/pages/DataView.tsx
@@ -0,0 +1,393 @@
+import { useState, useCallback, useMemo } from "react";
+import { SectionLabel, Card, LoadingState, SearchInput, FilterBar } from "../components";
+import type { FilterItem } from "../components";
+import { useSchemas, useEmbeddings, useRowEmbeddingsQuery, useRowsQuery } from "@trustgraph/react-state";
+import { COLLECTION } from "../config";
+import { semantic, palette, text, border, surface } from "../theme";
+
+// Schema field type
+interface SchemaField {
+ name: string;
+ type: string;
+ description?: string;
+}
+
+// Schema type based on what useSchemas returns
+interface SchemaData {
+ name: string;
+ description?: string;
+ fields?: SchemaField[];
+ indexes?: { name: string; fields: string[] }[];
+}
+
+interface SchemaInfo {
+ key: string;
+ name: string;
+ description?: string;
+ fields: SchemaField[];
+ indexes: { name: string; fields: string[] }[];
+}
+
+// Type for accumulated results with schema info and row data
+interface AccumulatedMatch {
+ schemaKey: string;
+ index_name: string;
+ index_value: string[];
+ text: string;
+ score: number;
+ rowData?: Record;
+}
+
+export function DataView() {
+ // Input state
+ const [searchTerm, setSearchTerm] = useState("");
+
+ // Filter state (display only - doesn't trigger re-fetch)
+ const [selectedSchema, setSelectedSchema] = useState(null);
+
+ // Results state
+ const [allMatches, setAllMatches] = useState([]);
+ const [isSearching, setIsSearching] = useState(false);
+ const [hasSearched, setHasSearched] = useState(false);
+
+ // Fetch schemas
+ const { schemas: rawSchemas, schemasLoading, schemasError } = useSchemas();
+
+ // Embeddings hook - we'll use refetch for manual triggering
+ const [embeddingsTerm, setEmbeddingsTerm] = useState("");
+ const { embeddings, isLoading: embeddingsLoading, refetch: _refetchEmbeddings } = useEmbeddings({
+ flow: "default",
+ term: embeddingsTerm,
+ });
+
+ // Row embeddings query
+ const { executeQueryAsync } = useRowEmbeddingsQuery({ flow: "default" });
+
+ // Rows query for fetching full row data
+ const { executeQueryAsync: executeRowsQueryAsync } = useRowsQuery({ flow: "default" });
+
+ // Parse schemas into usable format
+ const schemas: SchemaInfo[] = useMemo(() => {
+ return (rawSchemas || []).map((s: unknown, idx: number) => {
+ if (Array.isArray(s)) {
+ const schemaData = s[1] as SchemaData | undefined;
+ return {
+ key: String(s[0]),
+ name: schemaData?.name || String(s[0]),
+ description: schemaData?.description,
+ fields: schemaData?.fields || [],
+ indexes: schemaData?.indexes || [],
+ };
+ }
+ const schemaObj = s as SchemaData & { key?: string };
+ return {
+ key: schemaObj.key || schemaObj.name || `schema-${idx}`,
+ name: schemaObj.name || `Schema ${idx}`,
+ description: schemaObj.description,
+ fields: schemaObj.fields || [],
+ indexes: schemaObj.indexes || [],
+ };
+ });
+ }, [rawSchemas]);
+
+ // Build GraphQL query for a schema
+ const buildGraphQLQuery = useCallback((schema: SchemaInfo) => {
+ const gqlName = schema.key.replace(/-/g, '_');
+ const fieldNames = schema.fields.map(f => f.name).join('\n ');
+ return `query { ${gqlName} { ${fieldNames} } }`;
+ }, []);
+
+ // Core search function - searches ALL schemas, stores ALL results
+ const performSearch = useCallback(async (vectors: number[][]) => {
+ try {
+ // Always search ALL schemas
+ const embeddingsResults = await Promise.all(
+ schemas.map(async (schema) => {
+ try {
+ const matches = await executeQueryAsync({
+ vectors,
+ schemaName: schema.key,
+ collection: COLLECTION,
+ limit: 10,
+ });
+ return matches.map(m => ({ ...m, schemaKey: schema.key }));
+ } catch {
+ return [];
+ }
+ })
+ );
+
+ const flatMatches = embeddingsResults.flat();
+
+ // Deduplicate
+ const seen = new Set();
+ const uniqueMatches = flatMatches.filter(match => {
+ const key = `${match.schemaKey}:${match.index_value.join(',')}`;
+ if (seen.has(key)) return false;
+ seen.add(key);
+ return true;
+ });
+
+ // Fetch full row data for schemas with matches
+ const schemaKeysWithMatches = [...new Set(uniqueMatches.map(m => m.schemaKey))];
+ const rowDataBySchema: Record[]> = {};
+
+ await Promise.all(
+ schemaKeysWithMatches.map(async (schemaKey) => {
+ const schema = schemas.find(s => s.key === schemaKey);
+ if (!schema || schema.fields.length === 0) return;
+
+ try {
+ const query = buildGraphQLQuery(schema);
+ const result = await executeRowsQueryAsync({ query, collection: COLLECTION });
+ const gqlName = schemaKey.replace(/-/g, '_');
+ const rows = (result?.data as Record)?.[gqlName] || [];
+ rowDataBySchema[schemaKey] = rows as Record[];
+ } catch (err) {
+ console.error(`Failed to fetch rows for ${schemaKey}:`, err);
+ }
+ })
+ );
+
+ // Match row data to embeddings results
+ const matchesWithRowData = uniqueMatches.map(match => {
+ const rows = rowDataBySchema[match.schemaKey] || [];
+ const indexFields = match.index_name.split('.');
+ const indexFieldName = indexFields[indexFields.length - 1];
+
+ const matchedRow = rows.find(row => {
+ const rowValue = row[indexFieldName];
+ return match.index_value.some(iv =>
+ String(rowValue).toLowerCase() === iv.toLowerCase()
+ );
+ });
+
+ return { ...match, rowData: matchedRow };
+ });
+
+ setAllMatches(matchesWithRowData);
+ setHasSearched(true);
+ } finally {
+ setIsSearching(false);
+ }
+ }, [schemas, executeQueryAsync, executeRowsQueryAsync, buildGraphQLQuery]);
+
+ // Handle search button click
+ const handleSearch = useCallback(async () => {
+ const term = searchTerm.trim();
+ if (!term) return;
+
+ setIsSearching(true);
+ setAllMatches([]);
+
+ // If same term, use refetch; otherwise set new term
+ if (term === embeddingsTerm && embeddings && embeddings.length > 0) {
+ // Same term - we already have embeddings, just re-run the search
+ await performSearch(embeddings);
+ } else {
+ // New term - update embeddings term and wait for it
+ setEmbeddingsTerm(term);
+ }
+ }, [searchTerm, embeddingsTerm, embeddings, performSearch]);
+
+ // When embeddings become available for a new term, run the search
+ // This only triggers when embeddingsTerm changes and embeddings load
+ const prevEmbeddingsTermRef = useMemo(() => ({ current: "" }), []);
+
+ if (
+ isSearching &&
+ embeddingsTerm &&
+ embeddings &&
+ embeddings.length > 0 &&
+ !embeddingsLoading &&
+ prevEmbeddingsTermRef.current !== embeddingsTerm
+ ) {
+ prevEmbeddingsTermRef.current = embeddingsTerm;
+ performSearch(embeddings);
+ }
+
+ // Filter results for display (doesn't affect stored data)
+ const displayMatches = useMemo(() => {
+ if (!selectedSchema) return allMatches;
+ return allMatches.filter(m => m.schemaKey === selectedSchema);
+ }, [allMatches, selectedSchema]);
+
+ // Group filtered matches by schema for display
+ const matchesBySchema = useMemo(() => {
+ return displayMatches.reduce((acc, match) => {
+ if (!acc[match.schemaKey]) {
+ acc[match.schemaKey] = [];
+ }
+ acc[match.schemaKey].push(match);
+ return acc;
+ }, {} as Record);
+ }, [displayMatches]);
+
+ if (schemasLoading) {
+ return ;
+ }
+
+ if (schemasError) {
+ return ;
+ }
+
+ // Build filter items from schemas
+ const filterItems: FilterItem[] = schemas.slice(0, 10).map((schema) => ({
+ key: schema.key,
+ label: schema.name,
+ }));
+
+ const filterStats = selectedSchema
+ ? `${displayMatches.length} of ${allMatches.length} results`
+ : `${allMatches.length} results`;
+
+ return (
+
+ {/* Schema Filter Bar */}
+
+
+ {/* Search Input */}
+
+ SEARCH DATA
+
+
+
+ {/* Results Area */}
+
+ {!hasSearched && !isSearching ? (
+
+ Enter a search term to find data across tables.
+
+ ) : isSearching ? (
+
+ Searching...
+
+ ) : displayMatches.length === 0 ? (
+
+ {selectedSchema ? "No matches in this schema. Try selecting 'All'." : "No matches found."}
+
+ ) : (
+
+ {Object.entries(matchesBySchema).map(([schemaKey, schemaMatches]) => {
+ if (!schemaMatches || schemaMatches.length === 0) return null;
+ const schema = schemas.find(s => s.key === schemaKey);
+
+ return (
+
+ {/* Table Header */}
+
+
+ ▤ {schema?.name || schemaKey}
+
+
+ {schemaMatches.length} matches
+
+
+
+ {/* Results List */}
+
+ {schemaMatches.map((match, idx) => (
+
{
+ e.currentTarget.style.background = surface.card;
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.background = "transparent";
+ }}
+ >
+ {match.rowData ? (
+
+ {Object.entries(match.rowData).map(([key, value]) => (
+
+
+ {key}
+
+
+ {String(value ?? "")}
+
+
+ ))}
+
+ ) : (
+
+ {match.text}
+
+ )}
+
+
+ 0.8 ? semantic.success : match.score > 0.5 ? palette.amber : text.subtle,
+ }}>
+ {(match.score * 100).toFixed(1)}% match
+
+
+
+ ))}
+
+ );
+ })}
+
+ )}
+
+
>
+ const oTerm: Term = (edge.o.startsWith("http") || edge.o.startsWith("urn:"))
+ ? { t: "i", i: edge.o }
+ : { t: "l", v: edge.o };
+
+ const containsTriples = await api.triplesQuery(
+ undefined,
+ { t: "i", i: TG_CONTAINS },
+ {
+ t: "t",
+ tr: {
+ s: { t: "i", i: edge.s },
+ p: { t: "i", i: edge.p },
+ o: oTerm,
+ },
+ },
+ 10,
+ COLLECTION,
+ );
+
+ // For each subgraph, follow wasDerivedFrom to sources
+ const chains: ProvenanceChain[] = [];
+ for (const t of containsTriples) {
+ const subgraphUri = t.s.t === "i" ? t.s.i : "";
+ if (!subgraphUri) continue;
+
+ const derivedTriples = await api.triplesQuery(
+ { t: "i", i: subgraphUri },
+ { t: "i", i: PROV_WAS_DERIVED_FROM },
+ undefined,
+ 10,
+ COLLECTION,
+ );
+
+ for (const dt of derivedTriples) {
+ const sourceUri = objValue(dt);
+ if (sourceUri) {
+ const chain = await traceProvenanceChain(api, sourceUri, labelCache);
+ chains.push(chain);
+ }
+ }
+ }
+
+ return chains;
+}
+
+// ── Parse basic event data (synchronous, from already-fetched triples) ──
+
+function parseBasicEventData(eventType: string, triples: Triple[]): EventData {
+ switch (eventType) {
+ case "question": {
+ const data: QuestionData = {};
+ for (const t of triples) {
+ const p = predIri(t);
+ if (p === TG_QUERY) data.query = objValue(t);
+ if (p === PROV_STARTED_AT_TIME) data.timestamp = objValue(t);
+ }
+ return data;
+ }
+
+ case "grounding": {
+ const concepts: string[] = [];
+ for (const t of triples) {
+ if (predIri(t) === TG_CONCEPT) {
+ const v = objValue(t);
+ if (v) concepts.push(v);
+ }
+ }
+ return { concepts } as GroundingData;
+ }
+
+ case "exploration": {
+ const data: ExplorationData = { entities: [] };
+ for (const t of triples) {
+ const p = predIri(t);
+ if (p === TG_EDGE_COUNT) data.edgeCount = objValue(t);
+ if (p === TG_CHUNK_COUNT) data.chunkCount = objValue(t);
+ if (p === TG_ENTITY) {
+ const uri = objValue(t);
+ if (uri) data.entities.push(uri);
+ }
+ }
+ return data;
+ }
+
+ case "focus": {
+ const edgeSelUris: string[] = [];
+ for (const t of triples) {
+ if (predIri(t) === TG_SELECTED_EDGE) {
+ const uri = objValue(t);
+ if (uri) edgeSelUris.push(uri);
+ }
+ }
+ return {
+ edgeSelections: edgeSelUris.map(uri => ({ edgeUri: uri })),
+ } as FocusData;
+ }
+
+ case "synthesis": {
+ const data: SynthesisData = {};
+ for (const t of triples) {
+ if (predIri(t) === TG_CONTENT) {
+ data.contentLength = objValue(t).length;
+ }
+ }
+ return data;
+ }
+
+ case "analysis": {
+ const data: AnalysisData = {};
+ for (const t of triples) {
+ const p = predIri(t);
+ if (p === TG_ACTION) data.action = objValue(t);
+ if (p === TG_ARGUMENTS) data.arguments = objValue(t);
+ if (p === TG_THOUGHT) data.thoughtUri = objValue(t);
+ if (p === TG_OBSERVATION) data.observationUri = objValue(t);
+ }
+ return data;
+ }
+
+ case "conclusion": {
+ const data: ConclusionData = {};
+ for (const t of triples) {
+ if (predIri(t) === TG_DOCUMENT) data.documentUri = objValue(t);
+ }
+ return data;
+ }
+
+ case "reflection": {
+ const data: ReflectionData = {};
+ for (const t of triples) {
+ if (predIri(t) === TG_DOCUMENT) data.documentUri = objValue(t);
+ }
+ return data;
+ }
+
+ default:
+ return {};
+ }
+}
+
+// ── Enrich event data (async — labels, edge details, provenance) ────
+
+async function enrichEventData(
+ api: ReturnType,
+ eventType: string,
+ _triples: Triple[],
+ basicData: EventData,
+ labelCache: Map,
+ explainGraph: string,
+): Promise {
+ switch (eventType) {
+ case "exploration": {
+ const data = { ...(basicData as ExplorationData) };
+ if (data.entities.length > 0) {
+ data.entityLabels = await Promise.all(
+ data.entities.map(uri => resolveLabel(api, uri, labelCache))
+ );
+ }
+ return data;
+ }
+
+ case "focus": {
+ const basic = basicData as FocusData;
+ const edgeSelections = await Promise.all(basic.edgeSelections.map(async (basicSel) => {
+ const edgeTriples = await queryTriples(
+ api, basicSel.edgeUri, undefined, 100, COLLECTION, explainGraph,
+ );
+
+ const sel: EdgeSelection = { edgeUri: basicSel.edgeUri };
+ for (const et of edgeTriples) {
+ const p = predIri(et);
+ if (p === TG_EDGE) sel.edge = objQuotedTriple(et) || undefined;
+ if (p === TG_REASONING) sel.reasoning = objValue(et);
+ }
+
+ if (sel.edge) {
+ const [labels, sources] = await Promise.all([
+ Promise.all([
+ resolveLabel(api, sel.edge.s, labelCache),
+ resolveLabel(api, sel.edge.p, labelCache),
+ resolveLabel(api, sel.edge.o, labelCache),
+ ]),
+ queryEdgeProvenance(api, sel.edge, labelCache),
+ ]);
+ sel.edgeLabels = { s: labels[0], p: labels[1], o: labels[2] };
+ sel.sources = sources;
+ }
+
+ return sel;
+ }));
+
+ return { edgeSelections } as FocusData;
+ }
+
+ default:
+ return basicData;
+ }
+}
+
+// ── Component ───────────────────────────────────────────────────────
+
+type QueryMode = "graph-rag" | "doc-rag" | "agent";
+
+const queryModeLabels: Record = {
+ "graph-rag": "Graph RAG",
+ "doc-rag": "Doc RAG",
+ "agent": "Agent",
+};
+
+export function ExplainView() {
+ const [input, setInput] = useState("");
+ const [queryMode, setQueryMode] = useState("graph-rag");
+ const [response, setResponse] = useState("");
+ const [agentMessages, setAgentMessages] = useState<{ type: string; text: string; done?: boolean }[]>([]);
+ const [isQuerying, setIsQuerying] = useState(false);
+ const [explainNodes, setExplainNodes] = useState([]);
+ const [error, setError] = useState(null);
+ const [highlightedNodeIds, setHighlightedNodeIds] = useState([]);
+ const [highlightedEdgeIds, setHighlightedEdgeIds] = useState([]);
+ const [sourcePanel, setSourcePanel] = useState(null);
+ const scrollRef = useRef(null);
+ const explainScrollRef = useRef(null);
+ const labelCacheRef = useRef(new Map());
+
+ const { graphRag, documentRag, agent } = useInference({});
+ const socket = useSocket();
+
+ useEffect(() => {
+ scrollRef.current?.scrollIntoView({ behavior: "smooth" });
+ }, [response]);
+
+ useEffect(() => {
+ explainScrollRef.current?.scrollIntoView({ behavior: "smooth" });
+ }, [explainNodes]);
+
+ // Fetch event data when new nodes arrive
+ // Use a ref to access current nodes without re-rendering
+ const nodesRef = useRef(explainNodes);
+ nodesRef.current = explainNodes;
+
+ const fetchNode = useCallback(async (explainId: string) => {
+ setExplainNodes(prev => prev.map(n =>
+ n.explainId === explainId ? { ...n, fetching: true } : n
+ ));
+
+ try {
+ const api = socket.flow("default");
+ const node = nodesRef.current.find(n => n.explainId === explainId);
+ if (!node) return;
+
+ const updateNode = (updates: Partial) => {
+ setExplainNodes(prev => prev.map(n =>
+ n.explainId === explainId ? { ...n, ...updates } : n
+ ));
+ };
+
+ // Phase 1: Fetch event triples with backoff until settled.
+ // These are eventually consistent — render progressively as they arrive.
+ let latestEventType = "unknown";
+ let latestBasicData: EventData = {};
+
+ const settledTriples = await queryTriplesUntilSettled(
+ api, node.explainId,
+ (triples) => {
+ latestEventType = getEventTypeFromTriples(triples);
+ latestBasicData = parseBasicEventData(latestEventType, triples);
+ updateNode({ eventType: latestEventType, data: latestBasicData, fetched: true, fetching: false });
+ },
+ 100, COLLECTION, node.explainGraph,
+ );
+
+ if (settledTriples.length === 0) {
+ updateNode({ fetched: true, fetching: false });
+ return;
+ }
+
+ // Phase 2: Enrich with KG lookups (labels, edge details, provenance).
+ // These reference known-to-exist data — no retry needed, just fetch once.
+ const enriched = await enrichEventData(api, latestEventType, settledTriples, latestBasicData, labelCacheRef.current, node.explainGraph);
+ if (enriched !== latestBasicData) {
+ updateNode({ data: enriched });
+ }
+ } catch (err) {
+ setExplainNodes(prev => prev.map(n =>
+ n.explainId === explainId
+ ? { ...n, error: String(err), fetching: false }
+ : n
+ ));
+ }
+ }, [socket]);
+
+ useEffect(() => {
+ for (const node of explainNodes) {
+ if (!node.fetched && !node.fetching && !node.error) {
+ fetchNode(node.explainId);
+ }
+ }
+ }, [explainNodes, fetchNode]);
+
+ const addExplainEvent = useCallback((event: ExplainEvent) => {
+ setExplainNodes(prev => {
+ if (prev.some(n => n.explainId === event.explainId)) return prev;
+ return [...prev, {
+ explainId: event.explainId,
+ explainGraph: event.explainGraph,
+ eventType: "unknown",
+ fetched: false,
+ fetching: false,
+ }];
+ });
+ }, []);
+
+ const handleSubmit = useCallback(async (query: string) => {
+ if (!query.trim() || isQuerying) return;
+
+ setIsQuerying(true);
+ setResponse("");
+ setAgentMessages([]);
+ setExplainNodes([]);
+ setHighlightedNodeIds([]);
+ setHighlightedEdgeIds([]);
+ setSourcePanel(null);
+ setError(null);
+ setInput("");
+ labelCacheRef.current.clear();
+
+ const trimmed = query.trim();
+
+ try {
+ switch (queryMode) {
+ case "graph-rag": {
+ await graphRag({
+ input: trimmed,
+ collection: COLLECTION,
+ options: { maxSubgraphSize: 150 },
+ callbacks: {
+ onChunk: (chunk: string) => setResponse(prev => prev + chunk),
+ onExplain: addExplainEvent,
+ onError: (err: string) => setError(err),
+ },
+ });
+ break;
+ }
+
+ case "doc-rag": {
+ await documentRag({
+ input: trimmed,
+ collection: COLLECTION,
+ callbacks: {
+ onChunk: (chunk: string) => setResponse(prev => prev + chunk),
+ onExplain: addExplainEvent,
+ onError: (err: string) => setError(err),
+ },
+ });
+ break;
+ }
+
+ case "agent": {
+ // Track current streaming message per type
+ const accum: Record = {};
+
+ const appendChunk = (type: string, chunk: string, complete?: boolean) => {
+ accum[type] = (accum[type] || "") + chunk;
+ const currentText = accum[type];
+ setAgentMessages(prev => {
+ // Find existing in-progress message of this type at end
+ const lastIdx = prev.length - 1;
+ if (lastIdx >= 0 && prev[lastIdx].type === type && !prev[lastIdx].done) {
+ const updated = [...prev];
+ updated[lastIdx] = { type, text: currentText, done: !!complete };
+ return updated;
+ }
+ // New message
+ return [...prev, { type, text: currentText, done: !!complete }];
+ });
+ if (complete) {
+ accum[type] = "";
+ }
+ };
+
+ await agent({
+ input: trimmed,
+ callbacks: {
+ onThink: (chunk: string, complete?: boolean) => appendChunk("thinking", chunk, complete),
+ onObserve: (chunk: string, complete?: boolean) => appendChunk("observation", chunk, complete),
+ onAnswer: (chunk: string, complete?: boolean) => appendChunk("answer", chunk, complete),
+ onExplain: addExplainEvent,
+ onError: (err: string) => setError(err),
+ },
+ });
+ break;
+ }
+ }
+ } catch (err) {
+ setError(String(err));
+ } finally {
+ setIsQuerying(false);
+ }
+ }, [graphRag, documentRag, agent, queryMode, isQuerying, addExplainEvent]);
+
+ // ── Derive graph nodes and edges from explain events ──────────────
+ const { graphNodes, graphEdges } = useMemo(() => {
+ const nodeMap = new Map();
+ const edgeList: ExplainGraphEdge[] = [];
+
+ for (const node of explainNodes) {
+ if (!node.fetched || !node.data) continue;
+
+ if (node.eventType === "exploration") {
+ const d = node.data as ExplorationData;
+ const labels = d.entityLabels || [];
+ d.entities.forEach((uri, i) => {
+ if (!nodeMap.has(uri)) {
+ nodeMap.set(uri, { id: uri, label: labels[i] || shortUri(uri), color: palette.blue });
+ }
+ });
+ }
+
+ if (node.eventType === "focus") {
+ const d = node.data as FocusData;
+ for (const sel of d.edgeSelections) {
+ if (!sel.edge) continue;
+ const { s, p, o } = sel.edge;
+ const sLabel = sel.edgeLabels?.s || shortUri(s);
+ const pLabel = sel.edgeLabels?.p || shortUri(p);
+ const oLabel = sel.edgeLabels?.o || shortUri(o);
+
+ // Ensure nodes exist
+ if (!nodeMap.has(s)) nodeMap.set(s, { id: s, label: sLabel, color: palette.pink });
+ if (!nodeMap.has(o)) nodeMap.set(o, { id: o, label: oLabel, color: palette.pink });
+
+ edgeList.push({
+ id: sel.edgeUri,
+ from: s,
+ to: o,
+ label: pLabel,
+ reasoning: sel.reasoning,
+ });
+ }
+ }
+ }
+
+ return { graphNodes: Array.from(nodeMap.values()), graphEdges: edgeList };
+ }, [explainNodes]);
+
+ // ── Entity/edge click → neighbourhood highlight on graph ─────────
+ const handleEntityClick = useCallback((entityUri: string) => {
+ // Highlight this node + connected edges + neighbour nodes
+ const connectedEdges = graphEdges.filter(e => e.from === entityUri || e.to === entityUri);
+ const neighbourIds = new Set([entityUri]);
+ const edgeIds: string[] = [];
+ for (const e of connectedEdges) {
+ edgeIds.push(e.id);
+ neighbourIds.add(e.from);
+ neighbourIds.add(e.to);
+ }
+ setHighlightedNodeIds(Array.from(neighbourIds));
+ setHighlightedEdgeIds(edgeIds);
+ }, [graphEdges]);
+
+ const handleEdgeClick = useCallback((sel: EdgeSelection) => {
+ // Highlight this edge + its two endpoint nodes
+ const nodeIds: string[] = [];
+ if (sel.edge) {
+ nodeIds.push(sel.edge.s, sel.edge.o);
+ }
+ setHighlightedNodeIds(nodeIds);
+ setHighlightedEdgeIds([sel.edgeUri]);
+ }, []);
+
+ const handleSourceClick = useCallback((source: ProvenanceChain) => {
+ // chain[0] = chunk (closest to edge), chain[last] = root document
+ const chunkNode = source.chain[0];
+ const docNode = source.chain[source.chain.length - 1];
+ if (!chunkNode || !docNode) return;
+
+ // Same chunk — ignore (use the × button to close)
+ if (sourcePanel?.chunkUri === chunkNode.uri) return;
+
+ setSourcePanel({
+ chunkUri: chunkNode.uri,
+ documentUri: docNode.uri,
+ loading: true,
+ });
+
+ const librarian = socket.librarian();
+
+ // Fetch parent document metadata (title, tags) from librarian
+ librarian.getDocumentMetadata(docNode.uri).then(meta => {
+ setSourcePanel(prev => prev?.chunkUri === chunkNode.uri
+ ? { ...prev, documentTitle: meta?.title, documentTags: meta?.tags }
+ : prev
+ );
+ }).catch(() => {
+ // Metadata not available — that's OK
+ });
+
+ // The chunk URI is itself a document ID in the librarian — stream it directly
+ let chunkText = "";
+ librarian.streamDocument(
+ chunkNode.uri,
+ (content, _chunkIndex, _totalChunks, complete) => {
+ try {
+ chunkText += atob(content);
+ } catch {
+ chunkText += content;
+ }
+ if (complete) {
+ setSourcePanel(prev => prev?.chunkUri === chunkNode.uri
+ ? { ...prev, chunkText, loading: false }
+ : prev
+ );
+ }
+ },
+ (err) => {
+ setSourcePanel(prev => prev?.chunkUri === chunkNode.uri
+ ? { ...prev, loading: false, error: err }
+ : prev
+ );
+ },
+ );
+ }, [socket, sourcePanel?.chunkUri]);
+
+ return (
+
+ {/* LHS: Query + Response */}
+
+
+
{queryModeLabels[queryMode].toUpperCase()} QUERY
+
+ {(["graph-rag", "doc-rag", "agent"] as QueryMode[]).map(mode => (
+
+ ))}
+
+
handleSubmit(input)}
+ placeholder="Ask a question..."
+ buttonText="Query"
+ isLoading={isQuerying}
+ buttonColor={palette.cyan}
+ />
+
+
+
+ {error && (
+
+ )}
+
+ {!response && !isQuerying && !error && agentMessages.length === 0 && (
+
+ Ask a question to see {queryModeLabels[queryMode]} in action with live explainability.
+
+ )}
+
+ {/* Streaming response for graph-rag and doc-rag */}
+ {(response || (isQuerying && queryMode !== "agent")) && (
+
+ {response && (
+
+
+ ✓ RESPONSE
+
+
{response}
+
+ )}
+ {isQuerying && (
+
+ {response ? "Streaming..." : "Processing query..."}
+
+ )}
+
+ )}
+
+ {/* Agent messages */}
+ {queryMode === "agent" && agentMessages.length > 0 && (
+
+ {agentMessages.map((msg, i) => {
+ const colors: Record
= {
+ thinking: palette.purple,
+ observation: palette.blue,
+ answer: palette.emerald,
+ };
+ const color = colors[msg.type] || text.muted;
+ return (
+
+
+ {msg.type}
+
+
{msg.text}
+
+ )}
+
+ {queryMode === "agent" && isQuerying && agentMessages.length === 0 && (
+
+ Agent is working...
+
+ )}
+
+
+
+
+ {/* Source text panel — shown when a provenance link is clicked */}
+ {sourcePanel && (
+
+ {/* Header with document metadata */}
+
+
+ SOURCE
+ {sourcePanel.documentTitle ? (
+
+ {sourcePanel.documentTitle}
+
+ ) : (
+
+ {shortUri(sourcePanel.documentUri)}
+
+ )}
+ {sourcePanel.documentTags && sourcePanel.documentTags.length > 0 && (
+
+ {sourcePanel.documentTags.map((tag, i) => (
+
+ {tag}
+
+ ))}
+
+ )}
+
+
+
+
+ {/* Chunk text content */}
+
+ {sourcePanel.loading && (
+
+ Loading source text...
+
+ )}
+ {sourcePanel.error && (
+
+ {sourcePanel.error}
+
+ )}
+ {sourcePanel.chunkText && (
+
+ {sourcePanel.chunkText}
+
+ )}
+
+
+ )}
+
+
+ {/* RHS: Graph + Explainability panel */}
+
+ {/* Graph view — top half */}
+
+ {
+ setHighlightedNodeIds(prev =>
+ prev.includes(nodeId) ? prev.filter(id => id !== nodeId) : [...prev, nodeId]
+ );
+ }}
+ onEdgeClick={(edgeId) => {
+ setHighlightedEdgeIds(prev =>
+ prev.includes(edgeId) ? prev.filter(id => id !== edgeId) : [...prev, edgeId]
+ );
+ }}
+ />
+
+
+ {/* Event cards — bottom half */}
+
+
+
+ EVENTS
+ {explainNodes.length > 0 && (
+
+ {explainNodes.length} event{explainNodes.length !== 1 ? "s" : ""}
+
+ )}
+
+
+
+
+ {explainNodes.length === 0 && !isQuerying && (
+
+ Explain events will appear here as the query progresses.
+
+ )}
+
+ {isQuerying && explainNodes.length === 0 && (
+
+ Waiting for explain events...
+
+ )}
+
+
+ {explainNodes.map((node, idx) => (
+
+ ))}
+
+
+
+
+
+
+ {/* Header */}
+
+
+ {index + 1}
+
+
+ {node.eventType}
+
+ {node.fetching && (
+ loading...
+ )}
+
+
+ {/* Event data */}
+ {node.fetched && node.data && (
+
+ )}
+
+ {node.error && (
+
{node.error}
+ )}
+
+ {d.query && (
+
+ Query: {d.query}
+
+ )}
+ {d.timestamp && (
+
+ {d.timestamp}
+
+ )}
+
+ {d.concepts.length > 0 && (
+ <>
+
+ {d.concepts.length} concept{d.concepts.length !== 1 ? "s" : ""} extracted
+
+
+ {d.concepts.map((concept, i) => (
+
+ {concept}
+
+ ))}
+
+
+ )}
+
+ {d.edgeCount && (
+
+ Subgraph extracted: {d.edgeCount} edges
+
+ )}
+ {d.chunkCount && (
+
+ Chunks retrieved: {d.chunkCount}
+
+ )}
+ {d.entityLabels && d.entityLabels.length > 0 && (
+
+
+ {d.entityLabels.length} seed entit{d.entityLabels.length !== 1 ? "ies" : "y"}
+
+
+ {d.entityLabels.map((label, i) => (
+ onEntityClick?.(d.entities[i])}
+ style={{
+ fontSize: 11, padding: "3px 8px", borderRadius: 4,
+ background: withGlow(palette.blue, 0.1),
+ border: `1px solid ${withGlow(palette.blue, 0.2)}`,
+ color: text.secondary, ...mono,
+ cursor: onEntityClick ? "pointer" : "default",
+ transition: "all 0.15s ease",
+ }}
+ onMouseEnter={e => { if (onEntityClick) (e.currentTarget.style.background = withGlow(palette.blue, 0.25)); }}
+ onMouseLeave={e => { (e.currentTarget.style.background = withGlow(palette.blue, 0.1)); }}
+ >
+ {label}
+
+ ))}
+
+
+ )}
+
+ {d.edgeSelections && d.edgeSelections.length > 0 && (
+ <>
+
+ Focused on {d.edgeSelections.length} edge{d.edgeSelections.length !== 1 ? "s" : ""}
+
+ {d.edgeSelections.map((sel, i) => (
+
onEdgeClick?.(sel)} onSourceClick={onSourceClick} />
+ ))}
+
+ )}
+
+ {d.contentLength != null && (
+
+ Synthesis: {d.contentLength} chars
+
+ )}
+
+ {d.action && (
+
+ Tool: {d.action}
+
+ )}
+ {parsedArgs && Object.entries(parsedArgs).map(([key, val]) => (
+
+ {key}: {String(val)}
+
+ ))}
+ {!parsedArgs && d.arguments && (
+
+ {d.arguments}
+
+ )}
+
+ {d.documentUri && (
+
+ {shortUri(d.documentUri)}
+
+ )}
+
+ {d.documentUri && (
+
+ {shortUri(d.documentUri)}
+
+ )}
+
{ if (onClick) e.currentTarget.style.background = withGlow(palette.purple, 0.08); }}
+ onMouseLeave={e => { e.currentTarget.style.background = "transparent"; }}
+ >
+ {/* Edge triple */}
+ {sel.edgeLabels && (
+
+ {sel.edgeLabels.s}
+ →
+ {sel.edgeLabels.p}
+ →
+ {sel.edgeLabels.o}
+
+ )}
+
+ {/* Provenance sources — clickable to view source text */}
+ {sel.sources && sel.sources.length > 0 && (
+
+ {sel.sources.map((source, si) => {
+ const chainLabel = source.chain.map(c => c.label).join(" → ");
+ return (
+ {
+ e.stopPropagation();
+ onSourceClick?.(source);
+ }}
+ title={`View source: ${chainLabel}`}
+ style={{
+ fontSize: 10, padding: "2px 7px", borderRadius: 4,
+ background: withGlow(palette.amber, 0.08),
+ border: `1px solid ${withGlow(palette.amber, 0.2)}`,
+ color: text.hint, ...mono,
+ cursor: onSourceClick ? "pointer" : "default",
+ transition: "all 0.15s ease",
+ }}
+ onMouseEnter={e => { if (onSourceClick) { e.currentTarget.style.background = withGlow(palette.amber, 0.2); e.currentTarget.style.color = palette.amber; } }}
+ onMouseLeave={e => { e.currentTarget.style.background = withGlow(palette.amber, 0.08); e.currentTarget.style.color = text.hint; }}
+ >
+ {chainLabel}
+
+ );
+ })}
+
+ )}
+
+ {/* Reasoning - compact */}
+ {sel.reasoning && (
+
+ {sel.reasoning.length > 120 ? sel.reasoning.slice(0, 120) + "..." : sel.reasoning}
+
+ )}
+
+
+ onNodeSelect(selectedNode?.id === node.id ? null : node)}
+ activeFilter={activeFilter}
+ />
+
+ {selectedNode && (
+
onNodeSelect(null)}
+ onNodeSelect={onNodeSelect}
+ />
+ )}
+
+
+
ONTOLOGY SCHEMA
+
+ {/* Ontology class cards */}
+
+ {(Object.entries(ontology) as [DomainKey, OntologyDomain][]).map(([key, data]) => {
+ // Find datatype properties for this domain from schema
+ const domainProps = schema.datatypeProperties
+ .filter(p => p.domain && getLocalName(p.domain) === data.label)
+ .map(p => p.label);
+
+ return (
+
+
+
{data.icon}
+
+
{data.label}
+
owl:Class
+
+
{data.description}
+ PROPERTIES ({domainProps.length})
+
+ {domainProps.map((p) => (
+ {p}
+ ))}
+
+ INSTANCES ({data.subclasses.length})
+ {data.subclasses.map((sc) => (
+
+ {sc.label}
+ {sc.id}
+
+ ))}
+
+ );
+ })}
+
+
+ {/* Relationship predicates (Object Properties) */}
+
+ RELATIONSHIP PREDICATES ({schema.objectProperties.length})
+
+ {schema.objectProperties.map((prop) => {
+ const fromDomain = prop.domain ? getLocalName(prop.domain).toLowerCase() as DomainKey : null;
+ const toDomain = prop.range ? getLocalName(prop.range).toLowerCase() as DomainKey : null;
+
+ return (
+
+
+ {prop.label}
+
+
+ {fromDomain && ontology[fromDomain] && (
+ {ontology[fromDomain].label}
+ )}
+ {fromDomain && toDomain && " → "}
+ {toDomain && ontology[toDomain] && (
+ {ontology[toDomain].label}
+ )}
+
+
+ );
+ })}
+
+
+ {/* Triple count summary */}
+
+ {[
+ { label: "Classes", value: schema.classes.length },
+ { label: "Instances", value: totalInstances },
+ { label: "Object Props", value: schema.objectProperties.length },
+ { label: "Data Props", value: schema.datatypeProperties.length },
+ ].map((s) => (
+
+
{s.value}
+
{s.label.toUpperCase()}
+
+ ))}
+
+
+
+
+ {/* Query input area */}
+
+ AGENT QUERIES
+
+ handleSubmit(customInput)}
+ placeholder="Type your own question..."
+ buttonText="Ask"
+ isLoading={isSubmitting}
+ buttonColor={palette.amber}
+ />
+
+
+ {/* Related entities from graph embeddings */}
+ {queryForEmbeddings && (
+
+
+ RELATED ENTITIES {(embeddingsLoading || graphEmbeddingsLoading) && loading...}
+
+
+ {embeddingResults.length === 0 && !embeddingsLoading && !graphEmbeddingsLoading && (
+ No related concepts found
+ )}
+ {embeddingResults.map((item) => {
+ const isSelected = selectedEntityId === item.id;
+ return (
+ {
+ setSelectedEntityId(isSelected ? null : item.id);
+ setSelectedNode(null);
+ }}
+ >
+ {item.icon}
+ {item.label}
+
+ );
+ })}
+
+
+ )}
+
+ {/* Response area */}
+
+ {messages.length === 0 ? (
+
+ Type your question to get started.
+
+ ) : (
+
+ {messages.map((msg, idx) => (
+
+ ))}
+ {isSubmitting && (
+
+ Processing...
+
+ )}
+
+
+ )}
+
+
+
+ {/* Graph visualization */}
+
+ {
+ setSelectedNode(selectedNode?.id === node.id ? null : node);
+ setSelectedEntityId(null);
+ }}
+ activeFilter={null}
+ />
+
+ {selectedNode && (
+
setSelectedNode(null)}
+ onNodeSelect={(node) => {
+ setSelectedNode(node);
+ setSelectedEntityId(null);
+ }}
+ />
+ )}
+
+
+ {hovered && (() => {
+ const node = nodesRef.current.find((n) => n.id === hovered);
+ if (!node) return null;
+ const canvas = canvasRef.current;
+ const rect = canvas.getBoundingClientRect();
+ const sx = node.x / 2;
+ const sy = node.y / 2;
+ return (
+
+
+ {node.icon} {node.label}
+
+
+ {Object.entries(node.props || {}).map(([k, v]) => (
+
{k}: {String(v)}
+ ))}
+
+
+ );
+ })()}
+
+ {/* ── Header ────────────────────────────────────────── */}
+
+
+
TG
+
+
+ TrustGraph
+
+
+ RETAIL INTELLIGENCE PLATFORM
+
+
+
+
+ {["graph", "query", "ontology"].map((tab) => (
+
+ ))}
+
+
+
+ {/* ── Domain Filter Bar ──────────────────────────────── */}
+ {activeTab === "graph" && (
+
+
FILTER:
+
+ {Object.entries(ONTOLOGY).map(([key, data]) => (
+
+ ))}
+
+ {getAllEntities().length} entities · {RELATIONSHIPS.length} relationships
+
+
+ )}
+
+ {/* ── Main Content ──────────────────────────────────── */}
+
+
+ {/* ── Graph View ──────────────────────────────────── */}
+ {activeTab === "graph" && (
+ <>
+
+ setSelectedNode(selectedNode?.id === node.id ? null : node)}
+ activeFilter={activeFilter}
+ />
+
+ {/* Side panel for selected node */}
+ {selectedNode && (
+
+
+
+ {ONTOLOGY[selectedNode.domain].label.toUpperCase()} ENTITY
+
+
+
+
+ {selectedNode.icon} {selectedNode.label}
+
+
+
PROPERTIES
+ {Object.entries(selectedNode.props || {}).map(([k, v]) => (
+
+ {k}
+ {String(v)}
+
+ ))}
+
+
+
RELATIONSHIPS
+ {RELATIONSHIPS.filter(r => r.from === selectedNode.id || r.to === selectedNode.id).map((r, i) => {
+ const otherId = r.from === selectedNode.id ? r.to : r.from;
+ const other = getAllEntities().find(e => e.id === otherId);
+ const direction = r.from === selectedNode.id ? "→" : "←";
+ return (
+
{ const n = getAllEntities().find(e => e.id === otherId); if (n) setSelectedNode(n); }}>
+
+ {direction} {other?.label}
+
+
+ {r.predicate.replace(/_/g, " ")} · strength: {r.strength}
+
+
+ );
+ })}
+
+
+ )}
+
+ )}
+
+ {/* ── Agent Query View ────────────────────────────── */}
+ {activeTab === "query" && (
+
+
+ {/* Query selector */}
+
+
+ SELECT A QUERY TO SEE GRAPH-POWERED AGENT INTELLIGENCE
+
+ {DEMO_QUERIES.map((dq, idx) => (
+
+ ))}
+
+
+ {/* Response area */}
+ {selectedQuery !== null && (
+
+ {/* Graph traversal steps */}
+ {(queryPhase === "thinking" || queryPhase === "answering" || queryPhase === "done") && (
+
+
+ ◈ GRAPH TRAVERSAL
+
+ {DEMO_QUERIES[selectedQuery].thinking.map((step, i) => (
+
+ {i < thinkingStep && ✓}
+ {step}
+
+ ))}
+ {queryPhase === "thinking" && (
+
+ Traversing graph...
+
+ )}
+
+ )}
+
+ {/* Answer */}
+ {(queryPhase === "answering" || queryPhase === "done") && (
+
+
+
+ AGENT RESPONSE
+
+
+ {DEMO_QUERIES[selectedQuery].triples} triples traversed · {DEMO_QUERIES[selectedQuery].entities.length} entities resolved
+
+
+
+ setQueryPhase("done")}
+ />
+
+
+ )}
+
+ )}
+
+
+ {/* Graph visualization alongside query */}
+
+ {}} activeFilter={null} />
+
+
+ )}
+
+ {/* ── Ontology View ──────────────────────────────── */}
+ {activeTab === "ontology" && (
+
+
+
+ ONTOLOGY SCHEMA · RETAIL INTELLIGENCE DOMAIN
+
+
+ {/* Ontology class cards */}
+
+ {Object.entries(ONTOLOGY).map(([key, data]) => (
+
+
+
{data.icon}
+
+
{data.label}
+
owl:Class
+
+
+
{data.description}
+
PROPERTIES
+
+ {data.properties.map((p) => (
+ {p}
+ ))}
+
+
+ INSTANCES ({data.subclasses.length})
+
+ {data.subclasses.map((sc) => (
+
+ {sc.label}
+ {sc.id}
+
+ ))}
+
+ ))}
+
+
+ {/* Relationship predicates */}
+
+
+ RELATIONSHIP PREDICATES
+
+
+ {[...new Set(RELATIONSHIPS.map(r => r.predicate))].map((pred) => {
+ const sample = RELATIONSHIPS.find(r => r.predicate === pred);
+ const fromDomain = sample.domain[0];
+ const toDomain = sample.domain[1];
+ return (
+
+
+ {pred.replace(/_/g, " ")}
+
+
+ {ONTOLOGY[fromDomain].label}
+ {" → "}
+ {ONTOLOGY[toDomain].label}
+
+
+ );
+ })}
+
+
+
+ {/* Triple count summary */}
+
+ {[
+ { label: "Classes", value: 4 },
+ { label: "Instances", value: getAllEntities().length },
+ { label: "Predicates", value: [...new Set(RELATIONSHIPS.map(r => r.predicate))].length },
+ { label: "Triples", value: RELATIONSHIPS.length },
+ ].map((s) => (
+
+
{s.value}
+
{s.label.toUpperCase()}
+
+ ))}
+
+
+
+ )}
+
+
+ {/* ── Bottom Status Bar ──────────────────────────────── */}
+
+
+ ◈ Ontology: Consumer × Agent × Retail × Brand
+ ⬡ GraphRAG: Active
+ ⚡ Agent Orchestration: Online
+
+
+ ● Context Graph Connected
+ |
+ trustgraph.ai
+
+
+