@tonyclaw/agent-inspector 4.0.1 → 4.0.2

package/src/components/proxy-viewer/ConversationHeader.tsx

@@ -1,429 +0,0 @@
-import { type ReactNode, useCallback, useState } from "react";
-import {
-  ChevronDown,
-  ChevronRight,
-  Clock,
-  ExternalLink,
-  Loader2,
-  MessageSquare,
-  Trash2,
-  Zap,
-} from "lucide-react";
-import type { JSX } from "react";
-import { getSessionPath } from "../../lib/sessionUrl";
-import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
-import { formatTimestampRange } from "../../lib/timeDisplay";
-import { cn, formatTokens } from "../../lib/utils";
-import type { CapturedLog } from "../../contracts";
-import { ConfirmDialog } from "../ui/confirm-dialog";
-import type { Provider } from "../providers/ProviderLogo";
-import { ClientLogo, clientAppLabel, detectClientApp } from "../clients/ClientLogo";
-import { ProviderLogoStack } from "./ProviderLogoStack";
-import { resolveLogFormat } from "./log-formats";
-
-const HEADER_ACTION_BUTTON_CLASS =
-  "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md bg-[var(--inspector-surface-low)] text-muted-foreground transition-colors hover:bg-[var(--inspector-surface-medium)] hover:text-foreground";
-
-export function isSyntheticSessionId(conversationId: string): boolean {
-  return (
-    conversationId.startsWith("PID:") ||
-    conversationId.startsWith("process:") ||
-    conversationId.startsWith("connection:") ||
-    conversationId.includes("|")
-  );
-}
-
-export function compactSessionLabel(conversationId: string): string {
-  if (isSyntheticSessionId(conversationId)) return "No session ID";
-  return conversationId.length > 24
-    ? `${conversationId.slice(0, 12)}...${conversationId.slice(-12)}`
-    : conversationId;
-}
-
-function HeaderMetric({
-  icon,
-  children,
-  title,
-  className,
-}: {
-  icon: ReactNode;
-  children: ReactNode;
-  title?: string;
-  className?: string;
-}): JSX.Element {
-  return (
-    <span
-      className={cn(
-        "inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md bg-[var(--inspector-surface-low)] px-2 text-xs text-muted-foreground",
-        className,
-      )}
-      title={title}
-    >
-      {icon}
-      <span className="min-w-0 font-mono tabular-nums">{children}</span>
-    </span>
-  );
-}
-
-function PendingTurnBadge(): JSX.Element {
-  return (
-    <span
-      className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-md bg-[var(--inspector-surface-medium)] px-1.5 font-mono text-[10px] uppercase text-[var(--inspector-status-watch)] ring-1 ring-border/50"
-      title="This session has a turn that has not finished yet"
-    >
-      <Loader2 className="size-3 animate-spin" />
-      Turn open
-    </span>
-  );
-}
-
-export type ConversationHeaderProps = {
-  conversationId: string;
-  startTime: string;
-  endTime: string;
-  totalCalls: number;
-  totalInputTokens: number;
-  totalOutputTokens: number;
-  expanded: boolean;
-  onToggle: () => void;
-  /** Unique providers whose models appear in this group, with their distinct
-   * model names. Rendered as a row of provider logos next to the header, one
-   * per provider so model-switching inside a single session is visible.
-   * at a glance. `undefined` hides the strip (default). */
-  providers?: { provider: Provider; models: string[] }[];
-  /** When true and the group is collapsed, show a spinner instead of the
-   * expand chevron to indicate an in-flight request inside the group. */
-  isLoading?: boolean;
-  /** User-Agent string from the first log in the group. */
-  userAgent?: string | null;
-  /** Process ID of the client that issued the first log in the group, used
-   * to render the session identifier. When `conversationId` is a real
-   * session id this is shown as a secondary pill; when `conversationId` is
-   * a fallback (no sessionId was emitted by the client, e.g. `PID:123|/cwd`)
-   * the PID is shown as the primary identifier instead. */
-  clientPid?: number | null;
-  /** Project folder of the client that issued the first log in the group.
-   * Only shown as a secondary label when the session lacks a real
-   * `sessionId` (the same fallback path used for `clientPid`). */
-  clientProjectFolder?: string | null;
-  /** Show IDE identity in the header. Parent IDE rows can disable this to avoid repetition. */
-  showClientIdentity?: boolean;
-  /** Show process/project metadata in the header. Parent process rows can disable this. */
-  showProcessMetadata?: boolean;
-  /** Controls whether timestamps render as compact local time or full ISO strings. */
-  timeDisplayFormat: TimeDisplayFormat;
-  /** Clear all logs in this group from the current view; this header is then unmounted. */
-  onClear?: () => void;
-};
-
-export function ConversationHeader({
-  conversationId,
-  startTime,
-  endTime,
-  totalCalls,
-  totalInputTokens,
-  totalOutputTokens,
-  expanded,
-  onToggle,
-  providers,
-  isLoading = false,
-  userAgent,
-  clientPid,
-  clientProjectFolder,
-  showClientIdentity = true,
-  showProcessMetadata = true,
-  timeDisplayFormat,
-  onClear,
-}: ConversationHeaderProps): JSX.Element {
-  const [confirmOpen, setConfirmOpen] = useState(false);
-
-  const handleClearClick = (e: React.MouseEvent | React.KeyboardEvent): void => {
-    e.stopPropagation();
-    if (onClear === undefined) return;
-    setConfirmOpen(true);
-  };
-
-  const handleOpenInNewTab = useCallback(
-    (e: React.MouseEvent | React.KeyboardEvent): void => {
-      e.stopPropagation();
-      window.open(getSessionPath(conversationId), "_blank", "noopener,noreferrer");
-    },
-    [conversationId],
-  );
-  const providerLogoItems =
-    providers?.map(({ provider, models }) => ({
-      provider,
-      tooltip: models.length === 1 ? (models[0] ?? provider) : models.join(", "),
-    })) ?? [];
-  const clientApp = detectClientApp({ userAgent, conversationId, clientProjectFolder });
-  const detectedClientLabel = clientAppLabel(clientApp);
-  const hasUserAgent = userAgent !== null && userAgent !== undefined && userAgent !== "";
-  const clientDisplayLabel = detectedClientLabel ?? userAgent ?? null;
-  const clientTooltip =
-    detectedClientLabel !== null && hasUserAgent ? `${detectedClientLabel} - ${userAgent}` : null;
-  const isFallbackConversation = isSyntheticSessionId(conversationId);
-  const sessionLabel = compactSessionLabel(conversationId);
-
-  const timeLabel = formatTimestampRange(startTime, endTime, timeDisplayFormat);
-  const callsLabel = `${totalCalls} call${totalCalls !== 1 ? "s" : ""}`;
-
-  return (
-    <div
-      role="button"
-      tabIndex={0}
-      data-nav-id={`conv-${conversationId}`}
-      data-nav-action={expanded ? "collapse" : "expand"}
-      className={cn(
-        "relative flex cursor-pointer items-start gap-2.5 overflow-hidden rounded-md bg-[var(--inspector-surface-low)] px-3 py-2.5 transition-colors",
-        "hover:bg-[var(--inspector-surface-medium)]",
-        "select-none",
-        "sticky top-0 z-10 mb-2",
-        "focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
-      )}
-      onClick={onToggle}
-      onKeyDown={(e) => {
-        if (e.target !== e.currentTarget) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onToggle();
-        }
-      }}
-    >
-      {/* Provider logos: first visual element whenever model/provider logos are available. */}
-      <ProviderLogoStack
-        items={providerLogoItems}
-        ariaLabel="Models used in this session"
-        className="mt-0.5"
-      />
-
-      <span className="min-w-0 flex-1">
-        <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-          <span className="shrink-0 rounded bg-[var(--inspector-surface-medium)] px-1.5 py-0.5 font-mono text-[9px] uppercase text-muted-foreground">
-            Session
-          </span>
-          {isFallbackConversation && showProcessMetadata ? (
-            clientPid !== null && clientPid !== undefined ? (
-              <span
-                className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-foreground"
-                title={`PID ${clientPid}`}
-              >
-                PID {clientPid}
-              </span>
-            ) : (
-              <span
-                className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-foreground"
-                title={conversationId}
-              >
-                {conversationId}
-              </span>
-            )
-          ) : (
-            <span
-              className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-foreground"
-              title={conversationId}
-            >
-              {sessionLabel}
-            </span>
-          )}
-
-          {!isFallbackConversation &&
-            showProcessMetadata &&
-            clientPid !== null &&
-            clientPid !== undefined && (
-              <span
-                className="shrink-0 rounded bg-[var(--inspector-surface-medium)] px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground"
-                title={`Client process ID ${clientPid}`}
-              >
-                PID {clientPid}
-              </span>
-            )}
-
-          {isFallbackConversation &&
-            showProcessMetadata &&
-            clientProjectFolder !== null &&
-            clientProjectFolder !== undefined &&
-            clientProjectFolder !== "" && (
-              <span
-                className="min-w-0 max-w-[240px] truncate font-mono text-xs text-muted-foreground"
-                title={clientProjectFolder}
-              >
-                {clientProjectFolder}
-              </span>
-            )}
-
-          {showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && (
-            <span
-              className="inline-flex min-h-6 shrink-0 flex-wrap items-center gap-1 rounded-md bg-[var(--inspector-surface-medium)] px-1.5 py-0.5 text-xs text-muted-foreground"
-              title={clientTooltip ?? clientDisplayLabel}
-            >
-              <ClientLogo client={clientApp} className="size-4 shrink-0" decorative={true} />
-              <span className="font-mono leading-snug tabular-nums">{clientDisplayLabel}</span>
-            </span>
-          )}
-
-          {isLoading && <PendingTurnBadge />}
-        </span>
-
-        <span className="mt-1.5 flex min-w-0 flex-wrap items-center gap-1.5">
-          <HeaderMetric icon={<Clock className="size-3 shrink-0" />} title={timeLabel}>
-            {timeLabel}
-          </HeaderMetric>
-          <HeaderMetric icon={<MessageSquare className="size-3 shrink-0" />}>
-            {callsLabel}
-          </HeaderMetric>
-          <HeaderMetric icon={<Zap className="size-3 shrink-0" />} className="max-w-full">
-            <span className="text-[var(--inspector-status-info)]">
-              {formatTokens(totalInputTokens)}
-            </span>
-            {" / "}
-            <span className="text-[var(--inspector-status-watch)]">
-              {formatTokens(totalOutputTokens)}
-            </span>
-          </HeaderMetric>
-        </span>
-      </span>
-
-      <span className="flex shrink-0 items-start gap-1.5">
-        {/* Open this session in a new tab - deep link to /session/$id */}
-        <button
-          type="button"
-          onClick={handleOpenInNewTab}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              handleOpenInNewTab(e);
-            }
-          }}
-          aria-label={`Open session ${conversationId} in a new tab`}
-          title="Open this session in a new tab"
-          className={HEADER_ACTION_BUTTON_CLASS}
-        >
-          <ExternalLink className="size-3.5" />
-        </button>
-
-        {/* Per-group Clear - does not toggle the group's expand state */}
-        {onClear !== undefined && (
-          <button
-            type="button"
-            onClick={handleClearClick}
-            aria-label={`Clear group (${totalCalls} request${totalCalls !== 1 ? "s" : ""})`}
-            title="Clear this group from the current view"
-            className={HEADER_ACTION_BUTTON_CLASS}
-          >
-            <Trash2 className="size-3.5" />
-          </button>
-        )}
-
-        {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
-        <span
-          className="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-[var(--inspector-surface-low)] text-muted-foreground transition-colors hover:bg-[var(--inspector-surface-medium)] hover:text-foreground"
-          aria-hidden="true"
-        >
-          {expanded ? (
-            <ChevronDown className="size-4 shrink-0" />
-          ) : isLoading ? (
-            <Loader2 className="size-4 shrink-0 animate-spin" />
-          ) : (
-            <ChevronRight className="size-4 shrink-0" />
-          )}
-        </span>
-      </span>
-
-      {isLoading && (
-        <span
-          className="pointer-events-none absolute inset-x-3 bottom-0 h-px overflow-hidden rounded-full bg-[var(--inspector-surface-medium)]"
-          aria-hidden="true"
-        >
-          <span className="absolute inset-y-0 left-0 w-1/3 animate-pulse rounded-full bg-[var(--inspector-status-watch)] opacity-70" />
-        </span>
-      )}
-
-      <ConfirmDialog
-        open={confirmOpen}
-        onOpenChange={setConfirmOpen}
-        title="Clear this group from the current view?"
-        description={`This will hide ${totalCalls} request${totalCalls !== 1 ? "s" : ""} from the current view. Stored logs remain reloadable.`}
-        confirmLabel="Clear"
-        variant="destructive"
-        onConfirm={() => {
-          onClear?.();
-        }}
-      />
-    </div>
-  );
-}
-
-export type ConversationGroupData = {
-  id: string;
-  conversationId: string;
-  logs: CapturedLog[];
-};
-
-export function getGroupApiFormat(logs: CapturedLog[]): "anthropic" | "openai" | "unknown" {
-  for (const log of logs) {
-    const apiFormat = resolveLogFormat(log);
-    if (apiFormat !== "unknown") {
-      return apiFormat;
-    }
-  }
-  return "unknown";
-}
-
-/**
- * Returns true when a group contains logs of BOTH Anthropic and OpenAI
- * formats. Used to decide whether to render the per-row API format badge
- * inside a group (the badge is normally hidden because the group header
- * already shows the format).
- */
-export function hasMixedApiFormat(logs: CapturedLog[]): boolean {
-  let hasAnthropic = false;
-  let hasOpenai = false;
-  for (const log of logs) {
-    const apiFormat = resolveLogFormat(log);
-    if (apiFormat === "anthropic") hasAnthropic = true;
-    else if (apiFormat === "openai") hasOpenai = true;
-    if (hasAnthropic && hasOpenai) return true;
-  }
-  return false;
-}
-
-export function getConversationId(log: CapturedLog): string {
-  if (log.sessionId !== null && log.sessionId !== "" && log.sessionId !== undefined) {
-    return log.sessionId;
-  }
-  if (log.isTest === true) return "provider-test";
-  const hasPid = log.clientPid !== null && log.clientPid !== undefined;
-  const hasFolder = log.clientProjectFolder !== null && log.clientProjectFolder !== undefined;
-  if (!hasPid && !hasFolder) return "default";
-  const pid = hasPid ? `PID:${log.clientPid}` : "unknown";
-  const folder = hasFolder ? log.clientProjectFolder : "no-folder";
-  return `${pid}|${folder}`;
-}
-
-export function groupLogsByConversation(logs: CapturedLog[]): ConversationGroupData[] {
-  const groups = new Map<string, CapturedLog[]>();
-
-  for (const log of logs) {
-    const convId = getConversationId(log);
-    const existing = groups.get(convId);
-    if (existing !== undefined) {
-      existing.push(log);
-    } else {
-      groups.set(convId, [log]);
-    }
-  }
-
-  const result: ConversationGroupData[] = [];
-
-  for (const [conversationId, groupLogs] of groups) {
-    const sorted = [...groupLogs].sort((a, b) => a.timestamp.localeCompare(b.timestamp));
-    result.push({
-      id: conversationId,
-      conversationId,
-      logs: sorted,
-    });
-  }
-
-  result.sort((a, b) => (a.logs[0]?.timestamp ?? "").localeCompare(b.logs[0]?.timestamp ?? ""));
-
-  return result;
-}

package/src/components/proxy-viewer/LiveConnectionStatus.tsx

@@ -1,186 +0,0 @@
-import { type JSX } from "react";
-import { CircleStop, RefreshCw } from "lucide-react";
-import { cn } from "../../lib/utils";
-import type { LiveConnectionPhase, LiveConnectionState } from "./liveConnectionState";
-
-type ConnectionPresentation = {
-  label: string;
-  description: string;
-  toneClass: string;
-  dotClass: string;
-  canRetry: boolean;
-  canStop: boolean;
-};
-
-function formatLastSuccess(lastSuccessAt: number | null): string | null {
-  if (lastSuccessAt === null) return null;
-  return new Date(lastSuccessAt).toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-  });
-}
-
-function buildDescription(state: LiveConnectionState, message: string, hasLogs: boolean): string {
-  const lastSuccess = formatLastSuccess(state.lastSuccessAt);
-  const retry = state.retryCount > 0 ? ` Retry ${state.retryCount.toString()}.` : "";
-  const retained = hasLogs ? " Captured logs remain visible." : "";
-  const lastUpdate = lastSuccess === null ? "" : ` Last update ${lastSuccess}.`;
-  return `${message}${lastUpdate}${retry}${retained}`;
-}
-
-function presentationForStatus(
-  status: LiveConnectionPhase,
-  state: LiveConnectionState,
-  hasLogs: boolean,
-): ConnectionPresentation {
-  switch (status) {
-    case "connecting":
-      return {
-        label: "Connecting",
-        description: buildDescription(state, "Waiting for the first live update.", hasLogs),
-        toneClass: "border-cyan-400/20 bg-cyan-500/8 text-cyan-100",
-        dotClass: "bg-cyan-300 animate-pulse motion-reduce:animate-none",
-        canRetry: false,
-        canStop: false,
-      };
-    case "live":
-      return {
-        label: "Live",
-        description: buildDescription(state, "Live updates are current.", hasLogs),
-        toneClass: "border-emerald-400/20 bg-emerald-500/8 text-emerald-100",
-        dotClass: "bg-emerald-300",
-        canRetry: false,
-        canStop: false,
-      };
-    case "reconnecting":
-      return {
-        label: "Reconnecting",
-        description: buildDescription(state, "Live updates were interrupted.", hasLogs),
-        toneClass: "border-amber-400/20 bg-amber-500/8 text-amber-100",
-        dotClass: "bg-amber-300 animate-pulse motion-reduce:animate-none",
-        canRetry: true,
-        canStop: true,
-      };
-    case "stale":
-      return {
-        label: "Stale data",
-        description: buildDescription(state, "Live updates have not resumed.", hasLogs),
-        toneClass: "border-orange-400/25 bg-orange-500/10 text-orange-100",
-        dotClass: "bg-orange-300",
-        canRetry: true,
-        canStop: true,
-      };
-    case "offline":
-      return {
-        label: "Offline",
-        description: buildDescription(
-          state,
-          state.errorMessage ?? "Live updates are paused.",
-          hasLogs,
-        ),
-        toneClass: "border-slate-400/20 bg-slate-500/10 text-slate-200",
-        dotClass: "bg-slate-400",
-        canRetry: true,
-        canStop: false,
-      };
-    case "error":
-      return {
-        label: "Connection error",
-        description: buildDescription(
-          state,
-          state.errorMessage ?? "The live stream reported a recoverable error.",
-          hasLogs,
-        ),
-        toneClass: "border-red-400/25 bg-red-500/10 text-red-100",
-        dotClass: "bg-red-300",
-        canRetry: true,
-        canStop: true,
-      };
-  }
-}
-
-export function LiveConnectionBadge({ state }: { state: LiveConnectionState }): JSX.Element {
-  const presentation = presentationForStatus(state.status, state, false);
-  const lastSuccess = formatLastSuccess(state.lastSuccessAt);
-  const retryLabel = state.retryCount > 0 ? `Retry ${state.retryCount.toString()}` : null;
-
-  return (
-    <span
-      role="status"
-      aria-label={presentation.description}
-      data-connection-state={state.status}
-      className={cn(
-        "inline-flex h-7 max-w-full items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium",
-        presentation.toneClass,
-      )}
-    >
-      <span className={cn("size-1.5 shrink-0 rounded-full", presentation.dotClass)} />
-      <span className="shrink-0">{presentation.label}</span>
-      {retryLabel !== null && (
-        <span className="hidden truncate text-current/70 sm:inline">{retryLabel}</span>
-      )}
-      {lastSuccess !== null && (
-        <span className="hidden truncate font-mono text-[10px] text-current/65 md:inline">
-          Last {lastSuccess}
-        </span>
-      )}
-    </span>
-  );
-}
-
-export function LiveConnectionStatus({
-  state,
-  hasLogs,
-  onRetry,
-  onStop,
-}: {
-  state: LiveConnectionState;
-  hasLogs: boolean;
-  onRetry: () => void;
-  onStop: () => void;
-}): JSX.Element {
-  const presentation = presentationForStatus(state.status, state, hasLogs);
-
-  return (
-    <div
-      role="status"
-      aria-live="polite"
-      data-connection-state={state.status}
-      className={cn(
-        "mt-2 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-md border px-3 py-2 text-xs",
-        presentation.toneClass,
-      )}
-    >
-      <div className="flex min-w-0 flex-1 items-center gap-2">
-        <span className={cn("size-2 shrink-0 rounded-full", presentation.dotClass)} />
-        <span className="shrink-0 font-semibold">{presentation.label}</span>
-        <span className="min-w-0 text-current/75">{presentation.description}</span>
-      </div>
-      {(presentation.canRetry || presentation.canStop) && (
-        <div className="flex shrink-0 items-center gap-1.5">
-          {presentation.canRetry && (
-            <button
-              type="button"
-              onClick={onRetry}
-              className="inline-flex h-7 items-center gap-1 rounded-md bg-black/15 px-2 font-medium transition-colors hover:bg-black/25 focus-visible:ring-1 focus-visible:ring-current focus-visible:outline-none"
-            >
-              <RefreshCw className="size-3" />
-              Retry now
-            </button>
-          )}
-          {presentation.canStop && (
-            <button
-              type="button"
-              onClick={onStop}
-              className="inline-flex h-7 items-center gap-1 rounded-md px-2 text-current/70 transition-colors hover:bg-black/15 hover:text-current focus-visible:ring-1 focus-visible:ring-current focus-visible:outline-none"
-            >
-              <CircleStop className="size-3" />
-              Stop retrying
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}