feat(basic-host): Unified tool call layout with shared collapsible panels

Author: ochafik

examples/basic-host/src/index.module.css

@@ -72,65 +72,15 @@
 
 .toolCallInfoPanel {
   display: flex;
-  gap: 1rem;
+  flex-direction: column;
+  gap: 0.5rem;
   animation: slideDown 0.3s ease-out;
 }
 
 @keyframes slideDown {
   from { opacity: 0; transform: translateY(-12px); }
 }
 
-.inputInfoPanel {
-  display: flex;
-  flex: 3;
-  flex-direction: column;
-  gap: 0.5rem;
-  min-width: 0;
-
-  h2 {
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-    font-size: 1.5rem;
-    position: relative;
-
-    .toolName {
-      font-family: monospace;
-    }
-
-    .closeButton {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 1.5rem;
-      height: 1.5rem;
-      padding: 0;
-      border: none;
-      border-radius: 4px;
-      background: #e0e0e0;
-      font-size: 1.25rem;
-      line-height: 1;
-      color: #666;
-      cursor: pointer;
-
-      &:hover {
-        background: #d0d0d0;
-        color: #333;
-      }
-    }
-  }
-}
-
-.outputInfoPanel {
-  flex: 4;
-  min-width: 0;
-}
-
-.appOutputPanel {
-  flex: 1;
-  min-width: 0;
-}
-
 .appHeader {
   display: flex;
   align-items: center;
@@ -166,16 +116,6 @@
   }
 }
 
-.jsonBlock {
-  flex-grow: 1;
-  min-height: 0;
-  margin: 0;
-  padding: 1rem;
-  border-radius: 4px;
-  background-color: #f5f5f5;
-  overflow: auto;
-}
-
 .appIframePanel {
   min-height: 200px;
 
@@ -196,6 +136,7 @@
     z-index: 1000;
     margin: 0;
     padding: 1rem;
+    max-width: none;
     background: white;
     border: none;
     border-radius: 0;

examples/basic-host/src/index.tsx

@@ -307,70 +307,50 @@ function ToolCallInfoPanel({ toolCallInfo, isDestroying, onRequestClose, onClose
     }
   }, [isDestroying, isApp, onCloseComplete]);
 
+  const inputJson = JSON.stringify(toolCallInfo.input, null, 2);
+
   return (
     <div
       className={styles.toolCallInfoPanel}
       style={isDestroying ? { opacity: 0.5, pointerEvents: "none" } : undefined}
     >
-      {/* For non-app tools, show input/output side by side */}
-      {!isApp && (
-        <div className={styles.inputInfoPanel}>
-          <h2>
-            <span>{toolCallInfo.serverInfo.name}</span>
-            <span className={styles.toolName}>{toolCallInfo.tool.name}</span>
-            {onRequestClose && !isDestroying && (
-              <button
-                className={styles.closeButton}
-                onClick={onRequestClose}
-                title="Close"
-              >
-                ×
-              </button>
-            )}
-          </h2>
-          <JsonBlock value={toolCallInfo.input} />
-        </div>
-      )}
-      <div className={isApp ? styles.appOutputPanel : styles.outputInfoPanel}>
-        {/* For apps, show header above the app: ServerName:tool_name */}
-        {isApp && (
-          <div className={styles.appHeader}>
-            <span>{toolCallInfo.serverInfo.name}:<span className={styles.toolName}>{toolCallInfo.tool.name}</span></span>
-            {onRequestClose && !isDestroying && (
-              <button
-                className={styles.closeButton}
-                onClick={onRequestClose}
-                title="Close"
-              >
-                ×
-              </button>
-            )}
-          </div>
+      {/* Row 1: Header with server:tool name and close button */}
+      <div className={styles.appHeader}>
+        <span>{toolCallInfo.serverInfo.name}:<span className={styles.toolName}>{toolCallInfo.tool.name}</span></span>
+        {onRequestClose && !isDestroying && (
+          <button
+            className={styles.closeButton}
+            onClick={onRequestClose}
+            title="Close"
+          >
+            ×
+          </button>
         )}
+      </div>
+
+      {/* Row 2: Tool Input */}
+      <CollapsiblePanel icon="📥" label="Tool Input" content={inputJson} />
+
+      {/* Row 3: App iframe (if app) */}
+      {isApp && (
         <ErrorBoundary>
           <Suspense fallback="Loading...">
-            {
-              isApp
-                ? <AppIFramePanel
-                    toolCallInfo={toolCallInfo}
-                    isDestroying={isDestroying}
-                    onTeardownComplete={onCloseComplete}
-                  />
-                : <ToolResultPanel toolCallInfo={toolCallInfo} />
-            }
+            <AppIFramePanel
+              toolCallInfo={toolCallInfo}
+              isDestroying={isDestroying}
+              onTeardownComplete={onCloseComplete}
+            />
           </Suspense>
         </ErrorBoundary>
-      </div>
-    </div>
-  );
-}
-
+      )}
 
-function JsonBlock({ value }: { value: object }) {
-  return (
-    <pre className={styles.jsonBlock}>
-      <code>{JSON.stringify(value, null, 2)}</code>
-    </pre>
+      {/* Row 4: Tool Result */}
+      <ErrorBoundary>
+        <Suspense fallback="Loading result...">
+          <ToolResultPanel toolCallInfo={toolCallInfo} />
+        </Suspense>
+      </ErrorBoundary>
+    </div>
   );
 }
 
@@ -421,7 +401,6 @@ function AppIFramePanel({ toolCallInfo, isDestroying, onTeardownComplete }: AppI
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const appBridgeRef = useRef<ReturnType<typeof newAppBridge> | null>(null);
   const [modelContext, setModelContext] = useState<ModelContext | null>(null);
-  const [toolResult, setToolResult] = useState<object | null>(null);
   const [messages, setMessages] = useState<AppMessage[]>([]);
   const [displayMode, setDisplayMode] = useState<"inline" | "fullscreen">("inline");
 
@@ -452,8 +431,6 @@ function AppIFramePanel({ toolCallInfo, isDestroying, onTeardownComplete }: AppI
       });
     });
 
-    // Track tool result for display
-    toolCallInfo.resultPromise.then(setToolResult).catch(() => {});
   }, [toolCallInfo]);
 
   // Graceful teardown: wait for guest to respond before unmounting
@@ -501,9 +478,6 @@ function AppIFramePanel({ toolCallInfo, isDestroying, onTeardownComplete }: AppI
     : "";
   const fullContext = [contextText, contextJson].filter(Boolean).join("\n\n");
 
-  const inputJson = JSON.stringify(toolCallInfo.input, null, 2);
-  const resultJson = toolResult ? JSON.stringify(toolResult, null, 2) : null;
-
   // Format messages
   const formatMessage = (m: AppMessage) => {
     const content = m.content.map(formatContentBlock).join("\n");
@@ -517,11 +491,7 @@ function AppIFramePanel({ toolCallInfo, isDestroying, onTeardownComplete }: AppI
 
   return (
     <div className={panelClassName}>
-      <CollapsiblePanel icon="📥" label="Tool Input" content={inputJson} />
       <iframe ref={iframeRef} />
-      {resultJson && (
-        <CollapsiblePanel icon="📤" label="Tool Result" content={resultJson} />
-      )}
       {messages.length > 0 && (
         <CollapsiblePanel
           icon="💬"
@@ -543,7 +513,8 @@ interface ToolResultPanelProps {
 }
 function ToolResultPanel({ toolCallInfo }: ToolResultPanelProps) {
   const result = use(toolCallInfo.resultPromise);
-  return <JsonBlock value={result} />;
+  const resultJson = JSON.stringify(result, null, 2);
+  return <CollapsiblePanel icon="📤" label="Tool Result" content={resultJson} />;
 }