Phillip Tarrant
61a42d3a77
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>
84 lines
2.0 KiB
HTML
84 lines
2.0 KiB
HTML
{# 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">⚡</span>
|
|
<span class="usage-text">Unlimited Turns</span>
|
|
</span>
|
|
{% elif is_limited %}
|
|
<span class="usage-badge limited">
|
|
<span class="usage-icon">⚠</span>
|
|
<span class="usage-text">Limit Reached</span>
|
|
</span>
|
|
{% else %}
|
|
<span class="usage-badge normal">
|
|
<span class="usage-icon">⏱</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>
|