@codrstudio/openclaude-chat 0.1.0 → 0.2.0

package/src/parts/ToolActivity.tsx

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

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

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

package/src/types.ts

@@ -1,41 +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[];
-}
+// 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

@@ -1,77 +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 };
+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

@@ -1,36 +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 }
+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 }