@anchrd/intel-ui 0.8.5 → 0.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -13,6 +13,7 @@
   },
   "files": [
     "src",
+    "scripts",
     "!src/**/*.unit.ts",
     "!src/**/*.unit.tsx",
     "index.html",
@@ -23,7 +24,7 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite",
-    "lint:tokens": "! grep -rnE --exclude='*.unit.ts' --exclude='*.unit.tsx' '#[0-9a-fA-F]{3,8}|(bg|text|border|ring|shadow|fill|stroke)-(white|black)|(bg|text|border|ring|shadow|fill|stroke)-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-[0-9]{2,3}' src",
+    "lint:tokens": "node scripts/lint-tokens.mjs src",
     "test": "vitest run",
     "typecheck": "tsc --noEmit"
   },

package/scripts/lint-tokens.mjs

@@ -0,0 +1,187 @@
+#!/usr/bin/env node
+// Semantic tokens only: no hex colours, no Tailwind palette classes. The check this replaces was a
+// single grep, and it could not tell `#101` — a ticket number in a comment — from `#101` the
+// colour, because nothing separates them but where they stand (issue 104).
+//
+// ⚠️ The fix is to look at less, not to match less. Comments are stripped and everything else is
+// checked with exactly the patterns the grep used, so no colour that used to be caught slips
+// through. A colour named in a comment paints nothing; a colour in code paints something.
+//
+// ⚠️ Stripping comments needs to know what a comment is. `//` inside a string is a URL, not a
+// comment, and getting that wrong would blind the check to real code — the failure mode this file
+// exists to avoid. Hence the small scanner rather than a regex over the raw text.
+
+import { readdir, readFile } from "node:fs/promises";
+import { join, relative } from "node:path";
+import process from "node:process";
+
+const ROOT = process.argv[2] ?? "src";
+
+// Exactly the patterns the shell version used.
+const FORBIDDEN = [
+  { name: "hex colour", pattern: /#[0-9a-fA-F]{3,8}\b/ },
+  {
+    name: "palette class",
+    pattern:
+      /\b(bg|text|border|ring|shadow|fill|stroke)-(white|black|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)(-\d{2,3})?\b/,
+  },
+];
+
+// Test files may spell anything out — they are where a rule gets stated, including by counter
+// example. Same exclusion the shell version carried.
+const SKIP_FILE = /\.unit\.tsx?$/;
+const CHECK_FILE = /\.(tsx?|css)$/;
+
+/**
+ * The file with its comments blanked out, line structure intact so line numbers still mean
+ * something. Strings keep their contents: a hex colour in a string is exactly what must be caught.
+ */
+function withoutComments(source, isCss) {
+  let out = "";
+  let i = 0;
+  // "code" | "line" | "block" | quote character for a string
+  let state = "code";
+  while (i < source.length) {
+    const char = source[i];
+    const next = source[i + 1];
+    if (state === "code") {
+      // A regex literal would be the third thing that can hold a `/`, but none in this package
+      // contains `//` or `/*`, and treating one as a comment would only ever blind the check to
+      // something inside a regex — never let a colour through.
+      if (!isCss && char === "/" && next === "/") {
+        state = "line";
+        out += "  ";
+        i += 2;
+        continue;
+      }
+      if (char === "/" && next === "*") {
+        state = "block";
+        out += "  ";
+        i += 2;
+        continue;
+      }
+      if (char === '"' || char === "'" || char === "`") {
+        state = char;
+        out += char;
+        i += 1;
+        continue;
+      }
+      out += char;
+      i += 1;
+      continue;
+    }
+    if (state === "line") {
+      if (char === "\n") {
+        state = "code";
+        out += char;
+      } else {
+        out += " ";
+      }
+      i += 1;
+      continue;
+    }
+    if (state === "block") {
+      if (char === "*" && next === "/") {
+        state = "code";
+        out += "  ";
+        i += 2;
+        continue;
+      }
+      out += char === "\n" ? char : " ";
+      i += 1;
+      continue;
+    }
+    // Inside a string: kept as it stands, escapes skipped so `\"` does not end it early.
+    if (char === "\\") {
+      out += source.slice(i, i + 2);
+      i += 2;
+      continue;
+    }
+    if (char === state) state = "code";
+    out += char;
+    i += 1;
+  }
+  return out;
+}
+
+/**
+ * The checker checked, on every run.
+ *
+ * ⚠️ This is here because of how the shell version could have failed: a pattern that matches
+ * nothing, or an exclusion that swallows the whole tree, reports success. `Checked 0 files` and
+ * `checked everything, all clean` look identical from the outside, and the second one is what
+ * everybody reads. Stating the cases the check exists for — and the ones it must stay quiet about —
+ * means a rule that stops working says so instead of going green.
+ */
+function selfTest() {
+  const mustCatch = [
+    ['const c = "#fff";', "a three-digit hex in a string"],
+    ['const c = "#a1b2c3";', "a six-digit hex"],
+    ['const c = "#11223344";', "an eight-digit hex with alpha"],
+    ["  color: #fff;", "a hex in CSS"],
+    ['<div className="bg-red-500" />', "a palette class"],
+    ['<div className="text-white" />', "a palette colour without a number"],
+  ];
+  const mustAllow = [
+    ["// the folder table, since (#101)", "a ticket number in a line comment"],
+    ["/* archived like a document (#109) */", "a ticket number in a block comment"],
+    ["{/* two lists say what they show (#99) */}", "a ticket number in a JSX comment"],
+    ['<div className="bg-background text-muted-foreground" />', "semantic tokens"],
+  ];
+  // ⚠️ Not in either list, and deliberately: a URL fragment that happens to read like a colour —
+  // `https://example.com/#fff` — is still reported. The grep did the same, so nothing regressed
+  // here, and the one way to stop it would be to make the colour pattern narrower. That trade goes
+  // the wrong way: a false alarm costs one rewritten line, a missed colour costs the rule. The
+  // first attempt at this file listed it as "must allow" and this check refused it, which is the
+  // check doing its job.
+  const failures = [];
+  for (const [line, what] of mustCatch) {
+    const code = withoutComments(line, line.startsWith("  color:"));
+    if (!FORBIDDEN.some(({ pattern }) => pattern.test(code))) {
+      failures.push(`stopped catching ${what}: ${line}`);
+    }
+  }
+  for (const [line, what] of mustAllow) {
+    const code = withoutComments(line, false);
+    if (FORBIDDEN.some(({ pattern }) => pattern.test(code))) {
+      failures.push(`started refusing ${what}: ${line}`);
+    }
+  }
+  if (failures.length > 0) {
+    console.error("The token check is no longer checking what it is for:\n");
+    for (const failure of failures) console.error(`  ${failure}`);
+    process.exit(1);
+  }
+}
+
+async function* files(dir) {
+  for (const entry of await readdir(dir, { withFileTypes: true })) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) yield* files(path);
+    else if (CHECK_FILE.test(entry.name) && !SKIP_FILE.test(entry.name)) yield path;
+  }
+}
+
+selfTest();
+
+const findings = [];
+for await (const path of files(ROOT)) {
+  const source = await readFile(path, "utf8");
+  const code = withoutComments(source, path.endsWith(".css"));
+  code.split("\n").forEach((line, index) => {
+    for (const { name, pattern } of FORBIDDEN) {
+      const hit = pattern.exec(line);
+      if (hit) findings.push(`${relative(".", path)}:${index + 1}  ${name}  ${hit[0]}`);
+    }
+  });
+}
+
+if (findings.length > 0) {
+  console.error(
+    `Use semantic tokens instead. ${findings.length} hard-coded value${findings.length === 1 ? "" : "s"}:\n`,
+  );
+  for (const finding of findings) console.error(`  ${finding}`);
+  console.error("\nA ticket reference in a comment is fine — comments are not checked.");
+  process.exit(1);
+}
+console.log(`No hard-coded colours or palette classes in ${ROOT}.`);

package/src/data/intel-data-provider/intel-data-provider.ts

@@ -50,6 +50,7 @@ import {
   UpdateKnowledgeNodeInput,
 } from "@anchrd/intel-contract";
 import type { z } from "zod";
+import { createBrowserSignIn } from "@/data/sign-in/sign-in.ts";
 import type { IntelDataProvider, TreeEntry } from "./intel-data-provider.types.ts";
 
 // ⚠️ The refusal's `code`, not only its prose. A view that has to tell four different refusals
@@ -104,13 +105,14 @@ export function createIntelDataProvider(
     ((url: string) => {
       if (typeof window !== "undefined") window.location.assign(url);
     });
+  // ⚠️ The default goes through `createBrowserSignIn` rather than redirecting straight away, and it
+  // has to: this is the code path that produced the endless reload (#118). A caller that supplies
+  // its own `onUnauthorized` takes the guard on as well — `main.tsx` does, because it also has to
+  // put something on the screen once the redirect is refused.
   const unauthorized =
     deps.onUnauthorized ??
     (() => {
-      if (typeof window !== "undefined") {
-        const returnTo = `${window.location.pathname}${window.location.search}`;
-        window.location.assign(loginPath(returnTo));
-      }
+      if (typeof window !== "undefined") createBrowserSignIn(loginPath).attempt();
     });
 
   async function response(path: string, init: RequestInit = {}): Promise<Response> {

package/src/data/sign-in/sign-in.ts

@@ -0,0 +1,97 @@
+// Sending somebody to sign in is the right answer to a 401 — but only ONCE. If the surface still
+// answers 401 after a successful sign-in, redirecting again produces a page that reloads forever:
+// Gate signs the person in, the interface asks, the answer is 401, and round it goes. From the
+// outside it looks like a broken deployment; from the inside every single step succeeded, which is
+// what makes it expensive to find (#118).
+//
+// It happens whenever a token is valid to Gate but not accepted by `/api/v1` — a session that
+// expires between the two calls, a bearer for a different audience, a service key that no longer
+// holds. The same fix landed in anchrd/agents first; this is its counterpart here.
+
+import type { SignIn, SignInDeps } from "./sign-in.types.ts";
+
+const Marker = "intel:last-sign-in";
+
+// Long enough to cover Gate's redirect chain, short enough that somebody who genuinely returns
+// hours later gets a fresh attempt rather than an error page.
+const LoopWindowMs = 30_000;
+
+export function createSignIn(deps: SignInDeps): SignIn {
+  return {
+    attempt() {
+      // ⚠️ Every unusable marker counts as "no recent attempt", never as "loop" — missing, damaged,
+      // and dated in the future all mean the same thing here. The last one is not hypothetical: a
+      // clock that jumps backwards (time zone, NTP) leaves a marker ahead of `now`, and reading a
+      // negative age as "just tried" would lock somebody out over the wrong wall clock. Refusing
+      // costs an error page; allowing costs one extra reload, so the doubt goes to allowing.
+      const last = Number(deps.read(Marker) ?? 0);
+      const age = deps.now() - last;
+      if (Number.isFinite(last) && last > 0 && age >= 0 && age < LoopWindowMs) return false;
+
+      deps.write(Marker, String(deps.now()));
+      deps.go(deps.loginPath(deps.currentPath()));
+      return true;
+    },
+  };
+}
+
+/**
+ * The same thing wired to the browser.
+ *
+ * ⚠️ `sessionStorage`, not `localStorage`: the window is about one sign-in journey, and a marker
+ * that outlives the tab would meet the next visit as if it were still mid-loop. Both throw rather
+ * than return null when storage is blocked, so both accesses are guarded — see `attempt`.
+ */
+export function createBrowserSignIn(loginPath: (returnTo?: string) => string): SignIn {
+  return createSignIn({
+    now: () => Date.now(),
+    read: (key) => {
+      try {
+        return window.sessionStorage.getItem(key);
+      } catch {
+        return null;
+      }
+    },
+    write: (key, value) => {
+      try {
+        window.sessionStorage.setItem(key, value);
+      } catch {
+        // Nothing to do: without a marker the next 401 redirects once more. One extra reload beats
+        // an error page for somebody who could have been let in.
+      }
+    },
+    go: (url) => window.location.assign(url),
+    currentPath: () => `${window.location.pathname}${window.location.search}`,
+    loginPath,
+  });
+}
+
+/**
+ * What to do with a 401, across all of them at once (#130).
+ *
+ * ⚠️ The reason this is a guard and not a call to `attempt()` at each 401: a first load without a
+ * session fires several requests together — session, tree, flows — and every one of them answers
+ * 401. The first starts the redirect; the rest arrive while the browser is still on this page,
+ * find the marker the first one just wrote, and read it as "we already tried, this is a loop". It
+ * is not — it is this very sign-in, still in flight.
+ *
+ * Without `leaving`, the interface refuses itself before it can leave, and nobody reaches the
+ * login at all. That is worse than the loop this whole mechanism exists to prevent: a loop still
+ * eventually shows a login, a self-refusal never does.
+ */
+export function createSignInGuard(signIn: SignIn, onRefused: () => void): () => void {
+  let leaving = false;
+  // Latches for its own reason: once the surface has turned down a freshly issued credential,
+  // later 401s say nothing new, and repainting for each would flicker the screen once per request
+  // the page had in flight.
+  let refused = false;
+  return () => {
+    if (leaving || refused) return;
+    if (signIn.attempt()) {
+      leaving = true;
+      return;
+    }
+    refused = true;
+    onRefused();
+  };
+}

package/src/data/sign-in/sign-in.types.ts

@@ -0,0 +1,15 @@
+export interface SignInDeps {
+  now(): number;
+  read(key: string): string | null;
+  write(key: string, value: string): void;
+  go(url: string): void;
+  currentPath(): string;
+  loginPath(returnTo?: string): string;
+}
+
+export interface SignIn {
+  // True when it sent the person away, false when it refused to because it just did. A caller that
+  // gets `false` must show something rather than wait — the redirect that would have explained
+  // itself is exactly what is not happening.
+  attempt(): boolean;
+}

package/src/folder-contents/folder-contents.tsx

@@ -33,7 +33,7 @@ function targetOf(entry: TreeEntry): ResourceTarget {
  * that now includes the ones this screen's own menu makes: `ResourceMenu` invalidates
  * `["tree", parentId]`, which is this level.
  *
- * ⚠️ There is no "Kind" column since issue 101. The icon says what a row is, in the same picture the
+ * ⚠️ There is no "Kind" column since #101. The icon says what a row is, in the same picture the
  * sidebar draws two centimetres to its left, and `sr-only` says it in words for everyone who does
  * not read pictures. A column repeating the icon in prose costs the width the title needs.
  */

package/src/i18n/en.json

@@ -259,6 +259,10 @@
   "runs.outcome.failed": "failed",
   "auth.signOut": "Sign out",
   "auth.signOutFailed": "Signing out failed. Check your connection and try again.",
+  "signIn.refusedTitle": "Signed in, but not accepted",
+  "signIn.refusedBody": "Gate signed you in, and this installation did not accept the credential. You have not been sent back to the login, because that is where the loop starts.",
+  "signIn.refusedLikely": "Most often the session expired between the two steps, or the credential was issued for a different installation. Reloading is worth one try; after that, whoever runs this installation has to look.",
+  "signIn.refusedRetry": "Try again",
   "common.title": "Title",
   "common.create": "Create",
   "common.save": "Save",

package/src/main.tsx

@@ -2,9 +2,14 @@ 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 {
+  createIntelDataProvider,
+  loginPath,
+} from "@/data/intel-data-provider/intel-data-provider.ts";
+import { createBrowserSignIn, createSignInGuard } from "@/data/sign-in/sign-in.ts";
 import { createI18n } from "@/i18n/i18n.ts";
 import { createIntelRouter } from "@/router/router.tsx";
+import { SignInRefused } from "@/sign-in-refused/sign-in-refused.tsx";
 import { SystemThemeQuery, watchSystemTheme } from "@/theme/theme.ts";
 import "./styles.css";
 import "./theme/custom.css";
@@ -13,14 +18,35 @@ watchSystemTheme(document.documentElement, window.matchMedia(SystemThemeQuery));
 
 const root = document.getElementById("root");
 if (!root) throw new Error("Missing #root element");
-const data = createIntelDataProvider();
 const i18n = createI18n();
+const signIn = createBrowserSignIn(loginPath);
+const mounted = createRoot(root);
+const queryClient = new QueryClient();
+
+// The shell is painted from a function because a refused sign-in has to replace it, and that
+// refusal arrives from inside a fetch rather than from React.
+let refused = false;
+
+const data = createIntelDataProvider({
+  onUnauthorized: createSignInGuard(signIn, () => {
+    refused = true;
+    paint();
+  }),
+});
 const router = createIntelRouter({ data, i18n });
 
-createRoot(root).render(
-  <StrictMode>
-    <QueryClientProvider client={new QueryClient()}>
-      <RouterProvider router={router} />
-    </QueryClientProvider>
-  </StrictMode>,
-);
+function paint(): void {
+  mounted.render(
+    <StrictMode>
+      {refused ? (
+        <SignInRefused i18n={i18n} />
+      ) : (
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      )}
+    </StrictMode>,
+  );
+}
+
+paint();

package/src/resource-menu/resource-menu.tsx

@@ -105,7 +105,7 @@ export function resourceErrorKey(error: unknown): string {
  * `variant` is only how the trigger is painted, never which entries it holds. `title` is a plain
  * icon button at the end of a title line, put there by `TitleRow` and by nobody else, so it is
  * always the last thing in that line (#53). `row` is the form for a row in a list — quiet until the
- * row is hovered or something in it takes focus — and since issue 101 that list is the folder table.
+ * row is hovered or something in it takes focus — and since #101 that list is the folder table.
  *
  * ⚠️ `row` needs a `group/row` on the row it sits in, or it stays invisible to the mouse: the
  * reveal is `group-hover/row`, and a group that is not there never hovers. Below `md` and under
@@ -279,7 +279,7 @@ export function ResourceMenu({
               {i18n.t("knowledge.share")}
             </DropdownMenuItem>
           ) : null}
-          {/* A flow is archived like a document (issue 109). It keeps its versions and its runs; what it
+          {/* A flow is archived like a document (#109). It keeps its versions and its runs; what it
               loses is reach — it leaves the tree, cannot be started, and stops resolving as another
               flow's callee. */}
           <DropdownMenuSeparator />

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

@@ -0,0 +1,34 @@
+import { ShieldAlert } from "lucide-react";
+import type { I18n } from "@/i18n/i18n.types.ts";
+
+/**
+ * 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({ i18n }: { i18n: I18n }) {
+  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>
+  );
+}