feat(frontend): team-browsing GUI with pod view

Replace the single join form with a richer UI: team cards (members as avatars, repo, description), a member picker, and a post-join PodView showing pod members (you highlighted) plus a PodMan panel with a slot for live intervention cards. Adds Avatar/TeamCard/PodView components. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-27 15:17:07 -07:00
parent fc3752bbe9
commit e26961d526
5 changed files with 223 additions and 60 deletions
@@ -1,11 +1,13 @@
 import { useMemo, useState } from 'react';
 import type { Room } from 'livekit-client';
 import { joinPod } from './lib/pod.js';
-import { TEAMS } from './lib/teams.js';
+import { TEAMS, teamById } from './lib/teams.js';
+import { TeamCard } from './components/TeamCard.js';
+import { PodView } from './components/PodView.js';

 export default function App() {
  const [teamId, setTeamId] = useState(TEAMS[0]!.id);
-  const team = useMemo(() => TEAMS.find((t) => t.id === teamId) ?? TEAMS[0]!, [teamId]);
+  const team = useMemo(() => teamById(teamId), [teamId]);
  const [member, setMember] = useState(team.members[0]!);
  const [room, setRoom] = useState<Room | null>(null);
  const [joined, setJoined] = useState(false);
@@ -15,8 +17,8 @@ export default function App() {

  function handleTeamChange(id: string) {
    setTeamId(id);
-    const next = TEAMS.find((t) => t.id === id);
-    if (next) setMember(next.members[0]!);
+    const next = teamById(id);
+    if (!next.members.includes(member)) setMember(next.members[0]!);
  }

  async function handleJoin() {
@@ -35,72 +37,68 @@ export default function App() {
    }
  }

+  function handleLeave() {
+    room?.disconnect();
+    setRoom(null);
+    setJoined(false);
+  }
+
  return (
-    <main className="mx-auto flex min-h-screen max-w-md flex-col justify-center gap-6 p-6">
-      <header>
-        <h1 className="text-3xl font-bold">🛰️ PodMan</h1>
-        <p className="text-sm text-slate-400">
-          Join a pod and share your screen — PodMan watches for collisions before you push.
-        </p>
+    <div className="mx-auto min-h-screen w-full max-w-4xl px-4 py-8 sm:px-6">
+      <header className="mb-8 flex items-center gap-3">
+        <span className="text-3xl">🛰️</span>
+        <div>
+          <h1 className="text-2xl font-bold text-slate-100">PodMan</h1>
+          <p className="text-sm text-slate-400">
+            The teammate that sees what git can&apos;t — collisions caught before you push.
+          </p>
+        </div>
      </header>

      {joined ? (
-        <section className="rounded-lg border border-slate-700 bg-slate-900/50 p-4">
-          <p className="font-medium text-emerald-400">
-            {member} connected to “{team.name}”.
-          </p>
-          <p className="mt-1 text-sm text-slate-400">
-            {room ? 'Sharing screen + mic. PodMan is watching.' : 'Pod joined.'}
-          </p>
-          {devMode && (
-            <p className="mt-3 rounded-md border border-amber-700/50 bg-amber-950/40 px-3 py-2 text-xs text-amber-300">
-              DEV MODE — LiveKit not configured, so screen capture is off. Set LIVEKIT_* in the
-              backend .env (and serve over HTTPS) for a real join.
-            </p>
-          )}
-        </section>
+        <PodView team={team} me={member} devMode={devMode} onLeave={handleLeave} />
      ) : (
-        <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)}
-            >
+        <main className="flex flex-col gap-6">
+          <section>
+            <h2 className="mb-3 text-sm font-medium text-slate-400">Pick a team</h2>
+            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {TEAMS.map((t) => (
-                <option key={t.id} value={t.id}>
-                  {t.name} · {t.repo}
-                </option>
+                <TeamCard
+                  key={t.id}
+                  team={t}
+                  selected={t.id === teamId}
+                  onSelect={handleTeamChange}
+                />
              ))}
-            </select>
-          </label>
+            </div>
+          </section>

-          <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)}
+          <section className="flex flex-col gap-3 rounded-xl border border-slate-800 bg-slate-900/40 p-4 sm:flex-row sm:items-end">
+            <label className="flex flex-1 flex-col gap-1 text-sm text-slate-400">
+              Join “{team.name}” as
+              <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-5 py-2 font-medium text-white hover:bg-emerald-500 disabled:opacity-50"
+              onClick={handleJoin}
+              disabled={connecting}
            >
-              {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}
-          >
-            {connecting ? 'Joining…' : `Join ${team.name} as ${member}`}
-          </button>
+              {connecting ? 'Joining…' : 'Join pod'}
+            </button>
+          </section>
          {error && <p className="text-sm text-red-400">{error}</p>}
-        </section>
+        </main>
      )}
-    </main>
+    </div>
  );
 }
@@ -0,0 +1,36 @@
+function colorFor(name: string): string {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) % 360;
+  return `hsl(${h} 55% 42%)`;
+}
+
+function initials(name: string): string {
+  return name
+    .split(/\s+/)
+    .map((w) => w[0] ?? '')
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+export function Avatar({
+  name,
+  size = 36,
+  ring = false,
+}: {
+  name: string;
+  size?: number;
+  ring?: boolean;
+}) {
+  return (
+    <div
+      className={`flex shrink-0 items-center justify-center rounded-full font-semibold text-white ${
+        ring ? 'ring-2 ring-emerald-400 ring-offset-2 ring-offset-slate-950' : ''
+      }`}
+      style={{ width: size, height: size, background: colorFor(name), fontSize: size * 0.38 }}
+      title={name}
+    >
+      {initials(name)}
+    </div>
+  );
+}
@@ -0,0 +1,84 @@
+import type { DemoTeam } from '../lib/teams.js';
+import { Avatar } from './Avatar.js';
+
+export function PodView({
+  team,
+  me,
+  devMode,
+  onLeave,
+}: {
+  team: DemoTeam;
+  me: string;
+  devMode: boolean;
+  onLeave: () => void;
+}) {
+  return (
+    <div className="flex flex-col gap-6">
+      <header className="flex items-center justify-between">
+        <div>
+          <h2 className="text-xl font-bold text-slate-100">{team.name}</h2>
+          <p className="text-xs text-slate-500">{team.repo}</p>
+        </div>
+        <button
+          onClick={onLeave}
+          className="rounded-md border border-slate-700 px-3 py-1.5 text-sm text-slate-300 hover:bg-slate-800"
+        >
+          Leave
+        </button>
+      </header>
+
+      {devMode && (
+        <p className="rounded-md border border-amber-700/50 bg-amber-950/40 px-3 py-2 text-xs text-amber-300">
+          DEV MODE — LiveKit not configured / insecure context, so screen capture is off.
+        </p>
+      )}
+
+      <div className="grid gap-6 md:grid-cols-[1fr_300px]">
+        {/* Pod members */}
+        <section>
+          <h3 className="mb-3 text-sm font-medium text-slate-400">In this pod</h3>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+            {team.members.map((m) => {
+              const isMe = m === me;
+              return (
+                <div
+                  key={m}
+                  className={`flex items-center gap-3 rounded-lg border p-3 ${
+                    isMe ? 'border-emerald-500/50 bg-emerald-950/20' : 'border-slate-800 bg-slate-900/40'
+                  }`}
+                >
+                  <Avatar name={m} size={36} ring={isMe} />
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium text-slate-200">{m}</p>
+                    <p className="text-xs text-slate-500">{isMe ? 'you' : 'in pod'}</p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+
+        {/* PodMan panel */}
+        <aside className="rounded-xl border border-slate-800 bg-slate-900/40 p-4">
+          <div className="flex items-center gap-2">
+            <span className="text-lg">🛰️</span>
+            <h3 className="font-semibold text-slate-100">PodMan</h3>
+            <span className="ml-auto flex items-center gap-1 text-xs text-emerald-400">
+              <span className="inline-block h-2 w-2 rounded-full bg-emerald-400" /> watching
+            </span>
+          </div>
+          <p className="mt-2 text-xs text-slate-500">
+            Watching {team.members.length} screen{team.members.length === 1 ? '' : 's'} for collisions
+            before push.
+          </p>
+          <div className="mt-4 border-t border-slate-800 pt-4">
+            <h4 className="mb-2 text-xs font-medium text-slate-400">Interventions</h4>
+            <div className="rounded-lg border border-dashed border-slate-800 px-3 py-6 text-center text-xs text-slate-600">
+              No collisions detected.
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,37 @@
+import type { DemoTeam } from '../lib/teams.js';
+import { Avatar } from './Avatar.js';
+
+export function TeamCard({
+  team,
+  selected,
+  onSelect,
+}: {
+  team: DemoTeam;
+  selected: boolean;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <button
+      onClick={() => onSelect(team.id)}
+      className={`flex w-full flex-col gap-3 rounded-xl border p-4 text-left transition ${
+        selected
+          ? 'border-emerald-500 bg-emerald-950/30 ring-1 ring-emerald-500/40'
+          : 'border-slate-700 bg-slate-900/50 hover:border-slate-500 hover:bg-slate-900'
+      }`}
+    >
+      <div className="flex items-center justify-between">
+        <h3 className="font-semibold text-slate-100">{team.name}</h3>
+        <span className="rounded-full bg-slate-800 px-2 py-0.5 text-xs text-slate-400">
+          {team.members.length} members
+        </span>
+      </div>
+      <p className="text-xs text-slate-500">{team.repo}</p>
+      <p className="text-sm text-slate-300">{team.description}</p>
+      <div className="flex -space-x-2 pt-1">
+        {team.members.map((m) => (
+          <Avatar key={m} name={m} size={28} />
+        ))}
+      </div>
+    </button>
+  );
+}
@@ -6,6 +6,7 @@ export interface DemoTeam {
  id: string;
  name: string;
  repo: string;
+  description: string;
  members: string[];
 }

@@ -14,18 +15,25 @@ export const TEAMS: DemoTeam[] = [
    id: 'demo-pod',
    name: 'Demo Pod',
    repo: 'karti-ai/podman',
+    description: 'The full crew — used for the live demo.',
    members: ['Karti', 'Yahya', 'Ramis', 'Zander', 'Shakthi'],
  },
  {
    id: 'frontend-squad',
    name: 'Frontend Squad',
    repo: 'karti-ai/podman',
+    description: 'PWA, capture, and PodMan card UI.',
    members: ['Karti', 'Zander'],
  },
  {
    id: 'backend-squad',
    name: 'Backend Squad',
    repo: 'karti-ai/podman',
+    description: 'LiveKit agent, vision, collision detector.',
    members: ['Yahya', 'Ramis'],
  },
 ];
+
+export function teamById(id: string): DemoTeam {
+  return TEAMS.find((t) => t.id === id) ?? TEAMS[0]!;
+}