@anchrd/intel-ui 0.45.0 → 0.47.0

package/package.json

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

package/src/app/user-footer/user-footer.tsx

@@ -3,6 +3,7 @@ import { useNavigate, useRouterState } from "@tanstack/react-router";
 import {
   Archive as ArchiveIcon,
   ChevronsUpDown,
+  List,
   LogOut,
   RefreshCw,
   Settings,
@@ -113,6 +114,14 @@ export function UserFooter() {
               <Wrench aria-hidden="true" />
               {i18n.t("nav.tools")}
             </DropdownMenuItem>
+            {/* ⚠️ The feed lives here and NOT in the tree, and the placement is the decision
+                (#742): it is not a place things are in, and it is not something anybody needs
+                twice a day. No counter and no dot on the icon either — a badge is a request for
+                attention, and this surface is deliberately not making one. */}
+            <DropdownMenuItem onSelect={() => void navigate({ to: "/feed" })}>
+              <List aria-hidden="true" />
+              {i18n.t("feed.title")}
+            </DropdownMenuItem>
             {/* The archive lives here rather than in the tree: it is not a place things are IN,
                 it is where they went when they left the tree (#113). */}
             <DropdownMenuItem onSelect={() => void navigate({ to: "/archive" })}>

package/src/archive/archive.tsx

@@ -179,6 +179,8 @@ export function Archive() {
   // that it does not come back. The state lives here because the row underneath disappears the
   // moment the purge goes through.
   const [confirming, setConfirming] = useState<ArchivedEntry | null>(null);
+  // Whether anything has scrolled away under the header. See the header markup for why.
+  const [scrolled, setScrolled] = useState(false);
   const preview = useQuery({
     queryKey: ["purge-preview", confirming?.id],
     queryFn: async () => await confirming?.previewPurge?.(),
@@ -202,13 +204,37 @@ export function Archive() {
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      <div className="border-b px-6 py-4">
+      {/* ⚠️ The rule below the header belongs to the SCROLL STATE, not to the header. While nothing
+          has scrolled away, it separates a heading from the content that heading is about, which is
+          a line drawn for no reason. It earns its place the moment content slides underneath.
+
+          The width is set from the start and only the COLOUR changes. Adding the border on scroll
+          would grow the header by one pixel at that moment and shove the whole list down — visible,
+          and exactly at the point where the eye is already following movement (#741).
+
+          ⚠️ `motion-reduce:transition-none` is not decoration. Nothing in this repository disarms a
+          colour transition for a reader who asked for less movement — there is no global
+          `prefers-reduced-motion` rule in the stylesheets — so a fade added here would run for them
+          too unless it says otherwise. The line still appears either way; only the fade is dropped. */}
+      <div
+        data-slot="pane-header"
+        className={cn(
+          "border-b border-transparent px-6 py-4 transition-colors motion-reduce:transition-none",
+          scrolled && "border-border",
+        )}
+      >
         <h1 className="text-lg font-medium text-foreground">{i18n.t("archive.title")}</h1>
         <p className="mt-1 max-w-prose text-sm text-muted-foreground">
           {i18n.t("archive.description")}
         </p>
       </div>
-      <div className="min-h-0 flex-1 overflow-y-auto px-6 py-4">
+      <div
+        data-slot="pane-body"
+        // Reading the position off the event rather than holding a ref: React skips the re-render
+        // when the boolean has not changed, so a scroll of 400 pixels still costs one render.
+        onScroll={(event) => setScrolled(event.currentTarget.scrollTop > 0)}
+        className="min-h-0 flex-1 overflow-y-auto px-6 py-4"
+      >
         {archived.isError ? (
           <p role="alert" className="text-sm text-destructive">
             {i18n.t("archive.failed")}

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,10 +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.
@@ -12,8 +14,10 @@ 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
@@ -29,7 +33,12 @@ export function AssigneeChip({
   boardId,
   onPick,
 }: {
-  id: string;
+  /**
+   * ⚠️ `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;
 }) {
@@ -39,7 +48,11 @@ export function AssigneeChip({
     <AssigneePicker boardId={boardId} current={id} onPick={onPick}>
       <button
         type="button"
-        aria-label={i18n.t("board.changeAssignee", { name: label })}
+        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"
       >
@@ -49,9 +62,12 @@ export function AssigneeChip({
           // 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"
+          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),
+          )}
         >
-          {initials(label)}
+          {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-kanban/board-kanban.tsx

@@ -77,7 +77,14 @@ function Card({
         onClick={() => onOpen(card.id)}
         // `relative` and `overflow-hidden` are for the depth pattern: it is positioned against this
         // card, and nothing of it may spill past the rounded edge.
-        className="relative w-full cursor-grab overflow-hidden rounded-md border border-border bg-card p-2 text-left text-sm shadow-xs focus-visible:outline-2 focus-visible:outline-ring"
+        /* ⚠️ A quiet grey FIELD, not a box (#748). It carried `bg-card` plus `border-border` plus
+             `shadow-xs` — three means saying the same thing ("this is a card"), and on a white board
+             the three together read as a container rather than a surface. `bg-muted` is 0.97 against
+             a 1.0 ground in light and 0.269 against 0.145 in dark, so the card stands off its column
+             in both without a line around it.
+             ⚠️ The hover is what replaces the border: a surface still has to answer the pointer, and
+             without a line there is nothing else left to do it. */
+        className="relative w-full cursor-grab overflow-hidden rounded-md bg-muted p-2 text-left text-sm transition-colors hover:bg-muted/70 focus-visible:outline-2 focus-visible:outline-ring"
         onKeyDown={(event) => {
           // ⚠️ Not while a write is in flight. Two moves in quick succession both read the same
           // not-yet-updated `board.columns`, compute a position independently and both write — the
@@ -585,7 +592,11 @@ export function BoardKanban({
           cursor moves, and there is nothing on screen saying the gesture was picked up at all. */}
       <DragOverlay>
         {carriedCard === undefined ? null : (
-          <div className="w-64 rounded-md border border-border bg-card p-2 text-left text-sm shadow-lg">
+          <div /* ⚠️ The same surface as the card it stands for (#748), plus the shadow that is the ONE
+              thing this element says beyond it: this one is lifted. A card that changed colour on
+              being picked up would read as a different card. */
+            className="w-64 rounded-md bg-muted p-2 text-left text-sm shadow-lg"
+          >
             {carriedCard.title}
           </div>
         )}

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,43 +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}
-            boardId={board.boardId}
-            onPick={(assigneeId) => write({ assigneeId })}
-          />
-        )}
-
         <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
@@ -147,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} />
@@ -258,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) => (

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

@@ -8,6 +8,7 @@ import {
   BoardView,
 } from "@anchrd/intel-contract/board";
 import { BundleImportResult } from "@anchrd/intel-contract/bundle";
+import { FeedListResponse } from "@anchrd/intel-contract/feed";
 import {
   ArchiveFlowInput,
   CreateFlowInput,
@@ -580,6 +581,14 @@ export function createIntelDataProvider(
         body: JSON.stringify(parsed),
       });
     },
+    async listFeed(input) {
+      // Only what was asked for travels: an empty `actor` or `before` in the query string is not
+      // the same as leaving it out, and the contract refuses the empty string.
+      const params = new URLSearchParams({ limit: String(input.limit) });
+      if (input.actor) params.set("actor", input.actor);
+      if (input.before) params.set("before", input.before);
+      return await request(`/feed?${params}`, FeedListResponse);
+    },
     async listFlowRuns(input) {
       const parsed = ListFlowRunsInput.parse(input);
       // Only what was actually asked for travels. `failedOnly` is the parameter's presence rather

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

@@ -8,6 +8,7 @@ import type {
   BoardView,
 } from "@anchrd/intel-contract/board";
 import type { BundleImportResult } from "@anchrd/intel-contract/bundle";
+import type { FeedListResponse } from "@anchrd/intel-contract/feed";
 import type {
   ArchiveFlowInput,
   CreateFlowInput,
@@ -235,6 +236,13 @@ export interface IntelDataProvider {
   // What this flow has done, newest first, one page at a time. ⚠️ It carries what a run did and
   // never what it produced: a run reads nodes with the rights of whoever started it, so its
   // result is not automatically readable for everyone who may read the flow.
+  // The activity feed, newest first (#742). `before` is the previous answer's `nextCursor`,
+  // handed back unchanged; `actor` narrows it to one person or one agent.
+  listFeed(input: {
+    limit: number;
+    before?: string | undefined;
+    actor?: string | undefined;
+  }): Promise<FeedListResponse>;
   listFlowRuns(input: ListFlowRunsInput): Promise<FlowRunList>;
   getFlowRun(runId: string): Promise<FlowRunStep>;
   // The drill-down behind one run: every step it took, and the call chain it belongs to.

package/src/feed/feed.tsx

@@ -0,0 +1,312 @@
+import type { FeedEvent } from "@anchrd/intel-contract/feed";
+import { useInfiniteQuery, useQueries } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { Check, Filter } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { RelativeTime } from "@/time/relative-time.tsx";
+import { initials, useSessionUser } from "@/user-name/user-name.ts";
+
+const PageSize = 30;
+
+// 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";
+
+/**
+ * What happened, newest first, one card per event.
+ *
+ * ⚠️ **The shape is the archive's** — a header with a rule that appears on scroll, then the
+ * scrolling area — because this is a page of the same kind and a second layout for it would be a
+ * second set of answers to "where does the title go". What differs is inside: the list is capped
+ * and centred rather than full width.
+ */
+export function Feed() {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const me = useSessionUser();
+  const navigate = useNavigate();
+  const [audience, setAudience] = useState<Audience>("all");
+  const [scrolled, setScrolled] = useState(false);
+
+  // ⚠️ The audience belongs in the key. "Only mine" is a different question with a different
+  // answer, and sharing one cache entry would show the wrong list for a frame after the switch.
+  //
+  // ⚠️ `mine` reaches the server, `people` does not: the server has no idea which actor is a
+  // machine. Putting `people` in the key anyway would split the cache for a filter that changes
+  // nothing about the request — so it is deliberately absent from what travels.
+  const actor = audience === "mine" ? (me?.id ?? null) : null;
+  const feed = useInfiniteQuery({
+    queryKey: ["feed", actor],
+    queryFn: ({ pageParam }) =>
+      data.listFeed({
+        limit: PageSize,
+        ...(pageParam ? { before: pageParam } : {}),
+        ...(actor ? { actor } : {}),
+      }),
+    initialPageParam: null as string | null,
+    getNextPageParam: (last) => last.nextCursor,
+    // Asking with `actor: null` for "only mine" would be the whole feed, which is the opposite of
+    // what was asked for. Better to render nothing for the instant before the session arrives.
+    enabled: audience !== "mine" || me !== null,
+  });
+
+  const events = useMemo(() => feed.data?.pages.flatMap((page) => page.events) ?? [], [feed.data]);
+
+  // ⚠️ One resolve per PAGE, and PER page rather than over everything loaded so far. A page is
+  // thirty cards and often three people, so resolving a single id per card would open thirty
+  // requests for three names — that much is obvious. The half that is not: asking again for the
+  // GROWING union on every page walks straight into the contract's `max(100)` and takes the endless
+  // scroll down with a Zod error, on exactly the busy folder the feed is for.
+  //
+  // One query per page keeps every ask at most a page wide, and TanStack keeps the earlier answers
+  // rather than re-fetching them.
+  const nameQueries = useQueries({
+    queries: (feed.data?.pages ?? []).map((page) => {
+      const ids = [...new Set(page.events.map((entry) => entry.actorId))].sort();
+      return {
+        queryKey: ["feed-actor-names", ids],
+        // ⚠️ Never reached with an empty list: the contract refuses it (`min(1)`), and the refusal
+        // would surface as a broken page rather than as the empty answer it means.
+        enabled: ids.length > 0,
+        queryFn: () => data.resolveBoardAssignees(ids),
+        staleTime: 5 * 60 * 1000,
+      };
+    }),
+  });
+  // ⚠️ Built on every render rather than memoised, and the first attempt at this is why it says
+  // so: keyed on `feed.data` the map was never rebuilt when the NAMES arrived, because the pages
+  // had not changed — every card showed "a user account" for good. A few dozen entries cost
+  // nothing to rebuild, and a dependency that has to be exactly right to be correct is a worse
+  // trade than the work it saves.
+  const people = new Map<string, { name: string; isMachine: boolean }>();
+  for (const query of nameQueries) {
+    for (const person of query.data?.items ?? []) {
+      people.set(person.id, { name: person.name, isMachine: person.isMachine });
+    }
+  }
+
+  // ⚠️ Filtering people out here can empty a whole page while older ones still hold cards, so the
+  // sentinel below has to keep asking rather than stopping at the first empty result.
+  const shown =
+    audience === "people"
+      ? events.filter((event) => people.get(event.actorId)?.isMachine !== true)
+      : events;
+
+  const sentinel = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const element = sentinel.current;
+    if (!element) return;
+    const observer = new IntersectionObserver((entries) => {
+      // `hasNextPage` and `isFetchingNextPage` are read inside the callback rather than closed over
+      // at setup: the observer outlives several renders, and a stale `false` would end the scroll
+      // silently at whatever page happened to be loaded when it was created.
+      if (entries.some((entry) => entry.isIntersecting)) void feed.fetchNextPage();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [feed.fetchNextPage]);
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {/* The rule belongs to the scroll state, and the width is set from the start so that showing
+          it moves nothing (#741). */}
+      <div
+        data-slot="pane-header"
+        className={cn(
+          "flex items-start justify-between gap-4 border-b border-transparent px-6 py-4 transition-colors motion-reduce:transition-none",
+          scrolled && "border-border",
+        )}
+      >
+        <div>
+          <h1 className="text-lg font-medium text-foreground">{i18n.t("feed.title")}</h1>
+          <p className="mt-1 max-w-prose text-sm text-muted-foreground">
+            {i18n.t("feed.description")}
+          </p>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            aria-label={i18n.t("feed.filter")}
+            className="rounded-md p-1 text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <Filter aria-hidden="true" className="size-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>{i18n.t("feed.filter")}</DropdownMenuLabel>
+            {(["all", "mine", "people"] as const).map((option) => (
+              <DropdownMenuItem
+                key={option}
+                onSelect={() => setAudience(option)}
+                className="gap-2"
+                data-slot={`feed-audience-${option}`}
+                aria-current={audience === option}
+              >
+                <Check
+                  aria-hidden="true"
+                  className={cn("size-4", audience !== option && "invisible")}
+                />
+                {i18n.t(`feed.audience.${option}`)}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div
+        data-slot="pane-body"
+        onScroll={(event) => setScrolled(event.currentTarget.scrollTop > 0)}
+        className="min-h-0 flex-1 overflow-y-auto px-6 py-4"
+      >
+        <div className="mx-auto max-w-3xl">
+          {feed.isPending && (
+            <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+          )}
+          {feed.isError && (
+            <div role="alert" className="space-y-3 text-sm">
+              <p className="text-destructive">{i18n.t("feed.failed")}</p>
+              <button
+                type="button"
+                onClick={() => void feed.refetch()}
+                className="rounded-md border px-3 py-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {i18n.t("common.retry")}
+              </button>
+            </div>
+          )}
+          {feed.data && shown.length === 0 && (
+            <div className="space-y-2 text-sm text-muted-foreground">
+              <p>{i18n.t("feed.empty")}</p>
+              {/* ⚠️ Two states look identical and are not, so the second one is said out loud. A
+                  feed showing only yourself is what sharing nothing with anybody looks like, and a
+                  reader who takes it for a fault will go looking for one that is not there. */}
+              <p>{i18n.t("feed.emptyWhy")}</p>
+              {/* ⚠️ The SECOND state the ticket names, and it is not an empty list: it is a gap
+                  inside a list that looks complete. Somebody whose read access to a folder was
+                  withdrawn loses their OWN older entries from it, and without this sentence the
+                  next reader goes looking for a fault that is not there — or loosens the filter
+                  and opens the authorization while "repairing" it. */}
+              <p>{i18n.t("feed.gapWhy")}</p>
+            </div>
+          )}
+          {shown.length > 0 && (
+            <ul className="flex flex-col gap-2">
+              {shown.map((event) => (
+                <FeedCard
+                  key={event.id}
+                  event={event}
+                  person={people.get(event.actorId) ?? null}
+                  isMe={event.actorId === me?.id}
+                  open={(nodeId) => void navigate({ to: "/nodes", search: { select: nodeId } })}
+                />
+              ))}
+            </ul>
+          )}
+          {/* The end of the list, and what keeps it going. There is no button: the answer to "is
+              there more" is the cursor, and the observer above asks for it. */}
+          <div ref={sentinel} aria-hidden="true" className="h-8" />
+          {feed.isFetchingNextPage && (
+            <p className="py-2 text-center text-xs text-muted-foreground">
+              {i18n.t("common.loading")}
+            </p>
+          )}
+          {feed.data && !feed.hasNextPage && shown.length > 0 && (
+            <div className="space-y-1 py-2 text-center text-xs text-muted-foreground">
+              <p>{i18n.t("feed.end")}</p>
+              {/* The same sentence at the other end: this is where somebody notices that an older
+                  entry of their own is missing, and where the reason belongs. */}
+              <p>{i18n.t("feed.gapWhy")}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FeedCard({
+  event,
+  person,
+  isMe,
+  open,
+}: {
+  event: FeedEvent;
+  person: { name: string; isMachine: boolean } | null;
+  isMe: boolean;
+  open(nodeId: string): void;
+}) {
+  const i18n = useI18n();
+  // ⚠️ Never the raw id. A person we cannot name is "a user account", which is the wording every
+  // other surface uses for the same gap (#258) — an id under a name is the question again in
+  // smaller type.
+  const who = isMe ? i18n.t("feed.you") : (person?.name ?? i18n.t("node.someUser"));
+  // What the button on this card says, and it is not always a version. A `node.save` records
+  // `{versionId, sequence}`, a `node.share` records `{principalType, verb}` — so a sharing card
+  // names the RIGHT that was granted. Both lead to the node: there is no route to a single version
+  // in this interface, and the access summary lives on the node itself (#742).
+  const sequence = typeof event.metadata.sequence === "number" ? event.metadata.sequence : null;
+  const verb = typeof event.metadata.verb === "string" ? event.metadata.verb : null;
+  const mark =
+    sequence !== null
+      ? i18n.t("feed.version", { sequence: String(sequence) })
+      : verb !== null
+        ? i18n.t(`node.verb.${verb}`)
+        : null;
+
+  return (
+    <li className="flex items-start gap-3 rounded-lg bg-muted/40 px-4 py-3">
+      <span
+        aria-hidden="true"
+        className={cn(
+          "grid size-8 shrink-0 place-items-center text-xs font-medium",
+          // A square for an agent, a circle for a person: the two are told apart before either
+          // name is read.
+          person?.isMachine
+            ? "rounded-md bg-accent text-accent-foreground"
+            : "rounded-full bg-secondary text-secondary-foreground",
+        )}
+      >
+        {initials(person?.name ?? who)}
+      </span>
+      <span className="grid min-w-0 flex-1 gap-1">
+        <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(" / ")}
+          </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
+              nothing to focus at all.
+
+              ⚠️ It opens the NODE in both cases. There is no route to a single version here, and
+              the access summary lives on the node; the mark still says WHICH version or WHICH
+              right the card was about, which is the part the reader came for. */}
+          {mark !== null && (
+            <button
+              type="button"
+              onClick={() => open(event.nodeId)}
+              aria-label={i18n.t("feed.open", { title: event.nodeTitle, mark })}
+              className="shrink-0 rounded bg-muted px-2 py-0.5 font-mono text-[11px] text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {mark}
+            </button>
+          )}
+        </span>
+        {/* The shared component, not a second way of saying the same thing: it carries the exact
+            moment in a tooltip that is reachable by keyboard, and "19 hours ago" is not something
+            anybody translates back into a time of day. */}
+        <RelativeTime value={event.occurredAt} className="text-xs text-muted-foreground" />
+      </span>
+    </li>
+  );
+}

package/src/i18n/de.json

@@ -84,6 +84,7 @@
   "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",
@@ -110,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",
@@ -127,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}",
@@ -179,6 +180,27 @@
   "common.unsavedLeave": "Ohne Speichern verlassen",
   "common.unsavedStay": "Bleiben und speichern",
   "common.unsavedTitle": "Ungespeicherte Änderungen",
+  "feed.action.node.append": "{who} hat etwas an {title} angehängt",
+  "feed.action.node.archive": "{who} hat {title} archiviert",
+  "feed.action.node.create": "{who} hat {title} angelegt",
+  "feed.action.node.revoke": "{who} hat eine Freigabe für {title} entzogen",
+  "feed.action.node.save": "{who} hat {title} geändert",
+  "feed.action.node.share": "{who} hat {title} freigegeben",
+  "feed.action.node.update": "{who} hat {title} umbenannt",
+  "feed.audience.all": "Alle",
+  "feed.audience.mine": "Nur ich",
+  "feed.audience.people": "Ohne Agenten",
+  "feed.description": "Was zuletzt passiert ist, im Umfang deiner Freigaben.",
+  "feed.empty": "Hier ist noch nichts.",
+  "feed.emptyWhy": "Der Feed zeigt nur, was an Knoten passiert, die du lesen darfst. Teilst du mit niemandem eine Freigabe, stehst nur du selbst darin.",
+  "feed.end": "Das war alles.",
+  "feed.failed": "Der Feed konnte nicht geladen werden.",
+  "feed.filter": "Wen zeigen",
+  "feed.gapWhy": "Wurde dir das Leserecht auf einen Ordner entzogen, fehlen von dort auch deine eigenen älteren Einträge.",
+  "feed.open": "{title} öffnen ({mark})",
+  "feed.title": "Feed",
+  "feed.version": "v{sequence}",
+  "feed.you": "Du",
   "flow.shareUnreadable": "Diese Freigabe deckt nicht ab, was dieser Flow liest: {titles}.",
   "flow.shareUnreadableHidden": "Diese Freigabe deckt nicht alles ab, was dieser Flow liest: {count} davon kannst du nicht sehen.",
   "flow.shareUnreadableHint": "Nichts ist blockiert. Ein Lauf hält für sie schlicht an dieser Stelle an.",

package/src/i18n/en.json

@@ -84,6 +84,7 @@
   "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",
@@ -110,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",
@@ -127,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}",
@@ -179,6 +180,27 @@
   "common.unsavedLeave": "Leave without saving",
   "common.unsavedStay": "Stay and save",
   "common.unsavedTitle": "Unsaved changes",
+  "feed.action.node.append": "{who} appended to {title}",
+  "feed.action.node.archive": "{who} archived {title}",
+  "feed.action.node.create": "{who} created {title}",
+  "feed.action.node.revoke": "{who} withdrew access to {title}",
+  "feed.action.node.save": "{who} changed {title}",
+  "feed.action.node.share": "{who} shared {title}",
+  "feed.action.node.update": "{who} renamed {title}",
+  "feed.audience.all": "Everyone",
+  "feed.audience.mine": "Only me",
+  "feed.audience.people": "Without agents",
+  "feed.description": "What happened recently, as far as your access reaches.",
+  "feed.empty": "Nothing here yet.",
+  "feed.emptyWhy": "The feed only shows what happens to nodes you may read. If you share access with nobody, only your own work appears.",
+  "feed.end": "That is everything.",
+  "feed.failed": "The feed could not be loaded.",
+  "feed.filter": "Who to show",
+  "feed.gapWhy": "If your read access to a folder was withdrawn, your own older entries from it are missing too.",
+  "feed.open": "Open {title} ({mark})",
+  "feed.title": "Feed",
+  "feed.version": "v{sequence}",
+  "feed.you": "You",
   "flow.shareUnreadable": "This grant does not cover what this flow reads: {titles}.",
   "flow.shareUnreadableHidden": "This grant does not cover everything this flow reads: {count} you cannot see.",
   "flow.shareUnreadableHint": "Nothing is blocked. A run will simply stop at that step for them.",

package/src/i18n/es.json

@@ -84,6 +84,7 @@
   "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",
@@ -110,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",
@@ -127,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}",
@@ -179,6 +180,27 @@
   "common.unsavedLeave": "Salir sin guardar",
   "common.unsavedStay": "Quedarse y guardar",
   "common.unsavedTitle": "Cambios sin guardar",
+  "feed.action.node.append": "{who} añadió algo a {title}",
+  "feed.action.node.archive": "{who} archivó {title}",
+  "feed.action.node.create": "{who} creó {title}",
+  "feed.action.node.revoke": "{who} retiró el acceso a {title}",
+  "feed.action.node.save": "{who} cambió {title}",
+  "feed.action.node.share": "{who} compartió {title}",
+  "feed.action.node.update": "{who} renombró {title}",
+  "feed.audience.all": "Todos",
+  "feed.audience.mine": "Solo yo",
+  "feed.audience.people": "Sin agentes",
+  "feed.description": "Lo que ha pasado, hasta donde llega tu acceso.",
+  "feed.empty": "Aquí todavía no hay nada.",
+  "feed.emptyWhy": "La actividad solo muestra lo que ocurre en nodos que puedes leer. Si no compartes acceso con nadie, solo aparece tu propio trabajo.",
+  "feed.end": "Eso es todo.",
+  "feed.failed": "No se pudo cargar la actividad.",
+  "feed.filter": "A quién mostrar",
+  "feed.gapWhy": "Si te retiraron el acceso de lectura a una carpeta, tus propias entradas antiguas de allí también faltan.",
+  "feed.open": "Abrir {title} ({mark})",
+  "feed.title": "Actividad",
+  "feed.version": "v{sequence}",
+  "feed.you": "Tú",
   "flow.shareUnreadable": "Este acceso no cubre lo que lee este flujo: {titles}.",
   "flow.shareUnreadableHidden": "Este acceso no cubre todo lo que lee este flujo: {count} que no puedes ver.",
   "flow.shareUnreadableHint": "No se bloquea nada. Una ejecución simplemente se detendrá en ese paso para esa persona.",

package/src/router/router.tsx

@@ -27,6 +27,12 @@ const flowsRoute = createRoute({
   validateSearch: selectionSearch,
   component: lazyRouteComponent(() => import("@/flows/flows.tsx"), "Flows"),
 });
+const feedRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/feed",
+  component: lazyRouteComponent(() => import("@/feed/feed.tsx"), "Feed"),
+});
+
 const archiveRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/archive",
@@ -44,6 +50,7 @@ const routeTree = rootRoute.addChildren([
   nodesRoute,
   flowsRoute,
   toolsRoute,
+  feedRoute,
   archiveRoute,
 ]);
 

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)]",
       )}
     >