@sentry/junior-dashboard 0.270.0 → 0.271.0

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

@@ -0,0 +1,253 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import type {
+  AutomationSummary,
+  ReviewItemPayload,
+} from "@sentry/junior/api/schema";
+
+import { InlineError } from "../components/InlineError";
+import { SearchInput } from "../components/SearchInput";
+import { Skeleton } from "../components/ui/skeleton";
+import { ConversationSectionHeading } from "../conversations/ConversationSectionHeading";
+import { automationPath, formatRelativeTime } from "../format";
+import { pathWithSearch } from "../searchParams";
+import { cn } from "../styles";
+import { reviewItemPath } from "./reviewItemFormat";
+
+/** A sidebar group key. The page owns which groups are collapsed. */
+export type InboxGroupKey = "archived" | "blocked" | "fyi" | "needs-you";
+
+type Dot = "accent" | "muted" | "warning" | "closed";
+
+const dotClass: Record<Dot, string> = {
+  accent: "bg-dashboard-accent",
+  closed: "border border-dashboard-text-faint",
+  muted: "bg-dashboard-text-faint",
+  warning: "bg-amber-300",
+};
+
+const rowClass =
+  "block min-w-0 rounded-lg px-3 py-2 text-inherit no-underline transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus";
+
+function InboxRow(props: {
+  dot: Dot;
+  meta: ReactNode;
+  selected?: "always" | "wide";
+  title: string;
+  to: string;
+}) {
+  return (
+    <li>
+      <Link
+        aria-current={props.selected ? "page" : undefined}
+        className={cn(
+          rowClass,
+          props.selected === "always" && "bg-dashboard-surface-active",
+          props.selected === "wide" && "md:bg-dashboard-surface-active",
+        )}
+        to={props.to}
+      >
+        <div className="grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-start gap-x-2">
+          <span
+            aria-hidden="true"
+            className={cn(
+              "mt-[0.4rem] size-2 shrink-0 rounded-full",
+              dotClass[props.dot],
+            )}
+          />
+          <span
+            className={cn(
+              "truncate font-sans text-sm font-medium leading-snug",
+              props.dot === "closed"
+                ? "text-dashboard-text-muted"
+                : "text-dashboard-text",
+            )}
+          >
+            {props.title}
+          </span>
+          <span className="col-start-2 mt-1 truncate font-sans text-xs leading-tight text-dashboard-text-muted">
+            {props.meta}
+          </span>
+        </div>
+      </Link>
+    </li>
+  );
+}
+
+function InboxGroup(props: {
+  children: ReactNode;
+  collapsed: boolean;
+  count: number;
+  first: boolean;
+  label: string;
+  onToggle(): void;
+}) {
+  if (props.count === 0) return null;
+  return (
+    <section aria-label={props.label}>
+      <ConversationSectionHeading
+        className={cn("px-3 pb-1", props.first ? "pt-1" : "pt-3")}
+        collapsed={props.collapsed}
+        count={props.count}
+        label={props.label}
+        onToggle={props.onToggle}
+      />
+      {props.collapsed ? null : (
+        <ul className="m-0 grid list-none gap-0.5 p-0">{props.children}</ul>
+      )}
+    </section>
+  );
+}
+
+function InboxRowsLoading() {
+  return (
+    <div
+      aria-busy="true"
+      aria-live="polite"
+      className="grid gap-0.5"
+      role="status"
+    >
+      <span className="sr-only">Loading review items</span>
+      <Skeleton className="mb-1 ml-3 mt-1.5 h-2.5 w-16" />
+      {[0, 1, 2, 3, 4].map((row) => (
+        <div className="grid gap-1 rounded-lg px-3 py-2" key={row}>
+          <Skeleton className={cn("h-4", row % 2 ? "w-3/5" : "w-4/5")} />
+          <Skeleton className="h-3 w-2/5 opacity-70" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * List the inbox: open items that need the viewer, notices, blocked
+ * Automations, and archived items, each in a group that collapses.
+ */
+export function ReviewDeskSidebar(props: {
+  archived: ReviewItemPayload[];
+  blocked: AutomationSummary[];
+  collapsed: ReadonlySet<InboxGroupKey>;
+  /** Shown under the groups, such as an empty state or load more. */
+  footer?: ReactNode;
+  error: boolean;
+  fyi: ReviewItemPayload[];
+  loading: boolean;
+  needsYou: ReviewItemPayload[];
+  onSearchChange(value: string): void;
+  onToggle(key: InboxGroupKey): void;
+  search: string;
+  searchParams: URLSearchParams;
+  selectedId?: string;
+  /** False while small screens show the list instead of the selected item. */
+  selectedShown: boolean;
+  /** The title of the Conversation that added an item, when it is known. */
+  sourceTitle(item: ReviewItemPayload): string | undefined;
+}) {
+  const groups = [
+    { items: props.needsYou, key: "needs-you", label: "Needs you" },
+    { items: props.fyi, key: "fyi", label: "FYI" },
+  ] as const;
+  const shown = [
+    ...groups.map((group) => group.items.length),
+    props.blocked.length,
+  ];
+  const firstKey = (index: number) =>
+    shown.slice(0, index).every((count) => count === 0);
+  const itemRow = (item: ReviewItemPayload, dot: Dot) => {
+    const source = item.automationId ? "Automation" : props.sourceTitle(item);
+    const age = formatRelativeTime(
+      item.status === "open" ? item.createdAt : item.closedAt,
+    );
+    return (
+      <InboxRow
+        dot={dot}
+        key={item.id}
+        meta={source ? `${source} · ${age}` : age}
+        selected={
+          item.id !== props.selectedId
+            ? undefined
+            : props.selectedShown
+              ? "always"
+              : "wide"
+        }
+        title={item.title}
+        to={pathWithSearch(reviewItemPath(item.id), props.searchParams)}
+      />
+    );
+  };
+
+  return (
+    <aside className="grid h-full min-h-0 grid-rows-[auto_auto_minmax(0,1fr)] overflow-hidden border-r border-dashboard-border bg-dashboard-surface-panel">
+      <div className="px-5 py-3">
+        <h2 className="m-0 font-display text-lg font-medium leading-tight text-dashboard-text">
+          Inbox
+        </h2>
+      </div>
+      <div className="px-4 pb-2">
+        <SearchInput
+          label="Search review items"
+          onChange={props.onSearchChange}
+          placeholder="Search items…"
+          size="compact"
+          value={props.search}
+        />
+      </div>
+      <nav
+        aria-label="Review items"
+        className="min-h-0 overflow-y-auto overscroll-contain px-3 pb-[max(0.5rem,env(safe-area-inset-bottom))]"
+      >
+        {props.error ? (
+          <InlineError className="px-3 py-2">
+            Could not load review items.
+          </InlineError>
+        ) : props.loading ? (
+          <InboxRowsLoading />
+        ) : (
+          <>
+            {groups.map((group, index) => (
+              <InboxGroup
+                collapsed={props.collapsed.has(group.key)}
+                count={group.items.length}
+                first={firstKey(index)}
+                key={group.key}
+                label={group.label}
+                onToggle={() => props.onToggle(group.key)}
+              >
+                {group.items.map((item) =>
+                  itemRow(item, item.kind === "action" ? "accent" : "muted"),
+                )}
+              </InboxGroup>
+            ))}
+            <InboxGroup
+              collapsed={props.collapsed.has("blocked")}
+              count={props.blocked.length}
+              first={firstKey(2)}
+              label="Blocked automations"
+              onToggle={() => props.onToggle("blocked")}
+            >
+              {props.blocked.map((automation) => (
+                <InboxRow
+                  dot="warning"
+                  key={automation.id}
+                  meta={automation.statusReason ?? "Blocked"}
+                  title={automation.title}
+                  to={automationPath(automation.id)}
+                />
+              ))}
+            </InboxGroup>
+            <InboxGroup
+              collapsed={props.collapsed.has("archived")}
+              count={props.archived.length}
+              first={firstKey(3)}
+              label="Archived"
+              onToggle={() => props.onToggle("archived")}
+            >
+              {props.archived.map((item) => itemRow(item, "closed"))}
+            </InboxGroup>
+            {props.footer}
+          </>
+        )}
+      </nav>
+    </aside>
+  );
+}

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

@@ -0,0 +1,108 @@
+import { useEffect, useMemo, useRef, type ReactNode } from "react";
+import type {
+  ConversationReportEvent,
+  ReviewItemPayload,
+} from "@sentry/junior/api/schema";
+
+import { getDashboardAgentName } from "../agentName";
+import { ConversationTranscriptView } from "../conversations/ConversationTranscript";
+import { TranscriptLoading } from "../conversations/TranscriptLoading";
+import { useConversationData } from "../conversations/queries";
+import type { ConversationTranscript } from "../types";
+
+/** Messages before the item that the excerpt shows. */
+const BEFORE_COUNT = 3;
+/** Messages after the item that the excerpt shows, newest last. */
+const AFTER_COUNT = 8;
+
+/**
+ * Split the messages of a Conversation at the time an item was added. Only
+ * messages show: the tool call that added the item would repeat its card.
+ */
+function conversationExcerpt(
+  events: readonly ConversationReportEvent[],
+  itemCreatedAt: string,
+): { after: ConversationReportEvent[]; before: ConversationReportEvent[] } {
+  const askedAt = Date.parse(itemCreatedAt);
+  const messages = events.filter(
+    (event) => event.data.type === "message" && event.data.role !== "system",
+  );
+  return {
+    after: messages
+      .filter((event) => Date.parse(event.createdAt) > askedAt)
+      .slice(-AFTER_COUNT),
+    before: messages
+      .filter((event) => Date.parse(event.createdAt) <= askedAt)
+      .slice(-BEFORE_COUNT),
+  };
+}
+
+function Excerpt(props: {
+  conversation: ConversationTranscript;
+  events: ConversationReportEvent[];
+}) {
+  const conversation = useMemo(
+    () => ({ ...props.conversation, events: props.events }),
+    [props.conversation, props.events],
+  );
+  return <ConversationTranscriptView conversation={conversation} />;
+}
+
+/**
+ * Show the end of the Conversation that added an item, split where the agent
+ * asked. Returns `fallback` when the viewer cannot read its messages.
+ */
+export function ReviewItemContext(props: {
+  fallback: ReactNode;
+  item: ReviewItemPayload;
+}) {
+  const detail = useConversationData(props.item.addedByConversationId);
+  const data = detail.data;
+  const events = data?.events;
+  const excerpt = useMemo(
+    () =>
+      events ? conversationExcerpt(events, props.item.createdAt) : undefined,
+    [events, props.item.createdAt],
+  );
+  // The first page holds the newest events. Load earlier pages until the
+  // page reaches the time the item was added, or history ends.
+  const loadPreviousPageRef = useRef(detail.loadPreviousPage);
+  loadPreviousPageRef.current = detail.loadPreviousPage;
+  const oldest = events?.[0]?.createdAt;
+  const loadEarlier =
+    oldest !== undefined &&
+    Date.parse(oldest) > Date.parse(props.item.createdAt) &&
+    detail.hasPreviousPage &&
+    !detail.isLoadingPreviousPage &&
+    !detail.historyError;
+  useEffect(() => {
+    if (loadEarlier) loadPreviousPageRef.current();
+  }, [loadEarlier, oldest]);
+
+  if (detail.isPending) return <TranscriptLoading />;
+  if (
+    !data ||
+    !excerpt ||
+    data.eventHistory.status !== "available" ||
+    excerpt.before.length + excerpt.after.length === 0
+  ) {
+    return props.fallback;
+  }
+  return (
+    <div className="grid min-w-0 gap-2">
+      {excerpt.before.length > 0 ? (
+        <Excerpt conversation={data} events={excerpt.before} />
+      ) : null}
+      {excerpt.after.length > 0 ? (
+        <>
+          <div className="flex items-center gap-3 py-1 font-sans text-xs font-medium text-dashboard-accent-text">
+            <span className="h-px flex-1 bg-dashboard-accent/30" />
+            New since {getDashboardAgentName()} asked
+            <span className="h-px flex-1 bg-dashboard-accent/30" />
+          </div>
+          <Excerpt conversation={data} events={excerpt.after} />
+        </>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,153 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+import { DetailsPanel } from "../components/DetailsPanel";
+import { StatusChip } from "../components/StatusChip";
+import { DetailsCard } from "../conversations/DetailsList";
+import { conversationPath } from "../conversations/conversationRoutes";
+import { DisplayText } from "../display-text/DisplayText";
+import { automationPath, formatRelativeTime } from "../format";
+import { dashboardInlineLinkClass } from "../styles";
+import { useLinkedConversationTitles } from "./queries";
+import {
+  assigneeLabel,
+  reviewItemStatusLabel,
+  reviewItemSubjectHref,
+} from "./reviewItemFormat";
+
+function Fact(props: { children: ReactNode; label: string }) {
+  return (
+    <>
+      <dt className="text-dashboard-text-muted">{props.label}</dt>
+      <dd className="m-0 min-w-0 break-words text-dashboard-text">
+        {props.children}
+      </dd>
+    </>
+  );
+}
+
+/**
+ * Show the facts of one Review item beside it: its text, assignees, where
+ * it came from, and the Conversations linked to it.
+ */
+export function ReviewItemDetails(props: {
+  item: ReviewItemPayload;
+  onClose(): void;
+}) {
+  const { item } = props;
+  const subject = item.subject;
+  const subjectHref = subject?.url
+    ? reviewItemSubjectHref(subject.url)
+    : undefined;
+  const [addedByTitle, ...linkedTitles] = useLinkedConversationTitles([
+    item.addedByConversationId,
+    ...item.conversationIds,
+  ]);
+  const assigned = item.assignees.length > 0 || item.assignedToEveryone;
+  return (
+    <DetailsPanel
+      label="Review item details"
+      onClose={props.onClose}
+      title={
+        <h2 className="m-0 text-base font-semibold text-dashboard-text">
+          Details
+        </h2>
+      }
+    >
+      <div className="grid min-w-0 gap-3 p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
+        <div className="min-w-0 break-words px-1 pb-1 font-sans text-sm leading-relaxed text-dashboard-text-muted">
+          <DisplayText text={item.body} />
+        </div>
+        <DetailsCard title="Assignees">
+          {assigned ? (
+            <span className="text-sm text-dashboard-text">
+              {assigneeLabel(item)}
+            </span>
+          ) : (
+            <StatusChip size="compact" tone="warning">
+              Unassigned
+            </StatusChip>
+          )}
+        </DetailsCard>
+        <DetailsCard>
+          <dl className="m-0 grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5">
+            <Fact label="Status">{reviewItemStatusLabel(item)}</Fact>
+            <Fact label="Added">{formatRelativeTime(item.createdAt)}</Fact>
+            <Fact label="Added by">
+              <Link
+                className={dashboardInlineLinkClass}
+                title={item.addedByConversationId}
+                to={conversationPath(item.addedByConversationId, {
+                  turnId: item.addedByTurnId,
+                })}
+              >
+                {addedByTitle ?? "Conversation"}
+              </Link>
+              {item.automationId ? (
+                <>
+                  {" · "}
+                  <Link
+                    className={dashboardInlineLinkClass}
+                    to={automationPath(item.automationId)}
+                  >
+                    Automation
+                  </Link>
+                </>
+              ) : null}
+            </Fact>
+            <Fact label="Visibility">
+              {item.visibility === "private" ? "Private" : "Public"}
+            </Fact>
+          </dl>
+        </DetailsCard>
+        {subject ? (
+          <DetailsCard title="Subject">
+            <span className="text-sm">
+              {subjectHref ? (
+                <a
+                  className={dashboardInlineLinkClass}
+                  href={subjectHref}
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  {subject.title ?? subjectHref}
+                </a>
+              ) : (
+                (subject.title ?? subject.id)
+              )}
+            </span>
+          </DetailsCard>
+        ) : null}
+        {item.conversationIds.length > 0 ? (
+          <DetailsCard
+            count={item.conversationIds.length}
+            title="Linked conversations"
+          >
+            <ul className="m-0 grid list-none gap-1 p-0 text-sm">
+              {item.conversationIds.map((conversationId, index) => {
+                const title = linkedTitles[index];
+                return (
+                  <li
+                    className={
+                      title ? "truncate" : "truncate font-mono text-xs"
+                    }
+                    key={conversationId}
+                  >
+                    <Link
+                      className={dashboardInlineLinkClass}
+                      title={conversationId}
+                      to={conversationPath(conversationId)}
+                    >
+                      {title ?? conversationId}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </DetailsCard>
+        ) : null}
+      </div>
+    </DetailsPanel>
+  );
+}

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

@@ -0,0 +1,159 @@
+import { ArrowRight, ChevronLeft, PanelRight } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { Link } from "react-router";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+import { StatusChip } from "../components/StatusChip";
+import { Button } from "../components/ui/button";
+import { ChatLayout } from "../conversations/ChatLayout";
+import { conversationPath } from "../conversations/conversationRoutes";
+import { DisplayText } from "../display-text/DisplayText";
+import { formatRelativeTime } from "../format";
+import { ReviewItemActions } from "./ReviewItemActions";
+import { ReviewItemContext } from "./ReviewItemContext";
+import { reviewItemStatusLabel } from "./reviewItemFormat";
+
+/** Space above the card when the view starts at its top. */
+const CARD_TOP_MARGIN_PX = 24;
+
+const textLinkClass =
+  "inline-flex items-center gap-1.5 font-sans text-sm font-medium text-dashboard-text no-underline hover:underline focus-visible:outline-dashboard-focus";
+
+/**
+ * Show one Review item where a person decides it: the end of the
+ * Conversation that added it, then its question and actions.
+ */
+export function ReviewItemView(props: {
+  backTo: string;
+  detailsOpen: boolean;
+  item: ReviewItemPayload;
+  next?: { title: string; to: string };
+  onDetailsClick(): void;
+  /** The title of the Conversation that added the item, when it is known. */
+  sourceTitle?: string;
+}) {
+  const { item } = props;
+  const open = item.status === "open";
+  const articleRef = useRef<HTMLElement>(null);
+  const cardRef = useRef<HTMLElement>(null);
+  // Open at the decision: the messages above it are context. Show the end
+  // of the page, or the top of the card when the card is taller than the
+  // view. Messages load and grow after the first paint, so keep the place
+  // until the reader scrolls or uses the page.
+  useEffect(() => {
+    const article = articleRef.current;
+    const card = cardRef.current;
+    const scroll = article?.closest<HTMLElement>("[data-chat-scroll]");
+    if (!article || !card || !scroll) return;
+    const observer = new ResizeObserver(() => {
+      const cardTop =
+        card.getBoundingClientRect().top -
+        scroll.getBoundingClientRect().top +
+        scroll.scrollTop;
+      scroll.scrollTop = Math.min(
+        scroll.scrollHeight - scroll.clientHeight,
+        cardTop - CARD_TOP_MARGIN_PX,
+      );
+    });
+    const stop = () => observer.disconnect();
+    const events = ["keydown", "pointerdown", "touchstart", "wheel"] as const;
+    observer.observe(article);
+    for (const name of events) {
+      scroll.addEventListener(name, stop, { passive: true });
+    }
+    return () => {
+      stop();
+      for (const name of events) scroll.removeEventListener(name, stop);
+    };
+  }, []);
+  const source = item.automationId ? "Automation" : props.sourceTitle;
+  // A notice has no question, so its text is what the card shows.
+  const bodyInCard = item.kind === "notice" || !item.request;
+  const conversationLink = (
+    <Link
+      className={textLinkClass}
+      to={conversationPath(item.addedByConversationId, {
+        turnId: item.addedByTurnId,
+      })}
+    >
+      Open conversation
+      <ArrowRight aria-hidden="true" size={14} />
+    </Link>
+  );
+  return (
+    <ChatLayout
+      header={
+        <header className="border-b border-dashboard-border bg-dashboard-bg">
+          <div className="flex min-w-0 items-start justify-between gap-4 px-4 py-3 md:px-7 md:py-5">
+            <div className="grid min-w-0 gap-1.5">
+              <Link
+                className="inline-flex items-center gap-1 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text md:hidden"
+                to={props.backTo}
+              >
+                <ChevronLeft aria-hidden="true" size={14} />
+                Inbox
+              </Link>
+              <h2 className="m-0 min-w-0 break-words font-display text-xl font-medium leading-tight tracking-tight">
+                {item.title}
+              </h2>
+              <p className="m-0 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-dashboard-text-muted">
+                <StatusChip size="compact" tone={open ? "accent" : "neutral"}>
+                  {reviewItemStatusLabel(item)}
+                </StatusChip>
+                <span>
+                  {source ? `${source} · ` : null}
+                  {formatRelativeTime(item.createdAt)}
+                  {item.visibility === "private" ? " · Private" : null}
+                </span>
+              </p>
+            </div>
+            <Button
+              aria-label="Review item details"
+              aria-pressed={props.detailsOpen}
+              className="shrink-0"
+              onClick={props.onDetailsClick}
+            >
+              <PanelRight aria-hidden="true" size={15} strokeWidth={2} />
+              Details
+            </Button>
+          </div>
+        </header>
+      }
+      scrollAriaLabel="Review item"
+      scrollClassName="px-4 pb-6 md:px-7"
+      scroll={
+        <article
+          aria-label={item.title}
+          ref={articleRef}
+          className="mx-auto grid w-full min-w-0 max-w-[52.5rem] gap-5 pt-5 md:pt-7"
+        >
+          <ReviewItemContext
+            fallback={
+              <div className="grid gap-3 font-sans text-sm leading-relaxed">
+                {bodyInCard ? null : <DisplayText text={item.body} />}
+                <div>{conversationLink}</div>
+              </div>
+            }
+            item={item}
+          />
+          <section
+            aria-label={open ? "Answer" : "Outcome"}
+            ref={cardRef}
+            className="grid min-w-0 gap-4 rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-panel p-4 font-sans text-sm md:p-5"
+          >
+            {bodyInCard ? <DisplayText text={item.body} /> : null}
+            <ReviewItemActions item={item} />
+          </section>
+          {props.next ? (
+            <div className="flex justify-end">
+              <Link className={textLinkClass} replace to={props.next.to}>
+                Next: {props.next.title}
+                <ArrowRight aria-hidden="true" size={14} />
+              </Link>
+            </div>
+          ) : null}
+        </article>
+      }
+    />
+  );
+}

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

@@ -25,17 +25,19 @@ const COUNT_REFRESH_MS = 60_000;
 
 /**
  * List the open Review items that the viewer can see, one page at a time.
- * A search also finds archived items, with the first page. `items` holds
- * the items of every loaded page, and `query` loads more.
+ * A search or `includeArchived` also finds archived items, with the first
+ * page. `items` holds the items of every loaded page, and `query` loads more.
  */
 export function useReviewItemsData(filters: {
   conversationId?: string;
+  includeArchived?: boolean;
   q?: string;
 }) {
   const params = new URLSearchParams();
   if (filters.conversationId) {
     params.set("conversationId", filters.conversationId);
   }
+  if (filters.includeArchived) params.set("include", "archived");
   if (filters.q) params.set("q", filters.q);
   const search = params.toString();
   const query = useInfiniteQuery({