@tonyclaw/agent-inspector 3.0.28 → 3.0.30

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

@@ -22,7 +22,7 @@ import { ProviderLogoStack } from "./ProviderLogoStack";
 import { resolveLogFormat } from "./log-formats";
 
 const HEADER_ACTION_BUTTON_CLASS =
-  "bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground";
+  "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 (
@@ -34,7 +34,7 @@ export function isSyntheticSessionId(conversationId: string): boolean {
 }
 
 export function compactSessionLabel(conversationId: string): string {
-  if (isSyntheticSessionId(conversationId)) return "Sessionless";
+  if (isSyntheticSessionId(conversationId)) return "No session ID";
   return conversationId.length > 24
     ? `${conversationId.slice(0, 12)}...${conversationId.slice(-12)}`
     : conversationId;
@@ -54,7 +54,7 @@ function HeaderMetric({
   return (
     <span
       className={cn(
-        "bg-white/[0.045] inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground",
+        "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}
@@ -68,7 +68,7 @@ function HeaderMetric({
 function PendingTurnBadge(): JSX.Element {
   return (
     <span
-      className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-md bg-amber-300/[0.10] px-1.5 font-mono text-[10px] uppercase text-amber-100/90 ring-1 ring-amber-200/10"
+      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" />
@@ -174,11 +174,11 @@ export function ConversationHeader({
       data-nav-id={`conv-${conversationId}`}
       data-nav-action={expanded ? "collapse" : "expand"}
       className={cn(
-        "bg-black/[0.10] relative flex cursor-pointer items-start gap-2.5 overflow-hidden rounded-[8px] px-3 py-2.5 transition-colors",
-        "hover:bg-black/[0.16]",
+        "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-cyan-300/35 focus-visible:outline-none",
+        "focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
       )}
       onClick={onToggle}
       onKeyDown={(e) => {
@@ -198,20 +198,20 @@ export function ConversationHeader({
 
       <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-white/[0.04] px-1.5 py-0.5 font-mono text-[9px] uppercase text-muted-foreground/70">
+          <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-slate-100"
+                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-slate-100"
+                className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-foreground"
                 title={conversationId}
               >
                 {conversationId}
@@ -219,7 +219,7 @@ export function ConversationHeader({
             )
           ) : (
             <span
-              className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-slate-100"
+              className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-foreground"
               title={conversationId}
             >
               {sessionLabel}
@@ -231,7 +231,7 @@ export function ConversationHeader({
             clientPid !== null &&
             clientPid !== undefined && (
               <span
-                className="bg-white/[0.045] shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground"
+                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}
@@ -253,7 +253,7 @@ export function ConversationHeader({
 
           {showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && (
             <span
-              className="bg-white/[0.045] inline-flex min-h-6 shrink-0 flex-wrap items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-muted-foreground"
+              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} />
@@ -272,9 +272,13 @@ export function ConversationHeader({
             {callsLabel}
           </HeaderMetric>
           <HeaderMetric icon={<Zap className="size-3 shrink-0" />} className="max-w-full">
-            <span className="text-blue-400">{formatTokens(totalInputTokens)}</span>
+            <span className="text-[var(--inspector-status-info)]">
+              {formatTokens(totalInputTokens)}
+            </span>
             {" / "}
-            <span className="text-amber-400">{formatTokens(totalOutputTokens)}</span>
+            <span className="text-[var(--inspector-status-watch)]">
+              {formatTokens(totalOutputTokens)}
+            </span>
           </HeaderMetric>
         </span>
       </span>
@@ -311,7 +315,7 @@ export function ConversationHeader({
 
         {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
         <span
-          className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200"
+          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 ? (
@@ -326,10 +330,10 @@ export function ConversationHeader({
 
       {isLoading && (
         <span
-          className="pointer-events-none absolute inset-x-3 bottom-0 h-px overflow-hidden rounded-full bg-white/[0.06]"
+          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-amber-200/65 shadow-[0_0_14px_rgba(252,211,77,0.32)]" />
+          <span className="absolute inset-y-0 left-0 w-1/3 animate-pulse rounded-full bg-[var(--inspector-status-watch)] opacity-70" />
         </span>
       )}
 

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

@@ -0,0 +1,186 @@
+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>
+  );
+}