diff --git a/externals/styles/fonts.tsx b/externals/styles/fonts.tsx
index a50408e..4cd056f 100644
--- a/externals/styles/fonts.tsx
+++ b/externals/styles/fonts.tsx
@@ -1,80 +1,102 @@
-import { Fira_Sans, Fira_Mono, Lato, Roboto } from 'next/font/google'
+// import { Fira_Sans, Fira_Mono, Lato, Roboto } from 'next/font/google'
 
-export const roboto = Roboto({
-  subsets: ['latin'],
-  weight: ['400', '700'],
-  style: ['normal', 'italic'],
-  fallback: [
-    '-apple-system',
-    'BlinkMacSystemFont',
-    'Segoe UI',
-    'Roboto',
-    'Helvetica Neue',
-    'Arial',
-    'sans-serif',
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-  ],
-  variable: '--font-roboto',
-  preload: false,
-})
+// export const roboto = Roboto({
+//   subsets: ['latin'],
+//   weight: ['400', '700'],
+//   style: ['normal', 'italic'],
+//   fallback: [
+//     '-apple-system',
+//     'BlinkMacSystemFont',
+//     'Segoe UI',
+//     'Roboto',
+//     'Helvetica Neue',
+//     'Arial',
+//     'sans-serif',
+//     'Apple Color Emoji',
+//     'Segoe UI Emoji',
+//     'Segoe UI Symbol',
+//   ],
+//   variable: '--font-roboto',
+//   preload: false,
+// })
 
-export const firaSans = Fira_Sans({
-  subsets: ['latin'],
-  weight: ['300', '400', '500', '600', '700'],
-  style: ['normal', 'italic'],
-  fallback: [
-    '-apple-system',
-    'BlinkMacSystemFont',
-    'Segoe UI',
-    'Roboto',
-    'Helvetica Neue',
-    'Arial',
-    'sans-serif',
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-  ],
-  variable: '--font-fira-sans',
-  preload: false,
-})
+// export const firaSans = Fira_Sans({
+//   subsets: ['latin'],
+//   weight: ['300', '400', '500', '600', '700'],
+//   style: ['normal', 'italic'],
+//   fallback: [
+//     '-apple-system',
+//     'BlinkMacSystemFont',
+//     'Segoe UI',
+//     'Roboto',
+//     'Helvetica Neue',
+//     'Arial',
+//     'sans-serif',
+//     'Apple Color Emoji',
+//     'Segoe UI Emoji',
+//     'Segoe UI Symbol',
+//   ],
+//   variable: '--font-fira-sans',
+//   preload: false,
+// })
 
-export const firaMono = Fira_Mono({
-  subsets: ['latin'],
-  weight: ['400'],
-  fallback: [
-    '-apple-system',
-    'BlinkMacSystemFont',
-    'Segoe UI',
-    'Roboto',
-    'Helvetica Neue',
-    'Arial',
-    'sans-serif',
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-  ],
-  variable: '--font-fira-mono',
-  preload: false,
-})
+// export const firaMono = Fira_Mono({
+//   subsets: ['latin'],
+//   weight: ['400'],
+//   fallback: [
+//     '-apple-system',
+//     'BlinkMacSystemFont',
+//     'Segoe UI',
+//     'Roboto',
+//     'Helvetica Neue',
+//     'Arial',
+//     'sans-serif',
+//     'Apple Color Emoji',
+//     'Segoe UI Emoji',
+//     'Segoe UI Symbol',
+//   ],
+//   variable: '--font-fira-mono',
+//   preload: false,
+// })
 
-export const lato = Lato({
-  subsets: ['latin'],
-  weight: ['400'],
-  style: ['normal', 'italic'],
-  fallback: [
-    '-apple-system',
-    'BlinkMacSystemFont',
-    'Segoe UI',
-    'Roboto',
-    'Helvetica Neue',
-    'Arial',
-    'sans-serif',
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-  ],
-  variable: '--font-lato',
-  preload: false,
-})
+// export const lato = Lato({
+//   subsets: ['latin'],
+//   weight: ['400'],
+//   style: ['normal', 'italic'],
+//   fallback: [
+//     '-apple-system',
+//     'BlinkMacSystemFont',
+//     'Segoe UI',
+//     'Roboto',
+//     'Helvetica Neue',
+//     'Arial',
+//     'sans-serif',
+//     'Apple Color Emoji',
+//     'Segoe UI Emoji',
+//     'Segoe UI Symbol',
+//   ],
+//   variable: '--font-lato',
+//   preload: false,
+// })
+
+// please see the sandbox issue #2 for this
+
+export const firaSans = {
+  className: 'font-fira-sans',
+  style: { fontFamily: 'Fira Sans, sans-serif' },
+}
+
+export const firaMono = {
+  className: 'font-fira-mono',
+  style: { fontFamily: 'Fira Mono, monospace' },
+}
+
+export const lato = {
+  className: 'font-lato',
+  style: { fontFamily: 'Lato, sans-serif' },
+}
+
+export const roboto = {
+  className: 'font-roboto',
+  style: { fontFamily: 'Roboto, sans-serif' },
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index b7a8bf5..d8364ec 100644
--- a/package.json
+++ b/package.json
@@ -17,10 +17,16 @@
     "dev": "run-p build:watch preview"
   },
   "dependencies": {
+    "@codemirror/basic-setup": "^0.20.0",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.12",
     "@date-io/date-fns": "^2.13.2",
     "@emotion/react": "^11.4.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.3.0",
+    "@lezer/highlight": "^1.2.3",
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.15.20",
     "@mui/lab": "^5.0.0-alpha.100",
@@ -35,6 +41,7 @@
     "@nivo/core": "^0.88.0",
     "@nivo/line": "^0.88.0",
     "@nivo/pie": "^0.88.0",
+    "codemirror": "^6.0.2",
     "axios": "^1.7.2",
     "date-fns": "^2.28.0",
     "firebase": "^11.0.1",
@@ -49,8 +56,8 @@
     "notistack": "^2.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.31.2",
+    "react-dropzone": "^14.2.3",
     "react-image-crop": "^11.0.10",
     "react-katex": "^3.0.1",
     "react-query": "^3.39.0",
diff --git a/src/sandbox-component.tsx b/src/sandbox-component.tsx
index ab01af5..4ecbdf3 100644
--- a/src/sandbox-component.tsx
+++ b/src/sandbox-component.tsx
@@ -1,4 +1,6 @@
 import { ThemeProvider } from '@styles/minimal/theme-provider'
+
+import { PseudocodeResponseAreaTub } from './types/Pseudocode'
 import { SandboxResponseAreaTub } from './types/Sandbox/index'
 
 function ResponseAreaInputWrapper({ children }: { children: React.ReactNode }) {
@@ -6,7 +8,7 @@ function ResponseAreaInputWrapper({ children }: { children: React.ReactNode }) {
 }
 
 // wrap the components with the necessary providers; only in the sandbox
-class WrappedSandboxResponseAreaTub extends SandboxResponseAreaTub {
+class WrappedSandboxResponseAreaTub extends PseudocodeResponseAreaTub {
   constructor() {
     super()
 
diff --git a/src/types/Essay/EssayWizard.component.tsx b/src/types/Essay/EssayWizard.component.tsx
index 02cd163..c536711 100644
--- a/src/types/Essay/EssayWizard.component.tsx
+++ b/src/types/Essay/EssayWizard.component.tsx
@@ -37,7 +37,6 @@ export const EssayWizard: React.FC<EssayWizardProps> = props => {
     onChange,
   } = props
   const { classes, cx } = useStyles()
-  console.log('answer', answer)
 
   const updateAnswer = (newAnswer: string) => {
     onChange({
diff --git a/src/types/Pseudocode/Pseudocode.component.tsx b/src/types/Pseudocode/Pseudocode.component.tsx
new file mode 100644
index 0000000..bd7c2c8
--- /dev/null
+++ b/src/types/Pseudocode/Pseudocode.component.tsx
@@ -0,0 +1,136 @@
+import { foldGutter, foldService, syntaxHighlighting } from '@codemirror/language';
+import { EditorState } from '@codemirror/state';
+import { placeholder } from '@codemirror/view';
+import { EditorView, basicSetup } from 'codemirror';
+import { useEffect, useRef, useState } from 'react';
+
+import { BaseResponseAreaProps } from '../base-props.type';
+
+import { PseudocodeFeedbackPanel } from './components/PseudocodeFeedbackPanel';
+import { autoIndentAfterColon } from './plugins/autoIndent';
+import { pseudocodeFoldFunc } from './plugins/fold';
+import { pseudocodeHighlightStyle } from './plugins/highlight';
+import { pseudocodeLanguage } from './plugins/language';
+import { pseudocodeTheme } from './plugins/pseudocode.theme';
+import { StudentResponse } from './types/input';
+// import { defaultStudentResponse } from './utils/consts';
+import { EvaluationResult } from './types/output';
+import { usePseudocodeStyles } from './utils/styles';
+
+type PseudocodeInputProps = Omit<BaseResponseAreaProps, 'handleChange' | 'answer' | 'feedback'> & {
+  handleChange: (val: StudentResponse) => void;
+  feedback: EvaluationResult | null;
+  answer: StudentResponse
+};
+
+export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({
+  handleChange,
+  feedback,
+  answer
+}) => {
+  console.log(answer)
+  const { classes } = usePseudocodeStyles();
+
+  // Internal state fully managed in this component
+  const [internalAnswer, setInternalAnswer] = useState<StudentResponse>(answer);
+
+  const editorRef = useRef<HTMLDivElement | null>(null);
+  const viewRef = useRef<EditorView | null>(null);
+
+  // Initialize CodeMirror once
+  useEffect(() => {
+    if (!editorRef.current) return;
+
+    const state = EditorState.create({
+      doc: internalAnswer.pseudocode,
+      extensions: [
+        foldGutter(),
+        foldService.of(pseudocodeFoldFunc),
+        autoIndentAfterColon,
+        basicSetup,
+        pseudocodeLanguage,
+        syntaxHighlighting(pseudocodeHighlightStyle),
+        pseudocodeTheme,
+        placeholder('Write your pseudocode here...'),
+        EditorView.updateListener.of((update) => {
+          if (!update.docChanged) return;
+          const newCode = update.state.doc.toString();
+          setInternalAnswer((prev) => {
+            const updated = { ...prev, pseudocode: newCode };
+            handleChange(updated); // notify parent immediately
+            return updated;
+          });
+        }),
+        EditorView.theme({
+          '&': { height: '100%' },
+          '.cm-scroller': { overflow: 'auto' },
+        }),
+      ],
+    });
+
+    const view = new EditorView({
+      state,
+      parent: editorRef.current,
+    });
+
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, []); // only runs once
+
+  // Report change for complexity/explanation fields
+  const handleFieldChange = (field: keyof StudentResponse, value: string) => {
+    setInternalAnswer((prev) => {
+      const updated = { ...prev, [field]: value };
+      handleChange(updated); // immediate update to parent
+      return updated;
+    });
+  };
+
+  return (
+    <div className={classes.root}>
+      {/* ================= Editor ================= */}
+      <div className={classes.editorWrapper}>
+        <div ref={editorRef} className={classes.editor} />
+      </div>
+
+      {/* ================= Complexity Inputs ================= */}
+      <div className={classes.complexityRow}>
+        <input
+          className={classes.field}
+          value={internalAnswer.time_complexity ?? ''}
+          placeholder="Time Complexity (e.g. O(n log n))"
+          onChange={(e) => handleFieldChange('time_complexity', e.target.value)}
+        />
+        <input
+          className={classes.field}
+          value={internalAnswer.space_complexity ?? ''}
+          placeholder="Space Complexity (e.g. O(n))"
+          onChange={(e) => handleFieldChange('space_complexity', e.target.value)}
+        />
+      </div>
+
+      {/* ================= Explanation ================= */}
+      <textarea
+        className={classes.textarea}
+        value={internalAnswer.explanation ?? ''}
+        placeholder="Explain your reasoning (optional)"
+        onChange={(e) => handleFieldChange('explanation', e.target.value)}
+      />
+
+      {/* ================= Action =================
+      <button onClick={callAPI}>
+        Check Answer
+      </button> */}
+
+      {/* ================= Feedback ================= */}
+      {feedback && (
+        <div className={classes.feedbackPanel}>
+          <PseudocodeFeedbackPanel result={feedback} />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/types/Pseudocode/PseudocodeWizard.component.tsx b/src/types/Pseudocode/PseudocodeWizard.component.tsx
new file mode 100644
index 0000000..2670af7
--- /dev/null
+++ b/src/types/Pseudocode/PseudocodeWizard.component.tsx
@@ -0,0 +1,337 @@
+import { useState } from "react";
+
+import { EvaluationParamsPanel } from "./components/EvaluationParamsPanel";
+import { ExpectedAnswer } from "./types/input";
+import { defaultEvaluationParams } from "./utils/consts";
+import { usePseudocodeStyles } from "./utils/styles";
+
+type WizardConfigProps = {
+  answer: ExpectedAnswer;
+  handleChange: (val: ExpectedAnswer) => void;
+};
+
+type FlatRuntimeValue = string | number | boolean | null;
+type FlatRecord = Record<string, FlatRuntimeValue>;
+
+export const PseudocodeWizard: React.FC<WizardConfigProps> = ({
+  answer,
+  handleChange,
+}) => {
+  const { classes } = usePseudocodeStyles();
+  const [open, setOpen] = useState(true);
+
+  const normalizedAnswer: ExpectedAnswer = {
+    expected_time_complexity: answer?.expected_time_complexity ?? "",
+    expected_space_complexity: answer?.expected_space_complexity ?? "",
+    test_cases: answer?.test_cases ?? [],
+    eval_options: answer?.eval_options ?? defaultEvaluationParams,
+  };
+
+  const update = <K extends keyof ExpectedAnswer>(key: K, val: ExpectedAnswer[K]) =>
+    handleChange({ ...normalizedAnswer, [key]: val });
+
+  const parsePrimitive = (value: string): FlatRuntimeValue => {
+    if (value === "true") return true;
+    if (value === "false") return false;
+    if (value === "null") return null;
+    if (!isNaN(Number(value)) && value.trim() !== "") return Number(value);
+    return value;
+  };
+
+  const updateTestCase = (
+    index: number,
+    updatedCase: ExpectedAnswer["test_cases"][number]
+  ) => {
+    const updated = [...normalizedAnswer.test_cases];
+    updated[index] = updatedCase;
+    update("test_cases", updated);
+  };
+
+  const addTestCase = () =>
+    update("test_cases", [
+      ...normalizedAnswer.test_cases,
+      { initial_variables: {}, expected_variables: {}, expected_output: [] },
+    ]);
+
+  const removeTestCase = (index: number) =>
+    update(
+      "test_cases",
+      normalizedAnswer.test_cases.filter((_, i) => i !== index)
+    );
+
+  /* =====================================================
+   * Smooth Variable Editor
+   * ===================================================== */
+  const renderVariableEditor = (
+    label: string,
+    record: FlatRecord,
+    onChange: (newRecord: FlatRecord) => void
+  ) => {
+    const entries = Object.entries(record);
+
+    return (
+      <div style={{ marginBottom: 12 }}>
+        <strong>{label}</strong>
+
+        {entries.map(([key, value], i) => (
+          <div
+            key={i}
+            style={{
+              display: "flex",
+              gap: 8,
+              marginTop: 6,
+              alignItems: "center",
+              flexWrap: "wrap",
+            }}
+          >
+            <input
+              className={classes.field}
+              placeholder="Variable name"
+              value={key}
+              onChange={(e) => {
+                const newKey = e.target.value;
+                const updated: FlatRecord = {};
+                entries.forEach(([k, v], idx) => {
+                  if (idx === i && newKey) updated[newKey] = v;
+                  else if (k) updated[k] = v;
+                });
+                onChange(updated);
+              }}
+              style={{
+                flex: "1 1 140px",
+                minWidth: 80,
+                transition: "all 0.15s",
+                padding: "8px 10px",
+              }}
+            />
+
+            <input
+              className={classes.field}
+              placeholder="Value"
+              value={String(value)}
+              onChange={(e) => {
+                const updated = { ...record };
+                updated[key] = parsePrimitive(e.target.value);
+                onChange(updated);
+              }}
+              style={{ flex: "1 1 140px", minWidth: 80, padding: "8px 10px" }}
+            />
+
+            <button
+              type="button"
+              style={{
+                background: "#ff7043",
+                color: "#fff",
+                borderRadius: 6,
+                border: "none",
+                padding: "5px 10px",
+                cursor: "pointer",
+              }}
+              onClick={() => {
+                const updated = { ...record };
+                delete updated[key];
+                onChange(updated);
+              }}
+            >
+              ✕
+            </button>
+          </div>
+        ))}
+
+        <div style={{ marginTop: 8 }}>
+          <button
+            type="button"
+            style={{
+              background: "#42a5f5",
+              color: "#fff",
+              borderRadius: 6,
+              border: "none",
+              padding: "6px 12px",
+              cursor: "pointer",
+            }}
+            onClick={() => onChange({ ...record, new_variable: "" })}
+          >
+            + Add Variable
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  /* =====================================================
+   * Render Wizard
+   * ===================================================== */
+  return (
+    <div className={classes.evalParams}>
+      <button
+        className={classes.evalParamsToggle}
+        onClick={() => setOpen((o) => !o)}
+      >
+        Evaluation Configuration
+      </button>
+
+      <div className={classes.evalParamsContent}>
+        {/* Expected Complexity */}
+        <fieldset className={classes.evalParamsSection}>
+          <legend>Expected Complexity</legend>
+
+          <p>Expected Time Complexity</p>
+          <input
+            className={classes.field}
+            placeholder="O(n), O(n log n), etc."
+            value={normalizedAnswer.expected_time_complexity}
+            onChange={(e) => update("expected_time_complexity", e.target.value)}
+          />
+
+          <p>Expected Space Complexity</p>
+          <input
+            className={classes.field}
+            placeholder="O(1), O(n), etc."
+            value={normalizedAnswer.expected_space_complexity}
+            onChange={(e) => update("expected_space_complexity", e.target.value)}
+          />
+        </fieldset>
+
+        {/* Execution Test Cases */}
+        <fieldset className={classes.evalParamsSection}>
+          <legend>Execution Test Cases</legend>
+
+          {normalizedAnswer.test_cases.map((test, index) => (
+            <div
+              key={index}
+              style={{
+                border: "1px solid #ddd",
+                padding: 16,
+                marginBottom: 16,
+                borderRadius: 8,
+                background: "#f5f5f5",
+                boxShadow: "0 2px 6px rgba(0,0,0,0.05)",
+              }}
+            >
+              <h4 style={{ color: "#42a5f5", marginBottom: 12 }}>
+                Test Case #{index + 1}
+              </h4>
+
+              {renderVariableEditor(
+                "Initial Variables",
+                test.initial_variables as FlatRecord,
+                (val) => updateTestCase(index, { ...test, initial_variables: val })
+              )}
+
+              {renderVariableEditor(
+                "Expected Final Variables",
+                test.expected_variables as FlatRecord,
+                (val) => updateTestCase(index, { ...test, expected_variables: val })
+              )}
+
+              {/* Expected Output */}
+              <div style={{ marginBottom: 12 }}>
+                <strong>Expected Printed Output</strong>
+                {test.expected_output.map((line, i) => (
+                  <div
+                    key={i}
+                    style={{
+                      display: "flex",
+                      gap: 8,
+                      marginTop: 6,
+                      flexWrap: "wrap",
+                    }}
+                  >
+                    <input
+                      className={classes.field}
+                      value={line}
+                      onChange={(e) => {
+                        const updated = [...test.expected_output];
+                        updated[i] = e.target.value;
+                        updateTestCase(index, { ...test, expected_output: updated });
+                      }}
+                      style={{ flex: "1 1 200px", minWidth: 80, padding: "8px 10px" }}
+                    />
+                    <button
+                      type="button"
+                      style={{
+                        background: "#ff7043",
+                        color: "#fff",
+                        borderRadius: 6,
+                        border: "none",
+                        padding: "5px 10px",
+                        cursor: "pointer",
+                      }}
+                      onClick={() =>
+                        updateTestCase(index, {
+                          ...test,
+                          expected_output: test.expected_output.filter((_, j) => j !== i),
+                        })
+                      }
+                    >
+                      ✕
+                    </button>
+                  </div>
+                ))}
+                <div style={{ marginTop: 8 }}>
+                  <button
+                    type="button"
+                    style={{
+                      background: "#42a5f5",
+                      color: "#fff",
+                      borderRadius: 6,
+                      border: "none",
+                      padding: "6px 12px",
+                      cursor: "pointer",
+                    }}
+                    onClick={() =>
+                      updateTestCase(index, {
+                        ...test,
+                        expected_output: [...test.expected_output, ""],
+                      })
+                    }
+                  >
+                    + Add Output Line
+                  </button>
+                </div>
+              </div>
+
+              <button
+                type="button"
+                style={{
+                  background: "#ff7043",
+                  color: "#fff",
+                  borderRadius: 6,
+                  border: "none",
+                  padding: "6px 12px",
+                  cursor: "pointer",
+                }}
+                onClick={() => removeTestCase(index)}
+              >
+                Remove Test Case
+              </button>
+            </div>
+          ))}
+
+          <button
+            type="button"
+            style={{
+              background: "#42a5f5",
+              color: "#fff",
+              borderRadius: 6,
+              border: "none",
+              padding: "6px 12px",
+              cursor: "pointer",
+            }}
+            onClick={addTestCase}
+          >
+            + Add Test Case
+          </button>
+        </fieldset>
+
+        {/* Evaluation Options Panel */}
+        <EvaluationParamsPanel
+          collapsed={open}
+          setCollapsed={setOpen}
+          value={normalizedAnswer.eval_options}
+          onChange={(p) => update("eval_options", p)}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/types/Pseudocode/components/EvaluationParamsPanel.tsx b/src/types/Pseudocode/components/EvaluationParamsPanel.tsx
new file mode 100644
index 0000000..60f6112
--- /dev/null
+++ b/src/types/Pseudocode/components/EvaluationParamsPanel.tsx
@@ -0,0 +1,129 @@
+import { makeStyles } from "@styles";
+import React from "react";
+
+import { EvaluationParams } from "../types/input";
+
+/* =====================================================
+ * Styles
+ * ===================================================== */
+const useStyles = makeStyles()((theme) => ({
+  panel: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: 8,
+    backgroundColor: "#fff",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+    width: "100%",
+    overflow: "hidden",
+    transition: "all 0.25s ease",
+    marginBottom: 16,
+  },
+  toggle: {
+    width: "100%",
+    padding: "10px 16px",
+    fontWeight: 600,
+    fontSize: 14,
+    cursor: "pointer",
+    textAlign: "left",
+    background: "none",
+    border: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    color: theme.palette.primary.main,
+    "&:hover": { backgroundColor: "#f0f8ff" },
+  },
+  toggleIcon: {
+    fontSize: 12,
+    marginRight: 6,
+    transition: "transform 0.25s",
+  },
+  content: {
+    padding: "12px 16px",
+    display: "flex",
+    flexDirection: "column",
+    gap: 12,
+    transition: "max-height 0.3s ease, opacity 0.3s ease",
+    maxHeight: 500,
+    overflow: "hidden",
+  },
+  collapsed: { maxHeight: 0, opacity: 0, padding: 0, overflow: "hidden" },
+  checkbox: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    cursor: "pointer",
+    fontSize: 13,
+    color: "#333",
+    "& input": { accentColor: theme.palette.primary.main },
+  },
+}));
+
+/* =====================================================
+ * Component
+ * ===================================================== */
+interface EvaluationParamsPanelProps {
+  value: EvaluationParams;
+  onChange: (next: EvaluationParams) => void;
+  collapsed: boolean;
+  setCollapsed: (v: boolean) => void;
+}
+
+export const EvaluationParamsPanel: React.FC<EvaluationParamsPanelProps> = ({
+  value,
+  onChange,
+  collapsed,
+  setCollapsed,
+}) => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.panel}>
+      <button className={classes.toggle} onClick={() => setCollapsed(!collapsed)}>
+        <span>
+          <span
+            className={classes.toggleIcon}
+            style={{ transform: collapsed ? "rotate(0deg)" : "rotate(90deg)" }}
+          >
+            ▶
+          </span>
+          Evaluation Options
+        </span>
+      </button>
+
+      <div className={`${classes.content} ${collapsed ? classes.collapsed : ""}`}>
+        <label className={classes.checkbox}>
+          <input
+            type="checkbox"
+            checked={value.require_time_complexity}
+            onChange={(e) =>
+              onChange({ ...value, require_time_complexity: e.target.checked })
+            }
+          />
+          Require Time Complexity
+        </label>
+
+        <label className={classes.checkbox}>
+          <input
+            type="checkbox"
+            checked={value.require_space_complexity}
+            onChange={(e) =>
+              onChange({ ...value, require_space_complexity: e.target.checked })
+            }
+          />
+          Require Space Complexity
+        </label>
+
+        <label className={classes.checkbox}>
+          <input
+            type="checkbox"
+            checked={value.show_detailed_feedback ?? true}
+            onChange={(e) =>
+              onChange({ ...value, show_detailed_feedback: e.target.checked })
+            }
+          />
+          Show Detailed Feedback
+        </label>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/types/Pseudocode/components/PseudocodeFeedbackPanel.tsx b/src/types/Pseudocode/components/PseudocodeFeedbackPanel.tsx
new file mode 100644
index 0000000..6f0a7ea
--- /dev/null
+++ b/src/types/Pseudocode/components/PseudocodeFeedbackPanel.tsx
@@ -0,0 +1,287 @@
+import { makeStyles } from '@styles';
+import React, { useState } from 'react';
+
+import { EvaluationResult } from '../types/output';
+
+/* -------------------- Styles -------------------- */
+const useStyles = makeStyles()((theme) => ({
+  root: {
+    width: '100%',
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: '#fdfdfd',
+    border: `1px solid ${theme.palette.divider}`,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
+    fontFamily: 'Arial, sans-serif',
+    maxHeight: 420,
+    overflowY: 'auto',
+  },
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    fontWeight: 700,
+    fontSize: 16,
+  },
+  headerRight: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+  },
+  toggleButton: {
+    border: 'none',
+    background: '#eee',
+    borderRadius: 4,
+    padding: '4px 8px',
+    cursor: 'pointer',
+    fontSize: 12,
+  },
+  statusCorrect: { color: '#2e7d32' },
+  statusIncorrect: { color: '#c62828' },
+  feedback: {
+    fontSize: 14,
+    color: '#333',
+    whiteSpace: 'pre-wrap',
+    lineHeight: 1.5,
+  },
+  section: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    padding: 12,
+    borderRadius: 6,
+    backgroundColor: '#fafafa',
+    border: `1px solid ${theme.palette.divider}`,
+  },
+  sectionTitle: { fontWeight: 600, fontSize: 14, marginBottom: 4 },
+  feedbackItem: {
+    fontSize: 13,
+    padding: '6px 8px',
+    borderRadius: 4,
+    backgroundColor: '#fff',
+    border: `1px solid ${theme.palette.divider}`,
+  },
+  warning: { color: '#b26a00' },
+  error: { color: '#c62828' },
+  success: { color: '#2e7d32' },
+  gridRow: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: 12,
+  },
+  block: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: 6,
+    padding: 12,
+    backgroundColor: '#fff',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+  },
+  blockTitle: { fontWeight: 600, fontSize: 13 },
+  varTable: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+  varRow: { display: 'flex', justifyContent: 'space-between', gap: 8 },
+  valueMismatch: { color: '#c62828', fontWeight: 600 },
+  valueMatch: { color: '#2e7d32' },
+  printedOutput: {
+    fontFamily: 'monospace',
+    backgroundColor: '#f4f4f4',
+    padding: 6,
+    borderRadius: 4,
+    whiteSpace: 'pre-wrap',
+    fontSize: 13,
+  },
+  passed: { color: '#2e7d32', fontWeight: 600 },
+  failed: { color: '#c62828', fontWeight: 600 },
+  mono: { fontFamily: 'monospace', whiteSpace: 'pre-wrap' },
+}));
+
+/* -------------------- Component -------------------- */
+type Props = { result: EvaluationResult };
+
+export const PseudocodeFeedbackPanel: React.FC<Props> = ({ result }) => {
+  const { classes } = useStyles();
+  const [collapsed, setCollapsed] = useState(false);
+
+  if (!result) return null;
+
+  const {
+    is_correct,
+    overall_message,
+    time_complexity,
+    space_complexity,
+    detailed_sections,
+    test_cases,
+  } = result;
+
+  return (
+    <div className={classes.root}>
+      {/* Header */}
+      <div className={classes.header}>
+        <span className={is_correct ? classes.statusCorrect : classes.statusIncorrect}>
+          {is_correct ? '✓ Correct' : '✗ Incorrect'}
+        </span>
+
+        <div className={classes.headerRight}>
+          <span>{overall_message}</span>
+
+          <button
+            className={classes.toggleButton}
+            onClick={() => setCollapsed(!collapsed)}
+          >
+            {collapsed ? 'Expand' : 'Collapse'}
+          </button>
+        </div>
+      </div>
+
+      {!collapsed && (
+        <>
+          {/* Time Complexity */}
+          {time_complexity && (
+            <div className={classes.section}>
+              <div className={classes.sectionTitle}>Time Complexity</div>
+              <div>Student: {time_complexity.student_answer ?? '—'}</div>
+              <div>Expected: {time_complexity.expected_answer}</div>
+              {time_complexity.detected_complexity && (
+                <div>Detected: {time_complexity.detected_complexity}</div>
+              )}
+              {time_complexity.feedback && (
+                <div className={classes.feedback}>{time_complexity.feedback}</div>
+              )}
+            </div>
+          )}
+
+          {/* Space Complexity */}
+          {space_complexity && (
+            <div className={classes.section}>
+              <div className={classes.sectionTitle}>Space Complexity</div>
+              <div>Student: {space_complexity.student_answer ?? '—'}</div>
+              <div>Expected: {space_complexity.expected_answer}</div>
+              {space_complexity.detected_complexity && (
+                <div>Detected: {space_complexity.detected_complexity}</div>
+              )}
+              {space_complexity.feedback && (
+                <div className={classes.feedback}>{space_complexity.feedback}</div>
+              )}
+            </div>
+          )}
+
+          {/* Detailed Sections */}
+          {detailed_sections.length > 0 && (
+            <div className={classes.section}>
+              <div className={classes.sectionTitle}>Detailed Feedback Sections</div>
+              {detailed_sections.map((section, idx) => (
+                <div key={idx} className={classes.feedback}>
+                  <strong>{section.title}</strong>
+                  <div>{section.content}</div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Test Cases */}
+          {test_cases.length > 0 && (
+            <div className={classes.section}>
+              <div className={classes.sectionTitle}>Test Cases</div>
+
+              {test_cases.map((test, idx) => (
+                <div key={idx} className={classes.block}>
+                  <div className={test.passed ? classes.passed : classes.failed}>
+                    {test.passed ? '✓ PASSED' : '✗ FAILED'}
+                  </div>
+
+                  {/* Input */}
+                  <div>
+                    <div className={classes.blockTitle}>Input</div>
+                    {renderVariables(classes, test.input_data)}
+                  </div>
+
+                  {/* Expected vs Actual */}
+                  <div className={classes.gridRow}>
+                    <div>
+                      <div className={classes.blockTitle}>Expected</div>
+                      {renderVariables(classes, test.expected_output.variables)}
+
+                      {test.expected_output.output.length > 0 && (
+                        <>
+                          <div className={classes.blockTitle}>Printed Output</div>
+                          <div className={classes.printedOutput}>
+                            {test.expected_output.output.join('\n')}
+                          </div>
+                        </>
+                      )}
+                    </div>
+
+                    <div>
+                      <div className={classes.blockTitle}>Actual</div>
+                      {renderVariables(
+                        classes,
+                        test.actual_output.variables,
+                        test.expected_output.variables
+                      )}
+
+                      {test.actual_output.output.length > 0 && (
+                        <>
+                          <div className={classes.blockTitle}>Printed Output</div>
+                          <div className={classes.printedOutput}>
+                            {test.actual_output.output.join('\n')}
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  </div>
+
+                  {test.error_message && (
+                    <div className={classes.failed}>
+                      Error: {test.error_message}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+/* -------------------- Helper -------------------- */
+const renderVariables = (
+  classes: ReturnType<typeof useStyles>['classes'],
+  vars: Record<string, unknown>,
+  compareWith?: Record<string, unknown>
+) => (
+  <div className={classes.varTable}>
+    {Object.entries(vars).map(([key, value]) => {
+      const isMismatch =
+        compareWith &&
+        JSON.stringify(compareWith[key]) !== JSON.stringify(value);
+
+      return (
+        <div key={key} className={classes.varRow}>
+          <span>{key}</span>
+          <span
+            className={
+              compareWith
+                ? isMismatch
+                  ? classes.valueMismatch
+                  : classes.valueMatch
+                : undefined
+            }
+          >
+            {JSON.stringify(value)}
+          </span>
+        </div>
+      );
+    })}
+  </div>
+);
diff --git a/src/types/Pseudocode/index.tsx b/src/types/Pseudocode/index.tsx
new file mode 100644
index 0000000..25e8212
--- /dev/null
+++ b/src/types/Pseudocode/index.tsx
@@ -0,0 +1,148 @@
+import { useState } from 'react'
+import z from 'zod'
+
+import {
+  BaseResponseAreaProps,
+  BaseResponseAreaWizardProps,
+} from '../base-props.type'
+import { ResponseAreaTub } from '../response-area-tub'
+
+import { PseudocodeInput } from './Pseudocode.component'
+import { PseudocodeWizard } from './PseudocodeWizard.component'
+import {
+  StudentResponse,
+  StudentResponseSchema,
+  ExpectedAnswer,
+  ExpectedAnswerSchema,
+} from './types/input'
+import { EvaluationResult } from './types/output'
+import {
+  defaultExpectedAnswer,
+  defaultStudentResponse,
+} from './utils/consts'
+
+export class PseudocodeResponseAreaTub extends ResponseAreaTub {
+  public readonly responseType = 'PSEUDOCODE'
+  public readonly displayWideInput = true
+
+  /* -------------------- Schemas -------------------- */
+
+  // Wizard forces answer to be a string, so we parse before validating
+  protected answerSchema = z.preprocess(
+    (val) => {
+      if (typeof val === 'string') {
+        try {
+          return JSON.parse(val)
+        } catch {
+          return val
+        }
+      }
+      return val
+    },
+    ExpectedAnswerSchema
+  )
+
+  protected answer: ExpectedAnswer = defaultExpectedAnswer
+
+  /* -------------------- Internal State -------------------- */
+
+  private previewFeedback: EvaluationResult | null = null
+
+  public readonly delegateFeedback = false
+  public readonly delegateLivePreview = true
+
+  /* -------------------- Init -------------------- */
+
+  initWithConfig = (config: any) => {
+    let raw = config?.answer
+
+    if (typeof raw === 'string') {
+      try {
+        raw = JSON.parse(raw)
+      } catch {
+        raw = null
+      }
+    }
+
+    const parsed = ExpectedAnswerSchema.safeParse(raw)
+
+    this.answer = parsed.success
+      ? parsed.data
+      : defaultExpectedAnswer
+  }
+
+  /* -------------------- Custom Check -------------------- */
+
+  customCheck = () => {
+    if (this.previewFeedback) {
+      throw new Error('preview failed')
+    }
+
+    this.previewFeedback = null
+  }
+
+  /* =====================================================
+   * Student Input
+   * ===================================================== */
+
+  public InputComponent = (
+    props: BaseResponseAreaProps,
+  ): JSX.Element => {
+
+    const parsed = StudentResponseSchema.safeParse(props.answer)
+
+    const validAnswer = parsed.success
+      ? parsed.data
+      : defaultStudentResponse
+
+    const submittedFeedback: EvaluationResult | null =
+      props.feedback &&
+      'feedback' in props.feedback &&
+      props.feedback.feedback
+        ? JSON.parse(
+            (props.feedback.feedback as string).split('<br />')[1] ?? '{}'
+          )
+        : null
+
+    const effectiveFeedback =
+      this.previewFeedback ?? submittedFeedback
+
+    return (
+      <PseudocodeInput
+        {...props}
+        answer={validAnswer}
+        feedback={effectiveFeedback}
+        handleChange={(val: StudentResponse) => {
+          props.handleChange(JSON.stringify(val))
+        }}
+      />
+    )
+  }
+
+  /* =====================================================
+   * Wizard / Teacher Input
+   * ===================================================== */
+
+  public WizardComponent = (
+    props: BaseResponseAreaWizardProps,
+  ): JSX.Element => {
+
+    const [localAnswer, setLocalAnswer] = useState(this.answer)
+
+    return (
+      <PseudocodeWizard
+        answer={localAnswer}
+        handleChange={(val) => {
+          setLocalAnswer(val)
+          this.answer = val
+
+          props.handleChange({
+            responseType: this.responseType,
+            // Wizard only supports string answers
+            answer: JSON.stringify(val),
+          })
+        }}
+      />
+    )
+  }
+}
diff --git a/src/types/Pseudocode/plugins/autoIndent.ts b/src/types/Pseudocode/plugins/autoIndent.ts
new file mode 100644
index 0000000..7bbf698
--- /dev/null
+++ b/src/types/Pseudocode/plugins/autoIndent.ts
@@ -0,0 +1,40 @@
+import { keymap } from "@codemirror/view";
+
+export const autoIndentAfterColon = keymap.of([
+  {
+    key: 'Enter',
+    run(view) {
+      const { state } = view;
+      const { from } = state.selection.main;
+      const line = state.doc.lineAt(from);
+
+      // Text before cursor on the current line
+      const beforeCursor = line.text.slice(0, from - line.from);
+
+      // Only trigger if line ends with :
+      if (!beforeCursor.trimEnd().endsWith('DO')) {
+        return false; // let default Enter behavior happen
+      }
+
+      // Get current indentation
+      const indentMatch = beforeCursor.match(/^\s*/);
+      const baseIndent = indentMatch ? indentMatch[0] : '';
+
+      // Python-style indent (4 spaces)
+      const newIndent = baseIndent + '    ';
+
+      view.dispatch({
+        changes: {
+          from,
+          to: from,
+          insert: '\n' + newIndent,
+        },
+        selection: {
+          anchor: from + 1 + newIndent.length,
+        },
+      });
+
+      return true;
+    },
+  },
+]);
diff --git a/src/types/Pseudocode/plugins/fold.ts b/src/types/Pseudocode/plugins/fold.ts
new file mode 100644
index 0000000..bde6494
--- /dev/null
+++ b/src/types/Pseudocode/plugins/fold.ts
@@ -0,0 +1,30 @@
+import { EditorState } from "@codemirror/state";
+
+export function pseudocodeFoldFunc(
+  state: EditorState,
+  lineStart: number,
+  lineEnd: number
+): { from: number; to: number } | null {
+  const doc = state.doc;
+  const lineText = doc.sliceString(lineStart, lineEnd).trim();
+
+  // Detect start of block
+  if (/^(FUNCTION|PROCEDURE|FOR|WHILE|REPEAT|IF|BEGIN)/i.test(lineText)) {
+    let start = lineEnd;
+    let end = start;
+
+    // Search for matching END/ENDIF/NEXT/UNTIL
+    for (let pos = start; pos < doc.length; pos++) {
+      const line = doc.lineAt(pos);
+      const text = line.text.trim();
+      if (/^(END|ENDIF|NEXT|UNTIL)/i.test(text)) {
+        end = line.to;
+        break;
+      }
+    }
+
+    if (end > start) return { from: start, to: end };
+  }
+
+  return null;
+}
diff --git a/src/types/Pseudocode/plugins/highlight.ts b/src/types/Pseudocode/plugins/highlight.ts
new file mode 100644
index 0000000..3d2ca4a
--- /dev/null
+++ b/src/types/Pseudocode/plugins/highlight.ts
@@ -0,0 +1,32 @@
+import { HighlightStyle } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+
+export const pseudocodeHighlightStyle = HighlightStyle.define([
+  {
+    tag: t.keyword,
+    color: '#6f42c1',
+    fontWeight: '600',
+  },
+  {
+    tag: t.bool,
+    color: '#d73a49',
+    fontWeight: '500',
+  },
+  {
+    tag: t.number,
+    color: '#005cc5',
+  },
+  {
+    tag: t.string,
+    color: '#22863a',
+  },
+  {
+    tag: t.lineComment,
+    color: '#6a737d',
+    fontStyle: 'italic',
+  },
+  {
+    tag: t.operator,
+    color: '#e36209',
+  },
+]);
diff --git a/src/types/Pseudocode/plugins/language.ts b/src/types/Pseudocode/plugins/language.ts
new file mode 100644
index 0000000..f24b6ce
--- /dev/null
+++ b/src/types/Pseudocode/plugins/language.ts
@@ -0,0 +1,54 @@
+import { StreamLanguage } from "@codemirror/language";
+import { z } from "zod";
+
+// Define a tiny schema for pseudocode identifiers
+const IdentifierSchema = z.string().regex(/^[A-Za-z_][A-Za-z0-9_]*$/, "Invalid identifier");
+
+export const pseudocodeLanguage = StreamLanguage.define({
+  token(stream) {
+    // Keywords (case-insensitive)
+    if (stream.match(/^(IF|THEN|ELSE|ELSEIF|ENDIF|WHILE|FOR|TO|STEP|NEXT|REPEAT|UNTIL|FUNCTION|PROCEDURE|BEGIN|END|RETURN|PRINT|INPUT)\b/i)) {
+      return "keyword";
+    }
+
+    // Boolean literals
+    if (stream.match(/^(TRUE|FALSE|NULL)\b/i)) {
+      return "bool";
+    }
+
+    // Numbers
+    if (stream.match(/^-?\d+(\.\d+)?/)) {
+      return "number";
+    }
+
+    // Strings
+    if (stream.match(/(["'])(?:\\.|(?!\1).)*?\1/)) {
+      return "string";
+    }
+
+    // Comments
+    if (stream.match(/^\/\/.*/)) {
+      return "comment";
+    }
+
+    // Operators
+    if (stream.match(/[\+\-\*\/=%<>!]+/)) {
+      return "operator";
+    }
+
+    // Identifiers: allow capitalized
+    const identifierMatch = stream.match(/^[A-Za-z_][A-Za-z0-9_]*/);
+
+    if (identifierMatch && Array.isArray(identifierMatch)) {
+      const valid = IdentifierSchema.safeParse(identifierMatch[0]);
+      if (!valid.success) {
+        return "invalid"; // Highlight invalid identifier
+      }
+      return "variable"; // normal identifier
+    }
+
+
+    stream.next();
+    return null;
+  },
+});
diff --git a/src/types/Pseudocode/plugins/pseudocode.theme.ts b/src/types/Pseudocode/plugins/pseudocode.theme.ts
new file mode 100644
index 0000000..cc47746
--- /dev/null
+++ b/src/types/Pseudocode/plugins/pseudocode.theme.ts
@@ -0,0 +1,48 @@
+import { EditorView } from '@codemirror/view';
+
+export const pseudocodeTheme = EditorView.theme(
+  {
+    '&': {
+      backgroundColor: '#fafafa',
+      color: '#24292f',
+      fontSize: '14px',
+    },
+
+    '.cm-content': {
+      fontFamily: '"Fira Code", "JetBrains Mono", monospace',
+      lineHeight: '1.6',
+      padding: '12px 8px',
+      caretColor: '#6f42c1',
+    },
+
+    '.cm-line': {
+      padding: '0 4px',
+    },
+
+    '.cm-cursor': {
+      borderLeftColor: '#6f42c1',
+      borderLeftWidth: '2px',
+    },
+
+    '.cm-activeLine': {
+      backgroundColor: 'rgba(110, 118, 129, 0.08)',
+      borderRadius: '4px',
+    },
+
+    '.cm-selectionBackground': {
+      backgroundColor: 'rgba(111, 66, 193, 0.25)',
+    },
+
+    '.cm-gutters': {
+      backgroundColor: '#f3f4f6',
+      color: '#6e7781',
+      borderRight: '1px solid #e5e7eb',
+    },
+
+    '.cm-activeLineGutter': {
+      backgroundColor: 'rgba(111, 66, 193, 0.15)',
+      fontWeight: '600',
+    },
+  },
+  { dark: false }
+);
diff --git a/src/types/Pseudocode/types/input.ts b/src/types/Pseudocode/types/input.ts
new file mode 100644
index 0000000..2c378f9
--- /dev/null
+++ b/src/types/Pseudocode/types/input.ts
@@ -0,0 +1,91 @@
+import { z } from 'zod';
+
+import { ExecutionTestCaseSchema } from './tests';
+
+/* ============================================================
+ * EvaluationParams
+ * ============================================================
+ */
+
+export const EvaluationParamsSchema = z.object({
+  require_time_complexity: z
+    .boolean()
+    .default(true)
+    .describe('Whether time complexity answer is required'),
+
+  require_space_complexity: z
+    .boolean()
+    .default(true)
+    .describe('Whether space complexity answer is required'),
+
+  // Feedback options
+  show_detailed_feedback: z
+    .boolean()
+    .default(true)
+    .describe('Provide detailed analysis feedback')
+});
+
+export type EvaluationParams = z.infer<typeof EvaluationParamsSchema>;
+
+/* ============================================================
+ * StudentResponse
+ * ============================================================
+ */
+
+export const StudentResponseSchema = z.object({
+  pseudocode: z
+    .string()
+    .min(1, 'Pseudocode cannot be empty')
+    .refine((v) => v.trim().length > 0, {
+      message: 'Pseudocode cannot be empty',
+    })
+    .describe('The pseudocode submitted by the student'),
+
+  time_complexity: z
+    .string()
+    .optional()
+    .nullable()
+    .describe("Student's answer for time complexity, e.g., 'O(n^2)'"),
+
+  space_complexity: z
+    .string()
+    .optional()
+    .nullable()
+    .describe("Student's answer for space complexity, e.g., 'O(1)'"),
+
+  explanation: z
+    .string()
+    .optional()
+    .nullable()
+    .describe("Student's explanation of their complexity analysis"),
+});
+
+export type StudentResponse = z.infer<typeof StudentResponseSchema>;
+
+/* ============================================================
+ * ExpectedAnswer
+ * ============================================================
+ */
+
+export const ExpectedAnswerSchema = z.object({
+  expected_time_complexity: z
+    .string()
+    .default('O(1)')
+    .describe('Expected time complexity in Big-O notation'),
+
+  expected_space_complexity: z
+    .string()
+    .default('O(1)')
+    .describe('Expected space complexity in Big-O notation'),
+
+  test_cases: z
+    .array(ExecutionTestCaseSchema)
+    .default([])
+    .describe('Execution test cases for correctness checking'),
+
+  eval_options: EvaluationParamsSchema
+    .optional()
+    .default({}),
+});
+
+export type ExpectedAnswer = z.infer<typeof ExpectedAnswerSchema>;
\ No newline at end of file
diff --git a/src/types/Pseudocode/types/output.ts b/src/types/Pseudocode/types/output.ts
new file mode 100644
index 0000000..a182709
--- /dev/null
+++ b/src/types/Pseudocode/types/output.ts
@@ -0,0 +1,381 @@
+import { z } from 'zod';
+
+import { TestCaseResultSchema } from './tests';
+
+/* ============================================================
+ * Shared / External Types
+ * ============================================================
+ * These come from backend modules.
+ * On the frontend, we treat them as opaque objects.
+ */
+
+export const ComplexityClassSchema = z.enum([
+  'O(1)',
+  'O(log n)',
+  'O(n)',
+  'O(n log n)',
+  'O(n²)',
+  'O(n³)',
+  'O(2ⁿ)',
+  'O(n!)',
+]);
+
+export type ComplexityClass = z.infer<typeof ComplexityClassSchema>;
+
+
+export const ProgramNodeSchema = z.object({
+  node_type: z.literal('program'),
+
+  functions: z
+    .array(
+      z.object({
+        name: z.string(),
+        node_type: z.literal('function'),
+      })
+    )
+    .default([]),
+
+  global_statements: z
+    .object({
+      node_type: z.literal('block'),
+    })
+    .optional(),
+});
+
+export type ProgramNode = z.infer<typeof ProgramNodeSchema>
+
+export const TimeComplexitySchema = z.object({
+  overall: ComplexityClassSchema,
+
+  expression: z
+    .string()
+    .describe('Human-readable time complexity expression'),
+
+  explanation: z
+    .string()
+    .optional()
+    .describe('Explanation of how this complexity was derived'),
+
+  dominant_term: z
+    .string()
+    .optional()
+    .describe('Dominant term used in Big-O reduction'),
+
+  confidence: z
+    .number()
+    .min(0)
+    .max(1)
+    .optional(),
+});
+
+export type TimeComplexity = z.infer<typeof TimeComplexitySchema>
+
+export const SpaceComplexitySchema = z.object({
+  overall: ComplexityClassSchema,
+
+  expression: z
+    .string()
+    .describe('Human-readable space complexity expression'),
+
+  explanation: z
+    .string()
+    .optional()
+    .describe('Explanation of how this complexity was derived'),
+
+  auxiliary_space: z
+    .string()
+    .optional()
+    .describe('Auxiliary space usage if applicable'),
+
+  confidence: z
+    .number()
+    .min(0)
+    .max(1)
+    .optional(),
+});
+
+export type SpaceComplexity = z.infer<typeof SpaceComplexitySchema>
+
+/* ============================================================
+ * FeedbackLevel
+ * ============================================================
+ */
+
+export const FeedbackLevelSchema = z.enum([
+  'info',
+  'success',
+  'warning',
+  'error',
+  'hint',
+]);
+
+export type FeedbackLevel = z.infer<typeof FeedbackLevelSchema>;
+
+/* ============================================================
+ * FeedbackItem
+ * ============================================================
+ */
+
+export const FeedbackItemSchema = z.object({
+  level: FeedbackLevelSchema
+    .default('info')
+    .describe('Severity level of the feedback'),
+
+  message: z
+    .string()
+    .describe('The feedback message'),
+
+  category: z
+    .string()
+    .optional()
+    .describe('Category: time_complexity, space_complexity, syntax, etc.'),
+
+  location: z
+    .string()
+    .optional()
+    .describe('Location in code this feedback refers to'),
+
+  suggestion: z
+    .string()
+    .optional()
+    .describe('Suggested improvement or correction'),
+});
+
+export type FeedbackItem = z.infer<typeof FeedbackItemSchema>;
+
+/* ============================================================
+ * ConstructAnalysis
+ * ============================================================
+ */
+
+export const ConstructAnalysisSchema = z.object({
+  construct_type: z
+    .string()
+    .describe('Type of construct: loop, nested_loop, recursion, etc.'),
+
+  description: z
+    .string()
+    .default('')
+    .describe('Human-readable description of the construct'),
+
+  location: z
+    .string()
+    .optional()
+    .describe('Location in the pseudocode'),
+
+  complexity_contribution: ComplexityClassSchema
+    .default('O(1)')
+    .describe('Complexity contribution of this construct'),
+
+  details: z
+    .record(z.any())
+    .default({})
+    .describe('Additional details about the construct'),
+});
+
+export type ConstructAnalysis = z.infer<typeof ConstructAnalysisSchema>;
+
+/* ============================================================
+ * TimeComplexityResult
+ * ============================================================
+ */
+
+export const TimeComplexityResultSchema = z.object({
+  is_correct: z
+    .boolean()
+    .describe("Whether the student's answer is correct"),
+
+  student_answer: z
+    .string()
+    .optional()
+    .describe("The student's stated time complexity"),
+
+  expected_answer: z
+    .string()
+    .describe('The expected time complexity'),
+
+  detected_complexity: z
+    .string()
+    .optional()
+    .describe('Complexity detected from pseudocode analysis'),
+
+  student_normalized: ComplexityClassSchema
+    .optional()
+    .describe("Student's answer normalized to ComplexityClass"),
+
+  expected_normalized: ComplexityClassSchema
+    .describe('Expected answer normalized to ComplexityClass'),
+
+  analysis: TimeComplexitySchema
+    .optional()
+    .describe('Detailed time complexity analysis'),
+
+  feedback: z
+    .string()
+    .default('')
+    .describe('Explanation of the result'),
+});
+
+export type TimeComplexityResult = z.infer<typeof TimeComplexityResultSchema>;
+
+/* ============================================================
+ * SpaceComplexityResult
+ * ============================================================
+ */
+
+export const SpaceComplexityResultSchema = z.object({
+  is_correct: z
+    .boolean()
+    .describe("Whether the student's answer is correct"),
+
+  student_answer: z
+    .string()
+    .optional()
+    .describe("The student's stated space complexity"),
+
+  expected_answer: z
+    .string()
+    .describe('The expected space complexity'),
+
+  detected_complexity: z
+    .string()
+    .optional()
+    .describe('Complexity detected from pseudocode analysis'),
+
+  student_normalized: ComplexityClassSchema
+    .optional()
+    .describe("Student's answer normalized to ComplexityClass"),
+
+  expected_normalized: ComplexityClassSchema
+    .describe('Expected answer normalized to ComplexityClass'),
+
+  analysis: SpaceComplexitySchema
+    .optional()
+    .describe('Detailed space complexity analysis'),
+
+  feedback: z
+    .string()
+    .default('')
+    .describe('Explanation of the result'),
+});
+
+export type SpaceComplexityResult = z.infer<typeof SpaceComplexityResultSchema>;
+
+/* ============================================================
+ * ParseResult
+ * ============================================================
+ */
+
+export const ParseResultSchema = z.object({
+  success: z
+    .boolean()
+    .describe('Whether parsing was successful'),
+
+  ast: ProgramNodeSchema
+    .optional()
+    .describe('The parsed AST (if successful)'),
+
+  errors: z
+    .array(z.string())
+    .default([])
+    .describe('Parse errors encountered'),
+
+  warnings: z
+    .array(z.string())
+    .default([])
+    .describe('Parse warnings'),
+
+  normalized_code: z
+    .string()
+    .optional()
+    .describe('Preprocessed/normalized pseudocode'),
+});
+
+export type ParseResult = z.infer<typeof ParseResultSchema>;
+
+/* ============================================================
+ * ComplexityAnalysis
+ * ============================================================
+ */
+
+export const ComplexityAnalysisSchema = z.object({
+  time_complexity: TimeComplexitySchema
+    .describe('Time complexity analysis'),
+
+  space_complexity: SpaceComplexitySchema
+    .describe('Space complexity analysis'),
+
+  constructs: z
+    .array(ConstructAnalysisSchema)
+    .default([])
+    .describe('List of detected code constructs'),
+
+  algorithm_type: z
+    .string()
+    .optional()
+    .describe('Detected algorithm type'),
+
+  confidence: z
+    .number()
+    .min(0)
+    .max(1)
+    .default(1.0)
+    .describe('Confidence in the analysis'),
+
+  parse_result: ParseResultSchema
+    .optional()
+    .describe('Parsing result details'),
+});
+
+export type ComplexityAnalysis = z.infer<typeof ComplexityAnalysisSchema>;
+
+/* ============================================================
+ * CodeCorrectnessResult
+ * ============================================================
+ */
+
+export const CodeCorrectnessResultSchema = z.object({
+  parse_success: z.boolean(),
+
+  parse_errors: z
+    .array(z.string())
+    .default([]),
+
+  parse_warnings: z
+    .array(z.string())
+    .default([]),
+
+  normalized_code: z
+    .string()
+    .optional(),
+
+  execution_results: z
+    .array(TestCaseResultSchema)
+    .default([]),
+
+  is_correct: z.boolean(),
+
+  feedback: z.string(),
+});
+
+export type CodeCorrectnessResult = z.infer<typeof CodeCorrectnessResultSchema>;
+
+
+export const SectionFeedbackSchema = z.object({
+  importance: z.string(),
+  title: z.string(),
+  content: z.string(),
+});
+
+export type SectionFeedback = z.infer<typeof SectionFeedbackSchema>;
+
+export const EvaluationResultSchema = z.object({
+  is_correct: z.boolean(),
+  overall_message: z.string(),
+  time_complexity: TimeComplexityResultSchema.optional(),
+  space_complexity: SpaceComplexityResultSchema.optional(),
+  test_cases: z.array(TestCaseResultSchema).default([]),
+  detailed_sections: z.array(SectionFeedbackSchema).default([]),
+});
+
+export type EvaluationResult = z.infer<typeof EvaluationResultSchema>;
diff --git a/src/types/Pseudocode/types/tests.ts b/src/types/Pseudocode/types/tests.ts
new file mode 100644
index 0000000..31ef82c
--- /dev/null
+++ b/src/types/Pseudocode/types/tests.ts
@@ -0,0 +1,77 @@
+
+
+/* ============================================================
+ * ExecutionTestCase
+ * ============================================================
+ */
+
+import { z } from "zod";
+
+import { RuntimeValueSchema } from "./utils";
+
+export const ExecutionTestCaseSchema = z.object({
+  initial_variables: z
+    .record(RuntimeValueSchema)
+    .default({})
+    .describe('Initial variable state before execution'),
+
+  expected_variables: z
+    .record(RuntimeValueSchema)
+    .default({})
+    .describe('Expected variable state after execution'),
+
+  expected_output: z
+    .array(z.string())
+    .default([])
+    .describe('Expected printed output'),
+});
+
+export type ExecutionTestCase = z.infer<typeof ExecutionTestCaseSchema>;
+
+/* ============================================================
+ * InterpreterResult
+ * ============================================================
+ */
+
+export const InterpreterResultSchema = z.object({
+  variables: z
+    .record(RuntimeValueSchema)
+    .default({})
+    .describe('Final variable state'),
+
+  output: z
+    .array(z.string())
+    .default([])
+    .describe('Printed output during execution'),
+});
+
+export type InterpreterResult = z.infer<typeof InterpreterResultSchema>;
+
+/* ============================================================
+ * TestCaseResult
+ * ============================================================
+ */
+
+export const TestCaseResultSchema = z.object({
+  input_data: z
+    .record(RuntimeValueSchema)
+    .default({})
+    .describe('Input data used for the test'),
+
+  expected_output: InterpreterResultSchema,
+
+  actual_output: InterpreterResultSchema,
+
+  passed: z
+    .boolean()
+    .describe('Whether this test case passed'),
+
+  error_message: z
+    .string()
+    .optional()
+    .nullable()
+    .describe('Error message if execution failed'),
+});
+
+export type TestCaseResult = z.infer<typeof TestCaseResultSchema>;
+
diff --git a/src/types/Pseudocode/types/utils.ts b/src/types/Pseudocode/types/utils.ts
new file mode 100644
index 0000000..7846779
--- /dev/null
+++ b/src/types/Pseudocode/types/utils.ts
@@ -0,0 +1,37 @@
+/* ============================================================
+ * RuntimeValue (non-recursive, single-layer JSON-safe type)
+ * ============================================================
+ */
+
+import { z } from "zod";
+
+/**
+ * Allowed values:
+ * - primitive
+ * - array of primitives
+ * - single-layer object of primitive values
+ */
+
+export type Primitive = number | string | boolean | null;
+
+export type RuntimeValue =
+  | Primitive
+  | Primitive[]
+  | Record<string, Primitive>;
+
+export const RuntimeValueSchema = z.union([
+  z.number(),
+  z.string(),
+  z.boolean(),
+  z.null(),
+
+  // Array of primitives only
+  z.array(
+    z.union([z.number(), z.string(), z.boolean(), z.null()])
+  ),
+
+  // Single-layer object of primitives only
+  z.record(
+    z.union([z.number(), z.string(), z.boolean(), z.null()])
+  ),
+]);
diff --git a/src/types/Pseudocode/utils/consts.ts b/src/types/Pseudocode/utils/consts.ts
new file mode 100644
index 0000000..b492273
--- /dev/null
+++ b/src/types/Pseudocode/utils/consts.ts
@@ -0,0 +1,22 @@
+import { ExpectedAnswer, StudentResponse } from "../types/input";
+
+/* -------------------- Default StudentResponse -------------------- */
+export const defaultStudentResponse: StudentResponse = {
+  pseudocode: '',
+  time_complexity: undefined,
+  space_complexity: undefined,
+  explanation: undefined,
+};
+
+export const defaultExpectedAnswer: ExpectedAnswer = {
+  expected_time_complexity: 'O(1)',
+  expected_space_complexity: 'O(1)',
+  eval_options: {
+    require_time_complexity: true,
+    require_space_complexity: true,
+    show_detailed_feedback: true,
+  },
+  test_cases: [],
+};
+
+export const defaultEvaluationParams = defaultExpectedAnswer.eval_options;
\ No newline at end of file
diff --git a/src/types/Pseudocode/utils/styles.ts b/src/types/Pseudocode/utils/styles.ts
new file mode 100644
index 0000000..6817c57
--- /dev/null
+++ b/src/types/Pseudocode/utils/styles.ts
@@ -0,0 +1,242 @@
+import { makeStyles } from '@styles'
+
+export const usePseudocodeStyles = makeStyles()((theme) => ({
+  /* =====================================================
+   * Base layout
+   * ===================================================== */
+
+  root: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+  },
+
+  /* =====================================================
+   * Editor
+   * ===================================================== */
+
+  editor: {
+    width: '100%',
+    minHeight: 200,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: 6,
+    overflow: 'hidden',
+    backgroundColor: '#fff',
+
+    '& .cm-editor': { outline: 'none' },
+    '& .cm-content': {
+      fontFamily: '"Fira Code", "Courier New", monospace',
+      fontSize: 14,
+      lineHeight: 1.6,
+      padding: '10px 0',
+    },
+    '& .cm-gutters': {
+      backgroundColor: '#f7f7f7',
+      borderRight: `1px solid ${theme.palette.divider}`,
+    },
+  },
+
+  field: {
+    padding: '6px 8px',
+    borderRadius: 4,
+    border: `1px solid ${theme.palette.divider}`,
+    fontSize: 14,
+    width: '100%',
+  },
+
+  textarea: {
+    padding: '6px 8px',
+    borderRadius: 4,
+    border: `1px solid ${theme.palette.divider}`,
+    fontSize: 14,
+    width: '100%',
+    minHeight: 80,
+    resize: 'vertical',
+  },
+
+  /* =====================================================
+   * Evaluation params panel
+   * ===================================================== */
+
+  evalParams: {
+    border: '1px solid var(--border-muted)',
+    borderRadius: 6,
+    marginBottom: 8,
+    background: 'var(--bg-subtle)',
+  },
+
+  evalParamsToggle: {
+    width: '100%',
+    textAlign: 'left',
+    padding: '6px 10px',
+    fontWeight: 600,
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+  },
+
+  evalParamsContent: {
+    maxHeight: 320,
+    overflow: 'auto',
+    padding: '8px 10px',
+  },
+
+  evalParamsSection: {
+    border: 'none',
+    marginBottom: 8,
+
+    '& legend': {
+      fontSize: 12,
+      opacity: 0.7,
+      marginBottom: 4,
+    },
+  },
+
+  evalParamsRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    fontSize: 13,
+    marginBottom: 4,
+  },
+
+  /* =====================================================
+   * Feedback panel
+   * ===================================================== */
+
+  feedbackRoot: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: 6,
+    background: '#fff',
+    padding: theme.spacing(1),
+    fontSize: 13,
+  },
+
+  feedbackHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: theme.spacing(0.5),
+  },
+
+  feedbackStatusCorrect: {
+    color: theme.palette.success.main,
+    fontWeight: 600,
+  },
+
+  feedbackStatusIncorrect: {
+    color: theme.palette.error.main,
+    fontWeight: 600,
+  },
+
+  feedbackScore: {
+    fontSize: 12,
+    opacity: 0.8,
+  },
+
+  feedbackSection: {
+    marginTop: theme.spacing(1),
+    paddingTop: theme.spacing(0.5),
+    borderTop: `1px solid ${theme.palette.divider}`,
+  },
+
+  feedbackSectionTitle: {
+    fontWeight: 600,
+    marginBottom: 4,
+  },
+
+  feedbackRow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+
+  feedbackLabel: {
+    opacity: 0.7,
+  },
+
+  feedbackExplanation: {
+    marginTop: 4,
+    fontStyle: 'italic',
+    opacity: 0.8,
+  },
+
+  feedbackItem: {
+    marginTop: 6,
+    paddingLeft: 8,
+    borderLeft: `2px solid ${theme.palette.divider}`,
+  },
+
+  /* ---- feedback levels ---- */
+
+  feedbackLevel_info: {
+    color: theme.palette.info.main,
+  },
+
+  feedbackLevel_success: {
+    color: theme.palette.success.main,
+  },
+
+  feedbackLevel_warning: {
+    color: theme.palette.warning.main,
+  },
+
+  feedbackLevel_error: {
+    color: theme.palette.error.main,
+  },
+
+  feedbackLevel_hint: {
+    color: theme.palette.secondary.main,
+  },
+
+  feedbackMeta: {
+    fontSize: 12,
+    opacity: 0.6,
+  },
+
+  feedbackSuggestion: {
+    marginTop: 2,
+    opacity: 0.85,
+    fontStyle: 'italic',
+  },
+
+  editorWrapper: {
+    borderRadius: 6,
+    overflow: 'hidden',
+  },
+
+  complexityRow: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: 8,
+  },
+
+  actions: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: 8,
+  },
+
+  checkButton: {
+    padding: '6px 14px',
+    borderRadius: 6,
+    border: '1px solid var(--border-muted)',
+    background: 'var(--accent)',
+    color: '#fff',
+    fontWeight: 600,
+    cursor: 'pointer',
+
+    '&:hover': {
+      opacity: 0.9,
+    },
+  },
+
+  feedbackPanel: {
+    marginTop: 12,
+    padding: 10,
+    borderRadius: 6,
+    border: '1px solid var(--border-muted)',
+    background: 'var(--bg-subtle)',
+  },
+}))
diff --git a/src/types/index.ts b/src/types/index.ts
index 0869168..f5a6372 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -8,6 +8,7 @@ import { MatrixResponseAreaTub } from './Matrix'
 import { MultipleChoiceResponseAreaTub } from './MultipleChoice'
 import { NumberResponseAreaTub } from './NumberInput'
 import { NumericUnitsResponseAreaTub } from './NumericUnits'
+import { PseudocodeResponseAreaTub } from './Pseudocode'
 import { ResponseAreaTub } from './response-area-tub'
 import { isResponseAreaSandboxType } from './sandbox'
 import { TableResponseAreaTub } from './Table'
@@ -28,6 +29,7 @@ export const supportedResponseTypes = [
   'ESSAY',
   'CODE',
   'MILKDOWN',
+  'PSEUDOCODE',
   'LIKERT',
   'MATH_SINGLE_LINE',
   'MATH_MULTI_LINES',
@@ -58,6 +60,8 @@ const createReponseAreaTub = (type: string): ResponseAreaTub => {
       return new EssayResponseAreaTub()
     case 'CODE':
       return new CodeResponseAreaTub()
+    case 'PSEUDOCODE':
+      return new PseudocodeResponseAreaTub()
     case 'LIKERT':
       return new LikertResponseAreaTub()
     case 'MATH_SINGLE_LINE':
diff --git a/src/types/response-area-tub.ts b/src/types/response-area-tub.ts
index f3d5dbc..e62f65f 100644
--- a/src/types/response-area-tub.ts
+++ b/src/types/response-area-tub.ts
@@ -159,14 +159,24 @@ export abstract class ResponseAreaTub {
    * @throws Error if answerSchema is undefined or validation fails
    */
   protected extractAnswer = (provided: any): void => {
-    if (!this.answerSchema) throw new Error('Not implemented')
+    if (!this.answerSchema) {
+      throw new Error('Answer schema is not defined')
+    }
 
     const parsedAnswer = this.answerSchema.safeParse(provided)
-    if (!parsedAnswer.success) throw new Error('Could not extract answer')
+
+    if (!parsedAnswer.success) {
+      const issues = parsedAnswer.error.issues
+        .map(issue => `${issue.path.join('.') || 'root'}: ${issue.message}`)
+        .join('; ')
+
+      throw new Error(`Could not extract answer: ${provided}, issues: ${issues}`)
+    }
 
     this.answer = parsedAnswer.data
   }
 
+
   /**
    * Initializes the response area with default values.
    * Called when creating a new response area without existing data.
diff --git a/tsconfig.json b/tsconfig.json
index 0483da2..8ba41e2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -31,6 +31,6 @@
       "types/*": ["externals/types/*"],
     }
   },
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", "src/types/Pseudocode/index.tsx"],
   "exclude": ["node_modules"]
 }
diff --git a/yarn.lock b/yarn.lock
index 2f15a67..4e05edc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -173,6 +173,163 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.27.1"
 
+"@codemirror/autocomplete@^0.20.0":
+  version "0.20.3"
+  resolved "https://registry.npmmirror.com/@codemirror/autocomplete/-/autocomplete-0.20.3.tgz#affe2d7e2b2e0be42ee1ac5fb74a1c84a6f1bfd7"
+  integrity sha512-lYB+NPGP+LEzAudkWhLfMxhTrxtLILGl938w+RcFrGdrIc54A+UgmCoz+McE3IYRFp4xyQcL4uFJwo+93YdgHw==
+  dependencies:
+    "@codemirror/language" "^0.20.0"
+    "@codemirror/state" "^0.20.0"
+    "@codemirror/view" "^0.20.0"
+    "@lezer/common" "^0.16.0"
+
+"@codemirror/autocomplete@^6.0.0":
+  version "6.20.0"
+  resolved "https://registry.npmmirror.com/@codemirror/autocomplete/-/autocomplete-6.20.0.tgz#db818c12dce892a93fb8abadc2426febb002f8c1"
+  integrity sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/basic-setup@^0.20.0":
+  version "0.20.0"
+  resolved "https://registry.npmmirror.com/@codemirror/basic-setup/-/basic-setup-0.20.0.tgz#ed331e0b2d29efc0a09317de9e10467b992b0c7b"
+  integrity sha512-W/ERKMLErWkrVLyP5I8Yh8PXl4r+WFNkdYVSzkXYPQv2RMPSkWpr2BgggiSJ8AHF/q3GuApncDD8I4BZz65fyg==
+  dependencies:
+    "@codemirror/autocomplete" "^0.20.0"
+    "@codemirror/commands" "^0.20.0"
+    "@codemirror/language" "^0.20.0"
+    "@codemirror/lint" "^0.20.0"
+    "@codemirror/search" "^0.20.0"
+    "@codemirror/state" "^0.20.0"
+    "@codemirror/view" "^0.20.0"
+
+"@codemirror/commands@^0.20.0":
+  version "0.20.0"
+  resolved "https://registry.npmmirror.com/@codemirror/commands/-/commands-0.20.0.tgz#51405d442e6b8687b63e8fa27effc28179917c88"
+  integrity sha512-v9L5NNVA+A9R6zaFvaTbxs30kc69F6BkOoiEbeFw4m4I0exmDEKBILN6mK+GksJtvTzGBxvhAPlVFTdQW8GB7Q==
+  dependencies:
+    "@codemirror/language" "^0.20.0"
+    "@codemirror/state" "^0.20.0"
+    "@codemirror/view" "^0.20.0"
+    "@lezer/common" "^0.16.0"
+
+"@codemirror/commands@^6.0.0":
+  version "6.10.1"
+  resolved "https://registry.npmmirror.com/@codemirror/commands/-/commands-6.10.1.tgz#a17a48f846947f48150b9670a3de8c4352b69256"
+  integrity sha512-uWDWFypNdQmz2y1LaNJzK7fL7TYKLeUAU0npEC685OKTF3KcQ2Vu3klIM78D7I6wGhktme0lh3CuQLv0ZCrD9Q==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.4.0"
+    "@codemirror/view" "^6.27.0"
+    "@lezer/common" "^1.1.0"
+
+"@codemirror/lang-javascript@^6.2.4":
+  version "6.2.4"
+  resolved "https://registry.npmmirror.com/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz#eef2227d1892aae762f3a0f212f72bec868a02c5"
+  integrity sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.6.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/javascript" "^1.0.0"
+
+"@codemirror/language@^0.20.0":
+  version "0.20.2"
+  resolved "https://registry.npmmirror.com/@codemirror/language/-/language-0.20.2.tgz#31c3712eac2251810986272dcd6a50510e0c1529"
+  integrity sha512-WB3Bnuusw0xhVvhBocieYKwJm04SOk5bPoOEYksVHKHcGHFOaYaw+eZVxR4gIqMMcGzOIUil0FsCmFk8yrhHpw==
+  dependencies:
+    "@codemirror/state" "^0.20.0"
+    "@codemirror/view" "^0.20.0"
+    "@lezer/common" "^0.16.0"
+    "@lezer/highlight" "^0.16.0"
+    "@lezer/lr" "^0.16.0"
+    style-mod "^4.0.0"
+
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.12.1", "@codemirror/language@^6.6.0":
+  version "6.12.1"
+  resolved "https://registry.npmmirror.com/@codemirror/language/-/language-6.12.1.tgz#d615f7b099a39248312feaaf0bfafce4418aac1b"
+  integrity sha512-Fa6xkSiuGKc8XC8Cn96T+TQHYj4ZZ7RdFmXA3i9xe/3hLHfwPZdM+dqfX0Cp0zQklBKhVD8Yzc8LS45rkqcwpQ==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.23.0"
+    "@lezer/common" "^1.5.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+    style-mod "^4.0.0"
+
+"@codemirror/lint@^0.20.0":
+  version "0.20.3"
+  resolved "https://registry.npmmirror.com/@codemirror/lint/-/lint-0.20.3.tgz#34c0fd45c5acd522637f68602e3a416162e03a15"
+  integrity sha512-06xUScbbspZ8mKoODQCEx6hz1bjaq9m8W8DxdycWARMiiX1wMtfCh/MoHpaL7ws/KUMwlsFFfp2qhm32oaCvVA==
+  dependencies:
+    "@codemirror/state" "^0.20.0"
+    "@codemirror/view" "^0.20.2"
+    crelt "^1.0.5"
+
+"@codemirror/lint@^6.0.0":
+  version "6.9.3"
+  resolved "https://registry.npmmirror.com/@codemirror/lint/-/lint-6.9.3.tgz#eee48c9d60ea63582eee1ebd6b4ae65102eb8782"
+  integrity sha512-y3YkYhdnhjDBAe0VIA0c4wVoFOvnp8CnAvfLqi0TqotIv92wIlAAP7HELOpLBsKwjAX6W92rSflA6an/2zBvXw==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.35.0"
+    crelt "^1.0.5"
+
+"@codemirror/search@^0.20.0":
+  version "0.20.1"
+  resolved "https://registry.npmmirror.com/@codemirror/search/-/search-0.20.1.tgz#9eba0514218a673e29501a889a4fcb7da7ce24ad"
+  integrity sha512-ROe6gRboQU5E4z6GAkNa2kxhXqsGNbeLEisbvzbOeB7nuDYXUZ70vGIgmqPu0tB+1M3F9yWk6W8k2vrFpJaD4Q==
+  dependencies:
+    "@codemirror/state" "^0.20.0"
+    "@codemirror/view" "^0.20.0"
+    crelt "^1.0.5"
+
+"@codemirror/search@^6.0.0":
+  version "6.6.0"
+  resolved "https://registry.npmmirror.com/@codemirror/search/-/search-6.6.0.tgz#3b83a1e35391e1575a83a3b485e3f95263ddaa0b"
+  integrity sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.37.0"
+    crelt "^1.0.5"
+
+"@codemirror/state@^0.20.0":
+  version "0.20.1"
+  resolved "https://registry.npmmirror.com/@codemirror/state/-/state-0.20.1.tgz#de5c6dc0de3e216eaa3a9ee9391c926b766f6b46"
+  integrity sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ==
+
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.4.0", "@codemirror/state@^6.5.0", "@codemirror/state@^6.5.4":
+  version "6.5.4"
+  resolved "https://registry.npmmirror.com/@codemirror/state/-/state-6.5.4.tgz#f5be4b8c0d2310180d5f15a9f641c21ca69faf19"
+  integrity sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==
+  dependencies:
+    "@marijn/find-cluster-break" "^1.0.0"
+
+"@codemirror/view@^0.20.0", "@codemirror/view@^0.20.2":
+  version "0.20.7"
+  resolved "https://registry.npmmirror.com/@codemirror/view/-/view-0.20.7.tgz#1d0acc740f71f92abef4b437c030d4e6c39ab6dc"
+  integrity sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==
+  dependencies:
+    "@codemirror/state" "^0.20.0"
+    style-mod "^4.0.0"
+    w3c-keyname "^2.2.4"
+
+"@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.23.0", "@codemirror/view@^6.27.0", "@codemirror/view@^6.35.0", "@codemirror/view@^6.37.0", "@codemirror/view@^6.39.12":
+  version "6.39.12"
+  resolved "https://registry.npmmirror.com/@codemirror/view/-/view-6.39.12.tgz#c61961d7107b44bd233647fc9e33d96309d627c9"
+  integrity sha512-f+/VsHVn/kOA9lltk/GFzuYwVVAKmOnNjxbrhkk3tPHntFqjWeI2TbIXx006YkBkqC10wZ4NsnWXCQiFPeAISQ==
+  dependencies:
+    "@codemirror/state" "^6.5.0"
+    crelt "^1.0.6"
+    style-mod "^4.1.0"
+    w3c-keyname "^2.2.4"
+
 "@date-io/core@^2.17.0":
   version "2.17.0"
   resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.17.0.tgz#360a4d0641f069776ed22e457876e8a8a58c205e"
@@ -1059,6 +1216,58 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@lezer/common@^0.16.0":
+  version "0.16.1"
+  resolved "https://registry.npmmirror.com/@lezer/common/-/common-0.16.1.tgz#3b98b42fdb11454b89e8a340da10bee1b0f94071"
+  integrity sha512-qPmG7YTZ6lATyTOAWf8vXE+iRrt1NJd4cm2nJHK+v7X9TsOF6+HtuU/ctaZy2RCrluxDb89hI6KWQ5LfQGQWuA==
+
+"@lezer/common@^1.0.0", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0", "@lezer/common@^1.3.0", "@lezer/common@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.npmmirror.com/@lezer/common/-/common-1.5.0.tgz#db227b596260189b67ba286387d9dc81fb07c70b"
+  integrity sha512-PNGcolp9hr4PJdXR4ix7XtixDrClScvtSCYW3rQG106oVMOOI+jFb+0+J3mbeL/53g1Zd6s0kJzaw6Ri68GmAA==
+
+"@lezer/highlight@^0.16.0":
+  version "0.16.0"
+  resolved "https://registry.npmmirror.com/@lezer/highlight/-/highlight-0.16.0.tgz#95f7b7ee3c32c8a0f6ce499c085e8b1f927ffbdc"
+  integrity sha512-iE5f4flHlJ1g1clOStvXNLbORJoiW4Kytso6ubfYzHnaNo/eo5SKhxs4wv/rtvwZQeZrK3we8S9SyA7OGOoRKQ==
+  dependencies:
+    "@lezer/common" "^0.16.0"
+
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3", "@lezer/highlight@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.npmmirror.com/@lezer/highlight/-/highlight-1.2.3.tgz#a20f324b71148a2ea9ba6ff42e58bbfaec702857"
+  integrity sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==
+  dependencies:
+    "@lezer/common" "^1.3.0"
+
+"@lezer/javascript@^1.0.0":
+  version "1.5.4"
+  resolved "https://registry.npmmirror.com/@lezer/javascript/-/javascript-1.5.4.tgz#11746955f957d33c0933f17d7594db54a8b4beea"
+  integrity sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.1.3"
+    "@lezer/lr" "^1.3.0"
+
+"@lezer/lr@^0.16.0":
+  version "0.16.3"
+  resolved "https://registry.npmmirror.com/@lezer/lr/-/lr-0.16.3.tgz#1e4cc581d2725c498e6a731fc83c379114ba3a70"
+  integrity sha512-pau7um4eAw94BEuuShUIeQDTf3k4Wt6oIUOYxMmkZgDHdqtIcxWND4LRxi8nI9KuT4I1bXQv67BCapkxt7Ywqw==
+  dependencies:
+    "@lezer/common" "^0.16.0"
+
+"@lezer/lr@^1.0.0", "@lezer/lr@^1.3.0":
+  version "1.4.8"
+  resolved "https://registry.npmmirror.com/@lezer/lr/-/lr-1.4.8.tgz#333de9bc9346057323ff09beb4cda47ccc38a498"
+  integrity sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@marijn/find-cluster-break@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz#775374306116d51c0c500b8c4face0f9a04752d8"
+  integrity sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==
+
 "@monaco-editor/loader@^1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.5.0.tgz#dcdbc7fe7e905690fb449bed1c251769f325c55d"
@@ -3637,6 +3846,19 @@ clsx@^2.1.0, clsx@^2.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
+codemirror@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.npmmirror.com/codemirror/-/codemirror-6.0.2.tgz#4d3fea1ad60b6753f97ca835f2f48c6936a8946e"
+  integrity sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/commands" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/search" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -3732,7 +3954,7 @@ crc32-stream@^4.0.2:
     crc-32 "^1.2.0"
     readable-stream "^3.4.0"
 
-crelt@^1.0.0:
+crelt@^1.0.0, crelt@^1.0.5, crelt@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
   integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
@@ -7049,6 +7271,11 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+style-mod@^4.0.0, style-mod@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.npmmirror.com/style-mod/-/style-mod-4.1.3.tgz#6e9012255bb799bdac37e288f7671b5d71bf9f73"
+  integrity sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==
+
 styled-jsx@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
@@ -7399,7 +7626,7 @@ vite@^7.0.0:
   optionalDependencies:
     fsevents "~2.3.3"
 
-w3c-keyname@^2.2.0:
+w3c-keyname@^2.2.0, w3c-keyname@^2.2.4:
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
   integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==