Implement AI workspace and mitigation workflow

core/templates/partials/ai-workspace-widget.html

@@ -0,0 +1,54 @@
+<div class="ai-workspace-widget">
+  <div class="columns is-mobile is-gapless">
+    <div class="column is-12-mobile is-12-tablet">
+      <div style="margin-bottom: 0.75rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12);">
+        <p class="is-size-7 has-text-weight-semibold">AI Workspace</p>
+        <h3 class="title is-6" style="margin-bottom: 0.5rem;">Choose A Contact</h3>
+        <p class="is-size-7">
+          Pick a person to open their message timeline in a fresh pane.
+        </p>
+      </div>
+
+      <form id="ai-window-form" style="margin-bottom: 0.75rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12);">
+        <label class="label is-small" for="id_limit">Window</label>
+        <div class="select is-fullwidth is-small">
+          {{ window_form.limit }}
+        </div>
+        <p class="help">{{ window_form.limit.help_text }}</p>
+      </form>
+
+      <div>
+        {% if contact_rows %}
+          <div class="buttons are-small" style="display: grid; gap: 0.5rem;">
+            {% for row in contact_rows %}
+              <button
+                class="button is-fullwidth"
+                style="border-radius: 8px; border: 0; background: transparent; box-shadow: none; padding: 0;"
+                hx-get="{% url 'ai_workspace_person' type='widget' person_id=row.person.id %}"
+                hx-include="#ai-window-form"
+                hx-target="#widgets-here"
+                hx-swap="afterend">
+                <span class="tags has-addons" style="display: inline-flex; width: 100%; margin: 0; white-space: nowrap;">
+                  <span class="tag is-dark" style="min-width: 2.5rem; justify-content: center;">
+                    <i class="fa-solid fa-comment-dots" aria-hidden="true"></i>
+                  </span>
+                  <span class="tag is-white" style="flex: 1; display: inline-flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-left: 0.7rem; padding-right: 0.7rem; border-top: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2);">
+                    <span style="display: inline-flex; align-items: baseline; gap: 0.35rem; min-width: 0;">
+                      <strong>{{ row.person.name }}</strong>
+                    </span>
+                    {% if row.last_ts_label %}
+                      <small style="padding-left: 0.5rem;">{{ row.last_ts_label }}</small>
+                    {% endif %}
+                  </span>
+                  <span class="tag is-dark" style="min-width: 3.25rem; justify-content: center;">{{ row.message_count }}</span>
+                </span>
+              </button>
+            {% endfor %}
+          </div>
+        {% else %}
+          <p class="has-text-grey">No contacts available yet.</p>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>