From 78fde8454f04a9a1c771b6d38f0ca467e8de3b2f Mon Sep 17 00:00:00 2001
From: Krystian Fras <krystian@fras.me>
Date: Sun, 15 Dec 2024 11:29:34 +0100
Subject: [PATCH] Host calls cleanup (#251)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix multi-PVM visual glitch (#241)

* Don't perform multiple steps when Stepping in the UI. (#240)

* Fix multi-PVM visual glitch (#243)

* Modify program editor to be available only in edit mode; improve error handling (#242)

* Move program code input to edit mode

* Handle errors in program text editor

* Allow for hex in array as a program input

* Fix linter

* refactor

---------

Co-authored-by: Wojciech Kwiatek <wojtek.kwiatek@gmail.com>
Co-authored-by: Tomek Drwięga <tomusdrw@users.noreply.github.com>
---
 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, 215 insertions(+), 174 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 91dab5a..cbb550a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,7 +21,12 @@ 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 } from "@/store/debugger/debuggerSlice.ts";
+import {
+  setClickedInstruction,
+  setInstructionMode,
+  setIsProgramEditMode,
+  setIsProgramInvalid,
+} from "@/store/debugger/debuggerSlice.ts";
 import { MemoryPreview } from "@/components/MemoryPreview";
 import { DebuggerControlls } from "./components/DebuggerControlls";
 import { useDebuggerActions } from "./hooks/useDebuggerActions";
@@ -29,6 +34,7 @@ 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();
@@ -37,7 +43,7 @@ const DebuggerContent = () => {
     program,
     initialState,
     isProgramEditMode,
-    isAsmError,
+    isProgramInvalid,
     programPreviewResult,
     clickedInstruction,
     instructionMode,
@@ -74,18 +80,37 @@ const DebuggerContent = () => {
 
   return (
     <>
-      <HostCalls currentInstructionEnriched={currentInstructionEnriched} />
+      <HostCalls />
       <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 pt-8">
-                <Assembly
-                  program={program}
-                  onProgramLoad={debuggerActions.handleProgramLoad}
-                  initialState={initialState}
-                />
+              <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>
             )}
 
@@ -146,7 +171,6 @@ 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) =>
@@ -160,7 +184,7 @@ const DebuggerContent = () => {
             variant="link"
             size="icon"
             className={!program.length ? "invisible" : "visible"}
-            disabled={!program.length || isAsmError}
+            disabled={!program.length || isProgramInvalid}
             title="Edit the code"
             onClick={() => {
               if (isProgramEditMode) {
@@ -182,7 +206,7 @@ const DebuggerContent = () => {
 };
 
 function App() {
-  const { pvmInitialized, initialState, program } = useAppSelector((state) => state.debugger);
+  const { pvmInitialized } = useAppSelector((state) => state.debugger);
 
   return (
     <>
@@ -212,7 +236,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 initialState={initialState} program={program} />
+                  <Loader />
                 </div>
               </div>
             )}
diff --git a/src/components/DebuggerSettings/index.tsx b/src/components/DebuggerSettings/index.tsx
index 768a0a6..f0c826a 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>
-            <p className="py-4 ">
+            <div 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 />
-            </p>
+            </div>
           </DialogDescription>
         </DialogHeader>
       </DialogContent>
diff --git a/src/components/HostCalls/form.tsx b/src/components/HostCalls/form.tsx
index 7338bda..b5a7e4e 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, setIsDebugFinished, setStorage } from "@/store/debugger/debuggerSlice";
-import { handleHostCall, setAllWorkersStorage, stepAllWorkers } from "@/store/workers/workersSlice";
+import { setHasHostCallOpen, setStorage } from "@/store/debugger/debuggerSlice";
+import { setAllWorkersStorage } 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 = () => {
+export const HostCallsForm = (props: { onAfterSubmit?: () => void }) => {
   const { storage } = useAppSelector((state) => state.debugger);
   const dispatch = useAppDispatch();
   const [inputValue, setInputValue] = useState<string>();
 
   useEffect(() => {
-    setInputValue(storage ? JSON.stringify(Object.fromEntries(storage)) : "");
+    setInputValue(storage ? JSON.stringify(Object.fromEntries(storage.entries())) : "");
   }, [storage]);
 
   const onSubmit = async () => {
@@ -38,7 +38,7 @@ export const HostCallsForm = () => {
       dispatch(setStorage(parsedValue));
       await dispatch(setAllWorkersStorage()).unwrap();
       dispatch(setHasHostCallOpen(false));
-      await dispatch(handleHostCall()).unwrap();
+      props.onAfterSubmit?.();
 
       // dispatch(setIsDebugFinished(false));
       // await dispatch(stepAllWorkers()).unwrap();
@@ -50,7 +50,10 @@ export const HostCallsForm = () => {
   return (
     <div className="py-4 ">
       <span className="block text-lg text-black font-bold mb-2">Storage Value</span>
-      <span className="mb-3 block">Lorem ipsum</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>
       <Textarea
         id="storage"
         autoFocus
@@ -58,14 +61,16 @@ export const HostCallsForm = () => {
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
       />
-      {storage !== null && (
-        <span>
-          <CheckCircle color="green" /> Storage provided
-        </span>
-      )}
-      <Button type="submit" onClick={onSubmit}>
-        Save changes
-      </Button>
+      <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>
     </div>
   );
 };
diff --git a/src/components/HostCalls/index.tsx b/src/components/HostCalls/index.tsx
index f4ee75c..7c004cd 100644
--- a/src/components/HostCalls/index.tsx
+++ b/src/components/HostCalls/index.tsx
@@ -1,24 +1,10 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription, DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogDescription, 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 { setHasHostCallOpen } from "@/store/debugger/debuggerSlice.ts";
-import { Button } from "../ui/button";
+import { handleHostCall } from "@/store/workers/workersSlice";
 
-export const HostCalls = ({
-  currentInstructionEnriched,
-}: {
-  currentInstructionEnriched: CurrentInstruction | undefined;
-}) => {
-  const { storage, hasHostCallOpen } = useAppSelector((state) => state.debugger);
+export const HostCalls = () => {
+  const { hasHostCallOpen } = useAppSelector((state) => state.debugger);
   const dispatch = useAppDispatch();
 
   // if (
@@ -34,17 +20,15 @@ export const HostCalls = ({
   return (
     <Dialog open={hasHostCallOpen}>
       <DialogContent className="sm:max-w-[425px]">
-        <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>
+          <DialogHeader>
+            <DialogTitle>Storage</DialogTitle>
+            <DialogDescription>
+              Debugger encountered ecalli. No storage detected. Please provide JSON storage or confirm empty
+            </DialogDescription>
+          </DialogHeader>
+          <HostCallsForm onAfterSubmit={() => dispatch(handleHostCall())} />
         </div>
-        <HostCallsForm />
       </DialogContent>
       {/*<DialogClose*/}
       {/*  onClick={() => {*/}
diff --git a/src/components/MemoryPreview/index.tsx b/src/components/MemoryPreview/index.tsx
index 23e7d9f..06036ed 100644
--- a/src/components/MemoryPreview/index.tsx
+++ b/src/components/MemoryPreview/index.tsx
@@ -71,7 +71,15 @@ const MemoryCell = ({
           <TooltipProvider>
             <Tooltip delayDuration={0}>
               <TooltipTrigger asChild>
-                <span>{numeralSystem ? "??" : "??? "}</span>
+                <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
+                  }}
+                />
               </TooltipTrigger>
 
               <TooltipPortal>
diff --git a/src/components/ProgramLoader/BinaryFileUpload.tsx b/src/components/ProgramLoader/BinaryFileUpload.tsx
index bc3dab5..be9cf39 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="mt-10 mb-3">or upload program as a binary file</p>
+      <p className="mb-3">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 0cc0795..c087dd9 100644
--- a/src/components/ProgramLoader/Bytecode.tsx
+++ b/src/components/ProgramLoader/Bytecode.tsx
@@ -1,57 +1,17 @@
-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 5b1bcd3..94f416e 100644
--- a/src/components/ProgramLoader/Examples.tsx
+++ b/src/components/ProgramLoader/Examples.tsx
@@ -65,14 +65,6 @@ 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],
@@ -87,6 +79,28 @@ 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 }) => {
@@ -140,9 +154,9 @@ export const Examples = ({ onProgramLoad }: { onProgramLoad: (val: ProgramUpload
           </Label>
         </div>
         <div className="flex items-center space-x-2">
-          <RadioGroupItem value="readAndWrite" id="option-readAndWrite" />
-          <Label htmlFor="option-readAndWrite" className="cursor-pointer">
-            Read and write
+          <RadioGroupItem value="empty" id="option-empty" />
+          <Label htmlFor="option-empty" className="cursor-pointer">
+            Empty
           </Label>
         </div>
       </RadioGroup>
diff --git a/src/components/ProgramLoader/Loader.tsx b/src/components/ProgramLoader/Loader.tsx
index 6c5ca05..097335c 100644
--- a/src/components/ProgramLoader/Loader.tsx
+++ b/src/components/ProgramLoader/Loader.tsx
@@ -1,27 +1,17 @@
 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 = ({
-  initialState,
-  program,
-  setIsDialogOpen,
-}: {
-  initialState: InitialState;
-  program: number[];
-  setIsDialogOpen?: (val: boolean) => void;
-}) => {
+export const Loader = ({ setIsDialogOpen }: { setIsDialogOpen?: (val: boolean) => void }) => {
   const dispatch = useAppDispatch();
   const [programLoad, setProgramLoad] = useState<ProgramUploadFileOutput>();
   const [error, setError] = useState<string>();
@@ -57,7 +47,6 @@ export const Loader = ({
           <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">
@@ -83,17 +72,6 @@ export const Loader = ({
                 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 f47cf0d..9c53405 100644
--- a/src/components/ProgramTextLoader/index.tsx
+++ b/src/components/ProgramTextLoader/index.tsx
@@ -1,8 +1,29 @@
 import { Textarea } from "@/components/ui/textarea.tsx";
-import React, { useEffect, useState } from "react";
+import React, { useMemo, 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,
@@ -11,11 +32,14 @@ export const ProgramTextLoader = ({
   program?: number[];
   setProgram: (val?: number[], error?: string) => void;
 }) => {
-  const [programInput, setProgramInput] = useState(program?.length ? JSON.stringify(program) : "");
-  useEffect(() => {
-    setProgramInput(program?.length ? JSON.stringify(program) : "");
+  const defaultProgram = useMemo(() => {
+    return 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);
@@ -23,33 +47,68 @@ export const ProgramTextLoader = ({
     if (!newInput.startsWith("[")) {
       try {
         const parsedBlob = bytes.BytesBlob.parseBlob(newInput);
-        setProgram(Array.prototype.slice.call(parsedBlob.raw));
-      } catch (error) {
-        logger.error("Wrong binary file", { error, hideToast: true });
-        setProgram(undefined, "Wrong binary file");
+
+        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);
+          }
+        }
       }
     } else {
       try {
-        JSON.parse(newInput);
-        setProgram(JSON.parse(newInput));
+        // 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("");
       } 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 border-2 rounded-md ")}>
+      <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>
         <Textarea
           autoFocus
-          className={classNames("w-full flex-auto font-mono border-0 text-base")}
+          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,
+          })}
           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 b23c838..fba3f45 100644
--- a/src/hooks/useDebuggerActions.ts
+++ b/src/hooks/useDebuggerActions.ts
@@ -6,7 +6,7 @@ import {
   setBreakpointAddresses,
   setClickedInstruction,
   setInitialState,
-  setIsAsmError,
+  setIsProgramInvalid,
   setIsDebugFinished,
   setIsRunMode,
   setProgram,
@@ -80,11 +80,20 @@ export const useDebuggerActions = () => {
   const handleProgramLoad = useCallback(
     async (data?: ProgramUploadFileOutput) => {
       if (data) {
-        await startProgram({ ...data.initial, status: Status.OK }, data.program);
-
-        dispatch(setIsAsmError(false));
+        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));
+        }
       } else {
-        dispatch(setIsAsmError(true));
+        dispatch(setIsProgramInvalid(true));
       }
     },
     [startProgram, dispatch],
diff --git a/src/packages/host-calls/read.ts b/src/packages/host-calls/read.ts
index 10ac5dc..1cc9eb2 100644
--- a/src/packages/host-calls/read.ts
+++ b/src/packages/host-calls/read.ts
@@ -9,8 +9,6 @@ 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 28b722d..a4da4f6 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;
+  storage: Storage | null;
 };
 type ExecuteParams = Parameters<write.Write["execute"]>;
 type RegistersType = ExecuteParams[1];
@@ -31,7 +31,8 @@ const hostCall = async ({
   if (hostCallIdentifier === HostCallIdentifiers.READ) {
     const readAccounts = new ReadAccounts(storage);
     const jamHostCall = new read.Read(readAccounts);
-    jamHostCall.currentServiceId = tryAsServiceId(0x30303030) as any;
+    // 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;
 
     await jamHostCall.execute(
       pvm.getInterpreter().getGasCounter(),
@@ -55,7 +56,7 @@ export const runHostCall = async ({ pvm, hostCallIdentifier, storage }: HostCall
     throw new Error("PVM is uninitialized.");
   }
 
-  if (!storage) {
+  if (storage === null) {
     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 17073e7..74a9d88 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: null };
+    return { status: CommandStatus.ERROR, error, isFinished: true, result: {}, state: {}, exitArg: 0 };
   }
 };
diff --git a/src/packages/web-worker/types.ts b/src/packages/web-worker/types.ts
index 59ca23d..a512560 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; payload: { hostCallIdentifier: HostCallIdentifiers; storage: Storage } }
+    | { command: Commands.HOST_CALL }
   );
 
 type CommonWorkerRequestParams = { messageId: string };
diff --git a/src/packages/web-worker/worker.ts b/src/packages/web-worker/worker.ts
index 7e67c7f..ed197a3 100644
--- a/src/packages/web-worker/worker.ts
+++ b/src/packages/web-worker/worker.ts
@@ -104,13 +104,14 @@ onmessage = async (e: MessageEvent<WorkerRequestParams>) => {
       messageId: e.data.messageId,
     });
   } else if (e.data.command === Commands.HOST_CALL) {
-    const data = await commandHandlers.runHostCall({
+    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 f02b057..b5b3d0d 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,
-  isAsmError: false,
+  isProgramInvalid: false,
   isRunMode: false,
   isStepMode: false,
   hasHostCallOpen: false,
@@ -59,8 +59,8 @@ const debuggerSlice = createSlice({
     setIsProgramEditMode(state, action) {
       state.isProgramEditMode = action.payload;
     },
-    setIsAsmError(state, action) {
-      state.isAsmError = action.payload;
+    setIsProgramInvalid(state, action) {
+      state.isProgramInvalid = 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 selectIsAsmError = (state: RootState) => state.debugger.isAsmError;
+export const selectIsProgramInvalid = (state: RootState) => state.debugger.isProgramInvalid;
 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 3c3c0dc..c8482b9 100644
--- a/src/store/workers/workersSlice.ts
+++ b/src/store/workers/workersSlice.ts
@@ -265,15 +265,13 @@ export const handleHostCall = createAsyncThunk("workers/handleHostCall", async (
           payload: { hostCallIdentifier: worker.exitArg as HostCallIdentifiers },
         });
 
-        // if (resp) {
-          if (getState().debugger.isRunMode) {
-            dispatch(continueAllWorkers());
-          }
-        // }
+        if ((getState() as RootState).debugger.isRunMode) {
+          dispatch(continueAllWorkers());
+        }
 
-        // if (hasCommandStatusError(resp)) {
-        //   throw resp.error;
-        // }
+        if (hasCommandStatusError(resp)) {
+          throw resp.error;
+        }
       }),
     );
 
@@ -351,7 +349,9 @@ export const stepAllWorkers = createAsyncThunk("workers/stepAllWorkers", async (
         command: Commands.STEP,
         payload: {
           program: new Uint8Array(debuggerState.program),
-          stepsToPerform: debuggerState.stepsToPerform,
+          // NOTE [ToDr] Despite settings "batched steps", when
+          // the user clicks "Step" we want just single step to happen.
+          stepsToPerform: 1,
         },
       });