@anchrd/intel 0.59.0

package/ui/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/ui/src/router/router.tsx

@@ -0,0 +1,67 @@
+import {
+  createRootRouteWithContext,
+  createRoute,
+  createRouter,
+  lazyRouteComponent,
+  Navigate,
+} from "@tanstack/react-router";
+import { App } from "@/app/app.tsx";
+import type { RouterContext } from "./router.types.ts";
+import { selectionSearch } from "./selection-search.ts";
+
+const rootRoute = createRootRouteWithContext<RouterContext>()({ component: App });
+const redirectRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  // The feed shows what just happened, and that is a better start than a pane asking somebody
+  // to pick a document first (#813).
+  component: () => <Navigate to="/feed" replace />,
+});
+const nodesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/nodes",
+  validateSearch: selectionSearch,
+  component: lazyRouteComponent(() => import("@/nodes/nodes.tsx"), "Nodes"),
+});
+const flowsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/flows",
+  validateSearch: selectionSearch,
+  component: lazyRouteComponent(() => import("@/flows/flows.tsx"), "Flows"),
+});
+const feedRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/feed",
+  component: lazyRouteComponent(() => import("@/feed/feed.tsx"), "Feed"),
+});
+
+const archiveRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/archive",
+  validateSearch: selectionSearch,
+  component: lazyRouteComponent(() => import("@/archive/archive.tsx"), "Archive"),
+});
+const toolsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/tools",
+  validateSearch: selectionSearch,
+  component: lazyRouteComponent(() => import("@/tools/tools.tsx"), "Tools"),
+});
+const routeTree = rootRoute.addChildren([
+  redirectRoute,
+  nodesRoute,
+  flowsRoute,
+  toolsRoute,
+  feedRoute,
+  archiveRoute,
+]);
+
+export function createIntelRouter(context: RouterContext) {
+  return createRouter({ routeTree, context });
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof createIntelRouter>;
+  }
+}

package/ui/src/router/router.types.ts

@@ -0,0 +1,8 @@
+import type { IntelDataProvider } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+
+// ⚠️ No `i18n` here, and it must not come back (#227). The router context is static: an instance
+// travelling in it can never change, which is why the language was unswitchable before. Text comes
+// from `useI18n()` and from nowhere else — two ways to the same string are two states that drift.
+export interface RouterContext {
+  data: IntelDataProvider;
+}

package/ui/src/router/selection-search.ts

@@ -0,0 +1,88 @@
+// The ways one selected level can be shown, across every surface that has more than one (#818).
+//
+// ⚠️ A surface's FIRST view is its default and rides as the absence of the parameter — `editor` for
+// a document, a folder and a flow, `kanban` for a board. That is what keeps a plain link meaning
+// the editor, as it has since #35, and it is what lets one parameter serve surfaces whose defaults
+// differ: the address says what is NOT the default, and nothing else.
+export const IntelViews = ["editor", "graph", "runs", "kanban", "table", "code"] as const;
+export type IntelView = (typeof IntelViews)[number];
+
+// The values the parameter can carry: every view that is nobody's default. Writing them out rather
+// than deriving them from the defaults is deliberate — this list is what the router validates
+// against, and a validator that reads a second list to decide is a validator with two truths.
+const IntelViewParams = ["graph", "runs", "table", "code"] as const;
+export type IntelViewParam = (typeof IntelViewParams)[number];
+
+function viewParam(value: unknown): IntelViewParam | null {
+  return IntelViewParams.includes(value as IntelViewParam) ? (value as IntelViewParam) : null;
+}
+
+export type SelectionSearch = Record<string, unknown> & {
+  select?: string;
+  view?: IntelViewParam;
+  /**
+   * The card of the selected board that is open, by its node id.
+   *
+   * ⚠️ **Beside `select`, not instead of it.** A task is not a level of the tree the sidebar can
+   * select; it is something shown INSIDE the board that is selected. Carrying it as `select` would
+   * make the tree try to reveal a node it does not draw, and the back button would leave the board.
+   */
+  task?: string;
+};
+
+// One search parameter carries "open this one" into an area: the header search names a hit, the
+// screen for that area selects it. Keeping it in the URL is what makes a hit reachable with Enter
+// alone — the dialog never reaches into a screen's own state.
+//
+// `view` is the second: which way the selected level is shown — the editor, the relation graph
+// (#19), or the runs of the selected flow (#35). It sits in the URL for the same reason `select`
+// does: what someone is looking at should survive a reload and be linkable.
+//
+// ⚠️ Unknown parameters are passed through rather than dropped. The portal's connect flow returns
+// to `/tools` with its own marker, and a validator that kept only what it knows would delete it.
+export function selectionSearch(search: Record<string, unknown>): SelectionSearch {
+  const { select, view, task, ...rest } = search;
+  const withSelect =
+    typeof select === "string" && select.length > 0 ? { ...rest, select } : { ...rest };
+  const withTask =
+    typeof task === "string" && task.length > 0 ? { ...withSelect, task } : withSelect;
+  const named = viewParam(view);
+  return named === null ? withTask : { ...withTask, view: named };
+}
+
+// Screens are lazy route components with no route object at hand, so they read the parameter off
+// the location instead of off a typed route.
+export function selectedFrom(search: unknown): string | null {
+  const select = (search as { select?: unknown } | null)?.select;
+  return typeof select === "string" && select.length > 0 ? select : null;
+}
+
+// What the address NAMES, or null when it names nothing. Null is not "the editor": which view a
+// surface falls back to is the surface's own answer, and `viewOf` below is where it is given.
+export function viewFrom(search: unknown): IntelViewParam | null {
+  return viewParam((search as { view?: unknown } | null)?.view);
+}
+
+/**
+ * The view a surface is showing: what the address names, if that surface even has it, and otherwise
+ * its default — the first entry of `views`.
+ *
+ * ⚠️ The fallback is what keeps a foreign parameter from emptying a screen. `?view=graph` on a
+ * board names a view a board does not have; read literally it would draw neither the kanban nor the
+ * table. It is answered as "the board's default" instead, which is also what a reader following
+ * such a link expects to see.
+ */
+export function viewOf(search: unknown, views: readonly IntelView[]): IntelView {
+  const named = viewFrom(search);
+  const fallback = views[0] ?? "editor";
+  return named !== null && views.includes(named) ? named : fallback;
+}
+
+export function graphViewFrom(search: unknown): boolean {
+  return viewFrom(search) === "graph";
+}
+
+export function openTaskFrom(search: unknown): string | null {
+  const task = (search as { task?: unknown } | null)?.task;
+  return typeof task === "string" && task.length > 0 ? task : null;
+}

package/ui/src/save-button/save-button.tsx

@@ -0,0 +1,94 @@
+import { useBlocker } from "@tanstack/react-router";
+import { Save } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { Modal } from "@/modal/modal.tsx";
+
+/**
+ * Saving, in the title line beside the name of the thing being saved (#24).
+ *
+ * ⚠️ Unsaved is a state that must survive colour blindness, so it is never carried by colour alone.
+ * The button only exists while there is work to save; it fills, grows a dot and spells the word
+ * out. Three signals at once, of which two are readable without seeing any colour at all.
+ *
+ * ⚠️ The accessible name names the state as well. A screen reader gets neither the fill nor the
+ * dot, and saving in progress must not sound like another available action. The visible word stays
+ * a prefix of the name, so speech input still reaches the button by what it reads.
+ */
+export function SaveButton({
+  dirty,
+  saving,
+  onSave,
+}: {
+  dirty: boolean;
+  saving: boolean;
+  onSave(): void;
+}) {
+  const i18n = useI18n();
+  if (!dirty && !saving) return null;
+  const label = i18n.t(saving ? "common.saving" : "common.saveDirty");
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        {/* The wrapper remains the trigger while saving, when the button is deliberately disabled. */}
+        <TooltipTrigger asChild>
+          <span className="inline-flex">
+            <button
+              type="button"
+              disabled={saving}
+              onClick={onSave}
+              aria-label={label}
+              data-dirty={dirty}
+              className="inline-flex h-8 items-center gap-2 rounded-md bg-primary px-2.5 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-70"
+            >
+              <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-current" />
+              <Save aria-hidden="true" className="size-4 shrink-0" />
+              <span>{saving ? i18n.t("common.saving") : i18n.t("common.save")}</span>
+            </button>
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>{label}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+/**
+ * The state, said out loud at the moment it would otherwise be lost.
+ *
+ * ⚠️ Without this the button is the only carrier of "not saved yet", and the one person who needs
+ * that answer is the one who has already looked away — clicking the next document in the tree is a
+ * plain navigation, and the editor would unmount with the work in it. `enableBeforeUnload` covers
+ * the other exit, the one the router never sees: closing the tab or reloading.
+ */
+export function UnsavedChangesGuard({ dirty }: { dirty: boolean }) {
+  const i18n = useI18n();
+  const blocker = useBlocker({
+    shouldBlockFn: () => true,
+    disabled: !dirty,
+    enableBeforeUnload: () => dirty,
+    withResolver: true,
+  });
+  if (blocker.status !== "blocked") return null;
+  return (
+    <Modal title={i18n.t("common.unsavedTitle")} close={blocker.reset}>
+      <p className="text-sm text-muted-foreground">{i18n.t("common.unsavedBody")}</p>
+      <div className="mt-5 flex gap-2">
+        <button
+          type="button"
+          onClick={blocker.reset}
+          className="flex-1 rounded-md border px-4 py-2 text-sm font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {i18n.t("common.unsavedStay")}
+        </button>
+        <button
+          type="button"
+          onClick={blocker.proceed}
+          className="flex-1 rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground outline-none hover:bg-destructive/90 focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {i18n.t("common.unsavedLeave")}
+        </button>
+      </div>
+    </Modal>
+  );
+}

package/ui/src/section-hint/section-hint.tsx

@@ -0,0 +1,40 @@
+import { Info } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+/**
+ * An explanation behind an ⓘ, beside the thing it explains (#204, shared since #249).
+ *
+ * It exists for the sentence that answers "what IS this" — read once, then furniture. Not for the
+ * sentence you need WHILE you type: a reference read while writing must not be behind a hover, so
+ * something like a field's format ("five fields: minute, hour, …") stays a visible paragraph.
+ * That is the dividing line: *what is this* may hide, *how do I write this* may not.
+ *
+ * ⚠️ The hint is the trigger's accessible NAME, not only the tooltip's content: Radix describes the
+ * trigger by the content only while it is open, and a listener who tabs past a nameless icon button
+ * would never learn there is anything behind it.
+ *
+ * ⚠️ A real `<button>`, not a bare icon or a `<span>` with a hover style. A tooltip that only opens
+ * on hover cannot be opened at all on a touch device, and an element that is not focusable is one
+ * the keyboard walks straight past.
+ *
+ * ⚠️ It does NOT replace a field's description. Where this sits beside a form control, the control
+ * keeps its own `aria-describedby` pointing at an `sr-only` copy of the same words — the tooltip's
+ * content is in the accessibility tree only while it is open, so a field that gave up its
+ * description for one would quietly have lost it (#249).
+ */
+export function SectionHint({ hint }: { hint: string }) {
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger
+          type="button"
+          aria-label={hint}
+          className="rounded-full text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Info aria-hidden="true" className="size-3.5" />
+        </TooltipTrigger>
+        <TooltipContent className="max-w-xs">{hint}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/ui/src/sign-in-refused/sign-in-refused.tsx

@@ -0,0 +1,35 @@
+import { ShieldAlert } from "lucide-react";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+
+/**
+ * What stands on the screen when signing in worked and the surface still says no (#118).
+ *
+ * ⚠️ It exists because the honest alternative is worse. "Not signed in" would be a lie — Gate did
+ * sign the person in — and it is the lie that sends them back to the login they just came from,
+ * which is the loop. This names the state instead: signed in, credential refused, here is what it
+ * is usually.
+ *
+ * ⚠️ No automatic retry, and the button reloads rather than going to the login. Whatever refused
+ * the credential a second ago will refuse it again, and a page that keeps trying by itself is the
+ * behaviour being fixed. Retrying is the reader's decision, and it costs them one click.
+ */
+export function SignInRefused() {
+  const i18n = useI18n();
+  return (
+    <div role="alert" className="grid min-h-dvh place-items-center bg-background p-8">
+      <div className="max-w-prose text-center">
+        <ShieldAlert aria-hidden="true" className="mx-auto mb-4 size-8 text-muted-foreground" />
+        <h1 className="text-lg font-medium text-foreground">{i18n.t("signIn.refusedTitle")}</h1>
+        <p className="mt-2 text-sm text-muted-foreground">{i18n.t("signIn.refusedBody")}</p>
+        <p className="mt-4 text-sm text-muted-foreground">{i18n.t("signIn.refusedLikely")}</p>
+        <button
+          type="button"
+          onClick={() => window.location.reload()}
+          className="mt-6 rounded-md border px-4 py-2 text-sm font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {i18n.t("signIn.refusedRetry")}
+        </button>
+      </div>
+    </div>
+  );
+}

package/ui/src/styles.css

@@ -0,0 +1,189 @@
+@import "tailwindcss";
+@import "@blocknote/core/fonts/inter.css";
+@import "@blocknote/shadcn/style.css";
+@import "@xyflow/react/dist/style.css";
+@source "../node_modules/@blocknote/shadcn";
+
+@custom-variant dark (&:is(.dark *));
+
+/* The default theme is gate's, token for token: an achromatic base whose primary is black rather
+   than Intel's former blue (hue 265). Every value here is a default — `theme/custom.css` is loaded
+   after this file and a customer theme overrides any of them without touching a component. */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  /* The board's status ramp (anchrd/intel#286). These are the only tokens in Intel that carry hue
+     on purpose, and the reason is that they are the only ones asked to tell things APART: a month
+     grid of achromatic dots codes nothing, and neither does a graph whose blocked node looks like
+     its neighbour.
+
+     ⚠️ **A step belongs to a FAMILY, not to a status and not to a depth.** Every card descending
+     from the same root task takes the same step, whatever column it sits in and however deep it
+     hangs — that is what lets somebody see that the card in `Backlog` belongs to the one in
+     `In progress`. Depth is carried by the NUMBER of stripes, never by the hue: two channels for
+     two questions.
+
+     ⚠️ **Six, and then they repeat.** Two families sharing a step is not a fault. At twenty root
+     tasks every other answer is a palette nobody can tell apart, and a colour that cannot be told
+     apart says less than none.
+
+     ⚠️ Colour is never the only channel. Every card that carries stripes also names its level and
+     where its parent sits, in text, so a reader who does not see the difference reads it instead. */
+  --board-family-1: oklch(0.58 0.02 260);
+  --board-family-2: oklch(0.55 0.16 255);
+  --board-family-3: oklch(0.65 0.15 65);
+  --board-family-4: oklch(0.55 0.14 150);
+  --board-family-5: oklch(0.53 0.18 305);
+  --board-family-6: oklch(0.56 0.15 20);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.922 0 0);
+  --sidebar-primary-foreground: oklch(0.205 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+  /* The same six steps, lifted for a dark surface. Same hues, same order — a board must not change
+     which colour a column has when the reader switches the appearance. */
+  --board-family-1: oklch(0.72 0.02 260);
+  --board-family-2: oklch(0.7 0.14 255);
+  --board-family-3: oklch(0.78 0.13 65);
+  --board-family-4: oklch(0.72 0.13 150);
+  --board-family-5: oklch(0.7 0.16 305);
+  --board-family-6: oklch(0.71 0.14 20);
+}
+
+@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);
+  --color-board-family-1: var(--board-family-1);
+  --color-board-family-2: var(--board-family-2);
+  --color-board-family-3: var(--board-family-3);
+  --color-board-family-4: var(--board-family-4);
+  --color-board-family-5: var(--board-family-5);
+  --color-board-family-6: var(--board-family-6);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* `colorMode` on `<ReactFlow>` decides which of the library's two palettes it paints from; these
+   decide what the palette is made of. They are React Flow's own theming variables — its documented
+   extension point, set on its root class, not overrides hung on the internal class names of its
+   controls — so an installation with its own theme colours the canvas, the grid, the zoom buttons
+   and the overview map along with everything else. The radial relation graph needs none of this: it
+   is plain SVG, and its colours are semantic tokens read straight off the elements (#825). */
+.react-flow {
+  --xy-background-color: var(--background);
+  --xy-background-pattern-color: var(--border);
+  --xy-controls-button-background-color: var(--card);
+  --xy-controls-button-background-color-hover: var(--accent);
+  --xy-controls-button-color: var(--card-foreground);
+  --xy-controls-button-color-hover: var(--accent-foreground);
+  --xy-controls-button-border-color: var(--border);
+  --xy-minimap-background-color: var(--card);
+  /* The nodes have to read as nodes against the map's own background rather than as one white
+     block, so they take the token that is defined to contrast with it. */
+  --xy-minimap-node-background-color: var(--muted-foreground);
+  /* The veil over everything outside the viewport: a token, thinned, because opaque would hide the
+     part of the graph the map exists to show. */
+  --xy-minimap-mask-background-color: color-mix(in oklab, var(--muted) 70%, transparent);
+}
+
+/* A context edge is not a step in the order of work (#37), so it is drawn as material rather than as
+   procedure: dashed, thinner, and in the muted token instead of the edge colour. The dash pattern is
+   set on the edge itself; the colour belongs here, with the rest of the canvas theming, so an
+   installation's own tokens reach it too. */
+.react-flow .intel-context-edge .react-flow__edge-path {
+  stroke: var(--muted-foreground);
+  stroke-width: 1.5;
+}
+
+/* The start node in the overview map (#39). Nothing is written there, so the only thing that can
+   carry "this is where it begins" that far out is the colour. */
+.react-flow__minimap-node.intel-minimap-start {
+  fill: var(--primary);
+}