aimeat 1.2.0

package/dist/public/views/admin/portal-tab.js

@@ -0,0 +1,211 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { dt, Badge, ExpandableHelp, useToast, Toast } from './shared.js';
+import {
+  saveSiteTemplate, deleteSiteTemplate, clearSiteCache,
+  getSiteMemoryKeys, getSitePrompt, addMemory, deleteMemory, triggerLbSync,
+} from '/js/services/admin.js';
+import { useConfirm } from '/components/Modal.js';
+
+export default function PortalTab({ data, reload }) {
+  const [toast, showErr, showOk, clearToast] = useToast();
+  const p = data.portal || {};
+  const meta = p.meta || {};
+  const tmpl = p.template || {};
+  const changes = (p.changelog?.entries) || [];
+  const isLb = meta.lb_mode?.enabled;
+
+  const { confirm, ConfirmUI } = useConfirm();
+  const [template, setTemplate] = useState(tmpl.template || '');
+  const [memKeys, setMemKeys] = useState(null);
+  const [newKey, setNewKey] = useState('');
+  const [newVal, setNewVal] = useState('');
+
+  useEffect(() => { loadMemKeys(); }, []);
+
+  async function loadMemKeys() {
+    try {
+      const res = await getSiteMemoryKeys();
+      setMemKeys(res.data?.keys || []);
+    } catch { setMemKeys([]); }
+  }
+
+  async function saveTemplate() {
+    try { await saveSiteTemplate(template); reload(); }
+    catch (e) { showErr(e.message); }
+  }
+
+  function downloadTemplate() {
+    if (!template) return;
+    const blob = new Blob([template], { type: 'text/html' });
+    const a = document.createElement('a'); a.href = URL.createObjectURL(blob);
+    a.download = 'portal-template.html'; a.click();
+  }
+
+  function resetTemplate() {
+    confirm(t('dashboard.portalResetDefault') + '?', async () => {
+      try { await deleteSiteTemplate(); reload(); }
+      catch (e) { showErr(e.message); }
+    }, { danger: true });
+  }
+
+  async function doClearCache() {
+    try { await clearSiteCache(); } catch (e) { showErr(e.message); }
+  }
+
+  async function addMem() {
+    if (!newKey.trim()) return;
+    try { await addMemory(newKey, newVal); setNewKey(''); setNewVal(''); loadMemKeys(); }
+    catch (e) { showErr(e.message); }
+  }
+
+  function delMem(key) {
+    confirm(t('dashboard.portalDeleteKeyConfirm').replace('{key}', key), async () => {
+      try { await deleteMemory(key); loadMemKeys(); }
+      catch (e) { showErr(e.message); }
+    }, { danger: true });
+  }
+
+  async function copyPrompt() {
+    try {
+      const res = await getSitePrompt();
+      const prompt = res.data?.prompt || 'No prompt available';
+      await navigator.clipboard.writeText(prompt);
+      showOk(t('dashboard.portalAiCopied'));
+    } catch (e) { showErr(e.message); }
+  }
+
+  async function doLbSync() {
+    try {
+      const res = await triggerLbSync();
+      const d = res.data || {};
+      showOk(t('dashboard.portalLbSyncDone') + ' (template: ' + (d.template_updated ? 'yes' : 'no') + ', memory: ' + (d.memory_keys_synced || 0) + ')');
+      reload();
+    } catch (e) { showErr(e.message); }
+  }
+
+  const kv = meta.kv || {};
+  const kvKeys = Object.keys(kv);
+
+  return html`
+    ${toast && html`<${Toast} ...${toast} onDismiss=${clearToast} />`}
+    <p class="adm-text-dim adm-mb-lg">${t('dashboard.portalDesc')}</p>
+
+    <!-- LB mode banner -->
+    ${isLb && html`
+      <div class="adm-card adm-mb-lg" style="border:1px solid #eab308">
+        <h3>\u{1F504} ${t('dashboard.portalLbMode')}</h3>
+        <p class="adm-text-dim adm-mb-sm">${t('dashboard.portalLbReadOnly')}</p>
+        <div class="adm-erow"><span class="adm-elabel">${t('dashboard.portalLbOrigin')}</span><span class="adm-eval">${escHtml(meta.lb_mode.origin_url || '-')}</span></div>
+        <div class="adm-erow"><span class="adm-elabel">${t('dashboard.portalLbLastSync')}</span><span class="adm-eval">${meta.lb_mode.last_sync ? dt(meta.lb_mode.last_sync) : '-'}</span></div>
+        ${meta.lb_mode.last_error && html`<div class="adm-erow"><span class="adm-elabel">${t('dashboard.portalLbError')}</span><span class="adm-text-error">${escHtml(meta.lb_mode.last_error)}</span></div>`}
+        <button class="adm-btn-action adm-mt-sm" onClick=${doLbSync}>\u{1F504} ${t('dashboard.portalLbSyncNow')}</button>
+      </div>
+    `}
+
+    <!-- Preview -->
+    <div class="adm-card">
+      <h3>${t('dashboard.portalPreview')}</h3>
+      <iframe src="/" style="width:100%;height:400px;border:1px solid var(--glass-border);border-radius:8px;background:#fff" sandbox="allow-same-origin allow-scripts"></iframe>
+      <div class="adm-flex adm-mt-sm">
+        <button class="adm-btn-action" onClick=${doClearCache}>\u{1F6AB} ${t('dashboard.portalClearCache')}</button>
+      </div>
+    </div>
+
+    <!-- Template editor -->
+    <div class="adm-card">
+      <h3>${t('dashboard.portalTemplate')}</h3>
+      <${ExpandableHelp} title=${t('dashboard.portalTagHelpTitle')}>
+        <p>${t('dashboard.portalTagHelpDetail')}</p>
+        <table>
+          <thead><tr><th>Tag</th><th>${t('dashboard.details')}</th></tr></thead>
+          <tbody>
+            <tr><td><code>\{\{config:node_id\}\}</code></td><td>${t('dashboard.tagExConfig')}</td></tr>
+            <tr><td><code>\{\{memory:portal/welcome\}\}</code></td><td>${t('dashboard.tagExMemory')}</td></tr>
+            <tr><td><code>\{\{storage:type\}\}</code></td><td>${t('dashboard.tagExStorage')}</td></tr>
+            <tr><td><code>\{\{kv:site_name\}\}</code></td><td>${t('dashboard.tagExKv')}</td></tr>
+            <tr><td><code>\{\{board:general\}\}</code></td><td>${t('dashboard.tagExBoard')}</td></tr>
+          </tbody>
+        </table>
+      </${ExpandableHelp}>
+      <textarea rows="20" value=${template} onInput=${e => setTemplate(e.target.value)}
+        style="width:100%;font-family:monospace;font-size:13px;padding:12px;border:1px solid var(--glass-border);border-radius:8px;background:var(--glass-bg);color:var(--text-bright);resize:vertical"></textarea>
+      <div class="adm-flex adm-mt-sm">
+        <button class="adm-btn-action" onClick=${saveTemplate}>\u{1F4BE} ${t('dashboard.portalSaveTemplate')}</button>
+        <button class="adm-btn-action" onClick=${downloadTemplate}>\u{1F4E5} ${t('dashboard.portalDownload')}</button>
+        <button class="adm-btn-action" onClick=${resetTemplate}>\u{1F504} ${t('dashboard.portalResetDefault')}</button>
+      </div>
+    </div>
+
+    <!-- Memory keys -->
+    <div class="adm-card">
+      <h3>${t('dashboard.portalMemoryKeys')}</h3>
+      <p class="adm-text-dim adm-text-base adm-mb-sm">${t('dashboard.portalMemoryKeysExplain')}</p>
+      ${memKeys === null
+        ? html`<div class="adm-text-dim">${t('dashboard.loading')}...</div>`
+        : memKeys.length === 0
+          ? html`<div class="adm-text-dim">${t('dashboard.portalNoMemoryKeys')}</div>`
+          : html`<table>
+            <thead><tr><th>${t('dashboard.portalKeyLabel')}</th><th>${t('dashboard.portalValueLabel')}</th><th></th></tr></thead>
+            <tbody>
+              ${memKeys.map(k => html`<tr>
+                <td><code>${escHtml(k.key)}</code></td>
+                <td style="max-width:300px;overflow:hidden;text-overflow:ellipsis">${escHtml(String(k.value || ''))}</td>
+                <td><button class="adm-btn-sm" onClick=${() => delMem(k.key)}>\u274C</button></td>
+              </tr>`)}
+            </tbody>
+          </table>`
+      }
+      <div class="adm-flex-center adm-mt-sm">
+        <input class="adm-input" value=${newKey} onInput=${e => setNewKey(e.target.value)} placeholder="portal/key" style="flex:1" />
+        <input class="adm-input" value=${newVal} onInput=${e => setNewVal(e.target.value)} placeholder="value" style="flex:2" />
+        <button class="adm-btn-action" onClick=${addMem}>+ ${t('dashboard.portalUpload')}</button>
+      </div>
+    </div>
+
+    <!-- KV pairs -->
+    <div class="adm-card">
+      <h3>${t('dashboard.portalKvPairs')}</h3>
+      <p class="adm-text-dim adm-text-base adm-mb-sm">${t('dashboard.portalKvExplain')}</p>
+      ${kvKeys.length === 0
+        ? html`<div class="adm-text-dim">${t('dashboard.portalNoKvPairs')}</div>`
+        : html`<table>
+          <thead><tr><th>${t('dashboard.portalKeyLabel')}</th><th>${t('dashboard.portalValueLabel')}</th></tr></thead>
+          <tbody>${kvKeys.map(k => html`<tr><td><code>${escHtml(k)}</code></td><td class="adm-eval">${escHtml(kv[k])}</td></tr>`)}</tbody>
+        </table>`
+      }
+    </div>
+
+    <!-- AI Chat -->
+    <div class="adm-card">
+      <h3>${t('dashboard.portalAiChat')}</h3>
+      <p class="adm-text-dim adm-text-base">${t('dashboard.portalAiExplain')}</p>
+      <div class="adm-mt-sm">
+        <button class="adm-btn-action" onClick=${copyPrompt}>\u{1F4CB} ${t('dashboard.portalAiLoadPrompt')}</button>
+      </div>
+    </div>
+
+    <!-- Changelog -->
+    <div class="adm-card">
+      <h3>${t('dashboard.portalChangelog')}</h3>
+      ${changes.length === 0
+        ? html`<div class="adm-text-dim">${t('dashboard.portalNoChanges')}</div>`
+        : html`<table>
+          <thead><tr><th>${t('dashboard.action')}</th><th>${t('dashboard.by')}</th><th>${t('dashboard.created')}</th></tr></thead>
+          <tbody>
+            ${changes.slice(0, 20).map(c => html`<tr>
+              <td><${Badge} type=${c.action} /></td>
+              <td class="mono" style="font-size:.75rem">${escHtml(c.changed_by || c.changedBy || '-')}</td>
+              <td class="adm-text-dim">${dt(c.changed_at || c.changedAt)}</td>
+            </tr>`)}
+          </tbody>
+        </table>`
+      }
+    </div>
+    <${ConfirmUI} />
+  `;
+}

package/dist/public/views/admin/prompts-tab.js

@@ -0,0 +1,287 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { dt, Badge, StatsGrid, Empty, ExpandableHelp, Spinner } from './shared.js';
+import {
+  getSystemPrompts, getSystemPrompt, updateSystemPrompt,
+  resetSystemPrompt, resetAllSystemPrompts, resetPromptGroup, getPromptVersions, restorePromptVersion,
+} from '/js/services/admin.js';
+import { useConfirm } from '/components/Modal.js';
+
+const GROUP_NAMES = {
+  tiers: 'promptsGroupTiers',
+  builders: 'promptsGroupBuilders',
+  portal: 'promptsGroupPortal',
+  knowledge: 'promptsGroupKnowledge',
+  platform: 'promptsGroupPlatform',
+  generator: 'promptsGroupGenerator',
+};
+
+export default function PromptsTab({ data, reload }) {
+  const [prompts, setPrompts] = useState(data?.systemPrompts?.prompts || []);
+  const [editId, setEditId] = useState(null);
+  const [editData, setEditData] = useState(null);
+  const [versions, setVersions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const { confirm, ConfirmUI } = useConfirm();
+
+  // Group prompts
+  const groups = {};
+  for (const p of prompts) {
+    if (!groups[p.group]) groups[p.group] = [];
+    groups[p.group].push(p);
+  }
+
+  const stats = [
+    { label: t('dashboard.promptsTotal'), value: prompts.length },
+    { label: t('dashboard.promptsStatusActive'), value: prompts.filter(p => p.active).length, color: '#22c55e' },
+    { label: t('dashboard.promptsStatusInactive'), value: prompts.filter(p => !p.active).length, color: '#ef4444' },
+    { label: t('dashboard.promptsGroups'), value: Object.keys(groups).length },
+  ];
+
+  async function openEdit(id) {
+    setLoading(true);
+    try {
+      const [pRes, vRes] = await Promise.all([
+        getSystemPrompt(id),
+        getPromptVersions(id),
+      ]);
+      setEditData({
+        ...pRes.data.prompt,
+        changeNote: '',
+      });
+      setVersions(vRes.data.versions || []);
+      setEditId(id);
+    } catch (e) {
+      window.showToast?.(e.message, true);
+    }
+    setLoading(false);
+  }
+
+  async function handleSave() {
+    if (!editData) return;
+    setSaving(true);
+    try {
+      const body = {
+        content: editData.content,
+        active: editData.active,
+        locales: editData.locales || undefined,
+      };
+      if (editData.changeNote) body.changeNote = editData.changeNote;
+      const res = await updateSystemPrompt(editId, body);
+      setEditData({ ...res.data.prompt, changeNote: '' });
+      // Refresh versions and prompt list
+      const vRes = await getPromptVersions(editId);
+      setVersions(vRes.data.versions || []);
+      const listRes = await getSystemPrompts();
+      setPrompts(listRes.data.prompts || []);
+      window.showToast?.(t('dashboard.promptsSaved'));
+    } catch (e) {
+      window.showToast?.(e.message, true);
+    }
+    setSaving(false);
+  }
+
+  function handleReset() {
+    confirm(t('dashboard.promptsResetConfirm'), async () => {
+      setSaving(true);
+      try {
+        const res = await resetSystemPrompt(editId);
+        setEditData({ ...res.data.prompt, changeNote: '' });
+        const vRes = await getPromptVersions(editId);
+        setVersions(vRes.data.versions || []);
+        const listRes = await getSystemPrompts();
+        setPrompts(listRes.data.prompts || []);
+        window.showToast?.(t('dashboard.promptsResetDone'));
+      } catch (e) {
+        window.showToast?.(e.message, true);
+      }
+      setSaving(false);
+    }, { danger: true });
+  }
+
+  function handleResetAll() {
+    confirm(t('dashboard.promptsResetAllConfirm'), async () => {
+      setSaving(true);
+      try {
+        const res = await resetAllSystemPrompts();
+        setPrompts(res.data.prompts || []);
+        window.showToast?.(t('dashboard.promptsResetAllDone'));
+      } catch (e) {
+        window.showToast?.(e.message, true);
+      }
+      setSaving(false);
+    }, { danger: true });
+  }
+
+  function handleRestore(version) {
+    confirm(t('dashboard.promptsRestoreConfirm'), async () => {
+      setSaving(true);
+      try {
+        const res = await restorePromptVersion(editId, version);
+        setEditData({ ...res.data.prompt, changeNote: '' });
+        const vRes = await getPromptVersions(editId);
+        setVersions(vRes.data.versions || []);
+        const listRes = await getSystemPrompts();
+        setPrompts(listRes.data.prompts || []);
+        window.showToast?.(t('dashboard.promptsRestored'));
+      } catch (e) {
+        window.showToast?.(e.message, true);
+      }
+      setSaving(false);
+    });
+  }
+
+  // Edit view
+  if (editId && editData) {
+    return html`
+      <div>
+        <button class="adm-btn-action" onClick=${() => { setEditId(null); setEditData(null); }}>← ${t('dashboard.promptsTab')}</button>
+        <h3 style="margin:12px 0 4px">${escHtml(editData.name)}</h3>
+        <p class="adm-text-dim adm-text-base" style="margin:0 0 16px">${escHtml(editData.description)}</p>
+
+        <!-- Active toggle -->
+        <label class="adm-flex-center adm-mb-md" style="cursor:pointer">
+          <input type="checkbox" checked=${editData.active}
+            onChange=${e => setEditData({...editData, active: e.target.checked})} />
+          ${editData.active ? t('dashboard.promptsStatusActive') : t('dashboard.promptsStatusInactive')}
+        </label>
+
+        <!-- Content editor -->
+        <div class="adm-prompt-editor">
+          <label style="font-weight:600;font-size:.9rem">${t('dashboard.promptsContent')}</label>
+          <textarea class="adm-prompt-textarea"
+            value=${editData.content}
+            onInput=${e => setEditData({...editData, content: e.target.value})}
+          />
+        </div>
+
+        <!-- Variables reference -->
+        ${editData.variables && editData.variables.length > 0 && html`
+          <div class="adm-prompt-vars">
+            <strong>${t('dashboard.promptsVariables')}:</strong> ${editData.variables.map(v => html` <code>{{${v}}}</code>`)}
+          </div>
+        `}
+
+        <!-- Used in -->
+        ${editData.usedIn && editData.usedIn.length > 0 && html`
+          <div style="margin:8px 0">
+            <strong class="adm-text-base">${t('dashboard.promptsUsedIn')}:</strong>
+            ${editData.usedIn.map(u => u.startsWith('/')
+              ? html` <a href="${u}" target="_blank" class="adm-prompt-used-tag" style="text-decoration:none;color:var(--accent,#06b6d4)">${escHtml(u)}</a>`
+              : html` <span class="adm-prompt-used-tag">${escHtml(u)}</span>`
+            )}
+          </div>
+        `}
+
+        <!-- Change note -->
+        <input class="adm-input adm-input-full" type="text" placeholder=${t('dashboard.promptsChangeNotePlaceholder')}
+          value=${editData.changeNote || ''}
+          onInput=${e => setEditData({...editData, changeNote: e.target.value})}
+          style="margin:8px 0" />
+
+        <!-- Buttons -->
+        <div class="adm-flex" style="margin:12px 0">
+          <button class="adm-btn-action" onClick=${handleSave} disabled=${saving}>
+            ${saving ? '...' : t('dashboard.promptsSave')}
+          </button>
+          <button class="adm-btn-action" style="background:#dc262633;color:#ef4444" onClick=${handleReset} disabled=${saving}>
+            ${t('dashboard.promptsReset')}
+          </button>
+        </div>
+
+        <!-- Version History -->
+        <details class="adm-mt-lg">
+          <summary class="adm-prompt-group-header">${t('dashboard.promptsVersionHistory')} (${versions.length})</summary>
+          ${versions.length === 0
+            ? html`<${Empty} text=${t('dashboard.promptsNoVersions')} />`
+            : versions.map(v => html`
+              <div class="adm-prompt-version-row">
+                <span style="font-weight:600">v${v.version}</span>
+                <span class="adm-text-dim" style="flex:1">${dt(v.changedAt)} · ${escHtml(v.changedBy)}${v.changeNote ? ` · ${escHtml(v.changeNote)}` : ''}</span>
+                <button class="adm-btn-sm" onClick=${() => handleRestore(v.version)} disabled=${saving}>
+                  ${t('dashboard.promptsRestore')}
+                </button>
+              </div>
+            `)
+          }
+        </details>
+        <${ConfirmUI} />
+      </div>
+    `;
+  }
+
+  // Loading
+  if (loading) return html`<${Spinner} />`;
+
+  // List view
+  return html`
+    <${StatsGrid} items=${stats} />
+    <${ExpandableHelp} title=${t('dashboard.promptsHelpTitle')}>
+      <p>${t('dashboard.promptsHelp')}</p>
+    </${ExpandableHelp}>
+
+    <div style="margin:12px 0">
+      <button class="adm-btn-action" style="background:#dc262633;color:#ef4444" onClick=${handleResetAll} disabled=${saving}>
+        ${t('dashboard.promptsResetAll')}
+      </button>
+    </div>
+
+    ${Object.keys(groups).length === 0
+      ? html`<${Empty} text=${t('dashboard.promptsEmpty')} />`
+      : Object.entries(groups).map(([g, items]) => html`
+        <details class="adm-card adm-mb-sm" open>
+          <summary class="adm-prompt-group-header">
+            ${t('dashboard.' + (GROUP_NAMES[g] || g))} (${items.length})
+          </summary>
+          <div style="text-align:right;padding:4px 8px">
+            <button class="btn-danger" style="font-size:12px;padding:4px 12px" onClick=${() => {
+              confirm(
+                t('dashboard.promptsResetGroupConfirm') || 'Reset all prompts in this group to factory defaults?',
+                async () => {
+                  try {
+                    setLoading(true);
+                    await resetPromptGroup(g);
+                    const res = await getSystemPrompts();
+                    setPrompts(res.data.prompts || []);
+                    setLoading(false);
+                    window.showToast?.(t('dashboard.promptsResetAllDone') || 'Group reset to factory defaults');
+                  } catch (err) {
+                    setLoading(false);
+                    window.showToast?.(err.message, true);
+                  }
+                },
+                { danger: true }
+              );
+            }}>${t('dashboard.promptsResetGroup') || 'Palauta ryhmä'}</button>
+          </div>
+          ${items.map(p => html`
+            <div class="adm-hrow" style="cursor:pointer" onClick=${() => openEdit(p.id)}>
+              <div style="flex:1">
+                <div class="adm-flex-center" style="gap:6px">
+                  <strong>${escHtml(p.name)}</strong>
+                  <${Badge} type=${p.active ? 'healthy' : 'critical'} />
+                </div>
+                <div class="adm-text-sm adm-text-dim">${escHtml(p.description)}</div>
+                ${p.usedIn && p.usedIn.length > 0 && html`
+                  <div>${p.usedIn.map(u => u.startsWith('/')
+                    ? html`<a href="${u}" target="_blank" class="adm-prompt-used-tag" style="text-decoration:none;color:var(--accent,#06b6d4)" onClick=${e => e.stopPropagation()}>${escHtml(u)}</a> `
+                    : html`<span class="adm-prompt-used-tag">${escHtml(u)}</span> `
+                  )}</div>
+                `}
+              </div>
+              <div class="adm-text-sm adm-text-dim" style="text-align:right">
+                <div>v${p.version} · ${dt(p.updatedAt)}</div>
+              </div>
+            </div>
+          `)}
+        </details>
+      `)
+    }
+    <${ConfirmUI} />
+  `;
+}