@codrstudio/openclaude-chat 0.1.0 → 0.2.0

package/src/display/SpreadsheetRenderer.tsx

@@ -1,86 +1,86 @@
-import type { DisplaySpreadsheet } from "./sdk-types.js";
-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 formatCell(
-  value: string | number | null,
-  colIndex: number,
-  moneyColumns: number[] = [],
-  percentColumns: number[] = [],
-): string {
-  if (value === null || value === undefined) return "";
-  if (typeof value === "number") {
-    if (moneyColumns.includes(colIndex)) {
-      return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(value);
-    }
-    if (percentColumns.includes(colIndex)) {
-      return new Intl.NumberFormat("pt-BR", {
-        style: "percent",
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 2,
-      }).format(value / 100);
-    }
-    return new Intl.NumberFormat("pt-BR").format(value);
-  }
-  return String(value);
-}
-
-export function SpreadsheetRenderer({ title, headers, rows, format }: DisplaySpreadsheet) {
-  const moneyColumns = format?.moneyColumns ?? [];
-  const percentColumns = format?.percentColumns ?? [];
-
-  return (
-    <div className="space-y-2">
-      {title && <h3 className="text-sm font-semibold text-foreground">{title}</h3>}
-
-      <ScrollArea className="w-full">
-        <Table aria-readonly="true">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="text-muted-foreground font-normal text-center w-10" aria-label="Linha" />
-              {headers.map((h, i) => (
-                <TableHead key={i} className="font-semibold">
-                  {h}
-                </TableHead>
-              ))}
-            </TableRow>
-          </TableHeader>
-
-          <TableBody>
-            {rows.map((row, ri) => (
-              <TableRow key={ri}>
-                <TableCell className="text-center text-xs text-muted-foreground select-none">
-                  {ri + 1}
-                </TableCell>
-                {row.map((cell, ci) => {
-                  const isMoney = moneyColumns.includes(ci);
-                  const isPercent = percentColumns.includes(ci);
-                  const isNumber = typeof cell === "number";
-                  return (
-                    <TableCell
-                      key={ci}
-                      className={cn(
-                        (isMoney || isPercent || isNumber) && "text-right font-mono text-sm"
-                      )}
-                    >
-                      {formatCell(cell, ci, moneyColumns, percentColumns)}
-                    </TableCell>
-                  );
-                })}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-    </div>
-  );
-}
+import type { DisplaySpreadsheet } from "./sdk-types.js";
+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 formatCell(
+  value: string | number | null,
+  colIndex: number,
+  moneyColumns: number[] = [],
+  percentColumns: number[] = [],
+): string {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "number") {
+    if (moneyColumns.includes(colIndex)) {
+      return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(value);
+    }
+    if (percentColumns.includes(colIndex)) {
+      return new Intl.NumberFormat("pt-BR", {
+        style: "percent",
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 2,
+      }).format(value / 100);
+    }
+    return new Intl.NumberFormat("pt-BR").format(value);
+  }
+  return String(value);
+}
+
+export function SpreadsheetRenderer({ title, headers, rows, format }: DisplaySpreadsheet) {
+  const moneyColumns = format?.moneyColumns ?? [];
+  const percentColumns = format?.percentColumns ?? [];
+
+  return (
+    <div className="space-y-2">
+      {title && <h3 className="text-sm font-semibold text-foreground">{title}</h3>}
+
+      <ScrollArea className="w-full">
+        <Table aria-readonly="true">
+          <TableHeader>
+            <TableRow>
+              <TableHead className="text-muted-foreground font-normal text-center w-10" aria-label="Linha" />
+              {headers.map((h, i) => (
+                <TableHead key={i} className="font-semibold">
+                  {h}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {rows.map((row, ri) => (
+              <TableRow key={ri}>
+                <TableCell className="text-center text-xs text-muted-foreground select-none">
+                  {ri + 1}
+                </TableCell>
+                {row.map((cell, ci) => {
+                  const isMoney = moneyColumns.includes(ci);
+                  const isPercent = percentColumns.includes(ci);
+                  const isNumber = typeof cell === "number";
+                  return (
+                    <TableCell
+                      key={ci}
+                      className={cn(
+                        (isMoney || isPercent || isNumber) && "text-right font-mono text-sm"
+                      )}
+                    >
+                      {formatCell(cell, ci, moneyColumns, percentColumns)}
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  );
+}

package/src/display/StepTimelineRenderer.tsx

@@ -1,75 +1,75 @@
-import type { DisplaySteps } from "./sdk-types.js";
-import { cn } from "../lib/utils";
-import { Badge } from "../ui/badge";
-
-const STATUS_CIRCLE: Record<"completed" | "current" | "pending", string> = {
-  completed: "bg-primary text-primary-foreground",
-  current: "bg-primary/20 border border-primary",
-  pending: "bg-muted text-muted-foreground",
-};
-
-const STATUS_TITLE: Record<"completed" | "current" | "pending", string> = {
-  completed: "text-foreground",
-  current: "text-primary",
-  pending: "text-muted-foreground",
-};
-
-export function StepTimelineRenderer({ title, steps, orientation }: DisplaySteps) {
-  const isVertical = orientation !== "horizontal";
-
-  return (
-    <div className={cn("flex", isVertical ? "flex-col gap-0" : "flex-row items-start gap-0")}>
-      {title && (
-        <p className="text-sm font-medium text-foreground mb-3">{title}</p>
-      )}
-      {steps.map((step, index) => {
-        const isLast = index === steps.length - 1;
-        const { status } = step;
-
-        return (
-          <div
-            key={index}
-            className={cn(
-              "flex",
-              isVertical ? "flex-row gap-3" : "flex-col items-center gap-2 flex-1"
-            )}
-          >
-            {/* Circle + connector column */}
-            <div className={cn("flex", isVertical ? "flex-col items-center" : "flex-row items-center")}>
-              <div
-                className={cn(
-                  "w-6 h-6 rounded-full flex items-center justify-center shrink-0",
-                  STATUS_CIRCLE[status]
-                )}
-              >
-                <Badge
-                  variant="secondary"
-                  className="w-5 h-5 flex items-center justify-center rounded-full p-0 text-[10px] font-semibold border-0 bg-transparent text-inherit"
-                >
-                  {index + 1}
-                </Badge>
-              </div>
-              {!isLast && (
-                <div
-                  className={cn(
-                    isVertical ? "w-px h-6 bg-border" : "h-px w-full bg-border flex-1"
-                  )}
-                />
-              )}
-            </div>
-
-            {/* Content */}
-            <div className={cn("pb-4 flex-1 min-w-0", isLast && "pb-0", !isVertical && "text-center")}>
-              <p className={cn("text-sm font-medium leading-none", STATUS_TITLE[status])}>
-                {step.title}
-              </p>
-              {step.description && (
-                <p className="text-xs text-muted-foreground mt-1">{step.description}</p>
-              )}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
+import type { DisplaySteps } from "./sdk-types.js";
+import { cn } from "../lib/utils";
+import { Badge } from "../ui/badge";
+
+const STATUS_CIRCLE: Record<"completed" | "current" | "pending", string> = {
+  completed: "bg-primary text-primary-foreground",
+  current: "bg-primary/20 border border-primary",
+  pending: "bg-muted text-muted-foreground",
+};
+
+const STATUS_TITLE: Record<"completed" | "current" | "pending", string> = {
+  completed: "text-foreground",
+  current: "text-primary",
+  pending: "text-muted-foreground",
+};
+
+export function StepTimelineRenderer({ title, steps, orientation }: DisplaySteps) {
+  const isVertical = orientation !== "horizontal";
+
+  return (
+    <div className={cn("flex", isVertical ? "flex-col gap-0" : "flex-row items-start gap-0")}>
+      {title && (
+        <p className="text-sm font-medium text-foreground mb-3">{title}</p>
+      )}
+      {steps.map((step, index) => {
+        const isLast = index === steps.length - 1;
+        const { status } = step;
+
+        return (
+          <div
+            key={index}
+            className={cn(
+              "flex",
+              isVertical ? "flex-row gap-3" : "flex-col items-center gap-2 flex-1"
+            )}
+          >
+            {/* Circle + connector column */}
+            <div className={cn("flex", isVertical ? "flex-col items-center" : "flex-row items-center")}>
+              <div
+                className={cn(
+                  "w-6 h-6 rounded-full flex items-center justify-center shrink-0",
+                  STATUS_CIRCLE[status]
+                )}
+              >
+                <Badge
+                  variant="secondary"
+                  className="w-5 h-5 flex items-center justify-center rounded-full p-0 text-[10px] font-semibold border-0 bg-transparent text-inherit"
+                >
+                  {index + 1}
+                </Badge>
+              </div>
+              {!isLast && (
+                <div
+                  className={cn(
+                    isVertical ? "w-px h-6 bg-border" : "h-px w-full bg-border flex-1"
+                  )}
+                />
+              )}
+            </div>
+
+            {/* Content */}
+            <div className={cn("pb-4 flex-1 min-w-0", isLast && "pb-0", !isVertical && "text-center")}>
+              <p className={cn("text-sm font-medium leading-none", STATUS_TITLE[status])}>
+                {step.title}
+              </p>
+              {step.description && (
+                <p className="text-xs text-muted-foreground mt-1">{step.description}</p>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/display/index.ts

@@ -1,21 +1,21 @@
-export { AlertRenderer } from "./AlertRenderer.js";
-export { MetricCardRenderer } from "./MetricCardRenderer.js";
-export { PriceHighlightRenderer } from "./PriceHighlightRenderer.js";
-export { FileCardRenderer } from "./FileCardRenderer.js";
-export { CodeBlockRenderer } from "./CodeBlockRenderer.js";
-export { SourcesListRenderer } from "./SourcesListRenderer.js";
-export { StepTimelineRenderer } from "./StepTimelineRenderer.js";
-export { ProgressStepsRenderer } from "./ProgressStepsRenderer.js";
-export { ChartRenderer } from "./ChartRenderer.js";
-export { CarouselRenderer } from "./CarouselRenderer.js";
-export { ProductCardRenderer } from "./ProductCardRenderer.js";
-export { ComparisonTableRenderer } from "./ComparisonTableRenderer.js";
-export { DataTableRenderer } from "./DataTableRenderer.js";
-export { SpreadsheetRenderer } from "./SpreadsheetRenderer.js";
-export { GalleryRenderer } from "./GalleryRenderer.js";
-export { ImageViewerRenderer } from "./ImageViewerRenderer.js";
-export { LinkPreviewRenderer } from "./LinkPreviewRenderer.js";
-export { MapViewRenderer } from "./MapViewRenderer.js";
-export { ChoiceButtonsRenderer } from "./ChoiceButtonsRenderer.js";
-export { defaultDisplayRenderers, resolveDisplayRenderer } from "./registry.js";
-export type { DisplayRendererMap, DisplayActionName } from "./registry.js";
+export { AlertRenderer } from "./AlertRenderer.js";
+export { MetricCardRenderer } from "./MetricCardRenderer.js";
+export { PriceHighlightRenderer } from "./PriceHighlightRenderer.js";
+export { FileCardRenderer } from "./FileCardRenderer.js";
+export { CodeBlockRenderer } from "./CodeBlockRenderer.js";
+export { SourcesListRenderer } from "./SourcesListRenderer.js";
+export { StepTimelineRenderer } from "./StepTimelineRenderer.js";
+export { ProgressStepsRenderer } from "./ProgressStepsRenderer.js";
+export { ChartRenderer } from "./ChartRenderer.js";
+export { CarouselRenderer } from "./CarouselRenderer.js";
+export { ProductCardRenderer } from "./ProductCardRenderer.js";
+export { ComparisonTableRenderer } from "./ComparisonTableRenderer.js";
+export { DataTableRenderer } from "./DataTableRenderer.js";
+export { SpreadsheetRenderer } from "./SpreadsheetRenderer.js";
+export { GalleryRenderer } from "./GalleryRenderer.js";
+export { ImageViewerRenderer } from "./ImageViewerRenderer.js";
+export { LinkPreviewRenderer } from "./LinkPreviewRenderer.js";
+export { MapViewRenderer } from "./MapViewRenderer.js";
+export { ChoiceButtonsRenderer } from "./ChoiceButtonsRenderer.js";
+export { defaultDisplayRenderers, resolveDisplayRenderer } from "./registry.js";
+export type { DisplayRendererMap, DisplayActionName } from "./registry.js";