@sentry/junior-dashboard 0.233.0 → 0.235.0

package/src/client/pages/memory/MemoryPageLayout.tsx

@@ -24,20 +24,19 @@ function isMemoriesLibraryPath(pathname: string): boolean {
 /** Place the shared secondary navigation above one Memories page. */
 export function MemoryPageLayout(props: { children: ReactNode }) {
   return (
-    <>
-      <SecondaryNavigation
-        ariaLabel="Memory navigation"
-        items={[
-          { end: true, label: "Overview", to: MEMORY_BASE_PATH },
-          {
-            isActive: isMemoriesLibraryPath,
-            label: "Memories",
-            to: MEMORY_LIBRARY_PATH,
-          },
-        ]}
-      />
+    <SecondaryNavigation
+      ariaLabel="Memory navigation"
+      items={[
+        { end: true, label: "Overview", to: MEMORY_BASE_PATH },
+        {
+          isActive: isMemoriesLibraryPath,
+          label: "Memories",
+          to: MEMORY_LIBRARY_PATH,
+        },
+      ]}
+    >
       <PageLayout className="gap-6 sm:gap-8">{props.children}</PageLayout>
-    </>
+    </SecondaryNavigation>
   );
 }
 

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

@@ -1,3 +1,5 @@
+import type { ReactNode } from "react";
+
 import { SecondaryNavigation } from "../../components/layout/SecondaryNavigation";
 import { systemPluginsPath } from "./SystemPlugins";
 
@@ -10,11 +12,13 @@ const systemNavigationItems = [
 ];
 
 /** Render the stable secondary navigation shared by System pages. */
-export function SystemNavigation() {
+export function SystemNavigation(props: { children: ReactNode }) {
   return (
     <SecondaryNavigation
       ariaLabel="System navigation"
       items={systemNavigationItems}
-    />
+    >
+      {props.children}
+    </SecondaryNavigation>
   );
 }

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

@@ -8,10 +8,9 @@ import { SystemNavigation } from "./SystemNavigation";
 /** Place the shared secondary navigation above one System page. */
 export function SystemPageLayout(props: { children: ReactNode }) {
   return (
-    <>
-      <SystemNavigation />
+    <SystemNavigation>
       <PageLayout>{props.children}</PageLayout>
-    </>
+    </SystemNavigation>
   );
 }
 
@@ -23,9 +22,8 @@ export function SystemRouteLoading(props: {
   variant?: PageContentSkeletonVariant;
 }) {
   return (
-    <>
-      <SystemNavigation />
+    <SystemNavigation>
       <PageRouteLoading {...props} />
-    </>
+    </SystemNavigation>
   );
 }

package/src/client/searchParams.ts

@@ -39,9 +39,10 @@ export function parseSearchParamEnum<T extends string>(
 /** Read and write one debounced free-text query param (default `q`). */
 export function useDebouncedSearchParam(
   key = "q",
-  options: { delayMs?: number } = {},
+  options: { delayMs?: number; resetPage?: boolean } = {},
 ) {
   const delayMs = options.delayMs ?? 250;
+  const resetPage = options.resetPage ?? false;
   const [searchParams, setSearchParams] = useSearchParams();
   const committed = searchParams.get(key)?.trim() ?? "";
   const [value, setValue] = useState(committed);
@@ -58,6 +59,7 @@ export function useDebouncedSearchParam(
       setSearchParams(
         (current) => {
           const next = new URLSearchParams(current);
+          if (resetPage) next.delete("page");
           if (normalized) next.set(key, normalized);
           else next.delete(key);
           return next;
@@ -66,7 +68,7 @@ export function useDebouncedSearchParam(
       );
     }, delayMs);
     return () => window.clearTimeout(timeout);
-  }, [committed, delayMs, key, setSearchParams, value]);
+  }, [committed, delayMs, key, resetPage, setSearchParams, value]);
 
   return [value, setValue, committed] as const;
 }

package/src/client.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Component, type ErrorInfo, type ReactNode } from "react";
 import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router";
+import { createBrowserRouter, RouterProvider } from "react-router";
 
 import { DashboardShell } from "./client/App";
 import { getDashboardAgentName } from "./client/agentName";
@@ -79,12 +79,15 @@ const queryClient = new QueryClient({
   },
 });
 
+const router = createBrowserRouter(
+  [{ path: "*", element: <DashboardShell /> }],
+  { basename: window.__JUNIOR_DASHBOARD_BASE_PATH__ ?? "/" },
+);
+
 createRoot(root).render(
   <DashboardErrorBoundary>
     <QueryClientProvider client={queryClient}>
-      <BrowserRouter basename={window.__JUNIOR_DASHBOARD_BASE_PATH__ ?? "/"}>
-        <DashboardShell />
-      </BrowserRouter>
+      <RouterProvider router={router} />
     </QueryClientProvider>
   </DashboardErrorBoundary>,
 );

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

@@ -0,0 +1,101 @@
+import {
+  automationListQuerySchema,
+  type AutomationList,
+  type AutomationSummary,
+} from "@sentry/junior/api/schema";
+
+function creator(automation: AutomationSummary) {
+  return automation.createdByEmail ?? automation.createdBy;
+}
+function destination(automation: AutomationSummary) {
+  return `${automation.destination.teamId}:${automation.destination.channelId}`;
+}
+
+/** Apply web collection controls to local preview and browser fixtures. */
+export function mockAutomationCollection(
+  report: Pick<
+    AutomationList,
+    "automations" | "executionDays" | "executionHours" | "executionSixHours"
+  >,
+  params: URLSearchParams = new URLSearchParams(),
+): AutomationList {
+  const input = automationListQuerySchema.parse(Object.fromEntries(params));
+  const all = report.automations;
+  const filtered = all
+    .filter((automation) => {
+      const search =
+        `${automation.title} ${automation.instruction} ${automation.kind === "event" ? automation.resource : ""}`.toLowerCase();
+      return (
+        (input.scope !== "mine" || automation.ownedByViewer) &&
+        (input.scope !== "public" ||
+          automation.destination.visibility === "public") &&
+        (input.scope !== "attention" ||
+          (automation.status !== "paused" &&
+            automation.status !== "completed" &&
+            (automation.status === "blocked" ||
+              (automation.kind === "event" && !automation.triggerAvailable) ||
+              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.status === input.state)) &&
+        (!input.creator || creator(automation) === input.creator) &&
+        (!input.destination || destination(automation) === input.destination) &&
+        (!input.q || search.includes(input.q.toLowerCase()))
+      );
+    })
+    .sort((a, b) => {
+      const order =
+        input.sort === "title"
+          ? a.title.localeCompare(b.title)
+          : input.sort === "oldest"
+            ? a.createdAt.localeCompare(b.createdAt)
+            : b.createdAt.localeCompare(a.createdAt);
+      return order || b.id.localeCompare(a.id);
+    });
+  const page = Math.min(
+    input.page,
+    Math.max(1, Math.ceil(filtered.length / input.pageSize)),
+  );
+  return {
+    ...report,
+    automations: filtered.slice(
+      (page - 1) * input.pageSize,
+      page * input.pageSize,
+    ),
+    total: filtered.length,
+    page,
+    pageSize: input.pageSize,
+    counts: {
+      all: all.length,
+      mine: all.filter((automation) => automation.ownedByViewer).length,
+      public: all.filter(
+        (automation) => automation.destination.visibility === "public",
+      ).length,
+      private: all.filter(
+        (automation) => automation.destination.visibility === "private",
+      ).length,
+    },
+    creators: [
+      ...new Map(
+        all.map((automation) => [
+          creator(automation),
+          { value: creator(automation), label: automation.createdBy },
+        ]),
+      ).values(),
+    ],
+    destinations: [
+      ...new Map(
+        all.map((automation) => [
+          destination(automation),
+          {
+            value: destination(automation),
+            label: automation.destination.label,
+          },
+        ]),
+      ).values(),
+    ],
+  };
+}

package/src/mock-reporting/code-repository.ts

@@ -0,0 +1,77 @@
+import type {
+  CodeRepositoryReport,
+  ConversationFeed,
+} from "@sentry/junior/api/schema";
+
+import { readMockCodeOverview } from "./fixtures";
+
+const MOCK_WORKSPACES: Record<string, CodeRepositoryReport["workspaces"]> = {
+  "getsentry/junior": [{ id: "workspace-junior", name: "junior" }],
+};
+
+/** Build one mock repository report from the mock Code overview. */
+export function readMockCodeRepository(
+  repositoryId: string,
+): CodeRepositoryReport | undefined {
+  const overview = readMockCodeOverview();
+  const repository = overview.repositories.find(
+    (entry) => entry.id === repositoryId,
+  );
+  if (!repository) return undefined;
+  return {
+    activityDays: overview.activityDays,
+    changes: overview.changes.filter(
+      (change) => change.repository === repository.name,
+    ),
+    generatedAt: overview.generatedAt,
+    repository: {
+      id: repository.id,
+      name: repository.name,
+      provider: repository.provider,
+      ...(repository.url ? { url: repository.url } : undefined),
+    },
+    summary: {
+      closed: repository.closed,
+      created: repository.created,
+      merged: repository.merged,
+      open: repository.open,
+      ...(repository.mergeRate === undefined
+        ? undefined
+        : { mergeRate: repository.mergeRate }),
+      ...(repository.medianCostUsd === undefined
+        ? undefined
+        : {
+            // Mock rows have no total cost; estimate it from the median.
+            costUsd: repository.medianCostUsd * repository.created,
+            medianCostUsd: repository.medianCostUsd,
+          }),
+      ...(overview.summary.medianMergeTimeMs === undefined
+        ? undefined
+        : { medianMergeTimeMs: overview.summary.medianMergeTimeMs }),
+    },
+    windowEnd: overview.windowEnd,
+    windowStart: overview.windowStart,
+    workspaces: MOCK_WORKSPACES[repository.name] ?? [],
+  };
+}
+
+/**
+ * Keep mock conversations whose code change annotations name the repository.
+ * The real API links conversations through recorded code changes.
+ */
+export function filterMockConversationsByRepository(
+  feed: ConversationFeed,
+  repositoryId: string,
+): ConversationFeed {
+  const name = readMockCodeRepository(repositoryId)?.repository.name;
+  return {
+    ...feed,
+    conversations: name
+      ? feed.conversations.filter((conversation) =>
+          conversation.sidebarAnnotations?.some((annotation) =>
+            annotation.key.startsWith(`${name}#`),
+          ),
+        )
+      : [],
+  };
+}

package/src/mock-reporting/fixtures.ts

@@ -1,3 +1,4 @@
+import { mockAutomationCollection } from "./automation-collection";
 /** Deterministic reporting fixtures for local dashboard development and QA. */
 import type {
   ActorDirectoryReport,
@@ -2669,8 +2670,10 @@ function mockTasks(): AutomationSummary[] {
       lastConversationId: "scheduler:daily-ops-digest",
       lastRunAt: "2026-08-06T16:00:00.000Z",
       nextRunAt: "2026-08-10T16:00:00.000Z",
+      credentialMode: "creator",
       ownedByViewer: true,
       runs: { 1: 1, 7: 3, 30: 12, 90: 48 },
+      timezone: "America/Los_Angeles",
       schedule: "Every Monday at 9:00 AM",
       status: "active",
       outcomes: [
@@ -2698,6 +2701,7 @@ function mockTasks(): AutomationSummary[] {
       kind: "event",
       lastConversationId: "agent-dispatch:event-1",
       lastRunAt: "2026-08-05T18:30:00.000Z",
+      credentialMode: "creator",
       ownedByViewer: true,
       resource: "Issue · ACME-42",
       runs: { 1: 0, 7: 1, 30: 4, 90: 7 },
@@ -2706,6 +2710,7 @@ function mockTasks(): AutomationSummary[] {
       title: "Closed issue summary",
       totalRuns: 7,
       triggerAvailable: true,
+      status: "active",
     },
     {
       createdAt: "2026-07-30T16:00:00.000Z",
@@ -2721,6 +2726,7 @@ function mockTasks(): AutomationSummary[] {
       id: "event-2",
       instruction: "Notify responders when the incident changes",
       kind: "event",
+      credentialMode: "creator",
       ownedByViewer: false,
       resource: "Incident · INC-17",
       runs: { 1: 0, 7: 0, 30: 0, 90: 0 },
@@ -2734,13 +2740,14 @@ function mockTasks(): AutomationSummary[] {
       title: "Incident change alerts",
       totalRuns: 0,
       triggerAvailable: false,
+      status: "active",
     },
   ];
 }
 
 /** Build mock Tasks list for local dashboard development. */
 export function readMockAutomationList(nowMs = NOW_MS): AutomationList {
-  return {
+  return mockAutomationCollection({
     executionDays: mockAutomationExecutionDays(nowMs),
     executionHours: trailingMetricHours(nowMs, (date) => ({
       costUsd: 0,
@@ -2759,8 +2766,7 @@ export function readMockAutomationList(nowMs = NOW_MS): AutomationList {
       (date) => ({ costUsd: 0, date, event: 0, scheduled: 0 }),
     ),
     automations: mockTasks(),
-    truncated: false,
-  };
+  });
 }
 
 function mockStatusDays(

package/src/mock-reporting/routes.ts

@@ -1,3 +1,4 @@
+import { mockAutomationCollection } from "./automation-collection";
 import { Hono } from "hono";
 import { jsonResponse, type JuniorApiVariables } from "@sentry/junior/api";
 import {
@@ -17,6 +18,8 @@ import {
   conversationStatsReportSchema,
   codeOverviewReportSchema,
   codePersonReportSchema,
+  codeRepositoryParamsSchema,
+  codeRepositoryReportSchema,
   locationDetailReportSchema,
   locationDirectoryReportSchema,
   locationParamsSchema,
@@ -26,9 +29,14 @@ import {
   automationExecutionListSchema,
   automationListSchema,
   automationParamsSchema,
+  automationSummarySchema,
   automationRunListSchema,
 } from "@sentry/junior/api/schema";
 import { mockChartPng } from "./chart-png";
+import {
+  filterMockConversationsByRepository,
+  readMockCodeRepository,
+} from "./code-repository";
 import {
   readMockConversationDetail,
   readMockConversationEvents,
@@ -62,6 +70,16 @@ export function createMockReportingApi(): Hono<{
   app.get("/code", () =>
     jsonResponse(codeOverviewReportSchema, readMockCodeOverview()),
   );
+  app.get("/code/repositories/:repositoryId", (c) => {
+    const params = codeRepositoryParamsSchema.safeParse(c.req.param());
+    if (!params.success) {
+      return errorResponse("Invalid route parameters.", 400);
+    }
+    const report = readMockCodeRepository(params.data.repositoryId);
+    return report
+      ? jsonResponse(codeRepositoryReportSchema, report)
+      : errorResponse("Repository not found.", 404);
+  });
   app.get("/plugin-reports", () =>
     jsonResponse(pluginOperationalReportFeedSchema, readMockPluginReports()),
   );
@@ -126,17 +144,18 @@ export function createMockReportingApi(): Hono<{
     if (!query.success) {
       return errorResponse("Invalid query parameters.", 400);
     }
-    const report = readMockConversationFeed(
-      query.data.actorEmail,
-      query.data.status,
-    );
+    const repositoryId = query.data.codeRepositoryId;
+    const readFeed = (status: "active" | "archived") => {
+      const feed = readMockConversationFeed(query.data.actorEmail, status);
+      return repositoryId
+        ? filterMockConversationsByRepository(feed, repositoryId)
+        : feed;
+    };
+    const report = readFeed(query.data.status);
     if (!query.data.q) {
       return jsonResponse(conversationFeedSchema, report);
     }
-    const archived = readMockConversationFeed(
-      query.data.actorEmail,
-      "archived",
-    );
+    const archived = readFeed("archived");
     const search = query.data.q.toLowerCase();
     const conversations = new Map(
       [...report.conversations, ...archived.conversations].map(
@@ -253,15 +272,10 @@ export function createMockReportingApi(): Hono<{
   });
   app.get("/automations", (c) => {
     const report = readMockAutomationList();
-    const query = c.req.query("q")?.trim().toLowerCase();
-    return jsonResponse(automationListSchema, {
-      ...report,
-      automations: query
-        ? report.automations.filter((automation) =>
-            automation.title.toLowerCase().includes(query),
-          )
-        : report.automations,
-    });
+    return jsonResponse(
+      automationListSchema,
+      mockAutomationCollection(report, new URL(c.req.url).searchParams),
+    );
   });
   app.get("/automations/runs", () => {
     const automations = readMockAutomationList().automations;
@@ -284,6 +298,14 @@ export function createMockReportingApi(): Hono<{
       truncated: false,
     });
   });
+  app.get("/automations/:id", (c) => {
+    const automation = readMockAutomationList().automations.find(
+      (automation) => automation.id === c.req.param("id"),
+    );
+    return automation
+      ? jsonResponse(automationSummarySchema, automation)
+      : errorResponse("Automation not found.", 404);
+  });
   app.get("/automations/:kind/:id/executions", (c) => {
     const params = automationParamsSchema.safeParse(c.req.param());
     if (!params.success) {

package/src/shell.ts

@@ -2,6 +2,7 @@ import { existsSync, readFileSync } from "node:fs";
 import path from "node:path";
 import {
   dashboardAvatarHeaderAsset,
+  dashboardFaviconAsset,
   dashboardClientAsset,
   dashboardClientChunks,
   dashboardInstallIconAsset,
@@ -120,6 +121,7 @@ export function dashboardPagePaths(
   const paths: Array<{ nested?: boolean; path: string }> = [
     { path: basePath },
     {
+      nested: true,
       path: basePath === "/" ? "/code" : `${basePath}/code`,
     },
     {
@@ -298,12 +300,26 @@ export function renderDashboard(basePath: string, agentName: string): Response {
   );
 }
 
-/** Serve the dashboard favicon. */
+function readDashboardFavicon(): ArrayBuffer {
+  if (dashboardFaviconAsset) {
+    return Uint8Array.from(Buffer.from(dashboardFaviconAsset, "base64")).buffer;
+  }
+
+  const assetUrl = new URL("./assets/junior-favicon.png", import.meta.url);
+  if (!existsSync(assetUrl)) {
+    throw new Error("Junior dashboard favicon was not found");
+  }
+  return Uint8Array.from(readFileSync(assetUrl)).buffer;
+}
+
+/** Serve the head-only dashboard favicon, which stays readable at 16px. */
 export function renderFavicon(): Response {
-  return new Response(
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="#000000"/><text x="16" y="20.5" fill="#ffffff" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="11" font-weight="900" text-anchor="middle">Jr</text></svg>`,
-    { headers: { "content-type": "image/svg+xml" } },
-  );
+  return new Response(readDashboardFavicon(), {
+    headers: {
+      "cache-control": "public, max-age=0, must-revalidate",
+      "content-type": "image/png",
+    },
+  });
 }
 
 /** Render a browser-readable access denied page for blocked dashboard users. */