@bloopjs/web 0.0.102 → 0.0.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloopjs/web",
-  "version": "0.0.102",
+  "version": "0.0.103",
   "author": "Neil Sarkar",
   "type": "module",
   "repository": {
@@ -37,8 +37,8 @@
     "typescript": "^5"
   },
   "dependencies": {
-    "@bloopjs/bloop": "0.0.102",
-    "@bloopjs/engine": "0.0.102",
+    "@bloopjs/bloop": "0.0.103",
+    "@bloopjs/engine": "0.0.103",
     "@preact/signals": "^1.3.1",
     "partysocket": "^1.1.6",
     "preact": "^10.25.4"

package/src/debugui/components/BottomBar.tsx

@@ -6,6 +6,11 @@ import { LoadTapeDialog } from "./LoadTapeDialog.tsx";
 const iconProps = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor" };
 
 const Icons = {
+  record: (
+    <svg {...iconProps}>
+      <circle cx="12" cy="12" r="8" />
+    </svg>
+  ),
   jumpBack: (
     <svg {...iconProps}>
       <path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" />
@@ -171,15 +176,32 @@ export function BottomBar() {
     debugState.onSaveTape.value?.();
   }, []);
 
+  const handleToggleRecording = useCallback(() => {
+    debugState.onToggleRecording.value?.();
+  }, []);
+
+  const stopPropagation = useCallback((e: { stopPropagation: () => void }) => {
+    e.stopPropagation();
+  }, []);
+
   return (
-    <div className="bottom-bar">
+    <div
+      className="bottom-bar"
+      onMouseDown={stopPropagation}
+      onMouseUp={stopPropagation}
+      onClick={stopPropagation}
+    >
       <div className="playbar-controls">
-        {isRecording && (
-          <span className="recording-indicator" title="Recording">
-            <span className="recording-dot" />
-            <span className="recording-label">REC</span>
+        <button
+          className={`playbar-btn record-btn ${isRecording ? "recording" : ""}`}
+          onClick={handleToggleRecording}
+        >
+          {Icons.record}
+          {isRecording && <span className="btn-label">REC</span>}
+          <span className="tooltip tooltip-left">
+            {isRecording ? "Stop recording" : "Start recording"}
           </span>
-        )}
+        </button>
         {isReplaying && (
           <span className="replay-indicator" title="Replaying tape">
             REPLAY

package/src/debugui/components/LoadTapeDialog.tsx

@@ -7,7 +7,6 @@ export function LoadTapeDialog() {
   const [isDragOver, setIsDragOver] = useState(false);
 
   const isOpen = debugState.isLoadDialogOpen.value;
-  const lastTapeName = debugState.lastTapeName.value;
 
   // Sync dialog open/close with signal
   useEffect(() => {
@@ -77,36 +76,63 @@ export function LoadTapeDialog() {
     debugState.onReplayLastTape.value?.();
   }, []);
 
+  const handleReplayLastSaved = useCallback(() => {
+    debugState.onReplayLastSaved.value?.();
+  }, []);
+
+  // Close dialog when clicking on backdrop
+  const handleDialogClick = useCallback(
+    (e: { target: EventTarget | null; currentTarget: EventTarget | null }) => {
+      // If click target is the dialog itself (backdrop), close it
+      if (e.target === e.currentTarget) {
+        debugState.isLoadDialogOpen.value = false;
+      }
+    },
+    [],
+  );
+
   return (
-    <dialog ref={dialogRef} className="load-tape-dialog" onClose={handleClose}>
-      <div className="load-tape-dialog-content">
-        <h3>Load Tape</h3>
-        <div
-          className={`drop-zone ${isDragOver ? "drag-over" : ""}`}
-          onClick={handleDropZoneClick}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onDrop={handleDrop}
-        >
-          <span className="drop-zone-text">
-            Drop .bloop file here
-            <br />
-            or click to browse
-          </span>
+    <dialog
+      ref={dialogRef}
+      className="load-tape-dialog"
+      onClose={handleClose}
+      onClick={handleDialogClick}
+    >
+      {isOpen && (
+        <div className="load-tape-dialog-content">
+          <h3>Load Tape</h3>
+          <div
+            className={`drop-zone ${isDragOver ? "drag-over" : ""}`}
+            onClick={handleDropZoneClick}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          >
+            <span className="drop-zone-text">
+              Drop .bloop file here
+              <br />
+              or click to browse
+            </span>
+          </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".bloop"
+            className="hidden-file-input"
+            onChange={handleFileInputChange}
+          />
+          {debugState.lastSavedTapeName.value && (
+            <button className="replay-last-btn" onClick={handleReplayLastSaved}>
+              Replay last saved tape
+            </button>
+          )}
+          {debugState.lastTapeName.value && (
+            <button className="replay-last-btn" onClick={handleReplayLast}>
+              Replay last loaded: {debugState.lastTapeName.value}
+            </button>
+          )}
         </div>
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept=".bloop"
-          className="hidden-file-input"
-          onChange={handleFileInputChange}
-        />
-        {lastTapeName && (
-          <button className="replay-last-btn" onClick={handleReplayLast}>
-            Replay last: {lastTapeName}
-          </button>
-        )}
-      </div>
+      )}
     </dialog>
   );
 }

package/src/debugui/components/Root.tsx

@@ -61,10 +61,10 @@ function LetterboxedLayout({ canvas }: { canvas: HTMLCanvasElement }) {
   const snapshotSize = debugState.snapshotSize.value;
   const hmrFlash = debugState.hmrFlash.value;
 
-  // Left bar: frame advantage (online) or frame time % (offline)
+  // Left bar: frame advantage (online) or frame time (offline)
   const leftValue = isOnline ? Math.abs(advantage) : frameTime;
   const leftMax = isOnline ? 10 : 16.67; // 10 frames advantage or 16.67ms budget
-  const leftLabel = isOnline ? "ADV" : "MS";
+  const leftLabel = isOnline ? "adv" : "time";
   const leftColor = isOnline
     ? advantage >= 0
       ? "#4a9eff"
@@ -72,12 +72,20 @@ function LetterboxedLayout({ canvas }: { canvas: HTMLCanvasElement }) {
     : frameTime > 16.67
       ? "#ff4a4a"
       : "#4aff4a";
+  const leftDisplayValue = isOnline
+    ? `${advantage >= 0 ? "+" : ""}${advantage} frames`
+    : `${frameTime.toFixed(1)}ms`;
 
   // Right bar: rollback depth (online) or snapshot size (offline)
   // For now, we don't have rollback depth exposed, so use a placeholder
   const rightValue = isOnline ? 0 : snapshotSize;
-  const rightMax = isOnline ? 10 : 10000; // 10k frames rollback or 10KB
-  const rightLabel = isOnline ? "RB" : "KB";
+  const rightMax = isOnline ? 10 : 10000; // 10 frames rollback or 10KB
+  const rightLabel = isOnline ? "rb" : "size";
+  const rightDisplayValue = isOnline
+    ? "0 frames"
+    : snapshotSize >= 1000
+      ? `${(snapshotSize / 1000).toFixed(1)}kb`
+      : `${snapshotSize}b`;
 
   const gameClassName = hmrFlash ? "letterboxed-game hmr-flash" : "letterboxed-game";
 
@@ -89,6 +97,7 @@ function LetterboxedLayout({ canvas }: { canvas: HTMLCanvasElement }) {
         max={leftMax}
         side="left"
         color={leftColor}
+        displayValue={leftDisplayValue}
       />
       <div className={gameClassName}>
         <GameCanvas canvas={canvas} />
@@ -97,6 +106,7 @@ function LetterboxedLayout({ canvas }: { canvas: HTMLCanvasElement }) {
         value={rightValue}
         max={rightMax}
         side="right"
+        displayValue={rightDisplayValue}
       />
       <BottomBar />
     </main>

package/src/debugui/components/TopBar.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from "preact/hooks";
 import { debugState } from "../state.ts";
 
 type TopBarProps = {
@@ -11,8 +12,17 @@ export function TopBar({ leftLabel, rightLabel }: TopBarProps) {
   const rtt = debugState.netStatus.value.rtt;
   const isOnline = debugState.netStatus.value.peers.length > 0;
 
+  const stopPropagation = useCallback((e: { stopPropagation: () => void }) => {
+    e.stopPropagation();
+  }, []);
+
   return (
-    <div className="top-bar">
+    <div
+      className="top-bar"
+      onMouseDown={stopPropagation}
+      onMouseUp={stopPropagation}
+      onClick={stopPropagation}
+    >
       <span className="top-bar-side-label">{leftLabel}</span>
       <div className="top-bar-center">
         <div className="top-bar-item">

package/src/debugui/components/VerticalBar.tsx

@@ -1,8 +1,11 @@
+import { useCallback } from "preact/hooks";
+
 type VerticalBarProps = {
   value: number;
   max: number;
   side: "left" | "right";
   color?: string;
+  displayValue?: string;
 };
 
 export function VerticalBar({
@@ -10,16 +13,29 @@ export function VerticalBar({
   max,
   side,
   color = "#4a9eff",
+  displayValue,
 }: VerticalBarProps) {
   const percentage = max > 0 ? Math.min(100, (value / max) * 100) : 0;
 
+  const stopPropagation = useCallback((e: { stopPropagation: () => void }) => {
+    e.stopPropagation();
+  }, []);
+
   return (
-    <div className={`${side}-bar`}>
+    <div
+      className={`${side}-bar`}
+      onMouseDown={stopPropagation}
+      onMouseUp={stopPropagation}
+      onClick={stopPropagation}
+    >
       <div className="vertical-bar">
         <div
           className="vertical-bar-fill"
           style={{ height: `${percentage}%`, background: color }}
         />
+        {displayValue && (
+          <span className={`vertical-bar-popover ${side}`}>{displayValue}</span>
+        )}
       </div>
     </div>
   );

package/src/debugui/state.ts

@@ -58,9 +58,13 @@ export type DebugState = {
   // Tape loading/saving
   onLoadTape: Signal<((bytes: Uint8Array, fileName: string) => void) | null>;
   onReplayLastTape: Signal<(() => void) | null>;
+  onReplayLastSaved: Signal<(() => void) | null>;
   onSaveTape: Signal<(() => void) | null>;
   lastTapeName: Signal<string | null>;
+  lastSavedTapeName: Signal<string | null>;
   isLoadDialogOpen: Signal<boolean>;
+  // Recording toggle
+  onToggleRecording: Signal<(() => void) | null>;
 };
 
 const layoutMode = signal<LayoutMode>("off");
@@ -97,10 +101,15 @@ const onSeek = signal<((position: number) => void) | null>(null);
 // Tape loading/saving
 const onLoadTape = signal<((bytes: Uint8Array, fileName: string) => void) | null>(null);
 const onReplayLastTape = signal<(() => void) | null>(null);
+const onReplayLastSaved = signal<(() => void) | null>(null);
 const onSaveTape = signal<(() => void) | null>(null);
 const lastTapeName = signal<string | null>(null);
+const lastSavedTapeName = signal<string | null>(null);
 const isLoadDialogOpen = signal(false);
 
+// Recording toggle
+const onToggleRecording = signal<(() => void) | null>(null);
+
 export const debugState: DebugState = {
   /** Layout mode: off, letterboxed, or full */
   layoutMode,
@@ -152,9 +161,14 @@ export const debugState: DebugState = {
   /** Tape loading/saving */
   onLoadTape,
   onReplayLastTape,
+  onReplayLastSaved,
   onSaveTape,
   lastTapeName,
+  lastSavedTapeName,
   isLoadDialogOpen,
+
+  /** Recording toggle */
+  onToggleRecording,
 };
 
 /** Cycle through layout modes: off -> letterboxed -> full -> off */
@@ -314,12 +328,20 @@ export function wirePlaybarHandlers(app: App): void {
   };
   debugState.onSeek.value = (ratio: number) => {
     if (app.sim.hasHistory) {
+      app.sim.pause();
       const startFrame = debugState.tapeStartFrame.value;
       const frameCount = debugState.tapeFrameCount.value;
       const targetFrame = startFrame + Math.floor(ratio * frameCount);
       app.sim.seek(targetFrame);
     }
   };
+  debugState.onToggleRecording.value = () => {
+    if (app.sim.isRecording) {
+      app.sim.stopRecording();
+    } else {
+      app.sim.record();
+    }
+  };
 }
 
 /** Set up drag-and-drop tape loading on a canvas element */
@@ -342,7 +364,8 @@ export function wireTapeDragDrop(canvas: HTMLCanvasElement, app: App): void {
 // IndexedDB helpers for tape persistence
 const TAPE_DB_NAME = "bloop-debug";
 const TAPE_STORE_NAME = "tapes";
-const TAPE_KEY = "last";
+const TAPE_KEY_LOADED = "last-loaded";
+const TAPE_KEY_SAVED = "last-saved";
 
 function openTapeDB(): Promise<IDBDatabase> {
   return new Promise((resolve, reject) => {
@@ -358,17 +381,18 @@ function openTapeDB(): Promise<IDBDatabase> {
 async function saveTapeToStorage(
   bytes: Uint8Array,
   fileName: string,
+  key: string = TAPE_KEY_LOADED,
 ): Promise<void> {
   const db = await openTapeDB();
   return new Promise((resolve, reject) => {
     const tx = db.transaction(TAPE_STORE_NAME, "readwrite");
-    tx.objectStore(TAPE_STORE_NAME).put({ bytes, fileName }, TAPE_KEY);
+    tx.objectStore(TAPE_STORE_NAME).put({ bytes, fileName }, key);
     tx.oncomplete = () => resolve();
     tx.onerror = () => reject(tx.error);
   });
 }
 
-async function loadTapeFromStorage(): Promise<{
+async function loadTapeFromStorage(key: string = TAPE_KEY_LOADED): Promise<{
   bytes: Uint8Array;
   fileName: string;
 } | null> {
@@ -376,7 +400,7 @@ async function loadTapeFromStorage(): Promise<{
     const db = await openTapeDB();
     return new Promise((resolve, reject) => {
       const tx = db.transaction(TAPE_STORE_NAME, "readonly");
-      const request = tx.objectStore(TAPE_STORE_NAME).get(TAPE_KEY);
+      const request = tx.objectStore(TAPE_STORE_NAME).get(key);
       request.onsuccess = () => resolve(request.result ?? null);
       request.onerror = () => reject(request.error);
     });
@@ -385,37 +409,54 @@ async function loadTapeFromStorage(): Promise<{
   }
 }
 
-/** Check for saved tape and update lastTapeName signal */
+/** Check for saved tapes and update signals */
 export async function checkForSavedTape(): Promise<void> {
-  const saved = await loadTapeFromStorage();
-  debugState.lastTapeName.value = saved?.fileName ?? null;
+  const [loaded, saved] = await Promise.all([
+    loadTapeFromStorage(TAPE_KEY_LOADED),
+    loadTapeFromStorage(TAPE_KEY_SAVED),
+  ]);
+  debugState.lastTapeName.value = loaded?.fileName ?? null;
+  debugState.lastSavedTapeName.value = saved?.fileName ?? null;
 }
 
 /** Wire up tape loading handlers */
 export function wireTapeLoadHandlers(app: App): void {
   debugState.onLoadTape.value = async (bytes: Uint8Array, fileName: string) => {
     app.loadTape(bytes);
-    await saveTapeToStorage(bytes, fileName);
+    await saveTapeToStorage(bytes, fileName, TAPE_KEY_LOADED);
     debugState.lastTapeName.value = fileName;
     debugState.isLoadDialogOpen.value = false;
   };
 
   debugState.onReplayLastTape.value = async () => {
-    const saved = await loadTapeFromStorage();
+    const saved = await loadTapeFromStorage(TAPE_KEY_LOADED);
+    if (saved) {
+      app.loadTape(saved.bytes);
+      debugState.isLoadDialogOpen.value = false;
+    }
+  };
+
+  debugState.onReplayLastSaved.value = async () => {
+    const saved = await loadTapeFromStorage(TAPE_KEY_SAVED);
     if (saved) {
       app.loadTape(saved.bytes);
       debugState.isLoadDialogOpen.value = false;
     }
   };
 
-  debugState.onSaveTape.value = () => {
+  debugState.onSaveTape.value = async () => {
     if (!app.sim.hasHistory) return;
     const tape = app.sim.saveTape();
+    const fileName = `tape-${Date.now()}.bloop`;
+    // Persist to IndexedDB for later replay
+    await saveTapeToStorage(tape, fileName, TAPE_KEY_SAVED);
+    debugState.lastSavedTapeName.value = fileName;
+    // Download
     const blob = new Blob([tape], { type: "application/octet-stream" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = `tape-${Date.now()}.bloop`;
+    a.download = fileName;
     a.click();
     URL.revokeObjectURL(url);
   };

package/src/debugui/styles.ts

@@ -160,6 +160,7 @@ export const styles = /*css*/ `
   font-family: monospace;
   font-size: 12px;
   padding: 0;
+  user-select: none;
 }
 
 .top-bar-side-label {
@@ -213,6 +214,7 @@ export const styles = /*css*/ `
   justify-content: flex-end;
   background: #111;
   padding: 4px 0;
+  user-select: none;
 }
 
 .right-bar {
@@ -223,6 +225,7 @@ export const styles = /*css*/ `
   justify-content: flex-end;
   background: #111;
   padding: 4px 0;
+  user-select: none;
 }
 
 .vertical-bar {
@@ -231,7 +234,6 @@ export const styles = /*css*/ `
   background: #333;
   border-radius: 2px;
   position: relative;
-  overflow: hidden;
 }
 
 .vertical-bar-fill {
@@ -244,6 +246,37 @@ export const styles = /*css*/ `
   transition: height 0.1s ease-out;
 }
 
+.vertical-bar-popover {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #222;
+  color: #ccc;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-family: monospace;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.vertical-bar-popover.left {
+  left: calc(100% + 8px);
+}
+
+.vertical-bar-popover.right {
+  right: calc(100% + 8px);
+}
+
+.vertical-bar:hover .vertical-bar-popover {
+  opacity: 1;
+  visibility: visible;
+}
+
 
 .bottom-bar {
   grid-area: bottom-bar;
@@ -253,6 +286,7 @@ export const styles = /*css*/ `
   /* Mobile-first: more padding */
   padding: 0 16px;
   gap: 12px;
+  user-select: none;
 }
 
 /* Desktop: tighter padding */
@@ -270,22 +304,16 @@ export const styles = /*css*/ `
   flex-shrink: 0;
 }
 
-/* Recording indicator - mobile: just the dot */
-.recording-indicator {
-  display: flex;
-  align-items: center;
-  margin-right: 4px;
+/* Record button */
+.record-btn {
+  color: #666;
 }
 
-.recording-indicator .recording-label {
-  display: none;
+.record-btn.recording {
+  color: #ff4444;
 }
 
-.recording-dot {
-  width: 10px;
-  height: 10px;
-  background: #ff4444;
-  border-radius: 50%;
+.record-btn.recording svg {
   animation: recording-pulse 1s ease-in-out infinite;
 }
 
@@ -294,6 +322,17 @@ export const styles = /*css*/ `
   50% { opacity: 0.4; }
 }
 
+/* Desktop: show REC label when recording */
+@media (min-width: 769px) {
+  .record-btn.recording {
+    width: auto;
+    padding: 0 6px;
+    gap: 4px;
+    background: rgba(255, 68, 68, 0.15);
+    border-radius: 3px;
+  }
+}
+
 /* Replay indicator - mobile: hidden */
 .replay-indicator {
   display: none;
@@ -455,6 +494,7 @@ export const styles = /*css*/ `
   position: relative;
   cursor: pointer;
   overflow: hidden;
+  user-select: none;
 }
 
 /* Desktop: smaller seek bar */