Continue AI features and improve protocol support

core/templates/pages/ai-workspace-insight-detail.html

@@ -0,0 +1,110 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block content %}
+  <div class="columns is-multiline">
+    <div class="column is-12">
+      <nav class="breadcrumb is-small" aria-label="breadcrumbs">
+        <ul>
+          <li><a href="{{ workspace_url }}">AI Workspace</a></li>
+          <li><a href="{{ graphs_url }}">Insight Graphs</a></li>
+          <li class="is-active"><a aria-current="page">{{ metric.title }}</a></li>
+        </ul>
+      </nav>
+    </div>
+    <div class="column is-12">
+      <h1 class="title is-4" style="margin-bottom: 0.35rem;">{{ metric.title }}: {{ person.name }}</h1>
+      <p class="is-size-7 has-text-grey">Conversation {{ workspace_conversation.id }}</p>
+    </div>
+    <div class="column is-5">
+      <div class="box">
+        <p class="heading">{{ metric_group.title }}</p>
+        <p class="title is-5" style="margin-bottom: 0.5rem;">{{ metric.title }}</p>
+        <p><strong>Current Value:</strong> {{ metric_value|default:"-" }}</p>
+        <p style="margin-top: 0.65rem;"><strong>How It Is Calculated</strong></p>
+        <p>{{ metric.calculation }}</p>
+        <p style="margin-top: 0.65rem;"><strong>Psychological Interpretation</strong></p>
+        <p>{{ metric.psychology }}</p>
+        {% if metric_psychology_hint %}
+          <article class="message is-info is-light" style="margin-top: 0.75rem;">
+            <div class="message-body">
+              {{ metric_psychology_hint }}
+            </div>
+          </article>
+        {% endif %}
+      </div>
+      <div class="buttons">
+        <a class="button is-light" href="{{ graphs_url }}">
+          <span class="icon is-small"><i class="fa-solid fa-chart-line"></i></span>
+          <span>All Graphs</span>
+        </a>
+        <a class="button is-light" href="{{ help_url }}">
+          <span class="icon is-small"><i class="fa-solid fa-circle-question"></i></span>
+          <span>Scoring Help</span>
+        </a>
+      </div>
+    </div>
+    <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>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+
+  {{ graph_points|json_script:"metric-detail-points" }}
+  <script src="{% static 'js/chart.js' %}"></script>
+  <script>
+    (function() {
+      var node = document.getElementById("metric-detail-points");
+      if (!node) {
+        return;
+      }
+      var points = JSON.parse(node.textContent || "[]");
+      var labels = points.map(function(row) {
+        var dt = new Date(row.x);
+        return dt.toLocaleString();
+      });
+      var values = points.map(function(row) {
+        return row.y;
+      });
+      var ctx = document.getElementById("metric-detail-chart");
+      if (!ctx) {
+        return;
+      }
+      new Chart(ctx.getContext("2d"), {
+        type: "line",
+        data: {
+          labels: labels,
+          datasets: [
+            {
+              label: "{{ metric.title|escapejs }}",
+              data: values,
+              borderColor: "#3273dc",
+              backgroundColor: "rgba(50,115,220,0.12)",
+              borderWidth: 2,
+              pointRadius: 2,
+              tension: 0.28,
+              spanGaps: true
+            }
+          ]
+        },
+        options: {
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: true
+            }
+          }
+        }
+      });
+    })();
+  </script>
+{% endblock %}