ai-design-system 0.1.72 → 0.1.74

package/components/ai-elements/file-tree.tsx

@@ -142,19 +142,13 @@ export const FileTreeFolder = ({
   children,
   ...props
 }: FileTreeFolderProps) => {
-  const { expandedPaths, togglePath, selectedPath, onSelect } =
-    useContext(FileTreeContext);
+  const { expandedPaths, togglePath } = useContext(FileTreeContext);
   const isExpanded = expandedPaths.has(path);
-  const isSelected = selectedPath === path;
 
   const handleOpenChange = useCallback(() => {
     togglePath(path);
   }, [togglePath, path]);
 
-  const handleSelect = useCallback(() => {
-    onSelect?.(path);
-  }, [onSelect, path]);
-
   const folderContextValue = useMemo(
     () => ({ isExpanded, name, path }),
     [isExpanded, name, path]
@@ -169,30 +163,16 @@ export const FileTreeFolder = ({
           tabIndex={0}
           {...props}
         >
-          <div
-            className={cn(
-              "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
-              isSelected && "bg-muted"
-            )}
-          >
-            <CollapsibleTrigger asChild>
-              <button
-                className="flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0"
-                type="button"
-              >
-                <ChevronRightIcon
-                  className={cn(
-                    "size-4 shrink-0 text-muted-foreground transition-transform",
-                    isExpanded && "rotate-90"
-                  )}
-                />
-              </button>
-            </CollapsibleTrigger>
-            <button
-              className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left"
-              onClick={handleSelect}
-              type="button"
+          <CollapsibleTrigger asChild>
+            <div
+              className="flex w-full cursor-pointer items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50 select-none"
             >
+              <ChevronRightIcon
+                className={cn(
+                  "size-4 shrink-0 text-muted-foreground transition-transform",
+                  isExpanded && "rotate-90"
+                )}
+              />
               <FileTreeIcon>
                 {isExpanded ? (
                   <FolderOpenIcon className="size-4 text-blue-500" />
@@ -201,8 +181,8 @@ export const FileTreeFolder = ({
                 )}
               </FileTreeIcon>
               <FileTreeName>{name}</FileTreeName>
-            </button>
-          </div>
+            </div>
+          </CollapsibleTrigger>
           <CollapsibleContent>
             <div className="ml-4 border-l pl-2">{children}</div>
           </CollapsibleContent>

package/components/ai-elements/node.tsx

@@ -23,7 +23,7 @@ export type NodeProps = ComponentProps<typeof Card> & {
 export const Node = ({ handles, className, status, ...props }: NodeProps) => (
   <Card
     className={cn(
-      "node-container relative h-[52px] w-[180px] gap-0 overflow-hidden rounded-md bg-card p-0 transition-all duration-200",
+      "node-container group relative h-[52px] w-[180px] gap-0 overflow-hidden rounded-md bg-card p-0 transition-all duration-200",
       status === "success" && "border-green-500 border-2",
       status === "error" && "border-red-500 border-2",
       className
@@ -33,18 +33,18 @@ export const Node = ({ handles, className, status, ...props }: NodeProps) => (
     {status === "running" && <AnimatedBorder />}
     {handles.target && (
       <>
-        <Handle id="target-top"    position={Position.Top}    type="target" />
-        <Handle id="target-right"  position={Position.Right}  type="target" />
-        <Handle id="target-bottom" position={Position.Bottom} type="target" />
-        <Handle id="target-left"   position={Position.Left}   type="target" />
+        <Handle id="target-top"    position={Position.Top}    type="target" className="opacity-0 group-hover:opacity-100 group-[.selected]:opacity-100 transition-opacity duration-150" />
+        <Handle id="target-right"  position={Position.Right}  type="target" className="opacity-0 group-hover:opacity-100 group-[.selected]:opacity-100 transition-opacity duration-150" />
+        <Handle id="target-bottom" position={Position.Bottom} type="target" className="opacity-0 group-hover:opacity-100 group-[.selected]:opacity-100 transition-opacity duration-150" />
+        <Handle id="target-left"   position={Position.Left}   type="target" className="opacity-0 group-hover:opacity-100 group-[.selected]:opacity-100 transition-opacity duration-150" />
       </>
     )}
     {handles.source && (
       <>
-        <Handle id="source-top"    position={Position.Top}    type="source" />
-        <Handle id="source-right"  position={Position.Right}  type="source" />
-        <Handle id="source-bottom" position={Position.Bottom} type="source" />
-        <Handle id="source-left"   position={Position.Left}   type="source" />
+        <Handle id="source-top"    position={Position.Top}    type="source" className="opacity-0 group-hover:opacity-100 group-[.selected]:opacity-100 transition-opacity duration-150" />
+        <Handle id="source-right"  position={Position.Right}  type="source" className="opacity-0 group-hover:opacity-100 group-[.selected]:opacity-100 transition-opacity duration-150" />
+        <Handle id="source-bottom" position={Position.Bottom} type="source" className="opacity-0 group-hover:opacity-100 group-[.selected]:opacity-100 transition-opacity duration-150" />
+        <Handle id="source-left"   position={Position.Left}   type="source" className="opacity-0 group-hover:opacity-100 group-[.selected]:opacity-100 transition-opacity duration-150" />
       </>
     )}
     {props.children}
@@ -88,3 +88,35 @@ export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
     {...props}
   />
 );
+
+export function getHighlightIconColor(
+  status?: string,
+  highlightStatus?: string,
+  defaultColorClass: string = "text-primary"
+): string {
+  const effectiveHighlight =
+    highlightStatus ??
+    (status === "success" || status === "completed" || status === "done"
+      ? "done"
+      : status === "pending_hitl" || status === "pending"
+      ? "pending"
+      : status === "running" || status === "active"
+      ? "active"
+      : status === "error" || status === "failed"
+      ? "error"
+      : undefined);
+
+  switch (effectiveHighlight) {
+    case "done":
+      return "text-green-500";
+    case "pending":
+      return "text-amber-500";
+    case "active":
+      return "text-indigo-400";
+    case "error":
+      return "text-red-500";
+    default:
+      return defaultColorClass;
+  }
+}
+

package/components/ai-elements/prompt-input.tsx

@@ -963,22 +963,26 @@ export const PromptInputSubmit = ({
   ...props
 }: PromptInputSubmitProps) => {
   let Icon = <SendIcon className="size-4" />;
+  let buttonVariant = variant;
+  let customClass = className;
 
   if (status === "submitted") {
     Icon = <Loader2Icon className="size-4 animate-spin" />;
   } else if (status === "streaming") {
-    Icon = <SquareIcon className="size-4" />;
+    Icon = <SquareIcon className="size-3.5 fill-white text-white" />;
+    buttonVariant = "outline-primary";
+    customClass = cn("rounded-full", className);
   } else if (status === "error") {
     Icon = <XIcon className="size-4" />;
   }
 
   return (
     <InputGroupButton
-      aria-label="Submit"
-      className={cn(className)}
+      aria-label={status === "streaming" ? "Stop" : "Submit"}
+      className={customClass}
       size={size}
       type="submit"
-      variant={variant}
+      variant={buttonVariant}
       {...props}
     >
       {children ?? Icon}

package/components/ai-elements/tool.tsx

@@ -36,6 +36,8 @@ import type { ComponentProps, ReactNode } from "react";
 import { isValidElement } from "react";
 import { CodeBlock } from "./code-block";
 
+import { Shimmer } from "@/components/ai-elements/shimmer";
+
 export type ToolProps = ComponentProps<typeof Collapsible>;
 
 export const Tool = ({ className, ...props }: ToolProps) => (
@@ -65,7 +67,7 @@ const getStatusBadge = (status: ToolUIPart["state"]) => {
 
   const icons: Record<ToolUIPart["state"], ReactNode> = {
     "input-streaming": <CircleIcon className="size-4" />,
-    "input-available": <ClockIcon className="size-4 animate-pulse" />,
+    "input-available": <ClockIcon className="size-4 animate-spin text-primary" />,
     "approval-requested": <ClockIcon className="size-4 text-yellow-600" />,
     "approval-responded": <CheckCircleIcon className="size-4 text-blue-600" />,
     "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
@@ -73,10 +75,22 @@ const getStatusBadge = (status: ToolUIPart["state"]) => {
     "output-denied": <XCircleIcon className="size-4 text-orange-600" />,
   };
 
+  const isRunning = status === "input-available";
+
   return (
-    <Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
+    <Badge
+      className={cn(
+        "gap-1.5 rounded-full text-xs font-medium transition-all relative overflow-hidden",
+        isRunning && "border border-primary/30 bg-primary/10 text-primary shadow-xs"
+      )}
+      variant={isRunning ? "outline" : "secondary"}
+    >
       {icons[status]}
-      {labels[status]}
+      {isRunning ? (
+        <Shimmer className="text-xs font-medium text-foreground inline-block">Running</Shimmer>
+      ) : (
+        labels[status]
+      )}
     </Badge>
   );
 };

package/components/blocks/AIConversation/AIConversation.tsx

@@ -10,6 +10,7 @@ import type { ToolCall, SubAgent } from "@/components/composites"
 import { UserMessage } from "@/components/composites/UserMessage"
 import { SpecialistMessage } from "@/components/composites/SpecialistMessage"
 import { OrchestratorMessage } from "@/components/composites/OrchestratorMessage"
+import { SystemMessage } from "@/components/composites/SystemMessage"
 import { ToolCallDisplay } from "@/components/composites/ToolCallDisplay"
 import { ReasoningDisplay } from "@/components/composites/ReasoningDisplay"
 
@@ -71,6 +72,11 @@ export interface AIConversationProps
    * Callback fired when a tool action (like a link click) is triggered
    */
   onToolAction?: (toolCall: ToolCall, action: string) => void
+  /**
+   * Custom renderer for system messages.
+   * Receives the raw content string and returns a ReactNode.
+   */
+  renderSystemMessage?: (content: string) => React.ReactNode
 }
 
 /**
@@ -84,6 +90,7 @@ export const AIConversation = React.memo<AIConversationProps>(
     selectedSubAgent,
     emptyState,
     onToolAction,
+    renderSystemMessage,
     ...conversationProps
   }) => {
     const isEmpty = React.useMemo(
@@ -117,6 +124,15 @@ export const AIConversation = React.memo<AIConversationProps>(
             (!msg.toolCalls || msg.toolCalls.length === 0) &&
             (!msg.subAgents || msg.subAgents.length === 0);
 
+          const currentGroupHasTools =
+            currentGroup &&
+            ((currentGroup.toolCalls && currentGroup.toolCalls.length > 0) ||
+              (currentGroup.subAgents && currentGroup.subAgents.length > 0));
+
+          if (currentGroupHasTools && isFinalResponse) {
+            currentGroup = null;
+          }
+
           if (currentGroup) {
             if (msg.content) {
               currentGroup.content = currentGroup.content
@@ -221,6 +237,23 @@ export const AIConversation = React.memo<AIConversationProps>(
           const contentStr = toMessageString(message.content)
 
           // Render based on role field
+          if (message.role === "system") {
+            if (!contentStr || !contentStr.trim()) {
+              return null;
+            }
+            return (
+              <SystemMessage
+                key={message.id}
+                message={{
+                  id: message.id,
+                  content: contentStr,
+                  avatarName: message.avatarName,
+                }}
+                renderContent={renderSystemMessage}
+              />
+            )
+          }
+
           if (message.role === "user") {
             return (
               <UserMessage
@@ -252,9 +285,9 @@ export const AIConversation = React.memo<AIConversationProps>(
             const directToolCalls = allToolCalls.filter((tc) => tc.visibility !== "reasoning")
 
             const hasReasoning = reasoningCalls.length > 0 || subAgents.length > 0 || directToolCalls.length > 0 || (message.isLoading && contentStr.trim() !== "");
-            const reasoningText = (hasReasoning && (!message.blocks || message.blocks.length === 0)) ? contentStr : undefined
-            const displayContentStr = hasReasoning ? "" : contentStr
-            const hasDisplayContent = displayContentStr.trim() !== ""
+            const reasoningText = (hasReasoning && (!message.blocks || message.blocks.length === 0)) ? contentStr : undefined;
+            const displayContentStr = hasReasoning ? "" : contentStr;
+            const hasDisplayContent = displayContentStr.trim() !== "";
 
             if (!hasDisplayContent && directToolCalls.length === 0 && reasoningCalls.length === 0 && subAgents.length === 0 && !message.isLoading && (!message.blocks || message.blocks.length === 0)) {
               return null;

package/components/blocks/BmcCanvas/bmc-layout.ts

@@ -0,0 +1,115 @@
+import type { WorkflowNode, WorkflowEdge } from "@/components/blocks/WorkflowCanvas";
+import type { SpatialContainerColorTheme, SpatialContainerVariant } from "@/components/composites/SpatialContainerNode";
+import type { BmcBlock, BmcBlockId, BmcCanvasView, CompiledBmc } from "./interfaces";
+
+interface BlockLayout {
+  id: string;
+  themeColor: SpatialContainerColorTheme;
+  variant: SpatialContainerVariant;
+  icon: string;
+  position: { x: number; y: number };
+  size: { width: number; height: number };
+  layout: 'column' | 'row';
+}
+
+const BLOCK_LAYOUTS: Record<BmcBlockId, BlockLayout> = {
+  key_partnerships:       { id: 'cp',   themeColor: 'blue',    variant: 'extruded3d', icon: 'handshake', position: { x: 40, y: 40 },    size: { width: 280, height: 400 }, layout: 'column' },
+  key_activities:         { id: 'ka',   themeColor: 'emerald', variant: 'extruded3d', icon: 'activity',  position: { x: 350, y: 40 },   size: { width: 280, height: 190 }, layout: 'column' },
+  key_resources:          { id: 'kr',   themeColor: 'emerald', variant: 'extruded3d', icon: 'database',  position: { x: 350, y: 250 },  size: { width: 280, height: 190 }, layout: 'column' },
+  value_propositions:     { id: 'vp',   themeColor: 'indigo',  variant: 'extruded3d', icon: 'box',       position: { x: 660, y: 40 },   size: { width: 300, height: 400 }, layout: 'column' },
+  customer_relationships: { id: 'cr',   themeColor: 'purple',  variant: 'extruded3d', icon: 'heart',     position: { x: 990, y: 40 },   size: { width: 300, height: 190 }, layout: 'column' },
+  channels:               { id: 'ch',   themeColor: 'amber',   variant: 'extruded3d', icon: 'truck',     position: { x: 990, y: 250 },  size: { width: 300, height: 190 }, layout: 'column' },
+  customer_segments:      { id: 'cs',   themeColor: 'purple',  variant: 'extruded3d', icon: 'users',     position: { x: 1320, y: 40 },  size: { width: 280, height: 400 }, layout: 'column' },
+  cost_structure:         { id: 'cost', themeColor: 'rose',    variant: 'extruded3d', icon: 'wallet',    position: { x: 40, y: 465 },   size: { width: 760, height: 180 }, layout: 'row' },
+  revenue_streams:        { id: 'rev',  themeColor: 'cyan',    variant: 'extruded3d', icon: 'wallet',    position: { x: 840, y: 465 },  size: { width: 760, height: 180 }, layout: 'row' },
+};
+
+function blockEntries(bmc: CompiledBmc): Array<{ block: BmcBlock; layout: BlockLayout }> {
+  return [
+    { block: bmc.keyPartnerships, layout: BLOCK_LAYOUTS.key_partnerships },
+    { block: bmc.keyActivities, layout: BLOCK_LAYOUTS.key_activities },
+    { block: bmc.keyResources, layout: BLOCK_LAYOUTS.key_resources },
+    { block: bmc.valuePropositions, layout: BLOCK_LAYOUTS.value_propositions },
+    { block: bmc.customerRelationships, layout: BLOCK_LAYOUTS.customer_relationships },
+    { block: bmc.channels, layout: BLOCK_LAYOUTS.channels },
+    { block: bmc.customerSegments, layout: BLOCK_LAYOUTS.customer_segments },
+    { block: bmc.costStructure, layout: BLOCK_LAYOUTS.cost_structure },
+    { block: bmc.revenueStreams, layout: BLOCK_LAYOUTS.revenue_streams },
+  ];
+}
+
+import { BMC_TOOLTIPS } from "./bmc-tooltips";
+
+export function bmcToCanvas(bmc: CompiledBmc | null, message?: string): BmcCanvasView {
+  if (!bmc) {
+    return {
+      canvasName: null,
+      nodes: [],
+      edges: [],
+      emptyBlocks: [],
+      message: message ?? 'No business model data available for this session',
+    };
+  }
+
+  const nodes: WorkflowNode[] = [];
+
+  for (const { block, layout } of blockEntries(bmc)) {
+    const itemCount = block.items.length;
+    const badgeText = block.empty || itemCount === 0 ? 'empty' : `${itemCount} item${itemCount === 1 ? '' : 's'}`;
+
+    const items = block.items.map((item, idx) => ({
+      id: `${layout.id}-${idx + 1}`,
+      label: item.name,
+      description: item.description,
+    }));
+
+    const blockId = layout.id === 'cp' ? 'key_partnerships'
+      : layout.id === 'ka' ? 'key_activities'
+      : layout.id === 'kr' ? 'key_resources'
+      : layout.id === 'vp' ? 'value_propositions'
+      : layout.id === 'cr' ? 'customer_relationships'
+      : layout.id === 'ch' ? 'channels'
+      : layout.id === 'cs' ? 'customer_segments'
+      : layout.id === 'cost' ? 'cost_structure'
+      : layout.id === 'rev' ? 'revenue_streams'
+      : '';
+
+    const tooltipInfo = BMC_TOOLTIPS[blockId];
+    const description = tooltipInfo
+      ? `${tooltipInfo.description}\n\nKey Question: "${tooltipInfo.question}"\n\nExamples: ${tooltipInfo.examples.join(', ')}`
+      : block.name;
+
+    nodes.push({
+      id: layout.id,
+      type: 'spatialContainer',
+      position: layout.position,
+      style: layout.size,
+      data: {
+        label: block.name,
+        description,
+        type: 'spatialContainer',
+        themeColor: layout.themeColor,
+        variant: layout.variant,
+        icon: layout.icon,
+        badgeText,
+        items,
+      },
+    });
+  }
+
+  const edges: WorkflowEdge[] = [
+    { id: 'e-ka-vp', source: 'ka', target: 'vp', type: 'animated' },
+    { id: 'e-vp-cr', source: 'vp', target: 'cr', type: 'animated' },
+    { id: 'e-cr-cs', source: 'cr', target: 'cs', type: 'animated' },
+    { id: 'e-vp-ch', source: 'vp', target: 'ch', type: 'straight' },
+    { id: 'e-ch-cs', source: 'ch', target: 'cs', type: 'animated' },
+  ];
+
+  return {
+    canvasName: bmc.canvas.name,
+    nodes,
+    edges,
+    emptyBlocks: bmc.emptyBlocks,
+    message,
+  };
+}

package/components/blocks/BmcCanvas/bmc-tooltips.ts

@@ -0,0 +1,63 @@
+export interface BmcTooltipContent {
+  title: string;
+  description: string;
+  question: string;
+  examples: string[];
+}
+
+export const BMC_TOOLTIPS: Record<string, BmcTooltipContent> = {
+  key_partnerships: {
+    title: "Key Partnerships",
+    description: "The external companies, suppliers, or vendors that help your business operate and grow.",
+    question: "Who do we rely on outside our company to make this business work?",
+    examples: ["Cloud hosting providers", "Payment gateways", "Material suppliers", "Strategic alliances"]
+  },
+  key_activities: {
+    title: "Key Activities",
+    description: "The most critical daily tasks and operations your team must execute to deliver your offer.",
+    question: "What core things must we do every day to operate and succeed?",
+    examples: ["Software development", "AI model training", "Content creation", "Customer support"]
+  },
+  key_resources: {
+    title: "Key Resources",
+    description: "The most vital assets—physical, intellectual, human, or financial—needed to run your business.",
+    question: "What essential assets do we need to own or access to deliver our value?",
+    examples: ["Skilled engineers", "Proprietary algorithms", "Brand identity", "Capital"]
+  },
+  value_propositions: {
+    title: "Value Propositions",
+    description: "The collection of products, services, and benefits that solve customer problems or satisfy their needs.",
+    question: "Why do customers choose us over competitors? What problem are we solving?",
+    examples: ["Time savings", "Cost reduction", "Ease of use", "Premium quality"]
+  },
+  customer_relationships: {
+    title: "Customer Relationships",
+    description: "The type of interaction and ongoing relationship you establish with each customer group.",
+    question: "How do we interact with our customers across their lifecycle?",
+    examples: ["Self-service onboarding", "Dedicated account management", "Automated support"]
+  },
+  channels: {
+    title: "Channels",
+    description: "The touchpoints and pathways you use to communicate with, sell to, and deliver value to customers.",
+    question: "How do customers find, evaluate, buy, and receive our product or service?",
+    examples: ["Direct web platform", "Sales team", "Mobile app", "Partner marketplaces"]
+  },
+  customer_segments: {
+    title: "Customer Segments",
+    description: "The specific groups of people or organizations your business aims to reach and serve.",
+    question: "Who are we creating value for? Who is our ideal buyer?",
+    examples: ["Enterprise B2B teams", "Thought leaders", "Small business owners"]
+  },
+  cost_structure: {
+    title: "Cost Structure",
+    description: "All major fixed and variable expenses required to operate your business model.",
+    question: "What are the biggest costs inherent in running our business?",
+    examples: ["Server/compute costs", "Team salaries", "R&D licensing", "Marketing"]
+  },
+  revenue_streams: {
+    title: "Revenue Streams",
+    description: "The different ways your business earns cash and captures value from each customer segment.",
+    question: "How does money flow into the business? What are customers paying for?",
+    examples: ["Monthly SaaS subscriptions", "Usage-based fees", "One-time setup charges"]
+  }
+};

package/components/blocks/BmcCanvas/index.ts

@@ -0,0 +1,3 @@
+export { bmcToCanvas } from "./bmc-layout";
+export { BMC_TOOLTIPS, type BmcTooltipContent } from "./bmc-tooltips";
+export type { BmcBlockId, BmcItem, BmcBlock, CompiledBmc, BmcCanvasView } from "./interfaces";

package/components/blocks/BmcCanvas/interfaces.ts

@@ -0,0 +1,58 @@
+import type { WorkflowEdge, WorkflowNode } from "@/components/blocks/WorkflowCanvas";
+
+export type BmcBlockId =
+  | 'customer_segments'
+  | 'value_propositions'
+  | 'channels'
+  | 'customer_relationships'
+  | 'revenue_streams'
+  | 'key_resources'
+  | 'key_activities'
+  | 'key_partnerships'
+  | 'cost_structure';
+
+export interface BmcItem {
+  id: string;
+  name: string;
+  description?: string;
+  sourceRefs: string[];
+  [k: string]: unknown;
+}
+
+export interface BmcBlock {
+  key: BmcBlockId;
+  name: string;
+  items: BmcItem[];
+  empty: boolean;
+  derived: boolean;
+  sourceRefs: string[];
+}
+
+export interface CompiledBmc {
+  canvas: {
+    id: string;
+    name: string;
+    description: string;
+    derived: boolean;
+    source: { businessDocId?: string; productDocId?: string };
+    generatedAt: string;
+  };
+  customerSegments: BmcBlock;
+  valuePropositions: BmcBlock;
+  channels: BmcBlock;
+  customerRelationships: BmcBlock;
+  revenueStreams: BmcBlock;
+  keyResources: BmcBlock;
+  keyActivities: BmcBlock;
+  keyPartnerships: BmcBlock;
+  costStructure: BmcBlock & { strategicFocus?: string; drivers: string[] };
+  emptyBlocks: BmcBlockId[];
+}
+
+export interface BmcCanvasView {
+  canvasName: string | null;
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+  emptyBlocks: BmcBlockId[];
+  message?: string;
+}

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -16,6 +16,7 @@ import { Panel } from "@/components/ai-elements/panel";
 import { StateNode } from "@/components/composites/StateNode";
 import { TransitionNode } from "@/components/composites/TransitionNode";
 import { TriggerNode } from "@/components/composites/TriggerNode";
+import { SpatialContainerNode } from "@/components/composites/SpatialContainerNode";
 import type { WorkflowCanvasProps, WorkflowEdge } from "./interfaces";
 import "@xyflow/react/dist/style.css";
 
@@ -29,6 +30,7 @@ const nodeTypes = {
   state: StateNode,
   transition: TransitionNode,
   trigger: TriggerNode,
+  spatialContainer: SpatialContainerNode,
 };
 
 function WorkflowCanvasInner({
@@ -79,7 +81,7 @@ function WorkflowCanvasInner({
       }}
     >
       <Canvas
-        className="bg-background"
+        className="bg-background [&_.react-flow\_\_handle]:opacity-0 [&_.react-flow\_\_handle]:pointer-events-none [&_.react-flow\_\_node:hover_.react-flow\_\_handle]:opacity-100 [&_.react-flow\_\_node:hover_.react-flow\_\_handle]:pointer-events-auto [&_.react-flow\_\_node.selected_.react-flow\_\_handle]:opacity-100 [&_.react-flow\_\_node.selected_.react-flow\_\_handle]:pointer-events-auto [&_.react-flow\_\_handle]:transition-opacity [&_.react-flow\_\_handle]:duration-150"
         connectionLineComponent={ConnectionLine}
         connectionMode={ConnectionMode.Strict}
         edges={edges}

package/components/blocks/WorkflowCanvas/interfaces.ts

@@ -3,8 +3,13 @@ import type React from "react";
 import type { StateNodeData } from "@/components/composites/StateNode";
 import type { TransitionNodeData } from "@/components/composites/TransitionNode";
 import type { TriggerNodeData } from "@/components/composites/TriggerNode";
+import type { SpatialContainerNodeData } from "@/components/composites/SpatialContainerNode";
 
-export type WorkflowNodeData = StateNodeData | TransitionNodeData | TriggerNodeData;
+export type WorkflowNodeData =
+  | StateNodeData
+  | TransitionNodeData
+  | TriggerNodeData
+  | SpatialContainerNodeData;
 export type WorkflowNode = Node<WorkflowNodeData>;
 
 export interface WorkflowEdge {

package/components/blocks/index.ts

@@ -16,6 +16,9 @@ export * from './SectionLayout'
 export { WorkflowCanvas, getLayoutedElements } from './WorkflowCanvas'
 export type { WorkflowCanvasProps, WorkflowNode, WorkflowEdge, WorkflowNodeData } from './WorkflowCanvas'
 
+export { bmcToCanvas } from './BmcCanvas'
+export type { BmcBlockId, BmcItem, BmcBlock, CompiledBmc, BmcCanvasView } from './BmcCanvas'
+
 export { DashboardMetrics } from './DashboardMetrics'
 export type { DashboardMetricsProps } from './DashboardMetrics'
 

package/components/composites/AgentIndicator/AgentIndicator.tsx

@@ -16,7 +16,7 @@ export interface SubAgent {
   subAgentName: string
   input: string | Record<string, unknown>
   output?: string | Record<string, unknown>
-  status: "pending" | "active" | "completed" | "error"
+  status: "pending" | "active" | "completed" | "error" | "running" | "in_progress"
 }
 
 export interface AgentIndicatorProps {

package/components/composites/ApprovalCard/ApprovalCard.tsx

@@ -13,6 +13,7 @@ import {
   ConfirmationActions,
   ConfirmationAction,
 } from "@/components/ai-elements/confirmation";
+import { StreamingMarkdown } from "@/components/composites/StreamingMarkdown";
 
 export interface ActionRequest {
   name: string;
@@ -209,10 +210,14 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
           className={cn("w-full", className)}
         >
           <ConfirmationTitle>
-            <div className="flex items-start justify-between gap-4 select-none">
-              <div className="flex items-start gap-3">
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex items-start gap-3 min-w-0 flex-1">
                 <QuestionIcon className="h-5 w-5 text-muted-foreground mt-0.5 flex-shrink-0" />
-                <span>{currentQuestion.question}</span>
+                <div className="flex-1 min-w-0 max-h-60 overflow-y-auto pr-1 text-sm leading-relaxed text-foreground [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+                  <StreamingMarkdown controls={false}>
+                    {currentQuestion.question}
+                  </StreamingMarkdown>
+                </div>
               </div>
               {questions.length > 1 && (
                 <div className="flex items-center gap-1.5 text-xs text-muted-foreground flex-shrink-0 font-normal">

package/components/composites/DefaultSwitcher/DefaultSwitcher.tsx

@@ -66,7 +66,11 @@ export const DefaultSwitcher = React.memo<DefaultSwitcherProps>(
         </SelectTrigger>
         <SelectContent>
           {themes.map((theme) => (
-            <SelectItem key={theme.value} value={theme.value}>
+            <SelectItem 
+              key={theme.value} 
+              value={theme.value}
+              onClick={() => onValueChange?.(theme.value)}
+            >
               {theme.label}
             </SelectItem>
           ))}