host calls wip (#455)

* Handle host calls.

* Initial version of host calls handling.

* More wip stuff

* Update gol example.

* Increase default gas.

* Refresh faster

* More host calls WiP.

* dedupe

* use global service id

* Update src/components/HostCallDialog/handlers/FetchHostCall.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update src/components/HostCallDialog/MemoryEditor.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: tomusdrw

package-lock.json

@@ -31,7 +31,7 @@
     "@radix-ui/react-tooltip": "^1.1.7",
     "@reduxjs/toolkit": "^2.9.0",
     "@tanstack/react-virtual": "^3.10.9",
-    "@typeberry/lib": "^0.4.1-ea3c83c",
+    "@typeberry/lib": "^0.4.1-3923458",
     "@typeberry/spectool-wasm": "0.23.0",
     "@uiw/react-codemirror": "^4.25.1",
     "class-variance-authority": "^0.7.1",

package.json

@@ -10,6 +10,7 @@ import ProgramLoader from "@/pages/ProgramLoader.tsx";
 import { Navigate, Route, Routes } from "react-router";
 import { AppsSidebar } from "./packages/ui-kit/AppsSidebar";
 import { MobileDebuggerControls } from "./components/MobileDebuggerControlls";
+import { HostCallDialog } from "./components/HostCallDialog";
 
 function App() {
   const { pvmInitialized } = useAppSelector((state) => state.debugger);
@@ -45,6 +46,7 @@ function App() {
       </div>
 
       <ToastContainer />
+      <HostCallDialog />
     </>
   );
 }

src/App.tsx

@@ -26,15 +26,16 @@ function stringToNumber<T>(value: string, cb: (x: string) => T): T {
 export const DebuggerSettingsContent = () => {
   const debuggerState = useAppSelector((state) => state.debugger);
   const dispatch = useAppDispatch();
+  const spiArgs = bytes.BytesBlob.blobFrom(debuggerState.spiArgs?.slice(0) ?? new Uint8Array());
   const { numeralSystem } = useContext(NumeralSystemContext);
   const [error, setError] = useState<string>();
-  const [textSpi, setTextSpi] = useState(debuggerState.spiArgs?.toString() ?? "");
-  const isSpiError = textSpi !== debuggerState.spiArgs?.toString();
+  const [textSpi, setTextSpi] = useState(spiArgs.toString());
+  const isSpiError = textSpi !== spiArgs.toString();
   const handleTextSpi = (newVal: string) => {
     setTextSpi(newVal);
     try {
       const parsed = bytes.BytesBlob.parseBlob(newVal);
-      dispatch(setSpiArgs(parsed));
+      dispatch(setSpiArgs(parsed.raw));
     } catch {
       // Ignore parse errors - user may be typing
     }

src/components/DebuggerSettings/Content.tsx

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { valueToNumeralSystem } from "@/components/Instructions/utils";
+import { DEFAULT_GAS, DEFAULT_REGS, ExpectedState, RegistersArray } from "@/types/pvm";
+import { NumeralSystem } from "@/context/NumeralSystem";
+import { MemoryEditor } from "./MemoryEditor";
+import { HostCallActionButtons } from "./handlers/HostCallActionButtons";
+
+// Re-export for convenience
+export type { MemoryEdit } from "@/store/workers/workersSlice";
+import type { HostCallResumeMode, MemoryEdit } from "@/store/workers/workersSlice";
+
+function stringToNumber<T>(value: string, cb: (x: string) => T): T {
+  try {
+    return cb(value);
+  } catch {
+    return cb("0");
+  }
+}
+
+interface DefaultHostCallContentProps {
+  currentState: ExpectedState;
+  isLoading: boolean;
+  numeralSystem: NumeralSystem;
+  readMemory: (startAddress: number, length: number) => Promise<Uint8Array>;
+  onRegsChange: (regs: bigint[]) => void;
+  onGasChange: (gas: bigint) => void;
+  onMemoryChange: (memory: MemoryEdit | null) => void;
+  onResume: (mode: HostCallResumeMode, regs?: bigint[], gas?: bigint) => void;
+}
+
+export const DefaultHostCallContent: React.FC<DefaultHostCallContentProps> = ({
+  currentState,
+  isLoading,
+  numeralSystem,
+  readMemory,
+  onRegsChange,
+  onResume,
+  onGasChange,
+  onMemoryChange,
+}) => {
+  // Local state for editable values
+  const [regs, setRegs] = useState<bigint[]>([...DEFAULT_REGS]);
+  const [gas, setGas] = useState<bigint>(0n);
+
+  // Initialize local state when currentState changes
+  useEffect(() => {
+    if (currentState) {
+      // Copy current registers
+      const newRegs = currentState.regs ? [...currentState.regs] : [...DEFAULT_REGS];
+      setRegs(newRegs);
+      onRegsChange(newRegs);
+
+      // Set gas to current gas - 10 (as per requirement)
+      const currentGas = currentState.gas ?? DEFAULT_GAS;
+      const newGas = currentGas > 10n ? currentGas - 10n : 0n;
+      setGas(newGas);
+      onGasChange(newGas);
+    }
+  }, [currentState, onRegsChange, onGasChange]);
+
+  const handleRegisterChange = (index: number, value: string) => {
+    const newValue = stringToNumber(value, BigInt);
+    setRegs((prev) => {
+      const newRegs = [...prev];
+      newRegs[index] = newValue;
+      onRegsChange(newRegs);
+      return newRegs;
+    });
+  };
+
+  const handleGasChange = (value: string) => {
+    const newValue = stringToNumber(value, BigInt);
+    setGas(newValue);
+    onGasChange(newValue);
+  };
+
+  const handleMemoryChange = useCallback(
+    (address: number, data: Uint8Array) => {
+      onMemoryChange({ address, data });
+    },
+    [onMemoryChange],
+  );
+
+  return (
+    <>
+      <div className="space-y-4 flex-1 overflow-y-auto p-2">
+        {/* Two-column layout: 1fr for gas/registers, 2fr for memory */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {/* Column 1: Gas and Registers */}
+          <div className="space-y-4 md:col-span-1">
+            {/* Gas */}
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Gas</label>
+              <Input
+                className="font-mono"
+                value={valueToNumeralSystem(gas, numeralSystem)}
+                onChange={(e) => handleGasChange(e.target.value)}
+                onKeyUp={(e) => e.key === "Enter" && e.currentTarget.blur()}
+                disabled={isLoading}
+              />
+            </div>
+
+            {/* Registers */}
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Registers</label>
+              <div className="space-y-1">
+                {(regs as RegistersArray).map((regValue, index) => (
+                  <div key={index} className="flex items-center gap-2">
+                    <span className="w-6 text-xs font-mono">
+                      ω<sub>{index}</sub>
+                    </span>
+                    <Input
+                      className="font-mono text-sm h-7 flex-1"
+                      value={valueToNumeralSystem(regValue, numeralSystem)}
+                      onChange={(e) => handleRegisterChange(index, e.target.value)}
+                      onKeyUp={(e) => e.key === "Enter" && e.currentTarget.blur()}
+                      disabled={isLoading}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Column 2: Memory Editor (2x width) */}
+          <div className="space-y-2 md:col-span-2">
+            <MemoryEditor readMemory={readMemory} disabled={isLoading} onMemoryChange={handleMemoryChange} />
+          </div>
+        </div>
+      </div>
+      <HostCallActionButtons onResume={onResume} disabled={isLoading} />
+    </>
+  );
+};