@tonyclaw/agent-inspector 2.0.43 → 2.1.1

package/src/components/ProxyViewer.tsx

@@ -3,11 +3,20 @@ import {
   ArrowDownRight,
   ArrowLeft,
   ArrowUpRight,
+  Clapperboard,
   Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ChevronsLeft,
+  ChevronsRight,
   Copy,
   Download,
   FileJson,
+  Gauge,
   Plus,
+  Siren,
   Trash2,
 } from "lucide-react";
 
@@ -98,6 +107,20 @@ export type SessionMembershipEvidence = {
   member: InspectorGroupMember;
 };
 
+export type LogPaginationControls = {
+  isLoading: boolean;
+  total: number | null;
+  pageSize: number;
+  hasOlder: boolean;
+  hasNewer: boolean;
+  oldestLogId: number | null;
+  newestLogId: number | null;
+  onOldest: () => void;
+  onOlder: () => void;
+  onNewer: () => void;
+  onNewest: () => void;
+};
+
 function formatTimeRange(logs: CapturedLog[], timeDisplayFormat: TimeDisplayFormat): string | null {
   const first = logs[0];
   const last = logs[logs.length - 1];
@@ -114,6 +137,167 @@ function getFirstUserAgent(logs: CapturedLog[]): string | null {
   return null;
 }
 
+type SessionSlateStatus = "rolling" | "clear" | "watch" | "failed";
+
+type SessionSlateStats = {
+  status: SessionSlateStatus;
+  statusLabel: string;
+  modelLabel: string;
+  requests: number;
+  failures: number;
+  slow: number;
+  timeRange: string | null;
+  tokenLabel: string;
+};
+
+function hasLogFailure(log: CapturedLog): boolean {
+  if (log.error !== null && log.error !== undefined && log.error.length > 0) return true;
+  return log.responseStatus !== null && log.responseStatus >= 400;
+}
+
+function getModelLabel(logs: readonly CapturedLog[]): string {
+  const models = new Set<string>();
+  for (const log of logs) {
+    if (log.model !== null && log.model.length > 0) {
+      models.add(log.model);
+    }
+  }
+  const sorted = [...models].sort();
+  if (sorted.length === 0) return "Model unknown";
+  if (sorted.length === 1) return sorted[0] ?? "Model unknown";
+  return `${sorted.length} models`;
+}
+
+function buildSessionSlateStats({
+  logs,
+  isLoading,
+  timeDisplayFormat,
+  slowResponseThresholdSeconds,
+}: {
+  logs: CapturedLog[];
+  isLoading: boolean;
+  timeDisplayFormat: TimeDisplayFormat;
+  slowResponseThresholdSeconds: number;
+}): SessionSlateStats {
+  let failures = 0;
+  let slow = 0;
+  let totalIn = 0;
+  let totalOut = 0;
+  const slowThresholdMs = slowResponseThresholdSeconds * 1000;
+
+  for (const log of logs) {
+    if (hasLogFailure(log)) failures += 1;
+    if (
+      slowResponseThresholdSeconds > 0 &&
+      log.elapsedMs !== null &&
+      log.elapsedMs >= slowThresholdMs
+    ) {
+      slow += 1;
+    }
+    if (log.inputTokens !== null) totalIn += log.inputTokens;
+    if (log.outputTokens !== null) totalOut += log.outputTokens;
+  }
+
+  const status: SessionSlateStatus = isLoading
+    ? "rolling"
+    : failures > 0
+      ? "failed"
+      : slow > 0
+        ? "watch"
+        : "clear";
+  const statusLabel =
+    status === "rolling"
+      ? "Rolling"
+      : status === "failed"
+        ? "Failure"
+        : status === "watch"
+          ? "Watch"
+          : "Clear";
+
+  return {
+    status,
+    statusLabel,
+    modelLabel: getModelLabel(logs),
+    requests: logs.length,
+    failures,
+    slow,
+    timeRange: formatTimeRange(logs, timeDisplayFormat),
+    tokenLabel: `${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`,
+  };
+}
+
+function slateStatusClass(status: SessionSlateStatus): string {
+  switch (status) {
+    case "rolling":
+      return "border-cyan-400/35 bg-cyan-500/10 text-cyan-200";
+    case "failed":
+      return "border-red-400/35 bg-red-500/10 text-red-100";
+    case "watch":
+      return "border-amber-300/35 bg-amber-400/10 text-amber-100";
+    case "clear":
+      return "border-emerald-400/30 bg-emerald-500/10 text-emerald-100";
+  }
+}
+
+function SessionOpeningSlate({ stats }: { stats: SessionSlateStats }): JSX.Element | null {
+  if (stats.requests === 0) return null;
+
+  return (
+    <div className="mb-4 rounded-md border border-border bg-[#0c0d0f] shadow-[0_14px_50px_rgba(0,0,0,0.25)]">
+      <div className="grid grid-cols-2 gap-0 md:grid-cols-[minmax(220px,1.2fr)_repeat(4,minmax(120px,1fr))]">
+        <div className="col-span-2 border-b border-border/70 px-4 py-3 md:col-span-1 md:border-b-0 md:border-r">
+          <div className="flex items-center gap-2 text-[10px] font-semibold uppercase text-muted-foreground">
+            <Clapperboard className="size-3.5 text-cyan-300" />
+            Opening Slate
+          </div>
+          <div className="mt-2 min-w-0 truncate font-mono text-sm font-semibold text-foreground">
+            {stats.modelLabel}
+          </div>
+          <div className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
+            {stats.timeRange ?? "Timeline pending"}
+          </div>
+        </div>
+        <div className="border-r border-b border-border/70 px-4 py-3 md:border-b-0">
+          <div className="text-[10px] uppercase text-muted-foreground">Status</div>
+          <div
+            className={cn(
+              "mt-2 inline-flex h-7 items-center rounded-md border px-2.5 font-mono text-xs font-semibold",
+              slateStatusClass(stats.status),
+            )}
+          >
+            {stats.statusLabel}
+          </div>
+        </div>
+        <div className="border-b border-border/70 px-4 py-3 md:border-b-0 md:border-r">
+          <div className="text-[10px] uppercase text-muted-foreground">Requests</div>
+          <div className="mt-2 font-mono text-xl font-semibold text-foreground">
+            {stats.requests}
+          </div>
+        </div>
+        <div className="border-r border-border/70 px-4 py-3 md:border-r">
+          <div className="flex items-center gap-1 text-[10px] uppercase text-muted-foreground">
+            <Siren className="size-3 text-red-300" />
+            Failure
+          </div>
+          <div className="mt-2 font-mono text-xl font-semibold text-red-100">{stats.failures}</div>
+        </div>
+        <div className="px-4 py-3">
+          <div className="flex items-center gap-1 text-[10px] uppercase text-muted-foreground">
+            <Gauge className="size-3 text-amber-200" />
+            Tempo
+          </div>
+          <div className="mt-2 font-mono text-sm font-semibold text-foreground">
+            {stats.slow} slow
+          </div>
+          <div className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
+            {stats.tokenLabel}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function resolveSessionContextScope({
   pinnedSessionId,
   selectedSession,
@@ -227,6 +411,39 @@ function formatMetadataValue(value: InspectorGroupMember["metadata"][string]): s
   return JSON.stringify(value);
 }
 
+function formatMemberMetadata(member: InspectorGroupMember | null, key: string): string | null {
+  if (member === null) return null;
+  const value = member.metadata[key];
+  if (value === undefined) return null;
+  return formatMetadataValue(value);
+}
+
+function evidenceChipClass(value: string): string {
+  const normalized = value.toLowerCase();
+  if (
+    normalized.includes("reject") ||
+    normalized.includes("fail") ||
+    normalized.includes("error")
+  ) {
+    return "border-red-400/35 bg-red-500/10 text-red-100";
+  }
+  if (
+    normalized.includes("partial") ||
+    normalized.includes("pending") ||
+    normalized.includes("slow")
+  ) {
+    return "border-amber-300/35 bg-amber-400/10 text-amber-100";
+  }
+  if (
+    normalized.includes("pass") ||
+    normalized.includes("complete") ||
+    normalized.includes("accept")
+  ) {
+    return "border-emerald-400/30 bg-emerald-500/10 text-emerald-100";
+  }
+  return "border-border/70 bg-background/70 text-muted-foreground";
+}
+
 function getMemberMetadataRows(member: InspectorGroupMember): { key: string; value: string }[] {
   const rows: { key: string; value: string }[] = [];
   for (const key of MEMBER_METADATA_KEYS) {
@@ -240,75 +457,234 @@ function getMemberMetadataRows(member: InspectorGroupMember): { key: string; val
 
 function SessionMembershipPanel({
   memberships,
+  defaultOpen = false,
 }: {
   memberships: SessionMembershipEvidence[];
+  defaultOpen?: boolean;
 }): JSX.Element | null {
+  const [open, setOpen] = useState(defaultOpen);
   if (memberships.length === 0) return null;
+  const primary = memberships[0];
+  const primaryMember = primary?.member ?? null;
+  const score = formatMemberMetadata(primaryMember, "score");
+  const decision = formatMemberMetadata(primaryMember, "decision");
+  const finalStatus = formatMemberMetadata(primaryMember, "final_status");
+  const summaryChips = [
+    score === null ? null : { label: `score ${score}`, value: score },
+    decision === null ? null : { label: decision, value: decision },
+    finalStatus === null ? null : { label: finalStatus, value: finalStatus },
+    primaryMember?.model === null || primaryMember?.model === undefined
+      ? null
+      : { label: primaryMember.model, value: primaryMember.model },
+  ].filter(
+    (value): value is { label: string; value: string } =>
+      value !== null && value.label.length > 0 && value.value.length > 0,
+  );
 
   return (
-    <div className="mb-4 rounded-md border border-border bg-muted/10 px-3 py-2 text-xs">
-      <div className="mb-2 flex items-center justify-between gap-2">
-        <div className="font-semibold text-foreground">Group Member Evidence</div>
-        <div className="font-mono text-[10px] text-muted-foreground">
-          {memberships.length} group{memberships.length === 1 ? "" : "s"}
-        </div>
-      </div>
-      <div className="space-y-2">
-        {memberships.map((membership) => {
-          const member = membership.member;
-          const metadataRows = getMemberMetadataRows(member);
-          return (
-            <div key={`${membership.groupId}:${member.id}`} className="min-w-0">
-              <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+    <div className="mb-3 overflow-hidden rounded-md border border-border bg-[#0c0d0f] text-xs">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/30"
+        aria-expanded={open}
+      >
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+            <span className="font-semibold text-foreground">Case File</span>
+            {primary !== undefined && (
+              <span className="truncate text-muted-foreground" title={primary.groupTitle}>
+                {primary.groupTitle}
+              </span>
+            )}
+            <span className="font-mono text-[10px] uppercase text-muted-foreground">
+              {memberships.length} group{memberships.length === 1 ? "" : "s"}
+            </span>
+          </div>
+          {summaryChips.length > 0 && (
+            <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+              {summaryChips.slice(0, 4).map((chip) => (
                 <span
-                  className="truncate font-medium text-foreground"
-                  title={membership.groupTitle}
+                  key={chip.label}
+                  className={cn(
+                    "rounded border px-1.5 py-0.5 font-mono text-[10px]",
+                    evidenceChipClass(chip.value),
+                  )}
                 >
-                  {membership.groupTitle}
+                  {chip.label}
                 </span>
-                <span className="font-mono text-[10px] uppercase text-muted-foreground">
-                  {membership.groupStatus}
-                </span>
-                {member.status !== null && (
-                  <span className="font-mono text-[10px] text-muted-foreground">
-                    member {member.status}
+              ))}
+            </div>
+          )}
+        </div>
+        {open ? (
+          <ChevronUp className="size-4 shrink-0 text-muted-foreground" />
+        ) : (
+          <ChevronDown className="size-4 shrink-0 text-muted-foreground" />
+        )}
+      </button>
+      {open && (
+        <div className="space-y-2 border-t border-border/70 px-3 py-2">
+          {memberships.map((membership) => {
+            const member = membership.member;
+            const metadataRows = getMemberMetadataRows(member);
+            return (
+              <div key={`${membership.groupId}:${member.id}`} className="min-w-0">
+                <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+                  <span
+                    className="truncate font-medium text-foreground"
+                    title={membership.groupTitle}
+                  >
+                    {membership.groupTitle}
                   </span>
-                )}
-              </div>
-              <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground">
-                <span className="font-mono" title={member.sessionId}>
-                  {truncateSessionId(member.sessionId)}
-                </span>
-                {member.label !== null && <span>{member.label}</span>}
-                {member.provider !== null && <span>{member.provider}</span>}
-                {member.model !== null && <span className="font-mono">{member.model}</span>}
-                {member.runId !== null && (
-                  <span className="font-mono" title={member.runId}>
-                    run {truncateSessionId(member.runId)}
+                  <span className="font-mono text-[10px] uppercase text-muted-foreground">
+                    {membership.groupStatus}
                   </span>
-                )}
-              </div>
-              {metadataRows.length > 0 && (
-                <div className="mt-2 grid gap-1 sm:grid-cols-2 xl:grid-cols-3">
-                  {metadataRows.map((row) => (
-                    <div
-                      key={row.key}
-                      className="min-w-0 rounded border border-border/60 px-2 py-1"
-                    >
-                      <div className="font-mono text-[10px] text-muted-foreground">{row.key}</div>
+                  {member.status !== null && (
+                    <span className="font-mono text-[10px] text-muted-foreground">
+                      member {member.status}
+                    </span>
+                  )}
+                </div>
+                <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground">
+                  <span className="font-mono" title={member.sessionId}>
+                    {truncateSessionId(member.sessionId)}
+                  </span>
+                  {member.label !== null && <span>{member.label}</span>}
+                  {member.provider !== null && <span>{member.provider}</span>}
+                  {member.model !== null && <span className="font-mono">{member.model}</span>}
+                  {member.runId !== null && (
+                    <span className="font-mono" title={member.runId}>
+                      run {truncateSessionId(member.runId)}
+                    </span>
+                  )}
+                </div>
+                {metadataRows.length > 0 && (
+                  <div className="mt-2 grid gap-1 sm:grid-cols-2 xl:grid-cols-3">
+                    {metadataRows.map((row) => (
                       <div
-                        className="truncate font-mono text-[11px] text-foreground"
-                        title={row.value}
+                        key={row.key}
+                        className="min-w-0 rounded border border-border/60 px-2 py-1"
                       >
-                        {row.value}
+                        <div className="font-mono text-[10px] text-muted-foreground">{row.key}</div>
+                        <div
+                          className="truncate font-mono text-[11px] text-foreground"
+                          title={row.value}
+                        >
+                          {row.value}
+                        </div>
                       </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          );
-        })}
+                    ))}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function formatPaginationStatus({
+  logs,
+  pagination,
+}: {
+  logs: readonly CapturedLog[];
+  pagination: LogPaginationControls;
+}): string {
+  if (pagination.isLoading && logs.length === 0) return "Loading logs...";
+  if (logs.length === 0) return "No logs on this page";
+
+  const first = logs[0];
+  const last = logs[logs.length - 1];
+  const range =
+    first === undefined || last === undefined ? "Current page" : `#${first.id}-#${last.id}`;
+  const total = pagination.total === null ? "logs" : `${pagination.total} logs`;
+  return `Showing ${range} of ${total}`;
+}
+
+function LogPaginationButton({
+  label,
+  title,
+  icon,
+  disabled,
+  onClick,
+}: {
+  label: string;
+  title: string;
+  icon: JSX.Element;
+  disabled: boolean;
+  onClick: () => void;
+}): JSX.Element {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className="inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45"
+      title={title}
+    >
+      {icon}
+      <span>{label}</span>
+    </button>
+  );
+}
+
+function LogPaginationBar({
+  logs,
+  pagination,
+  embedded = false,
+}: {
+  logs: readonly CapturedLog[];
+  pagination: LogPaginationControls | undefined;
+  embedded?: boolean;
+}): JSX.Element | null {
+  if (pagination === undefined) return null;
+  const disabled = pagination.isLoading;
+
+  return (
+    <div
+      className={cn(
+        "flex min-h-9 flex-col gap-2 px-1 py-1 sm:flex-row sm:items-center",
+        embedded
+          ? "border-t border-border/70 pt-2"
+          : "mb-3 rounded-md border border-border bg-muted/10 px-2",
+      )}
+    >
+      <div className="w-full min-w-0 px-1 font-mono text-[11px] text-muted-foreground sm:flex-1">
+        {formatPaginationStatus({ logs, pagination })}
+        {pagination.isLoading && logs.length > 0 && <span className="ml-2">Loading...</span>}
+      </div>
+      <div className="flex w-full items-center gap-1 overflow-x-auto sm:w-auto">
+        <LogPaginationButton
+          label="Oldest"
+          title="Load the oldest logs in this session"
+          icon={<ChevronsLeft className="size-3.5" />}
+          disabled={disabled || !pagination.hasOlder}
+          onClick={pagination.onOldest}
+        />
+        <LogPaginationButton
+          label="Older"
+          title="Load older logs"
+          icon={<ChevronLeft className="size-3.5" />}
+          disabled={disabled || !pagination.hasOlder}
+          onClick={pagination.onOlder}
+        />
+        <LogPaginationButton
+          label="Newer"
+          title="Load newer logs"
+          icon={<ChevronRight className="size-3.5" />}
+          disabled={disabled || !pagination.hasNewer}
+          onClick={pagination.onNewer}
+        />
+        <LogPaginationButton
+          label="Newest"
+          title="Load the newest logs in this session"
+          icon={<ChevronsRight className="size-3.5" />}
+          disabled={disabled || !pagination.hasNewer}
+          onClick={pagination.onNewest}
+        />
       </div>
     </div>
   );
@@ -413,34 +789,7 @@ function CopyableCommand({ command }: { command: string }): JSX.Element {
         className="text-muted-foreground hover:text-foreground transition-colors shrink-0 cursor-pointer"
         aria-label="Copy command"
       >
-        {copied ? (
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M20 6 9 17l-5-5" />
-          </svg>
-        ) : (
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-            <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
-          </svg>
-        )}
+        {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
       </button>
     </div>
   );
@@ -466,6 +815,125 @@ function McpReadyBadge(): JSX.Element {
   );
 }
 
+const CRAB_VARIANT_COLORS = [
+  "text-amber-500",
+  "text-rose-500",
+  "text-sky-500",
+  "text-emerald-500",
+  "text-violet-500",
+  "text-orange-500",
+  "text-cyan-500",
+  "text-pink-500",
+  "text-lime-500",
+  "text-blue-500",
+  "text-yellow-500",
+  "text-fuchsia-500",
+] as const;
+
+function CrabFamily({
+  compact,
+  entrancePhase,
+}: {
+  compact: boolean;
+  entrancePhase: "hidden" | "playing" | "done";
+}): JSX.Element {
+  if (compact) {
+    return <CrabLogo className="size-7 text-amber-500" />;
+  }
+
+  return (
+    <span className="flex shrink-0 items-end gap-1 group cursor-default" aria-hidden="true">
+      <CrabLogo className="size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" />
+      <span className="hidden items-end gap-0.5 sm:flex">
+        {crabVariants.map((Crab, i) => {
+          const color = CRAB_VARIANT_COLORS[i] ?? "text-amber-500";
+          const entranceClass =
+            entrancePhase === "hidden"
+              ? "opacity-0 scale-0"
+              : entrancePhase === "playing"
+                ? "animate-crab-piano-pop"
+                : "";
+          return (
+            <Crab
+              key={i}
+              className={`size-5 ${color} transition-all duration-300 ease-out group-hover:scale-125 group-hover:-translate-y-1 ${entranceClass}`}
+              style={{
+                transitionDelay: `${i * 50}ms`,
+                ...(entrancePhase === "playing" ? { animationDelay: `${i * 400}ms` } : {}),
+              }}
+            />
+          );
+        })}
+      </span>
+    </span>
+  );
+}
+
+function BrandHeader({
+  compact,
+  crabEntrancePhase,
+}: {
+  compact: boolean;
+  crabEntrancePhase: "hidden" | "playing" | "done";
+}): JSX.Element {
+  if (compact) {
+    return (
+      <div className="pb-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-start gap-2">
+            <CrabFamily compact={true} entrancePhase={crabEntrancePhase} />
+            <div className="min-w-0">
+              <div className="flex min-w-0 items-baseline gap-2">
+                <span className="truncate text-base font-bold">Inspector</span>
+                <span className="hidden shrink-0 font-mono text-[11px] font-semibold text-muted-foreground sm:inline">
+                  v{packageJson.version}
+                </span>
+              </div>
+              <div className="hidden text-[11px] font-semibold text-muted-foreground sm:block">
+                Local First. Evidence First.
+              </div>
+            </div>
+          </div>
+          <div className="flex shrink-0 items-center gap-1">
+            <GroupsDialog />
+            <SettingsDialog />
+          </div>
+        </div>
+        <div className="mt-2 hidden sm:block">
+          <McpReadyBadge />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-[1fr_auto_1fr] items-start gap-3 pb-6">
+      <div />
+      <h1 className="flex min-w-0 flex-col items-center gap-2 text-center">
+        <span className="flex max-w-[calc(100vw-7rem)] items-end gap-2 whitespace-nowrap">
+          <CrabFamily compact={false} entrancePhase={crabEntrancePhase} />
+          <span className="flex min-w-0 items-baseline gap-2 pl-1">
+            <span className="truncate text-lg font-bold">Agent Inspector</span>
+            <span className="shrink-0 font-mono text-xs font-semibold text-muted-foreground">
+              v{packageJson.version}
+            </span>
+          </span>
+          <Plus className="size-4 shrink-0 text-muted-foreground/70" aria-hidden="true" />
+          <McpLogo className="size-10 shrink-0" />
+        </span>
+        <span className="max-w-[calc(100vw-7rem)] text-sm font-semibold text-muted-foreground">
+          Local First. Evidence First.
+        </span>
+        <McpReadyBadge />
+      </h1>
+      <div className="justify-self-end flex items-center gap-1">
+        <GroupsDialog />
+        <SettingsDialog />
+      </div>
+    </div>
+  );
+}
+
 function SessionContextLogButton({ label, logId }: { label: string; logId: number }): JSX.Element {
   return (
     <button
@@ -654,6 +1122,18 @@ function SessionContextSummaryPanel({
   );
 }
 
+function formatSessionContextOverview(summary: SessionContextSummary): string {
+  const riskCount = summary.models.filter((model) => model.latest.health.level === "risk").length;
+  if (riskCount > 0) return `${riskCount} risk`;
+
+  const optimizableCount = summary.models.filter(
+    (model) => model.latest.health.level === "optimizable",
+  ).length;
+  if (optimizableCount > 0) return `${optimizableCount} optimizable`;
+
+  return `${summary.models.length} model${summary.models.length === 1 ? "" : "s"}`;
+}
+
 function SessionContextBar({
   label,
   logs,
@@ -672,11 +1152,16 @@ function SessionContextBar({
   showBackLink: boolean;
 }): JSX.Element {
   const [copied, setCopied] = useState(false);
+  const [detailsOpen, setDetailsOpen] = useState(false);
   const timeRange = useMemo(
     () => formatTimeRange(logs, timeDisplayFormat),
     [logs, timeDisplayFormat],
   );
   const userAgent = useMemo(() => getFirstUserAgent(logs), [logs]);
+  const contextOverview = useMemo(
+    () => formatSessionContextOverview(contextSummary),
+    [contextSummary],
+  );
 
   const handleCopyLink = useCallback(() => {
     void copyTextToClipboard(window.location.href).then((success) => {
@@ -687,8 +1172,8 @@ function SessionContextBar({
   }, []);
 
   return (
-    <div className="mb-4 border border-border rounded-md bg-muted/20 px-3 py-2 text-xs">
-      <div className="flex items-center gap-3">
+    <div className="mb-3 rounded-md border border-border bg-muted/15 px-3 py-2 text-xs">
+      <div className="flex flex-wrap items-center gap-2">
         {showBackLink && (
           <a
             href="/"
@@ -699,7 +1184,7 @@ function SessionContextBar({
             <ArrowLeft className="size-3.5" />
           </a>
         )}
-        <div className="min-w-0 flex-1">
+        <div className="min-w-[180px] flex-1">
           <div className="flex min-w-0 items-center gap-2">
             <span className="font-mono font-semibold text-purple-400/90 truncate" title={label}>
               {truncateSessionId(label)}
@@ -725,6 +1210,22 @@ function SessionContextBar({
             )}
           </div>
         </div>
+        {contextSummary.models.length > 0 && (
+          <button
+            type="button"
+            onClick={() => setDetailsOpen((value) => !value)}
+            className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-border bg-background/60 px-2.5 font-mono text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            aria-expanded={detailsOpen}
+            title={detailsOpen ? "Hide context details" : "Show context details"}
+          >
+            <span>{contextOverview}</span>
+            {detailsOpen ? (
+              <ChevronUp className="size-3.5" />
+            ) : (
+              <ChevronDown className="size-3.5" />
+            )}
+          </button>
+        )}
         <button
           type="button"
           onClick={handleCopyLink}
@@ -735,7 +1236,7 @@ function SessionContextBar({
           {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
         </button>
       </div>
-      <SessionContextSummaryPanel summary={contextSummary} />
+      {detailsOpen && <SessionContextSummaryPanel summary={contextSummary} />}
     </div>
   );
 }
@@ -753,7 +1254,6 @@ export type ProxyViewerProps = {
    *  Clear button on each conversation header. */
   onClearGroup: (ids: number[]) => void;
   viewMode: "simple" | "full";
-  onViewModeChange: (mode: "simple" | "full") => void;
   captureMode: CaptureMode;
   /** Live strip-Claude-Code-billing-header flag, sourced once at the container. */
   strip: boolean;
@@ -763,6 +1263,8 @@ export type ProxyViewerProps = {
   timeDisplayFormat: TimeDisplayFormat;
   /** True while a pinned session page is waiting for its initial log scan. */
   isLoading?: boolean;
+  /** Cursor controls for history pages. Undefined keeps the live stream UI compact. */
+  pagination?: LogPaginationControls;
   /** Group/run member metadata attached to the pinned session id. */
   sessionMemberships?: SessionMembershipEvidence[];
   /** Hide the session filter dropdown. Used on `/session/$id` routes where
@@ -784,12 +1286,12 @@ export function ProxyViewer({
   onClearAll,
   onClearGroup,
   viewMode,
-  onViewModeChange,
   captureMode,
   strip,
   slowResponseThresholdSeconds,
   timeDisplayFormat,
   isLoading = false,
+  pagination,
   sessionMemberships = [],
   hideSessionFilter = false,
   pinnedSessionId,
@@ -870,6 +1372,23 @@ export function ProxyViewer({
   const cacheTrends = useMemo(() => computeCacheTrends(groups), [groups]);
   const comparisonPredecessors = useMemo(() => buildValidPredecessors(groups), [groups]);
   const exportActionVisibility = getExportActionVisibility(captureMode, logs.length);
+  const isPinnedSessionPage = pinnedSessionId !== undefined;
+  const activeScopeLabel =
+    hasSessionContext && sessionContextScope !== null
+      ? truncateSessionId(sessionContextScope.label)
+      : selectedSession === "__all__"
+        ? "All sessions"
+        : truncateSessionId(selectedSession);
+  const slateStats = useMemo(
+    () =>
+      buildSessionSlateStats({
+        logs,
+        isLoading,
+        timeDisplayFormat,
+        slowResponseThresholdSeconds,
+      }),
+    [isLoading, logs, slowResponseThresholdSeconds, timeDisplayFormat],
+  );
   const handleCompareWithPrevious = useCallback(
     (log: CapturedLog) => {
       const predecessor = comparisonPredecessors.get(log.id);
@@ -879,297 +1398,250 @@ export function ProxyViewer({
   );
 
   return (
-    <div className="max-w-[1400px] xl:max-w-[1600px] 2xl:max-w-[1800px] mx-auto px-6 pb-6">
-      {/* Sticky chrome: brand row, optional pinned-session context, and the
-          filter/control bar stay visible while the user scrolls through the
-          log list. `z-30` sits above the per-conversation sticky header
-          (`z-10`) but below modal-level overlays (dialogs, dropdowns,
-          tooltips: `z-50`). Background is fully opaque so logs don't bleed
-          through. */}
-      <div className="sticky top-0 z-30 bg-background pt-6">
-        {/* Brand row */}
-        <div className="grid grid-cols-[1fr_auto_1fr] items-start gap-3 pb-8">
-          <div />
-          <h1 className="flex min-w-0 flex-col items-center gap-2 text-center">
-            <span className="flex max-w-[calc(100vw-7rem)] items-end gap-2 whitespace-nowrap">
-              {/* Crab family: hover to animate together */}
-              <span
-                className="flex shrink-0 items-end gap-1 group cursor-default"
-                aria-hidden="true"
-              >
-                <CrabLogo className="size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" />
-                <span className="hidden items-end gap-0.5 sm:flex">
-                  {crabVariants.map((Crab, i) => {
-                    const color = [
-                      "text-amber-500",
-                      "text-rose-500",
-                      "text-sky-500",
-                      "text-emerald-500",
-                      "text-violet-500",
-                      "text-orange-500",
-                      "text-cyan-500",
-                      "text-pink-500",
-                      "text-lime-500",
-                      "text-blue-500",
-                      "text-yellow-500",
-                      "text-fuchsia-500",
-                    ][i];
-                    const entranceClass =
-                      crabEntrancePhase === "hidden"
-                        ? "opacity-0 scale-0"
-                        : crabEntrancePhase === "playing"
-                          ? "animate-crab-piano-pop"
-                          : "";
-                    return (
-                      <Crab
-                        key={i}
-                        className={`size-5 ${color} transition-all duration-300 ease-out group-hover:scale-125 group-hover:-translate-y-1 ${entranceClass}`}
-                        style={{
-                          transitionDelay: `${i * 50}ms`,
-                          ...(crabEntrancePhase === "playing"
-                            ? { animationDelay: `${i * 400}ms` }
-                            : {}),
-                        }}
-                      />
-                    );
-                  })}
-                </span>
-              </span>
-              <span className="flex min-w-0 items-baseline gap-2 pl-1">
-                <span className="truncate text-lg font-bold">Agent Inspector</span>
-                <span className="shrink-0 font-mono text-xs font-semibold text-muted-foreground">
-                  v{packageJson.version}
-                </span>
-              </span>
-              <Plus className="size-4 shrink-0 text-muted-foreground/70" aria-hidden="true" />
-              <McpLogo className="size-10 shrink-0" />
-            </span>
-            <span className="max-w-[calc(100vw-7rem)] text-sm font-semibold text-muted-foreground">
-              Local First. Evidence First.
-            </span>
-            <McpReadyBadge />
-          </h1>
-          <div className="justify-self-end flex items-center gap-1">
-            <GroupsDialog />
-            <SettingsDialog />
-          </div>
-        </div>
+    <div className="min-h-screen bg-[#070809] text-foreground">
+      <div className="mx-auto grid min-h-screen max-w-[1920px] grid-cols-1 lg:grid-cols-[340px_minmax(0,1fr)] xl:grid-cols-[360px_minmax(0,1fr)]">
+        <aside className="border-b border-border bg-[#090a0c] lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-r">
+          <div className="space-y-4 p-4">
+            <BrandHeader compact={true} crabEntrancePhase={crabEntrancePhase} />
+
+            <div className="grid grid-cols-3 gap-2 border-y border-border/70 py-3">
+              <div className="min-w-0">
+                <div className="font-mono text-lg font-semibold text-foreground">{logs.length}</div>
+                <div className="text-[10px] uppercase text-muted-foreground">Requests</div>
+              </div>
+              <div className="min-w-0">
+                <div className="font-mono text-lg font-semibold text-foreground">
+                  {formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)}
+                </div>
+                <div className="text-[10px] uppercase text-muted-foreground">Input</div>
+              </div>
+              <div className="min-w-0">
+                <div className="font-mono text-lg font-semibold text-foreground">
+                  {formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)}
+                </div>
+                <div className="text-[10px] uppercase text-muted-foreground">Output</div>
+              </div>
+            </div>
 
-        {hasSessionContext && sessionContextScope !== null && (
-          <SessionContextBar
-            label={sessionContextScope.label}
-            logs={sessionContextLogs}
-            totalIn={sessionContextTotalIn}
-            totalOut={sessionContextTotalOut}
-            timeDisplayFormat={timeDisplayFormat}
-            contextSummary={sessionContextSummary}
-            showBackLink={sessionContextScope.showBackLink}
-          />
-        )}
+            <div className="space-y-2">
+              <div className="text-[10px] font-semibold uppercase tracking-normal text-muted-foreground">
+                Workspace
+              </div>
+              <div className="rounded-md border border-border bg-[#0c0d0f] px-3 py-2">
+                <div
+                  className="font-mono text-xs font-semibold text-purple-300"
+                  title={activeScopeLabel}
+                >
+                  {activeScopeLabel}
+                </div>
+                <div className="mt-1 text-[11px] text-muted-foreground">
+                  {isPinnedSessionPage ? "Session workspace" : "Live workspace"}
+                </div>
+              </div>
+            </div>
 
-        {hasSessionContext && pinnedSessionId !== undefined && sessionMemberships.length > 0 && (
-          <SessionMembershipPanel memberships={sessionMemberships} />
-        )}
+            {hasSessionContext && sessionContextScope !== null && (
+              <SessionContextBar
+                label={sessionContextScope.label}
+                logs={sessionContextLogs}
+                totalIn={sessionContextTotalIn}
+                totalOut={sessionContextTotalOut}
+                timeDisplayFormat={timeDisplayFormat}
+                contextSummary={sessionContextSummary}
+                showBackLink={sessionContextScope.showBackLink}
+              />
+            )}
 
-        {/* Controls + Filters */}
-        <div className="flex items-center gap-3 mb-4">
-          {!hideSessionFilter && (
-            <Select value={selectedSession} onValueChange={onSessionChange}>
-              <SelectTrigger className="flex-1 max-w-[350px] text-xs">
-                <SelectValue placeholder="All sessions" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="__all__">All sessions</SelectItem>
-                {sessions.map((s) => (
-                  <SelectItem key={s} value={s}>
-                    {truncateSessionId(s)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-          <Select value={selectedModel} onValueChange={onModelChange}>
-            <SelectTrigger className="flex-1 max-w-[250px] text-xs">
-              <SelectValue placeholder="All models" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="__all__">All models</SelectItem>
-              {models.map((m) => (
-                <SelectItem key={m} value={m}>
-                  {m}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          {captureMode === "full" ? (
-            <div className="flex items-center border border-border rounded-md overflow-hidden">
-              <button
-                type="button"
-                onClick={() => onViewModeChange("simple")}
-                className={`h-8 px-3 cursor-pointer transition-colors text-xs ${
-                  viewMode === "simple"
-                    ? "bg-muted text-foreground"
-                    : "text-muted-foreground hover:bg-muted/50"
-                }`}
-              >
-                Simple
-              </button>
-              <button
-                type="button"
-                onClick={() => onViewModeChange("full")}
-                className={`h-8 px-3 cursor-pointer transition-colors text-xs ${
-                  viewMode === "full"
-                    ? "bg-muted text-foreground"
-                    : "text-muted-foreground hover:bg-muted/50"
-                }`}
-              >
-                Full
-              </button>
-            </div>
-          ) : (
-            <div className="flex h-8 items-center rounded-md border border-border bg-muted px-3 text-xs text-foreground">
-              Simple
-            </div>
-          )}
-          <div className="flex-1" />
-          {!hasSessionContext && (
-            <span className="text-muted-foreground text-xs font-mono">
-              {logs.length} request{logs.length !== 1 ? "s" : ""}
-              {totalIn > 0 || totalOut > 0
-                ? ` - ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`
-                : ""}
-            </span>
-          )}
-          {exportActionVisibility.redacted && (
-            <button
-              type="button"
-              onClick={() => {
-                void handleExport("redacted");
-              }}
-              disabled={exporting !== null}
-              className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 rounded-md hover:bg-muted"
-              title="Export redacted logs as JSON ZIP"
-            >
-              {exporting === "redacted" ? (
-                <span>Exporting...</span>
-              ) : (
-                <>
-                  <Download className="size-3.5" />
-                  <span>Export</span>
-                </>
+            {hasSessionContext &&
+              pinnedSessionId !== undefined &&
+              sessionMemberships.length > 0 && (
+                <SessionMembershipPanel memberships={sessionMemberships} />
               )}
-            </button>
-          )}
-          {exportActionVisibility.raw && (
-            <button
-              type="button"
-              onClick={() => {
-                void handleExport("raw");
-              }}
-              disabled={exporting !== null}
-              className="h-8 px-2.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 rounded-md hover:bg-muted"
-              title="Export raw logs without redaction"
-            >
-              {exporting === "raw" ? (
-                <span>Exporting...</span>
-              ) : (
-                <>
-                  <FileJson className="size-3.5" />
-                  <span>Raw</span>
-                </>
+
+            <div className="space-y-2">
+              <div className="text-[10px] font-semibold uppercase tracking-normal text-muted-foreground">
+                Filters
+              </div>
+              {!hideSessionFilter && (
+                <Select value={selectedSession} onValueChange={onSessionChange}>
+                  <SelectTrigger className="h-9 w-full text-xs">
+                    <SelectValue placeholder="All sessions" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__all__">All sessions</SelectItem>
+                    {sessions.map((s) => (
+                      <SelectItem key={s} value={s}>
+                        {truncateSessionId(s)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               )}
-            </button>
-          )}
-          <button
-            type="button"
-            onClick={onClearAll}
-            className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer inline-flex items-center gap-1.5 rounded-md hover:bg-muted"
-            title="Clear all logs"
-          >
-            <Trash2 className="size-3.5" />
-            <span>Clear</span>
-          </button>
-        </div>
-        {exportError !== null && (
-          <div className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
-            {exportError}
+              <Select value={selectedModel} onValueChange={onModelChange}>
+                <SelectTrigger className="h-9 w-full text-xs">
+                  <SelectValue placeholder="All models" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__all__">All models</SelectItem>
+                  {models.map((m) => (
+                    <SelectItem key={m} value={m}>
+                      {m}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
           </div>
-        )}
-      </div>
-
-      {/* Log list */}
-      <div>
-        {logs.length === 0 ? (
-          selectedSession !== "__all__" ? (
-            <div className="text-center text-muted-foreground py-16 space-y-4">
-              <p className="text-sm font-medium">
-                {isLoading ? "Loading session data..." : "Session not found"}
-              </p>
-              <p className="text-xs font-mono bg-muted px-3 py-1 rounded inline-block max-w-[500px] break-all">
-                {truncateSessionId(selectedSession)}
-              </p>
-              {sessionMemberships.length > 0 && (
-                <div className="mx-auto max-w-3xl text-left">
-                  <SessionMembershipPanel memberships={sessionMemberships} />
+        </aside>
+
+        <main className="min-w-0">
+          <div className="sticky top-0 z-30 border-b border-border bg-[#08090b]/95 px-4 py-3 shadow-[0_12px_40px_rgba(0,0,0,0.24)] backdrop-blur lg:px-5">
+            <div className="flex flex-wrap items-center gap-2">
+              <div className="min-w-[180px] flex-1">
+                <div className="text-sm font-semibold text-foreground">Logs</div>
+                <div className="mt-0.5 font-mono text-[11px] text-muted-foreground">
+                  {activeScopeLabel}
                 </div>
+              </div>
+              {exportActionVisibility.redacted && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    void handleExport("redacted");
+                  }}
+                  disabled={exporting !== null}
+                  className="inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                  title="Export redacted logs as JSON ZIP"
+                >
+                  {exporting === "redacted" ? (
+                    <span>Exporting...</span>
+                  ) : (
+                    <>
+                      <Download className="size-3.5" />
+                      <span>Export</span>
+                    </>
+                  )}
+                </button>
               )}
-              {!isLoading && (
-                <p className="text-xs">
-                  This session may have been cleared or never existed.{" "}
-                  {hideSessionFilter ? (
-                    <a href="/" className="underline hover:text-foreground transition-colors">
-                      Back to all sessions
-                    </a>
+              {exportActionVisibility.raw && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    void handleExport("raw");
+                  }}
+                  disabled={exporting !== null}
+                  className="inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                  title="Export raw logs without redaction"
+                >
+                  {exporting === "raw" ? (
+                    <span>Exporting...</span>
                   ) : (
-                    <button
-                      type="button"
-                      onClick={() => onSessionChange("__all__")}
-                      className="underline hover:text-foreground transition-colors"
-                    >
-                      Show all sessions
-                    </button>
+                    <>
+                      <FileJson className="size-3.5" />
+                      <span>Raw</span>
+                    </>
                   )}
-                </p>
+                </button>
               )}
+              <button
+                type="button"
+                onClick={onClearAll}
+                className="inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                title="Clear all logs"
+              >
+                <Trash2 className="size-3.5" />
+                <span>Clear</span>
+              </button>
             </div>
-          ) : (
-            <div className="text-center text-muted-foreground py-16 space-y-4">
-              <p className="text-sm">No requests captured yet.</p>
-              <p className="text-xs">Route AI coding tools through the proxy:</p>
-              <div className="flex flex-col items-center gap-2">
-                <CopyableCommand command="ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>" />
-                <CopyableCommand command="OPENAI_BASE_URL=http://localhost:25947/proxy <your-tool>" />
+            <LogPaginationBar logs={logs} pagination={pagination} embedded={true} />
+            {exportError !== null && (
+              <div className="mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
+                {exportError}
               </div>
-              <p className="mx-auto max-w-xl text-xs leading-relaxed text-muted-foreground">
-                Container note: if your AI tool runs in a different container or host than Agent
-                Inspector, replace localhost with an address reachable from that tool and verify the
-                network/firewall path.
-              </p>
-            </div>
-          )
-        ) : (
-          <div
-            ref={logListWrapperRef}
-            tabIndex={0}
-            className="flex flex-col gap-2 focus:outline-none"
-          >
-            <div ref={logListRef}>
-              <ConversationGroupList
-                groups={groups}
-                viewMode={viewMode}
-                strip={strip}
-                slowResponseThresholdSeconds={slowResponseThresholdSeconds}
-                cacheTrends={cacheTrends}
-                onCompareWithPrevious={handleCompareWithPrevious}
-                comparisonPredecessors={comparisonPredecessors}
-                onClearGroup={onClearGroup}
-                standalone={groups.length === 1}
-                hasPinnedSessionContext={hasSessionContext}
-                timeDisplayFormat={timeDisplayFormat}
-              />
-            </div>
+            )}
           </div>
-        )}
+
+          <div className="px-4 py-4 lg:px-5">
+            <SessionOpeningSlate stats={slateStats} />
+            {logs.length === 0 ? (
+              selectedSession !== "__all__" ? (
+                <div className="py-16 text-center text-muted-foreground">
+                  <div className="mx-auto max-w-xl space-y-4 rounded-md border border-border bg-muted/10 px-4 py-8">
+                    <p className="text-sm font-medium">
+                      {isLoading ? "Loading session data..." : "Session not found"}
+                    </p>
+                    <p className="inline-block max-w-full rounded bg-muted px-3 py-1 font-mono text-xs break-all">
+                      {truncateSessionId(selectedSession)}
+                    </p>
+                    {sessionMemberships.length > 0 && (
+                      <div className="text-left">
+                        <SessionMembershipPanel memberships={sessionMemberships} />
+                      </div>
+                    )}
+                    {!isLoading && (
+                      <p className="text-xs">
+                        This session may have been cleared or never existed.{" "}
+                        {hideSessionFilter ? (
+                          <a href="/" className="underline transition-colors hover:text-foreground">
+                            Back to all sessions
+                          </a>
+                        ) : (
+                          <button
+                            type="button"
+                            onClick={() => onSessionChange("__all__")}
+                            className="underline transition-colors hover:text-foreground"
+                          >
+                            Show all sessions
+                          </button>
+                        )}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              ) : (
+                <div className="py-16 text-center text-muted-foreground">
+                  <div className="mx-auto max-w-2xl space-y-4 rounded-md border border-border bg-muted/10 px-4 py-8">
+                    <p className="text-sm">No requests captured yet.</p>
+                    <div className="flex flex-col items-center gap-2">
+                      <CopyableCommand command="ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>" />
+                      <CopyableCommand command="OPENAI_BASE_URL=http://localhost:25947/proxy <your-tool>" />
+                    </div>
+                    <p className="mx-auto max-w-xl text-xs leading-relaxed text-muted-foreground">
+                      Container note: if your AI tool runs in a different container or host than
+                      Agent Inspector, replace localhost with an address reachable from that tool
+                      and verify the network/firewall path.
+                    </p>
+                  </div>
+                </div>
+              )
+            ) : (
+              <div
+                ref={logListWrapperRef}
+                tabIndex={0}
+                className="flex flex-col gap-2 focus:outline-none"
+              >
+                <div ref={logListRef}>
+                  <ConversationGroupList
+                    groups={groups}
+                    viewMode={viewMode}
+                    strip={strip}
+                    slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+                    cacheTrends={cacheTrends}
+                    onCompareWithPrevious={handleCompareWithPrevious}
+                    comparisonPredecessors={comparisonPredecessors}
+                    onClearGroup={onClearGroup}
+                    standalone={groups.length === 1}
+                    hasPinnedSessionContext={hasSessionContext}
+                    timeDisplayFormat={timeDisplayFormat}
+                  />
+                </div>
+                <div className="mt-3">
+                  <LogPaginationBar logs={logs} pagination={pagination} />
+                </div>
+              </div>
+            )}
+          </div>
+        </main>
       </div>
 
       {/* Compare drawer: sibling of the log list, not a route change. */}