@chaaskit/client 0.1.0 → 0.1.2

package/src/pages/AdminTeamPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Link, useParams } from 'react-router';
-import { LayoutDashboard, X, Users, Building2 } from 'lucide-react';
+import { LayoutDashboard, X, Users, Building2, Mail, Tag } from 'lucide-react';
 import { useAppPath } from '../hooks/useAppPath';
 import { api } from '../utils/api';
 import type { AdminTeamDetails } from '@chaaskit/shared';
@@ -86,6 +86,20 @@ export default function AdminTeamPage() {
               <Building2 size={16} />
               Teams
             </Link>
+            <Link
+              to={appPath('/admin/waitlist')}
+              className="flex items-center gap-1.5 rounded-full bg-background-secondary px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary/80"
+            >
+              <Mail size={16} />
+              Waitlist
+            </Link>
+            <Link
+              to={appPath('/admin/promo-codes')}
+              className="flex items-center gap-1.5 rounded-full bg-background-secondary px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary/80"
+            >
+              <Tag size={16} />
+              Promo Codes
+            </Link>
           </div>
 
           <div className="rounded-lg bg-error/10 p-4 text-sm text-error">
@@ -142,6 +156,20 @@ export default function AdminTeamPage() {
             <Building2 size={16} />
             Teams
           </Link>
+          <Link
+            to={appPath('/admin/waitlist')}
+            className="flex items-center gap-1.5 rounded-full bg-background-secondary px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary/80"
+          >
+            <Mail size={16} />
+            Waitlist
+          </Link>
+          <Link
+            to={appPath('/admin/promo-codes')}
+            className="flex items-center gap-1.5 rounded-full bg-background-secondary px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary/80"
+          >
+            <Tag size={16} />
+            Promo Codes
+          </Link>
         </div>
 
         {/* Team Header */}

package/src/pages/AdminTeamsPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import { Link } from 'react-router';
-import { LayoutDashboard, X, Users, Building2 } from 'lucide-react';
+import { LayoutDashboard, X, Users, Building2, Mail, Tag } from 'lucide-react';
 import { useAppPath } from '../hooks/useAppPath';
 import { api } from '../utils/api';
 import type { AdminTeam, AdminTeamsResponse } from '@chaaskit/shared';
@@ -91,6 +91,20 @@ export default function AdminTeamsPage() {
             <Building2 size={16} />
             Teams
           </Link>
+          <Link
+            to={appPath('/admin/waitlist')}
+            className="flex items-center gap-1.5 rounded-full bg-background-secondary px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary/80"
+          >
+            <Mail size={16} />
+            Waitlist
+          </Link>
+          <Link
+            to={appPath('/admin/promo-codes')}
+            className="flex items-center gap-1.5 rounded-full bg-background-secondary px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary/80"
+          >
+            <Tag size={16} />
+            Promo Codes
+          </Link>
         </div>
 
         {error && (

package/src/pages/AdminUsersPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import { Link } from 'react-router';
-import { LayoutDashboard, X, Users, Building2 } from 'lucide-react';
+import { LayoutDashboard, X, Users, Building2, Mail, Tag } from 'lucide-react';
 import { useConfig } from '../contexts/ConfigContext';
 import { useAppPath } from '../hooks/useAppPath';
 import { api } from '../utils/api';
@@ -134,6 +134,20 @@ export default function AdminUsersPage() {
               Teams
             </Link>
           )}
+          <Link
+            to={appPath('/admin/waitlist')}
+            className="flex items-center gap-1.5 rounded-full bg-background-secondary px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary/80"
+          >
+            <Mail size={16} />
+            Waitlist
+          </Link>
+          <Link
+            to={appPath('/admin/promo-codes')}
+            className="flex items-center gap-1.5 rounded-full bg-background-secondary px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary/80"
+          >
+            <Tag size={16} />
+            Promo Codes
+          </Link>
         </div>
 
         {error && (

package/src/pages/AdminWaitlistPage.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router';
+import { LayoutDashboard, Users, Building2, X, Mail, Tag } from 'lucide-react';
+import { useConfig } from '../contexts/ConfigContext';
+import { useAppPath } from '../hooks/useAppPath';
+import { api } from '../utils/api';
+import type { AdminWaitlistEntry, AdminWaitlistResponse } from '@chaaskit/shared';
+
+export default function AdminWaitlistPage() {
+  const config = useConfig();
+  const appPath = useAppPath();
+  const [entries, setEntries] = useState<AdminWaitlistEntry[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+
+  async function loadWaitlist() {
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const response = await api.get<AdminWaitlistResponse>('/api/admin/waitlist');
+      setEntries(response.entries);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load waitlist');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    loadWaitlist();
+  }, []);
+
+  async function handleInvite(entryId: string, email: string) {
+    setError('');
+    setSuccess('');
+
+    try {
+      await api.post(`/api/admin/waitlist/${entryId}/invite`, {});
+      setSuccess(`Invite sent to ${email}`);
+      loadWaitlist();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to send invite');
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background p-4 sm:p-8">
+      <div className="mx-auto max-w-6xl">
+        <div className="flex items-center justify-between mb-4">
+          <h1 className="text-xl sm:text-2xl font-bold text-text-primary">Admin</h1>
+          <Link
+            to={appPath('/')}
+            className="flex items-center justify-center rounded-lg p-2 text-text-muted hover:text-text-primary hover:bg-background-secondary"
+            aria-label="Close"
+          >
+            <X size={20} />
+          </Link>
+        </div>
+
+        <div className="flex items-center gap-2 mb-6 sm:mb-8">
+          <Link
+            to={appPath('/admin')}
+            className="flex items-center gap-1.5 rounded-full bg-background-secondary px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary/80"
+          >
+            <LayoutDashboard size={16} />
+            Overview
+          </Link>
+          <Link
+            to={appPath('/admin/users')}
+            className="flex items-center gap-1.5 rounded-full bg-background-secondary px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary/80"
+          >
+            <Users size={16} />
+            Users
+          </Link>
+          {config.teams?.enabled && (
+            <Link
+              to={appPath('/admin/teams')}
+              className="flex items-center gap-1.5 rounded-full bg-background-secondary px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary/80"
+            >
+              <Building2 size={16} />
+              Teams
+            </Link>
+          )}
+          <Link
+            to={appPath('/admin/promo-codes')}
+            className="flex items-center gap-1.5 rounded-full bg-background-secondary px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary/80"
+          >
+            <Tag size={16} />
+            Promo Codes
+          </Link>
+          <span className="flex items-center gap-1.5 rounded-full bg-primary px-4 py-2 text-sm font-medium text-white">
+            <Mail size={16} />
+            Waitlist
+          </span>
+        </div>
+
+        {error && (
+          <div className="mb-6 rounded-lg bg-error/10 p-4 text-sm text-error">
+            {error}
+          </div>
+        )}
+
+        {success && (
+          <div className="mb-6 rounded-lg bg-success/10 p-4 text-sm text-success">
+            {success}
+          </div>
+        )}
+
+        <div className="rounded-lg bg-background-secondary overflow-hidden">
+          <div className="hidden md:block px-4 py-3 bg-background">
+            <div className="grid grid-cols-12 gap-4 text-sm font-medium text-text-muted">
+              <div className="col-span-4">Email</div>
+              <div className="col-span-2">Name</div>
+              <div className="col-span-2">Status</div>
+              <div className="col-span-2">Joined</div>
+              <div className="col-span-2">Action</div>
+            </div>
+          </div>
+
+          <div className="divide-y divide-background">
+            {isLoading ? (
+              <div className="px-4 py-8 text-center text-text-muted">Loading...</div>
+            ) : entries.length === 0 ? (
+              <div className="px-4 py-8 text-center text-text-muted">No waitlist entries</div>
+            ) : (
+              entries.map((entry) => (
+                <div key={entry.id} className="px-4 py-3 hover:bg-background/50">
+                  <div className="grid grid-cols-1 md:grid-cols-12 gap-2 md:gap-4 text-sm">
+                    <div className="md:col-span-4 text-text-primary">{entry.email}</div>
+                    <div className="md:col-span-2 text-text-secondary">{entry.name || '-'}</div>
+                    <div className="md:col-span-2 capitalize text-text-secondary">{entry.status.replace('_', ' ')}</div>
+                    <div className="md:col-span-2 text-text-muted">
+                      {new Date(entry.createdAt).toLocaleDateString()}
+                    </div>
+                    <div className="md:col-span-2">
+                      <button
+                        type="button"
+                        onClick={() => handleInvite(entry.id, entry.email)}
+                        disabled={entry.status === 'invited'}
+                        className="rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-hover disabled:opacity-50"
+                      >
+                        {entry.status === 'invited' ? 'Invited' : 'Invite'}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/pages/RegisterPage.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
-import { Link, useNavigate } from 'react-router';
+import { Link, useNavigate, useSearchParams } from 'react-router';
 import { useAuth } from '../contexts/AuthContext';
 import { useConfig } from '../contexts/ConfigContext';
 import { useTheme } from '../contexts/ThemeContext';
 import { useAppPath } from '../hooks/useAppPath';
+import { api } from '../utils/api';
 
 export default function RegisterPage() {
   const navigate = useNavigate();
@@ -11,12 +12,22 @@ export default function RegisterPage() {
   const { register } = useAuth();
   const config = useConfig();
   const { theme } = useTheme();
+  const [searchParams] = useSearchParams();
+
+  const inviteToken = searchParams.get('invite') || undefined;
+  const referralCode = searchParams.get('ref') || undefined;
+  const gating = config.auth.gating;
+  const signupsRestricted = gating?.mode && gating.mode !== 'open' && !inviteToken;
+  const waitlistEnabled = gating?.waitlistEnabled ?? false;
+  const showWaitlist = !!signupsRestricted && waitlistEnabled;
+  const showRestrictedMessage = !!signupsRestricted && !waitlistEnabled;
 
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [waitlistStatus, setWaitlistStatus] = useState<'idle' | 'submitted'>('idle');
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -30,7 +41,10 @@ export default function RegisterPage() {
     setIsLoading(true);
 
     try {
-      const { requiresVerification } = await register(email, password, name || undefined);
+      const { requiresVerification } = await register(email, password, name || undefined, {
+        inviteToken,
+        referralCode,
+      });
       if (requiresVerification) {
         navigate('/verify-email');
       } else {
@@ -43,6 +57,18 @@ export default function RegisterPage() {
     }
   }
 
+  async function handleWaitlistSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+
+    try {
+      await api.post('/api/auth/waitlist', { email, name: name || undefined });
+      setWaitlistStatus('submitted');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to join waitlist');
+    }
+  }
+
   return (
     <div className="flex min-h-screen items-center justify-center bg-background p-4">
       <div className="w-full max-w-md">
@@ -66,7 +92,60 @@ export default function RegisterPage() {
           </div>
         )}
 
-        <form onSubmit={handleSubmit} className="space-y-4">
+        {showRestrictedMessage ? (
+          <div className="rounded-lg border border-border bg-background-secondary p-4 text-sm text-text-secondary">
+            Signups are currently closed. Please check back later.
+          </div>
+        ) : showWaitlist ? (
+          <div className="rounded-lg border border-border bg-background-secondary p-4">
+            <p className="text-sm text-text-secondary">
+              Signups are currently restricted. Join the waitlist to get an invite.
+            </p>
+
+            {waitlistStatus === 'submitted' ? (
+              <div className="mt-4 rounded-lg bg-success/10 p-3 text-sm text-success">
+                Thanks! You’re on the waitlist.
+              </div>
+            ) : (
+              <form onSubmit={handleWaitlistSubmit} className="mt-4 space-y-3">
+                <div>
+                  <label htmlFor="waitlist-name" className="block text-sm font-medium text-text-primary">
+                    Name (optional)
+                  </label>
+                  <input
+                    type="text"
+                    id="waitlist-name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="mt-1 w-full rounded-lg border border-input-border bg-input-background px-4 py-2 text-text-primary focus:border-primary focus:outline-none"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="waitlist-email" className="block text-sm font-medium text-text-primary">
+                    Email
+                  </label>
+                  <input
+                    type="email"
+                    id="waitlist-email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    className="mt-1 w-full rounded-lg border border-input-border bg-input-background px-4 py-2 text-text-primary focus:border-primary focus:outline-none"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full rounded-lg bg-primary px-4 py-2 font-medium text-white hover:bg-primary-hover"
+                >
+                  Join waitlist
+                </button>
+              </form>
+            )}
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
           <div>
             <label
               htmlFor="name"
@@ -129,13 +208,16 @@ export default function RegisterPage() {
             {isLoading ? 'Creating account...' : 'Create account'}
           </button>
         </form>
+        )}
 
-        <p className="mt-6 text-center text-sm text-text-secondary">
-          Already have an account?{' '}
-          <Link to="/login" className="text-primary hover:underline">
-            Sign in
-          </Link>
-        </p>
+        {!signupsRestricted && (
+          <p className="mt-6 text-center text-sm text-text-secondary">
+            Already have an account?{' '}
+            <Link to="/login" className="text-primary hover:underline">
+              Sign in
+            </Link>
+          </p>
+        )}
 
         <p className="mt-4 text-center text-xs text-text-muted">
           By creating an account, you agree to our{' '}

package/src/routes/AcceptInviteRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function AcceptInviteRoute() {

package/src/routes/AdminDashboardRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function AdminDashboardRoute() {

package/src/routes/AdminPromoCodesRoute.tsx

@@ -0,0 +1,24 @@
+/**
+ * Admin Promo Codes Route - Promo code management
+ */
+import { ChatProviders } from '../index';
+import AdminPromoCodesPage from '../pages/AdminPromoCodesPage';
+import { SimpleLoadingSkeleton } from '../components/LoadingSkeletons';
+
+export function meta() {
+  return [{ title: 'Admin - Promo Codes' }];
+}
+
+export function links() {
+  return [];
+}
+
+export default function AdminPromoCodesRoute() {
+  return (
+    <ChatProviders>
+      <AdminPromoCodesPage />
+    </ChatProviders>
+  );
+}
+
+export { SimpleLoadingSkeleton as LoadingSkeleton };

package/src/routes/AdminTeamRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function AdminTeamRoute() {

package/src/routes/AdminTeamsRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function AdminTeamsRoute() {

package/src/routes/AdminUsersRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function AdminUsersRoute() {

package/src/routes/AdminWaitlistRoute.tsx

@@ -0,0 +1,24 @@
+/**
+ * Admin Waitlist Route - Waitlist management
+ */
+import { ChatProviders } from '../index';
+import AdminWaitlistPage from '../pages/AdminWaitlistPage';
+import { SimpleLoadingSkeleton } from '../components/LoadingSkeletons';
+
+export function meta() {
+  return [{ title: 'Admin - Waitlist' }];
+}
+
+export function links() {
+  return [];
+}
+
+export default function AdminWaitlistRoute() {
+  return (
+    <ChatProviders>
+      <AdminWaitlistPage />
+    </ChatProviders>
+  );
+}
+
+export { SimpleLoadingSkeleton as LoadingSkeleton };

package/src/routes/ApiKeysRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function ApiKeysRoute() {

package/src/routes/AutomationsRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function AutomationsRoute() {

package/src/routes/ChatRoute.tsx

@@ -12,7 +12,8 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  // CSS is bundled via app's Tailwind preset - no separate stylesheet needed
+  return [];
 }
 
 export default function ChatRoute() {

package/src/routes/DocumentsRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function DocumentsRoute() {

package/src/routes/OAuthConsentRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function OAuthConsentRoute() {

package/src/routes/PricingRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function PricingRoute() {

package/src/routes/PrivacyRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function PrivacyRoute() {

package/src/routes/TeamSettingsRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function TeamSettingsRoute() {

package/src/routes/TermsRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function TermsRoute() {

package/src/routes/VerifyEmailRoute.tsx

@@ -10,7 +10,7 @@ export function meta() {
 }
 
 export function links() {
-  return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  return [];
 }
 
 export default function VerifyEmailRoute() {

package/src/routes/index.ts

@@ -45,6 +45,8 @@ export { default as AdminDashboardRoute, meta as adminDashboardMeta, links as ad
 export { default as AdminUsersRoute, meta as adminUsersMeta, links as adminUsersLinks, LoadingSkeleton as AdminUsersLoadingSkeleton } from './AdminUsersRoute';
 export { default as AdminTeamsRoute, meta as adminTeamsMeta, links as adminTeamsLinks, LoadingSkeleton as AdminTeamsLoadingSkeleton } from './AdminTeamsRoute';
 export { default as AdminTeamRoute, meta as adminTeamMeta, links as adminTeamLinks, LoadingSkeleton as AdminTeamLoadingSkeleton } from './AdminTeamRoute';
+export { default as AdminWaitlistRoute, meta as adminWaitlistMeta, links as adminWaitlistLinks, LoadingSkeleton as AdminWaitlistLoadingSkeleton } from './AdminWaitlistRoute';
+export { default as AdminPromoCodesRoute, meta as adminPromoCodesMeta, links as adminPromoCodesLinks, LoadingSkeleton as AdminPromoCodesLoadingSkeleton } from './AdminPromoCodesRoute';
 
 // Auth-related routes
 export { default as VerifyEmailRoute, meta as verifyEmailMeta, links as verifyEmailLinks, LoadingSkeleton as VerifyEmailLoadingSkeleton } from './VerifyEmailRoute';