From f18b16c81f07a411914763a60bf8b84c9da518c9 Mon Sep 17 00:00:00 2001
From: Taylor Whatley <32211852+1whatleytay@users.noreply.github.com>
Date: Fri, 23 Feb 2024 15:28:17 -0500
Subject: [PATCH] Allow multiple backends

---
 src/components/ExportModal.vue          |   6 +-
 src/components/TabBarItems.vue          |   2 +-
 src/components/console/BitmapTab.vue    |  12 +-
 src/components/console/BreakTab.vue     |  13 +-
 src/components/console/Console.vue      |   2 +-
 src/components/console/RegistersTab.vue |   2 +-
 src/state/console-data.ts               |  16 +-
 src/state/state.ts                      |   3 +-
 src/utils/debug.ts                      |  19 +-
 src/utils/events.ts                     |   8 +-
 src/utils/mips.ts                       | 464 ------------------------
 src/utils/mips/mips.ts                  | 281 ++++++++++++++
 src/utils/mips/tauri-backend.ts         | 263 ++++++++++++++
 src/utils/mips/wasm-backend.ts          |  48 +++
 src/utils/mips/wasm-worker.ts           |   1 +
 src/utils/query/serialize-files.ts      |   2 +-
 src/utils/settings.ts                   |   7 +-
 src/utils/storage.ts                    |   4 +-
 src/utils/tabs.ts                       |   6 +-
 19 files changed, 647 insertions(+), 512 deletions(-)
 delete mode 100644 src/utils/mips.ts
 create mode 100644 src/utils/mips/mips.ts
 create mode 100644 src/utils/mips/tauri-backend.ts
 create mode 100644 src/utils/mips/wasm-backend.ts
 create mode 100644 src/utils/mips/wasm-worker.ts

diff --git a/src/components/ExportModal.vue b/src/components/ExportModal.vue
index 3374424..90fc8fc 100644
--- a/src/components/ExportModal.vue
+++ b/src/components/ExportModal.vue
@@ -99,10 +99,8 @@
 import Modal from './Modal.vue'
 
 import { tab } from '../state/state'
-import { consoleData, ConsoleType, DebugTab, openConsole, pushConsole } from '../state/console-data'
-import { assembleRegions } from '../utils/mips'
+import { backend, consoleData, ConsoleType, DebugTab, openConsole, pushConsole } from '../state/console-data'
 import { collectLines } from '../utils/tabs'
-import { selectSaveDestination } from '../utils/query/access-manager'
 import { exportHexContents, exportHexRegions } from '../utils/query/serialize-files'
 import { postBuildMessage } from '../utils/debug'
 import { DocumentArrowUpIcon, XMarkIcon } from '@heroicons/vue/24/solid'
@@ -157,7 +155,7 @@ async function exportRegions() {
     return
   }
 
-  const result = await assembleRegions(collectLines(current.lines), current.path, state)
+  const result = await backend.assembleRegions(collectLines(current.lines), current.path, state)
 
   if (result.regions) {
     switch (result.regions.type) {
diff --git a/src/components/TabBarItems.vue b/src/components/TabBarItems.vue
index 15f2215..e3ff3e6 100644
--- a/src/components/TabBarItems.vue
+++ b/src/components/TabBarItems.vue
@@ -81,7 +81,7 @@
 import { computed } from 'vue'
 import { consoleData } from '../state/console-data'
 import { build, pause, resume, step, rewind, stop } from '../utils/debug'
-import { ExecutionModeType } from '../utils/mips'
+import { ExecutionModeType } from '../utils/mips/mips'
 import { tab } from '../state/state'
 
 import {
diff --git a/src/components/console/BitmapTab.vue b/src/components/console/BitmapTab.vue
index b977014..c351427 100644
--- a/src/components/console/BitmapTab.vue
+++ b/src/components/console/BitmapTab.vue
@@ -132,14 +132,14 @@
 import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 
 import { ArrowLeftIcon } from '@heroicons/vue/24/solid'
-import { ExclamationCircleIcon, CheckCircleIcon } from '@heroicons/vue/24/outline'
-import { consoleData } from '../../state/console-data'
+import { ExclamationCircleIcon } from '@heroicons/vue/24/outline'
+import { backend, consoleData } from '../../state/console-data'
 
 import { settings } from '../../state/state'
 import NumberField from './NumberField.vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
-import { ExecutionState, lastDisplay } from '../../utils/mips'
 import { displayConfig } from '../../utils/settings'
+import { MipsExecution } from '../../utils/mips/mips'
 
 const wrapper = ref(null as HTMLElement | null)
 const canvas = ref(null as HTMLCanvasElement | null)
@@ -288,7 +288,7 @@ watch(() => consoleData.execution, checkConnected)
 
 async function renderFrameFallback(
   context: CanvasRenderingContext2D,
-  execution: ExecutionState
+  execution: MipsExecution
 ) {
   const memory = await execution.memoryAt(0x10008000, 64 * 64 * 4)
 
@@ -352,14 +352,14 @@ async function renderFrameProtocol(context: CanvasRenderingContext2D) {
 }
 
 async function renderLastDisplay(context: CanvasRenderingContext2D) {
-  const last = await lastDisplay()
+  const last = await backend.lastDisplay()
 
   // No data, don't render.
   if (!last.data) {
     return
   }
 
-  await renderOrdered(
+  renderOrdered(
     context,
     last.width,
     last.height,
diff --git a/src/components/console/BreakTab.vue b/src/components/console/BreakTab.vue
index dec3ea5..0766653 100644
--- a/src/components/console/BreakTab.vue
+++ b/src/components/console/BreakTab.vue
@@ -112,14 +112,13 @@
 </template>
 
 <script setup lang="ts">
-import { consoleData } from '../../state/console-data'
+import { backend, consoleData } from '../../state/console-data'
 import { computed, onMounted, reactive, watch } from 'vue'
 import {
   Breakpoints,
-  decodeInstruction, ExecutionModeType,
-  ExecutionState,
-  InstructionDetails
-} from '../../utils/mips'
+  ExecutionModeType,
+  InstructionDetails, MipsExecution
+} from '../../utils/mips/mips'
 import { setRegister, stepCount } from '../../utils/debug'
 import { ChevronRightIcon } from '@heroicons/vue/24/solid'
 import RegisterItem from './RegisterItem.vue'
@@ -233,14 +232,14 @@ function instructionGroup(breakpoints: Breakpoints | null, pc: number): Instruct
   }
 }
 
-async function instructionAtAddress(state: ExecutionState, address: number): Promise<InstructionDetails | null> {
+async function instructionAtAddress(state: MipsExecution, address: number): Promise<InstructionDetails | null> {
   const data = await state.memoryAt(address, 4)
 
   if (data === null) {
     return null
   }
 
-  return await decodeInstruction(address, combine(data))
+  return await backend.decodeInstruction(address, combine(data))
 }
 
 interface CurrentInstructions {
diff --git a/src/components/console/Console.vue b/src/components/console/Console.vue
index 134bf71..e6035b4 100644
--- a/src/components/console/Console.vue
+++ b/src/components/console/Console.vue
@@ -81,7 +81,7 @@ import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import { consoleData, DebugTab } from '../../state/console-data'
 
 import { XMarkIcon } from '@heroicons/vue/24/solid'
-import { ExecutionModeType } from '../../utils/mips'
+import { ExecutionModeType } from '../../utils/mips/mips'
 import Tab from '../Tab.vue'
 import RegistersTab from './RegistersTab.vue'
 import MemoryTab from './MemoryTab.vue'
diff --git a/src/components/console/RegistersTab.vue b/src/components/console/RegistersTab.vue
index 15d5472..4306bb3 100644
--- a/src/components/console/RegistersTab.vue
+++ b/src/components/console/RegistersTab.vue
@@ -70,7 +70,7 @@ import { setRegister } from '../../utils/debug'
 
 import { Square3Stack3DIcon } from '@heroicons/vue/24/outline'
 import { RegisterFormat } from '../../utils/settings'
-import { Registers } from '../../utils/mips'
+import { Registers } from '../../utils/mips/mips'
 import RegisterItem from './RegisterItem.vue'
 
 function buttonClasses(format: RegisterFormat) {
diff --git a/src/state/console-data.ts b/src/state/console-data.ts
index f1a8310..fad278a 100644
--- a/src/state/console-data.ts
+++ b/src/state/console-data.ts
@@ -1,5 +1,7 @@
 import { reactive } from 'vue'
-import { ExecutionModeType, ExecutionState, Registers } from '../utils/mips'
+import { ExecutionModeType, MipsBackend, MipsExecution, Registers } from '../utils/mips/mips'
+import { TauriBackend } from '../utils/mips/tauri-backend'
+import { WasmBackend } from '../utils/mips/wasm-backend'
 
 export enum DebugTab {
   Registers,
@@ -38,7 +40,7 @@ interface ConsoleLineMeta {
 
 interface ConsoleData {
   showConsole: boolean
-  execution: ExecutionState | null
+  execution: MipsExecution | null
   mode: ExecutionModeType | null
   registers: Registers | null
   hintPc: number | null
@@ -51,6 +53,16 @@ const editHighlight = { type: ConsoleType.Editing }
 const submitHighlight = { type: ConsoleType.Submitted }
 const secondaryHighlight = { type: ConsoleType.Secondary }
 
+function createBackend(): MipsBackend {
+  if (window.__TAURI__) {
+    return new TauriBackend()
+  } else {
+    return new WasmBackend()
+  }
+}
+
+export const backend = createBackend()
+
 export const consoleData = reactive({
   showConsole: false,
   execution: null,
diff --git a/src/state/state.ts b/src/state/state.ts
index c8d8f97..f48f223 100644
--- a/src/state/state.ts
+++ b/src/state/state.ts
@@ -10,8 +10,7 @@ import { CursorState, useTabs } from '../utils/tabs'
 import { GotoMessage, useGoto } from '../utils/goto'
 import { useSymbolHighlight } from '../utils/symbol-highlight'
 import { ref, watch } from 'vue'
-import { findToken } from '../utils/languages/suggestions'
-import { InstructionLine } from '../utils/mips'
+import { InstructionLine } from '../utils/mips/mips'
 
 export const settings = useSettings()
 
diff --git a/src/utils/debug.ts b/src/utils/debug.ts
index cb6a9fc..f373960 100644
--- a/src/utils/debug.ts
+++ b/src/utils/debug.ts
@@ -1,20 +1,17 @@
 import { collectLines } from './tabs'
 import {
+  backend,
   consoleData,
   ConsoleType,
   DebugTab,
   openConsole,
-  pushConsole,
+  pushConsole
 } from '../state/console-data'
 import {
   AssemblerResult,
-  assembleText,
-  assembleWithBinary,
-  disassemblyDetails,
   ExecutionModeType,
-  ExecutionResult,
-  ExecutionState
-} from './mips'
+  ExecutionResult
+} from './mips/mips'
 import { tab, settings, buildLines } from '../state/state'
 
 import { format } from 'date-fns'
@@ -148,12 +145,12 @@ export async function build() {
   const {
     binary,
     result
-  } = await assembleWithBinary(collectLines(current?.lines ?? []), current?.path ?? null)
+  } = await backend.assembleWithBinary(collectLines(current?.lines ?? []), current?.path ?? null)
 
   if (binary !== null) {
     console.log(`setting ${binary} and ${typeof binary.buffer}`)
 
-    buildLines.value = await disassemblyDetails(binary.buffer)
+    buildLines.value = await backend.disassemblyDetails(binary.buffer)
   }
 
   consoleData.showConsole = true
@@ -178,7 +175,7 @@ export async function resume() {
 
     await saveCurrentTab(PromptType.NeverPrompt)
 
-    consoleData.execution = new ExecutionState(text, path, settings.execution.timeTravel, current.profile)
+    consoleData.execution = await backend.createExecution(text, path, settings.execution.timeTravel, current.profile)
   }
 
   consoleData.showConsole = true
@@ -215,7 +212,7 @@ export async function stepCount(skip: number) {
   clearDebug()
   consoleData.mode = ExecutionModeType.Running
 
-  const result = await consoleData.execution.resume(skip, null)
+  const result = await consoleData.execution.resume(skip, null, () => {})
 
   consoleData.showConsole = true
 
diff --git a/src/utils/events.ts b/src/utils/events.ts
index 02f0fb1..e50999b 100644
--- a/src/utils/events.ts
+++ b/src/utils/events.ts
@@ -7,8 +7,8 @@ import {
   AccessFile,
   selectSaveDestination, selectOpenFile, accessWriteText, selectOpenElf
 } from './query/access-manager'
-import { consoleData, ConsoleType, pushConsole } from '../state/console-data'
-import { assembleWithBinary, BinaryResult } from './mips'
+import { backend, consoleData, ConsoleType, pushConsole } from '../state/console-data'
+import { BinaryResult } from './mips/mips'
 import {
   closeTab,
   createTab, editor,
@@ -173,7 +173,7 @@ export async function setupEvents() {
   await listen('assemble', async () => {
     const current = tab()
 
-    const result = await assembleWithBinary(collectLines(current?.lines ?? []), current?.path ?? null)
+    const result = await backend.assembleWithBinary(collectLines(current?.lines ?? []), current?.path ?? null)
 
     if (result.binary) {
       const name = tab()?.title
@@ -199,7 +199,7 @@ export async function setupEvents() {
     if (current.profile && current.profile.kind === 'elf') {
       binary = Uint8Array.from(window.atob(current.profile.elf), c => c.charCodeAt(0))
     } else {
-      result = await assembleWithBinary(collectLines(current.lines), current.path)
+      result = await backend.assembleWithBinary(collectLines(current.lines), current.path)
       binary = result.binary
     }
 
diff --git a/src/utils/mips.ts b/src/utils/mips.ts
deleted file mode 100644
index e80c562..0000000
--- a/src/utils/mips.ts
+++ /dev/null
@@ -1,464 +0,0 @@
-import { invoke, tauri } from '@tauri-apps/api'
-import { ExportRegionsOptions } from './settings'
-
-export interface ElfExecutionProfile {
-  kind: 'elf'
-  elf: string // not sure what to do here
-  breakpoints: Record<number, number>
-}
-
-// should only be set after building
-export interface AssemblyExecutionProfile {
-  kind: 'asm'
-}
-
-export type ExecutionProfile = ElfExecutionProfile | AssemblyExecutionProfile
-
-interface DisassembleResult {
-  error: string | null
-  lines: string[]
-  breakpoints: Record<number, number>
-}
-
-export interface LineMarker {
-  line: number
-  offset: number
-}
-
-interface Breakpoint {
-  line: number
-  pcs: number[]
-}
-
-export interface AssemblerSuccess {
-  breakpoints: Breakpoint[]
-}
-
-export interface AssemblerError {
-  marker: LineMarker | null
-  body: string | null
-  message: string
-}
-
-export type AssemblerResultSuccess = AssemblerSuccess & { status: 'Success' }
-export type AssemblerResultError = AssemblerError & { status: 'Error' }
-
-export type AssemblerResult = AssemblerResultSuccess | AssemblerResultError
-
-export interface BinaryResult {
-  binary: Uint8Array | null
-  result: AssemblerResult
-}
-
-export interface BitmapConfig {
-  width: number
-  height: number
-  address: number
-}
-
-export enum ExecutionModeType {
-  Running = 'Running',
-  Invalid = 'Invalid',
-  Paused = 'Paused',
-  Stopped = 'Stopped',
-  Breakpoint = 'Breakpoint',
-  Finished = 'Finished',
-}
-
-export interface ExecutionModeInvalid {
-  type: ExecutionModeType.Invalid
-  message: string
-}
-
-export interface ExecutionModeFinished {
-  type: ExecutionModeType.Finished
-  pc: number
-  code: number | null
-}
-
-type ExecutionModeOther =
-  | ExecutionModeType.Running
-  | ExecutionModeType.Breakpoint
-  | ExecutionModeType.Paused
-
-export type ExecutionMode =
-  | ExecutionModeInvalid
-  | ExecutionModeFinished
-  | { type: ExecutionModeOther }
-
-export interface Registers {
-  pc: number
-  line: number[]
-  lo: number
-  hi: number
-}
-
-export interface ExecutionResult {
-  mode: ExecutionMode
-  registers: Registers
-}
-
-export interface LastDisplay {
-  address: number
-  width: number
-  height: number
-  data: number[] | null
-}
-
-export class Breakpoints {
-  public maxLine: number
-  public lineToPc: Map<number, number[]>
-  public pcToGroup: Map<number, Breakpoint>
-
-  findNextPc(line: number): number[] {
-    while (line <= this.maxLine) {
-      const value = this.lineToPc.get(line)
-
-      if (value !== undefined) {
-        return value
-      }
-
-      line += 1
-    }
-
-    return []
-}
-
-  public mapLines(lines: number[]): number[] {
-    return lines.flatMap((line) => this.findNextPc(line))
-  }
-
-  // pc -> line
-  constructor(breakpoints: Breakpoint[]) {
-    this.maxLine = Math.max(...breakpoints.map(b => b.line))
-    this.lineToPc = new Map()
-    this.pcToGroup = new Map()
-
-    for (const breakpoint of breakpoints) {
-      let lineMap = this.lineToPc.get(breakpoint.line)
-
-      if (!lineMap) {
-        lineMap = []
-
-        this.lineToPc.set(breakpoint.line, lineMap)
-      }
-
-      const anchorPc = breakpoint.pcs[0]
-
-      if (anchorPc !== undefined) {
-        lineMap.push(anchorPc)
-      }
-
-      for (const pc of breakpoint.pcs) {
-        this.pcToGroup.set(pc, breakpoint)
-      }
-    }
-  }
-}
-
-export async function disassembleElf(
-  named: string,
-  elf: ArrayBuffer
-): Promise<DisassembleResult> {
-  const bytes = Array.from(new Uint8Array(elf))
-
-  const value = await tauri.invoke('disassemble', { named, bytes })
-
-  return value as DisassembleResult
-}
-
-export async function assembleText(text: string, path: string | null): Promise<AssemblerResult> {
-  const result = await tauri.invoke('assemble', { text, path })
-
-  return result as AssemblerResult
-}
-
-export async function assembleWithBinary(text: string, path: string | null): Promise<BinaryResult> {
-  const result = (await tauri.invoke('assemble_binary', { text, path })) as [
-    number[] | null,
-    AssemblerResult
-  ]
-
-  const [binary, assemblerResult] = result
-
-  return {
-    binary: binary ? Uint8Array.from(binary) : null,
-    result: assemblerResult,
-  }
-}
-
-export interface HexRegion {
-  name: string
-  data: string // base64 encoded
-}
-
-interface AssembledRegionsBinary {
-  type: 'binary'
-  value: string // base64 encoded
-}
-
-interface AssembledRegionsSplit {
-  type: 'split'
-  value: HexRegion[]
-}
-
-type AssembledRegions = AssembledRegionsBinary | AssembledRegionsSplit
-
-export interface HexBinaryResult {
-  regions: AssembledRegions | null
-  result: AssemblerResult
-}
-
-export async function assembleRegions(
-  text: string,
-  path: string | null,
-  options: ExportRegionsOptions
-) : Promise<HexBinaryResult> {
-  const value = (await tauri.invoke('assemble_regions', { text, path, options })) as [
-    AssembledRegions | null,
-    AssemblerResult
-  ]
-
-  const [regions, result ] = value
-
-  return {
-    regions,
-    result
-  }
-}
-
-export async function configureDisplay(config: BitmapConfig) {
-  await invoke('configure_display', {
-    width: config.width,
-    height: config.height,
-    address: config.address,
-  })
-}
-
-export interface ParameterItemRegular {
-  type: 'Register' | 'Immediate' | 'Address'
-  value: number
-}
-
-export interface ParameterItemOffset {
-  type: 'Offset'
-  value: { offset: number, register: number }
-}
-
-export type ParameterItem = ParameterItemRegular | ParameterItemOffset
-
-export interface InstructionDetails {
-  pc: number,
-  instruction: number,
-  name: string,
-  parameters: ParameterItem[]
-}
-
-export async function decodeInstruction(pc: number, instruction: number): Promise<InstructionDetails | null> {
-  return await invoke('decode_instruction', { pc, instruction }) ?? null
-}
-
-export interface InstructionLineInstruction {
-  type: 'Instruction',
-  details: InstructionDetails
-}
-
-export interface InstructionLineBlank {
-  type: 'Blank'
-}
-
-export interface InstructionLineComment {
-  type: 'Comment',
-  message: string
-}
-
-export interface InstructionLineLabel {
-  type: 'Label',
-  name: string
-}
-
-export type InstructionLine = InstructionLineInstruction
-  | InstructionLineBlank
-  | InstructionLineComment
-  | InstructionLineLabel;
-
-export async function disassemblyDetails(bytes: ArrayBuffer): Promise<InstructionLine[]> {
-  return await invoke('detailed_disassemble', { bytes: Array.from(new Uint8Array(bytes)) })
-}
-
-export async function lastDisplay(): Promise<LastDisplay> {
-  const result = await invoke('last_display')
-
-  return result as LastDisplay
-}
-
-export class ExecutionState {
-  configured: boolean = false
-  public breakpoints: Breakpoints | null
-
-  async configure(): Promise<AssemblerResult | null> {
-    if (this.configured) {
-      return null
-    }
-
-    this.configured = true
-
-    switch (this.profile.kind) {
-      case 'elf': {
-        const text = window.atob(this.profile.elf)
-
-        const bytes = new Array(text.length)
-        for (let i = 0; i < text.length; i++) {
-          bytes[i] = text.charCodeAt(i)
-        }
-
-        const result = await tauri.invoke('configure_elf', {
-          bytes,
-          timeTravel: this.timeTravel
-        })
-
-        return result
-          ? { status: 'Success', breakpoints: [] }
-          : {
-              status: 'Error',
-              message: 'Configured ELF was not valid',
-              body: null,
-              marker: null,
-            }
-      }
-
-      case 'asm': {
-        const result = (await tauri.invoke('configure_asm', {
-          text: this.text,
-          path: this.path,
-          timeTravel: this.timeTravel
-        })) as AssemblerResult
-
-        if (result.status === 'Success') {
-          this.breakpoints = new Breakpoints(result.breakpoints)
-        }
-
-        return result
-      }
-
-      default:
-        break
-    }
-
-    throw new Error()
-  }
-
-  // Requires Time Travel
-  public async lastPc(): Promise<number | null> {
-    return await tauri.invoke('last_pc')
-  }
-  
-  public async rewind(count: number | null): Promise<ExecutionResult | null> {
-    return await tauri.invoke('rewind', { count })
-  }
-
-  public async resume(
-    count: number | null,
-    breakpoints: number[] | null,
-    listen: (result: AssemblerResult) => void = () => {}
-  ): Promise<ExecutionResult | null> {
-    const assemblerResult = await this.configure()
-
-    if (assemblerResult) {
-      listen(assemblerResult)
-
-      if (assemblerResult.status === 'Error') {
-        return null
-      }
-    }
-
-    const mappedBreakpoints = breakpoints
-      ? this.breakpoints?.mapLines(breakpoints) ?? []
-      : []
-
-    const result = await tauri.invoke('resume', {
-      breakpoints: mappedBreakpoints,
-      count,
-    })
-
-    return result as ExecutionResult
-  }
-
-  // For setting new breakpoints WHILE the machine is running.
-  // There's a distinction for some weird technical reason.
-  public async setBreakpoints(breakpoints: number[]) {
-    if (!this.configured) {
-      // Have to invoke resume() with breakpoints anyway.
-      return
-    }
-
-    await tauri.invoke('swap_breakpoints', {
-      breakpoints: this.breakpoints?.mapLines(breakpoints) ?? [],
-    })
-  }
-
-  public async pause() {
-    await tauri.invoke('pause')
-  }
-
-  public async stop() {
-    await tauri.invoke('stop')
-  }
-
-  public async postKey(key: string, up: boolean) {
-    if (key.length !== 1) {
-      return
-    }
-
-    await tauri.invoke('post_key', { key, up })
-  }
-
-  public async postInput(text: string) {
-    if (text.length <= 0) {
-      return
-    }
-
-    await tauri.invoke('post_input', { text })
-  }
-
-  public async memoryAt(
-    address: number,
-    count: number
-  ): Promise<(number | null)[] | null> {
-    const result = await tauri.invoke('read_bytes', { address, count })
-
-    return result as (number | null)[] | null
-  }
-
-  // register: 32 -> hi, 33 -> lo, 34 -> pc
-  public async setRegister(register: number, value: number) {
-    await tauri.invoke('set_register', { register, value })
-  }
-
-  public async setMemory(address: number, bytes: number[]) {
-    await tauri.invoke('write_bytes', { address, bytes })
-  }
-
-  public constructor(
-    public text: string,
-    public path: string | null,
-    public timeTravel: boolean,
-    public profile: ExecutionProfile
-  ) {
-    switch (profile.kind) {
-      case 'elf': {
-        const breakpoints = Object.entries(profile.breakpoints).map(
-          ([pc, line]) => ({ line, pcs: [parseInt(pc)] } as Breakpoint)
-        )
-
-        this.breakpoints = new Breakpoints(breakpoints)
-
-        break
-      }
-
-      default:
-        this.breakpoints = null
-        break
-    }
-  }
-}
diff --git a/src/utils/mips/mips.ts b/src/utils/mips/mips.ts
new file mode 100644
index 0000000..6b89da5
--- /dev/null
+++ b/src/utils/mips/mips.ts
@@ -0,0 +1,281 @@
+import { ExportRegionsOptions } from '../settings'
+
+export interface ElfExecutionProfile {
+  kind: 'elf'
+  elf: string // not sure what to do here
+  breakpoints: Record<number, number>
+}
+
+// should only be set after building
+export interface AssemblyExecutionProfile {
+  kind: 'asm'
+}
+
+export type ExecutionProfile = ElfExecutionProfile | AssemblyExecutionProfile
+
+export interface DisassembleResult {
+  error: string | null
+  lines: string[]
+  breakpoints: Record<number, number>
+}
+
+export interface LineMarker {
+  line: number
+  offset: number
+}
+
+export interface Breakpoint {
+  line: number
+  pcs: number[]
+}
+
+export interface AssemblerSuccess {
+  breakpoints: Breakpoint[]
+}
+
+export interface AssemblerError {
+  marker: LineMarker | null
+  body: string | null
+  message: string
+}
+
+export type AssemblerResultSuccess = AssemblerSuccess & { status: 'Success' }
+export type AssemblerResultError = AssemblerError & { status: 'Error' }
+
+export type AssemblerResult = AssemblerResultSuccess | AssemblerResultError
+
+export interface BinaryResult {
+  binary: Uint8Array | null
+  result: AssemblerResult
+}
+
+export interface BitmapConfig {
+  width: number
+  height: number
+  address: number
+}
+
+export enum ExecutionModeType {
+  Running = 'Running',
+  Invalid = 'Invalid',
+  Paused = 'Paused',
+  Stopped = 'Stopped',
+  Breakpoint = 'Breakpoint',
+  Finished = 'Finished',
+}
+
+export interface ExecutionModeInvalid {
+  type: ExecutionModeType.Invalid
+  message: string
+}
+
+export interface ExecutionModeFinished {
+  type: ExecutionModeType.Finished
+  pc: number
+  code: number | null
+}
+
+type ExecutionModeOther =
+  | ExecutionModeType.Running
+  | ExecutionModeType.Breakpoint
+  | ExecutionModeType.Paused
+
+export type ExecutionMode =
+  | ExecutionModeInvalid
+  | ExecutionModeFinished
+  | { type: ExecutionModeOther }
+
+export interface Registers {
+  pc: number
+  line: number[]
+  lo: number
+  hi: number
+}
+
+export interface ExecutionResult {
+  mode: ExecutionMode
+  registers: Registers
+}
+
+export interface LastDisplay {
+  address: number
+  width: number
+  height: number
+  data: number[] | null
+}
+
+export class Breakpoints {
+  public maxLine: number
+  public lineToPc: Map<number, number[]>
+  public pcToGroup: Map<number, Breakpoint>
+
+  findNextPc(line: number): number[] {
+    while (line <= this.maxLine) {
+      const value = this.lineToPc.get(line)
+
+      if (value !== undefined) {
+        return value
+      }
+
+      line += 1
+    }
+
+    return []
+  }
+
+  public mapLines(lines: number[]): number[] {
+    return lines.flatMap((line) => this.findNextPc(line))
+  }
+
+  // pc -> line
+  constructor(breakpoints: Breakpoint[]) {
+    this.maxLine = Math.max(...breakpoints.map(b => b.line))
+    this.lineToPc = new Map()
+    this.pcToGroup = new Map()
+
+    for (const breakpoint of breakpoints) {
+      let lineMap = this.lineToPc.get(breakpoint.line)
+
+      if (!lineMap) {
+        lineMap = []
+
+        this.lineToPc.set(breakpoint.line, lineMap)
+      }
+
+      const anchorPc = breakpoint.pcs[0]
+
+      if (anchorPc !== undefined) {
+        lineMap.push(anchorPc)
+      }
+
+      for (const pc of breakpoint.pcs) {
+        this.pcToGroup.set(pc, breakpoint)
+      }
+    }
+  }
+}
+
+export interface HexRegion {
+  name: string
+  data: string // base64 encoded
+}
+
+interface AssembledRegionsBinary {
+  type: 'binary'
+  value: string // base64 encoded
+}
+
+interface AssembledRegionsSplit {
+  type: 'split'
+  value: HexRegion[]
+}
+
+export type AssembledRegions = AssembledRegionsBinary | AssembledRegionsSplit
+
+export interface HexBinaryResult {
+  regions: AssembledRegions | null
+  result: AssemblerResult
+}
+
+export interface ParameterItemRegular {
+  type: 'Register' | 'Immediate' | 'Address'
+  value: number
+}
+
+export interface ParameterItemOffset {
+  type: 'Offset'
+  value: { offset: number, register: number }
+}
+
+export type ParameterItem = ParameterItemRegular | ParameterItemOffset
+
+export interface InstructionDetails {
+  pc: number,
+  instruction: number,
+  name: string,
+  parameters: ParameterItem[]
+}
+
+export interface InstructionLineInstruction {
+  type: 'Instruction',
+  details: InstructionDetails
+}
+
+export interface InstructionLineBlank {
+  type: 'Blank'
+}
+
+export interface InstructionLineComment {
+  type: 'Comment',
+  message: string
+}
+
+export interface InstructionLineLabel {
+  type: 'Label',
+  name: string
+}
+
+export type InstructionLine = InstructionLineInstruction
+  | InstructionLineBlank
+  | InstructionLineComment
+  | InstructionLineLabel
+
+export interface MipsBackend {
+  // Insight
+  decodeInstruction(pc: number, instruction: number): Promise<InstructionDetails | null>
+  disassemblyDetails(bytes: ArrayBuffer): Promise<InstructionLine[]>
+
+  disassembleElf(
+    named: string,
+    elf: ArrayBuffer
+  ): Promise<DisassembleResult>
+
+  assembleText(text: string, path: string | null): Promise<AssemblerResult>
+  assembleWithBinary(text: string, path: string | null): Promise<BinaryResult>
+
+  assembleRegions(
+    text: string,
+    path: string | null,
+    options: ExportRegionsOptions
+  ): Promise<HexBinaryResult>
+
+  // Execution
+  configureDisplay(config: BitmapConfig): Promise<void>
+  lastDisplay(): Promise<LastDisplay>
+
+  createExecution(
+    text: string,
+    path: string | null,
+    timeTravel: boolean,
+    profile: ExecutionProfile
+  ): Promise<MipsExecution>
+}
+
+export interface MipsExecution {
+  timeTravel: boolean
+  profile: ExecutionProfile
+  breakpoints: Breakpoints | null
+
+  lastPc(): Promise<number | null>
+
+  configure(): Promise<AssemblerResult | null>
+  rewind(count: number | null): Promise<ExecutionResult | null>
+  resume(
+    count: number | null,
+    breakpoints: number[] | null,
+    listen: (result: AssemblerResult) => void
+  ): Promise<ExecutionResult | null>
+  pause(): Promise<void>
+  stop(): Promise<void>
+  setBreakpoints(breakpoints: number[]): Promise<void>
+
+  postKey(key: string, up: boolean): Promise<void>
+  postInput(text: string): Promise<void>
+
+  memoryAt(
+    address: number,
+    count: number
+  ): Promise<(number | null)[] | null>
+  setRegister(register: number, value: number): Promise<void>
+  setMemory(address: number, bytes: number[]): Promise<void>
+}
diff --git a/src/utils/mips/tauri-backend.ts b/src/utils/mips/tauri-backend.ts
new file mode 100644
index 0000000..5afbf9c
--- /dev/null
+++ b/src/utils/mips/tauri-backend.ts
@@ -0,0 +1,263 @@
+import {
+  AssembledRegions,
+  AssemblerResult,
+  BinaryResult,
+  BitmapConfig, Breakpoint, Breakpoints, DisassembleResult, ExecutionProfile, ExecutionResult,
+  HexBinaryResult,
+  InstructionDetails,
+  InstructionLine,
+  LastDisplay, MipsBackend, MipsExecution
+} from './mips'
+import { ExportRegionsOptions } from '../settings'
+
+import { tauri } from '@tauri-apps/api'
+
+export class TauriExecution implements MipsExecution {
+  configured: boolean = false
+  public breakpoints: Breakpoints | null
+
+  async configure(): Promise<AssemblerResult | null> {
+    if (this.configured) {
+      return null
+    }
+
+    this.configured = true
+
+    switch (this.profile.kind) {
+      case 'elf': {
+        const text = window.atob(this.profile.elf)
+
+        const bytes = new Array(text.length)
+        for (let i = 0; i < text.length; i++) {
+          bytes[i] = text.charCodeAt(i)
+        }
+
+        const result = await tauri.invoke('configure_elf', {
+          bytes,
+          timeTravel: this.timeTravel
+        })
+
+        return result
+          ? { status: 'Success', breakpoints: [] }
+          : {
+            status: 'Error',
+            message: 'Configured ELF was not valid',
+            body: null,
+            marker: null,
+          }
+      }
+
+      case 'asm': {
+        const result = (await tauri.invoke('configure_asm', {
+          text: this.text,
+          path: this.path,
+          timeTravel: this.timeTravel
+        })) as AssemblerResult
+
+        if (result.status === 'Success') {
+          this.breakpoints = new Breakpoints(result.breakpoints)
+        }
+
+        return result
+      }
+
+      default:
+        break
+    }
+
+    throw new Error()
+  }
+
+  // Requires Time Travel
+  public async lastPc(): Promise<number | null> {
+    return await tauri.invoke('last_pc')
+  }
+
+  public async rewind(count: number | null): Promise<ExecutionResult | null> {
+    return await tauri.invoke('rewind', { count })
+  }
+
+  public async resume(
+    count: number | null,
+    breakpoints: number[] | null,
+    listen: (result: AssemblerResult) => void = () => {}
+  ): Promise<ExecutionResult | null> {
+    const assemblerResult = await this.configure()
+
+    if (assemblerResult) {
+      listen(assemblerResult)
+
+      if (assemblerResult.status === 'Error') {
+        return null
+      }
+    }
+
+    const mappedBreakpoints = breakpoints
+      ? this.breakpoints?.mapLines(breakpoints) ?? []
+      : []
+
+    const result = await tauri.invoke('resume', {
+      breakpoints: mappedBreakpoints,
+      count,
+    })
+
+    return result as ExecutionResult
+  }
+
+  // For setting new breakpoints WHILE the machine is running.
+  // There's a distinction for some weird technical reason.
+  public async setBreakpoints(breakpoints: number[]) {
+    if (!this.configured) {
+      // Have to invoke resume() with breakpoints anyway.
+      return
+    }
+
+    await tauri.invoke('swap_breakpoints', {
+      breakpoints: this.breakpoints?.mapLines(breakpoints) ?? [],
+    })
+  }
+
+  public async pause() {
+    await tauri.invoke('pause')
+  }
+
+  public async stop() {
+    await tauri.invoke('stop')
+  }
+
+  public async postKey(key: string, up: boolean) {
+    if (key.length !== 1) {
+      return
+    }
+
+    await tauri.invoke('post_key', { key, up })
+  }
+
+  public async postInput(text: string) {
+    if (text.length <= 0) {
+      return
+    }
+
+    await tauri.invoke('post_input', { text })
+  }
+
+  public async memoryAt(
+    address: number,
+    count: number
+  ): Promise<(number | null)[] | null> {
+    const result = await tauri.invoke('read_bytes', { address, count })
+
+    return result as (number | null)[] | null
+  }
+
+  // register: 32 -> hi, 33 -> lo, 34 -> pc
+  public async setRegister(register: number, value: number) {
+    await tauri.invoke('set_register', { register, value })
+  }
+
+  public async setMemory(address: number, bytes: number[]) {
+    await tauri.invoke('write_bytes', { address, bytes })
+  }
+
+  public constructor(
+    public text: string,
+    public path: string | null,
+    public timeTravel: boolean,
+    public profile: ExecutionProfile
+  ) {
+    switch (profile.kind) {
+      case 'elf': {
+        const breakpoints = Object.entries(profile.breakpoints).map(
+          ([pc, line]) => ({ line, pcs: [parseInt(pc)] } as Breakpoint)
+        )
+
+        this.breakpoints = new Breakpoints(breakpoints)
+
+        break
+      }
+
+      default:
+        this.breakpoints = null
+        break
+    }
+  }
+}
+
+export class TauriBackend implements MipsBackend {
+  async assembleRegions(text: string, path: string | null, options: ExportRegionsOptions): Promise<HexBinaryResult> {
+    const value = (await tauri.invoke('assemble_regions', {
+      text, path, options
+    })) as [
+        AssembledRegions | null,
+      AssemblerResult
+    ]
+
+    const [regions, result ] = value
+
+    return {
+      regions,
+      result
+    }
+  }
+
+  async assembleText(text: string, path: string | null): Promise<AssemblerResult> {
+    const result = await tauri.invoke('assemble', { text, path })
+
+    return result as AssemblerResult
+  }
+
+  async assembleWithBinary(text: string, path: string | null): Promise<BinaryResult> {
+    const result = (await tauri.invoke('assemble_binary', { text, path })) as [
+        number[] | null,
+      AssemblerResult
+    ]
+
+    const [binary, assemblerResult] = result
+
+    return {
+      binary: binary ? Uint8Array.from(binary) : null,
+      result: assemblerResult,
+    }
+  }
+
+  async configureDisplay(config: BitmapConfig): Promise<void> {
+    await tauri.invoke('configure_display', {
+      width: config.width,
+      height: config.height,
+      address: config.address,
+    })
+  }
+
+  async decodeInstruction(pc: number, instruction: number): Promise<InstructionDetails | null> {
+    return await tauri.invoke('decode_instruction', { pc, instruction }) ?? null
+  }
+
+  async disassembleElf(named: string, elf: ArrayBuffer): Promise<DisassembleResult> {
+    const bytes = Array.from(new Uint8Array(elf))
+
+    const value = await tauri.invoke('disassemble', { named, bytes })
+
+    return value as DisassembleResult
+  }
+
+  async disassemblyDetails(bytes: ArrayBuffer): Promise<InstructionLine[]> {
+    return await tauri.invoke('detailed_disassemble', { bytes: Array.from(new Uint8Array(bytes)) })
+  }
+
+  async lastDisplay(): Promise<LastDisplay> {
+    const result = await tauri.invoke('last_display')
+
+    return result as LastDisplay
+  }
+
+  createExecution(
+    text: string,
+    path: string | null,
+    timeTravel: boolean,
+    profile: ExecutionProfile
+  ): Promise<MipsExecution> {
+    return Promise.resolve(
+      new TauriExecution(text, path, timeTravel, profile)
+    )
+  }
+}
diff --git a/src/utils/mips/wasm-backend.ts b/src/utils/mips/wasm-backend.ts
new file mode 100644
index 0000000..532e961
--- /dev/null
+++ b/src/utils/mips/wasm-backend.ts
@@ -0,0 +1,48 @@
+import {
+  AssemblerResult,
+  BinaryResult,
+  BitmapConfig, DisassembleResult,
+  ExecutionProfile,
+  HexBinaryResult, InstructionDetails, InstructionLine, LastDisplay,
+  MipsBackend,
+  MipsExecution
+} from './mips'
+import { ExportRegionsOptions } from '../settings'
+
+export class WasmBackend implements MipsBackend {
+  assembleRegions(text: string, path: string | null, options: ExportRegionsOptions): Promise<HexBinaryResult> {
+    throw new Error()
+  }
+
+  assembleText(text: string, path: string | null): Promise<AssemblerResult> {
+    throw new Error()
+  }
+
+  assembleWithBinary(text: string, path: string | null): Promise<BinaryResult> {
+    throw new Error()
+  }
+
+  configureDisplay(config: BitmapConfig): Promise<void> {
+    throw new Error()
+  }
+
+  createExecution(text: string, path: string | null, timeTravel: boolean, profile: ExecutionProfile): Promise<MipsExecution> {
+    throw new Error()
+  }
+
+  decodeInstruction(pc: number, instruction: number): Promise<InstructionDetails | null> {
+    throw new Error()
+  }
+
+  disassembleElf(named: string, elf: ArrayBuffer): Promise<DisassembleResult> {
+    throw new Error()
+  }
+
+  disassemblyDetails(bytes: ArrayBuffer): Promise<InstructionLine[]> {
+    throw new Error()
+  }
+
+  lastDisplay(): Promise<LastDisplay> {
+    throw new Error()
+  }
+}
\ No newline at end of file
diff --git a/src/utils/mips/wasm-worker.ts b/src/utils/mips/wasm-worker.ts
new file mode 100644
index 0000000..336ce12
--- /dev/null
+++ b/src/utils/mips/wasm-worker.ts
@@ -0,0 +1 @@
+export {}
diff --git a/src/utils/query/serialize-files.ts b/src/utils/query/serialize-files.ts
index 9a6026b..9a416e3 100644
--- a/src/utils/query/serialize-files.ts
+++ b/src/utils/query/serialize-files.ts
@@ -1,4 +1,4 @@
-import { HexRegion } from '../mips'
+import { HexRegion } from '../mips/mips'
 
 import { invoke } from '@tauri-apps/api'
 import { AccessFilter } from './access-manager'
diff --git a/src/utils/settings.ts b/src/utils/settings.ts
index b6227db..ec8af34 100644
--- a/src/utils/settings.ts
+++ b/src/utils/settings.ts
@@ -1,5 +1,6 @@
 import { reactive, watch } from 'vue'
-import { BitmapConfig, configureDisplay } from './mips'
+import { BitmapConfig } from './mips/mips'
+import { backend } from '../state/console-data'
 
 const settingsVersion = 6
 
@@ -125,13 +126,13 @@ export function displayConfig(bitmap: BitmapSettings): BitmapConfig {
 export function useSettings(): Settings {
   const state = reactive(fromStorage())
 
-  configureDisplay(displayConfig(state.bitmap)).then(() => {})
+  backend.configureDisplay(displayConfig(state.bitmap)).then(() => {})
 
   watch(
     () => state.bitmap,
     async (bitmap) => {
       // Update tauri backend.
-      await configureDisplay(displayConfig(bitmap))
+      await backend.configureDisplay(displayConfig(bitmap))
     },
     { deep: true }
   )
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
index de4fda6..da67c58 100644
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -3,9 +3,9 @@ import { Editor } from './editor'
 import { collectLines, EditorTab } from './tabs'
 import { Language, Token } from './languages/language'
 import { MipsHighlighter } from './languages/mips/language'
-import { assembleText } from './mips'
 import { HighlightsInterface } from './highlights'
 import { SuggestionsStorage } from './languages/suggestions'
+import { backend } from '../state/console-data'
 
 export interface StorageState {
   // editor: Editor
@@ -54,7 +54,7 @@ export function useStorage(
   async function checkSyntax() {
     const current = tab()
 
-    const result = await assembleText(collectLines(current?.lines ?? []), current?.path ?? null)
+    const result = await backend.assembleText(collectLines(current?.lines ?? []), current?.path ?? null)
 
     if (result.status === 'Error' && result.marker) {
       const tokens = storage.highlights[result.marker.line]
diff --git a/src/utils/tabs.ts b/src/utils/tabs.ts
index f98c763..e5593f1 100644
--- a/src/utils/tabs.ts
+++ b/src/utils/tabs.ts
@@ -3,16 +3,16 @@ import { computed, ComputedRef, reactive, ref, Ref, watch } from 'vue'
 import { v4 as uuid } from 'uuid'
 import {
   AssemblyExecutionProfile,
-  disassembleElf,
   ElfExecutionProfile,
   ExecutionProfile,
-} from './mips'
+} from './mips/mips'
 import { SelectionIndex, SelectionRange } from './editor'
 import { PromptType, saveTab } from './events'
 import { SaveModalResult, useSaveModal } from './save-modal'
 import { closeWindow } from './window'
 import { splitLines } from './split-lines'
 import { accessReadText, accessSync } from './query/access-manager'
+import { backend } from '../state/console-data'
 
 export type CursorState = SelectionIndex & {
   highlight: SelectionIndex | null
@@ -351,7 +351,7 @@ export function useTabs(): TabsResult {
   }
 
   async function loadElf(named: string, elf: ArrayBuffer) {
-    const value = await disassembleElf(named, elf)
+    const value = await backend.disassembleElf(named, elf)
 
     const bytes = new Uint8Array(elf)
     let binary = ''