@anchrd/intel-ui 0.44.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

package/src/app/tree-move/tree-move.tsx

@@ -131,10 +131,16 @@ export function moveVerdict(input: {
   return "ok";
 }
 
-// ⚠️ Four refusals, four sentences. The service tells them apart by `code`
+// ⚠️ Five refusals, five sentences. The service tells them apart by `code`
 // (`nodes.ts:331/335/338/361`, `flows.ts:205–217/752`), and so does this: one message for all
 // of them would leave the reader guessing which of "you may not write there", "that is not a
-// folder", "that would be a loop" and "somebody else was faster" they have just hit.
+// folder", "that would be a loop", "that destination is archived" and "somebody else was faster"
+// they have just hit.
+//
+// ⚠️ `parent_archived` reaches this since #679: before that the service raised it for tasks only,
+// which never travel through the tree's move. The board is not a drop target for an archived node,
+// so a person meets it rarely — but a move over MCP or HTTP hits it, and the tree reloads from the
+// same error.
 export function moveErrorKey(error: unknown): string {
   const code =
     typeof error === "object" && error !== null && "code" in error
@@ -146,6 +152,8 @@ export function moveErrorKey(error: unknown): string {
       return "tree.move.failed.forbidden";
     case "parent_not_folder":
       return "tree.move.failed.notFolder";
+    case "parent_archived":
+      return "tree.move.failed.archived";
     case "move_cycle":
       return "tree.move.failed.cycle";
     case "update_conflict":

package/src/attachment-viewer/attachment-viewer.tsx

@@ -203,8 +203,8 @@ function ImagePreview({ file, title }: { file: File; title: string }) {
     return () => URL.revokeObjectURL(next);
   }, [file]);
   return url ? (
-    <div className="grid h-full min-h-64 place-items-center overflow-auto p-4">
-      <img src={url} alt={title} className="max-h-full max-w-full object-contain" />
+    <div className="grid h-full min-h-64 place-items-center overflow-auto">
+      <img src={url} alt={title} className="h-auto w-auto max-h-full max-w-full object-contain" />
     </div>
   ) : null;
 }

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

@@ -1,10 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { type ReactNode, useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu.tsx";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
@@ -24,12 +25,21 @@ export function AssigneePicker({
   boardId,
   current,
   onPick,
-  onClose,
+  open,
+  onOpenChange,
+  children,
 }: {
   boardId: string;
   current: string | null;
   onPick(assigneeId: string | null): void;
-  onClose(): 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.
+  children: ReactNode;
 }) {
   const i18n = useI18n();
   const { data } = useIntelRouterContext();
@@ -43,7 +53,11 @@ export function AssigneePicker({
   const found = search.data?.items ?? [];
 
   return (
-    <DropdownMenu open onOpenChange={(next) => !next && onClose()}>
+    <DropdownMenu
+      {...(open === undefined ? {} : { open })}
+      {...(onOpenChange === undefined ? {} : { onOpenChange })}
+    >
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-64">
         <div className="p-1">
           <input
@@ -53,7 +67,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" && onClose()}
+            onKeyDown={(event) => event.key === "Escape" && onOpenChange?.(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>
@@ -61,7 +75,7 @@ export function AssigneePicker({
           <>
             <DropdownMenuItem
               onSelect={() => {
-                onClose();
+                onOpenChange?.(false);
                 onPick(null);
               }}
             >
@@ -84,7 +98,7 @@ export function AssigneePicker({
           <DropdownMenuItem
             key={person.id}
             onSelect={() => {
-              onClose();
+              onOpenChange?.(false);
               onPick(person.id);
             }}
           >

package/src/board/board-assignee/board-assignee.ts

@@ -25,3 +25,24 @@ export function useAssigneeLabel(id: string | null): string {
   // replacement for the rule underneath it.
   return own ?? resolved ?? i18n.t("node.someUser");
 }
+
+/**
+ * The three tones the access summary already uses for its circles, so an assignee looks like the
+ * same kind of thing as a person on the share screen (#724).
+ *
+ * ⚠️ **Chosen by the ID, not by a position.** The access summary can count places in a row; a card
+ * stands alone, and there is no row to count in. Hashing the id means the same person keeps the same
+ * colour on every card and every board, which is the only property that makes a colour worth having
+ * here — a colour that moves is noise.
+ */
+const PERSON_TONES = [
+  "bg-muted text-muted-foreground",
+  "bg-accent text-accent-foreground",
+  "bg-secondary text-secondary-foreground",
+] as const;
+
+export function personTone(id: string): string {
+  let sum = 0;
+  for (const character of id) sum = (sum + character.charCodeAt(0)) % 4096;
+  return PERSON_TONES[sum % PERSON_TONES.length] ?? PERSON_TONES[0];
+}

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

@@ -1,9 +1,12 @@
+import { UserRound } from "lucide-react";
+import { AssigneePicker } from "@/board/board-assignee/board-assignee-picker.tsx";
 import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils";
 import { initials } from "@/user-name/user-name.ts";
-import { useAssigneeLabel } from "./board-assignee.ts";
+import { personTone, useAssigneeLabel } from "./board-assignee.ts";
 
 /**
- * The circle for whoever a card is for, and the way to take the assignment off.
+ * The circle for whoever a card is for, and the way to give it to somebody else.
  *
  * ⚠️ **One truth for two surfaces.** The opened card and the table both draw it; written twice they
  * would drift, and the drift would be an accessibility bug on exactly one of them.
@@ -11,35 +14,62 @@ import { useAssigneeLabel } from "./board-assignee.ts";
  * ⚠️ **One person, not a group.** Jack's decision 2026-08-20: the STYLE is borrowed from the access
  * summary, the field stays `assigneeId`. A row of circles would imply a second data model.
  *
- * ⚠️ **Only ever drawn for somebody.** "Nobody yet" as a chip is a placeholder for an absence, and
- * an absence needs no place on screen (#692).
+ * ⚠️ **Drawn even for nobody, since #724** — and that reverses #692 on purpose rather than by
+ * accident. A text chip saying "nobody yet" was a placeholder for an absence and earned no room. An
+ * empty circle is not that: it is the one control on the row that says the card COULD be given to
+ * somebody, and the card nobody owns is exactly the one that needs it.
+ *
+ * ⚠️ **The circle OPENS the picker; it no longer clears on click** (#723). A control that
+ * removes an assignment on the same click somebody uses to change one is a control that
+ * destroys work on a misclick. Removing lives inside the menu, where it says what it does.
  *
  * ⚠️ **The NAME lives on the button, and the circle is hidden.** Children of a `<button>` are
  * presentational in ARIA, so a label inside one is never announced and the button's own name wins.
  * Wrapping the circle in a control therefore takes the person out of the accessibility tree unless
  * the control says it too. That is the trap in `packages/ui/CLAUDE.md`.
  */
-export function AssigneeChip({ id, clear }: { id: string; clear(): void }) {
+export function AssigneeChip({
+  id,
+  boardId,
+  onPick,
+}: {
+  /**
+   * ⚠️ `null` DRAWS, it does not skip (#724). An empty circle with a person in it is the one place
+   * on the row that says "this could be given to somebody" — and without it there is nothing to
+   * press on a card nobody owns, which is exactly the card that needs an owner.
+   */
+  id: string | null;
+  boardId: string;
+  onPick(assigneeId: string | null): void;
+}) {
   const i18n = useI18n();
   const label = useAssigneeLabel(id);
   return (
-    <button
-      type="button"
-      aria-label={i18n.t("board.clearAssignee", { name: label })}
-      title={label}
-      onClick={clear}
-      className="shrink-0 rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring"
-    >
-      <span
-        // ⚠️ **Hidden, and it must stay hidden.** This span used to carry `role="img"` with the
-        // person's name, and that reached nobody: it sits inside a button. Giving it a role and a
-        // label back would not add a second announcement, it would add none, while making the code
-        // look as though the name were covered here rather than on the button.
-        aria-hidden="true"
-        className="flex size-7 items-center justify-center rounded-full bg-accent text-xs font-medium text-accent-foreground ring-2 ring-background"
+    <AssigneePicker boardId={boardId} current={id} onPick={onPick}>
+      <button
+        type="button"
+        aria-label={
+          id === null
+            ? i18n.t("board.assignSomebody")
+            : i18n.t("board.changeAssignee", { name: label })
+        }
+        title={label}
+        className="shrink-0 rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring"
       >
-        {initials(label)}
-      </span>
-    </button>
+        <span
+          // ⚠️ **Hidden, and it must stay hidden.** This span used to carry `role="img"` with the
+          // person's name, and that reached nobody: it sits inside a button. Giving it a role and a
+          // label back would not add a second announcement, it would add none, while making the code
+          // look as though the name were covered here rather than on the button.
+          aria-hidden="true"
+          className={cn(
+            "flex size-7 items-center justify-center rounded-full text-xs font-medium ring-2 ring-background",
+            id === null ? "border border-dashed text-muted-foreground" : personTone(id),
+          )}
+        >
+          {id === null ? <UserRound aria-hidden="true" className="size-4" /> : initials(label)}
+        </span>
+      </button>
+    </AssigneePicker>
   );
 }

package/src/board/board-chip/board-chip.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 /**
  * A value on a card, and the way to take it off again.
  *
@@ -13,17 +14,31 @@ export function BoardChip({
   label,
   action,
   onClick,
+  tone = "outline",
 }: {
   label: string;
   action: string;
   onClick(): void;
+  /**
+   * ⚠️ **`inverted` is for labels and nothing else** (#724). Status, dates and the assignee say what
+   * a card IS; a label is what somebody chose to call it, and the row needs to tell the two apart at
+   * a glance. Filling every chip would take that difference away again.
+   */
+  tone?: "outline" | "inverted";
 }) {
   return (
     <button
       type="button"
       aria-label={`${label}, ${action}`}
       onClick={onClick}
-      className="shrink-0 rounded-full border px-2.5 py-0.5 text-xs tabular-nums outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+      className={cn(
+        "flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        tone === "outline" && "border hover:bg-muted",
+        // ⚠️ `foreground`/`background`, not literal black and white. The two swap with the theme on
+        // their own, so the label stays inverted in dark mode instead of turning into a black chip
+        // on a black ground.
+        tone === "inverted" && "bg-foreground text-background hover:bg-foreground/85",
+      )}
     >
       {label}
     </button>

package/src/board/board-crumbs/board-crumbs.tsx

@@ -31,14 +31,17 @@ export function BoardCrumbs({
   const rest = shown.slice(1);
 
   return (
-    <nav aria-label={i18n.t("board.crumbs")} className="flex min-w-0 items-center gap-1.5 text-sm">
+    <nav
+      aria-label={i18n.t("board.crumbs")}
+      className="flex min-w-0 items-center gap-1.5 text-lg font-semibold"
+    >
       <button
         type="button"
         aria-label={i18n.t("board.backTo", { board: board?.title ?? "" })}
         onClick={() => onOpen(null)}
         className="-ml-1 rounded-md p-0.5 text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
       >
-        <ChevronLeft aria-hidden="true" className="size-4" />
+        <ChevronLeft aria-hidden="true" className="size-5" />
       </button>
 
       <Step crumb={board} onOpen={onOpen} />

package/src/board/board-dates/board-dates.ts

@@ -0,0 +1,40 @@
+/**
+ * The one place a card's two dates become the one thing a reader sees (#724).
+ *
+ * ⚠️ **Pure, and separate from the chip that draws it.** The rules here — which of the four
+ * combinations produces which text — are the part worth holding in a test without a DOM, and the
+ * part a second surface would otherwise re-derive slightly differently.
+ */
+
+/**
+ * `TT.MM.JJJJ`, from the ISO timestamp the contract carries.
+ *
+ * ⚠️ Built from the date PART of the string, never from a `Date`. `new Date("2026-08-15T00:00:00Z")`
+ * is the 14th in every timezone west of London, and a card would show the day before the one
+ * somebody picked. The stored value is a calendar day; it is read as one.
+ */
+export function germanDate(iso: string): string {
+  const [year, month, day] = iso.slice(0, 10).split("-");
+  return `${day}.${month}.${year}`;
+}
+
+/** What the `<input type="date">` in the popover needs: the same day, the other way round. */
+export function isoDay(iso: string): string {
+  return iso.slice(0, 10);
+}
+
+/**
+ * The label of the single date chip, or `null` when there is nothing to say.
+ *
+ * ⚠️ **A range only when there IS one.** With one date set the chip carries that date alone: a
+ * range with an empty half ("15.08.2026 - ") reads as a value somebody forgot to finish, and a
+ * placeholder for the missing end is a placeholder for an absence (#692).
+ */
+export function dateLabel(startDate: string | null, dueDate: string | null): string | null {
+  if (startDate !== null && dueDate !== null) {
+    return `${germanDate(startDate)} - ${germanDate(dueDate)}`;
+  }
+  if (startDate !== null) return germanDate(startDate);
+  if (dueDate !== null) return germanDate(dueDate);
+  return null;
+}

package/src/board/board-dates/board-dates.tsx

@@ -0,0 +1,105 @@
+import { CalendarDays } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { dateLabel, isoDay } from "./board-dates.ts";
+
+/**
+ * When a card runs, as one chip (#724).
+ *
+ * ⚠️ **One chip, not two.** It used to be `from …` and `due …` side by side, and that was two facts
+ * where a reader sees one: a card runs from a day to a day. The two are still edited and removed
+ * separately, but inside, where the popover can say which half it is changing.
+ *
+ * ⚠️ **The chip is the trigger.** A menu with no anchor never appears — that is `#723`, and it cost
+ * a whole release. `DropdownMenuContent` without a `DropdownMenuTrigger` in the same `DropdownMenu`
+ * is a finding in this repository.
+ */
+export function DatesChip({
+  startDate,
+  dueDate,
+  write,
+}: {
+  startDate: string | null;
+  dueDate: string | null;
+  write(input: { startDate?: string | null; dueDate?: string | null }): void;
+}) {
+  const i18n = useI18n();
+  const label = dateLabel(startDate, dueDate);
+  if (label === null) return null;
+
+  // ⚠️ Midnight UTC, the same shape the plus menu writes. A card's dates are calendar days here, and
+  // a second format would make two cards written by two paths sort against each other.
+  const asStored = (day: string) => (day === "" ? null : `${day}T00:00:00.000Z`);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        aria-label={`${label}, ${i18n.t("board.dates.edit")}`}
+        className="flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs tabular-nums outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <CalendarDays aria-hidden="true" className="size-3.5" />
+        {label}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-60 p-2">
+        <div className="flex flex-col gap-2">
+          <Field
+            label={i18n.t("board.add.start")}
+            value={startDate}
+            clear={i18n.t("board.clearStart")}
+            onChange={(day) => write({ startDate: asStored(day) })}
+          />
+          <Field
+            label={i18n.t("board.add.due")}
+            value={dueDate}
+            clear={i18n.t("board.clearDue")}
+            onChange={(day) => write({ dueDate: asStored(day) })}
+          />
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/**
+ * One half of the range.
+ *
+ * ⚠️ **The remove button only exists while there is something to remove.** A permanently visible
+ * one is a control that does nothing on most cards, and a reader learns to ignore it.
+ */
+function Field({
+  label,
+  value,
+  clear,
+  onChange,
+}: {
+  label: string;
+  value: string | null;
+  clear: string;
+  onChange(day: string): void;
+}) {
+  return (
+    <label className="flex items-center gap-2 text-xs">
+      <span className="w-14 shrink-0 text-muted-foreground">{label}</span>
+      <input
+        type="date"
+        value={value === null ? "" : isoDay(value)}
+        onChange={(event) => onChange(event.target.value)}
+        className="min-w-0 flex-1 rounded-md border bg-background px-2 py-1 tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      />
+      {value === null ? null : (
+        <button
+          type="button"
+          aria-label={`${label}, ${clear}`}
+          onClick={() => onChange("")}
+          className="shrink-0 rounded-md px-1 text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          ×
+        </button>
+      )}
+    </label>
+  );
+}

package/src/board/board-table/board-table.tsx

@@ -599,7 +599,11 @@ function RowContent({
       ) : null}
 
       {visible.has("assignee") && task.assigneeId !== null ? (
-        <AssigneeChip id={task.assigneeId} clear={() => write({ assigneeId: null })} />
+        <AssigneeChip
+          id={task.assigneeId}
+          boardId={board.boardId}
+          onPick={(assigneeId) => write({ assigneeId })}
+        />
       ) : null}
     </span>
   );

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

@@ -96,10 +96,3 @@ export function linksOf(task: BoardTask, columns: ColumnWithCards[]): TaskLink[]
       (a.title ?? "").localeCompare(b.title ?? ""),
   );
 }
-
-/** How far the subtasks have got — `null` when there are none, so the view draws nothing. */
-export function progressOf(links: TaskLink[]): { done: number; total: number } | null {
-  const subtasks = links.filter((link) => link.kind === "subtask");
-  if (subtasks.length === 0) return null;
-  return { done: subtasks.filter((link) => link.done).length, total: subtasks.length };
-}

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

@@ -5,6 +5,7 @@ import { AssigneeChip } from "@/board/board-assignee/board-assignee.tsx";
 import { AssigneePicker } from "@/board/board-assignee/board-assignee-picker.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 { StatusChip } from "@/board/board-status/board-status.tsx";
 import {
   DropdownMenu,
@@ -13,7 +14,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu.tsx";
 import { useI18n } from "@/i18n/i18n-context.tsx";
-import { type LinkKind, linksOf, progressOf, type TaskLink } from "./board-task.ts";
+import { type LinkKind, linksOf, type TaskLink } from "./board-task.ts";
 
 const linkIcons: Record<LinkKind, typeof Lock> = {
   subtask: Square,
@@ -66,7 +67,6 @@ export function BoardTaskDocument({
   const i18n = useI18n();
 
   const links = linksOf(task, board.columns);
-  const progress = progressOf(links);
   const columns = board.columns.filter((entry) => entry.unknown !== true).map((e) => e.column);
   const column = columns.find((entry) => entry.id === task.status);
 
@@ -87,7 +87,11 @@ export function BoardTaskDocument({
 
   return (
     <div
-      className="flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-6"
+      /* ⚠️ `pt-0`, and the 16px above the chips is the TITLE ROW's own `py-4` (#724). Adding padding
+         here as well would stack two gaps into 40px, which is what it was: the chips looked like a
+         section of their own instead of the second line of one head. `gap-6` below sets the 24px
+         that separates the head from the link list, which IS a section of its own. */
+      className="flex min-h-0 flex-1 flex-col gap-6 overflow-auto px-6 pt-0 pb-6"
       aria-busy={board.isWriting}
     >
       {/* ⚠️ No heading and no way back HERE. Both live in the title row above since #692: the path
@@ -103,39 +107,32 @@ export function BoardTaskDocument({
           write={write}
         />
 
-        {/* ⚠️ Two chips when both dates are set, not a range. A range reads as one fact; these
-            are two, and each is removed on its own. */}
-        {task.startDate === null ? null : (
-          <BoardChip
-            label={i18n.t("board.fromDate", { date: task.startDate.slice(0, 10) })}
-            action={i18n.t("board.clearStart")}
-            onClick={() => write({ startDate: null })}
-          />
-        )}
-        {task.dueDate === null ? null : (
-          <BoardChip
-            label={i18n.t("board.untilDate", { date: task.dueDate.slice(0, 10) })}
-            action={i18n.t("board.clearDue")}
-            onClick={() => write({ dueDate: null })}
-          />
-        )}
+        {/* ⚠️ ONE chip, since #724. It was two, `from …` and `due …` — two facts where a reader
+            sees one: a card runs from a day to a day. Each half is still edited and removed on its
+            own, but inside the popover, where the control can say which half it means. */}
+        <DatesChip startDate={task.startDate} dueDate={task.dueDate} write={write} />
 
         {task.labels.map((entry) => (
           <BoardChip
             key={entry}
             label={entry}
+            tone="inverted"
             action={i18n.t("board.removeLabel")}
             onClick={() => write({ labels: task.labels.filter((keep) => keep !== entry) })}
           />
         ))}
 
-        {/* ⚠️ **Last, always.** It is the only round element in the row; standing between the chips
-            it breaks the line, and a row without one simply ends earlier. */}
-        {task.assigneeId === null ? null : (
-          <AssigneeChip id={task.assigneeId} clear={() => write({ assigneeId: null })} />
-        )}
-
         <Adder task={task} board={board} write={write} />
+
+        {/* ⚠️ **Last, always, and after the plus** (#724). It is the only round element in the row;
+            standing between the chips it breaks the line. And it is drawn even when nobody has the
+            card: an empty circle is the one control on a row that says the card COULD be given to
+            somebody, which is precisely what an unowned card needs. */}
+        <AssigneeChip
+          id={task.assigneeId}
+          boardId={board.boardId}
+          onPick={(assigneeId) => write({ assigneeId })}
+        />
       </div>
 
       {/* ⚠️ ONE list, not three blocks: the icon carries the kind. And it exists only when there is
@@ -143,14 +140,11 @@ export function BoardTaskDocument({
           is missing; nothing at all tells them there is nothing, which is the truth (#692). */}
       {links.length === 0 ? null : (
         <section aria-label={i18n.t("board.links")} className="flex flex-col gap-1">
-          <h2 className="flex items-center gap-2 text-sm font-medium">
-            {i18n.t("board.links")}
-            {progress === null ? null : (
-              <span className="text-xs text-muted-foreground tabular-nums">
-                {i18n.t("board.progress", { done: progress.done, total: progress.total })}
-              </span>
-            )}
-          </h2>
+          {/* ⚠️ Secondary, and the counter is gone (#724). The heading is a label for the list
+              under it, not a section title competing with the card's name; and "0 of 2 done" was a
+              number nobody acts on — the rows themselves say which are done, and they say it
+              without arithmetic. */}
+          <h2 className="text-xs text-muted-foreground">{i18n.t("board.links")}</h2>
           <ul className="flex flex-col">
             {links.map((link) => (
               <LinkRow key={`${link.kind}:${link.id}`} link={link} onOpen={onOpen} />
@@ -254,11 +248,14 @@ function Adder({
   return (
     <>
       <DropdownMenu>
+        {/* ⚠️ No border, square, and the icon at full strength (#724). A bordered pill here read
+            as one more chip, so the row looked like it carried a value called "+". Without the
+            border it is what it is: a control, quiet until the pointer is on it. */}
         <DropdownMenuTrigger
           aria-label={i18n.t("board.add")}
-          className="rounded-full border px-2 py-0.5 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          className="flex size-6 shrink-0 items-center justify-center rounded-md text-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
         >
-          <Plus aria-hidden="true" className="size-3" />
+          <Plus aria-hidden="true" className="size-4" />
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           {addable.map((entry) => (
@@ -279,8 +276,19 @@ function Adder({
           boardId={board.boardId}
           current={task.assigneeId}
           onPick={(assigneeId) => write({ assigneeId })}
-          onClose={close}
-        />
+          open
+          onOpenChange={(next) => !next && close()}
+        >
+          {/* ⚠️ The anchor. Opened from the plus menu there is nothing on screen to hang the menu
+              on, so the picker brings its own pill — the same shape the blocker branch below uses,
+              and for the same reason. */}
+          <button
+            type="button"
+            className="rounded-full border px-2.5 py-0.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("board.add.assignee")}
+          </button>
+        </AssigneePicker>
       )}
 
       {kind === null || kind === "blocker" || kind === "assignee" ? null : (

package/src/file-preview/file-preview-view.tsx

@@ -2,6 +2,7 @@ import FileViewer, {
   type FileViewerHandle,
   type ViewerOptions,
   type ViewerState,
+  type ViewerViewState,
 } from "@file-viewer/react";
 import {
   ChevronLeft,
@@ -35,15 +36,16 @@ const viewerTheme = `
 }
 .pdf-shell,.pdf-wrapper{background:var(--muted)!important;color:var(--foreground)!important}
 .pdf-nav-pane,.pdf-nav-tabs,.pdf-nav-head{background:var(--background)!important;border-color:var(--border)!important}
-@media (min-width:721px){.pdf-shell:not(.pdf-shell--nav-hidden) .pdf-content{grid-template-columns:6rem minmax(0,1fr)!important}}
-.pdf-nav-head{display:none!important}.pdf-nav-tabs{display:flex!important;justify-content:center;padding:6px!important}
+@media (min-width:721px){.pdf-shell:not(.pdf-shell--nav-hidden) .pdf-content{grid-template-columns:4rem minmax(0,1fr)!important}}
+.pdfViewer{padding-inline:0!important}.pdfViewer .page{border-inline:0!important}
+.pdf-nav-head{display:none!important}.pdf-nav-tabs{display:flex!important;justify-content:center;padding:4px 0!important}
 .pdf-nav-tabs:not([data-outline-available="true"]){display:none!important}.pdf-nav-tabs button.active{display:none!important}
 .pdf-nav-tabs button{width:30px;min-width:30px;padding:0;border:0!important;box-shadow:none!important;font-size:0;color:var(--muted-foreground)!important}
 .pdf-nav-tabs button svg{width:15px;height:15px;margin:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .pdf-nav-tabs button:hover,.pdf-nav-tabs button.active{background:var(--accent)!important;border:0!important;color:var(--accent-foreground)!important}
-.pdf-page-list{gap:4px!important;padding:6px!important}.pdf-page-button{display:flex!important;width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;margin-inline:auto!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;color:var(--foreground)!important;justify-content:center!important}
+.pdf-page-list{gap:2px!important;padding:4px 0!important}.pdf-page-button{display:flex!important;width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;margin-inline:auto!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;color:var(--foreground)!important;justify-content:center!important}
 .pdf-page-button:hover,.pdf-page-button--active{background:var(--accent)!important;border:0!important;box-shadow:none!important}
-.pdf-page-thumb{width:28px!important;height:28px!important;border:0!important;background:transparent!important;color:var(--foreground)!important}
+.pdf-page-thumb{width:24px!important;height:24px!important;border:0!important;background:transparent!important;color:var(--foreground)!important}
 .pdf-page-label{display:none!important}.pdf-outline-button{color:var(--foreground)!important}.pdf-outline-button:hover{background:var(--accent)!important;border-color:var(--border)!important}
 `;
 
@@ -60,6 +62,8 @@ export function FilePreviewView({
   const i18n = useI18n();
   const viewer = useRef<FileViewerHandle>(null);
   const searchInput = useRef<HTMLInputElement>(null);
+  const pdfFit = useRef({ enabled: true, page: 0, pageWidthAtScaleOne: 0, rotation: 0 });
+  const schedulePdfFit = useRef<(() => void) | null>(null);
   const [state, setState] = useState<ViewerState | null>(null);
   const [searchOpen, setSearchOpen] = useState(false);
   const [query, setQuery] = useState("");
@@ -74,7 +78,10 @@ export function FilePreviewView({
       locale: "auto",
       toolbar: false,
       ...(pdf
-        ? { pdf: { toolbar: false, navigation: true, defaultNavigationVisible: false } }
+        ? {
+            fit: { mode: "width", resize: "until-interaction", padding: 0 },
+            pdf: { toolbar: false, navigation: true, defaultNavigationVisible: false },
+          }
         : {}),
       ui: { density: "compact", surfaceBackground: "transparent" },
     }),
@@ -85,15 +92,28 @@ export function FilePreviewView({
   const pageCount = viewState?.pageCount ?? 0;
   const scale = state?.zoom?.scale ?? viewState?.scale ?? 1;
   const search = state?.search;
+  const latestView = useRef({ page, rotation: viewState?.rotation ?? 0, scale });
+  const pdfPageRequest = useRef({ page, pending: false });
+  latestView.current = { page, rotation: viewState?.rotation ?? 0, scale };
+
+  useEffect(() => {
+    const request = pdfPageRequest.current;
+    if (!request.pending || request.page === page) {
+      request.page = page;
+      request.pending = false;
+    }
+  }, [page]);
 
   useEffect(() => {
     if (!state?.ready) return;
     const root = viewer.current?.getController()?.container.shadowRoot;
-    if (!root || root.querySelector("style[data-intel-viewer-theme]")) return;
-    const style = document.createElement("style");
-    style.dataset.intelViewerTheme = "true";
-    style.textContent = viewerTheme;
-    root.append(style);
+    if (!root) return;
+    if (!root.querySelector("style[data-intel-viewer-theme]")) {
+      const style = document.createElement("style");
+      style.dataset.intelViewerTheme = "true";
+      style.textContent = viewerTheme;
+      root.append(style);
+    }
     const adaptNavigation = () => {
       for (const button of root.querySelectorAll<HTMLButtonElement>(".pdf-page-button")) {
         const label = button.querySelector(".pdf-page-label")?.textContent?.trim();
@@ -173,12 +193,79 @@ export function FilePreviewView({
     };
   }, [state?.ready]);
 
+  useEffect(() => {
+    if (!pdf || !state?.ready) return;
+    const root = viewer.current?.getController()?.container.shadowRoot;
+    if (!root) return;
+    let frame = 0;
+    const fitPdfToWidth = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const fitState = pdfFit.current;
+        if (!fitState.enabled) return;
+        const wrapper = root.querySelector<HTMLElement>(".pdf-wrapper");
+        const current = latestView.current;
+        const currentPage =
+          root.querySelector<HTMLElement>(`.pdfViewer .page[data-page-number="${current.page}"]`) ??
+          root.querySelector<HTMLElement>(".pdfViewer .page");
+        const renderedWidth = currentPage?.getBoundingClientRect().width ?? 0;
+        const availableWidth = wrapper?.clientWidth ?? 0;
+        if (renderedWidth <= 0 || availableWidth <= 0 || current.scale <= 0) return;
+        if (fitState.page !== current.page || fitState.rotation !== current.rotation) {
+          fitState.page = current.page;
+          fitState.rotation = current.rotation;
+          fitState.pageWidthAtScaleOne = 0;
+        }
+        if (fitState.pageWidthAtScaleOne <= 0) {
+          fitState.pageWidthAtScaleOne = renderedWidth / current.scale;
+        }
+        // The pinned PDF renderer clamps scale to two decimals. Floor to the same precision so the
+        // page never overflows and sub-pixel differences do not schedule identical updates.
+        const targetScale = Math.floor((availableWidth / fitState.pageWidthAtScaleOne) * 100) / 100;
+        if (Math.abs(targetScale - current.scale) <= 0.001) return;
+        void viewer.current?.applyViewState({ scale: targetScale });
+      });
+    };
+    schedulePdfFit.current = fitPdfToWidth;
+    const wrapper = root.querySelector<HTMLElement>(".pdf-wrapper");
+    const resizeObserver =
+      typeof ResizeObserver === "undefined" ? null : new ResizeObserver(fitPdfToWidth);
+    if (wrapper) resizeObserver?.observe(wrapper);
+    const mutationObserver = new MutationObserver(fitPdfToWidth);
+    mutationObserver.observe(root, { childList: true, subtree: true });
+    fitPdfToWidth();
+    return () => {
+      cancelAnimationFrame(frame);
+      resizeObserver?.disconnect();
+      mutationObserver.disconnect();
+      if (schedulePdfFit.current === fitPdfToWidth) schedulePdfFit.current = null;
+    };
+  }, [pdf, state?.ready]);
+
+  useEffect(() => {
+    if (page > 0 && viewState?.rotation !== undefined) schedulePdfFit.current?.();
+  }, [page, viewState?.rotation]);
+
   useEffect(() => {
     if (searchOpen) searchInput.current?.focus();
   }, [searchOpen]);
 
-  const applyViewState = (next: Record<string, unknown>) =>
-    viewer.current?.applyViewState({ ...viewState, ...next });
+  const applyViewState = (next: ViewerViewState) => viewer.current?.applyViewState(next);
+  const goToPdfPage = (direction: -1 | 1) => {
+    const request = pdfPageRequest.current;
+    const nextPage = Math.max(1, Math.min(pageCount, request.page + direction));
+    request.page = nextPage;
+    request.pending = nextPage !== page;
+    const root = viewer.current?.getController()?.container.shadowRoot;
+    const pageElement = root?.querySelector<HTMLElement>(
+      `.pdfViewer .page[data-page-number="${nextPage}"]`,
+    );
+    if (pageElement) {
+      pageElement.scrollIntoView({ block: "start", inline: "nearest" });
+      return;
+    }
+    void applyViewState({ page: nextPage });
+  };
 
   return (
     <div className="relative h-full min-h-64">
@@ -217,7 +304,7 @@ export function FilePreviewView({
           aria-label={i18n.t("attachment.viewer.controls")}
           className={`absolute right-3 bottom-2 left-3 z-[5] mx-auto flex min-h-10 w-fit max-w-[calc(100%-1.5rem)] items-center gap-1 rounded-full border bg-background/80 p-1 shadow-lg backdrop-blur-md ${
             viewState?.navigation?.visible
-              ? "[@media(max-width:720px)]:hidden min-[721px]:left-[calc(6rem+0.75rem)]"
+              ? "[@media(max-width:720px)]:hidden min-[721px]:left-[calc(4rem+0.75rem)]"
               : ""
           }`}
         >
@@ -237,7 +324,7 @@ export function FilePreviewView({
                 type="button"
                 aria-label={i18n.t("attachment.viewer.previousPage")}
                 disabled={page <= 1}
-                onClick={() => void applyViewState({ page: page - 1 })}
+                onClick={() => goToPdfPage(-1)}
                 className="size-7 rounded-full hover:bg-accent disabled:opacity-40"
               >
                 <ChevronLeft aria-hidden="true" className="mx-auto size-3.5" />
@@ -249,7 +336,7 @@ export function FilePreviewView({
                 type="button"
                 aria-label={i18n.t("attachment.viewer.nextPage")}
                 disabled={page >= pageCount}
-                onClick={() => void applyViewState({ page: page + 1 })}
+                onClick={() => goToPdfPage(1)}
                 className="size-7 rounded-full hover:bg-accent disabled:opacity-40"
               >
                 <ChevronRight aria-hidden="true" className="mx-auto size-3.5" />
@@ -340,7 +427,10 @@ export function FilePreviewView({
                 type="button"
                 aria-label={i18n.t("attachment.viewer.zoomOut")}
                 disabled={state.zoom ? !state.zoom.canZoomOut : false}
-                onClick={() => void viewer.current?.zoomOut()}
+                onClick={() => {
+                  pdfFit.current.enabled = false;
+                  void viewer.current?.zoomOut();
+                }}
                 className="grid size-7 place-items-center rounded-full hover:bg-accent disabled:opacity-40"
               >
                 <Minus aria-hidden="true" className="size-3.5" />
@@ -349,7 +439,14 @@ export function FilePreviewView({
                 type="button"
                 aria-label={i18n.t("attachment.viewer.resetZoom")}
                 disabled={state.zoom ? !state.zoom.canReset : false}
-                onClick={() => void viewer.current?.resetZoom()}
+                onClick={() => {
+                  if (pdf) {
+                    pdfFit.current.enabled = true;
+                    schedulePdfFit.current?.();
+                    return;
+                  }
+                  void viewer.current?.resetZoom();
+                }}
                 className="min-w-12 px-1 text-xs tabular-nums disabled:opacity-40"
               >
                 {Math.round(scale * 100)}%
@@ -358,7 +455,10 @@ export function FilePreviewView({
                 type="button"
                 aria-label={i18n.t("attachment.viewer.zoomIn")}
                 disabled={state.zoom ? !state.zoom.canZoomIn : false}
-                onClick={() => void viewer.current?.zoomIn()}
+                onClick={() => {
+                  pdfFit.current.enabled = false;
+                  void viewer.current?.zoomIn();
+                }}
                 className="grid size-7 place-items-center rounded-full hover:bg-accent disabled:opacity-40"
               >
                 <Plus aria-hidden="true" className="size-3.5" />

package/src/i18n/de.json

@@ -84,12 +84,14 @@
   "board.addCardIn": "Eine Aufgabe zu {column} hinzufügen",
   "board.addLabel": "Label hinzufügen",
   "board.addLink": "Verlinkung",
+  "board.assignSomebody": "Jemandem zuweisen",
   "board.assignee.clear": "Zuständigkeit entfernen",
   "board.assignee.keepTyping": "Mindestens zwei Zeichen tippen",
   "board.assignee.nobody": "Niemand mit Zugriff auf dieses Board passt dazu",
   "board.assignee.search": "Person suchen",
   "board.backTo": "Zurück zu {board}",
   "board.cardLabel": "{title} öffnen, in {column}. Alt und eine Pfeiltaste verschiebt sie.",
+  "board.changeAssignee": "Zuständig: {name}, ändern",
   "board.clearAssignee": "Zuständigkeit von {name} entfernen",
   "board.clearDependsOn": "nicht mehr darauf warten",
   "board.clearDue": "entfernen",
@@ -109,6 +111,7 @@
   "board.createFailed": "Die Aufgabe konnte nicht angelegt werden.",
   "board.crumbs": "Wo diese Karte sitzt",
   "board.crumbsFolded": "Die Ebenen dazwischen zeigen",
+  "board.dates.edit": "Zeitraum bearbeiten",
   "board.drag.lifted": "{card} aufgenommen",
   "board.drag.moved": "{card} nach {column} verschoben",
   "board.drag.putBack": "{card} zurückgelegt",
@@ -126,7 +129,6 @@
   "board.link.subtask": "Unteraufgabe",
   "board.links": "Verlinkt",
   "board.moveTo": "in eine andere Spalte verschieben",
-  "board.progress": "{done} von {total} erledigt",
   "board.removeLabel": "dieses Label entfernen",
   "board.settings.addColumn": "+ Spalte",
   "board.settings.columnName": "Name der Spalte {column}",
@@ -504,6 +506,7 @@
   "tree.move.destination": "Neuer Ort: {title}",
   "tree.move.dropRoot": "Hier ablegen, um auf die oberste Ebene zu verschieben",
   "tree.move.elsewhere": "Anderen Ordner wählen",
+  "tree.move.failed.archived": "Nicht verschoben: Dieses Ziel ist archiviert. Stell es zuerst wieder her.",
   "tree.move.failed.conflict": "Nicht verschoben: Jemand anderes hat diesen Eintrag zuerst geändert. Der Baum wurde neu geladen — sieh noch einmal nach und verschiebe dann.",
   "tree.move.failed.cycle": "Nicht verschoben: Ein Ordner kann weder in sich selbst noch in etwas, das er enthält.",
   "tree.move.failed.forbidden": "Nicht verschoben: Du darfst in diesen Ordner nicht schreiben. Bitte dort um Schreibzugriff.",

package/src/i18n/en.json

@@ -84,12 +84,14 @@
   "board.addCardIn": "Add a task to {column}",
   "board.addLabel": "Add a label",
   "board.addLink": "Link",
+  "board.assignSomebody": "Assign to somebody",
   "board.assignee.clear": "Remove the assignee",
   "board.assignee.keepTyping": "Type at least two characters",
   "board.assignee.nobody": "Nobody with access to this board matches",
   "board.assignee.search": "Find a person",
   "board.backTo": "Back to {board}",
   "board.cardLabel": "Open {title}, in {column}. Alt and an arrow key moves it.",
+  "board.changeAssignee": "Assigned to {name}, change",
   "board.clearAssignee": "Take the assignment off {name}",
   "board.clearDependsOn": "stop waiting for it",
   "board.clearDue": "clear it",
@@ -109,6 +111,7 @@
   "board.createFailed": "The task could not be created.",
   "board.crumbs": "Where this card sits",
   "board.crumbsFolded": "Show the levels in between",
+  "board.dates.edit": "Edit the dates",
   "board.drag.lifted": "{card} picked up",
   "board.drag.moved": "{card} moved to {column}",
   "board.drag.putBack": "{card} put back",
@@ -126,7 +129,6 @@
   "board.link.subtask": "Subtask",
   "board.links": "Linked",
   "board.moveTo": "move it to another column",
-  "board.progress": "{done} of {total} done",
   "board.removeLabel": "remove this label",
   "board.settings.addColumn": "+ Column",
   "board.settings.columnName": "Name of the column {column}",
@@ -504,6 +506,7 @@
   "tree.move.destination": "New place: {title}",
   "tree.move.dropRoot": "Drop here to move to the top level",
   "tree.move.elsewhere": "Choose another folder",
+  "tree.move.failed.archived": "It was not moved: that destination is archived. Restore it first.",
   "tree.move.failed.conflict": "It was not moved: somebody else changed this entry first. The tree has been reloaded — look again, then move it.",
   "tree.move.failed.cycle": "It was not moved: a folder cannot be put inside itself or inside anything it contains.",
   "tree.move.failed.forbidden": "It was not moved: you may not write into that folder. Ask for write access there.",

package/src/i18n/es.json

@@ -84,12 +84,14 @@
   "board.addCardIn": "Añadir una tarea a {column}",
   "board.addLabel": "Añadir etiqueta",
   "board.addLink": "Vínculo",
+  "board.assignSomebody": "Asignar a alguien",
   "board.assignee.clear": "Quitar el responsable",
   "board.assignee.keepTyping": "Escribe al menos dos caracteres",
   "board.assignee.nobody": "Nadie con acceso a este tablero coincide",
   "board.assignee.search": "Buscar una persona",
   "board.backTo": "Volver a {board}",
   "board.cardLabel": "Abrir {title}, en {column}. Alt y una flecha la mueve.",
+  "board.changeAssignee": "Responsable: {name}, cambiar",
   "board.clearAssignee": "Quitar la responsabilidad de {name}",
   "board.clearDependsOn": "dejar de esperarlo",
   "board.clearDue": "quitar",
@@ -109,6 +111,7 @@
   "board.createFailed": "No se pudo crear la tarea.",
   "board.crumbs": "Dónde está esta tarjeta",
   "board.crumbsFolded": "Mostrar los niveles intermedios",
+  "board.dates.edit": "Editar las fechas",
   "board.drag.lifted": "{card} recogida",
   "board.drag.moved": "{card} movida a {column}",
   "board.drag.putBack": "{card} devuelta",
@@ -126,7 +129,6 @@
   "board.link.subtask": "Subtarea",
   "board.links": "Vinculado",
   "board.moveTo": "moverla a otra columna",
-  "board.progress": "{done} de {total} hechas",
   "board.removeLabel": "quitar esta etiqueta",
   "board.settings.addColumn": "+ Columna",
   "board.settings.columnName": "Nombre de la columna {column}",
@@ -504,6 +506,7 @@
   "tree.move.destination": "Sitio nuevo: {title}",
   "tree.move.dropRoot": "Suelta aquí para mover al nivel superior",
   "tree.move.elsewhere": "Elegir otra carpeta",
+  "tree.move.failed.archived": "No se ha movido: ese destino está archivado. Restáuralo primero.",
   "tree.move.failed.conflict": "No se ha movido: otra persona ha cambiado esta entrada antes. El árbol se ha recargado — míralo otra vez y muévelo entonces.",
   "tree.move.failed.cycle": "No se ha movido: una carpeta no puede ir dentro de sí misma ni dentro de nada que contenga.",
   "tree.move.failed.forbidden": "No se ha movido: no puedes escribir en esa carpeta. Pide acceso de escritura allí.",

package/src/title-row/title-row.tsx

@@ -121,7 +121,12 @@ export function TitleRow({
     <div
       data-scrolled={scroll?.scrolled || undefined}
       className={cn(
-        "relative z-10 flex shrink-0 items-start justify-between gap-5 px-6 py-4 transition-shadow",
+        "relative z-10 flex shrink-0 justify-between gap-5 px-6 py-4 transition-shadow",
+        // ⚠️ Two alignments for two shapes (#724). A document's name can carry a description under
+        // it, so its block starts at the top and the menu lines up with the FIRST line. A path is
+        // always one line, and starting it at the top leaves it sitting a hair above the icons it
+        // shares the row with. Centred, the two read as one line, which is what they are.
+        crumbs === undefined ? "items-start" : "items-center",
         (separated || scroll?.scrolled) && "shadow-[inset_0_-1px_0_var(--border)]",
       )}
     >