@codrstudio/openclaude-chat 0.1.0 → 0.2.0

package/src/display/MetricCardRenderer.tsx

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

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

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

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

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