ecalli traces support

.gitignore

@@ -1,6 +1,7 @@
 # Logs
 logs
 *.log
+!tests/*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

package.json

@@ -38,6 +38,8 @@
     "@typeberry/lib": "^0.5.0-6a64d40",
     "@typeberry/spectool-wasm": "0.23.0",
     "@uiw/react-codemirror": "^4.25.1",
+    "baseline-browser-mapping": "^2.9.19",
+    "caniuse-lite": "^1.0.30001769",
     "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
@@ -93,12 +95,16 @@
     "vite": "^7.1.12",
     "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.5.0",
-    "vitest": "^4.0.14"
+    "vitest": "^4.0.14",
+    "@swc/core": "^1.13.5"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [
       "npm run format",
       "npm run lint"
     ]
-  }
+  },
+  "trustedDependencies": [
+    "@swc/core"
+  ]
 }

src/components/DebuggerControlls/index.tsx

@@ -28,6 +28,7 @@ export const DebuggerControlls = () => {
   const workers = useAppSelector((state) => state.workers);
   const isLoading = useAppSelector(selectIsAnyWorkerLoading);
   const dispatch = useAppDispatch();
+  const noWorkers = workers.length === 0;
 
   const currentInstruction = programPreviewResult.find((x) => x.address === workers[0]?.currentPc);
 
@@ -156,6 +157,7 @@ export const DebuggerControlls = () => {
           onOpen={() => {
             setError(undefined);
           }}
+          disabled={!pvmInitialized || isProgramEditMode || isLoading || noWorkers}
         />
       </div>
       <Button
@@ -168,7 +170,7 @@ export const DebuggerControlls = () => {
         disabled={!pvmInitialized || isProgramEditMode}
       >
         <RefreshCcw className="w-3.5 md:mr-1.5" />
-        <span className="hidden md:block">Reset</span>
+        <span className="hidden md:block">Restart</span>
       </Button>
       <Separator className="h-[36px] sm:h-full" orientation="vertical" />
       {!isDebugFinished && isRunMode ? (
@@ -181,7 +183,7 @@ export const DebuggerControlls = () => {
           className="md:mr-3"
           variant="secondary"
           onClick={handleRunProgram}
-          disabled={isDebugFinished || !pvmInitialized || isProgramEditMode || isLoading || !!error}
+          disabled={isDebugFinished || !pvmInitialized || isProgramEditMode || isLoading || !!error || noWorkers}
         >
           {isLoading ? <LoadingSpinner className="w-3.5 md:mr-1.5" size={20} /> : <Play className="w-3.5 md:mr-1.5" />}
           <span className="hidden md:block">Run</span>
@@ -197,7 +199,8 @@ export const DebuggerControlls = () => {
           !pvmInitialized ||
           isProgramEditMode ||
           isLoading ||
-          !!error
+          !!error ||
+          noWorkers
         }
       >
         {isLoading ? (
@@ -217,7 +220,8 @@ export const DebuggerControlls = () => {
           !pvmInitialized ||
           isProgramEditMode ||
           isLoading ||
-          !!error
+          !!error ||
+          noWorkers
         }
       >
         {isLoading ? (

src/components/DebuggerSettings/Content.tsx

@@ -1,11 +1,16 @@
 import { DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { useAppDispatch, useAppSelector } from "@/store/hooks";
-import { setServiceId, setSpiArgs, setUiRefreshRate, UiRefreshMode } from "@/store/debugger/debuggerSlice";
+import {
+  setServiceId,
+  setSpiArgs,
+  setUiRefreshRate,
+  UiRefreshMode,
+  selectHostCallsTrace,
+} from "@/store/debugger/debuggerSlice";
 import { NumeralSystemContext } from "@/context/NumeralSystemContext";
 import { valueToNumeralSystem } from "../Instructions/utils";
 import { useContext, useState } from "react";
-import { setAllWorkersServiceId } from "@/store/workers/workersSlice";
 import { isSerializedError } from "@/store/utils";
 import { logger } from "@/utils/loggerService";
 import { ToggleDarkMode } from "@/packages/ui-kit/DarkMode/ToggleDarkMode";
@@ -16,6 +21,8 @@ import { cn } from "@/lib/utils";
 import { bytes } from "@typeberry/lib";
 import { Button } from "@/components/ui/button";
 import { SpiConfigDialog } from "./SpiConfigDialog";
+import { TraceConfigDialog } from "./TraceConfigDialog";
+import { CheckCircle2, FileText } from "lucide-react";
 
 function stringToNumber<T>(value: string, cb: (x: string) => T): T {
   try {
@@ -27,13 +34,18 @@ function stringToNumber<T>(value: string, cb: (x: string) => T): T {
 
 export const DebuggerSettingsContent = () => {
   const debuggerState = useAppSelector((state) => state.debugger);
+  const hostCallsTrace = useAppSelector(selectHostCallsTrace);
   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(spiArgs.toString());
   const isSpiError = textSpi !== spiArgs.toString();
   const [isSpiConfigDialogOpen, setIsSpiConfigDialogOpen] = useState(false);
+  const [isTraceConfigDialogOpen, setIsTraceConfigDialogOpen] = useState(false);
+
+  const hasTrace = hostCallsTrace !== null;
+  const traceHostCallCount = hostCallsTrace?.parsed?.hostCalls.length ?? 0;
   const handleTextSpi = (newVal: string) => {
     setTextSpi(newVal);
     try {
@@ -48,7 +60,6 @@ export const DebuggerSettingsContent = () => {
     setError("");
     try {
       dispatch(setServiceId(newServiceId));
-      await dispatch(setAllWorkersServiceId()).unwrap();
     } catch (e) {
       if (e instanceof Error || isSerializedError(e)) {
         setError(e.message);
@@ -161,13 +172,29 @@ export const DebuggerSettingsContent = () => {
           <div className="p-4 flex justify-between items-center mb-2">
             <span className="block text-xs font-bold">
               <WithHelp
-                help={`Configure storage for read & write host calls.
-                  Confirm empty, if you want to process.
-                    Storage can be modified by the program execution.`}
+                help={`Configure Ecalli trace for auto-filling host call responses.
+                  When a trace is loaded, host calls can be auto-continued with pre-recorded data.`}
               >
                 Host Calls Trace
               </WithHelp>
             </span>
+            <div className="flex flex-col items-center gap-2">
+              {hasTrace && (
+                <span className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
+                  <CheckCircle2 className="w-3 h-3" />
+                  {traceHostCallCount} host call{traceHostCallCount !== 1 ? "s" : ""}
+                </span>
+              )}
+              <Button
+                variant="outline"
+                size="sm"
+                data-testid="configure-trace-button"
+                onClick={() => setIsTraceConfigDialogOpen(true)}
+              >
+                <FileText className="w-4 h-4 mr-1" />
+                Configure
+              </Button>
+            </div>
           </div>
 
           {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
@@ -184,7 +211,6 @@ export const DebuggerSettingsContent = () => {
           // Update service ID if it changed
           try {
             dispatch(setServiceId(serviceId));
-            await dispatch(setAllWorkersServiceId()).unwrap();
           } catch (e) {
             if (e instanceof Error || isSerializedError(e)) {
               setError(e.message);
@@ -193,6 +219,8 @@ export const DebuggerSettingsContent = () => {
           }
         }}
       />
+
+      <TraceConfigDialog open={isTraceConfigDialogOpen} onOpenChange={setIsTraceConfigDialogOpen} />
     </>
   );
 };