Stage 15 (audit trail, slice 4): the desktop audit viewer

The audit trail is now visible and searchable from the desktop — the payoff of
slices 1-3. A global "Audit log" view (sidebar, alongside Site/Web/Settings)
lists every recorded action with filters that mirror the store's query surface:

- filter by source (All / Console / Panel / Web panel / Public / System) with a
  live per-source count, by outcome (All / Success / Failed), and a debounced
  free-text search over actor / IP / action / target.
- a table showing when, source (badged), action (localized, raw string for
  unknown actions), actor, IP, target/detail, and a success/failure mark.

Wiring mirrors the existing queryEvents seam exactly: `audit:query` channel →
preload → `H(IPC.auditQuery, …)` → the pure `filterAudit`. New global ViewId
'audit'; EN/TR in lockstep (34/34 keys).

Verified: typecheck + build clean; the main SMOKE (exit 0) now records two audit
entries, opens the Audit view from the sidebar in the real renderer, and asserts
the table renders both — actor 'operator', a denied login with its IP, all
localized. So the view is verified end-to-end (record → IPC → rendered table),
not just by inspection.

Joins / alt-account tracking (name+IP+account count) and the admin-gated web
audit endpoint remain for slice 5.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: CaYatur

src/main/ipc/register.ts

@@ -332,6 +332,7 @@ export function registerIpc(): void {
   // --- timeline events ---
   H(IPC.eventsQuery, (_e, id: string, q?: events.EventQuery) => events.query(id, q))
   H(IPC.eventsUptime, (_e, id: string, from: number, to: number) => events.uptime(id, from, to))
+  H(IPC.auditQuery, (_e, q?: audit.AuditQuery) => audit.query(q))
 
   // --- telemetry history ---
   H(IPC.metricsQuery, (_e, id: string, opts: metrics.QueryOptions) => metrics.query(id, opts))

src/main/smoke.ts

@@ -2383,6 +2383,39 @@ export async function runSmoke(): Promise<void> {
     console.log('SMOKE: mods update control OK (button enabled with a plugin present)')
   }
 
+  // ---- audit view (Stage 15 slice 4): the global audit log renders in the UI ----
+  {
+    const af = join(auditDir(), 'audit.jsonl')
+    const asnap = existsSync(af) ? readFileSync(af, 'utf-8') : null
+    try {
+      rmSync(af, { force: true })
+      auditMod._reset()
+      auditMod.record({ source: 'panel', action: 'server.start', actor: 'operator', serverId: 'smoke-srv' })
+      auditMod.record({ source: 'webpanel', action: 'login', actor: 'smokeadmin', ok: false, ip: '203.0.113.7' })
+      await win.webContents.executeJavaScript(
+        `[...document.querySelectorAll('.sidebar-foot .btn')].find(b=>/Audit|Denetim/i.test(b.textContent||''))?.click()`
+      )
+      await sleep(700)
+      const av = JSON.parse(
+        await win.webContents.executeJavaScript(
+          `(()=>{const rows=[...document.querySelectorAll('.audit-table tbody tr')];
+           const txt=document.querySelector('.audit-table')?.textContent||'';
+           return JSON.stringify({rows:rows.length,hasTable:!!document.querySelector('.audit-table'),
+             title:(document.querySelector('.section-title')?.textContent||'').trim(),
+             hasOperator:/operator/.test(txt),hasFailIp:txt.indexOf('203.0.113.7')>=0})})()`
+        )
+      ) as { rows: number; hasTable: boolean; title: string; hasOperator: boolean; hasFailIp: boolean }
+      if (!av.hasTable) return fail('audit view did not render its table')
+      if (av.rows < 2) return fail('audit view showed ' + av.rows + ' row(s), expected 2')
+      if (!av.hasOperator || !av.hasFailIp) return fail('audit rows missing actor/IP content')
+      if (/audit\.|auditAct\.|\{\{/.test(av.title)) return fail('audit view not translated: ' + av.title)
+      console.log('SMOKE: audit view OK (table renders — actor, source badge, denied login + IP)')
+    } finally {
+      if (asnap == null) rmSync(af, { force: true })
+      else writeFileSync(af, asnap, 'utf-8')
+    }
+  }
+
   const bk = await backupsMod.createBackup(id, { kind: 'full' })
   if (!backupsMod.listBackups(id).find((b) => b.id === bk.id)) return fail('backup not listed')
   backupsMod.deleteBackup(bk.id)

src/preload/index.ts

@@ -107,6 +107,7 @@ const api: MsmsApi = {
 
   queryEvents: (id, q) => ipcRenderer.invoke(IPC.eventsQuery, id, q),
   getUptime: (id, from, to) => ipcRenderer.invoke(IPC.eventsUptime, id, from, to),
+  queryAudit: (q) => ipcRenderer.invoke(IPC.auditQuery, q),
   queryMetrics: (id, opts) => ipcRenderer.invoke(IPC.metricsQuery, id, opts),
   getTelemetryConfig: () => ipcRenderer.invoke(IPC.metricsConfigGet),
   setTelemetryConfig: (patch) => ipcRenderer.invoke(IPC.metricsConfigSet, patch),

src/renderer/src/App.tsx

@@ -39,6 +39,7 @@ import { HistoryView } from './views/HistoryView'
 import { StoreView } from './views/StoreView'
 import { WebPanelView } from './views/WebPanelView'
 import { SiteView } from './views/SiteView'
+import { AuditView } from './views/AuditView'
 import { useState, useRef, useEffect } from 'react'
 
 const TABS: { id: ViewId; icon: JSX.Element; labelKey: string }[] = [
@@ -143,11 +144,19 @@ function MainArea(): JSX.Element {
   }, [view])
 
   if (view === 'create') return <CreateView />
-  if (view === 'settings' || view === 'web' || view === 'site')
+  if (view === 'settings' || view === 'web' || view === 'site' || view === 'audit')
     return (
       <div className="content">
         <ErrorBoundary key={view}>
-          {view === 'web' ? <WebPanelView /> : view === 'site' ? <SiteView /> : <SettingsView />}
+          {view === 'web' ? (
+            <WebPanelView />
+          ) : view === 'site' ? (
+            <SiteView />
+          ) : view === 'audit' ? (
+            <AuditView />
+          ) : (
+            <SettingsView />
+          )}
         </ErrorBoundary>
       </div>
     )

src/renderer/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { Plus, FolderPlus, RefreshCw, Settings as SettingsIcon, Server, FolderOpen, Globe, Globe2 } from 'lucide-react'
+import { Plus, FolderPlus, RefreshCw, Settings as SettingsIcon, Server, FolderOpen, Globe, Globe2, ScrollText } from 'lucide-react'
 import { useStore } from '../store'
 import { StatusDot } from './ui'
 import { Logo } from './Logo'
@@ -57,14 +57,14 @@ export function Sidebar(): JSX.Element {
           servers.map((s) => {
             const st = statuses[s.id]?.status ?? 'stopped'
             const active =
-              s.id === activeId && !['settings', 'create', 'web', 'site'].includes(view)
+              s.id === activeId && !['settings', 'create', 'web', 'site', 'audit'].includes(view)
             return (
               <div
                 key={s.id}
                 className={`server-item ${active ? 'active' : ''}`}
                 onClick={() => {
                   selectServer(s.id)
-                  if (['settings', 'create', 'web', 'site'].includes(view)) setView('console')
+                  if (['settings', 'create', 'web', 'site', 'audit'].includes(view)) setView('console')
                 }}
               >
                 <StatusDot status={st} />
@@ -105,6 +105,13 @@ export function Sidebar(): JSX.Element {
         >
           <Globe size={15} /> {t('web.title')}
         </button>
+        <button
+          className={`btn ghost sm block ${view === 'audit' ? 'active' : ''}`}
+          onClick={() => setView('audit')}
+          style={{ marginBottom: 4 }}
+        >
+          <ScrollText size={15} /> {t('audit.title')}
+        </button>
         <button
           className={`btn ghost sm block ${view === 'settings' ? 'active' : ''}`}
           onClick={() => setView('settings')}

src/renderer/src/locales/en.ts

@@ -113,6 +113,42 @@ export default {
     settings: 'Settings',
     openFolder: 'Open folder'
   },
+  audit: {
+    title: 'Audit log',
+    all: 'All',
+    okOnly: 'Success',
+    failOnly: 'Failed',
+    search: 'Search actor, IP, action, target…',
+    refresh: 'Refresh',
+    results: '{{n}} entries',
+    empty: 'No matching audit entries.',
+    when: 'When',
+    source: 'Source',
+    action: 'Action',
+    actor: 'Actor',
+    ip: 'IP',
+    target: 'Target',
+    outcome: 'Outcome',
+    src: {
+      console: 'Console',
+      panel: 'Panel',
+      webpanel: 'Web panel',
+      public: 'Public site',
+      system: 'System'
+    }
+  },
+  auditAct: {
+    login: 'Login',
+    command: 'Console command',
+    start: 'Start server',
+    stop: 'Stop server',
+    restart: 'Restart server',
+    kill: 'Force kill',
+    create: 'Create server',
+    remove: 'Remove server',
+    register: 'Account created',
+    purchase: 'Purchase'
+  },
   status: {
     stopped: 'Stopped',
     starting: 'Starting',

src/renderer/src/locales/tr.ts

@@ -115,6 +115,42 @@ const tr: typeof en = {
     settings: 'Ayarlar',
     openFolder: 'Klasörü aç'
   },
+  audit: {
+    title: 'Denetim kaydı',
+    all: 'Tümü',
+    okOnly: 'Başarılı',
+    failOnly: 'Başarısız',
+    search: 'Aktör, IP, eylem, hedef ara…',
+    refresh: 'Yenile',
+    results: '{{n}} kayıt',
+    empty: 'Eşleşen denetim kaydı yok.',
+    when: 'Zaman',
+    source: 'Kaynak',
+    action: 'Eylem',
+    actor: 'Aktör',
+    ip: 'IP',
+    target: 'Hedef',
+    outcome: 'Sonuç',
+    src: {
+      console: 'Konsol',
+      panel: 'Panel',
+      webpanel: 'Web panel',
+      public: 'Herkese açık',
+      system: 'Sistem'
+    }
+  },
+  auditAct: {
+    login: 'Giriş',
+    command: 'Konsol komutu',
+    start: 'Sunucu başlat',
+    stop: 'Sunucu durdur',
+    restart: 'Sunucu yeniden başlat',
+    kill: 'Zorla kapat',
+    create: 'Sunucu oluştur',
+    remove: 'Sunucu kaldır',
+    register: 'Hesap oluşturuldu',
+    purchase: 'Satın alma'
+  },
   status: {
     stopped: 'Durdu',
     starting: 'Başlatılıyor',

src/renderer/src/store.ts

@@ -31,6 +31,7 @@ export type ViewId =
   | 'create'
   | 'web'
   | 'site'
+  | 'audit'
 
 export interface Toast {
   id: string

src/renderer/src/styles.css

@@ -696,6 +696,62 @@ textarea.input:focus {
   font-family: var(--mono);
   font-size: 12px;
 }
+.audit-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12.5px;
+}
+.audit-table th {
+  text-align: left;
+  padding: 9px 12px;
+  color: var(--text-dim);
+  font-weight: 700;
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: var(--bg-elevated);
+  z-index: 1;
+}
+.audit-table td {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}
+.audit-table tr:last-child td {
+  border-bottom: none;
+}
+.audit-table tr:hover td {
+  background: color-mix(in srgb, var(--text-dim) 10%, transparent);
+}
+.audit-badge {
+  display: inline-block;
+  padding: 2px 9px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  border: 1px solid var(--border);
+  white-space: nowrap;
+}
+.audit-badge.accent {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+}
+.audit-badge.warn {
+  color: #f59e0b;
+  border-color: color-mix(in srgb, #f59e0b 45%, transparent);
+}
+.audit-badge.muted {
+  color: var(--text-dim);
+}
+.audit-ok {
+  color: #4ade80;
+}
+.audit-fail {
+  color: #f87171;
+}
 .dim {
   color: var(--text-dim);
 }