# Code Request — Version UI in Server Matrix Body

**Filed by:** Chronicler #88
**Date:** 2026-04-14
**Priority:** Medium
**Context:** Pre-launch, defer until stable

---

## Background

Chronicler #88 added modpack version tracking infrastructure today:
- `current_version` column on `server_config`
- `server_version_history` table (version, who, when)
- `POST /admin/servers/:id/set-version` route
- `GET /admin/servers/:id/version-history` route
- Helper JS functions `saveVersion()`, `toggleVersionForm()`, `hideVersionForm()` in `servers/index.ejs`

The UI addition to `_matrix_body.ejs` kept breaking EJS due to single quotes
inside ternary expressions inside HTML attributes. The file was reverted to
clean state. This task is to add the version UI properly.

---

## What To Add

At the bottom of each server card in `_matrix_body.ejs` (there are TWO loops —
TX1 and NC1), add a version display section BEFORE the closing `</div>`.

The tricky part: avoid single quotes inside `<%= %>` tags that are inside
HTML attributes. Use a local variable assignment instead:

```ejs
<% var currentVersion = config && config.current_version ? config.current_version : null; %>
<div class="px-4 pb-4" style="border-top:1px solid #333;padding-top:10px;margin-top:4px;">
    <div style="font-size:10px;color:#666;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;">📦 Installed Version</div>
    <div style="display:flex;gap:6px;align-items:center;" id="version-display-<%= server.identifier %>">
        <span style="font-size:13px;font-weight:600;color:<%= currentVersion ? '#4ade80' : '#555' %>;" id="version-text-<%= server.identifier %>">
            <%= currentVersion || 'Not set' %>
        </span>
        <button id="version-edit-btn-<%= server.identifier %>"
                onclick="toggleVersionForm('<%= server.identifier %>')"
                style="font-size:10px;background:#333;border:1px solid #555;color:#aaa;padding:2px 8px;border-radius:4px;cursor:pointer;">
            ✏️ Edit
        </button>
    </div>
    <div id="version-form-<%= server.identifier %>" style="display:none;margin-top:6px;">
        <div style="display:flex;gap:6px;align-items:center;">
            <input type="text" id="version-input-<%= server.identifier %>"
                   placeholder="e.g. 1.4.2"
                   style="font-size:12px;background:#1a1a1a;border:1px solid #555;color:#e0e0e0;padding:4px 8px;border-radius:4px;width:140px;" />
            <button onclick="saveVersion('<%= server.identifier %>')"
                    style="font-size:11px;background:#2563eb;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">Save</button>
            <button onclick="hideVersionForm('<%= server.identifier %>')"
                    style="font-size:11px;background:#333;border:1px solid #555;color:#aaa;padding:4px 8px;border-radius:4px;cursor:pointer;">Cancel</button>
        </div>
        <div id="version-result-<%= server.identifier %>" style="margin-top:4px;font-size:11px;"></div>
        <div style="margin-top:6px;">
            <button hx-get="/admin/servers/<%= server.identifier %>/version-history"
                    hx-target="#version-history-<%= server.identifier %>"
                    hx-swap="innerHTML"
                    style="font-size:10px;background:transparent;border:none;color:#555;cursor:pointer;padding:0;text-decoration:underline;">View history</button>
        </div>
        <div id="version-history-<%= server.identifier %>" style="margin-top:4px;background:#1a1a1a;border-radius:4px;padding:4px;"></div>
    </div>
</div>
```

---

## Key Rule

**Never put single quotes inside `<%= %>` tags that are inside HTML attribute values.**
Use `<% var x = ...; %>` to assign first, then `<%= x %>` in the attribute.

---

## Validation

After adding, run this on the Dev Panel to verify EJS compiles:
```bash
cd /opt/mod-builds/firefrost-services/services/arbiter-3.0
node -e "const ejs = require('ejs'); const fs = require('fs'); try { ejs.compile(fs.readFileSync('src/views/admin/servers/_matrix_body.ejs', 'utf8')); console.log('EJS OK'); } catch(e) { console.log('ERROR:', e.message); }"
```

Must print `EJS OK` before committing.

---

## Files To Edit

- `services/arbiter-3.0/src/views/admin/servers/_matrix_body.ejs`

Do NOT touch `_server_card.ejs` or `index.ejs` — those are fine.

---

**Fire + Frost + Foundation** 💙🔥❄️