linkshell-cli 0.10.59 → 0.10.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkshell-cli",
-  "version": "0.10.59",
+  "version": "0.10.60",
   "description": "Follow, steer and approve the coding agents on your computer (Claude Code, Codex, Gemini, Copilot and more) from your phone",
   "type": "module",
   "main": "dist/cli/src/index.js",
@@ -34,8 +34,8 @@
     "node-pty": "^1.1.0",
     "qrcode-terminal": "^0.12.0",
     "ws": "^8.21.0",
-    "@linkshell/host": "0.4.56",
     "@linkshell/gateway": "0.6.34",
+    "@linkshell/host": "0.4.57",
     "@linkshell/wire": "0.2.19"
   },
   "devDependencies": {

package/src/commands/login.ts

@@ -7,6 +7,95 @@ import { fetchProMembership } from "../../../client-core/src/pro-membership.js";
 
 const ITOOL_AUTH_URL = "https://itool.tech/en/auth/linkshell";
 
+// Served from the CLI's loopback server, so it has to carry its own styles and
+// copy: it can't load anything from itool.tech.
+const CALLBACK_PAGE = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>LinkShell</title>
+<style>
+  :root { color-scheme: dark; --canvas:#09090A; --surface:#111113; --border:#1E1E22; --text:#F4F4F2; --muted:#A8A8AF; --dots:rgba(244,244,242,.12);
+    --brand:#34D399; --brand-bg:#0E1A15; --error:#F87171; --error-bg:#2A1212; }
+  @media (prefers-color-scheme: light) {
+    :root { color-scheme: light; --canvas:#F2F2EF; --surface:#FFFFFF; --border:#E2E2DD; --text:#0A0A0A; --muted:#52525B; --dots:rgba(10,10,10,.1);
+      --brand:#047857; --brand-bg:#ECFDF5; --error:#B91C1C; --error-bg:#FEF0F0; }
+  }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; margin: 0; }
+  body { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--canvas); color: var(--text);
+    background-image: radial-gradient(var(--dots) 1.6px, transparent 1.6px); background-size: 24px 24px;
+    font: 15px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Segoe UI", sans-serif;
+    -webkit-font-smoothing: antialiased; }
+  main { width: 100%; max-width: 380px; padding: 36px 32px 28px; text-align: center; background: var(--surface); border-radius: 24px;
+    box-shadow: inset 0 0 0 1px var(--border), 0 24px 64px -16px rgba(0,0,0,.35); }
+  .icon { width: 56px; height: 56px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; border-radius: 999px;
+    background: var(--brand-bg); color: var(--brand); }
+  [data-state="error"] .icon { background: var(--error-bg); color: var(--error); }
+  .icon svg { width: 26px; height: 26px; }
+  h1 { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
+  p { margin: 0; color: var(--muted); }
+  code { padding: 2px 6px; border-radius: 6px; font: 13px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
+  footer { margin-top: 28px; padding-top: 16px; font-size: 13px; color: var(--muted); box-shadow: inset 0 1px 0 var(--border); }
+  .spin { animation: spin 900ms linear infinite; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
+</style>
+</head>
+<body>
+<main id="card" data-state="busy" aria-live="polite">
+  <div class="icon" id="icon"></div>
+  <h1 id="title"></h1>
+  <p id="body"></p>
+  <footer>LinkShell</footer>
+</main>
+<script>
+  var zh = /^zh/i.test(navigator.language || '');
+  document.documentElement.lang = zh ? 'zh-CN' : 'en';
+  var retry = zh ? '请回到终端重新运行 <code>linkshell login</code>。' : 'Run <code>linkshell login</code> again in your terminal.';
+  var copy = {
+    busy: zh ? ['正在完成登录', '正在把账号交给 LinkShell，请稍候。'] : ['Finishing sign-in', 'Handing your account to LinkShell.'],
+    done: zh ? ['登录成功', '可以关闭这个标签页，回到终端继续。'] : ['Signed in', 'You can close this tab and return to your terminal.'],
+    error: zh ? ['登录失败', retry] : ['Sign-in failed', retry],
+    empty: zh ? ['没有收到登录信息', retry] : ['No sign-in details received', retry]
+  };
+  var icons = {
+    busy: '<svg class="spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-6.22-8.56"/></svg>',
+    done: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>',
+    error: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4.5M12 16h.01"/></svg>'
+  };
+  function show(state) {
+    var card = document.getElementById('card');
+    card.setAttribute('data-state', state === 'empty' ? 'error' : state);
+    document.getElementById('icon').innerHTML = icons[state === 'empty' ? 'error' : state];
+    document.getElementById('title').textContent = copy[state][0];
+    document.getElementById('body').innerHTML = copy[state][1];
+    document.title = copy[state][0] + ' · LinkShell';
+  }
+  // The result is shown on iTool so it follows the site's design; this card
+  // stays as the fallback if itool.tech can't be reached.
+  function finish(state) {
+    show(state);
+    var status = state === 'done' ? 'ok' : state === 'empty' ? 'empty' : 'failed';
+    window.location.replace('https://itool.tech/' + (zh ? 'zh' : 'en') + '/auth/linkshell/done?status=' + status);
+  }
+  show('busy');
+  // iTool returns the tokens in the fragment; older redirects used the query string.
+  var data = window.location.hash.substring(1) || window.location.search.substring(1);
+  // Drop the tokens from the address bar and history before leaving the page.
+  history.replaceState(null, '', '/callback');
+  if (data) {
+    fetch('/token?' + data, { method: 'POST' })
+      .then(function (response) { if (!response.ok) throw new Error('failed'); finish('done'); })
+      .catch(function () { finish('error'); });
+  } else {
+    finish('empty');
+  }
+</script>
+</body>
+</html>`;
+
 /**
  * CLI login via iTool OAuth flow.
  *
@@ -49,32 +138,8 @@ export async function runLogin(options: { signal?: AbortSignal } = {}): Promise<
 
       if (url.pathname === "/callback") {
         // Serve a page that extracts the hash fragment and sends it back
-        res.writeHead(200, { "Content-Type": "text/html" });
-        res.end(`<!DOCTYPE html>
-<html>
-<head><title>LinkShell Login</title></head>
-<body>
-<p>Processing login...</p>
-<script>
-  const hash = window.location.hash.substring(1);
-  if (hash) {
-    fetch('/token?' + hash, { method: 'POST' })
-      .then(response => { if (!response.ok) throw new Error('Login failed'); document.body.innerHTML = '<h2>Login successful! You can close this tab.</h2>'; })
-      .catch(() => { document.body.innerHTML = '<h2>Login failed. Please try again.</h2>'; });
-  } else {
-    // Try query params (iTool may pass tokens as query params)
-    const params = window.location.search.substring(1);
-    if (params) {
-      fetch('/token?' + params, { method: 'POST' })
-        .then(response => { if (!response.ok) throw new Error('Login failed'); document.body.innerHTML = '<h2>Login successful! You can close this tab.</h2>'; })
-        .catch(() => { document.body.innerHTML = '<h2>Login failed. Please try again.</h2>'; });
-    } else {
-      document.body.innerHTML = '<h2>No auth data received. Please try again.</h2>';
-    }
-  }
-</script>
-</body>
-</html>`);
+        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+        res.end(CALLBACK_PAGE);
         return;
       }