@lightupai/polaris 0.0.47 → 0.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightupai/polaris",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "type": "module",
   "bin": {
     "polaris": "bin/polaris",

package/src/web/app.ts

@@ -15,6 +15,7 @@ import {
   getSessionPromptCounts,
   getProjectEvents,
   getRecentSignups,
+  listUsers,
   type Sql,
 } from "../service/db";
 import { layout, nav } from "./layout";
@@ -250,7 +251,8 @@ export function createApp(sql: Sql) {
       }
     } catch { /* _system project may not exist yet */ }
 
-    // Query real projects, sessions, and prompt counts
+    // Query team members, projects, sessions, and prompt counts
+    const teamMembers = await listUsers(sql, payload.org_id);
     const projects = (await listProjects(sql, payload.org_id)).filter((p) => p.name !== "_system");
     const allSessions = (await listSessions(sql, payload.org_id)).filter((s) => s.project !== "_system");
     const promptCounts = await getSessionPromptCounts(sql, payload.org_id);
@@ -288,6 +290,7 @@ export function createApp(sql: Sql) {
       cliInstalled,
       hasConnectedSession,
       totalPrompts: Array.from(promptCounts.values()).reduce((a, b) => a + b, 0),
+      teamMembers: teamMembers.map((u) => ({ name: u.name, email: u.email })),
     };
 
     if (hasConnectedSession) {
@@ -328,10 +331,11 @@ export function createApp(sql: Sql) {
     const mockToken = "preview-token";
     const base = { token: mockToken, userName: mockUser.name, orgName: mockOrg.name, orgSlug: "lightup-data" as string | null, email: mockUser.email };
 
+    const mockTeam = [{ name: mockUser.name, email: mockUser.email }, { name: "Alice Chen", email: "alice@lightup.ai" }, { name: "Laura Mowry", email: "laura@lightup.ai" }];
     const fresh       = { ...base, orgSlug: null, slackConnected: false, cliInstalled: false, hasConnectedSession: false, totalPrompts: 0 };
-    const slackDone   = { ...base, slackConnected: true,  cliInstalled: false, hasConnectedSession: false, totalPrompts: 0 };
-    const cliDone     = { ...base, slackConnected: true,  cliInstalled: true,  hasConnectedSession: false, totalPrompts: 0 };
-    const allDone     = { ...base, slackConnected: true,  cliInstalled: true,  hasConnectedSession: true,  totalPrompts: 127 };
+    const slackDone   = { ...base, slackConnected: true,  cliInstalled: false, hasConnectedSession: false, totalPrompts: 0, teamMembers: mockTeam };
+    const cliDone     = { ...base, slackConnected: true,  cliInstalled: true,  hasConnectedSession: false, totalPrompts: 0, teamMembers: mockTeam };
+    const allDone     = { ...base, slackConnected: true,  cliInstalled: true,  hasConnectedSession: true,  totalPrompts: 127, teamMembers: mockTeam };
 
     return layout(`
       <div class="max-w-5xl mx-auto px-6 py-12">

package/src/web/pages.ts

@@ -355,6 +355,80 @@ export function renderLandingPage(): string {
       </div>
     </div>
 
+    <!-- Pricing -->
+    <div class="py-16 border-t border-gray-200">
+      <div class="max-w-5xl mx-auto px-6">
+
+        <div class="text-center">
+          <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Pricing</h2>
+          <p class="mt-4 text-3xl font-bold text-gray-900">Start free. Upgrade when you're ready.</p>
+          <p class="mt-2 text-gray-500">Unlimited users on every plan. No per-seat pricing.</p>
+        </div>
+
+        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
+
+          <!-- Free -->
+          <div class="bg-white border border-gray-200 rounded-xl p-8">
+            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Free</h3>
+            <div class="mt-4">
+              <span class="text-4xl font-bold text-gray-900">$0</span>
+              <span class="text-gray-500 text-sm ml-1">forever</span>
+            </div>
+            <p class="mt-2 text-sm text-gray-500">For individuals and small teams getting started.</p>
+            <a href="/signup" class="mt-6 block w-full text-center px-4 py-2.5 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition">Get started</a>
+            <ul class="mt-6 space-y-3 text-sm text-gray-700">
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Unlimited users</li>
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span><strong>1,000</strong> prompts / month</span></li>
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span><strong>5 GB</strong> data captured</span></li>
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>7 days session history</li>
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Community support</li>
+            </ul>
+          </div>
+
+          <!-- Team -->
+          <div class="bg-white border-2 border-polaris-600 rounded-xl p-8">
+            <h3 class="text-sm font-semibold text-polaris-600 uppercase tracking-wider">Team</h3>
+            <div class="mt-4">
+              <span class="text-4xl font-bold text-gray-900">$49</span>
+              <span class="text-gray-500 text-sm ml-1">/month</span>
+            </div>
+            <p class="mt-2 text-sm text-gray-500">For teams that need more capacity, history, and search.</p>
+            <a href="/signup" class="mt-6 block w-full text-center px-4 py-2.5 bg-polaris-700 text-white text-sm font-medium rounded-lg hover:bg-polaris-800 transition">Get started</a>
+            <ul class="mt-6 space-y-3 text-sm text-gray-700">
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Unlimited users</li>
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span><strong>10,000</strong> prompts / month</span></li>
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span><strong>50 GB</strong> data captured</span></li>
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span><strong>90 days</strong> session history</span></li>
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Priority support</li>
+            </ul>
+          </div>
+
+          <!-- Enterprise -->
+          <div class="bg-white border border-gray-200 rounded-xl p-8">
+            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Enterprise</h3>
+            <div class="mt-4">
+              <span class="text-4xl font-bold text-gray-900">Custom</span>
+            </div>
+            <p class="mt-2 text-sm text-gray-500">For organizations with compliance and scale needs.</p>
+            <a href="mailto:hello@withpolaris.ai" class="mt-6 block w-full text-center px-4 py-2.5 bg-white border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition">Contact us</a>
+            <ul class="mt-6 space-y-3 text-sm text-gray-700">
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Everything in Team</li>
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Custom usage limits</li>
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>SSO, audit logs, compliance</li>
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Custom integrations</li>
+              <li class="flex items-start gap-2"><svg class="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Dedicated support</li>
+            </ul>
+          </div>
+
+        </div>
+
+        <div class="mt-12 text-center text-sm text-gray-400">
+          All plans include unlimited users and real-time Slack streaming. No credit card required for Free.
+        </div>
+
+      </div>
+    </div>
+
     <div class="max-w-3xl mx-auto px-6">
 
       <!-- How it works -->

package/src/web/views.ts

@@ -4,6 +4,11 @@
 import { nav, slackIcon, type NavOpts } from "./layout";
 import type { SessionFixture, ProjectFixture, DeviceFixture } from "./fixtures";
 
+interface TeamMember {
+  name: string;
+  email: string;
+}
+
 interface ViewContext {
   token: string;
   userName: string;
@@ -14,6 +19,7 @@ interface ViewContext {
   cliInstalled: boolean;
   hasConnectedSession: boolean;
   totalPrompts: number;
+  teamMembers?: TeamMember[];
 }
 
 function navOpts(ctx: ViewContext): NavOpts {
@@ -48,6 +54,24 @@ function statusBadge(label: string, done: boolean): string {
     : `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">${label}</span>`;
 }
 
+// --- Team members ---
+
+function renderTeamMembers(members: TeamMember[], currentEmail: string): string {
+  if (members.length === 0) return "";
+  return `
+    <div class="mt-3 bg-white border border-gray-200 rounded-lg divide-y divide-gray-100">
+      ${members.map((m) => {
+        const isYou = m.email === currentEmail;
+        return `
+          <div class="px-4 py-2.5 flex items-center gap-3">
+            <div class="w-7 h-7 rounded-full bg-polaris-600 flex items-center justify-center text-white text-xs font-bold shrink-0">${m.name.charAt(0).toUpperCase()}</div>
+            <p class="text-sm text-gray-900">${m.name}${isYou ? ' <span class="text-xs text-gray-400">(you)</span>' : ""}</p>
+            <span class="text-xs text-gray-400 ml-auto">${m.email}</span>
+          </div>`;
+      }).join("")}
+    </div>`;
+}
+
 // --- Floor section ---
 
 type StepState = "done" | "active" | "future";
@@ -67,11 +91,13 @@ function renderFloorSection(ctx: ViewContext, compact = false, state: StepState
     const promptStat = ctx.totalPrompts > 0
       ? `<span class="text-xs text-gray-400 ml-auto">${ctx.totalPrompts} prompt${ctx.totalPrompts !== 1 ? "s" : ""}</span>`
       : '';
+    const teamCount = ctx.teamMembers?.length ?? 0;
     return `
       <div>
         <div class="flex items-baseline gap-2 mb-3">
           <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Floor</h2>
           ${statusBadge("Connected", true)}
+          ${teamCount > 0 ? `<span class="text-xs text-gray-400">${teamCount} member${teamCount !== 1 ? "s" : ""}</span>` : ""}
         </div>
         <div class="bg-white border border-gray-200 rounded-lg px-5 py-3 flex items-center gap-3">
           <div class="w-8 h-8 rounded-lg bg-[#4A154B] flex items-center justify-center shrink-0">
@@ -81,6 +107,7 @@ function renderFloorSection(ctx: ViewContext, compact = false, state: StepState
           ${ctx.orgSlug ? `<span class="text-xs text-gray-400 font-mono">${ctx.orgSlug}</span>` : ''}
           ${promptStat}
         </div>
+        ${ctx.teamMembers ? renderTeamMembers(ctx.teamMembers, ctx.email) : ""}
       </div>`;
   }
 
@@ -88,12 +115,14 @@ function renderFloorSection(ctx: ViewContext, compact = false, state: StepState
     const slugLabel = ctx.orgSlug
       ? `<span class="text-xs text-gray-400 font-mono">${ctx.orgSlug}</span>`
       : '';
+    const teamCount = ctx.teamMembers?.length ?? 0;
 
     return `
       <div>
         <div class="flex items-baseline gap-2 mb-3">
           <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Floor</h2>
           ${statusBadge("Connected", true)}
+          ${teamCount > 0 ? `<span class="text-xs text-gray-400">${teamCount} member${teamCount !== 1 ? "s" : ""}</span>` : ""}
         </div>
         <div class="bg-white border border-gray-200 rounded-lg px-5 py-3 flex items-center gap-3">
           <div class="w-8 h-8 rounded-lg bg-[#4A154B] flex items-center justify-center shrink-0">
@@ -102,6 +131,7 @@ function renderFloorSection(ctx: ViewContext, compact = false, state: StepState
           <p class="text-sm font-medium text-gray-900">Slack</p>
           ${slugLabel}
         </div>
+        ${ctx.teamMembers ? renderTeamMembers(ctx.teamMembers, ctx.email) : ""}
       </div>`;
   }