wp-studio 1.8.0 → 1.8.1

package/dist/cli/php-server-child.mjs

@@ -0,0 +1,383 @@
+import { spawn } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { c as getPhpBinaryPath, f as decodePassword } from "./passwords-CHfZ7oMW.mjs";
+import { v as validateNativePhpVersion } from "./php-binary-metadata-B51UcEYo.mjs";
+import { z } from "zod";
+import { m as managerMessageSchema } from "./wordpress-server-ipc-LCHRL4uO.mjs";
+const ROUTER_PATH = path.resolve(import.meta.dirname, "php", "router.php");
+const SET_DEFAULT_PERMALINKS_PATH = path.resolve(
+  import.meta.dirname,
+  "php",
+  "set-default-permalinks.php"
+);
+const WP_CONFIG_TRANSFORMER_PATH = path.resolve(
+  import.meta.dirname,
+  "php",
+  "wp-config-transformer.php"
+);
+const DEFAULT_WP_CONFIG_CONSTANTS = { DB_NAME: "wordpress" };
+let phpProcess = null;
+let startupAbortController = null;
+let startingPromise = null;
+function logToConsole(...args) {
+  console.log(`[PHP Server]`, ...args);
+}
+function errorToConsole(...args) {
+  console.error(`[PHP Server]`, ...args);
+}
+function spawnPhpProcess(args, { phpVersion, cwd, signal, mode = "pipe" }) {
+  const phpScriptProcess = spawn(getPhpBinaryPath(phpVersion), args, {
+    cwd,
+    stdio: ["ignore", "pipe", "pipe"],
+    signal
+  });
+  if (mode === "pipe") {
+    phpScriptProcess.stdout?.pipe(process.stdout);
+  }
+  if (mode === "pipe" || mode === "capture-stdout") {
+    phpScriptProcess.stderr?.pipe(process.stderr);
+  }
+  return phpScriptProcess;
+}
+async function runPhpCommand(args, { phpVersion, cwd, signal, mode = "pipe" }) {
+  return await new Promise((resolve, reject) => {
+    const phpScriptProcess = spawnPhpProcess(args, {
+      phpVersion,
+      cwd,
+      signal,
+      mode
+    });
+    let stdout = "";
+    if (mode === "capture-stdout") {
+      phpScriptProcess.stdout?.on("data", (chunk) => {
+        stdout += chunk.toString();
+      });
+    }
+    phpScriptProcess.once("error", (error) => {
+      reject(error);
+    });
+    phpScriptProcess.once("exit", (code) => {
+      if (code === 0) {
+        resolve({ stdout });
+        return;
+      }
+      reject(new Error(`PHP command failed (code: ${code})`));
+    });
+  });
+}
+async function ensureWpConfig(siteFolder, phpVersion, signal) {
+  const wpConfigPath = path.join(siteFolder, "wp-config.php");
+  const wpConfigSamplePath = path.join(siteFolder, "wp-config-sample.php");
+  const ensureWpConfigScript = `
+$transformer_path = $argv[1] ?? '';
+$wp_config_path = $argv[2] ?? '';
+$constants = json_decode( $argv[3] ?? '', true );
+
+require_once $transformer_path;
+
+$transformer = WP_Config_Transformer::from_file( $wp_config_path );
+$transformer->define_constants( $constants );
+$transformer->to_file( $wp_config_path );
+`;
+  if (!fs.existsSync(wpConfigPath) && fs.existsSync(wpConfigSamplePath)) {
+    await fs.promises.copyFile(wpConfigSamplePath, wpConfigPath);
+  }
+  try {
+    await runPhpCommand(
+      [
+        "-r",
+        ensureWpConfigScript,
+        WP_CONFIG_TRANSFORMER_PATH,
+        wpConfigPath,
+        JSON.stringify(DEFAULT_WP_CONFIG_CONSTANTS)
+      ],
+      { phpVersion, signal }
+    );
+  } catch (error) {
+    throw new Error(
+      `Failed to ensure wp-config.php constants: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}
+async function isWordPressInstalled(siteFolder, phpVersion, signal) {
+  const installationCheckScript = `
+error_reporting( E_ERROR );
+ini_set( 'display_errors', '0' );
+
+$wp_load = getcwd() . '/wp-load.php';
+if ( ! file_exists( $wp_load ) ) {
+	echo '0';
+	exit( 0 );
+}
+require_once $wp_load;
+echo is_blog_installed() ? '1' : '0';
+`;
+  let stdout = "";
+  try {
+    const result = await runPhpCommand(["-r", installationCheckScript], {
+      phpVersion,
+      cwd: siteFolder,
+      signal,
+      mode: "capture-stdout"
+    });
+    stdout = result.stdout;
+  } catch (error) {
+    throw new Error(
+      `Failed to check WordPress installation status: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+  const status = stdout.trim();
+  return status === "1";
+}
+async function waitForServerReady(url, signal) {
+  const pollIntervalMs = 50;
+  const timeoutMs = 3e4;
+  const deadline = Date.now() + timeoutMs;
+  while (true) {
+    signal.throwIfAborted();
+    try {
+      await fetch(url, { signal });
+      return;
+    } catch {
+      signal.throwIfAborted();
+      if (Date.now() > deadline) {
+        throw new Error(`PHP server did not start within ${timeoutMs}ms`);
+      }
+      await new Promise((resolve) => setTimeout(resolve, pollIntervalMs));
+    }
+  }
+}
+async function installWordPress(config, phpVersion, signal) {
+  const alreadyInstalled = await isWordPressInstalled(config.sitePath, phpVersion, signal);
+  if (alreadyInstalled) {
+    logToConsole(`WordPress already installed for site ${config.siteId}; skipping installer`);
+    return;
+  }
+  const siteLanguage = config.siteLanguage ?? "en";
+  const siteTitle = config.siteTitle ?? "My WordPress Website";
+  const username = config.adminUsername ?? "admin";
+  const password = config.adminPassword ? decodePassword(config.adminPassword) : "password";
+  const email = config.adminEmail ?? "admin@localhost.com";
+  const installResponse = await fetch(
+    `http://localhost:${config.port}/wp-admin/install.php?step=2`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded"
+      },
+      body: new URLSearchParams({
+        language: siteLanguage,
+        prefix: "wp_",
+        weblog_title: siteTitle,
+        user_name: username,
+        admin_password: password,
+        // The installation wizard demands typing the same password twice
+        admin_password2: password,
+        Submit: "Install WordPress",
+        pw_weak: "1",
+        admin_email: email
+      }),
+      signal
+    }
+  );
+  if (!installResponse.ok) {
+    throw new Error(
+      `Failed to install WordPress (HTTP ${installResponse.status} ${installResponse.statusText})`
+    );
+  }
+  try {
+    await runPhpCommand([SET_DEFAULT_PERMALINKS_PATH], {
+      phpVersion,
+      cwd: config.sitePath,
+      signal
+    });
+  } catch (error) {
+    throw new Error(
+      `Failed to set default permalinks: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}
+async function startServer(config, signal) {
+  if (phpProcess) {
+    logToConsole(`Server already running for site ${config.siteId}`);
+    return;
+  }
+  const phpVersion = validateNativePhpVersion(config.phpVersion ?? "");
+  startupAbortController = new AbortController();
+  const stopSignal = AbortSignal.any([signal, startupAbortController.signal]);
+  let spawnedChild = null;
+  try {
+    stopSignal.throwIfAborted();
+    await ensureWpConfig(config.sitePath, phpVersion, stopSignal);
+    stopSignal.throwIfAborted();
+    const phpAddress = `localhost:${config.port}`;
+    logToConsole(`Spawning PHP built-in server on ${phpAddress} for site ${config.siteId}`);
+    const serverChild = spawnPhpProcess(["-S", phpAddress, ROUTER_PATH], {
+      phpVersion,
+      cwd: config.sitePath
+    });
+    spawnedChild = serverChild;
+    await new Promise((resolve, reject) => {
+      serverChild.once("spawn", () => {
+        resolve();
+      });
+      serverChild.once("error", (error) => {
+        reject(error);
+      });
+      stopSignal.addEventListener("abort", () => {
+        reject(new DOMException("Aborted", "AbortError"));
+      });
+    });
+    stopSignal.throwIfAborted();
+    await waitForServerReady(`http://localhost:${config.port}/`, stopSignal);
+    await installWordPress(config, phpVersion, stopSignal);
+    serverChild.once("exit", (code, signalName) => {
+      errorToConsole(
+        `PHP child process exited unexpectedly (code: ${code}, signal: ${signalName})`
+      );
+      process.exit(code ?? 1);
+    });
+    phpProcess = serverChild;
+  } catch (error) {
+    if (spawnedChild && !spawnedChild.killed) {
+      spawnedChild.kill("SIGKILL");
+    }
+    if (stopSignal.aborted) {
+      logToConsole(`Aborted start server operation:`, error);
+    } else {
+      errorToConsole(`Failed to start server:`, error);
+    }
+    throw error;
+  } finally {
+    startupAbortController = null;
+  }
+}
+const STOP_SERVER_TIMEOUT = 5e3;
+async function stopServer() {
+  if (startupAbortController) {
+    logToConsole("Startup operation in progress. Aborting it to stop the server…");
+    startupAbortController.abort();
+    return "ABORTED_STARTUP";
+  }
+  if (!phpProcess) {
+    logToConsole("No server running, nothing to stop");
+    return "OK";
+  }
+  if (phpProcess.exitCode !== null || phpProcess.signalCode !== null) {
+    logToConsole("Server already stopped");
+    return "OK";
+  }
+  const child = phpProcess;
+  phpProcess = null;
+  child.removeAllListeners("exit");
+  await new Promise((resolve) => {
+    const forceKillTimeout = setTimeout(() => {
+      errorToConsole("PHP child did not exit in time; sending SIGKILL");
+      if (!child.killed) {
+        child.kill("SIGKILL");
+      }
+    }, STOP_SERVER_TIMEOUT);
+    child.once("exit", () => {
+      clearTimeout(forceKillTimeout);
+      resolve();
+    });
+    child.kill("SIGTERM");
+  });
+  logToConsole("Server stopped gracefully");
+  return "OK";
+}
+function sendErrorMessage(messageId, error) {
+  return new Promise((resolve) => {
+    const errorResponse = {
+      originalMessageId: messageId,
+      topic: "error",
+      errorMessage: error instanceof Error ? error.message : String(error),
+      errorStack: error instanceof Error ? error.stack : void 0
+    };
+    process.send(errorResponse, () => {
+      resolve();
+    });
+  });
+}
+const abortControllers = {};
+async function ipcMessageHandler(packet) {
+  const messageResult = managerMessageSchema.safeParse(packet);
+  if (!messageResult.success) {
+    errorToConsole("Invalid message received:", messageResult.error);
+    const minimalMessageSchema = z.object({ id: z.string() });
+    const minimalMessage = minimalMessageSchema.safeParse(packet);
+    if (minimalMessage.success) {
+      await sendErrorMessage(minimalMessage.data.id, messageResult.error);
+    }
+    return;
+  }
+  const validMessage = messageResult.data;
+  if (validMessage.topic !== "abort") {
+    abortControllers[validMessage.messageId] = new AbortController();
+  }
+  const abortController = abortControllers[validMessage.messageId];
+  logToConsole(`Received ${validMessage.topic} message`);
+  try {
+    let result;
+    switch (validMessage.topic) {
+      case "abort":
+        abortController?.abort();
+        return;
+      case "start-server":
+        if (!startingPromise) {
+          startingPromise = startServer(validMessage.data.config, abortController.signal).finally(
+            () => {
+              startingPromise = null;
+            }
+          );
+        }
+        result = await startingPromise;
+        break;
+      case "stop-server":
+        result = await stopServer();
+        break;
+      case "run-blueprint":
+      case "wp-cli-command":
+        throw new Error(
+          `Message "${validMessage.topic}" is not supported by the native PHP runtime`
+        );
+      default:
+        throw new Error(`Unknown message.`);
+    }
+    const response = {
+      originalMessageId: validMessage.messageId,
+      topic: "result",
+      result
+    };
+    process.send(response);
+    if (validMessage.topic === "stop-server" && result === "OK") {
+      process.disconnect();
+    }
+  } catch (error) {
+    errorToConsole(`Error handling message ${validMessage.topic}:`, error);
+    await sendErrorMessage(validMessage.messageId, error);
+    errorToConsole("Killing process because of", error);
+    process.exit(1);
+  } finally {
+    delete abortControllers[validMessage.messageId];
+  }
+}
+function killPhpProcess() {
+  if (phpProcess && !phpProcess.killed) {
+    try {
+      phpProcess.kill("SIGKILL");
+    } catch {
+    }
+  }
+}
+process.on("exit", killPhpProcess);
+process.on("disconnect", () => {
+  killPhpProcess();
+});
+if (process.send) {
+  process.on("message", ipcMessageHandler);
+  process.send({ topic: "ready" });
+} else {
+  throw new Error("process.send is not available");
+}

package/dist/cli/php-versions-C4NIFv0m.mjs

@@ -0,0 +1,14 @@
+const SupportedPHPVersions = ["8.5", "8.4", "8.3", "8.2", "8.1", "8.0", "7.4"];
+const LatestSupportedPHPVersion = "8.5";
+const SupportedPHPVersionsList = [...SupportedPHPVersions];
+function isSupportedPHPVersion(version) {
+  return SupportedPHPVersions.includes(version);
+}
+const RecommendedPHPVersion = "8.4";
+export {
+  LatestSupportedPHPVersion as L,
+  RecommendedPHPVersion as R,
+  SupportedPHPVersionsList as S,
+  SupportedPHPVersions as a,
+  isSupportedPHPVersion as i
+};

package/dist/cli/{wordpress-server-child.mjs → playground-server-child.mjs}

@@ -1,6 +1,7 @@
-import { dirname } from "path";
-import { D as DEFAULT_PHP_VERSION } from "./well-known-paths-QcSJNi_l.mjs";
-import { c as cleanupLegacyMuPlugins, d as getMuPlugins, e as getWpCliPharPath, f as getSqliteCommandPath, l as isWordPressDevVersion, A as getPhpMyAdminPath, I as IS_JSPI_AVAILABLE, i as isWordPressDirectory, B as isSqliteIntegrationInstalled, C as rewriteWpCliPostContentToFile, q as decodePassword } from "./rewrite-wp-cli-post-content-Beo5_Ojo.mjs";
+import path__default, { dirname } from "path";
+import { D as DEFAULT_PHP_VERSION } from "./well-known-paths-kP8oHPED.mjs";
+import { c as cleanupLegacyMuPlugins, b as getMuPlugins, f as isWordPressDevVersion, I as IS_JSPI_AVAILABLE, i as isWordPressDirectory, o as isSqliteIntegrationInstalled, q as rewriteWpCliPostContentToFile } from "./rewrite-wp-cli-post-content-BAJ-W0ra.mjs";
+import { a as getWpCliPharPath, b as getSqliteCommandPath, l as getPhpMyAdminPath, f as decodePassword } from "./passwords-CHfZ7oMW.mjs";
 import { __ } from "@wordpress/i18n";
 import { s as sequential } from "./sequential-BQFuixXz.mjs";
 import { runCLI } from "@wp-playground/cli";
@@ -8,7 +9,7 @@ import { InMemoryFilesystem, OverlayFilesystem, FetchFilesystem, NodeJsFilesyste
 import fse__default from "fs-extra";
 import { z } from "zod";
 import { isStepDefinition } from "@wp-playground/blueprints";
-import { m as managerMessageSchema } from "./wordpress-server-ipc-D-8mLjOF.mjs";
+import { m as managerMessageSchema } from "./wordpress-server-ipc-LCHRL4uO.mjs";
 function formatPlaygroundCliMessage(message) {
   if (message.includes("WordPress is running")) {
     return __("WordPress is running");
@@ -158,10 +159,10 @@ process.stderr.write = function(...args) {
   return originalStderrWrite(...args);
 };
 function logToConsole(...args) {
-  originalConsoleLog(`[WordPress Server Child]`, ...args);
+  originalConsoleLog(`[Playground Server]`, ...args);
 }
 function errorToConsole(...args) {
-  originalConsoleError(`[WordPress Server Child]`, ...args);
+  originalConsoleError(`[Playground Server]`, ...args);
 }
 function escapePhpString(str) {
   return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
@@ -192,16 +193,49 @@ async function getWordPressInstallMode(sitePath) {
   return "do-not-attempt-installing";
 }
 async function getBaseRunCLIArgs(command, config) {
-  const wordpressInstallMode = await getWordPressInstallMode(config.sitePath);
+  if (!config.useExactMountLayout && config.blueprint?.uri) {
+    try {
+      const optionsPath = path__default.join(path__default.dirname(config.blueprint.uri), "start-options.json");
+      if (fse__default.existsSync(optionsPath)) {
+        const saved = JSON.parse(fse__default.readFileSync(optionsPath, "utf-8"));
+        if (saved.useExactMountLayout) {
+          config.mountsBeforeInstall = saved.mountsBeforeInstall;
+          config.mounts = saved.mounts;
+          config.wordpressInstallMode = saved.wordpressInstallMode ?? config.wordpressInstallMode;
+          config.useExactMountLayout = true;
+          logToConsole(`Loaded persisted start options from ${optionsPath} before startup`);
+        }
+      }
+    } catch {
+    }
+  }
+  const wordpressInstallMode = config.wordpressInstallMode ?? await getWordPressInstallMode(config.sitePath);
+  const useExactMountLayout = config.useExactMountLayout ?? false;
+  let mountsBeforeInstall = [...config.mountsBeforeInstall ?? []];
+  const mounts = [...config.mounts ?? []];
   await cleanupLegacyMuPlugins(config.sitePath);
   const [studioMuPluginsHostPath, loaderMuPluginHostPath] = await getMuPlugins({
     isWpAutoUpdating: config.isWpAutoUpdating
   });
-  const mounts = [
-    {
-      hostPath: config.sitePath,
-      vfsPath: "/wordpress"
-    },
+  if (!useExactMountLayout) {
+    mountsBeforeInstall = [
+      ...config.mountsBeforeInstall ?? [
+        {
+          hostPath: config.sitePath,
+          vfsPath: "/wordpress"
+        }
+      ],
+      {
+        hostPath: getWpCliPharPath(),
+        vfsPath: "/tmp/wp-cli.phar"
+      },
+      {
+        hostPath: getSqliteCommandPath(),
+        vfsPath: "/tmp/sqlite-command"
+      }
+    ];
+  }
+  mountsBeforeInstall.push(
     {
       hostPath: studioMuPluginsHostPath,
       vfsPath: "/internal/studio/mu-plugins"
@@ -209,16 +243,8 @@ async function getBaseRunCLIArgs(command, config) {
     {
       hostPath: loaderMuPluginHostPath,
       vfsPath: "/internal/shared/mu-plugins/99-studio-loader.php"
-    },
-    {
-      hostPath: getWpCliPharPath(),
-      vfsPath: "/tmp/wp-cli.phar"
-    },
-    {
-      hostPath: getSqliteCommandPath(),
-      vfsPath: "/tmp/sqlite-command"
     }
-  ];
+  );
   const enableDebugLog = config.enableDebugLog ?? false;
   const enableDebugDisplay = config.enableDebugDisplay ?? false;
   const defaultConstants = {
@@ -267,9 +293,10 @@ async function getBaseRunCLIArgs(command, config) {
     internalCookieStore: false,
     login: false,
     followSymlinks: true,
-    skipSqliteSetup: true,
+    skipSqliteSetup: config.skipSqliteSetup ?? !useExactMountLayout,
     port: config.port,
-    "mount-before-install": mounts,
+    "mount-before-install": mountsBeforeInstall,
+    ...mounts.length > 0 ? { mount: mounts } : {},
     "site-url": config.absoluteUrl || `http://localhost:${config.port}`,
     blueprint: blueprintBundle,
     wordpressInstallMode,
@@ -287,17 +314,19 @@ async function getBaseRunCLIArgs(command, config) {
     logToConsole("Enabling Xdebug support");
     args.xdebug = true;
   }
-  const phpMyAdminHostPath = getPhpMyAdminPath();
-  if (await fse__default.pathExists(phpMyAdminHostPath)) {
-    mounts.push({
-      hostPath: phpMyAdminHostPath,
-      vfsPath: "/tools/phpmyadmin"
-    });
-    logToConsole("Mounting bundled phpMyAdmin");
-  } else {
-    logToConsole("Bundled phpMyAdmin not found, falling back to Playground download");
+  if (!useExactMountLayout) {
+    const phpMyAdminHostPath = getPhpMyAdminPath();
+    if (await fse__default.pathExists(phpMyAdminHostPath)) {
+      mountsBeforeInstall.push({
+        hostPath: phpMyAdminHostPath,
+        vfsPath: "/tools/phpmyadmin"
+      });
+      logToConsole("Mounting bundled phpMyAdmin");
+    } else {
+      logToConsole("Bundled phpMyAdmin not found, falling back to Playground download");
+    }
+    args.phpmyadmin = true;
   }
-  args.phpmyadmin = true;
   lastCliArgs = sanitizeRunCLIArgs(args);
   return args;
 }

package/dist/cli/plugin/skills/annotate/SKILL.md

@@ -0,0 +1,110 @@
+---
+name: annotate
+description: Open a browser with visual annotation tools. The user clicks elements on their site and leaves feedback — the agent reads annotations and makes changes. Use this when the user wants to point at specific elements to fix, tweak, or redesign.
+user-invokable: true
+---
+
+# Visual Annotations
+
+Open a browser where the user can click elements on their WordPress site and annotate them with feedback. You read those annotations and make the requested changes.
+
+## On Startup
+
+When the user invokes this skill, introduce yourself:
+
+> **Visual Annotations** — I'll open your site in a browser with an annotation toolbar. Click any element, type your feedback, and I'll fix it.
+
+Then identify the target site. If there's an active site, use it. If there are multiple, ask which one.
+
+## Workflow
+
+### 1. Open the browser
+
+Call `site_info` to get the site URL — do NOT guess the URL or port.
+
+Use the `open_annotation_browser` tool with the site URL. This opens a headed browser with the Studio annotation inspector injected — a small dark pill in the bottom-right with **"Annotate"** and **"Done"** buttons.
+
+Tell the user:
+> The browser is open. Click **Annotate** in the bottom-right toolbar, click any element on the page, type your feedback, then click **Done** when you're finished.
+
+### 2. Wait for the user to submit
+
+Call `wait_for_annotations`. This blocks until the user clicks **Done** and returns the annotations they wrote, captured straight from the page.
+
+Each annotation includes:
+- **CSS selector / elementPath** — use to find the element in the theme or via WP-CLI
+- **Computed styles** — current CSS values (colors, sizes, spacing)
+- **nearbyText** — visible text content of the element
+- **User feedback (comment)** — what the user wants changed
+- **pathname** — which page of the site the annotation was made on
+
+### 3. Summarize and confirm — REQUIRED before making any changes
+
+Do **not** start editing yet. First, present a numbered summary of every request, then ask the user to confirm before you proceed.
+
+Format the summary like this — one entry per annotation, in the order received:
+
+```
+Here's what you asked me to change:
+
+  1. <one-line description in your own words> — <element + nearby text>
+     (your note: "<the user's comment, verbatim>")
+
+  2. …
+
+Want me to go ahead with these N change(s)?
+```
+
+Rules for the summary:
+- **Restate intent in your own words** so the user can spot misunderstandings (e.g. "Make the title smaller" rather than echoing the comment).
+- **Identify the element by what they can see**, not by selector — use the tag name plus `nearbyText`. Selectors are noisy and unreadable; keep them out of the summary.
+- **Always include the user's verbatim comment** in parentheses so they know nothing was lost in your paraphrase.
+- If anything is ambiguous, list the ambiguity as a question in the same numbered item rather than guessing.
+
+Then call `AskUserQuestion` with a single yes/no question ("Proceed with these changes?") offering options like "Yes, go ahead", "No, let me re-annotate", and "Skip some — I'll tell you which". Only continue past this step on an explicit confirmation.
+
+If the user wants to re-annotate, point them back to the open browser and call `wait_for_annotations` again — the inspector keeps working without re-opening the browser.
+
+### 4. Make changes
+
+For each confirmed annotation:
+1. **Identify what to change:**
+   - Use the CSS selector to find the element in theme templates or stylesheets
+   - Use `wp_cli` with `post list --post_type=wp_template --format=json` to check if it's in a template override
+   - Use `wp_cli` with `eval "echo wp_get_custom_css();"` to check existing custom CSS
+2. **Apply the change using the right approach:**
+   - For style changes (colors, sizes, spacing): use Global Styles custom CSS with the selector from the annotation
+   - For content changes (text, headings, block structure): edit the template or post content via WP-CLI
+   - For block-level changes: identify the WordPress block type from the HTML structure (look for `wp-block-*` classes) and modify accordingly
+3. Take a screenshot to verify the change looks correct
+
+### 5. Verify
+
+After all annotations are addressed, take a screenshot and confirm with the user.
+
+The browser window auto-closes about 10 seconds after the user clicks **Done**, so by the time you finish making changes it's already gone. If they want another round, run the skill again from the top — `/annotate` opens a fresh browser. Don't try to "reattach" to the previous window.
+
+## Making changes the WordPress way
+
+Always prefer WordPress APIs over direct file edits or custom plugins.
+
+### CSS / design changes
+
+Use **Global Styles custom CSS** — never create throwaway plugins:
+```
+wp eval 'echo wp_get_custom_css();'   → read current custom CSS
+wp eval 'wp_update_custom_css_post("CSS HERE");'   → update custom CSS
+```
+
+### Template changes
+
+Create **template overrides via the database**, not file edits:
+```
+wp post create --post_type=wp_template --post_name="theme-slug//template-name" --post_content="BLOCK MARKUP" --post_status=publish
+```
+
+### When to use what
+
+- **Tweaking an existing site**: Prefer Global Styles custom CSS and template overrides in the database — these are non-destructive and easy to revert
+- **Building a theme or new site**: Edit theme files directly — that's the job. Follow Studio's existing guidelines for block themes (theme.json, templates/, style.css)
+- **Never**: Modify WordPress core files

package/dist/cli/process-manager-daemon.mjs

@@ -3,7 +3,7 @@ import fs__default, { createWriteStream } from "fs";
 import path__default from "path";
 import readline from "readline";
 import semver from "semver";
-import { g as SocketServer, b as PROCESS_MANAGER_CONTROL_SOCKET_PATH, a as PROCESS_MANAGER_EVENTS_SOCKET_PATH, h as PROCESS_MANAGER_LOGS_DIR, i as daemonRequestSchema, f as daemonEventSchema } from "./process-manager-ipc-GCdebuBH.mjs";
+import { g as SocketServer, b as PROCESS_MANAGER_CONTROL_SOCKET_PATH, a as PROCESS_MANAGER_EVENTS_SOCKET_PATH, h as PROCESS_MANAGER_LOGS_DIR, i as daemonRequestSchema, f as daemonEventSchema } from "./process-manager-ipc-CBIoRMQx.mjs";
 const SOCKET_TIMEOUT_MS = 2500;
 const STOP_TIMEOUT_MS = 5e3;
 const STDERR_BUFFER_MAX_LINES = 100;

package/dist/cli/{process-manager-ipc-GCdebuBH.mjs → process-manager-ipc-CBIoRMQx.mjs}

@@ -3,8 +3,9 @@ import path__default from "path";
 import { EventEmitter } from "events";
 import fs__default from "fs";
 import net from "net";
-import { i as isErrnoException, m as managerMessageSchema, c as childMessageFromProcessManagerSchema } from "./wordpress-server-ipc-D-8mLjOF.mjs";
+import { i as isErrnoException } from "./is-errno-exception-t38xF2pB.mjs";
 import { z } from "zod";
+import { m as managerMessageSchema, c as childMessageFromProcessManagerSchema } from "./wordpress-server-ipc-LCHRL4uO.mjs";
 const STUDIO_CLI_HOME = path__default.join(os.homedir(), ".studio");
 const PROCESS_MANAGER_HOME = process.env.STUDIO_PROCESS_MANAGER_HOME ?? path__default.join(STUDIO_CLI_HOME, "daemon");
 const PROCESS_MANAGER_LOGS_DIR = path__default.join(PROCESS_MANAGER_HOME, "logs");