@sentry/junior-dashboard 0.266.0 → 0.268.0

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

@@ -0,0 +1,165 @@
+import { useState } from "react";
+import {
+  normalizeUserInputAnswer,
+  type ReviewItemActionBody,
+  type ReviewItemPayload,
+} from "@sentry/junior/api/schema";
+
+import { InlineError } from "../components/InlineError";
+import { UserInputForm } from "../components/UserInputForm";
+import { Button } from "../components/ui/button";
+import { TranscriptMarkdown } from "../conversations/TranscriptMarkdown";
+import { formatRelativeTime } from "../format";
+import { DashboardApiError } from "../http";
+import { useReviewItemAction } from "./queries";
+
+function personLabel(person: { displayName?: string; email: string }) {
+  return person.displayName ?? person.email;
+}
+
+function actionError(error: unknown): string {
+  if (error instanceof DashboardApiError && error.apiError) {
+    return error.apiError;
+  }
+  return "Could not save this action. Try again.";
+}
+
+/** Show the submitted answer as one line for each answered field. */
+function AnswerSummary(props: {
+  answer: NonNullable<ReviewItemPayload["answer"]>;
+  request: NonNullable<ReviewItemPayload["request"]>;
+}) {
+  const answer = normalizeUserInputAnswer(props.request, props.answer);
+  const rows = props.request.fields.flatMap((field) => {
+    const values = answer.values[field.id];
+    return values?.length
+      ? [{ label: field.label, value: values.join(", ") }]
+      : [];
+  });
+  if (answer.other) rows.push({ label: "Other", value: answer.other });
+  return (
+    <dl className="m-0 grid gap-2 rounded-md bg-dashboard-fill-soft p-3">
+      {rows.map((row) => (
+        <div className="grid gap-0.5" key={row.label}>
+          <dt className="text-xs font-medium text-dashboard-text-muted">
+            {row.label}
+          </dt>
+          <dd className="m-0 whitespace-pre-wrap break-words">{row.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+/** Show who closed an item, when, and the submitted answer. */
+function ClosedSummary(props: { item: ReviewItemPayload }) {
+  const { item } = props;
+  const who = item.closedBy ? personLabel(item.closedBy) : "An agent";
+  const what = item.status === "dismissed" ? "dismissed" : "closed";
+  return (
+    <div className="grid gap-2 text-sm">
+      <p className="m-0 text-dashboard-text-muted">
+        {who} {what} this {formatRelativeTime(item.closedAt)}.
+      </p>
+      {item.closeReason ? (
+        <p className="m-0 text-dashboard-text-muted">{item.closeReason}</p>
+      ) : null}
+      {item.request && item.answer ? (
+        <AnswerSummary answer={item.answer} request={item.request} />
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Show the actions that the viewer can take on one Review item, or how it
+ * closed. The review desk, the transcript card, and the side panel use it.
+ */
+export function ReviewItemActions(props: { item: ReviewItemPayload }) {
+  const { item } = props;
+  const action = useReviewItemAction();
+  const [error, setError] = useState<string>();
+
+  if (item.status !== "open") return <ClosedSummary item={item} />;
+  if (!item.canAct) {
+    return (
+      <p className="m-0 text-sm text-dashboard-text-muted">
+        Only an assignee can act on this item.
+      </p>
+    );
+  }
+
+  async function run(body: ReviewItemActionBody) {
+    setError(undefined);
+    try {
+      await action.mutateAsync({ body, id: item.id });
+    } catch (failure) {
+      setError(actionError(failure));
+      throw failure;
+    }
+  }
+
+  // Take and Dismiss are quiet, so the answer or Done stays the main action.
+  const secondaryActions = (
+    <>
+      {item.canTake ? (
+        <Button
+          disabled={action.isPending}
+          onClick={() => void run({ action: "take" }).catch(() => {})}
+          variant="quiet"
+        >
+          Take
+        </Button>
+      ) : null}
+      <Button
+        disabled={action.isPending}
+        onClick={() => void run({ action: "dismiss" }).catch(() => {})}
+        variant="quiet"
+      >
+        Dismiss
+      </Button>
+    </>
+  );
+
+  return (
+    <div className="grid gap-3">
+      {item.kind === "action" && item.request ? (
+        <div className="text-sm">
+          <div className="font-medium">
+            <TranscriptMarkdown text={item.request.question} />
+          </div>
+          <UserInputForm
+            onSubmit={(answer) =>
+              run({
+                action: "submit",
+                answer: {
+                  values: answer.values,
+                  ...(answer.other ? { other: answer.other } : undefined),
+                },
+              })
+            }
+            request={item.request}
+            requestId={item.id}
+            secondaryActions={secondaryActions}
+          />
+        </div>
+      ) : (
+        <div className="flex flex-wrap items-center gap-2">
+          {item.kind === "notice" ? (
+            <Button
+              disabled={action.isPending}
+              onClick={() => void run({ action: "complete" }).catch(() => {})}
+              variant="primary"
+            >
+              Done
+            </Button>
+          ) : null}
+          <div className="flex flex-wrap gap-1 sm:ml-auto">
+            {secondaryActions}
+          </div>
+        </div>
+      )}
+      {error ? <InlineError>{error}</InlineError> : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { Link } from "react-router";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+import { StatusChip } from "../components/StatusChip";
+import { TranscriptMarkdown } from "../conversations/TranscriptMarkdown";
+import { ReviewItemActions } from "./ReviewItemActions";
+import { useReviewItemData } from "./queries";
+import { reviewItemPath, reviewItemStatusLabel } from "./reviewItemFormat";
+
+/**
+ * Show one Review item as a card: its title, status, description, and the
+ * viewer's actions, with a link to the review desk.
+ */
+export function ReviewItemCard(props: { item: ReviewItemPayload }) {
+  const { item } = props;
+  return (
+    <section
+      aria-label={`Review item: ${item.title}`}
+      className="grid gap-3 rounded-lg border border-violet-300/25 bg-violet-300/[0.06] p-3 font-sans text-sm text-dashboard-text"
+    >
+      <header className="flex min-w-0 items-baseline justify-between gap-3">
+        <span className="min-w-0 truncate font-medium">{item.title}</span>
+        <StatusChip
+          className="shrink-0"
+          size="compact"
+          tone={item.status === "open" ? "accent" : "neutral"}
+        >
+          {reviewItemStatusLabel(item)}
+        </StatusChip>
+      </header>
+      <TranscriptMarkdown text={item.body} />
+      <ReviewItemActions item={item} />
+      <Link className="w-fit text-xs" to={reviewItemPath(item.id)}>
+        Open on the review desk
+      </Link>
+    </section>
+  );
+}
+
+/**
+ * Show the card of the Review item that a tool call added. It shows nothing
+ * when the viewer cannot see the item.
+ */
+export function TranscriptReviewItemCard(props: { itemId: string }) {
+  const item = useReviewItemData(props.itemId).data;
+  return item ? <ReviewItemCard item={item} /> : null;
+}

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

@@ -0,0 +1,115 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+import { StatusChip } from "../components/StatusChip";
+import { TranscriptMarkdown } from "../conversations/TranscriptMarkdown";
+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);
+  return (
+    <article className="grid min-w-0 content-start gap-5">
+      <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>
+          <StatusChip
+            className="mt-1 shrink-0"
+            size="compact"
+            tone={item.status === "open" ? "accent" : "neutral"}
+          >
+            {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>
+      <TranscriptMarkdown 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>
+  );
+}

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

@@ -0,0 +1,164 @@
+import { useMemo } from "react";
+import {
+  keepPreviousData,
+  useMutation,
+  useQueries,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import {
+  automationListSchema,
+  conversationDetailReportSchema,
+  reviewItemCountSchema,
+  reviewItemListSchema,
+  reviewItemSchema,
+  reviewItemWaitingConversationsSchema,
+  type ReviewItemActionBody,
+} from "@sentry/junior/api/schema";
+
+import { conversationDetailTitle } from "../format";
+import { fetchDashboardJson, post } from "../http";
+
+/** Review desk views. Each shows open items, or archived ones. */
+export const REVIEW_DESK_VIEWS = ["mine", "everyone", "all"] as const;
+export type ReviewDeskView = (typeof REVIEW_DESK_VIEWS)[number];
+
+const REVIEW_ITEMS_QUERY_KEY = ["dashboard", "review-items"] as const;
+const COUNT_REFRESH_MS = 60_000;
+
+/** List the Review items that the viewer can see in one view. */
+export function useReviewItemsData(filters: {
+  archived: boolean;
+  conversationId?: string;
+  q?: string;
+  view: ReviewDeskView;
+}) {
+  const params = new URLSearchParams({ view: filters.view });
+  if (filters.archived) params.set("archived", "true");
+  if (filters.conversationId) {
+    params.set("conversationId", filters.conversationId);
+  }
+  if (filters.q) params.set("q", filters.q);
+  const search = params.toString();
+  return useQuery({
+    queryKey: [...REVIEW_ITEMS_QUERY_KEY, "list", search],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        reviewItemListSchema,
+        `/api/review-items?${search}`,
+        signal,
+      ),
+    placeholderData: keepPreviousData,
+    retry: false,
+  });
+}
+
+/** Read one Review item, for a link to an item outside the current list. */
+export function useReviewItemData(id: string | undefined) {
+  return useQuery({
+    enabled: Boolean(id),
+    queryKey: [...REVIEW_ITEMS_QUERY_KEY, "detail", id],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        reviewItemSchema,
+        `/api/review-items/${encodeURIComponent(id!)}`,
+        signal,
+      ),
+    retry: false,
+  });
+}
+
+/**
+ * Read the titles of the Conversations linked to an item. Each read asks for
+ * one event only. A Conversation that the viewer cannot read has no title.
+ */
+export function useLinkedConversationTitles(
+  conversationIds: readonly string[],
+): (string | undefined)[] {
+  return useQueries({
+    queries: conversationIds.map((conversationId) => ({
+      queryKey: ["dashboard", "conversation-title", conversationId],
+      queryFn: async ({ signal }: { signal: AbortSignal }) =>
+        conversationDetailTitle(
+          await fetchDashboardJson(
+            conversationDetailReportSchema,
+            `/api/conversations/${encodeURIComponent(conversationId)}?limit=1`,
+            signal,
+          ),
+        ) ?? null,
+      retry: false,
+      staleTime: 5 * 60_000,
+    })),
+  }).map((query) => query.data ?? undefined);
+}
+
+/** Count the open Review items assigned to the viewer, for the nav. */
+export function useReviewItemCountData(enabled: boolean) {
+  return useQuery({
+    enabled,
+    queryKey: [...REVIEW_ITEMS_QUERY_KEY, "count"],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        reviewItemCountSchema,
+        "/api/review-items/count",
+        signal,
+      ),
+    refetchInterval: COUNT_REFRESH_MS,
+    retry: false,
+  });
+}
+
+/**
+ * List the viewer's blocked Automations. They show on the review desk, but
+ * their state stays derived from Automation status.
+ */
+export function useBlockedAutomationsData(enabled: boolean) {
+  return useQuery({
+    enabled,
+    queryKey: ["dashboard", "automations", "scope=mine&state=blocked"],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        automationListSchema,
+        "/api/automations?scope=mine&state=blocked&pageSize=100",
+        signal,
+      ),
+    retry: false,
+  });
+}
+
+/** Take, submit, complete, or dismiss one Review item. */
+export function useReviewItemAction() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (args: { body: ReviewItemActionBody; id: string }) =>
+      post(
+        reviewItemSchema,
+        `/api/review-items/${encodeURIComponent(args.id)}/actions`,
+        args.body,
+      ),
+    onSettled: () =>
+      queryClient.invalidateQueries({ queryKey: REVIEW_ITEMS_QUERY_KEY }),
+  });
+}
+
+const NO_CONVERSATIONS: ReadonlySet<string> = new Set();
+
+/**
+ * Return the Conversations that wait on the viewer. Today only the review
+ * desk sets this: an open linked item assigned to the viewer or Everyone.
+ */
+export function useWaitingConversationIds(): ReadonlySet<string> {
+  const query = useQuery({
+    queryKey: [...REVIEW_ITEMS_QUERY_KEY, "waiting-conversations"],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        reviewItemWaitingConversationsSchema,
+        "/api/review-items/waiting-conversations",
+        signal,
+      ),
+    refetchInterval: COUNT_REFRESH_MS,
+    retry: false,
+  });
+  const ids = query.data?.conversationIds;
+  return useMemo(() => (ids ? new Set(ids) : NO_CONVERSATIONS), [ids]);
+}

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

@@ -0,0 +1,61 @@
+import { z } from "zod";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+/** Return the review desk route that selects one item. */
+export function reviewItemPath(id: string): string {
+  return `/review?item=${encodeURIComponent(id)}`;
+}
+
+/** 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") {
+    return item.kind === "action" ? "Needs an answer" : "Notice";
+  }
+  return item.status === "done" ? "Done" : "Dismissed";
+}
+
+/** Name the assignees of an item in one short line. */
+export function assigneeLabel(item: ReviewItemPayload): string {
+  const names = item.assignees.map(
+    (person) => person.displayName ?? person.email,
+  );
+  if (item.assignedToEveryone) names.unshift("Everyone");
+  return names.length > 0 ? names.join(", ") : "Unassigned";
+}
+
+const ADD_REVIEW_ITEM_TOOL_NAME = "addReviewItem";
+const executeToolInputSchema = z.object({ tool_name: z.string() });
+const addedItemSchema = z.object({ item: z.object({ id: z.string().min(1) }) });
+
+/** Read the item id from a tool result, which can be JSON text. */
+function addedItemId(output: unknown): string | undefined {
+  let value = output;
+  if (typeof output === "string") {
+    try {
+      value = JSON.parse(output);
+    } catch {
+      return undefined;
+    }
+  }
+  return addedItemSchema.safeParse(value).data?.item.id;
+}
+
+/**
+ * Return the id of the Review item that one completed tool call added. The
+ * agent calls `addReviewItem` directly or through `executeTool`. Returns
+ * undefined when the transcript hides the tool result.
+ */
+export function reviewItemIdFromToolCall(call: {
+  input?: unknown;
+  name: string;
+  output?: unknown;
+  status: string;
+}): string | undefined {
+  if (call.status !== "completed") return undefined;
+  const toolName =
+    call.name === "executeTool"
+      ? executeToolInputSchema.safeParse(call.input).data?.tool_name
+      : call.name;
+  if (toolName !== ADD_REVIEW_ITEM_TOOL_NAME) return undefined;
+  return addedItemId(call.output);
+}

package/src/client/types.ts

@@ -1,6 +1,7 @@
 import type { ObjectType } from "@sentry/junior-plugin-api";
 import type { BundledLanguage } from "shiki/bundle/web";
 import type {
+  InputImage,
   MessageAttachment,
   MessageCard,
   PluginOperationalReportFeed,
@@ -151,6 +152,8 @@ export type TranscriptViewMessage = {
   failureReason?: ConversationTurnFailureReason;
   sentryEventUrl?: string;
   attachments?: MessageAttachment[];
+  /** Local images of a pending send that the server has not stored yet. */
+  images?: InputImage[];
   parts: TranscriptViewPart[];
   role: "assistant" | "system" | "tool" | "user";
   source?: "slack" | "web";

package/src/mock-reporting/fixtures.ts

@@ -572,7 +572,16 @@ function activeConversation(nowMs: number): ConversationDetailReport {
         type: "message",
         messageId: "active-user-followup",
         role: "user",
-        text: "Compare the pre/post deploy spans next.",
+        // Quoted reply keeps blockquote and nested-list rendering in visual QA.
+        text: [
+          "> error volume is flat, so this looks like slow path not hard fail",
+          "",
+          "Agreed. Compare the pre/post deploy spans next:",
+          "1. `checkout.complete` p95",
+          "   - stable hosts",
+          "   - canary hosts",
+          "2. ~~error rate~~ serializer span time",
+        ].join("\n"),
       }),
       reportEvent(8, iso(Date.parse(startedAt), 42_000), {
         type: "turn_lifecycle",
@@ -593,6 +602,16 @@ function activeConversation(nowMs: number): ConversationDetailReport {
           },
         ],
       }),
+      reportEvent(10, iso(Date.parse(startedAt), 46_000), {
+        type: "turn_context",
+        turnId: "active-turn",
+        pluginName: "junior",
+        kind: "user_customization",
+        version: 1,
+        content: {
+          text: "Keep replies short and simple.\nLead with the answer, then the evidence.",
+        },
+      }),
     ],
   });
 }
@@ -1451,7 +1470,7 @@ function eventAutomationRunConversation(
             "This is a task, not a message from a person.",
             "",
             "About: Issue · ACME-42",
-            'Created by: <@U123>. "Me" and "my" in the instructions mean this person: mention them in the message. If the instructions do not say "me" or "my", do not mention this person.',
+            'Created by: <@U123>. This person is the Automation creator. "The Automation creator", "me", and "my" in the instructions mean this person. Where the instructions refer to this person, write this mention in the message. If they do not, do not mention this person.',
             "Instructions: Summarize the closed issue",
             "",
             "Trusted summary: ACME-42 Checkout fails for saved cards was closed by Morgan Lee.",
@@ -1944,6 +1963,14 @@ export function readMockConversationPendingMessages(
             role: "user" as const,
             source: "web" as const,
             text: "Keep the reply in Junior. I will paste the dashboard link next.",
+            attachments: [
+              {
+                id: "qa-chart-png",
+                filename: "queued-chart.png",
+                contentType: "image/png",
+                bytes: 18211,
+              },
+            ],
           },
           {
             actorIdentity: actor("dev@example.com", "Morgan Lee", "morgan"),
@@ -1978,6 +2005,28 @@ export function readMockConversationPendingMessages(
             source: "web" as const,
             text: "Fifth queued message.",
           },
+          {
+            actorIdentity: actor("dev@example.com", "Morgan Lee", "morgan"),
+            createdAt: iso(nowMs, -800),
+            delivery: "defer" as const,
+            inboundMessageId: `${conversationId}:pending-sixth`,
+            messageId: `${conversationId}:pending-sixth`,
+            receivedAt: iso(nowMs, -400),
+            role: "user" as const,
+            source: "web" as const,
+            text: "Sixth queued message.",
+          },
+          {
+            actorIdentity: actor("dev@example.com", "Morgan Lee", "morgan"),
+            createdAt: iso(nowMs, -600),
+            delivery: "defer" as const,
+            inboundMessageId: `${conversationId}:pending-seventh`,
+            messageId: `${conversationId}:pending-seventh`,
+            receivedAt: iso(nowMs, -300),
+            role: "user" as const,
+            source: "web" as const,
+            text: "Seventh queued message.",
+          },
         ]
       : [];
 
@@ -2949,6 +2998,7 @@ function mockTasks(): AutomationSummary[] {
       nextRunAt: "2026-08-10T16:00:00.000Z",
       credentialMode: "creator",
       ownedByViewer: true,
+      costUsd: { 1: 0.42, 7: 1.02, 30: 4.18, 90: 16.4 },
       runs: { 1: 1, 7: 3, 30: 12, 90: 48 },
       timezone: "America/Los_Angeles",
       schedule: "Every Monday at 9:00 AM",
@@ -2980,6 +3030,7 @@ function mockTasks(): AutomationSummary[] {
       credentialMode: "creator",
       ownedByViewer: true,
       resource: "Issue · ACME-42",
+      costUsd: { 1: 0, 7: 0.12, 30: 0.48, 90: 0.84 },
       runs: { 1: 0, 7: 1, 30: 4, 90: 7 },
       source: "github",
       outcomes: [],
@@ -3008,6 +3059,7 @@ function mockTasks(): AutomationSummary[] {
       credentialMode: "creator",
       ownedByViewer: false,
       resource: "Incident · INC-17",
+      costUsd: { 1: 0, 7: 0, 30: 0, 90: 0 },
       runs: { 1: 0, 7: 0, 30: 0, 90: 0 },
       source: "pagerduty",
       outcomes: [