Persistent Composer Transition Implementation Plan

// web/src/components/chat/composer/__tests__/composerSlotContext.test.tsx
import React from "react";
import "@testing-library/jest-dom";
import { render, screen, act } from "@testing-library/react";
import {
  ComposerSlotProvider,
  useComposerSlotContext
} from "../composerSlotContext";

const noopSend = jest.fn();

function Probe() {
  const { activeSlot, registerSlot, unregisterSlot } =
    useComposerSlotContext();
  return (
    <div>
      <span data-testid="active">{activeSlot ? activeSlot.id : "none"}</span>
      <button
        onClick={() => {
          const el = document.createElement("div");
          el.id = "slot-a";
          registerSlot(el, noopSend);
          (window as any).__slotA = el;
        }}
      >
        register-a
      </button>
      <button onClick={() => unregisterSlot((window as any).__slotA)}>
        unregister-a
      </button>
    </div>
  );
}

describe("composerSlotContext", () => {
  it("tracks the active slot and clears only when the active element unregisters", () => {
    render(
      <ComposerSlotProvider>
        <Probe />
      </ComposerSlotProvider>
    );

    expect(screen.getByTestId("active")).toHaveTextContent("none");

    act(() => {
      screen.getByText("register-a").click();
    });
    expect(screen.getByTestId("active")).toHaveTextContent("slot-a");

    act(() => {
      screen.getByText("unregister-a").click();
    });
    expect(screen.getByTestId("active")).toHaveTextContent("none");
  });

  it("ignores unregister of a non-active element", () => {
    render(
      <ComposerSlotProvider>
        <Probe />
      </ComposerSlotProvider>
    );
    act(() => {
      screen.getByText("register-a").click();
    });
    act(() => {
      // unregister a different element
      const other = document.createElement("div");
      // call unregister with a stale element by swapping window ref
      const realA = (window as any).__slotA;
      (window as any).__slotA = other;
      screen.getByText("unregister-a").click();
      (window as any).__slotA = realA;
    });
    expect(screen.getByTestId("active")).toHaveTextContent("slot-a");
  });
});

// web/src/components/chat/composer/composerSlotContext.tsx
import React, {
  createContext,
  useCallback,
  useContext,
  useMemo,
  useRef,
  useState
} from "react";
import type { MessageContent } from "../../../stores/ApiTypes";
import type { MediaGenerationRequest } from "../types/media.types";

export type ComposerSendHandler = (
  content: MessageContent[],
  prompt: string,
  agentMode: boolean,
  mediaGeneration?: MediaGenerationRequest
) => void | Promise<void>;

interface ComposerSlotContextValue {
  activeSlot: HTMLElement | null;
  activeSend: ComposerSendHandler | null;
  composerHeight: number;
  registerSlot: (el: HTMLElement, send: ComposerSendHandler) => void;
  unregisterSlot: (el: HTMLElement) => void;
  setComposerHeight: (px: number) => void;
}

const ComposerSlotContext = createContext<ComposerSlotContextValue | null>(
  null
);

export const ComposerSlotProvider: React.FC<{ children: React.ReactNode }> = ({
  children
}) => {
  const [activeSlot, setActiveSlot] = useState<HTMLElement | null>(null);
  const [composerHeight, setComposerHeight] = useState(0);
  // Keep the latest send handler in a ref so re-registering does not churn
  // identity for consumers that only read `activeSend`.
  const sendRef = useRef<ComposerSendHandler | null>(null);
  const [activeSend, setActiveSend] = useState<ComposerSendHandler | null>(
    null
  );

  const registerSlot = useCallback(
    (el: HTMLElement, send: ComposerSendHandler) => {
      sendRef.current = send;
      setActiveSlot(el);
      setActiveSend(() => send);
    },
    []
  );

  const unregisterSlot = useCallback((el: HTMLElement) => {
    setActiveSlot((current) => {
      if (current === el) {
        sendRef.current = null;
        setActiveSend(null);
        return null;
      }
      return current;
    });
  }, []);

  const value = useMemo<ComposerSlotContextValue>(
    () => ({
      activeSlot,
      activeSend,
      composerHeight,
      registerSlot,
      unregisterSlot,
      setComposerHeight
    }),
    [activeSlot, activeSend, composerHeight, registerSlot, unregisterSlot]
  );

  return (
    <ComposerSlotContext.Provider value={value}>
      {children}
    </ComposerSlotContext.Provider>
  );
};

export function useComposerSlotContext(): ComposerSlotContextValue {
  const ctx = useContext(ComposerSlotContext);
  if (!ctx) {
    throw new Error(
      "useComposerSlotContext must be used within a ComposerSlotProvider"
    );
  }
  return ctx;
}

// web/src/components/chat/composer/__tests__/ComposerSlot.test.tsx
import React from "react";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import {
  ComposerSlotProvider,
  useComposerSlotContext
} from "../composerSlotContext";
import ComposerSlot from "../ComposerSlot";

const send = jest.fn();

function ActiveReadout() {
  const { activeSlot } = useComposerSlotContext();
  return (
    <span data-testid="active">{activeSlot ? "registered" : "none"}</span>
  );
}

describe("ComposerSlot", () => {
  it("registers on mount and clears on unmount", () => {
    const { unmount, rerender } = render(
      <ComposerSlotProvider>
        <ComposerSlot onSend={send} className="slot" />
        <ActiveReadout />
      </ComposerSlotProvider>
    );
    expect(screen.getByTestId("active")).toHaveTextContent("registered");

    rerender(
      <ComposerSlotProvider>
        <ActiveReadout />
      </ComposerSlotProvider>
    );
    // After removing the slot, the provider's active element should clear.
    expect(screen.getByTestId("active")).toHaveTextContent("none");
    unmount();
  });

  it("reserves vertical space equal to the composer height", () => {
    render(
      <ComposerSlotProvider>
        <ComposerSlot onSend={send} className="slot" />
      </ComposerSlotProvider>
    );
    const slot = document.querySelector("[data-composer-slot]") as HTMLElement;
    expect(slot).toBeTruthy();
    // composerHeight defaults to 0 → min-height 0 is acceptable; presence check.
    expect(slot.getAttribute("data-composer-slot")).toBe("");
  });
});

// web/src/components/chat/composer/ComposerSlot.tsx
import React, { useLayoutEffect, useRef } from "react";
import {
  useComposerSlotContext,
  type ComposerSendHandler
} from "./composerSlotContext";

interface ComposerSlotProps {
  /** Per-route send handler invoked by the persistent composer. */
  onSend: ComposerSendHandler;
  className?: string;
}

/**
 * Empty spacer that marks where the persistent composer should be anchored on
 * the current route. Registers its DOM element + send handler with the slot
 * context and reserves vertical space equal to the live composer height so
 * content above it lays out correctly while the real composer is rendered as a
 * fixed overlay on top.
 */
const ComposerSlot: React.FC<ComposerSlotProps> = ({ onSend, className }) => {
  const { registerSlot, unregisterSlot, composerHeight } =
    useComposerSlotContext();
  const ref = useRef<HTMLDivElement | null>(null);
  // Keep the latest handler without forcing re-registration each render.
  const sendRef = useRef<ComposerSendHandler>(onSend);
  sendRef.current = onSend;

  useLayoutEffect(() => {
    const el = ref.current;
    if (!el) return;
    registerSlot(el, (...args) => sendRef.current(...args));
    return () => {
      unregisterSlot(el);
    };
  }, [registerSlot, unregisterSlot]);

  return (
    <div
      ref={ref}
      className={className}
      data-composer-slot=""
      style=
    />
  );
};

export default ComposerSlot;

// web/src/components/chat/composer/__tests__/useFlipPosition.test.tsx
import React, { useRef } from "react";
import "@testing-library/jest-dom";
import { render } from "@testing-library/react";
import { useFlipPosition } from "../useFlipPosition";

// jsdom returns a zeroed DOMRect; we stub getBoundingClientRect per element.
function makeRect(x: number, y: number, w = 100, h = 40): DOMRect {
  return {
    x,
    y,
    width: w,
    height: h,
    top: y,
    left: x,
    right: x + w,
    bottom: y + h,
    toJSON: () => ({})
  } as DOMRect;
}

function Harness({ trigger }: { trigger: number }) {
  const ref = useRef<HTMLDivElement | null>(null);
  useFlipPosition(ref, [trigger]);
  return <div ref={ref} data-testid="box" />;
}

describe("useFlipPosition", () => {
  let animateSpy: jest.SpyInstance;
  let matchMediaMock: jest.Mock;

  beforeEach(() => {
    animateSpy = jest
      .spyOn(Element.prototype, "animate")
      .mockReturnValue({} as Animation);
    matchMediaMock = jest.fn().mockReturnValue({ matches: false });
    // @ts-expect-error test stub
    window.matchMedia = matchMediaMock;
  });

  afterEach(() => {
    animateSpy.mockRestore();
  });

  it("does not animate on first render (no previous rect)", () => {
    const rects = [makeRect(0, 500), makeRect(0, 0)];
    let call = 0;
    jest
      .spyOn(Element.prototype, "getBoundingClientRect")
      .mockImplementation(() => rects[Math.min(call++, rects.length - 1)]);

    render(<Harness trigger={1} />);
    expect(animateSpy).not.toHaveBeenCalled();
  });

  it("animates from the previous rect to the current rect on change", () => {
    const rects = [makeRect(0, 500), makeRect(0, 500), makeRect(0, 0)];
    let call = 0;
    jest
      .spyOn(Element.prototype, "getBoundingClientRect")
      .mockImplementation(() => rects[Math.min(call++, rects.length - 1)]);

    const { rerender } = render(<Harness trigger={1} />);
    rerender(<Harness trigger={2} />);

    expect(animateSpy).toHaveBeenCalledTimes(1);
    const keyframes = animateSpy.mock.calls[0][0] as Keyframe[];
    expect(String(keyframes[0].transform)).toContain("translate");
  });

  it("skips animation when prefers-reduced-motion is set", () => {
    matchMediaMock.mockReturnValue({ matches: true });
    const rects = [makeRect(0, 500), makeRect(0, 500), makeRect(0, 0)];
    let call = 0;
    jest
      .spyOn(Element.prototype, "getBoundingClientRect")
      .mockImplementation(() => rects[Math.min(call++, rects.length - 1)]);

    const { rerender } = render(<Harness trigger={1} />);
    rerender(<Harness trigger={2} />);
    expect(animateSpy).not.toHaveBeenCalled();
  });
});

// web/src/components/chat/composer/__tests__/PersistentComposer.test.tsx
import React from "react";
import "@testing-library/jest-dom";
import { render, screen, act } from "@testing-library/react";
import { ThemeProvider } from "@mui/material/styles";
import mockTheme from "../../../../__mocks__/themeMock";
import {
  ComposerSlotProvider,
  useComposerSlotContext
} from "../composerSlotContext";
import PersistentComposer from "../PersistentComposer";

// Stub ResizeObserver (absent in jsdom).
beforeAll(() => {
  // @ts-expect-error test stub
  global.ResizeObserver = class {
    observe() {}
    unobserve() {}
    disconnect() {}
  };
});

// Mock the heavy composer so the test stays focused on PersistentComposer.
const sendSpy = jest.fn();
jest.mock("../../containers/ChatInputSection", () => ({
  __esModule: true,
  default: ({ onSendMessage }: any) => (
    <button
      data-testid="composer"
      onClick={() => onSendMessage([{ type: "text", text: "hi" }], "hi", false)}
    >
      composer
    </button>
  )
}));

// Mock the store so PersistentComposer can read state.
jest.mock("../../../../stores/GlobalChatStore", () => ({
  __esModule: true,
  default: (selector: any) =>
    selector({
      status: "connected",
      selectedModel: { type: "language_model", provider: "openai", id: "x" },
      selectedTools: [],
      agentMode: false
    })
}));

function RegisterButton() {
  const { registerSlot } = useComposerSlotContext();
  return (
    <button
      onClick={() => {
        const el = document.createElement("div");
        el.id = "slot";
        document.body.appendChild(el);
        registerSlot(el, sendSpy);
      }}
    >
      register
    </button>
  );
}

function renderTree() {
  return render(
    <ThemeProvider theme={mockTheme}>
      <ComposerSlotProvider>
        <RegisterButton />
        <PersistentComposer />
      </ComposerSlotProvider>
    </ThemeProvider>
  );
}

describe("PersistentComposer", () => {
  it("renders exactly one composer", () => {
    renderTree();
    expect(screen.getAllByTestId("composer")).toHaveLength(1);
  });

  it("is hidden until a slot is active, then visible", () => {
    renderTree();
    const root = document.querySelector(
      "[data-persistent-composer]"
    ) as HTMLElement;
    expect(root).toBeTruthy();
    expect(root.style.visibility).toBe("hidden");

    act(() => {
      screen.getByText("register").click();
    });
    expect(root.style.visibility).toBe("visible");
  });

  it("routes submit through the active slot's send handler", () => {
    renderTree();
    act(() => {
      screen.getByText("register").click();
    });
    act(() => {
      screen.getByTestId("composer").click();
    });
    expect(sendSpy).toHaveBeenCalledWith(
      [{ type: "text", text: "hi" }],
      "hi",
      false
    );
  });
});

// web/src/components/chat/composer/PersistentComposer.tsx
import React, {
  useCallback,
  useLayoutEffect,
  useRef,
  useState
} from "react";
import useGlobalChatStore from "../../../stores/GlobalChatStore";
import ChatInputSection from "../containers/ChatInputSection";
import { useComposerSlotContext } from "./composerSlotContext";
import { useFlipPosition } from "./useFlipPosition";

interface Box {
  top: number;
  left: number;
  width: number;
  height: number;
}

const HIDDEN_BOX: Box = { top: 0, left: 0, width: 0, height: 0 };

/**
 * Single composer instance shared across the routes nested under
 * ChatComposerLayout. Rendered as a fixed overlay positioned over the active
 * ComposerSlot; FLIP-animates between slots when the active slot changes
 * (i.e. on navigation between the start page and the chat view).
 */
const PersistentComposer: React.FC = () => {
  const { activeSlot, activeSend, setComposerHeight } =
    useComposerSlotContext();
  const status = useGlobalChatStore((s) => s.status);
  const selectedModel = useGlobalChatStore((s) => s.selectedModel);
  const selectedTools = useGlobalChatStore((s) => s.selectedTools);
  const agentMode = useGlobalChatStore((s) => s.agentMode);
  const setSelectedModel = useGlobalChatStore((s) => s.setSelectedModel);
  const setSelectedTools = useGlobalChatStore((s) => s.setSelectedTools);
  const setAgentMode = useGlobalChatStore((s) => s.setAgentMode);
  const stopGeneration = useGlobalChatStore((s) => s.stopGeneration);

  const rootRef = useRef<HTMLDivElement | null>(null);
  const [box, setBox] = useState<Box>(HIDDEN_BOX);

  // Measure the active slot and mirror its rect. Re-measures on slot change
  // and on window resize.
  const measure = useCallback(() => {
    if (!activeSlot) {
      setBox(HIDDEN_BOX);
      return;
    }
    const r = activeSlot.getBoundingClientRect();
    setBox({ top: r.top, left: r.left, width: r.width, height: r.height });
  }, [activeSlot]);

  useLayoutEffect(() => {
    measure();
    if (!activeSlot) return;
    window.addEventListener("resize", measure);
    const ro = new ResizeObserver(measure);
    ro.observe(activeSlot);
    return () => {
      window.removeEventListener("resize", measure);
      ro.disconnect();
    };
  }, [activeSlot, measure]);

  // Report the composer's own height back to the active slot so it can reserve
  // matching space.
  useLayoutEffect(() => {
    const el = rootRef.current;
    if (!el) return;
    const ro = new ResizeObserver(() => {
      setComposerHeight(el.offsetHeight);
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, [setComposerHeight]);

  // FLIP the overlay whenever its target box changes.
  useFlipPosition(rootRef, [box.top, box.left, box.width]);

  const visible = !!activeSlot;
  const handleSend = activeSend ?? undefined;

  return (
    <div
      ref={rootRef}
      data-persistent-composer=""
      style=
    >
      {handleSend && (
        <ChatInputSection
          status={status === "stopping" ? "loading" : status}
          onSendMessage={handleSend}
          onStop={stopGeneration}
          selectedModel={selectedModel}
          onModelChange={setSelectedModel}
          selectedTools={selectedTools}
          onToolsChange={setSelectedTools}
          agentMode={agentMode}
          onAgentModeToggle={setAgentMode}
        />
      )}
    </div>
  );
};

export default PersistentComposer;

// web/src/components/chat/containers/ChatComposerLayout.tsx
import React from "react";
import { Outlet } from "react-router-dom";
import { ComposerSlotProvider } from "../composer/composerSlotContext";
import PersistentComposer from "../composer/PersistentComposer";

/**
 * Layout route wrapping the start page (/dashboard) and the chat view
 * (/chat/:thread_id). Keeps a single composer instance mounted across
 * navigation between the two so the composer's draft text and focus survive and
 * its position can be animated (FLIP) from the centered start-page slot to the
 * pinned-bottom chat slot.
 */
const ChatComposerLayout: React.FC = () => {
  return (
    <ComposerSlotProvider>
      <Outlet />
      <PersistentComposer />
    </ComposerSlotProvider>
  );
};

export default ChatComposerLayout;

  /**
   * When true, ChatView does not render its own composer. Instead it renders a
   * bottom ComposerSlot wired to its send handler, and the shared
   * PersistentComposer (from ChatComposerLayout) is positioned over it. Used by
   * GlobalChat so the composer persists across /dashboard → /chat.
   */
  useExternalComposer?: boolean;

import ComposerSlot from "../composer/ComposerSlot";

{useExternalComposer ? (
  <ComposerSlot
    className="chat-input-section"
    onSend={handleSendMessage}
  />
) : (
  <ChatInputSection
    status={status}
    onSendMessage={handleSendMessage}
    /* ...keep ALL existing props exactly as they were... */
  />
)}

            <ChatView
              status={getChatViewStatus()}
              /* ...all existing props... */
              noMessagesPlaceholder={welcomePlaceholder}
              useExternalComposer
            />

        <div className="portal-input-wrapper">
          <ComposerSlot className="chat-input-section" onSend={handleSendMessage} />
          {debouncedQuery.length >= 2 && !isTransitioning && (
            <PortalSearchResults
              /* ...unchanged... */
            />
          )}
        </div>

  const handleSendMessage = useCallback(
    async (content: MessageContent[], prompt: string, _agentMode: boolean) => {
      setDebouncedQuery("");

      if (!hasConfiguredProvider) {
        setPendingMessage(prompt);
        setIsTransitioning(true);
        setTimeout(() => {
          setIsTransitioning(false);
          setPortalState("setup");
        }, 400);
        return;
      }

      await sendAndNavigate(content, prompt);
    },
    [hasConfiguredProvider, sendAndNavigate]
  );

        await sendMessage(message);
        navigate(`/chat/${threadId}`);

import ChatComposerLayout from "./components/chat/containers/ChatComposerLayout";

    {
      element: <ChatComposerLayout />,
      children: [
        {
          path: "/dashboard",
          element: (
            <ProtectedRoute>
              <Portal />
            </ProtectedRoute>
          )
        },
        {
          path: "/chat/:thread_id?",
          element: (
            <ProtectedRoute>
              <div
                className="page-enter"
                style=
              >
                <SkipLinks />
                <AppHeader />
                <div
                  id="main-content"
                  style=
                >
                  <PanelLeft />
                  <GlobalChat />
                  <PanelBottom />
                </div>
              </div>
            </ProtectedRoute>
          )
        }
      ]
    },