scalytics · novatechflow · Mar 22, 2026 · Mar 22, 2026 · Mar 22, 2026 · Mar 22, 2026
diff --git a/Dockerfile b/Dockerfile
@@ -16,6 +16,7 @@ FROM caddy:2.10-alpine
 
 COPY docker/Caddyfile /etc/caddy/Caddyfile
 COPY --from=build /app/dist /srv
+COPY --from=build /app/mobile/manifest.json /srv/mobile/manifest.json
 
 EXPOSE 80 443
 

diff --git a/docker/Caddyfile b/docker/Caddyfile
@@ -143,6 +143,16 @@
 		}
 	}
 
+	@mobile_bare path /m
+	redir @mobile_bare /m/ permanent
+
+	handle /m/* {
+		uri strip_prefix /m
+		root * /srv
+		try_files {path} /mobile/index.html
+		file_server
+	}
+
 	handle {
 		try_files {path} /index.html
 		file_server

diff --git a/mobile/index.html b/mobile/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon-shield.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="theme-color" content="#030610" />
+    <link rel="manifest" href="/mobile/manifest.json" />
+    <title>EUOSINT</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/mobile/main.tsx"></script>
+  </body>
+</html>
diff --git a/mobile/manifest.json b/mobile/manifest.json
@@ -0,0 +1,16 @@
+{
+  "name": "EUOSINT",
+  "short_name": "EUOSINT",
+  "description": "Open-Source Intelligence Monitor",
+  "start_url": "/m/",
+  "display": "standalone",
+  "background_color": "#030610",
+  "theme_color": "#030610",
+  "icons": [
+    {
+      "src": "/favicon-shield.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    }
+  ]
+}
diff --git a/src/components/AlertDetail.tsx b/src/components/AlertDetail.tsx
@@ -79,9 +79,10 @@ export function AlertDetail({ alert, onClose }: Props) {
         </h2>
         <button
           onClick={onClose}
-          className="p-1 rounded hover:bg-siem-accent/12 hover:text-siem-accent text-siem-muted transition-colors"
+          className="p-2 -mr-1 rounded-lg active:bg-siem-accent/12 active:text-siem-accent text-siem-muted transition-colors"
+          style={{ WebkitTapHighlightColor: "transparent", minWidth: 44, minHeight: 44, display: "flex", alignItems: "center", justifyContent: "center" }}
         >
-          <X size={14} />
+          <X size={18} />
         </button>
       </div>
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
@@ -239,7 +240,8 @@ export function AlertDetail({ alert, onClose }: Props) {
           href={alert.canonical_url}
           target="_blank"
           rel="noopener noreferrer"
-          className="flex items-center justify-center gap-2 w-full py-3 px-4 bg-siem-accent hover:bg-siem-accent/80 text-white font-bold text-sm rounded-lg transition-colors"
+          className="flex items-center justify-center gap-2 w-full py-3.5 px-4 bg-siem-accent active:bg-siem-accent/80 text-white font-bold text-sm rounded-lg transition-colors"
+          style={{ WebkitTapHighlightColor: "transparent", minHeight: 48, touchAction: "manipulation" }}
         >
           <ExternalLink size={16} />
           GO TO OFFICIAL ALERT

diff --git a/src/components/AlertFeed.tsx b/src/components/AlertFeed.tsx
@@ -829,16 +829,18 @@ export function AlertFeed({
                 </div>
               )}
 
-              <div>
-                <div className="text-xs uppercase tracking-[0.14em] text-siem-muted">Violence / focus</div>
-                <div className="mt-1 flex flex-wrap gap-1.5">
-                  {activeConflictBrief.violenceTypes.map((item) => (
-                    <span key={item} className="inline-flex items-center gap-1 rounded-full border border-siem-border bg-white/5 px-2 py-1 text-xs text-siem-text">
-                      {item}
-                    </span>
-                  ))}
+              {activeConflictBrief.violenceTypes.length > 0 && (
+                <div>
+                  <div className="text-xs uppercase tracking-[0.14em] text-siem-muted">Violence / focus</div>
+                  <div className="mt-1 flex flex-wrap gap-1.5">
+                    {activeConflictBrief.violenceTypes.map((item) => (
+                      <span key={item} className="inline-flex items-center gap-1 rounded-full border border-siem-border bg-white/5 px-2 py-1 text-xs text-siem-text">
+                        {item}
+                      </span>
+                    ))}
+                  </div>
                 </div>
-              </div>
+              )}
 
               {activeConflictBrief.latestAlert && (
                 <button

diff --git a/src/hooks/useAlerts.ts b/src/hooks/useAlerts.ts
@@ -4,7 +4,7 @@
  * See NOTICE for provenance and LICENSE for repository-local terms.
  */
 
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Alert } from "@/types/alert";
 import { appURL } from "@/lib/app-url";
 
@@ -42,6 +42,8 @@ export function useAlerts() {
   const [alerts, setAlerts] = useState<Alert[]>([]);
   const [isLive, setIsLive] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const loadRef = useRef<() => Promise<void>>(undefined);
 
   useEffect(() => {
     let cancelled = false;
@@ -74,8 +76,9 @@ export function useAlerts() {
       }
     }
 
+    loadRef.current = load;
     load();
-    const interval = setInterval(load, POLL_MS);
+    intervalRef.current = setInterval(load, POLL_MS);
     const onFocus = () => load();
     const onVisible = () => {
       if (document.visibilityState === "visible") load();
@@ -85,13 +88,20 @@ export function useAlerts() {
 
     return () => {
       cancelled = true;
-      clearInterval(interval);
+      if (intervalRef.current) clearInterval(intervalRef.current);
       window.removeEventListener("focus", onFocus);
       document.removeEventListener("visibilitychange", onVisible);
     };
   }, []);
 
+  const refetch = useCallback(() => {
+    // Trigger immediate fetch and reset the poll timer
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    loadRef.current?.();
+    intervalRef.current = setInterval(() => loadRef.current?.(), POLL_MS);
+  }, []);
+
   const sourceCount = useMemo(() => new Set(alerts.map((a) => a.source_id)).size, [alerts]);
 
-  return { alerts, isLive, isLoading, sourceCount };
+  return { alerts, isLive, isLoading, sourceCount, refetch };
 }
diff --git a/src/index.css b/src/index.css
@@ -6,56 +6,7 @@
 
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600&display=swap");
 @import "tailwindcss";
-
-@theme {
-  /* ── Relative type scale (scales with html font-size) ──────────── */
-  --font-size-4xs: 0.615rem;   /* ~8px at 13px root  */
-  --font-size-3xs: 0.692rem;   /* ~9px at 13px root  */
-  --font-size-2xs: 0.77rem;    /* ~10px at 13px root */
-  --font-size-xxs: 0.846rem;   /* ~11px at 13px root */
-
-  /* ── Brand ──────────────────────────────────────────────────────── */
-  --color-siem-bg: #070E1A;
-  --color-siem-panel: #0b1120;
-  --color-siem-panel-strong: #131d2e;
-  --color-siem-border: #1e293b;
-  --color-siem-text: #e6edf5;
-  --color-siem-muted: #5A7B95;
-  --color-siem-accent: #E8630A;
-  --color-siem-accent-strong: #FF8533;
-  --color-siem-neutral: #9ca3af;
-
-  /* ── Severity ───────────────────────────────────────────────────── */
-  --color-siem-critical: #ff5d5d;
-  --color-siem-high: #f29d4b;
-  --color-siem-medium: #e3c867;
-  --color-siem-low: #4ccb8d;
-  --color-siem-info: #60a5fa;
-
-  /* ── Category ───────────────────────────────────────────────────── */
-  --color-cat-informational: #60a5fa;
-  --color-cat-cyber: #3b82f6;
-  --color-cat-education: #4f95a4;
-  --color-cat-humanitarian: #2f8c8c;
-  --color-cat-conflict: #725f95;
-  --color-cat-humsec: #3a7395;
-  --color-cat-wanted: #a14a5b;
-  --color-cat-missing: #aa8b43;
-  --color-cat-appeal: #5577a4;
-  --color-cat-fraud: #338c66;
-  --color-cat-safety: #5b6887;
-  --color-cat-terrorism: #a34c4c;
-  --color-cat-private: #8f6a46;
-  --color-cat-travel: #c27a3a;
-  --color-cat-health: #4ca38c;
-  --color-cat-intel: #7a6eab;
-  --color-cat-emergency: #b85c4a;
-  --color-cat-environment: #4a8b6e;
-  --color-cat-disease: #c45e8a;
-  --color-cat-maritime: #2a7a9b;
-  --color-cat-logistics: #8b6e4a;
-  --color-cat-legislative: #6b7f45;
-}
+@import "./theme.css";
 
 * {
   box-sizing: border-box;

diff --git a/src/lib/conflict-briefs.ts b/src/lib/conflict-briefs.ts
@@ -204,7 +204,7 @@ export function buildConflictBrief(alerts: Alert[], lens: ConflictLens | null):
       count: entry.count,
     })),
     actors: [],
-    violenceTypes: buildRankedList(categoryCounts, 3).map((entry) => entry.label),
+    violenceTypes: [],
     hotspots: deriveHotspots(lensAlerts, lens),
     latestAlert,
     recent7d,

diff --git a/src/main.tsx b/src/main.tsx
@@ -10,6 +10,16 @@ import "./index.css";
 import App from "./App.tsx";
 import { ErrorBoundary } from "@/components/ErrorBoundary";
 
+// Redirect mobile devices to the dedicated mobile app
+if (
+  /Android|iPhone|iPod/.test(navigator.userAgent) &&
+  window.innerWidth < 768 &&
+  !new URLSearchParams(location.search).has("desktop") &&
+  !document.cookie.includes("euosint_prefer_desktop")
+) {
+  location.replace("/m/");
+}
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ErrorBoundary>

diff --git a/src/mobile/MobileAlertCard.tsx b/src/mobile/MobileAlertCard.tsx
@@ -0,0 +1,43 @@
+import type { Alert } from "@/types/alert";
+import { severityColor } from "@/lib/severity";
+import { freshnessLabel, categoryLabels } from "@/lib/severity";
+
+interface Props {
+  alert: Alert;
+  onSelect: (alertId: string) => void;
+}
+
+const severityBadgeColor: Record<string, string> = {
+  critical: "#dc2626",
+  high: "#ef4444",
+  medium: "#f59e0b",
+  low: "#3b82f6",
+  info: "#64748b",
+};
+
+export function MobileAlertCard({ alert, onSelect }: Props) {
+  const sevColor = severityColor(alert.severity);
+  const badgeBg = severityBadgeColor[alert.severity] ?? "#64748b";
+
+  return (
+    <div className="mobile-alert-card" onClick={() => onSelect(alert.alert_id)}>
+      <div className="mobile-alert-sev" style={{ background: sevColor }} />
+      <div className="mobile-alert-body">
+        <div className="mobile-alert-title">{alert.title}</div>
+        <div className="mobile-alert-meta">
+          <span
+            className="mobile-alert-badge"
+            style={{ background: badgeBg }}
+          >
+            {alert.severity}
+          </span>
+          <span>{categoryLabels[alert.category] ?? alert.category}</span>
+          <span>&middot;</span>
+          <span>{freshnessLabel(alert.freshness_hours)}</span>
+          <span>&middot;</span>
+          <span className="truncate">{alert.source.authority_name}</span>
+        </div>
+      </div>
+    </div>
+  );
+}