@profullstack/agenticjobs 0.1.0

package/web/public/app.js

@@ -0,0 +1,173 @@
+/*
+ * The only script on the site.
+ *
+ * Two jobs: register the service worker, and add passkeys where the browser
+ * has them. Everything else works with this file blocked - every form is a
+ * real form and every link is a real link - which is what lets the CSP be
+ * script-src 'self' with no inline anything.
+ */
+
+(function () {
+  'use strict';
+
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function () {
+      navigator.serviceWorker.register('/sw.js').catch(function () {
+        /* A board that cannot install is still a board that works. */
+      });
+    });
+  }
+
+  registerPasskeyButton();
+
+  var card = document.getElementById('passkey-card');
+  var button = document.getElementById('passkey-login');
+  var error = document.getElementById('passkey-error');
+
+  // The button is hidden in the markup and only revealed once the browser has
+  // actually been asked, so nobody is offered a sign-in method that will throw.
+  if (!card || !button || !window.PublicKeyCredential) return;
+  card.hidden = false;
+
+  /* Adding a passkey from the "You" page, for an account that already exists. */
+  function registerPasskeyButton() {
+    var add = document.getElementById('passkey-add');
+    if (!add || !window.PublicKeyCredential) return;
+    add.hidden = false;
+
+    add.addEventListener('click', function () {
+      add.disabled = true;
+      var challenge = '';
+
+      fetch('/auth/passkey/register/start', { method: 'POST', headers: { accept: 'application/json' } })
+        .then(function (response) {
+          if (!response.ok) throw new Error('Could not start. Are you signed in?');
+          return response.json();
+        })
+        .then(function (options) {
+          challenge = options.challenge;
+          return navigator.credentials.create({
+            publicKey: {
+              challenge: decode(options.challenge),
+              rp: options.rp,
+              user: {
+                id: decode(options.user.id),
+                name: options.user.name,
+                displayName: options.user.displayName
+              },
+              pubKeyCredParams: options.pubKeyCredParams,
+              authenticatorSelection: options.authenticatorSelection,
+              excludeCredentials: (options.excludeCredentials || []).map(function (item) {
+                return { id: decode(item.id), type: 'public-key' };
+              }),
+              timeout: 60000
+            }
+          });
+        })
+        .then(function (credential) {
+          if (!credential) throw new Error('No passkey was created.');
+          return fetch('/auth/passkey/register/verify', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({
+              id: credential.id,
+              rawId: encode(credential.rawId),
+              type: credential.type,
+              challenge: challenge,
+              response: {
+                clientDataJSON: encode(credential.response.clientDataJSON),
+                attestationObject: encode(credential.response.attestationObject),
+                transports: credential.response.getTransports ? credential.response.getTransports() : []
+              }
+            })
+          });
+        })
+        .then(function (response) {
+          if (!response.ok) throw new Error('That passkey was not accepted.');
+          add.textContent = 'Passkey added';
+        })
+        .catch(function (problem) {
+          add.disabled = false;
+          if (problem && problem.name === 'NotAllowedError') return;
+          var note = document.getElementById('passkey-add-error');
+          if (note) {
+            note.textContent = problem && problem.message ? problem.message : 'That did not work.';
+            note.hidden = false;
+          }
+        });
+    });
+  }
+
+  function decode(value) {
+    var normal = value.replace(/-/g, '+').replace(/_/g, '/');
+    var padded = normal + '==='.slice((normal.length + 3) % 4);
+    var binary = atob(padded);
+    var bytes = new Uint8Array(binary.length);
+    for (var i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+    return bytes.buffer;
+  }
+
+  function encode(buffer) {
+    var bytes = new Uint8Array(buffer);
+    var binary = '';
+    for (var i = 0; i < bytes.length; i += 1) binary += String.fromCharCode(bytes[i]);
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+  }
+
+  function show(message) {
+    if (!error) return;
+    error.textContent = message;
+    error.hidden = false;
+  }
+
+  button.addEventListener('click', function () {
+    button.disabled = true;
+    if (error) error.hidden = true;
+
+    fetch('/auth/passkey/challenge', { method: 'POST', headers: { accept: 'application/json' } })
+      .then(function (response) {
+        if (!response.ok) throw new Error('This board could not start a passkey sign-in.');
+        return response.json();
+      })
+      .then(function (options) {
+        return navigator.credentials.get({
+          publicKey: {
+            challenge: decode(options.challenge),
+            rpId: options.rpId,
+            userVerification: 'preferred',
+            timeout: 60000,
+          },
+        });
+      })
+      .then(function (credential) {
+        if (!credential) throw new Error('No passkey was chosen.');
+        return fetch('/auth/passkey/verify', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({
+            id: credential.id,
+            rawId: encode(credential.rawId),
+            type: credential.type,
+            response: {
+              clientDataJSON: encode(credential.response.clientDataJSON),
+              authenticatorData: encode(credential.response.authenticatorData),
+              signature: encode(credential.response.signature),
+              userHandle: credential.response.userHandle
+                ? encode(credential.response.userHandle)
+                : null,
+            },
+          }),
+        });
+      })
+      .then(function (response) {
+        if (!response.ok) throw new Error('That passkey was not accepted.');
+        window.location.href = '/me';
+      })
+      .catch(function (problem) {
+        button.disabled = false;
+        // A cancelled prompt is not a failure worth shouting about.
+        if (problem && problem.name === 'NotAllowedError') return;
+        show(problem && problem.message ? problem.message : 'Passkey sign-in did not work.');
+      });
+  });
+})();

package/web/public/icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="agenticjobs">
+  <rect width="64" height="64" rx="14" fill="#0d7a5f"/>
+  <path d="M20 24h24v4H20zm0 8h24v4H20zm0 8h16v4H20z" fill="#fff"/>
+  <circle cx="46" cy="42" r="6" fill="#7ee2bd"/>
+</svg>

package/web/public/sw.js

@@ -0,0 +1,64 @@
+/*
+ * The service worker.
+ *
+ * Deliberately small. A job board is a read-mostly site whose content changes
+ * daily, so caching pages aggressively would show people closed listings; what
+ * is cached is the shell (stylesheet, icon) and an offline fallback, and every
+ * document goes to the network first.
+ *
+ * Bump VERSION on any change here or to the assets listed below. Without a
+ * bump, a returning reader keeps the old worker and never sees the change.
+ */
+
+const VERSION = 'v1';
+const SHELL = `shell-${VERSION}`;
+const ASSETS = ['/assets/app.css', '/assets/tokens.css', '/assets/icon.svg'];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches
+      .open(SHELL)
+      .then((cache) => cache.addAll(ASSETS))
+      .then(() => self.skipWaiting()),
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) => Promise.all(keys.filter((key) => key !== SHELL).map((key) => caches.delete(key))))
+      .then(() => self.clients.claim()),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  const request = event.request;
+  if (request.method !== 'GET') return;
+
+  const url = new URL(request.url);
+  if (url.origin !== self.location.origin) return;
+  // Never cache anything under /api or /me: one is live data, the other is a
+  // signed-in person's own pages.
+  if (url.pathname.startsWith('/api/') || url.pathname.startsWith('/me')) return;
+
+  if (ASSETS.includes(url.pathname)) {
+    event.respondWith(
+      caches.match(request).then((hit) => hit || fetch(request)),
+    );
+    return;
+  }
+
+  event.respondWith(
+    fetch(request).catch(() =>
+      caches.match(request).then(
+        (hit) =>
+          hit ||
+          new Response(
+            '<!doctype html><meta charset="utf-8"><title>Offline</title><body style="font:16px system-ui;padding:2rem"><h1>Offline</h1><p>This board is not reachable right now.</p>',
+            { status: 503, headers: { 'content-type': 'text/html; charset=utf-8' } },
+          ),
+      ),
+    ),
+  );
+});

package/web/public/tokens.css

@@ -0,0 +1,153 @@
+/*
+ * shadcn/ui design tokens, hand-ported.
+ *
+ * The names are shadcn's own - --background, --foreground, --card, --primary,
+ * --muted, --border, --input, --ring, --radius - so anyone who has read a
+ * shadcn theme can read this one, and a theme pasted out of the shadcn theme
+ * editor drops straight in.
+ *
+ * What is NOT here is Tailwind or the shadcn CLI. Pages render server-side
+ * through Hono's JSX and ship plain CSS, so the React components cannot be
+ * used directly; what is ported is their anatomy and their token vocabulary.
+ * See components.css, where each class mirrors a shadcn component.
+ *
+ * Theme resolution has three states and all three are handled:
+ *   - light lives on bare :root, so a page always has a complete palette
+ *   - dark is redefined under prefers-color-scheme for the default "system"
+ *     setting, guarded so an explicit light choice still wins
+ *   - dark is redefined again under [data-theme="dark"] so the toggle wins in
+ *     both directions
+ * A colour whose only definition sits inside a media query is a colour that
+ * disappears the moment somebody picks the other theme.
+ */
+
+:root {
+  --radius: 0.625rem;
+
+  --background: oklch(0.995 0.002 250);
+  --foreground: oklch(0.18 0.02 260);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.18 0.02 260);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.18 0.02 260);
+
+  /* Deep green: hiring, not alerting. Passes AA on white at 5.4:1. */
+  --primary: oklch(0.52 0.13 165);
+  --primary-foreground: oklch(0.99 0.01 165);
+
+  --secondary: oklch(0.965 0.006 250);
+  --secondary-foreground: oklch(0.28 0.03 260);
+
+  --muted: oklch(0.965 0.006 250);
+  --muted-foreground: oklch(0.53 0.02 258);
+
+  --accent: oklch(0.955 0.015 175);
+  --accent-foreground: oklch(0.28 0.05 175);
+
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  --success: oklch(0.596 0.145 163.225);
+  --success-foreground: oklch(0.985 0 0);
+
+  --warning: oklch(0.681 0.162 75.834);
+  --warning-foreground: oklch(0.141 0.005 285.823);
+
+  --border: oklch(0.91 0.006 250);
+  --input: oklch(0.885 0.008 250);
+  --ring: oklch(0.52 0.13 165);
+
+  /* Board roles, layered on the shadcn palette rather than beside it. */
+  --agent-welcome: oklch(0.596 0.145 163);
+  --agent-disclose: oklch(0.681 0.162 76);
+  --agent-human: oklch(0.55 0.02 258);
+  --online: oklch(0.62 0.16 158);
+  --offline: oklch(0.6 0.02 258);
+
+  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
+    'Liberation Mono', monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --background: oklch(0.16 0.012 260);
+    --foreground: oklch(0.96 0.004 250);
+
+    --card: oklch(0.205 0.014 260);
+    --card-foreground: oklch(0.96 0.004 250);
+
+    --popover: oklch(0.205 0.014 260);
+    --popover-foreground: oklch(0.96 0.004 250);
+
+    --primary: oklch(0.72 0.15 165);
+    --primary-foreground: oklch(0.16 0.03 165);
+
+    --secondary: oklch(0.27 0.015 260);
+    --secondary-foreground: oklch(0.96 0.004 250);
+
+    --muted: oklch(0.27 0.015 260);
+    --muted-foreground: oklch(0.71 0.015 256);
+
+    --accent: oklch(0.3 0.03 175);
+    --accent-foreground: oklch(0.96 0.004 250);
+
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.98 0 0);
+
+    --success: oklch(0.696 0.17 162.48);
+    --warning: oklch(0.769 0.188 70.08);
+
+    --border: oklch(1 0 0 / 12%);
+    --input: oklch(1 0 0 / 18%);
+    --ring: oklch(0.72 0.15 165);
+
+    --agent-welcome: oklch(0.696 0.17 162);
+    --agent-disclose: oklch(0.769 0.188 70);
+    --agent-human: oklch(0.7 0.015 256);
+    --online: oklch(0.7 0.17 158);
+    --offline: oklch(0.6 0.02 258);
+  }
+}
+
+:root[data-theme='dark'] {
+  --background: oklch(0.16 0.012 260);
+  --foreground: oklch(0.96 0.004 250);
+
+  --card: oklch(0.205 0.014 260);
+  --card-foreground: oklch(0.96 0.004 250);
+
+  --popover: oklch(0.205 0.014 260);
+  --popover-foreground: oklch(0.96 0.004 250);
+
+  --primary: oklch(0.72 0.15 165);
+  --primary-foreground: oklch(0.16 0.03 165);
+
+  --secondary: oklch(0.27 0.015 260);
+  --secondary-foreground: oklch(0.96 0.004 250);
+
+  --muted: oklch(0.27 0.015 260);
+  --muted-foreground: oklch(0.71 0.015 256);
+
+  --accent: oklch(0.3 0.03 175);
+  --accent-foreground: oklch(0.96 0.004 250);
+
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.98 0 0);
+
+  --success: oklch(0.696 0.17 162.48);
+  --warning: oklch(0.769 0.188 70.08);
+
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 18%);
+  --ring: oklch(0.72 0.15 165);
+
+  --agent-welcome: oklch(0.696 0.17 162);
+  --agent-disclose: oklch(0.769 0.188 70);
+  --agent-human: oklch(0.7 0.015 256);
+  --online: oklch(0.7 0.17 158);
+  --offline: oklch(0.6 0.02 258);
+}