Agent Template

Albxtweaks Premium PC Optimization Studio

A premium Windows-style dark gaming interface for managing PC optimization workflows, license status, safety checks, and categorized tweak sections. This version focuses on the complete application shell, polished desktop-app UI, and interaction structure without making unrealistic performance claims.

windows pc optimization gaming desktop ui license dashboard system tweaks
Albxtweaks Aug 17, 2026 1 use

Preview Mode

This is a preview with sample data. The template uses placeholders like which will be replaced with actual agent data.

About This Template

Albxtweaks Premium PC Optimization Studio is a browser-executable AI agent template built on AgentOp. It runs entirely in the browser using Python (via Pyodide) and can be deployed without a server — just download the generated HTML file and open it locally or host it anywhere.

Topics windows pc optimization gaming desktop ui license dashboard system tweaks
Template Preview

Template Metadata

Slug
albxtweaks-premium-pc-optimization-studio
Created By
Albxtweaks
Created
Aug 17, 2026
Usage Count
1

Tags

windows pc optimization gaming desktop ui license dashboard system tweaks

Code Statistics

HTML Lines
318
CSS Lines
417
JS Lines
262
Python Lines
77

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Albxtweaks</title>
  <style>{{ css_code }}</style>
</head>
<body>
  <div class="app-shell">
    <aside class="sidebar">
      <div class="brand-card">
        <div class="brand-mark">🎮</div>
        <div>
          <h1>Albxtweaks</h1>
          <p>Premium Optimization Studio</p>
        </div>
      </div>

      <nav class="nav-section" aria-label="Albxtweaks navigation">
        <button class="nav-btn active" data-target="login-view">🔐 License Login</button>
        <button class="nav-btn" data-target="dashboard-view">📊 Dashboard</button>
        <button class="nav-btn" data-target="windows-view">🪟 Windows</button>
        <button class="nav-btn" data-target="gaming-view">🚀 Gaming</button>
        <button class="nav-btn" data-target="inputlag-view">⚡ Input Lag</button>
        <button class="nav-btn" data-target="mouse-view">🖱️ Mouse</button>
        <button class="nav-btn" data-target="keyboard-view">⌨️ Keyboard</button>
        <button class="nav-btn" data-target="network-view">🌐 Network</button>
        <button class="nav-btn" data-target="safety-view">🛡️ Restore Safety</button>
        <button class="nav-btn" data-target="support-view">💬 Discord Support</button>
      </nav>

      <div class="sidebar-footer">
        <div class="status-mini">
          <span class="status-dot"></span>
          <span id="provider-indicator">Initializing Albxtweaks...</span>
        </div>
      </div>
    </aside>

    <main class="main-panel">
      <header class="topbar">
        <div>
          <div class="eyebrow">Windows Gaming Control Center</div>
          <h2 id="view-title">License Login</h2>
        </div>
        <div class="topbar-actions">
          <button id="quick-discord-btn" class="ghost-btn">💬 Discord</button>
        </div>
      </header>

      <section id="inline-error" class="inline-error hidden" aria-live="polite"></section>

      <section id="login-view" class="view active-view">
        <div class="hero-grid">
          <div class="glass-card login-card">
            <div class="section-head">
              <span class="section-chip">🔐 Secure Access</span>
              <h3>Activate your Albxtweaks license</h3>
              <p>Enter your license key to unlock the desktop optimization dashboard and tweak categories.</p>
            </div>
            <form id="license-form" class="license-form">
              <label for="license-key">Albxtweaks License Key</label>
              <input id="license-key" type="text" placeholder="Enter your Albxtweaks license key" autocomplete="off" />

              <label for="license-type">License Type</label>
              <select id="license-type">
                <option value="lifetime">Lifetime License</option>
                <option value="timed">Time-Limited License</option>
              </select>

              <div id="expiry-wrap" class="hidden">
                <label for="expiry-days">Remaining Days</label>
                <input id="expiry-days" type="number" min="1" max="3650" placeholder="Enter remaining license days" />
              </div>

              <div class="form-actions">
                <button id="activate-btn" type="submit" class="primary-btn">Activate Albxtweaks</button>
                <button id="demo-license-btn" type="button" class="ghost-btn">Load Demo License</button>
              </div>
            </form>
          </div>

          <div class="glass-card feature-card">
            <div class="section-head">
              <span class="section-chip">🧩 Platform Overview</span>
              <h3>Premium desktop-style optimization workspace</h3>
            </div>
            <div class="empty-state" id="results-container">
              <p class="empty-title">Albxtweaks application structure is ready</p>
              <ul>
                <li>🪟 Dedicated Windows, Gaming, Input Lag, Mouse, Keyboard, and Network sections</li>
                <li>🛡️ Restore-point safety area before system changes</li>
                <li>📊 License dashboard with lifetime and time-limited status display</li>
                <li>💬 Direct Discord support access from the control center</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section id="dashboard-view" class="view hidden">
        <div class="dashboard-grid">
          <div class="metric-card accent-cyan">
            <span>License State</span>
            <strong id="license-state">Not Activated</strong>
          </div>
          <div class="metric-card accent-purple">
            <span>License Model</span>
            <strong id="license-model">—</strong>
          </div>
          <div class="metric-card accent-mixed">
            <span>Remaining Time</span>
            <strong id="license-remaining">—</strong>
          </div>
        </div>

        <div class="panel-grid two-col">
          <div class="glass-card">
            <div class="section-head">
              <span class="section-chip">📊 Dashboard</span>
              <h3>Albxtweaks status center</h3>
              <p>Track license state, review safety readiness, and launch optimization categories.</p>
            </div>
            <div class="dashboard-list">
              <div class="dash-row"><span>Safety Mode</span><strong id="safety-state">Recommended before changes</strong></div>
              <div class="dash-row"><span>Optimization Profiles</span><strong>6 categories available</strong></div>
              <div class="dash-row"><span>Undo Capability</span><strong>Included in each category</strong></div>
            </div>
          </div>
          <div class="glass-card">
            <div class="section-head">
              <span class="section-chip">🧠 Assistant Panel</span>
              <h3>Ask Albxtweaks about the interface</h3>
              <p>Use the built-in assistant to summarize sections, explain safety steps, or describe a category.</p>
            </div>
            <div class="assistant-box">
              <textarea id="user-query" placeholder="Ask about the Windows, Gaming, Input Lag, Mouse, Keyboard, Network, or safety sections..."></textarea>
              <div class="form-actions">
                <button id="ask-btn" class="primary-btn">Ask Albxtweaks</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="windows-view" class="view hidden">
        <div class="glass-card tweak-card">
          <div class="section-head">
            <span class="section-chip">🪟 Windows</span>
            <h3>Windows optimization workspace</h3>
            <p>Manage desktop responsiveness, background behavior, and system housekeeping with reversible actions.</p>
          </div>
          <div class="toggle-grid">
            <label class="toggle-item"><input type="checkbox" checked> Streamline startup items review</label>
            <label class="toggle-item"><input type="checkbox"> Reduce visual effects</label>
            <label class="toggle-item"><input type="checkbox"> Review background app activity</label>
            <label class="toggle-item"><input type="checkbox"> Clear temp file guidance</label>
          </div>
          <div class="form-actions">
            <button class="primary-btn apply-btn" data-section="Windows">Apply Windows Optimizations</button>
            <button class="ghost-btn undo-btn" data-section="Windows">Undo Windows Optimizations</button>
          </div>
        </div>
      </section>

      <section id="gaming-view" class="view hidden">
        <div class="glass-card tweak-card">
          <div class="section-head">
            <span class="section-chip">🚀 Gaming</span>
            <h3>Gaming optimization workspace</h3>
            <p>Organize game-focused settings and performance-oriented housekeeping without unrealistic promises.</p>
          </div>
          <div class="toggle-grid">
            <label class="toggle-item"><input type="checkbox" checked> Review game mode related settings</label>
            <label class="toggle-item"><input type="checkbox"> Limit nonessential background tasks</label>
            <label class="toggle-item"><input type="checkbox"> Power profile preparation guidance</label>
            <label class="toggle-item"><input type="checkbox"> Fullscreen optimization checklist</label>
          </div>
          <div class="form-actions">
            <button class="primary-btn apply-btn" data-section="Gaming">Apply Gaming Optimizations</button>
            <button class="ghost-btn undo-btn" data-section="Gaming">Undo Gaming Optimizations</button>
          </div>
        </div>
      </section>

      <section id="inputlag-view" class="view hidden">
        <div class="glass-card tweak-card">
          <div class="section-head">
            <span class="section-chip">⚡ Input Lag</span>
            <h3>Input response tuning workspace</h3>
            <p>Centralize latency-related settings review for a cleaner, more consistent gameplay environment.</p>
          </div>
          <div class="toggle-grid">
            <label class="toggle-item"><input type="checkbox" checked> Timer and scheduling checklist</label>
            <label class="toggle-item"><input type="checkbox"> Display pipeline review</label>
            <label class="toggle-item"><input type="checkbox"> Background service trimming guidance</label>
            <label class="toggle-item"><input type="checkbox"> Reversible response profile setup</label>
          </div>
          <div class="form-actions">
            <button class="primary-btn apply-btn" data-section="Input Lag">Apply Input Lag Optimizations</button>
            <button class="ghost-btn undo-btn" data-section="Input Lag">Undo Input Lag Optimizations</button>
          </div>
        </div>
      </section>

      <section id="mouse-view" class="view hidden">
        <div class="glass-card tweak-card">
          <div class="section-head">
            <span class="section-chip">🖱️ Mouse</span>
            <h3>Mouse control tuning workspace</h3>
            <p>Review sensitivity-related options, acceleration preferences, and consistency-oriented setup notes.</p>
          </div>
          <div class="toggle-grid">
            <label class="toggle-item"><input type="checkbox" checked> Pointer configuration guidance</label>
            <label class="toggle-item"><input type="checkbox"> Acceleration review checklist</label>
            <label class="toggle-item"><input type="checkbox"> USB polling preparation notes</label>
            <label class="toggle-item"><input type="checkbox"> Revert-safe control profile</label>
          </div>
          <div class="form-actions">
            <button class="primary-btn apply-btn" data-section="Mouse">Apply Mouse Optimizations</button>
            <button class="ghost-btn undo-btn" data-section="Mouse">Undo Mouse Optimizations</button>
          </div>
        </div>
      </section>

      <section id="keyboard-view" class="view hidden">
        <div class="glass-card tweak-card">
          <div class="section-head">
            <span class="section-chip">⌨️ Keyboard</span>
            <h3>Keyboard tuning workspace</h3>
            <p>Organize key repeat behavior, accessibility checks, and competitive-input consistency reviews.</p>
          </div>
          <div class="toggle-grid">
            <label class="toggle-item"><input type="checkbox" checked> Repeat delay and repeat rate review</label>
            <label class="toggle-item"><input type="checkbox"> Accessibility feature checklist</label>
            <label class="toggle-item"><input type="checkbox"> USB input device guidance</label>
            <label class="toggle-item"><input type="checkbox"> Undo-safe input profile</label>
          </div>
          <div class="form-actions">
            <button class="primary-btn apply-btn" data-section="Keyboard">Apply Keyboard Optimizations</button>
            <button class="ghost-btn undo-btn" data-section="Keyboard">Undo Keyboard Optimizations</button>
          </div>
        </div>
      </section>

      <section id="network-view" class="view hidden">
        <div class="glass-card tweak-card">
          <div class="section-head">
            <span class="section-chip">🌐 Network</span>
            <h3>Network tuning workspace</h3>
            <p>Review adapter, DNS, and traffic-related options carefully with rollback-aware workflow guidance.</p>
          </div>
          <div class="toggle-grid">
            <label class="toggle-item"><input type="checkbox" checked> Adapter power setting review</label>
            <label class="toggle-item"><input type="checkbox"> DNS profile checklist</label>
            <label class="toggle-item"><input type="checkbox"> Background bandwidth guidance</label>
            <label class="toggle-item"><input type="checkbox"> Reversible network profile staging</label>
          </div>
          <div class="form-actions">
            <button class="primary-btn apply-btn" data-section="Network">Apply Network Optimizations</button>
            <button class="ghost-btn undo-btn" data-section="Network">Undo Network Optimizations</button>
          </div>
        </div>
      </section>

      <section id="safety-view" class="view hidden">
        <div class="panel-grid two-col">
          <div class="glass-card">
            <div class="section-head">
              <span class="section-chip">🛡️ Restore Safety</span>
              <h3>Create a restore point before changes</h3>
              <p>Albxtweaks surfaces safety-first workflow guidance before any optimization routine is confirmed.</p>
            </div>
            <div class="dashboard-list">
              <div class="dash-row"><span>Recommendation</span><strong>Create a restore point first</strong></div>
              <div class="dash-row"><span>Rollback Strategy</span><strong>Use undo actions after a restore point</strong></div>
              <div class="dash-row"><span>Change Tracking</span><strong>Review the tweak category before applying</strong></div>
            </div>
            <div class="form-actions">
              <button id="mark-restore-btn" class="primary-btn">Mark Restore Point as Ready</button>
            </div>
          </div>
          <div class="glass-card note-card">
            <div class="section-head">
              <span class="section-chip">📘 Safety Notes</span>
              <h3>Why this matters</h3>
            </div>
            <p>System-level changes can affect device behavior differently across hardware, drivers, and Windows versions. Albxtweaks is structured to encourage review, reversibility, and safety before applying any category-level change.</p>
          </div>
        </div>
      </section>

      <section id="support-view" class="view hidden">
        <div class="glass-card support-card">
          <div class="section-head">
            <span class="section-chip">💬 Discord Support</span>
            <h3>Join the Albxtweaks support hub</h3>
            <p>Open your support channel for setup help, license questions, and category guidance.</p>
          </div>
          <div class="support-actions">
            <button id="discord-btn" class="primary-btn">Open Albxtweaks Discord</button>
          </div>
        </div>
      </section>
    </main>
  </div>

  <div id="loading-overlay" class="loading-overlay hidden" aria-hidden="true">
    <div class="spinner-card">
      <div class="spinner"></div>
      <p id="loading-text">Processing Albxtweaks request...</p>
    </div>
  </div>

  <script>{{ js_code }}</script>
</body>
</html>
:root {
  --bg-0: #06070b;
  --bg-1: #0b0f17;
  --bg-2: #101726;
  --panel: rgba(15, 20, 34, 0.88);
  --panel-strong: rgba(10, 14, 24, 0.96);
  --line: rgba(105, 122, 255, 0.18);
  --line-strong: rgba(72, 225, 255, 0.34);
  --text: #edf4ff;
  --muted: #8da0c6;
  --cyan: #48e1ff;
  --cyan-soft: rgba(72, 225, 255, 0.16);
  --purple: #8c5bff;
  --purple-soft: rgba(140, 91, 255, 0.18);
  --success: #57e389;
  --danger: #ff6b81;
  --warning: #ffca6b;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-1: 0 18px 60px rgba(0,0,0,0.45);
  --shadow-2: 0 0 0 1px rgba(255,255,255,0.03), 0 20px 50px rgba(72,225,255,0.08), 0 12px 30px rgba(140,91,255,0.1);
  --font-stack: Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-stack);
  color: var(--text);
  background:
    radial-gradient(circle at 15% 20%, rgba(72,225,255,0.08), transparent 26%),
    radial-gradient(circle at 85% 15%, rgba(140,91,255,0.12), transparent 28%),
    linear-gradient(180deg, #05060a 0%, #090c13 45%, #070910 100%);
}

.hidden { display: none !important; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 320px 1fr;
}

.sidebar {
  background: linear-gradient(180deg, rgba(9,12,18,0.96), rgba(7,10,16,0.98));
  border-right: 1px solid var(--line);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.03);
}

.brand-card, .glass-card, .metric-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(18,24,40,0.9), rgba(10,14,24,0.88));
  box-shadow: var(--shadow-2);
}

.brand-card {
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: linear-gradient(135deg, rgba(72,225,255,0.2), rgba(140,91,255,0.24));
  border: 1px solid var(--line-strong);
}

.brand-card h1 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
}

.brand-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-btn {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  color: var(--text);
  background: rgba(255,255,255,0.02);
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 0.98rem;
  transition: 0.2s ease;
}

.nav-btn:hover, .nav-btn.active {
  background: linear-gradient(90deg, rgba(72,225,255,0.12), rgba(140,91,255,0.14));
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.sidebar-footer {
  margin-top: auto;
}

.status-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.main-panel {
  padding: 28px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.eyebrow {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.74rem;
  margin-bottom: 8px;
}

.topbar h2 {
  margin: 0;
  font-size: 2rem;
}

.inline-error {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,107,129,0.34);
  background: rgba(255,107,129,0.1);
  color: #ffd8df;
}

.hero-grid, .panel-grid.two-col, .dashboard-grid {
  display: grid;
  gap: 20px;
}

.hero-grid, .panel-grid.two-col {
  grid-template-columns: 1.15fr 0.85fr;
}

.dashboard-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 20px;
}

.glass-card {
  border-radius: var(--radius-xl);
  padding: 24px;
}

.metric-card {
  border-radius: 20px;
  padding: 22px;
}

.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 8px;
}

.metric-card strong {
  font-size: 1.32rem;
}

.accent-cyan { box-shadow: inset 0 0 0 1px rgba(72,225,255,0.16), 0 18px 50px rgba(72,225,255,0.09); }
.accent-purple { box-shadow: inset 0 0 0 1px rgba(140,91,255,0.18), 0 18px 50px rgba(140,91,255,0.11); }
.accent-mixed { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 18px 50px rgba(120,120,255,0.12); }

.section-head h3 {
  margin: 8px 0 8px;
  font-size: 1.4rem;
}

.section-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.section-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(72,225,255,0.14), rgba(140,91,255,0.16));
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 0.84rem;
}

.license-form, .assistant-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

label {
  font-size: 0.92rem;
  color: #c9d6f2;
}

input, select, textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 16px;
  font: inherit;
  outline: none;
}

textarea {
  min-height: 130px;
  resize: vertical;
}

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.form-actions, .support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

button {
  border: none;
  border-radius: 14px;
  padding: 13px 18px;
  font: inherit;
  cursor: pointer;
  transition: 0.2s ease;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.primary-btn {
  background: linear-gradient(90deg, var(--cyan), #67a7ff 45%, var(--purple));
  color: #051018;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(72,225,255,0.2);
}

.primary-btn:hover:not(:disabled), .ghost-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.ghost-btn {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--line);
}

.empty-state {
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.12);
}

.empty-title {
  margin-top: 0;
  font-weight: 700;
}

.empty-state ul {
  margin: 12px 0 0 18px;
  color: var(--muted);
  line-height: 1.7;
}

.dashboard-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.dash-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

.dash-row span { color: var(--muted); }

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.toggle-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.toggle-item input {
  width: 18px;
  height: 18px;
  accent-color: var(--cyan);
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3,5,9,0.72);
  display: grid;
  place-items: center;
  z-index: 50;
  backdrop-filter: blur(6px);
}

.spinner-card {
  width: min(320px, 90vw);
  padding: 24px;
  border-radius: 22px;
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
  text-align: center;
  box-shadow: var(--shadow-1);
}

.spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.14);
  border-top-color: var(--cyan);
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--line); }
  .hero-grid, .panel-grid.two-col, .dashboard-grid, .toggle-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .main-panel { padding: 18px; }
  .sidebar { padding: 18px 14px; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .topbar h2 { font-size: 1.6rem; }
  .glass-card, .metric-card { padding: 18px; }
}
function escapeHtml(str) {
  return String(str || '')
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

window.addMessage = function(type, content) {
  const container = document.getElementById('results-container');
  if (!container) return;
  const tone = type === 'assistant' ? 'assistant-msg' : 'system-msg';
  container.innerHTML = '<div class="empty-state ' + tone + '"><p>' + escapeHtml(content) + '</p></div>';
};

(function() {
  let pyReady = false;
  let licenseState = {
    activated: false,
    key: '',
    type: 'lifetime',
    remaining_days: null,
    restore_ready: false
  };

  const views = document.querySelectorAll('.view');
  const navButtons = document.querySelectorAll('.nav-btn');
  const viewTitle = document.getElementById('view-title');
  const inlineError = document.getElementById('inline-error');
  const loadingOverlay = document.getElementById('loading-overlay');
  const loadingText = document.getElementById('loading-text');
  const providerIndicator = document.getElementById('provider-indicator');
  const licenseForm = document.getElementById('license-form');
  const licenseType = document.getElementById('license-type');
  const expiryWrap = document.getElementById('expiry-wrap');
  const expiryDays = document.getElementById('expiry-days');
  const licenseKey = document.getElementById('license-key');
  const demoLicenseBtn = document.getElementById('demo-license-btn');
  const activateBtn = document.getElementById('activate-btn');
  const askBtn = document.getElementById('ask-btn');
  const userQuery = document.getElementById('user-query');
  const quickDiscordBtn = document.getElementById('quick-discord-btn');
  const discordBtn = document.getElementById('discord-btn');
  const markRestoreBtn = document.getElementById('mark-restore-btn');
  const applyButtons = document.querySelectorAll('.apply-btn');
  const undoButtons = document.querySelectorAll('.undo-btn');

  function setLoading(active, text) {
    if (active) {
      loadingText.textContent = text || 'Processing Albxtweaks request...';
      loadingOverlay.classList.remove('hidden');
    } else {
      loadingOverlay.classList.add('hidden');
    }
  }

  function showError(msg) {
    inlineError.textContent = msg;
    inlineError.classList.remove('hidden');
  }

  function clearError() {
    inlineError.textContent = '';
    inlineError.classList.add('hidden');
  }

  function modelLoadedIfNeeded() {
    if (window.PROVIDER === 'local') {
      return !!(window.agentManager && window.agentManager.isLoaded);
    }
    return true;
  }

  function checkReadiness() {
    if (!pyReady) {
      showError('Albxtweaks is still initializing. Please wait a moment and try again.');
      return false;
    }
    if (!modelLoadedIfNeeded()) {
      showError('Please load a local model from the top selector bar before using Albxtweaks assistant actions.');
      return false;
    }
    return true;
  }

  function setActiveView(id) {
    views.forEach(v => v.classList.add('hidden'));
    document.getElementById(id).classList.remove('hidden');
    navButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.target === id));
    const activeButton = Array.from(navButtons).find(btn => btn.dataset.target === id);
    viewTitle.textContent = activeButton ? activeButton.textContent.trim().replace(/^\S+\s/, '') : 'Albxtweaks';
    clearError();
  }

  function updateDashboard() {
    document.getElementById('license-state').textContent = licenseState.activated ? 'Activated' : 'Not Activated';
    document.getElementById('license-model').textContent = licenseState.activated ? (licenseState.type === 'lifetime' ? 'Lifetime' : 'Time-Limited') : '—';
    document.getElementById('license-remaining').textContent = !licenseState.activated ? '—' : (licenseState.type === 'lifetime' ? 'Unlimited access' : licenseState.remaining_days + ' day(s) remaining');
    document.getElementById('safety-state').textContent = licenseState.restore_ready ? 'Restore point marked ready' : 'Recommended before changes';
  }

  async function callPythonQuery(queryText) {
    window.pyodide.globals.set('user_query', queryText);
    const result = await window.pyodide.runPythonAsync('await process_user_query(user_query)');
    return result;
  }

  function openDiscord() {
    window.open('https://discord.com/', '_blank', 'noopener');
  }

  navButtons.forEach(btn => {
    btn.addEventListener('click', () => setActiveView(btn.dataset.target));
  });

  licenseType.addEventListener('change', () => {
    if (licenseType.value === 'timed') {
      expiryWrap.classList.remove('hidden');
    } else {
      expiryWrap.classList.add('hidden');
      expiryDays.value = '';
    }
  });

  licenseForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    clearError();
    const key = licenseKey.value.trim();
    const type = licenseType.value;
    const days = expiryDays.value.trim();

    if (!key) {
      showError('Please enter your Albxtweaks license key.');
      return;
    }
    if (type === 'timed' && (!days || Number(days) < 1)) {
      showError('Please enter a valid number of remaining days for the time-limited license.');
      return;
    }

    licenseState.activated = true;
    licenseState.key = key;
    licenseState.type = type;
    licenseState.remaining_days = type === 'timed' ? Number(days) : null;
    updateDashboard();
    setActiveView('dashboard-view');
    window.addMessage('system', 'Albxtweaks license activated. Dashboard access is now available.');
  });

  demoLicenseBtn.addEventListener('click', () => {
    clearError();
    licenseKey.value = 'ALBX-DEMO-PREMIUM';
    licenseType.value = 'timed';
    expiryWrap.classList.remove('hidden');
    expiryDays.value = '30';
  });

  askBtn.addEventListener('click', async () => {
    clearError();
    const query = userQuery.value.trim();
    if (!query) {
      showError('Please enter an Albxtweaks dashboard or section question.');
      return;
    }
    if (!checkReadiness()) return;

    try {
      askBtn.disabled = true;
      setLoading(true, 'Consulting Albxtweaks assistant...');
      const result = await callPythonQuery(query);
      window.addMessage('assistant', result);
    } catch (err) {
      showError('Albxtweaks could not process your request: ' + (err && err.message ? err.message : 'Unknown error'));
    } finally {
      askBtn.disabled = false;
      setLoading(false);
    }
  });

  applyButtons.forEach(btn => {
    btn.addEventListener('click', async () => {
      clearError();
      const section = btn.dataset.section;
      if (!licenseState.activated) {
        showError('Activate your Albxtweaks license before applying ' + section + ' optimizations.');
        return;
      }
      if (!licenseState.restore_ready) {
        showError('Please review the Restore Safety section and mark your restore point as ready before applying ' + section + ' optimizations.');
        return;
      }
      if (!checkReadiness()) return;

      try {
        btn.disabled = true;
        setLoading(true, 'Preparing ' + section + ' optimization summary...');
        const query = 'Summarize the ' + section + ' section in Albxtweaks and confirm that this UI version is a structural placeholder for apply actions with safety-first wording.';
        const result = await callPythonQuery(query);
        window.addMessage('assistant', result);
        setActiveView('dashboard-view');
      } catch (err) {
        showError('Unable to prepare the ' + section + ' optimization summary: ' + (err && err.message ? err.message : 'Unknown error'));
      } finally {
        btn.disabled = false;
        setLoading(false);
      }
    });
  });

  undoButtons.forEach(btn => {
    btn.addEventListener('click', async () => {
      clearError();
      const section = btn.dataset.section;
      if (!licenseState.activated) {
        showError('Activate your Albxtweaks license before using ' + section + ' undo actions.');
        return;
      }
      if (!checkReadiness()) return;

      try {
        btn.disabled = true;
        setLoading(true, 'Preparing ' + section + ' rollback summary...');
        const query = 'Explain the purpose of the undo control for the ' + section + ' section in Albxtweaks. Keep it short and safety-focused.';
        const result = await callPythonQuery(query);
        window.addMessage('assistant', result);
        setActiveView('dashboard-view');
      } catch (err) {
        showError('Unable to prepare the ' + section + ' undo summary: ' + (err && err.message ? err.message : 'Unknown error'));
      } finally {
        btn.disabled = false;
        setLoading(false);
      }
    });
  });

  markRestoreBtn.addEventListener('click', () => {
    clearError();
    licenseState.restore_ready = true;
    updateDashboard();
    window.addMessage('system', 'Restore point readiness has been marked in Albxtweaks.');
    setActiveView('dashboard-view');
  });

  quickDiscordBtn.addEventListener('click', openDiscord);
  discordBtn.addEventListener('click', openDiscord);

  function onReady() {
    pyReady = true;
    providerIndicator.textContent = window.PROVIDER === 'local'
      ? (modelLoadedIfNeeded() ? 'Local model loaded for Albxtweaks' : 'Load a local model to enable Albxtweaks assistant features')
      : 'Albxtweaks assistant connected';
  }

  if (window.pyodideReady) {
    onReady();
  } else {
    document.addEventListener('pyodide-ready', onReady, { once: true });
  }

  updateDashboard();
})();
from typing import Optional

MAX_CHARS = int('[[[MAX_CHARS|6000]]]')


def get_app_overview() -> str:
    """Return a concise overview of the Albxtweaks interface.

    Args:
        None
    """
    return (
        "Albxtweaks is a premium Windows-style optimization dashboard with a login screen, "
        "license tracking, restore-point safety workflow, and categories for Windows, Gaming, "
        "Input Lag, Mouse, Keyboard, and Network. This template currently provides the full UI "
        "structure and assistant guidance rather than making live system changes."
    )


def describe_section(section: str) -> str:
    """Describe one Albxtweaks section in a short, safety-focused way.

    Args:
        section: The section name such as Windows, Gaming, Input Lag, Mouse, Keyboard, Network, Dashboard, or Restore Safety.
    """
    section_key = (section or '').strip().lower()
    mapping = {
        'windows': 'The Windows section organizes reversible desktop and background-behavior tuning workflows with an emphasis on review before change.',
        'gaming': 'The Gaming section groups game-focused system preparation steps and housekeeping guidance without promising guaranteed results.',
        'input lag': 'The Input Lag section is designed for reviewing latency-related settings and system consistency in a careful, rollback-aware workflow.',
        'mouse': 'The Mouse section covers pointer behavior, acceleration review, and device setup notes intended for consistency and user control.',
        'keyboard': 'The Keyboard section focuses on repeat behavior, accessibility checks, and device setup review in an undo-safe layout.',
        'network': 'The Network section centralizes adapter and traffic-related review steps with reversible workflow guidance.',
        'dashboard': 'The Dashboard summarizes license state, remaining time, safety readiness, and access to the Albxtweaks assistant panel.',
        'restore safety': 'The Restore Safety section encourages users to create a restore point before any system-level changes and to prefer reversible workflows.'
    }
    return mapping.get(section_key, 'This Albxtweaks section is part of the premium optimization workspace and is designed with safety-first structure.')


async def process_user_query(query: str) -> str:
    q = (query or '').strip()[:MAX_CHARS]
    if not q:
        return 'Please enter an Albxtweaks question.'

    lower_q = q.lower()
    if 'windows' in lower_q:
        context = describe_section('windows')
    elif 'gaming' in lower_q:
        context = describe_section('gaming')
    elif 'input lag' in lower_q:
        context = describe_section('input lag')
    elif 'mouse' in lower_q:
        context = describe_section('mouse')
    elif 'keyboard' in lower_q:
        context = describe_section('keyboard')
    elif 'network' in lower_q:
        context = describe_section('network')
    elif 'restore' in lower_q or 'safety' in lower_q:
        context = describe_section('restore safety')
    elif 'dashboard' in lower_q or 'license' in lower_q:
        context = describe_section('dashboard')
    else:
        context = get_app_overview()

    prompt = (
        f"User request: {q}\n\n"
        f"Albxtweaks context: {context}\n\n"
        "Respond as the Albxtweaks assistant. Be concise. Describe the UI structure or workflow only. "
        "Do not claim guaranteed FPS gains, zero input lag, or certain system outcomes. "
        "If the request sounds like a real optimization action, clarify that this version is a UI and workflow scaffold."
    )

    try:
        result = await call_llm(prompt, globals().get('TEMPLATE_SYSTEM_PROMPT', ''))
        return str(result)[:MAX_CHARS]
    except Exception:
        return context