@8bitbish/screenshot-service 1.2.1 → 1.2.3

package/dist/wizard/renderer/index.html

@@ -320,6 +320,34 @@
     font-size: 12px;
     font-weight: 500;
   }
+  .dev-mode-banner {
+    margin: 8px 0 20px;
+    padding: 14px 16px;
+    background: rgba(241, 192, 98, 0.08);
+    border: 1px solid rgba(241, 192, 98, 0.4);
+    border-radius: 10px;
+    color: var(--text);
+  }
+  .dev-mode-banner h4 {
+    margin: 0 0 6px;
+    color: var(--warn);
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+  .dev-mode-banner ol {
+    margin: 8px 0 0;
+    padding-left: 20px;
+    font-size: 13.5px;
+    color: var(--text);
+  }
+  .dev-mode-banner ol li { margin: 4px 0; color: var(--text); }
+  .dev-mode-banner .auto-note {
+    margin-top: 10px;
+    font-size: 12.5px;
+    color: var(--muted);
+  }
   .device-row.flash-new {
     background: rgba(61, 220, 151, 0.14);
     border-color: rgba(61, 220, 151, 0.55);
@@ -446,6 +474,17 @@
       <p class="muted" id="dm-sub">These are connected right now. Add as many as you want.</p>
       <ul class="device-list" id="device-list"></ul>
       <div class="empty-state" id="device-empty" style="display: none"></div>
+      <div class="dev-mode-banner" id="dev-mode-banner" style="display: none">
+        <h4>Finish on your iPhone</h4>
+        <div id="dev-mode-banner-detail">We've just unlocked the Developer Mode option in your iPhone's Settings. Apple requires you to flip the toggle yourself — it can't be done from this Mac when a passcode is set.</div>
+        <ol>
+          <li>On your iPhone, open <strong>Settings → Privacy &amp; Security → Developer Mode</strong> <em>(it's now visible)</em></li>
+          <li>Toggle <strong>Developer Mode</strong> on</li>
+          <li>Tap <strong>Restart</strong> when prompted</li>
+          <li>After the iPhone reboots, tap <strong>Turn On</strong> and enter your passcode</li>
+        </ol>
+        <div class="auto-note"><span class="live-dot"></span> We'll detect it automatically once it's on — no need to come back here.</div>
+      </div>
       <div class="add-row">
         <button class="btn ghost" id="btn-add-device">+ Add another device</button>
       </div>
@@ -486,7 +525,7 @@
   let lastDevices        = [];     // most recent listDevices() result
   let pendingAddSnapshot = null;   // Set<string> of device IDs at the moment user clicked "+ Add"
   let history            = [];
-  const devModeRequested = new Set(); // device IDs for which we've already sent enableIosDevMode
+  const revealedUdids    = new Set(); // UDIDs we've already called reveal-developer-mode on this session
 
   function show(name, label) {
     for (const k in screens) screens[k].classList.remove('active');
@@ -564,14 +603,10 @@
       (needsDevMode ? ' needs-action' : (d.available ? '' : ' unavailable')) +
       (flashNew ? ' flash-new' : '');
 
-    // Right side: button (dev-mode action) OR status (when unavailable for other reason) OR nothing
+    // Right side status text. Instructions for fixing dev-mode live in the banner below the list.
     let rightSide = '';
     if (needsDevMode) {
-      if (devModeRequested.has(d.id)) {
-        rightSide = `<span class="row-pending">On iPhone: toggle on &amp; restart</span>`;
-      } else {
-        rightSide = `<button class="row-action" data-action="enable-dev-mode">Open on iPhone</button>`;
-      }
+      rightSide = `<span class="row-pending">Needs Developer Mode</span>`;
     } else if (!d.available && d.unavailableReason) {
       rightSide = `<span class="status">${escapeHtml(d.unavailableReason)}</span>`;
     }
@@ -585,28 +620,6 @@
       rightSide;
 
     if (!existing) listEl.appendChild(li);
-
-    // Wire the action button (idempotent — re-attached on every render)
-    const actionBtn = li.querySelector('button.row-action');
-    if (actionBtn) {
-      actionBtn.onclick = () => sendEnableDevMode(d.id, actionBtn);
-    }
-  }
-
-  async function sendEnableDevMode(deviceId, buttonEl) {
-    buttonEl.disabled = true;
-    buttonEl.textContent = 'Opening…';
-    try {
-      await window.wizard.enableIosDevMode(deviceId);
-      devModeRequested.add(deviceId);
-      // Re-render the row immediately so the action swaps to instructions.
-      const fresh = lastDevices.find(x => x.id === deviceId);
-      if (fresh) renderDeviceRow($('device-list'), fresh, new Set());
-    } catch (err) {
-      buttonEl.disabled = false;
-      buttonEl.textContent = 'Try again';
-      alert(`Couldn't open Developer Mode on the iPhone: ${err.message || err}`);
-    }
   }
   function escapeHtml(s) {
     return String(s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
@@ -621,11 +634,18 @@
   async function refreshDeviceManager(justAddedIds = new Set()) {
     const devs = await window.wizard.listDevices();
     lastDevices = devs;
-    // Clear "request sent" state for any iPhone whose Developer Mode has flipped to ON.
-    for (const id of Array.from(devModeRequested)) {
-      const d = devs.find(x => x.id === id);
-      if (!d || d.developerMode === true) devModeRequested.delete(id);
+
+    // Auto-reveal Developer Mode for any iPhone that needs it. The call tells iOS to
+    // surface the Developer Mode toggle in Settings → Privacy & Security so the user
+    // can actually find it (Apple hides this item until a Mac requests it). Once per
+    // session per device — re-running has no effect on the iPhone.
+    for (const d of devs) {
+      if (d.platform === 'ios' && d.developerMode === false && !revealedUdids.has(d.id)) {
+        revealedUdids.add(d.id);
+        window.wizard.enableIosDevMode(d.id).catch(() => {});  // best-effort, banner has the same info anyway
+      }
     }
+
     const mine = devs.filter(d => d.platform === platform);
     const listEl  = $('device-list');
     const emptyEl = $('device-empty');
@@ -647,6 +667,14 @@
       emptyEl.style.display = 'none';
       for (const d of mine) renderDeviceRow(listEl, d, justAddedIds);
     }
+
+    // Show the Developer Mode banner if any connected iPhone needs it.
+    const banner = $('dev-mode-banner');
+    if (banner) {
+      const needyCount = mine.filter(d => d.platform === 'ios' && d.developerMode === false).length;
+      banner.style.display = needyCount > 0 ? '' : 'none';
+    }
+
     return mine;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@8bitbish/screenshot-service",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Capture screenshots and recordings from connected iPhone and Android devices, with a built-in visual setup wizard.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",