alpha-gate 0.1.0

package/src/views/admin/ci-page.tsx

@@ -0,0 +1,76 @@
+import type { FC } from "hono/jsx";
+import { AdminLayout, type Chrome } from "./layout";
+
+// §13/§20 — the CI-publishing help page. Pure: it documents the headless publish flow for this exact
+// instance (the admin origin is interpolated into copy-paste-ready commands). The upload/register
+// routes are the only ones that accept a Cloudflare Access service token (decision 0006).
+
+export const CiPage: FC<{ adminOrigin: string; chrome?: Chrome }> = ({ adminOrigin, chrome }) => (
+  <AdminLayout title="CI publishing" chrome={chrome}>
+    <p class="sub" style="margin-top:6px">
+      Publish builds headlessly from CI over a Cloudflare Access <strong>service token</strong> —
+      the only credential accepted on the build upload/register routes.
+    </p>
+
+    <section>
+      <div class="slab">
+        <h2>1 · Create a service token</h2>
+      </div>
+      <p>
+        In Cloudflare Zero Trust → Access → Service Auth, create a service token and add a Service
+        Auth rule to this app's Access application. Store its Client ID and Secret as CI secrets:
+      </p>
+      <pre>
+        <code>CF_ACCESS_CLIENT_ID{"\n"}CF_ACCESS_CLIENT_SECRET</code>
+      </pre>
+    </section>
+
+    <section>
+      <div class="slab">
+        <h2>2 · Publish from CI</h2>
+      </div>
+      <p>
+        On a macOS runner, build → sign Developer ID → notarize → staple → produce the signed
+        artifact, then run the same publish command you use locally. It reads the version from the
+        app, signs with <code>sign_update</code> (the Worker never signs), links the channel by
+        name, and handles the {">"} 90 MB register path itself:
+      </p>
+      <pre>
+        <code>{`export CF_ACCESS_CLIENT_ID=...  CF_ACCESS_CLIENT_SECRET=...
+
+# from a clone:
+./publish.sh dist/MyApp.zip --admin-url ${adminOrigin} --channel beta
+# or from npm (no clone):
+npx alpha-gate publish dist/MyApp.zip --admin-url ${adminOrigin} --channel beta`}</code>
+      </pre>
+      <p class="muted">
+        A runner with no readable app bundle (a bare zip): pass <code>--build-number</code> /{" "}
+        <code>--short-version</code> and set <code>ED_SIGNATURE</code> from your own{" "}
+        <code>sign_update</code> step.
+      </p>
+    </section>
+
+    <section>
+      <div class="slab">
+        <h2>Endpoints (service token accepted)</h2>
+      </div>
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <code>POST /admin/builds/upload</code>
+            </td>
+            <td class="muted">multipart archive + version fields</td>
+          </tr>
+          <tr>
+            <td>
+              <code>POST /admin/builds/register</code>
+            </td>
+            <td class="muted">metadata-only (object_key + size)</td>
+          </tr>
+        </tbody>
+      </table>
+      <p class="muted">Every other admin mutation requires a human Access session.</p>
+    </section>
+  </AdminLayout>
+);

package/src/views/admin/combobox.tsx

@@ -0,0 +1,191 @@
+import type { FC } from "hono/jsx";
+
+// A searchable entity picker (users, builds) that keeps the form contract of a plain <select>.
+// Without JavaScript the native select IS the control (single or multiple) and the form posts
+// exactly what a select posts. With JavaScript, COMBOBOX_SCRIPT (injected once by AdminLayout)
+// hides the select and drives it from a type-to-filter combobox: the select stays in the DOM as
+// the value carrier, so the server never sees a difference. Multi-select renders removable chips
+// and posts the name once per selection (handlers read repeated fields via idList).
+
+export interface ComboOption {
+  value: string;
+  label: string;
+}
+
+export const Combobox: FC<{
+  /** The form field name the (hidden) select posts — e.g. buildId, clientId. */
+  name: string;
+  options: ComboOption[];
+  /** Accessible name for the picker; rendered sr-only. */
+  label: string;
+  /** Combobox placeholder, e.g. "Type a build number…". */
+  placeholder: string;
+  /** Allow several selections (chips). The no-JS fallback is a native multi-select. */
+  multiple?: boolean;
+  /**
+   * Required pickers get no empty option (the no-JS select then defaults to its first option,
+   * matching the old behavior); the enhancer refuses to submit with nothing picked instead.
+   */
+  required?: boolean;
+}> = ({ name, options, label, placeholder, multiple, required }) => (
+  <span
+    class="cbx"
+    data-combobox
+    data-placeholder={placeholder}
+    data-required={required ? "1" : undefined}
+  >
+    <label>
+      <span class="sr-only">{label}</span>
+      <select
+        name={name}
+        multiple={multiple}
+        size={multiple ? Math.min(options.length, 4) : undefined}
+      >
+        {required || multiple ? null : <option value="">— none —</option>}
+        {options.map((o) => (
+          <option value={o.value}>{o.label}</option>
+        ))}
+      </select>
+    </label>
+  </span>
+);
+
+// The enhancer. Self-contained by design (a hand-written string — nothing serialized, no module
+// references; see the PRINCIPLES client-side-scripts gotcha). Injected once per page by AdminLayout;
+// no-ops when the page has no [data-combobox].
+export const COMBOBOX_SCRIPT = `
+(function () {
+  var uid = 0;
+  document.querySelectorAll("[data-combobox]").forEach(function (box) {
+    var select = box.querySelector("select");
+    if (!select) return;
+    var multiple = select.multiple;
+    var required = box.getAttribute("data-required") === "1";
+    var options = Array.prototype.slice.call(select.options).filter(function (o) { return o.value !== ""; });
+    var listId = "cbx-" + (++uid);
+
+    // A required single select natively preselects its first option; the combobox starts EMPTY and
+    // refuses to submit until a real pick, so nothing is chosen by accident.
+    if (!multiple) select.selectedIndex = required ? -1 : 0;
+
+    var input = document.createElement("input");
+    input.type = "text";
+    input.className = "cbx-input";
+    input.setAttribute("role", "combobox");
+    input.setAttribute("aria-expanded", "false");
+    input.setAttribute("aria-controls", listId);
+    input.setAttribute("aria-autocomplete", "list");
+    input.setAttribute("autocomplete", "off");
+    input.placeholder = box.getAttribute("data-placeholder") || "Type to search…";
+
+    var list = document.createElement("ul");
+    list.className = "cbx-list";
+    list.id = listId;
+    list.setAttribute("role", "listbox");
+    list.hidden = true;
+
+    var chips = null;
+    if (multiple) {
+      chips = document.createElement("span");
+      chips.className = "cbx-chips";
+      box.appendChild(chips);
+    }
+    box.appendChild(input);
+    box.appendChild(list);
+    box.classList.add("on");
+
+    var shown = [];
+    var active = -1;
+
+    function renderChips() {
+      if (!chips) return;
+      chips.textContent = "";
+      options.forEach(function (o) {
+        if (!o.selected) return;
+        var b = document.createElement("button");
+        b.type = "button";
+        b.className = "cbx-chip";
+        b.textContent = o.textContent.trim() + " ✕";
+        b.setAttribute("aria-label", "Remove " + o.textContent.trim());
+        b.addEventListener("click", function () { o.selected = false; renderChips(); });
+        chips.appendChild(b);
+      });
+    }
+
+    function close() {
+      list.hidden = true;
+      input.setAttribute("aria-expanded", "false");
+      input.removeAttribute("aria-activedescendant");
+      active = -1;
+    }
+
+    function pick(option) {
+      if (multiple) {
+        option.selected = true;
+        input.value = "";
+        renderChips();
+        render("");
+        input.focus();
+      } else {
+        select.value = option.value;
+        input.value = option.textContent.trim();
+        close();
+      }
+    }
+
+    function render(query) {
+      var q = query.trim().toLowerCase();
+      shown = options.filter(function (o) {
+        if (multiple && o.selected) return false;
+        return o.textContent.toLowerCase().indexOf(q) !== -1;
+      });
+      list.textContent = "";
+      shown.forEach(function (o, i) {
+        var li = document.createElement("li");
+        li.id = listId + "-" + i;
+        li.setAttribute("role", "option");
+        li.textContent = o.textContent.trim();
+        if (i === active) { li.setAttribute("aria-selected", "true"); li.className = "act"; }
+        li.addEventListener("mousedown", function (e) { e.preventDefault(); pick(o); });
+        list.appendChild(li);
+      });
+      if (shown.length === 0) {
+        var none = document.createElement("li");
+        none.className = "none";
+        none.textContent = "No matches";
+        list.appendChild(none);
+      }
+      list.hidden = false;
+      input.setAttribute("aria-expanded", "true");
+      if (active >= 0 && shown[active]) input.setAttribute("aria-activedescendant", listId + "-" + active);
+      else input.removeAttribute("aria-activedescendant");
+    }
+
+    input.addEventListener("input", function () {
+      active = -1;
+      if (!multiple) select.selectedIndex = -1; // typed text invalidates the previous pick
+      render(input.value);
+    });
+    input.addEventListener("focus", function () { render(input.value); });
+    input.addEventListener("blur", function () { close(); });
+    input.addEventListener("keydown", function (e) {
+      if (e.key === "ArrowDown") { e.preventDefault(); if (list.hidden) render(input.value); active = Math.min(active + 1, shown.length - 1); render(input.value); }
+      else if (e.key === "ArrowUp") { e.preventDefault(); active = Math.max(active - 1, 0); render(input.value); }
+      else if (e.key === "Enter") {
+        if (!list.hidden && shown.length > 0) { e.preventDefault(); pick(shown[active >= 0 ? active : 0]); }
+      }
+      else if (e.key === "Escape") { close(); }
+    });
+
+    // A required picker refuses to submit with nothing chosen (the server would 400 anyway;
+    // this keeps the operator in place with focus on the field).
+    var form = box.closest("form");
+    if (form && required) {
+      form.addEventListener("submit", function (e) {
+        var any = options.some(function (o) { return o.selected; });
+        if (!any) { e.preventDefault(); input.focus(); box.classList.add("err"); setTimeout(function () { box.classList.remove("err"); }, 900); }
+      });
+    }
+  });
+})();
+`;

package/src/views/admin/forms.tsx

@@ -0,0 +1,37 @@
+import type { Child, FC } from "hono/jsx";
+
+// A small inline POST form: optional hidden fields, optional children (inputs/selects), a submit
+// button. The shared building block for the back-office action buttons.
+export const Post: FC<{
+  action: string;
+  label: string;
+  hidden?: Record<string, string | number>;
+  children?: Child;
+}> = ({ action, label, hidden = {}, children }) => (
+  <form method="post" action={action} class="inline">
+    {Object.entries(hidden).map(([name, value]) => (
+      <input type="hidden" name={name} value={String(value)} />
+    ))}
+    {children}
+    <button type="submit">{label}</button>
+  </form>
+);
+
+// Progressive enhancement for [data-copy] buttons: the target's text is selectable without JS; this
+// only adds one-click copy with a brief "Copied" confirmation.
+export const COPY_SCRIPT = `
+(function () {
+  document.querySelectorAll("[data-copy]").forEach(function (btn) {
+    btn.addEventListener("click", function () {
+      var el = document.querySelector(btn.getAttribute("data-copy"));
+      var text = el ? el.textContent : "";
+      if (!navigator.clipboard || !text) return;
+      navigator.clipboard.writeText(text).then(function () {
+        var prev = btn.textContent;
+        btn.textContent = "Copied";
+        setTimeout(function () { btn.textContent = prev; }, 1500);
+      });
+    });
+  });
+})();
+`;