@ivanbard/dd2l 0.0.0-stage → 0.1.0

package/src/ui-server.mjs

@@ -0,0 +1,125 @@
+import { createServer } from 'node:http';
+import { readFile } from 'node:fs/promises';
+import { join, extname } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { parseArgs } from 'node:util';
+import { readInventory, searchInventory, homeInventory } from './ui-data.mjs';
+import { demoInventory } from './ui-demo.mjs';
+import { ChatGPT } from './llm.mjs';
+
+const root = fileURLToPath(new URL('../ui/', import.meta.url));
+const mime = { '.html': 'text/html; charset=utf-8', '.css': 'text/css', '.js': 'text/javascript', '.svg': 'image/svg+xml', '.png': 'image/png' };
+
+function signInPage(connected, first = false) {
+  const title = connected ? (first ? "You're using your ChatGPT plan" : 'ChatGPT connected') : 'Sign-in did not complete';
+  const message = connected
+    ? 'Eligible AI requests use your ChatGPT plan. You can manage limits in ChatGPT Settings → Usage.'
+    : 'Return to dd2l and open Settings to try signing in again.';
+  return `<!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>${title} · dd2l</title>
+<link rel="icon" href="/assets/logo.svg" type="image/svg+xml"><link rel="stylesheet" href="/style.css"></head>
+<body class="auth-page"><main class="auth-content" aria-labelledby="auth-heading">
+<a class="auth-brand" href="/" aria-label="dd2l home"><img src="/assets/logo.svg" width="40" height="40" alt=""><span>dd2l</span></a>
+<p class="auth-status">${connected ? 'Account connected' : 'Connection interrupted'}</p>
+<h1 id="auth-heading">${title}</h1><p class="auth-message">${message}</p>
+<a class="auth-return" href="/">${connected && first ? 'Got it — return to dd2l' : 'Return to dd2l'} <span aria-hidden="true">→</span></a>
+${connected ? '<a class="auth-usage" href="https://chatgpt.com/settings/usage" target="_blank" rel="noopener noreferrer">Manage usage in ChatGPT ↗</a>' : ''}
+</main></body></html>`;
+}
+
+export function createUiServer({ demo = false, inventoryPath = join(process.env.LOCALAPPDATA || '', 'dd2l', 'inventory.sqlite'),
+  llm = demo ? null : new ChatGPT(join(process.env.LOCALAPPDATA || '', 'dd2l')) } = {}) {
+  return createServer(async (req, res) => {
+    const authority = `127.0.0.1:${res.socket.localPort}`;
+    const send = (status, body, type = 'application/json') => {
+      res.writeHead(status, { 'Content-Type': type, 'Cache-Control': 'no-store', 'X-Content-Type-Options': 'nosniff',
+        'Referrer-Policy': 'no-referrer', 'Cross-Origin-Resource-Policy': 'same-origin', 'X-Frame-Options': 'DENY',
+        'Content-Security-Policy': "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'" });
+      res.end(type === 'application/json' ? JSON.stringify(body) : body);
+    };
+    const callback = req.method === 'GET' && req.url.startsWith('/auth/callback?');
+    if (req.headers.host !== authority || (!callback && ((req.headers.origin && req.headers.origin !== `http://${authority}`) || req.headers['sec-fetch-site'] === 'cross-site'))) {
+      send(403, { error: 'Open dd2l using its local URL.' }); return;
+    }
+    try {
+      const url = new URL(req.url, `http://${authority}`);
+      if (callback) {
+        try {
+          if (!llm || demo) throw new Error('disabled');
+          const result = await llm.callback(url.searchParams);
+          send(200, signInPage(true, result.first), 'text/html; charset=utf-8');
+        } catch { send(400, signInPage(false), 'text/html; charset=utf-8'); }
+        return;
+      }
+      if (url.pathname.startsWith('/api/llm/')) {
+        if (!llm || demo) { send(200, { disabled: true, accounts: [], active: null }); return; }
+        if (req.method === 'GET' && url.pathname === '/api/llm/status') { send(200, await llm.status()); return; }
+        if (req.method === 'GET' && url.pathname === '/api/llm/models') { send(200, await llm.models()); return; }
+        if (req.method !== 'POST') { send(405, { error: 'Use POST for AI actions.' }); return; }
+        if (req.headers.origin !== `http://${authority}` || !/^application\/json(?:;|$)/i.test(req.headers['content-type'] || '')) { send(403, { error: 'AI actions require a local JSON request.' }); return; }
+        const chunks = [];
+        let bytes = 0;
+        for await (const chunk of req) {
+          bytes += chunk.length;
+          if (bytes > 8192) { send(413, { error: 'Request too large.' }); return; }
+          chunks.push(chunk);
+        }
+        let data;
+        try { data = JSON.parse(Buffer.concat(chunks).toString('utf8')); } catch { send(400, { error: 'Invalid JSON.' }); return; }
+        if (!data || typeof data !== 'object' || Array.isArray(data)) { send(400, { error: 'Invalid request.' }); return; }
+        if (['login', 'select'].includes(url.pathname.split('/').at(-1)) && data.id !== undefined && (typeof data.id !== 'string' || data.id.length > 300)) { send(400, { error: 'Invalid account.' }); return; }
+        if (url.pathname === '/api/llm/login') send(200, await llm.login(`http://${authority}/auth/callback`, data.id));
+        else if (url.pathname === '/api/llm/select') send(200, await llm.select(data.id));
+        else if (url.pathname === '/api/llm/logout') send(200, await llm.logout());
+        else if (url.pathname === '/api/llm/answer') {
+          const { q, course = '', model, consent } = data;
+          if (typeof q !== 'string' || !q.trim() || q.length > 500 || typeof course !== 'string' || (course && !/^\d+$/.test(course)) || typeof model !== 'string' || !model || model.length > 200 || consent !== true) {
+            send(400, { error: 'Provide a question, course, model and permission to send excerpts to OpenAI.' }); return;
+          }
+          const inventory = readInventory(inventoryPath);
+          if (course && !inventory.courses.some(c => c.id === course)) { send(404, { error: 'Course is not available in this inventory.' }); return; }
+          const sources = searchInventory(inventory, q, course).results.slice(0, 8);
+          const controller = new AbortController();
+          const abort = () => controller.abort();
+          res.on('close', abort);
+          try { send(200, { ...await llm.answer(q, model, sources, AbortSignal.any([controller.signal, AbortSignal.timeout(90_000)])), sources }); }
+          finally { res.off('close', abort); }
+        } else send(404, { error: 'Not found.' });
+        return;
+      }
+      if (req.method !== 'GET') { send(405, { error: 'This route is read-only.' }); return; }
+      if (url.pathname.startsWith('/api/')) {
+        if (!['/api/status', '/api/courses', '/api/search', '/api/home'].includes(url.pathname)) { send(404, { error: 'Not found.' }); return; }
+        const query = url.searchParams.get('q') || '';
+        const course = url.searchParams.get('course') || '';
+        if (query.length > 500 || (course && !/^\d+$/.test(course))) { send(400, { error: 'Use a query of at most 500 characters and a valid course.' }); return; }
+        const inventory = demo ? demoInventory() : readInventory(inventoryPath);
+        if (course && !inventory.courses.some(item => item.id === course)) { send(404, { error: 'Course is not available in this inventory.' }); return; }
+        if (url.pathname === '/api/status') send(200, { demo, state: inventory.state,
+          courseCount: inventory.courses.length, sourceCount: inventory.sources.length,
+          lastSuccess: inventory.sources.map(source => source.lastSuccess).filter(Boolean).sort().at(-1) || null });
+        else if (url.pathname === '/api/home') send(200, { ...homeInventory(inventory), demo });
+        else if (url.pathname === '/api/courses') send(200, { courses: inventory.courses });
+        else send(200, { ...searchInventory(inventory, query, course), demo });
+        return;
+      }
+      const path = url.pathname === '/' ? 'index.html' : url.pathname.slice(1);
+      if (!/^(?:index\.html|app\.js|widgets\.js|widget-layout\.js|answer-view\.js|answer-renderer\.js|loading\.js|style\.css|assets\/[a-z-]+\.(?:svg|png))$/.test(path)) { send(404, { error: 'Not found.' }); return; }
+      send(200, await readFile(join(root, path)), mime[extname(path)]);
+    } catch (error) {
+      send(error.code === 'ENOENT' ? 404 : 503, { error: error.public ? error.message : error.code === 'ENOENT' ? 'Not found.' : 'Local data or AI service is unavailable. Retry after the current operation finishes.' });
+    }
+  });
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  const { values } = parseArgs({ options: { demo: { type: 'boolean' }, port: { type: 'string', default: '4173' } } });
+  const port = Number(values.port);
+  if (!Number.isInteger(port) || port < 1024 || port > 65535) throw new Error('Port must be between 1024 and 65535.');
+  if (!values.demo && !process.env.LOCALAPPDATA) throw new Error('Live inventory requires Windows LOCALAPPDATA. Use --demo for sample data.');
+  const server = createUiServer({ demo: values.demo });
+  server.on('error', error => { console.error(`Could not start UI: ${error.code}`); process.exitCode = 1; });
+  server.listen(port, '127.0.0.1', () => console.log(`dd2l ${values.demo ? 'DEMO (sample data)' : '(local cached coursework)'}: http://127.0.0.1:${port}`));
+  for (const signal of ['SIGINT', 'SIGTERM']) process.on(signal, () => server.close());
+}

package/src/windows-ocr.ps1

@@ -0,0 +1,32 @@
+param([Parameter(Mandatory=$true)][string]$ImagePath)
+$ErrorActionPreference = 'Stop'
+try {
+  Add-Type -AssemblyName System.Runtime.WindowsRuntime
+  $null = [Windows.Storage.StorageFile, Windows.Storage, ContentType=WindowsRuntime]
+  $null = [Windows.Graphics.Imaging.BitmapDecoder, Windows.Graphics.Imaging, ContentType=WindowsRuntime]
+  $null = [Windows.Media.Ocr.OcrEngine, Windows.Foundation, ContentType=WindowsRuntime]
+  $asTask = [System.WindowsRuntimeSystemExtensions].GetMethods() | Where-Object { $_.Name -eq 'AsTask' -and $_.GetParameters().Count -eq 1 -and $_.IsGenericMethod -and $_.GetParameters()[0].ParameterType.Name -eq 'IAsyncOperation`1' } | Select-Object -First 1
+  function Await-Result($operation, $resultType) {
+    $task = $asTask.MakeGenericMethod($resultType).Invoke($null, @($operation))
+    $task.Wait()
+    $task.Result
+  }
+  $file = Await-Result ([Windows.Storage.StorageFile]::GetFileFromPathAsync($ImagePath)) ([Windows.Storage.StorageFile])
+  $stream = Await-Result ($file.OpenAsync([Windows.Storage.FileAccessMode]::Read)) ([Windows.Storage.Streams.IRandomAccessStream])
+  try {
+    $decoder = Await-Result ([Windows.Graphics.Imaging.BitmapDecoder]::CreateAsync($stream)) ([Windows.Graphics.Imaging.BitmapDecoder])
+    if ([double]$decoder.PixelWidth * $decoder.PixelHeight -gt 16000000) { throw 'Image pixel limit exceeded' }
+    $maximum = [Windows.Media.Ocr.OcrEngine]::MaxImageDimension
+    $scale = [Math]::Min(1.0, $maximum / [double][Math]::Max($decoder.PixelWidth, $decoder.PixelHeight))
+    $transform = [Windows.Graphics.Imaging.BitmapTransform]::new()
+    $transform.ScaledWidth = [uint32][Math]::Max(1, [Math]::Floor($decoder.PixelWidth * $scale))
+    $transform.ScaledHeight = [uint32][Math]::Max(1, [Math]::Floor($decoder.PixelHeight * $scale))
+    $bitmap = Await-Result ($decoder.GetSoftwareBitmapAsync([Windows.Graphics.Imaging.BitmapPixelFormat]::Bgra8, [Windows.Graphics.Imaging.BitmapAlphaMode]::Ignore, $transform, [Windows.Graphics.Imaging.ExifOrientationMode]::RespectExifOrientation, [Windows.Graphics.Imaging.ColorManagementMode]::DoNotColorManage)) ([Windows.Graphics.Imaging.SoftwareBitmap])
+    try {
+      $engine = [Windows.Media.Ocr.OcrEngine]::TryCreateFromUserProfileLanguages()
+      if ($null -eq $engine) { throw 'OCR language unavailable' }
+      $result = Await-Result ($engine.RecognizeAsync($bitmap)) ([Windows.Media.Ocr.OcrResult])
+      [Console]::Out.Write([Convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes($result.Text)))
+    } finally { $bitmap.Dispose() }
+  } finally { $stream.Dispose() }
+} catch { exit 1 }

package/ui/answer-renderer.js

@@ -0,0 +1,88 @@
+import { validAnswerView } from './answer-view.js';
+
+const element = (tag, text, className) => {
+  const node = document.createElement(tag);
+  if (text !== undefined) node.textContent = text;
+  if (className) node.className = className;
+  return node;
+};
+
+function references(ids, sources) {
+  const links = element('div', undefined, 'answer-references');
+  for (const id of [...new Set(ids)]) {
+    const source = sources[id - 1];
+    const link = element('a', `[${id}]${source.stale ? ' · Stale cache' : ''}`);
+    link.href = `#answer-source-${id}`;
+    link.setAttribute('aria-label', `Source ${id}: ${source.title}${source.stale ? ', stale cache' : ''}`);
+    links.append(link);
+  }
+  return links;
+}
+
+export function renderAnswerView(target, view, sources) {
+  target.replaceChildren();
+  if (!validAnswerView(view, sources.length)) return false;
+  for (const section of view.sections) {
+    const card = element('article', undefined, `widget generated-card answer-${section.type}`);
+    const edition = element('div', undefined, 'widget-edition');
+    edition.append(element('span', { checklist: 'STUDY / CHECKLIST', comparison: 'COURSEWORK / COMPARE', cards: 'SOURCES / COLLECTION' }[section.type]), element('span', 'dd2l'));
+    const header = element('header', undefined, 'widget-header');
+    header.append(element('h3', section.title));
+    card.append(edition, header);
+    if (section.type === 'checklist') {
+      const progress = element('p', `0 of ${section.items.length} complete`, 'answer-progress');
+      progress.setAttribute('role', 'status');
+      const list = element('ul', undefined, 'answer-checklist');
+      let completed = 0;
+      for (const item of section.items) {
+        const row = element('li');
+        const label = element('label');
+        const checkbox = element('input');
+        checkbox.type = 'checkbox';
+        checkbox.addEventListener('change', () => {
+          completed += checkbox.checked ? 1 : -1;
+          row.classList.toggle('completed', checkbox.checked);
+          progress.textContent = `${completed} of ${section.items.length} complete`;
+        });
+        label.append(checkbox, element('span', item.text));
+        row.append(label, references(item.citations, sources));
+        list.append(row);
+      }
+      card.append(progress, list, element('small', 'Checks are kept for this answer only.', 'answer-session-note'));
+    } else if (section.type === 'comparison') {
+      const scroll = element('div', undefined, 'answer-table-scroll');
+      scroll.tabIndex = 0;
+      scroll.setAttribute('role', 'region');
+      scroll.setAttribute('aria-label', section.title);
+      const table = element('table');
+      table.append(element('caption', section.title, 'sr-only'));
+      const head = element('thead'), heading = element('tr');
+      for (const title of [...section.columns, 'Sources']) {
+        const cell = element('th', title); cell.scope = 'col'; heading.append(cell);
+      }
+      head.append(heading);
+      const body = element('tbody');
+      for (const row of section.rows) {
+        const tr = element('tr');
+        for (const [index, value] of row.cells.entries()) {
+          const cell = element(index ? 'td' : 'th', value);
+          if (!index) cell.scope = 'row';
+          tr.append(cell);
+        }
+        const citations = element('td'); citations.append(references(row.citations, sources)); tr.append(citations);
+        body.append(tr);
+      }
+      table.append(head, body); scroll.append(table); card.append(scroll);
+    } else {
+      const list = element('div', undefined, 'answer-source-cards');
+      for (const item of section.cards) {
+        const entry = element('section');
+        entry.append(element('h4', item.title), element('p', item.text), references(item.citations, sources));
+        list.append(entry);
+      }
+      card.append(list);
+    }
+    target.append(card);
+  }
+  return true;
+}

package/ui/answer-view.js

@@ -0,0 +1,47 @@
+const text = (maxLength = 1000) => ({ type: 'string', maxLength });
+const list = (items, maxItems, minItems = 0) => ({ type: 'array', items, minItems, maxItems });
+const object = properties => ({ type: 'object', properties, required: Object.keys(properties), additionalProperties: false });
+const kind = value => ({ type: 'string', enum: [value] });
+const citations = list({ type: 'integer', minimum: 1, maximum: 8 }, 8, 1);
+
+export const answerSchema = object({
+  title: text(160),
+  answer: text(6000),
+  sections: list({ anyOf: [
+    object({ type: kind('checklist'), title: text(160), items: list(object({ text: text(), citations }), 20, 1) }),
+    object({ type: kind('comparison'), title: text(160), columns: list(text(120), 5, 2),
+      rows: list(object({ cells: list(text(), 5, 2), citations }), 20, 1) }),
+    object({ type: kind('cards'), title: text(160), cards: list(object({ title: text(160), text: text(2000), citations }), 12, 1) }),
+  ] }, 6),
+});
+
+// Validate the same bounded schema we send to the provider, including unexpected keys.
+function matches(value, schema) {
+  if (schema.anyOf) return schema.anyOf.some(choice => matches(value, choice));
+  if (schema.type === 'object') return value !== null && typeof value === 'object' && !Array.isArray(value) &&
+    Object.keys(value).length === schema.required.length && schema.required.every(key => Object.hasOwn(value, key) && matches(value[key], schema.properties[key]));
+  if (schema.type === 'array') return Array.isArray(value) && value.length >= schema.minItems && value.length <= schema.maxItems && value.every(item => matches(item, schema.items));
+  if (schema.type === 'string') return typeof value === 'string' && value.length <= (schema.maxLength ?? Infinity) && (!schema.enum || schema.enum.includes(value));
+  return schema.type === 'integer' && Number.isInteger(value) && value >= schema.minimum && value <= schema.maximum;
+}
+
+export function validAnswerView(value, sourceCount) {
+  if (!matches(value, answerSchema)) return false;
+  return value.sections.every(section => {
+    const items = section.items || section.rows || section.cards;
+    return items.every(item => item.citations.every(id => id <= sourceCount) &&
+      (section.type !== 'comparison' || item.cells.length === section.columns.length));
+  });
+}
+
+export function parseAnswerView(raw, sourceCount) {
+  let value;
+  try { value = JSON.parse(raw); }
+  catch {
+    if (!/^\s*(?:[\[{]|```)/.test(raw)) return { answer: raw, view: null };
+  }
+  if (validAnswerView(value, sourceCount)) return { answer: value.answer, view: value };
+  const answer = typeof value?.answer === 'string' && value.answer.trim() && value.answer.length <= 6000 ? value.answer
+    : 'The model returned an unreadable answer. Please try again.';
+  return { answer, view: null, viewWarning: 'The generated layout could not be verified. Showing text and available sources instead.' };
+}

package/ui/app.js

@@ -0,0 +1,302 @@
+import { createWidgets } from './widgets.js';
+import { renderAnswerView } from './answer-renderer.js';
+import { startLoading } from './loading.js';
+
+const $ = id => document.getElementById(id);
+const refreshWidgets = createWidgets(async (course, title) => {
+  try { await load(); } catch (error) { notice(error.message); return; }
+  $('course').value = course;
+  $('prompt').value = title;
+  search(!title);
+});
+let status;
+let courses = [];
+let request;
+let aiRequest;
+let finishPromptLoading = () => {};
+
+function element(tag, text, className) {
+  const node = document.createElement(tag);
+  if (text !== undefined) node.textContent = text;
+  if (className) node.className = className;
+  return node;
+}
+
+async function api(path, signal) {
+  const response = await fetch(path, { signal });
+  const data = await response.json();
+  if (!response.ok) throw new Error(data.error || 'Could not read the local inventory.');
+  return data;
+}
+
+async function aiAction(action, body = {}, signal) {
+  const response = await fetch(`/api/llm/${action}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), signal });
+  const data = await response.json();
+  if (!response.ok) throw new Error(data.error || 'AI request failed.');
+  return data;
+}
+
+async function loadAI() {
+  const finish = startLoading($('model-loading'), 'Loading models');
+  try {
+    clearAnswer();
+    $('model').replaceChildren(new Option('Local search', ''));
+    updateComposer();
+    const connection = await api('/api/llm/status');
+    if (connection.active) {
+      const { models } = await api('/api/llm/models');
+      const group = element('optgroup');
+      group.label = 'ChatGPT';
+      group.append(...models.map(m => new Option(m.name, m.id)));
+      $('model').append(group);
+    }
+    updateComposer();
+  } finally { finish(); }
+}
+
+function updateComposer() {
+  const model = $('model').value;
+  $('model-sharing').hidden = !model;
+  $('model').setAttribute('aria-describedby', model ? 'model-sharing' : 'search-help');
+  $('send').disabled = !$('prompt').value.trim() || !$('busy').hidden;
+  $('send').setAttribute('aria-label', model ? `Ask ${$('model').selectedOptions[0].textContent}` : 'Search locally');
+}
+
+function setBusy(busy, label = 'Searching…') {
+  finishPromptLoading();
+  $('busy').hidden = !busy;
+  if (busy) finishPromptLoading = startLoading($('busy'), label);
+  if (busy) $('search-form').setAttribute('aria-busy', 'true');
+  else $('search-form').removeAttribute('aria-busy');
+  updateComposer();
+}
+
+function clearAnswer() {
+  aiRequest?.abort();
+  request?.abort();
+  aiRequest = request = undefined;
+  setBusy(false);
+  $('ai-answer').hidden = true;
+  $('answer-text').textContent = '';
+  $('answer-view').replaceChildren();
+  $('answer-view').hidden = true;
+  $('ai-answer-title').textContent = 'Your answer';
+  $('answer-sources').replaceChildren();
+}
+
+async function askAI() {
+  if (!$('prompt').value.trim()) { notice('Enter a coursework question first.'); return; }
+  if (!$('model').value) return search();
+  clearAnswer();
+  const current = aiRequest = new AbortController();
+  setBusy(true, 'Thinking…');
+  $('results').hidden = true;
+  notice();
+  try {
+    const data = await aiAction('answer', { q: $('prompt').value.trim(), course: $('course').value, model: $('model').value, consent: true }, current.signal);
+    if (aiRequest !== current) return;
+    $('workspace').classList.add('has-results');
+    $('answer-text').textContent = data.answer;
+    const rendered = renderAnswerView($('answer-view'), data.view, data.sources);
+    $('answer-view').hidden = !rendered || !data.view.sections.length;
+    $('ai-answer-title').textContent = rendered ? data.view.title || 'Your answer' : 'Your answer';
+    if (data.viewWarning) notice(data.viewWarning);
+    $('answer-sources').replaceChildren();
+    for (const [i, source] of data.sources.entries()) {
+      const article = element('article', undefined, 'source');
+      article.id = `answer-source-${i + 1}`;
+      article.tabIndex = -1;
+      article.append(element('h3', `[${i + 1}] ${source.title}`), element('p', source.excerpt),
+        element('p', `${source.courseName} · ${source.stale ? 'Stale cache' : 'Cached'} · ${date(source.lastSuccess)}`, 'source-meta'));
+      const link = element('a', 'Open course in onQ ↗');
+      link.href = source.url;
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+      article.append(link);
+      $('answer-sources').append(article);
+    }
+    $('ai-answer').hidden = false;
+    $('ai-answer').querySelector('h2').focus();
+  } catch (error) { if (error.name !== 'AbortError' && aiRequest === current) notice(error.message); }
+  finally {
+    if (aiRequest === current) {
+      setBusy(false);
+    }
+  }
+}
+
+function notice(text = '') {
+  $('notice').textContent = text;
+  $('notice').hidden = !text;
+}
+
+function date(value) {
+  const stamp = new Date(value);
+  return value && !Number.isNaN(stamp.valueOf()) ? stamp.toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : 'Unknown';
+}
+
+async function load() {
+  const finish = startLoading($('course-loading'), 'Loading courses');
+  try {
+    [status, { courses }] = await Promise.all([api('/api/status'), api('/api/courses')]);
+    const selected = $('course').value;
+    $('course').replaceChildren(new Option('All courses', ''), ...courses.map(course => new Option(course.name, course.id)));
+    if (courses.some(course => course.id === selected)) $('course').value = selected;
+    $('demo-badge').hidden = !status.demo;
+    if (!courses.length) notice('No cached courses yet. If setup or start is running, collection is in progress. Otherwise run npx dd2l setup (npm run setup from source).');
+  } finally { finish(); }
+}
+
+function reset() {
+  clearAnswer();
+  $('prompt').value = '';
+  $('model').value = '';
+  updateComposer();
+  $('results').hidden = true;
+  $('result-list').replaceChildren();
+  $('workspace').classList.remove('has-results');
+  $('prompt').focus();
+}
+
+async function search(browse = false) {
+  clearAnswer();
+  const query = $('prompt').value.trim();
+  if (!browse && !query) return;
+  request?.abort();
+  const current = request = new AbortController();
+  setBusy(true);
+  notice();
+  try {
+    const data = await api(`/api/search?${new URLSearchParams({ q: browse ? '' : query, course: $('course').value })}`, current.signal);
+    if (request !== current) return;
+    $('workspace').classList.add('has-results');
+    $('results').hidden = false;
+    $('results-title').textContent = browse ? 'Course materials' : 'Search results';
+    $('result-count').textContent = `${Math.min(30, data.total)} of ${data.total} sources`;
+    $('result-list').replaceChildren();
+    for (const source of data.results) {
+      const article = element('article', undefined, 'source');
+      article.append(element('div', `${source.courseName} · ${source.category.replaceAll('_', ' ')}`, 'source-meta'),
+        element('h3', source.title), element('p', source.excerpt));
+      const meta = element('div', `${source.stale ? 'Stale cache · ' : 'Cached · '}${date(source.lastSuccess)}`, `source-meta${source.stale ? ' stale' : ''}`);
+      article.append(meta);
+      if (!data.demo) {
+        const link = element('a', 'Open course in onQ ↗');
+        link.href = source.url;
+        link.target = '_blank';
+        link.rel = 'noopener noreferrer';
+        article.append(link);
+      }
+      $('result-list').append(article);
+    }
+    if (!data.total) $('result-list').append(element('p', 'No matching cached sources. Try a course name, topic, or assignment keyword. Only material already retrieved by the connector can appear here.', 'empty'));
+    $('results-title').focus();
+  } catch (error) {
+    if (error.name !== 'AbortError' && request === current) {
+      $('results').hidden = true;
+      notice(error.message);
+    }
+  } finally {
+    if (request === current) {
+      setBusy(false);
+    }
+  }
+}
+
+function openPanel(title) {
+  $('panel-title').textContent = title;
+  $('panel-body').replaceChildren();
+  if (!$('panel').open) $('panel').showModal();
+}
+
+async function showCourses() {
+  openPanel('Courses');
+  const finish = startLoading($('panel-loading'), 'Loading cached courses');
+  try {
+    await load();
+    $('panel-body').replaceChildren(element('p', 'Browse materials already collected from onQ.'));
+    for (const course of courses) {
+      const button = element('button', course.name, 'course-item');
+      button.type = 'button';
+      button.append(element('small', course.active ? 'Active course' : 'Historical course'));
+      button.addEventListener('click', () => {
+        $('course').value = course.id;
+        $('prompt').value = '';
+        $('panel').close();
+        search(true);
+      });
+      $('panel-body').append(button);
+    }
+    if (!courses.length) $('panel-body').append(element('p', 'No cached courses yet. Let setup finish collecting, then reopen Courses. To connect onQ, run npx dd2l setup (npm run setup from source).'));
+  } catch (error) { $('panel-body').replaceChildren(element('p', error.message)); }
+  finally { finish(); }
+}
+
+async function showStatus() {
+  openPanel('Connection status');
+  const finish = startLoading($('panel-loading'), 'Loading connection status');
+  try {
+    await load();
+    $('panel-body').replaceChildren(
+      element('p', status.demo ? 'Demo mode · fictional sample coursework. No school account is connected to this view.' : 'Local inventory · read-only. Local search stays on this device. Selecting a ChatGPT model and sending a question shares matching coursework with OpenAI.'),
+      element('p', `${status.courseCount} courses · ${status.sourceCount} searchable sources`),
+      element('p', `Connector: ${status.state?.state || 'Not synced'} · Last successful source: ${date(status.lastSuccess)}`),
+      element('p', 'Search uses keywords and cached excerpts. Missing sources and access restrictions mean coverage may be incomplete.'),
+      element('p', 'Setup and start collect coursework automatically while the terminal stays open.'),
+      element('p', 'If sign-in has expired, stop the app and run npx dd2l setup (npm run setup from source). For later launches use npx dd2l start (npm start -- start from source). Reopen Courses or search again to read the latest cache.'),
+    );
+    const connection = await api('/api/llm/status');
+    $('panel-body').append(element('h3', 'Use your ChatGPT plan'));
+    if (connection.disabled) { $('panel-body').append(element('p', 'Provider sign-in is disabled in demo mode. Start the live UI to connect ChatGPT.')); return; }
+    $('panel-body').append(element('p', 'Eligible answers use your ChatGPT plan and its usage limits. dd2l does not automatically switch to an API key. Select a model and send a question to share matching coursework for that answer.'));
+    const action = (label, handler) => {
+      const button = element('button', label, 'account-action');
+      button.type = 'button';
+      button.addEventListener('click', async () => {
+        button.disabled = true;
+        const finishAction = startLoading(button, `${label} in progress`);
+        try { await handler(); } catch (error) { $('panel-body').append(element('p', error.message)); }
+        finally { finishAction(); button.disabled = false; }
+      });
+      $('panel-body').append(button);
+    };
+    for (const account of connection.accounts) {
+      $('panel-body').append(element('p', `${account.label}${account.id === connection.active ? ' · Active' : ''}`));
+      action(account.connected ? 'Use this account' : 'Continue with ChatGPT', async () => {
+        if (account.connected) { clearAnswer(); await aiAction('select', { id: account.id }); await loadAI(); await showStatus(); }
+        else location.assign((await aiAction('login', { id: account.id })).url);
+      });
+      if (account.connected) action('Sign in again to this account', async () => location.assign((await aiAction('login', { id: account.id })).url));
+    }
+    action('Continue with ChatGPT', async () => location.assign((await aiAction('login')).url));
+    if (connection.active) action('Sign out of active ChatGPT account', async () => {
+      clearAnswer();
+      const result = await aiAction('logout');
+      await loadAI();
+      await showStatus();
+      $('panel-body').append(element('p', result.message));
+    });
+    const usage = element('a', 'Manage usage in ChatGPT');
+    usage.href = 'https://chatgpt.com/settings/usage'; usage.target = '_blank'; usage.rel = 'noopener noreferrer';
+    $('panel-body').append(usage);
+  } catch (error) { $('panel-body').replaceChildren(element('p', error.message)); }
+  finally { finish(); }
+}
+
+$('prompt').addEventListener('input', clearAnswer);
+$('model').addEventListener('change', () => { clearAnswer(); notice(); });
+$('search-form').addEventListener('submit', event => { event.preventDefault(); if ($('model').value) askAI(); else search(); });
+$('course').addEventListener('change', () => { const browsing = !$('results').hidden || !$('busy').hidden; clearAnswer(); if (browsing && !$('model').value) search(!$('prompt').value.trim()); });
+$('new-chat').addEventListener('click', reset);
+$('search-nav').addEventListener('click', () => $('prompt').focus());
+$('courses-nav').addEventListener('click', showCourses);
+$('settings-nav').addEventListener('click', showStatus);
+$('profile').addEventListener('click', showStatus);
+$('refresh-widgets').addEventListener('click', refreshWidgets);
+$('close-panel').addEventListener('click', () => $('panel').close());
+$('panel').addEventListener('click', event => { if (event.target === $('panel')) {
+  const rect = $('panel').getBoundingClientRect();
+  if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) $('panel').close();
+} });
+load().then(refreshWidgets).catch(error => notice(error.message));
+loadAI().catch(error => notice(error.message));

package/ui/assets/LUCIDE-LICENSE.txt

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/ui/assets/avatar.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle id="Ellipse 2" cx="20" cy="20" r="20" fill="#008ABD"/>
+</svg>

package/ui/assets/chevron.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Chevron down">
+<path id="Vector" d="M3.5 5.25L7 8.75L10.5 5.25" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round" stroke="#ABABAB"/>
+</g>
+</svg>

package/ui/assets/courses.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#bababa"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 7v14" />
+  <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
+</svg>