Mermaid-kaaviot oppaaseen + avatareiden vaaka/pysty-toggle

Mermaid ladataan CDN:stä (esm module). Opas-sivun renderMd tunnistaa
\`\`\`mermaid -koodiblokit ja renderöi ne SVG-kaavioiksi dark-teemalla.

toggleAgentLayout vaihtaa avatareiden suunnan (row/column),
tallennetaan localStorageen.

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

network-poc/frontend/src/components/AgentBar.astro

@@ -1,13 +1,16 @@
 <!-- Agenttigalleria + konfigurointipaneeli -->
-<div style="display:flex;gap:16px;padding:10px 0">
+<div style="display:flex;gap:16px;padding:10px 0;align-items:flex-start">
     <!-- Agenttilista (drag & drop) -->
     <div id="agent-bar" style="display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap">
         <!-- Renderöidään JS:stä -->
     </div>
-    <!-- + Lisää agentti -->
-    <div id="add-agent-btn" class="agent-avatar" onclick="addCustomAgent()" title="Lisää oma agentti" style="opacity:0.4">
-        <div style="width:48px;height:48px;border-radius:50%;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--border)">+</div>
-        <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Lisää</span>
+    <!-- + Lisää agentti + layout-toggle -->
+    <div style="display:flex;flex-direction:column;gap:4px;align-items:center">
+        <div id="add-agent-btn" class="agent-avatar" onclick="addCustomAgent()" title="Lisää oma agentti" style="opacity:0.4">
+            <div style="width:48px;height:48px;border-radius:50%;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--border)">+</div>
+            <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Lisää</span>
+        </div>
+        <button id="layout-toggle" onclick="toggleAgentLayout()" class="btn btn-muted" style="font-size:10px;padding:2px 6px" title="Vaihda vaaka/pysty">☰</button>
     </div>
 </div>