Add RLUtils class for managing RL/AI dashboard endpoints

- Implemented methods for fetching AI stats, training history, and recent experiences. - Added functionality to set operation mode (MANUAL, AUTO, AI) with appropriate handling. - Included helper methods for querying the database and sending JSON responses. - Integrated model metadata extraction for visualization purposes.
2026-03-13 16:12:00 +00:00 · 2026-02-18 22:36:10 +01:00
parent b8a13cc698
commit eb20b168a6
684 changed files with 53278 additions and 27977 deletions
--- a/web/js/pages/attacks.js
+++ b/web/js/pages/attacks.js
@@ -0,0 +1,953 @@
+import { ResourceTracker } from '../core/resource-tracker.js';
+import { el, toast } from '../core/dom.js';
+import { t as i18nT } from '../core/i18n.js';
+import { initSharedSidebarLayout } from '../core/sidebar-layout.js';
+
+const PAGE = 'attacks';
+let tracker = null;
+let root = null;
+let currentAttack = null;
+let selectedSection = null;
+let selectedImageScope = null;
+let selectedActionName = null;
+let selectedImages = new Set();
+let editMode = false;
+let imageCache = [];
+let imageResolver = null;
+let sortKey = 'name';
+let sortDir = 1;
+const iconCache = new Map();
+let disposeSidebarLayout = null;
+
+function q(sel, base = root) { return base?.querySelector(sel) || null; }
+function qa(sel, base = root) { return Array.from(base?.querySelectorAll(sel) || []); }
+function note(msg, ms = 2200, type = 'info') { toast(String(msg ?? ''), ms, type); }
+function L(key, vars) { return i18nT(key, vars); }
+function Lx(key, fallback, vars) {
+  const out = i18nT(key, vars);
+  return out && out !== key ? out : fallback;
+}
+
+function markup() {
+  return `
+  <div class="attacks-sidebar">
+    <div class="sidehead">
+      <div class="sidetitle">${L('attacks.sidebar.management')}</div>
+      <div class="spacer"></div>
+      <button class="btn" id="hideSidebar" data-hide-sidebar="1" type="button">${Lx('common.hide', 'Hide')}</button>
+    </div>
+    <div class="tabs-container">
+      <button class="tab-btn active" data-page="attacks">${L('attacks.tabs.attacks')}</button>
+      <button class="tab-btn" data-page="comments">${L('attacks.tabs.comments')}</button>
+      <button class="tab-btn" data-page="images">${L('attacks.tabs.images')}</button>
+    </div>
+
+    <div id="attacks-sidebar" class="sidebar-page" style="display:block">
+      <ul class="unified-list" id="attacks-list"></ul>
+      <div class="hero-btn">
+        <button class="btn" id="add-attack-btn">${L('attacks.btn.addAttack')}</button>
+        <button class="btn danger" id="remove-attack-btn">${L('attacks.btn.removeAttack')}</button>
+        <button class="btn danger" id="delete-action-btn">${L('attacks.btn.deleteAction')}</button>
+        <button class="btn" id="sync-missing-btn">${Lx('attacks.btn.syncMissing', 'Sync Missing')}</button>
+        <button class="btn danger" id="restore-default-actions-btn">${L('attacks.btn.restoreDefaultsBundle')}</button>
+      </div>
+      <div id="empty-attacks-hint" style="display:none;opacity:.8;margin-top:8px">${L('attacks.empty.noAttacks')}</div>
+    </div>
+
+    <div id="comments-sidebar" class="sidebar-page" style="display:none">
+      <ul class="unified-list" id="section-list"></ul>
+      <div class="hero-btn">
+        <button class="btn" id="add-section-btn">${L('attacks.btn.addSection')}</button>
+        <button class="btn danger" id="delete-section-btn" disabled>${L('attacks.btn.deleteSection')}</button>
+        <button class="btn danger" id="restore-default-btn">${L('attacks.btn.restoreDefault')}</button>
+      </div>
+      <div id="empty-comments-hint" style="display:none;opacity:.8;margin-top:8px">${L('attacks.empty.noComments')}</div>
+    </div>
+
+    <div id="images-sidebar" class="sidebar-page" style="display:none">
+      <h3 style="margin:8px 0">${L('attacks.section.characters')}</h3>
+      <ul class="unified-list" id="character-list"></ul>
+      <div class="chips" style="margin:8px 0 16px 0">
+        <button class="btn" id="create-character-btn">${L('attacks.btn.createCharacter')}</button>
+        <button class="btn danger" id="delete-character-btn">${L('attacks.btn.deleteCharacter')}</button>
+      </div>
+      <h3 style="margin:8px 0">${L('attacks.section.statusImages')}</h3>
+      <ul class="unified-list" id="action-list"></ul>
+      <h3 style="margin:8px 0">${L('attacks.section.staticImages')}</h3>
+      <ul class="unified-list" id="library-list"></ul>
+      <h3 style="margin:8px 0">${L('attacks.section.webImages')}</h3>
+      <ul class="unified-list" id="web-images-list"></ul>
+      <h3 style="margin:8px 0">${L('attacks.section.actionIcons')}</h3>
+      <ul class="unified-list" id="actions-icons-list"></ul>
+    </div>
+  </div>
+
+  <div class="attacks-main">
+    <div id="attacks-page" class="page-content active">
+      <div class="editor-textarea-container">
+        <div class="editor-header">
+          <h2 id="editor-title" style="margin:0">${L('attacks.editor.selectAttack')}</h2>
+          <div class="editor-buttons">
+            <button class="btn" id="save-attack-btn">${L('common.save')}</button>
+            <button class="btn" id="restore-attack-btn">${L('attacks.btn.restoreDefault')}</button>
+          </div>
+        </div>
+        <textarea id="editor-textarea" class="editor-textarea" disabled></textarea>
+      </div>
+    </div>
+
+    <div id="comments-page" class="page-content">
+      <div class="buttons-container">
+        <h2 id="section-title" style="margin:0 0 10px 0">${L('attacks.tabs.comments')}</h2>
+        <button class="btn" id="select-all-btn">${L('common.selectAll')}</button>
+        <button class="btn" id="save-comments-btn">${L('common.save')}</button>
+      </div>
+      <div class="comments-container">
+        <div class="comments-editor" id="comments-editor" contenteditable="true" data-placeholder="${L('attacks.comments.placeholder')}" role="textbox" aria-multiline="true"></div>
+      </div>
+    </div>
+
+    <div id="images-page" class="page-content">
+      <div class="actions-bar">
+        <span class="chip" id="edit-mode-toggle-btn">${L('attacks.images.enterEditMode')}</span>
+        <select id="sort-key" class="select">
+          <option value="name">${L('attacks.images.sortName')}</option>
+          <option value="dim">${L('attacks.images.sortDimensions')}</option>
+        </select>
+        <button id="sort-dir" class="sort-toggle">^</button>
+        <div class="range-wrap" title="${Lx('attacks.images.gridDensity', 'Grid density')}">
+          <span>${Lx('attacks.images.density', 'Density')}</span>
+          <input id="density" type="range" min="120" max="260" value="160" class="range">
+        </div>
+        <div class="field"><span class="icon">S</span><input id="search-input" class="input" placeholder="${L('attacks.images.search')}"></div>
+        <button id="rename-image-btn" class="edit-only">${L('attacks.images.rename')}</button>
+        <button id="replace-image-btn" class="edit-only">${L('attacks.images.replace')}</button>
+        <button id="resize-images-btn" class="edit-only">${L('attacks.images.resizeSelected')}</button>
+        <button id="add-characters-btn" class="status-only">${L('attacks.images.addCharacters')}</button>
+        <button id="delete-images-btn" class="edit-only danger">${L('attacks.images.deleteSelected')}</button>
+        <button id="add-status-image-btn">${L('attacks.images.addStatus')}</button>
+        <button id="add-static-image-btn">${L('attacks.images.addStatic')}</button>
+        <button id="add-web-image-btn">${L('attacks.images.addWeb')}</button>
+        <button id="add-icon-image-btn">${L('attacks.images.addIcon')}</button>
+      </div>
+      <div class="image-container" id="image-container"></div>
+    </div>
+  </div>`;
+}
+
+async function getJSON(url) {
+  const r = await fetch(url);
+  if (!r.ok) throw new Error(`HTTP ${r.status}`);
+  return r.json();
+}
+
+async function postJSON(url, body = {}) {
+  const r = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  return r.json();
+}
+
+async function iconFor(name) {
+  if (iconCache.has(name)) return iconCache.get(name);
+  for (const url of [`/actions_icons/${encodeURIComponent(name)}.png`, `/get_status_icon?action=${encodeURIComponent(name)}`]) {
+    try {
+      const r = await fetch(url);
+      if (!r.ok) continue;
+      const b = await r.blob();
+      const obj = URL.createObjectURL(b);
+      iconCache.set(name, obj);
+      return obj;
+    } catch { }
+  }
+  return '/web/images/attack.png';
+}
+
+function iconCandidateURLs(actionName) {
+  return [
+    `/actions_icons/${encodeURIComponent(actionName)}.png`,
+    `/actions_icons/${encodeURIComponent(actionName)}.bmp`,
+    `/get_status_icon?action=${encodeURIComponent(actionName)}`,
+  ];
+}
+
+function escapeRegExp(value) {
+  return String(value).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+async function makePlaceholderIconBlob(actionName) {
+  const size = 128;
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d');
+  ctx.fillStyle = '#0b0e13';
+  ctx.fillRect(0, 0, size, size);
+  ctx.lineWidth = 8;
+  ctx.strokeStyle = '#59b6ff';
+  ctx.beginPath();
+  ctx.arc(size / 2, size / 2, size / 2 - 8, 0, Math.PI * 2);
+  ctx.stroke();
+  const initials = (actionName || 'A')
+    .split(/[^A-Za-z0-9]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((x) => x[0])
+    .join('')
+    .toUpperCase() || 'A';
+  ctx.fillStyle = '#59b6ff';
+  ctx.font = 'bold 56px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(initials, size / 2, size / 2 + 4);
+  return new Promise((resolve) => canvas.toBlob((b) => resolve(b || new Blob([], { type: 'image/png' })), 'image/png'));
+}
+
+async function fetchActionIconBlob(actionName) {
+  for (const url of iconCandidateURLs(actionName)) {
+    try {
+      const r = await fetch(url, { cache: 'no-cache' });
+      if (r.ok) return await r.blob();
+    } catch { }
+  }
+  try {
+    const r = await fetch('/web/images/attack.png', { cache: 'no-cache' });
+    if (r.ok) return await r.blob();
+  } catch { }
+  return makePlaceholderIconBlob(actionName);
+}
+
+async function hasStatusImage(actionName) {
+  const p = `/images/status/${encodeURIComponent(actionName)}/${encodeURIComponent(actionName)}.bmp`;
+  try {
+    const r = await fetch(p, { cache: 'no-cache' });
+    return r.ok;
+  } catch {
+    return false;
+  }
+}
+
+async function actionHasCharacterImages(actionName) {
+  try {
+    const data = await getJSON('/get_action_images?action=' + encodeURIComponent(actionName));
+    const imgs = data?.images || [];
+    if (!Array.isArray(imgs)) return false;
+    const rx = new RegExp(`^${escapeRegExp(actionName)}\\d+\\.(bmp|png|jpe?g|gif|webp)$`, 'i');
+    return imgs.some((im) => {
+      const n = typeof im === 'string' ? im : (im.name || im.filename || '');
+      return rx.test(String(n));
+    });
+  } catch {
+    return false;
+  }
+}
+
+async function ensureStatusImageFromIcon(actionName) {
+  if (await hasStatusImage(actionName)) return false;
+  const blob = await fetchActionIconBlob(actionName);
+  const fd = new FormData();
+  fd.append('type', 'action');
+  fd.append('action_name', actionName);
+  fd.append('status_image', new File([blob], `${actionName}.bmp`, { type: 'image/bmp' }));
+  const r = await fetch('/upload_status_image', { method: 'POST', body: fd });
+  const d = await r.json();
+  if (d.status !== 'success') throw new Error(d.message || 'upload_status_image failed');
+  return true;
+}
+
+async function ensureAtLeastOneCharacterImageFromIcon(actionName) {
+  if (await actionHasCharacterImages(actionName)) return false;
+  const blob = await fetchActionIconBlob(actionName);
+  const fd = new FormData();
+  fd.append('action_name', actionName);
+  fd.append('character_images', new File([blob], `${actionName}1.png`, { type: blob.type || 'image/png' }));
+  const r = await fetch('/upload_character_images', { method: 'POST', body: fd });
+  const d = await r.json();
+  if (d.status !== 'success') throw new Error(d.message || 'upload_character_images failed');
+  return true;
+}
+
+async function ensureCommentsSection(sectionName, sectionsSet) {
+  if (sectionsSet.has(sectionName)) return false;
+  await postJSON('/save_comments', {
+    section: sectionName,
+    comments: [Lx('attacks.sync.defaultComment', 'Add comment for this action')],
+  });
+  sectionsSet.add(sectionName);
+  return true;
+}
+
+async function syncMissing() {
+  try {
+    const attacksResp = await getJSON('/get_attacks');
+    const attacks = Array.isArray(attacksResp) ? attacksResp : (Array.isArray(attacksResp?.attacks) ? attacksResp.attacks : []);
+    const names = attacks.map((a) => a?.name || a?.id).filter(Boolean);
+    if (!names.length) {
+      note(Lx('attacks.sync.none', 'No attacks to sync.'), 2200, 'warning');
+      return;
+    }
+
+    const sectionsResp = await getJSON('/get_sections');
+    const sectionsSet = new Set((sectionsResp?.sections || []).map((x) => String(x)));
+    let createdComments = 0;
+    let createdStatus = 0;
+    let createdChars = 0;
+
+    for (const name of names) {
+      if (await ensureCommentsSection(name, sectionsSet)) createdComments++;
+      if (await ensureStatusImageFromIcon(name)) createdStatus++;
+      if (await ensureAtLeastOneCharacterImageFromIcon(name)) createdChars++;
+    }
+
+    note(
+      Lx(
+        'attacks.sync.done',
+        `Sync done. New comments: ${createdComments}, status images: ${createdStatus}, character images: ${createdChars}.`,
+        { comments: createdComments, status: createdStatus, characters: createdChars },
+      ),
+      4200,
+      'success',
+    );
+    await Promise.all([loadAttacks(), loadSections(), loadImageScopes(), loadCharacters()]);
+    if (selectedImageScope) await refreshScope();
+  } catch (e) {
+    note(`${Lx('attacks.sync.failed', 'Sync Missing failed')}: ${e.message}`, 3200, 'error');
+  }
+}
+
+async function loadAttacks() {
+  const list = q('#attacks-list');
+  const hint = q('#empty-attacks-hint');
+  if (!list || !hint) return;
+  list.innerHTML = '';
+
+  try {
+    const data = await getJSON('/get_attacks');
+    const attacks = (Array.isArray(data) ? data : (data.attacks || []))
+      .map((a) => ({ name: a.name || a.id || L('common.unknown'), enabled: Number(a.enabled ?? a.b_enabled ?? 0) }))
+      .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' }));
+
+    hint.style.display = attacks.length ? 'none' : 'block';
+    for (const a of attacks) {
+      const li = document.createElement('li');
+      li.className = 'card';
+      li.dataset.attackName = a.name;
+
+      const img = document.createElement('img');
+      iconFor(a.name).then((u) => { img.src = u; });
+
+      const span = document.createElement('span');
+      span.textContent = a.name;
+
+      const dot = document.createElement('button');
+      dot.className = 'enable-dot' + (a.enabled ? ' on' : '');
+      dot.type = 'button';
+      tracker.trackEventListener(dot, 'click', async (e) => {
+        e.stopPropagation();
+        const target = !dot.classList.contains('on');
+        dot.classList.toggle('on', target);
+        const d = await postJSON('/actions/set_enabled', { action_name: a.name, enabled: target ? 1 : 0 });
+        if (d.status !== 'success') dot.classList.toggle('on', !target);
+      });
+
+      tracker.trackEventListener(li, 'click', () => selectAttack(a.name, li));
+      li.append(img, span, dot);
+      list.appendChild(li);
+    }
+  } catch {
+    hint.style.display = 'block';
+    hint.textContent = L('attacks.errors.loadAttacks');
+  }
+}
+
+async function selectAttack(name, node) {
+  qa('#attacks-list .card').forEach((n) => n.classList.remove('selected'));
+  node?.classList.add('selected');
+  currentAttack = name;
+  q('#editor-title').textContent = name;
+  const ta = q('#editor-textarea');
+  ta.disabled = false;
+  const d = await getJSON('/get_attack_content?name=' + encodeURIComponent(name));
+  ta.value = d?.status === 'success' ? (d.content ?? '') : '';
+}
+
+function imageSort(list) {
+  const cmpName = (a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base', numeric: true }) * sortDir;
+  const area = (x) => (x.width || 0) * (x.height || 0);
+  return [...list].sort(sortKey === 'name' ? cmpName : ((a, b) => ((area(a) - area(b)) * sortDir || cmpName(a, b))));
+}
+
+function syncImageModeClasses() {
+  if (!root) return;
+  root.classList.toggle('edit-mode', !!editMode);
+  root.classList.remove('status-mode', 'static-mode', 'web-mode', 'icons-mode');
+  if (selectedImageScope === 'action') root.classList.add('status-mode');
+  if (selectedImageScope === 'static') root.classList.add('static-mode');
+  if (selectedImageScope === 'web') root.classList.add('web-mode');
+  if (selectedImageScope === 'icons') root.classList.add('icons-mode');
+}
+
+function renderImages(items, resolver) {
+  imageCache = items.map((im) => ({ name: typeof im === 'string' ? im : (im.name || im.filename || ''), width: im.width, height: im.height }));
+  imageResolver = resolver;
+  const grid = q('#image-container');
+  const search = (q('#search-input')?.value || '').toLowerCase().trim();
+  grid.innerHTML = '';
+
+  imageSort(imageCache).filter((x) => !search || x.name.toLowerCase().includes(search)).forEach((im) => {
+    const tile = document.createElement('div');
+    tile.className = 'image-item';
+    tile.classList.toggle('selectable', !!editMode);
+    tile.dataset.imageName = im.name;
+
+    const img = document.createElement('img');
+    img.src = resolver(im.name);
+
+    const info = document.createElement('div');
+    info.className = 'image-info';
+    info.textContent = im.width && im.height ? `${im.name} (${im.width}x${im.height})` : im.name;
+
+    const ring = document.createElement('div');
+    ring.className = 'select-ring';
+
+    const tick = document.createElement('div');
+    tick.className = 'tick-overlay';
+    tick.textContent = 'OK';
+
+    tracker.trackEventListener(tile, 'click', () => {
+      if (!editMode) return;
+      tile.classList.toggle('selected');
+      if (tile.classList.contains('selected')) selectedImages.add(im.name);
+      else selectedImages.delete(im.name);
+    });
+
+    tile.append(img, info, ring, tick);
+    grid.appendChild(tile);
+  });
+}
+
+async function loadSections() {
+  const ul = q('#section-list');
+  const hint = q('#empty-comments-hint');
+  ul.innerHTML = '';
+
+  try {
+    const d = await getJSON('/get_sections');
+    const sections = (d.sections || []).slice().sort((a, b) => String(a).localeCompare(String(b), undefined, { sensitivity: 'base', numeric: true }));
+    hint.style.display = sections.length ? 'none' : 'block';
+
+    for (const name of sections) {
+      const li = document.createElement('li');
+      li.className = 'card';
+      li.dataset.section = name;
+
+      const img = document.createElement('img');
+      iconFor(name).then((u) => { img.src = u; });
+
+      const span = document.createElement('span');
+      span.textContent = name;
+
+      tracker.trackEventListener(li, 'click', async () => {
+        qa('#section-list .card').forEach((n) => n.classList.remove('selected'));
+        li.classList.add('selected');
+        selectedSection = name;
+        q('#delete-section-btn').disabled = false;
+        q('#section-title').textContent = `${L('attacks.tabs.comments')} - ${name}`;
+
+        const c = await getJSON('/get_comments?section=' + encodeURIComponent(name));
+        const ce = q('#comments-editor');
+        ce.classList.remove('placeholder');
+        ce.innerHTML = '';
+        (c.comments || []).forEach((line) => {
+          const div = document.createElement('div');
+          div.className = 'comment-line';
+          div.textContent = line || '\u200b';
+          ce.appendChild(div);
+        });
+      });
+
+      li.append(img, span);
+      ul.appendChild(li);
+    }
+  } catch {
+    hint.style.display = 'block';
+  }
+}
+
+function addScopeCard(parent, type, name, imgSrc, onClick) {
+  const li = document.createElement('li');
+  li.className = 'card';
+  li.dataset.type = type;
+  li.dataset.name = name;
+  const img = document.createElement('img'); img.src = imgSrc;
+  const span = document.createElement('span'); span.textContent = name;
+  tracker.trackEventListener(li, 'click', async () => { selectScope(type, name); await onClick(); });
+  li.append(img, span);
+  parent.appendChild(li);
+}
+
+async function loadImageScopes() {
+  const actionList = q('#action-list'); actionList.innerHTML = '';
+  const staticList = q('#library-list'); staticList.innerHTML = '';
+  const webList = q('#web-images-list'); webList.innerHTML = '';
+  const iconList = q('#actions-icons-list'); iconList.innerHTML = '';
+
+  try {
+    const actions = await getJSON('/get_actions');
+    (actions.actions || []).forEach((a) => {
+      const li = document.createElement('li'); li.className = 'card'; li.dataset.type = 'action'; li.dataset.name = a.name;
+      const img = document.createElement('img'); iconFor(a.name).then((u) => { img.src = u; });
+      const span = document.createElement('span'); span.textContent = a.name;
+      tracker.trackEventListener(li, 'click', async () => {
+        selectScope('action', a.name);
+        const d = await getJSON('/get_action_images?action=' + encodeURIComponent(a.name));
+        if (d.status === 'success') renderImages(d.images || [], (n) => `/images/status/${encodeURIComponent(a.name)}/${encodeURIComponent(n)}`);
+      });
+      li.append(img, span);
+      actionList.appendChild(li);
+    });
+
+    addScopeCard(staticList, 'static', L('attacks.section.staticImages'), '/web/images/static_icon.png', async () => {
+      const d = await getJSON('/list_static_images_with_dimensions');
+      if (d.status === 'success') renderImages(d.images || [], (n) => '/static_images/' + encodeURIComponent(n));
+    });
+
+    addScopeCard(webList, 'web', L('attacks.section.webImages'), '/web/images/icon-192x192.png', async () => {
+      const d = await getJSON('/list_web_images');
+      if (d.status === 'success') renderImages(d.images || [], (n) => '/web/images/' + encodeURIComponent(n));
+    });
+
+    addScopeCard(iconList, 'icons', L('attacks.section.actionIcons'), '/web/images/attack.png', async () => {
+      const d = await getJSON('/list_actions_icons');
+      if (d.status === 'success') renderImages(d.images || [], (n) => '/actions_icons/' + encodeURIComponent(n));
+    });
+  } catch {
+    note(L('attacks.errors.loadImages'), 2600, 'error');
+  }
+}
+
+function selectScope(type, name) {
+  qa('#action-list .card, #library-list .card, #web-images-list .card, #actions-icons-list .card').forEach((n) => n.classList.remove('selected'));
+  qa(`[data-type="${type}"][data-name="${name}"]`).forEach((n) => n.classList.add('selected'));
+  selectedImageScope = type;
+  selectedActionName = type === 'action' ? name : null;
+  selectedImages.clear();
+  syncImageModeClasses();
+}
+
+async function refreshScope() {
+  if (selectedImageScope === 'action' && selectedActionName) {
+    const d = await getJSON('/get_action_images?action=' + encodeURIComponent(selectedActionName));
+    if (d.status === 'success') renderImages(d.images || [], (n) => `/images/status/${encodeURIComponent(selectedActionName)}/${encodeURIComponent(n)}`);
+  } else if (selectedImageScope === 'static') {
+    const d = await getJSON('/list_static_images_with_dimensions');
+    if (d.status === 'success') renderImages(d.images || [], (n) => '/static_images/' + encodeURIComponent(n));
+  } else if (selectedImageScope === 'web') {
+    const d = await getJSON('/list_web_images');
+    if (d.status === 'success') renderImages(d.images || [], (n) => '/web/images/' + encodeURIComponent(n));
+  } else if (selectedImageScope === 'icons') {
+    const d = await getJSON('/list_actions_icons');
+    if (d.status === 'success') renderImages(d.images || [], (n) => '/actions_icons/' + encodeURIComponent(n));
+  }
+}
+
+async function loadCharacters() {
+  const ul = q('#character-list');
+  if (!ul) return;
+  ul.innerHTML = '';
+  const d = await getJSON('/list_characters');
+  const current = d.current_character;
+  (d.characters || []).forEach((c) => {
+    const li = document.createElement('li'); li.className = 'card'; li.dataset.name = c.name;
+    const img = document.createElement('img'); img.src = '/get_character_icon?character=' + encodeURIComponent(c.name) + '&t=' + Date.now();
+    img.onerror = () => { img.src = '/web/images/default_character_icon.png'; };
+    const span = document.createElement('span'); span.textContent = c.name;
+    if (c.name === current) { const ck = document.createElement('span'); ck.textContent = L('common.yes'); li.appendChild(ck); }
+    tracker.trackEventListener(li, 'click', async () => {
+      if (!confirm(L('attacks.confirm.switchCharacter', { name: c.name }))) return;
+      const r = await postJSON('/switch_character', { character_name: c.name });
+      if (r.status === 'success') { note(L('attacks.toast.characterSwitched'), 1800, 'success'); loadCharacters(); }
+    });
+    li.append(img, span);
+    ul.appendChild(li);
+  });
+}
+
+function setPage(page) {
+  qa('.tab-btn').forEach((b) => b.classList.toggle('active', b.dataset.page === page));
+  qa('.sidebar-page').forEach((s) => { s.style.display = 'none'; });
+  qa('.page-content').forEach((p) => p.classList.remove('active'));
+  const sidebar = q(`#${page}-sidebar`);
+  if (sidebar) sidebar.style.display = 'block';
+  q(`#${page}-page`)?.classList.add('active');
+}
+
+function bindTabs() {
+  qa('.tab-btn').forEach((btn) => tracker.trackEventListener(btn, 'click', async () => {
+    const page = btn.dataset.page;
+    setPage(page);
+    if (page === 'attacks') await loadAttacks();
+    if (page === 'comments') await loadSections();
+    if (page === 'images') await Promise.all([loadImageScopes(), loadCharacters()]);
+  }));
+}
+
+function bindActions() {
+  tracker.trackEventListener(q('#add-attack-btn'), 'click', async () => {
+    const inp = document.createElement('input'); inp.type = 'file'; inp.accept = '.py';
+    inp.onchange = async () => {
+      const f = inp.files?.[0]; if (!f) return;
+      const fd = new FormData(); fd.append('attack_file', f);
+      const r = await fetch('/add_attack', { method: 'POST', body: fd });
+      const d = await r.json();
+      if (d.status === 'success') {
+        note(L('attacks.toast.attackImported'), 1800, 'success');
+        await loadAttacks();
+        await syncMissing();
+      }
+    };
+    inp.click();
+  });
+
+  tracker.trackEventListener(q('#remove-attack-btn'), 'click', async () => {
+    if (!currentAttack) return;
+    if (!confirm(L('attacks.confirm.removeAttack', { name: currentAttack }))) return;
+    const d = await postJSON('/remove_attack', { name: currentAttack });
+    if (d.status === 'success') {
+      currentAttack = null;
+      q('#editor-textarea').value = '';
+      q('#editor-textarea').disabled = true;
+      q('#editor-title').textContent = L('attacks.editor.selectAttack');
+      loadAttacks();
+    }
+  });
+
+  tracker.trackEventListener(q('#delete-action-btn'), 'click', async () => {
+    const actionName = currentAttack || selectedActionName;
+    if (!actionName) return note(L('attacks.toast.selectAttackFirst'), 1800, 'warning');
+    if (!confirm(L('attacks.confirm.deleteAction', { name: actionName }))) return;
+    const d = await postJSON('/action/delete', { action_name: actionName });
+    if (d.status === 'success') {
+      if (currentAttack === actionName) {
+        currentAttack = null;
+        q('#editor-textarea').value = '';
+        q('#editor-textarea').disabled = true;
+        q('#editor-title').textContent = L('attacks.editor.selectAttack');
+      }
+      note(L('attacks.toast.actionDeleted'), 1800, 'success');
+      await Promise.all([loadAttacks(), loadImageScopes()]);
+    } else {
+      note(d.message || L('common.error'), 2200, 'error');
+    }
+  });
+
+  tracker.trackEventListener(q('#restore-default-actions-btn'), 'click', async () => {
+    if (!confirm(L('attacks.confirm.restoreDefaultsBundle'))) return;
+    const d = await postJSON('/actions/restore_defaults', {});
+    if (d.status === 'success') {
+      note(L('attacks.toast.defaultsRestored'), 2000, 'success');
+      currentAttack = null;
+      selectedImageScope = null;
+      selectedActionName = null;
+      selectedImages.clear();
+      syncImageModeClasses();
+      await Promise.all([loadAttacks(), loadSections(), loadImageScopes(), loadCharacters()]);
+    } else {
+      note(d.message || L('common.error'), 2200, 'error');
+    }
+  });
+
+  tracker.trackEventListener(q('#sync-missing-btn'), 'click', async () => {
+    await syncMissing();
+  });
+
+  tracker.trackEventListener(q('#save-attack-btn'), 'click', async () => {
+    if (!currentAttack) return;
+    const d = await postJSON('/save_attack', { name: currentAttack, content: q('#editor-textarea').value });
+    if (d.status === 'success') note(L('common.saved'), 1500, 'success');
+  });
+
+  tracker.trackEventListener(q('#restore-attack-btn'), 'click', async () => {
+    if (!currentAttack) return;
+    if (!confirm(L('attacks.confirm.restoreAttack', { name: currentAttack }))) return;
+    const d = await postJSON('/restore_attack', { name: currentAttack });
+    if (d.status === 'success') selectAttack(currentAttack, q(`#attacks-list .card[data-attack-name="${currentAttack}"]`));
+  });
+
+  tracker.trackEventListener(q('#create-character-btn'), 'click', async () => {
+    const name = prompt(L('attacks.prompt.newCharacterName'));
+    if (!name) return;
+    const d = await postJSON('/create_character', { character_name: name });
+    if (d.status === 'success') { note(L('attacks.toast.characterCreated'), 1800, 'success'); loadCharacters(); }
+  });
+
+  tracker.trackEventListener(q('#delete-character-btn'), 'click', async () => {
+    const d = await getJSON('/list_characters');
+    const deletable = (d.characters || []).filter((x) => x.name !== 'BJORN').map((x) => x.name);
+    if (!deletable.length) return note(L('attacks.toast.noDeletableCharacters'), 1800, 'warning');
+    const name = prompt(L('attacks.prompt.characterToDelete') + '\n' + deletable.join('\n'));
+    if (!name || !deletable.includes(name)) return;
+    if (!confirm(L('attacks.confirm.deleteCharacter', { name }))) return;
+    const r = await postJSON('/delete_character', { character_name: name });
+    if (r.status === 'success') { note(L('attacks.toast.characterDeleted'), 1800, 'success'); loadCharacters(); }
+  });
+
+  tracker.trackEventListener(q('#add-section-btn'), 'click', async () => {
+    const name = prompt(L('attacks.prompt.newSectionName'));
+    if (!name) return;
+    const d = await postJSON('/save_comments', { section: name, comments: [] });
+    if (d.status === 'success') loadSections();
+  });
+
+  tracker.trackEventListener(q('#delete-section-btn'), 'click', async () => {
+    if (!selectedSection) return;
+    if (!confirm(L('attacks.confirm.deleteSection', { name: selectedSection }))) return;
+    const d = await postJSON('/delete_comment_section', { section: selectedSection });
+    if (d.status === 'success') {
+      selectedSection = null;
+      q('#comments-editor').innerHTML = '';
+      q('#section-title').textContent = L('attacks.tabs.comments');
+      loadSections();
+    }
+  });
+
+  tracker.trackEventListener(q('#restore-default-btn'), 'click', async () => {
+    if (!confirm(L('attacks.confirm.restoreDefaultComments'))) return;
+    const r = await fetch('/restore_default_comments', { method: 'POST' });
+    const d = await r.json();
+    if (d.status === 'success') { note(L('attacks.toast.commentsRestored'), 1800, 'success'); loadSections(); }
+  });
+
+  tracker.trackEventListener(q('#save-comments-btn'), 'click', async () => {
+    if (!selectedSection) return note(L('attacks.toast.selectSectionFirst'), 1800, 'warning');
+    const lines = qa('.comment-line', q('#comments-editor')).map((x) => x.textContent?.trim()).filter(Boolean);
+    const d = await postJSON('/save_comments', { section: selectedSection, comments: lines });
+    if (d.status === 'success') note(L('attacks.toast.commentsSaved'), 1600, 'success');
+  });
+
+  tracker.trackEventListener(q('#select-all-btn'), 'click', () => {
+    const ce = q('#comments-editor');
+    if (!ce) return;
+    ce.focus();
+    const sel = window.getSelection();
+    if (!sel) return;
+    const range = document.createRange();
+    range.selectNodeContents(ce);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  });
+
+  tracker.trackEventListener(q('#search-input'), 'input', () => renderImages(imageCache, imageResolver || (() => '')));
+  tracker.trackEventListener(q('#sort-key'), 'change', (e) => { sortKey = e.target.value; renderImages(imageCache, imageResolver || (() => '')); });
+  tracker.trackEventListener(q('#sort-dir'), 'click', (e) => { sortDir *= -1; e.target.textContent = sortDir === 1 ? '^' : 'v'; renderImages(imageCache, imageResolver || (() => '')); });
+  tracker.trackEventListener(q('#density'), 'input', (e) => {
+    const px = Number(e.target.value) || 160;
+    root?.style.setProperty('--tile-min', `${px}px`);
+    try { localStorage.setItem('attacks.tileMin', String(px)); } catch { }
+  });
+
+  tracker.trackEventListener(q('#edit-mode-toggle-btn'), 'click', () => {
+    editMode = !editMode;
+    syncImageModeClasses();
+    q('#edit-mode-toggle-btn').textContent = editMode ? L('attacks.images.exitEditMode') : L('attacks.images.enterEditMode');
+    if (!editMode) {
+      selectedImages.clear();
+      qa('.image-item.selected').forEach((x) => x.classList.remove('selected'));
+    }
+    renderImages(imageCache, imageResolver || (() => ''));
+  });
+
+  tracker.trackEventListener(q('#rename-image-btn'), 'click', async () => {
+    if (selectedImages.size !== 1) return note(L('attacks.toast.selectExactlyOneImage'), 1800, 'warning');
+    const oldName = Array.from(selectedImages)[0];
+    const newName = prompt(L('attacks.prompt.newImageName'), oldName);
+    if (!newName || newName === oldName) return;
+    const type = selectedImageScope === 'action' ? 'image' : selectedImageScope;
+    const d = await postJSON('/rename_image', { type, action: selectedActionName, old_name: oldName, new_name: newName });
+    if (d.status === 'success') { selectedImages.clear(); refreshScope(); }
+  });
+
+  tracker.trackEventListener(q('#replace-image-btn'), 'click', async () => {
+    if (selectedImages.size !== 1) return note(L('attacks.toast.selectExactlyOneImage'), 1800, 'warning');
+    const oldName = Array.from(selectedImages)[0];
+    const inp = document.createElement('input'); inp.type = 'file'; inp.accept = '.bmp,.jpg,.jpeg,.png,.gif,.ico,.webp';
+    inp.onchange = async () => {
+      const f = inp.files?.[0]; if (!f) return;
+      const fd = new FormData();
+      fd.append('type', selectedImageScope);
+      fd.append('image_name', oldName);
+      if (selectedImageScope === 'action') fd.append('action', selectedActionName);
+      fd.append('new_image', f);
+      const r = await fetch('/replace_image', { method: 'POST', body: fd });
+      const d = await r.json();
+      if (d.status === 'success') { selectedImages.clear(); refreshScope(); }
+    };
+    inp.click();
+  });
+
+  tracker.trackEventListener(q('#resize-images-btn'), 'click', async () => {
+    if (!selectedImages.size) return note(L('attacks.toast.selectAtLeastOneImage'), 1800, 'warning');
+    const w = Number(prompt(L('attacks.prompt.resizeWidth'), '100'));
+    const h = Number(prompt(L('attacks.prompt.resizeHeight'), '100'));
+    if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) return;
+    const payload = {
+      type: selectedImageScope,
+      action: selectedActionName,
+      image_names: Array.from(selectedImages),
+      width: Math.round(w),
+      height: Math.round(h),
+    };
+    const d = await postJSON('/resize_images', payload);
+    if (d.status === 'success') {
+      note(L('attacks.toast.imagesResized'), 1800, 'success');
+      selectedImages.clear();
+      await refreshScope();
+    } else {
+      note(d.message || L('common.error'), 2200, 'error');
+    }
+  });
+
+  tracker.trackEventListener(q('#add-characters-btn'), 'click', async () => {
+    if (selectedImageScope !== 'action' || !selectedActionName) return note(L('attacks.toast.selectStatusActionFirst'), 1800, 'warning');
+    const inp = document.createElement('input');
+    inp.type = 'file';
+    inp.multiple = true;
+    inp.accept = '.bmp,.jpg,.jpeg,.png';
+    inp.onchange = async () => {
+      const files = Array.from(inp.files || []);
+      if (!files.length) return;
+      const fd = new FormData();
+      fd.append('action_name', selectedActionName);
+      files.forEach((f) => fd.append('character_images', f));
+      const r = await fetch('/upload_character_images', { method: 'POST', body: fd });
+      const d = await r.json();
+      if (d.status === 'success') {
+        note(L('attacks.toast.characterImagesUploaded'), 1800, 'success');
+        await refreshScope();
+      } else {
+        note(d.message || L('common.error'), 2200, 'error');
+      }
+    };
+    inp.click();
+  });
+
+  tracker.trackEventListener(q('#delete-images-btn'), 'click', async () => {
+    if (!selectedImages.size) return note(L('attacks.toast.selectAtLeastOneImage'), 1800, 'warning');
+    if (!confirm(L('attacks.confirm.deleteSelectedImages'))) return;
+    const d = await postJSON('/delete_images', { type: selectedImageScope, action: selectedActionName, image_names: Array.from(selectedImages) });
+    if (d.status === 'success') { selectedImages.clear(); refreshScope(); }
+  });
+
+  tracker.trackEventListener(q('#add-status-image-btn'), 'click', async () => {
+    if (selectedImageScope !== 'action' || !selectedActionName) return note(L('attacks.toast.selectStatusActionFirst'), 1800, 'warning');
+    const inp = document.createElement('input'); inp.type = 'file'; inp.accept = '.bmp,.jpg,.jpeg,.png';
+    inp.onchange = async () => {
+      const f = inp.files?.[0]; if (!f) return;
+      const fd = new FormData(); fd.append('type', 'action'); fd.append('action_name', selectedActionName); fd.append('status_image', f);
+      const r = await fetch('/upload_status_image', { method: 'POST', body: fd });
+      const d = await r.json();
+      if (d.status === 'success') refreshScope();
+    };
+    inp.click();
+  });
+
+  tracker.trackEventListener(q('#add-static-image-btn'), 'click', async () => {
+    const inp = document.createElement('input'); inp.type = 'file'; inp.accept = '.bmp,.jpg,.jpeg,.png,.gif,.ico,.webp';
+    inp.onchange = async () => {
+      const f = inp.files?.[0]; if (!f) return;
+      const fd = new FormData(); fd.append('static_image', f);
+      const r = await fetch('/upload_static_image', { method: 'POST', body: fd });
+      const d = await r.json();
+      if (d.status === 'success') refreshScope();
+    };
+    inp.click();
+  });
+
+  tracker.trackEventListener(q('#add-web-image-btn'), 'click', async () => {
+    const inp = document.createElement('input'); inp.type = 'file'; inp.accept = '.bmp,.jpg,.jpeg,.png,.gif,.ico,.webp';
+    inp.onchange = async () => {
+      const f = inp.files?.[0]; if (!f) return;
+      const fd = new FormData(); fd.append('web_image', f);
+      const r = await fetch('/upload_web_image', { method: 'POST', body: fd });
+      const d = await r.json();
+      if (d.status === 'success') refreshScope();
+    };
+    inp.click();
+  });
+
+  tracker.trackEventListener(q('#add-icon-image-btn'), 'click', async () => {
+    const inp = document.createElement('input'); inp.type = 'file'; inp.accept = '.bmp,.jpg,.jpeg,.png,.gif,.ico,.webp';
+    inp.onchange = async () => {
+      const f = inp.files?.[0]; if (!f) return;
+      const fd = new FormData(); fd.append('icon_image', f);
+      const r = await fetch('/upload_actions_icon', { method: 'POST', body: fd });
+      const d = await r.json();
+      if (d.status === 'success') refreshScope();
+    };
+    inp.click();
+  });
+}
+
+export async function mount(container) {
+  tracker = new ResourceTracker(PAGE);
+  root = el('div', { class: 'attacks-container page-with-sidebar' });
+  root.innerHTML = markup();
+  container.appendChild(root);
+  q('.attacks-sidebar')?.classList.add('page-sidebar');
+  q('.attacks-main')?.classList.add('page-main');
+  disposeSidebarLayout = initSharedSidebarLayout(root, {
+    sidebarSelector: '.attacks-sidebar',
+    mainSelector: '.attacks-main',
+    storageKey: 'sidebar:attacks',
+    mobileBreakpoint: 900,
+    toggleLabel: Lx('common.menu', 'Menu'),
+    mobileDefaultOpen: true,
+  });
+  bindTabs();
+  bindActions();
+  syncImageModeClasses();
+
+  const density = q('#density');
+  if (density) {
+    let tile = Number(density.value) || 160;
+    try {
+      const saved = Number(localStorage.getItem('attacks.tileMin'));
+      if (Number.isFinite(saved) && saved >= 120 && saved <= 260) tile = saved;
+    } catch { }
+    density.value = String(tile);
+    root.style.setProperty('--tile-min', `${tile}px`);
+  }
+
+  const ce = q('#comments-editor');
+  if (ce && !ce.textContent.trim()) {
+    ce.classList.add('placeholder');
+    ce.textContent = ce.dataset.placeholder || L('attacks.comments.placeholder');
+    tracker.trackEventListener(ce, 'focus', () => {
+      if (ce.classList.contains('placeholder')) {
+        ce.classList.remove('placeholder');
+        ce.innerHTML = '<div class="comment-line"><br></div>';
+      }
+    });
+  }
+
+  await loadAttacks();
+}
+
+export function unmount() {
+  for (const v of iconCache.values()) {
+    if (typeof v === 'string' && v.startsWith('blob:')) URL.revokeObjectURL(v);
+  }
+  iconCache.clear();
+  selectedImages.clear();
+  if (disposeSidebarLayout) {
+    disposeSidebarLayout();
+    disposeSidebarLayout = null;
+  }
+  if (tracker) {
+    tracker.cleanupAll();
+    tracker = null;
+  }
+  root = null;
+}