chore: bump version to 1.6.2

feat: clickable pills, configurable page size, CQRE.NET branding
- Service/category pills are now clickable: click to filter by that service - Result pills (Success, Failure, etc.) are now clickable: click to filter by that result - Click again to clear the filter (toggle behavior) - Change default page size from 100 to 25 - Add DEFAULT_PAGE_SIZE config (env var, default 25), exposed via /api/config/features - Change footer brand from CQRE to CQRE.NET - Add pill--clickable hover styles - Bump CSS cache-buster to v=10
2026-04-22 11:53:21 +02:00 · 2026-04-22 11:53:01 +02:00 · 2026-04-22 11:31:57 +02:00 · 2026-04-22 11:31:37 +02:00
6 changed files with 289 additions and 15 deletions
--- a/.env.example
+++ b/.env.example
@@ -55,6 +55,9 @@ LLM_API_VERSION=
 # For local dev, start Valkey with: docker run -d -p 6379:6379 valkey/valkey:8-alpine
 REDIS_URL=redis://localhost:6379/0

+# UI default page size (number of events shown per page)
+DEFAULT_PAGE_SIZE=25
+
 # Optional: privacy / access control
 # Hide entire services from users without PRIVACY_SERVICE_ROLES
 # PRIVACY_SERVICES=Exchange,Teams
--- a/2
+++ b/2
@@ -1 +1 @@
-1.6.0
+1.6.2
--- a/backend/config.py
+++ b/backend/config.py
@@ -60,6 +60,9 @@ class Settings(BaseSettings):
    # Redis (caching + async job queue)
    REDIS_URL: str = "redis://localhost:6379/0"

+    # UI defaults
+    DEFAULT_PAGE_SIZE: int = 25
+

 _settings = Settings()

@@ -100,3 +103,4 @@ PRIVACY_SENSITIVE_OPERATIONS = {o.strip() for o in _settings.PRIVACY_SENSITIVE_O
 PRIVACY_SERVICE_ROLES = {r.strip() for r in _settings.PRIVACY_SERVICE_ROLES.split(",") if r.strip()}

 REDIS_URL = _settings.REDIS_URL
+DEFAULT_PAGE_SIZE = _settings.DEFAULT_PAGE_SIZE
--- a/backend/frontend/index.html
+++ b/backend/frontend/index.html
@@ -4,23 +4,49 @@
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Admin Operations Center</title>
-  <link rel="stylesheet" href="/style.css?v=8" />
+  <link rel="stylesheet" href="/style.css?v=10" />
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script src="https://alcdn.msauth.net/browser/2.37.0/js/msal-browser.min.js" crossorigin="anonymous"></script>
 </head>
 <body>
  <div class="page" x-data="aocApp()" x-init="initApp()">
+    <nav class="topbar">
+      <div class="topbar__brand">
+        <span class="topbar__logo">🔍</span>
+        <span class="topbar__name">AOC</span>
+        <span class="version-badge" x-text="appVersion"></span>
+      </div>
+      <div class="topbar__links">
+        <a :href="repoUrl" target="_blank" rel="noopener">Repository</a>
+        <a :href="docsUrl" target="_blank" rel="noopener">Docs</a>
+      </div>
+      <div class="topbar__meta">
+        <template x-if="account">
+          <div class="user-chip">
+            <div class="user-avatar" x-text="(account.name || account.username || '?').charAt(0).toUpperCase()"></div>
+            <div class="user-details">
+              <span class="user-name" x-text="account.name || account.username || ''"></span>
+              <span class="user-email" x-text="account.username || ''"></span>
+            </div>
+          </div>
+        </template>
+        <template x-if="!account && authConfig?.auth_enabled">
+          <span class="login-hint">Not signed in</span>
+        </template>
+      </div>
+      <div class="topbar__actions">
+        <button id="fetchBtn" class="ghost btn--compact" aria-label="Fetch latest audit logs" @click="fetchLogs()">Fetch</button>
+        <button id="refreshBtn" class="ghost btn--compact" aria-label="Refresh events" @click="loadEvents(currentCursor)">Refresh</button>
+        <button id="authBtn" class="ghost btn--compact" aria-label="Login" x-text="authBtnText" @click="toggleAuth()"></button>
+      </div>
+    </nav>
+
    <header class="hero">
      <div>
-        <p class="eyebrow">Admin Operations Center <span class="version-badge" x-text="appVersion"></span></p>
+        <p class="eyebrow">Admin Operations Center</p>
        <h1>Audit Log Explorer</h1>
        <p class="lede">Search and review Microsoft audit events from Entra, Intune, Exchange, SharePoint, and Teams.</p>
      </div>
-      <div class="cta">
-        <button id="authBtn" class="ghost" aria-label="Login" x-text="authBtnText" @click="toggleAuth()"></button>
-        <button id="fetchBtn" aria-label="Fetch latest audit logs" @click="fetchLogs()">Fetch new</button>
-        <button id="refreshBtn" aria-label="Refresh events" @click="loadEvents(currentCursor)">Refresh</button>
-      </div>
    </header>

    <section class="panel">
@@ -158,8 +184,8 @@
              <template x-for="(evt, idx) in askEvents" :key="evt.id || idx">
                <article class="event event--compact">
                  <div class="event__meta">
-                    <span class="pill" x-text="evt.display_category || evt.service || '—'"></span>
-                    <span class="pill" :class="['success','succeeded','ok','passed','true'].includes((evt.result || '').toLowerCase()) ? 'pill--ok' : 'pill--warn'" x-text="evt.result || '—'"></span>
+                    <span class="pill pill--clickable" x-text="evt.display_category || evt.service || '—'" @click="filterByService(evt.service || evt.display_category)" title="Filter by this service"></span>
+                    <span class="pill pill--clickable" :class="['success','succeeded','ok','passed','true'].includes((evt.result || '').toLowerCase()) ? 'pill--ok' : 'pill--warn'" x-text="evt.result || '—'" @click="filterByResult(evt.result)" title="Filter by this result"></span>
                  </div>
                  <h3 x-text="evt.operation || '—'"></h3>
                  <p class="event__detail" x-show="evt.display_summary"><strong>Summary:</strong> <span x-text="evt.display_summary"></span></p>
@@ -185,8 +211,8 @@
        <template x-for="(evt, idx) in events" :key="evt._id || evt.id || idx">
          <article class="event">
            <div class="event__meta">
-              <span class="pill" x-text="evt.display_category || evt.service || '—'"></span>
-              <span class="pill" :class="['success','succeeded','ok','passed','true'].includes((evt.result || '').toLowerCase()) ? 'pill--ok' : 'pill--warn'" x-text="evt.result || '—'"></span>
+              <span class="pill pill--clickable" x-text="evt.display_category || evt.service || '—'" @click="filterByService(evt.service || evt.display_category)" title="Filter by this service"></span>
+              <span class="pill pill--clickable" :class="['success','succeeded','ok','passed','true'].includes((evt.result || '').toLowerCase()) ? 'pill--ok' : 'pill--warn'" x-text="evt.result || '—'" @click="filterByResult(evt.result)" title="Filter by this result"></span>
            </div>
            <h3 x-text="evt.operation || '—'"></h3>
            <p class="event__detail" x-show="evt.display_summary"><strong>Summary:</strong> <span x-text="evt.display_summary"></span></p>
@@ -239,6 +265,21 @@
        <pre id="modalBody" x-text="modalBody"></pre>
      </div>
    </div>
+
+    <footer class="footer">
+      <div class="footer__left">
+        <span class="footer__brand">Admin Operations Center</span>
+        <span class="footer__version" x-text="'v' + appVersion"></span>
+      </div>
+      <div class="footer__center">
+        <a :href="repoUrl + '/issues/new'" target="_blank" rel="noopener">🐛 Report an issue</a>
+        <a :href="repoUrl" target="_blank" rel="noopener">💻 Source code</a>
+        <a :href="docsUrl" target="_blank" rel="noopener">📖 Documentation</a>
+      </div>
+      <div class="footer__right">
+        <span>Built with ❤️ by CQRE.NET</span>
+      </div>
+    </footer>
  </div>

  <script>
@@ -264,11 +305,13 @@
        accessToken: null,
        authScopes: [],
        filters: {
-          actor: '', selectedServices: [], search: '', operation: '', result: '', start: '', end: '', limit: 100, includeTags: '', excludeTags: '',
+          actor: '', selectedServices: [], search: '', operation: '', result: '', start: '', end: '', limit: 25, includeTags: '', excludeTags: '',
        },
        options: { actors: [], services: [], operations: [], results: [] },
        savedSearches: [],
        appVersion: '',
+        repoUrl: 'https://git.cqre.net/cqrenet/aoc',
+        docsUrl: 'https://git.cqre.net/cqrenet/aoc/src/branch/main/README.md',
        aiFeaturesEnabled: true,
        askQuestionText: '',
        askLoading: false,
@@ -353,6 +396,9 @@
            if (featRes.ok) {
              const featBody = await featRes.json();
              this.aiFeaturesEnabled = featBody.ai_features_enabled !== false;
+              if (featBody.default_page_size) {
+                this.filters.limit = featBody.default_page_size;
+              }
            } else {
              this.aiFeaturesEnabled = true;
            }
@@ -618,7 +664,27 @@

        clearFilters() {
          const noisy = ['Exchange', 'SharePoint', 'Teams'];
-          this.filters = { actor: '', selectedServices: this.options.services.filter((s) => !noisy.includes(s)), search: '', operation: '', result: '', start: '', end: '', limit: 100, includeTags: '', excludeTags: '' };
+          this.filters = { actor: '', selectedServices: this.options.services.filter((s) => !noisy.includes(s)), search: '', operation: '', result: '', start: '', end: '', limit: 25, includeTags: '', excludeTags: '' };
+          this.saveFilters();
+          this.resetPagination();
+          this.loadEvents();
+        },
+
+        filterByService(service) {
+          if (!service) return;
+          if (!this.filters.selectedServices.includes(service)) {
+            this.filters.selectedServices = [service];
+          } else {
+            this.filters.selectedServices = this.filters.selectedServices.filter((s) => s !== service);
+          }
+          this.saveFilters();
+          this.resetPagination();
+          this.loadEvents();
+        },
+
+        filterByResult(result) {
+          if (!result) return;
+          this.filters.result = this.filters.result === result ? '' : result;
          this.saveFilters();
          this.resetPagination();
          this.loadEvents();
--- a/backend/frontend/style.css
+++ b/backend/frontend/style.css
@@ -28,7 +28,115 @@ body {
 .page {
  max-width: 1100px;
  margin: 0 auto;
-  padding: 32px 20px 60px;
+  padding: 0 20px 40px;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 0;
+  margin-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+
+.topbar__brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.topbar__logo {
+  font-size: 20px;
+}
+
+.topbar__links {
+  display: flex;
+  gap: 16px;
+  margin-right: auto;
+}
+
+.topbar__links a {
+  color: var(--muted);
+  font-size: 13px;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.15s ease;
+}
+
+.topbar__links a:hover {
+  color: var(--accent-strong);
+}
+
+.topbar__meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.user-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 4px 12px 4px 4px;
+}
+
+.user-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
+  color: #0b1220;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.user-details {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.user-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.user-email {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.login-hint {
+  font-size: 12px;
+  color: var(--muted);
+  font-style: italic;
+}
+
+.topbar__actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.btn--compact {
+  padding: 8px 14px;
+  font-size: 13px;
+  border-radius: 8px;
 }

 .hero {
@@ -37,6 +145,7 @@ body {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
+  padding-top: 16px;
 }

 .eyebrow {
@@ -246,6 +355,27 @@ input {
  border-color: rgba(239, 68, 68, 0.5);
 }

+.pill--clickable {
+  cursor: pointer;
+  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+
+.pill--clickable:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(125, 211, 252, 0.2);
+  background: rgba(125, 211, 252, 0.2);
+}
+
+.pill--clickable.pill--ok:hover {
+  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
+  background: rgba(34, 197, 94, 0.25);
+}
+
+.pill--clickable.pill--warn:hover {
+  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2);
+  background: rgba(249, 115, 22, 0.25);
+}
+
 .event h3 {
  margin: 0 0 6px;
  font-size: 17px;
@@ -508,7 +638,70 @@ input {
  gap: 4px;
 }

+.footer {
+  margin-top: auto;
+  padding: 20px 0;
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.footer__left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.footer__brand {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.footer__version {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(125, 211, 252, 0.1);
+  border: 1px solid rgba(125, 211, 252, 0.2);
+  color: var(--accent-strong);
+}
+
+.footer__center {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.footer__center a {
+  color: var(--muted);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.footer__center a:hover {
+  color: var(--accent-strong);
+}
+
+.footer__right {
+  font-size: 12px;
+}
+
@media (max-width: 640px) {
+  .topbar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .topbar__links {
+    margin-right: 0;
+  }
+
  .hero {
    flex-direction: column;
  }
@@ -522,4 +715,10 @@ input {
    flex-direction: column;
    align-items: stretch;
  }
+
+  .footer {
+    flex-direction: column;
+    text-align: center;
+    gap: 10px;
+  }
 }
--- a/backend/routes/config.py
+++ b/backend/routes/config.py
@@ -4,6 +4,7 @@ from config import (
    AUTH_ENABLED,
    AUTH_SCOPE,
    AUTH_TENANT_ID,
+    DEFAULT_PAGE_SIZE,
 )
 from fastapi import APIRouter

@@ -25,4 +26,5 @@ def auth_config():
 def features_config():
    return {
        "ai_features_enabled": AI_FEATURES_ENABLED,
+        "default_page_size": DEFAULT_PAGE_SIZE,
    }
Author	SHA1	Message	Date
Tomas Kracmar	ed7465f5cd	chore: bump version to 1.6.2 All checks were successful Release / build-and-push (push) Successful in 1m33s Details CI / lint-and-test (push) Successful in 33s Details	2026-04-22 11:53:21 +02:00
Tomas Kracmar	0eebcd0765	feat: clickable pills, configurable page size, CQRE.NET branding - Service/category pills are now clickable: click to filter by that service - Result pills (Success, Failure, etc.) are now clickable: click to filter by that result - Click again to clear the filter (toggle behavior) - Change default page size from 100 to 25 - Add DEFAULT_PAGE_SIZE config (env var, default 25), exposed via /api/config/features - Change footer brand from CQRE to CQRE.NET - Add pill--clickable hover styles - Bump CSS cache-buster to v=10	2026-04-22 11:53:01 +02:00
Tomas Kracmar	67f3c28e82	chore: bump version to 1.6.1 All checks were successful CI / lint-and-test (push) Successful in 32s Details Release / build-and-push (push) Successful in 1m30s Details	2026-04-22 11:31:57 +02:00
Tomas Kracmar	04c41ee740	style: UI polish — topbar, footer, user info, product feel - Add sticky top navigation bar with brand, repo/docs links, user chip - Show logged-in user name + email from MSAL account - Add footer with version, issue link, repo link, docs link - Move action buttons (Fetch/Refresh/Login) to compact topbar - Clean up hero section (removed buttons, just title + tagline) - Bump CSS cache-buster to v=9 - Responsive stacking for mobile	2026-04-22 11:31:37 +02:00
@@ -1 +1 @@
 .6.0
 .6.2