From be1c1860b318292efa5883502796b5e0b960c480 Mon Sep 17 00:00:00 2001
From: Phil Merrell <philmerrell@boisestate.edu>
Date: Wed, 16 Sep 2026 16:46:12 -0600
Subject: [PATCH] feat(spa): share artifacts from the library and the owner
 view page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sharing an artifact used to be reachable only from the card inside the
conversation that produced it, which meant the library at /artifacts —
the page whose whole premise is that artifacts outlive their chat — had
no way to share one. Both surfaces now open the same
ArtifactShareModalComponent the card does, so there stays exactly one
place in the app that knows what an artifact share is.

The control is gated on `row.owned`, so it appears on your own rows and
never on the "Shared with you" ones: a received artifact has no artifact
id to share (the share id is the only handle you have on it), and
re-sharing someone else's grant is not something this model supports.

The view page deliberately has no ownership check of its own. It
resolves its artifact out of listLibrary(), which reads the caller's own
DynamoDB partition, so an id that is not yours renders "Artifact not
found" before the header exists at all — the boundary is the partition
key, and a comparison in the template would imply the guarantee lives in
the UI. A test pins that the control is absent when nothing resolved.

Both surfaces show HEAD, so they pin HEAD's version. Shares are
immutable and never follow HEAD, so the version rides in each control's
accessible name ("Share Quarterly plan, version 4") as well as the
dialog's caption — the library prints a version badge only when it is
> 1, so the control cannot rely on one being on screen.

Grid footer: raise the label-collapse threshold 19rem -> 21rem.

Found in the browser, not by a test. 19rem was tuned for FOUR controls
and fit with zero slack: at three columns on a 1280px window the
container measures exactly 306px and the labelled row needed exactly
306px. Adding Share pushed the row to 326px while leaving the container
2px ABOVE the collapse threshold, so the labels stayed visible and the
Delete icon was clipped. 21rem (336px) collapses them with 10px to
spare, and the labels still reappear at one column, so they are hidden
where they do not fit rather than removed. Verified against real data on
dev: zero overflow on every card, in both views.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../app/artifacts/artifact-library.page.html  | 53 +++++++++--
 .../artifacts/artifact-library.page.spec.ts   | 90 ++++++++++++++++++-
 .../app/artifacts/artifact-library.page.ts    | 40 ++++++++-
 .../src/app/artifacts/artifact-view.page.html | 16 ++++
 .../app/artifacts/artifact-view.page.spec.ts  | 58 ++++++++++++
 .../src/app/artifacts/artifact-view.page.ts   | 38 ++++++++
 6 files changed, 284 insertions(+), 11 deletions(-)

diff --git a/frontend/ai.client/src/app/artifacts/artifact-library.page.html b/frontend/ai.client/src/app/artifacts/artifact-library.page.html
index fab177482..33cf9eece 100644
--- a/frontend/ai.client/src/app/artifacts/artifact-library.page.html
+++ b/frontend/ai.client/src/app/artifacts/artifact-library.page.html
@@ -334,6 +334,23 @@ <h2 class="mt-3 text-sm/6 font-medium text-gray-900 dark:text-white">No artifact
                 <span class="sr-only">Open {{ row.title }}</span>
               </button>
               @if (row.owned; as item) {
+                <!-- Share pins this row's version, which in the library is
+                     always HEAD — the list is one row per artifact, not per
+                     version. The dialog captions the version before it
+                     creates anything. -->
+                <button
+                  type="button"
+                  (click)="share(item)"
+                  [appTooltip]="'Share'"
+                  appTooltipPosition="top"
+                  class="grid size-8 place-items-center rounded-2xl text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+                >
+                  <ng-icon name="heroArrowUpOnSquare" class="size-4" aria-hidden="true" />
+                  <span class="sr-only"
+                    >Share {{ item.title || 'Untitled artifact' }}, version
+                    {{ item.version }}</span
+                  >
+                </button>
                 <button
                   type="button"
                   (click)="rename(item)"
@@ -419,16 +436,25 @@ <h2 class="text-sm/6 font-semibold text-gray-900 dark:text-white">
                 }
               </p>
 
-              <!-- Four controls in one row: labelled Open + Conversation need
-                   ~290px, and three columns give the card far less than that
-                   on a narrow window (~166px at 1080px), so the two text
-                   labels drop to `sr-only` below 19rem — kept in the
+              <!-- Five controls in one row: labelled Open + Conversation plus
+                   three icons need 326px, and three columns give the card far
+                   less than that on a narrow window (~166px at 1080px), so the
+                   two text labels drop to `sr-only` below 21rem — kept in the
                    accessible name, since these controls have no aria-label of
                    their own and would otherwise become nameless icons, with
                    [appTooltip] standing in for the text a sighted user can no
                    longer see.
 
-                   19rem is measured against the container's CONTENT box, which
+                   ⚠️ 21rem, not the 19rem this started at. 19rem was tuned for
+                   FOUR controls and fit with zero slack: at three columns on a
+                   1280px window the container measures exactly 306px and the
+                   labelled row needed exactly 306px. Adding Share pushed the
+                   row to 326px while leaving it 2px above the collapse
+                   threshold, so the labels stayed visible and the last icon
+                   was clipped. Measured in the browser, not derived — any
+                   further control added to this row has to re-measure it.
+
+                   21rem is measured against the container's CONTENT box, which
                    is what an `inline-size` container query reports — the
                    body's `p-5` means the card is 40px wider than the number
                    here. Sizing the threshold off the card (the intuitive
@@ -445,7 +471,7 @@ <h2 class="text-sm/6 font-semibold text-gray-900 dark:text-white">
                   class="inline-flex items-center gap-1.5 rounded-2xl px-2.5 py-1.5 text-sm/6 font-medium text-gray-700 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:text-gray-300 dark:hover:bg-gray-700"
                 >
                   <ng-icon name="heroEye" class="size-4" aria-hidden="true" />
-                  <span class="@max-[19rem]:sr-only">Open</span>
+                  <span class="@max-[21rem]:sr-only">Open</span>
                 </button>
                 @if (row.kind === 'owned' && row.sessionId) {
                   <a
@@ -455,11 +481,24 @@ <h2 class="text-sm/6 font-semibold text-gray-900 dark:text-white">
                     class="inline-flex items-center gap-1.5 rounded-2xl px-2.5 py-1.5 text-sm/6 font-medium text-gray-700 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:text-gray-300 dark:hover:bg-gray-700"
                   >
                     <ng-icon name="heroChatBubbleLeftRight" class="size-4" aria-hidden="true" />
-                    <span class="@max-[19rem]:sr-only">Conversation</span>
+                    <span class="@max-[21rem]:sr-only">Conversation</span>
                   </a>
                 }
                 @if (row.owned; as item) {
                   <div class="ml-auto flex items-center gap-1">
+                    <button
+                      type="button"
+                      (click)="share(item)"
+                      [appTooltip]="'Share'"
+                      appTooltipPosition="top"
+                      class="grid size-8 place-items-center rounded-2xl text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+                    >
+                      <ng-icon name="heroArrowUpOnSquare" class="size-4" aria-hidden="true" />
+                      <span class="sr-only"
+                        >Share {{ item.title || 'Untitled artifact' }}, version
+                        {{ item.version }}</span
+                      >
+                    </button>
                     <button
                       type="button"
                       (click)="rename(item)"
diff --git a/frontend/ai.client/src/app/artifacts/artifact-library.page.spec.ts b/frontend/ai.client/src/app/artifacts/artifact-library.page.spec.ts
index b432685d6..7b0651727 100644
--- a/frontend/ai.client/src/app/artifacts/artifact-library.page.spec.ts
+++ b/frontend/ai.client/src/app/artifacts/artifact-library.page.spec.ts
@@ -16,6 +16,8 @@ import {
 } from '../session/services/artifacts/artifact-share.service';
 import { LocalSettingsService, type ViewMode } from '../services/local-settings.service';
 import { ToastService } from '../services/toast/toast.service';
+import { UserService } from '../auth/user.service';
+import { ArtifactShareModalComponent } from '../session/components/message-list/components/artifact/artifact-share-modal.component';
 
 function stubShared(
   overrides: Partial<SharedWithMeArtifact> = {},
@@ -101,6 +103,13 @@ describe('ArtifactLibraryPage', () => {
         { provide: LocalSettingsService, useValue: mockSettings },
         { provide: ToastService, useValue: mockToast },
         { provide: Dialog, useValue: mockDialog },
+        // Stubbed rather than real: the real one computes off SessionService,
+        // which would drag HTTP into a page test that only needs an address
+        // to seed the share dialog's allowlist with.
+        {
+          provide: UserService,
+          useValue: { currentUser: () => ({ email: 'me@x.com' }) },
+        },
       ],
     });
   });
@@ -153,6 +162,7 @@ describe('ArtifactLibraryPage', () => {
       totalCount: () => number;
       tabCount: () => number;
       load: () => Promise<void>;
+      share: (item: LibraryArtifact) => void;
       rename: (item: LibraryArtifact) => Promise<void>;
       confirmDelete: (item: LibraryArtifact) => Promise<void>;
       busy: () => string | null;
@@ -631,6 +641,73 @@ describe('ArtifactLibraryPage', () => {
     });
   });
 
+  describe('share', () => {
+    it('opens the share dialog pinned to the row\'s version', async () => {
+      // The library lists HEAD, one row per artifact, so this is the
+      // version the dialog must caption and pin. A share never follows
+      // HEAD, so getting this wrong would silently share the wrong bytes.
+      mockHttp.listLibrary.mockResolvedValue([
+        stubArtifact({ artifactId: 'a', version: 4, title: 'Quarterly plan' }),
+      ]);
+      const c = api(await createComponent());
+
+      c.share(c.items()[0]);
+
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        ArtifactShareModalComponent,
+        {
+          data: {
+            artifactId: 'a',
+            version: 4,
+            title: 'Quarterly plan',
+            ownerEmail: 'me@x.com',
+          },
+        },
+      );
+    });
+
+    it('offers share on your own rows and not on received ones', async () => {
+      // A received artifact has no artifact id — the share id is the only
+      // handle on it — so there is nothing to re-share. The button must
+      // not render rather than render and fail.
+      mockHttp.listLibrary.mockResolvedValue([stubArtifact({ title: 'Mine' })]);
+      mockShares.listSharedWithMe.mockResolvedValue({
+        artifacts: [stubShared({ title: 'Theirs' })],
+        nextCursor: null,
+      });
+      const fixture = await createComponent();
+      const host = fixture.nativeElement as HTMLElement;
+
+      const shareLabels = [...host.querySelectorAll('li .sr-only')]
+        .map((el) => (el.textContent ?? '').trim())
+        .filter((t) => t.startsWith('Share '));
+
+      expect(shareLabels).toHaveLength(1);
+      expect(shareLabels[0]).toContain('Mine');
+      expect(shareLabels[0]).not.toContain('Theirs');
+    });
+
+    it('carries the version in the accessible name, in both views', async () => {
+      // The icon is the same glyph as the conversation share, and the row
+      // is captioned with a version only when it is > 1 — so the version
+      // the link will pin has to be in the name itself.
+      mockHttp.listLibrary.mockResolvedValue([
+        stubArtifact({ version: 4, title: 'Quarterly plan' }),
+      ]);
+      for (const mode of ['list', 'grid'] as ViewMode[]) {
+        mockSettings.artifactsViewMode.set(mode);
+        const fixture = await createComponent();
+        const host = fixture.nativeElement as HTMLElement;
+        const label = [...host.querySelectorAll('.sr-only')]
+          .map((el) => (el.textContent ?? '').replace(/\s+/g, ' ').trim())
+          .find((t) => t.startsWith('Share '));
+        expect(label, `view mode: ${mode}`).toBe(
+          'Share Quarterly plan, version 4',
+        );
+      }
+    });
+  });
+
   describe('delete', () => {
     it('removes the row only after the request succeeds', async () => {
       mockHttp.listLibrary.mockResolvedValue([
@@ -688,12 +765,19 @@ describe('ArtifactLibraryPage', () => {
 
   describe('grid card footer', () => {
     it('keeps both button labels in the DOM when they collapse', async () => {
-      // The footer carries four controls and the card is ~13rem wide at
+      // The footer carries five controls and the card is ~13rem wide at
       // three columns on a 1080px window, so a container query drops the
-      // "Open" / "Conversation" text below 19rem. It must be dropped to
+      // "Open" / "Conversation" text below 21rem. It must be dropped to
       // `sr-only`, never `hidden`: these buttons have no aria-label, so
       // removing the text would leave them with no accessible name at
       // exactly the width where they become bare icons.
+      //
+      // ⚠️ The threshold is a measured number, not a style choice: the
+      // labelled row needs 326px and the container is 306px at three
+      // columns, so a threshold below 21rem leaves the labels showing at
+      // a width where the last icon is clipped. This assertion is the
+      // only thing standing between the next control added to this row
+      // and that regression — re-measure in a browser before changing it.
       mockSettings.artifactsViewMode.set('grid');
       mockHttp.listLibrary.mockResolvedValue([stubArtifact()]);
       const fixture = await createComponent();
@@ -704,7 +788,7 @@ describe('ArtifactLibraryPage', () => {
       );
       expect(labels).toHaveLength(2);
       for (const label of labels) {
-        expect(label.className).toContain('@max-[19rem]:sr-only');
+        expect(label.className).toContain('@max-[21rem]:sr-only');
         expect(label.className).not.toContain('hidden');
       }
     });
diff --git a/frontend/ai.client/src/app/artifacts/artifact-library.page.ts b/frontend/ai.client/src/app/artifacts/artifact-library.page.ts
index eb36ca965..7ef169199 100644
--- a/frontend/ai.client/src/app/artifacts/artifact-library.page.ts
+++ b/frontend/ai.client/src/app/artifacts/artifact-library.page.ts
@@ -11,6 +11,7 @@ import { Dialog } from '@angular/cdk/dialog';
 import { firstValueFrom } from 'rxjs';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
+  heroArrowUpOnSquare,
   heroBars3,
   heroChatBubbleLeftRight,
   heroChevronDown,
@@ -50,6 +51,11 @@ import {
   type RenameArtifactDialogData,
   type RenameArtifactDialogResult,
 } from './components/rename-artifact-dialog.component';
+import {
+  ArtifactShareModalComponent,
+  type ArtifactShareModalData,
+} from '../session/components/message-list/components/artifact/artifact-share-modal.component';
+import { UserService } from '../auth/user.service';
 
 /**
  * Presentation for one artifact content type.
@@ -185,7 +191,8 @@ interface LibraryRow {
   changeDetection: ChangeDetectionStrategy.OnPush,
   viewProviders: [
     provideIcons({
-          heroBars3,
+      heroArrowUpOnSquare,
+      heroBars3,
       heroChatBubbleLeftRight,
       heroChevronDown,
       heroCodeBracket,
@@ -208,6 +215,7 @@ export class ArtifactLibraryPage {
   private readonly toast = inject(ToastService);
   private readonly router = inject(Router);
   private readonly dialog = inject(Dialog);
+  private readonly userService = inject(UserService);
 
   protected readonly items = signal<LibraryArtifact[]>([]);
 
@@ -551,6 +559,36 @@ export class ArtifactLibraryPage {
     void this.router.navigate([...row.route]);
   }
 
+  /**
+   * Share an artifact from the library.
+   *
+   * The same dialog the in-conversation card opens — create and revoke
+   * both live in it — so there is exactly one place in the app that
+   * knows what an artifact share is.
+   *
+   * ⚠️ **It pins `item.version`, which here is always HEAD.** The library
+   * lists one row per artifact, not per version, so this shares the
+   * latest version and a later version of the same artifact will not
+   * follow the link. That is the share contract, not a shortcut: shares
+   * are immutable by design, and the dialog captions the version it is
+   * about to pin so the difference is visible before anything is
+   * created.
+   *
+   * Only offered on owned rows. A received artifact has no artifact id
+   * to share — the share id is the only handle you have on it — and
+   * re-sharing someone else's grant is not a thing this model supports.
+   */
+  protected share(item: LibraryArtifact): void {
+    this.dialog.open(ArtifactShareModalComponent, {
+      data: {
+        artifactId: item.artifactId,
+        version: item.version,
+        title: item.title,
+        ownerEmail: this.userService.currentUser()?.email ?? '',
+      } as ArtifactShareModalData,
+    });
+  }
+
   /**
    * Rename an artifact.
    *
diff --git a/frontend/ai.client/src/app/artifacts/artifact-view.page.html b/frontend/ai.client/src/app/artifacts/artifact-view.page.html
index 0ded9da7f..033bc88b9 100644
--- a/frontend/ai.client/src/app/artifacts/artifact-view.page.html
+++ b/frontend/ai.client/src/app/artifacts/artifact-view.page.html
@@ -150,6 +150,22 @@ <h1 class="truncate text-sm/6 font-semibold text-gray-900 dark:text-gray-100">
         <span class="sr-only">Open this artifact in a new tab</span>
       </button>
 
+      <!-- Only reachable on your own artifacts: this page resolves out of
+           your library partition, so someone else's id renders "not found"
+           and never gets here. The version it shares is the one on screen,
+           and shares are immutable — a later version will not follow the
+           link, which the dialog says before it creates one. -->
+      <button
+        type="button"
+        class="flex size-8 shrink-0 items-center justify-center rounded-2xl text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-accessible dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+        [attr.aria-label]="'Share this artifact, version ' + a.version"
+        [appTooltip]="'Share'"
+        appTooltipPosition="bottom"
+        (click)="share()"
+      >
+        <ng-icon name="heroArrowUpOnSquare" class="text-lg" aria-hidden="true" />
+      </button>
+
       <button
         type="button"
         class="flex size-8 shrink-0 items-center justify-center rounded-2xl text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-accessible disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
diff --git a/frontend/ai.client/src/app/artifacts/artifact-view.page.spec.ts b/frontend/ai.client/src/app/artifacts/artifact-view.page.spec.ts
index 68f2cfbbf..c5986fe80 100644
--- a/frontend/ai.client/src/app/artifacts/artifact-view.page.spec.ts
+++ b/frontend/ai.client/src/app/artifacts/artifact-view.page.spec.ts
@@ -2,6 +2,8 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { TestBed } from '@angular/core/testing';
 import { ActivatedRoute, provideRouter } from '@angular/router';
 import { HttpErrorResponse } from '@angular/common/http';
+import { Dialog } from '@angular/cdk/dialog';
+import { of } from 'rxjs';
 
 import { ArtifactViewPage } from './artifact-view.page';
 import {
@@ -9,6 +11,8 @@ import {
   type LibraryArtifact,
 } from '../session/services/artifacts/artifact-http.service';
 import { ArtifactDownloadService } from '../session/services/artifacts/artifact-download.service';
+import { ArtifactShareModalComponent } from '../session/components/message-list/components/artifact/artifact-share-modal.component';
+import { UserService } from '../auth/user.service';
 
 function stubArtifact(overrides: Partial<LibraryArtifact> = {}): LibraryArtifact {
   return {
@@ -30,6 +34,7 @@ describe('ArtifactViewPage', () => {
     getArtifactContent: ReturnType<typeof vi.fn>;
   };
   let mockDownload: { download: ReturnType<typeof vi.fn> };
+  let mockDialog: { open: ReturnType<typeof vi.fn> };
   let paramId: string | null;
 
   beforeEach(() => {
@@ -48,6 +53,7 @@ describe('ArtifactViewPage', () => {
       }),
     };
     mockDownload = { download: vi.fn().mockResolvedValue(true) };
+    mockDialog = { open: vi.fn(() => ({ closed: of(undefined) })) };
 
     TestBed.configureTestingModule({
       providers: [
@@ -57,6 +63,14 @@ describe('ArtifactViewPage', () => {
         ]),
         { provide: ArtifactHttpService, useValue: mockHttp },
         { provide: ArtifactDownloadService, useValue: mockDownload },
+        { provide: Dialog, useValue: mockDialog },
+        // Stubbed rather than real: the real one computes off SessionService,
+        // which would drag HTTP into a page test that only needs an address
+        // to seed the share dialog's allowlist with.
+        {
+          provide: UserService,
+          useValue: { currentUser: () => ({ email: 'me@x.com' }) },
+        },
         {
           provide: ActivatedRoute,
           useValue: { snapshot: { paramMap: { get: () => paramId } } },
@@ -92,6 +106,7 @@ describe('ArtifactViewPage', () => {
       sourceError: () => string | null;
       download: () => Promise<void>;
       openInNewTab: () => void;
+      share: () => void;
       retry: () => void;
     };
   }
@@ -210,6 +225,49 @@ describe('ArtifactViewPage', () => {
     expect(mockHttp.mintRenderToken).toHaveBeenCalledTimes(2);
   });
 
+  it('shares the version on screen, against the artifact id', async () => {
+    // Shares are immutable and pin a version. This page shows HEAD, so
+    // HEAD is what it must pin — and it pins against the artifact id,
+    // the owner authority, the same one download uses.
+    const c = api(await createComponent());
+
+    c.share();
+
+    expect(mockDialog.open).toHaveBeenCalledWith(ArtifactShareModalComponent, {
+      data: {
+        artifactId: 'a1',
+        version: 3,
+        title: 'Quarterly plan',
+        ownerEmail: 'me@x.com',
+      },
+    });
+  });
+
+  it('offers no share control when the artifact did not resolve', async () => {
+    // Ownership on this page is the DynamoDB partition, not a check in
+    // the template: an artifact that is not yours is simply absent from
+    // your library, so the whole header — share included — never renders.
+    mockHttp.listLibrary.mockResolvedValue([]);
+    const fixture = await createComponent();
+    const host = fixture.nativeElement as HTMLElement;
+
+    expect(api(fixture).notFound()).toBe(true);
+    expect(host.querySelector('[aria-label^="Share this artifact"]')).toBeNull();
+  });
+
+  it('names the version it would pin in the share control\'s label', async () => {
+    // The header shows "Version 3" in prose beside it, but the control's
+    // own accessible name has to carry it too — a screen-reader user
+    // tabbing the header never reaches that caption.
+    const fixture = await createComponent();
+    const host = fixture.nativeElement as HTMLElement;
+
+    const btn = host.querySelector('[aria-label^="Share this artifact"]');
+    expect(btn?.getAttribute('aria-label')).toBe(
+      'Share this artifact, version 3',
+    );
+  });
+
   it('treats a missing route param as not-found', async () => {
     paramId = null;
     const c = api(await createComponent());
diff --git a/frontend/ai.client/src/app/artifacts/artifact-view.page.ts b/frontend/ai.client/src/app/artifacts/artifact-view.page.ts
index 78743827a..04f00f239 100644
--- a/frontend/ai.client/src/app/artifacts/artifact-view.page.ts
+++ b/frontend/ai.client/src/app/artifacts/artifact-view.page.ts
@@ -7,6 +7,7 @@ import {
   signal,
 } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
+import { Dialog } from '@angular/cdk/dialog';
 import { DatePipe } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@@ -16,6 +17,7 @@ import {
   heroArrowLeft,
   heroArrowPath,
   heroArrowTopRightOnSquare,
+  heroArrowUpOnSquare,
   heroChatBubbleLeftRight,
   heroCheck,
   heroClipboard,
@@ -31,7 +33,12 @@ import {
 } from '../session/services/artifacts/artifact-http.service';
 import { ArtifactDownloadService } from '../session/services/artifacts/artifact-download.service';
 import { ArtifactViewerComponent } from '../session/components/message-list/components/artifact/artifact-viewer.component';
+import {
+  ArtifactShareModalComponent,
+  type ArtifactShareModalData,
+} from '../session/components/message-list/components/artifact/artifact-share-modal.component';
 import { TooltipDirective } from '../components/tooltip/tooltip.directive';
+import { UserService } from '../auth/user.service';
 
 /**
  * Owner-facing artifact viewer at `/artifacts/:artifactId`.
@@ -73,6 +80,7 @@ import { TooltipDirective } from '../components/tooltip/tooltip.directive';
       heroArrowLeft,
       heroArrowPath,
       heroArrowTopRightOnSquare,
+      heroArrowUpOnSquare,
       heroChatBubbleLeftRight,
       heroCheck,
       heroClipboard,
@@ -88,6 +96,8 @@ export class ArtifactViewPage implements OnInit {
   private artifacts = inject(ArtifactHttpService);
   private downloadService = inject(ArtifactDownloadService);
   private sanitizer = inject(DomSanitizer);
+  private dialog = inject(Dialog);
+  private userService = inject(UserService);
 
   protected readonly artifact = signal<LibraryArtifact | null>(null);
   protected readonly isLoading = signal(true);
@@ -195,6 +205,34 @@ export class ArtifactViewPage implements OnInit {
     }
   }
 
+  /**
+   * Share the version on screen.
+   *
+   * No ownership check is needed here, and adding one would be
+   * misleading about where the guarantee comes from: this page resolves
+   * its artifact out of `listLibrary()`, which reads the caller's own
+   * DynamoDB partition, so an artifact that is not yours does not
+   * resolve at all — `ngOnInit` has already rendered "Artifact not
+   * found" by the time anything on this header exists. The ownership
+   * boundary is the partition key, not a comparison in the template.
+   *
+   * Pins the version this page is showing, which is HEAD. Shares are
+   * immutable, so a later version will not follow the link; the dialog
+   * captions the version before creating one.
+   */
+  protected share(): void {
+    const a = this.artifact();
+    if (!a) return;
+    this.dialog.open(ArtifactShareModalComponent, {
+      data: {
+        artifactId: a.artifactId,
+        version: a.version,
+        title: a.title,
+        ownerEmail: this.userService.currentUser()?.email ?? '',
+      } as ArtifactShareModalData,
+    });
+  }
+
   /**
    * Secondary affordance only. Unlike the library's old primary action,
    * a refusal here is harmless — the artifact is already rendered on this