Claude Code transcript - page 6/9

                    {% for s in sessions %}
                    <div class="session-item-wrap">
                        <a href="/chat/{{ s.session_id }}"
                           class="session-item{% if active_id == s.session_id %} active{% endif %}">
                            <span class="session-name">{{ s.product_name or 'Untitled' }}</span>
                            <span class="session-detail">{{ s.summary.total_reviews }} reviews &middot; {{ s.platform }}</span>
                        </a>
                        <div class="session-menu-wrap">
                            <button class="session-menu-btn" onclick="toggleSessionMenu(event, this)" aria-label="Session options">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                                    <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>
                                </svg>
                            </button>
                            <div class="session-menu-dropdown">
                                <button class="session-menu-action" onclick="archiveSession(event, '{{ s.session_id }}')">
                                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/>
                                    </svg>
                                    Archive
                                </button>
                            </div>
                        </div>
                    </div>

/* Session item with menu */

.session-item-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}

.session-item-wrap .session-item {
    flex: 1;
    min-width: 0;
}

.session-menu-wrap {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.12s;
}

.session-item-wrap:hover .session-menu-wrap,
.session-menu-wrap.open {
    opacity: 1;
}

.session-menu-btn {
    background: var(--bg-2);
    border: 1px solid var(--bg-3);
    border-radius: var(--radius);
    color: var(--text-2);
    cursor: pointer;
    padding: 3px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s, background 0.12s;
}

.session-menu-btn:hover {
    color: var(--text-0);
    background: var(--bg-3);
}

.session-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--bg-2);
    border: 1px solid var(--bg-3);
    border-radius: var(--radius);
    min-width: 120px;
    padding: 3px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

html.light .session-menu-dropdown {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.session-menu-wrap.open .session-menu-dropdown {
    display: block;
}

.session-menu-action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--text-1);
    font-family: var(--sans);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.1s;
}

.session-menu-action:hover {
    background: var(--bg-3);
}

.empty-history {
    font-size: 0.8rem;
    color: var(--text-3);
    padding: 0.5rem 0;
}

function closeModal() {
  document.getElementById("modal-backdrop").classList.remove("open");
  document.getElementById("analysis-modal").classList.remove("open");
}

// ── Session menu ────────────────────────────────────────────────────

function toggleSessionMenu(e, btn) {
  e.preventDefault();
  e.stopPropagation();
  var wrap = btn.closest(".session-menu-wrap");
  var wasOpen = wrap.classList.contains("open");

  // Close all menus first
  document.querySelectorAll(".session-menu-wrap.open").forEach(function (el) {
    el.classList.remove("open");
  });

  if (!wasOpen) wrap.classList.add("open");
}

function archiveSession(e, sessionId) {
  e.preventDefault();
  e.stopPropagation();
  fetch("/api/sessions/" + sessionId, { method: "DELETE" })
    .then(function (r) {
      if (r.ok) {
        var wrap = document.querySelector(
          '.session-menu-wrap.open'
        );
        if (wrap) {
          var item = wrap.closest(".session-item-wrap");
          item.style.transition = "opacity 0.2s, max-height 0.2s";
          item.style.opacity = "0";
          item.style.maxHeight = item.offsetHeight + "px";
          item.style.overflow = "hidden";
          setTimeout(function () {
            item.style.maxHeight = "0";
          }, 10);
          setTimeout(function () {
            item.remove();
            // If we archived the active session, go home
            if (window.location.pathname.indexOf(sessionId) !== -1) {
              window.location.href = "/";
            }
          }, 220);
        }
      }
    });
}

// Close session menus on outside click
document.addEventListener("click", function () {
  document.querySelectorAll(".session-menu-wrap.open").forEach(function (el) {
    el.classList.remove("open");
  });
});

import json
import os
import shutil
from pathlib import Path

    sessions.sort(key=lambda s: s.created_at, reverse=True)
    return sessions


def delete_session(session_id: str) -> bool:
    """Delete a session and all its data. Returns True if it existed."""
    d = DATA_DIR / session_id
    if d.exists() and d.is_dir():
        shutil.rmtree(d)
        return True
    return False

# ── Archive (delete) session ──────────────────────────────────────────

@app.delete("/api/sessions/{session_id}")
async def delete_session(session_id: str):
    deleted = store.delete_session(session_id)
    if not deleted:
        return JSONResponse({"error": "not found"}, status_code=404)
    return JSONResponse({"ok": True})


# ── Send chat message ───────────────────────────────────────────────

.session-item-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    z-index: 0;
}

.session-item-wrap:hover,
.session-item-wrap:has(.session-menu-wrap.open) {
    z-index: 10;
}

// Close session menus on outside click
document.addEventListener("click", function () {
  document.querySelectorAll(".session-menu-wrap.open").forEach(function (el) {
    el.classList.remove("open");
  });
});

// Close session menu on mouse leave
document.addEventListener("mouseover", function (e) {
  document.querySelectorAll(".session-menu-wrap.open").forEach(function (wrap) {
    if (!wrap.contains(e.target)) {
      wrap.classList.remove("open");
    }
  });
});

// Close session menu on mouse leave (with grace period)
document.querySelectorAll(".session-menu-wrap").forEach(function (wrap) {
  var leaveTimer = null;
  wrap.addEventListener("mouseleave", function () {
    leaveTimer = setTimeout(function () {
      wrap.classList.remove("open");
    }, 300);
  });
  wrap.addEventListener("mouseenter", function () {
    if (leaveTimer) { clearTimeout(leaveTimer); leaveTimer = null; }
  });
});