@sentry/junior-dashboard 0.233.0 → 0.235.0

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>
+    </>
+  );
+}

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

@@ -1,5 +1,8 @@
+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,
@@ -33,11 +36,11 @@ import { DashboardHeader } from "../../components/layout/DashboardHeader";
 import { PageHeader } from "../../components/layout/PageHeader";
 import { MetricList, MetricValue } from "../../components/Metric";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
+import { ActorAvatar } from "../../components/ActorAvatar";
 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";
@@ -300,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
@@ -308,6 +310,34 @@ function FoundationsGalleryPage() {
       sectionId="foundations"
       title="Foundations"
     >
+      <Fixture title="Editor controls">
+        <Field
+          label="Instruction"
+          htmlFor="gallery-instruction"
+          error="Enter an instruction."
+        >
+          <TextArea
+            prose
+            id="gallery-instruction"
+            aria-invalid
+            aria-describedby="gallery-instruction-error"
+          />
+        </Field>
+        <Field label="Repeat" htmlFor="gallery-repeat">
+          <TextInput
+            size="comfortable"
+            aria-label="Resource identifier"
+            defaultValue="getsentry/junior#42"
+          />
+          <Select id="gallery-repeat">
+            <option>Every week</option>
+          </Select>
+        </Field>
+        <Button tone="primary">Save changes</Button>
+        <FormNotice title="This automation changed while you were editing.">
+          Your edits are still here. Review the latest version before saving.
+        </FormNotice>
+      </Fixture>
       <Fixture title="Conversation navigation">
         <DashboardChromeProvider>
           <DashboardHeader
@@ -323,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>
@@ -563,19 +577,34 @@ function FoundationsGalleryPage() {
           />
         </div>
       </Fixture>
-      <Fixture title="Status chips">
-        <div className="flex flex-wrap items-center gap-2">
+      <Fixture title="Status labels">
+        <div className="flex flex-wrap items-center gap-x-5 gap-y-3">
           <StatusChip tone="neutral">private</StatusChip>
           <StatusChip tone="success">completed</StatusChip>
           <StatusChip tone="danger">failed</StatusChip>
           <StatusChip tone="warning">blocked</StatusChip>
           <StatusChip tone="info">preference</StatusChip>
           <StatusChip tone="accent">knowledge</StatusChip>
-          <StatusChip size="compact" tone="success">
-            public
+          <StatusChip size="compact" tone="warning">
+            Trigger unavailable
           </StatusChip>
         </div>
       </Fixture>
+      <Fixture title="Actor avatars">
+        <div className="flex items-center gap-4">
+          <ActorAvatar
+            name="Ada Lovelace"
+            imageUrl="/_junior/dashboard/avatar.png"
+            size="detail"
+          />
+          <ActorAvatar name="Grace Hopper" size="detail" />
+          <ActorAvatar
+            name="Alan Turing"
+            imageUrl="/missing-avatar.png"
+            size="list"
+          />
+        </div>
+      </Fixture>
       <Fixture title="Participant avatars">
         <div className="flex flex-wrap items-center gap-8">
           <ParticipantAvatarStack

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>
+  );
+}