ugly-app 0.1.480 → 0.1.482

package/dist/cli/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugly-app",
-  "version": "0.1.480",
+  "version": "0.1.482",
   "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.480";
+export const CLI_VERSION = "0.1.482";

package/templates/CLAUDE.md

@@ -81,6 +81,12 @@ Every endpoint is accessible via both WebSocket (`socket.request(name, input)`)
 - Navigate: `useRouter().push('route-key', params)`
 - Popups: always use `useRouter().openPopup(<Component />, { mode: 'transient' })` — never custom fixed overlays
 
+### Home page is the primary surface
+- The home route is `''` in `shared/pages.ts`, rendered by `client/pages/HomePage.tsx`.
+- When building or customizing the app's main functionality, **edit `HomePage.tsx`** — replace its body with the requested UI. Do not add a new route just to land the user on it.
+- Only add new pages for secondary navigation the user explicitly asks for (settings, detail views, multi-screen flows). One screen ⇒ home page edit. Multiple screens ⇒ home page + extra routes.
+- Demo/test pages under `client/pages/` (`AuthDemoPage`, `TodoDemoPage`, `*TestPage`, etc.) are scaffolding — delete the ones you don't need as you build the real app.
+
 ## Critical rules
 - **Never** change a collection schema without running `npm run db:schema-gen` and fixing the generated migration
 - **Always** include a `schema: ZodSchema` when defining a collection — it's required

package/templates/client/pages/AuthDemoPage.tsx

@@ -1,6 +1,37 @@
-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 (used for the experiment / analytics demo below) ─────────
+
+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 — 'cta-test' must match the experiment id
+// declared in shared/experiments.ts.
+function getCtaLabel(branches: Record<string, string>): string {
+  if (branches['cta-test'] === 'treatment') return 'Try it free';
+  return 'Get started';
+}
+
 function openLogin(): void {
   window.open(
     `https://ugly.bot/oauth?origin=${encodeURIComponent(
@@ -68,6 +99,33 @@ function AuthDemoAuthenticated(): React.ReactElement {
 }
 
 function AuthDemoUnauthenticated(): React.ReactElement {
+  const sessionId = useRef(getSessionId());
+  const [branches, setBranches] = useState<Record<string, string>>({});
+
+  // initSession returns experiment branch assignments and captures SESSION_START.
+  // Analytics failures must not block the UI — degrade silently.
+  useEffect(() => {
+    rpc<{ branches: Record<string, string> }>('initSession', {
+      sessionId: sessionId.current,
+    })
+      .then(({ branches: b }) => { setBranches(b); })
+      .catch(() => {
+        // Default branch values stay in place
+      });
+  }, []);
+
+  function handleCtaClick(): void {
+    void rpc<{ eventId: string }>('captureEvent', {
+      eventName: 'CTA_CLICK',
+      sessionId: sessionId.current,
+      properties: { page: 'auth-demo' },
+    }).catch((_e: unknown) => undefined);
+
+    openLogin();
+  }
+
+  const ctaLabel = getCtaLabel(branches);
+
   return (
     <PageLayout
       header={
@@ -78,9 +136,18 @@ function AuthDemoUnauthenticated(): React.ReactElement {
     >
       <div>
         <h1>Auth Demo</h1>
+        <Text style={{ display: 'block', marginBottom: 12 }}>
+          Demonstrates ugly.bot OAuth login + session-scoped experiment
+          analytics. The button label is driven by the <code>cta-test</code>
+          {' '}experiment in <code>shared/experiments.ts</code>.
+        </Text>
         <Card>
           <Text>You are not logged in.</Text>
-          <Button onClick={openLogin}>Login with ugly.bot</Button>
+          <div style={{ marginTop: 12 }}>
+            <Button variant="primary" onClick={handleCtaClick}>
+              {ctaLabel}
+            </Button>
+          </div>
         </Card>
       </div>
     </PageLayout>

package/templates/client/pages/HomePage.tsx

@@ -1,184 +1,20 @@
-import { nanoid } from 'nanoid';
-import React, { useEffect, useRef, useState } from 'react';
-import { Button, Card, PageLayout, Text, useApp } from 'ugly-app/client';
+import React from 'react';
+import { Card, PageLayout, Text } 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 ──────────────────────────────────────────────────────────
-
-const UGLY_BOT_URL = (window as unknown as Record<string, string>).__UGLY_BOT_URL__ ?? 'https://ugly.bot';
-
-function openLogin(): void {
-  window.open(
-    `${UGLY_BOT_URL}/oauth?origin=${encodeURIComponent(
-      window.location.origin,
-    )}`,
-    'ugly-bot-login',
-    `width=480,height=640,left=${Math.round(
-      window.screenX + (window.outerWidth - 480) / 2,
-    )},top=${Math.round(window.screenY + (window.outerHeight - 640) / 2)}`,
-  );
-
-  function onMessage(event: MessageEvent): void {
-    if (event.origin !== UGLY_BOT_URL) return;
-    const data = event.data as { type?: string; code?: string } | null;
-    if (!data?.type || data.type !== 'ugly-bot-oauth' || !data.code) return;
-    window.removeEventListener('message', onMessage);
-    void fetch('/auth/verify', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ code: data.code }),
-    }).then((res) => {
-      if (res.ok) window.location.reload();
-    });
-  }
-  window.addEventListener('message', onMessage);
-}
-
-function HomePageAuthenticated(): React.ReactElement {
-  const app = useApp();
-
-  async function handleLogout(): Promise<void> {
-    await fetch('/auth/logout', { method: 'POST' });
-    window.location.reload();
-  }
-
-  return (
-    <PageLayout
-      header={
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 24px' }}>
-          <Text size="lg" weight="bold">My App</Text>
-          <Button variant="secondary" onClick={() => { void handleLogout(); }}>
-            Logout
-          </Button>
-        </div>
-      }
-    >
-      <HomePageBody userId={app.userId} />
-    </PageLayout>
-  );
-}
-
-function HomePageUnauthenticated(): React.ReactElement {
+// This is your app's home page. Replace the body below with the UI for
+// whatever you're building. The `''` route in shared/pages.ts maps here.
+export default function HomePage(): React.ReactElement {
   return (
-    <PageLayout
-      header={
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 24px' }}>
-          <Text size="lg" weight="bold">My App</Text>
-          <Button variant="primary" onClick={openLogin}>
-            Login
-          </Button>
-        </div>
-      }
-    >
-      <HomePageBody userId={null} />
+    <PageLayout>
+      <div style={{ maxWidth: 640, margin: '0 auto', padding: 24 }}>
+        <Card>
+          <Text size="xl" weight="bold">Welcome</Text>
+          <Text style={{ marginTop: 8 }}>
+            This is the home page. Edit <code>client/pages/HomePage.tsx</code>
+            {' '}to build your app.
+          </Text>
+        </Card>
+      </div>
     </PageLayout>
   );
 }
-
-// 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((_e: unknown) => undefined);
-
-    openLogin();
-  }
-
-  const ctaLabel = getCtaLabel(branches);
-
-  return (
-    <div style={{ maxWidth: 640, margin: '0 auto', padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <Card>
-        <Text size="xl" weight="bold">
-          Welcome
-        </Text>
-        <Text style={{ marginTop: 4 }}>
-          {userId
-            ? `Logged in as: ${userId}`
-            : 'This app was built with ugly-app.'}
-        </Text>
-        {!userId && (
-          <div style={{ marginTop: 12 }}>
-            {/* CTA label is experiment-driven — see shared/experiments.ts */}
-            <Button variant="primary" onClick={handleCtaClick}>
-              {ctaLabel}
-            </Button>
-          </div>
-        )}
-      </Card>
-    </div>
-  );
-}
-
-export default function HomePage(): React.ReactElement {
-  // Check both that a token exists AND that AppProvider is available.
-  // When the token is present but invalid (e.g. expired), the socket
-  // connection fails and we render without AppProvider — so we must
-  // fall back to the unauthenticated view to avoid a useApp() crash
-  // that causes an infinite reload loop.
-  let isLoggedIn = false;
-  try {
-    // useApp throws if there is no AppProvider ancestor
-    useApp();
-    isLoggedIn = true;
-  } catch {
-    isLoggedIn = false;
-  }
-  if (isLoggedIn) return <HomePageAuthenticated />;
-  return <HomePageUnauthenticated />;
-}