dogfather-universe/workspace/assets/js/calls.js

/* ===================================================================
   Calls & Meeting-Protokolle (Konzept, Seite 13).

   Reihenfolge der Gruppen ist bewusst nicht chronologisch, sondern nach
   Dringlichkeit: Zuerst die Gespraeche, deren Protokoll FEHLT. Ein
   vergangener Call ohne Protokoll ist der einzige Zustand, der etwas
   von einem verlangt.
   =================================================================== */
(() => {
  'use strict';

  const $ = (id) => document.getElementById(id);
  /* Wer den festen Call-Raum ändern darf. Dieselbe Zweiteilung wie
     überall sonst: DogFather und Manager entscheiden, alle anderen
     benutzen. Der Server prüft es noch einmal -- das hier ist nur die
     Anzeige. */
  const LEITUNG = new Set(['admin', 'manager']);

  let ich = null;
  let daten = null;
  let offen = new Set();
  let kiDa = false;

  const el = (tag, klasse, text) => {
    const k = document.createElement(tag);
    if (klasse) k.className = klasse;
    if (text !== undefined) k.textContent = text;
    return k;
  };
  const melde = (t) => { $('fehler').textContent = t || ''; };

  const WOCHENTAG = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
  function zeitpunkt(iso) {
    if (!iso) return '';
    const [d, z] = iso.split('T');
    const [j, m, t] = d.split('-');
    const w = WOCHENTAG[new Date(+j, +m - 1, +t).getDay()];
    return `${w}, ${t}.${m}.${j} · ${z} Uhr`;
  }
  const datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : '');

  /* Ein Meeting-Link ist nur dann ein Link, wenn er auch einer ist --
     alles andere bleibt schlichter Text (z. B. "bei mir zu Hause"). */
  function istLink(ort) {
    if (!ort) return false;
    try {
      const u = new URL(ort.trim());
      return u.protocol === 'https:' || u.protocol === 'http:';
    } catch { return false; }
  }

  /** Ein Knopf, der etwas tut und sich dabei selbst sperrt. Ohne das
   *  Sperren löst ein doppelter Klick die Aktion zweimal aus -- beim
   *  Löschen scheitert der zweite Versuch dann mit einer Fehlermeldung,
   *  obwohl alles geklappt hat. */
  function tuKnopf(text, tu) {
    const b = el('button', 'abmelden', text);
    b.type = 'button';
    b.addEventListener('click', async (ev) => {
      ev.stopPropagation();
      b.disabled = true;
      melde('');
      try { await tu(); } catch { /* umgeleitet */ } finally { b.disabled = false; }
    });
    return b;
  }

  /** Läuft dieses Gespräch gerade noch? Ab dem geplanten Beginn bis eine
   *  Stunde nach dem geplanten Ende. Gerechnet wird auf den Textformen
   *  ('JJJJ-MM-TTThh:mm'), die der Server ohnehin schickt -- sie
   *  sortieren sich richtig und brauchen keine Zeitzone. */
  function laeuftNoch(c) {
    if (!daten?.jetzt || !c.beginn) return false;
    const ende = new Date(c.beginn.replace(' ', 'T') + ':00');
    if (Number.isNaN(ende.getTime())) return false;
    ende.setMinutes(ende.getMinutes() + (c.dauer_min || 30) + 60);
    const p = (n) => String(n).padStart(2, '0');
    const endeText = `${ende.getFullYear()}-${p(ende.getMonth() + 1)}-${p(ende.getDate())}`
      + `T${p(ende.getHours())}:${p(ende.getMinutes())}`;
    return c.beginn <= daten.jetzt && daten.jetzt <= endeText;
  }

  async function hole(pfad, optionen = {}) {
    const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
    if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
    return a;
  }

  /* ---------- Protokollbogen ---------------------------------------------- */

  function bogen(c) {
    const f = el('form', 'bogen');

    const feld = (schild, hinweis, wert) => {
      f.append(el('label', 'feld-schild', schild));
      if (hinweis) f.append(el('p', 'bogen__hinweis', hinweis));
      const t = el('textarea', 'bogen__feld');
      t.rows = 3;
      t.maxLength = 6000;
      t.value = wert || '';
      f.append(t);
      return t;
    };

    const fPunkte = feld('Besprochene Punkte', null, c.punkte);
    const fEnt = feld('Entscheidungen',
      'Was wurde festgelegt? Nicht was diskutiert wurde – was gilt.', c.entscheidungen);

    /* To-dos: der Teil, der laut Konzept direkt ins Board wandert. */
    f.append(el('label', 'feld-schild', 'To-dos'));
    f.append(el('p', 'bogen__hinweis',
      'Jede Zeile wird sofort eine echte Aufgabe im Brett – mit dem Gespräch als Herkunft.'));
    const todoBox = el('div', 'todos');
    f.append(todoBox);

    const todoZeile = (fokus) => {
      const z = el('div', 'todo');
      const t = el('input', 'todo__titel');
      t.type = 'text'; t.maxLength = 160;
      t.placeholder = 'Was ist zu tun?';
      const d = el('input', 'todo__frist');
      d.type = 'date'; d.title = 'Frist (optional)';
      const weg = el('button', 'todo__weg', '×');
      weg.type = 'button';
      weg.title = 'Zeile entfernen';
      weg.setAttribute('aria-label', 'Zeile entfernen');
      weg.addEventListener('click', () => {
        z.remove();
        if (!todoBox.children.length) todoZeile(true);
      });
      /* Enter in der letzten Zeile legt die naechste an -- so kann man
         eine Liste tippen, ohne zur Maus zu greifen. */
      t.addEventListener('keydown', (e) => {
        if (e.key !== 'Enter') return;
        e.preventDefault();
        if (z === todoBox.lastElementChild && t.value.trim()) todoZeile(true);
        else z.nextElementSibling?.querySelector('.todo__titel')?.focus();
      });
      z.append(t, d, weg);
      todoBox.append(z);
      if (fokus) t.focus();
      return z;
    };
    todoZeile(false);

    const mehr = el('button', 'knopf-still', '+ Zeile');
    mehr.type = 'button';
    mehr.addEventListener('click', () => todoZeile(true));

    const reihe = el('div', 'todo-knoepfe');
    reihe.append(mehr);

    /* Vorschlaege aus dem, was oben schon steht. Der Knopf erscheint
       nur, wenn die KI ueberhaupt laeuft -- sonst gaebe es einen Knopf,
       der immer scheitert. */
    if (kiDa) {
      reihe.append(window.KI.knopf('To-dos vorschlagen', async () => {
        const text = [fPunkte.value, fEnt.value].filter((x) => x.trim()).join(' ');
        if (text.trim().length < 20) {
          throw new Error('Schreib erst ein paar Sätze oben – daraus kann die KI dann ableiten.');
        }
        const d = await window.KI.frage('todos', { text });
        if (!d.todos?.length) throw new Error('Die KI hat nichts gefunden.');
        /* Leere Zeilen zuerst fuellen, dann neue anhaengen. Bereits
           Getipptes wird nie ueberschrieben. */
        for (const vorschlag of d.todos) {
          let ziel = [...todoBox.querySelectorAll('.todo__titel')].find((i) => !i.value.trim());
          if (!ziel) { todoZeile(false); ziel = todoBox.lastElementChild.querySelector('.todo__titel'); }
          ziel.value = vorschlag;
          ziel.dataset.vonKi = 'ja';
        }
        meldung.textContent = '';
        const hinweis = el('p', 'ki-hinweis', d.hinweis);
        reihe.after(hinweis);
        setTimeout(() => hinweis.remove(), 9000);
      }));
    }
    f.append(reihe);

    /* Nächster Termin */
    f.append(el('label', 'feld-schild', 'Nächster Termin'));
    f.append(el('p', 'bogen__hinweis',
      'Wenn hier etwas steht, wird der Folgetermin gleich in den Kalender gelegt – '
      + 'mit demselben Gegenüber und demselben Link.'));
    const naechster = el('input', 'bogen__zeit');
    naechster.type = 'datetime-local';
    f.append(naechster);

    const meldung = el('p', 'fehler');
    meldung.setAttribute('role', 'alert');
    f.append(meldung);

    const knöpfe = el('div', 'kk__knoepfe');
    const speichern = el('button', 'knopf knopf--klein', 'Protokoll festhalten');
    speichern.type = 'submit';
    const abbrechen = el('button', 'knopf-still', 'Abbrechen');
    abbrechen.type = 'button';
    abbrechen.addEventListener('click', () => { offen.delete(c.id); zeichne(); });
    knöpfe.append(speichern, abbrechen);
    f.append(knöpfe);

    f.addEventListener('submit', async (e) => {
      e.preventDefault();
      meldung.textContent = '';
      const todos = [...todoBox.querySelectorAll('.todo')]
        .map((z) => ({
          titel: z.querySelector('.todo__titel').value,
          frist: z.querySelector('.todo__frist').value,
        }))
        .filter((t) => t.titel.trim());

      if (!fPunkte.value.trim() && !fEnt.value.trim() && !todos.length) {
        meldung.textContent = 'Ein leeres Protokoll hilft niemandem.';
        return;
      }
      speichern.disabled = true;
      try {
        const a = await hole(`/workspace/api/calls/${c.id}/protokoll`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            punkte: fPunkte.value, entscheidungen: fEnt.value, todos,
            naechster_beginn: naechster.value,
          }),
        });
        if (!a.ok) {
          meldung.textContent = (await a.json().catch(() => ({}))).fehler || 'Ging nicht.';
          return;
        }
        const r = await a.json();
        offen.delete(c.id);
        await laden();
        melde(r.aufgaben
          ? `Protokoll festgehalten – ${r.aufgaben} To-do(s) liegen jetzt im Aufgabenbrett.`
          : 'Protokoll festgehalten.');
        setTimeout(() => melde(''), 5000);
      } catch { /* umgeleitet */ } finally { speichern.disabled = false; }
    });

    return f;
  }

  /* ---------- Karte -------------------------------------------------------- */

  function karte(c, gruppe) {
    const k = el('article', 'call');
    k.dataset.gruppe = gruppe;
    k.id = 'call-' + c.id;

    const kopf = el('div', 'call__kopf');
    const links = el('div');
    links.append(el('h3', 'call__titel', c.titel));
    const wer = [c.creator_name, c.teilnehmer_name].filter(Boolean).join(' · ');
    links.append(el('p', 'call__zeit',
      zeitpunkt(c.beginn) + ` · ${c.dauer_min} Min` + (wer ? ' · ' + wer : '')));
    kopf.append(links);

    const marken = el('div', 'kk__marken');
    if (c.art === 'review') marken.append(el('span', 'marke-still', 'Review'));
    if (gruppe === 'offen') marken.append(el('span', 'marke-fehlt', 'Protokoll fehlt'));
    if (c.aufgaben.length) {
      const erledigt = c.aufgaben.filter((a) => a.status === 'erledigt').length;
      marken.append(el('span', 'marke-still',
        `${erledigt}/${c.aufgaben.length} To-dos erledigt`));
    }
    kopf.append(marken);
    k.append(kopf);

    if (c.beschreibung) k.append(el('p', 'call__text', c.beschreibung));

    /* WO FINDET DER CALL STATT? (02.09.2026)

       Vorher gab es hier nur dann einen Knopf, wenn jemand von Hand
       einen Link in das Ortsfeld getippt hatte -- und nur, solange das
       Gespräch noch bevorstand. Stand dort "Hier" oder "Discord", war
       nichts zum Anklicken da, und wer beitreten wollte, musste selbst
       wissen wohin. Genau das war die Frage: "wo führe ich den Call?"

       Jetzt gilt: der eigene Ort des Termins, wenn er ein Link ist --
       sonst der feste Call-Raum des Teams. Und der Knopf bleibt, solange
       das Gespräch laufen kann, nicht nur bis zur Startzeit: Wer sich
       verspätet, braucht ihn genau dann. */
    const knöpfe = el('div', 'kk__knoepfe');
    const ziel = istLink(c.ort) ? c.ort : (daten.call_link || '');
    if (ziel && (gruppe === 'anstehend' || laeuftNoch(c))) {
      const a = el('a', 'knopf knopf--klein', laeuftNoch(c) ? 'Call beitreten' : 'Call öffnen');
      a.href = ziel;
      a.target = '_blank';
      a.rel = 'noopener noreferrer';
      /* Steht der Raum nicht am Termin, sondern kommt aus den
         Einstellungen, gehört das dazu -- sonst wundert man sich, wohin
         der Knopf führt. */
      if (!istLink(c.ort)) a.title = 'Fester Call-Raum des Teams';
      knöpfe.append(a);
    }
    if (c.ort && !istLink(c.ort)) k.append(el('p', 'call__ort', c.ort));

    if (gruppe !== 'anstehend') {
      const b = el('button', gruppe === 'offen' ? 'knopf knopf--klein' : 'knopf-still',
        offen.has(c.id) ? 'Schließen'
          : c.protokoll_id ? 'Protokoll ansehen' : 'Protokoll schreiben');
      b.type = 'button';
      b.addEventListener('click', () => {
        /* IMMER NUR EINS OFFEN (Wunsch 02.09.2026: "es soll immer
           automatisch nur 1 angezeigt werden").

           Vorher konnte man beliebig viele Protokolle gleichzeitig
           aufklappen -- die Seite wurde dabei so lang, dass die Liste
           darunter aus dem Blick geriet und man nicht mehr sah, was
           sonst noch offen ist. Ein neu geöffnetes Gespräch schliesst
           jetzt das vorherige.

           `clear()` VOR dem Merken: Sonst löschte es den gerade
           gesetzten Eintrag gleich wieder mit. */
        const warOffen = offen.has(c.id);
        offen.clear();
        if (!warOffen) offen.add(c.id);
        zeichne();
      });
      knöpfe.append(b);
    }
    if (knöpfe.childNodes.length) k.append(knöpfe);

    if (!offen.has(c.id)) return k;

    const auf = el('div', 'call__detail');
    if (c.protokoll_id) {
      /* Fertiges Protokoll: lesen, nicht bearbeiten. Ein festgehaltenes
         Gespräch nachträglich umzuschreiben wäre genau das, was ein
         Protokoll wertlos macht. */
      if (c.punkte) {
        auf.append(el('p', 'kk__schild', 'Besprochene Punkte'));
        auf.append(el('p', 'call__abschnitt', c.punkte));
      }
      if (c.entscheidungen) {
        auf.append(el('p', 'kk__schild', 'Entscheidungen'));
        auf.append(el('p', 'call__abschnitt', c.entscheidungen));
      }
      if (c.aufgaben.length) {
        auf.append(el('p', 'kk__schild', 'Daraus entstandene Aufgaben'));
        const ul = el('ul', 'todo-liste');
        for (const a of c.aufgaben) {
          const li = el('li');
          li.dataset.status = a.status;
          li.append(el('span', 'todo-liste__titel', a.titel));
          const zus = [a.verantwortlich_name, a.frist ? 'bis ' + datum(a.frist) : null,
            a.status === 'erledigt' ? 'erledigt' : null].filter(Boolean).join(' · ');
          if (zus) li.append(el('span', 'kk__still', zus));
          ul.append(li);
        }
        auf.append(ul);
      }
      auf.append(el('p', 'call__quelle',
        `Festgehalten von ${c.protokoll_von || '—'} am ${datum(c.protokoll_erstellt)}`));

      /* Löschen darf NUR DogFather (Wunsch 02.09.2026: "nur ich kann die
         löschen sonst keiner"). Der Knopf steht deshalb auch nur bei ihm
         da -- ein Knopf, der bei anderen erscheint und dann abgewiesen
         wird, ist eine Einladung zum Ärgernis. Der Server prüft es
         trotzdem noch einmal; die Anzeige ist keine Sicherung.

         Gelöscht wird NUR das Protokoll. Das Gespräch bleibt im
         Kalender stehen und rutscht wieder zu "Protokoll fehlt" -- so
         ist die Wirkung umkehrbar: neu schreiben, fertig. */
      if (ich?.rolle === 'admin') {
        const weg = el('div', 'kk__knoepfe');
        weg.append(tuKnopf('Protokoll löschen', async () => {
          if (!confirm('Protokoll zu „' + c.titel + '" löschen?\n\n'
            + 'Der Text ist danach weg und lässt sich nicht wiederholen.\n\n'
            + 'Das Gespräch selbst bleibt im Kalender und steht danach '
            + 'wieder unter „Protokoll fehlt".\n\n'
            + 'Bereits daraus entstandene Aufgaben bleiben ebenfalls stehen.')) return;
          const a = await hole('/workspace/api/calls/' + c.id + '/protokoll', { method: 'DELETE' });
          if (!a.ok) {
            melde((await a.json().catch(() => ({}))).fehler || 'Löschen ging nicht.');
            return;
          }
          offen.delete(c.id);
          await laden();
        }));
        auf.append(weg);
      }
      if (c.naechster_termin_id) {
        const p = el('p', 'call__quelle', 'Folgetermin liegt im Kalender. ');
        const a = el('a', 'call__verweis', 'Kalender öffnen');
        a.href = 'kalender.html';
        p.append(a);
        auf.append(p);
      }
    } else {
      auf.append(bogen(c));
    }
    k.append(auf);
    return k;
  }

  /* ---------- Zeichnen ----------------------------------------------------- */

  const GRUPPEN = [
    { schluessel: 'offen', titel: 'Protokoll fehlt',
      frage: 'Diese Gespräche sind vorbei, aber noch nicht festgehalten.' },
    { schluessel: 'anstehend', titel: 'Steht an', frage: null },
    { schluessel: 'erledigt', titel: 'Festgehalten', frage: null },
  ];

  /* ---------- Kategorien innerhalb einer Gruppe ---------------------------

     Wunsch Filipe, 06.09.2026, mit einem Bild von "STEHT AN 27":
     *"die liste da soll kategorisiert sein und werden mit einem button
     zum auf und zu machen."*

     WARUM NACH ZEIT und nicht nach Titel: Auf dem Bild standen
     siebenundzwanzig Karten am Stück, fast alle "Community-Talk" --
     wöchentliche Serien. Nach Titel gruppiert hätte man zwei
     Überschriften und darunter wieder dieselbe lange Liste. Die Frage,
     die man an eine Terminliste hat, ist "was kommt als Nächstes", und
     die Antwort darauf ist ein Zeitraum.

     WAS OFFEN IST: nur die erste Kategorie, die etwas enthält. Alles
     aufzuklappen wäre wieder die Wand von vorher; alles zuzuklappen
     hiesse, dass man nach dem Laden erst einmal klicken muss, um
     überhaupt etwas zu sehen. */
  const ZEITRAEUME = [
    { schluessel: 'heute', titel: 'Heute' },
    { schluessel: 'woche', titel: 'Diese Woche' },
    { schluessel: 'naechste', titel: 'Nächste Woche' },
    { schluessel: 'spaeter', titel: 'Später' },
  ];

  /** In welchen Zeitraum fällt dieser Termin?
   *
   *  ORTSZEIT durchgehend. Ein `toISOString()` läge zwischen
   *  Mitternacht und zwei Uhr einen Tag daneben -- und ausgerechnet
   *  dann wäre "Heute" leer, obwohl etwas ansteht. */
  function zeitraumVon(beginn) {
    const d = new Date(String(beginn).replace(' ', 'T'));
    if (Number.isNaN(d.getTime())) return 'spaeter';

    const heute = new Date();
    heute.setHours(0, 0, 0, 0);
    const tag = new Date(d); tag.setHours(0, 0, 0, 0);
    const tage = Math.round((tag - heute) / 86400000);

    if (tage <= 0) return 'heute';
    /* Bis zum Ende DIESER Woche (Sonntag), nicht "in sieben Tagen".
       "Diese Woche" heisst umgangssprachlich bis Sonntag -- wer am
       Freitag "diese Woche" liest, erwartet nicht den Mittwoch darauf. */
    const wochentag = (heute.getDay() + 6) % 7;      // Mo=0 … So=6
    const bisSonntag = 6 - wochentag;
    if (tage <= bisSonntag) return 'woche';
    if (tage <= bisSonntag + 7) return 'naechste';
    return 'spaeter';
  }

  function zeichne() {
    const ziel = $('listen');
    ziel.textContent = '';
    ziel.setAttribute('aria-busy', 'false');

    if (!daten.offen.length && !daten.anstehend.length && !daten.erledigt.length) {
      const leer = el('div', 'leer-hinweis');
      leer.append(document.createTextNode('Noch keine Calls. Termine mit der Art „Call" oder „Review" '));
      const a = el('a', 'call__verweis', 'im Kalender');
      a.href = 'kalender.html';
      leer.append(a, document.createTextNode(' erscheinen automatisch hier.'));
      ziel.append(leer);
      return;
    }

    /* ===================================================================
       EIN BRETT AUS ZWEI SPALTEN, KEINE LISTE (07.09.2026)

       Filipe: "du hast gesagt hast die seite umgeaendert hast du aber
       nicht, immer noch gleich aufgestellt, man kann sogar bestimmt zwei
       kategorien neben einander legen."

       Er hatte recht -- ich hatte beim letzten Mal nur das MATERIAL der
       Karten getauscht und die Aufstellung gelassen. Die drei Gruppen
       standen weiter untereinander, und weil "Steht an" siebenundzwanzig
       Eintraege hat, lagen die beiden anderen ausserhalb des Bildes.

       Jetzt ist es ein Brett: Die Gruppen sind eigenstaendige Tafeln in
       einem Raster mit zwei Spalten. "Protokoll fehlt" (kurz, dringend)
       und "Festgehalten" (Archiv) landen dadurch NEBEN der langen
       Liste statt darunter -- man sieht alle drei auf einmal.

       Die Zuordnung macht das CSS ueber die Spaltenbreite, nicht dieses
       Skript. Eine hier festgeschriebene Spalte waere eine Zahl, die
       beim naechsten Fenster falsch ist. */
    ziel.className = 'call-brett';

    for (const g of GRUPPEN) {
      const liste = daten[g.schluessel];
      if (!liste.length) continue;
      const s = el('section', 'gruppe');
      s.dataset.gruppe = g.schluessel;

      /* JEDE TAFEL LAESST SICH ZUKLAPPEN, und der Zustand wird gemerkt
         ("so wie es einem lieb ist gerade"). Der Kopf ist der Schalter,
         nicht ein Dreieck daneben -- die ganze Zeile ist ein Ziel von
         40 Pixeln statt eines von vierzehn.

         Vorgabe: "Festgehalten" ist zu. Es ist das Archiv; wer die Seite
         oeffnet, will wissen, was ANSTEHT. Die anderen beiden stehen
         offen. Wer es anders will, klickt einmal -- und es bleibt so. */
      const kopf = el('button', 'stufe__kopf');
      kopf.type = 'button';
      kopf.append(el('h2', 'stufe__titel', g.titel), el('span', 'stufe__zahl', String(liste.length)));
      const pfeil = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      pfeil.setAttribute('class', 'gruppe__pfeil');
      pfeil.setAttribute('viewBox', '0 0 24 24');
      pfeil.setAttribute('aria-hidden', 'true');
      pfeil.innerHTML = '<path d="m6 9.5 6 6 6-6" fill="none" stroke="currentColor"'
        + ' stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>';
      kopf.append(pfeil);
      s.append(kopf);

      const koerper = el('div', 'gruppe__koerper');
      if (g.frage) koerper.append(el('p', 'block__frage', g.frage));

      const schluessel = `calls:${g.schluessel}`;
      let zu = g.schluessel === 'erledigt';
      try {
        const gemerkt = localStorage.getItem(schluessel);
        if (gemerkt) zu = gemerkt === 'zu';
      } catch { /* ohne Ablage bleibt die Vorgabe */ }
      const stand = (istZu) => {
        s.dataset.zu = istZu ? 'ja' : 'nein';
        kopf.setAttribute('aria-expanded', istZu ? 'false' : 'true');
        koerper.hidden = istZu;
      };
      kopf.addEventListener('click', () => {
        zu = !zu; stand(zu);
        try { localStorage.setItem(schluessel, zu ? 'zu' : 'auf'); } catch { /* egal */ }
      });

      /* DIE ANSTEHENDEN WERDEN NACH ZEITRAUM UNTERTEILT (06.09.2026).
         Die anderen beiden Gruppen nicht: "Protokoll fehlt" ist eine
         Arbeitsliste, die man ganz sehen will, und "Festgehalten" ist
         ohnehin schon ein Archiv. Eine Unterteilung, die überall gleich
         aussieht, aber nur an einer Stelle etwas nützt, verwirrt an den
         anderen. */
      if (g.schluessel === 'anstehend' && liste.length > 4) {
        koerper.append(...zeitraumBloecke(liste, g.schluessel));
      } else {
        const box = el('div', 'gruppe__karten');
        for (const c of liste) box.append(karte(c, g.schluessel));
        koerper.append(box);
      }
      s.append(koerper);
      stand(zu);
      ziel.append(s);
    }
  }

  /** Baut die aufklappbaren Zeitraum-Blöcke.
   *
   *  <details> und nicht selbstgebaut: bringt Tastaturbedienung,
   *  aria-expanded und das Verhalten der Browsersuche von sich aus mit.
   *  Dasselbe Bauteil wie beim Bereich "Abgebrochen" auf dem
   *  Aufgabenbrett -- wer eines kennt, kennt beide. */
  function zeitraumBloecke(liste, gruppe) {
    const nach = new Map(ZEITRAEUME.map((z) => [z.schluessel, []]));
    for (const c of liste) nach.get(zeitraumVon(c.beginn))?.push(c);

    const raus = [];
    let ersterMitInhalt = true;
    for (const z of ZEITRAEUME) {
      const eigene = nach.get(z.schluessel);
      if (!eigene.length) continue;

      const block = el('details', 'zeitblock');
      block.dataset.zeitraum = z.schluessel;
      /* Nur der erste gefüllte Block ist offen -- siehe Begründung
         oben bei ZEITRAEUME. */
      if (ersterMitInhalt) { block.open = true; ersterMitInhalt = false; }

      const kopf = el('summary', 'zeitblock__kopf');
      kopf.append(el('span', 'zeitblock__name', z.titel));
      kopf.append(el('span', 'zeitblock__zahl', String(eigene.length)));
      /* Wann genau -- "Später" allein sagt nicht, ob morgen oder im
         November. Der erste Termin des Blocks beantwortet das. */
      const erster = eigene[0];
      if (erster) {
        kopf.append(el('span', 'zeitblock__ab',
          z.schluessel === 'spaeter' ? `ab ${kurzDatum(erster.beginn)}` : ''));
      }
      block.append(kopf);

      const box = el('div', 'gruppe__karten');
      for (const c of eigene) box.append(karte(c, gruppe));
      block.append(box);
      raus.push(block);
    }
    return raus;
  }

  /** "23. Sep" -- kurz, weil es neben einer Überschrift steht. */
  function kurzDatum(beginn) {
    const d = new Date(String(beginn).replace(' ', 'T'));
    if (Number.isNaN(d.getTime())) return '';
    return d.toLocaleDateString('de-DE', { day: 'numeric', month: 'short' });
  }

  async function laden() {
    try {
      const a = await hole('/workspace/api/calls');
      if (!a.ok) { melde('Gespräche konnten nicht geladen werden.'); return; }
      daten = await a.json();
      raumZeigen();
      zeichne();
    } catch { /* umgeleitet */ }
  }

  /* ---------- Der feste Call-Raum ------------------------------------------
     Sichtbar für alle, änderbar nur vom Management. Wer nicht ändern
     darf und wo noch nichts hinterlegt ist, bekommt die Zeile gar nicht
     zu sehen -- eine leere Angabe, an der man nichts tun kann, ist nur
     Rauschen. */

  const darfRaum = () => LEITUNG.has(ich?.rolle);

  function raumZeigen() {
    const link = daten?.call_link || '';
    const block = $('call-raum');
    block.hidden = !link && !darfRaum();
    $('call-raum-aendern').hidden = !darfRaum();
    $('call-raum-link').hidden = !link;
    $('call-raum-leer').hidden = !!link;
    if (link) {
      $('call-raum-link').href = link;
      /* Der nackte Link ist unlesbar lang. Angezeigt wird, woran man ihn
         erkennt -- die volle Adresse steht im Titel und im Verweis. */
      $('call-raum-link').textContent = link.replace(/^https?:\/\//i, '').slice(0, 60);
      $('call-raum-link').title = link;
    }
  }

  $('call-raum-aendern').addEventListener('click', () => {
    $('call-raum-feld').value = daten?.call_link || '';
    $('call-raum-form').hidden = false;
    $('call-raum-aendern').hidden = true;
    $('call-raum-feld').focus();
  });
  $('call-raum-abbrechen').addEventListener('click', () => {
    $('call-raum-form').hidden = true;
    $('call-raum-aendern').hidden = false;
  });
  $('call-raum-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    melde('');
    try {
      const a = await hole('/workspace/api/call-link', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ link: $('call-raum-feld').value.trim() }),
      });
      if (!a.ok) {
        melde((await a.json().catch(() => ({}))).fehler || 'Speichern ging nicht.');
        return;
      }
      $('call-raum-form').hidden = true;
      $('call-raum-aendern').hidden = false;
      await laden();
    } catch { /* umgeleitet */ }
  });

  /* ---------- Start --------------------------------------------------------- */

  (async () => {
    try {
      const a = await hole('/workspace/api/ich');
      if (!a.ok) { location.assign('/workspace/'); return; }
      ich = await a.json();
    } catch { return; }
    window.werZeigen?.(ich);
    kiDa = await window.KI.verfuegbar();
    await laden();
  })();
})();