npm - @agent-link/server - Versions diffs - 0.1.536 → 0.1.538 - Mend

@agent-link/server 0.1.536 → 0.1.538

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/package.json +1 -1
package/web/dist/landing/icons/agent-claude.svg +1 -0
package/web/dist/landing/icons/agent-codex.svg +1 -0
package/web/dist/landing/icons/agent-copilot.svg +1 -0
package/web/dist/landing/icons/agent-pi.svg +5 -0
package/web/dist/landing/icons/msclaude-animated.svg +43 -0
package/web/dist/landing/landing.css +1228 -0
package/web/dist/landing/landing.js +71 -0
package/web/dist/landing.html +212 -572
package/web/dist/landing.zh.html +212 -567
package/web/dist/robots.txt +4 -0
package/web/dist/site.webmanifest +21 -0
package/web/dist/sitemap.xml +16 -0

package/web/dist/landing.html CHANGED Viewed

@@ -1,593 +1,233 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>msclaude — Run coding agents from anywhere</title>
-<meta name="description" content="msclaude gives Copilot, Claude Code, Codex, and other coding agents a clean remote workspace with multi-directory sessions, file preview and editing, remote terminal, and end-to-end encryption.">
-<meta name="keywords" content="msclaude, Copilot, Claude Code, Codex, coding agents, remote workspace, browser IDE, end-to-end encrypted, remote terminal, file editor">
-<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">
-<link rel="alternate" hreflang="x-default" href="https://msclaude.ai/">
-<meta property="og:type" content="website">
-<meta property="og:title" content="msclaude — Run coding agents from anywhere">
-<meta property="og:description" content="A clean remote workspace for Copilot, Claude Code, Codex, and other coding agents. Multi-directory sessions, files, terminal, and end-to-end encryption.">
-<meta property="og:url" content="https://msclaude.ai/">
-<meta property="og:image" content="https://msclaude.ai/iPad.png">
-<meta property="og:site_name" content="msclaude">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="msclaude — Run coding agents from anywhere">
-<meta name="twitter:description" content="A clean remote workspace for Copilot, Claude Code, Codex, and other coding agents.">
-<meta name="twitter:image" content="https://msclaude.ai/iPad.png">
-<link rel="icon" type="image/svg+xml" href="/favicon.svg">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-<script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "SoftwareApplication",
-  "name": "msclaude",
-  "description": "A clean remote workspace for Copilot, Claude Code, Codex, and other coding agents with end-to-end encryption.",
-  "url": "https://msclaude.ai/",
-  "applicationCategory": "DeveloperApplication",
-  "operatingSystem": "Windows, macOS, Linux",
-  "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
-  "screenshot": "https://msclaude.ai/iPad.png"
-}
-</script>
-<style>
-  @font-face {
-    font-family: 'Space Grotesk';
-    font-style: normal;
-    font-weight: 300 700;
-    font-display: swap;
-    src: url('/vendor/SpaceGrotesk-latin.woff2') format('woff2');
-  }
-  * { box-sizing: border-box; margin: 0; padding: 0; }
-  :root {
-    --bg: #fbfcff;
-    --card: #ffffff;
-    --surface: #f3f6fb;
-    --border: #e4e9f2;
-    --text: #111827;
-    --muted: #64748b;
-    --accent: #018B8D;
-    --accent-soft: #e6f7f7;
-    --green: #16a34a;
-    --code: #101827;
-  }
-  body {
-    min-height: 100vh;
-    background:
-      radial-gradient(circle at top left, rgba(1, 139, 141, 0.12), transparent 32rem),
-      linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, #ffffff 100%);
-    color: var(--text);
-    font-family: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-    line-height: 1.6;
-    -webkit-font-smoothing: antialiased;
-  }
-  a { color: inherit; text-decoration: none; }
-  nav, main, footer {
-    width: min(1120px, calc(100% - 32px));
-    margin: 0 auto;
-  }
-  nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 24px 0;
-  }
-  .logo {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    font-weight: 700;
-    letter-spacing: -0.03em;
-  }
-  .logo img { width: 28px; height: 28px; border-radius: 8px; }
-  .nav-actions {
-    align-items: center;
-    display: flex;
-    gap: 10px;
-  }
-  .repo-link,
-  .nav-lang {
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    color: var(--muted);
-    font-size: 0.86rem;
-    font-weight: 600;
-    padding: 8px 13px;
-  }
-  .repo-link:hover,
-  .nav-lang:hover { color: var(--text); background: #fff; }
-  .hero {
-    display: grid;
-    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
-    gap: 56px;
-    align-items: center;
-    padding: 70px 0 42px;
-  }
-  .eyebrow {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    background: var(--accent-soft);
-    border: 1px solid #c8eeee;
-    border-radius: 999px;
-    color: var(--accent);
-    font-size: 0.82rem;
-    font-weight: 700;
-    margin-bottom: 22px;
-    padding: 7px 13px;
-  }
-  .eyebrow::before {
-    content: "";
-    width: 7px;
-    height: 7px;
-    background: var(--green);
-    border-radius: 999px;
-    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
-  }
-  h1 {
-    max-width: 720px;
-    font-size: clamp(2.75rem, 6vw, 5.6rem);
-    letter-spacing: -0.07em;
-    line-height: 0.96;
-  }
-  h1 span { color: var(--accent); }
-  h1 .preposition {
-    color: var(--text);
-    font-size: 0.48em;
-    letter-spacing: -0.04em;
-    vertical-align: 0.18em;
-  }
-  .lead {
-    max-width: 640px;
-    color: var(--muted);
-    font-size: clamp(1rem, 2vw, 1.2rem);
-    margin: 24px 0 30px;
-  }
-  .agent-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-bottom: 32px;
-  }
-  .agent-pill {
-    align-items: center;
-    background: rgba(255, 255, 255, 0.78);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    color: #334155;
-    display: inline-flex;
-    font-size: 0.92rem;
-    font-weight: 650;
-    gap: 8px;
-    padding: 9px 14px;
-  }
-  .agent-pill::before {
-    content: "";
-    width: 8px;
-    height: 8px;
-    border-radius: 99px;
-    background: var(--accent);
-  }
-  .cta-row {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 14px;
-  }
-  .cta-primary {
-    align-items: center;
-    background: var(--text);
-    border: 0;
-    border-radius: 14px;
-    color: #fff;
-    cursor: pointer;
-    display: inline-flex;
-    font: inherit;
-    font-size: 0.95rem;
-    font-weight: 700;
-    gap: 8px;
-    padding: 13px 18px;
-  }
-  .install-command {
-    background: #fff;
-    border: 1px solid var(--border);
-    border-radius: 14px;
-    color: #334155;
-    cursor: pointer;
-    font-family: Consolas, 'Courier New', monospace;
-    font-size: 0.9rem;
-    overflow-x: auto;
-    padding: 12px 14px;
-    width: min(100%, 560px);
-  }
-  .install-command span { display: block; white-space: nowrap; }
-  .panel {
-    background: rgba(255, 255, 255, 0.82);
-    border: 1px solid var(--border);
-    border-radius: 28px;
-    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.10);
-    padding: 18px;
-  }
-  .workspace {
-    background: #fff;
-    border: 1px solid var(--border);
-    border-radius: 22px;
-    overflow: hidden;
-  }
-  .workspace-top {
-    align-items: center;
-    background: var(--surface);
-    border-bottom: 1px solid var(--border);
-    color: var(--muted);
-    display: flex;
-    font-size: 0.78rem;
-    font-weight: 700;
-    justify-content: space-between;
-    padding: 13px 16px;
-  }
-  .workspace-body {
-    display: grid;
-    grid-template-columns: 0.95fr 1.4fr;
-    min-height: 330px;
-  }
-  .sidebar {
-    background: #f8fafc;
-    border-right: 1px solid var(--border);
-    padding: 16px;
-  }
-  .session {
-    border: 1px solid transparent;
-    border-radius: 14px;
-    color: var(--muted);
-    font-size: 0.82rem;
-    margin-bottom: 10px;
-    padding: 10px;
-  }
-  .session strong { color: var(--text); display: block; font-size: 0.9rem; }
-  .session.active { background: #fff; border-color: var(--border); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); }
-  .content { display: flex; flex-direction: column; padding: 16px; gap: 12px; }
-  .chat-card, .file-card, .terminal {
-    border: 1px solid var(--border);
-    border-radius: 16px;
-    padding: 14px;
-  }
-  .chat-card { background: linear-gradient(135deg, #eef4ff, #ffffff); }
-  .chat-card b, .file-card b { display: block; font-size: 0.86rem; margin-bottom: 4px; }
-  .chat-card p, .file-card p { color: var(--muted); font-size: 0.82rem; }
-  .terminal {
-    background: var(--code);
-    color: #dbeafe;
-    cursor: pointer;
-    font-family: Consolas, 'Courier New', monospace;
-    font-size: 0.78rem;
-    line-height: 1.8;
-  }
-  .terminal span { color: #86efac; }
-  .section-head {
-    margin: 72px auto 26px;
-    max-width: 680px;
-    text-align: center;
-  }
-  .section-head h2 {
-    font-size: clamp(1.8rem, 3.6vw, 3rem);
-    letter-spacing: -0.05em;
-    line-height: 1.05;
-  }
-  .section-head p {
-    color: var(--muted);
-    margin-top: 12px;
-  }
-  .features {
-    display: grid;
-    gap: 16px;
-    grid-template-columns: repeat(4, 1fr);
-  }
-  .feature-card {
-    background: var(--card);
-    border: 1px solid var(--border);
-    border-radius: 22px;
-    padding: 22px;
-  }
-  .feature-card h3 {
-    font-size: 1rem;
-    letter-spacing: -0.02em;
-    margin: 14px 0 7px;
-  }
-  .feature-card p {
-    color: var(--muted);
-    font-size: 0.9rem;
-  }
-  .feature-icon {
-    align-items: center;
-    background: var(--accent-soft);
-    border-radius: 14px;
-    color: var(--accent);
-    display: flex;
-    height: 42px;
-    justify-content: center;
-    width: 42px;
-  }
-  .feature-icon svg {
-    fill: none;
-    height: 21px;
-    stroke: currentColor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: 2;
-    width: 21px;
-  }
-  .security {
-    align-items: center;
-    background: #0f172a;
-    border-radius: 28px;
-    color: #fff;
-    display: grid;
-    gap: 28px;
-    grid-template-columns: 1.1fr 0.9fr;
-    margin-top: 18px;
-    padding: 30px;
-  }
-  .security h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); letter-spacing: -0.05em; line-height: 1.05; }
-  .security p { color: #b6c3d7; margin-top: 12px; }
-  .encrypt-flow {
-    background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 20px;
-    color: #cbd5e1;
-    display: grid;
-    font-family: Consolas, 'Courier New', monospace;
-    gap: 10px;
-    padding: 16px;
-  }
-  .encrypt-flow div {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    gap: 14px;
-  }
-  .encrypt-flow span:last-child { color: #86efac; }
-  footer {
-    border-top: 1px solid var(--border);
-    color: var(--muted);
-    display: flex;
-    font-size: 0.86rem;
-    justify-content: space-between;
-    margin-top: 76px;
-    padding: 28px 0;
-  }
-  .toast {
-    background: var(--text);
-    border-radius: 999px;
-    bottom: 24px;
-    color: #fff;
-    font-size: 0.84rem;
-    font-weight: 700;
-    left: 50%;
-    opacity: 0;
-    padding: 10px 18px;
-    pointer-events: none;
-    position: fixed;
-    transform: translate(-50%, 16px);
-    transition: opacity 0.22s, transform 0.22s;
-  }
-  .toast.show { opacity: 1; transform: translate(-50%, 0); }
-  @media (max-width: 900px) {
-    .hero, .security { grid-template-columns: 1fr; }
-    .hero { padding-top: 44px; }
-    .features { grid-template-columns: repeat(2, 1fr); }
-  }
-  @media (max-width: 620px) {
-    nav, main, footer { width: min(100% - 24px, 1120px); }
-    h1 { font-size: clamp(2.35rem, 15vw, 4rem); }
-    .workspace-body { grid-template-columns: 1fr; }
-    .sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
-    .features { grid-template-columns: 1fr; }
-    .security { padding: 22px; }
-    footer { flex-direction: column; gap: 8px; }
-  }
-</style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>msclaude — Remote Control for Local Coding Agents</title>
+  <meta name="description" content="Control Pi, GitHub Copilot, Claude Code, and OpenAI Codex on your development machine from a browser. Manage parallel sessions with end-to-end encryption.">
+  <meta name="robots" content="index, follow, max-image-preview:large">
+  <meta name="application-name" content="msclaude">
+  <meta name="theme-color" content="#f2efe8">
+  <link rel="canonical" href="https://msclaude.ai/">
+  <link rel="alternate" hreflang="en" href="https://msclaude.ai/">
+  <link rel="alternate" hreflang="zh-CN" href="https://msclaude.ai/zh">
+  <link rel="alternate" hreflang="x-default" href="https://msclaude.ai/">
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="msclaude">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:locale:alternate" content="zh_CN">
+  <meta property="og:title" content="msclaude — Remote Control for Local Coding Agents">
+  <meta property="og:description" content="Use multiple coding agents and working directories from one browser workspace. Code and execution stay on your development machine.">
+  <meta property="og:url" content="https://msclaude.ai/">
+  <meta property="og:image" content="https://msclaude.ai/iPad.png">
+  <meta property="og:image:alt" content="msclaude browser workspace showing parallel coding agent sessions">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="msclaude — Remote Control for Local Coding Agents">
+  <meta name="twitter:description" content="Manage Pi, Copilot, Claude Code, and Codex sessions on your development machine from a browser.">
+  <meta name="twitter:image" content="https://msclaude.ai/iPad.png">
+  <meta name="twitter:image:alt" content="msclaude browser workspace showing parallel coding agent sessions">
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="manifest" href="/site.webmanifest">
+  <link rel="preload" href="/vendor/SpaceGrotesk-latin.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="stylesheet" href="/landing/landing.css">
+  <script src="/landing/landing.js" defer></script>
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "SoftwareApplication",
+    "name": "msclaude",
+    "url": "https://msclaude.ai/",
+    "description": "A browser workspace for remotely controlling coding agents running on your development machine.",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Windows, macOS, Linux",
+    "isAccessibleForFree": true,
+    "downloadUrl": "https://www.npmjs.com/package/@agent-link/agent",
+    "softwareRequirements": "Node.js 18 or later",
+    "featureList": [
+      "Parallel coding agent sessions",
+      "Multiple working directories",
+      "Pi, GitHub Copilot, Claude Code, and OpenAI Codex support",
+      "Files, Git, terminal, and local port access",
+      "End-to-end encrypted messages",
+      "Self-hosted relay server"
+    ],
+    "offers": {
+      "@type": "Offer",
+      "price": "0",
+      "priceCurrency": "USD"
+    },
+    "sameAs": [
+      "https://github.com/kailunshi_microsoft/AgenticWorker",
+      "https://www.npmjs.com/package/@agent-link/agent"
+    ]
+  }
+  </script>
 </head>
-<body>
-<header>
-  <nav>
-    <a class="logo" href="/">
-      <img src="/favicon.svg" alt="msclaude">
-      <span>msclaude</span>
-    </a>
-    <div class="nav-actions">
-      <a href="https://github.com/kailunshi_microsoft/AgenticWorker" class="repo-link" rel="noopener">GitHub</a>
-      <a href="/zh" class="nav-lang">中文</a>
-    </div>
-  </nav>
-</header>
-<main>
-  <section class="hero">
-    <div>
-      <div class="eyebrow">Remote workspace for coding agents</div>
-      <h1>Remote control <span class="preposition">for</span><br><span>coding agents.</span></h1>
-      <p class="lead">msclaude connects your local project to a private web workspace, so you can drive Copilot, Claude Code, Codex, and other agents from any device.</p>
-      <div class="agent-row" aria-label="Supported agents">
-        <span class="agent-pill">GitHub Copilot</span>
-        <span class="agent-pill">Claude Code</span>
-        <span class="agent-pill">OpenAI Codex</span>
-        <span class="agent-pill">More agent backends</span>
+<body
+  data-install-command="npm install -g @agent-link/agent &amp;&amp; agentlink-client start --daemon"
+  data-copy-success="Install command copied"
+  data-copy-failure="Copy failed — select the command manually"
+>
+  <a class="skip-link" href="#main">Skip to content</a>
+  <header class="site-header">
+    <nav class="nav-shell" aria-label="Primary navigation">
+      <a class="brand" href="/" aria-label="msclaude home">
+        <img class="brand-mark" src="/landing/icons/msclaude-animated.svg" alt="">
+        <span>msclaude</span>
+      </a>
+      <div class="nav-actions">
+        <a class="text-link github-link" href="https://github.com/kailunshi_microsoft/AgenticWorker" target="_blank" rel="noopener">GitHub</a>
+        <a class="language-link" href="/zh" lang="zh-CN" hreflang="zh-CN">中文</a>
       </div>
-      <div class="cta-row">
-        <button class="cta-primary" onclick="copyInstall()">
-          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
-          Copy install command
-        </button>
-        <code class="install-command" onclick="copyInstall()">
-          <span>npm install -g @agent-link/agent</span>
-          <span>agentlink-client start -D --entra</span>
-        </code>
+    </nav>
+  </header>
+  <main id="main">
+    <section class="hero" aria-labelledby="hero-title">
+      <div class="hero-copy">
+        <p class="eyebrow"><span></span> Open Source Remote workspace for local agents</p>
+        <h1 id="hero-title">Control coding agents on your development machine <em>from a browser.</em></h1>
+        <p class="hero-lead">msclaude connects your browser to coding agents running locally. Continue development work remotely while your code, tools, and execution environment remain on your machine.</p>
+        <div class="agent-list" aria-label="Supported coding agents">
+          <span><i class="provider-icon"><img src="/landing/icons/agent-pi.svg" alt=""></i> Pi</span>
+          <span><i class="provider-icon"><img src="/landing/icons/agent-copilot.svg" alt=""></i> GitHub Copilot</span>
+          <span><i class="provider-icon"><img src="/landing/icons/agent-claude.svg" alt=""></i> Claude Code</span>
+          <span><i class="provider-icon"><img src="/landing/icons/agent-codex.svg" alt=""></i> OpenAI Codex</span>
+        </div>
+        <div class="hero-actions">
+          <button class="install-command" type="button" data-copy-install>
+            <span class="install-prompt" aria-hidden="true">$</span>
+            <code><span>npm install -g @agent-link/agent</span><span>agentlink-client start --daemon</span></code>
+            <span class="copy-label">Copy</span>
+          </button>
+        </div>
+        <p class="compatibility">Windows · macOS · Linux · Node.js 18+</p>
       </div>
-    </div>
-    <div class="panel" aria-label="msclaude workspace preview">
-      <div class="workspace">
-        <div class="workspace-top">
-          <span>msclaude.ai/s/abc123</span>
-          <span>encrypted</span>
+      <div class="product-window" aria-label="Illustration of parallel coding agent sessions">
+        <div class="window-bar">
+          <span class="window-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+          <span>msclaude · 4 sessions</span>
+          <span class="encrypted-label">● E2E encrypted</span>
         </div>
-        <div class="workspace-body">
-          <div class="sidebar">
-            <div class="session active"><strong>Q:\src\msclaude</strong>Copilot fixing UI copy</div>
-            <div class="session"><strong>D:\work\api</strong>Claude Code reviewing diffs</div>
-            <div class="session"><strong>C:\repo\mobile</strong>Codex summarizing screenshots</div>
-            <div class="session"><strong>C:\repo\mobile</strong>Terminal + file edits</div>
-          </div>
-          <div class="content">
-            <div class="chat-card">
-              <b>Agent conversation</b>
-              <p>Ask for changes, review plans, and keep sessions tied to each directory.</p>
-            </div>
-            <div class="file-card">
-              <b>Preview and edit files</b>
-              <p>Open source files, inspect diffs, and make focused edits without leaving the browser.</p>
+        <div class="provider-switcher" aria-label="Four supported agents">
+          <span class="provider-switcher-label">Agents on this page</span>
+          <span class="active"><i class="provider-icon"><img src="/landing/icons/agent-pi.svg" alt=""></i>Pi <b>1</b></span>
+          <span><i class="provider-icon"><img src="/landing/icons/agent-copilot.svg" alt=""></i>Copilot <b>1</b></span>
+          <span><i class="provider-icon"><img src="/landing/icons/agent-claude.svg" alt=""></i>Claude Code <b>1</b></span>
+          <span><i class="provider-icon"><img src="/landing/icons/agent-codex.svg" alt=""></i>Codex <b>1</b></span>
+        </div>
+        <div class="workspace-ui">
+          <aside class="session-sidebar">
+            <div class="sidebar-title"><strong>Sessions</strong><span>+</span></div>
+            <div class="directory-label">Q:\src\frontend</div>
+            <div class="session-row active"><i class="provider-icon"><img src="/landing/icons/agent-pi.svg" alt=""></i><span><strong>Landing page copy</strong><small>Pi · working</small></span><b></b></div>
+            <div class="session-row"><i class="provider-icon"><img src="/landing/icons/agent-copilot.svg" alt=""></i><span><strong>Fix auth callback</strong><small>Copilot · done</small></span></div>
+            <div class="directory-label">D:\work\api</div>
+            <div class="session-row"><i class="provider-icon"><img src="/landing/icons/agent-claude.svg" alt=""></i><span><strong>Review API changes</strong><small>Claude Code · working</small></span><b></b></div>
+            <div class="session-row"><i class="provider-icon"><img src="/landing/icons/agent-codex.svg" alt=""></i><span><strong>Update unit tests</strong><small>Codex · done</small></span></div>
+          </aside>
+          <div class="chat-ui">
+            <div class="chat-head">
+              <div><strong>Landing page copy</strong><small>Q:\src\frontend · Pi</small></div>
+              <div class="chat-actions"><span>Files</span><span>Git</span><span>Terminal</span></div>
             </div>
-            <div class="terminal" onclick="copyCmd('agentlink-client start -D --entra')">
-              $ <span>agentlink-client start -D --entra</span>
+            <div class="chat-body">
+              <div class="message user-message">Update the landing page copy and keep the layout compact.</div>
+              <div class="message agent-message">
+                <span class="message-author"><i class="provider-icon"><img src="/landing/icons/agent-pi.svg" alt=""></i> Pi</span>
+                <p>I’ll revise the product description, keep the supported agents visible, and fit the main content within two screens.</p>
+                <div class="tool-call"><span>✓</span><div><strong>apply_patch</strong><small>Updated landing.html and landing.css</small></div></div>
+              </div>
             </div>
+            <div class="chat-input"><span>Ask Pi to continue...</span><button aria-label="Send message">↑</button></div>
           </div>
         </div>
       </div>
-    </div>
-  </section>
-  <section aria-labelledby="features-title">
-    <div class="section-head">
-      <h2 id="features-title">Everything needed for remote agent work.</h2>
-      <p>Small surface area, focused controls, and the tools an agent needs to operate on real projects.</p>
-    </div>
+    </section>
+    <section class="capabilities" id="sessions" aria-labelledby="capabilities-title">
+      <div class="section-intro">
+        <p class="section-label">Workspace</p>
+        <div>
+          <h2 id="capabilities-title">Multiple agents and projects, on one page.</h2>
+          <p>Keep sessions from different agents and working directories open at the same time. Check progress and send follow-up instructions without switching terminals or browser tabs.</p>
+        </div>
+      </div>
-    <div class="features">
-      <article class="feature-card">
-        <div class="feature-icon"><svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"></path></svg></div>
-        <h3>Multi-directory sessions</h3>
-        <p>Manage separate conversations and agent state across multiple local workspaces.</p>
-      </article>
-      <article class="feature-card">
-        <div class="feature-icon"><svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg></div>
-        <h3>File preview and editing</h3>
-        <p>Browse project files, preview content, and apply edits directly from the web UI.</p>
+      <div class="capability-grid">
+        <article class="capability-card sessions-card">
+          <div class="card-icon">▦</div>
+          <div>
+            <h3>Parallel sessions</h3>
+            <p>Run several agent sessions, organize them by working directory, and search previous conversations.</p>
+          </div>
+          <div class="session-stack" aria-hidden="true">
+            <span><i class="provider-icon"><img src="/landing/icons/agent-pi.svg" alt=""></i><b>Pi</b><small>Q:\src\frontend</small><em>Working</em></span>
+            <span><i class="provider-icon"><img src="/landing/icons/agent-claude.svg" alt=""></i><b>Claude Code</b><small>D:\work\api</small><em>Working</em></span>
+            <span><i class="provider-icon"><img src="/landing/icons/agent-codex.svg" alt=""></i><b>Codex</b><small>C:\repo\mobile</small><em>Done</em></span>
+          </div>
+        </article>
+        <article class="capability-card tools-card" id="tools">
+          <div class="card-icon">&gt;_</div>
+          <h3>Chat and developer tools</h3>
+          <p>Chat is the main workflow. Project tools stay available alongside the conversation when more context or control is needed.</p>
+          <ul class="tool-list">
+            <li>Files <small>Browse, preview, edit</small></li>
+            <li>Git <small>Status and diffs</small></li>
+            <li>Terminal <small>Run local commands</small></li>
+            <li>Port Proxy <small>Open local servers</small></li>
+          </ul>
+        </article>
+        <article class="capability-card steps-card">
+          <p class="section-label">How it works</p>
+          <ol>
+            <li><span>1</span><div><strong>Start locally</strong><small>Run msclaude in a working directory.</small></div></li>
+            <li><span>2</span><div><strong>Open the URL</strong><small>Use the generated session link on another device.</small></div></li>
+            <li><span>3</span><div><strong>Continue working</strong><small>Use chat, files, Git, and terminal remotely.</small></div></li>
+          </ol>
+        </article>
+      </div>
+    </section>
+    <section class="trust-section" aria-label="Security and self-hosting">
+      <article class="trust-card" id="security">
+        <div>
+          <p class="section-label">End-to-end encryption</p>
+          <h2>The relay cannot read your work.</h2>
+          <p>Messages are encrypted between the browser and local agent. The relay cannot read prompts, responses, tool output, or file contents. Code and execution remain on your development machine.</p>
+        </div>
       </article>
-      <article class="feature-card">
-        <div class="feature-icon"><svg viewBox="0 0 24 24"><path d="m4 17 6-6-6-6"></path><path d="M12 19h8"></path></svg></div>
-        <h3>Remote terminal</h3>
-        <p>Run project commands, inspect output, and unblock agents without SSH or screen sharing.</p>
+      <article class="trust-card">
+        <div>
+          <p class="section-label">Access from any device</p>
+          <h2>Continue agent sessions from your browser.</h2>
+          <p>Open the same session URL on a computer, tablet, or phone to check progress, send follow-up instructions, and use the related development tools.</p>
+        </div>
       </article>
-      <article class="feature-card">
-        <div class="feature-icon"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="10" rx="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></div>
-        <h3>End-to-end encrypted</h3>
-        <p>Messages are encrypted between your browser and local agent; the relay only passes ciphertext.</p>
+      <article class="trust-card" id="self-hosting">
+        <div>
+          <p class="section-label">Self-hosting</p>
+          <h2>Run your own relay server.</h2>
+          <p>The hosted relay is the simplest setup, but it is not required. The lightweight msclaude relay can be deployed on your own infrastructure with the same browser experience and encryption model.</p>
+        </div>
       </article>
-    </div>
-  </section>
-  <section class="security" aria-label="Security">
-    <div>
-      <h2>Private by design.</h2>
-      <p>Your code stays on your machine. msclaude creates a secure relay path to the browser, while the local agent keeps control of project files, commands, and credentials.</p>
-    </div>
-    <div class="encrypt-flow">
-      <div><span>browser</span><span>sealed message</span></div>
-      <div><span>relay</span><span>ciphertext only</span></div>
-      <div><span>local agent</span><span>decrypted locally</span></div>
-    </div>
-  </section>
-</main>
-<footer>
-  <span><strong>msclaude</strong></span>
-  <span>
-    <a href="https://github.com/kailunshi_microsoft/AgenticWorker" rel="noopener">GitHub</a>
-    ·
-    <a href="https://www.linkedin.com/in/shikailun/" rel="noopener">LinkedIn</a>
-  </span>
-</footer>
-<div class="toast" id="copyToast">Copied to clipboard</div>
-<script>
-function copyCmd(text) {
-  navigator.clipboard.writeText(text);
-  showToast();
-}
+    </section>
+  </main>
-function copyInstall() {
-  copyCmd('npm install -g @agent-link/agent && agentlink-client start -D --entra');
-}
+  <footer class="site-footer">
+    <a class="brand footer-brand" href="/"><img class="brand-mark" src="/landing/icons/msclaude-animated.svg" alt=""><span>msclaude</span></a>
+    <p>Remote access for coding agents running on your development machine.</p>
+    <div><a href="https://github.com/kailunshi_microsoft/AgenticWorker" target="_blank" rel="noopener">GitHub</a><a href="/zh" lang="zh-CN" hreflang="zh-CN">中文</a></div>
+  </footer>
-function showToast() {
-  const toast = document.getElementById('copyToast');
-  toast.classList.add('show');
-  setTimeout(() => toast.classList.remove('show'), 1800);
-}
-</script>
+  <div class="toast" role="status" aria-live="polite">Install command copied</div>
 </body>
 </html>