@sentry/junior-dashboard 0.234.0 → 0.236.0

package/src/client/pages/code/CodePage.tsx

@@ -1,11 +1,9 @@
 import { useState } from "react";
 import type { CodeOverviewReport } from "@sentry/junior/api/schema";
-import { Coins, GitPullRequest, LibraryBig, Timer } from "lucide-react";
+import { Link } from "react-router";
 import { useCodeOverviewData } from "../../api";
-import { formatDuration } from "../../components/Duration";
 import { EmptyTelemetry } from "../../components/EmptyTelemetry";
 import { PageRouteLoading } from "../../components/PageRouteLoading";
-import { StatusChip } from "../../components/StatusChip";
 import {
   selectTimeSeries,
   timeRangeBucketUnit,
@@ -14,29 +12,14 @@ import {
 import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
 import { PageLayout } from "../../components/layout/PageLayout";
-import { StatCard } from "../../components/metrics/StatCard";
-import { formatCompactNumber, formatCostSummary } from "../../format";
 import { CodeActivityChart } from "./CodeActivityChart";
-
-function mergeRate(value: number | undefined): string {
-  return value === undefined ? "—" : `${Math.round(value * 100)}%`;
-}
-
-function medianMergeTime(value: number | undefined): string {
-  return formatDuration(value) || "—";
-}
-
-function costUsd(value: number | undefined): string {
-  return (
-    formatCostSummary(value === undefined ? undefined : { total: value }) || "—"
-  );
-}
-
-function stateTone(state: "closed" | "merged" | "open") {
-  if (state === "merged") return "success" as const;
-  if (state === "open") return "info" as const;
-  return "neutral" as const;
-}
+import { CodeChangeRow } from "./CodeChangeRow";
+import {
+  CodeSummaryCards,
+  formatCodeCost,
+  formatMergeRate,
+} from "./CodeSummaryCards";
+import { codeRepositoryPath } from "./codeRepositoryRoutes";
 
 /** Render code analytics and recent code changes. */
 export function CodePage() {
@@ -77,32 +60,7 @@ function CodeOverview(props: {
   const data = props.data;
   return (
     <>
-      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-        <StatCard
-          detail="In the last 30 days"
-          icon={GitPullRequest}
-          label="Created"
-          value={formatCompactNumber(data.summary.created)}
-        />
-        <StatCard
-          detail="Share of completed changes that merged"
-          icon={LibraryBig}
-          label="Merge rate"
-          value={mergeRate(data.summary.mergeRate)}
-        />
-        <StatCard
-          detail="Median time from open to merge in the last 30 days"
-          icon={Timer}
-          label="Median merge time"
-          value={medianMergeTime(data.summary.medianMergeTimeMs)}
-        />
-        <StatCard
-          detail="Conversation cost for changes opened in the last 30 days"
-          icon={Coins}
-          label="Cost"
-          value={costUsd(data.summary.costUsd)}
-        />
-      </div>
+      <CodeSummaryCards summary={data.summary} />
       <CodeActivityChart
         bucketUnit={timeRangeBucketUnit(props.range)}
         days={selectTimeSeries({
@@ -160,18 +118,12 @@ function CodeOverview(props: {
                   >
                     <td className="min-w-0 px-4 py-3">
                       <div className="truncate font-display text-sm text-dashboard-text">
-                        {repository.url ? (
-                          <a
-                            className="text-inherit no-underline hover:text-cyan-100"
-                            href={repository.url}
-                            rel="noreferrer"
-                            target="_blank"
-                          >
-                            {repository.name}
-                          </a>
-                        ) : (
-                          repository.name
-                        )}
+                        <Link
+                          className="text-inherit no-underline hover:text-cyan-100"
+                          to={codeRepositoryPath(repository.id)}
+                        >
+                          {repository.name}
+                        </Link>
                       </div>
                       <div className="mt-1 truncate font-mono text-xs text-dashboard-text-muted">
                         {repository.provider}
@@ -181,10 +133,10 @@ function CodeOverview(props: {
                       {repository.created}
                     </td>
                     <td className="px-4 py-3 text-right font-mono text-sm whitespace-nowrap text-dashboard-text">
-                      {mergeRate(repository.mergeRate)}
+                      {formatMergeRate(repository.mergeRate)}
                     </td>
                     <td className="px-4 py-3 text-right font-mono text-sm whitespace-nowrap text-dashboard-text">
-                      {costUsd(repository.medianCostUsd)}
+                      {formatCodeCost(repository.medianCostUsd)}
                     </td>
                   </tr>
                 ))}
@@ -200,34 +152,7 @@ function CodeOverview(props: {
           </div>
           <div>
             {data.changes.map((change) => (
-              <div
-                className="flex min-w-0 items-center justify-between gap-4 border-b border-dashboard-border-subtle px-4 py-3 last:border-b-0"
-                key={change.id}
-              >
-                <div className="min-w-0">
-                  <div className="truncate font-display text-sm text-dashboard-text">
-                    {change.url ? (
-                      <a
-                        className="text-inherit no-underline hover:text-cyan-100"
-                        href={change.url}
-                        rel="noreferrer"
-                        target="_blank"
-                      >
-                        {change.title ??
-                          `${change.repository} #${change.number}`}
-                      </a>
-                    ) : (
-                      (change.title ?? `${change.repository} #${change.number}`)
-                    )}
-                  </div>
-                  <div className="mt-1 truncate font-mono text-xs text-dashboard-text-muted">
-                    {change.repository} #{change.number} · {change.provider}
-                  </div>
-                </div>
-                <StatusChip size="compact" tone={stateTone(change.state)}>
-                  {change.state}
-                </StatusChip>
-              </div>
+              <CodeChangeRow change={change} key={change.id} />
             ))}
           </div>
         </Card>

package/src/client/pages/code/CodeSummaryCards.tsx

@@ -0,0 +1,53 @@
+import type { CodeOverviewReport } from "@sentry/junior/api/schema";
+import { Coins, GitPullRequest, LibraryBig, Timer } from "lucide-react";
+
+import { formatDuration } from "../../components/Duration";
+import { StatCard } from "../../components/metrics/StatCard";
+import { formatCompactNumber, formatCostSummary } from "../../format";
+
+/** Format a merge rate, or a dash when no change has finished. */
+export function formatMergeRate(value: number | undefined): string {
+  return value === undefined ? "—" : `${Math.round(value * 100)}%`;
+}
+
+/** Format a code cost, or a dash when no cost is recorded. */
+export function formatCodeCost(value: number | undefined): string {
+  return (
+    formatCostSummary(value === undefined ? undefined : { total: value }) || "—"
+  );
+}
+
+/** Show the 30-day code change summary cards. */
+export function CodeSummaryCards(props: {
+  summary: CodeOverviewReport["summary"];
+}) {
+  const summary = props.summary;
+  return (
+    <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+      <StatCard
+        detail="In the last 30 days"
+        icon={GitPullRequest}
+        label="Created"
+        value={formatCompactNumber(summary.created)}
+      />
+      <StatCard
+        detail="Share of completed changes that merged"
+        icon={LibraryBig}
+        label="Merge rate"
+        value={formatMergeRate(summary.mergeRate)}
+      />
+      <StatCard
+        detail="Median time from open to merge in the last 30 days"
+        icon={Timer}
+        label="Median merge time"
+        value={formatDuration(summary.medianMergeTimeMs) || "—"}
+      />
+      <StatCard
+        detail="Conversation cost for changes opened in the last 30 days"
+        icon={Coins}
+        label="Cost"
+        value={formatCodeCost(summary.costUsd)}
+      />
+    </div>
+  );
+}

package/src/client/pages/code/RepositoryPage.tsx

@@ -0,0 +1,227 @@
+import { useState } from "react";
+import type { CodeRepositoryReport } from "@sentry/junior/api/schema";
+import { ArrowLeft, ExternalLink } from "lucide-react";
+import { Link, useParams } from "react-router";
+
+import {
+  useCodeRepositoryConversationsData,
+  useCodeRepositoryData,
+} from "../../api";
+import { ButtonLink } from "../../components/Button";
+import { EmptyTelemetry } from "../../components/EmptyTelemetry";
+import { PageRouteLoading } from "../../components/PageRouteLoading";
+import {
+  timeRangeBucketUnit,
+  TimeRangeSelector,
+  type TimeRangeDays,
+} from "../../components/controls/TimeRangeSelector";
+import { PageHeader } from "../../components/layout/PageHeader";
+import { PageLayout } from "../../components/layout/PageLayout";
+import { SecondaryNavigation } from "../../components/layout/SecondaryNavigation";
+import { buildConversations } from "../../format";
+import { CodeActivityChart } from "./CodeActivityChart";
+import { CodeChangeRow } from "./CodeChangeRow";
+import { CodeSummaryCards } from "./CodeSummaryCards";
+import {
+  codeRepositoryPath,
+  type CodeRepositoryTab,
+} from "./codeRepositoryRoutes";
+import {
+  RecentConversationRow,
+  RepositorySection,
+  repositoryActivity,
+} from "./RepositorySections";
+import {
+  RepositoryChangesTab,
+  RepositoryConversationsTab,
+} from "./RepositoryTabs";
+
+const RECENT_ROWS = 5;
+const DESCRIPTION = "Conversations and code changes from Junior.";
+
+/** Inline link style used by `ConversationSummary` location links. */
+const inlineLinkClass =
+  "font-semibold text-dashboard-text underline decoration-white/20 underline-offset-2 transition-colors hover:decoration-white/60";
+
+/** Render one repository tab under the shared header and tab bar. */
+export function RepositoryPage(props: { tab: CodeRepositoryTab }) {
+  const params = useParams();
+  const repositoryId = params.repositoryId;
+  const [range, setRange] = useState<TimeRangeDays>(30);
+  const query = useCodeRepositoryData(repositoryId);
+  if (!query.data && !query.error) {
+    return (
+      <PageRouteLoading
+        description={DESCRIPTION}
+        label="Loading repository"
+        title="Repository"
+        variant="stats"
+      />
+    );
+  }
+  const data = query.data;
+  if (!data) {
+    return (
+      <PageLayout>
+        <BackToCode />
+        <EmptyTelemetry>
+          This repository is unavailable. It may not have any code changes from
+          Junior.
+        </EmptyTelemetry>
+      </PageLayout>
+    );
+  }
+  const repository = data.repository;
+  return (
+    <SecondaryNavigation
+      ariaLabel="Repository navigation"
+      items={[
+        {
+          end: true,
+          label: "Overview",
+          to: codeRepositoryPath(repository.id),
+        },
+        {
+          label: "Conversations",
+          to: codeRepositoryPath(repository.id, "conversations"),
+        },
+        {
+          label: "Changes",
+          to: codeRepositoryPath(repository.id, "changes"),
+        },
+      ]}
+    >
+      <PageLayout>
+        <BackToCode />
+        <PageHeader
+          actions={
+            <div className="flex flex-wrap items-center gap-2">
+              <TimeRangeSelector onChange={setRange} value={range} />
+              {repository.url ? (
+                <ButtonLink
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  to={repository.url}
+                >
+                  Open repository
+                  <ExternalLink
+                    aria-hidden="true"
+                    className="size-3.5 shrink-0"
+                  />
+                </ButtonLink>
+              ) : null}
+            </div>
+          }
+          description={<RepositoryDescription data={data} />}
+          title={repository.name}
+        />
+        {props.tab === "overview" ? (
+          <RepositoryOverview data={data} range={range} />
+        ) : null}
+        {props.tab === "conversations" ? (
+          <RepositoryConversationsTab repositoryId={repository.id} />
+        ) : null}
+        {props.tab === "changes" ? (
+          <RepositoryChangesTab data={data} range={range} />
+        ) : null}
+      </PageLayout>
+    </SecondaryNavigation>
+  );
+}
+
+function BackToCode() {
+  return (
+    <Link
+      className="flex w-fit items-center gap-2 font-display text-sm font-medium text-dashboard-text-muted no-underline transition-colors hover:text-dashboard-text"
+      to="/code"
+    >
+      <ArrowLeft aria-hidden="true" size={15} strokeWidth={1.8} />
+      Back to code
+    </Link>
+  );
+}
+
+/** Page description, then each Workspace that includes the repository. */
+function RepositoryDescription(props: { data: CodeRepositoryReport }) {
+  const workspaces = props.data.workspaces;
+  if (workspaces.length === 0) return DESCRIPTION;
+  return (
+    <>
+      {DESCRIPTION} / Workspaces{" "}
+      {workspaces.map((workspace, index) => (
+        <span key={workspace.id}>
+          {index > 0 ? ", " : null}
+          <Link
+            className={inlineLinkClass}
+            to={`/system/workspaces/${encodeURIComponent(workspace.id)}`}
+          >
+            {workspace.name}
+          </Link>
+        </span>
+      ))}
+    </>
+  );
+}
+
+function RepositoryOverview(props: {
+  data: CodeRepositoryReport;
+  range: TimeRangeDays;
+}) {
+  const data = props.data;
+  const conversationsQuery = useCodeRepositoryConversationsData(
+    data.repository.id,
+  );
+  const conversations = buildConversations(
+    conversationsQuery.data?.conversations ?? [],
+  ).slice(0, RECENT_ROWS);
+  const changes = data.changes.slice(0, RECENT_ROWS);
+  return (
+    <>
+      <CodeSummaryCards summary={data.summary} />
+      <div className="grid gap-3 lg:grid-cols-2">
+        <RepositorySection
+          title="Recent conversations"
+          viewAllTo={codeRepositoryPath(data.repository.id, "conversations")}
+        >
+          {conversations.length > 0 ? (
+            conversations.map((conversation) => (
+              <RecentConversationRow
+                conversation={conversation}
+                key={conversation.id}
+              />
+            ))
+          ) : (
+            <div className="p-4">
+              <EmptyTelemetry>
+                {conversationsQuery.error
+                  ? "Conversations are unavailable. Try refreshing the dashboard."
+                  : conversationsQuery.data
+                    ? "No conversations are linked to this repository yet."
+                    : "Loading conversations…"}
+              </EmptyTelemetry>
+            </div>
+          )}
+        </RepositorySection>
+        <RepositorySection
+          title="Recent changes"
+          viewAllTo={codeRepositoryPath(data.repository.id, "changes")}
+        >
+          {changes.length > 0 ? (
+            changes.map((change) => (
+              <CodeChangeRow change={change} key={change.id} />
+            ))
+          ) : (
+            <div className="p-4">
+              <EmptyTelemetry>No code changes are recorded yet.</EmptyTelemetry>
+            </div>
+          )}
+        </RepositorySection>
+      </div>
+      <CodeActivityChart
+        bucketUnit={timeRangeBucketUnit(props.range)}
+        days={repositoryActivity(data, props.range)}
+        range={props.range}
+      />
+    </>
+  );
+}

package/src/client/pages/code/RepositorySections.tsx

@@ -0,0 +1,108 @@
+import type { CodeRepositoryReport } from "@sentry/junior/api/schema";
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+
+import {
+  selectTimeSeries,
+  type TimeRangeDays,
+} from "../../components/controls/TimeRangeSelector";
+import { Card } from "../../components/layout/Card";
+import { SectionHeader } from "../../components/layout/SectionHeader";
+import { SectionTitle } from "../../components/layout/SectionTitle";
+import { ConversationSidebarAnnotations } from "../../conversations/ConversationMeta";
+import { ConversationListStatusIcon } from "../../conversations/ConversationListStatusIcon";
+import { conversationPath } from "../../conversations/conversationRoutes";
+import {
+  conversationDisplayTitle,
+  formatRelativeTime,
+  slackLocationLabel,
+  visualStatusForConversation,
+} from "../../format";
+import type { Conversation } from "../../types";
+
+/** Titled repository card with an optional "View all" link to its tab. */
+export function RepositorySection(props: {
+  children: ReactNode;
+  title: string;
+  viewAllTo?: string;
+}) {
+  return (
+    <Card as="section" className="mb-0" variant="section">
+      <SectionHeader
+        actions={
+          props.viewAllTo ? (
+            <Link
+              className="text-sm text-dashboard-text underline underline-offset-2"
+              to={props.viewAllTo}
+            >
+              View all
+            </Link>
+          ) : undefined
+        }
+      >
+        <SectionTitle>{props.title}</SectionTitle>
+      </SectionHeader>
+      {props.children}
+    </Card>
+  );
+}
+
+/**
+ * Two-line conversation row built from the sidebar row parts: status icon and
+ * title, then plugin annotations or the location.
+ */
+export function RecentConversationRow(props: { conversation: Conversation }) {
+  const conversation = props.conversation;
+  const title = conversationDisplayTitle(conversation);
+  const location = slackLocationLabel(conversation, { includeId: false });
+  const hasAnnotations = Boolean(conversation.sidebarAnnotations?.length);
+  return (
+    <div className="relative min-w-0 border-b border-dashboard-border-subtle px-4 py-3 transition-colors last:border-b-0 hover:bg-dashboard-fill-soft">
+      <Link
+        aria-label={`Open ${title}`}
+        className="absolute inset-0 z-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-dashboard-focus"
+        to={conversationPath(conversation.id)}
+      />
+      <div className="pointer-events-none relative z-[1] grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-x-2">
+        <span className="mt-1.5 grid size-3 shrink-0 place-items-center">
+          <ConversationListStatusIcon
+            finishedSinceSeen={false}
+            isPrivate={conversation.visibility === "private"}
+            status={visualStatusForConversation(conversation)}
+          />
+        </span>
+        <div className="min-w-0 truncate font-display text-sm text-dashboard-text">
+          {title}
+        </div>
+        <span className="whitespace-nowrap font-mono text-xs text-dashboard-text-muted">
+          {formatRelativeTime(conversation.lastSeenAt)}
+        </span>
+        {/* Keep the meta line at text height so annotation chips do not make
+            this row taller than a code change row beside it. */}
+        <div className="col-start-2 col-end-4 mt-1 flex h-4 min-w-0 items-center gap-1.5 font-mono text-xs text-dashboard-text-muted">
+          {hasAnnotations ? (
+            <ConversationSidebarAnnotations
+              annotations={conversation.sidebarAnnotations}
+            />
+          ) : location ? (
+            <span className="truncate">{location}</span>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Chart buckets for the selected range from a repository report. */
+export function repositoryActivity(
+  data: CodeRepositoryReport,
+  range: TimeRangeDays,
+) {
+  return selectTimeSeries({
+    days: data.activityDays,
+    hours: data.activityHours,
+    sixHours: data.activitySixHours,
+    range,
+    emptySixHour: (date) => ({ closed: 0, created: 0, date, merged: 0 }),
+  });
+}

package/src/client/pages/code/RepositoryTabs.tsx

@@ -0,0 +1,146 @@
+import { useDeferredValue, useEffect, useState } from "react";
+import type { CodeRepositoryReport } from "@sentry/junior/api/schema";
+
+import { useCodeRepositoryConversationsData } from "../../api";
+import { EmptyTelemetry } from "../../components/EmptyTelemetry";
+import { FilterTabList } from "../../components/FilterBar";
+import {
+  PagePagination,
+  pageCount,
+  pageItems,
+} from "../../components/Pagination";
+import { SearchInput } from "../../components/SearchInput";
+import {
+  timeRangeBucketUnit,
+  type TimeRangeDays,
+} from "../../components/controls/TimeRangeSelector";
+import { Card } from "../../components/layout/Card";
+import { ConversationHomeList } from "../../conversations/ConversationHomeList";
+import { buildConversations, getDashboardTimeZone } from "../../format";
+import { CodeActivityChart } from "./CodeActivityChart";
+import { CodeChangeRow } from "./CodeChangeRow";
+import { repositoryActivity } from "./RepositorySections";
+
+const PAGE_SIZE = 25;
+const noFinishedConversations = new Set<string>();
+
+/** Conversations linked to the repository, in the home list layout. */
+export function RepositoryConversationsTab(props: { repositoryId: string }) {
+  const [query, setQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const search = useDeferredValue(query.trim());
+  const feed = useCodeRepositoryConversationsData(props.repositoryId, search);
+  const conversations = buildConversations(feed.data?.conversations ?? []);
+  useEffect(() => {
+    setPage(1);
+  }, [search]);
+  return (
+    <section aria-label="Conversations" className="grid gap-3">
+      <SearchInput
+        className="w-full sm:ml-auto sm:w-72"
+        label="Search conversations in this repository"
+        onChange={setQuery}
+        placeholder="Search conversations…"
+        value={query}
+      />
+      {feed.error ? (
+        <EmptyTelemetry>
+          Conversations are unavailable. Try refreshing the dashboard.
+        </EmptyTelemetry>
+      ) : (
+        <ConversationHomeList
+          conversations={pageItems(conversations, page, PAGE_SIZE)}
+          emptyLabel={
+            search
+              ? "No conversations match this search."
+              : "No conversations are linked to this repository yet."
+          }
+          finishedConversationIds={noFinishedConversations}
+          loading={!feed.data}
+          timeZone={getDashboardTimeZone()}
+        />
+      )}
+      <PagePagination
+        className="pt-1"
+        onPageChange={setPage}
+        page={page}
+        pageCount={pageCount(conversations.length, PAGE_SIZE)}
+        pageSize={PAGE_SIZE}
+        total={conversations.length}
+      />
+    </section>
+  );
+}
+
+/** Recent code changes in the repository, filtered by state and search. */
+export function RepositoryChangesTab(props: {
+  data: CodeRepositoryReport;
+  range: TimeRangeDays;
+}) {
+  const [state, setState] = useState("");
+  const [query, setQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const all = props.data.changes;
+  const needle = query.trim().toLowerCase();
+  const changes = all.filter(
+    (change) =>
+      (!state || change.state === state) &&
+      (!needle ||
+        change.title?.toLowerCase().includes(needle) ||
+        `#${change.number}`.includes(needle)),
+  );
+  const count = (value: string) =>
+    all.filter((change) => change.state === value).length;
+  useEffect(() => {
+    setPage(1);
+  }, [state, needle]);
+  return (
+    <>
+      <CodeActivityChart
+        bucketUnit={timeRangeBucketUnit(props.range)}
+        days={repositoryActivity(props.data, props.range)}
+        range={props.range}
+      />
+      <section aria-label="Changes" className="grid gap-4">
+        <div className="flex flex-wrap items-end justify-between gap-4">
+          <FilterTabList
+            ariaLabel="Change state"
+            items={[
+              { count: all.length, label: "All", value: "" },
+              { count: count("open"), label: "Open", value: "open" },
+              { count: count("merged"), label: "Merged", value: "merged" },
+              { count: count("closed"), label: "Closed", value: "closed" },
+            ]}
+            onChange={setState}
+            value={state}
+          />
+          <SearchInput
+            className="w-full max-w-md sm:w-auto"
+            label="Search changes"
+            onChange={setQuery}
+            placeholder="Title or number"
+            value={query}
+          />
+        </div>
+        <Card>
+          {changes.length === 0 ? (
+            <div className="p-4">
+              <EmptyTelemetry>No changes match these filters.</EmptyTelemetry>
+            </div>
+          ) : (
+            pageItems(changes, page, PAGE_SIZE).map((change) => (
+              <CodeChangeRow change={change} key={change.id} />
+            ))
+          )}
+        </Card>
+        <PagePagination
+          onPageChange={setPage}
+          page={page}
+          pageCount={pageCount(changes.length, PAGE_SIZE)}
+          pageSize={PAGE_SIZE}
+          total={changes.length}
+        />
+      </section>
+    </>
+  );
+}