@sentry/junior-dashboard 0.269.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/ReviewItemActions.tsx

@@ -8,10 +8,11 @@ import {
 import { InlineError } from "../components/InlineError";
 import { UserInputForm } from "../components/UserInputForm";
 import { Button } from "../components/ui/button";
-import { TranscriptMarkdown } from "../conversations/TranscriptMarkdown";
+import { DisplayText } from "../display-text/DisplayText";
 import { formatRelativeTime } from "../format";
 import { DashboardApiError } from "../http";
 import { useReviewItemAction } from "./queries";
+import { useReportUnsentAnswer } from "./UnsentAnswers";
 
 function personLabel(person: { displayName?: string; email: string }) {
   return person.displayName ?? person.email;
@@ -79,6 +80,8 @@ export function ReviewItemActions(props: { item: ReviewItemPayload }) {
   const { item } = props;
   const action = useReviewItemAction();
   const [error, setError] = useState<string>();
+  const [unsent, setUnsent] = useState(false);
+  useReportUnsentAnswer(item, unsent);
 
   if (item.status !== "open") return <ClosedSummary item={item} />;
   if (!item.canAct) {
@@ -126,9 +129,10 @@ export function ReviewItemActions(props: { item: ReviewItemPayload }) {
       {item.kind === "action" && item.request ? (
         <div className="text-sm">
           <div className="font-medium">
-            <TranscriptMarkdown text={item.request.question} />
+            <DisplayText text={item.request.question} />
           </div>
           <UserInputForm
+            onUnsentChange={setUnsent}
             onSubmit={(answer) =>
               run({
                 action: "submit",

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

@@ -1,38 +1,79 @@
+import { ArrowRight, Inbox } from "lucide-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 { DisplayText } from "../display-text/DisplayText";
+import { cn } from "../styles";
 import { ReviewItemActions } from "./ReviewItemActions";
 import { useReviewItemData } from "./queries";
-import { reviewItemPath, reviewItemStatusLabel } from "./reviewItemFormat";
+import {
+  assigneeLabel,
+  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.
+ * viewer's actions, with a link to the review desk. The card uses the same
+ * frame as transcript object cards, so it reads as one record, not as prose.
  */
 export function ReviewItemCard(props: { item: ReviewItemPayload }) {
   const { item } = props;
+  const open = item.status === "open";
+  const assigned = item.assignees.length > 0 || item.assignedToEveryone;
   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"
+      className="my-1 w-full min-w-0 max-w-[37.5rem] overflow-hidden rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-panel 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"}
+      <header className="flex items-start gap-3 px-4 pb-3 pt-4 md:px-5">
+        {/* The accent tile marks an item that still needs a person. */}
+        <span
+          aria-hidden="true"
+          className={cn(
+            "grid size-9 shrink-0 place-items-center rounded-lg border",
+            open
+              ? "border-dashboard-accent/30 bg-dashboard-accent/10 text-dashboard-accent"
+              : "border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted",
+          )}
         >
-          {reviewItemStatusLabel(item)}
-        </StatusChip>
+          <Inbox size={18} />
+        </span>
+        <div className="grid min-w-0 flex-1 gap-1">
+          <div className="flex min-w-0 items-center justify-between gap-3">
+            <p className="m-0 text-xs text-dashboard-text-muted">Review item</p>
+            <StatusChip
+              className="shrink-0"
+              size="compact"
+              tone={open ? "accent" : "neutral"}
+            >
+              {reviewItemStatusLabel(item)}
+            </StatusChip>
+          </div>
+          <h3 className="m-0 break-words text-base font-semibold leading-snug">
+            {item.title}
+          </h3>
+        </div>
       </header>
-      <TranscriptMarkdown text={item.body} />
-      <ReviewItemActions item={item} />
-      <Link className="w-fit text-xs" to={reviewItemPath(item.id)}>
-        Open on the review desk
-      </Link>
+      <div className="grid min-w-0 gap-4 px-4 pb-4 md:px-5">
+        <DisplayText text={item.body} />
+        <div className="border-t border-dashboard-border pt-4">
+          <ReviewItemActions item={item} />
+        </div>
+      </div>
+      <footer className="flex flex-wrap items-center justify-between gap-3 border-t border-dashboard-border bg-dashboard-fill-faint px-4 py-3 text-xs md:px-5">
+        <Link
+          className="inline-flex items-center gap-2 font-medium text-dashboard-text no-underline hover:underline focus-visible:outline-dashboard-focus"
+          to={reviewItemPath(item.id)}
+        >
+          Open on the review desk
+          <ArrowRight aria-hidden="true" size={14} />
+        </Link>
+        <span className="min-w-0 truncate text-dashboard-text-muted">
+          {assigned ? `Assigned to ${assigneeLabel(item)}` : "Unassigned"}
+        </span>
+      </footer>
     </section>
   );
 }

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>
+  );
+}