@saltcorn/bootstrap-prompt-theme 0.1.2 → 0.1.4

package/README.md

@@ -30,6 +30,18 @@ This variant generates a lightweight CSS overlay by chatting with an LLM. Bootst
 
 The chat history is persisted across page reloads, so you can return to the configuration page and pick up where you left off.
 
+### Visual feedback
+
+If the `@saltcorn/page-to-pdf` plugin is installed, the AI can capture a screenshot of a live page after each CSS change and use it to self-correct. To enable this, mention a page name in your message:
+
+```
+You:      A dark cyberpunk theme. Use the "dashboard" page for visual feedback.
+
+AI:       [applies CSS overlay, captures screenshot, refines if needed]
+```
+
+The page name is remembered for the rest of the conversation — you only need to mention it once. The AI will tell you whether a screenshot was received and used for refinement, or explain if it failed.
+
 ### Example conversation
 
 ```

package/agent-skill.js

@@ -2,8 +2,8 @@ const Plugin = require("@saltcorn/data/models/plugin");
 const { pre, code, div } = require("@saltcorn/markup/tags");
 const db = require("@saltcorn/data/db");
 const { getState } = require("@saltcorn/data/db/state");
-const { join } = require("path");
 const { writeFile, readdir, unlink } = require("fs").promises;
+const { join } = require("path");
 
 const writeOverlayCSS = async (css, filename = `overlay.${Date.now()}.css`) => {
   const dest = join(__dirname, "public", filename);
@@ -67,11 +67,56 @@ LAYOUT CONFIG: Besides CSS, you can control structural layout options via set_la
 - top_pad: 0–5 — Bootstrap spacing scale for top padding on page sections
 - in_card: true | false — wrap page body in a Bootstrap card
 Only call set_layout_config when you want to change structural layout, separate from CSS. Call both tools when a request requires both structural and CSS changes.
+When you change menu_style, the tool response will include a page_structure field with rendered HTML of the new layout. Read it to understand the actual element hierarchy and CSS selectors before writing any CSS for that layout.
+
+{{PAGE_STRUCTURE}}
 
 WORKFLOW:
 1. Call apply_css_overlay with the complete CSS — this is the only way to deliver CSS.
 2. Optionally call set_layout_config for structural layout changes.
-3. After all tool calls, reply with one short sentence confirming what changed. Never include CSS in your text reply.`;
+3. After apply_css_overlay completes, the tool result JSON may contain a "screenshot" field — a base64-encoded PNG of the live page captured after the CSS was applied. Screenshots are only available when a reference page has been configured (via the "route" parameter) and the environment supports it; if the field is absent or null, skip to step 4 immediately. To read the image, interpret the "screenshot" value as a base64 PNG: decode it visually and assess the rendered page. The "route" parameter only needs to be passed the first time or when the user changes the reference page — the value is stored and reused automatically.
+4. If a screenshot is present, review it: check that colors, fonts, spacing, and contrast match the intended design. If there is a clear problem, call apply_css_overlay with a targeted correction and review the next screenshot. Repeat only while there are clear remaining issues — stop as soon as the result looks good or after at most 3 correction passes, whichever comes first.
+5. Once done, reply with one short sentence confirming what changed. Then report on the screenshot status — be specific, not generic:
+   - If a screenshot was received and used for refinement: say which page was used and that visual feedback was applied.
+   - If a route was configured but the screenshot field was absent or null: say that the screenshot for that page failed or returned no data.
+   - If no route was configured at all: add a short note that the user can specify a page name via the "route" parameter in their next request to enable visual feedback.
+   Never include CSS in your text reply.`;
+
+const capturePageScreenshot = async (req) => {
+  const plugin = await findPlugin();
+  const pageName = plugin?.configuration?.screenshot_page;
+  if (!pageName) return null;
+  const action = getState().actions?.page_to_pdf;
+  if (!action) {
+    getState().log(
+      5,
+      "bootstrap-prompt-theme: page_to_pdf action not available, skipping screenshot"
+    );
+    return null;
+  }
+  try {
+    const base =
+      req?.protocol && req?.get?.("host")
+        ? `${req.protocol}://${req.get("host")}`
+        : getState().getConfig("base_url", "").replace(/\/$/, "");
+    const result = await action.run({
+      req,
+      referrer: base + "/",
+      configuration: {
+        entity_type: "URL",
+        url: `${base}/page/${pageName}`,
+        format: "PNG",
+      },
+    });
+    return result?.download?.blob || null;
+  } catch (e) {
+    getState().log(
+      4,
+      `bootstrap-prompt-theme: screenshot failed: ${e.message}`
+    );
+    return null;
+  }
+};
 
 const findPlugin = async () => {
   return (
@@ -89,6 +134,18 @@ const savePluginConfig = async (plugin, patch) => {
   });
 };
 
+const renderStructureSkeleton = (config) => {
+  try {
+    return require(join(__dirname, "index.js")).renderStructureSkeleton(config);
+  } catch (e) {
+    getState().log(
+      4,
+      `bootstrap-prompt-theme: renderStructureSkeleton failed: ${e.message}`
+    );
+    return null;
+  }
+};
+
 class GenerateBootstrapThemeSkill {
   static skill_name = "Generate Bootstrap Theme";
 
@@ -104,8 +161,26 @@ class GenerateBootstrapThemeSkill {
     return [];
   }
 
-  systemPrompt() {
-    return SYSTEM_PROMPT;
+  async systemPrompt() {
+    const plugin = await findPlugin();
+    const config = plugin?.configuration || {};
+    let pageStructure =
+      "PAGE STRUCTURE: (unavailable — could not render current layout)";
+    try {
+      const { renderPageSkeleton } = require(join(__dirname, "index.js"));
+      const html = renderPageSkeleton(config);
+      if (html)
+        pageStructure =
+          "PAGE STRUCTURE: The current page renders like this (with a sample list view, based on the active layout config). Use it to understand element hierarchy, class names, and selectors when writing CSS:\n```html\n" +
+          html +
+          "\n```";
+    } catch (e) {
+      getState().log(
+        4,
+        `bootstrap-prompt-theme: systemPrompt renderPageSkeleton failed: ${e.message}`
+      );
+    }
+    return SYSTEM_PROMPT.replace("{{PAGE_STRUCTURE}}", pageStructure);
   }
 
   provideTools() {
@@ -117,17 +192,17 @@ class GenerateBootstrapThemeSkill {
             code(css.slice(0, 300) + (css.length > 300 ? "\n..." : ""))
           );
         },
-        process: async ({ css }) => {
+        process: async ({ css, route }, { req }) => {
           const filename = await writeOverlayCSS(css);
           const plugin = await findPlugin();
           if (plugin) {
-            await savePluginConfig(plugin, {
-              overlay_css: css,
-              overlay_file: filename,
-            });
+            const patch = { overlay_css: css, overlay_file: filename };
+            if (route) patch.screenshot_page = route;
+            await savePluginConfig(plugin, patch);
             await deleteOldOverlays(filename);
           }
-          return { filename };
+          const screenshot = await capturePageScreenshot(req);
+          return { filename, screenshot };
         },
         renderToolResponse: async ({ filename }) => {
           return div(
@@ -148,6 +223,11 @@ class GenerateBootstrapThemeSkill {
                 description:
                   "Complete valid CSS to write as the overlay. Must start with :root { or a comment. No markdown, no code fences.",
               },
+              route: {
+                type: "string",
+                description:
+                  "Saltcorn page name to use for visual feedback screenshots. Only pass this when the user has explicitly named a page. Do not guess or default to any page name. Once set, the value is remembered — only pass it again when the user specifies a different page.",
+              },
             },
           },
         },
@@ -162,30 +242,41 @@ class GenerateBootstrapThemeSkill {
           return pre(code(entries));
         },
         process: async (params) => {
+          const allowed = [
+            "mode",
+            "menu_style",
+            "colorscheme",
+            "fixed_top",
+            "fluid",
+            "top_pad",
+            "in_card",
+          ];
+          const patch = Object.fromEntries(
+            Object.entries(params).filter(([k]) => allowed.includes(k))
+          );
           const plugin = await findPlugin();
           if (plugin) {
-            const allowed = [
-              "mode",
-              "menu_style",
-              "colorscheme",
-              "fixed_top",
-              "fluid",
-              "top_pad",
-              "in_card",
-            ];
-            const patch = Object.fromEntries(
-              Object.entries(params).filter(([k]) => allowed.includes(k))
-            );
             await savePluginConfig(plugin, patch);
           }
-          return { success: true };
+          const result = { success: true };
+          if (params.menu_style) {
+            const mergedConfig = { ...(plugin?.configuration || {}), ...patch };
+            result.page_structure = renderStructureSkeleton(mergedConfig);
+          }
+          return result;
         },
-        renderToolResponse: async () =>
-          div({ class: "text-success" }, "Layout configuration updated."),
+        renderToolResponse: async ({ page_structure }) =>
+          div(
+            { class: "text-success" },
+            "Layout configuration updated.",
+            page_structure
+              ? pre({ class: "mt-2 small" }, code(page_structure))
+              : ""
+          ),
         function: {
           name: "set_layout_config",
           description:
-            "Set structural layout configuration for the Saltcorn UI. Only pass the parameters you want to change.",
+            "Set structural layout configuration for the Saltcorn UI. Only pass the parameters you want to change. When menu_style is set, the tool response includes a page_structure field containing rendered HTML of the new layout — use it to understand the correct selectors before writing CSS.",
           parameters: {
             type: "object",
             properties: {

package/index.js

@@ -928,6 +928,65 @@ document.addEventListener('DOMContentLoaded', () => {
     ],
   });
 
+const FAKE_MENU = [
+  {
+    section: "Main",
+    items: [
+      { label: "Tables", link: "/table" },
+      { label: "Views", link: "/viewedit" },
+      { label: "Pages", link: "/pageedit" },
+      {
+        label: "Settings",
+        subitems: [
+          { label: "About application", link: "/admin" },
+          { label: "Modules", link: "/plugins" },
+          { label: "Users and security", link: "/useradmin" },
+        ],
+      },
+      {
+        label: "User",
+        subitems: [
+          { label: "User settings", link: "/auth/settings" },
+          { label: "Logout", link: "/auth/logout" },
+        ],
+      },
+    ],
+  },
+];
+
+const FAKE_LIST_BODY =
+  '<section class="page-section pt-2"><div class="container">' +
+  '<div class="table-responsive"><table class="table table-sm table-valign-middle">' +
+  "<thead><tr>" +
+  '<th><span class="link-style">Email</span></th>' +
+  '<th class="text-align-right"><span class="link-style">Role</span></th>' +
+  "</tr></thead>" +
+  '<tbody><tr data-row-id="1"><td>admin@foo.com</td><td class="text-align-right">1</td></tr></tbody>' +
+  "</table></div>" +
+  "</div></section>";
+
+const renderStructureSkeleton = (config) =>
+  menuWrap({
+    brand: { name: "Brand" },
+    menu: FAKE_MENU,
+    config,
+    currentUrl: "/",
+    originalUrl: "/",
+    body: '<section class="page-section pt-2"><div class="container"><p><!-- page content --></p></div></section>',
+    req: null,
+  });
+
+const renderPageSkeleton = (config) =>
+  menuWrap({
+    brand: { name: "Brand" },
+    menu: FAKE_MENU,
+    config,
+    currentUrl: "/",
+    originalUrl: "/",
+    body: FAKE_LIST_BODY,
+    req: null,
+  });
+
 module.exports = {
   sc_plugin_api_version: 1,
   plugin_name: "bootstrap-prompt-theme",
@@ -980,4 +1039,6 @@ module.exports = {
     }
   },
   ready_for_mobile: true,
+  renderStructureSkeleton,
+  renderPageSkeleton,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/bootstrap-prompt-theme",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Bootstrap 5 layout plugin with LLM-generated CSS overlay",
   "main": "index.js",
   "scripts": {