@ivanbard/dd2l 0.0.0-stage → 0.1.1

package/ui/canvas-contract.js

@@ -0,0 +1,41 @@
+export const canvasSchema = {
+  type: 'object', additionalProperties: false,
+  properties: {
+    title: { type: 'string', maxLength: 160 },
+    answer: { type: 'string', maxLength: 6000 },
+    html: { type: 'string', maxLength: 60_000 },
+    css: { type: 'string', maxLength: 20_000 },
+    js: { type: 'string', maxLength: 60_000 },
+  },
+  required: ['title', 'answer', 'html', 'css', 'js'],
+};
+
+export function validCanvas(value) {
+  const fields = { title: 160, answer: 6000, html: 60_000, css: 20_000, js: 60_000 };
+  return !!value && typeof value === 'object' && !Array.isArray(value) &&
+    Object.keys(value).length === 5 && Object.entries(fields).every(([key, size]) =>
+      typeof value[key] === 'string' && value[key].length <= size) && !!value.title.trim() && !!value.html.trim();
+}
+
+export function validCanvasState(value) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
+  const queue = [[value, 0]];
+  let nodes = 0;
+  while (queue.length) {
+    const [item, depth] = queue.pop();
+    if (++nodes > 4000 || depth > 12) return false;
+    if (item === null || typeof item === 'boolean' || typeof item === 'string') continue;
+    if (typeof item === 'number') { if (!Number.isFinite(item)) return false; continue; }
+    if (typeof item !== 'object') return false;
+    if (Object.keys(item).some(key => ['__proto__', 'constructor', 'prototype'].includes(key))) return false;
+    for (const child of Object.values(item)) queue.push([child, depth + 1]);
+  }
+  try { return JSON.stringify(value).length <= 32_000; } catch { return false; }
+}
+
+export function validCanvasContext(value) {
+  return value === null || (!!value && typeof value === 'object' && !Array.isArray(value) &&
+    Object.keys(value).every(key => ['program', 'state', 'error'].includes(key)) &&
+    (value.error === undefined || (typeof value.error === 'string' && value.error.length <= 600)) &&
+    validCanvas(value.program) && validCanvasState(value.state));
+}

package/ui/canvas-runtime.js

@@ -0,0 +1,158 @@
+// This function is embedded by the server in a dedicated opaque-origin frame.
+export function canvasRuntime(validState) {
+  'use strict';
+  function workerRuntime() {
+    let run, state, sources, initial;
+    self.onmessage = ({ data }) => {
+      try {
+        if (data.type === 'init') {
+          state = data.state;
+          sources = data.sources;
+          initial = data.html;
+          run = new Function('state', 'event', 'sources', `"use strict";\n${data.js}`);
+        }
+        const event = data.event || { type: 'init', action: '', target: {}, values: {} };
+        const inputs = { ...state.inputs, ...(event.type === 'init' ? {} : event.values) };
+        state.inputs = inputs;
+        const result = run(state, event, sources) || {};
+        state = result.state || state;
+        state.inputs = { ...inputs, ...state.inputs };
+        initial = result.html ?? initial;
+        self.postMessage({ type: 'render', html: initial, state });
+      } catch (error) { self.postMessage({ type: 'error', message: String(error.message).slice(0, 500) }); }
+    };
+  }
+
+  const root = document.getElementById('canvas');
+  const style = document.getElementById('generated-style');
+  const tags = new Set('a article aside b blockquote br button caption circle code col colgroup dd defs details div dl dt ellipse em fieldset figcaption figure footer form g h1 h2 h3 h4 h5 h6 header hr i input label legend li line lineargradient main marker nav ol optgroup option p path polygon polyline pre progress rect section select small span stop strong sub summary sup svg table tbody td text textarea th thead time tr tspan ul'.split(' '));
+  const attributes = new Set('id class title role style name type value checked selected disabled readonly required min max step minlength maxlength placeholder rows cols multiple for open colspan rowspan scope datetime tabindex viewbox d x y x1 x2 y1 y2 cx cy r rx ry width height points fill stroke stroke-width stroke-linecap stroke-linejoin transform opacity offset stop-color marker-end preserveaspectratio'.split(' '));
+  let port, worker, timer, pending = 0, state = {}, snapshotRequests = [], active = false, rendered = false, currentHtml = '';
+  const send = data => port?.postMessage(data);
+
+  function sanitize(html) {
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    const visit = parent => {
+      for (const node of [...parent.children]) {
+        if (!tags.has(node.localName.toLowerCase()) || !['http://www.w3.org/1999/xhtml', 'http://www.w3.org/2000/svg'].includes(node.namespaceURI)) { node.remove(); continue; }
+        for (const attribute of [...node.attributes]) {
+          const name = attribute.name.toLowerCase();
+          if (!attributes.has(name) && !name.startsWith('aria-') && !['data-action', 'data-source'].includes(name)) node.removeAttribute(attribute.name);
+        }
+        if (node.localName === 'input' && !['text', 'number', 'range', 'checkbox', 'radio', 'search', 'email', 'time', 'date', 'color', 'button', 'submit'].includes(node.type)) node.type = 'text';
+        if (['input', 'textarea', 'select', 'form'].includes(node.localName)) node.setAttribute('autocomplete', 'off');
+        if (node.localName === 'textarea' || (node.localName === 'input' && ['text', 'search', 'email'].includes(node.type))) {
+          node.maxLength = node.maxLength > 0 ? Math.min(4000, node.maxLength) : 4000;
+        }
+        visit(node);
+      }
+    };
+    visit(template.content);
+    return template.content;
+  }
+
+  function controls() {
+    const values = {};
+    for (const field of root.querySelectorAll('input,textarea,select')) {
+      const key = field.name || field.id;
+      if (!key || ['__proto__', 'constructor', 'prototype'].includes(key)) continue;
+      if (field.type === 'radio' && !field.checked && values[key]?.checked) continue;
+      values[key] = { value: field.value.slice(0, 4000), checked: !!field.checked };
+      if (field.localName === 'select' && field.multiple) values[key].values = [...field.selectedOptions].map(option => option.value);
+    }
+    return values;
+  }
+
+  function restore() {
+    for (const field of root.querySelectorAll('input,textarea,select')) {
+      const saved = state.inputs?.[field.name || field.id];
+      if (!saved) continue;
+      if (field.type === 'radio') { field.checked = !!saved.checked && field.value === saved.value; continue; }
+      if (field.localName === 'select' && field.multiple && Array.isArray(saved.values)) {
+        for (const option of field.options) option.selected = saved.values.includes(option.value);
+        continue;
+      }
+      field.value = saved.value;
+      if (['checkbox', 'radio'].includes(field.type)) field.checked = saved.checked;
+    }
+  }
+
+  function snapshots() {
+    if (!pending) for (const id of snapshotRequests.splice(0)) send({ type: 'snapshot', id, state });
+  }
+
+  function stop(message) {
+    worker?.terminate();
+    worker = null;
+    clearTimeout(timer);
+    pending = 0;
+    if (!rendered) root.textContent = 'The workspace could not run. Open Sources or describe what to fix.';
+    send({ type: 'error', message });
+    snapshots();
+  }
+
+  function dispatch(data) {
+    if (!worker) return;
+    if (++pending > 100) { stop('Too many workspace updates. Restart the workspace to continue.'); return; }
+    if (!timer) timer = setTimeout(() => stop('The generated workspace took too long to respond. Your last saved progress is retained.'), 2000);
+    worker.postMessage(data);
+  }
+
+  addEventListener('message', event => {
+    if (active || event.source !== parent || !event.ports[0] || event.data?.type !== 'canvas-init') return;
+    active = true;
+    port = event.ports[0];
+    state = validState(event.data.state) ? event.data.state : {};
+    style.textContent = event.data.program.css;
+    root.textContent = 'Opening workspace…';
+    port.onmessage = ({ data }) => {
+      if (data.type === 'snapshot') { snapshotRequests.push(data.id); snapshots(); }
+    };
+    const url = URL.createObjectURL(new Blob([`(${workerRuntime.toString()})()`], { type: 'text/javascript' }));
+    worker = new Worker(url);
+    URL.revokeObjectURL(url);
+    worker.onmessage = ({ data }) => {
+      if (data.type === 'error') { stop(`Workspace error: ${data.message}`); return; }
+      if (data.type !== 'render' || typeof data.html !== 'string' || data.html.length > 120_000 || !validState(data.state)) {
+        stop('The workspace returned an invalid update. Your last saved progress is retained.'); return;
+      }
+      const focused = document.activeElement;
+      const focusKey = focused?.name || focused?.id;
+      const selection = [focused?.selectionStart, focused?.selectionEnd];
+      state = data.state;
+      pending = Math.max(0, pending - 1);
+      // Older worker results must not replace controls while newer input is queued.
+      if (!pending) {
+        if (data.html !== currentHtml) { root.replaceChildren(sanitize(data.html)); currentHtml = data.html; }
+        if (!rendered) requestAnimationFrame(() => requestAnimationFrame(() => send({ type: 'ready' })));
+        rendered = true;
+        restore();
+      }
+      if (!pending && focusKey) {
+        const field = [...root.querySelectorAll('input,textarea,select,button')].find(item => (item.name || item.id) === focusKey);
+        field?.focus({ preventScroll: true });
+        try { if (selection[0] != null) field?.setSelectionRange(...selection); } catch {}
+      }
+      clearTimeout(timer); timer = null;
+      if (pending) timer = setTimeout(() => stop('The workspace stopped responding. Your last saved progress is retained.'), 2000);
+      send({ type: 'state', state });
+      snapshots();
+    };
+    worker.onerror = () => stop('The generated workspace could not run. Your sources remain available.');
+    dispatch({ type: 'init', ...event.data.program, state, sources: event.data.sources });
+    new ResizeObserver(() => send({ type: 'height', height: Math.min(1600, Math.max(360, document.documentElement.scrollHeight)) })).observe(root);
+  });
+
+  for (const type of ['click', 'input', 'change', 'submit']) root.addEventListener(type, event => {
+    if (type === 'submit') event.preventDefault();
+    if (!event.isTrusted && !['input', 'change'].includes(type)) return;
+    const source = event.target.closest('[data-source]');
+    if (type === 'click' && source) { event.preventDefault(); send({ type: 'source', id: source.dataset.source }); return; }
+    const target = event.target;
+    const action = target.closest('[data-action]')?.dataset.action || '';
+    if (type === 'click' && !action) return;
+    dispatch({ type: 'event', event: { type, action: action.slice(0, 160),
+      target: { id: target.id, name: target.name || '', value: String(target.value || '').slice(0, 4000), checked: !!target.checked }, values: controls() } });
+  });
+}

package/ui/canvas.js

@@ -0,0 +1,96 @@
+import { validCanvas, validCanvasState } from './canvas-contract.js';
+
+export function createCanvas(target, report) {
+  let program, state = {}, frame, port, requestId = 0, generation = 0, lastError = '';
+  const snapshots = new Map();
+  const inspector = document.getElementById('canvas-source');
+  let sourceRequest;
+
+  function clear() {
+    generation++;
+    sourceRequest?.abort();
+    port?.close(); port = null;
+    for (const { reject, timer } of snapshots.values()) { clearTimeout(timer); reject(new Error('Workspace changed. Please send your request again.')); }
+    snapshots.clear();
+    frame?.remove(); frame = null;
+    target.hidden = true;
+    inspector.hidden = true;
+    inspector.replaceChildren();
+    program = undefined; state = {}; lastError = '';
+  }
+
+  async function inspect(id, sources, current) {
+    if (!sources.some(source => source.id === id)) return;
+    sourceRequest?.abort();
+    const controller = sourceRequest = new AbortController();
+    try {
+      const response = await fetch(`/api/source?${new URLSearchParams({ id })}`, { signal: controller.signal });
+      const source = await response.json();
+      if (!response.ok) throw new Error(source.error || 'This source is no longer available.');
+      if (generation !== current || sourceRequest !== controller) return;
+      const title = document.createElement('h3'); title.textContent = source.title; title.tabIndex = -1;
+      const status = document.createElement('p'); status.className = 'source-meta';
+      status.textContent = `${source.courseName} · ${source.stale ? 'Stale cache' : 'Cached'} · ${source.lastSuccess || 'Retrieval date unknown'}`;
+      const text = document.createElement('p'); text.className = 'assignment-text'; text.textContent = source.text;
+      const link = document.createElement('a'); link.textContent = 'Open in Brightspace ↗';
+      link.href = source.url; link.target = '_blank'; link.rel = 'noopener noreferrer';
+      inspector.replaceChildren(title, status, text, link); inspector.hidden = false; title.focus();
+    } catch (error) { if (error.name !== 'AbortError' && generation === current) report(error.message); }
+  }
+
+  function render(next, sources, savedState = state) {
+    if (!validCanvas(next) || !validCanvasState(savedState)) throw new Error('The generated workspace could not be verified.');
+    clear();
+    program = next; state = savedState;
+    const current = generation;
+    frame = document.createElement('iframe');
+    frame.title = next.title;
+    frame.className = 'generated-canvas';
+    frame.dataset.ready = 'false';
+    frame.inert = true;
+    frame.setAttribute('sandbox', 'allow-scripts');
+    frame.setAttribute('referrerpolicy', 'no-referrer');
+    frame.setAttribute('allow', "camera 'none'; microphone 'none'; geolocation 'none'; clipboard-read 'none'; clipboard-write 'none'");
+    frame.addEventListener('load', () => {
+      const channel = new MessageChannel();
+      port = channel.port1;
+      port.onmessage = ({ data }) => {
+        if (generation !== current || !data || typeof data !== 'object') return;
+        if (['state', 'snapshot'].includes(data.type) && validCanvasState(data.state)) {
+          state = data.state;
+          if (data.type === 'snapshot' && snapshots.has(data.id)) {
+            const pending = snapshots.get(data.id); snapshots.delete(data.id); clearTimeout(pending.timer);
+            pending.resolve({ program, state: structuredClone(state), error: lastError });
+          }
+        } else if (data.type === 'ready') {
+          frame.inert = false;
+          frame.focus({ preventScroll: true });
+          frame.dataset.ready = 'true';
+        }
+        else if (data.type === 'height' && Number.isFinite(data.height)) frame.style.height = `${Math.min(1600, Math.max(360, data.height))}px`;
+        else if (data.type === 'error' && typeof data.message === 'string') {
+          frame.inert = true;
+          lastError = data.message.slice(0, 600); report(lastError);
+        }
+        else if (data.type === 'source' && typeof data.id === 'string') inspect(data.id, sources, current);
+      };
+      frame.contentWindow.postMessage({ type: 'canvas-init', program,
+        state, sources: sources.map(({ id, title, courseName, category, excerpt, dueDate, stale }) => ({ id, title, courseName, category, text: excerpt, dueDate, stale })) }, '*', [channel.port2]);
+    }, { once: true });
+    frame.src = '/canvas-frame';
+    target.replaceChildren(frame); target.hidden = false;
+  }
+
+  function snapshot() {
+    if (!program) return Promise.resolve(null);
+    if (!port) return Promise.reject(new Error('The workspace is still loading. Please try again.'));
+    const id = ++requestId;
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => { snapshots.delete(id); reject(new Error('The workspace is still updating. Please try again.')); }, 3000);
+      snapshots.set(id, { resolve, reject, timer });
+      port.postMessage({ type: 'snapshot', id });
+    });
+  }
+
+  return { render, clear, snapshot };
+}

package/ui/index.html

@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="dark">
+  <title>dd2l · Your coursework</title>
+  <link rel="icon" href="/assets/logo.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/style.css">
+  <script type="module" src="/app.js"></script>
+</head>
+<body>
+  <a class="skip-link" href="#prompt">Skip to search</a>
+  <aside class="sidebar" aria-label="Main navigation">
+    <a class="brand" href="/" aria-label="dd2l home"><img src="/assets/logo.svg" alt="" width="30" height="30"></a>
+    <nav>
+      <button class="icon-button" id="new-chat" type="button" title="New search" aria-label="New search"><img src="/assets/new-chat.svg" alt="" width="16" height="16"></button>
+      <button class="icon-button" id="search-nav" type="button" title="Search coursework" aria-label="Search coursework"><img src="/assets/search.svg" alt="" width="16" height="16"></button>
+      <button class="icon-button" id="courses-nav" type="button" title="Courses" aria-label="Courses"><img src="/assets/courses.svg" alt="" width="16" height="16"></button>
+    </nav>
+    <div class="utilities">
+      <button class="icon-button" id="settings-nav" type="button" title="Connection status" aria-label="Connection status"><img src="/assets/settings.svg" alt="" width="16" height="16"></button>
+      <button class="profile" id="profile" type="button" title="Local profile" aria-label="Local profile"><img src="/assets/avatar.svg" alt="" width="40" height="40"><span>U</span></button>
+    </div>
+  </aside>
+  <span id="demo-badge" class="demo-badge" hidden>Demo · sample coursework</span>
+  <main id="workspace" class="workspace">
+    <section class="home" aria-labelledby="heading">
+      <h1 id="heading">What do you want to work on?</h1>
+      <form id="search-form" class="composer" role="search">
+        <div class="prompt-field">
+          <label class="sr-only" for="prompt">Search your cached coursework</label>
+          <input id="prompt" name="q" type="search" maxlength="500" autocomplete="off" placeholder="Describe your task or goal…" aria-describedby="search-help">
+          <button id="send" type="submit" disabled aria-label="Search"><img src="/assets/send.svg" alt="" width="32" height="32"><span id="busy" hidden></span></button>
+        </div>
+        <div class="composer-footer">
+          <label class="sr-only" for="course">Course</label>
+          <select id="course" name="course"><option value="">All courses</option></select>
+          <span id="course-loading" class="loading-slot"></span>
+          <label class="sr-only" for="model">Search mode or model</label>
+          <select id="model" name="model" aria-describedby="search-help"><option value="">Local search</option></select>
+          <span id="model-loading" class="loading-slot"></span>
+        </div>
+        <span id="search-help" class="sr-only">Select a ChatGPT model for an adaptive workspace around any coursework goal. Local search uses keywords and assignment matching.</span>
+      </form>
+      <p id="model-sharing" class="model-sharing" hidden>Adaptive workspace · The model can request read-only Brightspace discovery. Sending shares your goal, workspace progress, course previews and retrieved excerpts with OpenAI.</p>
+      <p id="adaptive-help" class="model-sharing">For adaptive workspaces, connect ChatGPT in Settings and select a model. Local search uses keyword matching.</p>
+      <p id="notice" class="notice" role="status" hidden></p>
+    </section>
+    <section id="home-widgets" class="home-widgets" aria-labelledby="widgets-heading">
+      <div class="widgets-heading"><div><p class="eyebrow">YOUR SPACE</p><h2 id="widgets-heading">At a glance <span id="widget-loading" class="loading-slot"></span></h2></div>
+        <div class="widget-actions"><button id="refresh-widgets" type="button">Refresh cache view</button><button id="add-widget" type="button" hidden>+ Add widget</button><button id="customize-widgets" type="button" aria-pressed="false">Customize</button></div>
+      </div>
+      <p id="widget-help" class="widget-help">From your cached coursework.</p>
+      <div id="widget-grid" class="widget-grid"></div>
+      <p id="widget-status" class="widget-status" role="status"></p>
+    </section>
+    <section id="canvas-workspace" class="results canvas-workspace" aria-labelledby="canvas-title" hidden>
+      <header class="canvas-heading"><h2 id="canvas-title" tabindex="-1">Your workspace</h2><div class="widget-actions">
+        <button id="canvas-sources" type="button" aria-expanded="false" aria-controls="assignment-workspace">Sources</button>
+        <button id="canvas-restart" type="button">Restart progress</button>
+      </div></header>
+      <p class="retrieval-note">AI-generated workspace · Verify requirements against the linked coursework. Progress is kept for this visit.</p>
+      <div id="canvas-host" hidden></div>
+      <aside id="canvas-source" class="canvas-source" aria-label="Verified coursework source" hidden></aside>
+    </section>
+    <section id="ai-answer" class="results" aria-label="AI answer" hidden>
+      <h2 id="ai-answer-title" tabindex="-1">Your answer</h2><p id="answer-text"></p>
+      <div id="answer-view" class="answer-view" hidden></div>
+      <h3 class="answer-sources-heading">Sources</h3><div id="answer-sources"></div>
+    </section>
+    <section id="assignment-workspace" class="results assignment-workspace" aria-labelledby="assignment-heading" hidden></section>
+    <section id="results" class="results" aria-label="Coursework results" hidden>
+      <div class="results-heading"><h2 id="results-title" tabindex="-1">Sources</h2><span id="result-count"></span></div>
+      <p class="retrieval-note">Matching excerpts from your local inventory. These are source materials, not an AI-generated answer.</p>
+      <div id="result-list"></div>
+    </section>
+  </main>
+  <dialog id="panel" aria-labelledby="panel-title">
+    <header><h2 id="panel-title"></h2><span id="panel-loading" class="loading-slot"></span><button id="close-panel" type="button" aria-label="Close panel">×</button></header>
+    <div id="panel-body"></div>
+  </dialog>
+</body>
+</html>

package/ui/loading.js

@@ -0,0 +1,33 @@
+// Square 12 / Origin Wave, adapted for dd2l from zzzzshawn/matrix. See THIRD_PARTY_NOTICES.md.
+const active = new WeakMap();
+
+export function startLoading(target, label = 'Loading') {
+  let state = active.get(target);
+  if (!state) {
+    const loader = document.createElement('span');
+    loader.className = 'dot-loader';
+    loader.setAttribute('role', 'status');
+    loader.setAttribute('aria-label', label);
+    for (let row = 0; row < 5; row++) for (let col = 0; col < 5; col++) {
+      const dot = document.createElement('span');
+      dot.setAttribute('aria-hidden', 'true');
+      dot.style.setProperty('--ring', Math.abs(row - 1) + Math.abs(col - 1));
+      loader.append(dot);
+    }
+    state = { loader, count: 0, previousBusy: target.getAttribute('aria-busy') };
+    active.set(target, state);
+    target.append(loader);
+    target.setAttribute('aria-busy', 'true');
+  }
+  state.count++;
+  let finished = false;
+  return () => {
+    if (finished) return;
+    finished = true;
+    if (--state.count) return;
+    state.loader.remove();
+    if (state.previousBusy === null) target.removeAttribute('aria-busy');
+    else target.setAttribute('aria-busy', state.previousBusy);
+    active.delete(target);
+  };
+}