@dxos/react-ui-rdf 0.0.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@dxos/react-ui-rdf",
+  "version": "0.0.0",
+  "description": "Presentational viewer for extracted semantic facts.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
+  "author": "DXOS.org",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@dxos/pipeline-rdf": "0.0.0",
+    "@dxos/ui-types": "0.10.0",
+    "@dxos/react-ui-graph": "0.10.0",
+    "@dxos/react-ui-list": "0.10.0"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "^10.4.2",
+    "@types/react": "~19.2.17",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "vite": "^8.0.16",
+    "@dxos/react-ui": "0.10.0",
+    "@dxos/ui-theme": "0.10.0",
+    "@dxos/storybook-utils": "0.10.0"
+  },
+  "peerDependencies": {
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/react-ui": "0.10.0",
+    "@dxos/ui-theme": "0.10.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/FactViewer.stories.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+/**
+ * Read-only viewer for extracted semantic facts, rendered against static fixtures (no engine/AI).
+ *
+ * - `Default` passes `DEMO_FACTS` (includes an Alice→Paris/Rome conflict and a coherent Q3-meeting pair).
+ * - `Empty` passes `[]` to show the empty state.
+ * - Renders `FactViewer`, which groups facts by subject, flags predicate-level conflicts, and filters.
+ * - Minimal decorators (`withTheme` + `withLayout`); purely presentational.
+ */
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { type RDF } from '@dxos/pipeline-rdf';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { FactViewer, type FactViewerProps } from './FactViewer';
+
+const extractor = {
+  id: 'default',
+  model: 'ai.claude.model.claude-haiku-4-5',
+  version: '1',
+};
+
+/**
+ * Static demo facts that exercise the viewer: an entity→entity conflict (f1 vs f2,
+ * same subject + predicate, different objects/sources) plus a coherent pair (f3/f4).
+ */
+const DEMO_FACTS: RDF.Fact[] = [
+  {
+    id: 'f1',
+    assertion: {
+      subject: { entity: 'alice' },
+      predicate: 'travelsTo',
+      object: { entity: 'paris' },
+      validFrom: '2026-06-12',
+      quote: "I think I'm probably going to Paris next week",
+    },
+    factuality: { value: 'PR+', polarity: '+', confidence: 0.6, nature: 'epistemic' },
+    attribution: { agent: 'alice', source: 'dxn:gmail:msg-1', generatedAtTime: '2026-06-06T09:00:00.000Z' },
+    recordedAt: '2026-06-06T09:00:00.000Z',
+    extractor,
+    sourceHash: 'demo',
+  },
+  {
+    id: 'f2',
+    assertion: {
+      subject: { entity: 'alice' },
+      predicate: 'travelsTo',
+      object: { entity: 'rome' },
+      quote: "Alice told me she's definitely going to Rome, not Paris.",
+    },
+    factuality: { value: 'CT+', polarity: '+', confidence: 0.95 },
+    attribution: { agent: 'bob', source: 'dxn:gmail:msg-2', generatedAtTime: '2026-06-07T10:00:00.000Z' },
+    recordedAt: '2026-06-07T10:00:00.000Z',
+    extractor,
+    sourceHash: 'demo',
+  },
+  {
+    id: 'f3',
+    assertion: {
+      subject: { entity: 'q3-board-meeting' },
+      predicate: 'scheduledFor',
+      object: { literal: '2026-07-15' },
+      quote: 'The Q3 board meeting is confirmed for July 15 in London.',
+    },
+    factuality: { value: 'CT+', polarity: '+' },
+    attribution: { agent: 'carol', source: 'dxn:gmail:msg-3', generatedAtTime: '2026-06-08T11:00:00.000Z' },
+    recordedAt: '2026-06-08T11:00:00.000Z',
+    extractor,
+    sourceHash: 'demo',
+  },
+  {
+    id: 'f4',
+    assertion: {
+      subject: { entity: 'q3-board-meeting' },
+      predicate: 'locatedIn',
+      object: { entity: 'london' },
+    },
+    factuality: { value: 'CT+', polarity: '+' },
+    attribution: { agent: 'carol', source: 'dxn:gmail:msg-3', generatedAtTime: '2026-06-08T11:00:00.000Z' },
+    recordedAt: '2026-06-08T11:00:00.000Z',
+    extractor,
+    sourceHash: 'demo',
+  },
+] satisfies RDF.Fact[];
+
+const DefaultStory = (props: FactViewerProps) => <FactViewer {...props} />;
+
+const meta = {
+  title: 'ui/react-ui-rdf/FactViewer',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    facts: DEMO_FACTS,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    facts: [],
+  },
+};

package/src/FactViewer.tsx

@@ -0,0 +1,161 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useMemo, useState } from 'react';
+
+import { type RDF, buildFactGraph, factSourceFromFacts } from '@dxos/pipeline-rdf';
+import { Icon, IconButton, Input, Panel, ScrollArea, Tag, type ThemedClassName, Toolbar } from '@dxos/react-ui';
+import { Tree } from '@dxos/react-ui-graph';
+import { Empty, Listbox } from '@dxos/react-ui-list';
+import { mx } from '@dxos/ui-theme';
+
+import { Group, factualityColor, formatDate, formatTerm, graphToTreeNode, groupFacts, termKey } from './types';
+
+type View = 'list' | 'graph';
+
+export type FactViewerProps = ThemedClassName<{
+  facts: RDF.Fact[];
+  /** Context entity id; scopes the list and roots the graph. */
+  context?: string;
+  /** Predicate filter; when set, only facts with this predicate are shown. */
+  predicate?: string;
+}>;
+
+/**
+ * Viewer for extracted semantic facts with two views: a grouped **list** (by subject entity, with
+ * conflicts highlighted) and a **graph** (tidy tree rooted at the context entity, exploring the fact
+ * graph). A `context` entity scopes the list and roots the graph; a `predicate` further filters the
+ * list. Pure/presentational.
+ */
+export const FactViewer = ({ classNames, facts, context, predicate }: FactViewerProps) => {
+  const [filter, setFilter] = useState('');
+  const [view, setView] = useState<View>('list');
+  const scoped = useMemo(
+    () =>
+      facts.filter(
+        (fact) =>
+          (context == null ||
+            termKey(fact.assertion.subject) === context ||
+            termKey(fact.assertion.object) === context) &&
+          (predicate == null || fact.assertion.predicate === predicate),
+      ),
+    [facts, context, predicate],
+  );
+  const groups = useMemo(() => groupFacts(scoped, filter), [scoped, filter]);
+  const graph = useMemo(
+    () => (context == null ? undefined : graphToTreeNode(buildFactGraph(context, factSourceFromFacts(facts)), context)),
+    [facts, context],
+  );
+
+  return (
+    <Panel.Root classNames={classNames}>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          <Input.Root>
+            <Input.Label srOnly>Filter facts</Input.Label>
+            <Input.TextInput
+              placeholder='Filter by entity or predicate…'
+              value={filter}
+              onChange={(event) => setFilter(event.target.value)}
+            />
+          </Input.Root>
+          <div role='none' className='grow' />
+          <IconButton
+            icon='ph--list--regular'
+            iconOnly
+            label='List view'
+            variant={view === 'list' ? 'primary' : 'default'}
+            onClick={() => setView('list')}
+          />
+          <IconButton
+            icon='ph--graph--regular'
+            iconOnly
+            label='Graph view'
+            variant={view === 'graph' ? 'primary' : 'default'}
+            onClick={() => setView('graph')}
+          />
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      {view === 'list' ? (
+        <Panel.Content asChild>
+          <ScrollArea.Root padding>
+            <ScrollArea.Viewport classNames='flex flex-col gap-2 py-1'>
+              {groups.length === 0 && <Empty label='No facts.' />}
+              {groups.map((group) => (
+                <SubjectGroup key={group.subject} group={group} />
+              ))}
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Panel.Content>
+      ) : (
+        <Panel.Content classNames='overflow-hidden'>
+          {graph ? (
+            <Tree data={graph} variant='tidy' margin={80} classNames='w-full h-full' />
+          ) : (
+            <Empty icon='ph--graph--regular' label='Select an entity to root the graph.' />
+          )}
+        </Panel.Content>
+      )}
+    </Panel.Root>
+  );
+};
+
+const SubjectGroup = ({ group }: { group: Group }) => (
+  <div className='shrink-0 flex flex-col bg-card-surface border border-subdued-separator rounded-sm overflow-hidden'>
+    <div className='flex px-3 py-1 items-center justify-between'>
+      <h3>{group.subject}</h3>
+      {group.conflicted && (
+        <Tag hue='warning'>
+          <span className='flex items-center gap-1'>
+            <Icon icon='ph--warning--regular' size={3} />
+            conflict
+          </span>
+        </Tag>
+      )}
+    </div>
+    <Listbox.Root>
+      <Listbox.Content aria-label={group.subject}>
+        {group.facts.map((fact) => (
+          <FactRow key={fact.id} fact={fact} conflicting={group.conflictedIds.has(fact.id)} />
+        ))}
+      </Listbox.Content>
+    </Listbox.Root>
+  </div>
+);
+
+const cellClassNames =
+  'bg-input-surface border border-subdued-separator rounded-sm px-2 py-0.5 font-medium whitespace-nowrap truncate';
+
+const FactRow = ({ fact, conflicting }: { fact: RDF.Fact; conflicting: boolean }) => {
+  const { assertion, factuality, attribution } = fact;
+  return (
+    <Listbox.Item
+      id={fact.id}
+      classNames={mx('flex flex-col items-stretch gap-2 px-3 py-1', conflicting && 'border-is-2 border-warning-border')}
+    >
+      {assertion.quote && <div className='text-sm text-description italic'>"{assertion.quote}"</div>}
+
+      <div className='grid grid-cols-[1fr_5rem] items-center justify-between gap-2'>
+        <div className='w-full grid grid-cols-[1fr_1rem_1fr_1rem_1fr] items-center flex-wrap'>
+          <span className={mx(cellClassNames, 'text-right')}>{formatTerm(assertion.subject)}</span>
+          <span className='border border-subdued-separator'></span>
+          <span className={mx(cellClassNames, 'text-center text-description')}>{assertion.predicate}</span>
+          <span className='border border-subdued-separator'></span>
+          <span className={mx(cellClassNames)}>{formatTerm(assertion.object)}</span>
+        </div>
+
+        <div className='flex items-center justify-end gap-2 shrink-0'>
+          {factuality.confidence != null && (
+            <span className='text-xs text-subdued'>{Math.round(factuality.confidence * 100)}%</span>
+          )}
+          <Tag hue={factualityColor(factuality.value)}>{factuality.value}</Tag>
+        </div>
+      </div>
+
+      <div className='text-xs text-subdued text-right'>
+        {[attribution.agent, attribution.source, formatDate(attribution.generatedAtTime)].filter(Boolean).join(' · ')}
+      </div>
+    </Listbox.Item>
+  );
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './FactViewer';
+export * from './types';

package/src/types.ts

@@ -0,0 +1,138 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type FactGraph, type RDF } from '@dxos/pipeline-rdf';
+import { type TreeNode } from '@dxos/react-ui-graph';
+import { type ChromaticPalette, type MessageValence, type NeutralPalette } from '@dxos/ui-types';
+
+export type Group = {
+  subject: string;
+  facts: RDF.Fact[];
+  conflicted: boolean;
+  conflictedIds: Set<string>;
+};
+
+/** Group facts by subject entity and flag predicate-level conflicts within each group. */
+export const groupFacts = (facts: RDF.Fact[], filter: string): Group[] => {
+  const needle = filter.trim().toLowerCase();
+  const filtered = needle
+    ? facts.filter((fact) => {
+        const { subject, predicate, object } = fact.assertion;
+        return [formatTerm(subject), predicate, formatTerm(object)].some((value) =>
+          value.toLowerCase().includes(needle),
+        );
+      })
+    : facts;
+
+  // Group by the entity slug (so `DXOS`/`dxos` collapse) but remember a display label for the header.
+  const bySubject = new Map<string, RDF.Fact[]>();
+  const labelByKey = new Map<string, string>();
+  for (const fact of filtered) {
+    const key = termKey(fact.assertion.subject);
+    const list = bySubject.get(key) ?? [];
+    list.push(fact);
+    bySubject.set(key, list);
+    if (!labelByKey.has(key)) {
+      labelByKey.set(key, formatTerm(fact.assertion.subject));
+    }
+  }
+
+  return [...bySubject.entries()].map(([key, groupFactsList]) => {
+    const subject = labelByKey.get(key) ?? key;
+    const byPredicate = new Map<string, RDF.Fact[]>();
+    for (const fact of groupFactsList) {
+      const list = byPredicate.get(fact.assertion.predicate) ?? [];
+      list.push(fact);
+      byPredicate.set(fact.assertion.predicate, list);
+    }
+
+    const conflictedIds = new Set<string>();
+    for (const list of byPredicate.values()) {
+      const objects = new Set(list.map((fact) => termKey(fact.assertion.object)));
+      if (objects.size > 1) {
+        for (const fact of list) {
+          conflictedIds.add(fact.id);
+        }
+      }
+    }
+
+    return {
+      subject,
+      facts: groupFactsList,
+      conflicted: conflictedIds.size > 0,
+      conflictedIds,
+    };
+  });
+};
+
+/** The join/grouping key: the entity slug (or literal). Casing variants collapse to one key. */
+export const termKey = (term: RDF.Term): string => ('entity' in term ? term.entity : term.literal);
+
+/** Display form: the preserved surface label, else a prettified slug; literals render verbatim. */
+export const formatTerm = (term: RDF.Term): string =>
+  'entity' in term ? (term.label ?? humanize(term.entity)) : term.literal;
+
+/**
+ * Convert a {@link FactGraph} into a rooted {@link TreeNode} hierarchy for the tidy-tree renderer.
+ * A fact graph is a general (cyclic) graph; the tidy tree needs a hierarchy, so this takes the BFS
+ * spanning tree from `rootId` over the undirected edges (each node appears once). Returns `undefined`
+ * if the root isn't in the graph.
+ */
+export const graphToTreeNode = (graph: FactGraph, rootId: string): TreeNode | undefined => {
+  const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
+  if (!nodeById.has(rootId)) {
+    return undefined;
+  }
+  const adjacency = new Map<string, string[]>();
+  const link = (from: string, to: string) => {
+    const list = adjacency.get(from) ?? [];
+    list.push(to);
+    adjacency.set(from, list);
+  };
+  for (const edge of graph.edges) {
+    link(edge.source, edge.target);
+    link(edge.target, edge.source);
+  }
+
+  const visited = new Set<string>([rootId]);
+  const build = (id: string): TreeNode => {
+    const children: TreeNode[] = [];
+    for (const neighbour of adjacency.get(id) ?? []) {
+      if (!visited.has(neighbour)) {
+        visited.add(neighbour);
+        children.push(build(neighbour));
+      }
+    }
+    return { id, label: nodeById.get(id)?.label ?? id, ...(children.length > 0 ? { children } : {}) };
+  };
+  return build(rootId);
+};
+
+/** Render ids like `q3-board-meeting` as `Q3 Board Meeting`. */
+export const humanize = (value: string): string =>
+  value.replace(/[-_]/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase());
+
+export const formatDate = (iso: string): string => iso.slice(0, 10);
+
+/** Map FactBank factuality to a real react-ui palette member. */
+export const factualityColor = (
+  factuality: RDF.FactualityValue,
+): NeutralPalette | ChromaticPalette | MessageValence => {
+  switch (factuality) {
+    case 'CT+':
+      return 'emerald';
+    case 'PR+':
+      return 'amber';
+    case 'PS+':
+      return 'sky';
+    case 'CT-':
+    case 'PR-':
+    case 'PS-':
+      return 'red';
+    case 'CTu':
+    case 'Uu':
+    default:
+      return 'neutral';
+  }
+};