# DollarSign Bot GUI – Flask/Jinja2 Edition (v4)

Below are the **three key files** you can drop straight into your existing Flask project.  They comply with your CSP, design‑system, and routing standards.

---
## 1. `app.py` – add the route
```python
from flask import Blueprint, render_template, jsonify, request
from flask_login import login_required, current_user
from models import db, BotPreset, UserBotSlot  # adjust imports to your structure

bots_bp = Blueprint("bots", __name__, url_prefix="/bots")

@bots_bp.route("/gui")
@login_required
def bot_gui():
    # Pull preset bots from DB (or hard‑code for now)
    presets = BotPreset.query.order_by(BotPreset.risk.asc()).all()
    # User’s current slot assignments
    slots = UserBotSlot.query.filter_by(user_id=current_user.id).all()
    return render_template(
        "bot_gui.html",
        presets=presets,
        slots=slots,
    )

@bots_bp.route("/add-bot", methods=["POST"])
@login_required
def add_bot():
    bot_id = request.form.get("bot_id")
    # Simplified: put into first empty slot
    slot = UserBotSlot.add_to_first_empty(current_user.id, bot_id)
    db.session.commit()
    return jsonify({"success": True, "slot": slot.to_dict()})
```
Add `bots_bp` to your main `create_app` factory:
```python
app.register_blueprint(bots_bp)
```

---
## 2. `templates/bot_gui.html`
```jinja
{% extends 'base.html' %}
{% block content %}
<div class="container py-4">
  <!-- Theme toggle -->
  <button id="themeToggle" class="btn btn-outline-secondary float-end" aria-label="Toggle theme">
    <i data-feather="moon"></i>
  </button>
  <h1 class="mb-4 text-gold">DollarSign Bot Commander</h1>

  <!-- Risk slider -->
  <div class="card mb-4 shadow-sm">
    <div class="card-body">
      <label for="riskRange" class="form-label fw-bold">Risk Level: <span id="riskValue" class="badge bg-gold">1</span></label>
      <input type="range" class="form-range" min="1" max="5" id="riskRange" />
    </div>
  </div>

  <div class="row g-3">
    <!-- Preset bots -->
    <div class="col-lg-8">
      <div class="row row-cols-1 row-cols-md-2 g-3">
        {% for bot in presets %}
        <div class="col">
          <div class="card h-100 bot-card" data-bot-id="{{ bot.id }}">
            <div class="card-body d-flex flex-column">
              <h5 class="card-title">{{ bot.name }}</h5>
              <p class="card-text small text-muted flex-grow-1">{{ bot.description }}</p>
              <button class="btn btn-gold w-100 add-bot-btn mt-2" data-bot-id="{{ bot.id }}">Add Bot</button>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- Avatar chat -->
    <div class="col-lg-4">
      <div class="card h-100 shadow-sm">
        <div class="card-body d-flex flex-column">
          <img src="{{ url_for('static', filename='images/ari-avatar') }}" alt="Ari avatar" class="rounded-circle avatar-lg mb-3 mx-auto" />
          <h6 class="text-center mb-3">Chat with Ari</h6>
          <div id="chatLog" class="border rounded p-2 flex-grow-1 mb-2 bg-dark text-white small overflow-auto" style="max-height:300px"></div>
          <form id="chatForm" class="d-flex">
            <input type="text" name="msg" class="form-control me-2" placeholder="Type a message…" autocomplete="off" required />
            <button class="btn btn-gold" type="submit">Send</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Active slots -->
  <h3 class="mt-5 mb-3">Active Bots</h3>
  <div class="row row-cols-1 row-cols-sm-3 g-3" id="slotsWrapper">
    {% for slot in slots %}
    <div class="col">
      <div class="card text-center h-100 slot-card{% if not slot.bot %} border-dashed{% endif %}" data-slot-id="{{ slot.id }}">
        <div class="card-body d-flex flex-column justify-content-center">
          {% if slot.bot %}
          <h6 class="mb-1">{{ slot.bot.name }}</h6>
          <span class="badge bg-secondary">Risk {{ slot.bot.risk }}</span>
          {% else %}
          <small class="text-muted">Empty Slot</small>
          {% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}
{% block scripts %}
  {{ super() }}
  <script src="{{ url_for('static', filename='js/bot_gui.js') }}" defer></script>
{% endblock %}
```

**Design‑System Helper Classes (examples)**
```css
/* In dollarsign-design-system.css */
.text-gold { color:#F3BA2F; }
.btn-gold { background:#F3BA2F; color:#000; }
.btn-gold:hover { background:#e0ac27; }
.avatar-lg { width:96px; height:96px; object-fit:cover; }
.border-dashed { border:2px dashed #6c757d !important; }
```

---
## 3. `static/js/bot_gui.js`
```js
/* global $, feather */
$(function () {
  feather.replace();

  // Theme toggle (persists in localStorage)
  const $html = $(document.documentElement);
  const saved = localStorage.getItem("theme");
  if (saved === "dark") $html.attr("data-bs-theme", "dark");

  $("#themeToggle").on("click", function () {
    const isDark = $html.attr("data-bs-theme") === "dark";
    $html.attr("data-bs-theme", isDark ? "light" : "dark");
    localStorage.setItem("theme", isDark ? "light" : "dark");
  });

  // Risk slider live badge
  $("#riskRange").on("input", function () {
    $("#riskValue").text(this.value);
  });

  // Add bot button
  $(".add-bot-btn").on("click", function () {
    const botId = $(this).data("bot-id");
    $.post("/bots/add-bot", { bot_id: botId }).done(({ slot }) => {
      // Simple UI update: redraw empty card → filled
      const $card = $(`[data-slot-id='${slot.id}']`).removeClass("border-dashed");
      $card.find(".card-body").html(
        `<h6 class='mb-1'>${slot.bot_name}</h6><span class='badge bg-secondary'>Risk ${slot.bot_risk}</span>`
      );
      // Toast or flash feedback
      bootstrap.Toast.getOrCreateInstance(
        $("#toastAddedBot")
      ).show();
    });
  });

  // Simple Ari bot stub
  const $chatLog = $("#chatLog");
  $("#chatForm").on("submit", function (e) {
    e.preventDefault();
    const txt = $(this).find("input[name='msg']").val().trim();
    if (!txt) return;
    $chatLog.append(`<div class='text-end'>${txt}</div>`);
    this.reset();
    // Fake response
    setTimeout(() => {
      $chatLog.append("<div class='text-gold'>Interesting… I'll watch the charts! 📈</div>");
      $chatLog.scrollTop($chatLog[0].scrollHeight);
    }, 600);
  });
});
```

---
### How to Plug‑In
1. **Models** – create `BotPreset` and `UserBotSlot` with SQLAlchemy (id, name, risk, description, etc.).
2. **Migrations** – `flask db migrate && flask db upgrade`.
3. **Blueprint** – register `bots_bp` inside `create_app`.
4. **Static + Template** – copy files into `static/js/` and `templates/` folders.
5. **Design System** – ensure `dollarsign-design-system.css` is already included in `base.html`.

That’s it — fully CSP‑compliant, no inline JS, no React/JSX, and it uses your Bootstrap + golden theme classes.