@sentry/junior-dashboard 0.270.0 → 0.272.0

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

package/src/client/pages/{SettingsPage.tsx → settings/SettingsPage.tsx}

@@ -8,17 +8,21 @@ import {
 import {
   dashboardIdentitySchema,
   type DashboardIdentity,
-} from "../../api/schema";
-import { Button } from "../components/ui/button";
-import { Input } from "../components/ui/input";
-import { Textarea } from "../components/ui/textarea";
-import { Field, FieldDescription, FieldLabel } from "../components/ui/field";
-import { InlineError } from "../components/InlineError";
-import { Card } from "../components/layout/Card";
-import { useDocumentTitle } from "../documentTitle";
-import { DashboardApiError, fetchDashboardJson, patch, put } from "../http";
-import { dashboardContainerClass } from "../styles";
-import type { DashboardCoreData } from "../types";
+} from "../../../api/schema";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { Textarea } from "../../components/ui/textarea";
+import { Field, FieldDescription, FieldLabel } from "../../components/ui/field";
+import { RadioGroup, RadioGroupItem } from "../../components/ui/radio-group";
+import {
+  useConversationStartPosition,
+  type ConversationStartPosition,
+} from "../../conversations/transcriptReadPosition";
+import { InlineError } from "../../components/InlineError";
+import { Card } from "../../components/layout/Card";
+import { DashboardApiError, fetchDashboardJson, patch, put } from "../../http";
+import type { DashboardCoreData } from "../../types";
+import { SettingsPageLayout } from "./SettingsPageLayout";
 
 const dashboardCoreQueryKey = ["dashboard", "core"] as const;
 const userCustomizationQueryKey = ["dashboard", "user-customization"] as const;
@@ -30,7 +34,6 @@ type SettingsPageProps = {
 
 /** Let the signed-in user manage their dashboard profile. */
 export function SettingsPage({ identity }: SettingsPageProps) {
-  useDocumentTitle("Settings");
   const queryClient = useQueryClient();
   const [displayName, setDisplayName] = useState(identity.user.name ?? "");
   useEffect(() => {
@@ -61,52 +64,105 @@ export function SettingsPage({ identity }: SettingsPageProps) {
   }
 
   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">Settings</h1>
-        <p className="mt-2 mb-0 max-w-2xl text-sm text-dashboard-text-muted">
-          Manage your profile and preferences.
-        </p>
+    <SettingsPageLayout
+      description="Manage your profile and preferences."
+      title="General"
+    >
+      <form onSubmit={submit}>
+        <Card className="mb-0" padding="md" variant="raised">
+          <h2 className="m-0 text-lg font-bold">Profile</h2>
+          <Field className="mt-5">
+            <FieldLabel htmlFor="display-name">Display name</FieldLabel>
+            <Input
+              autoComplete="name"
+              id="display-name"
+              maxLength={80}
+              onChange={(event) => {
+                setDisplayName(event.target.value);
+                if (updateProfile.isError || updateProfile.isSuccess) {
+                  updateProfile.reset();
+                }
+              }}
+              value={displayName}
+            />
+            <FieldDescription id="display-name-help">
+              Your display name is shown with your conversations and activity.
+            </FieldDescription>
+          </Field>
+          <div className="mt-5 flex items-center gap-3">
+            <Button disabled={!canSave} type="submit">
+              {updateProfile.isPending ? "Saving…" : "Save changes"}
+            </Button>
+            {updateProfile.isSuccess ? (
+              <p className="m-0 text-sm text-emerald-300">Changes saved.</p>
+            ) : null}
+            {updateProfile.isError ? (
+              <InlineError>
+                Could not save your display name. Try again.
+              </InlineError>
+            ) : null}
+          </div>
+        </Card>
+      </form>
+      <ConversationStartSetting />
+      <CustomizationForm />
+    </SettingsPageLayout>
+  );
+}
 
-        <form className="mt-6" onSubmit={submit}>
-          <Card className="mb-0" padding="md" variant="raised">
-            <h2 className="m-0 text-lg font-bold">Profile</h2>
-            <Field className="mt-5">
-              <FieldLabel htmlFor="display-name">Display name</FieldLabel>
-              <Input
-                autoComplete="name"
-                id="display-name"
-                maxLength={80}
-                onChange={(event) => {
-                  setDisplayName(event.target.value);
-                  if (updateProfile.isError || updateProfile.isSuccess) {
-                    updateProfile.reset();
-                  }
-                }}
-                value={displayName}
-              />
-              <FieldDescription id="display-name-help">
-                Your display name is shown with your conversations and activity.
-              </FieldDescription>
-            </Field>
-            <div className="mt-5 flex items-center gap-3">
-              <Button disabled={!canSave} type="submit">
-                {updateProfile.isPending ? "Saving…" : "Save changes"}
-              </Button>
-              {updateProfile.isSuccess ? (
-                <p className="m-0 text-sm text-emerald-300">Changes saved.</p>
-              ) : null}
-              {updateProfile.isError ? (
-                <InlineError>
-                  Could not save your display name. Try again.
-                </InlineError>
-              ) : null}
-            </div>
-          </Card>
-        </form>
-        <CustomizationForm />
-      </section>
-    </div>
+const startPositionOptions: {
+  description: string;
+  label: string;
+  value: ConversationStartPosition;
+}[] = [
+  {
+    description: "Open at the first new message, below a “New” line.",
+    label: "Where I left off",
+    value: "unread",
+  },
+  {
+    description: "Always open at the newest message.",
+    label: "Latest message",
+    value: "latest",
+  },
+];
+
+/** Let the user choose where a Conversation opens on this browser. */
+function ConversationStartSetting() {
+  const [startPosition, setStartPosition] = useConversationStartPosition();
+  return (
+    <Card className="mt-6 mb-0" padding="md" variant="raised">
+      <fieldset className="m-0 min-w-0 border-0 p-0">
+        <legend className="m-0 p-0 text-lg font-bold">
+          Open conversations at
+        </legend>
+        <p className="mt-1 mb-4 text-sm text-dashboard-text-muted">
+          Junior keeps your place in each conversation on all your devices. This
+          choice applies to this browser.
+        </p>
+        <RadioGroup<ConversationStartPosition>
+          aria-label="Open conversations at"
+          className="grid gap-3"
+          onValueChange={setStartPosition}
+          value={startPosition}
+        >
+          {startPositionOptions.map((option) => (
+            <label
+              className="flex cursor-pointer items-start gap-3"
+              key={option.value}
+            >
+              <RadioGroupItem className="mt-0.5" value={option.value} />
+              <span className="grid gap-0.5">
+                <span className="text-sm font-medium">{option.label}</span>
+                <span className="text-xs text-dashboard-text-muted">
+                  {option.description}
+                </span>
+              </span>
+            </label>
+          ))}
+        </RadioGroup>
+      </fieldset>
+    </Card>
   );
 }
 
@@ -146,9 +202,7 @@ function CustomizationForm() {
   }
   if (savedText === undefined) {
     return customizationQuery.isError ? (
-      <InlineError className="mt-6">
-        Could not load your customization.
-      </InlineError>
+      <InlineError>Could not load your customization.</InlineError>
     ) : null;
   }
   const canSave =
@@ -162,7 +216,7 @@ function CustomizationForm() {
   }
 
   return (
-    <form className="mt-6" onSubmit={submit}>
+    <form onSubmit={submit}>
       <Card className="mb-0" padding="md" variant="raised">
         <h2 className="m-0 text-lg font-bold">Customization</h2>
         <Field className="mt-5">

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

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+
+import { PageHeader } from "../../components/layout/PageHeader";
+import { PageLayout } from "../../components/layout/PageLayout";
+import { SectionIntro } from "../../components/layout/SectionIntro";
+import { SegmentedNav } from "../../components/SegmentedNav";
+
+const settingsNavigationItems = [
+  { end: true, label: "General", to: "/settings" },
+  { label: "API Tokens", to: "/settings/api-tokens" },
+  { label: "Identities", to: "/settings/connections" },
+  { label: "MCP", to: "/settings/mcp" },
+];
+
+/**
+ * Place one Settings section under the Settings heading and its page links.
+ * Settings opens from the profile menu, not the app navigation, so its page
+ * links sit in the page instead of the header chrome.
+ */
+export function SettingsPageLayout(props: {
+  children: ReactNode;
+  description: ReactNode;
+  title: string;
+}) {
+  return (
+    <PageLayout>
+      <div className="grid w-full max-w-3xl min-w-0 gap-8">
+        <PageHeader
+          documentTitle={props.title}
+          navigation={
+            <SegmentedNav
+              ariaLabel="Settings navigation"
+              items={settingsNavigationItems}
+            />
+          }
+          title="Settings"
+        />
+        <section className="grid min-w-0 gap-5">
+          <SectionIntro description={props.description} title={props.title} />
+          {props.children}
+        </section>
+      </div>
+    </PageLayout>
+  );
+}

package/src/client/primaryNav.ts

@@ -51,7 +51,7 @@ export function buildPrimaryNavItems(input: {
           {
             count: input.reviewCount,
             key: "review",
-            label: "Review desk",
+            label: "Inbox",
             to: "/review",
           },
         ]