@skillcdn/console 0.1.11 → 0.1.13

package/src/cli/cli.ts

@@ -9,10 +9,18 @@ import {
 } from "../client.js";
 import { addDays, dayOf as dayOfDate, isDay } from "../dates.js";
 import { DEFAULT_PAGE_LIMIT, LIST_LIMIT, MAX_OPTIONS, MIN_OPTIONS } from "../limits.js";
-import type { RestClaim, RestDecision, RestTaskPatch } from "../schemas.js";
+import type { RestClaim, RestDecision, RestPerson, RestTaskPatch } from "../schemas.js";
 import {
+  COLOR_NAMES,
+  type ColorName,
   GOAL_STATES,
   type GoalState,
+  PERSON_ROLES,
+  type PersonRole,
+  PROJECT_ROLES,
+  PROJECT_VISIBILITIES,
+  type ProjectRole,
+  type ProjectVisibility,
   TASK_PRIORITIES,
   TASK_STATES,
   type TaskPriority,
@@ -30,8 +38,11 @@ import {
   formatDocuments,
   formatGoal,
   formatGoalLine,
+  formatMemberLine,
   formatMore,
   formatOptions,
+  formatPersonLine,
+  formatProject,
   formatProjectLine,
   formatRun,
   formatRunLine,
@@ -331,16 +342,41 @@ async function personIdOf(
     }
     return me.person.id;
   }
+  return (await personOf(session, value)).id;
+}
+
+/** The person a login names, among the workspace's; the logins are as people sign in. */
+async function personOf(session: Session, login: string): Promise<RestPerson> {
   const { items } = await session.client.people();
-  const found = items.find((person) => person.login.toLowerCase() === value.toLowerCase());
+  const found = items.find((person) => person.login.toLowerCase() === login.toLowerCase());
   if (found === undefined) {
     throw misuse(
-      `Nobody of the workspace is called ${value}. console people is not a command; the logins are as people sign in.`,
+      `Nobody of the workspace is called ${login}. console people lists everyone, by login.`,
     );
   }
-  return found.id;
+  return found;
+}
+
+/** One word of a vocabulary, or the refusal to understand. */
+function wordOf<T extends string>(value: string, words: readonly T[], what: string): T {
+  const found = words.find((word) => word === value);
+  if (found === undefined) {
+    throw misuse(`Not ${what}: ${value}. One of ${words.join(", ")}`);
+  }
+  return found;
 }
 
+const personRoleOf = (value: string): PersonRole =>
+  wordOf(value, PERSON_ROLES, "a role in the workspace");
+const projectRoleOf = (value: string): ProjectRole =>
+  wordOf(value, PROJECT_ROLES, "a role in a project");
+const visibilityOf = (value: string): ProjectVisibility =>
+  wordOf(value, PROJECT_VISIBILITIES, "a visibility");
+const colorOf = (value: string): ColorName => wordOf(value, COLOR_NAMES, "a colour");
+/** A colour, or `none` for the one the pages choose, which is `null` on the wire. */
+const colorOrNoneOf = (value: string | undefined): ColorName | null | undefined =>
+  value === undefined ? undefined : value === "none" ? null : colorOf(value);
+
 function secondsOf(value: string | undefined, fallback: number): number {
   if (value === undefined) {
     return fallback;
@@ -381,6 +417,15 @@ function theOne(positionals: readonly string[], ask: string): string {
   return first;
 }
 
+/** Exactly two words, for a command on a thing and a value. */
+function theTwo(positionals: readonly string[], ask: string): readonly [string, string] {
+  const [first, second] = positionals;
+  if (first === undefined || second === undefined || positionals.length > 2) {
+    throw misuse(ask);
+  }
+  return [first, second];
+}
+
 /**
  * The decision once answered, or as it stands when the wait is over. Each request asks the
  * console to hold it for a while, so the answer arrives as soon as a person gives it.
@@ -535,7 +580,7 @@ const projects: Command = async (args, io) => {
   const found = await session.client.projects();
   answer(io, session, found, () =>
     found.items.length === 0
-      ? "No projects you may work in. A person makes one on the console's Projects page."
+      ? 'No projects you may work in. Make one: console project new <key> "<name>"'
       : found.items.map(formatProjectLine).join("\n"),
   );
   return EXIT.ok;
@@ -1349,6 +1394,263 @@ const serve: Command = async (args, io) => {
   return EXIT.ok;
 };
 
+// Configuring, as the person (ADR-0021): what an administrator or an owner does on the pages,
+// their agent does here, attributed to them as the agent. The console decides on every request
+// with the same roles; what the person may not, the agent may not (auth.forbidden). The tokens
+// themselves have no command, by design.
+
+const people: Command = async (args, io) => {
+  const { values } = parse(args, {}, false);
+  const session = await open(io, values);
+  const found = await session.client.people();
+  answer(io, session, found, () => found.items.map(formatPersonLine).join("\n"));
+  return EXIT.ok;
+};
+
+const person: Command = async (args, io) => {
+  if (args[0] !== "role") {
+    throw misuse("Say what to do: console person role <login> <admin|member>");
+  }
+  const { values, positionals } = parse(args.slice(1), {});
+  const [login, role] = theTwo(
+    positionals,
+    "Say whom and what: console person role <login> <admin|member>",
+  );
+  const wanted = personRoleOf(role);
+  const session = await open(io, values);
+  const found = await personOf(session, login);
+  const changed = await session.client.updatePerson(found.id, { role: wanted });
+  answer(io, session, changed, () => formatPersonLine(changed));
+  return EXIT.ok;
+};
+
+/** The flags that set what a project is, shared by making one and changing one. */
+const PROJECT_FIELDS: OptionSpec = {
+  description: { type: "string" },
+  file: { type: "string" },
+  visibility: { type: "string" },
+  skills: { type: "string" },
+  color: { type: "string" },
+  symbol: { type: "string" },
+};
+
+/** What the flags say of a project; `none` clears what may be cleared. */
+async function projectFieldsOf(io: CliIo, values: Values) {
+  const description = await bodyOf(io, values, text(values, "description"));
+  const visibility = text(values, "visibility");
+  const skills = orNone(text(values, "skills"));
+  const color = colorOrNoneOf(text(values, "color"));
+  const symbol = orNone(text(values, "symbol"));
+  return {
+    ...(description === undefined
+      ? {}
+      : { description: description === "none" ? "" : description }),
+    ...(visibility === undefined ? {} : { visibility: visibilityOf(visibility) }),
+    ...(skills === undefined ? {} : { skillsAddress: skills }),
+    ...(color === undefined ? {} : { color }),
+    ...(symbol === undefined ? {} : { symbol }),
+  };
+}
+
+const newProject: Command = async (args, io) => {
+  const { values, positionals } = parse(args, PROJECT_FIELDS);
+  const [key, name] = theTwo(
+    positionals,
+    'Say the key and the name: console project new <key> "<name>" [--visibility workspace|private]',
+  );
+  const fields = await projectFieldsOf(io, values);
+  const session = await open(io, values);
+  const made = await session.client.createProject({ key, name, ...fields });
+  answer(
+    io,
+    session,
+    made,
+    () =>
+      `Project made: ${made.name} (${made.key}), with you as its owner.\nTo work in it from this directory: console use ${made.key}`,
+  );
+  return EXIT.ok;
+};
+
+const editProject: Command = async (args, io) => {
+  const { values, positionals } = parse(args, { ...PROJECT_FIELDS, name: { type: "string" } });
+  const key = theOne(
+    positionals,
+    "Say which project: console project edit <key> --name <name> ...",
+  );
+  const name = text(values, "name");
+  const patch = { ...(name === undefined ? {} : { name }), ...(await projectFieldsOf(io, values)) };
+  if (Object.keys(patch).length === 0) {
+    throw misuse(
+      "Say what to change: --name, --description, --visibility, --skills, --color or --symbol; none clears the description, the skills address, the colour or the symbol.",
+    );
+  }
+  const session = await open(io, values);
+  const changed = await session.client.project(key).update(patch);
+  answer(io, session, changed, () => formatProject(changed));
+  return EXIT.ok;
+};
+
+const projectIcon: Command = async (args, io) => {
+  const { values, positionals } = parse(args, { remove: { type: "boolean" } });
+  const [key, file] = positionals;
+  const removing = on(values, "remove");
+  if (key === undefined || positionals.length > 2 || (file === undefined) !== removing) {
+    throw misuse(
+      "Say which project and which image: console project icon <key> <file>, or console project icon <key> --remove",
+    );
+  }
+  const session = await open(io, values);
+  const project = session.client.project(key);
+  const changed =
+    file === undefined
+      ? await project.removeIcon()
+      : await project.setIcon({
+          name: basename(file),
+          bytes: await io.readBytes(file),
+          contentType: CONTENT_TYPES[extname(file).toLowerCase()] ?? "application/octet-stream",
+        });
+  answer(io, session, changed, () => formatProject(changed));
+  return EXIT.ok;
+};
+
+const project: Command = async (args, io) => {
+  if (args[0] === "new") {
+    return newProject(args.slice(1), io);
+  }
+  if (args[0] === "edit") {
+    return editProject(args.slice(1), io);
+  }
+  if (args[0] === "icon") {
+    return projectIcon(args.slice(1), io);
+  }
+  const { values, positionals } = parse(args, {});
+  const key = theOne(
+    positionals,
+    "Say which project: console project <key>; or console project new, edit or icon",
+  );
+  const session = await open(io, values);
+  const found = await session.client.project(key).get();
+  answer(io, session, found, () => formatProject(found));
+  return EXIT.ok;
+};
+
+const members: Command = async (args, io) => {
+  const { values } = parse(args, {}, false);
+  const session = await open(io, values);
+  const project = await session.project();
+  const found = await project.members();
+  answer(io, session, found, () =>
+    found.items.length === 0
+      ? "Nobody is listed in the project."
+      : found.items.map(formatMemberLine).join("\n"),
+  );
+  return EXIT.ok;
+};
+
+const member: Command = async (args, io) => {
+  const [verb, ...rest] = args;
+  if (verb === "add") {
+    const { values, positionals } = parse(rest, { role: { type: "string" } });
+    const login = theOne(positionals, "Say whom: console member add <login> [--role owner|member]");
+    const role = text(values, "role");
+    const session = await open(io, values);
+    const project = await session.project();
+    const added = await project.addMember({
+      personId: (await personOf(session, login)).id,
+      ...(role === undefined ? {} : { role: projectRoleOf(role) }),
+    });
+    answer(io, session, added, () => formatMemberLine(added));
+    return EXIT.ok;
+  }
+  if (verb === "role") {
+    const { values, positionals } = parse(rest, {});
+    const [login, role] = theTwo(
+      positionals,
+      "Say whom and what: console member role <login> <owner|member>",
+    );
+    const wanted = projectRoleOf(role);
+    const session = await open(io, values);
+    const project = await session.project();
+    const changed = await project.updateMember((await personOf(session, login)).id, {
+      role: wanted,
+    });
+    answer(io, session, changed, () => formatMemberLine(changed));
+    return EXIT.ok;
+  }
+  if (verb === "remove") {
+    const { values, positionals } = parse(rest, {});
+    const login = theOne(positionals, "Say whom: console member remove <login>");
+    const session = await open(io, values);
+    const project = await session.project();
+    const found = await personOf(session, login);
+    await project.removeMember(found.id);
+    answer(
+      io,
+      session,
+      { removed: found.login },
+      () => `${found.login} is no longer listed in the project.`,
+    );
+    return EXIT.ok;
+  }
+  throw misuse(
+    "Say what to do: console member add <login> [--role owner|member], console member role <login> <owner|member>, or console member remove <login>",
+  );
+};
+
+const category: Command = async (args, io) => {
+  const [verb, ...rest] = args;
+  if (verb === "new") {
+    const { values, positionals } = parse(rest, { color: { type: "string" } });
+    const [key, name] = theTwo(
+      positionals,
+      'Say the key and the name: console category new <key> "<name>" [--color <name>]',
+    );
+    const color = text(values, "color");
+    const session = await open(io, values);
+    const made = await session.client.createCategory({
+      key,
+      name,
+      ...(color === undefined ? {} : { color: colorOf(color) }),
+    });
+    answer(io, session, made, () => formatCategoryLine(made));
+    return EXIT.ok;
+  }
+  if (verb === "edit") {
+    const { values, positionals } = parse(rest, {
+      name: { type: "string" },
+      color: { type: "string" },
+    });
+    const key = theOne(
+      positionals,
+      "Say which category: console category edit <key> [--name <name>] [--color <name>]",
+    );
+    const name = text(values, "name");
+    const color = text(values, "color");
+    const patch = {
+      ...(name === undefined ? {} : { name }),
+      ...(color === undefined ? {} : { color: colorOf(color) }),
+    };
+    if (Object.keys(patch).length === 0) {
+      throw misuse("Say what to change: --name or --color.");
+    }
+    const session = await open(io, values);
+    const changed = await session.client.updateCategory(key, patch);
+    answer(io, session, changed, () => formatCategoryLine(changed));
+    return EXIT.ok;
+  }
+  if (verb === "remove") {
+    const { values, positionals } = parse(rest, {});
+    const key = theOne(positionals, "Say which category: console category remove <key>");
+    const session = await open(io, values);
+    await session.client.removeCategory(key);
+    answer(io, session, { removed: key }, () => `Category ${key} removed.`);
+    return EXIT.ok;
+  }
+  throw misuse(
+    'Say what to do: console category new <key> "<name>" [--color <name>], console category edit <key> [--name <name>] [--color <name>], or console category remove <key>',
+  );
+};
+
 const COMMANDS: Readonly<Record<string, Command>> = {
   login,
   logout,
@@ -1363,6 +1665,12 @@ const COMMANDS: Readonly<Record<string, Command>> = {
   goal,
   categories,
   skills,
+  people,
+  person,
+  project,
+  members,
+  member,
+  category,
   take,
   report,
   "hand-in": handIn,
@@ -1416,6 +1724,26 @@ function hintFor(error: ApiError): string {
       return "The due day is before the start. Say a due day on or after it.\n";
     case "goal.not_found":
       return "No goal of this project has that id. console goals lists them.\n";
+    case "auth.forbidden":
+      return "What was asked is an administrator's, or an owner's of the project, and the person this token acts as is not one here. Hand the step to them.\n";
+    case "project.key_taken":
+      return "A project has that key already. console projects lists them.\n";
+    case "project.invalid_address":
+      return "The skills address is not one as SkillCDN spells it; none makes the organization's skills the project's.\n";
+    case "project.invalid_icon":
+      return "The image must be a PNG, a JPEG, a GIF or a WebP, known by its bytes.\n";
+    case "member.exists":
+      return "The person is listed already. console member role <login> <owner|member> changes what they are.\n";
+    case "member.not_found":
+      return "The person is not listed in the project. console members lists those who are.\n";
+    case "category.key_taken":
+      return "A category has that key already. console categories lists them.\n";
+    case "category.not_found":
+      return "No category has that key. console categories lists them.\n";
+    case "category.in_use":
+      return "Tasks are sorted into the category. Move them out first: console task edit <number> --category <other|none>\n";
+    case "person.last_admin":
+      return "The board keeps at least one administrator. Make another one first.\n";
     case "connect.too_many":
       return "The console holds as many connections as it may at once. Try again in a few minutes.\n";
     case "network":

package/src/cli/format.ts

@@ -6,6 +6,8 @@ import type {
   RestDocumentSummary,
   RestDocuments,
   RestGoal,
+  RestMember,
+  RestPerson,
   RestProject,
   RestRun,
   RestSkills,
@@ -42,6 +44,31 @@ export function formatProjectLine(project: RestProject): string {
   return `${project.key}  ${project.name}  (${notes.join("; ")})`;
 }
 
+/** One project in full: what it is, how it is marked, and what the person is in it. */
+export function formatProject(project: RestProject): string {
+  const lines = [
+    `project ${project.key}: ${project.name}`,
+    `visibility: ${project.visibility}  role: ${project.role}  skills: ${project.skillsAddress ?? "the organization's"}`,
+    `color: ${project.color ?? "none"}  symbol: ${project.symbol ?? "none"}  image: ${project.icon === null ? "none" : project.icon.contentType}`,
+  ];
+  if (project.description.trim().length > 0) {
+    lines.push("", project.description.trimEnd());
+  }
+  return lines.join("\n");
+}
+
+/** One person: their login, their name where the host gives one, and what they are in the workspace. */
+export function formatPersonLine(person: RestPerson): string {
+  return person.name === null
+    ? `${person.login}  (${person.role})`
+    : `${person.login}  ${person.name}  (${person.role})`;
+}
+
+/** One member of a project: their login, what they are in it, and since when. */
+export function formatMemberLine(member: RestMember): string {
+  return `${member.person.login}  ${member.role}  (since ${member.addedAt.slice(0, 10)})`;
+}
+
 /** 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}` : "";

package/src/cli/help.ts

@@ -3,6 +3,9 @@ import {
   MAX_AGENT_LENGTH,
   MAX_ARTIFACTS_PER_RUN,
   MAX_BODY_LENGTH,
+  MAX_CATEGORIES,
+  MAX_CATEGORY_KEY_LENGTH,
+  MAX_CATEGORY_NAME_LENGTH,
   MAX_DOCUMENT_LENGTH,
   MAX_DOCUMENT_PATH_LENGTH,
   MAX_FILE_BYTES,
@@ -10,6 +13,11 @@ import {
   MAX_LINK_LABEL_LENGTH,
   MAX_OPTION_LABEL_LENGTH,
   MAX_OPTIONS,
+  MAX_PROJECT_DESCRIPTION_LENGTH,
+  MAX_PROJECT_ICON_BYTES,
+  MAX_PROJECT_KEY_LENGTH,
+  MAX_PROJECT_NAME_LENGTH,
+  MAX_PROJECT_SYMBOL_LENGTH,
   MAX_QUESTION_LENGTH,
   MAX_REPORTS_PER_RUN,
   MAX_SUMMARY_LENGTH,
@@ -17,6 +25,7 @@ import {
   MAX_VERSIONS_PER_DOCUMENT,
   MIN_OPTIONS,
 } from "../limits.js";
+import { COLOR_NAMES } from "../vocabulary.js";
 
 // What the command says about itself: for an agent that meets it for the first time, and for a
 // person. One table for every command, from which the usage and each command's help are made:
@@ -53,6 +62,8 @@ const DOCUMENT_PATH = `a path of lowercase letters, digits and hyphens, with sla
 const DOCUMENT_REFUSALS = ["document.not_found: no page has that path in this project"];
 
 const DAY = "a day as 2026-10-24, today, tomorrow, or +7 for seven days from today";
+const COLORS = `one of ${COLOR_NAMES.join(", ")}`;
+const KEY = "lowercase letters, digits and hyphens";
 const TASK_FIELD_FLAGS =
   "[--state <state>] [--priority <priority>] [--category <key>] [--goal <id>] [--starts <day>] [--due <day>] [--assignee <login|me>] [--parent <number|id>]";
 const TASK_FIELD_LIMITS = [
@@ -143,7 +154,76 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
   categories: {
     usage: "categories",
     about:
-      "The categories tasks are sorted into, the same in every project: each with its key, which --category takes, its name and its colour. An administrator keeps them on the console's Categories page.",
+      "The categories tasks are sorted into, the same in every project: each with its key, which --category takes, its name and its colour. An administrator keeps them: console category, or the Categories page.",
+  },
+  people: {
+    usage: "people",
+    about:
+      "Everyone of the workspace, by login, with their name where the host gives one and what they are in it: admin, who configures the workspace, or member, who works in the projects they are in. The logins are what --assignee, member and person role take.",
+  },
+  person: {
+    usage: "person role <login> <admin|member>",
+    about:
+      "Says what a person is in the workspace, for an administrator: the person themselves on the People page, or their agent here, named on it. The board keeps at least one administrator.",
+    refusals: [
+      "auth.forbidden: only an administrator says what a person is",
+      "person.last_admin: the board keeps at least one administrator; make another one first",
+    ],
+  },
+  project: {
+    usage:
+      'project <key>  |  project new <key> "<name>" [--description <markdown>|--file <path>] [--visibility workspace|private] [--skills <address>|none] [--color <name>] [--symbol <text>]  |  project edit <key> [--name "<name>"] [the same flags; none clears]  |  project icon <key> <file>  |  project icon <key> --remove',
+    about:
+      "One project in full; or a project made, with you as its owner, private unless --visibility workspace says everyone of the workspace works in it; or one changed, only in what the flags say, for an owner; or its image for its mark, set from a file of this machine or taken away. The organization's skills are the project's unless --skills names an address of its own.",
+    limits: [
+      `key: ${KEY}, up to ${MAX_PROJECT_KEY_LENGTH} characters; it does not change once made`,
+      `name: one line, up to ${MAX_PROJECT_NAME_LENGTH} characters; description: up to ${MAX_PROJECT_DESCRIPTION_LENGTH}`,
+      `color: ${COLORS}; symbol: up to ${MAX_PROJECT_SYMBOL_LENGTH} characters without spaces, shown on the colour; left out, the pages choose both from the key and the name`,
+      `image: a PNG, a JPEG, a GIF or a WebP of at most ${MAX_PROJECT_ICON_BYTES} bytes`,
+    ],
+    refusals: [
+      "project.not_found: no project has that key, or it is not yours to see",
+      "auth.forbidden: only an owner of the project changes it",
+      "project.key_taken: a project has that key already",
+      "project.invalid_address: the skills address is not one as SkillCDN spells it",
+      "project.invalid_icon: the file is not an image of those kinds, by its bytes",
+      "request.too_large: the image is over the limit",
+    ],
+  },
+  members: {
+    usage: "members",
+    about:
+      "Those listed in the project, by login, with what each is in it (owner, who configures it; member, who works on it) and since when. A project open to the workspace has everyone of it as a member besides, and an administrator owns every project.",
+  },
+  member: {
+    usage:
+      "member add <login> [--role owner|member]  |  member role <login> <owner|member>  |  member remove <login>",
+    about:
+      "Lists a person of the workspace in the project, as a member unless --role says owner; changes what they are in it; or takes them off the list. For an owner of the project.",
+    refusals: [
+      "auth.forbidden: only an owner of the project lists its members",
+      "member.invalid_person: the person is not of the workspace",
+      "member.exists: the person is listed already; member role changes what they are",
+      "member.not_found: the person is not listed in the project",
+    ],
+  },
+  category: {
+    usage:
+      'category new <key> "<name>" [--color <name>]  |  category edit <key> [--name "<name>"] [--color <name>]  |  category remove <key>',
+    about:
+      "Makes a category tasks are sorted into, the same in every project; changes its name or its colour; or removes one no task is sorted into. For an administrator.",
+    limits: [
+      `key: ${KEY}, up to ${MAX_CATEGORY_KEY_LENGTH} characters; it does not change once made`,
+      `name: one line, up to ${MAX_CATEGORY_NAME_LENGTH} characters; color: ${COLORS}, gray when left out`,
+      `at most ${MAX_CATEGORIES} categories in the workspace`,
+    ],
+    refusals: [
+      "auth.forbidden: only an administrator keeps the categories",
+      "category.key_taken: a category has that key already",
+      "category.not_found: no category has that key",
+      "category.in_use: tasks are sorted into it; move them out first (console task edit <number> --category <other|none>)",
+      "category.too_many: the workspace holds as many categories as one may",
+    ],
   },
   skills: {
     usage: "skills",
@@ -352,6 +432,11 @@ const SECTIONS: readonly { readonly title: string; readonly commands: readonly s
     title: "The documents: the project's pages of Markdown, in folders, by path",
     commands: ["docs", "doc", "write", "attach", "archive", "restore"],
   },
+  {
+    title:
+      "Configuring, as the person: what an administrator or an owner does on the pages, their agent does here, named on it",
+    commands: ["people", "person", "project", "members", "member", "category"],
+  },
 ];
 
 /** The whole usage, as `console help` prints it, naming the version when it is known. */

package/src/components/board.tsx

@@ -9,7 +9,16 @@ import {
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import type { BoardFilter } from "../router.js";
-import { Avatar, Badge, Button, CategoryBadge, cx, DueBadge, PriorityBadge } from "./ui.js";
+import {
+  Avatar,
+  Badge,
+  Button,
+  CategoryBadge,
+  cx,
+  DueBadge,
+  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
@@ -256,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

@@ -12,7 +12,7 @@ import {
   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. 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
@@ -313,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/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}

package/src/components/projects.tsx

@@ -23,7 +23,7 @@ import {
   type RestProjectPatch,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Badge, Button, cx, PersonChip, Time } from "./ui.js";
+import { Badge, Button, cx, PersonChip, personName, Time } from "./ui.js";
 
 /** A project's mark: its symbol on its colour, so that projects tell apart at a glance. */
 export function ProjectMark(props: {
@@ -392,7 +392,9 @@ export function MemberList(props: MemberListProps) {
                 <ProjectRoleBadge role={member.role} />
               ) : (
                 <label className="sc-field sc-field-inline">
-                  <span className="sc-visually-hidden">{members.roleOf(member.person.login)}</span>
+                  <span className="sc-visually-hidden">
+                    {members.roleOf(personName(member.person))}
+                  </span>
                   <select
                     className="sc-input"
                     value={member.role}
@@ -446,7 +448,7 @@ export function MemberList(props: MemberListProps) {
                 <option value="">{members.chooseSomeone}</option>
                 {candidates.map((person) => (
                   <option key={person.id} value={person.id}>
-                    {person.login}
+                    {personName(person)}
                   </option>
                 ))}
               </select>