@codrstudio/openclaude-chat 0.1.0 → 0.1.9

package/src/display/CodeBlockRenderer.tsx

@@ -1,49 +1,49 @@
-import type { DisplayCode } from "./sdk-types.js";
-import { Check, Copy } from "lucide-react";
-import { useState } from "react";
-import { Button } from "../ui/button.js";
-import { cn } from "../lib/utils.js";
-
-export function CodeBlockRenderer({ language, code, title, lineNumbers }: DisplayCode) {
-  const [copied, setCopied] = useState(false);
-
-  async function handleCopy() {
-    await navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }
-
-  const displayLines = lineNumbers
-    ? code.split("\n").map((line, i) => (
-        <span key={i} className="flex gap-4">
-          <span className="select-none text-muted-foreground w-6 text-right shrink-0">{i + 1}</span>
-          <span>{line}</span>
-        </span>
-      ))
-    : code;
-
-  return (
-    <div className={cn("rounded-md border border-border bg-muted/30 overflow-hidden")}>
-      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border">
-        <span className="text-xs text-muted-foreground font-mono">{title ?? language}</span>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={handleCopy}
-          aria-label={copied ? "Copiado!" : "Copiar código"}
-          className="h-7 gap-1.5"
-        >
-          {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
-          <span className="text-xs">{copied ? "Copiado!" : "Copiar"}</span>
-        </Button>
-      </div>
-      <pre className="p-4 overflow-x-auto font-mono text-sm">
-        {lineNumbers ? (
-          <code>{displayLines}</code>
-        ) : (
-          <code>{code}</code>
-        )}
-      </pre>
-    </div>
-  );
-}
+import type { DisplayCode } from "./sdk-types.js";
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../ui/button.js";
+import { cn } from "../lib/utils.js";
+
+export function CodeBlockRenderer({ language, code, title, lineNumbers }: DisplayCode) {
+  const [copied, setCopied] = useState(false);
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  const displayLines = lineNumbers
+    ? code.split("\n").map((line, i) => (
+        <span key={i} className="flex gap-4">
+          <span className="select-none text-muted-foreground w-6 text-right shrink-0">{i + 1}</span>
+          <span>{line}</span>
+        </span>
+      ))
+    : code;
+
+  return (
+    <div className={cn("rounded-md border border-border bg-muted/30 overflow-hidden")}>
+      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border">
+        <span className="text-xs text-muted-foreground font-mono">{title ?? language}</span>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleCopy}
+          aria-label={copied ? "Copiado!" : "Copiar código"}
+          className="h-7 gap-1.5"
+        >
+          {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+          <span className="text-xs">{copied ? "Copiado!" : "Copiar"}</span>
+        </Button>
+      </div>
+      <pre className="p-4 overflow-x-auto font-mono text-sm">
+        {lineNumbers ? (
+          <code>{displayLines}</code>
+        ) : (
+          <code>{code}</code>
+        )}
+      </pre>
+    </div>
+  );
+}

package/src/display/ComparisonTableRenderer.tsx

@@ -1,132 +1,132 @@
-import { useState } from "react";
-import type { DisplayComparison } from "./sdk-types.js";
-import { CheckCircle } from "lucide-react";
-import { ScrollArea, ScrollBar } from "../ui/scroll-area.js";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../ui/table.js";
-import { cn } from "../lib/utils.js";
-
-function formatMoney(value: number, currency = "BRL") {
-  return new Intl.NumberFormat("pt-BR", { style: "currency", currency }).format(value);
-}
-
-export function ComparisonTableRenderer({ title, items, attributes }: DisplayComparison) {
-  const [bestIdx, setBestIdx] = useState<number | null>(null);
-
-  // Auto-detect best value by lowest price if no manual selection
-  const lowestPriceIdx = items.reduce<number | null>((acc, item, i) => {
-    if (!item.price) return acc;
-    if (acc === null) return i;
-    const best = items[acc]?.price;
-    return best && item.price.value < best.value ? i : acc;
-  }, null);
-
-  const highlightIdx = bestIdx ?? lowestPriceIdx;
-
-  return (
-    <div className="space-y-2">
-      {title && <h3 className="text-sm font-semibold text-foreground">{title}</h3>}
-
-      <ScrollArea className="w-full">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="font-semibold text-center">Atributo</TableHead>
-              {items.map((item, i) => (
-                <TableHead
-                  key={i}
-                  className={cn(
-                    "font-semibold text-center",
-                    i === highlightIdx && "bg-muted"
-                  )}
-                >
-                  <button
-                    className="flex flex-col items-center gap-0.5 w-full cursor-pointer hover:opacity-80"
-                    onClick={() => setBestIdx(i === bestIdx ? null : i)}
-                    title="Marcar como melhor"
-                  >
-                    {i === highlightIdx && (
-                      <CheckCircle className="h-3.5 w-3.5 text-primary" />
-                    )}
-                    <span className="font-semibold">{item.title}</span>
-                    {item.price && (
-                      <span className="text-xs text-muted-foreground font-normal">
-                        {formatMoney(item.price.value, item.price.currency)}
-                      </span>
-                    )}
-                  </button>
-                </TableHead>
-              ))}
-            </TableRow>
-          </TableHeader>
-
-          <TableBody>
-            {attributes && attributes.length > 0 ? (
-              attributes.map((attr, ri) => (
-                <TableRow key={ri}>
-                  <TableCell className="font-medium">{attr.label}</TableCell>
-                  {items.map((item, ci) => {
-                    const val = (item as Record<string, unknown>)[attr.key];
-                    return (
-                      <TableCell
-                        key={ci}
-                        className={cn(
-                          "text-center",
-                          ci === highlightIdx && "bg-muted/50"
-                        )}
-                      >
-                        {val === true ? "✓" : val === false ? "✗" : val != null ? String(val) : "—"}
-                      </TableCell>
-                    );
-                  })}
-                </TableRow>
-              ))
-            ) : (
-              <>
-                {items.some((i) => i.rating) && (
-                  <TableRow>
-                    <TableCell className="font-medium">Avaliação</TableCell>
-                    {items.map((item, ci) => (
-                      <TableCell
-                        key={ci}
-                        className={cn(
-                          "text-center",
-                          ci === highlightIdx && "bg-muted/50"
-                        )}
-                      >
-                        {item.rating ? `${item.rating.score}/5 (${item.rating.count})` : "—"}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                )}
-                {items.some((i) => i.description) && (
-                  <TableRow>
-                    <TableCell className="font-medium">Descrição</TableCell>
-                    {items.map((item, ci) => (
-                      <TableCell
-                        key={ci}
-                        className={cn(
-                          "text-center",
-                          ci === highlightIdx && "bg-muted/50"
-                        )}
-                      >
-                        {item.description ?? "—"}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                )}
-              </>
-            )}
-          </TableBody>
-        </Table>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-    </div>
-  );
-}
+import { useState } from "react";
+import type { DisplayComparison } from "./sdk-types.js";
+import { CheckCircle } from "lucide-react";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area.js";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table.js";
+import { cn } from "../lib/utils.js";
+
+function formatMoney(value: number, currency = "BRL") {
+  return new Intl.NumberFormat("pt-BR", { style: "currency", currency }).format(value);
+}
+
+export function ComparisonTableRenderer({ title, items, attributes }: DisplayComparison) {
+  const [bestIdx, setBestIdx] = useState<number | null>(null);
+
+  // Auto-detect best value by lowest price if no manual selection
+  const lowestPriceIdx = items.reduce<number | null>((acc, item, i) => {
+    if (!item.price) return acc;
+    if (acc === null) return i;
+    const best = items[acc]?.price;
+    return best && item.price.value < best.value ? i : acc;
+  }, null);
+
+  const highlightIdx = bestIdx ?? lowestPriceIdx;
+
+  return (
+    <div className="space-y-2">
+      {title && <h3 className="text-sm font-semibold text-foreground">{title}</h3>}
+
+      <ScrollArea className="w-full">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="font-semibold text-center">Atributo</TableHead>
+              {items.map((item, i) => (
+                <TableHead
+                  key={i}
+                  className={cn(
+                    "font-semibold text-center",
+                    i === highlightIdx && "bg-muted"
+                  )}
+                >
+                  <button
+                    className="flex flex-col items-center gap-0.5 w-full cursor-pointer hover:opacity-80"
+                    onClick={() => setBestIdx(i === bestIdx ? null : i)}
+                    title="Marcar como melhor"
+                  >
+                    {i === highlightIdx && (
+                      <CheckCircle className="h-3.5 w-3.5 text-primary" />
+                    )}
+                    <span className="font-semibold">{item.title}</span>
+                    {item.price && (
+                      <span className="text-xs text-muted-foreground font-normal">
+                        {formatMoney(item.price.value, item.price.currency)}
+                      </span>
+                    )}
+                  </button>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {attributes && attributes.length > 0 ? (
+              attributes.map((attr, ri) => (
+                <TableRow key={ri}>
+                  <TableCell className="font-medium">{attr.label}</TableCell>
+                  {items.map((item, ci) => {
+                    const val = (item as Record<string, unknown>)[attr.key];
+                    return (
+                      <TableCell
+                        key={ci}
+                        className={cn(
+                          "text-center",
+                          ci === highlightIdx && "bg-muted/50"
+                        )}
+                      >
+                        {val === true ? "✓" : val === false ? "✗" : val != null ? String(val) : "—"}
+                      </TableCell>
+                    );
+                  })}
+                </TableRow>
+              ))
+            ) : (
+              <>
+                {items.some((i) => i.rating) && (
+                  <TableRow>
+                    <TableCell className="font-medium">Avaliação</TableCell>
+                    {items.map((item, ci) => (
+                      <TableCell
+                        key={ci}
+                        className={cn(
+                          "text-center",
+                          ci === highlightIdx && "bg-muted/50"
+                        )}
+                      >
+                        {item.rating ? `${item.rating.score}/5 (${item.rating.count})` : "—"}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                )}
+                {items.some((i) => i.description) && (
+                  <TableRow>
+                    <TableCell className="font-medium">Descrição</TableCell>
+                    {items.map((item, ci) => (
+                      <TableCell
+                        key={ci}
+                        className={cn(
+                          "text-center",
+                          ci === highlightIdx && "bg-muted/50"
+                        )}
+                      >
+                        {item.description ?? "—"}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                )}
+              </>
+            )}
+          </TableBody>
+        </Table>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  );
+}

package/src/display/DataTableRenderer.tsx

@@ -1,144 +1,144 @@
-import { useState } from "react";
-import type { DisplayTable } from "./sdk-types.js";
-import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
-import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "../ui/table.js";
-import { ScrollArea, ScrollBar } from "../ui/scroll-area.js";
-import { Button } from "../ui/button.js";
-import { Badge } from "../ui/badge.js";
-
-type SortDir = "asc" | "desc";
-
-function formatMoney(value: number, currency = "BRL") {
-  return new Intl.NumberFormat("pt-BR", { style: "currency", currency }).format(value);
-}
-
-function renderCellValue(value: unknown, type: string): React.ReactNode {
-  if (value == null) return "—";
-  switch (type) {
-    case "money":
-      return typeof value === "number"
-        ? formatMoney(value)
-        : typeof value === "object" && value !== null && "value" in value
-        ? formatMoney((value as { value: number; currency?: string }).value, (value as { currency?: string }).currency)
-        : String(value);
-    case "image":
-      return typeof value === "string" ? (
-        <img src={value} alt="" className="rounded-sm max-h-12 object-cover" loading="lazy" decoding="async" />
-      ) : null;
-    case "link":
-      return typeof value === "string" ? (
-        <a href={value} target="_blank" rel="noopener noreferrer" className="text-primary underline underline-offset-2 hover:opacity-80">
-          {value}
-        </a>
-      ) : null;
-    case "badge":
-      return <Badge variant="secondary">{String(value)}</Badge>;
-    default:
-      return String(value);
-  }
-}
-
-function compareValues(a: unknown, b: unknown, type: string): number {
-  if (a == null && b == null) return 0;
-  if (a == null) return 1;
-  if (b == null) return -1;
-
-  if (type === "money") {
-    const av = typeof a === "number" ? a : typeof a === "object" && a !== null && "value" in a ? (a as { value: number }).value : 0;
-    const bv = typeof b === "number" ? b : typeof b === "object" && b !== null && "value" in b ? (b as { value: number }).value : 0;
-    return av - bv;
-  }
-  if (type === "number") {
-    return (Number(a) || 0) - (Number(b) || 0);
-  }
-  return String(a).localeCompare(String(b), "pt-BR");
-}
-
-export function DataTableRenderer({ title, columns, rows, sortable }: DisplayTable) {
-  const [sortKey, setSortKey] = useState<string | null>(null);
-  const [sortDir, setSortDir] = useState<SortDir>("asc");
-
-  function handleSort(key: string) {
-    if (!sortable) return;
-    if (sortKey === key) {
-      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
-    } else {
-      setSortKey(key);
-      setSortDir("asc");
-    }
-  }
-
-  const sortedRows = sortKey
-    ? [...rows].sort((a, b) => {
-        const col = columns.find((c) => c.key === sortKey);
-        const dir = sortDir === "asc" ? 1 : -1;
-        return compareValues(a[sortKey], b[sortKey], col?.type ?? "text") * dir;
-      })
-    : rows;
-
-  return (
-    <div className="space-y-2">
-      {title && <h3 className="text-sm font-semibold text-foreground">{title}</h3>}
-
-      <ScrollArea className="w-full">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              {columns.map((col) => (
-                <TableHead
-                  key={col.key}
-                  className={col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left"}
-                >
-                  {sortable ? (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="-ml-3 h-8 font-semibold"
-                      onClick={() => handleSort(col.key)}
-                      aria-sort={
-                        sortKey === col.key
-                          ? sortDir === "asc"
-                            ? "ascending"
-                            : "descending"
-                          : undefined
-                      }
-                    >
-                      {col.label}
-                      {sortKey === col.key ? (
-                        sortDir === "asc" ? (
-                          <ArrowUp className="ml-1 h-3 w-3" />
-                        ) : (
-                          <ArrowDown className="ml-1 h-3 w-3" />
-                        )
-                      ) : (
-                        <ArrowUpDown className="ml-1 h-3 w-3" />
-                      )}
-                    </Button>
-                  ) : (
-                    col.label
-                  )}
-                </TableHead>
-              ))}
-            </TableRow>
-          </TableHeader>
-
-          <TableBody>
-            {sortedRows.map((row, ri) => (
-              <TableRow key={ri}>
-                {columns.map((col) => (
-                  <TableCell
-                    key={col.key}
-                    className={col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left"}
-                  >
-                    {renderCellValue(row[col.key], col.type)}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-    </div>
-  );
-}
+import { useState } from "react";
+import type { DisplayTable } from "./sdk-types.js";
+import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "../ui/table.js";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area.js";
+import { Button } from "../ui/button.js";
+import { Badge } from "../ui/badge.js";
+
+type SortDir = "asc" | "desc";
+
+function formatMoney(value: number, currency = "BRL") {
+  return new Intl.NumberFormat("pt-BR", { style: "currency", currency }).format(value);
+}
+
+function renderCellValue(value: unknown, type: string): React.ReactNode {
+  if (value == null) return "—";
+  switch (type) {
+    case "money":
+      return typeof value === "number"
+        ? formatMoney(value)
+        : typeof value === "object" && value !== null && "value" in value
+        ? formatMoney((value as { value: number; currency?: string }).value, (value as { currency?: string }).currency)
+        : String(value);
+    case "image":
+      return typeof value === "string" ? (
+        <img src={value} alt="" className="rounded-sm max-h-12 object-cover" loading="lazy" decoding="async" />
+      ) : null;
+    case "link":
+      return typeof value === "string" ? (
+        <a href={value} target="_blank" rel="noopener noreferrer" className="text-primary underline underline-offset-2 hover:opacity-80">
+          {value}
+        </a>
+      ) : null;
+    case "badge":
+      return <Badge variant="secondary">{String(value)}</Badge>;
+    default:
+      return String(value);
+  }
+}
+
+function compareValues(a: unknown, b: unknown, type: string): number {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+
+  if (type === "money") {
+    const av = typeof a === "number" ? a : typeof a === "object" && a !== null && "value" in a ? (a as { value: number }).value : 0;
+    const bv = typeof b === "number" ? b : typeof b === "object" && b !== null && "value" in b ? (b as { value: number }).value : 0;
+    return av - bv;
+  }
+  if (type === "number") {
+    return (Number(a) || 0) - (Number(b) || 0);
+  }
+  return String(a).localeCompare(String(b), "pt-BR");
+}
+
+export function DataTableRenderer({ title, columns, rows, sortable }: DisplayTable) {
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<SortDir>("asc");
+
+  function handleSort(key: string) {
+    if (!sortable) return;
+    if (sortKey === key) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  }
+
+  const sortedRows = sortKey
+    ? [...rows].sort((a, b) => {
+        const col = columns.find((c) => c.key === sortKey);
+        const dir = sortDir === "asc" ? 1 : -1;
+        return compareValues(a[sortKey], b[sortKey], col?.type ?? "text") * dir;
+      })
+    : rows;
+
+  return (
+    <div className="space-y-2">
+      {title && <h3 className="text-sm font-semibold text-foreground">{title}</h3>}
+
+      <ScrollArea className="w-full">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((col) => (
+                <TableHead
+                  key={col.key}
+                  className={col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left"}
+                >
+                  {sortable ? (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="-ml-3 h-8 font-semibold"
+                      onClick={() => handleSort(col.key)}
+                      aria-sort={
+                        sortKey === col.key
+                          ? sortDir === "asc"
+                            ? "ascending"
+                            : "descending"
+                          : undefined
+                      }
+                    >
+                      {col.label}
+                      {sortKey === col.key ? (
+                        sortDir === "asc" ? (
+                          <ArrowUp className="ml-1 h-3 w-3" />
+                        ) : (
+                          <ArrowDown className="ml-1 h-3 w-3" />
+                        )
+                      ) : (
+                        <ArrowUpDown className="ml-1 h-3 w-3" />
+                      )}
+                    </Button>
+                  ) : (
+                    col.label
+                  )}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {sortedRows.map((row, ri) => (
+              <TableRow key={ri}>
+                {columns.map((col) => (
+                  <TableCell
+                    key={col.key}
+                    className={col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left"}
+                  >
+                    {renderCellValue(row[col.key], col.type)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  );
+}