@skillcdn/console 0.1.14 → 0.1.16

package/src/components/calendar.tsx

@@ -1,10 +1,17 @@
-import type { ReactNode } from "react";
-import { OPEN_TASK_STATES, type RestCategory, type RestPerson, type RestTask } from "../api.js";
+import { type ReactNode, type SyntheticEvent, useState } from "react";
+import {
+  OPEN_TASK_STATES,
+  type RestCategory,
+  type RestGoal,
+  type RestPerson,
+  type RestTask,
+} from "../api.js";
 import {
   addDays,
   addMonths,
   daysBetween,
   firstDayOfWeek,
+  formatDay,
   formatDays,
   formatMonth,
   formatWeekday,
@@ -16,14 +23,16 @@ import {
   weekOf,
 } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
-import { cx, PersonChip, personName } from "./ui.js";
+import { Avatar, CategoryBadge, cx, PersonChip, personName, StateBadge, Time } 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. The task under the pointer is shown in full within its item, with the
+// facts its own page lists, above or below it where there is more room. 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);
 
@@ -39,6 +48,8 @@ export interface CalendarProps {
   readonly today?: string | undefined;
   /** The workspace's categories, for the legend to say what the colours mean. */
   readonly categories?: readonly RestCategory[] | undefined;
+  /** The project's goals, so that the task under the pointer is shown with its goal's title. */
+  readonly goals?: readonly RestGoal[] | undefined;
   readonly taskHref: (task: RestTask) => string;
   /** Where the calendar is on another month. */
   readonly monthHref: (month: string) => string;
@@ -104,49 +115,239 @@ 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: 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",
+  );
+
+/** Where the card of the item under the pointer goes: the side with more room, kept within the window. */
+export interface TipPlace {
+  readonly side: "above" | "below";
+  /** How far the card moves from the item's left edge, in pixels, to stay within the window: zero or less. */
+  readonly shift: number;
+}
+
+/** What the card may grow to, in pixels: 20rem at the usual root size, as the style says. */
+const TIP_WIDTH = 320;
+/** What stays between the card and the window's edge, in pixels. */
+const TIP_MARGIN = 8;
+
+/**
+ * Places the card beside an item, from the item's box and the window's size, both in pixels from
+ * the window's top left corner: above the item where the room above is at least the room below,
+ * else below it, and moved left where it would otherwise leave the window on the right.
+ */
+export function placeTip(
+  item: { readonly top: number; readonly bottom: number; readonly left: number },
+  window: { readonly width: number; readonly height: number },
+): TipPlace {
+  const side = item.top >= window.height - item.bottom ? "above" : "below";
+  const left = Math.max(TIP_MARGIN, Math.min(item.left, window.width - TIP_WIDTH - TIP_MARGIN));
+  return { side, shift: Math.min(0, left - item.left) };
+}
+
+/** The item the pointer is on: a task on a day, since a bar has an item on each of its days, and where its card goes. */
+interface Pointed {
+  readonly task: RestTask;
+  readonly day: string;
+  readonly place: TipPlace;
 }
 
-/** 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");
+/** The item under the pointer, measured as the pointer arrives, since only the browser knows where it is. */
+function usePointed(): [
+  Pointed | null,
+  (task: RestTask, day: string, item: HTMLElement) => void,
+  () => void,
+] {
+  const [pointed, setPointed] = useState<Pointed | null>(null);
+  const point = (task: RestTask, day: string, item: HTMLElement): void =>
+    setPointed({
+      task,
+      day,
+      place: placeTip(item.getBoundingClientRect(), {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      }),
+    });
+  const leave = (): void => setPointed(null);
+  return [pointed, point, leave];
+}
+
+export interface TaskTipProps {
+  readonly task: RestTask;
+  /** The project's goals, so that the task's goal is named by its title; without them the row is left out. */
+  readonly goals?: readonly RestGoal[] | undefined;
+  readonly place: TipPlace;
+}
+
+/**
+ * The task under the pointer in full: its number and its title, then the facts its own page lists
+ * beside the text, those that are set. Lies within the item it belongs to, above or below it, and
+ * out of the accessible tree: the item's text is the title, and the facts are on the task's page.
+ */
+export function TaskTip(props: TaskTipProps) {
+  const words = useWords();
+  const { tag } = useLanguage();
+  const { task, place } = props;
+  const goal = props.goals?.find((candidate) => candidate.id === task.goalId);
+  const day = (value: string): string => formatDay(value, tag);
+  return (
+    <div
+      className={cx(
+        "sc-task-tip",
+        place.side === "above" ? "sc-task-tip-above" : "sc-task-tip-below",
+      )}
+      style={{ left: place.shift }}
+      aria-hidden="true"
+    >
+      <p className="sc-task-tip-title">
+        #{task.number} {task.title}
+      </p>
+      <dl className="sc-task-tip-facts">
+        <div>
+          <dt>{words.task.state}</dt>
+          <dd>
+            <StateBadge state={task.state} />
+          </dd>
+        </div>
+        <div>
+          <dt>{words.task.form.priority}</dt>
+          <dd>{words.vocabulary.priority[task.priority]}</dd>
+        </div>
+        {task.category !== null && (
+          <div>
+            <dt>{words.task.category}</dt>
+            <dd>
+              <CategoryBadge category={task.category} />
+            </dd>
+          </div>
+        )}
+        {goal !== undefined && (
+          <div>
+            <dt>{words.task.goal}</dt>
+            <dd>{goal.title}</dd>
+          </div>
+        )}
+        <div>
+          <dt>{words.task.owner}</dt>
+          <dd>
+            <PersonChip person={task.owner} />
+          </dd>
+        </div>
+        <div>
+          <dt>{words.task.assignee}</dt>
+          <dd>
+            {task.assignee === null ? (
+              <span className="sc-muted">{words.common.nobody}</span>
+            ) : (
+              <PersonChip person={task.assignee} />
+            )}
+          </dd>
+        </div>
+        {(task.startsOn !== null || task.dueOn !== null) && (
+          <div>
+            <dt>{words.task.plan}</dt>
+            <dd>
+              {words.task.planned(
+                task.startsOn === null ? undefined : day(task.startsOn),
+                task.dueOn === null ? undefined : day(task.dueOn),
+              )}
+            </dd>
+          </div>
+        )}
+        {task.startedAt !== null && (
+          <div>
+            <dt>{words.task.started}</dt>
+            <dd>
+              <Time iso={task.startedAt} />
+            </dd>
+          </div>
+        )}
+        {task.doneAt !== null && (
+          <div>
+            <dt>{words.task.done}</dt>
+            <dd>
+              <Time iso={task.doneAt} />
+            </dd>
+          </div>
+        )}
+        <div>
+          <dt>{words.task.written}</dt>
+          <dd>
+            <Time iso={task.createdAt} />
+          </dd>
+        </div>
+        <div>
+          <dt>{words.task.changed}</dt>
+          <dd>
+            <Time iso={task.updatedAt} />
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
 
 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;
+  /** The item under the pointer, shown in full within that item, or none. */
+  readonly pointed: Pointed | null;
+  /** The project's goals, so that the item under the pointer names its goal; none across projects. */
+  readonly goals?: readonly RestGoal[] | undefined;
+  /** The pointer, or the focus, arrived on a task's item on a day. */
+  readonly onPoint: (task: RestTask, day: string, item: HTMLElement) => void;
+  /** It left. */
+  readonly onLeave: () => void;
 }
 
 /** 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 pointing = (task: RestTask, day: string) => ({
+    onMouseEnter: (event: SyntheticEvent<HTMLElement>) =>
+      props.onPoint(task, day, event.currentTarget),
+    onMouseLeave: props.onLeave,
+    onFocus: (event: SyntheticEvent<HTMLElement>) => props.onPoint(task, day, event.currentTarget),
+    onBlur: props.onLeave,
+  });
+  const tipIn = (task: RestTask, day: string): ReactNode =>
+    props.pointed !== null && props.pointed.task.id === task.id && props.pointed.day === day ? (
+      <TaskTip task={task} goals={props.goals} place={props.pointed.place} />
+    ) : null;
+  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 +380,30 @@ 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),
                 )}
                 href={props.taskHref(task)}
-                title={`#${task.number} ${task.title}`}
+                {...pointing(task, cell.day)}
               >
                 {segment.from === column && (
                   <>
                     {props.markOf?.(task)}
+                    {who(task)}
                     <span className="sc-calendar-task-title">{task.title}</span>
                   </>
                 )}
+                {tipIn(task, cell.day)}
               </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))}
                 href={props.taskHref(task)}
-                title={`#${task.number} ${task.title}`}
+                {...pointing(task, cell.day)}
               >
                 {mark === undefined || mark === null ? (
                   <span
@@ -212,21 +415,12 @@ function WeekRow(props: WeekRowProps) {
                 ) : (
                   mark
                 )}
+                {who(task)}
                 <span className="sc-calendar-task-title">{task.title}</span>
+                {tipIn(task, cell.day)}
               </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>
@@ -236,15 +430,15 @@ function WeekRow(props: WeekRowProps) {
 export function Calendar(props: CalendarProps) {
   const words = useWords().calendar;
   const { tag } = useLanguage();
+  const [pointed, point, leave] = usePointed();
   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 +487,14 @@ export function Calendar(props: CalendarProps) {
               key={week[0]?.day}
               week={week}
               segments={segments}
-              due={due}
-              starting={starting}
+              on={on}
               now={now}
               taskHref={props.taskHref}
+              pointed={pointed}
+              goals={props.goals}
+              onPoint={point}
+              onLeave={leave}
+              people
             />
           ))}
         </tbody>
@@ -335,15 +533,16 @@ export interface WeekProps {
 export function Week(props: WeekProps) {
   const words = useWords().calendar.week;
   const { tag } = useLanguage();
+  const [pointed, point, leave] = usePointed();
   const now = props.today ?? todayOf();
   const firstDay = firstDayOfWeek(tag);
   const days = weekOf(props.day ?? now, firstDay);
   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,11 +581,13 @@ export function Week(props: WeekProps) {
           <WeekRow
             week={week}
             segments={segments}
-            due={due}
-            starting={starting}
+            on={on}
             now={now}
             taskHref={props.taskHref}
             markOf={props.markOf}
+            pointed={pointed}
+            onPoint={point}
+            onLeave={leave}
           />
         </tbody>
       </table>

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>