);
+ if (entries.length === 0)
+ return (
+
+ {"{ }"}
+
+ );
+ return (
+
+ {entries.map(([k, v]) => {
+ const isContainer =
+ v !== null && typeof v === "object" && Object.keys(v).length > 0;
+ return (
+
+ );
+ })}
+
+ {content}
+
+ );
+ }
+ // Tool-call args (and any other structured payload) — render as
+ // recursive badges. A flat JSON dump is hard to scan once
+ // arguments grow nested; a key→value chip tree mirrors how the
+ // model actually thought about the call.
+ return (
+
+
+
+ );
+};
+
+function stepStateGlyph(state: AiStep["state"]) {
+ switch (state) {
+ case "complete":
+ return ;
+ case "failed":
+ return ;
+ case "cancelled":
+ return ;
+ case "pending-approval":
+ return ;
+ default:
+ return (
+
+ );
+ }
+}
+
+const StepRow: React.FC<{
+ accent: string;
+ isFirst: boolean;
+ isLast: boolean;
+ children: React.ReactNode;
+}> = ({ accent, isFirst, isLast, children }) => (
+
+
+ {/* Vertical connector line: spans the full row height so
+ consecutive rows visually join; clipped on the first /
+ last row so it doesn't hang past the outermost dots. */}
+
+
+
+
{children}
+
+
+ {headerKind}
+
+ {step.label && (
+
+ {step.label}
+
+ )}
+ {stepStateGlyph(step.state)}
+
+ {step.content !== undefined && step.content !== null && (
+
+
+
+ )}
+ {step.truncated && (
+
+ output truncated
+
+ )}
+
+ );
+};
+
+// Render a tool-call together with its matching tool-result as a
+// single row -- one header (the tool name), then IN (call args) and
+// OUT (result) stacked below. Either side may be absent during the
+// in-between window after the call lands and before the result
+// arrives.
+const ToolPairStep: React.FC<{
+ call?: AiStep;
+ result?: AiStep;
+ isFirst: boolean;
+ isLast: boolean;
+}> = ({ call, result, isFirst, isLast }) => {
+ const accent = STEP_TYPE_ACCENT["tool-call"];
+ const primary = result ?? call;
+ const tool = primary?.tool ?? "tool";
+ const label = primary?.label;
+ const state = primary?.state ?? "running";
+ const truncated = call?.truncated || result?.truncated;
+
+ return (
+
+
+
+ Tool
+
+ {tool}
+ {label && (
+
+ {label}
+
+ )}
+ {stepStateGlyph(state)}
+
+ {call?.content !== undefined && call?.content !== null && (
+
+ )}
+ {result?.content !== undefined && result?.content !== null && (
+
+ )}
+ {truncated && (
+
+ output truncated
+
+ )}
+
+ );
+};
+
+type RenderItem =
+ | { kind: "single"; key: string; step: AiStep }
+ | {
+ kind: "tool-pair";
+ key: string;
+ call?: AiStep;
+ result?: AiStep;
+ approvalSid?: string;
+ };
+
+function buildRenderItems(steps: AiStep[]): RenderItem[] {
+ const items: RenderItem[] = [];
+ const paired = new Set();
+ for (let i = 0; i < steps.length; i++) {
+ if (paired.has(i)) continue;
+ const s = steps[i];
+ if (s.type === "tool-call") {
+ let result: AiStep | undefined;
+ for (let j = i + 1; j < steps.length; j++) {
+ if (paired.has(j)) continue;
+ const t = steps[j];
+ if (t.type === "tool-result" && t.tool === s.tool) {
+ result = t;
+ paired.add(j);
+ break;
+ }
+ }
+ items.push({
+ kind: "tool-pair",
+ key: s.sid,
+ call: s,
+ result,
+ approvalSid:
+ s.state === "pending-approval"
+ ? s.sid
+ : result?.state === "pending-approval"
+ ? result.sid
+ : undefined,
+ });
+ } else if (s.type === "tool-result") {
+ // tool-result with no preceding tool-call: render standalone
+ items.push({
+ kind: "tool-pair",
+ key: s.sid,
+ result: s,
+ approvalSid: s.state === "pending-approval" ? s.sid : undefined,
+ });
+ } else {
+ items.push({ kind: "single", key: s.sid, step: s });
+ }
+ }
+ return items;
+}
+
+export const BotToolsCard: React.FC = ({ workflow }) => {
+ const { t } = useLingui();
+ const setCollapsed = useStore((s) => s.aiWorkflowSetCollapsed);
+ const dismiss = useStore((s) => s.aiWorkflowDismiss);
+ const sendAction = useStore((s) => s.aiSendAction);
+ // For "Responded in chat" — map the workflow's finalMsgid (an IRC
+ // msgid string) to the internal Message.id we use as the DOM key.
+ // Only takes a single string out of the store so we don't re-render
+ // the card on every unrelated message arrival.
+ const finalMessageInternalId = useStore((s) => {
+ if (!workflow.finalMsgid) return undefined;
+ for (const bucket of Object.values(s.messages)) {
+ for (const m of bucket) {
+ if (
+ m.serverId === workflow.serverId &&
+ m.msgid === workflow.finalMsgid
+ ) {
+ return m.id;
+ }
+ }
+ }
+ return undefined;
+ });
+
+ // Re-render at the 10-minute timeout boundary so a still-running
+ // workflow flips to "timed out" without a user interaction.
+ const [, forceTick] = useState(0);
+ useEffect(() => {
+ if (isTerminalState(workflow.state)) return;
+ const elapsed = Date.now() - workflow.startedAt;
+ const remaining = WORKFLOW_TIMEOUT_MS - elapsed;
+ if (remaining <= 0) return;
+ const id = setTimeout(() => forceTick((n) => n + 1), remaining + 50);
+ return () => clearTimeout(id);
+ }, [workflow.state, workflow.startedAt]);
+
+ const displayState = effectiveWorkflowState(workflow);
+ const isTerminal = isTerminalState(displayState);
+
+ const onToggle = () =>
+ setCollapsed(workflow.serverId, workflow.id, !workflow.collapsed);
+
+ const onCancel = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ sendAction(workflow.serverId, workflow.senderNick, {
+ msg: "action",
+ action: "cancel",
+ target: workflow.id,
+ });
+ };
+
+ const onApprove = (sid: string) => {
+ sendAction(workflow.serverId, workflow.senderNick, {
+ msg: "action",
+ action: "approve",
+ target: sid,
+ });
+ };
+
+ const onReject = (sid: string) => {
+ sendAction(workflow.serverId, workflow.senderNick, {
+ msg: "action",
+ action: "reject",
+ target: sid,
+ });
+ };
+
+ const pendingApprovals = workflow.steps.filter(
+ (s) => s.state === "pending-approval",
+ );
+
+ // Auto-dismiss countdown — once a workflow is terminal AND collapsed,
+ // start a 5s countdown. The user can re-expand or hover to pause.
+ // Expanding the card resets the timer entirely (they're reviewing the
+ // run); collapsing again restarts it.
+ const FADE_SECONDS = 5;
+ const [secondsLeft, setSecondsLeft] = useState(null);
+ const [paused, setPaused] = useState(false);
+ useEffect(() => {
+ if (!isTerminal || !workflow.collapsed) {
+ setSecondsLeft(null);
+ return;
+ }
+ setSecondsLeft(FADE_SECONDS);
+ }, [isTerminal, workflow.collapsed]);
+ // biome-ignore lint/correctness/useExhaustiveDependencies: dismiss is a Zustand action with unstable ref
+ useEffect(() => {
+ if (secondsLeft === null || paused) return;
+ if (secondsLeft <= 0) {
+ dismiss(workflow.serverId, workflow.id);
+ return;
+ }
+ const t = setTimeout(() => setSecondsLeft((s) => (s ?? 0) - 1), 1000);
+ return () => clearTimeout(t);
+ }, [secondsLeft, paused, workflow.serverId, workflow.id]);
+
+ // Auto-scroll the expanded step list. We can't check "is the user
+ // at the bottom?" inside the content-update effect, because by the
+ // time the effect runs the new content has already grown
+ // scrollHeight and the old scrollTop no longer qualifies as
+ // bottom. Instead, track stickiness via the scroll event: whenever
+ // the user scrolls (or we programmatically scroll), recompute
+ // whether they're at the bottom. On content update, honour that
+ // flag. Reset to sticky on each fresh expansion so a freshly-
+ // opened card always lands on the latest content.
+ const bodyRef = useRef(null);
+ const isStickyToBottom = useRef(true);
+ const onBodyScroll = useCallback(() => {
+ const el = bodyRef.current;
+ if (!el) return;
+ const SCROLL_TOLERANCE = 24;
+ isStickyToBottom.current =
+ el.scrollHeight - (el.scrollTop + el.clientHeight) <= SCROLL_TOLERANCE;
+ }, []);
+ // biome-ignore lint/correctness/useExhaustiveDependencies: track step count + updatedAt because step content updates don't change the array reference
+ useEffect(() => {
+ const el = bodyRef.current;
+ if (!el || workflow.collapsed) {
+ isStickyToBottom.current = true;
+ return;
+ }
+ if (isStickyToBottom.current) {
+ el.scrollTop = el.scrollHeight;
+ }
+ }, [workflow.collapsed, workflow.steps.length, workflow.updatedAt]);
+
+ // Linearly fade the card from full opacity to a barely-visible
+ // ghost over the entire countdown. Bottoms out at 0.15 so a
+ // re-hover (which pauses the timer) doesn't land on an invisible
+ // target.
+ const fadeOpacity =
+ secondsLeft !== null ? Math.max(0.15, secondsLeft / FADE_SECONDS) : 1;
+
+ return (
+ setPaused(true)}
+ onMouseLeave={() => setPaused(false)}
+ className="w-[680px] max-w-full bg-discord-dark-300/95 backdrop-blur-sm border border-discord-dark-400 rounded-lg shadow-xl overflow-hidden"
+ >
+ {/* Header — collapsed row.
with role=button because the
+ row holds Dismiss/Cancel
+ );
+};
+
+export default BotToolsCard;
diff --git a/src/components/ui/BotToolsHistoryButton.tsx b/src/components/ui/BotToolsHistoryButton.tsx
new file mode 100644
index 00000000..b723ba61
--- /dev/null
+++ b/src/components/ui/BotToolsHistoryButton.tsx
@@ -0,0 +1,278 @@
+import { Trans, useLingui } from "@lingui/react/macro";
+import type React from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+ FaCheck,
+ FaProjectDiagram,
+ FaSpinner,
+ FaTimesCircle,
+} from "react-icons/fa";
+import {
+ countableSteps,
+ effectiveWorkflowState,
+ isStale,
+} from "../../lib/botTools";
+import type { AiWorkflow } from "../../store";
+import useStore from "../../store";
+import LoadingSpinner from "./LoadingSpinner";
+
+interface BotToolsHistoryButtonProps {
+ serverId: string;
+ channel: string | null;
+}
+
+const ACTIVE_STATES: ReadonlySet
= new Set([
+ "start",
+ "reasoning",
+ "running",
+]);
+
+function isActive(w: AiWorkflow): boolean {
+ if (isStale(w)) return false;
+ return ACTIVE_STATES.has(w.state);
+}
+
+function stateGlyph(state: AiWorkflow["state"]) {
+ switch (state) {
+ case "complete":
+ return ;
+ case "failed":
+ case "cancelled":
+ return ;
+ default:
+ return (
+
+ );
+ }
+}
+
+function fmtAgo(ts: number): string {
+ const s = Math.max(1, Math.round((Date.now() - ts) / 1000));
+ if (s < 60) return `${s}s`;
+ const m = Math.round(s / 60);
+ if (m < 60) return `${m}m`;
+ const h = Math.round(m / 60);
+ if (h < 24) return `${h}h`;
+ return `${Math.round(h / 24)}d`;
+}
+
+// Workflow history button + popover for the chat header.
+//
+// Now two-level: top tier lists the bots that have run a workflow in
+// the active channel (most-recently-active first); hovering or clicking
+// a bot opens a second tier of that bot's workflows, latest-first.
+// When at least one workflow is in flight the icon carries the shared
+// LoadingSpinner badge so the user can see something is happening
+// without the tray of cards we used to pop up automatically.
+export const BotToolsHistoryButton: React.FC = ({
+ serverId,
+ channel,
+}) => {
+ const { t } = useLingui();
+ const reopen = useStore((s) => s.aiWorkflowReopen);
+ const serverWorkflows = useStore((s) => s.aiWorkflows[serverId]);
+
+ const workflows = useMemo(() => {
+ if (!serverWorkflows || !channel) return [];
+ return Object.values(serverWorkflows)
+ .filter((w) => w.channel === channel)
+ .sort((a, b) => b.startedAt - a.startedAt);
+ }, [serverWorkflows, channel]);
+
+ // Group by sender nick. Each bucket sorted latest-first so the
+ // submenu reads top -> bottom newest-to-oldest, matching the rest
+ // of the chat surface.
+ const byBot = useMemo(() => {
+ const map = new Map();
+ for (const w of workflows) {
+ const key = w.senderNick;
+ const list = map.get(key) ?? [];
+ list.push(w);
+ map.set(key, list);
+ }
+ // Sort the bots by their latest workflow's start time.
+ return Array.from(map.entries())
+ .map(([nick, list]) => ({
+ nick,
+ list,
+ latestAt: list[0]?.startedAt ?? 0,
+ activeCount: list.filter(isActive).length,
+ }))
+ .sort((a, b) => b.latestAt - a.latestAt);
+ }, [workflows]);
+
+ const activeTotal = useMemo(
+ () => workflows.filter(isActive).length,
+ [workflows],
+ );
+
+ const [open, setOpen] = useState(false);
+ const [expandedBot, setExpandedBot] = useState(null);
+ const rootRef = useRef(null);
+
+ useEffect(() => {
+ if (!open) {
+ setExpandedBot(null);
+ return;
+ }
+ const onClick = (e: MouseEvent) => {
+ if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
+ };
+ const onKey = (e: KeyboardEvent) => {
+ if (e.key === "Escape") setOpen(false);
+ };
+ document.addEventListener("mousedown", onClick);
+ document.addEventListener("keydown", onKey);
+ return () => {
+ document.removeEventListener("mousedown", onClick);
+ document.removeEventListener("keydown", onKey);
+ };
+ }, [open]);
+
+ if (workflows.length === 0) return null;
+
+ return (
+
+
+ {open && (
+
+
+
+ Workflow history
+
+ {workflows.length}
+
+
+ {byBot.map(({ nick, list, activeCount }) => {
+ const isExpanded = expandedBot === nick;
+ return (
+ -
+
+ {isExpanded && (
+
+ {list.map((w) => (
+ -
+
+
+ ))}
+
+ )}
+
+ );
+ })}
+
+
+ )}
+
+ {visible.map((w) => (
+
+
+
+ ))}
+
+
+
{bot.nick}
+
+ {SCOPE_BADGE[bot.scope].label}
+
+
+ {STATUS_BADGE[bot.status].label}
+
+
+
+ {bot.online ? t`gateway online` : t`offline`}
+
+
+ {bot.realname && (
+
{bot.realname}
+ )}
+
+
+ -
+ Transport
+
+ - {bot.transport}
+ -
+ Source
+
+ -
+ {bot.from_config ? t`config-defined` : t`self-registered`}
+
+ {bot.scope === "channel" && (
+ <>
+ -
+ Channels
+
+ -
+ {bot.channels.length ? bot.channels.join(", ") : "—"}
+
+
+ )}
+ {bot.webhook_url !== undefined && (
+ <>
+ -
+ Webhook
+
+ -
+ {bot.webhook_url || "—"}
+ {bot.webhook_suspended && (
+
+ (suspended)
+
+ )}
+
+
+ )}
+
+
+
+
+ Slash commands
+
+ {bot.commands.length === 0 ? (
+
+ {loading ? (
+ <>
+
+ Commands are loading…
+
+ ) : (
+ Bot hasn't registered any slash commands yet.
+ )}
+
+ ) : (
+
+ {bot.commands.map((cmd) => {
+ const body = (
+ <>
+
+ /{cmd.name}
+ {(cmd.options ?? []).map((o) => (
+
+ {o.required ? `<${o.name}>` : `[${o.name}]`}
+
+ ))}
+
+ {cmd.description && (
+
+ {cmd.description}
+
+ )}
+
+ );
+ return onPickCommand ? (
+ -
+
+
+ ) : (
+ -
+ {body}
+
+ );
+ })}
+
+ )}
+
+
+ {isOper && !bot.from_config && (
+
+
+ Operator actions
+
+
+ {bot.status === "pending" && (
+
+ )}
+ {bot.status === "active" && (
+
+ )}
+ {bot.status === "suspended" && (
+
+ )}
+
+
+
+ )}
+ {isOper && bot.from_config && (
+
+
+ Config-defined bot. Edit obbyircd.conf and /REHASH to change state.
+
+
+ )}
+
+
setQuery(e.target.value)}
+ placeholder={t`Search bots`}
+ className="w-full bg-discord-dark-400 rounded px-2 py-1.5 text-sm text-discord-text-normal placeholder:text-discord-text-muted border border-discord-dark-300 focus:outline-none focus:border-discord-primary"
+ />
+
+ {(["all", "server", "channel"] as FilterMode[]).map((f) => (
+
+ ))}
+
+ {bots.length}
+
+
+
+ {bots.length === 0 ? (
+
+ No bots registered on this network yet.
+
+ ) : (
+ bots.map((b) => (
+
onPickBot(b.nick)}
+ />
+ ))
+ )}
+
+
+
+ Select a bot on the left to see its commands and management actions.
+
+
+ );
+
+ // ── mobile: full-screen portal with two views ──────────────────────
+ if (isMobile) {
+ const portalTarget = document.getElementById("root") || document.body;
+ return createPortal(
+
+ {mobileView === "list" ? (
+ <>
+
+
+
+ Bots
+
+
+
+ {listPane}
+
+ ) : (
+ <>
+
+
+
+
+ {selected?.nick ?? t`Bot`}
+
+
+
+
+
{detailPane}
+
+ )}
+
+
+ {/* Sidebar — list of bots */}
+
+
+
+
+ Bots
+
+
+ {listPane}
+
+
+ {/* Main content — bot detail */}
+
+
+
+ {selected ? selected.nick : t`Bots on this network`}
+
+
+
+
+
+
+
+
+ {field}
+ {option.description && option.type !== "bool" && (
+
+ {option.description}
+
+ )}
+
-
+
- Slash commands
+ Slash commands
- {matches.map((cmd, index) => (
-
onSelect(cmd)}
- onMouseEnter={() => setSelectedIndex(index)}
- >
- /{cmd}
-
- ))}
+ {matches.map((cmd, index) => {
+ const sig = formatOptions(cmd.options);
+ const isSelected = index === selectedIndex;
+ return (
+
onSelect(cmd)}
+ onMouseEnter={() => setSelectedIndex(index)}
+ >
+
+
+ /{cmd.name}
+ {sig && (
+
+ {sig}
+
+ )}
+
+ {sourceBadge(cmd.source, t)}
+ {cmd.source.kind === "bot" && (
+
+ @{cmd.source.botNick}
+
+ )}
+
+ {cmd.description && (
+
+ {cmd.description}
+
+ )}
+
+ );
+ })}
);
diff --git a/src/components/ui/SlashParamHint.tsx b/src/components/ui/SlashParamHint.tsx
new file mode 100644
index 00000000..303be876
--- /dev/null
+++ b/src/components/ui/SlashParamHint.tsx
@@ -0,0 +1,187 @@
+// Inline hint shown above the chat input once the user has typed the
+// command name and at least one space, e.g.
+//
+// /forecast lon
+// ───────────────────────────────────────────────────
+// /forecast
— Look up the current weather for a city
+// ^^^ city (string, required) via @weather
+//
+// The active parameter (the one the cursor is currently on) is bolded.
+// Only fires for draft/bot-cmds commands -- builtin /op /me etc. don't
+// publish a schema so there's nothing to hint about.
+
+import { Trans } from "@lingui/react/macro";
+import type React from "react";
+import { useEffect, useMemo, useState } from "react";
+import type { BotCommand } from "../../types";
+
+export interface SlashParamSchema {
+ command: BotCommand;
+ source: "client" | "bot";
+ /** Present iff source === "bot" */
+ botNick?: string;
+ scope: "channel" | "server" | "dm";
+}
+
+interface SlashParamHintProps {
+ inputValue: string;
+ cursorPosition: number;
+ /** Map of command name → schema, lowercased keys. */
+ schemas: Record;
+ inputElement?: HTMLInputElement | HTMLTextAreaElement | null;
+}
+
+/** Returns { cmdName, argIndex } when the cursor is inside an arg
+ * position of `/ …`, otherwise null.
+ *
+ * cmdName is the raw form (may include `@botnick`); the caller can
+ * look this up directly against a schemas map keyed by the same
+ * composite form, then fall back to the bare cmd if no specific
+ * entry exists. */
+export function getActiveParamContext(
+ input: string,
+ cursor: number,
+): { cmdName: string; argIndex: number } | null {
+ if (!input.startsWith("/") || input.startsWith("//")) return null;
+ // Strip leading slash, find the command name (before first space).
+ const head = input.slice(1);
+ const firstSpace = head.indexOf(" ");
+ if (firstSpace === -1) return null; // still typing the command name
+ const cmdName = head.slice(0, firstSpace).toLowerCase();
+ const bare = cmdName.includes("@") ? cmdName.split("@")[0] : cmdName;
+ if (!bare) return null;
+
+ // Cursor must be at or past the first space.
+ const cursorInHead = cursor - 1;
+ if (cursorInHead <= firstSpace) return null;
+
+ // Count spaces in head[0..cursorInHead] to figure out which arg.
+ let argIndex = -1; // -1 means still in cmd name region
+ for (let i = 0; i <= cursorInHead && i < head.length; i++) {
+ if (head[i] === " ") argIndex++;
+ }
+ if (argIndex < 0) return null;
+ return { cmdName, argIndex };
+}
+
+export const SlashParamHint: React.FC = ({
+ inputValue,
+ cursorPosition,
+ schemas,
+ inputElement,
+}) => {
+ // The parent only re-renders this hint when its own state changes
+ // (and it intentionally avoids re-rendering on every keystroke for
+ // perf reasons -- input value is held in a ref). Subscribe to the
+ // input element directly so the hint re-evaluates context on every
+ // edit; only then will it correctly disappear when the user edits
+ // the command name to something the schemas don't know about.
+ const [liveValue, setLiveValue] = useState(inputValue);
+ const [liveCursor, setLiveCursor] = useState(cursorPosition);
+
+ useEffect(() => {
+ if (!inputElement) return;
+ const refresh = () => {
+ setLiveValue(inputElement.value);
+ setLiveCursor(inputElement.selectionStart ?? inputElement.value.length);
+ };
+ refresh();
+ inputElement.addEventListener("input", refresh);
+ inputElement.addEventListener("keyup", refresh);
+ inputElement.addEventListener("click", refresh);
+ return () => {
+ inputElement.removeEventListener("input", refresh);
+ inputElement.removeEventListener("keyup", refresh);
+ inputElement.removeEventListener("click", refresh);
+ };
+ }, [inputElement]);
+
+ // Keep parent-provided props as a fallback for the first render
+ // before the listener has fired (and so unit tests that don't wire
+ // an element still get the static read).
+ const effValue = inputElement ? liveValue : inputValue;
+ const effCursor = inputElement ? liveCursor : cursorPosition;
+
+ const ctx = useMemo(
+ () => getActiveParamContext(effValue, effCursor),
+ [effValue, effCursor],
+ );
+
+ if (!ctx) return null;
+ // Try `/cmd@bot` first, then fall back to the bare command name.
+ const bare = ctx.cmdName.includes("@")
+ ? ctx.cmdName.split("@")[0]
+ : ctx.cmdName;
+ const entry = schemas[ctx.cmdName] ?? schemas[bare];
+ if (!entry) return null;
+
+ const opts = entry.command.options ?? [];
+ if (opts.length === 0) return null;
+
+ // Position above the input, same anchor as the popover.
+ const inputRect = inputElement?.getBoundingClientRect();
+ const top = inputRect ? inputRect.top + window.scrollY - 70 : 100;
+ const left = inputRect ? inputRect.left + window.scrollX : 100;
+
+ return (
+
+
+ /{entry.command.name}{" "}
+ {opts.map((o, i) => {
+ const active = i === ctx.argIndex;
+ const text = o.required ? `<${o.name}>` : `[${o.name}]`;
+ return (
+
+ {text}{" "}
+
+ );
+ })}
+
+ {entry.source === "bot" ? (
+ via @{entry.botNick}
+ ) : (
+ (handled by ObsidianIRC)
+ )}
+
+
+ {opts[ctx.argIndex] && (
+
+
+ {opts[ctx.argIndex].name}
+
+ {" — "}
+ {opts[ctx.argIndex].type || "string"}
+ {opts[ctx.argIndex].required && (
+
+ required
+
+ )}
+ {opts[ctx.argIndex].description && (
+ — {opts[ctx.argIndex].description}
+ )}
+
+ )}
+ {/* show choices if present */}
+ {(opts[ctx.argIndex]?.choices?.length ?? 0) > 0 && (
+
+ one of:{" "}
+
+ {opts[ctx.argIndex].choices?.join(", ")}
+
+
+ )}
+
+
+
+
+ {botCommands.map((c) => (
+
+ ))}
+