@signalcore/ui 0.1.0 → 1.0.0-beta.0

package/src/AgentAbout.tsx

@@ -0,0 +1,1621 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+
+import {
+  BooksIcon,
+  BroadcastIcon,
+  KeyIcon,
+  LightbulbIcon,
+  PuzzlePieceIcon,
+  WrenchIcon,
+  type Icon as Glyph,
+} from "@phosphor-icons/react";
+import {
+  aboutState,
+  appTitle,
+  automationsOf,
+  countOf,
+  formatSize,
+  toneOf,
+  toolName,
+  toolTitle,
+  type AboutOut,
+  type ActionFact,
+  type AutomationFact,
+  type AutomationKind,
+  type ChannelFact,
+  type ChannelKind,
+  type ConnectionFact,
+  type DataFact,
+  type Facts,
+  type FileFact,
+  type Icon,
+  type MemoryFact,
+  type Provider,
+  type StatusTone,
+  type Told,
+  type Topic,
+  type VaultFact,
+} from "./about";
+import { Automation } from "./automation/Automation";
+import { RunView } from "./automation/RunView";
+import type { Automation as Standing, Run } from "./automation/types";
+import { agentGlyph } from "./agentIcons";
+import { classes } from "./classes";
+import { ApiError, type Client } from "./client";
+import { baseName } from "./files";
+import { GLYPHS } from "./icons";
+import { KitProvider, useKit, type KitClassNames, type KitPart } from "./kit/context";
+import { FileMark } from "./kit/FileMark";
+import { List, Row } from "./kit/List";
+import { Mark } from "./kit/Mark";
+import { MarkStack } from "./kit/MarkStack";
+import { Tag } from "./kit/Tag";
+import { KIT_MESSAGES, type KitLocale, type KitMessages } from "./kit/messages";
+import { actionMark, channelMark, deviceMark, providerMark } from "./marks";
+
+/** What each part of what it works with is, at a glance: bare, beside its name. */
+const TOPIC_GLYPHS: Readonly<Record<Topic, Glyph>> = {
+  apps: PuzzlePieceIcon,
+  tools: WrenchIcon,
+  knowledge: BooksIcon,
+  learning: LightbulbIcon,
+  channels: BroadcastIcon,
+  keys: KeyIcon,
+};
+import type { Channel, ChannelStatus } from "./types";
+import { agentTint } from "./tint";
+import { usePolled } from "./usePolled";
+
+/** The words Qué puede says; a host gives its own, in its language. */
+export interface AboutMessages {
+  /** While the words are read, before anything is known. */
+  loading: string;
+  /** While the agent writes what it does the first time: a model call, a few seconds. */
+  writing: (name: string) => string;
+  /** Under the words while the agent writes them again, because it changed since. */
+  updating: string;
+  /** The button that tries again when the words could not be read or written. */
+  refresh: string;
+  /** Over what it asks the person's leave for. */
+  asks: string;
+  /** Over the tools that come with every agent, when it has its own too. */
+  builtIn: string;
+  /** The words could not be read or written; the server's own sentence follows when it gave one. */
+  failed: string;
+  /** Over what it does on its own. */
+  does: string;
+  /** In their place when it does nothing on its own yet. */
+  noAutomations: string;
+  /** On an automation that is off. */
+  paused: string;
+  /** What an automation waits for, when the agent hasn't said when yet. */
+  kinds: Readonly<Record<AutomationKind, string>>;
+  /** Each topic's name, on its tile and over it when open. */
+  topics: Readonly<Record<Topic, string>>;
+  /** A topic with nothing: on its row, and as its one line when open. */
+  empty: Readonly<Record<Topic, string>>;
+  /** Under an open topic's name: what it is, in a line. */
+  hints: Readonly<Record<Topic, string>>;
+  /** Over what is the agent's own, inside what it knows and its keys. */
+  theirs: (name: string) => string;
+  /** Over what is the organization's, shared with every agent: said once, by this heading. */
+  organization: string;
+  /** Over the tables, inside what it knows. */
+  tables: string;
+  /** Under a file `search_files` does not read: it is only kept. */
+  kept: string;
+  /** Beside a tool that is off. */
+  off: string;
+  /** What it may do in a table, beside it. */
+  can: Readonly<Record<string, string>>;
+  /** Over the words, and on the way back from a topic: who this is about. */
+  title: (name: string) => string;
+  /** Over the topics. */
+  facts: string;
+  /** In place of a run that is no longer there. */
+  runGone: string;
+  /** What the kit's pieces say in it (an automation, a run): their words, in the host's language. */
+  kit: Partial<KitMessages>;
+  /** A shipped action's name in the owner's words, by its code name; the rest keep the code name. */
+  actions: Readonly<Record<string, string>>;
+  /** A file's size, as the host's people read it. */
+  size: (bytes: number) => string;
+  /** When a memory was kept, beside it. */
+  ago: (when: Date) => string;
+  /** A channel's name, by its kind: its row's title. */
+  channelNames: Readonly<Record<ChannelKind, string>>;
+  /** How a channel stands, beside its dot. */
+  channelStates: Readonly<Record<ChannelStatus, string>>;
+  /** The provider's word on a channel's status (English, as the API keeps it), in the host's. */
+  channelDetail: (detail: string) => string;
+}
+
+export const ABOUT_MESSAGES: AboutMessages = {
+  loading: "Loading…",
+  writing: (name) => `${name} is writing down what it does…`,
+  updating: "Updating…",
+  refresh: "Try again",
+  asks: "It asks you before",
+  builtIn: "Built in",
+  failed: "What it can do could not be read.",
+  does: "What it does on its own",
+  noAutomations: "Nothing on its own yet: it answers when someone writes to it.",
+  paused: "Paused",
+  kinds: { schedule: "At a time", webhook: "When called", event: "On an event" },
+  topics: {
+    apps: "Apps",
+    tools: "Tools",
+    knowledge: "Knowledge",
+    learning: "Learning",
+    channels: "Channels",
+    keys: "Keys",
+  },
+  empty: {
+    apps: "None yet",
+    tools: "None on",
+    knowledge: "Nothing yet",
+    learning: "Nothing yet",
+    channels: "None yet",
+    keys: "None",
+  },
+  hints: {
+    apps: "The business's apps it uses, and what it may do in each.",
+    tools: "What it can do while it talks with someone.",
+    knowledge: "The documents and tables it reads to answer.",
+    learning: "What it has learned from its conversations.",
+    channels: "Where it works: where people write to it, and the devices it uses.",
+    keys: "Passwords and keys it uses, kept sealed.",
+  },
+  theirs: (name) => `${name}'s own`,
+  organization: "The organization's",
+  tables: "Tables",
+  kept: "Only kept",
+  off: "off",
+  can: { find: "looks up", add: "adds", update: "changes" },
+  title: (name) => `About ${name}`,
+  facts: "What it works with",
+  runGone: "This run is no longer there.",
+  kit: KIT_MESSAGES,
+  actions: {},
+  size: (bytes) => formatSize(bytes),
+  ago: (when) => when.toLocaleDateString(),
+  channelNames: {
+    whatsapp: "WhatsApp",
+    instagram: "Instagram",
+    sms: "SMS",
+    email: "Email",
+    web: "Web chat",
+    phone: "Phone",
+  },
+  channelStates: {
+    active: "Active",
+    pending: "Pending",
+    error: "Error",
+    disconnected: "Disconnected",
+  },
+  channelDetail: (detail) => detail,
+};
+
+/** The parts, by the class each carries; `classNames` adds a host's own under the same keys. */
+export type AboutPart =
+  | "sc-about"
+  | "sc-about__pane"
+  | "sc-about__intro"
+  | "sc-about__heading"
+  | "sc-about__name"
+  | "sc-about__topics"
+  | "sc-about__topic"
+  | "sc-about__topic-name"
+  | "sc-about__topic-none"
+  | "sc-about__topic-count"
+  | "sc-about__topic-go"
+  | "sc-about__lead"
+  | "sc-about__updated"
+  | "sc-about__updating"
+  | "sc-about__section"
+  | "sc-about__label"
+  | "sc-about__asks"
+  | "sc-about__menu"
+  | "sc-about__memory"
+  | "sc-about__back"
+  | "sc-about__bar"
+  | "sc-about__bar-end"
+  | "sc-about__automation"
+  | "sc-about__run"
+  | "sc-about__group"
+  | "sc-about__title"
+  | "sc-about__subtitle"
+  | "sc-about__file"
+  | "sc-about__detail"
+  | "sc-about__hint"
+  | "sc-about__count"
+  | "sc-about__tools"
+  | "sc-about__dot"
+  | "sc-about__state"
+  | "sc-about__empty"
+  | "sc-about__writing";
+
+/** The panel's own parts and the kit's it is drawn with: a host styles both under one prop. */
+type ClassNames = Partial<Record<AboutPart | KitPart, string>> | undefined;
+
+/** What a host's control is given, besides the thing it stands beside. */
+export interface AboutTools {
+  /**
+   * Reads the facts again, and has the agent write its words anew when the change made them
+   * stale; the open topic stays. Call it after a change.
+   */
+  refresh: () => Promise<void>;
+}
+
+type Control<T> = ((thing: T, tools: AboutTools) => ReactNode) | undefined;
+
+/**
+ * The host's own controls: the package only reads, a host that lets its people change things
+ * draws them here. Each one is drawn at the right end of what it stands beside.
+ */
+export interface AboutControls {
+  /** Over what it does on its own (a new automation). */
+  newAutomation?: ((tools: AboutTools) => ReactNode) | undefined;
+  /** On each automation (switch it off, delete it). */
+  automation?: Control<AutomationFact>;
+  /** Under its automations: what else it does on its own (the tasks it runs for contacts). */
+  automationsNote?: ((tools: AboutTools) => ReactNode) | undefined;
+  /** Over an open topic (add an app, upload a file, add a key). */
+  topic?: Partial<Record<Topic, (tools: AboutTools) => ReactNode>> | undefined;
+  app?: Control<ConnectionFact>;
+  tool?: Control<ActionFact>;
+  file?: Control<FileFact>;
+  table?: Control<DataFact>;
+  memory?: Control<MemoryFact>;
+  key?: Control<VaultFact>;
+  /** On each channel the agent answers (its settings, a check, disconnecting it). */
+  channel?: Control<Channel>;
+}
+
+/**
+ * How a host draws an app's mark, with its own brands (the package carries none): v2's
+ * `AppDirectory`. `provider` says the catalog and the app (`arcade:gmail`); `icon` is the one the
+ * provider declares, when it does.
+ */
+export interface AppDirectory {
+  logo: (app: {
+    provider: string;
+    name: string;
+    icon?: string | null | undefined;
+    size: number;
+  }) => ReactNode;
+}
+
+export interface AgentAboutProps {
+  client: Client;
+  agentId: string;
+  /** Its mark (`AGENT_ICONS`), drawn beside its name in its tint; a sparkle until it has one. */
+  icon?: string | null | undefined;
+  /** The agent's name, for the words that address it. */
+  name: string;
+  messages?: Partial<AboutMessages> | undefined;
+  classNames?: ClassNames;
+  controls?: AboutControls | undefined;
+  /** The host's logos for apps; without them an app shows the mark its provider gives. */
+  apps?: AppDirectory | undefined;
+  /**
+   * Opens a file the owner presses in what it knows (in the host's viewer: `FileView` in a
+   * dialog); without it the files are only listed.
+   */
+  onOpenFile?: ((file: FileFact) => void) | undefined;
+  /**
+   * What is open in it: its home, a topic, an automation, a run of one. Given, the host keeps it
+   * (in its address, say) and hears each move through `onViewChange`; without it the panel keeps
+   * its own.
+   */
+  view?: AboutView | undefined;
+  onViewChange?: ((view: AboutView) => void) | undefined;
+  /** Opens a conversation a run opened or was asked in; without it, none opens. */
+  onOpenConversation?: ((id: string) => void) | undefined;
+  /** The language its dates and times are said in. */
+  locale?: KitLocale | undefined;
+}
+
+/**
+ * What is open in the panel, one level under another: its home; a topic or an automation from
+ * it; a run from its automation.
+ */
+export type AboutView =
+  | { kind: "home" }
+  | { kind: "topic"; topic: Topic }
+  | { kind: "automation"; name: string }
+  | { kind: "run"; name: string; run: string };
+
+export const ABOUT_HOME: AboutView = { kind: "home" };
+
+/** How far a view is from the home: what says whether a move goes in or back out. */
+const depthOf = (view: AboutView): number =>
+  view.kind === "home" ? 0 : view.kind === "run" ? 2 : 1;
+
+/** A view as one string: what tells two apart. */
+const keyOf = (view: AboutView): string =>
+  view.kind === "home"
+    ? "home"
+    : view.kind === "topic"
+      ? `topic:${view.topic}`
+      : view.kind === "automation"
+        ? `automation:${view.name}`
+        : `run:${view.name}:${view.run}`;
+
+/** The view a step back from `view` goes to. */
+export function aboutBack(view: AboutView): AboutView {
+  return view.kind === "run" ? { kind: "automation", name: view.name } : ABOUT_HOME;
+}
+
+/**
+ * Qué puede, made to sit beside the conversation: who it is about, in its own words (a line or
+ * two); what it does on its own, one row per automation (its kind's mark, or its app's logo),
+ * what it does and when, as the agent tells it; what it asks leave for; then what it works with,
+ * as a grid of tiles, one per topic (its apps, tools, what it knows and has learned, where it
+ * works, its keys), each with its count and a glimpse of what it holds, opening it in the same
+ * place. Every list is the kit's `List` and `Row`, and every tile its `Tile`, the ones an agent's
+ * screens use, so a host styles them once. The words are written by the agent the first time and
+ * again whenever it changed since, by themselves. The component only reads; a host draws its own
+ * controls through `controls` and calls `tools.refresh()` after a change, and opens a file
+ * through `onOpenFile`. An automation opens in the panel itself, one level in (what it does, its
+ * steps, its runs), and a run one more, each with its way back; `view` lets the host keep where
+ * it is. Another agent starts afresh.
+ */
+export function AgentAbout(props: AgentAboutProps) {
+  return (
+    <KitProvider
+      classNames={props.classNames as KitClassNames}
+      messages={props.messages?.kit}
+      locale={props.locale}
+    >
+      <View key={props.agentId} {...props} />
+    </KitProvider>
+  );
+}
+
+function View({
+  client,
+  agentId,
+  icon,
+  name,
+  messages,
+  classNames,
+  controls,
+  apps,
+  onOpenFile,
+  view: given,
+  onViewChange,
+  onOpenConversation,
+}: AgentAboutProps) {
+  const words = { ...ABOUT_MESSAGES, ...messages };
+  const [data, setData] = useState<AboutOut | null>(null);
+  const [live, setLive] = useState<readonly Standing[] | null>(null);
+  const [writing, setWriting] = useState(false);
+  const [problem, setProblem] = useState<unknown>(null);
+  // Every change the host makes reads the open automation or run again, too.
+  const [version, setVersion] = useState(0);
+  const [own, setOwn] = useState<AboutView>(ABOUT_HOME);
+  const view = given ?? own;
+  const motion = useMotion(view);
+  const root = useRef<HTMLDivElement>(null);
+  const scrolled = useRef(new Map<string, number>());
+  const intro = useId();
+
+  /** Opens `next`, keeping where the panel was scrolled to on the way in, for the way back. */
+  const go = (next: AboutView) => {
+    const scroller = scrollerOf(root.current);
+    if (scroller !== null && depthOf(next) > depthOf(view)) {
+      scrolled.current.set(keyOf(view), scroller.scrollTop);
+    }
+    (onViewChange ?? setOwn)(next);
+  };
+
+  // A view opens at its top, or back where it was left.
+  const shown = keyOf(view);
+  useLayoutEffect(() => {
+    const scroller = scrollerOf(root.current);
+    if (scroller !== null) scroller.scrollTop = scrolled.current.get(shown) ?? 0;
+  }, [shown]);
+
+  // Each call takes `still`, whether its answer is still wanted: a mount undone before the answer
+  // (StrictMode runs effects twice) keeps nothing, so one writing runs, not two.
+
+  /** Has the agent write about itself anew; what it answers is the words and the facts both. */
+  const write = useCallback(
+    async (still: () => boolean) => {
+      setProblem(null);
+      setWriting(true);
+      try {
+        const written = await client.agents.describe(agentId);
+        if (still()) setData(written);
+      } catch (error) {
+        if (still()) setProblem(error);
+      } finally {
+        if (still()) setWriting(false);
+      }
+    },
+    [client, agentId],
+  );
+
+  /**
+   * Reads the words and the facts, and how each automation stands (a server without them leaves
+   * the rows as they were told); when the words are missing or stale, has the agent write them.
+   */
+  const read = useCallback(
+    async (still: () => boolean) => {
+      setProblem(null);
+      try {
+        const [first, standing] = await Promise.all([
+          client.agents.about(agentId),
+          client.automations.list(agentId).catch(() => null),
+        ]);
+        if (!still()) return;
+        setData(first);
+        setLive(standing);
+        // Words never written, or written before the agent last changed: it writes them again
+        // by itself, so what it says stays true without anyone asking.
+        if (first.about === null || first.about_at === null) await write(still);
+      } catch (error) {
+        if (still()) setProblem(error);
+      }
+    },
+    [client, agentId, write],
+  );
+
+  useEffect(() => {
+    let gone = false;
+    void read(() => !gone);
+    return () => {
+      gone = true;
+    };
+  }, [read]);
+
+  const tools = useMemo<AboutTools>(
+    () => ({
+      refresh: async () => {
+        setVersion((count) => count + 1);
+        await read(() => true);
+      },
+    }),
+    [read],
+  );
+  // What to try again after a failure: the reading when nothing was read, the writing otherwise.
+  const retry = () => (data === null ? read(() => true) : write(() => true));
+  // A tool by the owner's words for it; one of its own code, by its name made words.
+  const label = (action: ActionFact) =>
+    action.source === "own" ? toolName(action.name) : (words.actions[action.name] ?? action.name);
+  const pane = (bar: ReactNode, children: ReactNode) => (
+    <div ref={root} className={`sc ${classes(classNames, "sc-about")}`}>
+      <div key={shown} data-motion={motion} className={classes(classNames, "sc-about__pane")}>
+        {bar}
+        {children}
+      </div>
+    </div>
+  );
+  const home = words.title(name);
+
+  if (view.kind === "topic" && data !== null) {
+    return pane(
+      <Bar back={home} onBack={() => go(ABOUT_HOME)} classNames={classNames} />,
+      <TopicView
+        client={client}
+        agentId={agentId}
+        name={name}
+        version={version}
+        topic={view.topic}
+        facts={data.facts}
+        apps={apps}
+        label={label}
+        words={words}
+        classNames={classNames}
+        tools={tools}
+        controls={controls}
+        onOpenFile={onOpenFile}
+      />,
+    );
+  }
+
+  if (view.kind === "automation") {
+    const fact = data?.facts.automations.find((each) => each.name === view.name);
+    return pane(
+      <Bar
+        back={home}
+        onBack={() => go(ABOUT_HOME)}
+        end={fact !== undefined ? controls?.automation?.(fact, tools) : undefined}
+        classNames={classNames}
+      />,
+      <AutomationPane
+        key={version}
+        client={client}
+        agentId={agentId}
+        name={view.name}
+        apps={apps}
+        words={words}
+        classNames={classNames}
+        onOpenRun={(run) => go({ kind: "run", name: view.name, run: run.id })}
+      />,
+    );
+  }
+
+  if (view.kind === "run") {
+    return pane(
+      <Bar
+        back={live?.find((each) => each.name === view.name)?.title ?? home}
+        onBack={() => go({ kind: "automation", name: view.name })}
+        classNames={classNames}
+      />,
+      <RunPane
+        key={version}
+        client={client}
+        agentId={agentId}
+        name={view.name}
+        run={view.run}
+        apps={apps}
+        words={words}
+        classNames={classNames}
+        onOpenConversation={onOpenConversation}
+      />,
+    );
+  }
+
+  const state = data === null ? null : aboutState(data.about, data.about_at, writing);
+  return pane(
+    null,
+    <>
+      <section aria-labelledby={intro} className={classes(classNames, "sc-about__intro")}>
+        <AgentName
+          id={intro}
+          agentId={agentId}
+          icon={icon}
+          name={name}
+          label={home}
+          classNames={classNames}
+        />
+        {problem !== null ? (
+          <Problem words={words} classNames={classNames} onRetry={retry}>
+            {words.failed}
+            {problem instanceof ApiError && ` ${problem.detail}`}
+          </Problem>
+        ) : data === null || data.about === null ? (
+          <Writing
+            text={data === null ? words.loading : words.writing(name)}
+            classNames={classNames}
+          />
+        ) : (
+          <p className={classes(classNames, "sc-about__lead")}>{data.about.summary}</p>
+        )}
+        {state === "writing" && data?.about != null && (
+          <p role="status" className={classes(classNames, "sc-about__updating")}>
+            {words.updating}
+          </p>
+        )}
+      </section>
+      {data !== null && (
+        <>
+          <Automations
+            apps={apps}
+            told={automationsOf(data.about, data.facts)}
+            live={live}
+            words={words}
+            classNames={classNames}
+            tools={tools}
+            controls={controls}
+            onOpen={(automation) => go({ kind: "automation", name: automation.name })}
+          />
+          {data.about !== null && data.about.asks.length > 0 && (
+            <Asks asks={data.about.asks} words={words} classNames={classNames} />
+          )}
+          <nav aria-label={words.facts} className={classes(classNames, "sc-about__menu")}>
+            <p className={classes(classNames, "sc-about__label")}>{words.facts}</p>
+            <div className={classes(classNames, "sc-about__topics")}>
+              {HOME_TOPICS.map((topic) => (
+                <TopicRow
+                  key={topic}
+                  topic={topic}
+                  facts={data.facts}
+                  apps={apps}
+                  words={words}
+                  classNames={classNames}
+                  onOpen={() => go({ kind: "topic", topic })}
+                />
+              ))}
+            </div>
+          </nav>
+        </>
+      )}
+    </>,
+  );
+}
+
+/**
+ * What the panel's home shows the agent works with, in the order the owner looks for it: where
+ * people reach it, the apps it uses, what it knows, what it learned, its keys. Its tools are
+ * the platform's business: they show in the technical view, not here.
+ */
+const HOME_TOPICS: readonly Topic[] = ["channels", "apps", "knowledge", "learning", "keys"];
+
+/** How many icons a topic's row draws before "+N". */
+const MOST_MARKS = 5;
+
+/**
+ * A topic on the panel's home, as icons: its name, then what it holds as their logos or marks
+ * (the channels', the apps', the files') and how many; a topic with nothing says so, quietly.
+ * Pressing it opens the topic.
+ */
+function TopicRow({
+  topic,
+  facts,
+  apps,
+  words,
+  classNames,
+  onOpen,
+}: {
+  topic: Topic;
+  facts: Facts;
+  apps: AppDirectory | undefined;
+  words: AboutMessages;
+  classNames: ClassNames;
+  onOpen: () => void;
+}) {
+  const count = countOf(topic, facts);
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      data-empty={count === 0 || undefined}
+      className={classes(classNames, "sc-about__topic")}
+    >
+      <span className={classes(classNames, "sc-about__topic-name")}>{words.topics[topic]}</span>
+      {count === 0 ? (
+        <span className={classes(classNames, "sc-about__topic-none")}>{words.empty[topic]}</span>
+      ) : (
+        <>
+          <TopicMarks topic={topic} facts={facts} apps={apps} words={words} count={count} />
+          <span className={classes(classNames, "sc-about__topic-count")}>{count}</span>
+        </>
+      )}
+      <svg
+        viewBox="0 0 16 16"
+        fill="none"
+        aria-hidden
+        className={classes(classNames, "sc-about__topic-go")}
+      >
+        <path
+          d="M6 3.5 10.5 8 6 12.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </button>
+  );
+}
+
+/** What a topic holds, as icons: each channel's and app's logo, each file's mark; else its glyph. */
+function TopicMarks({
+  topic,
+  facts,
+  apps,
+  words,
+  count,
+}: {
+  topic: Topic;
+  facts: Facts;
+  apps: AppDirectory | undefined;
+  words: AboutMessages;
+  count: number;
+}) {
+  const marks: ReactNode[] =
+    topic === "channels"
+      ? facts.channels.map((channel) => (
+          <span key={`${channel.kind}:${channel.name}`}>
+            {channelLogo(channel.kind, apps, words, 20)}
+          </span>
+        ))
+      : topic === "apps"
+        ? facts.connections.map((connection) => (
+            <span key={connection.name}>{appMark(connectionApp(connection), apps, 20)}</span>
+          ))
+        : topic === "knowledge"
+          ? facts.files.map((file) => <FileMark key={file.path} name={file.path} size={20} />)
+          : [<Mark key={topic} icon={TOPIC_GLYPHS[topic]} size={20} />];
+  const shown = marks.slice(0, MOST_MARKS);
+  const drawn = topic === "learning" || topic === "keys" ? 0 : count;
+  return <MarkStack more={Math.max(0, drawn - shown.length)}>{shown}</MarkStack>;
+}
+
+/**
+ * Who the panel is about, at its top: the agent's mark in its tint, bare, beside its name; the
+ * panel's title ("About Ana") stays for screen readers.
+ */
+function AgentName({
+  id,
+  agentId,
+  icon,
+  name,
+  label,
+  classNames,
+}: {
+  id: string;
+  agentId: string;
+  icon: string | null | undefined;
+  name: string;
+  label: string;
+  classNames: ClassNames;
+}) {
+  const Glyph = agentGlyph(icon);
+  return (
+    <h2
+      id={id}
+      aria-label={label}
+      data-tint={agentTint(agentId)}
+      className={classes(classNames, "sc-about__name")}
+    >
+      <Glyph aria-hidden weight="duotone" />
+      <span>{name}</span>
+    </h2>
+  );
+}
+
+/**
+ * Which way the panel moved to show `view`: in (one level deeper), back out, or nowhere (the first
+ * view). Kept per view, so a view's own updates never replay it.
+ */
+function useMotion(view: AboutView): "in" | "out" | undefined {
+  const key = keyOf(view);
+  const depth = depthOf(view);
+  const [moved, setMoved] = useState<{
+    key: string;
+    depth: number;
+    motion: "in" | "out" | undefined;
+  }>({ key, depth, motion: undefined });
+  if (moved.key !== key) {
+    setMoved({ key, depth, motion: depth >= moved.depth ? "in" : "out" });
+  }
+  return moved.motion;
+}
+
+/** The nearest box around `element` that scrolls: where the panel's place is kept. */
+function scrollerOf(element: HTMLElement | null): HTMLElement | null {
+  for (let at = element?.parentElement ?? null; at !== null; at = at.parentElement) {
+    const overflow = getComputedStyle(at).overflowY;
+    if (overflow === "auto" || overflow === "scroll") return at;
+  }
+  return null;
+}
+
+/**
+ * The bar over a view opened from another: the way back to it, named, at its start; the host's
+ * controls at its end. It stays at the top as the view scrolls.
+ */
+function Bar({
+  back,
+  onBack,
+  end,
+  classNames,
+}: {
+  back: string;
+  onBack: () => void;
+  end?: ReactNode;
+  classNames: ClassNames;
+}) {
+  return (
+    <div className={classes(classNames, "sc-about__bar")}>
+      <button type="button" onClick={onBack} className={classes(classNames, "sc-about__back")}>
+        <svg viewBox="0 0 16 16" fill="none" aria-hidden>
+          <path
+            d="M10 3.5 5.5 8l4.5 4.5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <span>{back}</span>
+      </button>
+      {end != null && <span className={classes(classNames, "sc-about__bar-end")}>{end}</span>}
+    </div>
+  );
+}
+
+/**
+ * An automation, open in the panel: what starts it and when it runs next, the owner's sentence,
+ * its steps, the table it moves, its runs (each opening its record). Read again every few
+ * seconds while a run of it is under way.
+ */
+function AutomationPane({
+  client,
+  agentId,
+  name,
+  apps,
+  words,
+  classNames,
+  onOpenRun,
+}: Drawn & {
+  client: Client;
+  agentId: string;
+  name: string;
+  apps: AppDirectory | undefined;
+  onOpenRun: (run: Run) => void;
+}) {
+  const { messages } = useKit();
+  const read = usePolled(
+    () => client.automations.get(agentId, name),
+    `${agentId}:${name}`,
+    (automation) => automation.runs.some((run) => run.status === "running"),
+  );
+  if (read.gone) return <Gone classNames={classNames}>{messages.automation.gone}</Gone>;
+  if (read.value === null) {
+    return read.problem === null ? (
+      <Loading words={words} classNames={classNames} />
+    ) : (
+      <Gone classNames={classNames}>{words.failed}</Gone>
+    );
+  }
+  return (
+    <Automation
+      className={classes(classNames, "sc-about__automation")}
+      automation={read.value}
+      runs={read.value.runs}
+      apps={apps}
+      onOpenRun={onOpenRun}
+    />
+  );
+}
+
+/**
+ * A run, open in the panel: how it went, step by step in words, what it opened. Read with its
+ * automation (its steps' order and its apps' names), again while it is under way.
+ */
+function RunPane({
+  client,
+  agentId,
+  name,
+  run,
+  apps,
+  words,
+  classNames,
+  onOpenConversation,
+}: Drawn & {
+  client: Client;
+  agentId: string;
+  name: string;
+  run: string;
+  apps: AppDirectory | undefined;
+  onOpenConversation: ((id: string) => void) | undefined;
+}) {
+  const read = usePolled(
+    async () => {
+      const [record, automation] = await Promise.all([
+        client.runs.get(run),
+        client.automations.get(agentId, name).catch(() => null),
+      ]);
+      return { record, automation };
+    },
+    run,
+    ({ record }) => record.status === "running",
+  );
+  if (read.gone) return <Gone classNames={classNames}>{words.runGone}</Gone>;
+  if (read.value === null) {
+    return read.problem === null ? (
+      <Loading words={words} classNames={classNames} />
+    ) : (
+      <Gone classNames={classNames}>{words.failed}</Gone>
+    );
+  }
+  return (
+    <RunView
+      className={classes(classNames, "sc-about__run")}
+      run={read.value.record}
+      automation={read.value.automation}
+      apps={apps}
+      onOpenConversation={onOpenConversation}
+    />
+  );
+}
+
+/** A view whose thing is being read: lines with a light sweeping them. */
+function Loading({ words, classNames }: Drawn) {
+  return <Writing text={words.loading} classNames={classNames} />;
+}
+
+/** In place of what is no longer there, or could not be read. */
+function Gone({ classNames, children }: { classNames: ClassNames; children: ReactNode }) {
+  return <p className={classes(classNames, "sc-about__empty")}>{children}</p>;
+}
+
+/** An automation's mark says its kind: a time, a call from another system, an event. */
+const KIND_ICONS: Readonly<Record<AutomationKind, Icon>> = {
+  schedule: "clock",
+  webhook: "code",
+  event: "bell",
+};
+
+/** An app's mark: the host's logo when it draws one, else the provider's, bare. */
+function appMark(
+  app: { provider: string; name: string; icon?: string | null | undefined },
+  apps: AppDirectory | undefined,
+  size: number,
+) {
+  if (apps !== undefined) return apps.logo({ ...app, size });
+  return (
+    <Mark logo size={size}>
+      {providerMark(app.provider.split(":")[0] as Provider, app.icon ?? undefined)}
+    </Mark>
+  );
+}
+
+const connectionApp = (connection: ConnectionFact) => ({
+  provider: `${connection.provider}:${connection.toolkit ?? connection.name}`,
+  name: appTitle(connection),
+  icon: connection.icon,
+});
+
+/**
+ * A channel's mark: the host's logo for its brand when it draws apps (WhatsApp, Instagram, the
+ * plain mark of a text message), else the package's glyph, bare.
+ */
+function channelLogo(
+  kind: ChannelKind,
+  apps: AppDirectory | undefined,
+  words: AboutMessages,
+  size: number,
+) {
+  if (apps !== undefined)
+    return apps.logo({ provider: kind, name: words.channelNames[kind], size });
+  return <Mark size={size}>{channelMark(kind)}</Mark>;
+}
+
+interface Drawn {
+  words: AboutMessages;
+  classNames: ClassNames;
+}
+
+/** What could not be read or written, in the warning tone, and the button to try again. */
+function Problem({
+  words,
+  classNames,
+  onRetry,
+  children,
+}: Drawn & { onRetry: () => Promise<void>; children: ReactNode }) {
+  return (
+    <p role="alert" className={classes(classNames, "sc-about__updated")}>
+      <span>{children}</span>
+      <button type="button" onClick={() => void onRetry()}>
+        {words.refresh}
+      </button>
+    </p>
+  );
+}
+
+/** The agent writing: the lead's lines with a light sweeping them, and the sentence saying so. */
+function Writing({ text, classNames }: { text: string; classNames: ClassNames }) {
+  return (
+    <div role="status" className={classes(classNames, "sc-about__writing")}>
+      <div aria-hidden>
+        <i />
+        <i />
+      </div>
+      <p>{text}</p>
+    </div>
+  );
+}
+
+/** What it asks leave for: its label, then the things, a short list. */
+function Asks({ asks, words, classNames }: Drawn & { asks: string[] }) {
+  const id = useId();
+  return (
+    <section
+      aria-labelledby={id}
+      className={classes(classNames, "sc-about__section", "sc-about__asks")}
+    >
+      <div className={classes(classNames, "sc-about__label")}>
+        <h3 id={id}>{words.asks}</h3>
+      </div>
+      <ul>
+        {asks.map((ask, index) => (
+          <li key={index}>{ask}</li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+/**
+ * What it does on its own: one row per automation, its kind's mark (or, on an app's event, the
+ * app's logo), what it does then over when, as the agent tells it (its title and its kind until
+ * it has), a paused one quieter; how it stands now when that needs a look (a run under way, the
+ * last one failed); the host's control at each row's end, and over them the way to a new one. A
+ * row opens its automation.
+ */
+function Automations({
+  told,
+  live,
+  words,
+  classNames,
+  tools,
+  controls,
+  apps,
+  onOpen,
+}: Drawn & {
+  told: Told[];
+  live: readonly Standing[] | null;
+  tools: AboutTools;
+  controls: AboutControls | undefined;
+  apps: AppDirectory | undefined;
+  onOpen: (automation: AutomationFact) => void;
+}) {
+  const id = useId();
+  const { messages } = useKit();
+  const standing = new Map(live?.map((automation) => [automation.name, automation]));
+  return (
+    <section aria-labelledby={id} className={classes(classNames, "sc-about__section")}>
+      <div className={classes(classNames, "sc-about__label")}>
+        <h3 id={id}>{words.does}</h3>
+        {controls?.newAutomation !== undefined && (
+          <span className={classes(classNames, "sc-about__tools")}>
+            {controls.newAutomation(tools)}
+          </span>
+        )}
+      </div>
+      {told.length === 0 ? (
+        <p className={classes(classNames, "sc-about__empty")}>{words.noAutomations}</p>
+      ) : (
+        <List>
+          {told.map(({ automation, line }) => {
+            const when = line?.when ?? words.kinds[automation.kind];
+            const now = standing.get(automation.name);
+            const going = now?.last_run?.status === "running";
+            return (
+              <Row
+                key={automation.id}
+                mark={
+                  automation.provider === undefined ? (
+                    <Mark icon={GLYPHS[KIND_ICONS[automation.kind]]} />
+                  ) : (
+                    appMark(
+                      {
+                        provider: automation.provider,
+                        name:
+                          automation.app_title ?? toolName(automation.app ?? automation.provider),
+                        icon: automation.icon,
+                      },
+                      apps,
+                      28,
+                    )
+                  )
+                }
+                title={line?.text ?? automation.title}
+                subtitle={when}
+                error={now?.state === "failing" ? messages.automation.states.failing : undefined}
+                meta={
+                  going ? (
+                    <Tag tone="info">
+                      <i aria-hidden className={classes(classNames, "sc-run__live")} />
+                      {messages.automation.statuses.running}
+                    </Tag>
+                  ) : automation.on ? undefined : (
+                    <Tag>{words.paused}</Tag>
+                  )
+                }
+                quiet={!automation.on}
+                onPress={() => onOpen(automation)}
+                trailing={controls?.automation?.(automation, tools)}
+              />
+            );
+          })}
+        </List>
+      )}
+      {controls?.automationsNote?.(tools)}
+    </section>
+  );
+}
+
+/**
+ * One topic, open: its name with its count and the host's control, a line saying what it is, then
+ * its rows (what it knows as its files and its tables; what it learned; the rest with a mark and
+ * a note), or its one line when it holds nothing.
+ */
+function TopicView({
+  client,
+  agentId,
+  name,
+  version,
+  topic,
+  facts,
+  apps,
+  label,
+  words,
+  classNames,
+  tools,
+  controls,
+  onOpenFile,
+}: Drawn & {
+  client: Client;
+  agentId: string;
+  /** The agent's name, over what is its own. */
+  name: string;
+  /** Moves with every change the host makes: what the topic reads itself, it reads again. */
+  version: number;
+  topic: Topic;
+  facts: Facts;
+  apps: AppDirectory | undefined;
+  label: (action: ActionFact) => string;
+  tools: AboutTools;
+  controls: AboutControls | undefined;
+  onOpenFile: ((file: FileFact) => void) | undefined;
+}) {
+  const id = useId();
+  const tool = controls?.topic?.[topic];
+  const count = countOf(topic, facts);
+  // The tools are all listed, the ones that are off too: they are what the owner turns on.
+  const shown = topic === "tools" ? facts.actions.length : count;
+  return (
+    <section aria-labelledby={id} className={classes(classNames, "sc-about__group")}>
+      <h3 id={id} className={classes(classNames, "sc-about__title")}>
+        <span>{words.topics[topic]}</span>
+        {count > 0 && <b className={classes(classNames, "sc-about__count")}>{count}</b>}
+        {tool !== undefined && (
+          <span className={classes(classNames, "sc-about__tools")}>{tool(tools)}</span>
+        )}
+      </h3>
+      <p className={classes(classNames, "sc-about__hint")}>{words.hints[topic]}</p>
+      {topic === "channels" ? (
+        <Channels
+          client={client}
+          agentId={agentId}
+          version={version}
+          facts={facts}
+          apps={apps}
+          words={words}
+          classNames={classNames}
+          tools={tools}
+          controls={controls}
+        />
+      ) : shown === 0 ? (
+        <p className={classes(classNames, "sc-about__empty")}>{words.empty[topic]}</p>
+      ) : topic === "knowledge" ? (
+        <Knowledge
+          name={name}
+          facts={facts}
+          words={words}
+          classNames={classNames}
+          tools={tools}
+          controls={controls}
+          onOpenFile={onOpenFile}
+        />
+      ) : topic === "tools" ? (
+        <Tools
+          name={name}
+          facts={facts}
+          label={label}
+          words={words}
+          classNames={classNames}
+          tools={tools}
+          controls={controls}
+        />
+      ) : topic === "keys" ? (
+        <Keys
+          name={name}
+          facts={facts}
+          words={words}
+          classNames={classNames}
+          tools={tools}
+          controls={controls}
+        />
+      ) : topic === "learning" ? (
+        <List>
+          {facts.memories.map((memory) => (
+            <Row
+              key={memory.id}
+              className={classes(classNames, "sc-about__memory")}
+              title={memory.text}
+              subtitle={words.ago(new Date(memory.created_at))}
+              trailing={controls?.memory?.(memory, tools)}
+            />
+          ))}
+        </List>
+      ) : (
+        <Rows items={appItems(facts, tools, controls, apps)} classNames={classNames} />
+      )}
+    </section>
+  );
+}
+
+/** How each state of a channel reads beside its dot: working, waiting, broken, or off. */
+const CHANNEL_TONES: Readonly<Record<ChannelStatus, StatusTone | "wait">> = {
+  active: "on",
+  pending: "wait",
+  error: "off",
+  disconnected: "quiet",
+};
+
+const isStatus = (status: string): status is ChannelStatus => status in CHANNEL_TONES;
+
+/** The order channels are listed in: by kind, as people reach a business most; disconnected last. */
+const KIND_ORDER: readonly ChannelKind[] = [
+  "whatsapp",
+  "instagram",
+  "sms",
+  "email",
+  "web",
+  "phone",
+];
+
+const inOrder = (channels: readonly Channel[]): Channel[] =>
+  [...channels].sort(
+    (a, b) =>
+      Number(a.status === "disconnected") - Number(b.status === "disconnected") ||
+      KIND_ORDER.indexOf(a.kind) - KIND_ORDER.indexOf(b.kind),
+  );
+
+/**
+ * Where it works: each channel it answers, as the API lists them (WhatsApp, Instagram, SMS; the
+ * disconnected ones last, quieter), by its brand's mark and name, its number or handle, how it stands with the
+ * provider's word on it, and the host's control at its end; then the devices it uses. Read
+ * when the topic opens and after each change the host makes; until then, or on a server without
+ * the list, the facts' rows.
+ */
+function Channels({
+  client,
+  agentId,
+  version,
+  facts,
+  apps,
+  words,
+  classNames,
+  tools,
+  controls,
+}: Drawn & {
+  client: Client;
+  agentId: string;
+  version: number;
+  facts: Facts;
+  apps: AppDirectory | undefined;
+  tools: AboutTools;
+  controls: AboutControls | undefined;
+}) {
+  const [listed, setListed] = useState<readonly Channel[] | null>(null);
+  useEffect(() => {
+    let gone = false;
+    client.channels.list(agentId).then(
+      (channels) => {
+        if (!gone) setListed(channels);
+      },
+      () => undefined,
+    );
+    return () => {
+      gone = true;
+    };
+  }, [client, agentId, version]);
+
+  const state = (status: string) => {
+    const known = isStatus(status);
+    return (
+      <span
+        data-tone={known ? CHANNEL_TONES[status] : toneOf(status)}
+        className={classes(classNames, "sc-about__state")}
+      >
+        <i aria-hidden className={classes(classNames, "sc-about__dot")} />
+        {known ? words.channelStates[status] : status}
+      </span>
+    );
+  };
+  // Its number or handle, and under it the provider's word on it; on an error, that word is why.
+  const told = (channel: Channel) => {
+    const detail = channel.detail === null ? null : words.channelDetail(channel.detail);
+    const error = channel.status === "error";
+    return {
+      subtitle: (
+        <>
+          {channel.name}
+          {!error && detail !== null && detail !== "" && (
+            <span className={classes(classNames, "sc-about__detail")}>{detail}</span>
+          )}
+        </>
+      ),
+      error: error ? (detail ?? undefined) : undefined,
+    };
+  };
+  const rows =
+    listed === null
+      ? facts.channels.map((channel: ChannelFact) => (
+          <Row
+            key={`${channel.kind}:${channel.name}`}
+            mark={channelLogo(channel.kind, apps, words, 28)}
+            title={words.channelNames[channel.kind]}
+            subtitle={channel.name}
+            meta={state(channel.status)}
+          />
+        ))
+      : inOrder(listed).map((channel) => (
+          <Row
+            key={channel.id}
+            mark={channelLogo(channel.kind, apps, words, 28)}
+            title={words.channelNames[channel.kind]}
+            {...told(channel)}
+            meta={state(channel.status)}
+            quiet={channel.status === "disconnected"}
+            trailing={controls?.channel?.(channel, tools) ?? undefined}
+          />
+        ));
+  const devices = facts.devices.map((device) => (
+    <Row
+      key={`device:${device.kind}:${device.name}`}
+      mark={<Mark>{deviceMark(device.kind)}</Mark>}
+      title={device.name}
+      meta={
+        <i
+          aria-hidden
+          data-tone={toneOf(device.status)}
+          className={classes(classNames, "sc-about__dot")}
+        />
+      }
+    />
+  ));
+  if (rows.length + devices.length === 0) {
+    return <p className={classes(classNames, "sc-about__empty")}>{words.empty.channels}</p>;
+  }
+  return (
+    <List>
+      {rows}
+      {devices}
+    </List>
+  );
+}
+
+/**
+ * One row of a topic: a mark, a name, a quieter line (what an app may do there, a note), a dot
+ * for a status, and the host's control at its end.
+ */
+interface Item {
+  key: string;
+  mark: ReactNode;
+  label: string;
+  note?: string | undefined;
+  status?: StatusTone | undefined;
+  off?: boolean | undefined;
+  control?: ReactNode;
+}
+
+/** Its apps: each by its logo and name, what it may do there under it, how it stands at its end. */
+function appItems(
+  facts: Facts,
+  tools: AboutTools,
+  controls: AboutControls | undefined,
+  apps: AppDirectory | undefined,
+): Item[] {
+  return facts.connections.map((connection) => ({
+    key: `${connection.provider}:${connection.name}`,
+    mark: appMark(connectionApp(connection), apps, 28),
+    label: appTitle(connection),
+    note: connection.actions.map((action) => toolTitle(connection, action)).join(", "),
+    status: connection.status === undefined ? undefined : toneOf(connection.status),
+    control: controls?.app?.(connection, tools),
+  }));
+}
+
+/**
+ * What it can do while it talks: its own code's actions, then the ones every agent comes with
+ * (each under its heading when it has both); in each, the ones it has first, then the ones the
+ * owner can turn on, quieter, saying so.
+ */
+function Tools({
+  name,
+  facts,
+  label,
+  words,
+  classNames,
+  tools,
+  controls,
+}: Drawn & {
+  name: string;
+  facts: Facts;
+  label: (action: ActionFact) => string;
+  tools: AboutTools;
+  controls: AboutControls | undefined;
+}) {
+  const groups = [
+    { key: "own", title: words.theirs(name), actions: facts.actions.filter(isOwn) },
+    { key: "built", title: words.builtIn, actions: facts.actions.filter((a) => !isOwn(a)) },
+  ].filter((group) => group.actions.length > 0);
+  const rows = (actions: readonly ActionFact[]) => (
+    <Rows
+      items={[...actions.filter((a) => a.on), ...actions.filter((a) => !a.on)].map((action) => ({
+        key: `${action.source}:${action.name}`,
+        mark: <Mark>{actionMark(action.name, action.source)}</Mark>,
+        label: label(action),
+        note: action.on ? undefined : words.off,
+        off: !action.on,
+        control: controls?.tool?.(action, tools),
+      }))}
+      classNames={classNames}
+    />
+  );
+  if (groups.length === 1) return rows(groups[0]?.actions ?? []);
+  return (
+    <>
+      {groups.map((group) => (
+        <Group key={group.key} title={group.title} classNames={classNames}>
+          {rows(group.actions)}
+        </Group>
+      ))}
+    </>
+  );
+}
+
+const isOwn = (action: ActionFact): boolean => action.source === "own";
+
+/** A part of a topic under its small heading: whose things they are, or what kind. */
+function Group({
+  title,
+  classNames,
+  children,
+}: {
+  title: string;
+  classNames: ClassNames;
+  children: ReactNode;
+}) {
+  return (
+    <>
+      <h4 className={classes(classNames, "sc-about__subtitle")}>{title}</h4>
+      {children}
+    </>
+  );
+}
+
+/** What is the agent's own, then the organization's: the heading says whose, once. */
+function byOwner<T extends { shared?: boolean | undefined }>(
+  things: readonly T[],
+  name: string,
+  words: AboutMessages,
+): { key: string; title: string; things: T[] }[] {
+  return [
+    { key: "own", title: words.theirs(name), things: things.filter((thing) => !thing.shared) },
+    {
+      key: "shared",
+      title: words.organization,
+      things: things.filter((thing) => thing.shared === true),
+    },
+  ].filter((group) => group.things.length > 0);
+}
+
+/**
+ * What it knows, by whose it is: its own files, then the organization's (shared with every
+ * agent: the heading says so, once), then the tables it reads or writes. A file is its kind's
+ * mark, its name on one line, its folder under it (and that it is only kept, when `search_files`
+ * does not read it), its size at the right; pressed, the host opens it; the host's controls at
+ * its end.
+ */
+function Knowledge({
+  name,
+  facts,
+  words,
+  classNames,
+  tools,
+  controls,
+  onOpenFile,
+}: Drawn & {
+  name: string;
+  facts: Facts;
+  tools: AboutTools;
+  controls: AboutControls | undefined;
+  onOpenFile: ((file: FileFact) => void) | undefined;
+}) {
+  return (
+    <>
+      {byOwner(facts.files, name, words).map((group) => (
+        <Group key={group.key} title={group.title} classNames={classNames}>
+          <List>
+            {group.things.map((file) => (
+              <Row
+                key={file.path}
+                className={classes(classNames, "sc-about__file")}
+                mark={<FileMark name={file.path} />}
+                title={<span title={file.path}>{baseName(file.path)}</span>}
+                subtitle={fileLine(file, words)}
+                meta={words.size(file.size)}
+                onPress={onOpenFile && (() => onOpenFile(file))}
+                trailing={controls?.file?.(file, tools) ?? undefined}
+              />
+            ))}
+          </List>
+        </Group>
+      ))}
+      {facts.data.length > 0 && (
+        <Group title={words.tables} classNames={classNames}>
+          <Rows
+            items={facts.data.map((table) => ({
+              key: table.table,
+              mark: <Mark icon={GLYPHS.table} />,
+              label: table.title ?? table.table,
+              note: table.can.map((can) => words.can[can] ?? can).join(", "),
+              control: controls?.table?.(table, tools),
+            }))}
+            classNames={classNames}
+          />
+        </Group>
+      )}
+    </>
+  );
+}
+
+/** Under a file's name: its folder, and that it is only kept when nothing reads it at a search. */
+function fileLine(file: FileFact, words: AboutMessages): string | undefined {
+  const folder = folderOf(file.path);
+  if (file.searchable) return folder === "" ? undefined : folder;
+  return folder === "" ? words.kept : `${folder} · ${words.kept}`;
+}
+
+/** Its keys, its own then the organization's, each with where it may be sent. */
+function Keys({
+  name,
+  facts,
+  words,
+  classNames,
+  tools,
+  controls,
+}: Drawn & {
+  name: string;
+  facts: Facts;
+  tools: AboutTools;
+  controls: AboutControls | undefined;
+}) {
+  return (
+    <>
+      {byOwner(facts.vault, name, words).map((group) => (
+        <Group key={group.key} title={group.title} classNames={classNames}>
+          <Rows
+            items={group.things.map((secret) => ({
+              key: `${group.key}:${secret.name}`,
+              mark: <Mark icon={GLYPHS.lock} />,
+              label: secret.name,
+              note: secret.hosts?.join(", "),
+              control: controls?.key?.(secret, tools),
+            }))}
+            classNames={classNames}
+          />
+        </Group>
+      ))}
+    </>
+  );
+}
+
+/** The folders a file sits in: "" for one at the top. */
+const folderOf = (path: string): string => path.slice(0, Math.max(0, path.lastIndexOf("/")));
+
+function Rows({ items, classNames }: { items: Item[]; classNames: ClassNames }) {
+  return (
+    <List>
+      {items.map((item) => (
+        <Row
+          key={item.key}
+          mark={item.mark}
+          title={item.label}
+          subtitle={item.note === undefined || item.note === "" ? undefined : item.note}
+          meta={
+            item.status === undefined ? undefined : (
+              <i
+                aria-hidden
+                data-tone={item.status}
+                className={classes(classNames, "sc-about__dot")}
+              />
+            )
+          }
+          quiet={item.off}
+          trailing={item.control ?? undefined}
+        />
+      ))}
+    </List>
+  );
+}