ai-design-system 0.1.75 → 0.1.78

package/components/blocks/AIConversation/AIConversation.tsx

@@ -6,6 +6,11 @@ import {
   ConversationScrollButton,
   type ConversationProps,
 } from "@/components/ai-elements/conversation"
+import {
+  Checkpoint,
+  CheckpointIcon,
+  CheckpointTrigger,
+} from "@/components/ai-elements/checkpoint"
 import type { ToolCall, SubAgent } from "@/components/composites"
 import { UserMessage } from "@/components/composites/UserMessage"
 import { SpecialistMessage } from "@/components/composites/SpecialistMessage"
@@ -29,6 +34,21 @@ type AIMessageBlock =
   | { type: 'toolCall'; id: string; toolCall: ToolCall }
   | { type: 'subAgent'; id: string; subAgent: SubAgent }
 
+// SpecialistMessage's `subAgents` prop expects string-only `output`, while
+// SubAgent allows structured output — normalize recursively when nesting.
+function toNestedSubAgents(
+  agents?: SubAgent[]
+): { id: string; subAgentName: string; status: SubAgent['status']; input?: string | Record<string, unknown>; output?: string; subAgents?: ReturnType<typeof toNestedSubAgents> }[] | undefined {
+  return agents?.map((a) => ({
+    id: a.id,
+    subAgentName: a.subAgentName,
+    status: a.status,
+    input: a.input,
+    output: typeof a.output === 'string' ? a.output : a.output ? JSON.stringify(a.output) : undefined,
+    subAgents: toNestedSubAgents(a.subAgents),
+  }));
+}
+
 interface AIMessage {
   id: string;
   type: 'human' | 'ai';
@@ -40,6 +60,7 @@ interface AIMessage {
   subAgents?: SubAgent[];
   isLoading?: boolean;
   blocks?: AIMessageBlock[];
+  checkpointId?: string;
 }
 
 export interface AIConversationProps
@@ -77,6 +98,10 @@ export interface AIConversationProps
    * Receives the raw content string and returns a ReactNode.
    */
   renderSystemMessage?: (content: string) => React.ReactNode
+  /**
+   * Callback fired when user restores a conversation checkpoint
+   */
+  onRestoreCheckpoint?: (messageId: string, checkpointId: string) => void
 }
 
 /**
@@ -91,6 +116,7 @@ export const AIConversation = React.memo<AIConversationProps>(
     emptyState,
     onToolAction,
     renderSystemMessage,
+    onRestoreCheckpoint,
     ...conversationProps
   }) => {
     const isEmpty = React.useMemo(
@@ -209,6 +235,9 @@ export const AIConversation = React.memo<AIConversationProps>(
               }
               currentGroup.blocks = updatedBlocks;
             }
+            if (msg.checkpointId) {
+              currentGroup.checkpointId = msg.checkpointId;
+            }
             currentGroup.isLoading = msg.isLoading;
           } else {
             currentGroup = {
@@ -216,6 +245,7 @@ export const AIConversation = React.memo<AIConversationProps>(
               toolCalls: msg.toolCalls ? [...msg.toolCalls] : undefined,
               subAgents: msg.subAgents ? [...msg.subAgents] : undefined,
               blocks: msg.blocks ? [...msg.blocks] : undefined,
+              checkpointId: msg.checkpointId,
             };
             result.push(currentGroup);
           }
@@ -269,7 +299,7 @@ export const AIConversation = React.memo<AIConversationProps>(
             )
           }
 
-          if (message.role === "orchestrator") {
+          if (message.role === "orchestrator" || message.role === "assistant" || (!message.role && message.type === "ai")) {
             // Extract sub-agents from the message
             const subAgents = message.subAgents || []
 
@@ -296,39 +326,66 @@ export const AIConversation = React.memo<AIConversationProps>(
             const isStreaming = message.isLoading || reasoningCalls.some((tc) => tc.status === "pending") || subAgents.some(sa => sa.status === "active") || directToolCalls.some(tc => tc.status === "pending")
 
             return (
-              <OrchestratorMessage
-                key={message.id}
-                message={{
-                  id: message.id,
-                  content: displayContentStr,
-                  avatarSrc: message.avatarSrc,
-                  avatarName: message.avatarName,
-                  isLoading: message.isLoading && !hasReasoning,
-                }}
-                showAvatar={showAvatars && hasDisplayContent}
-              >
-                {/* Render reasoning-section for hidden tool results and subagents */}
-                {hasReasoning && (
-                  <ReasoningDisplay 
-                    content={reasoningText} 
-                    items={message.blocks && message.blocks.length > 0 ? [] : reasoningCalls} 
-                    isStreaming={isStreaming} 
-                    onToolAction={onToolAction}
-                    defaultOpen={isStreaming || index === groupedMessages.length - 1}
-                  >
-                    {message.blocks && message.blocks.length > 0 ? (
-                      message.blocks.map((block, i) => {
-                        if (block.type === 'text') {
-                          return block.text && block.text.trim() ? (
-                            <div key={`text-${i}`} className="mb-4 text-muted-foreground whitespace-pre-wrap">
-                              {block.text}
-                            </div>
-                          ) : null;
-                        } else if (block.type === 'toolCall' && block.toolCall && block.toolCall.name !== 'ask_user' && block.toolCall.name !== 'ask_question') {
-                          return <ToolCallDisplay key={block.id} toolCall={block.toolCall} onToolAction={onToolAction} />;
-                        } else if (block.type === 'subAgent' && block.subAgent) {
-                          const subAgent = block.subAgent;
-                          return (
+              <React.Fragment key={message.id}>
+                <OrchestratorMessage
+                  message={{
+                    id: message.id,
+                    content: displayContentStr,
+                    avatarSrc: message.avatarSrc,
+                    avatarName: message.avatarName,
+                    isLoading: message.isLoading && !hasReasoning,
+                  }}
+                  showAvatar={showAvatars && hasDisplayContent}
+                >
+                  {/* Render reasoning-section for hidden tool results and subagents */}
+                  {hasReasoning && (
+                    <ReasoningDisplay 
+                      content={reasoningText} 
+                      items={message.blocks && message.blocks.length > 0 ? [] : reasoningCalls} 
+                      isStreaming={isStreaming} 
+                      onToolAction={onToolAction}
+                      defaultOpen={isStreaming || index === groupedMessages.length - 1}
+                    >
+                      {message.blocks && message.blocks.length > 0 ? (
+                        message.blocks.map((block, i) => {
+                          if (block.type === 'text') {
+                            return block.text && block.text.trim() ? (
+                              <div key={`text-${i}`} className="mb-4 text-muted-foreground whitespace-pre-wrap">
+                                {block.text}
+                              </div>
+                            ) : null;
+                          } else if (block.type === 'toolCall' && block.toolCall && block.toolCall.name !== 'ask_user' && block.toolCall.name !== 'ask_question') {
+                            return <ToolCallDisplay key={block.id} toolCall={block.toolCall} onToolAction={onToolAction} />;
+                          } else if (block.type === 'subAgent' && block.subAgent) {
+                            const subAgent = block.subAgent;
+                            return (
+                              <SpecialistMessage
+                                key={subAgent.id}
+                                message={{
+                                  id: subAgent.id,
+                                  name: subAgent.subAgentName,
+                                  description: undefined,
+                                  input: subAgent.input,
+                                  content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
+                                  status: subAgent.status,
+                                  toolCalls: [],
+                                  subAgents: toNestedSubAgents(subAgent.subAgents),
+                                }}
+                                isNested={true}
+                              />
+                            );
+                          }
+                          return null;
+                        })
+                      ) : (
+                        <>
+                          {/* Render direct tool calls fallback */}
+                          {directToolCalls.map((tc) => (
+                            <ToolCallDisplay key={tc.id} toolCall={tc} onToolAction={onToolAction} />
+                          ))}
+
+                          {/* Render specialist sub-agents fallback */}
+                          {subAgents.map((subAgent) => (
                             <SpecialistMessage
                               key={subAgent.id}
                               message={{
@@ -339,60 +396,61 @@ export const AIConversation = React.memo<AIConversationProps>(
                                 content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
                                 status: subAgent.status,
                                 toolCalls: [],
+                                subAgents: toNestedSubAgents(subAgent.subAgents),
                               }}
                               isNested={true}
                             />
-                          );
-                        }
-                        return null;
-                      })
-                    ) : (
-                      <>
-                        {/* Render direct tool calls fallback */}
-                        {directToolCalls.map((tc) => (
-                          <ToolCallDisplay key={tc.id} toolCall={tc} onToolAction={onToolAction} />
-                        ))}
-
-                        {/* Render specialist sub-agents fallback */}
-                        {subAgents.map((subAgent) => (
-                          <SpecialistMessage
-                            key={subAgent.id}
-                            message={{
-                              id: subAgent.id,
-                              name: subAgent.subAgentName,
-                              description: undefined,
-                              input: subAgent.input,
-                              content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
-                              status: subAgent.status,
-                              toolCalls: [],
-                            }}
-                            isNested={true}
-                          />
-                        ))}
-                      </>
-                    )}
-                  </ReasoningDisplay>
+                          ))}
+                        </>
+                      )}
+                    </ReasoningDisplay>
+                  )}
+                </OrchestratorMessage>
+                {message.checkpointId && onRestoreCheckpoint && !message.isLoading && !hasReasoning && (
+                  <Checkpoint>
+                    <CheckpointIcon />
+                    <CheckpointTrigger
+                      onClick={() =>
+                        onRestoreCheckpoint(message.id, message.checkpointId!)
+                      }
+                    >
+                      Restore checkpoint
+                    </CheckpointTrigger>
+                  </Checkpoint>
                 )}
-              </OrchestratorMessage>
+              </React.Fragment>
             )
           }
 
           // Default to specialist message for any other AI messages
           return (
-            <SpecialistMessage
-              key={message.id}
-              message={{
-                id: message.id,
-                name: message.avatarName || "Agent",
-                content: contentStr,
-                toolCalls: message.toolCalls?.filter((tc) => tc.name !== "task"),
-                status: "completed",
-              }}
-              isNested={false}
-            />
+            <React.Fragment key={message.id}>
+              <SpecialistMessage
+                message={{
+                  id: message.id,
+                  name: message.avatarName || "Agent",
+                  content: contentStr,
+                  toolCalls: message.toolCalls?.filter((tc) => tc.name !== "task"),
+                  status: "completed",
+                }}
+                isNested={false}
+              />
+              {message.checkpointId && onRestoreCheckpoint && !message.isLoading && (
+                <Checkpoint>
+                  <CheckpointIcon />
+                  <CheckpointTrigger
+                    onClick={() =>
+                      onRestoreCheckpoint(message.id, message.checkpointId!)
+                    }
+                  >
+                    Restore checkpoint
+                  </CheckpointTrigger>
+                </Checkpoint>
+              )}
+            </React.Fragment>
           )
         }),
-      [groupedMessages, showAvatars, onToolAction]
+      [groupedMessages, showAvatars, onToolAction, onRestoreCheckpoint]
     )
 
     return (

package/components/blocks/PreviewCanvas/index.ts

@@ -0,0 +1,2 @@
+export * from './interfaces';
+export * from './preview-layout';

package/components/blocks/PreviewCanvas/interfaces.ts

@@ -0,0 +1,21 @@
+export interface AppRoute {
+  id: string;
+  path: string;
+  label: string;
+  isInitial?: boolean;
+}
+
+export interface AppNavLink {
+  fromRouteId: string;
+  toRouteId: string;
+  label?: string;
+  sourceHandle?: string;
+}
+
+export interface AppRouteManifest {
+  appId: string;
+  routes: AppRoute[];
+  links: AppNavLink[];
+}
+
+export type PreviewCanvasViewMode = 'play' | 'single' | 'interactive' | 'grid';

package/components/blocks/PreviewCanvas/preview-layout.ts

@@ -0,0 +1,112 @@
+import { getLayoutedElements } from '@/lib/workflow/layout-engine';
+import { DEVICE_PRESETS } from '@/components/composites/DevicePreviewNode/interfaces';
+import type { WorkflowEdge, WorkflowNode } from '@/lib/workflow/interfaces';
+import type { AppRouteManifest } from './interfaces';
+
+export interface PreviewLayoutOptions {
+  presetId?: string;
+  loading?: boolean;
+  isEmpty?: boolean;
+  error?: string | null;
+  interactive?: boolean;
+  hideControls?: boolean;
+}
+
+/**
+ * Compute the canvas-space pixel size of a DevicePreviewNode for a given preset.
+ * Matches the inline style logic in DevicePreviewNode.tsx:
+ *   width  = preset.width  + (hideControls ? 16 : 32)
+ *   height = preset.height + (hideControls ? 16 : 88)
+ */
+export function deviceNodeSize(
+  presetId: string,
+  hideControls = true,
+  scale = 0.45,
+): { width: number; height: number } {
+  const preset =
+    DEVICE_PRESETS.find((p) => p.id === presetId) ??
+    DEVICE_PRESETS.find((p) => p.id === 'iphone-16-pro') ??
+    DEVICE_PRESETS[0];
+
+  const baseWidth = preset.isResponsive ? 420 : preset.width;
+  const baseHeight = preset.isResponsive ? 780 : preset.height;
+
+  const effectiveScale = hideControls ? scale : 1.0;
+  return {
+    width: Math.round(baseWidth * effectiveScale) + (hideControls ? 12 : 32),
+    height: Math.round(baseHeight * effectiveScale) + (hideControls ? 12 : 88),
+  };
+}
+
+/** ELK canvas-space size of a transition/diamond condition node. */
+export const TRANSITION_NODE_SIZE = { width: 180, height: 52 };
+
+/**
+ * Build unpositioned nodes + edges from a manifest, then run them through the
+ * same ELK `layered` engine the builder uses — but with correct per-node
+ * dimensions for `devicePreview` vs `transition` nodes.
+ *
+ * Direction is RIGHT (left-to-right) to match the Bookgeek reference UX.
+ */
+export async function routesToPreviewCanvas(
+  manifest: AppRouteManifest,
+  src: string,
+  options: PreviewLayoutOptions = {},
+): Promise<{ nodes: WorkflowNode[]; edges: WorkflowEdge[] }> {
+  const {
+    presetId = 'iphone-16-pro',
+    loading = false,
+    isEmpty = false,
+    error = null,
+    interactive = false,
+    hideControls = true,
+  } = options;
+
+  const devSize = deviceNodeSize(presetId, hideControls);
+
+  const routes = manifest.routes || [];
+  const links  = manifest.links  || [];
+
+  // Build unlaid-out nodes (positions will be overwritten by ELK)
+  const nodes: WorkflowNode[] = routes.map((r) => ({
+    id: `preview-${r.id}`,
+    type: 'devicePreview',
+    position: { x: 0, y: 0 }, // placeholder – ELK will override
+    data: {
+      type: 'devicePreview',
+      src,
+      route: r.path,
+      label: r.label,
+      presetId,
+      isInitial: r.isInitial,
+      interactive,
+      hideControls,
+      loading,
+      isEmpty,
+      error,
+    },
+  }));
+
+  const edges: WorkflowEdge[] = links.map((link, idx) => ({
+    id: `e-${link.fromRouteId}-${link.toRouteId}-${idx}`,
+    source: `preview-${link.fromRouteId}`,
+    target: `preview-${link.toRouteId}`,
+    // preserve explicit handle IDs so action-port handles route correctly
+    sourceHandle: link.sourceHandle ?? null,
+    label: link.label,
+    type: 'straight',
+  }));
+
+  return getLayoutedElements(nodes, edges, {
+    direction: 'RIGHT',
+    // generous horizontal gap so device bezels don't crowd each other
+    nodeSpacingX: devSize.width * 0.4,
+    // generous vertical gap so branching rows have breathing room
+    nodeSpacingY: devSize.height * 0.3,
+    nodeSizeResolver: (node) => {
+      if (node.type === 'devicePreview') return devSize;
+      if (node.type === 'transition') return TRANSITION_NODE_SIZE;
+      return null; // fall back to ELK defaults (180×52)
+    },
+  });
+}

package/components/blocks/WorkflowCanvas/WorkflowCanvas.stories.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import type { NodeChange, EdgeChange, Connection } from "@xyflow/react";
 import { applyNodeChanges, applyEdgeChanges } from "@xyflow/react";
 import { WorkflowCanvas, type WorkflowNode, type WorkflowEdge } from "./WorkflowCanvas";
+import { DevicePreviewToolbar } from "@/components/composites/DevicePreviewToolbar";
 import "@xyflow/react/dist/style.css";
 
 /**
@@ -277,3 +278,62 @@ export const Empty: Story = {
     );
   },
 };
+
+/**
+ * Device Preview mode — `devicePreview` nodes + the DevicePreviewToolbar in
+ * the topCenter panel slot (the config the BuilderPage 'Preview' tab uses).
+ */
+export const DevicePreviewMode: Story = {
+  render: () => {
+    const [nodes, setNodes] = useState<WorkflowNode[]>(() => {
+      const routes = ["/login", "/signup", "/dashboard", "/settings"];
+      return routes.map((route, i) => ({
+        id: `preview-${i}`,
+        type: "devicePreview",
+        position: { x: (i % 2) * 500, y: Math.floor(i / 2) * 760 },
+        data: {
+          type: "devicePreview",
+          src: "about:blank",
+          label: `demo-app · ${route}`,
+          route,
+          presetId: "iphone-16-pro",
+          showRouteBadge: true,
+        },
+      }));
+    });
+    const [viewMode, setViewMode] = useState<"play" | "single" | "interactive" | "grid">("grid");
+    const [activeRoute, setActiveRoute] = useState("/login");
+    const [presetId, setPresetId] = useState("iphone-16-pro");
+
+    const onNodesChange = (changes: NodeChange[]) => {
+      setNodes((nds) => applyNodeChanges(changes, nds) as WorkflowNode[]);
+    };
+
+    return (
+      <div style={{ width: "100vw", height: "100vh" }}>
+        <WorkflowCanvas
+          nodes={nodes}
+          edges={[]}
+          onNodesChange={onNodesChange}
+          interactive
+          topCenter={
+            <DevicePreviewToolbar
+              viewMode={viewMode}
+              onViewModeChange={setViewMode}
+              routes={[
+                { id: "/login", label: "Login" },
+                { id: "/signup", label: "Signup" },
+                { id: "/dashboard", label: "Dashboard" },
+                { id: "/settings", label: "Settings" },
+              ]}
+              activeRoute={activeRoute}
+              onRouteChange={setActiveRoute}
+              devicePresetId={presetId}
+              onDevicePresetChange={setPresetId}
+            />
+          }
+        />
+      </div>
+    );
+  },
+};

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -17,7 +17,8 @@ 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 { DevicePreviewNode } from "@/components/composites/DevicePreviewNode";
+import type { WorkflowCanvasProps, WorkflowEdge } from "@/lib/workflow/interfaces";
 import "@xyflow/react/dist/style.css";
 
 const edgeTypes = {
@@ -31,6 +32,7 @@ const nodeTypes = {
   transition: TransitionNode,
   trigger: TriggerNode,
   spatialContainer: SpatialContainerNode,
+  devicePreview: DevicePreviewNode,
 };
 
 function WorkflowCanvasInner({
@@ -47,6 +49,7 @@ function WorkflowCanvasInner({
   interactive = false,
   topLeft,
   topRight,
+  topCenter,
   className,
 }: WorkflowCanvasProps) {
   const { fitView } = useReactFlow();
@@ -117,6 +120,14 @@ function WorkflowCanvasInner({
             {topRight}
           </Panel>
         )}
+        {topCenter && (
+          <Panel
+            className="pointer-events-auto border-none bg-transparent p-0"
+            position="top-center"
+          >
+            {topCenter}
+          </Panel>
+        )}
         <Panel
           className="workflow-controls-panel border-none bg-transparent p-0"
           position="bottom-left"

package/components/blocks/WorkflowCanvas/index.ts

@@ -1,3 +1,3 @@
 export { WorkflowCanvas } from "./WorkflowCanvas";
-export type { WorkflowCanvasProps, WorkflowNode, WorkflowEdge, WorkflowNodeData } from "./interfaces";
-export { getLayoutedElements } from "./layout-engine";
+export type { WorkflowCanvasProps, WorkflowNode, WorkflowEdge, WorkflowNodeData } from "@/lib/workflow/interfaces";
+export { getLayoutedElements } from "@/lib/workflow/layout-engine";

package/components/blocks/index.ts

@@ -13,6 +13,11 @@ export type { FileChangeQueueProps } from './FileChangeQueue'
 // Blocks
 export * from './SectionLayout'
 
+// ExpoAppPreview lives in ai-elements (it's a generic sandboxed iframe
+// container); re-exported here for backward compatibility.
+export { ExpoAppPreview } from '@/components/ai-elements/ExpoAppPreview'
+export type { ExpoAppPreviewProps } from '@/components/ai-elements/ExpoAppPreview'
+
 export { WorkflowCanvas, getLayoutedElements } from './WorkflowCanvas'
 export type { WorkflowCanvasProps, WorkflowNode, WorkflowEdge, WorkflowNodeData } from './WorkflowCanvas'
 

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -60,21 +60,20 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
 
     // Compute default sizes (server-safe — no localStorage access)
     const defaultSizes = React.useMemo(() => {
-      const raw = sections.map(section => section.defaultSize ?? (100 / sections.length))
+      const raw = sections.map((section) => section.defaultSize ?? (100 / sections.length))
       const total = raw.reduce((sum, size) => sum + size, 0)
-      return raw.map(size => (size / total) * 100)
+      return raw.map((size) => (size / total) * 100)
     }, [sections])
 
     const [sizes, setSizes] = React.useState<number[]>(defaultSizes)
 
     // Sync sizes if the number of sections changes (e.g. data loads and new section appears)
+    const prevSectionsLengthRef = React.useRef(sections.length)
     React.useEffect(() => {
-      setSizes((prevSizes) => {
-        if (prevSizes.length !== sections.length) {
-          return defaultSizes;
-        }
-        return prevSizes;
-      });
+      if (prevSectionsLengthRef.current !== sections.length) {
+        prevSectionsLengthRef.current = sections.length
+        setSizes(defaultSizes)
+      }
     }, [sections.length, defaultSizes])
 
     // After hydration, overwrite with persisted sizes if available
@@ -90,8 +89,7 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       } catch {
         // ignore malformed storage
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [storageKey])
+    }, [storageKey, sections.length])
 
     const [draggingIndex, setDraggingIndex] = React.useState<number | null>(null)
     const [startX, setStartX] = React.useState(0)

package/components/composites/AgentIndicator/AgentIndicator.tsx

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