@invergent/agent-chat-react 2.3.0 → 2.4.0

package/dist/index.js

@@ -885,9 +885,9 @@ var defaultGetThinkingMessage = (isStreaming, duration) => {
     return /* @__PURE__ */ jsx(Shimmer, { duration: 1, children: "Thinking..." });
   }
   if (duration === void 0) {
-    return /* @__PURE__ */ jsx("p", { className: "text-foreground", children: "Thought for a few seconds" });
+    return /* @__PURE__ */ jsx("p", { className: "text-muted-foreground italic", children: "Thought for a few seconds" });
   }
-  return /* @__PURE__ */ jsxs("p", { className: "text-foreground", children: [
+  return /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground italic", children: [
     "Thought for ",
     duration,
     " seconds"
@@ -6580,6 +6580,59 @@ function useSmoothStream(target, isStreaming) {
   }, [isActive]);
   return displayedLen >= target.length ? target : target.slice(0, displayedLen);
 }
+
+// src/lib/next-action.ts
+var _NEXT_ACTION_RE = /<next_action([^>]*)>([\s\S]*?)<\/next_action>\s*/gi;
+var _ATTR_RE = /(\w+)="([^"]*)"/g;
+var _VALID_COMPLEXITY = /* @__PURE__ */ new Set([
+  "low",
+  "medium",
+  "high"
+]);
+var _VALID_SUMMARY = /* @__PURE__ */ new Set([
+  "show",
+  "hide"
+]);
+function _parseAttrs(rawAttrs) {
+  const out = {};
+  for (const m of rawAttrs.matchAll(_ATTR_RE)) {
+    out[m[1].toLowerCase()] = m[2];
+  }
+  return out;
+}
+function _inferNarration(text) {
+  if (!text) return null;
+  const head = text.trimStart().split(/\n\s*\n/, 1)[0].slice(0, 240);
+  const endMatch = /([.!?])(\s|$)/.exec(head);
+  const firstSentence = (endMatch ? head.slice(0, endMatch.index + 1) : head).trim();
+  if (!firstSentence || firstSentence.length > 200) return null;
+  return firstSentence;
+}
+function stripAndParseNextAction(text) {
+  if (!text) {
+    return { cleaned: text ?? "", action: null, inferredNarration: null };
+  }
+  let last = null;
+  const matches = Array.from(text.matchAll(_NEXT_ACTION_RE));
+  if (matches.length === 0) {
+    return {
+      cleaned: text,
+      action: null,
+      inferredNarration: _inferNarration(text)
+    };
+  }
+  for (const match of matches) {
+    const attrs = _parseAttrs(match[1] ?? "");
+    const rawComplexity = (attrs["complexity"] ?? "").trim().toLowerCase();
+    const complexity = _VALID_COMPLEXITY.has(rawComplexity) ? rawComplexity : "medium";
+    const rawSummary = (attrs["summary"] ?? "").trim().toLowerCase();
+    const summary = _VALID_SUMMARY.has(rawSummary) ? rawSummary : "hide";
+    const body = (match[2] ?? "").trim() || "done";
+    last = { complexity, summary, body };
+  }
+  const cleaned = text.replace(_NEXT_ACTION_RE, "").trimEnd();
+  return { cleaned, action: last, inferredNarration: null };
+}
 var Artifact = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
@@ -6705,12 +6758,21 @@ var EXPANDED_HEIGHT_PX = 800;
 var MIN_ZOOM = 0.5;
 var MAX_ZOOM = 2;
 var ZOOM_STEP = 0.1;
+var SAFETY_STYLE_PREAMBLE = "<style>html,body{max-height:100vh}canvas{max-height:80vh!important}</style>";
+function injectSafetyStyle(html) {
+  const headCloseIdx = html.search(/<\/head\s*>/i);
+  if (headCloseIdx >= 0) {
+    return html.slice(0, headCloseIdx) + SAFETY_STYLE_PREAMBLE + html.slice(headCloseIdx);
+  }
+  return SAFETY_STYLE_PREAMBLE + html;
+}
 function ArtifactHtml({
   spec,
   fill = false
 }) {
   const [expanded, setExpanded] = useState(false);
   const [zoom, setZoom] = useState(1);
+  const safeSrcdoc = useMemo(() => injectSafetyStyle(spec.html), [spec.html]);
   const viewportHeight = expanded ? EXPANDED_HEIGHT_PX : DEFAULT_HEIGHT_PX;
   const clamp = (v) => Math.round(Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, v)) * 100) / 100;
   return /* @__PURE__ */ jsxs(
@@ -6730,7 +6792,7 @@ function ArtifactHtml({
               "iframe",
               {
                 title: "artifact-html",
-                srcDoc: spec.html,
+                srcDoc: safeSrcdoc,
                 sandbox: "allow-scripts",
                 className: cn("border-0", fill && "h-full w-full"),
                 style: fill ? { zoom } : {
@@ -7824,16 +7886,6 @@ function TurnSummaryCard({
     }) })
   ] });
 }
-function TurnSummaryPending() {
-  return /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded border border-border bg-muted/50 px-3 py-2 text-sm", children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-semibold uppercase tracking-wide", children: "Summary" }),
-    /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "mb-2 text-sm", children: "Summarizing conversation..." }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3/4" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-2/3" })
-    ] })
-  ] });
-}
 function ArtifactRow({
   artifact,
   sessionId,
@@ -7896,6 +7948,7 @@ function ArtifactRow({
     }
   ) });
 }
+var WORKING_ON_IT_DELAY_MS = 250;
 function messageToEntries(msg, isLast, artifactFallbacks) {
   if (msg.role === "system") {
     if (msg.systemKind === "skill_invoked") {
@@ -7926,16 +7979,23 @@ function messageToEntries(msg, isLast, artifactFallbacks) {
   const hasToolCalls = !!(msg.toolCalls && msg.toolCalls.length > 0);
   const hasContent = !!(msg.content && msg.content !== msg.reasoning);
   const isStreaming = msg.status === "streaming" && isLast;
-  const effectiveReasoning = hasToolCalls && hasContent ? msg.reasoning ? msg.reasoning + "\n" + msg.content : msg.content : msg.reasoning;
   const effectiveHasContent = hasContent && !hasToolCalls;
-  if (effectiveReasoning) {
+  if (msg.reasoning) {
     entries.push({
       kind: "reasoning",
       key: `${msg.id}-reasoning`,
-      reasoning: effectiveReasoning,
+      reasoning: msg.reasoning,
       isStreaming: isStreaming && !effectiveHasContent && !hasToolCalls
     });
   }
+  if (hasContent && hasToolCalls) {
+    entries.push({
+      kind: "narration",
+      key: `${msg.id}-narration`,
+      text: msg.content,
+      isStreaming: isStreaming && !effectiveHasContent
+    });
+  }
   if (hasToolCalls) {
     for (const tc of msg.toolCalls) {
       if (tc.toolName === "create_artifact") {
@@ -7966,12 +8026,6 @@ function messageToEntries(msg, isLast, artifactFallbacks) {
       msg
     });
   }
-  const hasRunningTool = hasToolCalls && msg.toolCalls.some(
-    (tc) => tc.status === "running"
-  );
-  if (isStreaming && !effectiveHasContent && !hasRunningTool) {
-    entries.push({ kind: "thinking", key: `${msg.id}-thinking` });
-  }
   return entries;
 }
 function groupBrowserActivityEntries(entries) {
@@ -8083,7 +8137,10 @@ function OrphanSystemMarker({
     return /* @__PURE__ */ jsxs("div", { className: "my-2 flex items-center gap-2 px-4 text-xs text-foreground/60 ", children: [
       /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-emerald-500" }),
       /* @__PURE__ */ jsxs("span", { children: [
-        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "Skill" }),
+        /* @__PURE__ */ jsxs("span", { className: "font-semibold text-foreground", children: [
+          "Running skill",
+          " "
+        ] }),
         /* @__PURE__ */ jsx("span", { className: "text-foreground/60 truncate", children: skill })
       ] })
     ] });
@@ -8198,6 +8255,9 @@ function TimelineEntryItem({
   if (entry.kind === "text") {
     return /* @__PURE__ */ jsx(TextEntry, { entry, step });
   }
+  if (entry.kind === "narration") {
+    return /* @__PURE__ */ jsx(NarrationEntry, { entry, step });
+  }
   if (entry.kind === "skill_invoked") {
     return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
       /* @__PURE__ */ jsxs(TimelineHeader, { children: [
@@ -8256,18 +8316,35 @@ function ReasoningEntry({
     ] }) })
   ] });
 }
+function NarrationEntry({
+  entry,
+  step
+}) {
+  const text = useSmoothStream(entry.text, entry.isStreaming);
+  const { action, inferredNarration } = stripAndParseNextAction(text);
+  const line = action ? action.body.trim().toLowerCase() === "done" ? null : action.body : inferredNarration;
+  if (!line) return null;
+  return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
+    /* @__PURE__ */ jsxs(TimelineHeader, { children: [
+      /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
+      /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-foreground/30" })
+    ] }),
+    /* @__PURE__ */ jsx(TimelineContent, { children: /* @__PURE__ */ jsx("p", { children: line }) })
+  ] });
+}
 function TextEntry({
   entry,
   step
 }) {
   const content = useSmoothStream(entry.content, entry.isStreaming);
+  const { cleaned } = stripAndParseNextAction(content);
   return /* @__PURE__ */ jsxs(TimelineItem, { step, children: [
     /* @__PURE__ */ jsxs(TimelineHeader, { children: [
       /* @__PURE__ */ jsx(TimelineSeparator, { style: { backgroundColor: "var(--color-border)" } }),
       /* @__PURE__ */ jsx(TimelineIndicator, { className: "size-2 border-none bg-foreground/40" })
     ] }),
     /* @__PURE__ */ jsxs(TimelineContent, { children: [
-      /* @__PURE__ */ jsx(MessageResponse, { children: content }),
+      /* @__PURE__ */ jsx(MessageResponse, { children: cleaned }),
       entry.isFinalTurnText && entry.msg.status === "complete" && /* @__PURE__ */ jsx(TurnFeedback, { msg: entry.msg })
     ] })
   ] });
@@ -8279,8 +8356,9 @@ function SimpleFinalAnswer({
 }) {
   const content = useSmoothStream(text, isStreaming);
   const revealComplete = content.length >= text.length;
+  const { cleaned } = stripAndParseNextAction(content);
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(MessageResponse, { children: content }),
+    /* @__PURE__ */ jsx(MessageResponse, { children: cleaned }),
     tail?.status === "complete" && revealComplete && /* @__PURE__ */ jsx(TurnFeedback, { msg: tail })
   ] });
 }
@@ -8573,7 +8651,7 @@ function IterationGroup({
   if (!label) {
     return null;
   }
-  const labelTone = summary ? "text-foreground/80" : "text-foreground/50";
+  const labelTone = summary ? "text-muted-foreground italic" : "text-muted-foreground";
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -8659,10 +8737,7 @@ function deriveFileArtifactsFromMessages(messages) {
 }
 function SimpleAssistantGroup({
   messages,
-  lastGlobalIndex,
-  totalMessages,
   isRunning,
-  terminal,
   sessionId,
   artifactFallbacks,
   onFileSelect,
@@ -8673,16 +8748,15 @@ function SimpleAssistantGroup({
   const tailHasTools = !!(tail?.toolCalls && tail.toolCalls.length > 0);
   const tailIsTextOnly = !!tail && !tailHasTools;
   const finalText = tailIsTextOnly && tail.content ? tail.content : "";
-  const isTailGroup = lastGlobalIndex === totalMessages - 1;
-  const tailRendersOwnShimmer = !!tail && isIterationLive(tail) && !tailIsTextOnly;
-  const showThinkingShim = isTailGroup && isRunning && !tailRendersOwnShimmer;
   const showErrorInfo = !!tail && tail.status === "error" && !!tail.errorInfo;
   const turnComplete = !isRunning && tail?.status === "complete";
+  const summaryPref = finalText !== null ? stripAndParseNextAction(finalText).action?.summary ?? "hide" : "hide";
   const effectiveTurnSummary = (() => {
     const fromHarness = tail?.turnSummary;
     if (fromHarness && fromHarness.artifacts.length > 0) {
       return fromHarness;
     }
+    if (summaryPref === "hide") return null;
     if (!turnComplete) return fromHarness;
     const derived = deriveFileArtifactsFromMessages(messages);
     if (derived.length === 0) return fromHarness;
@@ -8706,17 +8780,22 @@ function SimpleAssistantGroup({
           message.id
         );
       }
-      if (message === tail && tailIsTextOnly) return null;
-      return /* @__PURE__ */ jsx(
-        IterationGroup,
-        {
-          message,
-          sessionId,
-          artifactFallbacks,
-          onFileSelect
-        },
-        message.id
-      );
+      if (message === tail && tailIsTextOnly && finalText) return null;
+      const rawContent = (message.content ?? "").trim();
+      const { action, inferredNarration } = stripAndParseNextAction(rawContent);
+      const narrationLine = action ? action.body.trim().toLowerCase() === "done" ? null : action.body : inferredNarration;
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        narrationLine && /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: narrationLine }),
+        /* @__PURE__ */ jsx(
+          IterationGroup,
+          {
+            message,
+            sessionId,
+            artifactFallbacks,
+            onFileSelect
+          }
+        )
+      ] }, message.id);
     }) }),
     finalText && /* @__PURE__ */ jsx(
       SimpleFinalAnswer,
@@ -8726,8 +8805,7 @@ function SimpleAssistantGroup({
         tail
       }
     ),
-    showThinkingShim && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "text-sm", children: "Working on it..." }) }),
-    effectiveTurnSummary ? /* @__PURE__ */ jsx(
+    effectiveTurnSummary && /* @__PURE__ */ jsx(
       TurnSummaryCard,
       {
         summary: effectiveTurnSummary,
@@ -8735,16 +8813,6 @@ function SimpleAssistantGroup({
         messages,
         onFileSelect
       }
-    ) : (
-      // The harness summarizer runs after the last assistant
-      // response and before ``session.complete``. Show a pending
-      // placeholder during that window so users aren't surprised
-      // when the Summary card pops in. Gated on ``!terminal``
-      // rather than ``isRunning`` because the text-only final
-      // ``llm.response`` already flips ``isRunning`` to false —
-      // the summarizer then runs in the gap before
-      // ``session.complete`` (which is what sets ``terminal``).
-      isTailGroup && !terminal && !!finalText && tail?.status === "complete" && /* @__PURE__ */ jsx(TurnSummaryPending, {})
     ),
     showErrorInfo && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(ErrorMessage, { errorInfo: tail.errorInfo, onRetry }) })
   ] }) });
@@ -8754,7 +8822,6 @@ function AssistantGroup({
   lastGlobalIndex,
   totalMessages,
   isRunning,
-  terminal,
   sessionId,
   artifactFallbacks,
   onFileSelect,
@@ -8766,10 +8833,7 @@ function AssistantGroup({
       SimpleAssistantGroup,
       {
         messages,
-        lastGlobalIndex,
-        totalMessages,
         isRunning,
-        terminal,
         sessionId,
         artifactFallbacks,
         onFileSelect,
@@ -8791,15 +8855,6 @@ function AssistantGroup({
       break;
     }
   }
-  const isTailGroup = lastGlobalIndex === totalMessages - 1;
-  const lastEntry = entries[entries.length - 1];
-  const hasRunningTool = entries.some(
-    (e) => e.kind === "tool" && e.tc.status === "running"
-  );
-  const tailMsg = messages[messages.length - 1];
-  if (isTailGroup && isRunning && !hasRunningTool && lastEntry?.kind !== "thinking") {
-    entries.push({ kind: "thinking", key: `${tailMsg.id}-tail-thinking` });
-  }
   const tail = messages[messages.length - 1];
   const showErrorInfo = tail && tail.role === "assistant" && tail.status === "error" && !!tail.errorInfo;
   return /* @__PURE__ */ jsx(Message, { from: "assistant", children: /* @__PURE__ */ jsxs(MessageContent, { children: [
@@ -8847,11 +8902,30 @@ function RetryBanner({ indicator }) {
     }
   );
 }
+function WorkingOnItIndicator() {
+  return /* @__PURE__ */ jsx(Message, { from: "assistant", children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "text-sm", children: "Working on it..." }) }) });
+}
+function useDelayedRunningIndicator(isRunning) {
+  const [visible, setVisible] = useState(isRunning);
+  useEffect(() => {
+    if (!isRunning) {
+      setVisible(false);
+      return;
+    }
+    if (visible) return;
+    const timeout = window.setTimeout(() => {
+      setVisible(true);
+    }, WORKING_ON_IT_DELAY_MS);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [isRunning, visible]);
+  return visible;
+}
 function ChatThread({
   sessionId,
   messages,
   isRunning,
-  terminal,
   isLoadingHistory = false,
   onSend,
   onStop,
@@ -8872,6 +8946,7 @@ function ChatThread({
   onViewModeChange
 }) {
   const groups = useMemo(() => groupMessages(messages), [messages]);
+  const showWorkingOnIt = useDelayedRunningIndicator(isRunning);
   const artifactFallbacks = useMemo(() => {
     const fallbacks = {};
     const createArtifactToolCallIds = [];
@@ -8905,7 +8980,7 @@ function ChatThread({
     }
     return null;
   }, [messages]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden bg-background text-sm", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden bg-background text-base", children: [
     /* @__PURE__ */ jsxs(Conversation, { className: "relative flex-1 min-h-0", children: [
       /* @__PURE__ */ jsx(ConversationContent, { className: "mx-auto w-full max-w-4xl", children: messages.length === 0 && isLoadingHistory ? /* @__PURE__ */ jsx(
         ConversationEmptyState,
@@ -8959,7 +9034,6 @@ function ChatThread({
               lastGlobalIndex: group.lastGlobalIndex,
               totalMessages: messages.length,
               isRunning,
-              terminal,
               sessionId,
               artifactFallbacks,
               onFileSelect,
@@ -8969,7 +9043,7 @@ function ChatThread({
             group.messages[0].id
           );
         }),
-        isRunning && messages.length > 0 && messages[messages.length - 1].role === "user" && /* @__PURE__ */ jsx(Message, { from: "assistant", children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Shimmer, { duration: 3, spread: 3, className: "text-sm", children: "Working on it..." }) }) })
+        showWorkingOnIt && /* @__PURE__ */ jsx(WorkingOnItIndicator, {})
       ] }) }),
       /* @__PURE__ */ jsx(ConversationScrollButton, {})
     ] }),
@@ -9753,6 +9827,9 @@ function applyAgentChatEvent(state, event) {
     sessionDone: state.sessionDone || event.type === "session.done"
   };
   nextState = applyRetryIndicator(nextState, event);
+  if (state.terminal && isPostTerminalLiveEvent(event.type)) {
+    return nextState;
+  }
   switch (event.type) {
     case "user.message":
       return withMessages(
@@ -9895,6 +9972,9 @@ function applyAgentChatEvent(state, event) {
       return applyTurnSummary(nextState, event);
   }
 }
+function isPostTerminalLiveEvent(type) {
+  return type === "harness.wake" || type === "llm.request" || type === "session.resume" || type === "llm.delta" || type === "llm.response" || type === "llm.thinking" || type === "tool.call";
+}
 function applyRetryIndicator(state, event) {
   switch (event.type) {
     case "harness.wake":
@@ -10083,30 +10163,18 @@ function applyLlmResponse(state, event) {
   );
   if (state.hadDeltas && idx >= 0 && !hasUserAfter) {
     const current = messages[idx];
-    if (hasToolCalls) {
-      messages[idx] = {
-        ...current,
-        reasoning: (current.reasoning ?? "") + current.content,
-        content: "",
-        status: "streaming",
-        llmResponseEventId: event.eventId,
-        turnId: turnId ?? current.turnId,
-        iterationIndex: iterationIndex ?? current.iterationIndex
-      };
-    } else {
-      messages[idx] = {
-        ...current,
-        status: "complete",
-        llmResponseEventId: event.eventId,
-        turnId: turnId ?? current.turnId,
-        iterationIndex: iterationIndex ?? current.iterationIndex
-      };
-    }
+    messages[idx] = {
+      ...current,
+      status: hasToolCalls ? "streaming" : "complete",
+      llmResponseEventId: event.eventId,
+      turnId: turnId ?? current.turnId,
+      iterationIndex: iterationIndex ?? current.iterationIndex
+    };
   } else if (matchesExistingToolTurn && idx >= 0) {
     const current = messages[idx];
     messages[idx] = {
       ...current,
-      reasoning: responseContent ? appendText(current.reasoning, responseContent) : current.reasoning,
+      content: responseContent ? appendText(current.content, responseContent) : current.content,
       status: "streaming",
       llmResponseEventId: event.eventId,
       turnId: turnId ?? current.turnId,
@@ -10116,8 +10184,8 @@ function applyLlmResponse(state, event) {
     messages.push({
       id: `evt-${event.eventId}`,
       role: "assistant",
-      content: hasToolCalls ? "" : responseContent,
-      reasoning: hasToolCalls && responseContent ? responseContent : void 0,
+      content: responseContent,
+      reasoning: void 0,
       createdAt: /* @__PURE__ */ new Date(),
       status: hasToolCalls ? "streaming" : "complete",
       llmResponseEventId: event.eventId,
@@ -10126,25 +10194,14 @@ function applyLlmResponse(state, event) {
     });
   } else {
     const current = messages[idx];
-    if (hasToolCalls && responseContent) {
-      messages[idx] = {
-        ...current,
-        reasoning: (current.reasoning ?? "") + responseContent,
-        status: "streaming",
-        llmResponseEventId: event.eventId,
-        turnId: turnId ?? current.turnId,
-        iterationIndex: iterationIndex ?? current.iterationIndex
-      };
-    } else {
-      messages[idx] = {
-        ...current,
-        content: responseContent || current.content,
-        status: hasToolCalls ? "streaming" : "complete",
-        llmResponseEventId: event.eventId,
-        turnId: turnId ?? current.turnId,
-        iterationIndex: iterationIndex ?? current.iterationIndex
-      };
-    }
+    messages[idx] = {
+      ...current,
+      content: responseContent || current.content,
+      status: hasToolCalls ? "streaming" : "complete",
+      llmResponseEventId: event.eventId,
+      turnId: turnId ?? current.turnId,
+      iterationIndex: iterationIndex ?? current.iterationIndex
+    };
   }
   const inputTokens = numberValue(event.data.input_tokens);
   const outputTokens = numberValue(event.data.output_tokens);
@@ -13511,7 +13568,7 @@ function TreeNodeRow({
               type: "button",
               className: cn(
                 "p-2 md:p-1 rounded hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none transition-all",
-                deletingSessionId === entry.id ? "opacity-100" : "opacity-100 md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100"
+                deletingSessionId === entry.id ? "opacity-100" : "opacity-60 md:opacity-50 md:group-hover:opacity-100 md:focus-visible:opacity-100"
               ),
               onClick: (e) => {
                 e.stopPropagation();