Redesign student UI and add OnlyOffice document integration

- Student section: new hero gradient header, fixed bottom nav bar with
  icon+label pills (Today/Courses/Spelling/Inbox/Docs)
- Today rows: card style with left accent stripe, lift on hover
- Course cards: grid layout with top color bar per course
- Docs tab: list view with doc cards, OnlyOffice editor embedded via
  iframe using server-signed JWT config
- Server: documents table, CRUD routes, OnlyOffice callback endpoint
  for auto-save, /api/docs/:id/editor-config returns signed config
- Blank DOCX template embedded as base64 for new document creation
- OnlyOffice server: https://onlyoffice.necloud.us (set ONLYOFFICE_JWT_SECRET
  env var to match your Document Server JWT secret)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

db.js

@@ -244,6 +244,19 @@ tryAlter(`ALTER TABLE lists ADD COLUMN group_name TEXT NOT NULL DEFAULT ''`);
 tryAlter(`ALTER TABLE decks ADD COLUMN group_name TEXT NOT NULL DEFAULT ''`);
 tryAlter(`ALTER TABLE tests ADD COLUMN item_id INTEGER`);
 
+db.exec(`CREATE TABLE IF NOT EXISTS documents (
+  id INTEGER PRIMARY KEY,
+  student_id INTEGER NOT NULL REFERENCES students(id) ON DELETE CASCADE,
+  title TEXT NOT NULL DEFAULT 'Untitled Document',
+  doc_key TEXT NOT NULL UNIQUE,
+  filename TEXT NOT NULL,
+  submitted INTEGER NOT NULL DEFAULT 0,
+  submitted_at TEXT,
+  parent_read INTEGER NOT NULL DEFAULT 0,
+  created_at TEXT NOT NULL DEFAULT (datetime('now')),
+  updated_at TEXT NOT NULL DEFAULT (datetime('now'))
+)`);
+
 export const sha256 = (s) => createHash('sha256').update(String(s)).digest('hex');
 
 // Default parent PIN on first run

public/admin.js

@@ -216,7 +216,7 @@ async function loadDashboard() {
 
     const scores = recentScores.scores || recentScores || [];
     scoresEl.innerHTML = scores.length ? scores.slice(0, 8).map(sc => {
-      const pct = sc.total > 0 ? Math.round(sc.score / sc.total * 100) : null;
+      const pct = sc.points_possible > 0 ? Math.round(sc.score / sc.points_possible * 100) : null;
       const cls = pct === null ? '' : pct >= 80 ? '' : pct >= 60 ? ' mid' : ' low';
       const kidName = students.find(s => s.id === sc.student_id)?.name || '';
       return `<div class="dash-score-item">

public/app.js

@@ -313,7 +313,7 @@ document.querySelectorAll('.nav-pill').forEach((pill) =>
   pill.addEventListener('click', () => switchTab(pill.dataset.tab))
 );
 
-const TAB_ORDER = ['today', 'courses', 'spelling', 'inbox'];
+const TAB_ORDER = ['today', 'courses', 'spelling', 'inbox', 'docs'];
 let currentTab = 'today';
 
 function switchTab(name) {
@@ -331,6 +331,7 @@ function switchTab(name) {
     }
   });
   if (name === 'inbox') loadInbox();
+  if (name === 'docs') loadDocs();
 }
 
 function inboxSeenKey(studentId) { return `inbox_seen_${studentId}`; }
@@ -2518,6 +2519,117 @@ $('#btn-test').addEventListener('click', () => {
   startTest();
 });
 
+// ---------- docs (OnlyOffice) ----------
+
+let docsEditorInstance = null;
+let currentDocId = null;
+
+async function loadDocs() {
+  const sid = currentStudent?.id;
+  if (!sid) return;
+  const { docs } = await api(`/api/docs?studentId=${sid}`);
+  const list = $('#docs-list');
+  const empty = $('#docs-empty');
+  if (!docs.length) {
+    list.innerHTML = '';
+    empty.hidden = false;
+    return;
+  }
+  empty.hidden = true;
+  list.innerHTML = docs.map((d) => `
+    <div class="doc-card${d.submitted ? ' doc-submitted' : ''}" data-id="${d.id}" data-key="${esc(d.doc_key)}" data-title="${esc(d.title)}">
+      <div class="doc-card-icon">📄</div>
+      <div class="doc-card-info">
+        <div class="doc-card-title">${esc(d.title)}</div>
+        <div class="doc-card-meta">${d.submitted ? '✓ Submitted' : 'Draft'} · ${new Date(d.updated_at + 'Z').toLocaleDateString()}</div>
+      </div>
+      <button class="doc-delete-btn" data-id="${d.id}" aria-label="Delete">🗑</button>
+    </div>
+  `).join('');
+
+  list.querySelectorAll('.doc-card').forEach((card) => {
+    card.addEventListener('click', (e) => {
+      if (e.target.closest('.doc-delete-btn')) return;
+      openDocEditor(+card.dataset.id, card.dataset.key, card.dataset.title);
+    });
+  });
+  list.querySelectorAll('.doc-delete-btn').forEach((btn) => {
+    btn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      if (!confirm('Delete this document?')) return;
+      await api(`/api/docs/${btn.dataset.id}`, { method: 'DELETE' });
+      loadDocs();
+    });
+  });
+}
+
+async function openDocEditor(id, key, title) {
+  currentDocId = id;
+  $('#docs-list-view').hidden = true;
+  $('#docs-editor-view').hidden = false;
+  $('#docs-editor-title').textContent = title;
+  $('#btn-docs-submit').disabled = false;
+  $('#btn-docs-submit').textContent = 'Submit to Parent ✓';
+
+  const frame = $('#docs-editor-frame');
+  frame.innerHTML = '';
+  if (docsEditorInstance) {
+    try { docsEditorInstance.destroyEditor(); } catch { /* ignore */ }
+    docsEditorInstance = null;
+  }
+
+  const { onlyofficeUrl, config } = await api(`/api/docs/${id}/editor-config`).catch(() => null) || {};
+  if (!onlyofficeUrl || !config) {
+    frame.innerHTML = `<div class="docs-error">Could not load document config from server.</div>`;
+    return;
+  }
+
+  const apiScript = `${onlyofficeUrl}/web-apps/apps/api/documents/api.js`;
+
+  function initEditor() {
+    docsEditorInstance = new window.DocsAPI.DocEditor('docs-editor-frame', config);
+  }
+
+  if (window.DocsAPI) {
+    initEditor();
+  } else {
+    const s = document.createElement('script');
+    s.src = apiScript;
+    s.onload = initEditor;
+    s.onerror = () => {
+      frame.innerHTML = `<div class="docs-error">Could not load OnlyOffice editor from <code>${onlyofficeUrl}</code>. Make sure the server at <strong>${onlyofficeUrl}</strong> is reachable from this device.</div>`;
+    };
+    document.head.appendChild(s);
+  }
+}
+
+$('#btn-new-doc').addEventListener('click', async () => {
+  const title = prompt('Document title:', 'Untitled Document');
+  if (!title) return;
+  const { id, key } = await api('/api/docs', { method: 'POST', body: { studentId: currentStudent.id, title } });
+  loadDocs();
+  openDocEditor(id, key, title);
+});
+
+$('#btn-docs-back').addEventListener('click', () => {
+  if (docsEditorInstance) {
+    try { docsEditorInstance.destroyEditor(); } catch { /* ignore */ }
+    docsEditorInstance = null;
+  }
+  $('#docs-editor-frame').innerHTML = '';
+  $('#docs-editor-view').hidden = true;
+  $('#docs-list-view').hidden = false;
+  loadDocs();
+});
+
+$('#btn-docs-submit').addEventListener('click', async () => {
+  if (!currentDocId) return;
+  if (!confirm('Submit this document to your parent?')) return;
+  await api(`/api/docs/${currentDocId}/submit`, { method: 'POST' });
+  $('#btn-docs-submit').textContent = '✓ Submitted!';
+  $('#btn-docs-submit').disabled = true;
+});
+
 // ---------- boot ----------
 
 loadHome();

public/index.html

@@ -44,6 +44,7 @@
 
   <!-- Kid home: Today's work + nav -->
   <section id="view-kid" class="view" hidden>
+    <div class="kid-hero">
       <div class="kid-topbar">
         <button class="back-btn" data-nav="home">← Switch</button>
         <div class="kid-topbar-actions">
@@ -53,6 +54,7 @@
         </div>
       </div>
       <h1 id="kid-greeting"></h1>
+    </div>
     <div id="theme-dots" class="theme-dots" hidden>
       <button class="theme-dot theme-blue"   data-theme="blue"   title="Blue"></button>
       <button class="theme-dot theme-green"  data-theme="green"  title="Green"></button>
@@ -75,10 +77,11 @@
     </div>
 
     <div class="kid-nav">
-      <button class="nav-pill active" data-tab="today">📋 Today</button>
+      <button class="nav-pill active" data-tab="today"><span class="np-icon">📋</span><span class="np-label">Today</span></button>
-      <button class="nav-pill" data-tab="courses">📚 My Courses</button>
+      <button class="nav-pill" data-tab="courses"><span class="np-icon">📚</span><span class="np-label">Courses</span></button>
-      <button class="nav-pill" data-tab="spelling">✏️ Spelling</button>
+      <button class="nav-pill" data-tab="spelling"><span class="np-icon">✏️</span><span class="np-label">Spelling</span></button>
-      <button class="nav-pill" data-tab="inbox">📬 Inbox<span id="inbox-badge" class="feedback-badge" hidden></span></button>
+      <button class="nav-pill" data-tab="inbox"><span class="np-icon">📬</span><span class="np-label">Inbox<span id="inbox-badge" class="feedback-badge" hidden></span></span></button>
+      <button class="nav-pill" data-tab="docs"><span class="np-icon">📝</span><span class="np-label">Docs</span></button>
     </div>
 
     <div id="tab-today" class="tab-panel">
@@ -124,6 +127,24 @@
         </form>
       </div>
     </div>
+
+    <div id="tab-docs" class="tab-panel" hidden>
+      <div id="docs-list-view">
+        <div class="docs-toolbar">
+          <button id="btn-new-doc" class="docs-new-btn">+ New Document</button>
+        </div>
+        <div id="docs-list"></div>
+        <p id="docs-empty" class="hint" hidden>No documents yet — tap + New Document to start writing!</p>
+      </div>
+      <div id="docs-editor-view" hidden>
+        <div class="docs-editor-toolbar">
+          <button id="btn-docs-back" class="docs-back-btn">← Back</button>
+          <span id="docs-editor-title" class="docs-editor-title-text"></span>
+          <button id="btn-docs-submit" class="docs-submit-btn">Submit to Parent ✓</button>
+        </div>
+        <div id="docs-editor-frame"></div>
+      </div>
+    </div>
   </section>
 
   <!-- All-done celebration overlay -->

public/styles.css

@@ -259,11 +259,72 @@ body:has(#view-home:not([hidden])) .page-confetti { display: block; }
 
 /* ============================================================ KID HOME (inner) */
 
+/* Full-width hero with kid accent gradient */
+#view-kid {
+  max-width: 100%;
+  padding: 0 0 5rem;
+  text-align: left;
+}
+
+.kid-hero {
+  background: linear-gradient(160deg, var(--kid-accent, var(--accent)) 0%,
+              color-mix(in srgb, var(--kid-accent, var(--accent)) 55%, #0d1b3e) 100%);
+  padding-bottom: 2rem;
+  position: relative;
+  overflow: hidden;
+}
+.kid-hero::before {
+  content: '';
+  position: absolute; inset: 0; pointer-events: none;
+  background: radial-gradient(circle at 80% -10%, rgba(255,255,255,.15) 0%, transparent 55%);
+}
+
+#view-kid .kid-topbar {
+  background: rgba(0,0,0,.12);
+  padding: .65rem 1.1rem;
+  border-bottom: none;
+}
+#view-kid .back-btn {
+  background: rgba(255,255,255,.18);
+  border-color: rgba(255,255,255,.25);
+  color: #fff;
+  backdrop-filter: blur(8px);
+}
+#view-kid .back-btn:hover {
+  background: rgba(255,255,255,.28);
+  color: #fff;
+}
+#view-kid .theme-picker-btn {
+  background: rgba(255,255,255,.18);
+  border: 1.5px solid rgba(255,255,255,.25);
+  color: #fff;
+}
+#view-kid .theme-picker-btn:hover { background: rgba(255,255,255,.28); }
+
 #kid-greeting {
   font-family: var(--font-kid);
-  font-size: 2rem;
+  font-size: 2.2rem;
-  font-weight: 800;
+  font-weight: 900;
-  margin: 1rem 0; clear: both;
+  color: #fff;
+  text-shadow: 0 2px 12px rgba(0,0,0,.18);
+  padding: .75rem 1.5rem 0;
+  margin: 0;
+  clear: both;
+  position: relative;
+  z-index: 1;
+}
+
+.streak-pill {
+  display: inline-block;
+  background: rgba(255,255,255,.2);
+  color: #fff;
+  border-radius: 999px;
+  padding: .3rem .9rem;
+  font-size: .88rem; font-weight: 700;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255,255,255,.25);
+  margin: .5rem 0 0 1.5rem;
+  position: relative; z-index: 1;
 }
 
 .week-card {
@@ -566,65 +627,123 @@ table.results tr:hover td { background: #fafbff; }
   color: var(--accent); text-decoration: underline; cursor: pointer; font-size: .9rem;
 }
 
-/* ============================================================ KID NAV PILLS */
+/* ============================================================ KID NAV PILLS — BOTTOM BAR */
 
 .kid-nav {
-  display: flex; gap: .4rem; justify-content: center;
+  position: fixed;
-  margin: .5rem 0 1.5rem; clear: both; flex-wrap: wrap;
+  bottom: 0; left: 0; right: 0;
+  display: flex; justify-content: space-around;
+  background: var(--card);
+  border-top: 1.5px solid var(--border);
+  padding: .45rem .5rem .6rem;
+  z-index: 100;
+  box-shadow: 0 -4px 24px rgba(0,0,0,.08);
 }
-.nav-pill {
-  font-family: var(--font-kid);
-  font-size: .95rem; font-weight: 700;
-  background: rgba(0,0,0,.05); color: var(--ink-2);
-  border: 1.5px solid var(--border);
-  border-radius: 999px; padding: .45rem 1.1rem; cursor: pointer;
-  transition: background .15s, color .15s, border-color .15s;
-}
-.nav-pill:hover { background: rgba(0,0,0,.08); color: var(--ink); }
-.nav-pill.active {
-  background: var(--accent); color: #fff; border-color: var(--accent);
-}
-.nav-pill.active:hover { background: var(--accent-dark); }
 
-.tab-panel { text-align: left; }
+.nav-pill {
+  flex: 1;
+  display: flex; flex-direction: column; align-items: center; gap: .15rem;
+  font-family: var(--font-kid);
+  font-size: .62rem; font-weight: 700; letter-spacing: .01em;
+  background: none; color: var(--muted);
+  border: none;
+  border-radius: 12px;
+  padding: .4rem .25rem .25rem;
+  cursor: pointer;
+  transition: color .15s, background .15s;
+  line-height: 1.1;
+  min-width: 0;
+}
+.nav-pill .np-icon { font-size: 1.35rem; line-height: 1; display: block; transition: transform .15s; }
+.nav-pill .np-label { display: block; white-space: nowrap; }
+.nav-pill:hover { color: var(--ink); }
+.nav-pill:hover .np-icon { transform: translateY(-2px); }
+.nav-pill.active { color: var(--kid-accent, var(--accent)); }
+.nav-pill.active .np-icon { filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); transform: translateY(-2px); }
+
+/* Admin nav pills still need old behaviour — scoped below in admin section */
+
+.tab-panel {
+  text-align: left;
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 1.25rem 1.25rem 1.5rem;
+}
 @keyframes tab-slide-right { from { transform: translateX(48px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
 @keyframes tab-slide-left  { from { transform: translateX(-48px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
 .tab-panel.sliding-right { animation: tab-slide-right .24s ease; }
 .tab-panel.sliding-left  { animation: tab-slide-left  .24s ease; }
 
+/* Pickers appear below the hero but above the tab panels */
+#view-kid #theme-dots,
+#view-kid #icon-grid,
+#view-kid #bg-pattern-panel {
+  max-width: 640px;
+  margin: .75rem auto 0;
+  padding: 0 1.25rem;
+}
+
 /* ============================================================ TODAY ROWS */
 
+.today-list { display: flex; flex-direction: column; gap: .65rem; }
+
 .today-row {
-  display: flex; align-items: center; gap: .85rem; width: 100%;
+  display: flex; align-items: center; gap: 1rem; width: 100%;
-  background: var(--card); border: 1.5px solid var(--border);
+  background: var(--card);
-  border-radius: var(--radius); padding: 1rem 1.15rem;
+  border: none;
-  margin: .45rem 0; cursor: pointer; text-align: left;
+  border-radius: 16px;
+  padding: 1.1rem 1.25rem 1.1rem 1.5rem;
+  margin: 0; cursor: pointer; text-align: left;
   font-family: inherit;
-  transition: border-color .15s, box-shadow .15s, transform .1s;
+  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1.5px var(--border);
+  transition: transform .15s ease, box-shadow .15s ease;
+  position: relative; overflow: hidden;
+}
+.today-row::before {
+  content: '';
+  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
+  background: var(--accent);
+  border-radius: 4px 0 0 4px;
 }
 .today-row:hover {
-  border-color: var(--accent); box-shadow: var(--shadow-sm);
+  transform: translateY(-2px);
-  transform: translateX(2px);
+  box-shadow: 0 6px 20px rgba(0,0,0,.1), 0 0 0 1.5px var(--border-hover);
 }
-.today-row .row-check { font-size: 1.35rem; flex-shrink: 0; }
+.today-row .row-check { font-size: 1.4rem; flex-shrink: 0; width: 2rem; text-align: center; }
-.today-row .row-title { flex: 1; font-size: 1rem; font-weight: 700; color: var(--ink); }
+.today-row .row-title { flex: 1; font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
-.today-row .row-title small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; }
+.today-row .row-title small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; margin-top: .12rem; }
-.today-row .row-badge { font-size: .82rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
+.today-row .row-badge { font-size: .78rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
 
 /* ============================================================ COURSE CARDS */
 
-.course-cards { display: flex; flex-direction: column; gap: .65rem; }
+.course-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: .85rem;
+}
 .course-card {
   display: flex; flex-direction: column; gap: .35rem; text-align: left;
-  background: var(--card); border: 1.5px solid var(--border);
+  background: var(--card);
-  border-left: 5px solid var(--accent);
+  border: none;
-  border-radius: var(--radius); padding: 1rem 1.2rem; cursor: pointer; font-family: inherit;
+  border-radius: 16px;
-  transition: border-color .15s, box-shadow .15s, transform .1s;
+  padding: 1.25rem 1.3rem;
+  cursor: pointer; font-family: inherit;
+  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1.5px var(--border);
+  transition: transform .15s ease, box-shadow .15s ease;
+  position: relative; overflow: hidden;
 }
-.course-card:hover { box-shadow: var(--shadow); transform: translateX(2px); }
+.course-card::before {
-.course-card strong { font-size: 1.1rem; }
+  content: '';
-.course-subject { color: var(--muted); font-size: .875rem; }
+  position: absolute; top: 0; left: 0; right: 0; height: 5px;
-.course-pct { font-size: .82rem; color: var(--muted); }
+  background: var(--course-color, var(--accent));
+}
+.course-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 0 0 1.5px var(--border-hover);
+}
+.course-card strong { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
+.course-subject { color: var(--muted); font-size: .82rem; }
+.course-pct { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
 
 /* ============================================================ UNIT BLOCKS (shared) */
 
@@ -2040,3 +2159,60 @@ body.bg-bubbles {
 @media (prefers-color-scheme: dark) {
   .ws-blank-input { color: #e2e8f0; }
 }
+
+/* ============================================================ DOCS TAB */
+
+.docs-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
+.docs-new-btn {
+  background: var(--accent); color: #fff; border: none;
+  border-radius: 12px; padding: .6rem 1.2rem; font-size: .95rem; font-weight: 700;
+  cursor: pointer; font-family: inherit; transition: opacity .15s;
+}
+.docs-new-btn:hover { opacity: .85; }
+
+.doc-card {
+  display: flex; align-items: center; gap: 1rem;
+  background: var(--card); border: none; border-radius: 16px;
+  padding: 1rem 1.25rem; margin-bottom: .65rem; cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1.5px var(--border);
+  transition: transform .15s, box-shadow .15s;
+}
+.doc-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1), 0 0 0 1.5px var(--border-hover); }
+.doc-card.doc-submitted { border-left: 4px solid #22c55e; }
+.doc-card-icon { font-size: 2rem; flex-shrink: 0; }
+.doc-card-info { flex: 1; }
+.doc-card-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
+.doc-card-meta { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
+.doc-delete-btn {
+  background: none; border: none; cursor: pointer; font-size: 1.1rem;
+  opacity: .5; padding: .25rem; border-radius: 8px; transition: opacity .15s;
+}
+.doc-delete-btn:hover { opacity: 1; background: #fee2e2; }
+
+.docs-editor-toolbar {
+  display: flex; align-items: center; gap: .75rem;
+  padding: .75rem 1.25rem; background: var(--card);
+  border-bottom: 1.5px solid var(--border);
+}
+.docs-back-btn {
+  background: none; border: 1.5px solid var(--border); color: var(--ink);
+  border-radius: 8px; padding: .4rem .85rem; font-size: .88rem; font-weight: 600;
+  cursor: pointer; font-family: inherit; white-space: nowrap;
+}
+.docs-editor-title-text { flex: 1; font-size: 1rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.docs-submit-btn {
+  background: #22c55e; color: #fff; border: none;
+  border-radius: 8px; padding: .4rem .85rem; font-size: .88rem; font-weight: 700;
+  cursor: pointer; font-family: inherit; white-space: nowrap; transition: opacity .15s;
+}
+.docs-submit-btn:hover { opacity: .85; }
+.docs-submit-btn:disabled { background: var(--muted); opacity: .6; cursor: default; }
+
+#docs-editor-view { display: flex; flex-direction: column; height: calc(100vh - 11rem); }
+#docs-editor-frame { flex: 1; }
+#docs-editor-frame iframe { width: 100%; height: 100%; border: none; }
+
+.docs-error { padding: 1.5rem; color: var(--muted); font-size: .9rem; }
+.docs-error code { background: var(--surface); padding: .1rem .4rem; border-radius: 4px; }
+
+#tab-docs .tab-panel { padding: 1.25rem; }

server.js

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'node:url';
 import { spawnSync } from 'node:child_process';
 import { existsSync, mkdirSync, readFileSync, readdirSync, statSync } from 'node:fs';
 import { readFile, writeFile, unlink } from 'node:fs/promises';
-import { createHash, randomUUID } from 'node:crypto';
+import { createHash, createHmac, randomUUID } from 'node:crypto';
 import mammoth from 'mammoth';
 import multer from 'multer';
 import { db, sha256 } from './db.js';
@@ -15,6 +15,19 @@ const TTS_CACHE = join(DATA_DIR, 'tts-cache');
 mkdirSync(TTS_CACHE, { recursive: true });
 const ATTACHMENTS_DIR = join(DATA_DIR, 'attachments');
 mkdirSync(ATTACHMENTS_DIR, { recursive: true });
+const DOCS_DIR = join(DATA_DIR, 'docs');
+mkdirSync(DOCS_DIR, { recursive: true });
+const ONLYOFFICE_URL = (process.env.ONLYOFFICE_URL || 'https://onlyoffice.necloud.us').replace(/\/$/, '');
+const SERVER_URL = (process.env.SERVER_URL || 'http://localhost:3002').replace(/\/$/, '');
+const ONLYOFFICE_JWT_SECRET = process.env.ONLYOFFICE_JWT_SECRET || '';
+
+function jwtSign(payload) {
+  if (!ONLYOFFICE_JWT_SECRET) return undefined;
+  const header = Buffer.from(JSON.stringify({ alg: 'HS256', typ: 'JWT' })).toString('base64url');
+  const body = Buffer.from(JSON.stringify(payload)).toString('base64url');
+  const sig = createHmac('sha256', ONLYOFFICE_JWT_SECRET).update(`${header}.${body}`).digest('base64url');
+  return `${header}.${body}.${sig}`;
+}
 const PIPER_BIN = process.env.PIPER_BIN || 'piper';
 const PIPER_MODEL = process.env.PIPER_MODEL || join(ROOT, 'voices', 'en_US-lessac-medium.onnx');
 const PIPER_OK = existsSync(PIPER_MODEL);
@@ -838,10 +851,10 @@ app.get('/api/admin/schedule', requirePin, (req, res) => {
 
 app.get('/api/admin/recent-scores', requirePin, (req, res) => {
   const scores = db.prepare(`
-    SELECT s.id, s.student_id, i.title, s.score, s.total, s.submitted_at
+    SELECT s.id, s.student_id, i.title, s.score, s.points_possible, s.completed_at
     FROM submissions s
     JOIN items i ON i.id = s.item_id
-    ORDER BY s.submitted_at DESC
+    ORDER BY s.completed_at DESC
     LIMIT 20
   `).all();
   res.json({ scores });
@@ -2435,6 +2448,134 @@ app.post('/api/admin/upload-attachment', requirePin, async (req, res) => {
   return res.json({ url: `/api/attachments/${filename}`, htmlBody, originalName });
 });
 
+// ── Documents (OnlyOffice) ────────────────────────────────────────────────────
+
+app.use('/api/docs/file', express.static(DOCS_DIR));
+
+app.get('/api/docs', (req, res) => {
+  const { studentId } = req.query;
+  if (!studentId) return res.status(400).json({ error: 'studentId required' });
+  const docs = db.prepare(`SELECT id, title, doc_key, submitted, submitted_at, parent_read, created_at, updated_at FROM documents WHERE student_id = ? ORDER BY updated_at DESC`).all(studentId);
+  res.json({ docs });
+});
+
+// Minimal blank DOCX (base64-encoded zip/OOXML)
+const BLANK_DOCX = Buffer.from(
+  'UEsDBBQAAAAIADtxU13XeYTq8QAAALgBAAATAAAAW0NvbnRlbnRfVHlwZXNdLnhtbH2QzU7DMBCE730Ky9cqccoBIZSkB36OwKE8wMreJFb9J69b2rdn00KREOVozXwz62nXB+/EHjPZGDq5qhspMOhobBg7+b55ru6koALBgIsBO3lEkut+0W6OCUkwHKiTUynpXinSE3qgOiYMrAwxeyj8zKNKoLcworppmlulYygYSlXmDNkvhGgfcYCdK+LpwMr5loyOpHg4e+e6TkJKzmoorKt9ML+Kqq+SmsmThyabaMkGqa6VzOL1jh/0lSfK1qB4g1xewLNRfcRslIl65xmu/0/649o4DFbjhZ/TUo4aiXh77+qL4sGG71+06jR8/wlQSwMEFAAAAAgAO3FTXSAbhuqyAAAALgEAAAsAAABfcmVscy8ucmVsc43Puw6CMBQG4J2naM4uBQdjDIXFmLAafICmPZRGeklbL7y9HRzEODie23fyN93TzOSOIWpnGdRlBQStcFJbxeAynDZ7IDFxK/nsLDJYMELXFs0ZZ57yTZy0jyQjNjKYUvIHSqOY0PBYOo82T0YXDE+5DIp6Lq5cId1W1Y6GTwPagpAVS3rJIPSyBjIsHv/h3ThqgUcnbgZt+vHlayPLPChMDB4uSCrf7TKzQHNKuorZvgBQSwMEFAAAAAgAO3FTXYwOhdB9AAAAnQAAABwAAAB3b3JkL19yZWxzL2RvY3VtZW50LnhtbC5yZWxzVcxBDsIgEIXhvacgs7egC2NMaXc9gNEDTOgIjTAQhhi9vSx1+fLnfeP8TlG9qMqW2cJhMKCIXV439hbut2V/BiUNecWYmSx8SGCeduOVIrb+kbAVUR1hsRBaKxetxQVKKEMuxL08ck3Y+qxeF3RP9KSPxpx0/TWgo/pPnb5QSwMEFAAAAAgAO3FTXf4sp2t6AQAA0wQAABEAAAB3b3JkL2RvY3VtZW50LnhtbKWUzW7DIAzH73uKiHtLMk3TFDXpYdWmXqZK3R6AEtqgAkZAk/XtB/nsNKnK2ktsBP75bzuwWH5LEVXMWA4qQ8k8RhFTFAquDhn6+nybvaDIOqIKIkCxDJ2ZRcv8YVGnBdCTZMpFnqBsWmuaodI5nWJsackksXPJqQELezenIDHs95wyXIMp8GOcxI2nDVBmrU/3SlRFLOpw8i8NNFN+cw9GEueX5oAlMceTnnm6Jo7vuODu7Nnxc4+BDJ2MSjvEbBAUQtJWUGf6CDMlbxuy6jrQZMSGCa8BlC25Hsu4leY3yx5SXSuikgINI0ie7pvBypDamxE4RX7RBknRKr9OTOIJEwmIIWKKhN85eyWScDUmvqk1l8093NfbdwMnPdL4fbS1Og6scC//wepmdFmavU/MtiTaXyBJ0/VBgSE74RX5jkfhj0T5QxT592IHxTm4zULn4bMxjdm6s2BRnVZEZOgjjFUgnC9wdyLYIdAy6jYGN0zcQ4PXP0f5D1BLAQIUAxQAAAAIADtxU13XeYTq8QAAALgBAAATAAAAAAAAAAAAAACAAQAAAABbQ29udGVudF9UeXBlc10ueG1sUEsBAhQDFAAAAAgAO3FTXSAbhuqyAAAALgEAAAsAAAAAAAAAAAAAAIABIgEAAF9yZWxzLy5yZWxzUEsBAhQDFAAAAAgAO3FTXYwOhdB9AAAAnQAAABwAAAAAAAAAAAAAAIAB/QEAAHdvcmQvX3JlbHMvZG9jdW1lbnQueG1sLnJlbHNQSwECFAMUAAAACAA7cVNd/iyna3oBAADTBAAAEQAAAAAAAAAAAAAAgAG0AgAAd29yZC9kb2N1bWVudC54bWxQSwUGAAAAAAQABAADAQAAXQQAAAAA',
+  'base64'
+);
+
+app.post('/api/docs', async (req, res) => {
+  const { studentId, title = 'Untitled Document' } = req.body;
+  if (!studentId) return res.status(400).json({ error: 'studentId required' });
+  const key = randomUUID();
+  const filename = `${key}.docx`;
+  await writeFile(join(DOCS_DIR, filename), BLANK_DOCX);
+  const id = db.prepare(`INSERT INTO documents (student_id, title, doc_key, filename) VALUES (?, ?, ?, ?)`).run(studentId, title, key, filename).lastInsertRowid;
+  res.json({ id, key, title });
+});
+
+app.put('/api/docs/:id/title', (req, res) => {
+  const { title } = req.body;
+  db.prepare(`UPDATE documents SET title = ?, updated_at = datetime('now') WHERE id = ?`).run(title, req.params.id);
+  res.json({ ok: true });
+});
+
+app.post('/api/docs/:id/submit', (req, res) => {
+  const doc = db.prepare(`SELECT * FROM documents WHERE id = ?`).get(req.params.id);
+  if (!doc) return res.status(404).json({ error: 'Not found' });
+  db.prepare(`UPDATE documents SET submitted = 1, submitted_at = datetime('now'), updated_at = datetime('now') WHERE id = ?`).run(doc.id);
+  db.prepare(`INSERT INTO messages (student_id, sender, body) VALUES (?, 'student', ?)`).run(doc.student_id, `📄 Submitted document: "${doc.title}"`);
+  res.json({ ok: true });
+});
+
+app.delete('/api/docs/:id', async (req, res) => {
+  const doc = db.prepare(`SELECT * FROM documents WHERE id = ?`).get(req.params.id);
+  if (!doc) return res.status(404).json({ error: 'Not found' });
+  db.prepare(`DELETE FROM documents WHERE id = ?`).run(doc.id);
+  try { await unlink(join(DOCS_DIR, doc.filename)); } catch { /* already gone */ }
+  res.json({ ok: true });
+});
+
+// OnlyOffice save callback
+app.post('/api/docs/callback/:key', express.json(), async (req, res) => {
+  const { status, url } = req.body;
+  // status 2 = ready to save, 6 = force-save
+  if (status === 2 || status === 6) {
+    const doc = db.prepare(`SELECT * FROM documents WHERE doc_key = ?`).get(req.params.key);
+    if (doc && url) {
+      try {
+        const r = await fetch(url);
+        const buf = Buffer.from(await r.arrayBuffer());
+        await writeFile(join(DOCS_DIR, doc.filename), buf);
+        db.prepare(`UPDATE documents SET updated_at = datetime('now') WHERE doc_key = ?`).run(req.params.key);
+      } catch { /* save failed silently */ }
+    }
+  }
+  res.json({ error: 0 });
+});
+
+// Admin: list submitted docs
+app.get('/api/admin/docs', requirePin, (req, res) => {
+  const docs = db.prepare(`
+    SELECT d.id, d.title, d.doc_key, d.filename, d.submitted_at, d.parent_read, d.updated_at,
+           s.name AS student_name
+    FROM documents d JOIN students s ON s.id = d.student_id
+    WHERE d.submitted = 1
+    ORDER BY d.submitted_at DESC
+  `).all();
+  res.json({ docs });
+});
+
+app.put('/api/admin/docs/:id/read', requirePin, (req, res) => {
+  db.prepare(`UPDATE documents SET parent_read = 1 WHERE id = ?`).run(req.params.id);
+  res.json({ ok: true });
+});
+
+app.get('/api/admin/docs/config', requirePin, (req, res) => {
+  res.json({ onlyofficeUrl: ONLYOFFICE_URL, serverUrl: SERVER_URL });
+});
+
+app.get('/api/docs/config', (req, res) => {
+  res.json({ onlyofficeUrl: ONLYOFFICE_URL, serverUrl: SERVER_URL });
+});
+
+// Returns a fully-signed OnlyOffice editor config for a specific document
+app.get('/api/docs/:id/editor-config', (req, res) => {
+  const doc = db.prepare(`SELECT d.*, s.name AS student_name FROM documents d JOIN students s ON s.id = d.student_id WHERE d.id = ?`).get(req.params.id);
+  if (!doc) return res.status(404).json({ error: 'Not found' });
+  const config = {
+    document: {
+      fileType: 'docx',
+      key: doc.doc_key,
+      title: doc.title,
+      url: `${SERVER_URL}/api/docs/file/${doc.filename}`,
+      permissions: { edit: true, download: true, print: true },
+    },
+    editorConfig: {
+      callbackUrl: `${SERVER_URL}/api/docs/callback/${doc.doc_key}`,
+      user: { id: String(doc.student_id), name: doc.student_name },
+      mode: 'edit',
+      lang: 'en',
+      customization: {
+        autosave: true,
+        forcesave: true,
+        logo: { visible: false },
+        compactHeader: true,
+        toolbarNoTabs: true,
+      },
+    },
+    type: 'desktop',
+    height: '100%',
+    width: '100%',
+  };
+  const token = jwtSign(config);
+  if (token) config.token = token;
+  res.json({ onlyofficeUrl: ONLYOFFICE_URL, config });
+});
+
+app.get('/api/health', (req, res) => res.json({ ok: true }));
+
 app.get('/health', (req, res) => res.json({ ok: true }));
 
 const PORT = process.env.PORT || 3000;