@frontman-ai/astro 0.1.4 → 0.1.6

package/README.md

@@ -1,22 +1,17 @@
 # @frontman-ai/astro
 
-Astro framework integration for Frontman, exposing tools and services via HTTP middleware and dev toolbar.
+[![npm version](https://img.shields.io/npm/v/@frontman-ai/astro)](https://www.npmjs.com/package/@frontman-ai/astro)
+[![astro ^5.0.0](https://img.shields.io/badge/astro-%5E5.0.0-blueviolet)](https://astro.build)
 
-## Stack
+Astro integration for [Frontman](https://frontman.sh) — AI-powered development tools that let you edit your frontend from the browser.
 
-- [ReScript](https://rescript-lang.org) with ES6 modules
-- [Astro](https://astro.build) 5.0+
-- HTTP middleware integration
-- SSE (Server-Sent Events) for streaming responses
-
-## Features
+## Installation
 
-- HTTP middleware for handling tool requests
-- Dev toolbar integration for interactive debugging
-- Framework-specific tools (e.g., `GetPages`)
-- Streaming responses via SSE
+```bash
+npx astro add @frontman-ai/astro
+```
 
-## Installation
+Or manually:
 
 ```bash
 npm install @frontman-ai/astro
@@ -28,26 +23,72 @@ Add the integration to your `astro.config.mjs`:
 
 ```javascript
 import { defineConfig } from 'astro/config';
-import { frontmanIntegration } from '@frontman-ai/astro/integration';
+import frontman from '@frontman-ai/astro';
 
 export default defineConfig({
   integrations: [
-    frontmanIntegration(),
+    frontman({ projectRoot: import.meta.dirname }),
   ],
 });
 ```
 
-## Exports
+Then start your dev server and open `http://localhost:4321/frontman/`.
+
+## What it does
+
+The integration automatically (in dev mode only):
+
+- Registers a dev toolbar app for element selection
+- Captures Astro source annotations so the AI knows which `.astro` file and line each element comes from
+- Serves the Frontman UI at `/<basePath>/` (default: `/frontman/`)
+- Exposes tool endpoints for AI interactions (file edits, screenshots, etc.)
+
+> **Note:** Element source detection requires `devToolbar.enabled: true` (the default). Astro only emits `data-astro-source-file` / `data-astro-source-loc` annotations when the dev toolbar is enabled. If you've disabled it, Frontman will log a warning and fall back to CSS selector-based detection.
+
+## Configuration
+
+All options are optional with sensible defaults:
+
+| Option | Default | Description |
+|---|---|---|
+| `projectRoot` | `PROJECT_ROOT` env var, `PWD`, or `"."` | Path to the project root directory |
+| `sourceRoot` | Same as `projectRoot` | Root for source file resolution (useful in monorepos) |
+| `basePath` | `"frontman"` | URL prefix for Frontman routes |
+| `host` | `FRONTMAN_HOST` env var or `"api.frontman.sh"` | Frontman server host for client connections |
+| `serverName` | `"frontman-astro"` | Server name included in tool responses |
+| `serverVersion` | `"1.0.0"` | Server version included in tool responses |
+| `clientUrl` | Auto-generated from `host` | URL to the Frontman client bundle (must include a `host` query parameter) |
+| `isLightTheme` | `false` | Use a light theme for the Frontman UI |
+
+### Environment variables
+
+| Variable | Description |
+|---|---|
+| `FRONTMAN_HOST` | Override the default server host without changing config |
+| `PROJECT_ROOT` | Override the project root path |
+| `FRONTMAN_CLIENT_URL` | Override the client bundle URL |
+
+## How it works
+
+The integration uses two Astro hooks:
+
+- **`astro:config:setup`** — Registers the dev toolbar app and injects the annotation capture script via `injectScript('head-inline', ...)`
+- **`astro:server:setup`** — Registers Frontman API routes as Vite dev server middleware via `server.middlewares.use()`
+
+No manual middleware file needed. No SSR adapter required. Works with static (`output: 'static'`) Astro projects.
+
+## Requirements
 
-- `.` - Main module with `createMiddleware`, `makeConfig`, `ToolRegistry`
-- `./integration` - Astro integration hook
-- `./toolbar` - Dev toolbar app component
+- Astro ^5.0.0
+- Node.js >= 18
 
-## Dependencies
+## Links
 
-- `@frontman/frontman-core` - Tool registry and SSE utilities
-- `astro` ^5.0.0 (peer dependency)
+- [Website](https://frontman.sh)
+- [Documentation](https://frontman.sh/docs/astro)
+- [Changelog](https://github.com/frontman-ai/frontman/blob/main/CHANGELOG.md)
+- [Issues](https://github.com/frontman-ai/frontman/issues)
 
-## Commands
+## License
 
-Run `make` or `make help` to see all available commands.
+[Apache-2.0](https://github.com/frontman-ai/frontman/blob/main/LICENSE)

package/dist/index.js

@@ -24,11 +24,6 @@ var require_lib = __commonJS({
   }
 });
 
-// ../../node_modules/@rescript/runtime/lib/es6/Stdlib_JsError.js
-function throwWithMessage(str) {
-  throw new Error(str);
-}
-
 // ../../node_modules/@rescript/runtime/lib/es6/Primitive_option.js
 function some(x) {
   if (x === void 0) {
@@ -95,25 +90,39 @@ function orElse(opt, other) {
   }
 }
 
+// ../frontman-core/src/FrontmanCore__Hosts.res.mjs
+var apiHost = "api.frontman.sh";
+var clientJs = "https://app.frontman.sh/frontman.es.js";
+var clientCss = "https://app.frontman.sh/frontman.css";
+var devClientJs = "http://localhost:5173/src/Main.res.mjs";
+
 // src/FrontmanAstro__Config.res.mjs
 var host = process.env["FRONTMAN_HOST"];
-var defaultHost = host !== void 0 ? host : "frontman.local:4000";
-function makeFromObject(config) {
+var defaultHost = host !== void 0 ? host : apiHost;
+var ensureConfig = (function(c2) {
+  return c2 || {};
+});
+function makeFromObject(rawConfig) {
+  let config = ensureConfig(rawConfig);
+  let host2 = getOr(config.host, defaultHost);
+  let isDev = host2 !== apiHost;
   let projectRoot = getOr(orElse(config.projectRoot, orElse(process.env["PROJECT_ROOT"], process.env["PWD"])), ".");
   let sourceRoot = getOr(config.sourceRoot, projectRoot);
   let basePath = getOr(config.basePath, "frontman");
   let serverName = getOr(config.serverName, "frontman-astro");
   let serverVersion = getOr(config.serverVersion, "1.0.0");
   let isLightTheme = getOr(config.isLightTheme, false);
-  let host2 = getOr(config.host, defaultHost);
-  let baseUrl = getOr(process.env["FRONTMAN_CLIENT_URL"], "http://localhost:5173/src/Main.res.mjs");
+  let baseUrl = getOr(config.clientUrl, getOr(process.env["FRONTMAN_CLIENT_URL"], isDev ? devClientJs : clientJs));
   let url2 = new URL(baseUrl);
-  let clientUrl = getOr(config.clientUrl, (url2.searchParams.set("clientName", "astro"), url2.searchParams.set("host", host2), url2.href));
-  let parsedUrl = new URL(clientUrl);
-  if (!parsedUrl.searchParams.has("host")) {
-    throwWithMessage(`[frontman-astro] clientUrl must include a "host" query parameter. Got: ` + clientUrl);
+  if (url2.searchParams.has("clientName")) ; else {
+    url2.searchParams.set("clientName", "astro");
+  }
+  if (url2.searchParams.has("host")) ; else {
+    url2.searchParams.set("host", host2);
   }
+  let clientUrl = url2.href;
   return {
+    isDev,
     projectRoot,
     sourceRoot,
     basePath,
@@ -121,6 +130,7 @@ function makeFromObject(config) {
     serverVersion,
     host: host2,
     clientUrl,
+    clientCssUrl: orElse(config.clientCssUrl, isDev ? void 0 : clientCss),
     isLightTheme
   };
 }
@@ -699,14 +709,14 @@ function withPathPrepend(b, input, path, maybeDynamicLocationVar, appendSafe, fn
     return fn(b, input, path);
   }
   try {
-    let $$catch = (b2, errorVar2) => {
+    let $$catch2 = (b2, errorVar2) => {
       b2.c = errorVar2 + `.path=` + fromString(path) + `+` + (maybeDynamicLocationVar !== void 0 ? `'["'+` + maybeDynamicLocationVar + `+'"]'+` : "") + errorVar2 + `.path`;
     };
     let fn$1 = (b2) => fn(b2, input, "");
     let prevCode = b.c;
     b.c = "";
     let errorVar = varWithoutAllocation(b.g);
-    let maybeResolveVal = $$catch(b, errorVar);
+    let maybeResolveVal = $$catch2(b, errorVar);
     let catchCode = `if(` + (errorVar + `&&` + errorVar + `.s===s`) + `){` + b.c;
     b.c = "";
     let bb = {
@@ -5577,42 +5587,7 @@ function make2() {
 }
 
 // src/FrontmanAstro__Middleware.res.mjs
-var annotationCaptureScript = `
-<script>
-(function() {
-  var annotations = new Map();
-  document.querySelectorAll('[data-astro-source-file]').forEach(function(el) {
-    annotations.set(el, {
-      file: el.getAttribute('data-astro-source-file'),
-      loc: el.getAttribute('data-astro-source-loc')
-    });
-  });
-  window.__frontman_annotations__ = {
-    _map: annotations,
-    get: function(el) { return annotations.get(el); },
-    has: function(el) { return annotations.has(el); },
-    size: function() { return annotations.size; }
-  };
-  console.log('[Frontman] Captured ' + annotations.size + ' elements');
-})();
-</script>
-`;
-async function injectAnnotationScript(response) {
-  let contentType = response.headers.get("content-type");
-  if (contentType === null) {
-    return response;
-  }
-  if (!contentType.includes("text/html")) {
-    return response;
-  }
-  let html = await response.text();
-  let injectedHtml = html.replace("</body>", annotationCaptureScript + `</body>`);
-  return new Response(injectedHtml, {
-    status: response.status,
-    headers: some(response.headers)
-  });
-}
-function uiHtml(clientUrl, isLightTheme) {
+function uiHtml(clientUrl, clientCssUrl, isLightTheme) {
   let openrouterKey = flatMap(process.env["OPENROUTER_API_KEY"], (key) => {
     if (key !== "") {
       return key;
@@ -5627,12 +5602,14 @@ function uiHtml(clientUrl, isLightTheme) {
   });
   let runtimeConfig = JSON.stringify(configObj);
   let themeClass = isLightTheme ? "" : "dark";
+  let cssLink = clientCssUrl !== void 0 ? `<link rel="stylesheet" href="` + clientCssUrl + `">` : "";
   return `<!DOCTYPE html>
 <html lang="en" class="` + themeClass + `">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Frontman</title>
+  ` + cssLink + `
   <style>
     html, body, #root {
       margin: 0;
@@ -5650,7 +5627,7 @@ function uiHtml(clientUrl, isLightTheme) {
 </html>`;
 }
 function serveUI(config) {
-  let html = uiHtml(config.clientUrl, config.isLightTheme);
+  let html = uiHtml(config.clientUrl, config.clientCssUrl, config.isLightTheme);
   let headers2 = Object.fromEntries([[
     "Content-Type",
     "text/html"
@@ -5661,9 +5638,10 @@ function serveUI(config) {
 }
 function createMiddleware(config) {
   let registry = make2();
-  return async (context, next) => {
-    let pathname = context.url.pathname;
-    let method = context.request.method;
+  return async (request) => {
+    let url2 = new URL(request.url);
+    let pathname = url2.pathname;
+    let method = request.method;
     let basePath = `/` + config.basePath;
     if (pathname === basePath || pathname.startsWith(basePath + `/`)) {
       if (method === "OPTIONS") {
@@ -5673,9 +5651,9 @@ function createMiddleware(config) {
       } else if (pathname === basePath + `/tools` && method === "GET") {
         return handleGetTools(registry, config);
       } else if (pathname === basePath + `/tools/call` && method === "POST") {
-        return await handleToolCall(registry, config, context.request);
+        return await handleToolCall(registry, config, request);
       } else if (pathname === basePath + `/resolve-source-location` && method === "POST") {
-        return await handleResolveSourceLocation(config, context.request);
+        return await handleResolveSourceLocation(config, request);
       } else {
         return Response.json(Object.fromEntries([[
           "error",
@@ -5685,8 +5663,109 @@ function createMiddleware(config) {
         });
       }
     }
-    let response = await next();
-    return await injectAnnotationScript(response);
+  };
+}
+
+// ../../node_modules/@rescript/runtime/lib/es6/Stdlib_Promise.js
+function $$catch(promise, callback) {
+  return promise.catch((err) => callback(internalToException(err)));
+}
+
+// ../bindings/src/NodeHttp.res.mjs
+var collectRequestBody = (async function(req) {
+  const chunks = [];
+  for await (const chunk of req) {
+    chunks.push(chunk);
+  }
+  const { Buffer: Buffer2 } = await import('buffer');
+  return Buffer2.concat(chunks);
+});
+
+// src/FrontmanAstro__ViteAdapter.res.mjs
+var copyHeaders = (function(headers2, res) {
+  headers2.forEach(function(value, key) {
+    res.setHeader(key, value);
+  });
+});
+async function toWebRequest(req) {
+  let host2 = getOr(req.headers["host"], "localhost");
+  let url2 = `http://` + host2 + req.url;
+  let method = req.method;
+  let match = method.toUpperCase();
+  let body;
+  switch (match) {
+    case "PATCH":
+    case "POST":
+    case "PUT":
+      body = await collectRequestBody(req);
+      break;
+    default:
+      body = void 0;
+  }
+  let headersDict = req.headers;
+  let init = {
+    method,
+    headers: some(headersDict),
+    body: map(body, (b) => b)
+  };
+  if (body !== void 0) {
+    init["duplex"] = "half";
+  }
+  return new Request(url2, init);
+}
+async function writeWebResponse(webResponse, res) {
+  res.statusCode = webResponse.status;
+  copyHeaders(webResponse.headers, res);
+  let body = webResponse.body;
+  if (body !== null) {
+    let reader = body.getReader();
+    let decoder = new TextDecoder();
+    let reading = true;
+    while (reading) {
+      let result = await reader.read();
+      if (result.done) {
+        reading = false;
+      } else {
+        let chunk = result.value;
+        if (!(chunk == null)) {
+          let text = decoder.decode(chunk, {
+            stream: true
+          });
+          res.write(text);
+        }
+      }
+    }
+    res.end();
+    return;
+  }
+  res.end();
+}
+function adaptToConnect(middleware, basePath) {
+  let prefix = `/` + basePath;
+  return (req, res, next) => {
+    let reqPath = getOr(req.url.split("?")[0], req.url);
+    if (!(reqPath === prefix || reqPath.startsWith(prefix + `/`))) {
+      return next();
+    }
+    let handleRequest = async () => {
+      let webRequest = await toWebRequest(req);
+      let maybeResponse = await middleware(webRequest);
+      if (maybeResponse !== void 0) {
+        return await writeWebResponse(maybeResponse, res);
+      } else {
+        return next();
+      }
+    };
+    $$catch(handleRequest(), (error) => {
+      console.error("[Frontman] Middleware error:", error);
+      if (res.headersSent) {
+        res.end();
+      } else {
+        res.statusCode = 500;
+        res.end("Internal Server Error");
+      }
+      return Promise.resolve();
+    });
   };
 }
 
@@ -5695,33 +5774,61 @@ var icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
 function getToolbarAppPath() {
   return new URL("./toolbar.js", import.meta.url).pathname;
 }
-function make3() {
+var annotationCaptureScript = `(function() {
+  function captureAnnotations() {
+    var annotations = new Map();
+    document.querySelectorAll('[data-astro-source-file]').forEach(function(el) {
+      annotations.set(el, {
+        file: el.getAttribute('data-astro-source-file'),
+        loc: el.getAttribute('data-astro-source-loc')
+      });
+    });
+    window.__frontman_annotations__ = {
+      _map: annotations,
+      get: function(el) { return annotations.get(el); },
+      has: function(el) { return annotations.has(el); },
+      size: function() { return annotations.size; }
+    };
+  }
+  // Capture once on initial DOM parse
+  document.addEventListener('DOMContentLoaded', captureAnnotations);
+  // Re-capture on View Transitions (SPA navigations) \u2014 skips the initial
+  // page-load event since DOMContentLoaded already captured
+  var initialLoad = true;
+  document.addEventListener('astro:page-load', function() {
+    if (initialLoad) { initialLoad = false; return; }
+    captureAnnotations();
+  });
+})();`;
+function make3(configInput) {
+  let config = makeFromObject(configInput);
   return {
     name: "frontman",
     hooks: {
       "astro:config:setup": (ctx2) => {
         if (ctx2.command === "dev") {
-          return ctx2.addDevToolbarApp({
+          if (!ctx2.config.devToolbar.enabled) {
+            console.warn("[Frontman] Astro devToolbar is disabled \u2014 element source detection will be limited. Set `devToolbar: { enabled: true }` in your astro.config to enable full component source resolution.");
+          }
+          ctx2.addDevToolbarApp({
             id: "frontman:toolbar",
             name: "Frontman",
             icon,
             entrypoint: getToolbarAppPath()
           });
+          return ctx2.injectScript("head-inline", annotationCaptureScript);
         }
+      },
+      "astro:server:setup": (param) => {
+        let webMiddleware = createMiddleware(config);
+        let connectMiddleware = adaptToConnect(webMiddleware, config.basePath);
+        param.server.middlewares.use(connectMiddleware);
       }
     }
   };
 }
 
 // src/FrontmanAstro.res.mjs
-var Config;
-var Middleware;
-var Server;
-var ToolRegistry;
-var Integration;
-var SSE;
-var createMiddleware2 = createMiddleware;
-var makeConfig = makeFromObject;
 var frontmanIntegration = make3;
 
-export { Config, Integration, Middleware, SSE, Server, ToolRegistry, createMiddleware2 as createMiddleware, frontmanIntegration, makeConfig };
+export { frontmanIntegration as default, frontmanIntegration };