@skillcdn/console 0.1.5 → 0.1.7

package/src/components/markdown.tsx

@@ -0,0 +1,72 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { isDocumentPath } from "../documents.js";
+
+// What people and agents write is untrusted. It is rendered as React elements, never as HTML:
+// raw HTML in the source stays text, links are limited to a few schemes and open elsewhere,
+// and pictures come over https only, lazily and without a referrer. A link whose destination
+// is a document's path (ADR-0009) leads to the document's page, when the page knows where.
+
+const SAFE_LINK = /^(https?:|mailto:)/i;
+const SAFE_IMAGE = /^https:\/\//i;
+
+export interface MarkdownProps {
+  readonly source: string;
+  /** Where a document of the project is read, by its path; left out, such links stay text. */
+  readonly docHref?: ((path: string) => string) | undefined;
+}
+
+export function Markdown(props: MarkdownProps) {
+  return (
+    <div className="sc-prose">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        // Everything passes through here unchanged; the components below decide what a URL may do.
+        urlTransform={(url) => url}
+        components={{
+          a({ href, children }) {
+            if (href === undefined || href === "") {
+              return <span>{children}</span>;
+            }
+            if (href.startsWith("#")) {
+              return <a href={href}>{children}</a>;
+            }
+            const hash = href.indexOf("#");
+            const path = hash < 0 ? href : href.slice(0, hash);
+            if (props.docHref !== undefined && isDocumentPath(path)) {
+              return (
+                <a href={`${props.docHref(path)}${hash < 0 ? "" : href.slice(hash)}`}>{children}</a>
+              );
+            }
+            if (SAFE_LINK.test(href)) {
+              return (
+                <a href={href} target="_blank" rel="noopener noreferrer nofollow ugc">
+                  {children}
+                </a>
+              );
+            }
+            return <span>{children}</span>;
+          },
+          img({ src, alt, title }) {
+            const url = typeof src === "string" && SAFE_IMAGE.test(src) ? src : undefined;
+            if (url === undefined) {
+              return <span className="sc-prose-image-text">{alt ?? ""}</span>;
+            }
+            return (
+              <img
+                src={url}
+                alt={alt ?? ""}
+                title={title}
+                loading="lazy"
+                decoding="async"
+                referrerPolicy="no-referrer"
+              />
+            );
+          },
+        }}
+      >
+        {props.source}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/components/people.tsx

@@ -0,0 +1,59 @@
+import type { PersonRole, RestPerson } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { PERSON_ROLES } from "../vocabulary.js";
+import { PersonChip, RoleBadge } from "./ui.js";
+
+// The people of the board, with what each may do. An administrator changes roles here; a
+// member reads. Takes its data as props and nothing from the network.
+
+export interface PeopleListProps {
+  readonly people: readonly RestPerson[];
+  /** Whoever is looking, so that their own row says so. */
+  readonly me?: RestPerson | undefined;
+  /** Called with the role an administrator chose. Left out, roles are read here, not changed. */
+  readonly onChangeRole?: ((person: RestPerson, role: PersonRole) => void) | undefined;
+  /** Where a person's agents are seen; given to an administrator. */
+  readonly agentsHref?: ((person: RestPerson) => string) | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+export function PeopleList(props: PeopleListProps) {
+  const words = useWords();
+  return (
+    <ul className="sc-people" aria-label={words.people.list}>
+      {props.people.map((person) => (
+        <li key={person.id} className="sc-person-row">
+          <PersonChip person={person} size="md" />
+          <span className="sc-person-name">
+            {person.name ?? ""}
+            {props.me?.id === person.id && <span className="sc-muted"> {words.common.you}</span>}
+          </span>
+          {props.onChangeRole === undefined ? (
+            <RoleBadge role={person.role} />
+          ) : (
+            <label className="sc-field sc-field-inline">
+              <span className="sc-visually-hidden">{words.people.roleOf(person.login)}</span>
+              <select
+                className="sc-input"
+                value={person.role}
+                disabled={props.busy === true}
+                onChange={(event) => props.onChangeRole?.(person, event.target.value as PersonRole)}
+              >
+                {PERSON_ROLES.map((role) => (
+                  <option key={role} value={role}>
+                    {words.vocabulary.role[role]}
+                  </option>
+                ))}
+              </select>
+            </label>
+          )}
+          {props.agentsHref !== undefined && (
+            <a className="sc-button sc-button-ghost sc-button-sm" href={props.agentsHref(person)}>
+              {words.people.agents}
+            </a>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/components/projects.tsx

@@ -0,0 +1,364 @@
+import { type FormEvent, type ReactNode, useState } from "react";
+import {
+  MAX_PROJECT_DESCRIPTION_LENGTH,
+  MAX_PROJECT_KEY_LENGTH,
+  MAX_PROJECT_NAME_LENGTH,
+  MAX_SKILLS_ADDRESS_LENGTH,
+  PROJECT_ROLES,
+  PROJECT_VISIBILITIES,
+  type ProjectRole,
+  type ProjectVisibility,
+  type RestMember,
+  type RestMemberInput,
+  type RestPerson,
+  type RestProject,
+  type RestProjectInput,
+  type RestProjectPatch,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Badge, Button, PersonChip, Time } from "./ui.js";
+
+// The projects of the workspace (ADR-0008): the list a person may see, the way to make one,
+// a project's settings for its owners, and those listed in it. Each takes its data as props
+// and nothing from the network; what people wrote is shown as text, never as HTML.
+
+/** The words of a project's roles and visibilities in English: the default pack's. */
+export const PROJECT_ROLE_LABELS: Readonly<Record<ProjectRole, string>> = {
+  owner: "Owner",
+  member: "Member",
+};
+
+export const VISIBILITY_LABELS: Readonly<Record<ProjectVisibility, string>> = {
+  workspace: "Everyone of the workspace",
+  private: "Only those listed",
+};
+
+export function ProjectRoleBadge(props: { readonly role: ProjectRole }) {
+  const words = useWords();
+  return (
+    <Badge tone={props.role === "owner" ? "point" : "neutral"}>
+      {words.vocabulary.projectRole[props.role]}
+    </Badge>
+  );
+}
+
+export interface ProjectListProps {
+  readonly projects: readonly RestProject[];
+  /** The link to a project's board, as the composition routes it. */
+  readonly projectHref: (project: RestProject) => string;
+  readonly onOpen: (project: RestProject) => void;
+  readonly empty?: ReactNode;
+}
+
+export function ProjectList(props: ProjectListProps) {
+  const words = useWords().projects;
+  if (props.projects.length === 0) {
+    return <>{props.empty ?? null}</>;
+  }
+  return (
+    <ul className="sc-projects" aria-label={words.list}>
+      {props.projects.map((project) => (
+        <li key={project.id} className="sc-project">
+          <div className="sc-project-head">
+            <a
+              className="sc-project-name"
+              href={props.projectHref(project)}
+              onClick={(event) => {
+                if (event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey) {
+                  event.preventDefault();
+                  props.onOpen(project);
+                }
+              }}
+            >
+              {project.name}
+            </a>
+            <code className="sc-project-key">{project.key}</code>
+            <ProjectRoleBadge role={project.role} />
+            {project.visibility === "private" && <Badge tone="neutral">{words.private}</Badge>}
+          </div>
+          {project.description.length > 0 && (
+            <p className="sc-project-description">{project.description}</p>
+          )}
+          <p className="sc-project-meta">
+            {project.openDecisions > 0 && (
+              <Badge tone="warning">{words.decisionsWaiting(project.openDecisions)}</Badge>
+            )}
+            {project.openRuns > 0 && (
+              <Badge tone="accent">{words.agentsAtWork(project.openRuns)}</Badge>
+            )}
+          </p>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export interface ProjectFormProps {
+  /** The project to change; left out, the form makes a new one, with a key. */
+  readonly project?: RestProject | undefined;
+  readonly busy?: boolean | undefined;
+  readonly error?: string | undefined;
+  readonly onSubmit: (input: RestProjectInput | RestProjectPatch) => void;
+  readonly onCancel?: (() => void) | undefined;
+}
+
+/** A key as a person types a name: lowercase letters, digits and hyphens, from what they typed. */
+export function keyOf(name: string): string {
+  return name
+    .toLowerCase()
+    .replaceAll(/[^a-z0-9]+/g, "-")
+    .replaceAll(/^-+|-+$/g, "")
+    .slice(0, MAX_PROJECT_KEY_LENGTH);
+}
+
+export function ProjectForm(props: ProjectFormProps) {
+  const words = useWords();
+  const form = words.projects.form;
+  const { project } = props;
+  const [name, setName] = useState(project?.name ?? "");
+  const [key, setKey] = useState(project?.key ?? "");
+  const [keyTouched, setKeyTouched] = useState(project !== undefined);
+  const [description, setDescription] = useState(project?.description ?? "");
+  const [visibility, setVisibility] = useState<ProjectVisibility>(project?.visibility ?? "private");
+  const [skillsAddress, setSkillsAddress] = useState(project?.skillsAddress ?? "");
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    const settings: RestProjectPatch = {
+      name: name.trim(),
+      description: description.trim(),
+      visibility,
+      skillsAddress: skillsAddress.trim() === "" ? null : skillsAddress.trim(),
+    };
+    props.onSubmit(
+      project === undefined ? { key: key.trim(), ...settings, name: name.trim() } : settings,
+    );
+  };
+
+  return (
+    <form className="sc-form" onSubmit={submit}>
+      <div className="sc-field-row">
+        <label className="sc-field">
+          <span className="sc-field-label">{form.name}</span>
+          <input
+            className="sc-input"
+            value={name}
+            maxLength={MAX_PROJECT_NAME_LENGTH}
+            required
+            onChange={(event) => {
+              setName(event.target.value);
+              if (!keyTouched) {
+                setKey(keyOf(event.target.value));
+              }
+            }}
+          />
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.key}</span>
+          <input
+            className="sc-input"
+            value={key}
+            maxLength={MAX_PROJECT_KEY_LENGTH}
+            pattern="[a-z0-9]([a-z0-9-]*[a-z0-9])?"
+            required
+            disabled={project !== undefined}
+            title={form.keyHint}
+            onChange={(event) => {
+              setKeyTouched(true);
+              setKey(event.target.value);
+            }}
+          />
+        </label>
+      </div>
+      <label className="sc-field">
+        <span className="sc-field-label">{form.description}</span>
+        <textarea
+          className="sc-input sc-textarea"
+          value={description}
+          maxLength={MAX_PROJECT_DESCRIPTION_LENGTH}
+          rows={2}
+          placeholder={form.descriptionPlaceholder}
+          onChange={(event) => setDescription(event.target.value)}
+        />
+      </label>
+      <div className="sc-field-row">
+        <label className="sc-field">
+          <span className="sc-field-label">{form.whoIsMember}</span>
+          <select
+            className="sc-input"
+            value={visibility}
+            onChange={(event) => setVisibility(event.target.value as ProjectVisibility)}
+          >
+            {PROJECT_VISIBILITIES.map((candidate) => (
+              <option key={candidate} value={candidate}>
+                {words.vocabulary.visibility[candidate]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.skillsAddress}</span>
+          <input
+            className="sc-input"
+            value={skillsAddress}
+            maxLength={MAX_SKILLS_ADDRESS_LENGTH}
+            placeholder={form.skillsAddressPlaceholder}
+            onChange={(event) => setSkillsAddress(event.target.value)}
+          />
+        </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() === "" || key.trim() === ""}
+        >
+          {project === undefined ? form.make : words.common.save}
+        </Button>
+        {props.onCancel !== undefined && (
+          <Button variant="ghost" onClick={props.onCancel}>
+            {words.common.cancel}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}
+
+export interface MemberListProps {
+  readonly members: readonly RestMember[];
+  /** The people of the workspace who may be listed: those not listed yet are offered. */
+  readonly people: readonly RestPerson[];
+  /** Whoever is looking, so that their own row says so. */
+  readonly me?: RestPerson | undefined;
+  /** Called with a person to list, and what they are to be. Left out, the list is read here, not changed. */
+  readonly onAdd?: ((input: RestMemberInput) => void) | undefined;
+  readonly onChangeRole?: ((member: RestMember, role: ProjectRole) => void) | undefined;
+  readonly onRemove?: ((member: RestMember) => void) | undefined;
+  readonly busy?: boolean | undefined;
+  readonly empty?: ReactNode;
+}
+
+export function MemberList(props: MemberListProps) {
+  const words = useWords();
+  const members = words.projects.members;
+  const listed = new Set(props.members.map((member) => member.person.id));
+  const candidates = props.people.filter((person) => !listed.has(person.id));
+  const [personId, setPersonId] = useState("");
+  const [role, setRole] = useState<ProjectRole>("member");
+  return (
+    <div className="sc-members">
+      {props.members.length === 0 ? (
+        (props.empty ?? null)
+      ) : (
+        <ul className="sc-people" aria-label={members.list}>
+          {props.members.map((member) => (
+            <li key={member.person.id} className="sc-person-row">
+              <PersonChip person={member.person} size="md" />
+              <span className="sc-person-name">
+                {member.person.name ?? ""}
+                {props.me?.id === member.person.id && (
+                  <span className="sc-muted"> {words.common.you}</span>
+                )}
+                <span className="sc-muted">
+                  {" "}
+                  {members.since} <Time iso={member.addedAt} />
+                </span>
+              </span>
+              {props.onChangeRole === undefined ? (
+                <ProjectRoleBadge role={member.role} />
+              ) : (
+                <label className="sc-field sc-field-inline">
+                  <span className="sc-visually-hidden">{members.roleOf(member.person.login)}</span>
+                  <select
+                    className="sc-input"
+                    value={member.role}
+                    disabled={props.busy === true}
+                    onChange={(event) =>
+                      props.onChangeRole?.(member, event.target.value as ProjectRole)
+                    }
+                  >
+                    {PROJECT_ROLES.map((candidate) => (
+                      <option key={candidate} value={candidate}>
+                        {words.vocabulary.projectRole[candidate]}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+              )}
+              {props.onRemove !== undefined && (
+                <Button
+                  variant="danger"
+                  size="sm"
+                  disabled={props.busy === true}
+                  onClick={() => props.onRemove?.(member)}
+                >
+                  {words.common.remove}
+                </Button>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+      {props.onAdd !== undefined && candidates.length > 0 && (
+        <form
+          className="sc-form sc-member-form"
+          aria-label={members.addAria}
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (personId !== "") {
+              props.onAdd?.({ personId, role });
+              setPersonId("");
+            }
+          }}
+        >
+          <div className="sc-field-row">
+            <label className="sc-field">
+              <span className="sc-field-label">{members.person}</span>
+              <select
+                className="sc-input"
+                value={personId}
+                onChange={(event) => setPersonId(event.target.value)}
+              >
+                <option value="">{members.chooseSomeone}</option>
+                {candidates.map((person) => (
+                  <option key={person.id} value={person.id}>
+                    {person.login}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="sc-field">
+              <span className="sc-field-label">{members.as}</span>
+              <select
+                className="sc-input"
+                value={role}
+                onChange={(event) => setRole(event.target.value as ProjectRole)}
+              >
+                {PROJECT_ROLES.map((candidate) => (
+                  <option key={candidate} value={candidate}>
+                    {words.vocabulary.projectRole[candidate]}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <div className="sc-form-actions">
+              <Button
+                type="submit"
+                variant="primary"
+                disabled={props.busy === true || personId === ""}
+              >
+                {members.add}
+              </Button>
+            </div>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+}

package/src/components/runs.tsx

@@ -0,0 +1,175 @@
+import type { ReactNode } from "react";
+import type { RestArtifact, RestRun, RunStatus } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Markdown } from "./markdown.js";
+import { Badge, Button, formatBytes, PersonChip, Time } from "./ui.js";
+
+// A run: one agent at work on one task for one person, with what it reported, what it handed
+// in, and what it waits for. Takes its data as props and nothing from the network.
+
+/** The words of a run's status in English: the default pack's. */
+export const RUN_STATUS_LABELS: Readonly<Record<RunStatus, string>> = {
+  running: "At work",
+  waiting: "Waiting for a decision",
+  finished: "Finished",
+  failed: "Failed",
+  abandoned: "Abandoned",
+};
+
+export function RunStatusBadge(props: { readonly status: RunStatus }) {
+  const words = useWords();
+  const tone =
+    props.status === "running"
+      ? "accent"
+      : props.status === "waiting"
+        ? "warning"
+        : props.status === "finished"
+          ? "success"
+          : props.status === "failed"
+            ? "danger"
+            : "neutral";
+  return <Badge tone={tone}>{words.vocabulary.runStatus[props.status]}</Badge>;
+}
+
+export interface RunCardProps {
+  readonly run: RestRun;
+  /** Where the decision the run waits for is answered, when the page knows. */
+  readonly decisionHref?: ((decisionId: string) => string) | undefined;
+  /** Where a file handed in is read: the project's path for it. Left out, a file is named and not linked. */
+  readonly fileHref?: ((artifact: RestArtifact) => string) | undefined;
+  /** Where a document of the project is read, by its path, for the links in what the agent wrote. */
+  readonly docHref?: ((path: string) => string) | undefined;
+  /** Called to mark a run that will not come back as abandoned. Left out, it cannot be here. */
+  readonly onAbandon?: ((run: RestRun) => void) | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+export function RunCard(props: RunCardProps) {
+  const words = useWords().runs;
+  const { run } = props;
+  const open = run.status === "running" || run.status === "waiting";
+  return (
+    <article className="sc-run" aria-label={words.label(run.agent, run.person.login)}>
+      <header className="sc-run-header">
+        <span className="sc-run-agent">{run.agent}</span>
+        <RunStatusBadge status={run.status} />
+        <span className="sc-run-meta">
+          {words.for} <PersonChip person={run.person} /> {words.since} <Time iso={run.startedAt} />
+          {run.endedAt !== null && (
+            <>
+              {" "}
+              {words.until} <Time iso={run.endedAt} />
+            </>
+          )}
+        </span>
+        {open && props.onAbandon !== undefined && (
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={props.busy === true}
+            onClick={() => props.onAbandon?.(run)}
+          >
+            {words.markAbandoned}
+          </Button>
+        )}
+      </header>
+      {run.waitingFor !== null && (
+        <p className="sc-run-waiting">
+          {words.waitingForDecision}
+          {props.decisionHref !== undefined && (
+            <>
+              : <a href={props.decisionHref(run.waitingFor)}>{words.answerIt}</a>
+            </>
+          )}
+          .
+        </p>
+      )}
+      {run.reports.length > 0 && (
+        <ol className="sc-run-reports" aria-label={words.reports}>
+          {run.reports.map((report) => (
+            <li key={report.id} className="sc-report">
+              <Time iso={report.createdAt} />
+              <Markdown source={report.body} docHref={props.docHref} />
+            </li>
+          ))}
+        </ol>
+      )}
+      {run.artifacts.length > 0 && (
+        <ul className="sc-link-list" aria-label={words.handedIn}>
+          {run.artifacts.map((artifact) => (
+            <li key={artifact.id}>
+              <ArtifactLink artifact={artifact} fileHref={props.fileHref} />
+            </li>
+          ))}
+        </ul>
+      )}
+      {run.summary !== null && (
+        <div className="sc-run-summary">
+          <Markdown source={run.summary} docHref={props.docHref} />
+        </div>
+      )}
+    </article>
+  );
+}
+
+/** A link as it was handed in; a file by its name, with its size, read from the console. */
+function ArtifactLink(props: {
+  readonly artifact: RestArtifact;
+  readonly fileHref: ((artifact: RestArtifact) => string) | undefined;
+}) {
+  const { artifact } = props;
+  if (artifact.file === null) {
+    return (
+      <a href={artifact.url ?? ""} target="_blank" rel="noopener noreferrer nofollow ugc">
+        {artifact.label ?? artifact.url}
+      </a>
+    );
+  }
+  const href = props.fileHref?.(artifact);
+  return (
+    <>
+      {href === undefined ? (
+        <span>{artifact.label ?? artifact.file.name}</span>
+      ) : (
+        <a href={href} rel="nofollow ugc">
+          {artifact.label ?? artifact.file.name}
+        </a>
+      )}{" "}
+      <span className="sc-muted">
+        {artifact.label === null ? "" : `${artifact.file.name}, `}
+        {formatBytes(artifact.file.size)}
+      </span>
+    </>
+  );
+}
+
+export interface RunListProps {
+  readonly runs: readonly RestRun[];
+  readonly decisionHref?: ((decisionId: string) => string) | undefined;
+  readonly fileHref?: ((artifact: RestArtifact) => string) | undefined;
+  readonly docHref?: ((path: string) => string) | undefined;
+  readonly onAbandon?: ((run: RestRun) => void) | undefined;
+  readonly busy?: boolean | undefined;
+  readonly empty?: ReactNode;
+}
+
+export function RunList(props: RunListProps) {
+  if (props.runs.length === 0) {
+    return <>{props.empty ?? null}</>;
+  }
+  return (
+    <div className="sc-runs">
+      {props.runs.map((run) => (
+        <RunCard
+          key={run.id}
+          run={run}
+          decisionHref={props.decisionHref}
+          fileHref={props.fileHref}
+          docHref={props.docHref}
+          onAbandon={props.onAbandon}
+          busy={props.busy}
+        />
+      ))}
+    </div>
+  );
+}