@codrstudio/openclaude-chat 0.1.0

package/src/parts/PartRenderer.tsx

@@ -0,0 +1,145 @@
+import { memo, useState } from "react";
+import { Paperclip, ChevronDown } from "lucide-react";
+import { Markdown } from "../components/Markdown.js";
+import { LazyRender } from "../components/LazyRender.js";
+import { ReasoningBlock } from "./ReasoningBlock.js";
+import { ToolActivity } from "./ToolActivity.js";
+import { ToolResult } from "./ToolResult.js";
+import { resolveDisplayRenderer } from "../display/registry.js";
+import type { DisplayRendererMap } from "../display/registry.js";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "../ui/collapsible.js";
+import { cn } from "../lib/utils.js";
+import type { MessagePart, TextPart, ReasoningPart, ToolInvocationPart } from "../types.js";
+
+const HEAVY_RENDERERS = new Set([
+  "chart", "map", "table",
+  "spreadsheet", "gallery", "image",
+]);
+
+export interface PartRendererProps {
+  part: MessagePart;
+  isStreaming?: boolean;
+  displayRenderers?: DisplayRendererMap;
+}
+
+// ─── Attachment sub-components ────────────────────────────────────────────────
+
+function AttachmentTextBlock({ filename, content }: { filename: string; content: string }) {
+  const [open, setOpen] = useState(false);
+  const lines = content.split("\n");
+  const preview = lines.slice(0, 3).join("\n") + (lines.length > 3 && !open ? "\n…" : "");
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} className="rounded-lg border text-xs overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 bg-muted/50 border-b">
+        <Paperclip className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <span className="flex-1 truncate font-medium">{filename}</span>
+        <CollapsibleTrigger asChild>
+          <button type="button" className="text-muted-foreground hover:text-foreground transition-colors" aria-label={open ? "Recolher" : "Expandir"}>
+            <ChevronDown className={cn("h-3.5 w-3.5 transition-transform", open && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+      </div>
+      <pre className="px-3 py-2 text-muted-foreground whitespace-pre-wrap break-words">{preview}</pre>
+      <CollapsibleContent>
+        <pre className="px-3 py-2 max-h-40 overflow-auto whitespace-pre-wrap break-words border-t">{content}</pre>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// ─── Main renderer ────────────────────────────────────────────────────────────
+
+export const PartRenderer = memo(function PartRenderer({ part, isStreaming, displayRenderers }: PartRendererProps) {
+  switch (part.type) {
+    case "text": {
+      const p = part as TextPart;
+      if (p.text.startsWith("[📎")) {
+        const firstNewline = p.text.indexOf("\n");
+        const header = firstNewline >= 0 ? p.text.slice(0, firstNewline) : p.text;
+        const body = firstNewline >= 0 ? p.text.slice(firstNewline + 1) : "";
+        const match = header.match(/^\[📎\s+(.+?)\]?$/);
+        const filename = match?.[1] ?? header;
+        return <AttachmentTextBlock filename={filename} content={body} />;
+      }
+      return <Markdown>{p.text}</Markdown>;
+    }
+
+    case "reasoning": {
+      const p = part as ReasoningPart;
+      return <ReasoningBlock content={p.reasoning} isStreaming={isStreaming} />;
+    }
+
+    case "tool-invocation": {
+      const { toolInvocation } = part as ToolInvocationPart;
+      // O openclaude-sdk entrega os display tools como meta-tools MCP com
+      // prefixo `mcp__display__display_*` (ex: mcp__display__display_highlight).
+      // O tipo especifico do widget vem no campo `action` do input/args
+      // (ex: {action: "metric", label: "...", value: "..."}).
+      //
+      // Alem disso aceitamos a forma "legada" direta `display_*` (compat).
+      const name = toolInvocation.toolName;
+      const isMcpDisplay = /^mcp__display__display_(highlight|collection|card|visual)$/.test(name);
+      const isLegacyDisplay = name.startsWith("display_");
+      const isDisplay = isMcpDisplay || isLegacyDisplay;
+
+      if (isDisplay) {
+        // IMPORTANTE: para display tools, o `args` (input) contem a definicao
+        // COMPLETA do widget. O `result` (tool_result) e apenas uma confirmacao
+        // minima (`{action: "metric"}`). Sempre preferimos args aqui.
+        const payload = toolInvocation.args as Record<string, unknown> | undefined;
+        // Para meta-tools MCP, a action vem no payload.
+        // Para display_* legado, a action e o sufixo do toolName.
+        const action = isMcpDisplay
+          ? (payload?.action as string | undefined)
+          : name.replace(/^display_/, "");
+        const Renderer = action ? resolveDisplayRenderer(action, displayRenderers) : null;
+        if (payload && Renderer && action) {
+          // Alguns campos complexos (ex: trend, data) podem chegar serializados
+          // como JSON string se o modelo nao souber passar objetos. Tentamos
+          // parsear string → objeto antes de spreadar no renderer.
+          const normalized: Record<string, unknown> = {};
+          for (const [k, v] of Object.entries(payload)) {
+            if (typeof v === "string" && (v.startsWith("{") || v.startsWith("["))) {
+              try {
+                normalized[k] = JSON.parse(v);
+              } catch {
+                normalized[k] = v;
+              }
+            } else {
+              normalized[k] = v;
+            }
+          }
+          // key by toolCallId so iframe-based renderers (DisplayReactRenderer)
+          // unmount/remount cleanly when a new tool_use block arrives.
+          const rendered = <Renderer key={toolInvocation.toolCallId} {...normalized} />;
+          // NOTE: LazyRender via IntersectionObserver nao funciona bem dentro
+          // do virtualized MessageList (itens ficam position:absolute e o
+          // observer nao dispara consistente). Renderizamos direto.
+          return rendered;
+        }
+      }
+
+      if (toolInvocation.state === "result") {
+        return (
+          <ToolResult
+            toolName={toolInvocation.toolName}
+            result={toolInvocation.result}
+            isError={toolInvocation.isError}
+          />
+        );
+      }
+
+      return (
+        <ToolActivity
+          toolName={toolInvocation.toolName}
+          state={toolInvocation.state}
+          args={toolInvocation.args}
+        />
+      );
+    }
+
+    default:
+      return null;
+  }
+});

package/src/parts/ReasoningBlock.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { Brain, ChevronDown, ChevronRight } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+
+export interface ReasoningBlockProps {
+  content: string;
+  isStreaming?: boolean;
+  className?: string;
+}
+
+export function ReasoningBlock({ content, isStreaming = false, className }: ReasoningBlockProps) {
+  const [expanded, setExpanded] = useState(isStreaming);
+
+  useEffect(() => {
+    if (isStreaming) {
+      setExpanded(true);
+    } else {
+      setExpanded(false);
+    }
+  }, [isStreaming]);
+
+  return (
+    <Collapsible open={expanded} onOpenChange={setExpanded} className={className}>
+      <div className="border border-border bg-muted/30 rounded-md text-sm overflow-hidden">
+        <CollapsibleTrigger className="flex items-center gap-2 px-3 py-2 w-full text-left font-medium text-muted-foreground hover:bg-muted/60 cursor-pointer">
+          <Brain className="h-3.5 w-3.5" aria-hidden="true" />
+          <span className="font-mono text-xs">reasoning</span>
+          {expanded
+            ? <ChevronDown className="h-3.5 w-3.5 ml-auto" aria-hidden="true" />
+            : <ChevronRight className="h-3.5 w-3.5 ml-auto" aria-hidden="true" />
+          }
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="max-h-96 overflow-y-auto px-3 py-3 text-muted-foreground whitespace-pre-wrap break-words border-t border-border text-xs">
+            {content}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}

package/src/parts/ToolActivity.tsx

@@ -0,0 +1,78 @@
+import { Check, Download, FileText, FilePlus, FolderSearch, Globe, Loader2, Pencil, Search, Terminal, Wrench, type LucideIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+
+export type ToolActivityState = "call" | "partial-call" | "result";
+
+export interface ToolActivityProps {
+  toolName: string;
+  state: ToolActivityState;
+  args?: Record<string, unknown>;
+  className?: string;
+  iconMap?: Partial<Record<string, LucideIcon>>;
+}
+
+export const defaultToolIconMap: Record<string, LucideIcon> = {
+  WebSearch: Globe,
+  Bash: Terminal,
+  Read: FileText,
+  Edit: Pencil,
+  Write: FilePlus,
+  Grep: Search,
+  Glob: FolderSearch,
+  WebFetch: Download,
+  ListDir: FolderSearch,
+};
+
+function formatToolName(name: string): string {
+  return name
+    .replace(/_/g, " ")
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function resolveIcon(toolName: string, iconMap: Record<string, LucideIcon | undefined>): LucideIcon {
+  return iconMap[toolName] ?? Wrench;
+}
+
+function formatArgs(toolName: string, args?: Record<string, unknown>): string | null {
+  if (!args) return null;
+  if (toolName === "Bash" && args.command) return String(args.command);
+  if (toolName === "Read" && args.path) return String(args.path);
+  if (toolName === "Edit" && args.file_path) return String(args.file_path);
+  if (toolName === "Write" && args.file_path) return String(args.file_path);
+  if (toolName === "Grep" && args.pattern) return String(args.pattern);
+  if (toolName === "Glob" && args.pattern) return String(args.pattern);
+  if (toolName === "WebSearch" && args.query) return String(args.query);
+  if (toolName === "ListDir" && args.path) return String(args.path);
+  return null;
+}
+
+export function ToolActivity({ toolName, state, args, className, iconMap }: ToolActivityProps) {
+  const mergedIconMap = iconMap ? { ...defaultToolIconMap, ...iconMap } : defaultToolIconMap;
+  const Icon = resolveIcon(toolName, mergedIconMap);
+  const isActive = state === "call" || state === "partial-call";
+  const displayName = formatToolName(toolName);
+  const argsPreview = formatArgs(toolName, args);
+
+  return (
+    <div className={cn(
+      "flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-sm",
+      className
+    )}>
+      <span className="text-muted-foreground shrink-0" aria-hidden="true">
+        <Icon size={14} />
+      </span>
+      <span className="font-medium font-mono text-foreground">{displayName}</span>
+      {argsPreview && (
+        <span className="truncate text-xs text-muted-foreground font-mono max-w-[300px]">{argsPreview}</span>
+      )}
+      <span className="ml-auto text-muted-foreground">
+        {isActive ? (
+          <Loader2 size={14} className="animate-spin" aria-label="Executando..." />
+        ) : (
+          <Check size={14} aria-label="Concluido" />
+        )}
+      </span>
+    </div>
+  );
+}

package/src/parts/ToolResult.tsx

@@ -0,0 +1,79 @@
+import { AlertCircle, CheckCircle, ChevronDown, ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { cn } from "../lib/utils.js";
+
+export interface ToolResultProps {
+  toolName: string;
+  result: unknown;
+  isError?: boolean;
+  className?: string;
+}
+
+function serializeResult(result: unknown): string {
+  try {
+    if (typeof result === "object" && result !== null && "value" in (result as Record<string, unknown>)) {
+      return String((result as Record<string, unknown>).value);
+    }
+    return JSON.stringify(result, null, 2);
+  } catch {
+    return String(result);
+  }
+}
+
+function extractPreview(result: unknown): string | null {
+  if (typeof result === "string") return result.length > 120 ? result.slice(0, 120) + "..." : result;
+  if (typeof result === "object" && result !== null) {
+    const r = result as Record<string, unknown>;
+    if (typeof r.value === "string") {
+      const v = r.value as string;
+      return v.length > 120 ? v.slice(0, 120) + "..." : v;
+    }
+  }
+  return null;
+}
+
+export function ToolResult({ toolName, result, isError = false, className }: ToolResultProps) {
+  const [expanded, setExpanded] = useState(false);
+  const serialized = serializeResult(result);
+  const preview = extractPreview(result);
+
+  return (
+    <Collapsible open={expanded} onOpenChange={setExpanded} className={className}>
+      <div className={cn(
+        "rounded-md border text-sm overflow-hidden",
+        isError
+          ? "border-destructive/40 bg-destructive/5"
+          : "border-border bg-muted/40"
+      )}>
+        <CollapsibleTrigger
+          className={cn(
+            "flex items-center gap-2 w-full px-3 py-2 text-left font-medium hover:bg-muted/60 cursor-pointer",
+          )}
+          aria-expanded={expanded}
+        >
+          {isError ? (
+            <AlertCircle className="h-3.5 w-3.5 shrink-0 text-destructive" aria-hidden="true" />
+          ) : (
+            <CheckCircle className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+          )}
+          <span className={cn("font-mono text-xs", isError ? "text-destructive" : "text-foreground")}>
+            {isError ? `${toolName} erro` : `${toolName} ok`}
+          </span>
+          {!expanded && preview && (
+            <span className="truncate text-xs text-muted-foreground font-mono max-w-[400px] ml-1">{preview}</span>
+          )}
+          {expanded
+            ? <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground ml-auto" aria-hidden="true" />
+            : <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground ml-auto" aria-hidden="true" />
+          }
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <pre className="max-h-80 overflow-y-auto p-3 font-mono text-xs whitespace-pre-wrap break-all bg-muted/30 border-t border-border">
+            {serialized}
+          </pre>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}

package/src/styles.css

@@ -0,0 +1,2 @@
+@import "tailwindcss/utilities" layer(utilities);
+@source "./**/*.tsx";

package/src/types.ts

@@ -0,0 +1,41 @@
+// Tipos locais usados pelo @codrstudio/openclaude-chat.
+// Nao depende de @ai-sdk/react. Modelo inspirado nos "parts" do ai-sdk,
+// mas alimentado a partir de SDKMessage do @codrstudio/openclaude-sdk.
+
+export type TextPart = { type: "text"; text: string };
+
+export type ReasoningPart = { type: "reasoning"; reasoning: string };
+
+export type ToolInvocationState = "call" | "partial-call" | "result";
+
+export type ToolInvocationPart = {
+  type: "tool-invocation";
+  toolInvocation: {
+    toolName: string;
+    toolCallId: string;
+    state: ToolInvocationState;
+    args?: Record<string, unknown>;
+    result?: unknown;
+    isError?: boolean;
+  };
+};
+
+export type ImageAttachmentPart = { type: "image"; _ref?: string; mimeType?: string };
+export type FileAttachmentPart = { type: "file"; _ref?: string; mimeType?: string };
+
+export type MessagePart =
+  | TextPart
+  | ReasoningPart
+  | ToolInvocationPart
+  | ImageAttachmentPart
+  | FileAttachmentPart
+  | { type: string };
+
+export type MessageRole = "user" | "assistant";
+
+export interface Message {
+  id: string;
+  role: MessageRole;
+  content: string;
+  parts: MessagePart[];
+}

package/src/ui/alert.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };
+export type { VariantProps };
+export { alertVariants };

package/src/ui/badge.tsx

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/ui/button.tsx

@@ -0,0 +1,54 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/ui/card.tsx

@@ -0,0 +1,68 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "rounded-xl border bg-card text-card-foreground shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("p-6 pt-0", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  )
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/ui/collapsible.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+export {
+  Root as Collapsible,
+  Trigger as CollapsibleTrigger,
+  Content as CollapsibleContent,
+} from "@radix-ui/react-collapsible";