File size: 11,035 Bytes

119e586

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
  <meta name="apple-mobile-web-app-title" content="LISP Machine"/>
  <meta name="theme-color" content="#000a00"/>
  <link rel="manifest" href="manifest.json"/>
  <title>SnapKitty LISP Machine</title>

  <!-- xterm.js from CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
  <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>

  <style>

    * { box-sizing: border-box; margin: 0; padding: 0; }



    body {

      background: #000;

      display: flex;

      flex-direction: column;

      height: 100vh;

      overflow: hidden;

      font-family: monospace;

    }



    /* ── CRT container ── */

    #crt {

      position: relative;

      flex: 1;

      overflow: hidden;

      background: #000;



      /* Phosphor screen curvature */

      border-radius: 12px;

      margin: 8px;

      box-shadow:

        0 0 0 2px #1a1a1a,

        0 0 0 4px #111,

        inset 0 0 60px rgba(0, 255, 60, 0.03);

    }



    /* Scanline overlay */

    #crt::before {

      content: '';

      position: absolute;

      inset: 0;

      background: repeating-linear-gradient(

        0deg,

        transparent,

        transparent 2px,

        rgba(0, 0, 0, 0.15) 2px,

        rgba(0, 0, 0, 0.15) 4px

      );

      pointer-events: none;

      z-index: 10;

    }



    /* Vignette */

    #crt::after {

      content: '';

      position: absolute;

      inset: 0;

      background: radial-gradient(ellipse at center,

        transparent 60%,

        rgba(0, 0, 0, 0.55) 100%

      );

      pointer-events: none;

      z-index: 11;

    }



    #terminal {

      position: absolute;

      inset: 12px;

      z-index: 1;

    }



    /* Status bar */

    #statusbar {

      height: 28px;

      background: #050505;

      border-top: 1px solid #0f2d0f;

      display: flex;

      align-items: center;

      justify-content: space-between;

      padding: 0 16px;

      font-size: 11px;

      font-family: 'Courier New', monospace;

      color: #1a6b1a;

      letter-spacing: 0.05em;

    }



    #statusbar .left { display: flex; gap: 24px; }

    #statusbar .right { color: #0d3d0d; }



    .status-dot {

      display: inline-block;

      width: 6px;

      height: 6px;

      border-radius: 50%;

      background: #33ff33;

      box-shadow: 0 0 4px #33ff33;

      margin-right: 6px;

      animation: pulse 2s infinite;

    }



    @keyframes pulse {

      0%, 100% { opacity: 1; }

      50%       { opacity: 0.4; }

    }



    /* xterm override — phosphor green */

    .xterm-screen canvas { image-rendering: pixelated; }

  </style>
</head>
<body>

<div id="crt">
  <div id="terminal"></div>
</div>

<div id="statusbar">
  <div class="left">
    <span><span class="status-dot"></span>LISP MACHINE ONLINE</span>
    <span id="stat-tick">TICK: 0</span>
    <span id="stat-bindings">BINDINGS: 16</span>
    <span id="stat-chain">CHAIN: 0</span>
  </div>
  <div class="right" id="stat-seal">UNSEALED</div>
</div>

<script>

const { invoke } = window.__TAURI__.core;



// ── Terminal init ─────────────────────────────────────────────────────────────

const term = new Terminal({

  cols: 80,

  rows: 30,

  theme: {

    background:    '#000000',

    foreground:    '#33ff33',

    cursor:        '#33ff33',

    cursorAccent:  '#000000',

    selectionBackground: 'rgba(51,255,51,0.3)',

    black:         '#000000',

    green:         '#33ff33',

    brightGreen:   '#66ff66',

    red:           '#ff3333',

    yellow:        '#ffff33',

    cyan:          '#33ffff',

    white:         '#ccffcc',

    brightWhite:   '#ffffff',

  },

  fontFamily: '"Courier New", "Lucida Console", monospace',

  fontSize: 14,

  lineHeight: 1.3,

  letterSpacing: 0.5,

  cursorBlink: true,

  cursorStyle: 'block',

  scrollback: 1000,

  allowTransparency: true,

});



const fitAddon = new FitAddon.FitAddon();

term.loadAddon(fitAddon);

term.open(document.getElementById('terminal'));

fitAddon.fit();

window.addEventListener('resize', () => fitAddon.fit());



// ── Boot sequence ─────────────────────────────────────────────────────────────

const G = '\x1b[32m';   // green

const B = '\x1b[92m';   // bright green

const D = '\x1b[2;32m'; // dim green

const R = '\x1b[0m';    // reset

const Y = '\x1b[33m';   // yellow (amber accent)

const C = '\x1b[36m';   // cyan



async function boot() {

  const lines = [

    '',

    `${B}  ███████╗███╗   ██╗ █████╗ ██████╗ ██╗  ██╗██╗████████╗████████╗██╗   ██╗${R}`,

    `${G}  ██╔════╝████╗  ██║██╔══██╗██╔══██╗██║ ██╔╝██║╚══██╔══╝╚══██╔══╝╚██╗ ██╔╝${R}`,

    `${G}  ███████╗██╔██╗ ██║███████║██████╔╝█████╔╝ ██║   ██║      ██║    ╚████╔╝ ${R}`,

    `${D}  ╚════██║██║╚██╗██║██╔══██║██╔═══╝ ██╔═██╗ ██║   ██║      ██║     ╚██╔╝  ${R}`,

    `${D}  ███████║██║ ╚████║██║  ██║██║     ██║  ██╗██║   ██║      ██║      ██║   ${R}`,

    `${D}  ╚══════╝╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝     ╚═╝  ╚═╝╚═╝   ╚═╝      ╚═╝      ╚═╝   ${R}`,

    '',

    `${Y}  VIRTUAL LISP MACHINE v0.1 — SOVEREIGN TICK RUNTIME${R}`,

    `${D}  Tagged heap · Mark-sweep GC · WORM-sealed world dumps${R}`,

    '',

    `${G}  METATRON has seeded the world state.${R}`,

    `${D}  World map distributed. σ₀ sealed.${R}`,

    '',

    `${C}  Commands:${R}`,

    `${G}  (define x 42)    ${D}— bind a symbol${R}`,

    `${G}  (lambda (x) ...) ${D}— create a closure${R}`,

    `${G}  seal!             ${D}— checkpoint world state to WORM chain${R}`,

    `${G}  stats             ${D}— show machine stats${R}`,

    `${G}  help              ${D}— show all builtins${R}`,

    '',

  ];

  for (const line of lines) {

    term.writeln(line);

    await sleep(18);

  }

  prompt();

}



// ── REPL ──────────────────────────────────────────────────────────────────────

let inputBuf = '';

let history   = [];

let histIdx   = -1;



function prompt() {

  term.write(`${G}λ>${R} `);

}



term.onKey(async ({ key, domEvent }) => {

  const code = domEvent.keyCode;



  if (code === 13) {                    // Enter

    term.writeln('');

    const line = inputBuf.trim();

    inputBuf = '';

    histIdx  = -1;

    if (line) {

      history.unshift(line);

      await handleLine(line);

    }

    prompt();



  } else if (code === 8) {             // Backspace

    if (inputBuf.length > 0) {

      inputBuf = inputBuf.slice(0, -1);

      term.write('\b \b');

    }



  } else if (code === 38) {            // Up arrow — history

    if (histIdx < history.length - 1) {

      histIdx++;

      const entry = history[histIdx];

      clearInput();

      inputBuf = entry;

      term.write(entry);

    }



  } else if (code === 40) {            // Down arrow — history

    if (histIdx > 0) {

      histIdx--;

      const entry = history[histIdx];

      clearInput();

      inputBuf = entry;

      term.write(entry);

    } else if (histIdx === 0) {

      histIdx = -1;

      clearInput();

    }



  } else if (code === 67 && domEvent.ctrlKey) {   // Ctrl+C

    term.writeln('');

    inputBuf = '';

    prompt();



  } else if (key.length === 1) {

    inputBuf += key;

    term.write(key);

  }

});



function clearInput() {

  term.write('\r' + ' '.repeat(inputBuf.length + 3) + '\r');

  term.write(`${G}λ>${R} `);

  inputBuf = '';

}



async function handleLine(line) {

  if (line === 'seal!') {

    const result = await invoke('lisp_checkpoint').catch(e => `error: ${e}`);

    term.writeln(`${Y}  ${result}${R}`);

    await refreshStats();



  } else if (line === 'stats') {

    const result = await invoke('lisp_stats').catch(e => `error: ${e}`);

    term.writeln(`${C}  ${result}${R}`);



  } else if (line === 'help') {

    const builtins = [

      '  Arithmetic:  + - * /',

      '  Compare:     = < > eq?',

      '  Lists:       cons car cdr list null?',

      '  Logic:       not and or',

      '  Control:     if cond begin let',

      '  Define:      define lambda',

      '  Special:     quote',

      '  Meta:        print',

      '  Machine:     seal!  stats  help',

    ];

    for (const line of builtins) term.writeln(`${D}${line}${R}`);



  } else if (line === 'clear') {

    term.clear();



  } else {

    try {

      const result = await invoke('lisp_eval', { expr: line });

      term.writeln(`${B}  => ${result}${R}`);

    } catch (e) {

      term.writeln(`${'\x1b[31m'}  ! ${e}${R}`);

    }

  }

}



async function refreshStats() {

  try {

    const stats = await invoke('lisp_stats');

    const m = stats.match(/tick=(\d+).*bindings=(\d+).*chain_len=(\d+)/);

    if (m) {

      document.getElementById('stat-tick').textContent     = `TICK: ${m[1]}`;

      document.getElementById('stat-bindings').textContent = `BINDINGS: ${m[2]}`;

      document.getElementById('stat-chain').textContent    = `CHAIN: ${m[3]}`;

    }

    const seal = stats.match(/hash=([a-f0-9]+)/);

    if (seal) {

      document.getElementById('stat-seal').textContent = `SEALED: ${seal[1].slice(0,12)}...`;

    }

  } catch {}

}



function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }



// ── Start ─────────────────────────────────────────────────────────────────────

boot();

setInterval(refreshStats, 5000);

if('serviceWorker'in navigator)navigator.serviceWorker.register('sw.js').catch(()=>{});

</script>
</body>
</html>