diff --git a/client/src/components/chat-v2/mcp-apps-renderer.tsx b/client/src/components/chat-v2/mcp-apps-renderer.tsx
index ed3e810c4..9b87715ca 100644
--- a/client/src/components/chat-v2/mcp-apps-renderer.tsx
+++ b/client/src/components/chat-v2/mcp-apps-renderer.tsx
@@ -9,8 +9,9 @@
  * Uses SandboxedIframe for DRY double-iframe setup.
  */
 
-import { useRef, useState, useEffect, useCallback } from "react";
+import { useRef, useState, useEffect, useCallback, useMemo } from "react";
 import { usePreferencesStore } from "@/stores/preferences/preferences-provider";
+import { useUIPlaygroundStore, DEVICE_VIEWPORT_CONFIGS, type CspMode, type DeviceType } from "@/stores/ui-playground-store";
 import { X } from "lucide-react";
 import {
   SandboxedIframe,
@@ -53,6 +54,12 @@ interface MCPAppsRendererProps {
   pipWidgetId?: string | null;
   onRequestPip?: (toolCallId: string) => void;
   onExitPip?: (toolCallId: string) => void;
+  /** Controlled display mode - when provided, component uses this instead of internal state */
+  displayMode?: DisplayMode;
+  /** Callback when display mode changes - required when displayMode is controlled */
+  onDisplayModeChange?: (mode: DisplayMode) => void;
+  onRequestFullscreen?: (toolCallId: string) => void;
+  onExitFullscreen?: (toolCallId: string) => void;
 }
 
 interface JSONRPCMessage {
@@ -72,23 +79,130 @@ export function MCPAppsRenderer({
   toolInput,
   toolOutput,
   resourceUri,
+  toolMetadata,
   onSendFollowUp,
   onCallTool,
   pipWidgetId,
+  onRequestPip,
   onExitPip,
+  displayMode: displayModeProp,
+  onDisplayModeChange,
+  onRequestFullscreen,
+  onExitFullscreen,
 }: MCPAppsRendererProps) {
   const sandboxRef = useRef<SandboxedIframeHandle>(null);
   const themeMode = usePreferencesStore((s) => s.themeMode);
 
-  const [displayMode, setDisplayMode] = useState<DisplayMode>("inline");
+  // Get CSP mode from playground store when in playground, otherwise use permissive
+  const isPlaygroundActive = useUIPlaygroundStore((s) => s.isPlaygroundActive);
+  const playgroundCspMode = useUIPlaygroundStore((s) => s.mcpAppsCspMode);
+  const cspMode: CspMode = isPlaygroundActive ? playgroundCspMode : "permissive";
+
+  // Get locale and timeZone from playground store when active, fallback to browser defaults
+  const playgroundLocale = useUIPlaygroundStore((s) => s.globals.locale);
+  const playgroundTimeZone = useUIPlaygroundStore((s) => s.globals.timeZone);
+  const locale = isPlaygroundActive
+    ? playgroundLocale
+    : navigator.language || "en-US";
+  const timeZone = isPlaygroundActive
+    ? playgroundTimeZone
+    : Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+
+  // Get displayMode from playground store when active (SEP-1865)
+  const playgroundDisplayMode = useUIPlaygroundStore((s) => s.displayMode);
+
+  // Get device capabilities from playground store (SEP-1865)
+  const playgroundCapabilities = useUIPlaygroundStore((s) => s.capabilities);
+  const deviceCapabilities = useMemo(
+    () =>
+      isPlaygroundActive
+        ? playgroundCapabilities
+        : { hover: true, touch: false }, // Desktop defaults
+    [isPlaygroundActive, playgroundCapabilities],
+  );
+
+  // Get safe area insets from playground store (SEP-1865)
+  const playgroundSafeAreaInsets = useUIPlaygroundStore((s) => s.safeAreaInsets);
+  const safeAreaInsets = useMemo(
+    () =>
+      isPlaygroundActive
+        ? playgroundSafeAreaInsets
+        : { top: 0, right: 0, bottom: 0, left: 0 },
+    [isPlaygroundActive, playgroundSafeAreaInsets],
+  );
+
+  // Get device type from playground store for platform/viewport derivation (SEP-1865)
+  const playgroundDeviceType = useUIPlaygroundStore((s) => s.deviceType);
+
+  // Derive platform from device type per SEP-1865 (web | desktop | mobile)
+  const platform = useMemo((): "web" | "desktop" | "mobile" => {
+    if (!isPlaygroundActive) return "web";
+    switch (playgroundDeviceType) {
+      case "mobile":
+      case "tablet":
+        return "mobile";
+      case "desktop":
+      default:
+        return "web";
+    }
+  }, [isPlaygroundActive, playgroundDeviceType]);
+
+  // Derive viewport dimensions from device type (using shared config)
+  const viewportWidth = useMemo(() => {
+    if (!isPlaygroundActive) return 400;
+    return DEVICE_VIEWPORT_CONFIGS[playgroundDeviceType]?.width ?? 400;
+  }, [isPlaygroundActive, playgroundDeviceType]);
+
+  const viewportHeight = useMemo(() => {
+    if (!isPlaygroundActive) return 400;
+    return DEVICE_VIEWPORT_CONFIGS[playgroundDeviceType]?.height ?? 400;
+  }, [isPlaygroundActive, playgroundDeviceType]);
+
+  // Display mode: controlled (via props) or uncontrolled (internal state)
+  const isControlled = displayModeProp !== undefined;
+  const [internalDisplayMode, setInternalDisplayMode] = useState<DisplayMode>(
+    isPlaygroundActive ? playgroundDisplayMode : "inline"
+  );
+  const displayMode = isControlled ? displayModeProp : internalDisplayMode;
+  const setDisplayMode = useCallback(
+    (mode: DisplayMode) => {
+      if (isControlled) {
+        onDisplayModeChange?.(mode);
+      } else {
+        setInternalDisplayMode(mode);
+      }
+
+      // Notify parent about fullscreen state changes regardless of controlled mode
+      if (mode === "fullscreen") {
+        onRequestFullscreen?.(toolCallId);
+      } else if (displayMode === "fullscreen") {
+        onExitFullscreen?.(toolCallId);
+      }
+    },
+    [
+      isControlled,
+      onDisplayModeChange,
+      toolCallId,
+      onRequestFullscreen,
+      onExitFullscreen,
+      displayMode,
+    ],
+  );
   const [contentHeight, setContentHeight] = useState<number>(400);
-  const [maxHeight] = useState<number>(800);
+
+  // maxHeight should match the device's viewport height (max available space)
+  const maxHeight = useMemo(() => {
+    if (!isPlaygroundActive) return 800;
+    return DEVICE_VIEWPORT_CONFIGS[playgroundDeviceType]?.height ?? 800;
+  }, [isPlaygroundActive, playgroundDeviceType]);
   const [isReady, setIsReady] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [widgetHtml, setWidgetHtml] = useState<string | null>(null);
   const [widgetCsp, setWidgetCsp] = useState<UIResourceCSP | undefined>(
     undefined,
   );
+  const [widgetPermissive, setWidgetPermissive] = useState<boolean>(false);
+  const [loadedCspMode, setLoadedCspMode] = useState<CspMode | null>(null);
 
   const pendingRequests = useRef<
     Map<
@@ -100,10 +214,11 @@ export function MCPAppsRenderer({
     >
   >(new Map());
 
-  // Fetch widget HTML when tool output is available
+  // Fetch widget HTML when tool output is available or CSP mode changes
   useEffect(() => {
     if (toolState !== "output-available") return;
-    if (widgetHtml) return;
+    // Re-fetch if CSP mode changed (widget needs to reload with new CSP policy)
+    if (widgetHtml && loadedCspMode === cspMode) return;
 
     const fetchWidgetHtml = async () => {
       try {
@@ -120,6 +235,7 @@ export function MCPAppsRenderer({
             toolName,
             theme: themeMode,
             protocol: "mcp-apps",
+            cspMode, // Pass CSP mode preference
           }),
         });
 
@@ -131,7 +247,7 @@ export function MCPAppsRenderer({
 
         // Fetch widget content with CSP metadata (SEP-1865)
         const contentResponse = await fetch(
-          `/api/mcp/apps/widget-content/${toolCallId}`,
+          `/api/mcp/apps/widget-content/${toolCallId}?csp_mode=${cspMode}`,
         );
         if (!contentResponse.ok) {
           const errorData = await contentResponse.json().catch(() => ({}));
@@ -141,9 +257,11 @@ export function MCPAppsRenderer({
           );
         }
 
-        const { html, csp } = await contentResponse.json();
+        const { html, csp, permissive } = await contentResponse.json();
         setWidgetHtml(html);
         setWidgetCsp(csp);
+        setWidgetPermissive(permissive ?? false);
+        setLoadedCspMode(cspMode);
       } catch (err) {
         setLoadError(
           err instanceof Error ? err.message : "Failed to prepare widget",
@@ -156,12 +274,14 @@ export function MCPAppsRenderer({
     toolState,
     toolCallId,
     widgetHtml,
+    loadedCspMode,
     serverId,
     resourceUri,
     toolInput,
     toolOutput,
     toolName,
     themeMode,
+    cspMode,
   ]);
 
   // UI logging
@@ -170,6 +290,23 @@ export function MCPAppsRenderer({
   // Widget debug store
   const setWidgetDebugInfo = useWidgetDebugStore((s) => s.setWidgetDebugInfo);
   const setWidgetGlobals = useWidgetDebugStore((s) => s.setWidgetGlobals);
+  const addCspViolation = useWidgetDebugStore((s) => s.addCspViolation);
+  const clearCspViolations = useWidgetDebugStore((s) => s.clearCspViolations);
+
+  // Clear CSP violations when CSP mode changes (stale data from previous mode)
+  useEffect(() => {
+    if (loadedCspMode !== null && loadedCspMode !== cspMode) {
+      clearCspViolations(toolCallId);
+    }
+  }, [cspMode, loadedCspMode, toolCallId, clearCspViolations]);
+
+  // Sync displayMode from playground store when it changes (SEP-1865)
+  // Only sync when not in controlled mode (parent controls displayMode via props)
+  useEffect(() => {
+    if (isPlaygroundActive && !isControlled) {
+      setInternalDisplayMode(playgroundDisplayMode);
+    }
+  }, [isPlaygroundActive, playgroundDisplayMode, isControlled]);
 
   // Initialize widget debug info
   useEffect(() => {
@@ -181,7 +318,10 @@ export function MCPAppsRenderer({
         theme: themeMode,
         displayMode,
         maxHeight,
-        locale: navigator.language,
+        locale,
+        timeZone,
+        deviceCapabilities,
+        safeAreaInsets,
       },
     });
   }, [
@@ -191,6 +331,10 @@ export function MCPAppsRenderer({
     themeMode,
     displayMode,
     maxHeight,
+    locale,
+    timeZone,
+    deviceCapabilities,
+    safeAreaInsets,
   ]);
 
   // Update globals in debug store when they change
@@ -199,8 +343,22 @@ export function MCPAppsRenderer({
       theme: themeMode,
       displayMode,
       maxHeight,
+      locale,
+      timeZone,
+      deviceCapabilities,
+      safeAreaInsets,
     });
-  }, [toolCallId, themeMode, displayMode, maxHeight, setWidgetGlobals]);
+  }, [
+    toolCallId,
+    themeMode,
+    displayMode,
+    maxHeight,
+    locale,
+    timeZone,
+    deviceCapabilities,
+    safeAreaInsets,
+    setWidgetGlobals,
+  ]);
 
   // JSON-RPC helpers
   const postMessage = useCallback(
@@ -244,6 +402,47 @@ export function MCPAppsRenderer({
   // Handle messages from guest UI (via SandboxedIframe)
   const handleMessage = useCallback(
     async (event: MessageEvent) => {
+      // Handle CSP violation messages (not JSON-RPC)
+      if (event.data?.type === "mcp-apps:csp-violation") {
+        const {
+          directive,
+          blockedUri,
+          sourceFile,
+          lineNumber,
+          columnNumber,
+          effectiveDirective,
+          timestamp,
+        } = event.data;
+
+        // Log incoming CSP violation
+        addUiLog({
+          widgetId: toolCallId,
+          serverId,
+          direction: "ui-to-host",
+          protocol: "mcp-apps",
+          method: "csp-violation",
+          message: event.data,
+        });
+
+        // Add violation to widget debug store for display in CSP panel
+        addCspViolation(toolCallId, {
+          directive,
+          effectiveDirective,
+          blockedUri,
+          sourceFile,
+          lineNumber,
+          columnNumber,
+          timestamp: timestamp || Date.now(),
+        });
+
+        // Also log to console for developers
+        console.warn(
+          `[MCP Apps CSP Violation] ${directive}: Blocked ${blockedUri}`,
+          sourceFile ? `at ${sourceFile}:${lineNumber}:${columnNumber}` : "",
+        );
+        return;
+      }
+
       const { jsonrpc, id, method, params, result, error } =
         event.data as JSONRPCMessage;
 
@@ -286,9 +485,22 @@ export function MCPAppsRenderer({
               hostContext: {
                 theme: themeMode,
                 displayMode,
-                viewport: { width: 400, height: contentHeight, maxHeight },
-                locale: navigator.language,
-                platform: "web",
+                availableDisplayModes: ["inline", "pip", "fullscreen"],
+                viewport: { width: viewportWidth, height: viewportHeight, maxHeight },
+                locale,
+                timeZone,
+                platform,
+                userAgent: navigator.userAgent,
+                deviceCapabilities,
+                safeAreaInsets,
+                toolInfo: {
+                  id: toolCallId,
+                  tool: {
+                    name: toolName,
+                    inputSchema: (toolMetadata?.inputSchema as object) ?? { type: "object" },
+                    ...(toolMetadata?.description && { description: toolMetadata.description }),
+                  },
+                },
               },
             });
             setIsReady(true);
@@ -399,7 +611,9 @@ export function MCPAppsRenderer({
             }
             break;
 
+          case "ui/notifications/size-changed": // SEP-1865 spec
           case "ui/notifications/size-change": {
+            // Support both for backwards compatibility
             const sizeParams = params as { height?: number };
             if (typeof sizeParams.height === "number") {
               setContentHeight(Math.min(sizeParams.height, maxHeight));
@@ -418,6 +632,14 @@ export function MCPAppsRenderer({
       displayMode,
       contentHeight,
       maxHeight,
+      locale,
+      timeZone,
+      platform,
+      viewportWidth,
+      deviceCapabilities,
+      safeAreaInsets,
+      toolName,
+      toolMetadata,
       onCallTool,
       onSendFollowUp,
       serverId,
@@ -428,31 +650,94 @@ export function MCPAppsRenderer({
       sendResponse,
       sendNotification,
       addUiLog,
+      addCspViolation,
     ],
   );
 
-  // Track previous theme to avoid sending redundant notifications on mount
-  // (theme is already included in McpUiInitializeResult.hostContext)
-  const prevThemeRef = useRef<string | null>(null);
-
-  // Send theme updates only when theme actually changes (not on initial mount)
+  // Track previous host context to send only changed fields (per SEP-1865)
+  const prevHostContextRef = useRef<{
+    theme: string;
+    displayMode: DisplayMode;
+    locale: string;
+    timeZone: string;
+    platform: "web" | "desktop" | "mobile";
+    viewportWidth: number;
+    viewportHeight: number;
+    maxHeight: number;
+    deviceCapabilities: { touch?: boolean; hover?: boolean };
+    safeAreaInsets: { top: number; right: number; bottom: number; left: number };
+  } | null>(null);
+
+  // Send host-context-changed notifications when any context field changes
   useEffect(() => {
     if (!isReady) return;
 
-    // Skip initial mount - theme was already sent in initialize response
-    if (prevThemeRef.current === null) {
-      prevThemeRef.current = themeMode;
+    const currentContext = {
+      theme: themeMode,
+      displayMode,
+      locale,
+      timeZone,
+      platform,
+      viewportWidth,
+      viewportHeight,
+      maxHeight,
+      deviceCapabilities,
+      safeAreaInsets,
+    };
+
+    // Skip initial mount - context was already sent in initialize response
+    if (prevHostContextRef.current === null) {
+      prevHostContextRef.current = currentContext;
       return;
     }
 
-    // Only send notification if theme actually changed
-    if (prevThemeRef.current !== themeMode) {
-      prevThemeRef.current = themeMode;
-      sendNotification("ui/notifications/host-context-changed", {
-        theme: themeMode,
-      });
+    // Build partial update with only changed fields (per SEP-1865 spec)
+    const changedFields: Record<string, unknown> = {};
+    if (prevHostContextRef.current.theme !== themeMode) {
+      changedFields.theme = themeMode;
+    }
+    if (prevHostContextRef.current.displayMode !== displayMode) {
+      changedFields.displayMode = displayMode;
+    }
+    if (prevHostContextRef.current.locale !== locale) {
+      changedFields.locale = locale;
+    }
+    if (prevHostContextRef.current.timeZone !== timeZone) {
+      changedFields.timeZone = timeZone;
+    }
+    if (prevHostContextRef.current.platform !== platform) {
+      changedFields.platform = platform;
+    }
+    // Send full viewport object when any viewport property changes
+    if (
+      prevHostContextRef.current.viewportWidth !== viewportWidth ||
+      prevHostContextRef.current.viewportHeight !== viewportHeight ||
+      prevHostContextRef.current.maxHeight !== maxHeight
+    ) {
+      changedFields.viewport = { width: viewportWidth, height: viewportHeight, maxHeight };
+    }
+    // Compare deviceCapabilities (simple object with booleans)
+    const prevCaps = prevHostContextRef.current.deviceCapabilities;
+    if (prevCaps.touch !== deviceCapabilities.touch || prevCaps.hover !== deviceCapabilities.hover) {
+      changedFields.deviceCapabilities = deviceCapabilities;
+    }
+    // Compare safeAreaInsets (simple object with numbers)
+    const prevInsets = prevHostContextRef.current.safeAreaInsets;
+    if (
+      prevInsets.top !== safeAreaInsets.top ||
+      prevInsets.right !== safeAreaInsets.right ||
+      prevInsets.bottom !== safeAreaInsets.bottom ||
+      prevInsets.left !== safeAreaInsets.left
+    ) {
+      changedFields.safeAreaInsets = safeAreaInsets;
     }
-  }, [themeMode, isReady, sendNotification]);
+
+    // Only send notification if something changed
+    if (Object.keys(changedFields).length > 0) {
+      prevHostContextRef.current = currentContext;
+      sendNotification("ui/notifications/host-context-changed", changedFields);
+    }
+  }, [themeMode, displayMode, locale, timeZone, platform, viewportWidth, viewportHeight, maxHeight, deviceCapabilities, safeAreaInsets, isReady, sendNotification]);
 
   // Loading states
   if (toolState !== "output-available") {
@@ -479,7 +764,9 @@ export function MCPAppsRenderer({
     );
   }
 
-  const isPip = displayMode === "pip" && pipWidgetId === toolCallId;
+  const isPip =
+    displayMode === "pip" &&
+    (isControlled || pipWidgetId === toolCallId);
   const isFullscreen = displayMode === "fullscreen";
   // Apply maxHeight constraint, but no minimum - let widget control its size
   const appliedHeight = Math.min(contentHeight, maxHeight);
@@ -502,7 +789,10 @@ export function MCPAppsRenderer({
         <button
           onClick={() => {
             setDisplayMode("inline");
-            onExitPip?.(toolCallId);
+            if (isPip) {
+              onExitPip?.(toolCallId);
+            }
+            // onExitFullscreen is called within setDisplayMode when leaving fullscreen
           }}
           className="absolute left-2 top-2 z-10 flex h-6 w-6 items-center justify-center rounded-md bg-background/80 hover:bg-background border border-border/50 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
           aria-label="Close"
@@ -517,6 +807,7 @@ export function MCPAppsRenderer({
         html={widgetHtml}
         sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
         csp={widgetCsp}
+        permissive={widgetPermissive}
         onMessage={handleMessage}
         title={`MCP App: ${toolName}`}
         className="w-full border border-border/40 rounded-md bg-background transition-[height] duration-200 ease-out overflow-auto"
diff --git a/client/src/components/chat-v2/thread.tsx b/client/src/components/chat-v2/thread.tsx
index ec3966260..12feb8586 100644
--- a/client/src/components/chat-v2/thread.tsx
+++ b/client/src/components/chat-v2/thread.tsx
@@ -11,7 +11,7 @@ import {
   remoteTextDefinition,
 } from "@mcp-ui/client";
 import { UITools, ToolUIPart, DynamicToolUIPart } from "ai";
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import {
   ChevronDown,
   MessageCircle,
@@ -291,7 +291,7 @@ function PartSwitch({
     if (uiResource) {
       return (
         <>
-          <ToolPart part={toolPart} />
+          <ToolPart part={toolPart} uiType={uiType} />
           <MCPUIResourcePart
             resource={uiResource.resource}
             onSendFollowUp={onSendFollowUp}
@@ -304,7 +304,7 @@ function PartSwitch({
       if (!serverId || !uiResourceUri || !toolInfo.toolCallId) {
         return (
           <>
-            <ToolPart part={toolPart} />
+            <ToolPart part={toolPart} uiType={uiType} />
             <div className="border border-destructive/40 bg-destructive/10 text-destructive text-xs rounded-md px-3 py-2">
               Failed to load server id or resource uri for MCP App.
             </div>
@@ -314,7 +314,16 @@ function PartSwitch({
 
       return (
         <>
-          <ToolPart part={toolPart} />
+          <ToolPart
+            part={toolPart}
+            uiType={uiType}
+            displayMode={displayMode}
+            onDisplayModeChange={onDisplayModeChange}
+            onRequestFullscreen={onRequestFullscreen}
+            onExitFullscreen={onExitFullscreen}
+            onRequestPip={onRequestPip}
+            onExitPip={onExitPip}
+          />
           <MCPAppsRenderer
             serverId={serverId}
             toolCallId={toolInfo.toolCallId}
@@ -332,6 +341,10 @@ function PartSwitch({
             pipWidgetId={pipWidgetId}
             onRequestPip={onRequestPip}
             onExitPip={onExitPip}
+            displayMode={displayMode}
+            onDisplayModeChange={onDisplayModeChange}
+            onRequestFullscreen={onRequestFullscreen}
+            onExitFullscreen={onExitFullscreen}
           />
         </>
       );
@@ -341,7 +354,7 @@ function PartSwitch({
       if (toolInfo.toolState !== "output-available") {
         return (
           <>
-            <ToolPart part={toolPart} />
+            <ToolPart part={toolPart} uiType={uiType} />
             <div className="border border-border/40 rounded-md bg-muted/30 text-xs text-muted-foreground px-3 py-2">
               Waiting for tool to finish executing...
             </div>
@@ -352,7 +365,7 @@ function PartSwitch({
       if (!serverId) {
         return (
           <>
-            <ToolPart part={toolPart} />
+            <ToolPart part={toolPart} uiType={uiType} />
             <div className="border border-destructive/40 bg-destructive/10 text-destructive text-xs rounded-md px-3 py-2">
               Failed to load tool server id.
             </div>
@@ -364,6 +377,7 @@ function PartSwitch({
         <>
           <ToolPart
             part={toolPart}
+            uiType={uiType}
             displayMode={displayMode}
             onDisplayModeChange={onDisplayModeChange}
             onRequestFullscreen={onRequestFullscreen}
@@ -396,7 +410,7 @@ function PartSwitch({
       );
     }
 
-    return <ToolPart part={toolPart} />;
+    return <ToolPart part={toolPart} uiType={uiType} />;
   }
 
   if (isDataPart(part)) {
@@ -436,6 +450,7 @@ function TextPart({ text, role }: { text: string; role: UIMessage["role"] }) {
 
 function ToolPart({
   part,
+  uiType,
   displayMode,
   onDisplayModeChange,
   onRequestFullscreen,
@@ -444,6 +459,7 @@ function ToolPart({
   onExitPip,
 }: {
   part: ToolUIPart<UITools> | DynamicToolUIPart;
+  uiType?: UIType | null;
   displayMode?: DisplayMode;
   onDisplayModeChange?: (mode: DisplayMode) => void;
   onRequestFullscreen?: (toolCallId: string) => void;
@@ -496,21 +512,33 @@ function ToolPart({
     { mode: "fullscreen", icon: Maximize2, label: "Fullscreen" },
   ];
 
-  const debugOptions: {
-    tab: "data" | "state" | "csp";
-    icon: typeof Database;
-    label: string;
-    badge?: number;
-  }[] = [
-    { tab: "data", icon: Database, label: "Data" },
-    { tab: "state", icon: Box, label: "Widget State" },
-    {
+  // Debug options - filter based on protocol
+  // Widget State is only available for ChatGPT Apps (OpenAI SDK), not for MCP Apps
+  const debugOptions = useMemo(() => {
+    const options: {
+      tab: "data" | "state" | "csp";
+      icon: typeof Database;
+      label: string;
+      badge?: number;
+    }[] = [
+      { tab: "data", icon: Database, label: "Data" },
+    ];
+
+    // Only show Widget State for ChatGPT Apps (OpenAI SDK)
+    // MCP Apps (SEP-1865) don't support persistent widget state
+    if (uiType === UIType.OPENAI_SDK) {
+      options.push({ tab: "state", icon: Box, label: "Widget State" });
+    }
+
+    options.push({
       tab: "csp",
       icon: Shield,
       label: "CSP",
       badge: widgetDebugInfo?.csp?.violations?.length,
-    },
-  ];
+    });
+
+    return options;
+  }, [uiType, widgetDebugInfo?.csp?.violations?.length]);
 
   const handleDebugClick = (tab: "data" | "state" | "csp") => {
     if (activeDebugTab === tab) {
diff --git a/client/src/components/ui-playground/PlaygroundMain.tsx b/client/src/components/ui-playground/PlaygroundMain.tsx
index b55878143..89b5d0866 100644
--- a/client/src/components/ui-playground/PlaygroundMain.tsx
+++ b/client/src/components/ui-playground/PlaygroundMain.tsx
@@ -23,6 +23,7 @@ import {
   Sun,
   Moon,
   Globe,
+  Clock,
   Shield,
   MousePointer2,
   Hand,
@@ -54,22 +55,24 @@ import { createDeterministicToolMessages } from "./playground-helpers";
 import type { MCPPromptResult } from "@/components/chat-v2/mcp-prompts-popover";
 import {
   useUIPlaygroundStore,
+  DEVICE_VIEWPORT_CONFIGS,
   type DeviceType,
   type DisplayMode,
   type CspMode,
+  type AppProtocol,
 } from "@/stores/ui-playground-store";
 import { SafeAreaEditor } from "./SafeAreaEditor";
 import { usePostHog } from "posthog-js/react";
 import { detectEnvironment, detectPlatform } from "@/lib/PosthogUtils";
 
-/** Device frame configurations */
+/** Device frame configurations - extends shared viewport config with UI properties */
 const DEVICE_CONFIGS: Record<
   DeviceType,
   { width: number; height: number; label: string; icon: typeof Smartphone }
 > = {
-  mobile: { width: 430, height: 932, label: "Phone", icon: Smartphone },
-  tablet: { width: 820, height: 1180, label: "Tablet", icon: Tablet },
-  desktop: { width: 1280, height: 800, label: "Desktop", icon: Monitor },
+  mobile: { ...DEVICE_VIEWPORT_CONFIGS.mobile, label: "Phone", icon: Smartphone },
+  tablet: { ...DEVICE_VIEWPORT_CONFIGS.tablet, label: "Tablet", icon: Tablet },
+  desktop: { ...DEVICE_VIEWPORT_CONFIGS.desktop, label: "Desktop", icon: Monitor },
 };
 
 /** Common BCP 47 locales for testing (per OpenAI Apps SDK spec) */
@@ -92,6 +95,29 @@ const LOCALE_OPTIONS = [
   { code: "nl-NL", label: "Nederlands" },
 ];
 
+/** Common IANA timezones for testing (per SEP-1865 MCP Apps spec) */
+const TIMEZONE_OPTIONS = [
+  { zone: "America/New_York", label: "New York", offset: "UTC-5/-4" },
+  { zone: "America/Chicago", label: "Chicago", offset: "UTC-6/-5" },
+  { zone: "America/Denver", label: "Denver", offset: "UTC-7/-6" },
+  { zone: "America/Los_Angeles", label: "Los Angeles", offset: "UTC-8/-7" },
+  { zone: "America/Sao_Paulo", label: "São Paulo", offset: "UTC-3" },
+  { zone: "America/Mexico_City", label: "Mexico City", offset: "UTC-6/-5" },
+  { zone: "Europe/London", label: "London", offset: "UTC+0/+1" },
+  { zone: "Europe/Paris", label: "Paris", offset: "UTC+1/+2" },
+  { zone: "Europe/Berlin", label: "Berlin", offset: "UTC+1/+2" },
+  { zone: "Europe/Moscow", label: "Moscow", offset: "UTC+3" },
+  { zone: "Asia/Dubai", label: "Dubai", offset: "UTC+4" },
+  { zone: "Asia/Kolkata", label: "Mumbai", offset: "UTC+5:30" },
+  { zone: "Asia/Singapore", label: "Singapore", offset: "UTC+8" },
+  { zone: "Asia/Shanghai", label: "Shanghai", offset: "UTC+8" },
+  { zone: "Asia/Tokyo", label: "Tokyo", offset: "UTC+9" },
+  { zone: "Asia/Seoul", label: "Seoul", offset: "UTC+9" },
+  { zone: "Australia/Sydney", label: "Sydney", offset: "UTC+10/+11" },
+  { zone: "Pacific/Auckland", label: "Auckland", offset: "UTC+12/+13" },
+  { zone: "UTC", label: "UTC", offset: "UTC+0" },
+];
+
 /** CSP mode options for widget sandbox */
 const CSP_MODE_OPTIONS: {
   mode: CspMode;
@@ -133,6 +159,9 @@ interface PlaygroundMainProps {
   // Locale (BCP 47)
   locale?: string;
   onLocaleChange?: (locale: string) => void;
+  // Timezone (IANA) per SEP-1865
+  timeZone?: string;
+  onTimeZoneChange?: (timeZone: string) => void;
 }
 
 function ScrollToBottomButton() {
@@ -193,6 +222,8 @@ export function PlaygroundMain({
   onDisplayModeChange,
   locale = "en-US",
   onLocaleChange,
+  timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC",
+  onTimeZoneChange,
 }: PlaygroundMainProps) {
   const posthog = usePostHog();
   const [input, setInput] = useState("");
@@ -261,14 +292,31 @@ export function PlaygroundMain({
     return () => setPlaygroundActive(false);
   }, [setPlaygroundActive]);
 
-  // CSP mode from store
+  // CSP mode from store (ChatGPT Apps)
   const cspMode = useUIPlaygroundStore((s) => s.cspMode);
   const setCspMode = useUIPlaygroundStore((s) => s.setCspMode);
 
+  // CSP mode for MCP Apps (SEP-1865)
+  const mcpAppsCspMode = useUIPlaygroundStore((s) => s.mcpAppsCspMode);
+  const setMcpAppsCspMode = useUIPlaygroundStore((s) => s.setMcpAppsCspMode);
+
+  // Currently selected protocol (detected from tool metadata)
+  const selectedProtocol = useUIPlaygroundStore((s) => s.selectedProtocol);
+
+  // Protocol-aware CSP mode: use the correct store based on detected protocol
+  const activeCspMode = selectedProtocol === "mcp-apps" ? mcpAppsCspMode : cspMode;
+  const setActiveCspMode = selectedProtocol === "mcp-apps" ? setMcpAppsCspMode : setCspMode;
+
   // Device capabilities from store
   const capabilities = useUIPlaygroundStore((s) => s.capabilities);
   const setCapabilities = useUIPlaygroundStore((s) => s.setCapabilities);
 
+  // Show ChatGPT Apps controls when: no protocol selected (default) or openai-apps
+  const showChatGPTControls =
+    selectedProtocol === null || selectedProtocol === "openai-apps";
+  // Show MCP Apps controls when mcp-apps protocol is selected
+  const showMCPAppsControls = selectedProtocol === "mcp-apps";
+
   // Check if thread is empty
   const isThreadEmpty = !messages.some(
     (msg) => msg.role === "user" || msg.role === "assistant",
@@ -468,173 +516,381 @@ export function PlaygroundMain({
       <div className="relative flex items-center justify-center px-3 py-2 border-b border-border bg-background/50 text-xs text-muted-foreground flex-shrink-0">
         {/* All controls centered */}
         <div className="flex items-center gap-4">
-          {/* Device type selector */}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div>
-                <Select
-                  value={deviceType}
-                  onValueChange={(v) => onDeviceTypeChange?.(v as DeviceType)}
-                >
-                  <SelectTrigger
-                    size="sm"
-                    className="h-7 w-auto min-w-[100px] text-xs border-none shadow-none bg-transparent hover:bg-accent"
-                  >
-                    <DeviceIcon className="h-3.5 w-3.5" />
-                    <SelectValue>{deviceConfig.label}</SelectValue>
-                  </SelectTrigger>
-                  <SelectContent>
-                    {(
-                      Object.entries(DEVICE_CONFIGS) as [
-                        DeviceType,
-                        typeof deviceConfig,
-                      ][]
-                    ).map(([type, config]) => {
-                      const Icon = config.icon;
-                      return (
-                        <SelectItem key={type} value={type}>
-                          <span className="flex items-center gap-2">
-                            <Icon className="h-3.5 w-3.5" />
-                            <span>{config.label}</span>
-                            <span className="text-muted-foreground text-[10px]">
-                              ({config.width}×{config.height})
+          {/* ChatGPT Apps controls */}
+          {showChatGPTControls && (
+            <>
+              {/* Device type selector */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <Select
+                      value={deviceType}
+                      onValueChange={(v) => onDeviceTypeChange?.(v as DeviceType)}
+                    >
+                      <SelectTrigger
+                        size="sm"
+                        className="h-7 w-auto min-w-[100px] text-xs border-none shadow-none bg-transparent hover:bg-accent"
+                      >
+                        <DeviceIcon className="h-3.5 w-3.5" />
+                        <SelectValue>{deviceConfig.label}</SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(Object.entries(DEVICE_CONFIGS) as [DeviceType, typeof deviceConfig][]).map(
+                          ([type, config]) => {
+                            const Icon = config.icon;
+                            return (
+                              <SelectItem key={type} value={type}>
+                                <span className="flex items-center gap-2">
+                                  <Icon className="h-3.5 w-3.5" />
+                                  <span>{config.label}</span>
+                                  <span className="text-muted-foreground text-[10px]">
+                                    ({config.width}×{config.height})
+                                  </span>
+                                </span>
+                              </SelectItem>
+                            );
+                          }
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="font-medium">Device</p>
+                </TooltipContent>
+              </Tooltip>
+
+              {/* Locale selector */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <Select value={locale} onValueChange={onLocaleChange}>
+                      <SelectTrigger
+                        size="sm"
+                        className="h-7 w-auto min-w-[70px] text-xs border-none shadow-none bg-transparent hover:bg-accent"
+                      >
+                        <Globe className="h-3.5 w-3.5" />
+                        <SelectValue>{locale}</SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {LOCALE_OPTIONS.map((option) => (
+                          <SelectItem key={option.code} value={option.code}>
+                            <span className="flex items-center gap-2">
+                              <span>{option.label}</span>
+                              <span className="text-muted-foreground text-[10px]">
+                                {option.code}
+                              </span>
                             </span>
-                          </span>
-                        </SelectItem>
-                      );
-                    })}
-                  </SelectContent>
-                </Select>
-              </div>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p className="font-medium">Device</p>
-            </TooltipContent>
-          </Tooltip>
-          {/* Locale selector */}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div>
-                <Select value={locale} onValueChange={onLocaleChange}>
-                  <SelectTrigger
-                    size="sm"
-                    className="h-7 w-auto min-w-[70px] text-xs border-none shadow-none bg-transparent hover:bg-accent"
-                  >
-                    <Globe className="h-3.5 w-3.5" />
-                    <SelectValue>{locale}</SelectValue>
-                  </SelectTrigger>
-                  <SelectContent>
-                    {LOCALE_OPTIONS.map((option) => (
-                      <SelectItem key={option.code} value={option.code}>
-                        <span className="flex items-center gap-2">
-                          <span>{option.label}</span>
-                          <span className="text-muted-foreground text-[10px]">
-                            {option.code}
-                          </span>
-                        </span>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p className="font-medium">Locale</p>
-            </TooltipContent>
-          </Tooltip>
-
-          {/* CSP mode selector */}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div>
-                <Select
-                  value={cspMode}
-                  onValueChange={(v) => setCspMode(v as CspMode)}
-                >
-                  <SelectTrigger
-                    size="sm"
-                    className="h-7 w-auto min-w-[90px] text-xs border-none shadow-none bg-transparent hover:bg-accent"
-                  >
-                    <Shield className="h-3.5 w-3.5" />
-                    <SelectValue>
-                      {CSP_MODE_OPTIONS.find((o) => o.mode === cspMode)?.label}
-                    </SelectValue>
-                  </SelectTrigger>
-                  <SelectContent>
-                    {CSP_MODE_OPTIONS.map((option) => (
-                      <SelectItem key={option.mode} value={option.mode}>
-                        <span className="flex items-center gap-2">
-                          <span className="font-medium">{option.label}</span>
-                          <span className="text-muted-foreground text-[10px]">
-                            {option.description}
-                          </span>
-                        </span>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="font-medium">Locale</p>
+                </TooltipContent>
+              </Tooltip>
+
+              {/* CSP mode selector - uses protocol-aware store */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <Select
+                      value={activeCspMode}
+                      onValueChange={(v) => setActiveCspMode(v as CspMode)}
+                    >
+                      <SelectTrigger
+                        size="sm"
+                        className="h-7 w-auto min-w-[90px] text-xs border-none shadow-none bg-transparent hover:bg-accent"
+                      >
+                        <Shield className="h-3.5 w-3.5" />
+                        <SelectValue>
+                          {CSP_MODE_OPTIONS.find((o) => o.mode === activeCspMode)?.label}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {CSP_MODE_OPTIONS.map((option) => (
+                          <SelectItem key={option.mode} value={option.mode}>
+                            <span className="flex items-center gap-2">
+                              <span className="font-medium">{option.label}</span>
+                              <span className="text-muted-foreground text-[10px]">
+                                {option.description}
+                              </span>
+                            </span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="font-medium">CSP</p>
+                </TooltipContent>
+              </Tooltip>
+
+              {/* Capabilities toggles */}
+              <div className="flex items-center gap-0.5">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant={capabilities.hover ? "secondary" : "ghost"}
+                      size="icon"
+                      onClick={() =>
+                        setCapabilities({ hover: !capabilities.hover })
+                      }
+                      className="h-7 w-7"
+                    >
+                      <MousePointer2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="font-medium">Hover</p>
+                    <p className="text-xs text-muted-foreground">
+                      {capabilities.hover ? "Enabled" : "Disabled"}
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant={capabilities.touch ? "secondary" : "ghost"}
+                      size="icon"
+                      onClick={() =>
+                        setCapabilities({ touch: !capabilities.touch })
+                      }
+                      className="h-7 w-7"
+                    >
+                      <Hand className="h-3.5 w-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="font-medium">Touch</p>
+                    <p className="text-xs text-muted-foreground">
+                      {capabilities.touch ? "Enabled" : "Disabled"}
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
               </div>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p className="font-medium">CSP</p>
-            </TooltipContent>
-          </Tooltip>
 
-          {/* Capabilities toggles */}
-          <div className="flex items-center gap-0.5">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant={capabilities.hover ? "secondary" : "ghost"}
-                  size="icon"
-                  onClick={() =>
-                    setCapabilities({ hover: !capabilities.hover })
-                  }
-                  className="h-7 w-7"
-                >
-                  <MousePointer2 className="h-3.5 w-3.5" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p className="font-medium">Hover</p>
-                <p className="text-xs text-muted-foreground">
-                  {capabilities.hover ? "Enabled" : "Disabled"}
-                </p>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant={capabilities.touch ? "secondary" : "ghost"}
-                  size="icon"
-                  onClick={() =>
-                    setCapabilities({ touch: !capabilities.touch })
-                  }
-                  className="h-7 w-7"
-                >
-                  <Hand className="h-3.5 w-3.5" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p className="font-medium">Touch</p>
-                <p className="text-xs text-muted-foreground">
-                  {capabilities.touch ? "Enabled" : "Disabled"}
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </div>
+              {/* Safe area editor */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <SafeAreaEditor />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="font-medium">Safe Area</p>
+                </TooltipContent>
+              </Tooltip>
+            </>
+          )}
 
-          {/* Safe area editor */}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div>
-                <SafeAreaEditor />
+          {/* MCP Apps controls (SEP-1865) */}
+          {showMCPAppsControls && (
+            <>
+              {/* Device type selector */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <Select
+                      value={deviceType}
+                      onValueChange={(v) => onDeviceTypeChange?.(v as DeviceType)}
+                    >
+                      <SelectTrigger
+                        size="sm"
+                        className="h-7 w-auto min-w-[100px] text-xs border-none shadow-none bg-transparent hover:bg-accent"
+                      >
+                        <DeviceIcon className="h-3.5 w-3.5" />
+                        <SelectValue>{deviceConfig.label}</SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(Object.entries(DEVICE_CONFIGS) as [DeviceType, typeof deviceConfig][]).map(
+                          ([type, config]) => {
+                            const Icon = config.icon;
+                            return (
+                              <SelectItem key={type} value={type}>
+                                <span className="flex items-center gap-2">
+                                  <Icon className="h-3.5 w-3.5" />
+                                  <span>{config.label}</span>
+                                  <span className="text-muted-foreground text-[10px]">
+                                    ({config.width}×{config.height})
+                                  </span>
+                                </span>
+                              </SelectItem>
+                            );
+                          }
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="font-medium">Device</p>
+                </TooltipContent>
+              </Tooltip>
+
+              {/* Locale selector */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <Select value={locale} onValueChange={onLocaleChange}>
+                      <SelectTrigger
+                        size="sm"
+                        className="h-7 w-auto min-w-[70px] text-xs border-none shadow-none bg-transparent hover:bg-accent"
+                      >
+                        <Globe className="h-3.5 w-3.5" />
+                        <SelectValue>{locale}</SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {LOCALE_OPTIONS.map((option) => (
+                          <SelectItem key={option.code} value={option.code}>
+                            <span className="flex items-center gap-2">
+                              <span>{option.label}</span>
+                              <span className="text-muted-foreground text-[10px]">
+                                {option.code}
+                              </span>
+                            </span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="font-medium">Locale</p>
+                </TooltipContent>
+              </Tooltip>
+
+              {/* Timezone selector (SEP-1865) */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <Select value={timeZone} onValueChange={onTimeZoneChange}>
+                      <SelectTrigger
+                        size="sm"
+                        className="h-7 w-auto min-w-[90px] text-xs border-none shadow-none bg-transparent hover:bg-accent"
+                      >
+                        <Clock className="h-3.5 w-3.5" />
+                        <SelectValue>
+                          {TIMEZONE_OPTIONS.find((o) => o.zone === timeZone)?.label || timeZone}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {TIMEZONE_OPTIONS.map((option) => (
+                          <SelectItem key={option.zone} value={option.zone}>
+                            <span className="flex items-center gap-2">
+                              <span>{option.label}</span>
+                              <span className="text-muted-foreground text-[10px]">
+                                {option.offset}
+                              </span>
+                            </span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="font-medium">Timezone</p>
+                </TooltipContent>
+              </Tooltip>
+
+              {/* CSP mode selector */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <Select
+                      value={mcpAppsCspMode}
+                      onValueChange={(v) => setMcpAppsCspMode(v as CspMode)}
+                    >
+                      <SelectTrigger
+                        size="sm"
+                        className="h-7 w-auto min-w-[90px] text-xs border-none shadow-none bg-transparent hover:bg-accent"
+                      >
+                        <Shield className="h-3.5 w-3.5" />
+                        <SelectValue>
+                          {CSP_MODE_OPTIONS.find((o) => o.mode === mcpAppsCspMode)?.label}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {CSP_MODE_OPTIONS.map((option) => (
+                          <SelectItem key={option.mode} value={option.mode}>
+                            <span className="flex items-center gap-2">
+                              <span className="font-medium">{option.label}</span>
+                              <span className="text-muted-foreground text-[10px]">
+                                {option.description}
+                              </span>
+                            </span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="font-medium">CSP</p>
+                </TooltipContent>
+              </Tooltip>
+
+              {/* Capabilities toggles */}
+              <div className="flex items-center gap-0.5">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant={capabilities.hover ? "secondary" : "ghost"}
+                      size="icon"
+                      onClick={() =>
+                        setCapabilities({ hover: !capabilities.hover })
+                      }
+                      className="h-7 w-7"
+                    >
+                      <MousePointer2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="font-medium">Hover</p>
+                    <p className="text-xs text-muted-foreground">
+                      {capabilities.hover ? "Enabled" : "Disabled"}
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant={capabilities.touch ? "secondary" : "ghost"}
+                      size="icon"
+                      onClick={() =>
+                        setCapabilities({ touch: !capabilities.touch })
+                      }
+                      className="h-7 w-7"
+                    >
+                      <Hand className="h-3.5 w-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="font-medium">Touch</p>
+                    <p className="text-xs text-muted-foreground">
+                      {capabilities.touch ? "Enabled" : "Disabled"}
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
               </div>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p className="font-medium">Safe Area</p>
-            </TooltipContent>
-          </Tooltip>
+
+              {/* Safe area editor */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    <SafeAreaEditor />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="font-medium">Safe Area</p>
+                </TooltipContent>
+              </Tooltip>
+            </>
+          )}
 
           {/* Theme toggle */}
           <Tooltip>
diff --git a/client/src/components/ui-playground/UIPlaygroundTab.tsx b/client/src/components/ui-playground/UIPlaygroundTab.tsx
index 207bd4994..798998834 100644
--- a/client/src/components/ui-playground/UIPlaygroundTab.tsx
+++ b/client/src/components/ui-playground/UIPlaygroundTab.tsx
@@ -57,6 +57,7 @@ export function UIPlaygroundTab({
     displayMode,
     globals,
     isSidebarVisible,
+    selectedProtocol,
     setTools,
     setSelectedTool,
     setFormFields,
@@ -71,6 +72,7 @@ export function UIPlaygroundTab({
     setDisplayMode,
     updateGlobal,
     toggleSidebar,
+    setSelectedProtocol,
     reset,
   } = useUIPlaygroundStore();
 
@@ -87,6 +89,14 @@ export function UIPlaygroundTab({
     [updateGlobal],
   );
 
+  // Timezone change handler (SEP-1865)
+  const handleTimeZoneChange = useCallback(
+    (timeZone: string) => {
+      updateGlobal("timeZone", timeZone);
+    },
+    [updateGlobal],
+  );
+
   // Log when App Builder tab is viewed
   useEffect(() => {
     posthog.capture("app_builder_tab_viewed", {
@@ -195,6 +205,46 @@ export function UIPlaygroundTab({
     }
   }, [selectedTool, tools, setFormFields]);
 
+  // Detect app protocol - from selected tool OR from server's available tools
+  useEffect(() => {
+    // If a specific tool is selected, detect its protocol
+    if (selectedTool) {
+      const meta = toolsMetadata[selectedTool];
+      if (meta?.["openai/outputTemplate"] != null) {
+        setSelectedProtocol("openai-apps");
+      } else if (meta?.["ui/resourceUri"] != null) {
+        setSelectedProtocol("mcp-apps");
+      } else {
+        setSelectedProtocol(null);
+      }
+      return;
+    }
+
+    // No tool selected - detect predominant protocol from all tools
+    const toolMetaEntries = Object.values(toolsMetadata);
+    if (toolMetaEntries.length === 0) {
+      setSelectedProtocol(null);
+      return;
+    }
+
+    const hasOpenAI = toolMetaEntries.some(
+      (meta) => meta?.["openai/outputTemplate"] != null,
+    );
+    const hasMCPApps = toolMetaEntries.some(
+      (meta) => meta?.["ui/resourceUri"] != null,
+    );
+
+    // If server only has one protocol type, use that
+    if (hasMCPApps && !hasOpenAI) {
+      setSelectedProtocol("mcp-apps");
+    } else if (hasOpenAI && !hasMCPApps) {
+      setSelectedProtocol("openai-apps");
+    } else {
+      // Mixed or no app tools - default to null (shows ChatGPT controls)
+      setSelectedProtocol(null);
+    }
+  }, [selectedTool, toolsMetadata, setSelectedProtocol]);
+
   // Get invoking message from tool metadata
   const invokingMessage = useMemo(() => {
     if (!selectedTool) return null;
@@ -288,6 +338,8 @@ export function UIPlaygroundTab({
             onDisplayModeChange={setDisplayMode}
             locale={globals.locale}
             onLocaleChange={handleLocaleChange}
+            timeZone={globals.timeZone}
+            onTimeZoneChange={handleTimeZoneChange}
           />
         </ResizablePanel>
       </ResizablePanelGroup>
diff --git a/client/src/components/ui/sandboxed-iframe.tsx b/client/src/components/ui/sandboxed-iframe.tsx
index 6627dc589..e6b70d39a 100644
--- a/client/src/components/ui/sandboxed-iframe.tsx
+++ b/client/src/components/ui/sandboxed-iframe.tsx
@@ -40,6 +40,8 @@ interface SandboxedIframeProps {
   sandbox?: string;
   /** CSP metadata from resource _meta.ui.csp (SEP-1865) */
   csp?: UIResourceCSP;
+  /** Skip CSP injection entirely (for permissive/testing mode) */
+  permissive?: boolean;
   /** Callback when sandbox proxy is ready */
   onProxyReady?: () => void;
   /** Callback for messages from guest UI (excluding sandbox-internal messages) */
@@ -68,6 +70,7 @@ export const SandboxedIframe = forwardRef<
     html,
     sandbox = "allow-scripts allow-same-origin allow-forms allow-popups",
     csp,
+    permissive,
     onProxyReady,
     onMessage,
     className,
@@ -126,6 +129,12 @@ export const SandboxedIframe = forwardRef<
       }
       if (event.source !== outerRef.current?.contentWindow) return;
 
+      // CSP violation messages (not JSON-RPC) - forward directly
+      if (event.data?.type === "mcp-apps:csp-violation") {
+        onMessage(event);
+        return;
+      }
+
       const { jsonrpc, method } =
         (event.data as { jsonrpc?: string; method?: string }) || {};
       if (jsonrpc !== "2.0") return;
@@ -158,11 +167,11 @@ export const SandboxedIframe = forwardRef<
       {
         jsonrpc: "2.0",
         method: "ui/notifications/sandbox-resource-ready",
-        params: { html, sandbox, csp },
+        params: { html, sandbox, csp, permissive },
       },
       sandboxProxyOrigin,
     );
-  }, [proxyReady, html, sandbox, csp, sandboxProxyOrigin]);
+  }, [proxyReady, html, sandbox, csp, permissive, sandboxProxyOrigin]);
 
   return (
     <iframe
diff --git a/client/src/stores/ui-playground-store.ts b/client/src/stores/ui-playground-store.ts
index fe49920c5..3ccca5062 100644
--- a/client/src/stores/ui-playground-store.ts
+++ b/client/src/stores/ui-playground-store.ts
@@ -11,8 +11,16 @@ import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import type { FormField } from "@/lib/tool-form";
 
 export type DeviceType = "mobile" | "tablet" | "desktop";
+
+/** Device viewport configurations - shared across playground and MCP apps renderer */
+export const DEVICE_VIEWPORT_CONFIGS: Record<DeviceType, { width: number; height: number }> = {
+  mobile: { width: 430, height: 932 },
+  tablet: { width: 820, height: 1180 },
+  desktop: { width: 1280, height: 800 },
+};
 export type DisplayMode = "inline" | "pip" | "fullscreen";
 export type CspMode = "permissive" | "widget-declared";
+export type AppProtocol = "openai-apps" | "mcp-apps" | null;
 
 export interface DeviceCapabilities {
   hover: boolean;
@@ -54,6 +62,7 @@ export interface UserLocation {
 export interface PlaygroundGlobals {
   theme: "light" | "dark";
   locale: string;
+  timeZone: string; // IANA timezone (e.g., "America/New_York") per SEP-1865
   deviceType: DeviceType;
   displayMode: DisplayMode;
   userLocation: UserLocation | null;
@@ -99,9 +108,15 @@ interface UIPlaygroundState {
   // Panel visibility
   isSidebarVisible: boolean;
 
-  // CSP enforcement mode for widget sandbox
+  // CSP enforcement mode for widget sandbox (ChatGPT Apps)
   cspMode: CspMode;
 
+  // CSP enforcement mode for MCP Apps (SEP-1865)
+  mcpAppsCspMode: CspMode;
+
+  // Currently selected app protocol (detected from tool metadata)
+  selectedProtocol: AppProtocol;
+
   // Device capabilities (hover/touch support)
   capabilities: DeviceCapabilities;
 
@@ -135,6 +150,8 @@ interface UIPlaygroundState {
   setSidebarVisible: (visible: boolean) => void;
   setPlaygroundActive: (active: boolean) => void;
   setCspMode: (mode: CspMode) => void;
+  setMcpAppsCspMode: (mode: CspMode) => void;
+  setSelectedProtocol: (protocol: AppProtocol) => void;
   setCapabilities: (capabilities: Partial<DeviceCapabilities>) => void;
   setSafeAreaPreset: (preset: SafeAreaPreset) => void;
   setSafeAreaInsets: (insets: Partial<SafeAreaInsets>) => void;
@@ -144,6 +161,7 @@ interface UIPlaygroundState {
 const getInitialGlobals = (): PlaygroundGlobals => ({
   theme: "dark",
   locale: navigator.language || "en-US",
+  timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC",
   deviceType: "desktop",
   displayMode: "inline",
   userLocation: null,
@@ -191,6 +209,8 @@ const initialState = {
   followUpMessages: [] as FollowUpMessage[],
   isSidebarVisible: getStoredVisibility(STORAGE_KEY_SIDEBAR, true),
   cspMode: "permissive" as CspMode,
+  mcpAppsCspMode: "permissive" as CspMode,
+  selectedProtocol: null as AppProtocol,
   capabilities: getDefaultCapabilities("desktop"),
   safeAreaPreset: "none" as SafeAreaPreset,
   safeAreaInsets: SAFE_AREA_PRESETS["none"],
@@ -210,6 +230,7 @@ export const useUIPlaygroundStore = create<UIPlaygroundState>((set) => ({
       widgetUrl: null,
       widgetState: null,
       isWidgetTool: false,
+      selectedProtocol: null, // Reset protocol on tool change, will be set by UIPlaygroundTab
     }),
 
   setFormFields: (formFields) => set({ formFields }),
@@ -297,6 +318,10 @@ export const useUIPlaygroundStore = create<UIPlaygroundState>((set) => ({
 
   setCspMode: (mode) => set({ cspMode: mode }),
 
+  setMcpAppsCspMode: (mode) => set({ mcpAppsCspMode: mode }),
+
+  setSelectedProtocol: (protocol) => set({ selectedProtocol: protocol }),
+
   setCapabilities: (newCapabilities) =>
     set((state) => ({
       capabilities: { ...state.capabilities, ...newCapabilities },
diff --git a/client/src/stores/widget-debug-store.ts b/client/src/stores/widget-debug-store.ts
index ceb25988d..50fc73f78 100644
--- a/client/src/stores/widget-debug-store.ts
+++ b/client/src/stores/widget-debug-store.ts
@@ -103,6 +103,9 @@ interface WidgetDebugStore {
 
   // Add a CSP violation for a widget
   addCspViolation: (toolCallId: string, violation: CspViolation) => void;
+
+  // Clear CSP violations for a widget (e.g., when CSP mode changes)
+  clearCspViolations: (toolCallId: string) => void;
 }
 
 export const useWidgetDebugStore = create<WidgetDebugStore>((set, get) => ({
@@ -125,6 +128,7 @@ export const useWidgetDebugStore = create<WidgetDebugStore>((set, get) => ({
             theme: "dark",
             displayMode: "inline",
           },
+        csp: existing?.csp, // Preserve CSP violations across updates
         updatedAt: Date.now(),
       });
       return { widgets };
@@ -219,4 +223,22 @@ export const useWidgetDebugStore = create<WidgetDebugStore>((set, get) => ({
       return { widgets };
     });
   },
+
+  clearCspViolations: (toolCallId) => {
+    set((state) => {
+      const existing = state.widgets.get(toolCallId);
+      if (!existing?.csp) return state;
+
+      const widgets = new Map(state.widgets);
+      widgets.set(toolCallId, {
+        ...existing,
+        csp: {
+          ...existing.csp,
+          violations: [],
+        },
+        updatedAt: Date.now(),
+      });
+      return { widgets };
+    });
+  },
 }));
diff --git a/server/routes/mcp/apps.ts b/server/routes/mcp/apps.ts
index f496b23cb..00669b4b9 100644
--- a/server/routes/mcp/apps.ts
+++ b/server/routes/mcp/apps.ts
@@ -11,6 +11,11 @@ import "../../types/hono";
 
 const apps = new Hono();
 
+/**
+ * CSP mode types - matches client-side CspMode type
+ */
+type CspMode = "permissive" | "widget-declared";
+
 // Widget data store - SAME PATTERN as openai.ts
 interface WidgetData {
   serverId: string;
@@ -21,6 +26,7 @@ interface WidgetData {
   toolName: string;
   theme?: "light" | "dark";
   protocol: "mcp-apps";
+  cspMode: CspMode; // CSP enforcement mode
   timestamp: number;
 }
 
@@ -53,6 +59,7 @@ apps.post("/widget/store", async (c) => {
       toolName,
       theme,
       protocol,
+      cspMode,
     } = body;
 
     if (!serverId || !resourceUri || !toolId || !toolName) {
@@ -68,6 +75,7 @@ apps.post("/widget/store", async (c) => {
       toolName,
       theme: theme ?? "dark",
       protocol: protocol ?? "mcp-apps",
+      cspMode: cspMode ?? "permissive", // Default to permissive mode
       timestamp: Date.now(),
     });
 
@@ -106,7 +114,13 @@ apps.get("/widget-content/:toolId", async (c) => {
       return c.json({ error: "Widget data not found or expired" }, 404);
     }
 
-    const { serverId, resourceUri } = widgetData;
+    // Read CSP mode from query param (allows override for testing)
+    const cspModeParam = c.req.query("csp_mode") as CspMode | undefined;
+
+    const { serverId, resourceUri, cspMode: storedCspMode } = widgetData;
+
+    // Use query param override if provided, otherwise use stored mode
+    const effectiveCspMode = cspModeParam ?? storedCspMode ?? "permissive";
     const mcpClientManager = c.mcpClientManager;
 
     // REUSE existing mcpClientManager.readResource (same as resources.ts)
@@ -137,23 +151,27 @@ apps.get("/widget-content/:toolId", async (c) => {
     const prefersBorder = uiMeta?.prefersBorder;
 
     // Log CSP configuration for security review (SEP-1865)
-    if (csp) {
-      console.log("[MCP Apps] CSP configuration for %s:", resourceUri, {
-        connectDomains: csp.connectDomains || [],
-        resourceDomains: csp.resourceDomains || [],
-      });
-    } else {
-      console.log(
-        "[MCP Apps] No CSP declared for %s - using restrictive defaults",
-        resourceUri,
-      );
-    }
+    console.log("[MCP Apps] CSP configuration for %s:", resourceUri, {
+      effectiveCspMode,
+      widgetDeclaredCsp: csp
+        ? {
+            connectDomains: csp.connectDomains || [],
+            resourceDomains: csp.resourceDomains || [],
+          }
+        : null,
+    });
+
+    // When in permissive mode, skip CSP entirely (for testing/debugging)
+    // When in widget-declared mode, use the widget's CSP metadata (or restrictive defaults)
+    const isPermissive = effectiveCspMode === "permissive";
 
     // Return JSON with HTML and metadata for CSP enforcement
     c.header("Cache-Control", "no-cache, no-store, must-revalidate");
     return c.json({
       html,
-      csp,
+      csp: isPermissive ? undefined : csp,
+      permissive: isPermissive, // Tell sandbox-proxy to skip CSP injection entirely
+      cspMode: effectiveCspMode,
       prefersBorder,
     });
   } catch (error) {
diff --git a/server/routes/mcp/sandbox-proxy.html b/server/routes/mcp/sandbox-proxy.html
index e96921896..65ad72940 100644
--- a/server/routes/mcp/sandbox-proxy.html
+++ b/server/routes/mcp/sandbox-proxy.html
@@ -5,7 +5,7 @@
     <!-- Permissive CSP so nested content is not constrained by host CSP -->
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; img-src * data: blob: 'unsafe-inline'; media-src * blob: data:; font-src * blob: data:; script-src 'self' 'wasm-unsafe-eval' 'unsafe-inline' 'unsafe-eval' blob: data: https://cdn.tailwindcss.com https://cdn.jsdelivr.net https://unpkg.com http://localhost:* https://localhost:*; style-src * blob: data: 'unsafe-inline'; connect-src *; frame-src * blob: data: http://localhost:* https://localhost:* http://127.0.0.1:* https://127.0.0.1:*; base-uri 'self';"
+      content="default-src 'self'; img-src * data: blob: 'unsafe-inline'; media-src * blob: data:; font-src * blob: data:; script-src 'self' 'wasm-unsafe-eval' 'unsafe-inline' 'unsafe-eval' blob: data: https://cdn.tailwindcss.com https://cdn.jsdelivr.net https://unpkg.com http://localhost:* https://localhost:*; style-src * blob: data: 'unsafe-inline'; connect-src * data: blob: about:; frame-src * blob: data: http://localhost:* https://localhost:* http://127.0.0.1:* https://127.0.0.1:*; base-uri 'self';"
     />
     <title>MCP Apps Sandbox Proxy</title>
     <style>
@@ -77,6 +77,7 @@
             "style-src 'unsafe-inline'",
             "img-src data:",
             "font-src data:",
+            "media-src data:",
             "connect-src 'none'",
             "frame-src 'none'",
             "object-src 'none'",
@@ -110,6 +111,7 @@
           "style-src 'unsafe-inline' " + resourceSrc,
           "img-src " + resourceSrc,
           "font-src " + resourceSrc,
+          "media-src " + resourceSrc,
           "connect-src " + connectSrc,
           "frame-src 'none'",
           "object-src 'none'",
@@ -118,34 +120,62 @@
       }
 
       /**
-       * Inject CSP meta tag into HTML
+       * Build CSP violation listener script
+       * Forwards securitypolicyviolation events to the host via postMessage
+       * @returns {string} Script tag with violation listener
+       */
+      function buildViolationListenerScript() {
+        return `<script>
+document.addEventListener('securitypolicyviolation', function(e) {
+  var violation = {
+    type: 'mcp-apps:csp-violation',
+    directive: e.violatedDirective,
+    blockedUri: e.blockedURI,
+    sourceFile: e.sourceFile || null,
+    lineNumber: e.lineNumber || null,
+    columnNumber: e.columnNumber || null,
+    effectiveDirective: e.effectiveDirective,
+    originalPolicy: e.originalPolicy,
+    disposition: e.disposition,
+    timestamp: Date.now()
+  };
+  console.warn('[MCP Apps CSP Violation]', violation.directive, ':', violation.blockedUri);
+  window.parent.postMessage(violation, '*');
+});
+<\/script>`;
+      }
+
+      /**
+       * Inject CSP meta tag and violation listener into HTML
        * @param {string} html - Original HTML content
        * @param {string} cspValue - CSP policy string
-       * @returns {string} HTML with CSP meta tag injected
+       * @returns {string} HTML with CSP meta tag and violation listener injected
        */
       function injectCSP(html, cspValue) {
         const cspMeta =
           '<meta http-equiv="Content-Security-Policy" content="' +
           cspValue +
           '">';
+        const violationListener = buildViolationListenerScript();
+        const injection = cspMeta + violationListener;
 
         if (html.includes("<head>")) {
-          return html.replace("<head>", "<head>" + cspMeta);
+          return html.replace("<head>", "<head>" + injection);
         } else if (html.includes("<HEAD>")) {
-          return html.replace("<HEAD>", "<HEAD>" + cspMeta);
+          return html.replace("<HEAD>", "<HEAD>" + injection);
         } else if (html.includes("<html>")) {
-          return html.replace("<html>", "<html><head>" + cspMeta + "</head>");
+          return html.replace("<html>", "<html><head>" + injection + "</head>");
         } else if (html.includes("<HTML>")) {
-          return html.replace("<HTML>", "<HTML><head>" + cspMeta + "</head>");
+          return html.replace("<HTML>", "<HTML><head>" + injection + "</head>");
         } else if (html.includes("<!DOCTYPE") || html.includes("<!doctype")) {
           // Insert after doctype
           return html.replace(
             /(<!DOCTYPE[^>]*>|<!doctype[^>]*>)/i,
-            "$1<head>" + cspMeta + "</head>",
+            "$1<head>" + injection + "</head>",
           );
         } else {
-          // Prepend CSP meta tag
-          return cspMeta + html;
+          // Prepend CSP meta tag and listener
+          return injection + html;
         }
       }
 
@@ -168,17 +198,37 @@
             event.data.method === "ui/notifications/sandbox-resource-ready"
           ) {
             // Load HTML into inner iframe with CSP enforcement
-            const { html, sandbox, csp } = event.data.params || {};
+            const { html, sandbox, csp, permissive } = event.data.params || {};
 
             if (typeof sandbox === "string") {
               inner.setAttribute("sandbox", sandbox);
             }
 
             if (typeof html === "string") {
-              // Build CSP and inject into HTML (SEP-1865)
-              const cspValue = buildCSP(csp);
-              const processedHtml = injectCSP(html, cspValue);
-              inner.srcdoc = processedHtml;
+              if (permissive) {
+                // Permissive mode: inject maximally permissive CSP
+                // Must explicitly allow everything since srcdoc inherits parent CSP
+                const permissiveCsp = [
+                  "default-src * 'unsafe-inline' 'unsafe-eval' data: blob: filesystem: about:",
+                  "script-src * 'unsafe-inline' 'unsafe-eval' data: blob:",
+                  "style-src * 'unsafe-inline' data: blob:",
+                  "img-src * data: blob: https: http:",
+                  "media-src * data: blob: https: http:",
+                  "font-src * data: blob: https: http:",
+                  "connect-src * data: blob: https: http: ws: wss: about:",
+                  "frame-src * data: blob: https: http: about:",
+                  "object-src * data: blob:",
+                  "base-uri *",
+                  "form-action *",
+                ].join("; ");
+                const processedHtml = injectCSP(html, permissiveCsp);
+                inner.srcdoc = processedHtml;
+              } else {
+                // Build CSP and inject into HTML (SEP-1865)
+                const cspValue = buildCSP(csp);
+                const processedHtml = injectCSP(html, cspValue);
+                inner.srcdoc = processedHtml;
+              }
             }
           } else {
             // Forward other messages to inner iframe (guest UI)