Skip to content
Night Owls.dev
GitHubGet started
Jump to a page

@nightowlsdev/graph-react

UI

The React workbench for the knowledge-graph plane: search, a force-directed canvas, entity pages, the bi-temporal timeline, and the review queue, with no CSS build step and no d3.

What it does

The display surfaces for `@nightowlsdev/graph`, built as three independently replaceable layers in the same shape as `SwarmComponents` and `StudioComponents`: a CLIENT (`GraphClient`, with `httpGraphClient({ baseUrl })` pointing at a mounted `createGraphHandlers()`) so you can swap the backend and keep the UI; HOOKS (`useGraphSearch`, `useGraphNode`, `useGraphNeighborhood`, `useGraphTimeline`, `useGraphEpisodes`, `useGraphNote`, `useGraphOntology`, `useGraphLint`) so you can keep the data layer and render your own UI; and a COMPONENT slot registry (`GraphComponentsProvider` + `mergeGraphComponents`) so you can keep the composition and replace any single piece. `<GraphWorkbench client={…}>` wires the whole journey together, search → canvas → entity detail, plus the history ribbon and the review queue. The built-ins are exported individually too: `<GraphExplorer>` (a deterministic force-directed canvas, layout in `useGraphLayout`), `<EntityPage>` (summary, properties, live facts, sources, compiled note), `<GraphTimeline>` (the bi-temporal ribbon of when facts became true and when we stopped believing them), `<GraphSearch>`, `<FactRow>`/`<FactList>`, and `<LintQueue>`. Rendering is dependency-free, inline SVG and inline styles reading the `--owl-*` custom properties that FR-041 made the one theming namespace, so it drops into any React app with no CSS build step, no d3, and no class-name collisions. Prototype status; peer-depends on `@nightowlsdev/graph` + React, zero `@mastra/*`.

Install

pnpm add @nightowlsdev/graph-react

Key exports

  • GraphWorkbench (GraphWorkbenchProps)
  • httpGraphClient (GraphClient seam)
  • GraphClientProvider / useGraphClient
  • useGraphSearch / useGraphNode / useGraphNeighborhood / useGraphTimeline / useGraphEpisodes / useGraphNote / useGraphOntology / useGraphLint
  • useGraphLayout / useDebounced
  • GraphComponentsProvider / mergeGraphComponents / defaultGraphComponents
  • GraphExplorer / EntityPage / GraphSearch / GraphTimeline / FactList / LintQueue

Usage

graph-react.tsx
import { GraphWorkbench, httpGraphClient } from "@nightowlsdev/graph-react";

// Points at a mounted createGraphHandlers() from @nightowlsdev/graph.
const client = httpGraphClient({ baseUrl: "/api/graph" });

export default function KnowledgePage() {
  return <GraphWorkbench client={client} overviewQuery="team" />;
}

// Or keep the data layer and render your own UI:
//   const { data, loading, error, reload } = useGraphSearch({ query: "who owns billing" });
// Or keep the composition and swap one piece:
//   <GraphWorkbench client={client} components={{ FactRow: MyFactRow }} />