Add dark/light theme toggle, system prompt modal, and compress+expand session logging by Copilot · Pull Request #6 · tmprabubiz/save-Token

Copilot · 2026-04-25T08:10:47Z

Adds four features: a persistent dark/light theme toggle, a clickable 💰 icon that shows the selected model's system prompt in a copyable modal, sequential compress+expand session logging, and a 📁 Logs button that opens the logs folder via OS file explorer.

Frontend (`style.css`, `index.html`, `app.js`)

Dark theme — [data-theme="dark"] CSS variable block; --text: #d1d5db (soft grey, not #fff) to avoid eye strain
Theme toggle — 🌙/☀️ button in topbar, persisted via localStorage; <html> initialised with data-theme="light"
System prompt modal — <div class="app-title"> → <button id="app-title-btn">; click fetches /model-persona/<file> and displays it in a scrollable <pre> with one-click clipboard copy; Escape / backdrop click closes
Modal CSS: fixed overlay, max-height: 82vh, respects all theme variables

Backend (`app/logger.py`, `app/server.py`, `launch.py`)

logger.py rewrite — replaces single log_entry() with log_compress() + log_expand(), each writing to the same session file in sequence; session file created on first operation with a ═══ header; files named logs/YYYY-MM-DD/YYYY-MM-DD_HH-MM.txt; log_entry() kept as alias for backward compatibility
/compress endpoint — now calls session_logger.log_compress() after calculate_savings()
launch.py — imports session_logger and calls reset_session() at startup before spinning up the server thread

========================================================
  💰 Save Token Session — 2026-04-25 14:32
========================================================

[14:32:01] COMPRESS  —  47 words saved (62% smaller)
Model: gemma3:12b
------------------------------------------------
ORIGINAL:
I need help understanding how Python decorators work...
------------------------------------------------
COMPRESSED:
explain python decorators mechanism usage
------------------------------------------------

[14:35:22] EXPAND
Model: gemma3:12b
...

Original prompt

PR #5 — Dark/Light toggle, session logging, icon modal, logs folder button

1. Dark / Light theme toggle

In `frontend/style.css`:

Add a complete dark theme using [data-theme="dark"] on the <html> element:

/* ── Light theme (default) ───────────────────────── */
:root {
  --bg: #f0f2f5;
  --bg-card: #f8f9fa;
  --bg-input: #ffffff;
  --accent: #1a73e8;
  --accent-hover: #1558b0;
  --accent-success: #188038;
  --accent-success-hover: #0d6b2e;
  --accent-warn: #e37400;
  --text: #1f1f1f;
  --text-dim: #5f6368;
  --text-muted: #9aa0a6;
  --border: #dadce0;
  --border-light: #e8eaed;
  --checkpoint-bg: #e8f0fe;
  --checkpoint-border: #1a73e8;
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Consolas', 'Courier New', monospace;
}

/* ── Dark theme ──────────────────────────────────── */
[data-theme="dark"] {
  --bg: #1a1a2e;
  --bg-card: #16213e;
  --bg-input: #0f3460;
  --accent: #4d9de0;
  --accent-hover: #3a7bc8;
  --accent-success: #2ecc71;
  --accent-success-hover: #27ae60;
  --accent-warn: #f39c12;
  --text: #d1d5db;
  --text-dim: #9ca3af;
  --text-muted: #6b7280;
  --border: #2a2a4a;
  --border-light: #3a3a5a;
  --checkpoint-bg: #0d2137;
  --checkpoint-border: #4d9de0;
}

Note: dark theme --text is #d1d5db — soft grey, NOT #ffffff. This fixes "font too bright" in dark mode.

In `frontend/index.html`:

Change <html lang="en"> to <html lang="en" data-theme="light">

Add a toggle button in the topbar div, between .app-title and .topbar-controls:

<button id="theme-toggle" class="theme-toggle-btn" title="Toggle dark/light mode" aria-label="Toggle dark/light mode">🌙</button>

In `frontend/style.css`, add:

/* ── Theme toggle button ─────────────────────────── */
.theme-toggle-btn {
  background: none;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 10px;
  line-height: 1;
  transition: border-color 0.2s, background 0.2s;
}
.theme-toggle-btn:hover {
  border-color: var(--accent);
  background: var(--bg-card);
}

In `frontend/app.js`, add at the top (after DOM references):

// ── Theme toggle ──────────────────────────────────────────────────────────────
const themeToggleBtn = document.getElementById('theme-toggle');
const htmlEl = document.documentElement;

function applyTheme(theme) {
  htmlEl.setAttribute('data-theme', theme);
  themeToggleBtn.textContent = theme === 'dark' ? '☀️' : '🌙';
  localStorage.setItem('save-token-theme', theme);
}

const savedTheme = localStorage.getItem('save-token-theme') || 'light';
applyTheme(savedTheme);

themeToggleBtn.addEventListener('click', () => {
  const current = htmlEl.getAttribute('data-theme');
  applyTheme(current === 'dark' ? 'light' : 'dark');
});

2. 💰 icon click — opens modal with model system prompt, one-click copy

In `frontend/index.html`:

Change the app title div to a button:

<button id="app-title-btn" class="app-title" title="Click to view and copy system prompt for selected model">💰 Save Token</button>

Add modal HTML immediately after the topbar div and before the error-banner div:

<!-- ── System prompt modal ───────────────────────── -->
<div id="prompt-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-label="Model system prompt" style="display:none">
  <div class="modal-box">
    <div class="modal-header">
      <span class="modal-title" id="modal-title">System Prompt</span>
      <button class="modal-close-btn" id="modal-close-btn" aria-label="Close">✕</button>
    </div>
    <p class="modal-hint">Paste this as your <strong>first message</strong> or <strong>system prompt</strong> before starting a conversation. Click the button below to copy the whole thing in one click.</p>
    <div class="modal-code-wrapper">
      <pre class="modal-code" id="modal-code-content">Select a model from the dropdown first.</pre>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" id="modal-copy-btn">📋 Copy prompt</button>
      <button class="btn btn-ghost" id="modal-close-btn-2">Close</button>
    </div>
  </div>
</div>

In `frontend/style.css`, add:

/* ── System prompt modal ─────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  width: 100%;
  max-width: 700px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color:...

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

*This pull request was created from Copilot chat.*
>

… compress+expand logging Agent-Logs-Url: https://github.com/tmprabubiz/save-Token/sessions/e297b643-b636-4a88-9678-9315587e2f20 Co-authored-by: tmprabubiz <136508447+tmprabubiz@users.noreply.github.com>

Agent-Logs-Url: https://github.com/tmprabubiz/save-Token/sessions/e297b643-b636-4a88-9678-9315587e2f20 Co-authored-by: tmprabubiz <136508447+tmprabubiz@users.noreply.github.com>

Initial plan

e351a76

Copilot AI assigned Copilot and tmprabubiz Apr 25, 2026

Copilot started work on behalf of tmprabubiz April 25, 2026 08:10 View session

Copilot AI and others added 2 commits April 25, 2026 08:14

Add dark/light theme toggle, system prompt modal, logger rewrite with…

bbf80e3

… compress+expand logging Agent-Logs-Url: https://github.com/tmprabubiz/save-Token/sessions/e297b643-b636-4a88-9678-9315587e2f20 Co-authored-by: tmprabubiz <136508447+tmprabubiz@users.noreply.github.com>

Fix innerHTML vs textContent inconsistency in modal copy button

a0c2913

Agent-Logs-Url: https://github.com/tmprabubiz/save-Token/sessions/e297b643-b636-4a88-9678-9315587e2f20 Co-authored-by: tmprabubiz <136508447+tmprabubiz@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add dark/light theme toggle functionality~~ Add dark/light theme toggle, system prompt modal, and compress+expand session logging Apr 25, 2026

Copilot finished work on behalf of tmprabubiz April 25, 2026 08:16

Copilot AI requested a review from tmprabubiz April 25, 2026 08:16

tmprabubiz marked this pull request as ready for review April 25, 2026 09:27

tmprabubiz merged commit b62f37b into main Apr 25, 2026

Navigation Menu

Add dark/light theme toggle, system prompt modal, and compress+expand session logging - #6

Add dark/light theme toggle, system prompt modal, and compress+expand session logging#6
tmprabubiz merged 3 commits into
mainfrom
copilot/add-dark-light-theme-toggle-again

Copilot AI commented Apr 25, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Apr 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Frontend (style.css, index.html, app.js)

Backend (app/logger.py, app/server.py, launch.py)

PR #5 — Dark/Light toggle, session logging, icon modal, logs folder button

1. Dark / Light theme toggle

In frontend/style.css:

In frontend/index.html:

In frontend/style.css, add:

In frontend/app.js, add at the top (after DOM references):

2. 💰 icon click — opens modal with model system prompt, one-click copy

In frontend/index.html:

In frontend/style.css, add:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Apr 25, 2026 •

edited

Loading

Frontend (`style.css`, `index.html`, `app.js`)

Backend (`app/logger.py`, `app/server.py`, `launch.py`)

In `frontend/style.css`:

In `frontend/index.html`:

In `frontend/style.css`, add:

In `frontend/app.js`, add at the top (after DOM references):

In `frontend/index.html`:

In `frontend/style.css`, add: