wirl 0.2.4 → 0.2.5

package/bin.js

@@ -4862,7 +4862,7 @@ var init_version = __esm({
   "packages/core/src/version.ts"() {
     "use strict";
     WORKSPACE_VERSION = "0.0.0";
-    BUILT_VERSION = true ? "0.2.4" : null;
+    BUILT_VERSION = true ? "0.2.5" : null;
   }
 });
 
@@ -7530,7 +7530,8 @@ var SERVER_HEAD = String.raw`/**
  * and what you get. Under them, the app's pages on app.wirl.dev.
  *
  * The whole app is this one file:
- * - The page is HTML this module returns: plain forms, no script.
+ * - The page is HTML this module returns: plain forms, and one small script
+ *   for the Copy prompt buttons.
  * - Notes live in env.DB, a SQLite database that belongs to this app alone.
  *   Its tables are in migrations/0001_init.sql, and wirl applies each new
  *   file in migrations/ before a version goes live. Put the next change in
@@ -7695,17 +7696,30 @@ async function page(request, url, me, env) {
     "<style>" + STYLE + "</style>",
     "<main>",
     "<header><h1>" + TITLE + "</h1>",
-    "<p class='dim'>Your first app on wirl. Signed in as <b>" + escape(me.name) + "</b>" + (me.role ? " (" + escape(me.role) + ")" : "") + ".</p></header>",
+    "<p class='dim'>Signed in as <b>" + escape(me.name) + "</b>" + (me.role ? " (" + escape(me.role) + ")" : "") + ".</p></header>",
+    me.role === "owner" ? welcome() : "",
     shown,
     "<ul class='notes'>" + (notes.length === 0 ? "<li class='dim'>Nothing here yet.</li>" : notes.map((note) => card(note, me, archived)).join("")) + "</ul>",
     "<p class='dim'>Nightly tidy-up, which archives notes older than " + ARCHIVE_AFTER_DAYS + " days that nobody pinned: " +
       (lastRun ? "last run " + escape(lastRun.ran_at.slice(0, 16)) + " UTC: " + escape(lastRun.note) : "Not run yet.") + "</p>",
     prompts(request),
     "</main>",
+    COPY_SCRIPT,
     "</html>",
   ].join("\n");
 }
 
+// For the app's owner only: what this is, in a box above the note form.
+function welcome() {
+  return [
+    "<section class='welcome'>",
+    "<p class='kicker'>Your first app on wirl</p>",
+    "<h2>Your coding agent just built this, and it's live.</h2>",
+    "<p>A small team noticeboard: notes, a nightly tidy-up, company sign-in, its own database. It runs at this address, it's private to you until you share it, and it's yours to change. Try out the app below and then customize it.</p>",
+    "</section>",
+  ].join("");
+}
+
 function form() {
   return [
     "<form class='add' method='post' action='/notes'>",
@@ -7776,12 +7790,16 @@ function prompts(request) {
   const step = (each) => {
     const stop = each.capability.indexOf(". ");
     return (
-      "<li class='step" + (each.optional ? " optional" : "") + "'>" +
+      "<li class='step" + (each.number === 1 ? " first" : "") + (each.optional ? " optional" : "") + "'>" +
       "<h3><span class='number'>" + each.number + "</span> " + escape(each.title) +
+      (each.number === 1 ? " <span class='badge start'>Start here</span>" : "") +
       (each.optional ? " <span class='badge'>Optional. The big one.</span>" : "") + "</h3>" +
       "<p class='dim'><b>" + escape(each.capability.slice(0, stop + 1)) + "</b> " + escape(each.capability.slice(stop + 2)) + "</p>" +
-      "<pre>" + escape(each.prompt) + "</pre>" +
-      "<p class='dim'>You get: " + escape(each.youGet) + "</p>" +
+      "<div class='getrow'>" +
+      "<button type='button' class='copy' data-copy-for='prompt-" + each.number + "'>Copy prompt</button>" +
+      "<p class='dim'>You get: " + escape(each.youGet) + "</p></div>" +
+      "<details class='prompt'><summary>Show the prompt</summary>" +
+      "<pre id='prompt-" + each.number + "'>" + escape(each.prompt) + "</pre></details>" +
       "</li>"
     );
   };
@@ -7809,6 +7827,7 @@ const STYLE = [
   "a { color: var(--accent); } .dim { color: var(--dim); }",
   "form.add, form.edit { display: grid; gap: 8px; margin: 16px 0 8px; }",
   "textarea, input, button { font: inherit; color: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }",
+  "button.copy { min-height: 44px; margin-top: 4px; }",
   "button { cursor: pointer; } button.primary { justify-self: start; background: var(--accent); border-color: var(--accent); color: var(--bg); }",
   "ul.notes { list-style: none; padding: 0; display: grid; gap: 10px; }",
   ".note { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }",
@@ -7825,11 +7844,41 @@ const STYLE = [
   ".number { font-size: 12px; background: var(--ink); color: var(--bg); padding: 2px 7px; border-radius: 5px; }",
   ".optional .number { background: var(--accent); }",
   ".badge { font-size: 12px; font-weight: 600; color: var(--dim); border: 1px solid var(--line); padding: 1px 8px; border-radius: 999px; }",
+  ".step.first { border: 2px solid var(--accent); }",
+  ".badge.start { color: var(--accent); border-color: var(--accent); }",
+  ".welcome { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 16px 0 8px; }",
+  ".welcome h2 { font-size: 19px; margin: 4px 0 8px; } .welcome p { margin: 0; }",
+  ".welcome .kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }",
+  ".getrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .getrow p { margin: 0; }",
+  "details.prompt summary { display: flex; align-items: center; min-height: 44px; color: var(--dim); font-size: 14px; cursor: pointer; }",
   ".uses { border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px; }",
   "pre { white-space: pre-wrap; user-select: all; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px; font-size: 13px; }",
   "details { margin: 6px 0; } summary { cursor: pointer; }",
 ].join("\n");
 
+const COPY_SCRIPT = [
+  "<script>",
+  "document.addEventListener('click', (event) => {",
+  "  const button = event.target.closest('.copy');",
+  "  if (!button) return;",
+  "  const pre = document.getElementById(button.getAttribute('data-copy-for'));",
+  "  const flash = (label) => {",
+  "    button.textContent = label;",
+  "    setTimeout(() => { button.textContent = 'Copy prompt'; }, 1500);",
+  "  };",
+  "  const select = () => {",
+  "    const range = document.createRange();",
+  "    range.selectNodeContents(pre);",
+  "    window.getSelection().removeAllRanges();",
+  "    window.getSelection().addRange(range);",
+  "    flash('Select and copy');",
+  "  };",
+  "  if (!navigator.clipboard) return select();",
+  "  navigator.clipboard.writeText(pre.textContent).then(() => flash('Copied'), select);",
+  "});",
+  "</script>",
+].join("\n");
+
 const home = (to = "/") => new Response(null, { status: 303, headers: { location: to } });
 
 const text = (body, status = 200) => new Response(body, { status, headers: { "content-type": "text/plain; charset=utf-8" } });
@@ -7867,7 +7916,7 @@ var STARTER_MIGRATION = [
   "-- Make the next change in 0002_<what>.sql; never edit a file that has been deployed.",
   "create table notes (id integer primary key, body text not null, tags text not null default '', pinned integer not null default 0, author_id text not null, author_name text not null default '', created_at text not null default (datetime('now')), archived_at text)",
   "create table runs (id integer primary key, schedule text not null, note text not null, ran_at text not null default (datetime('now')))",
-  "insert into notes (body, tags, pinned, author_id, author_name) values ('Welcome to the noticeboard. Post a note below, tag it, and pin the ones everyone should see.', 'welcome', 1, '', 'wirl')",
+  "insert into notes (body, tags, pinned, author_id, author_name) values ('Welcome to the noticeboard. This note is pinned so everyone sees it first; post your own below.', 'welcome', 1, '', 'wirl')",
   ""
 ].join("\n");
 function starterManifest(app, org) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wirl",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Deploy an internal app somewhere real, privately. One command; sharing by email; API keys declared, never pasted.",
   "keywords": [
     "deploy",