fix(viewer): allow non-loopback bind via AGENTMEMORY_VIEWER_HOST

deploy/fly/README.md

@@ -51,7 +51,15 @@ fly logs --app "$APP" | grep -A1 AGENTMEMORY_SECRET=
 
 You will see exactly one line of the form `AGENTMEMORY_SECRET=<64 hex chars>`.
 Copy it into your client environment (`~/.bashrc`, Claude Desktop config,
-etc.). The secret is never printed again on subsequent boots.
+the viewer unlock prompt, etc.). The secret is never printed again on
+subsequent boots.
+
+If the first-boot log line is no longer available, read the persisted
+secret from the mounted volume:
+
+```bash
+fly ssh console --app "$APP" -C "sh -lc 'cat /data/.hmac'"
+```
 
 ## Verify the deployment
 
@@ -75,6 +83,32 @@ fly proxy 3113:3113 --app "$APP"
 viewer's bearer token still has to ride a loopback connection on your
 laptop — the v0.9.12 plaintext-bearer guard stays satisfied.
 
+The entrypoint sets `AGENTMEMORY_VIEWER_HOST=::` **only when it detects
+Fly's runtime variables** (`FLY_APP_NAME` / `FLY_ALLOC_ID`). That makes
+the viewer listen on the machine's `fly-local-6pn` WireGuard interface
+as well as loopback so `fly proxy` can reach it. The same branch
+preseeds `VIEWER_ALLOWED_HOSTS=localhost:3113,127.0.0.1:3113,[::1]:3113`,
+which are the Host headers `fly proxy 3113:3113` actually emits on
+your laptop.
+
+When `AGENTMEMORY_VIEWER_HOST` is non-loopback the viewer enforces two
+extra guards: it refuses to start unless `VIEWER_ALLOWED_HOSTS` is
+explicitly set, and every request to `/agentmemory/*` must present
+`Authorization: Bearer $AGENTMEMORY_SECRET`. Static HTML and the
+favicon are still served unauthenticated. If a proxied viewer request
+gets a 401, the browser UI prompts for `AGENTMEMORY_SECRET` and stores
+it in session storage so subsequent viewer API calls include the bearer.
+Use the value printed in the first-boot logs or read `/data/.hmac`
+inside the machine.
+
+> **Security warning.** Setting `AGENTMEMORY_VIEWER_HOST=0.0.0.0` or
+> `::` turns the viewer into a network-reachable proxy that signs every
+> upstream call with `AGENTMEMORY_SECRET`. Never enable that outside a
+> network you trust (Fly's WireGuard mesh in this template), and never
+> set it in a plain `docker run -p 3113:3113 …` on a shared host — the
+> entrypoint deliberately skips the override when Fly env vars are
+> absent so a plain Docker pull stays loopback-only.
+
 ## Rotate the HMAC secret
 
 ```bash

deploy/fly/entrypoint.sh

@@ -95,4 +95,18 @@ fi
 AGENTMEMORY_SECRET="$(cat "$HMAC_FILE")"
 export AGENTMEMORY_SECRET
 
+# The viewer's default 127.0.0.1 bind is unreachable through fly proxy,
+# which enters the machine via fly-local-6pn (IPv6). Opt into a
+# non-loopback bind ONLY when we're actually inside Fly (detected via
+# Fly's runtime variables). A plain `docker run` of this image will not
+# see these variables and will keep the safe-by-default loopback bind,
+# so it can't silently expose the viewer's bearer-authorized proxy to
+# the LAN. VIEWER_ALLOWED_HOSTS is preseeded to the Host headers that
+# `fly proxy 3113:3113` actually produces on the operator's laptop.
+if [ -n "${FLY_APP_NAME:-}" ] || [ -n "${FLY_ALLOC_ID:-}" ]; then
+  : "${AGENTMEMORY_VIEWER_HOST:=::}"
+  : "${VIEWER_ALLOWED_HOSTS:=localhost:3113,127.0.0.1:3113,[::1]:3113}"
+  export AGENTMEMORY_VIEWER_HOST VIEWER_ALLOWED_HOSTS
+fi
+
 exec gosu "$RUN_AS" agentmemory "$@"

src/viewer/index.html

@@ -711,6 +711,46 @@
     .flag-close:hover,
     .flag-close:focus-visible { color: var(--ink); outline: 2px solid var(--border); outline-offset: 1px; }
 
+    .viewer-auth {
+      display: none;
+      padding: 0 24px 10px 24px;
+      background: var(--bg);
+      flex: 0 0 auto;
+      position: relative;
+      z-index: 1;
+    }
+    .viewer-auth.open { display: block; }
+    .viewer-auth-panel {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(180px, 320px) auto;
+      gap: 10px;
+      align-items: center;
+      width: min(960px, 100%);
+      max-width: 960px;
+      padding: 10px 14px;
+      border: 1px solid var(--border);
+      border-left: 3px solid var(--accent);
+      background: var(--bg-subtle);
+      font-family: var(--font-ui);
+      font-size: 12px;
+    }
+    .viewer-auth-title { font-weight: 600; color: var(--ink); margin-bottom: 2px; }
+    .viewer-auth-desc { color: var(--ink-muted); line-height: 1.4; }
+    .viewer-auth-desc code { font-family: var(--font-mono); font-size: 10px; color: var(--ink); }
+    .viewer-auth input {
+      width: 100%;
+      min-width: 0;
+      padding: 7px 9px;
+      border: 1px solid var(--border);
+      background: var(--bg);
+      color: var(--ink);
+      font-family: var(--font-mono);
+      font-size: 12px;
+    }
+    @media (max-width: 900px) {
+      .viewer-auth-panel { grid-template-columns: 1fr; }
+    }
+
     /* Viewer footer */
     .viewer-footer {
       margin-top: 48px; padding: 16px 0 24px;
@@ -961,6 +1001,7 @@ <h1>agentmemory</h1>
   </div>
 
   <div id="flag-banners" class="flag-banners"></div>
+  <div id="viewer-auth" class="viewer-auth"></div>
 
   <div id="view-dashboard" class="view active"></div>
   <div id="view-graph" class="view"></div>
@@ -1063,6 +1104,7 @@ <h1>agentmemory</h1>
     };
     var CB_STATE_COLORS = { closed: 'badge-green', open: 'badge-red', 'half-open': 'badge-yellow' };
     var TAB_IDS = ['dashboard', 'graph', 'memories', 'timeline', 'sessions', 'lessons', 'actions', 'crystals', 'audit', 'activity', 'profile', 'replay'];
+    var VIEWER_TOKEN_STORAGE_KEY = 'agentmemory-viewer-token';
 
     var state = {
       activeTab: 'dashboard',
@@ -1159,17 +1201,54 @@ <h1>agentmemory</h1>
         try { el.setSelectionRange(focus.start, focus.end); } catch (e) {}
       }
     }
+    function getViewerToken() {
+      try { return sessionStorage.getItem(VIEWER_TOKEN_STORAGE_KEY) || ''; } catch (_) { return ''; }
+    }
+    function setViewerToken(token) {
+      try {
+        if (token) sessionStorage.setItem(VIEWER_TOKEN_STORAGE_KEY, token);
+        else sessionStorage.removeItem(VIEWER_TOKEN_STORAGE_KEY);
+      } catch (_) {}
+    }
+    function showViewerAuthPrompt() {
+      var host = document.getElementById('viewer-auth');
+      if (!host) return;
+      host.classList.add('open');
+      host.innerHTML =
+        '<div class="viewer-auth-panel">' +
+          '<div>' +
+            '<div class="viewer-auth-title">Viewer authorization required</div>' +
+            '<div class="viewer-auth-desc">Enter <code>AGENTMEMORY_SECRET</code> to unlock viewer API access.</div>' +
+          '</div>' +
+          '<input id="viewer-auth-token" type="password" autocomplete="off" spellcheck="false" placeholder="AGENTMEMORY_SECRET" />' +
+          '<button class="btn" data-action="save-viewer-token">Unlock</button>' +
+        '</div>';
+      var input = document.getElementById('viewer-auth-token');
+      if (input && typeof input.focus === 'function') input.focus();
+    }
+    function hideViewerAuthPrompt() {
+      var host = document.getElementById('viewer-auth');
+      if (!host) return;
+      host.classList.remove('open');
+      host.innerHTML = '';
+    }
 
     async function api(path, opts) {
       try {
         var url = REST + '/agentmemory/' + path;
         var headers = Object.assign({ 'Cache-Control': 'no-cache' }, (opts && opts.headers) || {});
+        var viewerToken = getViewerToken();
+        if (viewerToken && !headers.Authorization && !headers.authorization) {
+          headers.Authorization = 'Bearer ' + viewerToken;
+        }
         var fetchOpts = Object.assign({}, opts || {}, { headers: headers });
         var res = await fetch(url, fetchOpts);
         if (!res.ok) {
+          if (res.status === 401) showViewerAuthPrompt();
           console.warn('[viewer] API ' + (fetchOpts.method || 'GET') + ' ' + path + ' returned ' + res.status);
           return null;
         }
+        hideViewerAuthPrompt();
         return await res.json();
       } catch (err) {
         console.warn('[viewer] API error on ' + path + ':', err);
@@ -3710,6 +3789,19 @@ <h1>agentmemory</h1>
         if (memoryId) confirmDeleteMemory(memoryId);
         return;
       }
+      if (action === 'save-viewer-token') {
+        var tokenInput = document.getElementById('viewer-auth-token');
+        var token = tokenInput ? tokenInput.value.trim() : '';
+        if (token) {
+          setViewerToken(token);
+          hideViewerAuthPrompt();
+          if (state[state.activeTab] && typeof state[state.activeTab] === 'object') {
+            state[state.activeTab].loaded = false;
+          }
+          loadTab(state.activeTab);
+        }
+        return;
+      }
       if (action === 'timeline-filter') {
         setTlTypeFilter(target.getAttribute('data-type-filter') || '');
         return;