@adecore/agents-react 0.37.2 → 0.38.0

package/src/chat/mentions.ts

@@ -23,27 +23,108 @@ export function writeMentionDrag(data: Pick<DataTransfer, 'setData'>, paths: rea
     }
 }
 
+/* Beside the plain text of a copy from a thread or a composer: the chips in it, so a paste makes them chips again. */
+export const CHIPS_CLIPBOARD_TYPE = 'application/x-adecore-chips';
+
+export interface ClipboardChips {
+    text: string;
+    mentions: string[];
+    skills: string[];
+    references: ReferenceToken[];
+}
+
+/* The chips among `segments`, without doubles, for the copy of `text`. */
+export function clipboardChipsOf(text: string, segments: readonly ChipSegment[]): ClipboardChips {
+    const chips: ClipboardChips = { text, mentions: [], skills: [], references: [] };
+    for (const segment of segments) {
+        if (segment.kind === 'mention' && !chips.mentions.includes(segment.path)) {
+            chips.mentions.push(segment.path);
+        } else if (segment.kind === 'skill' && !chips.skills.includes(segment.name)) {
+            chips.skills.push(segment.name);
+        } else if (segment.kind === 'reference' && !chips.references.some((token) => token.id === segment.id)) {
+            chips.references.push({ id: segment.id, name: segment.name });
+        }
+    }
+    return chips;
+}
+
+export function hasClipboardChips(chips: ClipboardChips): boolean {
+    return chips.mentions.length > 0 || chips.skills.length > 0 || chips.references.length > 0;
+}
+
+export function writeClipboardChips(data: Pick<DataTransfer, 'setData'>, chips: ClipboardChips): void {
+    data.setData('text/plain', chips.text);
+    data.setData(CHIPS_CLIPBOARD_TYPE, JSON.stringify(chips));
+}
+
+const lines = (text: string): string => text.replace(/\r\n/g, '\n');
+
+const isStrings = (value: unknown): value is string[] => Array.isArray(value) && value.every((entry) => typeof entry === 'string');
+
+/* The chips of a paste, or null when it has none or its plain text is no longer the text they were copied with. */
+export function readClipboardChips(data: Pick<DataTransfer, 'getData'>): ClipboardChips | null {
+    const raw = data.getData(CHIPS_CLIPBOARD_TYPE);
+    if (raw === '') {
+        return null;
+    }
+    let parsed: unknown;
+    try {
+        parsed = JSON.parse(raw);
+    } catch {
+        return null;
+    }
+    if (typeof parsed !== 'object' || parsed === null) {
+        return null;
+    }
+    const { text, mentions, skills, references } = parsed as Record<string, unknown>;
+    const tokens = Array.isArray(references)
+        ? references.filter(
+              (token): token is ReferenceToken =>
+                  typeof token === 'object' && token !== null && typeof token.id === 'string' && typeof token.name === 'string' && token.name !== ''
+          )
+        : [];
+    if (typeof text !== 'string' || lines(text) !== lines(data.getData('text/plain')) || !isStrings(mentions) || !isStrings(skills)) {
+        return null;
+    }
+    return { text: lines(text), mentions, skills, references: tokens.map(({ id, name }) => ({ id, name })) };
+}
+
 export interface MentionQuery {
     // Index of the sigil in the text.
     start: number;
     query: string;
 }
 
-export type ChipSegment = { kind: 'text'; text: string } | { kind: 'mention'; path: string } | { kind: 'skill'; name: string };
+/* A view, node or chat picked with `#`, under the name the text spells it by, which may hold spaces. */
+export interface ReferenceToken {
+    id: string;
+    name: string;
+}
+
+export type ChipSegment =
+    | { kind: 'text'; text: string }
+    | { kind: 'mention'; path: string }
+    | { kind: 'skill'; name: string }
+    | { kind: 'reference'; id: string; name: string };
 
 function isBoundary(char: string | undefined): boolean {
     return char === undefined || /\s/.test(char);
 }
 
+const TOKEN_END = /[.,;:!?)\]}"'”’]/;
+
 // A path at the end of a sentence still counts, so "open @a.ts." is a mention of a.ts.
 function isTokenEnd(char: string | undefined): boolean {
-    return isBoundary(char) || /[.,;:!?)]/.test(char!);
+    return isBoundary(char) || TOKEN_END.test(char!);
 }
 
+// A path goes on after a dot or a colon (`a.ts`, `C:`), so only the rest ends a file query.
+const PATH_GOES_ON = /[.:]$/;
+
 /*
  * The `<sigil>word` the caret sits in, if any. The sigil has to open a word (start of text or after
- * whitespace) so an email address never opens the picker, and the word may not have been
- * closed with whitespace yet.
+ * whitespace) so an email address never opens the picker, and the word may not have been closed
+ * with whitespace or the punctuation that ends a token (`#Admin?`) yet.
  */
 function findQuery(text: string, caret: number, sigil: string): MentionQuery | null {
     const before = text.slice(0, caret);
@@ -55,9 +136,17 @@ function findQuery(text: string, caret: number, sigil: string): MentionQuery | n
     if (/\s/.test(query) || !isBoundary(text[caret])) {
         return null;
     }
+    if (query !== '' && isTokenEnd(query.at(-1)) && !(sigil === '@' && PATH_GOES_ON.test(query))) {
+        return null;
+    }
     return { start: at, query };
 }
 
+/* The query, unless its sigil opens a token that is already a chip, which the picker has nothing to add to. */
+export function queryOutsideChips(query: MentionQuery | null, chips: readonly ChipRange[]): MentionQuery | null {
+    return query !== null && chips.some((chip) => chip.from === query.start) ? null : query;
+}
+
 export function findMentionQuery(text: string, caret: number): MentionQuery | null {
     return findQuery(text, caret, '@');
 }
@@ -68,6 +157,15 @@ export function findSkillQuery(text: string, caret: number): MentionQuery | null
     return found === null || (found.query !== '' && !/^[A-Za-z]/.test(found.query)) ? null : found;
 }
 
+/*
+ * The `#word` the caret sits in. It opens only once a letter follows the sigil, so a `# ` heading,
+ * `#123` and a bare `#` stay text. A name with a space is found by its first word.
+ */
+export function findReferenceQuery(text: string, caret: number): MentionQuery | null {
+    const found = findQuery(text, caret, '#');
+    return found === null || !/^\p{L}/u.test(found.query) ? null : found;
+}
+
 /* Replaces the `<sigil>query` under the caret with the chosen token and a space, and says where the caret goes. */
 export function insertToken(text: string, query: MentionQuery, sigil: string, value: string): { text: string; caret: number } {
     const end = query.start + 1 + query.query.length;
@@ -75,14 +173,6 @@ export function insertToken(text: string, query: MentionQuery, sigil: string, va
     return { text: `${text.slice(0, query.start)}${token}${text.slice(end)}`, caret: query.start + token.length };
 }
 
-/* Takes the `<sigil>query` under the caret out, for a pick that lands beside the text instead of in it. */
-export function dropQuery(text: string, query: MentionQuery): { text: string; caret: number } {
-    return {
-        text: `${text.slice(0, query.start)}${text.slice(query.start + 1 + query.query.length)}`,
-        caret: query.start
-    };
-}
-
 export function insertMention(text: string, query: MentionQuery, path: string): { text: string; caret: number } {
     return insertToken(text, query, '@', path);
 }
@@ -91,6 +181,10 @@ export function insertSkill(text: string, query: MentionQuery, name: string): {
     return insertToken(text, query, '$', name);
 }
 
+export function insertReference(text: string, query: MentionQuery, name: string): { text: string; caret: number } {
+    return insertToken(text, query, '#', name);
+}
+
 /* What a file search answered, with the query it answered, since the query moves on while the answer is on its way. */
 export interface MentionSearch {
     query: string | null;
@@ -99,19 +193,12 @@ export interface MentionSearch {
 
 export const NO_MENTION_SEARCH: MentionSearch = { query: null, files: [] };
 
-export type MentionPick<T> = { kind: 'chat'; chat: T } | { kind: 'file'; path: string };
-
-/* What Enter or Tab takes from the `@` list at `index`. Files still on screen from an older query are never taken. */
-export function mentionPick<T>(index: number, chats: readonly T[], search: MentionSearch, query: string): MentionPick<T> | null {
-    const chat = chats[index];
-    if (chat !== undefined) {
-        return { kind: 'chat', chat };
-    }
+/* The path Enter or Tab takes from the `@` list at `index`. Files still on screen from an older query are never taken. */
+export function mentionPick(index: number, search: MentionSearch, query: string): string | null {
     if (search.query !== query) {
         return null;
     }
-    const path = search.files[index - chats.length] ?? search.files[0];
-    return path === undefined ? null : { kind: 'file', path };
+    return search.files[index] ?? search.files[0] ?? null;
 }
 
 function findToken(text: string, sigil: string, value: string, from: number): number {
@@ -147,6 +234,14 @@ export function presentSkills(text: string, chosen: string[]): string[] {
     return present(text, '$', chosen);
 }
 
+/* The ids among `ids` whose `#name` still sits in the text as a whole token, in text order and without doubles. */
+export function presentReferences(text: string, ids: readonly string[], tokens: readonly ReferenceToken[]): string[] {
+    const wanted = new Set(ids);
+    return chipRanges(text, [], [], [], tokens)
+        .map((range) => range.value)
+        .filter((id, index, found) => wanted.has(id) && found.indexOf(id) === index);
+}
+
 /* The characters a segment stands for, sigil included; joined, the segments spell the text they were cut from. */
 export function chipText(segment: ChipSegment): string {
     if (segment.kind === 'mention') {
@@ -155,6 +250,9 @@ export function chipText(segment: ChipSegment): string {
     if (segment.kind === 'skill') {
         return `$${segment.name}`;
     }
+    if (segment.kind === 'reference') {
+        return `#${segment.name}`;
+    }
     return segment.text;
 }
 
@@ -175,30 +273,38 @@ export interface TextRange {
     to: number;
 }
 
+/* `value` is the path, the skill's name or, for a reference, its id; the range spans the name. */
 export interface ChipRange extends TextRange {
-    kind: 'mention' | 'skill';
+    kind: 'mention' | 'skill' | 'reference';
     value: string;
 }
 
 /*
- * Where the chosen mentions and skills sit in the text, in text order; longer values win when one
- * prefixes another. A token that overlaps an excluded range (a code span, say) is text.
+ * Where the chosen mentions, skills and references sit in the text, in text order; longer values win
+ * when one prefixes another. A token that overlaps an excluded range (a code span, say) is text.
  */
-export function chipRanges(text: string, mentions: string[], skills: string[] = [], excluded: readonly TextRange[] = []): ChipRange[] {
+export function chipRanges(
+    text: string,
+    mentions: string[],
+    skills: string[] = [],
+    excluded: readonly TextRange[] = [],
+    references: readonly ReferenceToken[] = []
+): ChipRange[] {
     const tokens = [
-        ...[...new Set(mentions)].map((value) => ({ sigil: '@', kind: 'mention' as const, value })),
-        ...[...new Set(skills)].map((value) => ({ sigil: '$', kind: 'skill' as const, value }))
-    ].sort((a, b) => b.value.length - a.value.length);
+        ...[...new Set(mentions)].map((value) => ({ sigil: '@', kind: 'mention' as const, spelled: value, value })),
+        ...[...new Set(skills)].map((value) => ({ sigil: '$', kind: 'skill' as const, spelled: value, value })),
+        ...references.filter((token) => token.name !== '').map((token) => ({ sigil: '#', kind: 'reference' as const, spelled: token.name, value: token.id }))
+    ].sort((a, b) => b.spelled.length - a.spelled.length);
     const allowed = (from: number, to: number): boolean => !excluded.some((range) => from < range.to && to > range.from);
     const ranges: ChipRange[] = [];
     let cursor = 0;
     while (cursor < text.length) {
         let best: ChipRange | null = null;
         for (const token of tokens) {
-            const length = token.value.length + 1;
-            let index = findToken(text, token.sigil, token.value, cursor);
+            const length = token.spelled.length + 1;
+            let index = findToken(text, token.sigil, token.spelled, cursor);
             while (index >= 0 && !allowed(index, index + length)) {
-                index = findToken(text, token.sigil, token.value, index + 1);
+                index = findToken(text, token.sigil, token.spelled, index + 1);
             }
             if (index >= 0 && (best === null || index < best.from)) {
                 best = { from: index, to: index + length, kind: token.kind, value: token.value };
@@ -213,15 +319,75 @@ export function chipRanges(text: string, mentions: string[], skills: string[] =
     return ranges;
 }
 
-/* Splits the text so a renderer can draw the mentions and skills as chips. */
-export function tokenizeChips(text: string, mentions: string[], skills: string[] = []): ChipSegment[] {
+function segmentOf(text: string, range: ChipRange): ChipSegment {
+    if (range.kind === 'mention') {
+        return { kind: 'mention', path: range.value };
+    }
+    if (range.kind === 'skill') {
+        return { kind: 'skill', name: range.value };
+    }
+    return { kind: 'reference', id: range.value, name: text.slice(range.from + 1, range.to) };
+}
+
+/* Splits the text so a renderer can draw the mentions, skills and references as chips. */
+export function tokenizeChips(text: string, mentions: string[], skills: string[] = [], references: readonly ReferenceToken[] = []): ChipSegment[] {
+    return segmentsOf(text, chipRanges(text, mentions, skills, [], references));
+}
+
+// What a `#` may follow in a text nobody typed through the picker: a space, or an opening bracket or quote.
+const REFERENCE_OPENER = /[\s([{"'“‘]/;
+
+/*
+ * Where a text written without the picker, such as a reply, spells `#Name` for a view, node or chat
+ * by exactly its name. The longest name wins, so a name with a space is found whole. A name more
+ * than one of them carries stays text, unless one of those is in `referenced`, which then wins.
+ */
+export function namedReferenceRanges(
+    text: string,
+    items: readonly ReferenceToken[],
+    referenced: readonly string[] = [],
+    excluded: readonly TextRange[] = []
+): ChipRange[] {
+    const byName = new Map<string, string[]>();
+    for (const item of items) {
+        if (item.name !== '') {
+            byName.set(item.name, [...(byName.get(item.name) ?? []), item.id]);
+        }
+    }
+    const names = [...byName.keys()].sort((a, b) => b.length - a.length);
+    const preferred = new Set(referenced);
+    const ranges: ChipRange[] = [];
+    let index = text.indexOf('#');
+    while (index >= 0) {
+        const from = index;
+        const name =
+            from > 0 && !REFERENCE_OPENER.test(text[from - 1]!)
+                ? undefined
+                : names.find((candidate) => text.startsWith(candidate, from + 1) && isTokenEnd(text[from + 1 + candidate.length]));
+        const to = name === undefined ? from + 1 : from + 1 + name.length;
+        const ids = name === undefined ? [] : byName.get(name)!;
+        const id = ids.find((candidate) => preferred.has(candidate)) ?? (ids.length === 1 ? ids[0] : undefined);
+        if (id !== undefined && !excluded.some((range) => from < range.to && to > range.from)) {
+            ranges.push({ from, to, kind: 'reference', value: id });
+        }
+        index = text.indexOf('#', to);
+    }
+    return ranges;
+}
+
+/* `namedReferenceRanges` as segments, for a renderer. */
+export function tokenizeNamedReferences(text: string, items: readonly ReferenceToken[], referenced: readonly string[] = []): ChipSegment[] {
+    return segmentsOf(text, namedReferenceRanges(text, items, referenced));
+}
+
+function segmentsOf(text: string, ranges: readonly ChipRange[]): ChipSegment[] {
     const segments: ChipSegment[] = [];
     let cursor = 0;
-    for (const range of chipRanges(text, mentions, skills)) {
+    for (const range of ranges) {
         if (range.from > cursor) {
             segments.push({ kind: 'text', text: text.slice(cursor, range.from) });
         }
-        segments.push(range.kind === 'mention' ? { kind: 'mention', path: range.value } : { kind: 'skill', name: range.value });
+        segments.push(segmentOf(text, range));
         cursor = range.to;
     }
     if (cursor < text.length) {

package/src/chat/stash.ts

@@ -32,6 +32,8 @@ export interface StashedPrompt {
     /* A quote that knew its reply, kept apart from the text so it can lead back to it in the chat it came from. */
     quote?: StashedQuote;
     createdAt: number;
+    /* Views and nodes of the project picked with `#`; an entry from before this field has none. */
+    references: string[];
 }
 
 export interface StashedQuote {
@@ -88,7 +90,8 @@ export function parseStash(raw: string | null): StashedPrompt[] {
                 chats: strings(entry.chats),
                 attachments: attachments(entry.attachments),
                 ...stashedQuoteField(entry.quote),
-                createdAt: typeof entry.createdAt === 'number' ? entry.createdAt : 0
+                createdAt: typeof entry.createdAt === 'number' ? entry.createdAt : 0,
+                references: strings(entry.references)
             }))
             .slice(0, STASH_LIMIT);
     } catch {
@@ -118,7 +121,8 @@ export function stashedFrom(draft: ChatDraft, id: string, now: number, chatId: s
         skills: [...draft.skills],
         chats: [...draft.chats],
         attachments: draft.attachments.map((attachment) => ({ name: attachment.name, mime: attachment.mime, size: uploadBytes(attachment) })),
-        createdAt: now
+        createdAt: now,
+        references: [...draft.references]
     };
 }
 

package/src/chat/ui/Composer.tsx

@@ -26,7 +26,7 @@ import { ResumeCompactionDock } from './ResumeCompactionDock';
 import { chipDecorations } from './composer/chips';
 import { ComposerControls } from './composer/ComposerControls';
 import { ComposerMenu } from './composer/ComposerMenu';
-import { DraftAttachments, DraftChats, DraftQuote } from './composer/DraftParts';
+import { DraftAttachments, DraftQuote } from './composer/DraftParts';
 import { composerKeyHandler } from './composer/key-handler';
 import { useHintedPlaceholder } from './composer/placeholder';
 import { QueuedMessages } from './composer/QueuedMessages';
@@ -96,7 +96,17 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const notice = useNotice();
     const history = usePromptHistory(chatId, box.setText);
     const menus = useComposerMenus({ chatId, info, capabilities, providerName: provider?.name, draft: box, inputRef });
-    const files = useDraftFiles({ capabilities, providerName: provider?.name, writable, draft: box, inputRef, setNotice: notice.setNotice });
+    const files = useDraftFiles({
+        capabilities,
+        providerName: provider?.name,
+        writable,
+        draft: box,
+        inputRef,
+        setNotice: notice.setNotice,
+        skills: menus.skillNames,
+        referables: menus.referables.chatsOnly ? menus.referables.items.filter((item) => item.kind === 'chat') : menus.referables.items,
+        referenceChips: menus.referenceChips
+    });
     const controls = useChatControls({ chatId, info, notice, onRetarget });
     useEffortStepper({
         chatId,
@@ -154,7 +164,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const pending = usePendingRequests(chatId);
     const compactionOffer = useCompactionOffer(chatId, info, capabilities?.compaction);
     const placeholder = useHintedPlaceholder({ chatId, disabled, readOnly, mentionable: capabilities?.mentions !== false, hasSkills: menus.hasSkills });
-    const editorExtensions = [chipDecorations({ mentions: draft.mentions, skills: draft.skills }), LEAVE_DROPS_TO_THE_CARD];
+    const editorExtensions = [chipDecorations({ mentions: draft.mentions, skills: draft.skills, references: menus.referenceChips }), LEAVE_DROPS_TO_THE_CARD];
     /* The timeline owns the scroller; this is the one bit of it the composer needs to know. */
     const atEnd = useSyncExternalStore(
         subscribeTimelineEnd,
@@ -263,7 +273,6 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                                 onSourceGone={() => notice.setNotice(t('rows.user.quoteGone'), 'info')}
                             />
                         )}
-                        {draft.chats.length > 0 && <DraftChats chats={draft.chats} onRemove={box.removeChat} />}
                         {draft.attachments.length > 0 && <DraftAttachments attachments={draft.attachments} onRemove={box.removeAttachment} />}
                         <ComposerInput
                             ref={inputRef}
@@ -290,6 +299,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                             onComposing={hold.setComposing}
                             onKeyDown={onKeyDown}
                             onPaste={files.onPaste}
+                            onCopy={files.onCopy}
                         />
                         {notice.notice && (
                             <div

package/src/chat/ui/ComposerInput.tsx

@@ -40,6 +40,8 @@ interface ComposerInputProps {
     onKeyDown?(event: KeyboardEvent, view: EditorView): boolean;
     /* Runs before the editor pastes the plain text itself; true means the paste is handled. */
     onPaste?(event: ClipboardEvent, view: EditorView): boolean;
+    /* Runs before the editor copies or cuts the selection itself; true means the event is handled. */
+    onCopy?(event: ClipboardEvent, view: EditorView): boolean;
 }
 
 const NO_EXTENSIONS: Extension = [];
@@ -103,6 +105,8 @@ export function ComposerInput({
                         EditorView.domEventHandlers({
                             keydown: (event, target) => latest.current.handlers.onKeyDown?.(event, target) ?? false,
                             paste: (event, target) => latest.current.handlers.onPaste?.(event, target) ?? false,
+                            copy: (event, target) => latest.current.handlers.onCopy?.(event, target) ?? false,
+                            cut: (event, target) => latest.current.handlers.onCopy?.(event, target) ?? false,
                             compositionstart: () => {
                                 latest.current.handlers.onComposing?.(true);
                                 return false;

package/src/chat/ui/HostMenuItems.tsx

@@ -0,0 +1,11 @@
+import { Icon, Menu } from '@adecore/ui';
+import type { HostMenuAction } from '../../host';
+
+/* The items a host adds to a menu of the chat's, in the order it gave them. */
+export function HostMenuItems({ actions }: { actions: readonly HostMenuAction[] }) {
+    return actions.map((action) => (
+        <Menu.Item key={action.id} disabled={action.disabled} onClick={() => action.run()}>
+            {action.icon !== undefined && <Icon icon={action.icon} size={14} />} {action.label}
+        </Menu.Item>
+    ));
+}

package/src/chat/ui/Markdown.tsx

@@ -1,15 +1,18 @@
-import { createContext, memo, useContext, type ReactNode } from 'react';
+import { createContext, memo, useContext, type ComponentProps, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { Zap } from 'lucide-react';
 import ReactMarkdown, { type Components, type ExtraProps, type Options } from 'react-markdown';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
-import { CHIP_IN_MESSAGE, MENTION_TONE, SKILL_TONE } from './chips';
+import { MENTION_TONE, SKILL_TONE, TOKEN_ICON } from './chips';
 import { CodeBlock } from './CodeBlock';
 import { MermaidBlock } from './MermaidBlock';
 import { CodeStreamingContext } from './code-streaming';
 import { splitMarkdownBlocks } from './markdown-blocks';
-import { rehypeChips, type ChipOptions } from './rehype-chips';
+import { ReferenceChip, TokenChip } from './ReferenceChip';
+import { ReferenceLookupContext } from './reference-lookup';
+import { rehypeChips, rehypeNamedReferences, type ChipOptions, type NamedReferenceOptions } from './rehype-chips';
+import type { ReferenceToken } from '../mentions';
 import { rehypeFadeWords } from './rehype-fade';
 import { remarkHtmlAsText } from './remark-html-as-text';
 import { useChatHost, type ChatHost, type FileRef, type ShellCodeBlockContext } from '../../host';
@@ -264,6 +267,7 @@ function replyHeading(level: 1 | 2 | 3 | 4 | 5 | 6) {
 const replyComponents = {
     ...components,
     code: ReplyCode,
+    span: ChipSpan,
     h1: replyHeading(1),
     h2: replyHeading(2),
     h3: replyHeading(3),
@@ -293,34 +297,47 @@ function ReplyCode({ className, children, node }: { className?: string; children
     return <InlineCode text={text} />;
 }
 
-/* A picked file or skill in a sent message. The glyph stands in for the sigil the text still carries. */
+/* A picked file, skill or reference in a sent message. The glyph stands in for the sigil the text still carries. */
 function Chip({ kind, value }: { kind: string; value: string }) {
+    if (kind === 'reference') {
+        return <ReferenceChip id={value} />;
+    }
     if (kind === 'skill') {
         return (
-            <span className={clsx(CHIP_IN_MESSAGE, SKILL_TONE)}>
-                <Icon icon={Zap} size={14} className="shrink-0 opacity-85" />
-                <span className="truncate">{value}</span>
-            </span>
+            <TokenChip
+                kind="skill"
+                value={value}
+                sigil="$"
+                icon={<Icon icon={Zap} size={14} className={clsx(TOKEN_ICON, 'opacity-85')} />}
+                label={value}
+                tone={SKILL_TONE}
+            />
         );
     }
     return (
         // The path is what the thread's menu opens in the preview from here.
-        <span className={clsx(CHIP_IN_MESSAGE, MENTION_TONE)} data-file-path={value} data-file-directory={/[\\/]$/.test(value)}>
-            <FileIcon path={value} size={14} />
-            <span className="truncate">{value}</span>
-        </span>
+        <TokenChip
+            kind="mention"
+            value={value}
+            sigil="@"
+            icon={<FileIcon path={value} size={14} className={TOKEN_ICON} />}
+            label={value}
+            tone={MENTION_TONE}
+            data-file-path={value}
+            data-file-directory={/[\\/]$/.test(value)}
+        />
     );
 }
 
-const messageComponents = {
-    ...replyComponents,
-    span({ children, 'data-chip': chip, 'data-value': value }: { children?: ReactNode; 'data-chip'?: string; 'data-value'?: string }) {
-        if (chip === undefined || value === undefined) {
-            return <span>{children}</span>;
-        }
-        return <Chip kind={chip} value={value} />;
+type ChipSpanProps = ComponentProps<'span'> & ExtraProps & { 'data-chip'?: string; 'data-value'?: string };
+
+/* A span the chip plugins made is a chip; any other, such as a fading word, stays the span it was. */
+function ChipSpan({ children, node: _node, 'data-chip': chip, 'data-value': value, ...rest }: ChipSpanProps) {
+    if (chip === undefined || value === undefined) {
+        return <span {...rest}>{children}</span>;
     }
-};
+    return <Chip kind={chip} value={value} />;
+}
 
 // Module constants, so a render never hands react-markdown a fresh array and makes it parse again.
 const PLUGINS = [remarkGfm];
@@ -332,12 +349,17 @@ const NO_PLUGINS: typeof FADE_PLUGINS = [];
 
 /* One block of a reply. It renders no element of its own, so prose keeps its first and last margins. */
 const ReplyBlock = memo(function ReplyBlock({ text, fade, open, reply }: { text: string; fade: boolean; open: boolean; reply?: ShellCodeBlockReply }) {
+    const { items, referenced } = useContext(ReferenceLookupContext);
+    // Chips first, so the fade wraps the words around a chip and never cuts a name in two.
+    const named: NamedReferenceOptions = { items, referenced };
+    const rehypePlugins: Options['rehypePlugins'] =
+        items.length === 0 ? (fade ? FADE_PLUGINS : NO_PLUGINS) : [[rehypeNamedReferences, named], ...(fade ? FADE_PLUGINS : [])];
     return (
         // A context rather than a second set of components. A component that changed would mount the
         // code block again the moment its fence closes, and it would lose the lines it already has.
         <CodeStreamingContext.Provider value={open}>
             <ShellCodeBlockReplyContext.Provider value={reply ?? null}>
-                <ReactMarkdown remarkPlugins={REPLY_PLUGINS} rehypePlugins={fade ? FADE_PLUGINS : NO_PLUGINS} components={replyComponents}>
+                <ReactMarkdown remarkPlugins={REPLY_PLUGINS} rehypePlugins={rehypePlugins} components={replyComponents}>
                     {text}
                 </ReactMarkdown>
             </ShellCodeBlockReplyContext.Provider>
@@ -419,13 +441,23 @@ export const ReplyMarkdown = memo(function ReplyMarkdown({
 
 /*
  * A message a person sent. Enter meant a line break, a tag typed without backticks stays the text
- * it was, and the files and skills picked in the composer are chips again.
+ * it was, and the files, skills and references picked in the composer are chips again.
  */
-export const MessageMarkdown = memo(function MessageMarkdown({ text, mentions, skills }: { text: string; mentions?: string[]; skills?: string[] }) {
-    const rehypePlugins: [typeof rehypeChips, ChipOptions][] = [[rehypeChips, { mentions, skills }]];
+export const MessageMarkdown = memo(function MessageMarkdown({
+    text,
+    mentions,
+    skills,
+    references
+}: {
+    text: string;
+    mentions?: string[];
+    skills?: string[];
+    references?: readonly ReferenceToken[];
+}) {
+    const rehypePlugins: [typeof rehypeChips, ChipOptions][] = [[rehypeChips, { mentions, skills, references }]];
     return (
         <div className="chat-markdown prose prose-sm max-w-none text-sm">
-            <ReactMarkdown remarkPlugins={MESSAGE_PLUGINS} rehypePlugins={rehypePlugins} components={messageComponents}>
+            <ReactMarkdown remarkPlugins={MESSAGE_PLUGINS} rehypePlugins={rehypePlugins} components={replyComponents}>
                 {text}
             </ReactMarkdown>
         </div>

package/src/chat/ui/MessageActions.tsx

@@ -9,8 +9,10 @@ import { markdownOf, messageTextOf } from '../logic/timeline-copy';
 import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatRow, useChats } from '../../state/chats';
-import { ButtonGroup, copyText, IconButton, Tooltip } from '@adecore/ui';
+import { ButtonGroup, IconButton, Tooltip } from '@adecore/ui';
 import { formatClock, formatDateTime, useFormatLocale } from '@adecore/ui/format';
+import { copyWithChips, messageClipboardChips } from './chip-clipboard';
+import { useReferenceLookup } from './thread-references';
 import { TIMESTAMP_FORMAT } from './timestamp-format';
 
 const COPIED_MS = 1500;
@@ -40,6 +42,7 @@ export function MessageActions({ chatId, row }: { chatId: string; row: MessageRo
     const bookmarked = bookmarks?.some((candidate) => candidate.itemId === row.id) === true;
     const canFork = turnId !== null && forkRefusal(info, turn) === null;
     const [copied, setCopied] = useState(false);
+    const lookup = useReferenceLookup(chatId);
 
     useEffect(() => {
         if (!copied) {
@@ -55,7 +58,7 @@ export function MessageActions({ chatId, row }: { chatId: string; row: MessageRo
         const current = item?.kind === row.kind ? ({ ...row, item } as MessageRow) : row;
         const text = (plain ? null : markdownOf(current)) ?? messageTextOf(current);
         if (text !== null) {
-            copyText(text);
+            copyWithChips(messageClipboardChips(current.item, text, lookup));
             setCopied(true);
         }
     };