@skillcdn/console 0.1.6 → 0.1.8

package/src/components/ui.tsx

@@ -0,0 +1,219 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { PersonRole, RestPerson, TaskPriority, TaskState } from "../api.js";
+import { useLanguage, useWords } from "../i18n/index.js";
+
+// Small building blocks. Each one is a class in styles/console.css and nothing more. Classes
+// are prefixed `sc-` so that a custom console's own styles never collide with them. The words
+// come from the language the page is in (ADR-0012).
+
+export function cx(...names: (string | false | undefined)[]): string {
+  return names.filter(Boolean).join(" ");
+}
+
+export function Button(
+  props: ButtonHTMLAttributes<HTMLButtonElement> & {
+    readonly variant?: "primary" | "secondary" | "ghost" | "danger";
+    readonly size?: "md" | "sm";
+  },
+) {
+  const { variant = "secondary", size = "md", className, type = "button", ...rest } = props;
+  return (
+    <button
+      {...rest}
+      type={type}
+      className={cx(
+        "sc-button",
+        `sc-button-${variant}`,
+        size === "sm" && "sc-button-sm",
+        className,
+      )}
+    />
+  );
+}
+
+export function Badge(props: {
+  readonly tone?: "neutral" | "accent" | "point" | "success" | "warning" | "danger";
+  readonly title?: string;
+  readonly children: ReactNode;
+}) {
+  return (
+    <span className={cx("sc-badge", `sc-badge-${props.tone ?? "neutral"}`)} title={props.title}>
+      {props.children}
+    </span>
+  );
+}
+
+export function Callout(props: {
+  readonly tone?: "info" | "warning" | "danger";
+  readonly title?: string;
+  readonly children?: ReactNode;
+  readonly action?: ReactNode;
+}) {
+  const tone = props.tone ?? "info";
+  return (
+    <div
+      className={cx("sc-callout", `sc-callout-${tone}`)}
+      role={tone === "danger" ? "alert" : "status"}
+    >
+      <div>
+        {props.title !== undefined && <p className="sc-callout-title">{props.title}</p>}
+        {props.children !== undefined && <div className="sc-callout-body">{props.children}</div>}
+      </div>
+      {props.action}
+    </div>
+  );
+}
+
+/**
+ * A person's picture as the git host serves it: loaded lazily, without a referrer, and gone as
+ * a whole when there is none or it cannot be loaded, leaving the initial of the login instead.
+ */
+export function Avatar(props: { readonly person: RestPerson; readonly size?: "sm" | "md" | "lg" }) {
+  const size = props.size ?? "md";
+  const initial = props.person.login.slice(0, 1).toUpperCase();
+  if (props.person.avatar === null) {
+    return (
+      <span
+        className={cx("sc-avatar", "sc-avatar-initial", `sc-avatar-${size}`)}
+        aria-hidden="true"
+      >
+        {initial}
+      </span>
+    );
+  }
+  return (
+    <img
+      className={cx("sc-avatar", `sc-avatar-${size}`)}
+      src={props.person.avatar}
+      alt=""
+      loading="lazy"
+      decoding="async"
+      referrerPolicy="no-referrer"
+    />
+  );
+}
+
+/** A person, as a picture and a name, wherever one is named. */
+export function PersonChip(props: { readonly person: RestPerson; readonly size?: "sm" | "md" }) {
+  return (
+    <span className="sc-person" title={props.person.name ?? props.person.login}>
+      <Avatar person={props.person} size={props.size ?? "sm"} />
+      <span className="sc-person-login">{props.person.login}</span>
+    </span>
+  );
+}
+
+/** The words of the vocabulary as people read them, in English: the default pack's. */
+export const STATE_LABELS: Readonly<Record<TaskState, string>> = {
+  idea: "Idea",
+  ready: "Ready",
+  in_progress: "In progress",
+  in_review: "In review",
+  done: "Done",
+  dropped: "Dropped",
+};
+
+export const PRIORITY_LABELS: Readonly<Record<TaskPriority, string>> = {
+  low: "Low",
+  normal: "Normal",
+  high: "High",
+  urgent: "Urgent",
+};
+
+export const ROLE_LABELS: Readonly<Record<PersonRole, string>> = {
+  admin: "Administrator",
+  member: "Member",
+};
+
+export function RoleBadge(props: { readonly role: PersonRole }) {
+  const words = useWords();
+  return (
+    <Badge tone={props.role === "admin" ? "point" : "neutral"}>
+      {words.vocabulary.role[props.role]}
+    </Badge>
+  );
+}
+
+export function StateBadge(props: { readonly state: TaskState }) {
+  const words = useWords();
+  const tone =
+    props.state === "done"
+      ? "success"
+      : props.state === "dropped"
+        ? "neutral"
+        : props.state === "in_progress" || props.state === "in_review"
+          ? "accent"
+          : "neutral";
+  return <Badge tone={tone}>{words.vocabulary.state[props.state]}</Badge>;
+}
+
+export function PriorityBadge(props: { readonly priority: TaskPriority }) {
+  const words = useWords();
+  if (props.priority === "normal") {
+    return null;
+  }
+  const tone =
+    props.priority === "urgent" ? "danger" : props.priority === "high" ? "point" : "neutral";
+  return <Badge tone={tone}>{words.vocabulary.priority[props.priority]}</Badge>;
+}
+
+export function Spinner(props: { readonly label: string }) {
+  return (
+    <span className="sc-spinner" role="status">
+      <span className="sc-spinner-ring" aria-hidden="true" />
+      <span className="sc-visually-hidden">{props.label}</span>
+    </span>
+  );
+}
+
+/** Where there is nothing yet, said plainly, with the way to the first thing. */
+export function EmptyState(props: {
+  readonly title: string;
+  readonly body?: string;
+  readonly action?: ReactNode;
+}) {
+  return (
+    <div className="sc-empty">
+      <p className="sc-empty-title">{props.title}</p>
+      {props.body !== undefined && <p className="sc-empty-body">{props.body}</p>}
+      {props.action !== undefined && <div className="sc-empty-action">{props.action}</div>}
+    </div>
+  );
+}
+
+/** An instant as people read one in a language: the date, and the time of day. */
+export function formatInstant(iso: string, language?: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return iso;
+  }
+  return date.toLocaleString(language, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+/** A size in bytes as people read one: `12 B`, `3.4 KB`, `120 MB`. */
+export function formatBytes(size: number): string {
+  if (size < 1024) {
+    return `${size} B`;
+  }
+  const kb = size / 1024;
+  if (kb < 1024) {
+    return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)} KB`;
+  }
+  const mb = kb / 1024;
+  return `${mb < 10 ? mb.toFixed(1) : Math.round(mb)} MB`;
+}
+
+export function Time(props: { readonly iso: string }) {
+  const { tag } = useLanguage();
+  return (
+    <time className="sc-time" dateTime={props.iso}>
+      {formatInstant(props.iso, tag)}
+    </time>
+  );
+}

package/src/connect-page.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useState } from "react";
+import {
+  ApiError,
+  normalizeConnectCode,
+  type RestConnectRequest,
+  type RestTokenInput,
+} from "./api.js";
+import { ConnectApproval, ConnectCodeForm } from "./components/connect.js";
+import { Callout, Spinner } from "./components/ui.js";
+import type { ConsoleData } from "./data.js";
+import { useWords } from "./i18n/index.js";
+import { connectHref, type Navigation, PATHS } from "./router.js";
+import { useAction } from "./use-action.js";
+
+// The page where a person connects their agent (ADR-0011): the code typed when the address
+// does not carry one, what asks under it, the approval, and what came of it. Part of the
+// default composition; a custom console composes the same components its own way.
+
+export interface ConnectPageProps {
+  /** The code in the address, as typed or followed, or nothing. */
+  readonly code: string | undefined;
+  readonly data: ConsoleData;
+  readonly navigation: Navigation;
+}
+
+export function ConnectPage(props: ConnectPageProps) {
+  const words = useWords().connect;
+  const { data, navigation } = props;
+  const code = props.code === undefined ? undefined : normalizeConnectCode(props.code);
+  const [request, setRequest] = useState<RestConnectRequest | undefined>(undefined);
+  const [problem, setProblem] = useState<string | undefined>(undefined);
+  const [outcome, setOutcome] = useState<"approved" | "denied" | undefined>(undefined);
+  const { busy, error, act } = useAction();
+  const { connectRequest } = data.actions;
+
+  // What asks under the code, read once the page is on one.
+  useEffect(() => {
+    setRequest(undefined);
+    setProblem(undefined);
+    setOutcome(undefined);
+    if (code === undefined) {
+      return;
+    }
+    const controller = new AbortController();
+    connectRequest(code, controller.signal)
+      .then((found) => {
+        if (!controller.signal.aborted) {
+          setRequest(found);
+        }
+      })
+      .catch((failure: unknown) => {
+        if (controller.signal.aborted) {
+          return;
+        }
+        setProblem(
+          failure instanceof ApiError && failure.code === "connect.not_found"
+            ? words.noSuchCode
+            : failure instanceof ApiError
+              ? failure.message
+              : words.couldNotAsk,
+        );
+      });
+    return () => controller.abort();
+  }, [code, connectRequest, words]);
+
+  const head = (
+    <div className="sc-page-head">
+      <h1 className="sc-page-title">{words.title}</h1>
+    </div>
+  );
+  const ask = (
+    <>
+      <p className="sc-lead">{words.lead}</p>
+      <section className="sc-panel" aria-label={words.aria}>
+        <ConnectCodeForm busy={busy} onSubmit={(typed) => navigation.go(connectHref(typed))} />
+      </section>
+    </>
+  );
+
+  if (outcome === "approved" && request !== undefined) {
+    return (
+      <>
+        {head}
+        <Callout tone="info" title={words.approved.title(request.agent)}>
+          <p>
+            {words.approved.body} <a href={PATHS.agents}>{words.approved.agentsPage}</a>
+          </p>
+        </Callout>
+      </>
+    );
+  }
+  if (outcome === "denied") {
+    return (
+      <>
+        {head}
+        <Callout tone="info" title={words.denied.title}>
+          <p>{words.denied.body}</p>
+        </Callout>
+        {ask}
+      </>
+    );
+  }
+  if (code === undefined || problem !== undefined) {
+    return (
+      <>
+        {head}
+        {props.code !== undefined && code === undefined && (
+          <Callout tone="warning">{words.notACode}</Callout>
+        )}
+        {problem !== undefined && <Callout tone="warning">{problem}</Callout>}
+        {ask}
+      </>
+    );
+  }
+  if (request === undefined) {
+    return (
+      <>
+        {head}
+        <div className="sc-loading">
+          <Spinner label={words.lookingUp} />
+        </div>
+      </>
+    );
+  }
+  return (
+    <>
+      {head}
+      <ConnectApproval
+        request={request}
+        daysAtMost={data.me?.workspace.tokenDaysAtMost}
+        busy={busy}
+        error={error}
+        onApprove={(input: RestTokenInput) =>
+          void act(async () => {
+            await data.actions.approveConnection(code, input);
+            setOutcome("approved");
+          })
+        }
+        onDeny={() =>
+          void act(async () => {
+            await data.actions.denyConnection(code);
+            setOutcome("denied");
+          })
+        }
+      />
+    </>
+  );
+}

package/src/connect.ts

@@ -0,0 +1,27 @@
+// A short code a person reads off their agent's screen and types, or follows, on the console's
+// own pages to connect the agent (ADR-0011): eight characters from an alphabet without
+// look-alikes, in two groups of four. The server makes codes; everything else reads them.
+
+/** The characters a code is made of: no `0`, `1`, `I` or `O`, which read alike. */
+export const CONNECT_CODE_ALPHABET = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
+export const CONNECT_CODE_LENGTH = 8;
+
+const CODE = /^[A-HJ-NP-Z2-9]{4}-[A-HJ-NP-Z2-9]{4}$/;
+
+/** Whether the text is a code as it is written: upper case, a hyphen in the middle. */
+export function isConnectCode(text: string): boolean {
+  return CODE.test(text);
+}
+
+/**
+ * The code as it is written, from what a person typed: any case, with or without the hyphen,
+ * spaces around or between; or nothing for text that is not a code.
+ */
+export function normalizeConnectCode(text: string): string | undefined {
+  const letters = text.toUpperCase().replaceAll(/[^A-Z0-9]/g, "");
+  if (letters.length !== CONNECT_CODE_LENGTH) {
+    return undefined;
+  }
+  const code = `${letters.slice(0, 4)}-${letters.slice(4)}`;
+  return CODE.test(code) ? code : undefined;
+}