@sentry/junior-dashboard 0.270.0 → 0.271.0

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,44 @@ export function reviewItemWaitsForAnswer(item: ReviewItemPayload): boolean {
     item.canAct
   );
 }
+
+/** The Review items of the inbox, in the groups and order the list shows. */
+export type InboxGroups = {
+  archived: ReviewItemPayload[];
+  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 items into inbox groups. Open items show oldest first, so the item
+ * that waited longest is at the top. Archived items keep the API order.
+ */
+export function inboxGroups(items: readonly ReviewItemPayload[]): InboxGroups {
+  const open = items.filter((item) => item.status === "open");
+  return {
+    archived: items.filter((item) => item.status !== "open"),
+    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/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/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>
-  );
-}

package/src/client/pages/PersonalTokensPage.tsx

@@ -1,205 +0,0 @@
-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 { dashboardContainerClass } from "../styles";
-import { getDashboardAgentName } from "../agentName";
-import { useDocumentTitle } from "../documentTitle";
-import { Button } from "../components/ui/button";
-import { Input } from "../components/ui/input";
-import { InlineError } from "../components/InlineError";
-import { Card } from "../components/layout/Card";
-
-const personalTokensQueryKey = ["dashboard", "personal-tokens"] as const;
-
-/** Create and revoke personal API tokens for local clients. */
-export function PersonalTokensPage() {
-  useDocumentTitle("API tokens");
-  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 (
-    <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">Personal API Tokens</h1>
-        <p className="mt-2 mb-0 max-w-2xl text-sm text-dashboard-text-muted">
-          Use a token to read {getDashboardAgentName()} APIs from a local agent
-          or script. Tokens expire after 90 days.
-        </p>
-
-        <Card className="mb-0 mt-6" padding="md" variant="raised">
-          {createdToken ? (
-            <div className="mt-5 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="mt-5 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 className="mt-4">{displayedError}</InlineError>
-          ) : null}
-
-          <div className="mt-5 space-y-2">
-            {loading ? (
-              <p className="text-sm text-dashboard-text-muted">
-                Loading API tokens…
-              </p>
-            ) : tokens.length === 0 ? (
-              <p className="text-sm text-dashboard-text-muted">
-                No active API tokens.
-              </p>
-            ) : (
-              tokens.map((token) => (
-                <div
-                  className="flex items-center gap-3 rounded-md border border-dashboard-border-strong p-3"
-                  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>
-                </div>
-              ))
-            )}
-          </div>
-        </Card>
-      </section>
-    </div>
-  );
-}

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

@@ -1,12 +0,0 @@
-# System pages
-
-- The URL selects a Workspace recipe: `/system/workspaces/:id` opens
-  `WorkspaceDetails` beside the list.
-- The list report has no snapshots. The detail read adds the current
-  snapshot. Keep snapshot loading and errors inside the Snapshot row.
-- Edit and Delete live in the panel header. List rows have no actions.
-- `WorkspaceDeleteDialog` keeps errors in the dialog and blocks dismissal
-  while the request runs.
-- Close and Escape return focus to the selected row.
-
-Browser coverage: `e2e/system.spec.ts`.

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

@@ -1,123 +0,0 @@
-import { Archive } from "lucide-react";
-import type { ReactNode } from "react";
-import { Link } from "react-router";
-import type { ReviewItemPayload } from "@sentry/junior/api/schema";
-
-import { StatusChip } from "../components/StatusChip";
-import { DisplayText } from "../display-text/DisplayText";
-import { conversationPath } from "../conversations/conversationRoutes";
-import { automationPath, formatRelativeTime } from "../format";
-import { ReviewItemActions } from "./ReviewItemActions";
-import { useLinkedConversationTitles } from "./queries";
-import { assigneeLabel, reviewItemStatusLabel } from "./reviewItemFormat";
-
-function Fact(props: { children: ReactNode; label: string }) {
-  return (
-    <div className="grid content-start gap-0.5">
-      <dt className="text-xs font-medium text-dashboard-text-muted">
-        {props.label}
-      </dt>
-      <dd className="m-0 min-w-0 break-words text-sm">{props.children}</dd>
-    </div>
-  );
-}
-
-/** Show one Review item with its facts and the viewer's actions. */
-export function ReviewItemDetail(props: { item: ReviewItemPayload }) {
-  const { item } = props;
-  const subject = item.subject;
-  const conversationTitles = useLinkedConversationTitles(item.conversationIds);
-  const closed = item.status !== "open";
-  return (
-    <article className="grid min-w-0 content-start gap-5">
-      {closed ? (
-        // Search mixes open and archived items, so a closed item must be
-        // easy to tell apart at the top of the detail.
-        <p className="m-0 flex items-center gap-2 rounded-md bg-dashboard-fill-soft px-3 py-2 text-xs font-medium text-dashboard-text-muted">
-          <Archive aria-hidden="true" size={14} />
-          Archived · {reviewItemStatusLabel(item)}
-        </p>
-      ) : null}
-      <header className="grid gap-1.5">
-        <div className="flex min-w-0 items-start justify-between gap-3">
-          <h2 className="m-0 min-w-0 break-words font-display text-xl font-medium leading-snug">
-            {item.title}
-          </h2>
-          {closed ? null : (
-            <StatusChip className="mt-1 shrink-0" size="compact" tone="accent">
-              {reviewItemStatusLabel(item)}
-            </StatusChip>
-          )}
-        </div>
-        <p className="m-0 text-xs text-dashboard-text-muted">
-          Added {formatRelativeTime(item.createdAt)}
-          {item.visibility === "private" ? " · Private" : null}
-        </p>
-      </header>
-      <DisplayText text={item.body} />
-      <section
-        aria-label={item.status === "open" ? "Actions" : "Outcome"}
-        className="border-t border-dashboard-border-subtle pt-5"
-      >
-        <ReviewItemActions item={item} />
-      </section>
-      <dl className="m-0 grid gap-4 border-t border-dashboard-border-subtle pt-5 sm:grid-cols-2">
-        <Fact label="Assignees">
-          {item.assignees.length > 0 || item.assignedToEveryone ? (
-            assigneeLabel(item)
-          ) : (
-            <StatusChip size="compact" tone="warning">
-              Unassigned
-            </StatusChip>
-          )}
-        </Fact>
-        {subject ? (
-          <Fact label="Subject">
-            {subject.url ? (
-              <a href={subject.url} rel="noreferrer" target="_blank">
-                {subject.title ?? subject.url}
-              </a>
-            ) : (
-              (subject.title ?? subject.id)
-            )}
-          </Fact>
-        ) : null}
-        <Fact label="Added by">
-          <Link to={conversationPath(item.addedByConversationId)}>
-            Conversation
-          </Link>
-          {item.automationId ? (
-            <>
-              {" · "}
-              <Link to={automationPath(item.automationId)}>Automation</Link>
-            </>
-          ) : null}
-        </Fact>
-        {item.conversationIds.length > 0 ? (
-          <Fact label="Linked Conversations">
-            <ul className="m-0 grid list-none gap-0.5 p-0">
-              {item.conversationIds.map((conversationId, index) => {
-                const title = conversationTitles[index];
-                return (
-                  <li
-                    className={
-                      title ? "truncate" : "truncate font-mono text-xs"
-                    }
-                    key={conversationId}
-                  >
-                    <Link
-                      title={conversationId}
-                      to={conversationPath(conversationId)}
-                    >
-                      {title ?? conversationId}
-                    </Link>
-                  </li>
-                );
-              })}
-            </ul>
-          </Fact>
-        ) : null}
-      </dl>
-    </article>
-  );
-}