Save backend servers

mcpjam-inspector/client/src/components/chat-v2/thread/chatgpt-app-renderer.tsx

@@ -884,6 +884,7 @@ export function ChatGPTAppRenderer({
       toolName,
       protocol: "openai-apps",
       widgetState: initialWidgetState ?? null,
+      prefersBorder,
       globals: {
         theme: themeMode,
         displayMode: effectiveDisplayMode,
@@ -908,6 +909,7 @@ export function ChatGPTAppRenderer({
     capabilities,
     safeAreaInsets,
     initialWidgetState,
+    prefersBorder,
   ]);
 
   useEffect(() => {

mcpjam-inspector/client/src/components/chat-v2/thread/mcp-apps/mcp-apps-renderer.tsx

@@ -528,6 +528,7 @@ export function MCPAppsRenderer({
       toolName,
       protocol: "mcp-apps",
       widgetState: null, // MCP Apps don't have widget state in the same way
+      prefersBorder,
       globals: {
         theme: themeMode,
         displayMode: effectiveDisplayMode,
@@ -547,6 +548,7 @@ export function MCPAppsRenderer({
     timeZone,
     deviceCapabilities,
     safeAreaInsets,
+    prefersBorder,
   ]);
 
   // Update globals in debug store when they change

mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageDialog.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import { ArrowLeft, MessageSquare } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import { ShareUsageThreadList } from "./ShareUsageThreadList";
+import { ShareUsageThreadDetail } from "./ShareUsageThreadDetail";
+
+interface ShareUsageDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onBackToSettings: () => void;
+  shareId: string;
+  serverName: string;
+}
+
+export function ShareUsageDialog({
+  isOpen,
+  onClose,
+  onBackToSettings,
+  shareId,
+  serverName,
+}: ShareUsageDialogProps) {
+  const [selectedThreadId, setSelectedThreadId] = useState<string | null>(null);
+
+  useEffect(() => {
+    setSelectedThreadId(null);
+  }, [shareId]);
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open: boolean) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent className="sm:max-w-[calc(100vw-4rem)] h-[calc(100vh-4rem)] flex flex-col gap-0 p-0">
+        <DialogHeader className="shrink-0 border-b px-4 py-3">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={onBackToSettings}
+            >
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <DialogTitle className="text-base">
+              Usage &mdash; {serverName}
+            </DialogTitle>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 min-h-0">
+          <ResizablePanelGroup direction="horizontal">
+            <ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
+              <div className="h-full overflow-hidden">
+                <ShareUsageThreadList
+                  shareId={shareId}
+                  selectedThreadId={selectedThreadId}
+                  onSelectThread={setSelectedThreadId}
+                />
+              </div>
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel defaultSize={70}>
+              <div className="h-full overflow-hidden">
+                {selectedThreadId ? (
+                  <ShareUsageThreadDetail threadId={selectedThreadId} />
+                ) : (
+                  <div className="flex h-full items-center justify-center">
+                    <div className="text-center">
+                      <MessageSquare className="mx-auto mb-2 h-8 w-8 text-muted-foreground/50" />
+                      <p className="text-sm text-muted-foreground">
+                        Select a conversation to view
+                      </p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

mcpjam-inspector/client/src/components/connection/share-usage/ShareUsageThreadDetail.tsx

@@ -0,0 +1,225 @@
+import { useEffect, useMemo, useState } from "react";
+import { formatDistanceToNow } from "date-fns";
+import { Loader2, MessageSquare } from "lucide-react";
+import type { ModelDefinition, ModelProvider } from "@/shared/types";
+import { MessageView } from "@/components/chat-v2/thread/message-view";
+import {
+  adaptTraceToUiMessages,
+  type TraceWidgetSnapshot,
+} from "@/components/evals/trace-viewer-adapter";
+import {
+  useSharedChatThread,
+  useSharedChatWidgetSnapshots,
+} from "@/hooks/useSharedChatThreads";
+
+const NOOP = (..._args: unknown[]) => {};
+
+interface ShareUsageThreadDetailProps {
+  threadId: string;
+}
+
+export function ShareUsageThreadDetail({
+  threadId,
+}: ShareUsageThreadDetailProps) {
+  const { thread } = useSharedChatThread({ threadId });
+  const { snapshots } = useSharedChatWidgetSnapshots({ threadId });
+  const [messages, setMessages] = useState<unknown[] | null>(null);
+  const [isLoadingMessages, setIsLoadingMessages] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch messages from blob URL
+  useEffect(() => {
+    if (!thread?.messagesBlobUrl) {
+      setMessages(null);
+      return;
+    }
+
+    let isActive = true;
+    const controller = new AbortController();
+
+    async function fetchMessages() {
+      setIsLoadingMessages(true);
+      setError(null);
+      try {
+        const response = await fetch(thread!.messagesBlobUrl!, {
+          signal: controller.signal,
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to fetch messages: ${response.status}`);
+        }
+        const data = await response.json();
+        if (isActive) {
+          setMessages(data);
+        }
+      } catch (err) {
+        if (!isActive) return;
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        console.error("Failed to load thread messages:", err);
+        setError(
+          err instanceof Error ? err.message : "Failed to load messages",
+        );
+      } finally {
+        if (isActive) {
+          setIsLoadingMessages(false);
+        }
+      }
+    }
+
+    void fetchMessages();
+    return () => {
+      isActive = false;
+      controller.abort();
+    };
+  }, [thread?.messagesBlobUrl]);
+
+  // Transform snapshots to TraceWidgetSnapshot format
+  const widgetSnapshots: TraceWidgetSnapshot[] = useMemo(() => {
+    if (!snapshots || !thread) return [];
+    return snapshots.map((snap) => {
+      // Reconstruct toolMetadata so detectUIType returns the correct widget type.
+      // Without this, PartSwitch won't enter the widget rendering path.
+      const toolMetadata: Record<string, unknown> =
+        snap.uiType === "mcp-apps" && snap.resourceUri
+          ? { ui: { resourceUri: snap.resourceUri } }
+          : snap.uiType === "openai-apps"
+            ? { "openai/outputTemplate": "__cached__" }
+            : {};
+
+      return {
+        toolCallId: snap.toolCallId,
+        toolName: snap.toolName,
+        protocol: snap.uiType,
+        serverId: thread.serverId,
+        resourceUri: snap.resourceUri ?? "",
+        toolMetadata,
+        widgetCsp: snap.widgetCsp,
+        widgetPermissions: snap.widgetPermissions,
+        widgetPermissive: snap.widgetPermissive,
+        prefersBorder: snap.prefersBorder,
+        widgetHtmlUrl: snap.widgetHtmlUrl,
+      };
+    });
+  }, [snapshots, thread]);
+
+  // Adapt trace to UI messages
+  const adaptedTrace = useMemo(() => {
+    if (!messages) return null;
+    return adaptTraceToUiMessages({
+      trace: { messages: messages as any, widgetSnapshots },
+    });
+  }, [messages, widgetSnapshots]);
+
+  const resolvedModel: ModelDefinition = useMemo(
+    () => ({
+      id: thread?.modelId ?? "unknown",
+      name: thread?.modelId ?? "Unknown",
+      provider: "custom" as ModelProvider,
+    }),
+    [thread?.modelId],
+  );
+
+  // Loading state: thread query or messages fetch
+  if (thread === undefined || isLoadingMessages) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (thread === null) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-sm text-muted-foreground">Thread not found</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-sm text-destructive">{error}</p>
+      </div>
+    );
+  }
+
+  if (!adaptedTrace || adaptedTrace.messages.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-sm text-muted-foreground">No messages in thread</p>
+      </div>
+    );
+  }
+
+  const duration =
+    thread.lastActivityAt && thread.startedAt
+      ? thread.lastActivityAt - thread.startedAt
+      : 0;
+  const durationStr =
+    duration > 0
+      ? duration < 60000
+        ? `${Math.round(duration / 1000)}s`
+        : `${Math.round(duration / 60000)}m`
+      : null;
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Thread header */}
+      <div className="shrink-0 border-b px-4 py-3">
+        <div className="flex items-center gap-3">
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium truncate">
+              {thread.visitorDisplayName}
+            </p>
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <span>{thread.modelId}</span>
+              <span>·</span>
+              <span className="flex items-center gap-1">
+                <MessageSquare className="h-3 w-3" />
+                {thread.messageCount} messages
+              </span>
+              {durationStr && (
+                <>
+                  <span>·</span>
+                  <span>{durationStr}</span>
+                </>
+              )}
+              <span>·</span>
+              <span>
+                {formatDistanceToNow(new Date(thread.startedAt), {
+                  addSuffix: true,
+                })}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        <div className="max-w-4xl space-y-8 px-4 py-4">
+          {adaptedTrace.messages.map((message) => (
+            <MessageView
+              key={message.id}
+              message={message}
+              model={resolvedModel}
+              onSendFollowUp={NOOP}
+              toolsMetadata={{}}
+              toolServerMap={{}}
+              pipWidgetId={null}
+              fullscreenWidgetId={null}
+              onRequestPip={NOOP}
+              onExitPip={NOOP}
+              onRequestFullscreen={NOOP}
+              onExitFullscreen={NOOP}
+              toolRenderOverrides={adaptedTrace.toolRenderOverrides}
+              showSaveViewButton={false}
+              minimalMode={true}
+              interactive={false}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}