ai-design-system 0.1.86 → 0.1.92

package/components/ai-elements/ExpoAppPreview/ExpoAppPreview.tsx

@@ -29,11 +29,16 @@ export const ExpoAppPreview = React.memo<ExpoAppPreviewProps>(
     sandbox = "allow-scripts allow-same-origin allow-forms allow-popups",
     allow,
     loading = false,
-    loadingLabel = "Loading app…",
+    loadingLabel = "Loading your app…",
     isEmpty = false,
-    emptyLabel = "No preview available",
+    emptyLabel = "Nothing to preview yet",
     error = null,
-    errorLabel = "Preview unavailable",
+    // Addressed to the person using the app, not to whoever is debugging it.
+    // "Preview unavailable" described the system's state; this says what it
+    // means for them. The specific cause still comes through in `error`
+    // underneath, and the case that used to dominate here — no sandbox — is
+    // now handled by the Wake screen before this component is ever rendered.
+    errorLabel = "Nothing to preview",
     onLoad,
     onError,
     onMessage,

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

@@ -37,6 +37,7 @@ import {
 import { cn } from "@/lib/utils";
 import type { ChatStatus, FileUIPart } from "ai";
 import {
+  FileIcon,
   Loader2Icon,
   SendIcon,
   SquareIcon,
@@ -111,7 +112,7 @@ export const usePromptInputController = () => {
 };
 
 // Optional variants (do NOT throw). Useful for dual-mode components.
-const useOptionalPromptInputController = () =>
+export const useOptionalPromptInputController = () =>
   useContext(PromptInputController);
 
 export const useProviderAttachments = () => {
@@ -265,81 +266,81 @@ export function PromptInputAttachment({
     data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
   const isImage = mediaType === "image";
 
-  const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
-
-  return (
-    <PromptInputHoverCard>
-      <HoverCardTrigger asChild>
-        <div
-          className={cn(
-            "group relative flex h-8 cursor-default select-none items-center gap-1.5 rounded-md border border-border px-1.5 font-medium text-sm transition-all hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-            className
-          )}
-          key={data.id}
-          {...props}
+  // For non-image files, truncate filename to max 20 characters followed by '..'
+  const attachmentLabel = filename
+    ? filename.length > 20
+      ? `${filename.slice(0, 20)}..`
+      : filename
+    : isImage
+    ? "Image"
+    : "Attachment";
+
+  if (isImage) {
+    return (
+      <div
+        className={cn(
+          "group relative size-10 shrink-0 overflow-hidden rounded-md border border-border bg-muted transition-all",
+          className
+        )}
+        key={data.id}
+        title={filename || undefined}
+        {...props}
+      >
+        <img
+          alt={filename || "attachment"}
+          className="size-full object-cover"
+          src={data.url}
+        />
+        <Button
+          aria-label="Remove attachment"
+          className="absolute inset-0 size-full cursor-pointer rounded-none bg-black/40 p-0 text-white opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 hover:bg-black/60 [&>svg]:size-3.5"
+          onClick={(e) => {
+            e.stopPropagation();
+            attachments.remove(data.id);
+          }}
+          type="button"
+          variant="ghost"
         >
-          <div className="relative size-5 shrink-0">
-            <div className="absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded bg-background transition-opacity group-hover:opacity-0">
-              {isImage ? (
-                <img
-                  alt={filename || "attachment"}
-                  className="size-5 object-cover"
-                  height={20}
-                  src={data.url}
-                  width={20}
-                />
-              ) : (
-                <div className="flex size-5 items-center justify-center text-muted-foreground">
-                  <div className="size-3" />
-                </div>
-              )}
-            </div>
-            <Button
-              aria-label="Remove attachment"
-              className="absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5"
-              onClick={(e) => {
-                e.stopPropagation();
-                attachments.remove(data.id);
-              }}
-              type="button"
-              variant="ghost"
-            >
-              <XIcon />
-              <span className="sr-only">Remove</span>
-            </Button>
-          </div>
+          <XIcon />
+          <span className="sr-only">Remove</span>
+        </Button>
+      </div>
+    );
+  }
 
-          <span className="flex-1 truncate">{attachmentLabel}</span>
-        </div>
-      </HoverCardTrigger>
-      <PromptInputHoverCardContent className="w-auto p-2">
-        <div className="w-auto space-y-3">
-          {isImage && (
-            <div className="flex max-h-96 w-96 items-center justify-center overflow-hidden rounded-md border">
-              <img
-                alt={filename || "attachment preview"}
-                className="max-h-full max-w-full object-contain"
-                height={384}
-                src={data.url}
-                width={448}
-              />
-            </div>
-          )}
-          <div className="flex items-center gap-2.5">
-            <div className="min-w-0 flex-1 space-y-1 px-0.5">
-              <h4 className="truncate font-semibold text-sm leading-none">
-                {filename || (isImage ? "Image" : "Attachment")}
-              </h4>
-              {data.mediaType && (
-                <p className="truncate font-mono text-muted-foreground text-xs">
-                  {data.mediaType}
-                </p>
-              )}
-            </div>
+  return (
+    <div
+      className={cn(
+        "group relative flex h-8 cursor-default select-none items-center gap-1.5 rounded-md border border-border px-1.5 font-medium text-sm transition-all hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        className
+      )}
+      key={data.id}
+      title={filename || undefined}
+      {...props}
+    >
+      <div className="relative size-5 shrink-0">
+        <div className="absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded bg-background transition-opacity group-hover:opacity-0">
+          <div className="flex size-5 items-center justify-center text-muted-foreground">
+            <FileIcon className="size-3.5" />
           </div>
         </div>
-      </PromptInputHoverCardContent>
-    </PromptInputHoverCard>
+        <Button
+          aria-label="Remove attachment"
+          className="absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5"
+          onClick={(e) => {
+            e.stopPropagation();
+            attachments.remove(data.id);
+          }}
+          type="button"
+          variant="ghost"
+        >
+          <XIcon />
+          <span className="sr-only">Remove</span>
+        </Button>
+      </div>
+
+      <span className="flex-1 truncate">{attachmentLabel}</span>
+    </div>
   );
 }
 
@@ -351,7 +352,9 @@ export type PromptInputAttachmentsProps = Omit<
 };
 
 export function PromptInputAttachments({
+  className,
   children,
+  ...props
 }: PromptInputAttachmentsProps) {
   const attachments = usePromptInputAttachments();
 
@@ -359,9 +362,19 @@ export function PromptInputAttachments({
     return null;
   }
 
-  return attachments.files.map((file) => (
-    <React.Fragment key={file.id}>{children(file)}</React.Fragment>
-  ));
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-wrap items-center justify-start self-start gap-1.5 px-3 pt-2",
+        className
+      )}
+      {...props}
+    >
+      {attachments.files.map((file) => (
+        <React.Fragment key={file.id}>{children(file)}</React.Fragment>
+      ))}
+    </div>
+  );
 }
 
 export type PromptInputActionAddAttachmentsProps = ComponentProps<
@@ -674,7 +687,9 @@ export const PromptInput = ({
 
     // Convert blob URLs to data URLs asynchronously
     Promise.all(
-      files.map(async ({ id, ...item }) => {
+      files.map(async (file) => {
+        const item = { ...file };
+        delete (item as { id?: string }).id;
         if (item.url && item.url.startsWith("blob:")) {
           return {
             ...item,
@@ -706,7 +721,7 @@ export const PromptInput = ({
             controller.textInput.clear();
           }
         }
-      } catch (error) {
+      } catch {
         // Don't clear on error - user may want to retry
       }
     });

package/components/blocks/AIConversation/AIConversation.stories.tsx

@@ -268,7 +268,6 @@ export const WithCheckpointRestore: Story = {
         content: 'React is a JavaScript library for building user interfaces. It was developed by Facebook and is now maintained by Meta and a community of developers.',
         avatarSrc: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
         avatarName: 'Coordinator',
-        checkpointId: 'cp-step-1',
       },
       {
         id: '3',
@@ -277,6 +276,9 @@ export const WithCheckpointRestore: Story = {
         content: 'How does component state work?',
         avatarSrc: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=32&h=32&fit=crop&crop=face',
         avatarName: 'User',
+        // Rewinds to the state before this question was asked. The first user
+        // message deliberately carries none — there is nothing before it.
+        checkpointId: 'cp-step-1',
       },
       {
         id: '4',
@@ -285,6 +287,14 @@ export const WithCheckpointRestore: Story = {
         content: 'State in React represents values that can change over time and trigger component re-renders when updated.',
         avatarSrc: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
         avatarName: 'Coordinator',
+      },
+      {
+        id: '5',
+        type: 'human',
+        role: 'user',
+        content: 'Show me an example.',
+        avatarSrc: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=32&h=32&fit=crop&crop=face',
+        avatarName: 'User',
         checkpointId: 'cp-step-2',
       },
     ],

package/components/blocks/AIConversation/AIConversation.tsx

@@ -6,13 +6,8 @@ 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 { UserMessage, type UserMessageAttachment } from "@/components/composites/UserMessage"
 import { SpecialistMessage } from "@/components/composites/SpecialistMessage"
 import { OrchestratorMessage } from "@/components/composites/OrchestratorMessage"
 import { SystemMessage } from "@/components/composites/SystemMessage"
@@ -61,6 +56,8 @@ interface AIMessage {
   isLoading?: boolean;
   blocks?: AIMessageBlock[];
   checkpointId?: string;
+  restoreLabel?: string;
+  attachments?: UserMessageAttachment[];
 }
 
 export interface AIConversationProps
@@ -102,6 +99,17 @@ export interface AIConversationProps
    * Callback fired when user restores a conversation checkpoint
    */
   onRestoreCheckpoint?: (messageId: string, checkpointId: string) => void
+  /**
+   * Save the workspace as it stands after an orchestrator reply.
+   *
+   * Paired with `onRestoreCheckpoint`: undo sits on what the user asked for,
+   * save sits on what the agent produced. Omit it and no reply offers to save.
+   */
+  onSaveWorkspace?: () => void
+  /** True when the current version is already kept — every Save reads as saved. */
+  isCurrentVersionSaved?: boolean
+  /** A save is in flight — the control says so and refuses a second one. */
+  isSavingWorkspace?: boolean
 }
 
 /**
@@ -117,6 +125,9 @@ export const AIConversation = React.memo<AIConversationProps>(
     onToolAction,
     renderSystemMessage,
     onRestoreCheckpoint,
+    onSaveWorkspace,
+    isCurrentVersionSaved,
+    isSavingWorkspace,
     ...conversationProps
   }) => {
     const isEmpty = React.useMemo(
@@ -246,6 +257,7 @@ export const AIConversation = React.memo<AIConversationProps>(
               subAgents: msg.subAgents ? [...msg.subAgents] : undefined,
               blocks: msg.blocks ? [...msg.blocks] : undefined,
               checkpointId: msg.checkpointId,
+              restoreLabel: msg.restoreLabel,
             };
             result.push(currentGroup);
           }
@@ -261,6 +273,27 @@ export const AIConversation = React.memo<AIConversationProps>(
       return result;
     }, [messages]);
 
+  /**
+   * The last orchestrator reply, and the ONLY one that may offer to save.
+   *
+   * Saving anchors to the most recent request, so it captures the workspace as
+   * it is NOW — not as it was when some earlier reply was written. Offering the
+   * control on every reply implies each one saves its own moment, which is
+   * false and unrecoverable once acted on: the user would believe they had kept
+   * a point they never kept.
+   *
+   * `isCurrentVersionSaved` is likewise one fact about the workspace, not a
+   * property of each message. Rendered on every reply it read as "all of these
+   * are saved"; it belongs on the single reply the save would come from.
+   */
+  const lastReplyIndex = React.useMemo(() => {
+    for (let i = groupedMessages.length - 1; i >= 0; i--) {
+      const m = groupedMessages[i]
+      if (m.role === "orchestrator" || m.role === "assistant" || (!m.role && m.type === "ai")) return i
+    }
+    return -1
+  }, [groupedMessages])
+
     const renderedMessages = React.useMemo(
       () =>
         groupedMessages.map((message, index) => {
@@ -293,8 +326,12 @@ export const AIConversation = React.memo<AIConversationProps>(
                   content: contentStr,
                   avatarSrc: message.avatarSrc,
                   avatarName: message.avatarName,
+                  attachments: message.attachments,
+                  checkpointId: message.checkpointId,
+                  restoreLabel: message.restoreLabel,
                 }}
                 showAvatar={showAvatars}
+                onRestore={onRestoreCheckpoint}
               />
             )
           }
@@ -336,6 +373,16 @@ export const AIConversation = React.memo<AIConversationProps>(
                     isLoading: message.isLoading && !hasReasoning,
                   }}
                   showAvatar={showAvatars && hasDisplayContent}
+                  // Only on a settled reply with something to read: a save
+                  // offered beside a streaming or empty message would anchor a
+                  // snapshot to a turn that has not produced anything yet.
+                  onSave={
+                    index === lastReplyIndex && hasDisplayContent && !isStreaming
+                      ? onSaveWorkspace
+                      : undefined
+                  }
+                  isSaved={index === lastReplyIndex && isCurrentVersionSaved}
+                  isSaving={index === lastReplyIndex && isSavingWorkspace}
                 >
                   {/* Render reasoning-section for hidden tool results and subagents */}
                   {hasReasoning && (
@@ -406,18 +453,6 @@ export const AIConversation = React.memo<AIConversationProps>(
                     </ReasoningDisplay>
                   )}
                 </OrchestratorMessage>
-                {message.checkpointId && onRestoreCheckpoint && !message.isLoading && !hasReasoning && (
-                  <Checkpoint>
-                    <CheckpointIcon />
-                    <CheckpointTrigger
-                      onClick={() =>
-                        onRestoreCheckpoint(message.id, message.checkpointId!)
-                      }
-                    >
-                      Restore checkpoint
-                    </CheckpointTrigger>
-                  </Checkpoint>
-                )}
               </React.Fragment>
             )
           }
@@ -435,22 +470,10 @@ export const AIConversation = React.memo<AIConversationProps>(
                 }}
                 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, onRestoreCheckpoint]
+      [groupedMessages, showAvatars, onToolAction, onRestoreCheckpoint, onSaveWorkspace, isCurrentVersionSaved, isSavingWorkspace, lastReplyIndex]
     )
 
     return (

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

@@ -46,7 +46,8 @@ export const TRANSITION_NODE_SIZE = { width: 180, height: 52 };
  * 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.
+ * Direction is RIGHT (left-to-right) to match the mobile-app-flow reference UX
+ * this canvas was modeled on.
  */
 export async function routesToPreviewCanvas(
   manifest: AppRouteManifest,

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -18,6 +18,7 @@ import { TransitionNode } from "@/components/composites/TransitionNode";
 import { TriggerNode } from "@/components/composites/TriggerNode";
 import { SpatialContainerNode } from "@/components/composites/SpatialContainerNode";
 import { DevicePreviewNode } from "@/components/composites/DevicePreviewNode";
+import { AgentAnnotation } from "@/components/composites/AgentAnnotation";
 import type { WorkflowCanvasProps, WorkflowEdge } from "@/lib/workflow/interfaces";
 import "@xyflow/react/dist/style.css";
 
@@ -33,6 +34,7 @@ const nodeTypes = {
   trigger: TriggerNode,
   spatialContainer: SpatialContainerNode,
   devicePreview: DevicePreviewNode,
+  agentAnnotation: AgentAnnotation,
 };
 
 function WorkflowCanvasInner({
@@ -52,10 +54,35 @@ function WorkflowCanvasInner({
   topLeft,
   topRight,
   topCenter,
+  fitViewSignal,
   className,
 }: WorkflowCanvasProps) {
   const { fitView } = useReactFlow();
 
+  // Opt-in re-fit, e.g. after the device-preview toolbar's Route select
+  // switches to "All" and the node count/extent changes underneath the
+  // user. Deliberately keyed on `fitViewSignal` alone, not `nodes`/`edges`
+  // — those are new array references on nearly every render (activeEdgeIds
+  // toggling an edge's type, status polling, ...), so fitting view on
+  // every such change would override the user's own pan/zoom constantly.
+  useEffect(() => {
+    if (fitViewSignal === undefined) return;
+    // A plain synchronous call, and even a double-rAF, both raced xyflow's
+    // own internal node measurement — verified live in both cases: the
+    // resulting scale was far smaller than the two device-preview nodes'
+    // true combined width needed (computed against their real DOM rects:
+    // ~1.2 would tightly fit them, but fitView produced ~0.57 and one node
+    // still landed partly outside the pane). xyflow measures each node via
+    // ResizeObserver, which fires as a separate, unsynchronized callback —
+    // not guaranteed to have run even two animation frames after the nodes
+    // prop change lands. A short real-time delay is the standard, if
+    // inelegant, workaround for this exact class of race.
+    const timer = setTimeout(() => {
+      fitView({ padding: 0.2, duration: 300 });
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [fitViewSignal, fitView]);
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key === "/") {
@@ -125,9 +152,13 @@ function WorkflowCanvasInner({
           </Panel>
         )}
         {topCenter && (
+          // Rendered top-left, not top-center — the prop name is legacy
+          // (its one real consumer, the device-preview toolbar, moved to
+          // left alignment; nothing else uses this slot for content that
+          // actually wants centering).
           <Panel
             className="pointer-events-auto border-none bg-transparent p-0"
-            position="top-center"
+            position="top-left"
           >
             {topCenter}
           </Panel>

package/components/composites/AgentAnnotation/AgentAnnotation.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactFlowProvider } from "@xyflow/react";
+import { AgentAnnotation } from "./AgentAnnotation";
+import "@xyflow/react/dist/style.css";
+
+/**
+ * AgentAnnotation Composite Stories
+ *
+ * A wordless presence pin marking the screen or region an agent is actively
+ * working on, completed, or stopped with error.
+ *
+ * ## Features
+ * - Pulsing animated halo for active work
+ * - Accessible hover label and screen reader text
+ * - Color accents distinguishing concurrent agents
+ * - Counter-scaled to maintain constant screen size across viewport zoom
+ */
+const meta = {
+  title: "Composites/AgentAnnotation",
+  component: AgentAnnotation,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <ReactFlowProvider>
+        <div className="flex items-center justify-center p-8">
+          <Story />
+        </div>
+      </ReactFlowProvider>
+    ),
+  ],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Wordless presence pin marking the active, completed, or failed screen position of a sub-agent.",
+      },
+    },
+  },
+} satisfies Meta<typeof AgentAnnotation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Active: Story = {
+  args: {
+    id: "agent-pin-active",
+    selected: false,
+    data: {
+      type: "agentAnnotation",
+      agentName: "Coder Specialist",
+      status: "active",
+      colorIndex: 0,
+    },
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    id: "agent-pin-completed",
+    selected: false,
+    data: {
+      type: "agentAnnotation",
+      agentName: "Architect Specialist",
+      status: "completed",
+      colorIndex: 1,
+    },
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    id: "agent-pin-error",
+    selected: false,
+    data: {
+      type: "agentAnnotation",
+      agentName: "Review Specialist",
+      status: "error",
+      colorIndex: 3,
+    },
+  },
+};
+
+export const AmberAccent: Story = {
+  args: {
+    id: "agent-pin-amber",
+    selected: false,
+    data: {
+      type: "agentAnnotation",
+      agentName: "Data Engineer",
+      status: "active",
+      colorIndex: 2,
+    },
+  },
+};