@edryslabs/edrys-dev 0.1.2 → 0.3.0

package/dist/origin.js

@@ -1,5 +1,57 @@
-/** Requests from a page of another origin, e.g. a module's own site, are refused. */
-export function sameOrigin(req) {
+import os from 'node:os';
+const WILDCARDS = ['0.0.0.0', '::'];
+/**
+ * The host names a server listening on `host` answers to: this machine's own,
+ * plus every address of its network interfaces when it listens on all of them.
+ * A page that rebinds its own domain to 127.0.0.1 sends that domain instead.
+ */
+export function hostNames(host) {
+    const names = ['localhost', '127.0.0.1', '[::1]'];
+    const add = (address) => names.push(address.includes(':') ? `[${address}]` : address);
+    if (WILDCARDS.includes(host)) {
+        for (const addresses of Object.values(os.networkInterfaces())) {
+            for (const { address } of addresses ?? [])
+                add(address);
+        }
+    }
+    else {
+        add(host);
+    }
+    return [...new Set(names)];
+}
+/** Whether `host` listens on more than this machine's loopback addresses. */
+export function reachable(host) {
+    return !['localhost', '127.0.0.1', '::1', '[::1]'].includes(host);
+}
+// `value` (a Host, or an Origin without its scheme) is one of `names` on this server's port
+function ours(req, names, value) {
+    const port = req.socket.localPort;
+    // browsers leave out the default port
+    return names.some((name) => value === `${name}:${port}` || (port === 80 && value === name));
+}
+/** Refuses requests whose Host header is not one of `names` on this server's port. */
+export function hostGuard(names) {
+    return (req, res, next) => (ours(req, names, req.headers.host) ? next() : res.sendStatus(403));
+}
+/**
+ * Whether a WebSocket upgrade comes from one of edrys-dev's own pages. Browsers
+ * send an Origin with every WebSocket, and let any site open one; a student
+ * tab (127.0.0.1) connects to the owner's address (localhost), so any of
+ * `names` will do, not only the Host.
+ */
+export function ownPage(req, names) {
     const origin = req.headers.origin;
-    return origin === undefined || origin === `http://${req.headers.host}`;
+    return (ours(req, names, req.headers.host) &&
+        typeof origin === 'string' &&
+        origin.startsWith('http://') &&
+        ours(req, names, origin.slice('http://'.length)));
+}
+/**
+ * Posts from edrys-Lite's page on this server only: browsers always send an
+ * Origin with a POST, so one without it is no page of ours (another local user,
+ * another program). Pages of another origin, e.g. a module's own site, are
+ * refused too. Run after hostGuard, which vouches for the Host.
+ */
+export function sameOrigin(req) {
+    return req.headers.origin === `http://${req.headers.host}`;
 }

package/dist/server.js

@@ -6,10 +6,10 @@ import { EventEmitter } from 'node:events';
 import { createRequire } from 'node:module';
 import express from 'express';
 import { unpack } from 'msgpackr';
-import { watchFile, watchModules } from './watch.js';
+import { readSaved, watchFile, watchModules } from './watch.js';
 import { moduleApp } from './modules.js';
-import { sameOrigin } from './origin.js';
-import { Chat, panelFiles, panelScript } from './chat.js';
+import { hostGuard, hostNames, sameOrigin } from './origin.js';
+import { Chat, explain, panelFiles, panelScript } from './chat.js';
 // entries the log keeps, oldest first out
 const LOG_MAX = 300;
 // a body in the log is cut to this many characters of JSON
@@ -50,6 +50,9 @@ export function edrysDist() {
  */
 export async function startDevServer(options) {
     const app = express();
+    // a page that rebinds its own domain to this machine would pass sameOrigin
+    const names = hostNames(options.host);
+    app.use(hostGuard(names));
     const bus = new EventEmitter();
     const clients = new Set();
     let share = null;
@@ -74,7 +77,7 @@ export async function startDevServer(options) {
     app.get('/edrys-dev/lab', async (req, res) => {
         res.json({
             path: options.lab,
-            text: await fs.readFile(options.lab, 'utf8'),
+            text: await readSaved(options.lab),
             // Without it the class keeps its own (or edrys-Lite's default) transport.
             communication: options.local
                 ? { communicationMethod: 'Websocket', websocketUrl: `ws://${req.headers.host}` }
@@ -125,6 +128,11 @@ export async function startDevServer(options) {
             const { type, ...state } = report;
             classState = state;
         }
+        // the user may not see the terminal or the agent: the chat panel says it too
+        if (report.type === 'error')
+            chat.labProblem(explain(String(report.message)));
+        if (report.type === 'applied')
+            chat.labProblem(null);
         if (report.type === 'messages' && Array.isArray(report.messages)) {
             for (const m of report.messages)
                 addLog({ ...m, body: readableBody(m.body), kind: 'message' });
@@ -134,11 +142,15 @@ export async function startDevServer(options) {
         res.sendStatus(204);
     });
     // The error reporter of local modules (see modules.ts): from the module
-    // server's origin, or "null" for a module edrys-Lite inlined.
+    // server's origin, or "null" for a module edrys-Lite inlined. Any page can
+    // be "null" (a sandboxed frame), so the reporter also carries the token,
+    // which only local module pages hold.
     let moduleOrigins = [];
-    app.post('/edrys-dev/module-error', express.text({ type: () => true }), (req, res) => {
-        if (!moduleOrigins.includes(String(req.headers.origin)))
+    const reportToken = crypto.randomBytes(16).toString('hex');
+    app.post('/edrys-dev/module-error/:token', express.text({ type: () => true }), (req, res) => {
+        if (req.params.token !== reportToken || !moduleOrigins.includes(String(req.headers.origin))) {
             return res.sendStatus(403);
+        }
         let error;
         try {
             error = JSON.parse(req.body);
@@ -157,7 +169,7 @@ export async function startDevServer(options) {
         bus.emit('report', { type: 'module-error', ...entry });
         res.sendStatus(204);
     });
-    const chat = new Chat(path.join(path.dirname(options.lab), '.edrys-dev', 'chat.json'));
+    const chat = new Chat(path.join(path.dirname(options.lab), '.edrys-dev'), SETTLE_MS);
     // without an agent, nobody would answer
     if (options.agent)
         chat.routes(app);
@@ -170,7 +182,7 @@ export async function startDevServer(options) {
     app.use(express.static(edrysDist()));
     const server = http.createServer(app);
     // Loaded only when used: @edryslabs/websocket-server is an optional dependency.
-    const stopSync = options.local ? (await import('./sync.js')).attachSync(server) : () => { };
+    const stopSync = options.local ? (await import('./sync.js')).attachSync(server, names) : () => { };
     const send = (event, data) => {
         for (const client of clients)
             client.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
@@ -201,15 +213,16 @@ export async function startDevServer(options) {
         const dir = options.modules;
         // the class tab may use either local address
         const pageOrigins = [...new Set(['localhost', '127.0.0.1', options.host].map((host) => `http://${host}:${port}`))];
-        const moduleServer = http.createServer(moduleApp(dir, `http://localhost:${port}/edrys-dev/module-error`, pageOrigins));
+        const moduleServer = http.createServer(moduleApp(dir, `http://localhost:${port}/edrys-dev/module-error/${reportToken}`, pageOrigins, names));
         const modulePort = await listen(moduleServer, port + 1, options.host);
         modules = { dir, url: `http://localhost:${modulePort}/` };
         moduleOrigins = [`http://localhost:${modulePort}`, `http://127.0.0.1:${modulePort}`, 'null'];
         const stopWatchingModules = watchModules(dir, (name) => {
-            // the lab may name either local address
-            for (const host of ['localhost', '127.0.0.1']) {
-                send('reload-module', { url: `http://${host}:${modulePort}/${name}/` });
-            }
+            // the lab may name either local address; one event, so the class tab
+            // scrapes the module once
+            send('reload-module', {
+                urls: ['localhost', '127.0.0.1'].map((host) => `http://${host}:${modulePort}/${name}/`),
+            });
             for (const other of others)
                 other.write('event: reload-module\ndata: {}\n\n');
             bus.emit('module-changed', name);
@@ -239,6 +252,7 @@ export async function startDevServer(options) {
                 client.end();
             server.closeAllConnections();
             await new Promise((resolve) => server.close(resolve));
+            await chat.flush();
         },
     };
 }

package/dist/sync.js

@@ -1,14 +1,20 @@
 import { WebSocketServer } from 'ws';
 import { setupWSConnection } from '@edryslabs/websocket-server/utils';
+import { ownPage } from './origin.js';
 /**
  * Yjs sync on the dev server's own port (`--local`), as in the edrys
- * websocket-server: every path is a doc named after it. Returns a function
- * that shuts it down.
+ * websocket-server: every path is a doc named after it. Only edrys-dev's own
+ * pages may connect (`names`, see hostGuard), not any site the user visits.
+ * Returns a function that shuts it down.
  */
-export function attachSync(server) {
+export function attachSync(server, names) {
     const docs = new WebSocketServer({ noServer: true });
     docs.on('connection', setupWSConnection);
     server.on('upgrade', (request, socket, head) => {
+        if (!ownPage(request, names)) {
+            socket.end('HTTP/1.1 403 Forbidden\r\nConnection: close\r\n\r\n');
+            return;
+        }
         docs.handleUpgrade(request, socket, head, (ws) => docs.emit('connection', ws, request));
     });
     return () => docs.close();

package/dist/watch.js

@@ -1,5 +1,23 @@
+import fs from 'node:fs/promises';
 import path from 'node:path';
 import { watch } from 'chokidar';
+/**
+ * Reads `file`; while it is missing, tries again for up to `ms`: a save that
+ * renames a copy over it, or deletes and writes it, leaves it gone a moment.
+ */
+export async function readSaved(file, ms = 500) {
+    const end = Date.now() + ms;
+    for (;;) {
+        try {
+            return await fs.readFile(file, 'utf8');
+        }
+        catch (error) {
+            if (error.code !== 'ENOENT' || Date.now() >= end)
+                throw error;
+            await new Promise((resolve) => setTimeout(resolve, 25));
+        }
+    }
+}
 /**
  * Calls `onChange` once per save of `file`: editors often write a file in
  * several steps (truncate + write, or write a copy and rename it over).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edryslabs/edrys-dev",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "Develop edrys-Lite labs locally: serves edrys-Lite, syncs on its own port and republishes the class whenever the lab file changes",
   "type": "module",
   "bin": {
@@ -36,7 +36,7 @@
   },
   "homepage": "https://github.com/edrys-labs/edrys-devserver#readme",
   "dependencies": {
-    "@edryslabs/edrys-lite": "3.2.0-dev.0",
+    "@edryslabs/edrys-lite": "3.2.0-dev.1",
     "chokidar": "^4.0.3",
     "dompurify": "^3.4.17",
     "express": "^5.1.0",

package/views/panel.js

@@ -49,10 +49,14 @@
     }
     .panel.open { display: flex; }
     header {
-      padding: 10px 14px; border-bottom: 1px solid var(--line);
-      font-size: 14px; font-weight: 600; display: flex; justify-content: space-between;
+      padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line);
+      font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px;
+    }
+    header small { font-weight: 400; color: var(--muted); white-space: nowrap; }
+    header select {
+      flex: 1; min-width: 0; font-size: 13px; padding: 3px 4px; border-radius: 6px;
+      border: 1px solid var(--line); background: var(--bg); color: var(--fg);
     }
-    header small { font-weight: 400; color: var(--muted); }
     .log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
     .msg { max-width: 88%; padding: 8px 11px; border-radius: 10px; font-size: 14px; line-height: 1.4;
       overflow-wrap: anywhere; }
@@ -71,7 +75,16 @@
       border: 1px solid var(--accent); background: transparent; color: var(--accent);
     }
     .msg form[aria-disabled="true"] { opacity: .5; pointer-events: none; }
+    .problem { margin: 0 12px 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.4;
+      border: 1px solid #e0452b; background: rgba(224,69,43,.1); }
+    .problem[hidden] { display: none; }
+    .problem summary { cursor: pointer; color: var(--muted); font-size: 12px; margin-top: 4px; }
+    .problem pre { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px ui-monospace, monospace; }
     .status { padding: 0 12px 6px; font-size: 12px; color: var(--muted); min-height: 1em; }
+    .hint { padding: 0 12px 6px; font-size: 12px; color: var(--muted); font-style: italic; }
+    .hint:empty { display: none; }
+    .reason { margin-top: 4px; font-size: 12px; color: var(--muted); }
+    .skipped { align-self: center; font-size: 12px; color: var(--muted); }
     .compose { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
     textarea {
       flex: 1; resize: none; height: 40px; padding: 8px; font-size: 14px; border-radius: 8px;
@@ -92,9 +105,16 @@
         🤖<span class="dot"></span>
       </button>
       <section class="panel" id="panel" aria-label="Agent chat">
-        <header>Agent <small>edrys-dev, only you see this</small></header>
+        <header>
+          Agent
+          <label for="sessions" hidden>Chats</label>
+          <select id="sessions"></select>
+          <small title="edrys-dev: not the class's chat">only you see this</small>
+        </header>
         <div class="log" role="log" aria-live="polite"></div>
+        <div class="problem" role="alert" hidden></div>
         <div class="status" aria-live="polite"></div>
+        <div class="hint" aria-live="polite"></div>
         <form class="compose">
           <label for="text" hidden>Message to the agent</label>
           <textarea id="text" placeholder="Message to the agent (Enter sends)"></textarea>
@@ -108,10 +128,40 @@
   const panel = root.querySelector('.panel')
   const log = root.querySelector('.log')
   const statusLine = root.querySelector('.status')
+  const hintLine = root.querySelector('.hint')
+  const problemBox = root.querySelector('.problem')
   const compose = root.querySelector('.compose')
   const textarea = root.querySelector('textarea')
+  const menu = root.querySelector('#sessions')
 
   let open = null // the ask id of the form the user can still answer
+  let current = null // the chat shown, {id, title}
+  let sessions = [] // the saved chats, the one changed last first
+
+  const NEW = ''
+  // + New chat, then the chats; the current one is new until it has a file
+  function showMenu() {
+    const option = (value, text) => {
+      const o = document.createElement('option')
+      o.value = value
+      o.textContent = text
+      return o
+    }
+    const options = [option(NEW, '+ New chat')]
+    if (current && !sessions.some((s) => s.id === current.id)) options.push(option(current.id, 'New chat'))
+    for (const s of sessions) options.push(option(s.id, s.title))
+    menu.replaceChildren(...options)
+    if (current) menu.value = current.id
+  }
+
+  menu.addEventListener('change', async () => {
+    const response = await post({ session: menu.value === NEW ? null : menu.value })
+    // the server sends the chat it shows now; otherwise back to the one before
+    if (!response?.ok) {
+      showMenu()
+      notSent()
+    } else if (menu.value === NEW) showMenu()
+  })
 
   function setOpen(isOpen) {
     panel.classList.toggle('open', isOpen)
@@ -124,20 +174,30 @@
   toggle.addEventListener('click', () => setOpen(!panel.classList.contains('open')))
   setOpen(sessionStorage.getItem(OPEN_KEY) === '1')
 
+  // the response, or null if edrys-dev could not be reached
   function post(body) {
     return fetch('/edrys-dev/chat', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(body),
-    })
+    }).catch(() => null)
   }
 
-  compose.addEventListener('submit', (event) => {
+  // shown in the status line until the agent sets the next one
+  function notSent() {
+    statusLine.textContent = 'Not sent: is edrys-dev still running? Try again.'
+  }
+
+  compose.addEventListener('submit', async (event) => {
     event.preventDefault()
     const text = textarea.value.trim()
     if (!text) return
     textarea.value = ''
-    post({ text })
+    const response = await post({ text })
+    if (response?.ok) return
+    // back into the box, unless the user typed something new meanwhile
+    if (!textarea.value) textarea.value = text
+    notSent()
   })
   textarea.addEventListener('keydown', (event) => {
     if (event.key === 'Enter' && !event.shiftKey) {
@@ -212,15 +272,42 @@
         values[input.id] = input.type === 'radio' ? checked[0] ?? '' : checked
       }
       const response = await post({ ask: entry.ask, values })
-      if (!response.ok) disable(entry.ask)
+      // closed in the meantime; otherwise the form stays, to send again
+      if (response?.status === 409) disable(entry.ask)
+      else if (!response?.ok) notSent()
     })
 
     if (entry.ask !== open) form.setAttribute('aria-disabled', 'true')
     return form
   }
 
-  function disable(ask) {
-    root.querySelectorAll(`form[data-ask="${ask}"]`).forEach((form) => form.setAttribute('aria-disabled', 'true'))
+  function disable(ask, reason) {
+    root.querySelectorAll(`form[data-ask="${ask}"]`).forEach((form) => {
+      form.setAttribute('aria-disabled', 'true')
+      // why the agent closed it, shown only live
+      if (reason && !form.nextElementSibling?.classList.contains('reason')) {
+        const note = document.createElement('div')
+        note.className = 'reason'
+        note.textContent = reason
+        form.after(note)
+      }
+    })
+  }
+
+  // the lab file does not load: until it does, in plain words, edrys-Lite's message folded
+  function showProblem(problem) {
+    problemBox.hidden = !problem
+    if (!problem) return problemBox.replaceChildren()
+    const text = document.createElement('div')
+    text.textContent = problem.text
+    const details = document.createElement('details')
+    const summary = document.createElement('summary')
+    summary.textContent = 'Details'
+    const pre = document.createElement('pre')
+    pre.textContent = problem.detail
+    details.append(summary, pre)
+    problemBox.replaceChildren(text, details)
+    if (!panel.classList.contains('open')) toggle.classList.add('unread')
   }
 
   function show(entry) {
@@ -248,9 +335,23 @@
         case 'history':
           log.replaceChildren()
           open = message.open
+          current = message.session
+          sessions = message.sessions
+          showMenu()
+          if (message.skipped) {
+            const note = document.createElement('div')
+            note.className = 'skipped'
+            note.textContent = `${message.skipped} earlier messages not shown`
+            log.appendChild(note)
+          }
           message.entries.forEach(show)
           statusLine.textContent = message.status
+          hintLine.textContent = message.hint || ''
           toggle.classList.remove('unread')
+          showProblem(message.lab)
+          break
+        case 'lab':
+          showProblem(message.problem)
           break
         case 'entry':
           if (message.entry.type === 'ai' && message.entry.ask) open = message.entry.ask
@@ -260,9 +361,16 @@
         case 'status':
           statusLine.textContent = message.text
           break
+        case 'sessions':
+          sessions = message.sessions
+          showMenu()
+          break
+        case 'hint':
+          hintLine.textContent = message.text
+          break
         case 'close':
           if (open === message.ask) open = null
-          disable(message.ask)
+          disable(message.ask, message.reason)
           break
       }
     }