Initial commit

Signed-off-by: Ilan Bigio <ilan@openai.com>

codex-cli/src/components/approval-mode-overlay.tsx

@@ -0,0 +1,47 @@
+import TypeaheadOverlay from "./typeahead-overlay.js";
+import { AutoApprovalMode } from "../utils/auto-approval-mode.js";
+import { Text } from "ink";
+import React from "react";
+
+type Props = {
+  currentMode: string;
+  onSelect: (mode: string) => void;
+  onExit: () => void;
+};
+
+/**
+ * Overlay to switch between the different automatic‑approval policies.
+ *
+ * The list of available modes is derived from the AutoApprovalMode enum so we
+ * stay in sync with the core agent behaviour.  It re‑uses the generic
+ * TypeaheadOverlay component for the actual UI/UX.
+ */
+export default function ApprovalModeOverlay({
+  currentMode,
+  onSelect,
+  onExit,
+}: Props): JSX.Element {
+  const items = React.useMemo(
+    () =>
+      Object.values(AutoApprovalMode).map((m) => ({
+        label: m,
+        value: m,
+      })),
+    [],
+  );
+
+  return (
+    <TypeaheadOverlay
+      title="Switch approval mode"
+      description={
+        <Text>
+          Current mode: <Text color="greenBright">{currentMode}</Text>
+        </Text>
+      }
+      initialItems={items}
+      currentValue={currentMode}
+      onSelect={onSelect}
+      onExit={onExit}
+    />
+  );
+}