webview-bridge

Webview ↔ extension host bridge

Architecture

• Types: webview-ui/types/messages.ts defines WebviewMessage (webview → host), ExtensionMessage (host → webview), and SkillManagerState.
• Webview: webview-ui/hooks/useVsCodeApi.ts exposes acquireVsCodeApi(); call postMessage(payload) with a WebviewMessage object.
• Host: Two providers mirror the same handleMessage switch:
  • src/panels/SkillManagerSidebarProvider.ts
  • src/panels/SkillManagerPanel.ts

Errors in handlers are caught, logged, and surfaced as { type: "error", message: string } to the webview.

Workflow: add a new webview → host message

1. Extend the union in webview-ui/types/messages.ts:

   export type WebviewMessage =
     | { type: "ready" }
     // ...
     | { type: "yourAction"; foo: string };
   

2. Handle it in both panels — add a case in handleMessage in SkillManagerSidebarProvider and SkillManagerPanel (keep them in sync). Pattern from the sidebar:

  private async handleMessage(message: WebviewMessage): Promise<void> {
    switch (message.type) {
      case "ready":
      case "getState":
        await this.postState();
        break;
      case "searchCatalog": {
        await handleGithubSearchCatalog(
          this.configService,
          this.repoService,
          this.catalogStore,
          message.query,
          (msg) => this.view?.webview.postMessage(msg)
        );
        await this.postState();
        break;
      }
    }
  }

1. Send from React: useVsCodeApi().postMessage({ type: "yourAction", foo: "bar" }).

2. Host → webview: If the UI needs new push updates, extend ExtensionMessage and post from the host with webview.postMessage(...). Existing examples: setState, syncComplete, browseUpdate, catalogSearchResults, recommendationsResult, error.