ai-design-system 0.1.31 → 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/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/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])

package/dist/index.cjs

@@ -8223,7 +8223,7 @@ var Node2 = (_a) => {
     Card,
     __spreadProps(__spreadValues({
       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
@@ -8284,7 +8284,7 @@ var StateNode = React3.memo(({ data, selected, id }) => {
     Node2,
     {
       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"
@@ -8295,12 +8295,11 @@ var StateNode = React3.memo(({ data, selected, id }) => {
       children: [
         isDisabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1 left-1 rounded-full bg-gray-500/50 p-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "size-3 text-white" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full items-center justify-center gap-1.5 px-3 py-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { className: "size-3 shrink-0 text-primary", strokeWidth: 1.5 }),
-          "        ",
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(NodeTitle, { className: "text-xs font-medium leading-tight", children: displayTitle }),
-            displayDescription && /* @__PURE__ */ jsxRuntime.jsx(NodeDescription, { className: "text-[10px] leading-tight mt-0.5", children: displayDescription })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(NodeTitle, { className: "line-clamp-2 text-center text-xs font-medium leading-tight", title: displayTitle, children: displayTitle }),
+            displayDescription && /* @__PURE__ */ jsxRuntime.jsx(NodeDescription, { className: "mt-0.5 line-clamp-2 text-center text-[10px] leading-tight", title: displayDescription, children: displayDescription })
           ] })
         ] })
       ]
@@ -8320,7 +8319,7 @@ var TransitionNode = React3.memo(
       Node2,
       {
         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}`,
@@ -8341,11 +8340,11 @@ var TransitionNode = React3.memo(
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full items-center justify-center gap-1.5 px-3 py-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranch, { className: "size-3 shrink-0 text-muted-foreground", strokeWidth: 1.5 }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(NodeTitle, { className: "text-xs font-medium leading-tight", children: displayTitle }),
-              displayDescription && /* @__PURE__ */ jsxRuntime.jsx(NodeDescription, { className: "text-[10px] leading-tight mt-0.5", children: displayDescription })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(NodeTitle, { className: "line-clamp-2 text-center text-xs font-medium leading-tight", title: displayTitle, children: displayTitle }),
+              displayDescription && /* @__PURE__ */ jsxRuntime.jsx(NodeDescription, { className: "mt-0.5 line-clamp-2 text-center text-[10px] leading-tight", title: displayDescription, children: displayDescription })
             ] })
           ] })
         ]
@@ -8741,7 +8740,7 @@ var WorkflowRunObservabilityDetailsPanel = React3__namespace.memo(
             events.length,
             ")"
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("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", children: events.slice(0, 3).map((event) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-1 text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("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", children: events.map((event) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-1 text-xs", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { children: event.title }),
             event.timestamp ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96]", children: event.timestamp }) : null
           ] }, event.id)) })
@@ -9225,74 +9224,47 @@ var Temporary = ({
     }
   );
 };
-var getHandleCoordsByPosition = (node, handlePosition, handleType) => {
-  var _a, _b;
-  const handle = (_b = (_a = node.internals.handleBounds) == null ? void 0 : _a[handleType]) == null ? void 0 : _b.find(
-    (h) => h.position === handlePosition
-  );
-  if (!handle) {
-    return [0, 0];
-  }
-  let offsetX = handle.width / 2;
-  let offsetY = handle.height / 2;
-  switch (handlePosition) {
-    case react$2.Position.Left:
-      offsetX = 0;
-      break;
-    case react$2.Position.Right:
-      offsetX = handle.width;
-      break;
-    case react$2.Position.Top:
-      offsetY = 0;
-      break;
-    case react$2.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];
-};
-var getEdgeParams = (source, target) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const sx = source.internals.positionAbsolute.x + ((_b = (_a = source.measured) == null ? void 0 : _a.width) != null ? _b : 0) / 2;
-  const sy = source.internals.positionAbsolute.y + ((_d = (_c = source.measured) == null ? void 0 : _c.height) != null ? _d : 0) / 2;
-  const tx = target.internals.positionAbsolute.x + ((_f = (_e = target.measured) == null ? void 0 : _e.width) != null ? _f : 0) / 2;
-  const ty = target.internals.positionAbsolute.y + ((_h = (_g = target.measured) == null ? void 0 : _g.height) != null ? _h : 0) / 2;
-  const dx = tx - sx;
-  const dy = ty - sy;
-  let sourcePos;
-  let targetPos;
-  if (Math.abs(dx) > Math.abs(dy)) {
-    sourcePos = dx > 0 ? react$2.Position.Right : react$2.Position.Left;
-    targetPos = dx > 0 ? react$2.Position.Left : react$2.Position.Right;
-  } else {
-    sourcePos = dy > 0 ? react$2.Position.Bottom : react$2.Position.Top;
-    targetPos = dy > 0 ? react$2.Position.Top : react$2.Position.Bottom;
-  }
-  const [srcX, srcY] = getHandleCoordsByPosition(source, sourcePos, "source");
-  const [tgtX, tgtY] = getHandleCoordsByPosition(target, targetPos, "target");
-  return { sx: srcX, sy: srcY, tx: tgtX, ty: tgtY, sourcePos, targetPos };
+var Strict = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style
+}) => {
+  const [edgePath] = react$2.getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 0
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(react$2.BaseEdge, { id, markerEnd, path: edgePath, style });
 };
-var Animated = ({ id, source, target, markerEnd, style }) => {
-  const sourceNode = react$2.useInternalNode(source);
-  const targetNode = react$2.useInternalNode(target);
-  if (!(sourceNode && targetNode)) {
-    return null;
-  }
-  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
-    sourceNode,
-    targetNode
-  );
-  const [edgePath] = react$2.getBezierPath({
-    sourceX: sx,
-    sourceY: sy,
-    sourcePosition: sourcePos,
-    targetX: tx,
-    targetY: ty,
-    targetPosition: targetPos
+var Animated = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style
+}) => {
+  const [edgePath] = react$2.getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 0
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(react$2.BaseEdge, { id, markerEnd, path: edgePath, style }),
@@ -9300,6 +9272,7 @@ var Animated = ({ id, source, target, markerEnd, style }) => {
   ] });
 };
 var Edge = {
+  Strict,
   Temporary,
   Animated
 };
@@ -9316,6 +9289,7 @@ var Panel = (_a) => {
   );
 };
 var edgeTypes = {
+  straight: Edge.Strict,
   animated: Edge.Animated,
   temporary: Edge.Temporary
 };
@@ -10348,9 +10322,12 @@ var WorkflowObservabilityFeature = React3__namespace.memo(
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border p-6 text-muted-foreground text-sm", children: "Select a run to inspect trace, events, and streams." });
     const rootSections = React3__namespace.useMemo(() => {
+      var _a, _b;
       if (!inbox) {
         return null;
       }
+      const inboxDefaultSize = (_a = inbox.defaultSize) != null ? _a : 25;
+      const inboxMinSize = (_b = inbox.minSize) != null ? _b : 25;
       return [
         {
           id: "inbox",
@@ -10367,13 +10344,15 @@ var WorkflowObservabilityFeature = React3__namespace.memo(
               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]);