Unify loading with test files

src/components/ProgramLoader/Examples.tsx

@@ -106,7 +106,7 @@ const programs: {
 export const Examples = ({ onProgramLoad }: { onProgramLoad: (val: ProgramUploadFileOutput) => void }) => {
   return (
     <div>
-      <p className="mb-2">Load example test file</p>
+      <h2 className="text-lg mb-4">Load an example test file</h2>
       <RadioGroup
         defaultValue="option-fibonacci"
         onValueChange={(val) =>

src/components/ProgramLoader/Loader.tsx

@@ -1,15 +1,14 @@
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Button } from "../ui/button";
-import { Bytecode } from "./Bytecode";
 import { Examples } from "./Examples";
-import { TextFileUpload } from "./TextFileUpload";
 import { useState, useCallback, useEffect } from "react";
 import { ProgramUploadFileOutput } from "./types";
 import { useDebuggerActions } from "@/hooks/useDebuggerActions";
 import { useAppDispatch, useAppSelector } from "@/store/hooks.ts";
 import { setIsProgramEditMode } from "@/store/debugger/debuggerSlice.ts";
 import { selectIsAnyWorkerLoading } from "@/store/workers/workersSlice";
 import { isSerializedError } from "@/store/utils";
+import { ProgramFileUpload } from "@/components/ProgramLoader/ProgramFileUpload.tsx";
 
 export const Loader = ({ setIsDialogOpen }: { setIsDialogOpen?: (val: boolean) => void }) => {
   const dispatch = useAppDispatch();
@@ -46,11 +45,10 @@ export const Loader = ({ setIsDialogOpen }: { setIsDialogOpen?: (val: boolean) =
         <TabsList>
           <TabsTrigger value="upload">Upload file</TabsTrigger>
           <TabsTrigger value="examples">Start with examples</TabsTrigger>
-          <TabsTrigger value="bytecode">RAW bytecode</TabsTrigger>
         </TabsList>
         <div className="border-2 rounded p-4 flex-1 flex flex-col w-full h-full overflow-auto md:px-5">
           <TabsContent value="upload">
-            <TextFileUpload
+            <ProgramFileUpload
               onFileUpload={(val) => {
                 setProgramLoad(val);
                 setIsSubmitted(false);
@@ -65,15 +63,6 @@ export const Loader = ({ setIsDialogOpen }: { setIsDialogOpen?: (val: boolean) =
               }}
             />
           </TabsContent>
-          <TabsContent value="bytecode">
-            <Bytecode
-              onProgramLoad={(val, error) => {
-                setProgramLoad(val);
-                setIsSubmitted(false);
-                setError(error);
-              }}
-            />
-          </TabsContent>
           {error && isSubmitted && <p className="text-red-500">{error}</p>}
         </div>
       </Tabs>

src/components/ProgramLoader/ProgramFileUpload.tsx

@@ -0,0 +1,127 @@
+import { ExternalLink } from "lucide-react";
+import { Input } from "../ui/input";
+import { ProgramUploadFileOutput } from "./types";
+import { mapUploadFileInputToOutput } from "./utils";
+import { decodeStandardProgram } from "@typeberry/pvm-debugger-adapter";
+import { RegistersArray } from "@/types/pvm.ts";
+
+export const ProgramFileUpload = ({
+  onFileUpload,
+  close,
+}: {
+  onFileUpload: (val: ProgramUploadFileOutput) => void;
+  close?: () => void;
+}) => {
+  let fileReader: FileReader;
+
+  const handleFileRead = (e: ProgressEvent<FileReader>) => {
+    const arrayBuffer = e.target?.result;
+    // const fileContent = fileReader?.result;
+
+    if (arrayBuffer instanceof ArrayBuffer) {
+      // Try to parse file as a JSON first
+      try {
+        const stringContent = new TextDecoder("utf-8").decode(arrayBuffer);
+
+        const jsonFile = JSON.parse(stringContent);
+        onFileUpload(mapUploadFileInputToOutput(jsonFile));
+      } catch (e) {
+        const uint8Array = new Uint8Array(arrayBuffer);
+
+        // Try to decode the program as an SPI
+        try {
+          const { code, /*memory,*/ registers } = decodeStandardProgram(uint8Array, new Uint8Array());
+
+          onFileUpload({
+            program: Array.from(code),
+            name: "custom",
+            initial: {
+              regs: Array.from(registers) as RegistersArray,
+              pc: 0,
+              pageMap: [],
+              // TODO: map memory properly
+              // memory: [...memory],
+              gas: 10000n,
+            },
+          });
+        } catch (e) {
+          // Try to load program as a Generic
+          onFileUpload({
+            program: Array.from(uint8Array),
+            name: "custom",
+            initial: {
+              regs: Array.from([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]) as RegistersArray,
+              pc: 0,
+              pageMap: [],
+              gas: 10000n,
+            },
+          });
+        }
+      }
+    }
+  };
+
+  const handleProgramUpload = (file: Blob) => {
+    fileReader = new FileReader();
+    fileReader.onloadend = handleFileRead;
+    fileReader.readAsArrayBuffer(file);
+  };
+
+  return (
+    <div className="block pb-[100px]">
+      <h2 className="text-lg">Load a file in one of the following formats:</h2>
+      <ul className="list-disc p-4">
+        <li>
+          <p>JSON test file compatible with JAM TestVectors JSON</p>
+          <p>
+            <small>
+              Examples can be found in <a href="https://github.com/w3f/jamtestvectors">wf3/jamtestvectors</a> Github
+              repo&nbsp;
+              <a href="https://github.com/w3f/jamtestvectors/pull/3/files" target="_blank">
+                <ExternalLink className="inline w-4 mb-1 text-blue-600" />
+              </a>
+            </small>
+          </p>
+        </li>
+        <li>
+          <p>JAM SPI program</p>
+          <p>
+            <small>
+              SPI program definition can be found in
+              <a href="https://graypaper.fluffylabs.dev/#/5b732de/2a7e022a7e02" target="_blank">
+                &nbsp;a GrayPaper&nbsp;
+                <ExternalLink className="inline w-4 mb-1 text-blue-600" />
+              </a>
+            </small>
+          </p>
+        </li>
+        <li>
+          <p>Generic PVM program</p>
+          <p>
+            <small>
+              Generic program definition can be found in
+              <a href="https://graypaper.fluffylabs.dev/#/5b732de/23c60023c600" target="_blank">
+                &nbsp;a GrayPaper&nbsp;
+                <ExternalLink className="inline w-4 mb-1 text-blue-600" />
+              </a>
+            </small>
+          </p>
+        </li>
+      </ul>
+
+      <Input
+        className="mt-5 mr-3"
+        id="test-file"
+        type="file"
+        accept=".bin,.pvm,.json"
+        onClick={(e) => e.stopPropagation()}
+        onChange={(e) => {
+          if (e.target.files?.length) {
+            handleProgramUpload(e.target.files[0]);
+            close?.();
+          }
+        }}
+      />
+    </div>
+  );
+};