@saltcorn/bootstrap-prompt-theme 0.1.1 → 0.1.2

package/.claude/settings.local.json

@@ -4,7 +4,11 @@
       "Bash(git -C /home/christian/playground/workspaces/fork/bootstrap-prompt-theme log --oneline -3)",
       "Bash(git -C /home/christian/playground/workspaces/fork/bootstrap-prompt-theme remote -v)",
       "Bash(rm -rf .git)",
-      "Bash(git init:*)"
+      "Bash(git init:*)",
+      "Bash(find /home/christian/playground/workspaces/fork -name form.js -path */models/*)",
+      "Bash(find /home/christian/playground/workspaces/saltcorn/node_modules/@dr.pogodin/csurf -name *.js)",
+      "Bash(/home/christian/playground/workspaces/fork/bootstrap-prompt-theme/README.md:*)",
+      "Bash(grep -r \"isWorkflow\\\\|xhrSubmit\\\\|submitLabel.*Finish\" /home/christian/playground/workspaces/saltcorn/packages --include=*.ts --include=*.js -l)"
     ]
   }
 }

package/README.md

@@ -1,55 +1,48 @@
 # bootstrap-prompt-theme
 
-A [Saltcorn](https://saltcorn.com/) layout plugin that uses an LLM to generate a CSS overlay on top of standard Bootstrap 5.3.
+A [Saltcorn](https://saltcorn.com/) layout plugin that uses a conversational AI chat to design and refine a CSS overlay on top of standard Bootstrap 5.3.
 
 ## Relation to any-bootstrap-theme
 
 This plugin is derived from [@saltcorn/any-bootstrap-theme](https://github.com/saltcorn/any-bootstrap-theme). The original plugin offers a large set of configuration variables (colors, card styles, link colors, etc.) that are fed into a Sass build to produce a fully compiled Bootstrap CSS file per theme.
 
-This variant generates a lightweight CSS overlay on top of the Bootstrap 5.3 CSS by prompting an LLM. Bootstrap 5.3 exposes almost everything through CSS custom properties (`--bs-*`), so a well-written overlay can restyle the entire UI without recompiling Sass.
+This variant generates a lightweight CSS overlay by chatting with an LLM. Bootstrap 5.3 exposes almost everything through CSS custom properties (`--bs-*`), so a well-written overlay can restyle the entire UI without recompiling Sass.
 
 **Trade-offs:**
 - Much simpler setup — no Sass toolchain, no build step
-- The LLM can produce creative and complex themes from a plain-language description
-- Configuration is minimal: a prompt, light/dark mode toggle, and basic layout options
+- Describe or refine your theme in plain language through a persistent chat
+- The AI applies changes immediately without requiring a page save
 
 ## Requirements
 
 - Saltcorn with the `@saltcorn/large-language-model` plugin installed and configured
+- Saltcorn with the `@saltcorn/agents` plugin installed
 
 > **Model recommendation:** Good results have been achieved with `@saltcorn/large-language-model` configured to use **GPT-5.4**.
 
-## Configuration
+## Usage
 
 1. Go to **Plugins → bootstrap-prompt-theme → Configure**
-2. Enter a theme prompt describing the visual style you want
-3. Save — the CSS overlay is generated by the LLM, written to `public/overlay.<timestamp>.css`, and stored in the plugin configuration so it survives restarts
+2. Use the **AI Theme Chat** to describe the visual style you want
+3. The AI generates and applies the CSS overlay immediately — no Save needed
+4. Continue the conversation to refine colors, fonts, spacing, dark mode, or anything else
+5. Use **Clear conversation** to start fresh with a new theme direction
 
-> **Note:** The generation step can take a noticeable amount of time, especially with a detailed prompt. This is normal — the save will complete once generation finishes.
+The chat history is persisted across page reloads, so you can return to the configuration page and pick up where you left off.
 
-### Layout options
+### Example conversation
 
-| Option | Description |
-|---|---|
-| Menu style | Top Navbar, Side Navbar, or No Menu |
-| Navbar color scheme | Dark, Light, Transparent, etc. |
-| Navbar Fixed Top | Pin the navbar to the top of the viewport |
-| Top padding | 0–5, adjust to match navbar height |
-| Fluid container | Full-width layout |
-| Mode | `light` or `dark` — sets `data-bs-theme` on `<html>` |
+```
+You:      A dark cyberpunk theme with neon green accents, deep charcoal
+          backgrounds, monospace font, and glowing borders on cards.
 
-## Example prompt
+AI:       [applies CSS overlay]
 
-```
-A clean corporate theme with a deep navy blue (#1a2744) navbar and sidebar,
-white card backgrounds with a subtle box shadow, slate-grey body background (#f4f5f7),
-and teal (#0d9488) as the primary accent color for buttons, links, and active states.
-Use a sans-serif system font stack. In dark mode, use a near-black background (#0f1117)
-with dark navy cards (#1a2133) and keep the teal accent.
-Rounded corners on buttons (border-radius: 6px) and form inputs.
-Table headers should have the navy background with white text.
-```
+You:      Make the navbar background slightly lighter and increase the
+          card border glow intensity.
 
+AI:       [applies updated CSS overlay]
+```
 
 ## How the overlay works
 
@@ -57,24 +50,20 @@ The generated file sets CSS custom properties in `:root` that Bootstrap 5.3 read
 
 ```css
 :root {
-  --my-accent: #0d9488;
-
-  --bs-body-bg: #f4f5f7;
-  --bs-body-color: #1f2937;
-  --bs-primary: var(--my-accent);
-  --bs-link-color: var(--my-accent);
-  --bs-card-bg: #ffffff;
+  --bs-body-bg: #1a1a2e;
+  --bs-body-color: #e0e0e0;
+  --bs-primary: #00ff88;
+  --bs-card-bg: #16213e;
   /* ... */
 }
 
 [data-bs-theme="dark"] {
-  --bs-body-bg: #0f1117;
-  --bs-card-bg: #1a2133;
+  --bs-body-bg: #0d0d1a;
   /* ... */
 }
 
-.navbar { background-color: #1a2744 !important; }
-.btn { border-radius: 6px; }
+.card { border: 1px solid #00ff88; box-shadow: 0 0 8px #00ff88; }
+.navbar { background-color: #16213e; }
 /* etc. */
 ```
 

package/agent-skill.js

@@ -0,0 +1,240 @@
+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 writeOverlayCSS = async (css, filename = `overlay.${Date.now()}.css`) => {
+  const dest = join(__dirname, "public", filename);
+  await writeFile(dest, css);
+  return filename;
+};
+
+const deleteOldOverlays = async (keepFile) => {
+  const publicDir = join(__dirname, "public");
+  const files = await readdir(publicDir);
+  for (const file of files) {
+    if (/^overlay\.\d+\.css$/.test(file) && file !== keepFile)
+      await unlink(join(publicDir, file));
+  }
+};
+
+const SYSTEM_PROMPT = `You are an expert CSS theme designer for Bootstrap 5.3.
+Your task is to generate a complete CSS overlay file that reskins a standard Bootstrap 5.3 app.
+
+APPROACH:
+1. Define theme-specific custom properties in :root (colors, fonts, shadows, etc.)
+2. Override Bootstrap 5.3 CSS variables in :root using --bs-* tokens for light mode
+3. Add component-level CSS rules for deeper customisation (navbar, cards, buttons, forms, tables, alerts, badges, modals, pagination, tabs, accordions, etc.)
+4. Add a dark mode section scoped to [data-bs-theme="dark"] that overrides :root custom properties and --bs-* tokens for dark mode. Component-level rules that depend only on CSS variables will automatically adapt — only add extra component rules under [data-bs-theme="dark"] where variables alone are not sufficient.
+
+BOOTSTRAP 5.3 CSS VARIABLES to consider overriding in :root and [data-bs-theme="dark"]:
+--bs-body-bg, --bs-body-color, --bs-secondary-bg, --bs-tertiary-bg,
+--bs-border-color, --bs-primary, --bs-link-color, --bs-link-hover-color,
+--bs-card-bg, --bs-card-border-color, --bs-card-cap-bg,
+--bs-dropdown-bg, --bs-dropdown-border-color, --bs-dropdown-link-color,
+--bs-dropdown-link-hover-bg, --bs-dropdown-link-active-bg,
+--bs-table-color, --bs-table-bg, --bs-table-border-color, --bs-table-hover-bg,
+--bs-modal-bg, --bs-modal-border-color,
+--bs-tooltip-bg, --bs-tooltip-color,
+--bs-body-font-family, --bs-body-font-size
+
+COMPONENTS to style: body, navbar (.navbar, .navbar-brand, .nav-link), cards (.card, .card-header, .card-footer, .card-title), buttons (.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-success), forms (.form-control, .form-select, .form-label, .form-check-input), tables (.table, .table th, .table td), alerts (.alert-*), badges (.badge), modals (.modal-content, .modal-header), pagination (.page-link), tabs (.nav-tabs), links (a), headings (h1-h6), code/pre, hr, scrollbar.
+
+DARK MODE STRUCTURE:
+:root { /* light mode theme variables and --bs-* overrides */ }
+/* component rules */
+[data-bs-theme="dark"] { /* dark mode theme variables and --bs-* overrides */ }
+/* any extra component rules needed only in dark mode, prefixed with [data-bs-theme="dark"] */
+
+CRITICAL RULES — never break these:
+- Never set overflow:hidden or overflow:clip on ANY element — not on .navbar, .card, .card-body, .card-header, .card-footer, section, #wrapper, #page-inner-content, #content-wrapper, .container, .page-section, or any other element. Bootstrap's Popper.js positions dropdowns with position:absolute outside their parent bounds; overflow:hidden on any ancestor will clip them.
+- Always set .navbar { position: relative; z-index: 1030; } to ensure navbar dropdowns render above all page content.
+- Never apply transform, filter, backdrop-filter, will-change, or perspective to .card, .card-body, .card-header, .card-footer, .container, .page-section, section, #wrapper, or any page-level container. These CSS properties create a new stacking context that can rise above the navbar and obscure its open dropdowns.
+- Never set z-index on .card or page content elements — stacking context on page content is what causes navbar dropdowns to be obscured.
+- Do not override --bs-zindex-dropdown, --bs-zindex-fixed, or .dropdown-menu z-index.
+- Dropdowns must always be fully visible and on top of all other page content, including cards, sections, and containers.
+
+IMAGES: The user may attach images to the conversation. Use them as design inspiration — extract colors, typography style, spacing feel, or overall mood and translate that into the CSS overlay. If the user attaches an image without further instruction, derive a theme from it. If they describe what they want alongside the image, use the image to inform the details.
+
+LAYOUT CONFIG: Besides CSS, you can control structural layout options via set_layout_config:
+- mode: "light" | "dark" — Bootstrap color mode applied to <html data-bs-theme>
+- menu_style: "Top Navbar" | "Side Navbar" | "No Menu"
+- colorscheme: navbar color class pair, e.g. "navbar-dark bg-dark", "navbar-light bg-light", "navbar-dark bg-primary"
+- fixed_top: true | false — fix navbar to top of viewport
+- fluid: true | false — full-width container vs fixed-width
+- 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.
+
+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.`;
+
+const findPlugin = async () => {
+  return (
+    (await Plugin.findOne({ name: "bootstrap-prompt-theme" })) ||
+    (await Plugin.findOne({ name: "@saltcorn/bootstrap-prompt-theme" }))
+  );
+};
+
+const savePluginConfig = async (plugin, patch) => {
+  plugin.configuration = { ...(plugin.configuration || {}), ...patch };
+  await plugin.upsert();
+  getState().processSend({
+    refresh_plugin_cfg: plugin.name,
+    tenant: db.getTenantSchema(),
+  });
+};
+
+class GenerateBootstrapThemeSkill {
+  static skill_name = "Generate Bootstrap Theme";
+
+  get skill_label() {
+    return "Bootstrap Theme";
+  }
+
+  constructor(cfg) {
+    Object.assign(this, cfg);
+  }
+
+  static async configFields() {
+    return [];
+  }
+
+  systemPrompt() {
+    return SYSTEM_PROMPT;
+  }
+
+  provideTools() {
+    return [
+      {
+        type: "function",
+        renderToolCall({ css }) {
+          return pre(
+            code(css.slice(0, 300) + (css.length > 300 ? "\n..." : ""))
+          );
+        },
+        process: async ({ css }) => {
+          const filename = await writeOverlayCSS(css);
+          const plugin = await findPlugin();
+          if (plugin) {
+            await savePluginConfig(plugin, {
+              overlay_css: css,
+              overlay_file: filename,
+            });
+            await deleteOldOverlays(filename);
+          }
+          return { filename };
+        },
+        renderToolResponse: async ({ filename }) => {
+          return div(
+            { class: "text-success" },
+            `CSS overlay applied: ${filename}`
+          );
+        },
+        function: {
+          name: "apply_css_overlay",
+          description:
+            "Apply a CSS overlay on top of Bootstrap 5.3 to restyle the Saltcorn UI. Call this only when you have CSS ready to apply — not for questions or clarifications.",
+          parameters: {
+            type: "object",
+            required: ["css"],
+            properties: {
+              css: {
+                type: "string",
+                description:
+                  "Complete valid CSS to write as the overlay. Must start with :root { or a comment. No markdown, no code fences.",
+              },
+            },
+          },
+        },
+      },
+      {
+        type: "function",
+        renderToolCall(params) {
+          const entries = Object.entries(params)
+            .filter(([, v]) => v !== undefined)
+            .map(([k, v]) => `${k}: ${v}`)
+            .join(", ");
+          return pre(code(entries));
+        },
+        process: async (params) => {
+          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 };
+        },
+        renderToolResponse: async () =>
+          div({ class: "text-success" }, "Layout configuration updated."),
+        function: {
+          name: "set_layout_config",
+          description:
+            "Set structural layout configuration for the Saltcorn UI. Only pass the parameters you want to change.",
+          parameters: {
+            type: "object",
+            properties: {
+              mode: {
+                type: "string",
+                enum: ["light", "dark"],
+                description:
+                  "Bootstrap color mode applied to <html data-bs-theme>",
+              },
+              menu_style: {
+                type: "string",
+                enum: ["Top Navbar", "Side Navbar", "No Menu"],
+                description: "Navigation menu style",
+              },
+              colorscheme: {
+                type: "string",
+                description:
+                  "Navbar color class pair, e.g. 'navbar-dark bg-dark', 'navbar-light bg-light', 'navbar-dark bg-primary'",
+              },
+              fixed_top: {
+                type: "boolean",
+                description: "Fix the navbar to the top of the viewport",
+              },
+              fluid: {
+                type: "boolean",
+                description:
+                  "Use a full-width container instead of fixed-width",
+              },
+              top_pad: {
+                type: "integer",
+                minimum: 0,
+                maximum: 5,
+                description:
+                  "Top padding for page sections (Bootstrap spacing scale 0–5)",
+              },
+              in_card: {
+                type: "boolean",
+                description: "Wrap page body content in a Bootstrap card",
+              },
+            },
+          },
+        },
+      },
+    ];
+  }
+}
+
+module.exports = {
+  GenerateBootstrapThemeSkill,
+  writeOverlayCSS,
+  deleteOldOverlays,
+};

package/index.js

@@ -28,6 +28,8 @@ const db = require("@saltcorn/data/db");
 const Form = require("@saltcorn/data/models/form");
 const Workflow = require("@saltcorn/data/models/workflow");
 const Plugin = require("@saltcorn/data/models/plugin");
+const WorkflowRun = require("@saltcorn/data/models/workflow_run");
+const File = require("@saltcorn/data/models/file");
 const { renderForm, link } = require("@saltcorn/markup");
 const {
   alert,
@@ -36,10 +38,157 @@ const {
 } = require("@saltcorn/markup/layout_utils");
 const { features, getState } = require("@saltcorn/data/db/state");
 const {
-  generateThemeCSS,
+  GenerateBootstrapThemeSkill,
   writeOverlayCSS,
   deleteOldOverlays,
-} = require("./generate_theme");
+} = require("./agent-skill");
+
+// Layout defaults — will be replaced by tool-generated config in a future version
+const DEFAULT_IN_CARD = false;
+const DEFAULT_MENU_STYLE = "Top Navbar";
+const DEFAULT_COLORSCHEME = "navbar-light bg-light";
+const DEFAULT_FIXED_TOP = false;
+const DEFAULT_TOP_PAD = 2;
+const DEFAULT_FLUID = false;
+const DEFAULT_MODE = "light";
+
+const resetThemeRoute = async (req, res) => {
+  if (!req.user) return res.status(403).json({ error: "Not authenticated" });
+  try {
+    let plugin = await Plugin.findOne({ name: "bootstrap-prompt-theme" });
+    if (!plugin)
+      plugin = await Plugin.findOne({
+        name: "@saltcorn/bootstrap-prompt-theme",
+      });
+    if (plugin) {
+      await deleteOldOverlays(null);
+      plugin.configuration = {
+        ...(plugin.configuration || {}),
+        overlay_css: null,
+        overlay_file: null,
+        chat_run_id: null,
+        mode: null,
+        menu_style: null,
+        colorscheme: null,
+        fixed_top: null,
+        fluid: null,
+        top_pad: null,
+        in_card: null,
+      };
+      await plugin.upsert();
+      getState().processSend({
+        refresh_plugin_cfg: plugin.name,
+        tenant: db.getTenantSchema(),
+      });
+    }
+    res.json({ success: "ok" });
+  } catch (err) {
+    getState().log(
+      2,
+      `bootstrap-prompt-theme reset-theme error: ${err.message}`
+    );
+    res.json({ error: err.message });
+  }
+};
+
+const chatRoute = async (req, res) => {
+  if (!req.user) return res.status(403).json({ error: "Not authenticated" });
+  try {
+    const { userinput, run_id } = req.body;
+    if (!userinput?.trim() && !req.files?.file)
+      return res.json({
+        success: "ok",
+        response: "",
+        run_id: run_id || undefined,
+      });
+
+    let agentsLocation =
+      getState().plugin_locations?.agents ||
+      getState().plugin_locations?.["@saltcorn/agents"];
+    if (!agentsLocation)
+      return res.json({ error: "Agents plugin not available" });
+    const { join } = require("path");
+    const {
+      process_interaction,
+      addToContext,
+      wrapSegment,
+      saveInteractions,
+    } = require(join(agentsLocation, "common.js"));
+
+    const agentConfig = {
+      skills: [{ skill_type: "Generate Bootstrap Theme" }],
+      sys_prompt: "",
+    };
+
+    let run;
+    if (!run_id || run_id === "undefined" || run_id === "") {
+      run = await WorkflowRun.create({
+        status: "Running",
+        started_by: req.user?.id,
+        context: {
+          interactions: [],
+          html_interactions: [],
+          funcalls: {},
+        },
+      });
+      let plugin = await Plugin.findOne({ name: "bootstrap-prompt-theme" });
+      if (!plugin)
+        plugin = await Plugin.findOne({
+          name: "@saltcorn/bootstrap-prompt-theme",
+        });
+      if (plugin) {
+        plugin.configuration = {
+          ...(plugin.configuration || {}),
+          chat_run_id: run.id,
+        };
+        await plugin.upsert();
+      }
+    } else {
+      run = await WorkflowRun.findOne({ id: +run_id });
+    }
+
+    if (req.files?.file) {
+      const rawFiles = Array.isArray(req.files.file)
+        ? req.files.file
+        : [req.files.file];
+      run.context.interactions = run.context.interactions || [];
+      for (const rawFile of rawFiles) {
+        const file = await File.from_req_files(rawFile, req.user?.id, 100);
+        const b64 = await file.get_contents("base64");
+        const imageurl = `data:${file.mimetype};base64,${b64}`;
+        await getState().functions.llm_add_message.run("image", imageurl, {
+          chat: run.context.interactions,
+        });
+      }
+      await saveInteractions(run);
+    }
+
+    const userMsg = wrapSegment(
+      `<p>${userinput || "(image)"}</p>`,
+      "You",
+      true
+    );
+    await addToContext(run, {
+      interactions: [
+        ...(run.context.interactions || []),
+        ...(userinput?.trim() ? [{ role: "user", content: userinput }] : []),
+      ],
+      html_interactions: [userMsg],
+    });
+
+    const result = await process_interaction(
+      run,
+      agentConfig,
+      req,
+      "Theme Assistant",
+      []
+    );
+    res.json(result?.json || { success: "ok", response: "", run_id: run.id });
+  } catch (err) {
+    getState().log(2, `bootstrap-prompt-theme chat error: ${err.message}`);
+    res.json({ error: err.message });
+  }
+};
 
 const isNode = typeof window === "undefined";
 let hasCapacitor = false;
@@ -90,16 +239,19 @@ const blockDispatch = (config) => ({
     }`)
     ),
   noBackgroundAtTop: () => true,
-  wrapTop: (segment, ix, s) =>
-    ["hero", "footer"].includes(segment.type) || segment.noWrapTop
+  wrapTop: (segment, ix, s) => {
+    const topPad = config.top_pad ?? DEFAULT_TOP_PAD;
+    const fixedTop = config.fixed_top ?? DEFAULT_FIXED_TOP;
+    const fluid = config.fluid ?? DEFAULT_FLUID;
+    return ["hero", "footer"].includes(segment.type) || segment.noWrapTop
       ? s
       : section(
           {
             class: [
               "page-section",
-              ix === 0 && `pt-${config.toppad || 0}`,
-              ix === 0 && config.fixedTop && isNode && "mt-5",
-              ix === 0 && config.fixedTop && !isNode && "mt-6",
+              ix === 0 && `pt-${topPad}`,
+              ix === 0 && fixedTop && isNode && "mt-5",
+              ix === 0 && fixedTop && !isNode && "mt-6",
               segment.class,
               segment.invertColor && "bg-primary",
             ],
@@ -110,10 +262,11 @@ const blockDispatch = (config) => ({
             }`,
           },
           div(
-            { class: [config.fluid ? "container-fluid" : "container"] },
+            { class: [fluid ? "container-fluid" : "container"] },
             segment.textStyle && segment.textStyle === "h1" ? h1(s) : s
           )
-        ),
+        );
+  },
 });
 
 const buildHints = (config = {}) => ({
@@ -126,7 +279,7 @@ const renderBody = (title, body, alerts, config, role, req) =>
     role,
     req,
     layout:
-      typeof body === "string" && config.in_card
+      typeof body === "string" && (config.in_card ?? DEFAULT_IN_CARD)
         ? { type: "card", title, contents: body }
         : body,
     alerts,
@@ -146,7 +299,7 @@ const base_public_serve = `${linkPrefix()}/public/bootstrap-prompt-theme${
 
 const wrapIt = (config, bodyAttr, headers, title, body) => {
   return `<!doctype html>
-<html lang="en" data-bs-theme="${config.mode || "light"}">
+<html lang="en" data-bs-theme="${config.mode || DEFAULT_MODE}">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -171,7 +324,11 @@ const wrapIt = (config, bodyAttr, headers, title, body) => {
   }/jquery-3.6.0.min.js"></script>
     <script src="${base_public_serve}/bootstrap.bundle.min.js"></script>
     ${headersInBody(headers)}
-    ${config.colorscheme === "navbar-light" ? navbarSolidOnScroll : ""}
+    ${
+      (config.colorscheme || DEFAULT_COLORSCHEME) === "navbar-light"
+        ? navbarSolidOnScroll
+        : ""
+    }
   </body>
 </html>`;
 };
@@ -375,7 +532,10 @@ const menuWrap = ({
   body,
   req,
 }) => {
-  const colschm = (config.colorscheme || "").split(" ");
+  const colorscheme = config.colorscheme || DEFAULT_COLORSCHEME;
+  const menuStyle = config.menu_style || DEFAULT_MENU_STYLE;
+  const fixedTop = config.fixed_top ?? DEFAULT_FIXED_TOP;
+  const colschm = colorscheme.split(" ");
   const navbarCol = colschm[0];
   const bg = colschm[1];
   const txt = (colschm[0] || "").includes("dark") ? "text-light" : "";
@@ -384,11 +544,15 @@ const menuWrap = ({
     ? mobileBottomNavBar(currentUrl, menu, bg, txt)
     : "";
   const role = !req ? 1 : req.user ? req.user.role_id : 100;
-  if ((config.menu_style === "No Menu" && role > 1) || (!menu && !brand))
+  if ((menuStyle === "No Menu" && role > 1) || (!menu && !brand))
     return div({ id: "wrapper" }, div({ id: "page-inner-content" }, body));
-  else if (config.menu_style === "Side Navbar" && isNode) {
+  else if (menuStyle === "Side Navbar" && isNode) {
     return (
-      navbar(brand, menu, currentUrl, { class: "d-md-none", ...config }) +
+      navbar(brand, menu, currentUrl, {
+        class: "d-md-none",
+        colorscheme,
+        fixedTop,
+      }) +
       div(
         { id: "wrapper", class: "d-flex with-sidebar" },
         nav(
@@ -414,7 +578,7 @@ const menuWrap = ({
     return (
       div(
         { id: "wrapper" },
-        navbar(brand, menu, currentUrl, config),
+        navbar(brand, menu, currentUrl, { colorscheme, fixedTop }),
         div({ id: "page-inner-content" }, body)
       ) + mobileNav
     );
@@ -453,7 +617,7 @@ const layout = (config) => ({
           title,
           body,
           alerts,
-          requestFluidLayout ? { ...config, fluid: true } : config,
+          requestFluidLayout ? { fluid: true } : {},
           role,
           req
         ),
@@ -565,112 +729,199 @@ const configuration_workflow = () =>
         },
       };
     },
-    onStepSuccess: async (step, ctx) => {
-      const prompt = ctx?.prompt;
-      if (!prompt) return;
-      try {
-        let plugin = await Plugin.findOne({ name: "bootstrap-prompt-theme" });
-        if (!plugin)
-          plugin = await Plugin.findOne({
-            name: "@saltcorn/bootstrap-prompt-theme",
-          });
-        if (plugin?.configuration?.last_applied_prompt === prompt) return;
-        const css = await generateThemeCSS(prompt);
-        if (css) {
-          ctx.overlay_css = css;
-          ctx.last_applied_prompt = prompt;
-          const filename = await writeOverlayCSS(css);
-          ctx.overlay_file = filename;
-        }
-      } catch (error) {
-        const msg = error.message || "unknown error";
-        getState().log(2, `bootstrap-prompt-theme onLoad failed: ${msg}`);
-      }
-    },
     steps: [
       {
         name: "Theme",
         form: async (ctx) => {
+          let chatRunId = "";
+          let existingInteractions = "";
+          let plugin = await Plugin.findOne({ name: "bootstrap-prompt-theme" });
+          if (!plugin)
+            plugin = await Plugin.findOne({
+              name: "@saltcorn/bootstrap-prompt-theme",
+            });
+          if (plugin?.configuration?.chat_run_id) {
+            const run = await WorkflowRun.findOne({
+              id: plugin.configuration.chat_run_id,
+            });
+            if (run?.context?.html_interactions?.length) {
+              chatRunId = String(run.id);
+              existingInteractions = run.context.html_interactions.join("");
+            }
+          }
           return new Form({
-            fields: [
-              {
-                name: "prompt",
-                label: "Theme prompt",
-                sublabel:
-                  "Describe the visual style you want (LLM generation coming soon)",
-                type: "String",
-                fieldview: "textarea",
-              },
+            additionalHeaders: [
               {
-                name: "in_card",
-                label: "Default content in card?",
-                type: "Bool",
-                required: true,
-              },
-              {
-                name: "menu_style",
-                label: "Menu style",
-                type: "String",
-                required: true,
-                attributes: {
-                  inline: true,
-                  options: ["Top Navbar", "Side Navbar", "No Menu"],
-                },
-              },
-              {
-                name: "colorscheme",
-                label: "Navbar color scheme",
-                type: "String",
-                required: true,
-                default: "navbar-light",
-                attributes: {
-                  options: [
-                    { name: "navbar-dark bg-dark", label: "Dark" },
-                    { name: "navbar-dark bg-primary", label: "Dark Primary" },
-                    {
-                      name: "navbar-dark bg-secondary",
-                      label: "Dark Secondary",
-                    },
-                    { name: "navbar-light bg-light", label: "Light" },
-                    { name: "navbar-light bg-white", label: "White" },
-                    { name: "navbar-light", label: "Transparent Light" },
-                  ],
-                },
-              },
-              {
-                name: "fixedTop",
-                label: "Navbar Fixed Top",
-                type: "Bool",
-                required: true,
-              },
-              {
-                name: "toppad",
-                label: "Top padding",
-                sublabel: "0-5 depending on Navbar height and configuration",
-                type: "Integer",
-                required: true,
-                default: 2,
-                attributes: { max: 5, min: 0 },
-              },
-              {
-                name: "fluid",
-                label: "Fluid full-width container",
-                type: "Bool",
+                headerTag: `<script>
+window._bptDT = new DataTransfer();
+function bptSetFiles(files) {
+  for (const f of files) window._bptDT.items.add(f);
+  document.getElementById('bpt-file-input').files = window._bptDT.files;
+  bptUpdateFileLabel();
+}
+function bptUpdateFileLabel() {
+  const n = window._bptDT.files.length;
+  const el = document.getElementById('bpt-file-label');
+  if (!el) return;
+  if (n === 0) { el.innerHTML = ''; }
+  else {
+    const txt = n === 1 ? window._bptDT.files[0].name : n + ' files';
+    el.innerHTML = '<span class="text-muted">' + txt + '</span> <span class="badge text-bg-secondary" style="cursor:pointer;font-size:.65em" onclick="bptClearFiles()" title="Remove">&times;</span>';
+  }
+}
+function bptClearFiles() {
+  window._bptDT.items.clear();
+  const fi = document.getElementById('bpt-file-input');
+  if (fi) fi.value = '';
+  bptUpdateFileLabel();
+}
+function bptFileAttach(e) {
+  window._bptDT.items.clear();
+  bptSetFiles(e.target.files);
+}
+async function bptResetTheme() {
+  if (!confirm('Reset theme? This will remove the current CSS overlay and conversation.')) return;
+  await fetch('/bootstrap-prompt-theme/reset-theme', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', 'CSRF-Token': _sc_globalCsrf },
+  });
+  document.getElementById('bpt-interactions').innerHTML = '';
+  document.getElementById('bpt-run-id').value = '';
+}
+async function bptSend() {
+  const input = document.getElementById('bpt-input');
+  const interactions = document.getElementById('bpt-interactions');
+  const runIdInput = document.getElementById('bpt-run-id');
+  const sendBtn = document.getElementById('bpt-send-btn');
+  const sendIcon = document.getElementById('bpt-send-icon');
+  const fileInput = document.getElementById('bpt-file-input');
+  const msg = input.value.trim();
+  const hasFiles = fileInput?.files?.length > 0;
+  if ((!msg && !hasFiles) || sendBtn.disabled) return;
+  let fileHtml = '';
+  if (hasFiles) {
+    fileHtml = Array.from(fileInput.files).map(f => {
+      const url = URL.createObjectURL(f);
+      return '<img src="' + url + '" style="max-height:60px;max-width:80px;border-radius:4px;margin-top:4px;" alt="' + f.name + '">';
+    }).join(' ');
+  }
+  interactions.innerHTML += '<div class="interaction-segment to-right"><div><div class="badgewrap"><span class="badge bg-secondary">You</span></div>' + (msg ? '<p>' + msg.replace(/</g, '&lt;') + '</p>' : '') + fileHtml + '</div></div>';
+  interactions.scrollTop = interactions.scrollHeight;
+  input.value = '';
+  sendBtn.disabled = true;
+  sendIcon.className = 'fas fa-spinner fa-spin';
+  const fd = new FormData();
+  fd.append('userinput', msg);
+  fd.append('run_id', runIdInput.value);
+  if (hasFiles) {
+    Array.from(fileInput.files).forEach(f => fd.append('file', f));
+    bptClearFiles();
+  }
+  try {
+    const resp = await fetch('/bootstrap-prompt-theme/chat', {
+      method: 'POST',
+      headers: { 'CSRF-Token': _sc_globalCsrf },
+      body: fd
+    });
+    const data = await resp.json();
+    if (data.run_id) runIdInput.value = data.run_id;
+    if (data.response) { interactions.innerHTML += data.response; interactions.scrollTop = interactions.scrollHeight; }
+    if (data.error) interactions.innerHTML += '<div class="alert alert-danger mt-2">' + data.error + '</div>';
+  } catch (e) {
+    interactions.innerHTML += '<div class="alert alert-danger mt-2">Error: ' + e.message + '</div>';
+  }
+  sendBtn.disabled = false;
+  sendIcon.className = 'far fa-paper-plane';
+}
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.createElement('div');
+  el.innerHTML = [
+    '<div class="card mb-4">',
+    '  <div class="card-header fw-bold"><i class="fas fa-robot me-2"></i>AI Theme Chat</div>',
+    '  <div class="card-body" id="bpt-card-body">',
+    '    <p class="text-muted small mb-2">Chat with the AI to build your Bootstrap theme. New themes are visible after page reload or when you click Finish.</p>',
+    '    <div id="bpt-interactions" style="min-height:80px;max-height:320px;overflow-y:auto;border:1px solid var(--bs-border-color,#dee2e6);padding:10px;margin-bottom:10px;border-radius:4px;background:var(--bs-body-bg,#fff);"></div>',
+    '    <div class="d-flex gap-2 align-items-end">',
+    '      <textarea id="bpt-input" class="form-control" rows="2" placeholder="Describe the theme changes you want..."></textarea>',
+    '      <button type="button" id="bpt-send-btn" class="btn btn-primary" onclick="bptSend()">',
+    '        <i id="bpt-send-icon" class="far fa-paper-plane"></i>',
+    '      </button>',
+    '    </div>',
+    '    <div class="d-flex align-items-center mt-1 gap-2">',
+    '      <label class="mb-0 text-muted" style="cursor:pointer" for="bpt-file-input" title="Attach image for design inspiration"><i class="fas fa-paperclip"></i></label>',
+    '      <input type="file" id="bpt-file-input" class="d-none" accept="image/*" multiple onchange="bptFileAttach(event)">',
+    '      <span id="bpt-file-label" class="small"></span>',
+    '    </div>',
+    '    <input type="hidden" id="bpt-run-id" value="">',
+    '  </div>',
+    '</div>',
+  ].join('');
+  const form = document.querySelector('form.form-namespace');
+  if (form) form.parentNode.insertBefore(el, form);
+  document.getElementById('bpt-run-id').value = ${JSON.stringify(chatRunId)};
+  const interactionsEl = document.getElementById('bpt-interactions');
+  interactionsEl.innerHTML = ${JSON.stringify(existingInteractions)};
+  interactionsEl.scrollTop = interactionsEl.scrollHeight;
+  const inp = document.getElementById('bpt-input');
+  inp?.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); bptSend(); }
+  });
+  const dropZone = document.getElementById('bpt-card-body');
+  let _dragCtr = 0;
+  dropZone?.addEventListener('dragover', (e) => e.preventDefault());
+  dropZone?.addEventListener('dragenter', (e) => {
+    e.preventDefault();
+    _dragCtr++;
+    dropZone.style.outline = '2px dashed var(--bs-primary, #0d6efd)';
+    dropZone.style.outlineOffset = '-4px';
+  });
+  dropZone?.addEventListener('dragleave', () => {
+    _dragCtr--;
+    if (_dragCtr === 0) { dropZone.style.outline = ''; dropZone.style.outlineOffset = ''; }
+  });
+  dropZone?.addEventListener('drop', (e) => {
+    e.preventDefault();
+    _dragCtr = 0;
+    dropZone.style.outline = '';
+    dropZone.style.outlineOffset = '';
+    const imgs = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/'));
+    if (imgs.length) bptSetFiles(imgs);
+  });
+  inp?.addEventListener('paste', (e) => {
+    const pasted = Array.from(e.clipboardData?.items || [])
+      .filter(it => it.type.startsWith('image/'))
+      .map(it => it.getAsFile())
+      .filter(Boolean);
+    if (pasted.length) { e.preventDefault(); bptSetFiles(pasted); }
+  });
+  const submitBtn = form?.querySelector('[type="submit"]');
+  const origSubmitHTML = submitBtn ? submitBtn.innerHTML : null;
+  if (form) form.addEventListener('submit', (e) => {
+    const draft = document.getElementById('bpt-input')?.value?.trim();
+    if (draft && !confirm('You have an unsent message. Finish without sending it?')) {
+      e.preventDefault();
+      if (submitBtn && origSubmitHTML !== null) {
+        setTimeout(() => {
+          submitBtn.innerHTML = origSubmitHTML;
+          submitBtn.disabled = false;
+          submitBtn.removeAttribute('disabled');
+        }, 100);
+      }
+    }
+  });
+});
+</script>`,
               },
+            ],
+            additionalButtons: [
               {
-                name: "mode",
-                label: "Mode",
-                type: "String",
-                required: true,
-                default: "light",
-                attributes: {
-                  options: [
-                    { name: "light", label: "Light" },
-                    { name: "dark", label: "Dark" },
-                  ],
-                },
+                label: "Reset theme",
+                id: "bpt-reset-btn",
+                class: "btn btn-outline-danger",
+                onclick: "bptResetTheme()",
               },
             ],
+            fields: [],
           });
         },
       },
@@ -680,7 +931,20 @@ const configuration_workflow = () =>
 module.exports = {
   sc_plugin_api_version: 1,
   plugin_name: "bootstrap-prompt-theme",
+  exchange: () => ({ agent_skills: [GenerateBootstrapThemeSkill] }),
   dependencies: ["@saltcorn/large-language-model"],
+  routes: () => [
+    {
+      url: "/bootstrap-prompt-theme/chat",
+      method: "post",
+      callback: chatRoute,
+    },
+    {
+      url: "/bootstrap-prompt-theme/reset-theme",
+      method: "post",
+      callback: resetThemeRoute,
+    },
+  ],
   layout,
   configuration_workflow,
   onLoad: async (configuration) => {

package/package.json

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

package/generate_theme.js

@@ -1,75 +0,0 @@
-const { getState } = require("@saltcorn/data/db/state");
-const { join } = require("path");
-const { writeFile, readdir, unlink } = require("fs").promises;
-
-const writeOverlayCSS = async (css, filename = `overlay.${Date.now()}.css`) => {
-  const dest = join(__dirname, "public", filename);
-  await writeFile(dest, css);
-  return filename;
-};
-
-const deleteOldOverlays = async (keepFile) => {
-  const publicDir = join(__dirname, "public");
-  const files = await readdir(publicDir);
-  for (const file of files) {
-    if (/^overlay\.\d+\.css$/.test(file) && file !== keepFile)
-      await unlink(join(publicDir, file));
-  }
-};
-
-const SYSTEM_PROMPT = `You are an expert CSS theme designer for Bootstrap 5.3.
-Your task is to generate a complete CSS overlay file that reskins a standard Bootstrap 5.3 app.
-
-APPROACH:
-1. Define theme-specific custom properties in :root (colors, fonts, shadows, etc.)
-2. Override Bootstrap 5.3 CSS variables in :root using --bs-* tokens for light mode
-3. Add component-level CSS rules for deeper customisation (navbar, cards, buttons, forms, tables, alerts, badges, modals, pagination, tabs, accordions, etc.)
-4. Add a dark mode section scoped to [data-bs-theme="dark"] that overrides :root custom properties and --bs-* tokens for dark mode. Component-level rules that depend only on CSS variables will automatically adapt — only add extra component rules under [data-bs-theme="dark"] where variables alone are not sufficient.
-
-BOOTSTRAP 5.3 CSS VARIABLES to consider overriding in :root and [data-bs-theme="dark"]:
---bs-body-bg, --bs-body-color, --bs-secondary-bg, --bs-tertiary-bg,
---bs-border-color, --bs-primary, --bs-link-color, --bs-link-hover-color,
---bs-card-bg, --bs-card-border-color, --bs-card-cap-bg,
---bs-dropdown-bg, --bs-dropdown-border-color, --bs-dropdown-link-color,
---bs-dropdown-link-hover-bg, --bs-dropdown-link-active-bg,
---bs-table-color, --bs-table-bg, --bs-table-border-color, --bs-table-hover-bg,
---bs-modal-bg, --bs-modal-border-color,
---bs-tooltip-bg, --bs-tooltip-color,
---bs-body-font-family, --bs-body-font-size
-
-COMPONENTS to style: body, navbar (.navbar, .navbar-brand, .nav-link), cards (.card, .card-header, .card-footer, .card-title), buttons (.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-success), forms (.form-control, .form-select, .form-label, .form-check-input), tables (.table, .table th, .table td), alerts (.alert-*), badges (.badge), modals (.modal-content, .modal-header), pagination (.page-link), tabs (.nav-tabs), links (a), headings (h1-h6), code/pre, hr, scrollbar.
-
-DARK MODE STRUCTURE:
-:root { /* light mode theme variables and --bs-* overrides */ }
-/* component rules */
-[data-bs-theme="dark"] { /* dark mode theme variables and --bs-* overrides */ }
-/* any extra component rules needed only in dark mode, prefixed with [data-bs-theme="dark"] */
-
-CRITICAL RULES — never break these:
-- Never set overflow:hidden or overflow:clip on ANY element — not on .navbar, .card, .card-body, .card-header, .card-footer, section, #wrapper, #page-inner-content, #content-wrapper, .container, .page-section, or any other element. Bootstrap's Popper.js positions dropdowns with position:absolute outside their parent bounds; overflow:hidden on any ancestor will clip them.
-- Always set .navbar { position: relative; z-index: 1030; } to ensure navbar dropdowns render above all page content.
-- Never apply transform, filter, backdrop-filter, will-change, or perspective to .card, .card-body, .card-header, .card-footer, .container, .page-section, section, #wrapper, or any page-level container. These CSS properties create a new stacking context that can rise above the navbar and obscure its open dropdowns.
-- Never set z-index on .card or page content elements — stacking context on page content is what causes navbar dropdowns to be obscured.
-- Do not override --bs-zindex-dropdown, --bs-zindex-fixed, or .dropdown-menu z-index.
-- Dropdowns must always be fully visible and on top of all other page content, including cards, sections, and containers.
-
-OUTPUT: Only valid CSS. No explanations. No markdown. No code fences. Start directly with /* theme comment */ or :root {`;
-
-const generateThemeCSS = async (prompt) => {
-  const state = getState();
-  if (!state.functions?.llm_generate) {
-    state.log(
-      5,
-      "bootstrap-prompt-theme: llm_generate not available, is large-language-model installed?"
-    );
-    return null;
-  }
-  console.log("bootstrap-prompt-theme: generating theme from prompt...");
-  const result = await state.functions.llm_generate.run(prompt, {
-    systemPrompt: SYSTEM_PROMPT,
-  });
-  state.log(6, `bootstrap-prompt-theme: LLM result: ${result}`);
-  return result || null;
-};
-
-module.exports = { generateThemeCSS, writeOverlayCSS, deleteOldOverlays };