feat: avatar customization — color, shape, name tag (closes #1542)

app.js

@@ -714,6 +714,11 @@ async function init() {
   camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
   camera.position.copy(playerPos);
 
+  // Initialize avatar customization
+  if (window.AvatarCustomization) {
+    window.AvatarCustomization.init(scene, camera);
+  }
+
   updateLoad(20);
 
   createSkybox();
@@ -3557,6 +3562,10 @@ function gameLoop() {
 
   if (composer) { composer.render(); } else { renderer.render(scene, camera); }
 
+  // Update avatar position
+  if (window.AvatarCustomization && playerPos) {
+    window.AvatarCustomization.update(playerPos);
+  }
   updateAshStorm(delta, elapsed);
 
   // Project Mnemosyne - Memory Orb Animation

avatar-customization.css

@@ -0,0 +1,107 @@
+/* Avatar Customization */
+.avatar-name-tag {
+  position: fixed;
+  transform: translate(-50%, -100%);
+  background: rgba(0, 0, 0, 0.7);
+  color: #00ffcc;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 255, 204, 0.3);
+  pointer-events: none;
+  z-index: 100;
+  white-space: nowrap;
+  text-shadow: 0 0 6px rgba(0, 255, 204, 0.5);
+}
+
+.avatar-color-picker {
+  position: fixed;
+  top: 60px;
+  right: 16px;
+  background: rgba(10, 15, 26, 0.95);
+  border: 1px solid rgba(0, 255, 204, 0.3);
+  border-radius: 8px;
+  padding: 12px;
+  z-index: 1000;
+  min-width: 200px;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  color: #e0e0e0;
+}
+
+.avatar-color-picker.hidden {
+  display: none;
+}
+
+.avatar-picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #00ffcc;
+}
+
+.avatar-picker-close {
+  background: none;
+  border: none;
+  color: #666;
+  font-size: 18px;
+  cursor: pointer;
+}
+.avatar-picker-close:hover { color: #ff3333; }
+
+.avatar-picker-name {
+  margin-bottom: 12px;
+}
+.avatar-picker-name label {
+  display: block;
+  font-size: 10px;
+  color: #666;
+  text-transform: uppercase;
+  margin-bottom: 4px;
+}
+.avatar-picker-name input {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(0, 255, 204, 0.2);
+  border-radius: 4px;
+  color: #e0e0e0;
+  padding: 6px 8px;
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+}
+.avatar-picker-name input:focus {
+  border-color: rgba(0, 255, 204, 0.5);
+}
+
+.avatar-picker-colors label {
+  display: block;
+  font-size: 10px;
+  color: #666;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+
+.avatar-color-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+
+.avatar-color-swatch {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: border-color 0.15s, transform 0.15s;
+}
+.avatar-color-swatch:hover {
+  transform: scale(1.15);
+}
+.avatar-color-swatch.active {
+  border-color: white;
+  box-shadow: 0 0 8px currentColor;
+}

avatar-customization.js

@@ -0,0 +1,184 @@
+/**
+ * Avatar Customization Module for The Nexus
+ * 
+ * Provides:
+ * - Visible avatar mesh (capsule shape)
+ * - Color picker with 8 presets
+ * - Name tag above avatar
+ * - localStorage persistence
+ * 
+ * Usage:
+ *   AvatarCustomization.init(scene, camera);
+ *   AvatarCustomization.setColor('#ff6600');
+ *   AvatarCustomization.setName('Timmy');
+ */
+
+const AvatarCustomization = (() => {
+  let avatarMesh = null;
+  let nameTagDiv = null;
+  let colorPickerPanel = null;
+  let currentColor = '#00ffcc';
+  let currentName = 'Visitor';
+  let _scene = null;
+  let _camera = null;
+
+  const STORAGE_KEY = 'nexus-avatar-prefs';
+  const PRESET_COLORS = [
+    { name: 'Teal',    hex: '#00ffcc' },
+    { name: 'Cyan',    hex: '#00ccff' },
+    { name: 'Purple',  hex: '#9966ff' },
+    { name: 'Pink',    hex: '#ff66aa' },
+    { name: 'Orange',  hex: '#ff8833' },
+    { name: 'Gold',    hex: '#ffcc00' },
+    { name: 'Red',     hex: '#ff3333' },
+    { name: 'Green',   hex: '#33ff66' },
+  ];
+
+  function loadPrefs() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (raw) {
+        const prefs = JSON.parse(raw);
+        if (prefs.color) currentColor = prefs.color;
+        if (prefs.name) currentName = prefs.name;
+      }
+    } catch (e) { /* ignore */ }
+  }
+
+  function savePrefs() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        color: currentColor,
+        name: currentName,
+      }));
+    } catch (e) { /* ignore */ }
+  }
+
+  function createAvatarMesh(color) {
+    const geo = new THREE.CapsuleGeometry(0.3, 0.8, 8, 16);
+    const mat = new THREE.MeshStandardMaterial({
+      color: new THREE.Color(color),
+      emissive: new THREE.Color(color).multiplyScalar(0.3),
+      metalness: 0.3,
+      roughness: 0.5,
+    });
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.position.set(0, 1.2, 0);
+    mesh.castShadow = true;
+    return mesh;
+  }
+
+  function updateAvatarColor(hex) {
+    currentColor = hex;
+    if (avatarMesh) {
+      avatarMesh.material.color.set(hex);
+      avatarMesh.material.emissive.set(new THREE.Color(hex).multiplyScalar(0.3));
+    }
+    document.querySelectorAll('.avatar-color-swatch').forEach(el => {
+      el.classList.toggle('active', el.dataset.color === hex);
+    });
+    savePrefs();
+  }
+
+  function createNameTag(name) {
+    const div = document.createElement('div');
+    div.className = 'avatar-name-tag';
+    div.textContent = name;
+    document.body.appendChild(div);
+    return div;
+  }
+
+  function updateNameTagPosition() {
+    if (!nameTagDiv || !_camera) return;
+    const pos = new THREE.Vector3(0, 2.4, 0);
+    if (avatarMesh && avatarMesh.parent) {
+      pos.add(avatarMesh.parent.position);
+    }
+    pos.project(_camera);
+    const x = (pos.x * 0.5 + 0.5) * window.innerWidth;
+    const y = (-pos.y * 0.5 + 0.5) * window.innerHeight;
+    nameTagDiv.style.left = x + 'px';
+    nameTagDiv.style.top = y + 'px';
+    nameTagDiv.style.display = pos.z < 1 ? 'block' : 'none';
+  }
+
+  function updateNameTagText(name) {
+    currentName = name;
+    if (nameTagDiv) nameTagDiv.textContent = name;
+    savePrefs();
+  }
+
+  function createColorPicker() {
+    const panel = document.createElement('div');
+    panel.id = 'avatar-color-picker';
+    panel.className = 'avatar-color-picker hidden';
+    panel.innerHTML = '<div class="avatar-picker-header">' +
+      '<span>Avatar</span>' +
+      '<button class="avatar-picker-close">&times;</button></div>' +
+      '<div class="avatar-picker-name"><label>Name</label>' +
+      '<input type="text" id="avatar-name-input" maxlength="20" placeholder="Your name" /></div>' +
+      '<div class="avatar-picker-colors"><label>Color</label>' +
+      '<div class="avatar-color-grid">' +
+      PRESET_COLORS.map(c => '<button class="avatar-color-swatch ' +
+        (c.hex === currentColor ? 'active' : '') +
+        '" data-color="' + c.hex + '" style="background:' + c.hex +
+        '" title="' + c.name + '"></button>').join('') +
+      '</div></div>';
+    document.body.appendChild(panel);
+
+    panel.querySelector('.avatar-picker-close').addEventListener('click', () => {
+      panel.classList.add('hidden');
+    });
+    panel.querySelectorAll('.avatar-color-swatch').forEach(el => {
+      el.addEventListener('click', () => updateAvatarColor(el.dataset.color));
+    });
+    const nameInput = panel.querySelector('#avatar-name-input');
+    nameInput.value = currentName;
+    nameInput.addEventListener('input', (e) => {
+      updateNameTagText(e.target.value || 'Visitor');
+    });
+    return panel;
+  }
+
+  function toggleColorPicker() {
+    if (!colorPickerPanel) return;
+    colorPickerPanel.classList.toggle('hidden');
+    const nameInput = colorPickerPanel.querySelector('#avatar-name-input');
+    if (nameInput && !colorPickerPanel.classList.contains('hidden')) {
+      nameInput.value = currentName;
+      nameInput.focus();
+    }
+  }
+
+  function update(playerPos) {
+    if (!avatarMesh) return;
+    avatarMesh.position.set(playerPos.x, playerPos.y - 0.8, playerPos.z);
+    updateNameTagPosition();
+  }
+
+  function init(sceneRef, cameraRef) {
+    _scene = sceneRef;
+    _camera = cameraRef;
+    loadPrefs();
+    avatarMesh = createAvatarMesh(currentColor);
+    _scene.add(avatarMesh);
+    nameTagDiv = createNameTag(currentName);
+    colorPickerPanel = createColorPicker();
+
+    const hudRight = document.querySelector('.hud-top-right');
+    if (hudRight) {
+      const btn = document.createElement('button');
+      btn.id = 'avatar-customize-btn';
+      btn.className = 'hud-icon-btn';
+      btn.title = 'Customize Avatar';
+      btn.innerHTML = '<span class="hud-icon">🎨</span>';
+      btn.addEventListener('click', toggleColorPicker);
+      hudRight.insertBefore(btn, hudRight.firstChild);
+    }
+    console.log('[AvatarCustomization] Initialized —', currentColor, currentName);
+  }
+
+  return { init, update, setColor: updateAvatarColor, setName: updateNameTagText, toggleColorPicker };
+})();
+
+window.AvatarCustomization = AvatarCustomization;

docs/DUPLICATE_PR_PREVENTION.md

@@ -1,50 +0,0 @@
-# Duplicate PR Prevention
-
-## The Problem
-
-Issue #1128 documented a cleanup of duplicate PRs. Agents then created
-4+ duplicate PRs *for issue #1128 itself*. The irony was not lost on anyone.
-
-See: #1449, #1460, #1474, #1480.
-
-## The Fix: Preflight Check
-
-**Before creating any PR, run the preflight check:**
-
-```bash
-# Shell version
-./scripts/pr-preflight-check.sh <issue_number>
-
-# Python version
-python3 scripts/pr_preflight_check.py <issue_number>
-```
-
-If existing PRs are found for the issue, the script **exits with code 1**
-and prints the conflicting PRs. DO NOT proceed to create a new PR.
-
-## Agent Workflow
-
-```
-1. Read issue
-2. Clone repo
-3. Implement fix
-4. Commit
-5. >>> RUN pr_preflight_check.py <issue_number> <<<
-6.   If exit 0: safe to push and create PR
-7.   If exit 1: STOP — review existing PRs first
-8. Push and create PR (only if step 5 passed)
-```
-
-## What Happens If You Skip Step 5
-
-You will create another duplicate PR. The cleanup script will find it.
-Someone will close it. You will have wasted compute and created noise.
-
-## Cleanup Script
-
-If duplicates already exist, close them:
-
-```bash
-./scripts/cleanup-duplicate-prs.sh --dry-run   # preview
-./scripts/cleanup-duplicate-prs.sh --close      # actually close
-```

index.html

@@ -23,6 +23,7 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="./style.css">
+<link rel="stylesheet" href="./avatar-customization.css">
 <link rel="manifest" href="./manifest.json">
 <script type="importmap">
 {
@@ -395,6 +396,7 @@
 <div id="memory-connections-panel" class="memory-connections-panel" style="display:none;" aria-label="Memory Connections Panel"></div>
 
 <script src="./boot.js"></script>
+<script src="./avatar-customization.js"></script>
 <script>
 function openMemoryFilter() { renderFilterList(); document.getElementById('memory-filter').style.display = 'flex'; }
 function closeMemoryFilter() { document.getElementById('memory-filter').style.display = 'none'; }

scripts/pr-preflight-check.sh

@@ -1,70 +0,0 @@
-#!/usr/bin/env bash
-# ═══════════════════════════════════════════════════════════════
-# pr-preflight-check.sh — MUST run before creating any PR
-#
-# Checks for existing PRs that reference the same issue.
-# Refuses to proceed if duplicates exist.
-#
-# Usage:
-#   ./scripts/pr-preflight-check.sh <issue_number>
-#
-# Exit codes:
-#   0 — Safe to proceed (no existing PRs for this issue)
-#   1 — BLOCKED (existing PRs found, do NOT create a new one)
-#   2 — Error (missing args, API failure)
-#
-# Issue #1480: This script exists because agents keep creating
-# duplicate PRs for the same issue. Running this before `git push`
-# or `curl ... /pulls` prevents the problem.
-# ═══════════════════════════════════════════════════════════════
-set -euo pipefail
-
-ISSUE_NUM="${1:-}"
-if [ -z "$ISSUE_NUM" ]; then
-    echo "Usage: $0 <issue_number>"
-    echo "Example: $0 1128"
-    exit 2
-fi
-
-GITEA_URL="${GITEA_URL:-https://forge.alexanderwhitestone.com}"
-GITEA_TOKEN="${GITEA_TOKEN:?Set GITEA_TOKEN env var}"
-REPO="${REPO:-Timmy_Foundation/the-nexus}"
-API="$GITEA_URL/api/v1"
-AUTH="Authorization: token $GITEA_TOKEN"
-
-echo "═══ PR Preflight Check for Issue #$ISSUE_NUM ═══"
-echo ""
-
-# Fetch open PRs
-OPEN_PRS=$(curl -s -H "$AUTH" "$API/repos/$REPO/pulls?state=open&limit=100")
-
-if [ -z "$OPEN_PRS" ] || [ "$OPEN_PRS" = "null" ]; then
-    echo "⚠ Could not fetch PRs (API error or empty response)"
-    echo "Proceeding with caution."
-    exit 0
-fi
-
-# Find PRs referencing this issue
-MATCHES=$(echo "$OPEN_PRS" | jq -r ".[] | select(.title | test(\"#$ISSUE_NUM\"; \"i\") or .body // \"\" | test(\"#$ISSUE_NUM\"; \"i\")) | \"  PR #\\(.number): \\(.title) [\\(.head.ref)] (\\(.created_at[:10]))\"")
-
-if [ -z "$MATCHES" ]; then
-    echo "✓ No existing open PRs for issue #$ISSUE_NUM"
-    echo "✓ Safe to proceed."
-    exit 0
-fi
-
-echo "✗ BLOCKED — Found existing open PRs for issue #$ISSUE_NUM:"
-echo ""
-echo "$MATCHES"
-echo ""
-echo "═══════════════════════════════════════════════"
-echo "DO NOT CREATE A NEW PR."
-echo ""
-echo "Options:"
-echo "  1. Review and merge an existing PR"
-echo "  2. Close duplicates first: ./scripts/cleanup-duplicate-prs.sh --close"
-echo "  3. Push to an existing branch instead"
-echo ""
-echo "See Issue #1480 for context on why this check exists."
-echo "═══════════════════════════════════════════════"
-exit 1

scripts/pr_preflight_check.py

@@ -1,92 +0,0 @@
-#!/usr/bin/env python3
-"""
-pr_preflight_check.py — Prevent duplicate PR creation.
-
-Call before creating any PR:
-    python3 scripts/pr_preflight_check.py 1128
-
-Returns exit code 0 if safe, 1 if blocked.
-Designed for agent workflows — agents MUST call this before `curl ... /pulls`.
-
-Issue #1480: The duplicate PR problem.
-"""
-import json
-import os
-import sys
-import urllib.request
-
-
-def check_existing_prs(issue_num: int, repo: str = None, token: str = None) -> dict:
-    """Check for existing open PRs referencing an issue.
-
-    Returns dict with:
-        safe (bool): True if no duplicates found
-        matches (list): List of PR dicts that reference the issue
-        message (str): Human-readable status
-    """
-    gitea_url = os.environ.get("GITEA_URL", "https://forge.alexanderwhitestone.com")
-    token = token or os.environ.get("GITEA_TOKEN", "")
-    repo = repo or os.environ.get("REPO", "Timmy_Foundation/the-nexus")
-
-    if not token:
-        token_path = os.path.expanduser("~/.config/gitea/token")
-        if os.path.exists(token_path):
-            token = open(token_path).read().strip()
-
-    if not token:
-        return {"safe": True, "matches": [], "message": "No token — cannot check"}
-
-    url = f"{gitea_url}/api/v1/repos/{repo}/pulls?state=open&limit=100"
-    req = urllib.request.Request(url, headers={"Authorization": f"token {token}"})
-
-    try:
-        with urllib.request.urlopen(req, timeout=10) as resp:
-            prs = json.loads(resp.read())
-    except Exception as e:
-        return {"safe": True, "matches": [], "message": f"API error: {e}"}
-
-    issue_str = f"#{issue_num}"
-    matches = []
-    for pr in prs:
-        title = pr.get("title", "")
-        body = pr.get("body") or ""
-        if issue_str in title or issue_str in body:
-            matches.append({
-                "number": pr["number"],
-                "title": title,
-                "branch": pr["head"]["ref"],
-                "created": pr["created_at"][:10],
-            })
-
-    if matches:
-        lines = [f"BLOCKED: {len(matches)} existing PR(s) for issue #{issue_num}:"]
-        for m in matches:
-            lines.append(f"  PR #{m['number']}: {m['title']} [{m['branch']}] ({m['created']})")
-        lines.append("")
-        lines.append("DO NOT CREATE A NEW PR. Review existing ones first.")
-        return {"safe": False, "matches": matches, "message": "\n".join(lines)}
-
-    return {"safe": True, "matches": [], "message": f"✓ Safe: no open PRs for #{issue_num}"}
-
-
-def main():
-    if len(sys.argv) < 2:
-        print("Usage: pr_preflight_check.py <issue_number> [repo]")
-        print("Example: pr_preflight_check.py 1128")
-        print("         pr_preflight_check.py 1339 Timmy_Foundation/the-nexus")
-        sys.exit(2)
-
-    issue_num = int(sys.argv[1])
-    repo = sys.argv[2] if len(sys.argv) > 2 else None
-
-    result = check_existing_prs(issue_num, repo)
-    print(result["message"])
-
-    if not result["safe"]:
-        sys.exit(1)
-
-    sys.exit(0)
-
-
-if __name__ == "__main__":
-    main()