feat(api,web): tier-based session limits and daily turn usage display

Backend Changes:
- Add tier-based max_sessions config (free: 1, basic: 2, premium: 3, elite: 5)
- Add DELETE /api/v1/sessions/{id} endpoint for hard session deletion
- Cascade delete chat messages when session is deleted
- Add GET /api/v1/usage endpoint for daily turn limit info
- Replace hardcoded TIER_LIMITS with config-based ai_calls_per_day
- Handle unlimited (-1) tier in rate limiter service

Frontend Changes:
- Add inline session delete buttons with HTMX on character list
- Add usage_display.html component showing remaining daily turns
- Display usage indicator on character list and game play pages
- Page refresh after session deletion to update UI state

Documentation:
- Update API_REFERENCE.md with new endpoints and tier limits
- Update API_TESTING.md with session endpoint examples
- Update SESSION_MANAGEMENT.md with tier-based limits

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

public_web/templates/character/list.html

@@ -10,6 +10,7 @@
             <p class="page-subtitle">
                 {{ characters|length }} of {{ max_characters }} characters
                 <span class="tier-badge">{{ current_tier|upper }}</span>
+                {% include 'components/usage_display.html' %}
             </p>
         </div>
         <div class="header-right">
@@ -63,10 +64,21 @@
                         </div>
                         <div class="sessions-list">
                             {% for sess in character.sessions[:3] %}
-                            <a href="{{ url_for('game.play_session', session_id=sess.session_id) }}" class="session-link">
-                                <span class="session-turn">Turn {{ sess.turn_number or 0 }}</span>
-                                <span class="session-status {{ sess.status or 'active' }}">{{ sess.status or 'active' }}</span>
-                            </a>
+                            <div class="session-item" id="session-{{ sess.session_id }}">
+                                <a href="{{ url_for('game.play_session', session_id=sess.session_id) }}" class="session-link">
+                                    <span class="session-turn">Turn {{ sess.turn_number or 0 }}</span>
+                                    <span class="session-status {{ sess.status or 'active' }}">{{ sess.status or 'active' }}</span>
+                                </a>
+                                <button
+                                    hx-delete="{{ url_for('character_views.delete_session', session_id=sess.session_id) }}"
+                                    hx-confirm="Delete this session? This action cannot be undone."
+                                    hx-target="#session-{{ sess.session_id }}"
+                                    hx-swap="outerHTML"
+                                    class="btn-delete-session"
+                                    title="Delete Session">
+                                    &times;
+                                </button>
+                            </div>
                             {% endfor %}
                             {% if character.sessions|length > 3 %}
                             <span class="sessions-more">+{{ character.sessions|length - 3 }} more</span>
@@ -328,6 +340,35 @@
     background: var(--bg-secondary);
 }
 
+.session-item {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.btn-delete-session {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    background: transparent;
+    border: 1px solid var(--accent-red);
+    border-radius: 3px;
+    color: var(--accent-red);
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    line-height: 1;
+}
+
+.btn-delete-session:hover {
+    background: var(--accent-red);
+    color: var(--text-primary);
+}
+
 .session-turn {
     font-size: var(--text-xs);
     color: var(--text-primary);

public_web/templates/components/usage_display.html

@@ -0,0 +1,83 @@
+{# Daily Usage Indicator Component
+
+   Required template variables:
+   - remaining: Number of turns remaining (-1 if unlimited)
+   - daily_limit: Daily turn limit (-1 if unlimited)
+   - is_limited: Boolean, true if limit reached
+   - is_unlimited: Boolean, true if user has unlimited turns
+   - reset_time: ISO timestamp of when limit resets (optional)
+#}
+
+<div class="daily-usage-indicator">
+    {% if is_unlimited %}
+        <span class="usage-badge unlimited">
+            <span class="usage-icon">&#9889;</span>
+            <span class="usage-text">Unlimited Turns</span>
+        </span>
+    {% elif is_limited %}
+        <span class="usage-badge limited">
+            <span class="usage-icon">&#9888;</span>
+            <span class="usage-text">Limit Reached</span>
+        </span>
+    {% else %}
+        <span class="usage-badge normal">
+            <span class="usage-icon">&#9201;</span>
+            <span class="usage-count">{{ remaining }}/{{ daily_limit }}</span>
+            <span class="usage-label">turns today</span>
+        </span>
+    {% endif %}
+</div>
+
+<style>
+.daily-usage-indicator {
+    display: inline-flex;
+    align-items: center;
+}
+
+.usage-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.35rem 0.75rem;
+    border-radius: 12px;
+    font-size: var(--text-xs);
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.usage-badge.normal {
+    background: var(--bg-input);
+    border: 1px solid var(--border-primary);
+    color: var(--text-secondary);
+}
+
+.usage-badge.limited {
+    background: rgba(239, 68, 68, 0.15);
+    border: 1px solid var(--accent-red);
+    color: var(--accent-red);
+}
+
+.usage-badge.unlimited {
+    background: rgba(212, 175, 55, 0.15);
+    border: 1px solid var(--accent-gold);
+    color: var(--accent-gold);
+}
+
+.usage-icon {
+    font-size: 0.9rem;
+}
+
+.usage-count {
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+}
+
+.usage-label {
+    color: var(--text-muted);
+}
+
+.usage-text {
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+</style>

public_web/templates/game/partials/character_panel.html

@@ -10,6 +10,9 @@ Displays character stats, resource bars, and action buttons
             <span class="character-class">{{ character.class_name }}</span>
             <span class="character-level">Level {{ character.level }}</span>
         </div>
+        <div class="character-usage">
+            {% include 'components/usage_display.html' %}
+        </div>
     </div>
 
     {# Resource Bars #}