@ivanbard/dd2l 0.0.0-stage → 0.1.1

package/ui/app.js

@@ -0,0 +1,385 @@
+import { createWidgets } from './widgets.js';
+import { renderAnswerView } from './answer-renderer.js';
+import { startLoading } from './loading.js';
+import { renderAssignmentWorkspace } from './assignment-workspace.js';
+import { createCanvas } from './canvas.js';
+
+const $ = id => document.getElementById(id);
+const canvas = createCanvas($('canvas-host'), notice);
+let canvasSources = [];
+const refreshWidgets = createWidgets(async (course, title) => {
+  try { await load(); } catch (error) { notice(error.message); return; }
+  showAssignment(null);
+  $('course').value = course;
+  $('prompt').value = title;
+  search(!title);
+});
+let status;
+let courses = [];
+let request;
+let aiRequest;
+let assignmentContext;
+let taskContext;
+let defaultModel = '';
+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', ''));
+    defaultModel = '';
+    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);
+      defaultModel = models[0]?.id || '';
+      $('model').value = defaultModel;
+    }
+    updateComposer();
+  } finally { finish(); }
+}
+
+function updateComposer() {
+  const model = $('model').value;
+  $('model-sharing').hidden = !model;
+  $('adaptive-help').hidden = !!model;
+  $('model').setAttribute('aria-describedby', model ? 'model-sharing' : 'adaptive-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 previousCanvas = await canvas.snapshot();
+    if (aiRequest !== current) return;
+    const data = await aiAction('answer', { q: $('prompt').value.trim(), course: $('course').value,
+      context: taskContext || null, canvas: previousCanvas, model: $('model').value, consent: true }, current.signal);
+    if (aiRequest !== current) return;
+    $('workspace').classList.add('has-results');
+    if (data.workspace) {
+      showAssignment(data.workspace, status?.demo || false);
+      const stopped = data.workspace.research?.find(item => item.message);
+      if (stopped) notice(stopped.message);
+      if (data.workspace.kind === 'task') taskContext.summary = JSON.stringify({
+        question: data.workspace.question,
+        sections: data.workspace.sections.map(({ title, purpose }) => ({ title, purpose })),
+        answer: data.answer || '', view: data.view || null,
+      }).slice(0, 12_000);
+      if (data.workspace.question || data.answerWarning) {
+        if (data.answerWarning) notice(data.answerWarning);
+        $('assignment-heading').focus();
+        return;
+      }
+    }
+    if (data.canvas) {
+      const latestCanvas = await canvas.snapshot();
+      if (aiRequest !== current) return;
+      canvasSources = data.sources;
+      canvas.render(data.canvas, data.sources, latestCanvas?.state || previousCanvas?.state || {});
+      $('canvas-title').textContent = data.canvas.title;
+      $('canvas-workspace').hidden = false;
+      $('assignment-workspace').hidden = true;
+      $('canvas-sources').setAttribute('aria-expanded', 'false');
+      $('canvas-title').focus();
+      return;
+    }
+    $('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 || data.workspace?.title || 'Your answer' : data.workspace?.title || 'Your answer';
+    if (data.viewWarning) notice(data.viewWarning);
+    $('answer-sources').replaceChildren();
+    $('ai-answer').querySelector('.answer-sources-heading').hidden = data.workspace?.kind === 'task';
+    for (const [i, source] of data.sources.entries()) {
+      if (data.workspace?.kind === 'task') continue;
+      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', source.url.includes('/dropbox/') ? 'Open assignment in Brightspace ↗' : 'Open course in Brightspace ↗');
+      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 @ivanbard/dd2l setup (npm run setup from source).');
+  } finally { finish(); }
+}
+
+function reset() {
+  clearAnswer();
+  showAssignment(null);
+  $('prompt').value = '';
+  $('model').value = defaultModel;
+  updateComposer();
+  $('results').hidden = true;
+  $('result-list').replaceChildren();
+  $('workspace').classList.remove('has-results');
+  $('prompt').focus();
+}
+
+function searchParams(query) {
+  return new URLSearchParams({ q: query, course: $('course').value, assignment: assignmentContext?.course === $('course').value ? assignmentContext.id : '' });
+}
+
+function showAssignment(workspace, demo = false) {
+  if (!workspace || workspace.kind !== 'task') {
+    canvas.clear(); canvasSources = [];
+    $('canvas-workspace').hidden = true;
+  }
+  taskContext = workspace?.kind === 'task' ? workspace.context : workspace?.status === 'resolved'
+    ? { goal: `Work on ${workspace.title} in ${workspace.courseName}`, sourceIds: [] } : undefined;
+  assignmentContext = workspace?.status === 'resolved' ? { id: workspace.id, course: workspace.course } : undefined;
+  if (assignmentContext) $('course').value = assignmentContext.course;
+  renderAssignmentWorkspace($('assignment-workspace'), workspace, demo, choice => {
+    assignmentContext = { id: choice.id, course: choice.course };
+    $('course').value = choice.course;
+    if ($('model').value) askAI(); else search();
+  });
+  if (workspace) $('workspace').classList.add('has-results');
+}
+
+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?${searchParams(browse ? '' : query)}`, current.signal);
+    if (request !== current) return;
+    showAssignment(data.workspace, data.demo);
+    if (data.workspace) {
+      $('results').hidden = true;
+      $('assignment-heading').focus();
+      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', () => {
+        showAssignment(null);
+        $('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 @ivanbard/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. Sending with a ChatGPT model shares your request, course previews, selected materials and workspace progress 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', 'Select a ChatGPT model to build adaptive workspaces around your goals. Local mode uses keyword matching and assignment records. 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 @ivanbard/dd2l setup (npm run setup from source). For later launches use npx @ivanbard/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 workspace requests use your ChatGPT plan and its usage limits. Sending shares your request, course previews, selected materials and local workspace progress with OpenAI.'));
+    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 || !$('assignment-workspace').hidden || !$('busy').hidden; clearAnswer(); showAssignment(null); if (browsing && !$('model').value) search(!$('prompt').value.trim()); });
+$('new-chat').addEventListener('click', reset);
+$('canvas-sources').addEventListener('click', () => {
+  const show = $('assignment-workspace').hidden;
+  $('assignment-workspace').hidden = !show;
+  $('canvas-sources').setAttribute('aria-expanded', String(show));
+  if (show) $('assignment-heading')?.focus();
+});
+$('canvas-restart').addEventListener('click', async () => {
+  try { const current = await canvas.snapshot(); if (current) canvas.render(current.program, canvasSources, {}); }
+  catch (error) { notice(error.message); }
+});
+$('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>

package/ui/assets/logo.svg

@@ -0,0 +1,13 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="logo">
+<circle id="Ellipse 6" cx="4.33333" cy="4.33333" r="4.33333" fill="white" fill-opacity="0.1"/>
+<circle id="Ellipse 7" cx="15" cy="4.33333" r="4.33333" fill="white"/>
+<circle id="Ellipse 8" cx="25.6667" cy="4.33333" r="4.33333" fill="white" fill-opacity="0.1"/>
+<circle id="Ellipse 3" cx="4.33333" cy="15" r="4.33333" fill="white"/>
+<circle id="Ellipse 4" cx="15" cy="15" r="4.33333" fill="white"/>
+<circle id="Ellipse 5" cx="25.6667" cy="15" r="4.33333" fill="white"/>
+<circle id="Ellipse 9" cx="4.33333" cy="25.6667" r="4.33333" fill="white" fill-opacity="0.1"/>
+<circle id="Ellipse 10" cx="15" cy="25.6667" r="4.33333" fill="white"/>
+<circle id="Ellipse 11" cx="25.6667" cy="25.6667" r="4.33333" fill="white" fill-opacity="0.1"/>
+</g>
+</svg>

package/ui/assets/new-chat.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 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+  <path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" />
+</svg>

package/ui/assets/search.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"
+>
+  <circle cx="11" cy="11" r="8" />
+  <path d="m21 21-4.3-4.3" />
+</svg>

package/ui/assets/send.svg

@@ -0,0 +1,8 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Send-Greyed">
+<circle id="Ellipse 1" cx="16" cy="16" r="16" fill="#525252"/>
+<g id="Arrow up">
+<path id="Icon" d="M16 21.6V10.4M21.6 16L16 10.4L10.4 16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="#353535"/>
+</g>
+</g>
+</svg>

package/ui/assets/settings.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.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+  <circle cx="12" cy="12" r="3" />
+</svg>

package/ui/assets/widget-announcements.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" fill="none">
+  <defs><pattern id="dots" width="4" height="4" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r=".9" fill="#c2c3ae"/></pattern></defs>
+  <g fill="url(#dots)"><circle cx="160" cy="72" r="47"/><circle cx="244" cy="133" r="47"/><circle cx="212" cy="231" r="47"/><circle cx="108" cy="231" r="47"/><circle cx="76" cy="133" r="47"/></g>
+</svg>

package/ui/assets/widget-shortcuts.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" fill="none">
+  <defs><pattern id="dots" width="4" height="4" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r=".9" fill="#c9c0ad"/></pattern></defs>
+  <path d="M40 99h81L39 181l35 35 82-82v81h49V50H40z" fill="url(#dots)"/>
+  <path d="M143 154h65l-66 66 28 28 66-66v65h39V115H143z" fill="url(#dots)" opacity=".4"/>
+</svg>

package/ui/assignment-workspace.js

@@ -0,0 +1,106 @@
+const element = (tag, text, className) => {
+  const node = document.createElement(tag);
+  if (text !== undefined) node.textContent = text;
+  if (className) node.className = className;
+  return node;
+};
+const date = value => value ? new Date(value).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : 'Not retrieved';
+const labels = { missing: 'Not retrieved', inaccessible: 'Inaccessible', not_configured: 'Not configured', stale: 'Stale cache', available: 'Cached' };
+
+function sourceLink(source, demo, label = 'Open assignment in Brightspace ↗') {
+  if (demo) return element('small', 'Demo · sample coursework', 'source-meta');
+  const link = element('a', label);
+  link.href = source.url;
+  link.target = '_blank';
+  link.rel = 'noopener noreferrer';
+  return link;
+}
+
+export function renderAssignmentWorkspace(target, workspace, demo, choose) {
+  target.replaceChildren();
+  target.hidden = !workspace;
+  if (!workspace) return;
+  if (workspace.kind === 'task') { renderTask(target, workspace, demo); return; }
+  const heading = element('h2', workspace.status === 'resolved' ? workspace.title : workspace.status === 'choose' ? 'Which assignment?' : 'Assignment not found');
+  heading.id = 'assignment-heading';
+  heading.tabIndex = -1;
+  target.append(heading);
+  if (workspace.status !== 'resolved') {
+    target.append(element('p', workspace.status === 'choose' ? 'Choose the assignment you want to work on.' : 'No matching assignment in the accessible cache. Try another course or refresh after collection finishes.'));
+    for (const choice of workspace.choices) {
+      const button = element('button', `${choice.courseName} · ${choice.title}`, 'course-item');
+      button.type = 'button';
+      button.addEventListener('click', () => choose(choice));
+      target.append(button);
+    }
+    return;
+  }
+  target.append(element('p', `${workspace.courseName} · ${workspace.stale ? 'Stale cache' : 'Cached'} · ${date(workspace.lastSuccess)}`, 'source-meta'));
+  const overview = element('article', undefined, 'widget assignment-overview');
+  overview.append(element('p', workspace.intent === 'submit' ? 'SUBMISSION CHECK' : 'YOUR ASSIGNMENT', 'eyebrow'),
+    element('h3', `Due ${date(workspace.dueDate)}`), element('p', workspace.submissionStatus),
+    element('p', `Opens ${date(workspace.startDate)} · Closes ${date(workspace.endDate)}`, 'source-meta'),
+    sourceLink(workspace, demo, 'Open submission dropbox in Brightspace ↗'));
+  target.append(overview);
+  const grid = element('div', undefined, 'assignment-grid');
+  for (const record of [...workspace.records, ...workspace.supporting]) {
+    const card = element('article', undefined, 'widget assignment-card');
+    card.dataset.category = record.category;
+    card.append(element('p', record.reason || labels[record.status], 'eyebrow'), element('h3', record.title));
+    if (record.text) {
+      const details = element('details');
+      details.open = ['instructions', 'rubric'].includes(record.category);
+      details.append(element('summary', 'Read source'), element('p', record.text, 'assignment-text'));
+      card.append(details);
+    } else card.append(element('p', record.status === 'available' ? 'No text in the cached response. Check Brightspace for details.' : `${labels[record.status]}. Check Brightspace or refresh after collection finishes.`));
+    card.append(element('p', `${labels[record.status]} · Last retrieved ${date(record.lastSuccess)}`, 'source-meta'), sourceLink(record, demo,
+      record.reason ? 'Open source in Brightspace ↗' : 'Open assignment in Brightspace ↗'));
+    grid.append(card);
+  }
+  target.append(grid, element('p', 'Follow-up questions use this assignment. Choose New search or change course to clear it. Cached submissions do not confirm current submission status.', 'retrieval-note'));
+}
+
+function renderTask(target, workspace, demo) {
+  const heading = element('h2', workspace.title);
+  heading.id = 'assignment-heading';
+  heading.tabIndex = -1;
+  target.append(element('p', 'YOUR WORKSPACE', 'eyebrow'), heading, element('p', workspace.goal));
+  if (workspace.research?.length) {
+    const live = element('div', undefined, 'research-status');
+    live.append(element('p', `Checked Brightspace during this request · ${workspace.research.length} connector operations`, 'retrieval-note'));
+    for (const item of workspace.research) live.append(element('p', `${item.section}: ${item.outcome}${item.message ? ` · ${item.message}` : ''}`, 'source-meta'));
+    target.append(live);
+  }
+  if (workspace.question) {
+    const question = element('p', workspace.question, 'notice');
+    question.setAttribute('role', 'status');
+    target.append(question);
+  }
+  if (workspace.catalogueCount < workspace.total) target.append(element('p',
+    `Planned from ${workspace.catalogueCount} of ${workspace.total} cached records. Narrow the course or describe the missing topic if needed.`, 'retrieval-note'));
+  for (const section of workspace.sections) {
+    const group = element('section', undefined, 'task-section');
+    group.append(element('h3', section.title), element('p', section.purpose, 'retrieval-note'));
+    const grid = element('div', undefined, 'assignment-grid');
+    for (const source of section.sources) {
+      const card = element('article', undefined, 'widget assignment-card');
+      card.dataset.category = source.category;
+      const citation = workspace.context.sourceIds.indexOf(source.id) + 1;
+      if (citation && !target.querySelector(`#answer-source-${citation}`)) {
+        card.id = `answer-source-${citation}`;
+        card.tabIndex = -1;
+      }
+      card.append(element('p', `${source.courseName} · ${labels[source.status] || 'Cached'}`, 'eyebrow'), element('h4', source.title));
+      if (source.dueDate) card.append(element('p', `Due ${date(source.dueDate)}`));
+      const details = element('details');
+      details.open = section.sources.length <= 3;
+      details.append(element('summary', 'Read source'), element('p', source.text, 'assignment-text'));
+      card.append(details, element('p', `${source.stale ? 'Stale cache' : labels[source.status] || 'Cached'} · Last retrieved ${date(source.lastSuccess)}`, 'source-meta'),
+        sourceLink(source, demo, source.url.includes('/dropbox/') ? 'Open assignment in Brightspace ↗' : 'Open course in Brightspace ↗'));
+      grid.append(card);
+    }
+    group.append(grid);
+    target.append(group);
+  }
+  target.append(element('p', 'Describe what you want to do next to adapt this workspace. New search clears its goal. All records reflect the local cache.', 'retrieval-note'));
+}