ai-design-system 0.1.73 → 0.1.75

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/AuthCard/AuthCard.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AuthCard } from "./AuthCard";
+import { fn } from "@storybook/test";
+
+const meta: Meta<typeof AuthCard> = {
+  title: "Composites/AuthCard",
+  component: AuthCard,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    appName: "Waypoint",
+    mode: "login",
+    email: "",
+    isLoading: false,
+    allowSso: true,
+    socialProviders: ["apple", "google"],
+    onEmailChange: fn(),
+    onNameChange: fn(),
+    onPasswordChange: fn(),
+    onConfirmPasswordChange: fn(),
+    onSubmit: fn(),
+    onSsoClick: fn(),
+    onSocialClick: fn(),
+    onToggleMode: fn(),
+  },
+} satisfies Meta<typeof AuthCard>;
+
+export default meta;
+type Story = StoryObj<typeof AuthCard>;
+
+export const LoginDefault: Story = {
+  args: {
+    mode: "login",
+  },
+};
+
+export const LoginFilled: Story = {
+  args: {
+    mode: "login",
+    email: "alex@example.com",
+  },
+};
+
+export const SignupDefault: Story = {
+  args: {
+    mode: "signup",
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    mode: "login",
+    email: "alex@example.com",
+    isLoading: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    mode: "login",
+    email: "alex@example.com",
+    error: "Invalid email or authentication session expired. Please try again.",
+  },
+};