npm - @sksoftofficial/ocduet - Versions diffs - 0.2.1 - Mend

@sksoftofficial/ocduet 0.2.1

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 (21) hide show

package/README.md +1 -0
package/bin/ocduet.js +61 -0
package/package.json +33 -0
package/src/commands/install.js +222 -0
package/src/commands/relay.js +151 -0
package/src/commands/service.js +164 -0
package/src/commands/token.js +49 -0
package/src/commands/uninstall.js +86 -0
package/src/daemon.js +747 -0
package/src/e2ee.js +141 -0
package/src/paths.js +137 -0
package/src/plugin/ocduet-server.js +609 -0
package/src/plugin/ocduet-sidebar.jsx +309 -0
package/src/plugin/web/app.css +290 -0
package/src/plugin/web/app.js +1716 -0
package/src/plugin/web/index.html +70 -0
package/src/plugin/web/pair.html +131 -0
package/src/qrcodegen.js +741 -0
package/src/qrterm.js +5 -0
package/src/relay-client.js +172 -0
package/src/relayer.js +337 -0

package/src/plugin/web/index.html ADDED Viewed

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
+  <meta name="theme-color" content="#151716" />
+  <title>ocduet — your workspace, anywhere</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='12' fill='%23b8e5c7'/%3E%3Cpath d='M10 12h8v16h-8zm12 0h8v16h-8z' fill='%23151716'/%3E%3C/svg%3E" />
+  <link rel="stylesheet" href="/app.css" />
+</head>
+<body>
+  <svg class="svg-defs" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs>
+    <symbol id="i-panels" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="3"/><path d="M9 4v16"/></symbol>
+    <symbol id="i-chat" viewBox="0 0 24 24"><path d="M21 11.5a8.5 8.5 0 0 1-8.5 8.5H4l-1 1v-9.5a9 9 0 0 1 18 0Z"/><path d="M8 9h8M8 13h5"/></symbol>
+    <symbol id="i-arrow" viewBox="0 0 24 24"><path d="M12 19V5m-6 6 6-6 6 6"/></symbol>
+    <symbol id="i-terminal" viewBox="0 0 24 24"><path d="m5 7 5 5-5 5m8 0h6"/></symbol>
+    <symbol id="i-search" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4 4"/></symbol>
+    <symbol id="i-close" viewBox="0 0 24 24"><path d="m6 6 12 12M6 18 18 6"/></symbol>
+    <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3l7 3v5c0 5-3.2 8.2-7 10-3.8-1.8-7-5-7-10V6z"/><path d="M12 9v4m0 3h.01"/></symbol>
+    <symbol id="i-activity" viewBox="0 0 24 24"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></symbol>
+    <symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></symbol>
+    <symbol id="i-chevron" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
+    <symbol id="i-check" viewBox="0 0 24 24"><path d="m5 13 4 4L19 7"/></symbol>
+    <symbol id="i-dots" viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="19" r="1.5" fill="currentColor" stroke="none"/></symbol>
+    <symbol id="i-trash" viewBox="0 0 24 24"><path d="M4 7h16"/><path d="M10 11v6M14 11v6"/><path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"/><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></symbol>
+  </defs></svg>
+  <button id="sidebar-backdrop" aria-label="Close sessions" tabindex="-1" hidden></button>
+  <aside id="sessions" aria-label="Sessions">
+    <div class="brand"><span class="brand-mark" aria-hidden="true"><i></i><i></i></span><span>ocduet<span class="brand-period">.</span></span><span class="brand-tag">COMPANION</span><button id="close-sessions" class="icon-button" aria-label="Close sessions"><svg><use href="#i-close"/></svg></button></div>
+    <button id="new-session" class="new-session"><svg><use href="#i-bolt"/></svg>New session</button>
+    <div class="section-label"><span>SESSIONS</span><span id="session-count">0</span></div>
+    <label class="search"><svg><use href="#i-search"/></svg><input id="session-search" type="search" placeholder="Find a session…" aria-label="Find a session" autocomplete="off"/><kbd>/</kbd></label>
+    <nav id="session-list" aria-label="Session list"></nav>
+  </aside>
+  <div id="workspace">
+    <header id="topbar">
+      <button id="sessions-btn" class="icon-button" aria-label="Open sessions" aria-controls="sessions" aria-expanded="false"><svg><use href="#i-panels"/></svg></button>
+      <div class="header-icon"><svg><use href="#i-chat"/></svg></div>
+      <div id="title"><span id="project-name">Your workspace, anywhere</span><span id="session-subtitle">The mobile companion for opencode</span></div>
+      <button id="menu-btn" class="icon-button" aria-label="Session menu" aria-haspopup="menu" aria-expanded="false" disabled><svg><use href="#i-dots"/></svg></button>
+      <div id="session-menu" class="menu" role="menu" hidden><button id="menu-usage" role="menuitem"><svg><use href="#i-activity"/></svg>Usage</button><button id="menu-level" role="menuitem"><svg><use href="#i-shield"/></svg>Permission level</button><button id="menu-delete" role="menuitem" class="danger"><svg><use href="#i-trash"/></svg>Delete session</button></div>
+    </header>
+    <main id="main">
+      <div id="timeline"></div>
+      <section id="empty" class="empty">
+        <div class="connection-art" aria-hidden="true"><span class="device desktop"><svg><use href="#i-terminal"/></svg></span><span class="connection-line"><i></i><i></i><i></i></span><span class="device phone"><span class="brand-mark"><i></i><i></i></span></span></div>
+        <span class="eyebrow">PICK UP WHERE YOU LEFT OFF</span>
+        <h1 id="empty-title">Good work travels with you.</h1>
+        <p id="empty-description">Your desktop session, right here. Choose a session<br class="desktop-break"/> to keep the conversation going.</p>
+        <div id="pairing-steps" class="pairing-steps" hidden><div><span>01</span><p>Open <strong>opencode</strong> on your desktop</p></div><div><span>02</span><p>Open the <strong>Duet</strong> panel and select <strong>connect</strong></p></div><div><span>03</span><p>Scan the QR code with your phone</p></div></div>
+        <div class="empty-note"><span class="status-dot"></span>Same session. Same context. In sync.</div>
+      </section>
+      <div id="activity" role="status" aria-live="polite" hidden><span class="loop-loader" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span><span id="activity-label">Working</span><span id="activity-time" aria-hidden="true"></span><button id="stop-btn" title="Stop agent" aria-label="Stop agent"><span class="stop-square"></span>Stop</button></div>
+      <div id="questions" aria-live="polite"></div>
+      <div id="permissions" aria-live="polite"></div>
+    </main>
+    <footer id="composer">
+      <div class="composer-box"><label class="sr-only" for="input">Message opencode</label><textarea id="input" rows="2" placeholder="Send message..." disabled></textarea><div class="composer-toolbar"><span class="composer-context"><button class="pill" id="cmd-btn" aria-label="Commands" title="Commands" disabled><svg><use href="#i-terminal"/></svg></button><span class="pills"><button class="pill" id="model-pill" aria-label="Switch model"><span id="model-pill-label">Model</span><svg class="pill-arrow"><use href="#i-chevron"/></svg></button><button class="pill" id="variant-pill" aria-label="Switch variant" hidden><span id="variant-pill-label">Variant</span><svg class="pill-arrow"><use href="#i-chevron"/></svg></button><div class="pill context-pill" id="context-pill" hidden><svg class="ring" viewBox="0 0 20 20" aria-hidden="true"><circle class="ring-bg" cx="10" cy="10" r="8"/><circle class="ring-fg" id="context-ring" cx="10" cy="10" r="8"/></svg><span id="context-pill-label">—</span></div></span></span><button id="send-btn" aria-label="Send message" disabled><svg><use href="#i-arrow"/></svg></button></div></div>
+      <div class="composer-caption"><span class="sync-status"><span class="status-dot" id="sync-dot"></span><span id="sync-note">Connecting…</span></span><span class="keyboard-hint"><kbd>Enter</kbd> to send · <kbd>Shift Enter</kbd> for a new line</span></div>
+    </footer>
+  </div>
+  <div id="modal-root" hidden></div>
+  <div id="toast" role="status" hidden></div>
+  <script src="/app.js" defer></script>
+</body>
+</html>

package/src/plugin/web/pair.html ADDED Viewed

@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>ocduet — pair this phone</title>
+<style>
+  :root { --bg: #12140f; --panel: #1d221e; --border: #3e4940; --fg: #e8ece5; --muted: #8a948b; --accent: #7eab89; --err: #d98a8a; }
+  * { box-sizing: border-box; margin: 0; }
+  body { background: var(--bg); color: var(--fg); font: 16px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
+  .card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px 26px; }
+  h1 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
+  .sub { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
+  .words { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; }
+  .word { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font: 600 17px/1 ui-monospace, monospace; letter-spacing: .5px; }
+  .num { color: var(--muted); font-size: 10px; margin-right: 6px; font-weight: 400; }
+  button { width: 100%; background: var(--accent); color: #10130f; border: 0; border-radius: 12px; padding: 13px; font: 600 15px Inter, sans-serif; cursor: pointer; }
+  button:disabled { opacity: .5; }
+  .ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); margin-top: 10px; font-weight: 400; }
+  .err { color: var(--err); font-size: 13px; margin-top: 14px; min-height: 20px; }
+  a { color: var(--accent); }
+</style>
+</head>
+<body>
+<div class="card">
+  <div id="step-ask">
+    <h1>Pair this phone</h1>
+    <div class="sub">Run <b>ocduet token</b> on your desktop and compare these words with the ones it shows. If they differ, stop — something between this phone and your machine is impersonating the daemon.</div>
+    <div class="words" id="words"></div>
+    <button id="pair-btn" disabled>Words match — pair this phone</button>
+    <button id="retry-btn" class="ghost" hidden>They don't match — reload</button>
+    <div class="err" id="err"></div>
+  </div>
+</div>
+<script type="module">
+const $ = (id) => document.getElementById(id);
+const err = (m) => { $("err").textContent = m; $("pair-btn").disabled = !!m; };
+const b64 = (buf) => btoa(String.fromCharCode(...new Uint8Array(buf)));
+const unb64 = (s) => Uint8Array.from(atob(s), (c) => c.charCodeAt(0));
+const te = new TextEncoder();
+function token() {
+  const m = location.hash.match(/[#&]t=([^&]+)/);
+  if (m) { try { localStorage.setItem("ocduet-token", decodeURIComponent(m[1])); } catch {} }
+  return localStorage.getItem("ocduet-token");
+}
+function idb() {
+  return new Promise((resolve, reject) => {
+    const r = indexedDB.open("ocduet-keys", 1);
+    r.onupgradeneeded = () => r.result.createObjectStore("keys");
+    r.onsuccess = () => resolve(r.result);
+    r.onerror = () => reject(r.error);
+  });
+}
+async function idbSet(key, val) {
+  const db = await idb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction("keys", "readwrite");
+    tx.objectStore("keys").put(val, key);
+    tx.oncomplete = resolve;
+    tx.onerror = () => reject(tx.error);
+  });
+}
+async function idbGet(key) {
+  const db = await idb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction("keys", "readonly");
+    const rq = tx.objectStore("keys").get(key);
+    rq.onsuccess = () => resolve(rq.result || null);
+    rq.onerror = () => reject(rq.error);
+  });
+}
+const pairMsg = (phoneId, phonePubB64, tokenStr) => `ocduet-pair|${phoneId}|${phonePubB64}|${tokenStr}`;
+async function main() {
+  const t = token();
+  if (!t) { err("no pairing token — open the URL from `ocduet token` on your desktop"); return; }
+  if (await idbGet(location.origin)) {
+    // already paired; offer to redo (generates a new phone key)
+    const redo = document.createElement("button");
+    redo.className = "ghost";
+    redo.textContent = "This phone is already paired — re-pair";
+    redo.onclick = async () => { await idbSet(location.origin, undefined); location.reload(); };
+    $("err").textContent = "";
+    redo.disabled = false;
+    $("step-ask").appendChild(redo);
+  }
+  const info = await (await fetch("/pair/info", { cache: "no-store" })).json();
+  $("words").innerHTML = "";
+  info.words.forEach((w, i) => {
+    const el = document.createElement("span");
+    el.className = "word";
+    el.innerHTML = `<span class="num">${i + 1}</span>${w}`;
+    $("words").appendChild(el);
+  });
+  $("retry-btn").hidden = false;
+  $("pair-btn").disabled = false;
+  $("retry-btn").onclick = () => location.reload();
+  $("pair-btn").onclick = async () => {
+    err("");
+    $("pair-btn").disabled = true;
+    try {
+      if (!crypto?.subtle?.generateKey) throw new Error("this browser lacks WebCrypto");
+      const kp = await crypto.subtle.generateKey({ name: "Ed25519" }, false, ["sign", "verify"]);
+      const rawPub = new Uint8Array(await crypto.subtle.exportKey("raw", kp.publicKey));
+      const phonePubB64 = b64(rawPub);
+      const phoneId = crypto.randomUUID().slice(0, 8);
+      const sig = await crypto.subtle.sign({ name: "Ed25519" }, kp.privateKey, te.encode(pairMsg(phoneId, phonePubB64, t)));
+      const res = await fetch("/pair/register", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ phoneId, phonePub: phonePubB64, token: t, sig: b64(sig) }),
+      });
+      const out = await res.json().catch(() => ({}));
+      if (!res.ok || !out.ok) throw new Error(out.error || `pairing rejected (${res.status})`);
+      await idbSet(location.origin, { origin: location.origin, daemonPub: info.pub, phoneId, priv: kp.privateKey, phonePubB64 });
+      location.href = "/";
+    } catch (e) {
+      err(String(e?.message || e));
+      $("pair-btn").disabled = false;
+    }
+  };
+}
+main().catch((e) => err(String(e?.message || e)));
+</script>
+</body>
+</html>