orcheo-canvas 0.0.1

package/src/features/workflow/components/panels/workflow-node-gallery.tsx

@@ -0,0 +1,86 @@
+import React, { useMemo, useState } from "react";
+import { cn } from "@/lib/utils";
+import { Tabs, TabsList, TabsTrigger } from "@/design-system/ui/tabs";
+import { Input } from "@/design-system/ui/input";
+import { ScrollArea } from "@/design-system/ui/scroll-area";
+import { Search } from "lucide-react";
+import {
+  NODE_CATEGORIES,
+  NODE_GALLERY_ITEMS,
+  type NodeCategory,
+} from "./workflow-node-gallery-data";
+
+export default function WorkflowNodeGallery() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeCategory, setActiveCategory] = useState<NodeCategory>("all");
+
+  // Filter nodes based on search query and active category
+  const filteredNodes = useMemo(() => {
+    return NODE_GALLERY_ITEMS.filter((node) => {
+      const matchesSearch =
+        searchQuery === "" ||
+        node.id.toLowerCase().includes(searchQuery.toLowerCase());
+
+      const matchesCategory =
+        activeCategory === "all" || node.category === activeCategory;
+
+      return matchesSearch && matchesCategory;
+    });
+  }, [activeCategory, searchQuery]);
+
+  return (
+    <div className="flex flex-col h-full border border-border rounded-lg overflow-hidden">
+      <div className="p-4 border-b border-border">
+        <h3 className="font-medium mb-2">Workflow Nodes</h3>
+        <div className="relative">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+
+          <Input
+            placeholder="Search nodes..."
+            className="pl-8"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <Tabs
+        defaultValue="all"
+        value={activeCategory}
+        onValueChange={setActiveCategory}
+        className="flex-1 flex flex-col"
+      >
+        <div className="border-b border-border overflow-x-auto">
+          <TabsList className="h-10 w-full justify-start rounded-none bg-transparent p-0">
+            {Object.entries(NODE_CATEGORIES).map(([key, label]) => (
+              <TabsTrigger
+                key={key}
+                value={key}
+                className={cn(
+                  "h-10 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none",
+                )}
+              >
+                {label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+
+        <ScrollArea className="flex-1 p-4">
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
+            {filteredNodes.map((node) => (
+              <div key={node.id} className="flex items-center justify-center">
+                {node.component}
+              </div>
+            ))}
+            {filteredNodes.length === 0 && (
+              <div className="col-span-full flex items-center justify-center h-40 text-muted-foreground">
+                No nodes match your search
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </Tabs>
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { Tabs, TabsList, TabsTrigger } from "@/design-system/ui/tabs";
+import { Badge } from "@/design-system/ui/badge";
+
+interface WorkflowTabsProps {
+  activeTab: string;
+  onTabChange: (value: string) => void;
+  readinessAlertCount?: number;
+}
+
+export default function WorkflowTabs({
+  activeTab,
+  onTabChange,
+  readinessAlertCount = 0,
+}: WorkflowTabsProps) {
+  return (
+    <div className="border-b border-border">
+      <Tabs value={activeTab} onValueChange={onTabChange} className="w-full">
+        <TabsList className="h-9">
+          <TabsTrigger value="canvas" className="gap-1.5 text-sm px-3 py-1.5">
+            Editor
+          </TabsTrigger>
+          <TabsTrigger
+            value="execution"
+            className="gap-1.5 text-sm px-3 py-1.5"
+          >
+            Execution
+          </TabsTrigger>
+          <TabsTrigger value="trace" className="gap-1.5 text-sm px-3 py-1.5">
+            Trace
+          </TabsTrigger>
+          <TabsTrigger
+            value="readiness"
+            className="gap-1.5 text-sm px-3 py-1.5"
+          >
+            Readiness
+            {readinessAlertCount > 0 && (
+              <Badge variant="destructive" className="ml-1 text-xs px-1 py-0">
+                {readinessAlertCount}
+              </Badge>
+            )}
+          </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} />;
+};

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

@@ -0,0 +1,124 @@
+import type { ComponentPropsWithRef, ReactElement } from "react";
+
+import cn from "classnames";
+
+import type { ComponentSize } from "./shared";
+
+import { ROUNDED_CLASSES } from "./shared";
+
+type ButtonSize = Extract<
+  ComponentSize,
+  "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16"
+>;
+
+type ButtonVariant =
+  | "brand"
+  | "primary"
+  | "outlined"
+  | "secondary"
+  | "ghost"
+  | "destructive"
+  | "success";
+
+const BASE_CLASSES =
+  "inline-flex items-center justify-center font-medium transition-all duration-200";
+
+const sizeClasses = {
+  "6": "h-6 px-2 gap-1 text-xs",
+  "7": "h-7 px-2 gap-1 text-xs",
+  "8": "h-8 px-2 gap-1 text-xs",
+  "9": "h-9 px-2.5 gap-2 text-sm",
+  "10": "h-10 px-4 gap-2 text-sm",
+  "11": "h-11 px-5 gap-3 text-base",
+  "12": "h-12 px-5 gap-2.5 text-base",
+  "16": "h-16 px-7 gap-3 text-lg",
+};
+
+const variantClasses: Record<ButtonVariant, string> = {
+  brand: "text-agentprism-brand-foreground bg-agentprism-brand",
+  primary: "text-agentprism-primary-foreground bg-agentprism-primary",
+  outlined:
+    "border border bg-transparent text-agentprism-foreground border-agentprism-foreground",
+  secondary: "bg-agentprism-secondary text-agentprism-secondary-foreground",
+  ghost: "bg-transparent text-agentprism-foreground",
+  destructive: "bg-agentprism-error text-agentprism-primary-foreground",
+  success: "bg-agentprism-success text-agentprism-primary-foreground",
+};
+
+export type ButtonProps = ComponentPropsWithRef<"button"> & {
+  /**
+   * The size of the button
+   * @default "6"
+   */
+  size?: ButtonSize;
+
+  /**
+   * The border radius of the button
+   * @default "md"
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * The visual variant of the button
+   * @default "primary"
+   */
+  variant?: ButtonVariant;
+
+  /**
+   * Makes the button full width
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Optional icon to display at the start of the button
+   */
+  iconStart?: ReactElement;
+
+  /**
+   * Optional icon to display at the end of the button
+   */
+  iconEnd?: ReactElement;
+};
+
+export const Button = ({
+  children,
+  size = "6",
+  rounded = "md",
+  variant = "primary",
+  fullWidth = false,
+  disabled = false,
+  iconStart,
+  iconEnd,
+  type = "button",
+  onClick,
+  className = "",
+  ...rest
+}: ButtonProps) => {
+  const widthClass = fullWidth ? "w-full" : "";
+  const stateClasses = disabled
+    ? "cursor-not-allowed opacity-50"
+    : "hover:opacity-70";
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        BASE_CLASSES,
+        sizeClasses[size],
+        ROUNDED_CLASSES[rounded],
+        variantClasses[variant],
+        widthClass,
+        stateClasses,
+        className,
+      )}
+      {...rest}
+    >
+      {iconStart && <span className="mr-1">{iconStart}</span>}
+      {children}
+      {iconEnd && <span className="ml-1">{iconEnd}</span>}
+    </button>
+  );
+};

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

@@ -0,0 +1,45 @@
+import type { ComponentPropsWithRef } from "react";
+
+import { ChevronsUpDown, ChevronsDownUp } from "lucide-react";
+
+import { IconButton } from "./IconButton";
+
+export type SpanCardExpandAllButtonProps = ComponentPropsWithRef<"button"> & {
+  onExpandAll: () => void;
+};
+
+export type SpanCardCollapseAllButtonProps = ComponentPropsWithRef<"button"> & {
+  onCollapseAll: () => void;
+};
+
+export const ExpandAllButton = ({
+  onExpandAll,
+  ...rest
+}: SpanCardExpandAllButtonProps) => {
+  return (
+    <IconButton
+      size="6"
+      onClick={onExpandAll}
+      aria-label="Expand all"
+      {...rest}
+    >
+      <ChevronsUpDown className="size-3.5" />
+    </IconButton>
+  );
+};
+
+export const CollapseAllButton = ({
+  onCollapseAll,
+  ...rest
+}: SpanCardCollapseAllButtonProps) => {
+  return (
+    <IconButton
+      size="6"
+      onClick={onCollapseAll}
+      aria-label="Collapse all"
+      {...rest}
+    >
+      <ChevronsDownUp className="size-3.5" />
+    </IconButton>
+  );
+};