diff --git a/deno.json b/deno.json
index 0b451d6..d68928e 100644
--- a/deno.json
+++ b/deno.json
@@ -11,6 +11,7 @@
     "check": "deno run -A npm:rescript format src/*.res && deno run -A npm:rescript",
     "gossamer:dev": "deno task build:res && cargo run",
     "gossamer:build": "deno task build && cargo build --release",
+    "test": "deno task build:res && deno test --allow-read tests/",
     "test:forth": "gforth kernel/striker.fth -e 'test-strike bye'",
     "verify": "hexdump -C dist/substrate.bin"
   },
diff --git a/index.html b/index.html
index 4e24f8c..825fe59 100644
--- a/index.html
+++ b/index.html
@@ -8,606 +8,17 @@
     <title>DotMatrix-FilePrinter</title>
     <meta name="description" content="Neurosymbolic filesystem manipulation via Forth kernel" />
 
-    <style>
-      /* Phosphor Green Terminal Theme */
-      :root {
-        --bg-primary: #0a0a0a;
-        --bg-secondary: #111;
-        --bg-tertiary: #1a1a1a;
-        --fg-primary: #33ff33;
-        --fg-secondary: #00cc00;
-        --fg-muted: #339933;
-        --fg-dim: #226622;
-        --danger: #ff3333;
-        --warning: #ffcc00;
-        --info: #33ccff;
-        --font-mono: 'IBM Plex Mono', 'Fira Code', 'Consolas', monospace;
-        --border-radius: 4px;
-        --transition-fast: 0.15s ease;
-        --transition-medium: 0.3s ease;
-      }
-
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
-      html, body {
-        height: 100%;
-        background: var(--bg-primary);
-        color: var(--fg-primary);
-        font-family: var(--font-mono);
-        font-size: 14px;
-      }
-
-      /* Main shell layout */
-      .shell {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .shell__header {
-        padding: 1rem;
-        border-bottom: 1px solid var(--fg-muted);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
-      }
-
-      .shell__title {
-        font-size: 1.2rem;
-        font-weight: normal;
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-      }
-
-      .shell__title::before {
-        content: ">";
-        animation: blink 1s step-end infinite;
-      }
-
-      @keyframes blink {
-        50% { opacity: 0; }
-      }
-
-      .shell__main {
-        flex: 1;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 1rem;
-        padding: 1rem;
-        overflow: auto;
-      }
-
-      @media (max-width: 900px) {
-        .shell__main {
-          grid-template-columns: 1fr;
-        }
-      }
-
-      .shell__footer {
-        padding: 0.5rem 1rem;
-        border-top: 1px solid var(--fg-muted);
-        font-size: 0.85rem;
-        display: flex;
-        gap: 1rem;
-        align-items: center;
-        justify-content: space-between;
-        background: var(--bg-secondary);
-      }
-
-      /* Panels */
-      .panel {
-        background: var(--bg-secondary);
-        border: 1px solid var(--fg-muted);
-        border-radius: var(--border-radius);
-        transition: border-color var(--transition-fast);
-      }
-
-      .panel:focus-within {
-        border-color: var(--fg-primary);
-      }
-
-      .panel__header {
-        padding: 0.5rem 1rem;
-        border-bottom: 1px solid var(--fg-muted);
-        font-weight: bold;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background: var(--bg-tertiary);
-        border-radius: var(--border-radius) var(--border-radius) 0 0;
-      }
-
-      .panel__body {
-        padding: 1rem;
-      }
-
-      /* Input controls */
-      .input {
-        width: 100%;
-        background: var(--bg-primary);
-        color: var(--fg-primary);
-        border: 1px solid var(--fg-muted);
-        font-family: inherit;
-        font-size: inherit;
-        padding: 0.5rem;
-        border-radius: var(--border-radius);
-        transition: all var(--transition-fast);
-      }
-
-      .input:focus {
-        outline: none;
-        border-color: var(--fg-primary);
-        box-shadow: 0 0 8px rgba(51, 255, 51, 0.2);
-      }
-
-      .input--textarea {
-        min-height: 120px;
-        resize: vertical;
-        line-height: 1.5;
-      }
-
-      .input::placeholder {
-        color: var(--fg-dim);
-      }
-
-      /* Mode selector tabs */
-      .mode-selector {
-        display: flex;
-        gap: 0;
-        margin-bottom: 1rem;
-        border: 1px solid var(--fg-muted);
-        border-radius: var(--border-radius);
-        overflow: hidden;
-      }
-
-      .mode-selector__btn {
-        flex: 1;
-        background: var(--bg-primary);
-        color: var(--fg-muted);
-        border: none;
-        padding: 0.5rem;
-        font-family: inherit;
-        font-size: 0.85rem;
-        cursor: pointer;
-        transition: all var(--transition-fast);
-      }
-
-      .mode-selector__btn:not(:last-child) {
-        border-right: 1px solid var(--fg-muted);
-      }
-
-      .mode-selector__btn:hover {
-        background: var(--bg-tertiary);
-        color: var(--fg-secondary);
-      }
-
-      .mode-selector__btn--active {
-        background: var(--fg-muted);
-        color: var(--bg-primary);
-      }
-
-      .mode-selector__btn--active:hover {
-        background: var(--fg-secondary);
-        color: var(--bg-primary);
-      }
-
-      /* Buttons */
-      .btn {
-        background: transparent;
-        color: var(--fg-primary);
-        border: 1px solid var(--fg-primary);
-        padding: 0.5rem 1rem;
-        font-family: inherit;
-        font-size: inherit;
-        cursor: pointer;
-        border-radius: var(--border-radius);
-        transition: all var(--transition-fast);
-        position: relative;
-        overflow: hidden;
-      }
-
-      .btn:hover:not(:disabled) {
-        background: var(--fg-primary);
-        color: var(--bg-primary);
-        transform: translateY(-1px);
-      }
-
-      .btn:active:not(:disabled) {
-        transform: translateY(0);
-      }
-
-      .btn:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-
-      .btn--primary {
-        background: var(--fg-primary);
-        color: var(--bg-primary);
-        font-weight: bold;
-      }
-
-      .btn--primary:hover:not(:disabled) {
-        background: #44ff44;
-        box-shadow: 0 0 12px rgba(51, 255, 51, 0.4);
-      }
-
-      .btn--small {
-        padding: 0.25rem 0.5rem;
-        font-size: 0.85rem;
-      }
-
-      .btn__shortcut {
-        font-size: 0.7rem;
-        opacity: 0.7;
-        margin-left: 0.5rem;
-      }
-
-      .actions {
-        display: flex;
-        gap: 0.5rem;
-        margin-top: 1rem;
-        flex-wrap: wrap;
-      }
-
-      /* Target path input */
-      .target-path {
-        margin-top: 1rem;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      .target-path label {
-        white-space: nowrap;
-        color: var(--fg-muted);
-      }
-
-      .target-path input {
-        flex: 1;
-      }
-
-      /* Bytes preview */
-      .bytes-preview {
-        margin-top: 1rem;
-        padding: 0.75rem;
-        background: var(--bg-primary);
-        border: 1px dashed var(--fg-muted);
-        border-radius: var(--border-radius);
-        font-size: 0.9rem;
-      }
-
-      .bytes-preview code {
-        color: var(--fg-secondary);
-        word-break: break-all;
-      }
-
-      .bytes-preview__count {
-        color: var(--fg-muted);
-        font-size: 0.85rem;
-        margin-bottom: 0.5rem;
-      }
-
-      /* Hex editor view */
-      .hex-editor {
-        font-family: var(--font-mono);
-        font-size: 0.85rem;
-        background: var(--bg-primary);
-        border-radius: var(--border-radius);
-        overflow: hidden;
-      }
-
-      .hex-editor__header {
-        display: grid;
-        grid-template-columns: 80px 1fr 160px;
-        gap: 1rem;
-        padding: 0.5rem 1rem;
-        background: var(--bg-tertiary);
-        color: var(--fg-muted);
-        border-bottom: 1px solid var(--fg-muted);
-      }
-
-      .hex-editor__body {
-        max-height: 300px;
-        overflow-y: auto;
-        overflow-x: hidden;
-      }
-
-      .hex-editor__row {
-        display: grid;
-        grid-template-columns: 80px 1fr 160px;
-        gap: 1rem;
-        padding: 0.25rem 1rem;
-        border-bottom: 1px solid var(--bg-tertiary);
-        transition: background var(--transition-fast);
-      }
-
-      .hex-editor__row:hover {
-        background: var(--bg-tertiary);
-      }
-
-      .hex-editor__address {
-        color: var(--fg-dim);
-      }
-
-      .hex-editor__bytes {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-      }
-
-      .hex-editor__byte {
-        width: 2ch;
-        text-align: center;
-        transition: all var(--transition-fast);
-      }
-
-      .hex-editor__byte--contaminated {
-        color: var(--danger);
-        font-weight: bold;
-      }
-
-      .hex-editor__byte--gap {
-        margin-right: 0.5rem;
-      }
-
-      .hex-editor__ascii {
-        color: var(--fg-muted);
-        letter-spacing: 0.1em;
-      }
-
-      .hex-editor__ascii span {
-        display: inline-block;
-        width: 1ch;
-        text-align: center;
-      }
-
-      .hex-editor__ascii span.non-printable {
-        color: var(--fg-dim);
-      }
-
-      /* Alerts and status */
-      .alert {
-        padding: 1rem;
-        margin-bottom: 1rem;
-        border: 1px solid;
-        border-radius: var(--border-radius);
-        animation: alertIn 0.2s ease;
-      }
-
-      @keyframes alertIn {
-        from { opacity: 0; transform: translateY(-4px); }
-        to { opacity: 1; transform: translateY(0); }
-      }
-
-      .alert--danger {
-        border-color: var(--danger);
-        color: var(--danger);
-        background: rgba(255, 51, 51, 0.1);
-      }
-
-      .alert--success {
-        border-color: var(--fg-primary);
-        color: var(--fg-primary);
-        background: rgba(51, 255, 51, 0.1);
-      }
-
-      .alert--info {
-        border-color: var(--info);
-        color: var(--info);
-        background: rgba(51, 204, 255, 0.1);
-      }
-
-      .alert ul {
-        margin: 0.5rem 0 0 1.5rem;
-      }
-
-      /* Badges */
-      .badge {
-        font-size: 0.75rem;
-        padding: 0.2rem 0.5rem;
-        border-radius: 2px;
-        font-weight: bold;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-      }
-
-      .badge--success {
-        color: var(--fg-primary);
-        border: 1px solid var(--fg-primary);
-        background: rgba(51, 255, 51, 0.1);
-      }
-
-      .badge--danger {
-        color: var(--danger);
-        border: 1px solid var(--danger);
-        background: rgba(255, 51, 51, 0.1);
-      }
-
-      /* Status indicators */
-      .status {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      .status__dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: currentColor;
-        animation: pulse 2s ease infinite;
-      }
-
-      @keyframes pulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.5; }
-      }
-
-      .status--ok { color: var(--fg-primary); }
-      .status--ok .status__dot { animation: none; }
-      .status--warning { color: var(--warning); }
-      .status--error { color: var(--danger); }
-      .status--error .status__dot { animation: none; }
-
-      #error {
-        display: none;
-        margin: 0 1rem;
-      }
-
-      #preview-panel,
-      #verify-panel {
-        display: none;
-        animation: panelIn 0.3s ease;
-      }
-
-      @keyframes panelIn {
-        from { opacity: 0; transform: translateX(8px); }
-        to { opacity: 1; transform: translateX(0); }
-      }
-
-      /* Help panel */
-      .help-panel {
-        position: fixed;
-        right: -400px;
-        top: 0;
-        bottom: 0;
-        width: 400px;
-        max-width: 100vw;
-        background: var(--bg-secondary);
-        border-left: 1px solid var(--fg-muted);
-        z-index: 100;
-        transition: right var(--transition-medium);
-        display: flex;
-        flex-direction: column;
-      }
-
-      .help-panel--open {
-        right: 0;
-      }
-
-      .help-panel__header {
-        padding: 1rem;
-        border-bottom: 1px solid var(--fg-muted);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background: var(--bg-tertiary);
-      }
-
-      .help-panel__body {
-        flex: 1;
-        overflow-y: auto;
-        padding: 1rem;
-      }
-
-      .help-panel__section {
-        margin-bottom: 1.5rem;
-      }
-
-      .help-panel__section h3 {
-        color: var(--fg-primary);
-        margin-bottom: 0.5rem;
-        font-size: 0.9rem;
-      }
-
-      .help-panel__section p,
-      .help-panel__section li {
-        color: var(--fg-muted);
-        font-size: 0.85rem;
-        line-height: 1.6;
-      }
-
-      .help-panel__section ul {
-        margin-left: 1.5rem;
-      }
-
-      .help-panel__kbd {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.25rem;
-        margin: 0.25rem 0;
-      }
-
-      .help-panel__kbd kbd {
-        background: var(--bg-primary);
-        border: 1px solid var(--fg-muted);
-        padding: 0.1rem 0.4rem;
-        border-radius: 3px;
-        font-family: inherit;
-        font-size: 0.8rem;
-      }
-
-      .help-overlay {
-        position: fixed;
-        inset: 0;
-        background: rgba(0, 0, 0, 0.5);
-        z-index: 99;
-        opacity: 0;
-        visibility: hidden;
-        transition: all var(--transition-medium);
-      }
-
-      .help-overlay--visible {
-        opacity: 1;
-        visibility: visible;
-      }
-
-      /* Keyboard shortcuts hint */
-      .shortcuts-hint {
-        color: var(--fg-dim);
-        font-size: 0.8rem;
-      }
-
-      /* Footer layout */
-      .footer-left {
-        display: flex;
-        gap: 1rem;
-        align-items: center;
-      }
-
-      .footer-right {
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-      }
-
-      /* Scrollbar styling */
-      ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-      }
-
-      ::-webkit-scrollbar-track {
-        background: var(--bg-primary);
-      }
-
-      ::-webkit-scrollbar-thumb {
-        background: var(--fg-dim);
-        border-radius: 4px;
-      }
-
-      ::-webkit-scrollbar-thumb:hover {
-        background: var(--fg-muted);
-      }
-    </style>
   </head>
   <body>
     <div class="shell">
       <header class="shell__header">
         <h1 class="shell__title">DotMatrix-FilePrinter</h1>
-        <span id="gforth-status" class="status status--warning">
+        <span id="gforth-status" class="status status--warning" role="status" aria-live="polite">
           <span class="status__dot"></span>Gforth: Checking...
         </span>
       </header>
 
-      <div id="error" class="alert alert--danger"></div>
+      <div id="error" class="alert alert--danger" role="alert" aria-live="assertive"></div>
 
       <main class="shell__main">
         <div class="left-panel">
@@ -662,14 +73,14 @@ <h1 class="shell__title">DotMatrix-FilePrinter</h1>
         </div>
 
         <div class="right-panel">
-          <div id="preview-panel" class="panel"></div>
-          <div id="verify-panel" class="panel" style="margin-top: 1rem;"></div>
+          <div id="preview-panel" class="panel" aria-live="polite" aria-label="Strike preview"></div>
+          <div id="verify-panel" class="panel" style="margin-top: 1rem;" aria-live="polite" aria-label="Verification result"></div>
         </div>
       </main>
 
       <footer class="shell__footer">
         <div class="footer-left">
-          <span id="status">Initializing...</span>
+          <span id="status" role="status" aria-live="polite">Initializing...</span>
         </div>
         <div class="footer-right">
           <span class="shortcuts-hint">Press <kbd>?</kbd> for help</span>
diff --git a/lib/ocaml/App.ast b/lib/ocaml/App.ast
index 30c1280..83e2a0b 100644
Binary files a/lib/ocaml/App.ast and b/lib/ocaml/App.ast differ
diff --git a/lib/ocaml/Bindings.ast b/lib/ocaml/Bindings.ast
index 8c4e595..8d09a4a 100644
Binary files a/lib/ocaml/Bindings.ast and b/lib/ocaml/Bindings.ast differ
diff --git a/lib/ocaml/Proven_SafeHex.ast b/lib/ocaml/Proven_SafeHex.ast
index 6420b6a..d039a67 100644
Binary files a/lib/ocaml/Proven_SafeHex.ast and b/lib/ocaml/Proven_SafeHex.ast differ
diff --git a/lib/ocaml/Proven_SafeHex.res b/lib/ocaml/Proven_SafeHex.res
index f917ac6..a5f6318 100644
--- a/lib/ocaml/Proven_SafeHex.res
+++ b/lib/ocaml/Proven_SafeHex.res
@@ -179,11 +179,8 @@ let decodeToString = (hexStr: string): result<string, hexError> => {
   switch decode(hexStr) {
   | Error(e) => Error(e)
   | Ok(bytes) =>
-    let result = ref("")
-    Array.forEach(bytes, byte => {
-      result := result.contents ++ String.fromCharCode(byte)
-    })
-    Ok(result.contents)
+    let chars = Array.map(bytes, byte => String.fromCharCode(byte))
+    Ok(Array.join(chars, ""))
   }
 }
 
@@ -353,25 +350,29 @@ let xorHex = (hexA: string, hexB: string): result<string, hexError> => {
  * Example: [72, 101, 108] -> "48 65 6c"
  */
 let encodeSpaced = (bytes: array<int>): result<string, hexError> => {
-  if Array.length(bytes) == 0 {
+  let length = Array.length(bytes)
+  if length == 0 {
     Ok("")
   } else {
-    let parts = ref([])
+    let parts = Array.make(~length, "")
     let valid = ref(true)
 
-    Array.forEach(bytes, byte => {
-      if valid.contents && byte >= 0 && byte <= 255 {
-        let high = Int.Bitwise.lsr(byte, 4)
-        let low = Int.Bitwise.land(byte, 0x0f)
-        let hex = String.charAt(hexChars, high) ++ String.charAt(hexChars, low)
-        parts := Array.concat(parts.contents, [hex])
-      } else {
-        valid := false
+    for i in 0 to length - 1 {
+      if valid.contents {
+        let byte = Array.getUnsafe(bytes, i)
+        if byte >= 0 && byte <= 255 {
+          let high = Int.Bitwise.lsr(byte, 4)
+          let low = Int.Bitwise.land(byte, 0x0f)
+          let hex = String.charAt(hexChars, high) ++ String.charAt(hexChars, low)
+          Array.setUnsafe(parts, i, hex)
+        } else {
+          valid := false
+        }
       }
-    })
+    }
 
     if valid.contents {
-      Ok(Array.join(parts.contents, " "))
+      Ok(Array.join(parts, " "))
     } else {
       Error(InvalidCharacter)
     }
@@ -383,25 +384,29 @@ let encodeSpaced = (bytes: array<int>): result<string, hexError> => {
  * Example: [72, 101, 108] -> "48 65 6C"
  */
 let encodeSpacedUppercase = (bytes: array<int>): result<string, hexError> => {
-  if Array.length(bytes) == 0 {
+  let length = Array.length(bytes)
+  if length == 0 {
     Ok("")
   } else {
-    let parts = ref([])
+    let parts = Array.make(~length, "")
     let valid = ref(true)
 
-    Array.forEach(bytes, byte => {
-      if valid.contents && byte >= 0 && byte <= 255 {
-        let high = Int.Bitwise.lsr(byte, 4)
-        let low = Int.Bitwise.land(byte, 0x0f)
-        let hex = String.charAt(hexCharsUpper, high) ++ String.charAt(hexCharsUpper, low)
-        parts := Array.concat(parts.contents, [hex])
-      } else {
-        valid := false
+    for i in 0 to length - 1 {
+      if valid.contents {
+        let byte = Array.getUnsafe(bytes, i)
+        if byte >= 0 && byte <= 255 {
+          let high = Int.Bitwise.lsr(byte, 4)
+          let low = Int.Bitwise.land(byte, 0x0f)
+          let hex = String.charAt(hexCharsUpper, high) ++ String.charAt(hexCharsUpper, low)
+          Array.setUnsafe(parts, i, hex)
+        } else {
+          valid := false
+        }
       }
-    })
+    }
 
     if valid.contents {
-      Ok(Array.join(parts.contents, " "))
+      Ok(Array.join(parts, " "))
     } else {
       Error(InvalidCharacter)
     }
diff --git a/lib/ocaml/Proven_SafeMath.ast b/lib/ocaml/Proven_SafeMath.ast
index 545ce95..a2e943a 100644
Binary files a/lib/ocaml/Proven_SafeMath.ast and b/lib/ocaml/Proven_SafeMath.ast differ
diff --git a/lib/ocaml/Proven_SafePath.ast b/lib/ocaml/Proven_SafePath.ast
index b2c491c..29c991b 100644
Binary files a/lib/ocaml/Proven_SafePath.ast and b/lib/ocaml/Proven_SafePath.ast differ
diff --git a/lib/ocaml/Proven_SafePath.cmj b/lib/ocaml/Proven_SafePath.cmj
index 6e825da..f9cf677 100644
Binary files a/lib/ocaml/Proven_SafePath.cmj and b/lib/ocaml/Proven_SafePath.cmj differ
diff --git a/lib/ocaml/Proven_SafePath.res b/lib/ocaml/Proven_SafePath.res
index 91ac014..2da9ed6 100644
--- a/lib/ocaml/Proven_SafePath.res
+++ b/lib/ocaml/Proven_SafePath.res
@@ -12,9 +12,24 @@ let hasTraversal = (path: string): bool => {
   String.startsWith(path, "/") && String.includes(path, "..")
 }
 
-/** Check if a path is safe (no traversal attacks) */
+/** Check if a path contains a null byte
+ *
+ * SECURITY: Null bytes can truncate paths in C-based filesystem APIs,
+ * allowing an attacker to bypass extension checks (e.g. "safe.txt\0.sh").
+ */
+let hasNullByte = (path: string): bool => {
+  String.includes(path, "\x00")
+}
+
+/** Check if a path is safe
+ *
+ * A path is safe if it:
+ * - contains no parent directory traversal (..)
+ * - contains no home directory expansion (~)
+ * - contains no null bytes
+ */
 let isSafe = (path: string): bool => {
-  !hasTraversal(path)
+  !hasTraversal(path) && !hasNullByte(path)
 }
 
 /** Sanitize a filename by removing dangerous characters */
diff --git a/lib/ocaml/Proven_SafeString.ast b/lib/ocaml/Proven_SafeString.ast
index 3353a01..c1a6778 100644
Binary files a/lib/ocaml/Proven_SafeString.ast and b/lib/ocaml/Proven_SafeString.ast differ
diff --git a/lib/ocaml/Proven_SafeString.res b/lib/ocaml/Proven_SafeString.res
index dbac317..2123890 100644
--- a/lib/ocaml/Proven_SafeString.res
+++ b/lib/ocaml/Proven_SafeString.res
@@ -78,7 +78,7 @@ let fromCodePoints = (codes: array<int>): result<string, string> => {
   } else {
     let valid = ref(true)
     let errorIdx = ref(0)
-    let result = ref("")
+    let chars = Array.make(~length, "")
 
     for i in 0 to length - 1 {
       if valid.contents {
@@ -87,13 +87,13 @@ let fromCodePoints = (codes: array<int>): result<string, string> => {
           valid := false
           errorIdx := i
         } else {
-          result := result.contents ++ String.fromCharCode(code)
+          Array.setUnsafe(chars, i, String.fromCharCode(code))
         }
       }
     }
 
     if valid.contents {
-      Ok(result.contents)
+      Ok(Array.join(chars, ""))
     } else {
       Error(`Invalid code point at position ${Int.toString(errorIdx.contents)}`)
     }
diff --git a/lib/ocaml/RuntimeBridge.ast b/lib/ocaml/RuntimeBridge.ast
index a1d31ff..3f7aee0 100644
Binary files a/lib/ocaml/RuntimeBridge.ast and b/lib/ocaml/RuntimeBridge.ast differ
diff --git a/lib/ocaml/Types.ast b/lib/ocaml/Types.ast
index 8d6d301..23b9a54 100644
Binary files a/lib/ocaml/Types.ast and b/lib/ocaml/Types.ast differ
diff --git a/lib/rescript.lock b/lib/rescript.lock
index 71e4713..06bb1f0 100644
--- a/lib/rescript.lock
+++ b/lib/rescript.lock
@@ -1 +1 @@
-815768
\ No newline at end of file
+3490
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 84b23f5..52449e2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: PMPL-1.0-or-later
 // DotMatrix-FilePrinter - Main Entry Point
 
+import "./styles/shell.css";
 import "./styles/main.css";
 import * as App from "./App.res.js";
 
@@ -375,18 +376,16 @@ function clearError() {
 
 function updateGforthStatus() {
   if (gforthStatusEl) {
+    const dot = '<span class="status__dot"></span>';
     if (state.gforthAvailable === null) {
       gforthStatusEl.className = "status status--warning";
-      gforthStatusEl.innerHTML =
-        '<span class="status__dot"></span>Gforth: Checking...';
+      gforthStatusEl.innerHTML = dot + "Gforth: Checking...";
     } else if (state.gforthAvailable) {
       gforthStatusEl.className = "status status--ok";
-      gforthStatusEl.innerHTML =
-        '<span class="status__dot"></span>Gforth: Ready';
+      gforthStatusEl.innerHTML = dot + "Gforth: Ready";
     } else {
       gforthStatusEl.className = "status status--error";
-      gforthStatusEl.innerHTML =
-        '<span class="status__dot"></span>Gforth: Not Found';
+      gforthStatusEl.innerHTML = dot + "Gforth: Not Found";
     }
   }
 }
@@ -493,7 +492,7 @@ function updatePreviewPanel() {
             ${r.contaminants
               .map(
                 (c) =>
-                  `<li>Position ${c.position}: 0x${c.value.toString(16).toUpperCase()} (${c.value}) - ${c.description}</li>`
+                  `<li>Position ${escapeHtml(c.position)}: 0x${escapeHtml(c.value.toString(16).toUpperCase())} (${escapeHtml(c.value)}) - ${escapeHtml(c.description)}</li>`
               )
               .join("")}
           </ul>
@@ -510,7 +509,7 @@ function updatePreviewPanel() {
       <div class="panel__body">
         ${contaminantsHtml}
         ${hexEditor}
-        <p style="margin-top: 1rem; color: var(--fg-muted);">${r.byte_count} bytes ready to strike</p>
+        <p style="margin-top: 1rem; color: var(--fg-muted);">${escapeHtml(r.byte_count)} bytes ready to strike</p>
       </div>
     `;
     previewPanel.style.display = "block";
@@ -532,7 +531,7 @@ function updateVerifyPanel() {
             ${r.contaminants
               .map(
                 (c) =>
-                  `<li>Position ${c.position}: 0x${c.value.toString(16).toUpperCase()} (${c.value}) - ${c.description}</li>`
+                  `<li>Position ${escapeHtml(c.position)}: 0x${escapeHtml(c.value.toString(16).toUpperCase())} (${escapeHtml(c.value)}) - ${escapeHtml(c.description)}</li>`
               )
               .join("")}
           </ul>
@@ -579,5 +578,12 @@ function updateButtons() {
   if (verifyBtn) verifyBtn.disabled = !hasGforth || !hasValidPath;
 }
 
+// Sanitize text for safe HTML insertion (prevent XSS)
+function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.appendChild(document.createTextNode(String(str)));
+  return div.innerHTML;
+}
+
 // Start the app
 document.addEventListener("DOMContentLoaded", init);
diff --git a/src/proven/Proven_SafeHex.res b/src/proven/Proven_SafeHex.res
index f917ac6..a5f6318 100644
--- a/src/proven/Proven_SafeHex.res
+++ b/src/proven/Proven_SafeHex.res
@@ -179,11 +179,8 @@ let decodeToString = (hexStr: string): result<string, hexError> => {
   switch decode(hexStr) {
   | Error(e) => Error(e)
   | Ok(bytes) =>
-    let result = ref("")
-    Array.forEach(bytes, byte => {
-      result := result.contents ++ String.fromCharCode(byte)
-    })
-    Ok(result.contents)
+    let chars = Array.map(bytes, byte => String.fromCharCode(byte))
+    Ok(Array.join(chars, ""))
   }
 }
 
@@ -353,25 +350,29 @@ let xorHex = (hexA: string, hexB: string): result<string, hexError> => {
  * Example: [72, 101, 108] -> "48 65 6c"
  */
 let encodeSpaced = (bytes: array<int>): result<string, hexError> => {
-  if Array.length(bytes) == 0 {
+  let length = Array.length(bytes)
+  if length == 0 {
     Ok("")
   } else {
-    let parts = ref([])
+    let parts = Array.make(~length, "")
     let valid = ref(true)
 
-    Array.forEach(bytes, byte => {
-      if valid.contents && byte >= 0 && byte <= 255 {
-        let high = Int.Bitwise.lsr(byte, 4)
-        let low = Int.Bitwise.land(byte, 0x0f)
-        let hex = String.charAt(hexChars, high) ++ String.charAt(hexChars, low)
-        parts := Array.concat(parts.contents, [hex])
-      } else {
-        valid := false
+    for i in 0 to length - 1 {
+      if valid.contents {
+        let byte = Array.getUnsafe(bytes, i)
+        if byte >= 0 && byte <= 255 {
+          let high = Int.Bitwise.lsr(byte, 4)
+          let low = Int.Bitwise.land(byte, 0x0f)
+          let hex = String.charAt(hexChars, high) ++ String.charAt(hexChars, low)
+          Array.setUnsafe(parts, i, hex)
+        } else {
+          valid := false
+        }
       }
-    })
+    }
 
     if valid.contents {
-      Ok(Array.join(parts.contents, " "))
+      Ok(Array.join(parts, " "))
     } else {
       Error(InvalidCharacter)
     }
@@ -383,25 +384,29 @@ let encodeSpaced = (bytes: array<int>): result<string, hexError> => {
  * Example: [72, 101, 108] -> "48 65 6C"
  */
 let encodeSpacedUppercase = (bytes: array<int>): result<string, hexError> => {
-  if Array.length(bytes) == 0 {
+  let length = Array.length(bytes)
+  if length == 0 {
     Ok("")
   } else {
-    let parts = ref([])
+    let parts = Array.make(~length, "")
     let valid = ref(true)
 
-    Array.forEach(bytes, byte => {
-      if valid.contents && byte >= 0 && byte <= 255 {
-        let high = Int.Bitwise.lsr(byte, 4)
-        let low = Int.Bitwise.land(byte, 0x0f)
-        let hex = String.charAt(hexCharsUpper, high) ++ String.charAt(hexCharsUpper, low)
-        parts := Array.concat(parts.contents, [hex])
-      } else {
-        valid := false
+    for i in 0 to length - 1 {
+      if valid.contents {
+        let byte = Array.getUnsafe(bytes, i)
+        if byte >= 0 && byte <= 255 {
+          let high = Int.Bitwise.lsr(byte, 4)
+          let low = Int.Bitwise.land(byte, 0x0f)
+          let hex = String.charAt(hexCharsUpper, high) ++ String.charAt(hexCharsUpper, low)
+          Array.setUnsafe(parts, i, hex)
+        } else {
+          valid := false
+        }
       }
-    })
+    }
 
     if valid.contents {
-      Ok(Array.join(parts.contents, " "))
+      Ok(Array.join(parts, " "))
     } else {
       Error(InvalidCharacter)
     }
diff --git a/src/proven/Proven_SafeHex.res.js b/src/proven/Proven_SafeHex.res.js
index de75de0..27c718c 100644
--- a/src/proven/Proven_SafeHex.res.js
+++ b/src/proven/Proven_SafeHex.res.js
@@ -171,15 +171,10 @@ function decodeToString(hexStr) {
       _0: e._0
     };
   }
-  let result = {
-    contents: ""
-  };
-  e._0.forEach(byte => {
-    result.contents = result.contents + String.fromCharCode(byte);
-  });
+  let chars = e._0.map(byte => String.fromCharCode(byte));
   return {
     TAG: "Ok",
-    _0: result.contents
+    _0: chars.join("")
   };
 }
 
@@ -342,32 +337,32 @@ function xorHex(hexA, hexB) {
 }
 
 function encodeSpaced(bytes) {
-  if (bytes.length === 0) {
+  let length = bytes.length;
+  if (length === 0) {
     return {
       TAG: "Ok",
       _0: ""
     };
   }
-  let parts = {
-    contents: []
-  };
-  let valid = {
-    contents: true
-  };
-  bytes.forEach(byte => {
-    if (!(valid.contents && byte >= 0 && byte <= 255)) {
-      valid.contents = false;
-      return;
+  let parts = Core__Array.make(length, "");
+  let valid = true;
+  for (let i = 0; i < length; ++i) {
+    if (valid) {
+      let byte = bytes[i];
+      if (byte >= 0 && byte <= 255) {
+        let high = (byte >>> 4);
+        let low = byte & 15;
+        let hex = hexChars.charAt(high) + hexChars.charAt(low);
+        parts[i] = hex;
+      } else {
+        valid = false;
+      }
     }
-    let high = (byte >>> 4);
-    let low = byte & 15;
-    let hex = hexChars.charAt(high) + hexChars.charAt(low);
-    parts.contents = parts.contents.concat([hex]);
-  });
-  if (valid.contents) {
+  }
+  if (valid) {
     return {
       TAG: "Ok",
-      _0: parts.contents.join(" ")
+      _0: parts.join(" ")
     };
   } else {
     return {
@@ -378,32 +373,32 @@ function encodeSpaced(bytes) {
 }
 
 function encodeSpacedUppercase(bytes) {
-  if (bytes.length === 0) {
+  let length = bytes.length;
+  if (length === 0) {
     return {
       TAG: "Ok",
       _0: ""
     };
   }
-  let parts = {
-    contents: []
-  };
-  let valid = {
-    contents: true
-  };
-  bytes.forEach(byte => {
-    if (!(valid.contents && byte >= 0 && byte <= 255)) {
-      valid.contents = false;
-      return;
+  let parts = Core__Array.make(length, "");
+  let valid = true;
+  for (let i = 0; i < length; ++i) {
+    if (valid) {
+      let byte = bytes[i];
+      if (byte >= 0 && byte <= 255) {
+        let high = (byte >>> 4);
+        let low = byte & 15;
+        let hex = hexCharsUpper.charAt(high) + hexCharsUpper.charAt(low);
+        parts[i] = hex;
+      } else {
+        valid = false;
+      }
     }
-    let high = (byte >>> 4);
-    let low = byte & 15;
-    let hex = hexCharsUpper.charAt(high) + hexCharsUpper.charAt(low);
-    parts.contents = parts.contents.concat([hex]);
-  });
-  if (valid.contents) {
+  }
+  if (valid) {
     return {
       TAG: "Ok",
-      _0: parts.contents.join(" ")
+      _0: parts.join(" ")
     };
   } else {
     return {
diff --git a/src/proven/Proven_SafePath.res b/src/proven/Proven_SafePath.res
index 91ac014..2da9ed6 100644
--- a/src/proven/Proven_SafePath.res
+++ b/src/proven/Proven_SafePath.res
@@ -12,9 +12,24 @@ let hasTraversal = (path: string): bool => {
   String.startsWith(path, "/") && String.includes(path, "..")
 }
 
-/** Check if a path is safe (no traversal attacks) */
+/** Check if a path contains a null byte
+ *
+ * SECURITY: Null bytes can truncate paths in C-based filesystem APIs,
+ * allowing an attacker to bypass extension checks (e.g. "safe.txt\0.sh").
+ */
+let hasNullByte = (path: string): bool => {
+  String.includes(path, "\x00")
+}
+
+/** Check if a path is safe
+ *
+ * A path is safe if it:
+ * - contains no parent directory traversal (..)
+ * - contains no home directory expansion (~)
+ * - contains no null bytes
+ */
 let isSafe = (path: string): bool => {
-  !hasTraversal(path)
+  !hasTraversal(path) && !hasNullByte(path)
 }
 
 /** Sanitize a filename by removing dangerous characters */
diff --git a/src/proven/Proven_SafePath.res.js b/src/proven/Proven_SafePath.res.js
index 7bf2e89..e21559b 100644
--- a/src/proven/Proven_SafePath.res.js
+++ b/src/proven/Proven_SafePath.res.js
@@ -11,8 +11,16 @@ function hasTraversal(path) {
   }
 }
 
+function hasNullByte(path) {
+  return path.includes("\x00");
+}
+
 function isSafe(path) {
-  return !hasTraversal(path);
+  if (hasTraversal(path)) {
+    return false;
+  } else {
+    return !path.includes("\x00");
+  }
 }
 
 function sanitizeFilename(filename) {
@@ -41,6 +49,7 @@ function safeJoin(base, parts) {
 
 export {
   hasTraversal,
+  hasNullByte,
   isSafe,
   sanitizeFilename,
   safeJoin,
diff --git a/src/proven/Proven_SafeString.res b/src/proven/Proven_SafeString.res
index dbac317..2123890 100644
--- a/src/proven/Proven_SafeString.res
+++ b/src/proven/Proven_SafeString.res
@@ -78,7 +78,7 @@ let fromCodePoints = (codes: array<int>): result<string, string> => {
   } else {
     let valid = ref(true)
     let errorIdx = ref(0)
-    let result = ref("")
+    let chars = Array.make(~length, "")
 
     for i in 0 to length - 1 {
       if valid.contents {
@@ -87,13 +87,13 @@ let fromCodePoints = (codes: array<int>): result<string, string> => {
           valid := false
           errorIdx := i
         } else {
-          result := result.contents ++ String.fromCharCode(code)
+          Array.setUnsafe(chars, i, String.fromCharCode(code))
         }
       }
     }
 
     if valid.contents {
-      Ok(result.contents)
+      Ok(Array.join(chars, ""))
     } else {
       Error(`Invalid code point at position ${Int.toString(errorIdx.contents)}`)
     }
diff --git a/src/proven/Proven_SafeString.res.js b/src/proven/Proven_SafeString.res.js
index f4042ed..92e7d12 100644
--- a/src/proven/Proven_SafeString.res.js
+++ b/src/proven/Proven_SafeString.res.js
@@ -59,7 +59,7 @@ function fromCodePoints(codes) {
   }
   let valid = true;
   let errorIdx = 0;
-  let result = "";
+  let chars = Core__Array.make(length, "");
   for (let i = 0; i < length; ++i) {
     if (valid) {
       let code = codes[i];
@@ -67,14 +67,14 @@ function fromCodePoints(codes) {
         valid = false;
         errorIdx = i;
       } else {
-        result = result + String.fromCharCode(code);
+        chars[i] = String.fromCharCode(code);
       }
     }
   }
   if (valid) {
     return {
       TAG: "Ok",
-      _0: result
+      _0: chars.join("")
     };
   } else {
     return {
diff --git a/src/styles/shell.css b/src/styles/shell.css
new file mode 100644
index 0000000..a24afe8
--- /dev/null
+++ b/src/styles/shell.css
@@ -0,0 +1,593 @@
+/* SPDX-License-Identifier: PMPL-1.0-or-later */
+/* DotMatrix-FilePrinter - Shell / layout styles
+ * Extracted from inline <style> in index.html to reduce duplication
+ * and allow Vite HMR to process changes.
+ */
+
+/* Phosphor Green Terminal Theme */
+:root {
+  --bg-primary: #0a0a0a;
+  --bg-secondary: #111;
+  --bg-tertiary: #1a1a1a;
+  --fg-primary: #33ff33;
+  --fg-secondary: #00cc00;
+  --fg-muted: #339933;
+  --fg-dim: #226622;
+  --danger: #ff3333;
+  --warning: #ffcc00;
+  --info: #33ccff;
+  --font-mono: 'IBM Plex Mono', 'Fira Code', 'Consolas', monospace;
+  --border-radius: 4px;
+  --transition-fast: 0.15s ease;
+  --transition-medium: 0.3s ease;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  background: var(--bg-primary);
+  color: var(--fg-primary);
+  font-family: var(--font-mono);
+  font-size: 14px;
+}
+
+/* Main shell layout */
+.shell {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.shell__header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--fg-muted);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
+}
+
+.shell__title {
+  font-size: 1.2rem;
+  font-weight: normal;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.shell__title::before {
+  content: ">";
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+.shell__main {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  padding: 1rem;
+  overflow: auto;
+}
+
+@media (max-width: 900px) {
+  .shell__main {
+    grid-template-columns: 1fr;
+  }
+}
+
+.shell__footer {
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--fg-muted);
+  font-size: 0.85rem;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--bg-secondary);
+}
+
+/* Panels */
+.panel {
+  background: var(--bg-secondary);
+  border: 1px solid var(--fg-muted);
+  border-radius: var(--border-radius);
+  transition: border-color var(--transition-fast);
+}
+
+.panel:focus-within {
+  border-color: var(--fg-primary);
+}
+
+.panel__header {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--fg-muted);
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--bg-tertiary);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+.panel__body {
+  padding: 1rem;
+}
+
+/* Input controls */
+.input {
+  width: 100%;
+  background: var(--bg-primary);
+  color: var(--fg-primary);
+  border: 1px solid var(--fg-muted);
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0.5rem;
+  border-radius: var(--border-radius);
+  transition: all var(--transition-fast);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--fg-primary);
+  box-shadow: 0 0 8px rgba(51, 255, 51, 0.2);
+}
+
+.input--textarea {
+  min-height: 120px;
+  resize: vertical;
+  line-height: 1.5;
+}
+
+.input::placeholder {
+  color: var(--fg-dim);
+}
+
+/* Mode selector tabs */
+.mode-selector {
+  display: flex;
+  gap: 0;
+  margin-bottom: 1rem;
+  border: 1px solid var(--fg-muted);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+}
+
+.mode-selector__btn {
+  flex: 1;
+  background: var(--bg-primary);
+  color: var(--fg-muted);
+  border: none;
+  padding: 0.5rem;
+  font-family: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.mode-selector__btn:not(:last-child) {
+  border-right: 1px solid var(--fg-muted);
+}
+
+.mode-selector__btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--fg-secondary);
+}
+
+.mode-selector__btn--active {
+  background: var(--fg-muted);
+  color: var(--bg-primary);
+}
+
+.mode-selector__btn--active:hover {
+  background: var(--fg-secondary);
+  color: var(--bg-primary);
+}
+
+/* Buttons */
+.btn {
+  background: transparent;
+  color: var(--fg-primary);
+  border: 1px solid var(--fg-primary);
+  padding: 0.5rem 1rem;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  border-radius: var(--border-radius);
+  transition: all var(--transition-fast);
+  position: relative;
+  overflow: hidden;
+}
+
+.btn:hover:not(:disabled) {
+  background: var(--fg-primary);
+  color: var(--bg-primary);
+  transform: translateY(-1px);
+}
+
+.btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn--primary {
+  background: var(--fg-primary);
+  color: var(--bg-primary);
+  font-weight: bold;
+}
+
+.btn--primary:hover:not(:disabled) {
+  background: #44ff44;
+  box-shadow: 0 0 12px rgba(51, 255, 51, 0.4);
+}
+
+.btn--small {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.85rem;
+}
+
+.btn__shortcut {
+  font-size: 0.7rem;
+  opacity: 0.7;
+  margin-left: 0.5rem;
+}
+
+.actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  flex-wrap: wrap;
+}
+
+/* Target path input */
+.target-path {
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.target-path label {
+  white-space: nowrap;
+  color: var(--fg-muted);
+}
+
+.target-path input {
+  flex: 1;
+}
+
+/* Bytes preview */
+.bytes-preview {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  background: var(--bg-primary);
+  border: 1px dashed var(--fg-muted);
+  border-radius: var(--border-radius);
+  font-size: 0.9rem;
+}
+
+.bytes-preview code {
+  color: var(--fg-secondary);
+  word-break: break-all;
+}
+
+.bytes-preview__count {
+  color: var(--fg-muted);
+  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Hex editor view */
+.hex-editor {
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  background: var(--bg-primary);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+}
+
+.hex-editor__header {
+  display: grid;
+  grid-template-columns: 80px 1fr 160px;
+  gap: 1rem;
+  padding: 0.5rem 1rem;
+  background: var(--bg-tertiary);
+  color: var(--fg-muted);
+  border-bottom: 1px solid var(--fg-muted);
+}
+
+.hex-editor__body {
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.hex-editor__row {
+  display: grid;
+  grid-template-columns: 80px 1fr 160px;
+  gap: 1rem;
+  padding: 0.25rem 1rem;
+  border-bottom: 1px solid var(--bg-tertiary);
+  transition: background var(--transition-fast);
+}
+
+.hex-editor__row:hover {
+  background: var(--bg-tertiary);
+}
+
+.hex-editor__address {
+  color: var(--fg-dim);
+}
+
+.hex-editor__bytes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.hex-editor__byte {
+  width: 2ch;
+  text-align: center;
+  transition: all var(--transition-fast);
+}
+
+.hex-editor__byte--contaminated {
+  color: var(--danger);
+  font-weight: bold;
+}
+
+.hex-editor__byte--gap {
+  margin-right: 0.5rem;
+}
+
+.hex-editor__ascii {
+  color: var(--fg-muted);
+  letter-spacing: 0.1em;
+}
+
+.hex-editor__ascii span {
+  display: inline-block;
+  width: 1ch;
+  text-align: center;
+}
+
+.hex-editor__ascii span.non-printable {
+  color: var(--fg-dim);
+}
+
+/* Alerts and status */
+.alert {
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border: 1px solid;
+  border-radius: var(--border-radius);
+  animation: alertIn 0.2s ease;
+}
+
+@keyframes alertIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.alert--danger {
+  border-color: var(--danger);
+  color: var(--danger);
+  background: rgba(255, 51, 51, 0.1);
+}
+
+.alert--success {
+  border-color: var(--fg-primary);
+  color: var(--fg-primary);
+  background: rgba(51, 255, 51, 0.1);
+}
+
+.alert--info {
+  border-color: var(--info);
+  color: var(--info);
+  background: rgba(51, 204, 255, 0.1);
+}
+
+.alert ul {
+  margin: 0.5rem 0 0 1.5rem;
+}
+
+/* Badges */
+.badge {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 2px;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.badge--success {
+  color: var(--fg-primary);
+  border: 1px solid var(--fg-primary);
+  background: rgba(51, 255, 51, 0.1);
+}
+
+.badge--danger {
+  color: var(--danger);
+  border: 1px solid var(--danger);
+  background: rgba(255, 51, 51, 0.1);
+}
+
+/* Status indicators */
+.status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.status__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: pulse 2s ease infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.status--ok { color: var(--fg-primary); }
+.status--ok .status__dot { animation: none; }
+.status--warning { color: var(--warning); }
+.status--error { color: var(--danger); }
+.status--error .status__dot { animation: none; }
+
+#error {
+  display: none;
+  margin: 0 1rem;
+}
+
+#preview-panel,
+#verify-panel {
+  display: none;
+  animation: panelIn 0.3s ease;
+}
+
+@keyframes panelIn {
+  from { opacity: 0; transform: translateX(8px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+/* Help panel */
+.help-panel {
+  position: fixed;
+  right: -400px;
+  top: 0;
+  bottom: 0;
+  width: 400px;
+  max-width: 100vw;
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--fg-muted);
+  z-index: 100;
+  transition: right var(--transition-medium);
+  display: flex;
+  flex-direction: column;
+}
+
+.help-panel--open {
+  right: 0;
+}
+
+.help-panel__header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--fg-muted);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--bg-tertiary);
+}
+
+.help-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.help-panel__section {
+  margin-bottom: 1.5rem;
+}
+
+.help-panel__section h3 {
+  color: var(--fg-primary);
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.help-panel__section p,
+.help-panel__section li {
+  color: var(--fg-muted);
+  font-size: 0.85rem;
+  line-height: 1.6;
+}
+
+.help-panel__section ul {
+  margin-left: 1.5rem;
+}
+
+.help-panel__kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0.25rem 0;
+}
+
+.help-panel__kbd kbd {
+  background: var(--bg-primary);
+  border: 1px solid var(--fg-muted);
+  padding: 0.1rem 0.4rem;
+  border-radius: 3px;
+  font-family: inherit;
+  font-size: 0.8rem;
+}
+
+.help-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  opacity: 0;
+  visibility: hidden;
+  transition: all var(--transition-medium);
+}
+
+.help-overlay--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Keyboard shortcuts hint */
+.shortcuts-hint {
+  color: var(--fg-dim);
+  font-size: 0.8rem;
+}
+
+/* Footer layout */
+.footer-left {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.footer-right {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--fg-dim);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--fg-muted);
+}
diff --git a/tests/bindings_test.ts b/tests/bindings_test.js
similarity index 99%
rename from tests/bindings_test.ts
rename to tests/bindings_test.js
index 5896dc3..39304c8 100644
--- a/tests/bindings_test.ts
+++ b/tests/bindings_test.js
@@ -11,7 +11,7 @@ import {
 import * as Bindings from "../src/Bindings.res.js";
 
 // Helper to check Result type
-function isOk<T>(result: { TAG: string; _0: T }): result is { TAG: "Ok"; _0: T } {
+function isOk(result) {
   return result.TAG === "Ok";
 }
 
diff --git a/tests/proven_safe_hex_test.ts b/tests/proven_safe_hex_test.js
similarity index 97%
rename from tests/proven_safe_hex_test.ts
rename to tests/proven_safe_hex_test.js
index cd53a38..1531833 100644
--- a/tests/proven_safe_hex_test.ts
+++ b/tests/proven_safe_hex_test.js
@@ -9,15 +9,11 @@ import {
 // Import the compiled ReScript module
 import * as SafeHex from "../src/proven/Proven_SafeHex.res.js";
 
-// Helper to check Result type - uses unknown to handle varying payload types
-function isOk<T>(result: { TAG: string; _0: unknown }): result is { TAG: "Ok"; _0: T } {
+// Helper to check Result type
+function isOk(result) {
   return result.TAG === "Ok";
 }
 
-function isError<E>(result: { TAG: string; _0: unknown }): result is { TAG: "Error"; _0: E } {
-  return result.TAG === "Error";
-}
-
 // ============ encode tests ============
 
 Deno.test("SafeHex.encode - basic encoding", () => {
diff --git a/tests/proven_safe_math_test.ts b/tests/proven_safe_math_test.js
similarity index 100%
rename from tests/proven_safe_math_test.ts
rename to tests/proven_safe_math_test.js
diff --git a/tests/proven_safe_path_test.ts b/tests/proven_safe_path_test.js
similarity index 97%
rename from tests/proven_safe_path_test.ts
rename to tests/proven_safe_path_test.js
index 0ebaca2..aa0d676 100644
--- a/tests/proven_safe_path_test.ts
+++ b/tests/proven_safe_path_test.js
@@ -57,6 +57,11 @@ Deno.test("SafePath.isSafe - empty path is safe", () => {
   assertEquals(SafePath.isSafe(""), true);
 });
 
+Deno.test("SafePath.isSafe - null bytes are unsafe", () => {
+  assertEquals(SafePath.isSafe("foo\x00bar"), false);
+  assertEquals(SafePath.isSafe("\x00"), false);
+});
+
 // ============ sanitizeFilename tests ============
 
 Deno.test("SafePath.sanitizeFilename - removes traversal sequences", () => {
diff --git a/tests/proven_safe_string_test.ts b/tests/proven_safe_string_test.js
similarity index 98%
rename from tests/proven_safe_string_test.ts
rename to tests/proven_safe_string_test.js
index 15d436a..b2f208c 100644
--- a/tests/proven_safe_string_test.ts
+++ b/tests/proven_safe_string_test.js
@@ -10,7 +10,7 @@ import {
 import * as SafeString from "../src/proven/Proven_SafeString.res.js";
 
 // Helper to check Result type
-function isOk<T>(result: { TAG: string; _0: T }): result is { TAG: "Ok"; _0: T } {
+function isOk(result) {
   return result.TAG === "Ok";
 }
 
diff --git a/vite.config.js b/vite.config.js
index 57f407a..16d5fa6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,14 +7,14 @@ export default defineConfig({
     port: 5173,
     strictPort: true,
     watch: {
-      ignored: ['**/src-tauri/**', '**/kernel/**'],
+      ignored: ['**/target/**', '**/kernel/**'],
     },
   },
-  envPrefix: ['VITE_', 'TAURI_'],
+  envPrefix: ['VITE_', 'GOSSAMER_'],
   build: {
     target: 'esnext',
-    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
-    sourcemap: !!process.env.TAURI_DEBUG,
+    minify: !process.env.GOSSAMER_DEBUG ? 'esbuild' : false,
+    sourcemap: !!process.env.GOSSAMER_DEBUG,
     outDir: 'dist',
     emptyOutDir: true,
   },