From 20f0c7b84e64defbb26a331e94cf273ba8a9b9f1 Mon Sep 17 00:00:00 2001
From: Jay Gindin <jgindin@google.com>
Date: Wed, 5 Aug 2026 11:47:21 -0400
Subject: [PATCH 1/9] Add URL payload compression and parsing

---
 .../shell/query-parser/query-parser.spec.ts   | 41 +++++++++++
 .../app/shell/query-parser/query-parser.ts    | 68 +++++++++++++++++++
 2 files changed, 109 insertions(+)

diff --git a/shell/src/app/shell/query-parser/query-parser.spec.ts b/shell/src/app/shell/query-parser/query-parser.spec.ts
index 64b3d972..436e98ed 100644
--- a/shell/src/app/shell/query-parser/query-parser.spec.ts
+++ b/shell/src/app/shell/query-parser/query-parser.spec.ts
@@ -73,4 +73,45 @@ describe('QueryParser', () => {
       expect(QueryParser.parseRendererId('?rendererId=testing<script>')).toBeNull();
     });
   });
+
+  describe('encodeSharedPayload and decodeSharedPayload', () => {
+    it('encodes and decodes an A2UI JSON payload round-trip using deflate-raw', async () => {
+      const originalJson = JSON.stringify([
+        {version: 'v0.9', createSurface: {surfaceId: 'test-surface'}},
+      ]);
+      const encoded = await QueryParser.encodeSharedPayload(originalJson);
+      expect(encoded.startsWith('d1.')).toBe(true);
+      const decoded = await QueryParser.decodeSharedPayload(encoded);
+      expect(decoded).toBe(originalJson);
+    });
+
+    it('returns null when decoding invalid base64url or corrupt deflate-raw payload', async () => {
+      expect(await QueryParser.decodeSharedPayload('not-d1-prefixed')).toBeNull();
+      expect(await QueryParser.decodeSharedPayload('d1.invalid_base64_content!!!')).toBeNull();
+      expect(await QueryParser.decodeSharedPayload('d1.AAAA')).toBeNull();
+    });
+  });
+
+  describe('parseSharedA2ui', () => {
+    it('parses compressed d1. payload from query string', async () => {
+      const originalJson = JSON.stringify([{version: 'v0.9'}]);
+      const encoded = await QueryParser.encodeSharedPayload(originalJson);
+      const searchString = `?a2ui=${encodeURIComponent(encoded)}`;
+      const parsed = await QueryParser.parseSharedA2ui(searchString);
+      expect(parsed).toBe(originalJson);
+    });
+
+    it('parses fallback uncompressed JSON ([...]) from query string', async () => {
+      const rawJson = '[{"version":"v0.9"}]';
+      const searchString = `?a2ui=${encodeURIComponent(rawJson)}`;
+      const parsed = await QueryParser.parseSharedA2ui(searchString);
+      expect(parsed).toBe(rawJson);
+    });
+
+    it('returns null when a2ui param is missing or invalid', async () => {
+      expect(await QueryParser.parseSharedA2ui('')).toBeNull();
+      expect(await QueryParser.parseSharedA2ui('?other=value')).toBeNull();
+      expect(await QueryParser.parseSharedA2ui('?a2ui=invalid-format')).toBeNull();
+    });
+  });
 });
diff --git a/shell/src/app/shell/query-parser/query-parser.ts b/shell/src/app/shell/query-parser/query-parser.ts
index a3b7b263..099fbaa9 100644
--- a/shell/src/app/shell/query-parser/query-parser.ts
+++ b/shell/src/app/shell/query-parser/query-parser.ts
@@ -60,4 +60,72 @@ export class QueryParser {
 
     return null;
   }
+
+  /**
+   * Compresses an A2UI JSON payload using deflate-raw and returns a URL-safe Base64 string prefixed with 'd1.'.
+   */
+  static async encodeSharedPayload(jsonString: string): Promise<string> {
+    const bytes = new TextEncoder().encode(jsonString);
+    const cs = new CompressionStream('deflate-raw');
+    const writer = cs.writable.getWriter();
+    writer.write(bytes);
+    writer.close();
+    const buf = await new Response(cs.readable).arrayBuffer();
+    const base64Url = btoa(String.fromCharCode(...new Uint8Array(buf)))
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_')
+      .replace(/=+$/, '');
+    return `d1.${base64Url}`;
+  }
+
+  /**
+   * Decompresses a 'd1.'-prefixed Base64URL string back into an A2UI JSON string.
+   * Returns null if the format is invalid or decompression fails.
+   */
+  static async decodeSharedPayload(encodedPayload: string): Promise<string | null> {
+    if (!encodedPayload.startsWith('d1.')) {
+      return null;
+    }
+    try {
+      const rawBase64 = encodedPayload.slice(3).replace(/-/g, '+').replace(/_/g, '/');
+      const padded = rawBase64 + '='.repeat((4 - (rawBase64.length % 4)) % 4);
+      const binaryString = atob(padded);
+      const bytes = new Uint8Array(binaryString.length);
+      for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+      const ds = new DecompressionStream('deflate-raw');
+      const writer = ds.writable.getWriter();
+      const writePromise = writer
+        .write(bytes)
+        .then(() => writer.close())
+        .catch(() => {});
+      const responsePromise = new Response(ds.readable).arrayBuffer();
+      await Promise.all([writePromise, responsePromise]);
+      const buf = await responsePromise;
+      return new TextDecoder().decode(buf);
+    } catch (err) {
+      console.warn('Failed to decompress shared A2UI payload:', err);
+      return null;
+    }
+  }
+
+  /**
+   * Parses the shared A2UI JSON payload from a query search string (?a2ui=...).
+   * Supports both compressed ('d1.') and fallback uncompressed JSON strings.
+   */
+  static async parseSharedA2ui(searchString: string): Promise<string | null> {
+    const params = new URLSearchParams(searchString);
+    const candidate = params.get('a2ui');
+    if (!candidate) {
+      return null;
+    }
+    if (candidate.startsWith('d1.')) {
+      return await QueryParser.decodeSharedPayload(candidate);
+    }
+    if (candidate.startsWith('[') || candidate.startsWith('{')) {
+      return candidate;
+    }
+    return null;
+  }
 }

From c9219e018760f432d7314dc87385350b2be0ba3c Mon Sep 17 00:00:00 2001
From: Jay Gindin <jgindin@google.com>
Date: Wed, 5 Aug 2026 11:47:27 -0400
Subject: [PATCH 2/9] Capture shared A2UI payload signal in StartupResolution

---
 .../startup-resolution.spec.ts                | 21 +++++++++++++++++++
 .../startup-resolution/startup-resolution.ts  |  9 ++++++++
 2 files changed, 30 insertions(+)

diff --git a/shell/src/app/shell/startup-resolution/startup-resolution.spec.ts b/shell/src/app/shell/startup-resolution/startup-resolution.spec.ts
index b5949849..c98cfb84 100644
--- a/shell/src/app/shell/startup-resolution/startup-resolution.spec.ts
+++ b/shell/src/app/shell/startup-resolution/startup-resolution.spec.ts
@@ -168,6 +168,27 @@ describe('StartupResolution', () => {
     expect(url).toBe('http://query:3000/');
   });
 
+  describe('sharedA2uiPayload signal', () => {
+    it('sets sharedA2uiPayload signal when ?a2ui= parameter is present in window search', async () => {
+      mockFetchConfig({});
+      const expectedPayload = '[{"version":"v0.9","createSurface":{"surfaceId":"test"}}]';
+      vi.spyOn(service, 'getWindowSearch').mockReturnValue(
+        `?a2ui=${encodeURIComponent(expectedPayload)}`,
+      );
+
+      await service.resolveStartupConfiguration();
+      expect(service.sharedA2uiPayload()).toBe(expectedPayload);
+    });
+
+    it('leaves sharedA2uiPayload as null when ?a2ui is missing or invalid', async () => {
+      mockFetchConfig({});
+      vi.spyOn(service, 'getWindowSearch').mockReturnValue('');
+
+      await service.resolveStartupConfiguration();
+      expect(service.sharedA2uiPayload()).toBeNull();
+    });
+  });
+
   it('falls back to storage when config fetch fails or times out', async () => {
     vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('Timeout'));
     const warnSpy = vi.spyOn(console, 'warn');
diff --git a/shell/src/app/shell/startup-resolution/startup-resolution.ts b/shell/src/app/shell/startup-resolution/startup-resolution.ts
index 3c9e7aff..da0786e3 100644
--- a/shell/src/app/shell/startup-resolution/startup-resolution.ts
+++ b/shell/src/app/shell/startup-resolution/startup-resolution.ts
@@ -68,12 +68,14 @@ export class StartupResolution {
   private readonly _renderers = signal<Record<string, RendererConfig>>({});
   private readonly _selectedRendererId = signal<string | null>(null);
   private readonly _apiKeys = signal<Record<string, ApiKeyConfig>>({});
+  private readonly _sharedA2uiPayload = signal<string | null>(null);
 
   readonly resolvedUrl = this._resolvedUrl.asReadonly();
   readonly renderers = this._renderers.asReadonly();
   readonly apiKeys = this._apiKeys.asReadonly();
   readonly selectedRendererId = this._selectedRendererId.asReadonly();
   readonly selectedRendererId$ = this._selectedRendererId.asReadonly();
+  readonly sharedA2uiPayload = this._sharedA2uiPayload.asReadonly();
   readonly activeRenderer = computed<RendererConfig | null>(() => {
     const renderers = this._renderers();
     const selectedId = this._selectedRendererId();
@@ -107,12 +109,19 @@ export class StartupResolution {
   async resolveStartupConfiguration(): Promise<string | null> {
     this._resolvedUrl.set(null);
     this._selectedRendererId.set(null);
+    this._sharedA2uiPayload.set(null);
     this._renderers.set({});
     this._apiKeys.set({});
 
     const staticConfig = await this.fetchStaticConfig();
     const resolved = await this.resolveRenderer(staticConfig);
 
+    const sharedPayload = await QueryParser.parseSharedA2ui(this.getWindowSearch());
+    if (sharedPayload) {
+      console.log('Using shared A2UI payload from query param.');
+      this._sharedA2uiPayload.set(sharedPayload);
+    }
+
     await this.evaluateEnvironmentPurge();
 
     return resolved;

From d22497d0b44440d3b9aa4ea8b2cda1bf9c6662da Mon Sep 17 00:00:00 2001
From: Jay Gindin <jgindin@google.com>
Date: Wed, 5 Aug 2026 11:47:33 -0400
Subject: [PATCH 3/9] Hydrate shared A2UI payload in StateSync

---
 .../app/chat/state-sync/state-sync.spec.ts    | 22 ++++++++++++++++++-
 shell/src/app/chat/state-sync/state-sync.ts   |  4 ++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/shell/src/app/chat/state-sync/state-sync.spec.ts b/shell/src/app/chat/state-sync/state-sync.spec.ts
index 1eba4b43..6b7394f7 100644
--- a/shell/src/app/chat/state-sync/state-sync.spec.ts
+++ b/shell/src/app/chat/state-sync/state-sync.spec.ts
@@ -23,6 +23,7 @@ import {MessageRole} from '../llm-client/llm-client';
 import {CAR_BOOKING} from '../chat-service/initial-draft';
 import {CatalogManagement} from '../../storage/catalog-management/catalog-management';
 import {Catalog} from '../../storage/models/catalog-storage.model';
+import {StartupResolution} from '../../shell/startup-resolution/startup-resolution';
 import {signal} from '@angular/core';
 
 class MockChatState {
@@ -60,20 +61,29 @@ class MockCatalogManagement {
   readonly activeCatalog = signal<Catalog | null>(null);
 }
 
+class MockStartupResolution {
+  readonly sharedA2uiPayload = signal<string | null>(null);
+  readonly activeRenderer = signal<{samplePayload?: string} | null>(null);
+}
+
 describe('StateSync Autosave Draft Integrations', () => {
   let service: StateSync;
   let chatStateMock: MockChatState;
   let catalogManagementMock: MockCatalogManagement;
+  let startupResolutionMock: MockStartupResolution;
 
   beforeEach(() => {
     TestBed.resetTestingModule();
     vi.useFakeTimers();
 
+    startupResolutionMock = new MockStartupResolution();
+
     TestBed.configureTestingModule({
       providers: [
         StateSync,
         {provide: ChatState, useClass: MockChatState},
         {provide: CatalogManagement, useClass: MockCatalogManagement},
+        {provide: StartupResolution, useValue: startupResolutionMock},
       ],
     });
 
@@ -97,10 +107,20 @@ describe('StateSync Autosave Draft Integrations', () => {
     vi.restoreAllMocks();
   });
 
-  it('initializes activeDraft with CAR_BOOKING constant', () => {
+  it('initializes activeDraft with CAR_BOOKING constant when sharedA2uiPayload is null', () => {
     expect(service.activeDraft()).toBe(CAR_BOOKING);
   });
 
+  it('prepopulates activeDraft with sharedA2uiPayload when present on StartupResolution', () => {
+    const customSharedJson = '[{"version":"v0.9","createSurface":{"surfaceId":"shared-surface"}}]';
+    startupResolutionMock.sharedA2uiPayload.set(customSharedJson);
+
+    // Create fresh instance after setting shared payload
+    const sharedService = TestBed.inject(StateSync);
+    sharedService.flushDraft();
+    expect(sharedService.activeDraft()).toBe(customSharedJson);
+  });
+
   it('updates draft in-memory synchronously and ignores initial setup debouncer', () => {
     service.updateDraft('[{"version": "v0.9"}]');
     expect(service.hydrateActiveDraft()).toBe('[{"version": "v0.9"}]');
diff --git a/shell/src/app/chat/state-sync/state-sync.ts b/shell/src/app/chat/state-sync/state-sync.ts
index 91d0f048..f3ff8179 100644
--- a/shell/src/app/chat/state-sync/state-sync.ts
+++ b/shell/src/app/chat/state-sync/state-sync.ts
@@ -133,6 +133,10 @@ export class StateSync {
   }
 
   private getInitialDraft(catalogId: string): string {
+    const sharedPayload = this.startupResolution?.sharedA2uiPayload();
+    if (sharedPayload) {
+      return sharedPayload;
+    }
     const activeRenderer = this.startupResolution?.activeRenderer();
     if (activeRenderer?.samplePayload) {
       return activeRenderer.samplePayload;

From 3bf2611e23a4d560371f8672b14efcd50903ad44 Mon Sep 17 00:00:00 2001
From: Jay Gindin <jgindin@google.com>
Date: Wed, 5 Aug 2026 12:50:42 -0400
Subject: [PATCH 4/9] Re-dispatch layout payload upon catalog handshake
 completion

---
 shell/src/app/preview/raw/raw-frame.spec.ts | 13 +++++++++++++
 shell/src/app/preview/raw/raw-frame.ts      | 10 +++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/shell/src/app/preview/raw/raw-frame.spec.ts b/shell/src/app/preview/raw/raw-frame.spec.ts
index 0e9101ca..ae511e48 100644
--- a/shell/src/app/preview/raw/raw-frame.spec.ts
+++ b/shell/src/app/preview/raw/raw-frame.spec.ts
@@ -687,6 +687,19 @@ describe('RawFrame JSON Source Editor View', () => {
     expect(sendRenderA2UIMock).toHaveBeenCalledTimes(1);
   });
 
+  it('re-dispatches layout payload when receiving A2UI_CATALOG event from messageStream$', async () => {
+    await setup(false);
+    sendRenderA2UIMock.mockClear();
+
+    messageStreamSubject.next({
+      type: PreviewBridgeMessageType.A2UI_CATALOG,
+      origin: 'http://test',
+      timestamp: Date.now(),
+    });
+
+    expect(sendRenderA2UIMock).toHaveBeenCalledTimes(1);
+  });
+
   it('tracks isDestroyed state on component destruction', async () => {
     const {fixture, component} = await setup(false);
     expect(component['isDestroyed']).toBe(false);
diff --git a/shell/src/app/preview/raw/raw-frame.ts b/shell/src/app/preview/raw/raw-frame.ts
index 14a5570c..c6875bba 100644
--- a/shell/src/app/preview/raw/raw-frame.ts
+++ b/shell/src/app/preview/raw/raw-frame.ts
@@ -91,7 +91,11 @@ export class RawFrame {
 
     this.hostCommunication.messageStream$
       .pipe(
-        filter(envelope => envelope?.type === PreviewBridgeMessageType.RENDERER_READY),
+        filter(
+          envelope =>
+            envelope?.type === PreviewBridgeMessageType.RENDERER_READY ||
+            envelope?.type === PreviewBridgeMessageType.A2UI_CATALOG,
+        ),
         takeUntilDestroyed(),
       )
       .subscribe(() => {
@@ -102,9 +106,9 @@ export class RawFrame {
           }
         } catch (err) {
           if (err instanceof SyntaxError) {
-            console.warn('Syntax error on RENDERER_READY:', err);
+            console.warn(`Syntax error in JSON:`, err);
           } else {
-            console.error('Unexpected error on RENDERER_READY:', err);
+            console.error('Unexpected error sending A2UI to renderer:', err);
           }
         }
       });

From a400dc45fdd73b1d61fce32853091b42a9e04010 Mon Sep 17 00:00:00 2001
From: Jay Gindin <jgindin@google.com>
Date: Wed, 5 Aug 2026 11:47:39 -0400
Subject: [PATCH 5/9] Add Share design toolbar button and action to
 ComposerShell

---
 .../composer-shell/composer-shell.ng.html     | 10 ++++
 .../composer-shell/composer-shell.spec.ts     | 58 ++++++++++++++++++-
 .../shell/composer-shell/composer-shell.ts    | 37 +++++++++++-
 3 files changed, 103 insertions(+), 2 deletions(-)

diff --git a/shell/src/app/shell/composer-shell/composer-shell.ng.html b/shell/src/app/shell/composer-shell/composer-shell.ng.html
index c6c1892b..05ae8e6d 100644
--- a/shell/src/app/shell/composer-shell/composer-shell.ng.html
+++ b/shell/src/app/shell/composer-shell/composer-shell.ng.html
@@ -32,6 +32,16 @@
   <button mat-button class="reset-session-button" color="primary" (click)="resetSession()">
     New Session
   </button>
+  <button
+    mat-icon-button
+    class="share-button"
+    color="primary"
+    (click)="shareDesign()"
+    aria-label="Share design"
+    matTooltip="Share Design"
+  >
+    <mat-icon aria-hidden="true">share</mat-icon>
+  </button>
   <button
     mat-icon-button
     class="theme-toggle-button"
diff --git a/shell/src/app/shell/composer-shell/composer-shell.spec.ts b/shell/src/app/shell/composer-shell/composer-shell.spec.ts
index 0f2633bd..41d3c9d0 100644
--- a/shell/src/app/shell/composer-shell/composer-shell.spec.ts
+++ b/shell/src/app/shell/composer-shell/composer-shell.spec.ts
@@ -34,6 +34,9 @@ import {LocalStorageInteractions} from '../../storage/local-storage-interactions
 import {LocalStorageKey} from '../../storage/models/local-storage-keys';
 import {SessionStorageInteractions} from '../../storage/session-storage-interactions/session-storage-interactions';
 
+import {StartupResolution} from '../startup-resolution/startup-resolution';
+import {StateSync} from '../../chat/state-sync/state-sync';
+
 describe('ComposerShell Layout', () => {
   let fixture: ComponentFixture<ComposerShell>;
   let harness: ComposerShellHarness;
@@ -48,6 +51,12 @@ describe('ComposerShell Layout', () => {
     themePreference: WritableSignal<ThemePreference>;
     setThemePreference: (theme: ThemePreference) => void;
   };
+  let startupResolutionMock: {
+    resolvedUrl: WritableSignal<string | null>;
+  };
+  let stateSyncMock: {
+    activeDraft: WritableSignal<string>;
+  };
 
   beforeEach(async () => {
     storageServiceMock = {
@@ -74,6 +83,14 @@ describe('ComposerShell Layout', () => {
       }),
     };
 
+    startupResolutionMock = {
+      resolvedUrl: signal<string | null>(null),
+    };
+
+    stateSyncMock = {
+      activeDraft: signal(''),
+    };
+
     await TestBed.configureTestingModule({
       imports: [ComposerShell],
       providers: [
@@ -99,6 +116,14 @@ describe('ComposerShell Layout', () => {
           provide: AppConfigProvider,
           useValue: configProviderMock,
         },
+        {
+          provide: StartupResolution,
+          useValue: startupResolutionMock,
+        },
+        {
+          provide: StateSync,
+          useValue: stateSyncMock,
+        },
       ],
     }).compileComponents();
 
@@ -212,7 +237,7 @@ describe('ComposerShell Layout', () => {
 
   it('applies aria-hidden attribute to purely decorative MatIcon elements across the composer shell', async () => {
     const hiddenAttrs = await harness.getIconsAriaHidden();
-    expect(hiddenAttrs.length).toBe(5);
+    expect(hiddenAttrs.length).toBe(6);
     hiddenAttrs.forEach(attr => {
       expect(attr).toBe('true');
     });
@@ -264,4 +289,35 @@ describe('ComposerShell Layout', () => {
     await fixture.whenStable();
     expect((navLinks[0] as HTMLElement).classList.contains('active-nav-item')).toBe(true);
   });
+
+  describe('shareDesign & resetSession', () => {
+    it('shareDesign copies renderer URL and compressed payload to clipboard', async () => {
+      startupResolutionMock.resolvedUrl.set('http://my-renderer.com');
+      stateSyncMock.activeDraft.set('[{"version":"v0.9"}]');
+      const writeTextSpy = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, 'clipboard', {
+        value: {writeText: writeTextSpy},
+        configurable: true,
+        writable: true,
+      });
+      const component = fixture.componentInstance;
+      await component.shareDesign();
+      expect(writeTextSpy).toHaveBeenCalledWith(
+        expect.stringContaining('renderer=http%3A%2F%2Fmy-renderer.com'),
+      );
+      expect(writeTextSpy).toHaveBeenCalledWith(expect.stringContaining('a2ui=d1.'));
+    });
+
+    it('resetSession strips share parameters from location href before setting href', async () => {
+      const component = fixture.componentInstance;
+      const document = TestBed.inject(DOCUMENT);
+      const mockLocation = {href: 'http://localhost:3000/?renderer=http://test.com&a2ui=d1.123'};
+      vi.spyOn(document, 'defaultView', 'get').mockReturnValue({
+        location: mockLocation as unknown as Location,
+      } as Window & typeof globalThis);
+
+      await component.resetSession();
+      expect(mockLocation.href).toBe('http://localhost:3000/');
+    });
+  });
 });
diff --git a/shell/src/app/shell/composer-shell/composer-shell.ts b/shell/src/app/shell/composer-shell/composer-shell.ts
index b6e0339a..515e0740 100644
--- a/shell/src/app/shell/composer-shell/composer-shell.ts
+++ b/shell/src/app/shell/composer-shell/composer-shell.ts
@@ -33,6 +33,11 @@ import {LocalStorageKey} from '../../storage/models/local-storage-keys';
 import {LocalStorageInteractions} from '../../storage/local-storage-interactions/local-storage-interactions';
 import {SessionStorageInteractions} from '../../storage/session-storage-interactions/session-storage-interactions';
 
+import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
+import {StartupResolution} from '../startup-resolution/startup-resolution';
+import {StateSync} from '../../chat/state-sync/state-sync';
+import {QueryParser} from '../query-parser/query-parser';
+
 /**
  * The primary layout container for the A2UI Composer.
  * Renders the permanent header bar, persistent navigation sidebar,
@@ -51,6 +56,7 @@ import {SessionStorageInteractions} from '../../storage/session-storage-interact
     RouterLink,
     RouterLinkActive,
     MatTooltipModule,
+    MatSnackBarModule,
   ],
   templateUrl: './composer-shell.ng.html',
   styleUrl: './composer-shell.scss',
@@ -63,6 +69,9 @@ export class ComposerShell {
   private readonly storage = inject(LocalStorageInteractions);
   private readonly sessionStorage = inject(SessionStorageInteractions);
   private readonly configProvider = inject(AppConfigProvider);
+  private readonly startupResolution = inject(StartupResolution);
+  private readonly stateSync = inject(StateSync);
+  private readonly snackBar = inject(MatSnackBar);
   private readonly document = inject(DOCUMENT);
 
   activeCatalogTitle = this.catalogManagement.activeCatalogTitle;
@@ -99,6 +108,28 @@ export class ComposerShell {
     );
   }
 
+  /**
+   * Encodes active renderer URL and compressed A2UI active draft payload into shareable URL parameters
+   * and copies the result directly to the user's clipboard.
+   */
+  async shareDesign(): Promise<void> {
+    const rendererUrl = this.startupResolution.resolvedUrl() || '';
+    const activeDraft = this.stateSync.activeDraft() || '';
+    const compressed = await QueryParser.encodeSharedPayload(activeDraft);
+    const shareUrl = new URL(globalThis.location.href);
+    if (rendererUrl) {
+      shareUrl.searchParams.set('renderer', rendererUrl);
+    }
+    shareUrl.searchParams.set('a2ui', compressed);
+    try {
+      await globalThis.navigator.clipboard.writeText(shareUrl.toString());
+      this.snackBar.open('Shareable link copied to clipboard', 'Close', {duration: 3000});
+    } catch (err) {
+      console.error('Failed to copy shareable link:', err);
+      this.snackBar.open('Failed to copy link to clipboard', 'Close', {duration: 3000});
+    }
+  }
+
   /**
    * Flushes all local state caches (IndexedDB, localStorage) and reloads
    * the page to simulate a fresh hardware handshake connection.
@@ -109,7 +140,11 @@ export class ComposerShell {
     this.storage.removeItem(LocalStorageKey.EDITOR_CACHE);
     this.sessionStorage.clear();
     if (this.document.defaultView) {
-      this.document.defaultView.location.reload();
+      const url = new URL(this.document.defaultView.location.href);
+      url.searchParams.delete('a2ui');
+      url.searchParams.delete('renderer');
+      url.searchParams.delete('rendererId');
+      this.document.defaultView.location.href = url.toString();
     }
     console.log('Session state cleared.');
   }

From 712b6900a24d1911a30d3e960a049b5d1b679565 Mon Sep 17 00:00:00 2001
From: Jay Gindin <jgindin@google.com>
Date: Wed, 5 Aug 2026 11:47:44 -0400
Subject: [PATCH 6/9] Add Playwright E2E user journey test for Share Design
 workflow

---
 shell/e2e/samples.ts          | 294 ++++++++++++++++++++++++++++++++++
 shell/e2e/user-journey.e2e.ts |  49 ++++++
 2 files changed, 343 insertions(+)
 create mode 100644 shell/e2e/samples.ts

diff --git a/shell/e2e/samples.ts b/shell/e2e/samples.ts
new file mode 100644
index 00000000..ee3eec9e
--- /dev/null
+++ b/shell/e2e/samples.ts
@@ -0,0 +1,294 @@
+/**
+ * Compressed A2UI corresponding to the EV_CHARGE_CONTROL_A2UI.
+ */
+export const ELECTRIC_CAR_CHARGING_UI =
+  'a2ui=d1.vVhLj9s2EL7vrxgQ7c3wQ7HbRLfGKZA9FAWyRXIIAoGWaIuJRArkyM428H8vKNGORMm2JGt7szUPfjPzcTjk5weAHw8AAGTPlOZSEB_Ifj59Qybl51AxiuwpV1saMuJbbQCiy0-PkbFg-yCMqdpxsbOGxpQiTeSu1IgRM-3PZtTL-VSq3UxnLORbHlLkUsz28-DNbEM1DwNrNv2qpSCFr-MDwHFyE2qeRRTZWqaZFEyg7om2avfZfoWzh0KHF-ZKSjzb1W2NeC2TPBWOQsyTSDFRc11IYkYjpmraAATpRgehFEi5YIpUhF_Ov4-TayBb_NZhfpCHuvRrrpFvn41MZzRkbxkeGHMCoQnfFYkPmcCG_xtRBsgxYW6sVsbDU7mHBNriuh7uP-y7UzQ0X3wgf36EtWEDg7UUqGRSV9tTxWnpI_ZIP1BFTJcxPTbEgqZmkxEutrLrWg5XrqSAbrSTAvPFLdaP2j-jVaTWMDtXigmEJ6SYa6eOp_oX_CkUAqQbUtM5Tjqu9J5rlOr5yhJxqdGyxgAOVfCOta-ty5CqyCU8DU3LC5Q8DOH7JccO2KbYKY5xUNDGWPRf-2w6VsI2FJGp5yBhe5YE6G7Xwrbs2YGiyFo1Ir7nZt8tXIEBrodm_Aayjn2mTnaSUYyN_iwsN9WstkoV5vFiO1p0rduNzI0UgWVHqned4G9k9Nw1gPbC1nG_K3Wc8-o710WupOL_mh6Z9OF6SZk7ztA_lMxF20a82DMC5GnjiCwEmTwMGwXa3Y5UdOM3UCylXJhxqkvhQ5qZBtinEDb4F8DfyOpYsCtdfhiB-k1YGxSBRpkFium8ySAjVmyrmI4HtcAr3usRvc0RG0PP6eg5u2m2oEqiM8VT6hz-Np3NgrJ9uXBjljiNUih3u4StT_P-xVnh2DcVL9VGLXESunHOgR4AT6W-o07WxfVSRWxL8wRHKpVd0o6Xo1TqchQdbwcf3E1zY_CvjKWjXRGtz4RrHHRDqtoPBuUU82z6WFujbd49M9wqDSH1Rf-dx96TB44s7Tv3ttqOXV4lD83BtSr07il-0_sYzwG3ozJPMpeCCuV9hG74vq8DF-7GnlxrsY6H1U3dqFhLsv3_XGGCqZ176f9Z7VzR-gDWnzEtK9xXB-vwBebHRtgjEr0lkz1gP1Rz3-tt9h1F-peMWNLvaXZPk5zVwiF2WHJirF_Vjb_Xq1_t655zLlQuq6Zj2zWBIryXKYOnPGOqQOKO4M6FxweyXEHKhQaUsM0T5_mwvF_4QH6fLuHbJ5iBt5x_bBuY7MTnA3lCmUFzYq2U6MQOZy859S4amg_k7xDBW07Am3u_NR5VTCPxgfyy8KbLuSu19C6CnHrw7VMMNIpY44g_M8oH8iqGxSq9yK1rGOc3ML6erq5AfOVNF90gejEs5oMgLla30riaLq5gXK2m824YlzHMnTSef5_a3vHnFnz48h8';
+
+/**
+ * A2UI interface to display the charting status and history for an EV.
+ */
+export const EV_CHARGE_CONTROL_A2UI = `[
+  {
+    "version": "v0.9",
+    "createSurface": {
+      "surfaceId": "ev_charging",
+      "catalogId": "https://a2ui.org/specification/v0_9/basic_catalog.json"
+    }
+  },
+  {
+    "version": "v0.9",
+    "updateComponents": {
+      "surfaceId": "ev_charging",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": [
+            "header",
+            "tabs_container"
+          ]
+        },
+        {
+          "id": "header",
+          "component": "Row",
+          "justify": "spaceBetween",
+          "align": "center",
+          "children": [
+            "header_title",
+            "header_icon"
+          ]
+        },
+        {
+          "id": "header_title",
+          "component": "Text",
+          "text": "EV Charge Control",
+          "variant": "h2"
+        },
+        {
+          "id": "header_icon",
+          "component": "Icon",
+          "name": "info"
+        },
+        {
+          "id": "tabs_container",
+          "component": "Tabs",
+          "tabs": [
+            {
+              "title": "Current Status",
+              "child": "status_tab"
+            },
+            {
+              "title": "History",
+              "child": "history_tab"
+            }
+          ]
+        },
+        {
+          "id": "status_tab",
+          "component": "Column",
+          "children": [
+            "status_card",
+            "action_row"
+          ]
+        },
+        {
+          "id": "status_card",
+          "component": "Card",
+          "child": "status_card_content"
+        },
+        {
+          "id": "status_card_content",
+          "component": "Column",
+          "children": [
+            "battery_level_text",
+            "charging_rate_text",
+            "divider_1",
+            "stats_row"
+          ]
+        },
+        {
+          "id": "battery_level_text",
+          "component": "Text",
+          "text": {
+            "path": "/current/battery_level"
+          },
+          "variant": "h1"
+        },
+        {
+          "id": "charging_rate_text",
+          "component": "Text",
+          "text": {
+            "path": "/current/status_msg"
+          },
+          "variant": "body"
+        },
+        {
+          "id": "divider_1",
+          "component": "Divider",
+          "axis": "horizontal"
+        },
+        {
+          "id": "stats_row",
+          "component": "Row",
+          "justify": "spaceAround",
+          "children": [
+            "stat_time",
+            "stat_power"
+          ]
+        },
+        {
+          "id": "stat_time",
+          "component": "Text",
+          "text": {
+            "path": "/current/time_remaining"
+          },
+          "variant": "caption"
+        },
+        {
+          "id": "stat_power",
+          "component": "Text",
+          "text": {
+            "path": "/current/power"
+          },
+          "variant": "caption"
+        },
+        {
+          "id": "action_row",
+          "component": "Row",
+          "justify": "center",
+          "children": [
+            "btn_stop_resume",
+            "btn_refresh"
+          ]
+        },
+        {
+          "id": "btn_stop_resume",
+          "component": "Button",
+          "child": "btn_stop_text",
+          "variant": "primary",
+          "action": {
+            "event": {
+              "name": "toggleCharging"
+            }
+          }
+        },
+        {
+          "id": "btn_stop_text",
+          "component": "Text",
+          "text": {
+            "path": "/current/action_label"
+          }
+        },
+        {
+          "id": "btn_refresh",
+          "component": "Button",
+          "child": "btn_refresh_text",
+          "variant": "default",
+          "action": {
+            "event": {
+              "name": "refreshStatus"
+            }
+          }
+        },
+        {
+          "id": "btn_refresh_text",
+          "component": "Text",
+          "text": "Refresh"
+        },
+        {
+          "id": "history_tab",
+          "component": "Column",
+          "children": [
+            "history_list"
+          ]
+        },
+        {
+          "id": "history_list",
+          "component": "Column",
+          "children": {
+            "componentId": "history_card",
+            "path": "/history"
+          }
+        },
+        {
+          "id": "history_card",
+          "component": "Card",
+          "child": "history_item_content"
+        },
+        {
+          "id": "history_item_content",
+          "component": "Column",
+          "children": [
+            "history_row_1",
+            "history_row_2"
+          ]
+        },
+        {
+          "id": "history_row_1",
+          "component": "Row",
+          "justify": "spaceBetween",
+          "children": [
+            "history_date",
+            "history_cost"
+          ]
+        },
+        {
+          "id": "history_date",
+          "component": "Text",
+          "text": {
+            "path": "date"
+          },
+          "variant": "body"
+        },
+        {
+          "id": "history_cost",
+          "component": "Text",
+          "text": {
+            "path": "cost"
+          },
+          "variant": "body"
+        },
+        {
+          "id": "history_row_2",
+          "component": "Row",
+          "justify": "spaceBetween",
+          "children": [
+            "history_energy",
+            "history_duration"
+          ]
+        },
+        {
+          "id": "history_energy",
+          "component": "Text",
+          "text": {
+            "path": "energy"
+          },
+          "variant": "caption"
+        },
+        {
+          "id": "history_duration",
+          "component": "Text",
+          "text": {
+            "path": "duration"
+          },
+          "variant": "caption"
+        }
+      ]
+    }
+  },
+  {
+    "version": "v0.9",
+    "updateDataModel": {
+      "surfaceId": "ev_charging",
+      "value": {
+        "current": {
+          "battery_level": "85% Charged",
+          "status_msg": "Charging at Home Supercharger",
+          "time_remaining": "45 mins to full",
+          "power": "7.4 kW / 240V",
+          "action_label": "Stop Charging"
+        },
+        "history": [
+          {
+            "date": "Oct 24, 2026",
+            "cost": "$12.40",
+            "energy": "45.2 kWh added",
+            "duration": "3h 15m"
+          },
+          {
+            "date": "Oct 20, 2026",
+            "cost": "$8.50",
+            "energy": "32.1 kWh added",
+            "duration": "2h 10m"
+          },
+          {
+            "date": "Oct 15, 2026",
+            "cost": "$15.10",
+            "energy": "55.0 kWh added",
+            "duration": "4h 05m"
+          }
+        ]
+      }
+    }
+  }
+]`;
diff --git a/shell/e2e/user-journey.e2e.ts b/shell/e2e/user-journey.e2e.ts
index 1b92cdc8..6ec3c720 100644
--- a/shell/e2e/user-journey.e2e.ts
+++ b/shell/e2e/user-journey.e2e.ts
@@ -16,6 +16,7 @@
 
 import {test, expect} from '@playwright/test';
 import {WindowWithMonaco} from './types';
+import {ELECTRIC_CAR_CHARGING_UI, EV_CHARGE_CONTROL_A2UI} from './samples';
 
 test.beforeEach(async ({page}) => {
   page.on('pageerror', err => {
@@ -126,4 +127,52 @@ test.describe('E2E Workspace User Journey', () => {
     await expect(page.locator('.chat-history-log .bubble-text')).toHaveCount(0);
     await expect(page.locator('.chat-history-log .bubble-layout')).toHaveCount(1);
   });
+
+  test('verifies sharing design URL copies a2ui query param and loads payload on new page', async ({
+    context,
+    page,
+  }) => {
+    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+
+    await expect(page.locator('.header-title')).toContainText('A2UI Composer');
+
+    await page.waitForFunction(() => {
+      const monaco = (window as unknown as WindowWithMonaco).monaco;
+      return (monaco?.editor?.getModels()?.length ?? 0) > 0;
+    });
+
+    await page.evaluate(payload => {
+      const model = (window as unknown as WindowWithMonaco).monaco?.editor?.getModels()?.[0];
+      if (model) {
+        model.setValue(payload);
+      }
+    }, EV_CHARGE_CONTROL_A2UI);
+
+    await expect(page.locator('.header-title')).toContainText('A2UI Composer');
+    const shareButton = page.getByRole('button', {name: 'Share design'});
+    await expect(shareButton).toBeVisible();
+    await shareButton.click();
+
+    const snackbarLocator = page.locator('.mat-mdc-snack-bar-label').first();
+    await expect(snackbarLocator).toContainText('Shareable link copied to clipboard');
+
+    const shareUrl = await page.evaluate(() => navigator.clipboard.readText());
+    expect(shareUrl).toContain(ELECTRIC_CAR_CHARGING_UI);
+
+    // Open recipient page with copied link
+    const recipientPage = await context.newPage();
+    await recipientPage.goto(shareUrl);
+    await recipientPage.waitForLoadState('load');
+
+    const editorLocator = recipientPage
+      .locator('a2ui-composer-monaco-editor .monaco-editor')
+      .first();
+    await expect(editorLocator).toBeVisible();
+
+    const previewIframe = recipientPage
+      .frameLocator('.preview-frame iframe, iframe.preview-iframe, iframe')
+      .first();
+    await expect(previewIframe.locator('body')).toBeVisible({timeout: 10000});
+    await expect(previewIframe.locator('a2ui-v09-surface').first()).toBeVisible({timeout: 10000});
+  });
 });

From 5d74518f1b017590c52e002f7aca44918c386bd1 Mon Sep 17 00:00:00 2001
From: Jay Gindin <jgindin@google.com>
Date: Wed, 5 Aug 2026 17:01:55 -0400
Subject: [PATCH 7/9] Add license

---
 shell/e2e/samples.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/shell/e2e/samples.ts b/shell/e2e/samples.ts
index ee3eec9e..2f5f3739 100644
--- a/shell/e2e/samples.ts
+++ b/shell/e2e/samples.ts
@@ -1,3 +1,19 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /**
  * Compressed A2UI corresponding to the EV_CHARGE_CONTROL_A2UI.
  */

From c8f94f4016bde59fe0845c6b8ce11d596f2074f4 Mon Sep 17 00:00:00 2001
From: Jay Gindin <jgindin@google.com>
Date: Wed, 5 Aug 2026 18:16:18 -0400
Subject: [PATCH 8/9] Address PR feedback

---
 .../composer-shell/composer-shell.spec.ts     | 75 +++++++++++++++----
 .../shell/composer-shell/composer-shell.ts    | 13 +++-
 .../shell/query-parser/query-parser.spec.ts   | 21 +++++-
 .../app/shell/query-parser/query-parser.ts    | 41 +++++-----
 4 files changed, 114 insertions(+), 36 deletions(-)

diff --git a/shell/src/app/shell/composer-shell/composer-shell.spec.ts b/shell/src/app/shell/composer-shell/composer-shell.spec.ts
index 41d3c9d0..46d98332 100644
--- a/shell/src/app/shell/composer-shell/composer-shell.spec.ts
+++ b/shell/src/app/shell/composer-shell/composer-shell.spec.ts
@@ -33,6 +33,7 @@ import {signal, WritableSignal} from '@angular/core';
 import {LocalStorageInteractions} from '../../storage/local-storage-interactions/local-storage-interactions';
 import {LocalStorageKey} from '../../storage/models/local-storage-keys';
 import {SessionStorageInteractions} from '../../storage/session-storage-interactions/session-storage-interactions';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 import {StartupResolution} from '../startup-resolution/startup-resolution';
 import {StateSync} from '../../chat/state-sync/state-sync';
@@ -130,11 +131,25 @@ describe('ComposerShell Layout', () => {
     fixture = TestBed.createComponent(ComposerShell);
     fixture.detectChanges();
     harness = await TestbedHarnessEnvironment.harnessForFixture(fixture, ComposerShellHarness);
+
+    const injectedDocument = TestBed.inject(DOCUMENT);
+    const nav = injectedDocument.defaultView!.navigator;
+    const navProto = Object.getPrototypeOf(nav);
+    if (
+      !Object.getOwnPropertyDescriptor(nav, 'clipboard') &&
+      !Object.getOwnPropertyDescriptor(navProto, 'clipboard')
+    ) {
+      Object.defineProperty(navProto, 'clipboard', {
+        get: () => undefined,
+        configurable: true,
+      });
+    }
   });
 
   afterEach(() => {
     const injectedDocument = TestBed.inject(DOCUMENT);
     injectedDocument.body.classList.remove('dark-theme');
+    vi.restoreAllMocks();
   });
 
   it('creates the shell layout component via test harness', async () => {
@@ -295,26 +310,56 @@ describe('ComposerShell Layout', () => {
       startupResolutionMock.resolvedUrl.set('http://my-renderer.com');
       stateSyncMock.activeDraft.set('[{"version":"v0.9"}]');
       const writeTextSpy = vi.fn().mockResolvedValue(undefined);
-      Object.defineProperty(navigator, 'clipboard', {
-        value: {writeText: writeTextSpy},
-        configurable: true,
-        writable: true,
-      });
-      const component = fixture.componentInstance;
-      await component.shareDesign();
-      expect(writeTextSpy).toHaveBeenCalledWith(
-        expect.stringContaining('renderer=http%3A%2F%2Fmy-renderer.com'),
-      );
-      expect(writeTextSpy).toHaveBeenCalledWith(expect.stringContaining('a2ui=d1.'));
+      const document = TestBed.inject(DOCUMENT);
+      const nav = document.defaultView!.navigator;
+      const targetObj = Object.getOwnPropertyDescriptor(nav, 'clipboard')
+        ? nav
+        : Object.getPrototypeOf(nav);
+      const spy = vi.spyOn(targetObj, 'clipboard', 'get').mockReturnValue({
+        writeText: writeTextSpy,
+      } as unknown as Clipboard);
+
+      try {
+        const component = fixture.componentInstance;
+        await component.shareDesign();
+        expect(writeTextSpy).toHaveBeenCalledWith(
+          expect.stringContaining('renderer=http%3A%2F%2Fmy-renderer.com'),
+        );
+        expect(writeTextSpy).toHaveBeenCalledWith(expect.stringContaining('a2ui=d1.'));
+      } finally {
+        spy.mockRestore();
+      }
+    });
+
+    it('displays a snackbar warning when clipboard API is unavailable', async () => {
+      const snackBar = fixture.debugElement.injector.get(MatSnackBar);
+      const snackBarSpy = vi.spyOn(snackBar, 'open');
+      const document = TestBed.inject(DOCUMENT);
+      const navProto = Object.getPrototypeOf(document.defaultView!.navigator) as Navigator;
+      const spy = vi
+        .spyOn(navProto, 'clipboard', 'get')
+        .mockReturnValue(undefined as unknown as Clipboard);
+
+      try {
+        const component = fixture.componentInstance;
+        await component.shareDesign();
+        expect(snackBarSpy).toHaveBeenCalledWith('Clipboard API unavailable', 'Close', {
+          duration: 3000,
+        });
+      } finally {
+        spy.mockRestore();
+      }
     });
 
     it('resetSession strips share parameters from location href before setting href', async () => {
       const component = fixture.componentInstance;
-      const document = TestBed.inject(DOCUMENT);
       const mockLocation = {href: 'http://localhost:3000/?renderer=http://test.com&a2ui=d1.123'};
-      vi.spyOn(document, 'defaultView', 'get').mockReturnValue({
-        location: mockLocation as unknown as Location,
-      } as Window & typeof globalThis);
+
+      (component as unknown as Record<string, unknown>)['document'] = {
+        defaultView: {
+          location: mockLocation,
+        },
+      };
 
       await component.resetSession();
       expect(mockLocation.href).toBe('http://localhost:3000/');
diff --git a/shell/src/app/shell/composer-shell/composer-shell.ts b/shell/src/app/shell/composer-shell/composer-shell.ts
index 515e0740..da37c34d 100644
--- a/shell/src/app/shell/composer-shell/composer-shell.ts
+++ b/shell/src/app/shell/composer-shell/composer-shell.ts
@@ -113,16 +113,25 @@ export class ComposerShell {
    * and copies the result directly to the user's clipboard.
    */
   async shareDesign(): Promise<void> {
+    const href = this.document.defaultView?.location.href;
+    if (!href) {
+      return;
+    }
     const rendererUrl = this.startupResolution.resolvedUrl() || '';
     const activeDraft = this.stateSync.activeDraft() || '';
     const compressed = await QueryParser.encodeSharedPayload(activeDraft);
-    const shareUrl = new URL(globalThis.location.href);
+    const shareUrl = new URL(href);
     if (rendererUrl) {
       shareUrl.searchParams.set('renderer', rendererUrl);
     }
     shareUrl.searchParams.set('a2ui', compressed);
+    const clipboard = this.document.defaultView?.navigator?.clipboard;
+    if (!clipboard) {
+      this.snackBar.open('Clipboard API unavailable', 'Close', {duration: 3000});
+      return;
+    }
     try {
-      await globalThis.navigator.clipboard.writeText(shareUrl.toString());
+      await clipboard.writeText(shareUrl.toString());
       this.snackBar.open('Shareable link copied to clipboard', 'Close', {duration: 3000});
     } catch (err) {
       console.error('Failed to copy shareable link:', err);
diff --git a/shell/src/app/shell/query-parser/query-parser.spec.ts b/shell/src/app/shell/query-parser/query-parser.spec.ts
index 436e98ed..22d76ebe 100644
--- a/shell/src/app/shell/query-parser/query-parser.spec.ts
+++ b/shell/src/app/shell/query-parser/query-parser.spec.ts
@@ -85,10 +85,25 @@ describe('QueryParser', () => {
       expect(decoded).toBe(originalJson);
     });
 
-    it('returns null when decoding invalid base64url or corrupt deflate-raw payload', async () => {
+    it('returns empty string when encoding null, undefined, or empty payload', async () => {
+      expect(await QueryParser.encodeSharedPayload(null)).toBe('');
+      expect(await QueryParser.encodeSharedPayload(undefined)).toBe('');
+      expect(await QueryParser.encodeSharedPayload('')).toBe('');
+    });
+
+    it('returns null when decoding invalid, corrupt, or nullish deflate-raw payload', async () => {
       expect(await QueryParser.decodeSharedPayload('not-d1-prefixed')).toBeNull();
       expect(await QueryParser.decodeSharedPayload('d1.invalid_base64_content!!!')).toBeNull();
       expect(await QueryParser.decodeSharedPayload('d1.AAAA')).toBeNull();
+      expect(await QueryParser.decodeSharedPayload(null)).toBeNull();
+      expect(await QueryParser.decodeSharedPayload(undefined)).toBeNull();
+    });
+
+    it('correctly roundtrips a large payload (>100KB) without stack overflow', async () => {
+      const largePayload = JSON.stringify([{data: 'x'.repeat(150000)}]);
+      const encoded = await QueryParser.encodeSharedPayload(largePayload);
+      const decoded = await QueryParser.decodeSharedPayload(encoded);
+      expect(decoded).toBe(largePayload);
     });
   });
 
@@ -108,7 +123,9 @@ describe('QueryParser', () => {
       expect(parsed).toBe(rawJson);
     });
 
-    it('returns null when a2ui param is missing or invalid', async () => {
+    it('returns null when a2ui param is missing, invalid, or nullish', async () => {
+      expect(await QueryParser.parseSharedA2ui(null)).toBeNull();
+      expect(await QueryParser.parseSharedA2ui(undefined)).toBeNull();
       expect(await QueryParser.parseSharedA2ui('')).toBeNull();
       expect(await QueryParser.parseSharedA2ui('?other=value')).toBeNull();
       expect(await QueryParser.parseSharedA2ui('?a2ui=invalid-format')).toBeNull();
diff --git a/shell/src/app/shell/query-parser/query-parser.ts b/shell/src/app/shell/query-parser/query-parser.ts
index 099fbaa9..cfe40d22 100644
--- a/shell/src/app/shell/query-parser/query-parser.ts
+++ b/shell/src/app/shell/query-parser/query-parser.ts
@@ -64,17 +64,23 @@ export class QueryParser {
   /**
    * Compresses an A2UI JSON payload using deflate-raw and returns a URL-safe Base64 string prefixed with 'd1.'.
    */
-  static async encodeSharedPayload(jsonString: string): Promise<string> {
+  static async encodeSharedPayload(jsonString: string | null | undefined): Promise<string> {
+    if (!jsonString) {
+      return '';
+    }
     const bytes = new TextEncoder().encode(jsonString);
     const cs = new CompressionStream('deflate-raw');
     const writer = cs.writable.getWriter();
-    writer.write(bytes);
-    writer.close();
-    const buf = await new Response(cs.readable).arrayBuffer();
-    const base64Url = btoa(String.fromCharCode(...new Uint8Array(buf)))
-      .replace(/\+/g, '-')
-      .replace(/\//g, '_')
-      .replace(/=+$/, '');
+    const writePromise = writer.write(bytes).then(() => writer.close());
+    const responsePromise = new Response(cs.readable).arrayBuffer();
+    const [, buf] = await Promise.all([writePromise, responsePromise]);
+    const uint8 = new Uint8Array(buf);
+    const chunkSize = 8192;
+    let binaryString = '';
+    for (let i = 0; i < uint8.length; i += chunkSize) {
+      binaryString += String.fromCharCode(...uint8.subarray(i, i + chunkSize));
+    }
+    const base64Url = btoa(binaryString).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
     return `d1.${base64Url}`;
   }
 
@@ -82,8 +88,10 @@ export class QueryParser {
    * Decompresses a 'd1.'-prefixed Base64URL string back into an A2UI JSON string.
    * Returns null if the format is invalid or decompression fails.
    */
-  static async decodeSharedPayload(encodedPayload: string): Promise<string | null> {
-    if (!encodedPayload.startsWith('d1.')) {
+  static async decodeSharedPayload(
+    encodedPayload: string | null | undefined,
+  ): Promise<string | null> {
+    if (!encodedPayload || !encodedPayload.startsWith('d1.')) {
       return null;
     }
     try {
@@ -96,13 +104,9 @@ export class QueryParser {
       }
       const ds = new DecompressionStream('deflate-raw');
       const writer = ds.writable.getWriter();
-      const writePromise = writer
-        .write(bytes)
-        .then(() => writer.close())
-        .catch(() => {});
+      const writePromise = writer.write(bytes).then(() => writer.close());
       const responsePromise = new Response(ds.readable).arrayBuffer();
-      await Promise.all([writePromise, responsePromise]);
-      const buf = await responsePromise;
+      const [, buf] = await Promise.all([writePromise, responsePromise]);
       return new TextDecoder().decode(buf);
     } catch (err) {
       console.warn('Failed to decompress shared A2UI payload:', err);
@@ -114,7 +118,10 @@ export class QueryParser {
    * Parses the shared A2UI JSON payload from a query search string (?a2ui=...).
    * Supports both compressed ('d1.') and fallback uncompressed JSON strings.
    */
-  static async parseSharedA2ui(searchString: string): Promise<string | null> {
+  static async parseSharedA2ui(searchString: string | null | undefined): Promise<string | null> {
+    if (!searchString) {
+      return null;
+    }
     const params = new URLSearchParams(searchString);
     const candidate = params.get('a2ui');
     if (!candidate) {

From 8414851ce63b3f4236d873909a3bb29a43d710ac Mon Sep 17 00:00:00 2001
From: Jay Gindin <jgindin@google.com>
Date: Thu, 6 Aug 2026 09:41:45 -0400
Subject: [PATCH 9/9] Address PR feedback on payload compression and DOCUMENT
 injection

---
 .../shell/composer-shell/composer-shell.spec.ts  | 12 +++++-------
 .../app/shell/composer-shell/composer-shell.ts   | 16 ++++++++--------
 shell/src/app/shell/query-parser/query-parser.ts | 15 ++++++++++-----
 .../startup-resolution.spec.ts                   | 11 +++++++++++
 4 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/shell/src/app/shell/composer-shell/composer-shell.spec.ts b/shell/src/app/shell/composer-shell/composer-shell.spec.ts
index 46d98332..f29d73c7 100644
--- a/shell/src/app/shell/composer-shell/composer-shell.spec.ts
+++ b/shell/src/app/shell/composer-shell/composer-shell.spec.ts
@@ -352,15 +352,13 @@ describe('ComposerShell Layout', () => {
     });
 
     it('resetSession strips share parameters from location href before setting href', async () => {
-      const component = fixture.componentInstance;
+      const doc = TestBed.inject(DOCUMENT);
       const mockLocation = {href: 'http://localhost:3000/?renderer=http://test.com&a2ui=d1.123'};
+      vi.spyOn(doc, 'defaultView', 'get').mockReturnValue({
+        location: mockLocation,
+      } as unknown as Window & typeof globalThis);
 
-      (component as unknown as Record<string, unknown>)['document'] = {
-        defaultView: {
-          location: mockLocation,
-        },
-      };
-
+      const component = fixture.componentInstance;
       await component.resetSession();
       expect(mockLocation.href).toBe('http://localhost:3000/');
     });
diff --git a/shell/src/app/shell/composer-shell/composer-shell.ts b/shell/src/app/shell/composer-shell/composer-shell.ts
index da37c34d..2e285857 100644
--- a/shell/src/app/shell/composer-shell/composer-shell.ts
+++ b/shell/src/app/shell/composer-shell/composer-shell.ts
@@ -117,20 +117,20 @@ export class ComposerShell {
     if (!href) {
       return;
     }
-    const rendererUrl = this.startupResolution.resolvedUrl() || '';
-    const activeDraft = this.stateSync.activeDraft() || '';
-    const compressed = await QueryParser.encodeSharedPayload(activeDraft);
-    const shareUrl = new URL(href);
-    if (rendererUrl) {
-      shareUrl.searchParams.set('renderer', rendererUrl);
-    }
-    shareUrl.searchParams.set('a2ui', compressed);
     const clipboard = this.document.defaultView?.navigator?.clipboard;
     if (!clipboard) {
       this.snackBar.open('Clipboard API unavailable', 'Close', {duration: 3000});
       return;
     }
     try {
+      const rendererUrl = this.startupResolution.resolvedUrl() || '';
+      const activeDraft = this.stateSync.activeDraft() || '';
+      const compressed = await QueryParser.encodeSharedPayload(activeDraft);
+      const shareUrl = new URL(href);
+      if (rendererUrl) {
+        shareUrl.searchParams.set('renderer', rendererUrl);
+      }
+      shareUrl.searchParams.set('a2ui', compressed);
       await clipboard.writeText(shareUrl.toString());
       this.snackBar.open('Shareable link copied to clipboard', 'Close', {duration: 3000});
     } catch (err) {
diff --git a/shell/src/app/shell/query-parser/query-parser.ts b/shell/src/app/shell/query-parser/query-parser.ts
index cfe40d22..c596c022 100644
--- a/shell/src/app/shell/query-parser/query-parser.ts
+++ b/shell/src/app/shell/query-parser/query-parser.ts
@@ -19,6 +19,8 @@
  * from the window location query string, enforcing runtime constraints.
  */
 export class QueryParser {
+  private static readonly PAYLOAD_PREFIX = 'd1.';
+
   /** @nocollapse */
   static parseRendererUrl(searchString: string): string | null {
     const params = new URLSearchParams(searchString);
@@ -81,7 +83,7 @@ export class QueryParser {
       binaryString += String.fromCharCode(...uint8.subarray(i, i + chunkSize));
     }
     const base64Url = btoa(binaryString).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-    return `d1.${base64Url}`;
+    return `${QueryParser.PAYLOAD_PREFIX}${base64Url}`;
   }
 
   /**
@@ -91,11 +93,14 @@ export class QueryParser {
   static async decodeSharedPayload(
     encodedPayload: string | null | undefined,
   ): Promise<string | null> {
-    if (!encodedPayload || !encodedPayload.startsWith('d1.')) {
+    if (!encodedPayload || !encodedPayload.startsWith(QueryParser.PAYLOAD_PREFIX)) {
       return null;
     }
     try {
-      const rawBase64 = encodedPayload.slice(3).replace(/-/g, '+').replace(/_/g, '/');
+      const rawBase64 = encodedPayload
+        .slice(QueryParser.PAYLOAD_PREFIX.length)
+        .replace(/-/g, '+')
+        .replace(/_/g, '/');
       const padded = rawBase64 + '='.repeat((4 - (rawBase64.length % 4)) % 4);
       const binaryString = atob(padded);
       const bytes = new Uint8Array(binaryString.length);
@@ -127,8 +132,8 @@ export class QueryParser {
     if (!candidate) {
       return null;
     }
-    if (candidate.startsWith('d1.')) {
-      return await QueryParser.decodeSharedPayload(candidate);
+    if (candidate.startsWith(QueryParser.PAYLOAD_PREFIX)) {
+      return QueryParser.decodeSharedPayload(candidate);
     }
     if (candidate.startsWith('[') || candidate.startsWith('{')) {
       return candidate;
diff --git a/shell/src/app/shell/startup-resolution/startup-resolution.spec.ts b/shell/src/app/shell/startup-resolution/startup-resolution.spec.ts
index c98cfb84..91987ec0 100644
--- a/shell/src/app/shell/startup-resolution/startup-resolution.spec.ts
+++ b/shell/src/app/shell/startup-resolution/startup-resolution.spec.ts
@@ -22,6 +22,7 @@ import {MatButtonHarness} from '@angular/material/button/testing';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {provideNoopAnimations} from '@angular/platform-browser/animations';
 import {StartupResolution} from './startup-resolution';
+import {QueryParser} from '../query-parser/query-parser';
 import {OriginConfirmationDialog} from './origin-confirmation-dialog/origin-confirmation-dialog';
 import {LocalStorageInteractions} from '../../storage/local-storage-interactions/local-storage-interactions';
 import {LocalStorageKey} from '../../storage/models/local-storage-keys';
@@ -180,6 +181,16 @@ describe('StartupResolution', () => {
       expect(service.sharedA2uiPayload()).toBe(expectedPayload);
     });
 
+    it('parses compressed d1. payload and assigns decompressed JSON string to sharedA2uiPayload', async () => {
+      mockFetchConfig({});
+      const rawJson = '[{"version":"v0.9","createSurface":{"surfaceId":"test-compressed"}}]';
+      const compressed = await QueryParser.encodeSharedPayload(rawJson);
+      vi.spyOn(service, 'getWindowSearch').mockReturnValue(`?a2ui=${compressed}`);
+
+      await service.resolveStartupConfiguration();
+      expect(service.sharedA2uiPayload()).toBe(rawJson);
+    });
+
     it('leaves sharedA2uiPayload as null when ?a2ui is missing or invalid', async () => {
       mockFetchConfig({});
       vi.spyOn(service, 'getWindowSearch').mockReturnValue('');