ai-design-system 0.1.73 → 0.1.74

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}

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

@@ -969,8 +969,8 @@ export const PromptInputSubmit = ({
   if (status === "submitted") {
     Icon = <Loader2Icon className="size-4 animate-spin" />;
   } else if (status === "streaming") {
-    Icon = <SquareIcon className="size-3.5 fill-current" />;
-    buttonVariant = "default";
+    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" />;

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

@@ -81,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/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/SpatialContainerNode/SpatialContainerNode.tsx

@@ -12,6 +12,12 @@ import {
   NodeTitle,
   getHighlightIconColor,
 } from "@/components/ai-elements/node";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/primitives/Tooltip";
 import { cn } from "@/lib/utils";
 import type { ToolbarAction } from "@/components/composites/WorkflowToolbar";
 
@@ -27,6 +33,14 @@ export type SpatialContainerColorTheme =
 
 export type SpatialContainerVariant = "extruded3d" | "flat" | "glassmorphism";
 
+export type SpatialContainerItem = {
+  id: string;
+  label: string;
+  description?: string;
+  status?: "idle" | "running" | "success" | "error";
+  icon?: string;
+};
+
 export type SpatialContainerNodeData = {
   label: string;
   description?: string;
@@ -41,6 +55,8 @@ export type SpatialContainerNodeData = {
   actions?: ToolbarAction[];
   /** Badge count or sub-item summary tag */
   badgeText?: string;
+  /** Sub-items rendered as HTML card elements inside spatial container */
+  items?: SpatialContainerItem[];
 };
 
 type SpatialContainerNodeProps = NodeProps & {
@@ -149,8 +165,8 @@ export const SpatialContainerNode = memo(
 
     return (
       <div className="relative group" style={{ width, height }}>
-        {/* Node Resizer */}
-        <NodeResizer minWidth={180} minHeight={140} isVisible={selected} />
+        {/* Node Resizer — disabled for clean spatial sections */}
+        <NodeResizer minWidth={180} minHeight={140} isVisible={false} />
 
         {/* 2.5D Extrusion Side & Bottom Panels for extruded3d visual mode */}
         {variant === "extruded3d" && (
@@ -158,14 +174,14 @@ export const SpatialContainerNode = memo(
             {/* Bottom Extrusion Shadow Face */}
             <div
               className={cn(
-                "absolute -bottom-3 left-3 right-0 h-3 rounded-b-md transition-all duration-200",
+                "absolute -bottom-3.5 left-3.5 right-0 h-3.5 rounded-b-md transition-all duration-200 border-b border-r border-black/30 dark:border-black/60 shadow-md",
                 theme.extrusionBottom
               )}
             />
             {/* Right Side Extrusion Face */}
             <div
               className={cn(
-                "absolute -right-3 top-3 bottom-0 w-3 rounded-r-md transition-all duration-200",
+                "absolute -right-3.5 top-3.5 bottom-0 w-3.5 rounded-r-md transition-all duration-200 border-t border-r border-black/30 dark:border-black/60 shadow-md",
                 theme.extrusionSide
               )}
             />
@@ -174,18 +190,20 @@ export const SpatialContainerNode = memo(
 
         <Node
           className={cn(
-            "relative h-full w-full flex flex-col border transition-all duration-200 ease-out overflow-hidden rounded-lg",
+            "relative h-full w-full flex flex-col border transition-all duration-200 ease-out overflow-hidden rounded-lg shadow-sm",
             theme.border,
             theme.bg,
             variant === "glassmorphism" && "backdrop-blur-md bg-opacity-70 dark:bg-opacity-40",
-            variant === "extruded3d" && "shadow-lg hover:shadow-xl",
-            selected ? "border-primary border-2 shadow-primary/20 ring-2 ring-primary/30" : "shadow-sm",
+            variant === "extruded3d" && "shadow-xl border-t border-l border-white/20 dark:border-white/10",
             isDisabled && "opacity-50"
           )}
           data-testid={`spatial-container-node-${id}`}
           handles={{ target: true, source: true }}
           status={status}
         >
+          {/* Top 3D Highlight Line */}
+          <div className="absolute top-0 inset-x-0 h-0.5 bg-gradient-to-r from-transparent via-white/40 to-transparent pointer-events-none z-10" />
+
           {/* Header Panel */}
           <div
             className={cn(
@@ -203,13 +221,42 @@ export const SpatialContainerNode = memo(
                 )}
                 strokeWidth={2}
               />
-              <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-1.5 min-w-0 flex-1">
                 <NodeTitle
-                  className="line-clamp-1 text-xs font-semibold tracking-wide uppercase"
+                  className="truncate text-xs font-bold tracking-wider uppercase"
                   title={displayTitle}
                 >
                   {displayTitle}
                 </NodeTitle>
+                {displayDescription && (
+                  <TooltipProvider>
+                    <Tooltip delayDuration={100}>
+                      <TooltipTrigger asChild>
+                        <span className="cursor-help text-muted-foreground/60 hover:text-foreground shrink-0 transition-colors">
+                          <Icon name="info" size="xs" />
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent
+                        side="top"
+                        align="start"
+                        className="max-w-xs p-3 text-xs bg-popover text-popover-foreground border border-border shadow-lg space-y-2"
+                      >
+                        {displayDescription.split('\n\n').map((paragraph, idx) => (
+                          <p
+                            key={idx}
+                            className={cn(
+                              idx === 0 && "font-medium text-foreground",
+                              idx === 1 && "italic text-primary/90 font-medium",
+                              idx === 2 && "text-muted-foreground text-[11px]"
+                            )}
+                          >
+                            {paragraph}
+                          </p>
+                        ))}
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
               </div>
             </div>
 
@@ -226,19 +273,35 @@ export const SpatialContainerNode = memo(
             )}
           </div>
 
-          {/* Body Container Region for Child Nodes */}
-          <div className="relative flex-1 p-3 flex flex-col justify-between pointer-events-none">
-            {displayDescription && (
-              <NodeDescription
-                className="text-[11px] text-muted-foreground line-clamp-2"
-                title={displayDescription}
-              >
-                {displayDescription}
-              </NodeDescription>
+          {/* Body Container Region for Child HTML Card Items */}
+          <div className="relative flex-1 p-2.5 overflow-y-auto nowheel nodrag nopan custom-scrollbar pointer-events-auto flex flex-col gap-2">
+            {data.items && data.items.length > 0 ? (
+              data.items.map((item) => (
+                <div
+                  key={item.id}
+                  className="group relative flex items-center gap-2 rounded-md border border-border/70 bg-card/95 px-3 py-2 text-xs shadow-2xs transition-all hover:border-primary/50 hover:bg-accent/30"
+                >
+                  <Icon
+                    name={item.icon || "zap"}
+                    size="xs"
+                    className="shrink-0 text-primary"
+                    strokeWidth={1.5}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="font-medium text-foreground truncate" title={item.label}>
+                      {item.label}
+                    </div>
+                    {item.description && (
+                      <div className="text-[10px] text-muted-foreground truncate" title={item.description}>
+                        {item.description}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.03)_1px,transparent_1px)] dark:bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[size:16px_16px] pointer-events-none -z-10" />
             )}
-
-            {/* Subtle Spatial Grid Watermark / Grid Background Accent */}
-            <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.03)_1px,transparent_1px)] dark:bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[size:16px_16px] pointer-events-none -z-10" />
           </div>
 
           {/* Node Toolbar Actions */}

package/components/composites/SpecialistMessage/SpecialistMessage.tsx

@@ -23,7 +23,7 @@ export interface SpecialistMessageData {
   icon?: React.ReactNode
   content: string
   toolCalls?: ToolCall[]
-  status: "pending" | "active" | "completed" | "error"
+  status: "pending" | "active" | "completed" | "error" | "running" | "in_progress"
   avatarSrc?: string
   avatarName?: string
   input?: string | Record<string, unknown>

package/components/composites/SystemMessage/SystemMessage.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SystemMessage } from './SystemMessage'
+
+const meta: Meta<typeof SystemMessage> = {
+  title: 'Composites/SystemMessage',
+  component: SystemMessage,
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof SystemMessage>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    message: {
+      id: '1',
+      content: 'Background task completed successfully.',
+    },
+  },
+}
+
+export const WithLongContent: Story = {
+  args: {
+    message: {
+      id: '2',
+      content: 'The analysis has been completed and the results are now available for review. You can access the full report from the dashboard.',
+    },
+  },
+}
+
+export const WithCustomRenderer: Story = {
+  args: {
+    message: {
+      id: '3',
+      content: 'Audio message received',
+    },
+    renderContent: (content) => (
+      <div className="flex items-center gap-2">
+        <span className="text-xs">🎵</span>
+        <span>{content}</span>
+      </div>
+    ),
+  },
+}