@skillcdn/console 0.1.10 → 0.1.12

package/src/components/board.tsx

@@ -3,12 +3,11 @@ 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,
@@ -17,13 +16,14 @@ import {
   CategoryBadge,
   cx,
   DueBadge,
-  formatInstant,
   PriorityBadge,
+  personName,
 } 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 +33,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 +73,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 +133,6 @@ export function Board(props: BoardProps) {
                   href={props.taskHref(task)}
                   onOpen={props.onOpen}
                   onMove={props.onMove}
-                  run={runOn(task, props.runs)}
                   today={props.today}
                 />
               ))}
@@ -289,7 +265,7 @@ export function BoardFilters(props: BoardFiltersProps) {
             .filter((person) => person.id !== props.me?.id)
             .map((person) => (
               <option key={person.id} value={person.id}>
-                {person.login}
+                {personName(person)}
               </option>
             ))}
         </select>

package/src/components/calendar.tsx

@@ -1,36 +1,95 @@
-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,
   weekdays,
 } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
-import { cx, PersonChip } from "./ui.js";
+import { cx, PersonChip, personName } 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>
   );
@@ -201,7 +313,7 @@ export function workloadOf(tasks: readonly RestTask[], today: string): WorkloadR
       if (b.person === undefined) {
         return -1;
       }
-      return a.person.login.localeCompare(b.person.login);
+      return personName(a.person).localeCompare(personName(b.person));
     });
 }
 

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} />
+    </>
   );
 }
 

package/src/components/event-feed.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import type { RestEvent } from "../api.js";
 import { en, type Messages } from "../i18n/en.js";
 import { useWords } from "../i18n/index.js";
+import { ShowMore, usePaged } from "./paged.js";
 import { PersonChip, Time } from "./ui.js";
 
 // The feed: one line per event, newest first, as a sentence a person reads at a glance: who,
@@ -79,6 +80,8 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
       return feed.event.runReported(task, data.excerpt);
     case "run.handed_in":
       return feed.event.runHandedIn(data.label ?? feed.something, task);
+    case "run.taken_over":
+      return feed.event.runTakenOver(task, data.agent ?? feed.someone);
     case "run.ended":
       return data.status === "finished"
         ? feed.event.runFinished(task)
@@ -106,36 +109,40 @@ export interface EventFeedProps {
 
 export function EventFeed(props: EventFeedProps) {
   const words = useWords();
+  const newestFirst = [...props.events].reverse();
+  const { shown, rest, more } = usePaged(newestFirst);
   if (props.events.length === 0) {
     return <div className="sc-feed">{props.empty ?? null}</div>;
   }
-  const newestFirst = [...props.events].reverse();
   return (
-    <ol className="sc-feed" aria-label={words.feed.list}>
-      {newestFirst.map((event) => {
-        const href = props.href?.(event);
-        const said = describeEvent(event, words);
-        return (
-          <li key={event.id} className="sc-feed-item">
-            <span className="sc-feed-actor">
-              {event.actor === null ? (
-                <span className="sc-person-login">{words.feed.console}</span>
-              ) : (
-                <PersonChip person={event.actor} />
-              )}
-              {event.agent !== null && (
-                <span className="sc-feed-agent" title={words.feed.asTitle}>
-                  {words.feed.as(event.agent)}
-                </span>
-              )}
-            </span>
-            <span className="sc-feed-words">
-              {href === undefined ? said : <a href={href}>{said}</a>}
-            </span>
-            <Time iso={event.createdAt} />
-          </li>
-        );
-      })}
-    </ol>
+    <>
+      <ol className="sc-feed" aria-label={words.feed.list}>
+        {shown.map((event) => {
+          const href = props.href?.(event);
+          const said = describeEvent(event, words);
+          return (
+            <li key={event.id} className="sc-feed-item">
+              <span className="sc-feed-actor">
+                {event.actor === null ? (
+                  <span className="sc-person-login">{words.feed.console}</span>
+                ) : (
+                  <PersonChip person={event.actor} />
+                )}
+                {event.agent !== null && (
+                  <span className="sc-feed-agent" title={words.feed.asTitle}>
+                    {words.feed.as(event.agent)}
+                  </span>
+                )}
+              </span>
+              <span className="sc-feed-words">
+                {href === undefined ? said : <a href={href}>{said}</a>}
+              </span>
+              <Time iso={event.createdAt} />
+            </li>
+          );
+        })}
+      </ol>
+      <ShowMore rest={rest} onMore={more} />
+    </>
   );
 }

package/src/components/paged.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { useWords } from "../i18n/index.js";
+import { Button } from "./ui.js";
+
+// A long list shown a page at a time, from what the page already holds: the record of the
+// decisions, the feed, the tasks with no day. The next page is a click away and nothing is
+// asked of the server; the API's own pages (`limit`, `offset`) are for the command and scripts.
+
+/** How many items a list shows before it asks to be told to show more. */
+export const PAGE_SIZE = 50;
+
+/** The first `shown` items of a list, and the way to show the next page of it. */
+export function usePaged<T>(
+  items: readonly T[],
+  pageSize = PAGE_SIZE,
+): { readonly shown: readonly T[]; readonly rest: number; readonly more: () => void } {
+  const [pages, setPages] = useState(1);
+  const shown = items.slice(0, pages * pageSize);
+  return {
+    shown,
+    rest: items.length - shown.length,
+    more: () => setPages((current) => current + 1),
+  };
+}
+
+/** The button under a paged list, saying how many more there are; nothing when there are none. */
+export function ShowMore(props: { readonly rest: number; readonly onMore: () => void }) {
+  const words = useWords();
+  if (props.rest <= 0) {
+    return null;
+  }
+  return (
+    <div className="sc-show-more">
+      <Button variant="secondary" size="sm" onClick={props.onMore}>
+        {words.common.showMore(Math.min(props.rest, PAGE_SIZE), props.rest)}
+      </Button>
+    </div>
+  );
+}

package/src/components/people.tsx

@@ -1,7 +1,7 @@
 import type { PersonRole, RestPerson } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { PERSON_ROLES } from "../vocabulary.js";
-import { PersonChip, RoleBadge } from "./ui.js";
+import { PersonChip, personName, RoleBadge } from "./ui.js";
 
 // The people of the board, with what each may do. An administrator changes roles here; a
 // member reads. Takes its data as props and nothing from the network.
@@ -24,15 +24,15 @@ export function PeopleList(props: PeopleListProps) {
       {props.people.map((person) => (
         <li key={person.id} className="sc-person-row">
           <PersonChip person={person} size="md" />
-          <span className="sc-person-name">
-            {person.name ?? ""}
-            {props.me?.id === person.id && <span className="sc-muted"> {words.common.you}</span>}
+          <span className="sc-person-name sc-muted">
+            {person.name === null ? "" : person.login}
+            {props.me?.id === person.id && <span> {words.common.you}</span>}
           </span>
           {props.onChangeRole === undefined ? (
             <RoleBadge role={person.role} />
           ) : (
             <label className="sc-field sc-field-inline">
-              <span className="sc-visually-hidden">{words.people.roleOf(person.login)}</span>
+              <span className="sc-visually-hidden">{words.people.roleOf(personName(person))}</span>
               <select
                 className="sc-input"
                 value={person.role}