docs: update website remote mobile story

6 files changed, 353 insertions, 26 deletions

diff --git a/website/assets/fonts/jetbrains-mono-OFL.txt b/website/assets/fonts/jetbrains-mono-OFL.txt
new file mode 100644
index 00000000..5ceee002
--- /dev/null
+++ b/website/assets/fonts/jetbrains-mono-OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/website/assets/fonts/jetbrains-mono-latin.woff2 b/website/assets/fonts/jetbrains-mono-latin.woff2
new file mode 100644
index 00000000..4d09cda4
--- /dev/null
+++ b/website/assets/fonts/jetbrains-mono-latin.woff2
diff --git a/website/assets/mobile-switcher.jpeg b/website/assets/mobile-switcher.jpeg
new file mode 100644
index 00000000..c41af495
--- /dev/null
+++ b/website/assets/mobile-switcher.jpeg
diff --git a/website/assets/mobile-terminal.jpeg b/website/assets/mobile-terminal.jpeg
new file mode 100644
index 00000000..8617d04a
--- /dev/null
+++ b/website/assets/mobile-terminal.jpeg
diff --git a/website/css/style.css b/website/css/style.css
index 54061ec9..bf7216aa 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -1,3 +1,14 @@
+@font-face {
+    font-family: "JetBrains Mono";
+    font-style: normal;
+    font-weight: 400 700;
+    font-display: block;
+    src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
+        U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 *,
 *::before,
 *::after {
@@ -63,6 +74,13 @@ body {
     overflow-x: clip;
 }
 
+code,
+pre,
+kbd,
+samp {
+    font-family: inherit;
+}
+
 a {
     color: var(--text);
     text-decoration: none;
@@ -386,6 +404,10 @@ a:hover {
     font-weight: 500;
 }
 
+.prose-block p + p {
+    margin-top: 1rem;
+}
+
 /* ── Detach flow ── */
 .detach-flow {
     background: var(--mantle);
@@ -416,6 +438,113 @@ a:hover {
     color: var(--text-faint);
 }
 
+/* ── Access modes ── */
+.access-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+.access-card {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    background: var(--mantle);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 1.25rem;
+}
+
+.access-kicker {
+    margin-bottom: 0.75rem;
+    font-size: 0.65rem;
+    font-weight: 600;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-faint);
+}
+
+.access-card h3 {
+    margin-bottom: 0.65rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--white);
+}
+
+.access-card p {
+    margin-bottom: 1rem;
+    font-size: 0.8rem;
+    line-height: 1.7;
+    color: var(--text-dim);
+}
+
+.mini-flow {
+    display: grid;
+    align-content: start;
+    gap: 0.35rem;
+    min-height: 3.6rem;
+    margin-top: auto;
+    padding-top: 0.85rem;
+    border-top: 1px solid var(--border);
+    font-size: 0.74rem;
+    line-height: 1.6;
+    overflow-wrap: anywhere;
+}
+
+.mini-flow .prompt {
+    color: var(--green);
+}
+.mini-flow .cmd {
+    color: var(--white);
+}
+.mini-flow .key {
+    color: var(--blue);
+}
+.mini-flow .comment,
+.mini-flow .dim {
+    color: var(--text-faint);
+}
+
+/* ── Mobile proof ── */
+.mobile-proof {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 260px));
+    justify-content: center;
+    gap: 1.25rem;
+    margin-top: 1.75rem;
+}
+
+.phone-shot {
+    min-width: 0;
+}
+
+.phone-shot-frame {
+    padding: 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: 28px;
+    background:
+        radial-gradient(circle at 50% 0%, rgba(137, 180, 250, 0.08), transparent 38%),
+        var(--mantle);
+    box-shadow: inset 0 0 0 1px rgba(205, 214, 244, 0.025);
+}
+
+.phone-shot img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--border-bright);
+    border-radius: 20px;
+    background: var(--base);
+}
+
+.phone-shot figcaption {
+    margin-top: 0.65rem;
+    font-size: 0.7rem;
+    color: var(--text-faint);
+    text-align: center;
+}
+
 /* ── Awareness ── */
 .awareness-split {
     display: grid;
@@ -688,6 +817,21 @@ a:hover {
     .awareness-panel-img {
         width: min(100%, 220px);
     }
+    .access-grid {
+        grid-template-columns: 1fr;
+    }
+    .mobile-proof {
+        grid-template-columns: minmax(0, 260px);
+        justify-content: center;
+        gap: 1rem;
+    }
+    .phone-shot-frame {
+        padding: 0.45rem;
+        border-radius: 20px;
+    }
+    .phone-shot img {
+        border-radius: 15px;
+    }
     .api-grid {
         grid-template-columns: 1fr;
     }
diff --git a/website/index.html b/website/index.html
index 8caf836c..1ec71315 100644
--- a/website/index.html
+++ b/website/index.html
@@ -39,11 +39,12 @@
 
         <link rel="icon" type="image/png" href="/assets/logo.png" />
         <link rel="apple-touch-icon" href="/assets/logo.png" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
-            href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap"
-            rel="stylesheet"
+            rel="preload"
+            href="/assets/fonts/jetbrains-mono-latin.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin
         />
         <link rel="stylesheet" href="/css/style.css" />
     </head>
@@ -73,9 +74,10 @@
                     <span class="text-blocked">blocked</span>,
                     <span class="text-working">working</span>,
                     <span class="text-done">done</span>. detach and reattach,
-                    agents keep running. no gui app, no electron, no mac-only
-                    native wrapper. you see the agent's own terminal, not
-                    someone's interpretation of it.
+                    agents keep running. attach locally, over ssh, or as a thin
+                    client to a remote server. no gui app, no electron, no
+                    mac-only native wrapper. you see the agent's own terminal,
+                    not someone's interpretation of it.
                 </p>
             </div>
             <div class="install-row">
@@ -230,14 +232,35 @@
             </div>
             <div class="prose-block">
                 <p>
-                    start herdr on your desktop or server. run your agents,
-                    split panes, do your work. press
-                    <strong>ctrl+b q</strong> to detach. close your terminal,
-                    close your laptop; your agents keep running. open a new
-                    terminal, run <strong>herdr</strong>, you're back. same
-                    session, same panes, same agents.
+                    herdr runs as a background session server by default. run
+                    your agents, split panes, do your work, then press
+                    <strong>ctrl+b q</strong> to detach the client. close your
+                    terminal or laptop; the panes keep running. open herdr again
+                    and you reattach to the same session.
+                </p>
+                <p>
+                    named sessions give each project or context its own panes,
+                    tabs, workspaces, sockets, and runtime state while sharing
+                    the same global config.
                 </p>
             </div>
+            <div class="detach-flow" style="margin-top: 1.5rem">
+                <div class="detach-line">
+                    <span class="prompt">$</span> <span class="cmd">herdr</span>
+                    <span class="key">--session</span>
+                    <span class="comment">work</span>
+                </div>
+                <div class="detach-line">
+                    <span class="prompt">$</span> <span class="cmd">herdr</span>
+                    <span class="key">session attach</span>
+                    <span class="comment">side-project</span>
+                </div>
+                <div class="detach-line">
+                    <span class="dim">
+                        separate sessions, same config, persistent agents.</span
+                    >
+                </div>
+            </div>
         </section>
 
         <div class="gap"></div>
@@ -252,25 +275,92 @@
             </div>
             <div class="prose-block">
                 <p>
-                    need to check on your agents from your phone? just ssh in
-                    and run herdr. any ssh client works. no app to download, no
-                    account to create.
+                    once the session is running, attach to it three ways. keep
+                    the work on the machine that has the code, the keys, and the
+                    agents. connect from wherever you are.
                 </p>
             </div>
-            <div class="detach-flow" style="margin-top: 1.5rem">
-                <div class="detach-line">
-                    <span class="prompt">$</span> <span class="cmd">ssh</span>
-                    <span class="comment">you@yourserver</span>
+            <div class="access-grid">
+                <div class="access-card">
+                    <div class="access-kicker">server</div>
+                    <h3>ssh in, run herdr</h3>
+                    <p>
+                        use it like tmux on a remote box. herdr starts the
+                        session there, and your panes keep running after you
+                        detach.
+                    </p>
+                    <div class="mini-flow">
+                        <div>
+                            <span class="prompt">$</span>
+                            <span class="cmd">ssh</span>
+                            <span class="comment">you@server</span>
+                        </div>
+                        <div>
+                            <span class="prompt">$</span>
+                            <span class="cmd">herdr</span>
+                        </div>
+                    </div>
                 </div>
-                <div class="detach-line">
-                    <span class="prompt">$</span> <span class="cmd">herdr</span>
+                <div class="access-card">
+                    <div class="access-kicker">phone</div>
+                    <h3>ssh from mobile</h3>
+                    <p>
+                        narrow terminals get a responsive tui instead of a
+                        squeezed desktop layout. spaces, tabs, and agents stay
+                        reachable from a phone ssh client.
+                    </p>
+                    <div class="mini-flow">
+                        <div>
+                            <span class="prompt">$</span>
+                            <span class="cmd">ssh</span>
+                            <span class="comment">you@server</span>
+                        </div>
+                        <div>
+                            <span class="prompt">$</span>
+                            <span class="cmd">herdr</span>
+                        </div>
+                    </div>
                 </div>
-                <div class="detach-line">
-                    <span class="dim">
-                        same session, same agents, same state.</span
-                    >
+                <div class="access-card">
+                    <div class="access-kicker">thin client</div>
+                    <h3>herdr --remote host</h3>
+                    <p>
+                        run herdr on your laptop and target any ssh config host.
+                        herdr connects over ssh, bootstraps the remote server,
+                        and streams the tui back to your local terminal.
+                    </p>
+                    <div class="mini-flow">
+                        <div>
+                            <span class="prompt">$</span>
+                            <span class="cmd">herdr</span>
+                            <span class="key">--remote</span>
+                            <span class="comment">workbox</span>
+                        </div>
+                    </div>
                 </div>
             </div>
+            <div class="mobile-proof">
+                <figure class="phone-shot">
+                    <div class="phone-shot-frame">
+                        <img
+                            src="/assets/mobile-terminal.jpeg"
+                            alt="herdr responsive terminal view over ssh on a phone"
+                            loading="lazy"
+                        />
+                    </div>
+                    <figcaption>terminal view over ssh</figcaption>
+                </figure>
+                <figure class="phone-shot">
+                    <div class="phone-shot-frame">
+                        <img
+                            src="/assets/mobile-switcher.jpeg"
+                            alt="herdr mobile switcher showing spaces tabs and agents on a phone"
+                            loading="lazy"
+                        />
+                    </div>
+                    <figcaption>responsive switcher</figcaption>
+                </figure>
+            </div>
         </section>
 
         <div class="gap"></div>