@rubytech/create-maxy 1.0.781 → 1.0.782

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubytech/create-maxy",
-  "version": "1.0.781",
+  "version": "1.0.782",
   "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,30 @@ 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"] || "";
+
+// ── 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 +69,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 +128,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 +165,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 +183,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,28 +219,30 @@ 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};
+    color: ${colors.primary};
     text-decoration: none;
     font-size: 16px;
     font-weight: 600;
@@ -245,7 +285,7 @@ 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>
       </div>
@@ -370,10 +410,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 +427,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 +549,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 +557,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 +694,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

@@ -61,8 +61,14 @@ LOG_FILE="${LOG_DIR}/wifi-provision.log"
 mkdir -p "$LOG_DIR"
 
 # ── 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 +289,7 @@ DNSMASQ_EOF
     --result-file "$RESULT_FILE" \
     --brand-json "$BRAND_JSON" \
     --hostname "$HOSTNAME_NAME" \
+    --portal-host "$PORTAL_HOST" \
     >> "$LOG_FILE" 2>&1 &
   HTTP_SERVER_PID=$!
   sleep 1