Brand: cat mark image in app and docs; cap max active jobs at 2

Goncalves, Carla · Goncalves, Carla · commit 9ede472480a4 · 2026-04-09T20:04:12.000+01:00
- Add cat.png to frontend/public and docs; use img for brand mark
- Docs topbar uses ./cat.png with object-fit
- Align CRAWL_MAX_ACTIVE_JOBS parse max with hard cap; document in README/.env.example
- Fly: max_machines_running = 2

Made-with: Cursor
diff --git a/.env.example b/.env.example
@@ -46,6 +46,7 @@ CRAWL_DEFAULT_CONCURRENCY=6
 CRAWL_MAX_CONCURRENCY=6
 CRAWL_DEFAULT_TIMEOUT_MS=12000
 CRAWL_MAX_TIMEOUT_MS=30000
+# Hard cap for this project: max 2 concurrent active crawl jobs.
 CRAWL_MAX_ACTIVE_JOBS=2
 CRAWL_MAX_QUEUED_JOBS=20
 CRAWL_MAX_REDIRECTS=10
diff --git a/README.md b/README.md
@@ -92,6 +92,7 @@ Important operational constraints:
 - Staging and production must use `JOB_STATE_BACKEND=firestore`
 - All production instances must share the same Firestore backend and collection prefix
 - Crawl jobs are rate-limited and capped by backend hard limits
+- Active crawl jobs are hard-capped to `2` (`CRAWL_MAX_ACTIVE_JOBS`)
 - Frontend controls are aligned to the backend caps: `maxPages` up to `300`, `concurrency` up to `6`
 - The crawler is for public `http(s)` targets only; internal, loopback, link-local, and metadata destinations are blocked
 - Crawling stays on the same host as the start URL
@@ -237,6 +238,7 @@ GitHub Pages only serves the static docs and bookmarklet loader; crawls still ru
 ### Fly.io (optional)
 
 [`fly.toml`](fly.toml) is only relevant if you choose to deploy with [Fly.io](https://fly.io/) instead of (or in addition to) Cloud Run. Ignore it if you use Cloud Run only.
+The project Fly config caps running machines at `2` via `max_machines_running = 2`.
 
 ### Doc screenshots (Playwright)
 
diff --git a/backend/index.js b/backend/index.js
@@ -169,7 +169,7 @@ const SERVER_CONFIG = {
     maxConcurrency: parseEnvInt("CRAWL_MAX_CONCURRENCY", 6, { min: 1, max: 64 }),
     defaultTimeoutMs: parseEnvInt("CRAWL_DEFAULT_TIMEOUT_MS", 12000, { min: 1000, max: 120000 }),
     maxTimeoutMs: parseEnvInt("CRAWL_MAX_TIMEOUT_MS", 30000, { min: 1000, max: 120000 }),
-    maxActiveJobs: parseEnvInt("CRAWL_MAX_ACTIVE_JOBS", 2, { min: 1, max: 100 }),
+    maxActiveJobs: parseEnvInt("CRAWL_MAX_ACTIVE_JOBS", 2, { min: 1, max: 2 }),
     maxQueuedJobs: parseEnvInt("CRAWL_MAX_QUEUED_JOBS", 20, { min: 0, max: 1000 }),
     maxRedirects: parseEnvInt("CRAWL_MAX_REDIRECTS", 10, { min: 1, max: 50 }),
     maxHtmlBytes: parseEnvInt("CRAWL_MAX_HTML_BYTES", 2 * 1024 * 1024, { min: 1024, max: 50 * 1024 * 1024 }),
diff --git a/docs/cat.png b/docs/cat.png
diff --git a/docs/index.html b/docs/index.html
@@ -160,7 +160,9 @@
         height: 40px;
         border-radius: 11px;
         border: 1px solid var(--line-strong);
-        background: linear-gradient(145deg, var(--accent-dim), rgba(255, 255, 255, 0.03));
+        object-fit: cover;
+        display: block;
+        flex-shrink: 0;
       }
 
       .brand__name {
@@ -396,6 +398,21 @@
         margin-bottom: 0;
       }
 
+      .hero__bookmarklet-wrap {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.35rem;
+      }
+
+      .hero__bookmarklet-hint {
+        margin: 0;
+        font-size: 0.78rem;
+        line-height: 1.4;
+        color: var(--text-quiet);
+        max-width: 16rem;
+      }
+
       .hero__note {
         margin: 0;
         font-size: 0.88rem;
@@ -1189,7 +1206,14 @@
     <header class="topbar">
       <div class="topbar__inner">
         <div class="brand">
-          <div class="brand__mark" aria-hidden="true"></div>
+          <img
+            class="brand__mark"
+            src="./cat.png"
+            alt=""
+            width="40"
+            height="40"
+            decoding="async"
+          />
           <div>
             <span class="brand__name">Cat Crawler</span>
             <span class="brand__tag">Crawl, validate, export</span>
@@ -1223,15 +1247,18 @@ <h1 id="hero-heading" class="hero__title">Catch broken routes <em>before users d
               <li>TXT &amp; CSV export</li>
             </ul>
             <div class="hero__actions">
-              <a
-                class="btn btn--primary"
-                id="bookmarkletLink"
-                href="#bookmarklet"
-                draggable="true"
-                title="Drag this button to your bookmarks bar to install"
-                aria-label="Install Cat Crawler: drag this button to your bookmarks bar, or activate to jump to copy the bookmarklet link"
-                >Drag to bookmarks bar</a
-              >
+              <div class="hero__bookmarklet-wrap">
+                <a
+                  class="btn btn--primary"
+                  id="bookmarkletLink"
+                  href="#bookmarklet"
+                  draggable="true"
+                  title="Drag to your bookmarks bar to install"
+                  aria-label="Cat Crawler bookmarklet: drag to bookmarks bar to save as 🐱 Cat Crawler, or activate to jump to copy the bookmarklet link"
+                  >🐱 Cat Crawler</a
+                >
+                <p class="hero__bookmarklet-hint">Drag the button above to your bookmarks bar.</p>
+              </div>
               <a class="btn btn--secondary" href="#features">Explore the product</a>
               <a class="btn btn--ghost" href="https://github.com/CarlasHub/site-crawler/blob/main/README.md">README on GitHub</a>
             </div>
@@ -1853,6 +1880,7 @@ <h3>Current limits</h3>
                   <li>Public <code>http(s)</code> targets only; internal, loopback, link-local, and metadata destinations are blocked.</li>
                   <li>UI and backend caps are <code>300</code> pages and <code>6</code> concurrency.</li>
                   <li>Crawl jobs are rate-limited; caps and safety rules are enforced server-side.</li>
+                  <li>Active crawl jobs are hard-capped to <code>2</code> (<code>CRAWL_MAX_ACTIVE_JOBS</code>).</li>
                   <li>Soft-failure, pattern, impact, and duplicate-candidate views are review aids—heuristic or grouped—not absolute verdicts.</li>
                 </ul>
               </article>
@@ -1862,6 +1890,7 @@ <h3>Production deployment notes</h3>
                   <li>Local development defaults to file-backed job state.</li>
                   <li>Staging and production must use <code>JOB_STATE_BACKEND=firestore</code>.</li>
                   <li>Production instances must share the same Firestore backend and collection prefix.</li>
+                  <li>Repo Fly config caps running machines at <code>2</code> when Fly.io is used.</li>
                   <li>The bookmarklet must point at a real deployed app origin.</li>
                 </ul>
               </article>
diff --git a/docs/landing.html b/docs/landing.html
@@ -160,7 +160,9 @@
         height: 40px;
         border-radius: 11px;
         border: 1px solid var(--line-strong);
-        background: linear-gradient(145deg, var(--accent-dim), rgba(255, 255, 255, 0.03));
+        object-fit: cover;
+        display: block;
+        flex-shrink: 0;
       }
 
       .brand__name {
@@ -396,6 +398,21 @@
         margin-bottom: 0;
       }
 
+      .hero__bookmarklet-wrap {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.35rem;
+      }
+
+      .hero__bookmarklet-hint {
+        margin: 0;
+        font-size: 0.78rem;
+        line-height: 1.4;
+        color: var(--text-quiet);
+        max-width: 16rem;
+      }
+
       .hero__note {
         margin: 0;
         font-size: 0.88rem;
@@ -1189,7 +1206,14 @@
     <header class="topbar">
       <div class="topbar__inner">
         <div class="brand">
-          <div class="brand__mark" aria-hidden="true"></div>
+          <img
+            class="brand__mark"
+            src="./cat.png"
+            alt=""
+            width="40"
+            height="40"
+            decoding="async"
+          />
           <div>
             <span class="brand__name">Cat Crawler</span>
             <span class="brand__tag">Crawl, validate, export</span>
@@ -1223,15 +1247,18 @@ <h1 id="hero-heading" class="hero__title">Catch broken routes <em>before users d
               <li>TXT &amp; CSV export</li>
             </ul>
             <div class="hero__actions">
-              <a
-                class="btn btn--primary"
-                id="bookmarkletLink"
-                href="#bookmarklet"
-                draggable="true"
-                title="Drag this button to your bookmarks bar to install"
-                aria-label="Install Cat Crawler: drag this button to your bookmarks bar, or activate to jump to copy the bookmarklet link"
-                >Drag to bookmarks bar</a
-              >
+              <div class="hero__bookmarklet-wrap">
+                <a
+                  class="btn btn--primary"
+                  id="bookmarkletLink"
+                  href="#bookmarklet"
+                  draggable="true"
+                  title="Drag to your bookmarks bar to install"
+                  aria-label="Cat Crawler bookmarklet: drag to bookmarks bar to save as 🐱 Cat Crawler, or activate to jump to copy the bookmarklet link"
+                  >🐱 Cat Crawler</a
+                >
+                <p class="hero__bookmarklet-hint">Drag the button above to your bookmarks bar.</p>
+              </div>
               <a class="btn btn--secondary" href="#features">Explore the product</a>
               <a class="btn btn--ghost" href="https://github.com/CarlasHub/site-crawler/blob/main/README.md">README on GitHub</a>
             </div>
@@ -1853,6 +1880,7 @@ <h3>Current limits</h3>
                   <li>Public <code>http(s)</code> targets only; internal, loopback, link-local, and metadata destinations are blocked.</li>
                   <li>UI and backend caps are <code>300</code> pages and <code>6</code> concurrency.</li>
                   <li>Crawl jobs are rate-limited; caps and safety rules are enforced server-side.</li>
+                  <li>Active crawl jobs are hard-capped to <code>2</code> (<code>CRAWL_MAX_ACTIVE_JOBS</code>).</li>
                   <li>Soft-failure, pattern, impact, and duplicate-candidate views are review aids—heuristic or grouped—not absolute verdicts.</li>
                 </ul>
               </article>
@@ -1862,6 +1890,7 @@ <h3>Production deployment notes</h3>
                   <li>Local development defaults to file-backed job state.</li>
                   <li>Staging and production must use <code>JOB_STATE_BACKEND=firestore</code>.</li>
                   <li>Production instances must share the same Firestore backend and collection prefix.</li>
+                  <li>Repo Fly config caps running machines at <code>2</code> when Fly.io is used.</li>
                   <li>The bookmarklet must point at a real deployed app origin.</li>
                 </ul>
               </article>
diff --git a/fly.toml b/fly.toml
@@ -9,6 +9,7 @@ primary_region = "ams"
   auto_stop_machines = "stop"
   auto_start_machines = true
   min_machines_running = 0
+  max_machines_running = 2
   processes = ["app"]
 
 [[vm]]
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -559,7 +559,14 @@ export default function App() {
       <header className="header">
         <div className="headerInner">
           <div className="brand">
-            <div className="brandMark" aria-hidden="true" />
+            <img
+              className="brandMark"
+              src="/cat.png"
+              alt=""
+              width={50}
+              height={50}
+              decoding="async"
+            />
             <div className="brandText">
               <div className="brandName">{brandName}</div>
               <div className="brandTag">{brandTag}</div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -152,34 +152,15 @@
    }
    
    .brandMark {
-     /* width: 44px;
-     height: 44px;
+     width: 50px;
+     height: 50px;
      border-radius: 12px;
-     background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
-     border: none;
-     box-shadow: 
+     object-fit: cover;
+     display: block;
+     flex-shrink: 0;
+     box-shadow:
        var(--shadow-sm),
        0 0 24px -4px var(--accent-glow);
-     display: grid;
-     place-items: center;
-     position: relative;
-     overflow: hidden; */
-
-     width: 50px;
-     height: 50px;
-     background-image: url("/cat.png");
-     background-size: cover;
-   }
-   
-   .brandMark::before {
-     /* content: '';
-     position: absolute;
-     top: 0;
-     left: 0;
-     right: 0;
-     height: 50%;
-     background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent);
-     border-radius: 12px 12px 0 0; */
    }
    
    .brandName { 
@@ -1088,6 +1069,12 @@
     display: none;
   }
 
+  /* Pin / “Access control” panel must not appear in the bookmarklet iframe */
+  .shell--bookmarklet #access,
+  .shell--bookmarklet section[aria-labelledby="accessTitle"] {
+    display: none !important;
+  }
+
   .shell--bookmarklet .main {
     padding-top: 88px;
   }
