I want the Reminders tab to show the message history for the selected conversation under the script preview.

In app/templates/dashboard.html:

1) Update the Reminders script card markup.

Find the card that contains:

  <h3 class="text-sm font-semibold text-dp-ink">Message preview</h3>
  ...
  <textarea id="rem-script-preview" ...></textarea>
  <div class="mt-2 flex justify-between items-center">
    <!-- Mark as sent button etc -->
  </div>

Under that div, add a simple history panel:

      <div class="mt-4 border-t border-neutral-200 pt-3">
        <div class="flex items-center justify-between mb-1">
          <h4 class="text-[11px] font-semibold text-neutral-600 uppercase tracking-wide">
            Conversation history
          </h4>
          <span id="rem-history-meta" class="text-[11px] text-neutral-400"></span>
        </div>
        <div
          id="rem-history"
          class="max-h-48 overflow-y-auto text-[11px] leading-snug space-y-2 pr-1"
        >
          <p class="text-neutral-400">No history for this conversation yet.</p>
        </div>
      </div>

2) Add a helper in the <script> block to load and render history.

Add:

  async function loadConversationHistory(rem) {
    const histEl = document.getElementById("rem-history");
    const metaEl = document.getElementById("rem-history-meta");
    if (!histEl || !metaEl) return;

    const convId = rem.conversation_id;
    if (!convId) {
      histEl.innerHTML = `<p class="text-neutral-400">No conversation linked.</p>`;
      metaEl.textContent = "";
      return;
    }

    histEl.innerHTML = `<p class="text-neutral-400">Loading history…</p>`;
    metaEl.textContent = "";

    try {
      const res = await fetch(`/api/messages?conversation_id=${encodeURIComponent(convId)}&limit=50`);
      if (!res.ok) {
        histEl.innerHTML = `<p class="text-neutral-400">No history available.</p>`;
        metaEl.textContent = "";
        return;
      }
      const data = await res.json();
      const msgs = data.messages || [];

      if (!msgs.length) {
        histEl.innerHTML = `<p class="text-neutral-400">No history for this conversation yet.</p>`;
        metaEl.textContent = "";
        return;
      }

      const parts = [];
      for (const m of msgs) {
        const ts = m.created_at ? new Date(m.created_at).toLocaleString() : "";
        const dir = m.direction === "inbound" ? "Customer" : "Lia";
        const mode = m.mode ? ` · ${m.mode}` : "";
        const safeBody = (m.message_body || "").replace(/\n/g, "<br>");

        parts.push(
          `<div class="border border-neutral-200 rounded-lg px-2 py-1.5 bg-neutral-50">
             <div class="flex justify-between mb-0.5">
               <span class="font-medium">${dir}</span>
               <span class="text-[10px] text-neutral-400">${ts}${mode}</span>
             </div>
             <div class="text-[11px] text-neutral-700">${safeBody}</div>
           </div>`
        );
      }

      histEl.innerHTML = parts.join("");
      metaEl.textContent = `${msgs.length} message${msgs.length === 1 ? "" : "s"}`;
    } catch (err) {
      console.error("Error loading history", err);
      histEl.innerHTML = `<p class="text-neutral-400">Could not load history.</p>`;
      metaEl.textContent = "";
    }
  }

3) Call loadConversationHistory(rem) when a reminder is clicked.

In the loadReminders() click handler (where we already update the label, script textarea, and call updateConversationStatus(rem)), add:

          // Update conversation status line
          updateConversationStatus(rem);

          // Load conversation history
          loadConversationHistory(rem);

4) Save, restart the dashboard server, and test:

- Click a reminder linked to a conversation_id that has some dp_messages rows.
- Confirm:
  - History panel shows those messages (Lia / Customer with timestamps).
  - If no messages, shows "No history for this conversation yet."
  - No errors in the browser console.