@sentry/junior-dashboard 0.263.0 → 0.265.0

package/src/client/pages/system/WorkspaceList.tsx

@@ -1,21 +1,19 @@
-import { ChevronRight, FolderGit2, Trash2 } from "lucide-react";
-import { useNavigate } from "react-router";
+import { ChevronRight, FolderGit2 } from "lucide-react";
 import type { WorkspaceReport } from "@sentry/junior/api/schema";
 
-import { Button } from "../../components/Button";
 import { EmptyTelemetry } from "../../components/EmptyTelemetry";
 import { SelectableRow } from "../../components/SelectableRow";
 import { Card } from "../../components/layout/Card";
-import { formatSandboxSize } from "./SandboxSizeSummary";
+import { formatSandboxSize } from "./sandboxSize";
 
 type WorkspaceListProps = {
-  busy: boolean;
   defaultVcpus: number | null;
-  onDelete(workspace: WorkspaceReport): void;
+  onSelect(workspace: WorkspaceReport): void;
+  selectedId: string | undefined;
   workspaces: WorkspaceReport[];
 };
 
-/** List Workspace recipes and expose their edit and delete actions. */
+/** List Workspace recipes. Selecting a row opens its details. */
 export function WorkspaceList(props: WorkspaceListProps) {
   return (
     <Card padding="none">
@@ -30,10 +28,10 @@ export function WorkspaceList(props: WorkspaceListProps) {
         <ul className="m-0 list-none p-0">
           {props.workspaces.map((workspace) => (
             <WorkspaceListItem
-              busy={props.busy}
               defaultVcpus={props.defaultVcpus}
               key={workspace.id}
-              onDelete={props.onDelete}
+              onSelect={() => props.onSelect(workspace)}
+              selected={workspace.id === props.selectedId}
               workspace={workspace}
             />
           ))}
@@ -44,26 +42,27 @@ export function WorkspaceList(props: WorkspaceListProps) {
 }
 
 function WorkspaceListItem(props: {
-  busy: boolean;
   defaultVcpus: number | null;
-  onDelete(workspace: WorkspaceReport): void;
+  onSelect(): void;
+  selected: boolean;
   workspace: WorkspaceReport;
 }) {
   const { workspace } = props;
-  const navigate = useNavigate();
-  const openWorkspace = () =>
-    navigate(`/system/workspaces/${encodeURIComponent(workspace.id)}`);
   return (
-    <li className="border-b border-dashboard-border-subtle last:border-b-0">
+    <li
+      className="border-b border-dashboard-border-subtle last:border-b-0"
+      data-workspace-id={workspace.id}
+    >
       <SelectableRow
-        className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 px-4 py-3.5"
-        onSelect={openWorkspace}
-        selected={false}
+        className="px-4 py-3.5"
+        onSelect={props.onSelect}
+        selected={props.selected}
       >
         <button
-          aria-label={`Manage ${workspace.name}`}
-          className="flex min-w-0 cursor-pointer items-center gap-3 border-0 bg-transparent p-0 text-left"
-          onClick={openWorkspace}
+          aria-expanded={props.selected}
+          aria-label={`View Workspace details: ${workspace.name}`}
+          className="flex w-full min-w-0 cursor-pointer items-center gap-3 rounded-md border-0 bg-transparent p-0 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+          onClick={props.onSelect}
           type="button"
         >
           <span className="grid size-9 shrink-0 place-items-center rounded-md border border-dashboard-border-strong bg-dashboard-fill-soft text-dashboard-accent transition-colors group-hover:border-dashboard-accent/20 group-hover:bg-dashboard-accent/[0.06] group-hover:text-dashboard-accent-text">
@@ -94,15 +93,6 @@ function WorkspaceListItem(props: {
             size={16}
           />
         </button>
-        <Button
-          aria-label={`Delete ${workspace.name}`}
-          disabled={props.busy}
-          onClick={() => props.onDelete(workspace)}
-          size="icon"
-          title={`Delete ${workspace.name}`}
-        >
-          <Trash2 aria-hidden="true" size={15} />
-        </Button>
       </SelectableRow>
     </li>
   );

package/src/client/pages/system/WorkspacesPage.tsx

@@ -1,138 +1,136 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRef, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router";
 import { Plus } from "lucide-react";
-import {
-  workspaceListSchema,
-  type WorkspaceListReport,
-  type WorkspaceReport,
-} from "@sentry/junior/api/schema";
+import type { WorkspaceReport } from "@sentry/junior/api/schema";
 
 import { getDashboardAgentName } from "../../agentName";
-import { ButtonLink } from "../../components/Button";
+import { buttonVariants } from "../../components/ui/button";
 import { EmptyTelemetry } from "../../components/EmptyTelemetry";
-import { InlineError } from "../../components/InlineError";
+import { PageContentSkeleton } from "../../components/PageContentSkeleton";
 import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
-import {
-  DashboardApiError,
-  deleteDashboardResource,
-  fetchDashboardJson,
-} from "../../http";
+import { PageLayout } from "../../components/layout/PageLayout";
+import { useDocumentTitle } from "../../documentTitle";
+import { workspacePath } from "../../format";
+import { cn } from "../../styles";
 import { BaseSandboxCard } from "./BaseSandboxCard";
-import { SystemPageLayout, SystemRouteLoading } from "./SystemPageLayout";
+import { SystemNavigation } from "./SystemNavigation";
+import { WorkspaceDeleteDialog } from "./WorkspaceDeleteDialog";
+import { WorkspaceDetails } from "./WorkspaceDetails";
 import { WorkspaceList } from "./WorkspaceList";
+import { useWorkspacesData } from "./workspaceQueries";
 
-export const workspacesQueryKey = ["dashboard", "workspaces"] as const;
+const listPath = "/system/workspaces";
 
-/** Return a useful dashboard error message without exposing response details. */
-export function readWorkspaceApiError(
-  error: unknown,
-  fallback: string,
-): string {
-  if (error instanceof DashboardApiError) {
-    return error.apiError ?? fallback;
-  }
-  if (error instanceof Error && error.message.trim()) {
-    return error.message;
-  }
-  return fallback;
-}
-
-/** Manage install-wide repository Workspace recipes. */
+/** List install-wide Workspace recipes. The URL selects one for the details panel. */
 export function WorkspacesPage() {
-  const queryClient = useQueryClient();
-  const workspacesQuery = useQuery({
-    queryKey: workspacesQueryKey,
-    queryFn: ({ signal }) =>
-      fetchDashboardJson(workspaceListSchema, "/api/workspaces", signal),
-    retry: false,
-  });
-  const deleteMutation = useMutation({
-    mutationFn: async (workspace: WorkspaceReport) => {
-      await deleteDashboardResource(
-        `/api/workspaces/${encodeURIComponent(workspace.id)}`,
-      );
-      return workspace;
-    },
-    onSuccess: async (workspace) => {
-      await queryClient.cancelQueries({ queryKey: workspacesQueryKey });
-      queryClient.setQueryData<WorkspaceListReport>(
-        workspacesQueryKey,
-        (current) =>
-          current && {
-            ...current,
-            workspaces: current.workspaces.filter(
-              (item) => item.id !== workspace.id,
-            ),
-          },
-      );
-    },
-  });
-
-  if (!workspacesQuery.data && !workspacesQuery.error) {
-    return (
-      <SystemRouteLoading
-        description="Repository recipes Junior can switch into."
-        label="Loading Workspaces"
-        title="Workspaces"
-        variant="list"
-      />
-    );
-  }
-
+  const { workspaceId } = useParams();
+  const navigate = useNavigate();
+  const listRef = useRef<HTMLDivElement>(null);
+  const deleteSource = useRef<HTMLButtonElement | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<WorkspaceReport>();
+  const workspacesQuery = useWorkspacesData();
   const workspaces = workspacesQuery.data?.workspaces ?? [];
-  const baselineSnapshot = workspacesQuery.data?.baselineSnapshot ?? null;
   const defaultVcpus = workspacesQuery.data?.defaultVcpus ?? null;
-  return (
-    <SystemPageLayout>
-      <PageHeader
-        actions={
-          <ButtonLink to="/system/workspaces/new">
-            <Plus aria-hidden="true" size={14} />
-            New Workspace
-          </ButtonLink>
-        }
-        description={`Named repository recipes ${getDashboardAgentName()} can switch into without cloning each turn.`}
-        title="Workspaces"
-      />
-
-      {workspacesQuery.error ? (
-        <Card padding="sm">
-          <EmptyTelemetry>
-            Workspaces failed to load. Try refreshing the dashboard.
-          </EmptyTelemetry>
-        </Card>
-      ) : null}
+  const selected = workspaces.find((item) => item.id === workspaceId);
+  // PageHeader keeps its title after close, so this page owns the tab title.
+  useDocumentTitle(selected?.name ?? "Workspaces");
 
-      {deleteMutation.error ? (
-        <InlineError>
-          {readWorkspaceApiError(
-            deleteMutation.error,
-            "Could not delete the Workspace. Try again.",
-          )}
-        </InlineError>
-      ) : null}
+  const closeDetails = () => {
+    const trigger = workspaceId
+      ? listRef.current?.querySelector<HTMLButtonElement>(
+          `[data-workspace-id="${CSS.escape(workspaceId)}"] button`,
+        )
+      : undefined;
+    navigate(listPath);
+    (trigger ?? listRef.current)?.focus();
+  };
 
-      {!workspacesQuery.error ? (
-        <BaseSandboxCard
-          defaultVcpus={defaultVcpus}
-          snapshot={baselineSnapshot}
+  return (
+    <SystemNavigation className="grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] md:grid-rows-[minmax(0,1fr)]">
+      <div
+        className={cn(
+          "grid h-full min-h-0 min-w-0",
+          workspaceId && "xl:grid-cols-[minmax(0,1fr)_25rem]",
+        )}
+      >
+        <div
+          aria-label="Workspaces list"
+          className="min-h-0 overflow-y-auto overscroll-contain outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+          ref={listRef}
+          role="region"
+          tabIndex={0}
+        >
+          <PageLayout>
+            <PageHeader
+              actions={
+                <Link className={buttonVariants()} to={`${listPath}/new`}>
+                  <Plus aria-hidden="true" size={14} />
+                  New Workspace
+                </Link>
+              }
+              description={`Named repository recipes ${getDashboardAgentName()} can switch into without cloning each turn.`}
+              title="Workspaces"
+            />
+            {workspacesQuery.error ? (
+              <Card padding="sm">
+                <EmptyTelemetry>
+                  Workspaces failed to load. Try refreshing the dashboard.
+                </EmptyTelemetry>
+              </Card>
+            ) : workspacesQuery.data ? (
+              <>
+                <BaseSandboxCard
+                  defaultVcpus={defaultVcpus}
+                  snapshot={workspacesQuery.data.baselineSnapshot}
+                />
+                <WorkspaceList
+                  defaultVcpus={defaultVcpus}
+                  onSelect={(workspace) =>
+                    navigate(
+                      workspace.id === workspaceId
+                        ? listPath
+                        : workspacePath(workspace.id),
+                    )
+                  }
+                  selectedId={workspaceId}
+                  workspaces={workspaces}
+                />
+              </>
+            ) : (
+              <PageContentSkeleton label="Loading Workspaces" variant="list" />
+            )}
+          </PageLayout>
+        </div>
+        {workspaceId ? (
+          <WorkspaceDetails
+            defaultVcpus={defaultVcpus}
+            key={workspaceId}
+            listError={Boolean(workspacesQuery.error)}
+            onClose={closeDetails}
+            onDelete={(workspace, source) => {
+              deleteSource.current = source;
+              setDeleteTarget(workspace);
+            }}
+            workspace={selected}
+            workspaceId={workspaceId}
+          />
+        ) : null}
+      </div>
+      {deleteTarget ? (
+        <WorkspaceDeleteDialog
+          onClose={() => setDeleteTarget(undefined)}
+          onDeleted={() => {
+            if (workspaceId === deleteTarget.id) navigate(listPath);
+          }}
+          returnFocus={() =>
+            deleteSource.current?.isConnected
+              ? deleteSource.current
+              : (listRef.current ?? false)
+          }
+          workspace={deleteTarget}
         />
       ) : null}
-
-      <WorkspaceList
-        busy={deleteMutation.isPending}
-        defaultVcpus={defaultVcpus}
-        onDelete={(workspace) => {
-          if (
-            window.confirm(
-              `Delete Workspace “${workspace.name}”? Active conversations keep their current Sandbox until the next switch.`,
-            )
-          ) {
-            deleteMutation.mutate(workspace);
-          }
-        }}
-        workspaces={workspaces}
-      />
-    </SystemPageLayout>
+    </SystemNavigation>
   );
 }

package/src/client/pages/system/sandboxSize.ts

@@ -0,0 +1,8 @@
+/** Vercel Sandbox gives each vCPU 2 GB of memory. */
+const MEMORY_GB_PER_VCPU = 2;
+
+/** Format a Sandbox vCPU count with its memory. Null means the Vercel default. */
+export function formatSandboxSize(vcpus: number | null): string {
+  if (vcpus === null) return "Vercel default";
+  return `${vcpus} vCPU${vcpus === 1 ? "" : "s"} · ${vcpus * MEMORY_GB_PER_VCPU} GB`;
+}

package/src/client/pages/system/workspaceQueries.ts

@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  workspaceListSchema,
+  workspaceSchema,
+} from "@sentry/junior/api/schema";
+
+import { DashboardApiError, fetchDashboardJson } from "../../http";
+
+export const workspacesQueryKey = ["dashboard", "workspaces"] as const;
+
+/** Cache key for one Workspace detail read. */
+export function workspaceQueryKey(workspaceId: string | undefined) {
+  return ["dashboard", "workspace", workspaceId] as const;
+}
+
+/** Return a useful dashboard error message without exposing response details. */
+export function readWorkspaceApiError(
+  error: unknown,
+  fallback: string,
+): string {
+  if (error instanceof DashboardApiError) {
+    return error.apiError ?? fallback;
+  }
+  if (error instanceof Error && error.message.trim()) {
+    return error.message;
+  }
+  return fallback;
+}
+
+/** Load Workspace recipes, the default Sandbox size, and the baseline snapshot. */
+export function useWorkspacesData() {
+  return useQuery({
+    queryKey: workspacesQueryKey,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(workspaceListSchema, "/api/workspaces", signal),
+    retry: false,
+  });
+}
+
+/** Load one Workspace recipe with its current snapshot, which the list omits. */
+export function useWorkspaceData(workspaceId: string | undefined) {
+  return useQuery({
+    enabled: workspaceId !== undefined,
+    queryKey: workspaceQueryKey(workspaceId),
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        workspaceSchema,
+        `/api/workspaces/${encodeURIComponent(workspaceId!)}`,
+        signal,
+      ),
+    retry: false,
+  });
+}

package/src/client/pages/user/PluginUserPage.tsx

@@ -1,8 +1,18 @@
 import { Boxes, Trash2 } from "lucide-react";
+import { useState } from "react";
 import { Navigate, useLocation, useParams } from "react-router";
 import type { PluginUserPageLink } from "@sentry/junior-plugin-api";
 
 import { InlineError } from "../../components/InlineError";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogTitle,
+} from "../../components/ui/alert-dialog";
 import { LoadingView } from "../../components/LoadingView";
 import { LoadMorePagination } from "../../components/Pagination";
 import { SearchInput } from "../../components/SearchInput";
@@ -11,7 +21,11 @@ import { PageHeader } from "../../components/layout/PageHeader";
 import { MemoryPage } from "../memory/MemoryPage";
 import { pathWithSearch } from "../../searchParams";
 import { dashboardContainerClass } from "../../styles";
-import { usePluginUserPageData } from "./pluginUserPageData";
+import {
+  usePluginUserPageData,
+  type PluginUserPageRecord,
+  type PluginUserPageRecordAction,
+} from "./pluginUserPageData";
 
 /** Build the canonical dashboard path for a plugin-owned page. */
 export function pluginUserPagePath(pluginName: string, pageId: string): string {
@@ -68,6 +82,12 @@ export function PluginUserPage(props: { page: PluginUserPageLink }) {
     searchText,
     setSearchText,
   } = usePluginUserPageData(props.page);
+  // Keep the action after close so the closing dialog keeps its text.
+  const [confirming, setConfirming] = useState<{
+    action: PluginUserPageRecordAction;
+    record: PluginUserPageRecord;
+  }>();
+  const [confirmOpen, setConfirmOpen] = useState(false);
 
   if (!query.data && !query.error) {
     return <LoadingView label={`Loading ${props.page.label}`} />;
@@ -158,7 +178,14 @@ export function PluginUserPage(props: { page: PluginUserPageLink }) {
                         }`}
                         disabled={action.isPending}
                         key={`${recordAction.method}:${recordAction.href}`}
-                        onClick={() => runAction(recordAction)}
+                        onClick={() => {
+                          if (!recordAction.confirmation) {
+                            runAction(recordAction);
+                            return;
+                          }
+                          setConfirming({ action: recordAction, record });
+                          setConfirmOpen(true);
+                        }}
                         title={recordAction.label}
                         type="button"
                       >
@@ -205,6 +232,28 @@ export function PluginUserPage(props: { page: PluginUserPageLink }) {
           </div>
         )}
       </section>
+      <AlertDialog onOpenChange={setConfirmOpen} open={confirmOpen}>
+        <AlertDialogContent>
+          <AlertDialogTitle>{confirming?.action.confirmation}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {confirming?.record.title}
+          </AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (confirming) runAction(confirming.action);
+                setConfirmOpen(false);
+              }}
+              variant={
+                confirming?.action.tone === "danger" ? "danger" : "primary"
+              }
+            >
+              {confirming?.action.label}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

package/src/client/pages/user/pluginUserPageData.ts

@@ -87,14 +87,9 @@ export function usePluginUserPageData(page: PluginUserPageLink) {
     },
   });
 
+  // Callers ask for the action's confirmation before they run it.
   function runAction(recordAction: PluginUserPageRecordAction) {
     if (actionStarted.current) return;
-    if (
-      recordAction.confirmation &&
-      !window.confirm(recordAction.confirmation)
-    ) {
-      return;
-    }
     actionStarted.current = true;
     action.mutate(recordAction);
   }

package/src/client/styles.ts

@@ -17,3 +17,7 @@ export const dashboardInteractiveTextClass =
 /** Raised input surface so the chat box reads against the near-black shell. */
 export const dashboardComposerSurfaceClass =
   "rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-raised shadow-[0_8px_32px_rgba(0,0,0,0.35)] transition-colors";
+
+/** Turn a disclosure chevron when its `group` trigger sets `aria-expanded`. */
+export const dashboardDisclosureChevronClass =
+  "size-3.5 shrink-0 transition-transform group-aria-expanded:rotate-90 motion-reduce:transition-none";

package/src/client.tsx

@@ -3,6 +3,8 @@ import { Component, type ErrorInfo, type ReactNode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router";
 
+import { Toaster } from "./client/components/ui/toast";
+import { TooltipProvider } from "./client/components/ui/tooltip";
 import { DashboardShell } from "./client/App";
 import { getDashboardAgentName } from "./client/agentName";
 
@@ -87,7 +89,11 @@ const router = createBrowserRouter(
 createRoot(root).render(
   <DashboardErrorBoundary>
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <Toaster>
+        <TooltipProvider>
+          <RouterProvider router={router} />
+        </TooltipProvider>
+      </Toaster>
     </QueryClientProvider>
   </DashboardErrorBoundary>,
 );

package/src/mock-reporting/automation-collection.ts

@@ -33,13 +33,15 @@ export function mockAutomationCollection(
           (automation.status !== "paused" &&
             automation.status !== "completed" &&
             (automation.status === "blocked" ||
-              (automation.kind === "event" && !automation.triggerAvailable) ||
+              (automation.kind === "event" &&
+                automation.trigger.problems.length > 0) ||
               automation.lastRunStatus === "failed" ||
               automation.lastRunStatus === "blocked"))) &&
         (input.type === "all" || automation.kind === input.type) &&
         (input.state === "all" ||
           (input.state === "unavailable"
-            ? automation.kind === "event" && !automation.triggerAvailable
+            ? automation.kind === "event" &&
+              automation.trigger.problems.length > 0
             : automation.status === input.state)) &&
         (!input.creator || creator(automation) === input.creator) &&
         (!input.destination || destination(automation) === input.destination) &&

package/src/mock-reporting/fixtures.ts

@@ -2972,7 +2972,6 @@ function mockTasks(): AutomationSummary[] {
         teamId: "T123",
         visibility: "public",
       },
-      events: ["issue.closed"],
       id: "event-1",
       instruction: "Summarize the closed issue",
       kind: "event",
@@ -2986,7 +2985,11 @@ function mockTasks(): AutomationSummary[] {
       outcomes: [],
       title: "Closed issue summary",
       totalRuns: 7,
-      triggerAvailable: true,
+      trigger: {
+        events: ["issue closed"],
+        filters: ["labels includes bug", "repository is api or web"],
+        problems: [],
+      },
       status: "active",
     },
     {
@@ -2999,7 +3002,6 @@ function mockTasks(): AutomationSummary[] {
         teamId: "T123",
         visibility: "public",
       },
-      events: ["incident.updated"],
       id: "event-2",
       instruction: "Notify responders when the incident changes",
       kind: "event",
@@ -3016,7 +3018,11 @@ function mockTasks(): AutomationSummary[] {
       ],
       title: "Incident change alerts",
       totalRuns: 0,
-      triggerAvailable: false,
+      trigger: {
+        events: ["incident updated"],
+        filters: [],
+        problems: ["The plugin for this source is not enabled."],
+      },
       status: "active",
     },
   ];
@@ -3115,7 +3121,19 @@ export function readMockAutomationExecutions(
     const costUsd = costs[index % costs.length];
     const durationMs = durations[index % durations.length];
     const totalTokens = tokens[index % tokens.length];
+    const executedAtMs = nowMs - index * 86_400_000 - 3_600_000;
     return {
+      automationVersion: index < 3 ? 2 : 1,
+      credentialMode: task.credentialMode,
+      ...(status === "failed"
+        ? { error: "Slack rejected the result message: channel_not_found." }
+        : status === "blocked"
+          ? { error: "GitHub needs the creator to reconnect their account." }
+          : undefined),
+      ...(task.kind === "scheduled"
+        ? { scheduledFor: new Date(executedAtMs - 60_000).toISOString() }
+        : undefined),
+      startedAt: new Date(executedAtMs - (durationMs ?? 5_000)).toISOString(),
       ...(hasConversation
         ? {
             conversationId:
@@ -3128,9 +3146,7 @@ export function readMockAutomationExecutions(
             ...(totalTokens !== undefined ? { totalTokens } : undefined),
           }
         : undefined),
-      executedAt: new Date(
-        nowMs - index * 86_400_000 - 3_600_000,
-      ).toISOString(),
+      executedAt: new Date(executedAtMs).toISOString(),
       executionId: `${id}-run-${index + 1}`,
       status,
     };

package/src/mock-reporting/routes.ts

@@ -17,6 +17,7 @@ import {
   conversationParamsSchema,
   conversationPendingMessagesReportSchema,
   conversationStatsReportSchema,
+  conversationWatchesReportSchema,
   codeOverviewReportSchema,
   codePersonReportSchema,
   codeRepositoryParamsSchema,
@@ -58,6 +59,7 @@ import {
   readMockAutomationList,
   setMockConversationArchived,
 } from "./fixtures";
+import { readMockConversationWatches } from "./watches";
 
 function errorResponse(error: string, status: 400 | 404): Response {
   return jsonResponse(apiErrorSchema, { error }, { status });
@@ -205,6 +207,16 @@ export function createMockReportingApi(): Hono<{
       ? jsonResponse(conversationChildAgentsReportSchema, report)
       : errorResponse("Conversation not found.", 404);
   });
+  app.get("/conversations/:conversationId/watches", (c) => {
+    const params = conversationParamsSchema.safeParse(c.req.param());
+    if (!params.success) {
+      return errorResponse("Invalid route parameters.", 400);
+    }
+    const report = readMockConversationWatches(params.data.conversationId);
+    return report
+      ? jsonResponse(conversationWatchesReportSchema, report)
+      : errorResponse("Conversation not found.", 404);
+  });
   app.get("/conversations/:conversationId/pending-messages", (c) => {
     const params = conversationParamsSchema.safeParse(c.req.param());
     if (!params.success) {