@tonyclaw/agent-inspector 3.0.6 → 3.0.8

package/src/components/ProxyViewerContainer.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useRef, useMemo, useTransition, type JSX } from "react";
 import { z } from "zod";
 import { CapturedLogSchema, type CapturedLog } from "../contracts";
-import { fetchJson } from "../lib/apiClient";
+import { fetchJson, fetchJsonWithTimeout } from "../lib/apiClient";
 import { InspectorGroupsListResponseSchema, type InspectorGroup } from "../lib/groupContract";
 import { ImportLogsResponseSchema, type ImportLogsResponse } from "../lib/logImportContract";
 import { useStripConfig } from "../lib/useStripConfig";
@@ -118,6 +118,8 @@ const HASH_HIGHLIGHT_MS = 1800;
 const SESSION_PAGE_LIMIT = 100;
 const SESSION_RELOAD_PAGE_LIMIT = 500;
 const MAX_SESSION_RELOAD_PAGES = 200;
+const SESSION_LOGS_FETCH_TIMEOUT_MS = 20_000;
+const SESSION_MEMBERSHIP_FETCH_TIMEOUT_MS = 10_000;
 
 function buildLogsStreamUrl(sessionId: string | undefined): string {
   const params = new URLSearchParams();
@@ -167,6 +169,18 @@ function buildLogIndex(logs: readonly CapturedLog[]): Map<number, number> {
   return idx;
 }
 
+function fetchSessionLogsPage(
+  sessionId: string,
+  request: SessionPageRequest,
+  limit = SESSION_PAGE_LIMIT,
+): Promise<LogCursorPage> {
+  return fetchJsonWithTimeout(
+    buildSessionLogsPageUrl(sessionId, request, limit),
+    LogCursorPageSchema,
+    SESSION_LOGS_FETCH_TIMEOUT_MS,
+  );
+}
+
 export function mergeLogsById(
   previousLogs: readonly CapturedLog[],
   incomingLogs: readonly CapturedLog[],
@@ -357,7 +371,7 @@ export function ProxyViewerContainer({
       setSessionPageLoading(true);
       dismissToast();
 
-      void fetchJson(buildSessionLogsPageUrl(initialSessionId, request), LogCursorPageSchema)
+      void fetchSessionLogsPage(initialSessionId, request)
         .then((page) => {
           if (sessionPageRequestIdRef.current !== requestId) return;
           const nextLogs = page.logs;
@@ -388,9 +402,10 @@ export function ProxyViewerContainer({
 
       void (async () => {
         const collected: CapturedLog[] = [];
-        let page = await fetchJson(
-          buildSessionLogsPageUrl(sessionId, { kind: "oldest" }, SESSION_RELOAD_PAGE_LIMIT),
-          LogCursorPageSchema,
+        let page = await fetchSessionLogsPage(
+          sessionId,
+          { kind: "oldest" },
+          SESSION_RELOAD_PAGE_LIMIT,
         );
         collected.push(...page.logs);
 
@@ -400,13 +415,10 @@ export function ProxyViewerContainer({
           page.newestLogId !== null &&
           loadedPages < MAX_SESSION_RELOAD_PAGES
         ) {
-          page = await fetchJson(
-            buildSessionLogsPageUrl(
-              sessionId,
-              { kind: "newer", afterLogId: page.newestLogId },
-              SESSION_RELOAD_PAGE_LIMIT,
-            ),
-            LogCursorPageSchema,
+          page = await fetchSessionLogsPage(
+            sessionId,
+            { kind: "newer", afterLogId: page.newestLogId },
+            SESSION_RELOAD_PAGE_LIMIT,
           );
           collected.push(...page.logs);
           loadedPages += 1;
@@ -444,13 +456,12 @@ export function ProxyViewerContainer({
     }
 
     let cancelled = false;
-    void fetch("/api/groups")
-      .then(async (response) => {
-        if (!response.ok) return null;
-        const raw: unknown = await response.json();
-        const parsed = InspectorGroupsListResponseSchema.safeParse(raw);
-        return parsed.success ? parsed.data.groups : null;
-      })
+    void fetchJsonWithTimeout(
+      "/api/groups",
+      InspectorGroupsListResponseSchema,
+      SESSION_MEMBERSHIP_FETCH_TIMEOUT_MS,
+    )
+      .then((response) => response.groups)
       .then((groups) => {
         if (cancelled || groups === null) return;
         setSessionMemberships(buildSessionMembershipEvidence(groups, initialSessionId));

package/src/components/alerts/AlertsDialog.tsx

@@ -304,7 +304,7 @@ function AlertList({
                     {categoryLabel(alert.category)}
                   </span>
                 </div>
-                <div className="mt-1 truncate text-sm font-semibold">{alert.title}</div>
+                <div className="mt-1 text-sm font-semibold leading-snug">{alert.title}</div>
                 <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">
                   {alert.message}
                 </div>
@@ -315,8 +315,8 @@ function AlertList({
                 </Badge>
               ) : null}
             </div>
-            <div className="mt-2 flex min-w-0 items-center justify-between gap-2 text-[11px] text-muted-foreground">
-              <span className="truncate">{providerModel(alert)}</span>
+            <div className="mt-2 flex min-w-0 items-start justify-between gap-2 text-[11px] text-muted-foreground">
+              <span className="min-w-0 leading-snug">{providerModel(alert)}</span>
               <span className="shrink-0">{formatTimestamp(alert.lastSeenAt)}</span>
             </div>
           </button>

package/src/components/clients/ClientLogo.tsx

@@ -67,6 +67,20 @@ const CLIENT_LOGOS: Record<Exclude<ClientApp, "unknown">, string> = {
   "claude-code": ClaudeCodeLogoSvg,
 };
 
+const CLIENT_LOGO_FRAMES: Record<Exclude<ClientApp, "unknown">, string> = {
+  codex: "border-cyan-200/20 bg-cyan-300/[0.08]",
+  opencode: "border-sky-200/25 bg-sky-300/[0.12]",
+  "mimo-code": "border-orange-200/25 bg-orange-400/[0.12]",
+  "claude-code": "border-amber-100/20 bg-amber-300/[0.09]",
+};
+
+const CLIENT_LOGO_IMAGES: Record<Exclude<ClientApp, "unknown">, string> = {
+  codex: "p-0.5",
+  opencode: "p-1 drop-shadow-[0_0_8px_rgba(125,211,252,0.35)]",
+  "mimo-code": "p-0.5 drop-shadow-[0_0_8px_rgba(255,105,0,0.35)]",
+  "claude-code": "p-0.5",
+};
+
 export function ClientLogo({
   client,
   className,
@@ -82,13 +96,19 @@ export function ClientLogo({
   return (
     <span
       className={cn(
-        "border border-border bg-muted/40 inline-flex size-6 shrink-0 items-center justify-center rounded-md p-0.5",
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-md border p-0 shadow-sm",
+        CLIENT_LOGO_FRAMES[client],
         className,
       )}
       aria-label={label}
       title={label}
     >
-      <img src={logoSrc} alt="" className="size-full object-contain" aria-hidden="true" />
+      <img
+        src={logoSrc}
+        alt=""
+        className={cn("size-full object-contain", CLIENT_LOGO_IMAGES[client])}
+        aria-hidden="true"
+      />
     </span>
   );
 }

package/src/components/ecosystem/AgentLabDialog.tsx

@@ -1,10 +1,12 @@
-import { type JSX, useMemo, useState } from "react";
+import { type JSX, useEffect, useMemo, useState } from "react";
 import {
   Activity,
   Beaker,
   Check,
   Copy,
+  Download,
   FlaskConical,
+  Loader2,
   Network,
   PackageCheck,
   RefreshCw,
@@ -15,9 +17,12 @@ import {
 import useSWR from "swr";
 import {
   EcosystemPackagesResponseSchema,
+  EcosystemTaskResponseSchema,
   type EcosystemPackage,
   type EcosystemPackageState,
   type EcosystemRunnerPreset,
+  type EcosystemTask,
+  type EcosystemTaskAction,
 } from "../../lib/ecosystemContract";
 import { fetchJson } from "../../lib/apiClient";
 import { copyTextToClipboard } from "../../lib/clipboard";
@@ -87,6 +92,28 @@ async function fetchEcosystemPackages(url: string) {
   );
 }
 
+async function fetchEcosystemTask(url: string) {
+  return fetchJson(
+    url,
+    EcosystemTaskResponseSchema,
+    undefined,
+    (response) => `Failed to load ecosystem task: ${String(response.status)}`,
+  );
+}
+
+async function startEcosystemTask(
+  packageId: string,
+  action: EcosystemTaskAction,
+): Promise<EcosystemTask> {
+  const response = await fetchJson(
+    `/api/ecosystem/packages/${encodeURIComponent(packageId)}/${action}`,
+    EcosystemTaskResponseSchema,
+    { method: "POST" },
+    (result) => `Failed to start ecosystem task: ${String(result.status)}`,
+  );
+  return response.task;
+}
+
 function stateLabel(state: EcosystemPackageState): string {
   switch (state) {
     case "installed":
@@ -127,16 +154,68 @@ function versionLabel(pkg: EcosystemPackage): string {
   return "not published";
 }
 
-function PackageStatusCard({ pkg }: { pkg: EcosystemPackage }): JSX.Element {
+function taskActionLabel(action: EcosystemTaskAction): string {
+  switch (action) {
+    case "install":
+      return "Install";
+    case "upgrade":
+      return "Upgrade";
+    case "help":
+      return "Help";
+    case "runner-presets":
+      return "Presets";
+  }
+}
+
+function taskStatusLabel(task: EcosystemTask): string {
+  switch (task.status) {
+    case "queued":
+      return "Queued";
+    case "running":
+      return `${taskActionLabel(task.action)} running`;
+    case "succeeded":
+      return `${taskActionLabel(task.action)} complete`;
+    case "failed":
+      return `${taskActionLabel(task.action)} failed`;
+  }
+}
+
+function packagePrimaryAction(pkg: EcosystemPackage): EcosystemTaskAction | null {
+  switch (pkg.state) {
+    case "available":
+      return "install";
+    case "update-available":
+      return "upgrade";
+    case "installed":
+    case "planned":
+    case "unknown":
+      return null;
+  }
+}
+
+function PackageStatusCard({
+  pkg,
+  activeTask,
+  onStartTask,
+}: {
+  pkg: EcosystemPackage;
+  activeTask: EcosystemTask | null;
+  onStartTask: (packageId: string, action: EcosystemTaskAction) => void;
+}): JSX.Element {
+  const primaryAction = packagePrimaryAction(pkg);
+  const packageTaskRunning =
+    activeTask !== null && activeTask.packageId === pkg.id && activeTask.status === "running";
   return (
     <div className="rounded-lg bg-white/[0.025] p-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
-      <div className="flex items-start justify-between gap-3">
+      <div className="flex flex-wrap items-start justify-between gap-3">
         <div className="min-w-0">
-          <div className="flex min-w-0 items-center gap-2">
+          <div className="flex min-w-0 items-start gap-2">
             <PackageCheck className="size-4 shrink-0 text-white/55" />
-            <div className="truncate text-sm font-semibold">{pkg.name}</div>
+            <div className="text-sm font-semibold leading-snug">{pkg.name}</div>
+          </div>
+          <div className="mt-1 break-all font-mono text-[11px] leading-snug text-white/35">
+            {pkg.npmName}
           </div>
-          <div className="mt-1 truncate font-mono text-[11px] text-white/35">{pkg.npmName}</div>
         </div>
         <Badge className={cn("shrink-0", stateClassName(pkg.state))} variant="outline">
           {stateLabel(pkg.state)}
@@ -152,10 +231,87 @@ function PackageStatusCard({ pkg }: { pkg: EcosystemPackage }): JSX.Element {
           {pkg.installCommand}
         </span>
       </div>
+      <div className="mt-3 flex flex-wrap items-center gap-2">
+        {primaryAction !== null && (
+          <Button
+            type="button"
+            size="sm"
+            variant="secondary"
+            disabled={packageTaskRunning}
+            onClick={() => onStartTask(pkg.id, primaryAction)}
+          >
+            {packageTaskRunning ? (
+              <Loader2 className="size-3.5 animate-spin" />
+            ) : (
+              <Download className="size-3.5" />
+            )}
+            {taskActionLabel(primaryAction)}
+          </Button>
+        )}
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          disabled={packageTaskRunning || pkg.state === "planned"}
+          onClick={() => onStartTask(pkg.id, "help")}
+        >
+          <Terminal className="size-3.5" />
+          Help
+        </Button>
+        {pkg.id === "eval-harness" && (
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            disabled={packageTaskRunning || pkg.state === "planned"}
+            onClick={() => onStartTask(pkg.id, "runner-presets")}
+          >
+            <Beaker className="size-3.5" />
+            Presets
+          </Button>
+        )}
+      </div>
     </div>
   );
 }
 
+function TaskConsole({ task }: { task: EcosystemTask | null }): JSX.Element | null {
+  if (task === null) return null;
+  const isRunning = task.status === "queued" || task.status === "running";
+  return (
+    <section className="mt-3 rounded-lg bg-white/[0.025] p-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2">
+          {isRunning ? (
+            <Loader2 className="size-4 animate-spin text-cyan-200/75" />
+          ) : (
+            <Terminal className="size-4 text-white/55" />
+          )}
+          <div className="min-w-0">
+            <div className="text-sm font-semibold">{taskStatusLabel(task)}</div>
+            <div className="break-all font-mono text-[11px] text-white/35">{task.command}</div>
+          </div>
+        </div>
+        <Badge
+          variant="outline"
+          className={cn(
+            "shrink-0",
+            task.status === "failed"
+              ? "border-red-400/20 bg-red-400/8 text-red-100"
+              : "border-cyan-300/20 bg-cyan-300/8 text-cyan-100",
+          )}
+        >
+          {task.status}
+        </Badge>
+      </div>
+      <pre className="mt-3 max-h-56 overflow-auto whitespace-pre-wrap rounded-md bg-black/30 p-3 font-mono text-[11px] leading-5 text-white/60 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
+        {task.output.trim().length > 0 ? task.output : "Waiting for npm output..."}
+      </pre>
+      {task.error !== null && <div className="mt-2 text-xs text-red-100">{task.error}</div>}
+    </section>
+  );
+}
+
 function WorkflowTile({ workflow }: { workflow: WorkflowCard }): JSX.Element {
   const Icon = workflow.icon;
   return (
@@ -163,7 +319,7 @@ function WorkflowTile({ workflow }: { workflow: WorkflowCard }): JSX.Element {
       <div className="flex items-start justify-between gap-3">
         <div className="flex min-w-0 items-center gap-2">
           <Icon className="size-4 shrink-0 text-cyan-200/75" />
-          <div className="truncate text-sm font-semibold">{workflow.title}</div>
+          <div className="text-sm font-semibold">{workflow.title}</div>
         </div>
         <span className="rounded bg-white/[0.04] px-2 py-0.5 font-mono text-[10px] text-white/45">
           {workflow.label}
@@ -187,13 +343,13 @@ function buildSessionCommand(sessionId: string | null): string {
 function RunnerPresetCard({ preset }: { preset: EcosystemRunnerPreset }): JSX.Element {
   return (
     <div className="rounded-lg bg-white/[0.025] p-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
-      <div className="flex items-start justify-between gap-3">
+      <div className="flex flex-wrap items-start justify-between gap-3">
         <div className="min-w-0">
-          <div className="flex min-w-0 items-center gap-2">
+          <div className="flex min-w-0 items-start gap-2">
             <Rocket className="size-4 shrink-0 text-cyan-200/75" />
-            <div className="truncate text-sm font-semibold">{preset.name}</div>
+            <div className="text-sm font-semibold leading-snug">{preset.name}</div>
           </div>
-          <div className="mt-1 font-mono text-[11px] text-white/35">
+          <div className="mt-1 break-all font-mono text-[11px] leading-snug text-white/35">
             {preset.binary} {preset.modelFlag}
             {preset.variantFlag !== null ? ` ${preset.variantFlag}` : ""}
           </div>
@@ -220,10 +376,25 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
   const [open, setOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const [copiedPresets, setCopiedPresets] = useState(false);
+  const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
+  const [taskError, setTaskError] = useState<string | null>(null);
   const response = useSWR("/api/ecosystem/packages", fetchEcosystemPackages, {
     revalidateOnFocus: false,
     revalidateIfStale: false,
   });
+  const activeTaskResponse = useSWR(
+    activeTaskId === null ? null : `/api/ecosystem/tasks/${activeTaskId}`,
+    fetchEcosystemTask,
+    {
+      refreshInterval: (taskResponse) => {
+        const task = taskResponse?.task;
+        return task !== undefined && (task.status === "queued" || task.status === "running")
+          ? 900
+          : 0;
+      },
+      revalidateOnFocus: false,
+    },
+  );
   const packages = response.data?.packages ?? [];
   const runnerPresets = response.data?.runnerPresets ?? [];
   const installedCount = useMemo(
@@ -248,6 +419,26 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
     });
   };
 
+  const activeTask = activeTaskResponse.data?.task ?? null;
+
+  useEffect(() => {
+    if (activeTask === null) return;
+    if (activeTask.status !== "succeeded") return;
+    void response.mutate();
+  }, [activeTask, response]);
+
+  const handleStartTask = (packageId: string, action: EcosystemTaskAction): void => {
+    setTaskError(null);
+    void startEcosystemTask(packageId, action)
+      .then((task) => {
+        setActiveTaskId(task.id);
+        void activeTaskResponse.mutate({ task }, { revalidate: true });
+      })
+      .catch((error: unknown) => {
+        setTaskError(error instanceof Error ? error.message : "Failed to start ecosystem task");
+      });
+  };
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -360,7 +551,12 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
             )}
             <div className="grid gap-3 md:grid-cols-3">
               {packages.map((pkg) => (
-                <PackageStatusCard key={pkg.id} pkg={pkg} />
+                <PackageStatusCard
+                  key={pkg.id}
+                  pkg={pkg}
+                  activeTask={activeTask}
+                  onStartTask={handleStartTask}
+                />
               ))}
               {response.isLoading &&
                 packages.length === 0 &&
@@ -372,6 +568,13 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
                 ))}
             </div>
           </section>
+
+          {taskError !== null && (
+            <div className="mt-3 rounded-lg bg-red-500/8 p-3 text-xs text-red-100 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.16)]">
+              {taskError}
+            </div>
+          )}
+          <TaskConsole task={activeTask} />
         </div>
       </DialogContent>
     </Dialog>

package/src/components/groups/GroupsDialog.tsx

@@ -16,7 +16,7 @@ import { Badge } from "../ui/badge";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
 import { INSPECTOR_ICON_TRIGGER_CLASS } from "../ui/icon-trigger";
 import { cn } from "../../lib/utils";
-import { parseJsonResponse, readApiError } from "../../lib/apiClient";
+import { fetchJsonWithTimeout } from "../../lib/apiClient";
 import {
   DeleteInspectorGroupResponseSchema,
   DeleteInspectorGroupsResponseSchema,
@@ -53,6 +53,8 @@ type GroupMemberRow = {
   source: "group" | "export" | "evidence";
 };
 
+const GROUP_OPERATION_TIMEOUT_MS = 20_000;
+
 export function groupDeletePath(groupId: string, deleteEvidence: boolean): string {
   const path = `/api/groups/${encodeURIComponent(groupId)}`;
   return deleteEvidence ? `${path}?deleteEvidence=1` : path;
@@ -333,19 +335,13 @@ export function GroupsDialog(): JSX.Element {
     setExportError(null);
 
     try {
-      const response = await fetch(groupsClearPath(false), { method: "DELETE" });
-      if (!response.ok) {
-        showToast({
-          message: await readApiError(
-            response,
-            `Clear failed with status ${String(response.status)}`,
-          ),
-          tone: "error",
-        });
-        return;
-      }
-
-      const parsed = await parseJsonResponse(response, DeleteInspectorGroupsResponseSchema);
+      const parsed = await fetchJsonWithTimeout(
+        groupsClearPath(false),
+        DeleteInspectorGroupsResponseSchema,
+        GROUP_OPERATION_TIMEOUT_MS,
+        { method: "DELETE" },
+        (response) => `Clear failed with status ${String(response.status)}`,
+      );
       setExportResult(null);
       setSelectedGroupId(null);
       await mutate();
@@ -370,20 +366,17 @@ export function GroupsDialog(): JSX.Element {
       setExportError(null);
 
       try {
-        const response = await fetch(`/api/groups/${encodeURIComponent(group.id)}/evidence`, {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify({ latestLogLimit: 10 }),
-        });
-
-        if (!response.ok) {
-          setExportError(
-            await readApiError(response, `Export failed with status ${String(response.status)}`),
-          );
-          return;
-        }
-
-        const parsed = await parseJsonResponse(response, GroupEvidenceExportResultSchema);
+        const parsed = await fetchJsonWithTimeout(
+          `/api/groups/${encodeURIComponent(group.id)}/evidence`,
+          GroupEvidenceExportResultSchema,
+          GROUP_OPERATION_TIMEOUT_MS,
+          {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ latestLogLimit: 10 }),
+          },
+          (response) => `Export failed with status ${String(response.status)}`,
+        );
         setExportResult(parsed);
         await mutate();
         await mutateEvidence();
@@ -424,18 +417,13 @@ export function GroupsDialog(): JSX.Element {
     setDeleteError(null);
 
     try {
-      const response = await fetch(groupDeletePath(group.id, deleteEvidence), {
-        method: "DELETE",
-      });
-
-      if (!response.ok) {
-        setDeleteError(
-          await readApiError(response, `Delete failed with status ${String(response.status)}`),
-        );
-        return;
-      }
-
-      await parseJsonResponse(response, DeleteInspectorGroupResponseSchema);
+      await fetchJsonWithTimeout(
+        groupDeletePath(group.id, deleteEvidence),
+        DeleteInspectorGroupResponseSchema,
+        GROUP_OPERATION_TIMEOUT_MS,
+        { method: "DELETE" },
+        (response) => `Delete failed with status ${String(response.status)}`,
+      );
       setExportResult((current) =>
         current !== null && current.group.id === group.id ? null : current,
       );
@@ -598,7 +586,7 @@ function GroupList({
               )}
             >
               <div className="flex min-w-0 items-center justify-between gap-2">
-                <span className="min-w-0 truncate text-sm font-medium">{group.title}</span>
+                <span className="min-w-0 text-sm font-medium leading-snug">{group.title}</span>
                 <Badge variant="outline" className={statusClassName(group.status)}>
                   {statusLabel(group.status)}
                 </Badge>
@@ -673,7 +661,7 @@ function GroupDetails({
         <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
           <div className="min-w-0 space-y-1">
             <div className="flex min-w-0 flex-wrap items-center gap-2">
-              <h3 className="min-w-0 truncate text-base font-semibold">{group.title}</h3>
+              <h3 className="min-w-0 text-base font-semibold leading-snug">{group.title}</h3>
               <Badge variant="outline" className={statusClassName(group.status)}>
                 {statusLabel(group.status)}
               </Badge>
@@ -1119,7 +1107,7 @@ function MemberRow({
         </div>
       </td>
       <td className="max-w-52 px-3 py-2">
-        <span className="block truncate">{providerModel(member)}</span>
+        <span className="block whitespace-normal leading-snug">{providerModel(member)}</span>
       </td>
       <td className="px-3 py-2">
         <Badge variant="outline" className={statusClassName(member.status)}>