nexu-io
diff --git a/‎apps/web/src/components/FileViewer.tsx‎
Lines changed: 4 additions & 0 deletions b/‎apps/web/src/components/FileViewer.tsx‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎apps/web/tests/components/FileViewer.test.tsx‎
Lines changed: 56 additions & 0 deletions b/‎apps/web/tests/components/FileViewer.test.tsx‎
Lines changed: 56 additions & 0 deletions
@@ -12553,6 +12553,10 @@ function HtmlViewer({
   const myMemberId = collab.member?.memberId ?? null;
   const iAmProjectOwner = collab.isOwner;
   const commentAuthoredByMe = (comment: PreviewComment | null | undefined): boolean => {
+    // No persisted comment means this is the create flow: the draft belongs
+    // to the current viewer, including a read-only member/admin annotating
+    // someone else's shared project.
+    if (!comment) return true;
     const authorId = comment?.authorMemberId ?? null;
     // A legacy shared comment without an author is deliberately owner-only.
     // Treating it as "mine" for every member made the client advertise a
 
@@ -84,6 +84,7 @@ import { emptyManualEditStyles } from '../../src/edit-mode/types';
 import { __resetPreviewIsolationCache } from '../../src/runtime/powered-preview';
 import { readExpandedIndexCss } from '../helpers/read-expanded-css';
 import { resetWorkspaceContextCache } from '../../src/collab/useWorkspaceContext';
+import { CollabProvider, type CollabContextValue } from '../../src/collab/collab-context';
 import {
   buildWorkspacePermissions,
   buildWorkspaceSeatSummary,
@@ -5984,6 +5985,61 @@ describe('FileViewer tweaks toolbar', () => {
     });
   });
 
+  it('keeps the Comment CTA for a new element annotation in a viewer-only team project', async () => {
+    const collab: CollabContextValue = {
+      enabled: true,
+      member: { memberId: 'wm-1', name: 'Member', role: 'member' },
+      present: [],
+      publishedVersion: 1,
+      syncState: 'synced',
+      viewerOnly: true,
+      isOwner: false,
+      ownerDisplayName: 'Owner',
+      ownerRole: 'owner',
+      downloadPending: false,
+      reportChange: () => {},
+      requestPublish: () => {},
+      refreshPresence: () => {},
+      checkStatusNow: () => {},
+    };
+
+    render(
+      <CollabProvider value={collab}>
+        <FileViewer
+          projectId="project-1"
+          projectKind="prototype"
+          file={htmlPreviewFile()}
+          liveHtml='<html><body><main data-od-id="hero">Hero</main></body></html>'
+          viewerOnly
+          onSavePreviewComment={vi.fn()}
+        />
+      </CollabProvider>,
+    );
+
+    clickAgentTool('board-mode-toggle');
+    const frame = screen.getByTestId('artifact-preview-frame') as HTMLIFrameElement;
+    window.dispatchEvent(new MessageEvent('message', {
+      source: frame.contentWindow,
+      data: {
+        type: 'od:comment-target',
+        elementId: 'hero',
+        selector: '[data-od-id="hero"]',
+        label: 'Hero',
+        text: 'Hero',
+        position: { x: 8, y: 12, width: 120, height: 48 },
+        hoverPoint: { x: 12, y: 16 },
+        htmlHint: '<main data-od-id="hero">Hero</main>',
+      },
+    }));
+
+    const input = await screen.findByTestId('comment-popover-input');
+    fireEvent.change(input, { target: { value: 'Please tighten this heading.' } });
+
+    expect(input).not.toHaveAttribute('readonly');
+    expect(screen.getByTestId('comment-popover-save')).toHaveTextContent('Comment');
+    expect(screen.queryByTestId('comment-add-send')).toBeNull();
+  });
+
   it('docks the comment side panel outside the clickable preview canvas', () => {
     vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect')
       .mockImplementation(function getBoundingClientRectMock(this: HTMLElement) {