@rubytech/create-maxy 1.0.781 → 1.0.783

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubytech/create-maxy",
-  "version": "1.0.781",
+  "version": "1.0.783",
   "description": "Install Maxy — AI for Productive People",
   "bin": {
     "create-maxy": "./dist/index.js"

package/payload/platform/scripts/wifi-provision-server/server.js

@@ -38,11 +38,34 @@ const CONNECT_FIFO = args["connect-fifo"] || "/tmp/wifi-provision-connect";
 const RESULT_FILE = args["result-file"] || "/tmp/wifi-provision-result";
 const BRAND_JSON = args["brand-json"] || "";
 const HOSTNAME = args.hostname || "maxy";
-
-// ── Load brand config ────────────────────────────────────────────���──
+const PORTAL_HOST = args["portal-host"] || "";
+// Brand service port (e.g. 19200). Distinct from PORT, which is the
+// captive portal's own listen port (always 80). Used only to render the
+// post-connect URL.
+const DEVICE_PORT = parseInt(args["device-port"] || "19200", 10);
+
+// ── Load brand config ─────────────────────────────────────────────────
+// All visual surfaces (colour, font, logo) come from brand.json so the
+// captive portal matches the rest of the product. Earlier this file
+// hard-coded a generic dark navy + system font fallback that bore no
+// relation to the brand's actual look — the operator-side complaint
+// that surfaced this. Now: read the brand's `defaultColors`,
+// `defaultFonts`, and `assets.logo`, fall through to neutral defaults
+// only if a field is missing from brand.json.
 let brandName = "Maxy";
-let brandColor = "#1a1a2e";
-let brandAccent = "#4a90d9";
+const colors = {
+  primary: "#1a1a2e",
+  primaryHover: "#0f0f1f",
+  background: "#FAFAF8",
+  text: "#1a1a2e",
+  card: "rgba(0,0,0,0.04)",
+  cardBorder: "rgba(0,0,0,0.08)",
+  muted: "#6b6b6b",
+};
+const fonts = {
+  display: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  body: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+};
 let logoBase64 = "";
 
 try {
@@ -50,15 +73,29 @@ try {
     const brand = JSON.parse(fs.readFileSync(BRAND_JSON, "utf-8"));
     if (brand.productName) brandName = brand.productName;
 
-    // Load logo if available (brand assets are alongside brand.json)
+    if (brand.defaultColors) {
+      const c = brand.defaultColors;
+      if (c.primary) colors.primary = c.primary;
+      if (c.primaryHover) colors.primaryHover = c.primaryHover;
+      if (c.background) colors.background = c.background;
+      if (c.agentBubble) colors.card = c.agentBubble;
+    }
+    if (brand.defaultFonts) {
+      if (brand.defaultFonts.display) fonts.display = brand.defaultFonts.display;
+      if (brand.defaultFonts.body) fonts.body = brand.defaultFonts.body;
+    }
+
+    // Load logo. Prefer assets.logo (the larger brand mark) and fall
+    // back to assets.icon.
     const brandDir = path.dirname(BRAND_JSON);
-    if (brand.assets && brand.assets.icon) {
-      const iconPath = path.join(brandDir, "assets", brand.assets.icon);
-      if (fs.existsSync(iconPath)) {
-        const iconData = fs.readFileSync(iconPath);
-        const ext = path.extname(iconPath).slice(1);
+    const logoFile = (brand.assets && (brand.assets.logo || brand.assets.icon)) || "";
+    if (logoFile) {
+      const logoPath = path.join(brandDir, "assets", logoFile);
+      if (fs.existsSync(logoPath)) {
+        const logoData = fs.readFileSync(logoPath);
+        const ext = path.extname(logoPath).slice(1);
         const mime = ext === "png" ? "image/png" : ext === "ico" ? "image/x-icon" : "image/" + ext;
-        logoBase64 = `data:${mime};base64,${iconData.toString("base64")}`;
+        logoBase64 = `data:${mime};base64,${logoData.toString("base64")}`;
       }
     }
   }
@@ -95,25 +132,29 @@ function portalHTML() {
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    background: ${brandColor};
-    color: #e8e8e8;
+    font-family: ${fonts.body};
+    background: ${colors.background};
+    color: ${colors.text};
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 24px 16px;
   }
-  .logo { width: 48px; height: 48px; margin-bottom: 8px; border-radius: 12px; }
+  .logo { width: 56px; height: 56px; margin-bottom: 12px; border-radius: 12px; }
   .logo-text {
-    font-size: 24px; font-weight: 700; margin-bottom: 8px;
-    color: ${brandAccent};
+    font-family: ${fonts.display};
+    font-size: 28px; font-weight: 600; margin-bottom: 8px;
+    color: ${colors.primary};
+  }
+  h1 {
+    font-family: ${fonts.display};
+    font-size: 22px; font-weight: 500; margin-bottom: 4px;
   }
-  h1 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
-  .subtitle { font-size: 14px; color: #999; margin-bottom: 24px; }
+  .subtitle { font-size: 14px; color: ${colors.muted}; margin-bottom: 24px; }
   .card {
-    background: rgba(255,255,255,0.06);
-    border: 1px solid rgba(255,255,255,0.1);
+    background: ${colors.card};
+    border: 1px solid ${colors.cardBorder};
     border-radius: 12px;
     width: 100%; max-width: 360px;
     padding: 16px;
@@ -128,17 +169,17 @@ function portalHTML() {
     transition: background 0.15s;
   }
   .network-item:hover, .network-item.selected {
-    background: rgba(255,255,255,0.1);
+    background: ${colors.cardBorder};
   }
-  .network-item.selected { border: 1px solid ${brandAccent}; }
+  .network-item.selected { border: 1px solid ${colors.primary}; }
   .network-name { font-size: 15px; font-weight: 500; }
-  .network-meta { font-size: 12px; color: #888; }
+  .network-meta { font-size: 12px; color: ${colors.muted}; }
   .signal-bars { display: flex; gap: 2px; align-items: flex-end; height: 16px; }
   .signal-bar {
     width: 4px; border-radius: 1px;
-    background: rgba(255,255,255,0.2);
+    background: ${colors.cardBorder};
   }
-  .signal-bar.active { background: ${brandAccent}; }
+  .signal-bar.active { background: ${colors.primary}; }
   .password-group {
     position: relative;
     margin-top: 16px;
@@ -146,34 +187,35 @@ function portalHTML() {
   .password-group input {
     width: 100%;
     padding: 12px 44px 12px 12px;
-    background: rgba(255,255,255,0.08);
-    border: 1px solid rgba(255,255,255,0.15);
+    background: ${colors.background};
+    border: 1px solid ${colors.cardBorder};
     border-radius: 8px;
-    color: #e8e8e8;
+    color: ${colors.text};
     font-size: 15px;
     outline: none;
   }
-  .password-group input:focus { border-color: ${brandAccent}; }
+  .password-group input:focus { border-color: ${colors.primary}; }
   .toggle-pw {
     position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
-    background: none; border: none; color: #888; cursor: pointer;
+    background: none; border: none; color: ${colors.muted}; cursor: pointer;
     font-size: 13px; padding: 4px 8px;
   }
   .btn {
     width: 100%; padding: 14px;
-    background: ${brandAccent};
+    background: ${colors.primary};
     color: #fff; font-size: 16px; font-weight: 600;
     border: none; border-radius: 8px;
     cursor: pointer; margin-top: 16px;
-    transition: opacity 0.15s;
+    transition: background 0.15s;
     min-height: 48px;
   }
-  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  .btn:hover:not(:disabled) { background: ${colors.primaryHover}; }
+  .btn:disabled { opacity: 0.4; cursor: not-allowed; }
   .error {
-    color: #ff6b6b; font-size: 13px;
+    color: #c0392b; font-size: 13px;
     margin-top: 8px; display: none;
   }
-  .empty { text-align: center; padding: 24px; color: #888; font-size: 14px; }
+  .empty { text-align: center; padding: 24px; color: ${colors.muted}; font-size: 14px; }
 
   /* Progress / success screens */
   .screen { display: none; width: 100%; max-width: 360px; text-align: center; }
@@ -181,31 +223,35 @@ function portalHTML() {
   @keyframes spin { to { transform: rotate(360deg); } }
   .spinner {
     width: 40px; height: 40px;
-    border: 3px solid rgba(255,255,255,0.15);
-    border-top-color: ${brandAccent};
+    border: 3px solid ${colors.cardBorder};
+    border-top-color: ${colors.primary};
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
     margin: 24px auto;
   }
   .success-icon {
     width: 48px; height: 48px; margin: 24px auto;
-    border-radius: 50%; background: #2ecc71;
+    border-radius: 50%; background: ${colors.primary};
     display: flex; align-items: center; justify-content: center;
     font-size: 24px; color: #fff;
   }
   .address-box {
-    background: rgba(255,255,255,0.08);
-    border: 1px solid rgba(255,255,255,0.15);
+    background: ${colors.card};
+    border: 1px solid ${colors.cardBorder};
     border-radius: 8px;
     padding: 12px 16px;
     margin: 16px auto;
     display: inline-block;
+    max-width: 100%;
+    word-break: break-all;
   }
   .address-box a {
-    color: ${brandAccent};
-    text-decoration: none;
+    color: ${colors.primary};
+    text-decoration: underline;
     font-size: 16px;
     font-weight: 600;
+    display: block;
+    -webkit-tap-highlight-color: ${colors.primary};
   }
   .hint { color: #888; font-size: 13px; margin-top: 12px; line-height: 1.5; }
 </style>
@@ -245,13 +291,13 @@ function portalHTML() {
     <div class="card" style="padding:32px 16px">
       <div class="success-icon">&#10003;</div>
       <h1>Connected!</h1>
-      <p class="hint">${escapedBrandName} is now online. Redirecting in <span id="redirect-countdown">5</span>s…</p>
+      <p class="hint">${escapedBrandName} is now online. Redirecting in <span id="redirect-countdown">20</span>s…</p>
       <div class="address-box">
-        <a id="device-link" href="#" target="_blank"></a>
+        <a id="device-link" href="#"></a>
       </div>
       <p class="hint" id="ip-fallback" style="display:none">If the page above doesn't load (some Android browsers don't resolve <code>.local</code>), use this direct IP:</p>
       <div class="address-box" id="ip-fallback-box" style="display:none">
-        <a id="device-link-ip" href="#" target="_blank"></a>
+        <a id="device-link-ip" href="#"></a>
       </div>
       <p class="hint">This access point will close shortly.<br>Your phone will reconnect to your WiFi automatically.</p>
     </div>
@@ -261,7 +307,10 @@ function portalHTML() {
 (function() {
   "use strict";
   var selectedSSID = "";
-  var devicePort = ${PORT === 80 ? '""' : JSON.stringify(":" + PORT)};
+  // The brand service port (19200, configurable via --port), NOT the
+  // captive portal port (always 80). devicePort is appended to the
+  // post-connect URL so the link points at the admin server.
+  var devicePort = ${DEVICE_PORT === 80 ? '""' : JSON.stringify(":" + DEVICE_PORT)};
   var deviceHostname = ${JSON.stringify(HOSTNAME)};
 
   // Safe text insertion — no innerHTML for user-controlled content
@@ -370,10 +419,15 @@ function portalHTML() {
       ? "http://" + data.hostname + ".local" + devicePort
       : null;
     var ipAddr = data.ip ? "http://" + data.ip + devicePort : null;
-    var primary = hostnameAddr || ipAddr;
+    // Display: prefer the friendly .local URL.
+    // Auto-redirect target: the raw IP. On Android (notably Brave) the
+    // mDNS .local lookup fails and the auto-navigate would dead-end;
+    // the IP works on every platform.
+    var displayAddr = hostnameAddr || ipAddr;
+    var redirectAddr = ipAddr || hostnameAddr;
     var link = document.getElementById("device-link");
-    link.href = primary;
-    link.textContent = primary;
+    link.href = displayAddr;
+    link.textContent = displayAddr;
     if (hostnameAddr && ipAddr && hostnameAddr !== ipAddr) {
       var ipLink = document.getElementById("device-link-ip");
       ipLink.href = ipAddr;
@@ -382,16 +436,20 @@ function portalHTML() {
       document.getElementById("ip-fallback-box").style.display = "block";
     }
     showScreen("success-screen");
-    // Auto-redirect after 5s — gives the phone time to drop the AP and
-    // rejoin home WiFi before navigating to the .local / IP address.
-    var remaining = 5;
+    // Countdown timing: the Pi keeps the AP up for ~10s after writing the
+    // success result (so this poll can land), then tears it down. The
+    // phone then needs ~5s to drop the AP SSID and auto-rejoin its home
+    // WiFi. A 20s countdown crosses both gates so the redirect lands
+    // when the phone is back on its home network and the device is
+    // routable on its new IP.
+    var remaining = 20;
     var countdownEl = document.getElementById("redirect-countdown");
     var ticker = setInterval(function() {
       remaining -= 1;
       if (countdownEl) countdownEl.textContent = String(remaining);
       if (remaining <= 0) {
         clearInterval(ticker);
-        window.location.href = primary;
+        window.location.href = redirectAddr;
       }
     }, 1000);
   }
@@ -500,7 +558,7 @@ function handleRequest(req, res) {
 
   // Captive portal detection — iOS
   if (pathname === "/hotspot-detect.html" || pathname === "/library/test/success.html") {
-    res.writeHead(302, { Location: `http://${AP_IP}/` });
+    res.writeHead(302, { Location: `http://${PORTAL_HOST || AP_IP}/` });
     res.end();
     return;
   }
@@ -508,14 +566,14 @@ function handleRequest(req, res) {
   // Captive portal detection — Android
   if (pathname === "/generate_204" || pathname === "/gen_204" ||
       pathname === "/connecttest.txt" || pathname === "/ncsi.txt") {
-    res.writeHead(302, { Location: `http://${AP_IP}/` });
+    res.writeHead(302, { Location: `http://${PORTAL_HOST || AP_IP}/` });
     res.end();
     return;
   }
 
   // Captive portal detection — Windows
   if (pathname === "/redirect" || pathname === "/fwlink/") {
-    res.writeHead(302, { Location: `http://${AP_IP}/` });
+    res.writeHead(302, { Location: `http://${PORTAL_HOST || AP_IP}/` });
     res.end();
     return;
   }
@@ -645,7 +703,17 @@ function handleRequest(req, res) {
     return;
   }
 
-  // Default: serve portal page
+  // Default: serve portal page. If the client hit the raw AP IP (e.g.
+  // 192.168.4.1) and we have a friendly portal host configured, redirect
+  // so the URL bar shows the brand-aware name (e.g. http://maxy.setup/).
+  // dnsmasq's wildcard DNS resolves PORTAL_HOST → AP_IP transparently
+  // while the AP is up.
+  const incomingHost = (req.headers.host || "").split(":")[0];
+  if (PORTAL_HOST && incomingHost === AP_IP) {
+    res.writeHead(302, { Location: `http://${PORTAL_HOST}/` });
+    res.end();
+    return;
+  }
   res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
   res.end(portalHTML());
 }

package/payload/platform/scripts/wifi-provision.sh

@@ -60,9 +60,33 @@ LOG_FILE="${LOG_DIR}/wifi-provision.log"
 
 mkdir -p "$LOG_DIR"
 
+# Resolve the brand service's public port so the captive portal can render
+# the post-connect URL with the correct port (the captive portal itself
+# runs on :80, but the device's admin URL is on the brand port). Mirrors
+# the same precedence as the installer: ~/{configDir}/.env override, then
+# the systemd unit's Environment=PORT, then the documented default.
+BRAND_PORT="19200"
+if [ -f "${MAXY_DIR}/.env" ]; then
+  _p=$(grep -E '^PORT=' "${MAXY_DIR}/.env" 2>/dev/null | tail -1 | cut -d= -f2 | tr -d '"' | tr -d "'")
+  [ -n "$_p" ] && BRAND_PORT="$_p"
+fi
+if [ "$BRAND_PORT" = "19200" ]; then
+  _svc="${INSTALL_HOME}/.config/systemd/user/${HOSTNAME_NAME}.service"
+  if [ -f "$_svc" ]; then
+    _p=$(grep -E '^Environment=PORT=' "$_svc" 2>/dev/null | tail -1 | cut -d= -f3)
+    [ -n "$_p" ] && BRAND_PORT="$_p"
+  fi
+fi
+
 # ── Derived constants ────────────────────────────────────────────────
-# SSID: remove spaces from product name, append -Setup
-SSID="${PRODUCT_NAME// /}-Setup"
+# SSID: lowercase the product name and replace spaces with hyphens — gives
+# `maxy`, `real-agent`, etc. (kebab-case, no "-Setup" suffix). The user's
+# phone-side WiFi list is the brand surface; an extra "-Setup" suffix is
+# operator jargon, not customer language.
+SSID="$(echo "$PRODUCT_NAME" | tr '[:upper:]' '[:lower:]' | tr ' ' '-')"
+# Captive-portal hostname served by dnsmasq's wildcard — gives the phone
+# a friendly URL bar (`http://maxy.setup/`) instead of `http://192.168.4.1/`.
+PORTAL_HOST="${SSID}.setup"
 AP_IP="192.168.4.1"
 AP_SUBNET="192.168.4.0/24"
 DHCP_RANGE_START="192.168.4.2"
@@ -283,6 +307,8 @@ DNSMASQ_EOF
     --result-file "$RESULT_FILE" \
     --brand-json "$BRAND_JSON" \
     --hostname "$HOSTNAME_NAME" \
+    --portal-host "$PORTAL_HOST" \
+    --device-port "$BRAND_PORT" \
     >> "$LOG_FILE" 2>&1 &
   HTTP_SERVER_PID=$!
   sleep 1