kiku-agent 1.3.1 → 1.3.3

package/server/web-chat/ui/templates/body.html

@@ -6,13 +6,13 @@
   <aside class="app-sidebar" id="app-sidebar" aria-label="KIKU AGENT navigation">
     <div class="sidebar-brand-row">
       <button type="button" class="sidebar-brand" onclick="createNewChatSession()" aria-label="KIKU AGENT — เริ่มแชทใหม่">
-        <span class="brand-spark"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2-4.5-4.4 6.2-.9z"/></svg></span>
+        <span class="brand-spark"><i class="bi bi-star-fill" aria-hidden="true" style="font-size:18px;"></i></span>
         <span class="brand-text">
           <strong class="brand-name-wrap">KIKU AGENT</strong>
         </span>
       </button>
       <button type="button" class="sidebar-icon-button sidebar-collapse-button" id="btn-sidebar-collapse" onclick="toggleAppSidebar()" title="ย่อ/ขยายแถบเมนู" aria-label="ย่อ/ขยายแถบเมนู" aria-expanded="true">
-        <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
+        <i class="bi bi-list" aria-hidden="true" style="font-size:20px;"></i>
       </button>
     </div>
 
@@ -22,40 +22,45 @@
           <span data-sidebar-i18n="exploreHeading">Explore &amp; Features</span>
         </div>
         <button type="button" class="sidebar-nav-item" onclick="openSessionsModal()" title="ค้นหาประวัติการสนทนา">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+          <i class="bi bi-search" aria-hidden="true" style="font-size:18px;"></i>
           <span data-sidebar-i18n="search">Search Chat</span>
         </button>
         <button type="button" class="sidebar-nav-item" id="sidebar-music-button" onclick="openMusicModal()" title="คลังเพลงและ Jukebox">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+          <i class="bi bi-music-note-beamed" aria-hidden="true" style="font-size:18px;"></i>
           <span data-sidebar-i18n="music">Music Jukebox</span>
         </button>
         <button type="button" class="sidebar-nav-item" onclick="openQuizModal()" title="เกมทายปัญหาแฟนคลับ">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.45 1-1 1H7.5a1.5 1.5 0 0 0 0 3h9a1.5 1.5 0 0 0 0-3H15c-.55 0-1-.45-1-1v-2.34"/><path d="M18 4H6v7a6 6 0 0 0 12 0V4Z"/></svg>
+          <i class="bi bi-trophy" aria-hidden="true" style="font-size:18px;"></i>
           <span data-sidebar-i18n="quiz">Fan Quiz Challenge</span>
         </button>
-        <button type="button" class="sidebar-nav-item" onclick="renderTimelineModal()" title="ไทม์ไลน์เส้นทางอาชีพ">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="20" x2="12" y2="4"/><polyline points="6 10 12 4 18 10"/><line x1="4" y1="20" x2="20" y2="20"/></svg>
+        <button type="button" class="sidebar-nav-item" onclick="openTimelineModal()" title="ไทม์ไลน์เส้นทางอาชีพ">
+          <i class="bi bi-clock-history" aria-hidden="true" style="font-size:18px;"></i>
           <span data-sidebar-i18n="timeline">Career Timeline</span>
         </button>
         <button type="button" class="sidebar-nav-item" onclick="toggleSuggestionsDrawer()" title="หัวข้อคำถามแนะนำ">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+          <i class="bi bi-stars" aria-hidden="true" style="font-size:18px;"></i>
           <span data-sidebar-i18n="prompts">Suggested Prompts</span>
         </button>
         <button type="button" class="sidebar-nav-item" onclick="toggleSavedPrompts()" title="พรอมต์ที่บันทึกไว้">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
+          <i class="bi bi-bookmark" aria-hidden="true" style="font-size:18px;"></i>
           <span data-sidebar-i18n="saved">Saved Prompts</span>
         </button>
         <button type="button" class="sidebar-nav-item" onclick="openSponsorsModal()" title="ผู้สนับสนุนโครงการ (Sponsors & Ads)">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>
+          <i class="bi bi-award" aria-hidden="true" style="font-size:18px;"></i>
           <span data-sidebar-i18n="sponsors">Sponsors &amp; Ads</span>
         </button>
+        <button type="button" class="sidebar-nav-item" onclick="openMcpToolsModal()" title="สถานะ MCP Server และรายการ Tool ทั้งหมดในระบบ">
+          <i class="bi bi-cpu" aria-hidden="true" style="font-size:18px;"></i>
+          <span data-sidebar-i18n="mcpTools">MCP &amp; Tools</span>
+          <span class="mcp-count-pill" id="sidebar-mcp-count">68+</span>
+        </button>
       </nav>
 
       <section class="sidebar-section sidebar-history" aria-labelledby="history-section-title">
         <div class="sidebar-section-heading static">
           <span id="history-section-title" data-sidebar-i18n="history">Chats</span>
           <button type="button" onclick="openSessionsModal()" title="ดูประวัติทั้งหมด" aria-label="ดูประวัติทั้งหมด">
-            <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 8v4l3 2"/><circle cx="12" cy="12" r="9"/></svg>
+            <i class="bi bi-clock-history" aria-hidden="true" style="font-size:15px;"></i>
           </button>
         </div>
         <div class="sidebar-session-list" id="sidebar-session-list" aria-live="polite"></div>
@@ -70,15 +75,15 @@
       <section class="sidebar-section sidebar-sponsors" aria-label="ผู้สนับสนุนโครงการ">
         <div class="sidebar-section-heading static" style="display:flex; justify-content:space-between; align-items:center;">
           <span style="display:flex; align-items:center; gap:6px; font-weight:700; font-size:11px; letter-spacing:0.04em;">
-            <span style="color:#f472b6;">📢</span>
+            <span style="color:#f472b6;">•</span>
             <span data-sidebar-i18n="sponsorsHeading">Sponsor Spotlight</span>
           </span>
           <div style="display:flex; gap:4px; align-items:center;">
             <button type="button" class="btn-sidebar-heading-action" onclick="cycleSidebarAd(event)" title="หมุนเวียนโฆษณา (Next Sponsor)" aria-label="หมุนเวียนโฆษณา">
-              <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
+              <i class="bi bi-arrow-clockwise" aria-hidden="true" style="font-size:13px;"></i>
             </button>
             <button type="button" class="btn-sidebar-heading-action" onclick="openSponsorsModal(event)" title="ดูผู้สนับสนุนทั้งหมด" aria-label="ดูผู้สนับสนุนทั้งหมด">
-              <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+              <i class="bi bi-box-arrow-up-right" aria-hidden="true" style="font-size:13px;"></i>
             </button>
           </div>
         </div>
@@ -92,28 +97,28 @@
           <span data-sidebar-i18n="controlsHeading">System Controls</span>
         </div>
         <button type="button" class="sidebar-nav-item" onclick="exportChat()" title="ส่งออกบทสนทนาเป็นไฟล์ Markdown">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          <i class="bi bi-download" aria-hidden="true" style="font-size:18px;"></i>
           <span data-sidebar-i18n="export">Export Chat</span>
         </button>
         <button type="button" class="sidebar-nav-item" onclick="togglePetals()" title="เปิด/ปิด กลีบดอกซากุระ">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2a4 4 0 0 0-4 4c0 3 4 5 4 5s4-2 4-5a4 4 0 0 0-4-4Z"/><path d="M12 22a4 4 0 0 0 4-4c0-3-4-5-4-5s-4 2-4 5a4 4 0 0 0 4 4Z"/><path d="M2 12a4 4 0 0 0 4 4c3 0 5-4 5-4s-2-4-5-4a4 4 0 0 0-4 4Z"/><path d="M22 12a4 4 0 0 0-4-4c-3 0-5 4-5 4s2 4 5 4a4 4 0 0 0 4-4Z"/></svg>
+          <i class="bi bi-flower1" aria-hidden="true" style="font-size:18px;"></i>
           <span id="sidebar-petals-label" data-sidebar-i18n="petals">Sakura Petals</span>
         </button>
         <button type="button" class="sidebar-nav-item" onclick="toggleTheme()" title="สลับโหมด กลางวัน / กลางคืน">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+          <i class="bi bi-moon-stars" aria-hidden="true" style="font-size:18px;"></i>
           <span id="sidebar-theme-label" data-sidebar-i18n="theme">Theme Mode</span>
         </button>
         <button type="button" class="sidebar-nav-item" onclick="toggleSound()" title="เปิด/ปิด เสียงเอฟเฟกต์">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>
+          <i class="bi bi-volume-up" aria-hidden="true" style="font-size:18px;"></i>
           <span id="sidebar-sound-label" data-sidebar-i18n="sound">Sound FX</span>
         </button>
         <button type="button" class="sidebar-nav-item" onclick="cycleLanguage()" title="เปลี่ยนภาษา (TH / 中文 / EN)">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+          <i class="bi bi-translate" aria-hidden="true" style="font-size:18px;"></i>
           <span id="sidebar-lang-label" data-sidebar-i18n="lang">Language (TH)</span>
         </button>
-        <button type="button" class="sidebar-nav-item" id="btn-settings-toggle" onclick="openSettingsModal()" title="ตั้งค่าโมเดลและ AI Provider">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
-          <span id="sidebar-settings-label" data-sidebar-i18n="settings">AI Settings (Model)</span>
+        <button type="button" class="sidebar-nav-item" id="btn-settings-toggle" onclick="window.location.href='/settings'" title="ตั้งค่าโมเดลและ AI Provider เต็มรูปแบบ">
+          <i class="bi bi-gear" aria-hidden="true" style="font-size:18px;"></i>
+          <span id="sidebar-settings-label" data-sidebar-i18n="settings">AI Settings (/settings)</span>
         </button>
       </section>
     </div>
@@ -122,13 +127,13 @@
   <header class="workspace-toolbar">
     <div class="toolbar-leading">
       <button type="button" class="toolbar-sidebar-button" id="toolbar-sidebar-button" onclick="toggleAppSidebar()" title="เปิด/ปิดแถบเมนู (Sidebar)" aria-label="เปิดแถบเมนู" aria-expanded="false">
-        <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
+        <i class="bi bi-list" aria-hidden="true" style="font-size:20px;"></i>
       </button>
       <span class="toolbar-title" style="font-weight: 700; font-size: 13px; color: var(--text);">KIKU AGENT</span>
     </div>
     <div class="toolbar-trailing" style="display: flex; align-items: center; gap: 8px;">
-      <button type="button" class="toolbar-sidebar-button" id="btn-mobile-settings-toggle" onclick="openSettingsModal()" title="ตั้งค่าโมเดลและ AI Provider" aria-label="ตั้งค่าโมเดล">
-        <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+      <button type="button" class="toolbar-sidebar-button" id="btn-mobile-settings-toggle" onclick="window.location.href='/settings'" title="ตั้งค่าโมเดลและ AI Provider" aria-label="ตั้งค่าโมเดล">
+        <i class="bi bi-gear" aria-hidden="true" style="font-size:18px;"></i>
       </button>
     </div>
   </header>
@@ -138,14 +143,26 @@
       <div id="chat-container">
         <div class="welcome-hero" id="welcome-hero">
           <section class="hero-media" aria-label="แกลเลอรีภาพจวีจิ้งอี">
-            <figure class="hero-media-frame hero-media-primary">
-              <img src="/images/0040jbadgy1id6am4yxqfj61s82dn1kx02.jpg" alt="จวีจิ้งอีในลุคชุดสีครีม" width="690" height="903" fetchpriority="high" decoding="async">
+            <figure class="hero-media-frame hero-media-primary" data-hero-slot="primary" tabindex="0" role="region" aria-label="ภาพสล็อตหลัก">
+              <img id="hero-img-primary" src="/images/0040jbadgy1id6am4yxqfj61s82dn1kx02.jpg" alt="จวีจิ้งอีในลุคชุดสีครีม" width="690" height="903" fetchpriority="high" decoding="async">
+              <button type="button" class="hero-slot-action" onclick="openHeroGalleryPicker('primary')" title="เลือกภาพสล็อตหลัก" aria-label="เลือกภาพสล็อตหลัก">
+                <i class="bi bi-image" aria-hidden="true" style="font-size:13px;"></i>
+                <span>เปลี่ยนภาพ</span>
+              </button>
             </figure>
-            <figure class="hero-media-frame hero-media-secondary">
-              <img src="/images/008ET7Legy1ig9s8bab6sj30i20o7go1.jpg" alt="ภาพพอร์ตเทรตจวีจิ้งอีกลางแสงธรรมชาติ" width="650" height="871" decoding="async">
+            <figure class="hero-media-frame hero-media-secondary" data-hero-slot="secondary" tabindex="0" role="region" aria-label="ภาพสล็อตรอง">
+              <img id="hero-img-secondary" src="/images/008ET7Legy1ig9s8bab6sj30i20o7go1.jpg" alt="ภาพพอร์ตเทรตจวีจิ้งอีกลางแสงธรรมชาติ" width="650" height="871" decoding="async">
+              <button type="button" class="hero-slot-action" onclick="openHeroGalleryPicker('secondary')" title="เลือกภาพสล็อตรอง" aria-label="เลือกภาพสล็อตรอง">
+                <i class="bi bi-image" aria-hidden="true" style="font-size:13px;"></i>
+                <span>เปลี่ยนภาพ</span>
+              </button>
             </figure>
-            <figure class="hero-media-frame hero-media-poster">
-              <img src="/images/008ET7Legy1ig9s8cbxkzj30i20mxmzh.jpg" alt="โปสเตอร์ซีรีส์ In Blossom" width="1000" height="1778" decoding="async">
+            <figure class="hero-media-frame hero-media-poster" data-hero-slot="poster" tabindex="0" role="region" aria-label="ภาพสล็อตโปสเตอร์">
+              <img id="hero-img-poster" src="/images/008ET7Legy1ig9s8cbxkzj30i20mxmzh.jpg" alt="โปสเตอร์ซีรีส์ In Blossom" width="1000" height="1778" decoding="async">
+              <button type="button" class="hero-slot-action" onclick="openHeroGalleryPicker('poster')" title="เลือกภาพสล็อตโปสเตอร์" aria-label="เลือกภาพสล็อตโปสเตอร์">
+                <i class="bi bi-image" aria-hidden="true" style="font-size:13px;"></i>
+                <span>เปลี่ยนภาพ</span>
+              </button>
             </figure>
             <div class="hero-media-mark" aria-hidden="true">
               <strong>JU JINGYI</strong>
@@ -167,15 +184,15 @@
       <div class="suggestions-drawer" id="suggestions-drawer">
         <div class="suggestions-header-bar">
           <span class="suggestions-title">
-            <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+            <i class="bi bi-star" aria-hidden="true" style="font-size:13px;"></i>
             <span id="suggestions-title-text">หัวข้อคำถามแนะนำ</span>
           </span>
           <span class="suggestions-header-actions">
             <button type="button" class="btn-ai-suggest" id="btn-ai-suggest" onclick="requestAiSuggestions()" title="ให้ KIKU AI สร้างคำถาม">
-              <span id="btn-ai-suggest-label">✨ AI สร้างคำถาม</span>
+              <span id="btn-ai-suggest-label">• AI สร้างคำถาม</span>
             </button>
             <button type="button" class="btn-toggle-drawer" onclick="toggleSuggestionsDrawer()">
-              <svg aria-hidden="true" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              <i class="bi bi-x-lg" aria-hidden="true" style="font-size:11px;"></i>
               <span id="suggestions-close-label">ย่อเก็บ</span>
             </button>
           </span>
@@ -198,7 +215,7 @@
           <div class="mini-card-horizontal-main">
             <div class="mini-vinyl-art-wrap">
               <div class="mini-vinyl-art-disc" id="mini-vinyl-art-disc">
-                <img id="mini-player-poster" class="mini-card-poster" src="https://img.youtube.com/vi/9AeErG03SZw/hqdefault.jpg" alt="Poster" onerror="this.onerror=null;this.src='https://img.youtube.com/vi/9AeErG03SZw/hqdefault.jpg';" />
+                <img id="mini-player-poster" class="mini-card-poster" src="https://img.youtube.com/vi/9AeErG03SZw/hqdefault.jpg" alt="Poster" width="50" height="50" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='https://img.youtube.com/vi/9AeErG03SZw/hqdefault.jpg';" />
                 <div class="mini-vinyl-center-pin"></div>
               </div>
               <div class="poster-glow-aura" id="mini-poster-glow"></div>
@@ -231,16 +248,16 @@
                 </div>
               </div>
               <button type="button" class="mini-card-btn-icon" id="btn-mini-video-toggle" onclick="toggleMiniPlayerVideo()" title="สลับดูวิดีโอ MV">
-                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="15" x="2" y="5" rx="2"/><polygon points="10 9 15 12.5 10 16 10 9"/></svg>
+                <i class="bi bi-camera-video" aria-hidden="true" style="font-size:14px;"></i>
               </button>
               <button type="button" class="mini-card-btn-icon" onclick="openMusicModal()" title="เปิดคลังเพลงทั้งหมด (46 บทเพลง)">
-                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+                <i class="bi bi-music-note-beamed" aria-hidden="true" style="font-size:14px;"></i>
               </button>
               <button type="button" class="mini-card-btn-icon" onclick="setMiniPlayerExpanded(false)" title="ย่อขนาด">
-                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                <i class="bi bi-dash-lg" aria-hidden="true" style="font-size:14px;"></i>
               </button>
               <button type="button" class="mini-card-btn-icon" onclick="closeMiniPlayer()" title="ปิดเครื่องเล่น">
-                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                <i class="bi bi-x-lg" aria-hidden="true" style="font-size:14px;"></i>
               </button>
             </div>
           </div>
@@ -256,7 +273,7 @@
 
           <div class="mini-card-controls-row">
             <button type="button" class="btn-mini-ctl" id="btn-mini-shuffle" onclick="toggleMiniPlayerShuffle()" title="สลับโหมดสุ่มเพลง">
-              <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
+              <i class="bi bi-shuffle" aria-hidden="true" style="font-size:15px;"></i>
             </button>
             <button type="button" class="btn-mini-ctl" onclick="prevMiniPlayerTrack()" title="เพลงก่อนหน้า">
               <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5" stroke="currentColor" stroke-width="2"/></svg>
@@ -269,7 +286,7 @@
               <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19" stroke="currentColor" stroke-width="2"/></svg>
             </button>
             <button type="button" class="btn-mini-ctl" id="btn-mini-repeat" onclick="toggleMiniPlayerRepeat()" title="โหมดวนซ้ำ">
-              <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
+              <i class="bi bi-repeat" aria-hidden="true" style="font-size:15px;"></i>
             </button>
           </div>
         </div>
@@ -281,7 +298,7 @@
               <circle class="mini-disc-progress-bg" cx="36" cy="36" r="34"></circle>
               <circle class="mini-disc-progress-val" id="mini-disc-progress-circle" cx="36" cy="36" r="34"></circle>
             </svg>
-            <img id="mini-disc-thumb" class="mini-disc-thumb" src="https://img.youtube.com/vi/9AeErG03SZw/hqdefault.jpg" alt="Disc" onerror="this.onerror=null;this.src='https://img.youtube.com/vi/9AeErG03SZw/hqdefault.jpg';" />
+            <img id="mini-disc-thumb" class="mini-disc-thumb" src="https://img.youtube.com/vi/9AeErG03SZw/hqdefault.jpg" alt="Disc" width="32" height="32" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='https://img.youtube.com/vi/9AeErG03SZw/hqdefault.jpg';" />
             <div class="mini-disc-overlay">
               <span id="mini-disc-icon"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg></span>
             </div>
@@ -291,7 +308,7 @@
             <span class="mini-disc-pill-hint">กำลังเล่นเพลง • คลิกเพื่อขยาย</span>
           </div>
           <div class="mini-disc-expand-icon">
-            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+            <i class="bi bi-arrows-angle-expand" aria-hidden="true" style="font-size:14px;"></i>
           </div>
         </button>
       </aside>
@@ -307,7 +324,7 @@
               <div class="voice-live-orb" title="ไมโครโฟนทำงานอยู่">
                 <span class="voice-orb-ring ring-1"></span>
                 <span class="voice-orb-core">
-                  <svg aria-hidden="true" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+                  <i class="bi bi-mic" aria-hidden="true" style="font-size:11px;"></i>
                 </span>
               </div>
               <span class="voice-live-title">กำลังฟัง...</span>
@@ -328,7 +345,7 @@
               </div>
               <div class="voice-hud-actions">
                 <button type="button" class="btn-voice-mini btn-voice-discard" onclick="cancelSpeechRecognition()" title="ยกเลิกการบันทึกเสียง">
-                  <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                  <i class="bi bi-x-lg" aria-hidden="true" style="font-size:12px;"></i>
                   <span>ยกเลิก</span>
                 </button>
                 <button type="button" class="btn-voice-mini btn-voice-send" id="btn-voice-send" onclick="sendVoiceQueryDirectly()" title="ส่งคำถามนี้ไปยัง AI ทันที">
@@ -355,24 +372,29 @@
               </span>
             </button>
             <div class="quick-action-menu" id="quick-action-menu" role="menu" aria-label="เครื่องมือด่วน">
-              <button type="button" role="menuitem" onclick="handleImageUpload(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></span><span>แนบรูปภาพ / ไฟล์</span></button>
-              <button type="button" role="menuitem" onclick="toggleSpeechRecognition(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg></span><span>สั่งงานด้วยเสียง</span></button>
-              <button type="button" role="menuitem" onclick="openQuizModal(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg></span><span>Fan Quiz Challenge</span></button>
-              <button type="button" role="menuitem" onclick="openMusicModal(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></span><span>คลังเพลง Jukebox</span></button>
-              <button type="button" role="menuitem" onclick="openSettingsModal(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M7 14v6"/></svg></span><span>ตั้งค่าโมเดล AI (Model Settings)</span></button>
+              <button type="button" role="menuitem" onclick="handleImageUpload(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><i class="bi bi-paperclip" aria-hidden="true" style="font-size:16px;"></i></span><span>แนบรูปภาพ / ไฟล์</span></button>
+              <button type="button" role="menuitem" onclick="toggleSpeechRecognition(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><i class="bi bi-mic" aria-hidden="true" style="font-size:16px;"></i></span><span>สั่งงานด้วยเสียง</span></button>
+              <hr style="border:none; border-top:1px solid rgba(255,255,255,0.06); margin:4px 0;">
+              <button type="button" role="menuitem" onclick="openResearchModal(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><i class="bi bi-search-heart" aria-hidden="true" style="font-size:16px;"></i></span><span>🔍 วิจัยเชิงลึก (Deep Research)</span></button>
+              <button type="button" role="menuitem" onclick="openVerifyModal(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><i class="bi bi-shield-check" aria-hidden="true" style="font-size:16px;"></i></span><span>⚖️ ตรวจสอบข้อเท็จจริง (Verify)</span></button>
+              <button type="button" role="menuitem" onclick="openTimelineModal(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><i class="bi bi-clock-history" aria-hidden="true" style="font-size:16px;"></i></span><span>📅 ไทม์ไลน์อาชีพ (Timeline)</span></button>
+              <hr style="border:none; border-top:1px solid rgba(255,255,255,0.06); margin:4px 0;">
+              <button type="button" role="menuitem" onclick="openQuizModal(); closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><i class="bi bi-trophy" aria-hidden="true" style="font-size:16px;"></i></span><span>Fan Quiz Challenge</span></button>
+              <button type="button" role="menuitem" onclick="openMusicFromQuickActions()"><span class="quick-item-icon" aria-hidden="true"><i class="bi bi-music-note-beamed" aria-hidden="true" style="font-size:16px;"></i></span><span>คลังเพลง Jukebox</span></button>
+              <button type="button" role="menuitem" onclick="window.location.href='/settings'; closeQuickActions()"><span class="quick-item-icon" aria-hidden="true"><i class="bi bi-sliders" aria-hidden="true" style="font-size:16px;"></i></span><span>ตั้งค่าโมเดล AI (/settings)</span></button>
             </div>
 
             <button type="button" id="btn-attach" class="btn-input-tool" title="แนบรูปภาพ" onclick="handleImageUpload()">
-              <svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+              <i class="bi bi-paperclip" aria-hidden="true" style="font-size:17px;"></i>
             </button>
             <button type="button" id="btn-mic" class="btn-input-tool btn-mic" title="สั่งงานด้วยเสียง" onclick="toggleSpeechRecognition()">
-              <svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
+              <i class="bi bi-mic" aria-hidden="true" style="font-size:17px;"></i>
             </button>
 
             <!-- Active Model Status Chip -->
-            <button type="button" id="input-model-chip" class="input-model-chip" onclick="openSettingsModal()" title="คลิกเพื่อเปลี่ยนโมเดล AI หรือตั้งค่า">
+            <button type="button" id="input-model-chip" class="input-model-chip" onclick="window.location.href='/settings'" title="คลิกเพื่อเปลี่ยนโมเดล AI หรือตั้งค่า (/settings)">
               <span class="model-chip-dot" id="input-model-chip-dot" aria-hidden="true"></span>
-              <span id="input-model-chip-icon" class="model-chip-icon">🌸</span>
+              <span id="input-model-chip-icon" class="model-chip-icon">•</span>
               <span id="input-model-chip-label" class="model-chip-label">Gemma 4 E4B</span>
             </button>
           </div>
@@ -380,22 +402,129 @@
           <div class="input-actions-right">
             <button type="button" id="btn-stop" class="btn-stop" title="หยุดสร้างคำตอบ" onclick="stopGeneration()" aria-label="หยุดการสร้างคำตอบ">
               <span class="btn-stop-icon">
-                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="3"/></svg>
+                <i class="bi bi-stop-fill" aria-hidden="true" style="font-size:14px;"></i>
               </span>
             </button>
             <button type="button" id="btn-send" class="btn-send btn-send-muted" title="ส่งข้อความ (Enter)" onclick="submitQuery()" aria-label="ส่งข้อความ">
               <span class="btn-send-icon">
-                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+                <i class="bi bi-send" aria-hidden="true" style="font-size:18px;"></i>
               </span>
             </button>
           </div>
         </div>
       </div>
 
-      <p class="input-disclaimer" id="input-disclaimer">🌸 Kiku Official Fan AI Assistant • ข้อมูลอาจมีความคลาดเคลื่อน โปรดอ้างอิงจากข้อมูลอย่างเป็นทางการ</p>
+      <p class="input-disclaimer" id="input-disclaimer">• Kiku Official Fan AI Assistant • ข้อมูลอาจมีความคลาดเคลื่อน โปรดอ้างอิงจากข้อมูลอย่างเป็นทางการ</p>
     </div>
   </main>
 
+  <!-- Timeline Modal -->
+  <div class="modal-backdrop" id="timeline-modal" role="dialog" aria-modal="true" tabindex="-1" onclick="if(event.target===this) closeTimelineModal()" onkeydown="if(event.key==='Escape') closeTimelineModal()">
+    <div class="modal-dialog timeline-modal-dialog">
+      <div class="timeline-header">
+        <h3>
+          <span style="font-size:20px;">📅</span>
+          <span>ไทม์ไลน์อาชีพ — จวีจิ้งอี (Career Timeline)</span>
+        </h3>
+        <div style="display:flex; gap:8px; align-items:center;">
+          <select id="timeline-era-filter" class="timeline-era-select" onchange="filterTimeline(this.value)">
+            <option value="all">ทุกยุค (All Eras)</option>
+            <option value="snh48">SNH48 Era</option>
+            <option value="solo">Solo Artist</option>
+          </select>
+          <button type="button" class="btn-close-drawer" onclick="closeTimelineModal()" title="ปิด">
+            <span style="font-size:16px; font-weight:700; line-height:1;">✕</span>
+          </button>
+        </div>
+      </div>
+      <div class="timeline-body" id="timeline-body">
+        <div class="timeline-loading">
+          <div class="timeline-spinner"></div>
+          <p>กำลังโหลดข้อมูลไทม์ไลน์...</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Deep Research Modal -->
+  <div class="modal-backdrop" id="research-modal" role="dialog" aria-modal="true" tabindex="-1" onclick="if(event.target===this) closeResearchModal()" onkeydown="if(event.key==='Escape') closeResearchModal()">
+    <div class="modal-dialog" style="max-width: 580px;">
+      <div class="modal-header">
+        <h3 style="display:flex; align-items:center; gap:8px;">
+          <span style="font-size:20px;">🔍</span>
+          <span>วิจัยเชิงลึก (Deep Research Engine)</span>
+        </h3>
+        <button type="button" class="btn-close-drawer" onclick="closeResearchModal()" title="ปิด">
+          <i class="bi bi-x-lg" aria-hidden="true" style="font-size:18px;"></i>
+        </button>
+      </div>
+      <div class="modal-body" style="padding: 20px 22px; display:flex; flex-direction:column; gap:16px;">
+        <div style="font-size: 13px; color: var(--text-muted); line-height: 1.6;">
+          ระบบจะระดม <strong>3 Subagent Workers</strong> ทำงานคู่ขนานกันเพื่อสำรวจคลังผลงานอย่างละเอียด ค้นหาข่าวสารและกระแสจากสื่อภายนอก พร้อมตรวจสอบข้อเท็จจริงเพื่อสร้างรายงานวิเคราะห์เชิงลึก
+        </div>
+        <div>
+          <label for="research-modal-input" style="display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--text);">หัวข้อหรือคำถามที่ต้องการวิจัย:</label>
+          <textarea id="research-modal-input" class="form-control" rows="3" style="width:100%; resize:vertical; padding:10px 14px; border-radius:12px; font-size:13.5px;" placeholder="เช่น: วิเคราะห์พัฒนาการด้านการแสดงและบทบาทเด่นของจวีจิ้งอีตั้งแต่เดบิวต์จนถึงปัจจุบัน..."></textarea>
+        </div>
+        <div>
+          <div style="font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:8px;">💡 หัวข้อแนะนำสำหรับการวิจัย:</div>
+          <div style="display:flex; flex-wrap:wrap; gap:6px;">
+            <button type="button" class="btn-action" style="font-size:12px; padding:4px 10px;" onclick="setResearchTopic('วิเคราะห์พัฒนาการด้านการแสดงและบทบาทเด่นของจวีจิ้งอี')">🎭 พัฒนาการด้านการแสดง</button>
+            <button type="button" class="btn-action" style="font-size:12px; padding:4px 10px;" onclick="setResearchTopic('รางวัลและเกียรติยศทั้งหมดที่จวีจิ้งอีได้รับในระดับประเทศและสากล')">🏆 รางวัลและเกียรติยศ</button>
+            <button type="button" class="btn-action" style="font-size:12px; padding:4px 10px;" onclick="setResearchTopic('บทบาทหยางไฉ่เวยและซ่างกวนจื่อในซีรีส์ฮวาเจียนเลิ่ง (In Blossom)')">🌸 เจาะลึก In Blossom</button>
+            <button type="button" class="btn-action" style="font-size:12px; padding:4px 10px;" onclick="setResearchTopic('ผลงานเพลง ซิงเกิลเดี่ยว และเพลงประกอบซีรีส์เด่นทั้งหมด')">🎵 ผลงานเพลงและ OST</button>
+          </div>
+        </div>
+        <div style="display:flex; justify-content:flex-end; gap:8px; margin-top:6px;">
+          <button type="button" class="btn-action" onclick="closeResearchModal()">ยกเลิก</button>
+          <button type="button" class="btn-action" style="background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600;" onclick="submitResearchFromModal()">
+            <i class="bi bi-search" aria-hidden="true" style="font-size:13px; margin-right:4px;"></i>
+            <span>เริ่มการวิจัย (3 Workers)</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Verify Claim Modal -->
+  <div class="modal-backdrop" id="verify-modal" role="dialog" aria-modal="true" tabindex="-1" onclick="if(event.target===this) closeVerifyModal()" onkeydown="if(event.key==='Escape') closeVerifyModal()">
+    <div class="modal-dialog" style="max-width: 580px;">
+      <div class="modal-header">
+        <h3 style="display:flex; align-items:center; gap:8px;">
+          <span style="font-size:20px;">⚖️</span>
+          <span>ตรวจสอบข้อเท็จจริง (Fact-Check &amp; Verify)</span>
+        </h3>
+        <button type="button" class="btn-close-drawer" onclick="closeVerifyModal()" title="ปิด">
+          <i class="bi bi-x-lg" aria-hidden="true" style="font-size:18px;"></i>
+        </button>
+      </div>
+      <div class="modal-body" style="padding: 20px 22px; display:flex; flex-direction:column; gap:16px;">
+        <div style="font-size: 13px; color: var(--text-muted); line-height: 1.6;">
+          ระบบจะตรวจสอบข้ออ้างหรือข่าวลือข้าม <strong>3 แหล่งข้อมูล</strong> (แคตตาล็อกทางการ, ข่าวและสื่อโซเชียล, ตัววิเคราะห์ข้อขัดแย้ง) เพื่อสรุปคำตัดสิน (VERIFIED / FALSE / CONFLICTING / UNVERIFIED)
+        </div>
+        <div>
+          <label for="verify-modal-input" style="display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--text);">ข้ออ้างหรือข่าวลือที่ต้องการตรวจสอบ:</label>
+          <textarea id="verify-modal-input" class="form-control" rows="3" style="width:100%; resize:vertical; padding:10px 14px; border-radius:12px; font-size:13.5px;" placeholder="เช่น: จวีจิ้งอีเป็น Brand Ambassador ของเครื่องประดับ FRED Paris จริงหรือไม่..."></textarea>
+        </div>
+        <div>
+          <div style="font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:8px;">💡 ตัวอย่างข้ออ้างที่พบบ่อย:</div>
+          <div style="display:flex; flex-wrap:wrap; gap:6px;">
+            <button type="button" class="btn-action" style="font-size:12px; padding:4px 10px;" onclick="setVerifyClaim('จวีจิ้งอีเป็น Brand Ambassador ของ FRED Paris ในปี 2024-2026 จริงหรือไม่')">💎 แอมบาสเดอร์ FRED Paris</button>
+            <button type="button" class="btn-action" style="font-size:12px; padding:4px 10px;" onclick="setVerifyClaim('เพลง 0.2s เป็นซิงเกิลวันเกิดที่ปล่อยเมื่อวันที่ 18 มิถุนายน 2024')">🎂 เพลง 0.2s ปล่อยวันเกิด 2024</button>
+            <button type="button" class="btn-action" style="font-size:12px; padding:4px 10px;" onclick="setVerifyClaim('จวีจิ้งอีเคยเป็นพรีเซนเตอร์ของแบรนด์ TuTuCare และ Lafang')">🐰 แบรนด์ TuTuCare &amp; Lafang</button>
+          </div>
+        </div>
+        <div style="display:flex; justify-content:flex-end; gap:8px; margin-top:6px;">
+          <button type="button" class="btn-action" onclick="closeVerifyModal()">ยกเลิก</button>
+          <button type="button" class="btn-action" style="background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600;" onclick="submitVerifyFromModal()">
+            <i class="bi bi-shield-check" aria-hidden="true" style="font-size:14px; margin-right:4px;"></i>
+            <span>ตรวจสอบข้อเท็จจริง</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="modal-backdrop" id="music-modal" role="dialog" aria-modal="true" tabindex="-1" onclick="if(event.target===this) closeMusicModal()" onkeydown="if(event.key==='Escape') closeMusicModal()">
     <div class="modal-dialog jukebox-modal-dialog">
       <div class="jukebox-header">
@@ -418,7 +547,7 @@
       <div class="jukebox-toolbar">
         <div class="jukebox-search-box">
           <span class="search-icon">
-            <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+            <i class="bi bi-search" aria-hidden="true" style="font-size:18px;"></i>
           </span>
           <input type="text" id="music-search-input" placeholder="ค้นหาชื่อเพลง, ซีรีส์, หรือปีที่ปล่อย (เช่น In Blossom, 2026, 叹云兮, Everyday)..." oninput="filterJukeboxList(); if(typeof toggleMusicSearchClear==='function') toggleMusicSearchClear(this);" />
           <button type="button" class="jukebox-search-clear" id="music-search-clear" onclick="clearMusicSearch()" title="ล้างการค้นหา">✕</button>
@@ -446,7 +575,7 @@
           Ju Jingyi Trivia Quiz Challenge
         </h3>
         <button type="button" class="btn-close-drawer" onclick="closeQuizModal()">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          <i class="bi bi-x-lg" aria-hidden="true" style="font-size:18px;"></i>
         </button>
       </div>
       <div class="modal-body" id="quiz-modal-body">
@@ -459,17 +588,17 @@
     <div class="modal-dialog" style="max-width: 660px;">
       <div class="modal-header">
         <h3>
-          <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+          <i class="bi bi-search" aria-hidden="true" style="font-size:20px;"></i>
           <span>ค้นหาประวัติการสนทนา (Search Chat History)</span>
         </h3>
         <button type="button" class="btn-close-drawer" onclick="closeSessionsModal()">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          <i class="bi bi-x-lg" aria-hidden="true" style="font-size:18px;"></i>
         </button>
       </div>
       <div class="modal-body" style="padding: 18px 22px;">
         <div class="search-modal-box" style="margin-bottom: 14px; position: relative;">
           <input type="text" id="sessions-search-input" class="form-control" style="width: 100%; padding-left: 38px; padding-right: 14px; border-radius: 12px; height: 42px; font-size: 13.5px;" placeholder="ค้นหาตามชื่อแชท หรือข้อความในบทสนทนา (เช่น In Blossom, Versace, 2026)..." oninput="filterSessions(this.value)">
-          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position: absolute; left: 12px; top: 13px; color: var(--text-dim); pointer-events: none;"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+          <i class="bi bi-search" aria-hidden="true" style="font-size:16px;position: absolute; left: 12px; top: 13px; color: var(--text-dim); pointer-events: none;"></i>
         </div>
 
         <div class="sessions-toolbar" style="display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;">
@@ -478,11 +607,11 @@
             <span>สร้างแชทใหม่</span>
           </button>
           <button type="button" class="btn-action" style="justify-content:center;" onclick="exportChat()">
-            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+            <i class="bi bi-download" aria-hidden="true" style="font-size:14px;"></i>
             <span>ส่งออกประวัติ</span>
           </button>
           <button type="button" class="btn-action" style="justify-content:center; color: #ef4444;" onclick="clearAllChatSessions()">
-            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
+            <i class="bi bi-trash3" aria-hidden="true" style="font-size:14px;"></i>
             <span>ล้างทั้งหมด</span>
           </button>
         </div>
@@ -497,21 +626,21 @@
     <div class="modal-dialog" style="max-width: 720px;">
       <div class="modal-header">
         <h3>
-          <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
+          <i class="bi bi-bookmark" aria-hidden="true" style="font-size:20px;"></i>
           <span>คลังพรอมต์ &amp; บุ๊กมาร์ก (Saved Prompts &amp; Bookmarks)</span>
         </h3>
         <button type="button" class="btn-close-drawer" onclick="closeSavedPromptsModal()">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          <i class="bi bi-x-lg" aria-hidden="true" style="font-size:18px;"></i>
         </button>
       </div>
       <div class="modal-body" style="padding: 18px 22px;">
         <div class="modal-tabs">
           <button type="button" id="tab-btn-prompts" class="modal-tab-btn active" onclick="switchSavedPromptsTab('prompts')">
-            <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
+            <i class="bi bi-bookmark" aria-hidden="true" style="font-size:15px;"></i>
             <span>คลังพรอมต์แม่แบบ (Prompt Library)</span>
           </button>
           <button type="button" id="tab-btn-bookmarks" class="modal-tab-btn" onclick="switchSavedPromptsTab('bookmarks')">
-            <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+            <i class="bi bi-star" aria-hidden="true" style="font-size:15px;"></i>
             <span>คำตอบที่ปักหมุดไว้ (Bookmarked Answers)</span>
           </button>
         </div>
@@ -520,7 +649,7 @@
           <div style="display: flex; gap: 8px; margin-bottom: 12px;">
             <div style="flex: 1; position: relative;">
               <input type="text" id="prompts-search-input" class="form-control" style="width: 100%; padding-left: 36px; border-radius: 10px; height: 38px; font-size: 13px;" placeholder="ค้นหาตามชื่อพรอมต์ หรือคีย์เวิร์ด..." oninput="filterSavedPrompts(this.value)">
-              <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position: absolute; left: 11px; top: 12px; color: var(--text-dim); pointer-events: none;"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+              <i class="bi bi-search" aria-hidden="true" style="font-size:14px;position: absolute; left: 11px; top: 12px; color: var(--text-dim); pointer-events: none;"></i>
             </div>
             <button type="button" class="btn-action" onclick="openCreatePromptModal()" style="background: rgba(255,117,140,0.18); border-color: var(--primary); color: var(--primary);">
               <span>สร้างพรอมต์</span>
@@ -533,7 +662,7 @@
         <div id="tab-content-bookmarks" style="display: none;">
           <div style="margin-bottom: 12px; position: relative;">
             <input type="text" id="bookmarks-search-input" class="form-control" style="width: 100%; padding-left: 36px; border-radius: 10px; height: 38px; font-size: 13px;" placeholder="ค้นหาข้อความที่ปักหมุดไว้..." oninput="filterBookmarks(this.value)">
-            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position: absolute; left: 11px; top: 12px; color: var(--text-dim); pointer-events: none;"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+            <i class="bi bi-search" aria-hidden="true" style="font-size:14px;position: absolute; left: 11px; top: 12px; color: var(--text-dim); pointer-events: none;"></i>
           </div>
           <div id="bookmarks-list" style="display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto;">
           </div>
@@ -546,10 +675,10 @@
     <div class="modal-dialog" style="max-width: 520px;">
       <div class="modal-header">
         <h3>
-          <span>➕ บันทึกพรอมต์ใหม่ (Create Saved Prompt)</span>
+          <span>+ บันทึกพรอมต์ใหม่ (Create Saved Prompt)</span>
         </h3>
         <button type="button" class="btn-close-drawer" onclick="closeCreatePromptModal()">
-          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          <i class="bi bi-x-lg" aria-hidden="true" style="font-size:18px;"></i>
         </button>
       </div>
       <div class="modal-body" style="padding: 18px 20px;">
@@ -573,7 +702,7 @@
             <textarea id="new-prompt-text" class="form-control" rows="4" style="width: 100%; resize: vertical;" placeholder="พิมพ์ข้อความคำสั่งที่ต้องการให้ AI ตอบ..."></textarea>
           </div>
           <button type="button" class="btn-action" style="margin-top: 8px; justify-content: center; background: var(--primary); color: #fff; border: none; padding: 10px;" onclick="saveNewCustomPrompt()">
-            <span>💾 บันทึกพรอมต์</span>
+            <span>• บันทึกพรอมต์</span>
           </button>
         </div>
       </div>
@@ -584,7 +713,7 @@
   <div class="command-palette-backdrop" id="command-palette-modal" onclick="handleCommandPaletteBackdrop(event)" onkeydown="if(event.key==='Escape') closeCommandPalette()" style="display:none;" role="dialog" aria-modal="true" aria-label="Command Palette" tabindex="-1">
     <div class="command-palette-box">
       <div class="command-palette-header">
-        <svg aria-hidden="true" class="command-palette-search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+        <i class="bi bi-search command-palette-search-icon" aria-hidden="true" style="font-size:20px;"></i>
         <input type="text" id="command-palette-input" placeholder="ค้นหาฟีเจอร์, คำสั่งลัด, เพลง, หรือเครื่องมือ AI... (ESC เพื่อปิด)" oninput="filterCommandPalette(this.value)" onkeydown="handleCommandPaletteKeyDown(event)" autocomplete="off" />
         <kbd class="palette-kbd">ESC</kbd>
       </div>
@@ -602,19 +731,19 @@
     <div class="share-card-dialog">
       <div class="modal-header">
         <div class="modal-title-wrap">
-          <span class="modal-spark">🌸</span>
+          <span class="modal-spark"><i class="bi bi-stars" aria-hidden="true"></i></span>
           <h3>สร้างการ์ดแชร์บทสนทนา (Share Card)</h3>
         </div>
-        <button type="button" class="btn-close-drawer" onclick="closeShareCardModal()" aria-label="ปิด"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+        <button type="button" class="btn-close-drawer" onclick="closeShareCardModal()" aria-label="ปิด"><i class="bi bi-x-lg" aria-hidden="true" style="font-size:18px;"></i></button>
       </div>
       <div class="share-card-preview-area" id="share-card-canvas-container"></div>
       <div class="share-card-actions">
         <button type="button" class="btn-share-download" onclick="downloadShareCardImage(this)">
-          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          <i class="bi bi-download" aria-hidden="true" style="font-size:16px;"></i>
           <span>ดาวน์โหลดรูปภาพ (PNG)</span>
         </button>
         <button type="button" class="btn-share-copy" onclick="copyShareCardToClipboard(this)">
-          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+          <i class="bi bi-copy" aria-hidden="true" style="font-size:16px;"></i>
           <span>คัดลอกข้อความ</span>
         </button>
       </div>
@@ -626,10 +755,10 @@
     <div class="share-card-dialog" style="max-width:640px;">
       <div class="modal-header">
         <div class="modal-title-wrap">
-          <span class="modal-spark">🌸</span>
+          <span class="modal-spark"><i class="bi bi-stars" aria-hidden="true"></i></span>
           <h3>สร้างการ์ดคำคม (Quote Card)</h3>
         </div>
-        <button type="button" class="btn-close-drawer" onclick="closeQuoteCardModal()" aria-label="ปิด"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+        <button type="button" class="btn-close-drawer" onclick="closeQuoteCardModal()" aria-label="ปิด"><i class="bi bi-x-lg" aria-hidden="true" style="font-size:18px;"></i></button>
       </div>
       <div class="modal-body" style="padding:16px 20px; display:flex; flex-direction:column; align-items:center; gap:14px;">
         <canvas id="quote-canvas" width="600" height="340" style="max-width:100%; height:auto; border-radius:18px; box-shadow:0 12px 32px rgba(0,0,0,0.4); border:1px solid rgba(255,117,140,0.3);"></canvas>
@@ -643,11 +772,11 @@
       </div>
       <div class="share-card-actions">
         <button type="button" class="btn-share-download" id="btn-quote-download" onclick="downloadQuoteCard(this)">
-          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          <i class="bi bi-download" aria-hidden="true" style="font-size:16px;"></i>
           <span>ดาวน์โหลดรูปภาพ (PNG)</span>
         </button>
         <button type="button" class="btn-share-copy" id="btn-quote-copy" onclick="copyQuoteCardImage(this)">
-          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+          <i class="bi bi-copy" aria-hidden="true" style="font-size:16px;"></i>
           <span>คัดลอกรูปภาพ</span>
         </button>
       </div>
@@ -659,10 +788,10 @@
     <div class="modal-dialog" style="max-width:760px; max-height:85vh; overflow-y:auto;">
       <div class="modal-header">
         <div class="modal-title-wrap">
-          <span class="modal-spark">⚔️</span>
+          <span class="modal-spark"><i class="bi bi-stars" aria-hidden="true"></i></span>
           <h3>เปรียบเทียบผลงานซีรีส์ &amp; เพลง (Comparison Matrix)</h3>
         </div>
-        <button type="button" class="btn-close-drawer" onclick="closeCompareModal()" aria-label="ปิด"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+        <button type="button" class="btn-close-drawer" onclick="closeCompareModal()" aria-label="ปิด"><i class="bi bi-x-lg" aria-hidden="true" style="font-size:18px;"></i></button>
       </div>
       <div class="modal-body" id="compare-modal-body"></div>
     </div>
@@ -673,250 +802,247 @@
     <div class="modal-dialog sponsors-modal-dialog">
       <div class="modal-header">
         <div class="modal-title-wrap">
-          <span class="modal-spark">📢</span>
+          <span class="modal-spark"><i class="bi bi-stars" aria-hidden="true"></i></span>
           <div>
             <h3 style="margin:0; font-size:16px; font-weight:700;">SPONSOR SPOTLIGHT</h3>
             <p style="margin:2px 0 0; font-size:12px; color:var(--text-muted);">ผู้สนับสนุนโครงการและระบบนิเวศ Kiku Agent (Matching CLI /ads)</p>
           </div>
         </div>
-        <button type="button" class="btn-close-drawer" onclick="closeSponsorsModal()" aria-label="ปิด"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+        <button type="button" class="btn-close-drawer" onclick="closeSponsorsModal()" aria-label="ปิด"><i class="bi bi-x-lg" aria-hidden="true" style="font-size:18px;"></i></button>
       </div>
       <div class="modal-body sponsors-modal-body" id="sponsors-modal-body">
         <!-- Dynamically rendered by renderSponsorsModal() -->
       </div>
       <div class="modal-footer sponsors-modal-footer">
-        <span>🌸 สนับสนุนการพัฒนา Open-Source AI Agent Ecosystem</span>
+        <span>• สนับสนุนการพัฒนา Open-Source AI Agent Ecosystem</span>
         <button type="button" class="btn-msg-action" onclick="closeSponsorsModal()" style="padding:6px 14px; border-radius:8px;">ปิด</button>
       </div>
     </div>
   </div>
 
-  <!-- AI Engine & Model Configuration Modal Popup -->
-  <div class="modal-backdrop" id="settings-modal" onclick="if(event.target===this) closeSettingsModal()" onkeydown="if(event.key==='Escape') closeSettingsModal()" style="display:none;" role="dialog" aria-modal="true" aria-label="AI Engine & Model Configuration" tabindex="-1">
-    <div class="modal-dialog settings-modal-dialog">
-      <div class="modal-header settings-modal-header">
-        <div class="modal-title-wrap settings-heading-block">
-          <span class="settings-kicker">Inference control</span>
-          <h3 class="settings-modal-title">AI Engine &amp; Model Configuration</h3>
-          <p class="settings-modal-desc">กำหนดเส้นทางโมเดล การตอบสนอง และทรัพยากรของเครื่องในที่เดียว</p>
-        </div>
-        <div class="settings-modal-header-actions">
-          <button type="button" class="settings-status-pill" id="settings-status-pill" title="คลิกเพื่อซิงก์ตาม CLI / Server" onclick="resetToCliProvider()">
-            <span class="settings-status-mark" aria-hidden="true"></span>
-            <span id="settings-provider-badge">Auto (CLI Sync)</span>
-          </button>
-          <button type="button" class="btn-close-drawer settings-close-button" onclick="closeSettingsModal()" aria-label="ปิดหน้าต่าง"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
-        </div>
-      </div>
-
-      <div class="modal-body settings-modal-body">
-        <!-- Card 1: AI Provider & Model -->
-        <div class="settings-glass-panel">
-          <div class="settings-panel-header">
-            <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
-            <span>ผู้ให้บริการและโมเดล (AI Provider &amp; Model)</span>
-          </div>
-          <div class="settings-panel-content">
-            <div class="form-group">
-              <label for="cfg-provider" id="lbl-cfg-provider">AI Provider</label>
-              <div class="form-control-wrap">
-                <select id="cfg-provider" class="form-control" onchange="onProviderChange()">
-                  <option value="auto">ตาม CLI / Server (Auto Sync)</option>
-                  <option value="lmstudio">LM Studio (Local gemma-4-e4b / Qwen)</option>
-                  <option value="vllm">vLLM (Local / WSL - Port 8000)</option>
-                  <option value="custom">Custom / LAN Server (Ollama, llama.cpp, gateway)</option>
-                  <option value="gemini">Google Gemini (Gemini 3.7 Flash / Pro)</option>
-                  <option value="openai">OpenAI (GPT-4o / o1 / o3)</option>
-                  <option value="groq">Groq (Llama 3.3 70B Fast)</option>
-                  <option value="deepseek">DeepSeek AI (V3 / R1)</option>
-                  <option value="openrouter">OpenRouter (Unified Gateway)</option>
-                </select>
-              </div>
+  <div class="modal-backdrop" id="gallery-picker-modal" role="dialog" aria-modal="true" aria-label="เลือกภาพแกลเลอรี" tabindex="-1" onclick="if(event.target===this) closeHeroGalleryPicker()" onkeydown="if(event.key==='Escape') closeHeroGalleryPicker()" style="display:none;">
+    <div class="modal-dialog gallery-picker-dialog">
+      <div class="modal-header">
+        <div class="modal-title-wrap">
+          <span class="modal-spark"><i class="bi bi-stars" aria-hidden="true"></i></span>
+          <div>
+            <h3 id="gallery-picker-title">VISUAL ARCHIVE GALLERY</h3>
+            <p id="gallery-picker-desc">เลือกภาพเพื่อใส่ในตำแหน่ง: <strong id="gallery-picker-target-slot">สล็อตหลัก (Primary)</strong> หรือลากรูปไปวางที่กรอบภาพได้โดยตรง</p>
+          </div>
+        </div>
+        <button type="button" class="btn-close-drawer" onclick="closeHeroGalleryPicker()" aria-label="ปิด">
+          <i class="bi bi-x-lg" aria-hidden="true" style="font-size:18px;"></i>
+        </button>
+      </div>
+      <div class="gallery-picker-controls">
+        <div class="gallery-picker-categories" id="gallery-picker-categories">
+          <button type="button" class="gallery-picker-cat-btn active" data-category="all" onclick="filterGalleryPickerCategory('all')">ทั้งหมด</button>
+          <button type="button" class="gallery-picker-cat-btn" data-category="weibo-update" onclick="filterGalleryPickerCategory('weibo-update')">อัปเดต Weibo</button>
+          <button type="button" class="gallery-picker-cat-btn" data-category="drama-poster" onclick="filterGalleryPickerCategory('drama-poster')">ซีรีส์ &amp; ละคร</button>
+          <button type="button" class="gallery-picker-cat-btn" data-category="commercial-brand" onclick="filterGalleryPickerCategory('commercial-brand')">แบรนด์ &amp; พรีเซนเตอร์</button>
+          <button type="button" class="gallery-picker-cat-btn" data-category="fashion-magazine" onclick="filterGalleryPickerCategory('fashion-magazine')">แฟชั่น &amp; นิตยสาร</button>
+          <button type="button" class="gallery-picker-cat-btn" data-category="stage-concert" onclick="filterGalleryPickerCategory('stage-concert')">สเตจ &amp; คอนเสิร์ต</button>
+          <button type="button" class="gallery-picker-cat-btn" data-category="red-carpet" onclick="filterGalleryPickerCategory('red-carpet')">พรมแดง &amp; กาล่า</button>
+          <button type="button" class="gallery-picker-cat-btn" data-category="hanfu-aesthetic" onclick="filterGalleryPickerCategory('hanfu-aesthetic')">ชุดจีนโบราณ &amp; กู่เฟิง</button>
+        </div>
+        <div class="gallery-picker-search-bar">
+          <input type="text" id="gallery-picker-search" placeholder="ค้นหาภาพตามชื่อผลงาน ลุค หรือแบรนด์..." aria-label="ค้นหาภาพแกลเลอรี" oninput="handleGallerySearchInput(this.value)">
+        </div>
+      </div>
+      <div class="modal-body gallery-picker-body" id="gallery-picker-body">
+        <div class="gallery-picker-grid" id="gallery-picker-grid" role="list"></div>
+      </div>
+      <div class="modal-footer gallery-picker-footer">
+        <div class="gallery-picker-footer-tip">
+          <span>[Notice] คลิกที่รูปภาพเพื่อเลือกใส่สล็อต หรือลากรูปไปวางที่กรอบภาพหน้าแรก</span>
+        </div>
+        <div class="gallery-picker-footer-actions">
+          <button type="button" class="btn-msg-action" onclick="resetHeroImages()" title="รีเซ็ตภาพเป็นค่าเริ่มต้น">รีเซ็ตภาพเริ่มต้น</button>
+          <button type="button" class="btn-msg-action" onclick="closeHeroGalleryPicker()">ปิด</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- MCP Server & Tools Hub Modal -->
+  <div class="modal-backdrop" id="mcp-tools-modal" onclick="if(event.target===this)closeMcpToolsModal()" onkeydown="if(event.key==='Escape')closeMcpToolsModal()" style="display:none;" role="dialog" aria-modal="true" aria-label="MCP Server and Tools Catalog" tabindex="-1">
+    <div class="modal-dialog mcp-modal-dialog">
+      <div class="modal-header mcp-modal-header">
+        <div class="modal-title-wrap">
+          <span class="modal-spark mcp-modal-spark"><i class="bi bi-cpu" aria-hidden="true"></i></span>
+          <div>
+            <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
+              <h3 style="margin:0; font-size:16px; font-weight:700;">MCP SERVER &amp; TOOLS ECOSYSTEM</h3>
+              <span class="mcp-status-badge mcp-online" id="mcp-server-live-indicator">
+                <span class="mcp-dot-pulse"></span> ONLINE
+              </span>
             </div>
-            <div class="form-group">
-              <label for="cfg-model" id="lbl-cfg-model">Model Name / ID</label>
-              <div class="form-control-wrap">
-                <input type="text" id="cfg-model" class="form-control" placeholder="google/gemma-4-e4b" value="google/gemma-4-e4b" onchange="autoSaveSettings()">
-              </div>
+            <p style="margin:2px 0 0; font-size:12px; color:var(--text-muted);">Model Context Protocol 2025-11-25 • Streamable HTTP • System Tools Catalog</p>
+          </div>
+        </div>
+        <button type="button" class="btn-close-drawer" onclick="closeMcpToolsModal()" aria-label="ปิด"><i class="bi bi-x-lg" aria-hidden="true" style="font-size:18px;"></i></button>
+      </div>
+
+      <!-- Modal Tab Navigation -->
+      <div class="mcp-modal-tabs">
+        <button type="button" class="mcp-tab-btn active" id="mcp-tab-btn-status" data-mcp-tab="status" onclick="switchMcpModalTab('status')">
+          <i class="bi bi-activity"></i> Overview &amp; Status
+        </button>
+        <button type="button" class="mcp-tab-btn" id="mcp-tab-btn-tools" data-mcp-tab="tools" onclick="switchMcpModalTab('tools')">
+          <i class="bi bi-tools"></i> Tools Catalog (<span id="mcp-modal-tools-count">...</span>)
+        </button>
+        <button type="button" class="mcp-tab-btn" id="mcp-tab-btn-config" data-mcp-tab="config" onclick="switchMcpModalTab('config')">
+          <i class="bi bi-code-slash"></i> Client Configs (10 ค่าย AI &amp; IDEs)
+        </button>
+      </div>
+
+      <!-- Modal Body Panes -->
+      <div class="modal-body mcp-modal-body" id="mcp-modal-body">
+        <!-- Tab 1: Status & Overview -->
+        <div class="mcp-tab-pane active" id="mcp-pane-status">
+          <!-- Status Grid -->
+          <div class="mcp-status-grid">
+            <div class="mcp-stat-card">
+              <div class="mcp-stat-label">MCP Server Endpoint</div>
+              <div class="mcp-stat-value code-font" id="mcp-stat-endpoint">/mcp</div>
+              <div class="mcp-stat-desc">Streamable HTTP (POST /mcp)</div>
             </div>
-            <div class="form-group">
-              <label for="cfg-baseurl" id="lbl-cfg-baseurl">API Base URL</label>
-              <div class="form-control-wrap">
-                <input type="text" id="cfg-baseurl" class="form-control" placeholder="http://127.0.0.1:8000/v1" onchange="autoSaveSettings()">
-              </div>
-              <small class="form-hint" id="cfg-baseurl-help">LM Studio: :1234, vLLM: :8000 หรือ URL สำหรับ WSL/Network</small>
+            <div class="mcp-stat-card">
+              <div class="mcp-stat-label">Protocol Version</div>
+              <div class="mcp-stat-value" id="mcp-stat-protocol">2025-11-25</div>
+              <div class="mcp-stat-desc">Model Context Protocol (Compat 2024-11-05)</div>
             </div>
-            <div class="form-group lan-scan-group">
-              <label for="lan-scan-results" id="lbl-lan-scan">LAN Discovery — ค้นหา LM Server ในเครือข่าย</label>
-              <div class="lan-scan-row">
-                <button type="button" id="btn-lan-scan" class="btn-sync-cli" onclick="scanLanEndpoints()" title="สแกนหา LM Studio / vLLM / Ollama ในเครือข่ายและแสดงรายชื่อโมเดล">
-                  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg>
-                  <span id="lan-scan-label">Scan LAN</span>
-                </button>
-                <small class="form-hint lan-scan-status" id="lan-scan-status"></small>
-              </div>
-              <input type="text" id="lan-scan-targets" class="form-control lan-scan-targets" placeholder="ระบุวงเอง (เว้นว่าง = อัตโนมัติ) เช่น 192.168.0.0/24, 10.0.0.1-10.0.0.50" onkeydown="if(event.key==='Enter'){event.preventDefault();scanLanEndpoints();}">
-              <small class="form-hint">รองรับ CIDR (192.168.0.0/24), ช่วง IP (10.0.0.1-10.0.0.50), IP เดี่ยว — คั่นด้วยเครื่องหมายจุลภาค</small>
-              <div id="lan-scan-results" class="lan-scan-results" hidden></div>
+            <div class="mcp-stat-card">
+              <div class="mcp-stat-label">System Tools Ready</div>
+              <div class="mcp-stat-value highlight-purple" id="mcp-stat-tools">68+</div>
+              <div class="mcp-stat-desc">Callable by Web Chat &amp; External Agents</div>
             </div>
-            <div class="settings-quick-sync-row">
-              <button type="button" class="btn-sync-cli" onclick="resetToCliProvider()" title="รีเซ็ตกลับไปใช้โมเดลตามที่ CLI / Server กำหนด">
-                <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5"/></svg>
-                <span>Use CLI defaults</span>
-              </button>
+            <div class="mcp-stat-card">
+              <div class="mcp-stat-label">External MCP Bridge</div>
+              <div class="mcp-stat-value" id="mcp-stat-clients">Active</div>
+              <div class="mcp-stat-desc">Web Chat can invoke MCP tools</div>
             </div>
           </div>
-        </div>
 
-        <!-- Card 2: Security & Inference Parameters -->
-        <div class="settings-glass-panel">
-          <div class="settings-panel-header">
-            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
-            <span>ความปลอดภัยและพารามิเตอร์ (Security &amp; Inference)</span>
-          </div>
-          <div class="settings-panel-content">
-            <div class="form-group" id="group-cfg-apikey">
-              <label for="cfg-apikey" id="lbl-cfg-apikey">Cloud API Key</label>
-              <form class="form-control-wrap with-toggle" autocomplete="off" onsubmit="return false;" style="margin:0;">
-                <input type="text" id="cfg-apikey-username" name="username" autocomplete="username" value="kiku-cloud-user" hidden readonly tabindex="-1" aria-hidden="true" style="display:none;">
-                <input type="password" id="cfg-apikey" name="kiku-cloud-apikey" class="form-control" placeholder="ระบุ API Key (เว้นว่างหากใช้ตาม CLI / Local)" autocomplete="new-password" spellcheck="false" autocapitalize="off" onchange="autoSaveSettings()">
-                <button type="button" id="btn-toggle-apikey-vis" class="btn-input-icon" onclick="toggleApiKeyVisibility()" title="แสดง/ซ่อน API Key">
-                  <svg aria-hidden="true" id="eye-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-                </button>
-              </form>
-              <div id="cfg-apikey-help" class="form-help-text">เก็บไว้ในหน่วยความจำของเบราว์เซอร์สำหรับเซสชันนี้เท่านั้น</div>
+          <!-- Live Endpoint Banner -->
+          <div class="mcp-endpoint-banner">
+            <div class="mcp-endpoint-info">
+              <span class="mcp-method-badge">POST</span>
+              <code class="mcp-url-code" id="mcp-full-url-display">http://localhost:3002/mcp</code>
             </div>
-
-            <div class="form-group">
-              <label for="cfg-thinking" id="lbl-cfg-thinking">Thinking Mode</label>
-              <div class="form-control-wrap">
-                <select id="cfg-thinking" class="form-control" onchange="autoSaveSettings()">
-                  <option value="show">แสดงทั้งหมด (Deep Thinking)</option>
-                  <option value="collapse">ย่อเริ่มต้น (Auto Collapse)</option>
-                  <option value="hide">ซ่อนทั้งหมด (Direct Answer)</option>
-                </select>
-              </div>
+            <div class="mcp-endpoint-actions">
+              <button type="button" class="btn-copy-sm" onclick="copyMcpUrl(this)">
+                <i class="bi bi-clipboard"></i> Copy URL
+              </button>
+              <button type="button" class="btn-copy-sm" onclick="testMcpServerHealth(this)">
+                <i class="bi bi-shield-check"></i> Test Ping
+              </button>
             </div>
+          </div>
 
-            <div class="form-group">
-              <div class="label-with-badge">
-                <label for="cfg-temperature" id="lbl-cfg-temp">Creativity (Temp)</label>
-                <span class="temp-badge" id="temp-val">0.7</span>
-              </div>
-              <div class="form-control-wrap slider-wrap">
-                <input type="range" id="cfg-temperature" min="0" max="1" step="0.05" value="0.7" class="form-slider" oninput="onTemperatureInput(this)">
-              </div>
-            </div>
+          <!-- Features summary -->
+          <div class="mcp-features-box">
+            <h4 style="margin:0 0 8px; font-size:13px; font-weight:700; color:var(--text);">✨ ความสามารถของระบบ Kiku MCP &amp; Web Chat</h4>
+            <ul class="mcp-features-list">
+              <li><strong>Two-Way MCP Support:</strong> Kiku ให้บริการเป็น <em>MCP Server</em> สำหรับ Claude Desktop/Cursor และในขณะเดียวกัน Web Chatbot ก็ทำหน้าที่เป็น <em>MCP Client</em> ที่สามารถเรียกใช้ Tools ภายนอกได้</li>
+              <li><strong>Zero-Key Autonomous Tools:</strong> มีเครื่องมือค้นหาเว็บ (DuckDuckGo, SearXNG, Jina), ถอดรหัสชาร์เซ็ตไทย-จีน, วิเคราะห์ข่าว, ค้นหารูปภาพ, คลังผลงานจวีจิ้งอีครบถ้วน</li>
+              <li><strong>Streamable HTTP Protocol:</strong> รองรับการสตรีมคำขอและผลลัพธ์ผ่าน HTTP JSON-RPC ตามมาตรฐาน MCP ล่าสุด 2025-11-25 พร้อม Backward Compatibility ถึง 2024-11-05 และระบบความปลอดภัย Loopback/Admin</li>
+            </ul>
           </div>
         </div>
 
-        <!-- Card 3: Model Memory Footprint Calculator (Predictive VRAM Analyzer) -->
-        <div class="settings-glass-panel settings-vram-panel">
-          <div class="settings-panel-header">
-            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v-2"/><path d="M9 13v-2"/></svg>
-            <span>โมเดลและหน่วยความจำ (Model Memory Footprint Calculator)</span>
-          </div>
-          <div class="settings-panel-content" id="vram-calc">
-            <div id="vram-cloud-notice" class="vram-cloud-notice" style="display:none;">
-              <div class="vram-cloud-text">
-                <strong>โหมดแชท Cloud (<span id="vram-cloud-prov-name">Gemini</span>):</strong>
-                <span>ประมวลผลบนเซิร์ฟเวอร์ผู้ให้บริการ ไม่ใช้ VRAM ของการ์ดจอในเครื่อง | ตารางคำนวณด้านล่างใช้สำหรับจำลอง/ประเมินโมเดล Local</span>
-              </div>
+        <!-- Tab 2: Tools Catalog -->
+        <div class="mcp-tab-pane" id="mcp-pane-tools" style="display:none;">
+          <!-- Tools Filter Bar -->
+          <div class="mcp-tools-filter-bar">
+            <div class="mcp-cat-pills" id="mcp-category-pills">
+              <button type="button" class="mcp-cat-pill active" data-cat="ALL" onclick="filterMcpToolsCategory('ALL')">All (<span id="mcp-cat-count-all">0</span>)</button>
+              <button type="button" class="mcp-cat-pill" data-cat="CATALOG" onclick="filterMcpToolsCategory('CATALOG')">Catalog (<span id="mcp-cat-count-catalog">0</span>)</button>
+              <button type="button" class="mcp-cat-pill" data-cat="MEDIA" onclick="filterMcpToolsCategory('MEDIA')">Media (<span id="mcp-cat-count-media">0</span>)</button>
+              <button type="button" class="mcp-cat-pill" data-cat="RESEARCH" onclick="filterMcpToolsCategory('RESEARCH')">Search &amp; News (<span id="mcp-cat-count-research">0</span>)</button>
+              <button type="button" class="mcp-cat-pill" data-cat="SYSTEM" onclick="filterMcpToolsCategory('SYSTEM')">System (<span id="mcp-cat-count-system">0</span>)</button>
+              <button type="button" class="mcp-cat-pill" data-cat="MCP" onclick="filterMcpToolsCategory('MCP')">MCP (<span id="mcp-cat-count-mcp">0</span>)</button>
             </div>
-            <div class="form-group">
-              <label for="vram-model">โมเดลเป้าหมายสำหรับคำนวณ (Target Model)</label>
-              <div class="form-control-wrap">
-                <select id="vram-model" class="form-control" onchange="onVramModelChange()">
-                  <option value="auto" selected>Auto: active local model</option>
-                </select>
-              </div>
-              <div id="vram-model-custom-wrap" style="display:none; margin-top: 8px;">
-                <input type="text" id="vram-model-custom" class="form-control" placeholder="พิมพ์ชื่อโมเดล HuggingFace หรือ path ไฟล์ .gguf" oninput="scheduleVramEstimate()">
-              </div>
-              <div id="vram-model-note" class="form-help-text">เลือกโมเดล Local / Preset ที่ต้องการประเมิน VRAM</div>
+            <div class="mcp-search-wrap">
+              <i class="bi bi-search"></i>
+              <input type="text" id="mcp-tools-search" placeholder="ค้นหาชื่อ Tool หรือฟังก์ชัน..." oninput="onMcpToolsSearchInput(this.value)">
             </div>
-            <div class="form-group">
-              <label for="vram-hardware">Hardware Target</label>
-              <div class="form-control-wrap">
-                <select id="vram-hardware" class="form-control" onchange="updateVramEstimate()">
-                  <option value="auto">Auto-detect hardware</option>
-                </select>
-              </div>
-              <div id="vram-hardware-note" class="form-help-text">กำลังตรวจจับ GPU…</div>
+          </div>
+
+          <!-- Tools Grid -->
+          <div class="mcp-tools-grid" id="mcp-tools-grid">
+            <div style="text-align:center; padding:30px; color:var(--text-muted);">กำลังโหลดรายการเครื่องมือ...</div>
+          </div>
+        </div>
+
+        <!-- Tab 3: Client Configs (All 10 Platforms) -->
+        <div class="mcp-tab-pane" id="mcp-pane-config" style="display:none;">
+          <!-- Selector & Controls Bar -->
+          <div class="mcp-client-selector-wrap">
+            <div class="mcp-client-chips" id="mcp-client-chips">
+              <!-- Dynamically populated chips -->
             </div>
-            <div class="form-group">
-              <div class="label-with-badge">
-                <label for="vram-ctx">Context Length</label>
-                <div class="vram-ctx-badge-group" style="display: inline-flex; align-items: center; gap: 6px;">
-                  <button type="button" id="btn-vram-ctx-auto" class="btn-sync-inline" onclick="resetVramCtxToAuto()" style="display: none;" title="รีเซ็ตกลับเป็นโหมด Auto">
-                    <svg aria-hidden="true" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5"/></svg>
-                    <span>Auto</span>
+
+            <div class="mcp-transport-toggle-bar">
+              <div style="display:flex; align-items:center; gap:8px;">
+                <span style="font-size:12px; font-weight:700; color:var(--text);"><i class="bi bi-hdd-network"></i> โหมดเชื่อมต่อ:</span>
+                <div class="mcp-mode-pills">
+                  <button type="button" class="mcp-mode-btn active" id="mcp-mode-btn-http" onclick="setMcpConfigTransport('http')">
+                    <i class="bi bi-lightning-charge"></i> Streamable HTTP (แนะนำ)
+                  </button>
+                  <button type="button" class="mcp-mode-btn" id="mcp-mode-btn-stdio" onclick="setMcpConfigTransport('stdio')">
+                    <i class="bi bi-terminal"></i> Local Stdio (npx)
                   </button>
-                  <span class="temp-badge" id="vram-ctx-val">Auto (16,384)</span>
                 </div>
               </div>
-              <div class="form-control-wrap slider-wrap">
-                <input type="range" id="vram-ctx" min="1024" max="131072" step="1024" value="16384" class="form-slider" oninput="onVramCtxInput(this)">
-              </div>
+              <span class="mcp-path-badge" id="mcp-config-active-file"><i class="bi bi-file-earmark-code"></i> claude_desktop_config.json</span>
             </div>
-            <div class="vram-calc-grid">
-              <div class="form-group">
-                <label for="vram-quant">Quantization</label>
-                <div class="form-control-wrap">
-                  <select id="vram-quant" class="form-control" onchange="updateVramEstimate()">
-                    <option value="fp16">FP16 / BF16 (16.0 bpw)</option>
-                    <option value="q8_0">Q8_0 / INT8 (8.0 bpw)</option>
-                    <option value="q6_k">Q6_K (6.56 bpw)</option>
-                    <option value="q5_k_m">Q5_K_M (5.5 bpw)</option>
-                    <option value="q4_k_m" selected>Q4_K_M (4.5 bpw)</option>
-                    <option value="q4_0">Q4_0 / Q4_K_S (4.2 bpw)</option>
-                    <option value="q3_k_m">Q3_K_M (3.4 bpw)</option>
-                    <option value="q2_k">Q2_K (2.6 bpw)</option>
-                  </select>
+          </div>
+
+          <!-- Active Client Detail Box -->
+          <div class="mcp-config-section" id="mcp-active-config-section">
+            <div class="mcp-config-header">
+              <div>
+                <div style="display:flex; align-items:center; gap:8px;">
+                  <h4 style="margin:0; font-size:15px; font-weight:700;" id="mcp-config-client-name">Claude Desktop Configuration</h4>
+                  <span class="mcp-method-badge" id="mcp-config-client-badge">Streamable HTTP</span>
                 </div>
+                <p style="margin:4px 0 0; font-size:12px; color:var(--text-muted);" id="mcp-config-client-desc">ใส่คอนฟิกนี้ในไฟล์ <code>claude_desktop_config.json</code> ของคุณ</p>
               </div>
-              <div class="form-group">
-                <label for="vram-cache">Cache Precision</label>
-                <div class="form-control-wrap">
-                  <select id="vram-cache" class="form-control" onchange="updateVramEstimate()">
-                    <option value="16" selected>FP16 (16-bit)</option>
-                    <option value="8">Q8_0 (8-bit)</option>
-                  </select>
-                </div>
+              <div style="display:flex; gap:8px;">
+                <button type="button" class="btn-copy-sm" id="btn-copy-active-mcp" onclick="copyActiveMcpSnippet(this)">
+                  <i class="bi bi-clipboard"></i> Copy Config
+                </button>
               </div>
             </div>
-            <div class="vram-breakdown" id="vram-breakdown">
-              <div class="vram-row"><span>Model Weights</span><b id="vram-weights">—</b></div>
-              <div class="vram-row"><span>KV Cache Memory</span><b id="vram-kv">—</b></div>
-              <div class="vram-row"><span>Static Overhead</span><b id="vram-overhead">—</b></div>
-              <div class="vram-row vram-total"><span>Total VRAM Required</span><b id="vram-total">—</b></div>
+            <div id="mcp-cli-command-box" style="display:none; margin-bottom:10px; padding:9px 14px; border-radius:8px; background:rgba(56,189,248,0.08); border:1px solid rgba(56,189,248,0.25); font-size:12px; font-family:'JetBrains Mono', monospace; display:flex; justify-content:space-between; align-items:center;">
+              <code id="mcp-cli-command-text" style="color:var(--accent-cyan); word-break:break-all;">claude mcp add kiku ...</code>
+              <button type="button" class="btn-copy-sm" onclick="copyMcpCliCmd(this)" style="padding:2px 8px; font-size:11px; margin-left:8px;">Copy CLI</button>
             </div>
-            <div class="vram-gauge-wrap">
-              <div class="vram-gauge"><div class="vram-gauge-fill" id="vram-gauge-fill" style="width:0%"></div></div>
-              <div class="vram-gauge-meta">
-                <span id="vram-gauge-pct">—</span>
-                <span class="vram-status-pill vram-zone-unknown" id="vram-status-pill">UNVERIFIED</span>
-              </div>
+            <pre class="mcp-code-block"><code id="mcp-code-active-preview">...</code></pre>
+          </div>
+
+          <!-- All 10 Supported Clients Quick Grid -->
+          <div style="margin-top:18px;">
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
+              <h4 style="margin:0; font-size:13px; font-weight:700; color:var(--text);"><i class="bi bi-grid-3x3-gap"></i> รองรับครบทั้ง 10 ค่าย AI &amp; IDEs ในโปรเจกต์นี้</h4>
+              <span style="font-size:11.5px; color:var(--text-muted);">คลิก 'ดู' เพื่อเปลี่ยนค่าย หรือคลิก Copy ได้ทันที</span>
+            </div>
+            <div class="mcp-clients-grid" id="mcp-all-clients-grid">
+              <!-- Dynamically populated cards for all 10 clients -->
             </div>
-            <div id="vram-remediation" class="form-help-text vram-remediation"></div>
-            <label class="vram-override-row" id="vram-override-row" style="display:none;">
-              <input type="checkbox" id="vram-override" onchange="onVramOverrideChange()">
-              <span>Allow CPU offloading. This avoids an out-of-memory stop but adds substantial latency.</span>
-            </label>
           </div>
         </div>
       </div>
 
-      <div class="modal-footer settings-modal-footer">
-        <div class="settings-modal-footer-hint">
-          <span>Changes apply immediately and save automatically.</span>
-        </div>
-        <div style="display: flex; gap: 8px;">
-          <button type="button" class="btn-primary-pill" id="settings-done-btn" onclick="closeSettingsModal()" style="min-width: 120px; justify-content: center;">
-            <span>Close configuration</span>
-          </button>
+      <div class="modal-footer mcp-modal-footer">
+        <div style="font-size:11.5px; color:var(--text-muted);">
+          <span class="mcp-dot-pulse-sm"></span> Endpoint: <code style="color:var(--primary); font-family:monospace;">/mcp</code> • รองรับการเชื่อมต่อแบบไร้กุญแจ (Zero-Key)
         </div>
+        <button type="button" class="btn-msg-action" onclick="closeMcpToolsModal()" style="padding:6px 16px; border-radius:8px;">ปิด</button>
       </div>
     </div>
   </div>
 
+
+