🐛 Fix storybook story URL capture and add preview upload (#229)

## Summary

- **Fix story URL in screenshot properties:** `captureAndSendScreenshot`
was sending the `iframe.html?id=...` URL (what Playwright navigates to)
as the `url` property. This URL doesn't render in iframes on the
dashboard. Now converts it to the proper Storybook story path format
(`?path=/story/...`) via a new `toStoryUrl()` helper.
- **Add preview upload to Storybook CI:** Added an "Upload preview" step
to the Storybook SDK E2E workflow, matching what the static-site SDK
already does.
- **Fix test mocks:** Updated `screenshot.test.js` mocks to use the real
`iframe.html` URL (matching what `page.url()` actually returns) and
added `story.id` to mock objects. Added tests for the new `toStoryUrl`
function.

## Test plan

- [x] `screenshot.test.js` — all 11 tests pass
- [ ] Verify story URLs render correctly in Vizzly dashboard iframes
- [ ] Verify Storybook preview upload works in CI

Author: Robdel12

.github/workflows/sdk-e2e.yml

@@ -187,6 +187,13 @@ jobs:
           VIZZLY_COMMIT_MESSAGE: ${{ github.event.pull_request.head.commit.message || github.event.head_commit.message }}
           VIZZLY_COMMIT_SHA: ${{ github.event.pull_request.head.sha || github.event.head_commit.id }}
 
+      - name: Upload preview
+        if: success()
+        working-directory: ./clients/storybook
+        run: ../../bin/vizzly.js preview example-storybook/dist
+        env:
+          VIZZLY_TOKEN: ${{ secrets.VIZZLY_STORYBOOK_CLIENT_TOKEN }}
+
   # Static-Site SDK
   static-site:
     name: Static-Site SDK

clients/storybook/src/screenshot.js

@@ -15,6 +15,11 @@ try {
   vizzlyScreenshot = async () => {};
 }
 
+/** @internal Replace vizzlyScreenshot for testing */
+export function _setVizzlyScreenshot(fn) {
+  vizzlyScreenshot = fn;
+}
+
 /**
  * Generate screenshot name from story and viewport
  * Format: "ComponentName-StoryName@viewportName"

clients/storybook/tests/screenshot.test.js

@@ -5,6 +5,7 @@
 import assert from 'node:assert/strict';
 import { describe, it, mock } from 'node:test';
 import {
+  _setVizzlyScreenshot,
   captureAndSendScreenshot,
   captureScreenshot,
   generateScreenshotName,
@@ -86,24 +87,40 @@ describe('captureScreenshot', () => {
 });
 
 describe('captureAndSendScreenshot', () => {
-  it('should capture and send screenshot to vizzly', async () => {
+  it('should send the iframe URL for isolated story preview', async () => {
+    let mockVizzly = mock.fn(async () => {});
+    _setVizzlyScreenshot(mockVizzly);
+
     let mockBuffer = Buffer.from('fake-screenshot');
-    let mockScreenshot = mock.fn(() => mockBuffer);
-    let mockPage = { screenshot: mockScreenshot, url: () => 'http://localhost:6006/?path=/story/button--primary' };
-    let story = { title: 'Button', name: 'Primary' };
+    let iframeUrl =
+      'http://localhost:6006/iframe.html?id=button--primary&viewMode=story';
+    let mockPage = {
+      screenshot: mock.fn(() => mockBuffer),
+      url: () => iframeUrl,
+    };
+    let story = { id: 'button--primary', title: 'Button', name: 'Primary' };
     let viewport = { name: 'desktop' };
 
-    // This will use the mock vizzlyScreenshot from the module
     await captureAndSendScreenshot(mockPage, story, viewport);
 
-    assert.equal(mockScreenshot.mock.calls.length, 1);
+    assert.equal(mockVizzly.mock.calls.length, 1);
+    let [name, , options] = mockVizzly.mock.calls[0].arguments;
+    assert.equal(name, 'Button-Primary@desktop');
+    assert.equal(options.properties.url, iframeUrl);
   });
 
   it('should pass screenshot options through', async () => {
+    let mockVizzly = mock.fn(async () => {});
+    _setVizzlyScreenshot(mockVizzly);
+
     let mockBuffer = Buffer.from('fake-screenshot');
     let mockScreenshot = mock.fn(() => mockBuffer);
-    let mockPage = { screenshot: mockScreenshot, url: () => 'http://localhost:6006/?path=/story/card--default' };
-    let story = { title: 'Card', name: 'Default' };
+    let mockPage = {
+      screenshot: mockScreenshot,
+      url: () =>
+        'http://localhost:6006/iframe.html?id=card--default&viewMode=story',
+    };
+    let story = { id: 'card--default', title: 'Card', name: 'Default' };
     let viewport = { name: 'mobile' };
 
     await captureAndSendScreenshot(mockPage, story, viewport, {