jaakko/agentic-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mermaid-kaaviot oppaaseen + avatareiden vaaka/pysty-toggle

Browse Source 
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>
This commit is contained in:
Jaakko Vanhala
2026-04-10 07:11:01 +03:00
parent 108094b06a
commit 6b0394586e
2 changed files with 39 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
network-poc/frontend/src/pages/index.astro
View File

@@ -15,6 +15,11 @@ import Settings from "../components/Settings.astro";
<title>Kipinä Agentic Playground</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: false, theme: 'dark' });
window.mermaid = mermaid;
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/editor/editor.main.css">
</head>
<body>
@@ -211,6 +216,16 @@ OUTPUT FORMAT:
// === Agent selection & config ===
let selectedAgent = null;
// Layout: vaaka/pysty toggle
let agentLayout = localStorage.getItem('kpn-agent-layout') || 'row';
window.toggleAgentLayout = function() {
agentLayout = agentLayout === 'row' ? 'column' : 'row';
localStorage.setItem('kpn-agent-layout', agentLayout);
const bar = document.getElementById('agent-bar');
bar.style.flexDirection = agentLayout;
bar.style.alignItems = agentLayout === 'column' ? 'flex-start' : 'flex-end';
};
function renderAgentBar() {
const bar = document.getElementById('agent-bar');
const sorted = Object.entries(agents).sort((a,b) => (a[1].order||0) - (b[1].order||0));
@@ -902,6 +917,15 @@ OUTPUT FORMAT:
const r = await fetch('/GUIDE.md');
if (r.ok) el.innerHTML = renderMd(await r.text());
el.querySelectorAll('pre code').forEach(b => { if (typeof hljs !== 'undefined') hljs.highlightElement(b); });
// Mermaid-kaaviot
if (window.mermaid) {
el.querySelectorAll('.mermaid-block').forEach(async block => {
try {
const { svg } = await window.mermaid.render('r-' + block.id, block.textContent.trim());
block.innerHTML = svg;
} catch(e) { /* fallback: näytetään koodi */ }
});
}
} catch(e) { el.textContent = 'Virhe: ' + e.message; }
})();
@@ -932,10 +956,15 @@ OUTPUT FORMAT:
}
for (const line of lines) {
// Koodiblokit
// Koodiblokit + Mermaid
if (line.startsWith('```')) {
if (inCode) {
html += `<pre class="code-block"><code class="language-${lang}">${buf.replace(/</g,'&lt;')}</code></pre>`;
if (lang === 'mermaid') {
const mid = 'mmd-' + Math.random().toString(36).slice(2,8);
html += `<div class="mermaid-block" id="${mid}" style="margin:16px 0;text-align:center">${buf.replace(/</g,'&lt;')}</div>`;
} else {
html += `<pre class="code-block"><code class="language-${lang}">${buf.replace(/</g,'&lt;')}</code></pre>`;
}
inCode = false; buf = '';
} else {
flushTable();