framer-dalton 0.0.21 → 0.0.22

package/dist/start-relay-server.js

@@ -1,19 +1,19 @@
-import fs2 from 'fs';
+import fs4 from 'fs';
 import os from 'os';
 import path from 'path';
 import 'child_process';
 import { fileURLToPath } from 'url';
 import { createTRPCClient, httpLink } from '@trpc/client';
+import crypto, { randomUUID, timingSafeEqual } from 'crypto';
 import http from 'http';
 import { createHTTPHandler } from '@trpc/server/adapters/standalone';
 import { initTRPC, TRPCError } from '@trpc/server';
 import { z } from 'zod';
 import { connect } from 'framer-api';
-import crypto, { randomUUID } from 'crypto';
 import { createRequire } from 'module';
 import * as vm from 'vm';
 
-/* @framer/ai relay server v0.0.21 */
+/* @framer/ai relay server v0.0.22 */
 var __defProp = Object.defineProperty;
 var __knownSymbol = (name2, symbol) => (symbol = Symbol[name2]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name2);
 var __typeError = (msg) => {
@@ -90,17 +90,67 @@ var initialized = false;
 function ensureLogDir() {
   if (initialized) return;
   const dir = path.dirname(logPath);
-  fs2.mkdirSync(dir, { recursive: true });
+  fs4.mkdirSync(dir, { recursive: true });
   initialized = true;
 }
 __name(ensureLogDir, "ensureLogDir");
 function log(message) {
   ensureLogDir();
   const timestamp = (/* @__PURE__ */ new Date()).toISOString();
-  fs2.appendFileSync(logPath, `${timestamp} ${message}
+  fs4.appendFileSync(logPath, `${timestamp} ${message}
 `);
 }
 __name(log, "log");
+function getConfigDir() {
+  if (process.env.XDG_CONFIG_HOME) {
+    return path.join(process.env.XDG_CONFIG_HOME, "framer");
+  }
+  if (process.platform === "win32") {
+    return path.join(process.env.APPDATA || os.homedir(), "framer");
+  }
+  return path.join(os.homedir(), ".config", "framer");
+}
+__name(getConfigDir, "getConfigDir");
+function ensureConfigDir() {
+  const configDir = getConfigDir();
+  fs4.mkdirSync(configDir, { recursive: true, mode: 448 });
+}
+__name(ensureConfigDir, "ensureConfigDir");
+
+// src/config/relay-token.ts
+function getRelayTokenPath() {
+  return path.join(getConfigDir(), "relay-token");
+}
+__name(getRelayTokenPath, "getRelayTokenPath");
+function generateRelayToken() {
+  return crypto.randomBytes(32).toString("base64url");
+}
+__name(generateRelayToken, "generateRelayToken");
+function readRelayToken() {
+  try {
+    const token = fs4.readFileSync(getRelayTokenPath(), "utf-8").trim();
+    return token.length > 0 ? token : null;
+  } catch {
+    return null;
+  }
+}
+__name(readRelayToken, "readRelayToken");
+function writeRelayToken(token) {
+  ensureConfigDir();
+  fs4.writeFileSync(getRelayTokenPath(), token, { mode: 384 });
+}
+__name(writeRelayToken, "writeRelayToken");
+function clearRelayToken(expectedToken) {
+  const filePath = getRelayTokenPath();
+  if (expectedToken) {
+    const currentToken = readRelayToken();
+    if (currentToken !== expectedToken) {
+      return;
+    }
+  }
+  fs4.rmSync(filePath, { force: true });
+}
+__name(clearRelayToken, "clearRelayToken");
 function debug(tag, message) {
   return;
 }
@@ -109,7 +159,7 @@ __name(debug, "debug");
 // src/version.ts
 var VERSION = (
   // typeof is used to ensure this can be used just via tsx or node etc. without build
-  "0.0.21" 
+  "0.0.22" 
 );
 
 // src/relay-client.ts
@@ -119,7 +169,14 @@ var RELAY_PORT = Number(process.env.FRAMER_CLI_PORT) || 19988;
 createTRPCClient({
   links: [
     httpLink({
-      url: `http://127.0.0.1:${RELAY_PORT}`
+      url: `http://127.0.0.1:${RELAY_PORT}`,
+      headers() {
+        const token = readRelayToken();
+        if (!token) {
+          return {};
+        }
+        return { Authorization: `Bearer ${token}` };
+      }
     })
   ]
 });
@@ -186,11 +243,11 @@ var ScopedFS = class {
   // Sync methods
   readFileSync = /* @__PURE__ */ __name((filePath, options) => {
     const resolved = this.resolvePath(filePath.toString());
-    return fs2.readFileSync(resolved, options);
+    return fs4.readFileSync(resolved, options);
   }, "readFileSync");
   writeFileSync = /* @__PURE__ */ __name((filePath, data, options) => {
     const resolved = this.resolvePath(filePath.toString());
-    fs2.writeFileSync(
+    fs4.writeFileSync(
       resolved,
       data,
       options
@@ -198,7 +255,7 @@ var ScopedFS = class {
   }, "writeFileSync");
   appendFileSync = /* @__PURE__ */ __name((filePath, data, options) => {
     const resolved = this.resolvePath(filePath.toString());
-    fs2.appendFileSync(
+    fs4.appendFileSync(
       resolved,
       data,
       options
@@ -206,76 +263,76 @@ var ScopedFS = class {
   }, "appendFileSync");
   readdirSync = /* @__PURE__ */ __name((dirPath, options) => {
     const resolved = this.resolvePath(dirPath.toString());
-    return fs2.readdirSync(resolved, options);
+    return fs4.readdirSync(resolved, options);
   }, "readdirSync");
   mkdirSync = /* @__PURE__ */ __name((dirPath, options) => {
     const resolved = this.resolvePath(dirPath.toString());
-    return fs2.mkdirSync(resolved, options);
+    return fs4.mkdirSync(resolved, options);
   }, "mkdirSync");
   rmdirSync = /* @__PURE__ */ __name((dirPath, options) => {
     const resolved = this.resolvePath(dirPath.toString());
-    fs2.rmdirSync(resolved, options);
+    fs4.rmdirSync(resolved, options);
   }, "rmdirSync");
   unlinkSync = /* @__PURE__ */ __name((filePath) => {
     const resolved = this.resolvePath(filePath.toString());
-    fs2.unlinkSync(resolved);
+    fs4.unlinkSync(resolved);
   }, "unlinkSync");
   statSync = /* @__PURE__ */ __name((filePath, options) => {
     const resolved = this.resolvePath(filePath.toString());
-    return fs2.statSync(resolved, options);
+    return fs4.statSync(resolved, options);
   }, "statSync");
   lstatSync = /* @__PURE__ */ __name((filePath, options) => {
     const resolved = this.resolvePath(filePath.toString());
-    return fs2.lstatSync(resolved, options);
+    return fs4.lstatSync(resolved, options);
   }, "lstatSync");
   existsSync = /* @__PURE__ */ __name((filePath) => {
     try {
       const resolved = this.resolvePath(filePath.toString());
-      return fs2.existsSync(resolved);
+      return fs4.existsSync(resolved);
     } catch {
       return false;
     }
   }, "existsSync");
   accessSync = /* @__PURE__ */ __name((filePath, mode) => {
     const resolved = this.resolvePath(filePath.toString());
-    fs2.accessSync(resolved, mode);
+    fs4.accessSync(resolved, mode);
   }, "accessSync");
   copyFileSync = /* @__PURE__ */ __name((src, dest, mode) => {
     const resolvedSrc = this.resolvePath(src.toString());
     const resolvedDest = this.resolvePath(dest.toString());
-    fs2.copyFileSync(resolvedSrc, resolvedDest, mode);
+    fs4.copyFileSync(resolvedSrc, resolvedDest, mode);
   }, "copyFileSync");
   renameSync = /* @__PURE__ */ __name((oldPath, newPath) => {
     const resolvedOld = this.resolvePath(oldPath.toString());
     const resolvedNew = this.resolvePath(newPath.toString());
-    fs2.renameSync(resolvedOld, resolvedNew);
+    fs4.renameSync(resolvedOld, resolvedNew);
   }, "renameSync");
   rmSync = /* @__PURE__ */ __name((filePath, options) => {
     const resolved = this.resolvePath(filePath.toString());
-    fs2.rmSync(resolved, options);
+    fs4.rmSync(resolved, options);
   }, "rmSync");
   // Stream methods
   createReadStream = /* @__PURE__ */ __name((filePath, options) => {
     const resolved = this.resolvePath(filePath.toString());
-    return fs2.createReadStream(resolved, options);
+    return fs4.createReadStream(resolved, options);
   }, "createReadStream");
   createWriteStream = /* @__PURE__ */ __name((filePath, options) => {
     const resolved = this.resolvePath(filePath.toString());
-    return fs2.createWriteStream(resolved, options);
+    return fs4.createWriteStream(resolved, options);
   }, "createWriteStream");
   // Promise-based API (fs.promises equivalent)
   get promises() {
     return {
       readFile: /* @__PURE__ */ __name(async (filePath, options) => {
         const resolved = this.resolvePath(filePath.toString());
-        return fs2.promises.readFile(
+        return fs4.promises.readFile(
           resolved,
           options
         );
       }, "readFile"),
       writeFile: /* @__PURE__ */ __name(async (filePath, data, options) => {
         const resolved = this.resolvePath(filePath.toString());
-        return fs2.promises.writeFile(
+        return fs4.promises.writeFile(
           resolved,
           data,
           options
@@ -283,7 +340,7 @@ var ScopedFS = class {
       }, "writeFile"),
       appendFile: /* @__PURE__ */ __name(async (filePath, data, options) => {
         const resolved = this.resolvePath(filePath.toString());
-        return fs2.promises.appendFile(
+        return fs4.promises.appendFile(
           resolved,
           data,
           options
@@ -291,48 +348,48 @@ var ScopedFS = class {
       }, "appendFile"),
       readdir: /* @__PURE__ */ __name(async (dirPath, options) => {
         const resolved = this.resolvePath(dirPath.toString());
-        return fs2.promises.readdir(
+        return fs4.promises.readdir(
           resolved,
           options
         );
       }, "readdir"),
       mkdir: /* @__PURE__ */ __name(async (dirPath, options) => {
         const resolved = this.resolvePath(dirPath.toString());
-        return fs2.promises.mkdir(resolved, options);
+        return fs4.promises.mkdir(resolved, options);
       }, "mkdir"),
       rmdir: /* @__PURE__ */ __name(async (dirPath, options) => {
         const resolved = this.resolvePath(dirPath.toString());
-        return fs2.promises.rmdir(resolved, options);
+        return fs4.promises.rmdir(resolved, options);
       }, "rmdir"),
       unlink: /* @__PURE__ */ __name(async (filePath) => {
         const resolved = this.resolvePath(filePath.toString());
-        return fs2.promises.unlink(resolved);
+        return fs4.promises.unlink(resolved);
       }, "unlink"),
       stat: /* @__PURE__ */ __name(async (filePath, options) => {
         const resolved = this.resolvePath(filePath.toString());
-        return fs2.promises.stat(resolved, options);
+        return fs4.promises.stat(resolved, options);
       }, "stat"),
       access: /* @__PURE__ */ __name(async (filePath, mode) => {
         const resolved = this.resolvePath(filePath.toString());
-        return fs2.promises.access(resolved, mode);
+        return fs4.promises.access(resolved, mode);
       }, "access"),
       copyFile: /* @__PURE__ */ __name(async (src, dest, mode) => {
         const resolvedSrc = this.resolvePath(src.toString());
         const resolvedDest = this.resolvePath(dest.toString());
-        return fs2.promises.copyFile(resolvedSrc, resolvedDest, mode);
+        return fs4.promises.copyFile(resolvedSrc, resolvedDest, mode);
       }, "copyFile"),
       rename: /* @__PURE__ */ __name(async (oldPath, newPath) => {
         const resolvedOld = this.resolvePath(oldPath.toString());
         const resolvedNew = this.resolvePath(newPath.toString());
-        return fs2.promises.rename(resolvedOld, resolvedNew);
+        return fs4.promises.rename(resolvedOld, resolvedNew);
       }, "rename"),
       rm: /* @__PURE__ */ __name(async (filePath, options) => {
         const resolved = this.resolvePath(filePath.toString());
-        return fs2.promises.rm(resolved, options);
+        return fs4.promises.rm(resolved, options);
       }, "rm")
     };
   }
-  constants = fs2.constants;
+  constants = fs4.constants;
 };
 
 // src/execute.ts
@@ -438,7 +495,7 @@ async function execute(session, code, options = {}) {
     URLSearchParams,
     TextEncoder,
     TextDecoder,
-    crypto,
+    crypto: crypto,
     AbortController,
     AbortSignal,
     structuredClone
@@ -540,21 +597,6 @@ function formatValue(value) {
   }
 }
 __name(formatValue, "formatValue");
-function getConfigDir() {
-  if (process.env.XDG_CONFIG_HOME) {
-    return path.join(process.env.XDG_CONFIG_HOME, "framer");
-  }
-  if (process.platform === "win32") {
-    return path.join(process.env.APPDATA || os.homedir(), "framer");
-  }
-  return path.join(os.homedir(), ".config", "framer");
-}
-__name(getConfigDir, "getConfigDir");
-function ensureConfigDir() {
-  const configDir = getConfigDir();
-  fs2.mkdirSync(configDir, { recursive: true, mode: 448 });
-}
-__name(ensureConfigDir, "ensureConfigDir");
 var DEFAULT_FS_POLL_INTERVAL_MS = 1e3;
 var fsPollIntervalMs = DEFAULT_FS_POLL_INTERVAL_MS;
 var SettingsWatcher = class {
@@ -566,7 +608,7 @@ var SettingsWatcher = class {
     __name(this, "SettingsWatcher");
   }
   start(callback) {
-    fs2.watchFile(
+    fs4.watchFile(
       this.settingsPath,
       { persistent: false, interval: fsPollIntervalMs },
       (curr, prev) => {
@@ -583,7 +625,7 @@ var SettingsWatcher = class {
     return this;
   }
   stop() {
-    fs2.unwatchFile(this.settingsPath);
+    fs4.unwatchFile(this.settingsPath);
     return this;
   }
 };
@@ -620,7 +662,7 @@ __name(getSettings, "getSettings");
 function readSettingsFile() {
   const settingsPath = getSettingsPath();
   try {
-    const raw = JSON.parse(fs2.readFileSync(settingsPath, "utf-8"));
+    const raw = JSON.parse(fs4.readFileSync(settingsPath, "utf-8"));
     const result = SettingsFileSchema.parse(raw);
     return {
       machineId: result.machineId ?? DEFAULT_SETTINGS.machineId,
@@ -639,7 +681,7 @@ function setSettings(newSettings) {
 __name(setSettings, "setSettings");
 function writeSettingsFile(settings2) {
   ensureConfigDir();
-  fs2.writeFileSync(getSettingsPath(), JSON.stringify(settings2, null, "	"), {
+  fs4.writeFileSync(getSettingsPath(), JSON.stringify(settings2, null, "	"), {
     mode: 384
   });
 }
@@ -1205,12 +1247,74 @@ var appRouter = t.router({
 var IDLE_TIMEOUT_MS = 24 * 60 * 60 * 1e3;
 var IDLE_CHECK_INTERVAL_MS = 60 * 1e3;
 var trpcHandler = createHTTPHandler({ router: appRouter });
+function getHostHeader(req) {
+  const host = req.headers.host;
+  if (typeof host === "string") {
+    return host;
+  }
+  return null;
+}
+__name(getHostHeader, "getHostHeader");
+function isAllowedHost(hostHeader, listeningPort) {
+  if (!hostHeader || listeningPort === null) {
+    return false;
+  }
+  const normalizedHost = hostHeader.trim().toLowerCase();
+  return normalizedHost === `127.0.0.1:${listeningPort}`;
+}
+__name(isAllowedHost, "isAllowedHost");
+function getAuthorizationHeader(req) {
+  const header = req.headers.authorization;
+  if (typeof header === "string") {
+    return header;
+  }
+  return null;
+}
+__name(getAuthorizationHeader, "getAuthorizationHeader");
+function isAuthorized(authorizationHeader, expectedToken) {
+  if (!authorizationHeader) {
+    return false;
+  }
+  const match = /^Bearer\s+(.+)$/i.exec(authorizationHeader.trim());
+  if (!match) {
+    return false;
+  }
+  const providedToken = match[1] ?? "";
+  const expectedBuffer = Buffer.from(expectedToken);
+  const providedBuffer = Buffer.from(providedToken);
+  if (expectedBuffer.length !== providedBuffer.length) {
+    return false;
+  }
+  return timingSafeEqual(expectedBuffer, providedBuffer);
+}
+__name(isAuthorized, "isAuthorized");
+function getListeningPort(server) {
+  const address = server.address();
+  if (!address || typeof address === "string") {
+    return null;
+  }
+  return address.port;
+}
+__name(getListeningPort, "getListeningPort");
 async function startRelayServer(port = RELAY_PORT) {
   let lastActivityAt = Date.now();
+  const relayToken = generateRelayToken();
   const server = http.createServer((req, res) => {
+    const listeningPort = getListeningPort(server);
+    if (!isAllowedHost(getHostHeader(req), listeningPort)) {
+      res.writeHead(403).end("Forbidden");
+      return;
+    }
+    if (!isAuthorized(getAuthorizationHeader(req), relayToken)) {
+      res.writeHead(401).end("Unauthorized");
+      return;
+    }
     lastActivityAt = Date.now();
     trpcHandler(req, res);
   });
+  server.on("close", () => {
+    clearRelayToken(relayToken);
+  });
   const idleCheck = setInterval(() => {
     const idleMs = Date.now() - lastActivityAt;
     if (idleMs >= IDLE_TIMEOUT_MS) {
@@ -1225,9 +1329,14 @@ async function startRelayServer(port = RELAY_PORT) {
   }, IDLE_CHECK_INTERVAL_MS);
   idleCheck.unref();
   return new Promise((resolve, reject) => {
-    server.on("error", reject);
+    server.on("error", (error) => {
+      clearRelayToken(relayToken);
+      reject(error);
+    });
     server.listen(port, "127.0.0.1", () => {
-      log(`started v${VERSION} on port ${port}`);
+      writeRelayToken(relayToken);
+      const listeningPort = getListeningPort(server) ?? port;
+      log(`started v${VERSION} on port ${listeningPort}`);
       resolve(server);
     });
   });

package/docs/skills/framer-canvas-editing-project.md

@@ -1,6 +1,6 @@
 ---
 name: {{SKILL_NAME}}
-description: "Project-scoped Framer canvas editing skill for project {{PROJECT_ID}}. Very important: never load this skill without having already read the `framer` skill and without having already run `session new`, which will dynamically update this skill."
+description: "Project-scoped Framer skill for project {{PROJECT_ID}}. Covers canvas editing, project reads, change review, publishing, image sourcing, and component operations. Very important: never load this skill without having already read the `framer` skill and without having already run `session new`, which will dynamically update this skill."
 allowed-tools: ["Bash(npx framer-dalton:*)", "Bash(npx framer-dalton@latest:*)", "Read({{FRAMER_TEMPORARY_DIR}}/*)", "Write({{FRAMER_TEMPORARY_DIR}}/*)"]
 ---
 
@@ -13,14 +13,10 @@ allowed-tools: ["Bash(npx framer-dalton:*)", "Bash(npx framer-dalton@latest:*)",
 
 - For design/layout work, do not use low-level node APIs (`createNode`, `setAttributes`, `setRect`, etc.). Use the canvas editing flow (`read-project` + `apply-changes`) with the embedded prompt and project context in this skill.
 - During normal task execution, do not call `framer.getAgentSystemPrompt()` or `framer.getAgentContext()`. This skill already includes `getAgentContext({ pagePath: "/" })`.
-- `npx framer-dalton read-project -s <sessionId> -q <queries> -p <pagePath>` reads project state. Start with page structure only, then request additional targeted queries only if needed. Query types are documented in the embedded prompt below. Never guess names for examples, icon sets, or fonts; look them up first.
-- `npx framer-dalton apply-changes -s <sessionId> -p <pagePath> -e <dsl>` applies canvas DSL changes. After applying changes, re-read project state to inspect results and iterate with `read-project` + `apply-changes` until accurate.
-- Request examples only when needed, and only after inspecting page structure first. Keep example queries targeted and minimal.
-- Use screenshots only when visual verification is necessary and cannot be confirmed from state reads. Do not use them for initial inspection or between every small change.
-- When setting text content, use raw Unicode characters directly (for example `->`, not `\u2192`).
-- Regenerate the embedded prompt and context by running `session new` again for the same project.
-- In rich text, block-level properties (for example line height or alignment) belong on block or parent targets, not `TextRun` targets.
-- `IconNode` `$control__icon` is immutable after creation. To change it, delete and recreate the node with the desired icon value.
+- `read-project` and `apply-changes` are one-liner CLI shortcuts for the high-frequency canvas-editing methods. Use them to read state and apply DSL inline without writing a file first:
+    - `npx framer-dalton read-project -s <sessionId> -q <queries> -p <pagePath>` — equivalent to `framer.readProjectForAgent(queries, { pagePath })`. Query types are documented in the embedded prompt below.
+    - `npx framer-dalton apply-changes -s <sessionId> -p <pagePath> -e <dsl>` — equivalent to `framer.applyAgentChanges(dsl, { pagePath })`.
+- The embedded prompt below also references other agent-surface methods (`reviewChangesForAgent`, `publishForAgent`, `queryImagesForAgent`, `flattenComponentInstanceForAgent`, `makeExternalComponentLocalForAgent`, and `getNodeForAgent` / `getNodesForAgent` / `getNodesOfTypesForAgent` / `getScopeNodeForAgent` / `getGroundNodeForAgent` / `getParentNodeForAgent` / `getAncestorsForAgent`). These have no dedicated shortcut; invoke via `npx framer-dalton exec -s <sessionId> -e 'console.log(await framer.<method>(<args>))'`.
 
 ## Workflow Loop
 
@@ -42,11 +38,7 @@ This ensures progress is streamed to the user in small, visible increments.
 
 ## Live Agent System Prompt
 
-This is the static canvas-editing prompt returned by `framer.getAgentSystemPrompt()`. It is the sole documentation for:
-
-- command syntax for `apply-changes`
-- query types and parameters for `read-project`
-- design rules and examples used by the canvas editing flow
+This is the static prompt returned by `framer.getAgentSystemPrompt()`. 
 
 {{CANVAS_PROMPT}}