From 284b46cd4316502fd4c95dd263a3c98b6f9a9e6b Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Mon, 10 Jun 2024 11:53:51 -0600
Subject: [PATCH] Add ActionsPanel

---
 .../client/src/components/ActionsPanel.tsx    | 196 ++++++++++++++++++
 packages/client/src/components/MapPanel.tsx   |  99 +++++----
 .../src/components/StatsPanel/index.tsx       |   2 +-
 .../src/components/TileDetailsPanel/index.tsx |   2 +-
 packages/client/src/pages/GameBoard.tsx       |  44 ++--
 5 files changed, 275 insertions(+), 68 deletions(-)
 create mode 100644 packages/client/src/components/ActionsPanel.tsx

diff --git a/packages/client/src/components/ActionsPanel.tsx b/packages/client/src/components/ActionsPanel.tsx
new file mode 100644
index 000000000..5cc0c339a
--- /dev/null
+++ b/packages/client/src/components/ActionsPanel.tsx
@@ -0,0 +1,196 @@
+import { Stack, Text } from '@chakra-ui/react';
+
+export const ActionsPanel = (): JSX.Element => {
+  return (
+    <Stack spacing={8}>
+      <Stack>
+        <Text>
+          You attack{' '}
+          <Text as="span" color="green">
+            Green Slime
+          </Text>{' '}
+          for{' '}
+          <Text as="span" color="red">
+            2 damage
+          </Text>
+          .
+        </Text>
+        <Text>
+          <Text as="span" color="green">
+            Green Slime
+          </Text>{' '}
+          attacks and misses!
+        </Text>
+        <Text>
+          You attack{' '}
+          <Text as="span" color="green">
+            Green Slime
+          </Text>{' '}
+          for{' '}
+          <Text as="span" color="red">
+            1 damage
+          </Text>
+          .
+        </Text>
+        <Text>Green slime is slain! You gain 2 $GOLD!</Text>
+      </Stack>
+      <Stack>
+        <Text>
+          You gain 2{' '}
+          <Text as="span" color="yellow">
+            $GOLD
+          </Text>
+          !
+        </Text>
+        <Text>
+          You gain 3{' '}
+          <Text as="span" color="green">
+            experience
+          </Text>
+          !
+        </Text>
+      </Stack>
+      <Stack>
+        <Text>
+          You attack{' '}
+          <Text as="span" color="green">
+            Green Slime
+          </Text>{' '}
+          for{' '}
+          <Text as="span" color="red">
+            2 damage
+          </Text>
+          .
+        </Text>
+        <Text>
+          <Text as="span" color="green">
+            Green Slime
+          </Text>{' '}
+          attacks and misses!
+        </Text>
+        <Text>
+          You attack{' '}
+          <Text as="span" color="green">
+            Green Slime
+          </Text>{' '}
+          for{' '}
+          <Text as="span" color="red">
+            1 damage
+          </Text>
+          .
+        </Text>
+        <Text>Green slime is slain! You gain 2 $GOLD!</Text>
+      </Stack>
+      <Stack>
+        <Text>
+          You gain 2{' '}
+          <Text as="span" color="yellow">
+            $GOLD
+          </Text>
+          !
+        </Text>
+        <Text>
+          You gain 3{' '}
+          <Text as="span" color="green">
+            experience
+          </Text>
+          !
+        </Text>
+      </Stack>
+      <Stack>
+        <Text>
+          You attack{' '}
+          <Text as="span" color="green">
+            Green Slime
+          </Text>{' '}
+          for{' '}
+          <Text as="span" color="red">
+            2 damage
+          </Text>
+          .
+        </Text>
+        <Text>
+          <Text as="span" color="green">
+            Green Slime
+          </Text>{' '}
+          attacks and misses!
+        </Text>
+        <Text>
+          You attack{' '}
+          <Text as="span" color="green">
+            Green Slime
+          </Text>{' '}
+          for{' '}
+          <Text as="span" color="red">
+            1 damage
+          </Text>
+          .
+        </Text>
+        <Text>Green slime is slain! You gain 2 $GOLD!</Text>
+      </Stack>
+      <Stack>
+        <Text>
+          You gain 2{' '}
+          <Text as="span" color="yellow">
+            $GOLD
+          </Text>
+          !
+        </Text>
+        <Text>
+          You gain 3{' '}
+          <Text as="span" color="green">
+            experience
+          </Text>
+          !
+        </Text>
+      </Stack>
+      <Stack>
+        <Text>
+          You attack{' '}
+          <Text as="span" color="green">
+            Green Slime
+          </Text>{' '}
+          for{' '}
+          <Text as="span" color="red">
+            2 damage
+          </Text>
+          .
+        </Text>
+        <Text>
+          <Text as="span" color="green">
+            Green Slime
+          </Text>{' '}
+          attacks and misses!
+        </Text>
+        <Text>
+          You attack{' '}
+          <Text as="span" color="green">
+            Green Slime
+          </Text>{' '}
+          for{' '}
+          <Text as="span" color="red">
+            1 damage
+          </Text>
+          .
+        </Text>
+        <Text>Green slime is slain! You gain 2 $GOLD!</Text>
+      </Stack>
+      <Stack>
+        <Text>
+          You gain 2{' '}
+          <Text as="span" color="yellow">
+            $GOLD
+          </Text>
+          !
+        </Text>
+        <Text>
+          You gain 3{' '}
+          <Text as="span" color="green">
+            experience
+          </Text>
+          !
+        </Text>
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/packages/client/src/components/MapPanel.tsx b/packages/client/src/components/MapPanel.tsx
index 881bc578c..1c533ff92 100644
--- a/packages/client/src/components/MapPanel.tsx
+++ b/packages/client/src/components/MapPanel.tsx
@@ -22,6 +22,15 @@ export const MapPanel = (): JSX.Element => {
 
   const onMove = useCallback(
     async (direction: 'up' | 'down' | 'left' | 'right') => {
+      if (
+        (direction === 'up' && position.y === 9) ||
+        (direction === 'down' && position.y === 0) ||
+        (direction === 'left' && position.x === 0) ||
+        (direction === 'right' && position.x === 9)
+      ) {
+        return;
+      }
+
       setPosition(prevPosition => {
         switch (direction) {
           case 'up':
@@ -37,58 +46,58 @@ export const MapPanel = (): JSX.Element => {
         }
       });
     },
-    [],
+    [position],
   );
 
   return (
-    <VStack h="100%" w="100%">
-      <Box
-        border="2px solid black"
-        borderRight="none"
-        borderTop="none"
-        display="grid"
-        gridTemplateColumns="repeat(10, 1fr)"
-        gridTemplateRows="repeat(10, 1fr)"
-      >
-        {[...Array(100)].map((_, i) => {
-          const row = 9 - Math.floor(i / 10); // Reverse the row
-          const col = i % 10;
-          const currentTile = position.x === col && position.y === row;
+    <VStack>
+      <Box w="100%">
+        <Box
+          border="2px solid black"
+          borderRight="none"
+          borderTop="none"
+          display="grid"
+          gridTemplateColumns="repeat(10, 1fr)"
+          gridTemplateRows="repeat(10, 1fr)"
+        >
+          {[...Array(100)].map((_, i) => {
+            const row = 9 - Math.floor(i / 10); // Reverse the row
+            const col = i % 10;
+            const currentTile = position.x === col && position.y === row;
 
-          const hasSafeZoneTopBorder =
-            row === SAFE_ZONE_AREA.topLeft.y &&
-            col >= SAFE_ZONE_AREA.topLeft.x &&
-            col <= SAFE_ZONE_AREA.bottomRight.x;
+            const hasSafeZoneTopBorder =
+              row === SAFE_ZONE_AREA.topLeft.y &&
+              col >= SAFE_ZONE_AREA.topLeft.x &&
+              col <= SAFE_ZONE_AREA.bottomRight.x;
 
-          const hasSafeZoneRightBorder =
-            col === SAFE_ZONE_AREA.bottomRight.x &&
-            row >= SAFE_ZONE_AREA.bottomRight.y &&
-            row <= SAFE_ZONE_AREA.topLeft.y;
+            const hasSafeZoneRightBorder =
+              col === SAFE_ZONE_AREA.bottomRight.x &&
+              row >= SAFE_ZONE_AREA.bottomRight.y &&
+              row <= SAFE_ZONE_AREA.topLeft.y;
 
-          return (
-            <Box
-              borderTop={hasSafeZoneTopBorder ? '3px solid' : '2px solid'}
-              borderTopColor={hasSafeZoneTopBorder ? 'yellow' : 'black'}
-              borderRight={hasSafeZoneRightBorder ? '3px solid' : '2px solid'}
-              borderRightColor={hasSafeZoneRightBorder ? 'yellow' : 'black'}
-              key={`map-tile${i}`}
-              h="30px"
-              w="30px"
-            >
-              {currentTile && <CharacterPiece />}
-            </Box>
-          );
-        })}
-      </Box>
-      <HStack justifyContent="space-between" w="100%">
-        <HStack>
-          <BiSolidNavigation />
-          <Text fontWeight={700} size="sm">
-            {position.x}, {position.y}
-          </Text>
+            return (
+              <VStack
+                borderTop={hasSafeZoneTopBorder ? '3px solid' : '2px solid'}
+                borderTopColor={hasSafeZoneTopBorder ? 'yellow' : 'black'}
+                borderRight={hasSafeZoneRightBorder ? '3px solid' : '2px solid'}
+                borderRightColor={hasSafeZoneRightBorder ? 'yellow' : 'black'}
+                key={`map-tile${i}`}
+              >
+                {currentTile && <CharacterPiece />}
+              </VStack>
+            );
+          })}
+        </Box>
+        <HStack justifyContent="space-between" w="100%">
+          <HStack>
+            <BiSolidNavigation />
+            <Text fontWeight={700} size="sm">
+              {position.x}, {position.y}
+            </Text>
+          </HStack>
+          <Text size="xs">Dark Cave - 2,344 Players</Text>
         </HStack>
-        <Text size="xs">Dark Cave - 2,344 Players</Text>
-      </HStack>
+      </Box>
       <VStack
         alignItems="stretch"
         h={175}
diff --git a/packages/client/src/components/StatsPanel/index.tsx b/packages/client/src/components/StatsPanel/index.tsx
index 703916484..ae8c8a860 100644
--- a/packages/client/src/components/StatsPanel/index.tsx
+++ b/packages/client/src/components/StatsPanel/index.tsx
@@ -11,7 +11,7 @@ import { TopBar } from './TopBar';
 
 export const StatsPanel = (): JSX.Element => {
   return (
-    <VStack h="100%" p={3}>
+    <VStack h="100%">
       <TopBar />
       <Spacer />
       <Stats />
diff --git a/packages/client/src/components/TileDetailsPanel/index.tsx b/packages/client/src/components/TileDetailsPanel/index.tsx
index c4275cdb5..baaa3edc1 100644
--- a/packages/client/src/components/TileDetailsPanel/index.tsx
+++ b/packages/client/src/components/TileDetailsPanel/index.tsx
@@ -6,7 +6,7 @@ import { SafeZone } from './SafeZone';
 
 export const TileDetailsPanel = (): JSX.Element => {
   return (
-    <Grid h="100%" p={3} templateColumns="repeat(4, 1fr)" gap={5}>
+    <Grid h="100%" templateColumns="repeat(4, 1fr)" gap={5}>
       <GridItem colSpan={2}>
         <Monsters />
       </GridItem>
diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx
index f3cc16be6..1621f9361 100644
--- a/packages/client/src/pages/GameBoard.tsx
+++ b/packages/client/src/pages/GameBoard.tsx
@@ -1,5 +1,6 @@
 import { Grid, GridItem, Heading } from '@chakra-ui/react';
 
+import { ActionsPanel } from '../components/ActionsPanel';
 import { MapPanel } from '../components/MapPanel';
 import { StatsPanel } from '../components/StatsPanel';
 import { TileDetailsPanel } from '../components/TileDetailsPanel';
@@ -10,62 +11,63 @@ export const GameBoard = (): JSX.Element => {
       gap={2}
       minH="100vh"
       mt={4}
-      templateColumns={{ base: 'repeat(8, 1fr)', md: 'repeat(8, 1fr)' }}
+      templateColumns={{ base: 'repeat(16, 1fr)', md: 'repeat(16, 1fr)' }}
       templateRows={{ base: 'repeat(13, 1fr)', md: 'repeat(12, 1fr)' }}
     >
       <GridItem
-        border="solid"
-        colSpan={{ base: 2, md: 2 }}
+        border="2px solid"
+        colSpan={{ base: 3, md: 4 }}
         display={{ base: 'none', md: 'block' }}
-        padding="5px"
+        p={4}
         rowSpan={{ base: 12, md: 12 }}
       >
         <StatsPanel />
       </GridItem>
       <GridItem
-        border="solid"
-        colSpan={{ base: 8, md: 4 }}
-        colStart={{ base: 0, md: 0 }}
-        padding="5px"
+        border="2px solid"
+        colSpan={{ base: 10, md: 8 }}
+        colStart={{ base: 0, md: 5 }}
+        p={4}
         rowSpan={{ base: 4, md: 6 }}
         rowStart={{ base: 0, md: 0 }}
       >
         <TileDetailsPanel />
       </GridItem>
       <GridItem
-        background="mintcream"
-        border="solid"
-        colSpan={{ base: 8, md: 4 }}
-        colStart={{ base: 0, md: 3 }}
-        padding="5px"
+        border="2px solid"
+        colSpan={{ base: 10, md: 8 }}
+        colStart={{ base: 0, md: 5 }}
+        maxH={450}
+        overflowY="auto"
+        p={4}
         rowSpan={{ base: 4, md: 6 }}
         rowStart={{ base: 5, md: 7 }}
       >
-        <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>ActionPanel</Heading>
+        <ActionsPanel />
       </GridItem>
       <GridItem
-        colSpan={{ base: 8, md: 2 }}
-        colStart={{ base: 0, md: 7 }}
+        colSpan={{ base: 10, md: 4 }}
+        colStart={{ base: 0, md: 13 }}
         rowSpan={{ base: 4, md: 8 }}
         rowStart={{ base: 9, md: 0 }}
       >
         <MapPanel />
       </GridItem>
-      <GridItem
+      {/* <GridItem
         background="lavender"
-        border="solid"
+        border="2px solid"
         colSpan={{ base: 0, md: 2 }}
         colStart={{ base: 0, md: 7 }}
         display={{ base: 'none', md: 'block' }}
-        padding="5px"
+        p={4}
         rowSpan={{ base: 0, md: 4 }}
         rowStart={{ base: 0, md: 9 }}
       >
         <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Chat</Heading>
-      </GridItem>
+      </GridItem> */}
       <GridItem
         background="plum"
-        border="solid"
+        border="2px solid"
         colSpan={{ base: 8, md: 0 }}
         colStart={{ base: 0, md: 0 }}
         display={{ base: 'block', md: 'none' }}