ai-design-system 0.1.86 → 0.1.91

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,7 @@ interface AIMessage {
   isLoading?: boolean;
   blocks?: AIMessageBlock[];
   checkpointId?: string;
+  attachments?: UserMessageAttachment[];
 }
 
 export interface AIConversationProps
@@ -293,8 +289,11 @@ export const AIConversation = React.memo<AIConversationProps>(
                   content: contentStr,
                   avatarSrc: message.avatarSrc,
                   avatarName: message.avatarName,
+                  attachments: message.attachments,
+                  checkpointId: message.checkpointId,
                 }}
                 showAvatar={showAvatars}
+                onRestore={onRestoreCheckpoint}
               />
             )
           }
@@ -406,18 +405,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,18 +422,6 @@ 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>
           )
         }),

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

@@ -6,6 +6,8 @@ import {
   type Connection,
   type Node,
   useReactFlow,
+  useStoreApi,
+  useUpdateNodeInternals,
 } from "@xyflow/react";
 import { useCallback, useEffect } from "react";
 import { Canvas } from "@/components/ai-elements/canvas";
@@ -18,9 +20,26 @@ 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";
 
+// Bounded retry for node measurement — see the effect in WorkflowCanvasInner.
+//
+// ~30s, which sounds long and is not. The loop stops the instant every node
+// reports handleBounds, so in the ordinary case it ends after one pass; the cap
+// only bounds the pathological case where a node never appears at all.
+//
+// It was 3s, and that was too short for the case this exists to fix. The grid's
+// device nodes each carry an iframe, and on a cold sandbox they are not in the
+// DOM until Metro has served a bundle. `useUpdateNodeInternals` silently drops
+// every id it cannot resolve, so a window that closes before the iframes mount
+// spends all its attempts on nothing and gives up — leaving exactly the blank
+// canvas of edgeless nodes it was added to prevent. Verified live: all five
+// nodes resolvable, all five still `handleBounds: NULL`.
+const MEASURE_RETRY_MS = 250;
+const MEASURE_MAX_ATTEMPTS = 120;
+
 const edgeTypes = {
   straight: Edge.Strict,
   animated: Edge.Animated,
@@ -33,6 +52,7 @@ const nodeTypes = {
   trigger: TriggerNode,
   spatialContainer: SpatialContainerNode,
   devicePreview: DevicePreviewNode,
+  agentAnnotation: AgentAnnotation,
 };
 
 function WorkflowCanvasInner({
@@ -52,9 +72,95 @@ function WorkflowCanvasInner({
   topLeft,
   topRight,
   topCenter,
+  fitViewSignal,
   className,
 }: WorkflowCanvasProps) {
   const { fitView } = useReactFlow();
+  const updateNodeInternals = useUpdateNodeInternals();
+  const store = useStoreApi();
+
+  /**
+   * Force xyflow to measure the nodes it is showing.
+   *
+   * xyflow will not draw an edge until BOTH endpoints have `handleBounds` —
+   * the measured position of each handle within its node — and those come from
+   * one place only: the per-node ResizeObserver. Publishing `initialWidth` /
+   * `initialHeight` (which the preview nodes do) satisfies the separate
+   * `nodeHasDimensions` check that controls VISIBILITY, and does nothing for
+   * `handleBounds`. The two are easy to conflate and fail very differently.
+   *
+   * When that observer does not deliver — it fires as an unsynchronized
+   * callback (see the fitView effect below, which works around the same race),
+   * and reports nothing for a node that is re-created but never changes size —
+   * the result is not a missing node. It is a canvas of perfectly normal nodes
+   * with EVERY edge silently absent: `edgeLookup` holds them all, each with
+   * valid endpoints and handle ids, and not one is rendered. Observed live with
+   * all five nodes at `measured: {}` and `handleBounds: null` while their DOM
+   * elements had real size, and xyflow logged no warning.
+   *
+   * Keyed on the node ids rather than the `nodes` array, which is a new
+   * reference on nearly every render.
+   *
+   * RETRIED, not fired once, because the request is silently dropped when it
+   * is early. `useUpdateNodeInternals` resolves each id through
+   * `domNode.querySelector('.react-flow__node[data-id=...]')` and keeps only
+   * the ones it finds — a node that has not mounted yet is skipped with no
+   * error and no retry, and since the id list has not changed, the effect
+   * never runs again. One shot at 60ms worked for the single-device view and
+   * missed the grid every time, where five nodes carrying iframes mount later.
+   * So it repeats until the store actually reports `handleBounds`, and stops
+   * the moment it does.
+   */
+  const nodeIdSignature = nodes.map((n) => n.id).join("|");
+  useEffect(() => {
+    if (!nodeIdSignature) return;
+    const ids = nodeIdSignature.split("|");
+    let attempts = 0;
+    let timer: ReturnType<typeof setTimeout>;
+
+    const measured = () => {
+      const lookup = store.getState().nodeLookup;
+      return ids.every((id) => !!lookup.get(id)?.internals?.handleBounds);
+    };
+
+    const pass = () => {
+      updateNodeInternals(ids);
+      attempts += 1;
+      // `updateNodeInternals` defers its own work to a rAF, so the result is
+      // only readable on a later tick — hence check on the next timer rather
+      // than immediately after the call.
+      timer = setTimeout(() => {
+        if (!measured() && attempts < MEASURE_MAX_ATTEMPTS) pass();
+      }, MEASURE_RETRY_MS);
+    };
+
+    timer = setTimeout(pass, 60);
+    return () => clearTimeout(timer);
+  }, [nodeIdSignature, updateNodeInternals, store]);
+
+  // 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) => {
@@ -125,9 +231,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,
+    },
+  },
+};