Integrate Assembler from polkavm's spectool

package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tanstack/react-table": "^8.19.3",
     "@typeberry/pvm": "0.0.1-802cddc",
+    "@typeberry/spectool-wasm": "^0.11.0",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
@@ -52,6 +53,7 @@
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
+    "esbuild": "^0.24.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
@@ -61,7 +63,9 @@
     "prettier": "3.3.3",
     "tailwindcss": "^3.4.6",
     "typescript": "^5.2.2",
-    "vite": "^5.4.7"
+    "vite": "^5.4.7",
+    "vite-plugin-top-level-await": "^1.4.4",
+    "vite-plugin-wasm": "^3.3.0"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [

src/App.css

@@ -8,7 +8,3 @@
 #numerical-system-mode {
   background-color: hsl(var(--primary));
 }
-
-button.hidden-button {
-  display: none !important;
-}

src/App.tsx

@@ -6,9 +6,8 @@ import { Registers } from "./components/Registers";
 import { CurrentInstruction, ExpectedState, InitialState, Status } from "./types/pvm";
 
 import { disassemblify } from "./packages/pvm/pvm/disassemblify";
-import { Play, RefreshCcw, StepForward, Check } from "lucide-react";
+import { Play, RefreshCcw, StepForward, Pencil, PencilOff } from "lucide-react";
 import { Header } from "@/components/Header";
-import { ProgramLoader } from "@/components/ProgramLoader";
 import { MemoryPreview } from "@/components/MemoryPreview";
 import { KnowledgeBase } from "@/components/KnowledgeBase";
 import { ProgramUpload } from "@/components/ProgramUpload";
@@ -25,9 +24,11 @@ import { InitialLoadProgramCTA } from "@/components/InitialLoadProgramCTA";
 import { MobileRegisters } from "./components/MobileRegisters";
 import { MobileKnowledgeBase } from "./components/KnowledgeBase/Mobile";
 import { virtualTrapInstruction } from "./utils/virtualTrapInstruction";
+import { Assembly } from "./components/ProgramUpload/Assembly";
 
 function App() {
   const [program, setProgram] = useState<number[]>([]);
+  const [isAsmError, setAsmError] = useState(false);
   const [isProgramEditMode, setIsProgramEditMode] = useState(false);
   const [initialState, setInitialState] = useState<InitialState>({
     regs: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -108,36 +109,47 @@ function App() {
     initialState,
   ]);
 
-  const startProgram = (initialState: ExpectedState, program: number[]) => {
-    setInitialState(initialState);
-    setProgram(program);
-    const currentState = {
-      pc: 0,
-      regs: initialState.regs,
-      gas: initialState.gas,
-      status: Status.OK,
-    };
-    setCurrentState(currentState);
-    setPreviousState(currentState);
-
-    setIsDebugFinished(false);
-
-    worker.postMessage({ command: "init", payload: { program, initialState } });
-
-    try {
-      const result = disassemblify(new Uint8Array(program));
-      console.info("Disassembly result:", result);
-      setProgramPreviewResult(result);
-      setCurrentInstruction(result?.[0]);
-      setPvmInitialized(true);
-    } catch (e) {
-      console.log("Error disassembling program", e);
-    }
-  };
+  const startProgram = useCallback(
+    (initialState: ExpectedState, newProgram: number[]) => {
+      setInitialState(initialState);
+      setProgram(newProgram);
+      const currentState = {
+        pc: 0,
+        regs: initialState.regs,
+        gas: initialState.gas,
+        status: Status.OK,
+      };
+      setCurrentState(currentState);
+      setPreviousState(currentState);
+
+      setIsDebugFinished(false);
+
+      worker.postMessage({ command: "init", payload: { program: newProgram, initialState } });
+
+      try {
+        const result = disassemblify(new Uint8Array(newProgram));
+        console.info("Disassembly result:", result);
+        setProgramPreviewResult(result);
+        setCurrentInstruction(result?.[0]);
+        setPvmInitialized(true);
+      } catch (e) {
+        console.log("Error disassembling program", e);
+      }
+    },
+    [setCurrentInstruction],
+  );
 
-  const handleFileUpload = ({ initial, program }: ProgramUploadFileOutput) => {
-    startProgram(initial, program);
-  };
+  const handleFileUpload = useCallback(
+    (data?: ProgramUploadFileOutput) => {
+      if (data) {
+        startProgram(data.initial, data.program);
+        setAsmError(false);
+      } else {
+        setAsmError(true);
+      }
+    },
+    [startProgram],
+  );
 
   const onNext = () => {
     setIsRunMode(false);
@@ -164,13 +176,16 @@ function App() {
     worker.postMessage({ command: "step", payload: { program } });
   };
 
-  const restartProgram = (state: InitialState) => {
-    setIsDebugFinished(false);
-    setCurrentState(state);
-    setPreviousState(state);
-    setCurrentInstruction(programPreviewResult?.[0]);
-    worker.postMessage({ command: "init", payload: { program, initialState: state } });
-  };
+  const restartProgram = useCallback(
+    (state: InitialState) => {
+      setIsDebugFinished(false);
+      setCurrentState(state);
+      setPreviousState(state);
+      setCurrentInstruction(programPreviewResult?.[0]);
+      worker.postMessage({ command: "init", payload: { program, initialState: state } });
+    },
+    [setCurrentInstruction, program, programPreviewResult],
+  );
 
   const handleBreakpointClick = (address: number) => {
     if (breakpointAddresses.includes(address)) {
@@ -207,39 +222,32 @@ function App() {
           <div className="grid grid-rows md:grid-cols-12 gap-1.5 pt-2">
             <div className="col-span-12 md:col-span-6 max-sm:order-2 flex align-middle max-sm:justify-between mb-3">
               <div className="md:mr-3">
-                <ProgramUpload onFileUpload={handleFileUpload} program={program} />
+                <ProgramUpload initialState={initialState} onFileUpload={handleFileUpload} program={program} />
               </div>
-              <Button
-                className="md:mr-3 hidden-button"
-                disabled={!program.length}
-                onClick={() => {
-                  if (isProgramEditMode) {
-                    startProgram(initialState, program);
-                    setIsProgramEditMode(false);
-                  } else {
-                    restartProgram(initialState);
-                    setIsProgramEditMode(true);
-                  }
-                }}
-              >
-                {isProgramEditMode ? <Check /> : "Edit"}
-              </Button>
               <Button
                 className="md:mr-3"
                 onClick={() => {
                   restartProgram(initialState);
                   setCurrentInstruction(programPreviewResult?.[0]);
                 }}
-                disabled={!pvmInitialized}
+                disabled={!pvmInitialized || isProgramEditMode}
               >
                 <RefreshCcw className="w-3.5 md:mr-1.5" />
                 <span className="hidden md:block">Reset</span>
               </Button>
-              <Button className="md:mr-3" onClick={handleRunProgram} disabled={isDebugFinished || !pvmInitialized}>
+              <Button
+                className="md:mr-3"
+                onClick={handleRunProgram}
+                disabled={isDebugFinished || !pvmInitialized || isProgramEditMode}
+              >
                 <Play className="w-3.5 md:mr-1.5" />
                 <span className="hidden md:block">Run</span>
               </Button>
-              <Button className="md:mr-3" onClick={onNext} disabled={isDebugFinished || !pvmInitialized}>
+              <Button
+                className="md:mr-3"
+                onClick={onNext}
+                disabled={isDebugFinished || !pvmInitialized || isProgramEditMode}
+              >
                 <StepForward className="w-3.5 md:mr-1.5" />
                 <span className="hidden md:block">Step</span>
               </Button>
@@ -257,9 +265,9 @@ function App() {
               {!!program.length && (
                 <>
                   {isProgramEditMode && (
-                    <>
-                      <ProgramLoader program={program} setProgram={setProgram} />
-                    </>
+                    <div className="border-2 rounded-md h-full p-2 pt-8">
+                      <Assembly program={program} onFileUpload={handleFileUpload} initialState={initialState} />
+                    </div>
                   )}
 
                   {!isProgramEditMode && (
@@ -287,7 +295,7 @@ function App() {
                   setInitialState(state);
                   restartProgram(state);
                 }}
-                allowEditing={isProgramEditMode}
+                allowEditing={false}
               />
             </div>
 
@@ -315,21 +323,38 @@ function App() {
               />
             </div>
 
-            <div className="col-span-12 md:col-span-3 max-sm:order-first flex items-center justify-between my-3">
-              <div>
-                {!isProgramEditMode && (
-                  <div className="flex items-center space-x-2">
-                    <Label htmlFor="instruction-mode">ASM</Label>
-                    <Switch
-                      id="instruction-mode"
-                      checked={instructionMode === InstructionMode.BYTECODE}
-                      onCheckedChange={(checked) =>
-                        setInstructionMode(checked ? InstructionMode.BYTECODE : InstructionMode.ASM)
-                      }
-                    />
-                    <Label htmlFor="instruction-mode">RAW</Label>
-                  </div>
-                )}
+            <div className="col-span-12 md:col-span-4 max-sm:order-first flex items-center justify-between my-3">
+              <div className={`flex items-center space-x-2 ${!program.length ? "invisible" : "visible"}`}>
+                <Label htmlFor="instruction-mode">ASM</Label>
+                <Switch
+                  disabled={isProgramEditMode}
+                  id="instruction-mode"
+                  checked={instructionMode === InstructionMode.BYTECODE}
+                  onCheckedChange={(checked) =>
+                    setInstructionMode(checked ? InstructionMode.BYTECODE : InstructionMode.ASM)
+                  }
+                />
+                <Label htmlFor="instruction-mode">RAW</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Button
+                  variant="link"
+                  size="icon"
+                  className={!program.length ? "invisible" : "visible"}
+                  disabled={!program.length || isAsmError}
+                  title="Edit the code"
+                  onClick={() => {
+                    if (isProgramEditMode) {
+                      startProgram(initialState, program);
+                      setIsProgramEditMode(false);
+                    } else {
+                      restartProgram(initialState);
+                      setIsProgramEditMode(true);
+                    }
+                  }}
+                >
+                  {isProgramEditMode ? <PencilOff /> : <Pencil />}
+                </Button>
               </div>
               <NumeralSystemSwitch className="ml-3 md:hidden" />
             </div>

src/components/ProgramLoader/index.tsx

@@ -2,41 +2,46 @@ import { Textarea } from "@/components/ui/textarea.tsx";
 import { useEffect, useState } from "react";
 import classNames from "classnames";
 
-export const ProgramLoader = ({ program, setProgram }: { program?: number[]; setProgram: (val: number[]) => void }) => {
+export const ProgramLoader = ({
+  program,
+  setProgram,
+}: {
+  program?: number[];
+  setProgram: (val?: number[]) => void;
+}) => {
   const [programInput, setProgramInput] = useState(program?.length ? JSON.stringify(program) : "");
   const [isInvalidProgram, setIsInvalidProgram] = useState(false);
-  console.log(programInput);
   useEffect(() => {
     setProgramInput(program?.length ? JSON.stringify(program) : "");
   }, [program]);
 
   return (
     <div
-      className={classNames("flex gap-1 flex-col border-2 rounded-md h-full", { "border-red-500": isInvalidProgram })}
+      className={classNames("flex-auto flex gap-1 flex-col border-2 rounded-md ", {
+        "border-red-500": isInvalidProgram,
+      })}
     >
-      <div className="w-full h-full">
-        <Textarea
-          rows={7}
-          autoFocus
-          className={classNames("w-full h-full font-mono border-0 text-base", {
-            "focus-visible:ring-3 focus-visible:outline-none active:outline-none": isInvalidProgram,
-          })}
-          id="program"
-          placeholder="Paste the program as an array of numbers"
-          value={programInput}
-          onChange={(e) => {
-            setProgramInput(e.target.value);
-            try {
-              JSON.parse(e.target.value);
-              setProgram(JSON.parse(e.target.value));
-              setIsInvalidProgram(false);
-            } catch (e) {
-              console.log("wrong json");
-              setIsInvalidProgram(true);
-            }
-          }}
-        />
-      </div>
+      <Textarea
+        autoFocus
+        className={classNames("w-full flex-auto font-mono border-0 text-base", {
+          "focus-visible:ring-3 focus-visible:outline-none active:outline-none": isInvalidProgram,
+        })}
+        id="program"
+        placeholder="Paste the program as an array of numbers"
+        value={programInput}
+        onChange={(e) => {
+          setProgramInput(e.target.value);
+          try {
+            JSON.parse(e.target.value);
+            setProgram(JSON.parse(e.target.value));
+            setIsInvalidProgram(false);
+          } catch (e) {
+            console.log("wrong json");
+            setIsInvalidProgram(true);
+            setProgram();
+          }
+        }}
+      />
     </div>
   );
 };