@sentry/junior-dashboard 0.233.0 → 0.234.0

package/src/client/api.ts

@@ -16,6 +16,7 @@ import {
   personalSpendReportSchema,
   automationExecutionListSchema,
   automationListSchema,
+  automationSummarySchema,
   automationRunListSchema,
 } from "@sentry/junior/api/schema";
 import {
@@ -122,7 +123,7 @@ export function useAutomationsData(enabled: boolean, search: string) {
     queryFn: ({ signal }) =>
       fetchDashboardJson(
         automationListSchema,
-        `/api/automations${search ? `?q=${encodeURIComponent(search)}` : ""}`,
+        `/api/automations${search ? `?${search}` : ""}`,
         signal,
       ),
     placeholderData: keepPreviousData,
@@ -130,6 +131,21 @@ export function useAutomationsData(enabled: boolean, search: string) {
   });
 }
 
+/** Load details by ID, independent of list filters and pagination. */
+export function useAutomationData(enabled: boolean, id: string | undefined) {
+  return useQuery({
+    enabled: enabled && Boolean(id),
+    queryKey: ["dashboard", "automations", "detail", id],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        automationSummarySchema,
+        `/api/automations/${encodeURIComponent(id!)}`,
+        signal,
+      ),
+    retry: false,
+  });
+}
+
 /** Fetch newest runs across all viewer-visible automations. */
 export function useAutomationRunsData(enabled: boolean) {
   return useQuery({

package/src/client/components/ActorAvatar.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { cn } from "../styles";
+
+/** Show an actor's image, with initials when the image is missing or fails. */
+export function ActorAvatar(props: {
+  name: string;
+  imageUrl?: string;
+  size: "detail" | "list";
+}) {
+  const [failedUrl, setFailedUrl] = useState<string>();
+  const words = props.name.trim().split(/\s+/).filter(Boolean);
+  const initials =
+    words.length > 1
+      ? `${words[0]![0]}${words.at(-1)![0]}`
+      : props.name.slice(0, 2);
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "relative inline-grid shrink-0 place-items-center overflow-hidden rounded-full border-2 border-dashboard-bg bg-dashboard-focus font-sans font-bold leading-none text-dashboard-text-inverse shadow-sm",
+        props.size === "list" ? "size-6 text-2xs" : "size-7 text-xs",
+      )}
+    >
+      {initials.toUpperCase()}
+      {props.imageUrl && props.imageUrl !== failedUrl ? (
+        <img
+          alt=""
+          className="absolute inset-0 size-full object-cover"
+          loading="lazy"
+          onError={() => setFailedUrl(props.imageUrl)}
+          referrerPolicy="no-referrer"
+          src={props.imageUrl}
+        />
+      ) : null}
+    </span>
+  );
+}

package/src/client/components/Button.tsx

@@ -4,7 +4,7 @@ import { Link, type LinkProps } from "react-router";
 import { cn } from "../styles";
 
 type ButtonSize = "default" | "icon";
-type ButtonTone = "default" | "danger";
+type ButtonTone = "default" | "danger" | "primary";
 type ToggleButtonVariant = "pill" | "segment" | "text";
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -44,15 +44,17 @@ export function Button({
                 ? "text-dashboard-text-muted hover:!bg-rose-300/10 hover:!text-rose-300 focus-visible:outline-rose-300/55 disabled:hover:!text-dashboard-text-muted"
                 : "text-dashboard-text-muted hover:!bg-dashboard-fill-strong hover:!text-dashboard-text focus-visible:outline-cyan-300/55 disabled:hover:!text-dashboard-text-muted",
             )
-          : isDanger
-            ? cn(
-                dangerButtonClassName,
-                "disabled:hover:border-dashboard-border-strong disabled:hover:text-dashboard-text-muted",
-              )
-            : cn(
-                buttonClassName,
-                "disabled:hover:border-dashboard-border-emphasis disabled:hover:bg-dashboard-surface-raised disabled:hover:text-dashboard-text",
-              ),
+          : tone === "primary"
+            ? "inline-flex h-9 items-center justify-center gap-2 rounded border border-dashboard-text-solid bg-dashboard-text-solid px-3 font-sans text-sm font-semibold text-dashboard-text-inverse hover:bg-dashboard-text-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
+            : isDanger
+              ? cn(
+                  dangerButtonClassName,
+                  "disabled:hover:border-dashboard-border-strong disabled:hover:text-dashboard-text-muted",
+                )
+              : cn(
+                  buttonClassName,
+                  "disabled:hover:border-dashboard-border-emphasis disabled:hover:bg-dashboard-surface-raised disabled:hover:text-dashboard-text",
+                ),
         props.disabled ? "" : "cursor-pointer",
         className,
       )}

package/src/client/components/Field.tsx

@@ -20,6 +20,7 @@ export function Field(props: {
   children: ReactNode;
   className?: string;
   help?: ReactNode;
+  error?: string;
   htmlFor?: string;
   label: ReactNode;
   size?: FieldSize;
@@ -31,8 +32,20 @@ export function Field(props: {
         {props.label}
       </label>
       {props.children}
+      {props.error ? (
+        <p
+          id={props.htmlFor ? `${props.htmlFor}-error` : undefined}
+          role="alert"
+          className="m-0 text-xs leading-relaxed text-rose-300"
+        >
+          {props.error}
+        </p>
+      ) : null}
       {props.help ? (
-        <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted sm:text-sm">
+        <p
+          id={props.htmlFor ? `${props.htmlFor}-help` : undefined}
+          className="m-0 text-xs leading-relaxed text-dashboard-text-muted sm:text-sm"
+        >
           {props.help}
         </p>
       ) : null}

package/src/client/components/FormNotice.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { TriangleAlert } from "lucide-react";
+import { cn } from "../styles";
+
+/** Keep form recovery text and actions visible without truncation. */
+export function FormNotice(props: {
+  title: string;
+  children?: ReactNode;
+  tone?: "error" | "warning";
+}) {
+  const error = props.tone === "error";
+  return (
+    <div
+      role={error ? "alert" : "status"}
+      className={cn(
+        "flex min-w-0 gap-3 rounded-md border p-4",
+        error
+          ? "border-rose-300/25 bg-rose-300/5"
+          : "border-amber-300/25 bg-amber-300/5",
+      )}
+    >
+      <TriangleAlert
+        aria-hidden
+        size={18}
+        className={cn(
+          "mt-0.5 shrink-0",
+          error ? "text-rose-300" : "text-amber-300",
+        )}
+      />
+      <div className="min-w-0">
+        <p className="m-0 text-sm font-medium">{props.title}</p>
+        {props.children ? (
+          <div className="mt-1 text-sm leading-relaxed text-dashboard-text-muted">
+            {props.children}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/client/components/ParticipantAvatarStack.tsx

@@ -3,6 +3,7 @@ import type { ActorIdentity } from "@sentry/junior/api/schema";
 import { actorLabel } from "../format";
 import { cn } from "../styles";
 import type { Conversation } from "../types";
+import { ActorAvatar } from "./ActorAvatar";
 import { Tooltip } from "./Tooltip";
 
 const MAX_VISIBLE_PARTICIPANTS = 3;
@@ -28,15 +29,6 @@ function participantDescription(participant: ActorIdentity): string {
   return email && email !== name ? `${name}, ${email}` : name;
 }
 
-function participantInitials(participant: ActorIdentity): string {
-  const name = participantName(participant);
-  const words = name.split(/\s+/).filter(Boolean);
-  if (words.length > 1) {
-    return `${words[0]![0] ?? ""}${words.at(-1)?.[0] ?? ""}`.toUpperCase();
-  }
-  return name.slice(0, 2).toUpperCase();
-}
-
 function participantKey(participant: ActorIdentity, index: number): string {
   return (
     participant.email?.trim().toLowerCase() ||
@@ -72,14 +64,14 @@ function Avatar(props: {
     >
       <span
         aria-label={label}
-        className={cn(
-          "relative inline-grid shrink-0 place-items-center rounded-full border-2 border-dashboard-bg bg-dashboard-focus font-sans font-bold leading-none text-dashboard-text-inverse shadow-sm focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus",
-          props.size === "list" ? "size-6 text-2xs" : "size-7 text-xs",
-        )}
+        className="relative inline-flex rounded-full focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
         onKeyDown={(event) => event.stopPropagation()}
         tabIndex={0}
       >
-        {participantInitials(props.participant)}
+        <ActorAvatar
+          name={participantName(props.participant)}
+          size={props.size}
+        />
       </span>
     </Tooltip>
   );

package/src/client/components/README.md

@@ -6,7 +6,7 @@ instead of copying Tailwind blocks.
 ## Layers
 
 1. **Primitives** — `Button` / `ToggleButton`, `Field`, `TextInput`,
-   `StatusChip`, `StatusDot`, `Notice`, `Drawer`, `Tooltip`, `Skeleton`,
+   `StatusChip`, `StatusDot`, `Notice`, `FormNotice`, `Select`, `Drawer`, `Tooltip`, `Skeleton`,
    `PageContentSkeleton`, `SegmentedTabs`, and other small reusable controls.
    Use `SegmentedTabs` for equal-width panel navigation. Pass the selected value,
    items, change handler, and selected panel content. It owns tab/panel labels
@@ -14,7 +14,9 @@ instead of copying Tailwind blocks.
    `ToggleButton` variants (`pill`, `segment`, `text`) over one-off pressed
    styles. Prefer `Field` sizes (`default`, `compact`) over handwritten labels.
    Prefer `StatusDot` for dense table or list status markers and `StatusChip`
-   when the label itself must stay visible. Prefer `PageContentSkeleton`
+   when the label itself must stay visible. `StatusChip` uses a small dot and
+   sentence-case text, without a border, fill, or all-caps styling. It is not
+   an interactive control. Prefer `PageContentSkeleton`
    variants over ad-hoc pulse blocks in route modules. Use `PageRouteLoading`
    when a standard page must keep its real header above a body skeleton. Use a
    feature-owned loading component for distinct geometry, such as conversations.
@@ -54,3 +56,10 @@ instead of copying Tailwind blocks.
 - One-off page glue may stay inline when extraction only adds indirection.
 
 See `policies/frontend-components.md`.
+
+Use `TextInput size="comfortable"` for larger mobile form controls.
+Form pages use `Button tone="primary"` for their one main save action. Use
+`TextArea prose` for instructions rather than code. `Field error` renders an
+error at `<htmlFor>-error`; the owning control must set `aria-invalid` and
+`aria-describedby`. `Select` matches native text controls. Use `FormNotice` for
+wrapping form recovery text; use `Notice` for compact transient messages.

package/src/client/components/Select.tsx

@@ -0,0 +1,18 @@
+import type { SelectHTMLAttributes } from "react";
+import { cn } from "../styles";
+
+/** Match native form choices to the dashboard text controls. */
+export function Select({
+  className,
+  ...props
+}: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select
+      {...props}
+      className={cn(
+        "block min-h-11 w-full min-w-0 rounded border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-10 sm:text-sm",
+        className,
+      )}
+    />
+  );
+}

package/src/client/components/StatusChip.tsx

@@ -13,21 +13,20 @@ export type StatusChipTone =
 export type StatusChipSize = "default" | "compact";
 
 const toneClass: Record<StatusChipTone, string> = {
-  accent: "border-violet-300/20 bg-violet-300/[0.07] text-violet-100",
-  danger: "border-rose-400/25 bg-rose-400/10 text-rose-200",
-  info: "border-cyan-300/20 bg-cyan-300/[0.07] text-cyan-100",
-  neutral: "border-dashboard-border bg-dashboard-fill-faint text-dashboard-text-muted",
-  success: "border-emerald-400/25 bg-emerald-400/10 text-emerald-200",
-  warning: "border-amber-400/25 bg-amber-400/10 text-amber-100",
+  accent: "text-violet-300",
+  danger: "text-rose-300",
+  info: "text-cyan-300",
+  neutral: "text-dashboard-text-muted",
+  success: "text-emerald-300",
+  warning: "text-amber-300",
 };
 
 const sizeClass: Record<StatusChipSize, string> = {
-  compact:
-    "gap-1.5 px-2 py-1 font-mono text-2xs uppercase tracking-[0.08em]",
-  default: "px-2 py-1 font-mono text-xs uppercase tracking-[0.1em]",
+  compact: "text-xs",
+  default: "text-sm",
 };
 
-/** Render a compact status or kind label with shared tone and size contracts. */
+/** Show status as quiet text, not a button-shaped badge. */
 export function StatusChip(props: {
   children: ReactNode;
   className?: string;
@@ -37,13 +36,17 @@ export function StatusChip(props: {
   return (
     <span
       className={cn(
-        "inline-flex w-fit items-center rounded border",
+        "inline-flex w-fit items-center gap-1.5 font-sans font-medium normal-case leading-snug tracking-normal",
         sizeClass[props.size ?? "default"],
         toneClass[props.tone ?? "neutral"],
         props.className,
       )}
     >
-      {props.children}
+      <span
+        aria-hidden="true"
+        className="size-1.5 shrink-0 rounded-full bg-current"
+      />
+      <span className="block first-letter:uppercase">{props.children}</span>
     </span>
   );
 }

package/src/client/components/TextInput.tsx

@@ -3,36 +3,56 @@ import type { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { cn } from "../styles";
 
 const textControlClassName =
-  "block w-full rounded border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-sm text-dashboard-text focus:border-dashboard-focus focus:outline-none disabled:cursor-not-allowed disabled:opacity-50";
+  "block w-full rounded border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-sm text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-50";
 
 export type TextInputProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,
   "size"
 > & {
   className?: string;
+  size?: "default" | "comfortable";
 };
 
 /** Render the dashboard's standard single-line text control. */
-export function TextInput({ className, type = "text", ...props }: TextInputProps) {
+export function TextInput({
+  className,
+  type = "text",
+  size = "default",
+  ...props
+}: TextInputProps) {
   return (
     <input
       {...props}
-      className={cn(textControlClassName, className)}
+      className={cn(
+        textControlClassName,
+        size === "comfortable" && "min-h-11 text-base sm:min-h-10 sm:text-sm",
+        className,
+      )}
       type={type}
     />
   );
 }
 
 export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  prose?: boolean;
   className?: string;
 };
 
 /** Render the dashboard's standard multi-line text control. */
-export function TextArea({ className, ...props }: TextAreaProps) {
+export function TextArea({
+  className,
+  prose = false,
+  ...props
+}: TextAreaProps) {
   return (
     <textarea
       {...props}
-      className={cn(textControlClassName, "min-h-36 font-mono", className)}
+      className={cn(
+        textControlClassName,
+        "min-h-36",
+        prose ? "font-sans leading-relaxed" : "font-mono",
+        className,
+      )}
     />
   );
 }

package/src/client/http.ts

@@ -4,11 +4,20 @@ import { recordDashboardServerVersion } from "./dashboard-version";
 /** An authenticated dashboard request rejected by the product API. */
 export class DashboardApiError extends Error {
   readonly status: number;
+  readonly fields?: Record<string, string[]>;
+  readonly code?: string;
   readonly apiError?: string;
 
-  constructor(path: string, status: number, apiError?: string) {
+  constructor(
+    path: string,
+    status: number,
+    apiError?: string,
+    detail?: { fields?: Record<string, string[]>; code?: string },
+  ) {
     super(`${path} returned ${status}`);
     this.status = status;
+    this.fields = detail?.fields;
+    this.code = detail?.code;
     if (apiError?.trim()) this.apiError = apiError.trim();
   }
 }
@@ -18,13 +27,32 @@ async function throwDashboardApiError(
   response: Response,
 ): Promise<never> {
   let apiError: string | undefined;
+  let fields: Record<string, string[]> | undefined;
+  let code: string | undefined;
   try {
-    const body = (await response.json()) as { error?: unknown };
+    const body = (await response.json()) as {
+      error?: unknown;
+      code?: unknown;
+      fields?: unknown;
+    };
     if (typeof body.error === "string") apiError = body.error;
+    if (typeof body.code === "string") code = body.code;
+    if (body.fields && typeof body.fields === "object") {
+      fields = Object.fromEntries(
+        Object.entries(body.fields).filter(
+          (entry): entry is [string, string[]] =>
+            Array.isArray(entry[1]) &&
+            entry[1].every((value) => typeof value === "string"),
+        ),
+      );
+    }
   } catch {
     // Keep the status-only fallback when the body is not JSON.
   }
-  throw new DashboardApiError(path, response.status, apiError);
+  throw new DashboardApiError(path, response.status, apiError, {
+    fields,
+    code,
+  });
 }
 
 function restartDashboardSignIn(): void {

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

@@ -1,6 +1,7 @@
+import { AutomationLifecycle } from "./AutomationLifecycle";
+import { automationOutcomeLabel } from "./automationOutcomes";
 import type { AutomationSummary } from "@sentry/junior/api/schema";
-import { Link } from "react-router";
-import { MapPin } from "lucide-react";
+import { Link, useLocation } from "react-router";
 import { Detail, DetailList } from "../../components/DetailList";
 import { Drawer } from "../../components/Drawer";
 import {
@@ -17,6 +18,7 @@ export function AutomationDetailsDrawer(props: {
   range: TimeRangeDays;
   automation: AutomationSummary | undefined;
 }) {
+  const location = useLocation();
   if (!props.automation) return null;
 
   const { automation } = props;
@@ -38,22 +40,21 @@ export function AutomationDetailsDrawer(props: {
           { label: "Schedule", value: automation.schedule },
           {
             label: "Next run",
-            value: automation.nextRunAt
-              ? formatRunDate(automation.nextRunAt)
-              : "None",
+            value:
+              automation.status === "active" && automation.nextRunAt
+                ? formatRunDate(automation.nextRunAt)
+                : "None",
           },
         ]
       : [
-          { label: "Resource", value: automation.resource },
-          { label: "Events", value: automation.events.join(", ") },
+          { label: "Watching", value: automation.resource },
+          {
+            label: "Events",
+            value: automation.events
+              .map((event) => event.replaceAll(/[._]/g, " "))
+              .join(", "),
+          },
         ];
-  const statusLabel =
-    automation.kind === "scheduled"
-      ? automation.status
-      : automation.triggerAvailable
-        ? "ready"
-        : "unavailable";
-
   const titleId = "automation-details-drawer-title";
 
   return (
@@ -68,9 +69,8 @@ export function AutomationDetailsDrawer(props: {
           >
             {automation.title}
           </h2>
-          <div className="mt-1 break-words font-mono text-xs leading-snug text-dashboard-text-muted capitalize">
-            {automation.kind} automation · {statusLabel} ·{" "}
-            {formatDate(automation.createdAt)}
+          <div className="mt-1 break-words text-sm text-dashboard-text-muted">
+            Created by {createdBy} · {automation.destination.label}
           </div>
         </>
       }
@@ -80,53 +80,70 @@ export function AutomationDetailsDrawer(props: {
     >
       <section className="grid gap-5">
         <div>
-          <div className="mb-2 font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
-            Instruction
-          </div>
+          <h3 className="mt-0 mb-2 text-sm font-medium text-dashboard-text-muted">
+            What to do
+          </h3>
           <TranscriptText text={automation.instruction} />
         </div>
+        <AutomationLifecycle
+          key={`${automation.kind}:${automation.id}`}
+          automation={automation}
+          editPath={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/edit${location.search}`}
+        />
         <DetailList>
           {details.map((detail) => (
             <Detail key={detail.label} label={detail.label}>
               {detail.value}
             </Detail>
           ))}
-          <Detail label="Outcomes">
-            {automation.outcomes.length === 0
-              ? "None"
-              : `${automation.outcomes.length} message${automation.outcomes.length === 1 ? "" : "s"}`}
-          </Detail>
-          <Detail label="Destination">
-            <span className="inline-flex items-center gap-1.5">
-              <MapPin
-                aria-hidden="true"
-                className="text-cyan-300/70"
-                size={13}
-              />
-              {automation.destination.label} ·{" "}
-              {automation.destination.visibility}
-            </span>
-          </Detail>
-          <Detail label="Created">
-            {createdBy} · {formatDate(automation.createdAt)}
-          </Detail>
-          <Detail label="Executions">
-            <AutomationExecutionSummary
-              range={props.range}
-              automation={automation}
-            />
+          <Detail label="On success">
+            {automation.outcomes.length === 0 ? (
+              "No message on success"
+            ) : (
+              <ol className="m-0 pl-4">
+                {automation.outcomes.map((outcome, index) => (
+                  <li key={index}>
+                    {automationOutcomeLabel(outcome, automation.destination)}
+                  </li>
+                ))}
+              </ol>
+            )}
           </Detail>
         </DetailList>
-        {automation.totalRuns > 0 ? (
-          <div className="pt-1">
-            <Link
-              className="inline-flex items-center justify-center rounded border border-white/12 bg-white/[0.03] px-3 py-2 font-mono text-xs font-medium text-dashboard-text no-underline transition-colors hover:border-white/25 hover:bg-white/[0.06]"
-              to={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/executions`}
-            >
-              View all executions
-            </Link>
-          </div>
+        {automation.totalRuns > 0 &&
+        automation.lastRunStatus !== "failed" &&
+        automation.lastRunStatus !== "blocked" ? (
+          <Link
+            className="w-fit py-2 text-sm text-dashboard-text underline underline-offset-2"
+            to={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/executions`}
+          >
+            View all runs
+          </Link>
         ) : null}
+        <details>
+          <summary className="cursor-pointer py-3 text-sm text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline focus-visible:outline-dashboard-focus">
+            More details
+          </summary>
+          <DetailList>
+            <Detail label="Connected accounts">
+              {automation.credentialMode === "creator" ? (
+                <>
+                  Uses accounts connected by{" "}
+                  {automation.ownedByViewer ? "you" : automation.createdBy}.
+                </>
+              ) : (
+                "Junior’s accounts only"
+              )}
+            </Detail>
+            <Detail label="Created">{formatDate(automation.createdAt)}</Detail>
+            <Detail label="Run history">
+              <AutomationExecutionSummary
+                range={props.range}
+                automation={automation}
+              />
+            </Detail>
+          </DetailList>
+        </details>
       </section>
     </Drawer>
   );
@@ -169,7 +186,7 @@ function AutomationExecutionSummary(props: {
         ) : (
           <>{automation.totalRuns} total</>
         )}
-        {automation.lastRunAt ? " · Last execution " : " · Never run"}
+        {automation.lastRunAt ? " · Last run " : " · Never run"}
         {automation.lastRunAt && automation.lastConversationId ? (
           <Link
             className="text-dashboard-text underline decoration-white/20 underline-offset-2 hover:decoration-white/60"