From 42d4c747693a22f2040d3cab1af7ad837634fb12 Mon Sep 17 00:00:00 2001
From: Krystian Fras <krystian@fras.me>
Date: Sun, 15 Dec 2024 11:29:55 +0100
Subject: [PATCH] Revert "Host calls cleanup (#251)"

This reverts commit 78fde8454f04a9a1c771b6d38f0ca467e8de3b2f.
---
 src/App.tsx                                   | 50 +++--------
 src/components/DebuggerSettings/index.tsx     |  4 +-
 src/components/HostCalls/form.tsx             | 33 ++++----
 src/components/HostCalls/index.tsx            | 40 ++++++---
 src/components/MemoryPreview/index.tsx        | 10 +--
 .../ProgramLoader/BinaryFileUpload.tsx        |  2 +-
 src/components/ProgramLoader/Bytecode.tsx     | 40 +++++++++
 src/components/ProgramLoader/Examples.tsx     | 36 +++-----
 src/components/ProgramLoader/Loader.tsx       | 24 +++++-
 src/components/ProgramTextLoader/index.tsx    | 83 +++----------------
 src/hooks/useDebuggerActions.ts               | 19 ++---
 src/packages/host-calls/read.ts               |  2 +
 .../web-worker/command-handlers/host-call.ts  |  7 +-
 .../web-worker/command-handlers/step.ts       |  4 +-
 src/packages/web-worker/types.ts              |  2 +-
 src/packages/web-worker/worker.ts             |  3 +-
 src/store/debugger/debuggerSlice.ts           | 12 +--
 src/store/workers/workersSlice.ts             | 18 ++--
 18 files changed, 174 insertions(+), 215 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index cbb550a..91dab5a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,12 +21,7 @@ import { MobileRegisters } from "./components/MobileRegisters";
 import { MobileKnowledgeBase } from "./components/KnowledgeBase/Mobile";
 import { Assembly } from "./components/ProgramLoader/Assembly";
 import { useAppDispatch, useAppSelector } from "@/store/hooks.ts";
-import {
-  setClickedInstruction,
-  setInstructionMode,
-  setIsProgramEditMode,
-  setIsProgramInvalid,
-} from "@/store/debugger/debuggerSlice.ts";
+import { setClickedInstruction, setInstructionMode, setIsProgramEditMode } from "@/store/debugger/debuggerSlice.ts";
 import { MemoryPreview } from "@/components/MemoryPreview";
 import { DebuggerControlls } from "./components/DebuggerControlls";
 import { useDebuggerActions } from "./hooks/useDebuggerActions";
@@ -34,7 +29,6 @@ import { Loader } from "./components/ProgramLoader/Loader";
 import classNames from "classnames";
 import { DebuggerSettings } from "./components/DebuggerSettings";
 import { HostCalls } from "./components/HostCalls";
-import { ProgramTextLoader } from "@/components/ProgramTextLoader";
 
 const DebuggerContent = () => {
   const dispatch = useAppDispatch();
@@ -43,7 +37,7 @@ const DebuggerContent = () => {
     program,
     initialState,
     isProgramEditMode,
-    isProgramInvalid,
+    isAsmError,
     programPreviewResult,
     clickedInstruction,
     instructionMode,
@@ -80,37 +74,18 @@ const DebuggerContent = () => {
 
   return (
     <>
-      <HostCalls />
+      <HostCalls currentInstructionEnriched={currentInstructionEnriched} />
       <div className="col-span-12 md:col-span-4 max-h-[70vh] max-sm:min-h-[330px]">
         {!program.length && <InitialLoadProgramCTA />}
         {!!program.length && (
           <>
             {isProgramEditMode && (
-              <div className="border-2 rounded-md h-full p-2">
-                {instructionMode === InstructionMode.ASM ? (
-                  <Assembly
-                    program={program}
-                    onProgramLoad={debuggerActions.handleProgramLoad}
-                    initialState={initialState}
-                  />
-                ) : (
-                  <ProgramTextLoader
-                    program={program}
-                    setProgram={(program, error) => {
-                      if (error) {
-                        dispatch(setIsProgramInvalid(true));
-                      }
-
-                      if (!error && program) {
-                        debuggerActions.handleProgramLoad({
-                          initial: initialState,
-                          program: program || [],
-                          name: "custom",
-                        });
-                      }
-                    }}
-                  />
-                )}
+              <div className="border-2 rounded-md h-full p-2 pt-8">
+                <Assembly
+                  program={program}
+                  onProgramLoad={debuggerActions.handleProgramLoad}
+                  initialState={initialState}
+                />
               </div>
             )}
 
@@ -171,6 +146,7 @@ const DebuggerContent = () => {
         <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) =>
@@ -184,7 +160,7 @@ const DebuggerContent = () => {
             variant="link"
             size="icon"
             className={!program.length ? "invisible" : "visible"}
-            disabled={!program.length || isProgramInvalid}
+            disabled={!program.length || isAsmError}
             title="Edit the code"
             onClick={() => {
               if (isProgramEditMode) {
@@ -206,7 +182,7 @@ const DebuggerContent = () => {
 };
 
 function App() {
-  const { pvmInitialized } = useAppSelector((state) => state.debugger);
+  const { pvmInitialized, initialState, program } = useAppSelector((state) => state.debugger);
 
   return (
     <>
@@ -236,7 +212,7 @@ function App() {
             ) : (
               <div className="col-span-12 flex justify-center h-[50vh] align-middle">
                 <div className="min-w-[50vw] max-md:w-[100%] min-h-[500px] h-[75vh] flex flex-col">
-                  <Loader />
+                  <Loader initialState={initialState} program={program} />
                 </div>
               </div>
             )}
diff --git a/src/components/DebuggerSettings/index.tsx b/src/components/DebuggerSettings/index.tsx
index f0c826a..768a0a6 100644
--- a/src/components/DebuggerSettings/index.tsx
+++ b/src/components/DebuggerSettings/index.tsx
@@ -30,7 +30,7 @@ export const DebuggerSettings = () => {
             <span className="text-xl">Debugger Settings</span>
           </DialogTitle>
           <DialogDescription asChild>
-            <div className="py-4">
+            <p className="py-4 ">
               <span className="block text-lg text-black font-bold mb-2">Number of batched steps</span>
               <span className="mb-3 block">
                 To speed up execution PVMs can run multiple steps internally after clicking "Run". This may lead to
@@ -48,7 +48,7 @@ export const DebuggerSettings = () => {
                 value={debuggerState.stepsToPerform}
               />
               <HostCallsForm />
-            </div>
+            </p>
           </DialogDescription>
         </DialogHeader>
       </DialogContent>
diff --git a/src/components/HostCalls/form.tsx b/src/components/HostCalls/form.tsx
index b5a7e4e..7338bda 100644
--- a/src/components/HostCalls/form.tsx
+++ b/src/components/HostCalls/form.tsx
@@ -5,8 +5,8 @@ import { hash, bytes } from "@typeberry/jam-host-calls";
 import { Storage } from "@/packages/web-worker/types";
 import { useEffect, useState } from "react";
 import { logger } from "@/utils/loggerService";
-import { setHasHostCallOpen, setStorage } from "@/store/debugger/debuggerSlice";
-import { setAllWorkersStorage } from "@/store/workers/workersSlice";
+import { setHasHostCallOpen, setIsDebugFinished, setStorage } from "@/store/debugger/debuggerSlice";
+import { handleHostCall, setAllWorkersStorage, stepAllWorkers } from "@/store/workers/workersSlice";
 import { useAppDispatch, useAppSelector } from "@/store/hooks";
 
 const parseJSONToStorage = (value: { [key: string]: string }) => {
@@ -22,13 +22,13 @@ const parseJSONToStorage = (value: { [key: string]: string }) => {
   return parsedValue;
 };
 
-export const HostCallsForm = (props: { onAfterSubmit?: () => void }) => {
+export const HostCallsForm = () => {
   const { storage } = useAppSelector((state) => state.debugger);
   const dispatch = useAppDispatch();
   const [inputValue, setInputValue] = useState<string>();
 
   useEffect(() => {
-    setInputValue(storage ? JSON.stringify(Object.fromEntries(storage.entries())) : "");
+    setInputValue(storage ? JSON.stringify(Object.fromEntries(storage)) : "");
   }, [storage]);
 
   const onSubmit = async () => {
@@ -38,7 +38,7 @@ export const HostCallsForm = (props: { onAfterSubmit?: () => void }) => {
       dispatch(setStorage(parsedValue));
       await dispatch(setAllWorkersStorage()).unwrap();
       dispatch(setHasHostCallOpen(false));
-      props.onAfterSubmit?.();
+      await dispatch(handleHostCall()).unwrap();
 
       // dispatch(setIsDebugFinished(false));
       // await dispatch(stepAllWorkers()).unwrap();
@@ -50,10 +50,7 @@ export const HostCallsForm = (props: { onAfterSubmit?: () => void }) => {
   return (
     <div className="py-4 ">
       <span className="block text-lg text-black font-bold mb-2">Storage Value</span>
-      <span className="mb-3 block">
-        Set storage for read & write host calls. Confirm empty, if you want to process. Storage can be modified by
-        running program.
-      </span>
+      <span className="mb-3 block">Lorem ipsum</span>
       <Textarea
         id="storage"
         autoFocus
@@ -61,16 +58,14 @@ export const HostCallsForm = (props: { onAfterSubmit?: () => void }) => {
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
       />
-      <div className="flex mt-2">
-        <Button type="submit" onClick={onSubmit}>
-          Confirm
-        </Button>
-        {storage !== null && (
-          <span className="flex items-center ml-3">
-            <CheckCircle color="green" className="mr-2" /> Storage provided
-          </span>
-        )}
-      </div>
+      {storage !== null && (
+        <span>
+          <CheckCircle color="green" /> Storage provided
+        </span>
+      )}
+      <Button type="submit" onClick={onSubmit}>
+        Save changes
+      </Button>
     </div>
   );
 };
diff --git a/src/components/HostCalls/index.tsx b/src/components/HostCalls/index.tsx
index 7c004cd..f4ee75c 100644
--- a/src/components/HostCalls/index.tsx
+++ b/src/components/HostCalls/index.tsx
@@ -1,10 +1,24 @@
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription, DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import { useAppDispatch, useAppSelector } from "@/store/hooks.ts";
+import { CurrentInstruction } from "@/types/pvm";
+import { isInstructionError, isOneImmediateArgs } from "@/types/type-guards";
 import { HostCallsForm } from "./form";
-import { handleHostCall } from "@/store/workers/workersSlice";
+import { setHasHostCallOpen } from "@/store/debugger/debuggerSlice.ts";
+import { Button } from "../ui/button";
 
-export const HostCalls = () => {
-  const { hasHostCallOpen } = useAppSelector((state) => state.debugger);
+export const HostCalls = ({
+  currentInstructionEnriched,
+}: {
+  currentInstructionEnriched: CurrentInstruction | undefined;
+}) => {
+  const { storage, hasHostCallOpen } = useAppSelector((state) => state.debugger);
   const dispatch = useAppDispatch();
 
   // if (
@@ -20,15 +34,17 @@ export const HostCalls = () => {
   return (
     <Dialog open={hasHostCallOpen}>
       <DialogContent className="sm:max-w-[425px]">
-        <div>
-          <DialogHeader>
-            <DialogTitle>Storage</DialogTitle>
-            <DialogDescription>
-              Debugger encountered ecalli. No storage detected. Please provide JSON storage or confirm empty
-            </DialogDescription>
-          </DialogHeader>
-          <HostCallsForm onAfterSubmit={() => dispatch(handleHostCall())} />
+        <DialogHeader>
+          <DialogTitle>Storage</DialogTitle>
+          <DialogDescription>
+            Debugger encountered ecalli. No storage detected. Please provide JSON storage or confirm empty
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid grid-cols-4 items-center gap-4">
+          <span>Type</span>
+          {/*<span>Ecalli&nbsp;{ecalliIndex}</span>*/}
         </div>
+        <HostCallsForm />
       </DialogContent>
       {/*<DialogClose*/}
       {/*  onClick={() => {*/}
diff --git a/src/components/MemoryPreview/index.tsx b/src/components/MemoryPreview/index.tsx
index 06036ed..23e7d9f 100644
--- a/src/components/MemoryPreview/index.tsx
+++ b/src/components/MemoryPreview/index.tsx
@@ -71,15 +71,7 @@ const MemoryCell = ({
           <TooltipProvider>
             <Tooltip delayDuration={0}>
               <TooltipTrigger asChild>
-                <span
-                  className="font-mono"
-                  dangerouslySetInnerHTML={{
-                    __html: numeralSystem
-                      ? "&quest;&#8288;&quest;&#8288;"
-                      : "&quest;&#8288;&quest;&#8288;&quest;&#8288;",
-                    // This is a fix for ?? : ??? because ? adds a break after which causes the whole line to break into two lines
-                  }}
-                />
+                <span>{numeralSystem ? "??" : "??? "}</span>
               </TooltipTrigger>
 
               <TooltipPortal>
diff --git a/src/components/ProgramLoader/BinaryFileUpload.tsx b/src/components/ProgramLoader/BinaryFileUpload.tsx
index be9cf39..bc3dab5 100644
--- a/src/components/ProgramLoader/BinaryFileUpload.tsx
+++ b/src/components/ProgramLoader/BinaryFileUpload.tsx
@@ -44,7 +44,7 @@ export const BinaryFileUpload = ({
 
   return (
     <div className="block">
-      <p className="mb-3">Upload program as a binary file</p>
+      <p className="mt-10 mb-3">or upload program as a binary file</p>
       <Input
         className="my-6 mr-3"
         id="test-file"
diff --git a/src/components/ProgramLoader/Bytecode.tsx b/src/components/ProgramLoader/Bytecode.tsx
index c087dd9..0cc0795 100644
--- a/src/components/ProgramLoader/Bytecode.tsx
+++ b/src/components/ProgramLoader/Bytecode.tsx
@@ -1,17 +1,57 @@
+import { ProgramTextLoader } from "../ProgramTextLoader";
 import { ProgramUploadFileOutput } from "./types";
 import { BinaryFileUpload } from "@/components/ProgramLoader/BinaryFileUpload.tsx";
+import { useState } from "react";
+
+const initial = {
+  regs: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] as [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+  ],
+  pc: 0,
+  pageMap: [],
+  memory: [],
+  gas: 10000n,
+};
 
 export const Bytecode = ({
   onProgramLoad,
+  program,
 }: {
   onProgramLoad: (val?: ProgramUploadFileOutput, error?: string) => void;
+  program: number[];
 }) => {
+  const [tempProgram, setTempProgram] = useState<number[] | undefined>(program);
   const handleFileUpload = (val: ProgramUploadFileOutput) => {
+    setTempProgram(val.program);
     onProgramLoad(val);
   };
 
   return (
     <div className="h-full flex flex-col">
+      <p className="mb-3">Edit program code bytes</p>
+      <ProgramTextLoader
+        program={tempProgram}
+        setProgram={(program, error) => {
+          if (program) {
+            setTempProgram(program);
+            onProgramLoad({ initial, program, name: "custom" }, error);
+          } else {
+            onProgramLoad(undefined, error);
+          }
+        }}
+      />
       <BinaryFileUpload onFileUpload={handleFileUpload} />
     </div>
   );
diff --git a/src/components/ProgramLoader/Examples.tsx b/src/components/ProgramLoader/Examples.tsx
index 94f416e..5b1bcd3 100644
--- a/src/components/ProgramLoader/Examples.tsx
+++ b/src/components/ProgramLoader/Examples.tsx
@@ -65,6 +65,14 @@ const programs: {
     memory: [],
     gas: 10000n,
   },
+  readAndWrite: {
+    program: [0, 0, 6, 8, 135, 9, 17, 78, 2, 25],
+    regs: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    pc: 0,
+    pageMap: [],
+    memory: [],
+    gas: 10000n,
+  },
   storeU16: {
     program: [0, 0, 5, 69, 7, 0, 0, 2, 1],
     regs: [0, 0, 0, 0, 0, 0, 0, 305419896, 0, 0, 0, 0, 0],
@@ -79,28 +87,6 @@ const programs: {
     memory: [],
     gas: 10000n,
   },
-  empty: {
-    program: [0, 0, 0],
-    regs: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] as [
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-    ],
-    pc: 0,
-    pageMap: [],
-    memory: [],
-    gas: 10000n,
-  },
 };
 
 export const Examples = ({ onProgramLoad }: { onProgramLoad: (val: ProgramUploadFileOutput) => void }) => {
@@ -154,9 +140,9 @@ export const Examples = ({ onProgramLoad }: { onProgramLoad: (val: ProgramUpload
           </Label>
         </div>
         <div className="flex items-center space-x-2">
-          <RadioGroupItem value="empty" id="option-empty" />
-          <Label htmlFor="option-empty" className="cursor-pointer">
-            Empty
+          <RadioGroupItem value="readAndWrite" id="option-readAndWrite" />
+          <Label htmlFor="option-readAndWrite" className="cursor-pointer">
+            Read and write
           </Label>
         </div>
       </RadioGroup>
diff --git a/src/components/ProgramLoader/Loader.tsx b/src/components/ProgramLoader/Loader.tsx
index 097335c..6c5ca05 100644
--- a/src/components/ProgramLoader/Loader.tsx
+++ b/src/components/ProgramLoader/Loader.tsx
@@ -1,17 +1,27 @@
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Button } from "../ui/button";
+import { Assembly } from "./Assembly";
 import { Bytecode } from "./Bytecode";
 import { Examples } from "./Examples";
 import { TextFileUpload } from "./TextFileUpload";
 import { useState, useCallback, useEffect } from "react";
 import { ProgramUploadFileOutput } from "./types";
+import { InitialState } from "@/types/pvm";
 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";
 
-export const Loader = ({ setIsDialogOpen }: { setIsDialogOpen?: (val: boolean) => void }) => {
+export const Loader = ({
+  initialState,
+  program,
+  setIsDialogOpen,
+}: {
+  initialState: InitialState;
+  program: number[];
+  setIsDialogOpen?: (val: boolean) => void;
+}) => {
   const dispatch = useAppDispatch();
   const [programLoad, setProgramLoad] = useState<ProgramUploadFileOutput>();
   const [error, setError] = useState<string>();
@@ -47,6 +57,7 @@ export const Loader = ({ setIsDialogOpen }: { setIsDialogOpen?: (val: boolean) =
           <TabsTrigger value="upload">JSON tests</TabsTrigger>
           <TabsTrigger value="examples">Examples</TabsTrigger>
           <TabsTrigger value="bytecode">RAW bytecode</TabsTrigger>
+          <TabsTrigger value="assembly">Assembly</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">
@@ -72,6 +83,17 @@ export const Loader = ({ setIsDialogOpen }: { setIsDialogOpen?: (val: boolean) =
                 setIsSubmitted(false);
                 setError(error);
               }}
+              program={program}
+            />
+          </TabsContent>
+          <TabsContent value="assembly">
+            <Assembly
+              onProgramLoad={(val) => {
+                setProgramLoad(val);
+                setIsSubmitted(false);
+              }}
+              program={program}
+              initialState={initialState}
             />
           </TabsContent>
           {error && isSubmitted && <p className="text-red-500">{error}</p>}
diff --git a/src/components/ProgramTextLoader/index.tsx b/src/components/ProgramTextLoader/index.tsx
index 9c53405..f47cf0d 100644
--- a/src/components/ProgramTextLoader/index.tsx
+++ b/src/components/ProgramTextLoader/index.tsx
@@ -1,29 +1,8 @@
 import { Textarea } from "@/components/ui/textarea.tsx";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import classNames from "classnames";
 import { bytes } from "@typeberry/block";
 import { logger } from "@/utils/loggerService";
-import { useAppSelector } from "@/store/hooks.ts";
-import { selectIsProgramInvalid } from "@/store/debugger/debuggerSlice.ts";
-
-const parseArrayLikeString = (input: string): (number | string)[] => {
-  // Remove the brackets and split the string by commas
-  const items = input
-    .replace(/^\[|\]$/g, "")
-    .split(",")
-    .map((item) => item.trim());
-
-  // Process each item
-  return items.map((item) => {
-    if (/^(?:0x)?[0-9a-fA-F]+$/i.test(item)) {
-      return parseInt(item, 16);
-    } else if (!isNaN(Number(item))) {
-      return Number(item);
-    } else {
-      return item;
-    }
-  });
-};
 
 export const ProgramTextLoader = ({
   program,
@@ -32,14 +11,11 @@ export const ProgramTextLoader = ({
   program?: number[];
   setProgram: (val?: number[], error?: string) => void;
 }) => {
-  const defaultProgram = useMemo(() => {
-    return program;
+  const [programInput, setProgramInput] = useState(program?.length ? JSON.stringify(program) : "");
+  useEffect(() => {
+    setProgramInput(program?.length ? JSON.stringify(program) : "");
   }, [program]);
 
-  const [programInput, setProgramInput] = useState(defaultProgram?.length ? JSON.stringify(defaultProgram) : "");
-  const [programError, setProgramError] = useState("");
-  const isProgramInvalid = useAppSelector(selectIsProgramInvalid);
-
   const handleOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const newInput = e.target.value.trim();
     setProgramInput(newInput);
@@ -47,68 +23,33 @@ export const ProgramTextLoader = ({
     if (!newInput.startsWith("[")) {
       try {
         const parsedBlob = bytes.BytesBlob.parseBlob(newInput);
-
-        const parsedBlobArray = Array.prototype.slice.call(parsedBlob.raw);
-
-        if (parsedBlobArray.length) {
-          setProgram(parsedBlobArray);
-        }
-
-        setProgramError("");
-      } catch (error: unknown) {
-        logger.error("Wrong binary program", { error, hideToast: true });
-
-        setProgram(undefined, "Wrong binary program");
-
-        if (error instanceof Error) {
-          if (error?.message) {
-            setProgramError(error.message);
-          }
-        }
+        setProgram(Array.prototype.slice.call(parsedBlob.raw));
+      } catch (error) {
+        logger.error("Wrong binary file", { error, hideToast: true });
+        setProgram(undefined, "Wrong binary file");
       }
     } else {
       try {
-        // Make sure that hex strings are parsed as strings for JSON.parse validation
-        const parseTest = newInput.replace(/0x([a-fA-F0-9]+)/g, '"0x$1"');
-        // Parse it just to check if it's a valid JSON
-        JSON.parse(parseTest);
-
-        const parsedJson = parseArrayLikeString(newInput);
-        const programArray = parsedJson.filter((item) => typeof item === "number") as number[];
-
-        if (programArray.length) {
-          setProgram(programArray);
-        }
-        setProgramError("");
+        JSON.parse(newInput);
+        setProgram(JSON.parse(newInput));
       } catch (error) {
         logger.error("Wrong JSON", { error, hideToast: true });
-
         setProgram(undefined, "Wrong JSON");
-
-        if (error) {
-          setProgramError(error.toString());
-        }
       }
     }
   };
 
   return (
     <div className="h-full">
-      <div className={classNames("h-full flex-auto flex gap-1 flex-col")}>
-        <p className="pb-2 mb-1">
-          <small>Edit program code bytes</small>
-        </p>
+      <div className={classNames("h-full flex-auto flex gap-1 flex-col border-2 rounded-md ")}>
         <Textarea
           autoFocus
-          className={classNames("w-full flex-auto font-mono text-base border-2 rounded-md", {
-            "focus-visible:ring-3 focus-visible:outline-none active:outline-none border-red-500": isProgramInvalid,
-          })}
+          className={classNames("w-full flex-auto font-mono border-0 text-base")}
           id="program"
           placeholder="Paste the program as an array of numbers or hex string"
           value={programInput}
           onChange={handleOnChange}
         />
-        {isProgramInvalid && <span className="text-red-500">{programError || "Program is not valid"}</span>}
       </div>
     </div>
   );
diff --git a/src/hooks/useDebuggerActions.ts b/src/hooks/useDebuggerActions.ts
index fba3f45..b23c838 100644
--- a/src/hooks/useDebuggerActions.ts
+++ b/src/hooks/useDebuggerActions.ts
@@ -6,7 +6,7 @@ import {
   setBreakpointAddresses,
   setClickedInstruction,
   setInitialState,
-  setIsProgramInvalid,
+  setIsAsmError,
   setIsDebugFinished,
   setIsRunMode,
   setProgram,
@@ -80,20 +80,11 @@ export const useDebuggerActions = () => {
   const handleProgramLoad = useCallback(
     async (data?: ProgramUploadFileOutput) => {
       if (data) {
-        const response = await startProgram({ ...data.initial, status: Status.OK }, data.program);
-        if (
-          (
-            response as unknown as {
-              error: string;
-            }
-          )?.error
-        ) {
-          dispatch(setIsProgramInvalid(true));
-        } else {
-          dispatch(setIsProgramInvalid(false));
-        }
+        await startProgram({ ...data.initial, status: Status.OK }, data.program);
+
+        dispatch(setIsAsmError(false));
       } else {
-        dispatch(setIsProgramInvalid(true));
+        dispatch(setIsAsmError(true));
       }
     },
     [startProgram, dispatch],
diff --git a/src/packages/host-calls/read.ts b/src/packages/host-calls/read.ts
index 1cc9eb2..10ac5dc 100644
--- a/src/packages/host-calls/read.ts
+++ b/src/packages/host-calls/read.ts
@@ -9,6 +9,8 @@ export class ReadAccounts implements read.Accounts {
   public readonly data: Storage = new Map();
 
   read(_serviceId: block.ServiceId, hash: hash.Blake2bHash): Promise<bytes.BytesBlob | null> {
+    console.log(this.data);
+
     const d = this.data.get(hash.toString());
     if (d === undefined) {
       throw new Error(`Unexpected call to read with ${hash}`);
diff --git a/src/packages/web-worker/command-handlers/host-call.ts b/src/packages/web-worker/command-handlers/host-call.ts
index a4da4f6..28b722d 100644
--- a/src/packages/web-worker/command-handlers/host-call.ts
+++ b/src/packages/web-worker/command-handlers/host-call.ts
@@ -9,7 +9,7 @@ import { tryAsServiceId } from "@typeberry/block";
 type HostCallParams = {
   pvm: PvmApiInterface | null;
   hostCallIdentifier: HostCallIdentifiers;
-  storage: Storage | null;
+  storage?: Storage;
 };
 type ExecuteParams = Parameters<write.Write["execute"]>;
 type RegistersType = ExecuteParams[1];
@@ -31,8 +31,7 @@ const hostCall = async ({
   if (hostCallIdentifier === HostCallIdentifiers.READ) {
     const readAccounts = new ReadAccounts(storage);
     const jamHostCall = new read.Read(readAccounts);
-    // TODO the types are the same, but exported from different packages and lost track of the type
-    jamHostCall.currentServiceId = tryAsServiceId(0x30303030) as unknown as typeof jamHostCall.currentServiceId;
+    jamHostCall.currentServiceId = tryAsServiceId(0x30303030) as any;
 
     await jamHostCall.execute(
       pvm.getInterpreter().getGasCounter(),
@@ -56,7 +55,7 @@ export const runHostCall = async ({ pvm, hostCallIdentifier, storage }: HostCall
     throw new Error("PVM is uninitialized.");
   }
 
-  if (storage === null) {
+  if (!storage) {
     throw new Error("Storage is uninitialized.");
   }
 
diff --git a/src/packages/web-worker/command-handlers/step.ts b/src/packages/web-worker/command-handlers/step.ts
index 74a9d88..17073e7 100644
--- a/src/packages/web-worker/command-handlers/step.ts
+++ b/src/packages/web-worker/command-handlers/step.ts
@@ -15,7 +15,7 @@ export type StepResponse = {
   error?: unknown;
   result: CurrentInstruction | object;
   state: ExpectedState;
-  exitArg: number;
+  exitArg?: number;
   isFinished: boolean;
 };
 
@@ -49,6 +49,6 @@ export const runStep = async ({ pvm, program, stepsToPerform, storage }: StepPar
     const data = await step({ pvm, program, stepsToPerform, storage });
     return { status: CommandStatus.SUCCESS, ...data };
   } catch (error) {
-    return { status: CommandStatus.ERROR, error, isFinished: true, result: {}, state: {}, exitArg: 0 };
+    return { status: CommandStatus.ERROR, error, isFinished: true, result: {}, state: {}, exitArg: null };
   }
 };
diff --git a/src/packages/web-worker/types.ts b/src/packages/web-worker/types.ts
index a512560..59ca23d 100644
--- a/src/packages/web-worker/types.ts
+++ b/src/packages/web-worker/types.ts
@@ -30,7 +30,7 @@ export type WorkerResponseParams = CommonWorkerResponseParams &
     | { command: Commands.STOP; payload: { isRunMode: boolean } }
     | { command: Commands.MEMORY; payload: { memoryChunk: Uint8Array } }
     | { command: Commands.SET_STORAGE }
-    | { command: Commands.HOST_CALL }
+    | { command: Commands.HOST_CALL; payload: { hostCallIdentifier: HostCallIdentifiers; storage: Storage } }
   );
 
 type CommonWorkerRequestParams = { messageId: string };
diff --git a/src/packages/web-worker/worker.ts b/src/packages/web-worker/worker.ts
index ed197a3..7e67c7f 100644
--- a/src/packages/web-worker/worker.ts
+++ b/src/packages/web-worker/worker.ts
@@ -104,14 +104,13 @@ onmessage = async (e: MessageEvent<WorkerRequestParams>) => {
       messageId: e.data.messageId,
     });
   } else if (e.data.command === Commands.HOST_CALL) {
-    await commandHandlers.runHostCall({
+    const data = await commandHandlers.runHostCall({
       pvm,
       hostCallIdentifier: e.data.payload.hostCallIdentifier,
       storage,
     });
 
     postTypedMessage({
-      status: CommandStatus.SUCCESS,
       command: Commands.HOST_CALL,
       messageId: e.data.messageId,
     });
diff --git a/src/store/debugger/debuggerSlice.ts b/src/store/debugger/debuggerSlice.ts
index b5b3d0d..f02b057 100644
--- a/src/store/debugger/debuggerSlice.ts
+++ b/src/store/debugger/debuggerSlice.ts
@@ -5,12 +5,12 @@ import { RootState } from "@/store";
 import { Storage } from "@/packages/web-worker/types";
 
 export interface DebuggerState {
-  isProgramInvalid: boolean;
   breakpointAddresses: number[];
   clickedInstruction: CurrentInstruction | null;
   hasHostCallOpen: boolean;
   initialState: ExpectedState;
   instructionMode: InstructionMode;
+  isAsmError: boolean;
   isDebugFinished: boolean;
   isProgramEditMode: boolean;
   isRunMode: boolean;
@@ -32,7 +32,7 @@ const initialState: DebuggerState = {
     gas: 10000n,
   },
   isProgramEditMode: false,
-  isProgramInvalid: false,
+  isAsmError: false,
   isRunMode: false,
   isStepMode: false,
   hasHostCallOpen: false,
@@ -59,8 +59,8 @@ const debuggerSlice = createSlice({
     setIsProgramEditMode(state, action) {
       state.isProgramEditMode = action.payload;
     },
-    setIsProgramInvalid(state, action) {
-      state.isProgramInvalid = action.payload;
+    setIsAsmError(state, action) {
+      state.isAsmError = action.payload;
     },
     setIsRunMode(state, action) {
       state.isRunMode = action.payload;
@@ -99,12 +99,12 @@ const debuggerSlice = createSlice({
 });
 
 export const {
-  setIsProgramInvalid,
   setBreakpointAddresses,
   setClickedInstruction,
   setHasHostCallOpen,
   setInitialState,
   setInstructionMode,
+  setIsAsmError,
   setIsDebugFinished,
   setIsProgramEditMode,
   setIsRunMode,
@@ -119,7 +119,7 @@ export const {
 export const selectProgram = (state: RootState) => state.debugger.program;
 export const selectInitialState = (state: RootState) => state.debugger.initialState;
 export const selectIsProgramEditMode = (state: RootState) => state.debugger.isProgramEditMode;
-export const selectIsProgramInvalid = (state: RootState) => state.debugger.isProgramInvalid;
+export const selectIsAsmError = (state: RootState) => state.debugger.isAsmError;
 export const selectIsRunMode = (state: RootState) => state.debugger.isRunMode;
 export const selectProgramPreviewResult = (state: RootState) => state.debugger.programPreviewResult;
 export const selectBreakpointAddresses = (state: RootState) => state.debugger.breakpointAddresses;
diff --git a/src/store/workers/workersSlice.ts b/src/store/workers/workersSlice.ts
index c8482b9..3c3c0dc 100644
--- a/src/store/workers/workersSlice.ts
+++ b/src/store/workers/workersSlice.ts
@@ -265,13 +265,15 @@ export const handleHostCall = createAsyncThunk("workers/handleHostCall", async (
           payload: { hostCallIdentifier: worker.exitArg as HostCallIdentifiers },
         });
 
-        if ((getState() as RootState).debugger.isRunMode) {
-          dispatch(continueAllWorkers());
-        }
+        // if (resp) {
+          if (getState().debugger.isRunMode) {
+            dispatch(continueAllWorkers());
+          }
+        // }
 
-        if (hasCommandStatusError(resp)) {
-          throw resp.error;
-        }
+        // if (hasCommandStatusError(resp)) {
+        //   throw resp.error;
+        // }
       }),
     );
 
@@ -349,9 +351,7 @@ export const stepAllWorkers = createAsyncThunk("workers/stepAllWorkers", async (
         command: Commands.STEP,
         payload: {
           program: new Uint8Array(debuggerState.program),
-          // NOTE [ToDr] Despite settings "batched steps", when
-          // the user clicks "Step" we want just single step to happen.
-          stepsToPerform: 1,
+          stepsToPerform: debuggerState.stepsToPerform,
         },
       });