@skillcdn/console 0.3.1 → 0.4.0

package/src/components/decision-list.tsx

@@ -12,7 +12,7 @@ import {
 import { useWords } from "../i18n/index.js";
 import { Markdown } from "./markdown.js";
 import { Pager, pageOf, RECORD_PAGE_SIZE } from "./paged.js";
-import { Badge, Button, cx, PersonChip, Time } from "./ui.js";
+import { Badge, Button, cx, 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
@@ -29,6 +29,8 @@ export interface DecisionCardProps {
   readonly docHref?: ((path: string) => string) | undefined;
   /** Where the decision's own page is; given, the question leads to it. */
   readonly href?: string | undefined;
+  /** The project the decision is in, named where a page shows the decisions of several. */
+  readonly project?: React.ReactNode;
   /** 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. */
@@ -36,7 +38,10 @@ export interface DecisionCardProps {
   readonly busy?: boolean | undefined;
 }
 
-/** Who asked, and when: the person, through their agent when a run asked. */
+/**
+ * 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).
+ */
 function Asked(props: { readonly decision: RestDecision; readonly day?: boolean }) {
   const words = useWords();
   const { decision } = props;
@@ -47,6 +52,20 @@ 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 && (
+        <span className="sc-decision-for">
+          <span className="sc-visually-hidden">
+            {words.decisions.peopleLabel(
+              personName(decision.raisedBy),
+              personName(decision.decider),
+            )}
+          </span>
+          <span className="sc-decision-arrow" aria-hidden="true">
+            →
+          </span>{" "}
+          <PersonChip person={decision.decider} />
+        </span>
+      )}
     </>
   );
 }
@@ -264,6 +283,7 @@ export function DecisionCard(props: DecisionCardProps) {
               )}
             </>
           )}
+          {props.project}
         </p>
       </header>
       {decision.body.length > 0 && (
@@ -288,7 +308,9 @@ export function DecisionCard(props: DecisionCardProps) {
           </p>
         </div>
       ) : props.onAnswer === undefined ? (
-        <p className="sc-decision-waiting">{words.decisions.waitingForPerson}</p>
+        <p className="sc-decision-waiting">
+          {words.decisions.waitingFor(personName(decision.decider))}
+        </p>
       ) : (
         <AnswerForm decision={decision} onAnswer={props.onAnswer} busy={props.busy} />
       )}
@@ -334,6 +356,8 @@ export interface DecisionLogProps {
   readonly page?: number | undefined;
   /** Where each page of the record is, so that a page has an address; left out, the pages turn in place. */
   readonly pageHref?: ((page: number) => string) | undefined;
+  /** The project a decision is in, named where the record holds the decisions of several. */
+  readonly projectOf?: ((decision: RestDecision) => React.ReactNode) | undefined;
 }
 
 /** One row of the record: what was asked, by whom and when; what was answered, with the word given, by whom and when. */
@@ -343,6 +367,7 @@ function RecordRow(props: {
   readonly taskHref: ((task: RestTask) => string) | undefined;
   readonly href: string | undefined;
   readonly docHref: ((path: string) => string) | undefined;
+  readonly project?: React.ReactNode;
 }) {
   const words = useWords();
   const { decision, task } = props;
@@ -367,6 +392,7 @@ function RecordRow(props: {
         </p>
         <p className="sc-decision-record-meta">
           <Asked decision={decision} day />
+          {props.project}
         </p>
       </div>
       {answer !== null && (
@@ -412,6 +438,7 @@ export function DecisionLog(props: DecisionLogProps) {
             taskHref={props.taskHref}
             href={props.decisionHref?.(decision)}
             docHref={props.docHref}
+            project={props.projectOf?.(decision)}
           />
         ))}
       </ol>

package/src/components/documents.tsx

@@ -440,12 +440,21 @@ export function DocumentFiles(props: DocumentFilesProps) {
             }
           }}
         >
-          <input
-            className="sc-input"
-            type="file"
-            aria-label={words.fileToAttach}
-            onChange={(event) => setChosen(event.target.files?.[0] ?? undefined)}
-          />
+          <div className="sc-doc-attach-file">
+            <label className="sc-button sc-button-secondary sc-file-choice">
+              {words.chooseFile}
+              <input
+                key={chosen === undefined ? "none" : "some"}
+                className="sc-file-input"
+                type="file"
+                aria-label={words.fileToAttach}
+                onChange={(event) => setChosen(event.target.files?.[0] ?? undefined)}
+              />
+            </label>
+            <span className={cx("sc-doc-attach-chosen", chosen === undefined && "sc-muted")}>
+              {chosen === undefined ? words.noFileChosen : chosen.name}
+            </span>
+          </div>
           <input
             className="sc-input"
             placeholder={words.labelPlaceholder}
@@ -453,7 +462,11 @@ export function DocumentFiles(props: DocumentFilesProps) {
             value={label}
             onChange={(event) => setLabel(event.target.value)}
           />
-          <Button type="submit" size="sm" disabled={chosen === undefined || props.busy === true}>
+          <Button
+            type="submit"
+            variant="primary"
+            disabled={chosen === undefined || props.busy === true}
+          >
             {words.attach}
           </Button>
         </form>
@@ -555,7 +568,7 @@ export function DocumentView(props: DocumentViewProps) {
               </dd>
             </div>
             <div>
-              <dt>{docs.writtenBy}</dt>
+              <dt>{docs.author}</dt>
               <dd>
                 <Writer by={shown.author} agent={shown.agent} /> <Time iso={shown.createdAt} />
               </dd>
@@ -641,9 +654,12 @@ export function DocumentView(props: DocumentViewProps) {
                       >
                         {docs.version(entry.number)}
                       </a>
-                    )}{" "}
-                    {entry.title} · <Writer by={entry.author} agent={entry.agent} />{" "}
-                    <Time iso={entry.createdAt} />
+                    )}
+                    <span className="sc-version-title">{entry.title}</span>
+                    <span className="sc-version-meta">
+                      <Writer by={entry.author} agent={entry.agent} />{" "}
+                      <Time iso={entry.createdAt} />
+                    </span>
                   </li>
                 ))}
               </ol>

package/src/components/event-feed.tsx

@@ -1,9 +1,10 @@
 import type { ReactNode } from "react";
 import { agentLabel, type RestEvent } from "../api.js";
+import { dayOf } from "../dates.js";
 import { en, type Messages } from "../i18n/en.js";
-import { useWords } from "../i18n/index.js";
+import { useLanguage, useWords } from "../i18n/index.js";
 import { ShowMore, usePaged } from "./paged.js";
-import { PersonChip, Time } from "./ui.js";
+import { formatInstant, PersonChip } from "./ui.js";
 
 // The feed: one line per event, newest first, as a sentence a person reads at a glance: who,
 // as which agent when through one, and what. It takes its data as props and nothing from the
@@ -103,7 +104,9 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
         ? feed.event.runFinished(task)
         : data.status === "failed"
           ? feed.event.runFailed(task)
-          : feed.event.runAbandoned(task);
+          : data.reason === "unheard"
+            ? feed.event.runUnheard(task, data.agent ?? feed.someone)
+            : feed.event.runAbandoned(task);
     case "document.written":
       return feed.event.documentWritten(page, data.version);
     case "document.archived":
@@ -123,8 +126,65 @@ export interface EventFeedProps {
   readonly empty?: ReactNode;
 }
 
+/** The day an event fell on, by this machine's clock, as the calendar spells a day. */
+function dayOfEvent(event: RestEvent): string {
+  const date = new Date(event.createdAt);
+  return Number.isNaN(date.getTime()) ? event.createdAt : dayOf(date);
+}
+
+/** A day as the feed heads it: the weekday and the date, with the year where it is not this one. */
+function formatFeedDay(day: string, language: string, now: Date = new Date()): string {
+  const date = new Date(`${day}T00:00:00`);
+  if (Number.isNaN(date.getTime())) {
+    return day;
+  }
+  return date.toLocaleDateString(language, {
+    weekday: "short",
+    month: "long",
+    day: "numeric",
+    ...(date.getFullYear() === now.getFullYear() ? {} : { year: "numeric" }),
+  });
+}
+
+/** Whether two events were done by the same person as the same agent, so the name is said once. */
+function sameHands(a: RestEvent, b: RestEvent): boolean {
+  return (a.actor?.id ?? null) === (b.actor?.id ?? null) && a.agent === b.agent;
+}
+
+/** The hour of an event, for a row whose day is in the heading above it. */
+function formatClock(iso: string, language: string): string {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime())
+    ? iso
+    : date.toLocaleTimeString(language, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
+}
+
+type FeedRun = { readonly actor: RestEvent; readonly events: RestEvent[] };
+type FeedDay = { readonly day: string; readonly runs: FeedRun[] };
+
+/** The events by the day they fell on, and within a day by runs of the same hands; newest first. */
+function groupFeed(events: readonly RestEvent[]): FeedDay[] {
+  const days: FeedDay[] = [];
+  for (const event of events) {
+    const day = dayOfEvent(event);
+    let last = days[days.length - 1];
+    if (last === undefined || last.day !== day) {
+      last = { day, runs: [] };
+      days.push(last);
+    }
+    const run = last.runs[last.runs.length - 1];
+    if (run !== undefined && sameHands(run.actor, event)) {
+      run.events.push(event);
+    } else {
+      last.runs.push({ actor: event, events: [event] });
+    }
+  }
+  return days;
+}
+
 export function EventFeed(props: EventFeedProps) {
   const words = useWords();
+  const { tag } = useLanguage();
   const newestFirst = [...props.events].reverse();
   const { shown, rest, more } = usePaged(newestFirst);
   if (props.events.length === 0) {
@@ -132,37 +192,60 @@ export function EventFeed(props: EventFeedProps) {
   }
   return (
     <>
-      <ol className="sc-feed" aria-label={words.feed.list}>
-        {shown.map((event) => {
-          const href = props.href?.(event);
-          const said = describeEvent(event, words);
-          return (
-            <li key={event.id} className="sc-feed-item">
-              <span className="sc-feed-actor">
-                {event.actor === null ? (
-                  <span className="sc-person-login">{words.feed.console}</span>
-                ) : (
-                  <PersonChip person={event.actor} />
-                )}
-                {event.agent !== null && (
-                  <span
-                    className="sc-feed-agent"
-                    title={
-                      agentLabel(event.agent) === event.agent ? words.feed.asTitle : event.agent
-                    }
-                  >
-                    {words.feed.as(agentLabel(event.agent))}
+      <section className="sc-feed" aria-label={words.feed.list}>
+        {groupFeed(shown).map((group) => (
+          <section key={group.day} className="sc-feed-day">
+            <h3 className="sc-feed-day-title">
+              <time dateTime={group.day}>{formatFeedDay(group.day, tag)}</time>
+            </h3>
+            <ol className="sc-feed-day-list">
+              {group.runs.map((run) => (
+                <li key={run.actor.id} className="sc-feed-run">
+                  <span className="sc-feed-actor">
+                    {run.actor.actor === null ? (
+                      <span className="sc-person-login">{words.feed.console}</span>
+                    ) : (
+                      <PersonChip person={run.actor.actor} />
+                    )}
+                    {run.actor.agent !== null && (
+                      <span
+                        className="sc-feed-agent"
+                        title={
+                          agentLabel(run.actor.agent) === run.actor.agent
+                            ? words.feed.asTitle
+                            : run.actor.agent
+                        }
+                      >
+                        {words.feed.as(agentLabel(run.actor.agent))}
+                      </span>
+                    )}
                   </span>
-                )}
-              </span>
-              <span className="sc-feed-words">
-                {href === undefined ? said : <a href={href}>{said}</a>}
-              </span>
-              <Time iso={event.createdAt} />
-            </li>
-          );
-        })}
-      </ol>
+                  <ol className="sc-feed-run-list">
+                    {run.events.map((event) => {
+                      const href = props.href?.(event);
+                      const said = describeEvent(event, words);
+                      return (
+                        <li key={event.id} className="sc-feed-item">
+                          <time
+                            className="sc-time sc-feed-clock"
+                            dateTime={event.createdAt}
+                            title={formatInstant(event.createdAt, tag)}
+                          >
+                            {formatClock(event.createdAt, tag)}
+                          </time>
+                          <span className="sc-feed-words">
+                            {href === undefined ? said : <a href={href}>{said}</a>}
+                          </span>
+                        </li>
+                      );
+                    })}
+                  </ol>
+                </li>
+              ))}
+            </ol>
+          </section>
+        ))}
+      </section>
       <ShowMore rest={rest} onMore={more} />
     </>
   );

package/src/components/my-decisions.tsx

@@ -0,0 +1,138 @@
+import type { ReactNode } from "react";
+import type { RestAnswerInput, RestDecision, RestMyDecisions } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { DecisionCard, DecisionLog } from "./decision-list.js";
+import { ProjectMark } from "./projects.js";
+import { Button } from "./ui.js";
+
+// A person's decisions (ADR-0042), across the projects they may see, laid out as a project's
+// decisions page is: in the first column the decisions that wait for their answer, as cards
+// answered here, and under them the decisions they asked of someone else, as cards that say
+// whom they wait for; in the second the record, the answered ones of both kinds, newest first.
+// Every card and row names the project, and who asked and who answers, as the cards do
+// everywhere. Takes its data as props and nothing from the network; the page reads more when
+// asked.
+
+/** One kind of a person's decisions, a page at a time. */
+export interface DecisionsPage {
+  readonly items: RestMyDecisions["items"];
+  /** Whether there is more after what is shown; `onMore` reads it. */
+  readonly more?: boolean | undefined;
+  readonly onMore?: (() => void) | undefined;
+}
+
+export interface MyDecisionsProps {
+  /** The decisions addressed to the person: waiting and answered. */
+  readonly addressed: DecisionsPage;
+  /** The decisions the person asked of someone else: waiting and answered. */
+  readonly raised: DecisionsPage;
+  readonly decisionHref: (projectKey: string, decisionId: string) => string;
+  /** Called with the person's answer on a decision of theirs, in its project. Left out, a waiting decision is answered on its own page. */
+  readonly onAnswer?:
+    | ((projectKey: string, decision: RestDecision, input: RestAnswerInput) => void)
+    | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+type Item = RestMyDecisions["items"][number];
+
+/** The project a decision is in, as the plate names one. */
+function InProject(props: { readonly project: Item["project"] }) {
+  const words = useWords();
+  return (
+    <span className="sc-task-row-project">
+      <ProjectMark project={props.project} size="sm" /> {words.work.inProject(props.project.name)}
+    </span>
+  );
+}
+
+function More(props: {
+  readonly page: DecisionsPage;
+  readonly label: string;
+  readonly busy?: boolean | undefined;
+}) {
+  const { page } = props;
+  if (page.more !== true || page.onMore === undefined) {
+    return null;
+  }
+  return (
+    <div className="sc-paged-more">
+      <Button variant="secondary" size="sm" disabled={props.busy} onClick={page.onMore}>
+        {props.label}
+      </Button>
+    </div>
+  );
+}
+
+export function MyDecisions(props: MyDecisionsProps) {
+  const words = useWords();
+  const own = words.myDecisions;
+  const { onAnswer } = props;
+  const waiting = props.addressed.items.filter(({ decision }) => decision.answer === null);
+  const asked = props.raised.items.filter(({ decision }) => decision.answer === null);
+  const record = [...props.addressed.items, ...props.raised.items]
+    .filter(({ decision }) => decision.answer !== null)
+    .sort((a, b) => (b.decision.answer?.at ?? "").localeCompare(a.decision.answer?.at ?? ""));
+  const projectOf = new Map(record.map((item) => [item.decision.id, item.project]));
+  const card = (item: Item, answerable: boolean): ReactNode => (
+    <DecisionCard
+      key={item.decision.id}
+      decision={item.decision}
+      href={props.decisionHref(item.project.key, item.decision.id)}
+      project={<InProject project={item.project} />}
+      onAnswer={
+        answerable && onAnswer !== undefined
+          ? (decision, input) => onAnswer(item.project.key, decision, input)
+          : undefined
+      }
+      busy={props.busy}
+    />
+  );
+  return (
+    <div className="sc-decisions">
+      <div className="sc-decisions-waiting">
+        <section aria-label={own.waiting}>
+          <h2 className="sc-section-title">
+            {own.waiting} <span className="sc-column-count">{waiting.length}</span>
+          </h2>
+          {waiting.length === 0 ? (
+            <p className="sc-muted">{own.noneWaiting}</p>
+          ) : (
+            waiting.map((item) => card(item, true))
+          )}
+          <More page={props.addressed} label={own.more} busy={props.busy} />
+        </section>
+        <section aria-label={own.raised}>
+          <h2 className="sc-section-title">
+            {own.raised} <span className="sc-column-count">{asked.length}</span>
+          </h2>
+          {asked.length === 0 ? (
+            <p className="sc-muted">{own.noneRaised}</p>
+          ) : (
+            asked.map((item) => card(item, false))
+          )}
+          <More page={props.raised} label={own.more} busy={props.busy} />
+        </section>
+      </div>
+      <section aria-label={words.decisions.record}>
+        <h2 className="sc-section-title">
+          {words.decisions.record} <span className="sc-column-count">{record.length}</span>
+        </h2>
+        {record.length === 0 ? (
+          <p className="sc-muted">{own.noneAnswered}</p>
+        ) : (
+          <DecisionLog
+            decisions={record.map((item) => item.decision)}
+            decisionHref={(decision) =>
+              props.decisionHref(projectOf.get(decision.id)?.key ?? "", decision.id)
+            }
+            projectOf={(decision) => {
+              const project = projectOf.get(decision.id);
+              return project === undefined ? undefined : <InProject project={project} />;
+            }}
+          />
+        )}
+      </section>
+    </div>
+  );
+}

package/src/components/people.tsx

@@ -75,9 +75,11 @@ export function PeopleList(props: PeopleListProps) {
         {active.map((person) => (
           <li key={person.id} className="sc-person-row">
             <PersonChip person={person} size="md" />
+            {props.me?.id === person.id && (
+              <span className="sc-person-you">{words.common.you}</span>
+            )}
             <span className="sc-person-name sc-muted">
               {person.name === null ? "" : person.login}
-              {props.me?.id === person.id && <span> {words.common.you}</span>}
               <span className="sc-person-note"> {people.source[person.source]}</span>
             </span>
             {props.onChangeRole === undefined ? (