@tonyclaw/agent-inspector 2.1.0 → 2.1.1

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

@@ -1,9 +1,10 @@
 import { AlertTriangle, GitCompareArrows } from "lucide-react";
-import { Suspense, type JSX } from "react";
+import { Suspense, type JSX, type ReactNode } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
 import { CapturedLogSchema, type CapturedLog } from "../../contracts";
 import { fetchJson } from "../../lib/apiClient";
 import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
+import { cn } from "../../lib/utils";
 import { stripClaudeCodeBillingHeader } from "../../proxy/claudeCodeStrip";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
@@ -53,10 +54,111 @@ function resolveFocusedTab(tab: LogFocusTab, anatomySegments: AnatomySegment[] |
 
 type BodyHydrationState = "idle" | "loading" | "failed";
 
+const TAB_TRIGGER_CLASS =
+  "h-9 flex-none rounded-none border-0 border-b-2 border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none hover:bg-cyan-400/[0.04] hover:text-foreground data-[state=active]:border-cyan-300 data-[state=active]:bg-transparent data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
+
 function shouldHydrateLogBody(log: CapturedLog): boolean {
   return log.bodyContentMode === "compact" || log.bodyContentMode === "truncated";
 }
 
+function ExpandedPanel({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-md border border-white/10 bg-[#06080b] p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+function EmptyState({ children }: { children: ReactNode }): JSX.Element {
+  return (
+    <div className="rounded-md border border-dashed border-white/10 bg-white/[0.02] px-3 py-5 text-center text-xs italic text-muted-foreground">
+      {children}
+    </div>
+  );
+}
+
+function RawTextBlock({ children }: { children: ReactNode }): JSX.Element {
+  return (
+    <pre className="inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-md border border-white/10 bg-black/30 p-3 font-mono text-xs leading-relaxed text-muted-foreground">
+      {children}
+    </pre>
+  );
+}
+
+type NoticeTone = "loading" | "warning" | "danger";
+
+const NOTICE_TONE_CLASSES: Record<NoticeTone, string> = {
+  loading: "border-cyan-400/25 bg-cyan-400/[0.06] text-cyan-100",
+  warning: "border-amber-400/25 bg-amber-400/[0.08] text-amber-100",
+  danger: "border-rose-400/25 bg-rose-400/[0.08] text-rose-100",
+};
+
+function NoticeBlock({
+  tone,
+  title,
+  children,
+}: {
+  tone: NoticeTone;
+  title?: string;
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "mb-3 rounded-md border px-3 py-2 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+        NOTICE_TONE_CLASSES[tone],
+      )}
+    >
+      {title !== undefined && <div className="mb-1 font-semibold">{title}</div>}
+      <div className="leading-relaxed text-muted-foreground">{children}</div>
+    </div>
+  );
+}
+
+function HeaderRows({
+  headers,
+  emptyLabel,
+}: {
+  headers: Record<string, string> | undefined;
+  emptyLabel: string;
+}): JSX.Element {
+  const entries =
+    headers === undefined
+      ? []
+      : Object.entries(headers).sort(([left], [right]) => left.localeCompare(right));
+
+  if (entries.length === 0) return <EmptyState>{emptyLabel}</EmptyState>;
+
+  return (
+    <div className="overflow-hidden rounded-md border border-white/10 bg-black/20 font-mono text-xs">
+      {entries.map(([key, value]) => (
+        <div
+          key={key}
+          className="grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/5 last:border-b-0"
+        >
+          <div className="min-w-0 truncate border-r border-white/5 bg-white/[0.03] px-2.5 py-2 font-semibold text-cyan-200">
+            {key}
+          </div>
+          <div className="min-w-0 truncate px-2.5 py-2 text-muted-foreground" title={value}>
+            {value}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export type LogEntryProps = {
   log: CapturedLog;
   viewMode?: "simple" | "full";
@@ -92,7 +194,12 @@ function DiffToggleButton({
         <Button
           variant={active ? "default" : "outline"}
           size="sm"
-          className="h-8 text-xs"
+          className={cn(
+            "h-8 border-white/10 text-xs shadow-none",
+            active
+              ? "bg-cyan-300 text-black hover:bg-cyan-200"
+              : "bg-[#0a0d11] text-muted-foreground hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100",
+          )}
           onClick={onClick}
           aria-pressed={active}
         >
@@ -372,7 +479,14 @@ export const LogEntry = memo(function ({
 
   return (
     <TooltipProvider>
-      <div className="border border-border rounded-lg mb-1 overflow-hidden">
+      <div
+        className={cn(
+          "mb-2 overflow-hidden rounded-md border bg-[#090a0d] transition-[background-color,border-color,box-shadow]",
+          expanded
+            ? "border-cyan-300/20 shadow-[0_18px_60px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.05)]"
+            : "border-border/70 hover:border-border",
+        )}
+      >
         <LogEntryHeader
           log={displayLog}
           messageCount={requestAnalysis.messageCount}
@@ -394,26 +508,55 @@ export const LogEntry = memo(function ({
         />
 
         {expanded && (
-          <div onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
-            <Tabs value={activeTab} onValueChange={setActiveTab}>
-              <TabsList className="mx-4 mt-2">
-                {viewMode === "full" && <TabsTrigger value="raw-headers">Raw Headers</TabsTrigger>}
-                {viewMode === "full" && <TabsTrigger value="headers">Headers</TabsTrigger>}
-                {anatomySegments !== null && <TabsTrigger value="anatomy">Context</TabsTrigger>}
+          <div
+            className="border-t border-white/10 bg-[#050607]/80 pt-2"
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="gap-2">
+              <TabsList
+                variant="line"
+                className="inspector-scrollbar mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-none border-b border-white/10 bg-transparent p-0"
+              >
+                {viewMode === "full" && (
+                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-headers">
+                    Raw Headers
+                  </TabsTrigger>
+                )}
+                {viewMode === "full" && (
+                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="headers">
+                    Headers
+                  </TabsTrigger>
+                )}
+                {anatomySegments !== null && (
+                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="anatomy">
+                    Context
+                  </TabsTrigger>
+                )}
                 {shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && (
-                  <TabsTrigger value="raw-request">Raw Request</TabsTrigger>
+                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-request">
+                    Raw Request
+                  </TabsTrigger>
+                )}
+                <TabsTrigger className={TAB_TRIGGER_CLASS} value="request">
+                  Request
+                </TabsTrigger>
+                {viewMode === "full" && (
+                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw">
+                    Raw Response
+                  </TabsTrigger>
                 )}
-                <TabsTrigger value="request">Request</TabsTrigger>
-                {viewMode === "full" && <TabsTrigger value="raw">Raw Response</TabsTrigger>}
-                <TabsTrigger value="parsed">Response</TabsTrigger>
+                <TabsTrigger className={TAB_TRIGGER_CLASS} value="parsed">
+                  Response
+                </TabsTrigger>
               </TabsList>
 
               {shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && (
                 <TabsContent value="raw-request">
                   {activeTab === "raw-request" && (
-                    <div className="px-4 pt-1 pb-3">
+                    <ExpandedPanel>
                       {displayLog.rawRequestBody === null ? (
-                        <p className="text-xs text-muted-foreground italic">No request body</p>
+                        <EmptyState>No request body</EmptyState>
                       ) : rawRequestExpansion.parsedData !== null ? (
                         <Suspense fallback={<TabFallback />}>
                           <LazyJsonViewer
@@ -423,31 +566,29 @@ export const LogEntry = memo(function ({
                           />
                         </Suspense>
                       ) : (
-                        <pre className="font-mono text-xs whitespace-pre-wrap break-words">
-                          {displayLog.rawRequestBody}
-                        </pre>
+                        <RawTextBlock>{displayLog.rawRequestBody}</RawTextBlock>
                       )}
-                    </div>
+                    </ExpandedPanel>
                   )}
                 </TabsContent>
               )}
 
               <TabsContent value="request">
                 {activeTab === "request" && (
-                  <div className="px-4 pt-1 pb-3">
+                  <ExpandedPanel>
                     {bodyHydrationState === "loading" && (
-                      <div className="mb-3 rounded border border-border bg-muted/30 p-3 text-xs text-muted-foreground">
+                      <NoticeBlock tone="loading">
                         Loading full request and response bodies...
-                      </div>
+                      </NoticeBlock>
                     )}
                     {bodyHydrationState === "failed" && (
-                      <div className="mb-3 rounded border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-200">
+                      <NoticeBlock tone="warning">
                         Full request and response bodies could not be loaded. Compact metadata is
                         still available.
-                      </div>
+                      </NoticeBlock>
                     )}
                     {warnings.length > 0 && (
-                      <div className="mb-3 rounded border border-amber-500/30 bg-amber-500/10 p-3 text-xs">
+                      <NoticeBlock tone="warning">
                         <div className="flex items-center gap-2 font-semibold text-amber-300">
                           <AlertTriangle className="size-3.5" />
                           Tool schema warnings
@@ -457,7 +598,7 @@ export const LogEntry = memo(function ({
                             <li key={warning}>{warning}</li>
                           ))}
                         </ul>
-                      </div>
+                      </NoticeBlock>
                     )}
                     <RequestTools
                       summary={requestTools}
@@ -475,7 +616,7 @@ export const LogEntry = memo(function ({
                     ) : (
                       <div ref={requestJsonRef}>
                         {displayedRequestBody === null ? (
-                          <p className="text-xs text-muted-foreground italic">No request body</p>
+                          <EmptyState>No request body</EmptyState>
                         ) : requestExpansion.parsedData !== null ? (
                           <Suspense fallback={<TabFallback />}>
                             <LazyJsonViewer
@@ -487,28 +628,28 @@ export const LogEntry = memo(function ({
                             />
                           </Suspense>
                         ) : (
-                          <pre className="font-mono text-xs whitespace-pre-wrap break-words">
-                            {displayedRequestBody}
-                          </pre>
+                          <RawTextBlock>{displayedRequestBody}</RawTextBlock>
                         )}
                       </div>
                     )}
-                  </div>
+                  </ExpandedPanel>
                 )}
               </TabsContent>
 
               {anatomySegments !== null && (
                 <TabsContent value="anatomy">
                   {activeTab === "anatomy" && (
-                    <Suspense fallback={<TabFallback />}>
-                      <LazyRequestAnatomy
-                        parsed={requestExpansion.parsedData}
-                        inputTokens={displayLog.inputTokens ?? null}
-                        model={displayLog.model}
-                        segments={anatomySegments}
-                        onSegmentActivate={jumpToAnatomySegment}
-                      />
-                    </Suspense>
+                    <ExpandedPanel className="p-0">
+                      <Suspense fallback={<TabFallback />}>
+                        <LazyRequestAnatomy
+                          parsed={requestExpansion.parsedData}
+                          inputTokens={displayLog.inputTokens ?? null}
+                          model={displayLog.model}
+                          segments={anatomySegments}
+                          onSegmentActivate={jumpToAnatomySegment}
+                        />
+                      </Suspense>
+                    </ExpandedPanel>
                   )}
                 </TabsContent>
               )}
@@ -516,7 +657,7 @@ export const LogEntry = memo(function ({
               {viewMode === "full" && (
                 <TabsContent value="headers">
                   {activeTab === "headers" && (
-                    <div className="px-4 pt-1 pb-3">
+                    <ExpandedPanel>
                       {/* Copy lives in the log header. */}
                       <div className="flex justify-end gap-2 mb-2">
                         {shouldShowHeadersDiffButton(
@@ -539,25 +680,10 @@ export const LogEntry = memo(function ({
                           headers={displayLog.headers}
                           emptyLabel="No transformation applied; raw and processed headers are identical."
                         />
-                      ) : displayLog.headers && Object.keys(displayLog.headers).length > 0 ? (
-                        <div className="space-y-1 font-mono text-xs">
-                          {Object.entries(displayLog.headers)
-                            .sort(([a], [b]) => a.localeCompare(b))
-                            .map(([key, value]) => (
-                              <div key={key} className="flex gap-2">
-                                <span className="text-blue-600 dark:text-blue-400 font-semibold shrink-0">
-                                  {key}:
-                                </span>
-                                <span className="text-muted-foreground truncate" title={value}>
-                                  {value}
-                                </span>
-                              </div>
-                            ))}
-                        </div>
                       ) : (
-                        <p className="text-xs text-muted-foreground italic">No headers captured</p>
+                        <HeaderRows headers={displayLog.headers} emptyLabel="No headers captured" />
                       )}
-                    </div>
+                    </ExpandedPanel>
                   )}
                 </TabsContent>
               )}
@@ -565,41 +691,24 @@ export const LogEntry = memo(function ({
               {viewMode === "full" && (
                 <TabsContent value="raw-headers">
                   {activeTab === "raw-headers" && (
-                    <div className="px-4 pt-1 pb-3">
+                    <ExpandedPanel>
                       {/* Copy lives in the log header. */}
-                      {displayLog.rawHeaders && Object.keys(displayLog.rawHeaders).length > 0 ? (
-                        <div className="space-y-1 font-mono text-xs">
-                          {Object.entries(displayLog.rawHeaders)
-                            .sort(([a], [b]) => a.localeCompare(b))
-                            .map(([key, value]) => (
-                              <div key={key} className="flex gap-2">
-                                <span className="text-blue-600 dark:text-blue-400 font-semibold shrink-0">
-                                  {key}:
-                                </span>
-                                <span className="text-muted-foreground truncate" title={value}>
-                                  {value}
-                                </span>
-                              </div>
-                            ))}
-                        </div>
-                      ) : (
-                        <p className="text-xs text-muted-foreground italic">
-                          No raw headers captured
-                        </p>
-                      )}
-                    </div>
+                      <HeaderRows
+                        headers={displayLog.rawHeaders}
+                        emptyLabel="No raw headers captured"
+                      />
+                    </ExpandedPanel>
                   )}
                 </TabsContent>
               )}
 
               <TabsContent value="raw">
                 {activeTab === "raw" && (
-                  <div className="px-4 pt-1 pb-3 space-y-3">
+                  <ExpandedPanel className="space-y-3">
                     {displayLog.error !== undefined && displayLog.error !== null && (
-                      <div className="rounded border border-destructive/50 bg-destructive/10 p-3 text-xs">
-                        <div className="font-semibold text-destructive mb-1">SSE Error</div>
-                        <div className="text-muted-foreground font-mono">{displayLog.error}</div>
-                      </div>
+                      <NoticeBlock tone="danger" title="SSE Error">
+                        <span className="font-mono">{displayLog.error}</span>
+                      </NoticeBlock>
                     )}
                     {displayLog.responseText !== null ? (
                       <Suspense fallback={<TabFallback />}>
@@ -611,7 +720,7 @@ export const LogEntry = memo(function ({
                         />
                       </Suspense>
                     ) : (
-                      <p className="text-xs text-muted-foreground italic">No response</p>
+                      <EmptyState>No response</EmptyState>
                     )}
                     {displayLog.streaming === true && (
                       <Suspense fallback={<TabFallback />}>
@@ -621,13 +730,13 @@ export const LogEntry = memo(function ({
                         />
                       </Suspense>
                     )}
-                  </div>
+                  </ExpandedPanel>
                 )}
               </TabsContent>
 
               <TabsContent value="parsed">
                 {activeTab === "parsed" && (
-                  <div className="px-4 pt-1 pb-3">
+                  <ExpandedPanel>
                     <Suspense fallback={<TabFallback />}>
                       <LazyResponseView
                         responseText={displayLog.responseText}
@@ -641,7 +750,7 @@ export const LogEntry = memo(function ({
                         error={displayLog.error}
                       />
                     </Suspense>
-                  </div>
+                  </ExpandedPanel>
                 )}
               </TabsContent>
             </Tabs>

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

@@ -41,6 +41,9 @@ const STATUS_BADGE_CLASSES: Record<StatusCategory, string> = {
   pending: "bg-muted text-muted-foreground border-border",
 };
 
+const HEADER_ACTION_BUTTON_CLASS =
+  "size-8 border-white/10 bg-[#0a0d11] text-muted-foreground shadow-none hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100";
+
 function formatElapsed(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
   return `${(ms / 1000).toFixed(1)}s`;
@@ -171,7 +174,7 @@ export const LogEntryHeader = memo(function ({
         data-nav-action={expanded ? "collapse" : "expand"}
         className={cn(
           "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 px-3 py-1.5 cursor-pointer transition-colors",
-          "hover:bg-muted/50",
+          expanded ? "bg-[#0c1015]" : "hover:bg-muted/30",
           "select-none",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
         )}
@@ -427,7 +430,7 @@ export const LogEntryHeader = memo(function ({
                           <Button
                             variant="outline"
                             size="icon"
-                            className="size-8"
+                            className={HEADER_ACTION_BUTTON_CLASS}
                             onClick={action.expansion.onToggle}
                             disabled={action.expansion.isPending}
                             aria-pressed={action.expansion.isExpanded}
@@ -456,8 +459,9 @@ export const LogEntryHeader = memo(function ({
                             variant="outline"
                             size="icon"
                             className={cn(
-                              "size-8",
-                              action.diffWithRaw.active && "bg-accent text-accent-foreground",
+                              HEADER_ACTION_BUTTON_CLASS,
+                              action.diffWithRaw.active &&
+                                "border-cyan-300/35 bg-cyan-400/15 text-cyan-100",
                             )}
                             onClick={action.diffWithRaw.onToggle}
                             aria-pressed={action.diffWithRaw.active}
@@ -481,7 +485,7 @@ export const LogEntryHeader = memo(function ({
                           <Button
                             variant="outline"
                             size="icon"
-                            className="size-8"
+                            className={HEADER_ACTION_BUTTON_CLASS}
                             onClick={action.diffWithPrevious}
                             aria-label="Diff with previous"
                           >
@@ -499,7 +503,7 @@ export const LogEntryHeader = memo(function ({
                           <Button
                             variant="outline"
                             size="icon"
-                            className="size-8"
+                            className={HEADER_ACTION_BUTTON_CLASS}
                             onClick={action.onCopy}
                             aria-label={action.copyCopied ? "Copied" : action.copyLabel}
                           >
@@ -524,7 +528,7 @@ export const LogEntryHeader = memo(function ({
                   <Button
                     variant="outline"
                     size="icon"
-                    className="size-8"
+                    className={HEADER_ACTION_BUTTON_CLASS}
                     onClick={onReplay}
                     aria-label="Replay request"
                   >

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

@@ -101,7 +101,7 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="rounded-md border border-border/60 bg-background/40">
+      <div className="rounded-md border border-white/10 bg-black/20 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]">
         <div className="flex min-w-0 items-center gap-2 px-2.5 py-2">
           <button
             type="button"
@@ -152,13 +152,13 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
           </button>
         </div>
         <CollapsibleContent>
-          <div className="space-y-2 border-t border-border/60 px-2.5 py-2">
+          <div className="space-y-2 border-t border-white/10 bg-white/[0.02] px-2.5 py-2">
             {tool.description !== null && (
               <p className="text-xs leading-relaxed text-muted-foreground">{tool.description}</p>
             )}
             <RequiredParameters names={tool.requiredParameters} />
             {tool.schema !== null && (
-              <ScrollArea className="max-h-64 rounded-md border border-border/60 bg-muted/20 p-2">
+              <ScrollArea className="max-h-64 rounded-md border border-white/10 bg-[#06080b] p-2">
                 <JsonViewer data={safeJsonValue(tool.schema)} defaultExpandDepth={0} />
               </ScrollArea>
             )}
@@ -197,7 +197,7 @@ export const RequestTools = memo(function RequestTools({
   const hiddenPreviewCount = summary.tools.length - previewTools.length;
 
   return (
-    <section className="mb-3 rounded-lg border border-border/70 bg-muted/20">
+    <section className="mb-3 overflow-hidden rounded-md border border-white/10 bg-[#080b0f] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
       <div className="flex min-w-0 flex-wrap items-center gap-2 px-3 py-2">
         <div className="flex min-w-0 flex-1 items-center gap-2">
           <Wrench className="size-4 shrink-0 text-sky-300/80" />
@@ -236,7 +236,7 @@ export const RequestTools = memo(function RequestTools({
           type="button"
           variant="ghost"
           size="sm"
-          className="h-7 px-2"
+          className="h-7 border border-white/10 bg-black/20 px-2 text-muted-foreground hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100"
           onClick={() => setExpanded((value) => !value)}
           aria-expanded={expanded}
         >
@@ -245,7 +245,7 @@ export const RequestTools = memo(function RequestTools({
         </Button>
       </div>
 
-      <div className="flex min-w-0 flex-wrap gap-1.5 border-t border-border/60 px-3 py-2">
+      <div className="flex min-w-0 flex-wrap gap-1.5 border-t border-white/10 bg-black/10 px-3 py-2">
         {previewTools.map((tool) => (
           <Badge
             key={tool.name}
@@ -266,8 +266,8 @@ export const RequestTools = memo(function RequestTools({
       </div>
 
       {expanded && (
-        <div className="space-y-2 border-t border-border/60 px-3 py-3">
-          <label className="flex h-8 items-center gap-2 rounded-md border border-border/70 bg-background/50 px-2 text-xs">
+        <div className="space-y-2 border-t border-white/10 bg-black/15 px-3 py-3">
+          <label className="flex h-8 items-center gap-2 rounded-md border border-white/10 bg-[#06080b] px-2 text-xs">
             <Search className="size-3.5 shrink-0 text-muted-foreground" />
             <input
               value={query}

package/src/components/ui/json-viewer.tsx

@@ -438,6 +438,12 @@ export function JsonViewer({
             <CopyValueButton value={data} />
           </div>
         )}
+        {entries.length === 0 && (
+          <div className="rounded-md border border-white/10 bg-black/20 px-3 py-2 text-muted-foreground">
+            <span className="text-cyan-300">{isArray ? "[]" : "{}"}</span>
+            <span className="ml-2 text-[10px] uppercase">0 items</span>
+          </div>
+        )}
         <div key={bulkRevision}>
           {entries.map(([key, childValue]) => (
             <JsonNode

package/styles/globals.css

@@ -178,11 +178,56 @@
     0 0 0 3px color-mix(in oklch, var(--chart-2) 20%, transparent);
 }
 
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    scrollbar-color: color-mix(in srgb, var(--muted-foreground) 32%, transparent) transparent;
+    scrollbar-width: thin;
+  }
+  html::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+  }
+  html::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  html::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--muted-foreground) 26%, transparent);
+    border: 2px solid transparent;
+    border-radius: 999px;
+    background-clip: content-box;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer utilities {
+  .inspector-scrollbar {
+    scrollbar-color: color-mix(in srgb, var(--muted-foreground) 32%, transparent) transparent;
+    scrollbar-width: thin;
+  }
+
+  .inspector-scrollbar::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+  }
+
+  .inspector-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .inspector-scrollbar::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--muted-foreground) 26%, transparent);
+    border: 2px solid transparent;
+    border-radius: 999px;
+    background-clip: content-box;
+  }
+
+  .inspector-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--muted-foreground) 42%, transparent);
+    background-clip: content-box;
+  }
+}