From e01ce648c3fd84df688776702fe16984ead3adca Mon Sep 17 00:00:00 2001
From: Andrew Harvard <aharvard@squareup.com>
Date: Tue, 13 Jan 2026 09:25:47 -0500
Subject: [PATCH 1/3] feat(ui): support prefersBorder option for MCP Apps

---
 .../src/components/McpApps/McpAppRenderer.tsx | 49 ++++++++++++++-----
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/ui/desktop/src/components/McpApps/McpAppRenderer.tsx b/ui/desktop/src/components/McpApps/McpAppRenderer.tsx
index 35acaf116864..bebb2d951544 100644
--- a/ui/desktop/src/components/McpApps/McpAppRenderer.tsx
+++ b/ui/desktop/src/components/McpApps/McpAppRenderer.tsx
@@ -32,6 +32,12 @@ interface McpAppRendererProps {
   append?: (text: string) => void;
 }
 
+interface ResourceData {
+  html: string | null;
+  csp: CspMetadata | null;
+  prefersBorder: boolean;
+}
+
 export default function McpAppRenderer({
   resourceUri,
   extensionName,
@@ -42,8 +48,11 @@ export default function McpAppRenderer({
   toolCancelled,
   append,
 }: McpAppRendererProps) {
-  const [resourceHtml, setResourceHtml] = useState<string | null>(null);
-  const [resourceCsp, setResourceCsp] = useState<CspMetadata | null>(null);
+  const [resource, setResource] = useState<ResourceData>({
+    html: null,
+    csp: null,
+    prefersBorder: true,
+  });
   const [error, setError] = useState<string | null>(null);
   const [iframeHeight, setIframeHeight] = useState(DEFAULT_IFRAME_HEIGHT);
 
@@ -60,11 +69,15 @@ export default function McpAppRenderer({
 
         if (response.data) {
           const content = response.data;
-
-          setResourceHtml(content.text);
-
-          const meta = content._meta as { ui?: { csp?: CspMetadata } } | undefined;
-          setResourceCsp(meta?.ui?.csp || null);
+          const meta = content._meta as
+            | { ui?: { csp?: CspMetadata; prefersBorder?: boolean } }
+            | undefined;
+
+          setResource({
+            html: content.text,
+            csp: meta?.ui?.csp || null,
+            prefersBorder: meta?.ui?.prefersBorder ?? true,
+          });
         }
       } catch (err) {
         setError(err instanceof Error ? err.message : 'Failed to load resource');
@@ -161,8 +174,8 @@ export default function McpAppRenderer({
   }, []);
 
   const { iframeRef, proxyUrl } = useSandboxBridge({
-    resourceHtml: resourceHtml || '',
-    resourceCsp,
+    resourceHtml: resource.html || '',
+    resourceCsp: resource.csp,
     resourceUri,
     toolInput,
     toolInputPartial,
@@ -174,15 +187,20 @@ export default function McpAppRenderer({
 
   if (error) {
     return (
-      <div className="mt-3 p-4 border border-red-500 rounded-lg bg-red-50 dark:bg-red-900/20">
+      <div className="p-4 border border-red-500 rounded-lg bg-red-50 dark:bg-red-900/20">
         <div className="text-red-700 dark:text-red-300">Failed to load MCP app: {error}</div>
       </div>
     );
   }
 
-  if (!resourceHtml) {
+  if (!resource.html) {
     return (
-      <div className="mt-3 p-4 border border-borderSubtle rounded-lg bg-bgApp">
+      <div
+        className={cn(
+          'p-4 bg-bgApp',
+          resource.prefersBorder && 'border border-borderSubtle rounded-lg'
+        )}
+      >
         <div className="flex items-center justify-center" style={{ minHeight: '200px' }}>
           Loading MCP app...
         </div>
@@ -191,7 +209,12 @@ export default function McpAppRenderer({
   }
 
   return (
-    <div className={cn('mt-3 bg-bgApp', 'border border-borderSubtle rounded-lg overflow-hidden')}>
+    <div
+      className={cn(
+        'bg-bgApp overflow-hidden',
+        resource.prefersBorder && 'border border-borderSubtle rounded-lg'
+      )}
+    >
       {proxyUrl ? (
         <iframe
           ref={iframeRef}

From d8de8f7c3ef6bdd5c75bd027128dd1d6623bbe6e Mon Sep 17 00:00:00 2001
From: Andrew Harvard <aharvard@squareup.com>
Date: Tue, 13 Jan 2026 09:32:31 -0500
Subject: [PATCH 2/3] refine styles

---
 ui/desktop/src/components/McpApps/McpAppRenderer.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/ui/desktop/src/components/McpApps/McpAppRenderer.tsx b/ui/desktop/src/components/McpApps/McpAppRenderer.tsx
index bebb2d951544..c9ba9ae3d3ff 100644
--- a/ui/desktop/src/components/McpApps/McpAppRenderer.tsx
+++ b/ui/desktop/src/components/McpApps/McpAppRenderer.tsx
@@ -195,12 +195,7 @@ export default function McpAppRenderer({
 
   if (!resource.html) {
     return (
-      <div
-        className={cn(
-          'p-4 bg-bgApp',
-          resource.prefersBorder && 'border border-borderSubtle rounded-lg'
-        )}
-      >
+      <div className={cn('p-4 bg-bgApp border border-borderSubtle rounded-lg')}>
         <div className="flex items-center justify-center" style={{ minHeight: '200px' }}>
           Loading MCP app...
         </div>
@@ -212,7 +207,7 @@ export default function McpAppRenderer({
     <div
       className={cn(
         'bg-bgApp overflow-hidden',
-        resource.prefersBorder && 'border border-borderSubtle rounded-lg'
+        resource.prefersBorder ? 'border border-borderSubtle rounded-lg' : 'my-6'
       )}
     >
       {proxyUrl ? (

From 00e41b63bdf692fd6803e35be6897225fb9627d1 Mon Sep 17 00:00:00 2001
From: Andrew Harvard <aharvard@squareup.com>
Date: Tue, 13 Jan 2026 10:42:04 -0500
Subject: [PATCH 3/3] refactor(McpAppRenderer): improve loading state handling
 and styling

---
 .../src/components/McpApps/McpAppRenderer.tsx | 24 +++----------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/ui/desktop/src/components/McpApps/McpAppRenderer.tsx b/ui/desktop/src/components/McpApps/McpAppRenderer.tsx
index c9ba9ae3d3ff..993142575192 100644
--- a/ui/desktop/src/components/McpApps/McpAppRenderer.tsx
+++ b/ui/desktop/src/components/McpApps/McpAppRenderer.tsx
@@ -193,16 +193,6 @@ export default function McpAppRenderer({
     );
   }
 
-  if (!resource.html) {
-    return (
-      <div className={cn('p-4 bg-bgApp border border-borderSubtle rounded-lg')}>
-        <div className="flex items-center justify-center" style={{ minHeight: '200px' }}>
-          Loading MCP app...
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div
       className={cn(
@@ -210,7 +200,7 @@ export default function McpAppRenderer({
         resource.prefersBorder ? 'border border-borderSubtle rounded-lg' : 'my-6'
       )}
     >
-      {proxyUrl ? (
+      {resource.html && proxyUrl ? (
         <iframe
           ref={iframeRef}
           src={proxyUrl}
@@ -223,16 +213,8 @@ export default function McpAppRenderer({
           sandbox="allow-scripts allow-same-origin"
         />
       ) : (
-        <div
-          style={{
-            width: '100%',
-            minHeight: '200px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          Loading...
+        <div className="flex items-center justify-center p-4" style={{ minHeight: '200px' }}>
+          Loading MCP app...
         </div>
       )}
     </div>