@sentry/junior-dashboard 0.234.0 → 0.236.0

package/src/client/pages/code/codeRepositoryRoutes.ts

@@ -0,0 +1,18 @@
+/** Repository page tabs. Overview is the bare repository path. */
+export type CodeRepositoryTab = "overview" | "conversations" | "changes";
+
+/** Tab order in the repository page navigation. */
+export const codeRepositoryTabs: readonly CodeRepositoryTab[] = [
+  "overview",
+  "conversations",
+  "changes",
+];
+
+/** Build the dashboard path for one repository page tab. */
+export function codeRepositoryPath(
+  repositoryId: string,
+  tab: CodeRepositoryTab = "overview",
+): string {
+  const base = `/code/${encodeURIComponent(repositoryId)}`;
+  return tab === "overview" ? base : `${base}/${tab}`;
+}

package/src/client/pages/dev/ComponentsPage.tsx

@@ -2,6 +2,7 @@ import { FormNotice } from "../../components/FormNotice";
 import { Select } from "../../components/Select";
 import { ObjectFixtures } from "./ObjectFixtures";
 import { ChartFixtures } from "./ChartFixtures";
+import { SegmentedNavFixture, SegmentedTabsFixture } from "./SegmentedFixtures";
 import {
   ConversationFixture,
   MessageAttachmentsFixture,
@@ -40,7 +41,6 @@ import { ParticipantAvatarStack } from "../../components/ParticipantAvatarStack"
 import { StatCard } from "../../components/metrics/StatCard";
 import { StatusChip } from "../../components/StatusChip";
 import { StatusDot } from "../../components/StatusDot";
-import { SegmentedTabs } from "../../components/SegmentedTabs";
 import { TextArea, TextInput } from "../../components/TextInput";
 import { TranscriptMarkdown } from "../../conversations/TranscriptMarkdown";
 import { TranscriptText } from "../../conversations/TranscriptText";
@@ -303,7 +303,6 @@ function FoundationsGalleryPage() {
   const [navigationOpen, setNavigationOpen] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [nestedDrawerOpen, setNestedDrawerOpen] = useState(false);
-  const [tab, setTab] = useState<"details" | "memories" | "usage">("details");
 
   return (
     <GalleryShell
@@ -354,26 +353,10 @@ function FoundationsGalleryPage() {
         </DashboardChromeProvider>
       </Fixture>
       <Fixture title="Segmented tabs">
-        <div className="max-w-md">
-          <SegmentedTabs
-            items={[
-              { label: "Details", value: "details" },
-              { label: "Memories", value: "memories" },
-              { label: "Usage", value: "usage" },
-            ]}
-            label="Conversation panels"
-            onChange={setTab}
-            value={tab}
-          >
-            <p className="m-0 text-sm leading-relaxed text-dashboard-text-muted">
-              {tab === "details"
-                ? "Conversation summary and linked work."
-                : tab === "memories"
-                  ? "What Junior learned from this conversation."
-                  : "Time, tokens, and cost for this conversation."}
-            </p>
-          </SegmentedTabs>
-        </div>
+        <SegmentedTabsFixture />
+      </Fixture>
+      <Fixture title="Segmented page links">
+        <SegmentedNavFixture />
       </Fixture>
       <Fixture title="Narrow details drawer">
         <Button onClick={() => setDrawerOpen(true)}>Open details</Button>

package/src/client/pages/dev/SegmentedFixtures.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+
+import { SegmentedNav } from "../../components/SegmentedNav";
+import { SegmentedTabs } from "../../components/SegmentedTabs";
+
+/** Show panel tabs switching the panel below them. */
+export function SegmentedTabsFixture() {
+  const [tab, setTab] = useState<"details" | "memories" | "usage">("details");
+  return (
+    <div className="max-w-md">
+      <SegmentedTabs
+        items={[
+          { label: "Details", value: "details" },
+          { label: "Memories", value: "memories" },
+          { label: "Usage", value: "usage" },
+        ]}
+        label="Conversation panels"
+        onChange={setTab}
+        value={tab}
+      >
+        <p className="m-0 text-sm leading-relaxed text-dashboard-text-muted">
+          {tab === "details"
+            ? "Conversation summary and linked work."
+            : tab === "memories"
+              ? "What Junior learned from this conversation."
+              : "Time, tokens, and cost for this conversation."}
+        </p>
+      </SegmentedTabs>
+    </div>
+  );
+}
+
+const PAGE_LINKS = [
+  "Overview",
+  "People",
+  "Locations",
+  "Workspaces",
+  "Plugins",
+].map((label) => ({
+  isActive: () => label === "Overview",
+  label,
+  to: `#${label.toLowerCase()}`,
+}));
+
+/** Show page links at label width, filling a row, and overflowing a row. */
+export function SegmentedNavFixture() {
+  return (
+    <div className="grid gap-4">
+      <SegmentedNav ariaLabel="Label width" items={PAGE_LINKS} />
+      <div className="max-w-md">
+        <SegmentedNav ariaLabel="Fill" fill items={PAGE_LINKS.slice(0, 2)} />
+      </div>
+      <div className="max-w-xs">
+        <SegmentedNav ariaLabel="Overflow" fill items={PAGE_LINKS} />
+      </div>
+    </div>
+  );
+}

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/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

@@ -1825,8 +1825,14 @@ export function readMockConversationDetail(
     (candidate) => candidate.conversationId === conversationId,
   );
   if (!conversation) return undefined;
-  const { parentConversationId: _parentConversationId, ...detail } =
-    conversation;
+  const { parentConversationId, ...conversationDetail } = conversation;
+  // Match the API: only readable root Conversations can be forked.
+  const detail = {
+    ...conversationDetail,
+    canFork:
+      !parentConversationId &&
+      conversationDetail.eventHistory.status !== "redacted",
+  };
   const withArchiveState = mockArchivedConversationIds.has(conversationId)
     ? {
         ...detail,

package/src/mock-reporting/routes.ts

@@ -18,6 +18,8 @@ import {
   conversationStatsReportSchema,
   codeOverviewReportSchema,
   codePersonReportSchema,
+  codeRepositoryParamsSchema,
+  codeRepositoryReportSchema,
   locationDetailReportSchema,
   locationDirectoryReportSchema,
   locationParamsSchema,
@@ -31,6 +33,10 @@ import {
   automationRunListSchema,
 } from "@sentry/junior/api/schema";
 import { mockChartPng } from "./chart-png";
+import {
+  filterMockConversationsByRepository,
+  readMockCodeRepository,
+} from "./code-repository";
 import {
   readMockConversationDetail,
   readMockConversationEvents,
@@ -64,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()),
   );
@@ -128,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(

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. */