fix(security): harden execution sandbox and add dedicated admin execution logs

frontend/app/admin/logs/page.tsx

@@ -23,6 +23,24 @@ type AdminLog = {
   origin?: string
 }
 
+type ExecutionLog = {
+  id: string
+  timestamp: string
+  source?: string
+  language: string
+  execution_id?: string
+  status: string
+  exit_code?: number
+  execution_time?: number
+  memory_used?: number
+  blocked?: boolean
+  error?: string
+  ip?: string
+  request_body?: unknown
+  response_body?: unknown
+  user_agent?: string
+}
+
 const API_BASE = "http://127.0.0.1:5000"
 
 export default function AdminLogsPage() {
@@ -31,8 +49,11 @@ export default function AdminLogsPage() {
   const [loading, setLoading] = useState(false)
   const [exporting, setExporting] = useState(false)
   const [message, setMessage] = useState("")
+  const [logView, setLogView] = useState<"security" | "execution">("security")
   const [logs, setLogs] = useState<AdminLog[]>([])
+  const [executionLogs, setExecutionLogs] = useState<ExecutionLog[]>([])
   const [selectedLog, setSelectedLog] = useState<AdminLog | null>(null)
+  const [selectedExecutionLog, setSelectedExecutionLog] = useState<ExecutionLog | null>(null)
 
   const safeJson = (value: unknown) => {
     if (value === null || value === undefined || value === "") return "No data"
@@ -89,6 +110,12 @@ export default function AdminLogsPage() {
     search: "",
   })
   const [pagination, setPagination] = useState({ page: 1, limit: 50, total: 0, pages: 1 })
+  const [executionFilters, setExecutionFilters] = useState({
+    language: "",
+    status: "",
+    search: "",
+  })
+  const [executionPagination, setExecutionPagination] = useState({ page: 1, limit: 50, total: 0, pages: 1 })
 
   const getToken = () => localStorage.getItem("admin_token")
   const headers = () => {
@@ -142,6 +169,34 @@ export default function AdminLogsPage() {
     }
   }
 
+  const fetchExecutionLogs = async (page = 1, nextFilters = executionFilters) => {
+    setLoading(true)
+    setMessage("")
+    const params = new URLSearchParams()
+    params.set("page", String(page))
+    params.set("limit", String(executionPagination.limit))
+    if (nextFilters.language) params.set("language", nextFilters.language)
+    if (nextFilters.status) params.set("status", nextFilters.status)
+    if (nextFilters.search) params.set("search", nextFilters.search)
+
+    try {
+      const resp = await fetch(`${API_BASE}/api/admin/logs/executions?${params.toString()}`, { headers: headers() })
+      if (resp.ok) {
+        const data = await resp.json()
+        setExecutionLogs(Array.isArray(data.logs) ? data.logs : [])
+        if (data.pagination) {
+          setExecutionPagination(data.pagination)
+        }
+      } else {
+        setExecutionLogs([])
+      }
+    } catch {
+      setExecutionLogs([])
+    } finally {
+      setLoading(false)
+    }
+  }
+
   const triggerDownload = (content: string, filename: string, mimeType: string) => {
     const blob = new Blob([content], { type: mimeType })
     const url = URL.createObjectURL(blob)
@@ -212,11 +267,37 @@ export default function AdminLogsPage() {
   return (
     <div className="space-y-6">
       <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
-        <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Security and Activity Logs</h1>
+        <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Admin Logs</h1>
         <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
-          Filter authentication, access-control, suspicious payload, and admin activity events.
+          Switch between security/activity logs and a separate execution log stream.
         </p>
         <div className="mt-4 flex flex-wrap gap-2">
+          <button
+            onClick={() => {
+              setLogView("security")
+              setSelectedLog(null)
+              setSelectedExecutionLog(null)
+              fetchLogs(1)
+            }}
+            className={`rounded-md px-3 py-2 text-sm font-medium ${logView === "security" ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-gray-100"}`}
+          >
+            Security and Activity
+          </button>
+          <button
+            onClick={() => {
+              setLogView("execution")
+              setSelectedLog(null)
+              setSelectedExecutionLog(null)
+              fetchExecutionLogs(1)
+            }}
+            className={`rounded-md px-3 py-2 text-sm font-medium ${logView === "execution" ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-gray-100"}`}
+          >
+            Execution Logs
+          </button>
+        </div>
+        <div className="mt-3 flex flex-wrap gap-2">
+          {logView === "security" ? (
+            <>
           <button
             onClick={() => exportLogs("json")}
             disabled={exporting}
@@ -231,11 +312,14 @@ export default function AdminLogsPage() {
           >
             Export Logs CSV
           </button>
+            </>
+          ) : null}
         </div>
         {message ? <p className="mt-2 text-sm text-gray-700 dark:text-gray-200">{message}</p> : null}
       </div>
 
       <div className="rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        {logView === "security" ? (
         <div className="grid grid-cols-1 gap-3 border-b border-gray-100 p-4 md:grid-cols-6 dark:border-gray-800">
           <input
             placeholder="Search action, path, IP"
@@ -293,8 +377,61 @@ export default function AdminLogsPage() {
             </button>
           </div>
         </div>
+        ) : (
+        <div className="grid grid-cols-1 gap-3 border-b border-gray-100 p-4 md:grid-cols-5 dark:border-gray-800">
+          <input
+            placeholder="Search execution id, source, IP"
+            value={executionFilters.search}
+            onChange={(e) => setExecutionFilters({ ...executionFilters, search: e.target.value })}
+            className="md:col-span-2 rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+          />
+          <select
+            value={executionFilters.language}
+            onChange={(e) => setExecutionFilters({ ...executionFilters, language: e.target.value })}
+            className="rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+          >
+            <option value="">All Languages</option>
+            <option value="python">Python</option>
+            <option value="javascript">JavaScript</option>
+            <option value="c">C</option>
+            <option value="cpp">C++</option>
+            <option value="java">Java</option>
+            <option value="go">Go</option>
+            <option value="rust">Rust</option>
+          </select>
+          <select
+            value={executionFilters.status}
+            onChange={(e) => setExecutionFilters({ ...executionFilters, status: e.target.value })}
+            className="rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+          >
+            <option value="">All Status</option>
+            <option value="success">Success</option>
+            <option value="failed">Failed</option>
+            <option value="blocked">Blocked</option>
+          </select>
+          <div className="flex gap-2">
+            <button
+              onClick={() => fetchExecutionLogs(1)}
+              className="w-full rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700"
+            >
+              Apply
+            </button>
+            <button
+              onClick={() => {
+                const reset = { language: "", status: "", search: "" }
+                setExecutionFilters(reset)
+                fetchExecutionLogs(1, reset)
+              }}
+              className="w-full rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+        )}
 
         <div className="overflow-x-auto">
+          {logView === "security" ? (
           <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
             <thead className="bg-gray-50 dark:bg-gray-800/50">
               <tr>
@@ -338,23 +475,76 @@ export default function AdminLogsPage() {
               )}
             </tbody>
           </table>
+          ) : (
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
+            <thead className="bg-gray-50 dark:bg-gray-800/50">
+              <tr>
+                <th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Time</th>
+                <th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Source</th>
+                <th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Language</th>
+                <th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Execution ID</th>
+                <th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Status</th>
+                <th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Time (s)</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+              {loading ? (
+                <tr>
+                  <td className="px-4 py-4 text-sm text-gray-600" colSpan={6}>Loading execution logs...</td>
+                </tr>
+              ) : executionLogs.length === 0 ? (
+                <tr>
+                  <td className="px-4 py-4 text-sm text-gray-500" colSpan={6}>No execution logs found for selected filters.</td>
+                </tr>
+              ) : (
+                executionLogs.map((log) => (
+                  <tr
+                    key={log.id}
+                    onClick={() => setSelectedExecutionLog(log)}
+                    className="cursor-pointer hover:bg-blue-50 dark:hover:bg-gray-800/60"
+                    title="Click to view execution request and response details"
+                  >
+                    <td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{new Date(log.timestamp).toLocaleString()}</td>
+                    <td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{log.source || "compiler"}</td>
+                    <td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{log.language}</td>
+                    <td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{log.execution_id || "-"}</td>
+                    <td className="px-4 py-3 text-xs">
+                      <span className={`rounded px-2 py-1 ${log.status === "success" ? "bg-green-100 text-green-700" : log.status === "blocked" ? "bg-amber-100 text-amber-700" : "bg-red-100 text-red-700"}`}>
+                        {log.status}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{typeof log.execution_time === "number" ? log.execution_time.toFixed(3) : "0.000"}</td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+          )}
         </div>
 
         <div className="flex items-center justify-between border-t border-gray-100 px-4 py-3 text-sm text-gray-600 dark:border-gray-800 dark:text-gray-300">
           <span>
-            Page {pagination.page} of {pagination.pages} • Total {pagination.total}
+            {logView === "security"
+              ? `Page ${pagination.page} of ${pagination.pages} • Total ${pagination.total}`
+              : `Page ${executionPagination.page} of ${executionPagination.pages} • Total ${executionPagination.total}`}
           </span>
           <div className="flex gap-2">
             <button
-              onClick={() => fetchLogs(Math.max(1, pagination.page - 1))}
-              disabled={pagination.page <= 1}
+              onClick={() => {
+                if (logView === "security") fetchLogs(Math.max(1, pagination.page - 1))
+                else fetchExecutionLogs(Math.max(1, executionPagination.page - 1))
+              }}
+              disabled={logView === "security" ? pagination.page <= 1 : executionPagination.page <= 1}
               className="rounded bg-gray-100 px-3 py-1.5 disabled:opacity-50 dark:bg-gray-800"
             >
               Previous
             </button>
             <button
-              onClick={() => fetchLogs(Math.min(pagination.pages, pagination.page + 1))}
-              disabled={pagination.page >= pagination.pages}
+              onClick={() => {
+                if (logView === "security") fetchLogs(Math.min(pagination.pages, pagination.page + 1))
+                else fetchExecutionLogs(Math.min(executionPagination.pages, executionPagination.page + 1))
+              }}
+              disabled={logView === "security" ? pagination.page >= pagination.pages : executionPagination.page >= executionPagination.pages}
               className="rounded bg-gray-100 px-3 py-1.5 disabled:opacity-50 dark:bg-gray-800"
             >
               Next
@@ -462,6 +652,82 @@ export default function AdminLogsPage() {
           </div>
         </div>
       ) : null}
+
+      {selectedExecutionLog ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="w-full max-w-4xl rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-800 dark:bg-gray-900">
+            <div className="flex items-center justify-between border-b border-gray-100 p-4 dark:border-gray-800">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Execution Request and Response Details</h2>
+              <button
+                onClick={() => setSelectedExecutionLog(null)}
+                className="rounded-md bg-gray-200 px-3 py-1.5 text-sm text-gray-900 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100"
+              >
+                Close
+              </button>
+            </div>
+
+            <div className="max-h-[75vh] space-y-4 overflow-auto p-4">
+              <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Source</p>
+                  <p className="mt-1 text-sm text-gray-900 dark:text-white">{selectedExecutionLog.source || "compiler"}</p>
+                </div>
+                <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Language</p>
+                  <p className="mt-1 text-sm text-gray-900 dark:text-white">{selectedExecutionLog.language}</p>
+                </div>
+                <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Execution ID</p>
+                  <p className="mt-1 break-all text-sm text-gray-900 dark:text-white">{selectedExecutionLog.execution_id || "-"}</p>
+                </div>
+                <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Status</p>
+                  <p className="mt-1 text-sm text-gray-900 dark:text-white">{selectedExecutionLog.status}</p>
+                </div>
+                <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Execution Time</p>
+                  <p className="mt-1 text-sm text-gray-900 dark:text-white">{typeof selectedExecutionLog.execution_time === "number" ? selectedExecutionLog.execution_time.toFixed(3) : "0.000"} s</p>
+                </div>
+                <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Client</p>
+                  <p className="mt-1 break-all text-sm text-gray-900 dark:text-white">{selectedExecutionLog.ip || "Unknown"}</p>
+                  <p className="mt-1 break-all text-xs text-gray-600 dark:text-gray-300">{selectedExecutionLog.user_agent || "Unknown user agent"}</p>
+                </div>
+              </div>
+
+              <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Request Body</p>
+                  <button
+                    onClick={() => copyText(safeJson(selectedExecutionLog.request_body ?? { note: "No request body captured for this execution log" }))}
+                    className="rounded bg-blue-600 px-2 py-1 text-xs text-white hover:bg-blue-700"
+                  >
+                    Copy
+                  </button>
+                </div>
+                <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-gray-50 p-3 text-sm leading-6 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
+{safeJson(selectedExecutionLog.request_body ?? { note: "No request body captured for this execution log" })}
+                </pre>
+              </div>
+
+              <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Response Body</p>
+                  <button
+                    onClick={() => copyText(safeJson(selectedExecutionLog.response_body ?? { note: "No response body captured for this execution log" }))}
+                    className="rounded bg-emerald-600 px-2 py-1 text-xs text-white hover:bg-emerald-700"
+                  >
+                    Copy
+                  </button>
+                </div>
+                <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-gray-50 p-3 text-sm leading-6 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
+{safeJson(selectedExecutionLog.response_body ?? { note: "No response body captured for this execution log" })}
+                </pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
     </div>
   )
 }