diff --git a/wwwroot/js/pages/dashboard.js b/wwwroot/js/pages/dashboard.js
index 29912db..9577796 100644
--- a/wwwroot/js/pages/dashboard.js
+++ b/wwwroot/js/pages/dashboard.js
@@ -176,46 +176,19 @@ registerPage('dashboard', {
}));
for (const a of agents) {
- const card = document.createElement('div');
- card.className = 'card';
-
- const badges = [];
- if (a.toolChoice === 'any') badges.push(' Erzwungen');
- if (a.autoCommit === 'mention') badges.push(' Anmerken');
- if (a.autoCommit === 'enforce') badges.push(' Erzwungen');
- if (a.autoCommit === 'forbid') badges.push(' Verboten');
- if (a.useSoul) badges.push(' Seele');
- if (a.useIdentity) badges.push(' Ich');
- if (a.useUserInfo) badges.push(' Du');
- if (a.useMemory) badges.push(' Erinnerungen');
- if (a.webSearchVersion) {
- const wsYear = a.webSearchVersion.includes('2025') ? 'Version 2025' : 'v2026';
- badges.push(` Web-Suche`);
- }
-
const skills = agentSkillsMap[a.agentId] || [];
- for (const skill of skills) {
- badges.push(` ${esc(skill.name)}`);
- }
+ const card = buildAgentCard(a, skills);
- const agentScaleStyle = a.avatarScale && a.avatarScale !== 1 ? ` style="transform: scale(${a.avatarScale})"` : '';
- card.innerHTML = `
- 
` : '';
+
+ // Badges
+ const badges = [];
+ if (agent.toolChoice === 'any') badges.push(' Erzwungen');
+ if (agent.autoCommit === 'mention') badges.push(' Anmerken');
+ if (agent.autoCommit === 'enforce') badges.push(' Erzwungen');
+ if (agent.autoCommit === 'forbid') badges.push(' Verboten');
+ if (agent.useSoul) badges.push(' Seele');
+ if (agent.useIdentity) badges.push(' Ich');
+ if (agent.useUserInfo) badges.push(' Du');
+ if (agent.useMemory) badges.push(' Erinnerungen');
+ if (agent.webSearchVersion) {
+ const wsYear = agent.webSearchVersion.includes('2025') ? 'Version 2025' : 'v2026';
+ badges.push(` Web-Suche`);
+ }
+
+ if (skills) {
+ for (const skill of skills) {
+ badges.push(` ${esc(skill.name)}`);
+ }
+ }
+
+ card.innerHTML = `
+
${a.avatar ? `
` : ''}
-
-
`;
+ titleRow.insertAdjacentHTML('beforeend', menuHtml);
const menuTrigger = card.querySelector('.card-menu-trigger');
const menuDropdown = card.querySelector('.card-menu-dropdown');
menuTrigger.addEventListener('click', (e) => {
diff --git a/wwwroot/js/pages/session-page.js b/wwwroot/js/pages/session-page.js
index b777bf7..a16c329 100644
--- a/wwwroot/js/pages/session-page.js
+++ b/wwwroot/js/pages/session-page.js
@@ -20,6 +20,7 @@ registerPage('session', {
const contextEl = document.getElementById('sessionContext');
const workspaceEl = document.getElementById('sessionWorkspace');
const agentSelect = document.getElementById('agentSelect');
+ const agentSelectCard = document.getElementById('agentSelectCard');
const imagePreview = document.getElementById('sessionImagePreview');
const saveBtn = document.getElementById('sessionSaveBtn');
const cancelBtn = document.getElementById('sessionCancelBtn');
@@ -72,16 +73,45 @@ registerPage('session', {
initSessionTelegram(sessionId);
}
- // Agents laden
+ // Agents laden + Skills parallel
const agents = await apiGetAgents();
- agentSelect.innerHTML = '';
- for (const a of agents) {
- const opt = document.createElement('option');
- opt.value = a.agentId;
- opt.textContent = `${a.name} (${a.model})`;
- agentSelect.appendChild(opt);
+ const agentMap = {};
+ for (const a of agents) agentMap[a.agentId] = a;
+
+ const agentSkillsMap = {};
+ await Promise.all(agents.map(async a => {
+ agentSkillsMap[a.agentId] = await apiGetAgentSkills(a.agentId);
+ }));
+
+ function renderAgentSelectCard(agent) {
+ agentSelectCard.innerHTML = '';
+ if (!agent) {
+ agentSelectCard.innerHTML = '
- ${esc(a.name)}
- ${prettyModelName(a.model)}
-
-
- `;
+ ${badges.join('')}
- Kein Agent ausgewählt
';
+ return;
+ }
+ const skills = agentSkillsMap[agent.agentId] || [];
+ const inner = buildAgentCard(agent, skills);
+ // Die inneren Elemente (card-image + card-body) in die Select-Card übernehmen
+ while (inner.firstChild) agentSelectCard.appendChild(inner.firstChild);
+ // Pencil-Icon hinzufügen
+ agentSelectCard.insertAdjacentHTML('beforeend', '');
}
- if (session && session.agentId) agentSelect.value = session.agentId;
+
+ // Initiale Anzeige
+ if (session && session.agentId) {
+ agentSelect.value = session.agentId;
+ renderAgentSelectCard(agentMap[session.agentId] || null);
+ } else {
+ renderAgentSelectCard(null);
+ }
+
+ // Klick auf Card → Modal öffnen
+ agentSelectCard.addEventListener('click', () => {
+ openAgentPickerModal(agents, agentSkillsMap, agentSelect.value, (selectedId) => {
+ agentSelect.value = selectedId || '';
+ renderAgentSelectCard(selectedId ? agentMap[selectedId] : null);
+ });
+ });
more.addEventListener('click', () => {
const content = more.querySelector('[hidden]');
@@ -177,6 +207,65 @@ registerPage('session', {
}
});
+function openAgentPickerModal(agents, agentSkillsMap, currentId, onSelect) {
+ // Overlay
+ const overlay = document.createElement('div');
+ overlay.className = 'agent-picker-overlay';
+
+ const modal = document.createElement('div');
+ modal.className = 'agent-picker-modal';
+
+ // Header
+ const header = document.createElement('div');
+ header.className = 'agent-picker-header';
+ header.innerHTML = 'Agent auswählen';
+ modal.appendChild(header);
+
+ // Body
+ const body = document.createElement('div');
+ body.className = 'agent-picker-body';
+
+ // "Kein Agent" Option
+ const noneCard = document.createElement('div');
+ noneCard.className = 'card agent-picker-item' + (!currentId ? ' selected' : '');
+ noneCard.innerHTML = `
+
+
+
+ `;
+ noneCard.addEventListener('click', () => {
+ onSelect(null);
+ overlay.remove();
+ });
+ body.appendChild(noneCard);
+
+ // Agent Cards via Helper
+ for (const a of agents) {
+ const skills = agentSkillsMap[a.agentId] || [];
+ const item = buildAgentCard(a, skills);
+ item.classList.add('agent-picker-item');
+ if (a.agentId === currentId) item.classList.add('selected');
+ item.addEventListener('click', () => {
+ onSelect(a.agentId);
+ overlay.remove();
+ });
+ body.appendChild(item);
+ }
+
+ modal.appendChild(body);
+ overlay.appendChild(modal);
+ document.body.appendChild(overlay);
+
+ // Schließen
+ header.querySelector('.agent-picker-close').addEventListener('click', () => overlay.remove());
+ overlay.addEventListener('click', (e) => {
+ if (e.target === overlay) overlay.remove();
+ });
+}
+
function initSessionTelegram(sessionId) {
var tokenInput = document.getElementById('sessionTelegramToken');
var secretInput = document.getElementById('sessionTelegramSecret');
diff --git a/wwwroot/js/ui.js b/wwwroot/js/ui.js
index 9b10f6d..203dc43 100644
--- a/wwwroot/js/ui.js
+++ b/wwwroot/js/ui.js
@@ -1,3 +1,50 @@
+// ── Agent Card Helper ──
+// Erzeugt ein .card-Element für einen Agent (wiederverwendbar für Dashboard + Picker).
+// agent: Agent-Objekt, skills: Array von Skills (optional)
+// Gibt ein DOM-Element zurück (.card mit .card-image + .card-body inkl. Badges).
+
+function buildAgentCard(agent, skills) {
+ const card = document.createElement('div');
+ card.className = 'card';
+
+ const scaleStyle = agent.avatarScale && agent.avatarScale !== 1 ? ` style="transform: scale(${agent.avatarScale})"` : '';
+ const imageHtml = agent.avatar ? `
+ Kein Agent
+
+ ${imageHtml}
+
+
+ `;
+
+ return card;
+}
+
// ── Toast Notifications ──
function showToast(message, type) {
+ ${esc(agent.name)}
+ ${prettyModelName(agent.model)}
+
+ ${badges.length ? `${badges.join('')}
` : ''}
+