gott/wwwroot/js/pages/dashboard.js

// ── Dashboard Page ──

registerPage('dashboard', {
  async init() {
    // Einstellungen-Link
    document.getElementById('dashboardSettingsLink').addEventListener('click', (e) => {
      e.preventDefault();
      navigateTo('settings');
    });

    // Globaler Click-Handler zum Schließen aller Card-Menüs
    document.addEventListener('click', this._closeCardMenus = () => closeAllCardMenus());

    const agents = await apiGetAgents();
    const agentMap = {};
    for (const a of agents) agentMap[a.agentId] = a;

    // Sessions
    const sessions = await apiGetSessions();
    const grid = document.getElementById('sessionCards');
    grid.innerHTML = '';

    for (const s of sessions) {
      const agent = s.agentId ? agentMap[s.agentId] : null;
      const card = document.createElement('div');
      card.className = 'card';
      const msgLabel = s.messageCount !== undefined
        ? `${s.messageCount}${s.totalMessageCount !== s.messageCount ? ` (${s.totalMessageCount})` : ''} Nachrichten`
        : '';
      const workspaceLabel = s.workspace ? s.workspace : '';

      card.innerHTML = `
        <div class="card-image">${s.image ? `<img src="${s.image}" alt="">` : ''}</div>
        <div class="card-body">
          <div class="card-title-row">
            <span class="card-title">${esc(s.name || 'Unbenannt')}</span>
            ${agent ? `<span class="badge">${esc(agent.name)}</span>` : ''}
            <div class="card-menu">
              <button class="card-menu-trigger icon-btn"><i class="fa fa-ellipsis-v"></i></button>
              <div class="card-menu-dropdown" hidden>
                <button class="card-menu-item" data-action="chat">Chat öffnen</button>
                <button class="card-menu-item" data-action="edit">Bearbeiten</button>
              </div>
            </div>
          </div>
          ${s.description ? `<div class="card-desc">${esc(s.description)}</div>` : ''}
          <div class="card-meta">
            ${msgLabel ? `<span class="card-meta-item"><i class="fa fa-comment"></i> ${esc(msgLabel)}</span>` : ''}
            ${workspaceLabel ? `<span class="card-meta-item card-workspace" title="${esc(workspaceLabel)}"><i class="fa fa-folder"></i> ${esc(workspaceLabel)}</span>` : ''}
          </div>
        </div>
      `;
      const menuTrigger = card.querySelector('.card-menu-trigger');
      const menuDropdown = card.querySelector('.card-menu-dropdown');
      menuTrigger.addEventListener('click', (e) => {
        e.stopPropagation();
        closeAllCardMenus();
        menuDropdown.hidden = !menuDropdown.hidden;
      });
      menuDropdown.querySelector('[data-action="chat"]').addEventListener('click', (e) => {
        e.stopPropagation();
        menuDropdown.hidden = true;
        navigateTo('chat', { id: s.sessionId });
      });
      menuDropdown.querySelector('[data-action="edit"]').addEventListener('click', (e) => {
        e.stopPropagation();
        menuDropdown.hidden = true;
        navigateTo('session', { id: s.sessionId });
      });
      grid.appendChild(card);

      // Git-Status asynchron laden
      if (s.workspace) {
        apiGitStatus(s.sessionId).then(status => {
          if (!status || status.error) return;
          const addCount = (status.add || []).length;
          const editCount = (status.edit || []).length;
          const deleteCount = (status.delete || []).length;
          const outgoing = status.outgoing || 0;
          if (addCount + editCount + deleteCount + outgoing === 0) return;

          const metaEl = card.querySelector('.card-meta');
          if (!metaEl) return;

          const parts = [];
          if (addCount > 0) {
            const tip = `${addCount} ${addCount === 1 ? 'Datei' : 'Dateien'} hinzugefügt`;
            parts.push(`<span class="git-badge git-add" title="${esc(tip)}">+${addCount}</span>`);
          }
          if (editCount > 0) {
            const tip = `${editCount} ${editCount === 1 ? 'Datei' : 'Dateien'} geändert`;
            parts.push(`<span class="git-badge git-edit" title="${esc(tip)}">~${editCount}</span>`);
          }
          if (deleteCount > 0) {
            const tip = `${deleteCount} ${deleteCount === 1 ? 'Datei' : 'Dateien'} gelöscht`;
            parts.push(`<span class="git-badge git-delete" title="${esc(tip)}">-${deleteCount}</span>`);
          }
          if (outgoing > 0) {
            const tip = `${outgoing} ${outgoing === 1 ? 'Commit muss' : 'Commits müssen'} noch gepusht werden`;
            parts.push(`<span class="git-badge git-outgoing" title="${esc(tip)}"><i class="fa fa-arrow-up"></i> ${outgoing}</span>`);
          }

          const gitEl = document.createElement('span');
          gitEl.className = 'card-meta-item card-git-status';
          gitEl.innerHTML = `<i class="fa fa-code-fork"></i> ${parts.join(' ')}`;
          metaEl.appendChild(gitEl);
        });
      }
    }

    // Neue Session Placeholder
    const newSession = document.createElement('div');
    newSession.className = 'card placeholder clickable';
    newSession.innerHTML = '<div class="card-body"><div class="card-title">+ Neue Session</div></div>';
    newSession.addEventListener('click', () => navigateTo('session'));
    document.getElementById('newSessionCard').appendChild(newSession);

    // Agents
    const agentGrid = document.getElementById('agentCards');
    agentGrid.innerHTML = '';

    for (const a of agents) {
      const card = document.createElement('div');
      card.className = 'card';
      card.innerHTML = `
        <div class="card-image">${a.avatar ? `<img src="${a.avatar}" alt="">` : ''}</div>
        <div class="card-body">
          <div class="card-title-row">
            <span class="card-title">${esc(a.name)}</span>
            <span class="badge">${esc(a.model)}</span>
            <div class="card-menu">
              <button class="card-menu-trigger icon-btn"><i class="fa fa-ellipsis-v"></i></button>
              <div class="card-menu-dropdown" hidden>
                <button class="card-menu-item" data-action="edit">Bearbeiten</button>
              </div>
            </div>
          </div>
          ${a.description ? `<div class="card-desc">${esc(a.description)}</div>` : ''}
          ${a.persona ? `<div class="card-meta"><span class="card-meta-item card-persona"><i class="fa fa-user-secret"></i> ${esc(a.persona)}</span></div>` : ''}
        </div>
      `;
      const menuTrigger = card.querySelector('.card-menu-trigger');
      const menuDropdown = card.querySelector('.card-menu-dropdown');
      menuTrigger.addEventListener('click', (e) => {
        e.stopPropagation();
        closeAllCardMenus();
        menuDropdown.hidden = !menuDropdown.hidden;
      });
      menuDropdown.querySelector('[data-action="edit"]').addEventListener('click', (e) => {
        e.stopPropagation();
        menuDropdown.hidden = true;
        navigateTo('agent', { id: a.agentId });
      });
      agentGrid.appendChild(card);
    }

    const placeholder = document.createElement('div');
    placeholder.className = 'card placeholder clickable';
    placeholder.innerHTML = '<div class="card-body"><div class="card-title">+ Neuer Agent</div></div>';
    placeholder.addEventListener('click', () => navigateTo('agent'));
    document.getElementById('newAgentCard').appendChild(placeholder);
  },
  destroy() {
    if (this._closeCardMenus) {
      document.removeEventListener('click', this._closeCardMenus);
      this._closeCardMenus = null;
    }
  }
});

function closeAllCardMenus() {
  document.querySelectorAll('.card-menu-dropdown').forEach(d => d.hidden = true);
}

function esc(s) {
  const d = document.createElement('div');
  d.textContent = s;
  return d.innerHTML;
}

function formatDate(iso) {
  if (!iso) return '';
  return new Date(iso).toLocaleString('de-AT', {
    day: '2-digit', month: '2-digit', year: '2-digit',
    hour: '2-digit', minute: '2-digit'
  });
}