ugly-app 0.1.70 → 0.1.72

package/dist/cli/version.d.ts

@@ -1,2 +1,2 @@
-export declare const CLI_VERSION = "0.1.70";
+export declare const CLI_VERSION = "0.1.72";
 //# 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.70";
+export const CLI_VERSION = "0.1.72";
 //# sourceMappingURL=version.js.map

package/package.json

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

package/templates/client/pages/HomePage.tsx

@@ -1,6 +1,41 @@
-import React from 'react';
+import { nanoid } from 'nanoid';
+import React, { useEffect, useRef, useState } from 'react';
 import { Button, Card, PageLayout, Text, useApp } from 'ugly-app/client';
 
+// ─── Session helpers ──────────────────────────────────────────────────────────
+
+function getSessionId(): string {
+  const key = 'sessionId';
+  const existing = sessionStorage.getItem(key);
+  if (existing) return existing;
+  const id = nanoid();
+  sessionStorage.setItem(key, id);
+  return id;
+}
+
+// Lightweight HTTP RPC helper for pages that run before socket auth.
+// For authenticated pages with a socket, use socket.request() instead.
+async function rpc<T>(name: string, input: unknown): Promise<T> {
+  const res = await fetch(`/api/${name}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ input }),
+  });
+  const json = (await res.json()) as { result: T };
+  return json.result;
+}
+
+// ─── CTA label per experiment branch ─────────────────────────────────────────
+
+function getCtaLabel(branches: Record<string, string>): string {
+  // Add more experiment-driven labels here as you add experiments.
+  // 'cta-test' must match the experiment id in shared/experiments.ts.
+  if (branches['cta-test'] === 'treatment') return 'Try it free';
+  return 'Get started'; // control branch (or default while loading)
+}
+
+// ─── Page components ──────────────────────────────────────────────────────────
+
 function openLogin(): void {
   window.open(
     `https://ugly.bot/oauth?origin=${encodeURIComponent(
@@ -72,11 +107,41 @@ function HomePageUnauthenticated(): React.ReactElement {
   );
 }
 
+// Rendered for both authenticated and unauthenticated users.
+// The experiment CTA is intentionally shown only when userId is null.
 function HomePageBody({
   userId,
 }: {
   userId: string | null;
 }): React.ReactElement {
+  const sessionId = useRef(getSessionId());
+  const [branches, setBranches] = useState<Record<string, string>>({});
+
+  // Initialise session: captures SESSION_START and returns experiment branches.
+  // Failures are silently swallowed so analytics never block the UI.
+  useEffect(() => {
+    rpc<{ branches: Record<string, string> }>('initSession', {
+      sessionId: sessionId.current,
+    })
+      .then(({ branches: b }) => setBranches(b))
+      .catch(() => {
+        // Degrade gracefully — UI uses default branch values
+      });
+  }, []);
+
+  function handleCtaClick(): void {
+    // Fire-and-forget — do not await or block on analytics
+    void rpc<{ eventId: string }>('captureEvent', {
+      eventName: 'CTA_CLICK',
+      sessionId: sessionId.current,
+      properties: { page: 'home' },
+    }).catch(() => {});
+
+    openLogin();
+  }
+
+  const ctaLabel = getCtaLabel(branches);
+
   return (
     <div className="max-w-2xl mx-auto px-4 py-6">
       <Card className="mb-6">
@@ -88,6 +153,14 @@ function HomePageBody({
             ? `Logged in as: ${userId}`
             : 'This app was built with ugly-app.'}
         </Text>
+        {!userId && (
+          <div className="mt-4">
+            {/* CTA label is experiment-driven — see shared/experiments.ts */}
+            <Button variant="primary" onClick={handleCtaClick}>
+              {ctaLabel}
+            </Button>
+          </div>
+        )}
       </Card>
 
       <div className="grid gap-3">

package/templates/docker-compose.yml

@@ -9,8 +9,8 @@ services:
     ports:
       - '${PORT_MONGO:-3003}:27017'
     volumes:
-      - mongodb_data:/data/db
-      - mongodb_config:/data/configdb
+      - ./local/${COMPOSE_PROJECT_NAME:-uglyapp}/mongodb/data:/data/db
+      - ./local/${COMPOSE_PROJECT_NAME:-uglyapp}/mongodb/config:/data/configdb
     healthcheck:
       test: ['CMD', 'mongosh', '--eval', "db.adminCommand('ping')"]
       interval: 5s
@@ -60,8 +60,6 @@ services:
       - redis_data:/data
 
 volumes:
-  mongodb_data:
-  mongodb_config:
   nats_data:
   redis_data:
   minio_data:

package/templates/server/index.ts

@@ -1,7 +1,10 @@
 import {
   createApp,
   createUserHelper,
+  eventLogCapture,
+  eventLogServerCapture,
   getFeedbackHandlers,
+  getExperimentAssignments,
   type AppConfigurator,
   type RequestHandlers,
 } from 'ugly-app';
@@ -9,6 +12,7 @@ import { dbDefaults } from 'ugly-app/shared';
 import { requests } from '../shared/api';
 import type { User } from '../shared/collections';
 import { collections } from '../shared/collections';
+import { experiments } from '../shared/experiments';
 import { pages } from '../shared/pages';
 
 const userHelper = createUserHelper<User>(collections.user);
@@ -18,6 +22,7 @@ const app = createApp(
   { requests },
   {
     ...getFeedbackHandlers(maintainBotUserId),
+
     getMe: async (userId: string) => {
       const user = await userHelper.get(app.db, userId);
       return {
@@ -26,6 +31,34 @@ const app = createApp(
         phone: user?.phone,
       };
     },
+
+    // Compute experiment branch assignments for this user/session and capture
+    // SESSION_START so the experiment metrics dashboard can count reach per branch.
+    // userId is null for unauthenticated visitors — both are bucketed deterministically.
+    initSession: async (userId, { sessionId }) => {
+      const branches = getExperimentAssignments(userId, sessionId, experiments);
+      await eventLogServerCapture('SESSION_START', {}, sessionId, userId, branches);
+      return { branches };
+    },
+
+    // Generic event capture. Re-derives experiment branches so every event is
+    // associated with the correct branch in the analytics pipeline.
+    // Uses eventLogCapture (not eventLogServerCapture) because this endpoint
+    // must return the eventId to the caller.
+    captureEvent: async (userId, { eventName, sessionId, properties }) => {
+      const branches = getExperimentAssignments(userId, sessionId, experiments);
+      const { eventId } = await eventLogCapture(
+        {
+          eventName,
+          sessionId,
+          userId,
+          properties: properties ?? {},
+          experimentBranches: branches,
+        },
+        userId,
+      );
+      return { eventId };
+    },
   } satisfies RequestHandlers<typeof requests>,
   collections,
   (configurator: AppConfigurator) => {

package/templates/shared/api.ts

@@ -24,6 +24,24 @@ export const requests = defineRequests({
     rateLimit: { max: 20, window: 60 },
   }),
 
+  // Capture a session start and return experiment branch assignments.
+  // Call once on app mount; store the returned branches in React state.
+  initSession: req({
+    input: z.object({ sessionId: z.string() }),
+    output: z.object({ branches: z.record(z.string(), z.string()) }),
+  }),
+
+  // Fire-and-forget event capture. Call whenever a trackable action occurs.
+  // Use event names from AppEventName in shared/experiments.ts.
+  captureEvent: req({
+    input: z.object({
+      eventName: z.string(),
+      sessionId: z.string(),
+      properties: z.record(z.string(), z.string().nullish()).optional(),
+    }),
+    output: z.object({ eventId: z.string() }),
+  }),
+
   // Example: public request — userId is string | null
   // getPublicData: req({
   //   input: z.object({ id: z.string() }),

package/templates/shared/experiments.ts

@@ -0,0 +1,26 @@
+import type { Experiment } from 'ugly-app/shared';
+
+// ─── Event names ──────────────────────────────────────────────────────────────
+// Extend this union as you add more trackable events. Use ALL_CAPS convention.
+export type AppEventName = 'SESSION_START' | 'CTA_CLICK';
+
+// ─── Experiments ──────────────────────────────────────────────────────────────
+// Define A/B experiments here. Set active: false to pause an experiment.
+// weights are relative — { weight: 1 } on both branches means 50/50 split.
+//
+// After adding an experiment, reference experiments in:
+//   - server/index.ts handlers (getExperimentAssignments)
+//   - client pages (initSession return value)
+export const experiments: Experiment<AppEventName>[] = [
+  {
+    id: 'cta-test',
+    name: 'CTA Button Copy',
+    description: 'Tests two versions of the homepage CTA button label',
+    branches: [
+      { id: 'control',   name: 'Control',   weight: 1 },
+      { id: 'treatment', name: 'Treatment', weight: 1 },
+    ],
+    events: ['SESSION_START', 'CTA_CLICK'],
+    active: true,
+  },
+];