cc-inspector 0.1.0

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

@@ -0,0 +1,195 @@
+import { AlertTriangle, StopCircle, Zap } from "lucide-react";
+import type { JSX } from "react";
+import ReactMarkdown from "react-markdown";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { type ClaudeResponse, ClaudeResponseSchema } from "../../proxy/schemas";
+import { ResponseContentBlockRenderer } from "./content-blocks";
+
+export type ResponseViewProps = {
+  responseText: string | null;
+  responseStatus: number | null;
+  streaming: boolean;
+  inputTokens: number | null;
+  outputTokens: number | null;
+};
+
+type StatusCategory = "success" | "client_error" | "server_error" | "pending";
+
+function getStatusCategory(status: number | null): StatusCategory {
+  if (status === null) return "pending";
+  if (status >= 200 && status < 300) return "success";
+  if (status >= 400 && status < 500) return "client_error";
+  return "server_error";
+}
+
+function getStatusClasses(category: StatusCategory): string {
+  switch (category) {
+    case "success":
+      return "text-emerald-400";
+    case "client_error":
+      return "text-amber-400";
+    case "server_error":
+      return "text-red-400";
+    case "pending":
+      return "text-muted-foreground";
+  }
+}
+
+function parseResponse(text: string): ClaudeResponse | null {
+  try {
+    const json: unknown = JSON.parse(text);
+    const result = ClaudeResponseSchema.safeParse(json);
+    if (result.success) return result.data;
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function formatTokens(count: number): string {
+  if (count < 1000) return count.toString();
+  return count.toLocaleString();
+}
+
+function StatusIndicator({ status }: { status: number | null }): JSX.Element {
+  const category = getStatusCategory(status);
+  const classes = getStatusClasses(category);
+
+  if (status === null) {
+    return <span className="text-xs text-muted-foreground italic">pending</span>;
+  }
+
+  return (
+    <span className={cn("flex items-center gap-1 text-xs font-mono font-semibold", classes)}>
+      {category === "server_error" && <AlertTriangle className="size-3" />}
+      {status}
+    </span>
+  );
+}
+
+function StructuredResponseView({ response }: { response: ClaudeResponse }): JSX.Element {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 flex-wrap">
+        <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-mono">
+          {response.model}
+        </Badge>
+
+        {response.stop_reason !== null && (
+          <Badge
+            variant="outline"
+            className="text-[10px] px-1.5 py-0 h-5 font-mono flex items-center gap-1"
+          >
+            <StopCircle className="size-2.5" />
+            {response.stop_reason}
+          </Badge>
+        )}
+
+        <span className="flex items-center gap-1 text-muted-foreground text-xs">
+          <Zap className="size-3" />
+          <span className="font-mono tabular-nums">
+            {formatTokens(response.usage.input_tokens)} in /{" "}
+            {formatTokens(response.usage.output_tokens)} out
+          </span>
+        </span>
+      </div>
+
+      <Separator className="opacity-50" />
+
+      <div className="space-y-2">
+        {response.content.map((block, i) => (
+          <ResponseContentBlockRenderer key={i} block={block} />
+        ))}
+        {response.content.length === 0 && (
+          <p className="text-xs text-muted-foreground italic">Empty response content</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ErrorResponseView({ text }: { text: string }): JSX.Element {
+  return (
+    <div className="rounded-md border border-red-500/30 bg-red-500/5 p-3">
+      <pre className="text-xs text-red-300 whitespace-pre-wrap font-mono leading-relaxed overflow-auto max-h-[60vh]">
+        {text}
+      </pre>
+    </div>
+  );
+}
+
+function MarkdownFallbackView({ text }: { text: string }): JSX.Element {
+  return (
+    <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
+      <ReactMarkdown>{text}</ReactMarkdown>
+    </div>
+  );
+}
+
+export function ResponseView({
+  responseText,
+  responseStatus,
+  streaming,
+  inputTokens,
+  outputTokens,
+}: ResponseViewProps): JSX.Element {
+  if (responseText === null) {
+    return (
+      <div className="flex items-center gap-2 py-3">
+        <StatusIndicator status={responseStatus} />
+        <span className="text-xs text-muted-foreground italic">No response</span>
+      </div>
+    );
+  }
+
+  const isError = responseStatus !== null && responseStatus >= 400;
+
+  if (isError) {
+    return (
+      <div className="space-y-2">
+        <StatusIndicator status={responseStatus} />
+        <ErrorResponseView text={responseText} />
+      </div>
+    );
+  }
+
+  if (streaming) {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <StatusIndicator status={responseStatus} />
+          {(inputTokens !== null || outputTokens !== null) && (
+            <span className="flex items-center gap-1 text-muted-foreground text-xs">
+              <Zap className="size-3" />
+              <span className="font-mono tabular-nums">
+                {inputTokens !== null ? formatTokens(inputTokens) : "—"} in /{" "}
+                {outputTokens !== null ? formatTokens(outputTokens) : "—"} out
+              </span>
+            </span>
+          )}
+        </div>
+        <MarkdownFallbackView text={responseText} />
+      </div>
+    );
+  }
+
+  const parsed = parseResponse(responseText);
+
+  if (parsed !== null) {
+    return (
+      <div className="space-y-2">
+        <StatusIndicator status={responseStatus} />
+        <StructuredResponseView response={parsed} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <StatusIndicator status={responseStatus} />
+      <MarkdownFallbackView text={responseText} />
+    </div>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { ChevronDown, ChevronRight, FileText } from "lucide-react";
+import { type JSX, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { Badge } from "@/components/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import type { SystemBlockType } from "../../proxy/schemas";
+
+function formatCharCount(count: number): string {
+  if (count < 1000) return `${count} chars`;
+  return `${(count / 1000).toFixed(1)}k chars`;
+}
+
+export type SystemPromptProps = {
+  blocks: SystemBlockType[];
+};
+
+export function SystemPrompt({ blocks }: SystemPromptProps): JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  const totalChars = blocks.reduce((sum, block) => sum + block.text.length, 0);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="border-l-2 border-yellow-500/40 pl-3">
+        <CollapsibleTrigger className="flex items-center gap-1.5 py-1 w-full text-left cursor-pointer hover:bg-yellow-500/5 transition-colors rounded-r-sm group">
+          <FileText className="size-3.5 text-yellow-400 shrink-0" />
+          <span className="text-xs font-medium text-yellow-400">System</span>
+          <Badge
+            variant="ghost"
+            className="text-[10px] text-muted-foreground px-1.5 py-0 h-4 font-mono"
+          >
+            {blocks.length} {blocks.length === 1 ? "block" : "blocks"} &middot;{" "}
+            {formatCharCount(totalChars)}
+          </Badge>
+          <span className="flex-1" />
+          {open ? (
+            <ChevronDown className="size-3 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="size-3 text-muted-foreground" />
+          )}
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className={cn("max-h-[60vh] overflow-auto", "pb-2 space-y-3")}>
+            {blocks.map((block, i) => (
+              <div key={i} className="relative">
+                {block.cache_control !== undefined && (
+                  <Badge
+                    variant="outline"
+                    className="text-[9px] px-1 py-0 h-3.5 font-mono absolute top-0 right-0"
+                  >
+                    cached
+                  </Badge>
+                )}
+                <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
+                  <ReactMarkdown>{block.text}</ReactMarkdown>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}

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

@@ -0,0 +1,82 @@
+import { ChevronDown, ChevronRight, Wrench } from "lucide-react";
+import { type JSX, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { Badge } from "@/components/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { JsonViewer, safeJsonValue } from "@/components/ui/json-viewer";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { ToolDefinitionType } from "../../proxy/schemas";
+
+function truncateDescription(description: string, max: number): string {
+  if (description.length <= max) return description;
+  return `${description.slice(0, max)}…`;
+}
+
+function ToolItem({ tool }: { tool: ToolDefinitionType }): JSX.Element {
+  return (
+    <Collapsible>
+      <CollapsibleTrigger className="flex items-center gap-2 px-3 py-1 w-full text-left cursor-pointer hover:bg-cyan-500/5 transition-colors rounded-sm group">
+        <Badge variant="outline" className="text-[10px] font-mono px-1.5 py-0 h-4 shrink-0">
+          {tool.name}
+        </Badge>
+        {tool.description !== undefined && (
+          <span className="text-muted-foreground text-xs truncate">
+            {truncateDescription(tool.description, 60)}
+          </span>
+        )}
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="px-3 pb-2 pt-1 space-y-2">
+          {tool.description !== undefined && (
+            <div className="prose prose-sm dark:prose-invert max-w-none [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
+              <ReactMarkdown>{tool.description}</ReactMarkdown>
+            </div>
+          )}
+          {tool.input_schema !== undefined && (
+            <ScrollArea className="max-h-[40vh]">
+              <JsonViewer data={safeJsonValue(tool.input_schema)} defaultExpandDepth={1} />
+            </ScrollArea>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export type ToolDefinitionsProps = {
+  tools: ToolDefinitionType[];
+};
+
+export function ToolDefinitions({ tools }: ToolDefinitionsProps): JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="border-l-2 border-cyan-500/40 pl-3">
+        <CollapsibleTrigger className="flex items-center gap-1.5 py-1 w-full text-left cursor-pointer hover:bg-cyan-500/5 transition-colors rounded-r-sm group">
+          <Wrench className="size-3.5 text-cyan-400 shrink-0" />
+          <span className="text-xs font-medium text-cyan-400">Tools</span>
+          <Badge
+            variant="ghost"
+            className="text-[10px] text-muted-foreground px-1.5 py-0 h-4 font-mono"
+          >
+            {tools.length}
+          </Badge>
+          <span className="flex-1" />
+          {open ? (
+            <ChevronDown className="size-3 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="size-3 text-muted-foreground" />
+          )}
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="space-y-1 pt-1">
+            {tools.map((tool) => (
+              <ToolItem key={tool.name} tool={tool} />
+            ))}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}

package/src/components/proxy-viewer/content-blocks.tsx

@@ -0,0 +1,288 @@
+import {
+  AlertCircle,
+  Brain,
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  ImageIcon,
+  Terminal,
+} from "lucide-react";
+import { type JSX, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { Badge } from "@/components/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { JsonViewer, safeJsonValue } from "@/components/ui/json-viewer";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import type { ContentBlockType, ResponseContentBlockType } from "../../proxy/schemas";
+
+function assertNever(_value: never): JSX.Element {
+  return <></>;
+}
+
+function SystemReminderBlock({ text }: { text: string }): JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="flex items-center gap-1.5 py-0.5 cursor-pointer hover:opacity-80 transition-opacity group">
+        {open ? (
+          <ChevronDown className="size-3 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="size-3 text-muted-foreground" />
+        )}
+        <span className="text-muted-foreground text-xs italic select-none opacity-60">
+          [system-reminder]
+        </span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="pl-4 pt-1">
+          <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
+            <ReactMarkdown>{text}</ReactMarkdown>
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export function TextBlock({ text }: { text: string }): JSX.Element {
+  if (text.includes("<system-reminder>")) {
+    return <SystemReminderBlock text={text} />;
+  }
+
+  return (
+    <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
+      <ReactMarkdown>{text}</ReactMarkdown>
+    </div>
+  );
+}
+
+export function ThinkingBlock({ thinking }: { thinking: string }): JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="border-l-2 border-purple-500/40 my-1">
+        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-purple-500/5 transition-colors rounded-r-sm group">
+          <Brain className="size-3.5 text-purple-400 shrink-0" />
+          <span className="text-xs font-medium text-purple-400">Thinking</span>
+          <Badge
+            variant="ghost"
+            className="text-[10px] text-muted-foreground px-1.5 py-0 h-4 font-mono"
+          >
+            {thinking.length.toLocaleString()} chars
+          </Badge>
+          <span className="flex-1" />
+          {open ? (
+            <ChevronDown className="size-3 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="size-3 text-muted-foreground" />
+          )}
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="px-3 pb-2">
+            <ScrollArea className="max-h-[60vh]">
+              <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono leading-relaxed">
+                {thinking}
+              </pre>
+            </ScrollArea>
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+export function ToolUseBlock({
+  name,
+  input,
+}: {
+  name: string;
+  input: Record<string, unknown>;
+}): JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="border-l-2 border-blue-500/40 my-1">
+        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-blue-500/5 transition-colors rounded-r-sm group">
+          <Terminal className="size-3.5 text-blue-400 shrink-0" />
+          <Badge variant="outline" className="text-[10px] font-mono px-1.5 py-0 h-4">
+            {name}
+          </Badge>
+          <span className="flex-1" />
+          {open ? (
+            <ChevronDown className="size-3 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="size-3 text-muted-foreground" />
+          )}
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="px-3 pb-2">
+            <ScrollArea className="max-h-[60vh]">
+              <JsonViewer data={safeJsonValue(input)} defaultExpandDepth={2} />
+            </ScrollArea>
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+function ToolResultInlineContent({
+  content,
+}: {
+  content:
+    | string
+    | ReadonlyArray<
+        | {
+            type: "text";
+            text: string;
+            cache_control?: { type: string; ttl: string; scope?: string };
+          }
+        | { type: "image"; source: { type: "base64"; media_type: string; data: string } }
+      >;
+}): JSX.Element {
+  if (typeof content === "string") {
+    return (
+      <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono leading-relaxed">
+        {content}
+      </pre>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      {content.map((item, i) => {
+        if (item.type === "text") {
+          return (
+            <pre
+              key={i}
+              className="text-xs text-muted-foreground whitespace-pre-wrap font-mono leading-relaxed"
+            >
+              {item.text}
+            </pre>
+          );
+        }
+        return <ImageBlock key={i} source={item.source} />;
+      })}
+    </div>
+  );
+}
+
+export function ToolResultBlock({
+  content,
+  isError,
+}: {
+  content:
+    | string
+    | ReadonlyArray<
+        | {
+            type: "text";
+            text: string;
+            cache_control?: { type: string; ttl: string; scope?: string };
+          }
+        | { type: "image"; source: { type: "base64"; media_type: string; data: string } }
+      >;
+  isError?: boolean;
+}): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const hasError = isError === true;
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div
+        className={cn("border-l-2 my-1", hasError ? "border-red-500/40" : "border-green-500/40")}
+      >
+        <CollapsibleTrigger
+          className={cn(
+            "flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer transition-colors rounded-r-sm group",
+            hasError ? "hover:bg-red-500/5" : "hover:bg-green-500/5",
+          )}
+        >
+          {hasError ? (
+            <AlertCircle className="size-3.5 text-red-400 shrink-0" />
+          ) : (
+            <CheckCircle2 className="size-3.5 text-green-400 shrink-0" />
+          )}
+          <span className={cn("text-xs font-medium", hasError ? "text-red-400" : "text-green-400")}>
+            {hasError ? "Error" : "Result"}
+          </span>
+          <span className="flex-1" />
+          {open ? (
+            <ChevronDown className="size-3 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="size-3 text-muted-foreground" />
+          )}
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="px-3 pb-2">
+            <ScrollArea className="max-h-[60vh]">
+              <ToolResultInlineContent content={content} />
+            </ScrollArea>
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+export function ImageBlock({
+  source,
+}: {
+  source: { type: "base64"; media_type: string; data: string };
+}): JSX.Element {
+  return (
+    <div className="my-1 inline-flex flex-col gap-1">
+      <div className="relative rounded-md border border-border overflow-hidden max-w-[400px]">
+        <img
+          src={`data:${source.media_type};base64,${source.data}`}
+          alt="Content image"
+          className="block max-w-full h-auto"
+        />
+      </div>
+      <Badge
+        variant="ghost"
+        className="text-[10px] text-muted-foreground px-1 py-0 h-4 font-mono w-fit"
+      >
+        <ImageIcon className="size-2.5" />
+        {source.media_type}
+      </Badge>
+    </div>
+  );
+}
+
+export function ContentBlockRenderer({ block }: { block: ContentBlockType }): JSX.Element {
+  switch (block.type) {
+    case "text":
+      return <TextBlock text={block.text} />;
+    case "thinking":
+      return <ThinkingBlock thinking={block.thinking} />;
+    case "tool_use":
+      return <ToolUseBlock name={block.name} input={block.input} />;
+    case "tool_result":
+      return <ToolResultBlock content={block.content} isError={block.is_error} />;
+    case "image":
+      return <ImageBlock source={block.source} />;
+    default:
+      return assertNever(block);
+  }
+}
+
+export function ResponseContentBlockRenderer({
+  block,
+}: {
+  block: ResponseContentBlockType;
+}): JSX.Element {
+  switch (block.type) {
+    case "text":
+      return <TextBlock text={block.text} />;
+    case "thinking":
+      return <ThinkingBlock thinking={block.thinking} />;
+    case "tool_use":
+      return <ToolUseBlock name={block.name} input={block.input} />;
+    default:
+      return assertNever(block);
+  }
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,47 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }): React.JSX.Element {
+  const Comp = asChild ? Slot.Root : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };