orcheo-studio 0.21.1

package/src/features/workflow/components/panels/workflow-history-table.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import { GitCommit } from "lucide-react";
+
+import { Badge } from "@/design-system/ui/badge";
+import { ScrollArea } from "@/design-system/ui/scroll-area";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/design-system/ui/table";
+import { cn } from "@/lib/utils";
+import type { WorkflowVersionRecord } from "@features/workflow/lib/workflow-storage";
+
+interface WorkflowHistoryTableProps {
+  filteredVersions: WorkflowVersionRecord[];
+  selectedVersionId: string | null;
+  currentVersion?: string;
+  searchQuery: string;
+  onSelectVersion: (versionId: string) => void;
+}
+
+const statusBadgeClass =
+  "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400";
+
+const summaryBadgeClasses: Record<"added" | "removed" | "modified", string> = {
+  added: statusBadgeClass,
+  removed: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+  modified: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+};
+
+const SummaryBadge = ({
+  type,
+  value,
+}: {
+  type: keyof typeof summaryBadgeClasses;
+  value: number;
+}) => {
+  if (value <= 0) {
+    return null;
+  }
+
+  const prefix = type === "added" ? "+" : type === "removed" ? "-" : "~";
+
+  return (
+    <Badge className={summaryBadgeClasses[type]}>{`${prefix}${value}`}</Badge>
+  );
+};
+
+export default function WorkflowHistoryTable({
+  filteredVersions,
+  selectedVersionId,
+  currentVersion,
+  searchQuery,
+  onSelectVersion,
+}: WorkflowHistoryTableProps) {
+  const renderStatusBadge = (version: WorkflowVersionRecord) => {
+    if (version.version !== currentVersion) {
+      return null;
+    }
+
+    return <Badge className={statusBadgeClass}>Current</Badge>;
+  };
+
+  return (
+    <ScrollArea className="flex-1 h-[400px]">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[100px]">Version</TableHead>
+            <TableHead>Message</TableHead>
+            <TableHead>Author</TableHead>
+            <TableHead>Date</TableHead>
+            <TableHead className="text-right">Changes</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {filteredVersions.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={5} className="text-center py-8">
+                <div className="text-muted-foreground">
+                  No versions found
+                  {searchQuery && (
+                    <p className="text-sm">Try adjusting your search query</p>
+                  )}
+                </div>
+              </TableCell>
+            </TableRow>
+          ) : (
+            filteredVersions.map((version) => {
+              const isSelected = selectedVersionId === version.id;
+              return (
+                <TableRow
+                  key={version.id}
+                  className={cn("cursor-pointer", isSelected && "bg-muted")}
+                  onClick={() => onSelectVersion(version.id)}
+                >
+                  <TableCell className="font-medium">
+                    <div className="flex items-center gap-2">
+                      <GitCommit className="h-4 w-4 text-muted-foreground" />
+
+                      {version.version}
+                      {renderStatusBadge(version)}
+                    </div>
+                  </TableCell>
+                  <TableCell>{version.message}</TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <div className="h-6 w-6 rounded-full overflow-hidden bg-muted">
+                        <img
+                          src={version.author.avatar}
+                          alt={version.author.name}
+                          className="h-full w-full object-cover"
+                        />
+                      </div>
+                      {version.author.name}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {new Date(version.timestamp).toLocaleString()}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end gap-2">
+                      <SummaryBadge
+                        type="added"
+                        value={version.summary.added}
+                      />
+                      <SummaryBadge
+                        type="removed"
+                        value={version.summary.removed}
+                      />
+                      <SummaryBadge
+                        type="modified"
+                        value={version.summary.modified}
+                      />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })
+          )}
+        </TableBody>
+      </Table>
+    </ScrollArea>
+  );
+}

package/src/features/workflow/components/panels/workflow-history.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+import { cn } from "@/lib/utils";
+import { computeWorkflowDiff } from "@features/workflow/lib/workflow-diff";
+import type { WorkflowVersionRecord } from "@features/workflow/lib/workflow-storage";
+
+import WorkflowDiffDialog, {
+  type WorkflowDiffContext,
+} from "./workflow-diff-dialog";
+import WorkflowHistoryFilters from "./workflow-history-filters";
+import WorkflowHistoryFooter from "./workflow-history-footer";
+import WorkflowHistoryHeader from "./workflow-history-header";
+import WorkflowHistoryTable from "./workflow-history-table";
+
+interface WorkflowHistoryProps {
+  versions?: WorkflowVersionRecord[];
+  currentVersion?: string;
+  onRestoreVersion?: (versionId: string) => void;
+  className?: string;
+}
+
+export default function WorkflowHistory({
+  versions = [],
+  currentVersion,
+  onRestoreVersion,
+  className,
+}: WorkflowHistoryProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedVersionId, setSelectedVersionId] = useState<string | null>(
+    null,
+  );
+  const [compareVersionId, setCompareVersionId] = useState<string | null>(null);
+  const [showDiffDialog, setShowDiffDialog] = useState(false);
+  const [diffContext, setDiffContext] = useState<WorkflowDiffContext | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (!versions.length) {
+      setSelectedVersionId(null);
+      setCompareVersionId(null);
+      return;
+    }
+
+    if (currentVersion) {
+      const matched = versions.find(
+        (version) => version.version === currentVersion,
+      );
+      setSelectedVersionId(matched?.id ?? null);
+    } else if (!selectedVersionId) {
+      setSelectedVersionId(versions[0].id);
+    }
+  }, [currentVersion, selectedVersionId, versions]);
+
+  // Filter versions based on search query
+  const filteredVersions = useMemo(() => {
+    if (!searchQuery) {
+      return versions;
+    }
+    return versions.filter(
+      (version) =>
+        version.version.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        version.message.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        version.author.name.toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+  }, [searchQuery, versions]);
+
+  const selectedVersionRecord = useMemo(() => {
+    return versions.find((version) => version.id === selectedVersionId) ?? null;
+  }, [selectedVersionId, versions]);
+
+  const compareVersionRecord = useMemo(() => {
+    return versions.find((version) => version.id === compareVersionId) ?? null;
+  }, [compareVersionId, versions]);
+
+  const handleSelectVersion = (versionId: string) => {
+    setSelectedVersionId(versionId);
+    if (compareVersionId === versionId) {
+      setCompareVersionId(null);
+    }
+  };
+
+  const handleCompareVersions = () => {
+    if (!selectedVersionRecord || !compareVersionRecord) {
+      return;
+    }
+    const diffResult = computeWorkflowDiff(
+      selectedVersionRecord.snapshot,
+      compareVersionRecord.snapshot,
+    );
+    setDiffContext({
+      base: selectedVersionRecord,
+      target: compareVersionRecord,
+      result: diffResult,
+    });
+    setShowDiffDialog(true);
+  };
+
+  const handleRestoreVersion = () => {
+    if (selectedVersionId) {
+      onRestoreVersion?.(selectedVersionId);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col border border-border rounded-lg bg-background shadow-lg",
+        className,
+      )}
+    >
+      <WorkflowHistoryHeader
+        onRestoreVersion={handleRestoreVersion}
+        onCompareVersions={handleCompareVersions}
+        canRestore={
+          !!selectedVersionRecord &&
+          (!currentVersion || selectedVersionRecord.version !== currentVersion)
+        }
+        canCompare={!!selectedVersionRecord && !!compareVersionRecord}
+      />
+
+      <WorkflowHistoryFilters
+        searchQuery={searchQuery}
+        onSearchChange={(value) => setSearchQuery(value)}
+        compareVersionId={compareVersionId}
+        onSelectCompareVersion={(value) => setCompareVersionId(value)}
+        versions={versions}
+        selectedVersionId={selectedVersionId}
+      />
+
+      <WorkflowHistoryTable
+        filteredVersions={filteredVersions}
+        selectedVersionId={selectedVersionId}
+        currentVersion={currentVersion}
+        searchQuery={searchQuery}
+        onSelectVersion={handleSelectVersion}
+      />
+
+      <WorkflowHistoryFooter totalVersions={filteredVersions.length} />
+
+      <WorkflowDiffDialog
+        open={showDiffDialog}
+        onOpenChange={setShowDiffDialog}
+        diffContext={diffContext}
+        selectedVersionRecord={selectedVersionRecord}
+        compareVersionRecord={compareVersionRecord}
+      />
+    </div>
+  );
+}

package/src/features/workflow/components/panels/workflow-tabs.tsx

@@ -0,0 +1,29 @@
+import { Tabs, TabsList, TabsTrigger } from "@/design-system/ui/tabs";
+
+interface WorkflowTabsProps {
+  activeTab: string;
+  onTabChange: (value: string) => void;
+}
+
+export default function WorkflowTabs({
+  activeTab,
+  onTabChange,
+}: WorkflowTabsProps) {
+  return (
+    <div className="border-b border-border">
+      <Tabs value={activeTab} onValueChange={onTabChange} className="w-full">
+        <TabsList className="h-9">
+          <TabsTrigger value="workflow" className="gap-1.5 text-sm px-3 py-1.5">
+            Workflow
+          </TabsTrigger>
+          <TabsTrigger value="trace" className="gap-1.5 text-sm px-3 py-1.5">
+            Trace
+          </TabsTrigger>
+          <TabsTrigger value="settings" className="gap-1.5 text-sm px-3 py-1.5">
+            Settings
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  );
+}

package/src/features/workflow/components/trace/agent-prism/Avatar.tsx

@@ -0,0 +1,146 @@
+import type { TraceSpanCategory } from "@evilmartians/agent-prism-types";
+import type { ComponentPropsWithRef, ReactElement } from "react";
+
+import cn from "classnames";
+import { User } from "lucide-react";
+import { useState } from "react";
+
+import type { ComponentSize } from "./shared";
+
+import { ROUNDED_CLASSES } from "./shared";
+
+export type AvatarSize = Extract<
+  ComponentSize,
+  "4" | "6" | "8" | "9" | "10" | "11" | "12" | "16"
+>;
+
+const sizeClasses: Record<AvatarSize, string> = {
+  "4": "size-4 text-xs",
+  "6": "size-6 text-xs",
+  "8": "size-8 text-xs",
+  "9": "size-9 text-sm",
+  "10": "size-10 text-base",
+  "11": "size-11 text-lg",
+  "12": "size-12 text-xl",
+  "16": "size-16 text-2xl",
+};
+
+const iconSizeClasses: Record<AvatarSize, string> = {
+  "4": "size-3",
+  "6": "size-4",
+  "8": "size-6",
+  "9": "size-7",
+  "10": "size-8",
+  "11": "size-9",
+  "12": "size-10",
+  "16": "size-12",
+};
+
+const bgColorClasses: Record<TraceSpanCategory, string> = {
+  llm_call: "bg-agentprism-avatar-llm",
+  tool_execution: "bg-agentprism-avatar-tool",
+  agent_invocation: "bg-agentprism-avatar-agent",
+  chain_operation: "bg-agentprism-avatar-chain",
+  retrieval: "bg-agentprism-avatar-retrieval",
+  embedding: "bg-agentprism-avatar-embedding",
+  create_agent: "bg-agentprism-avatar-create-agent",
+  span: "bg-agentprism-avatar-span",
+  event: "bg-agentprism-avatar-event",
+  guardrail: "bg-agentprism-avatar-guardrail",
+  unknown: "bg-agentprism-avatar-unknown",
+};
+
+export type AvatarProps = ComponentPropsWithRef<"div"> & {
+  /**
+   * The category of the span which avatar is associated with
+   */
+  category: TraceSpanCategory;
+  /**
+   * The image source for the avatar
+   */
+  src?: string;
+  /**
+   * The alt text for the avatar
+   */
+  alt?: string;
+  /**
+   * The size of the avatar
+   * @default "md"
+   */
+  size?: AvatarSize;
+  /**
+   * The border radius of the avatar
+   * @default "full"
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+  /**
+   * Custom letter to display (will use first letter of alt if not provided)
+   */
+  letter?: string;
+  /**
+   * Optional className for additional styling
+   */
+  className?: string;
+};
+
+export const Avatar = ({
+  category,
+  src,
+  alt = "Avatar",
+  size = "10",
+  rounded = "full",
+  letter,
+  children,
+  className = "",
+  ...rest
+}: AvatarProps): ReactElement => {
+  const [error, setError] = useState(false);
+
+  const displayLetter = letter ? letter.charAt(0) : alt.charAt(0).toUpperCase();
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center overflow-hidden",
+        !children && "bg-agentprism-muted",
+        error && "border-agentprism-secondary border",
+        sizeClasses[size],
+        ROUNDED_CLASSES[rounded],
+        className,
+      )}
+      {...rest}
+    >
+      {children ? (
+        children
+      ) : error ? (
+        <User
+          className={cn(
+            iconSizeClasses[size],
+            "text-agentprism-muted-foreground",
+          )}
+        />
+      ) : (
+        <>
+          {src ? (
+            <img
+              src={src}
+              alt={alt}
+              className="size-full object-cover"
+              onError={() => setError(true)}
+            />
+          ) : (
+            <div
+              className={cn(
+                "flex h-full w-full items-center justify-center",
+                "text-agentprism-accent font-medium",
+                bgColorClasses[category],
+              )}
+            >
+              {displayLetter}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};

package/src/features/workflow/components/trace/agent-prism/Badge.tsx

@@ -0,0 +1,95 @@
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+
+import cn from "classnames";
+
+import type { ComponentSize } from "./shared";
+
+type BadgeSize = Extract<ComponentSize, "4" | "5" | "6" | "7">;
+
+const sizeClasses: Record<BadgeSize, string> = {
+  "4": "px-1 gap-1 h-4",
+  "5": "px-1.5 gap-1 h-5",
+  "6": "px-2 gap-1.5 h-6",
+  "7": "px-2.5 gap-2 h-7",
+};
+
+const textSizes: Record<BadgeSize, string> = {
+  "4": "text-xs leading-3",
+  "5": "text-xs",
+  "6": "text-sm",
+  "7": "text-sm",
+};
+
+export type BadgeProps = ComponentPropsWithRef<"span"> & {
+  /**
+   * The content of the badge
+   */
+  label: ReactNode;
+
+  /**
+   * The size of the badge
+   * @default "md"
+   */
+  size?: BadgeSize;
+
+  /**
+   * Optional icon to display at the start of the badge
+   */
+  iconStart?: ReactElement;
+
+  /**
+   * Optional icon to display at the end of the badge
+   */
+  iconEnd?: ReactElement;
+
+  /**
+   * Optional className for additional styling
+   */
+  className?: string;
+
+  /**
+   * Whether to render the badge without any default styles
+   * @default false
+   */
+  unstyled?: boolean;
+};
+
+/**
+ * An unstyled badge component that displays a label with an optional icon
+ */
+export const Badge = ({
+  label,
+  size = "4",
+  iconStart,
+  iconEnd,
+  className = "",
+  unstyled = false,
+  ...rest
+}: BadgeProps): ReactElement => {
+  return (
+    <span
+      className={cn(
+        "inline-flex min-w-0 items-center overflow-hidden rounded-md font-medium",
+        sizeClasses[size],
+        className,
+        unstyled
+          ? ""
+          : "bg-agentprism-badge-default text-agentprism-badge-default-foreground",
+      )}
+      {...rest}
+    >
+      {iconStart && <span className="shrink-0">{iconStart}</span>}
+
+      <span
+        className={cn(
+          textSizes[size],
+          "min-w-0 max-w-full flex-shrink-0 truncate font-medium tracking-normal",
+        )}
+      >
+        {label}
+      </span>
+
+      {iconEnd && <span className="shrink-0">{iconEnd}</span>}
+    </span>
+  );
+};

package/src/features/workflow/components/trace/agent-prism/BrandLogo.tsx

@@ -0,0 +1,102 @@
+import { type FC } from "react";
+
+const OpenAILogo: FC<{ className?: string }> = ({ className }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z" />
+  </svg>
+);
+
+const AnthropicLogo: FC<{ className?: string }> = ({ className }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M15.5 2.694h5.97l-9.204 18.612h-5.97L15.5 2.694zm-7.112 0h5.515l-9.177 18.612H0L8.388 2.694z" />
+  </svg>
+);
+
+const GoogleLogo: FC<{ className?: string }> = ({ className }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none">
+    <path
+      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+      fill="#4285F4"
+    />
+    <path
+      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+      fill="#34A853"
+    />
+    <path
+      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+      fill="#FBBC05"
+    />
+    <path
+      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+      fill="#EA4335"
+    />
+  </svg>
+);
+
+const MetaLogo: FC<{ className?: string }> = ({ className }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+  </svg>
+);
+
+const MistralLogo: FC<{ className?: string }> = ({ className }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+    <rect width="4" height="4" x="0" y="0" />
+    <rect width="4" height="4" x="5" y="0" />
+    <rect width="4" height="4" x="10" y="0" />
+    <rect width="4" height="4" x="15" y="0" />
+    <rect width="4" height="4" x="20" y="0" />
+    <rect width="4" height="4" x="0" y="5" />
+    <rect width="4" height="4" x="15" y="5" />
+    <rect width="4" height="4" x="20" y="5" />
+    <rect width="4" height="4" x="0" y="10" />
+    <rect width="4" height="4" x="10" y="10" />
+    <rect width="4" height="4" x="15" y="10" />
+    <rect width="4" height="4" x="20" y="10" />
+    <rect width="4" height="4" x="0" y="15" />
+    <rect width="4" height="4" x="5" y="15" />
+    <rect width="4" height="4" x="15" y="15" />
+    <rect width="4" height="4" x="20" y="15" />
+    <rect width="4" height="4" x="0" y="20" />
+    <rect width="4" height="4" x="5" y="20" />
+    <rect width="4" height="4" x="10" y="20" />
+    <rect width="4" height="4" x="15" y="20" />
+    <rect width="4" height="4" x="20" y="20" />
+  </svg>
+);
+
+const PerplexityLogo: FC<{ className?: string }> = ({ className }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M13.913.5v10.203L23.413 5.5zm-3.826 0L.587 5.5l9.5 5.203zm0 23L.587 18.5l9.5-5.203zm3.826 0v-10.203L23.413 18.5z" />
+  </svg>
+);
+
+// Logo registry
+const LOGO_REGISTRY = {
+  openai: OpenAILogo,
+  anthropic: AnthropicLogo,
+  google: GoogleLogo,
+  meta: MetaLogo,
+  mistral: MistralLogo,
+  perplexity: PerplexityLogo,
+} as const;
+
+type BrandType = keyof typeof LOGO_REGISTRY;
+
+type BrandLogoProps = {
+  brand: BrandType | string;
+  className?: string;
+  fallback?: React.ReactNode;
+};
+
+export const BrandLogo: FC<BrandLogoProps> = ({
+  brand,
+  className = "size-4",
+  fallback = null,
+}) => {
+  const Logo = LOGO_REGISTRY[brand as BrandType];
+
+  if (!Logo) return <>{fallback}</>;
+
+  return <Logo className={className} />;
+};