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

7
network-poc/frontend/src/components/AgentBar.astro
View File

@@ -1,14 +1,17 @@
<!-- Agenttigalleria + konfigurointipaneeli --> <!-- 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) --> <!-- Agenttilista (drag & drop) -->
<div id="agent-bar" style="display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap"> <div id="agent-bar" style="display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap">
<!-- Renderöidään JS:stä --> <!-- Renderöidään JS:stä -->
</div> </div>
<!-- + Lisää agentti --> <!-- + 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 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> <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> <span style="font-size:10px;color:#8b949e;text-align:center;display:block">Lisää</span>
</div> </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> </div>
<!-- Agentin konfigurointipaneeli (avautuu klikkaamalla avataria) --> <!-- Agentin konfigurointipaneeli (avautuu klikkaamalla avataria) -->

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

@@ -15,6 +15,11 @@ import Settings from "../components/Settings.astro";
<title>Kipinä Agentic Playground</title> <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"> <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 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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/editor/editor.main.css">
</head> </head>
<body> <body>
@@ -211,6 +216,16 @@ OUTPUT FORMAT:
// === Agent selection & config === // === Agent selection & config ===
let selectedAgent = null; 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() { function renderAgentBar() {
const bar = document.getElementById('agent-bar'); const bar = document.getElementById('agent-bar');
const sorted = Object.entries(agents).sort((a,b) => (a[1].order||0) - (b[1].order||0)); 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'); const r = await fetch('/GUIDE.md');
if (r.ok) el.innerHTML = renderMd(await r.text()); if (r.ok) el.innerHTML = renderMd(await r.text());
el.querySelectorAll('pre code').forEach(b => { if (typeof hljs !== 'undefined') hljs.highlightElement(b); }); 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; } } catch(e) { el.textContent = 'Virhe: ' + e.message; }
})(); })();
@@ -932,10 +956,15 @@ OUTPUT FORMAT:
} }
for (const line of lines) { for (const line of lines) {
// Koodiblokit // Koodiblokit + Mermaid
if (line.startsWith('```')) { if (line.startsWith('```')) {
if (inCode) { if (inCode) {
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>`; html += `<pre class="code-block"><code class="language-${lang}">${buf.replace(/</g,'&lt;')}</code></pre>`;
}
inCode = false; buf = ''; inCode = false; buf = '';
} else { } else {
flushTable(); flushTable();