@signalcore/ui 0.1.0 → 1.0.0-beta.0

package/src/kit/waveform.ts

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+
+/** The most a file may weigh to be drawn as its waveform: past it, it draws even. */
+const MOST_BYTES = 8 * 1024 * 1024;
+
+/** An audio as drawn: its bars' heights, and how long it is (what an Ogg doesn't say upfront). */
+export interface Waveform {
+  heights: number[];
+  seconds: number;
+}
+
+const drawn = new Map<string, Promise<Waveform | null>>();
+
+/**
+ * An audio's waveform as `bars` heights between 0 and 1 (each stretch's energy, the strongest at
+ * 1), and its length. Read once per address and kept; null while it is read, and for audio the
+ * browser can't read (or too heavy to), which draws even.
+ */
+export function useWaveform(src: string | undefined, bars: number): Waveform | null {
+  const [heights, setHeights] = useState<Waveform | null>(null);
+  useEffect(() => {
+    if (src === undefined) return;
+    let live = true;
+    const key = `${String(bars)} ${src}`;
+    let reading = drawn.get(key);
+    if (reading === undefined) {
+      reading = read(src, bars);
+      drawn.set(key, reading);
+    }
+    void reading.then((read) => {
+      if (live) setHeights(read);
+    });
+    return () => {
+      live = false;
+    };
+  }, [src, bars]);
+  return heights;
+}
+
+async function read(src: string, bars: number): Promise<Waveform | null> {
+  try {
+    const response = await fetch(src, { credentials: "same-origin" });
+    if (!response.ok) return null;
+    if (Number(response.headers.get("content-length") ?? 0) > MOST_BYTES) return null;
+    const context = new AudioContext();
+    try {
+      const audio = await context.decodeAudioData(await response.arrayBuffer());
+      return { heights: energies(audio, bars), seconds: audio.duration };
+    } finally {
+      void context.close();
+    }
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * The energy (root mean square) of each of `bars` even stretches, the strongest channel's, scaled
+ * so the strongest stretch is 1: speech reads as its syllables and pauses, where the loudest
+ * sample of each would stand nearly even.
+ */
+export function energies(
+  audio: Pick<AudioBuffer, "numberOfChannels" | "getChannelData">,
+  bars: number,
+): number[] {
+  const channels = Array.from({ length: audio.numberOfChannels }, (_, index) =>
+    audio.getChannelData(index),
+  );
+  const length = channels[0]?.length ?? 0;
+  const stretch = Math.max(1, Math.floor(length / bars));
+  const found = Array.from({ length: bars }, (_, bar) => {
+    const from = bar * stretch;
+    const to = Math.min(length, from + stretch);
+    let strongest = 0;
+    for (const data of channels) {
+      let sum = 0;
+      for (let at = from; at < to; at += 1) sum += (data[at] ?? 0) ** 2;
+      strongest = Math.max(strongest, to > from ? Math.sqrt(sum / (to - from)) : 0);
+    }
+    return strongest;
+  });
+  const top = Math.max(...found, 0);
+  return top === 0 ? found.map(() => 0) : found.map((value) => value / top);
+}

package/src/locale.ts

@@ -0,0 +1,6 @@
+/**
+ * The languages a surface's dates can be read in, for `locale`: react-day-picker's (date-fns's,
+ * with the calendar's own words), so a host need not depend on it. `import { es } from
+ * "@signalcore/ui/locale"`.
+ */
+export * from "react-day-picker/locale";

package/src/markdown.ts

@@ -0,0 +1,69 @@
+/**
+ * The little Markdown an agent's words use, read into a tree the renderer draws: headings,
+ * paragraphs and bullet lists, with bold, italic, code and links inside. No library: this is all
+ * a surface's text (and a file of notes) needs, and what it cannot read it shows as written.
+ */
+
+export type Inline =
+  | { kind: "text" | "strong" | "em" | "code"; text: string }
+  | { kind: "link"; text: string; href: string };
+
+export type Node =
+  | { kind: "heading"; level: number; inline: Inline[] }
+  | { kind: "paragraph"; inline: Inline[] }
+  | { kind: "list"; items: Inline[][] };
+
+/** `# Title`, up to six marks, a space, the words (closing marks dropped). */
+const HEADING = /^ {0,3}(#{1,6})\s+(.*?)(?:\s+#+)?\s*$/;
+const ITEM = /^\s*[-*]\s+(.*)$/;
+const INLINE = /`([^`]+)`|\*\*([^*]+)\*\*|\*([^*]+)\*|\[([^\]]+)\]\(([^)\s]+)\)/g;
+// The words are the agent's, not the host's: a link may open a page, never run anything.
+const SAFE_HREF = /^(https?:|mailto:)/i;
+
+export function parse(markdown: string): Node[] {
+  const nodes: Node[] = [];
+  let lines: string[] = [];
+  const paragraph = () => {
+    if (lines.length > 0) nodes.push({ kind: "paragraph", inline: inline(lines.join("\n")) });
+    lines = [];
+  };
+  for (const line of markdown.split("\n")) {
+    const heading = HEADING.exec(line);
+    const item = ITEM.exec(line);
+    if (heading) {
+      paragraph();
+      const [, marks = "#", text = ""] = heading;
+      nodes.push({ kind: "heading", level: marks.length, inline: inline(text) });
+    } else if (item) {
+      paragraph();
+      const last = nodes.at(-1);
+      const text = inline(item[1] ?? "");
+      if (last?.kind === "list") last.items.push(text);
+      else nodes.push({ kind: "list", items: [text] });
+    } else if (line.trim() === "") {
+      paragraph();
+    } else {
+      lines.push(line.trim());
+    }
+  }
+  paragraph();
+  return nodes;
+}
+
+export function inline(text: string): Inline[] {
+  const out: Inline[] = [];
+  let at = 0;
+  for (const match of text.matchAll(INLINE)) {
+    if (match.index > at) out.push({ kind: "text", text: text.slice(at, match.index) });
+    const [whole, code, strong, em, label, href] = match;
+    if (code !== undefined) out.push({ kind: "code", text: code });
+    else if (strong !== undefined) out.push({ kind: "strong", text: strong });
+    else if (em !== undefined) out.push({ kind: "em", text: em });
+    else if (label !== undefined && href !== undefined && SAFE_HREF.test(href)) {
+      out.push({ kind: "link", text: label, href });
+    } else out.push({ kind: "text", text: whole });
+    at = match.index + whole.length;
+  }
+  if (at < text.length) out.push({ kind: "text", text: text.slice(at) });
+  return out;
+}

package/src/marks.tsx

@@ -0,0 +1,328 @@
+import type { ReactNode } from "react";
+
+import type {
+  ActionSource,
+  AutomationKind,
+  ChannelKind,
+  DeviceKind,
+  Icon,
+  Provider,
+} from "./about";
+
+/**
+ * The marks Qué puede draws, each a 16-unit stroke glyph in `currentColor`: the icons a generated
+ * line may carry, the shipped actions' marks, the kinds of automation, and the simplest faithful
+ * glyph of each app, channel and device. No icon library: a host reads nothing but this package.
+ */
+
+const STROKE = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.5,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+} as const;
+
+interface GlyphProps {
+  /** A brand's own tint, set by the stylesheet on the mark alone. */
+  brand?: ChannelKind | undefined;
+}
+
+/** One glyph: the paths inside the shared frame. */
+function Glyph({ children, brand }: GlyphProps & { children: ReactNode }) {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden data-brand={brand} {...STROKE}>
+      {children}
+    </svg>
+  );
+}
+
+const message = (
+  <path d="M3 3h10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H7.6l-3.1 2.6V11H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" />
+);
+const phone = (
+  <path d="M4.3 2.5h2l1.1 2.9-1.5 1a7.3 7.3 0 0 0 3.7 3.7l1-1.5 2.9 1.1v2a1.2 1.2 0 0 1-1.3 1.2A10.5 10.5 0 0 1 3.1 3.8a1.2 1.2 0 0 1 1.2-1.3z" />
+);
+const mail = (
+  <>
+    <rect x="2.5" y="3.5" width="11" height="9" rx="1.5" />
+    <path d="m2.5 5.5 5.5 3.7 5.5-3.7" />
+  </>
+);
+const calendar = (
+  <>
+    <rect x="2.5" y="3.5" width="11" height="10" rx="1.5" />
+    <path d="M2.5 7h11M5.5 2v3M10.5 2v3" />
+  </>
+);
+const clock = (
+  <>
+    <circle cx="8" cy="8" r="5.75" />
+    <path d="M8 4.75V8l2.2 1.4" />
+  </>
+);
+const search = (
+  <>
+    <circle cx="7" cy="7" r="4.25" />
+    <path d="m10.2 10.2 3.3 3.3" />
+  </>
+);
+const file = (
+  <>
+    <path d="M4 2.5h5l3.5 3.5v7.5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1z" />
+    <path d="M9 2.5V6h3.5" />
+  </>
+);
+const table = (
+  <>
+    <rect x="2.5" y="3" width="11" height="10" rx="1.5" />
+    <path d="M2.5 6.5h11M6.5 6.5V13" />
+  </>
+);
+const bell = (
+  <>
+    <path d="M4 11V7.5a4 4 0 0 1 8 0V11l1 1.5H3z" />
+    <path d="M6.5 13.5a1.5 1.5 0 0 0 3 0" />
+  </>
+);
+const hand = (
+  <>
+    <path d="M5.5 8.2V4.5a1 1 0 0 1 2 0v3M7.5 7.5v-4a1 1 0 0 1 2 0v4M9.5 7.5V4.5a1 1 0 0 1 2 0v4.6" />
+    <path d="M5.5 8.2 4.4 7a1 1 0 0 0-1.6 1.2L5 11.6a3.6 3.6 0 0 0 3.1 1.9H9a2.5 2.5 0 0 0 2.5-2.5V9.1" />
+  </>
+);
+const user = (
+  <>
+    <circle cx="8" cy="5.5" r="2.75" />
+    <path d="M3 13.5a5 5 0 0 1 10 0" />
+  </>
+);
+const globe = (
+  <>
+    <circle cx="8" cy="8" r="5.75" />
+    <path d="M2.25 8h11.5M8 2.25c2 2.1 2 9.4 0 11.5M8 2.25c-2 2.1-2 9.4 0 11.5" />
+  </>
+);
+const code = <path d="m5.5 5-3 3 3 3M10.5 5l3 3-3 3M9.3 3.5 6.7 12.5" />;
+const lock = (
+  <>
+    <rect x="3.5" y="7" width="9" height="6.5" rx="1.5" />
+    <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" />
+  </>
+);
+const cart = (
+  <>
+    <path d="M2 3h1.8l1.4 7h7.3l1.3-5H4.4" />
+    <circle cx="6" cy="12.8" r=".9" fill="currentColor" stroke="none" />
+    <circle cx="11.5" cy="12.8" r=".9" fill="currentColor" stroke="none" />
+  </>
+);
+const card = (
+  <>
+    <rect x="2" y="3.5" width="12" height="9" rx="1.5" />
+    <path d="M2 6.5h12M4.5 10h3" />
+  </>
+);
+const map = (
+  <>
+    <path d="m2.5 4.5 3.5-1.5 4 1.5 3.5-1.5v9l-3.5 1.5-4-1.5-3.5 1.5z" />
+    <path d="M6 3v9M10 4.5v9" />
+  </>
+);
+const check = <path d="m3.5 8.5 3 3 6-7" />;
+const warning = (
+  <>
+    <path d="M8 2.5 14 13H2z" />
+    <path d="M8 6.5v3" />
+    <circle cx="8" cy="11.3" r=".8" fill="currentColor" stroke="none" />
+  </>
+);
+const sparkle = (
+  <>
+    <path d="M7 2.5c.4 2.9 1.5 4 4.4 4.4-2.9.4-4 1.5-4.4 4.4-.4-2.9-1.5-4-4.4-4.4C5.5 6.5 6.6 5.4 7 2.5z" />
+    <path d="M12.3 10.5c.2 1 .5 1.3 1.5 1.5-1 .2-1.3.5-1.5 1.5-.2-1-.5-1.3-1.5-1.5 1-.2 1.3-.5 1.5-1.5z" />
+  </>
+);
+
+const ICONS: Readonly<Record<Icon, ReactNode>> = {
+  message,
+  phone,
+  mail,
+  calendar,
+  clock,
+  search,
+  file,
+  table,
+  bell,
+  hand,
+  user,
+  globe,
+  code,
+  lock,
+  cart,
+  card,
+  map,
+  check,
+  warning,
+  sparkle,
+};
+
+/** The mark of a generated line. */
+export const iconOf = (icon: Icon): ReactNode => <Glyph>{ICONS[icon]}</Glyph>;
+
+const pane = (
+  <>
+    <rect x="2.5" y="3" width="11" height="10" rx="1.5" />
+    <path d="M2.5 6h11" />
+  </>
+);
+const brain = (
+  <>
+    <path d="M7.5 2.75a2.4 2.4 0 0 0-3.3 2.6 2.4 2.4 0 0 0-.4 4.4A2.4 2.4 0 0 0 7.5 13.3z" />
+    <path d="M8.5 2.75a2.4 2.4 0 0 1 3.3 2.6 2.4 2.4 0 0 1 .4 4.4 2.4 2.4 0 0 1-3.7 3.55z" />
+  </>
+);
+const book = (
+  <path d="M2.5 3.5H7a1 1 0 0 1 1 1v9a1 1 0 0 0-1-1H2.5zM13.5 3.5H9a1 1 0 0 0-1 1v9a1 1 0 0 1 1-1h4.5z" />
+);
+const bolt = <path d="M9 2 3.5 9h4L7 14l5.5-7h-4z" />;
+
+/** The shipped actions' marks, by name; an own action is code, one this package does not know a bolt. */
+const ACTIONS: Readonly<Record<string, ReactNode>> = {
+  show: pane,
+  ask_person: message,
+  escalate: hand,
+  notify: bell,
+  remember: brain,
+  recall: brain,
+  search_files: search,
+  load_skill: book,
+  browser_open: globe,
+  browser_read: globe,
+  browser_click: globe,
+  browser_fill: globe,
+  browser_scroll: globe,
+  browser_back: globe,
+  browser_submit: globe,
+  browser_hand_over: hand,
+};
+
+export const actionMark = (name: string, source: ActionSource): ReactNode => (
+  <Glyph>{source === "own" ? code : (ACTIONS[name] ?? bolt)}</Glyph>
+);
+
+const hook = (
+  <>
+    <path d="M2.5 8h7M7 5.5 9.5 8 7 10.5" />
+    <path d="M11 3.5h1.5a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H11" />
+  </>
+);
+
+const AUTOMATIONS: Readonly<Record<AutomationKind, ReactNode>> = {
+  schedule: clock,
+  webhook: hook,
+  event: bolt,
+};
+
+export const automationMark = (kind: AutomationKind): ReactNode => (
+  <Glyph>{AUTOMATIONS[kind]}</Glyph>
+);
+
+/** A letter alone: the simplest monogram of an app. */
+function Monogram({ letter }: { letter: string }) {
+  return (
+    <text
+      x="8"
+      y="12.25"
+      textAnchor="middle"
+      fontSize="12.5"
+      fontWeight="500"
+      fontFamily="inherit"
+      fill="currentColor"
+      stroke="none"
+    >
+      {letter}
+    </text>
+  );
+}
+
+const hexagon = (
+  <>
+    <path d="M8 1.75 13.4 4.9v6.2L8 14.25 2.6 11.1V4.9z" />
+    <circle cx="8" cy="8" r="1.4" fill="currentColor" stroke="none" />
+  </>
+);
+const braces = (
+  <path d="M6 2.5c-1.5 0-2 .6-2 2v1.8c0 1-.5 1.7-1.5 1.7 1 0 1.5.7 1.5 1.7v1.8c0 1.4.5 2 2 2M10 2.5c1.5 0 2 .6 2 2v1.8c0 1 .5 1.7 1.5 1.7-1 0-1.5.7-1.5 1.7v1.8c0 1.4-.5 2-2 2" />
+);
+
+const PROVIDERS: Readonly<Record<Provider, ReactNode>> = {
+  arcade: <Monogram letter="A" />,
+  composio: <Monogram letter="C" />,
+  mcp: hexagon,
+  api: braces,
+};
+
+/** An app's mark: its own, when the provider gives a URL; the provider's glyph otherwise. */
+export const providerMark = (provider: Provider, icon: string | undefined): ReactNode =>
+  icon === undefined ? <Glyph>{PROVIDERS[provider]}</Glyph> : <img src={icon} alt="" />;
+
+const whatsapp = (
+  <>
+    <path d="M8 2.25A5.75 5.75 0 0 0 3.1 11L2.3 13.7l2.8-.75A5.75 5.75 0 1 0 8 2.25z" />
+    <path
+      d="M6.2 5.3c.2-.3.5-.3.7-.3l.5 1.2c.1.2 0 .4-.1.5l-.4.4c.4.9 1.1 1.6 2 2l.4-.4c.1-.1.3-.2.5-.1l1.2.5c0 .2 0 .5-.3.7-.5.3-1.2.4-2.5-.5C6.9 8.4 6.3 7.3 6 6.1c-.1-.3 0-.6.2-.8z"
+      fill="currentColor"
+      stroke="none"
+    />
+  </>
+);
+const instagram = (
+  <>
+    <rect x="2.5" y="2.5" width="11" height="11" rx="3" />
+    <circle cx="8" cy="8" r="2.6" />
+    <circle cx="11.2" cy="4.8" r=".7" fill="currentColor" stroke="none" />
+  </>
+);
+const sms = (
+  <>
+    {message}
+    <circle cx="5.5" cy="7" r=".7" fill="currentColor" stroke="none" />
+    <circle cx="8" cy="7" r=".7" fill="currentColor" stroke="none" />
+    <circle cx="10.5" cy="7" r=".7" fill="currentColor" stroke="none" />
+  </>
+);
+
+const CHANNELS: Readonly<Record<ChannelKind, ReactNode>> = {
+  whatsapp,
+  instagram,
+  email: mail,
+  sms,
+  web: globe,
+  phone,
+};
+
+/** A channel's glyph, carrying its brand for the stylesheet's tint. */
+export const channelMark = (kind: ChannelKind): ReactNode => (
+  <Glyph brand={kind}>{CHANNELS[kind]}</Glyph>
+);
+
+const chrome = (
+  <>
+    <circle cx="8" cy="8" r="5.75" />
+    <circle cx="8" cy="8" r="2.25" />
+    <path d="M8 5.75h5.5M6.05 9.1 3.3 4.4M9.95 9.1l-2.7 4.6" />
+  </>
+);
+const panes = (
+  <>
+    <rect x="2.5" y="2.5" width="4.75" height="4.75" rx="1" />
+    <rect x="8.75" y="2.5" width="4.75" height="4.75" rx="1" />
+    <rect x="2.5" y="8.75" width="4.75" height="4.75" rx="1" />
+    <rect x="8.75" y="8.75" width="4.75" height="4.75" rx="1" />
+  </>
+);
+
+const DEVICES: Readonly<Record<DeviceKind, ReactNode>> = { extension: chrome, installer: panes };
+
+export const deviceMark = (kind: DeviceKind): ReactNode => <Glyph>{DEVICES[kind]}</Glyph>;

package/src/reveal.ts

@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * The words of a reply as they stream, shown at a reading pace. The model writes in bursts (often
+ * the whole answer in a second or two, after it has thought): drawn as they land they pop in
+ * rather than flow. Revealed a few characters a frame, faster the further behind, they flow like
+ * writing and never lag the stream by more than about a second.
+ */
+
+/** At least this many characters a frame: about 150 a second at 60 frames. */
+export const MIN_STEP = 2.5;
+/** Within about this many frames whatever is behind is shown. */
+export const CATCH_UP = 60;
+
+/** How many characters to show next frame, of `total`, having shown `shown`. */
+export function nextShown(shown: number, total: number): number {
+  if (shown >= total) return total;
+  const behind = total - shown;
+  return Math.min(total, shown + Math.max(MIN_STEP, behind / CATCH_UP));
+}
+
+/**
+ * `text` as far as it is revealed: from `from` characters on, a little more each frame until all
+ * of it shows. Text that starts again (a new reply) starts the reveal again; `onShown` hears how
+ * far it got, so another reveal can go on from there.
+ */
+export function useReveal(text: string, from = 0, onShown?: (count: number) => void): string {
+  const [shown, setShown] = useState(() => Math.min(from, text.length));
+  const told = useRef(onShown);
+  told.current = onShown;
+  const visible = Math.min(shown, text.length);
+
+  useEffect(() => {
+    if (visible >= text.length) return undefined;
+    if (typeof requestAnimationFrame === "undefined") {
+      setShown(text.length);
+      return undefined;
+    }
+    const frame = requestAnimationFrame(() => {
+      setShown((now) => nextShown(Math.min(now, text.length), text.length));
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+    };
+  }, [visible, text.length]);
+
+  useEffect(() => {
+    told.current?.(Math.floor(visible));
+  }, [visible]);
+
+  return text.slice(0, Math.floor(visible));
+}

package/src/stepGlyphs.ts

@@ -0,0 +1,83 @@
+import {
+  ArrowUUpLeftIcon,
+  ArrowsDownUpIcon,
+  BookOpenTextIcon,
+  BookmarkSimpleIcon,
+  CameraIcon,
+  ChatTeardropTextIcon,
+  CursorClickIcon,
+  DownloadSimpleIcon,
+  FilePlusIcon,
+  FileTextIcon,
+  GlobeSimpleIcon,
+  HandIcon,
+  MagicWandIcon,
+  MagnifyingGlassIcon,
+  NotePencilIcon,
+  PaperPlaneTiltIcon,
+  PlayIcon,
+  PlugIcon,
+  SlidersHorizontalIcon,
+  TextboxIcon,
+  VideoCameraIcon,
+  WrenchIcon,
+  type Icon,
+} from "@phosphor-icons/react";
+
+/**
+ * A step's glyph by its action: the kind of work it is, v2's (reading, writing, changing,
+ * searching, running, settings, asking, remembering, an app), so the list reads at a glance. An
+ * action this package does not know, an agent's own among them, is work: a wrench.
+ */
+const GLYPHS: Readonly<Record<string, Icon>> = {
+  show: WrenchIcon,
+  ask_person: ChatTeardropTextIcon,
+  escalate: ChatTeardropTextIcon,
+  notify: ChatTeardropTextIcon,
+  search_files: MagnifyingGlassIcon,
+  remember: BookmarkSimpleIcon,
+  recall: BookmarkSimpleIcon,
+  load_skill: FileTextIcon,
+  data_find: MagnifyingGlassIcon,
+  data_add: FilePlusIcon,
+  data_update: NotePencilIcon,
+  squad_agents: FileTextIcon,
+  create_agent: FilePlusIcon,
+  update_agent: NotePencilIcon,
+  set_tools: SlidersHorizontalIcon,
+  test_automation: PlayIcon,
+  switch_automation: SlidersHorizontalIcon,
+  run_automation: PlayIcon,
+  find_apps: MagnifyingGlassIcon,
+  connect_app: PlugIcon,
+  app_tools: PlugIcon,
+  app_events: PlugIcon,
+  give_app: PlugIcon,
+  take_app: PlugIcon,
+  read_code: FileTextIcon,
+  write_code: FilePlusIcon,
+  delete_code: NotePencilIcon,
+  run_action: PlayIcon,
+  create_table: FilePlusIcon,
+  give_table: SlidersHorizontalIcon,
+  take_table: SlidersHorizontalIcon,
+  ask_key: ChatTeardropTextIcon,
+  ask_builder: MagicWandIcon,
+  agent_files: MagnifyingGlassIcon,
+  keep_agent_file: FilePlusIcon,
+  browser_open: GlobeSimpleIcon,
+  browser_read: BookOpenTextIcon,
+  browser_click: CursorClickIcon,
+  browser_fill: TextboxIcon,
+  browser_scroll: ArrowsDownUpIcon,
+  browser_back: ArrowUUpLeftIcon,
+  browser_submit: PaperPlaneTiltIcon,
+  browser_hand_over: HandIcon,
+  browser_attach: FilePlusIcon,
+  browser_download: DownloadSimpleIcon,
+  browser_screenshot: CameraIcon,
+  browser_record: VideoCameraIcon,
+  browser_fill_key: TextboxIcon,
+};
+
+export const stepGlyph = (action: string): Icon => GLYPHS[action] ?? WrenchIcon;