Use dark website styling and original Liquid Glass captures

.github/workflows/pages.yml

@@ -41,7 +41,7 @@ jobs:
           fi
 
           # Current, audited product captures and accessible trailer captions.
-          for asset in docs/menu-navigation-*.png docs/widget-showcase.png docs/loom-2.0-poster.png docs/loom-2.0-notifications.png docs/loom-2.0-captions.vtt; do
+          for asset in docs/menu-navigation-*.png docs/loom-2.0-desktop-*.png docs/widget-showcase.png docs/loom-2.0-poster.png docs/loom-2.0-notifications.png docs/loom-2.0-captions.vtt; do
             test -s "$asset"
             cp "$asset" site/docs/
           done

README.md

@@ -30,7 +30,7 @@ Loom includes signed updates through Sparkle. Check for updates from the Loom me
 
 The Sessions view brings agent activity into one place. Waiting and failed sessions are surfaced first, followed by working and idle sessions; recent sessions can be collapsed.
 
-<p align="center"><img src="docs/menu-navigation-sessions.png" width="380" alt="Loom 2.0 Sessions view with session states, provider filters, search, and activity filters"></p>
+<p align="center"><a href="docs/loom-2.0-desktop-sessions.png"><img src="docs/loom-2.0-window-sessions.png" width="380" alt="Loom 2.0 Sessions view with session states, provider filters, search, and activity filters"></a></p>
 
 Search by repository, branch, or host app, then filter by attention, working, or recent activity. Available actions include focusing the host app, copying process or session details, and revealing a workspace in Finder.
 
@@ -42,7 +42,7 @@ Loom supports session discovery for **OpenAI Codex**, **Google Antigravity**, an
 
 For Codex and Antigravity, Loom can show quota data available through their local interfaces and send threshold or reset notifications. Quota alerts support **15%** and **5%** thresholds. Claude Code does not expose quota through its upstream local interface. Quota readings are observations and may be unavailable when a provider cannot be reached.
 
-<p align="center"><img src="docs/menu-navigation-usage.png" width="380" alt="Loom 2.0 Usage view showing observed provider quota and reset information"></p>
+<p align="center"><a href="docs/loom-2.0-desktop-usage.png"><img src="docs/loom-2.0-window-usage.png" width="380" alt="Loom 2.0 Usage view showing observed provider quota and reset information"></a></p>
 
 Notifications can cover observed quota thresholds and session state changes. Finished alerts can be set to require a minimum observed working duration; Loom measures that duration while it is monitoring. Notification preferences and macOS permission choices are respected. Test-notification controls are available only in Debug builds.
 
@@ -52,7 +52,7 @@ Notifications can cover observed quota thresholds and session state changes. Fin
 
 Inspect local agent data with on-demand, read-only storage scans and per-folder breakdowns.
 
-<p align="center"><img src="docs/menu-navigation-storage.png" width="380" alt="Loom 2.0 Storage view showing local storage usage"></p>
+<p align="center"><a href="docs/loom-2.0-desktop-storage.png"><img src="docs/loom-2.0-window-storage.png" width="380" alt="Loom 2.0 Storage view showing local storage usage"></a></p>
 
 ## Widgets
 
@@ -63,7 +63,7 @@ Loom includes Sessions, Quotas, and Overview widgets for the desktop and Notific
   <br><sub>Widget previews use illustrative, privacy-safe demo data.</sub>
 </p>
 
-The session, usage, storage, widget, and notification screenshots on this page show the current 2.0 interface; session, quota, and storage values shown are illustrative demo data.
+The Sessions, Usage and Storage images are the original individual-window captures from the 2.0 video; click them to see the original desktop captures with native Liquid Glass. Widget previews and notification captures also show the current 2.0 interface; session, quota, and storage values shown are illustrative demo data.
 
 See [widget setup and verification](docs/WIDGETS.md) and [interface and storage details](docs/INTERFACE_AND_STORAGE.md).
 

docs/DEMO_MEDIA.md

@@ -34,3 +34,5 @@ Notification banners are genuine user-provided macOS captures from 24 October 20
 ## Website and README captures
 
 The current Sessions, Usage, Storage and widget images are the same audited native 2.0 captures used in the trailer. The [notification examples](loom-2.0-notifications.png) are genuine macOS banners captured from the explicit demo scenarios; their values are illustrative. The website includes an optional [English caption track](loom-2.0-captions.vtt). The film already contains visible subtitles, so this extra track is off by default to avoid duplicate text.
+
+The website Sessions, Usage and Storage visuals now use the user's full-desktop captures from the approved video (`loom-2.0-desktop-*.png`). CSS crops the surrounding desktop for readability while preserving its original wallpaper and native Liquid Glass; opening the image shows the untouched 1920×1080 source. No interface, wallpaper, values or translucency is reconstructed.

pages/index.html

@@ -3,6 +3,8 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="theme-color" content="#101113">
+<meta name="color-scheme" content="dark">
 <title>Loom for macOS — Local AI Coding Agent Monitor</title>
 <meta name="description" content="See what Codex, Claude Code, and Antigravity are doing on your Mac. Native sessions, observed quotas, notifications, and widgets. Free and open source.">
 <link rel="canonical" href="https://chaiwithcode.github.io/Loom/">
@@ -40,8 +42,8 @@ <h1 id="hero-title"><span class="line"><span>Your agents,</span></span><span cla
 <p class="copy-status" id="copy-status" aria-live="polite"></p>
 </div>
 <figure class="hero-product">
-<a class="image-link" href="docs/menu-navigation-sessions.png" data-lightbox aria-label="Enlarge Loom 2.0 Sessions screenshot"><img src="docs/menu-navigation-sessions.png" alt="Loom 2.0 Sessions view with provider filters, search, working and idle sessions, and discovery diagnostics." width="840" height="810" fetchpriority="high"></a>
-<figcaption><span>Native macOS. Now with Liquid Glass.</span><span class="image-hint">Click to explore <span aria-hidden="true">↗</span></span></figcaption>
+<a class="image-link" href="docs/loom-2.0-desktop-sessions.png" data-lightbox aria-label="Enlarge Loom 2.0 Sessions screenshot"><span class="desktop-capture capture-sessions"><img src="docs/loom-2.0-desktop-sessions.png" alt="User-captured Loom 2.0 Liquid Glass Sessions popover over the macOS desktop, with waiting, failed and active demo sessions." width="1920" height="1080" fetchpriority="high"></span></a>
+<figcaption><span>Your Mac. Genuine Liquid Glass.</span><span class="image-hint">Open full capture <span aria-hidden="true">↗</span></span></figcaption>
 </figure>
 <p class="hero-footnote">Genuine app captures. Illustrative, privacy-safe session, quota, and storage data throughout.</p>
 </section>
@@ -60,15 +62,15 @@ <h1 id="hero-title"><span class="line"><span>Your agents,</span></span><span cla
 <div class="section-heading"><p class="eyebrow">Made for the way you work</p><h2 id="features-title">A clear view.<br>A quieter workflow.</h2></div>
 <article class="feature grid">
 <div class="feature-copy"><p class="eyebrow">01 / Sessions</p><h3>Know what needs you.</h3><p>Working, waiting, idle, or needing attention. Bring your local coding sessions together, with the ones that need you first.</p><p>Search by repository, branch, or host app. Focus the app, reveal a workspace in Finder, or inspect discovery diagnostics when the evidence needs a closer look.</p><a class="text-link" href="https://github.com/chaiwithcode/Loom/blob/main/docs/RELEASE_NOTES_v2.0.0.md">What's new in 2.0 <span aria-hidden="true">↗</span></a></div>
-<figure class="feature-image sessions"><a class="image-link" href="docs/menu-navigation-sessions.png" data-lightbox aria-label="Enlarge Sessions view"><img src="docs/menu-navigation-sessions.png" width="840" height="810" loading="lazy" alt="Sessions organized by provider and activity, with search and expandable discovery diagnostics."></a><figcaption>Real app interface · illustrative sessions</figcaption></figure>
+<figure class="feature-image sessions"><a class="image-link" href="docs/loom-2.0-desktop-sessions.png" data-lightbox aria-label="Enlarge Sessions view"><span class="desktop-capture capture-sessions"><img src="docs/loom-2.0-desktop-sessions.png" width="1920" height="1080" loading="lazy" alt="User-captured Loom 2.0 Liquid Glass Sessions popover over the macOS desktop, with waiting, failed and active demo sessions."></span></a><figcaption>Your desktop capture · illustrative sessions</figcaption></figure>
 </article>
 <article class="feature quota grid">
-<figure class="feature-image usage"><a class="image-link" href="docs/menu-navigation-usage.png" data-lightbox aria-label="Enlarge Usage view"><img src="docs/menu-navigation-usage.png" width="840" height="1306" loading="lazy" alt="Loom Usage view showing observed remaining quota, reset windows, and provider availability."></a><figcaption>Observed quotas · illustrative values</figcaption></figure>
+<figure class="feature-image usage"><a class="image-link" href="docs/loom-2.0-desktop-usage.png" data-lightbox aria-label="Enlarge Usage view"><span class="desktop-capture capture-usage"><img src="docs/loom-2.0-desktop-usage.png" width="1920" height="1080" loading="lazy" alt="Loom Usage view showing observed remaining quota, reset windows, and provider availability."></span></a><figcaption>Observed quotas · illustrative values</figcaption></figure>
 <div class="feature-copy"><p class="eyebrow">02 / Quotas &amp; notifications</p><h3>A heads-up.<br>Before the limit.</h3><p>See observed quota and reset windows for Codex and Antigravity. Get a warning below 15%, a critical alert below 5%, and a reset notification when fresh observations confirm replenishment.</p><p>Session alerts can tell you when attention is needed or work finishes. Finished alerts default to at least five minutes of working time observed by Loom.</p><figure class="notification"><a class="image-link" href="docs/loom-2.0-notifications.png" data-lightbox aria-label="Enlarge genuine macOS notification examples"><img src="docs/loom-2.0-notifications.png" width="460" height="462" loading="lazy" alt="Native macOS Codex and Antigravity demo quota warnings at 12% and 8% remaining."></a><figcaption>Genuine macOS notifications · demo scenarios</figcaption></figure><p class="small">Availability depends on each provider's local interface. Claude Code does not expose quota locally.</p></div>
 </article>
 <article class="feature grid storage">
 <div class="feature-copy"><p class="eyebrow">03 / Local storage</p><h3>See what adds up.</h3><p>Get a clear breakdown of local agent storage, without digging through hidden folders. Configure local scans in Settings and see the details in Loom's Storage view.</p><a class="text-link" href="https://github.com/chaiwithcode/Loom/blob/main/docs/INTERFACE_AND_STORAGE.md">Interface &amp; storage guide <span aria-hidden="true">↗</span></a></div>
-<figure class="feature-image"><a class="image-link" href="docs/menu-navigation-storage.png" data-lightbox aria-label="Enlarge Storage view"><img src="docs/menu-navigation-storage.png" width="840" height="718" loading="lazy" alt="Loom Storage view breaking down local agent data by provider."></a><figcaption>Local storage overview · illustrative data</figcaption></figure>
+<figure class="feature-image"><a class="image-link" href="docs/loom-2.0-desktop-storage.png" data-lightbox aria-label="Enlarge Storage view"><span class="desktop-capture capture-storage"><img src="docs/loom-2.0-desktop-storage.png" width="1920" height="1080" loading="lazy" alt="Loom Storage view breaking down local agent data by provider."></span></a><figcaption>Local storage overview · illustrative data</figcaption></figure>
 </article>
 </section>
 <section class="widgets wrap" aria-labelledby="widgets-title">
@@ -83,6 +85,6 @@ <h1 id="hero-title"><span class="line"><span>Your agents,</span></span><span cla
 <section class="install wrap grid" id="install" aria-labelledby="install-title"><div><p class="eyebrow">Make room for clarity</p><h2 id="install-title">Meet your<br>menu bar's<br>new thread.</h2></div><div class="install-copy"><img class="install-icon" src="Resources/LoomIconMaster.png" width="88" height="88" loading="lazy" alt="Loom app icon"><p>Download Loom 2.0 for Apple Silicon.<br>Requires macOS 14 or later.</p><a class="button primary" href="https://github.com/chaiwithcode/Loom/releases/latest">Download Loom <span aria-hidden="true">↗</span></a><p class="small">Open the disk image and drag Loom into Applications. Signed updates are built in.</p><div class="install-links"><a href="https://github.com/chaiwithcode/Loom/releases/latest">Release assets &amp; checksums ↗</a><a href="https://github.com/chaiwithcode/Loom/blob/main/docs/RELEASE_NOTES_v2.0.0.md">Release notes ↗</a></div><p class="small">Liquid Glass on macOS 26. Native system-material fallbacks on earlier supported versions.</p></div></section>
 </main>
 <footer class="wrap"><div class="footer-top"><a class="brand" href="#"><img src="Resources/LoomIconMaster.png" width="32" height="32" alt=""><span>Loom</span></a><p>Made by <a href="https://github.com/chaiwithcode">Deepak Sharma</a>.<br>Open source, under the <a href="https://github.com/chaiwithcode/Loom/blob/main/LICENSE">MIT License</a>.</p><nav aria-label="Footer navigation"><a href="https://github.com/chaiwithcode/Loom#readme">Documentation</a><a href="https://github.com/chaiwithcode/Loom/blob/main/docs/ARCHITECTURE.md">Architecture</a><a href="https://github.com/chaiwithcode/Loom/issues">Issues &amp; feedback</a></nav></div><p class="credits">Trailer music: “Cipher” by <a href="https://incompetech.com">Kevin MacLeod</a>, <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. <a href="https://github.com/chaiwithcode/Loom/blob/main/docs/DEMO_MEDIA.md">Media notes &amp; full attributions</a>.</p></footer>
-<dialog id="image-dialog" aria-label="Expanded Loom screenshot"><button class="dialog-close" type="button" aria-label="Close expanded screenshot">Close <span aria-hidden="true">×</span></button><img id="dialog-image" alt=""><p id="dialog-caption"></p><a id="dialog-original" href="docs/menu-navigation-sessions.png">Open full image ↗</a></dialog>
+<dialog id="image-dialog" aria-label="Expanded Loom screenshot"><button class="dialog-close" type="button" aria-label="Close expanded screenshot">Close <span aria-hidden="true">×</span></button><img id="dialog-image" alt=""><p id="dialog-caption"></p><a id="dialog-original" href="docs/loom-2.0-desktop-sessions.png">Open full image ↗</a></dialog>
 </body>
 </html>

pages/style.css

@@ -1,12 +1,13 @@
 :root {
-  --paper:#f4f1ea;
-  --ink:#14110d;
-  --muted:#655f57;
-  --rule:rgba(20,17,13,.14);
-  --accent:#b53e26;
+  --paper:#101113;
+  --ink:#f1f1f3;
+  --muted:#adaeb5;
+  --rule:rgba(241,241,243,.15);
+  --accent:#ff9c7c;
   --gutter:24px;
   --margin:clamp(20px,5vw,120px);
   font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
+  color-scheme:dark;
   color:var(--ink);
   background:var(--paper);
   font-size:18px;
@@ -240,7 +241,7 @@ h1 {
 .hero-product img {
   width:100%;
   border-radius:24px;
-  box-shadow:0 24px 48px rgba(20,17,13,.16)
+  box-shadow:0 24px 48px rgba(0,0,0,.45)
 }
 .image-link {
   display:block;
@@ -294,7 +295,7 @@ h1 {
   width:100%;
   height:auto;
   aspect-ratio:16/9;
-  background:var(--ink);
+  background:#08090a;
   border-radius:8px
 }
 .film-player figcaption {
@@ -570,7 +571,7 @@ dialog {
   overflow:auto
 }
 dialog::backdrop {
-  background:rgba(20,17,13,.8)
+  background:rgba(0,0,0,.8)
 }
 dialog img {
   max-height:72vh;
@@ -854,3 +855,28 @@ thead th {
 }
 
 }
+
+/* User-supplied desktop captures retain the original wallpaper and native glass.
+   Presentation crops leave the source screenshots intact for full-size viewing. */
+.desktop-capture {
+  display:block;
+  position:relative;
+  overflow:hidden;
+  width:100%;
+  aspect-ratio:500/980;
+  border-radius:16px;
+  background:#102535;
+}
+.desktop-capture img {
+  position:absolute;
+  top:0;
+  left:-236%;
+  width:384%;
+  max-width:none;
+  height:auto;
+  border-radius:0;
+  box-shadow:none;
+}
+.hero-product { width:100%; max-width:400px; justify-self:end }
+.capture-usage { aspect-ratio:500/740 }
+.capture-storage { aspect-ratio:500/460 }

scripts/verify-pages-staging.sh

@@ -144,7 +144,7 @@ mkdir -p "${SIM_DIR}"
   # Stage files into SIM_DIR/site
   mkdir -p "${SIM_DIR}/site/docs" "${SIM_DIR}/site/Resources"
   cp -R pages/. "${SIM_DIR}/site/"
-  for asset in docs/menu-navigation-*.png docs/widget-showcase.png docs/loom-2.0-poster.png docs/loom-2.0-notifications.png docs/loom-2.0-captions.vtt; do
+  for asset in docs/menu-navigation-*.png docs/loom-2.0-desktop-*.png docs/widget-showcase.png docs/loom-2.0-poster.png docs/loom-2.0-notifications.png docs/loom-2.0-captions.vtt; do
     cp "$asset" "${SIM_DIR}/site/docs/"
   done
   [[ -f Resources/LoomIconMaster.png ]] && cp Resources/LoomIconMaster.png "${SIM_DIR}/site/Resources/"