@anchrd/intel 0.59.0

package/ui/src/i18n/i18n-context.tsx

@@ -0,0 +1,65 @@
+import { createContext, type ReactNode, useContext, useEffect, useMemo, useState } from "react";
+import { createI18n } from "./i18n.ts";
+import type { I18n, LanguageChoice, Languages } from "./i18n.types.ts";
+
+// The React seam of the i18n. Until #227 the instance travelled in the router context, which is
+// static — there was no way to switch language without reloading the page. It is a context now, for
+// the same reason the data provider is one: it is a dependency, not a module singleton. Unlike the
+// data provider it has a sensible default — the English instance — so a component rendered without
+// a provider (component tests) does not throw but simply speaks English.
+const defaultI18n = createI18n();
+
+const I18nContext = createContext<I18n>(defaultI18n);
+
+// The choice between the available languages. `null` without a provider — not an empty list: the
+// settings dialog asks precisely whether there is anything to switch at all.
+const LanguageContext = createContext<LanguageChoice | null>(null);
+
+interface I18nProviderProps {
+  languages: Languages;
+  children: ReactNode;
+}
+
+// The provider holds the active language — the only state the i18n has at runtime. It is client
+// state (a preference), so it lives locally; remembering it is the job of createLanguages.
+export function I18nProvider({ languages, children }: I18nProviderProps) {
+  const [current, setCurrent] = useState(languages.initial);
+  const i18n = useMemo(() => languages.i18n(current), [languages, current]);
+
+  // The root document reports the same language as the active catalog — at start AND after every
+  // switch. Otherwise a screen reader reads Spanish text with English pronunciation rules, and the
+  // browser offers a translation that is none. index.html only carries the static default.
+  useEffect(() => {
+    document.documentElement.lang = i18n.locale;
+  }, [i18n.locale]);
+
+  const choice = useMemo<LanguageChoice>(
+    () => ({
+      codes: languages.codes,
+      current,
+      select: (code) => {
+        languages.remember(code);
+        setCurrent(code);
+      },
+    }),
+    [languages, current],
+  );
+
+  return (
+    <I18nContext value={i18n}>
+      <LanguageContext value={choice}>{children}</LanguageContext>
+    </I18nContext>
+  );
+}
+
+// The whole instance, not just `t`: intel's screens hand `i18n` down to presentational children as a
+// prop (ToolRows, GraphNotice, RelationGraphView …), and those need the object. A `useT()` would
+// force either drilling `t` separately or turning every one of those into a hook consumer — a
+// different refactor, and one that buys nothing.
+export function useI18n(): I18n {
+  return useContext(I18nContext);
+}
+
+export function useLanguage(): LanguageChoice | null {
+  return useContext(LanguageContext);
+}

package/ui/src/i18n/i18n-languages/i18n-languages.ts

@@ -0,0 +1,83 @@
+import { z } from "zod";
+import custom from "../custom.json";
+import de from "../de.json";
+import en from "../en.json";
+import es from "../es.json";
+import { CatalogSchema, createI18n } from "../i18n.ts";
+import type { Catalog, Languages, LanguagesDeps } from "../i18n.types.ts";
+
+// The language choice: which languages exist is the built-in set plus whatever `intel build` wrote
+// into custom.json; which one runs is the reader's decision. Kept apart from createI18n, because the
+// lookup needs to know none of this — it receives a catalog and reads from it.
+
+// localStorage is right here and ONLY here: the language choice is a UI preference, not a mirror of
+// server data (TanStack Query holds that) and not a secret. That is exactly why it survives a
+// reload.
+const STORE_KEY = "intel.language";
+
+// The catalogs shipped with the UI. English is the default AND the key source; German and Spanish
+// are translations of it.
+//
+// ⚠️ They cross no build step that could check them: `intel build` validates the CUSTOMER's
+// language files against en.json, and these three are already in the package. What replaces that
+// check is `i18n.unit.ts`, which compares the key sets of every file next to en.json. Without it a
+// key added only to en.json would be English text in two other languages, and only a reader using
+// those languages would ever notice.
+const BUILT_IN: Record<string, Catalog> = {
+  en: CatalogSchema.parse(en) as Catalog,
+  de: CatalogSchema.parse(de) as Catalog,
+  es: CatalogSchema.parse(es) as Catalog,
+};
+
+// The language everything falls back to: it is compiled in and can therefore never be missing.
+const FALLBACK = "en";
+
+// custom.json is a build artifact — `intel build` writes it and validates each customer file
+// strictly against en.json. It is still parsed here, because a custom.json from before the switcher
+// is a FLAT catalog: accepting that silently would swap the customer's translation for English
+// without a word.
+const BundleSchema = z.strictObject({
+  defaultLanguage: z.string().min(1),
+  catalogs: z.record(z.string(), CatalogSchema),
+});
+
+export function createLanguages({ store }: LanguagesDeps = {}): Languages {
+  const bundle = BundleSchema.parse(custom);
+  // The built-in catalogs always stand available; the bundle comes last so a customer catalog under
+  // the same code REPLACES the shipped one rather than being ignored. Without that, changing one
+  // sentence of the German UI would mean maintaining a fourth language.
+  const catalogs: Record<string, Catalog> = { ...BUILT_IN, ...bundle.catalogs };
+  const codes = Object.keys(catalogs);
+
+  // A remembered language that no longer exists (the customer removed it from intel.json) is
+  // discarded rather than running half the UI on the English fallback.
+  const remembered = store?.getItem(STORE_KEY);
+  const preferred =
+    remembered !== null && remembered !== undefined && codes.includes(remembered)
+      ? remembered
+      : bundle.defaultLanguage;
+
+  return {
+    codes,
+    initial: codes.includes(preferred) ? preferred : FALLBACK,
+    // An unknown code yields the English instance rather than an empty catalog: `t` would otherwise
+    // return every key verbatim, which looks like a broken screen instead of an untranslated one.
+    i18n: (code) => {
+      const catalog = catalogs[code];
+      return catalog ? createI18n({ catalog }) : createI18n();
+    },
+    remember: (code) => store?.setItem(STORE_KEY, code),
+  };
+}
+
+// A language's name in its own language ("Deutsch", never "German") — that way everybody finds their
+// entry even while the UI is in a language they cannot read. It therefore lives in no catalog: a
+// language the customer adds tomorrow would otherwise need a new key in every language file. A code
+// Intl does not know is shown unchanged.
+export function languageName(code: string): string {
+  try {
+    return new Intl.DisplayNames([code], { type: "language" }).of(code) ?? code;
+  } catch {
+    return code;
+  }
+}

package/ui/src/i18n/i18n.ts

@@ -0,0 +1,32 @@
+import { z } from "zod";
+import english from "./en.json";
+import type { Catalog, I18n, I18nDeps } from "./i18n.types.ts";
+
+// The whole i18n of intel-ui. No framework: i18next and friends bring bundle weight and an
+// abstraction (namespaces, plural rules, loading states) that has no consumer here. What is needed
+// is a lookup plus placeholders — the twenty lines below.
+//
+// English is the default AND the source of keys: en.json is the only file in which a new string is
+// born. A translated catalog arrives as `catalog`; whatever is missing from it falls back to the
+// English text — an incomplete translation shows English words, never an empty screen or a raw key.
+export const CatalogSchema = z.record(z.string(), z.string());
+
+const fallback = CatalogSchema.parse(english) as Catalog;
+
+export function createI18n({ catalog = fallback }: I18nDeps = {}): I18n {
+  return {
+    locale: catalog.$locale ?? fallback.$locale ?? "en-US",
+    t(key, variables) {
+      // The key itself is the last fallback: a typo becomes visible on screen instead of vanishing
+      // as an empty string.
+      const template = catalog[key] ?? fallback[key] ?? key;
+      if (!variables) return template;
+      // Only known placeholders are replaced; an unfilled `{foo}` stays put — a visible gap beats a
+      // silent blank.
+      return template.replace(/\{(\w+)\}/g, (match, name: string) => {
+        const value = variables[name];
+        return value === undefined ? match : String(value);
+      });
+    },
+  };
+}

package/ui/src/i18n/i18n.types.ts

@@ -0,0 +1,49 @@
+// A catalog is a flat file of dotted keys → text. Flat, because the lookup is then a map read and
+// the completeness test compares two key sets instead of walking two trees. The reserved `$locale`
+// key carries the file's BCP-47 locale (the sigil keeps it out of the UI key namespace), so every
+// language file is self-describing and date/number formats need no second configuration.
+export type Catalog = Record<string, string>;
+
+// What `intel build` writes into src/i18n/custom.json: the starting language plus every language
+// file listed in the customer's intel.json. The runtime loads nothing on demand — WHICH languages
+// exist is decided at build time; only which one runs is the reader's choice.
+export interface CatalogBundle {
+  defaultLanguage: string;
+  catalogs: Record<string, Catalog>;
+}
+
+export interface I18nDeps {
+  // The active language file. Without one the UI runs on the English catalog (the default).
+  catalog?: Catalog;
+}
+
+export interface I18n {
+  locale: string;
+  t(key: string, variables?: Record<string, string | number>): string;
+}
+
+// The slice of the Web Storage API the preferences need — as a port, not a global, so a choice is
+// testable without a DOM and localStorage is touched in exactly one place per preference.
+export interface PreferenceStore {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+export interface LanguagesDeps {
+  store?: PreferenceStore;
+}
+
+export interface Languages {
+  // Every selectable code: the built-in ones first, then whatever the customer added.
+  codes: string[];
+  // The language the app starts in: the remembered choice, otherwise the bundle's default.
+  initial: string;
+  i18n(code: string): I18n;
+  remember(code: string): void;
+}
+
+export interface LanguageChoice {
+  codes: string[];
+  current: string;
+  select(code: string): void;
+}

package/ui/src/kind-icon.ts

@@ -0,0 +1,97 @@
+import {
+  CircleCheck,
+  FileAudio,
+  FileImage,
+  FileSpreadsheet,
+  FileTerminal,
+  FileText,
+  FileType,
+  FileVideo,
+  Folder,
+  KanbanSquare,
+  type LucideIcon,
+  Paperclip,
+  Presentation,
+  Table,
+  Workflow,
+} from "lucide-react";
+import {
+  type AttachmentPreviewKind,
+  attachmentPreviewKind,
+} from "@/attachment-detail/attachment-detail.ts";
+import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+
+/**
+ * The one place a kind becomes a picture.
+ *
+ * ⚠️ Two screens draw the same row — the sidebar tree and the folder's own table — and they must
+ * draw it the same. A second map beside this one drifts the first time a kind is added: the tree
+ * would show the new icon and the folder screen the old one, for the same thing on the same screen.
+ * The picture is also only half the answer; both places still name the kind for a reader who cannot
+ * see it (`tree.kind.*`, `node.kind.*`), because an icon has no text.
+ */
+export const kindIcons: Record<TreeEntry["kind"], LucideIcon> = {
+  folder: Folder,
+  document: FileText,
+  attachment: Paperclip,
+  table: Table,
+  flow: Workflow,
+  // ⚠️ A board draws as a board, never as a folder, although it behaves like one in the tree. The
+  // icon is the ONLY thing that tells a reader the row will not open (D66, #376) — the chevron is
+  // absent, and an absent chevron looks exactly like an empty folder.
+  board: KanbanSquare,
+  // A task has an icon although the tree never draws one: the folder table, search results and the
+  // relation graph all reach a task by its own address, and each of them asks this map.
+  task: CircleCheck,
+};
+
+/**
+ * One symbol per file ART, for the row of an `attachment` node (#815). `kindIcons.attachment`
+ * above stays the generic paperclip: it is what a caller asking the narrower "what kind of NODE is
+ * this" question gets, and archives and the relation graph still ask exactly that.
+ *
+ * ⚠️ **`unsupported` is the only member sharing `kindIcons.attachment`'s Paperclip, and that is on
+ * purpose.** It is the one answer that means "this application cannot tell", so it draws as the
+ * same generic clip a caller gets for the kind alone.
+ */
+const attachmentIcons: Record<AttachmentPreviewKind, LucideIcon> = {
+  image: FileImage,
+  pdf: FileText,
+  word: FileType,
+  spreadsheet: FileSpreadsheet,
+  presentation: Presentation,
+  // ⚠️ Both draw even though neither has a preview anywhere in this application (#815, Jack's
+  // decision of 2026-08-29): the question this map answers is what a reader should be able to
+  // TELL APART, not what can be rendered on screen.
+  audio: FileAudio,
+  video: FileVideo,
+  unsupported: Paperclip,
+};
+
+/**
+ * The picture for one ROW, which is the kind plus the one thing that changes it: a document offered
+ * as a slash command draws differently (#775), and an attachment draws by its own file art (#815).
+ *
+ * ⚠️ **This is the sidebar's answer to a design question, not a shortcut.** The command itself is
+ * NOT written in the tree: the column is around 240px wide, and the text cut titles down to
+ * `Angebo…` and `Tiefenr…` — it displaced the name to say something that stands one level deeper
+ * anyway. The icon says the same thing in the space the row already has.
+ *
+ * ⚠️ It takes the ENTRY and not the kind, so every screen that draws a row gets the same answer
+ * from the same function — the reason `kindIcons` exists at all, one step further on. A caller that
+ * reaches for `kindIcons[kind]` directly is not wrong, it is answering the narrower question.
+ *
+ * ⚠️ **A `TreeEntry` carries the node, not its version (#815)** — `mediaType` lives on the version
+ * (`packages/intel/src/contract/node.ts`), so the row has no field it could ask. The title's
+ * extension is the only signal it has, and `attachmentPreviewKind` already falls back to exactly
+ * that as its second path; passing it an empty media type here skips straight to that path. A title
+ * with no recognised extension draws the same Paperclip it always has — no regression, and no reach
+ * into the contract or the tree query for a question of presentation alone.
+ */
+export function iconFor(entry: TreeEntry): LucideIcon {
+  if (entry.type === "node" && entry.node.promptName !== null) return FileTerminal;
+  if (entry.type === "node" && entry.kind === "attachment") {
+    return attachmentIcons[attachmentPreviewKind(entry.node.title, "")];
+  }
+  return kindIcons[entry.kind];
+}

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

@@ -0,0 +1,68 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { AppRoot, createRefusalStore } from "@/app-root/app-root.tsx";
+import {
+  createIntelDataProvider,
+  loginPath,
+} from "@/data/intel-data-provider/intel-data-provider.ts";
+import { createIntelQueryClient } from "@/data/query-client.ts";
+import { createBrowserSignIn, createSignInGuard } from "@/data/sign-in/sign-in.ts";
+import { I18nProvider } from "@/i18n/i18n-context.tsx";
+import { createLanguages } from "@/i18n/i18n-languages/i18n-languages.ts";
+import { createIntelRouter } from "@/router/router.tsx";
+import { applyTheme, readThemeChoice, SystemThemeQuery, themeFor } from "@/theme/theme.ts";
+import { ThemeProvider } from "@/theme/theme-context.tsx";
+import { RelativeClockProvider } from "@/time/relative-time.tsx";
+import { TimeZoneProvider } from "@/time/time-context.tsx";
+import "./styles.css";
+import "./theme/custom.css";
+
+// The first paint, BEFORE React — otherwise the light shell flashes until the provider mounts. Only
+// applied here and deliberately NOT subscribed: the subscription belongs to the ThemeProvider, and
+// two of them would overwrite one another.
+applyTheme(
+  document.documentElement,
+  themeFor(readThemeChoice(window.localStorage), window.matchMedia(SystemThemeQuery).matches),
+);
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Missing #root element");
+
+// Which languages exist is decided at build time and lies ready in the bundle; only which one runs
+// is the reader's choice, and that choice is remembered in localStorage.
+const languages = createLanguages({ store: window.localStorage });
+const signIn = createBrowserSignIn(loginPath);
+const mounted = createRoot(root);
+const queryClient = createIntelQueryClient();
+
+// ⚠️ The refusal arrives from inside a fetch rather than from React, and it used to be answered by
+// a module-level `let` plus a hand-written repaint. Both are gone (#456): the flag is a store React
+// can subscribe to, and everything that decides what is on screen lives in `AppRoot` — a component
+// a test can render. `main.tsx` is wiring again, and only wiring.
+const refusal = createRefusalStore();
+const data = createIntelDataProvider({
+  onUnauthorized: createSignInGuard(signIn, () => refusal.refuse()),
+});
+const router = createIntelRouter({ data });
+
+mounted.render(
+  <StrictMode>
+    {/* The refusal screen sits INSIDE the providers too: it is text like any other, and it is the
+        one screen a reader sees when nothing else works — English-only there would be the worst
+        place for it. */}
+    <I18nProvider languages={languages}>
+      <ThemeProvider store={window.localStorage}>
+        {/* ⚠️ INSIDE `I18nProvider`: the formatter needs both — the language says HOW a time is
+            written, the zone WHICH time it is (#467). */}
+        <TimeZoneProvider store={window.localStorage}>
+          <RelativeClockProvider>
+            <QueryClientProvider client={queryClient}>
+              <AppRoot data={data} router={router} refusal={refusal} />
+            </QueryClientProvider>
+          </RelativeClockProvider>
+        </TimeZoneProvider>
+      </ThemeProvider>
+    </I18nProvider>
+  </StrictMode>,
+);

package/ui/src/modal/modal.tsx

@@ -0,0 +1,53 @@
+import { useId } from "react";
+import { Modal as AriaModal, Dialog, ModalOverlay } from "react-aria-components";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils.ts";
+
+export function Modal({
+  title,
+  close,
+  children,
+  className,
+}: {
+  title: string;
+  close(): void;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const i18n = useI18n();
+  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>
+  );
+}