@lightupai/polaris 0.0.38 → 0.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/service/server.ts +33 -11
  3. package/src/web/layout.ts +5 -1
  4. package/src/web/pages.ts +322 -145
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lightupai/polaris",
3
- "version": "0.0.38",
3
+ "version": "0.0.40",
4
4
  "type": "module",
5
5
  "bin": {
6
6
  "polaris": "bin/polaris",
package/src/service/server.ts CHANGED
@@ -502,23 +502,45 @@ export async function startServer(opts: {
502
502
  }
503
503
  }
504
504
 
505
- // Generate short aliases from first name, disambiguate collisions
505
+ // Generate short aliases: prefer display_name, fall back to name, then handle
506
+ // Filter out slackbot
507
+ const filtered = team.filter((m) => m.slack_handle !== "slackbot");
508
+ team.length = 0;
509
+ team.push(...filtered);
510
+
511
+ function deriveAlias(m: typeof team[0]): string {
512
+ // Best source: display name (what the person chose)
513
+ const displayName = m.slack_display?.trim();
514
+ if (displayName) {
515
+ const first = displayName.split(/\s+/)[0]?.toLowerCase().replace(/[^a-z]/g, "") || "";
516
+ if (first.length >= 2) return first;
517
+ }
518
+ // Next: real name, but skip short/initial-only first names
519
+ const parts = m.name.split(/\s+/);
520
+ for (const part of parts) {
521
+ const clean = part.toLowerCase().replace(/[^a-z]/g, "");
522
+ if (clean.length >= 2) return clean;
523
+ }
524
+ // Fall back to slack handle
525
+ return m.slack_handle || "";
526
+ }
527
+
506
528
  const aliasCounts = new Map<string, number>();
507
529
  for (const m of team) {
508
- const firstName = m.name.split(/\s+/)[0]?.toLowerCase().replace(/[^a-z]/g, "") || "";
509
- if (firstName) aliasCounts.set(firstName, (aliasCounts.get(firstName) ?? 0) + 1);
530
+ const alias = deriveAlias(m);
531
+ if (alias) aliasCounts.set(alias, (aliasCounts.get(alias) ?? 0) + 1);
510
532
  }
511
533
  for (const m of team) {
512
- const parts = m.name.split(/\s+/);
513
- const firstName = parts[0]?.toLowerCase().replace(/[^a-z]/g, "") || "";
514
- if (!firstName) {
534
+ const alias = deriveAlias(m);
535
+ if (!alias) {
515
536
  (m as Record<string, unknown>).alias = null;
516
- } else if ((aliasCounts.get(firstName) ?? 0) > 1 && parts.length > 1) {
517
- // Collision — append first letter of last name
518
- const lastInitial = parts[parts.length - 1]?.[0]?.toLowerCase() ?? "";
519
- (m as Record<string, unknown>).alias = `${firstName}${lastInitial}`;
537
+ } else if ((aliasCounts.get(alias) ?? 0) > 1) {
538
+ // Collision — append first letter of last name or use handle
539
+ const parts = m.name.split(/\s+/);
540
+ const lastInitial = parts.length > 1 ? parts[parts.length - 1]?.[0]?.toLowerCase() ?? "" : "";
541
+ (m as Record<string, unknown>).alias = lastInitial ? `${alias}${lastInitial}` : m.slack_handle || alias;
520
542
  } else {
521
- (m as Record<string, unknown>).alias = firstName;
543
+ (m as Record<string, unknown>).alias = alias;
522
544
  }
523
545
  }
524
546
 
package/src/web/layout.ts CHANGED
@@ -69,7 +69,11 @@ export function nav(token?: string, opts?: NavOpts): string {
69
69
  <a href="/" class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50">Log out</a>
70
70
  </div>
71
71
  </div>`
72
- : `<a href="/login" class="text-sm font-medium text-polaris-700 hover:text-polaris-800">Sign in</a>`;
72
+ : `<a href="/login" class="text-sm font-medium text-gray-500 hover:text-gray-700">Sign in</a>
73
+ <a href="/signup" class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 transition text-sm font-medium text-gray-700">
74
+ <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 01-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/><path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 009 18z" fill="#34A853"/><path d="M3.964 10.71A5.41 5.41 0 013.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 000 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/><path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 00.957 4.958L3.964 6.29C4.672 4.163 6.656 2.58 9 3.58z" fill="#EA4335"/></svg>
75
+ Sign up
76
+ </a>`;
73
77
  return `
74
78
  <nav class="border-b border-gray-200 bg-white">
75
79
  <div class="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
package/src/web/pages.ts CHANGED
@@ -6,187 +6,365 @@ import type { Org } from "../service/db";
6
6
  export function renderLandingPage(): string {
7
7
  return `
8
8
  ${nav()}
9
- <div class="max-w-3xl mx-auto px-6">
9
+ <!-- Hero: text left, hub diagram right -->
10
+ <div class="max-w-6xl mx-auto px-6 pt-24 pb-16">
11
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
10
12
 
11
- <!-- Hero -->
12
- <div class="pt-24 pb-16">
13
- <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
14
- Realtime multiplayer Claude Code<br>sessions and knowledge capture
15
- </h1>
16
- <p class="mt-2 text-sm font-medium text-polaris-600">It's like Gong for AI.</p>
17
- <p class="mt-4 text-lg text-gray-500 max-w-2xl">
18
- Move your Claude Code sessions out of private windows and into a shared workspace in Slack. Polaris runs quietly in the background to document your sessions automatically, turning isolated chats into a continuous stream of team intelligence.
19
- </p>
20
- <div class="mt-8 flex items-center gap-4">
21
- <a href="#get-started" class="px-5 py-2.5 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition">Get started</a>
22
- <a href="https://github.com/anthropics/polaris" class="text-sm font-medium text-gray-500 hover:text-gray-700 transition">GitHub</a>
13
+ <!-- Left: text -->
14
+ <div>
15
+ <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
16
+ Meet Polaris.<br>It's like Gong for Claude Code sessions.
17
+ </h1>
18
+ <p class="mt-6 text-lg text-gray-500">
19
+ Bring your local Claude Code sessions straight into a collaborative Slack channel. Polaris works in the background to automatically capture and document the AI's entire execution path including all prompts, responses, and tool calls in real time. Teammates can watch the live log stream, intervene with inline commands via Slack, or audit the complete thought process later.
20
+ </p>
23
21
  </div>
24
22
 
25
- <!-- Terminal demo -->
26
- <div class="mt-12 bg-gray-900 rounded-xl overflow-hidden shadow-2xl">
27
- <div class="flex items-center gap-1.5 px-4 py-3 bg-gray-800">
28
- <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
29
- <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
30
- <div class="w-3 h-3 rounded-full bg-green-500/80"></div>
31
- <span class="ml-3 text-xs text-gray-500 font-mono">claude code</span>
23
+ <!-- Right: hub diagram -->
24
+ <div class="flex flex-col items-center">
25
+
26
+ <!-- Slack node -->
27
+ <div class="flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-200 rounded-lg shadow-sm">
28
+ <svg class="w-4 h-4 text-[#4A154B]" viewBox="0 0 24 24" fill="currentColor"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.124 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.52 2.521h-2.522V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.165 0a2.528 2.528 0 0 1 2.522 2.522v6.312zm-2.522 10.124a2.528 2.528 0 0 1 2.522 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.521-2.52v-2.523h2.521zm0-1.271a2.527 2.527 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.313A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.522h-6.313z"/></svg>
29
+ <span class="text-sm font-semibold text-gray-900"># webapp</span>
32
30
  </div>
33
- <div class="px-5 py-4 font-mono text-sm leading-relaxed space-y-3">
34
- <div>
35
- <span class="text-green-400">$</span> <span class="text-gray-300">npm install -g @lightupai/polaris</span>
31
+
32
+ <!-- Arrow: Slack ↔ Polaris -->
33
+ <svg class="w-5 h-14 text-gray-300" viewBox="0 0 20 56" fill="none" stroke="currentColor" stroke-width="1.5">
34
+ <path d="M7 4 L7 52 M4 7 L7 4 L10 7" stroke-linecap="round" stroke-linejoin="round"/>
35
+ <path d="M13 52 L13 4 M10 49 L13 52 L16 49" stroke-linecap="round" stroke-linejoin="round"/>
36
+ </svg>
37
+
38
+ <!-- Polaris hub -->
39
+ <div class="w-20 h-20 rounded-full bg-polaris-700 shadow-lg flex flex-col items-center justify-center">
40
+ <svg class="w-6 h-6 text-white" viewBox="0 0 20 20" fill="currentColor">
41
+ <circle cx="10" cy="10" r="2.5"/>
42
+ <circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="1.2"/>
43
+ <line x1="10" y1="1" x2="10" y2="5" stroke="currentColor" stroke-width="1.2"/>
44
+ <line x1="10" y1="15" x2="10" y2="19" stroke="currentColor" stroke-width="1.2"/>
45
+ <line x1="1" y1="10" x2="5" y2="10" stroke="currentColor" stroke-width="1.2"/>
46
+ <line x1="15" y1="10" x2="19" y2="10" stroke="currentColor" stroke-width="1.2"/>
47
+ </svg>
48
+ <span class="text-white text-[10px] font-bold mt-0.5">Polaris</span>
49
+ </div>
50
+
51
+ <!-- Branching arrows: Polaris ↔ sessions -->
52
+ <svg class="w-80 h-16 text-gray-300" viewBox="0 0 320 64" fill="none" stroke="currentColor" stroke-width="1.5" overflow="visible">
53
+ <path d="M160 0 L160 20" stroke-linecap="round"/>
54
+ <path d="M157 20 L160 0 L163 20" stroke-linecap="round" stroke-linejoin="round"/>
55
+ <path d="M160 20 L48 58" stroke-linecap="round"/>
56
+ <path d="M52 46 L48 58 L60 54" stroke-linecap="round" stroke-linejoin="round"/>
57
+ <path d="M160 20 L160 104" stroke-linecap="round"/>
58
+ <path d="M157 101 L160 104 L163 101" stroke-linecap="round" stroke-linejoin="round"/>
59
+ <path d="M160 20 L272 58" stroke-linecap="round"/>
60
+ <path d="M260 54 L272 58 L268 46" stroke-linecap="round" stroke-linejoin="round"/>
61
+ </svg>
62
+
63
+ <!-- Session nodes -->
64
+ <div class="flex items-start gap-6">
65
+ <div class="flex items-center gap-2 px-4 py-2.5 bg-gray-900 rounded-lg shadow-sm">
66
+ <img class="w-5 h-5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAKACAMAAAA7EzkRAAAAFVBMVEVMaXHZd1fZd1babUjZd1faf1rZd1epRaWRAAAABnRSTlMAXawH8g5t5RLrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFOklEQVR42u3WUQ6EIAxAQcDV+x95r1Bjk2Kdid81wkMdAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADebtHa9gFedPYTIAIUoAAFiAAFKEABIkABClCACFCAAhQgAkSAAkSACFCACBABChABIkABIkAEKEAEiAAFiAARoAARIAIUIAJEgAJEgAhQgAgQAQoQASJAAQpQgAhQgAIUIAIUoAAFiAAFKEABIkABClCACBABChABIkABIkAEKEAEiAAFiAARoAARIAIUIAJEgAJEgAhQgAgQAQoQASJAASJABChABIgABShAASJAAQpQgAhQgAIUIAIUoAAFiAARoAARIAIUIAJEgAJEgAhQgAjwnjNmfq2EGVwYAT4UvO33AqzZDwEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoACTHTHfCzC4MNkBHsnGBYUEiAARIAgQAYIAESAIEAGCABEgCBABggARIAgQAYIAESAIEAGCABEgCBABggARIAgQAYIAESAIEAEiQBAgAgQBIkAQIAIEASJAECACBAEiQBAgAgQBIkAQIAIEASJAECACBAEiQBAgAgQBIkAQIAIEASJABAgCRIAgQAQIAkSAIEAECAJEgCBABAgCRIDwNMCVzJL2lt3LyGaLmr+xdmeLBChABIgABYgAEaAAESACFCACRIACRIAIUIAIEAEKEAEiQAEiQAQoQASIAAWIABGgABEgAhQgAkSAAhSgABGgAAUoQAQoQAEKEAEKUIACRIAIUIAIEAEKEAEiQAEiQAQoQASIAAWIABGgABEgAhQgAkSAAkSACFCACBABChABIkABIkAEKEABChABClCAAkSAAhSgABGgAAUoQAQoQAEKEAEiQAEiQAQoQASIAAWIABGgABEgAhQgAkSAAkSACDDJjFnRBy6aVyb6HKto3mhiJp+4W/OOXa8bX5CZ/EVqU9YbAuzwCyNAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKcEvnDCqaV3cyg86ieQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwJv8Af3P8SOrUE9bAAAAAElFTkSuQmCC"/>
67
+ <span class="text-xs text-gray-300">Alice working on auth</span>
36
68
  </div>
37
- <div>
38
- <span class="text-green-400">$</span> <span class="text-gray-300">polaris</span>
69
+ <div class="flex items-center gap-2 px-4 py-2.5 mt-10 bg-white border border-gray-200 rounded-lg shadow-sm">
70
+ <svg class="w-4 h-4 text-blue-500" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C8 4.4 4.4 8 0 8c4.4 0 8 3.6 8 8 0-4.4 3.6-8 8-8-4.4 0-8-3.6-8-8z"/></svg>
71
+ <span class="text-xs text-gray-700">Martha writing docs</span>
72
+ </div>
73
+ <div class="flex items-center gap-2 px-4 py-2.5 bg-gray-900 rounded-lg shadow-sm">
74
+ <img class="w-5 h-5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAKACAMAAAA7EzkRAAAAFVBMVEVMaXHZd1fZd1babUjZd1faf1rZd1epRaWRAAAABnRSTlMAXawH8g5t5RLrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFOklEQVR42u3WUQ6EIAxAQcDV+x95r1Bjk2Kdid81wkMdAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADebtHa9gFedPYTIAIUoAAFiAAFKEABIkABClCACFCAAhQgAkSAAkSACFCACBABChABIkABIkAEKEAEiAAFiAARoAARIAIUIAJEgAJEgAhQgAgQAQoQASJAAQpQgAhQgAIUIAIUoAAFiAAFKEABIkABClCACBABChABIkABIkAEKEAEiAAFiAARoAARIAIUIAJEgAJEgAhQgAgQAQoQASJAASJABChABIgABShAASJAAQpQgAhQgAIUIAIUoAAFiAARoAARIAIUIAJEgAJEgAhQgAjwnjNmfq2EGVwYAT4UvO33AqzZDwEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoACTHTHfCzC4MNkBHsnGBYUEiAARIAgQAYIAESAIEAGCABEgCBABggARIAgQAYIAESAIEAGCABEgCBABggARIAgQAYIAESAIEAEiQBAgAgQBIkAQIAIEASJAECACBAEiQBAgAgQBIkAQIAIEASJAECACBAEiQBAgAgQBIkAQIAIEASJABAgCRIAgQAQIAkSAIEAECAJEgCBABAgCRIDwNMCVzJL2lt3LyGaLmr+xdmeLBChABIgABYgAEaAAESACFCACRIACRIAIUIAIEAEKEAEiQAEiQAQoQASIAAWIABGgABEgAhQgAkSAAhSgABGgAAUoQAQoQAEKEAEKUIACRIAIUIAIEAEKEAEiQAEiQAQoQASIAAWIABGgABEgAhQgAkSAAkSACFCACBABChABIkABIkAEKEABChABClCAAkSAAhSgABGgAAUoQAQoQAEKEAEiQAEiQAQoQASIAAWIABGgABEgAhQgAkSAAkSACDDJjFnRBy6aVyb6HKto3mhiJp+4W/OOXa8bX5CZ/EVqU9YbAuzwCyNAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKcEvnDCqaV3cyg86ieQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwJv8Af3P8SOrUE9bAAAAAElFTkSuQmCC"/>
75
+ <span class="text-xs text-gray-300">Bob building payments</span>
76
+ </div>
77
+ </div>
78
+
79
+ </div>
80
+
81
+ </div>
82
+ </div>
83
+
84
+ <div class="max-w-3xl mx-auto px-6">
85
+
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Multiplayer graphic: Slack on top, CLI sessions below, arrows between -->
90
+ <div class="py-16 border-t border-gray-200">
91
+ <div class="max-w-5xl mx-auto px-6">
92
+ <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider text-center">One channel, every session</h2>
93
+
94
+ <!-- Row 1: Slack channel -->
95
+ <div class="mt-8 max-w-[30rem] mx-auto bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden">
96
+ <div class="border-b border-gray-200 px-4 py-2.5 bg-gray-50 flex items-center gap-2">
97
+ <svg class="w-4 h-4 text-[#4A154B]" viewBox="0 0 24 24" fill="currentColor"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.124 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.52 2.521h-2.522V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.165 0a2.528 2.528 0 0 1 2.522 2.522v6.312zm-2.522 10.124a2.528 2.528 0 0 1 2.522 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.521-2.52v-2.523h2.521zm0-1.271a2.527 2.527 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.313A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.522h-6.313z"/></svg>
98
+ <span class="text-gray-900 font-bold text-sm"># webapp</span>
99
+ </div>
100
+ <div class="px-4 py-3 space-y-3 text-xs">
101
+ <div class="flex gap-2">
102
+ <div class="w-6 h-6 rounded bg-blue-500 flex items-center justify-center text-white text-[10px] font-bold shrink-0 mt-0.5">A</div>
103
+ <div>
104
+ <div class="flex items-baseline gap-1.5"><span class="text-gray-900 font-bold">Alice</span><span class="text-gray-400 text-[10px]">auth</span><span class="text-gray-400 text-[10px]">10:31</span></div>
105
+ <p class="text-gray-700">implement auth middleware with RS256</p>
106
+ </div>
39
107
  </div>
40
- <div class="text-gray-500"> Hooks installed. MCP server registered. Logged in as manu@acme.dev</div>
41
- <div class="border-t border-gray-700 pt-3">
42
- <span class="text-polaris-400">&gt;</span> <span class="text-gray-300">/polaris join #webapp</span>
108
+ <div class="flex gap-2">
109
+ <div class="w-6 h-6 rounded bg-blue-200 flex items-center justify-center shrink-0 mt-0.5"><svg class="w-4 h-4 text-blue-600" viewBox="0 0 16 16" fill="currentColor"><rect x="3" y="1" width="10" height="7" rx="1"/><rect x="1" y="5" width="14" height="2"/><rect x="5" y="4" width="2" height="1" fill="#bfdbfe"/><rect x="9" y="4" width="2" height="1" fill="#bfdbfe"/><rect x="4" y="8" width="2" height="3"/><rect x="7" y="8" width="2" height="3"/><rect x="10" y="8" width="2" height="3"/></svg></div>
110
+ <div>
111
+ <div class="flex items-baseline gap-1.5"><span class="text-gray-900 font-bold">agent.alice</span><span class="text-gray-400 text-[10px]">10:31</span></div>
112
+ <p class="text-gray-700">Creating <code class="bg-gray-100 px-1 rounded text-red-600 text-[10px]">src/middleware/auth.ts</code>...</p>
113
+ </div>
43
114
  </div>
44
- <div class="text-gray-500"> Connected to webapp/s-4f2a as user:manu</div>
45
- <div class="border-t border-gray-700 pt-3">
46
- <span class="text-polaris-400">&gt;</span> <span class="text-gray-300">implement the auth middleware using RS256</span>
115
+ <div class="flex gap-2">
116
+ <div class="w-6 h-6 rounded bg-orange-500 flex items-center justify-center text-white text-[10px] font-bold shrink-0 mt-0.5">B</div>
117
+ <div>
118
+ <div class="flex items-baseline gap-1.5"><span class="text-gray-900 font-bold">Bob</span><span class="text-gray-400 text-[10px]">payments</span><span class="text-gray-400 text-[10px]">10:32</span></div>
119
+ <p class="text-gray-700">add Stripe webhook handler</p>
120
+ </div>
47
121
  </div>
48
- <div class="text-gray-400"> I'll create src/middleware/auth.ts with RS256 JWT verification...</div>
49
- <div class="mt-1 pl-4 border-l-2 border-yellow-500/50">
50
- <span class="text-yellow-400 text-xs">priya via slack</span>
51
- <span class="text-gray-400"> &mdash; make sure to add rate limiting on that endpoint</span>
122
+ <div class="flex gap-2">
123
+ <div class="w-6 h-6 rounded bg-orange-200 flex items-center justify-center shrink-0 mt-0.5"><svg class="w-4 h-4 text-orange-600" viewBox="0 0 16 16" fill="currentColor"><rect x="3" y="1" width="10" height="7" rx="1"/><rect x="1" y="5" width="14" height="2"/><rect x="5" y="4" width="2" height="1" fill="#fed7aa"/><rect x="9" y="4" width="2" height="1" fill="#fed7aa"/><rect x="4" y="8" width="2" height="3"/><rect x="7" y="8" width="2" height="3"/><rect x="10" y="8" width="2" height="3"/></svg></div>
124
+ <div>
125
+ <div class="flex items-baseline gap-1.5"><span class="text-gray-900 font-bold">agent.bob</span><span class="text-gray-400 text-[10px]">10:32</span></div>
126
+ <p class="text-gray-700">Creating <code class="bg-gray-100 px-1 rounded text-red-600 text-[10px]">src/api/webhooks/stripe.ts</code>...</p>
127
+ </div>
128
+ </div>
129
+ <div class="flex gap-2">
130
+ <div class="w-6 h-6 rounded bg-orange-500 flex items-center justify-center text-white text-[10px] font-bold shrink-0 mt-0.5">B</div>
131
+ <div>
132
+ <div class="flex items-baseline gap-1.5"><span class="text-gray-900 font-bold">Bob</span><span class="text-gray-400 text-[10px]">&rarr; auth</span><span class="text-gray-400 text-[10px]">10:33</span></div>
133
+ <p class="text-gray-700"><span class="text-blue-600 font-medium">@agent.alice</span> don't forget rate limiting on that endpoint</p>
134
+ </div>
135
+ </div>
136
+ <div class="flex gap-2">
137
+ <div class="w-6 h-6 rounded bg-blue-500 flex items-center justify-center text-white text-[10px] font-bold shrink-0 mt-0.5">A</div>
138
+ <div>
139
+ <div class="flex items-baseline gap-1.5"><span class="text-gray-900 font-bold">Alice</span><span class="text-gray-400 text-[10px]">&rarr; payments</span><span class="text-gray-400 text-[10px]">10:33</span></div>
140
+ <p class="text-gray-700"><span class="text-blue-600 font-medium">@agent.bob</span> use the shared secret from vault, not env vars</p>
141
+ </div>
142
+ </div>
143
+ <div class="flex gap-2">
144
+ <div class="w-6 h-6 rounded bg-blue-200 flex items-center justify-center shrink-0 mt-0.5"><svg class="w-4 h-4 text-blue-600" viewBox="0 0 16 16" fill="currentColor"><rect x="3" y="1" width="10" height="7" rx="1"/><rect x="1" y="5" width="14" height="2"/><rect x="5" y="4" width="2" height="1" fill="#bfdbfe"/><rect x="9" y="4" width="2" height="1" fill="#bfdbfe"/><rect x="4" y="8" width="2" height="3"/><rect x="7" y="8" width="2" height="3"/><rect x="10" y="8" width="2" height="3"/></svg></div>
145
+ <div>
146
+ <div class="flex items-baseline gap-1.5"><span class="text-gray-900 font-bold">agent.alice</span><span class="text-gray-400 text-[10px]">10:33</span></div>
147
+ <p class="text-gray-700">Good call. Adding rate limiter...</p>
148
+ </div>
52
149
  </div>
53
- <div class="text-gray-400"> Good call. Adding rate limiting middleware before deploying...</div>
54
150
  </div>
55
151
  </div>
152
+
153
+ <!-- Arrows -->
154
+ <div class="max-w-[30rem] mx-auto grid grid-cols-2 gap-4 py-3">
155
+ <div class="flex justify-center">
156
+ <svg class="w-6 h-10 text-gray-300" viewBox="0 0 24 40" fill="none" stroke="currentColor" stroke-width="2">
157
+ <path d="M8 4 L8 36 M4 8 L8 4 L12 8" stroke-linecap="round" stroke-linejoin="round"/>
158
+ <path d="M16 36 L16 4 M12 32 L16 36 L20 32" stroke-linecap="round" stroke-linejoin="round"/>
159
+ </svg>
160
+ </div>
161
+ <div class="flex justify-center">
162
+ <svg class="w-6 h-10 text-gray-300" viewBox="0 0 24 40" fill="none" stroke="currentColor" stroke-width="2">
163
+ <path d="M8 4 L8 36 M4 8 L8 4 L12 8" stroke-linecap="round" stroke-linejoin="round"/>
164
+ <path d="M16 36 L16 4 M12 32 L16 36 L20 32" stroke-linecap="round" stroke-linejoin="round"/>
165
+ </svg>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Row 2: CLI sessions -->
170
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
171
+
172
+ <!-- Alice's terminal -->
173
+ <div class="bg-gray-900 rounded-xl overflow-hidden shadow-xl">
174
+ <div class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-800">
175
+ <div class="w-2.5 h-2.5 rounded-full bg-red-500/80"></div>
176
+ <div class="w-2.5 h-2.5 rounded-full bg-yellow-500/80"></div>
177
+ <div class="w-2.5 h-2.5 rounded-full bg-green-500/80"></div>
178
+ <span class="ml-2 text-xs text-gray-500 font-mono">alice &mdash; claude code</span>
179
+ </div>
180
+ <div class="px-4 py-3 font-mono text-xs leading-relaxed space-y-2">
181
+ <div>
182
+ <span class="text-polaris-400">&gt;</span> <span class="text-gray-300">/polaris join #webapp</span>
183
+ </div>
184
+ <div class="text-gray-500"> Connected as alice/auth</div>
185
+ <div class="border-t border-gray-700 pt-2">
186
+ <span class="text-polaris-400">&gt;</span> <span class="text-gray-300">implement auth middleware with RS256</span>
187
+ </div>
188
+ <div class="text-gray-400"> Creating src/middleware/auth.ts with RS256 JWT verification...</div>
189
+ <div class="pl-3 border-l-2 border-orange-500/50">
190
+ <span class="text-orange-400 text-[10px]">bob via slack</span>
191
+ <span class="text-gray-400"> &mdash; don't forget rate limiting</span>
192
+ </div>
193
+ <div class="text-gray-400"> Good call. Adding rate limiter...</div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Bob's terminal -->
198
+ <div class="bg-gray-900 rounded-xl overflow-hidden shadow-xl">
199
+ <div class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-800">
200
+ <div class="w-2.5 h-2.5 rounded-full bg-red-500/80"></div>
201
+ <div class="w-2.5 h-2.5 rounded-full bg-yellow-500/80"></div>
202
+ <div class="w-2.5 h-2.5 rounded-full bg-green-500/80"></div>
203
+ <span class="ml-2 text-xs text-gray-500 font-mono">bob &mdash; claude code</span>
204
+ </div>
205
+ <div class="px-4 py-3 font-mono text-xs leading-relaxed space-y-2">
206
+ <div>
207
+ <span class="text-polaris-400">&gt;</span> <span class="text-gray-300">/polaris join #webapp</span>
208
+ </div>
209
+ <div class="text-gray-500"> Connected as bob/payments</div>
210
+ <div class="border-t border-gray-700 pt-2">
211
+ <span class="text-polaris-400">&gt;</span> <span class="text-gray-300">add Stripe webhook handler</span>
212
+ </div>
213
+ <div class="text-gray-400"> Creating src/api/webhooks/stripe.ts...</div>
214
+ <div class="pl-3 border-l-2 border-blue-500/50">
215
+ <span class="text-blue-400 text-[10px]">alice via slack</span>
216
+ <span class="text-gray-400"> &mdash; use the shared secret from vault</span>
217
+ </div>
218
+ <div class="text-gray-400"> Pulling webhook secret from vault...</div>
219
+ </div>
220
+ </div>
221
+
222
+ </div>
56
223
  </div>
224
+ </div>
225
+
226
+ <!-- What you can do with Polaris -->
227
+ <div class="py-16 border-t border-gray-200">
228
+ <div class="max-w-3xl mx-auto px-6">
229
+ <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">What you can do with Polaris</h2>
57
230
 
58
- <!-- How it works -->
59
- <div class="py-16 border-t border-gray-200">
60
- <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">How it works</h2>
61
231
  <div class="mt-8 space-y-8">
62
- <div class="flex gap-4">
63
- <div class="w-8 h-8 rounded-lg bg-gray-900 flex items-center justify-center text-white text-sm font-bold shrink-0">1</div>
64
- <div>
65
- <h3 class="font-semibold text-gray-900">Install</h3>
66
- <p class="mt-1 text-sm text-gray-500"><code class="bg-gray-100 px-1.5 py-0.5 rounded text-gray-700 text-xs">npm install -g @lightupai/polaris && polaris</code> sets up hooks, MCP server, and authenticates your team.</p>
232
+ <div>
233
+ <h3 class="font-semibold text-gray-900">Start streaming your session</h3>
234
+ <div class="mt-2 bg-gray-900 text-gray-300 text-sm px-4 py-2.5 rounded-lg font-mono"><span class="text-polaris-400">&gt;</span> /polaris join #webapp</div>
235
+ <p class="mt-2 text-sm text-gray-500">Every prompt, response, and tool call streams to your team's Slack channel in real time.</p>
236
+ </div>
237
+ <div>
238
+ <h3 class="font-semibold text-gray-900">Pull a teammate into your session</h3>
239
+ <div class="mt-2 bg-gray-900 text-gray-300 text-sm px-4 py-2.5 rounded-lg font-mono"><span class="text-polaris-400">&gt;</span> /polaris tag @bob I need your input on this auth approach</div>
240
+ <p class="mt-2 text-sm text-gray-500">Bob gets notified in Slack with full context. His reply appears inline in your terminal.</p>
241
+ </div>
242
+ <div>
243
+ <h3 class="font-semibold text-gray-900">Catch up on a teammate's session</h3>
244
+ <div class="mt-2 bg-white border border-gray-200 rounded-lg px-4 py-2.5 flex items-center gap-2">
245
+ <svg class="w-4 h-4 text-[#4A154B] shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.124 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.52 2.521h-2.522V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.165 0a2.528 2.528 0 0 1 2.522 2.522v6.312zm-2.522 10.124a2.528 2.528 0 0 1 2.522 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.521-2.52v-2.523h2.521zm0-1.271a2.527 2.527 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.313A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.522h-6.313z"/></svg>
246
+ <span class="text-sm text-gray-700 font-mono"><span class="text-blue-600 font-medium">@polaris</span> summarize alice last 2h</span>
67
247
  </div>
248
+ <p class="mt-2 text-sm text-gray-500">Get a summary of what happened — what was built, what decisions were made, what's still in progress.</p>
68
249
  </div>
69
- <div class="flex gap-4">
70
- <div class="w-8 h-8 rounded-lg bg-gray-900 flex items-center justify-center text-white text-sm font-bold shrink-0">2</div>
71
- <div>
72
- <h3 class="font-semibold text-gray-900">Connect</h3>
73
- <p class="mt-1 text-sm text-gray-500"><code class="bg-gray-100 px-1.5 py-0.5 rounded text-gray-700 text-xs">/polaris join #your-channel</code> links your Claude Code session to your team's Slack channel.</p>
250
+ <div>
251
+ <h3 class="font-semibold text-gray-900">Redirect an agent from Slack</h3>
252
+ <div class="mt-2 bg-white border border-gray-200 rounded-lg px-4 py-2.5 flex items-center gap-2">
253
+ <svg class="w-4 h-4 text-[#4A154B] shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.124 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.52 2.521h-2.522V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.165 0a2.528 2.528 0 0 1 2.522 2.522v6.312zm-2.522 10.124a2.528 2.528 0 0 1 2.522 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.521-2.52v-2.523h2.521zm0-1.271a2.527 2.527 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.313A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.522h-6.313z"/></svg>
254
+ <span class="text-sm text-gray-700 font-mono"><span class="text-blue-600 font-medium">@agent.alice</span> use RS256, not HS256 &mdash; we need asymmetric keys</span>
74
255
  </div>
256
+ <p class="mt-2 text-sm text-gray-500">Your message lands directly in Alice's coding session. The agent picks it up and adjusts.</p>
75
257
  </div>
76
- <div class="flex gap-4">
77
- <div class="w-8 h-8 rounded-lg bg-gray-900 flex items-center justify-center text-white text-sm font-bold shrink-0">3</div>
78
- <div>
79
- <h3 class="font-semibold text-gray-900">Collaborate</h3>
80
- <p class="mt-1 text-sm text-gray-500">Every prompt and response streams to Slack. Teammates reply there and their messages appear inline in your agent session.</p>
258
+ <div>
259
+ <h3 class="font-semibold text-gray-900">Attach session context to a PR</h3>
260
+ <div class="mt-2 bg-gray-900 text-gray-300 text-sm px-4 py-2.5 rounded-lg font-mono"><span class="text-polaris-400">&gt;</span> /polaris attach-pr #482</div>
261
+ <p class="mt-2 text-sm text-gray-500">Adds a session transcript — prompts, decisions, and reasoning — to the pull request. Reviewers see the "why," not just the "what."</p>
262
+ </div>
263
+ <div>
264
+ <h3 class="font-semibold text-gray-900">Search past sessions</h3>
265
+ <div class="mt-2 bg-white border border-gray-200 rounded-lg px-4 py-2.5 flex items-center gap-2">
266
+ <svg class="w-4 h-4 text-[#4A154B] shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.124 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.52 2.521h-2.522V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.165 0a2.528 2.528 0 0 1 2.522 2.522v6.312zm-2.522 10.124a2.528 2.528 0 0 1 2.522 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.521-2.52v-2.523h2.521zm0-1.271a2.527 2.527 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.313A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.522h-6.313z"/></svg>
267
+ <span class="text-sm text-gray-700 font-mono"><span class="text-blue-600 font-medium">@polaris</span> search "webhook secret rotation"</span>
81
268
  </div>
269
+ <p class="mt-2 text-sm text-gray-500">Find when and why a decision was made, across all sessions.</p>
82
270
  </div>
83
271
  </div>
272
+
84
273
  </div>
274
+ </div>
85
275
 
86
- <!-- Why Polaris -->
87
- <div class="py-16 border-t border-gray-200">
88
- <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Why Polaris</h2>
89
- <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
90
- <div class="border border-gray-200 rounded-lg p-5">
91
- <h3 class="font-semibold text-gray-900">No context switching</h3>
92
- <p class="mt-2 text-sm text-gray-500">Teammate messages arrive directly in your coding session. No tab switching, no copy-pasting, no "hey can you check Slack."</p>
276
+ <!-- Why Polaris -->
277
+ <div class="">
278
+ <!-- Banner -->
279
+ <div class="bg-gray-900 px-6 py-12 text-center">
280
+ <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Why Polaris</h2>
281
+ <p class="mt-4 text-2xl font-bold text-white leading-snug max-w-2xl mx-auto">Your prompts are the most valuable artifact in your engineering workflow.</p>
282
+ <p class="mt-4 text-sm text-gray-400 max-w-xl mx-auto">Every prompt carries intent, context, and decision-making that no commit message can reconstruct. Today, all of it vanishes when the session ends.</p>
283
+ </div>
284
+
285
+ <!-- Pain points -->
286
+ <div class="max-w-3xl mx-auto px-6 py-10 space-y-0">
287
+ <div class="flex items-start gap-6 py-6 border-b border-gray-100">
288
+ <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center shrink-0">
289
+ <svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M3 3l18 18"/></svg>
93
290
  </div>
94
- <div class="border border-gray-200 rounded-lg p-5">
95
- <h3 class="font-semibold text-gray-900">Full session visibility</h3>
96
- <p class="mt-2 text-sm text-gray-500">Every prompt, tool call, and response is captured and streamed to your team. Anyone can see what's happening and jump in.</p>
291
+ <div>
292
+ <h3 class="font-semibold text-gray-900">AI sessions are invisible</h3>
293
+ <p class="mt-1 text-sm text-gray-500">When someone's coding with an AI agent, the rest of the team has no idea what's happening. It's pair programming behind a locked door.</p>
97
294
  </div>
98
- <div class="border border-gray-200 rounded-lg p-5">
99
- <h3 class="font-semibold text-gray-900">Human + AI multiplayer</h3>
100
- <p class="mt-2 text-sm text-gray-500">Multiple developers, multiple agents, concurrent sessions. Humans and AI are first-class participants on the same floor.</p>
295
+ </div>
296
+ <div class="flex items-start gap-6 py-6 border-b border-gray-100">
297
+ <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center shrink-0">
298
+ <svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
299
+ </div>
300
+ <div>
301
+ <h3 class="font-semibold text-gray-900">Knowledge evaporates</h3>
302
+ <p class="mt-1 text-sm text-gray-500">The full reasoning chain — why the agent chose one approach over another, what it tried and rejected — disappears with the session. Only the final code survives.</p>
303
+ </div>
304
+ </div>
305
+ <div class="flex items-start gap-6 py-6 border-b border-gray-100">
306
+ <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center shrink-0">
307
+ <svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
308
+ </div>
309
+ <div>
310
+ <h3 class="font-semibold text-gray-900">Feedback comes too late</h3>
311
+ <p class="mt-1 text-sm text-gray-500">Teammates see the pull request, not the process. By then the agent has already committed to a path that one Slack message could have redirected.</p>
312
+ </div>
313
+ </div>
314
+ <div class="flex items-start gap-6 py-6">
315
+ <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center shrink-0">
316
+ <svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
101
317
  </div>
102
- <div class="border border-gray-200 rounded-lg p-5">
103
- <h3 class="font-semibold text-gray-900">Two-minute setup</h3>
104
- <p class="mt-2 text-sm text-gray-500">One npm install, one command. No config files, no Docker, no infrastructure. Works with your existing Slack workspace.</p>
318
+ <div>
319
+ <h3 class="font-semibold text-gray-900">Multiple agents, zero shared context</h3>
320
+ <p class="mt-1 text-sm text-gray-500">Teams running concurrent AI sessions have no coordination layer. Alice's agent doesn't know what Bob's agent is building, leading to conflicts and duplicated work.</p>
105
321
  </div>
106
322
  </div>
107
323
  </div>
108
324
 
109
- <!-- Slack demo -->
325
+ <!-- Resolution -->
326
+ <div class="bg-gray-50">
327
+ <div class="max-w-3xl mx-auto px-6 py-8">
328
+ <p class="text-sm text-gray-700"><span class="font-semibold text-gray-900">Polaris fixes this.</span> Every prompt, every response, every tool call — captured, streamed to your team in real time, and stored as permanent memory. Teammates can intervene mid-session. Agents across sessions share context through the hub. Nothing is lost.</p>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <div class="max-w-3xl mx-auto px-6">
334
+
335
+ <!-- How it works -->
110
336
  <div class="py-16 border-t border-gray-200">
111
- <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">What your team sees in Slack</h2>
112
- <div class="mt-8 bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden">
113
- <div class="flex">
114
- <div class="w-14 bg-[#4A154B] shrink-0 flex flex-col items-center py-3 gap-3">
115
- <div class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white text-xs font-bold">A</div>
116
- <div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
117
- <svg class="w-4 h-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
118
- </div>
337
+ <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">How it works</h2>
338
+ <div class="mt-8 space-y-8">
339
+ <div class="flex gap-4">
340
+ <div class="w-8 h-8 rounded-lg bg-gray-900 flex items-center justify-center text-white text-sm font-bold shrink-0">1</div>
341
+ <div>
342
+ <h3 class="font-semibold text-gray-900">Connect</h3>
343
+ <p class="mt-1 text-sm text-gray-500">Sign up and connect your team's Slack workspace. Polaris uses Slack as the collaboration layer — no new apps to learn.</p>
119
344
  </div>
120
- <div class="flex-1">
121
- <div class="border-b border-gray-200 px-4 py-2.5 flex items-center justify-between">
122
- <div class="flex items-center gap-2">
123
- <span class="text-gray-900 font-bold text-sm"># webapp</span>
124
- <span class="text-gray-400 text-xs">|</span>
125
- <span class="text-gray-400 text-xs">2 drivers, 1 advisor</span>
126
- </div>
127
- <div class="flex items-center gap-3">
128
- <div class="flex -space-x-1.5">
129
- <div class="w-5 h-5 rounded-full bg-blue-500 border-2 border-white"></div>
130
- <div class="w-5 h-5 rounded-full bg-yellow-500 border-2 border-white"></div>
131
- <div class="w-5 h-5 rounded-full bg-purple-600 border-2 border-white"></div>
132
- </div>
133
- <span class="text-gray-400 text-xs">3</span>
134
- </div>
135
- </div>
136
- <div class="px-5 py-4 space-y-4 text-sm">
137
- <div class="flex gap-3">
138
- <div class="w-8 h-8 rounded-md bg-blue-500 flex items-center justify-center text-white text-xs font-bold shrink-0 mt-0.5">M</div>
139
- <div>
140
- <div class="flex items-baseline gap-2"><span class="text-gray-900 font-bold text-sm">Manu</span><span class="text-gray-400 text-xs">auth</span><span class="text-gray-400 text-xs">10:31 AM</span></div>
141
- <p class="text-gray-700">Let's implement the auth middleware</p>
142
- </div>
143
- </div>
144
- <div class="flex gap-3">
145
- <div class="w-8 h-8 rounded-md bg-green-600 flex items-center justify-center text-white text-xs font-bold shrink-0 mt-0.5">AI</div>
146
- <div>
147
- <div class="flex items-baseline gap-2"><span class="text-gray-900 font-bold text-sm">Agent</span><span class="text-gray-400 text-xs">&rarr; manu/auth</span><span class="text-gray-400 text-xs">10:31 AM</span></div>
148
- <p class="text-gray-700">I'll create <code class="bg-gray-100 px-1 rounded text-red-600 text-xs">src/middleware/auth.ts</code> with JWT verification...</p>
149
- </div>
150
- </div>
151
- <div class="flex gap-3">
152
- <div class="w-8 h-8 rounded-md bg-yellow-500 flex items-center justify-center text-white text-xs font-bold shrink-0 mt-0.5">P</div>
153
- <div>
154
- <div class="flex items-baseline gap-2"><span class="text-gray-900 font-bold text-sm">Priya</span><span class="text-gray-400 text-xs">&rarr; auth</span><span class="text-gray-400 text-xs">10:33 AM</span></div>
155
- <p class="text-gray-700">Use RS256, not HS256 — we need asymmetric keys for the microservices</p>
156
- </div>
157
- </div>
158
- <div class="flex gap-3">
159
- <div class="w-8 h-8 rounded-md bg-green-600 flex items-center justify-center text-white text-xs font-bold shrink-0 mt-0.5">AI</div>
160
- <div>
161
- <div class="flex items-baseline gap-2"><span class="text-gray-900 font-bold text-sm">Agent</span><span class="text-gray-400 text-xs">&rarr; manu/auth</span><span class="text-gray-400 text-xs">10:33 AM</span></div>
162
- <p class="text-gray-700">Good point from Priya. Switching to RS256 and updating the key config...</p>
163
- </div>
164
- </div>
165
- </div>
345
+ </div>
346
+ <div class="flex gap-4">
347
+ <div class="w-8 h-8 rounded-lg bg-gray-900 flex items-center justify-center text-white text-sm font-bold shrink-0">2</div>
348
+ <div>
349
+ <h3 class="font-semibold text-gray-900">Install</h3>
350
+ <p class="mt-1 text-sm text-gray-500"><code class="bg-gray-100 px-1.5 py-0.5 rounded text-gray-700 text-xs">npx @lightupai/polaris</code> on your machine sets up hooks, MCP server, and logs you in.</p>
351
+ </div>
352
+ </div>
353
+ <div class="flex gap-4">
354
+ <div class="w-8 h-8 rounded-lg bg-gray-900 flex items-center justify-center text-white text-sm font-bold shrink-0">3</div>
355
+ <div>
356
+ <h3 class="font-semibold text-gray-900">Collaborate</h3>
357
+ <p class="mt-1 text-sm text-gray-500"><code class="bg-gray-100 px-1.5 py-0.5 rounded text-gray-700 text-xs">/polaris join #your-channel</code> links your Claude Code session to Slack. Every prompt and response streams live — teammates reply there and their messages appear inline.</p>
166
358
  </div>
167
359
  </div>
168
360
  </div>
169
361
  </div>
170
362
 
171
- <!-- Get Started -->
172
- <div id="get-started" class="py-16 border-t border-gray-200">
173
- <h2 class="text-2xl font-bold text-gray-900">Get started</h2>
174
- <div class="mt-6 bg-gray-900 rounded-xl overflow-hidden">
175
- <div class="flex items-center justify-between px-4 py-2.5 bg-gray-800">
176
- <span class="text-xs text-gray-500 font-mono">terminal</span>
177
- <button class="polaris-copy text-gray-500 hover:text-gray-300 transition" data-copy="install-cmd">
178
- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
179
- </button>
180
- </div>
181
- <pre class="px-5 py-4 font-mono text-sm text-gray-300 leading-relaxed" id="install-cmd"><span class="text-green-400">$</span> npm install -g @lightupai/polaris
182
- <span class="text-green-400">$</span> polaris</pre>
183
- </div>
184
- <p class="mt-4 text-sm text-gray-500">Then in Claude Code:</p>
185
- <div class="mt-2 bg-gray-900 rounded-xl overflow-hidden">
186
- <pre class="px-5 py-4 font-mono text-sm text-gray-300 leading-relaxed"><span class="text-polaris-400">&gt;</span> /polaris join #your-channel</pre>
187
- </div>
188
- <p class="mt-6 text-sm text-gray-500">That's it. Your session is now live to your team.</p>
189
- <div class="mt-8">
363
+ <!-- Bottom CTA -->
364
+ <div class="py-16 border-t border-gray-200 text-center">
365
+ <h2 class="text-2xl font-bold text-gray-900">Ready to try it?</h2>
366
+ <p class="mt-2 text-sm text-gray-500">Set up takes less than two minutes.</p>
367
+ <div class="mt-6">
190
368
  <a href="/signup" class="inline-flex items-center gap-3 px-5 py-2.5 bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 transition text-sm font-medium text-gray-700">
191
369
  <svg width="16" height="16" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 01-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/><path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 009 18z" fill="#34A853"/><path d="M3.964 10.71A5.41 5.41 0 013.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 000 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/><path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 00.957 4.958L3.964 6.29C4.672 4.163 6.656 2.58 9 3.58z" fill="#EA4335"/></svg>
192
370
  Sign up with Google
@@ -199,7 +377,6 @@ export function renderLandingPage(): string {
199
377
  <div class="max-w-3xl mx-auto px-6 py-8 flex items-center justify-between text-sm text-gray-400">
200
378
  <span>Polaris</span>
201
379
  <div class="flex items-center gap-6">
202
- <a href="https://github.com/anthropics/polaris" class="hover:text-gray-600 transition">GitHub</a>
203
380
  <a href="/login" class="hover:text-gray-600 transition">Sign in</a>
204
381
  </div>
205
382
  </div>