@agimon-ai/doompi-web 0.0.1-alpha.0

package/src/web/features/status/TopBar.tsx

@@ -0,0 +1,208 @@
+import {
+  ActivityIcon,
+  Button,
+  CloseIcon,
+  Dot,
+  type DotTone,
+  Input,
+  NavTab,
+  NavTabBadge,
+  StatusBadge,
+  type StatusTone,
+} from '@agimon-ai/doompi-web-components';
+import type { TabContribution, TransientTab } from '@agimon-ai/doompi-web-contracts';
+import { Link } from '@tanstack/react-router';
+import { useStore } from '@tanstack/react-store';
+import { useState } from 'react';
+import { abbreviateCwd, runningCount, type AttachPhase } from '../../lib/sessionSummary.ts';
+import { webTabs } from '../../lib/pluginRegistry.ts';
+import { renameSession, useActiveSession } from '../../stores/sessionStore.ts';
+import { sessionsStore, useActiveSessionMeta } from '../../stores/sessionsStore.ts';
+import { closeTransientTab, useTransientTabs } from '../../stores/transientTabsStore.ts';
+
+/**
+ * The pill folds attach state and run state into one word, the way the mockup
+ * does: a healthy idle session says "attached", a healthy busy one says
+ * "running", and anything else names its trouble.
+ */
+function pill(attach: AttachPhase, busy: boolean): { text: string; tone: StatusTone; dot: DotTone; pulse: boolean } {
+  if (attach === 'attached' && busy) return { text: 'running', tone: 'running', dot: 'yellow', pulse: true };
+  if (attach === 'attached') return { text: 'attached', tone: 'ok', dot: 'green', pulse: false };
+  if (attach === 'connecting' || attach === 'detached') {
+    return { text: attach, tone: 'running', dot: 'yellow', pulse: attach === 'connecting' };
+  }
+  return { text: attach, tone: 'error', dot: 'red', pulse: false };
+}
+
+/** One registry tab: the badge hook is stable per tab, so the call is unconditional. */
+function PluginTab({ tab, sessionId, active }: { tab: TabContribution; sessionId: string; active: boolean }) {
+  const useBadge = tab.useBadge ?? noBadge;
+  const count = useBadge(sessionId);
+  return (
+    <NavTab asChild active={active}>
+      <Link
+        to="/session/$sessionId/$tabId"
+        params={{ sessionId, tabId: tab.id }}
+        data-testid={`tab-${tab.id}`}
+        className="shrink-0"
+      >
+        {tab.label}
+        {count > 0 ? (
+          <NavTabBadge active={active} data-testid={`tab-${tab.id}-count`}>
+            {count}
+          </NavTabBadge>
+        ) : null}
+      </Link>
+    </NavTab>
+  );
+}
+
+function noBadge(): number {
+  return 0;
+}
+
+/**
+ * A tab a plugin opened at runtime: its link with the close beside it, since
+ * a button cannot live inside a link. Closing the shown tab needs no
+ * navigation of its own; the page falls back to the conversation once the
+ * id is gone.
+ */
+function TransientTabChip({ tab, sessionId, active }: { tab: TransientTab; sessionId: string; active: boolean }) {
+  return (
+    <span data-testid={`tab-${tab.id}-chip`} className="flex shrink-0 items-center gap-0.5">
+      <NavTab asChild active={active}>
+        <Link
+          to="/session/$sessionId/$tabId"
+          params={{ sessionId, tabId: tab.id }}
+          data-testid={`tab-${tab.id}`}
+          title={tab.label}
+          className="block min-w-0 max-w-[160px] truncate"
+        >
+          {tab.label}
+        </Link>
+      </NavTab>
+      <Button
+        variant="ghost"
+        size="icon"
+        data-testid={`tab-${tab.id}-close`}
+        title="close this tab"
+        onClick={() => closeTransientTab(sessionId, tab.id)}
+        className="h-5 w-5 shrink-0"
+      >
+        <CloseIcon className="h-2.5 w-2.5" />
+      </Button>
+    </span>
+  );
+}
+
+export function TopBar({ view = 'conversation' }: { view?: string }) {
+  const meta = useActiveSessionMeta();
+  const session = useActiveSession((state) => state);
+  const running = useStore(sessionsStore, (state) =>
+    runningCount(state.order.map((id) => state.byId[id].summary.phase)),
+  );
+  const activeId = useStore(sessionsStore, (state) => state.activeId);
+  const transientTabs = useTransientTabs(activeId);
+  const attach: AttachPhase = meta?.attach ?? 'offline';
+  const busy = session.streaming || (meta !== null && meta.summary.phase !== 'idle');
+  const state = pill(attach, busy);
+  const title = meta?.summary.name || session.agent?.sessionName || 'untitled';
+  const [renaming, setRenaming] = useState(false);
+  const [draft, setDraft] = useState('');
+  // The name lives in the agent, so the rail's rename and this one are the
+  // same act through the same door; the new name arrives back on the socket.
+  const commitRename = (): void => {
+    const next = draft.trim();
+    if (next && next !== title) renameSession(next, activeId);
+    setRenaming(false);
+  };
+
+  return (
+    <header
+      data-testid="top-bar"
+      className="flex h-12 shrink-0 items-center justify-between gap-3 border-b border-doom-border px-5"
+    >
+      <div data-testid="session-switcher" className="flex min-w-0 items-center gap-2.5">
+        {renaming && activeId !== null ? (
+          <Input
+            data-testid="session-title-input"
+            value={draft}
+            autoFocus
+            aria-label="session name"
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') commitRename();
+              if (event.key === 'Escape') setRenaming(false);
+            }}
+            onBlur={commitRename}
+            className="h-6 w-44 shrink-0 border-doom-blue/60 px-1.5 text-[13px] font-bold"
+          />
+        ) : (
+          <Button
+            variant="ghost"
+            data-testid="session-title"
+            title={activeId === null ? undefined : 'rename this session'}
+            disabled={activeId === null}
+            onClick={() => {
+              setDraft(title);
+              setRenaming(true);
+            }}
+            className="h-6 shrink-0 px-1 text-[13px] font-bold text-doom-hi"
+          >
+            {title}
+          </Button>
+        )}
+        {meta ? (
+          <>
+            <span className="text-[12px] text-doom-faint">·</span>
+            <span data-testid="top-cwd" className="truncate text-[11px] text-doom-dim">
+              {abbreviateCwd(meta.summary.cwd)}
+            </span>
+          </>
+        ) : null}
+        {activeId !== null ? (
+          // Tabs never shrink; past the width the badges leave them, the strip
+          // scrolls sideways (scrollbar hidden) instead of running under them.
+          <div className="ml-1.5 flex min-w-0 items-center gap-1.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+            <NavTab asChild active={view === 'conversation'}>
+              <Link
+                to="/session/$sessionId"
+                params={{ sessionId: activeId }}
+                data-testid="tab-conversation"
+                className="shrink-0"
+              >
+                conversation
+              </Link>
+            </NavTab>
+            {webTabs().map((tab) => (
+              <PluginTab key={tab.id} tab={tab} sessionId={activeId} active={view === tab.id} />
+            ))}
+            {transientTabs.map((tab) => (
+              <TransientTabChip key={tab.id} tab={tab} sessionId={activeId} active={view === tab.id} />
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      <div className="flex shrink-0 items-center gap-2">
+        {meta && meta.dropped > 0 ? (
+          <span
+            data-testid="dropped-count"
+            title="frames the hub's ring lost before this page subscribed"
+            className="text-[10px] text-doom-yellow"
+          >
+            {meta.dropped} dropped
+          </span>
+        ) : null}
+        <StatusBadge size="md" tone={state.tone} data-testid="connection-status" className="font-normal">
+          <Dot tone={state.dot} pulse={state.pulse} />
+          {state.text}
+        </StatusBadge>
+        <StatusBadge size="md" tone="running" data-testid="sessions-running" className="font-normal">
+          <ActivityIcon className="h-[10px] w-[10px]" />
+          {running} running
+        </StatusBadge>
+      </div>
+    </header>
+  );
+}

package/src/web/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="alternate icon" href="/favicon.ico" sizes="48x48 32x32 16x16" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <meta name="theme-color" content="#1c1f24" />
+    <title>DoomPi cockpit</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/src/web/lib/authApi.ts

@@ -0,0 +1,90 @@
+import {
+  AUTH_LOGINS_API_ROUTE,
+  AUTH_PROVIDERS_API_ROUTE,
+  type AuthMethodType,
+  type LoginFlowSnapshot,
+  type ProviderAuthSummary,
+} from '../../types/auth.ts';
+
+export type ProvidersResult = { providers: ProviderAuthSummary[] } | { error: string };
+export type LoginFlowResult = { flow: LoginFlowSnapshot } | { error: string };
+export type LogoutResult = { ok: true } | { error: string };
+
+const UNREACHABLE = 'The cockpit hub is unreachable.';
+const JSON_HEADERS = { 'Content-Type': 'application/json' };
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/**
+ * One shape for every provider-auth call: a network failure, a non-2xx
+ * answer, and a 2xx body missing the expected field all come back as
+ * `{ error }`, so the settings page has one branch to render.
+ */
+async function request<T>(
+  input: string,
+  init: RequestInit | undefined,
+  pick: (body: Record<string, unknown>) => T | undefined,
+): Promise<T | { error: string }> {
+  let response: Response;
+  try {
+    response = await fetch(input, init);
+  } catch {
+    return { error: UNREACHABLE };
+  }
+  let body: unknown;
+  try {
+    body = await response.json();
+  } catch {
+    body = undefined;
+  }
+  if (response.ok && isRecord(body)) {
+    const picked = pick(body);
+    if (picked !== undefined) return picked;
+  }
+  const error = isRecord(body) && typeof body.error === 'string' ? body.error : `The hub answered ${response.status}.`;
+  return { error };
+}
+
+const pickFlow = (body: Record<string, unknown>): { flow: LoginFlowSnapshot } | undefined =>
+  isRecord(body.flow) ? { flow: body.flow as unknown as LoginFlowSnapshot } : undefined;
+
+/** Every provider Pi knows on the hub's machine, with its auth state. */
+export function listProviders(): Promise<ProvidersResult> {
+  return request(AUTH_PROVIDERS_API_ROUTE, undefined, (body) =>
+    Array.isArray(body.providers) ? { providers: body.providers as ProviderAuthSummary[] } : undefined,
+  );
+}
+
+/** Starts a sign-in on the hub; the returned flow is then polled with readLogin. */
+export function startLogin(providerId: string, type: AuthMethodType): Promise<LoginFlowResult> {
+  return request(
+    AUTH_LOGINS_API_ROUTE,
+    { method: 'POST', headers: JSON_HEADERS, body: JSON.stringify({ providerId, type }) },
+    pickFlow,
+  );
+}
+
+export function readLogin(flowId: string): Promise<LoginFlowResult> {
+  return request(`${AUTH_LOGINS_API_ROUTE}/${encodeURIComponent(flowId)}`, undefined, pickFlow);
+}
+
+export function answerLogin(flowId: string, promptId: string, value: string): Promise<LoginFlowResult> {
+  return request(
+    `${AUTH_LOGINS_API_ROUTE}/${encodeURIComponent(flowId)}/answer`,
+    { method: 'POST', headers: JSON_HEADERS, body: JSON.stringify({ promptId, value }) },
+    pickFlow,
+  );
+}
+
+export function cancelLogin(flowId: string): Promise<LoginFlowResult> {
+  return request(`${AUTH_LOGINS_API_ROUTE}/${encodeURIComponent(flowId)}`, { method: 'DELETE' }, pickFlow);
+}
+
+/** Removes the credential /login stored; environment variables are untouched. */
+export function logoutProvider(providerId: string): Promise<LogoutResult> {
+  return request(`${AUTH_PROVIDERS_API_ROUTE}/${encodeURIComponent(providerId)}`, { method: 'DELETE' }, () => ({
+    ok: true as const,
+  }));
+}

package/src/web/lib/commands.ts

@@ -0,0 +1,61 @@
+type Frame = Record<string, unknown>;
+
+export function promptCommand(message: string): Frame {
+  return { type: 'prompt', message };
+}
+
+export function steerCommand(message: string): Frame {
+  return { type: 'steer', message };
+}
+
+export function followUpCommand(message: string): Frame {
+  return { type: 'follow_up', message };
+}
+
+export function abortCommand(): Frame {
+  return { type: 'abort' };
+}
+
+export function getStateCommand(): Frame {
+  return { type: 'get_state' };
+}
+
+export function getSessionStatsCommand(): Frame {
+  return { type: 'get_session_stats' };
+}
+
+export function getCommandsCommand(): Frame {
+  return { type: 'get_commands' };
+}
+
+export function getAvailableModelsCommand(): Frame {
+  return { type: 'get_available_models' };
+}
+
+export function getAvailableThinkingLevelsCommand(): Frame {
+  return { type: 'get_available_thinking_levels' };
+}
+
+export function setModelCommand(provider: string, modelId: string): Frame {
+  return { type: 'set_model', provider, modelId };
+}
+
+export function setThinkingLevelCommand(level: string): Frame {
+  return { type: 'set_thinking_level', level };
+}
+
+export function setSessionNameCommand(name: string): Frame {
+  return { type: 'set_session_name', name };
+}
+
+export function dialogValue(id: string, value: string): Frame {
+  return { type: 'extension_ui_response', id, value };
+}
+
+export function dialogConfirmed(id: string, confirmed: boolean): Frame {
+  return { type: 'extension_ui_response', id, confirmed };
+}
+
+export function dialogCancelled(id: string): Frame {
+  return { type: 'extension_ui_response', id, cancelled: true };
+}

package/src/web/lib/composition.ts

@@ -0,0 +1,225 @@
+import type { SelectionAxisContribution } from '@agimon-ai/doompi-web-contracts';
+import type { MinorModeProjection, MinorModeRecordProjection } from '../../types/hub.ts';
+import { pluginActivityGroups, pluginMinorModes, pluginSelectionAxes } from './pluginRegistry.ts';
+import { stripAnsi } from './statusLine.ts';
+
+export interface SelectionAxis {
+  name: string;
+  command: string;
+  /** The current selections, empty while the session reports none; one at most unless multi. */
+  values: string[];
+  emptyLabel: string;
+  multi: boolean;
+}
+
+const AXIS_LIST_SEPARATOR = ',';
+
+/**
+ * The fallback axis table for the packaged bundle; a synced bundle carries
+ * each axis as its owning package's plugin declaration, and the registry
+ * list wins whenever any plugin declares one. Exported only so the workspace
+ * composition test can hold it equal to what the packages declare.
+ */
+export const PACKAGED_SELECTION_AXES: readonly SelectionAxisContribution[] = [
+  { name: 'profile', command: 'profile', statusKey: 'doom-profile', emptyLabel: 'no profile', order: 10 },
+  { name: 'domains', command: 'domains', statusKey: 'doom-domain', emptyLabel: 'no domains', multi: true, order: 20 },
+];
+
+/**
+ * The declared axes the session actually offers: an axis whose status key
+ * the session never published stays off the bar entirely, which is how a
+ * package withholds its axis when there is nothing to select.
+ */
+export function selectionAxes(statuses: Record<string, string>): SelectionAxis[] {
+  const declared = pluginSelectionAxes();
+  const sources: readonly SelectionAxisContribution[] = declared.length > 0 ? declared : PACKAGED_SELECTION_AXES;
+  return sources.flatMap((source) => {
+    const raw = statuses[source.statusKey];
+    if (raw === undefined) return [];
+    const multi = source.multi === true;
+    const values = (multi ? stripAnsi(raw).split(AXIS_LIST_SEPARATOR) : [stripAnsi(raw)])
+      .map((value) => value.trim())
+      .filter(Boolean);
+    return [{ name: source.name, command: source.command, values, emptyLabel: source.emptyLabel, multi }];
+  });
+}
+
+export type MinorModeAvailability = 'unavailable' | 'off' | 'on';
+
+export interface MinorMode {
+  name: string;
+  /** The catalog id /minor accepts; the display name until the catalog reports. */
+  id: string;
+  /** Leader Space key path, as the TUI documents it. */
+  keys: string;
+  availability: MinorModeAvailability;
+  /** What the mode itself is reporting while on. */
+  detail: string;
+  /**
+   * Why the mode cannot be driven from here, in the words of the mode itself.
+   * Empty when it can be. A mode may be installed and still refuse a cockpit:
+   * autonomous voice captures from the terminal's own microphone, which a
+   * browser talking to a headless agent does not have.
+   */
+  unavailableReason: string;
+}
+
+export interface MinorModeSource {
+  name: string;
+  /** The catalog mode this row drives, when the runtime registers it under another id. */
+  modeId?: string;
+  keys: string;
+  statusKey?: string;
+  widgetKey?: string;
+}
+
+/**
+ * The fallback minor-mode table for the packaged bundle.
+ *
+ * A synced bundle carries each mode as its package's own web plugin
+ * contribution, and the registry list wins whenever any plugin declares one.
+ * This literal survives only so the built-in-only bundle keeps rendering the
+ * modes DoomPi ships; help is listed without a signal on purpose: it
+ * registers no footer entry, so the cockpit reports it as unavailable rather
+ * than guessing it is off. Exported only for the workspace composition test.
+ */
+export const PACKAGED_MINOR_MODES: readonly MinorModeSource[] = [
+  { name: 'help', keys: 'h e' },
+  { name: 'plan', keys: 'p e', statusKey: 'plan-mode' },
+  { name: 'loop', keys: 'l l', statusKey: 'doom-loop' },
+  { name: 'goal', keys: 'g e', statusKey: 'goal' },
+  { name: 'workflow', keys: 'w e', widgetKey: 'workflow-mcp-progress' },
+  // `v e` drives autonomous capture, which the runtime registers as 'voice-auto'.
+  { name: 'voice', modeId: 'voice-auto', keys: 'v e', statusKey: 'doom-voice' },
+];
+
+/** The declared source a catalog mode corresponds to, by id, id stem, or label. */
+function sourceFor(sources: readonly MinorModeSource[], mode: MinorModeRecordProjection): MinorModeSource | undefined {
+  const candidates = new Set([mode.id.toLowerCase(), mode.id.toLowerCase().split('.')[0], mode.label.toLowerCase()]);
+  return sources.find((source) => candidates.has(source.name.toLowerCase()));
+}
+
+/**
+ * Catalog-backed rows: the runtime's own activation state per mode, with the
+ * declared leader keys attached where a plugin documents them. Declared modes
+ * the catalog does not know are still listed, as unavailable, so a mode that
+ * is missing from a composition stays visible rather than silently gone.
+ */
+function catalogMinorModes(sources: readonly MinorModeSource[], projection: MinorModeProjection): MinorMode[] {
+  const rows: MinorMode[] = projection.modes.map((mode) => {
+    const source = sourceFor(sources, mode);
+    const on = mode.activation === 'active' || mode.activation === 'deactivating';
+    // The catalog says per action whether it can run here and why not. A mode
+    // with nothing runnable is offered as a row that cannot be clicked rather
+    // than one that answers "no actions available" after the fact.
+    const blocked = mode.actions.length > 0 && mode.actions.every((action) => !action.enabled);
+    const reason = blocked ? (mode.actions.find((action) => action.disabledReason)?.disabledReason ?? '') : '';
+    return {
+      name: source?.name ?? mode.label.toLowerCase(),
+      id: mode.id,
+      keys: source?.keys ?? '',
+      availability: blocked && !on ? 'unavailable' : on ? 'on' : 'off',
+      detail: mode.detail ?? (mode.activation === 'activating' ? 'activating' : ''),
+      unavailableReason: reason,
+    };
+  });
+  const seen = new Set(rows.map((row) => row.name));
+  for (const source of sources) {
+    if (!seen.has(source.name)) {
+      rows.push({
+        name: source.name,
+        id: source.modeId ?? source.name,
+        keys: source.keys,
+        availability: 'unavailable',
+        detail: '',
+        unavailableReason: 'No package in this session registers this mode.',
+      });
+    }
+  }
+  return rows;
+}
+
+export function minorModes(
+  statuses: Record<string, string>,
+  widgets: readonly string[],
+  projection: MinorModeProjection | null = null,
+): MinorMode[] {
+  const declared = pluginMinorModes();
+  const sources: readonly MinorModeSource[] = declared.length > 0 ? declared : PACKAGED_MINOR_MODES;
+  if (projection) return catalogMinorModes(sources, projection);
+  return sources.map((source) => {
+    if (source.statusKey !== undefined) {
+      const raw = statuses[source.statusKey];
+      if (raw === undefined) {
+        return {
+          name: source.name,
+          id: source.modeId ?? source.name,
+          keys: source.keys,
+          availability: 'unavailable' as const,
+          detail: '',
+          unavailableReason: 'This session has not reported the mode.',
+        };
+      }
+      const detail = stripAnsi(raw).trim();
+      return {
+        name: source.name,
+        id: source.modeId ?? source.name,
+        keys: source.keys,
+        availability: detail ? ('on' as const) : ('off' as const),
+        detail,
+        unavailableReason: '',
+      };
+    }
+    if (source.widgetKey !== undefined && widgets.includes(source.widgetKey)) {
+      return {
+        name: source.name,
+        id: source.modeId ?? source.name,
+        keys: source.keys,
+        availability: 'off' as const,
+        detail: '',
+        unavailableReason: '',
+      };
+    }
+    return {
+      name: source.name,
+      id: source.name,
+      keys: source.keys,
+      availability: 'unavailable' as const,
+      detail: '',
+      unavailableReason: 'This session has not reported the mode.',
+    };
+  });
+}
+
+export interface ActivityGroup {
+  name: string;
+  keys: string;
+  /** What the publishing extension is reporting, empty when it reports nothing. */
+  summary: string;
+  active: boolean;
+  /** The plugin tab the group's key chip opens, when its package declares one. */
+  tab?: string;
+}
+
+/**
+ * The declared groups the session actually signals. There is no host-side
+ * fallback table: agents, runners, and workflows are each declared by the
+ * package that owns them, so a composition without such a package shows no
+ * group, and a session that never published a group's signal shows none
+ * either.
+ */
+export function activityGroups(statuses: Record<string, string>, widgets: readonly string[]): ActivityGroup[] {
+  const groups: ActivityGroup[] = [];
+  for (const source of pluginActivityGroups()) {
+    const tab = source.tab === undefined ? {} : { tab: source.tab };
+    if (source.statusKey !== undefined && statuses[source.statusKey] !== undefined) {
+      const summary = stripAnsi(statuses[source.statusKey] ?? '').trim();
+      groups.push({ name: source.name, keys: source.keys, summary, active: summary.length > 0, ...tab });
+      continue;
+    }
+    if (source.widgetKeys !== undefined && source.widgetKeys.some((key) => widgets.includes(key))) {
+      groups.push({ name: source.name, keys: source.keys, summary: '', active: false, ...tab });
+    }
+  }
+  return groups;
+}

package/src/web/lib/fileMentions.ts

@@ -0,0 +1,32 @@
+import { MEDIA_TYPES, type MediaKind } from '../../types/media.ts';
+
+export interface FileMention {
+  /** The cwd-relative path as the message spelled it. */
+  path: string;
+  /** How the timeline previews it; 'file' offers a link instead. */
+  kind: MediaKind | 'file';
+}
+
+// An @ token starts the message or follows whitespace, runs to the next
+// whitespace, and sheds the punctuation a sentence hangs on it.
+const MENTION = /(?:^|\s)@([^\s@]+)/gu;
+const TRAILING_PUNCTUATION = /[.,;:!?)\]]+$/u;
+
+export function mediaKindFor(filePath: string): MediaKind | 'file' {
+  const dot = filePath.lastIndexOf('.');
+  if (dot < 0) return 'file';
+  return MEDIA_TYPES[filePath.slice(dot + 1).toLowerCase()]?.kind ?? 'file';
+}
+
+/** The distinct files a message mentions with @, in order of appearance. */
+export function parseFileMentions(text: string): FileMention[] {
+  const seen = new Set<string>();
+  const mentions: FileMention[] = [];
+  for (const match of text.matchAll(MENTION)) {
+    const mentionPath = match[1].replace(TRAILING_PUNCTUATION, '');
+    if (!mentionPath || seen.has(mentionPath)) continue;
+    seen.add(mentionPath);
+    mentions.push({ path: mentionPath, kind: mediaKindFor(mentionPath) });
+  }
+  return mentions;
+}