cli-jaw 0.1.11 → 1.0.0

package/public/js/features/heartbeat.ts

@@ -0,0 +1,90 @@
+// ── Heartbeat Feature ──
+import { state } from '../state.js';
+import type { HeartbeatJob } from '../state.js';
+import { t } from './i18n.js';
+import { api, apiJson } from '../api.js';
+import { escapeHtml } from '../render.js';
+
+interface HeartbeatData {
+    jobs: HeartbeatJob[];
+}
+
+export async function openHeartbeatModal(): Promise<void> {
+    const data = await api<HeartbeatData>('/api/heartbeat');
+    state.heartbeatJobs = data?.jobs || [];
+    renderHeartbeatJobs();
+    document.getElementById('heartbeatModal')?.classList.add('open');
+}
+
+export function closeHeartbeatModal(e?: Event): void {
+    if (e && e.target !== e.currentTarget) return;
+    document.getElementById('heartbeatModal')?.classList.remove('open');
+}
+
+export function renderHeartbeatJobs(): void {
+    const container = document.getElementById('hbJobsList');
+    if (!container) return;
+    const jobs = state.heartbeatJobs as HeartbeatJob[];
+    if (jobs.length === 0) {
+        container.innerHTML = `<p style="color:var(--text-dim);font-size:12px;text-align:center">${t('hb.empty')}</p>`;
+    } else {
+        container.innerHTML = jobs.map((job, i) => `
+            <div class="hb-job-card">
+                <div class="hb-job-header">
+                    <input type="text" value="${escapeHtml(String(job.name || ''))}" placeholder="${t('hb.name')}"
+                        data-hb-name="${i}">
+                    <span style="font-size:11px;color:var(--text-dim)">every</span>
+                    <input type="number" value="${(job.schedule as Record<string, unknown>)?.minutes || 5}" min="1"
+                        data-hb-minutes="${i}">
+                    <span style="font-size:11px;color:var(--text-dim)">min</span>
+                    <button class="hb-toggle ${job.enabled ? 'on' : 'off'}"
+                        data-hb-toggle="${i}"></button>
+                    <button class="hb-del" data-hb-remove="${i}">✕</button>
+                </div>
+                <textarea class="hb-prompt" rows="2" placeholder="${t('hb.prompt')}"
+                    data-hb-prompt="${i}">${escapeHtml(String(job.prompt || ''))}</textarea>
+            </div>
+        `).join('');
+    }
+    const active = jobs.filter(j => j.enabled).length;
+    const btn = document.getElementById('hbSidebarBtn');
+    if (btn) btn.textContent = `💓 Heartbeat (${active})`;
+}
+
+export function addHeartbeatJob(): void {
+    (state.heartbeatJobs as HeartbeatJob[]).push({
+        id: 'hb_' + Date.now(),
+        name: '',
+        enabled: true,
+        schedule: { kind: 'every', minutes: 5 },
+        prompt: ''
+    });
+    renderHeartbeatJobs();
+    saveHeartbeatJobs();
+}
+
+export function removeHeartbeatJob(i: number): void {
+    state.heartbeatJobs.splice(i, 1);
+    renderHeartbeatJobs();
+    saveHeartbeatJobs();
+}
+
+export function toggleHeartbeatJob(i: number): void {
+    const jobs = state.heartbeatJobs as HeartbeatJob[];
+    jobs[i].enabled = !jobs[i].enabled;
+    renderHeartbeatJobs();
+    saveHeartbeatJobs();
+}
+
+export async function saveHeartbeatJobs(): Promise<void> {
+    await apiJson('/api/heartbeat', 'PUT', { jobs: state.heartbeatJobs });
+}
+
+export async function initHeartbeatBadge(): Promise<void> {
+    try {
+        const d = await api<HeartbeatData>('/api/heartbeat');
+        const active = (d?.jobs || []).filter(j => j.enabled).length;
+        const btn = document.getElementById('hbSidebarBtn');
+        if (btn) btn.textContent = `💓 Heartbeat (${active})`;
+    } catch { /* ignore */ }
+}

package/public/js/features/{i18n.js → i18n.ts}

@@ -1,24 +1,24 @@
 // ── Frontend i18n module ──
 // Phase 7: client-side translation with lazy-loaded locale JSON
 
+type LocaleDict = Record<string, string>;
+
 let currentLocale = 'ko';
-let dict = {};  // current locale dictionary
-let fallbackDict = {};  // ko fallback
+let dict: LocaleDict = {};
+let fallbackDict: LocaleDict = {};
 
 /**
  * Initialize i18n: restore from localStorage, detect from browser, load locale
  */
-export async function initI18n() {
-    let saved = null;
+export async function initI18n(): Promise<void> {
+    let saved: string | null = null;
     try { saved = localStorage.getItem('claw_locale'); } catch { /* Safari private */ }
 
     if (!saved) {
-        // Detect from browser language
         const browserLang = (navigator.language || 'ko').split(/[-_]/)[0].toLowerCase();
         saved = ['en', 'ko'].includes(browserLang) ? browserLang : 'ko';
     }
 
-    // Always load ko as fallback
     fallbackDict = await fetchLocale('ko');
     if (saved === 'ko') {
         dict = fallbackDict;
@@ -32,10 +32,10 @@ export async function initI18n() {
 /**
  * Fetch a locale JSON from the server
  */
-async function fetchLocale(lang) {
+async function fetchLocale(lang: string): Promise<LocaleDict> {
     try {
         const { api } = await import('../api.js');
-        return await api(`/api/i18n/${lang}`) || {};
+        return await api<LocaleDict>(`/api/i18n/${lang}`) || {};
     } catch { return {}; }
 }
 
@@ -43,8 +43,8 @@ async function fetchLocale(lang) {
  * Translate a key with optional parameter interpolation
  * Falls back: dict[key] → fallbackDict[key] → key itself
  */
-export function t(key, params = {}) {
-    let val = dict[key] ?? fallbackDict[key] ?? key;
+export function t(key: string, params: Record<string, unknown> = {}): string {
+    let val: string = dict[key] ?? fallbackDict[key] ?? key;
     for (const [k, v] of Object.entries(params)) {
         val = val.replaceAll(`{${k}}`, String(v));
     }
@@ -54,18 +54,18 @@ export function t(key, params = {}) {
 /**
  * Apply translations to all elements with data-i18n attributes
  */
-export function applyI18n() {
+export function applyI18n(): void {
     document.querySelectorAll('[data-i18n]').forEach(el => {
         const key = el.getAttribute('data-i18n');
         if (key) el.textContent = t(key);
     });
     document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
         const key = el.getAttribute('data-i18n-placeholder');
-        if (key) el.placeholder = t(key);
+        if (key) (el as HTMLInputElement).placeholder = t(key);
     });
     document.querySelectorAll('[data-i18n-title]').forEach(el => {
         const key = el.getAttribute('data-i18n-title');
-        if (key) el.title = t(key);
+        if (key) (el as HTMLElement).title = t(key);
     });
     document.querySelectorAll('[data-i18n-aria]').forEach(el => {
         const key = el.getAttribute('data-i18n-aria');
@@ -76,7 +76,7 @@ export function applyI18n() {
 /**
  * Switch language, reload locale, rebind all UI
  */
-export async function setLang(lang) {
+export async function setLang(lang: string): Promise<void> {
     if (lang === currentLocale) return;
     if (lang === 'ko') {
         dict = fallbackDict;
@@ -91,32 +91,32 @@ export async function setLang(lang) {
     try {
         const { loadEmployees } = await import('./employees.js');
         loadEmployees();
-    } catch { }
+    } catch { /* ignore */ }
     try {
         const { loadSkills } = await import('./skills.js');
         loadSkills();
-    } catch { }
+    } catch { /* ignore */ }
     try {
         const { loadCommands } = await import('./slash-commands.js');
         loadCommands();
-    } catch { }
+    } catch { /* ignore */ }
     try {
         const { loadSettings } = await import('./settings.js');
         loadSettings();
-    } catch { }
+    } catch { /* ignore */ }
 }
 
 /**
  * Get current locale code
  */
-export function getLang() {
+export function getLang(): string {
     return currentLocale;
 }
 
 /**
  * fetchWithLocale — wrapper that appends ?locale= to requests
  */
-export function fetchWithLocale(url, init = {}) {
+export function fetchWithLocale(url: string, init: RequestInit = {}): Promise<Response> {
     const u = new URL(url, location.origin);
     if (!u.searchParams.has('locale')) {
         u.searchParams.set('locale', currentLocale);

package/public/js/features/memory.ts

@@ -0,0 +1,125 @@
+// ── Memory Feature ──
+import { escapeHtml } from '../render.js';
+import { api, apiJson } from '../api.js';
+
+interface MemoryFile {
+    name: string;
+    entries: number;
+}
+
+interface MemoryData {
+    enabled: boolean;
+    flushEvery: number;
+    cli?: string;
+    model?: string;
+    retentionDays: number;
+    path: string;
+    counter: number;
+    files: MemoryFile[];
+}
+
+interface MemoryFileContent {
+    name: string;
+    content: string;
+}
+
+export async function openMemoryModal(): Promise<void> {
+    const data = await api<MemoryData>('/api/memory-files');
+    if (!data) return;
+    const $ = (id: string) => document.getElementById(id);
+
+    $('memOn')?.classList.toggle('active', data.enabled);
+    $('memOff')?.classList.toggle('active', !data.enabled);
+    const flushEl = $('memFlushEvery') as HTMLSelectElement | null;
+    if (flushEl) flushEl.value = String(data.flushEvery);
+    const cliEl = $('memCli') as HTMLSelectElement | null;
+    if (cliEl) cliEl.value = data.cli || '';
+    const modelEl = $('memModel') as HTMLSelectElement | null;
+    if (modelEl) modelEl.value = data.model || '';
+    const retEl = $('memRetention') as HTMLSelectElement | null;
+    if (retEl) retEl.value = String(data.retentionDays);
+    const pathEl = $('memPath');
+    if (pathEl) pathEl.textContent = data.path;
+    const counterEl = $('memCounter');
+    if (counterEl) counterEl.textContent = String(data.counter);
+    const thresholdEl = $('memThreshold');
+    if (thresholdEl) thresholdEl.textContent = String(data.flushEvery);
+    renderMemFiles(data.files);
+    const sideBtn = $('memorySidebarBtn');
+    if (sideBtn) sideBtn.textContent = `🧠 Memory (${data.files.length})`;
+    $('memoryModal')?.classList.add('open');
+}
+
+export function closeMemoryModal(e?: Event): void {
+    if (e && e.target !== e.currentTarget) return;
+    document.getElementById('memoryModal')?.classList.remove('open');
+}
+
+export function switchMemTab(tab: string): void {
+    const settingsTab = document.getElementById('memTabSettings');
+    const filesTab = document.getElementById('memTabFiles');
+    if (settingsTab) settingsTab.style.display = tab === 'settings' ? '' : 'none';
+    if (filesTab) filesTab.style.display = tab === 'files' ? '' : 'none';
+    document.getElementById('memTabBtnSettings')?.classList.toggle('active', tab === 'settings');
+    document.getElementById('memTabBtnFiles')?.classList.toggle('active', tab === 'files');
+}
+
+export async function setMemEnabled(v: boolean): Promise<void> {
+    document.getElementById('memOn')?.classList.toggle('active', v);
+    document.getElementById('memOff')?.classList.toggle('active', !v);
+    await apiJson('/api/memory-files/settings', 'PUT', { enabled: v });
+}
+
+export async function saveMemSettings(): Promise<void> {
+    const flushEl = document.getElementById('memFlushEvery') as HTMLSelectElement | null;
+    const cliEl = document.getElementById('memCli') as HTMLSelectElement | null;
+    const modelEl = document.getElementById('memModel') as HTMLSelectElement | null;
+    const retEl = document.getElementById('memRetention') as HTMLSelectElement | null;
+    await apiJson('/api/memory-files/settings', 'PUT', {
+        flushEvery: +(flushEl?.value || 10),
+        cli: cliEl?.value || '',
+        model: modelEl?.value || '',
+        retentionDays: +(retEl?.value || 30),
+    });
+    const thresholdEl = document.getElementById('memThreshold');
+    if (thresholdEl && flushEl) thresholdEl.textContent = flushEl.value;
+}
+
+function renderMemFiles(files: MemoryFile[]): void {
+    const container = document.getElementById('memFilesList');
+    if (!container) return;
+    if (!files || files.length === 0) {
+        container.innerHTML = '<p style="color:var(--text-dim);font-size:12px;text-align:center">No memory files yet</p>';
+        return;
+    }
+    container.innerHTML = files.map(f => `
+        <div style="display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border:1px solid var(--border);border-radius:4px;margin-bottom:4px;cursor:pointer"
+             data-mem-view="${escapeHtml(f.name)}">
+            <div>
+                <span style="font-size:12px;font-family:monospace">${escapeHtml(f.name)}</span>
+                <span style="font-size:10px;color:var(--accent);margin-left:6px">${f.entries} entries</span>
+            </div>
+            <button data-mem-delete="${escapeHtml(f.name)}" style="background:none;border:none;color:#f55;cursor:pointer;font-size:14px">🗑️</button>
+        </div>
+    `).join('');
+}
+
+export async function deleteMemFile(name: string): Promise<void> {
+    if (!confirm('Delete ' + name + '?')) return;
+    await apiJson('/api/memory-files/' + name, 'DELETE', {});
+    openMemoryModal();
+}
+
+export async function viewMemFile(name: string): Promise<void> {
+    const data = await api<MemoryFileContent>('/api/memory-files/' + name);
+    if (!data) return;
+    const container = document.getElementById('memFilesList');
+    if (!container) return;
+    container.innerHTML = `
+        <div style="margin-bottom:8px;display:flex;justify-content:space-between;align-items:center">
+            <span style="font-size:12px;font-weight:600">${data.name}</span>
+            <button data-mem-back style="background:none;border:none;color:var(--accent);cursor:pointer;font-size:11px">← back</button>
+        </div>
+        <pre style="background:var(--bg);padding:8px;border-radius:4px;font-size:11px;white-space:pre-wrap;max-height:50vh;overflow-y:auto;color:var(--text)">${escapeHtml(data.content)}</pre>
+    `;
+}