@codrstudio/openclaude-chat 0.1.0

package/src/display/LinkPreviewRenderer.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import type { DisplayLink } from "./sdk-types.js";
+import { Globe } from "lucide-react";
+import { Card } from "../ui/card";
+
+function getDomain(url: string, domainProp?: string): string {
+  if (domainProp) return domainProp;
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+export function LinkPreviewRenderer({
+  url,
+  title,
+  description,
+  image,
+  favicon,
+  domain,
+}: DisplayLink) {
+  const [imgError, setImgError] = useState(false);
+  const [faviconError, setFaviconError] = useState(false);
+
+  const displayDomain = getDomain(url, domain);
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={`Link: ${title}`}
+    >
+      <Card className="overflow-hidden hover:bg-muted/50 transition-colors">
+        {image && !imgError && (
+          <div className="aspect-video overflow-hidden">
+            <img
+              src={image}
+              alt={title}
+              className="w-full h-full object-cover"
+              loading="lazy"
+              decoding="async"
+              onError={() => setImgError(true)}
+            />
+          </div>
+        )}
+
+        <div className="p-3 space-y-1">
+          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            {favicon && !faviconError ? (
+              <img
+                src={favicon}
+                alt=""
+                className="w-3 h-3 rounded-sm"
+                onError={() => setFaviconError(true)}
+                aria-hidden="true"
+              />
+            ) : (
+              <Globe size={12} aria-hidden="true" className="shrink-0" />
+            )}
+            <span>{displayDomain}</span>
+          </div>
+
+          <p className="font-medium text-foreground text-sm">{title}</p>
+
+          {description && (
+            <p className="text-xs text-muted-foreground line-clamp-2">{description}</p>
+          )}
+        </div>
+      </Card>
+    </a>
+  );
+}

package/src/display/MapViewRenderer.tsx

@@ -0,0 +1,75 @@
+import type { DisplayMap } from "./sdk-types.js";
+import { MapPin } from "lucide-react";
+import { Card } from "../ui/card.js";
+import { Separator } from "../ui/separator.js";
+
+function buildOsmUrl(pins: DisplayMap["pins"], zoom: number): string {
+  if (pins.length === 0) {
+    return `https://www.openstreetmap.org/export/embed.html?bbox=-180,-90,180,90&layer=mapnik`;
+  }
+
+  const lat = pins.reduce((acc, p) => acc + p.lat, 0) / pins.length;
+  const lng = pins.reduce((acc, p) => acc + p.lng, 0) / pins.length;
+
+  const firstPin = pins[0]!;
+  const markerParam =
+    pins.length === 1
+      ? `&mlat=${firstPin.lat}&mlon=${firstPin.lng}`
+      : "";
+
+  return `https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.05},${lat - 0.05},${lng + 0.05},${lat + 0.05}&layer=mapnik&zoom=${zoom}${markerParam}`;
+}
+
+export function MapViewRenderer({ title, pins, zoom }: DisplayMap) {
+  const osmUrl = buildOsmUrl(pins, zoom);
+
+  return (
+    <Card className="overflow-hidden">
+      {title && (
+        <div className="px-4 py-3">
+          <h3 className="font-medium text-sm text-foreground">{title}</h3>
+        </div>
+      )}
+
+      <div className="relative aspect-video bg-muted text-muted-foreground overflow-hidden">
+        <iframe
+          src={osmUrl}
+          className="w-full h-full border-0"
+          title={title ?? "Mapa OpenStreetMap"}
+          loading="lazy"
+          referrerPolicy="no-referrer"
+          sandbox="allow-scripts allow-same-origin"
+        />
+        <div className="absolute inset-0 pointer-events-none flex items-center justify-center opacity-10">
+          <MapPin className="h-10 w-10" />
+        </div>
+      </div>
+
+      {pins.length > 0 && (
+        <>
+          <Separator />
+          <ul className="p-3 space-y-2" aria-label="Locais no mapa">
+            {pins.map((pin, i) => (
+              <li key={i} className="flex items-start gap-2">
+                <MapPin className="h-4 w-4 shrink-0 text-primary mt-0.5" aria-hidden="true" />
+                <span className="flex flex-col min-w-0">
+                  {pin.label && (
+                    <span className="font-medium text-sm text-foreground">{pin.label}</span>
+                  )}
+                  {pin.address && (
+                    <span className="text-xs text-muted-foreground">{pin.address}</span>
+                  )}
+                  {!pin.label && !pin.address && (
+                    <span className="text-xs text-muted-foreground font-mono">
+                      {pin.lat.toFixed(4)}, {pin.lng.toFixed(4)}
+                    </span>
+                  )}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </Card>
+  );
+}

package/src/display/MetricCardRenderer.tsx

@@ -0,0 +1,29 @@
+import type { DisplayMetric } from "./sdk-types.js";
+import { ArrowDown, ArrowRight, ArrowUp } from "lucide-react";
+import { Card } from "../ui/card.js";
+
+const TREND_CONFIG = {
+  up: { Icon: ArrowUp, colorClass: "text-primary" },
+  down: { Icon: ArrowDown, colorClass: "text-destructive" },
+  neutral: { Icon: ArrowRight, colorClass: "text-muted-foreground" },
+} as const;
+
+export function MetricCardRenderer({ label, value, unit, trend }: DisplayMetric) {
+  const trendConfig = trend ? TREND_CONFIG[trend.direction] : null;
+
+  return (
+    <Card className="p-4 w-fit">
+      <p className="text-sm text-muted-foreground">{label}</p>
+      <div className="flex items-baseline gap-2 mt-1">
+        <span className="text-2xl font-bold text-foreground">{value}</span>
+        {unit && <span className="text-sm text-muted-foreground">{unit}</span>}
+      </div>
+      {trend && trendConfig && (
+        <div className={`flex items-center gap-1 mt-1 text-sm ${trendConfig.colorClass}`}>
+          <trendConfig.Icon size={14} aria-hidden="true" />
+          <span>{trend.value}</span>
+        </div>
+      )}
+    </Card>
+  );
+}

package/src/display/PriceHighlightRenderer.tsx

@@ -0,0 +1,62 @@
+import type { DisplayPrice } from "./sdk-types.js";
+import { ExternalLink } from "lucide-react";
+import { Badge } from "../ui/badge";
+import { Card } from "../ui/card";
+
+function formatPrice(value: number, currency?: string): string {
+  // Fallbacks defensivos: se o modelo nao enviar currency ou enviar um valor
+  // invalido (ex: string vazia), caimos num formato numerico simples em vez de
+  // crashar a arvore React com "Currency code is required".
+  try {
+    return new Intl.NumberFormat("pt-BR", {
+      style: "currency",
+      currency: currency || "BRL",
+    }).format(value);
+  } catch {
+    return new Intl.NumberFormat("pt-BR").format(value);
+  }
+}
+
+export function PriceHighlightRenderer({ value, label, context, source, badge }: DisplayPrice) {
+  // Tambem aceita value como numero flat (modelo pode nao seguir schema exato).
+  const amount =
+    typeof value === "number"
+      ? value
+      : typeof value === "object" && value !== null && "value" in value
+        ? (value as { value: number }).value
+        : 0;
+  const currency =
+    typeof value === "object" && value !== null && "currency" in value
+      ? (value as { currency?: string }).currency
+      : undefined;
+  return (
+    <Card className="p-4 space-y-1 w-fit">
+      <p className="text-sm text-muted-foreground">{label}</p>
+      <div className="flex items-baseline gap-2">
+        <span className="text-2xl font-bold text-foreground">
+          {formatPrice(amount, currency)}
+        </span>
+        {badge && (
+          <Badge variant="destructive">
+            {badge.label}
+          </Badge>
+        )}
+      </div>
+      {context && <p className="text-sm text-muted-foreground">{context}</p>}
+      {source && (
+        <a
+          href={source.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 text-xs text-primary hover:underline"
+        >
+          {source.favicon && (
+            <img src={source.favicon} alt="" width={14} height={14} aria-hidden="true" />
+          )}
+          <span>{source.name}</span>
+          <ExternalLink size={12} aria-hidden="true" />
+        </a>
+      )}
+    </Card>
+  );
+}

package/src/display/ProductCardRenderer.tsx

@@ -0,0 +1,112 @@
+import { useState } from "react";
+import type { DisplayProduct } from "./sdk-types.js";
+import { Star } from "lucide-react";
+import { Card, CardContent, CardTitle } from "../ui/card.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { cn } from "../lib/utils.js";
+
+function StarRating({ score, count }: { score: number; count: number }) {
+  const fullStars = Math.floor(score);
+  const hasHalf = score - fullStars >= 0.5;
+  const emptyStars = 5 - fullStars - (hasHalf ? 1 : 0);
+
+  return (
+    <div
+      className="flex items-center gap-0.5 text-primary"
+      aria-label={`${score} de 5 estrelas (${count} avaliações)`}
+    >
+      {Array.from({ length: fullStars }).map((_, i) => (
+        <Star key={`f${i}`} size={14} fill="currentColor" />
+      ))}
+      {hasHalf && <Star size={14} fill="none" />}
+      {Array.from({ length: emptyStars }).map((_, i) => (
+        <Star key={`e${i}`} size={14} fill="none" className="text-muted-foreground" />
+      ))}
+      <span className="text-xs text-muted-foreground ml-1">({count})</span>
+    </div>
+  );
+}
+
+function formatMoney(value: number, currency = "BRL") {
+  return new Intl.NumberFormat("pt-BR", { style: "currency", currency }).format(value);
+}
+
+export function ProductCardRenderer({
+  title,
+  image,
+  price,
+  originalPrice,
+  rating,
+  badges,
+  url,
+  description,
+}: DisplayProduct) {
+  const [imgError, setImgError] = useState(false);
+
+  const discount =
+    price && originalPrice && originalPrice.value > price.value
+      ? Math.round(((originalPrice.value - price.value) / originalPrice.value) * 100)
+      : null;
+
+  return (
+    <Card className="overflow-hidden w-fit max-w-sm">
+      {image && !imgError && (
+        <div className="relative">
+          <img
+            src={image}
+            alt={title}
+            className={cn("w-full aspect-video object-cover")}
+            loading="lazy"
+            decoding="async"
+            onError={() => setImgError(true)}
+          />
+          {discount !== null && (
+            <Badge variant="destructive" className="absolute top-2 right-2">
+              -{discount}%
+            </Badge>
+          )}
+        </div>
+      )}
+
+      <CardContent className="p-4 space-y-2">
+        {badges && badges.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {badges.map((b, i) => (
+              <Badge key={i} variant="secondary">
+                {b.label}
+              </Badge>
+            ))}
+          </div>
+        )}
+
+        <CardTitle className="text-sm">{title}</CardTitle>
+
+        {description && (
+          <p className="text-xs text-muted-foreground line-clamp-2">{description}</p>
+        )}
+
+        {rating && <StarRating score={rating.score} count={rating.count} />}
+
+        {price && (
+          <div className="flex items-baseline gap-2">
+            <span className="text-lg font-bold">{formatMoney(price.value, price.currency)}</span>
+            {originalPrice && (
+              <span className="text-sm text-muted-foreground line-through">
+                {formatMoney(originalPrice.value, originalPrice.currency)}
+              </span>
+            )}
+          </div>
+        )}
+
+        {url && (
+          <Button className="w-full" size="sm" asChild>
+            <a href={url} target="_blank" rel="noopener noreferrer">
+              Ver produto
+            </a>
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/display/ProgressStepsRenderer.tsx

@@ -0,0 +1,59 @@
+import type { DisplayProgress } from "./sdk-types.js";
+import { Check, Circle, Clock } from "lucide-react";
+import { Progress } from "../ui/progress.js";
+import { Badge } from "../ui/badge.js";
+import { cn } from "../lib/utils.js";
+
+export function ProgressStepsRenderer({ title, steps }: DisplayProgress) {
+  const completed = steps.filter((s) => s.status === "completed").length;
+  const percentage = steps.length > 0 ? Math.round((completed / steps.length) * 100) : 0;
+
+  return (
+    <div className="space-y-3">
+      {title && <p className="font-medium text-foreground">{title}</p>}
+      <div className="flex items-center gap-3">
+        <Progress value={percentage} className="flex-1" />
+        <span className="text-sm text-muted-foreground tabular-nums">{percentage}%</span>
+      </div>
+      <p className="text-sm text-muted-foreground">
+        {completed} de {steps.length} concluídos
+      </p>
+      <ol className="space-y-2">
+        {steps.map((step, index) => {
+          const isCompleted = step.status === "completed";
+          const isPending = step.status === "pending";
+          return (
+            <li key={index} className="flex items-start gap-2">
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "mt-0.5 shrink-0",
+                  isCompleted ? "text-primary" : "text-muted-foreground"
+                )}
+              >
+                {isCompleted ? (
+                  <Check size={16} />
+                ) : isPending ? (
+                  <Circle size={16} />
+                ) : (
+                  <Clock size={16} />
+                )}
+              </span>
+              <div className="flex-1 min-w-0">
+                <p className={cn("text-sm", isCompleted ? "text-foreground" : "text-muted-foreground")}>
+                  {step.label}
+                </p>
+                {step.description && (
+                  <p className="text-xs text-muted-foreground mt-0.5">{step.description}</p>
+                )}
+              </div>
+              <Badge variant="secondary" className="shrink-0 text-xs">
+                {index + 1}
+              </Badge>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}

package/src/display/SourcesListRenderer.tsx

@@ -0,0 +1,47 @@
+import type { DisplaySources } from "./sdk-types.js";
+import { ExternalLink, Globe } from "lucide-react";
+
+export function SourcesListRenderer({ label, sources }: DisplaySources) {
+  return (
+    <div className="space-y-2">
+      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">{label}</p>
+      <ol className="space-y-1">
+        {sources.map((source, index) => (
+          <li key={index}>
+            <a
+              href={source.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start gap-2 p-2 rounded-md hover:bg-muted text-sm"
+            >
+              <span className="text-xs text-muted-foreground font-mono w-5 shrink-0 pt-0.5">
+                {index + 1}
+              </span>
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-1.5">
+                  {source.favicon ? (
+                    <img
+                      src={source.favicon}
+                      alt=""
+                      width={14}
+                      height={14}
+                      className="shrink-0"
+                      aria-hidden="true"
+                    />
+                  ) : (
+                    <Globe size={14} className="shrink-0 text-muted-foreground" aria-hidden="true" />
+                  )}
+                  <span className="font-medium text-primary truncate">{source.title}</span>
+                  <ExternalLink size={12} className="shrink-0 text-muted-foreground" aria-hidden="true" />
+                </div>
+                {source.snippet && (
+                  <p className="text-xs text-muted-foreground line-clamp-2 mt-0.5">{source.snippet}</p>
+                )}
+              </div>
+            </a>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}

package/src/display/SpreadsheetRenderer.tsx

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

package/src/display/StepTimelineRenderer.tsx

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

package/src/display/index.ts

@@ -0,0 +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";