@fraziym/axoniz 0.1.0

package/dist/web/static/js/MODULE_SUMMARY.md

@@ -0,0 +1,124 @@
+# Module Organization Summary
+
+## Purpose
+This document describes what each JavaScript module is responsible for.
+
+> **Note:** This file is a partial, historical overview — not a complete authoritative
+> inventory. The authoritative module set is the current `static/js/` tree plus the
+> scripts loaded by `static/index.html`. As of this writing that tree holds **65 `.js`
+> files** across **8 subdirectories** (`calendar/`, `color/`, `compare/`, `editor/`,
+> `emailLibrary/`, `markdown/`, `research/`, `util/`), and `static/index.html` loads
+> **35** `/static…` script tags. The catalog below covers only the original core
+> modules and is not kept in sync with every module.
+
+---
+
+## Core Modules (in static/js/)
+
+### 1. **ui.js**
+- UI helper functions and utilities
+- Toast notifications (`showToast`, `showError`)
+- Element getter (`el()`)
+- Clipboard operations (`copyToClipboard`)
+- Scroll management (`scrollHistory`, `setAutoScroll`)
+- Auto-resize textarea
+- Debounce utility
+
+### 2. **markdown.js**
+- Markdown processing and rendering
+- Convert markdown to HTML (`mdToHtml`)
+- Code block handling with syntax highlighting
+- Content rendering for message arrays
+- Text cleanup (`squashOutsideCode`)
+
+### 3. **sessions.js**
+- Session/chat management
+- Create, load, delete, switch sessions
+- Session history loading
+- Direct chat creation with models
+- Session renaming
+
+### 4. **memory.js**
+- AI memory management
+- Load, add, edit, delete memories
+- Memory search/filtering
+- Memory UI rendering
+- Memory count updates
+
+### 5. **fileHandler.js**
+- File attachment handling
+- File picker dialog
+- File upload to server
+- Attachment strip rendering
+- Pending files management
+- File preview/removal
+
+### 6. **voiceRecorder.js**
+- Voice recording functionality
+- Start/stop recording
+- Audio file creation
+- Microphone permission handling
+- Recording UI updates
+
+### 7. **models.js**
+- Model scanning and display
+- Local model discovery (ports 8000-8020)
+- Provider management (OpenAI)
+- Model selection UI
+
+### 8. **rag.js**
+- RAG (Retrieval Augmented Generation) management
+- Load personal documents
+- Add directories to RAG
+- Display included files/directories
+
+### 9. **presets.js**
+- Conversation preset management
+- Load, save, activate presets
+- Custom preset configuration
+- Temperature, tokens, system prompt settings
+
+### 10. **search.js**
+- Web search settings
+- Provider selection (DuckDuckGo, Brave, SearXNG)
+- API key management
+- Save/load search configuration
+
+### 11. **chat.js** ⭐ (The Big One)
+- Main chat functionality
+- Message handling (`addMessage`)
+- Chat submission (`handleChatSubmit`)
+- Streaming response handling
+- Performance metrics display
+- Abort request management
+- Loading states and error handling
+
+---
+
+## Main Application File
+
+### **app.js**
+- Application initialization
+- Event listener setup
+- Drag & drop handlers
+- Keyboard shortcuts
+- Module initialization
+- Global configuration (API_BASE)
+- Coordinates all modules together
+
+---
+
+## Dependency Order (Load Order in HTML)
+```html
+<script src="/static/js/sessions.js"></script>      <!-- 1. Sessions first -->
+<script src="/static/js/memory.js"></script>        <!-- 2. Memory -->
+<script src="/static/js/markdown.js"></script>      <!-- 3. Markdown -->
+<script src="/static/js/ui.js"></script>            <!-- 4. UI utilities -->
+<script src="/static/js/fileHandler.js"></script>   <!-- 5. File handling -->
+<script src="/static/js/voiceRecorder.js"></script> <!-- 6. Voice -->
+<script src="/static/js/models.js"></script>        <!-- 7. Models -->
+<script src="/static/js/rag.js"></script>           <!-- 8. RAG -->
+<script src="/static/js/presets.js"></script>       <!-- 9. Presets -->
+<script src="/static/js/search.js"></script>        <!-- 10. Search -->
+<script src="/static/js/chat.js"></script>          <!-- 11. Chat -->
+<script src="/static/app.js"></script>              <!-- 12. Main app LAST -->

package/dist/web/static/js/a11y.js

@@ -0,0 +1,165 @@
+// Accessibility enhancements for keyboard + screen-reader users.
+//
+// Several primary controls in Zero are authored as click-only <div>s
+// (most notably the whole sidebar navigation: New Chat, Search, Brain,
+// Calendar, Compare, Cookbook, Deep Research, Gallery, Library, Notes,
+// Tasks, Theme, plus the account row). <div>s are not in the tab order and
+// are not announced as buttons, so keyboard and screen-reader users cannot
+// reach or operate them.
+//
+// This module enhances those rows in place — making them focusable
+// (tabindex=0), announcing them as buttons when it's safe to do so, and
+// activating them with Enter / Space — without changing how they look or
+// how they behave for mouse users. The visible focus ring already exists in
+// style.css (`.list-item:focus-visible`); it simply never fired because the
+// rows were never focusable.
+
+(function () {
+  'use strict';
+
+  // Click-as-button rows we want reachable by keyboard.
+  var ROW_SELECTOR = ['#sidebar .list-item', '#user-bar-profile'].join(',');
+
+  // Native interactive descendants. If a row contains one of these we must
+  // NOT give the row role="button" — a button inside a button is invalid
+  // (axe "nested-interactive") and confuses screen readers. Such rows still
+  // become focusable + Enter/Space-activatable, just without the role.
+  var NESTED_INTERACTIVE =
+    'a[href],button,input,select,textarea,[contenteditable="true"],[tabindex]:not([tabindex="-1"])';
+
+  function enhanceRow(el) {
+    if (!el || el.nodeType !== 1 || el.dataset.a11yEnhanced === '1') return;
+    var tag = el.tagName;
+    // Leave genuine native controls alone.
+    if (tag === 'BUTTON' || tag === 'A' || tag === 'INPUT' ||
+        tag === 'SELECT' || tag === 'TEXTAREA') return;
+
+    el.dataset.a11yEnhanced = '1';
+    if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0');
+    el.setAttribute('data-a11y-activatable', '1');
+
+    if (!el.querySelector(NESTED_INTERACTIVE) && !el.hasAttribute('role')) {
+      el.setAttribute('role', 'button');
+    }
+
+    // Guarantee an accessible name. Visible text normally supplies it; fall
+    // back to the title attribute for icon-only rows.
+    if (!el.getAttribute('aria-label') &&
+        !(el.textContent || '').trim() &&
+        el.getAttribute('title')) {
+      el.setAttribute('aria-label', el.getAttribute('title'));
+    }
+  }
+
+  function enhanceAll(root) {
+    (root || document).querySelectorAll(ROW_SELECTOR).forEach(enhanceRow);
+  }
+
+  // ---- Modal dialogs -----------------------------------------------------
+  // Zero modals are plain <div class="modal-content"> boxes. Marking
+  // them as ARIA dialogs lets screen readers announce them as dialogs and
+  // exempts their content from the "all content in landmarks" rule. We also
+  // normalize the modal title to heading level 2 (one below the page <h1>)
+  // so heading order stays valid no matter which tag the markup uses.
+  var titleSeq = 0;
+  // Each modal "kind" is a container selector plus where to find its title
+  // heading. Standard modals use .modal-content/.modal-header; the docked
+  // Notes pane uses its own markup.
+  var MODAL_KINDS = [
+    {
+      sel: '.modal-content',
+      heading: '.modal-header h1, .modal-header h2, .modal-header h3, ' +
+               '.modal-header h4, .modal-header h5, .modal-header h6'
+    },
+    { sel: '.notes-pane', heading: '.notes-pane-title' }
+  ];
+  var MODAL_SEL = MODAL_KINDS.map(function (k) { return k.sel; }).join(',');
+
+  function enhanceModal(mc, headingSel) {
+    if (!mc || mc.nodeType !== 1 || mc.dataset.a11yDialog === '1') return;
+    mc.dataset.a11yDialog = '1';
+    if (!mc.hasAttribute('role')) mc.setAttribute('role', 'dialog');
+    if (!mc.hasAttribute('aria-modal')) mc.setAttribute('aria-modal', 'true');
+
+    var heading = headingSel && mc.querySelector(headingSel);
+    if (heading) {
+      if (!heading.id) heading.id = 'a11y-modal-title-' + (++titleSeq);
+      if (!mc.hasAttribute('aria-labelledby')) {
+        mc.setAttribute('aria-labelledby', heading.id);
+      }
+      // Modal titles sit one level below the page <h1>; normalize so heading
+      // order stays valid regardless of the tag the markup happens to use.
+      if (!heading.hasAttribute('aria-level')) heading.setAttribute('aria-level', '2');
+    }
+  }
+
+  function enhanceModals(root) {
+    var scope = root || document;
+    MODAL_KINDS.forEach(function (k) {
+      scope.querySelectorAll(k.sel).forEach(function (mc) { enhanceModal(mc, k.heading); });
+    });
+  }
+
+  function headingSelFor(el) {
+    for (var i = 0; i < MODAL_KINDS.length; i++) {
+      if (el.matches(MODAL_KINDS[i].sel)) return MODAL_KINDS[i].heading;
+    }
+    return null;
+  }
+
+  // Delegated keyboard activation. We only act when the focused element is
+  // itself an enhanced row (keydown targets the focused element), so a press
+  // on a nested native button is left to the browser's own handling.
+  document.addEventListener('keydown', function (e) {
+    if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'Spacebar') return;
+    var el = e.target;
+    if (!el || !el.matches || !el.matches('[data-a11y-activatable]')) return;
+    e.preventDefault(); // Space would otherwise scroll the page
+    el.click();
+  });
+
+  function init() {
+    enhanceAll(document);
+    enhanceModals(document);
+
+    // Sidebar content is re-rendered as the user navigates (session lists,
+    // tool sub-rows, etc.). Watch for new rows and enhance them too.
+    var sidebar = document.getElementById('sidebar');
+    if (sidebar && 'MutationObserver' in window) {
+      new MutationObserver(function (muts) {
+        for (var i = 0; i < muts.length; i++) {
+          var added = muts[i].addedNodes;
+          for (var j = 0; j < added.length; j++) {
+            var n = added[j];
+            if (n.nodeType !== 1) continue;
+            if (n.matches && n.matches(ROW_SELECTOR)) enhanceRow(n);
+            if (n.querySelectorAll) enhanceAll(n);
+          }
+        }
+      }).observe(sidebar, { childList: true, subtree: true });
+    }
+
+    // Some modals (Notes, Tasks, …) are injected at runtime, usually as
+    // direct children of <body>. Catch those without paying for a deep
+    // subtree observer over the whole document.
+    if ('MutationObserver' in window) {
+      new MutationObserver(function (muts) {
+        for (var i = 0; i < muts.length; i++) {
+          var added = muts[i].addedNodes;
+          for (var j = 0; j < added.length; j++) {
+            var n = added[j];
+            if (n.nodeType !== 1) continue;
+            if (n.matches && n.matches(MODAL_SEL)) enhanceModal(n, headingSelFor(n));
+            if (n.querySelector && n.querySelector(MODAL_SEL)) enhanceModals(n);
+          }
+        }
+      }).observe(document.body, { childList: true });
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();