sunpeak 0.20.34 → 0.20.36

package/bin/commands/inspect.mjs

@@ -1349,16 +1349,20 @@ async function getApiKeyStatus(provider) {
   };
 }
 
-function toolResourceUri(tool) {
-  return tool?._meta?.ui?.resourceUri ?? tool?._meta?.['ui/resourceUri'];
-}
-
 function isToolVisibleToModel(tool) {
   const visibility = tool?._meta?.ui?.visibility ?? tool?._meta?.['ui/visibility'];
   if (visibility == null) return true;
   return Array.isArray(visibility) && visibility.includes('model');
 }
 
+function getModelCallableTools(tools) {
+  return tools.filter((tool) => isToolVisibleToModel(tool));
+}
+
+function toolRendersApp(tool) {
+  return !!(tool?._meta?.ui?.resourceUri ?? tool?._meta?.['ui/resourceUri']);
+}
+
 function sanitizeAiSdkSchema(schema) {
   const clean = { ...(schema || { type: 'object', properties: {} }) };
   delete clean.$schema;
@@ -1402,6 +1406,32 @@ async function createModelInstance(provider, modelId, apiKey) {
   return createAnthropic({ apiKey })(normalizedModelId);
 }
 
+const MODEL_VISIBLE_JSON_LIMIT_BYTES = 20000;
+
+function formatJsonForModel(value) {
+  const json = JSON.stringify(value);
+  if (json.length <= MODEL_VISIBLE_JSON_LIMIT_BYTES) return json;
+  return `${json.slice(0, MODEL_VISIBLE_JSON_LIMIT_BYTES)}...`;
+}
+
+function normalizeModelAppContext(appContext) {
+  if (!appContext || typeof appContext !== 'object') return undefined;
+  const normalized = {};
+  if (Array.isArray(appContext.content) && appContext.content.length > 0) {
+    normalized.content = appContext.content;
+  }
+  if (appContext.structuredContent !== undefined) {
+    normalized.structuredContent = appContext.structuredContent;
+  }
+  return Object.keys(normalized).length > 0 ? normalized : undefined;
+}
+
+function formatSharedAppContextForModel(appContext) {
+  const normalized = normalizeModelAppContext(appContext);
+  if (!normalized) return '';
+  return formatJsonForModel(normalized);
+}
+
 function formatModelVisibleToolResult(tool, result) {
   const toolName = tool?.name || 'MCP tool';
   if (result?.isError) {
@@ -1412,7 +1442,19 @@ function formatModelVisibleToolResult(tool, result) {
       .trim();
     return text || `${toolName} returned an error.`;
   }
-  return `${toolName} completed. The MCP App is ready to render.`;
+
+  const visibleResult = {};
+  if (Array.isArray(result?.content) && result.content.length > 0) {
+    visibleResult.content = result.content;
+  }
+  if (result?.structuredContent !== undefined) {
+    visibleResult.structuredContent = result.structuredContent;
+  }
+  return Object.keys(visibleResult).length > 0
+    ? formatJsonForModel(visibleResult)
+    : toolRendersApp(tool)
+      ? `${toolName} completed. The MCP App is ready to render.`
+      : `${toolName} completed.`;
 }
 
 async function executeModelChatToolCall({ client, name, arguments: args }) {
@@ -1424,7 +1466,7 @@ async function executeModelChatToolCall({ client, name, arguments: args }) {
   };
 }
 
-async function runModelChat({ client, provider, modelId, messages, apiKey }) {
+async function runModelChat({ client, provider, modelId, messages, apiKey, appContext }) {
   assertModelProvider(provider);
   const { generateText, tool: aiTool, jsonSchema } = await import('ai');
   const model = await createModelInstance(provider, modelId, apiKey);
@@ -1432,9 +1474,7 @@ async function runModelChat({ client, provider, modelId, messages, apiKey }) {
   const capturedToolCalls = [];
   const tools = {};
 
-  for (const mcpTool of mcpTools.filter(
-    (tool) => !!toolResourceUri(tool) && isToolVisibleToModel(tool)
-  )) {
+  for (const mcpTool of getModelCallableTools(mcpTools)) {
     tools[mcpTool.name] = aiTool({
       description: mcpTool.description || mcpTool.title || '',
       inputSchema: jsonSchema(sanitizeAiSdkSchema(mcpTool.inputSchema)),
@@ -1451,11 +1491,19 @@ async function runModelChat({ client, provider, modelId, messages, apiKey }) {
     });
   }
 
+  const sharedAppContext = formatSharedAppContextForModel(appContext);
+
   const result = await generateText({
     model,
     tools,
-    system:
+    system: [
       'You are chatting inside the Sunpeak Inspector. When you call an MCP tool that renders an app, the host will render the app below your message. Do not repeat raw tool output, JSON, image URLs, markdown image lists, or full item inventories. Keep any narration brief and let the app carry the visual result.',
+      sharedAppContext
+        ? `Shared MCP App context from the currently rendered app, available for this turn:\n${sharedAppContext}`
+        : '',
+    ]
+      .filter(Boolean)
+      .join('\n\n'),
     messages: messages.map((message) => ({
       role: message.role,
       content: String(message.content ?? ''),
@@ -2485,6 +2533,7 @@ function sunpeakInspectEndpointsPlugin(getClient, setClient, pluginOpts = {}) {
               modelId: parsed.modelId,
               messages: safeMessages,
               apiKey,
+              appContext: normalizeModelAppContext(parsed.appContext),
             })
           );
           res.writeHead(200, { 'Content-Type': 'application/json' });
@@ -2623,9 +2672,13 @@ export const _securityTestExports = {
   isLoopbackRemoteAddress,
   isPrivateNetworkAddress,
   isToolVisibleToModel,
+  getModelCallableTools,
+  toolRendersApp,
   executeModelChatToolCall,
   formatModelVisibleToolResult,
+  formatSharedAppContextForModel,
   normalizeApiKey,
+  normalizeModelAppContext,
   normalizeModelId,
   quoteSecurityInteractiveArg,
   readRequestBody,

package/bin/commands/test-init.mjs

@@ -77,10 +77,7 @@ export async function testInit(args = [], deps = defaultDeps) {
 
   // Parse --server flag from CLI args
   const serverIdx = args.indexOf('--server');
-  const cliServer =
-    serverIdx !== -1 && args[serverIdx + 1]
-      ? args[serverIdx + 1]
-      : undefined;
+  const cliServer = serverIdx !== -1 && args[serverIdx + 1] ? args[serverIdx + 1] : undefined;
 
   const projectType = detectProjectType(d);
   const interactive = d.isTTY();
@@ -119,7 +116,10 @@ export async function testInit(args = [], deps = defaultDeps) {
           for (const prov of providers) {
             for (const model of prov.models) {
               config = config.replace(
-                new RegExp(`^(\\s*)// ('${model.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}',?.*)$`, 'm'),
+                new RegExp(
+                  `^(\\s*)// ('${model.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}',?.*)$`,
+                  'm'
+                ),
                 '$1$2'
               );
             }
@@ -139,12 +139,16 @@ export async function testInit(args = [], deps = defaultDeps) {
           });
           if (!d.isCancel(key) && key) {
             // Strip newlines so a pasted value can't inject extra .env entries.
-            const cleanKey = String(key).replace(/[\r\n]+/g, '').trim();
+            const cleanKey = String(key)
+              .replace(/[\r\n]+/g, '')
+              .trim();
             if (cleanKey) envLines.push(`${prov.envVar}=${cleanKey}`);
           }
         }
         if (envLines.length > 0 && evalDir) {
-          const relEnvPath = evalDir.startsWith(d.cwd()) ? evalDir.slice(d.cwd().length + 1) : evalDir;
+          const relEnvPath = evalDir.startsWith(d.cwd())
+            ? evalDir.slice(d.cwd().length + 1)
+            : evalDir;
           d.writeFileSync(join(evalDir, '.env'), envLines.join('\n') + '\n');
           d.log.info(`API keys saved to ${relEnvPath}/.env (gitignored)`);
         }
@@ -165,7 +169,9 @@ export async function testInit(args = [], deps = defaultDeps) {
           stdio: 'inherit',
         });
       } catch {
-        d.log.info(`Skill install skipped. Install later: ${dlx} skills add Sunpeak-AI/sunpeak@test-mcp-server`);
+        d.log.info(
+          `Skill install skipped. Install later: ${dlx} skills add Sunpeak-AI/sunpeak@test-mcp-server`
+        );
       }
     }
   }
@@ -303,9 +309,10 @@ function scaffoldEvals(evalsDir, { server, isSunpeak, d: deps } = {}) {
   d.mkdirSync(evalsDir, { recursive: true });
 
   // Generate server line for eval config
-  let serverLine = '  // server: \'http://localhost:8000/mcp\',';
+  let serverLine = "  // server: 'http://localhost:8000/mcp',";
   if (isSunpeak) {
-    serverLine = '  // Omit server for sunpeak projects (auto-detected).\n  // server: \'http://localhost:8000/mcp\',';
+    serverLine =
+      "  // Omit server for sunpeak projects (auto-detected).\n  // server: 'http://localhost:8000/mcp',";
   } else if (server?.type === 'url') {
     serverLine = `  server: ${JSON.stringify(server.value)},`;
   } else if (server?.type === 'command') {
@@ -315,27 +322,27 @@ function scaffoldEvals(evalsDir, { server, isSunpeak, d: deps } = {}) {
   // Build the eval config content
   const configLines = [
     "import { defineEvalConfig } from 'sunpeak/eval';",
-    "",
-    "// API keys are loaded automatically from .env in this directory (gitignored).",
-    "// See .env.example for the format.",
-    "",
-    "export default defineEvalConfig({",
-    "  // MCP server to test.",
+    '',
+    '// API keys are loaded automatically from .env in this directory (gitignored).',
+    '// See .env.example for the format.',
+    '',
+    'export default defineEvalConfig({',
+    '  // MCP server to test.',
     serverLine,
-    "",
-    "  models: [",
-    "    // Uncomment models and install their provider packages:",
+    '',
+    '  models: [',
+    '    // Uncomment models and install their provider packages:',
     ...generateModelLines(),
-    "  ],",
-    "",
-    "  defaults: {",
-    "    runs: 5,           // Number of times to run each case per model",
-    "    maxSteps: 1,       // Max tool call steps per run",
-    "    temperature: 0,    // 0 for most deterministic results",
-    "    timeout: 30_000,   // Timeout per run in ms",
-    "  },",
-    "});",
-    "",
+    '  ],',
+    '',
+    '  defaults: {',
+    '    runs: 5,           // Number of times to run each case per model',
+    '    maxSteps: 1,       // Max tool call steps per run',
+    '    temperature: 0,    // 0 for most deterministic results',
+    '    timeout: 30_000,   // Timeout per run in ms',
+    '  },',
+    '});',
+    '',
   ];
 
   d.writeFileSync(join(evalsDir, 'eval.config.ts'), configLines.join('\n'));
@@ -437,13 +444,8 @@ function scaffoldVisualTest(filePath, d) {
 //   // await result.screenshot('tool-dark');
 // });
 
-// Full-page screenshot (captures the inspector chrome too):
-// test('full page renders correctly', async ({ inspector }) => {
-//   const result = await inspector.renderTool('your-tool', {}, { theme: 'light' });
-//   const app = result.app();
-//   await expect(app.getByText('Expected text')).toBeVisible();
-//   await result.screenshot('tool-page', { target: 'page', maxDiffPixelRatio: 0.02 });
-// });
+// renderTool() hides inspector sidebars by default, and screenshot() captures only
+// the MCP App iframe area, so inspector UI changes do not break your visual baselines.
 `
   );
   d.log.success(`Created ${filePath}`);
@@ -485,9 +487,10 @@ function scaffoldLiveTests(liveDir, { isSunpeak, server, d } = {}) {
     const parts = server.value.split(/\s+/);
     const cmd = parts[0];
     const args = parts.slice(1);
-    serverOption = args.length > 0
-      ? `\n  server: { command: ${JSON.stringify(cmd)}, args: [${args.map(a => JSON.stringify(a)).join(', ')}] },`
-      : `\n  server: { command: ${JSON.stringify(cmd)} },`;
+    serverOption =
+      args.length > 0
+        ? `\n  server: { command: ${JSON.stringify(cmd)}, args: [${args.map((a) => JSON.stringify(a)).join(', ')}] },`
+        : `\n  server: { command: ${JSON.stringify(cmd)} },`;
   }
 
   const configContent = `${liveConfigPreamble}
@@ -637,7 +640,9 @@ test('server exposes tools', async ({ mcp }) => {
 
   d.log.success('Created tests/sunpeak/ with all test types.');
   if (server.type === 'later') {
-    d.log.warn('Server not configured. Edit tests/sunpeak/playwright.config.ts before running tests.');
+    d.log.warn(
+      'Server not configured. Edit tests/sunpeak/playwright.config.ts before running tests.'
+    );
   }
 
   // Auto-install dependencies so users can run tests immediately
@@ -653,14 +658,22 @@ test('server exposes tools', async ({ mcp }) => {
   try {
     d.execSync(`${pm} exec playwright install chromium`, { cwd: testDir, stdio: 'inherit' });
   } catch {
-    d.log.warn(`Browser install failed. Run manually: cd tests/sunpeak && ${pm} exec playwright install chromium`);
+    d.log.warn(
+      `Browser install failed. Run manually: cd tests/sunpeak && ${pm} exec playwright install chromium`
+    );
   }
 
   d.log.step('Ready! Run tests with:');
   d.log.message('  npx sunpeak test              # E2E tests');
-  d.log.message('  npx sunpeak test --visual      # Visual regression (generates baselines on first run)');
-  d.log.message('  npx sunpeak test --live         # Live tests against real hosts (requires login)');
-  d.log.message('  npx sunpeak test --eval         # Multi-model evals (configure models in evals/eval.config.ts)');
+  d.log.message(
+    '  npx sunpeak test --visual      # Visual regression (generates baselines on first run)'
+  );
+  d.log.message(
+    '  npx sunpeak test --live         # Live tests against real hosts (requires login)'
+  );
+  d.log.message(
+    '  npx sunpeak test --eval         # Multi-model evals (configure models in evals/eval.config.ts)'
+  );
 }
 
 async function initJsProject(cliServer, d) {

package/bin/lib/test/test-fixtures.d.mts

@@ -37,12 +37,20 @@ export interface CallToolResult {
 export interface RenderToolOptions {
   theme?: 'light' | 'dark';
   displayMode?: 'inline' | 'pip' | 'fullscreen';
+  /**
+   * Show inspector sidebars while rendering the tool.
+   * Defaults to false so e2e and visual tests are isolated from inspector UI layout changes.
+   */
+  sidebar?: boolean;
   timeout?: number;
   [key: string]: unknown;
 }
 
 export interface ScreenshotOptions extends PageAssertionsToHaveScreenshotOptions {
-  /** What to screenshot: 'app' (inner iframe content) or 'page' (full inspector). Default: 'app'. */
+  /**
+   * Screenshot target. Visual snapshots capture the app iframe area by default.
+   * @deprecated `target: 'page'` is ignored so inspector UI changes do not break app baselines.
+   */
   target?: 'app' | 'page';
   /** Specific locator to screenshot instead of the default target. */
   element?: Locator;

package/bin/lib/test/test-fixtures.mjs

@@ -44,6 +44,13 @@ function buildInspectorUrl(params) {
   return qs ? `/?${qs}` : '/';
 }
 
+function withDefaultRenderParams(params) {
+  return {
+    ...params,
+    sidebar: params.sidebar == null ? 'false' : params.sidebar,
+  };
+}
+
 function resolveHostId(projectName) {
   if (!projectName) return 'chatgpt';
   if (projectName.startsWith('chatgpt')) return 'chatgpt';
@@ -83,7 +90,10 @@ async function readToolResult(page, timeout) {
               }
             });
             observer.observe(el, { childList: true, characterData: true, subtree: true });
-            timer = setTimeout(() => { observer.disconnect(); resolve(null); }, t);
+            timer = setTimeout(() => {
+              observer.disconnect();
+              resolve(null);
+            }, t);
           };
           check();
         }),
@@ -135,13 +145,17 @@ function createInspectorResult(page, resultData) {
         name = undefined;
       }
 
-      const { target = 'app', element, ...playwrightOptions } = options;
+      const { target, element, ...playwrightOptions } = options;
       let locator;
       if (element) {
         locator = element;
-      } else if (target === 'page') {
-        locator = page.locator('#root');
       } else {
+        if (target && target !== 'app') {
+          console.warn(
+            `[sunpeak] result.screenshot({ target: "${target}" }) is deprecated. ` +
+              'Visual snapshots always capture the app iframe area so inspector UI changes do not break user baselines.'
+          );
+        }
         locator = page.frameLocator('iframe').frameLocator('iframe').locator('body');
       }
       const fullName = name && !name.endsWith('.png') ? `${name}.png` : name;
@@ -171,7 +185,9 @@ const test = base.extend({
           data: { name, arguments: input || {} },
         });
         if (!response.ok()) {
-          throw new Error(`callTool(${name}) returned ${response.status()}: ${await response.text()}`);
+          throw new Error(
+            `callTool(${name}) returned ${response.status()}: ${await response.text()}`
+          );
         }
         return response.json();
       },
@@ -187,7 +203,9 @@ const test = base.extend({
           `${baseURL}/__sunpeak/read-resource?uri=${encodeURIComponent(uri)}`
         );
         if (!response.ok()) {
-          throw new Error(`readResource(${uri}) returned ${response.status()}: ${await response.text()}`);
+          throw new Error(
+            `readResource(${uri}) returned ${response.status()}: ${await response.text()}`
+          );
         }
         return response.text();
       },
@@ -237,7 +255,7 @@ const test = base.extend({
           ...rest,
         };
 
-        await page.goto(buildInspectorUrl(params));
+        await page.goto(buildInspectorUrl(withDefaultRenderParams(params)));
 
         const resolvedTimeout = callTimeout ?? testInfo.project.use?.mcpTimeout ?? 15_000;
         try {

package/dist/chatgpt/index.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-Cek0wNdY.cjs");
-const require_inspector = require("../inspector-CJA_uM9g.cjs");
+const require_inspector = require("../inspector-BNWla95w.cjs");
 const require_inspector_url = require("../inspector-url-BxScdDag.cjs");
 const require_discovery = require("../discovery-31_n0zcu.cjs");
 //#region src/chatgpt/index.ts

package/dist/chatgpt/index.js

@@ -1,5 +1,5 @@
 import { Ct as __exportAll } from "../protocol-bhrz2H_E.js";
-import { _ as extractResourceCSP, f as ThemeProvider, g as IframeResource, p as useThemeContext, r as resolveServerToolResult, t as Inspector, v as McpAppHost, y as SCREEN_WIDTHS } from "../inspector-mGvDvMCR.js";
+import { _ as extractResourceCSP, f as ThemeProvider, g as IframeResource, p as useThemeContext, r as resolveServerToolResult, t as Inspector, v as McpAppHost, y as SCREEN_WIDTHS } from "../inspector-CiuT_2yA.js";
 import { t as createInspectorUrl } from "../inspector-url-xUMGbWis.js";
 import { c as toPascalCase, i as findResourceKey, n as extractSimulationKey, r as findResourceDirs, s as getComponentName, t as extractResourceKey } from "../discovery-DOVner--.js";
 //#region src/chatgpt/index.ts

package/dist/claude/index.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../chunk-Cek0wNdY.cjs");
-const require_inspector = require("../inspector-CJA_uM9g.cjs");
+const require_inspector = require("../inspector-BNWla95w.cjs");
 exports.Inspector = require_inspector.Inspector;

package/dist/claude/index.js

@@ -1,2 +1,2 @@
-import { t as Inspector } from "../inspector-mGvDvMCR.js";
+import { t as Inspector } from "../inspector-CiuT_2yA.js";
 export { Inspector };