orcheo-studio 0.21.1

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

@@ -0,0 +1,73 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import { flattenSpans, findTimeRange } from "@evilmartians/agent-prism-data";
+import cn from "classnames";
+import { type FC } from "react";
+
+import type { SpanCardViewOptions } from "./SpanCard/SpanCard";
+
+import { BrandLogo } from "./BrandLogo";
+import { SpanCard } from "./SpanCard/SpanCard";
+
+interface TreeViewProps {
+  spans: TraceSpan[];
+  className?: string;
+  selectedSpan?: TraceSpan;
+  onSpanSelect?: (span: TraceSpan) => void;
+  expandedSpansIds: string[];
+  onExpandSpansIdsChange: (ids: string[]) => void;
+  spanCardViewOptions?: SpanCardViewOptions;
+}
+
+export const TreeView: FC<TreeViewProps> = ({
+  spans,
+  onSpanSelect,
+  className = "",
+  selectedSpan,
+  expandedSpansIds,
+  onExpandSpansIdsChange,
+  spanCardViewOptions,
+}) => {
+  const allCards = flattenSpans(spans);
+  const { minStart, maxEnd } = findTimeRange(allCards);
+
+  return (
+    <div className="w-full min-w-0 px-4">
+      <ul
+        className={cn(className, "overflow-x-auto pt-2")}
+        role="tree"
+        aria-label="Hierarchical card list"
+      >
+        {spans.map((span, idx) => {
+          const brand = span.metadata?.brand as { type: string } | undefined;
+
+          return (
+            <SpanCard
+              key={span.id}
+              data={span}
+              level={0}
+              selectedSpan={selectedSpan}
+              onSpanSelect={onSpanSelect}
+              minStart={minStart}
+              maxEnd={maxEnd}
+              isLastChild={idx === spans.length - 1}
+              expandedSpansIds={expandedSpansIds}
+              onExpandSpansIdsChange={onExpandSpansIdsChange}
+              viewOptions={spanCardViewOptions}
+              avatar={
+                brand
+                  ? {
+                      children: <BrandLogo brand={brand.type} />,
+                      size: "4",
+                      rounded: "sm",
+                      category: span.type,
+                    }
+                  : undefined
+              }
+            />
+          );
+        })}
+      </ul>
+    </div>
+  );
+};

package/src/features/workflow/components/trace/agent-prism/index.ts

@@ -0,0 +1,7 @@
+export { TraceViewer } from "./TraceViewer/TraceViewer";
+export type { TraceViewerData } from "./TraceViewer/TraceViewer";
+export type { TraceRecordWithDisplayData } from "./TraceViewer/TraceViewer";
+export type { TraceViewerProps } from "./TraceViewer/TraceViewer";
+export type { TraceViewerLayoutProps } from "./TraceViewer/TraceViewer";
+export { agentPrismTailwindColors, agentPrismPrefix } from "./theme";
+export type { AgentPrismColors, AgentPrismToken } from "./theme";

package/src/features/workflow/components/trace/agent-prism/shared.ts

@@ -0,0 +1,170 @@
+import type { TraceSpanCategory } from "@evilmartians/agent-prism-types";
+import type { LucideIcon } from "lucide-react";
+
+import {
+  Zap,
+  Wrench,
+  Bot,
+  Link,
+  Search,
+  BarChart2,
+  Plus,
+  HelpCircle,
+  MoveHorizontal,
+  CircleDot,
+  ShieldCheck,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+// TYPES
+
+export type ColorVariant =
+  | "purple"
+  | "indigo"
+  | "orange"
+  | "teal"
+  | "cyan"
+  | "sky"
+  | "yellow"
+  | "emerald"
+  | "red"
+  | "gray";
+
+export type ComponentSize =
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "10"
+  | "11"
+  | "12"
+  | "16";
+
+// CONSTANTS
+
+export const ROUNDED_CLASSES = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full",
+};
+
+/**
+ * Shared configuration for span categories containing label, theme, and icon
+ */
+export const SPAN_CATEGORY_CONFIG: Record<
+  TraceSpanCategory,
+  {
+    label: string;
+    theme: ColorVariant;
+    icon: LucideIcon;
+  }
+> = {
+  llm_call: {
+    label: "LLM",
+    theme: "purple",
+    icon: Zap,
+  },
+  tool_execution: {
+    label: "TOOL",
+    theme: "orange",
+    icon: Wrench,
+  },
+  agent_invocation: {
+    label: "AGENT INVOCATION",
+    theme: "indigo",
+    icon: Bot,
+  },
+  chain_operation: {
+    label: "CHAIN",
+    theme: "teal",
+    icon: Link,
+  },
+  retrieval: {
+    label: "RETRIEVAL",
+    theme: "cyan",
+    icon: Search,
+  },
+  embedding: {
+    label: "EMBEDDING",
+    theme: "emerald",
+    icon: BarChart2,
+  },
+  create_agent: {
+    label: "CREATE AGENT",
+    theme: "sky",
+    icon: Plus,
+  },
+  span: {
+    label: "SPAN",
+    theme: "cyan",
+    icon: MoveHorizontal,
+  },
+  event: {
+    label: "EVENT",
+    theme: "emerald",
+    icon: CircleDot,
+  },
+  guardrail: {
+    label: "GUARDRAIL",
+    theme: "red",
+    icon: ShieldCheck,
+  },
+  unknown: {
+    label: "UNKNOWN",
+    theme: "gray",
+    icon: HelpCircle,
+  },
+};
+
+// UTILS
+
+export function getSpanCategoryTheme(
+  category: TraceSpanCategory,
+): ColorVariant {
+  return SPAN_CATEGORY_CONFIG[category].theme;
+}
+
+export function getSpanCategoryLabel(category: TraceSpanCategory): string {
+  return SPAN_CATEGORY_CONFIG[category].label;
+}
+
+export function getSpanCategoryIcon(category: TraceSpanCategory): LucideIcon {
+  return SPAN_CATEGORY_CONFIG[category].icon;
+}
+
+export const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+
+    // Bail out in SSR/Node-style environments where window isn't available.
+    if (
+      typeof window === "undefined" ||
+      typeof window.matchMedia !== "function"
+    ) {
+      setIsMobile(false);
+      return;
+    }
+
+    // TODO: replace with something more beautiful and correct (tailwind screens?)
+    const mediaQuery = window.matchMedia("(max-width: 1023px)");
+
+    const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
+      setIsMobile(e.matches);
+    };
+
+    handleChange(mediaQuery);
+
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  return mounted ? isMobile : false;
+};

package/src/features/workflow/components/trace/agent-prism/theme/index.ts

@@ -0,0 +1,101 @@
+export const agentPrismPrefix = "agentprism";
+
+export const AGENT_PRISM_TOKENS = [
+  "background",
+  "foreground",
+  "primary",
+  "primary-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "brand",
+  "brand-foreground",
+  "brand-secondary",
+  "brand-secondary-foreground",
+  "border",
+  "border-subtle",
+  "border-strong",
+  "border-inverse",
+  "success",
+  "success-muted",
+  "success-muted-foreground",
+  "error",
+  "error-muted",
+  "error-muted-foreground",
+  "warning",
+  "warning-muted",
+  "warning-muted-foreground",
+  "pending",
+  "pending-muted",
+  "pending-muted-foreground",
+  "code-string",
+  "code-number",
+  "code-key",
+  "code-base",
+  "badge-default",
+  "badge-default-foreground",
+  "avatar-llm",
+  "badge-llm",
+  "badge-llm-foreground",
+  "timeline-llm",
+  "avatar-agent",
+  "badge-agent",
+  "badge-agent-foreground",
+  "timeline-agent",
+  "avatar-tool",
+  "badge-tool",
+  "badge-tool-foreground",
+  "timeline-tool",
+  "avatar-chain",
+  "badge-chain",
+  "badge-chain-foreground",
+  "timeline-chain",
+  "avatar-retrieval",
+  "badge-retrieval",
+  "badge-retrieval-foreground",
+  "timeline-retrieval",
+  "avatar-embedding",
+  "badge-embedding",
+  "badge-embedding-foreground",
+  "timeline-embedding",
+  "avatar-guardrail",
+  "badge-guardrail",
+  "badge-guardrail-foreground",
+  "timeline-guardrail",
+  "avatar-create-agent",
+  "badge-create-agent",
+  "badge-create-agent-foreground",
+  "timeline-create-agent",
+  "avatar-span",
+  "badge-span",
+  "badge-span-foreground",
+  "timeline-span",
+  "avatar-event",
+  "badge-event",
+  "badge-event-foreground",
+  "timeline-event",
+  "avatar-unknown",
+  "badge-unknown",
+  "badge-unknown-foreground",
+  "timeline-unknown",
+] as const;
+
+export type AgentPrismToken = (typeof AGENT_PRISM_TOKENS)[number];
+
+export type AgentPrismColors = Record<AgentPrismToken, string>;
+
+export const agentPrismTailwindColors = Object.fromEntries(
+  AGENT_PRISM_TOKENS.map((tokenName) => [
+    `agentprism-${tokenName}`,
+    token(tokenName),
+  ]),
+) as AgentPrismColors;
+
+function token(name: string) {
+  return `oklch(var(--${agentPrismPrefix}-${name}) / <alpha-value>)`;
+}

package/src/features/workflow/components/trace/agent-prism/theme/theme.css

@@ -0,0 +1,247 @@
+:root {
+  /* General purpose colors */
+  --agentprism-background: 1 0 0; /* white */
+  --agentprism-foreground: 21% 0.034 264.665; /* gray.900 */
+  --agentprism-primary: 21% 0.034 264.665; /* gray.900 */
+  --agentprism-primary-foreground: 98.5% 0.002 247.839; /* gray.50 */
+  --agentprism-primary: 21% 0.034 264.665; /* gray.900 */
+  --agentprism-primary-foreground: 98.5% 0.002 247.839; /* gray.50 */
+  --agentprism-secondary: 96.7% 0.003 264.542; /* gray.100 */
+  --agentprism-secondary-foreground: 55.1% 0.027 264.364; /* gray.500 */
+  --agentprism-muted: 98.5% 0.002 247.839; /* gray.50 */
+  --agentprism-muted-foreground: 44.6% 0.03 256.802; /* gray.600 */
+  --agentprism-accent: 96.7% 0.003 264.542; /* gray.100 */
+  --agentprism-accent-foreground: 96.7% 0.003 264.542; /* gray.100 */
+
+  /* Brand colors */
+  --agentprism-brand: 60.6% 0.25 292.717; /* violet.500 */
+  --agentprism-brand-foreground: 1 0 0; /* white */
+  --agentprism-brand-secondary: 70.5% 0.213 47.604; /* orange.500 */
+  --agentprism-brand-secondary-foreground: 1 0 0; /* white */
+
+  /* Borders */
+  --agentprism-border: 92.8% 0.006 264.531; /* gray.200 */
+  --agentprism-border-subtle: 96.7% 0.003 264.542; /* gray.100 */
+  --agentprism-border-strong: 87.2% 0.01 258.338; /* gray.300 */
+  --agentprism-border-inverse: 21% 0.034 264.665; /* gray.900 */
+
+  /* Success status color */
+  --agentprism-success: 69.6% 0.17 162.48; /* emerald.500 */
+  --agentprism-success-muted: 97.9% 0.021 166.113; /* emerald.50 */
+  --agentprism-success-muted-foreground: 50.8% 0.118 165.612; /* emerald.700 */
+
+  /* Error status color */
+  --agentprism-error: 63.7% 0.237 25.331; /* red.500 */
+  --agentprism-error-muted: 97.1% 0.013 17.38; /* red.50 */
+  --agentprism-error-muted-foreground: 57.7% 0.245 27.325; /* red.600 */
+
+  /* Warning status color */
+  --agentprism-warning: 79.5% 0.184 86.047; /* yellow.500 */
+  --agentprism-warning-muted: 98.7% 0.026 102.212; /* yellow.50 */
+  --agentprism-warning-muted-foreground: 55.4% 0.135 66.442; /* yellow.700 */
+
+  /* Pending status color */
+  --agentprism-pending: 60.6% 0.25 292.717; /* violet.500 */
+  --agentprism-pending-muted: 94.3% 0.029 294.588; /* violet.100 */
+  --agentprism-pending-muted-foreground: 54.1% 0.281 293.009; /* violet.600 */
+
+  /* Code syntax highlighting */
+  --agentprism-code-string: 57.7% 0.245 27.325; /* red.600 */
+  --agentprism-code-number: 57.7% 0.245 27.325; /* red.600 */
+  --agentprism-code-key: 54.6% 0.245 262.881; /* blue.600 */
+  --agentprism-code-base: 55.1% 0.027 264.364; /* gray.500 */
+
+  /* Generic badge colors */
+  --agentprism-badge-default: 96.7% 0.003 264.542; /* gray.100 */
+  --agentprism-badge-default-foreground: 44.6% 0.03 256.802; /* gray.600 */
+
+  /* Trace colors (llm) */
+  --agentprism-avatar-llm: 62.7% 0.265 303.9; /* purple.500 */
+  --agentprism-badge-llm: 97.7% 0.014 308.299; /* purple.50 */
+  --agentprism-badge-llm-foreground: 62.7% 0.265 303.9; /* purple.500 */
+  --agentprism-timeline-llm: 71.4% 0.203 305.504; /* purple.400 */
+
+  /* Trace colors (agent) */
+  --agentprism-avatar-agent: 58.5% 0.233 277.117; /* indigo.500 */
+  --agentprism-badge-agent: 96.2% 0.018 272.314; /* indigo.50 */
+  --agentprism-badge-agent-foreground: 58.5% 0.233 277.117; /* indigo.500 */
+  --agentprism-timeline-agent: 67.3% 0.182 276.935; /* indigo.400 */
+
+  /* Trace colors (tool) */
+  --agentprism-avatar-tool: 70.5% 0.213 47.604; /* orange.500 */
+  --agentprism-badge-tool: 98% 0.016 73.684; /* orange.50 */
+  --agentprism-badge-tool-foreground: 70.5% 0.213 47.604; /* orange.500 */
+  --agentprism-timeline-tool: 75% 0.183 55.934; /* orange.400 */
+
+  /* Trace colors (chain) */
+  --agentprism-avatar-chain: 70.4% 0.14 182.503; /* teal.500 */
+  --agentprism-badge-chain: 98.4% 0.014 180.72; /* teal.50 */
+  --agentprism-badge-chain-foreground: 70.4% 0.14 182.503; /* teal.500 */
+  --agentprism-timeline-chain: 77.7% 0.152 181.912; /* teal.400 */
+
+  /* Trace colors (retrieval) */
+  --agentprism-avatar-retrieval: 71.5% 0.143 215.221; /* cyan.500 */
+  --agentprism-badge-retrieval: 98.4% 0.019 200.873; /* cyan.50 */
+  --agentprism-badge-retrieval-foreground: 71.5% 0.143 215.221; /* cyan.500 */
+  --agentprism-timeline-retrieval: 78.9% 0.154 211.53; /* cyan.400 */
+
+  /* Trace colors (embedding) */
+  --agentprism-avatar-embedding: 69.6% 0.17 162.48; /* emerald.500 */
+  --agentprism-badge-embedding: 97.9% 0.021 166.113; /* emerald.50 */
+  --agentprism-badge-embedding-foreground: 69.6% 0.17 162.48; /* emerald.500 */
+  --agentprism-timeline-embedding: 76.5% 0.177 163.223; /* emerald.400 */
+
+  /* Trace colors (guardrail) */
+  --agentprism-avatar-guardrail: 63.7% 0.237 25.331; /* red.500 */
+  --agentprism-badge-guardrail: 97.1% 0.013 17.38; /* red.50 */
+  --agentprism-badge-guardrail-foreground: 63.7% 0.237 25.331; /* red.500 */
+  --agentprism-timeline-guardrail: 70.4% 0.191 22.216; /* red.400 */
+
+  /* Trace colors (create agent) */
+  --agentprism-avatar-create-agent: 68.5% 0.169 237.323; /* sky.500 */
+  --agentprism-badge-create-agent: 97.7% 0.013 236.62; /* sky.50 */
+  --agentprism-badge-create-agent-foreground: 68.5% 0.169 237.323; /* sky.500 */
+  --agentprism-timeline-create-agent: 74.6% 0.16 232.661; /* sky.400 */
+
+  /* Trace colors (span) */
+  --agentprism-avatar-span: 71.5% 0.143 215.221; /* cyan.500 */
+  --agentprism-badge-span: 98.4% 0.019 200.873; /* cyan.50 */
+  --agentprism-badge-span-foreground: 71.5% 0.143 215.221; /* cyan.500 */
+  --agentprism-timeline-span: 78.9% 0.154 211.53; /* cyan.400 */
+
+  /* Trace colors (event) */
+  --agentprism-avatar-event: 69.6% 0.17 162.48; /* emerald.500 */
+  --agentprism-badge-event: 97.9% 0.021 166.113; /* emerald.50 */
+  --agentprism-badge-event-foreground: 69.6% 0.17 162.48; /* emerald.500 */
+  --agentprism-timeline-event: 76.5% 0.177 163.223; /* emerald.400 */
+
+  /* Trace colors (unknown) */
+  --agentprism-avatar-unknown: 55.1% 0.027 264.364; /* gray.500 */
+  --agentprism-badge-unknown: 98.5% 0.002 247.839; /* gray.50 */
+  --agentprism-badge-unknown-foreground: 55.1% 0.027 264.364; /* gray.500 */
+  --agentprism-timeline-unknown: 70.7% 0.022 261.325; /* gray.400 */
+}
+
+.dark {
+  /* General purpose colors */
+  --agentprism-background: 4% 0 0; /* align with workflow dark background */
+  --agentprism-foreground: 96.7% 0.003 264.542; /* gray.100 */
+  --agentprism-primary: 96.7% 0.003 264.542; /* gray.100 */
+  --agentprism-primary-foreground: 13% 0.028 261.692; /* gray.950 */
+  --agentprism-primary: 96.7% 0.003 264.542; /* gray.100 */
+  --agentprism-primary-foreground: 13% 0.028 261.692; /* gray.950 */
+  --agentprism-secondary: 27.8% 0.033 256.848; /* gray.800 */
+  --agentprism-secondary-foreground: 55.1% 0.027 264.364; /* gray.500 */
+  --agentprism-muted: 21% 0.034 264.665; /* gray.900 */
+  --agentprism-muted-foreground: 70.7% 0.022 261.325; /* gray.400 */
+  --agentprism-accent: 96.7% 0.003 264.542; /* gray.100 */
+  --agentprism-accent-foreground: 21% 0.034 264.665; /* gray.900 */
+
+  /* Brand colors */
+  --agentprism-brand: 60.6% 0.25 292.717; /* violet.500 */
+  --agentprism-brand-foreground: 1 0 0; /* white */
+  --agentprism-brand-secondary: 70.5% 0.213 47.604; /* orange.500 */
+  --agentprism-brand-secondary-foreground: 1 0 0; /* white */
+
+  /* Borders */
+  --agentprism-border: 44.6% 0.03 256.802; /* gray.600 */
+  --agentprism-border-subtle: 37.3% 0.034 259.733; /* gray.700 */
+  --agentprism-border-strong: 55.1% 0.027 264.364; /* gray.500 */
+  --agentprism-border-inverse: 92.8% 0.006 264.531; /* gray.200 */
+
+  /* Success status color */
+  --agentprism-success: 72.3% 0.219 149.579; /* green.500 */
+  --agentprism-success-muted: 26.6% 0.065 152.934; /* green.950 */
+  --agentprism-success-muted-foreground: 87.1% 0.15 154.449; /* green.300 */
+
+  /* Error status color */
+  --agentprism-error: 63.7% 0.237 25.331; /* red.500 */
+  --agentprism-error-muted: 25.8% 0.092 26.042; /* red.950 */
+  --agentprism-error-muted-foreground: 80.8% 0.114 19.571; /* red.300 */
+
+  /* Warning status color */
+  --agentprism-warning: 79.5% 0.184 86.047; /* yellow.500 */
+  --agentprism-warning-muted: 28.6% 0.066 53.813; /* yellow.950 */
+  --agentprism-warning-muted-foreground: 90.5% 0.182 98.111; /* yellow.300 */
+
+  /* Pending status color */
+  --agentprism-pending: 60.6% 0.25 292.717; /* violet.500 */
+  --agentprism-pending-muted: 28.3% 0.141 291.089; /* violet.950 */
+  --agentprism-pending-muted-foreground: 70.2% 0.183 293.541; /* violet.400 */
+
+  /* Code syntax highlighting */
+  --agentprism-code-string: 70.4% 0.191 22.216; /* red.400 */
+  --agentprism-code-number: 70.4% 0.191 22.216; /* red.400 */
+  --agentprism-code-key: 80.9% 0.105 251.813; /* blue.300 */
+  --agentprism-code-base: 70.7% 0.022 261.325; /* gray.400 */
+
+  /* Generic badge colors */
+  --agentprism-badge-default: 21% 0.034 264.665; /* gray.900 */
+  --agentprism-badge-default-foreground: 70.7% 0.022 261.325; /* gray.400 */
+
+  /* Trace colors (llm) */
+  --agentprism-avatar-llm: 82.7% 0.119 306.383; /* purple.300 */
+  --agentprism-badge-llm: 29.1% 0.149 302.717; /* purple.950 */
+  --agentprism-badge-llm-foreground: 82.7% 0.119 306.383; /* purple.300 */
+  --agentprism-timeline-llm: 71.4% 0.203 305.504; /* purple.400 */
+
+  /* Trace colors (agent) */
+  --agentprism-avatar-agent: 78.5% 0.115 274.713; /* indigo.300 */
+  --agentprism-badge-agent: 25.7% 0.09 281.288; /* indigo.950 */
+  --agentprism-badge-agent-foreground: 78.5% 0.115 274.713; /* indigo.300 */
+  --agentprism-timeline-agent: 67.3% 0.182 276.935; /* indigo.400 */
+
+  /* Trace colors (tool) */
+  --agentprism-avatar-tool: 83.7% 0.128 66.29; /* orange.300 */
+  --agentprism-badge-tool: 26.6% 0.079 36.259; /* orange.950 */
+  --agentprism-badge-tool-foreground: 83.7% 0.128 66.29; /* orange.300 */
+  --agentprism-timeline-tool: 75% 0.183 55.934; /* orange.400 */
+
+  /* Trace colors (chain) */
+  --agentprism-avatar-chain: 85.5% 0.138 181.071; /* teal.300 */
+  --agentprism-badge-chain: 27.7% 0.046 192.524; /* teal.950 */
+  --agentprism-badge-chain-foreground: 85.5% 0.138 181.071; /* teal.300 */
+  --agentprism-timeline-chain: 77.7% 0.152 181.912; /* teal.400 */
+
+  /* Trace colors (retrieval) */
+  --agentprism-avatar-retrieval: 86.5% 0.127 207.078; /* cyan.300 */
+  --agentprism-badge-retrieval: 30.2% 0.056 229.695; /* cyan.950 */
+  --agentprism-badge-retrieval-foreground: 86.5% 0.127 207.078; /* cyan.300 */
+  --agentprism-timeline-retrieval: 78.9% 0.154 211.53; /* cyan.400 */
+
+  /* Trace colors (embedding) */
+  --agentprism-avatar-embedding: 84.5% 0.143 164.978; /* emerald.300 */
+  --agentprism-badge-embedding: 26.2% 0.051 172.552; /* emerald.950 */
+  --agentprism-badge-embedding-foreground: 84.5% 0.143 164.978; /* emerald.300 */
+  --agentprism-timeline-embedding: 76.5% 0.177 163.223; /* emerald.400 */
+
+  /* Trace colors (guardrail) */
+  --agentprism-avatar-guardrail: 80.8% 0.114 19.571; /* red.300 */
+  --agentprism-badge-guardrail: 25.8% 0.092 26.042; /* red.950 */
+  --agentprism-badge-guardrail-foreground: 80.8% 0.114 19.571; /* red.300 */
+  --agentprism-timeline-guardrail: 70.4% 0.191 22.216; /* red.400 */
+
+  /* Trace colors (create agent) */
+  --agentprism-avatar-create-agent: 82.8% 0.111 230.318; /* sky.300 */
+  --agentprism-badge-create-agent: 29.3% 0.066 243.157; /* sky.950 */
+  --agentprism-badge-create-agent-foreground: 82.8% 0.111 230.318; /* sky.300 */
+  --agentprism-timeline-create-agent: 74.6% 0.16 232.661; /* sky.400 */
+
+  /* Trace colors (span) */
+  --agentprism-avatar-span: 86.5% 0.127 207.078; /* cyan.300 */
+  --agentprism-badge-span: 30.2% 0.056 229.695; /* cyan.950 */
+  --agentprism-badge-span-foreground: 86.5% 0.127 207.078; /* cyan.300 */
+  --agentprism-timeline-span: 78.9% 0.154 211.53; /* cyan.400 */
+
+  /* Trace colors (event) */
+  --agentprism-avatar-event: 84.5% 0.143 164.978; /* emerald.300 */
+  --agentprism-badge-event: 26.2% 0.051 172.552; /* emerald.950 */
+  --agentprism-badge-event-foreground: 84.5% 0.143 164.978; /* emerald.300 */
+  --agentprism-timeline-event: 76.5% 0.177 163.223; /* emerald.400 */
+
+  /* Trace colors (unknown) */
+  --agentprism-avatar-unknown: 87.2% 0.01 258.338; /* gray.300 */
+  --agentprism-badge-unknown: 13% 0.028 261.692; /* gray.950 */
+  --agentprism-badge-unknown-foreground: 87.2% 0.01 258.338; /* gray.300 */
+  --agentprism-timeline-unknown: 70.7% 0.022 261.325; /* gray.400 */
+}

package/src/features/workflow/data/templates/assets/vibe-agent/config.json

@@ -0,0 +1,5 @@
+{
+  "configurable": {
+    "working_directory": "/workspace/agents"
+  }
+}