import { AccelerationStore, DisplacementStore } from "./analysis/acceleration.ts";
import { Movie, MoviePlayer, DEFAULT_MOVIE_BUDGET, movieEvery } from "./analysis/movie.ts";
import { Stft, bandSummary } from "./analysis/spectrogram.ts";
import { ChatClient, type AppApi } from "./chat/client.ts";
import { ChatPanel } from "./ui/chatPanel.ts";
import { Player, encodeWav, scaleForPlayback } from "./audio/player.ts";
import { PRESETS } from "./config/presets.ts";
import type { SimulationConfig } from "./config/schema.ts";
import { configToYaml, parseConfigYaml, type Issue } from "./config/yaml.ts";
import { CpuSimulator } from "./cpu/simulator.ts";
import { GpuSimulator } from "./gpu/simulator.ts";
import { readCymsim, writeCymsim, type CymsimRun, type H5Module } from "./io/cymsimFile.ts";
import { patchEnergy } from "./model/exciter.ts";
import { DECIMATION_SPAN } from "./model/radiation.ts";
import { buildSetup, type Setup } from "./model/setup.ts";
import { dispEveryFor, type BackendOptions, type ChunkResult, type Diagnostics, type SimulatorBackend } from "./model/simulator.ts";
import type { FrequencyScale } from "./ui/spectrogramView.ts";
import { Runner } from "./run.ts";
import { YamlEditor } from "./ui/editor.ts";
import { ConfigForm } from "./ui/form.ts";
import { PlateView } from "./ui/plateView.ts";
import { Readouts, formatSummary } from "./ui/readouts.ts";
import { SpectrogramView } from "./ui/spectrogramView.ts";

const APP_VERSION = "0.1.0";
const $ = <T extends HTMLElement>(id: string) => document.getElementById(id) as T;
const params = new URLSearchParams(location.search);

// ---------------------------------------------------------------- WebGPU device
let device: GPUDevice | null = null;
if (params.get("backend") !== "cpu" && "gpu" in navigator) {
  try {
    const adapter = await navigator.gpu.requestAdapter({ powerPreference: "high-performance" });
    device = (await adapter?.requestDevice()) ?? null;
  } catch (err) { console.warn("WebGPU unavailable", err); }
}
$("backend").textContent = device ? "backend: WebGPU compute (time loop on the GPU)" : "backend: CPU fallback (no WebGPU); use a coarse mesh and a short duration";

// ---------------------------------------------------------------- config editing (YAML <-> form)
let config: SimulationConfig | null = null;
let issues: Issue[] = [];
const issuesEl = $<HTMLUListElement>("issues");
function showIssues() {
  issuesEl.replaceChildren();
  if (!issues.length) { const li = document.createElement("li"); li.className = "ok"; li.textContent = "configuration OK"; issuesEl.appendChild(li); return; }
  for (const i of issues) { const li = document.createElement("li"); li.innerHTML = `<code>${i.path || "document"}</code>: ${i.message}`; issuesEl.appendChild(li); }
}
const presetSel = $<HTMLSelectElement>("preset");
for (const p of PRESETS) { const o = document.createElement("option"); o.value = p.id; o.textContent = p.name; presetSel.appendChild(o); }
const initialPreset = PRESETS.find((p) => p.id === params.get("preset")) ?? PRESETS[0];
presetSel.value = initialPreset.id;

let form: ConfigForm;
function fromYaml(text: string) {
  const r = parseConfigYaml(text);
  issues = r.issues;
  if (r.config) { config = r.config; form.setConfig(config); }
  showIssues();
}
const editor = new YamlEditor($("editor"), initialPreset.yaml, fromYaml);
form = new ConfigForm($("form"), parseConfigYaml(initialPreset.yaml).config!, (cfg) => {
  config = cfg;
  editor.setText(configToYaml(cfg));
  issues = parseConfigYaml(editor.text).issues; showIssues();
});
fromYaml(initialPreset.yaml);
presetSel.onchange = () => { const p = PRESETS.find((x) => x.id === presetSel.value)!; editor.setText(p.yaml); fromYaml(p.yaml); };
$("import").onclick = () => $<HTMLInputElement>("file").click();
$<HTMLInputElement>("file").onchange = async (ev) => {
  const file = (ev.target as HTMLInputElement).files?.[0];
  if (!file) return;
  const text = await file.text();
  editor.setText(text); fromYaml(text);
  (ev.target as HTMLInputElement).value = "";
};
function download(blob: Blob, name: string) {
  const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = name; a.click();
  setTimeout(() => URL.revokeObjectURL(a.href), 1000);
}
$("download-yaml").onclick = () => download(new Blob([editor.text], { type: "text/yaml" }), `${config?.output.prefix ?? "cymbal"}.yaml`);
for (const b of document.querySelectorAll<HTMLButtonElement>(".tabs button")) {
  b.onclick = () => {
    for (const x of document.querySelectorAll<HTMLButtonElement>(".tabs button")) x.classList.toggle("active", x === b);
    for (const t of document.querySelectorAll<HTMLElement>(".tab")) t.classList.toggle("hidden", t.id !== `tab-${b.dataset.tab}`);
  };
}

// ---------------------------------------------------------------- views
const plate = new PlateView($("plate"), device);
const specView = new SpectrogramView($("spectrogram"));
const readouts = new Readouts($("readouts"));
const player = new Player();
const exag = $<HTMLInputElement>("exag");
const applyExag = () => { plate.exaggeration = Math.pow(10, Number(exag.value)); $("exag-text").textContent = `x${plate.exaggeration.toFixed(0)}`; plate.render(); };
exag.oninput = applyExag; applyExag();
$("reset-view").onclick = () => plate.resetView();
const redraw = () => { plate.render(); specView.draw(); };
new ResizeObserver(redraw).observe($("plate"));
new ResizeObserver(redraw).observe($("spectrogram"));

// splitters: drag to set the CSS variable that sizes the neighbouring pane
for (const sp of document.querySelectorAll<HTMLElement>(".splitter")) {
  const target = $(sp.dataset.target!), cssVar = sp.dataset.var!, vertical = sp.classList.contains("vertical"), invert = sp.dataset.invert === "1";
  sp.addEventListener("pointerdown", (e) => {
    e.preventDefault();
    sp.setPointerCapture(e.pointerId); sp.classList.add("active");
    const start = vertical ? e.clientX : e.clientY, size0 = vertical ? target.getBoundingClientRect().width : target.getBoundingClientRect().height;
    const move = (ev: PointerEvent) => {
      const delta = (vertical ? ev.clientX : ev.clientY) - start;
      const size = Math.max(60, size0 + (invert ? -delta : delta));
      document.documentElement.style.setProperty(cssVar, `${size}px`);
    };
    const up = () => { sp.classList.remove("active"); sp.removeEventListener("pointermove", move); sp.removeEventListener("pointerup", up); redraw(); };
    sp.addEventListener("pointermove", move); sp.addEventListener("pointerup", up);
  });
}

// ---------------------------------------------------------------- run state
let setup: Setup | null = null;
let runner: Runner | null = null;
let runState: "idle" | "setup" | "running" | "paused" | "done" | "stopped" = "idle";
let lastDiagnostics: Diagnostics | null = null;
let lastProgress = { done: 0, wall: 0 };
let backend: SimulatorBackend | null = null;
let backendOpts: BackendOptions = {};
let front = new Float32Array(0), back = new Float32Array(0), frontier = 0, pushed = 0;
let stft: Stft | null = null;
// the records that go into a .cymsim file
let accStore: AccelerationStore | null = null;
let dispStore: DisplacementStore | null = null;
let energyRows: number[][] = [];
let wallBefore = 0;                       // wall time of earlier sessions of a resumed run
let loaded: CymsimRun | null = null;      // a loaded file whose run has not been continued
const signalSel = $<HTMLSelectElement>("signal");
const signal = () => {
  const out = new Float32Array(frontier);
  if (signalSel.value === "rayleigh") out.set(front.subarray(0, frontier));
  else for (let i = 0; i < frontier; i++) out[i] = front[i] - back[i];
  return out;
};
function rebuildSpectrogram() {
  if (!setup) return;
  stft = new Stft(setup.fs, 1024, 256); pushed = 0;
  specView.reset(stft, setup.config.numerics.duration);
  pushSpectrogram();
}
function pushSpectrogram() {
  if (!stft || !setup) return;
  if (frontier > pushed) { const s = signal(); stft.push(s.subarray(pushed, frontier)); pushed = frontier; }
  specView.frontierTime = frontier / setup.fs;
  specView.update();
  const c = stft.centroid.length ? stft.centroid[stft.centroid.length - 1] : 0;
  $("spec-info").textContent = `${stft.columns.length} columns, centroid ${c.toFixed(0)} Hz`;
}
signalSel.onchange = rebuildSpectrogram;
const specScale = $<HTMLSelectElement>("spec-scale"), specFmax = $<HTMLSelectElement>("spec-fmax");
specScale.onchange = () => specView.setScale(specScale.value as FrequencyScale);
specFmax.onchange = () => specView.setMaxFrequency(Number(specFmax.value));
specView.setScale(specScale.value as FrequencyScale);

// ---- displacement movie
let movie: Movie | null = null;
let moviePlayer: MoviePlayer | null = null;
const frameBuf = { w: new Float32Array(0) };
const movieFps = $<HTMLInputElement>("movie-fps"), moviePlay = $<HTMLButtonElement>("movie-play"), movieStop = $<HTMLButtonElement>("movie-stop");
const slowdown = $<HTMLInputElement>("slowdown"), moviePos = $<HTMLInputElement>("movie-pos"), movieInfo = $("movie-info");
const slowdownFactor = () => Math.round(Math.pow(10, Number(slowdown.value)));
function showFrame(index: number, time: number) {
  if (!movie || !movie.length) return;
  if (frameBuf.w.length !== movie.nodes) frameBuf.w = new Float32Array(movie.nodes);
  plate.setDisplacement(movie.read(index, frameBuf.w));
  moviePos.value = String(movie.duration > 0 ? time / movie.duration : 0);
  movieInfo.textContent = `${(time * 1e3).toFixed(1)} ms of ${(movie.duration * 1e3).toFixed(0)} ms  ·  frame ${index + 1}/${movie.length}  ·  x${slowdownFactor()} slower${movie.full ? "  ·  budget reached" : ""}`;
}
function updateMovieUi() {
  const have = !!movie && movie.length > 1;
  moviePlay.disabled = !have; moviePos.disabled = !have;
  movieStop.disabled = !(moviePlayer?.playing ?? false);
  $("slowdown-text").textContent = `x${slowdownFactor()}`;
  if (!have && movie) movieInfo.textContent = `${movie.length} frames`;
}
slowdown.oninput = () => { if (moviePlayer) moviePlayer.slowdown = slowdownFactor(); updateMovieUi(); if (movie?.length) showFrame(movie.indexAtTime(moviePlayer?.time ?? 0), moviePlayer?.time ?? 0); };
moviePlay.onclick = () => { if (!moviePlayer) return; moviePlayer.slowdown = slowdownFactor(); moviePlayer.play(); updateMovieUi(); };
movieStop.onclick = () => { moviePlayer?.stop(); updateMovieUi(); };
moviePos.oninput = () => { if (!movie || !moviePlayer) return; moviePlayer.stop(); moviePlayer.seek(Number(moviePos.value) * movie.duration); updateMovieUi(); };
updateMovieUi();

const startBtn = $<HTMLButtonElement>("start"), pauseBtn = $<HTMLButtonElement>("pause"), stopBtn = $<HTMLButtonElement>("stop"), resumeBtn = $<HTMLButtonElement>("resume");
const playBtn = $<HTMLButtonElement>("play"), stopAudioBtn = $<HTMLButtonElement>("stop-audio"), wavBtn = $<HTMLButtonElement>("download-wav");
const exportBtn = $<HTMLButtonElement>("export-cymsim"), loadBtn = $<HTMLButtonElement>("load-cymsim");
const progress = $<HTMLProgressElement>("progress");

/** Memory the acceleration record of a run would take, against what this device can be expected to hold. */
function recordBudget(nSamples: number, nodes: number): { bytes: number; limit: number } {
  const bytes = AccelerationStore.estimateBytes(nSamples, nodes);
  const deviceGb = (navigator as unknown as { deviceMemory?: number }).deviceMemory;
  const limit = deviceGb ? Math.max(1e9, 0.5 * deviceGb * 1e9) : 2e9;
  return { bytes, limit };
}

const fmtBytes = (b: number) => (b >= 1e9 ? `${(b / 1e9).toFixed(2)} GB` : `${(b / 1e6).toFixed(0)} MB`);

function setRunButtons(running: boolean) {
  startBtn.disabled = running; presetSel.disabled = running; loadBtn.disabled = running;
  pauseBtn.disabled = !running; stopBtn.disabled = !running;
  resumeBtn.disabled = running || !(loaded?.state && !loaded.complete && loaded.state.kind === (device ? "gpu" : "cpu"));
}

/** Start a run of the current configuration, or continue the loaded file's run when ``resumeFrom`` is given. */
async function start(resumeFrom: CymsimRun | null = null) {
  if (!resumeFrom && (!config || issues.length)) { readouts.log("fix the configuration issues first"); return; }
  setRunButtons(true); runState = "setup";
  if (!resumeFrom) readouts.clearLog();
  const cfg = resumeFrom ? structuredClone(resumeFrom.config) : structuredClone(config!);
  const fail = (msg: string) => { readouts.log(msg); runState = resumeFrom ? "stopped" : "idle"; setRunButtons(false); };
  if (!resumeFrom || !setup) {
    try {
      readouts.log("building the set-up ...");
      setup = await buildSetup(cfg, async (phase) => { readouts.log(`  ${phase}`); await new Promise((r) => setTimeout(r, 0)); });
    } catch (err) { fail(`set-up failed: ${(err as Error).message}`); return; }
    $("summary").textContent = formatSummary(setup.summary);
    readouts.log(`set-up done in ${setup.summary.setupSeconds.toFixed(1)} s: ${setup.summary.nodes} nodes, ${setup.summary.substeps} sub-steps per sample, ${setup.summary.nSteps} steps`);
    if (setup.summary.slopeWarning) readouts.log(`warning: max slope ${setup.summary.maxSlope.toFixed(2)} exceeds the shallow-shell bound ${cfg.profile.max_slope}`);
  }
  const N = setup.mesh.n;
  // ---- records: the acceleration record is opt-in and must fit in memory
  const recording = resumeFrom ? resumeFrom.acceleration !== null : cfg.output.record_acceleration;
  if (recording) {
    const { bytes, limit } = recordBudget(setup.nSamples, N);
    if (bytes > limit) { fail(`refusing to start: the acceleration record of this run needs ${fmtBytes(bytes)} in memory, above this device's limit of ${fmtBytes(limit)}; shorten the duration, coarsen the mesh, or turn output.record_acceleration off`); return; }
    readouts.log(`acceleration record: ${setup.nSamples} samples x ${N} nodes, int16, ${fmtBytes(bytes)} in memory${bytes > 1e9 ? "  (warning: above 1 GB)" : ""}`);
  }
  const dispEvery = dispEveryFor(setup.fs, cfg.output.displacement_rate);
  backend?.dispose();
  const fps = Math.max(0, Number(movieFps.value) || 0);
  const every = fps > 0 ? movieEvery(setup.fs, fps) : 0;
  backendOpts = { movieEvery: every, dispEvery, recordAcceleration: recording };
  try {
    backend = device ? new GpuSimulator(device, setup, 8192, backendOpts) : new CpuSimulator(setup, backendOpts);
    if (resumeFrom) await backend.importState(resumeFrom.state!);
  } catch (err) { fail(`could not create the simulator: ${(err as Error).message}`); backend = null; return; }
  moviePlayer?.stop();
  if (!resumeFrom) {
    movie = every > 0 ? new Movie(N, setup.fs, { fps, budgetBytes: DEFAULT_MOVIE_BUDGET }) : null;
    moviePlayer = movie ? new MoviePlayer(movie, showFrame) : null;
    if (movie) readouts.log(`movie: capturing every ${every} samples (${(setup.fs / every).toFixed(0)} fps of simulated time, ${((setup.nSamples / every) * N * 2 / 1e6).toFixed(0)} MB at full duration)`);
    front = new Float32Array(setup.nSamples); back = new Float32Array(setup.nSamples); frontier = 0;
    accStore = recording ? new AccelerationStore(N, setup.fs) : null;
    dispStore = dispEvery > 0 ? new DisplacementStore(N, setup.fs / dispEvery) : null;
    energyRows = []; wallBefore = 0;
    rebuildSpectrogram();
    player.stop(); playBtn.disabled = true; wavBtn.disabled = true;
  } else {
    // keep the loaded signals and records; the movie is rebuilt from the file's displacement frames on load
    if (every > 0 && (!movie || movie.length === 0)) { movie = new Movie(N, setup.fs, { fps, budgetBytes: DEFAULT_MOVIE_BUDGET }); moviePlayer = new MoviePlayer(movie, showFrame); }
    wallBefore = resumeFrom.wallTime;
    readouts.log(`continuing from ${(resumeFrom.nStepsDone * resumeFrom.dt).toFixed(3)} s`);
  }
  loaded = null;
  updateMovieUi();
  plate.setMesh(setup.mesh, setup.shell.z0Node, setup.shell.hE.reduce((a, b) => Math.min(a, b), Infinity), backend instanceof GpuSimulator ? backend.stateBuffer : null);
  $("plate-info").textContent = `${N} nodes, ${plate.usesWebGPU ? "WebGPU" : "2D"} view`;
  exportBtn.disabled = false;
  pauseBtn.textContent = "Pause";
  const kinds = setup.patches.map((p) => p.hit.exciter.kind);
  let lastPlate = 0;
  runState = "running"; lastDiagnostics = null; lastProgress = { done: backend.samplesDone, wall: 0 };
  const thisSetup = setup;
  runner = new Runner(backend, setup, {
    onChunk(res: ChunkResult) {
      const n = res.pressureFront.length;
      if (n) {
        front.set(res.pressureFront.subarray(0, Math.min(n, thisSetup.nSamples - res.firstSample)), res.firstSample);
        back.set(res.pressureBack.subarray(0, Math.min(n, thisSetup.nSamples - res.firstSample)), res.firstSample);
        frontier = Math.min(thisSetup.nSamples, res.firstSample + n);
      }
      if (accStore && res.acceleration) {
        try { accStore.push(res.acceleration, Math.min(n, thisSetup.nSamples - res.firstSample), res.firstSample); }
        catch (err) { readouts.log(`acceleration record stopped: ${(err as Error).message}`); accStore = null; }
      }
      if (dispStore) res.dispFrames.forEach((w, i) => { const t = res.dispSamples[i] / thisSetup.fs; if (t <= thisSetup.config.numerics.duration) dispStore!.push(w, t); });
      if (movie) {
        for (let f = 0; f < res.frames.length; f++) movie.push(res.frames[f], res.frameSamples[f]);
        if (!moviePlayer?.playing) updateMovieUi();
      }
      pushSpectrogram();
      playBtn.disabled = frontier === 0; wavBtn.disabled = frontier === 0;
      if (performance.now() - lastPlate > 100 && !moviePlayer?.playing) {
        lastPlate = performance.now();
        if (backend instanceof GpuSimulator) plate.render(); else void backend!.displacement().then((w) => plate.setDisplacement(w));
      }
    },
    onDiagnostics(d: Diagnostics) {
      lastDiagnostics = d; readouts.setDiagnostics(d, kinds);
      energyRows.push([d.time, d.kinetic, d.membrane, d.bending, d.exciters, d.maxWoverH]);
      if (!Number.isFinite(d.kinetic + d.membrane + d.bending)) { readouts.log("energy is not finite: the run has blown up (lower numerics.cfl_safety)"); runner?.stop(); }
    },
    onProgress(done, wall) {
      lastProgress = { done, wall };
      progress.value = done / thisSetup.nSamples;
      const audio = done / thisSetup.fs;
      $("progress-text").textContent = `${audio.toFixed(2)} / ${thisSetup.config.numerics.duration.toFixed(2)} s  (${wall.toFixed(0)} s wall, ${(audio / Math.max(wall, 1e-3)).toFixed(3)}x real time)`;
    },
    onDone(stopped) {
      runState = stopped ? "stopped" : "done";
      if (movie && movie.length) { plate.useOwnState(); moviePlayer!.seek(0); }
      updateMovieUi();
      readouts.log(stopped ? "stopped" : `done: ${frontier} samples of pressure (the last ${DECIMATION_SPAN / 2} samples of the decimation window are not produced)${accStore ? `; acceleration record ${fmtBytes(accStore.bytes)}` : ""}`);
      setRunButtons(false);
      void backend?.diagnostics().then((d) => { lastDiagnostics = d; readouts.setDiagnostics(d, kinds); });
    },
  });
  void runner.run();
}
startBtn.onclick = () => void start();
resumeBtn.onclick = () => { if (loaded) void start(loaded); };
function togglePause(): string {
  if (!runner || runState !== "running" && runState !== "paused") return "no run in progress";
  if (runner.isPaused) { runner.unpause(); pauseBtn.textContent = "Pause"; runState = "running"; return "continued"; }
  runner.pause(); pauseBtn.textContent = "Continue"; runState = "paused"; return "paused";
}
pauseBtn.onclick = () => { togglePause(); };
stopBtn.onclick = () => runner?.stop();

// ---------------------------------------------------------------- .cymsim files
// h5wasm (libhdf5 in WebAssembly, about 1 MB compressed) is loaded on first use; its in-memory file system holds the file image
let h5Promise: Promise<{ h5: H5Module; FS: any }> | null = null;
function loadH5(): Promise<{ h5: H5Module; FS: any }> {
  h5Promise ??= import("h5wasm").then(async (m) => { const h5 = m.default as unknown as H5Module; const { FS } = await h5.ready; return { h5, FS }; });
  return h5Promise;
}

/** The run so far as the content of a .cymsim file. */
async function currentRun(): Promise<CymsimRun> {
  if (!setup || !backend) throw new Error("no run");
  const s = setup, { mesh, shell } = s, cfg = s.config;
  const state = await backend.exportState();
  const d = lastDiagnostics ?? (await backend.diagnostics());
  const unbaffled = new Float32Array(frontier);
  for (let i = 0; i < frontier; i++) unbaffled[i] = front[i] - back[i];
  return {
    yaml: configToYaml(cfg), config: cfg,
    mesh: { xy: mesh.xy, z0: shell.z0Node, thickness: shell.hNode, normal: shell.normalNode, triangles: Int32Array.from(mesh.tri), area: mesh.area, boundary: Int32Array.from(mesh.boundary), nNodes: mesh.n, nElements: mesh.e },
    listener: { rFront: s.radiation.rFront, rBack: s.radiation.rBack },
    fs: s.fs, dt: s.dt, substeps: s.substeps, duration: cfg.numerics.duration, nSamples: s.nSamples, nStepsDone: state.step,
    complete: runState === "done", wallTime: wallBefore + lastProgress.wall, decimationSpan: DECIMATION_SPAN,
    audioBaffled: front.slice(0, frontier), audioUnbaffled: unbaffled,
    acceleration: accStore, taps: accStore ? s.radiation.taps : null,
    displacement: dispStore ? { rate: dispStore.rate, times: dispStore.times, frames: dispStore.frames } : null,
    energy: energyRows,
    hits: d.hits.map((h, k) => { const p = s.patches[k]; return { time: p.time, kind: p.hit.exciter.kind, peak_force: h.peakForce, contact_time: h.contactTime, rebound_velocity: h.velocity, energy_in: patchEnergy(p), energy_out: 0.5 * p.mass * h.velocity ** 2 }; }),
    state: runState === "done" ? null : state, creator: `cymsimweb ${APP_VERSION}`, created: "",
  };
}

async function exportCymsim(): Promise<string> {
  if (!setup || !backend) return "no run to export";
  const wasRunning = runState === "running";
  if (wasRunning && runner) { runner.pause(); await runner.waitPaused(); }
  exportBtn.disabled = true;
  try {
    readouts.log("building the .cymsim file ...");
    const [{ h5, FS }, run] = [await loadH5(), await currentRun()];
    const path = "/export.cymsim";
    writeCymsim(h5, path, run, `cymsimweb ${APP_VERSION}`);
    const bytes: Uint8Array = FS.readFile(path);
    FS.unlink(path);
    const name = `${setup.config.output.prefix}.cymsim`;
    download(new Blob([bytes as BlobPart], { type: "application/x-hdf5" }), name);
    const what = `${run.audioBaffled.length} audio samples${run.acceleration ? `, ${run.acceleration.nSamples} acceleration samples` : ""}${run.displacement ? `, ${run.displacement.frames.length} displacement frames` : ""}${run.state ? ", integrator state" : ""}`;
    readouts.log(`exported ${name} (${fmtBytes(bytes.byteLength)}: ${what}${run.complete ? "" : "; partial run"})`);
    return `exported ${name} (${fmtBytes(bytes.byteLength)})`;
  } catch (err) {
    readouts.log(`export failed: ${(err as Error).message}`); return `export failed: ${(err as Error).message}`;
  } finally {
    exportBtn.disabled = false;
    if (wasRunning && runner) runner.unpause();
  }
}
exportBtn.onclick = () => void exportCymsim();

async function loadCymsim(file: File): Promise<string> {
  const { h5, FS } = await loadH5();
  const path = "/load.cymsim";
  let run: CymsimRun;
  try {
    FS.writeFile(path, new Uint8Array(await file.arrayBuffer()));
    run = readCymsim(h5, path, (y) => { const r = parseConfigYaml(y); if (!r.config) throw new Error(r.issues[0]?.message ?? "bad YAML"); return r.config; });
  } catch (err) { readouts.log(`could not load ${file.name}: ${(err as Error).message}`); return `could not load: ${(err as Error).message}`; }
  finally { try { FS.unlink(path); } catch { /* not written */ } }
  runner?.stop(); backend?.dispose(); backend = null; runner = null;
  readouts.clearLog();
  readouts.log(`loaded ${file.name}: written by ${run.creator} on ${run.created}, ${run.complete ? "complete" : "partial"} run of ${(run.nStepsDone * run.dt).toFixed(3)} of ${run.duration.toFixed(3)} s`);
  editor.setText(run.yaml); fromYaml(run.yaml);
  runState = "setup"; setRunButtons(true);
  try {
    setup = await buildSetup(run.config, async (phase) => { readouts.log(`  ${phase}`); await new Promise((r) => setTimeout(r, 0)); });
  } catch (err) { readouts.log(`set-up of the loaded configuration failed: ${(err as Error).message}`); runState = "idle"; setRunButtons(false); return "set-up failed"; }
  const s = setup, N = s.mesh.n;
  $("summary").textContent = formatSummary(s.summary);
  if (N !== run.mesh.nNodes || s.substeps !== run.substeps) readouts.log(`warning: the file's mesh (${run.mesh.nNodes} nodes, ${run.substeps} sub-steps) differs from this app's set-up (${N} nodes, ${s.substeps} sub-steps); the file was probably written by another version`);
  // signals
  front = new Float32Array(s.nSamples); back = new Float32Array(s.nSamples);
  frontier = Math.min(s.nSamples, run.audioBaffled.length, run.audioUnbaffled.length);
  front.set(run.audioBaffled.subarray(0, frontier));
  for (let i = 0; i < frontier; i++) back[i] = run.audioBaffled[i] - run.audioUnbaffled[i];
  rebuildSpectrogram();
  player.stop(); playBtn.disabled = frontier === 0; wavBtn.disabled = frontier === 0;
  // records
  accStore = run.acceleration && run.acceleration.nodes === N ? run.acceleration : null;
  dispStore = null;
  if (run.displacement) { dispStore = new DisplacementStore(N, run.displacement.rate); run.displacement.frames.forEach((w, i) => dispStore!.push(w, run.displacement!.times[i])); }
  energyRows = run.energy.map((r) => r.slice()); wallBefore = run.wallTime;
  // the displacement frames double as the replay movie
  moviePlayer?.stop();
  if (dispStore && dispStore.frames.length) {
    movie = new Movie(N, s.fs, { fps: dispStore.rate, budgetBytes: DEFAULT_MOVIE_BUDGET });
    dispStore.frames.forEach((w, i) => movie!.push(w, Math.round(dispStore!.times[i] * s.fs)));
    moviePlayer = new MoviePlayer(movie, showFrame);
  } else { movie = null; moviePlayer = null; }
  plate.setMesh(s.mesh, s.shell.z0Node, s.shell.hE.reduce((a, b) => Math.min(a, b), Infinity), null);
  $("plate-info").textContent = `${N} nodes, ${plate.usesWebGPU ? "WebGPU" : "2D"} view`;
  if (movie && movie.length) { moviePlayer!.seek(movie.duration); }
  updateMovieUi();
  // diagnostics
  const kinds = s.patches.map((p) => p.hit.exciter.kind), last = run.energy[run.energy.length - 1];
  if (last) {
    lastDiagnostics = { time: last[0], kinetic: last[1], membrane: last[2], bending: last[3], exciters: last[4], maxWoverH: last[5],
                        hits: run.hits.map((h) => ({ peakForce: h.peak_force, contactTime: h.contact_time, velocity: h.rebound_velocity, height: 0 })) };
    readouts.setDiagnostics(lastDiagnostics, kinds);
  }
  lastProgress = { done: Math.round(run.nStepsDone / run.substeps), wall: 0 };
  progress.value = lastProgress.done / s.nSamples;
  $("progress-text").textContent = `${(lastProgress.done / s.fs).toFixed(2)} / ${run.duration.toFixed(2)} s  (loaded)`;
  const parts = [`${frontier} audio samples`];
  if (accStore) parts.push(`acceleration record ${accStore.nSamples} samples (${fmtBytes(accStore.bytes)})`);
  else if (run.acceleration) parts.push("acceleration record ignored (node count differs)");
  if (dispStore) parts.push(`${dispStore.frames.length} displacement frames at ${dispStore.rate.toFixed(0)} fps`);
  if (run.state) parts.push(`integrator state (${run.state.kind})`);
  readouts.log(`file holds: ${parts.join(", ")}`);
  loaded = run;
  runState = run.complete ? "done" : "stopped";
  setRunButtons(false);
  exportBtn.disabled = true;      // export needs a backend; Resume or Start provides one
  if (!run.complete && run.state) {
    if (run.state.kind !== (device ? "gpu" : "cpu")) readouts.log(`the file's state was written by the ${run.state.kind} backend and cannot be continued on the ${device ? "gpu" : "cpu"} backend`);
    else readouts.log("this partial run can be continued with Resume");
  }
  return `loaded ${file.name}: ${parts.join(", ")}`;
}
loadBtn.onclick = () => $<HTMLInputElement>("file-cymsim").click();
$<HTMLInputElement>("file-cymsim").onchange = async (ev) => {
  const file = (ev.target as HTMLInputElement).files?.[0];
  (ev.target as HTMLInputElement).value = "";
  if (file) await loadCymsim(file);
};

// ---------------------------------------------------------------- playback of the completed portion
const position = $<HTMLInputElement>("position"), timeEl = $("time"), gain = $<HTMLInputElement>("gain"), normalize = $<HTMLInputElement>("normalize");
gain.oninput = () => { player.setGainDb(Number(gain.value)); $("gain-text").textContent = `${gain.value} dB`; };
function tick() {
  if (player.playing && setup) {
    const t = player.position();
    position.value = String(t / setup.config.numerics.duration); timeEl.textContent = `${t.toFixed(3)} s`;
    specView.cursorTime = t; specView.draw();
  }
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
function playFrom(seconds: number): string {
  if (!setup || frontier === 0) return "no audio yet";
  player.setGainDb(Number(gain.value));
  player.play(scaleForPlayback(signal(), normalize.checked), setup.fs, seconds);
  stopAudioBtn.disabled = false;
  return `playing ${signalSel.value} from ${seconds.toFixed(2)} s (${(frontier / setup.fs).toFixed(2)} s available)`;
}
playBtn.onclick = () => { playFrom(Number(position.value) * (setup?.config.numerics.duration ?? 0)); };
player.onEnded = () => {
  // playback reached the end of the available signal: return the position to the start
  stopAudioBtn.disabled = true; position.value = "0"; timeEl.textContent = "0.000 s"; specView.cursorTime = null; specView.draw();
};
stopAudioBtn.onclick = () => { player.stop(); stopAudioBtn.disabled = true; specView.cursorTime = null; specView.draw(); };
position.oninput = () => { if (setup) { const t = Number(position.value) * setup.config.numerics.duration; timeEl.textContent = `${t.toFixed(3)} s`; specView.cursorTime = t; specView.draw(); } };
wavBtn.onclick = () => { if (setup) download(encodeWav(scaleForPlayback(signal(), normalize.checked), setup.fs), `${setup.config.output.prefix}_${signalSel.value}.wav`); };

if (params.get("autostart") === "1") void start();

// ---------------------------------------------------------------- chat with Claude Code through the local bridge
const appApi: AppApi = {
  async getState() {
    const yamlIssues = parseConfigYaml(editor.text).issues;
    let spectrogram: unknown = null;
    if (stft && stft.columns.length) spectrogram = bandSummary(stft);
    return {
      yaml: editor.text, issues: yamlIssues, preset: presetSel.value,
      backend: device ? "webgpu" : "cpu",
      run: {
        state: runState, samplesDone: lastProgress.done, samplesTotal: setup?.nSamples ?? 0,
        audioSeconds: setup ? lastProgress.done / setup.fs : 0, wallSeconds: lastProgress.wall,
        audioAvailableSeconds: setup ? frontier / setup.fs : 0, signal: signalSel.value,
      },
      setup: setup ? formatSummary(setup.summary) : null,
      movie: movie ? { frames: movie.length, fps: movie.fps, simulatedSeconds: movie.duration, megabytes: movie.bytes / 1e6, budgetReached: movie.full, slowdown: slowdownFactor(), playing: moviePlayer?.playing ?? false } : null,
      records: { acceleration: accStore ? { samples: accStore.nSamples, megabytes: accStore.bytes / 1e6 } : null,
                 displacementFrames: dispStore?.frames.length ?? 0, loadedFile: loaded ? { creator: loaded.creator, complete: loaded.complete, resumable: !resumeBtn.disabled } : null },
      spectrogramAxis: { scale: specScale.value, maxFrequencyHz: Number(specFmax.value) || (setup ? setup.fs / 2 : 0) },
      diagnostics: lastDiagnostics ? { time: lastDiagnostics.time, kinetic: lastDiagnostics.kinetic, membrane: lastDiagnostics.membrane, bending: lastDiagnostics.bending,
        exciters: lastDiagnostics.exciters, maxWoverH: lastDiagnostics.maxWoverH,
        hits: lastDiagnostics.hits.map((h, k) => ({ kind: setup?.patches[k].hit.exciter.kind, peakForceN: h.peakForce, contactMs: h.contactTime * 1e3, exciterVelocity: h.velocity })) } : null,
      spectrogram,
    };
  },
  setYaml(text) { editor.setText(text); fromYaml(text); return { issues }; },
  selectPreset(id) {
    const p = PRESETS.find((x) => x.id === id);
    if (!p) return `unknown preset ${id}; known: ${PRESETS.map((x) => x.id).join(", ")}`;
    presetSel.value = id; editor.setText(p.yaml); fromYaml(p.yaml);
    return `loaded preset ${id}`;
  },
  async start() {
    if (runState === "running" || runState === "paused" || runState === "setup") return `a run is already ${runState}`;
    if (!config || issues.length) return `cannot start: ${issues.map((i) => `${i.path}: ${i.message}`).join("; ") || "no configuration"}`;
    void start();
    return "run started; call get_app_state for progress";
  },
  pause() { return togglePause(); },
  stop() { if (!runner || (runState !== "running" && runState !== "paused")) return "no run in progress"; runner.stop(); return "stopping"; },
  play(from) { return playFrom(from); },
  setSignal(s) { if (s !== "unbaffled" && s !== "rayleigh") return "signal must be 'unbaffled' or 'rayleigh'"; signalSel.value = s; rebuildSpectrogram(); return `signal set to ${s}`; },
  playMovie(factor, fromSeconds) {
    if (!movie || movie.length < 2 || !moviePlayer) return "no displacement movie: set a movie frame rate before the run";
    if (factor > 0) { slowdown.value = String(Math.log10(Math.min(Math.max(factor, 2), 10000))); moviePlayer.slowdown = slowdownFactor(); }
    moviePlayer.play(Math.min(Math.max(fromSeconds, 0), movie.duration));
    updateMovieUi();
    return `replaying ${movie.length} frames covering ${(movie.duration * 1e3).toFixed(0)} ms of simulated time at x${slowdownFactor()} slowdown from ${fromSeconds.toFixed(4)} s`;
  },
  setSpectrogramAxis(scale, maxHz) {
    if (scale === "linear" || scale === "log") { specScale.value = scale; specView.setScale(scale); }
    if (maxHz !== undefined) { specFmax.value = String(maxHz); specView.setMaxFrequency(maxHz); }
    return `spectrogram axis: ${specScale.value}, up to ${Number(specFmax.value) || (setup ? setup.fs / 2 : 0)} Hz`;
  },
  setMovieFps(fps) { movieFps.value = String(Math.max(0, Math.round(fps))); return `movie frame rate set to ${movieFps.value} fps of simulated time; it applies to the next run`; },
};
const bridgeUrl = params.get("bridge") ?? "ws://localhost:8765";
const chatEl = $("chat"), chatSplitter = $("chat-splitter"), appEl = $("app");
const chatPanel = new ChatPanel(chatEl, bridgeUrl);
const chat = new ChatClient(bridgeUrl, appApi, (e) => chatPanel.handle(e));
chatPanel.onSend = (t) => chat.sendUser(t); chatPanel.onInterrupt = () => chat.interrupt(); chatPanel.onReset = () => chat.reset();
function showChat(open: boolean) {
  chatEl.classList.toggle("hidden", !open); chatSplitter.classList.toggle("hidden", !open); appEl.classList.toggle("with-chat", open);
  if (open) { chat.connect(); chatPanel.focus(); } else chat.disconnect();
  redraw();
}
$("chat-toggle").onclick = () => showChat(chatEl.classList.contains("hidden"));
chatEl.addEventListener("chat-close", () => showChat(false));
if (params.get("chat") === "1") showChat(true);