Skip to content

Navigation Menu

Sign in
Appearance settings

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

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

feat: add workflow preview with CustomTextEditorProvider#357

Merged
breaking-brake merged 3 commits intomainbreaking-brake/cc-wf-studio:mainfrom
feat/workflow-previewbreaking-brake/cc-wf-studio:feat/workflow-previewCopy head branch name to clipboard
Jan 3, 2026
Merged

feat: add workflow preview with CustomTextEditorProvider#357
breaking-brake merged 3 commits intomainbreaking-brake/cc-wf-studio:mainfrom
feat/workflow-previewbreaking-brake/cc-wf-studio:feat/workflow-previewCopy head branch name to clipboard

Conversation

@breaking-brake
Copy link
Copy Markdown
Owner

Summary

Add visual preview functionality for workflow JSON files using VSCode's CustomTextEditorProvider.

  • When opening .vscode/workflows/*.json files, display a visual preview instead of raw JSON
  • Show floating tags: "Preview" label, "Before/After" badges for git diff view
  • Add "Edit" button to open workflow in Workflow Studio editor
  • Show loading overlay when opening workflow from preview
  • Detect git changes to show "After" badge on files with uncommitted changes

Changes

Extension

  • workflow-preview-editor-provider.ts: CustomTextEditorProvider for visual preview
  • open-editor.ts: Add prepareEditorForLoad and loadWorkflowIntoEditor functions

Webview

  • PreviewCanvas.tsx: Read-only React Flow canvas with floating tags
  • App.tsx: Handle preview mode and loading overlay

Shared

  • messages.ts: Add preview-related message types

Impact

  • Users can now visually preview workflow files directly in VSCode
  • Git diff view shows visual comparison with Before/After badges
  • Smooth UX with loading overlay when opening workflows

Testing

  • Manual E2E testing completed
  • Code quality checks passed (npm run check)
  • Build successful (npm run build)

🤖 Generated with Claude Code

breaking-brake and others added 3 commits January 3, 2026 13:50
- Add visual preview when opening workflow JSON files
- Show floating Preview/Before/After badges for git diff context
- Detect git changes to display After badge on modified files
- Add Edit button to open workflow in main editor
- Support 5 languages (EN, JA, KO, ZH-CN, ZH-TW)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Show loading overlay while workflow is being loaded from preview
- Add loading.openWorkflow translation key for 5 languages
- Add PREPARE_WORKFLOW_LOAD message to coordinate loading state

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Changed from execSync to execFileSync with array arguments
- Avoids shell escaping issues on Windows with special characters in paths

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@breaking-brake breaking-brake merged commit adc3081 into main Jan 3, 2026
3 checks passed
@breaking-brake breaking-brake deleted the feat/workflow-preview branch January 3, 2026 05:51
@breaking-brake breaking-brake mentioned this pull request Jan 3, 2026
braking-brake-semantic-release Bot pushed a commit that referenced this pull request Jan 3, 2026
## [3.12.0](v3.11.3...v3.12.0) (2026-01-03)

### Features

* add workflow preview with CustomTextEditorProvider ([#357](#357)) ([adc3081](adc3081))
@braking-brake-semantic-release
Copy link
Copy Markdown

🎉 This PR is included in version 3.12.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Morty Proxy This is a proxified and sanitized view of the page, visit original site.