From 345d3fba7c4ce83b054a8abbaef2c1d0276e6ab7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 00:12:39 +0000
Subject: [PATCH 01/13] Initial plan


From 1bbe69f0972208f0d1c54c8f786e276973913817 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 00:20:45 +0000
Subject: [PATCH 02/13] Add MakamujoBanner component and place it on all
 required pages

Co-authored-by: nahcnuj <2093896+nahcnuj@users.noreply.github.com>
---
 app/components/Article.tsx        |  2 ++
 app/components/MakamujoBanner.tsx | 40 +++++++++++++++++++++++++++++++
 app/routes/diary/index.tsx        |  2 ++
 app/routes/essays/index.tsx       |  2 ++
 app/routes/index.tsx              |  2 ++
 app/routes/works/index.tsx        |  2 ++
 6 files changed, 50 insertions(+)
 create mode 100644 app/components/MakamujoBanner.tsx

diff --git a/app/components/Article.tsx b/app/components/Article.tsx
index bdf92e5..af519da 100644
--- a/app/components/Article.tsx
+++ b/app/components/Article.tsx
@@ -2,6 +2,7 @@ import { css } from 'hono/css'
 import { html } from 'hono/html'
 import type { ArticleLink } from '../lib/articles'
 import AdMax from './AdMax'
+import MakamujoBanner from './MakamujoBanner'
 import RelatedArticles from './RelatedArticles'
 
 const articleClass = css`
@@ -161,6 +162,7 @@ ${'' /*<script type="text/javascript" charset="utf-8" src="https://adm.shinobi.j
       {children}
       {relatedArticles && relatedArticles.length > 0 && currentPath && (
         <>
+          <MakamujoBanner />
           <h2>他の記事</h2>
           <RelatedArticles articles={relatedArticles} currentPath={currentPath} />
         </>
diff --git a/app/components/MakamujoBanner.tsx b/app/components/MakamujoBanner.tsx
new file mode 100644
index 0000000..be9940a
--- /dev/null
+++ b/app/components/MakamujoBanner.tsx
@@ -0,0 +1,40 @@
+import { css } from 'hono/css'
+
+const wrap = css`
+  display: flex;
+  justify-content: center;
+  margin: 0.8rem 0;
+`
+
+export default function MakamujoBanner() {
+  return (
+    <div class={wrap}>
+      <img
+        src="https://www.nahcnuj.work/makamujo/banner.png"
+        alt="馬可無序（まか・むじょ）- AI-VTuber"
+        width="320"
+        height="100"
+        usemap="#makamujo-banner-map"
+        style="max-width: 100%; height: auto;"
+      />
+      <map name="makamujo-banner-map">
+        {/* Banner is 320x100px. The "ニコニコ生放送で配信中" badge occupies the bottom strip at x:105-306, y:67-87. */}
+        <area
+          shape="rect"
+          coords="105,67,306,87"
+          href="https://live.nicovideo.jp/watch/user/14171889"
+          target="_blank"
+          rel="noopener noreferrer"
+          alt="ニコニコ生放送で配信中"
+        />
+        <area
+          shape="default"
+          href="https://www.nahcnuj.work/makamujo/index.html"
+          target="_blank"
+          rel="noopener noreferrer"
+          alt="馬可無序プロジェクト"
+        />
+      </map>
+    </div>
+  )
+}
diff --git a/app/routes/diary/index.tsx b/app/routes/diary/index.tsx
index a51a8f9..b2a147e 100644
--- a/app/routes/diary/index.tsx
+++ b/app/routes/diary/index.tsx
@@ -3,6 +3,7 @@
 import { type Context, Hono } from 'hono'
 import { redirectTo } from '../../../renderers'
 import { articlesByDirectory } from '../../lib/articles'
+import MakamujoBanner from '../../components/MakamujoBanner'
 import DiaryList from '../../islands/DiaryList'
 
 const app = new Hono()
@@ -16,6 +17,7 @@ app.get('/index.html', (c: Context) => {
   return c.render(
     <>
       <h1>日記</h1>
+      <MakamujoBanner />
       <DiaryList diaries={diaries} />
     </>,
     { frontmatter: { title, description, published: '2020-01-01' } },
diff --git a/app/routes/essays/index.tsx b/app/routes/essays/index.tsx
index ee1cc99..cb64020 100644
--- a/app/routes/essays/index.tsx
+++ b/app/routes/essays/index.tsx
@@ -1,6 +1,7 @@
 import { type Context, Hono } from 'hono'
 import { redirectTo } from '../../../renderers'
 import { articlesByDirectory } from '../../lib/articles'
+import MakamujoBanner from '../../components/MakamujoBanner'
 import EssayList from '../../islands/EssayList'
 
 const app = new Hono()
@@ -14,6 +15,7 @@ app.get('/index.html', (c: Context) => {
   return c.render(
     <>
       <h1>エッセイ</h1>
+      <MakamujoBanner />
       <p>何かしらに言及したくなったときに取り留めもないままに書き連ねます。</p>
       <EssayList essays={essays} />
     </>,
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index 0bebdeb..d2ae954 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -5,6 +5,7 @@ import Headline from '../components/Headline'
 import Icon from '../components/Icon'
 import LinkRow from '../components/LinkRow'
 import LinkRowItem from '../components/LinkRowItem'
+import MakamujoBanner from '../components/MakamujoBanner'
 import RelatedArticles from '../components/RelatedArticles'
 
 function _pickRandom<T>(arr: T[]): T | undefined {
@@ -113,6 +114,7 @@ export default createRoute((c) => {
           </div>
         </div>
       </div>
+      <MakamujoBanner />
       <LinkRow>
         <LinkRowItem>
           <a href="/diary/index.html">
diff --git a/app/routes/works/index.tsx b/app/routes/works/index.tsx
index b000baa..73c34bf 100644
--- a/app/routes/works/index.tsx
+++ b/app/routes/works/index.tsx
@@ -1,4 +1,5 @@
 import { type Context, Hono } from 'hono'
+import MakamujoBanner from '../../components/MakamujoBanner'
 import WorkList from '../../components/WorkList'
 
 interface Frontmatter {
@@ -28,6 +29,7 @@ app.get('/index.html', (c: Context) => {
   return c.render(
     <>
       <h1>Works</h1>
+      <MakamujoBanner />
       <p>私が制作したモノの一覧です。</p>
 
       <WorkList works={works} />

From a332fe116369c0843b6290853d62c0a84eca3246 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 00:26:27 +0000
Subject: [PATCH 03/13] Always show MakamujoBanner in articles; add
 MakamujoBanner behavior tests

Co-authored-by: nahcnuj <2093896+nahcnuj@users.noreply.github.com>
---
 app/components/Article.tsx             |  2 +-
 app/components/MakamujoBanner.test.tsx | 42 ++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 app/components/MakamujoBanner.test.tsx

diff --git a/app/components/Article.tsx b/app/components/Article.tsx
index af519da..1345b7a 100644
--- a/app/components/Article.tsx
+++ b/app/components/Article.tsx
@@ -160,9 +160,9 @@ ${'' /*<script type="text/javascript" charset="utf-8" src="https://adm.shinobi.j
   return (
     <article class={articleClass}>
       {children}
+      <MakamujoBanner />
       {relatedArticles && relatedArticles.length > 0 && currentPath && (
         <>
-          <MakamujoBanner />
           <h2>他の記事</h2>
           <RelatedArticles articles={relatedArticles} currentPath={currentPath} />
         </>
diff --git a/app/components/MakamujoBanner.test.tsx b/app/components/MakamujoBanner.test.tsx
new file mode 100644
index 0000000..8f6c6e6
--- /dev/null
+++ b/app/components/MakamujoBanner.test.tsx
@@ -0,0 +1,42 @@
+import { renderToReadableStream } from 'hono/jsx/dom/server'
+import { describe, expect, it } from 'vitest'
+import MakamujoBanner from './MakamujoBanner'
+
+async function renderToHtml(): Promise<string> {
+  const stream = await renderToReadableStream(MakamujoBanner({}))
+  return new Response(stream).text()
+}
+
+describe('MakamujoBanner', () => {
+  it('renders an img with the banner src', async () => {
+    const html = await renderToHtml()
+    expect(html).toContain('src="https://www.nahcnuj.work/makamujo/banner.png"')
+  })
+
+  it('references the image map', async () => {
+    const html = await renderToHtml()
+    expect(html).toContain('usemap="#makamujo-banner-map"')
+    expect(html).toContain('name="makamujo-banner-map"')
+  })
+
+  it('has a rect area for the NicoNico badge linking to the live page', async () => {
+    const html = await renderToHtml()
+    expect(html).toContain('shape="rect"')
+    expect(html).toContain('coords="105,67,306,87"')
+    expect(html).toContain('href="https://live.nicovideo.jp/watch/user/14171889"')
+  })
+
+  it('has a default area linking to the Makamujo landing page', async () => {
+    const html = await renderToHtml()
+    expect(html).toContain('shape="default"')
+    expect(html).toContain('href="https://www.nahcnuj.work/makamujo/index.html"')
+  })
+
+  it('opens all links in a new tab with noopener noreferrer', async () => {
+    const html = await renderToHtml()
+    const targetCount = (html.match(/target="_blank"/g) ?? []).length
+    const relCount = (html.match(/rel="noopener noreferrer"/g) ?? []).length
+    expect(targetCount).toBe(2)
+    expect(relCount).toBe(2)
+  })
+})

From 4713208220dde82677b136c72538a5bc3e0d5209 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 04:25:26 +0000
Subject: [PATCH 04/13] Rewrite MakamujoBanner test with click-behavior
 hit-testing

Co-authored-by: nahcnuj <2093896+nahcnuj@users.noreply.github.com>
---
 app/components/MakamujoBanner.test.tsx | 70 +++++++++++++++++---------
 1 file changed, 46 insertions(+), 24 deletions(-)

diff --git a/app/components/MakamujoBanner.test.tsx b/app/components/MakamujoBanner.test.tsx
index 8f6c6e6..a15fdca 100644
--- a/app/components/MakamujoBanner.test.tsx
+++ b/app/components/MakamujoBanner.test.tsx
@@ -1,39 +1,61 @@
 import { renderToReadableStream } from 'hono/jsx/dom/server'
-import { describe, expect, it } from 'vitest'
+import { beforeAll, describe, expect, it } from 'vitest'
 import MakamujoBanner from './MakamujoBanner'
 
-async function renderToHtml(): Promise<string> {
-  const stream = await renderToReadableStream(MakamujoBanner({}))
-  return new Response(stream).text()
+type Area = { shape: string; coords: string; href: string }
+
+/** Extract <area> elements from an HTML string. */
+function parseAreas(html: string): Area[] {
+  const areas: Area[] = []
+  for (const match of html.matchAll(/<area\s[^>]+>/g)) {
+    const tag = match[0]
+    const shape = tag.match(/shape="([^"]+)"/)?.[1] ?? ''
+    const coords = tag.match(/coords="([^"]+)"/)?.[1] ?? ''
+    const href = tag.match(/href="([^"]+)"/)?.[1] ?? ''
+    areas.push({ shape, coords, href })
+  }
+  return areas
 }
 
-describe('MakamujoBanner', () => {
-  it('renders an img with the banner src', async () => {
-    const html = await renderToHtml()
-    expect(html).toContain('src="https://www.nahcnuj.work/makamujo/banner.png"')
-  })
+/**
+ * Image-map hit test: return the href of the first <area> that contains (x, y),
+ * following the HTML image-map algorithm (rect check, then default fallback).
+ */
+function hitTest(x: number, y: number, areas: Area[]): string | undefined {
+  for (const area of areas) {
+    if (area.shape === 'rect') {
+      const [x1, y1, x2, y2] = area.coords.split(',').map(Number)
+      if (x >= x1 && x <= x2 && y >= y1 && y <= y2) return area.href
+    } else if (area.shape === 'default') {
+      return area.href
+    }
+  }
+}
+
+describe('MakamujoBanner click behavior', () => {
+  let areas: Area[]
 
-  it('references the image map', async () => {
-    const html = await renderToHtml()
-    expect(html).toContain('usemap="#makamujo-banner-map"')
-    expect(html).toContain('name="makamujo-banner-map"')
+  beforeAll(async () => {
+    const stream = await renderToReadableStream(MakamujoBanner({}))
+    const html = await new Response(stream).text()
+    areas = parseAreas(html)
   })
 
-  it('has a rect area for the NicoNico badge linking to the live page', async () => {
-    const html = await renderToHtml()
-    expect(html).toContain('shape="rect"')
-    expect(html).toContain('coords="105,67,306,87"')
-    expect(html).toContain('href="https://live.nicovideo.jp/watch/user/14171889"')
+  it('clicking the NicoNico badge navigates to the program viewing page', () => {
+    // Center of badge rect (105,67,306,87) → (205, 77)
+    const dest = hitTest(205, 77, areas)
+    expect(dest).toBe('https://live.nicovideo.jp/watch/user/14171889')
   })
 
-  it('has a default area linking to the Makamujo landing page', async () => {
-    const html = await renderToHtml()
-    expect(html).toContain('shape="default"')
-    expect(html).toContain('href="https://www.nahcnuj.work/makamujo/index.html"')
+  it('clicking outside the badge navigates to the Makamujo landing page', () => {
+    // Top-left area of banner, outside the badge rect
+    const dest = hitTest(50, 30, areas)
+    expect(dest).toBe('https://www.nahcnuj.work/makamujo/index.html')
   })
 
-  it('opens all links in a new tab with noopener noreferrer', async () => {
-    const html = await renderToHtml()
+  it('all clickable areas open in a new tab safely', async () => {
+    const stream = await renderToReadableStream(MakamujoBanner({}))
+    const html = await new Response(stream).text()
     const targetCount = (html.match(/target="_blank"/g) ?? []).length
     const relCount = (html.match(/rel="noopener noreferrer"/g) ?? []).length
     expect(targetCount).toBe(2)

From 67c6b6fcc067287031d8c9ed64aade52735924df Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 04:42:52 +0000
Subject: [PATCH 05/13] Replace MakamujoBanner unit test with Playwright E2E
 click tests

Co-authored-by: nahcnuj <2093896+nahcnuj@users.noreply.github.com>
---
 app/components/MakamujoBanner.test.tsx |  64 ----------------
 package-lock.json                      |  48 ++++++++++++
 package.json                           |   1 +
 tests/e2e/makamujo-banner.test.ts      | 100 +++++++++++++++++++++++++
 vitest.config.e2e.ts                   |   2 +
 5 files changed, 151 insertions(+), 64 deletions(-)
 delete mode 100644 app/components/MakamujoBanner.test.tsx
 create mode 100644 tests/e2e/makamujo-banner.test.ts

diff --git a/app/components/MakamujoBanner.test.tsx b/app/components/MakamujoBanner.test.tsx
deleted file mode 100644
index a15fdca..0000000
--- a/app/components/MakamujoBanner.test.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { renderToReadableStream } from 'hono/jsx/dom/server'
-import { beforeAll, describe, expect, it } from 'vitest'
-import MakamujoBanner from './MakamujoBanner'
-
-type Area = { shape: string; coords: string; href: string }
-
-/** Extract <area> elements from an HTML string. */
-function parseAreas(html: string): Area[] {
-  const areas: Area[] = []
-  for (const match of html.matchAll(/<area\s[^>]+>/g)) {
-    const tag = match[0]
-    const shape = tag.match(/shape="([^"]+)"/)?.[1] ?? ''
-    const coords = tag.match(/coords="([^"]+)"/)?.[1] ?? ''
-    const href = tag.match(/href="([^"]+)"/)?.[1] ?? ''
-    areas.push({ shape, coords, href })
-  }
-  return areas
-}
-
-/**
- * Image-map hit test: return the href of the first <area> that contains (x, y),
- * following the HTML image-map algorithm (rect check, then default fallback).
- */
-function hitTest(x: number, y: number, areas: Area[]): string | undefined {
-  for (const area of areas) {
-    if (area.shape === 'rect') {
-      const [x1, y1, x2, y2] = area.coords.split(',').map(Number)
-      if (x >= x1 && x <= x2 && y >= y1 && y <= y2) return area.href
-    } else if (area.shape === 'default') {
-      return area.href
-    }
-  }
-}
-
-describe('MakamujoBanner click behavior', () => {
-  let areas: Area[]
-
-  beforeAll(async () => {
-    const stream = await renderToReadableStream(MakamujoBanner({}))
-    const html = await new Response(stream).text()
-    areas = parseAreas(html)
-  })
-
-  it('clicking the NicoNico badge navigates to the program viewing page', () => {
-    // Center of badge rect (105,67,306,87) → (205, 77)
-    const dest = hitTest(205, 77, areas)
-    expect(dest).toBe('https://live.nicovideo.jp/watch/user/14171889')
-  })
-
-  it('clicking outside the badge navigates to the Makamujo landing page', () => {
-    // Top-left area of banner, outside the badge rect
-    const dest = hitTest(50, 30, areas)
-    expect(dest).toBe('https://www.nahcnuj.work/makamujo/index.html')
-  })
-
-  it('all clickable areas open in a new tab safely', async () => {
-    const stream = await renderToReadableStream(MakamujoBanner({}))
-    const html = await new Response(stream).text()
-    const targetCount = (html.match(/target="_blank"/g) ?? []).length
-    const relCount = (html.match(/rel="noopener noreferrer"/g) ?? []).length
-    expect(targetCount).toBe(2)
-    expect(relCount).toBe(2)
-  })
-})
diff --git a/package-lock.json b/package-lock.json
index e703f60..3543d25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@biomejs/biome": "2.4.7",
         "@types/katex": "^0.16.8",
         "@types/node": "^24.12.0",
+        "playwright": "^1.58.2",
         "textlint": "^15.5.2",
         "textlint-filter-rule-comments": "^1.3.0",
         "textlint-filter-rule-node-types": "^1.1.0",
@@ -9422,6 +9423,53 @@
         "node": ">=16.20.0"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/pluralize": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-2.0.0.tgz",
diff --git a/package.json b/package.json
index 67538aa..ab41238 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@biomejs/biome": "2.4.7",
     "@types/katex": "^0.16.8",
     "@types/node": "^24.12.0",
+    "playwright": "^1.58.2",
     "textlint": "^15.5.2",
     "textlint-filter-rule-comments": "^1.3.0",
     "textlint-filter-rule-node-types": "^1.1.0",
diff --git a/tests/e2e/makamujo-banner.test.ts b/tests/e2e/makamujo-banner.test.ts
new file mode 100644
index 0000000..5c80c2a
--- /dev/null
+++ b/tests/e2e/makamujo-banner.test.ts
@@ -0,0 +1,100 @@
+/**
+ * E2E tests for MakamujoBanner: verify that clicking the banner image-map
+ * areas navigates to the correct URLs.
+ *
+ * The banner has two clickable zones:
+ *   - The "ニコニコ生放送で配信中" badge (rect 105,67,306,87) → NicoNico live page
+ *   - The rest of the banner (default area) → Makamujo landing page
+ */
+import { type ChildProcess, spawn } from 'node:child_process'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+import { chromium, type Browser } from 'playwright'
+
+describe('MakamujoBanner E2E: click navigation', () => {
+  let devProcess: ChildProcess
+  let baseUrl: string
+  let browser: Browser
+
+  beforeAll(async () => {
+    baseUrl = await new Promise<string>((resolve, reject) => {
+      let resolved = false
+
+      devProcess = spawn('npm', ['run', 'dev'], {
+        stdio: 'pipe',
+        env: { ...process.env, NO_COLOR: '1' },
+      })
+
+      devProcess.stdout?.on('data', (data: Buffer) => {
+        const match = data.toString().match(/https?:\/\/localhost:\d+/)
+        if (match) {
+          resolved = true
+          resolve(match[0])
+        }
+      })
+
+      devProcess.on('error', reject)
+      devProcess.on('close', (code) => {
+        if (!resolved && code !== 0) {
+          reject(new Error(`npm run dev exited with code ${code}`))
+        }
+      })
+    })
+
+    browser = await chromium.launch()
+  }, 60_000)
+
+  afterAll(async () => {
+    await browser?.close()
+    devProcess?.kill()
+  })
+
+  /**
+   * Opens the home page, intercepts the outgoing navigation triggered by
+   * clicking at (x, y) relative to the banner image, and returns the target URL.
+   * External resource and navigation requests are blocked to prevent loading
+   * third-party sites during tests.
+   */
+  async function clickBannerAt(x: number, y: number): Promise<string> {
+    const context = await browser.newContext()
+
+    const navigationUrlPromise = new Promise<string>((resolve) => {
+      context.route('**/*', (route) => {
+        const url = route.request().url()
+        if (url.startsWith(baseUrl)) {
+          route.continue()
+          return
+        }
+        if (route.request().isNavigationRequest()) {
+          resolve(url)
+        }
+        route.abort()
+      })
+    })
+
+    const page = await context.newPage()
+    await page.goto(baseUrl)
+
+    const img = page.locator('img[usemap="#makamujo-banner-map"]')
+    const box = await img.boundingBox()
+    if (!box) throw new Error('Banner image not found or has no layout bounding box')
+
+    // Click at (x, y) relative to the top-left corner of the banner image
+    await page.mouse.click(box.x + x, box.y + y)
+
+    const url = await navigationUrlPromise
+    await context.close()
+    return url
+  }
+
+  it('clicking the NicoNico badge navigates to the program viewing page', async () => {
+    // The badge occupies rect (105,67)-(306,87); its center is (205, 77)
+    const url = await clickBannerAt(205, 77)
+    expect(url).toBe('https://live.nicovideo.jp/watch/user/14171889')
+  }, 30_000)
+
+  it('clicking outside the badge navigates to the Makamujo landing page', async () => {
+    // (50, 30) is in the top-left area of the banner, clearly outside the badge rect
+    const url = await clickBannerAt(50, 30)
+    expect(url).toBe('https://www.nahcnuj.work/makamujo/index.html')
+  }, 30_000)
+})
diff --git a/vitest.config.e2e.ts b/vitest.config.e2e.ts
index e41cc5b..473f5f2 100644
--- a/vitest.config.e2e.ts
+++ b/vitest.config.e2e.ts
@@ -3,5 +3,7 @@ import { defineConfig } from 'vitest/config'
 export default defineConfig({
   test: {
     include: ['tests/e2e/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+    // Run E2E test files serially to avoid port conflicts between dev-server instances
+    fileParallelism: false,
   },
 })

From 0ed037f58c9c1899ca9c8731ee41d5d58c090966 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 04:56:18 +0000
Subject: [PATCH 06/13] Add Playwright browser install step to e2e CI job

Co-authored-by: nahcnuj <2093896+nahcnuj@users.noreply.github.com>
---
 .github/workflows/ci.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a47ecc5..1837fc5 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -75,6 +75,8 @@ jobs:
           cache: 'npm'
       - name: Install dependencies
         run: npm ci --prefer-offline
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
       - name: E2E Test
         run: npm run test:e2e
       - if: failure()

From cbab409f9dc6dcf96b336c73e9a4ae6dbc09a348 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 05:00:36 +0000
Subject: [PATCH 07/13] Move MakamujoBanner after description paragraph in
 works index page

Co-authored-by: nahcnuj <2093896+nahcnuj@users.noreply.github.com>
---
 app/routes/works/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/routes/works/index.tsx b/app/routes/works/index.tsx
index 73c34bf..4905fc8 100644
--- a/app/routes/works/index.tsx
+++ b/app/routes/works/index.tsx
@@ -29,9 +29,10 @@ app.get('/index.html', (c: Context) => {
   return c.render(
     <>
       <h1>Works</h1>
-      <MakamujoBanner />
       <p>私が制作したモノの一覧です。</p>
 
+      <MakamujoBanner />
+
       <WorkList works={works} />
     </>,
     { frontmatter: { title, description, published: '2020-01-01' } },

From 840376605845827016b6be6a0d9434fe7d2a7bea Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 05:04:42 +0000
Subject: [PATCH 08/13] Fix E2E test: reject on early dev-server exit and await
 graceful shutdown

Co-authored-by: nahcnuj <2093896+nahcnuj@users.noreply.github.com>
---
 tests/e2e/makamujo-banner.test.ts | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/tests/e2e/makamujo-banner.test.ts b/tests/e2e/makamujo-banner.test.ts
index 5c80c2a..32d9dbd 100644
--- a/tests/e2e/makamujo-banner.test.ts
+++ b/tests/e2e/makamujo-banner.test.ts
@@ -18,6 +18,7 @@ describe('MakamujoBanner E2E: click navigation', () => {
   beforeAll(async () => {
     baseUrl = await new Promise<string>((resolve, reject) => {
       let resolved = false
+      let stderr = ''
 
       devProcess = spawn('npm', ['run', 'dev'], {
         stdio: 'pipe',
@@ -32,10 +33,14 @@ describe('MakamujoBanner E2E: click navigation', () => {
         }
       })
 
+      devProcess.stderr?.on('data', (data: Buffer) => {
+        stderr += data.toString()
+      })
+
       devProcess.on('error', reject)
       devProcess.on('close', (code) => {
-        if (!resolved && code !== 0) {
-          reject(new Error(`npm run dev exited with code ${code}`))
+        if (!resolved) {
+          reject(new Error(`npm run dev exited with code ${code} before URL was detected\n${stderr}`))
         }
       })
     })
@@ -45,7 +50,18 @@ describe('MakamujoBanner E2E: click navigation', () => {
 
   afterAll(async () => {
     await browser?.close()
-    devProcess?.kill()
+    if (devProcess) {
+      await new Promise<void>((resolve) => {
+        const killTimeout = setTimeout(() => {
+          devProcess.kill('SIGKILL')
+        }, 5_000)
+        devProcess.on('close', () => {
+          clearTimeout(killTimeout)
+          resolve()
+        })
+        devProcess.kill('SIGTERM')
+      })
+    }
   })
 
   /**

From 197a4c6d733c22a8f8593c3e90048706a3f2a450 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 05:08:30 +0000
Subject: [PATCH 09/13] Hide MakamujoBanner in Article.tsx on sub-index pages

Co-authored-by: nahcnuj <2093896+nahcnuj@users.noreply.github.com>
---
 app/components/Article.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/Article.tsx b/app/components/Article.tsx
index 1345b7a..2eb6c36 100644
--- a/app/components/Article.tsx
+++ b/app/components/Article.tsx
@@ -157,10 +157,12 @@ ${'' /*<script type="text/javascript" charset="utf-8" src="https://adm.shinobi.j
     children.children = newChildren
   }
 
+  const isIndexPage = currentPath?.endsWith('/index.html') ?? false
+
   return (
     <article class={articleClass}>
       {children}
-      <MakamujoBanner />
+      {!isIndexPage && <MakamujoBanner />}
       {relatedArticles && relatedArticles.length > 0 && currentPath && (
         <>
           <h2>他の記事</h2>

From 5148f9e8d9678c57af1869b5d648035b22376910 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:27:04 +0000
Subject: [PATCH 10/13] Fix afterAll timeout in E2E test - add 30s timeout

Co-authored-by: nahcnuj <2093896+nahcnuj@users.noreply.github.com>
---
 tests/e2e/makamujo-banner.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/makamujo-banner.test.ts b/tests/e2e/makamujo-banner.test.ts
index 32d9dbd..5bbe93f 100644
--- a/tests/e2e/makamujo-banner.test.ts
+++ b/tests/e2e/makamujo-banner.test.ts
@@ -62,7 +62,7 @@ describe('MakamujoBanner E2E: click navigation', () => {
         devProcess.kill('SIGTERM')
       })
     }
-  })
+  }, 30_000)
 
   /**
    * Opens the home page, intercepts the outgoing navigation triggered by

From a9e6423a801f9eb7fa19ef5d351bf11c0d341b62 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:38:37 +0000
Subject: [PATCH 11/13] Fix E2E afterAll hang: spawn with detached:true and
 kill entire process group

Co-authored-by: nahcnuj <2093896+nahcnuj@users.noreply.github.com>
---
 tests/e2e/makamujo-banner.test.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/makamujo-banner.test.ts b/tests/e2e/makamujo-banner.test.ts
index 5bbe93f..4aa08e2 100644
--- a/tests/e2e/makamujo-banner.test.ts
+++ b/tests/e2e/makamujo-banner.test.ts
@@ -23,6 +23,7 @@ describe('MakamujoBanner E2E: click navigation', () => {
       devProcess = spawn('npm', ['run', 'dev'], {
         stdio: 'pipe',
         env: { ...process.env, NO_COLOR: '1' },
+        detached: true, // new process group so we can kill npm + vite together
       })
 
       devProcess.stdout?.on('data', (data: Buffer) => {
@@ -52,14 +53,21 @@ describe('MakamujoBanner E2E: click navigation', () => {
     await browser?.close()
     if (devProcess) {
       await new Promise<void>((resolve) => {
+        const pid = devProcess.pid
         const killTimeout = setTimeout(() => {
-          devProcess.kill('SIGKILL')
+          try {
+            if (pid) process.kill(-pid, 'SIGKILL')
+            else devProcess.kill('SIGKILL')
+          } catch { /* already dead */ }
         }, 5_000)
         devProcess.on('close', () => {
           clearTimeout(killTimeout)
           resolve()
         })
-        devProcess.kill('SIGTERM')
+        try {
+          if (pid) process.kill(-pid, 'SIGTERM')
+          else devProcess.kill('SIGTERM')
+        } catch { /* already dead */ }
       })
     }
   }, 30_000)

From ce7108ee88052d71b8aa5fcd31f731337e9734cc Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:56:30 +0000
Subject: [PATCH 12/13] Add GA event tracking to MakamujoBanner
 (click_makamujo_nicovideo / click_makamujo_landing)

Co-authored-by: nahcnuj <2093896+nahcnuj@users.noreply.github.com>
---
 app/client.ts                         |  19 ++-
 app/components/MakamujoBanner.tsx     |   2 +
 app/lib/makamujoBannerTracker.test.ts | 218 ++++++++++++++++++++++++++
 app/lib/makamujoBannerTracker.ts      |  60 +++++++
 4 files changed, 298 insertions(+), 1 deletion(-)
 create mode 100644 app/lib/makamujoBannerTracker.test.ts
 create mode 100644 app/lib/makamujoBannerTracker.ts

diff --git a/app/client.ts b/app/client.ts
index 054ff9a..72d6a89 100644
--- a/app/client.ts
+++ b/app/client.ts
@@ -1,5 +1,6 @@
 import { createClient } from 'honox/client'
 import { setupAdControl } from './lib/adControl'
+import { setupMakamujoBannerTracking } from './lib/makamujoBannerTracker'
 import { type GtagFn, setupScrollDepthTracking } from './lib/scrollDepthTracker'
 
 createClient()
@@ -17,7 +18,7 @@ const gtagFn: GtagFn = import.meta.env.PROD
       }
     }
   : (command, name, params) => {
-      console.log('[scroll_depth]', command, name, params)
+      console.log('[gtag]', command, name, params)
     }
 
 setupScrollDepthTracking({
@@ -64,3 +65,19 @@ setupAdControl({
     return 0
   },
 })
+
+const whenReady = (fn: () => void) => {
+  if (document.readyState !== 'loading') {
+    fn()
+  } else {
+    document.addEventListener('DOMContentLoaded', fn, { once: true })
+  }
+}
+
+setupMakamujoBannerTracking({
+  gtagFn,
+  whenReady,
+  getAreaElements: () => Array.from(document.querySelectorAll<HTMLAreaElement>('area[data-gtag-event]')),
+  navigate: (href) => window.open(href, '_blank', 'noopener,noreferrer'),
+  maxDelayMs: 500,
+})
diff --git a/app/components/MakamujoBanner.tsx b/app/components/MakamujoBanner.tsx
index be9940a..7e1da09 100644
--- a/app/components/MakamujoBanner.tsx
+++ b/app/components/MakamujoBanner.tsx
@@ -26,6 +26,7 @@ export default function MakamujoBanner() {
           target="_blank"
           rel="noopener noreferrer"
           alt="ニコニコ生放送で配信中"
+          data-gtag-event="click_makamujo_nicovideo"
         />
         <area
           shape="default"
@@ -33,6 +34,7 @@ export default function MakamujoBanner() {
           target="_blank"
           rel="noopener noreferrer"
           alt="馬可無序プロジェクト"
+          data-gtag-event="click_makamujo_landing"
         />
       </map>
     </div>
diff --git a/app/lib/makamujoBannerTracker.test.ts b/app/lib/makamujoBannerTracker.test.ts
new file mode 100644
index 0000000..26da755
--- /dev/null
+++ b/app/lib/makamujoBannerTracker.test.ts
@@ -0,0 +1,218 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { setupMakamujoBannerTracking } from './makamujoBannerTracker'
+import type { GtagFn } from './scrollDepthTracker'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+type FakeArea = {
+  dataset: { gtagEvent?: string }
+  href: string
+  addEventListener: (event: string, handler: (e: Event) => void) => void
+  /** Simulate a user click on this area element. */
+  triggerClick: () => { preventDefault: ReturnType<typeof vi.fn> }
+}
+
+function makeFakeArea(gtagEvent: string | undefined, href: string): FakeArea {
+  let clickHandler: ((e: Event) => void) | undefined
+  return {
+    dataset: { gtagEvent },
+    href,
+    addEventListener: (event, handler) => {
+      if (event === 'click') clickHandler = handler
+    },
+    triggerClick: () => {
+      const e = { preventDefault: vi.fn() }
+      clickHandler?.(e as unknown as Event)
+      return e
+    },
+  }
+}
+
+function makeSetup(
+  areas: FakeArea[],
+  opts: {
+    navigate?: ReturnType<typeof vi.fn>
+    maxDelayMs?: number
+    gtag?: GtagFn
+    whenReady?: (fn: () => void) => void
+  } = {},
+) {
+  const navigate = opts.navigate ?? vi.fn()
+  const gtag = opts.gtag ?? vi.fn()
+  const whenReady = opts.whenReady ?? ((fn) => fn())
+
+  setupMakamujoBannerTracking({
+    gtagFn: gtag as GtagFn,
+    whenReady,
+    getAreaElements: () => areas as unknown as HTMLAreaElement[],
+    navigate,
+    maxDelayMs: opts.maxDelayMs ?? 500,
+  })
+
+  return { navigate, gtag }
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('setupMakamujoBannerTracking', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  describe('GA event name', () => {
+    it('fires "click_makamujo_nicovideo" when the NicoNico badge area is clicked', () => {
+      const area = makeFakeArea('click_makamujo_nicovideo', 'https://live.nicovideo.jp/watch/user/14171889')
+      const { gtag } = makeSetup([area])
+      area.triggerClick()
+      expect(gtag).toHaveBeenCalledWith('event', 'click_makamujo_nicovideo', expect.any(Object))
+    })
+
+    it('fires "click_makamujo_landing" when the landing-page area is clicked', () => {
+      const area = makeFakeArea('click_makamujo_landing', 'https://www.nahcnuj.work/makamujo/index.html')
+      const { gtag } = makeSetup([area])
+      area.triggerClick()
+      expect(gtag).toHaveBeenCalledWith('event', 'click_makamujo_landing', expect.any(Object))
+    })
+
+    it('passes event_timeout equal to maxDelayMs', () => {
+      const area = makeFakeArea('click_makamujo_nicovideo', 'https://live.nicovideo.jp/watch/user/14171889')
+      const { gtag } = makeSetup([area], { maxDelayMs: 300 })
+      area.triggerClick()
+      expect(gtag).toHaveBeenCalledWith(
+        'event',
+        'click_makamujo_nicovideo',
+        expect.objectContaining({ event_timeout: 300 }),
+      )
+    })
+  })
+
+  describe('navigation via event_callback', () => {
+    it('does not navigate immediately after click (waits for GA callback)', () => {
+      const area = makeFakeArea('click_makamujo_nicovideo', 'https://live.nicovideo.jp/watch/user/14171889')
+      const { navigate } = makeSetup([area])
+      area.triggerClick()
+      expect(navigate).not.toHaveBeenCalled()
+    })
+
+    it('navigates to the correct URL when event_callback fires', () => {
+      const href = 'https://live.nicovideo.jp/watch/user/14171889'
+      const area = makeFakeArea('click_makamujo_nicovideo', href)
+      let capturedCallback: (() => void) | undefined
+      const gtag = vi.fn().mockImplementation((_cmd, _name, params: Record<string, unknown>) => {
+        capturedCallback = params?.event_callback as () => void
+      })
+      const { navigate } = makeSetup([area], { gtag })
+      area.triggerClick()
+      capturedCallback?.()
+      expect(navigate).toHaveBeenCalledWith(href)
+    })
+  })
+
+  describe('navigation via timeout fallback', () => {
+    it('navigates after maxDelayMs when event_callback never fires', () => {
+      const href = 'https://www.nahcnuj.work/makamujo/index.html'
+      const area = makeFakeArea('click_makamujo_landing', href)
+      const gtag = vi.fn() // never calls event_callback
+      const { navigate } = makeSetup([area], { gtag, maxDelayMs: 300 })
+      area.triggerClick()
+      expect(navigate).not.toHaveBeenCalled()
+      vi.advanceTimersByTime(300)
+      expect(navigate).toHaveBeenCalledWith(href)
+    })
+
+    it('does not navigate before maxDelayMs elapses', () => {
+      const area = makeFakeArea('click_makamujo_landing', 'https://www.nahcnuj.work/makamujo/index.html')
+      const gtag = vi.fn()
+      const { navigate } = makeSetup([area], { gtag, maxDelayMs: 300 })
+      area.triggerClick()
+      vi.advanceTimersByTime(299)
+      expect(navigate).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('no double navigation', () => {
+    it('navigates exactly once even when both event_callback and timeout fire', () => {
+      const href = 'https://live.nicovideo.jp/watch/user/14171889'
+      const area = makeFakeArea('click_makamujo_nicovideo', href)
+      let capturedCallback: (() => void) | undefined
+      const gtag = vi.fn().mockImplementation((_cmd, _name, params: Record<string, unknown>) => {
+        capturedCallback = params?.event_callback as () => void
+      })
+      const { navigate } = makeSetup([area], { gtag, maxDelayMs: 300 })
+      area.triggerClick()
+      capturedCallback?.() // fires callback first
+      vi.advanceTimersByTime(300) // then timeout fires
+      expect(navigate).toHaveBeenCalledTimes(1)
+    })
+
+    it('navigates exactly once when timeout fires before event_callback', () => {
+      const href = 'https://live.nicovideo.jp/watch/user/14171889'
+      const area = makeFakeArea('click_makamujo_nicovideo', href)
+      let capturedCallback: (() => void) | undefined
+      const gtag = vi.fn().mockImplementation((_cmd, _name, params: Record<string, unknown>) => {
+        capturedCallback = params?.event_callback as () => void
+      })
+      const { navigate } = makeSetup([area], { gtag, maxDelayMs: 300 })
+      area.triggerClick()
+      vi.advanceTimersByTime(300) // timeout fires first
+      capturedCallback?.() // then callback fires
+      expect(navigate).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('default prevention', () => {
+    it('calls preventDefault on the click event to stop native area navigation', () => {
+      const area = makeFakeArea('click_makamujo_nicovideo', 'https://live.nicovideo.jp/watch/user/14171889')
+      makeSetup([area])
+      const { preventDefault } = area.triggerClick()
+      expect(preventDefault).toHaveBeenCalled()
+    })
+  })
+
+  describe('edge cases', () => {
+    it('skips areas without a data-gtag-event attribute', () => {
+      const area = makeFakeArea(undefined, 'https://example.com')
+      const { gtag, navigate } = makeSetup([area])
+      area.triggerClick()
+      vi.advanceTimersByTime(500)
+      expect(gtag).not.toHaveBeenCalled()
+      expect(navigate).not.toHaveBeenCalled()
+    })
+
+    it('does not attach listeners before whenReady fires', () => {
+      let readyFn: (() => void) | undefined
+      const area = makeFakeArea('click_makamujo_nicovideo', 'https://live.nicovideo.jp/watch/user/14171889')
+      const { gtag } = makeSetup([area], {
+        whenReady: (fn) => {
+          readyFn = fn
+        },
+      })
+      area.triggerClick()
+      expect(gtag).not.toHaveBeenCalled()
+      readyFn?.()
+      area.triggerClick()
+      expect(gtag).toHaveBeenCalledOnce()
+    })
+
+    it('handles multiple areas independently', () => {
+      const area1 = makeFakeArea('click_makamujo_nicovideo', 'https://live.nicovideo.jp/watch/user/14171889')
+      const area2 = makeFakeArea('click_makamujo_landing', 'https://www.nahcnuj.work/makamujo/index.html')
+      const gtag = vi.fn()
+      makeSetup([area1, area2], { gtag })
+      area1.triggerClick()
+      area2.triggerClick()
+      expect(gtag).toHaveBeenCalledTimes(2)
+      expect(gtag).toHaveBeenNthCalledWith(1, 'event', 'click_makamujo_nicovideo', expect.any(Object))
+      expect(gtag).toHaveBeenNthCalledWith(2, 'event', 'click_makamujo_landing', expect.any(Object))
+    })
+  })
+})
diff --git a/app/lib/makamujoBannerTracker.ts b/app/lib/makamujoBannerTracker.ts
new file mode 100644
index 0000000..948d1d7
--- /dev/null
+++ b/app/lib/makamujoBannerTracker.ts
@@ -0,0 +1,60 @@
+import type { GtagFn } from './scrollDepthTracker'
+
+export interface MakamujoBannerTrackerOptions {
+  gtagFn: GtagFn
+  /** Calls `fn` once the DOM is ready to be queried (equivalent of DOMContentLoaded). */
+  whenReady: (fn: () => void) => void
+  /** Returns all `<area>` elements that carry a `data-gtag-event` attribute. */
+  getAreaElements: () => HTMLAreaElement[]
+  /** Opens the given URL (e.g. `window.open(href, '_blank', 'noopener,noreferrer')`). */
+  navigate: (href: string) => void
+  /** Maximum milliseconds to wait for the GA beacon before navigating anyway. */
+  maxDelayMs?: number
+}
+
+/**
+ * Intercepts clicks on Makamujo banner image-map `<area>` elements, fires a
+ * GA4 event named by their `data-gtag-event` attribute, and then opens the
+ * link.  Navigation is delayed until the event is confirmed sent, or until
+ * `maxDelayMs` elapses — whichever comes first.
+ */
+export function setupMakamujoBannerTracking({
+  gtagFn,
+  whenReady,
+  getAreaElements,
+  navigate,
+  maxDelayMs = 500,
+}: MakamujoBannerTrackerOptions): void {
+  whenReady(() => {
+    for (const area of getAreaElements()) {
+      const eventName = area.dataset.gtagEvent
+      if (!eventName) continue
+
+      area.addEventListener('click', (e) => {
+        e.preventDefault()
+        const href = area.href
+        if (!href) return
+
+        let navigated = false
+        const doNavigate = () => {
+          if (navigated) return
+          navigated = true
+          navigate(href)
+        }
+
+        // Fallback: navigate after maxDelayMs even if the GA beacon never fires.
+        const timeout = setTimeout(doNavigate, maxDelayMs)
+
+        gtagFn('event', eventName, {
+          // Called by gtag once the event has been dispatched.
+          event_callback: () => {
+            clearTimeout(timeout)
+            doNavigate()
+          },
+          // Tells gtag to call event_callback after at most maxDelayMs ms.
+          event_timeout: maxDelayMs,
+        })
+      })
+    }
+  })
+}

From c95903cfa93418f1389d68ef2c197b76cf8d591d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 10:11:10 +0000
Subject: [PATCH 13/13] E2E: verify click_makamujo_nicovideo /
 click_makamujo_landing GA events are fired

Co-authored-by: nahcnuj <2093896+nahcnuj@users.noreply.github.com>
---
 tests/e2e/makamujo-banner.test.ts | 51 +++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/tests/e2e/makamujo-banner.test.ts b/tests/e2e/makamujo-banner.test.ts
index 4aa08e2..07b0ec5 100644
--- a/tests/e2e/makamujo-banner.test.ts
+++ b/tests/e2e/makamujo-banner.test.ts
@@ -1,6 +1,6 @@
 /**
  * E2E tests for MakamujoBanner: verify that clicking the banner image-map
- * areas navigates to the correct URLs.
+ * areas navigates to the correct URLs and fires the correct GA events.
  *
  * The banner has two clickable zones:
  *   - The "ニコニコ生放送で配信中" badge (rect 105,67,306,87) → NicoNico live page
@@ -73,12 +73,11 @@ describe('MakamujoBanner E2E: click navigation', () => {
   }, 30_000)
 
   /**
-   * Opens the home page, intercepts the outgoing navigation triggered by
-   * clicking at (x, y) relative to the banner image, and returns the target URL.
-   * External resource and navigation requests are blocked to prevent loading
-   * third-party sites during tests.
+   * Opens the home page, clicks at (x, y) relative to the banner image, and
+   * returns both the intercepted outgoing navigation URL and the GA event name
+   * that was fired (captured from the dev-mode `console.log('[gtag]', ...)` call).
    */
-  async function clickBannerAt(x: number, y: number): Promise<string> {
+  async function clickBannerAt(x: number, y: number): Promise<{ url: string; gtagEventName: string }> {
     const context = await browser.newContext()
 
     const navigationUrlPromise = new Promise<string>((resolve) => {
@@ -96,6 +95,30 @@ describe('MakamujoBanner E2E: click navigation', () => {
     })
 
     const page = await context.newPage()
+
+    // In dev mode, setupMakamujoBannerTracking calls
+    //   console.log('[gtag]', 'event', eventName, { event_callback, event_timeout })
+    // Capture it by inspecting the console message arguments.
+    const gtagEventNamePromise = new Promise<string>((resolve) => {
+      page.on('console', (msg) => {
+        if (msg.type() !== 'log') return
+        const args = msg.args()
+        if (args.length < 3) return
+        void (async () => {
+          try {
+            const [prefix, command, eventName] = await Promise.all([
+              args[0].jsonValue(),
+              args[1].jsonValue(),
+              args[2].jsonValue(),
+            ])
+            if (prefix === '[gtag]' && command === 'event' && typeof eventName === 'string') {
+              resolve(eventName)
+            }
+          } catch { /* ignore serialization errors */ }
+        })()
+      })
+    })
+
     await page.goto(baseUrl)
 
     const img = page.locator('img[usemap="#makamujo-banner-map"]')
@@ -105,20 +128,24 @@ describe('MakamujoBanner E2E: click navigation', () => {
     // Click at (x, y) relative to the top-left corner of the banner image
     await page.mouse.click(box.x + x, box.y + y)
 
-    const url = await navigationUrlPromise
+    // The gtag console.log fires synchronously on click; navigation fires 500 ms
+    // later (fallback timeout). Both promises should resolve before the test timeout.
+    const [url, gtagEventName] = await Promise.all([navigationUrlPromise, gtagEventNamePromise])
     await context.close()
-    return url
+    return { url, gtagEventName }
   }
 
-  it('clicking the NicoNico badge navigates to the program viewing page', async () => {
+  it('clicking the NicoNico badge navigates to the program viewing page and fires click_makamujo_nicovideo GA event', async () => {
     // The badge occupies rect (105,67)-(306,87); its center is (205, 77)
-    const url = await clickBannerAt(205, 77)
+    const { url, gtagEventName } = await clickBannerAt(205, 77)
     expect(url).toBe('https://live.nicovideo.jp/watch/user/14171889')
+    expect(gtagEventName).toBe('click_makamujo_nicovideo')
   }, 30_000)
 
-  it('clicking outside the badge navigates to the Makamujo landing page', async () => {
+  it('clicking outside the badge navigates to the Makamujo landing page and fires click_makamujo_landing GA event', async () => {
     // (50, 30) is in the top-left area of the banner, clearly outside the badge rect
-    const url = await clickBannerAt(50, 30)
+    const { url, gtagEventName } = await clickBannerAt(50, 30)
     expect(url).toBe('https://www.nahcnuj.work/makamujo/index.html')
+    expect(gtagEventName).toBe('click_makamujo_landing')
   }, 30_000)
 })