fix(devtools): QA feedbacks on the realistic UI preview

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ name: CI
 on:
   pull_request:
   push:
-    branches: [main, v0, v1]
+    branches: [main, v0, v1, v2]
   workflow_dispatch:
 
 jobs:

.github/workflows/publish.yml

@@ -61,6 +61,10 @@ jobs:
             echo "version=0.0.0-next.${GITHUB_SHA::7}" >> "$GITHUB_OUTPUT"
             echo "tag=next" >> "$GITHUB_OUTPUT"
             echo "✅ Next version: 0.0.0-next.${GITHUB_SHA::7}"
+          elif [ "${{ github.ref }}" = "refs/heads/v2" ]; then
+            echo "version=2.0.0-alpha.${GITHUB_SHA::7}" >> "$GITHUB_OUTPUT"
+            echo "tag=alpha" >> "$GITHUB_OUTPUT"
+            echo "✅ Alpha version: 2.0.0-alpha.${GITHUB_SHA::7}"
           else
             echo "version=0.0.0-dev.${GITHUB_SHA::7}" >> "$GITHUB_OUTPUT"
             echo "tag=dev" >> "$GITHUB_OUTPUT"
@@ -71,6 +75,10 @@ jobs:
         working-directory: ./packages/core
         run: pnpm version ${{ steps.version.outputs.version }} --no-git-tag-version
 
+      - name: Setting version for vite-plugin
+        working-directory: ./packages/vite-plugin
+        run: pnpm version ${{ steps.version.outputs.version }} --no-git-tag-version
+
       - name: Setting version for create-skybridge
         working-directory: ./packages/create-skybridge
         run: pnpm version ${{ steps.version.outputs.version }} --no-git-tag-version
@@ -79,25 +87,39 @@ jobs:
         working-directory: ./packages/devtools
         run: pnpm version ${{ steps.version.outputs.version }} --no-git-tag-version
 
+      - name: Setting version for test
+        working-directory: ./packages/test
+        run: pnpm version ${{ steps.version.outputs.version }} --no-git-tag-version
+
       - name: Publish core to npm
         working-directory: ./packages/core
         run: ../../scripts/publish-if-new.sh ${{ steps.version.outputs.tag }}
 
+      - name: Publish vite-plugin to npm
+        working-directory: ./packages/vite-plugin
+        run: ../../scripts/publish-if-new.sh ${{ steps.version.outputs.tag }}
+
       # Templates use `skybridge: workspace:*` so dev/CI build against the
       # local package. pnpm doesn't rewrite that when bundling the templates
       # into create-skybridge, so pin it to the just-published version before
       # publishing create-skybridge.
       - name: Pin demo template skybridge dep for publish
         working-directory: ./packages/create-skybridge/templates/demo
-        run: pnpm pkg set 'dependencies.skybridge=^${{ steps.version.outputs.version }}'
+        run: |
+          pnpm pkg set 'dependencies.skybridge=^${{ steps.version.outputs.version }}'
+          pnpm pkg set 'devDependencies.@skybridge/vite-plugin=^${{ steps.version.outputs.version }}'
 
       - name: Pin blank template skybridge dep for publish
         working-directory: ./packages/create-skybridge/templates/blank
-        run: pnpm pkg set 'dependencies.skybridge=^${{ steps.version.outputs.version }}'
+        run: |
+          pnpm pkg set 'dependencies.skybridge=^${{ steps.version.outputs.version }}'
+          pnpm pkg set 'devDependencies.@skybridge/vite-plugin=^${{ steps.version.outputs.version }}'
 
       - name: Pin ecom template skybridge dep for publish
         working-directory: ./packages/create-skybridge/templates/ecom
-        run: pnpm pkg set 'dependencies.skybridge=^${{ steps.version.outputs.version }}'
+        run: |
+          pnpm pkg set 'dependencies.skybridge=^${{ steps.version.outputs.version }}'
+          pnpm pkg set 'devDependencies.@skybridge/vite-plugin=^${{ steps.version.outputs.version }}'
 
       - name: Publish create-skybridge to npm
         working-directory: ./packages/create-skybridge
@@ -107,6 +129,10 @@ jobs:
         working-directory: ./packages/devtools
         run: ../../scripts/publish-if-new.sh ${{ steps.version.outputs.tag }}
 
+      - name: Publish test to npm
+        working-directory: ./packages/test
+        run: ../../scripts/publish-if-new.sh ${{ steps.version.outputs.tag }}
+
       - name: Restore templates workspace deps
         if: github.event_name == 'release'
         run: git checkout -- packages/create-skybridge/templates/demo/package.json packages/create-skybridge/templates/blank/package.json packages/create-skybridge/templates/ecom/package.json

docs/api-reference/cli.mdx

@@ -100,7 +100,7 @@ List those packages in the Vite plugin's `serverExternal` to leave them out of t
 ```ts vite.config.ts
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { skybridge } from "skybridge/vite";
+import { skybridge } from "@skybridge/vite-plugin";
 
 export default defineConfig({
   plugins: [react(), skybridge({ serverExternal: ["dtrace-provider"] })],

docs/test/devtools.mdx

@@ -65,8 +65,7 @@ Click **preview** in the toolbar and the panel becomes a mock conversation with
 
 - **Switch client** between ChatGPT and Claude. Each shell is measured against the real app, in light and dark, and the mode resets to inline when you switch.
 - **Toggle device** to render the shell inside a 390 x 844 phone frame, with the mobile layout that client uses.
-- **Display modes** follow what the selected client supports. Inline and fullscreen work everywhere, pip only on ChatGPT desktop, where it renders as a floating card. A `pip` request becomes fullscreen on ChatGPT mobile, and Claude keeps the current mode.
-- **Quit preview** returns to the panel with your tool state intact.
+- **Display modes** follow what the selected client supports. Inline and fullscreen work everywhere, pip only on ChatGPT desktop, where it renders as a floating card. A `pip` request becomes fullscreen on ChatGPT mobile, and Claude keeps the current mode.- **Quit preview** returns to the panel with your tool state intact.
 
 While preview is active, the `ui/initialize` handshake carries that client's own style variables, container dimensions, and available display modes, so a view that reads the host's [theme tokens](/api-reference/use-mcp-app-context) themes itself the way it will in production.
 

e2e/conformance/package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@skybridge/devtools": "^1.2.3",
+    "@skybridge/vite-plugin": "workspace:*",
     "@tailwindcss/vite": "^4.3.1",
     "@types/node": "^24.13.2",
     "@types/react": "^19.2.17",

e2e/conformance/vite.config.ts

@@ -1,7 +1,7 @@
 import path from "node:path";
+import { skybridge } from "@skybridge/vite-plugin";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-import { skybridge } from "skybridge/vite";
 import { defineConfig } from "vite";
 
 // https://vite.dev/config/

examples/auth-auth0/README.md

@@ -9,7 +9,7 @@ An example MCP app built with [Skybridge](https://docs.skybridge.tech/home): a p
 - **Branded provider via `oauth:`**: Passing `oauth: await auth0Provider(...)` auto-mounts the well-known metadata endpoints and Bearer verification — no manual router
 - **Personalized Results**: Authenticated users see favorites highlighted and sorted first
 - **User Identity in Widgets**: Displays the signed-in user's name directly in the widget UI
-- **Simplified Server Setup**: Uses [`server.run()`](https://docs.skybridge.tech/api-reference/run) and `.use()` for a single-file server with no manual Express boilerplate
+- **Simplified Server Setup**: Uses [`app.run()`](https://docs.skybridge.tech/api-reference/run) and `.use()` for a single-file server with no manual Express boilerplate
 - **Structured Content & Metadata**: Server passes structured data to widgets via `structuredContent`
 - **Hot Module Replacement**: [Live reloading](https://docs.skybridge.tech/concepts/fast-iteration#hmr-with-vite-plugin) of widget components during development
 - **Local DevTools**: [DevTools](https://docs.skybridge.tech/devtools) at `http://localhost:3000` for local testing
@@ -100,7 +100,7 @@ This command starts:
 
 ```
 ├── src/
-│   ├── server.ts        # Server entry: McpServer + auth0Provider auth + widget + run()
+│   ├── server.ts        # Skybridge app: auth0Provider auth + widget
 │   ├── env.ts          # Env validation
 │   └── coffee-data.ts  # Mock coffee shop data & search
 │   ├── views/

examples/auth-auth0/package.json

@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@skybridge/devtools": "^1.2.3",
+    "@skybridge/vite-plugin": "workspace:*",
     "@types/express": "^5.0.6",
     "@types/node": "^22.20.0",
     "@types/react": "^19.2.17",

examples/auth-auth0/src/index.ts

@@ -0,0 +1,3 @@
+import { app } from "./server.js";
+
+export default await app.run();

examples/auth-auth0/src/server.ts

@@ -1,5 +1,5 @@
 import { intentMiddleware } from "@alpic-ai/insights";
-import { auth0Provider, McpServer } from "skybridge/server";
+import { auth0Provider, Skybridge } from "skybridge/server";
 import * as z from "zod";
 import { searchCoffeeShops } from "./coffee-data.js";
 import { env } from "./env.js";
@@ -20,13 +20,11 @@ const AUTH0_BASE_URL = `https://${env.AUTH0_DOMAIN}`;
  * Dynamic Client Registration and register an API whose Identifier is `audience`.
  */
 
-const server = new McpServer(
+export const app = new Skybridge(
   {
     name: "auth-coffee",
     version: "0.0.1",
-  },
-  { capabilities: {} },
-  {
+    capabilities: {},
     oauth: await auth0Provider({
       domain: env.AUTH0_DOMAIN,
       audience: env.AUTH0_AUDIENCE, // Auth0 API Identifier
@@ -37,91 +35,93 @@ const server = new McpServer(
       scopes: ["openid", "profile", "email"],
     }),
   },
-)
-  .mcpMiddleware(intentMiddleware())
-  .registerTool(
-    {
-      name: "search-coffee-paris",
-      description:
-        "Search for coffee shops in Paris. Shows personalized results with your favorites highlighted and sorted first. Requires authentication.",
-      inputSchema: {
-        query: z
-          .string()
-          .optional()
-          .describe(
-            "Search query (name or specialty, e.g., 'latte', 'espresso')",
-          ),
-        minRating: z
-          .number()
-          .min(1)
-          .max(5)
-          .optional()
-          .describe("Minimum rating (1-5)"),
-      },
-      annotations: {
-        readOnlyHint: true,
-        openWorldHint: true,
-        destructiveHint: false,
-      },
-      view: {
-        component: "search-coffee-paris",
-        description: "Search for coffee shops in Paris",
-        csp: {
-          resourceDomains: ["https://images.unsplash.com"],
+  (server) =>
+    server
+      .registerTool(
+        {
+          name: "search-coffee-paris",
+          description:
+            "Search for coffee shops in Paris. Shows personalized results with your favorites highlighted and sorted first. Requires authentication.",
+          inputSchema: {
+            query: z
+              .string()
+              .optional()
+              .describe(
+                "Search query (name or specialty, e.g., 'latte', 'espresso')",
+              ),
+            minRating: z
+              .number()
+              .min(1)
+              .max(5)
+              .optional()
+              .describe("Minimum rating (1-5)"),
+          },
+          annotations: {
+            readOnlyHint: true,
+            openWorldHint: true,
+            destructiveHint: false,
+          },
+          view: {
+            component: "search-coffee-paris",
+            description: "Search for coffee shops in Paris",
+            csp: {
+              resourceDomains: ["https://images.unsplash.com"],
+            },
+          },
+          _meta: {
+            "openai/widgetAccessible": true,
+          },
         },
-      },
-      _meta: {
-        "openai/widgetAccessible": true,
-      },
-    },
-    async ({ query, minRating }, extra) => {
-      try {
-        const userInfoResponse = await fetch(`${AUTH0_BASE_URL}/userinfo`, {
-          headers: { Authorization: `Bearer ${extra.authInfo?.token}` },
-        });
-
-        const userInfo = userInfoResponse.ok
-          ? ((await userInfoResponse.json()) as {
-              name?: string;
-              email?: string;
-            })
-          : null;
+        async ({ query, minRating }, extra) => {
+          try {
+            const userInfoResponse = await fetch(`${AUTH0_BASE_URL}/userinfo`, {
+              headers: {
+                Authorization: `Bearer ${extra.http?.authInfo?.token}`,
+              },
+            });
 
-        const displayName = userInfo?.name ?? "User";
-        const results = searchCoffeeShops({
-          query,
-          minRating,
-          userId: extra.authInfo?.extra?.subject ?? "anonymous",
-        });
+            const userInfo = userInfoResponse.ok
+              ? ((await userInfoResponse.json()) as {
+                  name?: string;
+                  email?: string;
+                })
+              : null;
 
-        return {
-          structuredContent: {
-            shops: results.shops,
-            totalCount: results.totalCount,
-            userName: displayName,
-          },
-          content: [
-            {
-              type: "text",
-              text: `Found ${results.totalCount} coffee shops in Paris for ${displayName}`,
-            },
-          ],
-          isError: false,
-        };
-      } catch (error) {
-        return {
-          content: [
-            {
-              type: "text",
-              text: `Failed to search coffee shops: ${error instanceof Error ? error.message : "Unknown error"}`,
-            },
-          ],
-          isError: true,
-        };
-      }
-    },
-  );
+            const displayName = userInfo?.name ?? "User";
+            const results = searchCoffeeShops({
+              query,
+              minRating,
+              userId: extra.http?.authInfo?.extra?.subject ?? "anonymous",
+            });
 
-export default await server.run();
+            return {
+              structuredContent: {
+                shops: results.shops,
+                totalCount: results.totalCount,
+                userName: displayName,
+              },
+              content: [
+                {
+                  type: "text",
+                  text: `Found ${results.totalCount} coffee shops in Paris for ${displayName}`,
+                },
+              ],
+              isError: false,
+            };
+          } catch (error) {
+            return {
+              content: [
+                {
+                  type: "text",
+                  text: `Failed to search coffee shops: ${error instanceof Error ? error.message : "Unknown error"}`,
+                },
+              ],
+              isError: true,
+            };
+          }
+        },
+      )
+      .mcpMiddleware(intentMiddleware()),
+);
 
-export type AppType = typeof server;
+export type AppType = typeof app;

examples/auth-auth0/vite.config.ts

@@ -1,6 +1,6 @@
 import path from "node:path";
+import { skybridge } from "@skybridge/vite-plugin";
 import react from "@vitejs/plugin-react";
-import { skybridge } from "skybridge/vite";
 import { defineConfig } from "vite";
 
 // https://vite.dev/config/
@@ -14,7 +14,7 @@ export default defineConfig({
   plugins: [skybridge(), react()],
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),
+      "@": path.resolve(import.meta.dirname, "./src"),
     },
   },
 });

examples/auth-authplane/README.md

@@ -11,7 +11,7 @@ An example MCP app built with [Skybridge](https://docs.skybridge.tech/home): a p
 - **Branded provider via `oauth:`**: Passing `oauth: await authplaneProvider(...)` auto-mounts the well-known metadata endpoints and Bearer verification — no manual router
 - **Personalized Results**: Favorites are highlighted and sorted first, keyed off the `sub` claim of the verified token
 - **User Identity in Widgets**: The signed-in user's identity reaches the widget through `extra.authInfo`
-- **Simplified Server Setup**: Uses [`server.run()`](https://docs.skybridge.tech/api-reference/run) and `.use()` for a single-file server with no manual Express boilerplate
+- **Simplified Server Setup**: Uses [`app.run()`](https://docs.skybridge.tech/api-reference/run) and `.use()` for a single-file server with no manual Express boilerplate
 - **Structured Content & Metadata**: Server passes structured data to widgets via `structuredContent`
 - **Hot Module Replacement**: [Live reloading](https://docs.skybridge.tech/concepts/fast-iteration#hmr-with-vite-plugin) of widget components during development
 - **Local DevTools**: [DevTools](https://docs.skybridge.tech/devtools) at `http://localhost:3000` for local testing
@@ -80,7 +80,7 @@ This command starts:
 
 ```
 ├── src/
-│   ├── server.ts        # Server entry: McpServer + authplaneProvider auth + widget + run()
+│   ├── server.ts        # Skybridge app: authplaneProvider auth + widget
 │   ├── env.ts          # Env validation
 │   └── coffee-data.ts  # Mock coffee shop data & search
 │   ├── views/

examples/auth-authplane/package.json

@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@skybridge/devtools": "^1.2.3",
+    "@skybridge/vite-plugin": "workspace:*",
     "@types/express": "^5.0.6",
     "@types/node": "^22.20.0",
     "@types/react": "^19.2.17",

examples/auth-authplane/src/index.ts

@@ -0,0 +1,3 @@
+import { app } from "./server.js";
+
+export default await app.run();