@skillcdn/console 0.1.6 → 0.1.8

package/src/components/task-view.tsx

@@ -0,0 +1,272 @@
+import type {
+  RestAnswerInput,
+  RestArtifact,
+  RestDecision,
+  RestDecisionInput,
+  RestDecisionPatch,
+  RestEvent,
+  RestPerson,
+  RestRun,
+  RestTask,
+  RestTaskInput,
+  TaskState,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import type { TaskFormKind } from "../router.js";
+import { TASK_STATES } from "../vocabulary.js";
+import { DecisionForm } from "./decision-form.js";
+import { DecisionCard } from "./decision-list.js";
+import { EventFeed } from "./event-feed.js";
+import { Markdown } from "./markdown.js";
+import { RunList } from "./runs.js";
+import { TaskForm } from "./task-form.js";
+import { PersonChip, PriorityBadge, StateBadge, Time } from "./ui.js";
+
+// One task: what it is, who it is on, what it links to, the agents at work on it, the decisions
+// about it, the tasks that are part of it, everything that happened to it, and the ways to
+// change it. Takes its data as props and nothing from the network; which of its forms is open
+// is told by the page, since each form has an address of its own (ADR-0010).
+
+export interface TaskViewProps {
+  readonly task: RestTask;
+  readonly people: readonly RestPerson[];
+  /** Every task of the board, for the breakdown and for what this one may be part of. */
+  readonly tasks: readonly RestTask[];
+  readonly decisions: readonly RestDecision[];
+  /** The runs of the board, or of this task; the ones on this task are shown. */
+  readonly runs?: readonly RestRun[] | undefined;
+  /** Everything that happened to the task, oldest first, when the page has read it. */
+  readonly history?: readonly RestEvent[] | undefined;
+  readonly taskHref: (task: RestTask) => string;
+  /** Where a decision is answered, for a run that waits for one. */
+  readonly decisionHref?: ((decisionId: string) => string) | undefined;
+  /** Where a file a run handed in is read. */
+  readonly fileHref?: ((artifact: RestArtifact) => string) | undefined;
+  /** Where a document of the project is read, by its path, for the links in what was written. */
+  readonly docHref?: ((path: string) => string) | undefined;
+  /** The form open on the page, if one: the task edited, or a decision raised about it. */
+  readonly form?: TaskFormKind | undefined;
+  /** Where each form is opened; left out, the forms cannot be opened from here. */
+  readonly formHref?: ((form: TaskFormKind) => string) | undefined;
+  /** Called when a form is cancelled. */
+  readonly onCancel?: (() => void) | undefined;
+  readonly busy?: boolean | undefined;
+  readonly error?: string | undefined;
+  readonly onChange: (task: RestTask, patch: RestTaskInput) => void;
+  readonly onMove: (task: RestTask, state: TaskState) => void;
+  readonly onRaiseDecision: (input: RestDecisionInput) => void;
+  readonly onAnswer: (decision: RestDecision, input: RestAnswerInput) => void;
+  /** Called to grow a decision's record with what followed. */
+  readonly onUpdateDecision?:
+    | ((decision: RestDecision, patch: RestDecisionPatch) => void)
+    | undefined;
+  readonly onAbandonRun?: ((run: RestRun) => void) | undefined;
+}
+
+export function TaskView(props: TaskViewProps) {
+  const words = useWords();
+  const { task } = props;
+  const parent =
+    task.parentId === null
+      ? undefined
+      : props.tasks.find((candidate) => candidate.id === task.parentId);
+  const subtasks = props.tasks.filter((candidate) => candidate.parentId === task.id);
+  const about = props.decisions.filter((decision) => decision.taskId === task.id);
+  const runs = (props.runs ?? []).filter((run) => run.taskId === task.id);
+  const tasksById = new Map(props.tasks.map((candidate) => [candidate.id, candidate]));
+
+  if (props.form === "edit") {
+    return (
+      <div className="sc-task sc-task-editing">
+        <h1 className="sc-task-title">
+          <span className="sc-card-number">#{task.number}</span> {task.title}
+        </h1>
+        <TaskForm
+          people={props.people}
+          task={task}
+          parents={props.tasks}
+          busy={props.busy}
+          error={props.error}
+          onSubmit={(input) => props.onChange(task, input)}
+          onCancel={props.onCancel}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="sc-task">
+      <header className="sc-task-header">
+        {parent !== undefined && (
+          <p className="sc-task-parent">
+            {words.task.partOf}{" "}
+            <a href={props.taskHref(parent)}>
+              #{parent.number} {parent.title}
+            </a>
+          </p>
+        )}
+        <h1 className="sc-task-title">
+          <span className="sc-card-number">#{task.number}</span> {task.title}
+        </h1>
+        <div className="sc-task-badges">
+          <StateBadge state={task.state} />
+          <PriorityBadge priority={task.priority} />
+        </div>
+      </header>
+      <div className="sc-task-body">
+        <div className="sc-task-main">
+          {props.error !== undefined && (
+            <p className="sc-form-error" role="alert">
+              {props.error}
+            </p>
+          )}
+          {task.body.length > 0 ? (
+            <Markdown source={task.body} docHref={props.docHref} />
+          ) : (
+            <p className="sc-muted">{words.task.nothingMore}</p>
+          )}
+          {task.links.length > 0 && (
+            <section className="sc-task-section" aria-label={words.task.links}>
+              <h2 className="sc-section-title">{words.task.links}</h2>
+              <ul className="sc-link-list">
+                {task.links.map((link) => (
+                  <li key={link.url}>
+                    <a href={link.url} target="_blank" rel="noopener noreferrer nofollow">
+                      {link.label ?? link.url}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
+          {props.form === "ask" && (
+            <section className="sc-task-section" aria-label={words.task.raiseDecision}>
+              <h2 className="sc-section-title">{words.task.raiseDecision}</h2>
+              <DecisionForm
+                tasks={props.tasks}
+                taskId={task.id}
+                busy={props.busy}
+                onSubmit={props.onRaiseDecision}
+                onCancel={props.onCancel}
+              />
+            </section>
+          )}
+          {runs.length > 0 && (
+            <section className="sc-task-section" aria-label={words.task.runs}>
+              <h2 className="sc-section-title">{words.task.agentsAtWork}</h2>
+              <RunList
+                runs={runs}
+                decisionHref={props.decisionHref}
+                fileHref={props.fileHref}
+                docHref={props.docHref}
+                onAbandon={props.onAbandonRun}
+                busy={props.busy}
+              />
+            </section>
+          )}
+          {about.length > 0 && (
+            <section className="sc-task-section" aria-label={words.task.decisions}>
+              <h2 className="sc-section-title">{words.task.decisions}</h2>
+              {about.map((decision) => (
+                <DecisionCard
+                  key={decision.id}
+                  decision={decision}
+                  task={decision.taskId === null ? undefined : tasksById.get(decision.taskId)}
+                  docHref={props.docHref}
+                  onAnswer={props.onAnswer}
+                  onUpdate={props.onUpdateDecision}
+                  busy={props.busy}
+                />
+              ))}
+            </section>
+          )}
+          {props.history !== undefined && props.history.length > 0 && (
+            <section className="sc-task-section" aria-label={words.task.history}>
+              <h2 className="sc-section-title">{words.task.history}</h2>
+              <EventFeed events={props.history} />
+            </section>
+          )}
+          {subtasks.length > 0 && (
+            <section className="sc-task-section" aria-label={words.task.subtasks}>
+              <h2 className="sc-section-title">{words.task.partOfIt}</h2>
+              <ul className="sc-subtasks">
+                {subtasks.map((subtask) => (
+                  <li key={subtask.id}>
+                    <a href={props.taskHref(subtask)}>
+                      <span className="sc-card-number">#{subtask.number}</span> {subtask.title}
+                    </a>{" "}
+                    <StateBadge state={subtask.state} />
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
+        </div>
+        <aside className="sc-task-aside" aria-label={words.task.facts}>
+          <dl className="sc-facts">
+            <div>
+              <dt>{words.task.state}</dt>
+              <dd>
+                <select
+                  className="sc-input"
+                  aria-label={words.task.state}
+                  value={task.state}
+                  disabled={props.busy === true}
+                  onChange={(event) => props.onMove(task, event.target.value as TaskState)}
+                >
+                  {TASK_STATES.map((state) => (
+                    <option key={state} value={state}>
+                      {words.vocabulary.state[state]}
+                    </option>
+                  ))}
+                </select>
+              </dd>
+            </div>
+            <div>
+              <dt>{words.task.form.priority}</dt>
+              <dd>{words.vocabulary.priority[task.priority]}</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>
+            <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>
+          {props.formHref !== undefined && (
+            <div className="sc-task-actions">
+              <a className="sc-button sc-button-secondary" href={props.formHref("edit")}>
+                {words.common.edit}
+              </a>
+              <a className="sc-button sc-button-secondary" href={props.formHref("ask")}>
+                {words.task.raiseDecision}
+              </a>
+            </div>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}

package/src/components/tokens.tsx

@@ -0,0 +1,223 @@
+import { type FormEvent, type ReactNode, useState } from "react";
+import {
+  DEFAULT_TOKEN_DAYS,
+  MAX_TOKEN_NAME_LENGTH,
+  type RestToken,
+  type RestTokenInput,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Button, Callout, Time } from "./ui.js";
+
+// The tokens a person holds for their agents, scripts and consoles of their own, shown as the
+// agents that hold them: the list, the way to make one by hand, and the one just made, whose
+// secret is shown this once. Each takes its data as props and nothing from the network.
+
+/** How long a token may be good for, as the form offers it; `never` for one that does not expire. */
+const DAY_CHOICES = ["30", "90", "180", "365", "never"] as const;
+type DayChoice = (typeof DAY_CHOICES)[number];
+const DEFAULT_CHOICE: DayChoice =
+  DAY_CHOICES.find((choice) => choice === String(DEFAULT_TOKEN_DAYS)) ?? "90";
+
+/**
+ * The spans a form offers: the usual ones, within the most days the workspace allows when it
+ * names some, and that limit itself; with a limit there is no "never".
+ */
+export function dayChoices(daysAtMost: number | null | undefined): readonly string[] {
+  if (daysAtMost === null || daysAtMost === undefined) {
+    return DAY_CHOICES;
+  }
+  const within = DAY_CHOICES.filter((choice) => choice !== "never" && Number(choice) < daysAtMost);
+  return [...within, String(daysAtMost)];
+}
+
+export interface TokenListProps {
+  readonly tokens: readonly RestToken[];
+  /** Called to take a token away. Left out, tokens cannot be removed here. */
+  readonly onRevoke?: ((token: RestToken) => void) | undefined;
+  readonly busy?: boolean | undefined;
+  readonly empty?: ReactNode;
+}
+
+export function TokenList(props: TokenListProps) {
+  const words = useWords().agents;
+  if (props.tokens.length === 0) {
+    return <>{props.empty ?? null}</>;
+  }
+  return (
+    <ul className="sc-token-list" aria-label={words.list}>
+      {props.tokens.map((token) => (
+        <li key={token.id} className="sc-token">
+          <div>
+            <p className="sc-token-name">{token.name}</p>
+            <p className="sc-token-meta">
+              <span>
+                {words.connected} <Time iso={token.createdAt} />
+              </span>
+              <span>
+                {token.expiresAt === null ? (
+                  words.doesNotExpire
+                ) : (
+                  <>
+                    {words.goodUntil} <Time iso={token.expiresAt} />
+                  </>
+                )}
+              </span>
+              <span>
+                {token.lastUsedAt === null ? (
+                  words.notActive
+                ) : (
+                  <>
+                    {words.lastActive} <Time iso={token.lastUsedAt} />
+                  </>
+                )}
+              </span>
+            </p>
+          </div>
+          {props.onRevoke !== undefined && (
+            <Button
+              variant="danger"
+              size="sm"
+              disabled={props.busy === true}
+              onClick={() => props.onRevoke?.(token)}
+            >
+              {words.disconnect}
+            </Button>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export interface TokenFormProps {
+  /** What the token is called to begin with: what the agent calls itself, for one connecting. */
+  readonly name?: string | undefined;
+  /** 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;
+  /** What the button says; "Make the token" when left out. */
+  readonly submitLabel?: string | undefined;
+  readonly cancelLabel?: string | undefined;
+  readonly onSubmit: (input: RestTokenInput) => void;
+  readonly onCancel?: (() => void) | undefined;
+}
+
+export function TokenForm(props: TokenFormProps) {
+  const words = useWords();
+  const choices = dayChoices(props.daysAtMost);
+  const [name, setName] = useState(props.name ?? "");
+  const [choice, setChoice] = useState<string>(
+    choices.includes(DEFAULT_CHOICE) ? DEFAULT_CHOICE : (choices.at(-1) ?? DEFAULT_CHOICE),
+  );
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    props.onSubmit({
+      name: name.trim(),
+      expiresInDays: choice === "never" ? null : Number(choice),
+    });
+  };
+  return (
+    <form className="sc-form" onSubmit={submit}>
+      <div className="sc-field-row">
+        <label className="sc-field">
+          <span className="sc-field-label">{words.agents.form.name}</span>
+          <input
+            className="sc-input"
+            value={name}
+            maxLength={MAX_TOKEN_NAME_LENGTH}
+            required
+            placeholder={words.agents.form.namePlaceholder}
+            onChange={(event) => setName(event.target.value)}
+          />
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{words.agents.form.goodFor}</span>
+          <select
+            className="sc-input"
+            value={choice}
+            onChange={(event) => setChoice(event.target.value)}
+          >
+            {choices.map((option) => (
+              <option key={option} value={option}>
+                {option === "never" ? words.agents.doesNotExpire : words.agents.form.days(option)}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+      {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 || name.trim() === ""}
+        >
+          {props.submitLabel ?? words.agents.form.make}
+        </Button>
+        {props.onCancel !== undefined && (
+          <Button variant="ghost" onClick={props.onCancel} disabled={props.busy === true}>
+            {props.cancelLabel ?? words.common.cancel}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}
+
+export interface NewTokenProps {
+  readonly token: RestToken;
+  /** The secret, which the server answered once and does not keep. */
+  readonly secret: string;
+  readonly onDone: () => void;
+}
+
+/** The token just made, with its secret shown this once and the way to copy it. */
+export function NewToken(props: NewTokenProps) {
+  const words = useWords();
+  const fresh = words.agents.fresh;
+  const [copied, setCopied] = useState(false);
+  const copy = () => {
+    if (typeof navigator === "undefined" || navigator.clipboard === undefined) {
+      return;
+    }
+    void navigator.clipboard.writeText(props.secret).then(
+      () => setCopied(true),
+      () => setCopied(false),
+    );
+  };
+  return (
+    <Callout
+      tone="warning"
+      title={fresh.ready(props.token.name)}
+      action={
+        <Button size="sm" variant="ghost" onClick={props.onDone}>
+          {words.common.done}
+        </Button>
+      }
+    >
+      <p>{fresh.copyNow}</p>
+      <p className="sc-secret">
+        <code className="sc-secret-value">{props.secret}</code>
+        <Button size="sm" onClick={copy}>
+          {copied ? fresh.copied : fresh.copy}
+        </Button>
+      </p>
+      <p>
+        {fresh.useIt}{" "}
+        {props.token.expiresAt === null ? (
+          fresh.removeWhenDone
+        ) : (
+          <>
+            {fresh.goodUntilBefore} <Time iso={props.token.expiresAt} />
+            {fresh.goodUntilAfter}
+          </>
+        )}
+      </p>
+    </Callout>
+  );
+}