@skillcdn/console 0.3.0 → 0.3.1

package/src/cli/help.ts

@@ -136,9 +136,10 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
   },
   use: {
     usage: "use <key> [--url <origin>] [--account <login>]",
-    synopsis: "Binds this directory to a project: writes .skillcdn-console.json here.",
+    synopsis:
+      "Binds this directory to a project: writes .skillcdn-console.json here, and prints the sentence for the checkout's agreement.",
     about:
-      "Says which project this directory works in: writes .skillcdn-console.json here, which the commands read from this directory or one above it, and which is meant to be committed in a private repository and left out of a public one. The file names the project; and the console, where that is not the default login here or --url says so; and the account, where the console has several logins or --account says so. Never a token. --project <key> on any command, or CONSOLE_PROJECT in the environment, wins over the project it names.",
+      "Says which project this directory works in: writes .skillcdn-console.json here, which the commands read from this directory or one above it, and which is meant to be committed in a private repository and left out of a public one. The file names the project; and the console, where that is not the default login here or --url says so; and the account, where the console has several logins or --account says so. Never a token. --project <key> on any command, or CONSOLE_PROJECT in the environment, wins over the project it names. Then prints the sentence for the checkout's agreement (AGENTS.md, or CLAUDE.md where that is the file agents read), to be copied as it is, since nothing sends an agent to the console until the checkout says so.",
     refusals: ["project.not_found: no project has the key, or it is not yours to see"],
   },
   work: {
@@ -203,9 +204,26 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
   },
   people: {
     usage: "people",
-    synopsis: "Everyone of the workspace, by login, with what each is in it.",
+    synopsis: "The people you see, by login, with what each is in the workspace.",
     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; a person taken out is marked deactivated. Then the logins an administrator let in that nobody has signed in with yet. The logins are what --assignee, member and person take.",
+      "The people of the workspace you see, 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; a person taken out is marked deactivated. Everyone, unless the workspace shows a member only the people they share a project with (console workspace says which; an administrator sees everyone). Then, where you see everyone, the logins an administrator let in that nobody has signed in with yet. The logins are what --assignee, member and person take; a login is found exactly, so an owner lists someone the list does not show.",
+  },
+  workspace: {
+    usage:
+      "workspace  |  workspace edit [--people-visibility <everyone|shared-projects>] [--week-start <auto|monday|sunday>] [--time-zone <zone|none>]  |  workspace pack-token --connect  |  workspace pack-token --stdin  |  workspace pack-token --remove",
+    overview:
+      "workspace  |  workspace edit [flags]  |  workspace pack-token --connect|--stdin|--remove",
+    synopsis:
+      "The workspace's settings; or some changed, or its SkillCDN token set, for an administrator.",
+    about:
+      "What the workspace is called; who sees whom on the People page and in the pickers (everyone; or shared-projects: a member sees only the people they share a project with, an administrator everyone; a project open to the workspace has everyone in it, so a member of one sees everyone); the day the calendars begin a week on (auto: the system default, as each device has it); the workspace's time zone, an IANA name such as Asia/Seoul, in which this command prints moments as ISO 8601 with its offset, as the login kept it at login or whoami, or none, which leaves them as the API gives them, in UTC; where the organization's skills come from; and the most days a token may last. edit changes any of the first three, for an administrator; --json leaves moments as the API gives them. pack-token is the SkillCDN token the organization's pack is read with, by every project that names no address of its own and holds no token of its own (ADR-0036), for an administrator: with --connect, the console asks SkillCDN for a code, this command prints the page and the code, a person who may open the repository approves there, signed in at SkillCDN, and the console receives the token, shown to nobody; with --stdin, a token made by hand at SkillCDN is read from standard input and never an argument; --remove takes the token away.",
+    refusals: [
+      "auth.forbidden: only an administrator changes the workspace's settings or its token",
+      "request.invalid: the time zone is not a name the console knows",
+      "workspace.pack_token_refused: SkillCDN does not serve the organization's pack to the token, or the console names no address for the organization's skills",
+      "workspace.pack_connect_refused: the console names no address for the organization's skills, the pack is on the console's machine, or SkillCDN refused to begin",
+      "workspace.pack_token_unsupported, workspace.pack_connect_unsupported: the console keeps no secret to seal a token with (AUTH_SECRET), or reaches no deployment",
+    ],
   },
   person: {
     usage:
@@ -224,12 +242,13 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
   },
   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  |  project pack-token <key> --stdin  |  project pack-token <key> --remove',
+      '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  |  project pack-token <key> --connect  |  project pack-token <key> --stdin  |  project pack-token <key> --remove',
     overview:
-      "project <key>  |  project new <key> <name> [flags]  |  project edit <key> [flags]  |  project icon <key> <file>|--remove  |  project pack-token <key> --stdin|--remove",
-    synopsis: "One project in full; or a project made, changed, given its mark or its pack token.",
+      "project <key>  |  project new <key> <name> [flags]  |  project edit <key> [flags]  |  project icon <key> <file>|--remove  |  project pack-token <key> --connect|--stdin|--remove",
+    synopsis:
+      "One project in full; or a project made, changed, given its mark or its SkillCDN token.",
     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; or its pack token (ADR-0028), the token a person made at SkillCDN for a private pack, read from standard input and never an argument, which the console keeps sealed to read the pack with, or taken away. The organization's skills are the project's unless --skills names an address of its own.",
+      "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; or its SkillCDN token (pack-token, ADR-0028), which the console keeps sealed to read a private pack with, and which a project that reads the organization's pack may leave to the workspace's (console workspace pack-token): with --connect, the console asks SkillCDN for a code, this command prints the page and the code, a person who may open the repository approves there, signed in at SkillCDN, and the console receives the token, shown to nobody (ADR-0036); with --stdin, a token a person made by hand at SkillCDN is read from standard input and never an argument; --remove takes the token 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}`,
@@ -243,13 +262,16 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
       "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",
+      "project.pack_connect_unsupported: the console reaches no deployment, or keeps no secret to seal a token with",
+      "project.pack_connect_refused: the project names no pack, the pack is on the console's machine, or SkillCDN refused to begin",
+      "skills.unavailable: SkillCDN could not be reached; try again later",
     ],
   },
   members: {
     usage: "members",
-    synopsis: "Those listed in the project, with what each is in it.",
+    synopsis: "The members of the project, with what each is in it.",
     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.",
+      "The members of the project, by login, with what each is in it (owner, who configures it; member, who works on it) and since when. In a private project, those listed; in one open to the workspace, everyone of it, an owner where listed as one or an administrator, a member otherwise. An administrator owns every project.",
   },
   member: {
     usage:
@@ -257,11 +279,12 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
     synopsis:
       "Lists a person in the project, changes what they are in it, or takes them off; for an owner.",
     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. With --project naming several keys with commas, member add lists the person in each of them in turn, one line per project; one listed already is said so, and the rest go on.",
+      "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. In a project open to the workspace everyone is a member already: only an owner is listed (member add --role owner, or member role <login> owner), and an owner made a member again stays the member everyone is. With --project naming several keys with commas, member add lists the person in each of them in turn, one line per project; one listed already is said so, and the rest go on.",
     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.open_project: the project is open to the workspace, so everyone is a member already; list an owner with --role owner",
       "member.not_found: the person is not listed in the project",
     ],
   },
@@ -328,7 +351,7 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
     usage: "take <number|id> [--agent <name>]",
     synopsis: "Takes a task: a run begins, and the task is in progress and the person's.",
     about:
-      "Takes a task: a run begins, and the task is in progress and the person's; the rules of the board are printed with the task. 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; console task <number> shows the runs on a task, with when each was last heard from, before it is taken. --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; the run's id and the task's id are printed on a line of their own, then the task, then the rules of the board. 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; console task <number> shows the runs on a task, with when each was last heard from, before it is taken. --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",
@@ -604,7 +627,7 @@ const SECTIONS: readonly { readonly title: string; readonly commands: readonly s
   {
     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"],
+    commands: ["workspace", "people", "person", "project", "members", "member", "category"],
   },
 ];
 

package/src/client.ts

@@ -44,6 +44,8 @@ import {
   type RestMemberPatch,
   type RestMembers,
   type RestMePatch,
+  type RestPackConnect,
+  type RestPackConnectStarted,
   type RestPackTokenInput,
   type RestPeople,
   type RestPerson,
@@ -76,6 +78,9 @@ import {
   type RestVersion,
   type RestVersions,
   type RestWork,
+  type RestWorkspace,
+  type RestWorkspacePackConnect,
+  type RestWorkspacePatch,
   restArchivedTasksSchema,
   restCategoriesSchema,
   restCategorySchema,
@@ -96,6 +101,8 @@ import {
   restMemberSchema,
   restMembersSchema,
   restMeSchema,
+  restPackConnectSchema,
+  restPackConnectStartedSchema,
   restPeopleSchema,
   restPersonSchema,
   restPersonWorkSchema,
@@ -117,6 +124,8 @@ import {
   restVersionSchema,
   restVersionsSchema,
   restWorkSchema,
+  restWorkspacePackConnectSchema,
+  restWorkspaceSchema,
 } from "./schemas.js";
 import type { GoalState, TaskState } from "./vocabulary.js";
 
@@ -345,6 +354,12 @@ export interface ProjectClient {
   setPackToken(input: RestPackTokenInput): Promise<RestProject>;
   /** Takes the pack token away; for an owner. */
   removePackToken(): Promise<RestProject>;
+  /** Asks the deployment to connect the project's pack with a code a person approves (ADR-0036); for an owner. */
+  connectPackToken(): Promise<RestPackConnectStarted>;
+  /** How that connection stands; the token is kept when the person approved. For an owner. */
+  packTokenConnection(signal?: AbortSignal): Promise<RestPackConnect>;
+  /** Gives the connection up; for an owner. */
+  cancelPackTokenConnection(): Promise<void>;
   /** The rules that hold in the project (ADR-0023): the workspace's, and what the project adds. */
   rules(signal?: AbortSignal): Promise<RestProjectRules>;
   /** A folder's pages and folders, or the pages a search finds. */
@@ -380,7 +395,26 @@ export interface ConsoleClient {
   giveUpToken(): Promise<void>;
   /** Keeps the person's choice of language, or none; for a person signed in. */
   updateMe(patch: RestMePatch): Promise<RestMe>;
+  /** Changes the workspace's settings (ADR-0035); for an administrator, with a session or a token. */
+  updateWorkspace(patch: RestWorkspacePatch): Promise<RestWorkspace>;
+  /**
+   * The workspace's SkillCDN token (ADR-0036), which reads the organization's pack for every
+   * project that names no address and holds no token of its own; an administrator's. Set from
+   * a token made by hand, taken away, or connected with a code a person approves at SkillCDN,
+   * asked after until the token is kept or the request ended.
+   */
+  setWorkspacePackToken(input: RestPackTokenInput): Promise<RestWorkspace>;
+  removeWorkspacePackToken(): Promise<RestWorkspace>;
+  connectWorkspacePackToken(): Promise<RestPackConnectStarted>;
+  workspacePackTokenConnection(signal?: AbortSignal): Promise<RestWorkspacePackConnect>;
+  cancelWorkspacePackTokenConnection(): Promise<void>;
+  /** The people the asker may see: everyone, or those they share a project with (ADR-0035). */
   people(signal?: AbortSignal): Promise<RestPeople>;
+  /**
+   * One person of the workspace by their exact login, compared without regard to case, or
+   * nobody: what an owner lists someone by when the People page does not show them.
+   */
+  findPerson(login: string, signal?: AbortSignal): Promise<RestPerson | undefined>;
   /** Changes what a person is, or whether they are in; for an administrator. */
   updatePerson(id: string, patch: RestPersonPatch): Promise<RestPerson>;
   /** Lets a login in (ADR-0022): whoever signs in with that account becomes a person; for an administrator. */
@@ -766,6 +800,23 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
         request("PUT", `${base}${at()}/pack-token`, input, restProjectSchema),
       removePackToken: () =>
         request("DELETE", `${base}${at()}/pack-token`, undefined, restProjectSchema),
+      connectPackToken: () =>
+        request(
+          "POST",
+          `${base}${at()}/pack-token/connect`,
+          undefined,
+          restPackConnectStartedSchema,
+        ),
+      packTokenConnection: (signal) =>
+        request(
+          "GET",
+          `${base}${at()}/pack-token/connect`,
+          undefined,
+          restPackConnectSchema,
+          signal,
+        ),
+      cancelPackTokenConnection: () =>
+        request("DELETE", `${base}${at()}/pack-token/connect`, undefined, undefined),
       rules: (signal) =>
         request("GET", `${base}${at("rules")}`, undefined, restProjectRulesSchema, signal),
       documents: (filter = {}, signal) =>
@@ -829,6 +880,39 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
     giveUpToken: () => request("DELETE", `${base}${REST_ROUTES.meToken}`, undefined, undefined),
     people: (signal) =>
       request("GET", `${base}${REST_ROUTES.people}`, undefined, restPeopleSchema, signal),
+    findPerson: async (login, signal) => {
+      const found = await request(
+        "GET",
+        withQuery(REST_ROUTES.people, { login }),
+        undefined,
+        restPeopleSchema,
+        signal,
+      );
+      return found.items[0];
+    },
+    updateWorkspace: (patch) =>
+      request("PATCH", `${base}${REST_ROUTES.workspace}`, patch, restWorkspaceSchema),
+    setWorkspacePackToken: (input) =>
+      request("PUT", `${base}${REST_ROUTES.workspacePackToken}`, input, restWorkspaceSchema),
+    removeWorkspacePackToken: () =>
+      request("DELETE", `${base}${REST_ROUTES.workspacePackToken}`, undefined, restWorkspaceSchema),
+    connectWorkspacePackToken: () =>
+      request(
+        "POST",
+        `${base}${REST_ROUTES.workspacePackToken}/connect`,
+        undefined,
+        restPackConnectStartedSchema,
+      ),
+    workspacePackTokenConnection: (signal) =>
+      request(
+        "GET",
+        `${base}${REST_ROUTES.workspacePackToken}/connect`,
+        undefined,
+        restWorkspacePackConnectSchema,
+        signal,
+      ),
+    cancelWorkspacePackTokenConnection: () =>
+      request("DELETE", `${base}${REST_ROUTES.workspacePackToken}/connect`, undefined, undefined),
     updatePerson: (id, patch) =>
       request("PATCH", `${base}${restPath("people", id)}`, patch, restPersonSchema),
     createListing: (input) =>

package/src/components/calendar.tsx

@@ -5,11 +5,13 @@ import {
   type RestGoal,
   type RestPerson,
   type RestTask,
+  type WeekStart,
 } from "../api.js";
 import {
   addDays,
   addMonths,
   daysBetween,
+  deviceLanguage,
   firstDayOfWeek,
   formatDay,
   formatDays,
@@ -55,6 +57,8 @@ export interface CalendarProps {
   readonly goalHref?: ((goal: RestGoal) => string) | undefined;
   /** Where the calendar is on another month. */
   readonly monthHref: (month: string) => string;
+  /** The day the weeks begin on, as the workspace says (ADR-0035); the language's when left out. */
+  readonly weekStart?: WeekStart | undefined;
 }
 
 /** One task's stretch across one week: which columns it covers, and in which lane it lies. */
@@ -469,7 +473,7 @@ export function Calendar(props: CalendarProps) {
   const { tag } = useLanguage();
   const [pointed, point, leave] = usePointed();
   const now = props.today ?? todayOf();
-  const firstDay = firstDayOfWeek(tag);
+  const firstDay = firstDayOfWeek(deviceLanguage(tag), props.weekStart);
   const weeks = monthGrid(props.month, firstDay);
   const on = onDays(props.tasks);
   const goalsOn = props.goalHref === undefined ? undefined : goalsOnDays(props.goals ?? []);
@@ -567,6 +571,8 @@ export interface WeekProps {
   readonly weekHref: (day: string) => string;
   /** What stands before a task's title where the tasks are of several projects: the project's mark. */
   readonly markOf?: ((task: RestTask) => ReactNode) | undefined;
+  /** The day the week begins on, as the workspace says (ADR-0035); the language's when left out. */
+  readonly weekStart?: WeekStart | undefined;
 }
 
 /** One week on its own: the days as columns, the tasks on them, and the weeks around a step away. */
@@ -575,7 +581,7 @@ export function Week(props: WeekProps) {
   const { tag } = useLanguage();
   const [pointed, point, leave] = usePointed();
   const now = props.today ?? todayOf();
-  const firstDay = firstDayOfWeek(tag);
+  const firstDay = firstDayOfWeek(deviceLanguage(tag), props.weekStart);
   const days = weekOf(props.day ?? now, firstDay);
   const first = days[0] ?? now;
   const last = days[days.length - 1] ?? now;

package/src/components/event-feed.tsx

@@ -46,6 +46,8 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
       return feed.event.personDeactivated(login);
     case "person.reactivated":
       return feed.event.personReactivated(login);
+    case "workspace.updated":
+      return feed.event.workspaceUpdated(fields);
     case "project.created":
       return feed.event.projectCreated(project);
     case "project.updated":

package/src/components/pack-connect.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useState } from "react";
+import type { PackConnectEnding, RestPackConnect, RestPackConnectStarted } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Button, Time } from "./ui.js";
+
+// A private pack connected with a code a person approves (ADR-0036): an owner, or for the
+// workspace's token an administrator, asks, the console asks the deployment and shows what it
+// answered, the code and the page, and the person approves there; the page asks the console
+// again at the interval the deployment named until the token is kept or the request ended.
+// Takes its data through the callbacks and keeps nothing itself.
+
+/**
+ * How a connection stands, as the component needs it: what the API answers for a project's
+ * token and for the workspace's both say this much, with what was connected beside it.
+ */
+export type PackConnectState =
+  | Extract<RestPackConnect, { status: "none" | "pending" | "ended" }>
+  | { readonly status: "connected" };
+
+export interface PackConnectProps {
+  /** Asks the deployment to connect; answers what the person is shown. */
+  readonly onStart: () => Promise<RestPackConnectStarted>;
+  /** How the connection stands; the token is kept when the person approved. */
+  readonly poll: (signal?: AbortSignal) => Promise<PackConnectState>;
+  /** Gives the connection up. */
+  readonly onCancel: () => Promise<void>;
+  /** Called once the token is kept. */
+  readonly onConnected?: (() => void) | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+type Shown =
+  | { readonly kind: "idle" }
+  | {
+      readonly kind: "waiting";
+      readonly code: string;
+      readonly url: string;
+      readonly expiresAt: string;
+      readonly intervalSeconds: number;
+    }
+  | { readonly kind: "ended"; readonly reason: PackConnectEnding }
+  | { readonly kind: "connected" };
+
+/** The least often the console is asked again, whatever the deployment says. */
+const MIN_INTERVAL_SECONDS = 2;
+
+export function PackConnect(props: PackConnectProps) {
+  const words = useWords();
+  const pack = words.projects.packToken;
+  const { poll, onConnected } = props;
+  const [shown, setShown] = useState<Shown>({ kind: "idle" });
+  const [problem, setProblem] = useState<string | undefined>(undefined);
+
+  // A request begun before the page was opened is picked up where it stands.
+  useEffect(() => {
+    const controller = new AbortController();
+    poll(controller.signal)
+      .then((state) => {
+        if (!controller.signal.aborted && state.status === "pending") {
+          setShown({ kind: "waiting", ...state });
+        }
+      })
+      .catch(() => undefined);
+    return () => controller.abort();
+  }, [poll]);
+
+  // While waiting, the console is asked again at the interval the deployment named; a new
+  // answer, pending still, is a new state, which schedules the next asking.
+  useEffect(() => {
+    if (shown.kind !== "waiting") {
+      return;
+    }
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      poll(controller.signal)
+        .then((state) => {
+          if (controller.signal.aborted) {
+            return;
+          }
+          setProblem(undefined);
+          if (state.status === "pending") {
+            setShown({ kind: "waiting", ...state });
+          } else if (state.status === "connected") {
+            setShown({ kind: "connected" });
+            onConnected?.();
+          } else if (state.status === "ended") {
+            setShown({ kind: "ended", reason: state.reason });
+          } else {
+            setShown({ kind: "idle" });
+          }
+        })
+        .catch((failure: unknown) => {
+          if (controller.signal.aborted) {
+            return;
+          }
+          // The console could not be asked this time; it is asked again.
+          setProblem(failure instanceof Error ? failure.message : String(failure));
+          setShown((current) => (current.kind === "waiting" ? { ...current } : current));
+        });
+    }, Math.max(shown.intervalSeconds, MIN_INTERVAL_SECONDS) * 1000);
+    return () => {
+      controller.abort();
+      clearTimeout(timer);
+    };
+  }, [shown, poll, onConnected]);
+
+  const start = () => {
+    setProblem(undefined);
+    props
+      .onStart()
+      .then((started) => setShown({ kind: "waiting", ...started }))
+      .catch((failure: unknown) => {
+        setProblem(failure instanceof Error ? failure.message : String(failure));
+      });
+  };
+  const cancel = () => {
+    props
+      .onCancel()
+      .then(() => setShown({ kind: "idle" }))
+      .catch((failure: unknown) => {
+        setProblem(failure instanceof Error ? failure.message : String(failure));
+      });
+  };
+
+  return (
+    <div className="sc-pack-connect" aria-live="polite">
+      {shown.kind === "waiting" ? (
+        <>
+          <p className="sc-pack-connect-code">
+            <span className="sc-field-label">{pack.connectCode}</span>
+            <code className="sc-pack-code">{shown.code}</code>
+          </p>
+          <div className="sc-form-actions">
+            <a
+              className="sc-button sc-button-primary"
+              href={shown.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {pack.connectOpen}
+            </a>
+            <Button variant="ghost" disabled={props.busy === true} onClick={cancel}>
+              {pack.connectCancel}
+            </Button>
+          </div>
+          <p className="sc-pack-connect-waiting">
+            <span className="sc-spinner" aria-hidden="true">
+              <span className="sc-spinner-ring" />
+            </span>
+            <span>
+              {pack.connectWaiting} {pack.connectExpires} <Time iso={shown.expiresAt} />
+            </span>
+          </p>
+        </>
+      ) : shown.kind === "connected" ? (
+        <p>{pack.connectDone}</p>
+      ) : (
+        <>
+          <p className="sc-field-hint">{pack.connectHint}</p>
+          {shown.kind === "ended" && (
+            <p className="sc-form-error" role="alert">
+              {pack.connectEnded[shown.reason]}
+            </p>
+          )}
+          <div className="sc-form-actions">
+            <Button variant="primary" disabled={props.busy === true} onClick={start}>
+              {pack.connect}
+            </Button>
+          </div>
+        </>
+      )}
+      {problem !== undefined && (
+        <p className="sc-form-error" role="alert">
+          {problem}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/pack-token.tsx

@@ -0,0 +1,74 @@
+import type { RestPackConnectStarted } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { PackConnect, type PackConnectState } from "./pack-connect.js";
+import { PackTokenForm } from "./projects.js";
+import { Button } from "./ui.js";
+
+// The SkillCDN token a private pack is read with (ADR-0028, ADR-0036), as a project's Settings
+// page and the workspace's offer it: what the token is for, then the two ways to one side by
+// side, a code approved at SkillCDN and a token made there by hand. Takes its data through the
+// callbacks and keeps nothing itself; whose token it is, the page says in the title and the intro.
+
+export interface PackTokenWaysProps {
+  /** What the section is called, and what assistive technology reads it as. */
+  readonly title: string;
+  /** What the token is for, in the words of the page it is on. */
+  readonly intro: string;
+  /** Whether a token is held now, and since when. */
+  readonly set: boolean;
+  readonly setAt?: string | undefined;
+  readonly busy?: boolean | undefined;
+  /** Asks the deployment to connect; answers what the person is shown. */
+  readonly onStart: () => Promise<RestPackConnectStarted>;
+  /** How the connection stands; the token is kept when the person approved. */
+  readonly poll: (signal?: AbortSignal) => Promise<PackConnectState>;
+  /** Gives the connection up. */
+  readonly onCancelConnect: () => Promise<void>;
+  /** Called once the token is kept. */
+  readonly onConnected?: (() => void) | undefined;
+  /** Called with a token made by hand, as typed or pasted. */
+  readonly onSubmit: (token: string) => void;
+  readonly onRemove?: (() => void) | undefined;
+  /** Leaves the page without changing anything. */
+  readonly onBack?: (() => void) | undefined;
+}
+
+export function PackTokenWays(props: PackTokenWaysProps) {
+  const words = useWords();
+  const pack = words.projects.packToken;
+  return (
+    <section className="sc-panel sc-panel-form" aria-label={props.title}>
+      <h2 className="sc-section-title">{props.title}</h2>
+      <p className="sc-pack-intro">{props.intro}</p>
+      <div className="sc-pack-ways">
+        <section className="sc-pack-way" aria-label={pack.connectTitle}>
+          <h3 className="sc-pack-way-title">{pack.connectTitle}</h3>
+          <PackConnect
+            onStart={props.onStart}
+            poll={props.poll}
+            onCancel={props.onCancelConnect}
+            onConnected={props.onConnected}
+            busy={props.busy}
+          />
+        </section>
+        <section className="sc-pack-way" aria-label={pack.pasteTitle}>
+          <h3 className="sc-pack-way-title">{pack.pasteTitle}</h3>
+          <PackTokenForm
+            set={props.set}
+            setAt={props.setAt}
+            busy={props.busy}
+            onSubmit={props.onSubmit}
+            onRemove={props.onRemove}
+          />
+        </section>
+      </div>
+      {props.onBack !== undefined && (
+        <div className="sc-form-actions sc-pack-actions">
+          <Button variant="ghost" onClick={props.onBack}>
+            {words.common.cancel}
+          </Button>
+        </div>
+      )}
+    </section>
+  );
+}