@oddessentials/agent-guild 0.21.0 → 0.22.0

package/README.md

@@ -124,6 +124,11 @@ vX.Y.Z** switches over when you are ready. The version badge opens
 
 <img src="docs/images/whats-new.webp" alt="The What's new panel listing the release notes of each version">
 
+**Keep notes at hand.** **Notes** in the top bar opens a notepad for prompts,
+commands and to-dos, even while a terminal is open. It saves up to 100,000
+characters as you type and keeps them in this browser, never on the manager;
+every tab of the page shows the same notes.
+
 **Appearance.** The Appearance menu in the top bar picks a skin and light or
 dark mode, without a reload. **Guild** is the default fantasy look;
 **Professional** is a plain business look with no characters; **Orbital**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Launch and watch AI coding-assistant terminal sessions from one local web page. A bundled session manager owns the terminals so the page can close and reconnect.",
   "license": "MIT",
   "repository": {

package/web/app.js

@@ -16,6 +16,7 @@ const GITHUB_ACCOUNT_KEY = 'agentGuild.githubAccount';
 const CLONE_PARENT_KEY = 'agentGuild.cloneParent';
 const SESSION_ORDER_KEY = 'agentGuild.sessionOrder';
 const SOUND_KEY = 'agentGuild.sound';
+const NOTES_KEY = 'agentGuild.notes';
 const RELEASES_URL = 'https://github.com/oddessentials/agent-guild/releases';
 const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
@@ -63,7 +64,7 @@ const state = {
 // ---- storage (may be unavailable, e.g. blocked site data) -----------------
 
 function load(key) { try { return localStorage.getItem(key); } catch { return null; } }
-function save(key, value) { try { value === null ? localStorage.removeItem(key) : localStorage.setItem(key, value); } catch { /* ignore */ } }
+function save(key, value) { try { value === null ? localStorage.removeItem(key) : localStorage.setItem(key, value); return true; } catch { return false; } }
 
 // ---- helpers --------------------------------------------------------------
 
@@ -87,6 +88,12 @@ function toast(message, ms = 5000, action = null) {
   toastTimer = setTimeout(() => { el.hidden = true; }, ms);
 }
 
+/**
+ * Handles a click, but not the second click of a double-click, which lands on whatever the first one
+ * opened or uncovered: Close over Notes, or Stop manager under a panel's Close.
+ */
+const firstClick = (run) => (e) => { if (e.detail < 2) run(); };
+
 function setConnection(kind, label) {
   const el = $('connection');
   el.className = `connection ${kind}`;
@@ -294,6 +301,99 @@ function placeAppearanceMenu() {
   menu.style.right = `${Math.max(8, Math.round(innerWidth - box.right))}px`;
 }
 
+// ---- notes ----------------------------------------------------------------
+
+/** Notes share the page's storage with every other setting, so they stay far below the browser's limit for it. */
+const NOTES_LIMIT = 100000;
+const NOTES_STATUS = {
+  saved: 'Saved in this browser as you type',
+  long: `Not saved: notes hold up to ${NOTES_LIMIT.toLocaleString('en-US')} characters. Shorten them to save.`,
+  refused: 'Not saved: the browser’s storage for this page is full or turned off. Copy what you need before you close the page.',
+};
+/**
+ * `saved`: the notes as this page last read or wrote them in storage. `status`: whether the text in the
+ * panel is saved, too `long` or `refused`; `shown`: the status the line under the title shows.
+ * `pressedOutside`: the last press on the panel was on its backdrop.
+ */
+const notesView = { saved: '', status: 'saved', shown: 'saved', pressedOutside: false };
+
+/** Shows notes another tab saved since this page last read or wrote them. Saved notes win over text this page could not save. */
+function refreshNotes() {
+  let text;
+  // Unlike load(), a read that fails is not taken for empty notes.
+  try { text = localStorage.getItem(NOTES_KEY) ?? ''; } catch { return; }
+  if (text === notesView.saved) return;
+  notesView.saved = text;
+  notesView.status = 'saved';
+  $('notes-text').value = text;
+  renderNotesStatus();
+  guardLeaving();
+}
+
+/** Saves the notes on every change; emptying them removes the saved copy. */
+function saveNotes() {
+  const text = $('notes-text').value;
+  if (text.length > NOTES_LIMIT) notesView.status = 'long';
+  else if (!save(NOTES_KEY, text || null)) notesView.status = 'refused';
+  else {
+    notesView.status = 'saved';
+    notesView.saved = text;
+  }
+  renderNotesStatus();
+  guardLeaving();
+}
+
+/** The line under the title is a live region, so it is rewritten only when the status changes. */
+function renderNotesStatus() {
+  if (notesView.shown === notesView.status) return;
+  notesView.shown = notesView.status;
+  const sub = $('notes-sub');
+  sub.textContent = NOTES_STATUS[notesView.status];
+  sub.classList.toggle('warn', notesView.status !== 'saved');
+}
+
+/** Another tab saved the notes, or cleared this page's storage. */
+function notesStored(e) {
+  if (e.key === NOTES_KEY || e.key === null) refreshNotes();
+}
+
+function openNotes() {
+  hideTip();
+  refreshNotes();
+  // Saving an empty note changes nothing, but shows at once when the browser keeps nothing.
+  if (notesView.status === 'saved' && !$('notes-text').value) saveNotes();
+  const dialog = $('notes');
+  if (!dialog.open) dialog.showModal();
+  $('notes-text').focus();
+}
+
+function closeNotes() {
+  if ($('notes').open) $('notes').close();
+}
+
+/** Focus goes back to the Notes button in every browser, never to the page itself. */
+function notesClosed() {
+  $('notes-open').focus();
+}
+
+/** The second press of a double-click on Notes lands in the panel, where it must not take the focus from the text. */
+const keepFocus = (e) => { if (e.detail > 1 && e.target !== $('notes-text')) e.preventDefault(); };
+
+/** Whether a press or click on the panel was on its backdrop, outside the sheet. */
+function isOutsideNotes(e) {
+  const box = e.currentTarget.getBoundingClientRect();
+  return e.target === e.currentTarget && (e.clientX < box.left || e.clientX >= box.right || e.clientY < box.top || e.clientY >= box.bottom);
+}
+
+function notesPressed(e) {
+  notesView.pressedOutside = isOutsideNotes(e);
+}
+
+/** Only a press and a release both outside close the notes: a drag into or out of them selects text. */
+function notesClicked(e) {
+  if (notesView.pressedOutside && isOutsideNotes(e)) closeNotes();
+}
+
 // ---- upgrading the manager ------------------------------------------------
 
 function renderUpgrade() {
@@ -2858,7 +2958,9 @@ function confirmLeaving(event) {
 
 function guardLeaving() {
   const running = state.connected && [...state.sessions.values()].some((s) => s.status === 'running');
-  if (running) addEventListener('beforeunload', confirmLeaving);
+  // Notes that could not be saved are lost with the page.
+  const unsaved = notesView.status !== 'saved' && $('notes-text').value !== '';
+  if (running || unsaved) addEventListener('beforeunload', confirmLeaving);
   else removeEventListener('beforeunload', confirmLeaving);
 }
 
@@ -3761,6 +3863,16 @@ document.addEventListener('keydown', (e) => {
 }, true);
 addEventListener('scroll', () => { if (tipFor) hideTip(); }, true);
 addEventListener('resize', () => { if (tipFor) hideTip(); });
+$('notes-open').addEventListener('click', firstClick(openNotes));
+$('notes-close').addEventListener('click', firstClick(closeNotes));
+$('notes').addEventListener('mousedown', keepFocus);
+$('notes').addEventListener('pointerdown', notesPressed);
+$('notes').addEventListener('click', notesClicked);
+$('notes').addEventListener('close', notesClosed);
+$('notes-text').addEventListener('input', saveNotes);
+addEventListener('storage', notesStored);
+// On load, and again for a page back from the back/forward cache, which may have missed another tab's notes.
+addEventListener('pageshow', refreshNotes);
 $('news-all').addEventListener('click', openNews);
 $('news-close').addEventListener('click', closeNews);
 $('news-fresh').addEventListener('click', showFreshNews);
@@ -3843,8 +3955,8 @@ $('models-more').addEventListener('click', () => {
   renderModels();
   $('models-list').children[before]?.querySelector('.model-toggle')?.focus();
 });
-$('stop-manager').addEventListener('click', () => stopManager());
-$('restart-manager').addEventListener('click', () => stopManager({ restart: true }));
+$('stop-manager').addEventListener('click', firstClick(() => stopManager()));
+$('restart-manager').addEventListener('click', firstClick(() => stopManager({ restart: true })));
 $('copy-command').addEventListener('click', copyCommand);
 $('upgrade').addEventListener('click', upgradeManager);
 $('appearance-menu').addEventListener('change', (e) => {

package/web/index.html

@@ -41,6 +41,7 @@
           <label class="choice" title="Plays when the session manager stops, remains unavailable after a brief recovery check, or a new Agent Guild update is discovered. Click or type on this page to allow playback."><input id="sound" type="checkbox" name="sound"><span class="sound-alerts">Alert sounds</span></label>
         </fieldset>
       </div>
+      <button id="notes-open" class="btn notes-open" type="button" aria-haspopup="dialog">Notes</button>
       <button id="restart-manager" class="btn restart-manager" type="button" hidden>Restart manager</button>
       <button id="stop-manager" class="btn danger stop-manager" type="button" hidden title="Stop the session manager. This ends every session.">Stop manager</button>
     </div>
@@ -179,6 +180,19 @@
     <p id="changelog-status" class="news-status" hidden></p>
   </dialog>
 
+  <dialog id="notes" class="news-panel notes-panel" aria-labelledby="notes-title">
+    <div class="news-bar">
+      <div class="news-heading">
+        <h2 id="notes-title">Notes</h2>
+        <p id="notes-sub" class="sub" aria-live="polite">Saved in this browser as you type</p>
+      </div>
+      <button id="notes-close" class="btn" type="button">Close</button>
+    </div>
+    <div class="news-body">
+      <textarea id="notes-text" class="notes-text" aria-labelledby="notes-title" aria-describedby="notes-sub" autocomplete="off" placeholder="Prompts, commands, to-dos: anything you want to keep at hand"></textarea>
+    </div>
+  </dialog>
+
   <dialog id="history" class="models history" aria-labelledby="history-title">
     <div class="models-bar">
       <span id="history-icon" class="provider-icon small"></span>

package/web/skins/gnomeland/skin.css

@@ -243,7 +243,7 @@
   }
   .btn.primary:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(233, 196, 122, 0.6), 0 5px 16px rgba(40, 70, 30, 0.35); }
   .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { background: var(--panel-strong); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { background: var(--panel-strong); }
 
   .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--panel-strong); backdrop-filter: blur(16px); }
   .models, .news-panel { box-shadow: var(--dialog-shadow); }
@@ -362,7 +362,7 @@
   .btn.primary { border-color: #6a8f3a; background: linear-gradient(#55924a, #35662f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(233, 196, 122, 0.3), 0 0 16px rgba(110, 170, 80, 0.3); }
   .btn.danger { color: #f59a8c; }
   .btn.danger:hover { border-color: #b8402f; box-shadow: 0 0 12px rgba(240, 123, 106, 0.3); }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { border-color: #4a3824; background: rgba(10, 7, 4, 0.7); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { border-color: #4a3824; background: rgba(10, 7, 4, 0.7); }
 
   .models::backdrop, .news-panel::backdrop { background: rgba(6, 4, 2, 0.66); }
   .terminal-panel { border-color: #5a4226; box-shadow: 0 0 0 1px rgba(233, 196, 122, 0.06), 0 30px 80px rgba(0, 0, 0, 0.7); }

package/web/skins/grove/skin.css

@@ -244,7 +244,7 @@
   }
   .btn.primary:hover { filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 20px rgba(45, 107, 69, 0.36); }
   .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { background: var(--paper-strong); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { background: var(--paper-strong); }
 
   .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--paper-strong); backdrop-filter: blur(16px); }
   .models, .news-panel { box-shadow: var(--dialog-shadow); }
@@ -371,7 +371,7 @@
   .btn.primary { background: linear-gradient(135deg, #4a8c5e, #2a6340); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 18px rgba(80, 160, 105, 0.35); }
   .btn.danger { color: #ff9a8e; }
   .btn.danger:hover { border-color: #b8443a; box-shadow: 0 0 12px rgba(240, 122, 108, 0.3); }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { border-color: #2e4a3d; background: rgba(4, 10, 8, 0.7); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { border-color: #2e4a3d; background: rgba(4, 10, 8, 0.7); }
 
   .models::backdrop, .news-panel::backdrop { background: rgba(2, 6, 5, 0.66); }
   .terminal-panel { border-color: #2e4a3d; box-shadow: 0 0 0 1px rgba(140, 210, 160, 0.06), 0 30px 80px rgba(0, 0, 0, 0.7); }

package/web/skins/guild/skin.css

@@ -376,7 +376,7 @@
   .btn.primary:hover { border-color: var(--gold); filter: brightness(1.08); }
   .btn.danger { color: #ff9a94; }
   .btn.danger:hover { border-color: #b8524d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 12px rgba(239, 107, 102, 0.3); }
-  .cwd input, .auth input { border-color: #4a3d25; background: rgba(12, 13, 17, 0.8); }
+  .cwd input, .auth input, .notes-text { border-color: #4a3d25; background: rgba(12, 13, 17, 0.8); }
   .auth {
     background: var(--card-bg);
     border: 1px solid #4a3d25; box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35);
@@ -480,7 +480,7 @@
   }
   .btn.primary:hover { border-color: #b8892f; filter: brightness(1.08); }
   .btn.danger:hover { border-color: #c4625d; }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input {
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .notes-text {
     border-color: #dccba5; background: #fffdf8; box-shadow: inset 0 1px 2px rgba(70, 48, 12, 0.06);
   }
   .auth { border-color: #e4d6b6; box-shadow: var(--card-shadow); }

package/web/skins/orbital/skin.css

@@ -246,7 +246,7 @@
   }
   .btn.primary:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 20px rgba(122, 79, 232, 0.4); }
   .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { background: var(--glass-strong); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { background: var(--glass-strong); }
 
   .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--glass-strong); backdrop-filter: blur(16px); }
   .models, .news-panel { box-shadow: var(--dialog-shadow); }
@@ -367,7 +367,7 @@
   .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 18px rgba(106, 92, 240, 0.45); }
   .btn.danger { color: #ff8c9c; }
   .btn.danger:hover { border-color: #c23a52; box-shadow: 0 0 12px rgba(255, 107, 129, 0.3); }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { border-color: #26355c; background: rgba(4, 7, 16, 0.7); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { border-color: #26355c; background: rgba(4, 7, 16, 0.7); }
 
   .models::backdrop, .news-panel::backdrop { background: rgba(2, 4, 10, 0.66); }
   .terminal-panel { border-color: #2a3a66; box-shadow: 0 0 0 1px rgba(120, 170, 255, 0.06), 0 30px 80px rgba(0, 0, 0, 0.7); }

package/web/styles.css

@@ -29,6 +29,7 @@
   --icon-github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z'/%3E%3C/svg%3E");
   --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 10.8v6.2' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='7.3' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
   --icon-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='9' cy='5.5' r='1.9'/%3E%3Ccircle cx='15' cy='5.5' r='1.9'/%3E%3Ccircle cx='9' cy='12' r='1.9'/%3E%3Ccircle cx='15' cy='12' r='1.9'/%3E%3Ccircle cx='9' cy='18.5' r='1.9'/%3E%3Ccircle cx='15' cy='18.5' r='1.9'/%3E%3C/svg%3E");
+  --icon-notes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h14v9.5l-5.5 5.5H5z'/%3E%3Cpath d='M13.5 19.5V14H19M8.5 9h7M8.5 12.5h4'/%3E%3C/svg%3E");
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   font-size: 15px;
   color-scheme: light;
@@ -336,13 +337,14 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
 .btn.danger { color: var(--danger); }
 .btn.danger:hover { border-color: var(--danger); }
 .btn:disabled { opacity: 0.6; cursor: progress; }
-.stop-manager, .restart-manager, .appearance, .upgrade { white-space: nowrap; }
-.appearance::before, .appearance-menu .choice > span::before {
+.stop-manager, .restart-manager, .appearance, .notes-open, .upgrade { white-space: nowrap; }
+.appearance::before, .notes-open::before, .appearance-menu .choice > span::before {
   content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.4em; vertical-align: -0.15em;
   background: currentColor; mask: var(--icon-sun) center / contain no-repeat;
 }
 :root[data-theme="dark"] .appearance::before, .appearance-menu .choice > .mode-dark::before { mask-image: var(--icon-moon); }
 .appearance-menu .choice > .sound-alerts::before { mask-image: var(--icon-sound); }
+.notes-open::before { mask-image: var(--icon-notes); }
 .appearance::after { margin-left: 0.45em; transform: rotate(90deg); transition: transform 0.15s var(--ease); }
 .appearance:has(+ :popover-open)::after { transform: rotate(-90deg); }
 .appearance-menu {
@@ -547,6 +549,20 @@ a.news-link:visited { color: var(--muted); }
 .changelog-changes li::marker { color: var(--muted); }
 .changelog-changes code { font-size: 0.8rem; padding: 0 4px; border-radius: 4px; background: var(--surface-2); }
 
+/* Notes: the News side sheet, holding one text field that skins style with their other fields. */
+.notes-panel .news-body { display: flex; flex-direction: column; padding-top: 12px; }
+.notes-text {
+  flex: 1; min-height: 8em; margin: 0; padding: 10px 12px; resize: none;
+  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
+  font: inherit; font-size: 0.9rem; line-height: 1.55;
+}
+.notes-text:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.notes-panel .sub.warn { color: var(--warn); }
+@media (pointer: coarse) {
+  /* iOS zooms in on a field with smaller text when it takes focus. */
+  .notes-text { font-size: 16px; }
+}
+
 .history-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px 0; }
 .history-tools input[type="search"] {
   flex: 1 1 220px; min-width: 0; padding: 7px 10px; border-radius: var(--radius); border: 1px solid var(--border);