diff --git a/apps/web/src/pages/shell/transcript.tsx b/apps/web/src/pages/shell/transcript.tsx
index 3effbe4..6b3f644 100644
--- a/apps/web/src/pages/shell/transcript.tsx
+++ b/apps/web/src/pages/shell/transcript.tsx
@@ -68,6 +68,7 @@ import {
ChartBlockView,
ChoiceCard,
ExternalLinksBar,
+ extractActivePlanState,
McpApprovalCard,
PlanCard,
} from "./message-cards";
@@ -296,6 +297,10 @@ export const Transcript = memo(function Transcript({
}
return { absorbed, stepsByPlanMsgId };
}, [coalescedMessages, runNarration.steps]);
+ const hasActivePlanPill = useMemo(
+ () => Boolean(extractActivePlanState(coalescedMessages, running, runStartedAt)),
+ [coalescedMessages, running, runStartedAt],
+ );
const trailingAnsweringBots = useMemo(() => {
const liveProgressMessages = coalescedMessages.filter(
(message) => !runNarration.hidden.has(message.id) && message.id.startsWith("progress:"),
@@ -538,7 +543,7 @@ export const Transcript = memo(function Transcript({
useLayoutEffect(() => {
if (following.current) snapToEnd();
- }, [messages, running, snapToEnd]);
+ }, [messages, running, hasActivePlanPill, snapToEnd]);
// A question the bot waits on can scroll out of view; offer a way back to it instead of the arrow.
const [askOffscreen, setAskOffscreen] = useState(false);
@@ -666,8 +671,8 @@ export const Transcript = memo(function Transcript({
) : null}
{coalescedMessages.map((message) => {
if (runNarration.hidden.has(message.id)) return null;
@@ -923,7 +928,9 @@ export const Transcript = memo(function Transcript({
aria-hidden={!showJumpToLatest}
tabIndex={showJumpToLatest ? 0 : -1}
onClick={jumpToLatest}
- className={`absolute bottom-24 left-1/2 z-20 grid h-9 w-9 -translate-x-1/2 place-items-center rounded-full border border-border bg-muted/95 text-foreground/75 shadow-md backdrop-blur transition-[opacity,transform,background-color] duration-200 ease-[cubic-bezier(.22,1,.36,1)] hover:bg-border md:bottom-28 motion-reduce:transition-none ${
+ className={`absolute left-1/2 z-20 grid h-9 w-9 -translate-x-1/2 place-items-center rounded-full border border-border bg-muted/95 text-foreground/75 shadow-md backdrop-blur transition-[opacity,transform,background-color] duration-200 ease-[cubic-bezier(.22,1,.36,1)] hover:bg-border motion-reduce:transition-none ${
+ hasActivePlanPill ? "bottom-44 md:bottom-48" : "bottom-24 md:bottom-28"
+ } ${
showJumpToLatest
? "translate-y-0 opacity-100"
: "pointer-events-none translate-y-2 opacity-0"
@@ -936,7 +943,9 @@ export const Transcript = memo(function Transcript({
type="button"
data-testid="needs-you-jump"
onClick={jumpToAsk}
- className="absolute bottom-24 left-1/2 z-20 inline-flex h-9 -translate-x-1/2 items-center gap-1.5 rounded-full border border-border bg-muted/95 px-3.5 text-ui-body-sm font-medium text-foreground shadow-md backdrop-blur hover:bg-border md:bottom-28"
+ className={`absolute left-1/2 z-20 inline-flex h-9 -translate-x-1/2 items-center gap-1.5 rounded-full border border-border bg-muted/95 px-3.5 text-ui-body-sm font-medium text-foreground shadow-md backdrop-blur hover:bg-border ${
+ hasActivePlanPill ? "bottom-44 md:bottom-48" : "bottom-24 md:bottom-28"
+ }`}
>
{t`Needs you`}