ugly-app 0.1.175 → 0.1.176

package/dist/cli/version.d.ts

@@ -1,2 +1,2 @@
-export declare const CLI_VERSION = "0.1.175";
+export declare const CLI_VERSION = "0.1.176";
 //# sourceMappingURL=version.d.ts.map

package/dist/cli/version.js

@@ -1,3 +1,3 @@
 // Auto-generated by prebuild — do not edit manually
-export const CLI_VERSION = "0.1.175";
+export const CLI_VERSION = "0.1.176";
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugly-app",
-  "version": "0.1.175",
+  "version": "0.1.176",
   "type": "module",
   "main": "./dist/server/index.js",
   "exports": {

package/src/cli/version.ts

@@ -1,2 +1,2 @@
 // Auto-generated by prebuild — do not edit manually
-export const CLI_VERSION = "0.1.175";
+export const CLI_VERSION = "0.1.176";

package/templates/client/allPages.ts

@@ -25,4 +25,5 @@ export const allPages = {
   ['kagi-test']: lazyPage(() => import('./pages/KagiTestPage')),
   ['audio-test']: lazyPage(() => import('./pages/AudioTestPage')),
   ['upload-test']: lazyPage(() => import('./pages/UploadTestPage')),
+  ['email-test']: lazyPage(() => import('./pages/EmailTestPage')),
 } satisfies PageMap<AppPages>;

package/templates/client/pages/EmailTestPage.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import { Button, Card, PageLayout, useApp } from 'ugly-app/client';
+
+interface SentEntry {
+  to: string;
+  subject: string;
+  id: string | null;
+  sentAt: string;
+}
+
+export default function EmailTestPage(): React.ReactElement {
+  const { socket } = useApp();
+  const [to, setTo] = useState('');
+  const [subject, setSubject] = useState('Test email from ugly-app');
+  const [html, setHtml] = useState('<h1>Hello!</h1>\n<p>This is a test email sent from ugly-app.</p>');
+  const [replyId, setReplyId] = useState('');
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState('');
+  const [sent, setSent] = useState<SentEntry[]>([]);
+
+  async function handleSend(): Promise<void> {
+    const trimmedTo = to.trim();
+    if (!trimmedTo) return;
+
+    setSending(true);
+    setError('');
+    try {
+      await socket.request('sendTestEmail', {
+        to: trimmedTo,
+        subject: subject.trim() || 'Test email',
+        html,
+        id: replyId.trim() || undefined,
+      });
+      setSent((prev) => [
+        { to: trimmedTo, subject, id: replyId.trim() || null, sentAt: new Date().toISOString() },
+        ...prev,
+      ]);
+      setTo('');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <PageLayout
+      header={
+        <div>
+          <a href="/">← Home</a>
+        </div>
+      }
+    >
+      <div>
+        <h1>Email Test</h1>
+
+        <Card>
+          <h2>Send Email</h2>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+            <label>
+              <div style={{ marginBottom: 4, fontWeight: 500 }}>To</div>
+              <input
+                type="email"
+                value={to}
+                onChange={(e) => { setTo(e.target.value); }}
+                placeholder="recipient@example.com"
+                style={{ width: '100%', padding: 8, borderRadius: 4, border: '1px solid #444' }}
+              />
+            </label>
+            <label>
+              <div style={{ marginBottom: 4, fontWeight: 500 }}>Subject</div>
+              <input
+                type="text"
+                value={subject}
+                onChange={(e) => { setSubject(e.target.value); }}
+                placeholder="Email subject"
+                style={{ width: '100%', padding: 8, borderRadius: 4, border: '1px solid #444' }}
+              />
+            </label>
+            <label>
+              <div style={{ marginBottom: 4, fontWeight: 500 }}>Reply ID (optional)</div>
+              <input
+                type="text"
+                value={replyId}
+                onChange={(e) => { setReplyId(e.target.value); }}
+                placeholder="e.g. order-123"
+                style={{ width: '100%', padding: 8, borderRadius: 4, border: '1px solid #444' }}
+              />
+              <div style={{ fontSize: '0.8em', color: '#888', marginTop: 2 }}>
+                Sets the +tag in the from address for reply correlation
+              </div>
+            </label>
+            <label>
+              <div style={{ marginBottom: 4, fontWeight: 500 }}>HTML Body</div>
+              <textarea
+                value={html}
+                onChange={(e) => { setHtml(e.target.value); }}
+                rows={6}
+                style={{ width: '100%', padding: 8, borderRadius: 4, border: '1px solid #444', fontFamily: 'monospace', fontSize: '0.9em' }}
+              />
+            </label>
+            <Button label="Send Email" onClick={() => { void handleSend(); }} disabled={sending || !to.trim()} />
+            {sending && <p>Sending…</p>}
+            {error && <p style={{ color: '#f44' }}>{error}</p>}
+          </div>
+        </Card>
+
+        {sent.length > 0 && (
+          <Card>
+            <h2>Sent Emails</h2>
+            {sent.map((entry, i) => (
+              <div key={i} style={{ marginBottom: 12, paddingBottom: 12, borderBottom: '1px solid #333' }}>
+                <div><strong>To:</strong> {entry.to}</div>
+                <div><strong>Subject:</strong> {entry.subject}</div>
+                {entry.id && <div><strong>Reply ID:</strong> {entry.id}</div>}
+                <div style={{ fontSize: '0.8em', color: '#888' }}>{entry.sentAt}</div>
+              </div>
+            ))}
+          </Card>
+        )}
+
+        <Card>
+          <h2>How it works</h2>
+          <ol>
+            <li><code>createEmailSender(domain)</code> creates a scoped sender for your app</li>
+            <li>Emails are sent from <code>{'<domain>'}@ugly.bot</code> via Mailgun</li>
+            <li>If a reply ID is set, the from address becomes <code>{'<domain>'}+{'<id>'}@ugly.bot</code></li>
+            <li>Replies are routed back to your app via <code>setOnEmail()</code> handler</li>
+          </ol>
+          <pre style={{ background: '#1a1a1a', padding: 12, borderRadius: 4, fontSize: '0.85em', overflow: 'auto' }}>{`// server/index.ts
+import { createEmailSender } from 'ugly-app';
+
+const email = createEmailSender(process.env.APP_DOMAIN!);
+
+await email.send({
+  to: 'user@example.com',
+  subject: 'Hello',
+  html: '<p>Hi there!</p>',
+  id: 'order-123', // optional reply correlation
+});
+
+// Receive replies:
+configurator.setOnEmail(async (inbound) => {
+  console.log(inbound.from, inbound.id, inbound.text);
+});`}</pre>
+        </Card>
+      </div>
+    </PageLayout>
+  );
+}

package/templates/client/push.ts

@@ -0,0 +1,121 @@
+/**
+ * Push notification helpers for projects deployed on ugly.bot.
+ *
+ * Registration happens via a hidden iframe on ugly.bot (which owns the
+ * service worker and Firebase credentials). Projects only need their
+ * project token (window.__AUTH_TOKEN__) to authenticate.
+ *
+ * Usage:
+ *   import { initPush, requestPushPermission } from './push';
+ *
+ *   // Check status (call once on app load)
+ *   const { registered } = await initPush();
+ *
+ *   // Prompt user if not registered
+ *   if (!registered) await requestPushPermission();
+ */
+
+const PUSH_FRAME_URL = 'https://ugly.bot/push-frame';
+const PUSH_FRAME_ORIGIN = 'https://ugly.bot';
+
+let iframe: HTMLIFrameElement | null = null;
+let iframeReady = false;
+let pendingResolvers: Array<{
+  func: string;
+  resolve: (data: Record<string, unknown>) => void;
+}> = [];
+
+function getToken(): string {
+  return (window as unknown as { __AUTH_TOKEN__?: string }).__AUTH_TOKEN__ ?? '';
+}
+
+function ensureIframe(): Promise<void> {
+  if (iframe && iframeReady) return Promise.resolve();
+  return new Promise((resolve) => {
+    if (iframe) {
+      // Already created but not loaded yet
+      const prev = iframe.onload;
+      iframe.onload = (e) => {
+        if (typeof prev === 'function') prev.call(iframe!, e);
+        iframeReady = true;
+        resolve();
+      };
+      return;
+    }
+
+    iframe = document.createElement('iframe');
+    iframe.src = PUSH_FRAME_URL;
+    iframe.style.display = 'none';
+    iframe.onload = () => {
+      iframeReady = true;
+      resolve();
+    };
+    document.body.appendChild(iframe);
+
+    window.addEventListener('message', (event) => {
+      if (event.origin !== PUSH_FRAME_ORIGIN) return;
+      const data = event.data as Record<string, unknown>;
+      const func = data.func as string;
+      const idx = pendingResolvers.findIndex((r) => r.func === func);
+      if (idx >= 0) {
+        pendingResolvers[idx]!.resolve(data);
+        pendingResolvers.splice(idx, 1);
+      }
+    });
+  });
+}
+
+function postAndWait(
+  msg: Record<string, unknown>,
+  expectFunc: string,
+): Promise<Record<string, unknown>> {
+  return new Promise((resolve) => {
+    pendingResolvers.push({ func: expectFunc, resolve });
+    iframe!.contentWindow!.postMessage(msg, PUSH_FRAME_ORIGIN);
+  });
+}
+
+/**
+ * Initialize push — loads the iframe and checks registration status.
+ * Returns { registered: boolean }.
+ */
+export async function initPush(): Promise<{ registered: boolean }> {
+  const token = getToken();
+  if (!token) return { registered: false };
+
+  await ensureIframe();
+  const result = await postAndWait(
+    { func: 'pushInit', projectToken: token },
+    'pushStatus',
+  );
+  return { registered: result.registered as boolean };
+}
+
+/**
+ * Request push notification permission and register.
+ * The browser will show the notification permission prompt.
+ * Resolves when registration is complete.
+ */
+export async function requestPushPermission(): Promise<{
+  success: boolean;
+  error?: string;
+}> {
+  const token = getToken();
+  if (!token) return { success: false, error: 'no_token' };
+
+  await ensureIframe();
+  const result = await Promise.race([
+    postAndWait(
+      { func: 'pushRequestPermission', projectToken: token },
+      'pushRegistered',
+    ).then(() => ({ success: true })),
+    postAndWait(
+      { func: 'pushRequestPermission', projectToken: token },
+      'pushError',
+    ).then((data) => ({
+      success: false,
+      error: data.error as string,
+    })),
+  ]);
+  return result;
+}

package/templates/server/index.ts

@@ -1,17 +1,34 @@
 import {
   createApp,
+  createEmailSender,
   createUserHelper,
+  pgQuery,
   type AppConfigurator,
   type RequestHandlers,
 } from 'ugly-app';
+import type { CronHandlers } from 'ugly-app/shared';
 import { dbDefaults } from 'ugly-app/shared';
 import { requests } from '../shared/api';
 import type { Todo, User } from '../shared/collections';
 import { collections } from '../shared/collections';
+import { cronTasks } from '../shared/cron';
 import { experiments } from '../shared/experiments';
 import { pages } from '../shared/pages';
 
 const userHelper = createUserHelper<User>(collections.user);
+// eslint-disable-next-line @typescript-eslint/dot-notation
+const email = createEmailSender(process.env['APP_DOMAIN'] ?? 'myapp');
+
+const cronHandlers: CronHandlers<typeof cronTasks> = {
+  dailyCleanup: async () => {
+    const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
+    const result = await pgQuery(
+      `DELETE FROM docs_todo WHERE (data->>'done')::boolean = true AND (data->'updated')::bigint < $1`,
+      [thirtyDaysAgo.getTime()],
+    );
+    console.log(`[Cron] dailyCleanup: deleted ${result.rowCount} old completed todos`);
+  },
+};
 
 const app = createApp(
   { requests },
@@ -37,12 +54,21 @@ const app = createApp(
       await app.db.deleteDoc('todo', todoId);
       return { ok: true };
     },
+
+    sendTestEmail: async (_userId, { to, subject, html, id }) => {
+      await email.send({ to, subject, html, id });
+      return { ok: true };
+    },
   } satisfies RequestHandlers<typeof requests>,
   collections,
   (configurator: AppConfigurator) => {
     configurator.setPages({ pages });
     configurator.setUserHelper(userHelper);
     configurator.setExperiments(experiments);
+    configurator.setCronTasks(cronTasks, cronHandlers);
+    configurator.setOnEmail(async (inbound) => {
+      console.log('[Email] Received:', { from: inbound.from, id: inbound.id, subject: inbound.subject });
+    });
     configurator.setOnUserCreate(async (userId, info, db) => {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       await userHelper.set(db, { _id: userId, ...dbDefaults(), ...info });

package/templates/shared/api.ts

@@ -17,6 +17,18 @@ export const requests = defineRequests({
     output: z.object({ ok: z.boolean() }),
   }),
 
+  // Email test — send an email via the app's email sender
+  sendTestEmail: authReq({
+    input: z.object({
+      to: z.string().email(),
+      subject: z.string().min(1).max(200),
+      html: z.string().min(1),
+      id: z.string().max(100).optional(),
+    }),
+    output: z.object({ ok: z.boolean() }),
+    rateLimit: { max: 5, window: 60 },
+  }),
+
   // Example: public request — userId is string | null
   // getPublicData: req({
   //   input: z.object({ id: z.string() }),

package/templates/shared/cron.ts

@@ -0,0 +1,8 @@
+import { cronTask, defineCronTasks } from 'ugly-app/shared';
+
+export const cronTasks = defineCronTasks({
+  dailyCleanup: cronTask({
+    schedule: '0 3 * * *', // 3 AM UTC daily
+    description: 'Delete completed todos older than 30 days',
+  }),
+});

package/templates/shared/pages.ts

@@ -24,6 +24,7 @@ export const pages = definePages({
   'kagi-test': definePage<{}>({ auth: true }),
   'audio-test': definePage<{}>({ auth: true }),
   'upload-test': definePage<{}>({ auth: true }),
+  'email-test': definePage<{}>({ auth: true }),
 });
 
 export type AppPages = typeof pages;