Function initTeam

docs/src/javascripts/lifecycle.js:498–639

(host)

  ];

  function initTeam(host) {
    if (!host) return;
    host.innerHTML = "";
    host.classList.add("lc-team");

    const head = htmlEl("div", { class: "lc-team__head" });
    head.appendChild(htmlEl("span", { class: "lc-muted" }, "orchestrator routes work to specialists, then synthesizes the answer"));
    const replayBtn = htmlEl("button", { class: "lc-btn lc-btn--ghost", type: "button" }, "▶ replay one investigation");
    head.appendChild(replayBtn);
    host.appendChild(head);

    const svg = svgEl("svg", { viewBox: `0 0 ${TEAM_W} ${TEAM_H}`, width: "100%", role: "img", "aria-label": "Team diagram" });
    host.appendChild(svg);

    // Connectors
    const connectors = {};
    [
      { id: "investigator", d: `M 300 90 V ${J_Y} H 105 V 200` },
      { id: "diagnoser",    d: "M 300 90 V 200" },
      { id: "remediator",   d: `M 300 90 V ${J_Y} H 495 V 200` },
    ].forEach((c) => {
      const path = svgEl("path", {
        d: c.d, fill: "none",
        stroke: "var(--md-default-fg-color--lightest)",
        "stroke-width": "1.4",
        "stroke-linecap": "round",
      });
      svg.appendChild(path);
      connectors[c.id] = path;
    });

    // Orchestrator box
    const orch = svgEl("g", {});
    orch.appendChild(svgEl("rect", { x: 200, y: 20, width: 200, height: 70, rx: 12, fill: "var(--md-default-bg-color)", stroke: "var(--md-primary-fg-color)", "stroke-width": "1.2", "stroke-opacity": "0.45" }));
    addBoxLabels(orch, 200 + 100, 20, 70, "ORCHESTRATOR", "orchestrator", "routes & synthesizes");
    svg.appendChild(orch);

    // Sub-agents
    const subBoxes = {};
    TEAM_SUBS.forEach((s) => {
      const g = svgEl("g", {});
      const rect = svgEl("rect", { x: s.x, y: SUB_TOP_Y, width: 170, height: 100, rx: 12, fill: "var(--md-default-bg-color)", stroke: "var(--md-default-fg-color--light)", "stroke-width": "1.2", "stroke-opacity": "0.4" });
      g.appendChild(rect);
      addBoxLabels(g, s.x + 85, SUB_TOP_Y, 100, "SUB-AGENT", s.label, s.tools);
      svg.appendChild(g);
      subBoxes[s.id] = rect;
    });

    // Packet
    const packet = svgEl("circle", { r: 8, fill: "var(--md-primary-fg-color)", stroke: "var(--md-default-bg-color)", "stroke-width": 2, opacity: 0 });
    svg.appendChild(packet);

    function addBoxLabels(g, cx, top, h, eyebrow, label, sub) {
      const e = svgEl("text", { x: cx, y: top + 22, "text-anchor": "middle", "font-family": "var(--md-code-font-family)", "font-size": "10", "letter-spacing": "1.5", fill: "var(--md-primary-fg-color)", opacity: "0.85" });
      e.textContent = eyebrow;
      g.appendChild(e);
      const l = svgEl("text", { x: cx, y: top + h / 2 + 6, "text-anchor": "middle", "font-family": "var(--md-text-font-family)", "font-size": "14", "font-weight": "600", fill: "var(--md-default-fg-color)" });
      l.textContent = label;