feat: modernize PodMan frontend command center
This commit is contained in:
Yahya Alhinai
+236
-63
@@ -9,12 +9,15 @@ import { PodView } from './components/PodView.js';
|
||||
|
||||
const SESSION_KEY = 'podman.session';
|
||||
|
||||
const fmt = new Intl.NumberFormat('en', { notation: 'compact' });
|
||||
|
||||
export default function App() {
|
||||
const [pods, setPods] = useState<Pod[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [pending, setPending] = useState<Set<string>>(new Set());
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [presence, setPresence] = useState<Record<string, string[]>>({});
|
||||
const [memory, setMemory] = useState<api.MemoryStats | null>(null);
|
||||
|
||||
// join state — keep the id and derive the pod so it never goes stale
|
||||
const [joinedPodId, setJoinedPodId] = useState<string | null>(null);
|
||||
@@ -28,7 +31,14 @@ export default function App() {
|
||||
async function refresh() {
|
||||
setLoading(true);
|
||||
try {
|
||||
setPods(await api.listPods());
|
||||
const [nextPods, nextPresence, nextMemory] = await Promise.all([
|
||||
api.listPods(),
|
||||
api.getPresence().catch(() => presence),
|
||||
api.getMemoryStats().catch(() => memory),
|
||||
]);
|
||||
setPods(nextPods);
|
||||
setPresence(nextPresence);
|
||||
setMemory(nextMemory);
|
||||
setError(null);
|
||||
} catch (e) {
|
||||
setError((e as Error).message);
|
||||
@@ -69,8 +79,14 @@ export default function App() {
|
||||
let alive = true;
|
||||
const tick = async () => {
|
||||
try {
|
||||
const p = await api.getPresence();
|
||||
if (alive) setPresence(p);
|
||||
const [p, m] = await Promise.all([
|
||||
api.getPresence(),
|
||||
api.getMemoryStats().catch(() => memory),
|
||||
]);
|
||||
if (alive) {
|
||||
setPresence(p);
|
||||
setMemory(m);
|
||||
}
|
||||
} catch {
|
||||
/* presence is best-effort */
|
||||
}
|
||||
@@ -181,72 +197,229 @@ export default function App() {
|
||||
}
|
||||
|
||||
const showReconnecting = restoring || (joinedPodId !== null && joinedPod === null);
|
||||
const liveNames = Array.from(new Set(Object.values(presence).flat()));
|
||||
const liveTotal = liveNames.length;
|
||||
const totalMembers = pods.reduce((sum, p) => sum + p.members.length, 0);
|
||||
const activeRooms = Object.values(presence).filter((names) => names.length > 0).length;
|
||||
const podManOnline = liveNames.some((name) => name.toLowerCase() === 'podman');
|
||||
const latestActivity = memory
|
||||
? memory.observations + memory.collisions + memory.interventions + memory.outcomes
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="mx-auto min-h-screen w-full max-w-5xl 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't — collisions caught before you push.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{joinedPod ? (
|
||||
<PodView team={joinedPod} me={member} room={room} devMode={devMode} onLeave={handleLeave} />
|
||||
) : showReconnecting ? (
|
||||
<div className="flex flex-col items-start gap-3">
|
||||
<p className="text-sm text-slate-400">Reconnecting to your pod…</p>
|
||||
<button className="text-xs text-slate-500 hover:text-slate-300" onClick={handleLeave}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<main className="flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm font-medium text-slate-400">
|
||||
Pods {loading ? '…' : `(${pods.length})`}
|
||||
</h2>
|
||||
<button
|
||||
className="text-xs text-slate-400 hover:text-slate-200 disabled:opacity-50"
|
||||
onClick={() => void refresh()}
|
||||
disabled={loading}
|
||||
>
|
||||
↻ Refresh
|
||||
</button>
|
||||
<div className="min-h-screen bg-[#f5f5f7] text-slate-950">
|
||||
<div className="mx-auto flex min-h-screen w-full max-w-7xl flex-col px-4 py-5 sm:px-6 lg:px-8">
|
||||
<header className="flex flex-col gap-5 border-b border-slate-200 pb-5 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="grid h-10 w-10 place-items-center rounded-lg border border-slate-200 bg-white text-sm font-semibold text-slate-950 shadow-sm">
|
||||
PM
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-slate-500">Live team coordination</p>
|
||||
<h1 className="text-3xl font-semibold text-slate-950">PodMan</h1>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-3 max-w-2xl text-sm leading-6 text-slate-600">
|
||||
Active work, team memory, and coordination signals in one quiet workspace.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="rounded-md border border-red-900/60 bg-red-950/40 px-3 py-2 text-sm text-red-400">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:min-w-[520px]">
|
||||
<Metric label="Live now" value={fmt.format(liveTotal)} tone="green" />
|
||||
<Metric label="Live rooms" value={fmt.format(activeRooms)} tone="blue" />
|
||||
<Metric label="Roster" value={fmt.format(totalMembers)} tone="slate" />
|
||||
<Metric label="Memory" value={fmt.format(latestActivity)} tone="amber" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{loading ? (
|
||||
<p className="text-sm text-slate-500">Loading pods…</p>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{pods.map((pod) => (
|
||||
<PodCard
|
||||
key={pod.id}
|
||||
pod={pod}
|
||||
busy={pending.has(pod.id)}
|
||||
presence={presence[pod.id] ?? []}
|
||||
onJoin={handleJoin}
|
||||
onAddAndJoin={handleAddAndJoin}
|
||||
onAddMember={handleAddMember}
|
||||
onRemoveMember={handleRemoveMember}
|
||||
onUpdate={handleUpdate}
|
||||
onDelete={handleDelete}
|
||||
<div className="grid flex-1 gap-5 py-5 lg:grid-cols-[minmax(0,1fr)_320px]">
|
||||
<section className="min-w-0">
|
||||
{joinedPod ? (
|
||||
<PodView
|
||||
team={joinedPod}
|
||||
me={member}
|
||||
room={room}
|
||||
devMode={devMode}
|
||||
onLeave={handleLeave}
|
||||
/>
|
||||
) : showReconnecting ? (
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
|
||||
<p className="text-sm text-slate-600">Reconnecting to your pod...</p>
|
||||
<button
|
||||
className="mt-3 rounded-md border border-slate-200 px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-50"
|
||||
onClick={handleLeave}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<main className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-slate-950">Team workspaces</h2>
|
||||
<p className="text-sm text-slate-500">
|
||||
Pods, presence, and intervention state.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
className="inline-flex items-center justify-center rounded-md border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 disabled:opacity-50"
|
||||
onClick={() => void refresh()}
|
||||
disabled={loading}
|
||||
>
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<SkeletonCard />
|
||||
<SkeletonCard />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
{pods.map((pod) => (
|
||||
<PodCard
|
||||
key={pod.id}
|
||||
pod={pod}
|
||||
busy={pending.has(pod.id)}
|
||||
presence={presence[pod.id] ?? []}
|
||||
onJoin={handleJoin}
|
||||
onAddAndJoin={handleAddAndJoin}
|
||||
onAddMember={handleAddMember}
|
||||
onRemoveMember={handleRemoveMember}
|
||||
onUpdate={handleUpdate}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
))}
|
||||
<CreatePodForm busy={pending.has('new')} onCreate={handleCreate} />
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<aside className="flex flex-col gap-4">
|
||||
<section className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs font-medium text-slate-500">Agent state</p>
|
||||
<h2 className="mt-1 text-base font-semibold text-slate-950">PodMan signal</h2>
|
||||
</div>
|
||||
<span
|
||||
className={`rounded-full px-2 py-1 text-xs font-medium ${
|
||||
podManOnline
|
||||
? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200'
|
||||
: 'bg-amber-50 text-amber-700 ring-1 ring-amber-200'
|
||||
}`}
|
||||
>
|
||||
{podManOnline ? 'online' : 'standby'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
<SignalRow
|
||||
label="Screen/IDE stream"
|
||||
state={podManOnline ? 'watching' : 'waiting'}
|
||||
/>
|
||||
))}
|
||||
<CreatePodForm busy={pending.has('new')} onCreate={handleCreate} />
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
)}
|
||||
<SignalRow label="Local git truth" state="scheduled" />
|
||||
<SignalRow
|
||||
label="Team memory"
|
||||
state={memory && latestActivity > 0 ? 'learning' : 'ready'}
|
||||
/>
|
||||
<SignalRow label="Urgency routing" state="card first" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<p className="text-xs font-medium text-slate-500">Intervention model</p>
|
||||
<div className="mt-4 space-y-3">
|
||||
<TimelineItem
|
||||
title="Observe"
|
||||
text="Live room presence plus screen and git signals."
|
||||
/>
|
||||
<TimelineItem
|
||||
title="Compare"
|
||||
text="Detect same-file, ownership, and stale path risk."
|
||||
/>
|
||||
<TimelineItem
|
||||
title="Route"
|
||||
text="Small card first, Hermes/voice only when urgent."
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<p className="text-xs font-medium text-slate-500">Live roster</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{liveNames.length ? (
|
||||
liveNames.map((name) => (
|
||||
<span
|
||||
key={name}
|
||||
className="rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs text-slate-700"
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className="text-sm text-slate-500">No live participants yet.</span>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Metric({ label, value, tone }: { label: string; value: string; tone: string }) {
|
||||
const toneClass =
|
||||
tone === 'green'
|
||||
? 'text-emerald-700 bg-emerald-50 border-emerald-200'
|
||||
: tone === 'blue'
|
||||
? 'text-blue-700 bg-blue-50 border-blue-200'
|
||||
: tone === 'amber'
|
||||
? 'text-amber-700 bg-amber-50 border-amber-200'
|
||||
: 'text-slate-700 bg-white border-slate-200';
|
||||
return (
|
||||
<div className={`rounded-lg border px-3 py-2 shadow-sm ${toneClass}`}>
|
||||
<p className="text-[11px] font-medium opacity-70">{label}</p>
|
||||
<p className="mt-1 text-xl font-semibold">{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SignalRow({ label, state }: { label: string; state: string }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-3 rounded-md border border-slate-200 bg-slate-50 px-3 py-2">
|
||||
<span className="text-sm text-slate-700">{label}</span>
|
||||
<span className="text-xs font-medium text-blue-700">{state}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TimelineItem({ title, text }: { title: string; text: string }) {
|
||||
return (
|
||||
<div className="border-l border-blue-200 pl-3">
|
||||
<p className="text-sm font-medium text-slate-900">{title}</p>
|
||||
<p className="mt-0.5 text-xs leading-5 text-slate-500">{text}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SkeletonCard() {
|
||||
return (
|
||||
<div className="h-56 animate-pulse rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="h-5 w-1/2 rounded bg-slate-100" />
|
||||
<div className="mt-3 h-3 w-2/3 rounded bg-slate-100" />
|
||||
<div className="mt-8 h-24 rounded bg-slate-50" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -36,52 +36,61 @@ export function CreatePodForm({
|
||||
if (!open) {
|
||||
return (
|
||||
<button
|
||||
className="flex min-h-[140px] items-center justify-center rounded-xl border border-dashed border-slate-700 text-slate-400 hover:border-emerald-600 hover:text-emerald-400"
|
||||
className="group flex min-h-[280px] flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-slate-300 bg-white p-6 text-center text-slate-600 shadow-sm transition hover:border-blue-300 hover:bg-blue-50/40"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
+ New Pod
|
||||
<span className="grid h-11 w-11 place-items-center rounded-lg border border-slate-200 bg-slate-50 text-2xl font-light text-slate-900 transition group-hover:border-blue-200 group-hover:bg-blue-50">
|
||||
+
|
||||
</span>
|
||||
<span className="text-base font-semibold text-slate-950">New pod</span>
|
||||
<span className="max-w-[18rem] text-sm leading-5 text-slate-500">
|
||||
Add a workspace for a feature team, spike, or demo flow.
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 rounded-xl border border-emerald-700/50 bg-slate-900/50 p-4">
|
||||
<h3 className="font-semibold text-slate-100">New Pod</h3>
|
||||
<div className="flex min-h-[280px] flex-col gap-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-950">New pod</h3>
|
||||
<p className="text-xs text-slate-500">Name, repository, and first member.</p>
|
||||
</div>
|
||||
<input
|
||||
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm"
|
||||
className="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-blue-400"
|
||||
placeholder="Pod name (e.g. Mobile Pod)"
|
||||
value={name}
|
||||
autoFocus
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm"
|
||||
className="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-blue-400"
|
||||
placeholder="owner/repo"
|
||||
value={repo}
|
||||
onChange={(e) => setRepo(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm"
|
||||
className="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-blue-400"
|
||||
placeholder="Description (optional)"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm"
|
||||
className="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-blue-400"
|
||||
placeholder="Your name (optional first member)"
|
||||
value={firstMember}
|
||||
onChange={(e) => setFirstMember(e.target.value)}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<div className="mt-auto flex gap-2">
|
||||
<button
|
||||
className="rounded-md bg-emerald-600 px-3 py-1 text-sm font-medium hover:bg-emerald-500 disabled:opacity-50"
|
||||
className="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white hover:bg-blue-500 disabled:opacity-50"
|
||||
onClick={submit}
|
||||
disabled={busy || !name.trim()}
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md border border-slate-700 px-3 py-1 text-sm hover:bg-slate-800"
|
||||
className="rounded-md border border-slate-200 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
|
||||
@@ -32,6 +32,8 @@ export function PodCard({
|
||||
});
|
||||
|
||||
const inRoom = (name: string) => presence.some((p) => p.toLowerCase() === name.toLowerCase());
|
||||
const active = presence.length > 0;
|
||||
const memberCount = pod.members.length;
|
||||
|
||||
function saveEdit() {
|
||||
onUpdate(pod.id, {
|
||||
@@ -43,37 +45,44 @@ export function PodCard({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-xl border border-slate-700 bg-slate-900/50 p-4">
|
||||
<div className="group relative flex min-h-[280px] flex-col overflow-hidden rounded-lg border border-slate-200 bg-white p-4 shadow-sm transition hover:border-slate-300 hover:shadow-md">
|
||||
<div
|
||||
className={`absolute inset-x-0 top-0 h-1 ${active ? 'bg-emerald-500' : 'bg-slate-200'}`}
|
||||
/>
|
||||
{editing ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-slate-950">Edit pod</h3>
|
||||
<p className="text-xs text-slate-500">Name, repository, and summary.</p>
|
||||
</div>
|
||||
<input
|
||||
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm"
|
||||
className="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-blue-400"
|
||||
value={draft.name ?? ''}
|
||||
placeholder="Pod name"
|
||||
onChange={(e) => setDraft({ ...draft, name: e.target.value })}
|
||||
/>
|
||||
<input
|
||||
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm"
|
||||
className="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-blue-400"
|
||||
value={draft.repo ?? ''}
|
||||
placeholder="owner/repo"
|
||||
onChange={(e) => setDraft({ ...draft, repo: e.target.value })}
|
||||
/>
|
||||
<input
|
||||
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm"
|
||||
className="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-blue-400"
|
||||
value={draft.description ?? ''}
|
||||
placeholder="Description"
|
||||
onChange={(e) => setDraft({ ...draft, description: e.target.value })}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
className="rounded-md bg-emerald-600 px-3 py-1 text-sm font-medium hover:bg-emerald-500 disabled:opacity-50"
|
||||
className="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white hover:bg-blue-500 disabled:opacity-50"
|
||||
onClick={saveEdit}
|
||||
disabled={busy}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md border border-slate-700 px-3 py-1 text-sm hover:bg-slate-800"
|
||||
className="rounded-md border border-slate-200 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
|
||||
onClick={() => setEditing(false)}
|
||||
>
|
||||
Cancel
|
||||
@@ -81,23 +90,27 @@ export function PodCard({
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-semibold text-slate-100">{pod.name}</h3>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h3 className="truncate text-lg font-semibold text-slate-950">{pod.name}</h3>
|
||||
{presence.length > 0 && (
|
||||
<span className="flex items-center gap-1 rounded-full bg-emerald-950/60 px-2 py-0.5 text-xs text-emerald-400">
|
||||
<span className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-400" />
|
||||
{presence.length} in room
|
||||
<span className="flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700 ring-1 ring-emerald-200">
|
||||
<span className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-500" />
|
||||
{presence.length} live
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">{pod.repo || 'no repo set'}</p>
|
||||
{pod.description && <p className="mt-1 text-sm text-slate-300">{pod.description}</p>}
|
||||
<p className="mt-1 truncate text-xs text-slate-500">{pod.repo || 'no repo set'}</p>
|
||||
{pod.description && (
|
||||
<p className="mt-3 line-clamp-2 min-h-[2.5rem] text-sm leading-5 text-slate-700">
|
||||
{pod.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex shrink-0 gap-1">
|
||||
<button
|
||||
className="rounded-md border border-slate-700 px-2 py-1 text-xs text-slate-300 hover:bg-slate-800"
|
||||
className="rounded-md border border-slate-200 px-2.5 py-1.5 text-xs text-slate-700 hover:bg-slate-50"
|
||||
onClick={() => {
|
||||
setDraft({ name: pod.name, repo: pod.repo, description: pod.description ?? '' });
|
||||
setEditing(true);
|
||||
@@ -106,7 +119,7 @@ export function PodCard({
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md border border-red-900/60 px-2 py-1 text-xs text-red-400 hover:bg-red-950/40 disabled:opacity-50"
|
||||
className="rounded-md border border-red-200 px-2.5 py-1.5 text-xs text-red-600 hover:bg-red-50 disabled:opacity-50"
|
||||
onClick={() => {
|
||||
if (confirm(`Delete pod “${pod.name}”?`)) onDelete(pod.id);
|
||||
}}
|
||||
@@ -118,30 +131,38 @@ export function PodCard({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Members — click your name to join */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className="text-xs text-slate-500">Click your name to join:</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<div className="mt-4 grid grid-cols-3 gap-2">
|
||||
<Stat label="Members" value={memberCount} />
|
||||
<Stat label="Live" value={presence.length} />
|
||||
<Stat label="Mode" value={active ? 'hot' : 'idle'} />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-1 flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-medium text-slate-500">Roster</p>
|
||||
<p className="text-xs text-slate-500">Members</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{pod.members.length === 0 && (
|
||||
<span className="text-xs text-slate-600">No members yet — add your name below.</span>
|
||||
)}
|
||||
{pod.members.map((m) => (
|
||||
<span
|
||||
key={m}
|
||||
className="flex items-center overflow-hidden rounded-full border border-slate-700 bg-slate-800"
|
||||
className="flex items-center overflow-hidden rounded-full border border-slate-200 bg-slate-50"
|
||||
>
|
||||
<button
|
||||
className="flex items-center gap-1.5 py-0.5 pl-0.5 pr-2 text-sm text-slate-100 hover:bg-emerald-900/40 disabled:opacity-50"
|
||||
className="flex min-h-8 items-center gap-1.5 py-0.5 pl-0.5 pr-2 text-sm text-slate-800 hover:bg-emerald-50 disabled:opacity-50"
|
||||
onClick={() => onJoin(pod, m)}
|
||||
disabled={busy}
|
||||
title={`Join as ${m}`}
|
||||
>
|
||||
<Avatar name={m} size={22} />
|
||||
{m}
|
||||
{inRoom(m) && <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />}
|
||||
{inRoom(m) && <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />}
|
||||
</button>
|
||||
<button
|
||||
className="px-1.5 text-slate-500 hover:bg-red-950/40 hover:text-red-400 disabled:opacity-50"
|
||||
className="min-h-8 px-2 text-slate-400 hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
|
||||
onClick={() => onRemoveMember(pod.id, m)}
|
||||
disabled={busy}
|
||||
title={`Remove ${m}`}
|
||||
@@ -152,11 +173,10 @@ export function PodCard({
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add your name (and join) */}
|
||||
<div className="flex gap-2">
|
||||
<div className="mt-auto grid gap-2 sm:grid-cols-[1fr_auto_auto]">
|
||||
<input
|
||||
className="flex-1 rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-sm"
|
||||
placeholder="Add your name…"
|
||||
className="min-w-0 rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-blue-400"
|
||||
placeholder="Add your name..."
|
||||
value={newMember}
|
||||
onChange={(e) => setNewMember(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
@@ -167,7 +187,7 @@ export function PodCard({
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="rounded-md border border-slate-600 px-3 py-1.5 text-sm hover:bg-slate-800 disabled:opacity-50"
|
||||
className="rounded-md border border-slate-200 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
|
||||
onClick={() => {
|
||||
onAddMember(pod.id, newMember.trim());
|
||||
setNewMember('');
|
||||
@@ -178,7 +198,7 @@ export function PodCard({
|
||||
Add
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-medium hover:bg-emerald-500 disabled:opacity-50"
|
||||
className="rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white hover:bg-emerald-500 disabled:opacity-50"
|
||||
onClick={() => {
|
||||
onAddAndJoin(pod, newMember.trim());
|
||||
setNewMember('');
|
||||
@@ -193,3 +213,12 @@ export function PodCard({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Stat({ label, value }: { label: string; value: number | string }) {
|
||||
return (
|
||||
<div className="rounded-md border border-slate-200 bg-slate-50 px-2.5 py-2">
|
||||
<p className="text-[10px] font-medium text-slate-500">{label}</p>
|
||||
<p className="mt-1 text-sm font-semibold text-slate-950">{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -150,112 +150,200 @@ export function PodView({
|
||||
}
|
||||
|
||||
const liveCount = participants.length;
|
||||
const podmanPresent = participants.some((p) => p.name.toLowerCase() === 'podman');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<header className="flex items-center justify-between">
|
||||
<header className="flex flex-col gap-4 rounded-lg border border-slate-200 bg-white p-4 shadow-sm sm:flex-row sm:items-start sm: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 className="flex flex-wrap items-center gap-2">
|
||||
<h2 className="text-2xl font-semibold text-slate-950">{team.name}</h2>
|
||||
<span
|
||||
className={`rounded-full px-2 py-1 text-xs font-medium ${
|
||||
room
|
||||
? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200'
|
||||
: 'bg-amber-50 text-amber-700 ring-1 ring-amber-200'
|
||||
}`}
|
||||
>
|
||||
{room ? 'live room' : 'local'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-slate-500">{team.repo}</p>
|
||||
<p className="mt-3 max-w-2xl text-sm leading-6 text-slate-600">
|
||||
Presence, media controls, and intervention state for this pod.
|
||||
</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"
|
||||
className="rounded-md border border-slate-200 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
|
||||
>
|
||||
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, so this is a local-only mock (no real room).
|
||||
<p className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
|
||||
Dev mode: LiveKit is not configured, so this is a local-only mock.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Connectivity test controls */}
|
||||
<section className="flex flex-wrap items-center gap-3 rounded-xl border border-slate-800 bg-slate-900/40 p-4">
|
||||
<button
|
||||
onClick={toggleBeat}
|
||||
disabled={!room}
|
||||
className={`rounded-md px-4 py-2 text-sm font-medium disabled:opacity-50 ${
|
||||
playingBeat ? 'bg-red-600 hover:bg-red-500' : 'bg-emerald-600 hover:bg-emerald-500'
|
||||
}`}
|
||||
>
|
||||
{playingBeat ? '⏹ Stop beat' : '▶ Play beat'}
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleScreen}
|
||||
disabled={!room}
|
||||
className="rounded-md border border-slate-600 px-4 py-2 text-sm hover:bg-slate-800 disabled:opacity-50"
|
||||
>
|
||||
{sharing ? '🛑 Stop sharing' : '📺 Share my screen'}
|
||||
</button>
|
||||
<span className="ml-auto text-xs text-slate-400">
|
||||
{playingBeat
|
||||
? '🔊 broadcasting beat to the pod'
|
||||
: 'press “Play beat” — everyone should hear it'}
|
||||
</span>
|
||||
<section className="grid gap-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm md:grid-cols-[1fr_auto] md:items-center">
|
||||
<div>
|
||||
<p className="text-xs font-medium text-slate-500">Broadcast controls</p>
|
||||
<p className="mt-1 text-sm text-slate-600">Audio, screen, and room signal.</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
onClick={toggleBeat}
|
||||
disabled={!room}
|
||||
className={`rounded-md px-4 py-2 text-sm font-semibold disabled:opacity-50 ${
|
||||
playingBeat
|
||||
? 'bg-red-600 text-white hover:bg-red-500'
|
||||
: 'bg-emerald-600 text-white hover:bg-emerald-500'
|
||||
}`}
|
||||
>
|
||||
{playingBeat ? 'Stop beat' : 'Play beat'}
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleScreen}
|
||||
disabled={!room}
|
||||
className="rounded-md border border-slate-200 px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
|
||||
>
|
||||
{sharing ? 'Stop sharing' : 'Share screen'}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
{note && <p className="text-sm text-amber-400">{note}</p>}
|
||||
{note && (
|
||||
<p className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700">
|
||||
{note}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-[1fr_300px]">
|
||||
{/* Live participants */}
|
||||
<section>
|
||||
<h3 className="mb-3 text-sm font-medium text-slate-400">In the room now ({liveCount})</h3>
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<RoomMetric label="Participants" value={liveCount} />
|
||||
<RoomMetric label="Screen share" value={sharing ? 'on' : 'off'} />
|
||||
<RoomMetric label="Audio test" value={playingBeat ? 'on' : 'idle'} />
|
||||
<RoomMetric label="PodMan" value={podmanPresent ? 'online' : 'waiting'} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_340px]">
|
||||
<section className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="mb-4 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-slate-950">Room presence</h3>
|
||||
<p className="text-sm text-slate-500">Live participants and speaking state.</p>
|
||||
</div>
|
||||
<span className="rounded-full bg-slate-50 px-2.5 py-1 text-xs text-slate-700 ring-1 ring-slate-200">
|
||||
{liveCount} connected
|
||||
</span>
|
||||
</div>
|
||||
{liveCount === 0 ? (
|
||||
<p className="text-sm text-slate-500">Connecting…</p>
|
||||
<p className="text-sm text-slate-500">Connecting...</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{participants.map((p) => (
|
||||
<div
|
||||
key={p.id}
|
||||
className={`flex items-center gap-3 rounded-lg border p-3 transition ${
|
||||
className={`flex min-h-20 items-center gap-3 rounded-lg border p-3 transition ${
|
||||
p.speaking
|
||||
? 'border-emerald-400 bg-emerald-950/30 ring-1 ring-emerald-400/50'
|
||||
: 'border-slate-800 bg-slate-900/40'
|
||||
? 'border-emerald-200 bg-emerald-50 ring-1 ring-emerald-100'
|
||||
: 'border-slate-200 bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<Avatar name={p.name} size={36} ring={p.isLocal} />
|
||||
<Avatar name={p.name} size={38} ring={p.isLocal} />
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-medium text-slate-200">{p.name}</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
<p className="truncate text-sm font-semibold text-slate-950">{p.name}</p>
|
||||
<p className="mt-0.5 text-xs text-slate-500">
|
||||
{p.isLocal ? 'you' : 'connected'}
|
||||
{p.speaking ? ' · 🔊' : ''}
|
||||
{p.speaking ? ' - speaking' : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<p className="mt-3 text-xs text-slate-600">
|
||||
Pod roster: {team.members.join(', ') || '—'}
|
||||
<p className="mt-4 text-xs leading-5 text-slate-600">
|
||||
Pod roster: {team.members.join(', ') || '-'}
|
||||
</p>
|
||||
</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
|
||||
<aside className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs font-medium text-slate-500">Intervention rail</p>
|
||||
<h3 className="mt-1 text-base font-semibold text-slate-950">PodMan</h3>
|
||||
</div>
|
||||
<span
|
||||
className={`rounded-full px-2 py-1 text-xs font-medium ${
|
||||
podmanPresent
|
||||
? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200'
|
||||
: 'bg-slate-100 text-slate-500 ring-1 ring-slate-200'
|
||||
}`}
|
||||
>
|
||||
{podmanPresent ? 'watching' : 'waiting'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-slate-500">
|
||||
{liveCount} participant{liveCount === 1 ? '' : 's'} connected. Watching 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 className="mt-5 space-y-3">
|
||||
<InterventionCard
|
||||
state="ready"
|
||||
title="Live inference"
|
||||
text={
|
||||
sharing ? 'Screen frames available to the agent.' : 'Waiting for screen signal.'
|
||||
}
|
||||
/>
|
||||
<InterventionCard
|
||||
state="quiet"
|
||||
title="Collision detector"
|
||||
text="No same-file collision has been detected in this room."
|
||||
/>
|
||||
<InterventionCard
|
||||
state="quiet"
|
||||
title="Escalation policy"
|
||||
text="Cards first; voice only when urgency crosses the threshold."
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{/* hidden sink for remote audio elements */}
|
||||
<div ref={audioRef} className="hidden" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RoomMetric({ label, value }: { label: string; value: number | string }) {
|
||||
return (
|
||||
<div className="rounded-lg border border-slate-200 bg-white px-3 py-3 shadow-sm">
|
||||
<p className="text-[11px] font-medium text-slate-500">{label}</p>
|
||||
<p className="mt-1 text-lg font-semibold text-slate-950">{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InterventionCard({
|
||||
state,
|
||||
title,
|
||||
text,
|
||||
}: {
|
||||
state: 'ready' | 'quiet';
|
||||
title: string;
|
||||
text: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<p className="text-sm font-semibold text-slate-950">{title}</p>
|
||||
<span
|
||||
className={`rounded-full px-2 py-0.5 text-[10px] font-medium uppercase ${
|
||||
state === 'ready'
|
||||
? 'bg-blue-50 text-blue-700 ring-1 ring-blue-200'
|
||||
: 'bg-white text-slate-500 ring-1 ring-slate-200'
|
||||
}`}
|
||||
>
|
||||
{state}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-2 text-xs leading-5 text-slate-500">{text}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+47
-3
@@ -1,16 +1,60 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #0b0f17;
|
||||
color: #e7eaf0;
|
||||
background: #f5f5f7;
|
||||
color: #0f172a;
|
||||
font-family:
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
input:focus-visible {
|
||||
outline: 2px solid rgb(37 99 235 / 0.7);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgb(37 99 235 / 0.18);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f5f5f7;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border: 2px solid #f5f5f7;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
@@ -2,6 +2,13 @@ import type { InterventionOutcome, Pod, PodInput } from '@podman/shared';
|
||||
|
||||
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:8787';
|
||||
|
||||
export interface MemoryStats {
|
||||
observations: number;
|
||||
collisions: number;
|
||||
interventions: number;
|
||||
outcomes: number;
|
||||
}
|
||||
|
||||
async function json<T>(res: Response): Promise<T> {
|
||||
if (!res.ok) {
|
||||
const body = (await res.json().catch(() => ({}))) as { error?: string };
|
||||
@@ -46,6 +53,10 @@ export async function getPresence(): Promise<Record<string, string[]>> {
|
||||
return json(await fetch(`${BACKEND_URL}/api/presence`));
|
||||
}
|
||||
|
||||
export async function getMemoryStats(): Promise<MemoryStats> {
|
||||
return json(await fetch(`${BACKEND_URL}/api/memory/stats`));
|
||||
}
|
||||
|
||||
export async function createPod(input: PodInput): Promise<Pod> {
|
||||
return json(
|
||||
await fetch(`${BACKEND_URL}/api/pods`, {
|
||||
|
||||
Reference in New Issue
Block a user