@anchrd/intel-ui 0.48.0 → 0.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.48.0",
+  "version": "0.50.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -33,7 +33,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@anchrd/intel-contract": "^0.27.0",
+    "@anchrd/intel-contract": "^0.28.0",
     "@blocknote/core": "^0.52.1",
     "@blocknote/react": "^0.52.1",
     "@blocknote/shadcn": "^0.52.1",

package/src/board/board-assignee/board-assignee-picker.tsx

@@ -25,17 +25,11 @@ export function AssigneePicker({
   boardId,
   current,
   onPick,
-  open,
-  onOpenChange,
   children,
 }: {
   boardId: string;
   current: string | null;
   onPick(assigneeId: string | null): void;
-  // Controlled only where somebody else decides when it opens — the plus menu does, the chip does
-  // not. Left out, the trigger below governs it on its own.
-  open?: boolean;
-  onOpenChange?(next: boolean): void;
   // ⚠️ THE ANCHOR, and it is not optional decoration (#723). Radix positions a menu against its
   // trigger; the first version of this component had none, and the menu never appeared. Every test
   // stayed green, because jsdom has no layout and Testing Library finds a portal wherever it sits.
@@ -44,19 +38,34 @@ export function AssigneePicker({
   const i18n = useI18n();
   const { data } = useIntelRouterContext();
   const [query, setQuery] = useState("");
+  /**
+   * ⚠️ **The query is gated on being OPEN, and that is not an optimisation** (#757). Since the empty
+   * query became a real question, an ungated `useQuery` fires the moment the component mounts — and
+   * this component wraps every assignee circle on the screen. A board with forty cards would open
+   * forty requests for a menu nobody has touched.
+   *
+   * ⚠️ **Uncontrolled, since #750.** This used to accept an `open` prop for the plus menu, which
+   * opened the picker without a trigger of its own. That entry is gone — the circle is always on the
+   * row and opens the same menu — and the prop went with it rather than staying as a second way in
+   * that nothing drives and nothing keeps in step.
+   */
+  const [shown, setShown] = useState(false);
   const trimmed = query.trim();
+  /**
+   * ⚠️ **Enabled for an EMPTY query too, since #757.** Nothing typed asks a different question than
+   * one letter: it names the people who reach this board, a short set this installation already
+   * knows. One letter stays refused, because that IS a search and a bad one.
+   */
   const search = useQuery({
     queryKey: ["board-assignee-search", boardId, trimmed],
-    enabled: trimmed.length >= 2,
+    enabled: shown && (trimmed.length === 0 || trimmed.length >= 2),
     queryFn: async () => await data.searchBoardAssignees(boardId, trimmed),
   });
   const found = search.data?.items ?? [];
+  const more = search.data?.more ?? 0;
 
   return (
-    <DropdownMenu
-      {...(open === undefined ? {} : { open })}
-      {...(onOpenChange === undefined ? {} : { onOpenChange })}
-    >
+    <DropdownMenu onOpenChange={setShown}>
       <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-64">
         <div className="p-1">
@@ -67,7 +76,7 @@ export function AssigneePicker({
             aria-label={i18n.t("board.assignee.search")}
             placeholder={i18n.t("board.assignee.search")}
             onChange={(event) => setQuery(event.target.value)}
-            onKeyDown={(event) => event.key === "Escape" && onOpenChange?.(false)}
+            onKeyDown={(event) => event.key === "Escape" && setShown(false)}
             className="w-full rounded-md border bg-background px-2 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
           />
         </div>
@@ -75,7 +84,6 @@ export function AssigneePicker({
           <>
             <DropdownMenuItem
               onSelect={() => {
-                onOpenChange?.(false);
                 onPick(null);
               }}
             >
@@ -84,12 +92,15 @@ export function AssigneePicker({
             <DropdownMenuSeparator />
           </>
         )}
-        {trimmed.length < 2 ? (
+        {/* ⚠️ Only for the ONE-character case. An empty query now answers with suggestions, and
+            telling somebody to keep typing while showing them names would be a hint that contradicts
+            the list under it. */}
+        {trimmed.length === 1 ? (
           <p className="px-2 py-1.5 text-muted-foreground text-xs">
             {i18n.t("board.assignee.keepTyping")}
           </p>
         ) : null}
-        {trimmed.length >= 2 && !search.isPending && found.length === 0 ? (
+        {trimmed.length !== 1 && !search.isPending && found.length === 0 ? (
           <p className="px-2 py-1.5 text-muted-foreground text-xs">
             {i18n.t("board.assignee.nobody")}
           </p>
@@ -98,7 +109,6 @@ export function AssigneePicker({
           <DropdownMenuItem
             key={person.id}
             onSelect={() => {
-              onOpenChange?.(false);
               onPick(person.id);
             }}
           >
@@ -109,6 +119,13 @@ export function AssigneePicker({
             <span className="ml-auto truncate text-muted-foreground text-xs">{person.email}</span>
           </DropdownMenuItem>
         ))}
+        {/* ⚠️ The cap says so rather than hiding. Three names that look like the whole list teach
+            the reader that nobody else exists, which is the one thing this list must not say. */}
+        {more === 0 ? null : (
+          <p className="px-2 py-1.5 text-muted-foreground text-xs">
+            {i18n.t("board.assignee.more", { count: more })}
+          </p>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/src/board/board-kanban/board-kanban.tsx

@@ -16,6 +16,7 @@ import { useState } from "react";
 import type { BoardHandle, ColumnWithCards } from "@/board/board-data/board-data.types.ts";
 import { type Family, familiesOf } from "@/board/board-stripes/board-stripes.ts";
 import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils";
 import {
   type Drop,
   dragEndToDrop,
@@ -326,7 +327,13 @@ function Column({
       aria-label={entry.column.title}
       className="group/column flex w-64 shrink-0 flex-col gap-2"
     >
-      <h3 className="flex items-baseline gap-2 px-1 text-sm font-medium">
+      <h3 className="flex items-center gap-2 px-1 text-sm font-medium">
+        {/* ⚠️ The dot is DECORATION and says so (#725). The column's name is right beside it in
+            words, so announcing the colour would repeat the name in a form nobody can act on — and
+            for somebody who cannot see it, a second announcement of "Backlog" is noise, not help.
+            ⚠️ An inline style, not a class: the value is chosen by a person at runtime, and Tailwind
+            only ships classes its scanner saw in the source. */}
+        <ColumnDot color={entry.column.color} />
         {entry.column.title}
         <span className="text-xs text-muted-foreground tabular-nums">{entry.cards.length}</span>
         {entry.unknown === true ? (
@@ -647,3 +654,27 @@ function depthOf(
     ? i18n.t("board.stripes.root", { level: family.level })
     : i18n.t("board.stripes.under", { level: family.level, column: parentColumn });
 }
+
+/**
+ * The colour of a column, as a dot (#725).
+ *
+ * ⚠️ **One component for two places.** The kanban head draws it and so does a linked task in the
+ * open card; written twice they drift, and a dot that means one thing here and another there is
+ * worse than no dot.
+ *
+ * ⚠️ **Absent is a real state, not a missing value.** A board configured before colours existed has
+ * none, and painting it grey-by-default would claim somebody chose grey. The reader's own muted
+ * tone says "no colour set" without pretending otherwise.
+ */
+export function ColumnDot({ color }: { color?: string | undefined }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "size-2 shrink-0 rounded-full",
+        color === undefined && "bg-muted-foreground/40",
+      )}
+      {...(color === undefined ? {} : { style: { backgroundColor: color } })}
+    />
+  );
+}

package/src/board/board-settings/board-settings.tsx

@@ -1,4 +1,8 @@
-import { ARCHIVE_COLUMN_ID, type BoardColumn } from "@anchrd/intel-contract/board";
+import {
+  ARCHIVE_COLUMN_ID,
+  type BoardColumn,
+  DEFAULT_COLUMN_COLOR,
+} from "@anchrd/intel-contract/board";
 import { ChevronDown, ChevronUp, X } from "lucide-react";
 import { useState } from "react";
 import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
@@ -94,6 +98,23 @@ export function BoardSettings({ board, onClose }: { board: BoardHandle; onClose(
         <ul className="space-y-2">
           {columns.map((column, index) => (
             <li key={column.id} className="flex items-center gap-2">
+              {/* ⚠️ A free colour, not a palette (Jack's decision 2026-08-22) — see the contract
+                  for why that is affordable here: the value only ever fills a dot.
+                  ⚠️ The native `input type="color"`, not a built one. It is the platform's own
+                  picker, it works with a keyboard and a screen reader without anybody writing that
+                  part, and "kaufen statt bauen" is the rule this repository states for exactly this
+                  case. */}
+              <input
+                type="color"
+                value={column.color ?? DEFAULT_COLUMN_COLOR}
+                aria-label={i18n.t("board.settings.columnColor", { column: column.title })}
+                onChange={(event) => {
+                  const next = [...columns];
+                  next[index] = { ...column, color: event.target.value };
+                  setColumns(next);
+                }}
+                className="size-7 shrink-0 cursor-pointer rounded-md border bg-background outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
               <input
                 value={column.title}
                 aria-label={i18n.t("board.settings.columnName", { column: column.title })}

package/src/board/board-task/board-task.ts

@@ -18,6 +18,13 @@ export interface TaskLink {
   title: string | null;
   /** The column the linked task sits in, so its state is readable without opening it. */
   columnTitle: string | null;
+  /**
+   * The colour of that column (#725), so the row can show the state as a dot as well as a word.
+   *
+   * ⚠️ `undefined` is a real answer, not a gap: a board configured before colours existed has none,
+   * and a blocker outside this board has no column at all.
+   */
+  columnColor: string | undefined;
   /** Set on a subtask only: whether it sits in a column the board calls terminal. */
   done: boolean;
 }
@@ -57,6 +64,7 @@ export function linksOf(task: BoardTask, columns: ColumnWithCards[]): TaskLink[]
         id: card.id,
         title: card.title,
         columnTitle: column.title,
+        columnColor: column.color,
         done: column.terminal,
       });
     }
@@ -69,6 +77,7 @@ export function linksOf(task: BoardTask, columns: ColumnWithCards[]): TaskLink[]
         id: card.id,
         title: card.title,
         columnTitle: column.title,
+        columnColor: column.color,
         done: false,
       });
     }
@@ -85,6 +94,7 @@ export function linksOf(task: BoardTask, columns: ColumnWithCards[]): TaskLink[]
       // says "something outside this board"; the id says nothing at all.
       title: blocking?.card.title ?? null,
       columnTitle: blocking?.column.title ?? null,
+      columnColor: blocking?.column.color,
       done: false,
     });
   }

package/src/board/board-task/board-task.tsx

@@ -1,10 +1,11 @@
 import type { BoardTask } from "@anchrd/intel-contract/board";
-import { Lock, Plus, Square, SquareCheck } from "lucide-react";
+import { Lock, Plus } from "lucide-react";
 import { useState } from "react";
 import { AssigneeChip } from "@/board/board-assignee/board-assignee.tsx";
 import { BoardChip } from "@/board/board-chip/board-chip.tsx";
 import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
 import { DatesChip } from "@/board/board-dates/board-dates.tsx";
+import { ColumnDot } from "@/board/board-kanban/board-kanban.tsx";
 import { StatusChip } from "@/board/board-status/board-status.tsx";
 import {
   DropdownMenu,
@@ -13,24 +14,37 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu.tsx";
 import { useI18n } from "@/i18n/i18n-context.tsx";
-import { type LinkKind, linksOf, type TaskLink } from "./board-task.ts";
-
-const linkIcons: Record<LinkKind, typeof Lock> = {
-  subtask: Square,
-  blocker: Lock,
-  blocked: Lock,
-};
+import { linksOf, type TaskLink } from "./board-task.ts";
 
 /** One entry of the link list. The icon carries the kind; nothing writes the word out. */
 function LinkRow({ link, onOpen }: { link: TaskLink; onOpen(id: string): void }) {
   const i18n = useI18n();
-  const Icon = link.kind === "subtask" && link.done ? SquareCheck : linkIcons[link.kind];
+  /**
+   * ⚠️ **A subtask shows its column as a DOT, not a tick** (#725). Jack's report of 2026-08-21 was
+   * that the open subtasks carry a checkmark in front of them that cannot be ticked. A checkbox
+   * promises an action this list does not have, and a card is finished by being moved, not by being
+   * ticked here.
+   *
+   * ⚠️ **The lock stays.** A blocker outside this board is not a state on a scale, it is something
+   * the reader may not open, and a colour cannot say that.
+   */
+  /**
+   * ⚠️ **The lock is about READABILITY, not about the kind**, and keying it on the kind was wrong in
+   * both directions: `blocked` is always a card of this board and always readable, while `blocker`
+   * may be any node anywhere — the one case where this answer holds no title and no column at all.
+   *
+   * `title === null` is exactly that case, and it is the same condition the row already uses one
+   * line down to say "outside this board". A dot there would be a colour for a column that does not
+   * exist.
+   */
+  const unreadable = link.title === null;
   return (
     <li className="flex items-center gap-2 border-b py-2 last:border-0">
-      <Icon
-        aria-hidden="true"
-        className={`size-4 shrink-0 ${link.kind === "blocker" ? "text-destructive" : "text-muted-foreground"}`}
-      />
+      {unreadable ? (
+        <Lock aria-hidden="true" className="size-4 shrink-0 text-destructive" />
+      ) : (
+        <ColumnDot color={link.columnColor} />
+      )}
       <button
         type="button"
         onClick={() => onOpen(link.id)}

package/src/feed/feed.tsx

@@ -18,6 +18,21 @@ import { initials, useSessionUser } from "@/user-name/user-name.ts";
 
 const PageSize = 30;
 
+// How many steps of the trail a card shows.
+//
+// ⚠️ The LAST ones, not the first, and that is the whole decision (#758). A path answers "where does
+// this sit", and the answer is at its end: `… / system / Kundenwissen` says where `Kunde A` lives,
+// `Agenten / Anton Anchrd / sys…` says where the tree begins, which every card shares. Cutting from
+// the front is what `truncate` does on its own, so this has to be decided here rather than left to
+// CSS.
+const TrailSteps = 2;
+
+/** The tail of a trail, with a leading ellipsis where something was cut. */
+export function shortTrail(titles: readonly string[]): string {
+  if (titles.length <= TrailSteps) return titles.join(" / ");
+  return `… / ${titles.slice(-TrailSteps).join(" / ")}`;
+}
+
 // Who to show. Only the first two reach the server; `people` is applied here because whether an
 // actor is a machine is Gate's answer and arrives with the names, not with the events.
 type Audience = "all" | "mine" | "people";
@@ -280,9 +295,17 @@ function FeedCard({
         <span className="text-sm leading-snug">
           {i18n.t(`feed.action.${event.action}`, { who, title: event.nodeTitle })}
         </span>
-        <span className="flex items-center justify-between gap-3">
-          <span className="truncate text-xs text-muted-foreground">
-            {event.path.map((step) => step.title).join(" / ")}
+        {/* ⚠️ `min-w-0` is not decoration. A grid item defaults to `min-width: auto`, so without it
+            this row grows to whatever the path needs and pushes the button PAST the card's edge —
+            which is what a four-step path did on a phone. `truncate` below cannot save it either: it
+            shortens against the width it is given, and its parent was already too wide. */}
+        <span className="flex min-w-0 items-center justify-between gap-3">
+          <span
+            className="truncate text-xs text-muted-foreground"
+            // The whole path stays reachable where there is a pointer to rest.
+            title={event.path.map((step) => step.title).join(" / ")}
+          >
+            {shortTrail(event.path.map((step) => step.title))}
           </span>
           {/* ⚠️ A button, not a label. The whole point of the mark is getting there, and a span
               carries no focus — so the keyboard requirement could not be met by a surface that had

package/src/i18n/de.json

@@ -87,6 +87,7 @@
   "board.assignSomebody": "Jemandem zuweisen",
   "board.assignee.clear": "Zuständigkeit entfernen",
   "board.assignee.keepTyping": "Mindestens zwei Zeichen tippen",
+  "board.assignee.more": "Hier nicht aufgeführt: {count}. Tippe, um zu suchen.",
   "board.assignee.nobody": "Niemand mit Zugriff auf dieses Board passt dazu",
   "board.assignee.search": "Person suchen",
   "board.backTo": "Zurück zu {board}",
@@ -131,6 +132,7 @@
   "board.moveTo": "in eine andere Spalte verschieben",
   "board.removeLabel": "dieses Label entfernen",
   "board.settings.addColumn": "+ Spalte",
+  "board.settings.columnColor": "Farbe der Spalte {column}",
   "board.settings.columnName": "Name der Spalte {column}",
   "board.settings.description": "Spalten und was das Board zeigt.",
   "board.settings.duplicateName": "Zwei Spalten heißen {column}. Namen müssen sie unterscheidbar machen.",

package/src/i18n/en.json

@@ -87,6 +87,7 @@
   "board.assignSomebody": "Assign to somebody",
   "board.assignee.clear": "Remove the assignee",
   "board.assignee.keepTyping": "Type at least two characters",
+  "board.assignee.more": "Not listed here: {count}. Type to search.",
   "board.assignee.nobody": "Nobody with access to this board matches",
   "board.assignee.search": "Find a person",
   "board.backTo": "Back to {board}",
@@ -131,6 +132,7 @@
   "board.moveTo": "move it to another column",
   "board.removeLabel": "remove this label",
   "board.settings.addColumn": "+ Column",
+  "board.settings.columnColor": "Colour of the {column} column",
   "board.settings.columnName": "Name of the column {column}",
   "board.settings.description": "Columns and what the board shows.",
   "board.settings.duplicateName": "Two columns are called {column}. Names have to tell them apart.",

package/src/i18n/es.json

@@ -87,6 +87,7 @@
   "board.assignSomebody": "Asignar a alguien",
   "board.assignee.clear": "Quitar el responsable",
   "board.assignee.keepTyping": "Escribe al menos dos caracteres",
+  "board.assignee.more": "No listados aquí: {count}. Escribe para buscar.",
   "board.assignee.nobody": "Nadie con acceso a este tablero coincide",
   "board.assignee.search": "Buscar una persona",
   "board.backTo": "Volver a {board}",
@@ -131,6 +132,7 @@
   "board.moveTo": "moverla a otra columna",
   "board.removeLabel": "quitar esta etiqueta",
   "board.settings.addColumn": "+ Columna",
+  "board.settings.columnColor": "Color de la columna {column}",
   "board.settings.columnName": "Nombre de la columna {column}",
   "board.settings.description": "Columnas y lo que muestra el tablero.",
   "board.settings.duplicateName": "Dos columnas se llaman {column}. Los nombres deben distinguirlas.",