@sentry/junior-dashboard 0.267.0 → 0.268.0

package/src/client/conversations/turnContext.ts

@@ -33,3 +33,18 @@ export function memoryRecallContent(context: TranscriptViewTurnContext) {
   const parsed = memoryRecallContentSchema.safeParse(context.content);
   return parsed.success ? parsed.data : undefined;
 }
+
+const userCustomizationContentSchema = z.object({ text: z.string() }).strict();
+
+/** Parse the saved user customization that the runtime added to one Turn. */
+export function userCustomizationContent(context: TranscriptViewTurnContext) {
+  if (
+    context.pluginName !== "junior" ||
+    context.kind !== "user_customization" ||
+    context.version !== 1
+  ) {
+    return undefined;
+  }
+  const parsed = userCustomizationContentSchema.safeParse(context.content);
+  return parsed.success ? parsed.data : undefined;
+}

package/src/client/format.ts

@@ -360,6 +360,21 @@ export type MessageSummary = {
   total: number;
 };
 
+/**
+ * Return the person who wrote one transcript user message. Child agent input
+ * has no person. Other messages fall back to the conversation actor.
+ */
+export function transcriptMessageActor(
+  conversation: ConversationTranscript,
+  message: TranscriptViewMessage,
+): ActorIdentity | undefined {
+  if (transcriptRoleKind(message.role) !== "user") return undefined;
+  if (message.agentInvocationId) return undefined;
+  if (actorLabel(message.actorIdentity)) return message.actorIdentity;
+  if (actorLabel(conversation.actorIdentity)) return conversation.actorIdentity;
+  return undefined;
+}
+
 /** Return the best available actor label for one transcript message. */
 export function transcriptMessageActorLabel(
   conversation: ConversationTranscript,
@@ -371,11 +386,7 @@ export function transcriptMessageActorLabel(
     // The conversation actor started the child agent but did not write its
     // input, so do not fall back to that actor here.
     if (message.agentInvocationId) return "Agent invocation";
-    return (
-      actorLabel(message.actorIdentity) ??
-      actorLabel(conversation.actorIdentity) ??
-      "User"
-    );
+    return actorLabel(transcriptMessageActor(conversation, message)) ?? "User";
   }
   if (kind === "system") return "System";
   if (kind === "tool") return "Tool";
@@ -786,6 +797,11 @@ export function peoplePath(email: string): string {
   return `/people/${encodeURIComponent(email)}`;
 }
 
+/** Build the dashboard route for one memory's details. */
+export function memoryPath(memoryId: string): string {
+  return `/memories/${encodeURIComponent(memoryId)}`;
+}
+
 /** Build the canonical detail route for a persisted public location. */
 export function locationPath(locationId: string): string {
   return `/system/locations/${encodeURIComponent(locationId)}`;

package/src/client/pages/SettingsPage.tsx

@@ -1,21 +1,28 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState, type FormEvent } from "react";
 
+import {
+  USER_CUSTOMIZATION_MAX_CHARS,
+  userCustomizationSchema,
+} from "@sentry/junior/api/schema";
 import {
   dashboardIdentitySchema,
   type DashboardIdentity,
 } from "../../api/schema";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
+import { Textarea } from "../components/ui/textarea";
 import { Field, FieldDescription, FieldLabel } from "../components/ui/field";
 import { InlineError } from "../components/InlineError";
 import { Card } from "../components/layout/Card";
 import { useDocumentTitle } from "../documentTitle";
-import { patch } from "../http";
+import { DashboardApiError, fetchDashboardJson, patch, put } from "../http";
 import { dashboardContainerClass } from "../styles";
 import type { DashboardCoreData } from "../types";
 
 const dashboardCoreQueryKey = ["dashboard", "core"] as const;
+const userCustomizationQueryKey = ["dashboard", "user-customization"] as const;
+const USER_CUSTOMIZATION_PATH = "/api/user-customization";
 
 type SettingsPageProps = {
   identity: DashboardIdentity;
@@ -58,7 +65,7 @@ export function SettingsPage({ identity }: SettingsPageProps) {
       <section className="mx-auto w-full max-w-3xl">
         <h1 className="m-0 text-2xl font-bold">Settings</h1>
         <p className="mt-2 mb-0 max-w-2xl text-sm text-dashboard-text-muted">
-          Manage how your account appears in the dashboard.
+          Manage your profile and preferences.
         </p>
 
         <form className="mt-6" onSubmit={submit}>
@@ -97,7 +104,100 @@ export function SettingsPage({ identity }: SettingsPageProps) {
             </div>
           </Card>
         </form>
+        <CustomizationForm />
       </section>
     </div>
   );
 }
+
+/**
+ * Let the user save text that changes how the agent replies to them. The
+ * server returns 404 when the app does not enable this experiment.
+ */
+function CustomizationForm() {
+  const queryClient = useQueryClient();
+  const [text, setText] = useState("");
+  const customizationQuery = useQuery({
+    queryKey: userCustomizationQueryKey,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        userCustomizationSchema,
+        USER_CUSTOMIZATION_PATH,
+        signal,
+      ),
+    retry: false,
+  });
+  const savedText = customizationQuery.data?.customization;
+  useEffect(() => {
+    if (savedText !== undefined) setText(savedText);
+  }, [savedText]);
+  const save = useMutation({
+    mutationFn: (customization: string) =>
+      put(userCustomizationSchema, USER_CUSTOMIZATION_PATH, { customization }),
+    onSuccess: (updated) => {
+      queryClient.setQueryData(userCustomizationQueryKey, updated);
+    },
+  });
+  if (
+    customizationQuery.error instanceof DashboardApiError &&
+    customizationQuery.error.status === 404
+  ) {
+    return null;
+  }
+  if (savedText === undefined) {
+    return customizationQuery.isError ? (
+      <InlineError className="mt-6">
+        Could not load your customization.
+      </InlineError>
+    ) : null;
+  }
+  const canSave =
+    text.trim() !== savedText &&
+    text.trim().length <= USER_CUSTOMIZATION_MAX_CHARS &&
+    !save.isPending;
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (canSave) save.mutate(text.trim());
+  }
+
+  return (
+    <form className="mt-6" onSubmit={submit}>
+      <Card className="mb-0" padding="md" variant="raised">
+        <h2 className="m-0 text-lg font-bold">Customization</h2>
+        <Field className="mt-5">
+          <FieldLabel htmlFor="user-customization">
+            How should replies to you change?
+          </FieldLabel>
+          <Textarea
+            id="user-customization"
+            maxLength={USER_CUSTOMIZATION_MAX_CHARS}
+            onChange={(event) => {
+              setText(event.target.value);
+              if (save.isError || save.isSuccess) save.reset();
+            }}
+            placeholder="Keep replies short and simple."
+            value={text}
+          />
+          <FieldDescription>
+            Added to each message you send. Do not put secrets here. (
+            {text.trim().length}/{USER_CUSTOMIZATION_MAX_CHARS})
+          </FieldDescription>
+        </Field>
+        <div className="mt-5 flex items-center gap-3">
+          <Button disabled={!canSave} type="submit">
+            {save.isPending ? "Saving…" : "Save customization"}
+          </Button>
+          {save.isSuccess ? (
+            <p className="m-0 text-sm text-emerald-300">Changes saved.</p>
+          ) : null}
+          {save.isError ? (
+            <InlineError>
+              Could not save your customization. Try again.
+            </InlineError>
+          ) : null}
+        </div>
+      </Card>
+    </form>
+  );
+}

package/src/client/pages/code/RepositorySections.tsx

@@ -69,6 +69,7 @@ export function RecentConversationRow(props: { conversation: Conversation }) {
             finishedSinceSeen={false}
             isPrivate={conversation.visibility === "private"}
             status={visualStatusForConversation(conversation)}
+            waitingOnViewer={false}
           />
         </span>
         <div className="min-w-0 truncate font-display text-sm text-dashboard-text">

package/src/client/pages/code/RepositoryTabs.tsx

@@ -18,6 +18,7 @@ import { Card } from "../../components/layout/Card";
 import { ConversationHomeList } from "../../conversations/ConversationHomeList";
 import { buildConversations, getDashboardTimeZone } from "../../format";
 import { useDebouncedValue } from "../../debouncedValue";
+import { useWaitingConversationIds } from "../../review-desk/queries";
 import { CodeActivityChart } from "./CodeActivityChart";
 import { CodeChangeRow } from "./CodeChangeRow";
 import { repositoryActivity } from "./RepositorySections";
@@ -32,6 +33,7 @@ export function RepositoryConversationsTab(props: { repositoryId: string }) {
   const search = useDebouncedValue(query.trim());
   const feed = useCodeRepositoryConversationsData(props.repositoryId, search);
   const conversations = buildConversations(feed.data?.conversations ?? []);
+  const waitingConversationIds = useWaitingConversationIds();
   useEffect(() => {
     setPage(1);
   }, [search]);
@@ -59,6 +61,7 @@ export function RepositoryConversationsTab(props: { repositoryId: string }) {
           finishedConversationIds={noFinishedConversations}
           loading={!feed.data}
           timeZone={getDashboardTimeZone()}
+          waitingConversationIds={waitingConversationIds}
         />
       )}
       <PagePagination

package/src/client/primaryNav.ts

@@ -9,6 +9,7 @@ const AUTH_PRIMARY_NAV_PREFIXES = [
   "/memories",
   "/settings",
   "/plugins/",
+  "/review",
 ] as const;
 
 /** True when the path is only available to a signed-in viewer. */
@@ -24,6 +25,8 @@ export function buildPrimaryNavItems(input: {
   loggedIn: boolean;
   pathname: string;
   primaryUserPages: PluginUserPageLink[];
+  /** Open Review items assigned to the viewer. */
+  reviewCount?: number;
   userPagesPending: boolean;
 }): DashboardHeaderNavItem[] {
   const memoryNavPage = input.primaryUserPages.find(
@@ -32,8 +35,8 @@ export function buildPrimaryNavItems(input: {
   const otherPrimaryUserPages = input.primaryUserPages.filter(
     (page) => !(page.pluginName === "memory" && page.id === "memories"),
   );
-  // Auth-only routes already imply the signed-in primary nav. Hold Tasks and
-  // Memories slots while core/user-pages catch up so the header does not jump.
+  // Auth-only routes already imply the signed-in primary nav. Hold Review
+  // desk, Tasks, and Memories slots while core/user-pages catch up so the header does not jump.
   const reserveAuthPrimaryNav =
     input.loading && isAuthPrimaryNavPath(input.pathname);
   const showTasksNav = input.loggedIn || reserveAuthPrimaryNav;
@@ -43,6 +46,16 @@ export function buildPrimaryNavItems(input: {
     (input.loggedIn && input.userPagesPending);
 
   return [
+    ...(showTasksNav
+      ? [
+          {
+            count: input.reviewCount,
+            key: "review",
+            label: "Review desk",
+            to: "/review",
+          },
+        ]
+      : []),
     { key: "code", label: "Code", to: "/code" },
     ...(showTasksNav
       ? [{ key: "automations", label: "Automations", to: "/automations" }]

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

@@ -0,0 +1,62 @@
+import { ChevronRight } from "lucide-react";
+import { useState } from "react";
+
+import { Drawer } from "../components/Drawer";
+import { ReviewItemCard } from "./ReviewItemCard";
+import { useReviewItemsData } from "./queries";
+
+function itemCountLabel(count: number): string {
+  return count === 1 ? "1 open review item" : `${count} open review items`;
+}
+
+/**
+ * Show how many open Review items are linked to a Conversation, above its
+ * message box. The bar opens a side panel where the viewer can act on each.
+ */
+export function ConversationReviewBar(props: { conversationId: string }) {
+  const [open, setOpen] = useState(false);
+  const items =
+    useReviewItemsData({
+      archived: false,
+      conversationId: props.conversationId,
+      view: "all",
+    }).data?.items ?? [];
+  if (items.length === 0) return null;
+  const label = itemCountLabel(items.length);
+  return (
+    <>
+      <button
+        className="mb-2 flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border border-violet-300/25 bg-violet-300/[0.06] px-3 py-2 text-left font-sans text-sm text-dashboard-text transition-colors hover:bg-violet-300/[0.1]"
+        onClick={() => setOpen(true)}
+        type="button"
+      >
+        <span className="flex items-center gap-2">
+          <span
+            aria-hidden="true"
+            className="size-2 shrink-0 rounded-full bg-violet-300"
+          />
+          {label}
+        </span>
+        <ChevronRight aria-hidden="true" size={16} />
+      </button>
+      {open ? (
+        <Drawer
+          closeLabel="Close review items"
+          header={
+            <h2 className="m-0 font-sans text-base font-semibold">{label}</h2>
+          }
+          label="Review items"
+          onClose={() => setOpen(false)}
+          openKey={props.conversationId}
+          width="narrow"
+        >
+          <div className="grid gap-3">
+            {items.map((item) => (
+              <ReviewItemCard item={item} key={item.id} />
+            ))}
+          </div>
+        </Drawer>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,277 @@
+import type { ReactNode } from "react";
+import { Link, useSearchParams } from "react-router";
+import type {
+  AutomationSummary,
+  ReviewItemPayload,
+} from "@sentry/junior/api/schema";
+
+import { FilterTabList } from "../components/FilterBar";
+import { InlineError } from "../components/InlineError";
+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 {
+  parseSearchParamEnum,
+  pathWithSearch,
+  useDebouncedSearchParam,
+} from "../searchParams";
+import { cn } from "../styles";
+import { ReviewItemDetail } from "./ReviewItemDetail";
+import {
+  REVIEW_DESK_VIEWS,
+  useBlockedAutomationsData,
+  useReviewItemData,
+  useReviewItemsData,
+} from "./queries";
+import { assigneeLabel, reviewItemPath } from "./reviewItemFormat";
+
+const VIEW_TABS = [
+  { label: "Mine", value: "mine" },
+  { label: "Everyone", value: "everyone" },
+  { label: "All", value: "all" },
+] as const;
+
+const STATE_TABS = [
+  { label: "Open", value: "open" },
+  { label: "Archived", value: "archived" },
+] as const;
+
+const ITEM_STATES = ["open", "archived"] as const;
+
+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; title: string }) {
+  return (
+    <section className="grid gap-1">
+      <h2 className="m-0 px-3 font-sans text-xs font-medium text-dashboard-text-muted">
+        {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 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="truncate text-sm font-medium">{item.title}</span>
+        <span className="flex min-w-0 items-center gap-2 text-xs text-dashboard-text-muted">
+          {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: open or archived Review items in the Mine,
+ * Everyone, and All views, with the selected item beside the list.
+ */
+export function ReviewDeskPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const view =
+    parseSearchParamEnum(searchParams.get("view"), REVIEW_DESK_VIEWS) ?? "mine";
+  const state =
+    parseSearchParamEnum(searchParams.get("state"), ITEM_STATES) ?? "open";
+  // The selected item can be missing from the new list, so a tab change
+  // drops it and the first item of the new list shows.
+  function selectTab(key: "state" | "view", value: string, initial: string) {
+    setSearchParams(
+      (current) => {
+        const next = new URLSearchParams(current);
+        next.delete("item");
+        if (value === initial) next.delete(key);
+        else next.set(key, value);
+        return next;
+      },
+      { replace: true },
+    );
+  }
+  const [search, setSearch, q] = useDebouncedSearchParam();
+  const archived = state === "archived";
+  const items = useReviewItemsData({ archived, q, view });
+  const showBlocked = !archived && view !== "everyone" && !q;
+  const blocked = useBlockedAutomationsData(showBlocked);
+  const list = items.data?.items ?? [];
+  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 actions = list.filter((item) => item.kind === "action");
+  const notices = list.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"
+      />
+      <div className="flex min-w-0 flex-wrap items-center gap-3">
+        <FilterTabList
+          ariaLabel="Assignee view"
+          items={VIEW_TABS}
+          onChange={(value) => selectTab("view", value, "mine")}
+          value={view}
+        />
+        <FilterTabList
+          ariaLabel="Item state"
+          items={STATE_TABS}
+          onChange={(value) => selectTab("state", value, "open")}
+          value={state}
+        />
+        <SearchInput
+          className="ml-auto w-full sm:w-64"
+          label="Search review items"
+          onChange={setSearch}
+          placeholder="Search items"
+          value={search}
+        />
+      </div>
+      <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" padding="none">
+          {items.error ? (
+            <InlineError className="px-3">
+              Could not load review items.
+            </InlineError>
+          ) : !items.data ? (
+            <ReviewListLoading />
+          ) : empty ? (
+            <EmptyMessage>
+              {archived ? "No archived items." : "Nothing needs you right now."}
+            </EmptyMessage>
+          ) : (
+            <>
+              {actions.length > 0 ? (
+                <ListGroup title={archived ? "Questions" : "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}
+              {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>
+  );
+}