Compare commits
1 Commits
feat/ms23-
...
feat/ms23-
| Author | SHA1 | Date | |
|---|---|---|---|
| 52e7b0e6e7 |
@@ -1,67 +0,0 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
||||||
import type { AgentSession } from "@mosaic/shared";
|
|
||||||
import type { PrismaService } from "../../prisma/prisma.service";
|
|
||||||
import { AgentProviderRegistry } from "../agents/agent-provider.registry";
|
|
||||||
import { MissionControlController } from "./mission-control.controller";
|
|
||||||
import { MissionControlService } from "./mission-control.service";
|
|
||||||
|
|
||||||
describe("MissionControlController", () => {
|
|
||||||
let controller: MissionControlController;
|
|
||||||
let registry: {
|
|
||||||
listAllSessions: ReturnType<typeof vi.fn>;
|
|
||||||
getProviderForSession: ReturnType<typeof vi.fn>;
|
|
||||||
};
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
registry = {
|
|
||||||
listAllSessions: vi.fn(),
|
|
||||||
getProviderForSession: vi.fn(),
|
|
||||||
};
|
|
||||||
|
|
||||||
const prisma = {
|
|
||||||
operatorAuditLog: {
|
|
||||||
create: vi.fn().mockResolvedValue(undefined),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const service = new MissionControlService(
|
|
||||||
registry as unknown as AgentProviderRegistry,
|
|
||||||
prisma as unknown as PrismaService
|
|
||||||
);
|
|
||||||
|
|
||||||
controller = new MissionControlController(service);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Phase 1 gate: unified sessions endpoint returns internal provider sessions", async () => {
|
|
||||||
const internalSession: AgentSession = {
|
|
||||||
id: "session-internal-1",
|
|
||||||
providerId: "internal",
|
|
||||||
providerType: "internal",
|
|
||||||
status: "active",
|
|
||||||
createdAt: new Date("2026-03-07T20:00:00.000Z"),
|
|
||||||
updatedAt: new Date("2026-03-07T20:01:00.000Z"),
|
|
||||||
};
|
|
||||||
|
|
||||||
const externalSession: AgentSession = {
|
|
||||||
id: "session-openclaw-1",
|
|
||||||
providerId: "openclaw",
|
|
||||||
providerType: "external",
|
|
||||||
status: "active",
|
|
||||||
createdAt: new Date("2026-03-07T20:02:00.000Z"),
|
|
||||||
updatedAt: new Date("2026-03-07T20:03:00.000Z"),
|
|
||||||
};
|
|
||||||
|
|
||||||
registry.listAllSessions.mockResolvedValue([internalSession, externalSession]);
|
|
||||||
|
|
||||||
const response = await controller.listSessions();
|
|
||||||
|
|
||||||
expect(registry.listAllSessions).toHaveBeenCalledTimes(1);
|
|
||||||
expect(response.sessions).toEqual([internalSession, externalSession]);
|
|
||||||
expect(response.sessions).toContainEqual(
|
|
||||||
expect.objectContaining({
|
|
||||||
id: "session-internal-1",
|
|
||||||
providerId: "internal",
|
|
||||||
})
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import { MissionControlLayout } from "@/components/mission-control/MissionControlLayout";
|
|
||||||
|
|
||||||
export default function MissionControlPage(): React.JSX.Element {
|
|
||||||
return <MissionControlLayout />;
|
|
||||||
}
|
|
||||||
@@ -156,26 +156,6 @@ function IconTerminal(): React.JSX.Element {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function IconMissionControl(): React.JSX.Element {
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<circle cx="8" cy="8" r="1.5" />
|
|
||||||
<path d="M11 5a4.25 4.25 0 0 1 0 6" />
|
|
||||||
<path d="M5 5a4.25 4.25 0 0 0 0 6" />
|
|
||||||
<path d="M13.5 2.5a7.75 7.75 0 0 1 0 11" />
|
|
||||||
<path d="M2.5 2.5a7.75 7.75 0 0 0 0 11" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function IconSettings(): React.JSX.Element {
|
function IconSettings(): React.JSX.Element {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
@@ -280,11 +260,6 @@ const NAV_GROUPS: NavGroup[] = [
|
|||||||
label: "Terminal",
|
label: "Terminal",
|
||||||
icon: <IconTerminal />,
|
icon: <IconTerminal />,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
href: "/mission-control",
|
|
||||||
label: "Mission Control",
|
|
||||||
icon: <IconMissionControl />,
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,260 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useMemo, useState } from "react";
|
|
||||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
||||||
import type { AgentSession } from "@mosaic/shared";
|
|
||||||
import { ChevronRight, Loader2, X } from "lucide-react";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import type { BadgeVariant } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
import { Collapsible } from "@/components/ui/collapsible";
|
|
||||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
||||||
import { Skeleton } from "@/components/ui/skeleton";
|
|
||||||
import { apiGet, apiPost } from "@/lib/api/client";
|
|
||||||
|
|
||||||
const SESSIONS_QUERY_KEY = ["mission-control", "sessions"] as const;
|
|
||||||
const SESSIONS_POLL_INTERVAL_MS = 5_000;
|
|
||||||
|
|
||||||
type MissionControlSessionStatus = AgentSession["status"] | "killed";
|
|
||||||
|
|
||||||
interface MissionControlSession extends Omit<AgentSession, "status" | "createdAt" | "updatedAt"> {
|
|
||||||
status: MissionControlSessionStatus;
|
|
||||||
createdAt: string | Date;
|
|
||||||
updatedAt: string | Date;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SessionsPayload {
|
|
||||||
sessions: MissionControlSession[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ProviderSessionGroup {
|
|
||||||
providerId: string;
|
|
||||||
providerType: string;
|
|
||||||
sessions: MissionControlSession[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface GlobalAgentRosterProps {
|
|
||||||
onSelectSession?: (sessionId: string) => void;
|
|
||||||
selectedSessionId?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStatusVariant(status: MissionControlSessionStatus): BadgeVariant {
|
|
||||||
switch (status) {
|
|
||||||
case "active":
|
|
||||||
return "status-success";
|
|
||||||
case "paused":
|
|
||||||
return "status-warning";
|
|
||||||
case "killed":
|
|
||||||
return "status-error";
|
|
||||||
default:
|
|
||||||
return "status-neutral";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function truncateSessionId(sessionId: string): string {
|
|
||||||
return sessionId.slice(0, 8);
|
|
||||||
}
|
|
||||||
|
|
||||||
function resolveProviderName(providerId: string, providerType: string): string {
|
|
||||||
return providerId === providerType ? providerId : `${providerId} (${providerType})`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function groupByProvider(sessions: MissionControlSession[]): ProviderSessionGroup[] {
|
|
||||||
const grouped = new Map<string, ProviderSessionGroup>();
|
|
||||||
|
|
||||||
for (const session of sessions) {
|
|
||||||
const existing = grouped.get(session.providerId);
|
|
||||||
if (existing) {
|
|
||||||
existing.sessions.push(session);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
grouped.set(session.providerId, {
|
|
||||||
providerId: session.providerId,
|
|
||||||
providerType: session.providerType,
|
|
||||||
sessions: [session],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return Array.from(grouped.values()).sort((a, b) => a.providerId.localeCompare(b.providerId));
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchSessions(): Promise<MissionControlSession[]> {
|
|
||||||
const payload = await apiGet<MissionControlSession[] | SessionsPayload>(
|
|
||||||
"/api/mission-control/sessions"
|
|
||||||
);
|
|
||||||
return Array.isArray(payload) ? payload : payload.sessions;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GlobalAgentRoster({
|
|
||||||
onSelectSession,
|
|
||||||
selectedSessionId,
|
|
||||||
}: GlobalAgentRosterProps): React.JSX.Element {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const [openProviders, setOpenProviders] = useState<Record<string, boolean>>({});
|
|
||||||
|
|
||||||
const sessionsQuery = useQuery<MissionControlSession[]>({
|
|
||||||
queryKey: SESSIONS_QUERY_KEY,
|
|
||||||
queryFn: fetchSessions,
|
|
||||||
refetchInterval: SESSIONS_POLL_INTERVAL_MS,
|
|
||||||
});
|
|
||||||
|
|
||||||
const killMutation = useMutation({
|
|
||||||
mutationFn: async (sessionId: string): Promise<string> => {
|
|
||||||
await apiPost<{ message: string }>(`/api/mission-control/sessions/${sessionId}/kill`, {
|
|
||||||
force: false,
|
|
||||||
});
|
|
||||||
return sessionId;
|
|
||||||
},
|
|
||||||
onSuccess: (): void => {
|
|
||||||
void queryClient.invalidateQueries({ queryKey: SESSIONS_QUERY_KEY });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const groupedSessions = useMemo(
|
|
||||||
() => groupByProvider(sessionsQuery.data ?? []),
|
|
||||||
[sessionsQuery.data]
|
|
||||||
);
|
|
||||||
|
|
||||||
const pendingKillSessionId = killMutation.isPending ? killMutation.variables : undefined;
|
|
||||||
|
|
||||||
const toggleProvider = (providerId: string): void => {
|
|
||||||
setOpenProviders((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[providerId]: !(prev[providerId] ?? true),
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const isProviderOpen = (providerId: string): boolean => openProviders[providerId] ?? true;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="flex h-full min-h-0 flex-col">
|
|
||||||
<CardHeader className="pb-2">
|
|
||||||
<CardTitle className="flex items-center justify-between text-base">
|
|
||||||
<span>Agent Roster</span>
|
|
||||||
{sessionsQuery.isFetching && !sessionsQuery.isLoading ? (
|
|
||||||
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" aria-hidden="true" />
|
|
||||||
) : null}
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="min-h-0 flex-1 px-3 pb-3">
|
|
||||||
{sessionsQuery.isLoading ? (
|
|
||||||
<ScrollArea className="h-full">
|
|
||||||
<div className="space-y-2 pr-1">
|
|
||||||
{Array.from({ length: 6 }).map((_, index) => (
|
|
||||||
<Skeleton key={`roster-skeleton-${String(index)}`} className="h-10 w-full" />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
) : sessionsQuery.error ? (
|
|
||||||
<div className="flex h-full items-center justify-center text-center text-sm text-red-500">
|
|
||||||
Failed to load agents: {sessionsQuery.error.message}
|
|
||||||
</div>
|
|
||||||
) : groupedSessions.length === 0 ? (
|
|
||||||
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
|
||||||
No active agents
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<ScrollArea className="h-full">
|
|
||||||
<div className="space-y-3 pr-1">
|
|
||||||
{groupedSessions.map((group) => {
|
|
||||||
const providerOpen = isProviderOpen(group.providerId);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Collapsible key={group.providerId} open={providerOpen} className="space-y-1">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
toggleProvider(group.providerId);
|
|
||||||
}}
|
|
||||||
className="flex w-full items-center gap-2 rounded-md px-1 py-1 text-left text-sm hover:bg-muted/40"
|
|
||||||
aria-expanded={providerOpen}
|
|
||||||
>
|
|
||||||
<ChevronRight
|
|
||||||
className={`h-4 w-4 text-muted-foreground transition-transform ${providerOpen ? "rotate-90" : ""}`}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
<span className="font-medium">
|
|
||||||
{resolveProviderName(group.providerId, group.providerType)}
|
|
||||||
</span>
|
|
||||||
<span className="ml-auto text-xs text-muted-foreground">
|
|
||||||
{group.sessions.length}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
{providerOpen ? (
|
|
||||||
<div className="space-y-1 pl-2">
|
|
||||||
{group.sessions.map((session) => {
|
|
||||||
const isSelected = selectedSessionId === session.id;
|
|
||||||
const isKilling = pendingKillSessionId === session.id;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={session.id}
|
|
||||||
role="button"
|
|
||||||
tabIndex={0}
|
|
||||||
onClick={() => {
|
|
||||||
onSelectSession?.(session.id);
|
|
||||||
}}
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
if (event.key === "Enter" || event.key === " ") {
|
|
||||||
event.preventDefault();
|
|
||||||
onSelectSession?.(session.id);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="flex items-center justify-between gap-2 rounded-md border border-transparent px-2 py-1.5 transition-colors hover:bg-muted/40"
|
|
||||||
style={
|
|
||||||
isSelected
|
|
||||||
? {
|
|
||||||
borderColor: "rgba(47, 128, 255, 0.35)",
|
|
||||||
backgroundColor: "rgba(47, 128, 255, 0.08)",
|
|
||||||
}
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className="flex min-w-0 items-center gap-2">
|
|
||||||
<span className="font-mono text-xs" title={session.id}>
|
|
||||||
{truncateSessionId(session.id)}
|
|
||||||
</span>
|
|
||||||
<Badge
|
|
||||||
variant={getStatusVariant(session.status)}
|
|
||||||
className="capitalize"
|
|
||||||
>
|
|
||||||
{session.status}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="h-7 min-h-7 w-7 min-w-7 p-0"
|
|
||||||
disabled={isKilling}
|
|
||||||
onClick={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
killMutation.mutate(session.id);
|
|
||||||
}}
|
|
||||||
aria-label={`Kill session ${truncateSessionId(session.id)}`}
|
|
||||||
>
|
|
||||||
{isKilling ? (
|
|
||||||
<Loader2
|
|
||||||
className="h-3.5 w-3.5 animate-spin"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<X className="h-3.5 w-3.5" aria-hidden="true" />
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</Collapsible>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
import { GlobalAgentRoster } from "@/components/mission-control/GlobalAgentRoster";
|
|
||||||
import { MissionControlPanel } from "@/components/mission-control/MissionControlPanel";
|
|
||||||
import { useSessions } from "@/hooks/useMissionControl";
|
|
||||||
|
|
||||||
const DEFAULT_PANEL_SLOTS = ["panel-1", "panel-2", "panel-3", "panel-4"] as const;
|
|
||||||
|
|
||||||
export function MissionControlLayout(): React.JSX.Element {
|
|
||||||
const { sessions } = useSessions();
|
|
||||||
const [selectedSessionId, setSelectedSessionId] = useState<string>();
|
|
||||||
|
|
||||||
// First panel: selected session (from roster click) or first available session
|
|
||||||
const firstPanelSessionId = selectedSessionId ?? sessions[0]?.id;
|
|
||||||
const panelSessionIds = [firstPanelSessionId, undefined, undefined, undefined] as const;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="h-full min-h-0 overflow-hidden" aria-label="Mission Control">
|
|
||||||
<div className="grid h-full min-h-0 gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
|
|
||||||
<aside className="h-full min-h-0">
|
|
||||||
<GlobalAgentRoster
|
|
||||||
onSelectSession={setSelectedSessionId}
|
|
||||||
selectedSessionId={selectedSessionId}
|
|
||||||
/>
|
|
||||||
</aside>
|
|
||||||
<main className="h-full min-h-0 overflow-hidden">
|
|
||||||
<MissionControlPanel panels={DEFAULT_PANEL_SLOTS} panelSessionIds={panelSessionIds} />
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { OrchestratorPanel } from "@/components/mission-control/OrchestratorPanel";
|
|
||||||
|
|
||||||
interface MissionControlPanelProps {
|
|
||||||
panels: readonly string[];
|
|
||||||
panelSessionIds?: readonly (string | undefined)[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function MissionControlPanel({
|
|
||||||
panels,
|
|
||||||
panelSessionIds,
|
|
||||||
}: MissionControlPanelProps): React.JSX.Element {
|
|
||||||
return (
|
|
||||||
<div className="grid h-full min-h-0 auto-rows-fr grid-cols-1 gap-4 overflow-y-auto pr-1 md:grid-cols-2">
|
|
||||||
{panels.map((panelId, index) => {
|
|
||||||
const sessionId = panelSessionIds?.[index];
|
|
||||||
|
|
||||||
if (sessionId === undefined) {
|
|
||||||
return <OrchestratorPanel key={panelId} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <OrchestratorPanel key={panelId} sessionId={sessionId} />;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,118 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useEffect, useRef } from "react";
|
|
||||||
import { formatDistanceToNow } from "date-fns";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import type { BadgeVariant } from "@/components/ui/badge";
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
||||||
import {
|
|
||||||
useSessionStream,
|
|
||||||
type MissionControlConnectionStatus,
|
|
||||||
type MissionControlMessageRole,
|
|
||||||
} from "@/hooks/useMissionControl";
|
|
||||||
|
|
||||||
const ROLE_BADGE_VARIANT: Record<MissionControlMessageRole, BadgeVariant> = {
|
|
||||||
user: "badge-blue",
|
|
||||||
assistant: "status-success",
|
|
||||||
tool: "badge-amber",
|
|
||||||
system: "badge-muted",
|
|
||||||
};
|
|
||||||
|
|
||||||
const CONNECTION_DOT_CLASS: Record<MissionControlConnectionStatus, string> = {
|
|
||||||
connected: "bg-emerald-500",
|
|
||||||
connecting: "bg-amber-500",
|
|
||||||
error: "bg-red-500",
|
|
||||||
};
|
|
||||||
|
|
||||||
const CONNECTION_TEXT: Record<MissionControlConnectionStatus, string> = {
|
|
||||||
connected: "Connected",
|
|
||||||
connecting: "Connecting",
|
|
||||||
error: "Error",
|
|
||||||
};
|
|
||||||
|
|
||||||
export interface OrchestratorPanelProps {
|
|
||||||
sessionId?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatRelativeTimestamp(timestamp: string): string {
|
|
||||||
const parsedDate = new Date(timestamp);
|
|
||||||
if (Number.isNaN(parsedDate.getTime())) {
|
|
||||||
return "just now";
|
|
||||||
}
|
|
||||||
|
|
||||||
return formatDistanceToNow(parsedDate, { addSuffix: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
export function OrchestratorPanel({ sessionId }: OrchestratorPanelProps): React.JSX.Element {
|
|
||||||
const { messages, status, error } = useSessionStream(sessionId ?? "");
|
|
||||||
const bottomAnchorRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
bottomAnchorRef.current?.scrollIntoView({ block: "end" });
|
|
||||||
}, [messages.length]);
|
|
||||||
|
|
||||||
if (!sessionId) {
|
|
||||||
return (
|
|
||||||
<Card className="flex h-full min-h-[220px] flex-col">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-base">Orchestrator Panel</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
|
|
||||||
Select an agent to view its stream
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="flex h-full min-h-[220px] flex-col">
|
|
||||||
<CardHeader className="space-y-2">
|
|
||||||
<div className="flex items-center justify-between gap-2">
|
|
||||||
<CardTitle className="text-base">Orchestrator Panel</CardTitle>
|
|
||||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
||||||
<span
|
|
||||||
className={`h-2.5 w-2.5 rounded-full ${CONNECTION_DOT_CLASS[status]} ${
|
|
||||||
status === "connecting" ? "animate-pulse" : ""
|
|
||||||
}`}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
<span>{CONNECTION_TEXT[status]}</span>
|
|
||||||
</div>
|
|
||||||
</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>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
|
|
||||||
export interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
||||||
open?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Collapsible({
|
|
||||||
open = true,
|
|
||||||
className = "",
|
|
||||||
...props
|
|
||||||
}: CollapsibleProps): React.JSX.Element {
|
|
||||||
return <div data-state={open ? "open" : "closed"} className={className} {...props} />;
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
|
|
||||||
export type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement>;
|
|
||||||
|
|
||||||
export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
|
|
||||||
({ className = "", children, ...props }, ref) => {
|
|
||||||
return (
|
|
||||||
<div ref={ref} className={`relative overflow-hidden ${className}`} {...props}>
|
|
||||||
<div className="h-full w-full overflow-auto">{children}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
ScrollArea.displayName = "ScrollArea";
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
|
|
||||||
export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
|
|
||||||
|
|
||||||
export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
|
|
||||||
({ className = "", ...props }, ref) => (
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
className={`animate-pulse rounded-md bg-[rgb(var(--surface-2))] ${className}`}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
Skeleton.displayName = "Skeleton";
|
|
||||||
@@ -1,189 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useEffect, useRef, useState } from "react";
|
|
||||||
import { useQuery } from "@tanstack/react-query";
|
|
||||||
import type { AgentMessageRole, AgentSessionStatus } from "@mosaic/shared";
|
|
||||||
import { apiGet } from "@/lib/api/client";
|
|
||||||
|
|
||||||
const MISSION_CONTROL_SESSIONS_QUERY_KEY = ["mission-control", "sessions"] as const;
|
|
||||||
const SESSIONS_REFRESH_INTERVAL_MS = 15_000;
|
|
||||||
|
|
||||||
export type MissionControlMessageRole = AgentMessageRole;
|
|
||||||
|
|
||||||
export interface MissionControlSession {
|
|
||||||
id: string;
|
|
||||||
providerId: string;
|
|
||||||
providerType: string;
|
|
||||||
label?: string;
|
|
||||||
status: AgentSessionStatus;
|
|
||||||
parentSessionId?: string;
|
|
||||||
createdAt: string;
|
|
||||||
updatedAt: string;
|
|
||||||
metadata?: Record<string, unknown>;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MissionControlSessionsResponse {
|
|
||||||
sessions: MissionControlSession[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface MissionControlStreamMessage {
|
|
||||||
id: string;
|
|
||||||
sessionId: string;
|
|
||||||
role: MissionControlMessageRole;
|
|
||||||
content: string;
|
|
||||||
timestamp: string;
|
|
||||||
metadata?: Record<string, unknown>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type MissionControlConnectionStatus = "connecting" | "connected" | "error";
|
|
||||||
|
|
||||||
export interface UseSessionsResult {
|
|
||||||
sessions: MissionControlSession[];
|
|
||||||
loading: boolean;
|
|
||||||
error: Error | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UseSessionStreamResult {
|
|
||||||
messages: MissionControlStreamMessage[];
|
|
||||||
status: MissionControlConnectionStatus;
|
|
||||||
error: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isRecord(value: unknown): value is Record<string, unknown> {
|
|
||||||
return typeof value === "object" && value !== null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isMessageRole(value: unknown): value is MissionControlMessageRole {
|
|
||||||
return value === "assistant" || value === "system" || value === "tool" || value === "user";
|
|
||||||
}
|
|
||||||
|
|
||||||
function isMissionControlStreamMessage(value: unknown): value is MissionControlStreamMessage {
|
|
||||||
if (!isRecord(value)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { id, sessionId, role, content, timestamp, metadata } = value;
|
|
||||||
|
|
||||||
if (
|
|
||||||
typeof id !== "string" ||
|
|
||||||
typeof sessionId !== "string" ||
|
|
||||||
!isMessageRole(role) ||
|
|
||||||
typeof content !== "string" ||
|
|
||||||
typeof timestamp !== "string"
|
|
||||||
) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (metadata !== undefined && !isRecord(metadata)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetches Mission Control sessions.
|
|
||||||
*/
|
|
||||||
export function useSessions(): UseSessionsResult {
|
|
||||||
const query = useQuery<MissionControlSessionsResponse>({
|
|
||||||
queryKey: MISSION_CONTROL_SESSIONS_QUERY_KEY,
|
|
||||||
queryFn: async (): Promise<MissionControlSessionsResponse> => {
|
|
||||||
return apiGet<MissionControlSessionsResponse>("/api/mission-control/sessions");
|
|
||||||
},
|
|
||||||
refetchInterval: SESSIONS_REFRESH_INTERVAL_MS,
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
sessions: query.data?.sessions ?? [],
|
|
||||||
loading: query.isLoading,
|
|
||||||
error: query.error ?? null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Backward-compatible alias for early Mission Control integration.
|
|
||||||
*/
|
|
||||||
export function useMissionControl(): UseSessionsResult {
|
|
||||||
return useSessions();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Streams Mission Control session messages over SSE.
|
|
||||||
*/
|
|
||||||
export function useSessionStream(sessionId: string): UseSessionStreamResult {
|
|
||||||
const [messages, setMessages] = useState<MissionControlStreamMessage[]>([]);
|
|
||||||
const [status, setStatus] = useState<MissionControlConnectionStatus>("connecting");
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const eventSourceRef = useRef<EventSource | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (eventSourceRef.current !== null) {
|
|
||||||
eventSourceRef.current.close();
|
|
||||||
eventSourceRef.current = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
setMessages([]);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
if (!sessionId) {
|
|
||||||
setStatus("connecting");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof EventSource === "undefined") {
|
|
||||||
setStatus("error");
|
|
||||||
setError("Mission Control stream is not supported by this browser.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setStatus("connecting");
|
|
||||||
|
|
||||||
const source = new EventSource(
|
|
||||||
`/api/mission-control/sessions/${encodeURIComponent(sessionId)}/stream`
|
|
||||||
);
|
|
||||||
eventSourceRef.current = source;
|
|
||||||
|
|
||||||
source.onopen = (): void => {
|
|
||||||
setStatus("connected");
|
|
||||||
setError(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
source.onmessage = (event: MessageEvent<string>): void => {
|
|
||||||
try {
|
|
||||||
const parsed = JSON.parse(event.data) as unknown;
|
|
||||||
if (!isMissionControlStreamMessage(parsed)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setMessages((previousMessages) => [...previousMessages, parsed]);
|
|
||||||
} catch {
|
|
||||||
// Ignore malformed events from the stream.
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
source.onerror = (): void => {
|
|
||||||
if (source.readyState === EventSource.CONNECTING) {
|
|
||||||
setStatus("connecting");
|
|
||||||
setError(null);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setStatus("error");
|
|
||||||
setError("Mission Control stream disconnected.");
|
|
||||||
};
|
|
||||||
|
|
||||||
return (): void => {
|
|
||||||
source.close();
|
|
||||||
if (eventSourceRef.current === source) {
|
|
||||||
eventSourceRef.current = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [sessionId]);
|
|
||||||
|
|
||||||
return {
|
|
||||||
messages,
|
|
||||||
status,
|
|
||||||
error,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user