feat(onboarding): Stage 0 model-setup webview panel

[jeonghun-jj-lee]

Summary

Implements #433 — the non-agentic model-setup webview that configures an LLM provider before chat can open.

What's included

• OnboardingPanel host (src/onboarding_panel.ts): singleton WebviewPanel with CSP, brand CSS, message routing
• Provider data map: data-driven PROVIDER_MODELS (anthropic, openai, google, amazon-bedrock) — no hard-coded conditionals
• testConnection: makes exactly one LLM call to validate credentials; returns ok/error without leaking the API key
• writeOnboardingConfig: merge-safe config write to ~/.config/opencode/opencode.json
• onOnboardingComplete event: downstream wiring point for Slice 2 (auto-open chat)
• Webview bundle (src/onboarding_webview.ts): welcome animation (~2.5s fade-in → dissolve) then form with progressive disclosure
• esbuild target added for the onboarding webview IIFE bundle

Acceptance Criteria coverage

AC	Status
1. Panel opens programmatically	Tested
2. Animation plays first	Implemented + HTML test
3. Form: provider/key/model/test	Implemented
4. Test connection = one LLM call	Tested (mock)
5. Config written on success	Tested (real fs)
6. Panel closes on success	Implemented + tested
7. Event emitted for downstream	Tested
8. No other LLM calls	Tested (no leak)
9. Animation plays once	Implemented (flag)
10. Error handling	Tested (retry, inline error)

Tests

19 unit tests in test/onboarding_panel.test.ts — all passing.

Closes #433

Summary by CodeRabbit

• New Features

  • Added an onboarding panel to configure an LLM provider, model, and API key.
  • Added provider connection testing with clear success and error feedback.
  • Added automatic configuration saving while preserving existing settings.
  • Added a guided webview experience with provider and model selection.

• Bug Fixes

  • Added validation to prevent incomplete or invalid configuration submissions.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 5aab3918-d1fe-4158-8033-79020fdf6ec1

📥 Commits

Reviewing files that changed from the base of the PR and between b0b6908 and cc5ce89.

📒 Files selected for processing (4)

• packages/extension/esbuild.config.mjs
• packages/extension/src/onboarding_panel.ts
• packages/extension/src/onboarding_webview.ts
• packages/extension/test/onboarding_panel.test.ts

---

📝 Walkthrough

Walkthrough

The extension adds an onboarding panel and webview for selecting a provider and model, testing credentials, writing merged configuration, and signaling completion. The webview is bundled through esbuild and covered by Vitest tests.

Changes

Onboarding setup

Layer / File(s)	Summary
Provider metadata and configuration persistence packages/extension/src/onboarding_panel.ts, packages/extension/test/onboarding_panel.test.ts	Provider/model mappings are defined for four providers. Configuration writing creates directories, merges existing JSON, stores the selected credentials and model, and handles invalid existing files.
Connection testing and panel lifecycle packages/extension/src/onboarding_panel.ts, packages/extension/test/onboarding_panel.test.ts	The panel performs provider-specific connection requests, reports failures, manages a singleton panel, closes after success, and emits completion events.
Webview interaction and build delivery packages/extension/src/onboarding_webview.ts, packages/extension/src/onboarding_panel.ts, packages/extension/esbuild.config.mjs, packages/extension/test/onboarding_panel.test.ts	The webview displays the welcome animation and configuration form, validates required fields, sends test requests, displays results, and reports successful configuration. Esbuild produces the browser IIFE with sourcemaps for normal and watch builds. Webview HTML tests verify the script, injected provider data, animation, and CSP nonce.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant OnboardingWebview
  participant OnboardingPanel
  participant ProviderAPI
  participant ConfigFile
  participant CompletionListener
  OnboardingWebview->>OnboardingPanel: submit connection test configuration
  OnboardingPanel->>ProviderAPI: send provider-specific validation request
  ProviderAPI-->>OnboardingPanel: return connection result
  OnboardingPanel-->>OnboardingWebview: return test result
  OnboardingWebview->>OnboardingPanel: send config-success after successful test
  OnboardingPanel->>ConfigFile: merge provider, model, API key, and schema
  OnboardingPanel->>CompletionListener: emit onboarding completion

Loading

Possibly related issues

• #359: The changes implement the Stage 0 provider, model, and API-key setup portion of the broader onboarding objective.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch jeonghun-jj-lee/433-stage0-model-setup-webview

---

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