@agent-link/server 0.1.158 → 0.1.160

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-link/server",
-  "version": "0.1.158",
+  "version": "0.1.160",
   "description": "AgentLink relay server",
   "license": "MIT",
   "repository": {

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;
@@ -668,6 +765,60 @@
   .bento-icon.amber { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); color: var(--amber); }
   .bento-icon.blue { background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(96,165,250,0.05)); color: var(--blue); }
 
+  /* Mode toggle visual */
+  .mode-toggle {
+    display: flex;
+    gap: 0;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  .mode-toggle-item {
+    flex: 1;
+    text-align: center;
+    padding: 0.7rem 1rem;
+    position: relative;
+    transition: all 0.3s;
+  }
+
+  .mode-toggle-item:not(:last-child) {
+    border-right: 1px solid var(--border);
+  }
+
+  .mode-toggle-item.active {
+    background: rgba(59,130,246,0.12);
+  }
+
+  .mode-toggle-item .mode-icon {
+    width: 32px; height: 32px;
+    margin: 0 auto 0.4rem;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mode-toggle-item .mode-icon svg { width: 18px; height: 18px; }
+
+  .mode-toggle-item .mode-icon.chat-icon { background: rgba(59,130,246,0.15); color: var(--accent); }
+  .mode-toggle-item .mode-icon.team-icon { background: rgba(96,165,250,0.15); color: var(--blue); }
+  .mode-toggle-item .mode-icon.loop-icon { background: rgba(52,211,153,0.15); color: var(--green); }
+
+  .mode-toggle-item .mode-name {
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-bottom: 0.2rem;
+    color: var(--text);
+  }
+
+  .mode-toggle-item .mode-desc {
+    font-size: 0.68rem;
+    color: var(--text-dim);
+    line-height: 1.4;
+  }
+
   /* Encryption visual */
   .encrypt-visual {
     display: flex;
@@ -926,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; }
@@ -942,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;
@@ -1010,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()">
@@ -1049,41 +1193,106 @@
 </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 -->
+  <!-- Row 1: Chat | Team | Loop (wide) + Any Device -->
+  <div class="bento-card wide">
+    <div class="bento-visual">
+      <div class="mode-toggle">
+        <div class="mode-toggle-item active">
+          <div class="mode-icon chat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+          </div>
+          <div class="mode-name">Chat</div>
+          <div class="mode-desc">Interactive coding sessions</div>
+        </div>
+        <div class="mode-toggle-item">
+          <div class="mode-icon team-icon">
+            <svg 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 class="mode-name">Team</div>
+          <div class="mode-desc">Parallel sub-agents</div>
+        </div>
+        <div class="mode-toggle-item">
+          <div class="mode-icon loop-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+          </div>
+          <div class="mode-name">Loop</div>
+          <div class="mode-desc">Scheduled cron tasks</div>
+        </div>
+      </div>
+    </div>
+    <h3>Three Modes, One Interface</h3>
+    <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>
+
+  <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">
@@ -1098,18 +1307,17 @@
     <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 class="bento-icon green">
+        <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="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
       </div>
     </div>
-    <h3>Zero Config</h3>
-    <p>No accounts. No registration. Install, start, open &mdash; done.</p>
+    <h3>Self-Hostable</h3>
+    <p>Run your own relay server. Your infrastructure, your rules, your data.</p>
   </div>
 
-  <!-- Multi-Agent Teams -->
+  <!-- Row 3: Multi-Agent Teams + Multi Session + Zero Config -->
   <div class="bento-card">
     <div class="bento-visual">
       <div class="bento-icon blue">
@@ -1120,7 +1328,6 @@
     <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">
@@ -1131,84 +1338,21 @@
     <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>
-
-  <!-- Full Claude Code — wide -->
-  <div class="bento-card wide">
-    <div class="bento-visual">
-      <div class="device-flow">
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
-          Terminal
-        </div>
-        <div class="flow-line"></div>
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
-          Files
-        </div>
-        <div class="flow-line"></div>
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-          Search
-        </div>
-        <div class="flow-line"></div>
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
-          Chat
-        </div>
-      </div>
-    </div>
-    <h3>Full Claude Code Experience</h3>
-    <p>File editing, shell commands, search, multi-turn conversations &mdash; every capability, now in your browser.</p>
-  </div>
-
-  <!-- Self-hostable -->
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon green">
-        <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="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
-      </div>
-    </div>
-    <h3>Self-Hostable</h3>
-    <p>Run your own relay server. Your infrastructure, your rules, your data.</p>
-  </div>
-
-  <!-- Password Protection -->
   <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>
-    </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>
-  </div>
-
-  <!-- File Preview -->
-  <div class="bento-card wide">
-    <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">
@@ -1229,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>
@@ -1268,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>

package/web/landing.zh.html

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AgentLink — Claude Code 开源版远程控制</title>
-<meta name="description" content="Claude Code 开源版远程控制。在手机、平板或任何浏览器上远程操控你开发机器上的 Claude，端到端加密，无需注册。">
-<meta name="keywords" content="Claude Code, Claude Code开源版远程控制, 远程控制, 浏览器 IDE, AI 编程助手, AgentLink, 端到端加密, 自建部署, 移动编程">
+<meta name="description" content="Claude Code 开源版远程控制。对话、多 Agent 协作、定时任务三大模式，手机或任何浏览器即可操控，端到端加密，无需注册。">
+<meta name="keywords" content="Claude Code, Claude Code开源版远程控制, 远程控制, 浏览器 IDE, AI 编程助手, AgentLink, 端到端加密, 自建部署, 移动编程, 多Agent协作, 定时任务">
 <link rel="canonical" href="https://msclaude.ai/zh">
 <link rel="alternate" hreflang="en" href="https://msclaude.ai/">
 <link rel="alternate" hreflang="zh" href="https://msclaude.ai/zh">
@@ -13,7 +13,7 @@
 <!-- Open Graph -->
 <meta property="og:type" content="website">
 <meta property="og:title" content="AgentLink — Claude Code 开源版远程控制">
-<meta property="og:description" content="Claude Code 开源版远程控制。在手机、平板或任何浏览器上远程操控你开发机器上的 Claude，端到端加密，无需注册。">
+<meta property="og:description" content="Claude Code 开源版远程控制。对话、多 Agent 协作、定时任务三大模式，手机或任何浏览器即可操控，端到端加密，无需注册。">
 <meta property="og:url" content="https://msclaude.ai/zh">
 <meta property="og:image" content="https://msclaude.ai/iPad.png">
 <meta property="og:site_name" content="AgentLink">
@@ -22,7 +22,7 @@
 <!-- Twitter Card -->
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="AgentLink — Claude Code 开源版远程控制">
-<meta name="twitter:description" content="Claude Code 开源版远程控制。在手机、平板或任何浏览器上远程操控你开发机器上的 Claude，端到端加密，无需注册。">
+<meta name="twitter:description" content="Claude Code 开源版远程控制。对话、多 Agent 协作、定时任务三大模式，手机或任何浏览器即可操控，端到端加密，无需注册。">
 <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">
@@ -30,7 +30,7 @@
   "@context": "https://schema.org",
   "@type": "SoftwareApplication",
   "name": "AgentLink",
-  "description": "Claude Code 开源版远程控制。在手机、平板或任何浏览器上远程操控你开发机器上的 Claude，端到端加密，无需注册。",
+  "description": "Claude Code 开源版远程控制。对话、多 Agent 协作、定时任务三大模式，手机或任何浏览器即可操控，端到端加密，无需注册。",
   "url": "https://msclaude.ai/zh",
   "applicationCategory": "DeveloperApplication",
   "operatingSystem": "Windows, macOS, Linux",
@@ -537,11 +537,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 {
@@ -564,6 +561,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;
@@ -669,6 +766,60 @@
   .bento-icon.amber { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); color: var(--amber); }
   .bento-icon.blue { background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(96,165,250,0.05)); color: var(--blue); }
 
+  /* Mode toggle visual */
+  .mode-toggle {
+    display: flex;
+    gap: 0;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  .mode-toggle-item {
+    flex: 1;
+    text-align: center;
+    padding: 0.7rem 1rem;
+    position: relative;
+    transition: all 0.3s;
+  }
+
+  .mode-toggle-item:not(:last-child) {
+    border-right: 1px solid var(--border);
+  }
+
+  .mode-toggle-item.active {
+    background: rgba(59,130,246,0.12);
+  }
+
+  .mode-toggle-item .mode-icon {
+    width: 32px; height: 32px;
+    margin: 0 auto 0.4rem;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mode-toggle-item .mode-icon svg { width: 18px; height: 18px; }
+
+  .mode-toggle-item .mode-icon.chat-icon { background: rgba(59,130,246,0.15); color: var(--accent); }
+  .mode-toggle-item .mode-icon.team-icon { background: rgba(96,165,250,0.15); color: var(--blue); }
+  .mode-toggle-item .mode-icon.loop-icon { background: rgba(52,211,153,0.15); color: var(--green); }
+
+  .mode-toggle-item .mode-name {
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-bottom: 0.2rem;
+    color: var(--text);
+  }
+
+  .mode-toggle-item .mode-desc {
+    font-size: 0.68rem;
+    color: var(--text-dim);
+    line-height: 1.4;
+  }
+
   /* Encryption visual */
   .encrypt-visual {
     display: flex;
@@ -927,6 +1078,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; }
@@ -943,18 +1099,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;
@@ -1010,7 +1154,7 @@
     <span class="line"><em>开源版远程控制。</em></span>
   </h1>
   <p class="hero-sub">
-    在开发机器上启动 Agent，出门遛弯期间用<strong>手机或 iPad 继续写代码</strong> &mdash;
+    在开发机器上启动 Agent，出门遛弯期间用<strong>手机对话、组建 Agent 团队、或跑定时任务</strong> &mdash;
     不用装 App，不用注册账号，打开浏览器就能用。
   </p>
   <div class="cta-group">
@@ -1049,40 +1193,104 @@
 </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 网页端在 iPad 上运行 Claude Code" loading="eager">
-    </picture>
+    <div class="ipad-carousel">
+      <div class="carousel-track">
+        <div class="carousel-slide active">
+          <img src="/images/chat-iPad.webp" alt="AgentLink 聊天模式 iPad 界面" loading="eager">
+          <div class="carousel-label">
+            <span class="carousel-label-title">Chat</span>
+            <span class="carousel-label-desc">远程与 Claude Code 结对编程</span>
+          </div>
+        </div>
+        <div class="carousel-slide">
+          <img src="/images/team-iPad.webp" alt="AgentLink 团队模式 iPad 界面" loading="eager">
+          <div class="carousel-label">
+            <span class="carousel-label-title">Teams</span>
+            <span class="carousel-label-desc">并行编排多个 Agent 协同工作</span>
+          </div>
+        </div>
+        <div class="carousel-slide">
+          <img src="/images/loop-iPad.webp" alt="AgentLink 循环模式 iPad 界面" loading="eager">
+          <div class="carousel-label">
+            <span class="carousel-label-title">Loop</span>
+            <span class="carousel-label-desc">通过 Cron 定时调度自动化任务</span>
+          </div>
+        </div>
+      </div>
+      <div class="carousel-dots">
+        <button class="carousel-dot active" data-index="0" aria-label="聊天模式"></button>
+        <button class="carousel-dot" data-index="1" aria-label="团队模式"></button>
+        <button class="carousel-dot" data-index="2" aria-label="循环模式"></button>
+      </div>
+    </div>
   </div>
   <div class="device device-iphone">
-    <picture>
-      <source srcset="/iPhone.webp" type="image/webp">
-      <img src="/iPhone.png" alt="AgentLink 手机端界面" loading="eager">
-    </picture>
+    <img src="/images/chat-iPhone.webp" alt="AgentLink 手机端界面" loading="eager">
   </div>
 </section>
 
 <div class="section-divider"></div>
 
 <!-- Philosophy -->
-<section class="philosophy reveal">
+<section class="philosophy">
   <div class="philosophy-label">为什么做这个</div>
   <h2>写代码不应该<em>被绑在电脑前。</em></h2>
   <p>
     Claude Code 很强，但只能在终端里用。AgentLink 把它变成一个可以随身携带的体验 &mdash;
-    一行命令，一个链接，在手机或 iPad 上继续你的工作。不需要账号，不需要配置，端到端加密。
+    一行命令，一个链接，在手机上对话、启动 Agent 团队、或调度定时任务。不需要账号，不需要配置，端到端加密。
   </p>
 </section>
 
 <div class="section-divider"></div>
 
 <!-- Bento Features -->
-<section class="bento reveal" id="features">
+<section class="bento" id="features">
   <h2 class="sr-only">功能</h2>
 
-  <!-- E2E Encryption — wide -->
+  <!-- Row 1: Chat | Team | Loop (wide) + Any Device -->
+  <div class="bento-card wide">
+    <div class="bento-visual">
+      <div class="mode-toggle">
+        <div class="mode-toggle-item active">
+          <div class="mode-icon chat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+          </div>
+          <div class="mode-name">Chat</div>
+          <div class="mode-desc">交互式编程对话</div>
+        </div>
+        <div class="mode-toggle-item">
+          <div class="mode-icon team-icon">
+            <svg 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 class="mode-name">Team</div>
+          <div class="mode-desc">并行子 Agent 协作</div>
+        </div>
+        <div class="mode-toggle-item">
+          <div class="mode-icon loop-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+          </div>
+          <div class="mode-name">Loop</div>
+          <div class="mode-desc">定时 Cron 任务</div>
+        </div>
+      </div>
+    </div>
+    <h3>三大模式，一个界面</h3>
+    <p>和 Claude 交互对话、启动 Agent 团队处理复杂任务、或用 Cron 调度定时 Loop 任务 &mdash; 全在同一个浏览器标签页里。</p>
+  </div>
+
+  <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>任何设备</h3>
+    <p>手机、平板、笔记本 &mdash; 有浏览器就行，随时切到你的 Claude。</p>
+  </div>
+
+  <!-- Row 2: E2E Encryption (wide) + Self-Hostable -->
   <div class="bento-card wide">
     <div class="bento-visual">
       <div class="encrypt-visual">
@@ -1097,18 +1305,17 @@
     <p>XSalsa20-Poly1305 加密。中继服务器只是个盲转发器 &mdash; 看不到你的代码、提示词或任何数据。</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 class="bento-icon green">
+        <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="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
       </div>
     </div>
-    <h3>开箱即用</h3>
-    <p>不用注册账号，不用配置环境。安装、启动、打开链接，三步搞定。</p>
+    <h3>可自建部署</h3>
+    <p>一条命令启动你自己的中继服务器。你的基础设施，你的规则。</p>
   </div>
 
-  <!-- 多 Agent 协作 -->
+  <!-- Row 3: Multi-Agent Teams + Multi Session + Zero Config -->
   <div class="bento-card">
     <div class="bento-visual">
       <div class="bento-icon blue">
@@ -1119,7 +1326,6 @@
     <p>启动多个 Claude 子 Agent 并行处理复杂任务，实时看板面板、活动动态、团队历史记录。</p>
   </div>
 
-  <!-- Multi Session -->
   <div class="bento-card">
     <div class="bento-visual">
       <div class="bento-icon blue">
@@ -1130,84 +1336,21 @@
     <p>同时跑多个对话，自由切换，互不干扰。</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>任何设备</h3>
-    <p>手机、平板、笔记本 &mdash; 有浏览器就行，随时切到你的 Claude。</p>
-  </div>
-
-  <!-- Full Claude Code — wide -->
-  <div class="bento-card wide">
-    <div class="bento-visual">
-      <div class="device-flow">
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
-          终端
-        </div>
-        <div class="flow-line"></div>
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
-          文件
-        </div>
-        <div class="flow-line"></div>
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-          搜索
-        </div>
-        <div class="flow-line"></div>
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
-          对话
-        </div>
-      </div>
-    </div>
-    <h3>完整的 Claude Code 体验</h3>
-    <p>文件编辑、Shell 命令、代码搜索、多轮对话 &mdash; 所有能力，现在搬到了浏览器里。</p>
-  </div>
-
-  <!-- Self-hostable -->
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon green">
-        <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="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
-      </div>
-    </div>
-    <h3>可自建部署</h3>
-    <p>一条命令启动你自己的中继服务器。你的基础设施，你的规则。</p>
-  </div>
-
-  <!-- Password Protection -->
   <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>
-    </div>
-    <h3>密码保护</h3>
-    <p>加个 <code style="color:var(--green);font-family:'JetBrains Mono',monospace;font-size:0.8rem">--password</code> 参数锁住会话，自带暴力破解防护。</p>
-  </div>
-
-  <!-- File Preview -->
-  <div class="bento-card wide">
-    <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>文件浏览器</h3>
-    <p>浏览项目目录树，代码语法高亮预览，直接在浏览器里导航你的代码库。</p>
+    <h3>开箱即用</h3>
+    <p>不用注册账号，不用配置环境。安装、启动、打开链接，三步搞定。</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">使用方式</div>
   <h2>三步，就这么简单。</h2>
   <div class="workflow-steps">
@@ -1228,8 +1371,8 @@
     <div class="workflow-step">
       <div class="step-marker">03</div>
       <div class="step-content">
-        <h3>开始干活</h3>
-        <p>多个对话并行运行，随时切换项目。完整的会话历史随时可以恢复，工作不会丢。</p>
+        <h3>对话、协作、自动化</h3>
+        <p>交互式编程、启动 Agent 团队处理复杂任务、或设置定时 Loop 任务 &mdash; 同一个链接，完整历史随时恢复。</p>
       </div>
     </div>
   </div>
@@ -1267,16 +1410,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>