@sentry/junior-dashboard 0.267.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/mock-reporting/fixtures.ts

@@ -602,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.",
+        },
+      }),
     ],
   });
 }

package/src/mock-reporting/routes.ts

@@ -28,6 +28,9 @@ import {
   personalSpendReportSchema,
   personParamsSchema,
   pluginOperationalReportFeedSchema,
+  reviewItemCountSchema,
+  reviewItemListSchema,
+  reviewItemWaitingConversationsSchema,
   automationExecutionListSchema,
   automationListSchema,
   automationParamsSchema,
@@ -294,6 +297,23 @@ export function createMockReportingApi(): Hono<{
     }
     return errorResponse("Attachment not found.", 404);
   });
+  // Mock reporting has no Review items. Answer the reads here so the
+  // dashboard does not query a database that has no review item tables.
+  app.get("/review-items", () =>
+    jsonResponse(reviewItemListSchema, { items: [] }),
+  );
+  app.get("/review-items/count", () =>
+    jsonResponse(reviewItemCountSchema, { mine: 0 }),
+  );
+  app.get("/review-items/waiting-conversations", () =>
+    jsonResponse(reviewItemWaitingConversationsSchema, { conversationIds: [] }),
+  );
+  app.get("/review-items/:id", () =>
+    errorResponse("Review item not found.", 404),
+  );
+  app.post("/review-items/:id/actions", () =>
+    errorResponse("Review item not found.", 404),
+  );
   app.get("/automations", (c) => {
     const report = readMockAutomationList();
     return jsonResponse(

package/src/shell.ts

@@ -131,6 +131,9 @@ export function dashboardPagePaths(
       nested: true,
       path: basePath === "/" ? "/conversations" : `${basePath}/conversations`,
     },
+    {
+      path: basePath === "/" ? "/review" : `${basePath}/review`,
+    },
     {
       nested: true,
       path: basePath === "/" ? "/people" : `${basePath}/people`,