tricu

io-v2-terminal-view.js (5544B)

---

 import { Terminal } from './io-v2-terminal.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, run, reply, stop) {
     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;
     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() {
         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) {
             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) => { 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() {
         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) {
             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() {
             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() {
             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()
     };
 }