@tangle-network/sandbox-ui 0.94.2 → 0.95.0

package/dist/{chunk-TIEOKIMX.js → chunk-3GX5BSD4.js}

@@ -1,4 +1,5 @@
 // src/hooks/use-session-stream.ts
+import { createParser } from "eventsource-parser";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 // src/hooks/wire-encoding.ts
@@ -22,6 +23,17 @@ function encodeTextForWire(text) {
 }
 
 // src/hooks/use-session-stream.ts
+var SessionStreamError = class extends Error {
+  code;
+  status;
+  constructor(code, message, status) {
+    super(message);
+    this.name = "SessionStreamError";
+    this.code = code;
+    this.status = status;
+  }
+};
+var SESSION_STREAM_RECONNECT_DELAY_MS = 1e3;
 function mapApiMessage(msg, counterRef) {
   const created = msg.info.timestamp ? new Date(msg.info.timestamp).getTime() : Date.now();
   const message = {
@@ -57,11 +69,39 @@ function mapApiMessage(msg, counterRef) {
   });
   return { message, parts };
 }
+function readErrorDetails(value) {
+  if (typeof value === "string") return { message: value };
+  if (!value || typeof value !== "object") return {};
+  const record = value;
+  const nested = readErrorDetails(record.error);
+  return {
+    code: (typeof record.code === "string" ? record.code : void 0) ?? nested.code,
+    message: (typeof record.message === "string" ? record.message : void 0) ?? nested.message
+  };
+}
+function formatError(details, fallback) {
+  const message = details.message ?? fallback;
+  return details.code && !message.includes(details.code) ? `${message} (${details.code})` : message;
+}
+async function responseError(res, prefix) {
+  let details = {};
+  try {
+    details = readErrorDetails(await res.json());
+  } catch {
+  }
+  const code = details.code ?? `HTTP_${res.status}`;
+  const fallback = `${prefix}: HTTP ${res.status}${res.statusText ? ` ${res.statusText}` : ""}`;
+  return new SessionStreamError(
+    code,
+    formatError(details, fallback),
+    res.status
+  );
+}
 async function fetchJson(url, token, init) {
   const headers = { Authorization: `Bearer ${token}` };
   if (init?.body) headers["Content-Type"] = "application/json";
   const res = await fetch(url, { ...init, headers: { ...headers, ...init?.headers }, credentials: "include" });
-  if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+  if (!res.ok) throw await responseError(res, "Request failed");
   return res.json();
 }
 function useSessionStream({
@@ -71,19 +111,28 @@ function useSessionStream({
   enabled = true
 }) {
   const [messages, setMessages] = useState([]);
-  const [partMap, setPartMap] = useState({});
+  const [partsState, setPartsState] = useState({
+    values: {},
+    sourceIds: {}
+  });
+  const partMap = partsState.values;
   const [isStreaming, setIsStreaming] = useState(false);
   const [error, setError] = useState(null);
   const [connected, setConnected] = useState(false);
   const abortRef = useRef(null);
   const reconnectTimerRef = useRef(null);
-  const streamingMsgIdRef = useRef(null);
+  const activeAssistantMessageIdsRef = useRef(/* @__PURE__ */ new Set());
+  const completedExecutionIdsRef = useRef(/* @__PURE__ */ new Set());
+  const lastEventIdRef = useRef("");
   const insertionCounterRef = useRef(0);
   const echoCounterRef = useRef(0);
   const pendingEchoesRef = useRef(/* @__PURE__ */ new Map());
   const handleSSEEventRef = useRef(null);
   useEffect(() => {
     pendingEchoesRef.current.clear();
+    activeAssistantMessageIdsRef.current.clear();
+    completedExecutionIdsRef.current.clear();
+    lastEventIdRef.current = "";
   }, [sessionId]);
   const refetch = useCallback(async () => {
     if (!token || !sessionId || !apiUrl) return;
@@ -98,13 +147,23 @@ function useSessionStream({
         newMessages.push(message);
         newPartMap[message.id] = parts;
       }
-      const echoes = [...pendingEchoesRef.current.values()];
+      const canonicalIds = new Set(newMessages.map((message) => message.id));
+      const echoes = [...pendingEchoesRef.current.entries()].filter(
+        ([, echo]) => !echo.canonicalMessageId || !canonicalIds.has(echo.canonicalMessageId)
+      ).map(([, echo]) => echo);
+      for (const [echoId, echo] of pendingEchoesRef.current) {
+        if (echo.canonicalMessageId && canonicalIds.has(echo.canonicalMessageId)) {
+          pendingEchoesRef.current.delete(echoId);
+        }
+      }
       setMessages([...newMessages, ...echoes.map((echo) => echo.message)]);
-      setPartMap({
-        ...newPartMap,
-        ...Object.fromEntries(echoes.map((echo) => [echo.message.id, echo.parts]))
+      setPartsState({
+        values: {
+          ...newPartMap,
+          ...Object.fromEntries(echoes.map((echo) => [echo.message.id, echo.parts]))
+        },
+        sourceIds: {}
       });
-      streamingMsgIdRef.current = null;
     } catch (err) {
       const msg = err instanceof Error ? err.message : "Failed to fetch messages";
       setError(msg);
@@ -120,59 +179,109 @@ function useSessionStream({
     const controller = new AbortController();
     abortRef.current = controller;
     try {
-      const url = `${apiUrl}/session/events?sessionId=${encodeURIComponent(sessionId)}`;
+      const eventQuery = new URLSearchParams({ sessionId });
+      const activeExecutionIds = [...activeAssistantMessageIdsRef.current];
+      if (activeExecutionIds.length === 1) {
+        eventQuery.set("executionId", activeExecutionIds[0]);
+      } else if (activeExecutionIds.length > 1) {
+        eventQuery.set("replayExecutionIds", activeExecutionIds.join(","));
+      }
+      if (lastEventIdRef.current) {
+        eventQuery.set("since", lastEventIdRef.current);
+      }
+      const url = `${apiUrl}/session/events?${eventQuery.toString()}`;
       const res = await fetch(url, {
         headers: { Authorization: `Bearer ${token}` },
         signal: controller.signal,
         credentials: "include"
       });
-      if (!res.ok) throw new Error(`SSE connection failed: ${res.status}`);
+      if (!res.ok) throw await responseError(res, "Live response connection failed");
       setConnected(true);
       setError(null);
       const reader = res.body?.getReader();
       if (!reader) throw new Error("No response body");
       const decoder = new TextDecoder();
-      let buffer = "";
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const frames = buffer.split("\n\n");
-        buffer = frames.pop() ?? "";
-        for (const frame of frames) {
-          if (!frame.trim()) continue;
-          let eventType = "message";
-          const dataLines = [];
-          for (const line of frame.split("\n")) {
-            if (line.startsWith("event:")) {
-              eventType = line.slice(6).trim();
-            } else if (line.startsWith("data:")) {
-              dataLines.push(line.slice(5).trim());
-            }
-          }
-          if (dataLines.length === 0) continue;
-          let parsed;
+      let parserFailure = null;
+      const parser = createParser({
+        onEvent(event) {
+          if (event.id) lastEventIdRef.current = event.id;
+          if (!event.data) return;
           try {
-            parsed = JSON.parse(dataLines.join("\n"));
+            const parsed = JSON.parse(event.data);
+            handleSSEEventRef.current?.(event.event ?? "message", parsed);
           } catch {
-            continue;
+            parserFailure = new SessionStreamError(
+              "INVALID_SESSION_EVENT",
+              "The live response stream sent malformed data."
+            );
           }
-          handleSSEEventRef.current?.(eventType, parsed);
+        },
+        onError(parseError) {
+          parserFailure = new SessionStreamError(
+            "INVALID_EVENT_STREAM",
+            `The live response stream could not be parsed: ${parseError.message}`
+          );
         }
+      });
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        parser.feed(decoder.decode(value, { stream: true }));
+        if (parserFailure) throw parserFailure;
       }
+      const tail = decoder.decode();
+      if (tail) parser.feed(tail);
+      parser.reset({ consume: true });
+      if (parserFailure) throw parserFailure;
+      throw new SessionStreamError(
+        "SESSION_STREAM_CLOSED",
+        "The live response stream closed before the session ended. Reconnecting\u2026"
+      );
     } catch (err) {
       if (err.name === "AbortError") return;
       const msg = err instanceof Error ? err.message : "SSE connection error";
       setError(msg);
       setConnected(false);
       if (!controller.signal.aborted) {
-        reconnectTimerRef.current = setTimeout(() => connectSSE(), 3e3);
+        reconnectTimerRef.current = setTimeout(
+          () => connectSSE(),
+          SESSION_STREAM_RECONNECT_DELAY_MS
+        );
       }
     }
   }, [apiUrl, token, sessionId, enabled]);
   const handleSSEEvent = useCallback((type, raw) => {
     const envelope = raw?.properties;
     const props = envelope?.info ?? envelope?.part ?? envelope ?? raw;
+    const associatePendingEcho = (executionId) => {
+      for (const echo of pendingEchoesRef.current.values()) {
+        if (!echo.executionId) {
+          echo.executionId = executionId;
+          return;
+        }
+      }
+    };
+    const retireExecution = (executionId) => {
+      if (!executionId) {
+        const activeExecutionIds = [...activeAssistantMessageIdsRef.current];
+        if (activeExecutionIds.length === 1) {
+          return retireExecution(activeExecutionIds[0]);
+        }
+        if (activeExecutionIds.length > 1) {
+          return true;
+        }
+        pendingEchoesRef.current.clear();
+        return false;
+      }
+      completedExecutionIdsRef.current.add(executionId);
+      activeAssistantMessageIdsRef.current.delete(executionId);
+      for (const [echoId, echo] of pendingEchoesRef.current) {
+        if (echo.executionId === executionId || !echo.executionId && pendingEchoesRef.current.size === 1) {
+          pendingEchoesRef.current.delete(echoId);
+        }
+      }
+      return activeAssistantMessageIdsRef.current.size > 0;
+    };
     if (type === "message.updated") {
       const id = props.id ?? props.messageId ?? "";
       const role = props.role ?? "assistant";
@@ -191,28 +300,51 @@ function useSessionStream({
         ];
       });
       if (role === "assistant") {
-        streamingMsgIdRef.current = id;
-        setIsStreaming(true);
+        associatePendingEcho(id);
+        if (!completedExecutionIdsRef.current.has(id)) {
+          activeAssistantMessageIdsRef.current.add(id);
+          setIsStreaming(true);
+        }
       }
     } else if (type === "message.part.updated") {
-      const msgId = streamingMsgIdRef.current;
+      const msgId = props.messageID ?? props.messageId ?? "";
       if (!msgId) return;
       const partType = props.type ?? "text";
-      setIsStreaming(true);
-      setPartMap((prev) => {
-        const existing = prev[msgId] ?? [];
+      const sourcePartId = props.id ?? `${partType}-${msgId}`;
+      associatePendingEcho(msgId);
+      if (!completedExecutionIdsRef.current.has(msgId)) {
+        activeAssistantMessageIdsRef.current.add(msgId);
+        setIsStreaming(true);
+      }
+      setMessages((prev) => {
+        if (prev.some((message) => message.id === msgId)) return prev;
+        return [
+          ...prev,
+          {
+            id: msgId,
+            role: "assistant",
+            time: { created: Date.now() },
+            _insertionIndex: insertionCounterRef.current++
+          }
+        ];
+      });
+      setPartsState((prev) => {
+        const existing = prev.values[msgId] ?? [];
+        const sourceIds = prev.sourceIds[msgId] ?? [];
         const updated = [...existing];
+        const updatedSourceIds = [...sourceIds];
+        const knownIndex = sourceIds.indexOf(sourcePartId);
         if (partType === "text") {
           const text = props.text ?? props.content ?? "";
-          const idx = updated.findIndex((p) => p.type === "text");
           const textPart = { type: "text", text };
-          if (idx >= 0) {
-            updated[idx] = textPart;
+          if (knownIndex >= 0) {
+            updated[knownIndex] = textPart;
           } else {
+            updatedSourceIds.push(sourcePartId);
             updated.push(textPart);
           }
         } else if (partType === "tool") {
-          const toolId = props.id ?? props.toolId ?? `tool-${Date.now()}`;
+          const toolId = props.id ?? props.toolId ?? sourcePartId;
           const toolName = props.tool ?? props.name ?? "unknown";
           const state = props.state ?? { status: "running" };
           const toolPart = {
@@ -228,41 +360,69 @@ function useSessionStream({
               time: state.time
             }
           };
-          const idx = updated.findIndex((p) => p.type === "tool" && p.id === toolId);
-          if (idx >= 0) {
-            updated[idx] = toolPart;
+          if (knownIndex >= 0) {
+            updated[knownIndex] = toolPart;
           } else {
+            updatedSourceIds.push(sourcePartId);
             updated.push(toolPart);
           }
         } else if (partType === "reasoning") {
           const text = props.text ?? "";
-          const idx = updated.findIndex((p) => p.type === "reasoning");
           const reasoningPart = { type: "reasoning", text };
-          if (idx >= 0) {
-            updated[idx] = reasoningPart;
+          if (knownIndex >= 0) {
+            updated[knownIndex] = reasoningPart;
           } else {
+            updatedSourceIds.push(sourcePartId);
             updated.push(reasoningPart);
           }
+        } else {
+          return prev;
         }
-        return { ...prev, [msgId]: updated };
+        return {
+          values: { ...prev.values, [msgId]: updated },
+          sourceIds: { ...prev.sourceIds, [msgId]: updatedSourceIds }
+        };
       });
     } else if (type === "session.idle") {
-      setIsStreaming(false);
-      streamingMsgIdRef.current = null;
-      pendingEchoesRef.current.clear();
-      refetch();
+      const executionId = props.executionId ?? props.executionID ?? "";
+      const stillStreaming = retireExecution(executionId);
+      setIsStreaming(stillStreaming);
+      if (!stillStreaming) refetch();
     } else if (type === "session.error") {
-      setIsStreaming(false);
-      streamingMsgIdRef.current = null;
-      const errorMsg = props.error ?? props.message ?? "Agent error";
-      setError(errorMsg);
-      pendingEchoesRef.current.clear();
-      refetch();
+      const executionId = props.executionId ?? props.executionID ?? "";
+      const stillStreaming = retireExecution(executionId);
+      setIsStreaming(stillStreaming);
+      setError(formatError(readErrorDetails(props), "Agent response failed"));
+      if (!stillStreaming) refetch();
     }
   }, [refetch]);
   handleSSEEventRef.current = handleSSEEvent;
   const send = useCallback(async (text, options) => {
-    if (!token || !sessionId || !apiUrl) return;
+    if (!token || !sessionId || !apiUrl || !enabled) {
+      const admissionError = new SessionStreamError(
+        "CHAT_NOT_READY",
+        "Chat is not ready yet. Wait for the session connection and try again."
+      );
+      setError(admissionError.message);
+      throw admissionError;
+    }
+    if (!connected) {
+      const admissionError = new SessionStreamError(
+        "CHAT_DISCONNECTED",
+        "Chat is reconnecting. Your message was not sent."
+      );
+      setError(admissionError.message);
+      throw admissionError;
+    }
+    if (pendingEchoesRef.current.size > 0 || activeAssistantMessageIdsRef.current.size > 0) {
+      const admissionError = new SessionStreamError(
+        "CHAT_BUSY",
+        "The agent is still responding. Wait for this turn to finish before sending another message."
+      );
+      setError(admissionError.message);
+      throw admissionError;
+    }
+    setError(null);
     const echoId = `local-echo-${echoCounterRef.current++}`;
     const echo = {
       message: {
@@ -275,11 +435,14 @@ function useSessionStream({
     };
     pendingEchoesRef.current.set(echoId, echo);
     setMessages((prev) => [...prev, echo.message]);
-    setPartMap((prev) => ({ ...prev, [echoId]: echo.parts }));
+    setPartsState((prev) => ({
+      values: { ...prev.values, [echoId]: echo.parts },
+      sourceIds: prev.sourceIds
+    }));
     setIsStreaming(true);
     try {
       const url = `${apiUrl}/session/sessions/${encodeURIComponent(sessionId)}/messages`;
-      await fetchJson(url, token, {
+      const response = await fetchJson(url, token, {
         method: "POST",
         body: JSON.stringify({
           // The sidecar base64-decodes every text part at the route boundary;
@@ -291,22 +454,37 @@ function useSessionStream({
           ...options?.reasoningEffort ? { reasoningEffort: options.reasoningEffort } : {}
         })
       });
+      if (response.userMessageId) {
+        const pending = pendingEchoesRef.current.get(echoId);
+        if (pending) pending.canonicalMessageId = response.userMessageId;
+      }
+      const executionId = response.info?.id;
+      if (executionId) {
+        const pending = pendingEchoesRef.current.get(echoId);
+        if (pending) pending.executionId = executionId;
+        if (!completedExecutionIdsRef.current.has(executionId)) {
+          activeAssistantMessageIdsRef.current.add(executionId);
+        }
+      }
     } catch (err) {
       pendingEchoesRef.current.delete(echoId);
       setMessages((prev) => prev.filter((message) => message.id !== echoId));
-      setPartMap((prev) => {
-        if (!(echoId in prev)) return prev;
-        const next = { ...prev };
-        delete next[echoId];
-        return next;
+      setPartsState((prev) => {
+        if (!(echoId in prev.values)) return prev;
+        const values = { ...prev.values };
+        const sourceIds = { ...prev.sourceIds };
+        delete values[echoId];
+        delete sourceIds[echoId];
+        return { values, sourceIds };
       });
-      if (pendingEchoesRef.current.size === 0 && !streamingMsgIdRef.current) {
+      if (pendingEchoesRef.current.size === 0 && activeAssistantMessageIdsRef.current.size === 0) {
         setIsStreaming(false);
       }
       const msg = err instanceof Error ? err.message : "Failed to send message";
       setError(msg);
+      throw err;
     }
-  }, [apiUrl, token, sessionId]);
+  }, [apiUrl, connected, enabled, token, sessionId]);
   const abort = useCallback(async () => {
     if (!token || !sessionId || !apiUrl) return;
     try {
@@ -440,6 +618,8 @@ function useSidecarAuth({ resourceId, apiUrl, signMessage }) {
 }
 
 export {
+  SessionStreamError,
+  SESSION_STREAM_RECONNECT_DELAY_MS,
   useSessionStream,
   useSidecarAuth
 };

package/dist/{chunk-7QKAVIZX.js → chunk-O7MHUR4U.js}

@@ -237,9 +237,29 @@ var EDGE_LABEL_LANE = 180;
 var CARD_CHROME = 20;
 var HEADER_ROW = 34;
 var DESCRIPTION_ROW = 40;
-var META_ROW = 27;
-var OUTPUT_ROWS = 3;
-var OUTPUT_ROW = 89;
+var AGENT_BODY_ROWS = 5;
+var ACTION_OUTPUT_ROWS = 3;
+var STRUCTURAL_OUTPUT_ROWS = 1;
+var WELL_PROSE_LINE = 15.125;
+var WELL_JSON_LINE = 14.4375;
+var WELL_JSON_GAP = 2;
+var WELL_CHROME = 39.5;
+function wellRow(rows) {
+  const body = Math.max(
+    rows * WELL_PROSE_LINE,
+    rows * WELL_JSON_LINE + (rows - 1) * WELL_JSON_GAP
+  );
+  return Math.ceil(WELL_CHROME + body) + 3;
+}
+var SLIM_HEADER_ROW = 22;
+var BODY_LINE = 15.125;
+var AGENT_BODY_ROW = Math.ceil(8 + AGENT_BODY_ROWS * BODY_LINE);
+var CHIP_SLOT_ROW = 22;
+var DECISION_HEADER_ROW = 45;
+var STRUCTURAL_KINDS = /* @__PURE__ */ new Set(["parallel", "foreach"]);
+function isStructuralKind(kind) {
+  return kind !== void 0 && STRUCTURAL_KINDS.has(kind);
+}
 var OUTPUT_PREVIEW_CHARS = 240;
 var FOOTER_ROW = 28;
 var COMPACT_TILE = 76;
@@ -258,10 +278,19 @@ var COMPACT_NODE_SIZE_TB = {
   height: COMPACT_TILE
 };
 function nodeHeight(data, withRunState) {
-  let h = CARD_CHROME + HEADER_ROW;
-  if (data.description) h += DESCRIPTION_ROW;
-  if (withRunState) h += META_ROW + OUTPUT_ROW + FOOTER_ROW;
-  return h;
+  if (!withRunState || data.tone === "trigger") {
+    return CARD_CHROME + HEADER_ROW + (data.description ? DESCRIPTION_ROW : 0);
+  }
+  if (data.kind === "decision") {
+    return CARD_CHROME + DECISION_HEADER_ROW + DESCRIPTION_ROW + FOOTER_ROW;
+  }
+  if (isStructuralKind(data.kind)) {
+    return CARD_CHROME + HEADER_ROW + CHIP_SLOT_ROW + FOOTER_ROW;
+  }
+  if (data.kind === "agent.run") {
+    return CARD_CHROME + SLIM_HEADER_ROW + AGENT_BODY_ROW + FOOTER_ROW;
+  }
+  return CARD_CHROME + HEADER_ROW + wellRow(ACTION_OUTPUT_ROWS) + FOOTER_ROW;
 }
 function geometry(compact, runMode, direction) {
   if (compact) {
@@ -552,6 +581,75 @@ function describeTrigger(on) {
     asRecord(kind ? rec[kind] : void 0)
   );
 }
+var WRAP_TARGET_ASPECT = 742 / 480;
+var WRAP_ASPECT_TRIGGER = 4.2;
+var WRAP_ROW_GAP = 28;
+function foldColumns(count, cellW, cellH, colSep, rowSep) {
+  let best = count;
+  let bestError = Number.POSITIVE_INFINITY;
+  for (let cols = 1; cols <= count; cols++) {
+    const rows = Math.ceil(count / cols);
+    const width = cols * cellW + (cols - 1) * colSep;
+    const height = rows * cellH + (rows - 1) * rowSep;
+    const error = Math.abs(Math.log(width / height / WRAP_TARGET_ASPECT));
+    if (error < bestError) {
+      bestError = error;
+      best = cols;
+    }
+  }
+  return best;
+}
+function layoutSerpentine(nodes, edges, colSep, laneSep) {
+  const rowSep = Math.max(laneSep, WRAP_ROW_GAP);
+  const byRank = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const arr = byRank.get(n.rank);
+    if (arr) arr.push(n);
+    else byRank.set(n.rank, [n]);
+  }
+  const ranks = [...byRank.keys()].sort((a, b) => a - b);
+  if (ranks.some((r) => byRank.get(r).length !== 1)) return null;
+  const rankOf = new Map(nodes.map((n) => [n.id, n.rank]));
+  const joinsNextLayer = (e) => {
+    const from = rankOf.get(e.source);
+    const to = rankOf.get(e.target);
+    return from !== void 0 && to !== void 0 && to === from + 1;
+  };
+  if (!edges.every(joinsNextLayer)) return null;
+  const ordered = ranks.map((r) => byRank.get(r)[0]);
+  const count = ordered.length;
+  const cellW = Math.max(...ordered.map((n) => n.width));
+  const cellH = Math.max(...ordered.map((n) => n.height));
+  const lineAspect = (count * cellW + (count - 1) * colSep) / cellH;
+  if (lineAspect <= WRAP_TARGET_ASPECT * WRAP_ASPECT_TRIGGER) return null;
+  const cols = foldColumns(count, cellW, cellH, colSep, rowSep);
+  if (cols >= count) return null;
+  return ordered.map((node, i) => {
+    const row = Math.floor(i / cols);
+    const indexInRow = i % cols;
+    const leftToRight = row % 2 === 0;
+    const col = leftToRight ? indexInRow : cols - 1 - indexInRow;
+    return {
+      id: node.id,
+      position: {
+        x: col * (cellW + colSep) + (cellW - node.width) / 2,
+        y: row * (cellH + rowSep) + (cellH - node.height) / 2
+      },
+      width: node.width,
+      height: node.height,
+      data: node.data,
+      // Every node leaves the way its row travels and is entered from behind —
+      // including the one that turns the corner. Mirroring puts the last cell
+      // of a row directly above the first cell of the next, so a turn is
+      // source-right into target-right (or left into left): the renderer draws
+      // it as a bracket in the margin beside the column. Routing it through the
+      // BOTTOM instead would have to start below the name that sits under the
+      // tile, leaving the arrow floating clear of the node it comes from.
+      targetSide: leftToRight ? "left" : "right",
+      sourceSide: leftToRight ? "right" : "left"
+    };
+  });
+}
 function layoutLayers(nodes, direction, rankSep, crossSep) {
   const isLR = direction === "LR";
   const mainSize = (n) => isLR ? n.width : n.height;
@@ -778,8 +876,9 @@ function buildWorkflowGraph(yaml, options) {
     (e) => e.whenLabel !== void 0 || e.backEdge === true
   );
   const rankSep = labelled ? Math.max(geo.rankSep, EDGE_LABEL_LANE) : geo.rankSep;
+  const folded = options?.wrap && direction === "LR" && !labelled ? layoutSerpentine(logical, edges, rankSep, geo.crossSep) : null;
   return {
-    nodes: layoutLayers(logical, direction, rankSep, geo.crossSep),
+    nodes: folded ?? layoutLayers(logical, direction, rankSep, geo.crossSep),
     edges,
     error: null
   };
@@ -797,7 +896,10 @@ export {
   triggerNodeIndex,
   actionNodeId,
   branchNodeId,
-  OUTPUT_ROWS,
+  AGENT_BODY_ROWS,
+  ACTION_OUTPUT_ROWS,
+  STRUCTURAL_OUTPUT_ROWS,
+  isStructuralKind,
   OUTPUT_PREVIEW_CHARS,
   COMPACT_TILE,
   COMPACT_NODE_SIZE,

package/dist/globals.css

@@ -643,6 +643,24 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
   }
+  .line-clamp-4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+  }
+  .line-clamp-5 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+  }
+  .line-clamp-6 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 6;
+  }
   .block {
     display: block;
   }
@@ -805,6 +823,9 @@
   .h-\[28rem\] {
     height: 28rem;
   }
+  .h-\[30rem\] {
+    height: 30rem;
+  }
   .h-\[32rem\] {
     height: 32rem;
   }

package/dist/hooks.d.ts

@@ -1,7 +1,7 @@
 export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from '@tangle-network/ui/hooks';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { Session } from './types.js';
-export { e as SendMessageOptions, S as SessionInfo, a as SidecarAuth, U as UseSessionStreamOptions, b as UseSessionStreamResult, c as UseSidecarAuthOptions, u as useSessionStream, d as useSidecarAuth } from './sdk-hooks-VtiMwKa6.js';
+export { e as SESSION_STREAM_RECONNECT_DELAY_MS, f as SendMessageOptions, S as SessionInfo, g as SessionStreamError, a as SidecarAuth, U as UseSessionStreamOptions, b as UseSessionStreamResult, c as UseSidecarAuthOptions, u as useSessionStream, d as useSidecarAuth } from './sdk-hooks-Cjt_Wq7g.js';
 import '@tangle-network/ui/types';
 import '@tangle-network/ui/stores';
 import '@tangle-network/ui/sdk-hooks';