Ship current workspace changes

Co-Authored-By: Claude Opus 4.6 (1M context) <[e-mail]>

kidlisp-wasm/compiler.mjs

···
+// KidLisp → WASM Compiler
+// Compiles KidLisp source directly to WebAssembly binary.
+
+// ─── WASM Binary Encoding ───────────────────────────────────────────
+
+function uleb128(value) {
+  const bytes = [];
+  do {
+    let byte = value & 0x7f;
+    value >>>= 7;
+    if (value !== 0) byte |= 0x80;
+    bytes.push(byte);
+  } while (value !== 0);
+  return bytes;
+}
+
+function sleb128(value) {
+  const bytes = [];
+  let more = true;
+  while (more) {
+    let byte = value & 0x7f;
+    value >>= 7;
+    if (
+      (value === 0 && (byte & 0x40) === 0) ||
+      (value === -1 && (byte & 0x40) !== 0)
+    ) {
+      more = false;
+    } else {
+      byte |= 0x80;
+    }
+    bytes.push(byte);
+  }
+  return bytes;
+}
+
+function f32Bytes(value) {
+  const buf = new ArrayBuffer(4);
+  new Float32Array(buf)[0] = value;
+  return [...new Uint8Array(buf)];
+}
+
+function encodeString(str) {
+  const bytes = new TextEncoder().encode(str);
+  return [...uleb128(bytes.length), ...bytes];
+}
+
+function section(id, contents) {
+  return [id, ...uleb128(contents.length), ...contents];
+}
+
+function vec(items) {
+  return [...uleb128(items.length), ...items.flat()];
+}
+
+// ─── Color Map ──────────────────────────────────────────────────────
+
+const COLORS = {
+  red: [255, 0, 0],
+  green: [0, 128, 0],
+  blue: [0, 0, 255],
+  white: [255, 255, 255],
+  black: [0, 0, 0],
+  yellow: [255, 255, 0],
+  cyan: [0, 255, 255],
+  magenta: [255, 0, 255],
+  orange: [255, 165, 0],
+  purple: [128, 0, 128],
+  pink: [255, 192, 203],
+  gray: [128, 128, 128],
+  grey: [128, 128, 128],
+  lime: [0, 255, 0],
+};
+
+// ─── Parser ─────────────────────────────────────────────────────────
+
+function tokenize(source) {
+  const tokens = [];
+  let i = 0;
+  while (i < source.length) {
+    const ch = source[i];
+    if (ch === "(") {
+      tokens.push({ type: "lparen" });
+      i++;
+    } else if (ch === ")") {
+      tokens.push({ type: "rparen" });
+      i++;
+    } else if (ch === "\n") {
+      tokens.push({ type: "newline" });
+      i++;
+    } else if (/\s/.test(ch)) {
+      i++;
+    } else if (ch === ";") {
+      while (i < source.length && source[i] !== "\n") i++;
+    } else {
+      let start = i;
+      while (i < source.length && !/[\s()]/.test(source[i])) i++;
+      const atom = source.slice(start, i);
+      const num = Number(atom);
+      if (!isNaN(num) && atom !== "") {
+        tokens.push({ type: "number", value: num });
+      } else {
+        tokens.push({ type: "symbol", value: atom });
+      }
+    }
+  }
+  return tokens;
+}
+
+function parse(tokens) {
+  const lines = [];
+  let currentLine = [];
+  let pos = 0;
+
+  function parseExpr() {
+    if (pos >= tokens.length) return null;
+    const tok = tokens[pos];
+    if (tok.type === "lparen") {
+      pos++;
+      const items = [];
+      while (pos < tokens.length && tokens[pos].type !== "rparen") {
+        if (tokens[pos].type === "newline") {
+          pos++;
+          continue;
+        }
+        const expr = parseExpr();
+        if (expr) items.push(expr);
+      }
+      if (pos < tokens.length) pos++; // skip )
+      return { type: "list", items };
+    } else if (tok.type === "number") {
+      pos++;
+      return { type: "number", value: tok.value };
+    } else if (tok.type === "symbol") {
+      pos++;
+      return { type: "symbol", value: tok.value };
+    }
+    return null;
+  }
+
+  while (pos < tokens.length) {
+    if (tokens[pos].type === "newline") {
+      if (currentLine.length > 0) {
+        lines.push(currentLine);
+        currentLine = [];
+      }
+      pos++;
+      continue;
+    }
+    const expr = parseExpr();
+    if (expr) currentLine.push(expr);
+  }
+  if (currentLine.length > 0) lines.push(currentLine);
+
+  // Wrap bare lines as function calls:
+  // `ink 255 0 0` → `(ink 255 0 0)`
+  const result = [];
+  for (const line of lines) {
+    if (line.length === 1) {
+      result.push(line[0]);
+    } else if (line.length > 1 && line[0].type === "symbol") {
+      result.push({ type: "list", items: line });
+    } else {
+      for (const expr of line) result.push(expr);
+    }
+  }
+  return result;
+}
+
+// ─── WASM Opcodes ───────────────────────────────────────────────────
+
+const OP = {
+  LOCAL_GET: 0x20,
+  LOCAL_SET: 0x21,
+  GLOBAL_GET: 0x23,
+  GLOBAL_SET: 0x24,
+  CALL: 0x10,
+  F32_CONST: 0x43,
+  F32_ADD: 0x92,
+  F32_SUB: 0x93,
+  F32_MUL: 0x94,
+  F32_DIV: 0x95,
+  F32_SQRT: 0x91,
+  F32_ABS: 0x8b,
+  F32_NEG: 0x8c,
+  F32_FLOOR: 0x8e,
+  F32_CEIL: 0x8d,
+  I32_CONST: 0x41,
+  I32_ADD: 0x6a,
+  DROP: 0x1a,
+  END: 0x0b,
+};
+
+const F32 = 0x7d;
+
+// ─── Compiler ───────────────────────────────────────────────────────
+
+export class Compiler {
+  constructor() {
+    this.types = [];
+    this.typeMap = new Map();
+    this.imports = [];
+    this.importCount = 0;
+    this.code = [];
+    this.setupImports();
+  }
+
+  addType(params, results) {
+    const key = `${params.join(",")}->${results.join(",")}`;
+    if (this.typeMap.has(key)) return this.typeMap.get(key);
+    const idx = this.types.length;
+    this.types.push({ params, results });
+    this.typeMap.set(key, idx);
+    return idx;
+  }
+
+  addImport(module, name, paramCount, hasReturn = false) {
+    const params = Array(paramCount).fill(F32);
+    const results = hasReturn ? [F32] : [];
+    const typeIdx = this.addType(params, results);
+    const funcIdx = this.importCount++;
+    this.imports.push({ module, name, typeIdx });
+    return funcIdx;
+  }
+
+  setupImports() {
+    this.funcs = {};
+    // Drawing primitives — all f32 params
+    this.funcs.wipe = this.addImport("env", "wipe", 3);
+    this.funcs.ink = this.addImport("env", "ink", 3);
+    this.funcs.line = this.addImport("env", "line", 4);
+    this.funcs.box = this.addImport("env", "box", 4);
+    this.funcs.circle = this.addImport("env", "circle", 3);
+    this.funcs.plot = this.addImport("env", "plot", 2);
+    this.funcs.tri = this.addImport("env", "tri", 6);
+
+    // paint(w, h, frame) → ()
+    this.paintTypeIdx = this.addType([F32, F32, F32], []);
+  }
+
+  // Emit bytecode that pushes a value onto the WASM stack.
+  compileExpr(expr) {
+    if (expr.type === "number") {
+      this.code.push(OP.F32_CONST, ...f32Bytes(expr.value));
+    } else if (expr.type === "symbol") {
+      this.compileSymbol(expr.value);
+    } else if (expr.type === "list") {
+      this.compileCall(expr);
+    }
+  }
+
+  compileSymbol(name) {
+    // paint params: 0=w, 1=h, 2=frame
+    if (name === "w") {
+      this.code.push(OP.LOCAL_GET, ...uleb128(0));
+      return;
+    }
+    if (name === "h") {
+      this.code.push(OP.LOCAL_GET, ...uleb128(1));
+      return;
+    }
+    if (name === "frame" || name === "f") {
+      this.code.push(OP.LOCAL_GET, ...uleb128(2));
+      return;
+    }
+
+    // Division shorthand: w/2, h/3, etc.
+    const divMatch = name.match(/^(\w+)\/(\d+(?:\.\d+)?)$/);
+    if (divMatch) {
+      this.compileSymbol(divMatch[1]);
+      this.code.push(OP.F32_CONST, ...f32Bytes(parseFloat(divMatch[2])));
+      this.code.push(OP.F32_DIV);
+      return;
+    }
+
+    // Color names → push 3 f32 values (r, g, b)
+    if (COLORS[name]) {
+      const [r, g, b] = COLORS[name];
+      this.code.push(OP.F32_CONST, ...f32Bytes(r));
+      this.code.push(OP.F32_CONST, ...f32Bytes(g));
+      this.code.push(OP.F32_CONST, ...f32Bytes(b));
+      return;
+    }
+
+    throw new Error(`Unknown symbol: ${name}`);
+  }
+
+  compileCall(expr) {
+    if (expr.items.length === 0) return;
+    const head = expr.items[0];
+    if (head.type !== "symbol") {
+      throw new Error(`Expected function name, got ${JSON.stringify(head)}`);
+    }
+
+    const name = head.value;
+    const args = expr.items.slice(1);
+
+    // Arithmetic
+    const arithOp = { "+": OP.F32_ADD, "-": OP.F32_SUB, "*": OP.F32_MUL, "/": OP.F32_DIV };
+    if (arithOp[name]) {
+      this.compileExpr(args[0]);
+      this.compileExpr(args[1]);
+      this.code.push(arithOp[name]);
+      return;
+    }
+
+    // Math builtins
+    if (name === "sqrt") {
+      this.compileExpr(args[0]);
+      this.code.push(OP.F32_SQRT);
+      return;
+    }
+    if (name === "abs") {
+      this.compileExpr(args[0]);
+      this.code.push(OP.F32_ABS);
+      return;
+    }
+    if (name === "neg") {
+      this.compileExpr(args[0]);
+      this.code.push(OP.F32_NEG);
+      return;
+    }
+    if (name === "floor") {
+      this.compileExpr(args[0]);
+      this.code.push(OP.F32_FLOOR);
+      return;
+    }
+
+    // Drawing functions
+    if (this.funcs[name] !== undefined) {
+      for (const arg of args) this.compileExpr(arg);
+      this.code.push(OP.CALL, ...uleb128(this.funcs[name]));
+      return;
+    }
+
+    throw new Error(`Unknown function: ${name}`);
+  }
+
+  compile(source) {
+    const tokens = tokenize(source);
+    const ast = parse(tokens);
+
+    for (const expr of ast) {
+      if (expr.type === "list") {
+        this.compileCall(expr);
+      } else if (expr.type === "symbol" && COLORS[expr.value]) {
+        // Bare color name on a line → wipe with that color
+        const [r, g, b] = COLORS[expr.value];
+        this.code.push(OP.F32_CONST, ...f32Bytes(r));
+        this.code.push(OP.F32_CONST, ...f32Bytes(g));
+        this.code.push(OP.F32_CONST, ...f32Bytes(b));
+        this.code.push(OP.CALL, ...uleb128(this.funcs.wipe));
+      }
+    }
+
+    return this.emit();
+  }
+
+  emit() {
+    const bytes = [];
+
+    // Magic + version
+    bytes.push(0x00, 0x61, 0x73, 0x6d); // \0asm
+    bytes.push(0x01, 0x00, 0x00, 0x00); // version 1
+
+    // ── Type section (1) ──
+    const typeEntries = this.types.map((t) => [
+      0x60,
+      ...uleb128(t.params.length),
+      ...t.params,
+      ...uleb128(t.results.length),
+      ...t.results,
+    ]);
+    bytes.push(...section(1, vec(typeEntries)));
+
+    // ── Import section (2) ──
+    const importEntries = this.imports.map((imp) => [
+      ...encodeString(imp.module),
+      ...encodeString(imp.name),
+      0x00, // func
+      ...uleb128(imp.typeIdx),
+    ]);
+    bytes.push(...section(2, vec(importEntries)));
+
+    // ── Function section (3) — declare paint ──
+    bytes.push(...section(3, vec([[...uleb128(this.paintTypeIdx)]])));
+
+    // ── Export section (7) ──
+    const paintIdx = this.importCount; // first non-import func
+    const exportEntries = [
+      [...encodeString("paint"), 0x00, ...uleb128(paintIdx)],
+    ];
+    bytes.push(...section(7, vec(exportEntries)));
+
+    // ── Code section (10) ──
+    const body = [
+      0x00, // 0 local declarations
+      ...this.code,
+      OP.END,
+    ];
+    const codeEntry = [...uleb128(body.length), ...body];
+    bytes.push(...section(10, vec([codeEntry])));
+
+    return new Uint8Array(bytes);
+  }
+}
+
+// ─── CLI ────────────────────────────────────────────────────────────
+
+import { readFileSync, writeFileSync } from "fs";
+import { fileURLToPath } from "url";
+
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+  const input = process.argv[2];
+  if (!input) {
+    console.error("Usage: node compiler.mjs <input.lisp> [output.wasm]");
+    process.exit(1);
+  }
+  const output = process.argv[3] || input.replace(/\.lisp$/, ".wasm");
+  const source = readFileSync(input, "utf-8");
+  const compiler = new Compiler();
+  const wasm = compiler.compile(source);
+  writeFileSync(output, wasm);
+  console.log(`Compiled ${input} → ${output} (${wasm.length} bytes)`);
+}

kidlisp-wasm/hello.lisp

···
+wipe 20 20 40
+ink 255 100 50
+circle w/2 h/2 40
+ink 50 200 100
+line 0 0 w h
+line w 0 0 h
+ink 255 255 255
+box 10 10 30 30
+ink red
+circle 100 30 15
+ink cyan
+box w/2 h/2 20 20

kidlisp-wasm/run.mjs

···
+#!/usr/bin/env node
+// KidLisp WASM Runner
+// Compiles a .lisp file, runs the WASM, outputs a PPM image.
+
+import { readFileSync, writeFileSync } from "fs";
+import { Compiler } from "./compiler.mjs";
+
+const WIDTH = 128;
+const HEIGHT = 128;
+
+// ─── Pixel Buffer ───────────────────────────────────────────────────
+
+const fb = new Uint8Array(WIDTH * HEIGHT * 4); // RGBA
+
+function setPixel(x, y, r, g, b) {
+  x = Math.round(x);
+  y = Math.round(y);
+  if (x < 0 || x >= WIDTH || y < 0 || y >= HEIGHT) return;
+  const i = (y * WIDTH + x) * 4;
+  fb[i] = r;
+  fb[i + 1] = g;
+  fb[i + 2] = b;
+  fb[i + 3] = 255;
+}
+
+// ─── Drawing State ──────────────────────────────────────────────────
+
+let inkR = 255,
+  inkG = 255,
+  inkB = 255;
+
+// ─── Host Functions ─────────────────────────────────────────────────
+
+function wipe(r, g, b) {
+  r = Math.round(r);
+  g = Math.round(g);
+  b = Math.round(b);
+  for (let i = 0; i < WIDTH * HEIGHT * 4; i += 4) {
+    fb[i] = r;
+    fb[i + 1] = g;
+    fb[i + 2] = b;
+    fb[i + 3] = 255;
+  }
+}
+
+function ink(r, g, b) {
+  inkR = Math.round(r);
+  inkG = Math.round(g);
+  inkB = Math.round(b);
+}
+
+function plot(x, y) {
+  setPixel(x, y, inkR, inkG, inkB);
+}
+
+function line(x0, y0, x1, y1) {
+  x0 = Math.round(x0);
+  y0 = Math.round(y0);
+  x1 = Math.round(x1);
+  y1 = Math.round(y1);
+  const dx = Math.abs(x1 - x0);
+  const dy = Math.abs(y1 - y0);
+  const sx = x0 < x1 ? 1 : -1;
+  const sy = y0 < y1 ? 1 : -1;
+  let err = dx - dy;
+  while (true) {
+    setPixel(x0, y0, inkR, inkG, inkB);
+    if (x0 === x1 && y0 === y1) break;
+    const e2 = 2 * err;
+    if (e2 > -dy) {
+      err -= dy;
+      x0 += sx;
+    }
+    if (e2 < dx) {
+      err += dx;
+      y0 += sy;
+    }
+  }
+}
+
+function box(x, y, w, h) {
+  x = Math.round(x);
+  y = Math.round(y);
+  w = Math.round(w);
+  h = Math.round(h);
+  for (let py = y; py < y + h; py++) {
+    for (let px = x; px < x + w; px++) {
+      setPixel(px, py, inkR, inkG, inkB);
+    }
+  }
+}
+
+function circle(cx, cy, r) {
+  cx = Math.round(cx);
+  cy = Math.round(cy);
+  r = Math.round(r);
+  for (let y = -r; y <= r; y++) {
+    for (let x = -r; x <= r; x++) {
+      if (x * x + y * y <= r * r) {
+        setPixel(cx + x, cy + y, inkR, inkG, inkB);
+      }
+    }
+  }
+}
+
+function tri(x0, y0, x1, y1, x2, y2) {
+  // Scanline triangle fill
+  x0 = Math.round(x0); y0 = Math.round(y0);
+  x1 = Math.round(x1); y1 = Math.round(y1);
+  x2 = Math.round(x2); y2 = Math.round(y2);
+  const minY = Math.max(0, Math.min(y0, y1, y2));
+  const maxY = Math.min(HEIGHT - 1, Math.max(y0, y1, y2));
+  for (let y = minY; y <= maxY; y++) {
+    let minX = WIDTH, maxX = 0;
+    const edges = [[x0,y0,x1,y1],[x1,y1,x2,y2],[x2,y2,x0,y0]];
+    for (const [ax,ay,bx,by] of edges) {
+      if ((ay <= y && by > y) || (by <= y && ay > y)) {
+        const t = (y - ay) / (by - ay);
+        const x = Math.round(ax + t * (bx - ax));
+        if (x < minX) minX = x;
+        if (x > maxX) maxX = x;
+      }
+    }
+    for (let x = Math.max(0, minX); x <= Math.min(WIDTH - 1, maxX); x++) {
+      setPixel(x, y, inkR, inkG, inkB);
+    }
+  }
+}
+
+// ─── Compile & Run ──────────────────────────────────────────────────
+
+const input = process.argv[2] || "hello.lisp";
+const source = readFileSync(
+  new URL(input, import.meta.url).pathname,
+  "utf-8",
+);
+
+console.log(`Compiling ${input}...`);
+const compiler = new Compiler();
+const wasmBytes = compiler.compile(source);
+console.log(`WASM binary: ${wasmBytes.length} bytes`);
+
+const { instance } = await WebAssembly.instantiate(wasmBytes, {
+  env: { wipe, ink, line, box, circle, plot, tri },
+});
+
+console.log("Running paint...");
+instance.exports.paint(WIDTH, HEIGHT, 0);
+
+// ─── Output PPM ─────────────────────────────────────────────────────
+
+const ppm = Buffer.alloc(15 + WIDTH * HEIGHT * 3); // header + pixels
+const header = `P6\n${WIDTH} ${HEIGHT}\n255\n`;
+ppm.write(header);
+let offset = header.length;
+for (let i = 0; i < WIDTH * HEIGHT * 4; i += 4) {
+  ppm[offset++] = fb[i];
+  ppm[offset++] = fb[i + 1];
+  ppm[offset++] = fb[i + 2];
+}
+
+const outFile = input.replace(/\.lisp$/, ".ppm");
+writeFileSync(new URL(outFile, import.meta.url).pathname, ppm.slice(0, offset));
+console.log(`Wrote ${outFile} (${WIDTH}x${HEIGHT})`);
+
+// ─── Terminal Preview (ANSI) ────────────────────────────────────────
+
+const PREVIEW_W = Math.min(WIDTH, 64);
+const scaleX = WIDTH / PREVIEW_W;
+const scaleY = (HEIGHT / PREVIEW_W) * 2; // 2 rows per char with ▀
+
+console.log(`\nPreview (${PREVIEW_W} cols):`);
+for (let row = 0; row < PREVIEW_W; row++) {
+  let line = "";
+  for (let col = 0; col < PREVIEW_W; col++) {
+    const tx = Math.floor(col * scaleX);
+    const ty = Math.floor(row * scaleY);
+    const by = Math.floor(row * scaleY + scaleY / 2);
+    const ti = (ty * WIDTH + tx) * 4;
+    const bi = (Math.min(by, HEIGHT - 1) * WIDTH + tx) * 4;
+    line += `\x1b[38;2;${fb[ti]};${fb[ti + 1]};${fb[ti + 2]};48;2;${fb[bi]};${fb[bi + 1]};${fb[bi + 2]}m\u2580`;
+  }
+  line += "\x1b[0m";
+  process.stdout.write(line + "\n");
+}

system/public/aesthetic.computer/disks/notepat.mjs

···
 const SECONDARY_BAR_TOP = TOP_BAR_BOTTOM;
 const SECONDARY_BAR_HEIGHT = 12;
 const SECONDARY_BAR_BOTTOM = SECONDARY_BAR_TOP + SECONDARY_BAR_HEIGHT;
+
+// OS bar — thin strip below the secondary bar for the "x86 os" button
+const OS_BAR_TOP = SECONDARY_BAR_BOTTOM;
+const OS_BAR_HEIGHT = 12;
+const OS_BAR_BOTTOM = OS_BAR_TOP + OS_BAR_HEIGHT;
+
 const TOGGLE_BTN_PADDING_X = 2;
 const TOGGLE_BTN_PADDING_Y = 2;
 const TOGGLE_BTN_GAP = 3; // At least 1px visible gap between buttons
···
 
 // let qrcells;
 
-let waveBtn, octBtn, osBtn;
+let waveBtn, octBtn, osBtn;
 let slideBtn, roomBtn, glitchBtn, quickBtn; // Toggle buttons for slide/room/glitch/quick modes
 let metroBtn, bpmMinusBtn, bpmPlusBtn; // Metronome controls
 let melodyAliasBtn;
···
     }
   }
 
-  buildWaveButton(api);
-  buildOctButton(api);
-  buildOsButton(api);
-  buildToggleButtons(api);
-  buildMetronomeButtons(api);
+  buildWaveButton(api);
+  buildOctButton(api);
+  buildOsButton(api);
+  buildToggleButtons(api);
+  buildMetronomeButtons(api);
 
   const newOctave =
     parseInt(colon[0]) || parseInt(colon[1]) || parseInt(colon[2]);
···
     (qKeyWidth + qKeySpacing);
   const qwertyHeight = QWERTY_MINIMAP_HEIGHT;
 
-  let pianoY = SECONDARY_BAR_BOTTOM;
+  let pianoY = OS_BAR_BOTTOM;
   let pianoStartX = 58;
   const centerX = layout?.centerX ?? (effectiveWidth - pianoWidth) / 2;
   const centerWidth = layout?.centerAreaWidth ?? pianoWidth;
···
     const rotatedPianoWidth = whiteKeyHeight + 2; // Keys drawn horizontally but stacked vertically
     const rotatedPianoHeight = MINI_PIANO_WHITE_KEYS.length * whiteKeyWidth; // Full piano height when rotated
     pianoStartX = gridLeft + gridWidth + 4; // Gap from grid
-    pianoY = layout?.topButtonY || SECONDARY_BAR_BOTTOM;
+    pianoY = layout?.topButtonY || OS_BAR_BOTTOM;
     
     // Check if rotated piano fits horizontally (x + width within screen)
     const pianoRight = pianoStartX + rotatedPianoWidth;
···
     const gridWidth = (layout?.buttonsPerRow || 4) * (layout?.buttonWidth || 20) + (layout?.margin || 2) * 2;
     const gridLeft = layout?.margin || 2;
     pianoStartX = gridLeft + gridWidth + 8; // 8px gap from grid
-    pianoY = layout?.topButtonY || SECONDARY_BAR_BOTTOM;
+    pianoY = layout?.topButtonY || OS_BAR_BOTTOM;
     
     // Check if piano fits horizontally
     const pianoRight = pianoStartX + pianoWidth;
···
   }
 
   if (isCompact) {
-    pianoY = SECONDARY_BAR_BOTTOM + 2;
+    pianoY = OS_BAR_BOTTOM + 2;
     // Check if piano fits in center area - if not, skip it (return hidden flag)
     if (centerWidth < pianoWidth + 4) {
       // Piano doesn't fit - hide it but still compute QWERTY position for center
···
     const maxX = Math.max(minX, centerRight - pianoWidth);
     pianoStartX = clamp(idealX, minX, maxX);
   } else if (song) {
-    const effectiveTrackY = trackY ?? SECONDARY_BAR_BOTTOM;
+    const effectiveTrackY = trackY ?? OS_BAR_BOTTOM;
     pianoY = effectiveTrackY + (trackHeight || 0) + 2;
     pianoStartX = effectiveWidth - pianoWidth - 2;
   } else {
···
     const notesPerSide = 12;
     const buttonsPerRow = 4;  // 4 notes per row on each side
     const totalRows = Math.ceil(notesPerSide / buttonsPerRow);  // 3 rows
-    const hudReserved = SECONDARY_BAR_BOTTOM;
+    const hudReserved = OS_BAR_BOTTOM;
     
     // Piano dimensions (extended mini layout)
     const whiteKeyWidth = getMiniPianoWhiteKeyWidth(true);
···
     };
   }
 
-  const hudReserved = SECONDARY_BAR_BOTTOM;
+  const hudReserved = OS_BAR_BOTTOM;
   const trackHeight = songMode ? TRACK_HEIGHT : 0;
   const trackSpacing = songMode ? TRACK_GAP : 0;
   const baseReservedTop = hudReserved + trackHeight + trackSpacing;
···
   // Rotated piano: width = MINI_KEYBOARD_HEIGHT, height = pianoWidth (all keys stacked)
   const rotatedPianoWidth = MINI_KEYBOARD_HEIGHT + 4; // Piano keys become vertical
   const rotatedPianoHeight = pianoWidth; // Height needed to fit ALL white keys
-  const availableHeightForRotated = screen.height - SECONDARY_BAR_BOTTOM - 4; // Leave some margin
+  const availableHeightForRotated = screen.height - OS_BAR_BOTTOM - 4; // Leave some margin
   // Only show rotated piano if ALL keys fit vertically
   const narrowVerticalSpace = !horizontalSpaceForMini && 
     usableWidth - gridWidthEstimate - rotatedPianoWidth > 4 &&
···
   // 🎨 KidLisp visualization — bounded to available space above/between buttons
   if (kidlispBgEnabled && kidlispBackground && !paintPictureOverlay) {
     wipe(bg); // Base background first
-    const klY = SECONDARY_BAR_BOTTOM;
+    const klY = OS_BAR_BOTTOM;
     const klBottom = earlyLayout.topButtonY;
     const klH = klBottom - klY;
     if (klH > 10) {
···
     // 🎚️ Room parameter bar - appears when room mode is enabled
     if (roomMode && roomBtn?.box) {
       const barHeight = 6;
-      const barY = SECONDARY_BAR_BOTTOM + 2;
+      const barY = OS_BAR_BOTTOM + 2;
       const barX = roomBtn.box.x;
       const barWidth = Math.max(40, roomBtn.box.w * 2);
       const fillWidth = Math.floor(barWidth * roomAmount);
···
   // In single-column mode (non-split), hide horizontal track entirely - only show vertical track if available
   const showHorizontalTrack = showTrack && !useVerticalTrack && layout.splitLayout;
   const trackHeight = showHorizontalTrack ? TRACK_HEIGHT : 0;
-  const trackY = showHorizontalTrack ? SECONDARY_BAR_BOTTOM : null;
+  const trackY = showHorizontalTrack ? OS_BAR_BOTTOM : null;
 
 
   if (showHorizontalTrack) {
···
     ink("yellow");
     write("tap", { right: 6, top: 6 });
   } else if (!paintPictureOverlay) {
-    osBtn?.paint((btn) => {
-      ink(btn.down ? [20, 70, 70] : [10, 45, 45]).box(
-        btn.box.x,
-        btn.box.y + 3,
-        btn.box.w,
-        btn.box.h - 3,
-      );
-      if (btn.over && !btn.down) {
-        ink(255, 255, 255, 24).box(
-          btn.box.x,
-          btn.box.y + 3,
-          btn.box.w,
-          btn.box.h - 3,
-        );
-        ink(100, 255, 255, 140).box(
-          btn.box.x,
-          btn.box.y + 3,
-          btn.box.w,
-          btn.box.h - 3,
-          "outline",
-        );
-      }
-      ink(70, 160, 160).line(
-        btn.box.x + btn.box.w,
-        btn.box.y + 3,
-        btn.box.x + btn.box.w,
-        btn.box.y + btn.box.h - 1,
-      );
-      ink(btn.down ? [220, 255, 255] : [120, 255, 255]).write(
-        "os",
-        { x: btn.box.x + 3, y: btn.box.y + 5 },
-        undefined, undefined, false, "MatrixChunky8"
-      );
-    });
-
-    waveBtn?.paint((btn) => {
+    // OS bar background
+    ink(8, 30, 30).box(0, OS_BAR_TOP, screen.width, OS_BAR_HEIGHT);
+    ink(5, 20, 20).line(0, OS_BAR_TOP, screen.width, OS_BAR_TOP);
+
+    osBtn?.paint((btn) => {
+      ink(btn.down ? [20, 70, 70] : [12, 40, 40]).box(
+        btn.box.x,
+        btn.box.y,
+        btn.box.w,
+        btn.box.h,
+      );
+      if (btn.over && !btn.down) {
+        ink(255, 255, 255, 24).box(
+          btn.box.x,
+          btn.box.y,
+          btn.box.w,
+          btn.box.h,
+        );
+        ink(100, 255, 255, 140).box(
+          btn.box.x,
+          btn.box.y,
+          btn.box.w,
+          btn.box.h,
+          "outline",
+        );
+      }
+      ink(70, 160, 160).line(
+        btn.box.x + btn.box.w,
+        btn.box.y + 1,
+        btn.box.x + btn.box.w,
+        btn.box.y + btn.box.h - 1,
+      );
+      ink(btn.down ? [220, 255, 255] : [120, 255, 255]).write(
+        btn.label || "x86 os",
+        { x: btn.box.x + 3, y: btn.box.y + 3 },
+        undefined, undefined, false, "MatrixChunky8"
+      );
+    });
+
+    waveBtn?.paint((btn) => {
       ink(btn.down ? [40, 40, 100] : "darkblue").box(
         btn.box.x,
         btn.box.y + 3,
···
     // Use layout metrics to find a safe spot
     const padTop = layout?.topButtonY || (screen.height - 120);
     const osdX = screen.width - osdWidth - 4;
-    const osdY = Math.max(SECONDARY_BAR_BOTTOM + 2, padTop - osdHeight - 4);
+    const osdY = Math.max(OS_BAR_BOTTOM + 2, padTop - osdHeight - 4);
     
     // Semi-transparent background
     ink(0, 0, 0, 210).box(osdX - 2, osdY - 2, osdWidth, osdHeight);
···
     }
   }
   if (e.is("reframed")) {
-    setupButtons(api);
-    buildWaveButton(api);
-    buildOctButton(api);
-    buildOsButton(api);
-    buildToggleButtons(api);
-    buildMetronomeButtons(api);
+    setupButtons(api);
+    buildWaveButton(api);
+    buildOctButton(api);
+    buildOsButton(api);
+    buildToggleButtons(api);
+    buildMetronomeButtons(api);
     // Resize picture to quarter resolution (half width, half height)
     const resizedPictureWidth = Math.max(1, Math.floor(screen.width / 2));
     const resizedPictureHeight = Math.max(1, Math.floor(screen.height / 2));
···
     const topPianoWidth = Math.min(140, Math.floor((screen.width - topBarBase) * 0.5));
     const topPianoEndX = topBarBase + topPianoWidth;
     const vizLeft = topPianoEndX; // Start after piano
-    const vizRight = (osBtn?.box?.x ?? waveBtn?.box?.x ?? screen.width) - 1;
-    if (e.x >= vizLeft && e.x <= vizRight) {
-      recitalMode = true;
-      recitalBlinkPhase = 0;
+    const vizRight = (waveBtn?.box?.x ?? screen.width) - 1;
+    if (e.x >= vizLeft && e.x <= vizRight) {
+      recitalMode = true;
+      recitalBlinkPhase = 0;
     }
   }
 
···
     if (layout.miniInputsEnabled && !recitalMode) {
 
       const trackHeight = showTrack ? TRACK_HEIGHT : 0;
-      const trackY = showTrack ? SECONDARY_BAR_BOTTOM : null;
+      const trackY = showTrack ? OS_BAR_BOTTOM : null;
       const pianoGeometry = getMiniPianoGeometry({
         screen,
         layout,
···
       },
     });
 
-    waveBtn?.act(e, {
-      down: () => api.beep(400),
-      push: (btn) => {
-        api.beep();
-        waveIndex = (waveIndex + 1) % wavetypes.length;
-        wave = wavetypes[waveIndex];
-        buildWaveButton(api);
-      },
-    });
-
-    osBtn?.act(e, {
-      down: () => api.beep(400),
-      push: () => {
-        api.beep();
-        jump("os");
-      },
-    });
+    waveBtn?.act(e, {
+      down: () => api.beep(400),
+      push: (btn) => {
+        api.beep();
+        waveIndex = (waveIndex + 1) % wavetypes.length;
+        wave = wavetypes[waveIndex];
+        buildWaveButton(api);
+      },
+    });
+
+    osBtn?.act(e, {
+      down: () => api.beep(400),
+      push: () => {
+        api.beep();
+        jump("os");
+      },
+    });
 
     // 🎛️ Toggle button interactions
     slideBtn?.act(e, {
···
 
     // 🎚️ Room parameter bar interaction (drag to adjust room amount)
     if (roomMode && roomBtn?.box && (e.is("touch") || e.is("draw"))) {
-      const barY = SECONDARY_BAR_BOTTOM + 2;
+      const barY = OS_BAR_BOTTOM + 2;
       const barHeight = 6;
       const barX = roomBtn.box.x;
       const barWidth = Math.max(40, roomBtn.box.w * 2);
···
   waveBtn.displayWave = displayWave;
 }
 
-function buildOctButton({ screen, ui, typeface }) {
+function buildOctButton({ screen, ui, typeface }) {
   const isNarrow = screen.width < 200;
   const glyphWidth = typeface?.glyphs?.["0"]?.resolution?.[0] ?? matrixFont?.glyphs?.["0"]?.resolution?.[0] ?? 6;
   const octWidth = octave.length * glyphWidth;
···
     octWidth + margin * 2 + 7,
     10 + margin * 2 - 1 + 2,
   );
-  octBtn.id = "oct-button";
-  octBtn.isNarrow = isNarrow;
-}
-
-function buildOsButton({ ui }) {
-  const margin = 4;
-  const labelWidth = 2 * 6;
-  const buttonWidth = labelWidth + margin * 2;
-  const buttonHeight = 10 + margin * 2 - 1 + 2;
-  const waveX = waveBtn?.box?.x ?? 9999;
-  osBtn = new ui.Button(
-    waveX - buttonWidth - 3,
-    0,
-    buttonWidth,
-    buttonHeight,
-  );
-  osBtn.id = "os-button";
-}
+  octBtn.id = "oct-button";
+  octBtn.isNarrow = isNarrow;
+}
+
+function buildOsButton({ ui, screen }) {
+  const label = "x86 os";
+  const margin = 3;
+  const labelWidth = label.length * 6;
+  const buttonWidth = labelWidth + margin * 2;
+  const buttonHeight = OS_BAR_HEIGHT;
+  osBtn = new ui.Button(
+    0,
+    OS_BAR_TOP,
+    buttonWidth,
+    buttonHeight,
+  );
+  osBtn.id = "os-button";
+  osBtn.label = label;
+}
 
 // Build metronome controls and toggle buttons with responsive layout
 // Calculates available space and shortens labels as needed to prevent overlap