@ivanbard/dd2l 0.1.0 → 0.1.2

package/ui/answer-renderer.js

@@ -1,88 +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;
-}
+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

@@ -1,47 +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.' };
-}
+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: 24 }, 24, 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.
+export 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

@@ -1,10 +1,15 @@
 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);
@@ -13,6 +18,9 @@ let status;
 let courses = [];
 let request;
 let aiRequest;
+let assignmentContext;
+let taskContext;
+let defaultModel = '';
 let finishPromptLoading = () => {};
 
 function element(tag, text, className) {
@@ -41,6 +49,7 @@ async function loadAI() {
   try {
     clearAnswer();
     $('model').replaceChildren(new Option('Local search', ''));
+    defaultModel = '';
     updateComposer();
     const connection = await api('/api/llm/status');
     if (connection.active) {
@@ -49,6 +58,8 @@ async function loadAI() {
       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(); }
@@ -57,7 +68,8 @@ async function loadAI() {
 function updateComposer() {
   const model = $('model').value;
   $('model-sharing').hidden = !model;
-  $('model').setAttribute('aria-describedby', model ? 'model-sharing' : 'search-help');
+  $('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');
 }
@@ -93,22 +105,54 @@ async function askAI() {
   $('results').hidden = true;
   notice();
   try {
-    const data = await aiAction('answer', { q: $('prompt').value.trim(), course: $('course').value, model: $('model').value, consent: true }, current.signal);
+    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 || 'Your answer' : 'Your answer';
+    $('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', 'Open course in onQ ↗');
+      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';
@@ -143,14 +187,15 @@ async function load() {
     $('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).');
+    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 = '';
+  $('model').value = defaultModel;
   updateComposer();
   $('results').hidden = true;
   $('result-list').replaceChildren();
@@ -158,6 +203,27 @@ function reset() {
   $('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();
@@ -167,8 +233,14 @@ async function search(browse = false) {
   setBusy(true);
   notice();
   try {
-    const data = await api(`/api/search?${new URLSearchParams({ q: browse ? '' : query, course: $('course').value })}`, current.signal);
+    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';
@@ -220,6 +292,7 @@ async function showCourses() {
       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();
@@ -227,7 +300,7 @@ async function showCourses() {
       });
       $('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).'));
+    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(); }
 }
@@ -238,17 +311,17 @@ async function showStatus() {
   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.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', 'Search uses keywords and cached excerpts. Missing sources and access restrictions mean coverage may be incomplete.'),
+      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 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.'),
+      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 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.'));
+    $('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';
@@ -286,8 +359,18 @@ async function showStatus() {
 $('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()); });
+$('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);

package/ui/assets/widget-announcements.svg

@@ -1,4 +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>
+<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

@@ -1,5 +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>
+<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'));
+}