Feature/homescreen webview#12

Open

njb90 wants to merge 72 commits intomainfrom

feature/homescreen-webview

Collaborator

njb90 commented Apr 7, 2026

Summary

This PR introduces the new homescreen dashboard for the Cloudinary VS Code extension, replacing the previous placeholder with a fully interactive sidebar panel.

Homescreen dashboard

Branded header with cloud name, folder mode (Dynamic/Fixed), connection status pill, and a gear button to open the credentials config file
Inline search input that submits directly to the media library — the toolbar search command now focuses the dashboard search instead of showing a VS Code input dialog
Environment switcher button, shown only when 2+ environments are configured
Configure AI Tools accordion for installing Cloudinary agent skills and MCP servers across multiple AI platforms (Claude Code, Copilot, Windsurf, Universal)
Reworked welcome guide focused solely on initial credential setup, with links to docs

AI Tools accordion

Detects the active editor platform and pre-selects it as the primary target
Shows install/configured status for each skill and MCP server; already-installed items are locked (checked + disabled)
Multi-platform checklist for targeting additional editors in a single apply
Live progress ticks per item during installation; reloads status after apply

Engineering

Extracted aiToolsService.ts with all business logic (skill fetching, platform detection, MCP config writing, installation) decoupled from the webview
Extracted homescreen inline CSS into media/styles/homescreen.css; added additionalStyles support to createWebviewDocument
Webviews refresh automatically when the active environment changes
CI workflow to build and upload an installable .vsix artifact on pull request

Test plan

Open the sidebar on a freshly configured environment — verify header shows cloud name, folder mode, and green Connected pill
Open without credentials — verify amber Setup needed state and Configure banner
Type in the search box and press Enter — verify library opens with results filtered
Press Escape in search — verify query clears and library resets
Click the toolbar search button from the library view — verify it switches back to homescreen and focuses the search input
With 2+ environments in ~/.cloudinary/environments.json, verify the Switch Environment button appears
Click the gear icon — verify the credentials config file opens
Expand Configure AI Tools, check skills/MCP servers, click Apply — verify installation progress ticks and status reloads
Switch environment — verify the homescreen header updates correctly
Install the .vsix artifact from CI and smoke-test all of the above in a clean VS Code install

njb90 and others added 30 commits

March 30, 2026 12:40


          docs: add homescreen webview design spec

f479991

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          docs: add homescreen webview implementation plan

f4ac489

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          build: add homescreen client script entry to esbuild


          feat: add homescreen client script

cb1e1c4


          feat: add HomescreenViewProvider

93e3d8f


          feat: register showHomescreen and showLibrary commands

bed8fd4


          feat: register homescreen view and navigation commands in package.json

f7dfc2d


          feat: wire up HomescreenViewProvider in extension activation

4e5e37f


          fix: use initCommon() in homescreen client script for pattern consist…

8002ff3

…ency


          fix: show homescreen by default before extension activates

782f8c6


          fix: use addEventListener instead of onclick to comply with CSP

accf5f1


          fix: initialize VS Code API before registering DOM event listeners

31a00f5


          feat: redesign homescreen with Cloudinary branding and AI tools place…

3fa3e3f

…holder


          docs: add env-switch webview refresh design spec

5b50129


          docs: add env-switch webview refresh implementation plan

bebca31


          feat: add onDidChangeEnvironment event to CloudinaryTreeDataProvider

48b6c48


          feat: add refresh() to HomescreenViewProvider

43cf622


          feat: export resetUploadPanel for environment change handling

a0efcc3


          feat: export resetAllPreviewPanels for environment change handling

af0417e


          feat: wire up webview refresh on environment switch

b475aac

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          fix: null out uploadPanel synchronously before reopening in resetUplo…

d835da9

…adPanel


          fix: show cloud name in upload panel title, fetch presets on env swit…

c64b866

…ch, fix preview placeholder layout


          fix: close upload and preview panels on env switch instead of in-plac…

b89c472

…e update


          fix: use tabGroups API to close preview panels on env switch

f06ba00


          feat: close preview panels and fix homescreen refresh on env switch

3712ae6

- resetAllPreviewPanels now disposes panels via the openPanels Map
- HomescreenViewProvider clears _webviewView on dispose so refresh()
  no-ops safely instead of throwing "Webview is disposed" and halting
  the onDidChangeEnvironment callback

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          docs: add Configure AI Tools design spec

c120446

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          docs: use detectEditor() to pre-select IDE target in skills picker

46197cd

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          docs: add Configure AI Tools implementation plan

c2d213d

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          feat: add configureAiTools command with GitHub skill fetch and IDE-sp…

8b54a4b

…ecific installation


          fix: correct dir name usage, dedup copilot sections, per-file ref err…

…or handling

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

njb90 and others added 29 commits

April 1, 2026 16:30


          docs: add webview accordion implementation plan

fbf0cf2


          refactor: extract AI tools business logic into aiToolsService

a8f78f8

Move all types, helpers, and installation logic from configureAiTools.ts
into a new src/aiToolsService.ts so the webview provider can also import it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          feat: add accordion HTML and CSS to homescreen sidebar

cc301c8


          feat: add aiToolsExpanded and installAiTools message handlers to Home…

0a2e679

…screenViewProvider


          fix: await async message handlers to prevent floating promises

b984692


          feat: rewrite homescreen client with AI tools accordion state machine

7f91537


          fix: add HTML escaping and null safety to homescreen client

3c5d378


          fix: add data-command attributes to action buttons and chevron open CSS

638c70c


          fix: add click listener for configure button

e074608


          docs: add multi-platform accordion redesign spec

75f045c


          docs: add multi-platform accordion implementation plan

c58e3df


          feat: add PlatformId types, installForUniversal/Windsurf, detectActiv…

dc96cf2

…ePlatforms

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          style: fix quote style and formatting in new install functions

3eac643

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          feat: replace IDE segmented control with platform checklist in homesc…

618b674

…reen webview

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          fix: map QuickPick IDE labels to PlatformId for readInstalledSkillDir…

cf66fc7

…Names


          fix: detect internal install errors and drop stale Cursor status mapping

31e94c4

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          feat: replace IDE selector with multi-platform checklist in homescree…

7db2205

…n client


          feat: lock installed skills and show uninstall hint

8e3850e


          feat: lock configured MCP servers and platforms with existing installs

24cfeac


          feat: simplify to primary platform status with optional additional pl…

596ae4c

…atforms


          fix: don't pre-check unconfigured MCP servers

2c317c4


          feat: reload status after apply instead of showing done state


          fix: reset Apply button text on data reload

27d9661


          feat: rework homescreen dashboard with search, env switcher, and AI t…

cc51261

…ools panel

- Add inline search input to dashboard that focuses when triggering the
  search command from the library toolbar (replaces VS Code input dialog)
- Add environment switcher button when 2+ environments are configured
- Show folder mode (Dynamic/Fixed) subtitle under the cloud name
- Add gear button in the header bottom row to open the credentials config
- Rework welcome guide to focus on initial setup only; remove MCP/AI tool
  setup guides and simplify to credential configuration steps
- Extract all homescreen inline CSS into media/styles/homescreen.css;
  add additionalStyles support to createWebviewDocument/WebviewDocumentOptions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          ci: add workflow to build installable VSIX from feature branches

c533236

Runs on every push to non-main branches: lints, packages the extension
with vsce, and uploads the .vsix as a downloadable artifact (14-day retention).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          ci: fix vsix build trigger and branch name sanitization

f59145b

- Trigger on pull_request instead of all non-main pushes
- Sanitize branch name (replace / with -) to avoid path errors in the
  output filename; switch to @vscode/vsce (vsce is deprecated)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          chore: exclude docs/superpowers from git

ebb1d3f

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          ci: stamp pre-release version in vsix build

4fede44

Patch package.json version to <version>-pr.<number> before packaging
so the test vsix is clearly distinguishable from the released version.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>


          ci: post vsix download link as a PR comment

662b962

Adds a github-script step that creates or updates a single comment on
the PR with the artifact link and install instructions after each build.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions bot commented Apr 7, 2026

📦 Test VSIX ready

Version: 0.1.3-pr.12
Artifact: cloudinary-feature-homescreen-webview

To install:

Download the .vsix from the link above (under Artifacts)
In VS Code: Extensions → ··· → Install from VSIX…
or run: code --install-extension cloudinary-feature-homescreen-webview.vsix

Updated on every push. Artifact expires after 14 days.

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

Labels

None yet