@skillcdn/console 0.1.6 → 0.1.7

package/src/components/connect.tsx

@@ -0,0 +1,126 @@
+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";
+
+// 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
+// say to their agent. Each takes its data as props and nothing from the network.
+
+export interface ConnectCodeFormProps {
+  readonly busy?: boolean | undefined;
+  /** Called with the code as it is written, once what was typed is one. */
+  readonly onSubmit: (code: string) => void;
+}
+
+/** Where a person types the code their agent showed. */
+export function ConnectCodeForm(props: ConnectCodeFormProps) {
+  const words = useWords().connect;
+  const [text, setText] = useState("");
+  const code = normalizeConnectCode(text);
+  return (
+    <form
+      className="sc-form sc-connect-code"
+      aria-label={words.codeAria}
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (code !== undefined) {
+          props.onSubmit(code);
+        }
+      }}
+    >
+      <label className="sc-field">
+        <span className="sc-field-label">{words.codeLabel}</span>
+        <input
+          className="sc-input sc-code-input"
+          value={text}
+          placeholder="ABCD-EFGH"
+          autoComplete="off"
+          spellCheck={false}
+          maxLength={12}
+          onChange={(event) => setText(event.target.value)}
+        />
+      </label>
+      <div className="sc-form-actions">
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={code === undefined || props.busy === true}
+        >
+          {words.continue}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export interface ConnectApprovalProps {
+  readonly request: RestConnectRequest;
+  /** The most days a token may be good for here, or nothing when a person chooses. */
+  readonly daysAtMost?: number | null | undefined;
+  readonly busy?: boolean | undefined;
+  readonly error?: string | undefined;
+  /** Called with what to call the agent and for how long its token is good. */
+  readonly onApprove: (input: RestTokenInput) => void;
+  /** Called when the person says the request is not theirs. */
+  readonly onDeny: () => void;
+}
+
+/** What asks to connect under a code, and the way to let it, as the person it will act as. */
+export function ConnectApproval(props: ConnectApprovalProps) {
+  const words = useWords().connect;
+  const { request } = props;
+  return (
+    <div className="sc-approval">
+      <Callout tone="warning" title={words.asks.title}>
+        <p>
+          {words.asks.callsItself} <strong>{request.agent}</strong>
+        </p>
+        <p>
+          {words.asks.showedCode} <code className="sc-code-shown">{request.code}</code>
+        </p>
+        <p>{words.asks.ifNot}</p>
+        <p>{words.asks.approvedMeans}</p>
+        <p className="sc-muted">
+          {words.asks.asked} <Time iso={request.createdAt} />; {words.asks.goodUntil}{" "}
+          <Time iso={request.expiresAt} />.
+        </p>
+      </Callout>
+      <TokenForm
+        name={request.agent}
+        daysAtMost={props.daysAtMost}
+        busy={props.busy}
+        error={props.error}
+        submitLabel={words.approve}
+        cancelLabel={words.notMine}
+        onSubmit={props.onApprove}
+        onCancel={props.onDeny}
+      />
+    </div>
+  );
+}
+
+export interface ConnectWordsProps {
+  /** The origin of the console, as a person tells their agent. */
+  readonly origin: string;
+}
+
+/** What a person says to their agent to connect it, in words for someone who is not a developer. */
+export function ConnectWords(props: ConnectWordsProps) {
+  const words = useWords().connect.words;
+  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.byHand}</p>
+      <pre className="sc-code">
+        npm install -g @skillcdn/console{"\n"}console login --url {props.origin}
+        {"\n"}console use {"<project key>"}
+      </pre>
+    </section>
+  );
+}

package/src/components/decision-form.tsx

@@ -0,0 +1,136 @@
+import { type FormEvent, useState } from "react";
+import {
+  MAX_BODY_LENGTH,
+  MAX_OPTION_LABEL_LENGTH,
+  MAX_OPTIONS,
+  MAX_QUESTION_LENGTH,
+  MIN_OPTIONS,
+  type RestDecisionInput,
+  type RestTask,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Button } from "./ui.js";
+
+// Raising a decision: the question, what a person needs to know, and the options to choose from.
+
+export interface DecisionFormProps {
+  /** The tasks the decision may be about. */
+  readonly tasks: readonly RestTask[];
+  /** The task it is about from the start, when raised from a task's page. */
+  readonly taskId?: string | undefined;
+  readonly busy?: boolean | undefined;
+  readonly error?: string | undefined;
+  readonly onSubmit: (input: RestDecisionInput) => void;
+  readonly onCancel?: (() => void) | undefined;
+}
+
+export function DecisionForm(props: DecisionFormProps) {
+  const words = useWords();
+  const form = words.decisions.form;
+  const [question, setQuestion] = useState("");
+  const [body, setBody] = useState("");
+  const [taskId, setTaskId] = useState(props.taskId ?? "");
+  const [options, setOptions] = useState<readonly string[]>(["", ""]);
+
+  const labels = options.map((option) => option.trim()).filter((option) => option.length > 0);
+  const ready = question.trim().length > 0 && labels.length >= MIN_OPTIONS;
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    props.onSubmit({
+      question: question.trim(),
+      body,
+      options: labels.map((label) => ({ label })),
+      taskId: taskId === "" ? null : taskId,
+    });
+  };
+
+  return (
+    <form className="sc-form" onSubmit={submit}>
+      <label className="sc-field">
+        <span className="sc-field-label">{form.question}</span>
+        <input
+          className="sc-input"
+          value={question}
+          maxLength={MAX_QUESTION_LENGTH}
+          required
+          onChange={(event) => setQuestion(event.target.value)}
+        />
+      </label>
+      <label className="sc-field">
+        <span className="sc-field-label">{form.context}</span>
+        <textarea
+          className="sc-input sc-textarea"
+          value={body}
+          maxLength={MAX_BODY_LENGTH}
+          rows={4}
+          placeholder={form.contextPlaceholder}
+          onChange={(event) => setBody(event.target.value)}
+        />
+      </label>
+      {props.taskId === undefined && props.tasks.length > 0 && (
+        <label className="sc-field">
+          <span className="sc-field-label">{form.about}</span>
+          <select
+            className="sc-input"
+            value={taskId}
+            onChange={(event) => setTaskId(event.target.value)}
+          >
+            <option value="">{form.noTask}</option>
+            {props.tasks.map((task) => (
+              <option key={task.id} value={task.id}>
+                #{task.number} {task.title}
+              </option>
+            ))}
+          </select>
+        </label>
+      )}
+      <fieldset className="sc-field sc-options">
+        <legend className="sc-field-label">{form.options}</legend>
+        {options.map((option, index) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: ordered drafts without ids
+          <div key={index} className="sc-link-row">
+            <input
+              className="sc-input"
+              value={option}
+              maxLength={MAX_OPTION_LABEL_LENGTH}
+              placeholder={form.option(index + 1)}
+              onChange={(event) =>
+                setOptions(options.map((entry, at) => (at === index ? event.target.value : entry)))
+              }
+            />
+            {options.length > MIN_OPTIONS && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setOptions(options.filter((_, at) => at !== index))}
+              >
+                {words.common.remove}
+              </Button>
+            )}
+          </div>
+        ))}
+        {options.length < MAX_OPTIONS && (
+          <Button variant="ghost" size="sm" onClick={() => setOptions([...options, ""])}>
+            {form.addOption}
+          </Button>
+        )}
+      </fieldset>
+      {props.error !== undefined && (
+        <p className="sc-form-error" role="alert">
+          {props.error}
+        </p>
+      )}
+      <div className="sc-form-actions">
+        <Button type="submit" variant="primary" disabled={props.busy === true || !ready}>
+          {form.raise}
+        </Button>
+        {props.onCancel !== undefined && (
+          <Button variant="ghost" onClick={props.onCancel}>
+            {words.common.cancel}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}

package/src/components/decision-list.tsx

@@ -0,0 +1,278 @@
+import { useState } from "react";
+import {
+  MAX_BODY_LENGTH,
+  MAX_NOTE_LENGTH,
+  type RestAnswerInput,
+  type RestDecision,
+  type RestDecisionPatch,
+  type RestTask,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Markdown } from "./markdown.js";
+import { Button, cx, PersonChip, Time } from "./ui.js";
+
+// The decisions: the ones that wait, with the way to answer each, and the ones answered, with
+// who answered and when; each a record (ADR-0009) of its context, its answer with the
+// rationale, and what followed. Each takes its data as props and nothing from the network.
+
+export interface DecisionCardProps {
+  readonly decision: RestDecision;
+  /** The task the decision is about, when it is about one and the page knows it. */
+  readonly task?: RestTask | undefined;
+  readonly taskHref?: ((task: RestTask) => string) | undefined;
+  /** Where a document the decision links to is read, by its path. */
+  readonly docHref?: ((path: string) => string) | undefined;
+  /** Where the decision's own page is; given, the question leads to it. */
+  readonly href?: 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. */
+  readonly onUpdate?: ((decision: RestDecision, patch: RestDecisionPatch) => void) | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+/** What followed the decision: shown, and written or changed by whoever may. */
+function Outcome(props: {
+  readonly decision: RestDecision;
+  readonly docHref: ((path: string) => string) | undefined;
+  readonly onUpdate: ((decision: RestDecision, patch: RestDecisionPatch) => void) | undefined;
+  readonly busy: boolean | undefined;
+}) {
+  const words = useWords();
+  const { decision } = props;
+  const [writing, setWriting] = useState(false);
+  const [draft, setDraft] = useState(decision.outcome ?? "");
+  if (decision.outcome === null && props.onUpdate === undefined) {
+    return null;
+  }
+  return (
+    <section className="sc-decision-section" aria-label={words.decisions.whatFollowed}>
+      <h4 className="sc-decision-label">{words.decisions.whatFollowed}</h4>
+      {writing ? (
+        <form
+          className="sc-outcome-form"
+          onSubmit={(event) => {
+            event.preventDefault();
+            props.onUpdate?.(decision, { outcome: draft });
+            setWriting(false);
+          }}
+        >
+          <textarea
+            className="sc-input sc-textarea"
+            value={draft}
+            maxLength={MAX_BODY_LENGTH}
+            rows={4}
+            placeholder={words.decisions.outcomePlaceholder}
+            onChange={(event) => setDraft(event.target.value)}
+          />
+          <div className="sc-form-actions">
+            <Button type="submit" variant="primary" size="sm" disabled={props.busy === true}>
+              {words.common.save}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => setWriting(false)}>
+              {words.common.cancel}
+            </Button>
+          </div>
+        </form>
+      ) : (
+        <>
+          {decision.outcome === null ? (
+            <p className="sc-muted">{words.decisions.nothingWritten}</p>
+          ) : (
+            <Markdown source={decision.outcome} docHref={props.docHref} />
+          )}
+          {props.onUpdate !== undefined && (
+            <Button
+              variant="ghost"
+              size="sm"
+              disabled={props.busy === true}
+              onClick={() => {
+                setDraft(decision.outcome ?? "");
+                setWriting(true);
+              }}
+            >
+              {decision.outcome === null
+                ? words.decisions.writeWhatFollowed
+                : words.decisions.changeIt}
+            </Button>
+          )}
+        </>
+      )}
+    </section>
+  );
+}
+
+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")}>
+      <header className="sc-decision-header">
+        <h3 className="sc-decision-question">
+          {props.href === undefined ? (
+            decision.question
+          ) : (
+            <a href={props.href}>{decision.question}</a>
+          )}
+        </h3>
+        <p className="sc-decision-meta">
+          <PersonChip person={decision.raisedBy} />{" "}
+          {decision.run === null
+            ? words.decisions.asked
+            : words.decisions.askedThrough(decision.run.agent)}{" "}
+          <Time iso={decision.createdAt} />
+          {task !== undefined && (
+            <>
+              {" "}
+              {words.decisions.about}{" "}
+              {props.taskHref === undefined ? (
+                <span>
+                  #{task.number} {task.title}
+                </span>
+              ) : (
+                <a href={props.taskHref(task)}>
+                  #{task.number} {task.title}
+                </a>
+              )}
+            </>
+          )}
+        </p>
+      </header>
+      {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} />
+        </section>
+      )}
+      {decision.answer !== null ? (
+        <div className="sc-answer">
+          <p className="sc-answer-option">{chosenLabel(decision.answer.option)}</p>
+          {decision.answer.note !== null && (
+            <div className="sc-answer-note">
+              <Markdown source={decision.answer.note} docHref={props.docHref} />
+            </div>
+          )}
+          <p className="sc-decision-meta">
+            <PersonChip person={decision.answer.by} /> {words.decisions.answeredBy}{" "}
+            <Time iso={decision.answer.at} />
+          </p>
+        </div>
+      ) : 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>
+      )}
+      {answered && (
+        <Outcome
+          decision={decision}
+          docHref={props.docHref}
+          onUpdate={props.onUpdate}
+          busy={props.busy}
+        />
+      )}
+    </article>
+  );
+}
+
+export interface DecisionListProps {
+  readonly decisions: readonly RestDecision[];
+  /** The tasks the decisions may be about, by id, for the cards to name them. */
+  readonly tasks: ReadonlyMap<string, RestTask>;
+  readonly taskHref?: ((task: RestTask) => string) | undefined;
+  readonly docHref?: ((path: string) => string) | undefined;
+  /** Where each decision's own page is. */
+  readonly decisionHref?: ((decision: RestDecision) => string) | undefined;
+  readonly onAnswer?: ((decision: RestDecision, input: RestAnswerInput) => void) | undefined;
+  readonly onUpdate?: ((decision: RestDecision, patch: RestDecisionPatch) => void) | undefined;
+  readonly busy?: boolean | undefined;
+  readonly empty?: React.ReactNode;
+}
+
+export function DecisionList(props: DecisionListProps) {
+  const words = useWords();
+  const waiting = props.decisions.filter((decision) => decision.answer === null);
+  const answered = props.decisions.filter((decision) => decision.answer !== null);
+  const card = (decision: RestDecision) => (
+    <DecisionCard
+      key={decision.id}
+      decision={decision}
+      task={decision.taskId === null ? undefined : props.tasks.get(decision.taskId)}
+      taskHref={props.taskHref}
+      docHref={props.docHref}
+      href={props.decisionHref?.(decision)}
+      onAnswer={props.onAnswer}
+      onUpdate={props.onUpdate}
+      busy={props.busy}
+    />
+  );
+  return (
+    <div className="sc-decisions">
+      <section aria-label={words.decisions.waiting}>
+        <h2 className="sc-section-title">
+          {words.decisions.waiting} <span className="sc-column-count">{waiting.length}</span>
+        </h2>
+        {waiting.length === 0 ? (props.empty ?? null) : waiting.map(card)}
+      </section>
+      {answered.length > 0 && (
+        <section aria-label={words.decisions.answered}>
+          <h2 className="sc-section-title">
+            {words.decisions.answered} <span className="sc-column-count">{answered.length}</span>
+          </h2>
+          {answered.map(card)}
+        </section>
+      )}
+    </div>
+  );
+}