# DollarSign Bot GUI – Flask/Jinja2 Edition (v4.1 UI Adjustments)

---
## UI Adjustments (Per User Feedback)

**Changes:**
- **Chat with Ari** section now matches bot card width and height.
- **Removed avatar image** from top of Ari chat.
- **Restored upgrade prompt** beneath the active bot slots if all 5 are filled.

---
## `templates/bot_gui.html` (Updated Extract)
```jinja
<!-- Preset bots + Chat container -->
<div class="row g-3">
  <div class="col-lg-8">
    <!-- Bot preset cards remain unchanged -->
    <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>

  <!-- Chat with Ari now same width/height as bot card -->
  <div class="col-lg-4">
    <div class="card h-100 shadow-sm">
      <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>
        <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>
```

---
## Upgrade Prompt (Restored Logic)
```jinja
<!-- Active Slots Section -->
<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>

{% if slots|length == 5 and slots|selectattr('bot')|list|length == 5 %}
<div class="alert alert-warning text-center mt-4">
  <strong>You've reached the 5 bot limit.</strong><br>
  <a href="/upgrade" class="btn btn-sm btn-outline-warning mt-2">Upgrade to unlock more slots</a>
</div>
{% endif %}
```

---
## `bot_gui.js` – No JS changes required for these layout tweaks

---
Let me know if you'd like to:
- Add Ari’s responses to be smarter (based on risk slider)
- Animate the upgrade banner
- Add a "remove bot" function next to active slots

The layout is now cleaner and more aligned with your design priorities.