@agent-link/server 0.1.159 → 0.1.161

package/web/landing.html

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AgentLink — Remote Control for Claude Code</title>
-<meta name="description" content="Remote control for Claude Code. Start a task in your terminal, walk away, and continue from your phone or any browser. Multi-session, end-to-end encrypted.">
-<meta name="keywords" content="Claude Code, remote control, browser IDE, AI coding assistant, AgentLink, end-to-end encrypted, self-hosted, mobile coding">
+<meta name="description" content="Remote control for Claude Code. Chat, spawn agent teams, or schedule recurring tasks — from your phone or any browser. Multi-session, end-to-end encrypted.">
+<meta name="keywords" content="Claude Code, remote control, browser IDE, AI coding assistant, AgentLink, end-to-end encrypted, self-hosted, mobile coding, multi-agent, scheduled tasks, cron">
 <link rel="canonical" href="https://msclaude.ai/">
 <link rel="alternate" hreflang="en" href="https://msclaude.ai/">
 <link rel="alternate" hreflang="zh" href="https://msclaude.ai/zh">
@@ -13,14 +13,14 @@
 <!-- Open Graph -->
 <meta property="og:type" content="website">
 <meta property="og:title" content="AgentLink — Remote Control for Claude Code">
-<meta property="og:description" content="Remote control for Claude Code. Start a task in your terminal, walk away, and continue from your phone or any browser. Multi-session, end-to-end encrypted.">
+<meta property="og:description" content="Remote control for Claude Code. Chat, spawn agent teams, or schedule recurring tasks — from your phone or any browser. Multi-session, end-to-end encrypted.">
 <meta property="og:url" content="https://msclaude.ai/">
 <meta property="og:image" content="https://msclaude.ai/iPad.png">
 <meta property="og:site_name" content="AgentLink">
 <!-- Twitter Card -->
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="AgentLink — Remote Control for Claude Code">
-<meta name="twitter:description" content="Remote control for Claude Code. Start a task in your terminal, walk away, and continue from your phone or any browser. Multi-session, end-to-end encrypted.">
+<meta name="twitter:description" content="Remote control for Claude Code. Chat, spawn agent teams, or schedule recurring tasks — from your phone or any browser. Multi-session, end-to-end encrypted.">
 <meta name="twitter:image" content="https://msclaude.ai/iPad.png">
 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <script type="application/ld+json">
@@ -28,7 +28,7 @@
   "@context": "https://schema.org",
   "@type": "SoftwareApplication",
   "name": "AgentLink",
-  "description": "Remote control for Claude Code. Start a task in your terminal, walk away, and continue from your phone or any browser. Multi-session, end-to-end encrypted.",
+  "description": "Remote control for Claude Code. Chat, spawn agent teams, or schedule recurring tasks — from your phone or any browser. Multi-session, end-to-end encrypted.",
   "url": "https://msclaude.ai/",
   "applicationCategory": "DeveloperApplication",
   "operatingSystem": "Windows, macOS, Linux",
@@ -536,11 +536,8 @@
   }
 
   .device-ipad img {
-    border-radius: 4.2%;
-    box-shadow:
-      0 40px 100px rgba(0,0,0,0.5),
-      0 15px 50px rgba(0,0,0,0.3),
-      0 0 80px rgba(59,130,246,0.08);
+    border-radius: 0;
+    box-shadow: none;
   }
 
   .device-iphone {
@@ -563,6 +560,106 @@
       0 0 80px rgba(245,158,11,0.08);
   }
 
+  /* ── iPad Carousel ── */
+  .ipad-carousel {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 4.2%;
+    box-shadow:
+      0 40px 100px rgba(0,0,0,0.5),
+      0 15px 50px rgba(0,0,0,0.3),
+      0 0 80px rgba(59,130,246,0.08);
+  }
+
+  .carousel-track {
+    position: relative;
+    width: 100%;
+  }
+
+  .carousel-slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    opacity: 0;
+    transition: opacity 0.6s ease;
+    pointer-events: none;
+  }
+
+  .carousel-slide.active {
+    position: relative;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .carousel-slide img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .carousel-dots {
+    position: absolute;
+    bottom: 12px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    z-index: 5;
+  }
+
+  .carousel-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255,255,255,0.4);
+    cursor: pointer;
+    padding: 0;
+    transition: background 0.3s ease, transform 0.3s ease;
+  }
+
+  .carousel-dot.active {
+    background: rgba(255,255,255,0.9);
+    transform: scale(1.2);
+  }
+
+  .carousel-dot:hover {
+    background: rgba(255,255,255,0.7);
+  }
+
+  .carousel-label {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    background: rgba(0,0,0,0.55);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    padding: 8px 14px;
+    border-radius: 10px;
+    z-index: 4;
+    pointer-events: none;
+  }
+
+  .carousel-label-title {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 0.02em;
+  }
+
+  .carousel-label-desc {
+    font-size: 0.72rem;
+    color: rgba(255,255,255,0.75);
+    font-weight: 400;
+  }
+
   /* ── Divider ── */
   .section-divider {
     max-width: 200px;
@@ -980,6 +1077,11 @@
       align-self: auto;
     }
     .device-iphone:hover { transform: translateY(-3%); }
+    .carousel-dots { bottom: 8px; gap: 6px; }
+    .carousel-dot { width: 6px; height: 6px; }
+    .carousel-label { top: 8px; left: 8px; padding: 5px 10px; border-radius: 8px; }
+    .carousel-label-title { font-size: 0.8rem; }
+    .carousel-label-desc { font-size: 0.62rem; }
     .terminal { margin: 0 1rem; max-width: calc(100vw - 2rem); }
     .terminal-body { padding: 1rem; font-size: 0.75rem; overflow-x: auto; }
     .terminal-line { gap: 0.4rem; white-space: nowrap; }
@@ -996,18 +1098,6 @@
     .workflow-steps::before { left: 19px; }
   }
 
-  /* ── Scroll animations ── */
-  .reveal {
-    opacity: 0;
-    transform: translateY(30px);
-    transition: opacity 0.8s ease, transform 0.8s ease;
-  }
-
-  .reveal.visible {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
   .sr-only {
     position: absolute;
     width: 1px; height: 1px;
@@ -1064,8 +1154,8 @@
   </h1>
   <p class="hero-sub">
     Start Claude Code on your machine. Walk away.
-    <strong>Pick it up from your phone, tablet, or any browser</strong> &mdash;
-    end-to-end encrypted, zero configuration.
+    <strong>Chat, launch agent teams, or schedule tasks</strong> &mdash;
+    from your phone, tablet, or any browser. End-to-end encrypted, zero config.
   </p>
   <div class="cta-group">
     <button class="cta-primary" onclick="copyInstall()">
@@ -1103,100 +1193,65 @@
 </section>
 
 <!-- Device Showcase -->
-<section class="showcase reveal">
+<section class="showcase">
   <div class="device device-ipad">
-    <picture>
-      <source srcset="/iPad.webp" type="image/webp">
-      <img src="/iPad.png" alt="AgentLink web interface running Claude Code on an iPad" loading="eager">
-    </picture>
+    <div class="ipad-carousel">
+      <div class="carousel-track">
+        <div class="carousel-slide active">
+          <img src="/images/chat-iPad.webp" alt="AgentLink Chat mode on iPad" loading="eager">
+          <div class="carousel-label">
+            <span class="carousel-label-title">Chat</span>
+            <span class="carousel-label-desc">Remote pair-programming with Claude Code</span>
+          </div>
+        </div>
+        <div class="carousel-slide">
+          <img src="/images/team-iPad.webp" alt="AgentLink Team mode on iPad" loading="eager">
+          <div class="carousel-label">
+            <span class="carousel-label-title">Teams</span>
+            <span class="carousel-label-desc">Orchestrate multiple agents in parallel</span>
+          </div>
+        </div>
+        <div class="carousel-slide">
+          <img src="/images/loop-iPad.webp" alt="AgentLink Loop mode on iPad" loading="eager">
+          <div class="carousel-label">
+            <span class="carousel-label-title">Loop</span>
+            <span class="carousel-label-desc">Scheduled tasks with cron automation</span>
+          </div>
+        </div>
+      </div>
+      <div class="carousel-dots">
+        <button class="carousel-dot active" data-index="0" aria-label="Chat mode"></button>
+        <button class="carousel-dot" data-index="1" aria-label="Team mode"></button>
+        <button class="carousel-dot" data-index="2" aria-label="Loop mode"></button>
+      </div>
+    </div>
   </div>
   <div class="device device-iphone">
-    <picture>
-      <source srcset="/iPhone.webp" type="image/webp">
-      <img src="/iPhone.png" alt="AgentLink mobile interface on iPhone" loading="eager">
-    </picture>
+    <img src="/images/chat-iPhone.webp" alt="AgentLink mobile interface on iPhone" loading="eager">
   </div>
 </section>
 
 <div class="section-divider"></div>
 
 <!-- Philosophy -->
-<section class="philosophy reveal">
+<section class="philosophy">
   <div class="philosophy-label">Philosophy</div>
   <h2>Code shouldn't be <em>chained to a desk.</em></h2>
   <p>
     AgentLink turns Claude Code into a truly portable experience.
-    One command, one URL &mdash; your AI assistant is accessible from any device,
-    with real encryption and zero accounts required.
+    One command, one URL &mdash; chat interactively, spin up agent teams,
+    or schedule recurring tasks, all from any device.
+    Real encryption, zero accounts required.
   </p>
 </section>
 
 <div class="section-divider"></div>
 
 <!-- Bento Features -->
-<section class="bento reveal" id="features">
+<section class="bento" id="features">
   <h2 class="sr-only">Features</h2>
 
-  <!-- E2E Encryption — wide -->
-  <div class="bento-card wide">
-    <div class="bento-visual">
-      <div class="encrypt-visual">
-        <div class="encrypt-block">hello world</div>
-        <div class="encrypt-arrow">&rarr;</div>
-        <div class="encrypt-block locked">x9f#k2$mQ...</div>
-        <div class="encrypt-arrow">&rarr;</div>
-        <div class="encrypt-block">hello world</div>
-      </div>
-    </div>
-    <h3>End-to-End Encrypted</h3>
-    <p>XSalsa20-Poly1305 encryption. The relay server is a blind forwarder &mdash; it never sees your code, your prompts, or your data.</p>
-  </div>
-
-  <!-- Zero Config -->
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon purple">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
-      </div>
-    </div>
-    <h3>Zero Config</h3>
-    <p>No accounts. No registration. Install, start, open &mdash; done.</p>
-  </div>
-
-  <!-- Multi-Agent Teams -->
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon blue">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-      </div>
-    </div>
-    <h3>Multi-Agent Teams</h3>
-    <p>Spawn parallel Claude subagents to tackle complex tasks. Live kanban board, activity feed, and team history.</p>
-  </div>
-
-  <!-- Multi Session -->
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon blue">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="8" height="8" rx="1.5"></rect><rect x="14" y="3" width="8" height="8" rx="1.5"></rect><rect x="2" y="13" width="8" height="8" rx="1.5"></rect><rect x="14" y="13" width="8" height="8" rx="1.5"></rect></svg>
-      </div>
-    </div>
-    <h3>Multi Session</h3>
-    <p>Run multiple conversations in parallel. Switch between tasks without losing context.</p>
-  </div>
-
-  <!-- Any Device -->
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon cyan">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
-      </div>
-    </div>
-    <h3>Any Device</h3>
-    <p>Phone, tablet, laptop &mdash; any browser becomes your Claude Code terminal.</p>
-  </div>
-
-  <!-- Chat | Team | Loop — wide -->
+  <!-- Row 1: Chat | Team | Loop (wide) + Any Device -->
   <div class="bento-card wide">
     <div class="bento-visual">
       <div class="mode-toggle">
@@ -1227,7 +1282,31 @@
     <p>Chat with Claude interactively, spawn agent teams for complex tasks, or schedule recurring Loop jobs with cron &mdash; all from the same browser tab.</p>
   </div>
 
-  <!-- Self-hostable -->
+  <div class="bento-card">
+    <div class="bento-visual">
+      <div class="bento-icon cyan">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
+      </div>
+    </div>
+    <h3>Any Device</h3>
+    <p>Phone, tablet, laptop &mdash; any browser becomes your Claude Code terminal.</p>
+  </div>
+
+  <!-- Row 2: E2E Encryption (wide) + Self-Hostable -->
+  <div class="bento-card wide">
+    <div class="bento-visual">
+      <div class="encrypt-visual">
+        <div class="encrypt-block">hello world</div>
+        <div class="encrypt-arrow">&rarr;</div>
+        <div class="encrypt-block locked">x9f#k2$mQ...</div>
+        <div class="encrypt-arrow">&rarr;</div>
+        <div class="encrypt-block">hello world</div>
+      </div>
+    </div>
+    <h3>End-to-End Encrypted</h3>
+    <p>XSalsa20-Poly1305 encryption. The relay server is a blind forwarder &mdash; it never sees your code, your prompts, or your data.</p>
+  </div>
+
   <div class="bento-card">
     <div class="bento-visual">
       <div class="bento-icon green">
@@ -1238,33 +1317,42 @@
     <p>Run your own relay server. Your infrastructure, your rules, your data.</p>
   </div>
 
-  <!-- Password Protection -->
+  <!-- Row 3: Multi-Agent Teams + Multi Session + Zero Config -->
   <div class="bento-card">
     <div class="bento-visual">
-      <div class="bento-icon amber">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+      <div class="bento-icon blue">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
       </div>
     </div>
-    <h3>Optional Password</h3>
-    <p>Add <code style="color:var(--green);font-family:'JetBrains Mono',monospace;font-size:0.8rem">--password</code> to lock your session. Brute-force protection built in.</p>
+    <h3>Multi-Agent Teams</h3>
+    <p>Spawn parallel Claude subagents to tackle complex tasks. Live kanban board, activity feed, and team history.</p>
   </div>
 
-  <!-- File Preview -->
-  <div class="bento-card wide">
+  <div class="bento-card">
+    <div class="bento-visual">
+      <div class="bento-icon blue">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="8" height="8" rx="1.5"></rect><rect x="14" y="3" width="8" height="8" rx="1.5"></rect><rect x="2" y="13" width="8" height="8" rx="1.5"></rect><rect x="14" y="13" width="8" height="8" rx="1.5"></rect></svg>
+      </div>
+    </div>
+    <h3>Multi Session</h3>
+    <p>Run multiple conversations in parallel. Switch between tasks without losing context.</p>
+  </div>
+
+  <div class="bento-card">
     <div class="bento-visual">
-      <div class="bento-icon rose">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></svg>
+      <div class="bento-icon purple">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
       </div>
     </div>
-    <h3>File Explorer</h3>
-    <p>Browse your project tree, preview files with syntax highlighting, and navigate your codebase right from the browser.</p>
+    <h3>Zero Config</h3>
+    <p>No accounts. No registration. Install, start, open &mdash; done.</p>
   </div>
 </section>
 
 <div class="section-divider"></div>
 
 <!-- How It Works -->
-<section class="workflow reveal" id="how-it-works">
+<section class="workflow" id="how-it-works">
   <div class="workflow-label">How It Works</div>
   <h2>Three steps. That's it.</h2>
   <div class="workflow-steps">
@@ -1285,8 +1373,8 @@
     <div class="workflow-step">
       <div class="step-marker">03</div>
       <div class="step-content">
-        <h3>Run sessions in parallel, switch freely</h3>
-        <p>Multiple conversations, multiple projects &mdash; all running at once. Jump between them from any device, with full history preserved.</p>
+        <h3>Chat, collaborate, automate</h3>
+        <p>Run interactive sessions, spawn agent teams for complex tasks, or set up scheduled Loop jobs &mdash; all from the same URL, with full history preserved.</p>
       </div>
     </div>
   </div>
@@ -1324,16 +1412,79 @@ function showToast() {
   setTimeout(() => toast.classList.remove('show'), 1800);
 }
 
-// Scroll reveal
-const observer = new IntersectionObserver((entries) => {
-  entries.forEach(entry => {
-    if (entry.isIntersecting) {
-      entry.target.classList.add('visible');
+// iPad carousel
+(function() {
+  const slides = document.querySelectorAll('.carousel-slide');
+  const dots = document.querySelectorAll('.carousel-dot');
+  if (!slides.length) return;
+  let current = 0;
+  let interval;
+
+  function goTo(i) {
+    slides[current].classList.remove('active');
+    dots[current].classList.remove('active');
+    current = (i + slides.length) % slides.length;
+    slides[current].classList.add('active');
+    dots[current].classList.add('active');
+  }
+
+  function startAuto() {
+    interval = setInterval(() => goTo(current + 1), 4000);
+  }
+
+  function resetAuto() {
+    clearInterval(interval);
+    startAuto();
+  }
+
+  dots.forEach(dot => {
+    dot.addEventListener('click', () => {
+      goTo(Number(dot.dataset.index));
+      resetAuto();
+    });
+  });
+
+  // Touch/swipe support
+  const track = document.querySelector('.ipad-carousel');
+  let startX = 0, startY = 0, dragging = false;
+
+  track.addEventListener('touchstart', e => {
+    startX = e.touches[0].clientX;
+    startY = e.touches[0].clientY;
+    dragging = true;
+  }, { passive: true });
+
+  track.addEventListener('touchend', e => {
+    if (!dragging) return;
+    dragging = false;
+    const dx = e.changedTouches[0].clientX - startX;
+    const dy = e.changedTouches[0].clientY - startY;
+    if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) {
+      goTo(dx < 0 ? current + 1 : current - 1);
+      resetAuto();
+    }
+  }, { passive: true });
+
+  // Mouse drag support for desktop
+  track.addEventListener('mousedown', e => {
+    startX = e.clientX;
+    dragging = true;
+    track.style.cursor = 'grabbing';
+  });
+
+  document.addEventListener('mouseup', e => {
+    if (!dragging) return;
+    dragging = false;
+    track.style.cursor = '';
+    const dx = e.clientX - startX;
+    if (Math.abs(dx) > 50) {
+      goTo(dx < 0 ? current + 1 : current - 1);
+      resetAuto();
     }
   });
-}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
 
-document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+  startAuto();
+})();
 </script>
 
 </body>