@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/src/automation/Automation.tsx

@@ -0,0 +1,308 @@
+import { CheckIcon, TableIcon, WarningCircleIcon } from "@phosphor-icons/react";
+import { useId, type ReactNode } from "react";
+
+import type { AppDirectory } from "../AgentAbout";
+import { joined, useKit, useParts } from "../kit/context";
+import { List, Row } from "../kit/List";
+import { Stat, Stats } from "../kit/Stat";
+import { Switch } from "../kit/Switch";
+import { Tag } from "../kit/Tag";
+import { AppMark, ByMark, TriggerMark, USES } from "./marks";
+import type { AutomationMessages } from "./messages";
+import type { Automation as Shown, AutomationState, Board, Run, Step, Trigger } from "./types";
+import { lineOf, momentOf } from "./when";
+
+export interface AutomationProps {
+  automation: Shown;
+  /** Its newest runs, newest first; without them the part is left out. */
+  runs?: readonly Run[] | undefined;
+  /** Switching it on and off, the host's call; without it there is no switch (a conversation's). */
+  onSwitch?: ((on: boolean) => void) | undefined;
+  /** The switch's change is on its way: it holds still. */
+  switching?: boolean | undefined;
+  /** The host's controls after the switch (taking a contact's task away). */
+  actions?: ReactNode | undefined;
+  /** Opening a run's record; without it the runs only read. */
+  onOpenRun?: ((run: Run) => void) | undefined;
+  /** The run open beside it, marked in the list. */
+  openRun?: string | null | undefined;
+  /** The host's logos for apps; without them an app shows the logo the API gives. */
+  apps?: AppDirectory | undefined;
+  /** What time it is, for the words that say when; now by default. */
+  now?: Date | undefined;
+  className?: string | undefined;
+}
+
+/** How the state reads on its pill: running well, paused, or its last run failed. */
+const STATE_TONES: Readonly<Record<AutomationState, "success" | "danger" | undefined>> = {
+  active: "success",
+  paused: undefined,
+  failing: "danger",
+};
+
+/** The values of its table shown as figures; the rest are counted after them. */
+const SHOWN_COUNTS = 4;
+
+/**
+ * One automation, as its owner reads it: a head with what starts it (a clock, a webhook, the
+ * app whose event it waits for) as a 40px mark, its title, when it runs in words with its next
+ * run, and how it stands (with the host's switch, when it gives one); the owner's own sentence of
+ * what it does, set apart; its steps, numbered, each with what it uses; the table it moves, as a
+ * figure per value; and its runs, each with what started it and when, its line, how it ended.
+ * It only draws: switching it and opening a run are the host's (`onSwitch`, `onOpenRun`).
+ */
+export function Automation({
+  automation,
+  runs,
+  onSwitch,
+  switching,
+  actions,
+  onOpenRun,
+  openRun,
+  apps,
+  now = new Date(),
+  className,
+}: AutomationProps) {
+  const part = useParts();
+  const { messages, code } = useKit();
+  const words = messages.automation;
+  const title = useId();
+  return (
+    <section aria-labelledby={title} className={joined(part("sc-automation"), className)}>
+      <header className={part("sc-automation__head")}>
+        <TriggerMark trigger={automation.trigger} size={40} apps={apps} />
+        <div className={part("sc-automation__heading")}>
+          <h3 id={title} className={part("sc-automation__title")}>
+            {automation.title}
+          </h3>
+          <p className={part("sc-automation__when")}>{lineOf(automation, now, words, code)}</p>
+        </div>
+        <div className={part("sc-automation__end")}>
+          <Tag tone={STATE_TONES[automation.state]}>
+            <i aria-hidden className={part("sc-automation__dot")} />
+            {words.states[automation.state]}
+          </Tag>
+          {onSwitch !== undefined && (
+            <Switch
+              checked={automation.on}
+              onChange={onSwitch}
+              label={words.switchLabel}
+              disabled={switching}
+            />
+          )}
+          {actions}
+        </div>
+      </header>
+      {automation.summary !== "" && (
+        <p className={part("sc-automation__summary")}>{automation.summary}</p>
+      )}
+      {automation.steps.length > 0 && <Steps steps={automation.steps} words={words} apps={apps} />}
+      {automation.board !== null && automation.board.counts.length > 0 && (
+        <BoardView board={automation.board} words={words} />
+      )}
+      {runs !== undefined && (
+        <Runs
+          runs={runs}
+          trigger={automation.trigger}
+          words={words}
+          apps={apps}
+          now={now}
+          code={code}
+          onOpenRun={onOpenRun}
+          openRun={openRun ?? null}
+        />
+      )}
+    </section>
+  );
+}
+
+/** A part of it under its small label. */
+function Part({ label, children }: { label: ReactNode; children: ReactNode }) {
+  const part = useParts();
+  const id = useId();
+  return (
+    <section aria-labelledby={id} className={part("sc-automation__section")}>
+      <h4 id={id} className={part("sc-automation__label")}>
+        {label}
+      </h4>
+      {children}
+    </section>
+  );
+}
+
+/** Its steps in the code's order: a number, the step's name, and what it uses at the right. */
+function Steps({
+  steps,
+  words,
+  apps,
+}: {
+  steps: readonly Step[];
+  words: AutomationMessages;
+  apps: AppDirectory | undefined;
+}) {
+  const part = useParts();
+  return (
+    <Part label={words.steps}>
+      <ol className={part("sc-automation__steps")}>
+        {steps.map((step, index) => (
+          <li key={`${index}:${step.name}`} className={part("sc-automation__step")}>
+            <span aria-hidden className={part("sc-automation__number")}>
+              {index + 1}
+            </span>
+            <span className={part("sc-automation__name")}>{step.name}</span>
+            {step.uses.length > 0 && (
+              <span className={part("sc-automation__uses")}>
+                {step.uses.map((use, at) => {
+                  const key = `${at}:${use.kind}:${use.app ?? ""}`;
+                  if (use.kind !== "app") {
+                    const Glyph = USES[use.kind];
+                    return (
+                      <span key={key} className={part("sc-automation__use")}>
+                        <Glyph aria-hidden weight="regular" />
+                        {words.uses[use.kind]}
+                      </span>
+                    );
+                  }
+                  const name = use.title ?? use.app ?? "";
+                  return (
+                    <span key={key} className={part("sc-automation__use")}>
+                      <AppMark name={name} icon={use.icon} size={18} apps={apps} />
+                      {name}
+                    </span>
+                  );
+                })}
+              </span>
+            )}
+          </li>
+        ))}
+      </ol>
+    </Part>
+  );
+}
+
+const capital = (text: string): string => text.charAt(0).toUpperCase() + text.slice(1);
+
+/** The table it moves: its title, then a figure per value (the biggest few, and how many more). */
+function BoardView({ board, words }: { board: Board; words: AutomationMessages }) {
+  const part = useParts();
+  const shown = board.counts.slice(0, SHOWN_COUNTS);
+  const more = board.counts.length - shown.length;
+  return (
+    <Part
+      label={
+        <>
+          <TableIcon aria-hidden />
+          {board.title}
+        </>
+      }
+    >
+      <div className={part("sc-automation__board")}>
+        <Stats label={board.title}>
+          {shown.map((count) => (
+            <Stat key={count.value} label={capital(count.value)} value={count.count} />
+          ))}
+        </Stats>
+        {more > 0 && <span className={part("sc-automation__more")}>{words.more(more)}</span>}
+      </div>
+    </Part>
+  );
+}
+
+/**
+ * Its runs, newest first: what started each (its mark, when, by what), its line, why it failed
+ * in the danger tone, and at the right a check once it went well; a test's line says what it
+ * would have done.
+ */
+function Runs({
+  runs,
+  trigger,
+  words,
+  apps,
+  now,
+  code,
+  onOpenRun,
+  openRun,
+}: {
+  runs: readonly Run[];
+  trigger: Trigger;
+  words: AutomationMessages;
+  apps: AppDirectory | undefined;
+  now: Date;
+  code: string;
+  onOpenRun: ((run: Run) => void) | undefined;
+  openRun: string | null;
+}) {
+  const part = useParts();
+  const app = trigger.app_title ?? trigger.app;
+  return (
+    <Part label={words.runs}>
+      {runs.length === 0 ? (
+        <p className={part("sc-automation__empty")}>{words.noRuns}</p>
+      ) : (
+        <div className={part("sc-automation__runs")}>
+          <List>
+            {runs.map((run) => (
+              <Row
+                key={run.id}
+                className={run.id === openRun ? part("sc-automation__run--open") : undefined}
+                mark={
+                  <span
+                    role="img"
+                    aria-label={words.by(run.by, app)}
+                    title={words.by(run.by, app)}
+                    className={part("sc-run__by")}
+                  >
+                    <ByMark by={run.by} trigger={trigger} size={28} apps={apps} />
+                  </span>
+                }
+                title={momentOf(new Date(run.started_at), now, words, code)}
+                subtitle={
+                  run.summary === null ? undefined : run.dry ? words.dry(run.summary) : run.summary
+                }
+                error={
+                  run.status === "failed" && run.error !== null ? (
+                    <span>
+                      <WarningCircleIcon aria-hidden weight="fill" />
+                      {run.error}
+                    </span>
+                  ) : undefined
+                }
+                meta={<RunStatus run={run} words={words} />}
+                onPress={onOpenRun && (() => onOpenRun(run))}
+              />
+            ))}
+          </List>
+        </div>
+      )}
+    </Part>
+  );
+}
+
+/**
+ * How a run stands, at its row's right: a check once done; the words while it goes, waits or was
+ * skipped; nothing once it failed (its error says so, under it).
+ */
+function RunStatus({ run, words }: { run: Run; words: AutomationMessages }) {
+  const part = useParts();
+  switch (run.status) {
+    case "done":
+      return (
+        <span role="img" aria-label={words.statuses.done} className={part("sc-automation__status")}>
+          <CheckIcon aria-hidden weight="bold" />
+        </span>
+      );
+    case "failed":
+      return null;
+    case "running":
+      return (
+        <Tag tone="info">
+          <i aria-hidden className={part("sc-run__live")} />
+          {words.statuses.running}
+        </Tag>
+      );
+    case "waiting":
+      return <Tag tone="warning">{words.statuses.waiting}</Tag>;
+    case "skipped":
+      return <Tag>{words.statuses.skipped}</Tag>;
+  }
+}

package/src/automation/RunView.tsx

@@ -0,0 +1,213 @@
+import { ChatCircleIcon, ChatsCircleIcon } from "@phosphor-icons/react";
+import { useId } from "react";
+
+import type { AppDirectory } from "../AgentAbout";
+import { Button } from "../kit/Button";
+import { joined, useKit, useParts } from "../kit/context";
+import { Note } from "../kit/Note";
+import { Tag } from "../kit/Tag";
+import { ByMark, callMark } from "./marks";
+import type { AutomationMessages } from "./messages";
+import { appOf, groupsOf, namingOf, type Names, type StepGroup } from "./record";
+import type { Automation, RunRecord, RunStatus } from "./types";
+import { momentOf, tookOf } from "./when";
+
+export interface RunViewProps {
+  run: RunRecord;
+  /** The automation it is a run of: its steps' order, its apps' names and logos, its table. */
+  automation?: Automation | null | undefined;
+  /** Opening a conversation the run opened, or the one it was asked in; without it, none opens. */
+  onOpenConversation?: ((id: string) => void) | undefined;
+  /** The host's logos for apps; without them an app shows the logo the API gives. */
+  apps?: AppDirectory | undefined;
+  /** What time it is, for the words that say when; now by default. */
+  now?: Date | undefined;
+  className?: string | undefined;
+}
+
+const STATUS_TONES: Readonly<
+  Record<RunStatus, "success" | "danger" | "info" | "warning" | undefined>
+> = {
+  running: "info",
+  waiting: "warning",
+  done: "success",
+  failed: "danger",
+  skipped: undefined,
+};
+
+/**
+ * One run, as its owner reads it: a head with what started it, when, how long it took and how it
+ * stands; the line it returned (a test's, as what it would have done); why it failed, in words;
+ * then what it did, step by step in the code's order, each call in words ("Buscó en Gmail",
+ * "Añadió una fila a Citas"; a test's writes as "Habría…"), the same call in a row once with how
+ * many; and the conversations it opened, each opening through the host.
+ */
+export function RunView({
+  run,
+  automation = null,
+  onOpenConversation,
+  apps,
+  now = new Date(),
+  className,
+}: RunViewProps) {
+  const part = useParts();
+  const { messages, code } = useKit();
+  const words = messages.automation;
+  const title = useId();
+  const names = namingOf(automation);
+  const groups = groupsOf(run.steps, words.calls, names);
+  const order = (automation?.steps ?? []).map((step) => step.name);
+  const app = automation?.trigger.app_title ?? automation?.trigger.app ?? null;
+  // What started it is its mark's to show; its words are the mark's name, and its hint.
+  const by = words.by(run.by, app);
+  const took = tookOf(run, words);
+  return (
+    <article aria-labelledby={title} className={joined(part("sc-run"), className)}>
+      <header className={part("sc-run__head")}>
+        <span role="img" aria-label={by} title={by} className={part("sc-run__by")}>
+          <ByMark by={run.by} trigger={automation?.trigger ?? null} size={40} apps={apps} />
+        </span>
+        <div className={part("sc-run__heading")}>
+          <h3 id={title} className={part("sc-run__title")}>
+            {run.title}
+          </h3>
+          <p className={part("sc-run__meta")}>
+            {momentOf(new Date(run.started_at), now, words, code)}
+          </p>
+        </div>
+        <div className={part("sc-run__end")}>
+          <Tag tone={STATUS_TONES[run.status]}>
+            {run.status === "running" && <i aria-hidden className={part("sc-run__live")} />}
+            {words.statuses[run.status]}
+          </Tag>
+          {took !== null && <span className={part("sc-run__took")}>{took}</span>}
+        </div>
+      </header>
+      {run.summary !== null && (
+        <p className={part("sc-run__summary")}>{run.dry ? words.dry(run.summary) : run.summary}</p>
+      )}
+      {run.status === "failed" && run.error !== null && <Note tone="danger">{run.error}</Note>}
+      {groups.length === 0 ? (
+        run.status !== "running" && <p className={part("sc-run__empty")}>{words.noCalls}</p>
+      ) : (
+        <ol className={part("sc-run__steps")}>
+          {groups.map((group, index) => (
+            <Group
+              key={`${index}:${group.step ?? ""}`}
+              group={group}
+              number={group.step === null ? null : order.indexOf(group.step) + 1 || index + 1}
+              names={names}
+              words={words}
+              apps={apps}
+            />
+          ))}
+        </ol>
+      )}
+      {run.status === "running" && (
+        <p className={part("sc-run__empty")}>
+          <i aria-hidden className={part("sc-run__live")} />
+          {words.statuses.running}
+        </p>
+      )}
+      {onOpenConversation !== undefined &&
+        (run.opened.length > 0 || run.conversation_id !== null) && (
+          <Links run={run} words={words} onOpen={onOpenConversation} />
+        )}
+    </article>
+  );
+}
+
+/** One step of the run: its number and name, then its calls in words. */
+function Group({
+  group,
+  number,
+  names,
+  words,
+  apps,
+}: {
+  group: StepGroup;
+  number: number | null;
+  names: Names;
+  words: AutomationMessages;
+  apps: AppDirectory | undefined;
+}) {
+  const part = useParts();
+  return (
+    <li className={part("sc-run__step")}>
+      <p className={part("sc-run__name")}>
+        <span aria-hidden className={part("sc-run__number")}>
+          {number ?? "·"}
+        </span>
+        {group.step ?? words.outside}
+      </p>
+      <ul className={part("sc-run__calls")}>
+        {group.lines.map((line) => {
+          const first = line.calls[0];
+          const alias = first ? appOf(first.call) : null;
+          return (
+            <li
+              key={line.seq}
+              className={part(
+                "sc-run__call",
+                ...(line.would ? (["sc-run__call--would"] as const) : []),
+                ...(line.error !== null ? (["sc-run__call--failed"] as const) : []),
+              )}
+            >
+              {first &&
+                callMark(
+                  first,
+                  alias === null ? null : { name: names.app(alias), icon: names.icon(alias) },
+                  apps,
+                  20,
+                )}
+              <span>
+                {line.text}
+                {line.count > 1 && (
+                  <span className={part("sc-run__count")}> {words.times(line.count)}</span>
+                )}
+                {line.error !== null && <span className={part("sc-run__error")}>{line.error}</span>}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </li>
+  );
+}
+
+/** The conversation it was asked in, then the ones it opened: each a button the host opens. */
+function Links({
+  run,
+  words,
+  onOpen,
+}: {
+  run: RunRecord;
+  words: AutomationMessages;
+  onOpen: (id: string) => void;
+}) {
+  const part = useParts();
+  const asked = run.conversation_id;
+  return (
+    <>
+      {asked !== null && (
+        <div className={part("sc-run__links")}>
+          <Button size="sm" icon={ChatCircleIcon} onClick={() => onOpen(asked)}>
+            {words.askedIn}
+          </Button>
+        </div>
+      )}
+      {run.opened.length > 0 && (
+        <section className={part("sc-run__section")}>
+          <h4 className={part("sc-run__label")}>{words.opened}</h4>
+          <div className={part("sc-run__links")}>
+            {run.opened.map((id, index) => (
+              <Button key={id} size="sm" icon={ChatsCircleIcon} onClick={() => onOpen(id)}>
+                {words.conversation(index + 1)}
+              </Button>
+            ))}
+          </div>
+        </section>
+      )}
+    </>
+  );
+}