diff

web/src/app/script-review/page.tsx

@@ -18,6 +18,9 @@ import {
 	Alert
 } from "@mui/material";
 import dynamic from "next/dynamic";
+import { DiffEditor } from "@monaco-editor/react";
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
 import Breadcrumbs from '@mui/material/Breadcrumbs';
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import Skeleton from '@mui/material/Skeleton';
@@ -69,6 +72,7 @@ export default function ScriptReviewPage() {
 	const [scriptInfos, setScriptInfos] = useState<ScriptInfo[]>([]);
 	const [selectedScript, setSelectedScript] = useState<ScriptInfo | null>(null);
 	const [page, setPage] = useState(1);
+	const [editorTab, setEditorTab] = useState<'edit' | 'diff'>('edit');
 
 	// Extracted fetch logic for reuse
 	const fetchPoliciesAndScripts = React.useCallback(async () => {
@@ -294,7 +298,7 @@ export default function ScriptReviewPage() {
 							<Alert severity="error">{error}</Alert>
 						) : (
 							<form onSubmit={handleSubmit}>
-								<FormControl component="fieldset" sx={{ mb: 2 }}>
+								<FormControl component="fieldset" sx={{ mb: 0 }}>
 									<FormLabel component="legend">Policy</FormLabel>
 									<RadioGroup row value={policy} onChange={handlePolicyChange}>
 										{POLICY_OPTIONS.map(opt => (
@@ -308,26 +312,56 @@ export default function ScriptReviewPage() {
 										))}
 									</RadioGroup>
 								</FormControl>
-								<Box sx={{ mb: 2 }} />
-								<Box sx={{ mb: 2 }}>
-									<MonacoEditor
-										height="60vh"
-										defaultLanguage="lua"
-										value={scriptSource}
-										onChange={v => handleSourceChange(v ?? "")}
-										options={{
-											fontFamily: "monospace",
-											fontSize: 14,
-											minimap: { enabled: false },
-											wordWrap: "off",
-											lineNumbers: "on",
-											readOnly: false,
-											scrollbar: { vertical: 'visible', horizontal: 'auto' },
-											automaticLayout: true
-										}}
-										
-										theme="vs-dark"
-									/>
+								<Box sx={{ mb: 1 }} />
+								<Box sx={{ mb: 1 }}>
+									{policy === 4 && scriptSource !== originalSource ? (
+		<Tabs
+			value={editorTab}
+			onChange={(_, v) => setEditorTab(v)}
+			indicatorColor="primary"
+			textColor="primary"
+			sx={{ mb: 1 }}
+		>
+			<Tab label="Editor" value="edit" />
+			<Tab label="Diff" value="diff" />
+		</Tabs>
+	) : null}
+	{(policy !== 4 || scriptSource === originalSource || editorTab === 'edit') && (
+		<MonacoEditor
+			height="60vh"
+			defaultLanguage="lua"
+			value={scriptSource}
+			onChange={v => handleSourceChange(v ?? "")}
+			options={{
+				fontFamily: "monospace",
+				fontSize: 14,
+				minimap: { enabled: false },
+				wordWrap: "off",
+				lineNumbers: "on",
+				readOnly: false,
+				scrollbar: { vertical: 'visible', horizontal: 'auto' },
+				automaticLayout: true
+			}}
+			theme="vs-dark"
+		/>
+	)}
+	{policy === 4 && scriptSource !== originalSource && editorTab === 'diff' && (
+		<Box sx={{ height: '60vh', minHeight: 150 }}>
+			<DiffEditor
+				height="100%"
+				original={originalSource}
+				modified={scriptSource}
+				language="lua"
+				theme="vs-dark"
+				options={{
+					readOnly: true,
+					renderSideBySide: true,
+					minimap: { enabled: false },
+					automaticLayout: true,
+				}}
+			/>
+		</Box>
+	)}
 								</Box>
 								<Button
 									type="submit"