Hahmogalleria: #gallery -tabi kaikilla 21 avatarilla

- Uusi välilehti: Galleria (navigointi #gallery)
- Grid-näkymä: avatar, nimi, rooli, tiedostonimi
- Klikkaa korttia → kopioi polku leikepöydälle

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

network-poc/static/index.html

@@ -735,6 +735,7 @@
             <div class="main-tab" onclick="switchMainTab('codelab')" data-i18n="tab_codelab">Koodilaboratorio</div>
             <div class="main-tab active" onclick="switchMainTab('agents')" data-i18n="tab_agents">Kipinä Agentic Playground</div>
             <div class="main-tab" onclick="switchMainTab('builder')" data-i18n="tab_builder">Agent Builder</div>
+            <div class="main-tab" onclick="switchMainTab('gallery')" data-i18n="tab_gallery">Galleria</div>
             <div class="main-tab" onclick="switchMainTab('guide')" data-i18n="tab_guide">Opas</div>
         </div>
 
@@ -1260,6 +1261,14 @@ ZIP-paketti sisältäen:
             </div>
         </div>
 
+        <div id="panel-gallery" class="main-panel">
+            <div style="max-width:900px;margin:0 auto;padding:20px">
+                <h2 style="color:#f0f6fc;margin-bottom:8px">Hahmogalleria</h2>
+                <p style="color:#8b949e;margin-bottom:20px">Valmiit avatarit agenteille. Klikkaa kopioidaksesi polun.</p>
+                <div id="gallery-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px"></div>
+            </div>
+        </div>
+
         <div id="panel-guide" class="main-panel">
             <div id="guide-content" style="max-width:800px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--text-color);line-height:1.7;font-size:15px">
                 <p style="color:#8b949e">Ladataan opasta...</p>
@@ -1852,7 +1861,7 @@ IMPORTANT: Include get_db() dependency for FastAPI` },
 
         // URL-hash navigointi
         const initHash = window.location.hash.replace('#', '');
-        const hashMap = { 'laskentaverkko': 'network', 'network': 'network', 'codelab': 'codelab', 'agents': 'agents', 'builder': 'builder', 'guide': 'guide' };
+        const hashMap = { 'laskentaverkko': 'network', 'network': 'network', 'codelab': 'codelab', 'agents': 'agents', 'builder': 'builder', 'gallery': 'gallery', 'guide': 'guide' };
         if (hashMap[initHash]) {
             switchMainTab(hashMap[initHash]);
         }
@@ -5039,6 +5048,45 @@ uv run python crew.py "FastAPI + SQLite CRUD API"
         window.builderExportCrewAI = builderExportCrewAI;
         window.builderCancel = builderCancel;
 
+        // ── Hahmogalleria ──
+        (function renderGallery() {
+            const ALL_AVATARS = [
+                { file: 'kipina_notext.png', name: 'Salamanteri', role: 'Koodari' },
+                { file: 'karhunpentu.png', name: 'Karhunpentu', role: 'Manageri' },
+                { file: 'kettu_notext.png', name: 'Kettu', role: 'Asiakas' },
+                { file: 'pesukarhu_notext.png', name: 'Pesukarhu', role: 'Data' },
+                { file: 'susi_notext.png', name: 'Pikkususi', role: 'QA' },
+                { file: 'laiskiainen_notext.png', name: 'Laiskiainen', role: 'DevOps' },
+                { file: 'aikuinen_susi.png', name: 'Aikuinen susi', role: 'Tarkkailija' },
+                { file: 'gecko_notext.png', name: 'Gecko', role: 'Tofuist / IaC' },
+                { file: 'bear.png', name: 'Karhu', role: '' },
+                { file: 'beaver.png', name: 'Majava', role: '' },
+                { file: 'chameleon.png', name: 'Kameleontti', role: '' },
+                { file: 'elephant.png', name: 'Norsu', role: '' },
+                { file: 'gecko.png', name: 'Gecko v2', role: '' },
+                { file: 'lion.png', name: 'Leijona', role: '' },
+                { file: 'mantis.png', name: 'Rukoilijasirkka', role: '' },
+                { file: 'owl.png', name: 'Pöllö', role: '' },
+                { file: 'penguin.png', name: 'Pingviini', role: '' },
+                { file: 'serpent.png', name: 'Kyy', role: 'DevSecOps' },
+                { file: 'spider.png', name: 'Hämähäkki', role: '' },
+                { file: 'tortoise.png', name: 'Kilpikonna', role: '' },
+                { file: 'walrus.png', name: 'Mursu', role: '' },
+            ];
+            const grid = document.getElementById('gallery-grid');
+            if (!grid) return;
+            grid.innerHTML = ALL_AVATARS.map(a => {
+                const path = '/avatars/' + a.file;
+                return `<div style="background:#161b22;border:1px solid #30363d;border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:all 0.2s" onclick="navigator.clipboard.writeText('${path}');this.querySelector('.gallery-copied').style.opacity=1;setTimeout(()=>this.querySelector('.gallery-copied').style.opacity=0,1000)" onmouseover="this.style.borderColor='#58a6ff';this.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='#30363d';this.style.transform=''">
+                    <img src="${path}" style="width:80px;height:80px;border-radius:14px;border:2px solid #30363d;object-fit:cover;margin-bottom:8px">
+                    <div style="font-weight:600;font-size:13px;color:#f0f6fc">${a.name}</div>
+                    ${a.role ? `<div style="font-size:11px;color:#58a6ff;margin-top:2px">${a.role}</div>` : ''}
+                    <div style="font-size:10px;color:#484f58;margin-top:4px;font-family:monospace">${a.file}</div>
+                    <div class="gallery-copied" style="font-size:10px;color:#3fb950;margin-top:4px;opacity:0;transition:opacity 0.3s">Kopioitu!</div>
+                </div>`;
+            }).join('');
+        })();
+
         // Ladataan agentit kun builder-tabi avataan
         builderLoad();