diff --git a/frontend/src/components/thread/tool-call-side-panel.tsx b/frontend/src/components/thread/tool-call-side-panel.tsx
index 651f6e56..ceac7070 100644
--- a/frontend/src/components/thread/tool-call-side-panel.tsx
+++ b/frontend/src/components/thread/tool-call-side-panel.tsx
@@ -17,6 +17,7 @@ import { BrowserToolView } from "./tool-views/BrowserToolView";
 import { WebSearchToolView } from "./tool-views/WebSearchToolView";
 import { WebCrawlToolView } from "./tool-views/WebCrawlToolView";
 import { DataProviderToolView } from "./tool-views/DataProviderToolView";
+import { ExposePortToolView } from "./tool-views/ExposePortToolView";
 
 // Simple input interface
 export interface ToolCallInput {
@@ -73,6 +74,17 @@ function getToolView(
           isSuccess={isSuccess}
         />
       );
+    case 'expose-port':
+      return (
+        <ExposePortToolView
+          assistantContent={assistantContent}
+          toolContent={toolContent}
+          assistantTimestamp={assistantTimestamp}
+          toolTimestamp={toolTimestamp}
+          isSuccess={isSuccess}
+          isStreaming={isStreaming}
+        />
+      );
     case 'create-file':
     case 'full-file-rewrite':
     case 'delete-file':
diff --git a/frontend/src/components/thread/tool-views/ExposePortToolView.tsx b/frontend/src/components/thread/tool-views/ExposePortToolView.tsx
new file mode 100644
index 00000000..4f5d251e
--- /dev/null
+++ b/frontend/src/components/thread/tool-views/ExposePortToolView.tsx
@@ -0,0 +1,194 @@
+import React from "react";
+import { ToolViewProps } from "./types";
+import { formatTimestamp } from "./utils";
+import { ExternalLink, CheckCircle, AlertTriangle } from "lucide-react";
+import { Markdown } from "@/components/ui/markdown";
+import { cn } from "@/lib/utils";
+
+export function ExposePortToolView({ 
+  name = 'expose-port', 
+  assistantContent, 
+  toolContent, 
+  isSuccess = true, 
+  isStreaming = false,
+  assistantTimestamp, 
+  toolTimestamp 
+}: ToolViewProps) {
+  console.log('ExposePortToolView:', { 
+    name, 
+    assistantContent, 
+    toolContent, 
+    isSuccess, 
+    isStreaming, 
+    assistantTimestamp, 
+    toolTimestamp 
+  });
+
+  // Parse the assistant content
+  const parsedAssistantContent = React.useMemo(() => {
+    if (!assistantContent) return null;
+    try {
+      const parsed = JSON.parse(assistantContent);
+      return parsed.content;
+    } catch (e) {
+      console.error('Failed to parse assistant content:', e);
+      return null;
+    }
+  }, [assistantContent]);
+
+  // Parse the tool result
+  const toolResult = React.useMemo(() => {
+    if (!toolContent) return null;
+    try {
+      // First parse the outer JSON
+      const parsed = JSON.parse(toolContent);
+      // Then extract the tool result content
+      const match = parsed.content.match(/output='(.*?)'/);
+      if (match) {
+        const jsonStr = match[1]
+          .replace(/\\n/g, '')
+          .replace(/\\"/g, '"');
+        return JSON.parse(jsonStr);
+      }
+      return null;
+    } catch (e) {
+      console.error('Failed to parse tool content:', e);
+      return null;
+    }
+  }, [toolContent]);
+
+  // Extract port number from assistant content
+  const portNumber = React.useMemo(() => {
+    if (!parsedAssistantContent) return null;
+    try {
+      const match = parsedAssistantContent.match(/<expose-port>\s*(\d+)\s*<\/expose-port>/);
+      return match ? match[1] : null;
+    } catch (e) {
+      console.error('Failed to extract port number:', e);
+      return null;
+    }
+  }, [parsedAssistantContent]);
+
+  // If we have no content to show, render a placeholder
+  if (!portNumber && !toolResult && !isStreaming) {
+    return (
+      <div className="flex flex-col h-full p-4">
+        <div className="text-xs text-zinc-500 dark:text-zinc-400">
+          No port exposure information available
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 p-4 overflow-auto">
+        {/* Assistant Content */}
+        {portNumber && !isStreaming && (
+          <div className="space-y-1.5">
+            <div className="flex justify-between items-center">
+              <div className="text-xs font-medium text-zinc-500 dark:text-zinc-400">Port to Expose</div>
+              {assistantTimestamp && (
+                <div className="text-xs text-zinc-500 dark:text-zinc-400">{formatTimestamp(assistantTimestamp)}</div>
+              )}
+            </div>
+            <div className="rounded-md border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 p-3">
+              <div className="flex items-center gap-2">
+                <div className="text-xs font-medium text-zinc-800 dark:text-zinc-300">Port</div>
+                <div className="px-2 py-1 rounded-md bg-zinc-100 dark:bg-zinc-800 text-xs font-mono text-zinc-800 dark:text-zinc-300">
+                  {portNumber}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        
+        {/* Tool Result */}
+        {toolResult && (
+          <div className="space-y-1.5 mt-4">
+            <div className="flex justify-between items-center">
+              <div className="text-xs font-medium text-zinc-500 dark:text-zinc-400">
+                {isStreaming ? "Processing" : "Exposed URL"}
+              </div>
+              {toolTimestamp && !isStreaming && (
+                <div className="text-xs text-zinc-500 dark:text-zinc-400">{formatTimestamp(toolTimestamp)}</div>
+              )}
+            </div>
+            <div className={cn(
+              "rounded-md border p-3",
+              isStreaming 
+                ? 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/10' 
+                : isSuccess 
+                  ? 'border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900' 
+                  : 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/10'
+            )}>
+              {isStreaming ? (
+                <div className="flex items-center gap-2 text-xs font-medium text-blue-700 dark:text-blue-400">
+                  <span>Exposing port {portNumber}...</span>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  <div className="flex items-center gap-2">
+                    <ExternalLink className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
+                    <a 
+                      href={toolResult.url} 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      className="text-xs font-medium text-blue-600 dark:text-blue-400 hover:underline break-all"
+                    >
+                      {toolResult.url}
+                    </a>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="text-xs text-zinc-600 dark:text-zinc-400">Port</div>
+                    <div className="px-2 py-1 rounded-md bg-zinc-100 dark:bg-zinc-800 text-xs font-mono text-zinc-800 dark:text-zinc-300">
+                      {toolResult.port}
+                    </div>
+                  </div>
+                  <div className="text-xs text-zinc-600 dark:text-zinc-400">
+                    {toolResult.message}
+                  </div>
+                  <div className="text-xs text-amber-600 dark:text-amber-400 italic">
+                    Note: This URL might only be temporarily available and could expire after some time.
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      
+      {/* Footer */}
+      <div className="p-4 border-t border-zinc-200 dark:border-zinc-800">
+        <div className="flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400">
+          {!isStreaming && (
+            <div className="flex items-center gap-2">
+              {isSuccess ? (
+                <CheckCircle className="h-3.5 w-3.5 text-emerald-500" />
+              ) : (
+                <AlertTriangle className="h-3.5 w-3.5 text-red-500" />
+              )}
+              <span>
+                {isSuccess ? 'Port exposed successfully' : 'Failed to expose port'}
+              </span>
+            </div>
+          )}
+          
+          {isStreaming && (
+            <div className="flex items-center gap-2">
+              <span>Exposing port...</span>
+            </div>
+          )}
+          
+          <div className="text-xs">
+            {toolTimestamp && !isStreaming 
+              ? formatTimestamp(toolTimestamp) 
+              : assistantTimestamp 
+                ? formatTimestamp(assistantTimestamp)
+                : ''}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/src/components/thread/tool-views/GenericToolView.tsx b/frontend/src/components/thread/tool-views/GenericToolView.tsx
index bf5e441a..03d095c9 100644
--- a/frontend/src/components/thread/tool-views/GenericToolView.tsx
+++ b/frontend/src/components/thread/tool-views/GenericToolView.tsx
@@ -59,7 +59,7 @@ export function GenericToolView({
               )}
             </div>
             <div className="rounded-md border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 p-3">
-              <pre className="text-xs overflow-auto whitespace-pre-wrap break-words text-zinc-800 dark:text-zinc-300 font-mono">{formattedAssistantContent}</pre>
+              <Markdown className="text-xs text-zinc-800 dark:text-zinc-300">{formattedAssistantContent}</Markdown>
             </div>
           </div>
         )}
@@ -89,7 +89,7 @@ export function GenericToolView({
                   <span>Executing {toolTitle.toLowerCase()}...</span>
                 </div>
               ) : (
-                <pre className="text-xs overflow-auto whitespace-pre-wrap break-words text-zinc-800 dark:text-zinc-300 font-mono">{formattedToolContent}</pre>
+                <Markdown className="text-xs text-zinc-800 dark:text-zinc-300">{formattedToolContent}</Markdown>
               )}
             </div>
           </div>