@sentry/junior-dashboard 0.270.0 → 0.272.0

package/src/client/review-desk/ReviewItemView.tsx

@@ -0,0 +1,159 @@
+import { ArrowRight, ChevronLeft, PanelRight } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { Link } from "react-router";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+import { StatusChip } from "../components/StatusChip";
+import { Button } from "../components/ui/button";
+import { ChatLayout } from "../conversations/ChatLayout";
+import { conversationPath } from "../conversations/conversationRoutes";
+import { DisplayText } from "../display-text/DisplayText";
+import { formatRelativeTime } from "../format";
+import { ReviewItemActions } from "./ReviewItemActions";
+import { ReviewItemContext } from "./ReviewItemContext";
+import { reviewItemStatusLabel } from "./reviewItemFormat";
+
+/** Space above the card when the view starts at its top. */
+const CARD_TOP_MARGIN_PX = 24;
+
+const textLinkClass =
+  "inline-flex items-center gap-1.5 font-sans text-sm font-medium text-dashboard-text no-underline hover:underline focus-visible:outline-dashboard-focus";
+
+/**
+ * Show one Review item where a person decides it: the end of the
+ * Conversation that added it, then its question and actions.
+ */
+export function ReviewItemView(props: {
+  backTo: string;
+  detailsOpen: boolean;
+  item: ReviewItemPayload;
+  next?: { title: string; to: string };
+  onDetailsClick(): void;
+  /** The title of the Conversation that added the item, when it is known. */
+  sourceTitle?: string;
+}) {
+  const { item } = props;
+  const open = item.status === "open";
+  const articleRef = useRef<HTMLElement>(null);
+  const cardRef = useRef<HTMLElement>(null);
+  // Open at the decision: the messages above it are context. Show the end
+  // of the page, or the top of the card when the card is taller than the
+  // view. Messages load and grow after the first paint, so keep the place
+  // until the reader scrolls or uses the page.
+  useEffect(() => {
+    const article = articleRef.current;
+    const card = cardRef.current;
+    const scroll = article?.closest<HTMLElement>("[data-chat-scroll]");
+    if (!article || !card || !scroll) return;
+    const observer = new ResizeObserver(() => {
+      const cardTop =
+        card.getBoundingClientRect().top -
+        scroll.getBoundingClientRect().top +
+        scroll.scrollTop;
+      scroll.scrollTop = Math.min(
+        scroll.scrollHeight - scroll.clientHeight,
+        cardTop - CARD_TOP_MARGIN_PX,
+      );
+    });
+    const stop = () => observer.disconnect();
+    const events = ["keydown", "pointerdown", "touchstart", "wheel"] as const;
+    observer.observe(article);
+    for (const name of events) {
+      scroll.addEventListener(name, stop, { passive: true });
+    }
+    return () => {
+      stop();
+      for (const name of events) scroll.removeEventListener(name, stop);
+    };
+  }, []);
+  const source = item.automationId ? "Automation" : props.sourceTitle;
+  // A notice has no question, so its text is what the card shows.
+  const bodyInCard = item.kind === "notice" || !item.request;
+  const conversationLink = (
+    <Link
+      className={textLinkClass}
+      to={conversationPath(item.addedByConversationId, {
+        turnId: item.addedByTurnId,
+      })}
+    >
+      Open conversation
+      <ArrowRight aria-hidden="true" size={14} />
+    </Link>
+  );
+  return (
+    <ChatLayout
+      header={
+        <header className="border-b border-dashboard-border bg-dashboard-bg">
+          <div className="flex min-w-0 items-start justify-between gap-4 px-4 py-3 md:px-7 md:py-5">
+            <div className="grid min-w-0 gap-1.5">
+              <Link
+                className="inline-flex items-center gap-1 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text md:hidden"
+                to={props.backTo}
+              >
+                <ChevronLeft aria-hidden="true" size={14} />
+                Inbox
+              </Link>
+              <h2 className="m-0 min-w-0 break-words font-display text-xl font-medium leading-tight tracking-tight">
+                {item.title}
+              </h2>
+              <p className="m-0 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-dashboard-text-muted">
+                <StatusChip size="compact" tone={open ? "accent" : "neutral"}>
+                  {reviewItemStatusLabel(item)}
+                </StatusChip>
+                <span>
+                  {source ? `${source} · ` : null}
+                  {formatRelativeTime(item.createdAt)}
+                  {item.visibility === "private" ? " · Private" : null}
+                </span>
+              </p>
+            </div>
+            <Button
+              aria-label="Review item details"
+              aria-pressed={props.detailsOpen}
+              className="shrink-0"
+              onClick={props.onDetailsClick}
+            >
+              <PanelRight aria-hidden="true" size={15} strokeWidth={2} />
+              Details
+            </Button>
+          </div>
+        </header>
+      }
+      scrollAriaLabel="Review item"
+      scrollClassName="px-4 pb-6 md:px-7"
+      scroll={
+        <article
+          aria-label={item.title}
+          ref={articleRef}
+          className="mx-auto grid w-full min-w-0 max-w-[52.5rem] gap-5 pt-5 md:pt-7"
+        >
+          <ReviewItemContext
+            fallback={
+              <div className="grid gap-3 font-sans text-sm leading-relaxed">
+                {bodyInCard ? null : <DisplayText text={item.body} />}
+                <div>{conversationLink}</div>
+              </div>
+            }
+            item={item}
+          />
+          <section
+            aria-label={open ? "Answer" : "Outcome"}
+            ref={cardRef}
+            className="grid min-w-0 gap-4 rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-panel p-4 font-sans text-sm md:p-5"
+          >
+            {bodyInCard ? <DisplayText text={item.body} /> : null}
+            <ReviewItemActions item={item} />
+          </section>
+          {props.next ? (
+            <div className="flex justify-end">
+              <Link className={textLinkClass} replace to={props.next.to}>
+                Next: {props.next.title}
+                <ArrowRight aria-hidden="true" size={14} />
+              </Link>
+            </div>
+          ) : null}
+        </article>
+      }
+    />
+  );
+}

package/src/client/review-desk/queries.ts

@@ -25,8 +25,8 @@ const COUNT_REFRESH_MS = 60_000;
 
 /**
  * List the open Review items that the viewer can see, one page at a time.
- * A search also finds archived items, with the first page. `items` holds
- * the items of every loaded page, and `query` loads more.
+ * A search also finds archived items, with the first page. `items` holds the
+ * items of every loaded page, and `query` loads more.
  */
 export function useReviewItemsData(filters: {
   conversationId?: string;
@@ -135,7 +135,7 @@ export function useBlockedAutomationsData(enabled: boolean) {
   });
 }
 
-/** Take, submit, complete, or dismiss one Review item. */
+/** Take, submit, or dismiss one Review item. */
 export function useReviewItemAction() {
   const queryClient = useQueryClient();
   return useMutation({

package/src/client/review-desk/reviewItemFormat.ts

@@ -9,6 +9,19 @@ export function reviewItemPath(id: string): string {
   return `/review?item=${encodeURIComponent(id)}`;
 }
 
+/**
+ * Return the subject URL when it is safe to link. Agents and plugins supply
+ * it, and URL validation also accepts `javascript:` and `data:` URLs.
+ */
+export function reviewItemSubjectHref(url: string): string | undefined {
+  try {
+    const { protocol } = new URL(url);
+    return protocol === "https:" || protocol === "http:" ? url : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 /** Name the state of an item: what it needs while open, or how it closed. */
 export function reviewItemStatusLabel(item: ReviewItemPayload): string {
   if (item.status === "open") {
@@ -87,3 +100,42 @@ export function reviewItemWaitsForAnswer(item: ReviewItemPayload): boolean {
     item.canAct
   );
 }
+
+/** The open Review items of the inbox, in the groups and order it shows. */
+export type InboxGroups = {
+  fyi: ReviewItemPayload[];
+  needsYou: ReviewItemPayload[];
+};
+
+/** Inbox order: action items first, then the oldest, then the item id. */
+function inboxOrder(a: ReviewItemPayload, b: ReviewItemPayload): number {
+  if (a.kind !== b.kind) return a.kind === "action" ? -1 : 1;
+  const age = Date.parse(a.createdAt) - Date.parse(b.createdAt);
+  if (age !== 0) return age;
+  return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
+}
+
+/**
+ * Split open items into inbox groups, oldest first, so the item that waited
+ * longest is at the top. Archived items are in no group.
+ */
+export function inboxGroups(items: readonly ReviewItemPayload[]): InboxGroups {
+  const open = items.filter((item) => item.status === "open");
+  return {
+    fyi: open.filter((item) => item.kind === "notice").sort(inboxOrder),
+    needsYou: open.filter((item) => item.kind === "action").sort(inboxOrder),
+  };
+}
+
+/**
+ * The open item that follows `current` in inbox order. `current` can be an
+ * item that closed and left the open groups.
+ */
+export function nextInboxItem(
+  groups: InboxGroups,
+  current: ReviewItemPayload,
+): ReviewItemPayload | undefined {
+  return [...groups.needsYou, ...groups.fyi].find(
+    (item) => inboxOrder(current, item) < 0,
+  );
+}

package/src/mock-reporting/read-positions.ts

@@ -0,0 +1,39 @@
+import type {
+  ConversationDetailReport,
+  ConversationReadPosition,
+} from "@sentry/junior/api/schema";
+import { readMockConversationDetail } from "./fixtures";
+
+/** Process-local read positions so mock QA can reopen at unread rows. */
+const mockReadPositions = new Map<string, number>();
+
+/** Clear mock read positions so tests sharing a worker do not leak state. */
+export function resetMockReadPositions(): void {
+  mockReadPositions.clear();
+}
+
+/** Move a mock read position forward, like the API. */
+export function markMockConversationRead(
+  conversationId: string,
+  lastReadSeq: number,
+): ConversationReadPosition | undefined {
+  const detail = readMockConversationDetail(conversationId);
+  if (!detail) return undefined;
+  const lastSeq = detail.events.at(-1)?.seq ?? 0;
+  const stored = Math.max(
+    mockReadPositions.get(conversationId) ?? -1,
+    Math.min(lastReadSeq, lastSeq),
+  );
+  mockReadPositions.set(conversationId, stored);
+  return { lastReadSeq: stored };
+}
+
+/** Add the mock read position to a detail report. */
+export function withMockReadPosition(
+  report: ConversationDetailReport,
+): ConversationDetailReport {
+  const lastReadSeq = mockReadPositions.get(report.conversationId);
+  return lastReadSeq === undefined
+    ? report
+    : { ...report, readPosition: { lastReadSeq } };
+}

package/src/mock-reporting/routes.ts

@@ -15,6 +15,7 @@ import {
   conversationFeedQuerySchema,
   conversationFeedSchema,
   conversationParamsSchema,
+  conversationReadPositionSchema,
   conversationPendingMessagesReportSchema,
   conversationStatsReportSchema,
   conversationWatchesReportSchema,
@@ -38,6 +39,10 @@ import {
   automationRunListSchema,
 } from "@sentry/junior/api/schema";
 import { mockChartPng } from "./chart-png";
+import {
+  markMockConversationRead,
+  withMockReadPosition,
+} from "./read-positions";
 import {
   filterMockConversationsByRepository,
   readMockCodeRepository,
@@ -244,7 +249,27 @@ export function createMockReportingApi(): Hono<{
     const { conversationId } = params.data;
     const report = readMockConversationDetail(conversationId, query.data.limit);
     return report
-      ? jsonResponse(conversationDetailReportSchema, report)
+      ? jsonResponse(
+          conversationDetailReportSchema,
+          withMockReadPosition(report),
+        )
+      : errorResponse("Conversation not found.", 404);
+  });
+  app.put("/conversations/:conversationId/read-position", async (c) => {
+    const params = conversationParamsSchema.safeParse(c.req.param());
+    if (!params.success) {
+      return errorResponse("Invalid route parameters.", 400);
+    }
+    const body = conversationReadPositionSchema.safeParse(await c.req.json());
+    if (!body.success) {
+      return errorResponse("Invalid request body.", 400);
+    }
+    const result = markMockConversationRead(
+      params.data.conversationId,
+      body.data.lastReadSeq,
+    );
+    return result
+      ? jsonResponse(conversationReadPositionSchema, result)
       : errorResponse("Conversation not found.", 404);
   });
   app.patch("/conversations/:conversationId/archive", async (c) => {

package/src/tailwind.css

@@ -4,7 +4,7 @@
 @import "shadcn/tailwind.css";
 
 /*
- * Dashboard design tokens. components/AGENTS.md has the token rules.
+ * Dashboard design tokens. `pnpm dashboard-style:check` enforces their use.
  * Keep structural UI colors here so a second theme can redefine them.
  * Prefer roles over opacity ladders. Status accents stay as Tailwind palette utilities.
  */

package/src/client/components/AGENTS.md

@@ -1,65 +0,0 @@
-# Dashboard UI kit
-
-Shared dashboard components live here. Feature pages compose them instead of
-copying Tailwind blocks. Follow `policies/frontend-components.md`.
-`pnpm dashboard-style:check` enforces the token rules.
-
-## shadcn/ui
-
-- Add components with
-  `pnpm --filter @sentry/junior-dashboard exec shadcn add <component>`. They go
-  to `ui/`.
-- `ui/` files are shadcn source on dashboard tokens. Remove unused exports.
-  Change a `ui/` file when every caller needs the same style.
-- Use `ui/` components directly. Add an app component only when it adds
-  structure or behavior, not to rename a `ui/` component or its props.
-- Do not apply the CLI's global border or body resets. Keep the Tailwind
-  radius scale.
-
-## Component rules
-
-- Use `ui/alert-dialog` for every confirmation. Never use `window.confirm`.
-- Use `ui/dialog` for a short task form. Never put a form in a `Drawer` or
-  `DetailsPanel`. Use `useSheet` for each dialog and mount it only while open.
-- Use `ui/trace` for transcript activity rows. Put only inline elements in
-  the row button.
-- Give an icon-only control a label with `TooltipContent size="compact"`.
-  Never use the native `title` attribute.
-- Set `focusableWhenDisabled` on a `ui/button` tooltip trigger that can be
-  disabled.
-- Build form fields from `ui/field`. Use the ids `<control id>-error` and
-  `<control id>-help`.
-- Put a checkbox or radio inside its `<label>`. Give each `RadioGroup` an
-  `aria-label`.
-- `ui/alert` sets `role="alert"`. Pass `role="status"` for a message that is
-  not an error.
-- A form page has one `Button variant="primary"`.
-- `ObjectIcon` owns native object icons. Do not replace it with a provider
-  logo.
-
-## Tokens
-
-- Keep every color in a token in `src/tailwind.css`, so each theme can
-  redefine it. Use `light:` only for values that no token covers.
-- Use `var(--color-*)` for chart series. Never use hex values.
-- Do not use `white/*` or `black/*` fills, borders, or rings, or hex surface
-  colors. Shadows may use black.
-- Use `outline-dashboard-focus` for keyboard focus only.
-- Use the named type scale. Keep `text-2xs` for compact badges and chart
-  annotations.
-- Labels use sentence case. Do not use uppercase or letter spacing.
-
-## Navigation
-
-- App navigation uses pills, page links use `SegmentedNav`, and panel
-  switches use `ui/tabs`. Keep the three levels distinct.
-
-## Ownership
-
-- Conversation mobile geometry has hard owners: `layout/VisualViewportShell`,
-  `conversations/ChatLayout`, and `conversations/ComposerDock`. Pages pass
-  children only. Do not add viewport, offset, or safe-area math in pages.
-- Home and create must not use `ComposerDock`.
-- Feature surfaces stay under `conversations/` or `pages/` until two real
-  callers share them. Add a named component on the second real use.
-- Keep Tailwind classes on the owning component.

package/src/client/components/charts/AGENTS.md

@@ -1,15 +0,0 @@
-# System cache reporting
-
-- `cache-input.ts` owns the cache input calculation.
-- `ConversationMetricDay` comes from stored Run metrics, not Sentry spans.
-  Its input, cached input, and cache-creation counters are disjoint. Add
-  them once for total input. Do not include output. Never use this transform
-  for Sentry span totals.
-- Period shares use summed token counts, not the mean of bucket shares.
-- A missing counter is not a zero. When an active bucket has no counter, omit
-  its share and the whole-period share.
-- Do not call these values a cache hit rate or a cache failure rate. Field
-  presence is not call-level coverage.
-- The page time control selects the buckets for the chart and `CacheWrites`.
-  Do not add a local time selector.
-- Add a reporting contract before you add per-call filters or drilldowns.

package/src/client/conversations/AGENTS.md

@@ -1,38 +0,0 @@
-# Transcript components
-
-Keep transcript layout in these feature components. Use the UI kit in
-`../components/` for shared controls and overlays.
-
-## Ownership
-
-- `TranscriptRows` and `TranscriptRow` own row gaps, padding, and indent.
-  Keep horizontal padding inside each row, so focus outlines are not clipped.
-- `TranscriptMessageShell` owns the avatar column and message gutter.
-- `TranscriptSummaryTrigger` owns disclosure padding and focus. Do not repeat
-  negative margins at call sites.
-- `ChatLayout` keeps the Conversation header outside the transcript scroll.
-- `eventLogRows` and `filterEventLogRows` own row text and search match. The
-  page step controls use them too.
-
-## Rules
-
-- The Automation trigger card shows the credentials from the dispatch record
-  of the run, not the current setting. Keep the run input collapsed, because
-  it is not from a person.
-- Each `Transcript` sets the panel for its own rows. A nested transcript never
-  uses the panel of the page behind it.
-- The page has one right panel. Conversation details, event details, and turn
-  context never show at the same time. Closing a panel returns focus to the
-  control that opened it.
-- The URL owns the selected event in the main Conversation. Standalone
-  transcripts keep selection in `ConversationEventLog`.
-- A pending exit must not close a new panel or another Conversation.
-- A pending fork blocks dismissal of its dialog.
-- Raw JSON keeps the original ISO values. Persist the UTC/local mode, not the
-  timezone.
-
-## Checks
-
-- Review with `JUNIOR_DASHBOARD_MOCK_CONVERSATIONS=true pnpm dev`.
-- Keep visual checks out of automated assertions. Browser tests cover
-  opening, closing, and keyboard interaction.

package/src/client/pages/ConnectionsPage.tsx

@@ -1,207 +0,0 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Plug } from "lucide-react";
-import type { z } from "zod";
-import {
-  connectionListSchema,
-  disconnectConnectionResponseSchema,
-  startConnectionResponseSchema,
-  type connectionSchema,
-} from "@sentry/junior/api/schema";
-import { del, fetchDashboardJson, post } from "../http";
-import { dashboardContainerClass } from "../styles";
-import { getDashboardAgentName } from "../agentName";
-import { useDocumentTitle } from "../documentTitle";
-import { Button } from "../components/ui/button";
-import { InlineError } from "../components/InlineError";
-import { Card } from "../components/layout/Card";
-
-type Connection = z.infer<typeof connectionSchema>;
-
-const connectionsQueryKey = ["dashboard", "connections"] as const;
-
-function connectionPath(provider: string): string {
-  return `/api/connections/${encodeURIComponent(provider)}`;
-}
-
-/** Connect and disconnect the viewer's plugin accounts. */
-export function ConnectionsPage() {
-  useDocumentTitle("Connected accounts");
-  const queryClient = useQueryClient();
-  const connectionsQuery = useQuery({
-    queryKey: connectionsQueryKey,
-    queryFn: ({ signal }) =>
-      fetchDashboardJson(connectionListSchema, "/api/connections", signal),
-    // OAuth finishes in another tab. Refresh when the viewer returns.
-    refetchOnWindowFocus: true,
-    retry: false,
-  });
-  const connectMutation = useMutation({
-    mutationFn: (input: { provider: string; popup: Window | null }) =>
-      post(startConnectionResponseSchema, connectionPath(input.provider), {}),
-    onSuccess: ({ authorizationUrl }, { popup }) => {
-      // A blocked popup returns null, so use this tab. A tab the viewer
-      // closed means they cancelled; keep them on the dashboard.
-      if (!popup) {
-        window.location.assign(authorizationUrl);
-        return;
-      }
-      if (popup.closed) return;
-      popup.opener = null;
-      popup.location.href = authorizationUrl;
-    },
-    onError: (_error, { popup }) => {
-      popup?.close();
-    },
-  });
-  const disconnectMutation = useMutation({
-    mutationFn: (connection: Connection) =>
-      del(
-        disconnectConnectionResponseSchema,
-        connectionPath(connection.provider),
-      ),
-    onSuccess: (_result, connection) => {
-      queryClient.setQueryData<{ connections: Connection[] }>(
-        connectionsQueryKey,
-        (current) =>
-          current && {
-            connections: current.connections.map((item) =>
-              item.provider === connection.provider
-                ? {
-                    provider: item.provider,
-                    displayName: item.displayName,
-                    description: item.description,
-                    connected: false,
-                  }
-                : item,
-            ),
-          },
-      );
-    },
-  });
-  const connections = connectionsQuery.data?.connections ?? [];
-  const busy = connectMutation.isPending || disconnectMutation.isPending;
-  const pendingProvider = connectMutation.isPending
-    ? connectMutation.variables?.provider
-    : disconnectMutation.isPending
-      ? disconnectMutation.variables?.provider
-      : undefined;
-  const listFailed = !connectionsQuery.data && connectionsQuery.isError;
-  const displayedError = connectMutation.isError
-    ? "Could not start the connection. Try again."
-    : disconnectMutation.isError
-      ? "Could not disconnect the account. Try again."
-      : listFailed
-        ? "Could not load connected accounts. Try again."
-        : undefined;
-
-  return (
-    <div className={`${dashboardContainerClass} px-4 py-8 md:px-8`}>
-      <section className="mx-auto w-full max-w-3xl">
-        <h1 className="m-0 text-2xl font-bold">Connected accounts</h1>
-        <p className="mt-2 mb-0 max-w-2xl text-sm text-dashboard-text-muted">
-          Connect an account so {getDashboardAgentName()} can act as you in
-          conversations you start here.
-        </p>
-
-        <Card className="mb-0 mt-6" padding="md" variant="raised">
-          {displayedError ? (
-            <InlineError className={listFailed ? undefined : "mb-4"}>
-              {displayedError}
-            </InlineError>
-          ) : null}
-          {listFailed ? null : (
-            <div className="space-y-2">
-              {connectionsQuery.isPending ? (
-                <p className="m-0 text-sm text-dashboard-text-muted">
-                  Loading connected accounts…
-                </p>
-              ) : connections.length === 0 ? (
-                <p className="m-0 text-sm text-dashboard-text-muted">
-                  No installed plugins support account connections.
-                </p>
-              ) : (
-                connections.map((connection) => (
-                  <div
-                    className="flex items-center gap-3 rounded-md border border-dashboard-border-strong p-3"
-                    key={connection.provider}
-                  >
-                    <Plug
-                      className="shrink-0 text-dashboard-accent"
-                      size={16}
-                    />
-                    <div className="min-w-0 flex-1">
-                      <p className="m-0 truncate text-sm font-semibold">
-                        {connection.displayName}
-                      </p>
-                      <p className="mt-1 mb-0 line-clamp-2 break-words text-xs text-dashboard-text-muted">
-                        {connection.connected ? (
-                          connection.account ? (
-                            <>
-                              Connected as{" "}
-                              {connection.account.url ? (
-                                <a
-                                  className="text-dashboard-text"
-                                  href={connection.account.url}
-                                  rel="noreferrer"
-                                  target="_blank"
-                                >
-                                  {connection.account.label}
-                                </a>
-                              ) : (
-                                connection.account.label
-                              )}
-                            </>
-                          ) : (
-                            "Connected"
-                          )
-                        ) : (
-                          connection.description
-                        )}
-                      </p>
-                    </div>
-                    {connection.connected ? (
-                      <Button
-                        aria-busy={pendingProvider === connection.provider}
-                        aria-label={`Disconnect ${connection.displayName}`}
-                        disabled={busy}
-                        onClick={() => {
-                          connectMutation.reset();
-                          disconnectMutation.mutate(connection);
-                        }}
-                        variant="danger"
-                      >
-                        {pendingProvider === connection.provider
-                          ? "Disconnecting…"
-                          : "Disconnect"}
-                      </Button>
-                    ) : (
-                      <Button
-                        aria-busy={pendingProvider === connection.provider}
-                        aria-label={`Connect ${connection.displayName}`}
-                        disabled={busy}
-                        onClick={() => {
-                          disconnectMutation.reset();
-                          // Open the tab during the click so popup blockers
-                          // allow it, then point it at the provider.
-                          const popup = window.open("about:blank", "_blank");
-                          connectMutation.mutate({
-                            provider: connection.provider,
-                            popup,
-                          });
-                        }}
-                      >
-                        {pendingProvider === connection.provider
-                          ? "Connecting…"
-                          : "Connect"}
-                      </Button>
-                    )}
-                  </div>
-                ))
-              )}
-            </div>
-          )}
-        </Card>
-      </section>
-    </div>
-  );
-}