From dce9e6b35e7d90d25a28b35e6ae641da9fa557b0 Mon Sep 17 00:00:00 2001
From: everythingfades <raymondguhonglei@163.com>
Date: Mon, 2 Feb 2026 03:29:01 +0000
Subject: [PATCH 1/6] feat: basic codeMirror setup

---
 package.json                                  |  13 +-
 src/sandbox-component.tsx                     |   4 +-
 src/types/Pseudocode/Pseudocode.component.tsx | 102 ++++++++
 src/types/Pseudocode/index.ts                 |  40 +++
 src/types/Pseudocode/utils/autoIndent.ts      |  40 +++
 src/types/Pseudocode/utils/highlight.ts       |  32 +++
 src/types/Pseudocode/utils/language.ts        |  24 ++
 .../Pseudocode/utils/pseudocode.theme.ts      |  48 ++++
 src/types/index.ts                            |   4 +
 yarn.lock                                     | 231 +++++++++++++++++-
 10 files changed, 531 insertions(+), 7 deletions(-)
 create mode 100644 src/types/Pseudocode/Pseudocode.component.tsx
 create mode 100644 src/types/Pseudocode/index.ts
 create mode 100644 src/types/Pseudocode/utils/autoIndent.ts
 create mode 100644 src/types/Pseudocode/utils/highlight.ts
 create mode 100644 src/types/Pseudocode/utils/language.ts
 create mode 100644 src/types/Pseudocode/utils/pseudocode.theme.ts

diff --git a/package.json b/package.json
index 66e29ee..2a6ed21 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",
     "date-fns": "^2.28.0",
     "framer-motion": "^11.2.10",
     "katex": "^0.16.2",
@@ -43,8 +50,8 @@
     "next": "^14.2.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-katex": "^3.0.1",
     "react-hook-form": "^7.31.2",
+    "react-katex": "^3.0.1",
     "react-query": "^3.39.0",
     "tldraw": "^3.13.1",
     "tss-react": "^3.7.0",
@@ -66,11 +73,11 @@
     "@types/shuffle-seed": "^1.1.0",
     "@vitejs/plugin-react": "^4.5.2",
     "eslint": "^9.3.0",
-    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "globals": "^16.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3",
diff --git a/src/sandbox-component.tsx b/src/sandbox-component.tsx
index ec553ef..f5ca886 100644
--- a/src/sandbox-component.tsx
+++ b/src/sandbox-component.tsx
@@ -1,13 +1,13 @@
 import { ThemeProvider } from '@styles/minimal/theme-provider'
 
-import { SandboxResponseAreaTub } from './types/Sandbox'
+import { PseudocodeResponseAreaTub } from './types/Pseudocode'
 
 function ResponseAreaInputWrapper({ children }: { children: React.ReactNode }) {
   return <ThemeProvider>{children}</ThemeProvider>
 }
 
 // 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/Pseudocode/Pseudocode.component.tsx b/src/types/Pseudocode/Pseudocode.component.tsx
new file mode 100644
index 0000000..59332eb
--- /dev/null
+++ b/src/types/Pseudocode/Pseudocode.component.tsx
@@ -0,0 +1,102 @@
+// PseudocodeInput.tsx
+import { StreamLanguage, syntaxHighlighting } from '@codemirror/language';
+import { EditorState } from '@codemirror/state';
+import { placeholder, keymap } from '@codemirror/view';
+import { makeStyles } from '@styles'; // adjust to your project
+import { EditorView, basicSetup } from 'codemirror';
+import { useEffect, useRef } from 'react';
+
+import { BaseResponseAreaProps } from '../base-props.type';
+
+import { autoIndentAfterColon } from './utils/autoIndent';
+import { pseudocodeHighlightStyle } from './utils/highlight';
+import { pseudocodeLanguage } from './utils/language';
+import { pseudocodeTheme } from './utils/pseudocode.theme';
+
+type PseudocodeInputProps = Omit<BaseResponseAreaProps, 'handleChange' | 'answer'> & {
+  handleChange: (val: string) => void;
+  answer?: string;
+};
+
+
+export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({ handleChange, answer }) => {
+  const { classes } = useStyles();
+  const editorRef = useRef<HTMLDivElement | null>(null);
+  const viewRef = useRef<EditorView | null>(null);
+
+  // Initialize editor
+  useEffect(() => {
+    if (!editorRef.current) return;
+
+    const state = EditorState.create({
+      doc: answer ?? '',
+      extensions: [
+        autoIndentAfterColon,
+        basicSetup,
+        pseudocodeLanguage,
+        syntaxHighlighting(pseudocodeHighlightStyle),
+        pseudocodeTheme,
+        placeholder('Write your pseudocode here...'),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            handleChange(update.state.doc.toString());
+          }
+        }),
+        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;
+    };
+  }, []);
+
+  // Update editor if answer prop changes externally
+  useEffect(() => {
+    if (viewRef.current && answer !== undefined) {
+      const view = viewRef.current;
+      if (view.state.doc.toString() !== answer) {
+        view.dispatch({
+          changes: { from: 0, to: view.state.doc.length, insert: answer },
+        });
+      }
+    }
+  }, [answer]);
+
+  return <div ref={editorRef} className={classes.editor} />;
+};
+
+const useStyles = makeStyles()((theme) => ({
+  editor: {
+    width: '100%',
+    minHeight: '200px',
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: '4px',
+    overflow: 'hidden',
+    backgroundColor: '#fff',
+
+    '& .cm-editor': {
+      outline: 'none',
+    },
+    '& .cm-content': {
+      fontFamily: '"Fira Code", "Courier New", monospace',
+      fontSize: '14px',
+      padding: '10px 0',
+    },
+    '& .cm-gutters': {
+      backgroundColor: '#f5f5f5',
+      borderRight: `1px solid ${theme.palette.divider}`,
+    },
+  },
+}));
diff --git a/src/types/Pseudocode/index.ts b/src/types/Pseudocode/index.ts
new file mode 100644
index 0000000..31f76cc
--- /dev/null
+++ b/src/types/Pseudocode/index.ts
@@ -0,0 +1,40 @@
+import { z } from 'zod'
+
+import {
+  BaseResponseAreaProps,
+  BaseResponseAreaWizardProps,
+} from '../base-props.type'
+import { ResponseAreaTub } from '../response-area-tub'
+
+import { PseudocodeInput } from './Pseudocode.component'
+
+export class PseudocodeResponseAreaTub extends ResponseAreaTub {
+  public readonly responseType = 'PSEUDOCODE'
+
+  public readonly displayWideInput = true
+
+  protected answerSchema = z.string()
+
+  protected answer?: string
+
+  InputComponent = (props: BaseResponseAreaProps) => {
+    const parsedAnswer = this.answerSchema.safeParse(props.answer)
+    return PseudocodeInput({
+      ...props,
+      answer: parsedAnswer.success ? parsedAnswer.data : undefined,
+    })
+  }
+
+  WizardComponent = (props: BaseResponseAreaWizardProps) => {
+    return PseudocodeInput({
+      ...props,
+      answer: this.answer,
+      handleChange: (answer: string) => {
+        props.handleChange({
+          responseType: this.responseType,
+          answer,
+        })
+      },
+    })
+  }
+}
diff --git a/src/types/Pseudocode/utils/autoIndent.ts b/src/types/Pseudocode/utils/autoIndent.ts
new file mode 100644
index 0000000..72233d4
--- /dev/null
+++ b/src/types/Pseudocode/utils/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(':')) {
+        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/utils/highlight.ts b/src/types/Pseudocode/utils/highlight.ts
new file mode 100644
index 0000000..3d2ca4a
--- /dev/null
+++ b/src/types/Pseudocode/utils/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/utils/language.ts b/src/types/Pseudocode/utils/language.ts
new file mode 100644
index 0000000..4cf3952
--- /dev/null
+++ b/src/types/Pseudocode/utils/language.ts
@@ -0,0 +1,24 @@
+import { StreamLanguage } from "@codemirror/language";
+
+export const pseudocodeLanguage = StreamLanguage.define({
+  token(stream) {
+    if (stream.match(/IF|THEN|ELSE|ELSEIF|ENDIF|WHILE|FOR|TO|STEP|NEXT|REPEAT|UNTIL|FUNCTION|PROCEDURE|BEGIN|END|RETURN|PRINT|INPUT/i)) {
+      return 'keyword';
+    }
+    if (stream.match(/TRUE|FALSE|NULL/i)) {
+      return 'bool';
+    }
+    if (stream.match(/-?\d+(\.\d+)?/)) {
+      return 'number';
+    }
+    if (stream.match(/(["'])(?:\\.|(?!\1).)*?\1/)) {
+      return 'string';
+    }
+    if (stream.match(/\/\/.*/)) {
+      return 'comment';
+    }
+
+    stream.next();
+    return null;
+  },
+});
\ No newline at end of file
diff --git a/src/types/Pseudocode/utils/pseudocode.theme.ts b/src/types/Pseudocode/utils/pseudocode.theme.ts
new file mode 100644
index 0000000..cc47746
--- /dev/null
+++ b/src/types/Pseudocode/utils/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/index.ts b/src/types/index.ts
index daeacc0..c6b7330 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -7,6 +7,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 { TableResponseAreaTub } from './Table'
 import { TextResponseAreaTub } from './TextInput'
@@ -25,6 +26,7 @@ export const supportedResponseTypes = [
   'ESSAY',
   'CODE',
   'MILKDOWN',
+  'PESUDOCODE'
 ]
 
 if (typeof window !== 'undefined') {
@@ -98,6 +100,8 @@ const createReponseAreaTub = (type: string): ResponseAreaTub => {
       return new EssayResponseAreaTub()
     case 'CODE':
       return new CodeResponseAreaTub()
+    case 'PSEUDOCODE':
+      return new PseudocodeResponseAreaTub()
     case 'VOID':
       return new VoidResponseAreaTub()
     default:
diff --git a/yarn.lock b/yarn.lock
index 8ca7d57..f2d400d 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"
@@ -650,6 +807,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"
@@ -3135,6 +3344,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"
@@ -3223,7 +3445,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==
@@ -6213,6 +6435,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"
@@ -6548,7 +6775,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==

From 7afeda187c151dfdf76f3deaba8f1f48956d8fb8 Mon Sep 17 00:00:00 2001
From: everythingfades <raymondguhonglei@163.com>
Date: Mon, 2 Feb 2026 17:57:26 +0000
Subject: [PATCH 2/6] feat: fixed types and folding

---
 src/sandbox-component.tsx                     |   2 +-
 src/types/Matrix/index.ts                     | 188 ++++++---
 src/types/Pseudocode/Pseudocode.component.tsx | 136 +++---
 src/types/Pseudocode/index.ts                 |  40 --
 src/types/Pseudocode/index.tsx                | 123 ++++++
 .../{utils => plugins}/autoIndent.ts          |   2 +-
 src/types/Pseudocode/plugins/fold.ts          |  30 ++
 .../{utils => plugins}/highlight.ts           |   0
 src/types/Pseudocode/plugins/language.ts      |  54 +++
 .../{utils => plugins}/pseudocode.theme.ts    |   0
 src/types/Pseudocode/types/input.ts           | 202 +++++++++
 src/types/Pseudocode/types/output.ts          | 389 ++++++++++++++++++
 src/types/Pseudocode/utils/consts.ts          |   9 +
 src/types/Pseudocode/utils/language.ts        |  24 --
 src/types/Pseudocode/utils/styles.ts          |  49 +++
 src/types/index.ts                            |   2 +-
 tsconfig.json                                 |   2 +-
 17 files changed, 1064 insertions(+), 188 deletions(-)
 delete mode 100644 src/types/Pseudocode/index.ts
 create mode 100644 src/types/Pseudocode/index.tsx
 rename src/types/Pseudocode/{utils => plugins}/autoIndent.ts (94%)
 create mode 100644 src/types/Pseudocode/plugins/fold.ts
 rename src/types/Pseudocode/{utils => plugins}/highlight.ts (100%)
 create mode 100644 src/types/Pseudocode/plugins/language.ts
 rename src/types/Pseudocode/{utils => plugins}/pseudocode.theme.ts (100%)
 create mode 100644 src/types/Pseudocode/types/input.ts
 create mode 100644 src/types/Pseudocode/types/output.ts
 create mode 100644 src/types/Pseudocode/utils/consts.ts
 delete mode 100644 src/types/Pseudocode/utils/language.ts
 create mode 100644 src/types/Pseudocode/utils/styles.ts

diff --git a/src/sandbox-component.tsx b/src/sandbox-component.tsx
index f5ca886..63a5052 100644
--- a/src/sandbox-component.tsx
+++ b/src/sandbox-component.tsx
@@ -1,6 +1,6 @@
 import { ThemeProvider } from '@styles/minimal/theme-provider'
 
-import { PseudocodeResponseAreaTub } from './types/Pseudocode'
+import { PseudocodeResponseAreaTub } from './types/Pseudocode/index.tsx'
 
 function ResponseAreaInputWrapper({ children }: { children: React.ReactNode }) {
   return <ThemeProvider>{children}</ThemeProvider>
diff --git a/src/types/Matrix/index.ts b/src/types/Matrix/index.ts
index 6dae48e..196dd2f 100644
--- a/src/types/Matrix/index.ts
+++ b/src/types/Matrix/index.ts
@@ -1,92 +1,152 @@
-import {
-  DEFAULT_COLS,
-  DEFAULT_ROWS,
-} from '@modules/shared/schemas/question-form.schema'
-import _ from 'lodash'
-import { z } from 'zod'
+import { z } from 'zod';
 
 import {
   BaseResponseAreaProps,
   BaseResponseAreaWizardProps,
-} from '../base-props.type'
-import { ResponseAreaTub } from '../response-area-tub'
-
-import { padMatrixFromRowsAndCols } from './helpers'
-import { Matrix } from './Matrix.component'
-import { matrixConfigSchema, matrixResponseAnswerSchema } from './Matrix.schema'
-import { MatrixWizard } from './MatrixWizard.component'
-
-export const defaultMatrixAnswer = {
-  rows: DEFAULT_ROWS,
-  cols: DEFAULT_COLS,
-  type: 'MATRIX' as const,
-  answers: padMatrixFromRowsAndCols({
-    rows: DEFAULT_ROWS,
-    cols: DEFAULT_COLS,
-  }),
+} from '../base-props.type';
+import { PseudocodeInput } from '../Pseudocode/Pseudocode.component';
+import { EvaluationResult, EvaluationResultSchema } from '../Pseudocode/types/output';
+import { ResponseAreaTub } from '../response-area-tub';
+
+/* ============================================================
+ * Helpers
+ * ============================================================
+ */
+
+/**
+ * Safely parse + validate EvaluationResult from a JSON string.
+ * Returns undefined if anything fails.
+ */
+function safeParseEvaluationResult(
+  value: unknown
+): EvaluationResult | undefined {
+  if (typeof value !== 'string') return undefined;
+
+  try {
+    const json = JSON.parse(value);
+    const parsed = EvaluationResultSchema.safeParse(json);
+    return parsed.success ? parsed.data : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Minimal safe default.
+ * This ensures legacy systems always receive valid JSON.
+ */
+function createDefaultEvaluationResult(): EvaluationResult {
+  return {
+    is_correct: false,
+    score: 0,
+    feedback: '',
+    feedback_items: [],
+    warnings: [],
+    errors: [],
+    metadata: {},
+  };
 }
 
-export class MatrixResponseAreaTub extends ResponseAreaTub {
-  public readonly responseType = 'MATRIX'
+/* ============================================================
+ * PseudocodeResponseAreaTub
+ * ============================================================
+ */
 
-  protected configSchema = matrixConfigSchema
+export class PseudocodeResponseAreaTub extends ResponseAreaTub {
+  public readonly responseType = 'PSEUDOCODE';
 
-  protected config?: z.infer<typeof matrixConfigSchema>
+  public readonly displayWideInput = true;
 
-  protected answerSchema = matrixResponseAnswerSchema
+  /**
+   * Legacy constraint:
+   * Stored answer must be a string (JSON-encoded)
+   */
+  protected answerSchema = z.string();
 
-  protected answer?: z.infer<typeof matrixResponseAnswerSchema>
+  /**
+   * Stored answer (JSON string)
+   */
+  protected answer?: string;
 
-  public readonly displayWideInput = true
+  /* ----------------------------------------------------------
+   * Lifecycle: Initialization
+   * ---------------------------------------------------------- */
 
+  /**
+   * Ensure we always start with a valid JSON payload.
+   * Called when the response area is first created.
+   */
   initWithDefault = () => {
-    this.config = {
-      rows: DEFAULT_ROWS,
-      cols: DEFAULT_COLS,
+    if (!this.answer) {
+      this.answer = JSON.stringify(createDefaultEvaluationResult());
+      return;
+    }
+
+    // If existing answer is invalid, reset safely
+    const parsed = safeParseEvaluationResult(this.answer);
+    if (!parsed) {
+      this.answer = JSON.stringify(createDefaultEvaluationResult());
     }
-    this.answer = padMatrixFromRowsAndCols({
-      rows: DEFAULT_ROWS,
-      cols: DEFAULT_COLS,
-    })
   }
 
-  protected extractAnswer = (provided: any): void => {
-    if (!this.config) throw new Error('Config missing')
-    if (!Array.isArray(provided)) throw new Error('Answer is not an array')
-
-    // legacy handling: answer used to be stored as a one-dimensional array. This
-    // checks which format the answer is in and converts it to a two-dimensional
-    // array if necessary
-    const isChuncked = Array.isArray(provided[0])
-    let answerToParse: z.infer<typeof matrixResponseAnswerSchema>
-    if (isChuncked) {
-      answerToParse = provided
-    } else {
-      answerToParse = _.chunk(provided, this.config.cols)
+  /* ----------------------------------------------------------
+   * Lifecycle: Pre-submission Validation
+   * ---------------------------------------------------------- */
+
+  /**
+   * Runs before every submission.
+   * Throwing here blocks submission.
+   */
+  customCheck = () => {
+    const parsed = safeParseEvaluationResult(this.answer);
+
+    if (!parsed) {
+      throw new Error(
+        'Invalid pseudocode evaluation payload. Please re-enter your response.'
+      );
     }
-    const parsedAnswer = this.answerSchema.safeParse(answerToParse)
-    if (!parsedAnswer.success) throw new Error('Could not extract answer')
 
-    this.answer = parsedAnswer.data
+    // Optional extra safety checks (cheap, but valuable)
+    if (parsed.score < 0 || parsed.score > 1) {
+      throw new Error('Evaluation score must be between 0 and 1.');
+    }
+
+    if (!Array.isArray(parsed.feedback_items)) {
+      throw new Error('Feedback items must be an array.');
+    }
   }
 
+  /* ----------------------------------------------------------
+   * Student / Read-only View
+   * ---------------------------------------------------------- */
+
   InputComponent = (props: BaseResponseAreaProps) => {
-    if (!this.config) throw new Error('Config missing')
+    const evaluationResult = safeParseEvaluationResult(props.answer);
 
-    return Matrix({
+    return PseudocodeInput({
       ...props,
-      config: this.config,
-    })
-  }
+      answer: evaluationResult,
+      isTeacherMode: false,
+    });
+  };
+
+  /* ----------------------------------------------------------
+   * Wizard / Editable View
+   * ---------------------------------------------------------- */
 
   WizardComponent = (props: BaseResponseAreaWizardProps) => {
-    if (!this.config) throw new Error('Config missing')
-    if (this.answer === undefined) throw new Error('Answer missing')
+    const evaluationResult = safeParseEvaluationResult(this.answer);
 
-    return MatrixWizard({
+    return PseudocodeInput({
       ...props,
-      config: this.config,
-      answer: this.answer,
-    })
-  }
+      answer: evaluationResult,
+      isTeacherMode: true,
+      handleChange: (result: EvaluationResult) => {
+        props.handleChange({
+          responseType: this.responseType,
+          answer: JSON.stringify(result),
+        });
+      },
+    });
+  };
 }
diff --git a/src/types/Pseudocode/Pseudocode.component.tsx b/src/types/Pseudocode/Pseudocode.component.tsx
index 59332eb..3bae9b3 100644
--- a/src/types/Pseudocode/Pseudocode.component.tsx
+++ b/src/types/Pseudocode/Pseudocode.component.tsx
@@ -1,36 +1,57 @@
 // PseudocodeInput.tsx
-import { StreamLanguage, syntaxHighlighting } from '@codemirror/language';
+import { foldGutter, foldService, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
 import { EditorState } from '@codemirror/state';
-import { placeholder, keymap } from '@codemirror/view';
-import { makeStyles } from '@styles'; // adjust to your project
+import { placeholder } from '@codemirror/view';
 import { EditorView, basicSetup } from 'codemirror';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { BaseResponseAreaProps } from '../base-props.type';
 
-import { autoIndentAfterColon } from './utils/autoIndent';
-import { pseudocodeHighlightStyle } from './utils/highlight';
-import { pseudocodeLanguage } from './utils/language';
-import { pseudocodeTheme } from './utils/pseudocode.theme';
+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 { usePseudocodeInputStyles } from './utils/styles';
 
 type PseudocodeInputProps = Omit<BaseResponseAreaProps, 'handleChange' | 'answer'> & {
-  handleChange: (val: string) => void;
-  answer?: string;
+  handleChange: (val: StudentResponse) => void;
+  answer?: StudentResponse;
+  isTeacherMode?: boolean;
 };
 
+export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({
+  handleChange,
+  answer,
+  isTeacherMode = false,
+}) => {
+  const { classes } = usePseudocodeInputStyles();
+  const [internalAnswer, setInternalAnswer] = useState<StudentResponse>(answer ?? {
+    pseudocode: '',
+    time_complexity: null,
+    space_complexity: null,
+    explanation: null,
+  });
 
-export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({ handleChange, answer }) => {
-  const { classes } = useStyles();
   const editorRef = useRef<HTMLDivElement | null>(null);
   const viewRef = useRef<EditorView | null>(null);
 
-  // Initialize editor
+  // Sync external answer only when it changes
+  useEffect(() => {
+    if (!answer) return;
+    setInternalAnswer(answer);
+  }, [answer]);
+
+  // Initialize CodeMirror
   useEffect(() => {
     if (!editorRef.current) return;
 
     const state = EditorState.create({
-      doc: answer ?? '',
+      doc: internalAnswer.pseudocode ?? '',
       extensions: [
+        foldGutter(),
+        foldService.of(pseudocodeFoldFunc),
         autoIndentAfterColon,
         basicSetup,
         pseudocodeLanguage,
@@ -38,13 +59,13 @@ export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({ handleChange,
         pseudocodeTheme,
         placeholder('Write your pseudocode here...'),
         EditorView.updateListener.of((update) => {
-          if (update.docChanged) {
-            handleChange(update.state.doc.toString());
-          }
+          if (!update.docChanged) return;
+          const newCode = update.state.doc.toString();
+          setInternalAnswer((prev) => ({ ...prev, pseudocode: newCode }));
         }),
         EditorView.theme({
-          "&": { height: "100%" },
-          ".cm-scroller": { overflow: "auto" },
+          '&': { height: '100%' },
+          '.cm-scroller': { overflow: 'auto' },
         }),
       ],
     });
@@ -55,48 +76,51 @@ export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({ handleChange,
     });
 
     viewRef.current = view;
-
     return () => {
       view.destroy();
       viewRef.current = null;
     };
   }, []);
 
-  // Update editor if answer prop changes externally
-  useEffect(() => {
-    if (viewRef.current && answer !== undefined) {
-      const view = viewRef.current;
-      if (view.state.doc.toString() !== answer) {
-        view.dispatch({
-          changes: { from: 0, to: view.state.doc.length, insert: answer },
-        });
-      }
-    }
-  }, [answer]);
+  // Debounced / onBlur submit
+  const reportChange = () => {
+    handleChange({
+      pseudocode: internalAnswer.pseudocode ?? '',
+      time_complexity: internalAnswer.time_complexity ?? null,
+      space_complexity: internalAnswer.space_complexity ?? null,
+      explanation: internalAnswer.explanation ?? null,
+    });
+  };
 
-  return <div ref={editorRef} className={classes.editor} />;
-};
+  return (
+    <div className={classes.root}>
+      <div ref={editorRef} className={classes.editor} />
+
+      <input
+        className={classes.field}
+        value={internalAnswer.time_complexity ?? ''}
+        placeholder="Time Complexity"
+        onChange={(e) => setInternalAnswer((prev) => ({ ...prev, time_complexity: e.target.value }))}
+        onBlur={reportChange}
+      />
+
+      <input
+        className={classes.field}
+        value={internalAnswer.space_complexity ?? ''}
+        placeholder="Space Complexity"
+        onChange={(e) => setInternalAnswer((prev) => ({ ...prev, space_complexity: e.target.value }))}
+        onBlur={reportChange}
+      />
+
+      <textarea
+        className={classes.textarea}
+        value={internalAnswer.explanation ?? ''}
+        placeholder="Explanation"
+        onChange={(e) => setInternalAnswer((prev) => ({ ...prev, explanation: e.target.value }))}
+        onBlur={reportChange}
+      />
 
-const useStyles = makeStyles()((theme) => ({
-  editor: {
-    width: '100%',
-    minHeight: '200px',
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: '4px',
-    overflow: 'hidden',
-    backgroundColor: '#fff',
-
-    '& .cm-editor': {
-      outline: 'none',
-    },
-    '& .cm-content': {
-      fontFamily: '"Fira Code", "Courier New", monospace',
-      fontSize: '14px',
-      padding: '10px 0',
-    },
-    '& .cm-gutters': {
-      backgroundColor: '#f5f5f5',
-      borderRight: `1px solid ${theme.palette.divider}`,
-    },
-  },
-}));
+      {isTeacherMode && <div className={classes.teacherSlot} />}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/types/Pseudocode/index.ts b/src/types/Pseudocode/index.ts
deleted file mode 100644
index 31f76cc..0000000
--- a/src/types/Pseudocode/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { z } from 'zod'
-
-import {
-  BaseResponseAreaProps,
-  BaseResponseAreaWizardProps,
-} from '../base-props.type'
-import { ResponseAreaTub } from '../response-area-tub'
-
-import { PseudocodeInput } from './Pseudocode.component'
-
-export class PseudocodeResponseAreaTub extends ResponseAreaTub {
-  public readonly responseType = 'PSEUDOCODE'
-
-  public readonly displayWideInput = true
-
-  protected answerSchema = z.string()
-
-  protected answer?: string
-
-  InputComponent = (props: BaseResponseAreaProps) => {
-    const parsedAnswer = this.answerSchema.safeParse(props.answer)
-    return PseudocodeInput({
-      ...props,
-      answer: parsedAnswer.success ? parsedAnswer.data : undefined,
-    })
-  }
-
-  WizardComponent = (props: BaseResponseAreaWizardProps) => {
-    return PseudocodeInput({
-      ...props,
-      answer: this.answer,
-      handleChange: (answer: string) => {
-        props.handleChange({
-          responseType: this.responseType,
-          answer,
-        })
-      },
-    })
-  }
-}
diff --git a/src/types/Pseudocode/index.tsx b/src/types/Pseudocode/index.tsx
new file mode 100644
index 0000000..8e94469
--- /dev/null
+++ b/src/types/Pseudocode/index.tsx
@@ -0,0 +1,123 @@
+// PseudocodeResponseAreaTub.ts
+import { z } from 'zod';
+
+import {
+  BaseResponseAreaProps,
+  BaseResponseAreaWizardProps,
+} from '../base-props.type';
+import { ResponseAreaTub } from '../response-area-tub';
+
+import { PseudocodeInput } from './Pseudocode.component';
+import { StudentResponse, StudentResponseSchema } from './types/input';
+import { defaultStudentResponse } from './utils/consts';
+// import { validatePseudocode, PseudocodeFeedback, CheckPhase } from './validatePseudocode';
+
+/* ===========================================================
+ * PseudocodeResponseAreaTub
+ * =========================================================== */
+export class PseudocodeResponseAreaTub extends ResponseAreaTub {
+  public readonly responseType = 'PSEUDOCODE';
+  public readonly displayWideInput = true;
+
+  protected answerSchema = StudentResponseSchema;
+  protected answer: StudentResponse = defaultStudentResponse;
+
+  private response: StudentResponse | null = null;
+  // private previewFeedback: PseudocodeFeedback | null = null;
+  // private phase: CheckPhase = CheckPhase.Idle;
+
+  public readonly delegateFeedback = false;
+  public readonly delegateLivePreview = true;
+
+  initWithConfig = (config: any) => {
+    const parsed = this.answerSchema.safeParse(this.answer);
+    this.answer = parsed.success ? parsed.data : defaultStudentResponse;
+  };
+
+  /* -------------------- Pre-submission validation -------------------- */
+  customCheck = () => {
+    // if (this.previewFeedback) {
+    //   throw new Error('Preview validation failed');
+    // }
+    // this.previewFeedback = null;
+  };
+
+  /* -------------------- Student / read-only input -------------------- */
+  public InputComponent = (props: BaseResponseAreaProps): JSX.Element => {
+    const parsed = this.answerSchema.safeParse(props.answer);
+    const validAnswer = parsed.success ? parsed.data : defaultStudentResponse;
+
+    this.response = validAnswer;
+
+    /* ---------- Extract submitted feedback (if any) ---------- */
+    // const submittedFeedback: PseudocodeFeedback | null = (() => {
+    //   const raw = props.feedback?.feedback;
+    //   if (!raw) return null;
+
+    //   try {
+    //     const jsonPart = raw.split('<br>')[1]?.trim();
+    //     if (!jsonPart) return null;
+    //     return JSON.parse(jsonPart);
+    //   } catch {
+    //     return null;
+    //   }
+    // })();
+
+    // const effectiveFeedback = this.previewFeedback ?? submittedFeedback;
+
+    return (
+      <PseudocodeInput
+        {...props}
+        answer={validAnswer}
+        // feedback={effectiveFeedback ?? undefined}
+        isTeacherMode={false}
+        handleChange={(val: StudentResponse) => {
+          // Update preview and call handleChange for live student updates
+          console.log(val, props.answer)
+          props.handleChange(val);
+
+          // const preview = validatePseudocode(val);
+          // if (preview.errors.length > 0) {
+          //   this.previewFeedback = preview;
+          //   this.phase = CheckPhase.PreviewError;
+          // } else {
+          //   this.previewFeedback = null;
+          //   this.phase = CheckPhase.Idle;
+          // }
+        }}
+      />
+    );
+  };
+
+  /* -------------------- Wizard / teacher-editable input -------------------- */
+  public WizardComponent = (props: BaseResponseAreaWizardProps): JSX.Element => {
+    return (
+      <PseudocodeInput
+        {...props}
+        answer={this.answer}
+        // feedback={null}
+        isTeacherMode={true}
+        handleChange={(val: StudentResponse) => {
+          // Update internal answer
+          this.answer = val;
+
+          // Normalize for legacy system: no undefined, only null
+          const normalizedAnswer = {
+            pseudocode: val.pseudocode ?? '',
+            time_complexity: val.time_complexity ?? null,
+            space_complexity: val.space_complexity ?? null,
+            explanation: val.explanation ?? null,
+          };
+
+          console.log('Normalized answer:', normalizedAnswer);
+
+          // Send shallow object to backend
+          props.handleChange({
+            responseType: this.responseType,
+            answer: normalizedAnswer,
+          });
+        }}
+      />
+    );
+  };
+}
diff --git a/src/types/Pseudocode/utils/autoIndent.ts b/src/types/Pseudocode/plugins/autoIndent.ts
similarity index 94%
rename from src/types/Pseudocode/utils/autoIndent.ts
rename to src/types/Pseudocode/plugins/autoIndent.ts
index 72233d4..7bbf698 100644
--- a/src/types/Pseudocode/utils/autoIndent.ts
+++ b/src/types/Pseudocode/plugins/autoIndent.ts
@@ -12,7 +12,7 @@ export const autoIndentAfterColon = keymap.of([
       const beforeCursor = line.text.slice(0, from - line.from);
 
       // Only trigger if line ends with :
-      if (!beforeCursor.trimEnd().endsWith(':')) {
+      if (!beforeCursor.trimEnd().endsWith('DO')) {
         return false; // let default Enter behavior happen
       }
 
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/utils/highlight.ts b/src/types/Pseudocode/plugins/highlight.ts
similarity index 100%
rename from src/types/Pseudocode/utils/highlight.ts
rename to src/types/Pseudocode/plugins/highlight.ts
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/utils/pseudocode.theme.ts b/src/types/Pseudocode/plugins/pseudocode.theme.ts
similarity index 100%
rename from src/types/Pseudocode/utils/pseudocode.theme.ts
rename to src/types/Pseudocode/plugins/pseudocode.theme.ts
diff --git a/src/types/Pseudocode/types/input.ts b/src/types/Pseudocode/types/input.ts
new file mode 100644
index 0000000..e09ec49
--- /dev/null
+++ b/src/types/Pseudocode/types/input.ts
@@ -0,0 +1,202 @@
+import { z } from 'zod';
+
+/* ============================================================
+ * 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()
+    .describe('Expected time complexity in Big-O notation'),
+
+  expected_space_complexity: z
+    .string()
+    .default('O(1)')
+    .describe('Expected space complexity in Big-O notation'),
+
+  acceptable_time_alternatives: z
+    .array(z.string())
+    .default([])
+    .describe('Alternative acceptable time complexity representations'),
+
+  acceptable_space_alternatives: z
+    .array(z.string())
+    .default([])
+    .describe('Alternative acceptable space complexity representations'),
+
+  algorithm_description: z
+    .string()
+    .optional()
+    .describe('Description of the expected algorithm'),
+
+  algorithm_type: z
+    .string()
+    .optional()
+    .describe('Type of algorithm: sorting, searching, graph, etc.'),
+
+  expected_constructs: z
+    .array(z.string())
+    .default([])
+    .describe('Expected code constructs: nested_loop, recursion, etc.'),
+
+  time_complexity_weight: z
+    .number()
+    .min(0)
+    .max(1)
+    .default(0.5)
+    .describe('Weight for time complexity in scoring'),
+
+  space_complexity_weight: z
+    .number()
+    .min(0)
+    .max(1)
+    .default(0.5)
+    .describe('Weight for space complexity in scoring'),
+});
+
+export type ExpectedAnswer = z.infer<typeof ExpectedAnswerSchema>;
+
+/* ============================================================
+ * EvaluationParams
+ * ============================================================
+ */
+
+export const EvaluationParamsSchema = z.object({
+  // What to evaluate
+  analyze_pseudocode: z
+    .boolean()
+    .default(true)
+    .describe('Whether to parse and analyze the pseudocode'),
+
+  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'),
+
+  // Scoring options
+  partial_credit: z
+    .boolean()
+    .default(true)
+    .describe('Allow partial marks for partially correct answers'),
+
+  time_weight: z
+    .number()
+    .min(0)
+    .max(1)
+    .default(0.5)
+    .describe('Weight for time complexity in total score'),
+
+  space_weight: z
+    .number()
+    .min(0)
+    .max(1)
+    .default(0.5)
+    .describe('Weight for space complexity in total score'),
+
+  // Comparison options
+  complexity_equivalence: z
+    .boolean()
+    .default(true)
+    .describe('Treat equivalent complexities as equal (O(2n) == O(n))'),
+
+  case_sensitive: z
+    .boolean()
+    .default(false)
+    .describe('Case sensitive comparison (O(N) vs O(n))'),
+
+  strict_notation: z
+    .boolean()
+    .default(false)
+    .describe('Require exact Big-O notation format'),
+
+  // Feedback options
+  show_detailed_feedback: z
+    .boolean()
+    .default(true)
+    .describe('Provide detailed analysis feedback'),
+
+  show_correct_answer: z
+    .boolean()
+    .default(true)
+    .describe('Show expected answer if student is wrong'),
+
+  show_detected_complexity: z
+    .boolean()
+    .default(true)
+    .describe('Show complexity detected from pseudocode analysis'),
+
+  show_ast: z
+    .boolean()
+    .default(false)
+    .describe('Include AST in response (for debugging)'),
+
+  // Parser options
+  pseudocode_style: z
+    .enum(['auto', 'python', 'pascal', 'c'])
+    .default('auto')
+    .describe('Pseudocode style'),
+
+  strict_parsing: z
+    .boolean()
+    .default(false)
+    .describe('Fail on parse errors vs. best effort'),
+
+  // Advanced options
+  max_nesting_depth: z
+    .number()
+    .int()
+    .min(1)
+    .max(50)
+    .default(10)
+    .describe('Maximum loop nesting depth to analyze'),
+
+  timeout_seconds: z
+    .number()
+    .min(0.1)
+    .max(60)
+    .default(5.0)
+    .describe('Analysis timeout in seconds'),
+});
+
+export type EvaluationParams = z.infer<typeof EvaluationParamsSchema>;
\ 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..751e376
--- /dev/null
+++ b/src/types/Pseudocode/types/output.ts
@@ -0,0 +1,389 @@
+import { z } from 'zod';
+
+/* ============================================================
+ * 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>;
+
+/* ============================================================
+ * EvaluationResult (Main Output)
+ * ============================================================
+ */
+
+export const EvaluationResultSchema = z.object({
+  is_correct: z
+    .boolean()
+    .describe('Overall correctness of the submission'),
+
+  time_complexity_result: TimeComplexityResultSchema
+    .optional()
+    .describe('Time complexity evaluation details'),
+
+  space_complexity_result: SpaceComplexityResultSchema
+    .optional()
+    .describe('Space complexity evaluation details'),
+
+  score: z
+    .number()
+    .min(0)
+    .max(1)
+    .default(0)
+    .describe('Numerical score from 0 to 1'),
+
+  analysis: ComplexityAnalysisSchema
+    .optional()
+    .describe('Detailed complexity analysis from pseudocode'),
+
+  ast: ProgramNodeSchema
+    .optional()
+    .describe('Parsed AST (only included if show_ast is True)'),
+
+  feedback: z
+    .string()
+    .default('')
+    .describe('Overall feedback message'),
+
+  feedback_items: z
+    .array(FeedbackItemSchema)
+    .default([])
+    .describe('List of specific feedback items'),
+
+  warnings: z
+    .array(z.string())
+    .default([])
+    .describe('Non-fatal warnings during evaluation'),
+
+  errors: z
+    .array(z.string())
+    .default([])
+    .describe('Errors encountered during evaluation'),
+
+  metadata: z
+    .record(z.any())
+    .default({})
+    .describe('Additional metadata about the evaluation'),
+});
+
+export type EvaluationResult = z.infer<typeof EvaluationResultSchema>;
\ No newline at end of file
diff --git a/src/types/Pseudocode/utils/consts.ts b/src/types/Pseudocode/utils/consts.ts
new file mode 100644
index 0000000..810bfa2
--- /dev/null
+++ b/src/types/Pseudocode/utils/consts.ts
@@ -0,0 +1,9 @@
+import { StudentResponse } from "../types/input";
+
+/* -------------------- Default StudentResponse -------------------- */
+export const defaultStudentResponse: StudentResponse = {
+  pseudocode: '',
+  time_complexity: undefined,
+  space_complexity: undefined,
+  explanation: undefined,
+};
\ No newline at end of file
diff --git a/src/types/Pseudocode/utils/language.ts b/src/types/Pseudocode/utils/language.ts
deleted file mode 100644
index 4cf3952..0000000
--- a/src/types/Pseudocode/utils/language.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { StreamLanguage } from "@codemirror/language";
-
-export const pseudocodeLanguage = StreamLanguage.define({
-  token(stream) {
-    if (stream.match(/IF|THEN|ELSE|ELSEIF|ENDIF|WHILE|FOR|TO|STEP|NEXT|REPEAT|UNTIL|FUNCTION|PROCEDURE|BEGIN|END|RETURN|PRINT|INPUT/i)) {
-      return 'keyword';
-    }
-    if (stream.match(/TRUE|FALSE|NULL/i)) {
-      return 'bool';
-    }
-    if (stream.match(/-?\d+(\.\d+)?/)) {
-      return 'number';
-    }
-    if (stream.match(/(["'])(?:\\.|(?!\1).)*?\1/)) {
-      return 'string';
-    }
-    if (stream.match(/\/\/.*/)) {
-      return 'comment';
-    }
-
-    stream.next();
-    return null;
-  },
-});
\ 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..a53ba4d
--- /dev/null
+++ b/src/types/Pseudocode/utils/styles.ts
@@ -0,0 +1,49 @@
+import { makeStyles } from "@styles";
+
+/* -------------------- Styles -------------------- */
+export const usePseudocodeInputStyles = makeStyles()((theme) => ({
+  root: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+  },
+  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',
+  },
+  teacherSlot: {
+    minHeight: 0,
+  },
+}));
diff --git a/src/types/index.ts b/src/types/index.ts
index c6b7330..c3349bd 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -7,7 +7,7 @@ import { MatrixResponseAreaTub } from './Matrix'
 import { MultipleChoiceResponseAreaTub } from './MultipleChoice'
 import { NumberResponseAreaTub } from './NumberInput'
 import { NumericUnitsResponseAreaTub } from './NumericUnits'
-import { PseudocodeResponseAreaTub } from './Pseudocode'
+import { PseudocodeResponseAreaTub } from './Pseudocode/index.tsx'
 import { ResponseAreaTub } from './response-area-tub'
 import { TableResponseAreaTub } from './Table'
 import { TextResponseAreaTub } from './TextInput'
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"]
 }

From c9f34167b9a09c98ea57326620d11e0893a228fd Mon Sep 17 00:00:00 2001
From: everythingfades <raymondguhonglei@163.com>
Date: Thu, 5 Feb 2026 01:20:39 +0000
Subject: [PATCH 3/6] feat: checkpointing before doing fastapi for the
 checkpoint

---
 src/types/Pseudocode/Pseudocode.component.tsx |  17 +-
 .../Pseudocode/PseudocodeWizard.component.tsx |  70 +++++
 .../components/EvaluationParamsPanel.tsx      | 118 +++++++
 src/types/Pseudocode/components/utils.tsx     |  76 +++++
 src/types/Pseudocode/index.tsx                | 151 ++++-----
 src/types/Pseudocode/types/api.ts             |  16 +
 src/types/Pseudocode/types/ast.ts             | 290 ++++++++++++++++++
 src/types/Pseudocode/types/input.ts           | 185 +++++------
 src/types/Pseudocode/utils/consts.ts          |  44 ++-
 src/types/Pseudocode/utils/styles.ts          |  45 ++-
 10 files changed, 818 insertions(+), 194 deletions(-)
 create mode 100644 src/types/Pseudocode/PseudocodeWizard.component.tsx
 create mode 100644 src/types/Pseudocode/components/EvaluationParamsPanel.tsx
 create mode 100644 src/types/Pseudocode/components/utils.tsx
 create mode 100644 src/types/Pseudocode/types/api.ts
 create mode 100644 src/types/Pseudocode/types/ast.ts

diff --git a/src/types/Pseudocode/Pseudocode.component.tsx b/src/types/Pseudocode/Pseudocode.component.tsx
index 3bae9b3..b98f5f1 100644
--- a/src/types/Pseudocode/Pseudocode.component.tsx
+++ b/src/types/Pseudocode/Pseudocode.component.tsx
@@ -1,4 +1,3 @@
-// PseudocodeInput.tsx
 import { foldGutter, foldService, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
 import { EditorState } from '@codemirror/state';
 import { placeholder } from '@codemirror/view';
@@ -13,26 +12,20 @@ import { pseudocodeHighlightStyle } from './plugins/highlight';
 import { pseudocodeLanguage } from './plugins/language';
 import { pseudocodeTheme } from './plugins/pseudocode.theme';
 import { StudentResponse } from './types/input';
-import { usePseudocodeInputStyles } from './utils/styles';
+import { defaultStudentResponse } from './utils/consts';
+import { usePseudocodeStyles } from './utils/styles';
 
 type PseudocodeInputProps = Omit<BaseResponseAreaProps, 'handleChange' | 'answer'> & {
   handleChange: (val: StudentResponse) => void;
   answer?: StudentResponse;
-  isTeacherMode?: boolean;
 };
 
 export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({
   handleChange,
   answer,
-  isTeacherMode = false,
 }) => {
-  const { classes } = usePseudocodeInputStyles();
-  const [internalAnswer, setInternalAnswer] = useState<StudentResponse>(answer ?? {
-    pseudocode: '',
-    time_complexity: null,
-    space_complexity: null,
-    explanation: null,
-  });
+  const { classes } = usePseudocodeStyles();
+  const [internalAnswer, setInternalAnswer] = useState<StudentResponse>(answer ?? defaultStudentResponse);
 
   const editorRef = useRef<HTMLDivElement | null>(null);
   const viewRef = useRef<EditorView | null>(null);
@@ -119,8 +112,6 @@ export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({
         onChange={(e) => setInternalAnswer((prev) => ({ ...prev, explanation: e.target.value }))}
         onBlur={reportChange}
       />
-
-      {isTeacherMode && <div className={classes.teacherSlot} />}
     </div>
   );
 };
\ No newline at end of file
diff --git a/src/types/Pseudocode/PseudocodeWizard.component.tsx b/src/types/Pseudocode/PseudocodeWizard.component.tsx
new file mode 100644
index 0000000..35a43cc
--- /dev/null
+++ b/src/types/Pseudocode/PseudocodeWizard.component.tsx
@@ -0,0 +1,70 @@
+import { useState } from "react";
+
+import { EvaluationParamsPanel } from "./components/EvaluationParamsPanel";
+import { ExpectedAnswer } from "./types/input";
+import { usePseudocodeStyles } from "./utils/styles";
+
+type WizardConfigProps = {
+  answer: ExpectedAnswer;
+  handleChange: (val: ExpectedAnswer) => void;
+};
+
+export const PseudocodeWizard: React.FC<WizardConfigProps> = ({
+  answer,
+  handleChange,
+}) => {
+  const { classes } = usePseudocodeStyles();
+  const [open, setOpen] = useState(true);
+
+  const update = <K extends keyof ExpectedAnswer>(
+    key: K,
+    val: ExpectedAnswer[K],
+  ) => {
+    handleChange({ ...answer, [key]: val });
+  };
+
+  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="Expected Time Complexity"
+            value={answer.expected_time_complexity}
+            onChange={(e) =>
+              update('expected_time_complexity', e.target.value)
+            }
+          />
+          <p>Expected Space Complexity</p>
+          <input
+            className={classes.field}
+            placeholder="Expected Space Complexity"
+            value={answer.expected_space_complexity}
+            onChange={(e) =>
+              update('expected_space_complexity', e.target.value)
+            }
+          />
+        </fieldset>
+
+        {/* ---- Evaluation Params ---- */}
+        <EvaluationParamsPanel
+          collapsed={open}
+          setCollapsed={setOpen}
+          value={answer.evaluation_params}
+          onChange={(p) => update('evaluation_params', 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..b4a6943
--- /dev/null
+++ b/src/types/Pseudocode/components/EvaluationParamsPanel.tsx
@@ -0,0 +1,118 @@
+import React from 'react'
+
+import { EvaluationParams } from '../types/input'
+import { usePseudocodeStyles } from '../utils/styles'
+
+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 } = usePseudocodeStyles()
+
+  const update = <K extends keyof EvaluationParams>(
+    key: K,
+    val: EvaluationParams[K],
+  ) => {
+    onChange({
+      ...value,
+      [key]: val,
+    })
+  }
+
+  return (
+    <div className={classes.evalParams}>
+      <button
+        type="button"
+        className={classes.evalParamsToggle}
+        onClick={() => setCollapsed(!collapsed)}
+      >
+        {collapsed ? '▶ Evaluation Parameters' : '▼ Evaluation Parameters'}
+      </button>
+
+      {!collapsed && (
+        <div className={classes.evalParamsContent}>
+          <fieldset className={classes.evalParamsSection}>
+            <legend>Evaluation</legend>
+
+            <label className={classes.evalParamsRow}>
+              <input
+                type="checkbox"
+                checked={value.analyze_pseudocode}
+                onChange={(e) =>
+                  update('analyze_pseudocode', e.target.checked)
+                }
+              />
+              Analyze pseudocode
+            </label>
+
+            <label className={classes.evalParamsRow}>
+              <input
+                type="checkbox"
+                checked={value.require_time_complexity}
+                onChange={(e) =>
+                  update('require_time_complexity', e.target.checked)
+                }
+              />
+              Require time complexity
+            </label>
+
+            <label className={classes.evalParamsRow}>
+              <input
+                type="checkbox"
+                checked={value.require_space_complexity}
+                onChange={(e) =>
+                  update('require_space_complexity', e.target.checked)
+                }
+              />
+              Require space complexity
+            </label>
+          </fieldset>
+
+          <fieldset className={classes.evalParamsSection}>
+            <legend>Scoring</legend>
+
+            <label className={classes.evalParamsRow}>
+              <input
+                type="checkbox"
+                checked={value.partial_credit}
+                onChange={(e) =>
+                  update('partial_credit', e.target.checked)
+                }
+              />
+              Allow partial credit
+            </label>
+          </fieldset>
+
+          <fieldset className={classes.evalParamsSection}>
+            <legend>Parser</legend>
+
+            <label className={classes.evalParamsRow}>
+              Style
+              <select
+                className={classes.field}
+                value={value.pseudocode_style}
+                onChange={(e) =>
+                  update('pseudocode_style', e.target.value as any)
+                }
+              >
+                <option value="auto">Auto</option>
+                <option value="python">Python</option>
+                <option value="pascal">Pascal</option>
+                <option value="c">C</option>
+              </select>
+            </label>
+          </fieldset>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/types/Pseudocode/components/utils.tsx b/src/types/Pseudocode/components/utils.tsx
new file mode 100644
index 0000000..28f6430
--- /dev/null
+++ b/src/types/Pseudocode/components/utils.tsx
@@ -0,0 +1,76 @@
+type SectionProps = {
+  title: string
+  children: React.ReactNode
+}
+
+export const Section = ({ title, children }: SectionProps) => (
+  <fieldset className="evalParamsSection">
+    <legend>{title}</legend>
+    {children}
+  </fieldset>
+)
+
+export const Checkbox = ({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string
+  checked: boolean
+  onChange: (v: boolean) => void
+}) => (
+  <label className="eval-params__row">
+    <input
+      type="checkbox"
+      checked={checked}
+      onChange={(e) => onChange(e.target.checked)}
+    />
+    {label}
+  </label>
+)
+
+export const Slider = ({
+  label,
+  value,
+  onChange,
+}: {
+  label: string
+  value: number
+  onChange: (v: number) => void
+}) => (
+  <label className="eval-params__row">
+    {label}
+    <input
+      type="range"
+      min={0}
+      max={1}
+      step={0.05}
+      value={value}
+      onChange={(e) => onChange(Number(e.target.value))}
+    />
+    <span>{value.toFixed(2)}</span>
+  </label>
+)
+
+export const Select = ({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string
+  value: string
+  options: string[]
+  onChange: (v: any) => void
+}) => (
+  <label className="eval-params__row">
+    {label}
+    <select value={value} onChange={(e) => onChange(e.target.value)}>
+      {options.map((o) => (
+        <option key={o} value={o}>
+          {o}
+        </option>
+      ))}
+    </select>
+  </label>
+)
diff --git a/src/types/Pseudocode/index.tsx b/src/types/Pseudocode/index.tsx
index 8e94469..2b9d58a 100644
--- a/src/types/Pseudocode/index.tsx
+++ b/src/types/Pseudocode/index.tsx
@@ -1,123 +1,104 @@
 // PseudocodeResponseAreaTub.ts
-import { z } from 'zod';
-
 import {
   BaseResponseAreaProps,
   BaseResponseAreaWizardProps,
-} from '../base-props.type';
-import { ResponseAreaTub } from '../response-area-tub';
+} from '../base-props.type'
+import { ResponseAreaTub } from '../response-area-tub'
 
-import { PseudocodeInput } from './Pseudocode.component';
-import { StudentResponse, StudentResponseSchema } from './types/input';
-import { defaultStudentResponse } from './utils/consts';
-// import { validatePseudocode, PseudocodeFeedback, CheckPhase } from './validatePseudocode';
+import { PseudocodeInput } from './Pseudocode.component'
+import { PseudocodeWizard } from './PseudocodeWizard.component'
+import {
+  StudentResponse,
+  StudentResponseSchema,
+  ExpectedAnswer,
+  ExpectedAnswerSchema,
+} from './types/input'
+import { defaultExpectedAnswer, defaultStudentResponse } from './utils/consts'
 
 /* ===========================================================
  * PseudocodeResponseAreaTub
  * =========================================================== */
+
 export class PseudocodeResponseAreaTub extends ResponseAreaTub {
-  public readonly responseType = 'PSEUDOCODE';
-  public readonly displayWideInput = true;
+  public readonly responseType = 'PSEUDOCODE'
+  public readonly displayWideInput = true
 
-  protected answerSchema = StudentResponseSchema;
-  protected answer: StudentResponse = defaultStudentResponse;
+  /* ---------- STUDENT ---------- */
 
-  private response: StudentResponse | null = null;
-  // private previewFeedback: PseudocodeFeedback | null = null;
-  // private phase: CheckPhase = CheckPhase.Idle;
+  protected answerSchema = ExpectedAnswerSchema//StudentResponseSchema
+  private response: StudentResponse | null = null
 
-  public readonly delegateFeedback = false;
-  public readonly delegateLivePreview = true;
+  /* ---------- TEACHER ---------- */
 
-  initWithConfig = (config: any) => {
-    const parsed = this.answerSchema.safeParse(this.answer);
-    this.answer = parsed.success ? parsed.data : defaultStudentResponse;
-  };
+  protected answer: ExpectedAnswer = defaultExpectedAnswer
 
-  /* -------------------- Pre-submission validation -------------------- */
-  customCheck = () => {
-    // if (this.previewFeedback) {
-    //   throw new Error('Preview validation failed');
-    // }
-    // this.previewFeedback = null;
-  };
+  public readonly delegateFeedback = false
+  public readonly delegateLivePreview = true
 
-  /* -------------------- Student / read-only input -------------------- */
-  public InputComponent = (props: BaseResponseAreaProps): JSX.Element => {
-    const parsed = this.answerSchema.safeParse(props.answer);
-    const validAnswer = parsed.success ? parsed.data : defaultStudentResponse;
+  /* -------------------- Init -------------------- */
+
+  initWithConfig = (config: any) => {
+    const parsed = ExpectedAnswerSchema.safeParse(config?.answer)
+    this.answer = parsed.success
+      ? parsed.data
+      : defaultExpectedAnswer
+  }
 
-    this.response = validAnswer;
+  /* -------------------- Validation -------------------- */
 
-    /* ---------- Extract submitted feedback (if any) ---------- */
-    // const submittedFeedback: PseudocodeFeedback | null = (() => {
-    //   const raw = props.feedback?.feedback;
-    //   if (!raw) return null;
+  customCheck = () => {
+    // reserved for later (AST / static analysis)
+  }
+
+  /* =====================================================
+   * Student Input
+   * ===================================================== */
 
-    //   try {
-    //     const jsonPart = raw.split('<br>')[1]?.trim();
-    //     if (!jsonPart) return null;
-    //     return JSON.parse(jsonPart);
-    //   } catch {
-    //     return null;
-    //   }
-    // })();
+  public InputComponent = (props: BaseResponseAreaProps): JSX.Element => {
+    const parsed = StudentResponseSchema.safeParse(props.answer)
+    const validAnswer = parsed.success
+      ? parsed.data
+      : defaultStudentResponse
 
-    // const effectiveFeedback = this.previewFeedback ?? submittedFeedback;
+    this.response = validAnswer
 
     return (
       <PseudocodeInput
         {...props}
         answer={validAnswer}
-        // feedback={effectiveFeedback ?? undefined}
-        isTeacherMode={false}
         handleChange={(val: StudentResponse) => {
-          // Update preview and call handleChange for live student updates
-          console.log(val, props.answer)
-          props.handleChange(val);
-
-          // const preview = validatePseudocode(val);
-          // if (preview.errors.length > 0) {
-          //   this.previewFeedback = preview;
-          //   this.phase = CheckPhase.PreviewError;
-          // } else {
-          //   this.previewFeedback = null;
-          //   this.phase = CheckPhase.Idle;
-          // }
+          this.response = val
+          console.log("response", this.response)
+          props.handleChange(val)
         }}
       />
-    );
-  };
+    )
+  }
+
+  /* =====================================================
+   * Wizard / Teacher Input
+   * ===================================================== */
 
-  /* -------------------- Wizard / teacher-editable input -------------------- */
-  public WizardComponent = (props: BaseResponseAreaWizardProps): JSX.Element => {
+  public WizardComponent = (
+    props: BaseResponseAreaWizardProps,
+  ): JSX.Element => {
     return (
-      <PseudocodeInput
-        {...props}
+      <>
+      <p>Wizard</p>
+      <PseudocodeWizard
         answer={this.answer}
-        // feedback={null}
-        isTeacherMode={true}
-        handleChange={(val: StudentResponse) => {
-          // Update internal answer
-          this.answer = val;
-
-          // Normalize for legacy system: no undefined, only null
-          const normalizedAnswer = {
-            pseudocode: val.pseudocode ?? '',
-            time_complexity: val.time_complexity ?? null,
-            space_complexity: val.space_complexity ?? null,
-            explanation: val.explanation ?? null,
-          };
+        handleChange={(val: ExpectedAnswer) => {
+          this.answer = val
 
-          console.log('Normalized answer:', normalizedAnswer);
+          console.log("answer", this.answer)
 
-          // Send shallow object to backend
           props.handleChange({
             responseType: this.responseType,
-            answer: normalizedAnswer,
-          });
+            answer: val,
+          })
         }}
       />
-    );
-  };
+      </>
+    )
+  }
 }
diff --git a/src/types/Pseudocode/types/api.ts b/src/types/Pseudocode/types/api.ts
new file mode 100644
index 0000000..a9043f7
--- /dev/null
+++ b/src/types/Pseudocode/types/api.ts
@@ -0,0 +1,16 @@
+import { ExpectedAnswer, StudentResponse } from "./input";
+
+export const callAPI = async(response: StudentResponse, answer: ExpectedAnswer, params: any) => {
+  const data = await fetch("http://localhost:8000/evaluate", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      response,
+      answer,
+      params
+    }),
+  })
+  return data
+}
\ No newline at end of file
diff --git a/src/types/Pseudocode/types/ast.ts b/src/types/Pseudocode/types/ast.ts
new file mode 100644
index 0000000..b6e4da5
--- /dev/null
+++ b/src/types/Pseudocode/types/ast.ts
@@ -0,0 +1,290 @@
+import { z } from "zod";
+
+/* =======================
+   ENUMS
+======================= */
+
+export const NodeType = z.enum([
+  "program",
+  "function",
+  "block",
+  "loop",
+  "conditional",
+  "assignment",
+  "return",
+  "function_call",
+  "recursive_call",
+  "variable",
+  "literal",
+  "binary_op",
+  "unary_op",
+  "array_access",
+  "expression",
+]);
+export type NodeType = z.infer<typeof NodeType>;
+
+export const LoopType = z.enum([
+  "for",
+  "for_each",
+  "while",
+  "do_while",
+  "repeat_until",
+  "unknown",
+]);
+export type LoopType = z.infer<typeof LoopType>;
+
+export const OperatorType = z.enum([
+  "+",
+  "-",
+  "*",
+  "/",
+  "%",
+  "^",
+  "//",
+  "==",
+  "!=",
+  "<",
+  "<=",
+  ">",
+  ">=",
+  "and",
+  "or",
+  "not",
+  "=",
+  "+=",
+  "-=",
+  "*=",
+  "/=",
+]);
+export type OperatorType = z.infer<typeof OperatorType>;
+
+/* =======================
+   SOURCE LOCATION
+======================= */
+
+export const SourceLocationSchema = z.object({
+  line: z.number(),
+  column: z.number(),
+  end_line: z.number().optional(),
+  end_column: z.number().optional(),
+});
+export type SourceLocation = z.infer<typeof SourceLocationSchema>;
+
+/* =======================
+   BASE AST NODE
+======================= */
+
+export const ASTNodeBaseSchema = z.object({
+  node_type: NodeType,
+  location: SourceLocationSchema.optional(),
+  metadata: z.record(z.any()).default({}),
+}).passthrough();
+
+/* =======================
+   EXPRESSIONS
+======================= */
+
+export const ExpressionNodeSchema = ASTNodeBaseSchema.extend({
+  node_type: z.literal("expression"),
+});
+export type ExpressionNode = z.infer<typeof ExpressionNodeSchema>;
+
+export const VariableNodeSchema = ExpressionNodeSchema.extend({
+  node_type: z.literal("variable"),
+  name: z.string(),
+});
+export type VariableNode = z.infer<typeof VariableNodeSchema>;
+
+export const LiteralNodeSchema = ExpressionNodeSchema.extend({
+  node_type: z.literal("literal"),
+  value: z.any().optional(),
+  literal_type: z.string().default("unknown"),
+});
+export type LiteralNode = z.infer<typeof LiteralNodeSchema>;
+
+export const BinaryOpNodeSchema: z.ZodType<any> = z.lazy(() =>
+  ExpressionNodeSchema.extend({
+    node_type: z.literal("binary_op"),
+    operator: OperatorType,
+    left: ExpressionNodeUnion.optional(),
+    right: ExpressionNodeUnion.optional(),
+  })
+);
+export type BinaryOpNode = z.infer<typeof BinaryOpNodeSchema>;
+
+export const UnaryOpNodeSchema: z.ZodType<any> = z.lazy(() =>
+  ExpressionNodeSchema.extend({
+    node_type: z.literal("unary_op"),
+    operator: OperatorType,
+    operand: ExpressionNodeUnion.optional(),
+  })
+);
+export type UnaryOpNode = z.infer<typeof UnaryOpNodeSchema>;
+
+export const ArrayAccessNodeSchema: z.ZodType<any> = z.lazy(() =>
+  ExpressionNodeSchema.extend({
+    node_type: z.literal("array_access"),
+    array: ExpressionNodeUnion.optional(),
+    index: ExpressionNodeUnion.optional(),
+  })
+);
+export type ArrayAccessNode = z.infer<typeof ArrayAccessNodeSchema>;
+
+/* =======================
+   FUNCTION CALLS
+======================= */
+
+export const FunctionCallNodeSchema: z.ZodType<any> = z.lazy(() =>
+  ASTNodeBaseSchema.extend({
+    node_type: z.literal("function_call"),
+    function_name: z.string(),
+    arguments: z.array(ExpressionNodeUnion).default([]),
+    is_recursive: z.boolean().default(false),
+  })
+);
+export type FunctionCallNode = z.infer<typeof FunctionCallNodeSchema>;
+
+export const RecursiveCallNodeSchema: z.ZodType<any> = z.lazy(() =>
+  z.object({
+    node_type: z.literal("recursive_call"),
+    function_name: z.string(),
+    arguments: z.array(ExpressionNodeUnion).default([]),
+    is_recursive: z.boolean().default(false),
+
+    reduction_pattern: z.string().optional(),
+    branching_factor: z.number().default(1),
+  }).passthrough()
+);
+
+export type RecursiveCallNode = z.infer<typeof RecursiveCallNodeSchema>;
+
+
+/* =======================
+   STATEMENTS
+======================= */
+
+export const AssignmentNodeSchema: z.ZodType<any> = z.lazy(() =>
+  ASTNodeBaseSchema.extend({
+    node_type: z.literal("assignment"),
+    target: z.union([VariableNodeSchema, ArrayAccessNodeSchema]).optional(),
+    value: ExpressionNodeUnion.optional(),
+    operator: OperatorType.default("="),
+  })
+);
+export type AssignmentNode = z.infer<typeof AssignmentNodeSchema>;
+
+export const ReturnNodeSchema: z.ZodType<any> = z.lazy(() =>
+  ASTNodeBaseSchema.extend({
+    node_type: z.literal("return"),
+    value: ExpressionNodeUnion.optional(),
+  })
+);
+export type ReturnNode = z.infer<typeof ReturnNodeSchema>;
+
+export const BlockNodeSchema: z.ZodType<any> = z.lazy(() =>
+  ASTNodeBaseSchema.extend({
+    node_type: z.literal("block"),
+    statements: z.array(ASTNodeUnion).default([]),
+  })
+);
+export type BlockNode = z.infer<typeof BlockNodeSchema>;
+
+/* =======================
+   LOOPS
+======================= */
+
+export const LoopNodeSchema: z.ZodType<any> = z.lazy(() =>
+  ASTNodeBaseSchema.extend({
+    node_type: z.literal("loop"),
+    loop_type: LoopType.default("for"),
+
+    iterator: VariableNodeSchema.optional(),
+    start: ExpressionNodeUnion.optional(),
+    end: ExpressionNodeUnion.optional(),
+    step: ExpressionNodeUnion.optional(),
+
+    collection: ExpressionNodeUnion.optional(),
+    condition: ExpressionNodeUnion.optional(),
+
+    body: BlockNodeSchema.optional(),
+
+    estimated_iterations: z.string().optional(),
+    nesting_level: z.number().default(0),
+  })
+);
+export type LoopNode = z.infer<typeof LoopNodeSchema>;
+
+/* =======================
+   CONDITIONALS
+======================= */
+
+export const ConditionalNodeSchema: z.ZodType<any> = z.lazy(() =>
+  ASTNodeBaseSchema.extend({
+    node_type: z.literal("conditional"),
+    condition: ExpressionNodeUnion.optional(),
+    then_branch: BlockNodeSchema.optional(),
+    else_branch: BlockNodeSchema.optional(),
+    elif_branches: z.array(z.lazy(() => ConditionalNodeSchema)).default([]),
+  })
+);
+export type ConditionalNode = z.infer<typeof ConditionalNodeSchema>;
+
+/* =======================
+   FUNCTIONS
+======================= */
+
+export const FunctionNodeSchema: z.ZodType<any> = z.lazy(() =>
+  ASTNodeBaseSchema.extend({
+    node_type: z.literal("function"),
+    name: z.string(),
+    parameters: z.array(VariableNodeSchema).default([]),
+    body: BlockNodeSchema.optional(),
+    return_type: z.string().optional(),
+    is_recursive: z.boolean().default(false),
+  })
+);
+export type FunctionNode = z.infer<typeof FunctionNodeSchema>;
+
+/* =======================
+   PROGRAM ROOT
+======================= */
+
+export const ProgramNodeSchema = ASTNodeBaseSchema.extend({
+  node_type: z.literal("program"),
+  functions: z.array(FunctionNodeSchema).default([]),
+  global_statements: BlockNodeSchema.optional(),
+});
+export type ProgramNode = z.infer<typeof ProgramNodeSchema>;
+
+/* =======================
+   UNIONS
+======================= */
+
+export const ExpressionNodeUnion = z.lazy(() =>
+  z.union([
+    VariableNodeSchema,
+    LiteralNodeSchema,
+    BinaryOpNodeSchema,
+    UnaryOpNodeSchema,
+    ArrayAccessNodeSchema,
+  ])
+);
+
+export const ASTNodeUnion: z.ZodType<any> = z.lazy(() =>
+  z.union([
+    ProgramNodeSchema,
+    FunctionNodeSchema,
+    BlockNodeSchema,
+    LoopNodeSchema,
+    ConditionalNodeSchema,
+    AssignmentNodeSchema,
+    ReturnNodeSchema,
+    FunctionCallNodeSchema,
+    RecursiveCallNodeSchema,
+    VariableNodeSchema,
+    LiteralNodeSchema,
+    BinaryOpNodeSchema,
+    UnaryOpNodeSchema,
+    ArrayAccessNodeSchema,
+  ])
+);
diff --git a/src/types/Pseudocode/types/input.ts b/src/types/Pseudocode/types/input.ts
index e09ec49..85a85f2 100644
--- a/src/types/Pseudocode/types/input.ts
+++ b/src/types/Pseudocode/types/input.ts
@@ -1,95 +1,5 @@
 import { z } from 'zod';
 
-/* ============================================================
- * 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()
-    .describe('Expected time complexity in Big-O notation'),
-
-  expected_space_complexity: z
-    .string()
-    .default('O(1)')
-    .describe('Expected space complexity in Big-O notation'),
-
-  acceptable_time_alternatives: z
-    .array(z.string())
-    .default([])
-    .describe('Alternative acceptable time complexity representations'),
-
-  acceptable_space_alternatives: z
-    .array(z.string())
-    .default([])
-    .describe('Alternative acceptable space complexity representations'),
-
-  algorithm_description: z
-    .string()
-    .optional()
-    .describe('Description of the expected algorithm'),
-
-  algorithm_type: z
-    .string()
-    .optional()
-    .describe('Type of algorithm: sorting, searching, graph, etc.'),
-
-  expected_constructs: z
-    .array(z.string())
-    .default([])
-    .describe('Expected code constructs: nested_loop, recursion, etc.'),
-
-  time_complexity_weight: z
-    .number()
-    .min(0)
-    .max(1)
-    .default(0.5)
-    .describe('Weight for time complexity in scoring'),
-
-  space_complexity_weight: z
-    .number()
-    .min(0)
-    .max(1)
-    .default(0.5)
-    .describe('Weight for space complexity in scoring'),
-});
-
 export type ExpectedAnswer = z.infer<typeof ExpectedAnswerSchema>;
 
 /* ============================================================
@@ -199,4 +109,97 @@ export const EvaluationParamsSchema = z.object({
     .describe('Analysis timeout in seconds'),
 });
 
-export type EvaluationParams = z.infer<typeof EvaluationParamsSchema>;
\ No newline at end of file
+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'),
+
+  acceptable_time_alternatives: z
+    .array(z.string())
+    .default([])
+    .describe('Alternative acceptable time complexity representations'),
+
+  acceptable_space_alternatives: z
+    .array(z.string())
+    .default([])
+    .describe('Alternative acceptable space complexity representations'),
+
+  algorithm_description: z
+    .string()
+    .optional()
+    .describe('Description of the expected algorithm'),
+
+  algorithm_type: z
+    .string()
+    .optional()
+    .describe('Type of algorithm: sorting, searching, graph, etc.'),
+
+  expected_constructs: z
+    .array(z.string())
+    .default([])
+    .describe('Expected code constructs: nested_loop, recursion, etc.'),
+
+  time_complexity_weight: z
+    .number()
+    .min(0)
+    .max(1)
+    .default(0.5)
+    .describe('Weight for time complexity in scoring'),
+
+  space_complexity_weight: z
+    .number()
+    .min(0)
+    .max(1)
+    .default(0.5)
+    .describe('Weight for space complexity in scoring'),
+  // 🔑 Teacher-only
+  evaluation_params: EvaluationParamsSchema.default({}),
+});
\ No newline at end of file
diff --git a/src/types/Pseudocode/utils/consts.ts b/src/types/Pseudocode/utils/consts.ts
index 810bfa2..75ca6c6 100644
--- a/src/types/Pseudocode/utils/consts.ts
+++ b/src/types/Pseudocode/utils/consts.ts
@@ -1,4 +1,4 @@
-import { StudentResponse } from "../types/input";
+import { ExpectedAnswer, StudentResponse } from "../types/input";
 
 /* -------------------- Default StudentResponse -------------------- */
 export const defaultStudentResponse: StudentResponse = {
@@ -6,4 +6,44 @@ export const defaultStudentResponse: StudentResponse = {
   time_complexity: undefined,
   space_complexity: undefined,
   explanation: undefined,
-};
\ No newline at end of file
+};
+
+export const defaultExpectedAnswer: ExpectedAnswer = {
+  expected_time_complexity: '',
+  expected_space_complexity: 'O(1)',
+
+  acceptable_time_alternatives: [],
+  acceptable_space_alternatives: [],
+
+  algorithm_description: '',
+  algorithm_type: '',
+  expected_constructs: [],
+
+  time_complexity_weight: 0.5,
+  space_complexity_weight: 0.5,
+
+  evaluation_params: {
+    analyze_pseudocode: true,
+    require_time_complexity: true,
+    require_space_complexity: true,
+
+    partial_credit: true,
+    time_weight: 0.5,
+    space_weight: 0.5,
+
+    complexity_equivalence: true,
+    case_sensitive: false,
+    strict_notation: false,
+
+    show_detailed_feedback: true,
+    show_correct_answer: true,
+    show_detected_complexity: true,
+    show_ast: false,
+
+    pseudocode_style: 'auto',
+    strict_parsing: false,
+
+    max_nesting_depth: 10,
+    timeout_seconds: 5,
+  },
+};
diff --git a/src/types/Pseudocode/utils/styles.ts b/src/types/Pseudocode/utils/styles.ts
index a53ba4d..750e74b 100644
--- a/src/types/Pseudocode/utils/styles.ts
+++ b/src/types/Pseudocode/utils/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from "@styles";
 
 /* -------------------- Styles -------------------- */
-export const usePseudocodeInputStyles = makeStyles()((theme) => ({
+export const usePseudocodeStyles = makeStyles()((theme) => ({
   root: {
     width: '100%',
     display: 'flex',
@@ -43,7 +43,46 @@ export const usePseudocodeInputStyles = makeStyles()((theme) => ({
     minHeight: 80,
     resize: 'vertical',
   },
-  teacherSlot: {
-    minHeight: 0,
+  // eval 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,
+  }
 }));

From 91eac9ff691ace6c87dfcb268c67c45b0fabc6ca Mon Sep 17 00:00:00 2001
From: everythingfades <raymondguhonglei@163.com>
Date: Sat, 21 Feb 2026 01:42:12 +0000
Subject: [PATCH 4/6] fix: better UI and test cases

---
 src/sandbox-component.tsx                     |   2 +-
 src/types/Matrix/index.ts                     | 188 ++++-------
 src/types/Pseudocode/Pseudocode.component.tsx | 112 ++++---
 .../Pseudocode/PseudocodeWizard.component.tsx | 305 ++++++++++++++++--
 .../components/EvaluationParamsPanel.tsx      | 211 ++++++------
 .../components/PseudocodeFeedbackPanel.tsx    | 226 +++++++++++++
 src/types/Pseudocode/index.tsx                |  83 +++--
 src/types/Pseudocode/types/api.ts             |  16 -
 src/types/Pseudocode/types/ast.ts             | 290 -----------------
 src/types/Pseudocode/types/input.ts           | 132 +-------
 src/types/Pseudocode/types/output.ts          |  80 +++--
 src/types/Pseudocode/types/tests.ts           |  77 +++++
 src/types/Pseudocode/types/utils.ts           |  37 +++
 src/types/Pseudocode/utils/consts.ts          |  35 +-
 src/types/Pseudocode/utils/styles.ts          | 164 +++++++++-
 src/types/index.ts                            |   2 +-
 16 files changed, 1131 insertions(+), 829 deletions(-)
 create mode 100644 src/types/Pseudocode/components/PseudocodeFeedbackPanel.tsx
 delete mode 100644 src/types/Pseudocode/types/api.ts
 delete mode 100644 src/types/Pseudocode/types/ast.ts
 create mode 100644 src/types/Pseudocode/types/tests.ts
 create mode 100644 src/types/Pseudocode/types/utils.ts

diff --git a/src/sandbox-component.tsx b/src/sandbox-component.tsx
index 63a5052..f5ca886 100644
--- a/src/sandbox-component.tsx
+++ b/src/sandbox-component.tsx
@@ -1,6 +1,6 @@
 import { ThemeProvider } from '@styles/minimal/theme-provider'
 
-import { PseudocodeResponseAreaTub } from './types/Pseudocode/index.tsx'
+import { PseudocodeResponseAreaTub } from './types/Pseudocode'
 
 function ResponseAreaInputWrapper({ children }: { children: React.ReactNode }) {
   return <ThemeProvider>{children}</ThemeProvider>
diff --git a/src/types/Matrix/index.ts b/src/types/Matrix/index.ts
index 196dd2f..6dae48e 100644
--- a/src/types/Matrix/index.ts
+++ b/src/types/Matrix/index.ts
@@ -1,152 +1,92 @@
-import { z } from 'zod';
+import {
+  DEFAULT_COLS,
+  DEFAULT_ROWS,
+} from '@modules/shared/schemas/question-form.schema'
+import _ from 'lodash'
+import { z } from 'zod'
 
 import {
   BaseResponseAreaProps,
   BaseResponseAreaWizardProps,
-} from '../base-props.type';
-import { PseudocodeInput } from '../Pseudocode/Pseudocode.component';
-import { EvaluationResult, EvaluationResultSchema } from '../Pseudocode/types/output';
-import { ResponseAreaTub } from '../response-area-tub';
-
-/* ============================================================
- * Helpers
- * ============================================================
- */
-
-/**
- * Safely parse + validate EvaluationResult from a JSON string.
- * Returns undefined if anything fails.
- */
-function safeParseEvaluationResult(
-  value: unknown
-): EvaluationResult | undefined {
-  if (typeof value !== 'string') return undefined;
-
-  try {
-    const json = JSON.parse(value);
-    const parsed = EvaluationResultSchema.safeParse(json);
-    return parsed.success ? parsed.data : undefined;
-  } catch {
-    return undefined;
-  }
-}
-
-/**
- * Minimal safe default.
- * This ensures legacy systems always receive valid JSON.
- */
-function createDefaultEvaluationResult(): EvaluationResult {
-  return {
-    is_correct: false,
-    score: 0,
-    feedback: '',
-    feedback_items: [],
-    warnings: [],
-    errors: [],
-    metadata: {},
-  };
+} from '../base-props.type'
+import { ResponseAreaTub } from '../response-area-tub'
+
+import { padMatrixFromRowsAndCols } from './helpers'
+import { Matrix } from './Matrix.component'
+import { matrixConfigSchema, matrixResponseAnswerSchema } from './Matrix.schema'
+import { MatrixWizard } from './MatrixWizard.component'
+
+export const defaultMatrixAnswer = {
+  rows: DEFAULT_ROWS,
+  cols: DEFAULT_COLS,
+  type: 'MATRIX' as const,
+  answers: padMatrixFromRowsAndCols({
+    rows: DEFAULT_ROWS,
+    cols: DEFAULT_COLS,
+  }),
 }
 
-/* ============================================================
- * PseudocodeResponseAreaTub
- * ============================================================
- */
+export class MatrixResponseAreaTub extends ResponseAreaTub {
+  public readonly responseType = 'MATRIX'
 
-export class PseudocodeResponseAreaTub extends ResponseAreaTub {
-  public readonly responseType = 'PSEUDOCODE';
+  protected configSchema = matrixConfigSchema
 
-  public readonly displayWideInput = true;
+  protected config?: z.infer<typeof matrixConfigSchema>
 
-  /**
-   * Legacy constraint:
-   * Stored answer must be a string (JSON-encoded)
-   */
-  protected answerSchema = z.string();
+  protected answerSchema = matrixResponseAnswerSchema
 
-  /**
-   * Stored answer (JSON string)
-   */
-  protected answer?: string;
+  protected answer?: z.infer<typeof matrixResponseAnswerSchema>
 
-  /* ----------------------------------------------------------
-   * Lifecycle: Initialization
-   * ---------------------------------------------------------- */
+  public readonly displayWideInput = true
 
-  /**
-   * Ensure we always start with a valid JSON payload.
-   * Called when the response area is first created.
-   */
   initWithDefault = () => {
-    if (!this.answer) {
-      this.answer = JSON.stringify(createDefaultEvaluationResult());
-      return;
-    }
-
-    // If existing answer is invalid, reset safely
-    const parsed = safeParseEvaluationResult(this.answer);
-    if (!parsed) {
-      this.answer = JSON.stringify(createDefaultEvaluationResult());
+    this.config = {
+      rows: DEFAULT_ROWS,
+      cols: DEFAULT_COLS,
     }
+    this.answer = padMatrixFromRowsAndCols({
+      rows: DEFAULT_ROWS,
+      cols: DEFAULT_COLS,
+    })
   }
 
-  /* ----------------------------------------------------------
-   * Lifecycle: Pre-submission Validation
-   * ---------------------------------------------------------- */
-
-  /**
-   * Runs before every submission.
-   * Throwing here blocks submission.
-   */
-  customCheck = () => {
-    const parsed = safeParseEvaluationResult(this.answer);
-
-    if (!parsed) {
-      throw new Error(
-        'Invalid pseudocode evaluation payload. Please re-enter your response.'
-      );
+  protected extractAnswer = (provided: any): void => {
+    if (!this.config) throw new Error('Config missing')
+    if (!Array.isArray(provided)) throw new Error('Answer is not an array')
+
+    // legacy handling: answer used to be stored as a one-dimensional array. This
+    // checks which format the answer is in and converts it to a two-dimensional
+    // array if necessary
+    const isChuncked = Array.isArray(provided[0])
+    let answerToParse: z.infer<typeof matrixResponseAnswerSchema>
+    if (isChuncked) {
+      answerToParse = provided
+    } else {
+      answerToParse = _.chunk(provided, this.config.cols)
     }
+    const parsedAnswer = this.answerSchema.safeParse(answerToParse)
+    if (!parsedAnswer.success) throw new Error('Could not extract answer')
 
-    // Optional extra safety checks (cheap, but valuable)
-    if (parsed.score < 0 || parsed.score > 1) {
-      throw new Error('Evaluation score must be between 0 and 1.');
-    }
-
-    if (!Array.isArray(parsed.feedback_items)) {
-      throw new Error('Feedback items must be an array.');
-    }
+    this.answer = parsedAnswer.data
   }
 
-  /* ----------------------------------------------------------
-   * Student / Read-only View
-   * ---------------------------------------------------------- */
-
   InputComponent = (props: BaseResponseAreaProps) => {
-    const evaluationResult = safeParseEvaluationResult(props.answer);
+    if (!this.config) throw new Error('Config missing')
 
-    return PseudocodeInput({
+    return Matrix({
       ...props,
-      answer: evaluationResult,
-      isTeacherMode: false,
-    });
-  };
-
-  /* ----------------------------------------------------------
-   * Wizard / Editable View
-   * ---------------------------------------------------------- */
+      config: this.config,
+    })
+  }
 
   WizardComponent = (props: BaseResponseAreaWizardProps) => {
-    const evaluationResult = safeParseEvaluationResult(this.answer);
+    if (!this.config) throw new Error('Config missing')
+    if (this.answer === undefined) throw new Error('Answer missing')
 
-    return PseudocodeInput({
+    return MatrixWizard({
       ...props,
-      answer: evaluationResult,
-      isTeacherMode: true,
-      handleChange: (result: EvaluationResult) => {
-        props.handleChange({
-          responseType: this.responseType,
-          answer: JSON.stringify(result),
-        });
-      },
-    });
-  };
+      config: this.config,
+      answer: this.answer,
+    })
+  }
 }
diff --git a/src/types/Pseudocode/Pseudocode.component.tsx b/src/types/Pseudocode/Pseudocode.component.tsx
index b98f5f1..e6df3c7 100644
--- a/src/types/Pseudocode/Pseudocode.component.tsx
+++ b/src/types/Pseudocode/Pseudocode.component.tsx
@@ -1,4 +1,4 @@
-import { foldGutter, foldService, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
+import { foldGutter, foldService, syntaxHighlighting } from '@codemirror/language';
 import { EditorState } from '@codemirror/state';
 import { placeholder } from '@codemirror/view';
 import { EditorView, basicSetup } from 'codemirror';
@@ -6,42 +6,48 @@ 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 { defaultStudentResponse } from './utils/consts';
+import { EvaluationResult } from './types/output';
 import { usePseudocodeStyles } from './utils/styles';
 
-type PseudocodeInputProps = Omit<BaseResponseAreaProps, 'handleChange' | 'answer'> & {
+type PseudocodeInputProps = Omit<BaseResponseAreaProps, 'handleChange' | 'answer' | 'feedback'> & {
   handleChange: (val: StudentResponse) => void;
-  answer?: StudentResponse;
+  answer?: StudentResponse; // optional, only used for initial load
+  // callAPI: () => void;
+  feedback: EvaluationResult | null;
 };
 
 export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({
   handleChange,
-  answer,
+  // callAPI,
+  feedback,
 }) => {
   const { classes } = usePseudocodeStyles();
-  const [internalAnswer, setInternalAnswer] = useState<StudentResponse>(answer ?? defaultStudentResponse);
+
+  // Internal state fully managed in this component
+  const [internalAnswer, setInternalAnswer] = useState<StudentResponse>({
+    pseudocode: '',
+    time_complexity: '',
+    space_complexity: '',
+    explanation: '',
+  });
 
   const editorRef = useRef<HTMLDivElement | null>(null);
   const viewRef = useRef<EditorView | null>(null);
 
-  // Sync external answer only when it changes
-  useEffect(() => {
-    if (!answer) return;
-    setInternalAnswer(answer);
-  }, [answer]);
-
-  // Initialize CodeMirror
+  // Initialize CodeMirror once
   useEffect(() => {
     if (!editorRef.current) return;
 
     const state = EditorState.create({
-      doc: internalAnswer.pseudocode ?? '',
+      doc: internalAnswer.pseudocode,
       extensions: [
         foldGutter(),
         foldService.of(pseudocodeFoldFunc),
@@ -54,7 +60,11 @@ export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({
         EditorView.updateListener.of((update) => {
           if (!update.docChanged) return;
           const newCode = update.state.doc.toString();
-          setInternalAnswer((prev) => ({ ...prev, pseudocode: newCode }));
+          setInternalAnswer((prev) => {
+            const updated = { ...prev, pseudocode: newCode };
+            handleChange(updated); // notify parent immediately
+            return updated;
+          });
         }),
         EditorView.theme({
           '&': { height: '100%' },
@@ -73,45 +83,59 @@ export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({
       view.destroy();
       viewRef.current = null;
     };
-  }, []);
-
-  // Debounced / onBlur submit
-  const reportChange = () => {
-    handleChange({
-      pseudocode: internalAnswer.pseudocode ?? '',
-      time_complexity: internalAnswer.time_complexity ?? null,
-      space_complexity: internalAnswer.space_complexity ?? null,
-      explanation: internalAnswer.explanation ?? 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}>
-      <div ref={editorRef} className={classes.editor} />
-
-      <input
-        className={classes.field}
-        value={internalAnswer.time_complexity ?? ''}
-        placeholder="Time Complexity"
-        onChange={(e) => setInternalAnswer((prev) => ({ ...prev, time_complexity: e.target.value }))}
-        onBlur={reportChange}
-      />
+      {/* ================= Editor ================= */}
+      <div className={classes.editorWrapper}>
+        <div ref={editorRef} className={classes.editor} />
+      </div>
 
-      <input
-        className={classes.field}
-        value={internalAnswer.space_complexity ?? ''}
-        placeholder="Space Complexity"
-        onChange={(e) => setInternalAnswer((prev) => ({ ...prev, space_complexity: e.target.value }))}
-        onBlur={reportChange}
-      />
+      {/* ================= 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="Explanation"
-        onChange={(e) => setInternalAnswer((prev) => ({ ...prev, explanation: e.target.value }))}
-        onBlur={reportChange}
+        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>
   );
-};
\ No newline at end of file
+};
diff --git a/src/types/Pseudocode/PseudocodeWizard.component.tsx b/src/types/Pseudocode/PseudocodeWizard.component.tsx
index 35a43cc..2670af7 100644
--- a/src/types/Pseudocode/PseudocodeWizard.component.tsx
+++ b/src/types/Pseudocode/PseudocodeWizard.component.tsx
@@ -2,6 +2,7 @@ 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 = {
@@ -9,6 +10,9 @@ type WizardConfigProps = {
   handleChange: (val: ExpectedAnswer) => void;
 };
 
+type FlatRuntimeValue = string | number | boolean | null;
+type FlatRecord = Record<string, FlatRuntimeValue>;
+
 export const PseudocodeWizard: React.FC<WizardConfigProps> = ({
   answer,
   handleChange,
@@ -16,13 +20,147 @@ export const PseudocodeWizard: React.FC<WizardConfigProps> = ({
   const { classes } = usePseudocodeStyles();
   const [open, setOpen] = useState(true);
 
-  const update = <K extends keyof ExpectedAnswer>(
-    key: K,
-    val: ExpectedAnswer[K],
+  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
   ) => {
-    handleChange({ ...answer, [key]: val });
+    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
@@ -33,38 +171,167 @@ export const PseudocodeWizard: React.FC<WizardConfigProps> = ({
       </button>
 
       <div className={classes.evalParamsContent}>
-        {/* ---- Expected Complexity ---- */}
+        {/* Expected Complexity */}
         <fieldset className={classes.evalParamsSection}>
           <legend>Expected Complexity</legend>
+
           <p>Expected Time Complexity</p>
           <input
             className={classes.field}
-            placeholder="Expected Time Complexity"
-            value={answer.expected_time_complexity}
-            onChange={(e) =>
-              update('expected_time_complexity', e.target.value)
-            }
+            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="Expected Space Complexity"
-            value={answer.expected_space_complexity}
-            onChange={(e) =>
-              update('expected_space_complexity', e.target.value)
-            }
+            placeholder="O(1), O(n), etc."
+            value={normalizedAnswer.expected_space_complexity}
+            onChange={(e) => update("expected_space_complexity", e.target.value)}
           />
         </fieldset>
 
-        {/* ---- Evaluation Params ---- */}
+        {/* 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={answer.evaluation_params}
-          onChange={(p) => update('evaluation_params', p)}
+          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
index b4a6943..60f6112 100644
--- a/src/types/Pseudocode/components/EvaluationParamsPanel.tsx
+++ b/src/types/Pseudocode/components/EvaluationParamsPanel.tsx
@@ -1,13 +1,71 @@
-import React from 'react'
+import { makeStyles } from "@styles";
+import React from "react";
 
-import { EvaluationParams } from '../types/input'
-import { usePseudocodeStyles } from '../utils/styles'
+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
+  value: EvaluationParams;
+  onChange: (next: EvaluationParams) => void;
+  collapsed: boolean;
+  setCollapsed: (v: boolean) => void;
 }
 
 export const EvaluationParamsPanel: React.FC<EvaluationParamsPanelProps> = ({
@@ -16,103 +74,56 @@ export const EvaluationParamsPanel: React.FC<EvaluationParamsPanelProps> = ({
   collapsed,
   setCollapsed,
 }) => {
-  const { classes } = usePseudocodeStyles()
-
-  const update = <K extends keyof EvaluationParams>(
-    key: K,
-    val: EvaluationParams[K],
-  ) => {
-    onChange({
-      ...value,
-      [key]: val,
-    })
-  }
+  const { classes } = useStyles();
 
   return (
-    <div className={classes.evalParams}>
-      <button
-        type="button"
-        className={classes.evalParamsToggle}
-        onClick={() => setCollapsed(!collapsed)}
-      >
-        {collapsed ? '▶ Evaluation Parameters' : '▼ Evaluation Parameters'}
+    <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>
 
-      {!collapsed && (
-        <div className={classes.evalParamsContent}>
-          <fieldset className={classes.evalParamsSection}>
-            <legend>Evaluation</legend>
-
-            <label className={classes.evalParamsRow}>
-              <input
-                type="checkbox"
-                checked={value.analyze_pseudocode}
-                onChange={(e) =>
-                  update('analyze_pseudocode', e.target.checked)
-                }
-              />
-              Analyze pseudocode
-            </label>
-
-            <label className={classes.evalParamsRow}>
-              <input
-                type="checkbox"
-                checked={value.require_time_complexity}
-                onChange={(e) =>
-                  update('require_time_complexity', e.target.checked)
-                }
-              />
-              Require time complexity
-            </label>
+      <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.evalParamsRow}>
-              <input
-                type="checkbox"
-                checked={value.require_space_complexity}
-                onChange={(e) =>
-                  update('require_space_complexity', e.target.checked)
-                }
-              />
-              Require space complexity
-            </label>
-          </fieldset>
+        <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>
 
-          <fieldset className={classes.evalParamsSection}>
-            <legend>Scoring</legend>
-
-            <label className={classes.evalParamsRow}>
-              <input
-                type="checkbox"
-                checked={value.partial_credit}
-                onChange={(e) =>
-                  update('partial_credit', e.target.checked)
-                }
-              />
-              Allow partial credit
-            </label>
-          </fieldset>
-
-          <fieldset className={classes.evalParamsSection}>
-            <legend>Parser</legend>
-
-            <label className={classes.evalParamsRow}>
-              Style
-              <select
-                className={classes.field}
-                value={value.pseudocode_style}
-                onChange={(e) =>
-                  update('pseudocode_style', e.target.value as any)
-                }
-              >
-                <option value="auto">Auto</option>
-                <option value="python">Python</option>
-                <option value="pascal">Pascal</option>
-                <option value="c">C</option>
-              </select>
-            </label>
-          </fieldset>
-        </div>
-      )}
+        <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..10dfc5e
--- /dev/null
+++ b/src/types/Pseudocode/components/PseudocodeFeedbackPanel.tsx
@@ -0,0 +1,226 @@
+import { makeStyles } from '@styles';
+import React 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',
+  },
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    fontWeight: 700,
+    fontSize: 16,
+  },
+  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();
+
+  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>
+        <span>{overall_message}</span>
+      </div>
+
+      {/* 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
index 2b9d58a..a612739 100644
--- a/src/types/Pseudocode/index.tsx
+++ b/src/types/Pseudocode/index.tsx
@@ -1,4 +1,6 @@
-// PseudocodeResponseAreaTub.ts
+import { useState } from 'react'
+import z from 'zod'
+
 import {
   BaseResponseAreaProps,
   BaseResponseAreaWizardProps,
@@ -13,24 +15,24 @@ import {
   ExpectedAnswer,
   ExpectedAnswerSchema,
 } from './types/input'
-import { defaultExpectedAnswer, defaultStudentResponse } from './utils/consts'
-
-/* ===========================================================
- * PseudocodeResponseAreaTub
- * =========================================================== */
+import { EvaluationResult } from './types/output'
+import {
+  defaultExpectedAnswer,
+  defaultStudentResponse,
+} from './utils/consts'
 
 export class PseudocodeResponseAreaTub extends ResponseAreaTub {
   public readonly responseType = 'PSEUDOCODE'
   public readonly displayWideInput = true
 
-  /* ---------- STUDENT ---------- */
+  /* -------------------- Schemas -------------------- */
 
-  protected answerSchema = ExpectedAnswerSchema//StudentResponseSchema
-  private response: StudentResponse | null = null
+  protected answerSchema = z.any();//StudentResponseSchema
+  protected answer: ExpectedAnswer = defaultExpectedAnswer
 
-  /* ---------- TEACHER ---------- */
+  /* -------------------- Internal State -------------------- */
 
-  protected answer: ExpectedAnswer = defaultExpectedAnswer
+  private previewFeedback: EvaluationResult | null = null
 
   public readonly delegateFeedback = false
   public readonly delegateLivePreview = true
@@ -38,37 +40,60 @@ export class PseudocodeResponseAreaTub extends ResponseAreaTub {
   /* -------------------- Init -------------------- */
 
   initWithConfig = (config: any) => {
-    const parsed = ExpectedAnswerSchema.safeParse(config?.answer)
+    let raw = config?.answer
+
+    // 🔥 Because Wizard stringifies, we must parse here
+    if (typeof raw === 'string') {
+      try {
+        raw = JSON.parse(raw)
+      } catch {
+        raw = null
+      }
+    }
+
+    const parsed = ExpectedAnswerSchema.safeParse(raw)
+
     this.answer = parsed.success
       ? parsed.data
       : defaultExpectedAnswer
   }
 
-  /* -------------------- Validation -------------------- */
+  /* -------------------- Custom Check -------------------- */
 
   customCheck = () => {
-    // reserved for later (AST / static analysis)
+    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)
+  public InputComponent = (
+    props: BaseResponseAreaProps,
+  ): JSX.Element => {
+    const parsed = this.answerSchema.safeParse(props.answer)
+
     const validAnswer = parsed.success
       ? parsed.data
       : defaultStudentResponse
+    // console.log("feedback prop:", props.feedback)
 
-    this.response = validAnswer
+    const submittedFeedback: EvaluationResult | null =
+      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) => {
-          this.response = val
-          console.log("response", this.response)
           props.handleChange(val)
         }}
       />
@@ -79,26 +104,22 @@ export class PseudocodeResponseAreaTub extends ResponseAreaTub {
    * Wizard / Teacher Input
    * ===================================================== */
 
-  public WizardComponent = (
-    props: BaseResponseAreaWizardProps,
-  ): JSX.Element => {
+  public WizardComponent = (props: BaseResponseAreaWizardProps): JSX.Element => {
+    const [localAnswer, setLocalAnswer] = useState(this.answer)
+
     return (
-      <>
-      <p>Wizard</p>
       <PseudocodeWizard
-        answer={this.answer}
-        handleChange={(val: ExpectedAnswer) => {
+        answer={localAnswer}
+        handleChange={(val) => {
+          setLocalAnswer(val)
           this.answer = val
-
-          console.log("answer", this.answer)
-
           props.handleChange({
             responseType: this.responseType,
-            answer: val,
+            answer: JSON.stringify(val),
           })
         }}
       />
-      </>
     )
   }
+
 }
diff --git a/src/types/Pseudocode/types/api.ts b/src/types/Pseudocode/types/api.ts
deleted file mode 100644
index a9043f7..0000000
--- a/src/types/Pseudocode/types/api.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ExpectedAnswer, StudentResponse } from "./input";
-
-export const callAPI = async(response: StudentResponse, answer: ExpectedAnswer, params: any) => {
-  const data = await fetch("http://localhost:8000/evaluate", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      response,
-      answer,
-      params
-    }),
-  })
-  return data
-}
\ No newline at end of file
diff --git a/src/types/Pseudocode/types/ast.ts b/src/types/Pseudocode/types/ast.ts
deleted file mode 100644
index b6e4da5..0000000
--- a/src/types/Pseudocode/types/ast.ts
+++ /dev/null
@@ -1,290 +0,0 @@
-import { z } from "zod";
-
-/* =======================
-   ENUMS
-======================= */
-
-export const NodeType = z.enum([
-  "program",
-  "function",
-  "block",
-  "loop",
-  "conditional",
-  "assignment",
-  "return",
-  "function_call",
-  "recursive_call",
-  "variable",
-  "literal",
-  "binary_op",
-  "unary_op",
-  "array_access",
-  "expression",
-]);
-export type NodeType = z.infer<typeof NodeType>;
-
-export const LoopType = z.enum([
-  "for",
-  "for_each",
-  "while",
-  "do_while",
-  "repeat_until",
-  "unknown",
-]);
-export type LoopType = z.infer<typeof LoopType>;
-
-export const OperatorType = z.enum([
-  "+",
-  "-",
-  "*",
-  "/",
-  "%",
-  "^",
-  "//",
-  "==",
-  "!=",
-  "<",
-  "<=",
-  ">",
-  ">=",
-  "and",
-  "or",
-  "not",
-  "=",
-  "+=",
-  "-=",
-  "*=",
-  "/=",
-]);
-export type OperatorType = z.infer<typeof OperatorType>;
-
-/* =======================
-   SOURCE LOCATION
-======================= */
-
-export const SourceLocationSchema = z.object({
-  line: z.number(),
-  column: z.number(),
-  end_line: z.number().optional(),
-  end_column: z.number().optional(),
-});
-export type SourceLocation = z.infer<typeof SourceLocationSchema>;
-
-/* =======================
-   BASE AST NODE
-======================= */
-
-export const ASTNodeBaseSchema = z.object({
-  node_type: NodeType,
-  location: SourceLocationSchema.optional(),
-  metadata: z.record(z.any()).default({}),
-}).passthrough();
-
-/* =======================
-   EXPRESSIONS
-======================= */
-
-export const ExpressionNodeSchema = ASTNodeBaseSchema.extend({
-  node_type: z.literal("expression"),
-});
-export type ExpressionNode = z.infer<typeof ExpressionNodeSchema>;
-
-export const VariableNodeSchema = ExpressionNodeSchema.extend({
-  node_type: z.literal("variable"),
-  name: z.string(),
-});
-export type VariableNode = z.infer<typeof VariableNodeSchema>;
-
-export const LiteralNodeSchema = ExpressionNodeSchema.extend({
-  node_type: z.literal("literal"),
-  value: z.any().optional(),
-  literal_type: z.string().default("unknown"),
-});
-export type LiteralNode = z.infer<typeof LiteralNodeSchema>;
-
-export const BinaryOpNodeSchema: z.ZodType<any> = z.lazy(() =>
-  ExpressionNodeSchema.extend({
-    node_type: z.literal("binary_op"),
-    operator: OperatorType,
-    left: ExpressionNodeUnion.optional(),
-    right: ExpressionNodeUnion.optional(),
-  })
-);
-export type BinaryOpNode = z.infer<typeof BinaryOpNodeSchema>;
-
-export const UnaryOpNodeSchema: z.ZodType<any> = z.lazy(() =>
-  ExpressionNodeSchema.extend({
-    node_type: z.literal("unary_op"),
-    operator: OperatorType,
-    operand: ExpressionNodeUnion.optional(),
-  })
-);
-export type UnaryOpNode = z.infer<typeof UnaryOpNodeSchema>;
-
-export const ArrayAccessNodeSchema: z.ZodType<any> = z.lazy(() =>
-  ExpressionNodeSchema.extend({
-    node_type: z.literal("array_access"),
-    array: ExpressionNodeUnion.optional(),
-    index: ExpressionNodeUnion.optional(),
-  })
-);
-export type ArrayAccessNode = z.infer<typeof ArrayAccessNodeSchema>;
-
-/* =======================
-   FUNCTION CALLS
-======================= */
-
-export const FunctionCallNodeSchema: z.ZodType<any> = z.lazy(() =>
-  ASTNodeBaseSchema.extend({
-    node_type: z.literal("function_call"),
-    function_name: z.string(),
-    arguments: z.array(ExpressionNodeUnion).default([]),
-    is_recursive: z.boolean().default(false),
-  })
-);
-export type FunctionCallNode = z.infer<typeof FunctionCallNodeSchema>;
-
-export const RecursiveCallNodeSchema: z.ZodType<any> = z.lazy(() =>
-  z.object({
-    node_type: z.literal("recursive_call"),
-    function_name: z.string(),
-    arguments: z.array(ExpressionNodeUnion).default([]),
-    is_recursive: z.boolean().default(false),
-
-    reduction_pattern: z.string().optional(),
-    branching_factor: z.number().default(1),
-  }).passthrough()
-);
-
-export type RecursiveCallNode = z.infer<typeof RecursiveCallNodeSchema>;
-
-
-/* =======================
-   STATEMENTS
-======================= */
-
-export const AssignmentNodeSchema: z.ZodType<any> = z.lazy(() =>
-  ASTNodeBaseSchema.extend({
-    node_type: z.literal("assignment"),
-    target: z.union([VariableNodeSchema, ArrayAccessNodeSchema]).optional(),
-    value: ExpressionNodeUnion.optional(),
-    operator: OperatorType.default("="),
-  })
-);
-export type AssignmentNode = z.infer<typeof AssignmentNodeSchema>;
-
-export const ReturnNodeSchema: z.ZodType<any> = z.lazy(() =>
-  ASTNodeBaseSchema.extend({
-    node_type: z.literal("return"),
-    value: ExpressionNodeUnion.optional(),
-  })
-);
-export type ReturnNode = z.infer<typeof ReturnNodeSchema>;
-
-export const BlockNodeSchema: z.ZodType<any> = z.lazy(() =>
-  ASTNodeBaseSchema.extend({
-    node_type: z.literal("block"),
-    statements: z.array(ASTNodeUnion).default([]),
-  })
-);
-export type BlockNode = z.infer<typeof BlockNodeSchema>;
-
-/* =======================
-   LOOPS
-======================= */
-
-export const LoopNodeSchema: z.ZodType<any> = z.lazy(() =>
-  ASTNodeBaseSchema.extend({
-    node_type: z.literal("loop"),
-    loop_type: LoopType.default("for"),
-
-    iterator: VariableNodeSchema.optional(),
-    start: ExpressionNodeUnion.optional(),
-    end: ExpressionNodeUnion.optional(),
-    step: ExpressionNodeUnion.optional(),
-
-    collection: ExpressionNodeUnion.optional(),
-    condition: ExpressionNodeUnion.optional(),
-
-    body: BlockNodeSchema.optional(),
-
-    estimated_iterations: z.string().optional(),
-    nesting_level: z.number().default(0),
-  })
-);
-export type LoopNode = z.infer<typeof LoopNodeSchema>;
-
-/* =======================
-   CONDITIONALS
-======================= */
-
-export const ConditionalNodeSchema: z.ZodType<any> = z.lazy(() =>
-  ASTNodeBaseSchema.extend({
-    node_type: z.literal("conditional"),
-    condition: ExpressionNodeUnion.optional(),
-    then_branch: BlockNodeSchema.optional(),
-    else_branch: BlockNodeSchema.optional(),
-    elif_branches: z.array(z.lazy(() => ConditionalNodeSchema)).default([]),
-  })
-);
-export type ConditionalNode = z.infer<typeof ConditionalNodeSchema>;
-
-/* =======================
-   FUNCTIONS
-======================= */
-
-export const FunctionNodeSchema: z.ZodType<any> = z.lazy(() =>
-  ASTNodeBaseSchema.extend({
-    node_type: z.literal("function"),
-    name: z.string(),
-    parameters: z.array(VariableNodeSchema).default([]),
-    body: BlockNodeSchema.optional(),
-    return_type: z.string().optional(),
-    is_recursive: z.boolean().default(false),
-  })
-);
-export type FunctionNode = z.infer<typeof FunctionNodeSchema>;
-
-/* =======================
-   PROGRAM ROOT
-======================= */
-
-export const ProgramNodeSchema = ASTNodeBaseSchema.extend({
-  node_type: z.literal("program"),
-  functions: z.array(FunctionNodeSchema).default([]),
-  global_statements: BlockNodeSchema.optional(),
-});
-export type ProgramNode = z.infer<typeof ProgramNodeSchema>;
-
-/* =======================
-   UNIONS
-======================= */
-
-export const ExpressionNodeUnion = z.lazy(() =>
-  z.union([
-    VariableNodeSchema,
-    LiteralNodeSchema,
-    BinaryOpNodeSchema,
-    UnaryOpNodeSchema,
-    ArrayAccessNodeSchema,
-  ])
-);
-
-export const ASTNodeUnion: z.ZodType<any> = z.lazy(() =>
-  z.union([
-    ProgramNodeSchema,
-    FunctionNodeSchema,
-    BlockNodeSchema,
-    LoopNodeSchema,
-    ConditionalNodeSchema,
-    AssignmentNodeSchema,
-    ReturnNodeSchema,
-    FunctionCallNodeSchema,
-    RecursiveCallNodeSchema,
-    VariableNodeSchema,
-    LiteralNodeSchema,
-    BinaryOpNodeSchema,
-    UnaryOpNodeSchema,
-    ArrayAccessNodeSchema,
-  ])
-);
diff --git a/src/types/Pseudocode/types/input.ts b/src/types/Pseudocode/types/input.ts
index 85a85f2..2c378f9 100644
--- a/src/types/Pseudocode/types/input.ts
+++ b/src/types/Pseudocode/types/input.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-export type ExpectedAnswer = z.infer<typeof ExpectedAnswerSchema>;
+import { ExecutionTestCaseSchema } from './tests';
 
 /* ============================================================
  * EvaluationParams
@@ -8,12 +8,6 @@ export type ExpectedAnswer = z.infer<typeof ExpectedAnswerSchema>;
  */
 
 export const EvaluationParamsSchema = z.object({
-  // What to evaluate
-  analyze_pseudocode: z
-    .boolean()
-    .default(true)
-    .describe('Whether to parse and analyze the pseudocode'),
-
   require_time_complexity: z
     .boolean()
     .default(true)
@@ -24,89 +18,11 @@ export const EvaluationParamsSchema = z.object({
     .default(true)
     .describe('Whether space complexity answer is required'),
 
-  // Scoring options
-  partial_credit: z
-    .boolean()
-    .default(true)
-    .describe('Allow partial marks for partially correct answers'),
-
-  time_weight: z
-    .number()
-    .min(0)
-    .max(1)
-    .default(0.5)
-    .describe('Weight for time complexity in total score'),
-
-  space_weight: z
-    .number()
-    .min(0)
-    .max(1)
-    .default(0.5)
-    .describe('Weight for space complexity in total score'),
-
-  // Comparison options
-  complexity_equivalence: z
-    .boolean()
-    .default(true)
-    .describe('Treat equivalent complexities as equal (O(2n) == O(n))'),
-
-  case_sensitive: z
-    .boolean()
-    .default(false)
-    .describe('Case sensitive comparison (O(N) vs O(n))'),
-
-  strict_notation: z
-    .boolean()
-    .default(false)
-    .describe('Require exact Big-O notation format'),
-
   // Feedback options
   show_detailed_feedback: z
     .boolean()
     .default(true)
-    .describe('Provide detailed analysis feedback'),
-
-  show_correct_answer: z
-    .boolean()
-    .default(true)
-    .describe('Show expected answer if student is wrong'),
-
-  show_detected_complexity: z
-    .boolean()
-    .default(true)
-    .describe('Show complexity detected from pseudocode analysis'),
-
-  show_ast: z
-    .boolean()
-    .default(false)
-    .describe('Include AST in response (for debugging)'),
-
-  // Parser options
-  pseudocode_style: z
-    .enum(['auto', 'python', 'pascal', 'c'])
-    .default('auto')
-    .describe('Pseudocode style'),
-
-  strict_parsing: z
-    .boolean()
-    .default(false)
-    .describe('Fail on parse errors vs. best effort'),
-
-  // Advanced options
-  max_nesting_depth: z
-    .number()
-    .int()
-    .min(1)
-    .max(50)
-    .default(10)
-    .describe('Maximum loop nesting depth to analyze'),
-
-  timeout_seconds: z
-    .number()
-    .min(0.1)
-    .max(60)
-    .default(5.0)
-    .describe('Analysis timeout in seconds'),
+    .describe('Provide detailed analysis feedback')
 });
 
 export type EvaluationParams = z.infer<typeof EvaluationParamsSchema>;
@@ -162,44 +78,14 @@ export const ExpectedAnswerSchema = z.object({
     .default('O(1)')
     .describe('Expected space complexity in Big-O notation'),
 
-  acceptable_time_alternatives: z
-    .array(z.string())
+  test_cases: z
+    .array(ExecutionTestCaseSchema)
     .default([])
-    .describe('Alternative acceptable time complexity representations'),
+    .describe('Execution test cases for correctness checking'),
 
-  acceptable_space_alternatives: z
-    .array(z.string())
-    .default([])
-    .describe('Alternative acceptable space complexity representations'),
-
-  algorithm_description: z
-    .string()
+  eval_options: EvaluationParamsSchema
     .optional()
-    .describe('Description of the expected algorithm'),
-
-  algorithm_type: z
-    .string()
-    .optional()
-    .describe('Type of algorithm: sorting, searching, graph, etc.'),
+    .default({}),
+});
 
-  expected_constructs: z
-    .array(z.string())
-    .default([])
-    .describe('Expected code constructs: nested_loop, recursion, etc.'),
-
-  time_complexity_weight: z
-    .number()
-    .min(0)
-    .max(1)
-    .default(0.5)
-    .describe('Weight for time complexity in scoring'),
-
-  space_complexity_weight: z
-    .number()
-    .min(0)
-    .max(1)
-    .default(0.5)
-    .describe('Weight for space complexity in scoring'),
-  // 🔑 Teacher-only
-  evaluation_params: EvaluationParamsSchema.default({}),
-});
\ No newline at end of file
+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
index 751e376..a182709 100644
--- a/src/types/Pseudocode/types/output.ts
+++ b/src/types/Pseudocode/types/output.ts
@@ -1,5 +1,7 @@
 import { z } from 'zod';
 
+import { TestCaseResultSchema } from './tests';
+
 /* ============================================================
  * Shared / External Types
  * ============================================================
@@ -328,62 +330,52 @@ export const ComplexityAnalysisSchema = z.object({
 export type ComplexityAnalysis = z.infer<typeof ComplexityAnalysisSchema>;
 
 /* ============================================================
- * EvaluationResult (Main Output)
+ * CodeCorrectnessResult
  * ============================================================
  */
 
-export const EvaluationResultSchema = z.object({
-  is_correct: z
-    .boolean()
-    .describe('Overall correctness of the submission'),
+export const CodeCorrectnessResultSchema = z.object({
+  parse_success: z.boolean(),
 
-  time_complexity_result: TimeComplexityResultSchema
-    .optional()
-    .describe('Time complexity evaluation details'),
+  parse_errors: z
+    .array(z.string())
+    .default([]),
 
-  space_complexity_result: SpaceComplexityResultSchema
-    .optional()
-    .describe('Space complexity evaluation details'),
+  parse_warnings: z
+    .array(z.string())
+    .default([]),
 
-  score: z
-    .number()
-    .min(0)
-    .max(1)
-    .default(0)
-    .describe('Numerical score from 0 to 1'),
+  normalized_code: z
+    .string()
+    .optional(),
 
-  analysis: ComplexityAnalysisSchema
-    .optional()
-    .describe('Detailed complexity analysis from pseudocode'),
+  execution_results: z
+    .array(TestCaseResultSchema)
+    .default([]),
 
-  ast: ProgramNodeSchema
-    .optional()
-    .describe('Parsed AST (only included if show_ast is True)'),
+  is_correct: z.boolean(),
 
-  feedback: z
-    .string()
-    .default('')
-    .describe('Overall feedback message'),
+  feedback: z.string(),
+});
 
-  feedback_items: z
-    .array(FeedbackItemSchema)
-    .default([])
-    .describe('List of specific feedback items'),
+export type CodeCorrectnessResult = z.infer<typeof CodeCorrectnessResultSchema>;
 
-  warnings: z
-    .array(z.string())
-    .default([])
-    .describe('Non-fatal warnings during evaluation'),
 
-  errors: z
-    .array(z.string())
-    .default([])
-    .describe('Errors encountered during evaluation'),
+export const SectionFeedbackSchema = z.object({
+  importance: z.string(),
+  title: z.string(),
+  content: z.string(),
+});
 
-  metadata: z
-    .record(z.any())
-    .default({})
-    .describe('Additional metadata about the evaluation'),
+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>;
\ No newline at end of file
+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
index 75ca6c6..ec2b562 100644
--- a/src/types/Pseudocode/utils/consts.ts
+++ b/src/types/Pseudocode/utils/consts.ts
@@ -11,39 +11,12 @@ export const defaultStudentResponse: StudentResponse = {
 export const defaultExpectedAnswer: ExpectedAnswer = {
   expected_time_complexity: '',
   expected_space_complexity: 'O(1)',
-
-  acceptable_time_alternatives: [],
-  acceptable_space_alternatives: [],
-
-  algorithm_description: '',
-  algorithm_type: '',
-  expected_constructs: [],
-
-  time_complexity_weight: 0.5,
-  space_complexity_weight: 0.5,
-
-  evaluation_params: {
-    analyze_pseudocode: true,
+  eval_options: {
     require_time_complexity: true,
     require_space_complexity: true,
-
-    partial_credit: true,
-    time_weight: 0.5,
-    space_weight: 0.5,
-
-    complexity_equivalence: true,
-    case_sensitive: false,
-    strict_notation: false,
-
     show_detailed_feedback: true,
-    show_correct_answer: true,
-    show_detected_complexity: true,
-    show_ast: false,
-
-    pseudocode_style: 'auto',
-    strict_parsing: false,
-
-    max_nesting_depth: 10,
-    timeout_seconds: 5,
   },
+  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
index 750e74b..6817c57 100644
--- a/src/types/Pseudocode/utils/styles.ts
+++ b/src/types/Pseudocode/utils/styles.ts
@@ -1,13 +1,21 @@
-import { makeStyles } from "@styles";
+import { makeStyles } from '@styles'
 
-/* -------------------- 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,
@@ -15,6 +23,7 @@ export const usePseudocodeStyles = makeStyles()((theme) => ({
     borderRadius: 6,
     overflow: 'hidden',
     backgroundColor: '#fff',
+
     '& .cm-editor': { outline: 'none' },
     '& .cm-content': {
       fontFamily: '"Fira Code", "Courier New", monospace',
@@ -27,6 +36,7 @@ export const usePseudocodeStyles = makeStyles()((theme) => ({
       borderRight: `1px solid ${theme.palette.divider}`,
     },
   },
+
   field: {
     padding: '6px 8px',
     borderRadius: 4,
@@ -34,6 +44,7 @@ export const usePseudocodeStyles = makeStyles()((theme) => ({
     fontSize: 14,
     width: '100%',
   },
+
   textarea: {
     padding: '6px 8px',
     borderRadius: 4,
@@ -43,7 +54,11 @@ export const usePseudocodeStyles = makeStyles()((theme) => ({
     minHeight: 80,
     resize: 'vertical',
   },
-  // eval params panel
+
+  /* =====================================================
+   * Evaluation params panel
+   * ===================================================== */
+
   evalParams: {
     border: '1px solid var(--border-muted)',
     borderRadius: 6,
@@ -84,5 +99,144 @@ export const usePseudocodeStyles = makeStyles()((theme) => ({
     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 c3349bd..c6b7330 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -7,7 +7,7 @@ import { MatrixResponseAreaTub } from './Matrix'
 import { MultipleChoiceResponseAreaTub } from './MultipleChoice'
 import { NumberResponseAreaTub } from './NumberInput'
 import { NumericUnitsResponseAreaTub } from './NumericUnits'
-import { PseudocodeResponseAreaTub } from './Pseudocode/index.tsx'
+import { PseudocodeResponseAreaTub } from './Pseudocode'
 import { ResponseAreaTub } from './response-area-tub'
 import { TableResponseAreaTub } from './Table'
 import { TextResponseAreaTub } from './TextInput'

From bce1dffd348275c522e5c90c3cba90ac4e69bd11 Mon Sep 17 00:00:00 2001
From: everythingfades <raymondguhonglei@163.com>
Date: Wed, 4 Mar 2026 00:42:28 +0000
Subject: [PATCH 5/6] fix: should fix PR

---
 package.json                                  |  1 -
 src/types/Essay/EssayWizard.component.tsx     |  1 -
 src/types/Pseudocode/Pseudocode.component.tsx | 12 +--
 src/types/Pseudocode/components/utils.tsx     | 76 -------------------
 src/types/Pseudocode/index.tsx                | 35 ++++-----
 src/types/Pseudocode/utils/consts.ts          |  2 +-
 src/types/index.ts                            |  2 +-
 7 files changed, 19 insertions(+), 110 deletions(-)
 delete mode 100644 src/types/Pseudocode/components/utils.tsx

diff --git a/package.json b/package.json
index c08fec6..d8364ec 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,6 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.31.2",
     "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.31.2",
     "react-image-crop": "^11.0.10",
     "react-katex": "^3.0.1",
     "react-query": "^3.39.0",
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
index e6df3c7..d74ea86 100644
--- a/src/types/Pseudocode/Pseudocode.component.tsx
+++ b/src/types/Pseudocode/Pseudocode.component.tsx
@@ -19,25 +19,19 @@ import { usePseudocodeStyles } from './utils/styles';
 
 type PseudocodeInputProps = Omit<BaseResponseAreaProps, 'handleChange' | 'answer' | 'feedback'> & {
   handleChange: (val: StudentResponse) => void;
-  answer?: StudentResponse; // optional, only used for initial load
-  // callAPI: () => void;
   feedback: EvaluationResult | null;
+  answer: StudentResponse
 };
 
 export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({
   handleChange,
-  // callAPI,
   feedback,
+  answer
 }) => {
   const { classes } = usePseudocodeStyles();
 
   // Internal state fully managed in this component
-  const [internalAnswer, setInternalAnswer] = useState<StudentResponse>({
-    pseudocode: '',
-    time_complexity: '',
-    space_complexity: '',
-    explanation: '',
-  });
+  const [internalAnswer, setInternalAnswer] = useState<StudentResponse>(answer);
 
   const editorRef = useRef<HTMLDivElement | null>(null);
   const viewRef = useRef<EditorView | null>(null);
diff --git a/src/types/Pseudocode/components/utils.tsx b/src/types/Pseudocode/components/utils.tsx
deleted file mode 100644
index 28f6430..0000000
--- a/src/types/Pseudocode/components/utils.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-type SectionProps = {
-  title: string
-  children: React.ReactNode
-}
-
-export const Section = ({ title, children }: SectionProps) => (
-  <fieldset className="evalParamsSection">
-    <legend>{title}</legend>
-    {children}
-  </fieldset>
-)
-
-export const Checkbox = ({
-  label,
-  checked,
-  onChange,
-}: {
-  label: string
-  checked: boolean
-  onChange: (v: boolean) => void
-}) => (
-  <label className="eval-params__row">
-    <input
-      type="checkbox"
-      checked={checked}
-      onChange={(e) => onChange(e.target.checked)}
-    />
-    {label}
-  </label>
-)
-
-export const Slider = ({
-  label,
-  value,
-  onChange,
-}: {
-  label: string
-  value: number
-  onChange: (v: number) => void
-}) => (
-  <label className="eval-params__row">
-    {label}
-    <input
-      type="range"
-      min={0}
-      max={1}
-      step={0.05}
-      value={value}
-      onChange={(e) => onChange(Number(e.target.value))}
-    />
-    <span>{value.toFixed(2)}</span>
-  </label>
-)
-
-export const Select = ({
-  label,
-  value,
-  options,
-  onChange,
-}: {
-  label: string
-  value: string
-  options: string[]
-  onChange: (v: any) => void
-}) => (
-  <label className="eval-params__row">
-    {label}
-    <select value={value} onChange={(e) => onChange(e.target.value)}>
-      {options.map((o) => (
-        <option key={o} value={o}>
-          {o}
-        </option>
-      ))}
-    </select>
-  </label>
-)
diff --git a/src/types/Pseudocode/index.tsx b/src/types/Pseudocode/index.tsx
index a612739..8efbdcc 100644
--- a/src/types/Pseudocode/index.tsx
+++ b/src/types/Pseudocode/index.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import z from 'zod'
 
 import {
   BaseResponseAreaProps,
@@ -27,13 +26,15 @@ export class PseudocodeResponseAreaTub extends ResponseAreaTub {
 
   /* -------------------- Schemas -------------------- */
 
-  protected answerSchema = z.any();//StudentResponseSchema
+  // note to whoever wants to change this
+  // since the lambda feedback sandbox stores the answer and run extractAnswer by default
+  // when you change the schema there is a chance that the stored answer cannot be parsed, so you see the whole page errors
+  // solution: change this to z.any() temporary, change the stored answer and change this back
+  protected answerSchema = StudentResponseSchema
   protected answer: ExpectedAnswer = defaultExpectedAnswer
 
   /* -------------------- Internal State -------------------- */
 
-  private previewFeedback: EvaluationResult | null = null
-
   public readonly delegateFeedback = false
   public readonly delegateLivePreview = true
 
@@ -58,16 +59,6 @@ export class PseudocodeResponseAreaTub extends ResponseAreaTub {
       : defaultExpectedAnswer
   }
 
-  /* -------------------- Custom Check -------------------- */
-
-  customCheck = () => {
-    if (this.previewFeedback) {
-      throw new Error('preview failed')
-    }
-
-    this.previewFeedback = null
-  }
-
   /* =====================================================
    * Student Input
    * ===================================================== */
@@ -80,19 +71,21 @@ export class PseudocodeResponseAreaTub extends ResponseAreaTub {
     const validAnswer = parsed.success
       ? parsed.data
       : defaultStudentResponse
-    // console.log("feedback prop:", props.feedback)
-
+      
     const submittedFeedback: EvaluationResult | null =
-      props.feedback?.feedback ? JSON.parse((props.feedback?.feedback as string).split("<br />")[1] ?? "{}") : null
-
-    const effectiveFeedback =
-      this.previewFeedback ?? submittedFeedback
+      props.feedback &&
+      'feedback' in props.feedback &&
+      props.feedback.feedback
+        ? JSON.parse(
+            (props.feedback.feedback as string).split('<br />')[1] ?? '{}'
+          )
+        : null;
 
     return (
       <PseudocodeInput
         {...props}
         answer={validAnswer}
-        feedback={effectiveFeedback}
+        feedback={submittedFeedback}
         handleChange={(val: StudentResponse) => {
           props.handleChange(val)
         }}
diff --git a/src/types/Pseudocode/utils/consts.ts b/src/types/Pseudocode/utils/consts.ts
index ec2b562..b492273 100644
--- a/src/types/Pseudocode/utils/consts.ts
+++ b/src/types/Pseudocode/utils/consts.ts
@@ -9,7 +9,7 @@ export const defaultStudentResponse: StudentResponse = {
 };
 
 export const defaultExpectedAnswer: ExpectedAnswer = {
-  expected_time_complexity: '',
+  expected_time_complexity: 'O(1)',
   expected_space_complexity: 'O(1)',
   eval_options: {
     require_time_complexity: true,
diff --git a/src/types/index.ts b/src/types/index.ts
index 3d2a001..f5a6372 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -29,7 +29,7 @@ export const supportedResponseTypes = [
   'ESSAY',
   'CODE',
   'MILKDOWN',
-  'PESUDOCODE'
+  'PSEUDOCODE',
   'LIKERT',
   'MATH_SINGLE_LINE',
   'MATH_MULTI_LINES',

From 3a57244e7e8a85d08a948adac361e832ea7e671a Mon Sep 17 00:00:00 2001
From: everythingfades <raymondguhonglei@163.com>
Date: Fri, 6 Mar 2026 02:57:39 +0000
Subject: [PATCH 6/6] fix: fix typing issues, add a collapse button for taking
 a screenshot for the report

---
 externals/styles/fonts.tsx                    | 174 ++++++++------
 src/sandbox-component.tsx                     |   4 +-
 src/types/Pseudocode/Pseudocode.component.tsx |   1 +
 .../components/PseudocodeFeedbackPanel.tsx    | 219 +++++++++++-------
 src/types/Pseudocode/index.tsx                |  56 +++--
 src/types/response-area-tub.ts                |  14 +-
 6 files changed, 297 insertions(+), 171 deletions(-)

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/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/Pseudocode/Pseudocode.component.tsx b/src/types/Pseudocode/Pseudocode.component.tsx
index d74ea86..bd7c2c8 100644
--- a/src/types/Pseudocode/Pseudocode.component.tsx
+++ b/src/types/Pseudocode/Pseudocode.component.tsx
@@ -28,6 +28,7 @@ export const PseudocodeInput: React.FC<PseudocodeInputProps> = ({
   feedback,
   answer
 }) => {
+  console.log(answer)
   const { classes } = usePseudocodeStyles();
 
   // Internal state fully managed in this component
diff --git a/src/types/Pseudocode/components/PseudocodeFeedbackPanel.tsx b/src/types/Pseudocode/components/PseudocodeFeedbackPanel.tsx
index 10dfc5e..6f0a7ea 100644
--- a/src/types/Pseudocode/components/PseudocodeFeedbackPanel.tsx
+++ b/src/types/Pseudocode/components/PseudocodeFeedbackPanel.tsx
@@ -1,5 +1,5 @@
 import { makeStyles } from '@styles';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { EvaluationResult } from '../types/output';
 
@@ -15,6 +15,8 @@ const useStyles = makeStyles()((theme) => ({
     flexDirection: 'column',
     gap: 16,
     fontFamily: 'Arial, sans-serif',
+    maxHeight: 420,
+    overflowY: 'auto',
   },
   header: {
     display: 'flex',
@@ -23,6 +25,19 @@ const useStyles = makeStyles()((theme) => ({
     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: {
@@ -94,6 +109,7 @@ type Props = { result: EvaluationResult };
 
 export const PseudocodeFeedbackPanel: React.FC<Props> = ({ result }) => {
   const { classes } = useStyles();
+  const [collapsed, setCollapsed] = useState(false);
 
   if (!result) return null;
 
@@ -113,92 +129,126 @@ export const PseudocodeFeedbackPanel: React.FC<Props> = ({ result }) => {
         <span className={is_correct ? classes.statusCorrect : classes.statusIncorrect}>
           {is_correct ? '✓ Correct' : '✗ Incorrect'}
         </span>
-        <span>{overall_message}</span>
-      </div>
 
-      {/* 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>
-      )}
+        <div className={classes.headerRight}>
+          <span>{overall_message}</span>
 
-      {/* 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>}
+          <button
+            className={classes.toggleButton}
+            onClick={() => setCollapsed(!collapsed)}
+          >
+            {collapsed ? 'Expand' : 'Collapse'}
+          </button>
         </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>
+      {!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>
-          ))}
-        </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>
-                    </>
-                  )}
+          {/* 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>
-                  <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>
+          )}
+
+          {/* 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>
-
-              {test.error_message && <div className={classes.failed}>Error: {test.error_message}</div>}
+              ))}
             </div>
-          ))}
-        </div>
+          )}
+        </>
       )}
     </div>
   );
@@ -212,11 +262,22 @@ const renderVariables = (
 ) => (
   <div className={classes.varTable}>
     {Object.entries(vars).map(([key, value]) => {
-      const isMismatch = compareWith && JSON.stringify(compareWith[key]) !== JSON.stringify(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}>
+          <span
+            className={
+              compareWith
+                ? isMismatch
+                  ? classes.valueMismatch
+                  : classes.valueMatch
+                : undefined
+            }
+          >
             {JSON.stringify(value)}
           </span>
         </div>
diff --git a/src/types/Pseudocode/index.tsx b/src/types/Pseudocode/index.tsx
index 8efbdcc..25e8212 100644
--- a/src/types/Pseudocode/index.tsx
+++ b/src/types/Pseudocode/index.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import z from 'zod'
 
 import {
   BaseResponseAreaProps,
@@ -26,15 +27,27 @@ export class PseudocodeResponseAreaTub extends ResponseAreaTub {
 
   /* -------------------- Schemas -------------------- */
 
-  // note to whoever wants to change this
-  // since the lambda feedback sandbox stores the answer and run extractAnswer by default
-  // when you change the schema there is a chance that the stored answer cannot be parsed, so you see the whole page errors
-  // solution: change this to z.any() temporary, change the stored answer and change this back
-  protected answerSchema = StudentResponseSchema
+  // 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
 
@@ -43,7 +56,6 @@ export class PseudocodeResponseAreaTub extends ResponseAreaTub {
   initWithConfig = (config: any) => {
     let raw = config?.answer
 
-    // 🔥 Because Wizard stringifies, we must parse here
     if (typeof raw === 'string') {
       try {
         raw = JSON.parse(raw)
@@ -59,6 +71,16 @@ export class PseudocodeResponseAreaTub extends ResponseAreaTub {
       : defaultExpectedAnswer
   }
 
+  /* -------------------- Custom Check -------------------- */
+
+  customCheck = () => {
+    if (this.previewFeedback) {
+      throw new Error('preview failed')
+    }
+
+    this.previewFeedback = null
+  }
+
   /* =====================================================
    * Student Input
    * ===================================================== */
@@ -66,12 +88,13 @@ export class PseudocodeResponseAreaTub extends ResponseAreaTub {
   public InputComponent = (
     props: BaseResponseAreaProps,
   ): JSX.Element => {
-    const parsed = this.answerSchema.safeParse(props.answer)
+
+    const parsed = StudentResponseSchema.safeParse(props.answer)
 
     const validAnswer = parsed.success
       ? parsed.data
       : defaultStudentResponse
-      
+
     const submittedFeedback: EvaluationResult | null =
       props.feedback &&
       'feedback' in props.feedback &&
@@ -79,15 +102,18 @@ export class PseudocodeResponseAreaTub extends ResponseAreaTub {
         ? JSON.parse(
             (props.feedback.feedback as string).split('<br />')[1] ?? '{}'
           )
-        : null;
+        : null
+
+    const effectiveFeedback =
+      this.previewFeedback ?? submittedFeedback
 
     return (
       <PseudocodeInput
         {...props}
         answer={validAnswer}
-        feedback={submittedFeedback}
+        feedback={effectiveFeedback}
         handleChange={(val: StudentResponse) => {
-          props.handleChange(val)
+          props.handleChange(JSON.stringify(val))
         }}
       />
     )
@@ -97,7 +123,10 @@ export class PseudocodeResponseAreaTub extends ResponseAreaTub {
    * Wizard / Teacher Input
    * ===================================================== */
 
-  public WizardComponent = (props: BaseResponseAreaWizardProps): JSX.Element => {
+  public WizardComponent = (
+    props: BaseResponseAreaWizardProps,
+  ): JSX.Element => {
+
     const [localAnswer, setLocalAnswer] = useState(this.answer)
 
     return (
@@ -106,13 +135,14 @@ export class PseudocodeResponseAreaTub extends ResponseAreaTub {
         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/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.