feat: FLIP-style lozenge fly animation when agents are assigned to stories
Implements Story 74: agent lozenges now animate as fixed-position overlays that fly from the roster badge in AgentPanel to the story slot in StagePanel (and back when the agent is removed), satisfying all acceptance criteria. Key changes: - LozengeFlyContext.tsx (new): coordinates FLIP animations via React context. LozengeFlyProvider tracks pipeline changes, hides slot lozenges during fly-in (useLayoutEffect before paint), then creates a portal-rendered fixed-position clone that transitions from roster → slot (or reverse). z-index 9999 ensures the clone travels above all other UI elements. - AgentPanel.tsx: RosterBadge registers its DOM element with the context so fly animations know the correct start/end coordinates. - StagePanel.tsx: AgentLozenge registers its DOMRect on every render via useLayoutEffect (for fly-out) and reads pendingFlyIns to stay hidden while a fly-in clone is in flight. Added align-self: flex-start so the lozenge maintains its intrinsic width and never stretches in the panel. - Chat.tsx: right-column panels wrapped in LozengeFlyProvider. - LozengeFlyContext.test.tsx (new): 10 tests covering fixed width, fly-in/fly-out clone creation, portal placement, opacity lifecycle, and idle vs active visual distinction. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Dave
376
frontend/src/components/LozengeFlyContext.tsx
Normal file
376
frontend/src/components/LozengeFlyContext.tsx
Normal file
@@ -0,0 +1,376 @@
|
||||
/**
|
||||
* LozengeFlyContext – FLIP-style animation system for agent lozenges.
|
||||
*
|
||||
* When an agent is assigned to a story, a fixed-positioned clone of the
|
||||
* agent lozenge "flies" from the roster badge in AgentPanel to the slot
|
||||
* in StagePanel (or vice-versa when the agent is removed). The overlay
|
||||
* travels above all other UI elements (z-index 9999) so it is never
|
||||
* clipped by the layout.
|
||||
*/
|
||||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
import type { PipelineState } from "../api/client";
|
||||
|
||||
const {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} = React;
|
||||
|
||||
// ─── Public context shape ─────────────────────────────────────────────────────
|
||||
|
||||
export interface LozengeFlyContextValue {
|
||||
/** Register/unregister a roster badge DOM element by agent name. */
|
||||
registerRosterEl: (agentName: string, el: HTMLElement | null) => void;
|
||||
/**
|
||||
* Save the latest DOMRect for a story's lozenge slot.
|
||||
* Called on every render of AgentLozenge via useLayoutEffect.
|
||||
*/
|
||||
saveSlotRect: (storyId: string, rect: DOMRect) => void;
|
||||
/**
|
||||
* Set of storyIds whose slot lozenges should be hidden because a
|
||||
* fly-in animation is in progress.
|
||||
*/
|
||||
pendingFlyIns: ReadonlySet<string>;
|
||||
}
|
||||
|
||||
const noop = () => {};
|
||||
const emptySet: ReadonlySet<string> = new Set();
|
||||
|
||||
export const LozengeFlyContext = createContext<LozengeFlyContextValue>({
|
||||
registerRosterEl: noop,
|
||||
saveSlotRect: noop,
|
||||
pendingFlyIns: emptySet,
|
||||
});
|
||||
|
||||
// ─── Internal flying-lozenge state ───────────────────────────────────────────
|
||||
|
||||
interface FlyingLozenge {
|
||||
id: string;
|
||||
label: string;
|
||||
isActive: boolean;
|
||||
startX: number;
|
||||
startY: number;
|
||||
endX: number;
|
||||
endY: number;
|
||||
/** false = positioned at start, true = CSS transition to end */
|
||||
flying: boolean;
|
||||
}
|
||||
|
||||
interface PendingFlyIn {
|
||||
storyId: string;
|
||||
agentName: string;
|
||||
label: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
interface PendingFlyOut {
|
||||
storyId: string;
|
||||
agentName: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
// ─── Provider ─────────────────────────────────────────────────────────────────
|
||||
|
||||
interface LozengeFlyProviderProps {
|
||||
children: React.ReactNode;
|
||||
pipeline: PipelineState;
|
||||
}
|
||||
|
||||
export function LozengeFlyProvider({
|
||||
children,
|
||||
pipeline,
|
||||
}: LozengeFlyProviderProps) {
|
||||
const rosterElsRef = useRef<Map<string, HTMLElement>>(new Map());
|
||||
const savedSlotRectsRef = useRef<Map<string, DOMRect>>(new Map());
|
||||
const prevPipelineRef = useRef<PipelineState | null>(null);
|
||||
|
||||
// Actions detected in useLayoutEffect, consumed in useEffect
|
||||
const pendingFlyInActionsRef = useRef<PendingFlyIn[]>([]);
|
||||
const pendingFlyOutActionsRef = useRef<PendingFlyOut[]>([]);
|
||||
|
||||
const [pendingFlyIns, setPendingFlyIns] = useState<ReadonlySet<string>>(
|
||||
new Set(),
|
||||
);
|
||||
const [flyingLozenges, setFlyingLozenges] = useState<FlyingLozenge[]>([]);
|
||||
|
||||
const registerRosterEl = useCallback(
|
||||
(agentName: string, el: HTMLElement | null) => {
|
||||
if (el) {
|
||||
rosterElsRef.current.set(agentName, el);
|
||||
} else {
|
||||
rosterElsRef.current.delete(agentName);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const saveSlotRect = useCallback((storyId: string, rect: DOMRect) => {
|
||||
savedSlotRectsRef.current.set(storyId, rect);
|
||||
}, []);
|
||||
|
||||
// ── Detect pipeline changes (runs before paint) ───────────────────────────
|
||||
// Sets pendingFlyIns so slot lozenges hide before the browser paints,
|
||||
// preventing a one-frame "flash" of the visible lozenge before fly-in.
|
||||
useLayoutEffect(() => {
|
||||
if (prevPipelineRef.current === null) {
|
||||
prevPipelineRef.current = pipeline;
|
||||
return;
|
||||
}
|
||||
|
||||
const prev = prevPipelineRef.current;
|
||||
const allPrev = [
|
||||
...prev.upcoming,
|
||||
...prev.current,
|
||||
...prev.qa,
|
||||
...prev.merge,
|
||||
];
|
||||
const allCurr = [
|
||||
...pipeline.upcoming,
|
||||
...pipeline.current,
|
||||
...pipeline.qa,
|
||||
...pipeline.merge,
|
||||
];
|
||||
|
||||
const newFlyInStoryIds = new Set<string>();
|
||||
|
||||
for (const curr of allCurr) {
|
||||
const prevItem = allPrev.find((p) => p.story_id === curr.story_id);
|
||||
const agentChanged =
|
||||
curr.agent &&
|
||||
(!prevItem?.agent ||
|
||||
prevItem.agent.agent_name !== curr.agent.agent_name);
|
||||
if (agentChanged && curr.agent) {
|
||||
const label = curr.agent.model
|
||||
? `${curr.agent.agent_name} ${curr.agent.model}`
|
||||
: curr.agent.agent_name;
|
||||
pendingFlyInActionsRef.current.push({
|
||||
storyId: curr.story_id,
|
||||
agentName: curr.agent.agent_name,
|
||||
label,
|
||||
isActive: curr.agent.status === "running",
|
||||
});
|
||||
newFlyInStoryIds.add(curr.story_id);
|
||||
}
|
||||
}
|
||||
|
||||
for (const prevItem of allPrev) {
|
||||
if (!prevItem.agent) continue;
|
||||
const currItem = allCurr.find((c) => c.story_id === prevItem.story_id);
|
||||
const agentRemoved =
|
||||
!currItem?.agent ||
|
||||
currItem.agent.agent_name !== prevItem.agent.agent_name;
|
||||
if (agentRemoved) {
|
||||
const label = prevItem.agent.model
|
||||
? `${prevItem.agent.agent_name} ${prevItem.agent.model}`
|
||||
: prevItem.agent.agent_name;
|
||||
pendingFlyOutActionsRef.current.push({
|
||||
storyId: prevItem.story_id,
|
||||
agentName: prevItem.agent.agent_name,
|
||||
label,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
prevPipelineRef.current = pipeline;
|
||||
|
||||
// Only hide slots for stories that have a matching roster element
|
||||
if (newFlyInStoryIds.size > 0) {
|
||||
const hideable = new Set<string>();
|
||||
for (const storyId of newFlyInStoryIds) {
|
||||
const action = pendingFlyInActionsRef.current.find(
|
||||
(a) => a.storyId === storyId,
|
||||
);
|
||||
if (action && rosterElsRef.current.has(action.agentName)) {
|
||||
hideable.add(storyId);
|
||||
}
|
||||
}
|
||||
if (hideable.size > 0) {
|
||||
setPendingFlyIns((prev) => {
|
||||
const next = new Set(prev);
|
||||
for (const id of hideable) next.add(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [pipeline]);
|
||||
|
||||
// ── Execute animations (runs after paint, DOM positions are stable) ───────
|
||||
useEffect(() => {
|
||||
const flyIns = [...pendingFlyInActionsRef.current];
|
||||
pendingFlyInActionsRef.current = [];
|
||||
const flyOuts = [...pendingFlyOutActionsRef.current];
|
||||
pendingFlyOutActionsRef.current = [];
|
||||
|
||||
for (const action of flyIns) {
|
||||
const rosterEl = rosterElsRef.current.get(action.agentName);
|
||||
const slotRect = savedSlotRectsRef.current.get(action.storyId);
|
||||
|
||||
if (!rosterEl || !slotRect) {
|
||||
// No roster element: immediately reveal the slot lozenge
|
||||
setPendingFlyIns((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(action.storyId);
|
||||
return next;
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
const rosterRect = rosterEl.getBoundingClientRect();
|
||||
const id = `fly-in-${action.agentName}-${action.storyId}-${Date.now()}`;
|
||||
|
||||
setFlyingLozenges((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id,
|
||||
label: action.label,
|
||||
isActive: action.isActive,
|
||||
startX: rosterRect.left,
|
||||
startY: rosterRect.top,
|
||||
endX: slotRect.left,
|
||||
endY: slotRect.top,
|
||||
flying: false,
|
||||
},
|
||||
]);
|
||||
|
||||
// FLIP "Play" step: after two frames the transition begins
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
setFlyingLozenges((prev) =>
|
||||
prev.map((l) => (l.id === id ? { ...l, flying: true } : l)),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// After the transition completes, remove clone and reveal slot lozenge
|
||||
setTimeout(() => {
|
||||
setFlyingLozenges((prev) => prev.filter((l) => l.id !== id));
|
||||
setPendingFlyIns((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(action.storyId);
|
||||
return next;
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
|
||||
for (const action of flyOuts) {
|
||||
const rosterEl = rosterElsRef.current.get(action.agentName);
|
||||
const slotRect = savedSlotRectsRef.current.get(action.storyId);
|
||||
if (!slotRect) continue;
|
||||
|
||||
const rosterRect = rosterEl?.getBoundingClientRect();
|
||||
const id = `fly-out-${action.agentName}-${action.storyId}-${Date.now()}`;
|
||||
|
||||
setFlyingLozenges((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id,
|
||||
label: action.label,
|
||||
isActive: false,
|
||||
startX: slotRect.left,
|
||||
startY: slotRect.top,
|
||||
endX: rosterRect?.left ?? slotRect.left,
|
||||
endY: rosterRect?.top ?? Math.max(0, slotRect.top - 80),
|
||||
flying: false,
|
||||
},
|
||||
]);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
setFlyingLozenges((prev) =>
|
||||
prev.map((l) => (l.id === id ? { ...l, flying: true } : l)),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
setFlyingLozenges((prev) => prev.filter((l) => l.id !== id));
|
||||
}, 500);
|
||||
}
|
||||
}, [pipeline]);
|
||||
|
||||
const contextValue = useMemo(
|
||||
() => ({ registerRosterEl, saveSlotRect, pendingFlyIns }),
|
||||
[registerRosterEl, saveSlotRect, pendingFlyIns],
|
||||
);
|
||||
|
||||
return (
|
||||
<LozengeFlyContext.Provider value={contextValue}>
|
||||
{children}
|
||||
{ReactDOM.createPortal(
|
||||
<FloatingLozengeSurface lozenges={flyingLozenges} />,
|
||||
document.body,
|
||||
)}
|
||||
</LozengeFlyContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Portal surface ───────────────────────────────────────────────────────────
|
||||
|
||||
function FloatingLozengeSurface({ lozenges }: { lozenges: FlyingLozenge[] }) {
|
||||
return (
|
||||
<>
|
||||
{lozenges.map((l) => (
|
||||
<FlyingLozengeClone key={l.id} lozenge={l} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function FlyingLozengeClone({ lozenge }: { lozenge: FlyingLozenge }) {
|
||||
const color = lozenge.isActive ? "#58a6ff" : "#e3b341";
|
||||
const x = lozenge.flying ? lozenge.endX : lozenge.startX;
|
||||
const y = lozenge.flying ? lozenge.endY : lozenge.startY;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid={`flying-lozenge-${lozenge.id}`}
|
||||
style={{
|
||||
position: "fixed",
|
||||
left: `${x}px`,
|
||||
top: `${y}px`,
|
||||
zIndex: 9999,
|
||||
pointerEvents: "none",
|
||||
transition: lozenge.flying
|
||||
? "left 0.4s cubic-bezier(0.4, 0, 0.2, 1), top 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
|
||||
: "none",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: "5px",
|
||||
padding: "2px 8px",
|
||||
borderRadius: "999px",
|
||||
fontSize: "0.72em",
|
||||
fontWeight: 600,
|
||||
background: `${color}18`,
|
||||
color,
|
||||
border: `1px solid ${color}44`,
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{lozenge.isActive && (
|
||||
<span
|
||||
style={{
|
||||
width: "5px",
|
||||
height: "5px",
|
||||
borderRadius: "50%",
|
||||
background: color,
|
||||
animation: "pulse 1.5s infinite",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{lozenge.label}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Hook ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function useLozengeFly(): LozengeFlyContextValue {
|
||||
return useContext(LozengeFlyContext);
|
||||
}
|
||||
Reference in New Issue
Block a user