slotlock 0.6.3 → 0.8.0

package/dashboard-assistant-ui.js

@@ -0,0 +1,438 @@
+// The dashboard assistant's words, styles and browser script: how a tool step and a proposed change
+// are named, the chat's CSS, and the script that streams a reply into the page. dashboard.ts renders
+// the page; this keeps the chat's presentation in one place.
+const STEP_WORDS = Object.freeze({
+    slotlock_list_resources: ['Reading resources', 'Read resources', 'read resources'],
+    slotlock_get_free_busy: ['Checking free and busy time', 'Checked free and busy time', 'check free and busy time'],
+    slotlock_find_next_available: ['Finding the next free time', 'Found the next free time', 'find the next free time'],
+    slotlock_find_available_slots: ['Checking availability', 'Checked availability', 'check availability'],
+    slotlock_get_pool_availability: ['Checking the pool', 'Checked the pool', 'check the pool'],
+    slotlock_get_event: ['Reading a booking', 'Read a booking', 'read the booking'],
+    slotlock_list_events: ['Reading bookings', 'Read bookings', 'read bookings'],
+});
+/** A tool step in plain words: "Checking availability…", "Checked availability", "Couldn't check availability". */
+export function slotlockAssistantStepLabel(name, title, state, write = false) {
+    const words = STEP_WORDS[name];
+    if (write) {
+        if (state === 'run')
+            return 'Preparing a change…';
+        if (state === 'ok')
+            return 'Prepared a change for you to approve';
+        return "Couldn't prepare the change";
+    }
+    if (words)
+        return state === 'run' ? `${words[0]}…` : state === 'ok' ? words[1] : `Couldn't ${words[2]}`;
+    const lower = title.charAt(0).toLowerCase() + title.slice(1);
+    return state === 'run' ? `${title}…` : state === 'ok' ? title : `Couldn't ${lower}`;
+}
+/** The verb a proposed change's card is approved with, and whether it removes something. */
+export function slotlockAssistantActionVerb(operation) {
+    switch (operation) {
+        case 'slotlock_create_event':
+        case 'slotlock_book_pool':
+        case 'slotlock_book_together':
+            return { verb: 'Book', busy: 'Booking…', done: 'Booked', danger: false };
+        case 'slotlock_confirm_slot':
+            return { verb: 'Book', busy: 'Booking…', done: 'Booked', danger: false };
+        case 'slotlock_reschedule':
+            return { verb: 'Move', busy: 'Moving…', done: 'Moved', danger: false };
+        case 'slotlock_update_event':
+            return { verb: 'Change', busy: 'Changing…', done: 'Changed', danger: false };
+        case 'slotlock_cancel':
+            return { verb: 'Cancel booking', busy: 'Cancelling…', done: 'Cancelled', danger: true };
+        case 'slotlock_delete_event':
+            return { verb: 'Delete booking', busy: 'Deleting…', done: 'Deleted', danger: true };
+        case 'slotlock_hold_slots':
+            return { verb: 'Hold', busy: 'Holding…', done: 'Held', danger: false };
+        case 'slotlock_release_slots':
+            return { verb: 'Release', busy: 'Releasing…', done: 'Released', danger: true };
+        default:
+            return { verb: 'Approve', busy: 'Running…', done: 'Done', danger: false };
+    }
+}
+/** The chat's styles: one centred column, the composer docked under it, quiet steps and cards. */
+export const SLOTLOCK_ASSISTANT_CSS = `
+.assistant-page { display: grid; }
+.assistant { position: relative; display: flex; flex-direction: column; width: min(100%, 720px); margin: 0 auto; min-height: calc(100dvh - 180px); }
+.assistant .thread { flex: 1; }
+.assistant[data-empty] { justify-content: center; padding-bottom: 12vh; }
+.assistant[data-empty] .thread { display: none; }
+.assistant[data-empty] .dock { order: 1; position: static; padding: 0; background: none; }
+.assistant[data-empty] .assistant-start { order: 2; padding-top: var(--space-3); }
+.assistant:not([data-empty]) .assistant-start { display: none; }
+.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
+.chips form { margin: 0; }
+.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--text-md); cursor: pointer; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
+.chip:hover { background: var(--hover); border-color: var(--line-strong); color: var(--ink); }
+.thread { list-style: none; margin: 0; padding: var(--space-2) 0 var(--space-6); display: grid; gap: var(--space-6); align-content: start; }
+.turn { margin: 0; min-width: 0; }
+.turn.mine { justify-self: end; max-width: 80%; }
+.bubble { padding: 10px 14px; border-radius: 18px; background: var(--sunken); color: var(--ink); font-size: var(--text-lg); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
+.turn.bot { justify-self: stretch; }
+.prose { max-width: 68ch; color: var(--ink); font-size: var(--text-lg); line-height: 1.6; overflow-wrap: anywhere; }
+.prose > :first-child { margin-top: 0; }
+.prose > :last-child { margin-bottom: 0; }
+.prose p { margin: 0 0 var(--space-3); color: inherit; }
+.prose strong { font-weight: 600; }
+.prose h4 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; }
+.prose ul, .prose ol { margin: 0 0 var(--space-3); padding-left: 20px; }
+.prose li { margin: 4px 0; }
+.prose li > ul, .prose li > ol { margin: 4px 0 0; }
+.prose a { color: var(--accent); text-underline-offset: 2px; }
+.prose code { font: 400 12.5px/1.4 var(--mono); background: var(--sunken); border-radius: 4px; padding: 1px 5px; }
+.prose pre { margin: 0 0 var(--space-3); padding: var(--space-3); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
+.prose pre code { background: none; padding: 0; font-size: 12.5px; }
+.prose blockquote { margin: 0 0 var(--space-3); padding-left: var(--space-3); border-left: 2px solid var(--line-strong); color: var(--ink-2); }
+.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-4) 0; }
+.md-table { overflow-x: auto; margin: 0 0 var(--space-3); }
+.md-table table { border-collapse: collapse; font-size: var(--text-md); min-width: 50%; }
+.md-table table { width: auto; }
+.md-table th { font: 600 var(--text-md)/1.4 var(--font); text-transform: none; letter-spacing: 0; background: none; text-align: left; color: var(--ink-2); padding: 6px 16px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
+.md-table td { padding: 6px 16px 6px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
+.md-table tr:last-child td { border-bottom: 0; }
+.change details.more { margin: 0; }
+.change details.more > summary { cursor: pointer; color: var(--ink-3); font-size: var(--text-sm); list-style: none; }
+.change details.more > summary::-webkit-details-marker { display: none; }
+.change details.more > summary:hover { color: var(--ink-2); }
+.change details.more[open] > summary { margin-bottom: var(--space-2); }
+.turn.steps { justify-self: start; }
+details.steps > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-3); font-size: var(--text-md); padding: 2px 0; }
+details.steps > summary::-webkit-details-marker { display: none; }
+details.steps > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--fast) var(--ease); margin-left: 2px; }
+details.steps[open] > summary::after { transform: rotate(45deg); }
+details.steps > summary:hover { color: var(--ink-2); }
+details.steps.has-bad > summary::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }
+.step-list { list-style: none; margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-3); border-left: 1px solid var(--line); display: grid; gap: 6px; }
+.step { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-md); color: var(--ink-2); }
+.step::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--good); transform: translateY(-1px); }
+.step.bad::before { background: var(--bad); }
+.step.run::before { background: var(--ink-3); }
+.step .why { color: var(--ink-3); font-size: var(--text-sm); }
+.live-steps { display: grid; gap: 6px; }
+.live-steps .step.run, .thinking { background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink) 50%, var(--ink-3) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: assistant-shimmer 1.6s linear infinite; }
+.thinking { font-size: var(--text-md); justify-self: start; }
+@keyframes assistant-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
+.prose.streaming > :last-child::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--ink-3); vertical-align: baseline; animation: assistant-pulse 1s ease-in-out infinite; }
+@keyframes assistant-pulse { 50% { opacity: 0.25; } }
+.turn.note { color: var(--ink-3); font-size: var(--text-md); }
+.turn.error { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 12px; border: 1px solid var(--bad-line); background: var(--bad-wash); border-radius: var(--radius); font-size: var(--text-md); color: var(--ink); }
+.turn.error::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
+.turn.error > span { flex: 1; }
+.turn.error form, .turn.note form { margin: 0; }
+.text-button { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: var(--text-md); color: var(--accent); cursor: pointer; }
+.text-button:hover { text-decoration: underline; text-underline-offset: 2px; }
+.turn.action { justify-self: start; width: min(100%, 560px); }
+.change { padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); display: grid; gap: var(--space-3); }
+.change-title { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
+.change .facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--space-4); margin: 0; font-size: var(--text-md); }
+.change .facts dt { color: var(--ink-3); font-size: var(--text-sm); padding-top: 1px; }
+.change .facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
+.change .facts dd pre { margin: 0; white-space: pre-wrap; font: 400 12px/1.5 var(--mono); }
+.change .facts .was { color: var(--ink-3); text-decoration: line-through; }
+.change-buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }
+.change-buttons form { margin: 0; }
+.change-buttons button { height: 32px; }
+button.danger { background: var(--bad); color: var(--bad-ink); border-color: var(--bad); }
+button.danger:hover { filter: brightness(1.08); }
+button.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
+button.ghost:hover { background: var(--hover); color: var(--ink); }
+.receipt { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-md); color: var(--ink-2); }
+.receipt::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transform: translateY(-1px); }
+.receipt.ok { color: var(--ink); }
+.receipt.ok::before { background: var(--good); }
+.receipt.bad::before { background: var(--bad); }
+.receipt .why { color: var(--ink-3); }
+.dock { position: sticky; bottom: 0; padding: var(--space-6) 0 var(--space-6); background: linear-gradient(to bottom, transparent, var(--canvas) 24px); z-index: 2; }
+.composer { display: grid; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
+.composer:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 3px var(--ring); }
+.composer textarea { display: block; width: 100%; min-height: 26px; max-height: 200px; resize: none; border: 0; outline: 0; background: transparent; padding: 14px 16px 0; color: var(--ink); font: inherit; font-size: var(--text-lg); line-height: 1.5; box-shadow: none; }
+.composer textarea:focus { box-shadow: none; border: 0; }
+.composer-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-2); }
+.composer-bar .count { margin-right: auto; padding-left: var(--space-2); font-size: var(--text-sm); color: var(--ink-3); }
+.composer-bar .count.over { color: var(--warn); }
+.send { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 0; background: var(--button); color: var(--button-ink); cursor: pointer; transition: opacity var(--fast) var(--ease), background var(--fast) var(--ease); }
+.send:hover { background: var(--button-hover); }
+.send:disabled { opacity: 0.4; cursor: default; }
+.send svg { width: 16px; height: 16px; }
+.send .stop { display: none; }
+.assistant.streaming .send .arrow { display: none; }
+.assistant.streaming .send .stop { display: block; }
+.jump { position: absolute; left: 50%; transform: translate(-50%, 0); top: -8px; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: var(--pop-shadow); }
+.jump[hidden] { display: none; }
+.new-chat svg { width: 14px; height: 14px; }
+.assistant-page[data-empty] .new-chat { display: none; }
+@media (prefers-reduced-motion: reduce) {
+  .live-steps .step.run, .thinking { animation: none; color: var(--ink-3); background: none; }
+  .prose.streaming > :last-child::after { animation: none; }
+}
+@media (max-width: 760px) {
+  .assistant { min-height: calc(100dvh - 140px); }
+  .assistant[data-empty] { justify-content: flex-end; padding-bottom: 0; }
+  .assistant[data-empty] .assistant-start { order: 1; padding: 0 0 var(--space-3); }
+  .assistant[data-empty] .dock { order: 2; position: sticky; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
+  .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: none; }
+  .chips::-webkit-scrollbar { display: none; }
+  .chip { flex: none; }
+  .turn.mine { max-width: 88%; }
+  .md-table table { display: table; }
+  .md-table thead { display: table-header-group; }
+  .md-table tbody { display: table-row-group; }
+  .md-table tr { display: table-row; padding: 0; border: 0; }
+  .md-table th, .md-table td { display: table-cell; padding: 6px 12px 6px 0; }
+  .md-table td { border-bottom: 1px solid var(--line-soft); }
+  .composer textarea { font-size: 16px; }
+  .dock { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
+  .change { padding: var(--space-4); }
+  .change .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
+  .change .facts dd { margin-bottom: var(--space-2); }
+  .change-buttons form { flex: 1; }
+  .change-buttons button { width: 100%; height: 40px; }
+}
+`;
+/**
+ * The browser side of the chat, appended to app.js: Enter sends, the box grows, a write chip fills
+ * the box instead of sending, and a reply streams in from `<root>/assistant/stream` (newline-
+ * delimited JSON: text deltas, steps, then the turn as the server renders it). Without it the
+ * page still works: every form posts and the page reloads at the latest message.
+ * `markdownSource` is renderSlotlockMarkdown's source, so a reply renders as it will once stored.
+ */
+export function slotlockAssistantScript(markdownSource) {
+    return `
+(function () {
+  var page = document.querySelector('[data-assistant]');
+  if (!page || typeof fetch !== 'function' || typeof TextDecoder !== 'function') return;
+  var __name = function (fn) { return fn; };
+  var renderMarkdown = (${markdownSource});
+  var form = page.querySelector('form.composer');
+  var box = form ? form.querySelector('textarea') : null;
+  var send = form ? form.querySelector('button.send') : null;
+  var thread = page.querySelector('ol.thread');
+  var jump = page.querySelector('button.jump');
+  var count = form ? form.querySelector('.count') : null;
+  var shell = document.querySelector('.assistant-page');
+  if (!form || !box || !send || !thread) return;
+  var max = Number(box.getAttribute('maxlength')) || 2000;
+  // Two rows without script; one that grows with it.
+  box.setAttribute('rows', '1');
+  var busy = null;
+
+  function grow() {
+    box.style.height = 'auto';
+    box.style.height = Math.min(box.scrollHeight, 200) + 'px';
+  }
+  function update() {
+    if (!busy) send.disabled = box.value.trim() === '';
+    if (count) {
+      var left = box.value.length;
+      count.hidden = left < max - 200;
+      count.textContent = left + ' / ' + max;
+      count.classList.toggle('over', left >= max);
+    }
+  }
+  function nearBottom() {
+    return window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 80;
+  }
+  function follow(was) {
+    if (was) window.scrollTo(0, document.documentElement.scrollHeight);
+    else if (jump) jump.hidden = false;
+  }
+  if (jump) {
+    jump.addEventListener('click', function () {
+      window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
+      jump.hidden = true;
+    });
+    window.addEventListener('scroll', function () { if (nearBottom()) jump.hidden = true; }, { passive: true });
+  }
+  function item(className) {
+    var li = document.createElement('li');
+    li.className = 'turn ' + className;
+    thread.appendChild(li);
+    return li;
+  }
+  function setOnce(value) {
+    if (!value) return;
+    var field = form.querySelector('input[name="once"]');
+    if (field) field.value = value;
+  }
+  function stopped(reason) {
+    page.classList.remove('streaming');
+    send.setAttribute('aria-label', 'Send');
+    busy = null;
+    update();
+  }
+
+  box.addEventListener('input', function () { grow(); update(); });
+  box.addEventListener('keydown', function (event) {
+    if (event.key !== 'Enter' || event.shiftKey || event.isComposing || event.keyCode === 229) return;
+    event.preventDefault();
+    if (!busy && box.value.trim() !== '') form.requestSubmit();
+  });
+  for (var chip of page.querySelectorAll('button[data-fill]')) {
+    chip.addEventListener('click', function (event) {
+      event.preventDefault();
+      box.value = this.getAttribute('data-fill') || '';
+      grow();
+      update();
+      box.focus();
+      box.setSelectionRange(box.value.length, box.value.length);
+    });
+  }
+  for (var decide of document.querySelectorAll('.change-buttons form')) {
+    decide.addEventListener('submit', function () {
+      var buttons = this.closest('.change-buttons').querySelectorAll('button');
+      for (var b of buttons) b.disabled = true;
+      var own = this.querySelector('button');
+      if (own && own.getAttribute('data-busy')) own.textContent = own.getAttribute('data-busy');
+    });
+  }
+
+  send.addEventListener('click', function (event) {
+    if (!busy) return;
+    event.preventDefault();
+    busy.abort();
+  });
+
+  form.addEventListener('submit', function (event) {
+    var text = box.value.trim();
+    if (busy || text === '') { event.preventDefault(); return; }
+    event.preventDefault();
+    var controller = new AbortController();
+    busy = controller;
+    var body = new URLSearchParams(new FormData(form));
+    body.set('message', text);
+    if (page.hasAttribute('data-empty')) {
+      page.removeAttribute('data-empty');
+      if (shell) shell.removeAttribute('data-empty');
+    }
+    page.classList.add('streaming');
+    send.disabled = false;
+    send.setAttribute('aria-label', 'Stop');
+    var was = true;
+    var mine = item('mine');
+    var bubble = document.createElement('div');
+    bubble.className = 'bubble';
+    bubble.textContent = text;
+    mine.appendChild(bubble);
+    box.value = '';
+    box.setAttribute('placeholder', 'Reply…');
+    grow();
+    var added = [mine];
+    var thinking = item('note thinking');
+    thinking.textContent = 'Thinking';
+    added.push(thinking);
+    var prose = null;
+    var proseText = '';
+    var steps = null;
+    var stepNodes = {};
+    var frame = 0;
+    follow(was);
+    function draw() {
+      frame = 0;
+      if (prose) prose.innerHTML = renderMarkdown(proseText);
+    }
+    function clearThinking() {
+      if (thinking && thinking.parentNode) thinking.parentNode.removeChild(thinking);
+      thinking = null;
+    }
+    function onEvent(e) {
+      was = nearBottom();
+      if (e.t === 'text') {
+        clearThinking();
+        if (!prose) {
+          var li = item('bot');
+          added.push(li);
+          prose = document.createElement('div');
+          prose.className = 'prose streaming';
+          li.appendChild(prose);
+          proseText = '';
+          steps = null;
+        }
+        proseText += e.d;
+        if (!frame) frame = requestAnimationFrame(draw);
+      } else if (e.t === 'step') {
+        clearThinking();
+        if (prose) { if (frame) { cancelAnimationFrame(frame); draw(); } prose.classList.remove('streaming'); prose = null; }
+        if (!steps) {
+          var holder = item('steps');
+          added.push(holder);
+          steps = document.createElement('div');
+          steps.className = 'live-steps';
+          holder.appendChild(steps);
+        }
+        var node = stepNodes[e.id];
+        if (!node) {
+          node = document.createElement('div');
+          stepNodes[e.id] = node;
+          steps.appendChild(node);
+        }
+        node.className = 'step ' + e.s;
+        node.textContent = e.label;
+      } else if (e.t === 'done' || e.t === 'error') {
+        clearThinking();
+        if (frame) cancelAnimationFrame(frame);
+        for (var n of added) if (n.parentNode) n.parentNode.removeChild(n);
+        added = [];
+        thread.insertAdjacentHTML('beforeend', e.html || '');
+        setOnce(e.once);
+      }
+      follow(was);
+    }
+    fetch(page.getAttribute('data-stream'), {
+      method: 'POST',
+      body: body,
+      headers: { accept: 'application/x-ndjson' },
+      credentials: 'same-origin',
+      signal: controller.signal,
+    }).then(function (response) {
+      var type = response.headers.get('content-type') || '';
+      if (!response.body || type.indexOf('application/x-ndjson') !== 0) {
+        location.assign(page.getAttribute('data-page') + '#latest');
+        location.reload();
+        return;
+      }
+      var reader = response.body.getReader();
+      var decoder = new TextDecoder();
+      var buffer = '';
+      function pump() {
+        return reader.read().then(function (chunk) {
+          if (chunk.done) {
+            if (buffer.trim()) onEvent(JSON.parse(buffer));
+            stopped();
+            return;
+          }
+          buffer += decoder.decode(chunk.value, { stream: true });
+          var lines = buffer.split('\\n');
+          buffer = lines.pop() || '';
+          for (var line of lines) if (line.trim()) onEvent(JSON.parse(line));
+          return pump();
+        });
+      }
+      return pump();
+    }).catch(function () {
+      clearThinking();
+      if (controller.signal.aborted) {
+        if (prose) prose.classList.remove('streaming');
+        var note = item('note');
+        note.textContent = 'Stopped';
+        stopped();
+        // The server keeps what it had; the page it renders next has a fresh form.
+        setTimeout(function () { location.assign(page.getAttribute('data-page') + '#latest'); location.reload(); }, 900);
+        return;
+      }
+      for (var n of added) if (n.parentNode && n !== mine) n.parentNode.removeChild(n);
+      if (mine.parentNode) mine.parentNode.removeChild(mine);
+      box.value = text;
+      grow();
+      var fail = item('error');
+      var why = document.createElement('span');
+      why.textContent = "Couldn't send. Check the connection and try again.";
+      fail.appendChild(why);
+      stopped();
+    });
+  });
+  grow();
+  update();
+  if (location.hash === '#latest' || !page.hasAttribute('data-empty')) window.scrollTo(0, document.documentElement.scrollHeight);
+})();
+`;
+}

package/dashboard-icon.d.ts

@@ -0,0 +1 @@
+export declare const SLOTLOCK_DASHBOARD_ICON_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\"><rect width=\"64\" height=\"64\" rx=\"14\" fill=\"#111110\"/><g transform=\"translate(12.2 14.1) scale(0.465)\"><path fill=\"#F6F4EE\" d=\"M13.13 34.46L72.2 34.46C79.45 34.46 85.32 40.33 85.32 47.58L85.32 63.99C85.32 71.24 79.45 77.12 72.2 77.12L13.13 77.12C5.88 77.12 0 71.24 0 63.99L0 47.58C0 40.33 5.88 34.46 13.13 34.46ZM22.97 39.38L22.97 19.69C22.97 8.82 31.79 0 42.66 0C53.54 0 62.35 8.82 62.35 19.69L62.35 39.38L56.61 39.38L56.61 19.69C56.61 11.99 50.36 5.74 42.66 5.74C34.96 5.74 28.71 11.99 28.71 19.69L28.71 39.38Z\"/><path fill=\"#FF5B2E\" d=\"M19.69 52.51L65.63 52.51C67.45 52.51 68.91 53.98 68.91 55.79C68.91 57.6 67.45 59.07 65.63 59.07L19.69 59.07C17.88 59.07 16.41 57.6 16.41 55.79C16.41 53.98 17.88 52.51 19.69 52.51Z\"/></g></svg>\n";

package/dashboard-icon.js

@@ -0,0 +1,5 @@
+// The Slotlock mark the dashboard serves as its favicon. A copy of site/public/favicon.svg, which a
+// test keeps identical; the dashboard's Content-Security-Policy allows images from its own origin
+// only, so the mark is served, not inlined.
+export const SLOTLOCK_DASHBOARD_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#111110"/><g transform="translate(12.2 14.1) scale(0.465)"><path fill="#F6F4EE" d="M13.13 34.46L72.2 34.46C79.45 34.46 85.32 40.33 85.32 47.58L85.32 63.99C85.32 71.24 79.45 77.12 72.2 77.12L13.13 77.12C5.88 77.12 0 71.24 0 63.99L0 47.58C0 40.33 5.88 34.46 13.13 34.46ZM22.97 39.38L22.97 19.69C22.97 8.82 31.79 0 42.66 0C53.54 0 62.35 8.82 62.35 19.69L62.35 39.38L56.61 39.38L56.61 19.69C56.61 11.99 50.36 5.74 42.66 5.74C34.96 5.74 28.71 11.99 28.71 19.69L28.71 39.38Z"/><path fill="#FF5B2E" d="M19.69 52.51L65.63 52.51C67.45 52.51 68.91 53.98 68.91 55.79C68.91 57.6 67.45 59.07 65.63 59.07L19.69 59.07C17.88 59.07 16.41 57.6 16.41 55.79C16.41 53.98 17.88 52.51 19.69 52.51Z"/></g></svg>
+`;

package/dashboard-markdown.d.ts

@@ -0,0 +1,2 @@
+/** Safe HTML for a chat reply written in Markdown. */
+export declare function renderSlotlockMarkdown(source: string): string;

package/dashboard-markdown.js

@@ -0,0 +1,157 @@
+// The assistant's replies are Markdown. This renders the part of it a chat reply uses (paragraphs,
+// headings, lists, quotes, rules, tables, code, bold, italic, strikethrough, http(s) links) as HTML,
+// escaping everything first, so no input reaches the page as markup.
+//
+// It is one self-contained function on purpose: the dashboard's app.js embeds its source
+// (Function.prototype.toString) to render a reply while it streams, and the server renders the
+// stored reply with the very same function, so both always agree. Keep it free of imports and of
+// anything outside its own body.
+/** Safe HTML for a chat reply written in Markdown. */
+export function renderSlotlockMarkdown(source) {
+    const text = String(source).replace(/\u0000/g, '').replace(/\r\n?/g, '\n');
+    const escape = (value) => value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+    const inline = (value) => {
+        const codes = [];
+        let out = value.replace(/`([^`\n]+)`/g, (_match, code) => {
+            codes.push(`<code>${escape(code)}</code>`);
+            return `\u0000${codes.length - 1}\u0000`;
+        });
+        const links = [];
+        out = out.replace(/\[([^\]\n]+)\]\((https?:\/\/[^\s)]+)\)/g, (_match, label, url) => {
+            links.push(`<a href="${escape(url)}" rel="noopener noreferrer">${escape(label)}</a>`);
+            return `\u0001${links.length - 1}\u0001`;
+        });
+        out = escape(out)
+            .replace(/\*\*(?=\S)([^\n]*?\S)\*\*/g, '<strong>$1</strong>')
+            .replace(/__(?=\S)([^\n]*?\S)__/g, '<strong>$1</strong>')
+            .replace(/~~(?=\S)([^\n]*?\S)~~/g, '<del>$1</del>')
+            .replace(/(^|[^*\w])\*(?=[^\s*])([^*\n]*?[^\s*])\*(?!\*)/g, '$1<em>$2</em>')
+            .replace(/(^|[^_\w])_(?=[^\s_])([^_\n]*?[^\s_])_(?![_\w])/g, '$1<em>$2</em>');
+        return out
+            .replace(/\u0001(\d+)\u0001/g, (_match, index) => {
+            const link = links[Number(index)] ?? '';
+            // A link's label keeps its own emphasis out: it was escaped whole.
+            return link;
+        })
+            .replace(/\u0000(\d+)\u0000/g, (_match, index) => codes[Number(index)] ?? '');
+    };
+    const cells = (line) => line
+        .trim()
+        .replace(/^\|/, '')
+        .replace(/\|$/, '')
+        .split('|')
+        .map((cell) => cell.trim());
+    const isRule = (line) => /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/.test(line);
+    const listItem = /^(\s*)([-*+]|\d{1,9}[.)])\s+(.*)$/;
+    const lines = text.split('\n');
+    const blocks = [];
+    let paragraph = [];
+    const flush = () => {
+        if (paragraph.length > 0)
+            blocks.push(`<p>${paragraph.map(inline).join('<br>')}</p>`);
+        paragraph = [];
+    };
+    for (let i = 0; i < lines.length;) {
+        const line = lines[i] ?? '';
+        const fence = /^\s*(```|~~~)/.exec(line);
+        if (fence) {
+            flush();
+            const close = fence[1] ?? '```';
+            const body = [];
+            i += 1;
+            while (i < lines.length && !(lines[i] ?? '').trim().startsWith(close)) {
+                body.push(lines[i] ?? '');
+                i += 1;
+            }
+            i += 1;
+            blocks.push(`<pre><code>${escape(body.join('\n'))}</code></pre>`);
+            continue;
+        }
+        if (line.trim() === '') {
+            flush();
+            i += 1;
+            continue;
+        }
+        const heading = /^\s{0,3}(#{1,6})\s+(.*?)\s*#*\s*$/.exec(line);
+        if (heading) {
+            flush();
+            blocks.push(`<h4>${inline(heading[2] ?? '')}</h4>`);
+            i += 1;
+            continue;
+        }
+        if (/^\s{0,3}([-*_])(\s*\1){2,}\s*$/.test(line) && !listItem.test(line.replace(/\s+$/, '') + ' x')) {
+            flush();
+            blocks.push('<hr>');
+            i += 1;
+            continue;
+        }
+        if (line.includes('|') && isRule(lines[i + 1] ?? '') && cells(line).length > 1) {
+            flush();
+            const head = cells(line);
+            const rows = [];
+            i += 2;
+            while (i < lines.length && (lines[i] ?? '').includes('|') && (lines[i] ?? '').trim() !== '') {
+                rows.push(cells(lines[i] ?? ''));
+                i += 1;
+            }
+            blocks.push(`<div class="md-table"><table><thead><tr>${head.map((cell) => `<th>${inline(cell)}</th>`).join('')}</tr></thead><tbody>${rows
+                .map((row) => `<tr>${head.map((_cell, index) => `<td>${inline(row[index] ?? '')}</td>`).join('')}</tr>`)
+                .join('')}</tbody></table></div>`);
+            continue;
+        }
+        if (/^\s{0,3}>/.test(line)) {
+            flush();
+            const quoted = [];
+            while (i < lines.length && /^\s{0,3}>/.test(lines[i] ?? '')) {
+                quoted.push((lines[i] ?? '').replace(/^\s{0,3}>\s?/, ''));
+                i += 1;
+            }
+            blocks.push(`<blockquote>${quoted.map(inline).join('<br>')}</blockquote>`);
+            continue;
+        }
+        if (listItem.test(line)) {
+            flush();
+            // Lists nest by indentation; each level is the kind (ordered or not) of its first item.
+            let html = '';
+            const open = [];
+            while (i < lines.length) {
+                const current = lines[i] ?? '';
+                const item = listItem.exec(current);
+                if (!item) {
+                    // A wrapped line continues the item above it; a blank line or anything else ends the list.
+                    if (current.trim() !== '' && /^\s+\S/.test(current) && open.length > 0) {
+                        html += `<br>${inline(current.trim())}`;
+                        i += 1;
+                        continue;
+                    }
+                    break;
+                }
+                const indent = (item[1] ?? '').replace(/\t/g, '    ').length;
+                const tag = /\d/.test(item[2] ?? '') ? 'ol' : 'ul';
+                const top = open.at(-1);
+                if (!top || indent > top.indent + 1) {
+                    if (top)
+                        html = html.replace(/<\/li>$/, '');
+                    html += `<${tag}>`;
+                    open.push({ indent, tag });
+                }
+                else {
+                    while (open.length > 1 && indent < (open.at(-1)?.indent ?? 0) - 1) {
+                        html += `</li></${open.pop()?.tag}>`;
+                    }
+                    html += '</li>';
+                }
+                html += `<li>${inline(item[3] ?? '')}`;
+                i += 1;
+            }
+            while (open.length > 0)
+                html += `</li></${open.pop()?.tag}>`;
+            blocks.push(html);
+            continue;
+        }
+        paragraph.push(line.trim());
+        i += 1;
+    }
+    flush();
+    return blocks.join('');
+}

package/dashboard-settings-ui.d.ts

@@ -0,0 +1 @@
+export declare const SLOTLOCK_SETTINGS_CSS = "\n.settings { display: grid; grid-template-columns: 176px minmax(0, 640px); gap: var(--space-8); align-items: start; }\n.subnav { display: grid; gap: 2px; position: sticky; top: var(--space-6); }\n.subnav a { display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--ink-2); font-size: 14px; text-decoration: none; }\n.subnav a:hover { background: var(--hover); color: var(--ink); }\n.subnav a[aria-current=\"page\"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }\n.subnav .nav-dot { width: 6px; height: 6px; border-radius: 50%; margin-left: auto; background: var(--good); }\n.settings-body { display: grid; gap: var(--space-6); min-width: 0; }\n.settings-body > .notice { margin: 0; }\n.card-head { margin: 0 0 calc(var(--space-2) - var(--space-6)); font-size: 13px; font-weight: 600; color: var(--ink-3); }\n.set-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 0; }\n.row { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: var(--space-4); align-items: center; min-height: 56px; padding: 12px 20px; border-top: 1px solid var(--line-soft); }\n.row.stack { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: start; padding-top: 16px; padding-bottom: 16px; }\n.row:first-child { border-top: 0; }\n.row-label { font-size: 14px; font-weight: 500; color: var(--ink); }\n.row-value { font-size: 14px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }\n.row-value.muted { color: var(--ink-2); }\n.row input:not([type=\"radio\"]):not([type=\"checkbox\"]), .row select { width: 100%; }\n.mono { font-family: var(--mono); font-size: 13px; }\n.card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 12px 20px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, var(--canvas)); }\n.card-foot .fine { margin: 0; }\n.card-foot .primary { flex: none; }\n.status-head { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: 16px 20px; }\n.status-head form { margin: 0; }\n.mono-tile { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); background: var(--sunken); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 14px; }\n.status-name { display: grid; gap: 2px; min-width: 0; }\n.status-name strong { font-size: 15px; font-weight: 600; color: var(--ink); }\n.status-name code { color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; padding: 0; }\n.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--sunken); white-space: nowrap; }\n.badge::before { content: \"\"; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }\n.badge.ok { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }\n.badge.ok::before { background: var(--good); }\n.badge.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }\n.badge.bad::before { background: var(--bad); }\n.status-card .notice { margin: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; font-size: 13px; padding: 10px 20px; }\n.status-card .notice.done { color: var(--ink); }\n.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }\n.tile { position: relative; display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }\n.tile:hover { background: var(--hover); }\n.tile input { position: absolute; opacity: 0; pointer-events: none; }\n.tile .tile-mark { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 5px; background: var(--sunken); color: var(--ink-2); font-size: 11px; font-weight: 600; }\n.tile:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }\n.tile:has(input:checked) .tile-mark { background: var(--accent); color: var(--surface); }\n.tile:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }\n.provider-form:not(:has(input[name=\"preset\"][value=\"custom\"]:checked)) .custom-only { display: none; }\n.segmented { justify-self: start; display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sunken); gap: 2px; }\n.segmented label { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }\n.segmented input { position: absolute; opacity: 0; pointer-events: none; }\n.segmented label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }\n.field-with-button { display: flex; gap: var(--space-2); align-items: center; }\n.field-with-button input { flex: 1; min-width: 0; }\n.field-with-button button { flex: none; }\n.key-set { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }\n.key-set code { background: none; padding: 0; color: var(--ink-2); letter-spacing: 0.04em; }\n.key-set details { display: contents; }\n.key-set details > summary { list-style: none; cursor: pointer; color: var(--accent); font-size: 13px; }\n.key-set details > summary::-webkit-details-marker { display: none; }\n.key-set details[open] > summary { display: none; }\n.key-set details[open] input { flex-basis: 100%; }\n.danger-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 14px 20px; }\n.danger-row strong { font-size: 14px; font-weight: 500; color: var(--ink); }\n.danger-row details.act > summary { color: var(--bad); }\n@media (max-width: 760px) {\n  .settings { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }\n  .subnav { position: static; display: flex; overflow-x: auto; gap: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }\n  .subnav::-webkit-scrollbar { display: none; }\n  .subnav a { height: 40px; border-radius: 0; flex: none; }\n  .subnav a[aria-current=\"page\"] { background: none; box-shadow: inset 0 -2px 0 var(--accent); }\n  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: 12px 16px; }\n  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .status-head { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 14px 16px; }\n  .status-head form { grid-column: 1 / -1; }\n  .card-foot { flex-direction: column; align-items: stretch; padding: 12px 16px; }\n  .card-foot .primary { height: 44px; }\n}\n";