@skillcdn/console 0.4.2 → 0.4.4

package/src/components/decision-form.tsx

@@ -1,6 +1,8 @@
-import { type FormEvent, useMemo, useState } from "react";
+import { type ClipboardEvent, type FormEvent, useMemo, useState } from "react";
 import {
   MAX_BODY_LENGTH,
+  MAX_DECIDERS,
+  MAX_FILES_PER_DECISION,
   MAX_OPTION_LABEL_LENGTH,
   MAX_OPTIONS,
   MAX_QUESTION_LENGTH,
@@ -10,14 +12,17 @@ import {
   type RestTask,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
+import { isPicture, placing, unusedName } from "./files.js";
 import { Picker, type PickerSearch } from "./picker.js";
 import { type TaskSearch, taskLabel } from "./task-form.js";
-import { Button, PersonChip, personName } from "./ui.js";
+import { Button, formatBytes, PersonChip, personName } from "./ui.js";
 
 // Raising a decision: the question, what a person needs to know, the options to choose from,
 // and who is to answer (ADR-0042): the person raising it, unless they name another of the
 // project. The task it is about is the page's, when raised from a task; otherwise it is found
-// by searching the board a page at a time (ADR-0037), never picked from the board whole.
+// by searching the board a page at a time (ADR-0037), never picked from the board whole. The
+// files put on the decision (ADR-0055) are chosen or pasted here, a pasted picture placed in
+// the context where pictures are read, as a comment's are.
 
 export interface DecisionFormProps {
   /** The task it is about from the start, when raised from a task's page; the field is not shown then. */
@@ -30,10 +35,28 @@ export interface DecisionFormProps {
   readonly me?: RestPerson | undefined;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
-  readonly onSubmit: (input: RestDecisionInput) => void;
+  /** Called with the decision as the API takes it, and the files put on it (ADR-0055), none when none were chosen. */
+  readonly onSubmit: (input: RestDecisionInput, files: readonly File[]) => void;
   readonly onCancel?: (() => void) | undefined;
 }
 
+/**
+ * What the form sends of whom the decision is for: nothing for the raiser alone, `deciderId` for
+ * one other person, `deciderIds` for several (ADR-0057), the first among them repeated as
+ * `deciderId` for a console of before.
+ */
+export function decidersInput(
+  deciders: readonly RestPerson[],
+  me: RestPerson | undefined,
+): Pick<RestDecisionInput, "deciderId" | "deciderIds"> {
+  const ids = deciders.map((person) => person.id);
+  if (ids.length === 0 || (ids.length === 1 && ids[0] === me?.id)) {
+    return {};
+  }
+  const first = ids[0] ?? "";
+  return ids.length === 1 ? { deciderId: first } : { deciderId: first, deciderIds: ids };
+}
+
 /** The people of the project found by the words typed, a page at a time, as a picker searches. */
 export function peopleSearch(people: readonly RestPerson[]): PickerSearch<RestPerson> {
   return async (query, page) => {
@@ -58,21 +81,73 @@ export function DecisionForm(props: DecisionFormProps) {
   const [body, setBody] = useState("");
   const [about, setAbout] = useState<RestTask | undefined>(undefined);
   const [options, setOptions] = useState<readonly string[]>(["", ""]);
-  const [decider, setDecider] = useState<RestPerson | undefined>(props.me);
-  const findDeciders = useMemo(() => peopleSearch(props.deciders ?? []), [props.deciders]);
+  // Whom it is for (ADR-0042, ADR-0057): the raiser, until others are named in their place.
+  const [deciders, setDeciders] = useState<readonly RestPerson[]>(
+    props.me === undefined ? [] : [props.me],
+  );
+  const [files, setFiles] = useState<readonly File[]>([]);
+  const findDeciders = useMemo(
+    () =>
+      peopleSearch(
+        (props.deciders ?? []).filter(
+          (person) => !deciders.some((chosen) => chosen.id === person.id),
+        ),
+      ),
+    [props.deciders, deciders],
+  );
 
   const labels = options.map((option) => option.trim()).filter((option) => option.length > 0);
   const ready = question.trim().length > 0 && labels.length >= MIN_OPTIONS;
 
+  const add = (chosen: readonly File[]): File[] => {
+    const added: File[] = [];
+    let held = files;
+    for (const file of chosen) {
+      if (held.length >= MAX_FILES_PER_DECISION) {
+        break;
+      }
+      const name = unusedName(
+        file.name,
+        held.map((kept) => kept.name),
+      );
+      const kept = name === file.name ? file : new File([file], name, { type: file.type });
+      held = [...held, kept];
+      added.push(kept);
+    }
+    setFiles(held);
+    return added;
+  };
+
+  // A picture pasted into the context goes with the decision, placed where pictures are read.
+  const paste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
+    const pasted = [...event.clipboardData.files].filter((file) => isPicture(file.type));
+    if (pasted.length === 0) {
+      return;
+    }
+    event.preventDefault();
+    const added = add(pasted);
+    if (added.length > 0) {
+      setBody((current) =>
+        placing(
+          current,
+          added.map((file) => file.name),
+        ),
+      );
+    }
+  };
+
   const submit = (event: FormEvent) => {
     event.preventDefault();
-    props.onSubmit({
-      question: question.trim(),
-      body,
-      options: labels.map((label) => ({ label })),
-      taskId: props.taskId ?? about?.id ?? null,
-      ...(decider === undefined || decider.id === props.me?.id ? {} : { deciderId: decider.id }),
-    });
+    props.onSubmit(
+      {
+        question: question.trim(),
+        body,
+        options: labels.map((label) => ({ label })),
+        taskId: props.taskId ?? about?.id ?? null,
+        ...decidersInput(deciders, props.me),
+      },
+      files,
+    );
   };
 
   return (
@@ -96,8 +171,43 @@ export function DecisionForm(props: DecisionFormProps) {
           rows={4}
           placeholder={form.contextPlaceholder}
           onChange={(event) => setBody(event.target.value)}
+          onPaste={paste}
         />
       </label>
+      <div className="sc-field">
+        <span className="sc-field-label">{form.files}</span>
+        {files.length > 0 && (
+          <ul className="sc-chosen-files" aria-label={form.files}>
+            {files.map((file) => (
+              <li key={file.name} className="sc-chosen-file">
+                <span>{file.name}</span> <span className="sc-muted">{formatBytes(file.size)}</span>{" "}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  aria-label={form.removeFile(file.name)}
+                  onClick={() => setFiles((current) => current.filter((held) => held !== file))}
+                >
+                  ×
+                </Button>
+              </li>
+            ))}
+          </ul>
+        )}
+        <label className="sc-button sc-button-ghost sc-button-sm sc-file-choice">
+          {form.chooseFiles}
+          <input
+            className="sc-file-input"
+            type="file"
+            multiple
+            disabled={props.busy === true || files.length >= MAX_FILES_PER_DECISION}
+            onChange={(event) => {
+              add([...(event.target.files ?? [])]);
+              event.target.value = "";
+            }}
+          />
+        </label>
+        <p className="sc-field-hint">{form.filesHint}</p>
+      </div>
       {props.taskId === undefined && props.findTasks !== undefined && (
         <div className="sc-field">
           <span className="sc-field-label">{form.about}</span>
@@ -114,24 +224,51 @@ export function DecisionForm(props: DecisionFormProps) {
         </div>
       )}
       {props.deciders !== undefined && (
-        <div className="sc-field">
-          <span className="sc-field-label">{form.decider}</span>
-          <Picker
-            value={decider}
-            search={findDeciders}
-            keyOf={(person) => person.id}
-            render={(person) => (
-              <>
-                <PersonChip person={person} size="sm" />
+        <fieldset className="sc-field sc-workers-field">
+          <legend className="sc-field-label">{form.decider}</legend>
+          <div className="sc-chips">
+            {deciders.map((person) => (
+              <span key={person.id} className="sc-chip">
+                <PersonChip person={person} />
                 {person.id === props.me?.id && <span className="sc-muted"> {form.me}</span>}
-              </>
+                <button
+                  type="button"
+                  className="sc-chip-remove"
+                  aria-label={`${words.common.remove}: ${personName(person)}`}
+                  disabled={props.busy}
+                  onClick={() =>
+                    setDeciders((current) => current.filter((chosen) => chosen.id !== person.id))
+                  }
+                >
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </span>
+            ))}
+            {deciders.length === 0 && <span className="sc-muted">{form.deciderPlaceholder}</span>}
+            {deciders.length < MAX_DECIDERS && (
+              <Picker
+                value={undefined}
+                search={findDeciders}
+                keyOf={(person) => person.id}
+                render={(person) => (
+                  <>
+                    <PersonChip person={person} size="sm" />
+                    {person.id === props.me?.id && <span className="sc-muted"> {form.me}</span>}
+                  </>
+                )}
+                label={form.addDecider}
+                placeholder={form.addDecider}
+                disabled={props.busy}
+                onChange={(person) => {
+                  if (person !== undefined) {
+                    setDeciders((current) => [...current, person]);
+                  }
+                }}
+              />
             )}
-            label={form.decider}
-            placeholder={form.deciderPlaceholder}
-            disabled={props.busy}
-            onChange={(person) => setDecider(person ?? props.me)}
-          />
-        </div>
+          </div>
+          {deciders.length > 1 && <p className="sc-field-hint">{form.decidersHint}</p>}
+        </fieldset>
       )}
       <fieldset className="sc-field sc-options">
         <legend className="sc-field-label">{form.options}</legend>

package/src/components/decision-list.tsx

@@ -6,13 +6,17 @@ import {
   MAX_OPTION_LABEL_LENGTH,
   type RestAnswerInput,
   type RestDecision,
+  type RestDecisionFile,
   type RestDecisionPatch,
+  type RestPerson,
   type RestTask,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
+import { isPicture, namedFile, placed } from "./files.js";
 import { Markdown } from "./markdown.js";
 import { Pager, pageOf, RECORD_PAGE_SIZE } from "./paged.js";
-import { Badge, Button, cx, PersonChip, personName, Time } from "./ui.js";
+import { Lightbox, PictureThumb, usePicture } from "./pictures.js";
+import { Badge, Button, cx, formatBytes, PersonChip, personName, Time } from "./ui.js";
 
 // The decisions: the ones that wait, each a card with the way to answer it, since they are what
 // a person came for; and the ones answered, the record, a row each, since they are read back
@@ -31,6 +35,8 @@ export interface DecisionCardProps {
   readonly href?: string | undefined;
   /** The project the decision is in, named where a page shows the decisions of several. */
   readonly project?: React.ReactNode;
+  /** Where a file put on the decision is read, by its id (ADR-0055); left out, the files are named and not linked. */
+  readonly fileHref?: ((fileId: string) => string) | undefined;
   /** Called with the person's answer. Left out, a waiting decision cannot be answered here. */
   readonly onAnswer?: ((decision: RestDecision, input: RestAnswerInput) => void) | undefined;
   /** Called to grow the record, with what followed. Left out, it cannot be written here. */
@@ -38,13 +44,34 @@ export interface DecisionCardProps {
   readonly busy?: boolean | undefined;
 }
 
+/** The word beside who answered: through their agent, when the answer came that way (ADR-0056). */
+function answeredWord(words: ReturnType<typeof useWords>, agent: string | null | undefined) {
+  return agent === null || agent === undefined
+    ? words.decisions.answeredBy
+    : words.decisions.answeredThrough(agentLabel(agent));
+}
+
+/** Everyone a decision is addressed to (ADR-0057): `deciders` where the console answers it, else the one decider. */
+export function decidersOf(decision: RestDecision): readonly RestPerson[] {
+  return decision.deciders !== undefined && decision.deciders.length > 0
+    ? decision.deciders
+    : [decision.decider];
+}
+
+/** The names of everyone a decision is addressed to, one after another. */
+export function deciderNames(decision: RestDecision): string {
+  return decidersOf(decision).map(personName).join(", ");
+}
+
 /**
  * Who asked, and when: the person, through their agent when a run asked; and whom the decision
- * is for, where that is someone else (ADR-0042).
+ * is for, where that is not the asker alone (ADR-0042, ADR-0057).
  */
 function Asked(props: { readonly decision: RestDecision; readonly day?: boolean }) {
   const words = useWords();
   const { decision } = props;
+  const deciders = decidersOf(decision);
+  const addressed = deciders.some((person) => person.id !== decision.raisedBy.id);
   return (
     <>
       <PersonChip person={decision.raisedBy} />{" "}
@@ -52,18 +79,17 @@ function Asked(props: { readonly decision: RestDecision; readonly day?: boolean
         ? words.decisions.asked
         : words.decisions.askedThrough(agentLabel(decision.run.agent))}{" "}
       <Time iso={decision.createdAt} precision={props.day === true ? "day" : "minute"} />
-      {decision.decider.id !== decision.raisedBy.id && (
+      {addressed && (
         <span className="sc-decision-for">
           <span className="sc-visually-hidden">
-            {words.decisions.peopleLabel(
-              personName(decision.raisedBy),
-              personName(decision.decider),
-            )}
+            {words.decisions.peopleLabel(personName(decision.raisedBy), deciderNames(decision))}
           </span>
           <span className="sc-decision-arrow" aria-hidden="true">
             →
           </span>{" "}
-          <PersonChip person={decision.decider} />
+          {deciders.map((person) => (
+            <PersonChip key={person.id} person={person} />
+          ))}
         </span>
       )}
     </>
@@ -228,7 +254,20 @@ function Outcome(props: {
           {decision.outcome === null ? (
             <p className="sc-muted">{words.decisions.nothingWritten}</p>
           ) : (
-            <Markdown source={decision.outcome} docHref={props.docHref} />
+            <>
+              <Markdown source={decision.outcome} docHref={props.docHref} />
+              {decision.outcomeBy != null && decision.outcomeAt != null && (
+                <p className="sc-decision-meta">
+                  <PersonChip person={decision.outcomeBy} />{" "}
+                  {decision.outcomeAgent == null
+                    ? words.decisions.wroteWhatFollowed
+                    : words.decisions.wroteWhatFollowedThrough(
+                        agentLabel(decision.outcomeAgent),
+                      )}{" "}
+                  <Time iso={decision.outcomeAt} />
+                </p>
+              )}
+            </>
           )}
           {props.onUpdate !== undefined && (
             <Button
@@ -255,6 +294,20 @@ export function DecisionCard(props: DecisionCardProps) {
   const words = useWords();
   const { decision, task } = props;
   const answered = decision.answer !== null;
+  // The files put on the decision (ADR-0055): a picture the context names by its file name is
+  // shown where the text puts it; the rest follow the context, pictures in place and
+  // everything else as a link.
+  const files = decision.files ?? [];
+  const pictures = usePicture();
+  const hrefOf = (file: RestDecisionFile) => props.fileHref?.(file.id);
+  const named = (source: string): string | undefined => {
+    const name = namedFile(source);
+    const file = files.find(
+      (candidate) => candidate.file.name === name && isPicture(candidate.file.contentType),
+    );
+    return file === undefined ? undefined : hrefOf(file);
+  };
+  const following = files.filter((file) => !placed(decision.body, file.file.name));
 
   return (
     <article id={decision.id} className={cx("sc-decision", answered && "sc-decision-answered")}>
@@ -289,7 +342,53 @@ export function DecisionCard(props: DecisionCardProps) {
       {decision.body.length > 0 && (
         <section className="sc-decision-section" aria-label={words.decisions.context}>
           <h4 className="sc-decision-label">{words.decisions.context}</h4>
-          <Markdown source={decision.body} docHref={props.docHref} />
+          <Markdown
+            source={decision.body}
+            docHref={props.docHref}
+            fileSrc={named}
+            onOpenPicture={pictures.open}
+          />
+        </section>
+      )}
+      {following.length > 0 && (
+        <section className="sc-decision-section" aria-label={words.decisions.files}>
+          <h4 className="sc-decision-label">{words.decisions.files}</h4>
+          <ul className="sc-decision-files">
+            {following.map((attached) => {
+              const href = hrefOf(attached);
+              const { file } = attached;
+              if (href !== undefined && isPicture(file.contentType)) {
+                return (
+                  <li key={attached.id} className="sc-decision-picture">
+                    <PictureThumb
+                      picture={{
+                        src: href,
+                        alt: words.decisions.picture(file.name),
+                        name: file.name,
+                        size: file.size,
+                      }}
+                      onOpen={pictures.open}
+                    />
+                    <span className="sc-muted">
+                      {file.name}, {formatBytes(file.size)}
+                    </span>
+                  </li>
+                );
+              }
+              return (
+                <li key={attached.id}>
+                  {href === undefined ? (
+                    <span>{file.name}</span>
+                  ) : (
+                    <a href={href} rel="nofollow ugc">
+                      {file.name}
+                    </a>
+                  )}{" "}
+                  <span className="sc-muted">{formatBytes(file.size)}</span>
+                </li>
+              );
+            })}
+          </ul>
         </section>
       )}
       {decision.answer !== null ? (
@@ -303,14 +402,12 @@ export function DecisionCard(props: DecisionCardProps) {
             </div>
           )}
           <p className="sc-decision-meta">
-            <PersonChip person={decision.answer.by} /> {words.decisions.answeredBy}{" "}
+            <PersonChip person={decision.answer.by} /> {answeredWord(words, decision.answer.agent)}{" "}
             <Time iso={decision.answer.at} />
           </p>
         </div>
       ) : props.onAnswer === undefined ? (
-        <p className="sc-decision-waiting">
-          {words.decisions.waitingFor(personName(decision.decider))}
-        </p>
+        <p className="sc-decision-waiting">{words.decisions.waitingFor(deciderNames(decision))}</p>
       ) : (
         <AnswerForm decision={decision} onAnswer={props.onAnswer} busy={props.busy} />
       )}
@@ -322,6 +419,7 @@ export function DecisionCard(props: DecisionCardProps) {
           busy={props.busy}
         />
       )}
+      <Lightbox picture={pictures.shown} onClose={pictures.close} />
     </article>
   );
 }
@@ -332,6 +430,8 @@ export interface DecisionListProps {
   readonly tasks: ReadonlyMap<string, RestTask>;
   readonly taskHref?: ((task: RestTask) => string) | undefined;
   readonly docHref?: ((path: string) => string) | undefined;
+  /** Where a file put on a decision is read, by its id (ADR-0055). */
+  readonly fileHref?: ((fileId: string) => string) | undefined;
   /** Where each decision's own page is. */
   readonly decisionHref?: ((decision: RestDecision) => string) | undefined;
   /** The page of the record shown, from 1, and where each page is (ADR-0010); left out, the record turns its pages in place. */
@@ -406,7 +506,7 @@ function RecordRow(props: {
             </div>
           )}
           <p className="sc-decision-record-meta">
-            <PersonChip person={answer.by} /> {words.decisions.answeredBy}{" "}
+            <PersonChip person={answer.by} /> {answeredWord(words, answer.agent)}{" "}
             <Time iso={answer.at} precision="day" />
           </p>
         </div>
@@ -465,6 +565,7 @@ export function DecisionList(props: DecisionListProps) {
       task={decision.taskId === null ? undefined : props.tasks.get(decision.taskId)}
       taskHref={props.taskHref}
       docHref={props.docHref}
+      fileHref={props.fileHref}
       href={props.decisionHref?.(decision)}
       onAnswer={props.onAnswer}
       onUpdate={props.onUpdate}

package/src/components/event-feed.tsx

@@ -63,6 +63,10 @@ function sentenceOf(event: RestEvent, words: Messages): string {
       return feed.event.personDeactivated(login);
     case "person.reactivated":
       return feed.event.personReactivated(login);
+    case "person.manager_changed":
+      return data.manager === null || data.manager === undefined
+        ? feed.event.managerCleared(login)
+        : feed.event.managerChanged(login, data.manager);
     case "workspace.updated":
       return feed.event.workspaceUpdated(fields);
     case "project.created":
@@ -136,7 +140,9 @@ function sentenceOf(event: RestEvent, words: Messages): string {
     case "plugin.disabled":
       return feed.event.pluginDisabled(plugin);
     case "plugin.configured":
-      return feed.event.pluginConfigured(fields, plugin);
+      return data.capabilities === undefined
+        ? feed.event.pluginConfigured(fields, plugin)
+        : feed.event.pluginConsented(plugin);
     case "plugin.granted":
       return feed.event.pluginGranted(data.role ?? feed.role.other, grantee, plugin);
     case "plugin.revoked":

package/src/components/goals.tsx

@@ -1,5 +1,6 @@
 import { type FormEvent, type ReactNode, useState } from "react";
 import {
+  agentLabel,
   GOAL_STATES,
   type GoalState,
   MAX_BODY_LENGTH,
@@ -355,7 +356,9 @@ export function GoalView(props: GoalViewProps) {
           <div>
             <dt>{roadmap.setBy}</dt>
             <dd>
-              <PersonChip person={goal.createdBy} /> <Time iso={goal.createdAt} />
+              <PersonChip person={goal.createdBy} />{" "}
+              {goal.agent != null && <>{roadmap.setThrough(agentLabel(goal.agent))} </>}
+              <Time iso={goal.createdAt} />
             </dd>
           </div>
           {props.editHref !== undefined && (