@sentry/junior-dashboard 0.267.0 → 0.269.0

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/automations/AGENTS.md

@@ -0,0 +1,34 @@
+# Automation pages
+
+## Boundaries
+
+- Core owns validation, edit access, creator-only rules, revision checks,
+  Schedule previews, and the Event catalog. The page shows core errors. It
+  does not repeat these rules.
+- Preview requests never save or run work.
+- Completed scheduled Automations are read-only.
+
+## Editor rules
+
+- Send only changed fields. Keep unsupported triggers and stored
+  Destinations unless the user replaces them. Keep outcome order.
+- New messages can target only the current Destination or the creator.
+- A public reader sees outcomes as read-only and cannot turn on creator
+  credentials. Warn that an instruction or event selector change switches to
+  system credentials.
+- Pause, Resume, and Delete are creator-only. Hide them from other viewers.
+- Query refreshes must not replace an unsaved draft. After a stale save, let
+  the user keep their changes or load the latest version.
+- Block navigation with unsaved changes.
+- Lifecycle actions and "Make active" read the latest revision first.
+
+## Page rules
+
+- Each Automation has one page at `/automations/:id`. Keep the list query
+  string on the way back. Drop tab-only params: `result`, `run`, `version`.
+- `AutomationRecentRuns` shows terminal runs only. Do not infer queued or
+  running work from terminal records.
+- Delete keeps errors in the dialog and blocks dismissal while pending.
+
+Browser journeys: `e2e/automation-editor.spec.ts` and
+`e2e/automations.spec.ts`.

package/src/client/pages/automations/AutomationActions.tsx

@@ -43,7 +43,7 @@ export function AutomationActions({
   const completed = automation.status === "completed";
   const paused = automation.status === "paused";
   const blocked = automation.status === "blocked";
-  const canPause = automation.ownedByViewer && !completed;
+  const canPause = !completed;
   const action = paused || blocked ? "resume" : "pause";
   const mutation = useMutation({
     mutationFn: async () => {
@@ -135,25 +135,23 @@ export function AutomationActions({
             </Popover>
           </>
         ) : null}
-        {automation.ownedByViewer ? (
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <Button
-                  focusableWhenDisabled
-                  aria-label="Delete automation"
-                  size="icon"
-                  variant="danger"
-                  onClick={(event) => onDelete(event.currentTarget)}
-                  disabled={mutation.isPending}
-                >
-                  <Trash2 aria-hidden="true" size={16} />
-                </Button>
-              }
-            />
-            <TooltipContent size="compact">Delete automation</TooltipContent>
-          </Tooltip>
-        ) : null}
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button
+                focusableWhenDisabled
+                aria-label="Delete automation"
+                size="icon"
+                variant="danger"
+                onClick={(event) => onDelete(event.currentTarget)}
+                disabled={mutation.isPending}
+              >
+                <Trash2 aria-hidden="true" size={16} />
+              </Button>
+            }
+          />
+          <TooltipContent size="compact">Delete automation</TooltipContent>
+        </Tooltip>
       </div>
       {mutation.error ? (
         <div className="max-w-sm">

package/src/client/pages/automations/AutomationEditor.tsx

@@ -135,8 +135,7 @@ export function AutomationEditor(props: {
   const dropsCreatorCredentials =
     !owned &&
     original.credentialMode === "creator" &&
-    (changes.instruction !== undefined ||
-      (original.kind === "event" && changes.trigger !== undefined));
+    (changes.instruction !== undefined || changes[triggerField] !== undefined);
   const triggerError = fieldError(triggerField);
   const inputState = (key: string) => ({
     "aria-invalid": Boolean(fieldError(key)) || undefined,
@@ -426,8 +425,8 @@ export function AutomationEditor(props: {
             {dropsCreatorCredentials ? (
               <FormNotice title="Saving switches this automation to system credentials.">
                 Only {creator} can let a changed instruction
-                {original.kind === "event" ? " or trigger" : ""} use their
-                connected accounts.
+                {original.kind === "event" ? " or trigger" : " or schedule"} use
+                their connected accounts.
               </FormNotice>
             ) : null}
             {fieldError("credentialMode") ? (

package/src/client/pages/automations/AutomationOverview.tsx

@@ -197,9 +197,9 @@ function AutomationAbout(props: { automation: AutomationSummary }) {
         <p className="mt-3 mb-0 text-xs leading-relaxed text-dashboard-text-muted">
           {automation.destination.visibility === "private"
             ? null
-            : "You can edit its settings because it is in a public channel. "}
-          Only {automation.createdBy} can pause, resume, or delete it, change
-          where results go, or turn on their connected accounts.
+            : "You can edit, pause, or delete it because it is in a public channel. "}
+          Only {automation.createdBy} can change where results go, turn on their
+          connected accounts, or resume or run it while it uses them.
         </p>
       )}
     </RailCard>

package/src/client/pages/automations/AutomationStatus.tsx

@@ -140,8 +140,8 @@ export function AutomationAttention({
         <p className="m-0 break-words">
           {automation.statusReason ??
             "Check the last run to see what needs fixing."}{" "}
-          {!automation.ownedByViewer
-            ? `Ask ${automation.createdBy} to resume after this is fixed.`
+          {!automation.ownedByViewer && automation.credentialMode === "creator"
+            ? `It uses accounts connected by ${automation.createdBy}. Ask them to resume it, or switch it to Junior's credentials first.`
             : null}
         </p>
       ) : null}

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/pages/system/AGENTS.md

@@ -0,0 +1,12 @@
+# System pages
+
+- The URL selects a Workspace recipe: `/system/workspaces/:id` opens
+  `WorkspaceDetails` beside the list.
+- The list report has no snapshots. The detail read adds the current
+  snapshot. Keep snapshot loading and errors inside the Snapshot row.
+- Edit and Delete live in the panel header. List rows have no actions.
+- `WorkspaceDeleteDialog` keeps errors in the dialog and blocks dismissal
+  while the request runs.
+- Close and Escape return focus to the selected row.
+
+Browser coverage: `e2e/system.spec.ts`.

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,68 @@
+import { ChevronRight } from "lucide-react";
+import { useState } from "react";
+
+import { Drawer } from "../components/Drawer";
+import { LoadMorePagination } from "../components/Pagination";
+import { ReviewItemCard } from "./ReviewItemCard";
+import { useReviewItemsData } from "./queries";
+
+/** `more` marks a count of the loaded pages only, such as "50+". */
+function itemCountLabel(count: number, more: boolean): string {
+  if (more) return `${count}+ open review items`;
+  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, query } = useReviewItemsData({
+    conversationId: props.conversationId,
+  });
+  if (items.length === 0) return null;
+  const more = Boolean(query.hasNextPage);
+  const label = itemCountLabel(items.length, more);
+  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} />
+            ))}
+            <LoadMorePagination
+              hasMore={more}
+              loading={query.isFetchingNextPage}
+              onLoadMore={() => void query.fetchNextPage()}
+            />
+          </div>
+        </Drawer>
+      ) : null}
+    </>
+  );
+}