@percena/weft-react 0.1.3 → 0.1.5-next.0

package/dist/index.d.cts

@@ -2943,6 +2943,48 @@ interface PermissionRequestCardProps {
 }
 declare function PermissionRequestCard({ requestId, toolName, scope, input, reason, isActive, previousResolution, onAllow, onDeny, className, }: PermissionRequestCardProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Standard assistant-turn presentation: a TurnCard with local expand state that
+ * stays open while the turn streams, the detailed display mode, and a click
+ * handler that surfaces a step for inspection. Shared so the web app and the
+ * embeddable chat panel render thinking steps identically.
+ */
+declare function AssistantTurnCard({ sessionId, turn, isLast, onInspectActivity, }: {
+    sessionId: string;
+    turn: Extract<Turn, {
+        type: 'assistant';
+    }>;
+    isLast: boolean;
+    onInspectActivity: (activity: ActivityItem) => void;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Renders a single activity's input / output / error for inspection. Shared by
+ * the web app's side panel and the embeddable chat panel's detail popup so the
+ * step-detail view stays identical across hosts.
+ */
+declare function ActivityInspector({ activity, onClose, }: {
+    activity: ActivityItem | null;
+    onClose?: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Modal popup wrapping ActivityInspector: centered, dismissable via backdrop
+ * click or Escape. Open it from a TurnCard's onOpenActivityDetails callback.
+ */
+declare function ActivityDetailsPanel({ activity, onClose, }: {
+    activity: ActivityItem | null;
+    onClose: () => void;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function PermissionModeMenu({ value, onChange, onClose, isOpen, onToggle, }: {
+    value: PermissionMode;
+    onChange: (mode: PermissionMode) => void;
+    onClose?: () => void;
+    isOpen: boolean;
+    onToggle: () => void;
+}): react_jsx_runtime.JSX.Element;
+
 interface CodeBlockProps {
     code: string;
     language?: string;
@@ -3910,7 +3952,7 @@ interface UseEventProcessorResult {
  */
 declare function useEventProcessor(options: UseEventProcessorOptions): UseEventProcessorResult;
 
-export { type ActivityItem, type ActivityStatus, AnnotationIslandMenu, type AnnotationIslandMenuProps, type AnnotationOverlayChip, type AnnotationOverlayGeometryResult, AnnotationOverlayLayer, type AnnotationOverlayLayerProps, type AnnotationOverlayRect, type AssistantTurn, type AuthRequestTurn, type ChatEvent, ChatTranscript, type ChatTranscriptProps, CodeBlock, CollapsibleMarkdownProvider, type Effect, type EventSource, type EventSourceCallback, type EventSourceCloseCallback, type EventSourceErrorCallback, InProcessEventSource, type InlineActivityItem, InlineCode, InlineExecution, type InlineExecutionProps, type InlineExecutionStatus, type IslandTransitionConfig, Markdown, type MarkdownProps, MemoizedMarkdown, PendingIndicator, type PendingIndicatorProps, PermissionRequestCard, type PermissionRequestCardProps, type PlatformActions, PlatformProvider, type PointerSnapshot, type ProcessResult, type RenderMode, ResponseCard, type ResponseCardProps, type ResponseContent, SIZE_CONFIG, SSEEventSource, type Session, type SessionState, SessionViewer, type SessionViewerMode, type SessionViewerProps, type StreamingState, SystemMessage, type SystemMessageProps, type SystemMessageType, type SystemTurn, type TextSegment, type TodoItem, type Turn, TurnCard, type TurnCardProps, UserMessageBubble, type UserMessageBubbleProps, type UserTurn, WebSocketEventSource, appendMessage, buildAnnotationChipEntryTransition, buildSelectionEntryTransition, collectTextSegments, computeAnnotationOverlayGeometry, createSelectionPreviewAnnotation, createTextSelectionAnnotation, findAssistantMessage, findStreamingMessage, findToolMessage, generateMessageId, getAssistantTurnUiKey, getCanonicalText, groupMessagesByTurn, hasExistingTextRangeAnnotation, mapCoreEventToProcessorEvent, mapTimelineEnvelopeToProcessorEvent, processEvent, resolveNodeOffset, shouldShowStreamingContent, updateMessageAt, useEventProcessor };
+export { ActivityDetailsPanel, ActivityInspector, type ActivityItem, type ActivityStatus, AnnotationIslandMenu, type AnnotationIslandMenuProps, type AnnotationOverlayChip, type AnnotationOverlayGeometryResult, AnnotationOverlayLayer, type AnnotationOverlayLayerProps, type AnnotationOverlayRect, type AssistantTurn, AssistantTurnCard, type AuthRequestTurn, type ChatEvent, ChatTranscript, type ChatTranscriptProps, CodeBlock, CollapsibleMarkdownProvider, type Effect, type EventSource, type EventSourceCallback, type EventSourceCloseCallback, type EventSourceErrorCallback, InProcessEventSource, type InlineActivityItem, InlineCode, InlineExecution, type InlineExecutionProps, type InlineExecutionStatus, type IslandTransitionConfig, Markdown, type MarkdownProps, MemoizedMarkdown, PendingIndicator, type PendingIndicatorProps, PermissionModeMenu, PermissionRequestCard, type PermissionRequestCardProps, type PlatformActions, PlatformProvider, type PointerSnapshot, type ProcessResult, type RenderMode, ResponseCard, type ResponseCardProps, type ResponseContent, SIZE_CONFIG, SSEEventSource, type Session, type SessionState, SessionViewer, type SessionViewerMode, type SessionViewerProps, type StreamingState, SystemMessage, type SystemMessageProps, type SystemMessageType, type SystemTurn, type TextSegment, type TodoItem, type Turn, TurnCard, type TurnCardProps, UserMessageBubble, type UserMessageBubbleProps, type UserTurn, WebSocketEventSource, appendMessage, buildAnnotationChipEntryTransition, buildSelectionEntryTransition, collectTextSegments, computeAnnotationOverlayGeometry, createSelectionPreviewAnnotation, createTextSelectionAnnotation, findAssistantMessage, findStreamingMessage, findToolMessage, generateMessageId, getAssistantTurnUiKey, getCanonicalText, groupMessagesByTurn, hasExistingTextRangeAnnotation, mapCoreEventToProcessorEvent, mapTimelineEnvelopeToProcessorEvent, processEvent, resolveNodeOffset, shouldShowStreamingContent, updateMessageAt, useEventProcessor };
 
 // -- @weft/ui/lib/en-fallback.d.ts --
 /**

package/dist/index.d.ts

@@ -2943,6 +2943,48 @@ interface PermissionRequestCardProps {
 }
 declare function PermissionRequestCard({ requestId, toolName, scope, input, reason, isActive, previousResolution, onAllow, onDeny, className, }: PermissionRequestCardProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Standard assistant-turn presentation: a TurnCard with local expand state that
+ * stays open while the turn streams, the detailed display mode, and a click
+ * handler that surfaces a step for inspection. Shared so the web app and the
+ * embeddable chat panel render thinking steps identically.
+ */
+declare function AssistantTurnCard({ sessionId, turn, isLast, onInspectActivity, }: {
+    sessionId: string;
+    turn: Extract<Turn, {
+        type: 'assistant';
+    }>;
+    isLast: boolean;
+    onInspectActivity: (activity: ActivityItem) => void;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Renders a single activity's input / output / error for inspection. Shared by
+ * the web app's side panel and the embeddable chat panel's detail popup so the
+ * step-detail view stays identical across hosts.
+ */
+declare function ActivityInspector({ activity, onClose, }: {
+    activity: ActivityItem | null;
+    onClose?: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Modal popup wrapping ActivityInspector: centered, dismissable via backdrop
+ * click or Escape. Open it from a TurnCard's onOpenActivityDetails callback.
+ */
+declare function ActivityDetailsPanel({ activity, onClose, }: {
+    activity: ActivityItem | null;
+    onClose: () => void;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function PermissionModeMenu({ value, onChange, onClose, isOpen, onToggle, }: {
+    value: PermissionMode;
+    onChange: (mode: PermissionMode) => void;
+    onClose?: () => void;
+    isOpen: boolean;
+    onToggle: () => void;
+}): react_jsx_runtime.JSX.Element;
+
 interface CodeBlockProps {
     code: string;
     language?: string;
@@ -3910,7 +3952,7 @@ interface UseEventProcessorResult {
  */
 declare function useEventProcessor(options: UseEventProcessorOptions): UseEventProcessorResult;
 
-export { type ActivityItem, type ActivityStatus, AnnotationIslandMenu, type AnnotationIslandMenuProps, type AnnotationOverlayChip, type AnnotationOverlayGeometryResult, AnnotationOverlayLayer, type AnnotationOverlayLayerProps, type AnnotationOverlayRect, type AssistantTurn, type AuthRequestTurn, type ChatEvent, ChatTranscript, type ChatTranscriptProps, CodeBlock, CollapsibleMarkdownProvider, type Effect, type EventSource, type EventSourceCallback, type EventSourceCloseCallback, type EventSourceErrorCallback, InProcessEventSource, type InlineActivityItem, InlineCode, InlineExecution, type InlineExecutionProps, type InlineExecutionStatus, type IslandTransitionConfig, Markdown, type MarkdownProps, MemoizedMarkdown, PendingIndicator, type PendingIndicatorProps, PermissionRequestCard, type PermissionRequestCardProps, type PlatformActions, PlatformProvider, type PointerSnapshot, type ProcessResult, type RenderMode, ResponseCard, type ResponseCardProps, type ResponseContent, SIZE_CONFIG, SSEEventSource, type Session, type SessionState, SessionViewer, type SessionViewerMode, type SessionViewerProps, type StreamingState, SystemMessage, type SystemMessageProps, type SystemMessageType, type SystemTurn, type TextSegment, type TodoItem, type Turn, TurnCard, type TurnCardProps, UserMessageBubble, type UserMessageBubbleProps, type UserTurn, WebSocketEventSource, appendMessage, buildAnnotationChipEntryTransition, buildSelectionEntryTransition, collectTextSegments, computeAnnotationOverlayGeometry, createSelectionPreviewAnnotation, createTextSelectionAnnotation, findAssistantMessage, findStreamingMessage, findToolMessage, generateMessageId, getAssistantTurnUiKey, getCanonicalText, groupMessagesByTurn, hasExistingTextRangeAnnotation, mapCoreEventToProcessorEvent, mapTimelineEnvelopeToProcessorEvent, processEvent, resolveNodeOffset, shouldShowStreamingContent, updateMessageAt, useEventProcessor };
+export { ActivityDetailsPanel, ActivityInspector, type ActivityItem, type ActivityStatus, AnnotationIslandMenu, type AnnotationIslandMenuProps, type AnnotationOverlayChip, type AnnotationOverlayGeometryResult, AnnotationOverlayLayer, type AnnotationOverlayLayerProps, type AnnotationOverlayRect, type AssistantTurn, AssistantTurnCard, type AuthRequestTurn, type ChatEvent, ChatTranscript, type ChatTranscriptProps, CodeBlock, CollapsibleMarkdownProvider, type Effect, type EventSource, type EventSourceCallback, type EventSourceCloseCallback, type EventSourceErrorCallback, InProcessEventSource, type InlineActivityItem, InlineCode, InlineExecution, type InlineExecutionProps, type InlineExecutionStatus, type IslandTransitionConfig, Markdown, type MarkdownProps, MemoizedMarkdown, PendingIndicator, type PendingIndicatorProps, PermissionModeMenu, PermissionRequestCard, type PermissionRequestCardProps, type PlatformActions, PlatformProvider, type PointerSnapshot, type ProcessResult, type RenderMode, ResponseCard, type ResponseCardProps, type ResponseContent, SIZE_CONFIG, SSEEventSource, type Session, type SessionState, SessionViewer, type SessionViewerMode, type SessionViewerProps, type StreamingState, SystemMessage, type SystemMessageProps, type SystemMessageType, type SystemTurn, type TextSegment, type TodoItem, type Turn, TurnCard, type TurnCardProps, UserMessageBubble, type UserMessageBubbleProps, type UserTurn, WebSocketEventSource, appendMessage, buildAnnotationChipEntryTransition, buildSelectionEntryTransition, collectTextSegments, computeAnnotationOverlayGeometry, createSelectionPreviewAnnotation, createTextSelectionAnnotation, findAssistantMessage, findStreamingMessage, findToolMessage, generateMessageId, getAssistantTurnUiKey, getCanonicalText, groupMessagesByTurn, hasExistingTextRangeAnnotation, mapCoreEventToProcessorEvent, mapTimelineEnvelopeToProcessorEvent, processEvent, resolveNodeOffset, shouldShowStreamingContent, updateMessageAt, useEventProcessor };
 
 // -- @weft/ui/lib/en-fallback.d.ts --
 /**

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();
 }
@@ -5282,13 +5444,13 @@ function handleToolStart(state, event) {
     const existingMessage = session.messages[existingIndex];
     const updatedSession = updateMessageAt(session, existingIndex, {
       toolName: event.toolName ?? existingMessage?.toolName,
-      toolInput: event.toolInput,
-      toolIntent: event.toolIntent,
-      toolDisplayName: event.toolDisplayName,
-      toolDisplayMeta: event.toolDisplayMeta,
+      toolInput: event.toolInput ?? existingMessage?.toolInput,
+      toolIntent: event.toolIntent ?? existingMessage?.toolIntent,
+      toolDisplayName: event.toolDisplayName ?? existingMessage?.toolDisplayName,
+      toolDisplayMeta: event.toolDisplayMeta ?? existingMessage?.toolDisplayMeta,
       toolStatus: existingMessage?.toolStatus ?? "executing",
       turnId: event.turnId ?? existingMessage?.turnId,
-      parentToolUseId: event.parentToolUseId
+      parentToolUseId: event.parentToolUseId ?? existingMessage?.parentToolUseId
     });
     return { session: updatedSession, streaming };
   }
@@ -6518,6 +6680,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 +6819,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 +6844,7 @@ function useEventProcessor(options) {
       effects: result.effects
     };
   }, [sessionId, workspaceId, workspaceName]);
-  useEffect6(() => {
+  useEffect8(() => {
     eventSource.connect(
       (coreEvent) => {
         const result = processAgentEvent(coreEvent);
@@ -6837,7 +7003,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 +7051,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 +7140,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 +7188,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 +7500,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 +7511,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 +7520,7 @@ function AgentChatPanel({
         children: "Send"
       }
     ),
-    chat.isRunning && /* @__PURE__ */ jsx35(
+    chat.isRunning && /* @__PURE__ */ jsx39(
       "button",
       {
         type: "button",
@@ -7364,9 +7530,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 +7608,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 +7662,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 +7758,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 +7778,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 +8345,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 +8364,7 @@ function useAgentSession(options) {
       })
     });
   }, [options.server, options.sessionId]);
-  useEffect8(() => {
+  useEffect10(() => {
     return () => {
       void runtime.disposeIfCreated();
     };
@@ -8373,9 +8448,12 @@ function createDeferredAgentRuntime(options) {
   };
 }
 export {
+  ActivityDetailsPanel,
+  ActivityInspector,
   AgentChatPanel,
   AnnotationIslandMenu,
   AnnotationOverlayLayer,
+  AssistantTurnCard,
   ChatTranscript,
   CodeBlock,
   CollapsibleMarkdownProvider,
@@ -8386,6 +8464,7 @@ export {
   Markdown,
   MemoizedMarkdown,
   PendingIndicator,
+  PermissionModeMenu,
   PermissionRequestCard,
   PlatformProvider,
   ResponseCard,