diff --git a/static/css/styles.css b/static/css/styles.css
new file mode 100644
index 0000000..53ba099
--- /dev/null
+++ b/static/css/styles.css
@@ -0,0 +1,204 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+ font-family: 'Segoe UI', sans-serif;
+ background: #1a1a2e;
+ color: #e0e0e0;
+ min-height: 100vh;
+}
+
+header {
+ background: #16213e;
+ border-bottom: 2px solid #c8a44a;
+ padding: 12px 24px;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+header h1 {
+ font-size: 1.3rem;
+ color: #c8a44a;
+ letter-spacing: 1px;
+}
+.status-indicator {
+ margin-left: auto;
+ display: flex;
+ gap: 10px;
+ align-items: center;
+}
+.conn-badge {
+ font-size: 0.8rem;
+ padding: 4px 10px;
+ border-radius: 12px;
+ background: #333;
+}
+.conn-badge.online { background: #1a4a1a; color: #6fcf6f; }
+.conn-badge.offline { background: #4a1a1a; color: #cf6f6f; }
+
+.layout {
+ display: grid;
+ grid-template-columns: 320px 1fr;
+ grid-template-rows: auto 1fr;
+ gap: 0;
+ height: calc(100vh - 57px);
+}
+
+/* ---- Town list (left panel) ---- */
+#town-panel {
+ grid-row: 1 / 3;
+ background: #16213e;
+ border-right: 1px solid #2a2a4a;
+ overflow-y: auto;
+ padding: 12px;
+}
+#town-panel h2 {
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: #888;
+ margin-bottom: 10px;
+ padding-bottom: 6px;
+ border-bottom: 1px solid #2a2a4a;
+}
+.town-card {
+ background: #0f3460;
+ border: 1px solid #2a2a6a;
+ border-radius: 6px;
+ padding: 10px;
+ margin-bottom: 8px;
+ cursor: pointer;
+ transition: border-color 0.15s;
+}
+.town-card:hover { border-color: #c8a44a; }
+.town-card.selected { border-color: #c8a44a; background: #1a4070; }
+.town-card .town-name { font-weight: 600; font-size: 0.95rem; color: #c8a44a; }
+.town-card .town-meta { font-size: 0.72rem; color: #888; margin-top: 2px; }
+.town-card .town-res {
+ display: flex; gap: 8px;
+ margin-top: 6px; font-size: 0.78rem;
+}
+.res-item { display: flex; align-items: center; gap: 3px; }
+.res-icon { width: 12px; height: 12px; border-radius: 2px; }
+.res-wood { background: #8B6914; }
+.res-stone { background: #888; }
+.res-iron { background: #5588aa; }
+.res-pop { background: #88aa55; }
+.town-stale { opacity: 0.5; }
+
+/* ---- Command panel (top right) ---- */
+#command-panel {
+ padding: 16px 20px;
+ background: #1a1a2e;
+ border-bottom: 1px solid #2a2a4a;
+}
+#command-panel h2 {
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: #888;
+ margin-bottom: 12px;
+}
+.command-form {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ align-items: flex-end;
+}
+.form-group { display: flex; flex-direction: column; gap: 4px; }
+.form-group label { font-size: 0.72rem; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; }
+select, input[type=number] {
+ background: #0f3460;
+ border: 1px solid #2a2a6a;
+ color: #e0e0e0;
+ padding: 7px 10px;
+ border-radius: 4px;
+ font-size: 0.85rem;
+ min-width: 140px;
+}
+select:focus, input:focus { outline: none; border-color: #c8a44a; }
+
+.btn {
+ padding: 8px 18px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.85rem;
+ font-weight: 600;
+ letter-spacing: 0.5px;
+ transition: opacity 0.15s;
+}
+.btn:hover { opacity: 0.85; }
+.btn-gold { background: #c8a44a; color: #1a1a2e; }
+.btn-danger { background: #8b2222; color: #fff; }
+.btn-sm { padding: 5px 10px; font-size: 0.75rem; }
+
+#no-town-selected {
+ color: #666;
+ font-size: 0.85rem;
+ padding: 8px 0;
+}
+
+/* Build queue preview */
+#build-queue-preview {
+ margin-top: 10px;
+ font-size: 0.78rem;
+ color: #aaa;
+}
+#build-queue-preview span {
+ background: #0f3460;
+ border: 1px solid #2a4a6a;
+ border-radius: 3px;
+ padding: 2px 7px;
+ margin-right: 4px;
+ display: inline-block;
+ margin-bottom: 4px;
+}
+
+/* ---- Command log (bottom right) ---- */
+#log-panel {
+ padding: 16px 20px;
+ overflow-y: auto;
+ background: #1a1a2e;
+}
+#log-panel h2 {
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: #888;
+ margin-bottom: 10px;
+}
+table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.8rem;
+}
+th {
+ text-align: left;
+ color: #888;
+ font-weight: 500;
+ padding: 4px 8px;
+ border-bottom: 1px solid #2a2a4a;
+ white-space: nowrap;
+}
+td {
+ padding: 5px 8px;
+ border-bottom: 1px solid #1e1e3a;
+ vertical-align: middle;
+}
+tr:hover td { background: #1e1e40; }
+
+.status-badge {
+ padding: 2px 8px;
+ border-radius: 10px;
+ font-size: 0.7rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ white-space: nowrap;
+}
+.status-pending { background: #3a3a00; color: #cccc00; }
+.status-executing { background: #003a4a; color: #00ccee; }
+.status-done { background: #003a00; color: #00cc66; }
+.status-failed { background: #4a0000; color: #ee4444; }
+.status-cancelled { background: #2a2a2a; color: #888; }
+
+#empty-log { color: #444; font-size: 0.85rem; padding: 12px 0; }
diff --git a/static/js/api.js b/static/js/api.js
new file mode 100644
index 0000000..e665dff
--- /dev/null
+++ b/static/js/api.js
@@ -0,0 +1,125 @@
+// ================================================================
+// API & Networking
+// ================================================================
+
+window.fetchTowns = async function() {
+ try {
+ const res = await fetch('/dashboard/towns');
+ window.towns = await res.json();
+ window.renderTowns();
+ window.updateServerStatus(true);
+
+ if (window.selectedTownId) {
+ window.renderBuildQueuePreview();
+ window.renderBuildingDropdown();
+ window.renderTownDetails();
+ }
+ } catch (e) {
+ window.updateServerStatus(false);
+ }
+};
+
+window.fetchClientStatus = async function() {
+ try {
+ const res = await fetch('/dashboard/client-status');
+ const data = await res.json();
+ const isOnline = data.online === true;
+
+ // Detect transition: online → offline
+ if (window.wasClientOnline === true && !isOnline) {
+ // Fail all queued commands immediately
+ await fetch('/dashboard/commands/fail-stale', { method: 'POST' });
+ window.fetchLog();
+ }
+
+ window.clientOnline = isOnline;
+ window.wasClientOnline = isOnline;
+ window.updateClientStatus(isOnline);
+ } catch (e) {
+ window.updateClientStatus(false);
+ }
+};
+
+window.fetchLog = async function() {
+ try {
+ const res = await fetch('/dashboard/commands');
+ const cmds = await res.json();
+ window.renderLog(cmds);
+ } catch (e) {}
+};
+
+window.updateServerStatus = function(online) {
+ const el = document.getElementById('server-status');
+ if (online) {
+ el.textContent = '● Server';
+ el.className = 'conn-badge online';
+ } else {
+ el.textContent = '● Server offline';
+ el.className = 'conn-badge offline';
+ }
+};
+
+window.updateClientStatus = function(online) {
+ const el = document.getElementById('client-status');
+ if (online) {
+ el.textContent = '● Script';
+ el.className = 'conn-badge online';
+ } else {
+ el.textContent = '● Script offline';
+ el.className = 'conn-badge offline';
+ }
+ // Enable/disable the Send button
+ const btn = document.querySelector('#command-form-wrap .btn-gold');
+ if (btn) {
+ btn.disabled = !online;
+ btn.title = online ? '' : 'Script is offline — cannot send commands';
+ btn.style.opacity = online ? '' : '0.4';
+ btn.style.cursor = online ? '' : 'not-allowed';
+ }
+};
+
+window.sendCommand = async function() {
+ if (!window.clientOnline) return alert('Το script είναι offline — δεν μπορείτε να στείλετε εντολές.');
+ const town = window.getSelectedTown();
+ if (!town) return alert('Select a town first.');
+
+ const type = document.getElementById('cmd-type').value;
+ let payload = {};
+
+ if (type === 'build') {
+ payload = { building_id: document.getElementById('building-select').value };
+ } else {
+ payload = {
+ unit_id: document.getElementById('unit-select').value,
+ amount: parseInt(document.getElementById('recruit-amount').value) || 1,
+ };
+ }
+
+ try {
+ const res = await fetch('/dashboard/commands', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ town_id: town.town_id,
+ town_name: town.town_name,
+ type,
+ payload
+ })
+ });
+ const data = await res.json();
+ if (data.ok) {
+ window.fetchLog();
+ } else if (data.error === 'client_offline') {
+ alert(data.message || 'Το script είναι offline.');
+ } else {
+ alert('Error: ' + JSON.stringify(data));
+ }
+ } catch (e) {
+ alert('Failed to send command: ' + e);
+ }
+};
+
+window.cancelCommand = async function(id) {
+ await fetch(`/dashboard/commands/${id}`, { method: 'DELETE' });
+ window.fetchLog();
+};
diff --git a/static/js/app.js b/static/js/app.js
new file mode 100644
index 0000000..51f58a7
--- /dev/null
+++ b/static/js/app.js
@@ -0,0 +1,12 @@
+// ================================================================
+// Boot Sequence
+// ================================================================
+
+window.addEventListener('DOMContentLoaded', () => {
+ window.fetchTowns();
+ window.fetchLog();
+ window.fetchClientStatus();
+ setInterval(window.fetchTowns, window.POLL_INTERVAL);
+ setInterval(window.fetchLog, window.POLL_INTERVAL);
+ setInterval(window.fetchClientStatus, window.POLL_INTERVAL);
+});
diff --git a/static/js/components/commandForm.js b/static/js/components/commandForm.js
new file mode 100644
index 0000000..0a75765
--- /dev/null
+++ b/static/js/components/commandForm.js
@@ -0,0 +1,45 @@
+// ================================================================
+// Command Form Component
+// ================================================================
+
+window.onCmdTypeChange = function() {
+ const type = document.getElementById('cmd-type').value;
+ document.getElementById('build-options').style.display = type === 'build' ? '' : 'none';
+ document.getElementById('recruit-options').style.display = type === 'recruit' ? '' : 'none';
+ document.getElementById('amount-group').style.display = type === 'recruit' ? '' : 'none';
+};
+
+window.renderBuildingDropdown = function() {
+ const town = window.getSelectedTown();
+ if (!town) return;
+ const bSelect = document.getElementById('building-select');
+ const bLevels = town.buildings || {};
+
+ const currentVal = bSelect.value;
+ bSelect.innerHTML = '';
+
+ for (const [key, nameGr] of Object.entries(window.BUILDING_NAMES_GR)) {
+ const level = bLevels[key] !== undefined ? bLevels[key] : "?";
+ const option = document.createElement('option');
+ option.value = key;
+ option.textContent = `${nameGr} [Επίπεδο ${level}]`;
+ bSelect.appendChild(option);
+ }
+
+ if (currentVal && Array.from(bSelect.options).some(o => o.value === currentVal)) {
+ bSelect.value = currentVal;
+ }
+};
+
+window.renderBuildQueuePreview = function() {
+ const town = window.getSelectedTown();
+ const el = document.getElementById('build-queue-preview');
+ if (!town || !town.build_queue || !town.build_queue.length) {
+ el.innerHTML = 'Build queue: empty';
+ return;
+ }
+ const items = town.build_queue.map(o =>
+ `${o.building_type || o.name || JSON.stringify(o)}`
+ ).join('');
+ el.innerHTML = `Current queue
${items}`;
+};
diff --git a/static/js/components/commandLog.js b/static/js/components/commandLog.js
new file mode 100644
index 0000000..04bf466
--- /dev/null
+++ b/static/js/components/commandLog.js
@@ -0,0 +1,36 @@
+// ================================================================
+// Command Log Component
+// ================================================================
+
+window.renderLog = function(cmds) {
+ const el = document.getElementById('log-content');
+ if (!cmds.length) {
+ el.innerHTML = 'No commands sent yet.
';
+ return;
+ }
+
+ const rows = cmds.map(cmd => {
+ const p = typeof cmd.payload === 'string' ? JSON.parse(cmd.payload) : cmd.payload;
+ const desc = cmd.type === 'build'
+ ? `Build: ${p.building_id}`
+ : `Recruit: ${p.amount}x ${p.unit_id}`;
+ const statusClass = `status-${cmd.status}`;
+ const cancelBtn = ``;
+
+ return `
+ | #${cmd.id} |
+ ${cmd.town_name || cmd.town_id} |
+ ${desc} |
+ ${cmd.status} |
+ ${cmd.result_msg || ''} |
+ ${cancelBtn} |
+
`;
+ }).join('');
+
+ el.innerHTML = `
+
+ | # | Town | Command | Status | Result | |
+
+ ${rows}
+
`;
+};
diff --git a/static/js/components/townViewer.js b/static/js/components/townViewer.js
new file mode 100644
index 0000000..6ecaf32
--- /dev/null
+++ b/static/js/components/townViewer.js
@@ -0,0 +1,112 @@
+// ================================================================
+// Town Viewer Component (Left panel + Town detail view)
+// ================================================================
+
+window.renderTowns = function() {
+ const container = document.getElementById('town-list');
+ if (!window.towns.length) {
+ container.innerHTML = 'No towns received yet.
';
+ return;
+ }
+
+ const now = Date.now();
+ container.innerHTML = window.towns.map(t => {
+ const updatedMs = new Date(t.updated_at + 'Z').getTime();
+ const ageMin = Math.round((now - updatedMs) / 60000);
+ const stale = ageMin > 3;
+ const selected = t.town_id === window.selectedTownId ? 'selected' : '';
+
+ return `
+
+
${t.town_name}${t.has_premium ? ' ★' : ''}
+
${t.sea != null ? `🌊 Θ${t.sea} · ` : ''}${t.points} pts · ${t.god || 'No god'} · ${ageMin}m ago
+
+
${window.fmt(t.resources.wood)}
+
${window.fmt(t.resources.stone)}
+
${window.fmt(t.resources.iron)}
+
${window.fmt(t.resources.population)}
+
+
Χωρητικότητα: ${capFmt}
+ ${window.RES_ICONS.wood} Ξύλο: ${window.fmt(t.resources.wood)}
+ ${window.RES_ICONS.stone} Πέτρα: ${window.fmt(t.resources.stone)}
+ ${window.RES_ICONS.iron} Ασήμι: ${window.fmt(t.resources.iron)}
+ ${window.RES_ICONS.pop} Πληθυσμός: ${t.resources.population}
+ `;
+
+ const godName = t.god ? t.god.charAt(0).toUpperCase() + t.god.slice(1) : 'Κανένας';
+ const seaStr = t.sea != null ? `Θ${t.sea}` : '—';
+ const coordStr = (t.x != null && t.y != null) ? ` (${Math.round(t.x)}:${Math.round(t.y)})` : '';
+ document.getElementById('td-general').innerHTML = `
+ Πόντοι: ${t.points}${t.wonder_points ? ` / Θαύμα: ${t.wonder_points}` : ''}
+ Θεός: ${godName}
+ Θάλασσα: ${seaStr}${coordStr}
+ Παίκτης: ${t.player}${t.has_premium ? ' ★' : ''}
+ ${t.alliance_id ? `Συμμαχία: ${t.alliance_id}
` : ''}
+ `;
+
+ // ---- Researches ----
+ const researchObj = t.researches || {};
+ const researchEntries = Object.entries(researchObj).filter(([k, v]) =>
+ k !== 'id' && k !== 'town_id' && (v === true || v === 1 || Number(v) > 0)
+ );
+ let resHtml = '';
+ if (researchEntries.length) {
+ resHtml = researchEntries.map(([k]) =>
+ `✓ ${k.replace(/_/g, ' ')}
`
+ ).join('');
+ } else {
+ resHtml = 'Καμία έρευνα
';
+ }
+ document.getElementById('td-researches').innerHTML = resHtml;
+
+ const unitsObj = t.units || {};
+ let unitsHtml = '';
+ for(const [unitKey, count] of Object.entries(unitsObj)) {
+ if(count > 0 && unitKey !== 'militia') {
+ const name = window.UNIT_NAMES_GR[unitKey] || unitKey;
+ unitsHtml += `${name}: ${count}
`;
+ }
+ }
+ if(unitsHtml === '') unitsHtml = 'Κανένα στράτευμα
';
+
+ document.getElementById('td-units').innerHTML = unitsHtml;
+};
diff --git a/static/js/state.js b/static/js/state.js
new file mode 100644
index 0000000..d5768a5
--- /dev/null
+++ b/static/js/state.js
@@ -0,0 +1,46 @@
+// ================================================================
+// Global State & Constants
+// ================================================================
+window.towns = [];
+window.selectedTownId = null;
+window.clientOnline = false; // tracks Tampermonkey script heartbeat
+window.wasClientOnline = null; // previous known state (null = unknown)
+window.POLL_INTERVAL = 4000;
+
+window.BUILDING_NAMES_GR = {
+ main: "Σύγκλητος",
+ storage: "Αποθήκη",
+ farm: "Φάρμα",
+ academy: "Ακαδημία",
+ temple: "Ναός",
+ barracks: "Στρατώνας",
+ docks: "Λιμάνι",
+ market: "Αγορά",
+ hide: "Σπηλιά",
+ lumber: "Ξυλουργείο",
+ stoner: "Λατομείο",
+ ironer: "Ορυχείο Αργύρου",
+ wall: "Τείχος"
+};
+
+window.UNIT_NAMES_GR = {
+ sword: "Ξιφομάχος", slinger: "Σφενδονήτης", archer: "Τοξότης", hoplite: "Οπλίτης",
+ rider: "Ιππέας", chariot: "Άρμα", catapult: "Καταπέλτης",
+ big_transporter: "Μεταφορικό", small_transporter: "Γρήγ. Μεταφορικό", bireme: "Διήρης",
+ attack_ship: "Πλοίο Φάρος", trireme: "Τριήρης", colonize_ship: "Αποικιακό",
+ medusa: "Μέδουσα", zyklop: "Κύκλωπας", harpy: "Άρπυια", pegasus: "Πήγασος",
+ minotaur: "Μινώταυρος", manticore: "Μαντιχώρας", cerberus: "Κέρβερος",
+ hydra: "Ύδρα", sea_monster: "Τέρας Θάλασσας", militia: "Εθνοφρουρά"
+};
+
+window.RES_ICONS = {
+ wood: '',
+ stone: '',
+ iron: '',
+ pop: ''
+};
+
+window.fmt = function(n) {
+ if (n >= 1000) return (n / 1000).toFixed(1) + 'k';
+ return n;
+};
diff --git a/templates/dashboard.html b/templates/dashboard.html
index c31c923..2ef7d74 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -4,212 +4,7 @@
Grepolis Remote
-
+
@@ -337,387 +132,11 @@
-
+
+
+
+
+
+