@sentry/junior-dashboard 0.267.0 → 0.269.0

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

@@ -0,0 +1,297 @@
+import { Archive } from "lucide-react";
+import { useId, type ReactNode } from "react";
+import { Link, useSearchParams } from "react-router";
+import type {
+  AutomationSummary,
+  ReviewItemPayload,
+} from "@sentry/junior/api/schema";
+
+import { InlineError } from "../components/InlineError";
+import { LoadMorePagination } from "../components/Pagination";
+import { SearchInput } from "../components/SearchInput";
+import { StatusChip } from "../components/StatusChip";
+import { Card } from "../components/layout/Card";
+import { PageHeader } from "../components/layout/PageHeader";
+import { PageLayout } from "../components/layout/PageLayout";
+import { Skeleton } from "../components/ui/skeleton";
+import { automationPath, formatRelativeTime } from "../format";
+import { pathWithSearch, useDebouncedSearchParam } from "../searchParams";
+import { cn } from "../styles";
+import { ReviewItemDetail } from "./ReviewItemDetail";
+import {
+  useBlockedAutomationsData,
+  useReviewItemData,
+  useReviewItemsData,
+} from "./queries";
+import {
+  assigneeLabel,
+  reviewItemPath,
+  reviewItemStatusLabel,
+} from "./reviewItemFormat";
+
+const rowClass =
+  "grid gap-0.5 rounded-md px-3 py-2 text-inherit no-underline transition-colors";
+
+// The list and the detail are already cards, so an empty state is plain
+// text, not a second box.
+function EmptyMessage(props: { children: ReactNode }) {
+  return (
+    <p className="m-0 px-4 py-8 text-center text-sm text-dashboard-text-muted">
+      {props.children}
+    </p>
+  );
+}
+
+function ListGroup(props: {
+  children: ReactNode;
+  className?: string;
+  icon?: ReactNode;
+  title: string;
+}) {
+  const headingId = useId();
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("grid gap-1", props.className)}
+    >
+      <h2
+        id={headingId}
+        className="m-0 flex items-center gap-1.5 px-3 font-sans text-xs font-medium text-dashboard-text-muted"
+      >
+        {props.icon}
+        {props.title}
+      </h2>
+      <ul className="m-0 grid list-none gap-0.5 p-0">{props.children}</ul>
+    </section>
+  );
+}
+
+function ItemRow(props: {
+  item: ReviewItemPayload;
+  searchParams: URLSearchParams;
+  selected: boolean;
+}) {
+  const { item } = props;
+  const closed = item.status !== "open";
+  const unassigned = !item.assignedToEveryone && item.assignees.length === 0;
+  return (
+    <li>
+      <Link
+        aria-current={props.selected ? "true" : undefined}
+        className={cn(
+          rowClass,
+          props.selected
+            ? "bg-dashboard-accent/[0.08]"
+            : "hover:bg-dashboard-fill-soft",
+        )}
+        replace
+        to={pathWithSearch(reviewItemPath(item.id), props.searchParams)}
+      >
+        <span
+          className={cn(
+            "truncate text-sm font-medium",
+            closed && "text-dashboard-text-muted",
+          )}
+        >
+          {item.title}
+        </span>
+        <span className="flex min-w-0 items-center gap-2 text-xs text-dashboard-text-muted">
+          {closed ? (
+            <StatusChip className="shrink-0" size="compact">
+              {reviewItemStatusLabel(item)}
+            </StatusChip>
+          ) : unassigned ? (
+            <StatusChip size="compact" tone="warning">
+              Unassigned
+            </StatusChip>
+          ) : (
+            <span className="truncate">{assigneeLabel(item)}</span>
+          )}
+          <span className="shrink-0">
+            {formatRelativeTime(item.closedAt ?? item.updatedAt)}
+          </span>
+        </span>
+      </Link>
+    </li>
+  );
+}
+
+function BlockedAutomationRow(props: { automation: AutomationSummary }) {
+  return (
+    <li>
+      <Link
+        className={cn(rowClass, "hover:bg-dashboard-fill-soft")}
+        to={automationPath(props.automation.id)}
+      >
+        <span className="truncate text-sm font-medium">
+          {props.automation.title}
+        </span>
+        <span className="truncate text-xs text-amber-300">
+          {props.automation.statusReason ?? "Blocked"}
+        </span>
+      </Link>
+    </li>
+  );
+}
+
+function ReviewListLoading() {
+  return (
+    <div
+      aria-busy="true"
+      aria-label="Loading review items"
+      className="grid gap-2"
+    >
+      {[0, 1, 2, 3].map((row) => (
+        <div className="grid gap-1.5 px-3 py-2" key={row}>
+          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-3 w-1/3" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Render the review desk: the open Review items that the viewer can see,
+ * with search and the selected item beside the list. A search also finds
+ * archived items, which show in their own group.
+ */
+export function ReviewDeskPage() {
+  const [searchParams] = useSearchParams();
+  const [search, setSearch, q] = useDebouncedSearchParam();
+  const { items: list, moreArchived, query: items } = useReviewItemsData({ q });
+  const showBlocked = !q;
+  const blocked = useBlockedAutomationsData(showBlocked);
+  const selectedId = searchParams.get("item") ?? list[0]?.id;
+  const listed = list.find((item) => item.id === selectedId);
+  // A link can select an item that is not in the current view.
+  const direct = useReviewItemData(listed ? undefined : selectedId);
+  const selected = listed ?? direct.data;
+  const open = list.filter((item) => item.status === "open");
+  const archived = list.filter((item) => item.status !== "open");
+  const actions = open.filter((item) => item.kind === "action");
+  const notices = open.filter((item) => item.kind === "notice");
+  const blockedAutomations = showBlocked
+    ? (blocked.data?.automations ?? [])
+    : [];
+  const empty =
+    items.data && list.length === 0 && blockedAutomations.length === 0;
+
+  return (
+    <PageLayout>
+      <PageHeader
+        description="Items that need a person, and who can act on them."
+        title="Review desk"
+      />
+      <SearchInput
+        label="Search review items"
+        onChange={setSearch}
+        placeholder="Search open and archived items"
+        value={search}
+      />
+      <div className="grid min-w-0 gap-4 lg:grid-cols-[minmax(0,22rem)_minmax(0,1fr)]">
+        <Card
+          className="grid content-start gap-4 py-3 lg:self-start"
+          padding="none"
+        >
+          {items.error && !items.data ? (
+            <InlineError className="px-3">
+              Could not load review items.
+            </InlineError>
+          ) : !items.data ? (
+            <ReviewListLoading />
+          ) : empty ? (
+            <EmptyMessage>
+              {q ? `No items match "${q}".` : "No open items."}
+            </EmptyMessage>
+          ) : (
+            <>
+              {actions.length > 0 ? (
+                <ListGroup title="Needs an answer">
+                  {actions.map((item) => (
+                    <ItemRow
+                      item={item}
+                      key={item.id}
+                      searchParams={searchParams}
+                      selected={item.id === selected?.id}
+                    />
+                  ))}
+                </ListGroup>
+              ) : null}
+              {notices.length > 0 ? (
+                <ListGroup title="Notices">
+                  {notices.map((item) => (
+                    <ItemRow
+                      item={item}
+                      key={item.id}
+                      searchParams={searchParams}
+                      selected={item.id === selected?.id}
+                    />
+                  ))}
+                </ListGroup>
+              ) : null}
+              <LoadMorePagination
+                className="px-3"
+                hasMore={!items.isPlaceholderData && Boolean(items.hasNextPage)}
+                loading={items.isFetchingNextPage}
+                onLoadMore={() => void items.fetchNextPage()}
+              />
+              {items.isFetchNextPageError ? (
+                <InlineError className="px-3 text-center">
+                  Could not load more items. Try again.
+                </InlineError>
+              ) : null}
+              {archived.length > 0 ? (
+                <ListGroup
+                  className={
+                    open.length > 0
+                      ? "border-t border-dashboard-border-subtle pt-3"
+                      : undefined
+                  }
+                  icon={<Archive aria-hidden="true" size={13} />}
+                  title="Archived"
+                >
+                  {archived.map((item) => (
+                    <ItemRow
+                      item={item}
+                      key={item.id}
+                      searchParams={searchParams}
+                      selected={item.id === selected?.id}
+                    />
+                  ))}
+                  {moreArchived ? (
+                    <li className="px-3 py-1 text-xs text-dashboard-text-muted">
+                      Only the newest archived matches show. Add words to the
+                      search to find older items.
+                    </li>
+                  ) : null}
+                </ListGroup>
+              ) : null}
+              {blockedAutomations.length > 0 ? (
+                <ListGroup title="Blocked Automations">
+                  {blockedAutomations.map((automation) => (
+                    <BlockedAutomationRow
+                      automation={automation}
+                      key={automation.id}
+                    />
+                  ))}
+                </ListGroup>
+              ) : null}
+            </>
+          )}
+        </Card>
+        <Card className="min-w-0" padding="md">
+          {selected ? (
+            // A key per item resets the answer form and its send lock, so
+            // one item's answer can never reach another item.
+            <ReviewItemDetail item={selected} key={selected.id} />
+          ) : direct.error ? (
+            <InlineError>Review item not found.</InlineError>
+          ) : (
+            <EmptyMessage>Select an item to see it here.</EmptyMessage>
+          )}
+        </Card>
+      </div>
+    </PageLayout>
+  );
+}

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,123 @@
+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 { 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);
+  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>
+      <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>
+  );
+}