@signalcore/ui 0.1.0 → 1.0.0-beta.0

package/dist/AgentAbout.js

@@ -0,0 +1,1020 @@
+import { formatSize } from "./kit/numbers.js";
+import { aboutState, appTitle, automationsOf, countOf, toneOf, toolName, toolTitle } from "./about.js";
+import { classes } from "./classes.js";
+import { KIT_MESSAGES } from "./kit/messages.js";
+import { KitProvider, useKit } from "./kit/context.js";
+import { List, Row } from "./kit/List.js";
+import { Tag } from "./kit/Tag.js";
+import { Mark } from "./kit/Mark.js";
+import { Automation } from "./automation/Automation.js";
+import { RunView } from "./automation/RunView.js";
+import { agentGlyph } from "./agentIcons.js";
+import { ApiError } from "./client.js";
+import { baseName } from "./files.js";
+import { GLYPHS } from "./icons.js";
+import { FileMark } from "./kit/FileMark.js";
+import { MarkStack } from "./kit/MarkStack.js";
+import { actionMark, channelMark, deviceMark, providerMark } from "./marks.js";
+import { agentTint } from "./tint.js";
+import { usePolled } from "./usePolled.js";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { BooksIcon, BroadcastIcon, KeyIcon, LightbulbIcon, PuzzlePieceIcon, WrenchIcon } from "@phosphor-icons/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/AgentAbout.tsx
+/** What each part of what it works with is, at a glance: bare, beside its name. */
+const TOPIC_GLYPHS = {
+	apps: PuzzlePieceIcon,
+	tools: WrenchIcon,
+	knowledge: BooksIcon,
+	learning: LightbulbIcon,
+	channels: BroadcastIcon,
+	keys: KeyIcon
+};
+const ABOUT_MESSAGES = {
+	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
+};
+const ABOUT_HOME = { kind: "home" };
+/** How far a view is from the home: what says whether a move goes in or back out. */
+const depthOf = (view) => view.kind === "home" ? 0 : view.kind === "run" ? 2 : 1;
+/** A view as one string: what tells two apart. */
+const keyOf = (view) => 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. */
+function aboutBack(view) {
+	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.
+*/
+function AgentAbout(props) {
+	return /* @__PURE__ */ jsx(KitProvider, {
+		classNames: props.classNames,
+		messages: props.messages?.kit,
+		locale: props.locale,
+		children: /* @__PURE__ */ jsx(View, { ...props }, props.agentId)
+	});
+}
+function View({ client, agentId, icon, name, messages, classNames, controls, apps, onOpenFile, view: given, onViewChange, onOpenConversation }) {
+	const words = {
+		...ABOUT_MESSAGES,
+		...messages
+	};
+	const [data, setData] = useState(null);
+	const [live, setLive] = useState(null);
+	const [writing, setWriting] = useState(false);
+	const [problem, setProblem] = useState(null);
+	const [version, setVersion] = useState(0);
+	const [own, setOwn] = useState(ABOUT_HOME);
+	const view = given ?? own;
+	const motion = useMotion(view);
+	const root = useRef(null);
+	const scrolled = useRef(/* @__PURE__ */ new Map());
+	const intro = useId();
+	/** Opens `next`, keeping where the panel was scrolled to on the way in, for the way back. */
+	const go = (next) => {
+		const scroller = scrollerOf(root.current);
+		if (scroller !== null && depthOf(next) > depthOf(view)) scrolled.current.set(keyOf(view), scroller.scrollTop);
+		(onViewChange ?? setOwn)(next);
+	};
+	const shown = keyOf(view);
+	useLayoutEffect(() => {
+		const scroller = scrollerOf(root.current);
+		if (scroller !== null) scroller.scrollTop = scrolled.current.get(shown) ?? 0;
+	}, [shown]);
+	/** Has the agent write about itself anew; what it answers is the words and the facts both. */
+	const write = useCallback(async (still) => {
+		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) => {
+		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);
+			if (first.about === null || first.about_at === null) await write(still);
+		} catch (error) {
+			if (still()) setProblem(error);
+		}
+	}, [
+		client,
+		agentId,
+		write
+	]);
+	useEffect(() => {
+		let gone = false;
+		read(() => !gone);
+		return () => {
+			gone = true;
+		};
+	}, [read]);
+	const tools = useMemo(() => ({ refresh: async () => {
+		setVersion((count) => count + 1);
+		await read(() => true);
+	} }), [read]);
+	const retry = () => data === null ? read(() => true) : write(() => true);
+	const label = (action) => action.source === "own" ? toolName(action.name) : words.actions[action.name] ?? action.name;
+	const pane = (bar, children) => /* @__PURE__ */ jsx("div", {
+		ref: root,
+		className: `sc ${classes(classNames, "sc-about")}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-motion": motion,
+			className: classes(classNames, "sc-about__pane"),
+			children: [bar, children]
+		}, shown)
+	});
+	const home = words.title(name);
+	if (view.kind === "topic" && data !== null) return pane(/* @__PURE__ */ jsx(Bar, {
+		back: home,
+		onBack: () => go(ABOUT_HOME),
+		classNames
+	}), /* @__PURE__ */ jsx(TopicView, {
+		client,
+		agentId,
+		name,
+		version,
+		topic: view.topic,
+		facts: data.facts,
+		apps,
+		label,
+		words,
+		classNames,
+		tools,
+		controls,
+		onOpenFile
+	}));
+	if (view.kind === "automation") {
+		const fact = data?.facts.automations.find((each) => each.name === view.name);
+		return pane(/* @__PURE__ */ jsx(Bar, {
+			back: home,
+			onBack: () => go(ABOUT_HOME),
+			end: fact !== void 0 ? controls?.automation?.(fact, tools) : void 0,
+			classNames
+		}), /* @__PURE__ */ jsx(AutomationPane, {
+			client,
+			agentId,
+			name: view.name,
+			apps,
+			words,
+			classNames,
+			onOpenRun: (run) => go({
+				kind: "run",
+				name: view.name,
+				run: run.id
+			})
+		}, version));
+	}
+	if (view.kind === "run") return pane(/* @__PURE__ */ jsx(Bar, {
+		back: live?.find((each) => each.name === view.name)?.title ?? home,
+		onBack: () => go({
+			kind: "automation",
+			name: view.name
+		}),
+		classNames
+	}), /* @__PURE__ */ jsx(RunPane, {
+		client,
+		agentId,
+		name: view.name,
+		run: view.run,
+		apps,
+		words,
+		classNames,
+		onOpenConversation
+	}, version));
+	const state = data === null ? null : aboutState(data.about, data.about_at, writing);
+	return pane(null, /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": intro,
+		className: classes(classNames, "sc-about__intro"),
+		children: [
+			/* @__PURE__ */ jsx(AgentName, {
+				id: intro,
+				agentId,
+				icon,
+				name,
+				label: home,
+				classNames
+			}),
+			problem !== null ? /* @__PURE__ */ jsxs(Problem, {
+				words,
+				classNames,
+				onRetry: retry,
+				children: [words.failed, problem instanceof ApiError && ` ${problem.detail}`]
+			}) : data === null || data.about === null ? /* @__PURE__ */ jsx(Writing, {
+				text: data === null ? words.loading : words.writing(name),
+				classNames
+			}) : /* @__PURE__ */ jsx("p", {
+				className: classes(classNames, "sc-about__lead"),
+				children: data.about.summary
+			}),
+			state === "writing" && data?.about != null && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: classes(classNames, "sc-about__updating"),
+				children: words.updating
+			})
+		]
+	}), data !== null && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Automations, {
+			apps,
+			told: automationsOf(data.about, data.facts),
+			live,
+			words,
+			classNames,
+			tools,
+			controls,
+			onOpen: (automation) => go({
+				kind: "automation",
+				name: automation.name
+			})
+		}),
+		data.about !== null && data.about.asks.length > 0 && /* @__PURE__ */ jsx(Asks, {
+			asks: data.about.asks,
+			words,
+			classNames
+		}),
+		/* @__PURE__ */ jsxs("nav", {
+			"aria-label": words.facts,
+			className: classes(classNames, "sc-about__menu"),
+			children: [/* @__PURE__ */ jsx("p", {
+				className: classes(classNames, "sc-about__label"),
+				children: words.facts
+			}), /* @__PURE__ */ jsx("div", {
+				className: classes(classNames, "sc-about__topics"),
+				children: HOME_TOPICS.map((topic) => /* @__PURE__ */ jsx(TopicRow, {
+					topic,
+					facts: data.facts,
+					apps,
+					words,
+					classNames,
+					onOpen: () => go({
+						kind: "topic",
+						topic
+					})
+				}, topic))
+			})]
+		})
+	] })] }));
+}
+/**
+* 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 = [
+	"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 }) {
+	const count = countOf(topic, facts);
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onOpen,
+		"data-empty": count === 0 || void 0,
+		className: classes(classNames, "sc-about__topic"),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: classes(classNames, "sc-about__topic-name"),
+				children: words.topics[topic]
+			}),
+			count === 0 ? /* @__PURE__ */ jsx("span", {
+				className: classes(classNames, "sc-about__topic-none"),
+				children: words.empty[topic]
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TopicMarks, {
+				topic,
+				facts,
+				apps,
+				words,
+				count
+			}), /* @__PURE__ */ jsx("span", {
+				className: classes(classNames, "sc-about__topic-count"),
+				children: count
+			})] }),
+			/* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 16 16",
+				fill: "none",
+				"aria-hidden": true,
+				className: classes(classNames, "sc-about__topic-go"),
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M6 3.5 10.5 8 6 12.5",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		]
+	});
+}
+/** 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 }) {
+	const shown = (topic === "channels" ? facts.channels.map((channel) => /* @__PURE__ */ jsx("span", { children: channelLogo(channel.kind, apps, words, 20) }, `${channel.kind}:${channel.name}`)) : topic === "apps" ? facts.connections.map((connection) => /* @__PURE__ */ jsx("span", { children: appMark(connectionApp(connection), apps, 20) }, connection.name)) : topic === "knowledge" ? facts.files.map((file) => /* @__PURE__ */ jsx(FileMark, {
+		name: file.path,
+		size: 20
+	}, file.path)) : [/* @__PURE__ */ jsx(Mark, {
+		icon: TOPIC_GLYPHS[topic],
+		size: 20
+	}, topic)]).slice(0, MOST_MARKS);
+	return /* @__PURE__ */ jsx(MarkStack, {
+		more: Math.max(0, (topic === "learning" || topic === "keys" ? 0 : count) - shown.length),
+		children: shown
+	});
+}
+/**
+* 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 }) {
+	const Glyph = agentGlyph(icon);
+	return /* @__PURE__ */ jsxs("h2", {
+		id,
+		"aria-label": label,
+		"data-tint": agentTint(agentId),
+		className: classes(classNames, "sc-about__name"),
+		children: [/* @__PURE__ */ jsx(Glyph, {
+			"aria-hidden": true,
+			weight: "duotone"
+		}), /* @__PURE__ */ jsx("span", { children: name })]
+	});
+}
+/**
+* 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) {
+	const key = keyOf(view);
+	const depth = depthOf(view);
+	const [moved, setMoved] = useState({
+		key,
+		depth,
+		motion: void 0
+	});
+	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) {
+	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 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes(classNames, "sc-about__bar"),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: onBack,
+			className: classes(classNames, "sc-about__back"),
+			children: [/* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 16 16",
+				fill: "none",
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M10 3.5 5.5 8l4.5 4.5",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			}), /* @__PURE__ */ jsx("span", { children: back })]
+		}), end != null && /* @__PURE__ */ jsx("span", {
+			className: classes(classNames, "sc-about__bar-end"),
+			children: end
+		})]
+	});
+}
+/**
+* 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 }) {
+	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 /* @__PURE__ */ jsx(Gone, {
+		classNames,
+		children: messages.automation.gone
+	});
+	if (read.value === null) return read.problem === null ? /* @__PURE__ */ jsx(Loading, {
+		words,
+		classNames
+	}) : /* @__PURE__ */ jsx(Gone, {
+		classNames,
+		children: words.failed
+	});
+	return /* @__PURE__ */ jsx(Automation, {
+		className: classes(classNames, "sc-about__automation"),
+		automation: read.value,
+		runs: read.value.runs,
+		apps,
+		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 }) {
+	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 /* @__PURE__ */ jsx(Gone, {
+		classNames,
+		children: words.runGone
+	});
+	if (read.value === null) return read.problem === null ? /* @__PURE__ */ jsx(Loading, {
+		words,
+		classNames
+	}) : /* @__PURE__ */ jsx(Gone, {
+		classNames,
+		children: words.failed
+	});
+	return /* @__PURE__ */ jsx(RunView, {
+		className: classes(classNames, "sc-about__run"),
+		run: read.value.record,
+		automation: read.value.automation,
+		apps,
+		onOpenConversation
+	});
+}
+/** A view whose thing is being read: lines with a light sweeping them. */
+function Loading({ words, classNames }) {
+	return /* @__PURE__ */ jsx(Writing, {
+		text: words.loading,
+		classNames
+	});
+}
+/** In place of what is no longer there, or could not be read. */
+function Gone({ classNames, children }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: classes(classNames, "sc-about__empty"),
+		children
+	});
+}
+/** An automation's mark says its kind: a time, a call from another system, an event. */
+const KIND_ICONS = {
+	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, apps, size) {
+	if (apps !== void 0) return apps.logo({
+		...app,
+		size
+	});
+	return /* @__PURE__ */ jsx(Mark, {
+		logo: true,
+		size,
+		children: providerMark(app.provider.split(":")[0], app.icon ?? void 0)
+	});
+}
+const connectionApp = (connection) => ({
+	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, apps, words, size) {
+	if (apps !== void 0) return apps.logo({
+		provider: kind,
+		name: words.channelNames[kind],
+		size
+	});
+	return /* @__PURE__ */ jsx(Mark, {
+		size,
+		children: channelMark(kind)
+	});
+}
+/** What could not be read or written, in the warning tone, and the button to try again. */
+function Problem({ words, classNames, onRetry, children }) {
+	return /* @__PURE__ */ jsxs("p", {
+		role: "alert",
+		className: classes(classNames, "sc-about__updated"),
+		children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => void onRetry(),
+			children: words.refresh
+		})]
+	});
+}
+/** The agent writing: the lead's lines with a light sweeping them, and the sentence saying so. */
+function Writing({ text, classNames }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		className: classes(classNames, "sc-about__writing"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			"aria-hidden": true,
+			children: [/* @__PURE__ */ jsx("i", {}), /* @__PURE__ */ jsx("i", {})]
+		}), /* @__PURE__ */ jsx("p", { children: text })]
+	});
+}
+/** What it asks leave for: its label, then the things, a short list. */
+function Asks({ asks, words, classNames }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": id,
+		className: classes(classNames, "sc-about__section", "sc-about__asks"),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: classes(classNames, "sc-about__label"),
+			children: /* @__PURE__ */ jsx("h3", {
+				id,
+				children: words.asks
+			})
+		}), /* @__PURE__ */ jsx("ul", { children: asks.map((ask, index) => /* @__PURE__ */ jsx("li", { children: ask }, index)) })]
+	});
+}
+/**
+* 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 }) {
+	const id = useId();
+	const { messages } = useKit();
+	const standing = new Map(live?.map((automation) => [automation.name, automation]));
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": id,
+		className: classes(classNames, "sc-about__section"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: classes(classNames, "sc-about__label"),
+				children: [/* @__PURE__ */ jsx("h3", {
+					id,
+					children: words.does
+				}), controls?.newAutomation !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: classes(classNames, "sc-about__tools"),
+					children: controls.newAutomation(tools)
+				})]
+			}),
+			told.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: classes(classNames, "sc-about__empty"),
+				children: words.noAutomations
+			}) : /* @__PURE__ */ jsx(List, { children: 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 /* @__PURE__ */ jsx(Row, {
+					mark: automation.provider === void 0 ? /* @__PURE__ */ jsx(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 : void 0,
+					meta: going ? /* @__PURE__ */ jsxs(Tag, {
+						tone: "info",
+						children: [/* @__PURE__ */ jsx("i", {
+							"aria-hidden": true,
+							className: classes(classNames, "sc-run__live")
+						}), messages.automation.statuses.running]
+					}) : automation.on ? void 0 : /* @__PURE__ */ jsx(Tag, { children: words.paused }),
+					quiet: !automation.on,
+					onPress: () => onOpen(automation),
+					trailing: controls?.automation?.(automation, tools)
+				}, automation.id);
+			}) }),
+			controls?.automationsNote?.(tools)
+		]
+	});
+}
+/**
+* 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 }) {
+	const id = useId();
+	const tool = controls?.topic?.[topic];
+	const count = countOf(topic, facts);
+	const shown = topic === "tools" ? facts.actions.length : count;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": id,
+		className: classes(classNames, "sc-about__group"),
+		children: [
+			/* @__PURE__ */ jsxs("h3", {
+				id,
+				className: classes(classNames, "sc-about__title"),
+				children: [
+					/* @__PURE__ */ jsx("span", { children: words.topics[topic] }),
+					count > 0 && /* @__PURE__ */ jsx("b", {
+						className: classes(classNames, "sc-about__count"),
+						children: count
+					}),
+					tool !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: classes(classNames, "sc-about__tools"),
+						children: tool(tools)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: classes(classNames, "sc-about__hint"),
+				children: words.hints[topic]
+			}),
+			topic === "channels" ? /* @__PURE__ */ jsx(Channels, {
+				client,
+				agentId,
+				version,
+				facts,
+				apps,
+				words,
+				classNames,
+				tools,
+				controls
+			}) : shown === 0 ? /* @__PURE__ */ jsx("p", {
+				className: classes(classNames, "sc-about__empty"),
+				children: words.empty[topic]
+			}) : topic === "knowledge" ? /* @__PURE__ */ jsx(Knowledge, {
+				name,
+				facts,
+				words,
+				classNames,
+				tools,
+				controls,
+				onOpenFile
+			}) : topic === "tools" ? /* @__PURE__ */ jsx(Tools, {
+				name,
+				facts,
+				label,
+				words,
+				classNames,
+				tools,
+				controls
+			}) : topic === "keys" ? /* @__PURE__ */ jsx(Keys, {
+				name,
+				facts,
+				words,
+				classNames,
+				tools,
+				controls
+			}) : topic === "learning" ? /* @__PURE__ */ jsx(List, { children: facts.memories.map((memory) => /* @__PURE__ */ jsx(Row, {
+				className: classes(classNames, "sc-about__memory"),
+				title: memory.text,
+				subtitle: words.ago(new Date(memory.created_at)),
+				trailing: controls?.memory?.(memory, tools)
+			}, memory.id)) }) : /* @__PURE__ */ jsx(Rows, {
+				items: appItems(facts, tools, controls, apps),
+				classNames
+			})
+		]
+	});
+}
+/** How each state of a channel reads beside its dot: working, waiting, broken, or off. */
+const CHANNEL_TONES = {
+	active: "on",
+	pending: "wait",
+	error: "off",
+	disconnected: "quiet"
+};
+const isStatus = (status) => status in CHANNEL_TONES;
+/** The order channels are listed in: by kind, as people reach a business most; disconnected last. */
+const KIND_ORDER = [
+	"whatsapp",
+	"instagram",
+	"sms",
+	"email",
+	"web",
+	"phone"
+];
+const inOrder = (channels) => [...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 }) {
+	const [listed, setListed] = useState(null);
+	useEffect(() => {
+		let gone = false;
+		client.channels.list(agentId).then((channels) => {
+			if (!gone) setListed(channels);
+		}, () => void 0);
+		return () => {
+			gone = true;
+		};
+	}, [
+		client,
+		agentId,
+		version
+	]);
+	const state = (status) => {
+		const known = isStatus(status);
+		return /* @__PURE__ */ jsxs("span", {
+			"data-tone": known ? CHANNEL_TONES[status] : toneOf(status),
+			className: classes(classNames, "sc-about__state"),
+			children: [/* @__PURE__ */ jsx("i", {
+				"aria-hidden": true,
+				className: classes(classNames, "sc-about__dot")
+			}), known ? words.channelStates[status] : status]
+		});
+	};
+	const told = (channel) => {
+		const detail = channel.detail === null ? null : words.channelDetail(channel.detail);
+		const error = channel.status === "error";
+		return {
+			subtitle: /* @__PURE__ */ jsxs(Fragment$1, { children: [channel.name, !error && detail !== null && detail !== "" && /* @__PURE__ */ jsx("span", {
+				className: classes(classNames, "sc-about__detail"),
+				children: detail
+			})] }),
+			error: error ? detail ?? void 0 : void 0
+		};
+	};
+	const rows = listed === null ? facts.channels.map((channel) => /* @__PURE__ */ jsx(Row, {
+		mark: channelLogo(channel.kind, apps, words, 28),
+		title: words.channelNames[channel.kind],
+		subtitle: channel.name,
+		meta: state(channel.status)
+	}, `${channel.kind}:${channel.name}`)) : inOrder(listed).map((channel) => /* @__PURE__ */ jsx(Row, {
+		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) ?? void 0
+	}, channel.id));
+	const devices = facts.devices.map((device) => /* @__PURE__ */ jsx(Row, {
+		mark: /* @__PURE__ */ jsx(Mark, { children: deviceMark(device.kind) }),
+		title: device.name,
+		meta: /* @__PURE__ */ jsx("i", {
+			"aria-hidden": true,
+			"data-tone": toneOf(device.status),
+			className: classes(classNames, "sc-about__dot")
+		})
+	}, `device:${device.kind}:${device.name}`));
+	if (rows.length + devices.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: classes(classNames, "sc-about__empty"),
+		children: words.empty.channels
+	});
+	return /* @__PURE__ */ jsxs(List, { children: [rows, devices] });
+}
+/** Its apps: each by its logo and name, what it may do there under it, how it stands at its end. */
+function appItems(facts, tools, controls, apps) {
+	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 === void 0 ? void 0 : 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 }) {
+	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) => /* @__PURE__ */ jsx(Rows, {
+		items: [...actions.filter((a) => a.on), ...actions.filter((a) => !a.on)].map((action) => ({
+			key: `${action.source}:${action.name}`,
+			mark: /* @__PURE__ */ jsx(Mark, { children: actionMark(action.name, action.source) }),
+			label: label(action),
+			note: action.on ? void 0 : words.off,
+			off: !action.on,
+			control: controls?.tool?.(action, tools)
+		})),
+		classNames
+	});
+	if (groups.length === 1) return rows(groups[0]?.actions ?? []);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: groups.map((group) => /* @__PURE__ */ jsx(Group, {
+		title: group.title,
+		classNames,
+		children: rows(group.actions)
+	}, group.key)) });
+}
+const isOwn = (action) => action.source === "own";
+/** A part of a topic under its small heading: whose things they are, or what kind. */
+function Group({ title, classNames, children }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("h4", {
+		className: classes(classNames, "sc-about__subtitle"),
+		children: title
+	}), children] });
+}
+/** What is the agent's own, then the organization's: the heading says whose, once. */
+function byOwner(things, name, words) {
+	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 }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [byOwner(facts.files, name, words).map((group) => /* @__PURE__ */ jsx(Group, {
+		title: group.title,
+		classNames,
+		children: /* @__PURE__ */ jsx(List, { children: group.things.map((file) => /* @__PURE__ */ jsx(Row, {
+			className: classes(classNames, "sc-about__file"),
+			mark: /* @__PURE__ */ jsx(FileMark, { name: file.path }),
+			title: /* @__PURE__ */ jsx("span", {
+				title: file.path,
+				children: baseName(file.path)
+			}),
+			subtitle: fileLine(file, words),
+			meta: words.size(file.size),
+			onPress: onOpenFile && (() => onOpenFile(file)),
+			trailing: controls?.file?.(file, tools) ?? void 0
+		}, file.path)) })
+	}, group.key)), facts.data.length > 0 && /* @__PURE__ */ jsx(Group, {
+		title: words.tables,
+		classNames,
+		children: /* @__PURE__ */ jsx(Rows, {
+			items: facts.data.map((table) => ({
+				key: table.table,
+				mark: /* @__PURE__ */ jsx(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
+		})
+	})] });
+}
+/** Under a file's name: its folder, and that it is only kept when nothing reads it at a search. */
+function fileLine(file, words) {
+	const folder = folderOf(file.path);
+	if (file.searchable) return folder === "" ? void 0 : 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 }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: byOwner(facts.vault, name, words).map((group) => /* @__PURE__ */ jsx(Group, {
+		title: group.title,
+		classNames,
+		children: /* @__PURE__ */ jsx(Rows, {
+			items: group.things.map((secret) => ({
+				key: `${group.key}:${secret.name}`,
+				mark: /* @__PURE__ */ jsx(Mark, { icon: GLYPHS.lock }),
+				label: secret.name,
+				note: secret.hosts?.join(", "),
+				control: controls?.key?.(secret, tools)
+			})),
+			classNames
+		})
+	}, group.key)) });
+}
+/** The folders a file sits in: "" for one at the top. */
+const folderOf = (path) => path.slice(0, Math.max(0, path.lastIndexOf("/")));
+function Rows({ items, classNames }) {
+	return /* @__PURE__ */ jsx(List, { children: items.map((item) => /* @__PURE__ */ jsx(Row, {
+		mark: item.mark,
+		title: item.label,
+		subtitle: item.note === void 0 || item.note === "" ? void 0 : item.note,
+		meta: item.status === void 0 ? void 0 : /* @__PURE__ */ jsx("i", {
+			"aria-hidden": true,
+			"data-tone": item.status,
+			className: classes(classNames, "sc-about__dot")
+		}),
+		quiet: item.off,
+		trailing: item.control ?? void 0
+	}, item.key)) });
+}
+//#endregion
+export { ABOUT_HOME, ABOUT_MESSAGES, AgentAbout, aboutBack };
+
+//# sourceMappingURL=AgentAbout.js.map