Fix GIPHY UI cache mismatch

TODO.md

@@ -268,6 +268,19 @@
   - backend debug broadcasts
 
 ## Recent Change Log
+- Date: `2026-03-24`
+- What changed:
+  - Removed the large GIPHY image-mode info box entirely and replaced it with a minimal inline prompt bar plus `Powered by GIPHY` label.
+  - Hardened frontend visibility toggling so stale cached HTML/JS combinations do not crash on missing elements.
+  - Bumped the frontend asset version again so browsers are forced onto the latest image-search UI bundle after the GIPHY panel changes.
+- Why it changed:
+  - Real user logs showed a client-side `Cannot read properties of null (reading 'classList')` error caused by stale frontend asset mismatch, which prevented image results from rendering, and the remaining large image-mode box was still not desired in the UI.
+- How it was verified:
+  - log review of `ai-media-hub-2026-03-24T07-48-19-085Z.log`
+  - `node --check frontend/app.js`
+- What is still risky or incomplete:
+  - Users with aggressively cached browser sessions may still need one hard refresh to fully drop older HTML/JS combinations already loaded in an open tab.
+
 - Date: `2026-03-24`
 - What changed:
   - Simplified the GIPHY image-search UX so it presents raw search results instead of looking like an AI-evaluated result flow.

frontend/app.js

@@ -11,7 +11,7 @@ const searchSubmitButton = document.getElementById("searchSubmitButton");
 const searchResultsViewport = document.getElementById("searchResultsViewport");
 const mediaTypeToggles = Array.from(document.querySelectorAll("[data-media-type-toggle]"));
 const platformToggles = Array.from(document.querySelectorAll("[data-platform-toggle]"));
-const imageSearchSandbox = document.getElementById("imageSearchSandbox");
+const imagePromptBar = document.getElementById("imagePromptBar");
 const imagePromptChips = Array.from(document.querySelectorAll("[data-image-prompt]"));
 const dropzone = document.getElementById("dropzone");
 const fileInput = document.getElementById("fileInput");
@@ -169,6 +169,9 @@ function setStatus(label, progress) {
 }
 
 function setHidden(element, hidden, visibleDisplayClass = "flex") {
+  if (!element) {
+    return;
+  }
   element.classList.toggle("hidden", hidden);
   if (visibleDisplayClass) {
     element.classList.toggle(visibleDisplayClass, !hidden);
@@ -335,7 +338,7 @@ function renderImageResults(items = []) {
 function applyMediaTypeUI() {
   const isImageMode = activeMediaType === "image";
   syncMediaTypeButtons();
-  setHidden(imageSearchSandbox, !isImageMode, "block");
+  setHidden(imagePromptBar, !isImageMode, "flex");
   setHidden(queryVariants, true, "");
   showWarning("");
   searchResultsViewport.classList.toggle("image-results-scroll", isImageMode);

frontend/index.html

@@ -52,24 +52,12 @@
             <input id="searchQuery" type="text" placeholder="한글 검색어를 입력하세요" class="flex-1 rounded-2xl border border-white/10 bg-black/40 px-5 py-4 text-base text-white outline-none ring-0 placeholder:text-zinc-500" />
             <button id="searchSubmitButton" class="rounded-2xl border border-white bg-white px-7 py-4 text-base font-medium text-black transition hover:bg-zinc-200">AI Search</button>
           </form>
-          <div id="imageSearchSandbox" class="mt-4 hidden rounded-3xl border border-white/10 bg-[linear-gradient(135deg,rgba(250,204,21,0.07),rgba(59,130,246,0.08))] p-4">
-            <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
-              <div class="space-y-2">
-                <div class="flex flex-wrap items-center gap-3">
-                  <p class="text-xs uppercase tracking-[0.25em] text-zinc-500">GIPHY Image Search</p>
-                  <span class="rounded-full border border-white/10 bg-black/30 px-3 py-1 text-[11px] uppercase tracking-[0.24em] text-zinc-300">Powered by GIPHY</span>
-                </div>
-                <p class="max-w-2xl text-sm leading-6 text-zinc-300">
-                  어떤 언어로 검색해도 GIPHY 이미지/GIF 검색 결과를 최대 100개까지 내부 스크롤 패널에서 바로 탐색할 수 있습니다.
-                </p>
-              </div>
-              <div class="flex flex-wrap gap-2">
+          <div id="imagePromptBar" class="mt-4 hidden flex-wrap items-center gap-2">
+            <span class="mr-2 text-[11px] uppercase tracking-[0.24em] text-zinc-500">Powered by GIPHY</span>
             <button type="button" class="image-prompt-chip rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-200" data-image-prompt="cinematic city night">Cinematic City</button>
             <button type="button" class="image-prompt-chip rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-200" data-image-prompt="vintage fashion portrait">Vintage Portrait</button>
             <button type="button" class="image-prompt-chip rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-200" data-image-prompt="minimal product mockup">Product Mockup</button>
           </div>
-            </div>
-          </div>
           <div id="searchWarning" class="mt-3 hidden rounded-2xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-200"></div>
           <div id="queryVariants" class="hidden"></div>
           <div id="searchResultsViewport" class="mt-6">
@@ -267,6 +255,6 @@
       </button>
     </template>
 
-    <script src="/app.js?v=20260324a" defer></script>
+    <script src="/app.js?v=20260324b" defer></script>
   </body>
 </html>