feat: fold pod controls into workspace body

2026-06-28 05:14:08 +00:00
parent aeb75c310e
commit dc937a783d
2 changed files with 292 additions and 310 deletions
@@ -22,12 +22,7 @@ import {
  XIcon,
 } from 'lucide-react';
 import type { Room, RemoteTrack, RemoteTrackPublication, RemoteParticipant } from 'livekit-client';
-import type {
-  Pod,
-  PodActivityEvent,
-  PodActivityKind,
-  PodActivitySource,
-} from '@podman/shared';
+import type { Pod, PodActivityEvent, PodActivityKind, PodActivitySource } from '@podman/shared';
 import { startBeat, type BeatHandle } from '../lib/beat.js';
 import { useInterventions, primeSpeech } from '../livekit/useInterventions.js';
 import { usePodActivity } from '../hooks/use-pod-activity.js';
@@ -66,7 +61,6 @@ import { cn } from '@/lib/utils';

 const STREAM_SIDEBAR_WIDTH = 'clamp(20rem, 22vw, 23rem)';
 const STREAM_RAIL_WIDTH = '4rem';
-const POD_TOP_BAR_HEIGHT = '5rem';

 interface PInfo {
  id: string;
@@ -266,49 +260,6 @@ export function PodView({
  const podmanPresent = participants.some((p) => p.name.toLowerCase() === 'podman');

  return (
-    <div
-      style={{ '--pod-topbar-height': POD_TOP_BAR_HEIGHT } as CSSProperties}
-      className="min-h-screen bg-background text-foreground"
-    >
-      <header
-        data-testid="pod-topbar"
-        className="sticky top-0 z-30 border-b bg-background/90 backdrop-blur-xl"
-      >
-        <div className="mx-auto flex min-h-20 w-full max-w-[1480px] flex-col gap-3 px-4 py-3 sm:px-6 md:flex-row md:items-center md:justify-between lg:px-8">
-          <div className="flex min-w-0 items-center gap-3">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" onClick={onLeave}>
-                  <ArrowLeftIcon />
-                  <span className="sr-only">Leave pod</span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Leave pod</TooltipContent>
-            </Tooltip>
-            <div className="min-w-0">
-              <div className="flex items-center gap-2">
-                <h1 className="truncate text-xl font-semibold tracking-tight">{team.name}</h1>
-                <Badge variant={room ? 'default' : 'secondary'} className="rounded-md">
-                  {room ? 'live' : 'local'}
-                </Badge>
-              </div>
-              <p className="truncate font-mono text-xs text-muted-foreground">{team.repo}</p>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-2 sm:flex sm:items-center">
-            <Button variant="outline" onClick={toggleBeat} disabled={!room}>
-              <Volume2Icon data-icon="inline-start" />
-              {playingBeat ? 'Stop audio' : 'Test audio'}
-            </Button>
-            <Button onClick={toggleScreen} disabled={!room}>
-              <MonitorUpIcon data-icon="inline-start" />
-              {sharing ? 'Stop sharing' : 'Share screen'}
-            </Button>
-          </div>
-        </div>
-      </header>
-
    <SidebarProvider
      open={leftStreamOpen}
      onOpenChange={setLeftStreamOpen}
@@ -316,10 +267,9 @@ export function PodView({
        {
          '--sidebar-width': STREAM_SIDEBAR_WIDTH,
          '--sidebar-width-icon': STREAM_RAIL_WIDTH,
-            minHeight: 'calc(100svh - var(--pod-topbar-height))',
        } as CSSProperties
      }
-        className="bg-background text-foreground"
+      className="min-h-screen bg-background text-foreground"
    >
      <ActivitySidebar
        side="left"
@@ -347,13 +297,56 @@ export function PodView({
      >
        <SidebarInset
          data-testid="pod-main-workspace"
-            style={{ minHeight: 'calc(100svh - var(--pod-topbar-height))' }}
-            className="min-w-0 bg-background"
-          >
-            <div
-              style={{ minHeight: 'calc(100svh - var(--pod-topbar-height))' }}
-              className="mx-auto flex w-full max-w-[1120px] flex-col gap-5 px-4 py-5 sm:px-6 lg:px-8"
+          className="min-h-screen min-w-0 bg-background"
        >
+          <div className="mx-auto flex min-h-screen w-full max-w-[1120px] flex-col gap-5 px-4 py-5 sm:px-6 lg:px-8">
+            <section data-testid="pod-body-summary" className="flex flex-col gap-4">
+              <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+                <div className="flex min-w-0 items-center gap-3">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="ghost" size="icon" onClick={onLeave}>
+                        <ArrowLeftIcon />
+                        <span className="sr-only">Leave pod</span>
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Leave pod</TooltipContent>
+                  </Tooltip>
+                  <div className="grid size-10 shrink-0 place-items-center rounded-lg bg-primary text-sm font-semibold text-primary-foreground shadow-sm">
+                    {initials(team.name) || 'PM'}
+                  </div>
+                  <div className="min-w-0">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <h1 className="text-[1.75rem] font-semibold leading-none tracking-tight">
+                        {team.name}
+                      </h1>
+                      <Badge variant={room ? 'default' : 'secondary'} className="rounded-md">
+                        {room ? 'live' : 'local'}
+                      </Badge>
+                    </div>
+                    <p className="truncate font-mono text-xs text-muted-foreground">{team.repo}</p>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-2 sm:flex sm:items-center">
+                  <Button variant="outline" onClick={toggleBeat} disabled={!room}>
+                    <Volume2Icon data-icon="inline-start" />
+                    {playingBeat ? 'Stop audio' : 'Test audio'}
+                  </Button>
+                  <Button onClick={toggleScreen} disabled={!room}>
+                    <MonitorUpIcon data-icon="inline-start" />
+                    {sharing ? 'Stop sharing' : 'Share screen'}
+                  </Button>
+                </div>
+              </div>
+
+              <div className="grid gap-3 sm:grid-cols-3">
+                <Metric label="Participants" value={participants.length || 1} />
+                <Metric label="Screen" value={sharing ? 'sharing' : 'idle'} />
+                <Metric label="PodMan" value={podmanPresent ? 'online' : 'waiting'} />
+              </div>
+            </section>
+
            {devMode && (
              <Alert>
                <RadioTowerIcon />
@@ -387,18 +380,10 @@ export function PodView({

            <main className="grid flex-1 gap-5 min-[1800px]:grid-cols-[minmax(0,1fr)_340px]">
              <section className="flex min-w-0 flex-col gap-5">
-                  <div className="grid gap-3 sm:grid-cols-3">
-                    <Metric label="Participants" value={participants.length || 1} />
-                    <Metric label="Screen" value={sharing ? 'sharing' : 'idle'} />
-                    <Metric label="PodMan" value={podmanPresent ? 'online' : 'waiting'} />
-                  </div>
-
                <Card className="flex-1">
                  <CardHeader>
                    <CardTitle>Room state</CardTitle>
-                      <CardDescription>
-                        People and media currently visible to PodMan.
-                      </CardDescription>
+                    <CardDescription>People and media currently visible to PodMan.</CardDescription>
                  </CardHeader>
                  <CardContent>
                    {participants.length === 0 ? (
@@ -435,9 +420,7 @@ export function PodView({
                <Card>
                  <CardHeader>
                    <CardTitle>Intervention</CardTitle>
-                      <CardDescription>
-                        Card first, voice only for urgent escalation.
-                      </CardDescription>
+                    <CardDescription>Card first, voice only for urgent escalation.</CardDescription>
                    <CardAction>
                      <Badge variant={active ? 'default' : 'secondary'} className="rounded-md">
                        {active ? 'active' : 'clear'}
@@ -560,7 +543,6 @@ export function PodView({
        />
      </SidebarProvider>
    </SidebarProvider>
-    </div>
  );
 }

@@ -645,7 +627,7 @@ function ActivitySidebar({
    <Sidebar
      side={side}
      collapsible="icon"
-      className="border-border/80 bg-sidebar md:!top-[var(--pod-topbar-height)] md:!h-[calc(100svh-var(--pod-topbar-height))]"
+      className="border-border/80 bg-sidebar"
      data-testid={testId}
    >
      <SidebarHeader className="border-b px-3 py-3">
@@ -709,9 +691,7 @@ function ActivitySidebar({
          {events.length ? (
            <div className="flex max-h-[calc(100svh-9rem)] flex-col gap-4 overflow-y-auto pr-1">
              {ACTIVITY_CATEGORIES.map((category) => {
-                const items = events.filter(
-                  (event) => CATEGORY_OF[event.kind] === category.id,
-                );
+                const items = events.filter((event) => CATEGORY_OF[event.kind] === category.id);
                if (!items.length) return null;
                const CategoryIcon = category.icon;
                return (
@@ -721,10 +701,7 @@ function ActivitySidebar({
                      <h3 className="text-[0.7rem] font-semibold uppercase tracking-wide text-muted-foreground">
                        {category.label}
                      </h3>
-                      <Badge
-                        variant="secondary"
-                        className="rounded-md px-1.5 py-0 text-[0.65rem]"
-                      >
+                      <Badge variant="secondary" className="rounded-md px-1.5 py-0 text-[0.65rem]">
                        {items.length}
                      </Badge>
                    </div>
@@ -829,10 +806,7 @@ function ActivityItem({ event }: { event: PodActivityEvent }) {
        )}
        <div className="mt-2 flex min-w-0 flex-wrap items-center gap-1.5">
          <SourceChip source={event.source} />
-          <Badge
-            variant="outline"
-            className="rounded-md px-1.5 py-0 text-[0.68rem] leading-4"
-          >
+          <Badge variant="outline" className="rounded-md px-1.5 py-0 text-[0.68rem] leading-4">
            {KIND_LABEL[event.kind]}
          </Badge>
          {metadata.map((item, index) => (
@@ -186,9 +186,9 @@ function assertNoOverlap(left, main, right, label) {
  }
 }

-function assertStableTopbar(before, after, label) {
-  if (Math.abs(before.x - after.x) > 2 || Math.abs(before.width - after.width) > 2) {
-    throw new Error(`${label}: top bar moved or resized with sidebar state`);
+function assertContained(container, child, label) {
+  if (child.x < container.x - 2 || child.x + child.width > container.x + container.width + 2) {
+    throw new Error(`${label}: body summary is not contained inside the main workspace`);
  }
 }

@@ -268,12 +268,16 @@ try {
  if (!hasPodCards) throw new Error('pod cards did not render');
  if (hasOverlay) throw new Error('Vite error overlay is visible');

-  await page.getByRole('button', { name: 'Team memory' }).click();
+  await page.getByRole('button', { name: 'Pod actions' }).first().click();
+  await page.getByRole('menuitem', { name: 'Team memory' }).click();
  await page.getByText('Workflow metrics').waitFor({ timeout: 15_000 });
  await page.getByText('Learning edges').waitFor({ timeout: 15_000 });
  await page.getByRole('img', { name: 'PodMan team-memory graph' }).waitFor({ timeout: 15_000 });
-  await page.getByRole('button', { name: 'engineer: Karti' }).click();
-  await page.getByText('Learned owner of auth; backend + DB wiring.').waitFor({ timeout: 15_000 });
+  await page
+    .getByRole('button', { name: /engineer:/ })
+    .first()
+    .click();
+  await page.getByText('Relationships').waitFor({ timeout: 15_000 });
  await page.getByRole('button', { name: 'Whole graph' }).click();
  await page.getByRole('button', { name: /Pods/i }).click();

@@ -288,19 +292,22 @@ try {
  }
  await page.getByRole('heading', { name: 'My stream' }).waitFor({ timeout: 15_000 });
  await page.getByRole('heading', { name: 'Team stream' }).waitFor({ timeout: 15_000 });
-  const topbar = page.getByTestId('pod-topbar');
+  const bodySummary = page.getByTestId('pod-body-summary');
  const mainWorkspace = page.getByTestId('pod-main-workspace');
  const mySidebar = page.getByTestId('my-stream-sidebar');
  const teamSidebar = page.getByTestId('team-stream-sidebar');
-  await topbar.waitFor({ timeout: 15_000 });
+  await bodySummary.waitFor({ timeout: 15_000 });
  await mainWorkspace.waitFor({ timeout: 15_000 });
  await mySidebar.waitFor({ timeout: 15_000 });
  await teamSidebar.waitFor({ timeout: 15_000 });
-  if ((await topbar.getByRole('button', { name: /stream|team/i }).count()) > 0) {
-    throw new Error('pod top bar contains sidebar stream/team controls');
+  if ((await page.getByTestId('pod-topbar').count()) > 0) {
+    throw new Error('pod detail view still renders a topbar test id');
+  }
+  if ((await bodySummary.getByRole('button', { name: /stream|team/i }).count()) > 0) {
+    throw new Error('pod body summary contains sidebar stream/team controls');
  }
  const expandedLayout = {
-    topbar: await boxOf(topbar, 'top bar expanded'),
+    summary: await boxOf(bodySummary, 'body summary expanded'),
    main: await boxOf(mainWorkspace, 'main workspace expanded'),
    left: await boxOf(mySidebar, 'my stream sidebar expanded'),
    right: await boxOf(teamSidebar, 'team stream sidebar expanded'),
@@ -311,13 +318,14 @@ try {
    expandedLayout.right,
    'expanded layout',
  );
+  assertContained(expandedLayout.main, expandedLayout.summary, 'expanded layout');
  await page.locator('[data-testid="my-stream-toggle"]:visible').click();
  await page.waitForTimeout(300);
  const leftCollapsedLayout = {
    main: await boxOf(mainWorkspace, 'main workspace after left collapse'),
    left: await boxOf(mySidebar, 'my stream sidebar collapsed'),
    right: await boxOf(teamSidebar, 'team stream sidebar with left collapsed'),
-    topbar: await boxOf(topbar, 'top bar after left collapse'),
+    summary: await boxOf(bodySummary, 'body summary after left collapse'),
  };
  if (leftCollapsedLayout.left.width >= expandedLayout.left.width - 24) {
    throw new Error('my stream sidebar did not collapse into a compact rail');
@@ -331,14 +339,14 @@ try {
    leftCollapsedLayout.right,
    'left collapsed layout',
  );
-  assertStableTopbar(expandedLayout.topbar, leftCollapsedLayout.topbar, 'left collapsed layout');
+  assertContained(leftCollapsedLayout.main, leftCollapsedLayout.summary, 'left collapsed layout');
  await page.locator('[data-testid="team-stream-toggle"]:visible').click();
  await page.waitForTimeout(300);
  const bothCollapsedLayout = {
    main: await boxOf(mainWorkspace, 'main workspace after both collapse'),
    left: await boxOf(mySidebar, 'my stream sidebar with both collapsed'),
    right: await boxOf(teamSidebar, 'team stream sidebar collapsed'),
-    topbar: await boxOf(topbar, 'top bar after both collapse'),
+    summary: await boxOf(bodySummary, 'body summary after both collapse'),
  };
  if (bothCollapsedLayout.right.width >= expandedLayout.right.width - 24) {
    throw new Error('team stream sidebar did not collapse into a compact rail');
@@ -352,7 +360,7 @@ try {
    bothCollapsedLayout.right,
    'both collapsed layout',
  );
-  assertStableTopbar(expandedLayout.topbar, bothCollapsedLayout.topbar, 'both collapsed layout');
+  assertContained(bothCollapsedLayout.main, bothCollapsedLayout.summary, 'both collapsed layout');
  await page.locator('[data-testid="my-stream-toggle"]:visible').click();
  await page.locator('[data-testid="team-stream-toggle"]:visible').click();
  await page.waitForTimeout(300);