@adecore/agents-react 0.37.2 → 0.38.0

package/dist/chat/ui/VisualFrame.js

@@ -1,12 +1,12 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
-import { visualThemeFragment } from '@adecore/agent-contracts/visual';
+import { VISUAL_LIMITS, visualThemeFragment } from '@adecore/agent-contracts/visual';
 import { Spinner, useMeasuredWidth } from '@adecore/ui';
 import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
-import { initialVisualContentHeight, rememberVisualHeight } from '../logic/visual-height.js';
+import { DEFAULT_HEIGHT_PX, initialVisualContentHeight, rememberVisualHeight } from '../logic/visual-height.js';
 import { VisualBridge } from '../visual-bridge.js';
 import { VisualViewportController } from '../visual-viewport.js';
 import { useVisualTheme } from './visual-theme.js';
@@ -19,13 +19,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function personActsIn(frame) {
   return frame.ownerDocument.activeElement === frame && navigator.userActivation?.isActive !== false;
 }
-/*
- * One visual's page in a frame that loads the app's sandbox host page; the bridge hands it the page and
- * the theme. The frame never gets `allow-same-origin`, which keeps the page on an opaque origin even
- * when the host page is served on the app's own. Its box keeps one height while it loads or fails.
- */
+const defaultHeight = () => DEFAULT_HEIGHT_PX;
+/* A visual of a chat, its page read from the chat's attachments under the visual's id. */
 export function VisualFrame(t0) {
-  const $ = _c(65);
+  const $ = _c(17);
   const {
     chatId,
     visual,
@@ -34,13 +31,123 @@ export function VisualFrame(t0) {
   } = t0;
   const fill = t1 === undefined ? false : t1;
   const {
-    visuals,
     attachments
   } = useChatHost();
+  const scope = useChatScope();
+  let t2;
+  if ($[0] !== attachments || $[1] !== chatId || $[2] !== scope.id || $[3] !== visual.id) {
+    t2 = () => attachments.read(scope.id, chatId, visual.id).then(_temp);
+    $[0] = attachments;
+    $[1] = chatId;
+    $[2] = scope.id;
+    $[3] = visual.id;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const page = t2;
+  let t3;
+  if ($[5] !== visual) {
+    t3 = width => initialVisualContentHeight(visual, width);
+    $[5] = visual;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== visual.id) {
+    t4 = (width_0, height) => rememberVisualHeight(visual.id, width_0, height);
+    $[7] = visual.id;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== className || $[10] !== fill || $[11] !== page || $[12] !== t3 || $[13] !== t4 || $[14] !== visual.maxHeight || $[15] !== visual.title) {
+    t5 = /*#__PURE__*/_jsx(PageFrame, {
+      page: page,
+      title: visual.title,
+      maxHeight: visual.maxHeight,
+      fill: fill,
+      className: className,
+      initialHeight: t3,
+      onHeight: t4
+    });
+    $[9] = className;
+    $[10] = fill;
+    $[11] = page;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = visual.maxHeight;
+    $[15] = visual.title;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  return t5;
+}
+/*
+ * A visual's page outside a chat thread, such as one an app kept: the same sandboxed frame, theme and
+ * links as in a thread, with the page read through `page`. Draws nothing while the host has no `visuals`.
+ */
+function _temp(blob) {
+  return blob.text();
+}
+export function VisualPageFrame(t0) {
+  const $ = _c(6);
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      maxHeight: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+    $[2] = t1;
+  } else {
+    props = $[1];
+    t1 = $[2];
+  }
+  const maxHeight = t1 === undefined ? VISUAL_LIMITS.maxHeight : t1;
+  let t2;
+  if ($[3] !== maxHeight || $[4] !== props) {
+    t2 = /*#__PURE__*/_jsx(PageFrame, {
+      ...props,
+      maxHeight: maxHeight,
+      initialHeight: defaultHeight
+    });
+    $[3] = maxHeight;
+    $[4] = props;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+/*
+ * One page in a frame that loads the app's sandbox host page; the bridge hands it the page and the
+ * theme. The frame never gets `allow-same-origin`, which keeps the page on an opaque origin even when
+ * the host page is served on the app's own. Its box keeps one height while it loads or fails.
+ */
+function PageFrame(t0) {
+  const $ = _c(61);
+  const {
+    page,
+    title,
+    maxHeight,
+    fill: t1,
+    className,
+    initialHeight,
+    onHeight
+  } = t0;
+  const fill = t1 === undefined ? false : t1;
+  const {
+    visuals
+  } = useChatHost();
   const {
     t
   } = useTranslation("agent-chat");
-  const scope = useChatScope();
   const frameUrl = visuals?.frameUrl ?? null;
   const boxRef = useRef(null);
   const frameRef = useRef(null);
@@ -63,6 +170,7 @@ export function VisualFrame(t0) {
   const setBox = t2;
   const theme = useVisualTheme(boxRef);
   const widthRef = useRef(width);
+  const onHeightRef = useRef(onHeight);
   const [reported, setReported] = useState(null);
   const [drawn, setDrawn] = useState(null);
   const [failed, setFailed] = useState(false);
@@ -74,11 +182,11 @@ export function VisualFrame(t0) {
     });
   }
   let t3;
-  if ($[2] !== fill || $[3] !== reported || $[4] !== visual || $[5] !== width) {
-    t3 = fill || width === 0 ? undefined : reported ?? initialVisualContentHeight(visual, width);
+  if ($[2] !== fill || $[3] !== initialHeight || $[4] !== reported || $[5] !== width) {
+    t3 = fill || width === 0 ? undefined : reported ?? initialHeight(width);
     $[2] = fill;
-    $[3] = reported;
-    $[4] = visual;
+    $[3] = initialHeight;
+    $[4] = reported;
     $[5] = width;
     $[6] = t3;
   } else {
@@ -87,22 +195,24 @@ export function VisualFrame(t0) {
   const height = t3;
   let t4;
   let t5;
-  if ($[7] !== width) {
+  if ($[7] !== onHeight || $[8] !== width) {
     t4 = () => {
       widthRef.current = width;
+      onHeightRef.current = onHeight;
     };
-    t5 = [width];
-    $[7] = width;
-    $[8] = t4;
-    $[9] = t5;
+    t5 = [width, onHeight];
+    $[7] = onHeight;
+    $[8] = width;
+    $[9] = t4;
+    $[10] = t5;
   } else {
-    t4 = $[8];
-    t5 = $[9];
+    t4 = $[9];
+    t5 = $[10];
   }
   useLayoutEffect(t4, t5);
   let t6;
   let t7;
-  if ($[10] !== attachments || $[11] !== chatId || $[12] !== fill || $[13] !== opening || $[14] !== scope.id || $[15] !== visual.id || $[16] !== visual.maxHeight || $[17] !== visuals) {
+  if ($[11] !== fill || $[12] !== maxHeight || $[13] !== opening || $[14] !== page || $[15] !== visuals) {
     t6 = () => {
       const frame = frameRef.current;
       if (opening === null || frame === null) {
@@ -111,9 +221,9 @@ export function VisualFrame(t0) {
       const bridge = new VisualBridge({
         frame: () => frame.contentWindow,
         visual: {
-          maxHeight: visual.maxHeight
+          maxHeight
         },
-        page: attachments.read(scope.id, chatId, visual.id).then(_temp),
+        page: page(),
         theme: opening.theme,
         mayOpenLink: () => personActsIn(frame),
         openLink: url => visuals?.openLink(url),
@@ -122,7 +232,7 @@ export function VisualFrame(t0) {
             return;
           }
           setReported(next);
-          rememberVisualHeight(visual.id, widthRef.current, next);
+          onHeightRef.current?.(widthRef.current, next);
         },
         ...(!fill ? {
           onViewportReady: () => setViewportReady(true),
@@ -141,24 +251,21 @@ export function VisualFrame(t0) {
         bridgeRef.current = null;
       };
     };
-    t7 = [opening, scope.id, chatId, visual.id, visual.maxHeight, fill, visuals, attachments];
-    $[10] = attachments;
-    $[11] = chatId;
-    $[12] = fill;
+    t7 = [opening, page, maxHeight, fill, visuals];
+    $[11] = fill;
+    $[12] = maxHeight;
     $[13] = opening;
-    $[14] = scope.id;
-    $[15] = visual.id;
-    $[16] = visual.maxHeight;
-    $[17] = visuals;
-    $[18] = t6;
-    $[19] = t7;
+    $[14] = page;
+    $[15] = visuals;
+    $[16] = t6;
+    $[17] = t7;
   } else {
-    t6 = $[18];
-    t7 = $[19];
+    t6 = $[16];
+    t7 = $[17];
   }
   useLayoutEffect(t6, t7);
   let t8;
-  if ($[20] !== fill || $[21] !== viewportReady) {
+  if ($[18] !== fill || $[19] !== viewportReady) {
     t8 = () => {
       const box = boxRef.current;
       const viewport = viewportRef.current;
@@ -174,98 +281,96 @@ export function VisualFrame(t0) {
         controllerRef.current = null;
       };
     };
-    $[20] = fill;
-    $[21] = viewportReady;
-    $[22] = t8;
+    $[18] = fill;
+    $[19] = viewportReady;
+    $[20] = t8;
   } else {
-    t8 = $[22];
+    t8 = $[20];
   }
   let t9;
-  if ($[23] !== chatId || $[24] !== fill || $[25] !== opening || $[26] !== scope.id || $[27] !== viewportReady || $[28] !== visual.id || $[29] !== visual.maxHeight) {
-    t9 = [fill, viewportReady, opening, scope.id, chatId, visual.id, visual.maxHeight];
-    $[23] = chatId;
-    $[24] = fill;
-    $[25] = opening;
-    $[26] = scope.id;
-    $[27] = viewportReady;
-    $[28] = visual.id;
-    $[29] = visual.maxHeight;
-    $[30] = t9;
+  if ($[21] !== fill || $[22] !== maxHeight || $[23] !== opening || $[24] !== page || $[25] !== viewportReady) {
+    t9 = [fill, viewportReady, opening, page, maxHeight];
+    $[21] = fill;
+    $[22] = maxHeight;
+    $[23] = opening;
+    $[24] = page;
+    $[25] = viewportReady;
+    $[26] = t9;
   } else {
-    t9 = $[30];
+    t9 = $[26];
   }
   useLayoutEffect(t8, t9);
   let t10;
-  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
     t10 = () => controllerRef.current?.refresh();
-    $[31] = t10;
+    $[27] = t10;
   } else {
-    t10 = $[31];
+    t10 = $[27];
   }
   let t11;
-  if ($[32] !== height || $[33] !== width) {
+  if ($[28] !== height || $[29] !== width) {
     t11 = [height, width];
-    $[32] = height;
-    $[33] = width;
-    $[34] = t11;
+    $[28] = height;
+    $[29] = width;
+    $[30] = t11;
   } else {
-    t11 = $[34];
+    t11 = $[30];
   }
   useLayoutEffect(t10, t11);
   let t12;
   let t13;
-  if ($[35] !== theme) {
+  if ($[31] !== theme) {
     t12 = () => {
       if (theme !== null) {
         bridgeRef.current?.setTheme(theme);
       }
     };
     t13 = [theme];
-    $[35] = theme;
-    $[36] = t12;
-    $[37] = t13;
+    $[31] = theme;
+    $[32] = t12;
+    $[33] = t13;
   } else {
-    t12 = $[36];
-    t13 = $[37];
+    t12 = $[32];
+    t13 = $[33];
   }
   useEffect(t12, t13);
   const t14 = fill ? "absolute inset-0" : "relative w-full";
   let t15;
-  if ($[38] !== className || $[39] !== t14) {
+  if ($[34] !== className || $[35] !== t14) {
     t15 = clsx(t14, className);
-    $[38] = className;
-    $[39] = t14;
-    $[40] = t15;
+    $[34] = className;
+    $[35] = t14;
+    $[36] = t15;
   } else {
-    t15 = $[40];
+    t15 = $[36];
   }
   let t16;
-  if ($[41] !== height) {
+  if ($[37] !== height) {
     t16 = {
       height
     };
-    $[41] = height;
-    $[42] = t16;
+    $[37] = height;
+    $[38] = t16;
   } else {
-    t16 = $[42];
+    t16 = $[38];
   }
   const t17 = fill ? "absolute inset-0" : "sticky top-0 w-full";
   let t18;
-  if ($[43] !== fill) {
+  if ($[39] !== fill) {
     t18 = fill ? undefined : {
       height: "100%"
     };
-    $[43] = fill;
-    $[44] = t18;
+    $[39] = fill;
+    $[40] = t18;
   } else {
-    t18 = $[44];
+    t18 = $[40];
   }
   let t19;
-  if ($[45] !== drawn || $[46] !== failed || $[47] !== opening || $[48] !== visual.title) {
+  if ($[41] !== drawn || $[42] !== failed || $[43] !== opening || $[44] !== title) {
     t19 = opening !== null && /*#__PURE__*/_jsx("iframe", {
       ref: frameRef,
       src: opening.src,
-      title: visual.title,
+      title: title,
       loading: "lazy",
       sandbox: "allow-scripts allow-forms",
       className: clsx("block size-full border-0", failed && "invisible"),
@@ -274,72 +379,69 @@ export function VisualFrame(t0) {
       },
       onLoad: () => bridgeRef.current?.loaded()
     });
-    $[45] = drawn;
-    $[46] = failed;
-    $[47] = opening;
-    $[48] = visual.title;
-    $[49] = t19;
+    $[41] = drawn;
+    $[42] = failed;
+    $[43] = opening;
+    $[44] = title;
+    $[45] = t19;
   } else {
-    t19 = $[49];
+    t19 = $[45];
   }
   let t20;
-  if ($[50] !== drawn || $[51] !== failed || $[52] !== t || $[53] !== visual.title) {
+  if ($[46] !== drawn || $[47] !== failed || $[48] !== t || $[49] !== title) {
     t20 = failed ? /*#__PURE__*/_jsx("p", {
       className: "absolute inset-0 grid place-items-center px-4 text-center text-xs text-text-muted",
       children: t("visuals.failed", {
-        title: visual.title
+        title
       })
     }) : drawn === null && /*#__PURE__*/_jsx("span", {
       className: "chat-visual-wait pointer-events-none absolute inset-0 grid place-items-center text-text-faint",
       children: /*#__PURE__*/_jsx(Spinner, {
         size: 16,
         label: t("visuals.loading", {
-          title: visual.title
+          title
         })
       })
     });
-    $[50] = drawn;
-    $[51] = failed;
-    $[52] = t;
-    $[53] = visual.title;
-    $[54] = t20;
+    $[46] = drawn;
+    $[47] = failed;
+    $[48] = t;
+    $[49] = title;
+    $[50] = t20;
   } else {
-    t20 = $[54];
+    t20 = $[50];
   }
   let t21;
-  if ($[55] !== t17 || $[56] !== t18 || $[57] !== t19 || $[58] !== t20) {
+  if ($[51] !== t17 || $[52] !== t18 || $[53] !== t19 || $[54] !== t20) {
     t21 = /*#__PURE__*/_jsxs("div", {
       ref: viewportRef,
       className: t17,
       style: t18,
       children: [t19, t20]
     });
-    $[55] = t17;
-    $[56] = t18;
-    $[57] = t19;
-    $[58] = t20;
-    $[59] = t21;
+    $[51] = t17;
+    $[52] = t18;
+    $[53] = t19;
+    $[54] = t20;
+    $[55] = t21;
   } else {
-    t21 = $[59];
+    t21 = $[55];
   }
   let t22;
-  if ($[60] !== setBox || $[61] !== t15 || $[62] !== t16 || $[63] !== t21) {
+  if ($[56] !== setBox || $[57] !== t15 || $[58] !== t16 || $[59] !== t21) {
     t22 = /*#__PURE__*/_jsx("div", {
       ref: setBox,
       className: t15,
       style: t16,
       children: t21
     });
-    $[60] = setBox;
-    $[61] = t15;
-    $[62] = t16;
-    $[63] = t21;
-    $[64] = t22;
+    $[56] = setBox;
+    $[57] = t15;
+    $[58] = t16;
+    $[59] = t21;
+    $[60] = t22;
   } else {
-    t22 = $[64];
+    t22 = $[60];
   }
   return t22;
-}
-function _temp(blob) {
-  return blob.text();
 }

package/dist/chat/ui/chip-clipboard.d.ts

@@ -0,0 +1,9 @@
+import type { ChatAssistantItem, ChatUserItem } from '@adecore/agent-contracts';
+import { type ClipboardChips } from '../mentions.js';
+import type { TimelineRow } from '../logic/timeline.js';
+import type { ReferenceLookup } from './reference-lookup.js';
+export declare function messageClipboardChips(item: ChatUserItem | ChatAssistantItem, text: string, lookup: Pick<ReferenceLookup, 'items' | 'referenced'>): ClipboardChips;
+export declare function rowClipboardChips(row: TimelineRow, text: string, lookup: Pick<ReferenceLookup, 'items' | 'referenced'>): ClipboardChips;
+export declare function selectionChips(selection: Selection): ClipboardChips;
+export declare function copySelectionWithChips(event: ClipboardEvent): void;
+export declare function copyWithChips(chips: ClipboardChips): void;

package/dist/chat/ui/chip-clipboard.js

@@ -0,0 +1,105 @@
+import { copyText } from '@adecore/ui';
+import { referenceTokens } from '../chat-references.js';
+import { clipboardChipsOf, hasClipboardChips, tokenizeChips, tokenizeNamedReferences, writeClipboardChips } from '../mentions.js';
+/* The chips a copy of a whole message carries: what the person picked, or what a reply names. */
+export function messageClipboardChips(item, text, lookup) {
+  if (item.kind === 'assistant') {
+    return clipboardChipsOf(text, tokenizeNamedReferences(text, lookup.items, lookup.referenced));
+  }
+  const tokens = referenceTokens([...(item.chats ?? []), ...(item.references ?? [])], lookup.items);
+  return clipboardChipsOf(text, tokenizeChips(text, item.mentions ?? [], item.skills ?? [], tokens));
+}
+/* The chips a copy of a row of the thread carries; only a message has any. */
+export function rowClipboardChips(row, text, lookup) {
+  if (row.kind === 'user' || row.kind === 'assistant') {
+    return messageClipboardChips(row.item, text, lookup);
+  }
+  return clipboardChipsOf(text, []);
+}
+/* What a chip the transcript drew stands for, read back from the attributes `TokenChip` writes. */
+function segmentOf(chip) {
+  const value = chip.getAttribute('data-chip-value');
+  if (value === null) {
+    return null;
+  }
+  switch (chip.getAttribute('data-chip')) {
+    case 'mention':
+      return {
+        kind: 'mention',
+        path: value
+      };
+    case 'skill':
+      return {
+        kind: 'skill',
+        name: value
+      };
+    case 'reference':
+      {
+        const name = chip.getAttribute('data-chip-name');
+        return name === null || name === '' ? null : {
+          kind: 'reference',
+          id: value,
+          name
+        };
+      }
+    default:
+      return null;
+  }
+}
+/* The chips a selection holds whole, beside the text it copies; a chip cut in half is only text. */
+export function selectionChips(selection) {
+  const segments = [];
+  for (let i = 0; i < selection.rangeCount; i++) {
+    const container = selection.getRangeAt(i).commonAncestorContainer;
+    const root = container instanceof Element ? container : container.parentElement;
+    const own = root?.closest('[data-chip]');
+    const candidates = own ? [own] : [...(root?.querySelectorAll('[data-chip]') ?? [])];
+    for (const chip of candidates) {
+      const segment = selection.containsNode(chip, false) ? segmentOf(chip) : null;
+      if (segment !== null) {
+        segments.push(segment);
+      }
+    }
+  }
+  return clipboardChipsOf(selection.toString(), segments);
+}
+/* A copy of a selection in the thread, which carries the chips in it as well when it holds any. */
+export function copySelectionWithChips(event) {
+  const selection = document.getSelection();
+  if (event.defaultPrevented || event.clipboardData === null || selection === null || selection.isCollapsed) {
+    return;
+  }
+  const chips = selectionChips(selection);
+  if (!hasClipboardChips(chips)) {
+    return;
+  }
+  writeClipboardChips(event.clipboardData, chips);
+  event.preventDefault();
+}
+/*
+ * Copies a text and its chips. The asynchronous clipboard writes no type of an app's own that a paste
+ * can read, so the copy goes through a copy event, which only a page with the user's gesture gets.
+ */
+export function copyWithChips(chips) {
+  if (!hasClipboardChips(chips) || typeof document.execCommand !== 'function') {
+    void copyText(chips.text);
+    return;
+  }
+  let written = false;
+  const write = event => {
+    if (event.clipboardData !== null) {
+      writeClipboardChips(event.clipboardData, chips);
+      event.preventDefault();
+      written = true;
+    }
+  };
+  document.addEventListener('copy', write, true);
+  try {
+    document.execCommand('copy');
+  } finally {
+    document.removeEventListener('copy', write, true);
+  }
+  if (!written) {
+    void copyText(chips.text);
+  }
+}

package/dist/chat/ui/chips.d.ts

@@ -1,4 +1,9 @@
 export declare const MENTION_TONE = "bg-accent-soft text-accent shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--accent)_25%,transparent)]";
 export declare const SKILL_TONE = "bg-skill-soft text-skill shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--skill)_25%,transparent)]";
+export declare const REFERENCE_TONE = "bg-text/8 text-text shadow-[inset_0_0_0_1px_var(--border-strong)]";
+export declare const REFERENCE_GONE_TONE = "bg-text/4 text-text-faint shadow-[inset_0_0_0_1px_var(--border)]";
 export declare const CHIP_IN_EDITOR = "box-decoration-clone rounded-md px-1 py-0.5";
+export declare const TOKEN_IN_MESSAGE = "box-decoration-clone rounded-md px-1.5 py-0.5 text-xs font-medium";
+export declare const TOKEN_ICON = "mr-1 inline align-[calc(0.5cap-7px)]!";
+export declare const TOKEN_ICON_IN_EDITOR = "mr-1 inline-block align-[calc(0.5cap-6px)]";
 export declare const CHIP_IN_MESSAGE = "inline-flex h-5 max-w-full items-center gap-1 rounded-md px-1.5 align-[-3px] text-xs/none font-medium";

package/dist/chat/ui/chips.js

@@ -1,11 +1,25 @@
-/* An `@file` or `$skill` token drawn as a pill: the tone says which of the two it is, the shape
+/* An `@file`, `$skill` or `#reference` token drawn as a pill: the tone says which it is, the shape
    says where it is drawn. */
 export const MENTION_TONE = 'bg-accent-soft text-accent shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--accent)_25%,transparent)]';
 /* A skill is the same token shape as a file mention, in its own hue. */
 export const SKILL_TONE = 'bg-skill-soft text-skill shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--skill)_25%,transparent)]';
+/* A `#` to a view, node or chat is neutral, so it never reads as a file or a skill. */
+export const REFERENCE_TONE = 'bg-text/8 text-text shadow-[inset_0_0_0_1px_var(--border-strong)]';
+/* A `#` whose view or node is no longer in the project. */
+export const REFERENCE_GONE_TONE = 'bg-text/4 text-text-faint shadow-[inset_0_0_0_1px_var(--border)]';
 /* The pill in the composer's editor, around the token's own characters: the editor places the caret
    from what it drew, so padding is safe, and a chip that wraps keeps it on every fragment. */
 export const CHIP_IN_EDITOR = 'box-decoration-clone rounded-md px-1 py-0.5';
+/* A picked or named token in a message or a reply, a shade smaller than the text around it. Inline like
+   the editor's pill, so its name sits on the baseline of the sentence, and a selection copies it on the
+   same line as the words around it, where a flex box would put it on lines of its own. */
+export const TOKEN_IN_MESSAGE = 'box-decoration-clone rounded-md px-1.5 py-0.5 text-xs font-medium';
+/* The mark in place of the sigil, a 14px icon. Inline, since the base styles make an svg a block of its
+   own. Its middle goes on the middle of the name's capitals, where a mark reads as centered; the middle
+   of the x-height `Icon` aligns on sits low next to a capital. */
+export const TOKEN_ICON = 'mr-1 inline align-[calc(0.5cap-7px)]!';
+/* The same middle for the 12px mark the composer draws, in a box whose bottom edge is its baseline. */
+export const TOKEN_ICON_IN_EDITOR = 'mr-1 inline-block align-[calc(0.5cap-6px)]';
 /* The same pill in the transcript: a real inline box a shade smaller than the text around it, with
    the icon in place of the sigil. */
 export const CHIP_IN_MESSAGE = 'inline-flex h-5 max-w-full items-center gap-1 rounded-md px-1.5 align-[-3px] text-xs/none font-medium';