@percena/weft-react 0.1.4 → 0.1.5-next.1

package/dist/index.js

@@ -166,7 +166,13 @@ import { createContext as createContext3, useContext as useContext3 } from "reac
 import { jsx as jsx32 } from "react/jsx-runtime";
 import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
-import { useCallback as useCallback8, useRef as useRef7, useState as useState10, useEffect as useEffect6 } from "react";
+import { useState as useState10, useEffect as useEffect6 } from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useEffect as useEffect7 } from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useCallback as useCallback8, useRef as useRef7, useState as useState11, useEffect as useEffect8 } from "react";
 function getAssistantTurnUiKey(turn, index) {
   if (turn.response?.messageId) {
     return `assistant:msg:${turn.response.messageId}`;
@@ -5117,6 +5123,162 @@ function PendingIndicator({
     delay
   )) }) });
 }
+function AssistantTurnCard({
+  sessionId,
+  turn,
+  isLast,
+  onInspectActivity
+}) {
+  const [isExpanded, setIsExpanded] = useState10(true);
+  const [expandedActivityGroups, setExpandedActivityGroups] = useState10(/* @__PURE__ */ new Set());
+  useEffect6(() => {
+    if (turn.isStreaming) {
+      setIsExpanded(true);
+    }
+  }, [turn.isStreaming]);
+  return /* @__PURE__ */ jsx35(
+    TurnCard,
+    {
+      sessionId,
+      turnId: turn.turnId,
+      activities: turn.activities,
+      response: turn.response,
+      intent: turn.intent,
+      isStreaming: turn.isStreaming,
+      isComplete: turn.isComplete,
+      isExpanded,
+      onExpandedChange: setIsExpanded,
+      expandedActivityGroups,
+      onExpandedActivityGroupsChange: setExpandedActivityGroups,
+      onOpenActivityDetails: onInspectActivity,
+      hasEditOrWriteActivities: turn.activities.some(
+        (activity) => activity.toolName === "Edit" || activity.toolName === "Write"
+      ),
+      todos: turn.todos,
+      isLastResponse: isLast,
+      displayMode: "detailed",
+      animateResponse: true,
+      annotationInteractionMode: "tooltip-only"
+    }
+  );
+}
+function ActivityInspector({
+  activity,
+  onClose
+}) {
+  if (!activity) {
+    return /* @__PURE__ */ jsx36("div", { className: "rounded-[8px] bg-background shadow-minimal p-4 text-[13px] text-muted-foreground", children: "Select an activity from the turn card to inspect its input and output." });
+  }
+  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex items-start justify-between gap-3 border-b border-border px-4 py-3", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx36("div", { className: "truncate text-[13px] font-medium text-foreground", children: activity.displayName ?? activity.toolName ?? "Activity" }),
+        /* @__PURE__ */ jsx36("div", { className: "mt-1 text-[12px] text-muted-foreground", children: activity.intent ?? activity.status ?? "unknown" })
+      ] }),
+      onClose && /* @__PURE__ */ jsx36(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "flex h-7 w-7 items-center justify-center rounded-[6px] text-[16px] leading-none text-muted-foreground transition hover:bg-foreground/[0.06] hover:text-foreground",
+          "aria-label": "Close activity details",
+          children: "\u2715"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "overflow-y-auto space-y-4 p-4", children: [
+      activity.toolInput && /* @__PURE__ */ jsxs19("div", { children: [
+        /* @__PURE__ */ jsx36("div", { className: "mb-2 text-[12px] font-medium text-muted-foreground", children: "Input" }),
+        /* @__PURE__ */ jsx36("pre", { className: "max-h-[280px] overflow-auto rounded-[6px] bg-foreground/[0.04] p-3 text-[12px] leading-relaxed text-foreground", children: JSON.stringify(activity.toolInput, null, 2) })
+      ] }),
+      activity.error && /* @__PURE__ */ jsxs19("div", { children: [
+        /* @__PURE__ */ jsx36("div", { className: "mb-2 text-[12px] font-medium text-muted-foreground", children: "Error" }),
+        /* @__PURE__ */ jsx36("pre", { className: "max-h-[320px] overflow-auto whitespace-pre-wrap rounded-[6px] bg-foreground/[0.04] p-3 text-[12px] leading-relaxed text-foreground", children: activity.error })
+      ] }),
+      activity.content && !activity.error && /* @__PURE__ */ jsxs19("div", { children: [
+        /* @__PURE__ */ jsx36("div", { className: "mb-2 text-[12px] font-medium text-muted-foreground", children: "Output" }),
+        /* @__PURE__ */ jsx36("div", { className: "max-h-[320px] overflow-y-auto rounded-[6px] bg-foreground/[0.04] px-3 py-2 text-[12px] text-foreground", children: /* @__PURE__ */ jsx36(Markdown, { mode: "minimal", className: "text-[12px] leading-relaxed", children: activity.content }) })
+      ] })
+    ] })
+  ] });
+}
+function ActivityDetailsPanel({
+  activity,
+  onClose
+}) {
+  useEffect7(() => {
+    if (!activity) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [activity, onClose]);
+  if (!activity) return null;
+  return /* @__PURE__ */ jsx37(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-background/60 backdrop-blur-sm",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsx37(
+        "div",
+        {
+          className: "relative w-full max-w-[640px] max-h-[80vh] overflow-hidden rounded-[12px] border border-border bg-background shadow-strong mx-4",
+          onClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsx37(ActivityInspector, { activity, onClose })
+        }
+      )
+    }
+  );
+}
+var PERMISSION_CONFIG = [
+  { mode: "safe", label: "Explore", description: "Read-only planning and inspection.", icon: "\u25CE" },
+  { mode: "ask", label: "Ask", description: "Review changes before execution.", icon: "\u24D8" },
+  { mode: "allow-all", label: "Execute", description: "Allow edits and commands in this session.", icon: "\u21C4" }
+];
+function PermissionModeMenu({
+  value,
+  onChange,
+  onClose,
+  isOpen,
+  onToggle
+}) {
+  const selected = PERMISSION_CONFIG.find((o) => o.mode === value) ?? PERMISSION_CONFIG[1];
+  return /* @__PURE__ */ jsxs20("div", { className: "relative", children: [
+    isOpen && /* @__PURE__ */ jsx38("div", { className: "absolute bottom-[calc(100%+6px)] left-0 z-20 w-[204px] rounded-[9px] border border-border bg-background p-1.5 shadow-modal-small", children: /* @__PURE__ */ jsx38("div", { className: "space-y-0.5", children: PERMISSION_CONFIG.map((option) => /* @__PURE__ */ jsxs20(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onChange(option.mode);
+          onClose?.();
+        },
+        className: `flex h-8 w-full items-center gap-2 rounded-[6px] px-2 text-left text-[12px] transition ${option.mode === value ? "bg-foreground/[0.08] text-foreground" : "text-muted-foreground hover:bg-foreground/[0.05] hover:text-foreground"}`,
+        children: [
+          /* @__PURE__ */ jsx38("span", { className: "w-4 text-center text-[12px]", children: option.icon }),
+          /* @__PURE__ */ jsx38("span", { className: "flex-1", children: option.label }),
+          option.mode === value && /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", className: "text-[12px] text-foreground", children: "\u25CF" })
+        ]
+      },
+      option.mode
+    )) }) }),
+    /* @__PURE__ */ jsxs20(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        onClick: onToggle,
+        className: "inline-flex h-8 items-center gap-1.5 rounded-[7px] border border-border bg-foreground/[0.035] px-2.5 text-[12px] text-foreground transition hover:bg-foreground/[0.06]",
+        children: [
+          /* @__PURE__ */ jsx38("span", { className: "text-muted-foreground", children: selected.icon }),
+          /* @__PURE__ */ jsx38("span", { children: selected.label }),
+          /* @__PURE__ */ jsx38("span", { className: "text-muted-foreground", children: "\u2304" })
+        ]
+      }
+    )
+  ] });
+}
 function generateMessageId2() {
   return generateMessageId();
 }
@@ -5199,6 +5361,24 @@ function handleTextDelta(state, event) {
   const streamingIndex = findStreamingMessage(session.messages, event.turnId);
   if (streamingIndex !== -1) {
     const currentMsg = session.messages[streamingIndex];
+    if (currentMsg.isIntermediate && !event.isIntermediate) {
+      const closedSession = updateMessageAt(session, streamingIndex, {
+        isStreaming: false
+      });
+      const newMessage2 = {
+        id: generateMessageId2(),
+        role: "assistant",
+        content: event.delta,
+        timestamp: event.timestamp ?? Date.now(),
+        isStreaming: true,
+        isPending: true,
+        turnId: event.turnId
+      };
+      return {
+        session: appendMessage(closedSession, newMessage2, false),
+        streaming: { content: event.delta, turnId: event.turnId }
+      };
+    }
     const updatedSession = updateMessageAt(session, streamingIndex, {
       content: currentMsg.content + event.delta
     });
@@ -5211,7 +5391,8 @@ function handleTextDelta(state, event) {
     timestamp: event.timestamp ?? Date.now(),
     isStreaming: true,
     isPending: true,
-    turnId: event.turnId
+    turnId: event.turnId,
+    ...event.isIntermediate ? { isIntermediate: true } : {}
   };
   return {
     session: appendMessage(session, newMessage, false),
@@ -5221,12 +5402,15 @@ function handleTextDelta(state, event) {
 function handleTextComplete(state, event) {
   const { session, streaming } = state;
   let msgIndex = findStreamingMessage(session.messages, event.turnId);
+  if (msgIndex !== -1 && event.isIntermediate && !session.messages[msgIndex].isIntermediate) {
+    msgIndex = -1;
+  }
   if (msgIndex === -1) {
     msgIndex = findAssistantMessage(session.messages, event.turnId);
   }
   if (msgIndex !== -1) {
     const existingMsg = session.messages[msgIndex];
-    if (!existingMsg.isStreaming && existingMsg.isIntermediate && event.isIntermediate) {
+    if (!existingMsg.isStreaming && existingMsg.isIntermediate && !existingMsg.isPending) {
       msgIndex = -1;
     }
   }
@@ -6294,14 +6478,16 @@ function mapCoreEventToProcessorEvent(coreEvent, sessionId) {
         type: "text_delta",
         sessionId,
         delta: coreEvent.text,
-        turnId: coreEvent.turnId
+        turnId: coreEvent.turnId,
+        isIntermediate: true
       };
     case "reasoning":
       return {
         type: "text_complete",
         sessionId,
         text: coreEvent.text,
-        turnId: coreEvent.turnId
+        turnId: coreEvent.turnId,
+        isIntermediate: true
       };
     case "permission_response":
       return {
@@ -6341,7 +6527,8 @@ function mapTimelineEnvelopeToProcessorEvent(envelope) {
         sessionId,
         delta: item.text,
         turnId: item.turnId,
-        timestamp
+        timestamp,
+        ...item.type === "reasoning_delta" && { isIntermediate: true }
       };
     case "assistant_message":
     case "reasoning":
@@ -6351,7 +6538,8 @@ function mapTimelineEnvelopeToProcessorEvent(envelope) {
         text: item.text,
         turnId: item.turnId,
         timestamp,
-        messageId: item.messageId
+        messageId: item.messageId,
+        ...item.type === "reasoning" && { isIntermediate: true }
       };
     case "tool_call":
       return {
@@ -6518,6 +6706,10 @@ function normalizeTimelineToolName(name) {
   return name;
 }
 function optionalToolDisplayName(toolName, detail) {
+  if (detail && typeof detail === "object") {
+    const explicit = detail.displayName;
+    if (typeof explicit === "string" && explicit) return { toolDisplayName: explicit };
+  }
   if (toolName !== "commandExecution") return {};
   const displayName = commandDisplayName(detail);
   return displayName ? { toolDisplayName: displayName } : {};
@@ -6653,10 +6845,10 @@ function normalizeTokenUsage(usage) {
 }
 function useEventProcessor(options) {
   const { eventSource, sessionId, workspaceId, workspaceName, onEffect, onError, onClose } = options;
-  const [session, setSession] = useState10(null);
+  const [session, setSession] = useState11(null);
   const sessionRef = useRef7(null);
   const streamingStates = useRef7(/* @__PURE__ */ new Map());
-  const [isConnected, setIsConnected] = useState10(false);
+  const [isConnected, setIsConnected] = useState11(false);
   const processedCount = useRef7(0);
   const processAgentEvent = useCallback8((event) => {
     const processorEvent = mapCoreEventToProcessorEvent(event, sessionId);
@@ -6678,7 +6870,7 @@ function useEventProcessor(options) {
       effects: result.effects
     };
   }, [sessionId, workspaceId, workspaceName]);
-  useEffect6(() => {
+  useEffect8(() => {
     eventSource.connect(
       (coreEvent) => {
         const result = processAgentEvent(coreEvent);
@@ -6837,7 +7029,7 @@ var InProcessEventSource = class {
 
 // ../local-chat/dist/index.js
 import { useState as useState22 } from "react";
-import { useCallback as useCallback9, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef8, useState as useState11 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef8, useState as useState12 } from "react";
 
 // ../timeline/dist/index.js
 function createTimelineCursor(cursor) {
@@ -6885,7 +7077,7 @@ function timelineKey(item) {
 }
 
 // ../local-chat/dist/index.js
-import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
 import { useCallback as useCallback22, useEffect as useEffect22, useMemo as useMemo22, useRef as useRef22, useState as useState32 } from "react";
 import { jsx as jsx210, jsxs as jsxs22 } from "react/jsx-runtime";
 function createAgentChatPanelModel(args) {
@@ -6974,8 +7166,8 @@ function createTimelineDetailItems(timeline) {
 }
 function useAgentChatSession(options) {
   const { runtime, workspaceId = "local-workspace", workspaceName = "Local Workspace" } = options;
-  const [auth, setAuth] = useState11(null);
-  const [error, setError] = useState11(null);
+  const [auth, setAuth] = useState12(null);
+  const [error, setError] = useState12(null);
   const processor = useEventProcessor({
     eventSource: runtime.events,
     sessionId: runtime.sessionId,
@@ -7022,13 +7214,13 @@ function useAgentChatSession(options) {
 }
 function useTimelineAgentChatSession(options) {
   const { runtime, workspaceId = "local-workspace", workspaceName = "Local Workspace" } = options;
-  const [timeline, setTimeline] = useState11([]);
-  const [capabilityReport, setCapabilityReport] = useState11(null);
-  const [error, setError] = useState11(null);
-  const [isReconnecting, setIsReconnecting] = useState11(false);
-  const [hasGap, setHasGap] = useState11(false);
+  const [timeline, setTimeline] = useState12([]);
+  const [capabilityReport, setCapabilityReport] = useState12(null);
+  const [error, setError] = useState12(null);
+  const [isReconnecting, setIsReconnecting] = useState12(false);
+  const [hasGap, setHasGap] = useState12(false);
   const lastCursorRef = useRef8(null);
-  useEffect7(() => {
+  useEffect9(() => {
     let catchupAbort = false;
     const onEvent = (envelope) => {
       lastCursorRef.current = { epoch: envelope.epoch, afterSeq: envelope.seq };
@@ -7334,8 +7526,8 @@ function AgentChatPanel({
     }
   }
   const storedSession = chat.session ? toStoredSession(chat.session, workspaceId) : createEmptyStoredSession(runtime.sessionId, workspaceId, workspaceName);
-  const footer = /* @__PURE__ */ jsxs19("form", { onSubmit: handleSubmit, className: "flex gap-2 p-3", children: [
-    /* @__PURE__ */ jsx35(
+  const footer = /* @__PURE__ */ jsxs21("form", { onSubmit: handleSubmit, className: "flex gap-2 p-3", children: [
+    /* @__PURE__ */ jsx39(
       "textarea",
       {
         value: draft,
@@ -7345,7 +7537,7 @@ function AgentChatPanel({
         className: "min-h-10 flex-1 resize-none rounded-md border px-3 py-2 text-sm"
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx39(
       "button",
       {
         type: "submit",
@@ -7354,7 +7546,7 @@ function AgentChatPanel({
         children: "Send"
       }
     ),
-    chat.isRunning && /* @__PURE__ */ jsx35(
+    chat.isRunning && /* @__PURE__ */ jsx39(
       "button",
       {
         type: "button",
@@ -7364,9 +7556,9 @@ function AgentChatPanel({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs19("div", { className, children: [
-    chat.error && /* @__PURE__ */ jsx35("div", { className: "border-b px-3 py-2 text-sm text-red-600", children: chat.error.message }),
-    /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs21("div", { className, children: [
+    chat.error && /* @__PURE__ */ jsx39("div", { className: "border-b px-3 py-2 text-sm text-red-600", children: chat.error.message }),
+    /* @__PURE__ */ jsx39(
       SessionViewer,
       {
         session: storedSession,
@@ -7442,10 +7634,7 @@ function TimelineAgentChatPanel({
   const [selectedActivity, setSelectedActivity] = useState32(null);
   const [selectedDetail, setSelectedDetail] = useState32(null);
   const [permissionMode, setPermissionMode] = useState32("ask");
-  const [turnExpandOverride, setTurnExpandOverride] = useState32({});
-  const handleTurnExpandedChange = useCallback22((turnId, expanded) => {
-    setTurnExpandOverride((prev) => ({ ...prev, [turnId]: expanded }));
-  }, []);
+  const [isPermMenuOpen, setIsPermMenuOpen] = useState32(false);
   const runtimeState = runtime.getState();
   const isWaitingPermission = runtimeState.status === "waiting_for_permission";
   const waitingRequestId = runtimeState.waitingPermissionRequestId;
@@ -7499,28 +7688,13 @@ function TimelineAgentChatPanel({
           return /* @__PURE__ */ jsx210("div", { className: "flex justify-end py-1", children: /* @__PURE__ */ jsx210(UserMessageBubble, { content: turn.message.content }) }, `user-${turn.message.id}`);
         }
         if (turn.type === "assistant") {
-          const isLast = index === chat.turns.length - 1;
-          const defaultExpanded = turn.isStreaming || isLast && chat.isRunning;
-          const isExpanded = turnExpandOverride[turn.turnId] ?? defaultExpanded;
           return /* @__PURE__ */ jsx210(
-            TurnCard,
+            AssistantTurnCard,
             {
               sessionId: workspaceId,
-              turnId: turn.turnId,
-              activities: turn.activities,
-              response: turn.response,
-              intent: turn.intent,
-              isStreaming: turn.isStreaming,
-              isComplete: turn.isComplete,
-              isExpanded,
-              onExpandedChange: (expanded) => handleTurnExpandedChange(turn.turnId, expanded),
-              onOpenActivityDetails: setSelectedActivity,
-              hasEditOrWriteActivities: turn.activities.some(
-                (a) => a.toolName === "Edit" || a.toolName === "Write"
-              ),
-              todos: turn.todos,
-              isLastResponse: isLast,
-              displayMode: "detailed"
+              turn,
+              isLast: index === chat.turns.length - 1,
+              onInspectActivity: setSelectedActivity
             },
             `assistant-${turn.turnId}`
           );
@@ -7610,24 +7784,19 @@ function TimelineAgentChatPanel({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs22("label", { className: "flex items-center gap-2 text-[12px] text-muted-foreground", children: [
-        /* @__PURE__ */ jsx210("span", { className: "shrink-0", children: "Tool permissions" }),
-        /* @__PURE__ */ jsxs22(
-          "select",
-          {
-            value: permissionMode,
-            onChange: (e) => setPermissionMode(e.currentTarget.value),
-            className: "rounded-[6px] border border-border bg-background px-2 py-1 text-[12px] text-foreground outline-none focus:ring-1 focus:ring-accent",
-            children: [
-              /* @__PURE__ */ jsx210("option", { value: "ask", children: "Ask before each tool" }),
-              /* @__PURE__ */ jsx210("option", { value: "allow-all", children: "Auto-run (no prompts)" })
-            ]
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsx210(
+        PermissionModeMenu,
+        {
+          value: permissionMode,
+          onChange: setPermissionMode,
+          onClose: () => setIsPermMenuOpen(false),
+          isOpen: isPermMenuOpen,
+          onToggle: () => setIsPermMenuOpen((o) => !o)
+        }
+      )
     ] }) }),
-    selectedActivity && /* @__PURE__ */ jsx210(
-      ActivityDetailOverlay,
+    /* @__PURE__ */ jsx210(
+      ActivityDetailsPanel,
       {
         activity: selectedActivity,
         onClose: () => setSelectedActivity(null)
@@ -7635,74 +7804,6 @@ function TimelineAgentChatPanel({
     )
   ] });
 }
-function formatActivityValue(value) {
-  if (value == null) return "";
-  if (typeof value === "string") return value;
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-}
-function ActivityDetailOverlay({
-  activity,
-  onClose
-}) {
-  const title = activity.displayName || activity.toolName || activity.type;
-  const input = activity.toolInput && Object.keys(activity.toolInput).length > 0 ? formatActivityValue(activity.toolInput) : "";
-  const result = formatActivityValue(activity.content);
-  return /* @__PURE__ */ jsx210(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
-      onClick: onClose,
-      role: "presentation",
-      children: /* @__PURE__ */ jsxs22(
-        "div",
-        {
-          className: "flex max-h-[80vh] w-full max-w-[640px] flex-col overflow-hidden rounded-[10px] border border-border bg-background shadow-lg",
-          onClick: (e) => e.stopPropagation(),
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": `${title} details`,
-          children: [
-            /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between gap-2 border-b border-border px-4 py-3", children: [
-              /* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx210("div", { className: "truncate text-[13px] font-medium text-foreground", children: title }),
-                /* @__PURE__ */ jsxs22("div", { className: "text-[11px] text-muted-foreground", children: [
-                  activity.type,
-                  " \xB7 ",
-                  activity.status
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx210(
-                "button",
-                {
-                  type: "button",
-                  onClick: onClose,
-                  className: "shrink-0 rounded-[6px] px-2 py-1 text-[12px] text-muted-foreground transition hover:bg-foreground/[0.06] hover:text-foreground",
-                  children: "Close"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs22("div", { className: "flex-1 overflow-y-auto px-4 py-3 space-y-3", children: [
-              activity.error && /* @__PURE__ */ jsx210("div", { className: "rounded-[6px] bg-red-500/[0.08] px-3 py-2 text-[12px] text-red-600", children: activity.error }),
-              input && /* @__PURE__ */ jsxs22("div", { children: [
-                /* @__PURE__ */ jsx210("div", { className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground", children: "Request" }),
-                /* @__PURE__ */ jsx210("pre", { className: "overflow-x-auto rounded-[6px] bg-foreground/[0.04] px-3 py-2 text-[12px] text-foreground whitespace-pre-wrap break-words", children: input })
-              ] }),
-              result && /* @__PURE__ */ jsxs22("div", { children: [
-                /* @__PURE__ */ jsx210("div", { className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground", children: "Result" }),
-                /* @__PURE__ */ jsx210("pre", { className: "overflow-x-auto rounded-[6px] bg-foreground/[0.04] px-3 py-2 text-[12px] text-foreground whitespace-pre-wrap break-words", children: result })
-              ] }),
-              !input && !result && !activity.error && /* @__PURE__ */ jsx210("div", { className: "text-[12px] text-muted-foreground", children: "No additional detail for this step." })
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}
 
 // ../runtime-core/dist/index.js
 var RUNTIME_KINDS = ["native-sdk", "app-server", "compatible-sdk", "cli-fallback"];
@@ -8270,7 +8371,7 @@ var PushTimelineStream = class {
 };
 
 // src/use-agent-session.ts
-import { useEffect as useEffect8, useMemo as useMemo9, useRef as useRef9 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo9, useRef as useRef9 } from "react";
 function useAgentSession(options) {
   const onTokenExpiredRef = useRef9(options.onTokenExpired);
   onTokenExpiredRef.current = options.onTokenExpired;
@@ -8289,7 +8390,7 @@ function useAgentSession(options) {
       })
     });
   }, [options.server, options.sessionId]);
-  useEffect8(() => {
+  useEffect10(() => {
     return () => {
       void runtime.disposeIfCreated();
     };
@@ -8373,9 +8474,12 @@ function createDeferredAgentRuntime(options) {
   };
 }
 export {
+  ActivityDetailsPanel,
+  ActivityInspector,
   AgentChatPanel,
   AnnotationIslandMenu,
   AnnotationOverlayLayer,
+  AssistantTurnCard,
   ChatTranscript,
   CodeBlock,
   CollapsibleMarkdownProvider,
@@ -8386,6 +8490,7 @@ export {
   Markdown,
   MemoizedMarkdown,
   PendingIndicator,
+  PermissionModeMenu,
   PermissionRequestCard,
   PlatformProvider,
   ResponseCard,