improvement: add preview button to sample workflow list by breaking-brake · Pull Request #761 · breaking-brake/cc-wf-studio

breaking-brake · May 5, 2026

Summary

Add a "Preview" button to the left of the "Load" button on each sample workflow card so users can inspect a sample without applying it to the canvas.

What Changed

Each sample card in the Sample Workflow dialog previously offered only a "Load" action that immediately applied the sample to the active canvas. Users had no way to review what a sample contained before committing to it. A new "Preview" button now opens the sample in a full-size WorkflowOverview overlay (the same pattern used for AI editing previews) so users can inspect the workflow before deciding to load.

Before

Sample card showed a single "Load" button (and full-card click) that applied the sample directly to the canvas.
No way to see node graph / instructions for a sample before loading.

After

Sample card shows "Preview" + "Load" buttons (Preview on the left).
Clicking Preview fetches the sample without applying it and renders WorkflowOverview in a nested overlay (z-index 10002).
Closing the overlay (ESC / X / overlay click) returns to the sample list; the parent dialog stays open.
"Load" and full-card click keep their existing behavior.

Changes

src/shared/types/messages.ts - Add PreviewSampleWorkflowRequestPayload / SampleWorkflowPreviewLoadedPayload and wire PREVIEW_SAMPLE_WORKFLOW / SAMPLE_WORKFLOW_PREVIEW_LOADED into the message unions.
src/extension/commands/load-sample-workflow.ts - Extract sample-file resolution into resolveAndReadSample helper; refactor loadSampleWorkflow to use it; add new previewSampleWorkflow that returns the workflow without applying it.
src/extension/commands/open-editor.ts - Import previewSampleWorkflow and handle the PREVIEW_SAMPLE_WORKFLOW message.
src/webview/src/components/dialogs/SampleWorkflowDialog.tsx - Add Preview button (secondary style) left of Load, request preview via the new message, render WorkflowOverview in a nested z-index 10002 Radix Dialog overlay, reset preview state on parent close. Reuses dialog.diffPreview.closeOverview translation; "Preview" is hardcoded (no new i18n keys).

Testing

npm run check passes (pre-existing WorkflowEditor.tsx lint warnings unrelated to this change)
npm run build passes (webview + extension)
Manual E2E in VSCode Extension Development Host: Preview + Load buttons render with Preview on the left
Manual E2E: Click Preview on each sample; Overview opens with the workflow rendered
Manual E2E: ESC / X / overlay click closes the Overview and returns to the sample list (parent dialog stays open)
Manual E2E: Load button still applies the sample to the canvas; full-card click unchanged
Manual E2E: Closing the parent dialog while previewing resets state cleanly
Manual E2E: All 5 locales (en/ja/ko/zh-CN/zh-TW) show locale-matched sample content in Preview

🤖 Generated with Claude Code

Summary by CodeRabbit

New Features
- Added workflow preview functionality. Users can now preview sample workflows before loading them via a new "Preview" button on each sample card, displaying the workflow structure in a dedicated overlay dialog.

- Add Preview button next to Load button on each sample card - New PREVIEW_SAMPLE_WORKFLOW message that fetches without applying - Render WorkflowOverview in a nested z-index 10002 overlay Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

coderabbitai · May 5, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6b7ee118-2f8f-48d5-83db-3a8d2902c778

📥 Commits

Reviewing files that changed from the base of the PR and between 32992c8 and aba7d4f.

📒 Files selected for processing (4)

src/extension/commands/load-sample-workflow.ts
src/extension/commands/open-editor.ts
src/shared/types/messages.ts
src/webview/src/components/dialogs/SampleWorkflowDialog.tsx

📝 Walkthrough

Walkthrough

The PR adds workflow preview functionality to the sample workflow selection dialog. It refactors sample resolution into a shared helper, introduces new message types for preview requests and responses, wires preview request handling in the extension, and implements a preview UI overlay in the dialog component.

Changes

Sample Workflow Preview Feature

Layer / File(s)	Summary
Helper Refactoring `src/extension/commands/load-sample-workflow.ts`	Introduces `resolveAndReadSample()` helper that centralizes sampleId validation, locale-aware file selection, path traversal checks, and JSON parsing. Both `loadSampleWorkflow()` and `previewSampleWorkflow()` now delegate to this shared helper and handle failures via early `ERROR` posts.
Message Types `src/shared/types/messages.ts`	Adds `PreviewSampleWorkflowRequestPayload` and `SampleWorkflowPreviewLoadedPayload` types. Updates `WebviewMessage` and `ExtensionMessage` unions to include `PREVIEW_SAMPLE_WORKFLOW` request and `SAMPLE_WORKFLOW_PREVIEW_LOADED` response messages.
Command Wiring `src/extension/commands/open-editor.ts`	Imports `previewSampleWorkflow` and adds a new `PREVIEW_SAMPLE_WORKFLOW` message handler that validates `sampleId`, invokes the preview command, and replies with `VALIDATION_ERROR` if payload is missing.
UI Implementation `src/webview/src/components/dialogs/SampleWorkflowDialog.tsx`	Adds preview state tracking (`previewWorkflow`, `previewLoadingId`). Extends message listener to handle `SAMPLE_WORKFLOW_PREVIEW_LOADED`. Each sample card gains a "Preview" button that posts `PREVIEW_SAMPLE_WORKFLOW`. New Radix dialog overlay renders `WorkflowOverview` with close button and escape-key handling.

Sequence Diagram

sequenceDiagram
    actor User
    participant Webview as Webview<br/>(SampleWorkflowDialog)
    participant Ext as Extension<br/>(open-editor)
    participant Helper as Helper<br/>(load-sample-workflow)
    
    User->>Webview: Clicks Preview button
    Webview->>Ext: Posts PREVIEW_SAMPLE_WORKFLOW<br/>{ sampleId }
    Ext->>Helper: Calls previewSampleWorkflow()
    Helper->>Helper: Validates sampleId<br/>Resolves locale-matched file<br/>Reads & parses JSON
    alt Helper succeeds
        Helper-->>Ext: Returns { ok: true, parsed, selected }
        Ext->>Webview: Posts SAMPLE_WORKFLOW_PREVIEW_LOADED<br/>{ sampleId, workflow }
        Webview->>Webview: Matches sampleId<br/>Populates preview state
        User->>Webview: Sees preview in overlay
    else Helper fails
        Helper-->>Ext: Returns { ok: false, message }
        Ext->>Webview: Posts ERROR<br/>{ message }
        Webview->>User: Displays error message
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

breaking-brake/cc-wf-studio#760: Implements locale-tagged sample files and locale-aware selection logic that the refactored resolveAndReadSample() helper now centralizes.
breaking-brake/cc-wf-studio#756: Adds the WorkflowOverview component that renders preview workflows in the overlay dialog introduced here.
breaking-brake/cc-wf-studio#719: Modifies the same sample-workflow loading and webview message paths, making it a predecessor or sibling feature.

Poem

🐰 A preview button hops onto the card,
The helper validates, path-checks stand guard,
From extension to webview, the workflow takes flight,
In a fresh overlay, the sample shines bright! ✨

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch improvement/sample-workflow-preview-button

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

## [3.34.1](v3.34.0...v3.34.1) (2026-05-05) ### Improvements * add daily dev flow with git worktree sample ([#760](#760)) ([32992c8](32992c8)) * add preview button to sample workflow list ([#761](#761)) ([778c196](778c196)) * disable source maps in production builds ([#758](#758)) ([b4af393](b4af393))

braking-brake-semantic-release · May 5, 2026

🎉 This PR is included in version 3.34.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

breaking-brake merged commit 778c196 into main May 5, 2026
2 checks passed

breaking-brake mentioned this pull request May 5, 2026

Release: v3.34.1 #762

Merged

braking-brake-semantic-release Bot added the released label May 5, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

improvement: add preview button to sample workflow list#761

improvement: add preview button to sample workflow list#761
breaking-brake merged 1 commit intomainbreaking-brake/cc-wf-studio:mainfrom
improvement/sample-workflow-preview-buttonbreaking-brake/cc-wf-studio:improvement/sample-workflow-preview-buttonCopy head branch name to clipboard

breaking-brake commented May 5, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

Uh oh!

coderabbitai Bot commented May 5, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

braking-brake-semantic-release Bot commented May 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Search code, repositories, users, issues, pull requests...

Conversation

breaking-brake commented May 5, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What Changed

Before

After

Changes

Testing

Summary by CodeRabbit

Uh oh!

Uh oh!

coderabbitai Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

braking-brake-semantic-release Bot commented May 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

breaking-brake commented May 5, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 5, 2026 •

edited

Loading