@koendhoore/directus-extension-umami-analytics 1.0.0

package/README.md

@@ -0,0 +1,134 @@
+# Directus Umami Analytics Extension
+
+A small reusable Directus bundle for self-hosted Umami:
+
+- `umami-analytics` endpoint: server-side proxy to Umami, so your Umami credentials are never exposed in the browser.
+- `umami-analytics-panel` panel: native Directus Insights panel showing visitors, pageviews, visits, bounce rate, top pages, referrers, and events.
+
+This is intended for your setup:
+
+```text
+Nuxt websites -> analytics.koendhoore.be Umami -> Directus Insights panel
+```
+
+## 1. Required Directus environment variables
+
+Add these to the Directus instance that should show analytics.
+
+Recommended first version, one website per Directus instance:
+
+```env
+UMAMI_URL=https://analytics.koendhoore.be
+UMAMI_WEBSITE_ID=7a68c662-b142-45a8-81e1-a8be0c6ddf84
+UMAMI_USERNAME=directus-analytics
+UMAMI_PASSWORD=your-umami-password
+```
+
+Alternative, if you later find/create an Umami API token:
+
+```env
+UMAMI_URL=https://analytics.koendhoore.be
+UMAMI_WEBSITE_ID=7a68c662-b142-45a8-81e1-a8be0c6ddf84
+UMAMI_TOKEN=your-token
+```
+
+Do not put these values in the frontend/Nuxt app except the public tracking script and website id.
+
+## 2. Create a read-only Umami user
+
+In Umami, create a dedicated user if available, for example:
+
+```text
+directus-analytics
+```
+
+Give it access only to the website(s) needed for that client/project.
+
+For your personal Directus, it can use your own Umami user at first, but a dedicated user is safer.
+
+## 3. Install in Directus
+
+From this folder:
+
+```bash
+npm install
+npm run build
+```
+
+Then copy the built extension package into Directus extensions. The exact path depends on your deployment, but commonly:
+
+```text
+/directus/extensions/directus-extension-umami-analytics
+```
+
+Restart Directus.
+
+## 4. Test the endpoint
+
+Open this while logged into Directus:
+
+```text
+https://your-directus-domain.com/umami-analytics/health
+```
+
+Expected:
+
+```json
+{"ok":true,"service":"umami-analytics"}
+```
+
+Then test:
+
+```text
+https://your-directus-domain.com/umami-analytics/summary?days=30
+```
+
+Expected: JSON with `stats`, `pages`, `referrers`, and `events`.
+
+## 5. Add the Directus panel
+
+In Directus:
+
+```text
+Insights -> Create/Open Dashboard -> Add Panel -> Umami Analytics
+```
+
+Panel settings:
+
+- Leave `Umami Website ID` empty if this Directus instance has `UMAMI_WEBSITE_ID` in env.
+- Or paste a specific website ID for this panel.
+- Choose 7, 30, or 90 days.
+
+## 6. Multi-client recommendation
+
+For separate client Directus instances, install the same extension everywhere.
+
+Client A Directus:
+
+```env
+UMAMI_URL=https://analytics.koendhoore.be
+UMAMI_WEBSITE_ID=client-a-website-id
+UMAMI_USERNAME=directus-analytics-client-a
+UMAMI_PASSWORD=...
+```
+
+Client B Directus:
+
+```env
+UMAMI_URL=https://analytics.koendhoore.be
+UMAMI_WEBSITE_ID=client-b-website-id
+UMAMI_USERNAME=directus-analytics-client-b
+UMAMI_PASSWORD=...
+```
+
+Clients do not need direct Umami login. They only see their Directus dashboard.
+
+## Notes
+
+This first version uses Umami's private API paths:
+
+- `/api/auth/login`
+- `/api/websites/:id/stats`
+- `/api/websites/:id/metrics`
+
+If Umami changes these endpoints in a future release, only the Directus endpoint file needs updating.

package/dist/api.js

@@ -0,0 +1 @@
+const t=new Map;let e=null;function n(t,e){const n=t[e];if(!n)throw new Error(`Missing ${e}`);return n.replace(/\/$/,"")}function r(t,e){const n=Number(t);return Number.isFinite(n)?n:e}async function a(t,r){const a=n(t,"UMAMI_URL"),s=await async function(t){const r=t.UMAMI_TOKEN||t.UMAMI_API_KEY;if(r)return{headers:{Authorization:`Bearer ${r}`}};if(e&&e.expires>Date.now())return e.auth;const a=n(t,"UMAMI_URL"),s=n(t,"UMAMI_USERNAME"),o=n(t,"UMAMI_PASSWORD"),i=await fetch(`${a}/api/auth/login`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({username:s,password:o})});if(!i.ok){const t=await i.text();throw new Error(`Umami login failed: ${i.status} ${t}`)}const c=i.headers.get("set-cookie")||"";let u=null;try{u=await i.json()}catch{}const d=u?.token||u?.accessToken||u?.data?.token||u?.data?.accessToken,h=d?{headers:{Authorization:`Bearer ${d}`}}:{headers:c?{Cookie:c.split(";")[0]}:{}};return e={expires:Date.now()+33e5,auth:h},h}(t),o=await fetch(`${a}${r}`,{headers:{Accept:"application/json",...s.headers}});if(!o.ok){const t=await o.text();throw new Error(`Umami request failed: ${o.status} ${t}`)}return o.json()}function s(t,e,n,r,a=10){return`/api/websites/${t}/metrics?${new URLSearchParams({startAt:String(Math.round(n)),endAt:String(Math.round(r)),type:e,limit:String(a)}).toString()}`}const o=[],i=[{name:"umami-analytics",config:(e,n)=>{const o=n.env||process.env;e.get("/health",(t,e)=>{e.json({ok:!0,service:"umami-analytics"})}),e.get("/summary",async(e,n)=>{try{const i=String(e.query.websiteId||o.UMAMI_WEBSITE_ID||"");if(!i)return n.status(400).json({error:"Missing websiteId or UMAMI_WEBSITE_ID"});const{startAt:c,endAt:u,days:d}=function(t){const e=Date.now(),n=Math.max(1,Math.min(365,r(t.days,30))),a=r(t.endAt,e);return{startAt:r(t.startAt,a-24*n*60*60*1e3),endAt:a,days:n}}(e.query),h=`summary:${i}:${c}:${u}`,w=function(e){const n=t.get(e);return!n||n.expires<Date.now()?null:n.value}(h);if(w)return n.json(w);const A=new URLSearchParams({startAt:String(Math.round(c)),endAt:String(Math.round(u))}),[M,l,m,f]=await Promise.all([a(o,`/api/websites/${i}/stats?${A.toString()}`),a(o,s(i,"url",c,u,10)),a(o,s(i,"referrer",c,u,10)),a(o,s(i,"event",c,u,10)).catch(()=>[])]),g={websiteId:i,range:{startAt:c,endAt:u,days:d},stats:M,pages:l,referrers:m,events:f};!function(e,n,r=3e5){t.set(e,{expires:Date.now()+r,value:n})}(h,g),n.json(g)}catch(t){n.status(500).json({error:t.message||"Unknown error"})}})}}],c=[];export{i as endpoints,o as hooks,c as operations};

package/dist/app.js

@@ -0,0 +1 @@
+import{definePanel as e}from"@directus/extensions-sdk";import{defineComponent as n,ref as t,computed as a,onMounted as s,watch as r,openBlock as l,createElementBlock as i,toDisplayString as o,Fragment as d,createElementVNode as u,renderList as c}from"vue";const p={class:"umami-panel"},m={key:0,class:"state"},v={key:1,class:"state error"},f={class:"cards"},g={class:"card"},y={class:"card"},b={class:"card"},h={class:"card"},x={class:"grid"};var w=n({__name:"panel",props:{websiteId:{},days:{}},setup(e){const n=e,w=t(!0),k=t(""),I=t(null),_=a(()=>n.days||30);function A(e){return null==e?0:"number"==typeof e?e:"number"==typeof e.value?e.value:Number(e.value||e.count||e.y||0)}function E(e){const n=A(I.value?.stats?.[e]);return(new Intl.NumberFormat).format(n)}function S(e){const n=A(I.value?.stats?.[e]);return n?Math.round(100*n)/100+"%":"0%"}const D=a(()=>I.value?.pages||[]),L=a(()=>I.value?.referrers||[]),T=a(()=>I.value?.events||[]);async function j(){w.value=!0,k.value="";const e=new URLSearchParams({days:String(_.value)});n.websiteId&&e.set("websiteId",n.websiteId);try{const n=await fetch(`/umami-analytics/summary?${e.toString()}`,{credentials:"include",headers:{Accept:"application/json"}}),t=await n.json();if(!n.ok)throw new Error(t?.error||`Request failed: ${n.status}`);I.value=t}catch(e){k.value=e?.message||"Could not load analytics."}finally{w.value=!1}}return s(j),r(()=>[n.websiteId,n.days],j),(e,n)=>(l(),i("div",p,[w.value?(l(),i("div",m,"Loading analytics...")):k.value?(l(),i("div",v,o(k.value),1)):(l(),i(d,{key:2},[u("div",f,[u("div",g,[n[0]||(n[0]=u("span",null,"Visitors",-1)),u("strong",null,o(E("visitors")),1)]),u("div",y,[n[1]||(n[1]=u("span",null,"Pageviews",-1)),u("strong",null,o(E("pageviews")),1)]),u("div",b,[n[2]||(n[2]=u("span",null,"Visits",-1)),u("strong",null,o(E("visits")),1)]),u("div",h,[n[3]||(n[3]=u("span",null,"Bounce rate",-1)),u("strong",null,o(S("bounces")),1)])]),u("div",x,[u("section",null,[n[4]||(n[4]=u("h3",null,"Top pages",-1)),u("ul",null,[(l(!0),i(d,null,c(D.value,e=>(l(),i("li",{key:e.x||e.name},[u("span",null,o(e.x||e.name||"(unknown)"),1),u("b",null,o(e.y||e.value||e.count),1)]))),128))])]),u("section",null,[n[5]||(n[5]=u("h3",null,"Referrers",-1)),u("ul",null,[(l(!0),i(d,null,c(L.value,e=>(l(),i("li",{key:e.x||e.name},[u("span",null,o(e.x||e.name||"Direct"),1),u("b",null,o(e.y||e.value||e.count),1)]))),128))])]),u("section",null,[n[6]||(n[6]=u("h3",null,"Events",-1)),u("ul",null,[(l(!0),i(d,null,c(T.value,e=>(l(),i("li",{key:e.x||e.name},[u("span",null,o(e.x||e.name||"(event)"),1),u("b",null,o(e.y||e.value||e.count),1)]))),128))])])])],64))]))}}),k=[],I=[];!function(e,n){if(e&&"undefined"!=typeof document){var t,a=!0===n.prepend?"prepend":"append",s=!0===n.singleTag,r="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(s){var l=k.indexOf(r);-1===l&&(l=k.push(r)-1,I[l]={}),t=I[l]&&I[l][a]?I[l][a]:I[l][a]=i()}else t=i();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function i(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var t=Object.keys(n.attributes),s=0;s<t.length;s++)e.setAttribute(t[s],n.attributes[t[s]]);var l="prepend"===a?"afterbegin":"beforeend";return r.insertAdjacentElement(l,e),e}}("\n.umami-panel[data-v-062f2277] {\n  padding: 16px;\n  height: 100%;\n  overflow: auto;\n}\n.state[data-v-062f2277] {\n  padding: 16px;\n  color: var(--theme--foreground-subdued);\n}\n.error[data-v-062f2277] {\n  color: var(--theme--danger);\n}\n.cards[data-v-062f2277] {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 12px;\n  margin-bottom: 18px;\n}\n.card[data-v-062f2277] {\n  border: var(--theme--border-width) solid var(--theme--border-color);\n  border-radius: var(--theme--border-radius);\n  padding: 14px;\n  background: var(--theme--background-normal);\n}\n.card span[data-v-062f2277] {\n  display: block;\n  color: var(--theme--foreground-subdued);\n  font-size: 12px;\n  margin-bottom: 6px;\n}\n.card strong[data-v-062f2277] {\n  font-size: 24px;\n  line-height: 1;\n}\n.grid[data-v-062f2277] {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 18px;\n}\nh3[data-v-062f2277] {\n  margin: 0 0 8px;\n  font-size: 14px;\n}\nul[data-v-062f2277] {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\nli[data-v-062f2277] {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 7px 0;\n  border-bottom: 1px solid var(--theme--border-color-subdued);\n}\nli span[data-v-062f2277] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\nli b[data-v-062f2277] {\n  flex: 0 0 auto;\n}\n@media (max-width: 900px) {\n.cards[data-v-062f2277],\n  .grid[data-v-062f2277] {\n    grid-template-columns: 1fr;\n}\n}\n",{});const _=[],A=[],E=[],S=[],D=[e({id:"umami-analytics-panel",name:"Umami Analytics",icon:"monitoring",description:"Native Directus panel for Umami visitors, pageviews, top pages, referrers, and events.",component:((e,n)=>{const t=e.__vccOpts||e;for(const[e,a]of n)t[e]=a;return t})(w,[["__scopeId","data-v-062f2277"]]),options:[{field:"websiteId",name:"Umami Website ID",type:"string",meta:{width:"full",interface:"input",note:"Optional. Leave empty to use UMAMI_WEBSITE_ID from the Directus environment."}},{field:"days",name:"Date Range",type:"integer",schema:{default_value:30},meta:{width:"half",interface:"select-dropdown",options:{choices:[{text:"Last 7 days",value:7},{text:"Last 30 days",value:30},{text:"Last 90 days",value:90}]}}}],minWidth:18,minHeight:12})],L=[],T=[];export{A as displays,_ as interfaces,E as layouts,S as modules,T as operations,D as panels,L as themes};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@koendhoore/directus-extension-umami-analytics",
+  "version": "1.0.0",
+  "description": "Directus bundle: secure Umami proxy endpoint + native Insights analytics panel.",
+  "type": "module",
+  "license": "MIT",
+  "scripts": {
+    "build": "directus-extension build",
+    "dev": "directus-extension build --watch",
+    "add": "directus-extension add"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@directus/extensions-sdk": "latest",
+    "typescript": "latest",
+    "vue": "latest"
+  },
+  "directus:extension": {
+    "type": "bundle",
+    "path": {
+      "app": "dist/app.js",
+      "api": "dist/api.js"
+    },
+    "entries": [
+      {
+        "type": "endpoint",
+        "name": "umami-analytics",
+        "source": "src/umami-analytics-endpoint/index.ts"
+      },
+      {
+        "type": "panel",
+        "name": "umami-analytics-panel",
+        "source": "src/umami-analytics-panel/index.ts"
+      }
+    ],
+    "host": "^11.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as umamiAnalyticsEndpoint } from './umami-analytics-endpoint/index';
+export { default as umamiAnalyticsPanel } from './umami-analytics-panel/index';

package/src/umami-analytics-endpoint/index.ts

@@ -0,0 +1,139 @@
+type Env = Record<string, string | undefined>;
+
+type UmamiAuth = {
+  headers: Record<string, string>;
+  cookie?: string;
+};
+
+const FIVE_MINUTES = 5 * 60 * 1000;
+const cache = new Map<string, { expires: number; value: unknown }>();
+let authCache: { expires: number; auth: UmamiAuth } | null = null;
+
+function required(env: Env, key: string): string {
+  const value = env[key];
+  if (!value) throw new Error(`Missing ${key}`);
+  return value.replace(/\/$/, '');
+}
+
+function numberParam(value: unknown, fallback: number) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+function getRange(query: Record<string, unknown>) {
+  const now = Date.now();
+  const days = Math.max(1, Math.min(365, numberParam(query.days, 30)));
+  const endAt = numberParam(query.endAt, now);
+  const startAt = numberParam(query.startAt, endAt - days * 24 * 60 * 60 * 1000);
+  return { startAt, endAt, days };
+}
+
+function cached<T>(key: string): T | null {
+  const hit = cache.get(key);
+  if (!hit || hit.expires < Date.now()) return null;
+  return hit.value as T;
+}
+
+function setCached(key: string, value: unknown, ttlMs = FIVE_MINUTES) {
+  cache.set(key, { expires: Date.now() + ttlMs, value });
+}
+
+async function getAuth(env: Env): Promise<UmamiAuth> {
+  const token = env.UMAMI_TOKEN || env.UMAMI_API_KEY;
+  if (token) return { headers: { Authorization: `Bearer ${token}` } };
+
+  if (authCache && authCache.expires > Date.now()) return authCache.auth;
+
+  const baseUrl = required(env, 'UMAMI_URL');
+  const username = required(env, 'UMAMI_USERNAME');
+  const password = required(env, 'UMAMI_PASSWORD');
+
+  const response = await fetch(`${baseUrl}/api/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ username, password }),
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(`Umami login failed: ${response.status} ${text}`);
+  }
+
+  const setCookie = response.headers.get('set-cookie') || '';
+  let json: any = null;
+  try {
+    json = await response.json();
+  } catch {
+    // Some Umami versions rely on cookies only.
+  }
+
+  const bearer = json?.token || json?.accessToken || json?.data?.token || json?.data?.accessToken;
+  const auth: UmamiAuth = bearer
+    ? { headers: { Authorization: `Bearer ${bearer}` } }
+    : { headers: setCookie ? { Cookie: setCookie.split(';')[0] } : {} };
+
+  authCache = { expires: Date.now() + 55 * 60 * 1000, auth };
+  return auth;
+}
+
+async function umamiGet(env: Env, path: string) {
+  const baseUrl = required(env, 'UMAMI_URL');
+  const auth = await getAuth(env);
+  const response = await fetch(`${baseUrl}${path}`, {
+    headers: {
+      Accept: 'application/json',
+      ...auth.headers,
+    },
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(`Umami request failed: ${response.status} ${text}`);
+  }
+
+  return response.json();
+}
+
+function metricPath(websiteId: string, type: string, startAt: number, endAt: number, limit = 10) {
+  const params = new URLSearchParams({
+    startAt: String(Math.round(startAt)),
+    endAt: String(Math.round(endAt)),
+    type,
+    limit: String(limit),
+  });
+  return `/api/websites/${websiteId}/metrics?${params.toString()}`;
+}
+
+export default (router: any, context: any) => {
+  const env: Env = context.env || process.env;
+
+  router.get('/health', (_req: any, res: any) => {
+    res.json({ ok: true, service: 'umami-analytics' });
+  });
+
+  router.get('/summary', async (req: any, res: any) => {
+    try {
+      const websiteId = String(req.query.websiteId || env.UMAMI_WEBSITE_ID || '');
+      if (!websiteId) return res.status(400).json({ error: 'Missing websiteId or UMAMI_WEBSITE_ID' });
+
+      const { startAt, endAt, days } = getRange(req.query);
+      const key = `summary:${websiteId}:${startAt}:${endAt}`;
+      const hit = cached(key);
+      if (hit) return res.json(hit);
+
+      const params = new URLSearchParams({ startAt: String(Math.round(startAt)), endAt: String(Math.round(endAt)) });
+      const [stats, pages, referrers, events] = await Promise.all([
+        umamiGet(env, `/api/websites/${websiteId}/stats?${params.toString()}`),
+        umamiGet(env, metricPath(websiteId, 'url', startAt, endAt, 10)),
+        umamiGet(env, metricPath(websiteId, 'referrer', startAt, endAt, 10)),
+        umamiGet(env, metricPath(websiteId, 'event', startAt, endAt, 10)).catch(() => []),
+      ]);
+
+      const payload = { websiteId, range: { startAt, endAt, days }, stats, pages, referrers, events };
+      setCached(key, payload);
+      res.json(payload);
+    } catch (error: any) {
+      res.status(500).json({ error: error.message || 'Unknown error' });
+    }
+  });
+};

package/src/umami-analytics-panel/index.ts

@@ -0,0 +1,41 @@
+import { definePanel } from '@directus/extensions-sdk';
+import PanelComponent from './panel.vue';
+
+export default definePanel({
+  id: 'umami-analytics-panel',
+  name: 'Umami Analytics',
+  icon: 'monitoring',
+  description: 'Native Directus panel for Umami visitors, pageviews, top pages, referrers, and events.',
+  component: PanelComponent,
+  options: [
+    {
+      field: 'websiteId',
+      name: 'Umami Website ID',
+      type: 'string',
+      meta: {
+        width: 'full',
+        interface: 'input',
+        note: 'Optional. Leave empty to use UMAMI_WEBSITE_ID from the Directus environment.',
+      },
+    },
+    {
+      field: 'days',
+      name: 'Date Range',
+      type: 'integer',
+      schema: { default_value: 30 },
+      meta: {
+        width: 'half',
+        interface: 'select-dropdown',
+        options: {
+          choices: [
+            { text: 'Last 7 days', value: 7 },
+            { text: 'Last 30 days', value: 30 },
+            { text: 'Last 90 days', value: 90 },
+          ],
+        },
+      },
+    },
+  ],
+  minWidth: 18,
+  minHeight: 12,
+});

package/src/umami-analytics-panel/panel.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="umami-panel">
+    <div v-if="loading" class="state">Loading analytics...</div>
+    <div v-else-if="error" class="state error">{{ error }}</div>
+    <template v-else>
+      <div class="cards">
+        <div class="card">
+          <span>Visitors</span>
+          <strong>{{ stat('visitors') }}</strong>
+        </div>
+        <div class="card">
+          <span>Pageviews</span>
+          <strong>{{ stat('pageviews') }}</strong>
+        </div>
+        <div class="card">
+          <span>Visits</span>
+          <strong>{{ stat('visits') }}</strong>
+        </div>
+        <div class="card">
+          <span>Bounce rate</span>
+          <strong>{{ percentStat('bounces') }}</strong>
+        </div>
+      </div>
+
+      <div class="grid">
+        <section>
+          <h3>Top pages</h3>
+          <ul>
+            <li v-for="row in pages" :key="row.x || row.name">
+              <span>{{ row.x || row.name || '(unknown)' }}</span>
+              <b>{{ row.y || row.value || row.count }}</b>
+            </li>
+          </ul>
+        </section>
+
+        <section>
+          <h3>Referrers</h3>
+          <ul>
+            <li v-for="row in referrers" :key="row.x || row.name">
+              <span>{{ row.x || row.name || 'Direct' }}</span>
+              <b>{{ row.y || row.value || row.count }}</b>
+            </li>
+          </ul>
+        </section>
+
+        <section>
+          <h3>Events</h3>
+          <ul>
+            <li v-for="row in events" :key="row.x || row.name">
+              <span>{{ row.x || row.name || '(event)' }}</span>
+              <b>{{ row.y || row.value || row.count }}</b>
+            </li>
+          </ul>
+        </section>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+
+const props = defineProps<{
+  websiteId?: string;
+  days?: number;
+}>();
+
+const loading = ref(true);
+const error = ref('');
+const data = ref<any>(null);
+
+const days = computed(() => props.days || 30);
+
+function valueOfMetric(metric: any) {
+  if (metric == null) return 0;
+  if (typeof metric === 'number') return metric;
+  if (typeof metric.value === 'number') return metric.value;
+  return Number(metric.value || metric.count || metric.y || 0);
+}
+
+function stat(key: string) {
+  const value = valueOfMetric(data.value?.stats?.[key]);
+  return new Intl.NumberFormat().format(value);
+}
+
+function percentStat(key: string) {
+  const value = valueOfMetric(data.value?.stats?.[key]);
+  if (!value) return '0%';
+  return `${Math.round(value * 100) / 100}%`;
+}
+
+const pages = computed(() => data.value?.pages || []);
+const referrers = computed(() => data.value?.referrers || []);
+const events = computed(() => data.value?.events || []);
+
+async function load() {
+  loading.value = true;
+  error.value = '';
+
+  const params = new URLSearchParams({ days: String(days.value) });
+  if (props.websiteId) params.set('websiteId', props.websiteId);
+
+  try {
+    const response = await fetch(`/umami-analytics/summary?${params.toString()}`, {
+      credentials: 'include',
+      headers: { Accept: 'application/json' },
+    });
+
+    const json = await response.json();
+    if (!response.ok) throw new Error(json?.error || `Request failed: ${response.status}`);
+    data.value = json;
+  } catch (err: any) {
+    error.value = err?.message || 'Could not load analytics.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+watch(() => [props.websiteId, props.days], load);
+</script>
+
+<style scoped>
+.umami-panel {
+  padding: 16px;
+  height: 100%;
+  overflow: auto;
+}
+.state {
+  padding: 16px;
+  color: var(--theme--foreground-subdued);
+}
+.error {
+  color: var(--theme--danger);
+}
+.cards {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 18px;
+}
+.card {
+  border: var(--theme--border-width) solid var(--theme--border-color);
+  border-radius: var(--theme--border-radius);
+  padding: 14px;
+  background: var(--theme--background-normal);
+}
+.card span {
+  display: block;
+  color: var(--theme--foreground-subdued);
+  font-size: 12px;
+  margin-bottom: 6px;
+}
+.card strong {
+  font-size: 24px;
+  line-height: 1;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+h3 {
+  margin: 0 0 8px;
+  font-size: 14px;
+}
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 7px 0;
+  border-bottom: 1px solid var(--theme--border-color-subdued);
+}
+li span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+li b {
+  flex: 0 0 auto;
+}
+@media (max-width: 900px) {
+  .cards,
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>