tricu

io-terminal-view.ts (4924B)

---

 import { Terminal, type Reply } from './io-terminal.js';
 import type { Event } from './io-events.js';
 // One identity-bound UI per run. Callbacks enqueue cloneable replies/stop requests;
 // they must not synchronously re-enter this widget or throw.
 export function terminalView(parent: HTMLElement, run: string, reply: (value: Reply) => void, stop: () => void) {
   const terminal = new Terminal(run), doc = parent.ownerDocument;
   const root = doc.createElement('section'), status = doc.createElement('p');
   const outputs = ['output', 'error'].map(name => {
     const section = doc.createElement('section'), title = doc.createElement('h4'); title.textContent = name === 'output' ? 'Standard output' : 'Standard error';
     const text = doc.createElement('pre'), details = doc.createElement('details'), summary = doc.createElement('summary'), hex = doc.createElement('pre');
     summary.textContent = 'Exact bytes (hexadecimal)'; details.append(summary, hex); section.append(title, text, details); root.append(section);
     text.dataset.stream = name; hex.dataset.hex = name;
     return { text, hex };
   });
   let form = doc.createElement('form'), clearInput = () => {}, waitingId: number | undefined;
   const stopping = doc.createElement('button');
   stopping.textContent = 'Stop (cancel and wait for cleanup)'; stopping.type = 'button';
   root.append(form, stopping, status); parent.append(root);
   let stopped = false, finished = false;
   const onStop = () => { if (stopped || finished) return; stopped = true; stopping.disabled = true; status.textContent = 'Cancelling; waiting for cleanup…'; stop(); };
   stopping.addEventListener('click', onStop);
   function inputView(): void {
     const wait = terminal.waiting;
     if (wait?.id === waitingId) { form.hidden = !wait; return; }
     clearInput();
     const fresh = doc.createElement('form'); form.replaceWith(fresh); form = fresh; form.hidden = !wait; waitingId = wait?.id;
     if (!wait) return;
     const label = doc.createElement('label'), input = doc.createElement('input'), send = doc.createElement('button'), eof = doc.createElement('button');
     label.textContent = 'One line, at most 256 Unicode scalars (Send appends LF)'; input.maxLength = 512; label.append(input);
     send.textContent = 'Send'; send.type = 'submit'; eof.textContent = 'End input (EOF)'; eof.type = 'button';
     form.append(label, send, eof);
     function submit(end: boolean): void {
       const result = end ? terminal.endInput(wait!.run, wait!.id) : terminal.line(wait!.run, wait!.id, input.value);
       if (!result) { status.textContent = 'Enter at most 256 Unicode scalars without CR or LF.'; return; }
       render(); reply(result);
     }
     const onSubmit = (event: SubmitEvent) => { event.preventDefault(); submit(false); }, onEOF = () => submit(true);
     form.addEventListener('submit', onSubmit); eof.addEventListener('click', onEOF);
     const owned = form;
     clearInput = () => { owned.removeEventListener('submit', onSubmit); eof.removeEventListener('click', onEOF); input.value = ''; };
   }
   function render(): void {
     const snapshot = terminal.output.snapshot();
     [snapshot.output, snapshot.error].forEach((view, index) => {
       const target = outputs[index]!; target.text.replaceChildren(); target.hex.textContent = view.hex;
       for (const token of view.tokens) {
         if (token.kind === 'text') target.text.append(doc.createTextNode(token.text));
         else {
           const span = doc.createElement('mark'); span.dataset.byteReason = token.reason;
           span.title = `${token.reason} UTF-8 bytes at stream offset ${token.offset}; see exact hex view`;
           span.textContent = token.bytes.map(b => `\\x${b.toString(16).padStart(2, '0')}`).join(''); target.text.append(span);
         }
       }
     });
     inputView();
     if (!stopped) status.textContent = terminal.waiting ? 'Waiting for a line or explicit EOF.' : 'Running…';
   }
   render();
   return {
     root,
     handle(event: Event): void {
       if (finished) throw new Error('terminal view retired');
       const result = terminal.handle(event);
       // Physically hide/clear an abandoned input BEFORE acknowledging cancel.
       render(); if (result) reply(result);
     },
     finish(): void {
       terminal.finish(); finished = true; render();
       clearInput(); stopping.removeEventListener('click', onStop);
       form.remove(); stopping.disabled = true; status.textContent = 'Settled.';
     },
     // Fatal runtime loss/navigation is NOT a physical cleanup acknowledgement.
     // Retire DOM callbacks without fabricating a settled interpreter outcome.
     abandon(): void {
       if (finished) return;
       finished = true; clearInput(); form.remove();
       stopping.removeEventListener('click', onStop); stopping.disabled = true;
       status.textContent = 'Runtime lost; cleanup was not acknowledged.';
     },
     snapshot: () => terminal.output.snapshot()
   };
 }