fix: add error state fallback for perpetual INITIALIZING screen

When main.js fails to load (network error, CORS, etc.), users were stuck on "INITIALIZING" forever with no error or recovery option. Changes: - Add inline 8s timeout that shows error state if main.js never boots - Show /api/ui fallback link when workshop is offline - Update offline message to "WORKSHOP OFFLINE" Fixes #7 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
[claude] fix: Workshop connection HUD with timeout and retry (#5 ) (#10 )
2026-03-22 19:01:09 -04:00 · 2026-03-22 22:55:41 +00:00 · 2026-03-22 22:06:42 +00:00 · 2026-03-18 21:46:11 -04:00
5 changed files with 349 additions and 44 deletions
--- a/404.html
+++ b/404.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Lost in the Tower</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: #0a0a0f;
+      color: #e0d8c8;
+      font-family: Georgia, 'Times New Roman', serif;
+    }
+
+    h1 {
+      font-size: 1.4rem;
+      font-weight: normal;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      margin-bottom: 1.5rem;
+      color: #8a7f6a;
+    }
+
+    p {
+      font-size: 0.9rem;
+      color: #6a6050;
+      margin-bottom: 2rem;
+    }
+
+    a {
+      color: #8a7f6a;
+      text-decoration: none;
+      padding: 0.8rem 2rem;
+      border: 1px solid #2a2520;
+      transition: border-color 0.3s, color 0.3s;
+    }
+
+    a:hover {
+      border-color: #8a7f6a;
+      color: #fff;
+    }
+  </style>
+</head>
+<body>
+  <h1>Lost in the Tower</h1>
+  <p>This room doesn't exist.</p>
+  <a href="/">Return to the Entry Hall</a>
+</body>
+</html>
--- a/blog/feed.xml
+++ b/blog/feed.xml
@@ -4,7 +4,7 @@
  <link href="https://alexanderwhitestone.com/blog/"/>
  <link rel="self" href="https://alexanderwhitestone.com/blog/feed.xml"/>
  <id>https://alexanderwhitestone.com/blog/</id>
-  <updated>2026-03-19T01:42:22Z</updated>
+  <updated>2026-03-19T01:45:33Z</updated>
  <author>
    <name>Alexander Whitestone</name>
  </author>
--- a/scripts/aw-post
+++ b/scripts/aw-post
@@ -2,51 +2,104 @@
 # aw-post — Quick-post a scroll from the command line
 #
 # Usage:
-#   aw-post "Title of the Post"
-#   aw-post "Title" < body.md
-#   echo "Post body here" | aw-post "Title"
+#   aw-post "Title"                      # Create empty post, open for editing
+#   aw-post "Title" < body.md            # Pipe body from stdin
+#   echo "Post body" | aw-post "Title"   # Pipe body from stdin
+#   aw-post --file thoughts.md           # Post from a file (title from first line)
+#   aw-post --from-x "Tweet text here"   # Port an X/Twitter post
 #
-# Creates a new markdown file in blog/posts/ with frontmatter,
-# then rebuilds the blog index, post pages, and RSS feed.
+# Creates a markdown file in blog/posts/, rebuilds the blog.

 set -euo pipefail

 REPO_DIR="$(cd "$(dirname "$0")/.." && pwd)"
 BLOG_DIR="${REPO_DIR}/blog/posts"
-
-if [ $# -lt 1 ]; then
-  echo "Usage: aw-post \"Title of the Post\""
-  echo "  Pipe or redirect body content via stdin."
-  exit 1
-fi
-
-TITLE="$1"
 DATE=$(date +%Y-%m-%d)
-SLUG=$(echo "$TITLE" | tr '[:upper:]' '[:lower:]' | tr ' ' '-' | tr -cd 'a-z0-9-')
-FILENAME="${DATE}-${SLUG}.md"
-FILEPATH="${BLOG_DIR}/${FILENAME}"

-if [ -f "$FILEPATH" ]; then
-  echo "Error: $FILEPATH already exists"
-  exit 1
-fi
+slugify() {
+  echo "$1" | tr '[:upper:]' '[:lower:]' | tr ' ' '-' | tr -cd 'a-z0-9-' | head -c 60
+}

-# Read body from stdin if available
-BODY=""
-if [ ! -t 0 ]; then
-  BODY=$(cat)
-fi
+create_post() {
+  local title="$1"
+  local body="$2"
+  local slug
+  slug=$(slugify "$title")
+  local filename="${DATE}-${slug}.md"
+  local filepath="${BLOG_DIR}/${filename}"

-cat > "$FILEPATH" << EOF
+  if [ -f "$filepath" ]; then
+    echo "Error: $filepath already exists"
+    exit 1
+  fi
+
+  cat > "$filepath" << EOF
 ---
-title: "${TITLE}"
+title: "${title}"
 date: ${DATE}
 ---

-${BODY}
+${body}
 EOF

-echo "Created: ${FILEPATH}"
+  echo "Created: ${filepath}"
+  python3 "${REPO_DIR}/scripts/build.py"
+}

-# Rebuild the blog
-python3 "${REPO_DIR}/scripts/build.py"
+# Parse arguments
+case "${1:-}" in
+  --file)
+    # Post from a file — title from first non-empty line
+    if [ -z "${2:-}" ] || [ ! -f "${2:-}" ]; then
+      echo "Usage: aw-post --file <path-to-markdown>"
+      exit 1
+    fi
+    BODY=$(cat "$2")
+    # Extract title: first line starting with # or first non-empty line
+    TITLE=$(echo "$BODY" | grep -m1 '^#' | sed 's/^#* *//' || echo "$BODY" | grep -m1 '.' || echo "Untitled")
+    if [ -z "$TITLE" ]; then
+      TITLE="Untitled"
+    fi
+    # Strip the title line from body if it was a markdown header
+    BODY=$(echo "$BODY" | sed '1{/^#/d;}')
+    create_post "$TITLE" "$BODY"
+    ;;
+
+  --from-x)
+    # Port an X/Twitter post — the text becomes both title and body
+    if [ -z "${2:-}" ]; then
+      echo "Usage: aw-post --from-x \"Tweet text here\""
+      exit 1
+    fi
+    TEXT="$2"
+    # Title: first 60 chars, cleaned up
+    TITLE=$(echo "$TEXT" | head -1 | cut -c1-60 | sed 's/[[:space:]]*$//')
+    create_post "$TITLE" "$TEXT"
+    ;;
+
+  --help|-h)
+    echo "aw-post — Quick-post a scroll to The Scrolls"
+    echo ""
+    echo "Usage:"
+    echo "  aw-post \"Title\"                      Create a post (body from stdin)"
+    echo "  aw-post --file thoughts.md            Post from a markdown file"
+    echo "  aw-post --from-x \"Tweet text\"         Port an X/Twitter post"
+    echo "  aw-post --help                        Show this help"
+    ;;
+
+  "")
+    echo "Usage: aw-post \"Title of the Post\""
+    echo "  See: aw-post --help"
+    exit 1
+    ;;
+
+  *)
+    # Standard mode: title as arg, body from stdin
+    TITLE="$1"
+    BODY=""
+    if [ ! -t 0 ]; then
+      BODY=$(cat)
+    fi
+    create_post "$TITLE" "$BODY"
+    ;;
+esac
--- a/world/index.html
+++ b/world/index.html
@@ -19,8 +19,57 @@
      color: #6a6050;
    }
    .placeholder h1 { font-size: 1.2rem; font-weight: normal; margin-bottom: 1rem; }
-    .placeholder p { font-size: 0.85rem; }
+    .placeholder p { font-size: 0.85rem; margin-bottom: 0.5rem; }
    .placeholder a { color: #8a7f6a; }
+
+    /* Connection status HUD */
+    #status-hud {
+      position: fixed;
+      top: 12px;
+      right: 12px;
+      background: rgba(10, 10, 15, 0.85);
+      border: 1px solid #2a2520;
+      border-radius: 6px;
+      padding: 8px 14px;
+      font-family: 'Courier New', monospace;
+      font-size: 0.75rem;
+      color: #6a6050;
+      z-index: 100;
+      min-width: 180px;
+    }
+    #status-hud .status-line {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 4px;
+    }
+    #status-hud .status-line:last-child { margin-bottom: 0; }
+    #status-hud .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    #status-hud .dot.connecting { background: #b8860b; animation: pulse 1.2s ease-in-out infinite; }
+    #status-hud .dot.online { background: #4a9; }
+    #status-hud .dot.offline { background: #a44; }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.3; }
+    }
+    #retry-btn {
+      display: none;
+      margin-top: 6px;
+      padding: 3px 10px;
+      background: #2a2520;
+      border: 1px solid #4a4030;
+      border-radius: 3px;
+      color: #8a7f6a;
+      font-family: 'Courier New', monospace;
+      font-size: 0.7rem;
+      cursor: pointer;
+    }
+    #retry-btn:hover { background: #3a3530; color: #c0b8a8; }
  </style>
 </head>
 <body>
@@ -31,7 +80,45 @@
      <p><a href="/">← Back to the Tower</a></p>
    </div>
  </div>
+
+  <div id="status-hud">
+    <div class="status-line">
+      <span class="dot connecting" id="status-dot"></span>
+      <span id="status-text">INITIALIZING</span>
+    </div>
+    <div class="status-line">AGENTS: <span id="agent-count">0</span></div>
+    <button id="retry-btn">Retry connection</button>
+    <a id="fallback-link" href="/api/ui" style="display:none; margin-top:6px; color:#8a7f6a; font-size:0.7rem;">Open API dashboard →</a>
+  </div>
+
+  <!-- Reject unknown sub-paths: only /world/ is valid -->
+  <script>
+    (function() {
+      var path = window.location.pathname.replace(/\/+$/, '') || '/';
+      if (path !== '/world') {
+        window.location.replace('/404.html');
+      }
+    })();
+  </script>
+  <!-- Fallback: if main.js fails to load, don't leave user on INITIALIZING forever -->
+  <script>
+    (function() {
+      var INIT_TIMEOUT_MS = 8000;
+      window.__workshopBooted = false;
+      setTimeout(function() {
+        if (window.__workshopBooted) return;
+        var dot = document.getElementById('status-dot');
+        var text = document.getElementById('status-text');
+        var btn = document.getElementById('retry-btn');
+        var fallback = document.getElementById('fallback-link');
+        if (dot) { dot.className = 'dot offline'; }
+        if (text) { text.textContent = 'WORKSHOP UNREACHABLE'; }
+        if (btn) { btn.style.display = 'block'; }
+        if (fallback) { fallback.style.display = 'block'; }
+      }, INIT_TIMEOUT_MS);
+    })();
+  </script>
  <!-- Three.js scene will mount to #scene -->
-  <!-- <script type="module" src="main.js"></script> -->
+  <script type="module" src="main.js"></script>
 </body>
 </html>
--- a/world/main.js
+++ b/world/main.js
@@ -1,20 +1,130 @@
 /**
 * The Workshop — Three.js scene bootstrap
 *
- * This file will initialize the 3D world where Timmy lives.
- * Currently a placeholder until tech decisions are made:
- *   - 3D engine confirmed (Three.js vs Babylon.js)
- *   - Character design direction chosen
- *   - WebSocket bridge to Timmy's soul designed (#243)
+ * Initializes the 3D world where Timmy lives.
+ * Handles WebSocket connection to tower-hermes backend with
+ * timeout, retry, and clear status display.
 *
 * See: #242 (3D world), #243 (WebSocket bridge), #265 (presence schema)
 */

 // Future: import * as THREE from 'three';

-export function initWorkshop(container) {
-  // TODO: Initialize 3D scene
-  // TODO: Load wizard character model
-  // TODO: Connect to Timmy presence WebSocket
-  console.log('[Workshop] Scene container ready:', container.id);
+const HERMES_WS_URL = (location.protocol === 'https:' ? 'wss://' : 'ws://') +
+  location.host + '/ws/tower';
+const CONNECT_TIMEOUT_MS = 5000;
+const RETRY_DELAY_MS = 3000;
+const MAX_AUTO_RETRIES = 3;
+
+const Status = { CONNECTING: 'connecting', ONLINE: 'online', OFFLINE: 'offline' };
+
+const dom = {
+  dot: document.getElementById('status-dot'),
+  text: document.getElementById('status-text'),
+  agents: document.getElementById('agent-count'),
+  retryBtn: document.getElementById('retry-btn'),
+  fallback: document.getElementById('fallback-link'),
+};
+
+// Signal to inline fallback script that main.js loaded successfully
+window.__workshopBooted = true;
+
+let ws = null;
+let autoRetries = 0;
+let connectTimer = null;
+
+function setStatus(state, message) {
+  dom.dot.className = 'dot ' + state;
+  dom.text.textContent = message;
+  var isOffline = state === Status.OFFLINE;
+  dom.retryBtn.style.display = isOffline ? 'block' : 'none';
+  if (dom.fallback) dom.fallback.style.display = isOffline ? 'block' : 'none';
 }
+
+function setAgentCount(n) {
+  dom.agents.textContent = n;
+}
+
+function cleanup() {
+  clearTimeout(connectTimer);
+  if (ws) {
+    ws.onopen = null;
+    ws.onclose = null;
+    ws.onerror = null;
+    ws.onmessage = null;
+    if (ws.readyState <= WebSocket.OPEN) ws.close();
+    ws = null;
+  }
+}
+
+function connect() {
+  cleanup();
+  setStatus(Status.CONNECTING, 'CONNECTING\u2026');
+  setAgentCount(0);
+
+  try {
+    ws = new WebSocket(HERMES_WS_URL);
+  } catch (err) {
+    console.error('[Workshop] WebSocket creation failed:', err);
+    onFail();
+    return;
+  }
+
+  connectTimer = setTimeout(function () {
+    console.warn('[Workshop] Connection timeout after ' + CONNECT_TIMEOUT_MS + 'ms');
+    cleanup();
+    onFail();
+  }, CONNECT_TIMEOUT_MS);
+
+  ws.onopen = function () {
+    clearTimeout(connectTimer);
+    autoRetries = 0;
+    setStatus(Status.ONLINE, 'ONLINE');
+    console.log('[Workshop] Connected to tower-hermes');
+  };
+
+  ws.onmessage = function (evt) {
+    try {
+      var msg = JSON.parse(evt.data);
+      if (typeof msg.agents === 'number') setAgentCount(msg.agents);
+    } catch (_) {
+      // non-JSON messages are ignored
+    }
+  };
+
+  ws.onclose = function () {
+    clearTimeout(connectTimer);
+    console.log('[Workshop] Connection closed');
+    onFail();
+  };
+
+  ws.onerror = function () {
+    clearTimeout(connectTimer);
+    console.error('[Workshop] WebSocket error');
+    // onclose will fire after this, which calls onFail
+  };
+}
+
+function onFail() {
+  if (autoRetries < MAX_AUTO_RETRIES) {
+    autoRetries++;
+    setStatus(Status.CONNECTING, 'RETRYING (' + autoRetries + '/' + MAX_AUTO_RETRIES + ')\u2026');
+    setTimeout(connect, RETRY_DELAY_MS);
+  } else {
+    setStatus(Status.OFFLINE, 'WORKSHOP OFFLINE');
+  }
+}
+
+// Manual retry resets the counter
+dom.retryBtn.addEventListener('click', function () {
+  autoRetries = 0;
+  connect();
+});
+
+// Boot
+export function initWorkshop(container) {
+  console.log('[Workshop] Scene container ready:', container.id);
+  connect();
+}
+
+initWorkshop(document.getElementById('scene'));
Author	SHA1	Message	Date
Alexander Whitestone	eb083d3937	fix: add error state fallback for perpetual INITIALIZING screen When main.js fails to load (network error, CORS, etc.), users were stuck on "INITIALIZING" forever with no error or recovery option. Changes: - Add inline 8s timeout that shows error state if main.js never boots - Show /api/ui fallback link when workshop is offline - Update offline message to "WORKSHOP OFFLINE" Fixes #7 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-22 19:01:09 -04:00
Claude (Opus 4.6)	64d711e256	[claude] fix: Workshop connection HUD with timeout and retry (#5 ) (#10 )	2026-03-22 22:55:41 +00:00
Alexander Whitestone	d9b7b232ad	[claude] fix: reject unknown sub-paths, add 404 page (#8 ) (#9 ) Co-authored-by: Alexander Whitestone <alexpaynex@gmail.com> Co-committed-by: Alexander Whitestone <alexpaynex@gmail.com>	2026-03-22 22:06:42 +00:00
hermes	cbcad273ef	[loop-cycle] feat: aw-post CLI — --from-x, --file, --help (#219 ) (#3 )	2026-03-18 21:46:11 -04:00