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

package/dist/index.cjs

@@ -30,9 +30,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ActivityDetailsPanel: () => ActivityDetailsPanel,
+  ActivityInspector: () => ActivityInspector,
   AgentChatPanel: () => AgentChatPanel,
   AnnotationIslandMenu: () => AnnotationIslandMenu,
   AnnotationOverlayLayer: () => AnnotationOverlayLayer,
+  AssistantTurnCard: () => AssistantTurnCard,
   ChatTranscript: () => ChatTranscript,
   CodeBlock: () => CodeBlock,
   CollapsibleMarkdownProvider: () => CollapsibleMarkdownProvider,
@@ -43,6 +46,7 @@ __export(src_exports, {
   Markdown: () => Markdown,
   MemoizedMarkdown: () => MemoizedMarkdown,
   PendingIndicator: () => PendingIndicator,
+  PermissionModeMenu: () => PermissionModeMenu,
   PermissionRequestCard: () => PermissionRequestCard,
   PlatformProvider: () => PlatformProvider,
   ResponseCard: () => ResponseCard,
@@ -240,6 +244,12 @@ var import_jsx_runtime32 = require("react/jsx-runtime");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var import_react15 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_react17 = require("react");
 function getAssistantTurnUiKey(turn, index) {
   if (turn.response?.messageId) {
     return `assistant:msg:${turn.response.messageId}`;
@@ -5190,6 +5200,162 @@ function PendingIndicator({
     delay
   )) }) });
 }
+function AssistantTurnCard({
+  sessionId,
+  turn,
+  isLast,
+  onInspectActivity
+}) {
+  const [isExpanded, setIsExpanded] = (0, import_react15.useState)(true);
+  const [expandedActivityGroups, setExpandedActivityGroups] = (0, import_react15.useState)(/* @__PURE__ */ new Set());
+  (0, import_react15.useEffect)(() => {
+    if (turn.isStreaming) {
+      setIsExpanded(true);
+    }
+  }, [turn.isStreaming]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    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__ */ (0, import_jsx_runtime36.jsx)("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__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-start justify-between gap-3 border-b border-border px-4 py-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "truncate text-[13px] font-medium text-foreground", children: activity.displayName ?? activity.toolName ?? "Activity" }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mt-1 text-[12px] text-muted-foreground", children: activity.intent ?? activity.status ?? "unknown" })
+      ] }),
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "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__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "overflow-y-auto space-y-4 p-4", children: [
+      activity.toolInput && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mb-2 text-[12px] font-medium text-muted-foreground", children: "Input" }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("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__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mb-2 text-[12px] font-medium text-muted-foreground", children: "Error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("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__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mb-2 text-[12px] font-medium text-muted-foreground", children: "Output" }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "max-h-[320px] overflow-y-auto rounded-[6px] bg-foreground/[0.04] px-3 py-2 text-[12px] text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Markdown, { mode: "minimal", className: "text-[12px] leading-relaxed", children: activity.content }) })
+      ] })
+    ] })
+  ] });
+}
+function ActivityDetailsPanel({
+  activity,
+  onClose
+}) {
+  (0, import_react16.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime37.jsx)(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-background/60 backdrop-blur-sm",
+      onClick: onClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "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__ */ (0, import_jsx_runtime37.jsx)(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__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative", children: [
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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__ */ (0, import_jsx_runtime38.jsx)("div", { className: "space-y-0.5", children: PERMISSION_CONFIG.map((option) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      "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__ */ (0, import_jsx_runtime38.jsx)("span", { className: "w-4 text-center text-[12px]", children: option.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex-1", children: option.label }),
+          option.mode === value && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": "true", className: "text-[12px] text-foreground", children: "\u25CF" })
+        ]
+      },
+      option.mode
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      "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__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-muted-foreground", children: selected.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: selected.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-muted-foreground", children: "\u2304" })
+        ]
+      }
+    )
+  ] });
+}
 function generateMessageId2() {
   return generateMessageId();
 }
@@ -5272,6 +5438,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
     });
@@ -5284,7 +5468,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),
@@ -5294,12 +5479,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;
     }
   }
@@ -6367,14 +6555,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 {
@@ -6414,7 +6604,8 @@ function mapTimelineEnvelopeToProcessorEvent(envelope) {
         sessionId,
         delta: item.text,
         turnId: item.turnId,
-        timestamp
+        timestamp,
+        ...item.type === "reasoning_delta" && { isIntermediate: true }
       };
     case "assistant_message":
     case "reasoning":
@@ -6424,7 +6615,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 {
@@ -6591,6 +6783,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 } : {};
@@ -6726,12 +6922,12 @@ function normalizeTokenUsage(usage) {
 }
 function useEventProcessor(options) {
   const { eventSource, sessionId, workspaceId, workspaceName, onEffect, onError, onClose } = options;
-  const [session, setSession] = (0, import_react15.useState)(null);
-  const sessionRef = (0, import_react15.useRef)(null);
-  const streamingStates = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
-  const [isConnected, setIsConnected] = (0, import_react15.useState)(false);
-  const processedCount = (0, import_react15.useRef)(0);
-  const processAgentEvent = (0, import_react15.useCallback)((event) => {
+  const [session, setSession] = (0, import_react17.useState)(null);
+  const sessionRef = (0, import_react17.useRef)(null);
+  const streamingStates = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
+  const [isConnected, setIsConnected] = (0, import_react17.useState)(false);
+  const processedCount = (0, import_react17.useRef)(0);
+  const processAgentEvent = (0, import_react17.useCallback)((event) => {
     const processorEvent = mapCoreEventToProcessorEvent(event, sessionId);
     const currentSession = sessionRef.current ?? createEmptySession(sessionId, workspaceId, workspaceName ?? "");
     const currentState = {
@@ -6751,7 +6947,7 @@ function useEventProcessor(options) {
       effects: result.effects
     };
   }, [sessionId, workspaceId, workspaceName]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     eventSource.connect(
       (coreEvent) => {
         const result = processAgentEvent(coreEvent);
@@ -6774,10 +6970,10 @@ function useEventProcessor(options) {
       setIsConnected(false);
     };
   }, [eventSource, processAgentEvent, onEffect, onError, onClose]);
-  const clearStreamingState = (0, import_react15.useCallback)(() => {
+  const clearStreamingState = (0, import_react17.useCallback)(() => {
     streamingStates.current.delete(sessionId);
   }, [sessionId]);
-  const getStreamingState = (0, import_react15.useCallback)(() => {
+  const getStreamingState = (0, import_react17.useCallback)(() => {
     return streamingStates.current.get(sessionId) ?? null;
   }, [sessionId]);
   return {
@@ -6909,8 +7105,8 @@ var InProcessEventSource = class {
 };
 
 // ../local-chat/dist/index.js
-var import_react16 = require("react");
-var import_react17 = require("react");
+var import_react18 = require("react");
+var import_react19 = require("react");
 
 // ../timeline/dist/index.js
 function createTimelineCursor(cursor) {
@@ -6958,9 +7154,9 @@ function timelineKey(item) {
 }
 
 // ../local-chat/dist/index.js
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var import_react18 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function createAgentChatPanelModel(args) {
   return {
     turns: args.session ? groupMessagesByTurn(args.session.messages) : [],
@@ -7047,8 +7243,8 @@ function createTimelineDetailItems(timeline) {
 }
 function useAgentChatSession(options) {
   const { runtime, workspaceId = "local-workspace", workspaceName = "Local Workspace" } = options;
-  const [auth, setAuth] = (0, import_react17.useState)(null);
-  const [error, setError] = (0, import_react17.useState)(null);
+  const [auth, setAuth] = (0, import_react19.useState)(null);
+  const [error, setError] = (0, import_react19.useState)(null);
   const processor = useEventProcessor({
     eventSource: runtime.events,
     sessionId: runtime.sessionId,
@@ -7056,7 +7252,7 @@ function useAgentChatSession(options) {
     workspaceName,
     onError: setError
   });
-  const sendMessage = (0, import_react17.useCallback)(async (message) => {
+  const sendMessage = (0, import_react19.useCallback)(async (message) => {
     setError(null);
     try {
       if (!auth) {
@@ -7072,13 +7268,13 @@ function useAgentChatSession(options) {
       throw err;
     }
   }, [auth, runtime]);
-  const abort = (0, import_react17.useCallback)(async () => {
+  const abort = (0, import_react19.useCallback)(async () => {
     await runtime.commands.abort("User aborted");
   }, [runtime]);
-  const respondToPermission = (0, import_react17.useCallback)(async (requestId, allowed, remember) => {
+  const respondToPermission = (0, import_react19.useCallback)(async (requestId, allowed, remember) => {
     await runtime.commands.respondToPermission(requestId, allowed, remember);
   }, [runtime]);
-  const model = (0, import_react17.useMemo)(
+  const model = (0, import_react19.useMemo)(
     () => createAgentChatPanelModel({ session: processor.session, runtime, auth, error }),
     [processor.session, runtime, auth, error]
   );
@@ -7095,13 +7291,13 @@ function useAgentChatSession(options) {
 }
 function useTimelineAgentChatSession(options) {
   const { runtime, workspaceId = "local-workspace", workspaceName = "Local Workspace" } = options;
-  const [timeline, setTimeline] = (0, import_react17.useState)([]);
-  const [capabilityReport, setCapabilityReport] = (0, import_react17.useState)(null);
-  const [error, setError] = (0, import_react17.useState)(null);
-  const [isReconnecting, setIsReconnecting] = (0, import_react17.useState)(false);
-  const [hasGap, setHasGap] = (0, import_react17.useState)(false);
-  const lastCursorRef = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
+  const [timeline, setTimeline] = (0, import_react19.useState)([]);
+  const [capabilityReport, setCapabilityReport] = (0, import_react19.useState)(null);
+  const [error, setError] = (0, import_react19.useState)(null);
+  const [isReconnecting, setIsReconnecting] = (0, import_react19.useState)(false);
+  const [hasGap, setHasGap] = (0, import_react19.useState)(false);
+  const lastCursorRef = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
     let catchupAbort = false;
     const onEvent = (envelope) => {
       lastCursorRef.current = { epoch: envelope.epoch, afterSeq: envelope.seq };
@@ -7137,7 +7333,7 @@ function useTimelineAgentChatSession(options) {
       runtime.events.disconnect();
     };
   }, [runtime]);
-  const sendMessage = (0, import_react17.useCallback)(async (message, options2) => {
+  const sendMessage = (0, import_react19.useCallback)(async (message, options2) => {
     setError(null);
     setHasGap(false);
     try {
@@ -7152,13 +7348,13 @@ function useTimelineAgentChatSession(options) {
       throw err;
     }
   }, [capabilityReport, runtime]);
-  const abort = (0, import_react17.useCallback)(async () => {
+  const abort = (0, import_react19.useCallback)(async () => {
     await runtime.commands.abort("User aborted");
   }, [runtime]);
-  const respondToPermission = (0, import_react17.useCallback)(async (requestId, allowed, remember) => {
+  const respondToPermission = (0, import_react19.useCallback)(async (requestId, allowed, remember) => {
     await runtime.commands.respondToPermission(requestId, allowed, remember);
   }, [runtime]);
-  const model = (0, import_react17.useMemo)(
+  const model = (0, import_react19.useMemo)(
     () => createTimelineAgentChatPanelModel({
       timeline,
       sessionId: runtime.sessionId,
@@ -7395,7 +7591,7 @@ function AgentChatPanel({
   className
 }) {
   const chat = useAgentChatSession({ runtime, workspaceId, workspaceName });
-  const [draft, setDraft] = (0, import_react16.useState)("");
+  const [draft, setDraft] = (0, import_react18.useState)("");
   async function handleSubmit(event) {
     event.preventDefault();
     const message = draft.trim();
@@ -7407,8 +7603,8 @@ function AgentChatPanel({
     }
   }
   const storedSession = chat.session ? toStoredSession(chat.session, workspaceId) : createEmptyStoredSession(runtime.sessionId, workspaceId, workspaceName);
-  const footer = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("form", { onSubmit: handleSubmit, className: "flex gap-2 p-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  const footer = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("form", { onSubmit: handleSubmit, className: "flex gap-2 p-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "textarea",
       {
         value: draft,
@@ -7418,7 +7614,7 @@ function AgentChatPanel({
         className: "min-h-10 flex-1 resize-none rounded-md border px-3 py-2 text-sm"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "button",
       {
         type: "submit",
@@ -7427,7 +7623,7 @@ function AgentChatPanel({
         children: "Send"
       }
     ),
-    chat.isRunning && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    chat.isRunning && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "button",
       {
         type: "button",
@@ -7437,9 +7633,9 @@ function AgentChatPanel({
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className, children: [
-    chat.error && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "border-b px-3 py-2 text-sm text-red-600", children: chat.error.message }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className, children: [
+    chat.error && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b px-3 py-2 text-sm text-red-600", children: chat.error.message }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       SessionViewer,
       {
         session: storedSession,
@@ -7511,27 +7707,24 @@ function TimelineAgentChatPanel({
   className
 }) {
   const chat = useTimelineAgentChatSession({ runtime, workspaceId, workspaceName });
-  const [draft, setDraft] = (0, import_react18.useState)("");
-  const [selectedActivity, setSelectedActivity] = (0, import_react18.useState)(null);
-  const [selectedDetail, setSelectedDetail] = (0, import_react18.useState)(null);
-  const [permissionMode, setPermissionMode] = (0, import_react18.useState)("ask");
-  const [turnExpandOverride, setTurnExpandOverride] = (0, import_react18.useState)({});
-  const handleTurnExpandedChange = (0, import_react18.useCallback)((turnId, expanded) => {
-    setTurnExpandOverride((prev) => ({ ...prev, [turnId]: expanded }));
-  }, []);
+  const [draft, setDraft] = (0, import_react20.useState)("");
+  const [selectedActivity, setSelectedActivity] = (0, import_react20.useState)(null);
+  const [selectedDetail, setSelectedDetail] = (0, import_react20.useState)(null);
+  const [permissionMode, setPermissionMode] = (0, import_react20.useState)("ask");
+  const [isPermMenuOpen, setIsPermMenuOpen] = (0, import_react20.useState)(false);
   const runtimeState = runtime.getState();
   const isWaitingPermission = runtimeState.status === "waiting_for_permission";
   const waitingRequestId = runtimeState.waitingPermissionRequestId;
-  const permissionRequest = (0, import_react18.useMemo)(() => {
+  const permissionRequest = (0, import_react20.useMemo)(() => {
     if (!isWaitingPermission || !waitingRequestId) return null;
     return findActivePermissionRequest(chat.timeline);
   }, [isWaitingPermission, waitingRequestId, chat.timeline]);
-  const detailItems = (0, import_react18.useMemo)(
+  const detailItems = (0, import_react20.useMemo)(
     () => createTimelineDetailItems(chat.timeline),
     [chat.timeline]
   );
-  const scrollRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
+  const scrollRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -7546,60 +7739,45 @@ function TimelineAgentChatPanel({
     } catch {
     }
   }
-  const handlePermissionAllow = (0, import_react18.useCallback)((requestId, remember) => {
+  const handlePermissionAllow = (0, import_react20.useCallback)((requestId, remember) => {
     void chat.respondToPermission(requestId, true, remember);
   }, [chat]);
-  const handlePermissionDeny = (0, import_react18.useCallback)((requestId) => {
+  const handlePermissionDeny = (0, import_react20.useCallback)((requestId) => {
     void chat.respondToPermission(requestId, false);
   }, [chat]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: `flex flex-col h-full ${className ?? ""}`, children: [
-    showStatusBar && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "shrink-0 border-b border-border bg-background/70 px-4 py-2 backdrop-blur", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-2 text-[12px] text-muted-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: chat.isConnected ? "text-green-500" : "text-muted-foreground", children: chat.isConnected ? "\u25CF" : "\u25CB" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: chat.isConnected ? "Connected" : chat.isReconnecting ? "Reconnecting" : "Disconnected" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: isWaitingPermission ? "text-yellow-500" : chat.isRunning ? "text-green-500" : "", children: isWaitingPermission ? " \u25C9 Awaiting approval" : chat.isRunning ? " \u25CF Running" : "" })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: `flex flex-col h-full ${className ?? ""}`, children: [
+    showStatusBar && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "shrink-0 border-b border-border bg-background/70 px-4 py-2 backdrop-blur", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2 text-[12px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: chat.isConnected ? "text-green-500" : "text-muted-foreground", children: chat.isConnected ? "\u25CF" : "\u25CB" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: chat.isConnected ? "Connected" : chat.isReconnecting ? "Reconnecting" : "Disconnected" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: isWaitingPermission ? "text-yellow-500" : chat.isRunning ? "text-green-500" : "", children: isWaitingPermission ? " \u25C9 Awaiting approval" : chat.isRunning ? " \u25CF Running" : "" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "text-[12px] text-muted-foreground", children: [
-        chat.hasGap && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-yellow-500", children: "\u26A0 Gap detected \xB7 " }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "text-[12px] text-muted-foreground", children: [
+        chat.hasGap && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-yellow-500", children: "\u26A0 Gap detected \xB7 " }),
         summarizeCapability(chat.capabilityReport)
       ] })
     ] }) }),
-    chat.error && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "shrink-0 border-b border-border bg-red-500/[0.08] px-4 py-2 text-[13px] text-red-600", children: chat.error.message }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", ref: scrollRef, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mx-auto max-w-[760px] flex flex-col gap-4 px-4 py-6", children: [
-      chat.turns.length === 0 && !chat.isRunning && !isWaitingPermission && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "rounded-[8px] bg-background shadow-minimal p-5 text-[13px] text-muted-foreground", children: "Send a message to start an agent session." }),
+    chat.error && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "shrink-0 border-b border-border bg-red-500/[0.08] px-4 py-2 text-[13px] text-red-600", children: chat.error.message }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", ref: scrollRef, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "mx-auto max-w-[760px] flex flex-col gap-4 px-4 py-6", children: [
+      chat.turns.length === 0 && !chat.isRunning && !isWaitingPermission && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "rounded-[8px] bg-background shadow-minimal p-5 text-[13px] text-muted-foreground", children: "Send a message to start an agent session." }),
       chat.turns.map((turn, index) => {
         if (turn.type === "user") {
-          return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex justify-end py-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(UserMessageBubble, { content: turn.message.content }) }, `user-${turn.message.id}`);
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex justify-end py-1", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(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__ */ (0, import_jsx_runtime36.jsx)(
-            TurnCard,
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            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}`
           );
         }
         if (turn.type === "auth-request") {
-          return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             PermissionRequestCard,
             {
               requestId: turn.message.authRequestId ?? turn.message.id,
@@ -7614,7 +7792,7 @@ function TimelineAgentChatPanel({
         }
         return null;
       }),
-      isWaitingPermission && permissionRequest && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      isWaitingPermission && permissionRequest && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         PermissionRequestCard,
         {
           requestId: permissionRequest.requestId,
@@ -7627,7 +7805,7 @@ function TimelineAgentChatPanel({
           onDeny: handlePermissionDeny
         }
       ),
-      isWaitingPermission && !permissionRequest && waitingRequestId && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      isWaitingPermission && !permissionRequest && waitingRequestId && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         PermissionRequestCard,
         {
           requestId: waitingRequestId,
@@ -7639,9 +7817,9 @@ function TimelineAgentChatPanel({
         }
       )
     ] }) }),
-    showDetailPanel && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "shrink-0 border-t border-border bg-background/70 max-h-[260px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "px-4 py-3 space-y-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-[12px] font-medium uppercase text-muted-foreground", children: "Runtime Details" }),
-      detailItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-[12px] text-muted-foreground", children: "No runtime details yet." }) : detailItems.slice(-10).map((item) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    showDetailPanel && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "shrink-0 border-t border-border bg-background/70 max-h-[260px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "px-4 py-3 space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-[12px] font-medium uppercase text-muted-foreground", children: "Runtime Details" }),
+      detailItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-[12px] text-muted-foreground", children: "No runtime details yet." }) : detailItems.slice(-10).map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "button",
         {
           type: "button",
@@ -7652,9 +7830,9 @@ function TimelineAgentChatPanel({
         item.id
       ))
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "shrink-0 border-t border-border", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col gap-2 p-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "shrink-0 border-t border-border", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col gap-2 p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "textarea",
           {
             value: draft,
@@ -7664,7 +7842,7 @@ function TimelineAgentChatPanel({
             className: "min-h-10 flex-1 resize-none rounded-[7px] border border-border bg-background px-3 py-2 text-[13px] text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-accent"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "button",
           {
             type: "submit",
@@ -7673,7 +7851,7 @@ function TimelineAgentChatPanel({
             children: "Send"
           }
         ),
-        chat.isRunning && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        chat.isRunning && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "button",
           {
             type: "button",
@@ -7683,24 +7861,19 @@ function TimelineAgentChatPanel({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "flex items-center gap-2 text-[12px] text-muted-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "shrink-0", children: "Tool permissions" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-          "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__ */ (0, import_jsx_runtime36.jsx)("option", { value: "ask", children: "Ask before each tool" }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: "allow-all", children: "Auto-run (no prompts)" })
-            ]
-          }
-        )
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        PermissionModeMenu,
+        {
+          value: permissionMode,
+          onChange: setPermissionMode,
+          onClose: () => setIsPermMenuOpen(false),
+          isOpen: isPermMenuOpen,
+          onToggle: () => setIsPermMenuOpen((o) => !o)
+        }
+      )
     ] }) }),
-    selectedActivity && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      ActivityDetailOverlay,
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      ActivityDetailsPanel,
       {
         activity: selectedActivity,
         onClose: () => setSelectedActivity(null)
@@ -7708,74 +7881,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__ */ (0, import_jsx_runtime36.jsx)(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
-      onClick: onClose,
-      role: "presentation",
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-        "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__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between gap-2 border-b border-border px-4 py-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "truncate text-[13px] font-medium text-foreground", children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "text-[11px] text-muted-foreground", children: [
-                  activity.type,
-                  " \xB7 ",
-                  activity.status
-                ] })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                "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__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex-1 overflow-y-auto px-4 py-3 space-y-3", children: [
-              activity.error && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "rounded-[6px] bg-red-500/[0.08] px-3 py-2 text-[12px] text-red-600", children: activity.error }),
-              input && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground", children: "Request" }),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("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__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground", children: "Result" }),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("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__ */ (0, import_jsx_runtime36.jsx)("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"];
@@ -8337,13 +8442,13 @@ var PushTimelineStream = class {
 };
 
 // src/use-agent-session.ts
-var import_react19 = require("react");
+var import_react21 = require("react");
 function useAgentSession(options) {
-  const onTokenExpiredRef = (0, import_react19.useRef)(options.onTokenExpired);
+  const onTokenExpiredRef = (0, import_react21.useRef)(options.onTokenExpired);
   onTokenExpiredRef.current = options.onTokenExpired;
-  const tokenRef = (0, import_react19.useRef)(options.token);
+  const tokenRef = (0, import_react21.useRef)(options.token);
   tokenRef.current = options.token;
-  const runtime = (0, import_react19.useMemo)(() => {
+  const runtime = (0, import_react21.useMemo)(() => {
     return createDeferredAgentRuntime({
       provider: "flitro",
       runtimeKind: "app-server",
@@ -8356,7 +8461,7 @@ function useAgentSession(options) {
       })
     });
   }, [options.server, options.sessionId]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     return () => {
       void runtime.disposeIfCreated();
     };
@@ -8441,9 +8546,12 @@ function createDeferredAgentRuntime(options) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActivityDetailsPanel,
+  ActivityInspector,
   AgentChatPanel,
   AnnotationIslandMenu,
   AnnotationOverlayLayer,
+  AssistantTurnCard,
   ChatTranscript,
   CodeBlock,
   CollapsibleMarkdownProvider,
@@ -8454,6 +8562,7 @@ function createDeferredAgentRuntime(options) {
   Markdown,
   MemoizedMarkdown,
   PendingIndicator,
+  PermissionModeMenu,
   PermissionRequestCard,
   PlatformProvider,
   ResponseCard,