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

2026-05-26 19:26:33 +00:00 · 2026-04-19 23:03:08 +05:30
parent d19c4e4d15
commit 14765d7d18
12 changed files with 1296 additions and 834 deletions
@@ -0,0 +1,10 @@
+.next
+node_modules
+.env*
+*.log
+coverage
+.git
+.github
+.vscode
+.npmrc
+pnpm-lock.yaml
@@ -0,0 +1,2 @@
+@th30d4y:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
@@ -0,0 +1,31 @@
+# OpenLearnX
+
+OpenLearnX is an AI-powered learning platform with adaptive quizzes, coding practice, course tracking, and dashboard analytics.
+
+## Install
+
+```bash
+npm i openlearnx
+```
+
+## Project
+
+This package contains the OpenLearnX frontend (Next.js).
+
+## Quick Start (development)
+
+```bash
+npm install
+npm run dev
+```
+
+## Build
+
+```bash
+npm run build
+npm start
+```
+
+## Repository
+
+https://github.com/th30d4y/OpenLearnX
@@ -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>
  )
 }
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -1,7 +1,7 @@
 {
-  "name": "my-v0-project",
-  "version": "0.1.0",
-  "private": true,
+  "name": "openlearnx",
+  "version": "2.0.3",
+  "private": false,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
@@ -81,5 +81,24 @@
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
-  }
-}
+  },
+  "repository": "https://github.com/th30d4y/OpenLearnX.git",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "README.md",
+    "package.json",
+    "app",
+    "components",
+    "context",
+    "hooks",
+    "lib",
+    "public",
+    "styles",
+    "next.config.mjs",
+    "postcss.config.mjs",
+    "tailwind.config.ts",
+    "tsconfig.json"
+  ]
+}