# DollarSign Bot GUI – Flask/Jinja2 Edition (V4.2 UI Polish)

---
## 🔧 UI Polish Tasks Implemented

- ✅ Chat with Ari now appears in a proper right-side column (`col-md-4`)
- ✅ Removed avatar icon (top-right corner)
- ✅ Added placeholder for empty active bots
- ✅ Reinstated upgrade banner (if user has 5 active bots)
- ✅ Chat UI styled with chat bubbles
- ✅ Removed sparkle animation from risk slider

---
## `templates/bot_gui.html`
```jinja
{% extends 'base.html' %}
{% block content %}
<div class="container py-4">
  <h1 class="mb-4 text-gold">$DOLLARSIGN Bot Commander V2.4</h1>

  <!-- Portfolio Summary -->
  <div class="card mb-4">
    <div class="card-body d-flex justify-content-between align-items-center">
      <div>
        <h3 class="text-success">$10062.98</h3>
        <p class="text-muted mb-0">24H Change: <span class="text-success">+$307.98 (+3.08%)</span></p>
      </div>
    </div>
  </div>

  <!-- Main Row -->
  <div class="row g-3">
    <!-- Left Panel: Bots -->
    <div class="col-md-8">
      <div class="card mb-3">
        <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>

      {% for bot in presets %}
      <div class="card mb-3">
        <div class="card-body">
          <h5 class="text-gold mb-1">{{ bot.name }} <span>{{ bot.emoji }}</span></h5>
          <p class="text-muted small">{{ bot.description }}</p>
          <p class="small text-success">Expected ROI: {{ bot.expected_roi }}%</p>
          <div class="d-flex align-items-center">
            <input type="number" class="form-control me-2" placeholder="Bot Amount" value="400" />
            <button class="btn btn-primary add-bot-btn" data-bot-id="{{ bot.id }}">Add Bot</button>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    <!-- Right Panel: Chat with Ari -->
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-body d-flex flex-column">
          <h6 class="text-center mb-2">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:250px">
            <div class="bg-secondary text-white p-2 rounded mb-1">Hey, I'm Ari. Ready to build some profitable trading bots?</div>
          </div>
          <form id="chatForm" class="d-flex">
            <input type="text" name="msg" class="form-control me-2" placeholder="Ask me anything about trading bots…" autocomplete="off" required />
            <button class="btn btn-gold" type="submit">Send</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Active Bots -->
  <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_name %} border-dashed{% endif %}" data-slot-id="{{ slot.id }}">
        <div class="card-body d-flex flex-column justify-content-center">
          {% if slot.bot_name %}
          <h6 class="mb-1">{{ slot.bot_name }} {{ slot.bot_emoji }}</h6>
          <span class="badge bg-secondary">Risk {{ slot.bot_risk }}</span>
          {% else %}
          <div class="text-muted"><i data-feather="plus-circle"></i> Empty Slot</div>
          {% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  {% if slots|length == 5 and slots|selectattr('bot_name')|list|length == 5 %}
  <div class="alert alert-warning text-center mt-4">
    <strong>You've reached the 5 bot limit.</strong><br>
    Ari says: <em>Want more firepower? Let’s upgrade.</em><br>
    <a href="/upgrade" class="btn btn-outline-warning btn-sm mt-2">Upgrade Now</a>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="{{ url_for('static', filename='js/bot_gui.js') }}" defer></script>
{% endblock %}
```

---
## `bot_gui.js` (Sparkle removed + chat bubble improvement)
```js
$(function () {
  feather.replace();

  // Theme toggle
  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
  $("#riskRange").on("input", function () {
    $("#riskValue").text(this.value);
  });

  // Add bot
  $(".add-bot-btn").on("click", function () {
    const botId = $(this).data("bot-id");
    $.post("/bots/add-bot", { bot_id: botId }).done(({ slot }) => {
      const $card = $(`[data-slot-id='${slot.id}']`).removeClass("border-dashed");
      $card.find(".card-body").html(
        `<h6 class='mb-1'>${slot.bot_name} ${slot.bot_emoji}</h6><span class='badge bg-secondary'>Risk ${slot.bot_risk}</span>`
      );
    });
  });

  // Chat with Ari
  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'><span class='bg-light text-dark p-2 rounded mb-1 d-inline-block'>${txt}</span></div>`);
    this.reset();
    setTimeout(() => {
      $chatLog.append("<div class='bg-secondary text-white p-2 rounded mb-1'>Interesting… I'll watch the charts! 📈</div>");
      $chatLog.scrollTop($chatLog[0].scrollHeight);
    }, 600);
  });
});
```

---
Let me know if you'd like to:
- Add a "Remove Bot" button to each slot
- Animate bot cards on load
- Show real-time ROI simulation per bot
- Implement Ari’s smarter replies based on risk level or slot count