Add files via upload

README.md

@@ -1 +1,56 @@
-# VitaChat
+# VitaChat API auf Vercel
+
+Serverless-Backend (Node.js) + Neon Postgres. Ersetzt das alte PHP/SQLite-Setup.
+Das Protokoll ist unverändert — der Vita-Client braucht nur eine neue URL.
+
+## Einrichtung (~10 Minuten)
+
+### 1. Projekt anlegen
+Diesen Ordner in ein GitHub-Repo pushen, dann auf vercel.com "Add New Project"
+und das Repo importieren. Framework: "Other" (wird meist automatisch erkannt).
+
+Alternativ ohne GitHub:
+    npm i -g vercel
+    vercel        # im Projektordner, folgt dem Assistenten
+
+### 2. Datenbank verbinden
+Im Vercel-Dashboard: Projekt -> Storage -> Create Database -> Neon (Postgres).
+Vercel legt die Variable DATABASE_URL automatisch an. Danach EINMAL neu
+deployen, damit die Variable in den Funktionen ankommt (Deployments -> Redeploy).
+
+### 3. Tabellen anlegen
+Einmal im Browser aufrufen:
+    https://<projekt>.vercel.app/api/setup
+Erwartet: OK|Datenbank bereit
+
+### 4. Testen
+    curl -d "user=test&pass=1234" https://<projekt>.vercel.app/api/register
+    curl -d "user=test&pass=1234" https://<projekt>.vercel.app/api/login
+
+Web-Client: https://<projekt>.vercel.app/
+
+### 5. Vita-Client anpassen
+In client/src/net.h die Basis-URL ersetzen:
+
+    #define API_BASE "https://<projekt>.vercel.app/api"
+
+Dann neu bauen:
+    cd ~/vitachat/client/build && make
+
+## Struktur
+    api/setup.js      Tabellen anlegen (einmalig)
+    api/register.js   POST user, pass
+    api/login.js      POST user, pass          -> OK|<token>
+    api/send.js       POST token, to, text     -> OK|<msg_id>
+    api/poll.js       GET  token, with, since  -> MSG|id|from|ts|text
+    api/contacts.js   GET  token               -> USER|name|online|unread|last_ts|preview
+    lib/db.js         DB-Verbindung, Passwort-Hashing (scrypt), Protokoll-Helfer
+    public/index.html Web-Client (wird unter / ausgeliefert)
+
+## Hinweise
+- Passwörter: scrypt aus Nodes crypto-Modul, keine Extra-Abhängigkeit.
+- Fehler kommen als "ERR|<text>" mit HTTP 200, damit der Vita-Client die
+  Zeile in jedem Fall lesen kann.
+- Neon-Freetier schläft nach Inaktivität ein; der erste Aufruf danach
+  dauert ~1 s. Durch das Polling der App bleibt sie im Betrieb wach.
+- Logs bei Problemen: Vercel-Dashboard -> Projekt -> Logs.

api/contacts.js

@@ -0,0 +1,50 @@
+import { sql, ok, fail, auth, clean, ONLINE_SECS, PREVIEW_LEN } from '../lib/db.js';
+
+export default async function handler(req, res) {
+  try {
+    const me = await auth(req, res);
+    if (!me) return;
+
+    const now = Math.floor(Date.now() / 1000);
+
+    // Alles in EINER Abfrage – auf Serverless zählt jede Round-Trip-Zeit.
+    const rows = await sql`
+      SELECT u.name, u.last_seen,
+             COALESCE(lm.ts, 0)  AS last_ts,
+             lm.text             AS last_text,
+             lm.sender           AS last_sender,
+             COALESCE(un.cnt, 0) AS unread
+      FROM users u
+      LEFT JOIN LATERAL (
+        SELECT m.ts, m.text, m.sender FROM messages m
+        WHERE (m.sender = ${me.id} AND m.recipient = u.id)
+           OR (m.sender = u.id     AND m.recipient = ${me.id})
+        ORDER BY m.id DESC LIMIT 1
+      ) lm ON TRUE
+      LEFT JOIN LATERAL (
+        SELECT COUNT(*) AS cnt FROM messages m
+        WHERE m.sender = u.id AND m.recipient = ${me.id}
+          AND m.id > COALESCE(
+            (SELECT last_id FROM reads WHERE user_id = ${me.id} AND peer_id = u.id), 0)
+      ) un ON TRUE
+      WHERE u.id <> ${me.id}
+      ORDER BY last_ts DESC, LOWER(u.name) ASC`;
+
+    const body = rows.map(r => {
+      const online = (now - Number(r.last_seen) < ONLINE_SECS) ? 1 : 0;
+
+      let preview = '';
+      if (r.last_text) {
+        let txt = r.last_text.slice(0, PREVIEW_LEN);
+        if (r.last_text.length > PREVIEW_LEN) txt += '…';
+        preview = (r.last_sender === me.id ? 'Du: ' : '') + txt;
+      }
+
+      return `USER|${clean(r.name)}|${online}|${r.unread}|${r.last_ts}|${clean(preview)}`;
+    }).join('\n');
+
+    ok(res, body ? body + '\n' : '');
+  } catch (e) {
+    fail(res, 'Serverfehler: ' + e.message);
+  }
+}

api/login.js

@@ -0,0 +1,21 @@
+import { sql, param, ok, fail, verifyPassword, newToken } from '../lib/db.js';
+
+export default async function handler(req, res) {
+  const name = param(req, 'user');
+  const pass = param(req, 'pass');
+
+  try {
+    const rows = await sql`
+      SELECT id, pass_hash FROM users WHERE LOWER(name) = LOWER(${name})`;
+    if (!rows.length || !verifyPassword(pass, rows[0].pass_hash))
+      return fail(res, 'Login fehlgeschlagen');
+
+    const token = newToken();
+    const now   = Math.floor(Date.now() / 1000);
+    await sql`UPDATE users SET token = ${token}, last_seen = ${now} WHERE id = ${rows[0].id}`;
+
+    ok(res, `OK|${token}\n`);
+  } catch (e) {
+    fail(res, 'Serverfehler: ' + e.message);
+  }
+}

api/poll.js

@@ -0,0 +1,45 @@
+import { sql, param, ok, fail, auth, clean, MAX_POLL } from '../lib/db.js';
+
+export default async function handler(req, res) {
+  try {
+    const me = await auth(req, res);
+    if (!me) return;
+
+    const withName = param(req, 'with');
+    const since    = parseInt(param(req, 'since'), 10) || 0;
+
+    const other = await sql`SELECT id FROM users WHERE LOWER(name) = LOWER(${withName})`;
+    if (!other.length) return fail(res, 'Nutzer unbekannt');
+    const peer = other[0].id;
+
+    const msgs = await sql`
+      SELECT m.id, u.name AS sender_name, m.ts, m.text
+      FROM messages m JOIN users u ON u.id = m.sender
+      WHERE m.id > ${since}
+        AND ((m.sender = ${me.id} AND m.recipient = ${peer})
+          OR (m.sender = ${peer}  AND m.recipient = ${me.id}))
+      ORDER BY m.id ASC
+      LIMIT ${MAX_POLL}`;
+
+    const body = msgs
+      .map(m => `MSG|${m.id}|${clean(m.sender_name)}|${m.ts}|${clean(m.text)}`)
+      .join('\n');
+
+    // Chat als gelesen markieren
+    const maxRow = await sql`
+      SELECT COALESCE(MAX(id), 0) AS max_id FROM messages
+      WHERE (sender = ${me.id} AND recipient = ${peer})
+         OR (sender = ${peer}  AND recipient = ${me.id})`;
+    const maxId = maxRow[0].max_id;
+
+    await sql`
+      INSERT INTO reads (user_id, peer_id, last_id)
+      VALUES (${me.id}, ${peer}, ${maxId})
+      ON CONFLICT (user_id, peer_id)
+      DO UPDATE SET last_id = GREATEST(reads.last_id, ${maxId})`;
+
+    ok(res, body ? body + '\n' : '');
+  } catch (e) {
+    fail(res, 'Serverfehler: ' + e.message);
+  }
+}

api/register.js

@@ -0,0 +1,21 @@
+import { sql, param, ok, fail, hashPassword } from '../lib/db.js';
+
+export default async function handler(req, res) {
+  const name = param(req, 'user');
+  const pass = param(req, 'pass');
+
+  if (!/^[A-Za-z0-9_-]{2,20}$/.test(name))
+    return fail(res, 'Name: 2-20 Zeichen, a-z 0-9 _ -');
+  if (pass.length < 4)
+    return fail(res, 'Passwort zu kurz (min. 4)');
+
+  try {
+    const exists = await sql`SELECT id FROM users WHERE LOWER(name) = LOWER(${name})`;
+    if (exists.length) return fail(res, 'Name bereits vergeben');
+
+    await sql`INSERT INTO users (name, pass_hash) VALUES (${name}, ${hashPassword(pass)})`;
+    ok(res, 'OK|registriert\n');
+  } catch (e) {
+    fail(res, 'Serverfehler: ' + e.message);
+  }
+}

api/send.js

@@ -0,0 +1,25 @@
+import { sql, param, ok, fail, auth, MAX_TEXT_LEN } from '../lib/db.js';
+
+export default async function handler(req, res) {
+  try {
+    const me = await auth(req, res);
+    if (!me) return;
+
+    const to   = param(req, 'to');
+    const text = param(req, 'text').slice(0, MAX_TEXT_LEN);
+    if (!text) return fail(res, 'Leere Nachricht');
+
+    const rcpt = await sql`SELECT id FROM users WHERE LOWER(name) = LOWER(${to})`;
+    if (!rcpt.length) return fail(res, 'Empfaenger unbekannt');
+
+    const now = Math.floor(Date.now() / 1000);
+    const ins = await sql`
+      INSERT INTO messages (sender, recipient, ts, text)
+      VALUES (${me.id}, ${rcpt[0].id}, ${now}, ${text})
+      RETURNING id`;
+
+    ok(res, `OK|${ins[0].id}\n`);
+  } catch (e) {
+    fail(res, 'Serverfehler: ' + e.message);
+  }
+}

api/setup.js

@@ -0,0 +1,37 @@
+// Einmalig aufrufen: https://<projekt>.vercel.app/api/setup
+// Legt die Tabellen an. Mehrfaches Aufrufen ist unschädlich.
+import { sql, ok, fail } from '../lib/db.js';
+
+export default async function handler(req, res) {
+  try {
+    await sql`CREATE TABLE IF NOT EXISTS users (
+      id        SERIAL PRIMARY KEY,
+      name      TEXT NOT NULL,
+      pass_hash TEXT NOT NULL,
+      token     TEXT,
+      last_seen BIGINT DEFAULT 0
+    )`;
+    // Namen ohne Rücksicht auf Groß-/Kleinschreibung eindeutig halten
+    await sql`CREATE UNIQUE INDEX IF NOT EXISTS idx_users_name ON users (LOWER(name))`;
+
+    await sql`CREATE TABLE IF NOT EXISTS messages (
+      id        SERIAL PRIMARY KEY,
+      sender    INTEGER NOT NULL,
+      recipient INTEGER NOT NULL,
+      ts        BIGINT  NOT NULL,
+      text      TEXT    NOT NULL
+    )`;
+    await sql`CREATE INDEX IF NOT EXISTS idx_msg ON messages (recipient, sender, id)`;
+
+    await sql`CREATE TABLE IF NOT EXISTS reads (
+      user_id INTEGER NOT NULL,
+      peer_id INTEGER NOT NULL,
+      last_id INTEGER NOT NULL DEFAULT 0,
+      PRIMARY KEY (user_id, peer_id)
+    )`;
+
+    ok(res, 'OK|Datenbank bereit\n');
+  } catch (e) {
+    fail(res, 'Setup fehlgeschlagen: ' + e.message);
+  }
+}

lib/db.js

@@ -0,0 +1,86 @@
+// Gemeinsame Helfer für alle vitaAPI-Endpunkte (Vercel Serverless + Neon Postgres)
+import { neon } from '@neondatabase/serverless';
+import { randomBytes, scryptSync, timingSafeEqual } from 'node:crypto';
+
+export const sql = neon(process.env.DATABASE_URL);
+
+export const ONLINE_SECS  = 60;
+export const MAX_TEXT_LEN = 500;
+export const MAX_POLL     = 50;
+export const PREVIEW_LEN  = 38;
+
+/* ---------------- Antwort-Protokoll (zeilenbasiert, Pipe-getrennt) ---------------- */
+
+export function textHead(res) {
+  res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+  res.setHeader('Cache-Control', 'no-store');
+}
+
+export function ok(res, body = '') {
+  textHead(res);
+  res.status(200).send(body);
+}
+
+export function fail(res, msg) {
+  textHead(res);
+  res.status(200).send(`ERR|${msg}\n`);   // 200, damit der Vita-Client die Zeile sicher liest
+}
+
+/** Pipes und Zeilenumbrüche aus Nutzdaten entfernen, damit das Protokoll heil bleibt. */
+export function clean(s) {
+  return String(s).replace(/\|/g, '¦').replace(/[\r\n]+/g, ' ');
+}
+
+/* ---------------- Parameter (GET-Query oder POST-Formulardaten) ---------------- */
+
+export function param(req, key) {
+  let v = req.query?.[key];
+  if (v === undefined && req.body) {
+    if (typeof req.body === 'string') {
+      // Fallback, falls Vercel den Body nicht geparst hat
+      v = new URLSearchParams(req.body).get(key);
+    } else {
+      v = req.body[key];
+    }
+  }
+  return (v ?? '').toString().trim();
+}
+
+/* ---------------- Passwörter (scrypt aus Node, keine Extra-Abhängigkeit) ---------------- */
+
+export function hashPassword(pass) {
+  const salt = randomBytes(16);
+  const hash = scryptSync(pass, salt, 64);
+  return `${salt.toString('hex')}:${hash.toString('hex')}`;
+}
+
+export function verifyPassword(pass, stored) {
+  try {
+    const [saltHex, hashHex] = String(stored).split(':');
+    if (!saltHex || !hashHex) return false;
+    const expected = Buffer.from(hashHex, 'hex');
+    const actual   = scryptSync(pass, Buffer.from(saltHex, 'hex'), expected.length);
+    return timingSafeEqual(expected, actual);
+  } catch {
+    return false;
+  }
+}
+
+export function newToken() {
+  return randomBytes(16).toString('hex');
+}
+
+/* ---------------- Authentifizierung ---------------- */
+
+/** Gibt den Nutzer zurück oder null (dann hat der Aufrufer bereits geantwortet). */
+export async function auth(req, res) {
+  const token = param(req, 'token');
+  if (!token) { fail(res, 'Kein Token'); return null; }
+
+  const rows = await sql`SELECT id, name FROM users WHERE token = ${token}`;
+  if (!rows.length) { fail(res, 'Ungueltiges Token'); return null; }
+
+  const now = Math.floor(Date.now() / 1000);
+  await sql`UPDATE users SET last_seen = ${now} WHERE id = ${rows[0].id}`;
+  return rows[0];
+}

package.json

@@ -0,0 +1,10 @@
+{
+  "name": "vitachat-api",
+  "version": "3.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Messenger-Backend fuer die PS Vita (Vercel Serverless + Neon Postgres)",
+  "dependencies": {
+    "@neondatabase/serverless": "^0.10.4"
+  }
+}

public/index.html

@@ -0,0 +1,346 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>VitaChat Web</title>
+<style>
+  :root {
+    --bg:        #0e121a;
+    --header:    #141a26;
+    --card:      #1a212e;
+    --accent:    #2d7dff;
+    --accent-dk: #1c54b4;
+    --bubble-in: #2c3442;
+    --text:      #ebf0f8;
+    --subtext:   #8c98aa;
+    --online:    #3cd282;
+    --offline:   #5a6473;
+    --error:     #ff5f5f;
+  }
+  * { box-sizing: border-box; margin: 0; }
+  body {
+    background: var(--bg); color: var(--text);
+    font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
+    height: 100vh; overflow: hidden;
+  }
+  button { font: inherit; cursor: pointer; border: 0; }
+  input {
+    font: inherit; border: 0; outline: 0;
+    background: var(--card); color: var(--text);
+    border-radius: 12px; padding: 12px 16px; width: 100%;
+    border-bottom: 3px solid transparent;
+  }
+  input:focus { border-bottom-color: var(--accent); }
+  ::placeholder { color: var(--subtext); }
+
+  /* ---------- Login ---------- */
+  #login {
+    height: 100vh; display: flex; flex-direction: column;
+    align-items: center; justify-content: center; gap: 14px;
+  }
+  #login .box { width: 320px; display: flex; flex-direction: column; gap: 14px; }
+  #login h1 { font-size: 28px; }
+  #login h1 span { color: var(--accent); }
+  #login .sub { color: var(--subtext); margin-bottom: 10px; }
+  .btn {
+    background: var(--accent); color: var(--text);
+    border-radius: 12px; padding: 12px; font-weight: 600;
+  }
+  .btn:hover { background: var(--accent-dk); }
+  .link { background: none; color: var(--subtext); padding: 6px; }
+  .link:hover { color: var(--text); }
+  #login-status { min-height: 20px; font-size: 13px; }
+  #login-status.err { color: var(--error); }
+  #login-status.ok  { color: var(--online); }
+
+  /* ---------- App-Layout ---------- */
+  #app { display: none; height: 100vh; }
+  #app.active { display: flex; }
+
+  #sidebar {
+    width: 280px; min-width: 280px; background: var(--header);
+    display: flex; flex-direction: column; border-right: 2px solid var(--accent);
+  }
+  #sidebar header {
+    padding: 16px; display: flex; justify-content: space-between; align-items: center;
+  }
+  #sidebar header .me { font-weight: 600; }
+  #sidebar header .me small { display: block; color: var(--subtext); font-weight: 400; }
+  #contacts { flex: 1; overflow-y: auto; padding: 8px; }
+  .contact {
+    display: flex; align-items: center; gap: 12px;
+    padding: 10px 12px; border-radius: 12px; cursor: pointer;
+  }
+  .contact:hover, .contact.active { background: var(--card); }
+  .avatar {
+    width: 40px; height: 40px; border-radius: 50%;
+    background: var(--bubble-in); color: var(--text);
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 600; flex-shrink: 0;
+  }
+  .contact.active .avatar { background: var(--accent); }
+  .contact .cmeta { flex: 1; min-width: 0; }
+  .contact .crow { display: flex; align-items: center; gap: 7px; }
+  .contact .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .contact .ctime { margin-left: auto; font-size: 11px; color: var(--subtext); }
+  .contact .preview {
+    font-size: 12px; color: var(--subtext);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .badge {
+    background: var(--accent); color: var(--text);
+    font-size: 11px; font-weight: 600; min-width: 20px; height: 20px;
+    border-radius: 10px; display: flex; align-items: center;
+    justify-content: center; padding: 0 6px; flex-shrink: 0;
+  }
+  .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--offline); flex-shrink: 0; }
+  .dot.on { background: var(--online); }
+
+  #chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+  #chat-header {
+    background: var(--header); border-bottom: 2px solid var(--accent);
+    padding: 16px 20px; display: flex; align-items: center; gap: 10px;
+  }
+  #chat-header .status { color: var(--subtext); font-size: 13px; }
+
+  #messages {
+    flex: 1; overflow-y: auto; padding: 20px;
+    display: flex; flex-direction: column; gap: 4px;
+  }
+  #messages .empty { color: var(--subtext); margin: auto; }
+  .msg { max-width: 60%; display: flex; flex-direction: column; margin-bottom: 10px; }
+  .msg .bubble {
+    padding: 10px 14px; border-radius: 14px;
+    background: var(--bubble-in); word-wrap: break-word; white-space: pre-wrap;
+  }
+  .msg .time { font-size: 11px; color: var(--subtext); margin-top: 3px; }
+  .msg.mine { align-self: flex-end; align-items: flex-end; }
+  .msg.mine .bubble { background: var(--accent); }
+
+  #composer {
+    display: flex; gap: 10px; padding: 14px 20px 18px;
+  }
+  #composer input { border-radius: 14px; }
+  #composer button {
+    background: var(--accent); color: var(--text);
+    width: 46px; border-radius: 50%; font-size: 18px; flex-shrink: 0;
+  }
+  #composer button:hover { background: var(--accent-dk); }
+</style>
+</head>
+<body>
+
+<div id="login">
+  <div class="box">
+    <h1>Vita<span>Chat</span></h1>
+    <div class="sub">Web-Testclient</div>
+    <input id="l-user" placeholder="Benutzername" autocomplete="username">
+    <input id="l-pass" placeholder="Passwort" type="password" autocomplete="current-password">
+    <button class="btn" id="l-login">Anmelden</button>
+    <button class="link" id="l-register">Neu hier? Registrieren</button>
+    <div id="login-status"></div>
+  </div>
+</div>
+
+<div id="app">
+  <div id="sidebar">
+    <header>
+      <div class="me"><span id="me-name"></span><small>online</small></div>
+      <button class="link" id="logout">Logout</button>
+    </header>
+    <div id="contacts"></div>
+  </div>
+  <div id="chat">
+    <div id="chat-header">
+      <strong id="chat-name">Kontakt w&auml;hlen</strong>
+      <span class="dot" id="chat-dot"></span>
+      <span class="status" id="chat-status"></span>
+    </div>
+    <div id="messages"><div class="empty">W&auml;hle links einen Kontakt aus</div></div>
+    <div id="composer">
+      <input id="c-text" placeholder="Nachricht schreiben ..." disabled>
+      <button id="c-send" disabled>&#10148;</button>
+    </div>
+  </div>
+</div>
+
+<script>
+const API = '/api';   // gleiche Domain (Vercel) -> kein CORS-Thema
+
+let token = sessionStorage.getItem('vc_token') || '';
+let myName = sessionStorage.getItem('vc_name') || '';
+let chatWith = '';
+let sinceId = 0;
+let contactTimer = null, msgTimer = null;
+
+const $ = id => document.getElementById(id);
+
+/* ---------- API: zeilenbasiertes Pipe-Protokoll parsen ---------- */
+async function api(path, params = {}, post = false) {
+  const body = new URLSearchParams(params);
+  const res = post
+    ? await fetch(`${API}/${path}`, { method: 'POST', body })
+    : await fetch(`${API}/${path}?${body}`);
+  const text = await res.text();
+  return text.trim().split('\n').filter(Boolean).map(l => l.split('|'));
+}
+
+function esc(s) {
+  const d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+function fmtRel(ts) {
+  const d = new Date(ts * 1000), n = new Date();
+  if (d.toDateString() === n.toDateString())
+    return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+  return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
+}
+function fmtTime(ts) {
+  return new Date(ts * 1000).toLocaleTimeString('de-DE',
+    { hour: '2-digit', minute: '2-digit' });
+}
+
+/* ---------- Login / Registrieren ---------- */
+function setLoginStatus(msg, isErr) {
+  const el = $('login-status');
+  el.textContent = msg;
+  el.className = isErr ? 'err' : 'ok';
+}
+
+async function doLogin() {
+  const user = $('l-user').value.trim(), pass = $('l-pass').value;
+  if (!user || !pass) return setLoginStatus('Name und Passwort eingeben', true);
+  const [line] = await api('login', { user, pass }, true);
+  if (line?.[0] === 'OK') {
+    token = line[1]; myName = user;
+    sessionStorage.setItem('vc_token', token);
+    sessionStorage.setItem('vc_name', myName);
+    enterApp();
+  } else {
+    setLoginStatus(line?.[1] || 'Fehler', true);
+  }
+}
+
+async function doRegister() {
+  const user = $('l-user').value.trim(), pass = $('l-pass').value;
+  if (!user || !pass) return setLoginStatus('Name und Passwort eingeben', true);
+  const [line] = await api('register', { user, pass }, true);
+  if (line?.[0] === 'OK') setLoginStatus('Registriert! Jetzt anmelden.', false);
+  else setLoginStatus(line?.[1] || 'Fehler', true);
+}
+
+function enterApp() {
+  $('login').style.display = 'none';
+  $('app').classList.add('active');
+  $('me-name').textContent = myName;
+  loadContacts();
+  contactTimer = setInterval(loadContacts, 10000);
+}
+
+function doLogout() {
+  sessionStorage.clear();
+  token = ''; chatWith = ''; sinceId = 0;
+  clearInterval(contactTimer); clearInterval(msgTimer);
+  location.reload();
+}
+
+/* ---------- Kontakte ---------- */
+async function loadContacts() {
+  const lines = await api('contacts', { token });
+  const box = $('contacts');
+  box.innerHTML = '';
+  let currentOnline = null;
+
+  for (const l of lines) {
+    if (l[0] !== 'USER') continue;
+    const [, name, online, unread = '0', lastTs = '0', preview = ''] = l;
+    if (name === chatWith) currentOnline = online === '1';
+
+    const div = document.createElement('div');
+    div.className = 'contact' + (name === chatWith ? ' active' : '');
+    div.innerHTML = `
+      <div class="avatar">${esc(name[0].toUpperCase())}</div>
+      <div class="cmeta">
+        <div class="crow"><span class="name">${esc(name)}</span>
+             <span class="dot ${online === '1' ? 'on' : ''}"></span>
+             <span class="ctime">${lastTs > 0 ? fmtRel(+lastTs) : ''}</span></div>
+        <div class="preview">${esc(preview)}</div>
+      </div>
+      ${+unread > 0 ? `<div class="badge">${+unread > 99 ? 99 : unread}</div>` : ''}`;
+    div.onclick = () => openChat(name);
+    box.appendChild(div);
+  }
+  if (!box.children.length)
+    box.innerHTML = '<div style="padding:16px;color:var(--subtext)">Noch keine anderen Nutzer</div>';
+
+  if (currentOnline !== null) {
+    $('chat-dot').className = 'dot' + (currentOnline ? ' on' : '');
+    $('chat-status').textContent = currentOnline ? 'online' : 'offline';
+  }
+}
+
+/* ---------- Chat ---------- */
+function openChat(name) {
+  chatWith = name;
+  sinceId = 0;
+  $('chat-name').textContent = name;
+  $('messages').innerHTML = '';
+  $('c-text').disabled = false;
+  $('c-send').disabled = false;
+  $('c-text').focus();
+  loadContacts();           // Markierung + Online-Status aktualisieren
+  clearInterval(msgTimer);
+  pollMessages();
+  msgTimer = setInterval(pollMessages, 3000);
+}
+
+async function pollMessages() {
+  if (!chatWith) return;
+  const lines = await api('poll', { token, with: chatWith, since: sinceId });
+  const box = $('messages');
+  let added = false;
+
+  for (const l of lines) {
+    if (l[0] !== 'MSG') continue;
+    const id = parseInt(l[1]), from = l[2], ts = parseInt(l[3]);
+    const text = l.slice(4).join('|');       // falls '¦'-ersetzte Pipes doch auftauchen
+    if (id > sinceId) sinceId = id;
+
+    const div = document.createElement('div');
+    div.className = 'msg' + (from === myName ? ' mine' : '');
+    div.innerHTML = `<div class="bubble">${esc(text)}</div>
+                     <div class="time">${fmtTime(ts)}</div>`;
+    box.appendChild(div);
+    added = true;
+  }
+  if (added) box.scrollTop = box.scrollHeight;
+  if (!box.children.length)
+    box.innerHTML = '<div class="empty">Noch keine Nachrichten &ndash; schreib die erste!</div>';
+}
+
+async function sendMessage() {
+  const input = $('c-text');
+  const text = input.value.trim();
+  if (!text || !chatWith) return;
+  input.value = '';
+  const emptyHint = $('messages').querySelector('.empty');
+  if (emptyHint) emptyHint.remove();
+  await api('send', { token, to: chatWith, text }, true);
+  pollMessages();
+}
+
+/* ---------- Events ---------- */
+$('l-login').onclick = doLogin;
+$('l-register').onclick = doRegister;
+$('l-pass').addEventListener('keydown', e => e.key === 'Enter' && doLogin());
+$('logout').onclick = doLogout;
+$('c-send').onclick = sendMessage;
+$('c-text').addEventListener('keydown', e => e.key === 'Enter' && sendMessage());
+
+/* Session wiederherstellen */
+if (token && myName) enterApp();
+</script>
+</body>
+</html>