From 48d8ed8aaf3b67b392a6ef57a46ca129b5fd2fa6 Mon Sep 17 00:00:00 2001
From: Kartikeya <176560021+karti-ai@users.noreply.github.com>
Date: Sat, 27 Jun 2026 14:44:18 -0700
Subject: [PATCH] feat(frontend): team + engineer dropdowns on join screen

Replace free-text name/pod inputs with select-only dropdowns (pick a team,
then yourself from its members) for fast R&D iteration. Demo teams live in
lib/teams.ts until pods are persisted.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/App.tsx      | 70 +++++++++++++++++++++++++++------------
 frontend/src/lib/teams.ts | 31 +++++++++++++++++
 2 files changed, 80 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/lib/teams.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f8adf28..60063a4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,20 +1,28 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import type { Room } from 'livekit-client';
 import { joinPod } from './lib/pod.js';
+import { TEAMS } from './lib/teams.js';
 
 export default function App() {
-  const [podId, setPodId] = useState('demo-pod');
-  const [name, setName] = useState('');
+  const [teamId, setTeamId] = useState(TEAMS[0]!.id);
+  const team = useMemo(() => TEAMS.find((t) => t.id === teamId) ?? TEAMS[0]!, [teamId]);
+  const [member, setMember] = useState(team.members[0]!);
   const [room, setRoom] = useState<Room | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [connecting, setConnecting] = useState(false);
 
+  function handleTeamChange(id: string) {
+    setTeamId(id);
+    const next = TEAMS.find((t) => t.id === id);
+    if (next) setMember(next.members[0]!);
+  }
+
   async function handleJoin() {
     setError(null);
     setConnecting(true);
     try {
-      const identity = `${name || 'engineer'}-${Math.random().toString(36).slice(2, 7)}`;
-      setRoom(await joinPod(podId, identity, name || identity));
+      const identity = `${member}-${Math.random().toString(36).slice(2, 7)}`;
+      setRoom(await joinPod(team.id, identity, member));
     } catch (err) {
       setError((err as Error).message);
     } finally {
@@ -33,29 +41,49 @@ export default function App() {
 
       {room ? (
         <section className="rounded-lg border border-slate-700 bg-slate-900/50 p-4">
-          <p className="font-medium text-emerald-400">Connected to “{podId}”.</p>
+          <p className="font-medium text-emerald-400">
+            {member} connected to “{team.name}”.
+          </p>
           <p className="mt-1 text-sm text-slate-400">Sharing screen + mic. PodMan is watching.</p>
         </section>
       ) : (
-        <section className="flex flex-col gap-3">
-          <input
-            className="rounded-md border border-slate-700 bg-slate-900 px-3 py-2"
-            placeholder="Your name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-          <input
-            className="rounded-md border border-slate-700 bg-slate-900 px-3 py-2"
-            placeholder="Pod id"
-            value={podId}
-            onChange={(e) => setPodId(e.target.value)}
-          />
+        <section className="flex flex-col gap-4">
+          <label className="flex flex-col gap-1 text-sm text-slate-400">
+            Team
+            <select
+              className="rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-base text-slate-100"
+              value={teamId}
+              onChange={(e) => handleTeamChange(e.target.value)}
+            >
+              {TEAMS.map((t) => (
+                <option key={t.id} value={t.id}>
+                  {t.name} · {t.repo}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="flex flex-col gap-1 text-sm text-slate-400">
+            You
+            <select
+              className="rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-base text-slate-100"
+              value={member}
+              onChange={(e) => setMember(e.target.value)}
+            >
+              {team.members.map((m) => (
+                <option key={m} value={m}>
+                  {m}
+                </option>
+              ))}
+            </select>
+          </label>
+
           <button
             className="rounded-md bg-emerald-600 px-3 py-2 font-medium hover:bg-emerald-500 disabled:opacity-50"
             onClick={handleJoin}
-            disabled={connecting || !podId}
+            disabled={connecting}
           >
-            {connecting ? 'Joining…' : 'Join pod'}
+            {connecting ? 'Joining…' : `Join ${team.name} as ${member}`}
           </button>
           {error && <p className="text-sm text-red-400">{error}</p>}
         </section>
diff --git a/frontend/src/lib/teams.ts b/frontend/src/lib/teams.ts
new file mode 100644
index 0000000..175dff1
--- /dev/null
+++ b/frontend/src/lib/teams.ts
@@ -0,0 +1,31 @@
+/**
+ * Hardcoded teams/engineers for R&D so the join screen is select-only (no typing)
+ * while we develop. Swap for real data (backend/Atlas) once pods are persisted.
+ */
+export interface DemoTeam {
+  id: string;
+  name: string;
+  repo: string;
+  members: string[];
+}
+
+export const TEAMS: DemoTeam[] = [
+  {
+    id: 'demo-pod',
+    name: 'Demo Pod',
+    repo: 'karti-ai/podman',
+    members: ['Karti', 'Yahya', 'Ramis', 'Zander', 'Shakthi'],
+  },
+  {
+    id: 'frontend-squad',
+    name: 'Frontend Squad',
+    repo: 'karti-ai/podman',
+    members: ['Karti', 'Zander'],
+  },
+  {
+    id: 'backend-squad',
+    name: 'Backend Squad',
+    repo: 'karti-ai/podman',
+    members: ['Yahya', 'Ramis'],
+  },
+];