@lightupai/polaris 0.0.39 → 0.0.41

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/web/layout.ts +6 -2
  3. package/src/web/pages.ts +361 -147
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lightupai/polaris",
3
- "version": "0.0.39",
3
+ "version": "0.0.41",
4
4
  "type": "module",
5
5
  "bin": {
6
6
  "polaris": "bin/polaris",
package/src/web/layout.ts CHANGED
@@ -27,7 +27,7 @@ tailwind.config = {
27
27
  }
28
28
  </script>
29
29
  </head>
30
- <body class="bg-gray-50 text-gray-900 antialiased">${body}
30
+ <body class="bg-gray-50 text-gray-900 antialiased"><div class="overflow-x-hidden max-w-[100vw]">${body}</div>
31
31
  <script>
32
32
  document.addEventListener('click', function(e) {
33
33
  const btn = e.target.closest('.polaris-copy');
@@ -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 hidden sm:block">Sign in</a>
73
+ <a href="/signup" class="inline-flex items-center gap-2 px-3 py-1.5 sm:px-4 sm:py-2 bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 transition text-xs sm: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,402 @@ import type { Org } from "../service/db";
6
6
  export function renderLandingPage(): string {
7
7
  return `
8
8
  ${nav()}
9
+ <!-- Hero: text left, hub diagram right -->
10
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 pt-16 sm:pt-24 pb-16">
11
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
12
+
13
+ <!-- Left: text -->
14
+ <div class="min-w-0">
15
+ <h1 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 lg:text-5xl">
16
+ Meet Polaris.<br>It's like Gong for Claude Code sessions.
17
+ </h1>
18
+ <p class="mt-6 text-base sm: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>
21
+ </div>
22
+
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>
30
+ </div>
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
+ <!-- Branching arrows: desktop -->
53
+ <svg class="hidden md:block w-80 h-16 text-gray-300" viewBox="0 0 320 64" fill="none" stroke="currentColor" stroke-width="1.5" overflow="visible">
54
+ <path d="M160 0 L160 20" stroke-linecap="round"/>
55
+ <path d="M157 20 L160 0 L163 20" stroke-linecap="round" stroke-linejoin="round"/>
56
+ <path d="M160 20 L48 58" stroke-linecap="round"/>
57
+ <path d="M52 46 L48 58 L60 54" stroke-linecap="round" stroke-linejoin="round"/>
58
+ <path d="M160 20 L160 104" stroke-linecap="round"/>
59
+ <path d="M157 101 L160 104 L163 101" stroke-linecap="round" stroke-linejoin="round"/>
60
+ <path d="M160 20 L272 58" stroke-linecap="round"/>
61
+ <path d="M260 54 L272 58 L268 46" stroke-linecap="round" stroke-linejoin="round"/>
62
+ </svg>
63
+ <!-- Branching arrow: mobile (simple vertical) -->
64
+ <svg class="md:hidden w-5 h-8 text-gray-300" viewBox="0 0 20 32" fill="none" stroke="currentColor" stroke-width="1.5">
65
+ <path d="M7 4 L7 28 M4 7 L7 4 L10 7" stroke-linecap="round" stroke-linejoin="round"/>
66
+ <path d="M13 28 L13 4 M10 25 L13 28 L16 25" stroke-linecap="round" stroke-linejoin="round"/>
67
+ </svg>
68
+
69
+ <!-- Session nodes -->
70
+ <div class="flex flex-wrap justify-center items-start gap-4 md:gap-6">
71
+ <div class="flex items-center gap-2 px-4 py-2.5 bg-gray-900 rounded-lg shadow-sm">
72
+ <img class="w-5 h-5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAKACAMAAAA7EzkRAAAAFVBMVEVMaXHZd1fZd1babUjZd1faf1rZd1epRaWRAAAABnRSTlMAXawH8g5t5RLrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFOklEQVR42u3WUQ6EIAxAQcDV+x95r1Bjk2Kdid81wkMdAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADebtHa9gFedPYTIAIUoAAFiAAFKEABIkABClCACFCAAhQgAkSAAkSACFCACBABChABIkABIkAEKEAEiAAFiAARoAARIAIUIAJEgAJEgAhQgAgQAQoQASJAAQpQgAhQgAIUIAIUoAAFiAAFKEABIkABClCACBABChABIkABIkAEKEAEiAAFiAARoAARIAIUIAJEgAJEgAhQgAgQAQoQASJAASJABChABIgABShAASJAAQpQgAhQgAIUIAIUoAAFiAARoAARIAIUIAJEgAJEgAhQgAjwnjNmfq2EGVwYAT4UvO33AqzZDwEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoACTHTHfCzC4MNkBHsnGBYUEiAARIAgQAYIAESAIEAGCABEgCBABggARIAgQAYIAESAIEAGCABEgCBABggARIAgQAYIAESAIEAEiQBAgAgQBIkAQIAIEASJAECACBAEiQBAgAgQBIkAQIAIEASJAECACBAEiQBAgAgQBIkAQIAIEASJABAgCRIAgQAQIAkSAIEAECAJEgCBABAgCRIDwNMCVzJL2lt3LyGaLmr+xdmeLBChABIgABYgAEaAAESACFCACRIACRIAIUIAIEAEKEAEiQAEiQAQoQASIAAWIABGgABEgAhQgAkSAAhSgABGgAAUoQAQoQAEKEAEKUIACRIAIUIAIEAEKEAEiQAEiQAQoQASIAAWIABGgABEgAhQgAkSAAkSACFCACBABChABIkABIkAEKEABChABClCAAkSAAhSgABGgAAUoQAQoQAEKEAEiQAEiQAQoQASIAAWIABGgABEgAhQgAkSAAkSACDDJjFnRBy6aVyb6HKto3mhiJp+4W/OOXa8bX5CZ/EVqU9YbAuzwCyNAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKcEvnDCqaV3cyg86ieQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwJv8Af3P8SOrUE9bAAAAAElFTkSuQmCC"/>
73
+ <span class="text-xs text-gray-300">Alice working on auth</span>
74
+ </div>
75
+ <div class="flex items-center gap-2 px-4 py-2.5 md:mt-10 bg-white border border-gray-200 rounded-lg shadow-sm">
76
+ <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>
77
+ <span class="text-xs text-gray-700">Martha writing docs</span>
78
+ </div>
79
+ <div class="flex items-center gap-2 px-4 py-2.5 bg-gray-900 rounded-lg shadow-sm">
80
+ <img class="w-5 h-5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAKACAMAAAA7EzkRAAAAFVBMVEVMaXHZd1fZd1babUjZd1faf1rZd1epRaWRAAAABnRSTlMAXawH8g5t5RLrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFOklEQVR42u3WUQ6EIAxAQcDV+x95r1Bjk2Kdid81wkMdAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADebtHa9gFedPYTIAIUoAAFiAAFKEABIkABClCACFCAAhQgAkSAAkSACFCACBABChABIkABIkAEKEAEiAAFiAARoAARIAIUIAJEgAJEgAhQgAgQAQoQASJAAQpQgAhQgAIUIAIUoAAFiAAFKEABIkABClCACBABChABIkABIkAEKEAEiAAFiAARoAARIAIUIAJEgAJEgAhQgAgQAQoQASJAASJABChABIgABShAASJAAQpQgAhQgAIUIAIUoAAFiAARoAARIAIUIAJEgAJEgAhQgAjwnjNmfq2EGVwYAT4UvO33AqzZDwEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoACTHTHfCzC4MNkBHsnGBYUEiAARIAgQAYIAESAIEAGCABEgCBABggARIAgQAYIAESAIEAGCABEgCBABggARIAgQAYIAESAIEAEiQBAgAgQBIkAQIAIEASJAECACBAEiQBAgAgQBIkAQIAIEASJAECACBAEiQBAgAgQBIkAQIAIEASJABAgCRIAgQAQIAkSAIEAECAJEgCBABAgCRIDwNMCVzJL2lt3LyGaLmr+xdmeLBChABIgABYgAEaAAESACFCACRIACRIAIUIAIEAEKEAEiQAEiQAQoQASIAAWIABGgABEgAhQgAkSAAhSgABGgAAUoQAQoQAEKEAEKUIACRIAIUIAIEAEKEAEiQAEiQAQoQASIAAWIABGgABEgAhQgAkSAAkSACFCACBABChABIkABIkAEKEABChABClCAAkSAAhSgABGgAAUoQAQoQAEKEAEiQAEiQAQoQASIAAWIABGgABEgAhQgAkSAAkSACDDJjFnRBy6aVyb6HKto3mhiJp+4W/OOXa8bX5CZ/EVqU9YbAuzwCyNAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKUIACFKAABShAAQpQgAIUoAAFKEABClCAAhSgAAUoQAEKcEvnDCqaV3cyg86ieQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwJv8Af3P8SOrUE9bAAAAAElFTkSuQmCC"/>
81
+ <span class="text-xs text-gray-300">Bob building payments</span>
82
+ </div>
83
+ </div>
84
+
85
+ </div>
86
+
87
+ </div>
88
+ </div>
89
+
9
90
  <div class="max-w-3xl mx-auto px-6">
10
91
 
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>
23
- </div>
24
-
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>
32
- </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>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Multiplayer graphic: Slack on top, CLI sessions below, arrows between -->
96
+ <div class="py-16 border-t border-gray-200">
97
+ <div class="max-w-5xl mx-auto px-6">
98
+ <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider text-center">One channel, every session</h2>
99
+
100
+ <!-- Row 1: Slack channel -->
101
+ <div class="mt-8 max-w-[30rem] mx-auto bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden">
102
+ <div class="border-b border-gray-200 px-4 py-2.5 bg-gray-50 flex items-center gap-2">
103
+ <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>
104
+ <span class="text-gray-900 font-bold text-sm"># webapp</span>
105
+ </div>
106
+ <div class="px-4 py-3 space-y-3 text-xs">
107
+ <div class="flex gap-2">
108
+ <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>
109
+ <div>
110
+ <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>
111
+ <p class="text-gray-700">implement auth middleware with RS256</p>
112
+ </div>
36
113
  </div>
37
- <div>
38
- <span class="text-green-400">$</span> <span class="text-gray-300">polaris</span>
114
+ <div class="flex gap-2">
115
+ <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>
116
+ <div>
117
+ <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>
118
+ <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>
119
+ </div>
120
+ </div>
121
+ <div class="flex gap-2">
122
+ <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>
123
+ <div>
124
+ <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>
125
+ <p class="text-gray-700">add Stripe webhook handler</p>
126
+ </div>
127
+ </div>
128
+ <div class="flex gap-2">
129
+ <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>
130
+ <div>
131
+ <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>
132
+ <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>
133
+ </div>
134
+ </div>
135
+ <div class="flex gap-2">
136
+ <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>
137
+ <div>
138
+ <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>
139
+ <p class="text-gray-700"><span class="text-blue-600 font-medium">@agent.alice</span> don't forget rate limiting on that endpoint</p>
140
+ </div>
141
+ </div>
142
+ <div class="flex gap-2">
143
+ <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>
144
+ <div>
145
+ <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>
146
+ <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>
147
+ </div>
148
+ </div>
149
+ <div class="flex gap-2">
150
+ <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>
151
+ <div>
152
+ <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>
153
+ <p class="text-gray-700">Good call. Adding rate limiter...</p>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Arrows: single on mobile, two-column on desktop -->
160
+ <div class="flex justify-center md:hidden py-3">
161
+ <svg class="w-6 h-10 text-gray-300" viewBox="0 0 24 40" fill="none" stroke="currentColor" stroke-width="2">
162
+ <path d="M8 4 L8 36 M4 8 L8 4 L12 8" stroke-linecap="round" stroke-linejoin="round"/>
163
+ <path d="M16 36 L16 4 M12 32 L16 36 L20 32" stroke-linecap="round" stroke-linejoin="round"/>
164
+ </svg>
165
+ </div>
166
+ <div class="max-w-[30rem] mx-auto hidden md:grid grid-cols-2 gap-4 py-3">
167
+ <div class="flex justify-center">
168
+ <svg class="w-6 h-10 text-gray-300" viewBox="0 0 24 40" fill="none" stroke="currentColor" stroke-width="2">
169
+ <path d="M8 4 L8 36 M4 8 L8 4 L12 8" stroke-linecap="round" stroke-linejoin="round"/>
170
+ <path d="M16 36 L16 4 M12 32 L16 36 L20 32" stroke-linecap="round" stroke-linejoin="round"/>
171
+ </svg>
172
+ </div>
173
+ <div class="flex justify-center">
174
+ <svg class="w-6 h-10 text-gray-300" viewBox="0 0 24 40" fill="none" stroke="currentColor" stroke-width="2">
175
+ <path d="M8 4 L8 36 M4 8 L8 4 L12 8" stroke-linecap="round" stroke-linejoin="round"/>
176
+ <path d="M16 36 L16 4 M12 32 L16 36 L20 32" stroke-linecap="round" stroke-linejoin="round"/>
177
+ </svg>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Row 2: CLI sessions -->
182
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 min-w-0">
183
+
184
+ <!-- Alice's terminal -->
185
+ <div class="bg-gray-900 rounded-xl overflow-hidden shadow-xl">
186
+ <div class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-800">
187
+ <div class="w-2.5 h-2.5 rounded-full bg-red-500/80"></div>
188
+ <div class="w-2.5 h-2.5 rounded-full bg-yellow-500/80"></div>
189
+ <div class="w-2.5 h-2.5 rounded-full bg-green-500/80"></div>
190
+ <span class="ml-2 text-xs text-gray-500 font-mono">alice &mdash; claude code</span>
39
191
  </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>
192
+ <div class="px-4 py-3 font-mono text-xs leading-relaxed space-y-2">
193
+ <div>
194
+ <span class="text-polaris-400">&gt;</span> <span class="text-gray-300">/polaris join #webapp</span>
195
+ </div>
196
+ <div class="text-gray-500"> Connected as alice/auth</div>
197
+ <div class="border-t border-gray-700 pt-2">
198
+ <span class="text-polaris-400">&gt;</span> <span class="text-gray-300">implement auth middleware with RS256</span>
199
+ </div>
200
+ <div class="text-gray-400"> Creating src/middleware/auth.ts with RS256 JWT verification...</div>
201
+ <div class="pl-3 border-l-2 border-orange-500/50">
202
+ <span class="text-orange-400 text-[10px]">bob via slack</span>
203
+ <span class="text-gray-400"> &mdash; don't forget rate limiting</span>
204
+ </div>
205
+ <div class="text-gray-400"> Good call. Adding rate limiter...</div>
43
206
  </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>
207
+ </div>
208
+
209
+ <!-- Bob's terminal -->
210
+ <div class="bg-gray-900 rounded-xl overflow-hidden shadow-xl">
211
+ <div class="flex items-center gap-1.5 px-4 py-2.5 bg-gray-800">
212
+ <div class="w-2.5 h-2.5 rounded-full bg-red-500/80"></div>
213
+ <div class="w-2.5 h-2.5 rounded-full bg-yellow-500/80"></div>
214
+ <div class="w-2.5 h-2.5 rounded-full bg-green-500/80"></div>
215
+ <span class="ml-2 text-xs text-gray-500 font-mono">bob &mdash; claude code</span>
47
216
  </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>
217
+ <div class="px-4 py-3 font-mono text-xs leading-relaxed space-y-2">
218
+ <div>
219
+ <span class="text-polaris-400">&gt;</span> <span class="text-gray-300">/polaris join #webapp</span>
220
+ </div>
221
+ <div class="text-gray-500"> Connected as bob/payments</div>
222
+ <div class="border-t border-gray-700 pt-2">
223
+ <span class="text-polaris-400">&gt;</span> <span class="text-gray-300">add Stripe webhook handler</span>
224
+ </div>
225
+ <div class="text-gray-400"> Creating src/api/webhooks/stripe.ts...</div>
226
+ <div class="pl-3 border-l-2 border-blue-500/50">
227
+ <span class="text-blue-400 text-[10px]">alice via slack</span>
228
+ <span class="text-gray-400"> &mdash; use the shared secret from vault</span>
229
+ </div>
230
+ <div class="text-gray-400"> Pulling webhook secret from vault...</div>
52
231
  </div>
53
- <div class="text-gray-400"> Good call. Adding rate limiting middleware before deploying...</div>
54
232
  </div>
233
+
55
234
  </div>
56
235
  </div>
236
+ </div>
237
+
238
+ <!-- What you can do with Polaris -->
239
+ <div class="py-16 border-t border-gray-200">
240
+ <div class="max-w-3xl mx-auto px-6">
241
+ <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">What you can do with Polaris</h2>
57
242
 
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
243
  <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>
244
+ <div>
245
+ <h3 class="font-semibold text-gray-900">Start streaming your session</h3>
246
+ <div class="mt-2 bg-gray-900 text-gray-300 text-sm px-4 py-2.5 rounded-lg font-mono overflow-x-auto"><span class="text-polaris-400">&gt;</span> /polaris join #webapp</div>
247
+ <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>
248
+ </div>
249
+ <div>
250
+ <h3 class="font-semibold text-gray-900">Pull a teammate into your session</h3>
251
+ <div class="mt-2 bg-gray-900 text-gray-300 text-sm px-4 py-2.5 rounded-lg font-mono overflow-x-auto"><span class="text-polaris-400">&gt;</span> /polaris tag @bob I need your input on this auth approach</div>
252
+ <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>
253
+ </div>
254
+ <div>
255
+ <h3 class="font-semibold text-gray-900">Catch up on a teammate's session</h3>
256
+ <div class="mt-2 bg-white border border-gray-200 rounded-lg px-4 py-2.5 flex items-start gap-2 overflow-x-auto">
257
+ <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>
258
+ <span class="text-sm text-gray-700 font-mono"><span class="text-blue-600 font-medium">@polaris</span> summarize alice last 2h</span>
67
259
  </div>
260
+ <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
261
  </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>
262
+ <div>
263
+ <h3 class="font-semibold text-gray-900">Redirect an agent from Slack</h3>
264
+ <div class="mt-2 bg-white border border-gray-200 rounded-lg px-4 py-2.5 flex items-start gap-2 overflow-x-auto">
265
+ <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>
266
+ <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
267
  </div>
268
+ <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
269
  </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>
270
+ <div>
271
+ <h3 class="font-semibold text-gray-900">Attach session context to a PR</h3>
272
+ <div class="mt-2 bg-gray-900 text-gray-300 text-sm px-4 py-2.5 rounded-lg font-mono overflow-x-auto"><span class="text-polaris-400">&gt;</span> /polaris attach-pr #482</div>
273
+ <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>
274
+ </div>
275
+ <div>
276
+ <h3 class="font-semibold text-gray-900">Search past sessions</h3>
277
+ <div class="mt-2 bg-white border border-gray-200 rounded-lg px-4 py-2.5 flex items-start gap-2 overflow-x-auto">
278
+ <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>
279
+ <span class="text-sm text-gray-700 font-mono"><span class="text-blue-600 font-medium">@polaris</span> search "webhook secret rotation"</span>
81
280
  </div>
281
+ <p class="mt-2 text-sm text-gray-500">Find when and why a decision was made, across all sessions.</p>
82
282
  </div>
83
283
  </div>
284
+
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Why Polaris -->
289
+ <div class="">
290
+ <!-- Banner -->
291
+ <div class="bg-gray-900 px-6 py-12 text-center">
292
+ <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Why Polaris</h2>
293
+ <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>
294
+ <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>
84
295
  </div>
85
296
 
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>
297
+ <!-- Pain points -->
298
+ <div class="max-w-3xl mx-auto px-6 py-10 space-y-0">
299
+ <div class="flex items-start gap-6 py-6 border-b border-gray-100">
300
+ <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center shrink-0">
301
+ <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>
302
+ </div>
303
+ <div>
304
+ <h3 class="font-semibold text-gray-900">AI sessions are invisible</h3>
305
+ <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>
306
+ </div>
307
+ </div>
308
+ <div class="flex items-start gap-6 py-6 border-b border-gray-100">
309
+ <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center shrink-0">
310
+ <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>
311
+ </div>
312
+ <div>
313
+ <h3 class="font-semibold text-gray-900">Knowledge evaporates</h3>
314
+ <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>
315
+ </div>
316
+ </div>
317
+ <div class="flex items-start gap-6 py-6 border-b border-gray-100">
318
+ <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center shrink-0">
319
+ <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>
93
320
  </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>
321
+ <div>
322
+ <h3 class="font-semibold text-gray-900">Feedback comes too late</h3>
323
+ <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>
97
324
  </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>
325
+ </div>
326
+ <div class="flex items-start gap-6 py-6">
327
+ <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center shrink-0">
328
+ <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
329
  </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>
330
+ <div>
331
+ <h3 class="font-semibold text-gray-900">Multiple agents, zero shared context</h3>
332
+ <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
333
  </div>
106
334
  </div>
107
335
  </div>
108
336
 
109
- <!-- Slack demo -->
110
- <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>
337
+ <!-- Resolution -->
338
+ <div class="bg-gray-50">
339
+ <div class="max-w-3xl mx-auto px-6 py-8">
340
+ <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>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- The Vision -->
346
+ <div class="py-16 border-t border-gray-200">
347
+ <div class="max-w-3xl mx-auto px-6">
348
+ <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider text-center">The vision</h2>
349
+ <p class="mt-6 text-gray-700 text-center max-w-2xl mx-auto">Tobi Lutke, CEO of Shopify, recently described a future where every AI interaction in an organization flows through a shared, observable stream — what he calls "the shop floor." The vision he articulates is strikingly close to what Polaris already does.</p>
350
+
351
+ <div class="mt-8 flex justify-center">
352
+ <a href="https://x.com/tobi/article/2053121182044451016" target="_blank" class="block max-w-md w-full bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition overflow-hidden">
353
+ <div class="px-6 py-5">
354
+ <div class="flex items-center gap-2 text-xs text-gray-400">
355
+ <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
356
+ <span>Article</span>
118
357
  </div>
358
+ <h3 class="mt-3 text-lg font-bold text-gray-900 leading-snug">Learning on the Shop Floor</h3>
359
+ <p class="mt-1 text-sm text-gray-500">by Tobi Lutke &middot; May 9, 2026</p>
360
+ <p class="mt-3 text-xs text-polaris-600 font-medium">Read on X &rarr;</p>
119
361
  </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>
362
+ </a>
363
+ </div>
364
+
365
+ <p class="mt-8 text-gray-700 text-center max-w-2xl mx-auto">The idea behind Polaris was born independently, but the convergence isn't a coincidence. As AI agents become central to how software gets built, the need for this layer — variously called a <em>context graph</em>, a <em>memory layer</em>, <em>institutional memory</em>, or <em>decision traces</em> — becomes inevitable. A persistent, searchable record of every prompt, every decision, every session. Polaris is building that layer.</p>
366
+
367
+ </div>
368
+ </div>
369
+
370
+ <div class="max-w-3xl mx-auto px-6">
371
+
372
+ <!-- How it works -->
373
+ <div class="py-16 border-t border-gray-200">
374
+ <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">How it works</h2>
375
+ <div class="mt-8 space-y-8">
376
+ <div class="flex gap-4">
377
+ <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>
378
+ <div>
379
+ <h3 class="font-semibold text-gray-900">Connect</h3>
380
+ <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>
381
+ </div>
382
+ </div>
383
+ <div class="flex gap-4">
384
+ <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>
385
+ <div>
386
+ <h3 class="font-semibold text-gray-900">Install</h3>
387
+ <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>
388
+ </div>
389
+ </div>
390
+ <div class="flex gap-4">
391
+ <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>
392
+ <div>
393
+ <h3 class="font-semibold text-gray-900">Collaborate</h3>
394
+ <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
395
  </div>
167
396
  </div>
168
397
  </div>
169
398
  </div>
170
399
 
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">
400
+ <!-- Bottom CTA -->
401
+ <div class="py-16 border-t border-gray-200 text-center">
402
+ <h2 class="text-2xl font-bold text-gray-900">Ready to try it?</h2>
403
+ <p class="mt-2 text-sm text-gray-500">Set up takes less than two minutes.</p>
404
+ <div class="mt-6">
190
405
  <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
406
  <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
407
  Sign up with Google
@@ -199,7 +414,6 @@ export function renderLandingPage(): string {
199
414
  <div class="max-w-3xl mx-auto px-6 py-8 flex items-center justify-between text-sm text-gray-400">
200
415
  <span>Polaris</span>
201
416
  <div class="flex items-center gap-6">
202
- <a href="https://github.com/anthropics/polaris" class="hover:text-gray-600 transition">GitHub</a>
203
417
  <a href="/login" class="hover:text-gray-600 transition">Sign in</a>
204
418
  </div>
205
419
  </div>