fix(sessions): stale-conversation cost warning is a blocking prompt-input state (#3152)

Author: pauldambra

packages/shared/src/analytics-events.ts

@@ -135,6 +135,12 @@ export interface PromptSentProperties {
   prompt_length_chars: number;
 }
 
+export interface StaleConversationGateChoiceProperties {
+  choice: "compact" | "continue" | "new_session";
+  used_tokens: number;
+  cost_usd: number | null;
+}
+
 // Git operations
 export interface GitActionExecutedProperties {
   action_type: GitActionType;
@@ -1005,6 +1011,7 @@ export const ANALYTICS_EVENTS = {
   TASK_RUN_COMPLETED: "Task run completed",
   TASK_RUN_CANCELLED: "Task run cancelled",
   PROMPT_SENT: "Prompt sent",
+  STALE_CONVERSATION_GATE_CHOICE: "Stale conversation gate choice",
 
   // Claude Code session import
   CLAUDE_SESSIONS_SHOWN: "Claude Code sessions shown",
@@ -1159,6 +1166,7 @@ export type EventPropertyMap = {
   [ANALYTICS_EVENTS.TASK_RUN_COMPLETED]: TaskRunCompletedProperties;
   [ANALYTICS_EVENTS.TASK_RUN_CANCELLED]: TaskRunCancelledProperties;
   [ANALYTICS_EVENTS.PROMPT_SENT]: PromptSentProperties;
+  [ANALYTICS_EVENTS.STALE_CONVERSATION_GATE_CHOICE]: StaleConversationGateChoiceProperties;
 
   // Claude Code session import
   [ANALYTICS_EVENTS.CLAUDE_SESSIONS_SHOWN]: ClaudeSessionsShownProperties;

packages/ui/src/features/sessions/components/SessionView.tsx

@@ -5,7 +5,11 @@ import {
   type SessionService,
 } from "@posthog/core/sessions/sessionService";
 import { useService } from "@posthog/di/react";
-import type { AcpMessage } from "@posthog/shared";
+import {
+  type AcpMessage,
+  ANALYTICS_EVENTS,
+  type StaleConversationGateChoiceProperties,
+} from "@posthog/shared";
 import type { Task, TaskRunStatus } from "@posthog/shared/domain-types";
 import { showOfflineToast } from "@posthog/ui/features/connectivity/connectivityToast";
 import {
@@ -29,7 +33,7 @@ import { QueuedMessagesDock } from "@posthog/ui/features/sessions/components/Que
 import { ReasoningLevelSelector } from "@posthog/ui/features/sessions/components/ReasoningLevelSelector";
 import { RawLogsView } from "@posthog/ui/features/sessions/components/raw-logs/RawLogsView";
 import { SessionResourcesBar } from "@posthog/ui/features/sessions/components/SessionResourcesBar";
-import { StaleConversationCostDialog } from "@posthog/ui/features/sessions/components/StaleConversationCostDialog";
+import { StaleConversationCostNotice } from "@posthog/ui/features/sessions/components/StaleConversationCostNotice";
 import { SteerQueueToggle } from "@posthog/ui/features/sessions/components/SteerQueueToggle";
 import { ThreadView } from "@posthog/ui/features/sessions/components/ThreadView";
 import { CHAT_CONTENT_MAX_WIDTH } from "@posthog/ui/features/sessions/constants";
@@ -52,6 +56,7 @@ import { useSettingsStore } from "@posthog/ui/features/settings/settingsStore";
 import { useIsWorkspaceCloudRun } from "@posthog/ui/features/workspace/useWorkspace";
 import { useConnectivity } from "@posthog/ui/hooks/useConnectivity";
 import { toast } from "@posthog/ui/primitives/toast";
+import { track } from "@posthog/ui/shell/analytics";
 import {
   pendingTaskPromptStoreApi,
   usePendingTaskPrompt,
@@ -94,6 +99,54 @@ interface SessionViewProps {
 const DEFAULT_ERROR_MESSAGE =
   "Failed to resume this session. The working directory may have been deleted. Please start a new session.";
 
+function ConnectingToAgent() {
+  return (
+    <>
+      <Spinner size={28} className="animate-spin text-gray-9" />
+      <Text color="gray" className="text-base">
+        Connecting to agent...
+      </Text>
+    </>
+  );
+}
+
+/** Centers composer-slot content at the chat width (or compact padding). */
+function ComposerWidth({
+  compact,
+  children,
+}: {
+  compact: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <Box
+      className={compact ? "p-1" : "mx-auto px-2 pb-3"}
+      style={compact ? undefined : { maxWidth: CHAT_CONTENT_MAX_WIDTH }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+/**
+ * Input region replacing the composer: `shrink-0` keeps it from being
+ * compressed by the scroller above, and `min-h-0 overflow-y-auto` lets tall
+ * content scroll inside itself.
+ */
+function ComposerSlot({
+  compact,
+  children,
+}: {
+  compact: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <Box className="min-h-0 shrink-0 overflow-y-auto">
+      <ComposerWidth compact={compact}>{children}</ComposerWidth>
+    </Box>
+  );
+}
+
 interface CloudStreamDisconnectedBannerProps {
   errorTitle?: string;
   errorMessage?: string;
@@ -271,6 +324,39 @@ export function SessionView({
   // prompt cache has likely expired (see useStaleConversationGate).
   const staleGate = useStaleConversationGate(sessionId, events);
 
+  // Plain functions, not useCallbacks: the notice isn't memoized, and the
+  // values they close over (usage, cost) change with every streamed event.
+  const trackStaleGateChoice = (
+    choice: StaleConversationGateChoiceProperties["choice"],
+  ) =>
+    track(ANALYTICS_EVENTS.STALE_CONVERSATION_GATE_CHOICE, {
+      choice,
+      used_tokens: staleGate.usedTokens,
+      cost_usd: staleGate.costUsd,
+    });
+
+  const handleStaleCompact = () => {
+    if (!isOnline) {
+      showOfflineToast();
+      return;
+    }
+    trackStaleGateChoice("compact");
+    staleGate.onContinue();
+    onSendPrompt("/compact");
+  };
+
+  const handleStaleContinue = () => {
+    trackStaleGateChoice("continue");
+    staleGate.onContinue();
+  };
+
+  const handleStaleNewSession = onNewSession
+    ? () => {
+        trackStaleGateChoice("new_session");
+        onNewSession();
+      }
+    : undefined;
+
   const [isDraggingFile, setIsDraggingFile] = useState(false);
   const editorRef = useRef<PromptInputHandle>(null);
   const dragCounterRef = useRef(0);
@@ -572,27 +658,46 @@ export function SessionView({
                       )}
                     </Flex>
                   </Flex>
-                ) : hideInput ? null : firstPendingPermission ? (
-                  // This box replaces the composer while a permission is pending, so it's an input
-                  // region: `shrink-0` keeps it from being compressed by the scroller above, and
-                  // `min-h-0 overflow-y-auto` lets a tall permission prompt scroll inside itself.
-                  <Box className="min-h-0 shrink-0 overflow-y-auto">
-                    <Box
-                      className={compact ? "p-1" : "mx-auto px-2 pb-3"}
-                      style={
-                        compact
-                          ? undefined
-                          : { maxWidth: CHAT_CONTENT_MAX_WIDTH }
-                      }
-                    >
-                      <PermissionSelector
-                        toolCall={firstPendingPermission.toolCall}
-                        options={firstPendingPermission.options}
-                        onSelect={handlePermissionSelect}
-                        onCancel={handlePermissionCancel}
+                ) : hideInput ? null : staleGate.active ? (
+                  // Replaces the composer (and any pending permission — answering
+                  // one also resumes the costly turn) until the user chooses.
+                  isRunning ? (
+                    <ComposerSlot compact={compact}>
+                      <StaleConversationCostNotice
+                        usedTokens={staleGate.usedTokens}
+                        lastActivityAt={staleGate.lastActivityAt}
+                        costUsd={staleGate.costUsd}
+                        onContinue={handleStaleContinue}
+                        onCompact={
+                          firstPendingPermission
+                            ? undefined
+                            : handleStaleCompact
+                        }
+                        onNewSession={handleStaleNewSession}
                       />
-                    </Box>
-                  </Box>
+                    </ComposerSlot>
+                  ) : (
+                    // While reconnecting the gate still covers the composer
+                    // slot: handoff can leave pendingPermissions set, and the
+                    // choices must not fire into a half-connected session.
+                    <Flex
+                      align="center"
+                      justify="center"
+                      gap="2"
+                      className="min-h-[66px]"
+                    >
+                      <ConnectingToAgent />
+                    </Flex>
+                  )
+                ) : firstPendingPermission ? (
+                  <ComposerSlot compact={compact}>
+                    <PermissionSelector
+                      toolCall={firstPendingPermission.toolCall}
+                      options={firstPendingPermission.options}
+                      onSelect={handlePermissionSelect}
+                      onCancel={handlePermissionCancel}
+                    />
+                  </ComposerSlot>
                 ) : (
                   <Box className="relative">
                     <Box
@@ -602,10 +707,7 @@ export function SessionView({
                           : "opacity-100"
                       }`}
                     >
-                      <Spinner size={28} className="animate-spin text-gray-9" />
-                      <Text color="gray" className="text-base">
-                        Connecting to agent...
-                      </Text>
+                      <ConnectingToAgent />
                     </Box>
                     <Box
                       className={`transition-all duration-300 ease-out ${
@@ -614,60 +716,18 @@ export function SessionView({
                           : "pointer-events-none translate-y-4 opacity-0"
                       }`}
                     >
-                      <Box
-                        className={compact ? "p-1" : "mx-auto px-2 pb-3"}
-                        style={
-                          compact
-                            ? undefined
-                            : { maxWidth: CHAT_CONTENT_MAX_WIDTH }
-                        }
-                      >
+                      <ComposerWidth compact={compact}>
                         {taskId && <QueuedMessagesDock taskId={taskId} />}
-                        {staleGate.dismissed && (
-                          <Flex justify="center" mb="2">
-                            <Button
-                              variant="soft"
-                              color="amber"
-                              size="1"
-                              onClick={staleGate.onReopen}
-                            >
-                              <Warning size={14} weight="fill" />
-                              Conversation paused to avoid a costly reload —
-                              review
-                            </Button>
-                          </Flex>
-                        )}
-                        <StaleConversationCostDialog
-                          open={staleGate.dialogOpen}
-                          usedTokens={staleGate.usedTokens}
-                          lastActivityAt={staleGate.lastActivityAt}
-                          costUsd={staleGate.costUsd}
-                          onContinue={staleGate.onContinue}
-                          onCompact={() => {
-                            // Acknowledge so the gate clears and the dialog
-                            // closes, then trigger the agent's manual compaction.
-                            staleGate.onContinue();
-                            onSendPrompt("/compact");
-                          }}
-                          onOpenChange={staleGate.onDialogOpenChange}
-                        />
                         <PromptInput
                           ref={editorRef}
                           sessionId={sessionId}
                           placeholder="Type a message... @ to mention files, ! for bash mode, / for skills"
-                          disabled={
-                            (!isRunning && !handoffInProgress) ||
-                            staleGate.active
-                          }
+                          disabled={!isRunning && !handoffInProgress}
                           submitDisabledExternal={
                             handoffInProgress || !isOnline
                           }
                           submitTooltipOverride={
-                            staleGate.active
-                              ? "Large idle conversation — review the cost notice to continue"
-                              : !isOnline
-                                ? "No internet connection"
-                                : undefined
+                            !isOnline ? "No internet connection" : undefined
                           }
                           isLoading={!!isPromptPending}
                           isActiveSession={isActiveSession}
@@ -708,7 +768,7 @@ export function SessionView({
                           onBashCommand={onBashCommand}
                           onCancel={onCancelPrompt}
                         />
-                      </Box>
+                      </ComposerWidth>
                     </Box>
                   </Box>
                 )}