@openhands/extensions 0.29.0 → 0.31.0

package/apps/vscode/extension.js

@@ -5,14 +5,32 @@ function folderKey(host) {
   return `${FOLDER_KEY_PREFIX}:${host.backend.id}:${host.backend.orgId || "local"}:${host.extension.name}`;
 }
 
-function button(label, onClick) {
+function button(label, onClick, variant = "secondary") {
   const element = document.createElement("button");
   element.type = "button";
   element.textContent = label;
+  element.style.cssText = [
+    "min-height:40px",
+    "padding:0 18px",
+    "border-radius:8px",
+    "border:1px solid transparent",
+    "font:inherit",
+    "font-size:14px",
+    "font-weight:600",
+    "cursor:pointer",
+    "transition:opacity 120ms ease,background-color 120ms ease",
+    variant === "primary"
+      ? "background:#f3ce49;color:#171717"
+      : "background:#262626;color:#fafafa;border-color:#525252",
+  ].join(";");
   element.addEventListener("click", onClick);
   return element;
 }
 
+function statusLabel(state) {
+  return state.charAt(0).toUpperCase() + state.slice(1);
+}
+
 export function activate(host) {
   return host.registerPage("editor", async ({ container }) => {
     container.style.minHeight = "100vh";
@@ -54,26 +72,55 @@ export function activate(host) {
         return;
       }
 
+      shell.style.justifyContent = "center";
+      shell.style.alignItems = "center";
+      shell.style.padding = "32px";
+      shell.style.boxSizing = "border-box";
+
       const panel = document.createElement("section");
       panel.setAttribute("aria-live", "polite");
+      panel.style.cssText = "width:min(100%,520px);padding:32px;border:1px solid #262626;border-radius:12px;background:#0a0a0a;color:#fafafa;box-sizing:border-box;text-align:center";
       const heading = document.createElement("h2");
-      heading.textContent = "VS Code setup";
-      const detail = document.createElement("p");
-      detail.textContent = status.detail || `Backend status: ${status.state}.`;
-      panel.append(heading, detail);
+      heading.textContent = "Set up VS Code";
+      heading.style.cssText = "margin:0;font-size:24px;line-height:32px;font-weight:600";
+      const description = document.createElement("p");
+      description.textContent = "Start the secure VS Code backend for this Agent Canvas session. The first launch downloads and verifies the pinned editor package.";
+      description.style.cssText = "margin:12px auto 0;max-width:440px;color:#a3a3a3;font-size:14px;line-height:21px";
+      const statusRow = document.createElement("div");
+      statusRow.style.cssText = "display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 24px;font-size:13px;color:#a3a3a3";
+      const statusDot = document.createElement("span");
+      statusDot.setAttribute("aria-hidden", "true");
+      statusDot.style.cssText = `width:8px;height:8px;border-radius:999px;background:${status.state === "unhealthy" ? "#fda4af" : "#737373"}`;
+      const detail = document.createElement("span");
+      detail.textContent = status.detail || `Backend status: ${statusLabel(status.state)}`;
+      statusRow.append(statusDot, detail);
+      panel.append(heading, description, statusRow);
+
+      const field = document.createElement("label");
+      field.style.cssText = "display:flex;flex-direction:column;gap:8px;text-align:left";
+      const fieldLabel = document.createElement("span");
+      fieldLabel.textContent = "Workspace folder";
+      fieldLabel.style.cssText = "font-size:13px;font-weight:500;color:#fafafa";
       const folder = document.createElement("input");
       folder.type = "text";
-      folder.placeholder = "Workspace folder path (optional)";
+      folder.placeholder = "Optional path to open in VS Code";
       folder.value = localStorage.getItem(storageKey) || "";
       folder.setAttribute("aria-label", "Workspace folder path");
-      panel.append(folder);
-      const actions = document.createElement("p");
+      folder.style.cssText = "width:100%;height:42px;padding:0 12px;border:1px solid #525252;border-radius:8px;background:#1a1a1a;color:#fafafa;font:inherit;font-size:14px;box-sizing:border-box;outline:none";
+      const hint = document.createElement("span");
+      hint.textContent = "Leave blank to open the default App workspace.";
+      hint.style.cssText = "font-size:12px;color:#8c8c8c";
+      field.append(fieldLabel, folder, hint);
+      panel.append(field);
+
+      const actions = document.createElement("div");
+      actions.style.cssText = "display:flex;justify-content:center;gap:10px;margin-top:24px;flex-wrap:wrap";
       if (status.state === "missing" || status.state === "stopped" || status.state === "unhealthy") {
         actions.append(button("Prepare and start", async () => {
           const selectedFolder = folder.value.trim();
           if (selectedFolder) localStorage.setItem(storageKey, selectedFolder);
           else localStorage.removeItem(storageKey);
-          actions.replaceChildren(document.createTextNode("Preparing..."));
+          actions.replaceChildren(document.createTextNode("Preparing and verifying VS Code..."));
           try {
             let approval = status;
             if (!approval.revision) approval = await request("GET");
@@ -90,14 +137,15 @@ export function activate(host) {
             render(await request("GET"));
           } catch (error) {
             detail.textContent = `Setup failed: ${error.message}`;
-            actions.replaceChildren(button("Prepare and start", () => render(status)));
+            statusDot.style.background = "#fda4af";
+            actions.replaceChildren(button("Try again", () => render(status), "primary"));
           }
-        }));
+        }, "primary"));
       }
       if (status.state === "ready" || status.state === "starting") {
         actions.append(button("Stop", async () => render(await request("POST", `${BACKEND}/stop`))));
       }
-      actions.append(button("Refresh", async () => render(await request("GET"))));
+      actions.append(button("Refresh status", async () => render(await request("GET"))));
       panel.append(actions);
       shell.append(panel);
     };

package/apps/vscode/scripts/package.mjs

@@ -1,84 +1,30 @@
-import { createHash } from "node:crypto";
-import { readdir, readFile, mkdir, rm, writeFile, chmod, stat } from "node:fs/promises";
-import { execFile } from "node:child_process";
-import { promisify } from "node:util";
+import { cp, mkdir, readFile, rm } from "node:fs/promises";
 import path from "node:path";
 
-const exec = promisify(execFile);
 const appRoot = path.resolve(new URL("..", import.meta.url).pathname);
 const root = path.resolve(appRoot, "../..");
-if (process.platform !== "linux") throw new Error("VS Code App packaging currently supports Linux build runners only");
-
-/**
- * Force a umask-independent mode set on the staged tree.
- *
- * `cp -a` preserves whatever modes tar materialized, and the build host's umask
- * narrows them (0664/0775 under umask 0002, 0644/0755 under umask 022). Those
- * bits end up in the final archive's tar headers, so the digest — and with it
- * the `sha256` declared in canvas-extension.json — used to vary per build host.
- */
-async function normalizeModes(dir) {
-  for (const entry of await readdir(dir, { withFileTypes: true })) {
-    const target = path.join(dir, entry.name);
-    if (entry.isSymbolicLink()) continue;
-    if (entry.isDirectory()) {
-      await chmod(target, 0o755);
-      await normalizeModes(target);
-    } else if (entry.isFile()) {
-      const { mode } = await stat(target);
-      await chmod(target, mode & 0o111 ? 0o755 : 0o644);
-    }
-  }
-}
 const output = path.resolve(process.env.OUTPUT_DIR ?? path.join(root, "dist"));
-const version = "1.109.5";
-const releases = {
-  "linux-amd64": ["x64", "b433bf4f0227321a7014d8460d10a8f958adc0f45aa79bd889e84e65e8f88363"],
-  "linux-arm64": ["arm64", "36d9c14036489b63de84ebace837fcacf7e60e669a0dc715802c5443684ea4dc"],
-};
-const work = path.join(output, ".download");
 const packageRoot = path.join(output, "apps", "vscode");
-const manifest = JSON.parse(await readFile(path.join(appRoot, "canvas-extension.json"), "utf8"));
-await rm(work, { recursive: true, force: true });
-await rm(packageRoot, { recursive: true, force: true });
-await mkdir(work, { recursive: true });
-await mkdir(path.join(packageRoot, "backend"), { recursive: true });
-for (const [platform, [upstreamArch, expected]] of Object.entries(releases)) {
-  const source = path.join(work, `${platform}.tar.gz`);
-  const archive = `openvscode-server-v${version}-linux-${upstreamArch}.tar.gz`;
-  const url = `https://github.com/gitpod-io/openvscode-server/releases/download/openvscode-server-v${version}/${archive}`;
-  await exec("curl", ["--fail", "--location", "--retry", "3", "--output", source, url]);
-  const actual = createHash("sha256").update(await readFile(source)).digest("hex");
-  if (actual !== expected) throw new Error(`${platform}: upstream checksum mismatch (${actual})`);
-  const unpacked = path.join(work, `${platform}-unpacked`);
-  const normalized = path.join(work, `${platform}-normalized`);
-  await mkdir(unpacked, { recursive: true });
-  await exec("tar", ["-xzf", source, "-C", unpacked]);
-  await mkdir(normalized, { recursive: true });
-  const [top] = await readdir(unpacked);
-  await exec("cp", ["-a", `${path.join(unpacked, top)}/.`, normalized]);
-  await writeFile(path.join(normalized, "bin", "openvscode-bootstrap"), "#!/bin/sh\nset -eu\ndata_dir=\"\"\nfor candidate do data_dir=\"$candidate\"; done\nmkdir -p \"$data_dir\" \"$data_dir/home\" \"$data_dir/workspace\"\nexport HOME=\"$data_dir/home\"\nexec \"$(dirname \"$0\")/openvscode-server\" \"$@\"\n");
-  await exec("chmod", ["0755", path.join(normalized, "bin", "openvscode-bootstrap")]);
-  await normalizeModes(normalized);
-  const destination = path.join(packageRoot, "backend", `openvscode-${platform}.tar.gz`);
-  await exec("tar", ["--sort=name", "--mtime=UTC 1970-01-01", "--owner=0", "--group=0", "--numeric-owner", "-czf", destination, "-C", normalized, "."]);
-  const produced = createHash("sha256").update(await readFile(destination)).digest("hex");
-  const artifact = manifest?.backend?.artifacts?.[platform];
-  if (!artifact?.sha256) {
-    throw new Error(`canvas-extension.json declares no backend.artifacts.${platform}.sha256`);
+const manifest = JSON.parse(
+  await readFile(path.join(appRoot, "canvas-extension.json"), "utf8"),
+);
+
+for (const [platform, artifact] of Object.entries(manifest.backend.artifacts)) {
+  const url = new URL(artifact.url);
+  if (url.protocol !== "https:" || !url.pathname.endsWith(".tar.gz")) {
+    throw new Error(`${platform}: invalid HTTPS artifact URL`);
   }
-  if (path.basename(destination) !== path.basename(artifact.path)) {
-    throw new Error(`${platform}: built ${path.basename(destination)} but canvas-extension.json declares ${artifact.path}`);
+  if (!/^[0-9a-f]{64}$/.test(artifact.sha256)) {
+    throw new Error(`${platform}: invalid SHA-256`);
   }
-  if (produced !== artifact.sha256) {
-    throw new Error(
-      `${platform}: built archive digest ${produced} does not match the sha256 declared for backend.artifacts.${platform} in canvas-extension.json (${artifact.sha256}); update the manifest with the reproducible digest`
-    );
+  if (!Number.isInteger(artifact.strip_components) || artifact.strip_components < 0) {
+    throw new Error(`${platform}: invalid strip_components`);
   }
-  console.log(`${platform}: ${produced}`);
 }
-await exec("cp", [path.join(appRoot, "canvas-extension.json"), path.join(packageRoot, "canvas-extension.json")]);
-await exec("cp", [path.join(appRoot, "extension.js"), path.join(packageRoot, "extension.js")]);
-await exec("cp", [path.join(appRoot, "README.md"), path.join(packageRoot, "README.md")]);
-await rm(work, { recursive: true, force: true });
-console.log(`Wrote ${packageRoot}`);
+
+await rm(packageRoot, { recursive: true, force: true });
+await mkdir(packageRoot, { recursive: true });
+for (const filename of ["canvas-extension.json", "extension.js", "README.md"]) {
+  await cp(path.join(appRoot, filename), path.join(packageRoot, filename));
+}
+console.log(`Wrote source-installable App package to ${packageRoot}`);