feat(web): numbered markers for draft citations in the conversation

apps/web/src/components/ChatView.tsx

@@ -604,6 +604,10 @@ export default function ChatView(props: ChatViewProps) {
   ) as AssistantCitationRequest | null;
   useSideChatCitationReveal(embedded ? null : routeThreadRef, locationCitation, citationActivation);
   const citationHistory = useCitedHistory(citationRequest);
+  const openDraftCitation = useStableCallback(
+    (key: string, anchor: AssistantCitationSourceAnchor) =>
+      composerRef.current?.openCitation(key, anchor),
+  );
   const { resolvedTheme } = useTheme();
   const composerRuntimeMode = useComposerDraftStore(
     (store) => store.getComposerDraft(composerDraftTarget)?.runtimeMode ?? null,
@@ -3444,6 +3448,14 @@ export default function ChatView(props: ChatViewProps) {
                   citationRequest={citationRequest}
                   citationHistory={citationHistory}
                   onCiteAssistantText={citeAssistantTextStable}
+                  citationDraftTarget={composerDraftTarget}
+                  citationRichTextEnabled={settings.composerRichTextEnabled}
+                  showingCitationDraft={
+                    !activePendingProgress ||
+                    (pendingUserInputs[0] !== undefined &&
+                      heldApprovalRequestIds.has(pendingUserInputs[0].requestId))
+                  }
+                  onOpenDraftCitation={openDraftCitation}
                   onReplyToResponse={replyToResponseStable}
                   {...(activeProject
                     ? { onRunShellCommand: parentPanel?.runShellCommand ?? runShellCommandStable }

apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx

@@ -15,6 +15,8 @@ import {
   type ComposerPromptEditorHandle,
 } from "./ComposerPromptEditorTiptap";
 
+import { AssistantCitationMarkers } from "./chat/AssistantCitationMarkers";
+
 const citation = {
   version: 1 as const,
   environmentId: EnvironmentId.make("environment"),
@@ -31,30 +33,43 @@ const promptBefore = `See ${serializeAssistantCitation(citation)} `;
 function Composer({
   question,
   editorRef,
+  initialPrompt = promptBefore,
+  richTextEnabled = false,
   disabled = false,
   send = "clears",
 }: {
   question: boolean;
+  initialPrompt?: string;
+  richTextEnabled?: boolean;
   editorRef: React.RefObject<ComposerPromptEditorHandle | null>;
   disabled?: boolean;
   send?: "clears" | "blocked" | "refusedLater";
 }) {
-  const [prompt, setPrompt] = useState(promptBefore);
+  const [viewport, setViewport] = useState<HTMLDivElement | null>(null);
+  const [prompt, setPrompt] = useState(initialPrompt);
   const [answer, setAnswer] = useState("");
   return (
     <>
-      <div data-assistant-citation-viewport="">
+      <div ref={setViewport} className="relative" data-assistant-citation-viewport="">
         <p
           data-assistant-citation-source={citation.messageId}
           data-assistant-citation-environment={citation.environmentId}
           data-assistant-citation-thread={citation.threadId}
         >
           hello world
         </p>
+        <AssistantCitationMarkers
+          viewport={viewport}
+          prompt={prompt}
+          richTextEnabled={richTextEnabled}
+          showingDraft={!question}
+          onOpen={(key, anchor) => editorRef.current?.openCitation(key, anchor)}
+        />
       </div>
       <output data-prompt={prompt} data-answer={answer} />
       <ComposerPromptEditor
         editorRef={editorRef}
+        richTextEnabled={richTextEnabled}
         value={question ? answer : prompt}
         cursor={0}
         contextRecords={new Map()}
@@ -99,6 +114,9 @@ it("keeps an unsaved citation comment when a question takes the composer", async
 
   await screen.rerender(<Composer question editorRef={editorRef} />);
   expect(drafts()?.answer).toBe("");
+  await expect
+    .element(page.getByRole("button", { name: "Edit citation 1 comment" }))
+    .not.toBeInTheDocument();
   await screen.rerender(<Composer question={false} editorRef={editorRef} />);
 
   expect(drafts()?.prompt).toBe(
@@ -107,6 +125,62 @@ it("keeps an unsaved citation comment when a question takes the composer", async
   await expect.element(page.getByLabelText("Edit citation comment")).toBeInTheDocument();
 });
 
+it("opens the existing comment at its source from a draft marker", async () => {
+  const editorRef = createRef<ComposerPromptEditorHandle>();
+  await using screen = await render(<Composer question={false} editorRef={editorRef} />);
+  await userEvent.click(screen.getByRole("button", { name: "Edit citation 1 comment" }));
+  await expect.element(page.getByLabelText("Comment on selected text")).toBeVisible();
+  expect(screen.container.querySelector("output")?.dataset.prompt).toBe(promptBefore);
+  await userEvent.keyboard("{Escape}");
+  await screen.rerender(<Composer question={false} editorRef={editorRef} disabled />);
+  await userEvent.click(screen.getByRole("button", { name: "Edit citation 1 comment" }));
+  await expect.element(page.getByLabelText("Comment on selected text")).not.toBeInTheDocument();
+});
+
+it("opens each duplicate marker's own comment and restores marker focus", async () => {
+  const editorRef = createRef<ComposerPromptEditorHandle>();
+  const first = withAssistantCitationComment(citation, "first");
+  const second = withAssistantCitationComment(citation, "second");
+  await using screen = await render(
+    <Composer
+      question={false}
+      editorRef={editorRef}
+      initialPrompt={`${serializeAssistantCitation(first)} ${serializeAssistantCitation(second)}`}
+    />,
+  );
+  const one = screen.getByRole("button", { name: "Edit citation 1 comment" });
+  const two = screen.getByRole("button", { name: "Edit citation 2 comment" });
+  await expect.element(one).toBeVisible();
+  await expect.element(two).toBeVisible();
+  await userEvent.click(one);
+  await expect.element(page.getByLabelText("Comment on selected text")).toHaveValue("first");
+  await userEvent.keyboard("{Escape}");
+  await expect.element(one).toHaveFocus();
+  await userEvent.click(two);
+  await expect.element(page.getByLabelText("Comment on selected text")).toHaveValue("second");
+});
+
+it("matches the editor citation nodes when rich text is toggled", async () => {
+  const editorRef = createRef<ComposerPromptEditorHandle>();
+  const initialPrompt = "```text\n" + serializeAssistantCitation(citation) + "\n```";
+  await using screen = await render(
+    <Composer question={false} editorRef={editorRef} initialPrompt={initialPrompt} />,
+  );
+  const marker = page.getByRole("button", { name: "Edit citation 1 comment" });
+  await expect.element(marker).toBeVisible();
+  await marker.click();
+  await expect.element(page.getByLabelText("Comment on selected text")).toBeVisible();
+  await userEvent.keyboard("{Escape}");
+  await screen.rerender(
+    <Composer
+      question={false}
+      editorRef={editorRef}
+      initialPrompt={initialPrompt}
+      richTextEnabled
+    />,
+  );
+  await expect.element(marker).not.toBeInTheDocument();
+});
 it("clears the sent prompt when an empty citation comment sends it", async () => {
   const editorRef = createRef<ComposerPromptEditorHandle>();
   await using screen = await render(<Composer question={false} editorRef={editorRef} />);

apps/web/src/components/ComposerPromptEditorTiptap.tsx

@@ -1,4 +1,9 @@
 import { useAtomValue } from "@effect/atom-react";
+import { updateCitationHighlight } from "./chat/AssistantCitationMarkers";
+import {
+  composerCitationMarker,
+  draftCitationMarkers,
+} from "./chat/assistantCitationMarkers.logic";
 import { documentChipKindForFileName } from "~/pierre-icons";
 import { isProviderSkillUserInvocable } from "@t3tools/client-runtime/providerSkills";
 import { formatProviderSkillDisplayName } from "@t3tools/shared/inlineSkills";
@@ -51,7 +56,7 @@ import {
   type ReactNode,
   type RefObject,
 } from "react";
-import { EditorContent, useEditor } from "@tiptap/react";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
 
 import {
   clampCollapsedComposerCursor,
@@ -149,6 +154,7 @@ export interface ComposerPromptEditorHandle {
   focusAt: (cursor: number) => void;
   focusAtEnd: () => void;
   readSelectionRange: () => { start: number; end: number };
+  openCitation: (key: string, sourceAnchor: AssistantCitationSourceAnchor) => void;
   captureAttachmentInsertion: () => ComposerAttachmentInsertion | undefined;
   requestCitationComment: (request: ComposerCitationCommentRequest) => void;
   readSnapshot: () => {
@@ -216,6 +222,7 @@ type CitationInsertedSpaces = { before: boolean; after: boolean };
 
 type OpenCitationComment = {
   key: string;
+  markerKey?: string;
   sourceAnchor?: AssistantCitationSourceAnchor;
   removeOnCancel?: CitationInsertedSpaces;
 };
@@ -449,6 +456,13 @@ function ComposerCitationNodeView({ node, editor, getPos }: NodeViewProps) {
   const commentContext = use(ComposerCitationCommentContext);
   const citation = node.attrs.citation as AssistantCitation;
   const citeKey = node.attrs.citeKey as string;
+  const marker = useEditorState({
+    editor,
+    selector: ({ editor }) => composerCitationMarker(editor.state.doc, citeKey),
+  });
+  const separator = marker?.indexOf("|") ?? -1;
+  const markerNumber = marker ? Number(marker.slice(0, separator)) : undefined;
+  const markerKey = marker?.slice(separator + 1);
   const commentTarget =
     commentContext.openComment?.key === citeKey ? commentContext.openComment : null;
 
@@ -494,6 +508,15 @@ function ComposerCitationNodeView({ node, editor, getPos }: NodeViewProps) {
   const onRestoreFocus = () => {
     const sent = sentRef.current;
     sentRef.current = false;
+    if (commentTarget?.markerKey && commentTarget.sourceAnchor) {
+      const marker = commentTarget.sourceAnchor.viewport.querySelector<HTMLElement>(
+        `[data-citation-marker-key="${CSS.escape(commentTarget.markerKey)}"]`,
+      );
+      if (marker && !marker.hidden) {
+        marker.focus({ preventScroll: true });
+        return;
+      }
+    }
     if (!editor.isEditable) return;
     const pos = nodePos();
     const current = pos === null ? null : editor.state.doc.nodeAt(pos);
@@ -512,9 +535,14 @@ function ComposerCitationNodeView({ node, editor, getPos }: NodeViewProps) {
   return (
     <NodeViewWrapper
       as="span"
-      className={CHIP_NODE_SELECTION_CLASS_NAME}
+      className={`${CHIP_NODE_SELECTION_CLASS_NAME} data-[citation-highlight]:ring-2 data-[citation-highlight]:ring-ring`}
       contentEditable={false}
       spellCheck={false}
+      data-citation-link-key={markerKey}
+      onPointerEnter={updateCitationHighlight}
+      onPointerLeave={updateCitationHighlight}
+      onFocus={updateCitationHighlight}
+      onBlur={updateCitationHighlight}
       data-composer-citation-chip="true"
       onKeyDown={(event: ReactKeyboardEvent<HTMLElement>) => {
         if (
@@ -535,6 +563,7 @@ function ComposerCitationNodeView({ node, editor, getPos }: NodeViewProps) {
     >
       <AssistantCitationChip
         citation={citation}
+        citationNumber={markerNumber}
         commentEditor={{
           open: commentTarget !== null,
           sourceAnchor: commentTarget?.sourceAnchor,
@@ -1746,6 +1775,19 @@ function ComposerPromptEditorTiptapInner(
         readSnapshot();
         return selectionRangeRef.current;
       },
+      openCitation: (key, sourceAnchor) => {
+        if (!editor?.isEditable) return;
+        const nodes = findChildren(
+          editor.state.doc,
+          (node) => node.type.name === "composer-citation",
+        );
+        const markers = draftCitationMarkers({
+          type: "doc",
+          content: nodes.map(({ node }) => node.toJSON()),
+        });
+        const node = nodes[markers.findIndex((marker) => marker.key === key)]?.node;
+        if (node) setOpenCitation({ key: node.attrs.citeKey, markerKey: key, sourceAnchor });
+      },
       captureAttachmentInsertion: () =>
         editor ? captureComposerAttachmentInsertion(editor) : undefined,
       requestCitationComment: (request) => {

apps/web/src/components/chat/AssistantCitationChip.tsx

@@ -25,6 +25,7 @@ import {
 import { cn } from "~/lib/utils";
 import { useQuietThreadShell } from "~/state/entities";
 import { ContextChip, ContextChipAction, ContextChipLabel } from "../ContextChip";
+import { Badge } from "../ui/badge";
 import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import { AssistantCitationCommentEditor } from "./AssistantCitationCommentEditor";
 import { resolveAssistantCitationCommentDismissal } from "./assistantCitationCommentDismissal";
@@ -178,9 +179,11 @@ export function ResponseReplyCard({
 /** The citation chip in the composer, with its comment editor. */
 export function AssistantCitationChip({
   citation,
+  citationNumber,
   commentEditor,
 }: {
   citation: AssistantCitation;
+  citationNumber?: number | undefined;
   commentEditor?: {
     open: boolean;
     sourceAnchor?: AssistantCitationSourceAnchor | undefined;
@@ -271,6 +274,7 @@ export function AssistantCitationChip({
       data-assistant-citation-chip="true"
       data-markdown-copy={serializeAssistantCitation(citation)}
     >
+      {citationNumber !== undefined ? <Badge>{citationNumber}</Badge> : null}
       {composerSourceLink}
       {commentEditor ? (
         <Popover