mobile-snap 1.0.1 → 1.0.4

package/README.html

@@ -186,8 +186,14 @@
             gap: 1.5rem;
         }
 
+        .grid-4 {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 1.5rem;
+        }
+
         @media (max-width: 768px) {
-            .grid-2, .grid-3 {
+            .grid-2, .grid-3, .grid-4 {
                 grid-template-columns: 1fr;
             }
             h1 {
@@ -597,6 +603,22 @@
     </header>
 
     <div class="container">
+        <!-- Contoh Output (Mockup Premium) -->
+        <section class="glass-card">
+            <h2>📱 Contoh Output (Mockup Premium)</h2>
+            <p style="color: var(--text-muted); margin-bottom: 1.5rem;">Visualisasi nyata dari tangkapan layar yang dibungkus otomatis ke dalam bingkai mockup perangkat premium menggunakan opsi <code>-m</code> atau <code>--mockup</code>:</p>
+            <div style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem;">
+                <div style="text-align: center; max-width: 45%; min-width: 280px;">
+                    <h4 style="margin-bottom: 0.5rem; color: #fff;">iOS (iPhone 6.7" Pro Max)</h4>
+                    <img src="./assets/ios_example.png" alt="iOS Mockup Example" style="max-width: 100%; border-radius: 12px; border: 1px solid var(--border-card); box-shadow: 0 10px 30px rgba(0,0,0,0.5);" />
+                </div>
+                <div style="text-align: center; max-width: 45%; min-width: 280px;">
+                    <h4 style="margin-bottom: 0.5rem; color: #fff;">Android Phone (Google Pixel 7)</h4>
+                    <img src="./assets/android_example.png" alt="Android Mockup Example" style="max-width: 100%; border-radius: 12px; border: 1px solid var(--border-card); box-shadow: 0 10px 30px rgba(0,0,0,0.5);" />
+                </div>
+            </div>
+        </section>
+
         <!-- Arsitektur Utama -->
         <section class="glass-card">
             <h2>🏗️ Arsitektur Aliran Kerja</h2>
@@ -731,7 +753,7 @@
                         <input type="text" id="input-paths" class="form-control" value="/" oninput="updateCommand()">
                     </div>
                 </div>
-                <div class="grid-3">
+                <div class="grid-4">
                     <div class="form-group">
                         <label for="input-platform">Platform Target</label>
                         <select id="input-platform" class="form-control" onchange="updateCommand()">
@@ -748,6 +770,10 @@
                         <input type="checkbox" id="input-detect" onchange="updateCommand()" style="width: 20px; height: 20px; accent-color: var(--primary);">
                         <label for="input-detect" style="margin-bottom: 0; cursor: pointer; color: var(--text-main); font-size: 0.85rem;">Detect Astro Pages (-d)</label>
                     </div>
+                    <div class="form-group" style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem;">
+                        <input type="checkbox" id="input-mockup" onchange="updateCommand()" style="width: 20px; height: 20px; accent-color: var(--primary);">
+                        <label for="input-mockup" style="margin-bottom: 0; cursor: pointer; color: var(--text-main); font-size: 0.85rem;">Device Mockup Frame (-m)</label>
+                    </div>
                 </div>
                 <div class="form-group" style="margin-top: 1rem;">
                     <label for="input-output">Folder Output</label>
@@ -810,6 +836,36 @@
                         <td>Memindai direktori folder proyek lokal (Astro/Next.js) untuk rute statis.</td>
                         <td><code style="color: var(--secondary);">false</code></td>
                     </tr>
+                    <tr>
+                        <td><span class="param-tag">--email</span></td>
+                        <td>-</td>
+                        <td>Email / Username untuk autentikasi otomatis jika halaman memerlukan login.</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td><span class="param-tag">--password</span></td>
+                        <td>-</td>
+                        <td>Password untuk autentikasi otomatis jika halaman memerlukan login (input disensor).</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td><span class="param-tag">--login-path</span></td>
+                        <td>-</td>
+                        <td>Jalur rute URL ke halaman login.</td>
+                        <td><code style="color: var(--secondary);">"/login.html"</code></td>
+                    </tr>
+                    <tr>
+                        <td><span class="param-tag">--html</span></td>
+                        <td>-</td>
+                        <td>Menambahkan ekstensi .html otomatis ke rute statis yang terdeteksi.</td>
+                        <td><code style="color: var(--secondary);">false</code></td>
+                    </tr>
+                    <tr>
+                        <td><span class="param-tag">--mockup</span></td>
+                        <td><span class="param-tag">-m</span></td>
+                        <td>Membungkus tangkapan layar dalam bingkai mockup perangkat (iPhone/Android) dengan status bar dan bayangan transparan.</td>
+                        <td><code style="color: var(--secondary);">false</code></td>
+                    </tr>
                 </tbody>
             </table>
         </section>
@@ -856,6 +912,7 @@
             const platform = document.getElementById('input-platform').value;
             const crawl = document.getElementById('input-crawl').checked;
             const detect = document.getElementById('input-detect').checked;
+            const mockup = document.getElementById('input-mockup').checked;
             
             let command = `npx mobile-snap --url ${url}`;
             if (paths && paths !== '/') {
@@ -873,6 +930,9 @@
             if (detect) {
                 command += ` --detect-pages`;
             }
+            if (mockup) {
+                command += ` --mockup`;
+            }
             
             document.getElementById('cmd-preview').innerText = command;
         }

package/README.md

@@ -2,6 +2,14 @@
 
 MobileSnap adalah alat CLI (Command Line Interface) berbasis Node.js yang dirancang untuk mengotomatisasi pengambilan tangkapan layar (screenshot) App Store & Google Play Store dengan presisi piksel tinggi langsung dari server pengembangan lokal (seperti Astro, Next.js, React, atau Vue).
 
+### 📱 Contoh Output (Mockup Premium)
+
+Berikut adalah visualisasi nyata dari tangkapan layar yang dibungkus otomatis ke dalam bingkai mockup perangkat premium (menggunakan opsi `-m` atau `--mockup`):
+
+| iOS (iPhone 6.7" Pro Max) | Android Phone (Google Pixel 7) |
+| :---: | :---: |
+| ![iOS Mockup Example](./assets/ios_example.png) | ![Android Mockup Example](./assets/android_example.png) |
+
 ---
 
 ## 🏗️ Arsitektur Sistem
@@ -87,6 +95,11 @@ Aplikasi ini menerima opsi utama berikut:
 | `--platform`| `-l`| Platform target tangkapan layar. | `ios` | `ios`, `android`, `both` |
 | `--crawl` | `-c` | Mengaktifkan penelusuran (crawl) otomatis tautan internal di halaman beranda. | `false` | - |
 | `--detect-pages` | `-d` | Memindai direktori halaman lokal (`src/pages` atau `pages`) untuk rute statis. | `false` | - |
+| `--email` | - | Email untuk autentikasi otomatis. | - | - |
+| `--password` | - | Password untuk autentikasi otomatis (disensor di terminal). | - | - |
+| `--login-path`| - | Jalur rute ke halaman login. | `/login.html` | - |
+| `--html` | - | Otomatis menambahkan akhiran `.html` pada rute statis terdeteksi. | `false` | - |
+| `--mockup` | `-m` | Membungkus tangkapan layar dalam bingkai mockup perangkat (iPhone/Android) yang premium dengan status bar dan bayangan transparan. | `false` | - |
 
 ### Contoh Perintah
 
@@ -95,9 +108,9 @@ Aplikasi ini menerima opsi utama berikut:
 npx mobile-snap --url http://localhost:4321
 ```
 
-#### 2. Pengambilan Halaman Android Saja
+#### 2. Pengambilan Halaman Android Saja dengan Mockup Bingkai Perangkat
 ```powershell
-npx mobile-snap --url http://localhost:4321 --platform android
+npx mobile-snap --url http://localhost:4321 --platform android --mockup
 ```
 
 #### 3. Pengambilan Rute Tertentu untuk 2 Platform Sekaligus
@@ -106,15 +119,60 @@ Mengambil gambar halaman utama `/` dan halaman `/scan` untuk kedua platform seka
 npx mobile-snap --url http://localhost:4321 --paths "/, /scan" --platform both --output hasil_store
 ```
 
-#### 4. Auto-Crawl Halaman Web
-Menelusuri semua tautan internal secara otomatis dari beranda dan memotret setiap halaman yang ditemukan untuk iOS & Android:
+#### 4. Auto-Crawl Halaman Web & Login Interaktif dengan Mockup Bingkai Perangkat
+Menelusuri semua tautan internal secara otomatis dari beranda dan memotret setiap halaman yang ditemukan dengan bingkai mockup iPhone/Android:
 ```powershell
-npx mobile-snap --url http://localhost:4321 --crawl --platform both
+npx mobile-snap --url http://localhost:4321 --crawl --platform both --mockup
 ```
 
-#### 5. Auto-Detect Rute Proyek Lokal (Astro / Next.js)
-Jika Anda berada di dalam root direktori proyek Astro Anda, jalankan perintah ini untuk mendeteksi secara otomatis semua rute halaman statis dari folder `src/pages`:
+
+#### 5. Auto-Detect Rute Proyek Lokal (Astro / Next.js) dengan Auto-Login
+Jika Anda berada di dalam root direktori proyek Astro Anda, jalankan perintah ini untuk mendeteksi secara otomatis semua rute halaman statis dari folder `src/pages` dengan login otomatis:
 ```powershell
-npx mobile-snap --url http://localhost:4321 --detect-pages --platform both
+npx mobile-snap --url http://localhost:4321 --detect-pages --html --email "user@email.com" --password "rahasia"
 ```
 
+---
+
+## 🔐 Autentikasi Otomatis & Interaktif
+
+MobileSnap secara cerdas membedakan halaman publik dan halaman terproteksi (yang membutuhkan login) berdasarkan pengalihan client-side ke rute login.
+
+Jika terdeteksi rute yang memerlukan login, MobileSnap akan:
+1. **Meminta Kredensial Secara Interaktif**: Jika opsi `--email` dan/atau `--password` tidak diberikan lewat CLI, sistem akan menanyakan email dan password secara interaktif di terminal dengan sensor password otomatis demi keamanan.
+2. **Auto-Login**: MobileSnap akan melakukan proses sign-in sebelum mengambil tangkapan layar untuk semua rute terproteksi.
+3. **Crawl Pasca-Login**: Jika opsi `--crawl` aktif, MobileSnap juga akan menjelajahi menu dan tautan internal yang baru muncul di dashboard pasca-login.
+
+---
+
+## ℹ️ Bantuan Perintah (`--help`)
+
+Anda selalu dapat memanggil opsi bantuan langsung dari terminal dengan menjalankan:
+
+```powershell
+npx mobile-snap --help
+```
+
+Output bantuan resmi:
+```text
+Usage: mobile-snap [options]
+
+⚡ MobileSnap CLI: Automate App Store & Google Play Store screenshots
+
+Options:
+  -V, --version              output the version number
+  -u, --url <url>            Base URL of the local development server (e.g. localhost:3000)
+  -p, --paths <paths>        Comma-separated list of routes to capture (default: "/")
+  -o, --output <output>      Output directory to save screenshots (default: "mobilesnap_output")
+  -l, --platform <platform>  Target platform: "ios", "android", or "both" (default: "ios")
+  -c, --crawl                Discover and screenshot all internal links automatically (default: false)
+  -d, --detect-pages         Scan local project pages directory (src/pages or pages) for static routes (default: false)
+  --email <email>            Email for automatic login authentication
+  --password <password>      Password for automatic login authentication
+  --login-path <path>        Path to the login page (default: "/login.html")
+  --html                     Auto append .html extension to detected routes (default: false)
+  -m, --mockup               Wrap screenshots in a beautiful iPhone/Android device mockup frame (default: false)
+  -h, --help                 display help for command
+```
+
+

package/bin/cli.js

@@ -6,6 +6,7 @@ import pc from 'picocolors';
 import ora from 'ora';
 import fs from 'fs';
 import path from 'path';
+import readline from 'readline';
 
 // Device configurations dengan ukuran logis (CSS pixels) dan scale factor untuk resolusi fisik presisi
 const DEVICE_CONFIGS = {
@@ -25,6 +26,42 @@ const DEVICE_CONFIGS = {
   }
 };
 
+function promptUser(query, isPassword = false) {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+
+    if (!isPassword) {
+      rl.question(query, (answer) => {
+        rl.close();
+        resolve(answer.trim());
+      });
+    } else {
+      let muted = false;
+      const oldWrite = rl._writeToOutput;
+      
+      rl._writeToOutput = function _writeToOutput(stringToWrite) {
+        if (muted) {
+          if (stringToWrite === '\r' || stringToWrite === '\n' || stringToWrite === '\r\n') {
+            oldWrite.call(rl, stringToWrite);
+          }
+        } else {
+          oldWrite.call(rl, stringToWrite);
+        }
+      };
+
+      rl.question(query, (answer) => {
+        rl.close();
+        resolve(answer);
+      });
+      
+      muted = true;
+    }
+  });
+}
+
 function safeFilename(route) {
   const cleanPath = route.replace(/^\/+|\/+$/g, '');
   if (!cleanPath) return 'home';
@@ -82,50 +119,554 @@ function detectLocalPages(dir = process.cwd()) {
 }
 
 // Fungsi pembantu untuk melakukan crawling internal links dari halaman utama
-async function discoverLinks(browser, baseUrl) {
+async function analyzeRoutes(browser, baseUrl, initialPaths, email, password, loginPath, addHtml, crawl) {
+  const normLoginPath = '/' + loginPath.replace(/^\/+/, '');
+  const publicRoutes = new Set();
+  const authRoutes = new Set();
+  const allDetectedRoutes = new Set(initialPaths);
+
   const context = await browser.newContext();
   const page = await context.newPage();
-  const links = new Set(['/']);
+
+  page.on('console', msg => {
+    const text = msg.text();
+    if (text.includes('Failed to fetch') || text.includes('TypeError: Failed to fetch')) {
+      return;
+    }
+    if (text.includes('[ERROR]') || text.includes('[WARN]')) {
+      console.log(pc.dim(`      [Crawler Log] ${text}`));
+    }
+  });
+  page.on('pageerror', err => {
+    if (err.message.includes('Failed to fetch') || err.message.includes('TypeError: Failed to fetch')) return;
+    console.error(pc.red(`      [Crawler Error] ${err.message}`));
+  });
+
+  const nonAuthSpinner = ora('Menganalisis rute publik dan mendeteksi kebutuhan autentikasi...').start();
+  const routesToCheck = Array.from(allDetectedRoutes);
+
+  // Jika daftar awal kosong, tambahkan root '/'
+  if (routesToCheck.length === 0) {
+    routesToCheck.push('/');
+    allDetectedRoutes.add('/');
+  }
+
+  for (let i = 0; i < routesToCheck.length; i++) {
+    const route = routesToCheck[i];
+    let cleanRoute = route;
+    if (addHtml && cleanRoute !== '/' && !cleanRoute.endsWith('.html')) {
+      cleanRoute += '.html';
+    }
+
+    const targetUrl = `${baseUrl}${cleanRoute}`;
+    try {
+      await page.goto(targetUrl, { timeout: 15000 });
+      await page.waitForLoadState('networkidle', { timeout: 3000 }).catch(() => {});
+      
+      // Tunggu client-side redirect (seperti splash screen ke login) selesai secara dinamis
+      if (cleanRoute === '/' || cleanRoute.includes('splash')) {
+        await page.waitForURL(u => {
+          const pathname = u.pathname;
+          return pathname !== '/' && !pathname.includes('splash');
+        }, { timeout: 15000 }).catch(() => {});
+      } else {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+      
+      const finalUrl = page.url();
+      let finalPath = '';
+      try {
+        finalPath = new URL(finalUrl).pathname;
+      } catch (err) {
+        finalPath = finalUrl;
+      }
+
+      // Bersihkan finalPath agar berakhiran .html jika flag aktif
+      if (addHtml && finalPath !== '/' && !finalPath.endsWith('.html') && !/\.[a-z0-9]+$/i.test(finalPath)) {
+        finalPath += '.html';
+      }
+
+      // Cek apakah ada form login atau input kredensial di DOM halaman saat ini
+      const hasLoginForm = await page.evaluate(() => {
+        const hasUser = !!document.querySelector('#username, input[type="email"], input[name="username"], input[name="login"]');
+        const hasPass = !!document.querySelector('#password, input[type="password"], input[name="password"]');
+        const hasForm = !!document.querySelector('#loginForm, form.login-form, form[action*="login"]');
+        return (hasUser && hasPass) || hasForm;
+      });
+
+      const isRedirectToLogin = hasLoginForm ||
+                               finalPath.includes('login') || 
+                               finalPath.includes('splash') || 
+                               finalPath === normLoginPath || 
+                               finalUrl.includes('login') || 
+                               finalUrl.includes('splash');
+
+      if (isRedirectToLogin) {
+        if (cleanRoute !== '/' && cleanRoute !== normLoginPath && !cleanRoute.includes('splash') && !cleanRoute.includes('login')) {
+          authRoutes.add(cleanRoute);
+        } else {
+          publicRoutes.add(cleanRoute);
+        }
+
+        // Tambahkan rute login itu sendiri (tujuan redirect) ke rute publik untuk dianalisis/di-crawl
+        if (!allDetectedRoutes.has(finalPath)) {
+          routesToCheck.push(finalPath);
+          allDetectedRoutes.add(finalPath);
+        }
+      } else {
+        publicRoutes.add(cleanRoute);
+      }
+
+      // Selalu rayapi link publik jika crawl aktif dan halaman saat ini tidak memerlukan login (tidak ter-redirect)
+      if (crawl && !authRoutes.has(cleanRoute)) {
+        const hrefs = await page.evaluate(() => {
+          return Array.from(document.querySelectorAll('a'))
+            .map(a => a.getAttribute('href'))
+            .filter(Boolean);
+        });
+
+        const baseOrigin = new URL(baseUrl).origin;
+        for (const href of hrefs) {
+          try {
+            const resolvedUrl = new URL(href, baseUrl);
+            if (resolvedUrl.origin === baseOrigin) {
+              let r = resolvedUrl.pathname;
+              if (!/\.(pdf|png|jpg|jpeg|gif|css|js|svg|ico|woff|woff2|json)$/i.test(r)) {
+                let normalizedR = '/' + r.replace(/^\/+|\/+$/g, '');
+                if (normalizedR === '//') normalizedR = '/';
+                
+                if (addHtml && normalizedR !== '/' && !normalizedR.endsWith('.html')) {
+                  normalizedR += '.html';
+                }
+
+                if (/logout|signout/i.test(normalizedR)) {
+                  continue;
+                }
+
+                if (!allDetectedRoutes.has(normalizedR)) {
+                  routesToCheck.push(normalizedR);
+                  allDetectedRoutes.add(normalizedR);
+                }
+              }
+            }
+          } catch (e) {}
+        }
+      }
+    } catch (err) {
+      ora().warn(pc.yellow(`Gagal menganalisis rute ${cleanRoute}: ${err.message}`));
+      publicRoutes.add(cleanRoute);
+    }
+  }
   
-  try {
-    await page.goto(baseUrl, { timeout: 15000 });
-    // Tunggu sampai halaman tenang
-    await page.waitForLoadState('networkidle', { timeout: 5000 }).catch(() => {});
-    
-    const hrefs = await page.evaluate(() => {
-      return Array.from(document.querySelectorAll('a'))
-        .map(a => a.getAttribute('href'))
-        .filter(Boolean);
+  await context.close();
+  nonAuthSpinner.succeed(`Analisis awal selesai. Terdeteksi ${publicRoutes.size} rute publik dan ${authRoutes.size} rute membutuhkan autentikasi.`);
+
+  // 2. Tanya Kredensial secara interaktif jika ada rute auth dan email/pass kosong
+  let finalEmail = email;
+  let finalPassword = password;
+
+  if (authRoutes.size > 0 && (!finalEmail || !finalPassword)) {
+    console.log(pc.yellow(`\n🔑 Mendeteksi ${authRoutes.size} halaman yang membutuhkan login.`));
+    if (!finalEmail) {
+      finalEmail = await promptUser('👉 Masukkan Email/Username: ');
+    }
+    if (!finalPassword) {
+      finalPassword = await promptUser('👉 Masukkan Password (input tersembunyi): ', true);
+      console.log(''); // baris baru setelah menekan enter
+    }
+  }
+
+  // 3. Crawl Fase Kedua (Login) untuk merayapi halaman dashboard internal
+  if (authRoutes.size > 0 && finalEmail && finalPassword) {
+    const authCrawlSpinner = ora('Melakukan login dan memindai halaman internal...').start();
+    const authContext = await browser.newContext();
+    const authPage = await authContext.newPage();
+
+    authPage.on('console', msg => {
+      const text = msg.text();
+      if (text.includes('Failed to fetch') || text.includes('TypeError: Failed to fetch')) {
+        return;
+      }
+      if (text.includes('[ERROR]') || text.includes('[WARN]')) {
+        console.log(pc.dim(`      [Auth-Crawler Log] ${text}`));
+      }
     });
-    
-    const baseOrigin = new URL(baseUrl).origin;
-    
-    for (const href of hrefs) {
-      try {
-        const resolvedUrl = new URL(href, baseUrl);
-        if (resolvedUrl.origin === baseOrigin) {
-          let route = resolvedUrl.pathname;
-          // Abaikan resource file statis
-          if (!/\.(pdf|png|jpg|jpeg|gif|css|js|svg|ico|woff|woff2|json)$/i.test(route)) {
-            let normalizedRoute = '/' + route.replace(/^\/+|\/+$/g, '');
-            if (normalizedRoute === '//') normalizedRoute = '/';
-            links.add(normalizedRoute);
+    authPage.on('pageerror', err => {
+      if (err.message.includes('Failed to fetch') || err.message.includes('TypeError: Failed to fetch')) return;
+      console.error(pc.red(`      [Auth-Crawler Error] ${err.message}`));
+    });
+
+    try {
+      const targetLoginUrl = `${baseUrl}${normLoginPath}`;
+      await authPage.goto(targetLoginUrl, { timeout: 20000 });
+      await authPage.waitForSelector('#username', { timeout: 10000 });
+      await authPage.waitForSelector('#password', { timeout: 10000 });
+      await authPage.fill('#username', finalEmail);
+      await authPage.fill('#password', finalPassword);
+      
+      const submitBtn = await authPage.locator('button[type="submit"], button.save-btn').first();
+      await submitBtn.click();
+      
+      // Tunggu hingga login berhasil (URL berubah) atau ada error message
+      let loginSuccess = false;
+      let loginError = '';
+      for (let i = 0; i < 40; i++) {
+        await new Promise(resolve => setTimeout(resolve, 250));
+        const currentUrl = authPage.url();
+        if (!currentUrl.includes('login') && !currentUrl.includes('splash')) {
+          loginSuccess = true;
+          break;
+        }
+        let errorText = null;
+        try {
+          errorText = await authPage.evaluate(() => {
+            const el = document.getElementById('errorMessage');
+            return el && !el.classList.contains('hidden') ? el.textContent : null;
+          });
+        } catch (e) {
+          // Ignore context destruction error during redirect/navigation
+        }
+        if (errorText) {
+          loginError = errorText.trim();
+          break;
+        }
+      }
+
+      if (!loginSuccess) {
+        throw new Error(loginError || 'Timeout: URL halaman tidak berubah dari halaman login setelah 10 detik.');
+      }
+
+      if (crawl) {
+        const authRoutesArray = Array.from(authRoutes);
+        for (const route of authRoutesArray) {
+          const targetUrl = `${baseUrl}${route}`;
+          try {
+            await authPage.goto(targetUrl, { timeout: 15000 });
+            await authPage.waitForLoadState('networkidle', { timeout: 5000 }).catch(() => {});
+
+            const hrefs = await authPage.evaluate(() => {
+              return Array.from(document.querySelectorAll('a'))
+                .map(a => a.getAttribute('href'))
+                .filter(Boolean);
+            });
+
+            const baseOrigin = new URL(baseUrl).origin;
+            for (const href of hrefs) {
+              try {
+                const resolvedUrl = new URL(href, baseUrl);
+                if (resolvedUrl.origin === baseOrigin) {
+                  let r = resolvedUrl.pathname;
+                  
+                  // Filter out logout/signout
+                  if (/logout|signout/i.test(r)) {
+                    continue;
+                  }
+
+                  if (!/\.(pdf|png|jpg|jpeg|gif|css|js|svg|ico|woff|woff2|json)$/i.test(r)) {
+                    let normalizedR = '/' + r.replace(/^\/+|\/+$/g, '');
+                    if (normalizedR === '//') normalizedR = '/';
+
+                    if (addHtml && normalizedR !== '/' && !normalizedR.endsWith('.html')) {
+                      normalizedR += '.html';
+                    }
+
+                    if (!publicRoutes.has(normalizedR) && !authRoutes.has(normalizedR)) {
+                      authRoutes.add(normalizedR);
+                    }
+                  }
+                }
+              } catch (e) {}
+            }
+          } catch (routeErr) {
+            // Abaikan jika rute tertentu gagal muat
           }
         }
-      } catch (e) {
-        // Href tidak valid (seperti tel:, mailto:, javascript:) diabaikan
       }
+      authCrawlSpinner.succeed(`Crawl pasca-login selesai. Menemukan total ${authRoutes.size} rute terotentikasi.`);
+    } catch (err) {
+      authCrawlSpinner.fail(`Gagal merayapi halaman terotentikasi: ${err.message}`);
+    } finally {
+      await authContext.close();
     }
-  } catch (err) {
-    // Abaikan jika gagal memuat sebagian halaman utama, return '/'
-  } finally {
-    await context.close();
   }
+
+  return {
+    publicRoutes: Array.from(publicRoutes),
+    authRoutes: Array.from(authRoutes),
+    email: finalEmail,
+    password: finalPassword
+  };
+}
+
+async function applyMockupBorder(browser, imageBuffer, deviceName, size, platform, isDarkTheme = false) {
+  const base64Image = imageBuffer.toString('base64');
   
-  return Array.from(links);
+  const now = new Date();
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const timeString = `${hours}:${minutes}`;
+  
+  const textColor = isDarkTheme ? '#ffffff' : '#000000';
+  const svgFill = isDarkTheme ? '#ffffff' : '#000000';
+  const batteryBorder = isDarkTheme ? '#ffffff' : '#000000';
+  const batteryLevelBg = isDarkTheme ? '#ffffff' : '#000000';
+  const indicatorBg = isDarkTheme ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.8)';
+  const androidIndicatorBg = isDarkTheme ? 'rgba(255, 255, 255, 0.6)' : 'rgba(0, 0, 0, 0.5)';
+  const tabletIndicatorBg = isDarkTheme ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.3)';
+
+  let frameClass = 'ios';
+  let topElementHTML = '<div class="dynamic-island"></div>';
+  let statusBarHTML = `
+    <div class="status-bar" style="height: 44px; padding: 0 32px; color: ${textColor};">
+      <div class="time">${timeString}</div>
+      <div class="status-right">
+        <svg width="17" height="11" viewBox="0 0 17 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect x="0.5" y="8" width="2.5" height="3" rx="0.5" fill="${svgFill}"/>
+          <rect x="4.5" y="6" width="2.5" height="5" rx="0.5" fill="${svgFill}"/>
+          <rect x="8.5" y="4" width="2.5" height="7" rx="0.5" fill="${svgFill}"/>
+          <rect x="12.5" y="1" width="2.5" height="10" rx="0.5" fill="${svgFill}"/>
+        </svg>
+        <svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left: 2px;">
+          <path d="M7.5 11C8.32843 11 9 10.3284 9 9.5C9 8.67157 8.32843 8 7.5 8C6.67157 8 6 8.67157 6 9.5C6 10.3284 6.67157 11 7.5 11Z" fill="${svgFill}"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 0C4.33806 0 1.50341 1.25414 0.556274 3.25056C0.370701 3.6417 0.53606 4.10842 0.926066 4.29815L1.87955 4.762C2.2612 4.94766 2.72124 4.7954 2.91572 4.41724C3.6067 3.07342 5.37895 2 7.5 2C9.62105 2 11.3933 3.07342 12.0843 4.41724C12.2788 4.7954 12.7388 4.94766 13.1205 4.762L14.0739 4.29815C14.4639 4.10842 14.6293 3.6417 14.4437 3.25056C13.4966 1.25414 10.6619 0 7.5 0ZM7.5 4C5.77259 4 4.22699 4.67499 3.6705 5.76077C3.47953 6.13333 3.62649 6.58988 3.99878 6.78168L4.95227 7.27282C5.33027 7.46752 5.79287 7.32483 5.99221 6.95353C6.26241 6.45028 6.83756 6 7.5 6C8.16244 6 8.73759 6.45028 9.00779 6.95353C9.20713 7.32483 9.66973 7.46752 10.0477 7.27282L11.0012 6.78168C11.3735 6.58988 11.5205 6.13333 11.3295 5.76077C10.773 4.67499 9.22741 4 7.5 4Z" fill="${svgFill}"/>
+        </svg>
+        <div class="battery" style="margin-left: 2px; border-color: ${batteryBorder};"><div class="battery-level" style="background-color: ${batteryLevelBg};"></div></div>
+      </div>
+    </div>
+  `;
+  let bottomElementHTML = `<div class="home-indicator" style="background: ${indicatorBg};"></div>`;
+  
+  if (platform === 'android') {
+    if (deviceName.includes('tablet')) {
+      frameClass = 'android-tablet';
+      topElementHTML = '';
+      statusBarHTML = `
+        <div class="status-bar" style="height: 32px; padding: 0 20px; font-size: 10px; line-height: 32px; color: ${textColor};">
+          <div class="time">${timeString}</div>
+          <div class="status-right">
+            <span>🛜</span>
+            <span style="margin-left: 4px; color: ${textColor};">🔋 100%</span>
+          </div>
+        </div>
+      `;
+      bottomElementHTML = `<div class="home-indicator" style="width: 160px; height: 4px; bottom: 4px; background: ${tabletIndicatorBg};"></div>`;
+    } else {
+      frameClass = 'android-phone';
+      topElementHTML = '<div class="punch-hole"></div>';
+      statusBarHTML = `
+        <div class="status-bar" style="height: 38px; padding: 0 24px; font-size: 11px; line-height: 38px; color: ${textColor};">
+          <div class="time">${timeString}</div>
+          <div class="status-right">
+            <svg width="15" height="11" viewBox="0 0 17 11" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: scale(0.9); margin-left: 2px;">
+              <rect x="0.5" y="8" width="2.5" height="3" rx="0.5" fill="${svgFill}"/>
+              <rect x="4.5" y="6" width="2.5" height="5" rx="0.5" fill="${svgFill}"/>
+              <rect x="8.5" y="4" width="2.5" height="7" rx="0.5" fill="${svgFill}"/>
+              <rect x="12.5" y="1" width="2.5" height="10" rx="0.5" fill="${svgFill}"/>
+            </svg>
+            <svg width="13" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: scale(0.9); margin-left: 2px;">
+              <path d="M7.5 11C8.32843 11 9 10.3284 9 9.5C9 8.67157 8.32843 8 7.5 8C6.67157 8 6 8.67157 6 9.5C6 10.3284 6.67157 11 7.5 11Z" fill="${svgFill}"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 0C4.33806 0 1.50341 1.25414 0.556274 3.25056C0.370701 3.6417 0.53606 4.10842 0.926066 4.29815L1.87955 4.762C2.2612 4.94766 2.72124 4.7954 2.91572 4.41724C3.6067 3.07342 5.37895 2 7.5 2C9.62105 2 11.3933 3.07342 12.0843 4.41724C12.2788 4.7954 12.7388 4.94766 13.1205 4.762L14.0739 4.29815C14.4639 4.10842 14.6293 3.6417 14.4437 3.25056C13.4966 1.25414 10.6619 0 7.5 0ZM7.5 4C5.77259 4 4.22699 4.67499 3.6705 5.76077C3.47953 6.13333 3.62649 6.58988 3.99878 6.78168L4.95227 7.27282C5.33027 7.46752 5.79287 7.32483 5.99221 6.95353C6.26241 6.45028 6.83756 6 7.5 6C8.16244 6 8.73759 6.45028 9.00779 6.95353C9.20713 7.32483 9.66973 7.46752 10.0477 7.27282L11.0012 6.78168C11.3735 6.58988 11.5205 6.13333 11.3295 5.76077C10.773 4.67499 9.22741 4 7.5 4Z" fill="${svgFill}"/>
+            </svg>
+            <div class="battery" style="border-radius: 2px; margin-left: 2px; border-color: ${batteryBorder};"><div class="battery-level" style="background-color: ${batteryLevelBg};"></div></div>
+          </div>
+        </div>
+      `;
+      bottomElementHTML = `<div class="home-indicator" style="background: ${androidIndicatorBg}; width: 120px; bottom: 6px;"></div>`;
+    }
+  }
+
+  const htmlContent = `
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  body {
+    background: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  }
+  .device-wrapper {
+    position: relative;
+    padding: 40px; /* space for shadow */
+    display: inline-block;
+    background: transparent;
+  }
+  .device-frame {
+    position: relative;
+    background: #000;
+    box-shadow: 
+      0 0 0 12px #1f1f21,
+      0 0 0 13px #2f2f31,
+      0 20px 50px rgba(0,0,0,0.6);
+    overflow: hidden;
+  }
+  .device-frame.ios {
+    border-radius: 54px;
+  }
+  .device-frame.ios .screenshot-img {
+    border-radius: 42px;
+  }
+  .device-frame.android-phone {
+    border-radius: 40px;
+    box-shadow: 
+      0 0 0 10px #2a2a2c,
+      0 0 0 11px #3a3a3c,
+      0 20px 50px rgba(0,0,0,0.6);
+  }
+  .device-frame.android-phone .screenshot-img {
+    border-radius: 30px;
+  }
+  .device-frame.android-tablet {
+    border-radius: 24px;
+    box-shadow: 
+      0 0 0 14px #2a2a2c,
+      0 20px 50px rgba(0,0,0,0.6);
+  }
+  .device-frame.android-tablet .screenshot-img {
+    border-radius: 12px;
+  }
+  .screenshot-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .dynamic-island {
+    position: absolute;
+    top: 18px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 110px;
+    height: 28px;
+    background: #000;
+    border-radius: 20px;
+    z-index: 100;
+    border: 0.5px solid rgba(255, 255, 255, 0.08);
+  }
+  .dynamic-island::after {
+    content: '';
+    position: absolute;
+    right: 25px;
+    top: 10px;
+    width: 8px;
+    height: 8px;
+    background: #111124;
+    border-radius: 50%;
+    box-shadow: inset 0 0 2px rgba(255,255,255,0.2);
+  }
+  .punch-hole {
+    position: absolute;
+    top: 14px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 12px;
+    height: 12px;
+    background: #000;
+    border-radius: 50%;
+    z-index: 100;
+    border: 1px solid rgba(255,255,255,0.15);
+  }
+  .status-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #fff;
+    font-weight: 600;
+    z-index: 99;
+    letter-spacing: -0.2px;
+  }
+  .status-right {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+  .battery {
+    width: 20px;
+    height: 10.5px;
+    border: 1px solid #fff;
+    border-radius: 3px;
+    position: relative;
+    padding: 1px;
+  }
+  .battery::after {
+    content: '';
+    position: absolute;
+    right: -3px;
+    top: 2px;
+    width: 2px;
+    height: 4.5px;
+    background: #fff;
+    border-radius: 0 1px 1px 0;
+  }
+  .battery-level {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    border-radius: 1px;
+  }
+  .home-indicator {
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 140px;
+    height: 5px;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 10px;
+    z-index: 100;
+  }
+</style>
+</head>
+<body>
+  <div class="device-wrapper">
+    <div class="device-frame ${frameClass}" style="width: ${size.logical.width}px; height: ${size.logical.height}px;">
+      ${topElementHTML}
+      ${statusBarHTML}
+      <img src="data:image/png;base64,${base64Image}" class="screenshot-img" />
+      ${bottomElementHTML}
+    </div>
+  </div>
+</body>
+</html>
+  `;
+
+  const extraWidth = 150;
+  const extraHeight = 150;
+  const context = await browser.newContext({
+    viewport: { 
+      width: size.logical.width + extraWidth, 
+      height: size.logical.height + extraHeight 
+    },
+    deviceScaleFactor: size.scale
+  });
+  
+  const page = await context.newPage();
+  await page.setContent(htmlContent);
+  await page.waitForLoadState('networkidle');
+  
+  const buffer = await page.locator('.device-wrapper').screenshot({
+    omitBackground: true
+  });
+  
+  await context.close();
+  return buffer;
 }
 
-async function captureScreenshots(url, paths, outputDir, platform, crawl, detectPages) {
+async function captureScreenshots(url, paths, outputDir, platform, crawl, detectPages, email, password, loginPath, addHtml, mockup) {
   if (!url.startsWith('http://') && !url.startsWith('https://')) {
     url = 'http://' + url;
   }
@@ -165,7 +706,10 @@ async function captureScreenshots(url, paths, outputDir, platform, crawl, detect
   let browser;
   const launchSpinner = ora('Launching Chromium browser...').start();
   try {
-    browser = await chromium.launch({ headless: true });
+    browser = await chromium.launch({
+      headless: true,
+      args: ['--disable-web-security']
+    });
     launchSpinner.succeed('Chromium browser launched successfully');
   } catch (err) {
     launchSpinner.fail(pc.red('Failed to launch Chromium browser'));
@@ -174,38 +718,33 @@ async function captureScreenshots(url, paths, outputDir, platform, crawl, detect
     process.exit(1);
   }
 
-  // 2. Lakukan auto-crawl jika diaktifkan
-  if (crawl) {
-    const crawlSpinner = ora('Crawling internal links dari beranda...').start();
-    try {
-      const crawledRoutes = await discoverLinks(browser, url);
-      crawlSpinner.succeed(`Crawling selesai. Menemukan ${crawledRoutes.length} rute unik.`);
-      finalPaths = [...new Set([...finalPaths, ...crawledRoutes])];
-    } catch (err) {
-      crawlSpinner.fail(`Gagal melakukan crawling: ${err.message}`);
-    }
+  // Panggil analyzeRoutes untuk memisahkan rute publik dan terotentikasi
+  let result;
+  try {
+    result = await analyzeRoutes(browser, url, finalPaths, email, password, loginPath, addHtml, crawl);
+  } catch (err) {
+    console.error(pc.red(`Gagal menganalisis rute: ${err.message}`));
+    await browser.close();
+    process.exit(1);
   }
 
-  // Normalisasi semua path
-  finalPaths = finalPaths
-    .map(p => {
-      let clean = p.trim();
-      if (!clean) return null;
-      return '/' + clean.replace(/^\/+/, '');
-    })
-    .filter(Boolean);
+  const { publicRoutes, authRoutes, email: finalEmail, password: finalPassword } = result;
 
-  // Hilangkan duplikasi rute
-  finalPaths = [...new Set(finalPaths)];
-
-  if (finalPaths.length === 0) {
-    finalPaths = ['/'];
+  console.log(pc.bold(`\nTerdeteksi Rute Publik (${publicRoutes.length}):`));
+  publicRoutes.forEach(p => console.log(`  - ${pc.green(p)}`));
+  
+  if (authRoutes.length > 0) {
+    console.log(pc.bold(`\nTerdeteksi Rute Membutuhkan Autentikasi (${authRoutes.length}):`));
+    authRoutes.forEach(p => console.log(`  - ${pc.cyan(p)}`));
   }
-
-  console.log(pc.bold(`\nRute yang akan dipotret (${finalPaths.length}):`));
-  finalPaths.forEach(p => console.log(`  - ${pc.cyan(p)}`));
   console.log('');
 
+  if (publicRoutes.length === 0 && authRoutes.length === 0) {
+    console.log(pc.yellow('Tidak ada rute yang ditemukan untuk dipotret.'));
+    await browser.close();
+    return;
+  }
+
   for (const plat of targetPlatforms) {
     const config = DEVICE_CONFIGS[plat];
     console.log(pc.bold(pc.blue(`💻 Platform: ${plat.toUpperCase()}`)));
@@ -213,6 +752,11 @@ async function captureScreenshots(url, paths, outputDir, platform, crawl, detect
     for (const [deviceName, size] of Object.entries(config.devices)) {
       console.log(pc.magenta(`  📱 Processing ${deviceName} (${size.logical.width * size.scale}x${size.logical.height * size.scale}px)...`));
 
+      const deviceOutputDir = path.join(outputDir, plat, deviceName);
+      if (!fs.existsSync(deviceOutputDir)) {
+        fs.mkdirSync(deviceOutputDir, { recursive: true });
+      }
+
       const context = await browser.newContext({
         viewport: size.logical,
         userAgent: config.userAgent,
@@ -223,27 +767,194 @@ async function captureScreenshots(url, paths, outputDir, platform, crawl, detect
 
       const page = await context.newPage();
 
-      for (const route of finalPaths) {
-        const targetUrl = `${url}${route}`;
-        const nameSnippet = safeFilename(route);
-        const filename = `${deviceName}_${nameSnippet}.png`;
-        const outputPath = path.join(outputDir, filename);
-
-        const pageSpinner = ora(`    Navigating to ${route}...`).start();
+      const saveScreenshot = async (outputPath) => {
+        if (mockup) {
+          const isDarkTheme = await page.evaluate(() => {
+            const bodyBg = window.getComputedStyle(document.body).backgroundColor;
+            const match = bodyBg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+            if (match) {
+              const r = parseInt(match[1]), g = parseInt(match[2]), b = parseInt(match[3]);
+              const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+              const alphaMatch = bodyBg.match(/rgba?\(\d+,\s*\d+,\s*\d+,\s*([\d.]+)/);
+              if (alphaMatch && parseFloat(alphaMatch[1]) < 0.1) {
+                // semi-transparent, fall back to text color check
+              } else {
+                return brightness < 128;
+              }
+            }
+            const bodyColor = window.getComputedStyle(document.body).color;
+            const colorMatch = bodyColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+            if (colorMatch) {
+              const r = parseInt(colorMatch[1]), g = parseInt(colorMatch[2]), b = parseInt(colorMatch[3]);
+              const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+              return brightness > 128;
+            }
+            return false;
+          });
 
-        try {
-          await page.goto(targetUrl, { timeout: 30000 });
-          pageSpinner.text = `    Waiting for network idle on ${route}...`;
-          await page.waitForLoadState('networkidle', { timeout: 15000 });
-          
-          // Tunggu sebentar untuk layout stabil
-          await new Promise(resolve => setTimeout(resolve, 800));
-
-          pageSpinner.text = `    Saving screenshot ${filename}...`;
+          const raw = await page.screenshot({ fullPage: false });
+          const framed = await applyMockupBorder(browser, raw, deviceName, size, plat, isDarkTheme);
+          fs.writeFileSync(outputPath, framed);
+        } else {
           await page.screenshot({ path: outputPath, fullPage: false });
-          pageSpinner.succeed(pc.green(`   ✔ Saved ${filename}`));
-        } catch (err) {
-          pageSpinner.fail(pc.red(`   ✘ Failed to capture ${route}: ${err.message}`));
+        }
+      };
+
+      // Forward browser console logs and errors to terminal for debugging
+      page.on('console', msg => {
+        const text = msg.text();
+        if (text.includes('Failed to fetch') || text.includes('TypeError: Failed to fetch')) {
+          return;
+        }
+        // filter out noisy logs but keep useful ones
+        if (text.includes('[ERROR]') || text.includes('[WARN]')) {
+          console.log(pc.dim(`      [Browser Log] ${text}`));
+        }
+      });
+      page.on('pageerror', err => {
+        if (err.message.includes('Failed to fetch') || err.message.includes('TypeError: Failed to fetch')) return;
+        console.error(pc.red(`      [Browser Error] ${err.message}`));
+      });
+
+      // --- Tahap 1: Memotret Halaman Publik (Tanpa Login) ---
+      if (publicRoutes.length > 0) {
+        console.log(`    📸 Memotret halaman publik...`);
+        for (const route of publicRoutes) {
+          const targetUrl = `${url}${route}`;
+          const nameSnippet = safeFilename(route);
+          const filename = `${nameSnippet}.png`;
+          const outputPath = path.join(deviceOutputDir, filename);
+
+          const pageSpinner = ora(`      Navigating to ${route}...`).start();
+          try {
+            await page.goto(targetUrl, { timeout: 30000 });
+            pageSpinner.text = `      Waiting for network idle on ${route}...`;
+            await page.waitForLoadState('networkidle', { timeout: 15000 });
+            await new Promise(resolve => setTimeout(resolve, 800));
+
+            pageSpinner.text = `      Saving screenshot ${filename}...`;
+            await saveScreenshot(outputPath);
+            pageSpinner.succeed(pc.green(`     ✔ Saved ${plat}/${deviceName}/${filename}`));
+          } catch (err) {
+            pageSpinner.fail(pc.red(`     ✘ Failed to capture ${route}: ${err.message}`));
+          }
+        }
+      }
+
+      // --- Tahap 2: Memotret Halaman Terotentikasi ---
+      if (authRoutes.length > 0) {
+        if (finalEmail && finalPassword) {
+          const loginSpinner = ora(`    Logging in to session for ${deviceName}...`).start();
+          try {
+            const targetLoginUrl = `${url}/${loginPath.replace(/^\/+/, '')}`;
+            await page.goto(targetLoginUrl, { timeout: 30000 });
+            await page.waitForSelector('#username', { timeout: 10000 });
+            await page.waitForSelector('#password', { timeout: 10000 });
+            await page.fill('#username', finalEmail);
+            await page.fill('#password', finalPassword);
+
+            const submitBtn = await page.locator('button[type="submit"], button.save-btn').first();
+            await submitBtn.click();
+            
+            // Tunggu hingga login berhasil (URL berubah) atau ada error message
+            let loginSuccess = false;
+            let loginError = '';
+            for (let i = 0; i < 40; i++) {
+              await new Promise(resolve => setTimeout(resolve, 250));
+              const currentUrl = page.url();
+              if (!currentUrl.includes('login') && !currentUrl.includes('splash')) {
+                loginSuccess = true;
+                break;
+              }
+              let errorText = null;
+              try {
+                errorText = await page.evaluate(() => {
+                  const el = document.getElementById('errorMessage');
+                  return el && !el.classList.contains('hidden') ? el.textContent : null;
+                });
+              } catch (e) {
+                // Ignore context destruction error during redirect/navigation
+              }
+              if (errorText) {
+                loginError = errorText.trim();
+                break;
+              }
+            }
+
+            if (!loginSuccess) {
+              throw new Error(loginError || 'Timeout: URL halaman tidak berubah dari halaman login setelah 10 detik.');
+            }
+
+            loginSpinner.succeed(`    Logged in successfully for ${deviceName}`);
+
+            console.log(`    📸 Memotret halaman terotentikasi...`);
+            for (const route of authRoutes) {
+              const targetUrl = `${url}${route}`;
+              const nameSnippet = safeFilename(route);
+              const filename = `${nameSnippet}.png`;
+              const outputPath = path.join(deviceOutputDir, filename);
+
+              const pageSpinner = ora(`      Navigating to ${route}...`).start();
+              try {
+                await page.goto(targetUrl, { timeout: 30000 });
+                pageSpinner.text = `      Waiting for network idle on ${route}...`;
+                await page.waitForLoadState('networkidle', { timeout: 15000 });
+                await new Promise(resolve => setTimeout(resolve, 800));
+
+                pageSpinner.text = `      Saving screenshot ${filename}...`;
+                await saveScreenshot(outputPath);
+                pageSpinner.succeed(pc.green(`     ✔ Saved ${plat}/${deviceName}/${filename}`));
+              } catch (err) {
+                pageSpinner.fail(pc.red(`     ✘ Failed to capture ${route}: ${err.message}`));
+              }
+            }
+          } catch (loginErr) {
+            loginSpinner.fail(pc.red(`    Auto-login failed for ${deviceName}: ${loginErr.message}`));
+            console.log(pc.yellow(`    💡 Melanjutkan capture auth routes tanpa login (mungkin ter-redirect ke login/splash).`));
+            
+            for (const route of authRoutes) {
+              const targetUrl = `${url}${route}`;
+              const nameSnippet = safeFilename(route);
+              const filename = `${nameSnippet}.png`;
+              const outputPath = path.join(deviceOutputDir, filename);
+
+              const pageSpinner = ora(`      Navigating to ${route}...`).start();
+              try {
+                await page.goto(targetUrl, { timeout: 30000 });
+                pageSpinner.text = `      Waiting for network idle on ${route}...`;
+                await page.waitForLoadState('networkidle', { timeout: 15000 });
+                await new Promise(resolve => setTimeout(resolve, 800));
+
+                pageSpinner.text = `      Saving screenshot ${filename}...`;
+                await saveScreenshot(outputPath);
+                pageSpinner.succeed(pc.green(`     ✔ Saved ${plat}/${deviceName}/${filename}`));
+              } catch (err) {
+                pageSpinner.fail(pc.red(`     ✘ Failed to capture ${route}: ${err.message}`));
+              }
+            }
+          }
+        } else {
+          console.log(pc.yellow(`    ⚠ Skip login (kredensial kosong). Memotret auth routes tanpa login.`));
+          for (const route of authRoutes) {
+            const targetUrl = `${url}${route}`;
+            const nameSnippet = safeFilename(route);
+            const filename = `${nameSnippet}.png`;
+            const outputPath = path.join(deviceOutputDir, filename);
+
+            const pageSpinner = ora(`      Navigating to ${route}...`).start();
+            try {
+              await page.goto(targetUrl, { timeout: 30000 });
+              pageSpinner.text = `      Waiting for network idle on ${route}...`;
+              await page.waitForLoadState('networkidle', { timeout: 15000 });
+              await new Promise(resolve => setTimeout(resolve, 800));
+
+              pageSpinner.text = `      Saving screenshot ${filename}...`;
+              await saveScreenshot(outputPath);
+              pageSpinner.succeed(pc.green(`     ✔ Saved ${plat}/${deviceName}/${filename}`));
+            } catch (err) {
+              pageSpinner.fail(pc.red(`     ✘ Failed to capture ${route}: ${err.message}`));
+            }
+          }
         }
       }
 
@@ -258,13 +969,18 @@ async function captureScreenshots(url, paths, outputDir, platform, crawl, detect
 program
   .name('mobile-snap')
   .description('⚡ MobileSnap CLI: Automate App Store & Google Play Store screenshots')
-  .version('1.0.0')
+  .version('1.0.4')
   .requiredOption('-u, --url <url>', 'Base URL of the local development server (e.g. localhost:3000)')
   .option('-p, --paths <paths>', 'Comma-separated list of routes to capture', '/')
   .option('-o, --output <output>', 'Output directory to save screenshots', 'mobilesnap_output')
   .option('-l, --platform <platform>', 'Target platform: "ios", "android", or "both"', 'ios')
   .option('-c, --crawl', 'Discover and screenshot all internal links automatically', false)
   .option('-d, --detect-pages', 'Scan local project pages directory (src/pages or pages) for static routes', false)
+  .option('--email <email>', 'Email for automatic login authentication')
+  .option('--password <password>', 'Password for automatic login authentication')
+  .option('--login-path <path>', 'Path to the login page', '/login.html')
+  .option('--html', 'Auto append .html extension to detected routes', false)
+  .option('-m, --mockup', 'Wrap screenshots in a beautiful iPhone/Android device mockup frame', false)
   .action((options) => {
     let pathList = [];
     if (options.paths) {
@@ -283,7 +999,12 @@ program
       options.output,
       platformVal,
       options.crawl,
-      options.detectPages
+      options.detectPages,
+      options.email,
+      options.password,
+      options.loginPath,
+      options.html,
+      options.mockup
     ).catch(err => {
       console.error(pc.red(`Terjadi kesalahan tidak terduga: ${err.message}`));
       process.exit(1);

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "mobile-snap",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "Automate pixel-precise App Store & Google Play screenshots from a local web server",
   "type": "module",
   "main": "bin/cli.js",
   "bin": {
     "mobile-snap": "bin/cli.js"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/firstryan/mobile-snap.git"
+  },
   "files": [
     "bin",
+    "assets",
     "README.md",
     "README.html"
   ],