From f66b4c4cf197404f54ffc7e57fce653385446b13 Mon Sep 17 00:00:00 2001
From: Jeffrey Alan Scudder <me@jas.life>
Date: Sun, 18 Jan 2026 05:44:21 +0000
Subject: [PATCH] News: improved submit form UI, VS Code auth integration,
 draft storage

- Renamed 'Title' to 'Headline', 'URL' to 'Source URL', 'Your Thoughts' to 'Story'
- Added 'pick one or both' hint in grouped field box
- Added client-side validation (headline required, URL format check)
- Post button disabled until valid input
- Added login prompt box for non-authenticated users
- Draft auto-saves to localStorage, clears on successful submit
- VS Code extension: proper auth message forwarding from News iframe
- Extension handles news:login, news:logout, news:signup messages
- Footer now has 'submit' link to report page
---
 system/netlify/functions/news.mjs             |  37 ++-
 .../public/news.aesthetic.computer/client.js  | 272 +++++++++++++++++-
 .../public/news.aesthetic.computer/main.css   | 199 +++++++++++++
 vscode-extension/extension.ts                 |  86 +++++-
 vscode-extension/package-lock.json            |   4 +-
 vscode-extension/package.json                 |   2 +-
 6 files changed, 576 insertions(+), 24 deletions(-)

diff --git a/system/netlify/functions/news.mjs b/system/netlify/functions/news.mjs
index b46eb1efbf..bad1560424 100644
--- a/system/netlify/functions/news.mjs
+++ b/system/netlify/functions/news.mjs
@@ -94,6 +94,8 @@ function footer() {
   return `
   <footer class="news-footer">
     <div class="news-footer-links">
+      <a href="/submit">submit</a>
+      <span>|</span>
       <a href="https://aesthetic.computer/list" class="news-modal-link" data-modal-url="https://aesthetic.computer/list">List</a>
       <span>|</span>
       <a href="https://aesthetic.computer/weather" class="news-modal-link" data-modal-url="https://aesthetic.computer/weather">Weather</a>
@@ -174,7 +176,7 @@ async function renderFrontPage(database, basePath, sort) {
   const emptyState = `
     <div class="news-empty">
       <p>No posts yet.</p>
-      <a href="${basePath}/report" class="news-report-link">report a story</a>
+      <a href="${basePath}/report" class="news-report-link">Report the News</a>
     </div>`;
   return `
   ${header(basePath)}
@@ -250,8 +252,28 @@ async function renderReportPage(basePath) {
   ${header(basePath)}
   <main class="news-main">
     <section class="news-report">
-      <h2>Report a Story</h2>
-      <div class="news-guidelines">
+      <h2>Report the News</h2>
+      <div id="news-login-prompt" class="news-login-prompt">
+        <p>You need to <button id="news-prompt-login" class="news-inline-login">log in</button> to post.</p>
+        <p class="news-handle-note">You'll also need a @handle — get one at <a href="https://aesthetic.computer" target="_blank">aesthetic.computer</a></p>
+      </div>
+      <form id="news-submit-form" data-news-action="submit" method="post" action="/api/news/submit">
+        <label>Headline</label>
+        <input type="text" name="title" required placeholder="What's the story?" />
+        <div class="news-either-or">
+          <div class="news-pick-hint">pick one or both</div>
+          <div class="news-field-group">
+            <label>Source URL</label>
+            <input type="url" name="url" placeholder="https://" />
+          </div>
+          <div class="news-field-group">
+            <label>Story</label>
+            <textarea name="text" rows="4" placeholder="Share context, commentary, or tell your own story..."></textarea>
+          </div>
+        </div>
+        <button type="submit">Post</button>
+      </form>
+      <div class="news-guidelines news-guidelines-below">
         <p>Share something interesting with the community.</p>
         <ul>
           <li>Links to creative tools, code, art, and experiments are welcome.</li>
@@ -259,15 +281,6 @@ async function renderReportPage(basePath) {
           <li>Be curious. Be kind. Keep it weird.</li>
         </ul>
       </div>
-      <form id="news-submit-form" data-news-action="submit" method="post" action="/api/news/submit">
-        <label>title</label>
-        <input type="text" name="title" required placeholder="What's the story?" />
-        <label>url <span class="news-optional">(optional)</span></label>
-        <input type="url" name="url" placeholder="https://" />
-        <label>or tell us more <span class="news-optional">(optional)</span></label>
-        <textarea name="text" rows="6" placeholder="Add context, thoughts, or leave blank..."></textarea>
-        <button type="submit">report this</button>
-      </form>
     </section>
   </main>
   ${footer()}`;
diff --git a/system/public/news.aesthetic.computer/client.js b/system/public/news.aesthetic.computer/client.js
index 364172f547..9b6d183353 100644
--- a/system/public/news.aesthetic.computer/client.js
+++ b/system/public/news.aesthetic.computer/client.js
@@ -36,13 +36,22 @@ async function hydrateHandleFromEmail(email) {
 }
 
 async function applySession(session) {
-  if (!session || typeof session !== "object") return;
+  console.log("[news] applySession called:", session);
+  if (!session || typeof session !== "object") {
+    // Session cleared - user logged out
+    acUser = null;
+    acToken = null;
+    acHandle = null;
+    updateAuthUI();
+    return;
+  }
   if (session.accessToken) acToken = session.accessToken;
 
   const label = session.account?.label;
   if (label) {
     if (label.startsWith("@")) {
       acHandle = label.slice(1);
+      acUser = { email: label }; // Set user object so we know they're logged in
     } else {
       acUser = { email: label };
       if (label.includes("@")) {
@@ -117,20 +126,41 @@ async function initAuth0() {
 }
 
 function updateAuthUI() {
+  const reportSection = document.querySelector('.news-report');
+  
   if (acUser) {
     if (loginBtn) loginBtn.style.display = "none";
     if (signupBtn) signupBtn.style.display = "none";
     if (userMenu) userMenu.style.display = "flex";
     if (userHandle) userHandle.textContent = acHandle ? `@${acHandle}` : acUser.email;
+    if (reportSection) reportSection.classList.add('logged-in');
   } else {
     if (loginBtn) loginBtn.style.display = "inline-flex";
     if (signupBtn) signupBtn.style.display = "inline-flex";
     if (userMenu) userMenu.style.display = "none";
+    if (reportSection) reportSection.classList.remove('logged-in');
+  }
+  
+  // Update inline login button
+  const promptLogin = document.getElementById('news-prompt-login');
+  if (promptLogin) {
+    promptLogin.addEventListener('click', (e) => {
+      e.preventDefault();
+      acLogin();
+    });
   }
 }
 
 async function acLogin() {
-  console.log("[news] acLogin called, auth0Client:", !!auth0Client);
+  console.log("[news] acLogin called, isInVSCode:", isInVSCode());
+  
+  if (isInVSCode()) {
+    // In VS Code, send message to parent to handle login
+    window.parent?.postMessage({ type: 'news:login' }, '*');
+    window.parent?.postMessage({ type: 'login', tenant: 'aesthetic' }, '*');
+    return;
+  }
+  
   if (!auth0Client) await initAuth0();
   if (!auth0Client) {
     console.error("[news] auth0Client still null after init");
@@ -143,7 +173,15 @@ async function acLogin() {
 }
 
 async function acSignup() {
-  console.log("[news] acSignup called");
+  console.log("[news] acSignup called, isInVSCode:", isInVSCode());
+  
+  if (isInVSCode()) {
+    // In VS Code, send message to parent to handle signup
+    window.parent?.postMessage({ type: 'news:signup' }, '*');
+    window.parent?.postMessage({ type: 'signup', tenant: 'aesthetic' }, '*');
+    return;
+  }
+  
   if (!auth0Client) await initAuth0();
   if (!auth0Client) return;
   await auth0Client.loginWithRedirect({
@@ -152,6 +190,19 @@ async function acSignup() {
 }
 
 async function acLogout() {
+  console.log("[news] acLogout called, isInVSCode:", isInVSCode());
+  
+  if (isInVSCode()) {
+    // In VS Code, send message to parent to handle logout
+    window.parent?.postMessage({ type: 'news:logout' }, '*');
+    window.parent?.postMessage({ type: 'logout', tenant: 'aesthetic' }, '*');
+    acUser = null;
+    acToken = null;
+    acHandle = null;
+    updateAuthUI();
+    return;
+  }
+  
   if (!auth0Client) return;
   acUser = null;
   acToken = null;
@@ -190,11 +241,38 @@ function attachSessionListener() {
   });
 }
 
+// Show form message (replaces alert for sandboxed iframes)
+function showFormMessage(form, message, isError = true) {
+  let msgEl = form.querySelector('.news-form-message');
+  if (!msgEl) {
+    msgEl = document.createElement('div');
+    msgEl.className = 'news-form-message';
+    form.insertBefore(msgEl, form.firstChild);
+  }
+  msgEl.textContent = message;
+  msgEl.classList.toggle('error', isError);
+  msgEl.classList.toggle('info', !isError);
+  msgEl.style.display = 'block';
+}
+
+function hideFormMessage(form) {
+  const msgEl = form.querySelector('.news-form-message');
+  if (msgEl) msgEl.style.display = 'none';
+}
+
 async function handleFormSubmit(form, endpoint) {
+  hideFormMessage(form);
+  
   if (!acToken) {
-    alert("Please log in to post.");
+    showFormMessage(form, "Please log in to post. Click 'Log In' above.");
+    return;
+  }
+  
+  if (!acHandle) {
+    showFormMessage(form, "You need a @handle to post. Visit aesthetic.computer to set one up.");
     return;
   }
+  
   const formData = new FormData(form);
   const body = new URLSearchParams(formData.entries());
   const res = await fetch(endpoint, {
@@ -207,11 +285,16 @@ async function handleFormSubmit(form, endpoint) {
   });
   const data = await res.json().catch(() => null);
   if (data?.redirect) {
+    // Clear draft on successful submit
+    if (form.clearDraft) form.clearDraft();
     window.location.href = data.redirect;
     return;
   }
   if (!res.ok) {
-    alert(data?.error || "Request failed");
+    showFormMessage(form, data?.error || "Request failed");
+  } else {
+    // Clear draft on successful submit (even without redirect)
+    if (form.clearDraft) form.clearDraft();
   }
 }
 
@@ -237,7 +320,8 @@ function isInVSCode() {
   // Check for vscode query param or acVSCODE flag set by extension
   const urlParams = new URLSearchParams(window.location.search);
   return urlParams.get('vscode') === 'true' || 
-         (window.acVSCODE && window.parent !== window);
+         (window.acVSCODE && window.parent !== window) ||
+         window.parent !== window; // Also check if we're in any iframe
 }
 
 // Open URL externally - handles VS Code sandboxed iframe case
@@ -424,7 +508,183 @@ initDOMRefs();
 attachAuthHandlers();
 initForms();
 initModals();
+initSubmitFormConstraints();
 attachSessionListener();
 applySession(decodeSessionParam());
 initAuth0();
 connectToSessionServer(); // Start WebSocket connection for live reload
+
+// Submit form constraints - require URL or Thoughts, validate inputs
+function initSubmitFormConstraints() {
+  const form = document.getElementById('news-submit-form');
+  if (!form) return;
+  
+  const headlineInput = form.querySelector('input[name="title"]');
+  const urlInput = form.querySelector('input[name="url"]');
+  const textInput = form.querySelector('textarea[name="text"]');
+  const submitBtn = form.querySelector('button[type="submit"]');
+  const eitherOr = form.querySelector('.news-either-or');
+  
+  if (!headlineInput || !urlInput || !textInput || !submitBtn) return;
+  
+  // ===== Draft Storage =====
+  const DRAFT_KEY = 'news-draft';
+  
+  function saveDraft() {
+    const draft = {
+      title: headlineInput.value,
+      url: urlInput.value,
+      text: textInput.value,
+      savedAt: Date.now()
+    };
+    try {
+      localStorage.setItem(DRAFT_KEY, JSON.stringify(draft));
+    } catch (e) {
+      console.warn('[news] Failed to save draft:', e);
+    }
+  }
+  
+  function loadDraft() {
+    try {
+      const saved = localStorage.getItem(DRAFT_KEY);
+      if (!saved) return;
+      const draft = JSON.parse(saved);
+      // Only restore if draft is less than 24 hours old
+      if (draft.savedAt && Date.now() - draft.savedAt < 24 * 60 * 60 * 1000) {
+        if (draft.title) headlineInput.value = draft.title;
+        if (draft.url) urlInput.value = draft.url;
+        if (draft.text) textInput.value = draft.text;
+        console.log('[news] Draft restored');
+      } else {
+        clearDraft();
+      }
+    } catch (e) {
+      console.warn('[news] Failed to load draft:', e);
+    }
+  }
+  
+  function clearDraft() {
+    try {
+      localStorage.removeItem(DRAFT_KEY);
+      console.log('[news] Draft cleared');
+    } catch (e) {
+      console.warn('[news] Failed to clear draft:', e);
+    }
+  }
+  
+  // Load draft on init
+  loadDraft();
+  
+  // Save draft on input (debounced)
+  let saveTimeout;
+  function debouncedSaveDraft() {
+    clearTimeout(saveTimeout);
+    saveTimeout = setTimeout(saveDraft, 500);
+  }
+  
+  headlineInput.addEventListener('input', debouncedSaveDraft);
+  urlInput.addEventListener('input', debouncedSaveDraft);
+  textInput.addEventListener('input', debouncedSaveDraft);
+  
+  // Expose clearDraft for use after successful submit
+  form.clearDraft = clearDraft;
+  
+  // Add error message elements
+  function getOrCreateError(input, id) {
+    let err = document.getElementById(id);
+    if (!err) {
+      err = document.createElement('div');
+      err.id = id;
+      err.className = 'news-field-error';
+      input.parentNode.appendChild(err);
+    }
+    return err;
+  }
+  
+  const headlineError = getOrCreateError(headlineInput, 'headline-error');
+  const urlError = getOrCreateError(urlInput, 'url-error');
+  
+  function validateUrl(url) {
+    if (!url) return { valid: true, error: '' }; // Empty is OK (optional)
+    if (!url.startsWith('https://') && !url.startsWith('http://')) {
+      return { valid: false, error: 'URL must start with https://' };
+    }
+    try {
+      new URL(url);
+      return { valid: true, error: '' };
+    } catch {
+      return { valid: false, error: 'Invalid URL format' };
+    }
+  }
+  
+  function updateConstraints() {
+    const headline = headlineInput.value.trim();
+    const url = urlInput.value.trim();
+    const text = textInput.value.trim();
+    
+    const hasHeadline = headline.length > 0;
+    const hasUrl = url.length > 0;
+    const hasText = text.length > 0;
+    const urlValidation = validateUrl(url);
+    
+    // Show/hide errors
+    headlineError.textContent = '';
+    urlError.textContent = urlValidation.error;
+    
+    // Valid if: has headline AND (has valid url OR has text)
+    const hasContent = (hasUrl && urlValidation.valid) || hasText;
+    const isValid = hasHeadline && hasContent;
+    
+    submitBtn.disabled = !isValid;
+    
+    if (eitherOr) {
+      eitherOr.classList.toggle('has-content', hasUrl || hasText);
+    }
+  }
+  
+  // Validate on blur for headline
+  headlineInput.addEventListener('blur', () => {
+    if (!headlineInput.value.trim()) {
+      headlineError.textContent = 'Headline is required';
+    }
+  });
+  
+  headlineInput.addEventListener('input', updateConstraints);
+  urlInput.addEventListener('input', updateConstraints);
+  textInput.addEventListener('input', updateConstraints);
+  
+  // Prevent submit if invalid
+  form.addEventListener('submit', (e) => {
+    const headline = headlineInput.value.trim();
+    const url = urlInput.value.trim();
+    const text = textInput.value.trim();
+    const urlValidation = validateUrl(url);
+    
+    if (!headline) {
+      e.preventDefault();
+      headlineError.textContent = 'Headline is required';
+      headlineInput.focus();
+      return;
+    }
+    
+    if (url && !urlValidation.valid) {
+      e.preventDefault();
+      urlInput.focus();
+      return;
+    }
+    
+    if (!url && !text) {
+      e.preventDefault();
+      urlInput.focus();
+      return;
+    }
+  });
+  
+  // Initial state
+  updateConstraints();
+}
+
+// Notify VS Code we're ready to receive session
+if (isInVSCode()) {
+  window.parent?.postMessage({ type: 'news:ready' }, '*');
+}
diff --git a/system/public/news.aesthetic.computer/main.css b/system/public/news.aesthetic.computer/main.css
index 50da8157d6..67fcd62584 100644
--- a/system/public/news.aesthetic.computer/main.css
+++ b/system/public/news.aesthetic.computer/main.css
@@ -815,6 +815,199 @@ body {
   color: var(--text-primary);
 }
 
+/* Login prompt */
+.news-login-prompt {
+  background: var(--bg-secondary);
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  padding: 16px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.news-login-prompt p {
+  margin: 0 0 8px 0;
+  font-size: 13px;
+}
+
+.news-login-prompt p:last-child {
+  margin-bottom: 0;
+}
+
+.news-inline-login {
+  background: var(--accent);
+  color: white;
+  border: none;
+  padding: 4px 12px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+.news-inline-login:hover {
+  background: var(--accent-hover);
+}
+
+.news-handle-note {
+  font-size: 11px !important;
+  color: var(--text-meta);
+}
+
+.news-handle-note a {
+  color: var(--accent);
+}
+
+/* Hide login prompt when logged in */
+.news-report.logged-in .news-login-prompt {
+  display: none;
+}
+
+.news-report form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.news-report label {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+}
+
+.news-report input,
+.news-report textarea {
+  padding: 8px 10px;
+  font-size: 13px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-input);
+  color: var(--text-primary);
+  border-radius: 3px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.news-report input:focus,
+.news-report textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.news-report textarea {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.news-report button {
+  align-self: flex-start;
+  margin-top: 8px;
+  padding: 8px 20px;
+  font-size: 12px;
+  font-weight: bold;
+  border: none;
+  border-radius: 3px;
+  background: var(--accent);
+  color: white;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.news-report button:hover {
+  background: var(--accent-hover);
+}
+
+.news-report button:disabled {
+  background: var(--text-meta);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Pick one or both hint */
+.news-pick-hint {
+  font-size: 11px;
+  color: var(--text-meta);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+/* Either/Or field layout */
+.news-either-or {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 8px 0;
+  position: relative;
+  padding: 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.news-either-or:focus-within,
+.news-either-or.has-content {
+  opacity: 1;
+  border-color: var(--accent);
+}
+
+.news-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.news-field-group + .news-field-group {
+  margin-top: 12px;
+}
+
+/* Field validation errors */
+.news-field-error {
+  font-size: 11px;
+  color: #d44;
+  margin-top: 4px;
+  min-height: 14px;
+}
+
+.news-report input:invalid:not(:placeholder-shown),
+.news-report input.has-error {
+  border-color: #d44;
+}
+
+/* Form messages (login/handle required) */
+.news-form-message {
+  padding: 12px 16px;
+  border-radius: 4px;
+  font-size: 12px;
+  margin-bottom: 16px;
+  display: none;
+}
+
+.news-form-message.error {
+  background: rgba(220, 68, 68, 0.15);
+  border: 1px solid #d44;
+  color: #d44;
+}
+
+.news-form-message.info {
+  background: rgba(68, 136, 220, 0.15);
+  border: 1px solid #48d;
+  color: #48d;
+}
+
+@media (prefers-color-scheme: dark) {
+  .news-form-message.error {
+    background: rgba(220, 68, 68, 0.2);
+    color: #f66;
+  }
+  .news-form-message.info {
+    background: rgba(68, 136, 220, 0.2);
+    color: #6af;
+  }
+}
+
 .news-guidelines {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
@@ -825,6 +1018,12 @@ body {
   color: var(--text-secondary);
 }
 
+/* Guidelines below the form */
+.news-guidelines-below {
+  margin-top: 24px;
+  margin-bottom: 0;
+}
+
 .news-guidelines p {
   margin: 0 0 8px 0;
 }
diff --git a/vscode-extension/extension.ts b/vscode-extension/extension.ts
index d928903111..89e64e2070 100644
--- a/vscode-extension/extension.ts
+++ b/vscode-extension/extension.ts
@@ -1426,12 +1426,85 @@ async function activate(context: vscode.ExtensionContext): Promise<void> {
               sendNewsSession(panel.webview);
               break;
             }
+            case "news:login": {
+              const session = await vscode.authentication.getSession(
+                "aesthetic",
+                ["profile"],
+                { createIfNone: true },
+              );
+              if (session) {
+                extContext.globalState.update("aesthetic:session", session);
+                updateUserStatusBar();
+                await sendNewsSession(panel.webview);
+              }
+              break;
+            }
+            case "news:logout": {
+              const session = await vscode.authentication.getSession(
+                "aesthetic",
+                ["profile"],
+                { silent: true },
+              );
+              if (session) {
+                await ap.removeSession(session.id);
+                extContext.globalState.update("aesthetic:session", undefined);
+              }
+              updateUserStatusBar();
+              await sendNewsSession(panel.webview);
+              break;
+            }
+            case "news:signup": {
+              // Signup is just login with a hint - Auth0 handles the rest
+              const session = await vscode.authentication.getSession(
+                "aesthetic",
+                ["profile"],
+                { createIfNone: true },
+              );
+              if (session) {
+                extContext.globalState.update("aesthetic:session", session);
+                updateUserStatusBar();
+                await sendNewsSession(panel.webview);
+              }
+              break;
+            }
             case "login": {
-              vscode.commands.executeCommand("aestheticComputer.logIn");
+              const session = await vscode.authentication.getSession(
+                "aesthetic",
+                ["profile"],
+                { createIfNone: true },
+              );
+              if (session) {
+                extContext.globalState.update("aesthetic:session", session);
+                updateUserStatusBar();
+                await sendNewsSession(panel.webview);
+              }
+              break;
+            }
+            case "signup": {
+              const session = await vscode.authentication.getSession(
+                "aesthetic",
+                ["profile"],
+                { createIfNone: true },
+              );
+              if (session) {
+                extContext.globalState.update("aesthetic:session", session);
+                updateUserStatusBar();
+                await sendNewsSession(panel.webview);
+              }
               break;
             }
             case "logout": {
-              vscode.commands.executeCommand("aestheticComputer.logOut");
+              const session = await vscode.authentication.getSession(
+                "aesthetic",
+                ["profile"],
+                { silent: true },
+              );
+              if (session) {
+                await ap.removeSession(session.id);
+                extContext.globalState.update("aesthetic:session", undefined);
+              }
+              updateUserStatusBar();
+              await sendNewsSession(panel.webview);
               break;
             }
           }
@@ -2418,7 +2491,14 @@ function getWebViewContent(webview: any, slug: string) {
             if (event.data?.type === 'setSession') {
               newsIframe?.contentWindow?.postMessage(event.data, '*');
             }
-            if (event.data?.type && (event.data.type.startsWith('vscode-extension:') || event.data.type.startsWith('news:'))) {
+            // Forward news: prefixed messages and login/logout/signup to extension
+            if (event.data?.type && (
+              event.data.type.startsWith('vscode-extension:') || 
+              event.data.type.startsWith('news:') ||
+              event.data.type === 'login' ||
+              event.data.type === 'logout' ||
+              event.data.type === 'signup'
+            )) {
               vscode.postMessage(event.data);
             }
           });
diff --git a/vscode-extension/package-lock.json b/vscode-extension/package-lock.json
index 43a23adff5..61ba9eac9a 100644
--- a/vscode-extension/package-lock.json
+++ b/vscode-extension/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "aesthetic-computer-code",
-  "version": "1.245.0",
+  "version": "1.248.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aesthetic-computer-code",
-      "version": "1.245.0",
+      "version": "1.248.0",
       "license": "None",
       "dependencies": {
         "acorn": "^8.15.0",
diff --git a/vscode-extension/package.json b/vscode-extension/package.json
index 4fd3bdf04f..846c3b5b5a 100644
--- a/vscode-extension/package.json
+++ b/vscode-extension/package.json
@@ -4,7 +4,7 @@
   "displayName": "Aesthetic Computer",
   "icon": "resources/icon.png",
   "author": "Jeffrey Alan Scudder",
-  "version": "1.246.0",
+  "version": "1.248.0",
   "description": "Code, run, and publish your pieces. Includes Aesthetic Computer themes and KidLisp syntax highlighting.",
   "engines": {
     "vscode": "^1.105.0"
-- 
2.51.2