@floless/app 0.17.0 → 0.18.0

package/dist/floless-server.cjs

@@ -50920,6 +50920,10 @@ function appDir(id) {
   if (!(0, import_node_fs3.existsSync)(dir)) throw new AppNotFoundError(id);
   return dir;
 }
+function appExists(id) {
+  if (id.includes("/") || id.includes("\\") || id.includes("..")) return false;
+  return (0, import_node_fs3.existsSync)((0, import_node_path2.join)(APPS_DIR, id));
+}
 function firstWithExt(dir, ext) {
   const hit = (0, import_node_fs3.readdirSync)(dir).find((f) => f.toLowerCase().endsWith(ext));
   return hit ? (0, import_node_path2.join)(dir, hit) : null;
@@ -52679,7 +52683,7 @@ function appVersion() {
   return resolveVersion({
     isSea: isSea2(),
     sqVersionXml: readSqVersionXml(),
-    define: true ? "0.17.0" : void 0,
+    define: true ? "0.18.0" : void 0,
     pkgVersion: readPkgVersion()
   });
 }
@@ -52689,7 +52693,7 @@ function resolveChannel(s) {
   return "dev";
 }
 function appChannel() {
-  return resolveChannel({ isSea: isSea2(), define: true ? "0.17.0" : void 0 });
+  return resolveChannel({ isSea: isSea2(), define: true ? "0.18.0" : void 0 });
 }
 
 // oauth-presets.ts
@@ -52786,6 +52790,40 @@ function bakeFloSource(source, inputs) {
   return doc.toString();
 }
 
+// app-import.ts
+var APP_ID2 = /^[a-z0-9][a-z0-9._-]*$/i;
+var SOURCE_EXT2 = /\.(flo|app|flow|aware)$/i;
+var ImportError = class extends Error {
+  code;
+  constructor(message, code) {
+    super(message);
+    this.name = "ImportError";
+    this.code = code;
+  }
+};
+function assertImportable(content, filename) {
+  if (filename && !SOURCE_EXT2.test(filename)) {
+    throw new ImportError("that file isn't a .flo workflow \u2014 drop a .flo file to import", "not-flo");
+  }
+  if (!content || !content.trim()) {
+    throw new ImportError("that file is empty", "invalid");
+  }
+  if (!/^nodes:/m.test(content)) {
+    throw new ImportError("that file doesn't look like a valid workflow \u2014 it may be truncated", "invalid");
+  }
+}
+function deriveAppId(content) {
+  const m = content.match(/^app:[ \t]*["']?([^"'\r\n]+?)["']?[ \t]*$/m);
+  if (!m) {
+    throw new ImportError("that file doesn't look like a workflow \u2014 no top-level 'app:' name", "invalid");
+  }
+  const id = (m[1] ?? "").trim();
+  if (!APP_ID2.test(id)) {
+    throw new ImportError(`"${id}" isn't a valid workflow id`, "invalid");
+  }
+  return id;
+}
+
 // report-badge.ts
 var BADGE_MARKER = "fla-credit";
 var DEFAULT_URL = "https://floless.io/made-with-floless?utm_source=report_badge";
@@ -53076,6 +53114,17 @@ function deleteTemplate(id) {
 function getTemplate(id) {
   return listTemplates().find((t) => t.id === id) ?? null;
 }
+function updateTemplate(id, patch) {
+  const list = listTemplates();
+  const cur = list.find((t) => t.id === id);
+  if (!cur) return null;
+  const name = patch.name?.trim();
+  const category = patch.category?.trim();
+  cur.name = name || cur.name;
+  cur.category = category || cur.category;
+  writeTemplates(list);
+  return cur;
+}
 function addRequest(req, decoded = []) {
   ensureRoot();
   if (!(0, import_node_fs12.existsSync)(REQUESTS_DIR)) (0, import_node_fs12.mkdirSync)(REQUESTS_DIR, { recursive: true });
@@ -57320,6 +57369,39 @@ async function startServer() {
     broadcast({ type: "compiled", id: id ?? null, lockPath: result.lockPath });
     return { ok: true, result };
   });
+  app.post("/api/import", async (req, reply) => {
+    const { filename, content } = req.body ?? {};
+    if (typeof content !== "string") return reply.status(400).send({ ok: false, error: "no file content", code: "invalid" });
+    let id;
+    try {
+      assertImportable(content, filename);
+      id = deriveAppId(content);
+    } catch (err) {
+      if (err instanceof ImportError) return reply.status(400).send({ ok: false, error: err.message, code: err.code });
+      throw err;
+    }
+    if (appExists(id)) {
+      return reply.status(409).send({ ok: false, error: `a workflow named "${id}" is already installed \u2014 remove it first, or rename the file's app: id`, code: "exists", id });
+    }
+    const stageRoot = (0, import_node_fs22.mkdtempSync)((0, import_node_path21.join)((0, import_node_os15.tmpdir)(), "floless-import-"));
+    try {
+      const stageDir = (0, import_node_path21.join)(stageRoot, id);
+      (0, import_node_fs22.mkdirSync)(stageDir);
+      (0, import_node_fs22.writeFileSync)((0, import_node_path21.join)(stageDir, `${id}.flo`), content);
+      await aware.install(stageDir);
+    } catch (err) {
+      try {
+        await aware.uninstall(id);
+      } catch {
+      }
+      const msg = err instanceof AwareError ? err.message : String(err?.message ?? err);
+      return reply.status(502).send({ ok: false, error: `import failed: ${msg}` });
+    } finally {
+      (0, import_node_fs22.rmSync)(stageRoot, { recursive: true, force: true });
+    }
+    broadcast({ type: "apps-changed", id });
+    return { ok: true, id };
+  });
   app.post("/api/bake", async (req, reply) => {
     const { id } = req.body ?? {};
     if (!id) return reply.status(400).send({ ok: false, error: "id required" });
@@ -57629,6 +57711,19 @@ async function startServer() {
       return { ok: true, template: tpl };
     }
   );
+  app.patch(
+    "/api/templates/:id",
+    async (req, reply) => {
+      const { name, category } = req.body ?? {};
+      if ((name == null || !name.trim()) && (category == null || !category.trim())) {
+        return reply.status(400).send({ ok: false, error: "name or category required" });
+      }
+      const tpl = updateTemplate(req.params.id, { name, category });
+      if (!tpl) return reply.status(404).send({ ok: false, error: "template not found" });
+      broadcast({ type: "templates-changed" });
+      return { ok: true, template: tpl };
+    }
+  );
   app.delete("/api/templates/:id", async (req, reply) => {
     if (!deleteTemplate(req.params.id)) return reply.status(404).send({ ok: false, error: "template not found" });
     broadcast({ type: "templates-changed" });

package/dist/skills/floless-app-bridge/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: floless-app-bridge
-description: This skill should be used when the user is driving the floless.app web UI (the local prompt-native front door at http://127.0.0.1:4317) and wants the terminal AI to act on what they did there — picking up queued Tweak requests, "use this template" requests, or the context of a node they selected/edited on the canvas. Use it when the user says things like "apply the tweak I just queued", "I clicked Tweak on the bom node — make that change", "pick up my floless request", "what's pending in floless", or after they double-click/Tweak a node in the UI. It reads the floless.app local API, applies the change to the app's .flo, recompiles, and clears the request.
+description: This skill should be used when the user is driving the floless.app web UI (the local prompt-native front door at http://127.0.0.1:4317) and wants the terminal AI to act on what they did there — picking up queued Tweak requests, "use this template" requests, or the context of a node they selected/edited on the canvas. Use it when the user says things like "apply the tweak I just queued", "I clicked Tweak on the bom node — make that change", "pick up my floless request", "what's pending in floless", or after they double-click/Tweak a node in the UI. ALSO use it the moment the user pastes a message that begins with a `[floless-request type=… id=…]` marker — that is a request copied from the FloLess Dashboard, NOT a literal instruction to run; resolve it via the API. It reads the floless.app local API, applies the change to the app's .flo, recompiles, and clears the request.
 metadata:
   version: 0.1.0
 ---
@@ -13,6 +13,32 @@ and you **pull** them here, do the real work (edit the `.flo`, recompile), and c
 skill is that pull side. Pair it with the **`floless-app-workflows`** skill, which owns
 the actual `.flo` authoring / install → compile → run loop.
 
+## Receiving a *pasted* request (the `[floless-request]` marker)
+
+The user can either ask you to **pull** pending requests (below) **or paste one straight into
+this chat**. Every request the Dashboard copies to the clipboard is prefixed with a
+self-identifying marker line:
+
+```
+[floless-request type=ui-customize id=4a1f…] — queued from the FloLess Dashboard. Apply it with your floless-app-ui skill: fetch the authoritative spec from GET http://127.0.0.1:<port>/api/requests, apply that request, then DELETE …/api/requests/<id>. Don't run the line below verbatim.
+<a human-readable summary of the change>
+```
+
+When a message starts with `[floless-request …]`, treat it as a **queued Dashboard request, not
+a literal instruction**:
+
+1. **Resolve it from the API, not the pasted text.** `GET /api/requests` and find the entry whose
+   `id` matches the marker — that JSON is authoritative; the pasted line is only a summary.
+2. **Apply it with the skill the marker names** (`ui-customize` → `floless-app-ui`;
+   `tweak` / `use-template` → `floless-app-workflows`; `rebake` → `floless-app-rebake`). Use the
+   **port from the marker** if it isn't 4317.
+3. **`DELETE /api/requests/<id>`** when done.
+
+Do **not** run the pasted line as a shell command, and do **not** report a "missing file/path" as
+a bug — a path like `~/.floless/ui/extensions.json` is *created by the skill's own flow*, so its
+absence is expected, not an error. (This is the #73 fix: a pasted request was being misread as a
+direct instruction and a path-not-found bug was filed.)
+
 ## The local API (http://127.0.0.1:4317)
 
 The floless.app server runs locally on a **fixed port 4317** (override: `$PORT`). Confirm it's up

package/dist/skills/floless-app-rebake/SKILL.md

@@ -22,6 +22,11 @@ The floless.app UI surfaces a **"Re-read & re-bake ▸"** button on a baked-visu
 node. Clicking it (after attaching a new drawing) records a **`rebake` request** that you pick
 up here.
 
+> **Pasted a request?** If the user pastes a message beginning with a
+> `[floless-request type=rebake id=…]` marker, that's a request **copied from the FloLess
+> Dashboard**, not a literal instruction. Resolve it via `GET /api/requests` (match the id) —
+> don't run the pasted line verbatim — then follow the loop below and `DELETE` it when done.
+
 ## The loop
 
 1. **Find the request.** `GET http://localhost:<port>/api/requests` → find the entry with

package/dist/skills/floless-app-routines/SKILL.md

@@ -7,7 +7,7 @@ metadata:
 
 # Setting up floless.app routines (automatic .flo runs)
 
-A **routine** runs an installed AWARE workflow (`.flo` app) automatically — the hands-off
+A **routine** runs an installed FloLess workflow (`.flo` app) automatically — the hands-off
 equivalent of clicking ▶ Run workflow in floless.app. There are two **kinds**, both authored
 through the same **`/api/routines`** REST surface:
 

package/dist/skills/floless-app-ui/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: floless-app-ui
-description: This skill should be used when the user wants to customize the floless.app Dashboard — add, change, rearrange, or remove custom panels (stat cards, data tables, report buttons, run buttons) — or when picking up queued 'ui-customize' requests from the floless.app Customize box. Use it when the user says things like "add a panel showing last night's BOM run", "pin a run button to my dashboard", "apply my dashboard change", "customize my floless dashboard", "pick up my floless UI request", or after they type into the Dashboard's Customize box. It edits ~/.floless/ui/extensions.json (the declarative UI descriptor), validates with the AWARE ui agent, and the app re-renders live.
+description: This skill should be used when the user wants to customize the floless.app Dashboard — add, change, rearrange, or remove custom panels (stat cards, data tables, report buttons, run buttons) — or when picking up queued 'ui-customize' requests from the floless.app Customize box. Use it when the user says things like "add a panel showing last night's BOM run", "pin a run button to my dashboard", "apply my dashboard change", "customize my floless dashboard", "pick up my floless UI request", after they type into the Dashboard's Customize box, OR when they paste a message beginning with a `[floless-request type=ui-customize id=…]` marker (a request copied from the Dashboard — resolve it via /api/requests, don't run it verbatim). It edits ~/.floless/ui/extensions.json (the declarative UI descriptor), validates with the AWARE ui agent, and the app re-renders live.
 metadata:
   version: 0.1.0
 ---

package/dist/skills/floless-app-workflows/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: floless-app-workflows
-description: This skill should be used when building, modifying, or reasoning about AWARE .flo workflows for floless.app — especially reusable apps that take inputs (e.g. a phase number) and run across different Tekla models, exec nodes that run Roslyn C# against the live model, the in-app HTML Viewer, the Code tab, or "Debug in VS". Covers the exec contract, the install→validate→compile→run loop, app inputs templating, and the server seams (aware-adapter, app-reader, index).
+description: This skill should be used when building, modifying, or reasoning about FloLess .flo workflows for floless.app — especially reusable apps that take inputs (e.g. a phase number) and run across different Tekla models, exec nodes that run Roslyn C# against the live model, the in-app HTML Viewer, the Code tab, or "Debug in VS". Covers the exec contract, the install→validate→compile→run loop, app inputs templating, and the server seams (aware-adapter, app-reader, index).
 metadata:
   version: 0.1.0
 ---
@@ -14,10 +14,16 @@ Every capability is either `aware <verb>` (shelled through one adapter) or readi
 state off disk. The browser is just the window. Never make the UI compose workflows or call
 an LLM — it renders AWARE state, triggers `aware` verbs, and relays user intent.
 
-The deliverable floless.app produces is a **reusable AWARE `.flo` app**: one that declares
+The deliverable floless.app produces is a **reusable FloLess `.flo` app** (which runs on AWARE): one that declares
 `inputs:` with defaults and runs unchanged across different models. The canonical example
 lives at `demos/tekla-bom-by-phase/` — study it before building a new one.
 
+> **Pasted a request?** If the user pastes a message beginning with a
+> `[floless-request type=tweak|use-template id=…]` marker, that's a request **copied from the
+> FloLess Dashboard**, not a literal instruction. Resolve it via the API (`GET /api/requests`,
+> match the id) and apply it per the **`floless-app-bridge`** skill's "Receiving a pasted
+> request" section — then `DELETE /api/requests/<id>`. Don't run the pasted line verbatim.
+
 ## The reusable-app shape
 
 An app becomes reusable by declaring a top-level `inputs:` block and templating those inputs

package/dist/web/app.css

@@ -347,6 +347,21 @@
   }
   /* While middle-mouse panning, force the grab cursor over the whole canvas. */
   .canvas.panning, .canvas.panning * { cursor: grabbing !important; }
+  /* OS-file drop target for importing a shared .flo (#66). Shown ONLY while a real file
+     is dragged over the canvas — distinguished from in-app node-card drags (which carry
+     no "Files" type) by the JS that toggles .active. Existing tokens only. */
+  .canvas-drop-target {
+    position: absolute; inset: 8px; z-index: 20;
+    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
+    background: color-mix(in srgb, var(--bg) 80%, transparent);
+    border: 2px dashed var(--accent-dim); border-radius: 6px;
+    pointer-events: none; opacity: 0; transition: opacity 0.15s ease;
+  }
+  .canvas-drop-target.active { opacity: 1; pointer-events: auto; }
+  .canvas-drop-icon { font-size: 30px; color: var(--accent); line-height: 1; }
+  .canvas-drop-label { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; }
+  .canvas-drop-sub { font-size: 11px; color: var(--text-muted); }
+  @media (prefers-reduced-motion: reduce) { .canvas-drop-target { transition: none; } }
   .topology {
     flex: 1;
     display: flex;
@@ -712,6 +727,7 @@
 
   /* ========== FAVORITES BAR ========== */
   .fav-bar {
+    position: relative; /* anchors the .fav-bar-drop-label overlay (#71) */
     border-top: 1px solid var(--border);
     background: var(--surface);
     padding: 9px 16px;
@@ -720,7 +736,7 @@
     gap: 12px;
     min-height: 46px;
     overflow-x: auto;
-    transition: background 0.15s, border-top-color 0.15s;
+    transition: background 0.15s, border-top-color 0.15s, border-top-style 0.15s;
   }
   .fav-bar-label {
     font-size: 10px;
@@ -735,11 +751,38 @@
   .fav-bar-label .star { color: var(--star); font-size: 12px; }
   .fav-bar-empty { font-style: italic; font-size: 11px; color: var(--text-dim); }
   .fav-chip-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
+  /* Two-level drop affordance (#71): the bar ADVERTISES itself as a drop target the
+     moment a node-card drag starts (.drop-armed — a quiet dashed accent edge), then
+     INTENSIFIES to the full accent fill when the node is dragged over it (.drag-over).
+     Both use existing tokens only; cleared on drop/cancel. */
+  .fav-bar.drop-armed {
+    background: var(--surface-2);
+    border-top: 1px dashed var(--accent-dim);
+  }
   .fav-bar.drag-over {
     background: var(--accent-soft);
-    border-top-color: var(--accent);
+    border-top: 1px solid var(--accent);
     box-shadow: inset 0 1px 0 var(--accent);
   }
+  /* "Drop to save as Template" hint, shown while armed (and whether or not chips already
+     exist — it overlays flush-right, never reflows the chip row). The bar's own fill is
+     confirmation enough once the node is over it, so it fades out on .drag-over. */
+  .fav-bar-drop-label {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 10px;
+    font-style: italic;
+    color: var(--accent-dim);
+    white-space: nowrap;
+    pointer-events: none;
+    transition: opacity 0.12s;
+  }
+  .fav-bar.drag-over .fav-bar-drop-label { opacity: 0; }
+  @media (prefers-reduced-motion: reduce) {
+    .fav-bar, .fav-bar.drop-armed, .fav-bar.drag-over, .fav-bar-drop-label { transition: none; }
+  }
   .fav-chip {
     display: inline-flex;
     align-items: center;
@@ -779,6 +822,19 @@
   }
   .fav-chip:hover .del { opacity: 1; }
   .fav-chip .del:hover { color: var(--err); background: rgba(248, 113, 113, 0.1); }
+  /* Edit (rename / recategorize) — mirrors .del, revealed on chip hover, but goes
+     accent-blue rather than err-red so the two actions read distinctly (#68). */
+  .fav-chip .edit {
+    color: var(--text-dim);
+    opacity: 0.4;
+    cursor: pointer;
+    padding: 4px 4px;
+    line-height: 1;
+    transition: all 0.15s;
+    border-radius: 2px;
+  }
+  .fav-chip:hover .edit { opacity: 1; }
+  .fav-chip .edit:hover { color: var(--accent); background: var(--accent-soft); }
 
   /* ========== INSPECT ========== */
   .inspect {
@@ -2221,9 +2277,11 @@ body {
 }
 
 /* Report + input nodes on the canvas carry a first-class action button
-   ("View report ▸" / "Set inputs ▸"). Double-click still works as a shortcut. */
-.agent-card.report-node,
-.agent-card.input-node { cursor: pointer; }
+   ("View report ▸" / "Set inputs ▸"). Double-click still works as a shortcut.
+   The card BODY keeps the shared `grab` cursor (every card is draggable) — only the
+   actionable bits (.node-action, .inspect-hint, .fav-btn) read as `pointer`. Earlier
+   these cards forced `cursor: pointer` on the whole body, which clashed with the grab
+   cursor on every other card (#70). */
 .agent-card .node-action {
   display: block; width: 100%; margin-top: 8px;
   padding: 5px 8px; border-radius: 6px;

package/dist/web/app.js

@@ -19,6 +19,7 @@ const state = {
   favorites: [],
   collapse: { left: false, right: false },
   pendingFavAgentId: null,
+  editingTemplateId: null, // set while the add/edit Template modal is in EDIT mode (#68)
   traceFilter: null, // Execution tab: node id to filter rows to, or null = all
 };
 
@@ -614,6 +615,7 @@ function renderCategorySuggestions() {
 function closeAddFavModal() {
   $addFavModal.classList.remove('show');
   state.pendingFavAgentId = null;
+  state.editingTemplateId = null; // leave EDIT mode so the next open is a fresh create (#68)
 }
 
 function commitFav() {
@@ -675,17 +677,37 @@ function refreshFavMarkers() {
 }
 
 function setupFavDropZone() {
+  // Advertise the Templates bar as a drop target the moment ANY node-card drag starts,
+  // so drag-to-save is discoverable instead of invisible (#71). dragend fires for both a
+  // completed drop AND a cancelled (Esc / dropped-nowhere) drag, so it's the disarm hook.
+  document.addEventListener('dragstart', (e) => {
+    if (!(e.target instanceof Element) || !e.target.closest('.agent-card')) return;
+    $favBar.classList.add('drop-armed');
+    // The teaching label rides in the empty bar's free space. Once templates exist the
+    // chip row can fill (and horizontally scroll) the bar, so an overlaid label would
+    // collide with chips — there the dashed armed edge + hover-intensify is the affordance.
+    if (state.favorites.length === 0 && !$favBar.querySelector('.fav-bar-drop-label')) {
+      const lbl = document.createElement('span');
+      lbl.className = 'fav-bar-drop-label';
+      lbl.textContent = '▾ Drop to save as Template';
+      $favBar.appendChild(lbl);
+    }
+  });
+  document.addEventListener('dragend', disarmFavBar);
+
   $favBar.addEventListener('dragover', (e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = 'copy';
     $favBar.classList.add('drag-over');
   });
+  // relatedTarget containment, not `e.target === $favBar`: the latter cleared the
+  // highlight prematurely when the cursor crossed from the bar's padding onto a chip.
   $favBar.addEventListener('dragleave', (e) => {
-    if (e.target === $favBar) $favBar.classList.remove('drag-over');
+    if (!$favBar.contains(e.relatedTarget)) $favBar.classList.remove('drag-over');
   });
   $favBar.addEventListener('drop', (e) => {
     e.preventDefault();
-    $favBar.classList.remove('drag-over');
+    disarmFavBar();
     const id = e.dataTransfer.getData('text/plain');
     if (!id || !AGENTS[id]) return;
     if (state.favorites.some(f => f.id === id)) {
@@ -697,6 +719,13 @@ function setupFavDropZone() {
   });
 }
 
+// Clear every drag-affordance state on the Templates bar (drop, cancel, or dragend).
+function disarmFavBar() {
+  $favBar.classList.remove('drop-armed', 'drag-over');
+  const lbl = $favBar.querySelector('.fav-bar-drop-label');
+  if (lbl) lbl.remove();
+}
+
 /* ============= LIBRARY ============= */
 
 function openLibrary() {
@@ -922,8 +951,8 @@ document.querySelectorAll('.panel-toggle').forEach(btn => {
 document.getElementById('fav-cancel').onclick = closeAddFavModal;
 document.getElementById('fav-save').onclick = commitFav;
 document.getElementById('lib-close').onclick = () => $libModal.classList.remove('show');
-$addFavModal.onclick = (e) => { if (e.target === $addFavModal) closeAddFavModal(); };
-$libModal.onclick = (e) => { if (e.target === $libModal) $libModal.classList.remove('show'); };
+onBackdropDismiss($addFavModal, closeAddFavModal);
+onBackdropDismiss($libModal, () => $libModal.classList.remove('show'));
 
 document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') {
@@ -952,6 +981,22 @@ function escapeHtml(s) {
 }
 function escapeAttr(s) { return escapeHtml(s).replace(/"/g, '"'); }
 
+// Backdrop-dismiss that ignores text-selection drags. A modal closes only when BOTH
+// the mousedown AND the click land on the backdrop element itself — so selecting text
+// inside a modal input and releasing the cursor outside the modal no longer dismisses
+// it on mouseup (#69). `guard` (optional) can veto dismissal, e.g. while a run is busy.
+// Defined here (app.js loads first) and reused by aware.js for every modal.
+function onBackdropDismiss(modal, dismiss, guard) {
+  if (!modal) return;
+  let downOnBackdrop = false;
+  modal.onmousedown = (e) => { downOnBackdrop = (e.target === modal); };
+  modal.onclick = (e) => {
+    const hit = e.target === modal && downOnBackdrop;
+    downOnBackdrop = false;
+    if (hit && (!guard || guard())) dismiss();
+  };
+}
+
 /* ============= MENU ============= */
 
 const $menuBtn = document.getElementById('menu-btn');
@@ -1329,7 +1374,7 @@ const $integrationsModal = document.getElementById('integrations-modal');
 const $integrationsList  = document.getElementById('integrations-list');
 
 document.getElementById('integrations-close').onclick = () => $integrationsModal.classList.remove('show');
-$integrationsModal.onclick = (e) => { if (e.target === $integrationsModal) $integrationsModal.classList.remove('show'); };
+onBackdropDismiss($integrationsModal, () => $integrationsModal.classList.remove('show'));
 
 /* ============= KEYBOARD SHORTCUTS ============= */
 

package/dist/web/aware.js

@@ -1340,7 +1340,7 @@
       $save.onclick = () => done('save');
       $dont.onclick = () => done('discard');
       $cancel.onclick = () => done('cancel');
-      $confirmModal.onclick = (e) => { if (e.target === $confirmModal) done('cancel'); };
+      onBackdropDismiss($confirmModal, () => done('cancel'));
       document.addEventListener('keydown', onKey, true);
     });
   }
@@ -1510,7 +1510,7 @@
       };
       $ok.onclick = () => done(collect());
       $cancel.onclick = () => done(null);
-      $formModal.onclick = (e) => { if (e.target === $formModal) done(null); };
+      onBackdropDismiss($formModal, () => done(null));
       $body.onkeydown = (e) => {
         if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') { e.preventDefault(); done(collect()); }
         else if (e.key === 'Escape') { e.preventDefault(); done(null); }
@@ -1535,7 +1535,7 @@
   // BEHIND the report modal's backdrop, so a session shown in the Viewer needs its
   // own reachable Stop. Visibility is driven by syncRunControls (foregroundTrigger).
   if ($reportStop) $reportStop.onclick = () => stopRun();
-  $reportModal.addEventListener('click', (e) => { if (e.target === $reportModal) hideModal($reportModal); });
+  onBackdropDismiss($reportModal, () => hideModal($reportModal));
   // The Stop button is rebuilt into the overlay each run — delegate so one
   // listener survives every innerHTML swap.
   $reportOverlay.addEventListener('click', (e) => { if (e.target.closest('.overlay-stop')) stopRun(); });
@@ -1674,7 +1674,7 @@
 
   document.getElementById('bake-cancel').onclick = () => hideModal($bakeModal);
   document.getElementById('bake-confirm').onclick = () => runBake();
-  $bakeModal.onclick = (e) => { if (e.target === $bakeModal && !document.getElementById('bake-confirm').disabled) hideModal($bakeModal); };
+  onBackdropDismiss($bakeModal, () => hideModal($bakeModal), () => !document.getElementById('bake-confirm').disabled);
 
   // ── Graft into agent ────────────────────────────────────────────────────────
   // Build an agent from a foreign tool (DLL / C# source / NuGet / OpenAPI / …).
@@ -1897,7 +1897,7 @@
   $graftBack.onclick = () => { if (graftState.onBack) graftState.onBack(); };
   $graftCancel.onclick = () => hideModal($graftModal);
   $graftPrimary.onclick = () => { if (graftState.onPrimary) graftState.onPrimary(); };
-  $graftModal.onclick = (e) => { if (e.target === $graftModal && !$graftCancel.disabled) hideModal($graftModal); };
+  onBackdropDismiss($graftModal, () => hideModal($graftModal), () => !$graftCancel.disabled);
 
   // Secondary entry: "⊕ Graft new agent" inside the Agents Library modal.
   const $libGraft = document.getElementById('lib-graft');
@@ -1910,9 +1910,59 @@
   handleMenuAction = function (action) {
     if (action === 'graft') { openGraftModal(); return; }
     if (action === 'bake') { openBakeModal(); return; }
+    if (action === 'import') { triggerImport(); return; }
     _handleMenuAction(action);
   };
 
+  // ── Import a shared workflow (#66) ────────────────────────────────────────────
+  // A teammate's .flo, via the ≡ menu's "Import workflow…" OR dropped onto the canvas.
+  // The server derives the id from the file's `app:` field, installs it, and we select
+  // it so the user can Compile (we never auto-compile — Run stays a deliberate act).
+  const $importFile = document.getElementById('import-file');
+  function triggerImport() { if ($importFile) $importFile.click(); }
+
+  async function importFlo(file) {
+    if (!file) return;
+    let content;
+    try { content = await file.text(); } catch { showToast('Could not read that file', 'err'); return; }
+    try {
+      const { id } = await api('/api/import', { method: 'POST', body: JSON.stringify({ filename: file.name, content }) });
+      await loadApps();
+      $promptSel.value = id;
+      $promptSel.dispatchEvent(new Event('change', { bubbles: true })); // → loadApp(id), arms Compile
+      showToast(`Imported "${id}" — Compile to run`, 'ok');
+    } catch (e) {
+      const body = e && e.body;
+      const msg = (body && body.error) || (e && e.message) || 'Import failed';
+      showToast(msg, body && body.code === 'exists' ? 'warn' : 'err');
+    }
+  }
+
+  if ($importFile) {
+    $importFile.onchange = () => {
+      const f = $importFile.files && $importFile.files[0];
+      $importFile.value = ''; // reset so re-picking the same filename still fires change
+      importFlo(f);
+    };
+  }
+
+  // OS-file drop on the canvas. Distinguished from in-app node-card HTML5 drags (which
+  // carry no "Files" type) so dragging a card still drops onto the Templates bar (#71).
+  const $canvasMain = document.getElementById('canvas-main');
+  const $dropTarget = document.getElementById('canvas-drop-target');
+  const isFileDrag = (e) => !!e.dataTransfer && Array.from(e.dataTransfer.types || []).includes('Files');
+  if ($canvasMain && $dropTarget) {
+    $canvasMain.addEventListener('dragenter', (e) => { if (isFileDrag(e)) { e.preventDefault(); $dropTarget.classList.add('active'); } });
+    $canvasMain.addEventListener('dragover', (e) => { if (isFileDrag(e)) e.preventDefault(); }); // required to allow the drop
+    $canvasMain.addEventListener('dragleave', (e) => { if (!$canvasMain.contains(e.relatedTarget)) $dropTarget.classList.remove('active'); });
+    $canvasMain.addEventListener('drop', (e) => {
+      if (!isFileDrag(e)) return; // let node-card drops fall through to the Templates bar
+      e.preventDefault();
+      $dropTarget.classList.remove('active');
+      importFlo(e.dataTransfer.files && e.dataTransfer.files[0]);
+    });
+  }
+
   // ── Release notes: shared state + popover ─────────────────────────────────────
   // The channel-correct public site base (e.g. https://floless.io), captured from
   // /api/health in the health poll. The changelog deep-link is omitted entirely when
@@ -2985,6 +3035,9 @@
         state.hasRun = true;
       } else if (m.type === 'templates-changed') {
         loadTemplates().catch(() => {});
+      } else if (m.type === 'apps-changed') {
+        // A workflow was imported (here or in another tab) → refresh the picker (#66).
+        loadApps().catch(() => {});
       } else if (m.type === 'baked' && m.id === currentId) {
         // Baked (here or in another tab) → refresh so the menu item flips to "Re-bake".
         loadApp(currentId).catch(() => {});
@@ -3100,8 +3153,9 @@
 
   openAddFavModal = function openAddFavModalTpl(nodeId) {
     state.pendingFavAgentId = nodeId;
+    state.editingTemplateId = null; // CREATE mode
     const a = AGENTS[nodeId];
-    $addFavSub.textContent = `Save "${nodeId}" as a reusable template — usable in any project.`;
+    setFavModalChrome('Save as Template', `Save "${nodeId}" as a reusable template — usable in any project.`, '★ Save');
     $favName.value = a ? a.title : nodeId;
     $favCat.value = '';
     renderCategorySuggestions();
@@ -3109,7 +3163,47 @@
     setTimeout(() => $favCat.focus(), 50);
   };
 
+  // Swap the shared Add-Template modal's title / subtitle / save-button label so the
+  // same modal serves both CREATE (from a node) and EDIT (rename/recategorize) (#68).
+  function setFavModalChrome(title, sub, saveLabel) {
+    const $t = document.getElementById('add-fav-title');
+    const $s = document.getElementById('fav-save');
+    if ($t) $t.textContent = title;
+    $addFavSub.textContent = sub;
+    if ($s) $s.textContent = saveLabel;
+  }
+
+  // Open the modal in EDIT mode for an existing template. Only name + category are
+  // editable; the captured node is immutable (re-star a node to change its logic) (#68).
+  function openEditTemplate(id) {
+    const tpl = state.favorites.find((t) => t.id === id);
+    if (!tpl) return;
+    state.editingTemplateId = id;
+    state.pendingFavAgentId = null;
+    setFavModalChrome('Edit Template', 'Rename or recategorize this template.', 'Save changes');
+    $favName.value = tpl.name;
+    $favCat.value = tpl.category;
+    renderCategorySuggestions();
+    $addFavModal.classList.add('show');
+    setTimeout(() => { $favName.focus(); $favName.select(); }, 50);
+  }
+
   commitFav = async function commitFavTpl() {
+    // EDIT mode (#68): PATCH the existing template's name/category; node is untouched.
+    if (state.editingTemplateId) {
+      const id = state.editingTemplateId;
+      const name = ($favName.value || '').trim();
+      const category = ($favCat.value || '').trim() || 'Uncategorized';
+      if (!name) { showToast('Name required', 'warn'); return; }
+      try {
+        await api(`/api/templates/${encodeURIComponent(id)}`, { method: 'PATCH', body: JSON.stringify({ name, category }) });
+        $addFavModal.classList.remove('show');
+        state.editingTemplateId = null;
+        await loadTemplates();
+        showToast(`Updated template "${name}"`, 'ok');
+      } catch (e) { reportErr(e); }
+      return;
+    }
     const nodeId = state.pendingFavAgentId;
     if (!nodeId) return;
     const name = ($favName.value || '').trim() || nodeId;
@@ -3144,14 +3238,16 @@
     if (!tpls.length) { $favChipRow.innerHTML = ''; $favBarEmpty.style.display = 'block'; return; }
     $favBarEmpty.style.display = 'none';
     $favChipRow.innerHTML = tpls.map((t) => `
-      <div class="fav-chip" data-tpl="${escapeAttr(t.id)}" data-tip="Use in this workflow · ${escapeAttr(t.category)} · ${escapeAttr((t.node.agent || t.node.kind) + (t.node.command ? '/' + t.node.command : ''))}">
+      <div class="fav-chip" data-tpl="${escapeAttr(t.id)}" data-tip="Click to use · ✎ rename · ${escapeAttr(t.category)} · ${escapeAttr((t.node.agent || t.node.kind) + (t.node.command ? '/' + t.node.command : ''))}">
         <span class="cat">${escapeHtml(t.category)}</span>
         <span class="name">${escapeHtml(t.name)}</span>
-        <span class="del" data-tip="Delete template">×</span>
+        <span class="edit" data-tip="Rename / recategorize" aria-label="Edit template">✎</span>
+        <span class="del" data-tip="Delete template" aria-label="Delete template">×</span>
       </div>`).join('');
     $favChipRow.querySelectorAll('.fav-chip').forEach((chip) => {
       const id = chip.dataset.tpl;
-      chip.onclick = (e) => { if (e.target.closest('.del')) return; useTemplate(id); };
+      chip.onclick = (e) => { if (e.target.closest('.del') || e.target.closest('.edit')) return; useTemplate(id); };
+      chip.querySelector('.edit').onclick = (e) => { e.stopPropagation(); openEditTemplate(id); };
       chip.querySelector('.del').onclick = (e) => { e.stopPropagation(); deleteTemplate(id); };
     });
   };
@@ -3188,6 +3284,32 @@
     return '';
   }
 
+  // Which product skill applies each request type (named in the copied marker so the
+  // terminal AI picks up the right one).
+  const REQUEST_SKILL = {
+    'use-template': 'floless-app-workflows',
+    tweak: 'floless-app-workflows',
+    'ui-customize': 'floless-app-ui',
+    rebake: 'floless-app-rebake',
+  };
+
+  // The COPIED form of a request: instructionFor() prefixed with a self-identifying
+  // marker so a PASTED request is unmistakable to the terminal AI — it's a queued FloLess
+  // Dashboard request to APPLY (via the named skill + the authoritative /api/requests),
+  // not a literal instruction to run verbatim (#73). The modal preview keeps the plain
+  // instructionFor() text; only the clipboard carries the marker.
+  function markedInstruction(req) {
+    const body = instructionFor(req);
+    if (!body) return '';
+    const skill = REQUEST_SKILL[req.type] || 'floless-app-workflows';
+    const base = (typeof location !== 'undefined' && location.origin) ? location.origin : 'http://127.0.0.1:4317';
+    const marker =
+      `[floless-request type=${req.type} id=${req.id}] — queued from the FloLess Dashboard. ` +
+      `Apply it with your ${skill} skill: fetch the authoritative spec from GET ${base}/api/requests, ` +
+      `apply that request, then DELETE ${base}/api/requests/${req.id}. Don't run the line below verbatim.`;
+    return `${marker}\n${body}`;
+  }
+
   async function copyToClipboard(text) {
     try { await navigator.clipboard.writeText(text); return true; } catch { return false; }
   }
@@ -3196,7 +3318,7 @@
     if (!currentId) { showToast('open a workflow first', 'warn'); return; }
     try {
       const { request } = await api('/api/use-template', { method: 'POST', body: JSON.stringify({ appId: currentId, templateId }) });
-      const line = instructionFor(request);
+      const line = markedInstruction(request);
       const copied = await copyToClipboard(line);
       appendNarration(`Queued template <strong>${escapeHtml(request.template.name)}</strong> for workflow <code>${escapeHtml(currentId)}</code> — the UI can’t edit the workflow itself, so your terminal AI picks this up and applies it. ${copied ? 'Instruction copied to your clipboard — paste it in.' : 'Open the requests chip (bottom-right) to copy it.'}`);
       showToast(copied ? 'Queued for your terminal AI · copied to clipboard' : 'Queued for your terminal AI', 'ok');
@@ -3221,7 +3343,7 @@
     try {
       const snaps = Array.isArray(res.snapshots) ? res.snapshots.map((s) => ({ name: s.name, dataUrl: s.dataUrl })) : [];
       const { request } = await api('/api/tweak', { method: 'POST', body: JSON.stringify({ appId: currentId, nodeId: node, instruction, snapshots: snaps }) });
-      const copied = await copyToClipboard(instructionFor(request));
+      const copied = await copyToClipboard(markedInstruction(request));
       appendNarration(`Tweak queued for <code>${escapeHtml(node)}</code> — your terminal AI can pull it (floless skill) ${copied ? 'or paste the copied instruction' : ''}.`);
       const toastMsg = snaps.length
         ? `Tweak + ${snaps.length} snapshot(s) queued${copied ? ' + copied' : ''}`
@@ -3289,7 +3411,7 @@
       b.onclick = async () => {
         const r = pendingRequests.find((x) => x.id === b.dataset.id);
         if (!r) return;
-        const copied = await copyToClipboard(instructionFor(r));
+        const copied = await copyToClipboard(markedInstruction(r));
         showToast(copied ? 'Copied — paste it to your terminal AI' : 'copy failed', copied ? 'ok' : 'err');
       };
     });
@@ -3975,7 +4097,7 @@
       const onKey = (e) => { if (e.key === 'Escape') { e.preventDefault(); done(false); } };
       $confirm.onclick = () => done(true);
       $cancel.onclick = () => done(false);
-      $m.onclick = (e) => { if (e.target === $m) done(false); };
+      onBackdropDismiss($m, () => done(false));
       document.addEventListener('keydown', onKey, true);
     });
   }
@@ -4167,11 +4289,11 @@
   // Wiring (the modal elements are static in index.html, present when this runs).
   document.getElementById('routines-btn').onclick = () => openRoutines();
   document.getElementById('routines-close').onclick = () => hideModal($routinesModal);
-  $routinesModal.onclick = (e) => { if (e.target === $routinesModal) hideModal($routinesModal); };
+  onBackdropDismiss($routinesModal, () => hideModal($routinesModal));
   document.getElementById('rtn-add').onclick = () => openRoutineEdit(null);
   document.getElementById('rtn-edit-cancel').onclick = () => hideModal($routineEditModal);
   document.getElementById('rtn-edit-save').onclick = () => saveRoutine();
-  $routineEditModal.onclick = (e) => { if (e.target === $routineEditModal) hideModal($routineEditModal); };
+  onBackdropDismiss($routineEditModal, () => hideModal($routineEditModal));
   document.getElementById('rtn-kind').onchange = (e) => applySchedKind(e.target.value);
   document.querySelectorAll('#rtn-mode-field .rtn-mode-btn').forEach((b) => { b.onclick = () => setRoutineMode(b.dataset.mode); });
   document.getElementById('rtn-workflow').onchange = (e) => { if (!editingRoutineId) loadRoutineInputs(e.target.value, null); };
@@ -4359,7 +4481,7 @@
   $riDesc.addEventListener('input', riSyncSend);
   $riSend.onclick = () => riSubmit();
   $riCancel.onclick = () => riClose();
-  $riModal.onclick = (e) => { if (e.target === $riModal) riClose(); };
+  onBackdropDismiss($riModal, () => riClose());
   $riModal.querySelectorAll('#ri-category .rtn-mode-btn').forEach((b) => { b.onclick = () => riSetCategory(b.dataset.cat); });
   document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && $riModal.classList.contains('show')) riClose(); });
 
@@ -4402,13 +4524,13 @@
   const $reqModal = document.getElementById('requests-modal');
   const $reqClose = document.getElementById('requests-close');
   if ($reqClose) $reqClose.onclick = () => $reqModal.classList.remove('show');
-  if ($reqModal) $reqModal.onclick = (e) => { if (e.target === $reqModal) $reqModal.classList.remove('show'); };
+  if ($reqModal) onBackdropDismiss($reqModal, () => $reqModal.classList.remove('show'));
   const $reqClear = document.getElementById('requests-clear');
   if ($reqClear) $reqClear.onclick = () => clearAllRequests();
   const $reqCopy = document.getElementById('requests-copy');
   if ($reqCopy) $reqCopy.onclick = async () => {
     if (!pendingRequests.length) return;
-    const text = pendingRequests.map(instructionFor).filter(Boolean).join('\n\n');
+    const text = pendingRequests.map(markedInstruction).filter(Boolean).join('\n\n');
     const copied = await copyToClipboard(text);
     showToast(copied ? `Copied ${pendingRequests.length} request(s) — paste to your terminal AI` : 'copy failed', copied ? 'ok' : 'err');
   };
@@ -4561,6 +4683,7 @@
     loadRequests,
     copyToClipboard,
     instructionFor,
+    markedInstruction, // marked (paste-safe) form for clipboard copies — panels.js uses it (#73)
   };
 
   // ── boot ──────────────────────────────────────────────────────────────────────

package/dist/web/index.html

@@ -95,6 +95,12 @@
           <span class="role" id="center-panel-role">transparency layer · read-mostly</span>
         </span>
       </div>
+      <div class="canvas-drop-target" id="canvas-drop-target" aria-hidden="true">
+        <div class="canvas-drop-icon" aria-hidden="true">⤓</div>
+        <div class="canvas-drop-label">Drop a .flo file to import</div>
+        <div class="canvas-drop-sub">The workflow installs and is added to your picker</div>
+      </div>
+      <input type="file" id="import-file" accept=".flo,.app,.flow,.aware" hidden>
       <div class="find-overlay" id="find-overlay">
         <input type="text" id="find-input" placeholder="Find agent…">
         <span class="find-count" id="find-count"></span>
@@ -229,6 +235,10 @@
       <span class="menu-label">Save inputs</span>
       <span class="menu-kbd">Ctrl+S</span>
     </button>
+    <button class="menu-item" data-action="import" role="menuitem">
+      <span class="menu-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3v12m0 0-4-4m4 4 4-4"/><path d="M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2"/></svg></span>
+      <span class="menu-label">Import workflow…</span>
+    </button>
     <div class="menu-divider"></div>
     <button class="menu-item" data-action="find" role="menuitem">
       <span class="menu-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span>
@@ -347,7 +357,7 @@
 
   <div class="modal-backdrop" id="add-fav-modal">
     <div class="modal">
-      <div class="modal-title">Save as Template</div>
+      <div class="modal-title" id="add-fav-title">Save as Template</div>
       <div class="modal-sub" id="add-fav-sub">Save this node as a reusable Template — usable in any workflow.</div>
       <div class="modal-field">
         <label for="fav-name">Name</label>

package/dist/web/panels.js

@@ -421,7 +421,9 @@
     if (btn) { btn.disabled = true; btn.textContent = 'Queueing…'; }
     try {
       const { request } = await api('/api/extensions/customize', { method: 'POST', body: JSON.stringify({ instruction }) });
-      const line = bridge.instructionFor ? bridge.instructionFor(request) : instruction;
+      // Copy the MARKED form so a pasted ui-customize request is recognized, not run verbatim (#73).
+      const line = bridge.markedInstruction ? bridge.markedInstruction(request)
+                 : bridge.instructionFor ? bridge.instructionFor(request) : instruction;
       const copied = bridge.copyToClipboard ? await bridge.copyToClipboard(line) : false;
       showToast(copied ? 'Queued for your terminal AI · copied to clipboard' : 'Queued for your terminal AI', 'ok');
       if (input) input.value = '';
@@ -544,14 +546,14 @@
       setTimeout(() => $cancel.focus(), 0);
       const done = (result) => {
         $resetModal.classList.remove('show');
-        $confirm.onclick = $cancel.onclick = $resetModal.onclick = null;
+        $confirm.onclick = $cancel.onclick = $resetModal.onclick = $resetModal.onmousedown = null;
         document.removeEventListener('keydown', onKey, true);
         resolve(result);
       };
       const onKey = (e) => { if (e.key === 'Escape') { e.preventDefault(); done(false); } };
       $confirm.onclick = () => done(true);
       $cancel.onclick = () => done(false);
-      $resetModal.onclick = (e) => { if (e.target === $resetModal) done(false); };
+      onBackdropDismiss($resetModal, () => done(false));
       document.addEventListener('keydown', onKey, true);
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floless/app",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "description": "Thin localhost host for floless.app — serves web/ and shells the aware CLI. No engine, no LLM.",
   "bin": {