From 88b54f5aec45e89a249f35fa7566c881df288877 Mon Sep 17 00:00:00 2001
From: Elliot Drel <elliotdrel@gmail.com>
Date: Sat, 7 Nov 2026 10:34:35 -0500
Subject: [PATCH 1/9] fix(web): open citation comments from composer chips

---
 ...ditorTiptap.citationDraft.browser.test.tsx | 20 ++++++++-
 .../components/ComposerPromptEditorTiptap.tsx | 11 ++++-
 apps/web/src/components/ContextChip.tsx       |  3 +-
 .../components/chat/AssistantCitationChip.tsx | 41 +++++++++++--------
 docs/user/composer.md                         |  4 +-
 5 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
index a1a69a7968ee9..4d61aaaee31da 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
@@ -95,5 +95,23 @@ it("keeps an unsaved citation comment when a question takes the composer", async
   expect(drafts()?.prompt).toBe(
     `See ${serializeAssistantCitation(withAssistantCitationComment(citation, "check this"))} `,
   );
-  await expect.element(page.getByLabelText("Edit citation comment")).toBeInTheDocument();
+  await expect
+    .element(page.getByRole("link", { name: "View cited assistant text: check this" }))
+    .toBeInTheDocument();
 });
+
+it.each(["click", "Enter", " "])(
+  "opens the citation comment editor with %s on the chip",
+  async (activation) => {
+    const editorRef = createRef<ComposerPromptEditorHandle>();
+    await using screen = await render(<Composer question={false} editorRef={editorRef} />);
+    const chip = screen.getByRole("link", { name: "View cited assistant text: hello" });
+    if (activation === "click") {
+      await chip.click();
+    } else {
+      screen.container.querySelector<HTMLElement>("[data-citation-comment-trigger]")?.focus();
+      await userEvent.keyboard(activation === "Enter" ? "{Enter}" : " ");
+    }
+    await expect.element(page.getByLabelText("Comment on selected text")).toBeVisible();
+  },
+);
diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.tsx
index 8c4698210b1d5..a6d543c7d7bcc 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.tsx
@@ -121,7 +121,10 @@ import {
   ComposerContextReferenceChip,
   ComposerContextRecordsContext,
 } from "./composerContextPresentation";
-import type { AssistantCitationSourceAnchor } from "~/lib/assistantTextSelection";
+import {
+  findAssistantCitationSourceAnchor,
+  type AssistantCitationSourceAnchor,
+} from "~/lib/assistantTextSelection";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 import { ComposerCodeBlockNodeView } from "./chat/ComposerCodeBlockNodeView";
 import { resolveAssistantCitationCommentDismissal } from "./chat/assistantCitationCommentDismissal";
@@ -470,7 +473,11 @@ function ComposerCitationNodeView({ node, editor, getPos }: NodeViewProps) {
         composer
         commentEditor={{
           open: commentTarget !== null,
-          sourceAnchor: commentTarget?.sourceAnchor,
+          sourceAnchor: commentTarget
+            ? (commentTarget.sourceAnchor ??
+              findAssistantCitationSourceAnchor(document, citation) ??
+              undefined)
+            : undefined,
           onOpenChange: (open) => {
             if (open && !editor.isEditable) return;
             commentContext.onOpenChange(citeKey, open);
diff --git a/apps/web/src/components/ContextChip.tsx b/apps/web/src/components/ContextChip.tsx
index a536f28ccfb12..6405963175b6a 100644
--- a/apps/web/src/components/ContextChip.tsx
+++ b/apps/web/src/components/ContextChip.tsx
@@ -37,6 +37,7 @@ const contextChipVariants = cva(
       },
       shape: {
         inline: "",
+        pill: "mx-[0.15em] gap-1 rounded-md bg-(--context-chip-accent)/12 px-1.5 py-0.5",
         bubble: "w-64 gap-2 rounded-2xl bg-message px-3 py-2 text-sm text-message-foreground",
       },
       state: {
@@ -53,7 +54,7 @@ type ContextChipKind = NonNullable<VariantProps<typeof contextChipVariants>["kin
 interface ContextChipProps extends useRender.ComponentProps<"span"> {
   kind?: ContextChipKind;
   state?: "unresolved" | "invalid";
-  shape?: "inline" | "bubble";
+  shape?: "inline" | "pill" | "bubble";
 }
 
 function ContextChip({ className, kind, state, shape, render, ...props }: ContextChipProps) {
diff --git a/apps/web/src/components/chat/AssistantCitationChip.tsx b/apps/web/src/components/chat/AssistantCitationChip.tsx
index cf62358069701..ba12595348b11 100644
--- a/apps/web/src/components/chat/AssistantCitationChip.tsx
+++ b/apps/web/src/components/chat/AssistantCitationChip.tsx
@@ -4,7 +4,7 @@ import {
   serializeAssistantCitation,
 } from "@t3tools/shared/assistantCitations";
 import { Link, useNavigate } from "@tanstack/react-router";
-import { ArrowUpRightIcon, PencilIcon, QuoteIcon } from "lucide-react";
+import { ArrowUpRightIcon, QuoteIcon } from "lucide-react";
 import {
   useEffect,
   useEffectEvent,
@@ -21,10 +21,10 @@ import {
   assistantCitationNavigation,
 } from "../../lib/assistantCitationNavigation";
 import { cn } from "~/lib/utils";
-import { ContextChip, ContextChipAction, ContextChipLabel } from "../ContextChip";
+import { ContextChip, ContextChipLabel } from "../ContextChip";
 import { ContextChipPopover } from "../contextChipParts";
 import { Button } from "../ui/button";
-import { Popover, PopoverClose, PopoverPopup, PopoverTrigger } from "../ui/popover";
+import { Popover, PopoverClose, PopoverPopup } from "../ui/popover";
 import { getVirtualizedScrollFadeClassName } from "../ui/scroll-area";
 import { AssistantCitationCommentEditor } from "./AssistantCitationCommentEditor";
 import { resolveAssistantCitationCommentDismissal } from "./assistantCitationCommentDismissal";
@@ -52,6 +52,7 @@ export function AssistantCitationChip({
   };
 }) {
   const navigate = useNavigate();
+  const chipRef = useRef<HTMLSpanElement>(null);
   const commentInputRef = useRef<HTMLTextAreaElement>(null);
   const commentPopupRef = useRef<HTMLDivElement>(null);
   const draftCommentRef = useRef<string | null>(null);
@@ -123,19 +124,31 @@ export function AssistantCitationChip({
       }
       event.preventDefault();
       void navigate(assistantCitationNavigation(citation));
+      if (composer) commentEditor?.onOpenChange(true);
     },
   };
   const composerSourceLink = (
-    <Link
-      {...sourceLinkProps}
-      className="inline-flex min-w-0 items-center gap-[0.2em] self-baseline text-inherit no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-current rounded-sm"
+    <ContextChip
+      kind="citation"
+      shape="pill"
+      ref={chipRef}
+      aria-haspopup={commentEditor ? "dialog" : undefined}
+      aria-expanded={commentEditor ? commentOpen : undefined}
+      render={<Link {...sourceLinkProps} />}
+      data-citation-comment-trigger={commentEditor ? "true" : undefined}
+      onKeyDown={(event) => {
+        if (event.key !== " " || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+          return;
+        event.preventDefault();
+        event.currentTarget.click();
+      }}
       aria-label={`View cited assistant text: ${label}`}
     >
       <QuoteIcon aria-hidden="true" />
       <ContextChipLabel className="max-w-[16em]" dir={textDirection(label)}>
         {label}
       </ContextChipLabel>
-    </Link>
+    </ContextChip>
   );
   if (!composer) {
     return (
@@ -159,8 +172,7 @@ export function AssistantCitationChip({
     );
   }
   return (
-    <ContextChip
-      kind="citation"
+    <span
       contentEditable={false}
       data-assistant-citation-chip="true"
       data-markdown-copy={serializeAssistantCitation(citation)}
@@ -177,13 +189,6 @@ export function AssistantCitationChip({
             commentEditor.onOpenChange(open);
           }}
         >
-          <PopoverTrigger
-            aria-label={citation.comment ? "Edit citation comment" : "Add comment to citation"}
-            data-citation-comment-trigger="true"
-            render={<ContextChipAction />}
-          >
-            <PencilIcon aria-hidden="true" />
-          </PopoverTrigger>
           {commentEditor.open ? (
             <PopoverPopup
               // The editor stays mounted while its voice setup dialog replaces the popover.
@@ -191,7 +196,7 @@ export function AssistantCitationChip({
               {...composerFloatingLayerProps}
               side={activeSourceAnchor ? "bottom" : "top"}
               align="end"
-              anchor={popupAnchor}
+              anchor={popupAnchor ?? chipRef}
               initialFocus={() => {
                 commentInputRef.current?.focus({ preventScroll: true });
                 return false;
@@ -251,7 +256,7 @@ export function AssistantCitationChip({
           ) : null}
         </Popover>
       ) : null}
-    </ContextChip>
+    </span>
   );
 }
 
diff --git a/docs/user/composer.md b/docs/user/composer.md
index 22b499ebe7b0c..70573ac31a4ef 100644
--- a/docs/user/composer.md
+++ b/docs/user/composer.md
@@ -133,8 +133,8 @@ around it.
 Select the quote in a draft or sent message to return to its source. If the source
 is unavailable or has changed, the saved quote remains readable.
 
-The chip shows your comment when it has one, or a short quote preview otherwise. Use the pencil
-button to add or change the comment. To remove the citation, place the caret beside its chip and
+The chip shows your comment when it has one, or a short quote preview otherwise. Click the chip to return to its source and add or change the comment.
+You can also focus the chip and press Enter or Space. To remove the citation, place the caret beside its chip and
 delete it like other inline context. Copying, reloading, and restoring a
 [stashed prompt](#prompt-stash) keep each comment
 with its quote, and sending tells the agent which words were quoted and which comment you wrote.

From ee0e3b5d52a9cfc551f96a3746d42e71b978e945 Mon Sep 17 00:00:00 2001
From: Elliot Drel <elliotdrel@gmail.com>
Date: Sat, 7 Nov 2026 11:07:39 -0500
Subject: [PATCH 2/9] fix(web): reanchor citation comments when sources mount

---
 ...ditorTiptap.citationDraft.browser.test.tsx | 59 +++++++++++++++----
 .../components/chat/AssistantCitationChip.tsx | 53 +++++++++++++----
 2 files changed, 88 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
index 4d61aaaee31da..1ebf3fd7b735e 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
@@ -4,7 +4,7 @@ import {
   withAssistantCitationComment,
 } from "@t3tools/shared/assistantCitations";
 import { createRef, useState } from "react";
-import { expect, it } from "vite-plus/test";
+import { expect, it, vi } from "vite-plus/test";
 
 import { page, userEvent } from "vite-plus/test/browser";
 
@@ -31,23 +31,29 @@ const promptBefore = `See ${serializeAssistantCitation(citation)} `;
 function Composer({
   question,
   editorRef,
+  sourceVisible = true,
+  onCommandKeyDown,
 }: {
   question: boolean;
+  sourceVisible?: boolean;
+  onCommandKeyDown?: (key: string, event: KeyboardEvent) => boolean;
   editorRef: React.RefObject<ComposerPromptEditorHandle | null>;
 }) {
   const [prompt, setPrompt] = useState(promptBefore);
   const [answer, setAnswer] = useState("");
   return (
     <>
-      <div 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>
-      </div>
+      {sourceVisible ? (
+        <div 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>
+        </div>
+      ) : null}
       <output data-prompt={prompt} data-answer={answer} />
       <ComposerPromptEditor
         editorRef={editorRef}
@@ -61,6 +67,7 @@ function Composer({
         onCitationDraftSave={(replacedValue, savedValue) => {
           if (replacedValue === prompt) setPrompt(savedValue);
         }}
+        {...(onCommandKeyDown ? { onCommandKeyDown } : {})}
         onPaste={() => {}}
       />
     </>
@@ -104,7 +111,10 @@ it.each(["click", "Enter", " "])(
   "opens the citation comment editor with %s on the chip",
   async (activation) => {
     const editorRef = createRef<ComposerPromptEditorHandle>();
-    await using screen = await render(<Composer question={false} editorRef={editorRef} />);
+    const onCommandKeyDown = vi.fn(() => true);
+    await using screen = await render(
+      <Composer question={false} editorRef={editorRef} onCommandKeyDown={onCommandKeyDown} />,
+    );
     const chip = screen.getByRole("link", { name: "View cited assistant text: hello" });
     if (activation === "click") {
       await chip.click();
@@ -113,5 +123,32 @@ it.each(["click", "Enter", " "])(
       await userEvent.keyboard(activation === "Enter" ? "{Enter}" : " ");
     }
     await expect.element(page.getByLabelText("Comment on selected text")).toBeVisible();
+    expect(onCommandKeyDown).not.toHaveBeenCalled();
+    expect(screen.container.querySelector("output")?.dataset.prompt).toBe(promptBefore);
   },
 );
+
+it("reanchors the comment when the cited source mounts after activation", async () => {
+  const editorRef = createRef<ComposerPromptEditorHandle>();
+  await using screen = await render(
+    <Composer question={false} editorRef={editorRef} sourceVisible={false} />,
+  );
+  await screen.getByRole("link", { name: "View cited assistant text: hello" }).click();
+  await expect.element(page.getByLabelText("Comment on selected text")).toBeVisible();
+  const viewport = document.createElement("div");
+  viewport.dataset.assistantCitationViewport = "";
+  const source = document.createElement("p");
+  source.dataset.assistantCitationSource = citation.messageId;
+  source.dataset.assistantCitationEnvironment = citation.environmentId;
+  source.dataset.assistantCitationThread = citation.threadId;
+  source.textContent = "hello world";
+  viewport.append(source);
+  await act(() => {
+    screen.container.append(viewport);
+  });
+  await vi.waitFor(() => {
+    const highlight = CSS.highlights.get("t3-assistant-citation-comment");
+    expect(highlight?.size).toBe(1);
+    expect(highlight && [...highlight][0]?.startContainer.parentElement).toBe(source);
+  });
+});
diff --git a/apps/web/src/components/chat/AssistantCitationChip.tsx b/apps/web/src/components/chat/AssistantCitationChip.tsx
index ba12595348b11..12b7c3870235c 100644
--- a/apps/web/src/components/chat/AssistantCitationChip.tsx
+++ b/apps/web/src/components/chat/AssistantCitationChip.tsx
@@ -60,7 +60,14 @@ export function AssistantCitationChip({
   const [unavailableSourceAnchor, setUnavailableSourceAnchor] =
     useState<AssistantCitationSourceAnchor | null>(null);
   const commentOpen = commentEditor?.open ?? false;
-  const sourceAnchor = commentEditor?.sourceAnchor;
+  const [resolvedSource, setResolvedSource] = useState<{
+    citation: AssistantCitation;
+    anchor: AssistantCitationSourceAnchor;
+  } | null>(null);
+  if (!commentOpen && resolvedSource !== null) setResolvedSource(null);
+  const sourceAnchor =
+    commentEditor?.sourceAnchor ??
+    (resolvedSource?.citation === citation ? resolvedSource.anchor : undefined);
   const activeSourceAnchor = sourceAnchor === unavailableSourceAnchor ? undefined : sourceAnchor;
   // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- drops the uncommitted comment draft held in a ref once the parent closes the comment editor
   useEffect(() => {
@@ -83,17 +90,30 @@ export function AssistantCitationChip({
       setUnavailableSourceAnchor(sourceAnchor);
     }
   });
-  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- observes the cited DOM source while the comment editor is open and reacts when it disappears
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- waits for the navigated source to mount, then observes its lifetime while editing
   useEffect(() => {
-    if (!commentOpen || sourceAnchor === unavailableSourceAnchor) return;
-    const anchor = sourceAnchor ?? findAssistantCitationSourceAnchor(document, citation);
-    if (!anchor) return;
-    return observeAssistantCitationCommentSource({
-      anchor,
-      citation,
-      onUnavailable: onSourceUnavailable,
-    });
-  }, [citation, commentOpen, sourceAnchor, unavailableSourceAnchor]);
+    if (!commentOpen) return;
+    let stopObservingSource: (() => void) | undefined;
+    const observer = new MutationObserver(resolveSource);
+    function resolveSource() {
+      const anchor =
+        commentEditor?.sourceAnchor ?? findAssistantCitationSourceAnchor(document, citation);
+      if (!anchor || anchor === unavailableSourceAnchor) return;
+      observer.disconnect();
+      setResolvedSource({ citation, anchor });
+      stopObservingSource = observeAssistantCitationCommentSource({
+        anchor,
+        citation,
+        onUnavailable: onSourceUnavailable,
+      });
+    }
+    observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+    resolveSource();
+    return () => {
+      observer.disconnect();
+      stopObservingSource?.();
+    };
+  }, [citation, commentOpen, commentEditor?.sourceAnchor, unavailableSourceAnchor]);
   const popupAnchor = activeSourceAnchor
     ? {
         contextElement: activeSourceAnchor.source,
@@ -136,10 +156,17 @@ export function AssistantCitationChip({
       aria-expanded={commentEditor ? commentOpen : undefined}
       render={<Link {...sourceLinkProps} />}
       data-citation-comment-trigger={commentEditor ? "true" : undefined}
-      onKeyDown={(event) => {
-        if (event.key !== " " || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+      onKeyDownCapture={(event) => {
+        if (
+          (event.key !== " " && event.key !== "Enter") ||
+          event.metaKey ||
+          event.ctrlKey ||
+          event.shiftKey ||
+          event.altKey
+        )
           return;
         event.preventDefault();
+        event.stopPropagation();
         event.currentTarget.click();
       }}
       aria-label={`View cited assistant text: ${label}`}

From fe9f291e416fea761efaeaf4164c1c98180abf27 Mon Sep 17 00:00:00 2001
From: Elliot Drel <elliotdrel@gmail.com>
Date: Sat, 7 Nov 2026 11:33:18 -0500
Subject: [PATCH 3/9] fix(web): make citation chips consistent popover triggers

---
 ...ditorTiptap.citationDraft.browser.test.tsx | 28 ++++++++++++++++++
 .../components/ComposerPromptEditorTiptap.tsx | 16 ++++------
 .../components/chat/AssistantCitationChip.tsx | 29 +++++++++++++++----
 3 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
index 1ebf3fd7b735e..014f44c4bf54b 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
@@ -115,6 +115,11 @@ it.each(["click", "Enter", " "])(
     await using screen = await render(
       <Composer question={false} editorRef={editorRef} onCommandKeyDown={onCommandKeyDown} />,
     );
+    const textbox = screen.getByRole("textbox");
+    await textbox.click();
+    await userEvent.keyboard("{Enter}");
+    expect(onCommandKeyDown).toHaveBeenCalledWith("Enter", expect.any(KeyboardEvent), false);
+    onCommandKeyDown.mockClear();
     const chip = screen.getByRole("link", { name: "View cited assistant text: hello" });
     if (activation === "click") {
       await chip.click();
@@ -123,6 +128,29 @@ it.each(["click", "Enter", " "])(
       await userEvent.keyboard(activation === "Enter" ? "{Enter}" : " ");
     }
     await expect.element(page.getByLabelText("Comment on selected text")).toBeVisible();
+    expect(chip.element().getAttribute("aria-controls")).toBe(
+      page.getByRole("dialog").element().id,
+    );
+    await act(() => {
+      chip.element().dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+      chip.element().click();
+    });
+    await expect.element(page.getByLabelText("Comment on selected text")).not.toBeVisible();
+    for (const init of [
+      { ctrlKey: true },
+      { metaKey: true },
+      { shiftKey: true },
+      { altKey: true },
+      { button: 1 },
+    ]) {
+      await act(() => {
+        const event = new MouseEvent("click", { bubbles: true, cancelable: true, ...init });
+        // Keep the browser on the test page while exercising the link's modifier handling.
+        chip.element().addEventListener("click", (event) => event.preventDefault(), { once: true });
+        chip.element().dispatchEvent(event);
+      });
+      await expect.element(page.getByLabelText("Comment on selected text")).not.toBeVisible();
+    }
     expect(onCommandKeyDown).not.toHaveBeenCalled();
     expect(screen.container.querySelector("output")?.dataset.prompt).toBe(promptBefore);
   },
diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.tsx
index a6d543c7d7bcc..a6238ee317bd7 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.tsx
@@ -121,10 +121,7 @@ import {
   ComposerContextReferenceChip,
   ComposerContextRecordsContext,
 } from "./composerContextPresentation";
-import {
-  findAssistantCitationSourceAnchor,
-  type AssistantCitationSourceAnchor,
-} from "~/lib/assistantTextSelection";
+import { type AssistantCitationSourceAnchor } from "~/lib/assistantTextSelection";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 import { ComposerCodeBlockNodeView } from "./chat/ComposerCodeBlockNodeView";
 import { resolveAssistantCitationCommentDismissal } from "./chat/assistantCitationCommentDismissal";
@@ -447,7 +444,10 @@ function ComposerCitationNodeView({ node, editor, getPos }: NodeViewProps) {
   return (
     <NodeViewWrapper
       as="span"
-      className={CHIP_NODE_SELECTION_CLASS_NAME}
+      className={cn(
+        CHIP_NODE_SELECTION_CLASS_NAME,
+        "data-[composer-chip-selected]:after:rounded-md",
+      )}
       contentEditable={false}
       spellCheck={false}
       data-composer-citation-chip="true"
@@ -473,11 +473,7 @@ function ComposerCitationNodeView({ node, editor, getPos }: NodeViewProps) {
         composer
         commentEditor={{
           open: commentTarget !== null,
-          sourceAnchor: commentTarget
-            ? (commentTarget.sourceAnchor ??
-              findAssistantCitationSourceAnchor(document, citation) ??
-              undefined)
-            : undefined,
+          sourceAnchor: commentTarget?.sourceAnchor,
           onOpenChange: (open) => {
             if (open && !editor.isEditable) return;
             commentContext.onOpenChange(citeKey, open);
diff --git a/apps/web/src/components/chat/AssistantCitationChip.tsx b/apps/web/src/components/chat/AssistantCitationChip.tsx
index 12b7c3870235c..41849ecab7997 100644
--- a/apps/web/src/components/chat/AssistantCitationChip.tsx
+++ b/apps/web/src/components/chat/AssistantCitationChip.tsx
@@ -24,7 +24,7 @@ import { cn } from "~/lib/utils";
 import { ContextChip, ContextChipLabel } from "../ContextChip";
 import { ContextChipPopover } from "../contextChipParts";
 import { Button } from "../ui/button";
-import { Popover, PopoverClose, PopoverPopup } from "../ui/popover";
+import { Popover, PopoverClose, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import { getVirtualizedScrollFadeClassName } from "../ui/scroll-area";
 import { AssistantCitationCommentEditor } from "./AssistantCitationCommentEditor";
 import { resolveAssistantCitationCommentDismissal } from "./assistantCitationCommentDismissal";
@@ -144,7 +144,6 @@ export function AssistantCitationChip({
       }
       event.preventDefault();
       void navigate(assistantCitationNavigation(citation));
-      if (composer) commentEditor?.onOpenChange(true);
     },
   };
   const composerSourceLink = (
@@ -152,8 +151,6 @@ export function AssistantCitationChip({
       kind="citation"
       shape="pill"
       ref={chipRef}
-      aria-haspopup={commentEditor ? "dialog" : undefined}
-      aria-expanded={commentEditor ? commentOpen : undefined}
       render={<Link {...sourceLinkProps} />}
       data-citation-comment-trigger={commentEditor ? "true" : undefined}
       onKeyDownCapture={(event) => {
@@ -204,7 +201,6 @@ export function AssistantCitationChip({
       data-assistant-citation-chip="true"
       data-markdown-copy={serializeAssistantCitation(citation)}
     >
-      {composerSourceLink}
       {commentEditor ? (
         <Popover
           open={commentEditor.open && !voiceSetupOpen}
@@ -216,6 +212,25 @@ export function AssistantCitationChip({
             commentEditor.onOpenChange(open);
           }}
         >
+          <PopoverTrigger
+            nativeButton={false}
+            role="link"
+            render={composerSourceLink}
+            onKeyUp={(event) => {
+              if (event.key === " ") event.preventBaseUIHandler();
+            }}
+            onClick={(event) => {
+              if (
+                event.button !== 0 ||
+                event.metaKey ||
+                event.ctrlKey ||
+                event.shiftKey ||
+                event.altKey
+              ) {
+                event.preventBaseUIHandler();
+              }
+            }}
+          />
           {commentEditor.open ? (
             <PopoverPopup
               // The editor stays mounted while its voice setup dialog replaces the popover.
@@ -282,7 +297,9 @@ export function AssistantCitationChip({
             </PopoverPopup>
           ) : null}
         </Popover>
-      ) : null}
+      ) : (
+        composerSourceLink
+      )}
     </span>
   );
 }

From 32ac46b64a15ff2d94a950828c6a535f1dfec8bf Mon Sep 17 00:00:00 2001
From: Elliot Drel <elliotdrel@gmail.com>
Date: Sat, 7 Nov 2026 11:47:13 -0500
Subject: [PATCH 4/9] fix(web): keep source citation editor open on repeat
 activation

---
 ...ditorTiptap.citationDraft.browser.test.tsx | 36 +++++++++----------
 .../components/chat/AssistantCitationChip.tsx |  4 +++
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
index 014f44c4bf54b..5fb3bcd9f9d38 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
@@ -121,6 +121,19 @@ it.each(["click", "Enter", " "])(
     expect(onCommandKeyDown).toHaveBeenCalledWith("Enter", expect.any(KeyboardEvent), false);
     onCommandKeyDown.mockClear();
     const chip = screen.getByRole("link", { name: "View cited assistant text: hello" });
+    for (const init of [
+      { ctrlKey: true },
+      { metaKey: true },
+      { shiftKey: true },
+      { altKey: true },
+      { button: 1 },
+    ]) {
+      const event = new MouseEvent("click", { bubbles: true, cancelable: true, ...init });
+      // Keep the browser on the test page while exercising the link's modifier handling.
+      chip.element().addEventListener("click", (event) => event.preventDefault(), { once: true });
+      chip.element().dispatchEvent(event);
+      await expect.element(page.getByLabelText("Comment on selected text")).not.toBeInTheDocument();
+    }
     if (activation === "click") {
       await chip.click();
     } else {
@@ -131,26 +144,9 @@ it.each(["click", "Enter", " "])(
     expect(chip.element().getAttribute("aria-controls")).toBe(
       page.getByRole("dialog").element().id,
     );
-    await act(() => {
-      chip.element().dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
-      chip.element().click();
-    });
-    await expect.element(page.getByLabelText("Comment on selected text")).not.toBeVisible();
-    for (const init of [
-      { ctrlKey: true },
-      { metaKey: true },
-      { shiftKey: true },
-      { altKey: true },
-      { button: 1 },
-    ]) {
-      await act(() => {
-        const event = new MouseEvent("click", { bubbles: true, cancelable: true, ...init });
-        // Keep the browser on the test page while exercising the link's modifier handling.
-        chip.element().addEventListener("click", (event) => event.preventDefault(), { once: true });
-        chip.element().dispatchEvent(event);
-      });
-      await expect.element(page.getByLabelText("Comment on selected text")).not.toBeVisible();
-    }
+    chip.element().dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+    chip.element().dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+    await expect.element(page.getByLabelText("Comment on selected text")).toBeVisible();
     expect(onCommandKeyDown).not.toHaveBeenCalled();
     expect(screen.container.querySelector("output")?.dataset.prompt).toBe(promptBefore);
   },
diff --git a/apps/web/src/components/chat/AssistantCitationChip.tsx b/apps/web/src/components/chat/AssistantCitationChip.tsx
index 41849ecab7997..4dc345566322b 100644
--- a/apps/web/src/components/chat/AssistantCitationChip.tsx
+++ b/apps/web/src/components/chat/AssistantCitationChip.tsx
@@ -205,6 +205,10 @@ export function AssistantCitationChip({
         <Popover
           open={commentEditor.open && !voiceSetupOpen}
           onOpenChange={(open, eventDetails) => {
+            if (!open && eventDetails.reason === "trigger-press") {
+              eventDetails.cancel();
+              return;
+            }
             if (!open && !settleDraftOnClose(eventDetails.reason)) {
               eventDetails.cancel();
               return;

From 0ae431e0d7448b1529073a3d41caf38759dae3b2 Mon Sep 17 00:00:00 2001
From: Elliot Drel <elliotdrel@gmail.com>
Date: Sat, 7 Nov 2026 12:24:33 -0500
Subject: [PATCH 5/9] fix(web): stop modified enter on citation chips

---
 .../ComposerPromptEditorTiptap.citationDraft.browser.test.tsx  | 3 +++
 apps/web/src/components/chat/AssistantCitationChip.tsx         | 1 +
 2 files changed, 4 insertions(+)

diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
index 5fb3bcd9f9d38..077b5a4177f74 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
@@ -121,6 +121,9 @@ it.each(["click", "Enter", " "])(
     expect(onCommandKeyDown).toHaveBeenCalledWith("Enter", expect.any(KeyboardEvent), false);
     onCommandKeyDown.mockClear();
     const chip = screen.getByRole("link", { name: "View cited assistant text: hello" });
+    chip.element().focus();
+    await userEvent.keyboard("{Control>}{Enter}{/Control}");
+    expect(onCommandKeyDown).not.toHaveBeenCalled();
     for (const init of [
       { ctrlKey: true },
       { metaKey: true },
diff --git a/apps/web/src/components/chat/AssistantCitationChip.tsx b/apps/web/src/components/chat/AssistantCitationChip.tsx
index 4dc345566322b..596a0dbc4e166 100644
--- a/apps/web/src/components/chat/AssistantCitationChip.tsx
+++ b/apps/web/src/components/chat/AssistantCitationChip.tsx
@@ -154,6 +154,7 @@ export function AssistantCitationChip({
       render={<Link {...sourceLinkProps} />}
       data-citation-comment-trigger={commentEditor ? "true" : undefined}
       onKeyDownCapture={(event) => {
+        if (event.key === "Enter") event.stopPropagation();
         if (
           (event.key !== " " && event.key !== "Enter") ||
           event.metaKey ||

From 4c9706c525598cbef9289490a1981299add861db Mon Sep 17 00:00:00 2001
From: Elliot Drel <elliotdrel@gmail.com>
Date: Sat, 7 Nov 2026 14:50:28 -0500
Subject: [PATCH 6/9] fix(web): edit cross-thread citation comments without
 leaving the draft

Co-Authored-By: GPT-6.1 Sol via T3 Code
---
 ...ditorTiptap.citationDraft.browser.test.tsx | 42 +++++++++++++++++++
 .../components/chat/AssistantCitationChip.tsx | 10 ++++-
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
index 077b5a4177f74..a4e03948e1bb7 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
@@ -8,6 +8,16 @@ import { expect, it, vi } from "vite-plus/test";
 
 import { page, userEvent } from "vite-plus/test/browser";
 
+const navigation = vi.hoisted(() => ({
+  navigate: vi.fn(),
+  params: { environmentId: "environment", threadId: "thread" },
+}));
+vi.mock(import("@tanstack/react-router"), async (importOriginal) => ({
+  ...(await importOriginal()),
+  useNavigate: () => navigation.navigate,
+  useParams: (() => navigation.params) as typeof import("@tanstack/react-router").useParams,
+}));
+
 import { findAssistantCitationSourceAnchor } from "~/lib/assistantTextSelection";
 import { act, render } from "../../test/render";
 import {
@@ -179,3 +189,35 @@ it("reanchors the comment when the cited source mounts after activation", async
     expect(highlight && [...highlight][0]?.startContainer.parentElement).toBe(source);
   });
 });
+
+it.each([
+  ["environment", "other-thread", "click"],
+  ["environment", "other-thread", "Enter"],
+  ["environment", "other-thread", " "],
+  ["other-environment", "thread", "click"],
+  ["other-environment", "thread", "Enter"],
+  ["other-environment", "thread", " "],
+])(
+  "edits a citation from draft %s/%s with %s without navigating",
+  async (environmentId, threadId, activation) => {
+    navigation.navigate.mockClear();
+    navigation.params = { environmentId, threadId };
+    try {
+      const editorRef = createRef<ComposerPromptEditorHandle>();
+      await using screen = await render(
+        <Composer question={false} editorRef={editorRef} sourceVisible={false} />,
+      );
+      const chip = screen.getByRole("link", { name: "View cited assistant text: hello" });
+      if (activation === "click") {
+        await chip.click();
+      } else {
+        chip.element().focus();
+        await userEvent.keyboard(activation === "Enter" ? "{Enter}" : " ");
+      }
+      await expect.element(page.getByLabelText("Comment on selected text")).toBeVisible();
+      expect(navigation.navigate).not.toHaveBeenCalled();
+    } finally {
+      navigation.params = { environmentId: "environment", threadId: "thread" };
+    }
+  },
+);
diff --git a/apps/web/src/components/chat/AssistantCitationChip.tsx b/apps/web/src/components/chat/AssistantCitationChip.tsx
index 596a0dbc4e166..95c243bb78993 100644
--- a/apps/web/src/components/chat/AssistantCitationChip.tsx
+++ b/apps/web/src/components/chat/AssistantCitationChip.tsx
@@ -3,7 +3,7 @@ import {
   assistantCitationLabel,
   serializeAssistantCitation,
 } from "@t3tools/shared/assistantCitations";
-import { Link, useNavigate } from "@tanstack/react-router";
+import { Link, useNavigate, useParams } from "@tanstack/react-router";
 import { ArrowUpRightIcon, QuoteIcon } from "lucide-react";
 import {
   useEffect,
@@ -52,6 +52,7 @@ export function AssistantCitationChip({
   };
 }) {
   const navigate = useNavigate();
+  const { environmentId, threadId } = useParams({ strict: false });
   const chipRef = useRef<HTMLSpanElement>(null);
   const commentInputRef = useRef<HTMLTextAreaElement>(null);
   const commentPopupRef = useRef<HTMLDivElement>(null);
@@ -143,6 +144,13 @@ export function AssistantCitationChip({
         return;
       }
       event.preventDefault();
+      // Leaving the draft's route unmounts its comment editor.
+      if (
+        composer &&
+        commentEditor &&
+        (citation.environmentId !== environmentId || citation.threadId !== threadId)
+      )
+        return;
       void navigate(assistantCitationNavigation(citation));
     },
   };

From eb5b34fc8106aceaa76fd31f98d7506990ea9e3a Mon Sep 17 00:00:00 2001
From: Elliot Drel <elliotdrel@gmail.com>
Date: Sat, 7 Nov 2026 15:14:25 -0500
Subject: [PATCH 7/9] test(web): late-mounted citation source anchors the
 comment popup

Co-Authored-By: GPT-6.1 Terra via T3 Code
---
 ...rPromptEditorTiptap.citationDraft.browser.test.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
index a4e03948e1bb7..2e57337746f1e 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
@@ -175,6 +175,9 @@ it("reanchors the comment when the cited source mounts after activation", async
   const viewport = document.createElement("div");
   viewport.dataset.assistantCitationViewport = "";
   const source = document.createElement("p");
+  source.style.position = "fixed";
+  source.style.left = "500px";
+  source.style.top = "300px";
   source.dataset.assistantCitationSource = citation.messageId;
   source.dataset.assistantCitationEnvironment = citation.environmentId;
   source.dataset.assistantCitationThread = citation.threadId;
@@ -187,6 +190,14 @@ it("reanchors the comment when the cited source mounts after activation", async
     const highlight = CSS.highlights.get("t3-assistant-citation-comment");
     expect(highlight?.size).toBe(1);
     expect(highlight && [...highlight][0]?.startContainer.parentElement).toBe(source);
+    const popup = page.getByRole("dialog").element().getBoundingClientRect();
+    const sourceRect = source.getBoundingClientRect();
+    const chipRect = screen
+      .getByRole("link", { name: "View cited assistant text: hello" })
+      .element()
+      .getBoundingClientRect();
+    const distance = (rect: DOMRect) => Math.hypot(popup.left - rect.left, popup.top - rect.bottom);
+    expect(distance(sourceRect)).toBeLessThan(distance(chipRect));
   });
 });
 

From a921843642277f575ccaaf2df77dcbf5824cbe6f Mon Sep 17 00:00:00 2001
From: Elliot Drel <elliotdrel@gmail.com>
Date: Sat, 7 Nov 2026 15:36:54 -0500
Subject: [PATCH 8/9] test(web): flush modified chip clicks before asserting
 the editor stays closed

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../ComposerPromptEditorTiptap.citationDraft.browser.test.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
index 2e57337746f1e..5e33c196629b6 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
@@ -144,7 +144,9 @@ it.each(["click", "Enter", " "])(
       const event = new MouseEvent("click", { bubbles: true, cancelable: true, ...init });
       // Keep the browser on the test page while exercising the link's modifier handling.
       chip.element().addEventListener("click", (event) => event.preventDefault(), { once: true });
-      chip.element().dispatchEvent(event);
+      await act(() => {
+        chip.element().dispatchEvent(event);
+      });
       await expect.element(page.getByLabelText("Comment on selected text")).not.toBeInTheDocument();
     }
     if (activation === "click") {

From 0e3c586bcf247e5d464de4410a71445446f5aa77 Mon Sep 17 00:00:00 2001
From: Elliot Drel <elliotdrel@gmail.com>
Date: Wed, 11 Nov 2026 15:30:07 -0500
Subject: [PATCH 9/9] fix(web): use composer scope for side-chat citation
 activation

---
 ...ditorTiptap.citationDraft.browser.test.tsx | 28 ++++++++++++++++++-
 .../components/chat/AssistantCitationChip.tsx |  8 ++++--
 apps/web/src/components/chat/ChatComposer.tsx |  1 +
 .../src/components/composerContextActions.ts  |  3 +-
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
index 544ee009e2bd1..cd406d0e5b8b6 100644
--- a/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
+++ b/apps/web/src/components/ComposerPromptEditorTiptap.citationDraft.browser.test.tsx
@@ -1,9 +1,10 @@
+import { scopeThreadRef } from "@t3tools/client-runtime/environment";
 import { EnvironmentId, MessageId, ThreadId } from "@t3tools/contracts";
 import {
   serializeAssistantCitation,
   withAssistantCitationComment,
 } from "@t3tools/shared/assistantCitations";
-import { createRef, useState } from "react";
+import { createRef, use, useState } from "react";
 import { expect, it, vi } from "vite-plus/test";
 
 import { page, userEvent } from "vite-plus/test/browser";
@@ -18,6 +19,7 @@ vi.mock(import("@tanstack/react-router"), async (importOriginal) => ({
   useParams: (() => navigation.params) as typeof import("@tanstack/react-router").useParams,
 }));
 
+import { ComposerContextActionsContext } from "./composerContextActions";
 import { findAssistantCitationSourceAnchor } from "~/lib/assistantTextSelection";
 import { act, render } from "../../test/render";
 import {
@@ -296,3 +298,27 @@ it.each(["blocked", "refusedLater"] as const)(
       .toHaveAttribute("data-prompt", `See ${serializeAssistantCitation(citation)}x `);
   },
 );
+
+it("reveals a side-chat citation using the composer scope on its parent route", async () => {
+  navigation.navigate.mockClear();
+  navigation.params = { environmentId: "environment", threadId: "parent-thread" };
+  const editorRef = createRef<ComposerPromptEditorHandle>();
+  function SideChatComposer() {
+    const actions = use(ComposerContextActionsContext);
+    return (
+      <ComposerContextActionsContext
+        value={{ ...actions, threadRef: scopeThreadRef(citation.environmentId, citation.threadId) }}
+      >
+        <Composer question={false} editorRef={editorRef} sourceVisible={false} />
+      </ComposerContextActionsContext>
+    );
+  }
+  try {
+    await using screen = await render(<SideChatComposer />);
+    await screen.getByRole("link", { name: "View cited assistant text: hello" }).click();
+    await expect.element(page.getByLabelText("Comment on selected text")).toBeVisible();
+    expect(navigation.navigate).toHaveBeenCalledOnce();
+  } finally {
+    navigation.params = { environmentId: "environment", threadId: "thread" };
+  }
+});
diff --git a/apps/web/src/components/chat/AssistantCitationChip.tsx b/apps/web/src/components/chat/AssistantCitationChip.tsx
index b92739ce600f5..1566663fa58d9 100644
--- a/apps/web/src/components/chat/AssistantCitationChip.tsx
+++ b/apps/web/src/components/chat/AssistantCitationChip.tsx
@@ -7,6 +7,7 @@ import {
 import { Link, useNavigate, useParams } from "@tanstack/react-router";
 import { QuoteIcon } from "lucide-react";
 import {
+  use,
   useEffect,
   useEffectEvent,
   useRef,
@@ -30,10 +31,12 @@ import { resolveAssistantCitationCommentDismissal } from "./assistantCitationCom
 import { observeAssistantCitationCommentSource } from "./AssistantCitationSource";
 import { composerFloatingLayerProps } from "./composerEventScope";
 import { textDirection } from "~/textDirection";
+import { ComposerContextActionsContext } from "../composerContextActions";
 
 function useCitationSourceLinkProps(citation: AssistantCitation, editComment = false) {
   const navigate = useNavigate();
-  const { environmentId, threadId } = useParams({ strict: false });
+  const route = useParams({ strict: false });
+  const composerScope = use(ComposerContextActionsContext).threadRef ?? route;
   const sourceThread = useQuietThreadShell(
     scopeThreadRef(citation.environmentId, citation.threadId),
   );
@@ -48,7 +51,8 @@ function useCitationSourceLinkProps(citation: AssistantCitation, editComment = f
       // Keep the draft editor mounted when editing a quote from another scope.
       if (
         editComment &&
-        (citation.environmentId !== environmentId || citation.threadId !== threadId)
+        (citation.environmentId !== composerScope.environmentId ||
+          citation.threadId !== composerScope.threadId)
       )
         return;
       void navigate(assistantCitationNavigation(citation, sourceThread));
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 6903994b62f40..94383df7e03b9 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -700,6 +700,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   const previewFile = composerFiles.find((file) => file.id === previewFileId);
   const composerContextActions = {
     environmentId,
+    threadRef: routeThreadRef,
     cwd: gitCwd ?? undefined,
     projectId: activeProjectId ?? undefined,
     expandImage: (imageId: string) => {
diff --git a/apps/web/src/components/composerContextActions.ts b/apps/web/src/components/composerContextActions.ts
index b5df31ea2b26c..44bc00613e60e 100644
--- a/apps/web/src/components/composerContextActions.ts
+++ b/apps/web/src/components/composerContextActions.ts
@@ -1,8 +1,9 @@
-import type { EnvironmentId, ProjectId } from "@t3tools/contracts";
+import type { EnvironmentId, ProjectId, ScopedThreadRef } from "@t3tools/contracts";
 import { createContext, type MouseEvent } from "react";
 
 export interface ComposerContextActions {
   environmentId: EnvironmentId | null;
+  threadRef?: ScopedThreadRef | undefined;
   cwd?: string | undefined;
   projectId?: ProjectId | undefined;
   expandImage: (imageId: string) => void;