Fix active run cancel and elapsed restore

frontend/app/components/assistant-ui/thread.tsx

@@ -856,7 +856,11 @@ const ComposerWorkspaceStatus: FC<{ sessionId: string | null }> = ({
 const ComposerAction: FC = () => {
 	const runtimeRunning = useAuiState((s) => s.thread.isRunning);
 	const replayedRun = useReplayedRunState();
-	const cancelSessionId = replayedRun.sessionId;
+	const currentSessionId = useCurrentThreadSessionId({
+		includePending: true,
+		includeActive: true,
+	});
+	const cancelSessionId = replayedRun.sessionId ?? currentSessionId;
 	return (
 		<div className="aui-composer-action-wrapper relative flex items-center justify-between">
 			<div className="flex items-center gap-1">
@@ -880,21 +884,22 @@ const ComposerAction: FC = () => {
 				</ComposerPrimitive.Send>
 			) : null}
 			{runtimeRunning ? (
-				<ComposerPrimitive.Cancel asChild>
 				<Button
 					type="button"
 					variant="default"
 					size="icon"
 					className="aui-composer-cancel size-8 rounded-full"
 					aria-label="Stop generating"
+					disabled={!cancelSessionId}
 					onClick={() => {
 						if (!cancelSessionId) return;
-							void cancelLatestRun(cancelSessionId).catch(() => undefined);
+						void cancelLatestRun(cancelSessionId, replayedRun.runId).catch(
+							() => undefined,
+						);
 					}}
 				>
 					<SquareIcon className="aui-composer-cancel-icon size-3 fill-current" />
 				</Button>
-				</ComposerPrimitive.Cancel>
 			) : null}
 			{!runtimeRunning && replayedRun.active ? (
 				<ReplayedRunCancelButton
@@ -1897,7 +1902,14 @@ const ActivityChainSummary: FC<{
 			? Math.max(0, Math.round(value))
 			: null;
 	});
-	const [elapsedMs, setElapsedMs] = useState<number | null>(storedElapsedMs);
+	const initialStartedAtMs = metadataRunStartedAtMs ?? contentRunStartedAtMs;
+	const [elapsedMs, setElapsedMs] = useState<number | null>(() => {
+		if (storedElapsedMs !== null) return storedElapsedMs;
+		if (initialStartedAtMs !== null) {
+			return Math.max(0, Date.now() - initialStartedAtMs);
+		}
+		return null;
+	});
 	const label = useAuiState((s) => {
 		const message = s.message;
 		const status =