@agent-link/server 0.1.540 → 0.1.541

package/web/dist/landing/landing.js

@@ -5,6 +5,21 @@ const installCommand = document.body.dataset.installCommand;
 
 root.classList.add('motion-ready');
 
+let arcadePointerStart;
+
+document.addEventListener('pointerdown', (event) => {
+  if (event.button !== 0) return;
+  arcadePointerStart = { x: event.clientX, y: event.clientY };
+});
+
+document.addEventListener('click', (event) => {
+  if (event.button !== 0 || !arcadePointerStart) return;
+  const distance = Math.hypot(event.clientX - arcadePointerStart.x, event.clientY - arcadePointerStart.y);
+  arcadePointerStart = undefined;
+  if (event.target.closest('.session-sidebar') || distance > 6 || window.getSelection()?.toString()) return;
+  root.classList.toggle('arcade-theme');
+});
+
 function fallbackCopy(text) {
   const textarea = document.createElement('textarea');
   textarea.value = text;
@@ -45,6 +60,159 @@ document.querySelectorAll('[data-copy-install]').forEach((button) => {
   });
 });
 
+const demoCopy = {
+  en: {
+    pi: {
+      title: 'Add keyboard navigation', meta: 'Q:\\src\\frontend · Pi', agent: 'Pi', icon: 'agent-pi.svg',
+      user: 'Add keyboard navigation to the session list and command palette.',
+      response: 'Done. Arrow keys move through results, Enter opens the selection, and Escape returns focus to the editor.',
+      tool: 'edit', detail: 'Updated SessionList.vue', placeholder: 'Ask Pi to refine keyboard behavior...',
+      controls: [['attach', 'Attach file'], ['terminal', 'Open terminal'], ['model', 'Gemini 2.5 Pro']],
+      extra: { type: 'diff', file: 'SessionList.vue', removed: '@click="openSession(item)"', added: '@keydown.enter="openSession(item)"' }
+    },
+    copilot: {
+      title: 'Prevent duplicate payments', meta: 'Q:\\src\\frontend · GitHub Copilot', agent: 'GitHub Copilot', icon: 'agent-copilot.svg',
+      user: 'The Pay button can fire twice on a slow connection. Fix it and add a test.',
+      response: 'Fixed. The action now locks while pending, and the request carries an idempotency key for safe retries.',
+      tool: 'run_tests', detail: 'checkout-retry.test.ts · 6 passed', placeholder: 'Ask Copilot about the fix...',
+      controls: [['context', 'Workspace'], ['mention', 'Add context'], ['model', 'GPT-4.1']]
+    },
+    claude: {
+      title: 'Design zero-downtime migration', meta: 'D:\\work\\api · Claude Code', agent: 'Claude Code', icon: 'agent-claude.svg',
+      user: 'Plan a safe migration of 40 million events to the new schema.',
+      response: 'I drafted a three-phase rollout: dual-write, backfill with checkpoints, then verified cutover with an instant rollback path.',
+      tool: 'write_file', detail: 'Created docs/event-migration.md', placeholder: 'Ask Claude to refine the plan...',
+      controls: [['plan', 'Plan mode'], ['thinking', 'Extended thinking'], ['model', 'Sonnet 4']],
+      extra: { type: 'question', label: 'Ask user question', question: 'Can we dual-write to both schemas for 48 hours?', choices: ['Yes, dual-write', 'No, use shadow reads'] }
+    },
+    codex: {
+      title: 'Speed up the CI pipeline', meta: 'D:\\work\\api · OpenAI Codex', agent: 'OpenAI Codex', icon: 'agent-codex.svg',
+      user: 'Our pull-request pipeline takes 14 minutes. Make it meaningfully faster.',
+      response: 'I split independent jobs, cached unchanged packages, and removed duplicate setup. The same checks now finish in 6 minutes.',
+      tool: 'terminal', detail: 'CI benchmark · 14m 08s → 6m 12s', placeholder: 'Ask Codex to optimize another job...',
+      controls: [['terminal', 'Open terminal'], ['image', 'Attach screenshot'], ['model', 'o3']],
+      terminal: true
+    }
+  },
+  zh: {
+    pi: {
+      title: '加入键盘导航', meta: 'Q:\\src\\frontend · Pi', agent: 'Pi', icon: 'agent-pi.svg',
+      user: '为会话列表和命令面板加入完整的键盘导航。',
+      response: '完成。方向键可以移动选项，Enter 打开会话，Escape 会将焦点返回编辑器。',
+      tool: 'edit', detail: '已更新 SessionList.vue', placeholder: '让 Pi 继续完善键盘操作...',
+      controls: [['attach', '添加附件'], ['terminal', '打开终端'], ['model', 'Gemini 2.5 Pro']],
+      extra: { type: 'diff', file: 'SessionList.vue', removed: '@click="openSession(item)"', added: '@keydown.enter="openSession(item)"' }
+    },
+    copilot: {
+      title: '修复付款重复提交', meta: 'Q:\\src\\frontend · GitHub Copilot', agent: 'GitHub Copilot', icon: 'agent-copilot.svg',
+      user: '网络较慢时付款按钮可能提交两次，请修复并补充测试。',
+      response: '已修复。请求期间按钮会锁定，同时加入幂等 Key，重试也不会重复提交。',
+      tool: 'run_tests', detail: 'checkout-retry.test.ts · 6 个测试通过', placeholder: '继续询问 Copilot...',
+      controls: [['context', '工作区'], ['mention', '添加上下文'], ['model', 'GPT-4.1']]
+    },
+    claude: {
+      title: '设计零停机迁移方案', meta: 'D:\\work\\api · Claude Code', agent: 'Claude Code', icon: 'agent-claude.svg',
+      user: '为 4000 万条事件数据设计一套安全的新 Schema 迁移方案。',
+      response: '我设计了三阶段方案：双写、带检查点的回填，以及可立即回滚的验证切换。',
+      tool: 'write_file', detail: '已创建 docs/event-migration.md', placeholder: '让 Claude 继续完善方案...',
+      controls: [['plan', '计划模式'], ['thinking', '深度思考'], ['model', 'Sonnet 4']],
+      extra: { type: 'question', label: '询问用户', question: '新旧 Schema 可以同时双写 48 小时吗？', choices: ['可以，使用双写', '不行，改用影子读取'] }
+    },
+    codex: {
+      title: '优化 CI 流水线', meta: 'D:\\work\\api · OpenAI Codex', agent: 'OpenAI Codex', icon: 'agent-codex.svg',
+      user: 'Pull Request 流水线需要 14 分钟，请明显缩短它。',
+      response: '我并行了独立任务、缓存未改动的 Package，并移除重复设置；相同检查现在 6 分钟完成。',
+      tool: 'terminal', detail: 'CI Benchmark · 14m 08s → 6m 12s', placeholder: '让 Codex 继续优化...',
+      controls: [['terminal', '打开终端'], ['image', '添加截图'], ['model', 'o3']],
+      terminal: true
+    }
+  }
+};
+
+const controlIcons = {
+  attach: '<path d="M7.5 6.5l3.8-3.8a2.1 2.1 0 013 3L8.8 11.2a3.5 3.5 0 01-5-5l5.1-5.1"/>',
+  terminal: '<path d="M2.5 4l3 3-3 3M7 10h5"/>',
+  model: '<path d="M8 1.8l1.1 3.1L12.2 6 9.1 7.1 8 10.2 6.9 7.1 3.8 6l3.1-1.1L8 1.8z"/>',
+  context: '<rect x="2" y="2" width="12" height="12" rx="2"/><path d="M5 5h6M5 8h6M5 11h4"/>',
+  mention: '<circle cx="8" cy="8" r="5.5"/><path d="M10.5 10.5V6.3a2.5 2.5 0 10.2 3.3"/>',
+  plan: '<path d="M3 3h10v10H3zM5.5 6h5M5.5 8.5h5M5.5 11h3"/>',
+  thinking: '<path d="M5 12.5h6M6 10.5h4M4.5 7a3.5 3.5 0 117 0c0 1.5-1 2.1-1.5 3h-4c-.5-.9-1.5-1.5-1.5-3z"/>',
+  image: '<rect x="2" y="3" width="12" height="10" rx="2"/><circle cx="5.5" cy="6.5" r="1"/><path d="M3.5 11l3-3 2.2 2 1.5-1.5 2.3 2.5"/>'
+};
+
+function renderDemoControls(controls) {
+  return controls.map(([type, label]) => {
+    const iconOnly = type === 'attach' || type === 'terminal' || type === 'image';
+    return `<button class="input-control control-${type} ${iconOnly ? 'icon-only' : ''} ${type === 'model' ? 'model-control' : ''}" type="button" aria-label="${label}" title="${label}"><svg viewBox="0 0 16 16" aria-hidden="true">${controlIcons[type]}</svg>${iconOnly ? '' : `<span>${label}</span>`}</button>`;
+  }).join('');
+}
+
+function renderDemoExtra(extra) {
+  if (!extra) return '';
+  if (extra.type === 'diff') {
+    return `<div class="diff-card"><div class="diff-head"><strong>Edit</strong><span>${extra.file}</span></div><code><span class="diff-remove">− ${extra.removed}</span><span class="diff-add">+ ${extra.added}</span></code></div>`;
+  }
+  return `<div class="question-card"><div class="question-label"><span>?</span><strong>${extra.label}</strong></div><p>${extra.question}</p><div class="question-choices">${extra.choices.map((choice) => `<span>${choice}</span>`).join('')}</div></div>`;
+}
+
+const demoChat = document.querySelector('[data-demo-chat]');
+const demoLocale = document.documentElement.lang.startsWith('zh') ? 'zh' : 'en';
+
+function selectDemoSession(sessionId) {
+  const session = demoCopy[demoLocale][sessionId];
+  if (!session || !demoChat) return;
+
+  document.querySelectorAll('.session-sidebar [data-demo-session]').forEach((button) => {
+    const active = button.dataset.demoSession === sessionId;
+    button.classList.toggle('active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+
+  demoChat.querySelector('[data-demo-title]').textContent = session.title;
+  demoChat.querySelector('[data-demo-meta]').textContent = session.meta;
+  demoChat.querySelector('[data-demo-user]').textContent = session.user;
+  demoChat.querySelector('[data-demo-agent]').textContent = session.agent;
+  demoChat.querySelector('[data-demo-icon]').src = `landing/icons/${session.icon}`;
+  demoChat.querySelector('[data-demo-response]').textContent = session.response;
+  demoChat.querySelector('[data-demo-tool]').textContent = session.tool;
+  demoChat.querySelector('[data-demo-tool-detail]').textContent = session.detail;
+  demoChat.querySelector('[data-demo-placeholder]').textContent = session.placeholder;
+  demoChat.querySelector('[data-demo-controls]').innerHTML = renderDemoControls(session.controls);
+  demoChat.querySelector('[data-demo-extra]').innerHTML = renderDemoExtra(session.extra);
+  demoChat.querySelector('[data-demo-terminal]').hidden = !session.terminal;
+  demoChat.classList.toggle('terminal-open', Boolean(session.terminal));
+
+  demoChat.classList.remove('session-changed');
+  requestAnimationFrame(() => demoChat.classList.add('session-changed'));
+}
+
+const demoSessionIds = ['pi', 'copilot', 'claude', 'codex'];
+let activeDemoIndex = 0;
+let demoRotationTimer;
+let demoRotationCancelled = false;
+
+function startDemoRotation() {
+  window.clearInterval(demoRotationTimer);
+  if (document.hidden || demoRotationCancelled) return;
+  demoRotationTimer = window.setInterval(() => {
+    activeDemoIndex = (activeDemoIndex + 1) % demoSessionIds.length;
+    selectDemoSession(demoSessionIds[activeDemoIndex]);
+  }, 1500);
+}
+
+document.querySelectorAll('.session-sidebar [data-demo-session]').forEach((button) => {
+  button.addEventListener('click', () => {
+    demoRotationCancelled = true;
+    window.clearInterval(demoRotationTimer);
+    activeDemoIndex = demoSessionIds.indexOf(button.dataset.demoSession);
+    selectDemoSession(button.dataset.demoSession);
+  });
+});
+
+document.addEventListener('visibilitychange', startDemoRotation);
+selectDemoSession(demoSessionIds[activeDemoIndex]);
+startDemoRotation();
+
 const updateHeader = () => {
   header?.classList.toggle('is-scrolled', window.scrollY > 12);
 };

package/web/dist/landing.html

@@ -4,7 +4,7 @@
   <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="description" content="Use Pi, GitHub Copilot, Claude Code, and OpenAI Codex across local projects from one browser workspace—with files, Git, an interactive terminal, port proxy, and 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">
@@ -17,29 +17,29 @@
   <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:description" content="Manage local coding agents, repositories, files, Git, terminal, and running web apps from one end-to-end encrypted browser workspace.">
   <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:description" content="Use Pi, Copilot, Claude Code, and Codex with your local files, Git, terminal, and running apps from any 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>
+  <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?v=20260808-arcade-click-1">
+  <script src="landing/landing.js?v=20260808-copy-1" 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.",
+    "description": "A local-first browser workspace for using multiple coding agents, repositories, and developer tools on your development machine.",
     "applicationCategory": "DeveloperApplication",
     "operatingSystem": "Windows, macOS, Linux",
     "isAccessibleForFree": true,
@@ -49,7 +49,11 @@
       "Parallel coding agent sessions",
       "Multiple working directories",
       "Pi, GitHub Copilot, Claude Code, and OpenAI Codex support",
-      "Files, Git, terminal, and local port access",
+      "File browsing, editing, upload, and download",
+      "Git status, diffs, branches, and history",
+      "Full interactive local terminal",
+      "Remote access to local web apps through Port Proxy",
+      "Agent-specific model, thinking, mode, and attachment controls",
       "End-to-end encrypted messages",
       "Self-hosted relay server"
     ],
@@ -75,7 +79,7 @@
   <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="">
+        <img class="brand-mark" src="landing/icons/msclaude-animated.svg" alt="">
         <span>msclaude</span>
       </a>
       <div class="nav-actions">
@@ -93,10 +97,10 @@
         <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>
+          <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">
@@ -112,40 +116,62 @@
       <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>
+          <span>msclaude · 8 sessions</span>
+          <span class="encrypted-label"><i aria-hidden="true"></i>E2E encrypted</span>
         </div>
         <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>
+          <span class="provider-switcher-label">Sessions by agent</span>
+          <span class="active"><i class="provider-icon"><img src="landing/icons/agent-pi.svg" alt=""></i>Pi <b>2</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>3</b></span>
+          <span><i class="provider-icon"><img src="landing/icons/agent-codex.svg" alt=""></i>Codex <b>2</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>
+            <button class="session-row active" type="button" data-demo-session="pi"><i class="provider-icon"><img src="landing/icons/agent-pi.svg" alt=""></i><span><strong>Add keyboard navigation</strong><small>Pi · working</small></span><b></b></button>
+            <button class="session-row" type="button" data-demo-session="copilot"><i class="provider-icon"><img src="landing/icons/agent-copilot.svg" alt=""></i><span><strong>Prevent duplicate payments</strong><small>Copilot · done</small></span></button>
             <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>
+            <button class="session-row" type="button" data-demo-session="claude"><i class="provider-icon"><img src="landing/icons/agent-claude.svg" alt=""></i><span><strong>Design zero-downtime migration</strong><small>Claude Code · ready</small></span></button>
+            <button class="session-row" type="button" data-demo-session="codex"><i class="provider-icon"><img src="landing/icons/agent-codex.svg" alt=""></i><span><strong>Speed up the CI pipeline</strong><small>Codex · done</small></span></button>
           </aside>
-          <div class="chat-ui">
+          <div class="chat-ui" data-demo-chat>
             <div class="chat-head">
-              <div><strong>Landing page copy</strong><small>Q:\src\frontend · Pi</small></div>
+              <div><strong data-demo-title>Add keyboard navigation</strong><small data-demo-meta>Q:\src\frontend · Pi</small></div>
               <div class="chat-actions"><span>Files</span><span>Git</span><span>Terminal</span></div>
             </div>
-            <div class="chat-body">
-              <div class="message user-message">Update the landing page copy and keep the layout compact.</div>
+            <div class="chat-body" aria-live="polite">
+              <div class="message user-message" data-demo-user>Add keyboard navigation to the session list and command palette.</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>
+                <span class="message-author"><i class="provider-icon"><img data-demo-icon src="landing/icons/agent-pi.svg" alt=""></i><span data-demo-agent>Pi</span></span>
+                <p data-demo-response>Done. Arrow keys move through results, Enter opens the selection, and Escape returns focus to the editor.</p>
+                <div class="tool-call"><span>✓</span><div><strong data-demo-tool>edit</strong><small data-demo-tool-detail>Updated SessionList.vue</small></div></div>
+                <div class="demo-extra" data-demo-extra>
+                  <div class="diff-card">
+                    <div class="diff-head"><strong>Edit</strong><span>SessionList.vue</span></div>
+                    <code><span class="diff-remove">− @click="openSession(item)"</span><span class="diff-add">+ @keydown.enter="openSession(item)"</span></code>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="chat-input">
+              <div class="input-line">
+                <span class="input-placeholder" data-demo-placeholder>Ask Pi to refine keyboard behavior...</span>
+                <button class="send-button" type="button" aria-label="Send message">↑</button>
+              </div>
+              <div class="input-toolbar" data-demo-controls></div>
+            </div>
+            <div class="remote-terminal" data-demo-terminal hidden>
+              <div class="terminal-head">
+                <span><i></i><i></i><i></i></span>
+                <strong>Remote terminal</strong>
+                <small>connected</small>
+              </div>
+              <div class="terminal-body" aria-label="Simulated remote terminal output">
+                <code><span class="terminal-command"><b>$</b> ls</span><span class="terminal-output">README.md   package.json   src/   test/   vite.config.ts</span><span class="terminal-command"><b>$</b> <i class="terminal-cursor"></i></span></code>
               </div>
             </div>
-            <div class="chat-input"><span>Ask Pi to continue...</span><button aria-label="Send message">↑</button></div>
           </div>
         </div>
       </div>
@@ -155,8 +181,8 @@
       <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>
+          <h2 id="capabilities-title">Every agent, repository, and tool in one workspace.</h2>
+          <p>Move between active sessions, working directories, and local developer tools without switching terminals, remote desktops, or browser tabs.</p>
         </div>
       </div>
 
@@ -168,62 +194,64 @@
             <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>
+            <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>
+          <h3>Your local workspace, in the browser</h3>
+          <p>Inspect and change the same files, repository, terminal, and running applications your agent uses—without moving your development environment to the cloud.</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>
+            <li>Files <small>Browse, edit, upload, download</small></li>
+            <li>Git <small>Status, diffs, branches, history</small></li>
+            <li>Terminal <small>Full interactive local PTY</small></li>
+            <li>Port Proxy <small>Open local web apps remotely</small></li>
           </ul>
         </article>
 
         <article class="capability-card steps-card">
-          <p class="section-label">How it works</p>
+          <p class="section-label">Agent controls</p>
+          <h3>Native controls for every agent</h3>
+          <p>Composer controls adapt to the selected backend—no command-line flags to remember.</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>
+            <li><span>+</span><div><strong>Attachments</strong><small>Add files and images.</small></div></li>
+            <li><span>◇</span><div><strong>Models &amp; thinking</strong><small>Switch models and reasoning levels.</small></div></li>
+            <li><span>›</span><div><strong>Modes &amp; permissions</strong><small>Use Plan and agent-specific options.</small></div></li>
           </ol>
         </article>
       </div>
     </section>
 
-    <section class="trust-section" aria-label="Security and self-hosting">
+    <section class="trust-section" aria-label="Local-first security model">
       <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>
+          <p class="section-label">01 · Work stays local</p>
+          <h2>Your machine remains the workspace.</h2>
+          <p>Agents, source code, credentials, tools, and command execution stay on your development machine—not in a new cloud environment.</p>
         </div>
       </article>
       <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>
+          <p class="section-label">02 · The connection is private</p>
+          <h2>The relay only moves encrypted bytes.</h2>
+          <p>Prompts, responses, tool output, and file contents are end-to-end encrypted between your browser and local agent.</p>
         </div>
       </article>
       <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>
+          <p class="section-label">03 · Deployment is yours</p>
+          <h2>Use our relay—or run your own.</h2>
+          <p>Start with the hosted relay, then self-host the lightweight server on your own infrastructure without changing the browser experience.</p>
         </div>
       </article>
     </section>
   </main>
 
   <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>
+    <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>