feat(web): MS23-P2-008 panel grid responsive layout

apps/orchestrator/src/api/mission-control/dto/get-mission-control-audit-log-query.dto.ts

@@ -1,21 +0,0 @@
-import { Type } from "class-transformer";
-import { IsInt, IsOptional, IsString, Max, Min } from "class-validator";
-
-export class GetMissionControlAuditLogQueryDto {
-  @IsOptional()
-  @IsString()
-  sessionId?: string;
-
-  @IsOptional()
-  @Type(() => Number)
-  @IsInt()
-  @Min(1)
-  page = 1;
-
-  @IsOptional()
-  @Type(() => Number)
-  @IsInt()
-  @Min(1)
-  @Max(200)
-  limit = 50;
-}

apps/orchestrator/src/api/mission-control/mission-control.controller.ts

@@ -18,10 +18,9 @@ import type { AgentMessage, AgentSession, InjectResult } from "@mosaic/shared";
 import { Observable } from "rxjs";
 import { AuthGuard } from "../../auth/guards/auth.guard";
 import { InjectAgentDto } from "../agents/dto/inject-agent.dto";
-import { GetMissionControlAuditLogQueryDto } from "./dto/get-mission-control-audit-log-query.dto";
 import { GetMissionControlMessagesQueryDto } from "./dto/get-mission-control-messages-query.dto";
 import { KillSessionDto } from "./dto/kill-session.dto";
-import { MissionControlService, type MissionControlAuditLogPage } from "./mission-control.service";
+import { MissionControlService } from "./mission-control.service";
 
 const DEFAULT_OPERATOR_ID = "mission-control";
 
@@ -62,14 +61,6 @@ export class MissionControlController {
     return { messages };
   }
 
-  @Get("audit-log")
-  @UsePipes(new ValidationPipe({ transform: true, whitelist: true }))
-  getAuditLog(
-    @Query() query: GetMissionControlAuditLogQueryDto
-  ): Promise<MissionControlAuditLogPage> {
-    return this.missionControlService.getAuditLog(query.sessionId, query.page, query.limit);
-  }
-
   @Post("sessions/:sessionId/inject")
   @HttpCode(200)
   @UsePipes(new ValidationPipe({ transform: true, whitelist: true }))

apps/orchestrator/src/api/mission-control/mission-control.service.ts

@@ -8,24 +8,6 @@ type MissionControlAction = "inject" | "pause" | "resume" | "kill";
 
 const DEFAULT_OPERATOR_ID = "mission-control";
 
-export interface AuditLogEntry {
-  id: string;
-  userId: string;
-  sessionId: string;
-  provider: string;
-  action: string;
-  content: string | null;
-  metadata: Prisma.JsonValue;
-  createdAt: Date;
-}
-
-export interface MissionControlAuditLogPage {
-  items: AuditLogEntry[];
-  total: number;
-  page: number;
-  pages: number;
-}
-
 @Injectable()
 export class MissionControlService {
   constructor(
@@ -51,35 +33,6 @@ export class MissionControlService {
     return provider.getMessages(sessionId, limit, before);
   }
 
-  async getAuditLog(
-    sessionId: string | undefined,
-    page: number,
-    limit: number
-  ): Promise<MissionControlAuditLogPage> {
-    const normalizedSessionId = sessionId?.trim();
-    const where: Prisma.OperatorAuditLogWhereInput =
-      normalizedSessionId && normalizedSessionId.length > 0
-        ? { sessionId: normalizedSessionId }
-        : {};
-
-    const [total, items] = await this.prisma.$transaction([
-      this.prisma.operatorAuditLog.count({ where }),
-      this.prisma.operatorAuditLog.findMany({
-        where,
-        orderBy: { createdAt: "desc" },
-        skip: (page - 1) * limit,
-        take: limit,
-      }),
-    ]);
-
-    return {
-      items,
-      total,
-      page,
-      pages: total === 0 ? 0 : Math.ceil(total / limit),
-    };
-  }
-
   async injectMessage(
     sessionId: string,
     message: string,

apps/web/src/components/mission-control/AuditLogDrawer.tsx

@@ -1,322 +0,0 @@
-"use client";
-
-import { isValidElement, useEffect, useMemo, useState } from "react";
-import type { ReactNode } from "react";
-import { format } from "date-fns";
-import { useQuery } from "@tanstack/react-query";
-import { Loader2 } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
-import type { BadgeVariant } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet";
-import { apiGet } from "@/lib/api/client";
-
-const AUDIT_LOG_REFRESH_INTERVAL_MS = 10_000;
-const AUDIT_LOG_PAGE_SIZE = 50;
-const SUMMARY_MAX_LENGTH = 120;
-
-interface AuditLogDrawerProps {
-  sessionId?: string;
-  trigger: ReactNode;
-}
-
-interface AuditLogEntry {
-  id: string;
-  userId: string;
-  sessionId: string;
-  provider: string;
-  action: string;
-  content: string | null;
-  metadata: unknown;
-  createdAt: string;
-}
-
-interface AuditLogResponse {
-  items: AuditLogEntry[];
-  total: number;
-  page: number;
-  pages: number;
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null;
-}
-
-function truncateText(value: string, maxLength: number): string {
-  if (value.length <= maxLength) {
-    return value;
-  }
-
-  return `${value.slice(0, maxLength - 1)}…`;
-}
-
-function truncateSessionId(sessionId: string): string {
-  return sessionId.slice(0, 8);
-}
-
-function formatTimestamp(value: string): string {
-  const parsed = new Date(value);
-
-  if (Number.isNaN(parsed.getTime())) {
-    return "Unknown";
-  }
-
-  return format(parsed, "yyyy-MM-dd HH:mm:ss");
-}
-
-function stringifyPayloadValue(value: unknown): string {
-  if (typeof value === "string") {
-    return value;
-  }
-
-  if (typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return "[unserializable]";
-  }
-}
-
-function getPayloadSummary(entry: AuditLogEntry): string {
-  const metadata = isRecord(entry.metadata) ? entry.metadata : undefined;
-  const payload = metadata && isRecord(metadata.payload) ? metadata.payload : undefined;
-
-  if (typeof entry.content === "string" && entry.content.trim().length > 0) {
-    return truncateText(entry.content.trim(), SUMMARY_MAX_LENGTH);
-  }
-
-  if (payload) {
-    const summary = Object.entries(payload)
-      .map(([key, value]) => `${key}=${stringifyPayloadValue(value)}`)
-      .join(", ");
-
-    if (summary.length > 0) {
-      return truncateText(summary, SUMMARY_MAX_LENGTH);
-    }
-  }
-
-  return "—";
-}
-
-function getActionVariant(action: string): BadgeVariant {
-  switch (action) {
-    case "inject":
-      return "badge-blue";
-    case "pause":
-      return "status-warning";
-    case "resume":
-      return "status-success";
-    case "kill":
-      return "status-error";
-    default:
-      return "status-neutral";
-  }
-}
-
-async function fetchAuditLog(
-  sessionId: string | undefined,
-  page: number
-): Promise<AuditLogResponse> {
-  const params = new URLSearchParams({
-    page: String(page),
-    limit: String(AUDIT_LOG_PAGE_SIZE),
-  });
-
-  const normalizedSessionId = sessionId?.trim();
-  if (normalizedSessionId && normalizedSessionId.length > 0) {
-    params.set("sessionId", normalizedSessionId);
-  }
-
-  return apiGet<AuditLogResponse>(`/api/mission-control/audit-log?${params.toString()}`);
-}
-
-export function AuditLogDrawer({ sessionId, trigger }: AuditLogDrawerProps): React.JSX.Element {
-  const [open, setOpen] = useState(false);
-  const [page, setPage] = useState(1);
-
-  const triggerElement = useMemo(
-    () =>
-      isValidElement(trigger) ? (
-        trigger
-      ) : (
-        <Button variant="outline" size="sm">
-          {trigger}
-        </Button>
-      ),
-    [trigger]
-  );
-
-  const auditLogQuery = useQuery<AuditLogResponse>({
-    queryKey: ["mission-control", "audit-log", sessionId ?? "all", page],
-    queryFn: async (): Promise<AuditLogResponse> => fetchAuditLog(sessionId, page),
-    enabled: open,
-    refetchInterval: open ? AUDIT_LOG_REFRESH_INTERVAL_MS : false,
-  });
-
-  useEffect(() => {
-    if (open) {
-      setPage(1);
-    }
-  }, [open, sessionId]);
-
-  useEffect(() => {
-    const pages = auditLogQuery.data?.pages;
-    if (pages !== undefined && pages > 0 && page > pages) {
-      setPage(pages);
-    }
-  }, [auditLogQuery.data?.pages, page]);
-
-  const totalItems = auditLogQuery.data?.total ?? 0;
-  const totalPages = auditLogQuery.data?.pages ?? 0;
-  const items = auditLogQuery.data?.items ?? [];
-
-  const canGoPrevious = page > 1;
-  const canGoNext = totalPages > 0 && page < totalPages;
-  const errorMessage =
-    auditLogQuery.error instanceof Error ? auditLogQuery.error.message : "Failed to load audit log";
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>{triggerElement}</SheetTrigger>
-      <SheetContent className="sm:max-w-[920px]">
-        <SheetHeader>
-          <div className="flex items-center justify-between gap-3">
-            <SheetTitle>Audit Log</SheetTitle>
-            {auditLogQuery.isFetching ? (
-              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" aria-hidden="true" />
-            ) : null}
-          </div>
-          <SheetDescription>
-            {sessionId
-              ? `Showing actions for session ${sessionId}.`
-              : "Showing operator actions across all mission control sessions."}
-          </SheetDescription>
-        </SheetHeader>
-
-        <div className="mt-4 flex min-h-0 flex-1 flex-col gap-3">
-          <div className="rounded-md border border-border/70">
-            <ScrollArea className="h-[64vh]">
-              <table className="w-full min-w-[760px] border-collapse text-sm">
-                <thead className="sticky top-0 z-10 bg-muted/90">
-                  <tr>
-                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
-                      Timestamp
-                    </th>
-                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
-                      Action
-                    </th>
-                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
-                      Session
-                    </th>
-                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
-                      Operator
-                    </th>
-                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
-                      Payload
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {auditLogQuery.isLoading ? (
-                    <tr>
-                      <td
-                        colSpan={5}
-                        className="px-3 py-6 text-center text-sm text-muted-foreground"
-                      >
-                        Loading audit log...
-                      </td>
-                    </tr>
-                  ) : auditLogQuery.error ? (
-                    <tr>
-                      <td colSpan={5} className="px-3 py-6 text-center text-sm text-red-500">
-                        {errorMessage}
-                      </td>
-                    </tr>
-                  ) : items.length === 0 ? (
-                    <tr>
-                      <td
-                        colSpan={5}
-                        className="px-3 py-6 text-center text-sm text-muted-foreground"
-                      >
-                        No audit entries found.
-                      </td>
-                    </tr>
-                  ) : (
-                    items.map((entry) => {
-                      const payloadSummary = getPayloadSummary(entry);
-
-                      return (
-                        <tr key={entry.id} className="border-t border-border/60 align-top">
-                          <td className="px-3 py-2 font-mono text-xs text-muted-foreground">
-                            {formatTimestamp(entry.createdAt)}
-                          </td>
-                          <td className="px-3 py-2">
-                            <Badge variant={getActionVariant(entry.action)} className="capitalize">
-                              {entry.action}
-                            </Badge>
-                          </td>
-                          <td className="px-3 py-2 font-mono text-xs" title={entry.sessionId}>
-                            {truncateSessionId(entry.sessionId)}
-                          </td>
-                          <td
-                            className="px-3 py-2 text-xs text-muted-foreground"
-                            title={entry.userId}
-                          >
-                            {entry.userId}
-                          </td>
-                          <td className="px-3 py-2 text-xs" title={payloadSummary}>
-                            {payloadSummary}
-                          </td>
-                        </tr>
-                      );
-                    })
-                  )}
-                </tbody>
-              </table>
-            </ScrollArea>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <p className="text-xs text-muted-foreground">{totalItems} total entries</p>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={!canGoPrevious || auditLogQuery.isFetching}
-                onClick={() => {
-                  setPage((currentPage) => Math.max(1, currentPage - 1));
-                }}
-              >
-                Previous
-              </Button>
-              <span className="text-xs text-muted-foreground">
-                Page {page} of {Math.max(totalPages, 1)}
-              </span>
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={!canGoNext || auditLogQuery.isFetching}
-                onClick={() => {
-                  setPage((currentPage) => currentPage + 1);
-                }}
-              >
-                Next
-              </Button>
-            </div>
-          </div>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-}

apps/web/src/components/mission-control/MissionControlLayout.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback, useState } from "react";
-import { AuditLogDrawer } from "@/components/mission-control/AuditLogDrawer";
 import { GlobalAgentRoster } from "@/components/mission-control/GlobalAgentRoster";
 import {
   MAX_PANEL_COUNT,
@@ -9,7 +8,6 @@ import {
   MissionControlPanel,
   type PanelConfig,
 } from "@/components/mission-control/MissionControlPanel";
-import { Button } from "@/components/ui/button";
 
 const INITIAL_PANELS: PanelConfig[] = [{}];
 
@@ -83,22 +81,12 @@ export function MissionControlLayout(): React.JSX.Element {
   }, []);
 
   return (
-    <section className="flex h-full min-h-0 flex-col overflow-hidden" aria-label="Mission Control">
+    <section className="h-full min-h-0 overflow-hidden" aria-label="Mission Control">
-      <header className="mb-3 flex items-center justify-end">
+      <div className="grid h-full min-h-0 gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
-        <AuditLogDrawer
-          trigger={
-            <Button variant="outline" size="sm">
-              Audit Log
-            </Button>
-          }
-        />
-      </header>
-
-      <div className="grid min-h-0 flex-1 gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
         <aside className="h-full min-h-0">
           <GlobalAgentRoster
             onSelectSession={handleSelectSession}
-            {...(selectedSessionId !== undefined ? { selectedSessionId } : {})}
+            {...(selectedSessionId ? { selectedSessionId } : {})}
           />
         </aside>
         <main className="h-full min-h-0 overflow-hidden">

apps/web/src/components/ui/sheet.tsx

@@ -1,137 +0,0 @@
-import * as React from "react";
-import { X } from "lucide-react";
-
-export interface SheetProps {
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  children?: React.ReactNode;
-}
-
-export interface SheetTriggerProps {
-  children?: React.ReactNode;
-  asChild?: boolean;
-}
-
-export interface SheetContentProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export interface SheetHeaderProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export interface SheetTitleProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export interface SheetDescriptionProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-const SheetContext = React.createContext<{
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}>({});
-
-export function Sheet({ open, onOpenChange, children }: SheetProps): React.JSX.Element {
-  const contextValue: { open?: boolean; onOpenChange?: (open: boolean) => void } = {};
-
-  if (open !== undefined) {
-    contextValue.open = open;
-  }
-
-  if (onOpenChange !== undefined) {
-    contextValue.onOpenChange = onOpenChange;
-  }
-
-  return <SheetContext.Provider value={contextValue}>{children}</SheetContext.Provider>;
-}
-
-export function SheetTrigger({ children, asChild }: SheetTriggerProps): React.JSX.Element {
-  const { onOpenChange } = React.useContext(SheetContext);
-
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children, {
-      onClick: () => onOpenChange?.(true),
-    } as React.HTMLAttributes<HTMLElement>);
-  }
-
-  return (
-    <button type="button" onClick={() => onOpenChange?.(true)}>
-      {children}
-    </button>
-  );
-}
-
-export function SheetContent({
-  children,
-  className = "",
-}: SheetContentProps): React.JSX.Element | null {
-  const { open, onOpenChange } = React.useContext(SheetContext);
-
-  React.useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    const onKeyDown = (event: KeyboardEvent): void => {
-      if (event.key === "Escape") {
-        onOpenChange?.(false);
-      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-    return (): void => {
-      window.removeEventListener("keydown", onKeyDown);
-    };
-  }, [onOpenChange, open]);
-
-  if (!open) {
-    return null;
-  }
-
-  return (
-    <div className="fixed inset-0 z-50">
-      <button
-        type="button"
-        aria-label="Close sheet"
-        className="absolute inset-0 h-full w-full bg-black/50"
-        onClick={() => onOpenChange?.(false)}
-      />
-
-      <div
-        className={`absolute inset-y-0 right-0 z-10 flex h-full w-full max-w-3xl flex-col border-l border-border bg-background p-6 shadow-xl ${className}`}
-      >
-        <button
-          type="button"
-          onClick={() => onOpenChange?.(false)}
-          className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100"
-        >
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </button>
-
-        {children}
-      </div>
-    </div>
-  );
-}
-
-export function SheetHeader({ children, className = "" }: SheetHeaderProps): React.JSX.Element {
-  return <div className={`space-y-1 pr-8 ${className}`}>{children}</div>;
-}
-
-export function SheetTitle({ children, className = "" }: SheetTitleProps): React.JSX.Element {
-  return <h2 className={`text-lg font-semibold ${className}`}>{children}</h2>;
-}
-
-export function SheetDescription({
-  children,
-  className = "",
-}: SheetDescriptionProps): React.JSX.Element {
-  return <p className={`text-sm text-muted-foreground ${className}`}>{children}</p>;
-}