From 7fb0ea974155a8dbc95ea4a37656570ef048fead Mon Sep 17 00:00:00 2001
From: Thomas Jung <thomas.jung@sap.com>
Date: Sat, 5 Sep 2026 17:07:15 -0400
Subject: [PATCH 1/8] feat(channels): add hub band with four navigation cards
 to /channels/ page

---
 .../ChannelsDirectory.hub-band.test.ts        | 38 +++++++++
 .../channels-directory/ChannelsDirectory.vue  | 85 +++++++++++++++++++
 2 files changed, 123 insertions(+)
 create mode 100644 hugo-apps/src/channels-directory/ChannelsDirectory.hub-band.test.ts

diff --git a/hugo-apps/src/channels-directory/ChannelsDirectory.hub-band.test.ts b/hugo-apps/src/channels-directory/ChannelsDirectory.hub-band.test.ts
new file mode 100644
index 000000000..f4d72b3e7
--- /dev/null
+++ b/hugo-apps/src/channels-directory/ChannelsDirectory.hub-band.test.ts
@@ -0,0 +1,38 @@
+// @vitest-environment happy-dom
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ChannelsDirectory from './ChannelsDirectory.vue';
+
+describe('ChannelsDirectory — hub band', () => {
+  const wrapper = () => mount(ChannelsDirectory, { props: { channels: [], collections: [] } });
+
+  it('renders four hub navigation cards', () => {
+    const links = wrapper().findAll('.channels-hub-band__cards a');
+    expect(links).toHaveLength(4);
+  });
+
+  it('card hrefs include atlas, health, and media-diet', () => {
+    const hrefs = wrapper().findAll('.channels-hub-band__cards a').map((l) => l.attributes('href'));
+    expect(hrefs).toContain('/channels/atlas/');
+    expect(hrefs).toContain('/channels/health/');
+    expect(hrefs).toContain('/channels/media-diet/');
+  });
+
+  it('hub band appears in DOM before the filter controls', () => {
+    const html = wrapper().html();
+    const hubPos = html.indexOf('channels-hub-band');
+    const ctrlPos = html.indexOf('channels-directory__controls');
+    expect(hubPos).toBeGreaterThan(-1);
+    expect(hubPos).toBeLessThan(ctrlPos);
+  });
+
+  it('each card has a title and an icon name', () => {
+    const cards = wrapper().findAll('.channels-hub-band__cards li');
+    expect(cards).toHaveLength(4);
+    for (const card of cards) {
+      expect(card.find('.hub-card__title').text()).toBeTruthy();
+      const icon = card.find('ui5-icon');
+      expect(icon.attributes('name')).toBeTruthy();
+    }
+  });
+});
diff --git a/hugo-apps/src/channels-directory/ChannelsDirectory.vue b/hugo-apps/src/channels-directory/ChannelsDirectory.vue
index e3e91392c..a70d64c8e 100644
--- a/hugo-apps/src/channels-directory/ChannelsDirectory.vue
+++ b/hugo-apps/src/channels-directory/ChannelsDirectory.vue
@@ -29,6 +29,43 @@ const cols = computed(() => visibleCollections(props.collections));
 
 <template>
   <div class="channels-directory">
+    <section class="channels-hub-band">
+      <p class="channels-hub-band__intro">
+        SAP developers consume content across dozens of surfaces — portals, docs,
+        YouTube channels, podcasts, GitHub orgs, and community spaces. This directory
+        maps that ecosystem so you can find the channels that fit your workflow.
+      </p>
+      <ul class="channels-hub-band__cards">
+        <li>
+          <a href="/channels/atlas/" class="hub-card">
+            <ui5-icon name="org-chart" class="hub-card__icon"></ui5-icon>
+            <span class="hub-card__title">Channel Atlas</span>
+            <span class="hub-card__desc">Visual map of the full ecosystem</span>
+          </a>
+        </li>
+        <li>
+          <a href="/channels/crosswalk/" class="hub-card">
+            <ui5-icon name="chain-link" class="hub-card__icon"></ui5-icon>
+            <span class="hub-card__title">Learn ↔ Follow</span>
+            <span class="hub-card__desc">Tutorial topics to channels crosswalk</span>
+          </a>
+        </li>
+        <li>
+          <a href="/channels/health/" class="hub-card">
+            <ui5-icon name="sys-monitor" class="hub-card__icon"></ui5-icon>
+            <span class="hub-card__title">Ecosystem Health</span>
+            <span class="hub-card__desc">Active-vs-inactive and coverage radar</span>
+          </a>
+        </li>
+        <li>
+          <a href="/channels/media-diet/" class="hub-card">
+            <ui5-icon name="favorite" class="hub-card__icon"></ui5-icon>
+            <span class="hub-card__title">Build Your Media Diet</span>
+            <span class="hub-card__desc">Get a personalized channel bundle</span>
+          </a>
+        </li>
+      </ul>
+    </section>
     <section v-if="cols.length" class="channel-collections">
       <article v-for="col in cols" :key="col.slug" class="collection">
         <h2>{{ col.title }}</h2>
@@ -202,6 +239,54 @@ const cols = computed(() => visibleCollections(props.collections));
   background: var(--sapSuccessBackground, #e5f6e6);
 }
 
+/* --- Hub navigation band --- */
+.channels-hub-band {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.channels-hub-band__intro {
+  margin: 0;
+  color: var(--sapTextColor, #1d2d3e);
+  font-size: 1rem;
+}
+.channels-hub-band__cards {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: 0.75rem;
+}
+.hub-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.375rem;
+  padding: 1rem 1.125rem;
+  border: 1px solid var(--sapList_BorderColor, #d9d9d9);
+  border-radius: var(--sapElement_BorderCornerRadius, 0.75rem);
+  background: var(--sapGroup_ContentBackground, #fff);
+  text-decoration: none;
+  transition: box-shadow 0.12s;
+}
+.hub-card:hover {
+  box-shadow: var(--sapContent_Shadow1, 0 0 0.5rem rgba(0, 0, 0, 0.12));
+}
+.hub-card__icon {
+  font-size: 1.5rem;
+  color: var(--sapAccentColor6, #0064d9);
+}
+.hub-card__title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--sapLinkColor, #0070f2);
+}
+.hub-card__desc {
+  font-size: 0.875rem;
+  color: var(--sapNeutralTextColor, #556b82);
+}
+
 @media (max-width: 640px) {
   .channels-directory__count {
     margin-left: 0;

From f69d6fb6866c27a6aad7bf68a0a906975add75d6 Mon Sep 17 00:00:00 2001
From: Thomas Jung <thomas.jung@sap.com>
Date: Sat, 5 Sep 2026 17:11:45 -0400
Subject: [PATCH 2/8] feat(channels): add /build/channels-stats endpoint, fetch
 script, and approuter route

---
 approuter/xs-app.json           |  2 +-
 hugo/data/channels-stats.json   | 18 ++++++++
 package.json                    |  3 +-
 scripts/fetch-channels-stats.ts | 34 ++++++++++++++
 srv/server.js                   | 43 ++++++++++++++++++
 test/channels-stats.test.js     | 80 +++++++++++++++++++++++++++++++++
 6 files changed, 178 insertions(+), 2 deletions(-)
 create mode 100644 hugo/data/channels-stats.json
 create mode 100644 scripts/fetch-channels-stats.ts
 create mode 100644 test/channels-stats.test.js

diff --git a/approuter/xs-app.json b/approuter/xs-app.json
index 52b08f0a7..a1504cc76 100644
--- a/approuter/xs-app.json
+++ b/approuter/xs-app.json
@@ -408,7 +408,7 @@
       "authenticationType": "none"
     },
     {
-      "source": "^/build/(breadcrumb-context|catalog|co-completions|concepts|homepage-shelves|kg-stats|mission|my-progress|navigator|repo-catalog|slug-mapping|tag-labels|topics-gallery|topics-tree|topics)(/.*)?(\\?.*)?$",
+      "source": "^/build/(channels-stats|channels|channel-collections|channel-atlas|breadcrumb-context|catalog|co-completions|concepts|homepage-shelves|kg-stats|mission|my-progress|navigator|repo-catalog|slug-mapping|tag-labels|topics-gallery|topics-tree|topics)(/.*)?(\\?.*)?$",
       "target": "/build/$1$2$3",
       "destination": "srv-api",
       "authenticationType": "none"
diff --git a/hugo/data/channels-stats.json b/hugo/data/channels-stats.json
new file mode 100644
index 000000000..1bc5cdda9
--- /dev/null
+++ b/hugo/data/channels-stats.json
@@ -0,0 +1,18 @@
+{
+  "total": 0,
+  "publishedCount": 0,
+  "byStatus": {},
+  "byOwnerType": {},
+  "byCategory": {},
+  "bySubcategory": {},
+  "sapVsCommunity": {
+    "sap": 0,
+    "community": 0
+  },
+  "activeVsInactive": {
+    "active": 0,
+    "inactive": 0
+  },
+  "buildAt": "2026-09-05T21:11:04.779Z",
+  "error": "fetch failed"
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index ccd85e264..ee1beedb6 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "fetch-homepage-shelves": "tsx scripts/fetch-homepage-shelves.ts",
     "fetch-channels": "tsx scripts/fetch-channels.ts",
     "fetch-channel-collections": "tsx scripts/fetch-channel-collections.ts",
+    "fetch-channels-stats": "tsx scripts/fetch-channels-stats.ts",
     "fetch-verb-definitions": "tsx scripts/fetch-verb-definitions.ts",
     "fetch-tags": "tsx scripts/fetch-tags.ts",
     "fetch-shelf-definitions": "tsx scripts/fetch-shelf-definitions.ts",
@@ -94,7 +95,7 @@
     "build:display": "cd app/display-app && npm install && npm run build",
     "copy-joule-vendor": "node scripts/copy-joule-vendor.mjs",
     "check-deploy-cap-target": "node scripts/check-deploy-cap-target.cjs",
-    "build:all": "npm run prebuild && npm run fetch-tutorials -- --regenerate && npm run fetch-advocates && npm run fetch-homepage-shelves && npm run fetch-channels && npm run fetch-channel-collections && npm run fetch-verb-definitions && npm run fetch-tags && npm run fetch-shelf-definitions && npm run fetch-featured-topics && npm run fetch-topic-clusters && npm run build:icon-subset && npm run build:css && npm run build:apps && npm run build:island-manifest && npm run check:ui5-single-copy && npx tsx scripts/check-ui5-entry-coverage.ts && npm run build:analytics-explorer && npm run copy-joule-vendor && npm run build:explore && npm run build:hugo && npm run build:page-fallback && npm run build:whats-new-snapshot && npm run retain:assets && npm run build:publish-island-manifest && npm run build:highlight && npm run build:display && npm run build:sdl",
+    "build:all": "npm run prebuild && npm run fetch-tutorials -- --regenerate && npm run fetch-advocates && npm run fetch-homepage-shelves && npm run fetch-channels && npm run fetch-channel-collections && npm run fetch-channels-stats && npm run fetch-verb-definitions && npm run fetch-tags && npm run fetch-shelf-definitions && npm run fetch-featured-topics && npm run fetch-topic-clusters && npm run build:icon-subset && npm run build:css && npm run build:apps && npm run build:island-manifest && npm run check:ui5-single-copy && npx tsx scripts/check-ui5-entry-coverage.ts && npm run build:analytics-explorer && npm run copy-joule-vendor && npm run build:explore && npm run build:hugo && npm run build:page-fallback && npm run build:whats-new-snapshot && npm run retain:assets && npm run build:publish-island-manifest && npm run build:highlight && npm run build:display && npm run build:sdl",
     "build:deploy": "npm run check-deploy-cap-target && npm run build:all",
     "deploy": "node scripts/deploy-mta.cjs",
     "build:admin": "npm --prefix app/admin-shell run build",
diff --git a/scripts/fetch-channels-stats.ts b/scripts/fetch-channels-stats.ts
new file mode 100644
index 000000000..f9d9d3d2d
--- /dev/null
+++ b/scripts/fetch-channels-stats.ts
@@ -0,0 +1,34 @@
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const CAP_BASE = process.env.CAP_BASE_URL || 'http://localhost:4004';
+const OUT_PATH = join('hugo', 'data', 'channels-stats.json');
+
+let payload: {
+  total: number; publishedCount: number;
+  byStatus: Record<string, number>; byOwnerType: Record<string, number>;
+  byCategory: Record<string, number>; bySubcategory: Record<string, number>;
+  sapVsCommunity: { sap: number; community: number };
+  activeVsInactive: { active: number; inactive: number };
+  buildAt: string; error: string | null;
+} = {
+  total: 0, publishedCount: 0,
+  byStatus: {}, byOwnerType: {},
+  byCategory: {}, bySubcategory: {},
+  sapVsCommunity: { sap: 0, community: 0 },
+  activeVsInactive: { active: 0, inactive: 0 },
+  buildAt: new Date().toISOString(), error: null,
+};
+
+try {
+  const res = await fetch(`${CAP_BASE}/build/channels-stats`);
+  if (!res.ok) throw new Error(`status ${res.status}`);
+  payload = { ...payload, ...(await res.json()) };
+} catch (err) {
+  payload.error = err instanceof Error ? err.message : String(err);
+  console.warn(`[fetch-channels-stats] warn: ${payload.error} — writing empty payload`);
+}
+
+mkdirSync(join('hugo', 'data'), { recursive: true });
+writeFileSync(OUT_PATH, JSON.stringify(payload, null, 2), 'utf-8');
+console.log(`[fetch-channels-stats] wrote stats (total=${payload.total}) → ${OUT_PATH}`);
diff --git a/srv/server.js b/srv/server.js
index 20a0cb560..d7d45d504 100644
--- a/srv/server.js
+++ b/srv/server.js
@@ -498,6 +498,49 @@ cds.on('bootstrap', (app) => {
     }
   });
 
+  // Aggregate stats for the ecosystem-health radar at /channels/health/.
+  // Consumed by scripts/fetch-channels-stats.ts at build time. Public, unauthenticated.
+  // v1 uses ONLY reliably-populated fields: status, ownerType, category/subcategory,
+  // isSapOwned, isPublished. Explicitly EXCLUDES linkStatus, lastChecked, updateFrequency.
+  app.get('/build/channels-stats', async (_req, res) => {
+    try {
+      const db = await cds.connect.to('db');
+      const rows = await db.run(
+        SELECT.from('com.sap.developers.ims.Channels')
+          .columns('status', 'ownerType', 'category', 'subcategory', 'isSapOwned', 'isPublished'),
+      );
+      const countBy = (key) => {
+        const map = {};
+        for (const r of rows) {
+          const v = r[key] ?? '(unknown)';
+          map[v] = (map[v] || 0) + 1;
+        }
+        return map;
+      };
+      res.set('Cache-Control', 'public, max-age=60');
+      res.json({
+        total: rows.length,
+        publishedCount: rows.filter((r) => r.isPublished).length,
+        byStatus: countBy('status'),
+        byOwnerType: countBy('ownerType'),
+        byCategory: countBy('category'),
+        bySubcategory: countBy('subcategory'),
+        sapVsCommunity: {
+          sap: rows.filter((r) => r.isSapOwned).length,
+          community: rows.filter((r) => !r.isSapOwned).length,
+        },
+        activeVsInactive: {
+          active: rows.filter((r) => r.status === 'Active').length,
+          inactive: rows.filter((r) => r.status !== 'Active').length,
+        },
+        buildAt: new Date().toISOString(),
+      });
+    } catch (err) {
+      console.error('[build/channels-stats]', err.message);
+      res.status(500).json({ error: err.message });
+    }
+  });
+
   // (#1032) Build-time data for Hugo featured topics carousel — consumed by
   // scripts/fetch-tutorials.ts at build time. Public, unauthenticated.
   // Cache-Control 60s (Hugo fetches once per build, not per request).
diff --git a/test/channels-stats.test.js b/test/channels-stats.test.js
new file mode 100644
index 000000000..64292c11c
--- /dev/null
+++ b/test/channels-stats.test.js
@@ -0,0 +1,80 @@
+// test/channels-stats.test.js
+import cds from '@sap/cds';
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+
+const project = cds.test('serve', '--project', '.', '--in-memory');
+const NS = 'com.sap.developers.ims';
+
+const STATS_IDS = [
+  'aaaaaaaa-9300-0000-0000-000000000001',
+  'aaaaaaaa-9300-0000-0000-000000000002',
+  'aaaaaaaa-9300-0000-0000-000000000003',
+];
+
+describe('GET /build/channels-stats', () => {
+  beforeAll(async () => {
+    const { Channels } = cds.entities(NS);
+    await INSERT.into(Channels).entries([
+      {
+        ID: STATS_IDS[0], sourceId: 'stats-test-01', name: 'Alpha', url: 'https://alpha.example',
+        status: 'Active', ownerType: 'SAP_Official', category: 'Documentation',
+        subcategory: 'API Docs', isSapOwned: true, isPublished: true,
+      },
+      {
+        ID: STATS_IDS[1], sourceId: 'stats-test-02', name: 'Beta', url: 'https://beta.example',
+        status: 'Archived', ownerType: 'Community_Member', category: 'Community',
+        subcategory: 'Forum', isSapOwned: false, isPublished: true,
+      },
+      {
+        ID: STATS_IDS[2], sourceId: 'stats-test-03', name: 'Gamma', url: 'https://gamma.example',
+        status: 'Active', ownerType: 'SAP_Developer_Advocate', category: 'Documentation',
+        subcategory: null, isSapOwned: true, isPublished: false,
+      },
+    ]);
+  });
+
+  afterAll(async () => {
+    const { Channels } = cds.entities(NS);
+    await DELETE.from(Channels).where({ ID: { in: STATS_IDS } });
+  });
+
+  it('returns 200 with the ChannelsStats shape', async () => {
+    const { status, data } = await project.get('/build/channels-stats');
+    expect(status).toBe(200);
+    expect(typeof data.total).toBe('number');
+    expect(typeof data.publishedCount).toBe('number');
+    expect(data.byStatus).toBeDefined();
+    expect(data.byOwnerType).toBeDefined();
+    expect(data.byCategory).toBeDefined();
+    expect(data.bySubcategory).toBeDefined();
+    expect(data.sapVsCommunity).toBeDefined();
+    expect(data.sapVsCommunity).toHaveProperty('sap');
+    expect(data.sapVsCommunity).toHaveProperty('community');
+    expect(data.activeVsInactive).toBeDefined();
+    expect(data.activeVsInactive).toHaveProperty('active');
+    expect(data.activeVsInactive).toHaveProperty('inactive');
+    expect(typeof data.buildAt).toBe('string');
+  });
+
+  it('counts reflect the seeded rows', async () => {
+    const { data } = await project.get('/build/channels-stats');
+    // At minimum our 3 seeded rows
+    expect(data.total).toBeGreaterThanOrEqual(3);
+    expect(data.publishedCount).toBeGreaterThanOrEqual(2); // STATS_IDS[0] + [1]
+    // Active count includes STATS_IDS[0] + [2]
+    expect(data.activeVsInactive.active).toBeGreaterThanOrEqual(2);
+    // SAP count: STATS_IDS[0] + [2]
+    expect(data.sapVsCommunity.sap).toBeGreaterThanOrEqual(2);
+    expect(data.sapVsCommunity.community).toBeGreaterThanOrEqual(1);
+    // Documentation category: STATS_IDS[0] + [2]
+    expect(data.byCategory['Documentation']).toBeGreaterThanOrEqual(2);
+  });
+
+  it('payload does NOT reference linkStatus, lastChecked, or updateFrequency', async () => {
+    const { data } = await project.get('/build/channels-stats');
+    const bodyStr = JSON.stringify(data);
+    expect(bodyStr).not.toMatch(/linkStatus/);
+    expect(bodyStr).not.toMatch(/lastChecked/);
+    expect(bodyStr).not.toMatch(/updateFrequency/);
+  });
+});

From 5f8a00c58d6fcc0d243192ea2593cde298db2d36 Mon Sep 17 00:00:00 2001
From: Thomas Jung <thomas.jung@sap.com>
Date: Sat, 5 Sep 2026 17:23:50 -0400
Subject: [PATCH 3/8] chore(channels): untrack fetched channels-stats.json
 build artifact

Task 2 accidentally tracked hugo/data/channels-stats.json, a build-fetched
artifact written by scripts/fetch-channels-stats.ts (wired into build:all) and
committed in its fail-open error state. Its sibling fetched-data files
(channels.json, channel-collections.json, tags.json) are all untracked; this
aligns it with them: git rm --cached + gitignore entry.
---
 hugo/data/.gitignore          |  1 +
 hugo/data/channels-stats.json | 18 ------------------
 2 files changed, 1 insertion(+), 18 deletions(-)
 delete mode 100644 hugo/data/channels-stats.json

diff --git a/hugo/data/.gitignore b/hugo/data/.gitignore
index d19cc6b2f..7fa0752e6 100644
--- a/hugo/data/.gitignore
+++ b/hugo/data/.gitignore
@@ -1,2 +1,3 @@
 browse.json
 author_index.json
+channels-stats.json
diff --git a/hugo/data/channels-stats.json b/hugo/data/channels-stats.json
deleted file mode 100644
index 1bc5cdda9..000000000
--- a/hugo/data/channels-stats.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "total": 0,
-  "publishedCount": 0,
-  "byStatus": {},
-  "byOwnerType": {},
-  "byCategory": {},
-  "bySubcategory": {},
-  "sapVsCommunity": {
-    "sap": 0,
-    "community": 0
-  },
-  "activeVsInactive": {
-    "active": 0,
-    "inactive": 0
-  },
-  "buildAt": "2026-09-05T21:11:04.779Z",
-  "error": "fetch failed"
-}
\ No newline at end of file

From 04732b76a01f855ebd649d80e896693e042e71b8 Mon Sep 17 00:00:00 2001
From: Thomas Jung <thomas.jung@sap.com>
Date: Sat, 5 Sep 2026 17:25:44 -0400
Subject: [PATCH 4/8] feat(channels): add Hugo health page content and layout

---
 hugo/content/channels/health/_index.md |  5 +++++
 hugo/layouts/channels/health.html      | 16 ++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 hugo/content/channels/health/_index.md
 create mode 100644 hugo/layouts/channels/health.html

diff --git a/hugo/content/channels/health/_index.md b/hugo/content/channels/health/_index.md
new file mode 100644
index 000000000..540e7b8ec
--- /dev/null
+++ b/hugo/content/channels/health/_index.md
@@ -0,0 +1,5 @@
+---
+title: "Channel Ecosystem Health"
+description: "Active-vs-inactive breakdown, SAP-vs-community split, and category coverage across the SAP developer channel landscape."
+layout: "health"
+---
diff --git a/hugo/layouts/channels/health.html b/hugo/layouts/channels/health.html
new file mode 100644
index 000000000..17ea2ad15
--- /dev/null
+++ b/hugo/layouts/channels/health.html
@@ -0,0 +1,16 @@
+{{ define "main" }}
+{{- $stats := .Site.Data.channels_stats | default dict -}}
+<section class="channels-health-page">
+  <header class="channels-health-page__intro">
+    <h1>{{ .Title }}</h1>
+    <p>{{ .Description }}</p>
+  </header>
+  <script id="channels-stats-data" type="application/json">{{ $stats | jsonify | safeJS }}</script>
+  <div data-island="channels-health"></div>
+  <noscript>
+    <p>Total channels: {{ $stats.total | default 0 }}</p>
+    <p>Published: {{ $stats.publishedCount | default 0 }}</p>
+  </noscript>
+</section>
+<script type="module" src="{{ partial "island-src.html" "channels-health" }}"></script>
+{{ end }}

From d1551b9a432cb32c2b2ede5846b67240ed33e860 Mon Sep 17 00:00:00 2001
From: Thomas Jung <thomas.jung@sap.com>
Date: Sat, 5 Sep 2026 17:29:12 -0400
Subject: [PATCH 5/8] feat(channels): add channels-health Vue island and
 register in Vite

---
 .../channels-health/ChannelsHealth.test.ts    |  65 +++++++
 .../src/channels-health/ChannelsHealth.vue    | 180 ++++++++++++++++++
 hugo-apps/src/channels-health/index.ts        |  13 ++
 hugo-apps/vite.config.ts                      |   1 +
 4 files changed, 259 insertions(+)
 create mode 100644 hugo-apps/src/channels-health/ChannelsHealth.test.ts
 create mode 100644 hugo-apps/src/channels-health/ChannelsHealth.vue
 create mode 100644 hugo-apps/src/channels-health/index.ts

diff --git a/hugo-apps/src/channels-health/ChannelsHealth.test.ts b/hugo-apps/src/channels-health/ChannelsHealth.test.ts
new file mode 100644
index 000000000..896c0458b
--- /dev/null
+++ b/hugo-apps/src/channels-health/ChannelsHealth.test.ts
@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ChannelsHealth from './ChannelsHealth.vue';
+
+const SAMPLE_STATS = {
+  total: 150,
+  publishedCount: 120,
+  byStatus: { Active: 110, Archived: 30, Closed: 10 },
+  byOwnerType: { SAP_Official: 50, Community_Member: 80, SAP_Developer_Advocate: 20 },
+  byCategory: { Documentation: 45, Community: 60, 'Developer Tools': 45 },
+  bySubcategory: { 'API Docs': 20, Forum: 30 },
+  sapVsCommunity: { sap: 70, community: 80 },
+  activeVsInactive: { active: 110, inactive: 40 },
+  buildAt: '2026-09-05T10:00:00.000Z',
+  error: null,
+};
+
+describe('ChannelsHealth', () => {
+  it('renders the total channel count', () => {
+    const wrapper = mount(ChannelsHealth, { props: { stats: SAMPLE_STATS } });
+    expect(wrapper.text()).toContain('150');
+  });
+
+  it('renders active vs inactive counts', () => {
+    const wrapper = mount(ChannelsHealth, { props: { stats: SAMPLE_STATS } });
+    expect(wrapper.text()).toContain('110');
+    expect(wrapper.text()).toContain('40');
+  });
+
+  it('renders SAP vs community counts', () => {
+    const wrapper = mount(ChannelsHealth, { props: { stats: SAMPLE_STATS } });
+    expect(wrapper.text()).toContain('70');
+    expect(wrapper.text()).toContain('80');
+  });
+
+  it('renders status breakdown entries', () => {
+    const wrapper = mount(ChannelsHealth, { props: { stats: SAMPLE_STATS } });
+    expect(wrapper.text()).toContain('Active');
+    expect(wrapper.text()).toContain('Archived');
+  });
+
+  it('renders category coverage entries', () => {
+    const wrapper = mount(ChannelsHealth, { props: { stats: SAMPLE_STATS } });
+    expect(wrapper.text()).toContain('Documentation');
+    expect(wrapper.text()).toContain('Community');
+  });
+
+  it('does NOT render any panel referencing linkStatus, lastChecked, or updateFrequency', () => {
+    const wrapper = mount(ChannelsHealth, { props: { stats: SAMPLE_STATS } });
+    const html = wrapper.html();
+    expect(html).not.toMatch(/linkStatus/i);
+    expect(html).not.toMatch(/lastChecked/i);
+    expect(html).not.toMatch(/updateFrequency/i);
+    expect(html).not.toMatch(/link status/i);
+    expect(html).not.toMatch(/last checked/i);
+    expect(html).not.toMatch(/update frequency/i);
+  });
+
+  it('shows empty-state message when stats.total is 0', () => {
+    const empty = { ...SAMPLE_STATS, total: 0, publishedCount: 0, byStatus: {}, byOwnerType: {}, byCategory: {}, bySubcategory: {}, sapVsCommunity: { sap: 0, community: 0 }, activeVsInactive: { active: 0, inactive: 0 } };
+    const wrapper = mount(ChannelsHealth, { props: { stats: empty } });
+    expect(wrapper.text()).toMatch(/no channel data|loading|stats not/i);
+  });
+});
diff --git a/hugo-apps/src/channels-health/ChannelsHealth.vue b/hugo-apps/src/channels-health/ChannelsHealth.vue
new file mode 100644
index 000000000..5cc00b88b
--- /dev/null
+++ b/hugo-apps/src/channels-health/ChannelsHealth.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface ChannelsStats {
+  total?: number;
+  publishedCount?: number;
+  byStatus?: Record<string, number>;
+  byOwnerType?: Record<string, number>;
+  byCategory?: Record<string, number>;
+  bySubcategory?: Record<string, number>;
+  sapVsCommunity?: { sap: number; community: number };
+  activeVsInactive?: { active: number; inactive: number };
+  buildAt?: string;
+  error?: string | null;
+}
+
+const props = defineProps<{ stats: ChannelsStats }>();
+
+const isEmpty = computed(() => !props.stats?.total);
+
+const statusEntries = computed(() =>
+  Object.entries(props.stats?.byStatus ?? {}).sort((a, b) => b[1] - a[1]),
+);
+const ownerTypeEntries = computed(() =>
+  Object.entries(props.stats?.byOwnerType ?? {}).sort((a, b) => b[1] - a[1]),
+);
+const categoryEntries = computed(() =>
+  Object.entries(props.stats?.byCategory ?? {}).sort((a, b) => b[1] - a[1]),
+);
+</script>
+
+<template>
+  <div class="channels-health">
+    <p v-if="isEmpty" class="channels-health__empty">No channel data available yet.</p>
+    <template v-else>
+      <!-- Summary row -->
+      <div class="health-summary">
+        <div class="health-stat">
+          <span class="health-stat__value">{{ stats.total ?? 0 }}</span>
+          <span class="health-stat__label">Total channels</span>
+        </div>
+        <div class="health-stat">
+          <span class="health-stat__value">{{ stats.publishedCount ?? 0 }}</span>
+          <span class="health-stat__label">Published</span>
+        </div>
+        <div class="health-stat">
+          <span class="health-stat__value">{{ stats.activeVsInactive?.active ?? 0 }}</span>
+          <span class="health-stat__label">Active</span>
+        </div>
+        <div class="health-stat">
+          <span class="health-stat__value">{{ stats.activeVsInactive?.inactive ?? 0 }}</span>
+          <span class="health-stat__label">Inactive</span>
+        </div>
+        <div class="health-stat">
+          <span class="health-stat__value">{{ stats.sapVsCommunity?.sap ?? 0 }}</span>
+          <span class="health-stat__label">SAP-owned</span>
+        </div>
+        <div class="health-stat">
+          <span class="health-stat__value">{{ stats.sapVsCommunity?.community ?? 0 }}</span>
+          <span class="health-stat__label">Community</span>
+        </div>
+      </div>
+
+      <!-- Status breakdown -->
+      <section class="health-panel">
+        <h2 class="health-panel__title">By Status</h2>
+        <ul class="health-panel__list">
+          <li v-for="[status, count] in statusEntries" :key="status" class="health-panel__row">
+            <span class="health-panel__name">{{ status }}</span>
+            <span class="health-panel__count">{{ count }}</span>
+          </li>
+        </ul>
+      </section>
+
+      <!-- Category coverage -->
+      <section class="health-panel">
+        <h2 class="health-panel__title">By Category</h2>
+        <ul class="health-panel__list">
+          <li v-for="[category, count] in categoryEntries" :key="category" class="health-panel__row">
+            <span class="health-panel__name">{{ category }}</span>
+            <span class="health-panel__count">{{ count }}</span>
+          </li>
+        </ul>
+      </section>
+
+      <!-- Owner type breakdown -->
+      <section class="health-panel">
+        <h2 class="health-panel__title">By Owner Type</h2>
+        <ul class="health-panel__list">
+          <li v-for="[ownerType, count] in ownerTypeEntries" :key="ownerType" class="health-panel__row">
+            <span class="health-panel__name">{{ ownerType.replace(/_/g, ' ') }}</span>
+            <span class="health-panel__count">{{ count }}</span>
+          </li>
+        </ul>
+      </section>
+
+      <p v-if="stats.buildAt" class="health-footer">
+        Stats as of {{ new Date(stats.buildAt).toLocaleDateString() }}
+      </p>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.channels-health {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.channels-health__empty {
+  color: var(--sapNeutralTextColor, #556b82);
+}
+.health-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  gap: 0.75rem;
+}
+.health-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.875rem;
+  border: 1px solid var(--sapList_BorderColor, #d9d9d9);
+  border-radius: var(--sapElement_BorderCornerRadius, 0.75rem);
+  background: var(--sapGroup_ContentBackground, #fff);
+}
+.health-stat__value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--sapAccentColor6, #0064d9);
+}
+.health-stat__label {
+  font-size: 0.8125rem;
+  color: var(--sapNeutralTextColor, #556b82);
+  text-align: center;
+}
+.health-panel {
+  padding: 1rem 1.25rem;
+  border: 1px solid var(--sapList_BorderColor, #d9d9d9);
+  border-radius: var(--sapElement_BorderCornerRadius, 0.75rem);
+  background: var(--sapGroup_ContentBackground, #fff);
+}
+.health-panel__title {
+  margin: 0 0 0.75rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--sapGroup_TitleTextColor, #1d2d3e);
+}
+.health-panel__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.health-panel__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25rem 0;
+  border-bottom: 1px solid var(--sapList_BorderColor, #d9d9d9);
+  font-size: 0.9375rem;
+}
+.health-panel__row:last-child {
+  border-bottom: none;
+}
+.health-panel__name {
+  color: var(--sapTextColor, #1d2d3e);
+}
+.health-panel__count {
+  font-weight: 600;
+  color: var(--sapAccentColor6, #0064d9);
+}
+.health-footer {
+  font-size: 0.8125rem;
+  color: var(--sapNeutralTextColor, #556b82);
+  margin: 0;
+}
+</style>
diff --git a/hugo-apps/src/channels-health/index.ts b/hugo-apps/src/channels-health/index.ts
new file mode 100644
index 000000000..36a818be9
--- /dev/null
+++ b/hugo-apps/src/channels-health/index.ts
@@ -0,0 +1,13 @@
+import { createApp } from 'vue';
+import ChannelsHealth from './ChannelsHealth.vue';
+
+function boot() {
+  document.querySelectorAll('[data-island="channels-health"]').forEach((el) => {
+    const dataEl = document.getElementById('channels-stats-data');
+    let stats: Record<string, unknown> = {};
+    try { stats = JSON.parse(dataEl?.textContent || '{}'); } catch { stats = {}; }
+    createApp(ChannelsHealth, { stats }).mount(el);
+  });
+}
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
+else boot();
diff --git a/hugo-apps/vite.config.ts b/hugo-apps/vite.config.ts
index 068bb6650..caaa1e95f 100644
--- a/hugo-apps/vite.config.ts
+++ b/hugo-apps/vite.config.ts
@@ -315,6 +315,7 @@ export default defineConfig({
         'ui5-illustrations': resolve(__dirname, 'src/ui5/ui5-illustrations.ts'),
         'channels-directory': resolve(__dirname, 'src/channels-directory/index.ts'),
         'channel-submit': resolve(__dirname, 'src/channel-submit/main.ts'),
+        'channels-health': resolve(__dirname, 'src/channels-health/index.ts'),
       },
       output: {
         // Content-hash entry bundles so a changed bundle gets a new URL the

From c67c6ae60f8ab522ebeb22b17540a13007e17d66 Mon Sep 17 00:00:00 2001
From: Thomas Jung <thomas.jung@sap.com>
Date: Sat, 5 Sep 2026 17:31:51 -0400
Subject: [PATCH 6/8] feat(channels): add Hugo media-diet page content and
 layout

---
 hugo/content/channels/media-diet/_index.md |  5 +++++
 hugo/layouts/channels/media-diet.html      | 15 +++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 hugo/content/channels/media-diet/_index.md
 create mode 100644 hugo/layouts/channels/media-diet.html

diff --git a/hugo/content/channels/media-diet/_index.md b/hugo/content/channels/media-diet/_index.md
new file mode 100644
index 000000000..c803c4ce7
--- /dev/null
+++ b/hugo/content/channels/media-diet/_index.md
@@ -0,0 +1,5 @@
+---
+title: "Build Your Media Diet"
+description: "Pick 1–3 focus areas and get a personalized bundle of SAP developer channels to follow."
+layout: "media-diet"
+---
diff --git a/hugo/layouts/channels/media-diet.html b/hugo/layouts/channels/media-diet.html
new file mode 100644
index 000000000..04fd0780b
--- /dev/null
+++ b/hugo/layouts/channels/media-diet.html
@@ -0,0 +1,15 @@
+{{ define "main" }}
+{{- $channels := (.Site.Data.channels.channels) | default slice -}}
+<section class="media-diet-page">
+  <header class="media-diet-page__intro">
+    <h1>{{ .Title }}</h1>
+    <p>{{ .Description }}</p>
+  </header>
+  <script id="media-diet-channels-data" type="application/json">{{ $channels | jsonify | safeJS }}</script>
+  <div data-island="media-diet"></div>
+  <noscript>
+    <p>Enable JavaScript to use the media-diet picker.</p>
+  </noscript>
+</section>
+<script type="module" src="{{ partial "island-src.html" "media-diet" }}"></script>
+{{ end }}

From 51bffb59b6543fed20af2786709b05b6f8875fd3 Mon Sep 17 00:00:00 2001
From: Thomas Jung <thomas.jung@sap.com>
Date: Sat, 5 Sep 2026 17:44:38 -0400
Subject: [PATCH 7/8] feat(channels): add media-diet Vue island and register in
 Vite

---
 hugo-apps/src/media-diet/MediaDiet.test.ts |  96 ++++++++++++
 hugo-apps/src/media-diet/MediaDiet.vue     | 164 +++++++++++++++++++++
 hugo-apps/src/media-diet/index.ts          |  16 ++
 hugo-apps/vite.config.ts                   |   1 +
 4 files changed, 277 insertions(+)
 create mode 100644 hugo-apps/src/media-diet/MediaDiet.test.ts
 create mode 100644 hugo-apps/src/media-diet/MediaDiet.vue
 create mode 100644 hugo-apps/src/media-diet/index.ts

diff --git a/hugo-apps/src/media-diet/MediaDiet.test.ts b/hugo-apps/src/media-diet/MediaDiet.test.ts
new file mode 100644
index 000000000..7155d800d
--- /dev/null
+++ b/hugo-apps/src/media-diet/MediaDiet.test.ts
@@ -0,0 +1,96 @@
+// @vitest-environment happy-dom
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MediaDiet from './MediaDiet.vue';
+
+const CHANNELS = [
+  { name: 'SAP Learning', url: 'https://learning.sap.com', purpose: 'Official SAP learning portal', focusAreas: ['CAP', 'BTP'] },
+  { name: 'SAP Community', url: 'https://community.sap.com', purpose: 'Discussion forums', focusAreas: ['BTP', 'ABAP'] },
+  { name: 'SAP YouTube', url: 'https://youtube.com/sapdevs', purpose: 'Video tutorials', focusAreas: ['CAP', 'ABAP', 'BTP'] },
+  { name: 'HANA Academy', url: 'https://hana.academy', purpose: 'HANA deep-dives', focusAreas: ['HANA'] },
+];
+
+describe('MediaDiet', () => {
+  it('renders a list of unique focus areas for selection', () => {
+    const wrapper = mount(MediaDiet, { props: { channels: CHANNELS } });
+    const text = wrapper.text();
+    expect(text).toContain('CAP');
+    expect(text).toContain('BTP');
+    expect(text).toContain('ABAP');
+    expect(text).toContain('HANA');
+  });
+
+  it('filters channels client-side when a focus area is selected', async () => {
+    const wrapper = mount(MediaDiet, { props: { channels: CHANNELS } });
+    // Find the CAP focus area button/checkbox and click it
+    const capToggle = wrapper.findAll('[data-focus-area]').find((el) =>
+      el.text().includes('CAP'),
+    );
+    expect(capToggle).toBeDefined();
+    await capToggle!.trigger('click');
+    // After selecting CAP: SAP Learning, SAP YouTube should appear; HANA Academy should not
+    const results = wrapper.find('[data-testid="results"]');
+    expect(results.text()).toContain('SAP Learning');
+    expect(results.text()).toContain('SAP YouTube');
+    expect(results.text()).not.toContain('HANA Academy');
+  });
+
+  it('shows no more than 12 results', () => {
+    const manyChannels = Array.from({ length: 20 }, (_, i) => ({
+      name: `Channel ${i}`, url: `https://ch${i}.example`, purpose: `Purpose ${i}`,
+      focusAreas: ['BTP'],
+    }));
+    const wrapper = mount(MediaDiet, { props: { channels: manyChannels } });
+    const btpToggle = wrapper.findAll('[data-focus-area]').find((el) =>
+      el.text().includes('BTP'),
+    );
+    expect(btpToggle).toBeDefined();
+    btpToggle!.trigger('click');
+    // Results should be capped at 12
+    const resultItems = wrapper.findAll('[data-testid="result-item"]');
+    expect(resultItems.length).toBeLessThanOrEqual(12);
+  });
+
+  it('ranks results by match count descending', async () => {
+    const wrapper = mount(MediaDiet, { props: { channels: CHANNELS } });
+    // Select both CAP and ABAP
+    for (const label of ['CAP', 'ABAP']) {
+      const toggle = wrapper.findAll('[data-focus-area]').find((el) => el.text().includes(label));
+      if (toggle) await toggle.trigger('click');
+    }
+    const resultItems = wrapper.findAll('[data-testid="result-item"]');
+    // SAP YouTube matches both CAP + ABAP (count=2) → should appear before single-match channels
+    const names = resultItems.map((el) => el.find('.media-diet-result__name').text());
+    const ytIndex = names.indexOf('SAP YouTube');
+    const learningIndex = names.indexOf('SAP Learning'); // only CAP
+    const communityIndex = names.indexOf('SAP Community'); // only ABAP
+    expect(ytIndex).toBeLessThan(learningIndex);
+    expect(ytIndex).toBeLessThan(communityIndex);
+  });
+
+  it('allows at most 3 focus areas selected simultaneously', async () => {
+    const wrapper = mount(MediaDiet, { props: { channels: CHANNELS } });
+    const toggles = wrapper.findAll('[data-focus-area]');
+    // Click all 4 focus areas
+    for (const toggle of toggles) await toggle.trigger('click');
+    const selected = wrapper.findAll('[data-focus-area][aria-pressed="true"]');
+    expect(selected.length).toBeLessThanOrEqual(3);
+  });
+
+  it('shows empty-state prompt when no focus area is selected', () => {
+    const wrapper = mount(MediaDiet, { props: { channels: CHANNELS } });
+    expect(wrapper.text()).toMatch(/pick|select|choose/i);
+    const results = wrapper.findAll('[data-testid="result-item"]');
+    expect(results).toHaveLength(0);
+  });
+
+  it('handles channels with no focusAreas gracefully', () => {
+    const sparse = [
+      { name: 'Sparse', url: 'https://sparse.example', purpose: 'No focus areas', focusAreas: undefined },
+      ...CHANNELS,
+    ];
+    const wrapper = mount(MediaDiet, { props: { channels: sparse as any } });
+    // Should not throw — focus areas list excludes the sparse channel
+    expect(wrapper.text()).toContain('CAP');
+  });
+});
diff --git a/hugo-apps/src/media-diet/MediaDiet.vue b/hugo-apps/src/media-diet/MediaDiet.vue
new file mode 100644
index 000000000..752ac6436
--- /dev/null
+++ b/hugo-apps/src/media-diet/MediaDiet.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+interface Channel {
+  name: string;
+  url: string;
+  purpose?: string;
+  focusAreas?: string[];
+}
+
+const props = defineProps<{ channels: Channel[] }>();
+
+const MAX_SELECTED = 3;
+const MAX_RESULTS = 12;
+
+// Derive unique, sorted focus areas from the channels array.
+const focusAreas = computed(() => {
+  const set = new Set<string>();
+  for (const ch of props.channels) {
+    for (const f of ch.focusAreas ?? []) set.add(f);
+  }
+  return [...set].sort();
+});
+
+const selected = ref<Set<string>>(new Set());
+
+function toggle(area: string) {
+  const next = new Set(selected.value);
+  if (next.has(area)) {
+    next.delete(area);
+  } else if (next.size < MAX_SELECTED) {
+    next.add(area);
+  }
+  selected.value = next;
+}
+
+// Filter channels by any selected focus area, rank by match count descending, cap at 12.
+const results = computed(() => {
+  if (selected.value.size === 0) return [];
+  return props.channels
+    .map((ch) => {
+      const matchCount = (ch.focusAreas ?? []).filter((f) => selected.value.has(f)).length;
+      return { ch, matchCount };
+    })
+    .filter(({ matchCount }) => matchCount > 0)
+    .sort((a, b) => b.matchCount - a.matchCount)
+    .slice(0, MAX_RESULTS)
+    .map(({ ch }) => ch);
+});
+</script>
+
+<template>
+  <div class="media-diet">
+    <p class="media-diet__instruction">
+      Pick up to {{ MAX_SELECTED }} focus areas to get a personalized channel bundle.
+    </p>
+    <ul class="media-diet__areas">
+      <li v-for="area in focusAreas" :key="area">
+        <button
+          class="focus-area-btn"
+          :class="{ 'focus-area-btn--selected': selected.has(area) }"
+          :aria-pressed="selected.has(area)"
+          :disabled="!selected.has(area) && selected.size >= MAX_SELECTED"
+          data-focus-area
+          @click="toggle(area)"
+        >{{ area }}</button>
+      </li>
+    </ul>
+
+    <p v-if="selected.size === 0" class="media-diet__prompt">
+      Select at least one focus area to see recommended channels.
+    </p>
+
+    <ul v-else class="media-diet__results" data-testid="results">
+      <li v-for="ch in results" :key="ch.url" class="media-diet-result" data-testid="result-item">
+        <a :href="ch.url" target="_blank" rel="noopener" class="media-diet-result__name">{{ ch.name }}</a>
+        <p v-if="ch.purpose" class="media-diet-result__purpose">{{ ch.purpose }}</p>
+      </li>
+    </ul>
+
+    <p v-if="selected.size > 0 && results.length === 0" class="media-diet__empty">
+      No published channels match the selected focus areas yet.
+    </p>
+
+    <!-- PHASE 2 SEAM: export button (bookmarks + OPML) and signed-in inferred picks go here -->
+  </div>
+</template>
+
+<style scoped>
+.media-diet {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+.media-diet__instruction {
+  margin: 0;
+  color: var(--sapNeutralTextColor, #556b82);
+}
+.media-diet__areas {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.focus-area-btn {
+  padding: 0.375rem 0.875rem;
+  border: 1px solid var(--sapButton_BorderColor, #0070f2);
+  border-radius: 1rem;
+  background: transparent;
+  color: var(--sapButton_TextColor, #0070f2);
+  font: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.focus-area-btn:hover:not(:disabled) {
+  background: var(--sapButton_Hover_Background, #ebf3ff);
+}
+.focus-area-btn--selected {
+  background: var(--sapButton_Active_Background, #0070f2);
+  color: var(--sapButton_Active_TextColor, #fff);
+}
+.focus-area-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.media-diet__prompt,
+.media-diet__empty {
+  margin: 0;
+  color: var(--sapNeutralTextColor, #556b82);
+}
+.media-diet__results {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  gap: 0.75rem;
+}
+.media-diet-result {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--sapList_BorderColor, #d9d9d9);
+  border-radius: var(--sapElement_BorderCornerRadius, 0.75rem);
+  background: var(--sapGroup_ContentBackground, #fff);
+}
+.media-diet-result__name {
+  font-weight: 600;
+  color: var(--sapLinkColor, #0070f2);
+  text-decoration: none;
+}
+.media-diet-result__name:hover {
+  text-decoration: underline;
+}
+.media-diet-result__purpose {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--sapTextColor, #1d2d3e);
+}
+</style>
diff --git a/hugo-apps/src/media-diet/index.ts b/hugo-apps/src/media-diet/index.ts
new file mode 100644
index 000000000..4434694f3
--- /dev/null
+++ b/hugo-apps/src/media-diet/index.ts
@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+import MediaDiet from './MediaDiet.vue';
+
+function boot() {
+  document.querySelectorAll('[data-island="media-diet"]').forEach((el) => {
+    const dataEl = document.getElementById('media-diet-channels-data');
+    let channels: unknown[] = [];
+    try { channels = JSON.parse(dataEl?.textContent || '[]'); } catch { channels = []; }
+    // PHASE 2 SEAM: signed-in path would check /auth/user here (body.authenticated === true,
+    // NOT r.ok), then call GET /api/media-diet/my-picks to infer channels from completions.
+    // The anon picker (channels prop) is the complete Phase 1 experience.
+    createApp(MediaDiet, { channels }).mount(el);
+  });
+}
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
+else boot();
diff --git a/hugo-apps/vite.config.ts b/hugo-apps/vite.config.ts
index caaa1e95f..4ae752334 100644
--- a/hugo-apps/vite.config.ts
+++ b/hugo-apps/vite.config.ts
@@ -316,6 +316,7 @@ export default defineConfig({
         'channels-directory': resolve(__dirname, 'src/channels-directory/index.ts'),
         'channel-submit': resolve(__dirname, 'src/channel-submit/main.ts'),
         'channels-health': resolve(__dirname, 'src/channels-health/index.ts'),
+        'media-diet': resolve(__dirname, 'src/media-diet/index.ts'),
       },
       output: {
         // Content-hash entry bundles so a changed bundle gets a new URL the

From 8d8c40e3a77ebc2f6d20ffcb6ea2c344409d3598 Mon Sep 17 00:00:00 2001
From: Thomas Jung <thomas.jung@sap.com>
Date: Sat, 5 Sep 2026 17:59:09 -0400
Subject: [PATCH 8/8] test(channels): un-vacuous media-diet 12-cap test +
 repair /build route-graph lookup

---
 hugo-apps/src/media-diet/MediaDiet.test.ts      | 4 ++--
 test/unit/approuter/xs-app-graph-routes.test.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/hugo-apps/src/media-diet/MediaDiet.test.ts b/hugo-apps/src/media-diet/MediaDiet.test.ts
index 7155d800d..6841284bd 100644
--- a/hugo-apps/src/media-diet/MediaDiet.test.ts
+++ b/hugo-apps/src/media-diet/MediaDiet.test.ts
@@ -35,7 +35,7 @@ describe('MediaDiet', () => {
     expect(results.text()).not.toContain('HANA Academy');
   });
 
-  it('shows no more than 12 results', () => {
+  it('shows no more than 12 results', async () => {
     const manyChannels = Array.from({ length: 20 }, (_, i) => ({
       name: `Channel ${i}`, url: `https://ch${i}.example`, purpose: `Purpose ${i}`,
       focusAreas: ['BTP'],
@@ -45,7 +45,7 @@ describe('MediaDiet', () => {
       el.text().includes('BTP'),
     );
     expect(btpToggle).toBeDefined();
-    btpToggle!.trigger('click');
+    await btpToggle!.trigger('click');
     // Results should be capped at 12
     const resultItems = wrapper.findAll('[data-testid="result-item"]');
     expect(resultItems.length).toBeLessThanOrEqual(12);
diff --git a/test/unit/approuter/xs-app-graph-routes.test.js b/test/unit/approuter/xs-app-graph-routes.test.js
index daaf9076c..5a50330d8 100644
--- a/test/unit/approuter/xs-app-graph-routes.test.js
+++ b/test/unit/approuter/xs-app-graph-routes.test.js
@@ -100,7 +100,7 @@ describe('approuter /build/* route', () => {
   // makes that endpoint 404 on every request (it silently did so on DEV+PROD
   // until this fix — the frontend degraded to stale static breadcrumb text).
   const buildRoute = xsApp.routes.find(
-    (r) => typeof r.source === 'string' && r.source.startsWith('^/build/(breadcrumb-context'),
+    (r) => typeof r.source === 'string' && r.source.startsWith('^/build/(') && r.source.includes('breadcrumb-context'),
   )
 
   it('exists and forwards to srv-api anonymously', () => {