@skillcdn/console 0.1.14 → 0.1.15

package/src/client.ts

@@ -4,9 +4,11 @@ import {
   categoryPath,
   connectPath,
   personTokensPath,
+  personWorkPath,
   projectPath,
   REST_ROUTES,
   restPath,
+  rulesPath,
 } from "./routes.js";
 import {
   type RestAnswerInput,
@@ -31,6 +33,8 @@ import {
   type RestGoalInput,
   type RestGoalPatch,
   type RestGoals,
+  type RestListing,
+  type RestListingInput,
   type RestMe,
   type RestMember,
   type RestMemberInput,
@@ -40,11 +44,15 @@ import {
   type RestPeople,
   type RestPerson,
   type RestPersonPatch,
+  type RestPersonWork,
   type RestProject,
   type RestProjectInput,
   type RestProjectPatch,
+  type RestProjectRules,
   type RestProjects,
   type RestReportInput,
+  type RestRules,
+  type RestRulesInput,
   type RestRun,
   type RestRunEndInput,
   type RestRunInput,
@@ -73,13 +81,17 @@ import {
   restEventsSchema,
   restGoalSchema,
   restGoalsSchema,
+  restListingSchema,
   restMemberSchema,
   restMembersSchema,
   restMeSchema,
   restPeopleSchema,
   restPersonSchema,
+  restPersonWorkSchema,
+  restProjectRulesSchema,
   restProjectSchema,
   restProjectsSchema,
+  restRulesSchema,
   restRunSchema,
   restRunsSchema,
   restSkillsSchema,
@@ -243,6 +255,8 @@ export interface ProjectClient {
   eventStreamUrl(after: number): string;
   /** The project's skills, as SkillCDN serves them at its address, or the organization's. */
   skills(signal?: AbortSignal): Promise<RestSkills>;
+  /** 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. */
   documents(filter?: DocumentFilter, signal?: AbortSignal): Promise<RestDocuments>;
   /** One document, by its path: its latest version, its links both ways, its files. */
@@ -271,11 +285,17 @@ export interface ProjectClient {
 
 export interface ConsoleClient {
   me(signal?: AbortSignal): Promise<RestMe>;
+  /** Gives up the token this client acts with, so that it is good for nothing from now on: what `console logout` does. For a token; a session has none. */
+  giveUpToken(): Promise<void>;
   /** Keeps the person's choice of language, or none; for a person signed in. */
   updateMe(patch: RestMePatch): Promise<RestMe>;
   people(signal?: AbortSignal): Promise<RestPeople>;
-  /** Changes what a person is; for an administrator. */
+  /** 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. */
+  createListing(input: RestListingInput): Promise<RestListing>;
+  /** Takes a listing away before anyone signed in with it; for an administrator. */
+  removeListing(id: string): Promise<void>;
   /** The projects the asker may see, with what they are in each. */
   projects(signal?: AbortSignal): Promise<RestProjects>;
   /** Makes a project, whose owner the asker becomes. */
@@ -286,6 +306,14 @@ export interface ConsoleClient {
   events(after: number, signal?: AbortSignal): Promise<RestEvents>;
   /** The categories tasks are sorted into (ADR-0019), by name. */
   categories(signal?: AbortSignal): Promise<RestCategories>;
+  /** The workspace's rules (ADR-0023): the console's own until an administrator writes the organization's. */
+  rules(signal?: AbortSignal): Promise<RestRules>;
+  /** Writes the organization's rules; for an administrator. The console's own, sent as they are, write nothing. */
+  writeRules(input: RestRulesInput): Promise<RestRules>;
+  /** Puts the organization's rules away, so that the console's own hold again; for an administrator. */
+  archiveRules(): Promise<RestRules>;
+  /** The versions of the organization's rules, newest first; none while the console's own hold. */
+  rulesVersions(signal?: AbortSignal): Promise<RestVersions>;
   /** Makes a category; for an administrator signed in. */
   createCategory(input: RestCategoryInput): Promise<RestCategory>;
   updateCategory(key: string, patch: RestCategoryPatch): Promise<RestCategory>;
@@ -293,6 +321,8 @@ export interface ConsoleClient {
   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>;
+  /** Another person's plate, within what the asker may see: for an administrator, or an owner of a project they are in. */
+  personWork(personId: string, signal?: AbortSignal): Promise<RestPersonWork>;
   /** The tokens of whoever asks. */
   tokens(signal?: AbortSignal): Promise<RestTokens>;
   /** The tokens of another person: for an administrator. */
@@ -520,6 +550,8 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
       eventStreamUrl: (after) => withQuery(`${at("events")}/stream`, { after: String(after) }),
       skills: (signal) =>
         request("GET", `${base}${at("skills")}`, undefined, restSkillsSchema, signal),
+      rules: (signal) =>
+        request("GET", `${base}${at("rules")}`, undefined, restProjectRulesSchema, signal),
       documents: (filter = {}, signal) =>
         request(
           "GET",
@@ -572,10 +604,15 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
 
   return {
     me: (signal) => request("GET", `${base}${REST_ROUTES.me}`, undefined, restMeSchema, signal),
+    giveUpToken: () => request("DELETE", `${base}${REST_ROUTES.meToken}`, undefined, undefined),
     people: (signal) =>
       request("GET", `${base}${REST_ROUTES.people}`, undefined, restPeopleSchema, signal),
     updatePerson: (id, patch) =>
       request("PATCH", `${base}${restPath("people", id)}`, patch, restPersonSchema),
+    createListing: (input) =>
+      request("POST", `${base}${REST_ROUTES.listings}`, input, restListingSchema),
+    removeListing: (id) =>
+      request("DELETE", `${base}${restPath("listings", id)}`, undefined, undefined),
     projects: (signal) =>
       request("GET", `${base}${REST_ROUTES.projects}`, undefined, restProjectsSchema, signal),
     createProject: (input) =>
@@ -591,6 +628,13 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
       ),
     categories: (signal) =>
       request("GET", `${base}${REST_ROUTES.categories}`, undefined, restCategoriesSchema, signal),
+    rules: (signal) =>
+      request("GET", `${base}${REST_ROUTES.rules}`, undefined, restRulesSchema, signal),
+    writeRules: (input) => request("PUT", `${base}${REST_ROUTES.rules}`, input, restRulesSchema),
+    archiveRules: () =>
+      request("POST", `${base}${rulesPath("archive")}`, undefined, restRulesSchema),
+    rulesVersions: (signal) =>
+      request("GET", `${base}${rulesPath("versions")}`, undefined, restVersionsSchema, signal),
     createCategory: (input) =>
       request("POST", `${base}${REST_ROUTES.categories}`, input, restCategorySchema),
     updateCategory: (key, patch) =>
@@ -598,6 +642,8 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
     removeCategory: (key) => request("DELETE", `${base}${categoryPath(key)}`, undefined, undefined),
     work: (signal) =>
       request("GET", `${base}${REST_ROUTES.work}`, undefined, restWorkSchema, signal),
+    personWork: (personId, signal) =>
+      request("GET", `${base}${personWorkPath(personId)}`, undefined, restPersonWorkSchema, signal),
     tokens: (signal) =>
       request("GET", `${base}${REST_ROUTES.tokens}`, undefined, restTokensSchema, signal),
     createToken: (input) =>

package/src/components/calendar.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, SyntheticEvent } from "react";
 import { OPEN_TASK_STATES, type RestCategory, type RestPerson, type RestTask } from "../api.js";
 import {
   addDays,
@@ -16,14 +16,15 @@ import {
   weekOf,
 } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
-import { cx, PersonChip, personName } from "./ui.js";
+import { Avatar, cx, PersonChip, personName } from "./ui.js";
 
 // The calendar of a project (ADR-0019): the month as a grid, or one week on its own. 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 or the week
-// shown is the address's (ADR-0010).
+// each week so that the bars of one week never cross; a task with one day alone, a due day or
+// a start, sits on that day as a dot. On a project's calendar the person who has a task stands
+// before its title, since the days hold several people's work. Who has what says whether the
+// work is on its days. Takes its data as props and nothing from the network; the month or the
+// week shown is the address's (ADR-0010).
 
 const isOpen = (task: RestTask): boolean => OPEN_TASK_STATES.includes(task.state);
 
@@ -104,49 +105,67 @@ function push(map: Map<string, RestTask[]>, day: string, task: RestTask): void {
   }
 }
 
-/** The tasks that sit on one day each: due on it, or beginning on it with no due day yet. */
-function onDays(tasks: readonly RestTask[]): {
-  readonly due: ReadonlyMap<string, readonly RestTask[]>;
-  readonly starting: ReadonlyMap<string, readonly RestTask[]>;
-} {
-  const due = new Map<string, RestTask[]>();
-  const starting = new Map<string, RestTask[]>();
+/** The tasks that sit on one day each, by day: due on it, or beginning on it with no due day yet. */
+function onDays(tasks: readonly RestTask[]): ReadonlyMap<string, readonly RestTask[]> {
+  const on = new Map<string, RestTask[]>();
   for (const task of tasks) {
     if (spans(task)) {
       continue;
     }
-    if (task.dueOn !== null) {
-      push(due, task.dueOn, task);
-    } else if (task.startsOn !== null) {
-      push(starting, task.startsOn, task);
+    const day = task.dueOn ?? task.startsOn;
+    if (day !== null) {
+      push(on, day, task);
     }
   }
   // Within a day, what is still open comes first; the rest reads as what was.
-  for (const list of due.values()) {
+  for (const list of on.values()) {
     list.sort((a, b) => Number(isOpen(b)) - Number(isOpen(a)) || a.number - b.number);
   }
-  return { due, starting };
+  return on;
 }
 
-/** How a task reads on a day: struck through once it is over, and marked once it is late. */
-const tone = (task: RestTask, day: string, now: string): string =>
-  cx(!isOpen(task) && "sc-calendar-over", isOpen(task) && day < now && "sc-calendar-late");
+/** How a task reads: struck through once it is over, and marked once its due day is past. */
+const tone = (task: RestTask, now: string): string =>
+  cx(
+    !isOpen(task) && "sc-calendar-over",
+    isOpen(task) && task.dueOn !== null && task.dueOn < now && "sc-calendar-late",
+  );
 
 interface WeekRowProps {
   readonly week: readonly GridDay[];
   readonly segments: readonly WeekSegment[];
-  readonly due: ReadonlyMap<string, readonly RestTask[]>;
-  readonly starting: ReadonlyMap<string, readonly RestTask[]>;
+  /** The tasks on one day each, by day. */
+  readonly on: ReadonlyMap<string, readonly RestTask[]>;
   readonly now: string;
   readonly taskHref: (task: RestTask) => 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;
+  /** Whether the person who has a task stands before its title, where the days hold several people's work. */
+  readonly people?: boolean | undefined;
+}
+
+/**
+ * Marks an item whose title its line cut short, or which shows none (a bar on its later days),
+ * so that the tip it carries in `data-tip` is shown at once while the pointer is on it. Measured
+ * as the pointer arrives, since only the browser knows where the line ended.
+ */
+function reveal(event: SyntheticEvent<HTMLElement>): void {
+  const item = event.currentTarget;
+  const title = item.querySelector(".sc-calendar-task-title");
+  item.toggleAttribute("data-clipped", title === null || title.scrollWidth > title.clientWidth);
 }
 
 /** One week as a row of cells: the bars across the days in their lanes, then the tasks on each day. */
 function WeekRow(props: WeekRowProps) {
-  const words = useWords().calendar;
   const { week, segments, now } = props;
+  const tip = (task: RestTask): string =>
+    props.people === true && task.assignee !== null
+      ? `#${task.number} ${task.title} \u00B7 ${personName(task.assignee)}`
+      : `#${task.number} ${task.title}`;
+  const who = (task: RestTask): ReactNode =>
+    props.people === true && task.assignee !== null ? (
+      <Avatar person={task.assignee} size="xs" />
+    ) : null;
   const lanes = segments.reduce((most, segment) => Math.max(most, segment.lane + 1), 0);
   return (
     <tr>
@@ -179,28 +198,34 @@ function WeekRow(props: WeekRowProps) {
                   `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, now),
+                  tone(task, now),
+                  "sc-tip",
                 )}
                 href={props.taskHref(task)}
-                title={`#${task.number} ${task.title}`}
+                data-tip={tip(task)}
+                onMouseEnter={reveal}
+                onFocus={reveal}
               >
                 {segment.from === column && (
                   <>
                     {props.markOf?.(task)}
+                    {who(task)}
                     <span className="sc-calendar-task-title">{task.title}</span>
                   </>
                 )}
               </a>
             );
           })}
-          {(props.due.get(cell.day) ?? []).map((task) => {
+          {(props.on.get(cell.day) ?? []).map((task) => {
             const mark = props.markOf?.(task);
             return (
               <a
                 key={task.id}
-                className={cx("sc-calendar-task", tone(task, cell.day, now))}
+                className={cx("sc-calendar-task", tone(task, now), "sc-tip")}
                 href={props.taskHref(task)}
-                title={`#${task.number} ${task.title}`}
+                data-tip={tip(task)}
+                onMouseEnter={reveal}
+                onFocus={reveal}
               >
                 {mark === undefined || mark === null ? (
                   <span
@@ -212,21 +237,11 @@ function WeekRow(props: WeekRowProps) {
                 ) : (
                   mark
                 )}
+                {who(task)}
                 <span className="sc-calendar-task-title">{task.title}</span>
               </a>
             );
           })}
-          {(props.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}`}
-            >
-              {props.markOf?.(task)}
-              <span className="sc-calendar-task-title">{task.title}</span>
-            </a>
-          ))}
         </td>
       ))}
     </tr>
@@ -239,12 +254,11 @@ export function Calendar(props: CalendarProps) {
   const now = props.today ?? todayOf();
   const firstDay = firstDayOfWeek(tag);
   const weeks = monthGrid(props.month, firstDay);
-  const { due, starting } = onDays(props.tasks);
+  const on = onDays(props.tasks);
   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)) &&
+    [...on.keys()].every((day) => !inMonth(day)) &&
     monthWeeks.every(({ week, segments }) =>
       segments.every(
         (segment) => !week.slice(segment.from, segment.to + 1).some((cell) => cell.inMonth),
@@ -293,10 +307,10 @@ export function Calendar(props: CalendarProps) {
               key={week[0]?.day}
               week={week}
               segments={segments}
-              due={due}
-              starting={starting}
+              on={on}
               now={now}
               taskHref={props.taskHref}
+              people
             />
           ))}
         </tbody>
@@ -341,9 +355,9 @@ export function Week(props: WeekProps) {
   const first = days[0] ?? now;
   const last = days[days.length - 1] ?? now;
   const week: GridDay[] = days.map((day) => ({ day, inMonth: true }));
-  const { due, starting } = onDays(props.tasks);
+  const on = onDays(props.tasks);
   const segments = weekSegments(week, props.tasks);
-  const nothing = segments.length === 0 && days.every((day) => !due.has(day) && !starting.has(day));
+  const nothing = segments.length === 0 && days.every((day) => !on.has(day));
   return (
     <div className="sc-calendar sc-week">
       <div className="sc-calendar-head">
@@ -382,8 +396,7 @@ export function Week(props: WeekProps) {
           <WeekRow
             week={week}
             segments={segments}
-            due={due}
-            starting={starting}
+            on={on}
             now={now}
             taskHref={props.taskHref}
             markOf={props.markOf}

package/src/components/connect.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { normalizeConnectCode, type RestConnectRequest, type RestTokenInput } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { TokenForm } from "./tokens.js";
-import { Button, Callout, Time } from "./ui.js";
+import { Button, Callout, CopyButton, Time } from "./ui.js";
 
 // Connecting an agent (ADR-0011): where a person types the code their agent showed, what asks
 // to connect under a code with the way to approve it, and the words that tell a person what to
@@ -106,16 +106,22 @@ export interface ConnectWordsProps {
   readonly origin: string;
 }
 
-/** What a person says to their agent to connect it, in words for someone who is not a developer. */
+/**
+ * What a person says to their agent to connect it: the words to paste into its chat, as they
+ * are, with the way to copy them; and the commands for a person who runs them by hand.
+ */
 export function ConnectWords(props: ConnectWordsProps) {
   const words = useWords().connect.words;
+  const quote = words.quote(props.origin);
   return (
     <section className="sc-panel sc-connect" aria-label={words.title}>
       <h2 className="sc-section-title">{words.title}</h2>
-      <p>
-        {words.tellYourAgent} <q>{words.quote(props.origin)}</q> {words.doesTheRest}
-      </p>
-      <p>{words.thenApprove}</p>
+      <p>{words.tellYourAgent}</p>
+      <div className="sc-copyable">
+        <pre className="sc-code">{quote}</pre>
+        <CopyButton text={quote} size="sm" />
+      </div>
+      <p>{words.doesTheRest}</p>
       <p>{words.byHand}</p>
       <pre className="sc-code">
         npm install -g @skillcdn/console{"\n"}console login --url {props.origin}

package/src/components/decision-list.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import {
+  agentLabel,
   MAX_BODY_LENGTH,
   MAX_NOTE_LENGTH,
   type RestAnswerInput,
@@ -128,7 +129,7 @@ export function DecisionCard(props: DecisionCardProps) {
           <PersonChip person={decision.raisedBy} />{" "}
           {decision.run === null
             ? words.decisions.asked
-            : words.decisions.askedThrough(decision.run.agent)}{" "}
+            : words.decisions.askedThrough(agentLabel(decision.run.agent))}{" "}
           <Time iso={decision.createdAt} />
           {task !== undefined && (
             <>

package/src/components/documents.tsx

@@ -1,4 +1,5 @@
 import { type FormEvent, type ReactNode, useState } from "react";
+import { agentLabel } from "../agent-name.js";
 import {
   foldersAbove,
   isDocumentPath,
@@ -59,7 +60,7 @@ export function DocumentCrumbs(props: {
 }
 
 /** Who wrote a version, and through which agent, as a chip and a word. */
-function Writer(props: {
+export function Writer(props: {
   readonly by: RestDocumentSummary["updatedBy"];
   readonly agent: string | null;
 }) {
@@ -68,8 +69,11 @@ function Writer(props: {
     <>
       <PersonChip person={props.by} />
       {props.agent !== null && (
-        <span className="sc-feed-agent" title={words.docs.asAgentTitle}>
-          {words.feed.as(props.agent)}
+        <span
+          className="sc-feed-agent"
+          title={agentLabel(props.agent) === props.agent ? words.docs.asAgentTitle : props.agent}
+        >
+          {words.feed.as(agentLabel(props.agent))}
         </span>
       )}
     </>

package/src/components/event-feed.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { RestEvent } from "../api.js";
+import { agentLabel, 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";
@@ -38,6 +38,14 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
       return feed.event.personJoined();
     case "person.role_changed":
       return feed.event.roleChanged(login, role(data.role));
+    case "person.listed":
+      return feed.event.personListed(login);
+    case "person.unlisted":
+      return feed.event.personUnlisted(login);
+    case "person.deactivated":
+      return feed.event.personDeactivated(login);
+    case "person.reactivated":
+      return feed.event.personReactivated(login);
     case "project.created":
       return feed.event.projectCreated(project);
     case "project.updated":
@@ -129,8 +137,13 @@ export function EventFeed(props: EventFeedProps) {
                   <PersonChip person={event.actor} />
                 )}
                 {event.agent !== null && (
-                  <span className="sc-feed-agent" title={words.feed.asTitle}>
-                    {words.feed.as(event.agent)}
+                  <span
+                    className="sc-feed-agent"
+                    title={
+                      agentLabel(event.agent) === event.agent ? words.feed.asTitle : event.agent
+                    }
+                  >
+                    {words.feed.as(agentLabel(event.agent))}
                   </span>
                 )}
               </span>