@skillcdn/console 0.1.9 → 0.1.10

package/src/client.ts

@@ -1,6 +1,7 @@
 import {
   AUTH_ROUTES,
   CLAIM_PATH,
+  categoryPath,
   connectPath,
   personTokensPath,
   projectPath,
@@ -10,6 +11,10 @@ import {
 import {
   type RestAnswerInput,
   type RestArtifactInput,
+  type RestCategories,
+  type RestCategory,
+  type RestCategoryInput,
+  type RestCategoryPatch,
   type RestClaim,
   type RestConnectInput,
   type RestConnection,
@@ -22,6 +27,10 @@ import {
   type RestDocumentInput,
   type RestDocuments,
   type RestEvents,
+  type RestGoal,
+  type RestGoalInput,
+  type RestGoalPatch,
+  type RestGoals,
   type RestMe,
   type RestMember,
   type RestMemberInput,
@@ -50,6 +59,9 @@ import {
   type RestTokens,
   type RestVersion,
   type RestVersions,
+  type RestWork,
+  restCategoriesSchema,
+  restCategorySchema,
   restClaimSchema,
   restConnectionSchema,
   restConnectRequestSchema,
@@ -59,6 +71,8 @@ import {
   restDocumentsSchema,
   restErrorSchema,
   restEventsSchema,
+  restGoalSchema,
+  restGoalsSchema,
   restMemberSchema,
   restMembersSchema,
   restMeSchema,
@@ -75,6 +89,7 @@ import {
   restTokensSchema,
   restVersionSchema,
   restVersionsSchema,
+  restWorkSchema,
 } from "./schemas.js";
 import type { TaskState } from "./vocabulary.js";
 
@@ -135,6 +150,21 @@ export interface EventFilter {
   readonly document?: string | 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 {
+  readonly state?: TaskState | undefined;
+  /** True for the tasks not done or dropped; false for the rest. */
+  readonly open?: boolean | undefined;
+  /** The key of a category. */
+  readonly category?: string | undefined;
+  /** The id of a goal. */
+  readonly goal?: string | undefined;
+  /** The id of the person the tasks are assigned to. */
+  readonly assignee?: string | undefined;
+  /** A day (`2026-10-20`): the tasks due on it or before it. */
+  readonly dueBy?: string | undefined;
+}
+
 /** What a folder's listing, or a search, of the documents is narrowed to. */
 export interface DocumentFilter {
   /** The folder to list, `""` or left out for the root. */
@@ -159,7 +189,7 @@ export interface ProjectClient {
   addMember(input: RestMemberInput): Promise<RestMember>;
   updateMember(personId: string, patch: RestMemberPatch): Promise<RestMember>;
   removeMember(personId: string): Promise<void>;
-  tasks(filter?: { readonly state?: TaskState }, signal?: AbortSignal): Promise<RestTasks>;
+  tasks(filter?: TaskFilter, signal?: AbortSignal): Promise<RestTasks>;
   /** One task, by its id or by its number. */
   task(ref: string, signal?: AbortSignal): Promise<RestTask>;
   createTask(input: RestTaskInput): Promise<RestTask>;
@@ -221,6 +251,12 @@ export interface ProjectClient {
   attachFile(path: string, input: FileUpload): Promise<RestDocument>;
   /** Where the bytes of a file attached to a document are read, by the file's id. */
   documentFileUrl(path: string, fileId: string): string;
+  /** The roadmap (ADR-0019): the goals, the active first, each with its tasks counted by state. */
+  goals(signal?: AbortSignal): Promise<RestGoals>;
+  goal(id: string, signal?: AbortSignal): Promise<RestGoal>;
+  /** Sets a goal; for an owner, with a session or a token. */
+  createGoal(input: RestGoalInput): Promise<RestGoal>;
+  updateGoal(id: string, patch: RestGoalPatch): Promise<RestGoal>;
 }
 
 export interface ConsoleClient {
@@ -238,6 +274,15 @@ export interface ConsoleClient {
   project(key: string): ProjectClient;
   /** The workspace's own events, the ones about no project, after event number `after`. */
   events(after: number, signal?: AbortSignal): Promise<RestEvents>;
+  /** The categories tasks are sorted into (ADR-0019), by name. */
+  categories(signal?: AbortSignal): Promise<RestCategories>;
+  /** Makes a category; for an administrator signed in. */
+  createCategory(input: RestCategoryInput): Promise<RestCategory>;
+  updateCategory(key: string, patch: RestCategoryPatch): Promise<RestCategory>;
+  /** Removes a category no task uses; for an administrator signed in. */
+  removeCategory(key: string): Promise<void>;
+  /** What is on the asker's plate across the projects they may see: their open tasks, and the decisions waiting. */
+  work(signal?: AbortSignal): Promise<RestWork>;
   /** The tokens of whoever asks. */
   tokens(signal?: AbortSignal): Promise<RestTokens>;
   /** The tokens of another person: for an administrator. */
@@ -370,7 +415,14 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
       tasks: (filter = {}, signal) =>
         request(
           "GET",
-          withQuery(at("tasks"), { state: filter.state }),
+          withQuery(at("tasks"), {
+            state: filter.state,
+            open: flag(filter.open),
+            category: filter.category,
+            goal: filter.goal,
+            assignee: filter.assignee,
+            dueBy: filter.dueBy,
+          }),
           undefined,
           restTasksSchema,
           signal,
@@ -485,6 +537,13 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
         request("POST", `${base}${at("docs", path)}/files`, formOf(input), restDocumentSchema),
       documentFileUrl: (path, fileId) =>
         `${base}${at("docs", path)}/files/${encodeURIComponent(fileId)}`,
+      goals: (signal) =>
+        request("GET", `${base}${at("goals")}`, undefined, restGoalsSchema, signal),
+      goal: (id, signal) =>
+        request("GET", `${base}${at("goals", id)}`, undefined, restGoalSchema, signal),
+      createGoal: (input) => request("POST", `${base}${at("goals")}`, input, restGoalSchema),
+      updateGoal: (id, patch) =>
+        request("PATCH", `${base}${at("goals", id)}`, patch, restGoalSchema),
     };
   };
 
@@ -507,6 +566,15 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
         restEventsSchema,
         signal,
       ),
+    categories: (signal) =>
+      request("GET", `${base}${REST_ROUTES.categories}`, undefined, restCategoriesSchema, signal),
+    createCategory: (input) =>
+      request("POST", `${base}${REST_ROUTES.categories}`, input, restCategorySchema),
+    updateCategory: (key, patch) =>
+      request("PATCH", `${base}${categoryPath(key)}`, patch, restCategorySchema),
+    removeCategory: (key) => request("DELETE", `${base}${categoryPath(key)}`, undefined, undefined),
+    work: (signal) =>
+      request("GET", `${base}${REST_ROUTES.work}`, undefined, restWorkSchema, signal),
     tokens: (signal) =>
       request("GET", `${base}${REST_ROUTES.tokens}`, undefined, restTokensSchema, signal),
     createToken: (input) =>

package/src/components/board.tsx

@@ -1,10 +1,30 @@
 import type { ReactNode } from "react";
-import { type RestTask, TASK_STATES, type TaskState } from "../api.js";
-import { useWords } from "../i18n/index.js";
-import { Avatar, Badge, cx, PriorityBadge } from "./ui.js";
+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 type { BoardFilter } from "../router.js";
+import {
+  Avatar,
+  Badge,
+  Button,
+  CategoryBadge,
+  cx,
+  DueBadge,
+  formatInstant,
+  PriorityBadge,
+} from "./ui.js";
 
-// The board: one column per state, the tasks in it, newest first. It takes its data as props
-// and nothing from the network; what it is told on a click goes back up.
+// 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
+// data as props and nothing from the network; what it is told on a click goes back up.
 
 export interface BoardProps {
   readonly tasks: readonly RestTask[];
@@ -13,18 +33,32 @@ 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 { task } = props;
+  const { tag } = useLanguage();
+  const { task, run } = props;
   return (
     <article className="sc-card" aria-label={`#${task.number} ${task.title}`}>
       <a
@@ -40,20 +74,28 @@ export function TaskCard(props: {
         <span className="sc-card-number">#{task.number}</span> {task.title}
       </a>
       <div className="sc-card-meta">
+        {task.category !== null && <CategoryBadge category={task.category} />}
         <PriorityBadge priority={task.priority} />
+        {task.dueOn !== null && (
+          <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
+        )}
         {task.openDecisions > 0 && (
           <Badge tone="warning" title={words.board.decisionsTitle}>
             {words.board.decisions(task.openDecisions)}
           </Badge>
         )}
         {task.openRuns > 0 && (
-          <Badge tone="accent" title={words.board.agentAtWorkTitle}>
-            {words.board.agentAtWork}
+          <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>
         )}
-        {task.links.length > 0 && (
-          <Badge tone="neutral">{words.board.links(task.links.length)}</Badge>
-        )}
         <span className="sc-card-spacer" />
         {task.assignee !== null && <Avatar person={task.assignee} size="sm" />}
       </div>
@@ -76,12 +118,26 @@ export function TaskCard(props: {
   );
 }
 
+/** The order a column reads in: what is due soonest first, what has no day after, the newest first among those. */
+export function byDue(a: RestTask, b: RestTask): number {
+  if (a.dueOn !== b.dueOn) {
+    if (a.dueOn === null) {
+      return 1;
+    }
+    if (b.dueOn === null) {
+      return -1;
+    }
+    return a.dueOn.localeCompare(b.dueOn);
+  }
+  return b.number - a.number;
+}
+
 export function Board(props: BoardProps) {
   const words = useWords();
   return (
     <div className="sc-board">
       {TASK_STATES.map((state) => {
-        const tasks = props.tasks.filter((task) => task.state === state);
+        const tasks = props.tasks.filter((task) => task.state === state).sort(byDue);
         return (
           <section
             key={state}
@@ -100,6 +156,8 @@ export function Board(props: BoardProps) {
                   href={props.taskHref(task)}
                   onOpen={props.onOpen}
                   onMove={props.onMove}
+                  run={runOn(task, props.runs)}
+                  today={props.today}
                 />
               ))}
               {tasks.length === 0 && state === "idea" && props.empty}
@@ -110,3 +168,138 @@ export function Board(props: BoardProps) {
     </div>
   );
 }
+
+/** What the filter keeps of the board: a category or none, a goal or none, a person, one's own. */
+export function filterTasks(
+  tasks: readonly RestTask[],
+  filter: BoardFilter,
+  me?: RestPerson | undefined,
+): RestTask[] {
+  return tasks.filter((task) => {
+    if (filter.category !== undefined && (task.category?.key ?? "") !== filter.category) {
+      return false;
+    }
+    if (filter.goal !== undefined && (task.goalId ?? "") !== filter.goal) {
+      return false;
+    }
+    if (filter.person !== undefined && task.assignee?.id !== filter.person) {
+      return false;
+    }
+    if (filter.mine === true && (me === undefined || task.assignee?.id !== me.id)) {
+      return false;
+    }
+    return true;
+  });
+}
+
+export interface BoardFiltersProps {
+  readonly filter: BoardFilter;
+  readonly categories: readonly RestCategory[];
+  readonly goals: readonly RestGoal[];
+  readonly people: readonly RestPerson[];
+  /** Whoever is looking, for "mine". */
+  readonly me?: RestPerson | undefined;
+  /** How many tasks the filter keeps, of how many. */
+  readonly shown: number;
+  readonly total: number;
+  /** Called with the filter as it is to be: the composition shows the board at its address. */
+  readonly onChange: (filter: BoardFilter) => void;
+}
+
+/** The ways to narrow the board, each a change of its address (ADR-0010). */
+export function BoardFilters(props: BoardFiltersProps) {
+  const words = useWords().board.filters;
+  const { filter } = props;
+  const narrowed = Object.keys(filter).length > 0;
+  const goals = props.goals.filter((goal) => goal.state !== "dropped");
+  const change = (patch: BoardFilter, drop?: keyof BoardFilter) => {
+    const next: Record<string, unknown> = { ...filter, ...patch };
+    if (drop !== undefined) {
+      delete next[drop];
+    }
+    props.onChange(next as BoardFilter);
+  };
+  return (
+    <form
+      className="sc-filters"
+      aria-label={words.aria}
+      onSubmit={(event) => event.preventDefault()}
+    >
+      <label className="sc-field sc-field-inline">
+        <span className="sc-visually-hidden">{words.anyCategory}</span>
+        <select
+          className="sc-input"
+          value={filter.category ?? "*"}
+          onChange={(event) =>
+            event.target.value === "*"
+              ? change({}, "category")
+              : change({ category: event.target.value })
+          }
+        >
+          <option value="*">{words.anyCategory}</option>
+          <option value="">{words.noCategory}</option>
+          {props.categories.map((category) => (
+            <option key={category.key} value={category.key}>
+              {category.name}
+            </option>
+          ))}
+        </select>
+      </label>
+      {goals.length > 0 && (
+        <label className="sc-field sc-field-inline">
+          <span className="sc-visually-hidden">{words.anyGoal}</span>
+          <select
+            className="sc-input"
+            value={filter.goal ?? "*"}
+            onChange={(event) =>
+              event.target.value === "*" ? change({}, "goal") : change({ goal: event.target.value })
+            }
+          >
+            <option value="*">{words.anyGoal}</option>
+            <option value="">{words.noGoal}</option>
+            {goals.map((goal) => (
+              <option key={goal.id} value={goal.id}>
+                {goal.title}
+              </option>
+            ))}
+          </select>
+        </label>
+      )}
+      <label className="sc-field sc-field-inline">
+        <span className="sc-visually-hidden">{words.everyone}</span>
+        <select
+          className="sc-input"
+          value={filter.mine === true ? "mine" : (filter.person ?? "*")}
+          onChange={(event) => {
+            const value = event.target.value;
+            if (value === "*") {
+              change({ mine: undefined, person: undefined });
+              return;
+            }
+            if (value === "mine") {
+              change({ mine: true, person: undefined });
+              return;
+            }
+            change({ person: value, mine: undefined });
+          }}
+        >
+          <option value="*">{words.everyone}</option>
+          {props.me !== undefined && <option value="mine">{words.mine}</option>}
+          {props.people
+            .filter((person) => person.id !== props.me?.id)
+            .map((person) => (
+              <option key={person.id} value={person.id}>
+                {person.login}
+              </option>
+            ))}
+        </select>
+      </label>
+      <span className="sc-filters-count sc-muted">{words.showing(props.shown, props.total)}</span>
+      {narrowed && (
+        <Button variant="ghost" size="sm" onClick={() => props.onChange({})}>
+          {words.clear}
+        </Button>
+      )}
+    </form>
+  );
+}

package/src/components/calendar.tsx

@@ -0,0 +1,255 @@
+import { OPEN_TASK_STATES, type RestPerson, type RestTask } from "../api.js";
+import {
+  addMonths,
+  daysBetween,
+  firstDayOfWeek,
+  formatMonth,
+  formatWeekday,
+  monthGrid,
+  monthOf,
+  today as todayOf,
+  weekdays,
+} from "../dates.js";
+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).
+
+const isOpen = (task: RestTask): boolean => OPEN_TASK_STATES.includes(task.state);
+
+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;
+  readonly taskHref: (task: RestTask) => string;
+  /** Where the calendar is on another month. */
+  readonly monthHref: (month: string) => string;
+}
+
+function push(map: Map<string, RestTask[]>, day: string, task: RestTask): void {
+  const list = map.get(day);
+  if (list === undefined) {
+    map.set(day, [task]);
+  } else {
+    list.push(task);
+  }
+}
+
+export function Calendar(props: CalendarProps) {
+  const words = useWords().calendar;
+  const { tag } = useLanguage();
+  const now = props.today ?? todayOf();
+  const firstDay = firstDayOfWeek(tag);
+  const weeks = monthGrid(props.month, firstDay);
+  const due = new Map<string, RestTask[]>();
+  const starting = new Map<string, RestTask[]>();
+  for (const task of props.tasks) {
+    if (task.dueOn !== null) {
+      push(due, task.dueOn, task);
+    }
+    if (task.startsOn !== null && task.startsOn !== task.dueOn) {
+      push(starting, task.startsOn, task);
+    }
+  }
+  // Within a day, what is still open comes first; the rest reads as what was.
+  for (const list of due.values()) {
+    list.sort((a, b) => Number(isOpen(b)) - Number(isOpen(a)) || a.number - b.number);
+  }
+  const inMonth = (day: string) => monthOf(day) === props.month;
+  const nothing =
+    [...due.keys()].every((day) => !inMonth(day)) &&
+    [...starting.keys()].every((day) => !inMonth(day));
+  return (
+    <div className="sc-calendar">
+      <div className="sc-calendar-head">
+        <h2 className="sc-calendar-month">{formatMonth(props.month, tag)}</h2>
+        <nav className="sc-calendar-nav" aria-label={words.grid}>
+          <a
+            className="sc-button sc-button-ghost sc-button-sm"
+            href={props.monthHref(addMonths(props.month, -1))}
+            aria-label={words.previous}
+          >
+            {"<"}
+          </a>
+          <a
+            className="sc-button sc-button-ghost sc-button-sm"
+            href={props.monthHref(monthOf(now))}
+          >
+            {words.thisMonth}
+          </a>
+          <a
+            className="sc-button sc-button-ghost sc-button-sm"
+            href={props.monthHref(addMonths(props.month, 1))}
+            aria-label={words.next}
+          >
+            {">"}
+          </a>
+        </nav>
+      </div>
+      <table className="sc-calendar-grid" aria-label={words.grid}>
+        <thead>
+          <tr>
+            {weekdays(firstDay).map((weekday) => (
+              <th key={weekday} scope="col">
+                {formatWeekday(weekday, tag)}
+              </th>
+            ))}
+          </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>
+          ))}
+        </tbody>
+      </table>
+      {nothing && <p className="sc-muted">{words.nothingDue}</p>}
+    </div>
+  );
+}
+
+/** One person's share of the open work, as the table of who has what says it. */
+export interface WorkloadRow {
+  /** The person, or nobody for the tasks assigned to no one. */
+  readonly person: RestPerson | undefined;
+  readonly open: number;
+  readonly inProgress: number;
+  /** Open, and due within the next seven days from today. */
+  readonly dueSoon: number;
+  /** Open, and past its day. */
+  readonly overdue: number;
+}
+
+/** Who has what, from the open tasks: by login, with the unassigned last. */
+export function workloadOf(tasks: readonly RestTask[], today: string): WorkloadRow[] {
+  const rows = new Map<string, { person: RestPerson | undefined; tasks: RestTask[] }>();
+  for (const task of tasks.filter(isOpen)) {
+    const key = task.assignee?.id ?? "";
+    const row = rows.get(key);
+    if (row === undefined) {
+      rows.set(key, { person: task.assignee ?? undefined, tasks: [task] });
+    } else {
+      row.tasks.push(task);
+    }
+  }
+  const count = (list: readonly RestTask[]): Omit<WorkloadRow, "person"> => ({
+    open: list.length,
+    inProgress: list.filter((task) => task.state === "in_progress" || task.state === "in_review")
+      .length,
+    dueSoon: list.filter((task) => {
+      if (task.dueOn === null) {
+        return false;
+      }
+      const days = daysBetween(today, task.dueOn);
+      return days >= 0 && days <= 7;
+    }).length,
+    overdue: list.filter((task) => task.dueOn !== null && task.dueOn < today).length,
+  });
+  return [...rows.values()]
+    .map((row) => ({ person: row.person, ...count(row.tasks) }))
+    .sort((a, b) => {
+      if (a.person === undefined) {
+        return 1;
+      }
+      if (b.person === undefined) {
+        return -1;
+      }
+      return a.person.login.localeCompare(b.person.login);
+    });
+}
+
+export interface WorkloadProps {
+  readonly tasks: readonly RestTask[];
+  readonly today?: string | undefined;
+  /** Where the board is, narrowed to one person's tasks, or to the unassigned. */
+  readonly personHref?: ((person: RestPerson | undefined) => string) | undefined;
+}
+
+/** Who has what: a row per person, and what of theirs is late or due soon. */
+export function Workload(props: WorkloadProps) {
+  const words = useWords().calendar.workload;
+  const rows = workloadOf(props.tasks, props.today ?? todayOf());
+  if (rows.length === 0) {
+    return null;
+  }
+  return (
+    <table className="sc-workload" aria-label={words.title}>
+      <thead>
+        <tr>
+          <th scope="col">{words.person}</th>
+          <th scope="col">{words.open}</th>
+          <th scope="col">{words.inProgress}</th>
+          <th scope="col">{words.dueSoon}</th>
+          <th scope="col">{words.overdue}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => {
+          const href = props.personHref?.(row.person);
+          const who =
+            row.person === undefined ? (
+              <span className="sc-muted">{words.unassigned}</span>
+            ) : (
+              <PersonChip person={row.person} />
+            );
+          return (
+            <tr key={row.person?.id ?? ""}>
+              <th scope="row">{href === undefined ? who : <a href={href}>{who}</a>}</th>
+              <td>{row.open}</td>
+              <td>{row.inProgress}</td>
+              <td className={cx(row.dueSoon > 0 && "sc-workload-soon")}>{row.dueSoon}</td>
+              <td className={cx(row.overdue > 0 && "sc-workload-late")}>{row.overdue}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}