jinzd-ai-cli 0.4.221 → 0.4.222

package/dist/web/client/dom.js

@@ -0,0 +1,34 @@
+/**
+ * ai-cli Web UI — shared DOM element references (P0-4 Phase 2, native ESM).
+ *
+ * Long-lived handles to static elements in index.html, resolved once at module
+ * load. Extracted from app.js so the "which elements the app holds" list has a
+ * single home. This module depends on nothing (acyclic leaf); it is imported by
+ * app.js. Module scripts are deferred, so the document is fully parsed before
+ * these getElementById calls run.
+ */
+
+export const messagesEl = document.getElementById('messages');
+export const chatArea = document.getElementById('chat-area');
+export const userInput = document.getElementById('user-input');
+export const btnSend = document.getElementById('btn-send');
+export const btnStop = document.getElementById('btn-stop');
+export const btnClear = document.getElementById('btn-clear');
+export const btnCompact = document.getElementById('btn-compact');
+export const btnThink = document.getElementById('btn-think');
+export const btnPlan = document.getElementById('btn-plan');
+export const providerSelect = document.getElementById('provider-select');
+export const modelSelect = document.getElementById('model-select');
+export const statusSession = document.getElementById('status-session');
+export const statusTokens = document.getElementById('status-tokens');
+export const connectionStatus = document.getElementById('connection-status');
+export const sidebar = document.getElementById('sidebar');
+export const sessionListEl = document.getElementById('session-list');
+export const btnNewSession = document.getElementById('btn-new-session');
+export const toolsListEl = document.getElementById('tools-list');
+export const sessionSearchInput = document.getElementById('session-search');
+export const toolsSearchInput = document.getElementById('tools-search');
+export const sessionTabsListEl = document.getElementById('session-tabs-list');
+export const btnAddTab = document.getElementById('btn-add-tab');
+export const dashboardPanel = document.getElementById('dashboard-panel');
+export const btnDashboardRefresh = document.getElementById('btn-dashboard-refresh');

package/dist/web/client/index.html

@@ -116,15 +116,15 @@
           <button class="sidebar-tab flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="memory" title="Chat memory semantic recall (B4, v0.4.90)">🧠 Memory</button>
           <button class="sidebar-tab flex-1 text-xs font-semibold py-2 px-1 text-center" data-tab="hub" title="Multi-agent brainstorm room (P4)">🏛 Hub</button>
         </div>
-        <!-- Dashboard tab (Phase 6) -->
-        <div id="tab-dashboard" class="sidebar-tab-content flex flex-col flex-1 overflow-hidden">
-          <div class="p-2 border-b border-base-content/10 flex items-center gap-1">
-            <span class="text-xs font-semibold flex-1">Agent Console</span>
-            <button id="btn-dashboard-refresh" class="btn btn-xs btn-ghost" title="Refresh dashboard">↻</button>
-          </div>
-          <div id="dashboard-panel" class="dashboard-panel flex-1 overflow-y-auto p-2 text-sm">
-            <div class="text-xs opacity-40 text-center py-4">Waiting for status…</div>
-          </div>
+        <!-- Dashboard tab (Phase 6) -->
+        <div id="tab-dashboard" class="sidebar-tab-content flex flex-col flex-1 overflow-hidden">
+          <div class="p-2 border-b border-base-content/10 flex items-center gap-1">
+            <span class="text-xs font-semibold flex-1">Agent Console</span>
+            <button id="btn-dashboard-refresh" class="btn btn-xs btn-ghost" title="Refresh dashboard">↻</button>
+          </div>
+          <div id="dashboard-panel" class="dashboard-panel flex-1 overflow-y-auto p-2 text-sm">
+            <div class="text-xs opacity-40 text-center py-4">Waiting for status…</div>
+          </div>
         </div>
         <!-- Sessions tab -->
         <div id="tab-sessions" class="sidebar-tab-content flex flex-col flex-1 overflow-hidden hidden">
@@ -192,16 +192,16 @@
               <button id="btn-memory-refresh" class="btn btn-xs btn-ghost" title="Incremental refresh">↻</button>
               <button id="btn-memory-rebuild" class="btn btn-xs btn-ghost" title="Full rebuild (slow first run)">⟳ Rebuild</button>
             </div>
-            <div id="memory-status" class="text-xs opacity-50 truncate">Loading index status…</div>
-            <div id="memory-governance" class="border-t border-base-content/10 pt-2 mt-1">
-              <div class="flex items-center gap-1 mb-1">
-                <span class="text-xs font-semibold flex-1">Persistent memory</span>
-                <button id="btn-memory-managed-refresh" class="btn btn-xs btn-ghost" title="Refresh persistent memory">↻</button>
-                <button id="btn-memory-managed-export" class="btn btn-xs btn-ghost" title="Export persistent memory">Export</button>
-              </div>
-              <div id="memory-managed-list" class="flex flex-col gap-1 max-h-48 overflow-y-auto text-xs">
-                <div class="opacity-40 py-1">Loading persistent memory…</div>
-              </div>
+            <div id="memory-status" class="text-xs opacity-50 truncate">Loading index status…</div>
+            <div id="memory-governance" class="border-t border-base-content/10 pt-2 mt-1">
+              <div class="flex items-center gap-1 mb-1">
+                <span class="text-xs font-semibold flex-1">Persistent memory</span>
+                <button id="btn-memory-managed-refresh" class="btn btn-xs btn-ghost" title="Refresh persistent memory">↻</button>
+                <button id="btn-memory-managed-export" class="btn btn-xs btn-ghost" title="Export persistent memory">Export</button>
+              </div>
+              <div id="memory-managed-list" class="flex flex-col gap-1 max-h-48 overflow-y-auto text-xs">
+                <div class="opacity-40 py-1">Loading persistent memory…</div>
+              </div>
             </div>
           </div>
           <div id="memory-hits" class="flex-1 overflow-y-auto p-2 flex flex-col gap-2 text-sm">
@@ -366,8 +366,15 @@
     <form method="dialog" class="modal-backdrop"><button>close</button></form>
   </dialog>
 
-  <script src="app.js"></script>
-  <script src="templates.js"></script>
-  <script src="actions.js"></script>
+  <!-- state.js stays a classic script (NOT a module): its top-level `let`
+       globals live in the shared global lexical environment so the ES modules
+       below can read AND reassign them as free variables. Must load first. -->
+  <script src="state.js"></script>
+  <!-- ES modules (P0-4 Phase 2). Ordered so top-level side effects run
+       app → templates → actions, matching the previous classic-script order.
+       util.js loads via `import` from app.js (no tag needed). -->
+  <script type="module" src="app.js"></script>
+  <script type="module" src="templates.js"></script>
+  <script type="module" src="actions.js"></script>
 </body>
 </html>

package/dist/web/client/state.js

@@ -0,0 +1,103 @@
+/**
+ * ai-cli Web UI — Central client state (P0-4 Phase 1)
+ *
+ * All cross-cutting mutable application state lives here, moved out of the
+ * 3400-line app.js so there is a single place to find "what state the UI holds".
+ *
+ * ── Runtime note (do NOT break) ──────────────────────────────────────────
+ * These are classic <script> files (not ES modules). Top-level `let`/`const`
+ * bindings go into the shared *global lexical environment*, so every binding
+ * declared here is visible — and, for `let`, reassignable — from app.js /
+ * templates.js / actions.js exactly as if they were still declared inline.
+ * This file MUST be loaded BEFORE app.js in index.html so the bindings exist
+ * before app.js's top-level DOM-ref code runs.
+ *
+ * ── Types ────────────────────────────────────────────────────────────────
+ * JSDoc typedefs below give editors/`tsc --checkJs` type information without
+ * introducing a build step (Phase 2 moves this to real .ts under Vite).
+ *
+ * @typedef {Object} SessionTab
+ * @property {string} id                Local tab id (not the session id)
+ * @property {string|null} sessionId    Backend session id, or null if unsaved
+ * @property {string} title             Tab label
+ * @property {string} [messagesHtml]    Snapshot of #messages innerHTML while inactive
+ * @property {number} [scrollPos]       Saved scroll offset while inactive
+ * @property {*} [tokenUsage]           Cached token/cost usage for the status bar
+ * @property {boolean} [isProcessing]   Whether this tab has an in-flight generation
+ *
+ * @typedef {Object} PendingImage
+ * @property {string} name              Original filename
+ * @property {string} data              base64-encoded bytes
+ * @property {string} mime              MIME type (e.g. image/png)
+ *
+ * @typedef {Object} ToolTimer
+ * @property {number} startTime         performance/Date.now() when the tool started
+ * @property {number} intervalId        setInterval handle updating the elapsed label
+ */
+
+// ── Connection state ───────────────────────────────────────────────
+/** @type {WebSocket|null} */
+let ws = null;
+let connected = false;
+let processing = false;
+/** @type {ReturnType<typeof setInterval>|null} */
+let heartbeatTimer = null;
+let reconnectDelay = 1000; // Start at 1s, exponential backoff
+
+// ── Auth state ─────────────────────────────────────────────────────
+// M4 fix (v0.4.107): the auth token now lives only in an httpOnly cookie.
+// `authToken` remains as a legacy variable so existing call sites compile,
+// but it should always be empty — the cookie is what authenticates the WS
+// upgrade and HTTP requests via `credentials: 'same-origin'`.
+let authToken = '';
+// Clear any legacy localStorage token from an older client.
+try { localStorage.removeItem('aicli-auth-token'); } catch {}
+let authUsername = localStorage.getItem('aicli-auth-user') || '';
+let authMode = 'login'; // 'login' or 'register'
+
+// ── Streaming render state ─────────────────────────────────────────
+/** @type {HTMLElement|null} */
+let currentAssistantEl = null;
+let currentAssistantContent = '';
+/** @type {HTMLElement|null} */
+let currentThinkingEl = null;
+let currentThinkingContent = '';
+
+// ── Data / input state ─────────────────────────────────────────────
+/** @type {Array<*>} */
+let providers = [];
+/** @type {PendingImage[]} */
+let pendingImages = [];
+/** @type {string[]} */
+let inputHistory = []; // Previous user inputs for ↑/↓ navigation
+let historyIndex = -1; // -1 = not browsing history
+let savedInputDraft = ''; // Saved current input when entering history mode
+/** @type {Map<string, ToolTimer>} */
+let toolTimers = new Map(); // callId → { startTime, intervalId }
+/** @type {*} */
+let latestStatus = null;
+/** @type {Map<string, *>} */
+let pendingApprovals = new Map(); // requestId -> approval metadata
+/** @type {Array<*>} */
+let lastToolResults = [];
+/** @type {Array<*>} */
+let replayCurrentMessages = [];
+let replayCurrentFilter = 'all';
+/** @type {Array<*>} */
+let cachedSessions = [];
+/** @type {*} */
+let cachedToolsData = null;
+
+// ── Multi-Tab state (P2-1) ────────────────────────────────────────
+// Each "tab" represents an open session within the single page.
+// Only one tab is active at a time; others store a DOM snapshot.
+/** @type {SessionTab[]} */
+let sessionTabs = [];
+let activeTabIdx = -1;     // Index into sessionTabs
+
+// ── Tab identity (per browser tab, survives page reload) ──────────
+let tabId = sessionStorage.getItem('aicli-tab-id');
+if (!tabId) {
+  tabId = 'tab-' + Math.random().toString(36).slice(2, 10) + Math.random().toString(36).slice(2, 6);
+  sessionStorage.setItem('aicli-tab-id', tabId);
+}

package/dist/web/client/sw.js

@@ -16,7 +16,7 @@ const CACHE_NAME = 'aicli-v3';
 // HTML/JS that must always be fresh — never served from the SW cache, so an
 // upgraded server is reflected on the very next load. Other assets (vendored
 // CSS/JS, icons) are large + content-stable and fine to cache.
-const NEVER_CACHE = new Set(['/', '/index.html', '/app.js', '/templates.js', '/actions.js']);
+const NEVER_CACHE = new Set(['/', '/index.html', '/state.js', '/util.js', '/dom.js', '/app.js', '/templates.js', '/actions.js']);
 
 // App shell to precache (offline-capable startup). Deliberately EXCLUDES the
 // always-fresh HTML/JS in NEVER_CACHE — only large content-stable assets.

package/dist/web/client/templates.js

@@ -1,188 +1,191 @@
-/**
- * Prompt template modal and import/export helpers.
- * Loaded after app.js so it can use shared UI helpers.
- */
-
-const TEMPLATES_KEY = 'aicli-templates';
-
-function loadTemplates() {
-  try {
-    return JSON.parse(localStorage.getItem(TEMPLATES_KEY) || '[]');
-  } catch {
-    return [];
-  }
-}
-
-function saveTemplatesToStorage(templates) {
-  localStorage.setItem(TEMPLATES_KEY, JSON.stringify(templates));
-}
-
-function openTemplatesModal() {
-  const modal = document.getElementById('templates-modal');
-  if (!modal) return;
-  cancelTemplateForm();
-  renderTemplateList();
-  document.getElementById('template-search').value = '';
-  modal.showModal();
-}
-
-function renderTemplateList(filter) {
-  const listEl = document.getElementById('template-list');
-  if (!listEl) return;
-  const templates = loadTemplates();
-  const q = (filter || '').toLowerCase();
-  const filtered = q
-    ? templates.filter(t => t.name.toLowerCase().includes(q) || (t.tags || []).some(tag => tag.toLowerCase().includes(q)) || t.content.toLowerCase().includes(q))
-    : templates;
-
-  if (filtered.length === 0) {
-    listEl.innerHTML = `<div class="template-empty">${q ? 'No matching templates' : 'No templates yet. Click + New to create one.'}</div>`;
-    return;
-  }
-
-  listEl.innerHTML = filtered.map(t => {
-    const preview = t.content.length > 80 ? t.content.slice(0, 80) + '...' : t.content;
-    const tagsHtml = (t.tags || []).map(tag => `<span class="template-item-tag">${escapeHtml(tag)}</span>`).join('');
-    return `
-      <div class="template-item" data-tpl-id="${t.id}" data-action="use-template">
-        <div class="template-item-body">
-          <div class="template-item-name">${escapeHtml(t.name)}</div>
-          <div class="template-item-preview">${escapeHtml(preview)}</div>
-          ${tagsHtml ? `<div class="template-item-tags">${tagsHtml}</div>` : ''}
-        </div>
-        <div class="template-item-actions">
-          <button class="btn btn-xs btn-ghost" data-action="edit-template" title="Edit">Edit</button>
-          <button class="btn btn-xs btn-ghost" data-action="delete-template" title="Delete">Delete</button>
-        </div>
-      </div>`;
-  }).join('');
-}
-
-function useTemplate(id) {
-  const templates = loadTemplates();
-  const tpl = templates.find(t => t.id === id);
-  if (!tpl) return;
-  const input = document.getElementById('user-input');
-  if (!input) return;
-  input.value = tpl.content;
-  input.focus();
-  input.style.height = 'auto';
-  input.style.height = Math.min(input.scrollHeight, 200) + 'px';
-  document.getElementById('templates-modal')?.close();
-}
-
-function showAddTemplate() {
-  const form = document.getElementById('template-form');
-  form.classList.remove('hidden');
-  document.getElementById('tpl-edit-id').value = '';
-  document.getElementById('tpl-name').value = '';
-  document.getElementById('tpl-content').value = '';
-  document.getElementById('tpl-tags').value = '';
-  document.getElementById('tpl-name').focus();
-}
-
-function editTemplate(id) {
-  const templates = loadTemplates();
-  const tpl = templates.find(t => t.id === id);
-  if (!tpl) return;
-  const form = document.getElementById('template-form');
-  form.classList.remove('hidden');
-  document.getElementById('tpl-edit-id').value = tpl.id;
-  document.getElementById('tpl-name').value = tpl.name;
-  document.getElementById('tpl-content').value = tpl.content;
-  document.getElementById('tpl-tags').value = (tpl.tags || []).join(', ');
-  document.getElementById('tpl-name').focus();
-}
-
-function cancelTemplateForm() {
-  document.getElementById('template-form')?.classList.add('hidden');
-}
-
-function saveTemplateForm() {
-  const name = document.getElementById('tpl-name').value.trim();
-  const content = document.getElementById('tpl-content').value.trim();
-  const tagsRaw = document.getElementById('tpl-tags').value.trim();
-  const editId = document.getElementById('tpl-edit-id').value;
-
-  if (!name || !content) return;
-
-  const tags = tagsRaw ? tagsRaw.split(',').map(s => s.trim()).filter(Boolean) : [];
-  const templates = loadTemplates();
-
-  if (editId) {
-    const idx = templates.findIndex(t => t.id === editId);
-    if (idx >= 0) {
-      templates[idx].name = name;
-      templates[idx].content = content;
-      templates[idx].tags = tags;
-    }
-  } else {
-    templates.unshift({
-      id: 'tpl-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6),
-      name,
-      content,
-      tags,
-      createdAt: new Date().toISOString(),
-    });
-  }
-
-  saveTemplatesToStorage(templates);
-  cancelTemplateForm();
-  renderTemplateList();
-}
-
-function deleteTemplate(id) {
-  const templates = loadTemplates().filter(t => t.id !== id);
-  saveTemplatesToStorage(templates);
-  renderTemplateList(document.getElementById('template-search')?.value);
-}
-
-function exportTemplates() {
-  const templates = loadTemplates();
-  if (templates.length === 0) return;
-  const blob = new Blob([JSON.stringify(templates, null, 2)], { type: 'application/json' });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = `aicli-templates-${new Date().toISOString().slice(0, 10)}.json`;
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-function importTemplates() {
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.accept = '.json';
-  input.addEventListener('change', () => {
-    const file = input.files[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.addEventListener('load', () => {
-      try {
-        const imported = JSON.parse(reader.result);
-        if (!Array.isArray(imported)) throw new Error('Not an array');
-        const existing = loadTemplates();
-        const existingIds = new Set(existing.map(t => t.id));
-        let added = 0;
-        for (const t of imported) {
-          if (t.id && t.name && t.content && !existingIds.has(t.id)) {
-            existing.push(t);
-            added++;
-          }
-        }
-        saveTemplatesToStorage(existing);
-        renderTemplateList();
-        addInfoMessage(`Imported ${added} template(s).`);
-      } catch {
-        addErrorMessage('Failed to import templates: invalid JSON format.');
-      }
-    });
-    reader.readAsText(file);
-  });
-  input.click();
-}
-
-document.getElementById('btn-templates')?.addEventListener('click', openTemplatesModal);
-document.getElementById('template-search')?.addEventListener('input', (e) => {
-  renderTemplateList(e.target.value);
-});
+/**
+ * Prompt template modal and import/export helpers (ES module — P0-4 Phase 2).
+ * Depends on shared helpers from app.js / util.js.
+ */
+
+import { escapeHtml } from './util.js';
+import { addInfoMessage, addErrorMessage } from './app.js';
+
+const TEMPLATES_KEY = 'aicli-templates';
+
+function loadTemplates() {
+  try {
+    return JSON.parse(localStorage.getItem(TEMPLATES_KEY) || '[]');
+  } catch {
+    return [];
+  }
+}
+
+function saveTemplatesToStorage(templates) {
+  localStorage.setItem(TEMPLATES_KEY, JSON.stringify(templates));
+}
+
+function openTemplatesModal() {
+  const modal = document.getElementById('templates-modal');
+  if (!modal) return;
+  cancelTemplateForm();
+  renderTemplateList();
+  document.getElementById('template-search').value = '';
+  modal.showModal();
+}
+
+function renderTemplateList(filter) {
+  const listEl = document.getElementById('template-list');
+  if (!listEl) return;
+  const templates = loadTemplates();
+  const q = (filter || '').toLowerCase();
+  const filtered = q
+    ? templates.filter(t => t.name.toLowerCase().includes(q) || (t.tags || []).some(tag => tag.toLowerCase().includes(q)) || t.content.toLowerCase().includes(q))
+    : templates;
+
+  if (filtered.length === 0) {
+    listEl.innerHTML = `<div class="template-empty">${q ? 'No matching templates' : 'No templates yet. Click + New to create one.'}</div>`;
+    return;
+  }
+
+  listEl.innerHTML = filtered.map(t => {
+    const preview = t.content.length > 80 ? t.content.slice(0, 80) + '...' : t.content;
+    const tagsHtml = (t.tags || []).map(tag => `<span class="template-item-tag">${escapeHtml(tag)}</span>`).join('');
+    return `
+      <div class="template-item" data-tpl-id="${t.id}" data-action="use-template">
+        <div class="template-item-body">
+          <div class="template-item-name">${escapeHtml(t.name)}</div>
+          <div class="template-item-preview">${escapeHtml(preview)}</div>
+          ${tagsHtml ? `<div class="template-item-tags">${tagsHtml}</div>` : ''}
+        </div>
+        <div class="template-item-actions">
+          <button class="btn btn-xs btn-ghost" data-action="edit-template" title="Edit">Edit</button>
+          <button class="btn btn-xs btn-ghost" data-action="delete-template" title="Delete">Delete</button>
+        </div>
+      </div>`;
+  }).join('');
+}
+
+export function useTemplate(id) {
+  const templates = loadTemplates();
+  const tpl = templates.find(t => t.id === id);
+  if (!tpl) return;
+  const input = document.getElementById('user-input');
+  if (!input) return;
+  input.value = tpl.content;
+  input.focus();
+  input.style.height = 'auto';
+  input.style.height = Math.min(input.scrollHeight, 200) + 'px';
+  document.getElementById('templates-modal')?.close();
+}
+
+export function showAddTemplate() {
+  const form = document.getElementById('template-form');
+  form.classList.remove('hidden');
+  document.getElementById('tpl-edit-id').value = '';
+  document.getElementById('tpl-name').value = '';
+  document.getElementById('tpl-content').value = '';
+  document.getElementById('tpl-tags').value = '';
+  document.getElementById('tpl-name').focus();
+}
+
+export function editTemplate(id) {
+  const templates = loadTemplates();
+  const tpl = templates.find(t => t.id === id);
+  if (!tpl) return;
+  const form = document.getElementById('template-form');
+  form.classList.remove('hidden');
+  document.getElementById('tpl-edit-id').value = tpl.id;
+  document.getElementById('tpl-name').value = tpl.name;
+  document.getElementById('tpl-content').value = tpl.content;
+  document.getElementById('tpl-tags').value = (tpl.tags || []).join(', ');
+  document.getElementById('tpl-name').focus();
+}
+
+export function cancelTemplateForm() {
+  document.getElementById('template-form')?.classList.add('hidden');
+}
+
+export function saveTemplateForm() {
+  const name = document.getElementById('tpl-name').value.trim();
+  const content = document.getElementById('tpl-content').value.trim();
+  const tagsRaw = document.getElementById('tpl-tags').value.trim();
+  const editId = document.getElementById('tpl-edit-id').value;
+
+  if (!name || !content) return;
+
+  const tags = tagsRaw ? tagsRaw.split(',').map(s => s.trim()).filter(Boolean) : [];
+  const templates = loadTemplates();
+
+  if (editId) {
+    const idx = templates.findIndex(t => t.id === editId);
+    if (idx >= 0) {
+      templates[idx].name = name;
+      templates[idx].content = content;
+      templates[idx].tags = tags;
+    }
+  } else {
+    templates.unshift({
+      id: 'tpl-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6),
+      name,
+      content,
+      tags,
+      createdAt: new Date().toISOString(),
+    });
+  }
+
+  saveTemplatesToStorage(templates);
+  cancelTemplateForm();
+  renderTemplateList();
+}
+
+export function deleteTemplate(id) {
+  const templates = loadTemplates().filter(t => t.id !== id);
+  saveTemplatesToStorage(templates);
+  renderTemplateList(document.getElementById('template-search')?.value);
+}
+
+export function exportTemplates() {
+  const templates = loadTemplates();
+  if (templates.length === 0) return;
+  const blob = new Blob([JSON.stringify(templates, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `aicli-templates-${new Date().toISOString().slice(0, 10)}.json`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export function importTemplates() {
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = '.json';
+  input.addEventListener('change', () => {
+    const file = input.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.addEventListener('load', () => {
+      try {
+        const imported = JSON.parse(reader.result);
+        if (!Array.isArray(imported)) throw new Error('Not an array');
+        const existing = loadTemplates();
+        const existingIds = new Set(existing.map(t => t.id));
+        let added = 0;
+        for (const t of imported) {
+          if (t.id && t.name && t.content && !existingIds.has(t.id)) {
+            existing.push(t);
+            added++;
+          }
+        }
+        saveTemplatesToStorage(existing);
+        renderTemplateList();
+        addInfoMessage(`Imported ${added} template(s).`);
+      } catch {
+        addErrorMessage('Failed to import templates: invalid JSON format.');
+      }
+    });
+    reader.readAsText(file);
+  });
+  input.click();
+}
+
+document.getElementById('btn-templates')?.addEventListener('click', openTemplatesModal);
+document.getElementById('template-search')?.addEventListener('input', (e) => {
+  renderTemplateList(e.target.value);
+});