@skillcdn/console 0.1.10 → 0.1.11

package/src/cli/format.ts

@@ -39,12 +39,14 @@ export function formatProjectLine(project: RestProject): string {
   if (project.openDecisions > 0) {
     notes.push(`${plural(project.openDecisions, "decision")} waiting`);
   }
-  if (project.openRuns > 0) {
-    notes.push(`${plural(project.openRuns, "agent")} at work`);
-  }
   return `${project.key}  ${project.name}  (${notes.join("; ")})`;
 }
 
+/** The line under a page of a listing that has more after it: how to ask for the next page. */
+export function formatMore(more: boolean, limit: number, offset: number): string {
+  return more ? `\n... more: --offset ${offset + limit}` : "";
+}
+
 export function formatTaskLine(task: RestTask): string {
   const notes = [`owner ${task.owner.login}`];
   if (task.assignee !== null) {
@@ -59,9 +61,6 @@ export function formatTaskLine(task: RestTask): string {
   if (task.openDecisions > 0) {
     notes.push(`${plural(task.openDecisions, "decision")} waiting`);
   }
-  if (task.openRuns > 0) {
-    notes.push("an agent at work");
-  }
   return `#${task.number}  ${task.state}  ${task.priority}  ${task.title}  (${notes.join("; ")})`;
 }
 
@@ -128,6 +127,9 @@ export function formatRunLine(run: RestRun): string {
   if (run.waitingFor !== null) {
     notes.push(`waiting for decision ${run.waitingFor}`);
   }
+  if (run.endedAt === null) {
+    notes.push(`last heard ${run.lastHeardAt}`);
+  }
   return `${run.id}  ${run.status}  ${run.agent} for ${run.person.login}  task #${run.taskNumber}  (${notes.join(", ")})`;
 }
 

package/src/cli/help.ts

@@ -1,4 +1,5 @@
 import {
+  DEFAULT_PAGE_LIMIT,
   MAX_AGENT_LENGTH,
   MAX_ARTIFACTS_PER_RUN,
   MAX_BODY_LENGTH,
@@ -105,9 +106,8 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
   },
   tasks: {
     usage:
-      "tasks [--state <state>] [--open] [--mine] [--category <key>] [--goal <id>] [--due <day|today|week|overdue>]",
-    about:
-      "The tasks on the board, newest first: number, state, priority, title, who owns and works on each, its category and its due day, and what waits on it. --open keeps the ones not done or dropped, --mine those assigned to you, --category and --goal those sorted into one, --due those due by a day: today, within the week, or overdue (the open ones past their day). States: idea, ready, in_progress, in_review, done, dropped.",
+      "tasks [--state <state>] [--open] [--mine] [--category <key>] [--goal <id>] [--due <day|today|week|overdue>] [--limit <n>] [--offset <n>]",
+    about: `The tasks on the board, newest first: number, state, priority, title, who owns and works on each, its category and its due day, and what waits on it. --open keeps the ones not done or dropped, --mine those assigned to you, --category and --goal those sorted into one, --due those due by a day: today, within the week, or overdue (the open ones past their day). A page at a time: ${DEFAULT_PAGE_LIMIT} unless --limit says otherwise, from --offset on; a last line says when there is more. States: idea, ready, in_progress, in_review, done, dropped.`,
   },
   task: {
     usage: `task <number|id>  |  task new <title> [--body <markdown>|--file <path>] ${TASK_FIELD_FLAGS}  |  task edit <number|id> [--title <title>] [--body <markdown>|--file <path>] ${TASK_FIELD_FLAGS}`,
@@ -153,11 +153,10 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
   take: {
     usage: "take <number|id> [--agent <name>]",
     about:
-      "Takes a task: a run begins, and the task is in progress and the person's. One agent at a time per task. --agent is what people see at work; left out, it is what the person called the token.",
+      "Takes a task: a run begins, and the task is in progress and the person's. A run still open on the task is taken over, since the board cannot know whether its agent still runs: it ends as abandoned, the feed says who took over, and that agent is refused on its next command. Look before taking (console task <number> lists the runs, with when each was last heard from), and take a task another agent was heard from on lately only when told to. --agent is what people see at work; left out, it is what the person called the token.",
     limits: [`agent: one line, up to ${MAX_AGENT_LENGTH} characters`],
     refusals: [
       "task.not_found: no task has that number or id",
-      "run.task_taken: a run is open on the task already; console runs --open --mine shows whether it is yours",
       "run.task_closed: the task is done or dropped",
     ],
   },
@@ -207,8 +206,8 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
     refusals: ["decision.not_found: no decision has that id"],
   },
   decisions: {
-    usage: "decisions [--open]",
-    about: "The decisions on the board, the waiting first; --open keeps only those.",
+    usage: "decisions [--open] [--limit <n>] [--offset <n>]",
+    about: `The decisions on the board, the waiting first; --open keeps only those. A page at a time: ${DEFAULT_PAGE_LIMIT} unless --limit says otherwise, from --offset on.`,
   },
   finish: {
     usage: 'finish [--summary "<markdown>"|--file <path>]',
@@ -231,9 +230,8 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
     refusals: RUN_REFUSALS,
   },
   runs: {
-    usage: "runs [--task <number|id>] [--open] [--mine]",
-    about:
-      "The runs, newest first: agents at work and what they did. --mine keeps those begun with this token.",
+    usage: "runs [--task <number|id>] [--open] [--mine] [--limit <n>] [--offset <n>]",
+    about: `The runs, newest first, each with when its agent was last heard from: --open keeps the ones not over, --mine those begun with this token. A page at a time: ${DEFAULT_PAGE_LIMIT} unless --limit says otherwise, from --offset on.`,
   },
   run: {
     usage: "run <id>",
@@ -312,6 +310,8 @@ Usage: console <command> [arguments] [--json] [--url <origin>] [--project <key>]
 
 const CLOSING = `Options everywhere: --json answers with the console's own JSON; --url names another console;
 --project names the project to work in, over CONSOLE_PROJECT and over what console use kept here.
+A listing (tasks, decisions, runs) is a page at a time: --limit <n> and --offset <n>, and a last line
+says when there is more, so that nothing is read that is not needed.
 Commands on a run (report, hand-in, ask, finish, fail) act on your one open run in the project;
 with several open, say which with --run <id>. A Markdown body given as - is read from standard input.
 console help <command> says what each command takes, the limits the console holds it to, and

package/src/client.ts

@@ -150,8 +150,14 @@ export interface EventFilter {
   readonly document?: string | undefined;
 }
 
+/** One page of a listing: how many items, from which one on; the server's bounds apply. */
+export interface Page {
+  readonly limit?: number | undefined;
+  readonly offset?: number | undefined;
+}
+
 /** What the board is narrowed to: one state, the open ones, a category, a goal, an assignee, or what is due by a day. */
-export interface TaskFilter {
+export interface TaskFilter extends Page {
   readonly state?: TaskState | undefined;
   /** True for the tasks not done or dropped; false for the rest. */
   readonly open?: boolean | undefined;
@@ -183,6 +189,10 @@ export interface ProjectClient {
   get(signal?: AbortSignal): Promise<RestProject>;
   /** Changes the project's settings; for an owner. */
   update(patch: RestProjectPatch): Promise<RestProject>;
+  /** Sets the project's own image for its mark, sent as a form; for an owner on the console's own pages. */
+  setIcon(input: FileUpload): Promise<RestProject>;
+  /** Takes the image away: the mark is the symbol on the colour again. */
+  removeIcon(): Promise<RestProject>;
   /** Those listed in the project, by login. */
   members(signal?: AbortSignal): Promise<RestMembers>;
   /** Lists a person of the workspace in the project; for an owner. */
@@ -194,9 +204,9 @@ export interface ProjectClient {
   task(ref: string, signal?: AbortSignal): Promise<RestTask>;
   createTask(input: RestTaskInput): Promise<RestTask>;
   updateTask(id: string, patch: RestTaskPatch): Promise<RestTask>;
-  /** The decisions, or only those that wait, or only those about one task. */
+  /** The decisions, or only those that wait, or only those about one task; a page of them. */
   decisions(
-    filter?: { readonly open?: boolean; readonly task?: string },
+    filter?: { readonly open?: boolean; readonly task?: string } & Page,
     signal?: AbortSignal,
   ): Promise<RestDecisions>;
   decision(id: string, signal?: AbortSignal): Promise<RestDecision>;
@@ -209,9 +219,9 @@ export interface ProjectClient {
   answerDecision(id: string, input: RestAnswerInput): Promise<RestDecision>;
   /** Grows a decision's record: its context, or what followed. */
   updateDecision(id: string, patch: RestDecisionPatch): Promise<RestDecision>;
-  /** The runs, newest first; or only those on one task, only the open ones, only the asker's own. */
+  /** The runs, newest first; or only those on one task, only the open ones, only the asker's own; a page of them. */
   runs(
-    filter?: { readonly task?: string; readonly open?: boolean; readonly mine?: boolean },
+    filter?: { readonly task?: string; readonly open?: boolean; readonly mine?: boolean } & Page,
     signal?: AbortSignal,
   ): Promise<RestRuns>;
   run(id: string, signal?: AbortSignal): Promise<RestRun>;
@@ -381,6 +391,8 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
 
   const flag = (value: boolean | undefined): string | undefined =>
     value === undefined ? undefined : String(value);
+  const number = (value: number | undefined): string | undefined =>
+    value === undefined ? undefined : String(value);
 
   /** A file as the parts of a form: the bytes with their name and type, and the label. */
   const formOf = (input: FileUpload): FormData => {
@@ -405,6 +417,8 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
       key,
       get: (signal) => request("GET", `${base}${at()}`, undefined, restProjectSchema, signal),
       update: (patch) => request("PATCH", `${base}${at()}`, patch, restProjectSchema),
+      setIcon: (input) => request("POST", `${base}${at()}/icon`, formOf(input), restProjectSchema),
+      removeIcon: () => request("DELETE", `${base}${at()}/icon`, undefined, restProjectSchema),
       members: (signal) =>
         request("GET", `${base}${at("members")}`, undefined, restMembersSchema, signal),
       addMember: (input) => request("POST", `${base}${at("members")}`, input, restMemberSchema),
@@ -422,6 +436,8 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
             goal: filter.goal,
             assignee: filter.assignee,
             dueBy: filter.dueBy,
+            limit: number(filter.limit),
+            offset: number(filter.offset),
           }),
           undefined,
           restTasksSchema,
@@ -435,7 +451,12 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
       decisions: (filter = {}, signal) =>
         request(
           "GET",
-          withQuery(at("decisions"), { open: flag(filter.open), task: filter.task }),
+          withQuery(at("decisions"), {
+            open: flag(filter.open),
+            task: filter.task,
+            limit: number(filter.limit),
+            offset: number(filter.offset),
+          }),
           undefined,
           restDecisionsSchema,
           signal,
@@ -463,6 +484,8 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
             task: filter.task,
             open: flag(filter.open),
             mine: flag(filter.mine),
+            limit: number(filter.limit),
+            offset: number(filter.offset),
           }),
           undefined,
           restRunsSchema,

package/src/components/board.tsx

@@ -3,27 +3,18 @@ import {
   type RestCategory,
   type RestGoal,
   type RestPerson,
-  type RestRun,
   type RestTask,
   TASK_STATES,
   type TaskState,
 } from "../api.js";
-import { useLanguage, useWords } from "../i18n/index.js";
+import { useWords } from "../i18n/index.js";
 import type { BoardFilter } from "../router.js";
-import {
-  Avatar,
-  Badge,
-  Button,
-  CategoryBadge,
-  cx,
-  DueBadge,
-  formatInstant,
-  PriorityBadge,
-} from "./ui.js";
+import { Avatar, Badge, Button, CategoryBadge, cx, DueBadge, PriorityBadge } from "./ui.js";
 
 // The board: one column per state, the tasks in it, the sooner due first and the newest after.
 // A card says what a person needs at a glance and nothing more: the number and the title, the
-// category, what is due, who is on it, what blocks it, and whose agent is at it. It takes its
+// category, what is due, who is on it, and what blocks it. Whether an agent is at it is not
+// said, since the board cannot know (ADR-0020); the task's page shows its runs. It takes its
 // data as props and nothing from the network; what it is told on a click goes back up.
 
 export interface BoardProps {
@@ -33,32 +24,21 @@ export interface BoardProps {
   readonly onOpen: (task: RestTask) => void;
   /** Called when a person moves a task to another column. Left out, the board is read-only. */
   readonly onMove?: ((task: RestTask, state: TaskState) => void) | undefined;
-  /** The runs of the project, for a card to name the agent at work on its task. */
-  readonly runs?: readonly RestRun[] | undefined;
   /** The day to count due days from; the browser's today when left out. */
   readonly today?: string | undefined;
   /** What a column shows when it has nothing; the way to write the first task, for example. */
   readonly empty?: ReactNode;
 }
 
-/** The open run on a task, when an agent is at work on it: whose, and since when. */
-function runOn(task: RestTask, runs: readonly RestRun[] | undefined): RestRun | undefined {
-  return runs?.find(
-    (run) => run.taskId === task.id && (run.status === "running" || run.status === "waiting"),
-  );
-}
-
 export function TaskCard(props: {
   readonly task: RestTask;
   readonly href: string;
   readonly onOpen: (task: RestTask) => void;
   readonly onMove?: ((task: RestTask, state: TaskState) => void) | undefined;
-  readonly run?: RestRun | undefined;
   readonly today?: string | undefined;
 }) {
   const words = useWords();
-  const { tag } = useLanguage();
-  const { task, run } = props;
+  const { task } = props;
   return (
     <article className="sc-card" aria-label={`#${task.number} ${task.title}`}>
       <a
@@ -84,18 +64,6 @@ export function TaskCard(props: {
             {words.board.decisions(task.openDecisions)}
           </Badge>
         )}
-        {task.openRuns > 0 && (
-          <Badge
-            tone="accent"
-            title={
-              run === undefined
-                ? words.board.agentAtWorkTitle
-                : words.board.agentSince(run.agent, formatInstant(run.startedAt, tag))
-            }
-          >
-            {run === undefined ? words.board.agentAtWork : run.agent}
-          </Badge>
-        )}
         <span className="sc-card-spacer" />
         {task.assignee !== null && <Avatar person={task.assignee} size="sm" />}
       </div>
@@ -156,7 +124,6 @@ export function Board(props: BoardProps) {
                   href={props.taskHref(task)}
                   onOpen={props.onOpen}
                   onMove={props.onMove}
-                  run={runOn(task, props.runs)}
                   today={props.today}
                 />
               ))}

package/src/components/calendar.tsx

@@ -1,10 +1,11 @@
-import { OPEN_TASK_STATES, type RestPerson, type RestTask } from "../api.js";
+import { OPEN_TASK_STATES, type RestCategory, type RestPerson, type RestTask } from "../api.js";
 import {
   addMonths,
   daysBetween,
   firstDayOfWeek,
   formatMonth,
   formatWeekday,
+  type GridDay,
   monthGrid,
   monthOf,
   today as todayOf,
@@ -13,24 +14,82 @@ import {
 import { useLanguage, useWords } from "../i18n/index.js";
 import { cx, PersonChip } from "./ui.js";
 
-// The calendar of a project (ADR-0019): the month as a grid, each task on the day it is due
-// and, lightly, on the day it starts; and who has what, so that whoever runs the project sees
-// at a glance whether the work is on its days. Takes its data as props and nothing from the
-// network; the month shown is the address's (ADR-0010).
+// The calendar of a project (ADR-0019): the month as a grid. A task planned from a start to a
+// due day lies across its days as a bar, in a lane of its own within each week so that the bars
+// of one week never cross; a task with a due day alone sits on it as a dot, and one with a
+// start alone is marked on that day. Who has what says whether the work is on its days. Takes
+// its data as props and nothing from the network; the month shown is the address's (ADR-0010).
 
 const isOpen = (task: RestTask): boolean => OPEN_TASK_STATES.includes(task.state);
 
+/** Whether a task lies across days: a start and a due day, and the due day after the start. */
+const spans = (task: RestTask): boolean =>
+  task.startsOn !== null && task.dueOn !== null && task.startsOn < task.dueOn;
+
 export interface CalendarProps {
   readonly tasks: readonly RestTask[];
   /** The month shown: `2026-10`. */
   readonly month: string;
   /** The day to count from; the browser's today when left out. */
   readonly today?: string | undefined;
+  /** The workspace's categories, for the legend to say what the colours mean. */
+  readonly categories?: readonly RestCategory[] | undefined;
   readonly taskHref: (task: RestTask) => string;
   /** Where the calendar is on another month. */
   readonly monthHref: (month: string) => string;
 }
 
+/** One task's stretch across one week: which columns it covers, and in which lane it lies. */
+export interface WeekSegment {
+  readonly task: RestTask;
+  /** The first and the last column (0 to 6) the task covers in this week. */
+  readonly from: number;
+  readonly to: number;
+  readonly lane: number;
+  /** Whether the task begins in this week, and whether it ends in it. */
+  readonly begins: boolean;
+  readonly ends: boolean;
+}
+
+/**
+ * The bars of one week: every task lying across days that touches the week, cut to it, each
+ * in the first lane where it crosses nothing that was laid before it. The longest and earliest
+ * go first, so that the lanes stay few.
+ */
+export function weekSegments(week: readonly GridDay[], tasks: readonly RestTask[]): WeekSegment[] {
+  const first = week[0]?.day;
+  const last = week[week.length - 1]?.day;
+  if (first === undefined || last === undefined) {
+    return [];
+  }
+  const cut = tasks
+    .filter(spans)
+    .flatMap((task) => {
+      const startsOn = task.startsOn ?? first;
+      const dueOn = task.dueOn ?? last;
+      if (dueOn < first || startsOn > last) {
+        return [];
+      }
+      const from = startsOn < first ? 0 : daysBetween(first, startsOn);
+      const to = dueOn > last ? week.length - 1 : daysBetween(first, dueOn);
+      return [{ task, from, to, begins: startsOn >= first, ends: dueOn <= last }];
+    })
+    .sort(
+      (a, b) => a.from - b.from || b.to - b.from - (a.to - a.from) || a.task.number - b.task.number,
+    );
+  const ends: number[] = [];
+  return cut.map((segment) => {
+    let lane = ends.findIndex((end) => end < segment.from);
+    if (lane === -1) {
+      lane = ends.length;
+      ends.push(segment.to);
+    } else {
+      ends[lane] = segment.to;
+    }
+    return { ...segment, lane };
+  });
+}
+
 function push(map: Map<string, RestTask[]>, day: string, task: RestTask): void {
   const list = map.get(day);
   if (list === undefined) {
@@ -49,10 +108,12 @@ export function Calendar(props: CalendarProps) {
   const due = new Map<string, RestTask[]>();
   const starting = new Map<string, RestTask[]>();
   for (const task of props.tasks) {
+    if (spans(task)) {
+      continue;
+    }
     if (task.dueOn !== null) {
       push(due, task.dueOn, task);
-    }
-    if (task.startsOn !== null && task.startsOn !== task.dueOn) {
+    } else if (task.startsOn !== null) {
       push(starting, task.startsOn, task);
     }
   }
@@ -61,9 +122,17 @@ export function Calendar(props: CalendarProps) {
     list.sort((a, b) => Number(isOpen(b)) - Number(isOpen(a)) || a.number - b.number);
   }
   const inMonth = (day: string) => monthOf(day) === props.month;
+  const monthWeeks = weeks.map((week) => ({ week, segments: weekSegments(week, props.tasks) }));
   const nothing =
     [...due.keys()].every((day) => !inMonth(day)) &&
-    [...starting.keys()].every((day) => !inMonth(day));
+    [...starting.keys()].every((day) => !inMonth(day)) &&
+    monthWeeks.every(({ week, segments }) =>
+      segments.every(
+        (segment) => !week.slice(segment.from, segment.to + 1).some((cell) => cell.inMonth),
+      ),
+    );
+  const tone = (task: RestTask, day: string) =>
+    cx(!isOpen(task) && "sc-calendar-over", isOpen(task) && day < now && "sc-calendar-late");
   return (
     <div className="sc-calendar">
       <div className="sc-calendar-head">
@@ -102,54 +171,97 @@ export function Calendar(props: CalendarProps) {
           </tr>
         </thead>
         <tbody>
-          {weeks.map((week) => (
-            <tr key={week[0]?.day}>
-              {week.map((cell) => (
-                <td
-                  key={cell.day}
-                  className={cx(
-                    "sc-calendar-cell",
-                    !cell.inMonth && "sc-calendar-cell-outside",
-                    cell.day === now && "sc-calendar-cell-today",
-                  )}
-                >
-                  <span className="sc-calendar-day">{Number(cell.day.slice(8))}</span>
-                  {(due.get(cell.day) ?? []).map((task) => (
-                    <a
-                      key={task.id}
-                      className={cx(
-                        "sc-calendar-task",
-                        !isOpen(task) && "sc-calendar-task-over",
-                        isOpen(task) && cell.day < now && "sc-calendar-task-late",
-                      )}
-                      href={props.taskHref(task)}
-                      title={`#${task.number} ${task.title}`}
-                    >
-                      <span
-                        className={cx(
-                          "sc-calendar-dot",
-                          `sc-category-${task.category?.color ?? "gray"}`,
-                        )}
-                      />
-                      <span className="sc-calendar-task-title">{task.title}</span>
-                    </a>
-                  ))}
-                  {(starting.get(cell.day) ?? []).map((task) => (
-                    <a
-                      key={task.id}
-                      className="sc-calendar-task sc-calendar-task-start"
-                      href={props.taskHref(task)}
-                      title={`#${task.number} ${task.title}: ${words.starts}`}
-                    >
-                      <span className="sc-calendar-task-title">{task.title}</span>
-                    </a>
-                  ))}
-                </td>
-              ))}
-            </tr>
-          ))}
+          {monthWeeks.map(({ week, segments }) => {
+            const lanes = segments.reduce((most, segment) => Math.max(most, segment.lane + 1), 0);
+            return (
+              <tr key={week[0]?.day}>
+                {week.map((cell, column) => (
+                  <td
+                    key={cell.day}
+                    className={cx(
+                      "sc-calendar-cell",
+                      !cell.inMonth && "sc-calendar-cell-outside",
+                      cell.day === now && "sc-calendar-cell-today",
+                    )}
+                  >
+                    <span className="sc-calendar-day">{Number(cell.day.slice(8))}</span>
+                    {Array.from({ length: lanes }, (_, lane) => {
+                      const segment = segments.find(
+                        (candidate) =>
+                          candidate.lane === lane &&
+                          candidate.from <= column &&
+                          column <= candidate.to,
+                      );
+                      if (segment === undefined) {
+                        // The lane is someone else's on this day: the bars below keep their height.
+                        // biome-ignore lint/suspicious/noArrayIndexKey: an empty lane is nothing but its position, and the lanes of a week never reorder
+                        return <span key={lane} className="sc-calendar-lane" aria-hidden="true" />;
+                      }
+                      const { task } = segment;
+                      return (
+                        <a
+                          key={task.id}
+                          className={cx(
+                            "sc-calendar-bar",
+                            `sc-category-${task.category?.color ?? "gray"}`,
+                            segment.from === column && segment.begins && "sc-calendar-bar-begins",
+                            segment.to === column && segment.ends && "sc-calendar-bar-ends",
+                            tone(task, task.dueOn ?? cell.day),
+                          )}
+                          href={props.taskHref(task)}
+                          title={`#${task.number} ${task.title}`}
+                        >
+                          {segment.from === column && (
+                            <span className="sc-calendar-task-title">{task.title}</span>
+                          )}
+                        </a>
+                      );
+                    })}
+                    {(due.get(cell.day) ?? []).map((task) => (
+                      <a
+                        key={task.id}
+                        className={cx("sc-calendar-task", tone(task, cell.day))}
+                        href={props.taskHref(task)}
+                        title={`#${task.number} ${task.title}`}
+                      >
+                        <span
+                          className={cx(
+                            "sc-calendar-dot",
+                            `sc-category-${task.category?.color ?? "gray"}`,
+                          )}
+                        />
+                        <span className="sc-calendar-task-title">{task.title}</span>
+                      </a>
+                    ))}
+                    {(starting.get(cell.day) ?? []).map((task) => (
+                      <a
+                        key={task.id}
+                        className="sc-calendar-task sc-calendar-task-start"
+                        href={props.taskHref(task)}
+                        title={`#${task.number} ${task.title}: ${words.startsOnly}`}
+                      >
+                        <span className="sc-calendar-task-title">{task.title}</span>
+                      </a>
+                    ))}
+                  </td>
+                ))}
+              </tr>
+            );
+          })}
         </tbody>
       </table>
+      {(props.categories ?? []).length > 0 && (
+        <dl className="sc-calendar-legend" aria-label={words.legend.title}>
+          {(props.categories ?? []).map((category) => (
+            <div key={category.key}>
+              <dt>
+                <span className={cx("sc-calendar-dot", `sc-category-${category.color}`)} />
+              </dt>
+              <dd>{category.name}</dd>
+            </div>
+          ))}
+        </dl>
+      )}
       {nothing && <p className="sc-muted">{words.nothingDue}</p>}
     </div>
   );

package/src/components/decision-list.tsx

@@ -9,6 +9,7 @@ import {
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { Markdown } from "./markdown.js";
+import { ShowMore, usePaged } from "./paged.js";
 import { Button, cx, PersonChip, Time } from "./ui.js";
 
 // The decisions: the ones that wait, each a card with the way to answer it, since they are what
@@ -254,40 +255,44 @@ export interface DecisionLogProps {
 /** The record: one row per decision answered, what was asked, what was chosen, by whom, when. */
 export function DecisionLog(props: DecisionLogProps) {
   const words = useWords();
+  const { shown, rest, more } = usePaged(props.decisions);
   return (
-    <ol className="sc-decision-log" aria-label={words.decisions.record}>
-      {props.decisions.map((decision) => {
-        const task = decision.taskId === null ? undefined : props.tasks?.get(decision.taskId);
-        const href = props.decisionHref?.(decision);
-        const chosen =
-          decision.options.find((option) => option.id === decision.answer?.option)?.label ??
-          decision.answer?.option ??
-          "";
-        return (
-          <li key={decision.id} className="sc-decision-row">
-            <span className="sc-decision-row-question">
-              {href === undefined ? decision.question : <a href={href}>{decision.question}</a>}
-            </span>
-            <span className="sc-decision-row-answer">{chosen}</span>
-            <span className="sc-decision-row-meta">
-              {decision.answer !== null && (
-                <>
-                  <PersonChip person={decision.answer.by} /> <Time iso={decision.answer.at} />
-                </>
-              )}
-              {task !== undefined &&
-                (props.taskHref === undefined ? (
-                  <span className="sc-card-number">#{task.number}</span>
-                ) : (
-                  <a className="sc-card-number" href={props.taskHref(task)}>
-                    #{task.number}
-                  </a>
-                ))}
-            </span>
-          </li>
-        );
-      })}
-    </ol>
+    <>
+      <ol className="sc-decision-log" aria-label={words.decisions.record}>
+        {shown.map((decision) => {
+          const task = decision.taskId === null ? undefined : props.tasks?.get(decision.taskId);
+          const href = props.decisionHref?.(decision);
+          const chosen =
+            decision.options.find((option) => option.id === decision.answer?.option)?.label ??
+            decision.answer?.option ??
+            "";
+          return (
+            <li key={decision.id} className="sc-decision-row">
+              <span className="sc-decision-row-question">
+                {href === undefined ? decision.question : <a href={href}>{decision.question}</a>}
+              </span>
+              <span className="sc-decision-row-answer">{chosen}</span>
+              <span className="sc-decision-row-meta">
+                {decision.answer !== null && (
+                  <>
+                    <PersonChip person={decision.answer.by} /> <Time iso={decision.answer.at} />
+                  </>
+                )}
+                {task !== undefined &&
+                  (props.taskHref === undefined ? (
+                    <span className="sc-card-number">#{task.number}</span>
+                  ) : (
+                    <a className="sc-card-number" href={props.taskHref(task)}>
+                      #{task.number}
+                    </a>
+                  ))}
+              </span>
+            </li>
+          );
+        })}
+      </ol>
+      <ShowMore rest={rest} onMore={more} />
+    </>
   );
 }