Cookie explanation for vibecoding setup

.claude/CLAUDE-KNOWLEDGE.md

@@ -302,20 +302,6 @@ it("test name", async ({ expect }) => {
 ### Q: Where is project ownership stored in the database?
 A: Projects have an `ownerTeamId` field in the Project model (see `/apps/backend/prisma/schema.prisma`). This links to a team in the internal project.
 
-### Q: How do I make authenticated API calls from dashboard server actions?
-A: Get the session cookie and include it in the request headers:
-```typescript
-const cookieStore = await cookies();
-const sessionCookie = cookieStore.get("stack-refresh-internal");
-const response = await fetch(url, {
-  headers: {
-    'X-Stack-Access-Type': 'server',
-    'X-Stack-Project-Id': 'internal',
-    'X-Stack-Secret-Server-Key': getEnvVariable('STACK_SECRET_SERVER_KEY'),
-    ...(sessionCookie ? { 'Cookie': `${sessionCookie.name}=${sessionCookie.value}` } : {})
-  }
-});
-```
 
 ### Q: What's the difference between ensureTeamMembershipExists and ensureUserTeamPermissionExists?
 A: `ensureTeamMembershipExists` only checks if a user is a member of a team. `ensureUserTeamPermissionExists` checks if a user has a specific permission (like `team_admin`) within that team. The latter also calls `ensureTeamMembershipExists` internally.

CONTRIBUTING.md

@@ -77,6 +77,8 @@ eval "$(direnv export <bash|zsh>)"
 
 When you do this, it is recommended that you give all workspaces a port prefix other than 81, to prevent accidental conflicts when you forgot to make a feature support the $NEXT_PUBLIC_STACK_PORT_PREFIX environment variable. (for example: first workspace at 181, second workspace at 182, etc.)
 
+Also, the cookies on different ports may conflict with each other. To prevent this, open `a.localhost:18101` and `b.localhost:18201` instead or normal localhost, so the cookies are scoped differently.
+
 ## Before creating a pull request
 
 Please make sure to:

apps/dashboard/src/app/layout.tsx

@@ -100,6 +100,7 @@ export default function RootLayout({
                   <VersionAlerter />
                   <BackgroundShine />
                   {children}
+                  <DevelopmentPortDisplay />
                 </RouterProvider>
               </StackTheme>
             </StackProvider>
@@ -112,3 +113,27 @@ export default function RootLayout({
     </html>
   );
 }
+
+function DevelopmentPortDisplay() {
+  const prefix = getPublicEnvVar("NEXT_PUBLIC_STACK_PORT_PREFIX");
+  if (!prefix) return null;
+  const color = ({
+    "91": "#eee",
+    "92": "#e0e0ff",
+    "93": "#fff8e0",
+  } as any)[prefix as any] || undefined;
+  return (
+    <div inert className="fixed top-0 left-0 p-2 text-lg text-red-700 animate-[dev-port-slide_120s_linear_infinite] hover:hidden" style={{
+      backgroundColor: color,
+      zIndex: 10000000,
+    }}>
+      <style>{`
+        @keyframes dev-port-slide {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(100vw); }
+        }
+      `}</style>
+      DEV PORT: {prefix}xx
+    </div>
+  );
+}

apps/dev-launchpad/public/index.html

@@ -113,7 +113,11 @@
       const withPrefix = (suffix) => `${stackPortPrefix}${suffix}`;
 
       // Depending on the port prefix, set the color to light grey (port 91), light purple (port 92), papyrus yellow (port 93), or default otherwise
-      const color = stackPortPrefix === "91" ? "#f8f8f8" : stackPortPrefix === "92" ? "#e0e0ff" : stackPortPrefix === "93" ? "#fff8e0" : undefined;
+      const color = {
+        "91": "#f8f8f8",
+        "92": "#e0e0ff",
+        "93": "#fff8e0",
+      }[stackPortPrefix] || undefined;
       document.body.style.backgroundColor = color;
 
       const backgroundServices = [