@skillcdn/console 0.1.24 → 0.3.0

package/src/components/decision-list.tsx

@@ -3,6 +3,7 @@ import {
   agentLabel,
   MAX_BODY_LENGTH,
   MAX_NOTE_LENGTH,
+  MAX_OPTION_LABEL_LENGTH,
   type RestAnswerInput,
   type RestDecision,
   type RestDecisionPatch,
@@ -10,8 +11,8 @@ import {
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { Markdown } from "./markdown.js";
-import { ShowMore, usePaged } from "./paged.js";
-import { Button, cx, PersonChip, Time } from "./ui.js";
+import { Pager, pageOf, RECORD_PAGE_SIZE } from "./paged.js";
+import { Badge, Button, cx, PersonChip, 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
@@ -35,6 +36,131 @@ export interface DecisionCardProps {
   readonly busy?: boolean | undefined;
 }
 
+/** Who asked, and when: the person, through their agent when a run asked. */
+function Asked(props: { readonly decision: RestDecision; readonly day?: boolean }) {
+  const words = useWords();
+  const { decision } = props;
+  return (
+    <>
+      <PersonChip person={decision.raisedBy} />{" "}
+      {decision.run === null
+        ? words.decisions.asked
+        : words.decisions.askedThrough(agentLabel(decision.run.agent))}{" "}
+      <Time iso={decision.createdAt} precision={props.day === true ? "day" : "minute"} />
+    </>
+  );
+}
+
+/** What was chosen: the option's label, marked when it is the person's own words. */
+function Chosen(props: { readonly decision: RestDecision }) {
+  const words = useWords();
+  const { decision } = props;
+  const chosen = decision.options.find((option) => option.id === decision.answer?.option);
+  return (
+    <>
+      <span>{chosen?.label ?? decision.answer?.option ?? ""}</span>
+      {chosen?.own === true && <Badge>{words.decisions.ownAnswer}</Badge>}
+    </>
+  );
+}
+
+/**
+ * The way to answer: one of the options, or a line of one's own, which is chosen by writing
+ * on it; and a word about either.
+ */
+function AnswerForm(props: {
+  readonly decision: RestDecision;
+  readonly onAnswer: (decision: RestDecision, input: RestAnswerInput) => void;
+  readonly busy: boolean | undefined;
+}) {
+  const words = useWords();
+  const { decision } = props;
+  const [chosen, setChosen] = useState<string | undefined>(undefined);
+  const [own, setOwn] = useState(false);
+  const [ownText, setOwnText] = useState("");
+  const [note, setNote] = useState("");
+  const chooseOwn = () => {
+    setOwn(true);
+    setChosen(undefined);
+  };
+  const answer: RestAnswerInput | undefined = own
+    ? ownText.trim().length > 0
+      ? { own: ownText.trim() }
+      : undefined
+    : chosen === undefined
+      ? undefined
+      : { option: chosen };
+  const name = `decision-${decision.id}`;
+  return (
+    <form
+      className="sc-answer-form"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (answer !== undefined) {
+          props.onAnswer(decision, {
+            ...answer,
+            ...(note.trim() === "" ? {} : { note: note.trim() }),
+          });
+        }
+      }}
+    >
+      <div className="sc-options-list" role="radiogroup" aria-label={words.decisions.options}>
+        {decision.options.map((option) => (
+          <label
+            key={option.id}
+            className={cx("sc-option", chosen === option.id && "sc-option-chosen")}
+          >
+            <input
+              type="radio"
+              name={name}
+              value={option.id}
+              checked={chosen === option.id}
+              onChange={() => {
+                setChosen(option.id);
+                setOwn(false);
+              }}
+            />
+            <span>{option.label}</span>
+          </label>
+        ))}
+        <label className={cx("sc-option", "sc-option-own", own && "sc-option-chosen")}>
+          <input type="radio" name={name} value="own" checked={own} onChange={chooseOwn} />
+          <span>{words.decisions.own}</span>
+          <input
+            className="sc-input"
+            aria-label={words.decisions.own}
+            placeholder={words.decisions.ownPlaceholder}
+            maxLength={MAX_OPTION_LABEL_LENGTH}
+            value={ownText}
+            onFocus={chooseOwn}
+            onChange={(event) => {
+              setOwnText(event.target.value);
+              chooseOwn();
+            }}
+          />
+        </label>
+      </div>
+      <input
+        className="sc-input"
+        placeholder={words.decisions.notePlaceholder}
+        maxLength={MAX_NOTE_LENGTH}
+        value={note}
+        onChange={(event) => setNote(event.target.value)}
+      />
+      <div className="sc-form-actions">
+        <Button
+          type="submit"
+          variant="primary"
+          size="sm"
+          disabled={answer === undefined || props.busy === true}
+        >
+          {words.decisions.answer}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
 /** What followed the decision: shown, and written or changed by whoever may. */
 function Outcome(props: {
   readonly decision: RestDecision;
@@ -109,11 +235,7 @@ function Outcome(props: {
 export function DecisionCard(props: DecisionCardProps) {
   const words = useWords();
   const { decision, task } = props;
-  const [chosen, setChosen] = useState<string | undefined>(undefined);
-  const [note, setNote] = useState("");
   const answered = decision.answer !== null;
-  const chosenLabel = (id: string) =>
-    decision.options.find((option) => option.id === id)?.label ?? id;
 
   return (
     <article id={decision.id} className={cx("sc-decision", answered && "sc-decision-answered")}>
@@ -126,11 +248,7 @@ export function DecisionCard(props: DecisionCardProps) {
           )}
         </h3>
         <p className="sc-decision-meta">
-          <PersonChip person={decision.raisedBy} />{" "}
-          {decision.run === null
-            ? words.decisions.asked
-            : words.decisions.askedThrough(agentLabel(decision.run.agent))}{" "}
-          <Time iso={decision.createdAt} />
+          <Asked decision={decision} />
           {task !== undefined && (
             <>
               {" "}
@@ -156,7 +274,9 @@ export function DecisionCard(props: DecisionCardProps) {
       )}
       {decision.answer !== null ? (
         <div className="sc-answer">
-          <p className="sc-answer-option">{chosenLabel(decision.answer.option)}</p>
+          <p className="sc-answer-option">
+            <Chosen decision={decision} />
+          </p>
           {decision.answer.note !== null && (
             <div className="sc-answer-note">
               <Markdown source={decision.answer.note} docHref={props.docHref} />
@@ -170,53 +290,7 @@ export function DecisionCard(props: DecisionCardProps) {
       ) : props.onAnswer === undefined ? (
         <p className="sc-decision-waiting">{words.decisions.waitingForPerson}</p>
       ) : (
-        <form
-          className="sc-answer-form"
-          onSubmit={(event) => {
-            event.preventDefault();
-            if (chosen !== undefined) {
-              props.onAnswer?.(decision, {
-                option: chosen,
-                ...(note.trim() === "" ? {} : { note: note.trim() }),
-              });
-            }
-          }}
-        >
-          <div className="sc-options-list" role="radiogroup" aria-label={words.decisions.options}>
-            {decision.options.map((option) => (
-              <label
-                key={option.id}
-                className={cx("sc-option", chosen === option.id && "sc-option-chosen")}
-              >
-                <input
-                  type="radio"
-                  name={`decision-${decision.id}`}
-                  value={option.id}
-                  checked={chosen === option.id}
-                  onChange={() => setChosen(option.id)}
-                />
-                <span>{option.label}</span>
-              </label>
-            ))}
-          </div>
-          <input
-            className="sc-input"
-            placeholder={words.decisions.notePlaceholder}
-            maxLength={MAX_NOTE_LENGTH}
-            value={note}
-            onChange={(event) => setNote(event.target.value)}
-          />
-          <div className="sc-form-actions">
-            <Button
-              type="submit"
-              variant="primary"
-              size="sm"
-              disabled={chosen === undefined || props.busy === true}
-            >
-              {words.decisions.answer}
-            </Button>
-          </div>
-        </form>
+        <AnswerForm decision={decision} onAnswer={props.onAnswer} busy={props.busy} />
       )}
       {answered && (
         <Outcome
@@ -238,6 +312,9 @@ export interface DecisionListProps {
   readonly docHref?: ((path: 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. */
+  readonly page?: number | undefined;
+  readonly pageHref?: ((page: number) => string) | undefined;
   readonly onAnswer?: ((decision: RestDecision, input: RestAnswerInput) => void) | undefined;
   readonly onUpdate?: ((decision: RestDecision, patch: RestDecisionPatch) => void) | undefined;
   readonly busy?: boolean | undefined;
@@ -251,48 +328,101 @@ export interface DecisionLogProps {
   readonly taskHref?: ((task: RestTask) => string) | undefined;
   /** Where each decision's own page is, with its context, its rationale and what followed. */
   readonly decisionHref?: ((decision: RestDecision) => string) | undefined;
+  /** Where a document the word given with an answer links to is read, by its path. */
+  readonly docHref?: ((path: string) => string) | undefined;
+  /** The page shown, from 1; the first when left out, the last for one past the end. Read with `pageHref`. */
+  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 record: one row per decision answered, what was asked, what was chosen, by whom, when. */
+/** One row of the record: what was asked, by whom and when; what was answered, with the word given, by whom and when. */
+function RecordRow(props: {
+  readonly decision: RestDecision;
+  readonly task: RestTask | undefined;
+  readonly taskHref: ((task: RestTask) => string) | undefined;
+  readonly href: string | undefined;
+  readonly docHref: ((path: string) => string) | undefined;
+}) {
+  const words = useWords();
+  const { decision, task } = props;
+  const { answer } = decision;
+  return (
+    <li className="sc-decision-record-row">
+      <div className="sc-decision-record-asked">
+        <p className="sc-decision-record-question">
+          {props.href === undefined ? (
+            decision.question
+          ) : (
+            <a href={props.href}>{decision.question}</a>
+          )}
+          {task !== undefined &&
+            (props.taskHref === undefined ? (
+              <span className="sc-card-number">#{task.number}</span>
+            ) : (
+              <a className="sc-card-number" href={props.taskHref(task)}>
+                #{task.number}
+              </a>
+            ))}
+        </p>
+        <p className="sc-decision-record-meta">
+          <Asked decision={decision} day />
+        </p>
+      </div>
+      {answer !== null && (
+        <div className="sc-decision-record-answer">
+          <p className="sc-decision-record-chosen">
+            <Chosen decision={decision} />
+          </p>
+          {answer.note !== null && (
+            <div className="sc-decision-record-note">
+              <Markdown source={answer.note} docHref={props.docHref} />
+            </div>
+          )}
+          <p className="sc-decision-record-meta">
+            <PersonChip person={answer.by} /> {words.decisions.answeredBy}{" "}
+            <Time iso={answer.at} precision="day" />
+          </p>
+        </div>
+      )}
+    </li>
+  );
+}
+
+/**
+ * The record: one row per decision answered, what was asked and by whom, what was chosen with
+ * the word given and by whom; twenty to a page, the page named by the address or turned here.
+ */
 export function DecisionLog(props: DecisionLogProps) {
   const words = useWords();
-  const { shown, rest, more } = usePaged(props.decisions);
+  const [turned, setTurned] = useState(1);
+  const { shown, page, pages } = pageOf(
+    props.decisions,
+    props.pageHref === undefined ? turned : props.page,
+    RECORD_PAGE_SIZE,
+  );
   return (
     <>
-      <ol className="sc-decision-log" aria-label={words.decisions.record}>
-        {shown.map((decision) => {
-          const task = decision.taskId === null ? undefined : props.tasks?.get(decision.taskId);
-          const href = props.decisionHref?.(decision);
-          const chosen =
-            decision.options.find((option) => option.id === decision.answer?.option)?.label ??
-            decision.answer?.option ??
-            "";
-          return (
-            <li key={decision.id} className="sc-decision-row">
-              <span className="sc-decision-row-question">
-                {href === undefined ? decision.question : <a href={href}>{decision.question}</a>}
-              </span>
-              <span className="sc-decision-row-answer">{chosen}</span>
-              <span className="sc-decision-row-meta">
-                {decision.answer !== null && (
-                  <>
-                    <PersonChip person={decision.answer.by} /> <Time iso={decision.answer.at} />
-                  </>
-                )}
-                {task !== undefined &&
-                  (props.taskHref === undefined ? (
-                    <span className="sc-card-number">#{task.number}</span>
-                  ) : (
-                    <a className="sc-card-number" href={props.taskHref(task)}>
-                      #{task.number}
-                    </a>
-                  ))}
-              </span>
-            </li>
-          );
-        })}
+      <ol className="sc-decision-record" aria-label={words.decisions.record}>
+        {shown.map((decision) => (
+          <RecordRow
+            key={decision.id}
+            decision={decision}
+            task={decision.taskId === null ? undefined : props.tasks?.get(decision.taskId)}
+            taskHref={props.taskHref}
+            href={props.decisionHref?.(decision)}
+            docHref={props.docHref}
+          />
+        ))}
       </ol>
-      <ShowMore rest={rest} onMore={more} />
+      <Pager
+        page={page}
+        pages={pages}
+        total={props.decisions.length}
+        pageSize={RECORD_PAGE_SIZE}
+        pageHref={props.pageHref}
+        onPage={setTurned}
+      />
     </>
   );
 }
@@ -332,6 +462,9 @@ export function DecisionList(props: DecisionListProps) {
             tasks={props.tasks}
             taskHref={props.taskHref}
             decisionHref={props.decisionHref}
+            docHref={props.docHref}
+            page={props.page}
+            pageHref={props.pageHref}
           />
         </section>
       )}

package/src/components/paged.tsx

@@ -2,13 +2,17 @@ import { useState } from "react";
 import { useWords } from "../i18n/index.js";
 import { Button } from "./ui.js";
 
-// A long list shown a page at a time, from what the page already holds: the record of the
-// decisions, the feed, the tasks with no day. The next page is a click away and nothing is
-// asked of the server; the API's own pages (`limit`, `offset`) are for the command and scripts.
+// A long list shown a page at a time, from what the page already holds: the feed and the tasks
+// with no day grow by a page on a click; the record of the decisions turns its pages, each with
+// an address. Nothing is asked of the server either way; the API's own pages (`limit`, `offset`)
+// are for the command and scripts.
 
 /** How many items a list shows before it asks to be told to show more. */
 export const PAGE_SIZE = 50;
 
+/** How many rows the record of the decisions shows on a page: each says what was asked and what was answered. */
+export const RECORD_PAGE_SIZE = 20;
+
 /** The first `shown` items of a list, and the way to show the next page of it. */
 export function usePaged<T>(
   items: readonly T[],
@@ -37,3 +41,68 @@ export function ShowMore(props: { readonly rest: number; readonly onMore: () =>
     </div>
   );
 }
+
+/**
+ * The page `page` of a list, counted from one and `pageSize` long, and which it is of how many:
+ * a page past the end, or no page at all, is the last or the first, and an empty list has one.
+ */
+export function pageOf<T>(
+  items: readonly T[],
+  page: number | undefined,
+  pageSize = RECORD_PAGE_SIZE,
+): { readonly shown: readonly T[]; readonly page: number; readonly pages: number } {
+  const pages = Math.max(1, Math.ceil(items.length / pageSize));
+  const current =
+    page === undefined || !Number.isInteger(page) ? 1 : Math.min(Math.max(page, 1), pages);
+  return {
+    shown: items.slice((current - 1) * pageSize, current * pageSize),
+    page: current,
+    pages,
+  };
+}
+
+/**
+ * The way between the pages of a list: the page before, which items of how many are shown, the
+ * page after; nothing for a list of one page. Given `pageHref`, each page has an address and the
+ * steps lead there; else `onPage` turns the page in place.
+ */
+export function Pager(props: {
+  readonly page: number;
+  readonly pages: number;
+  readonly total: number;
+  readonly pageSize: number;
+  readonly pageHref?: ((page: number) => string) | undefined;
+  readonly onPage?: ((page: number) => void) | undefined;
+}) {
+  const words = useWords().common.pager;
+  if (props.pages <= 1) {
+    return null;
+  }
+  const from = (props.page - 1) * props.pageSize + 1;
+  const to = Math.min(props.page * props.pageSize, props.total);
+  const step = (label: string, target: number, there: boolean) => {
+    if (!there) {
+      return (
+        <span className="sc-button sc-button-secondary sc-button-sm" aria-disabled="true">
+          {label}
+        </span>
+      );
+    }
+    return props.pageHref === undefined ? (
+      <Button variant="secondary" size="sm" onClick={() => props.onPage?.(target)}>
+        {label}
+      </Button>
+    ) : (
+      <a className="sc-button sc-button-secondary sc-button-sm" href={props.pageHref(target)}>
+        {label}
+      </a>
+    );
+  };
+  return (
+    <nav className="sc-pager" aria-label={words.label}>
+      {step(words.previous, props.page - 1, props.page > 1)}
+      <span className="sc-pager-range">{words.range(from, to, props.total)}</span>
+      {step(words.next, props.page + 1, props.page < props.pages)}
+    </nav>
+  );
+}

package/src/components/skills.tsx

@@ -2,9 +2,10 @@ import type { RestSkills } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { Callout, EmptyState, Spinner } from "./ui.js";
 
-// The organization's skills, as SkillCDN serves them at the console's address: where a person
-// reads each, and what an agent loads it by. Takes its data as props and nothing from the
-// network; what the console answered is shown as text, never as HTML.
+// A project's skills, as the pack lists them: at a SkillCDN deployment, where a person reads
+// each and what an agent loads it by; or from a directory on the console's machine (ADR-0031),
+// with nothing to link to. Takes its data as props and nothing from the network; what the
+// console answered is shown as text, never as HTML.
 
 export interface SkillListProps {
   /** What the console answered, or nothing while it has not yet. */
@@ -21,35 +22,48 @@ export function SkillList(props: SkillListProps) {
   if (skills.status === "unavailable" && skills.address === null) {
     return <Callout tone="warning">{words.status.unavailable}</Callout>;
   }
-  if (skills.status === "none" || skills.address === null || skills.page === null) {
+  if (skills.status === "none" || skills.address === null) {
     return <EmptyState title={words.noAddress.title} body={words.noAddress.body} />;
   }
-  const where = (
-    <>
-      <p className="sc-lead">
-        {words.servedBy}{" "}
-        <a href={skills.source} target="_blank" rel="noopener noreferrer">
-          SkillCDN
-        </a>{" "}
-        {words.at}{" "}
-        <a href={skills.page} target="_blank" rel="noopener noreferrer">
-          <code>{skills.address}</code>
-        </a>
-      </p>
-      <p className="sc-muted">
-        {words.connect}{" "}
-        <a href={skills.page} target="_blank" rel="noopener noreferrer">
-          {words.connectLink}
-        </a>
-      </p>
-    </>
-  );
+  const deployment =
+    skills.source !== null && skills.page !== null
+      ? { source: skills.source, page: skills.page }
+      : undefined;
+  const local = deployment === undefined;
+  const where =
+    deployment === undefined ? (
+      <>
+        <p className="sc-lead">
+          {words.fromMachine} <code>{skills.address}</code>
+        </p>
+        <p className="sc-muted">{words.connectLocal}</p>
+      </>
+    ) : (
+      <>
+        <p className="sc-lead">
+          {words.servedBy}{" "}
+          <a href={deployment.source} target="_blank" rel="noopener noreferrer">
+            SkillCDN
+          </a>{" "}
+          {words.at}{" "}
+          <a href={deployment.page} target="_blank" rel="noopener noreferrer">
+            <code>{skills.address}</code>
+          </a>
+        </p>
+        <p className="sc-muted">
+          {words.connect}{" "}
+          <a href={deployment.page} target="_blank" rel="noopener noreferrer">
+            {words.connectLink}
+          </a>
+        </p>
+      </>
+    );
   if (skills.status !== "ready") {
     return (
       <>
         {where}
         <Callout tone={skills.status === "indexing" ? "info" : "warning"}>
-          {words.status[skills.status]}
+          {(local ? words.localStatus[skills.status] : undefined) ?? words.status[skills.status]}
         </Callout>
       </>
     );
@@ -69,14 +83,18 @@ export function SkillList(props: SkillListProps) {
         {skills.items.map((skill) => (
           <li key={skill.path} className="sc-skill">
             <p className="sc-skill-head">
-              <a
-                className="sc-skill-name"
-                href={skill.page}
-                target="_blank"
-                rel="noopener noreferrer nofollow"
-              >
-                {skill.name}
-              </a>
+              {skill.page === null ? (
+                <span className="sc-skill-name">{skill.name}</span>
+              ) : (
+                <a
+                  className="sc-skill-name"
+                  href={skill.page}
+                  target="_blank"
+                  rel="noopener noreferrer nofollow"
+                >
+                  {skill.name}
+                </a>
+              )}
               <span className="sc-muted">{skill.directory === "" ? "/" : skill.directory}</span>
             </p>
             <p className="sc-skill-description">{skill.description}</p>

package/src/components/ui.tsx

@@ -9,7 +9,7 @@ import {
   type TaskPriority,
   type TaskState,
 } from "../api.js";
-import { daysBetween, formatDay, today } from "../dates.js";
+import { dayOf, daysBetween, formatDay, today } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
 
 // Small building blocks. Each one is a class in styles/console.css and nothing more. Classes
@@ -356,11 +356,24 @@ export function formatBytes(size: number): string {
   return `${mb < 10 ? mb.toFixed(1) : Math.round(mb)} MB`;
 }
 
-export function Time(props: { readonly iso: string }) {
+export function Time(props: {
+  readonly iso: string;
+  /** `day` shows the day alone, with the moment as the title, where a row has no room for the hour. */
+  readonly precision?: "minute" | "day";
+}) {
   const { tag } = useLanguage();
+  const full = formatInstant(props.iso, tag);
+  if (props.precision === "day") {
+    const date = new Date(props.iso);
+    return (
+      <time className="sc-time" dateTime={props.iso} title={full}>
+        {Number.isNaN(date.getTime()) ? props.iso : formatDay(dayOf(date), tag)}
+      </time>
+    );
+  }
   return (
     <time className="sc-time" dateTime={props.iso}>
-      {formatInstant(props.iso, tag)}
+      {full}
     </time>
   );
 }

package/src/console.tsx

@@ -98,6 +98,7 @@ import {
   calendarHref,
   customPageHref,
   decisionHref,
+  decisionsHref,
   docHref,
   type GoalTaskView,
   goalHref,
@@ -1112,6 +1113,8 @@ function ProjectPage(props: {
           taskHref={href}
           docHref={toDoc}
           decisionHref={(decision) => decisionHref(key, decision.id)}
+          page={route.page}
+          pageHref={(page) => decisionsHref(key, page)}
           onAnswer={onAnswer}
           onUpdate={onUpdate}
           busy={busy}