@adecore/agents-react 0.37.2 → 0.37.3

package/dist/chat/ui/Timeline.js

@@ -457,6 +457,8 @@ export function Timeline({
   });
   const [loadingEarlier, setLoadingEarlier] = useState(false);
   const loadingEarlierRef = useRef(false);
+  const anchorRef = useRef(null);
+  const headRef = useRef(undefined);
   const loadEarlier = useCallback(() => {
     if (cursor === null || loadingEarlierRef.current) {
       return;
@@ -559,7 +561,7 @@ export function Timeline({
   const [, settleLayout] = useReducer(count => count + 1, 0);
   // Changing this callback invalidates every cached measurement, including on a scroll.
   const getItemKey = useCallback(index => rows[index].id, [rows]);
-  // Nothing here builds with the React Compiler, so its memoization rule has nothing to break.
+  // Follow the browser's actual end below. Virtual end anchoring drifts when growth still fits without scrolling.
   // oxlint-disable-next-line react/incompatible-library
   const virtualizer = useVirtualizer({
     count: loadingHistory ? 0 : rows.length,
@@ -567,7 +569,6 @@ export function Timeline({
     estimateSize: () => ESTIMATED_ROW_PX,
     getItemKey,
     overscan: 8,
-    anchorTo: 'end',
     // Include the end before the first pin, so its actual heights are known before revealing it.
     rangeExtractor: range => {
       const indexes = defaultRangeExtractor(range);
@@ -617,10 +618,32 @@ export function Timeline({
       viewport: element_2.clientHeight
     };
   }, [rows.length, totalSize, composerHeight, frame.height]);
+  // Prepending history moves rows; keep the reader on the same row at the same height.
+  useLayoutEffect(() => {
+    const element_3 = scrollRef.current;
+    const head = order?.[0];
+    const moved = head !== headRef.current;
+    headRef.current = head;
+    if (element_3 === null) {
+      return;
+    }
+    const anchor = anchorRef.current;
+    const index_2 = moved && anchor !== null && !followRef.current ? rows.findIndex(row_8 => row_8.id === anchor.id) : -1;
+    if (anchor !== null && index_2 !== -1) {
+      virtualizer.getTotalSize();
+      element_3.scrollTop = virtualizer.measurementsCache[index_2].start - anchor.offset;
+      return;
+    }
+    const row_9 = virtualizer.getVirtualItemForOffset(element_3.scrollTop);
+    anchorRef.current = row_9 === undefined ? null : {
+      id: String(row_9.key),
+      offset: row_9.start - element_3.scrollTop
+    };
+  });
   // Close to the top, the page before goes in; again after each page that left too little above the reader.
   useEffect(() => {
-    const element_3 = scrollRef.current;
-    if (element_3 !== null && wantsEarlier(element_3)) {
+    const element_4 = scrollRef.current;
+    if (element_4 !== null && wantsEarlier(element_4)) {
       loadEarlier();
     }
   }, [rows, loadEarlier, frame.height]);
@@ -634,8 +657,8 @@ export function Timeline({
   const measurements = virtualizer.measurementsCache;
   const starts = {
     length: ticks.length,
-    at: index_2 => {
-      const tick = ticks.at(index_2);
+    at: index_3 => {
+      const tick = ticks.at(index_3);
       return tick === undefined ? undefined : measurements[tick.rowIndex]?.start ?? tick.rowIndex * ESTIMATED_ROW_PX;
     }
   };
@@ -662,7 +685,7 @@ export function Timeline({
     starts,
     inView
   };
-  const followStrip = element_4 => {
+  const followStrip = element_5 => {
     const {
       starts: current_0,
       inView: shown
@@ -672,7 +695,7 @@ export function Timeline({
     }
     const next = messagesInView({
       starts: current_0,
-      scrollTop: element_4.scrollTop,
+      scrollTop: element_5.scrollTop,
       visibleHeight: visibleHeightRef.current
     });
     if (next?.first !== shown.first || next?.last !== shown.last) {
@@ -697,11 +720,11 @@ export function Timeline({
     openGroup: groups.add,
     openSubagent: subagents.add,
     // A row already on screen stays put; the find scrolls to the match itself once it is drawn.
-    scrollToRow: index_3 => {
+    scrollToRow: index_4 => {
       const top_0 = scrollRef.current?.scrollTop ?? 0;
       const bottom = top_0 + visibleHeightRef.current;
-      if (!virtualizer.getVirtualItems().some(virtualRow_0 => virtualRow_0.index === index_3 && virtualRow_0.end > top_0 && virtualRow_0.start < bottom)) {
-        virtualizer.scrollToIndex(index_3, {
+      if (!virtualizer.getVirtualItems().some(virtualRow_0 => virtualRow_0.index === index_4 && virtualRow_0.end > top_0 && virtualRow_0.start < bottom)) {
+        virtualizer.scrollToIndex(index_4, {
           align: 'center'
         });
       }
@@ -719,8 +742,8 @@ export function Timeline({
   }, [searching, loadEarlier]);
   const found = useMemo(() => searching ? ticksWithHits(ticks, chatFind.hitRows) : [], [searching, ticks, chatFind.hitRows]);
   const foundCurrent = chatFind.currentRow === null ? null : tickOfRow(ticks, chatFind.currentRow);
-  const jumpTo = index_4 => {
-    const tick_0 = ticks[index_4];
+  const jumpTo = index_5 => {
+    const tick_0 = ticks[index_5];
     if (!tick_0) {
       return;
     }
@@ -763,10 +786,10 @@ export function Timeline({
       }
       return;
     }
-    const index_5 = rows.findIndex(row_8 => row_8.id === seeking.itemId);
-    if (index_5 !== -1) {
+    const index_6 = rows.findIndex(row_10 => row_10.id === seeking.itemId);
+    if (index_6 !== -1) {
       setSeeking(null);
-      showRowAtTop(virtualizer, followRef, index_5);
+      showRowAtTop(virtualizer, followRef, index_6);
       if (seeking.options?.flash) {
         useTimelineFlash.getState().flash(seeking.key, seeking.itemId, false);
       }
@@ -837,9 +860,9 @@ export function Timeline({
       turnId: turnId_0,
       target: target_0
     } = revealing;
-    const changes = target_0 === 'changes' ? rows.findIndex(row_9 => row_9.kind === 'changed-files' && row_9.turnId === turnId_0) : -1;
+    const changes = target_0 === 'changes' ? rows.findIndex(row_11 => row_11.kind === 'changed-files' && row_11.turnId === turnId_0) : -1;
     const opening = order?.map(id_0 => items?.[id_0]).find(item_0 => item_0?.kind === 'user' && item_0.turnId === turnId_0);
-    const found_0 = changes !== -1 ? changes : rows.findIndex(row_10 => row_10.id === opening?.id || row_10.id === `start-${turnId_0}` || row_10.id === `fold-${turnId_0}`);
+    const found_0 = changes !== -1 ? changes : rows.findIndex(row_12 => row_12.id === opening?.id || row_12.id === `start-${turnId_0}` || row_12.id === `fold-${turnId_0}`);
     if (found_0 !== -1) {
       setRevealing(null);
       showRowAtTop(virtualizer, followRef, found_0);
@@ -860,7 +883,7 @@ export function Timeline({
   // The strip is memoized and draws on every scroll, so it gets one callback for its life.
   const jumpRef = useRef(jumpTo);
   jumpRef.current = jumpTo;
-  const pick = useCallback(index_6 => jumpRef.current(index_6), []);
+  const pick = useCallback(index_7 => jumpRef.current(index_7), []);
   // Read when the card asks rather than on every render, so the strip's memo holds while the thread streams.
   const cardChat = useMemo(() => ({
     chatId,
@@ -868,8 +891,8 @@ export function Timeline({
       if (fork === null) {
         return false;
       }
-      const row_11 = useChats.getState().byKey[keyOf(chatId)];
-      return forkRefusal(row_11?.info ?? null, row_11?.structure[turnId_2]) === null;
+      const row_13 = useChats.getState().byKey[keyOf(chatId)];
+      return forkRefusal(row_13?.info ?? null, row_13?.structure[turnId_2]) === null;
     },
     fork: turnId_3 => fork?.(chatId, turnId_3)
   }), [keyOf, chatId, fork]);
@@ -878,11 +901,11 @@ export function Timeline({
     if (!onMainAgent) {
       return false;
     }
-    const index_7 = stepMessage(starts, i => ticks[i].kind === 'person', scrollTop, direction);
-    if (index_7 === null) {
+    const index_8 = stepMessage(starts, i => ticks[i].kind === 'person', scrollTop, direction);
+    if (index_8 === null) {
       return false;
     }
-    jumpTo(index_7);
+    jumpTo(index_8);
     return true;
   };
   useEffect(() => registerMessageStepper(keyOf(chatId), direction_0 => stepRef.current(direction_0)), [keyOf, chatId]);
@@ -993,22 +1016,22 @@ export function Timeline({
                     children: /*#__PURE__*/_jsx(FindRevealContext.Provider, {
                       value: chatFind.reveal,
                       children: virtualRows.map(virtualRow_1 => {
-                        const row_12 = rows[virtualRow_1.index];
+                        const row_14 = rows[virtualRow_1.index];
                         return /*#__PURE__*/_jsx(ThreadRow, {
-                          row: row_12,
+                          row: row_14,
                           previous: virtualRow_1.index > 0 ? rows[virtualRow_1.index - 1] : null,
                           index: virtualRow_1.index,
                           top: virtualRow_1.start,
                           measure: virtualizer.measureElement,
                           chatId: chatId,
-                          flashNonce: flash !== null && flashedRow === row_12.id ? flash.nonce : null,
-                          bookmark: marks.get(row_12.id) ?? null,
+                          flashNonce: flash !== null && flashedRow === row_14.id ? flash.nonce : null,
+                          bookmark: marks.get(row_14.id) ?? null,
                           toggleGroup: groups.toggle,
                           toggleTurn: turns.toggle,
                           toggleSubagent: subagents.toggle,
                           openSubagent: openSubagent,
                           openConversation: openConversation
-                        }, row_12.id);
+                        }, row_14.id);
                       })
                     })
                   })

package/dist/chat/ui/TimelineMenu.js

@@ -9,12 +9,14 @@ import { markdownOf, messageTextOf } from '../logic/timeline-copy.js';
 import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatRow } from '../../state/chats.js';
+import { copyWithChips, rowClipboardChips } from './chip-clipboard.js';
 import { useFileLinkCwd, useFileLinkScopeId, useOpenFileLink } from './file-links.js';
+import { useReferenceLookup } from './thread-references.js';
 import { ContextMenu, copyText, DisabledReason, EDIT_SHORTCUTS, Icon, Kbd, selectAllWithin } from '@adecore/ui';
 /* The menu behind a right-click in a thread, mostly for copying: a whole message, a code block or an answer's markdown. */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function TimelineMenuPopup(t0) {
-  const $ = _c(70);
+  const $ = _c(72);
   const {
     target,
     thread,
@@ -26,10 +28,11 @@ export function TimelineMenuPopup(t0) {
   const {
     t
   } = useTranslation("agent-chat");
+  const row = target.row;
   let t3;
-  if ($[0] !== target.row) {
-    t3 = target.row === null ? null : messageTextOf(target.row);
-    $[0] = target.row;
+  if ($[0] !== row) {
+    t3 = row === null ? null : messageTextOf(row);
+    $[0] = row;
     $[1] = t3;
   } else {
     t3 = $[1];
@@ -47,7 +50,7 @@ export function TimelineMenuPopup(t0) {
   const turnId = t4;
   let t5;
   if ($[5] !== turnId) {
-    t5 = row => turnId === null ? null : forkRefusal(row?.info ?? null, row?.structure[turnId]);
+    t5 = row_0 => turnId === null ? null : forkRefusal(row_0?.info ?? null, row_0?.structure[turnId]);
     $[5] = turnId;
     $[6] = t5;
   } else {
@@ -66,6 +69,7 @@ export function TimelineMenuPopup(t0) {
   const markable = chatId !== null && (target.row?.kind === "user" || target.row?.kind === "assistant") ? target.row.id : null;
   const cwd = useFileLinkCwd();
   const scopeId = useFileLinkScopeId();
+  const lookup = useReferenceLookup(chatId ?? "");
   const {
     fork,
     fileLinks
@@ -150,22 +154,24 @@ export function TimelineMenuPopup(t0) {
     t13 = $[25];
   }
   let t14;
-  if ($[26] !== message || $[27] !== t) {
-    t14 = message !== null && /*#__PURE__*/_jsxs(ContextMenu.Item, {
-      onClick: () => copyText(message),
+  if ($[26] !== lookup || $[27] !== message || $[28] !== row || $[29] !== t) {
+    t14 = row !== null && message !== null && /*#__PURE__*/_jsxs(ContextMenu.Item, {
+      onClick: () => copyWithChips(rowClipboardChips(row, message, lookup)),
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: MessageSquare,
         size: 14
       }), " ", t("timeline.menu.copyMessage")]
     });
-    $[26] = message;
-    $[27] = t;
-    $[28] = t14;
+    $[26] = lookup;
+    $[27] = message;
+    $[28] = row;
+    $[29] = t;
+    $[30] = t14;
   } else {
-    t14 = $[28];
+    t14 = $[30];
   }
   let t15;
-  if ($[29] !== t || $[30] !== target.code) {
+  if ($[31] !== t || $[32] !== target.code) {
     t15 = target.code !== null && /*#__PURE__*/_jsxs(ContextMenu.Item, {
       onClick: () => copyText(target.code ?? ""),
       children: [/*#__PURE__*/_jsx(Icon, {
@@ -173,14 +179,14 @@ export function TimelineMenuPopup(t0) {
         size: 14
       }), " ", t("timeline.menu.copyCode")]
     });
-    $[29] = t;
-    $[30] = target.code;
-    $[31] = t15;
+    $[31] = t;
+    $[32] = target.code;
+    $[33] = t15;
   } else {
-    t15 = $[31];
+    t15 = $[33];
   }
   let t16;
-  if ($[32] !== markdown || $[33] !== t) {
+  if ($[34] !== markdown || $[35] !== t) {
     t16 = markdown !== null && /*#__PURE__*/_jsxs(ContextMenu.Item, {
       onClick: () => copyText(markdown),
       children: [/*#__PURE__*/_jsx(Icon, {
@@ -188,14 +194,14 @@ export function TimelineMenuPopup(t0) {
         size: 14
       }), " ", t("timeline.menu.copyMarkdown")]
     });
-    $[32] = markdown;
-    $[33] = t;
-    $[34] = t16;
+    $[34] = markdown;
+    $[35] = t;
+    $[36] = t16;
   } else {
-    t16 = $[34];
+    t16 = $[36];
   }
   let t17;
-  if ($[35] !== chatId || $[36] !== fork || $[37] !== forkBlocked || $[38] !== t || $[39] !== turnId) {
+  if ($[37] !== chatId || $[38] !== fork || $[39] !== forkBlocked || $[40] !== t || $[41] !== turnId) {
     t17 = chatId !== null && turnId !== null && fork !== null && /*#__PURE__*/_jsx(DisabledReason, {
       reason: forkBlocked,
       children: /*#__PURE__*/_jsxs(ContextMenu.Item, {
@@ -207,74 +213,74 @@ export function TimelineMenuPopup(t0) {
         }), " ", t("timeline.menu.forkFromHere")]
       })
     });
-    $[35] = chatId;
-    $[36] = fork;
-    $[37] = forkBlocked;
-    $[38] = t;
-    $[39] = turnId;
-    $[40] = t17;
+    $[37] = chatId;
+    $[38] = fork;
+    $[39] = forkBlocked;
+    $[40] = t;
+    $[41] = turnId;
+    $[42] = t17;
   } else {
-    t17 = $[40];
+    t17 = $[42];
   }
   let t18;
-  if ($[41] !== chatId || $[42] !== markable) {
+  if ($[43] !== chatId || $[44] !== markable) {
     t18 = chatId !== null && markable !== null && /*#__PURE__*/_jsx(BookmarkMenuItems, {
       chatId: chatId,
       itemId: markable
     });
-    $[41] = chatId;
-    $[42] = markable;
-    $[43] = t18;
+    $[43] = chatId;
+    $[44] = markable;
+    $[45] = t18;
   } else {
-    t18 = $[43];
+    t18 = $[45];
   }
   let t19;
-  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
     t19 = /*#__PURE__*/_jsx(ContextMenu.Separator, {});
-    $[44] = t19;
+    $[46] = t19;
   } else {
-    t19 = $[44];
+    t19 = $[46];
   }
   let t20;
-  if ($[45] !== thread.current) {
+  if ($[47] !== thread.current) {
     t20 = () => selectAllWithin(thread.current);
-    $[45] = thread.current;
-    $[46] = t20;
+    $[47] = thread.current;
+    $[48] = t20;
   } else {
-    t20 = $[46];
+    t20 = $[48];
   }
   let t21;
-  if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
     t21 = /*#__PURE__*/_jsx(Icon, {
       icon: Scan,
       size: 14
     });
-    $[47] = t21;
+    $[49] = t21;
   } else {
-    t21 = $[47];
+    t21 = $[49];
   }
   let t22;
-  if ($[48] !== t) {
+  if ($[50] !== t) {
     t22 = t("common.action.selectAll");
-    $[48] = t;
-    $[49] = t22;
+    $[50] = t;
+    $[51] = t22;
   } else {
-    t22 = $[49];
+    t22 = $[51];
   }
   let t23;
-  if ($[50] !== t20 || $[51] !== t22) {
+  if ($[52] !== t20 || $[53] !== t22) {
     t23 = /*#__PURE__*/_jsxs(ContextMenu.Item, {
       onClick: t20,
       children: [t21, " ", t22]
     });
-    $[50] = t20;
-    $[51] = t22;
-    $[52] = t23;
+    $[52] = t20;
+    $[53] = t22;
+    $[54] = t23;
   } else {
-    t23 = $[52];
+    t23 = $[54];
   }
   let t24;
-  if ($[53] !== fileLinks || $[54] !== openInPreview || $[55] !== t || $[56] !== target.path) {
+  if ($[55] !== fileLinks || $[56] !== openInPreview || $[57] !== t || $[58] !== target.path) {
     t24 = target.path !== null && fileLinks !== null && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(ContextMenu.Separator, {}), /*#__PURE__*/_jsxs(ContextMenu.Item, {
         onClick: openInPreview,
@@ -284,41 +290,41 @@ export function TimelineMenuPopup(t0) {
         }), " ", t("timeline.menu.openInPreview")]
       })]
     });
-    $[53] = fileLinks;
-    $[54] = openInPreview;
-    $[55] = t;
-    $[56] = target.path;
-    $[57] = t24;
+    $[55] = fileLinks;
+    $[56] = openInPreview;
+    $[57] = t;
+    $[58] = target.path;
+    $[59] = t24;
   } else {
-    t24 = $[57];
+    t24 = $[59];
   }
   let t25;
-  if ($[58] !== column) {
+  if ($[60] !== column) {
     t25 = column && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(ContextMenu.Separator, {}), /*#__PURE__*/_jsx(ReadingWidthSubmenu, {})]
     });
-    $[58] = column;
-    $[59] = t25;
+    $[60] = column;
+    $[61] = t25;
   } else {
-    t25 = $[59];
+    t25 = $[61];
   }
   let t26;
-  if ($[60] !== t13 || $[61] !== t14 || $[62] !== t15 || $[63] !== t16 || $[64] !== t17 || $[65] !== t18 || $[66] !== t23 || $[67] !== t24 || $[68] !== t25) {
+  if ($[62] !== t13 || $[63] !== t14 || $[64] !== t15 || $[65] !== t16 || $[66] !== t17 || $[67] !== t18 || $[68] !== t23 || $[69] !== t24 || $[70] !== t25) {
     t26 = /*#__PURE__*/_jsxs(ContextMenu.Popup, {
       children: [t13, t14, t15, t16, t17, t18, t19, t23, t24, t25]
     });
-    $[60] = t13;
-    $[61] = t14;
-    $[62] = t15;
-    $[63] = t16;
-    $[64] = t17;
-    $[65] = t18;
-    $[66] = t23;
-    $[67] = t24;
-    $[68] = t25;
-    $[69] = t26;
-  } else {
-    t26 = $[69];
+    $[62] = t13;
+    $[63] = t14;
+    $[64] = t15;
+    $[65] = t16;
+    $[66] = t17;
+    $[67] = t18;
+    $[68] = t23;
+    $[69] = t24;
+    $[70] = t25;
+    $[71] = t26;
+  } else {
+    t26 = $[71];
   }
   return t26;
 }

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';