story-kit: merge 180_bug_web_ui_permissions_handling_unreliable

frontend/src/components/Chat.tsx

@@ -169,11 +169,13 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 	});
 	const [claudeSessionId, setClaudeSessionId] = useState<string | null>(null);
 	const [activityStatus, setActivityStatus] = useState<string | null>(null);
-	const [permissionRequest, setPermissionRequest] = useState<{
-		requestId: string;
-		toolName: string;
-		toolInput: Record<string, unknown>;
-	} | null>(null);
+	const [permissionQueue, setPermissionQueue] = useState<
+		{
+			requestId: string;
+			toolName: string;
+			toolInput: Record<string, unknown>;
+		}[]
+	>([]);
 	const [isNarrowScreen, setIsNarrowScreen] = useState(
 		window.innerWidth < NARROW_BREAKPOINT,
 	);
@@ -320,7 +322,10 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 				setPipeline(state);
 			},
 			onPermissionRequest: (requestId, toolName, toolInput) => {
-				setPermissionRequest({ requestId, toolName, toolInput });
+				setPermissionQueue((prev) => [
+					...prev,
+					{ requestId, toolName, toolInput },
+				]);
 			},
 			onActivity: (toolName) => {
 				setActivityStatus(formatToolActivity(toolName));
@@ -566,12 +571,10 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 	};
 
 	const handlePermissionResponse = (approved: boolean) => {
-		if (!permissionRequest) return;
-		wsRef.current?.sendPermissionResponse(
-			permissionRequest.requestId,
-			approved,
-		);
-		setPermissionRequest(null);
+		const current = permissionQueue[0];
+		if (!current) return;
+		wsRef.current?.sendPermissionResponse(current.requestId, approved);
+		setPermissionQueue((prev) => prev.slice(1));
 	};
 
 	const clearSession = async () => {
@@ -975,7 +978,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 					</div>
 				</div>
 			)}
-			{permissionRequest && (
+			{permissionQueue.length > 0 && (
 				<div
 					style={{
 						position: "fixed",
@@ -1002,6 +1005,17 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 					>
 						<h2 style={{ marginTop: 0, color: "#ececec" }}>
 							Permission Request
+							{permissionQueue.length > 1 && (
+								<span
+									style={{
+										fontSize: "0.6em",
+										color: "#888",
+										marginLeft: "8px",
+									}}
+								>
+									(+{permissionQueue.length - 1} queued)
+								</span>
+							)}
 						</h2>
 						<p
 							style={{
@@ -1012,11 +1026,11 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 						>
 							The agent wants to use the{" "}
 							<strong style={{ color: "#ececec" }}>
-								{permissionRequest.toolName}
+								{permissionQueue[0].toolName}
 							</strong>{" "}
 							tool. Do you approve?
 						</p>
-						{Object.keys(permissionRequest.toolInput).length > 0 && (
+						{Object.keys(permissionQueue[0].toolInput).length > 0 && (
 							<pre
 								style={{
 									background: "#1a1a1a",
@@ -1032,7 +1046,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 									wordBreak: "break-word",
 								}}
 							>
-								{JSON.stringify(permissionRequest.toolInput, null, 2)}
+								{JSON.stringify(permissionQueue[0].toolInput, null, 2)}
 							</pre>
 						)}
 						<div