script.js

// ============================================================
// State + utilities
// ============================================================
const term = document.getElementById('term');
const cmdInput = document.getElementById('cmd');
const inputRow = document.getElementById('inputRow');
const navBtns = document.querySelectorAll('#nav button');

const history = [];
let historyIdx = -1;
const startTime = Date.now();

function scrollBottom() {
  term.scrollTop = term.scrollHeight;
}
function el(tag, cls, html) {
  const e = document.createElement(tag);
  if (cls) e.className = cls;
  if (html !== undefined) e.innerHTML = html;
  return e;
}
function appendBefore(node) {
  term.insertBefore(node, inputRow);
  scrollBottom();
}

// Print a finished prompt line (with command echoed)
function printPromptLine(cmdText) {
  const line = el('div', 'prompt-line');
  line.innerHTML = `<span class="prompt"><span class="user">guest</span><span class="at-host">@</span><span class="host">decyphered</span><span class="path">:~$</span></span><span class="cmd">${escapeHtml(cmdText)}</span>`;
  appendBefore(line);
}

// Print output block
function printOut(html) {
  const out = el('div', 'out', html);
  appendBefore(out);
}

function escapeHtml(s) {
  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

// ============================================================
// Live header values
// ============================================================
function pad(n) { return String(n).padStart(2, '0'); }
function tickClock() {
  const d = new Date();
  document.getElementById('clock').textContent = `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
  // uptime since page load
  const u = Math.floor((Date.now() - startTime) / 1000);
  const h = Math.floor(u/3600), m = Math.floor((u%3600)/60), s = u%60;
  document.getElementById('uptime').textContent = `${pad(h)}:${pad(m)}:${pad(s)}`;
}
setInterval(tickClock, 1000); tickClock();
try {
  document.getElementById('tz').textContent =
    Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
} catch (e) {}
try {
  const sys = 'linux';
  document.getElementById('uname').textContent = sys;
} catch (e) {}

// ============================================================
// "Files" — content lives here
// ============================================================
const files = {
  'about.txt': () => `
<span class="h">about.txt</span>
<hr>
<div class="row"><span class="k">Focus</span><span class="v">local LLMs · AI agents · open-source software</span></div>
<div class="row"><span class="k">Mission</span><span class="v">make systems safer, clearer, and more human</span></div>
<div class="row"><span class="k">Ethos</span><span class="v">privacy · open tools · shared knowledge · accessible systems</span></div>
<div class="row"><span class="k">Loves</span><span class="v">learning · women's sports · assistive tech · community</span></div>
<hr>
<div class="row"><span class="k">Currently</span><span class="v">researching how open AI can make software, knowledge, and opportunity more accessible</span></div>`,

  'work.md': () => `
<span class="h">work.md</span>
<hr>
<span class="badge">role</span><span class="v">programming, public education technology</span>
<br><br>
i lead a programming team focused on public education technology. our scope covers:
<ul>
  <li>web development</li>
  <li>application development</li>
  <li>data integrations</li>
  <li>the systems that connect them</li>
</ul>
<span class="sub">// we build the plumbing that lets people learn, teach, and run schools without fighting their tools.</span>`,

  'projects/': () => `
<span class="h">projects/</span>
<hr>
<span class="sub">A small index of things I am building, learning, or documenting.<br>Repos will be linked here as they become public.</span>
<br><br>
<div class="project">
  <div><span class="title">[01] home-lab</span> <span class="badge">active learning lab</span></div>
  <div class="meta">focus: open-source infrastructure, local AI, monitoring</div>
  <div class="meta">repo: coming soon</div>
  <br>
  <div>Single-machine Linux home lab for containerized services, local AI workflows, observability, and web hosting.</div>
  <div class="meta">tools: Ubuntu Server LTS, Docker, Caddy, Forgejo, Uptime Kuma, Prometheus, Grafana, PostgreSQL, Ollama, Open WebUI, Langfuse</div>
  <div class="meta">why: learn the systems directly, keep useful tools close, and make the setup understandable enough to share</div>
</div>
<div class="project">
  <div><span class="title">[02] decyphered.dev</span> <span class="badge">live</span></div>
  <div class="meta">focus: personal site, terminal UI, open web</div>
  <div class="meta">repo: <a href="https://github.com/decyphered/decyphered.dev" target="_blank" rel="noopener">github.com/decyphered/decyphered.dev</a></div>
  <br>
  <div>Minimal terminal-style personal website built with plain HTML, CSS, and JavaScript.</div>
  <div class="meta">why: keep a small, readable home on the web for identity, projects, values, photos, and playful experiments</div>
</div>
<div class="project">
  <div><span class="title">[03] womens hockey league data warehouse</span> <span class="badge">active build</span></div>
  <div class="meta">focus: sports data, reporting, operations</div>
  <div class="meta">repo: coming soon</div>
  <br>
  <div>Data warehouse for organizing women's hockey league rosters, schedules, standings, stats, and operational reporting.</div>
  <div class="meta">tools: PostgreSQL, ETL workflows, API imports, dashboards</div>
  <div class="meta">why: make league data easier to trust, query, share, and build useful tools on top of</div>
</div>
<div class="project">
  <div><span class="title">[04] self-hosted personal robot assistant</span> <span class="badge">prototype</span></div>
  <div class="meta">focus: local AI, automation, personal workflows</div>
  <div class="meta">repo: coming soon</div>
  <br>
  <div>Self-hosted assistant for local AI interaction, personal automation, reminders, home-lab tasks, and useful command-driven workflows.</div>
  <div class="meta">tools: Docker, local LLMs, automation scripts, APIs, speech or chat interfaces</div>
  <div class="meta">why: keep automation private, practical, and close enough to understand and improve</div>
</div>
<br>
<span class="sub">// run <span class="k">cat projects/</span> to print this index, or <span class="k">help</span> for commands.</span>`,

  'contact.txt': () => `
<span class="h">contact.txt</span>
<hr>
<div class="row"><span class="k">github</span><span class="v"><a href="https://github.com/decyphered" target="_blank" rel="noopener">github.com/decyphered</a></span></div>
<div class="row"><span class="k">email</span><span class="v"><a href="mailto:rdecyphered@gmail.com">rdecyphered@gmail.com</a></span></div>
<div class="row"><span class="k">site</span><span class="v"><a href="#" onclick="return false;">decyphered.dev</a></span></div>
<hr>
<span class="sub">// best signal: github issues / email. i read everything, reply to most.</span>`,

  'README.md': () => `
<span class="h">README.md</span>
<hr>
this is a personal site. it is also a terminal.
<br><br>
try these:
<ul>
  <li><span class="k">help</span> — list all commands</li>
  <li><span class="k">whoami</span> — short bio</li>
  <li><span class="k">ls</span> — list files</li>
  <li><span class="k">cat about.txt</span> — long bio</li>
  <li><span class="k">projects</span> — what i'm building</li>
  <li><span class="k">contact</span> — how to reach me</li>
  <li><span class="k">fortune</span> — a small useful note</li>
  <li><span class="k">puckdb</span> — hockey data warehouse console</li>
</ul>`,
};

const fortunes = {
  lab: [
    'monitor the thing before you trust the thing.',
    'a home lab is where theory gets logs.',
    'document the weird fix while it is still warm.',
    'the best dashboard answers the next question too.',
    'small services stay friendly when their backups work.',
  ],
  hockey: [
    'good systems make room for messy humans and fast line changes.',
    'a clean roster is a kindness to everyone downstream.',
    'track the puck, but do not forget the people moving it.',
    'the best league ops are invisible until someone needs them.',
    'standings are just stories with timestamps.',
  ],
  ai: [
    'the best assistant gives you leverage without taking the wheel.',
    'local first is a design choice, not a nostalgia act.',
    'automation should feel like a toolbelt, not a trapdoor.',
    'keep the robot close enough to unplug.',
    'use the model for momentum and your judgment for direction.',
  ],
  web: [
    'a small site you understand is better than a stack you fear.',
    'plain HTML still has all the good bones.',
    'the open web rewards readable little homes.',
    'ship the page, then make it stranger on purpose.',
    'fast, quiet, useful is a very good aesthetic.',
  ],
  values: [
    'shared knowledge is infrastructure too.',
    'useful systems should leave people with more agency.',
    'clarity is accessibility doing its day job.',
    'make the humane path the easy path.',
    'good tools explain themselves when the room gets noisy.',
  ],
};

const puckdbData = {
  status: [
    ['status', 'active build'],
    ['source', 'rosters, schedules, standings, ops notes'],
    ['tables', 'teams, players, games, standings, imports'],
    ['repo', 'coming soon'],
  ],
  tables: [
    ['teams', 'registered teams and divisions'],
    ['players', 'roster records and player status'],
    ['games', 'schedule, venue, score, and game state'],
    ['standings', 'computed league table for reporting'],
    ['imports', 'ETL run history and source health'],
  ],
  schemas: [
    ['teams', 'id, name, division, active'],
    ['players', 'id, team_id, name, number, position, status'],
    ['games', 'id, home_team, away_team, starts_at, status, score'],
    ['standings', 'team_id, games_played, wins, losses, points'],
    ['imports', 'id, source, started_at, finished_at, result'],
  ],
  samples: [
    ['teams', 'anchorage aurora | north | active'],
    ['players', 'river stone | #17 | F | rostered'],
    ['games', 'aurora vs harbor lights | final | 4-2'],
    ['standings', 'aurora | GP 12 | W 9 | L 3 | PTS 18'],
    ['imports', 'schedule_csv | ok | 128 rows'],
  ],
  queries: {
    standings: {
      title: 'demo standings report',
      rows: [
        ['team', 'gp  w  l  pts'],
        ['anchorage aurora', '12  9  3  18'],
        ['harbor lights', '12  8  4  16'],
        ['summit foxes', '12  6  6  12'],
        ['river city', '12  4  8   8'],
      ],
    },
    'missing-scores': {
      title: 'games needing score updates',
      rows: [
        ['2026-01-14', 'aurora vs harbor lights | awaiting final'],
        ['2026-01-19', 'summit foxes vs river city | score review'],
        ['2026-01-22', 'harbor lights vs river city | sheet pending'],
      ],
    },
  },
  etlLog: [
    ['ok', 'pulled roster export'],
    ['ok', 'normalized team names'],
    ['ok', 'matched 128 player records'],
    ['warn', '2 games missing final scores'],
    ['ok', 'rebuilt standings view'],
  ],
};

function getFortuneCategories() {
  return Object.keys(fortunes);
}

function pickFortune(category) {
  const categories = getFortuneCategories();
  const normalized = category ? category.toLowerCase() : '';
  if (normalized && !fortunes[normalized]) return null;

  const selectedCategory = normalized || categories[Math.floor(Math.random() * categories.length)];
  const bucket = fortunes[selectedCategory];
  const text = bucket[Math.floor(Math.random() * bucket.length)];
  return { category: selectedCategory, text };
}

function renderFortune(fortune) {
  return `
<span class="h">fortune</span> <span class="badge">${escapeHtml(fortune.category)}</span>
<hr>
<span class="v">${escapeHtml(fortune.text)}</span>`;
}

function renderFortuneUsage() {
  return `<span class="sub">try: fortune ${getFortuneCategories().join('|')}|list|cow</span>`;
}

function renderFortuneCategoryError() {
  return `<span class="err">fortune: unknown category</span><br>${renderFortuneUsage()}`;
}

function renderTerminalRows(rows) {
  return rows
    .map(([key, value]) => `<div class="row"><span class="k">${escapeHtml(key)}</span><span class="v">${escapeHtml(value)}</span></div>`)
    .join('');
}

function renderPuckdbUsage() {
  return `<span class="sub">try: puckdb status|tables|schema|sample|query standings|query missing-scores|etl|help</span>`;
}

function renderPuckdbStatus() {
  return `
<span class="h">PUCKDB // womens hockey league data warehouse</span> <span class="badge">demo</span>
<hr>
${renderTerminalRows(puckdbData.status)}
<hr>
${renderPuckdbUsage()}`;
}

function renderPuckdbHelp() {
  const rows = [
    ['puckdb status', 'warehouse overview'],
    ['puckdb tables', 'demo table index'],
    ['puckdb schema', 'compact schema lines'],
    ['puckdb sample', 'fictional sample rows'],
    ['puckdb query standings', 'demo league table'],
    ['puckdb query missing-scores', 'ops report'],
    ['puckdb etl', 'import log'],
  ];
  return `<span class="h">puckdb help</span><hr>${renderTerminalRows(rows)}<hr>${renderPuckdbUsage()}`;
}

function renderPuckdbTables() {
  return `<span class="h">puckdb tables</span><hr>${renderTerminalRows(puckdbData.tables)}`;
}

function renderPuckdbSchema() {
  return `<span class="h">puckdb schema</span><hr>${renderTerminalRows(puckdbData.schemas)}`;
}

function renderPuckdbSample() {
  return `<span class="h">puckdb sample rows</span> <span class="badge">fictional</span><hr>${renderTerminalRows(puckdbData.samples)}`;
}

function renderPuckdbQuery(name) {
  const query = puckdbData.queries[name];
  if (!query) {
    return `<span class="err">puckdb query: unknown report</span><br><span class="sub">try: puckdb query standings|missing-scores</span>`;
  }
  return `<span class="h">${escapeHtml(query.title)}</span><hr>${renderTerminalRows(query.rows)}`;
}

function renderPuckdbEtl() {
  const rows = puckdbData.etlLog
    .map(([cls, text]) => `<div><span class="${escapeHtml(cls)}">[ ${escapeHtml(cls)} ]</span> <span class="v">${escapeHtml(text)}</span></div>`)
    .join('');
  return `<span class="h">puckdb etl</span><hr>${rows}<hr><span class="sub">// demo import log; no live data was harmed.</span>`;
}

// ============================================================
// Commands
// ============================================================
const commands = {
  help() {
    return `
<span class="h">available commands</span>
<hr>
<div class="row"><span class="k">whoami</span><span class="v">short bio / handle</span></div>
<div class="row"><span class="k">about</span><span class="v">cat about.txt</span></div>
<div class="row"><span class="k">work</span><span class="v">what i do for a job</span></div>
<div class="row"><span class="k">projects</span><span class="v">personal projects</span></div>
<div class="row"><span class="k">contact</span><span class="v">how to reach me</span></div>
<div class="row"><span class="k">ls</span><span class="v">list files</span></div>
<div class="row"><span class="k">cat &lt;file&gt;</span><span class="v">print a file</span></div>
<div class="row"><span class="k">date</span><span class="v">current date / time</span></div>
<div class="row"><span class="k">uname</span><span class="v">system info</span></div>
<div class="row"><span class="k">echo &lt;text&gt;</span><span class="v">echo text</span></div>
<div class="row"><span class="k">fortune</span><span class="v">small useful notes</span></div>
<div class="row"><span class="k">puckdb</span><span class="v">hockey data warehouse console</span></div>
<div class="row"><span class="k">theme &lt;color&gt;</span><span class="v">cyan · green · amber · magenta · violet</span></div>
<div class="row"><span class="k">scanlines</span><span class="v">toggle CRT scanlines</span></div>
<div class="row"><span class="k">clear</span><span class="v">clear the terminal</span></div>
<div class="row"><span class="k">history</span><span class="v">command history</span></div>
<hr>
<span class="sub">// tip: ↑/↓ walks history. tab autocompletes.</span>`;
  },

  whoami() {
    const ascii = [
      '     _                       _                       _',
      '  __| | ___  ___ _   _ _ __ | |__   ___ _ __ ___  __| |',
      ' / _` |/ _ \\/ __| | | | \'_ \\| \'_ \\ / _ \\ \'__/ _ \\/ _` |',
      '| (_| |  __/ (__| |_| | |_) | | | |  __/ | |  __/ (_| |',
      ' \\__,_|\\___|\\___|\\__, | .__/|_| |_|\\___|_|  \\___|\\__,_|',
      '                  __/ | |',
      '                 |___/|_|',
    ].join('\n');
    return `
<pre class="ascii">${ascii}</pre>
<span class="h">@decyphered</span>
<br>a human that likes open technology and shared knowledge.
<br>team lead, public ed tech. researching open AI for accessibility.
<br><br><span class="sub">// run <span class="k">about</span> for the long version.</span>`;
  },

  about() { return files['about.txt'](); },
  work()  { return files['work.md'](); },
  projects() { return files['projects/'](); },
  contact() { return files['contact.txt'](); },

  ls(args) {
    const entries = [
      ['about.txt', 'file'],
      ['work.md', 'file'],
      ['projects/', 'dir'],
      ['contact.txt', 'file'],
      ['README.md', 'file'],
    ];
    if (args[0] === '-la' || args[0] === '-l') {
      return entries.map(([n, t]) => `<div class="row"><span class="k">${t === 'dir' ? 'drwxr-xr-x' : '-rw-r--r--'}</span><span class="v" style="text-align:left">${n}</span></div>`).join('');
    }
    return entries.map(([n, t]) => `<span style="color: ${t === 'dir' ? 'var(--accent)' : 'var(--text)'}; margin-right: 18px; display:inline-block">${n}</span>`).join('');
  },

  cat(args) {
    if (!args.length) return `<span class="err">cat: missing operand</span><br><span class="sub">try: cat about.txt</span>`;
    const name = args[0].replace(/^\.\//, '');
    if (files[name]) return files[name]();
    // alias by basename
    const match = Object.keys(files).find(k => k.toLowerCase().startsWith(name.toLowerCase()));
    if (match) return files[match]();
    return `<span class="err">cat: ${escapeHtml(args[0])}: no such file or directory</span>`;
  },

  date() {
    return `<span class="v">${new Date().toString()}</span>`;
  },

  uname(args) {
    if (args[0] === '-a') {
      return `decyphered linux 6.x #1 SMP open source x86_64 GNU/Linux<br><span class="sub">// powered by curiosity</span>`;
    }
    return `Linux`;
  },

  echo(args) {
    return `<span class="v">${escapeHtml(args.join(' '))}</span>`;
  },

  fortune(args) {
    const mode = (args[0] || '').toLowerCase();
    const category = (args[1] || '').toLowerCase();

    if (mode === 'list') {
      const rows = getFortuneCategories()
        .map(name => `<div class="row"><span class="k">${escapeHtml(name)}</span><span class="v">fortune ${escapeHtml(name)}</span></div>`)
        .join('');
      return `<span class="h">fortune categories</span><hr>${rows}<hr>${renderFortuneUsage()}`;
    }

    if (mode === 'cow') {
      const fortune = pickFortune(category);
      if (!fortune) return renderFortuneCategoryError();
      return commands.cowsay([fortune.text]);
    }

    const fortune = pickFortune(mode);
    if (!fortune) return renderFortuneCategoryError();
    return renderFortune(fortune);
  },

  puckdb(args) {
    const mode = (args[0] || 'status').toLowerCase();
    const report = (args[1] || '').toLowerCase();

    if (mode === 'status') return renderPuckdbStatus();
    if (mode === 'help') return renderPuckdbHelp();
    if (mode === 'tables') return renderPuckdbTables();
    if (mode === 'schema') return renderPuckdbSchema();
    if (mode === 'sample') return renderPuckdbSample();
    if (mode === 'query') return renderPuckdbQuery(report);
    if (mode === 'etl') return renderPuckdbEtl();

    return `<span class="err">puckdb: unknown subcommand</span><br>${renderPuckdbUsage()}`;
  },

  clear() {
    // remove everything except input row
    [...term.children].forEach(c => { if (c !== inputRow) c.remove(); });
    return null;
  },

  history() {
    if (!history.length) return `<span class="sub">// no history yet</span>`;
    return history.map((h, i) => `<div class="row"><span class="k">${String(i+1).padStart(3, ' ')}</span><span class="v" style="text-align:left">${escapeHtml(h)}</span></div>`).join('');
  },

  theme(args) {
    const map = { cyan: '#5ee0ff', green: '#39ff7a', amber: '#ffb73a', magenta: '#ff5ed1', violet: '#c6a0ff' };
    const c = map[(args[0]||'').toLowerCase()];
    if (!c) return `<span class="err">theme: unknown color</span><br><span class="sub">try: theme cyan|green|amber|magenta|violet</span>`;
    setAccent(c);
    return `<span class="ok">accent → ${args[0]} ${c}</span>`;
  },

  scanlines() {
    const on = document.body.dataset.scanlines !== 'on';
    document.body.dataset.scanlines = on ? 'on' : 'off';
    syncScanToggle();
    return `<span class="ok">scanlines: ${on ? 'on' : 'off'}</span>`;
  },

  sudo(args) {
    return `<span class="err">[sudo] password for guest: </span><br><span class="warn">guest is not in the sudoers file. this incident will be reported.</span><br><span class="sub">// jk. but really, this is a static page.</span>`;
  },

  exit() {
    return `<span class="sub">// you can't exit, this is the web. but you can close the tab.</span>`;
  },

  // easter eggs
  cowsay(args) {
    const msg = args.join(' ') || 'open source forever';
    const bar = '-'.repeat(Math.min(msg.length, 40) + 2);
    return `<pre class="ascii"> ${bar}
&lt; ${escapeHtml(msg)} &gt;
 ${bar}
        \\   ^__^
         \\  (oo)\\_______
            (__)\\       )\\/\\
                ||----w |
                ||     ||</pre>`;
  },

  hockey() {
    return `<pre class="ascii">       _.-'^'-._
      /  )   (  \\
     |  ( ●  ● ) |   PUCK INBOUND
      \\  '-=-'  /    ────────────
       '-.___.-'     skate fast.
            ||
            ||       — @decyphered</pre>`;
  },

  // hidden
  hi()    { return `<span class="ok">hi 👋</span>`; },
  hello() { return `<span class="ok">hello there.</span>`; },
};

const aliases = {
  bio: 'about',
  who: 'whoami',
  resume: 'work',
  job: 'work',
  links: 'contact',
  reach: 'contact',
  ll: 'ls',
  warehouse: 'puckdb',
  '?': 'help',
  'man': 'help',
};

// ============================================================
// Runner
// ============================================================
function run(rawInput) {
  const input = rawInput.trim();
  if (!input) {
    printPromptLine('');
    return;
  }
  history.push(input);
  historyIdx = history.length;

  printPromptLine(input);

  const tokens = input.split(/\s+/);
  let name = tokens[0].toLowerCase();
  const args = tokens.slice(1);
  if (aliases[name]) name = aliases[name];

  const fn = commands[name];
  if (!fn) {
    printOut(`<span class="err">${escapeHtml(name)}: command not found</span><br><span class="sub">// try <span class="k">help</span></span>`);
    return;
  }
  const out = fn(args);
  if (out !== null && out !== undefined) printOut(out);
}

// ============================================================
// Boot sequence
// ============================================================
const bootLines = [
  { text: '[ ok ] mounting /home/decyphered ...', cls: 'ok' },
  { text: '[ ok ] starting humanity.service ...', cls: 'ok' },
  { text: '[ ok ] loading open-source.modules ...', cls: 'ok' },
  { text: '[ ok ] decrypting curiosity ...', cls: 'ok' },
  { text: '[ ok ] session established.', cls: 'ok' },
];

async function boot() {
  // banner
  const banner = el('div', 'out');
  banner.innerHTML = `
<pre class="ascii">┌─────────────────────────────────────────────────────────┐
│  DECYPHERED // personal terminal                        │
│  open systems · shared knowledge · accessible tools     │
└─────────────────────────────────────────────────────────┘</pre>`;
  appendBefore(banner);

  // boot lines
  for (const line of bootLines) {
    await wait(110);
    const d = el('div', 'out');
    d.innerHTML = `<span class="${line.cls}">${line.text}</span>`;
    appendBefore(d);
  }
  await wait(180);

  // auto-run whoami
  printPromptLine('whoami');
  await wait(120);
  printOut(commands.whoami());

  // hint
  const hint = el('div', 'out');
  hint.innerHTML = `<span class="sub">// type <span class="k">help</span> or click a section in the nav. ↑/↓ for history, tab autocompletes.</span>`;
  appendBefore(hint);
}

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

// ============================================================
// Input handling
// ============================================================
cmdInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    const v = cmdInput.value;
    cmdInput.value = '';
    run(v);
  } else if (e.key === 'ArrowUp') {
    if (history.length) {
      historyIdx = Math.max(0, historyIdx - 1);
      cmdInput.value = history[historyIdx] || '';
      e.preventDefault();
    }
  } else if (e.key === 'ArrowDown') {
    if (history.length) {
      historyIdx = Math.min(history.length, historyIdx + 1);
      cmdInput.value = history[historyIdx] || '';
      e.preventDefault();
    }
  } else if (e.key === 'Tab') {
    e.preventDefault();
    const v = cmdInput.value;
    const allNames = [...Object.keys(commands), ...Object.keys(aliases), ...Object.keys(files)];
    const matches = allNames.filter(n => n.startsWith(v));
    if (matches.length === 1) cmdInput.value = matches[0];
    else if (matches.length > 1) {
      printPromptLine(v);
      printOut(matches.map(m => `<span style="margin-right: 14px">${m}</span>`).join(''));
      cmdInput.focus();
    }
  } else if (e.key === 'l' && (e.ctrlKey || e.metaKey)) {
    e.preventDefault();
    commands.clear();
  }
});

// keep focus glued to the input when clicking terminal area
term.addEventListener('click', (e) => {
  if (e.target.tagName === 'A' || e.target.closest('a')) return;
  cmdInput.focus();
});

// nav buttons: run command
function bindCmdEls(root = document) {
  root.querySelectorAll('[data-cmd]').forEach(b => {
    if (b.__bound) return;
    b.__bound = true;
    b.addEventListener('click', (e) => {
      e.preventDefault();
      const cmd = b.dataset.cmd;
      navBtns.forEach(n => n.classList.toggle('active', n.dataset.cmd === cmd));
      run(cmd);
      cmdInput.focus();
    });
  });
}
bindCmdEls();

// ============================================================
// Tweaks
// ============================================================
const fab = document.getElementById('fab');
const tweaksPanel = document.getElementById('tweaks');
const tweaksClose = document.getElementById('tweaksClose');
fab.addEventListener('click', () => tweaksPanel.classList.toggle('open'));
tweaksClose.addEventListener('click', () => tweaksPanel.classList.remove('open'));

function setAccent(c) {
  document.documentElement.style.setProperty('--accent', c);
  // derive supporting colors
  const rgb = hexToRgb(c);
  if (rgb) {
    const set = (name, a) => document.documentElement.style.setProperty(name, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a})`);
    set('--accent-soft', 0.55);
    set('--accent-dim', 0.28);
    set('--accent-faint', 0.10);
    set('--accent-glow', 0.35);
    set('--grid', 0.045);
  }
  document.querySelectorAll('#swatches .swatch').forEach(s => {
    s.setAttribute('aria-pressed', s.dataset.c === c ? 'true' : 'false');
  });
  document.querySelector('meta[name="theme-color"]').setAttribute('content', '#02080d');
}
function hexToRgb(hex) {
  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return m ? { r: parseInt(m[1],16), g: parseInt(m[2],16), b: parseInt(m[3],16) } : null;
}

document.querySelectorAll('#swatches .swatch').forEach(s => {
  s.addEventListener('click', () => setAccent(s.dataset.c));
});

const scanToggle = document.getElementById('scanToggle');
function syncScanToggle() {
  const on = document.body.dataset.scanlines === 'on';
  scanToggle.textContent = on ? 'on' : 'off';
  scanToggle.setAttribute('aria-pressed', on ? 'true' : 'false');
}
scanToggle.addEventListener('click', () => {
  const on = document.body.dataset.scanlines !== 'on';
  document.body.dataset.scanlines = on ? 'on' : 'off';
  syncScanToggle();
});

const densityToggle = document.getElementById('densityToggle');
function syncDensity() {
  const c = document.body.dataset.density === 'compact';
  densityToggle.textContent = c ? 'compact' : 'comfy';
  densityToggle.setAttribute('aria-pressed', c ? 'true' : 'false');
}
densityToggle.addEventListener('click', () => {
  const c = document.body.dataset.density === 'compact';
  document.body.dataset.density = c ? 'comfy' : 'compact';
  syncDensity();
});
syncDensity();

document.getElementById('replayBoot').addEventListener('click', () => {
  commands.clear();
  boot();
});

// ============================================================
// Go
// ============================================================
window.addEventListener('load', () => {
  // focus only on desktop to avoid mobile keyboard popping immediately
  if (window.matchMedia('(min-width: 900px)').matches) {
    cmdInput.focus();
  }
  boot();
});