ai-design-system 0.1.30 → 0.1.32

package/components/ai-elements/edge.tsx

@@ -1,12 +1,8 @@
 import {
   BaseEdge,
   type EdgeProps,
-  getBezierPath,
   getSimpleBezierPath,
-  type InternalNode,
-  type Node,
-  Position,
-  useInternalNode,
+  getSmoothStepPath,
 } from "@xyflow/react";
 
 const Temporary = ({
@@ -39,97 +35,49 @@ const Temporary = ({
   );
 };
 
-const getHandleCoordsByPosition = (
-  node: InternalNode<Node>,
-  handlePosition: Position,
-  handleType: "source" | "target"
-) => {
-  const handle = node.internals.handleBounds?.[handleType]?.find(
-    (h) => h.position === handlePosition
-  );
-
-  if (!handle) {
-    return [0, 0] as const;
-  }
-
-  let offsetX = handle.width / 2;
-  let offsetY = handle.height / 2;
-
-  switch (handlePosition) {
-    case Position.Left:
-      offsetX = 0;
-      break;
-    case Position.Right:
-      offsetX = handle.width;
-      break;
-    case Position.Top:
-      offsetY = 0;
-      break;
-    case Position.Bottom:
-      offsetY = handle.height;
-      break;
-    default:
-      throw new Error(`Invalid handle position: ${handlePosition}`);
-  }
-
-  const x = node.internals.positionAbsolute.x + handle.x + offsetX;
-  const y = node.internals.positionAbsolute.y + handle.y + offsetY;
-
-  return [x, y] as const;
-};
-
-const getEdgeParams = (
-  source: InternalNode<Node>,
-  target: InternalNode<Node>
-) => {
-  const sx = source.internals.positionAbsolute.x + (source.measured?.width ?? 0) / 2;
-  const sy = source.internals.positionAbsolute.y + (source.measured?.height ?? 0) / 2;
-  const tx = target.internals.positionAbsolute.x + (target.measured?.width ?? 0) / 2;
-  const ty = target.internals.positionAbsolute.y + (target.measured?.height ?? 0) / 2;
-
-  const dx = tx - sx;
-  const dy = ty - sy;
-
-  // Pick source/target positions based on dominant direction
-  let sourcePos: Position;
-  let targetPos: Position;
-
-  if (Math.abs(dx) > Math.abs(dy)) {
-    // Horizontal dominant
-    sourcePos = dx > 0 ? Position.Right : Position.Left;
-    targetPos = dx > 0 ? Position.Left : Position.Right;
-  } else {
-    // Vertical dominant
-    sourcePos = dy > 0 ? Position.Bottom : Position.Top;
-    targetPos = dy > 0 ? Position.Top : Position.Bottom;
-  }
-
-  const [srcX, srcY] = getHandleCoordsByPosition(source, sourcePos, "source");
-  const [tgtX, tgtY] = getHandleCoordsByPosition(target, targetPos, "target");
+const Strict = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style,
+}: EdgeProps) => {
+  const [edgePath] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 0,
+  });
 
-  return { sx: srcX, sy: srcY, tx: tgtX, ty: tgtY, sourcePos, targetPos };
+  return <BaseEdge id={id} markerEnd={markerEnd} path={edgePath} style={style} />;
 };
 
-const Animated = ({ id, source, target, markerEnd, style }: EdgeProps) => {
-  const sourceNode = useInternalNode(source);
-  const targetNode = useInternalNode(target);
-
-  if (!(sourceNode && targetNode)) {
-    return null;
-  }
-
-  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
-    sourceNode,
-    targetNode
-  );
-
-  const [edgePath] = getBezierPath({
-    sourceX: sx,
-    sourceY: sy,
-    sourcePosition: sourcePos,
-    targetX: tx,
-    targetY: ty,
-    targetPosition: targetPos,
+const Animated = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style,
+}: EdgeProps) => {
+  const [edgePath] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 0,
   });
 
   return (
@@ -143,6 +91,7 @@ const Animated = ({ id, source, target, markerEnd, style }: EdgeProps) => {
 };
 
 export const Edge = {
+  Strict,
   Temporary,
   Animated,
 };

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 size-full h-auto w-sm gap-0 rounded-md bg-card p-0 transition-all duration-200",
+      "node-container 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

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -24,6 +24,7 @@ import type { WorkflowCanvasProps, WorkflowEdge } from "./interfaces";
 import "@xyflow/react/dist/style.css";
 
 const edgeTypes = {
+  straight: Edge.Strict,
   animated: Edge.Animated,
   temporary: Edge.Temporary,
 };

package/components/composites/LoadingShimmer/LoadingShimmer.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { Shimmer } from "@/components/ai-elements/shimmer"
+import { cn } from "@/lib/utils"
+import type { LoadingShimmerProps } from "./interfaces"
+
+export const LoadingShimmer = React.memo<LoadingShimmerProps>(({ message = "Loading...", className }) => {
+  return (
+    <div className={cn("flex h-full min-h-0 flex-1 items-center justify-center px-6 py-10", className)}>
+      <div className="w-full max-w-3xl space-y-5">
+        <Shimmer className="text-sm text-muted-foreground">{message}</Shimmer>
+        <div className="space-y-3">
+          <div className="h-10 w-1/3 animate-pulse rounded-md bg-muted/70" />
+          <div className="h-24 w-full animate-pulse rounded-xl bg-muted/60" />
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="h-36 animate-pulse rounded-xl bg-muted/55" />
+            <div className="h-36 animate-pulse rounded-xl bg-muted/55" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+LoadingShimmer.displayName = "LoadingShimmer"

package/components/composites/LoadingShimmer/index.ts

@@ -0,0 +1,2 @@
+export { LoadingShimmer } from './LoadingShimmer'
+export type { LoadingShimmerProps } from './interfaces'

package/components/composites/LoadingShimmer/interfaces.ts

@@ -0,0 +1,4 @@
+export interface LoadingShimmerProps {
+  message?: string
+  className?: string
+}

package/components/composites/StateNode/StateNode.tsx

@@ -68,7 +68,7 @@ export const StateNode = memo(({ data, selected, id }: StateNodeProps) => {
   return (
     <Node
       className={cn(
-        "relative flex h-auto w-auto min-w-[120px] max-w-[180px] flex-col items-center justify-center border border-border bg-card shadow-none transition-all duration-150 ease-out",
+        "relative flex flex-col items-center justify-center border border-border bg-card shadow-none transition-all duration-150 ease-out",
         selected && "border-primary border-2",
         isTerminal && "border-2 border-primary",
         isDisabled && "opacity-50"
@@ -87,11 +87,14 @@ export const StateNode = memo(({ data, selected, id }: StateNodeProps) => {
       {/* Status indicator badge in top right */}
       <StatusBadge status={status} />
 
-      <div className="flex items-center gap-1.5 px-3 py-2">
-        <Zap className="size-3 shrink-0 text-primary" strokeWidth={1.5} />        <div className="flex flex-col">
-          <NodeTitle className="text-xs font-medium leading-tight">{displayTitle}</NodeTitle>
+      <div className="flex h-full w-full items-center justify-center gap-1.5 px-3 py-2">
+        <Zap className="size-3 shrink-0 text-primary" strokeWidth={1.5} />
+        <div className="min-w-0 flex-1 text-center">
+          <NodeTitle className="line-clamp-2 text-center text-xs font-medium leading-tight" title={displayTitle}>
+            {displayTitle}
+          </NodeTitle>
           {displayDescription && (
-            <NodeDescription className="text-[10px] leading-tight mt-0.5">
+            <NodeDescription className="mt-0.5 line-clamp-2 text-center text-[10px] leading-tight" title={displayDescription}>
               {displayDescription}
             </NodeDescription>
           )}

package/components/composites/TransitionNode/TransitionNode.tsx

@@ -53,7 +53,7 @@ export const TransitionNode = memo(
     return (
       <Node
         className={cn(
-          "flex h-auto w-auto min-w-[120px] max-w-[180px] flex-col items-center justify-center border border-border bg-muted/40 shadow-none transition-all duration-150 ease-out",
+          "flex flex-col items-center justify-center border border-border bg-secondary text-secondary-foreground shadow-none transition-all duration-150 ease-out",
           selected && "border-primary border-2"
         )}
         data-testid={`transition-node-${id}`}
@@ -78,12 +78,14 @@ export const TransitionNode = memo(
           </div>
         )}
 
-        <div className="flex items-center gap-1.5 px-3 py-2">
+        <div className="flex h-full w-full items-center justify-center gap-1.5 px-3 py-2">
           <GitBranch className="size-3 shrink-0 text-muted-foreground" strokeWidth={1.5} />
-          <div className="flex flex-col">
-            <NodeTitle className="text-xs font-medium leading-tight">{displayTitle}</NodeTitle>
+          <div className="min-w-0 flex-1 text-center">
+            <NodeTitle className="line-clamp-2 text-center text-xs font-medium leading-tight" title={displayTitle}>
+              {displayTitle}
+            </NodeTitle>
             {displayDescription && (
-              <NodeDescription className="text-[10px] leading-tight mt-0.5">
+              <NodeDescription className="mt-0.5 line-clamp-2 text-center text-[10px] leading-tight" title={displayDescription}>
                 {displayDescription}
               </NodeDescription>
             )}

package/components/composites/WorkflowRunObservabilityPanel/WorkflowRunObservabilityPanel.tsx

@@ -484,7 +484,7 @@ export const WorkflowRunObservabilityDetailsPanel = React.memo<WorkflowRunObserv
         <div className="space-y-2 border-t border-[#23242a] pt-3">
           <div className="font-medium text-sm">Events ({events.length})</div>
           <div className="max-h-32 divide-y divide-[#23242a] overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
-            {events.slice(0, 3).map((event) => (
+            {events.map((event) => (
               <div className="px-2 py-1 text-xs" key={event.id}>
                 <div>{event.title}</div>
                 {event.timestamp ? (

package/components/composites/index.ts

@@ -118,6 +118,10 @@ export * from './AdjustableLayout'
 export * from './PageContainer'
 export type { PageContainerProps } from './PageContainer'
 
+// LoadingShimmer Composite
+export { LoadingShimmer } from './LoadingShimmer'
+export type { LoadingShimmerProps } from './LoadingShimmer'
+
 // StateNode Composite
 export { StateNode } from './StateNode'
 export type { StateNodeData } from './StateNode'

package/components/features/PageLayout/PageLayout.tsx

@@ -4,26 +4,11 @@ import { LayoutProvider } from "@/components/blocks/LayoutProvider"
 import { SectionLayout } from "@/components/blocks/SectionLayout/SectionLayout"
 import type { SectionLayoutSection } from "@/components/blocks/SectionLayout/interfaces"
 import { AppHeader, type AppHeaderProps } from "@/components/composites/AppHeader"
+import { LoadingShimmer } from "@/components/composites/LoadingShimmer"
 import { PageContainer } from "@/components/composites/PageContainer"
 
 function PageLayoutLoadingState({ message }: { message: string }) {
-  return (
-    <div className="flex h-full min-h-0 flex-1 items-center justify-center px-6 py-10">
-      <div className="w-full max-w-3xl space-y-5">
-        <div className="inline-flex w-fit animate-pulse rounded-md bg-muted px-3 py-1 text-sm text-muted-foreground">
-          {message}
-        </div>
-        <div className="space-y-3">
-          <div className="h-10 w-1/3 animate-pulse rounded-md bg-muted/70" />
-          <div className="h-24 w-full animate-pulse rounded-xl bg-muted/60" />
-          <div className="grid gap-3 md:grid-cols-2">
-            <div className="h-36 animate-pulse rounded-xl bg-muted/55" />
-            <div className="h-36 animate-pulse rounded-xl bg-muted/55" />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
+  return <LoadingShimmer message={message} />
 }
 
 /**
@@ -181,17 +166,13 @@ export const PageLayout = React.memo<PageLayoutProps>(
       </PageContainer>
     )
 
-    if (!sidebar) {
-      return pageContainer
-    }
-
     return (
       <LayoutProvider
         defaultOpen={defaultSidebarOpen}
         sidebarWidth={sidebarWidth}
         sidebarWidthIcon={sidebarWidthIcon}
       >
-        <AppSidebar {...sidebar} />
+        {sidebar ? <AppSidebar {...sidebar} /> : null}
         {pageContainer}
       </LayoutProvider>
     )

package/components/features/WorkflowObservabilityFeature/WorkflowObservabilityFeature.stories.tsx

@@ -52,10 +52,75 @@ const baseArgs: Story["args"] = {
   className: "h-full",
 }
 
+const hookFocusedRunActions = [
+  { id: 'wake-up-hook', label: 'Resume Hook', resourceTypes: ['hook'], tone: 'neutral' as const, surface: 'details' as const },
+  { id: 'cancel-hook', label: 'Cancel Hook', resourceTypes: ['hook'], tone: 'danger' as const, surface: 'menu' as const },
+]
+
+const sleepFocusedRunActions = [
+  { id: 'wake-up-sleep', label: 'Wake Up Sleep', resourceTypes: ['sleep'], tone: 'amber' as const, surface: 'details' as const },
+  { id: 'cancel-active-sleeps', label: 'Cancel Active Sleeps', resourceTypes: ['sleep'], tone: 'danger' as const, surface: 'menu' as const },
+]
+
 export const Default: Story = {
   args: baseArgs,
 }
 
+export const NoSelection: Story = {
+  args: {
+    ...baseArgs,
+    selectedRun: null,
+    selectedSpanId: null,
+  },
+}
+
+export const SelectedTraceRunDetails: Story = {
+  args: {
+    ...baseArgs,
+    selectedSpanId: 'span_generateBirthdayCard',
+  },
+}
+
+export const HookSuspensionState: Story = {
+  args: {
+    ...baseArgs,
+    selectedSpanId: 'hook_01KP45XGJK16SW3BS6GGC5A04B',
+    runActions: hookFocusedRunActions,
+  },
+}
+
+export const SleepSuspensionState: Story = {
+  args: {
+    ...baseArgs,
+    selectedSpanId: 'sleep_wait_01KP45XGJK16SW3BS6GGC5A04H',
+    runActions: sleepFocusedRunActions,
+  },
+}
+
+export const LiveUpdateSnapshot: Story = {
+  args: {
+    ...baseArgs,
+    events: [
+      ...workflowEventRecordsMock,
+      {
+        id: 'evt_4',
+        title: 'run_resumed',
+        timestamp: '4/13/2026, 12:46:12 PM',
+        description: 'Workflow resumed after manual approval.',
+      },
+    ],
+    streams: [
+      ...workflowStreamRecordsMock,
+      {
+        id: 'stream_3',
+        channel: 'event',
+        payload: JSON.stringify({ event_type: 'run_resumed', actor: 'manager' }),
+        timestamp: '12:46:12 PM',
+      },
+    ],
+  },
+}
+
 export const WithStateManagement: Story = {
   args: baseArgs,
   render: () => {

package/components/features/WorkflowObservabilityFeature/WorkflowObservabilityFeature.tsx

@@ -175,6 +175,9 @@ export const WorkflowObservabilityFeature = React.memo<WorkflowObservabilityFeat
         return null
       }
 
+      const inboxDefaultSize = inbox.defaultSize ?? 25
+      const inboxMinSize = inbox.minSize ?? 25
+
       return [
         {
           id: "inbox",
@@ -190,13 +193,15 @@ export const WorkflowObservabilityFeature = React.memo<WorkflowObservabilityFeat
               className="h-full"
             />
           ),
-          fixedSize: "16rem",
+          defaultSize: inboxDefaultSize,
+          minSize: inboxMinSize,
+          maxSize: 45,
         },
         {
           id: "observability",
           content: observabilityContent,
-          defaultSize: 70,
-          minSize: 40,
+          defaultSize: 100 - inboxDefaultSize,
+          minSize: 50,
         },
       ]
     }, [inbox, observabilityContent])