mosaic/stack
1
0
Fork 0
Code Issues 11 Pull Requests 1 Actions Packages Projects Releases 2 Wiki Activity

feat(web): MS23-P2-003 BargeInInput component
Some checks failed
ci/woodpecker/push/ci Pipeline failed
Details

Browse Source
This commit is contained in:
Jason Woltje
2026-03-07 14:32:12 -06:00
parent 2c36569f85
commit b2c751caca
3 changed files with 184 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
apps/web/src/components/mission-control/OrchestratorPanel.tsx
View File

@@ -2,6 +2,7 @@
import { useEffect, useRef } from "react";
import { formatDistanceToNow } from "date-fns";
import { BargeInInput } from "@/components/mission-control/BargeInInput";
import { Badge } from "@/components/ui/badge";
import type { BadgeVariant } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -82,36 +83,41 @@ export function OrchestratorPanel({ sessionId }: OrchestratorPanelProps): React.
</div>
<p className="truncate text-xs text-muted-foreground">Session: {sessionId}</p>
</CardHeader>
<CardContent className="flex min-h-0 flex-1 p-0">
<ScrollArea className="h-full w-full">
<div className="flex min-h-full flex-col gap-3 p-4">
{messages.length === 0 ? (
<p className="mt-6 text-center text-sm text-muted-foreground">
{error ?? "Waiting for messages..."}
</p>
) : (
messages.map((message) => (
<article
key={message.id}
className="rounded-lg border border-border/70 bg-card px-3 py-2"
>
<div className="mb-2 flex items-center justify-between gap-2">
<Badge variant={ROLE_BADGE_VARIANT[message.role]} className="uppercase">
{message.role}
</Badge>
<time className="text-xs text-muted-foreground">
{formatRelativeTimestamp(message.timestamp)}
</time>
</div>
<p className="whitespace-pre-wrap break-words text-sm text-foreground">
{message.content}
</p>
</article>
))
)}
<div ref={bottomAnchorRef} />
</div>
</ScrollArea>
<CardContent className="flex min-h-0 flex-1 flex-col p-0">
<div className="min-h-0 flex-1">
<ScrollArea className="h-full w-full">
<div className="flex min-h-full flex-col gap-3 p-4">
{messages.length === 0 ? (
<p className="mt-6 text-center text-sm text-muted-foreground">
{error ?? "Waiting for messages..."}
</p>
) : (
messages.map((message) => (
<article
key={message.id}
className="rounded-lg border border-border/70 bg-card px-3 py-2"
>
<div className="mb-2 flex items-center justify-between gap-2">
<Badge variant={ROLE_BADGE_VARIANT[message.role]} className="uppercase">
{message.role}
</Badge>
<time className="text-xs text-muted-foreground">
{formatRelativeTimestamp(message.timestamp)}
</time>
</div>
<p className="whitespace-pre-wrap break-words text-sm text-foreground">
{message.content}
</p>
</article>
))
)}
<div ref={bottomAnchorRef} />
</div>
</ScrollArea>
</div>
<div className="border-t border-border/70 p-3">
<BargeInInput sessionId={sessionId} />
</div>
</CardContent>
</Card>
);