@sentry/junior-dashboard 0.270.0 → 0.271.0

package/src/client/conversations/ConversationPage.tsx

@@ -31,7 +31,9 @@ import { CopyButton } from "../components/CopyButton";
 import { ConversationBrief } from "./ConversationBrief";
 import {
   CONVERSATION_EVENT_PARAM,
+  CONVERSATION_TURN_PARAM,
   parseConversationEventSeq,
+  turnStartedEventSeq,
 } from "./conversationRoutes";
 import {
   ConversationComposer,
@@ -138,20 +140,24 @@ export function ConversationPage(props: {
   const selectedEventSeq = parseConversationEventSeq(
     searchParams.get(CONVERSATION_EVENT_PARAM),
   );
+  // A linked Turn opens the event that started it. Until that event is
+  // found, it acts like a linked event that is still loading.
+  const linkedTurnId = searchParams.get(CONVERSATION_TURN_PARAM) ?? undefined;
+  const eventOpen =
+    selectedEventSeq !== undefined || linkedTurnId !== undefined;
   // Event details and turn context show over Conversation details. Closing
   // them shows details again when details are open. A linked event starts
   // with details closed, so closing it does not open a panel nobody chose.
   const [detailsChoice, setDetailsChoice] = useState<boolean | undefined>(() =>
-    selectedEventSeq === undefined ? undefined : false,
+    eventOpen ? false : undefined,
   );
   const detailsOpen = detailsChoice ?? detailsDefaultOpen;
   const [turnContext, setTurnContext] = useState<TurnContextSelection>();
-  const eventOpen = selectedEventSeq !== undefined;
   const showDetails = detailsOpen && !eventOpen && !turnContext;
   const [viewState, setView] = useState<TranscriptViewMode>(() =>
-    selectedEventSeq === undefined ? "rich" : "raw",
+    eventOpen ? "raw" : "rich",
   );
-  const view = selectedEventSeq === undefined ? viewState : "raw";
+  const view = eventOpen ? "raw" : viewState;
   const [search, setSearch] = useState("");
   const [pinRequestVersion, setPinRequestVersion] = useState(0);
   const conversationId = props.conversationId;
@@ -213,6 +219,7 @@ export function ConversationPage(props: {
       setSearchParams(
         (current) => {
           const next = new URLSearchParams(current);
+          next.delete(CONVERSATION_TURN_PARAM);
           if (seq === undefined) next.delete(CONVERSATION_EVENT_PARAM);
           else next.set(CONVERSATION_EVENT_PARAM, String(seq));
           return next;
@@ -224,14 +231,14 @@ export function ConversationPage(props: {
   );
   const onViewChange = useCallback(
     (value: TranscriptViewMode) => {
-      if (value !== "raw" && selectedEventSeq !== undefined) {
+      if (value !== "raw" && eventOpen) {
         setSelectedEventSeq(undefined);
       }
       // Turn context belongs to a message in the Conversation view.
       setTurnContext(undefined);
       setView(value);
     },
-    [selectedEventSeq, setSelectedEventSeq],
+    [eventOpen, setSelectedEventSeq],
   );
   // A linked event can be older than the first page. Load earlier pages until
   // it is present or history ends.
@@ -250,12 +257,41 @@ export function ConversationPage(props: {
   useEffect(() => {
     if (loadLinkedEvent) loadPreviousPageRef.current();
   }, [loadLinkedEvent, oldestLoadedSeq]);
-  // Keep the panel while the transcript or a linked event loads.
+  // Load earlier pages until the linked Turn starts or history ends. Then
+  // replace the Turn link with a link to its first event, or drop it when
+  // history has no such event. A history error keeps the link, so a retry
+  // or reload can still find the Turn.
+  const linkedTurnSeq = linkedTurnId
+    ? turnStartedEventSeq(transcript?.events, linkedTurnId)
+    : undefined;
+  const linkedTurnMissing =
+    linkedTurnId !== undefined &&
+    linkedTurnSeq === undefined &&
+    transcript !== undefined;
+  const loadLinkedTurn =
+    linkedTurnMissing &&
+    detail.hasPreviousPage &&
+    !detail.isLoadingPreviousPage &&
+    !detail.historyError;
+  const linkedTurnNotFound =
+    linkedTurnMissing &&
+    !detail.hasPreviousPage &&
+    !detail.isLoadingPreviousPage;
+  useEffect(() => {
+    if (loadLinkedTurn) loadPreviousPageRef.current();
+  }, [loadLinkedTurn, oldestLoadedSeq]);
+  useEffect(() => {
+    if (linkedTurnSeq !== undefined) setSelectedEventSeq(linkedTurnSeq);
+    else if (linkedTurnNotFound) setSelectedEventSeq(undefined);
+  }, [linkedTurnNotFound, linkedTurnSeq, setSelectedEventSeq]);
+  // Keep the panel while the transcript or a linked event loads, and for the
+  // render before a found Turn link becomes an event link.
   const eventLoading =
     eventOpen &&
     !selectedEvent &&
     (detail.isPending ||
-      (linkedEventMissing &&
+      linkedTurnSeq !== undefined ||
+      ((linkedEventMissing || linkedTurnMissing) &&
         (detail.hasPreviousPage || detail.isLoadingPreviousPage) &&
         !detail.historyError));
   const showEvent = Boolean(selectedEvent) || eventLoading;

package/src/client/conversations/conversationRoutes.ts

@@ -1,6 +1,17 @@
-/** Build the dashboard route for a conversation id. */
-export function conversationPath(conversationId: string): string {
-  return `/conversations/${encodeURIComponent(conversationId)}`;
+import type { ConversationReportEvent } from "@sentry/junior/api/schema";
+
+/**
+ * Build the dashboard route for a conversation id. A `turnId` opens the
+ * start of that Turn in the event log.
+ */
+export function conversationPath(
+  conversationId: string,
+  options?: { turnId?: string },
+): string {
+  const path = `/conversations/${encodeURIComponent(conversationId)}`;
+  return options?.turnId
+    ? `${path}?${CONVERSATION_TURN_PARAM}=${encodeURIComponent(options.turnId)}`
+    : path;
 }
 
 /** Dashboard home route. Legacy `/conversations/new` redirects here. */
@@ -20,3 +31,19 @@ export function parseConversationEventSeq(
 ): number | undefined {
   return value && /^\d+$/.test(value) ? Number(value) : undefined;
 }
+
+/** Query param that opens the start of one Turn in the event log. */
+export const CONVERSATION_TURN_PARAM = "turn";
+
+/** Find the sequence number of the event that started a Turn. */
+export function turnStartedEventSeq(
+  events: readonly ConversationReportEvent[] | undefined,
+  turnId: string,
+): number | undefined {
+  return events?.find(
+    ({ data }) =>
+      data.type === "turn_lifecycle" &&
+      data.state === "started" &&
+      data.turnId === turnId,
+  )?.seq;
+}

package/src/client/pages/automations/AGENTS.md

@@ -1,34 +1,15 @@
 # Automation pages
 
-## Boundaries
-
 - Core owns validation, edit access, creator-only rules, revision checks,
-  Schedule previews, and the Event catalog. The page shows core errors. It
-  does not repeat these rules.
+  Schedule previews, and the Event catalog. Show core errors. Do not repeat
+  these rules in the page.
 - Preview requests never save or run work.
-- Completed scheduled Automations are read-only.
-
-## Editor rules
-
-- Send only changed fields. Keep unsupported triggers and stored
-  Destinations unless the user replaces them. Keep outcome order.
-- New messages can target only the current Destination or the creator.
-- A public reader sees outcomes as read-only and cannot turn on creator
-  credentials. Warn that an instruction or event selector change switches to
-  system credentials.
-- Pause, Resume, and Delete are creator-only. Hide them from other viewers.
+- Send only changed fields. Keep unsupported triggers and stored Destinations
+  unless the user replaces them. Keep outcome order.
+- Warn that an instruction or event selector change switches to system
+  credentials.
 - Query refreshes must not replace an unsaved draft. After a stale save, let
   the user keep their changes or load the latest version.
-- Block navigation with unsaved changes.
 - Lifecycle actions and "Make active" read the latest revision first.
-
-## Page rules
-
-- Each Automation has one page at `/automations/:id`. Keep the list query
-  string on the way back. Drop tab-only params: `result`, `run`, `version`.
 - `AutomationRecentRuns` shows terminal runs only. Do not infer queued or
   running work from terminal records.
-- Delete keeps errors in the dialog and blocks dismissal while pending.
-
-Browser journeys: `e2e/automation-editor.spec.ts` and
-`e2e/automations.spec.ts`.

package/src/client/pages/settings/ConnectionsPage.tsx

@@ -0,0 +1,198 @@
+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 { getDashboardAgentName } from "../../agentName";
+import { Button } from "../../components/ui/button";
+import { InlineError } from "../../components/InlineError";
+import { Card } from "../../components/layout/Card";
+import { SettingsPageLayout } from "./SettingsPageLayout";
+
+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() {
+  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 identities. Try again."
+        : undefined;
+
+  return (
+    <SettingsPageLayout
+      description={
+        <>
+          Connect an account so {getDashboardAgentName()} can act as you in
+          conversations you start here.
+        </>
+      }
+      title="Identities"
+    >
+      {displayedError ? <InlineError>{displayedError}</InlineError> : null}
+      {listFailed ? null : (
+        <Card className="mb-0" variant="raised">
+          {connectionsQuery.isPending ? (
+            <p className="m-0 p-5 text-sm text-dashboard-text-muted">
+              Loading identities…
+            </p>
+          ) : connections.length === 0 ? (
+            <p className="m-0 p-5 text-sm text-dashboard-text-muted">
+              No installed plugins support account connections.
+            </p>
+          ) : (
+            <ul className="m-0 list-none divide-y divide-dashboard-border-subtle p-0">
+              {connections.map((connection) => (
+                <li
+                  className="flex items-center gap-3 px-5 py-4"
+                  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>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </Card>
+      )}
+    </SettingsPageLayout>
+  );
+}

package/src/client/pages/settings/McpSettingsPage.tsx

@@ -0,0 +1,77 @@
+import { getDashboardAgentName } from "../../agentName";
+import { CopyButton } from "../../components/CopyButton";
+import { dashboardInlineLinkClass } from "../../styles";
+import { SettingsPageLayout } from "./SettingsPageLayout";
+
+const MCP_DOCS_URL = "https://junior.sentry.dev/operate/mcp-server/";
+
+/** Name the MCP server entry after the agent, for example `junior`. */
+function mcpServerName(): string {
+  return (
+    getDashboardAgentName()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "") || "junior"
+  );
+}
+
+function ConfigBlock(props: { label: string; value: string }) {
+  return (
+    <div>
+      <div className="flex items-center justify-between gap-3">
+        <h2 className="m-0 text-sm font-semibold">{props.label}</h2>
+        <CopyButton getText={() => props.value} label={`Copy ${props.label}`} />
+      </div>
+      <pre className="mt-2 mb-0 whitespace-pre-wrap break-words rounded-md border border-dashboard-border-emphasis bg-dashboard-ink p-3 font-mono text-xs text-dashboard-text">
+        {props.value}
+      </pre>
+    </div>
+  );
+}
+
+/** Show the MCP server URL and client config for this deployment. */
+export function McpSettingsPage() {
+  // The dashboard redirects to its canonical origin, which also serves MCP.
+  const url = new URL("/api/mcp", window.location.origin).toString();
+  const name = mcpServerName();
+  const jsonConfig = JSON.stringify(
+    { mcpServers: { [name]: { type: "http", url } } },
+    null,
+    2,
+  );
+
+  return (
+    <SettingsPageLayout
+      description={
+        <>
+          Connect Claude Code or another MCP client to list your{" "}
+          {getDashboardAgentName()} conversations. The client signs in through
+          this dashboard. Personal API tokens do not work here.
+        </>
+      }
+      title="MCP"
+    >
+      <div className="grid gap-5">
+        <ConfigBlock label="Server URL" value={url} />
+        <ConfigBlock
+          label="Claude Code"
+          value={`claude mcp add --transport http ${name} ${url}`}
+        />
+        <ConfigBlock label="JSON config" value={jsonConfig} />
+      </div>
+
+      <p className="m-0 text-sm text-dashboard-text-muted">
+        The client must support OAuth with Client ID Metadata Documents.{" "}
+        <a
+          className={dashboardInlineLinkClass}
+          href={MCP_DOCS_URL}
+          rel="noreferrer"
+          target="_blank"
+        >
+          Read the MCP server docs
+        </a>
+        .
+      </p>
+    </SettingsPageLayout>
+  );
+}

package/src/client/pages/settings/PersonalTokensPage.tsx

@@ -0,0 +1,198 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { KeyRound, Trash2 } from "lucide-react";
+import { useRef, useState } from "react";
+import {
+  createdPersonalTokenSchema,
+  personalTokenListSchema,
+  type PersonalTokenMetadata,
+} from "@sentry/junior/api/schema";
+import { deleteDashboardResource, fetchDashboardJson, post } from "../../http";
+import { getDashboardAgentName } from "../../agentName";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { InlineError } from "../../components/InlineError";
+import { Card } from "../../components/layout/Card";
+import { SettingsPageLayout } from "./SettingsPageLayout";
+
+const personalTokensQueryKey = ["dashboard", "personal-tokens"] as const;
+
+/** Create and revoke personal API tokens for local clients. */
+export function PersonalTokensPage() {
+  const queryClient = useQueryClient();
+  const createTokenStarted = useRef(false);
+  const [name, setName] = useState("Local agent");
+  const cancelTokenListRefetch = () =>
+    queryClient.cancelQueries({
+      exact: true,
+      queryKey: personalTokensQueryKey,
+    });
+  const tokensQuery = useQuery({
+    queryKey: personalTokensQueryKey,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        personalTokenListSchema,
+        "/api/personal-tokens",
+        signal,
+      ),
+    retry: false,
+  });
+  const createTokenMutation = useMutation({
+    gcTime: 0,
+    mutationFn: (tokenName: string) =>
+      post(createdPersonalTokenSchema, "/api/personal-tokens", {
+        name: tokenName,
+      }),
+    onMutate: () => cancelTokenListRefetch(),
+    onSuccess: async (created) => {
+      const { token: _token, ...metadata } = created;
+      await cancelTokenListRefetch();
+      queryClient.setQueryData<{ tokens: PersonalTokenMetadata[] }>(
+        personalTokensQueryKey,
+        (current) => ({
+          tokens: [
+            metadata,
+            ...(current?.tokens ?? []).filter(
+              (token) => token.id !== metadata.id,
+            ),
+          ],
+        }),
+      );
+    },
+    onSettled: () => {
+      createTokenStarted.current = false;
+    },
+  });
+  const revokeTokenMutation = useMutation({
+    mutationFn: (token: PersonalTokenMetadata) =>
+      deleteDashboardResource(
+        `/api/personal-tokens/${encodeURIComponent(token.id)}`,
+      ),
+    onMutate: () => cancelTokenListRefetch(),
+    onSuccess: async (_result, token) => {
+      await cancelTokenListRefetch();
+      queryClient.setQueryData<{ tokens: PersonalTokenMetadata[] }>(
+        personalTokensQueryKey,
+        (current) => ({
+          tokens: (current?.tokens ?? []).filter(
+            (item) => item.id !== token.id,
+          ),
+        }),
+      );
+      if (createTokenMutation.data?.id === token.id) {
+        createTokenMutation.reset();
+      }
+    },
+  });
+  const createdToken = createTokenMutation.data;
+  const tokens = tokensQuery.data?.tokens ?? [];
+  const loading = tokensQuery.isPending;
+  const busy = createTokenMutation.isPending || revokeTokenMutation.isPending;
+  const displayedError =
+    (createTokenMutation.isError
+      ? "Could not create the API token. Try again."
+      : revokeTokenMutation.isError
+        ? "Could not revoke the API token. Try again."
+        : undefined) ??
+    (!tokensQuery.data && tokensQuery.isError
+      ? "Could not load API tokens. Try again."
+      : undefined);
+
+  return (
+    <SettingsPageLayout
+      description={
+        <>
+          Use a token to read {getDashboardAgentName()} APIs from a local agent
+          or script. Tokens expire after 90 days.
+        </>
+      }
+      title="API Tokens"
+    >
+      {createdToken ? (
+        <div className="rounded-md border border-emerald-400/40 bg-emerald-400/5 p-3">
+          <p className="mt-0 mb-2 text-sm font-semibold">
+            Copy this token now. It won't be shown again.
+          </p>
+          <code className="block overflow-x-auto rounded-md bg-dashboard-ink p-2 text-xs text-emerald-300">
+            {createdToken.token}
+          </code>
+          <Button
+            className="mt-3"
+            onClick={() => {
+              createTokenMutation.reset();
+              setName("Local agent");
+            }}
+          >
+            Create another token
+          </Button>
+        </div>
+      ) : (
+        <div className="flex gap-2">
+          <Input
+            aria-label="Token name"
+            className="min-w-0 flex-1"
+            maxLength={80}
+            onChange={(event) => setName(event.target.value)}
+            value={name}
+          />
+          <Button
+            disabled={loading || busy || !name.trim()}
+            onClick={() => {
+              if (createTokenStarted.current) return;
+              revokeTokenMutation.reset();
+              createTokenStarted.current = true;
+              createTokenMutation.mutate(name);
+            }}
+          >
+            Create token
+          </Button>
+        </div>
+      )}
+
+      {displayedError ? <InlineError>{displayedError}</InlineError> : null}
+
+      <Card className="mb-0" variant="raised">
+        {loading ? (
+          <p className="m-0 p-5 text-sm text-dashboard-text-muted">
+            Loading API tokens…
+          </p>
+        ) : tokens.length === 0 ? (
+          <p className="m-0 p-5 text-sm text-dashboard-text-muted">
+            No active API tokens.
+          </p>
+        ) : (
+          <ul className="m-0 list-none divide-y divide-dashboard-border-subtle p-0">
+            {tokens.map((token) => (
+              <li className="flex items-center gap-3 px-5 py-4" key={token.id}>
+                <KeyRound className="text-dashboard-accent" size={16} />
+                <div className="min-w-0 flex-1">
+                  <p className="m-0 truncate text-sm font-semibold">
+                    {token.name}
+                  </p>
+                  <p className="mt-1 mb-0 text-xs text-dashboard-text-muted">
+                    Ends in {token.tokenSuffix} · Expires{" "}
+                    {new Date(token.expiresAt).toLocaleDateString()}
+                  </p>
+                </div>
+                <Button
+                  aria-label={`Revoke ${token.name}`}
+                  disabled={busy}
+                  onClick={() => {
+                    if (createTokenMutation.isError) {
+                      createTokenMutation.reset();
+                    }
+                    revokeTokenMutation.mutate(token);
+                  }}
+                  size="icon"
+                  variant="danger"
+                  type="button"
+                >
+                  <Trash2 size={16} />
+                </Button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </Card>
+    </SettingsPageLayout>
+  );
+}