Implement deeper analysis of people and access to the underlying data in the database

2026-02-15 18:02:52 +00:00
parent a94bbff655
commit e7aac36ef9
4 changed files with 398 additions and 96 deletions
--- a/core/templates/pages/ai-workspace-insight-detail.html
+++ b/core/templates/pages/ai-workspace-insight-detail.html
@@ -47,13 +47,21 @@
    <div class="column is-7">
      <div class="box">
        <p class="heading">History</p>
-        <div style="height: 360px;">
-          <canvas id="metric-detail-chart"></canvas>
-        </div>
-        {% if not graph_points %}
-          <p class="is-size-7 has-text-grey" style="margin-top: 0.65rem;">
-            No historical points yet for this metric.
-          </p>
+        {% if graph_applicable %}
+          <div style="height: 360px;">
+            <canvas id="metric-detail-chart"></canvas>
+          </div>
+          {% if not graph_points %}
+            <p class="is-size-7 has-text-grey" style="margin-top: 0.65rem;">
+              No historical points yet for this metric.
+            </p>
+          {% endif %}
+        {% else %}
+          <article class="message is-light">
+            <div class="message-body">
+              This is a point-in-time metric and is not charted.
+            </div>
+          </article>
        {% endif %}
      </div>
    </div>
@@ -68,6 +76,10 @@
        return;
      }
      var points = JSON.parse(node.textContent || "[]");
+      var shouldRender = {{ graph_applicable|yesno:"true,false" }};
+      if (!shouldRender) {
+        return;
+      }
      var labels = points.map(function(row) {
        var dt = new Date(row.x);
        return dt.toLocaleString();
--- a/core/templates/partials/compose-panel.html
+++ b/core/templates/partials/compose-panel.html
@@ -37,6 +37,7 @@
    {% include "partials/compose-send-status.html" %}
  </div>

+  <div id="{{ panel_id }}-popover-backdrop" class="compose-ai-popover-backdrop is-hidden"></div>
  <div id="{{ panel_id }}-popover" class="compose-ai-popover is-hidden">
    <div class="compose-ai-card" data-kind="drafts">
      <p class="compose-ai-title">Draft Suggestions</p>
@@ -58,6 +59,22 @@
    </div>
    <div class="compose-ai-card" data-kind="engage">
      <p class="compose-ai-title">Quick Engage (Shared Framing)</p>
+      <div class="compose-engage-source-row">
+        <div class="select is-small is-fullwidth">
+          <select class="engage-source-select">
+            <option value="">Auto</option>
+          </select>
+        </div>
+        <button type="button" class="button is-light is-small engage-refresh-btn">
+          Refresh
+        </button>
+      </div>
+      <div class="field compose-engage-custom-wrap is-hidden">
+        <textarea
+          class="textarea is-small engage-custom-text"
+          rows="2"
+          placeholder="Write custom engagement text..."></textarea>
+      </div>
      <div class="compose-ai-loading">
        <div class="compose-ai-skel"></div>
        <div class="compose-ai-skel"></div>
@@ -65,10 +82,7 @@
      <div class="compose-ai-content"></div>
      <div class="compose-ai-safety">
        <label class="checkbox is-size-7">
-          <input type="checkbox" class="engage-arm"> Arm Send
-        </label>
-        <label class="checkbox is-size-7">
-          <input type="checkbox" class="engage-confirm"> Confirm Share To Other Party
+          <input type="checkbox" class="engage-confirm"> Confirm Send To Other Party
        </label>
        <button type="button" class="button is-link is-light is-small engage-send-btn" disabled>
          Send Engage
@@ -123,10 +137,7 @@
    {% endif %}
    <div class="compose-send-safety">
      <label class="checkbox is-size-7">
-        <input type="checkbox" class="manual-arm"> Arm Send
-      </label>
-      <label class="checkbox is-size-7">
-        <input type="checkbox" class="manual-confirm"> Confirm Intent
+        <input type="checkbox" class="manual-confirm"> Confirm Send
      </label>
    </div>
    <div class="compose-composer-capsule">
@@ -253,6 +264,20 @@
    width: min(34rem, calc(100% - 1.4rem));
    z-index: 25;
  }
+  #{{ panel_id }} .compose-ai-popover-backdrop {
+    position: absolute;
+    inset: 0.45rem;
+    border-radius: 8px;
+    background: radial-gradient(circle at 100% 0%, rgba(238, 245, 255, 0.42), rgba(255, 255, 255, 0.15) 42%, rgba(255, 255, 255, 0));
+    z-index: 24;
+    pointer-events: auto;
+    opacity: 1;
+    transition: opacity 140ms ease-out;
+  }
+  #{{ panel_id }} .compose-ai-popover-backdrop.is-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
  #{{ panel_id }} .compose-ai-popover.is-hidden {
    display: none;
  }
@@ -266,7 +291,7 @@
  }
  #{{ panel_id }} .compose-ai-card.is-active {
    display: block;
-    animation: composeFadeIn 160ms ease-out;
+    animation: composeFadeIn 180ms ease-out;
  }
  #{{ panel_id }} .compose-ai-title {
    font-weight: 600;
@@ -294,6 +319,22 @@
    text-align: left;
    margin-bottom: 0.45rem;
    border-radius: 8px;
+    white-space: normal;
+    word-break: break-word;
+    height: auto;
+    justify-content: flex-start;
+    align-items: flex-start;
+    line-height: 1.35;
+  }
+  #{{ panel_id }} .compose-draft-option strong {
+    display: inline;
+    margin-right: 0.2rem;
+    white-space: normal;
+  }
+  #{{ panel_id }} .compose-draft-option span {
+    white-space: normal;
+    word-break: break-word;
+    overflow-wrap: anywhere;
  }
  #{{ panel_id }} .compose-draft-option:last-child {
    margin-bottom: 0;
@@ -305,6 +346,18 @@
    flex-wrap: wrap;
    align-items: center;
  }
+  #{{ panel_id }} .compose-engage-source-row {
+    display: flex;
+    gap: 0.45rem;
+    margin-bottom: 0.45rem;
+    align-items: center;
+  }
+  #{{ panel_id }} .compose-engage-source-row .select {
+    flex: 1 1 auto;
+  }
+  #{{ panel_id }} .compose-engage-custom-wrap {
+    margin-bottom: 0.45rem;
+  }
  @keyframes composePulse {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
@@ -344,6 +397,7 @@

    const statusBox = document.getElementById(panelId + "-status");
    const popover = document.getElementById(panelId + "-popover");
+    const popoverBackdrop = document.getElementById(panelId + "-popover-backdrop");
    const csrfToken = "{{ csrf_token }}";

    window.giaComposePanels = window.giaComposePanels || {};
@@ -511,27 +565,22 @@
      }
    };

-    const manualArm = form.querySelector(".manual-arm");
    const manualConfirm = form.querySelector(".manual-confirm");
    const armInput = form.querySelector("input[name='failsafe_arm']");
    const confirmInput = form.querySelector("input[name='failsafe_confirm']");
    const sendButton = form.querySelector(".compose-send-btn");
    const updateManualSafety = function () {
-      const arm = !!(manualArm && manualArm.checked);
      const confirm = !!(manualConfirm && manualConfirm.checked);
      if (armInput) {
-        armInput.value = arm ? "1" : "0";
+        armInput.value = confirm ? "1" : "0";
      }
      if (confirmInput) {
        confirmInput.value = confirm ? "1" : "0";
      }
      if (sendButton) {
-        sendButton.disabled = !(arm && confirm);
+        sendButton.disabled = !confirm;
      }
    };
-    if (manualArm) {
-      manualArm.addEventListener("change", updateManualSafety);
-    }
    if (manualConfirm) {
      manualConfirm.addEventListener("change", updateManualSafety);
    }
@@ -552,6 +601,9 @@
      if (!popover) {
        return;
      }
+      if (popoverBackdrop) {
+        popoverBackdrop.classList.add("is-hidden");
+      }
      popover.classList.add("is-hidden");
      popover.querySelectorAll(".compose-ai-card").forEach(function (card) {
        card.classList.remove("is-active");
@@ -563,6 +615,9 @@
      if (!popover) {
        return null;
      }
+      if (popoverBackdrop) {
+        popoverBackdrop.classList.remove("is-hidden");
+      }
      popover.classList.remove("is-hidden");
      let active = null;
      popover.querySelectorAll(".compose-ai-card").forEach(function (card) {
@@ -668,15 +723,144 @@
      }
    };

+    const loadEngage = async function (card, preferredSource) {
+      card = card || showCard("engage");
+      if (!card) {
+        return;
+      }
+      setCardLoading(card, true);
+      panelState.engageToken = "";
+      const sourceSelect = card.querySelector(".engage-source-select");
+      const refreshBtn = card.querySelector(".engage-refresh-btn");
+      const sendBtn = card.querySelector(".engage-send-btn");
+      const confirm = card.querySelector(".engage-confirm");
+      const customWrap = card.querySelector(".compose-engage-custom-wrap");
+      const customText = card.querySelector(".engage-custom-text");
+      const selectedSource = (
+        preferredSource !== undefined
+          ? preferredSource
+          : (sourceSelect ? sourceSelect.value : "")
+      );
+      const customValue = customText ? String(customText.value || "").trim() : "";
+      const showCustom = selectedSource === "custom";
+      confirm.checked = false;
+      sendBtn.disabled = true;
+      if (customWrap) {
+        customWrap.classList.toggle("is-hidden", !showCustom);
+      }
+      if (refreshBtn) {
+        refreshBtn.classList.add("is-loading");
+      }
+      try {
+        const params = queryParams();
+        if (selectedSource) {
+          params.set("source_ref", selectedSource);
+        }
+        if (showCustom && customValue) {
+          params.set("custom_text", customValue);
+        }
+        const response = await fetch(
+          thread.dataset.engagePreviewUrl + "?" + params.toString(),
+          {
+            method: "GET",
+            credentials: "same-origin",
+            headers: { Accept: "application/json" }
+          }
+        );
+        const payload = await response.json();
+        setCardLoading(card, false);
+        if (!payload.ok) {
+          card.querySelector(".compose-ai-content").textContent = payload.error || "Failed to load engage preview.";
+          panelState.engageToken = "";
+          return;
+        }
+        const options = Array.isArray(payload.options) ? payload.options : [];
+        if (sourceSelect) {
+          const before = sourceSelect.value;
+          sourceSelect.innerHTML = "";
+          options.forEach(function (opt) {
+            const option = document.createElement("option");
+            option.value = String(opt.value || "");
+            option.textContent = String(opt.label || "");
+            sourceSelect.appendChild(option);
+          });
+          const payloadSelected = String(payload.selected_source || "");
+          if (payloadSelected) {
+            sourceSelect.value = payloadSelected;
+          } else if (before) {
+            sourceSelect.value = before;
+          }
+          if (!sourceSelect.value && sourceSelect.options.length > 0) {
+            sourceSelect.selectedIndex = 0;
+          }
+        }
+        if (customText && payload.custom_text !== undefined) {
+          customText.value = String(payload.custom_text || "");
+        }
+        if (customWrap && sourceSelect) {
+          customWrap.classList.toggle("is-hidden", sourceSelect.value !== "custom");
+        }
+        panelState.engageToken = String(payload.token || "");
+        let text = String(payload.preview || "");
+        if (payload.artifact) {
+          text = text + "\n\nSource: " + String(payload.artifact);
+        }
+        card.querySelector(".compose-ai-content").textContent = text;
+        sendBtn.disabled = !(confirm.checked && panelState.engageToken);
+      } catch (err) {
+        setCardLoading(card, false);
+        card.querySelector(".compose-ai-content").textContent = "Failed to load engage preview.";
+        panelState.engageToken = "";
+      } finally {
+        if (refreshBtn) {
+          refreshBtn.classList.remove("is-loading");
+        }
+      }
+    };
+
    const bindEngageControls = function (card) {
-      const arm = card.querySelector(".engage-arm");
      const confirm = card.querySelector(".engage-confirm");
      const send = card.querySelector(".engage-send-btn");
+      const sourceSelect = card.querySelector(".engage-source-select");
+      const refreshBtn = card.querySelector(".engage-refresh-btn");
+      const customText = card.querySelector(".engage-custom-text");
+      const customWrap = card.querySelector(".compose-engage-custom-wrap");
+      let customDebounce = null;
+
      const sync = function () {
-        send.disabled = !(arm.checked && confirm.checked && panelState.engageToken);
+        send.disabled = !(confirm.checked && panelState.engageToken);
      };
-      arm.addEventListener("change", sync);
      confirm.addEventListener("change", sync);
+
+      if (sourceSelect) {
+        sourceSelect.addEventListener("change", function () {
+          if (customWrap) {
+            customWrap.classList.toggle("is-hidden", sourceSelect.value !== "custom");
+          }
+          loadEngage(card, sourceSelect.value);
+        });
+      }
+
+      if (customText) {
+        customText.addEventListener("input", function () {
+          if (!sourceSelect || sourceSelect.value !== "custom") {
+            return;
+          }
+          if (customDebounce) {
+            clearTimeout(customDebounce);
+          }
+          customDebounce = setTimeout(function () {
+            loadEngage(card, "custom");
+          }, 260);
+        });
+      }
+
+      if (refreshBtn) {
+        refreshBtn.addEventListener("click", function () {
+          loadEngage(card, sourceSelect ? sourceSelect.value : "");
+        });
+      }
+
      send.addEventListener("click", async function () {
        if (!panelState.engageToken) {
          return;
@@ -688,7 +872,7 @@
          formData.set("person", thread.dataset.person);
        }
        formData.set("engage_token", panelState.engageToken);
-        formData.set("failsafe_arm", arm.checked ? "1" : "0");
+        formData.set("failsafe_arm", confirm.checked ? "1" : "0");
        formData.set("failsafe_confirm", confirm.checked ? "1" : "0");
        try {
          const response = await fetch(thread.dataset.engageSendUrl, {
@@ -715,48 +899,6 @@
      });
    };

-    const loadEngage = async function () {
-      const card = showCard("engage");
-      if (!card) {
-        return;
-      }
-      setCardLoading(card, true);
-      panelState.engageToken = "";
-      const sendBtn = card.querySelector(".engage-send-btn");
-      const arm = card.querySelector(".engage-arm");
-      const confirm = card.querySelector(".engage-confirm");
-      arm.checked = false;
-      confirm.checked = false;
-      sendBtn.disabled = true;
-      try {
-        const response = await fetch(thread.dataset.engagePreviewUrl + "?" + queryParams().toString(), {
-          method: "GET",
-          credentials: "same-origin",
-          headers: { Accept: "application/json" }
-        });
-        const payload = await response.json();
-        setCardLoading(card, false);
-        if (!payload.ok) {
-          card.querySelector(".compose-ai-content").textContent = payload.error || "Failed to load engage preview.";
-          return;
-        }
-        panelState.engageToken = String(payload.token || "");
-        let text = String(payload.preview || "");
-        if (payload.artifact) {
-          text = text + "\n\nSource: " + String(payload.artifact);
-        }
-        card.querySelector(".compose-ai-content").textContent = text;
-        sendBtn.disabled = true;
-      } catch (err) {
-        setCardLoading(card, false);
-        card.querySelector(".compose-ai-content").textContent = "Failed to load engage preview.";
-      }
-      if (!card.dataset.bound) {
-        bindEngageControls(card);
-        card.dataset.bound = "1";
-      }
-    };
-
    panel.querySelectorAll(".js-ai-trigger").forEach(function (button) {
      button.addEventListener("click", function () {
        const kind = button.dataset.kind;
@@ -769,7 +911,12 @@
        } else if (kind === "summary") {
          loadSummary();
        } else if (kind === "engage") {
-          loadEngage();
+          const card = showCard("engage");
+          if (card && !card.dataset.bound) {
+            bindEngageControls(card);
+            card.dataset.bound = "1";
+          }
+          loadEngage(card);
        }
      });
    });
@@ -777,15 +924,30 @@
    panelState.docClickHandler = function (event) {
      if (!panel.contains(event.target)) {
        hideAllCards();
+        return;
+      }
+      const clickedTrigger = event.target.closest(".js-ai-trigger");
+      if (clickedTrigger) {
+        return;
+      }
+      if (popover && !popover.classList.contains("is-hidden")) {
+        if (!popover.contains(event.target)) {
+          hideAllCards();
+        }
      }
    };
+    if (popoverBackdrop) {
+      popoverBackdrop.addEventListener("click", function () {
+        hideAllCards();
+      });
+    }
    document.addEventListener("mousedown", panelState.docClickHandler);

    textarea.addEventListener("keydown", function (event) {
      if (event.key === "Enter" && !event.shiftKey) {
        event.preventDefault();
        if (sendButton && sendButton.disabled) {
-          setStatus("Enable both send safety switches before sending.", "warning");
+          setStatus("Enable send confirmation before sending.", "warning");
          return;
        }
        form.requestSubmit();