huskies/frontend/src/components/PermissionDialog.tsx

interface PermissionRequest {
	requestId: string;
	toolName: string;
	toolInput: Record<string, unknown>;
}

interface PermissionDialogProps {
	permissionQueue: PermissionRequest[];
	onResponse: (approved: boolean, alwaysAllow?: boolean) => void;
}

export function PermissionDialog({
	permissionQueue,
	onResponse,
}: PermissionDialogProps) {
	const current = permissionQueue[0];
	if (!current) return null;

	return (
		<div
			style={{
				position: "fixed",
				top: 0,
				left: 0,
				right: 0,
				bottom: 0,
				backgroundColor: "rgba(0, 0, 0, 0.7)",
				display: "flex",
				alignItems: "center",
				justifyContent: "center",
				zIndex: 1000,
			}}
		>
			<div
				style={{
					backgroundColor: "#2f2f2f",
					padding: "32px",
					borderRadius: "12px",
					maxWidth: "520px",
					width: "90%",
					border: "1px solid #444",
				}}
			>
				<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={{
						color: "#aaa",
						fontSize: "0.9em",
						marginBottom: "12px",
					}}
				>
					The agent wants to use the{" "}
					<strong style={{ color: "#ececec" }}>{current.toolName}</strong> tool.
					Do you approve?
				</p>
				{Object.keys(current.toolInput).length > 0 && (
					<pre
						style={{
							background: "#1a1a1a",
							border: "1px solid #333",
							borderRadius: "6px",
							padding: "12px",
							fontSize: "0.8em",
							color: "#ccc",
							overflowX: "auto",
							maxHeight: "200px",
							marginBottom: "20px",
							whiteSpace: "pre-wrap",
							wordBreak: "break-word",
						}}
					>
						{JSON.stringify(current.toolInput, null, 2)}
					</pre>
				)}
				<div
					style={{
						display: "flex",
						gap: "12px",
						justifyContent: "flex-end",
					}}
				>
					<button
						type="button"
						onClick={() => onResponse(false)}
						style={{
							padding: "10px 20px",
							borderRadius: "8px",
							border: "1px solid #555",
							backgroundColor: "transparent",
							color: "#aaa",
							cursor: "pointer",
							fontSize: "0.9em",
						}}
					>
						Deny
					</button>
					<button
						type="button"
						onClick={() => onResponse(true)}
						style={{
							padding: "10px 20px",
							borderRadius: "8px",
							border: "none",
							backgroundColor: "#ececec",
							color: "#000",
							cursor: "pointer",
							fontSize: "0.9em",
						}}
					>
						Approve
					</button>
					<button
						type="button"
						onClick={() => onResponse(true, true)}
						style={{
							padding: "10px 20px",
							borderRadius: "8px",
							border: "none",
							backgroundColor: "#4caf50",
							color: "#fff",
							cursor: "pointer",
							fontSize: "0.9em",
						}}
					>
						Always Allow
					</button>
				</div>
			</div>
		</div>
	);
}