@anchrd/intel-ui 0.1.0

package/src/knowledge-editor/knowledge-editor.tsx

@@ -0,0 +1,92 @@
+import {
+  BlockNoteDocument,
+  BlockNoteMediaType,
+  type KnowledgeDocument,
+} from "@anchrd/intel-contract";
+import type { PartialBlock } from "@blocknote/core";
+import { useCreateBlockNote } from "@blocknote/react";
+import { useMutation } from "@tanstack/react-query";
+import { Save } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { BlockNoteView } from "@/blocknote-view/blocknote-view.tsx";
+import type { IntelDataProvider } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import type { I18n } from "@/i18n/i18n.types.ts";
+
+function storedBlocks(content: string | null): PartialBlock[] | undefined {
+  if (!content) return undefined;
+  try {
+    const parsed = BlockNoteDocument.safeParse(JSON.parse(content));
+    return parsed.success ? (parsed.data.blocks as PartialBlock[]) : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+export function KnowledgeEditor({
+  data,
+  document,
+  i18n,
+  onSaved,
+}: {
+  data: IntelDataProvider;
+  document: KnowledgeDocument;
+  i18n: I18n;
+  onSaved(document: KnowledgeDocument): void;
+}) {
+  const initialBlocks = useMemo(() => storedBlocks(document.content), [document.content]);
+  const editor = useCreateBlockNote({
+    ...(initialBlocks?.length ? { initialContent: initialBlocks } : {}),
+  });
+  const [dirty, setDirty] = useState(false);
+  const save = useMutation({
+    mutationFn: async () => {
+      const payload = BlockNoteDocument.parse({
+        format: "blocknote",
+        schemaVersion: 1,
+        blocks: editor.document,
+        markdown: await editor.blocksToMarkdownLossy(editor.document),
+      });
+      return await data.saveKnowledge({
+        nodeId: document.node.id,
+        baseVersionId: document.version?.id ?? null,
+        content: JSON.stringify(payload),
+        mediaType: BlockNoteMediaType,
+        idempotencyKey: crypto.randomUUID(),
+      });
+    },
+    onSuccess: (saved) => {
+      setDirty(false);
+      onSaved(saved);
+    },
+  });
+
+  useEffect(() => {
+    if (!document.content || initialBlocks) return;
+    const blocks = editor.tryParseMarkdownToBlocks(document.content);
+    editor.replaceBlocks(editor.document, blocks);
+  }, [document.content, editor, initialBlocks]);
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex items-center justify-end border-b px-4 py-2">
+        <button
+          type="button"
+          disabled={!dirty || save.isPending}
+          onClick={() => save.mutate()}
+          className="inline-flex items-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <Save aria-hidden="true" className="size-4" />
+          {save.isPending ? i18n.t("common.saving") : i18n.t("common.save")}
+        </button>
+      </div>
+      {save.isError && (
+        <p role="alert" className="mx-6 mt-4 text-sm text-destructive">
+          {i18n.t("knowledge.saveError")}
+        </p>
+      )}
+      <div className="min-h-0 flex-1 overflow-y-auto py-6">
+        <BlockNoteView editor={editor} onChange={() => setDirty(true)} />
+      </div>
+    </div>
+  );
+}

package/src/knowledge-graph/knowledge-graph.ts

@@ -0,0 +1,58 @@
+import type { KnowledgeGraph as KnowledgeGraphData } from "@anchrd/intel-contract";
+import Color from "colorjs.io";
+import { MultiDirectedGraph } from "graphology";
+
+// Sigma paints to a canvas and cannot read CSS variables, so semantic tokens are resolved to
+// concrete sRGB here. Tokens are tried in order; when none resolves — no DOM in tests and SSR, or a
+// customer theme without the token — the result is undefined and Sigma applies its own default. No
+// palette value is hard-coded, so a customer theme is never overridden by an Anchrd colour.
+export function resolveGraphColor(...tokens: string[]): string | undefined {
+  if (typeof document === "undefined") return undefined;
+  const styles = getComputedStyle(document.documentElement);
+  for (const token of tokens) {
+    const value = styles.getPropertyValue(token).trim();
+    if (!value) continue;
+    try {
+      return new Color(value).to("srgb").toString({ format: "hex", inGamut: true });
+    } catch {}
+  }
+  return undefined;
+}
+
+export function createKnowledgeGraph(data: KnowledgeGraphData): MultiDirectedGraph {
+  const graph = new MultiDirectedGraph();
+  const primary = resolveGraphColor("--primary", "--foreground");
+  const secondary = resolveGraphColor("--secondary-foreground", "--foreground");
+  const muted = resolveGraphColor("--muted-foreground", "--foreground");
+  const edge = resolveGraphColor("--border", "--muted-foreground");
+  const count = Math.max(1, data.nodes.length);
+  for (const [index, node] of data.nodes.entries()) {
+    const angle = index * Math.PI * (3 - Math.sqrt(5));
+    const radius = Math.sqrt(index / count) * 10;
+    graph.addNode(node.id, {
+      label: node.title,
+      x: Math.cos(angle) * radius,
+      y: Math.sin(angle) * radius,
+      size: node.kind === "folder" ? 11 : node.kind === "attachment" ? 6 : 8,
+      color: node.kind === "folder" ? secondary : node.kind === "attachment" ? muted : primary,
+    });
+  }
+  for (const node of data.nodes) {
+    if (node.parentId && graph.hasNode(node.parentId)) {
+      graph.addDirectedEdgeWithKey(`tree:${node.id}`, node.parentId, node.id, {
+        size: 0.6,
+        color: edge,
+      });
+    }
+  }
+  for (const link of data.links) {
+    if (graph.hasNode(link.sourceNodeId) && graph.hasNode(link.targetNodeId)) {
+      graph.addDirectedEdgeWithKey(link.id, link.sourceNodeId, link.targetNodeId, {
+        label: link.label ?? link.relation.replaceAll("_", " "),
+        size: 2,
+        color: primary,
+      });
+    }
+  }
+  return graph;
+}

package/src/knowledge-graph/knowledge-graph.tsx

@@ -0,0 +1,111 @@
+import type { KnowledgeGraph as KnowledgeGraphData } from "@anchrd/intel-contract";
+import { ControlsContainer, SigmaContainer, useCamera, useRegisterEvents } from "@react-sigma/core";
+import { LocateFixed, Minus, Plus } from "lucide-react";
+import { useEffect, useMemo } from "react";
+import type { I18n } from "@/i18n/i18n.types.ts";
+import { Modal } from "@/modal/modal.tsx";
+import { createKnowledgeGraph, resolveGraphColor } from "./knowledge-graph.ts";
+
+function labelColors() {
+  const label = resolveGraphColor("--foreground");
+  const edgeLabel = resolveGraphColor("--muted-foreground", "--foreground");
+  return {
+    ...(label ? { labelColor: { color: label } } : {}),
+    ...(edgeLabel ? { edgeLabelColor: { color: edgeLabel } } : {}),
+  };
+}
+
+function GraphEvents({ select }: { select(nodeId: string): void }) {
+  const registerEvents = useRegisterEvents();
+  useEffect(() => {
+    registerEvents({ clickNode: ({ node }) => select(node) });
+  }, [registerEvents, select]);
+  return null;
+}
+
+function GraphControls({ i18n }: { i18n: I18n }) {
+  const camera = useCamera({ duration: 180, factor: 1.5 });
+  const controls = [
+    {
+      label: i18n.t("knowledge.graphZoomIn"),
+      action: camera.zoomIn,
+      icon: Plus,
+    },
+    {
+      label: i18n.t("knowledge.graphZoomOut"),
+      action: camera.zoomOut,
+      icon: Minus,
+    },
+    {
+      label: i18n.t("knowledge.graphReset"),
+      action: camera.reset,
+      icon: LocateFixed,
+    },
+  ];
+  return (
+    <ControlsContainer className="!m-4 flex overflow-hidden rounded-lg border bg-card shadow-lg">
+      {controls.map(({ label, action, icon: Icon }) => (
+        <button
+          key={label}
+          type="button"
+          aria-label={label}
+          onClick={() => action()}
+          className="grid size-9 place-items-center border-r text-card-foreground outline-none last:border-r-0 hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Icon aria-hidden="true" className="size-4" />
+        </button>
+      ))}
+    </ControlsContainer>
+  );
+}
+
+export function KnowledgeGraphView({
+  data,
+  i18n,
+  close,
+  select,
+}: {
+  data: KnowledgeGraphData;
+  i18n: I18n;
+  close(): void;
+  select(nodeId: string): void;
+}) {
+  const graph = useMemo(() => createKnowledgeGraph(data), [data]);
+  return (
+    <Modal
+      title={i18n.t("knowledge.graph")}
+      close={close}
+      className="h-[calc(100vh-2rem)] max-w-none"
+    >
+      <p className="mb-4 text-sm text-muted-foreground">
+        {i18n.t("knowledge.graphDescription", {
+          nodes: data.nodes.length,
+          links: data.links.length,
+        })}
+      </p>
+      <div className="min-h-0 flex-1 overflow-hidden rounded-lg border bg-muted/20">
+        {data.nodes.length === 0 ? (
+          <div className="grid h-full place-items-center text-sm text-muted-foreground">
+            {i18n.t("knowledge.empty")}
+          </div>
+        ) : (
+          <SigmaContainer
+            graph={graph}
+            className="h-full w-full"
+            settings={{
+              labelRenderedSizeThreshold: 5,
+              renderEdgeLabels: true,
+              edgeLabelSize: 10,
+              // Omitted rather than defaulted when a theme lacks the token, so Sigma keeps its own
+              // label colour instead of receiving a hard-coded one.
+              ...labelColors(),
+            }}
+          >
+            <GraphEvents select={select} />
+            <GraphControls i18n={i18n} />
+          </SigmaContainer>
+        )}
+      </div>
+    </Modal>
+  );
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/main.tsx

@@ -0,0 +1,26 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider } from "@tanstack/react-router";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { createIntelDataProvider } from "@/data/intel-data-provider/intel-data-provider.ts";
+import { createI18n } from "@/i18n/i18n.ts";
+import { createIntelRouter } from "@/router/router.tsx";
+import { watchSystemTheme } from "@/theme/theme.ts";
+import "./styles.css";
+import "./theme/custom.css";
+
+watchSystemTheme(document.documentElement, window.matchMedia("(prefers-color-scheme: dark)"));
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Missing #root element");
+const data = createIntelDataProvider();
+const i18n = createI18n();
+const router = createIntelRouter({ data, i18n });
+
+createRoot(root).render(
+  <StrictMode>
+    <QueryClientProvider client={new QueryClient()}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  </StrictMode>,
+);

package/src/modal/modal.tsx

@@ -0,0 +1,53 @@
+import { useId } from "react";
+import { Modal as AriaModal, Dialog, ModalOverlay } from "react-aria-components";
+import { cn } from "@/lib/utils.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+export function Modal({
+  title,
+  close,
+  children,
+  className,
+}: {
+  title: string;
+  close(): void;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const { i18n } = useIntelRouterContext();
+  const titleId = useId();
+  return (
+    <ModalOverlay
+      isOpen
+      isDismissable
+      onOpenChange={(open) => {
+        if (!open) close();
+      }}
+      className="fixed inset-0 z-50 grid place-items-center bg-background/80 p-4 backdrop-blur-sm"
+    >
+      <AriaModal
+        className={cn(
+          "w-full max-w-md rounded-xl border bg-card p-6 text-card-foreground shadow-xl outline-none",
+          className,
+        )}
+      >
+        <Dialog aria-labelledby={titleId} className="flex h-full flex-col outline-none">
+          <div className="mb-5 flex items-center justify-between gap-4">
+            <h2 id={titleId} className="text-lg font-semibold">
+              {title}
+            </h2>
+            <button
+              type="button"
+              onClick={close}
+              aria-label={i18n.t("common.close")}
+              className="rounded-md px-2 py-1 text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              ×
+            </button>
+          </div>
+          {children}
+        </Dialog>
+      </AriaModal>
+    </ModalOverlay>
+  );
+}

package/src/router/router-context.ts

@@ -0,0 +1,6 @@
+import { useRouter } from "@tanstack/react-router";
+import type { RouterContext } from "./router.types.ts";
+
+export function useIntelRouterContext(): RouterContext {
+  return useRouter().options.context as RouterContext;
+}

package/src/router/router.tsx

@@ -0,0 +1,42 @@
+import {
+  createRootRouteWithContext,
+  createRoute,
+  createRouter,
+  lazyRouteComponent,
+  Navigate,
+} from "@tanstack/react-router";
+import { App } from "@/app/app.tsx";
+import type { RouterContext } from "./router.types.ts";
+
+const rootRoute = createRootRouteWithContext<RouterContext>()({ component: App });
+const redirectRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  component: () => <Navigate to="/knowledge" replace />,
+});
+const knowledgeRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/knowledge",
+  component: lazyRouteComponent(() => import("@/knowledge/knowledge.tsx"), "Knowledge"),
+});
+const flowsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/flows",
+  component: lazyRouteComponent(() => import("@/flows/flows.tsx"), "Flows"),
+});
+const toolsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/tools",
+  component: lazyRouteComponent(() => import("@/tools/tools.tsx"), "Tools"),
+});
+const routeTree = rootRoute.addChildren([redirectRoute, knowledgeRoute, flowsRoute, toolsRoute]);
+
+export function createIntelRouter(context: RouterContext) {
+  return createRouter({ routeTree, context });
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof createIntelRouter>;
+  }
+}

package/src/router/router.types.ts

@@ -0,0 +1,7 @@
+import type { IntelDataProvider } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import type { I18n } from "@/i18n/i18n.types.ts";
+
+export interface RouterContext {
+  data: IntelDataProvider;
+  i18n: I18n;
+}

package/src/styles.css

@@ -0,0 +1,120 @@
+@import "tailwindcss";
+@import "@blocknote/core/fonts/inter.css";
+@import "@blocknote/shadcn/style.css";
+@import "@xyflow/react/dist/style.css";
+@import "@react-sigma/core/lib/style.css";
+@source "../node_modules/@blocknote/shadcn";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(0.99 0.005 265);
+  --foreground: oklch(0.18 0.02 265);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.18 0.02 265);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.18 0.02 265);
+  --primary: oklch(0.45 0.17 265);
+  --primary-foreground: oklch(0.98 0.01 265);
+  --secondary: oklch(0.95 0.02 265);
+  --secondary-foreground: oklch(0.25 0.04 265);
+  --muted: oklch(0.96 0.01 265);
+  --muted-foreground: oklch(0.5 0.03 265);
+  --accent: oklch(0.94 0.03 265);
+  --accent-foreground: oklch(0.25 0.05 265);
+  --destructive: oklch(0.58 0.23 27);
+  --destructive-foreground: oklch(0.98 0.01 27);
+  --border: oklch(0.9 0.02 265);
+  --input: oklch(0.9 0.02 265);
+  --ring: oklch(0.58 0.15 265);
+  --sidebar: oklch(0.97 0.015 265);
+  --sidebar-foreground: oklch(0.2 0.03 265);
+  --sidebar-primary: oklch(0.45 0.17 265);
+  --sidebar-primary-foreground: oklch(0.98 0.01 265);
+  --sidebar-accent: oklch(0.92 0.035 265);
+  --sidebar-accent-foreground: oklch(0.24 0.06 265);
+  --sidebar-border: oklch(0.88 0.025 265);
+  --sidebar-ring: oklch(0.58 0.15 265);
+}
+
+.dark {
+  --background: oklch(0.15 0.025 265);
+  --foreground: oklch(0.96 0.01 265);
+  --card: oklch(0.19 0.03 265);
+  --card-foreground: oklch(0.96 0.01 265);
+  --popover: oklch(0.19 0.03 265);
+  --popover-foreground: oklch(0.96 0.01 265);
+  --primary: oklch(0.7 0.16 265);
+  --primary-foreground: oklch(0.16 0.03 265);
+  --secondary: oklch(0.25 0.035 265);
+  --secondary-foreground: oklch(0.95 0.01 265);
+  --muted: oklch(0.24 0.025 265);
+  --muted-foreground: oklch(0.7 0.025 265);
+  --accent: oklch(0.27 0.05 265);
+  --accent-foreground: oklch(0.96 0.01 265);
+  --destructive: oklch(0.7 0.19 25);
+  --destructive-foreground: oklch(0.98 0.01 25);
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 16%);
+  --ring: oklch(0.66 0.14 265);
+  --sidebar: oklch(0.18 0.035 265);
+  --sidebar-foreground: oklch(0.95 0.01 265);
+  --sidebar-primary: oklch(0.7 0.16 265);
+  --sidebar-primary-foreground: oklch(0.16 0.03 265);
+  --sidebar-accent: oklch(0.26 0.05 265);
+  --sidebar-accent-foreground: oklch(0.96 0.01 265);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.66 0.14 265);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.react-sigma {
+  --sigma-background-color: var(--background);
+  --sigma-controls-background-color: var(--card);
+  --sigma-controls-background-color-hover: var(--muted);
+  --sigma-controls-border-color: var(--border);
+  --sigma-controls-color: var(--card-foreground);
+}

package/src/theme/custom.css

@@ -0,0 +1 @@
+/* Generated by `intel build`. Intel defaults are active. */

package/src/theme/theme.ts

@@ -0,0 +1,16 @@
+export type Theme = "dark" | "light";
+
+export function resolveTheme(prefersDark: boolean): Theme {
+  return prefersDark ? "dark" : "light";
+}
+
+export function applyTheme(root: HTMLElement, theme: Theme): void {
+  root.classList.toggle("dark", theme === "dark");
+}
+
+export function watchSystemTheme(root: HTMLElement, media: MediaQueryList): () => void {
+  applyTheme(root, resolveTheme(media.matches));
+  const onChange = (event: MediaQueryListEvent) => applyTheme(root, resolveTheme(event.matches));
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}