huskies: merge 473_refactor_split_chat_tsx_into_smaller_components

2026-04-04 15:12:03 +00:00
parent d4979ae492
commit fa99f19198
9 changed files with 1679 additions and 1228 deletions
@@ -0,0 +1,144 @@
+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>
+	);
+}