@sentry/junior-dashboard 0.232.0 → 0.234.0

package/src/client/conversations/EventUsage.tsx

@@ -0,0 +1,118 @@
+import type { ConversationUsage } from "@sentry/junior/api/schema";
+
+import { formatCostBreakdown, summarizeCost } from "../format";
+import { cn } from "../styles";
+
+/** Align recorded token counts with their costs without adding overlapping counters. */
+export function EventUsage({ usage }: { usage?: ConversationUsage }) {
+  const cost = summarizeCost(usage);
+  const rows = [
+    { label: "Input", tokens: usage?.inputTokens, cost: usage?.cost?.input },
+    { label: "Output", tokens: usage?.outputTokens, cost: usage?.cost?.output },
+    {
+      label: "Cache read",
+      tokens: usage?.cachedInputTokens,
+      cost: usage?.cost?.cacheRead,
+    },
+    {
+      label: "Cache write",
+      tokens: usage?.cacheCreationTokens,
+      cost: usage?.cost?.cacheWrite,
+    },
+    { label: "Reasoning", tokens: usage?.reasoningTokens },
+    { label: "Total", tokens: usage?.totalTokens, cost: cost?.total },
+  ].filter((row) => row.tokens !== undefined || row.cost !== undefined);
+
+  if (rows.length === 0) {
+    return (
+      <p className="m-0 text-sm text-dashboard-text-muted">
+        Token usage and cost were not recorded for this call.
+      </p>
+    );
+  }
+
+  return (
+    <>
+      <div className="min-w-0 overflow-x-auto">
+        <table
+          aria-label="Model call token and cost breakdown"
+          className="w-full min-w-72 table-fixed border-collapse text-xs leading-relaxed"
+        >
+          <colgroup>
+            <col />
+            <col className="w-24" />
+            <col className="w-24" />
+          </colgroup>
+          <thead>
+            <tr className="border-b border-dashboard-border text-dashboard-text-muted">
+              <th scope="col" className="py-2 text-left font-normal">
+                Usage
+              </th>
+              <th scope="col" className="py-2 text-right font-normal">
+                Tokens
+              </th>
+              <th scope="col" className="py-2 text-right font-normal">
+                Cost (USD)
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr
+                key={row.label}
+                className={cn(
+                  "border-b border-dashboard-border-subtle last:border-b-0",
+                  row.label === "Total" &&
+                    "border-t border-dashboard-border font-semibold",
+                )}
+              >
+                <th
+                  scope="row"
+                  className={cn(
+                    "py-2 text-left font-normal",
+                    row.label === "Total"
+                      ? "font-semibold text-dashboard-text"
+                      : "text-dashboard-text-muted",
+                  )}
+                >
+                  {row.label}
+                </th>
+                <td className="py-2 text-right font-mono tabular-nums text-dashboard-text">
+                  {row.tokens === undefined ? (
+                    <span
+                      aria-label="Not recorded"
+                      className="text-dashboard-text-faint"
+                    >
+                      —
+                    </span>
+                  ) : (
+                    row.tokens.toLocaleString("en-US")
+                  )}
+                </td>
+                <td className="py-2 text-right font-mono tabular-nums text-dashboard-text">
+                  {row.cost === undefined ? (
+                    <span
+                      aria-label="Not recorded separately"
+                      className="text-dashboard-text-faint"
+                    >
+                      —
+                    </span>
+                  ) : (
+                    <span title={`${row.cost} USD`}>
+                      {formatCostBreakdown({ total: row.cost })}
+                    </span>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted">
+        This call only · Estimated costs
+        <br />
+        Input excludes cache reads and writes. Reasoning is included in output.
+      </p>
+    </>
+  );
+}

package/src/client/conversations/eventLog.ts

@@ -1,6 +1,57 @@
-import type { ConversationReportEventData } from "@sentry/junior/api/schema";
+import type {
+  ConversationReportEvent,
+  ConversationReportEventData,
+} from "@sentry/junior/api/schema";
 
 import { toolCallPreview } from "./toolCallPreview";
+import {
+  formatCompactNumber,
+  formatCostBreakdown,
+  summarizeCost,
+} from "../format";
+
+/** Read recorded event configuration, including reports from before model context was added. */
+export function eventLogModel(
+  event: ConversationReportEvent,
+): ConversationReportEvent["model"] {
+  if (event.model) return event.model;
+  const data = event.data;
+  if (data.type === "turn_routed" || data.type === "handoff") {
+    return {
+      modelId: data.modelId,
+      modelProfile: data.modelProfile,
+      reasoningLevel: data.reasoningLevel,
+    };
+  }
+  return undefined;
+}
+
+/** Keep call costs distinct from router cost and never repeat usage on tool results. */
+export function eventLogUsage(event: ConversationReportEvent): string {
+  const usage = event.modelCall?.usage;
+  const cost = summarizeCost(usage);
+  const fields = [
+    cost ? `${formatCostBreakdown(cost)} call` : undefined,
+    event.data.type === "turn_routed" && event.data.costUsd !== undefined
+      ? `${formatCostBreakdown({ total: event.data.costUsd })} router`
+      : undefined,
+    ...(
+      [
+        ["inputTokens", "in"],
+        ["outputTokens", "out"],
+        ["cachedInputTokens", "cache read"],
+        ["cacheCreationTokens", "cache write"],
+        ["reasoningTokens", "reasoning"],
+        ["totalTokens", "total"],
+      ] as const
+    ).map(([key, label]) =>
+      usage?.[key] !== undefined
+        ? `${formatCompactNumber(usage[key])} ${label}`
+        : undefined,
+    ),
+  ];
+  return fields.filter((field) => field !== undefined).join(" · ");
+}
 
 /** Summarize an event without merging it with earlier or later events. */
 export function eventLogSummary(data: ConversationReportEventData): string {
@@ -10,9 +61,11 @@ export function eventLogSummary(data: ConversationReportEventData): string {
     case "message_handled":
       return data.messageId;
     case "assistant_message":
-      return data.parts
-        .map((part) => (part.redacted ? "Content hidden" : part.text))
-        .join(" · ");
+      return (
+        data.parts
+          .map((part) => (part.redacted ? "Content hidden" : part.text))
+          .join(" · ") || "Model call recorded"
+      );
     case "tool_calls":
       return data.calls
         .map((call) => {
@@ -25,7 +78,7 @@ export function eventLogSummary(data: ConversationReportEventData): string {
         ? `${data.state} · ${data.failureCode}${data.failureReason ? ` · ${data.failureReason}` : ""}`
         : `${data.state} · ${data.turnId}`;
     case "turn_routed":
-      return `${data.modelProfile} · ${data.modelId} · ${data.reasoningLevel}`;
+      return `Route selected · ${data.source}${data.confidence !== undefined ? ` · ${Math.round(data.confidence * 100)}% confidence` : ""}`;
     case "turn_context":
       return `${data.pluginName} · ${data.kind} · v${data.version}`;
     case "guardian_action_reviewed":
@@ -39,7 +92,7 @@ export function eventLogSummary(data: ConversationReportEventData): string {
     case "compaction":
       return data.summary ?? "Agent history compacted";
     case "handoff":
-      return `${data.modelProfile} · ${data.modelId}`;
+      return "Handoff · New configuration applied";
     case "subagent":
       return `${data.subagentKind} · ${data.status} · ${data.childConversationId}`;
   }

package/src/client/conversations/eventTranscript.ts

@@ -242,6 +242,8 @@ export function transcriptMessagesFromEvents(
     }
 
     if (data.type === "assistant_message") {
+      // Calls with no reasoning still carry usage in the event log, not a chat bubble.
+      if (data.parts.length === 0) continue;
       messages.push(
         eventMessage(
           event,

package/src/client/conversations/transcriptBottomPinning.ts

@@ -73,7 +73,7 @@ export function transcriptJuniorMessageVersion(
         data.redacted ? "redacted" : (data.text?.length ?? 0),
       ].join(":");
     }
-    if (data.type === "assistant_message") {
+    if (data.type === "assistant_message" && data.parts.length > 0) {
       const lastPart = data.parts.at(-1);
       return [
         event.seq,
@@ -117,7 +117,7 @@ function changesVisibleTranscript(event: ConversationReportEvent): boolean {
   if (data.type === "turn_lifecycle") return data.state === "failed";
   return (
     data.type === "message" ||
-    data.type === "assistant_message" ||
+    (data.type === "assistant_message" && data.parts.length > 0) ||
     data.type === "tool_calls" ||
     data.type === "subagent" ||
     data.type === "structured_event" ||

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"

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

@@ -0,0 +1,172 @@
+import { Link, useLocation, useParams } from "react-router";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowLeft } from "lucide-react";
+import {
+  automationEditSchema,
+  type AutomationSummary,
+} from "@sentry/junior/api/schema";
+import { useAutomationData } from "../../api";
+import { fetchDashboardJson } from "../../http";
+import { Button } from "../../components/Button";
+import { FormNotice } from "../../components/FormNotice";
+import { StatusChip } from "../../components/StatusChip";
+import { AutomationsNavigation } from "./AutomationsPageLayout";
+import { AutomationEditor } from "./AutomationEditor";
+import { AutomationEditorLoading } from "./AutomationEditorLoading";
+import { AutomationFormSection } from "./AutomationFormSection";
+import { automationOutcomeLabel } from "./automationOutcomes";
+
+/** Load a linkable editor, with readable public values for non-creators. */
+export function AutomationEditPage(props: { enabled: boolean }) {
+  const { kind, automationId } = useParams();
+  const location = useLocation();
+  const summary = useAutomationData(props.enabled, automationId);
+  const canEdit =
+    summary.data?.ownedByViewer &&
+    !(summary.data.kind === "scheduled" && summary.data.status === "completed");
+  const edit = useQuery({
+    queryKey: ["dashboard", "automations", "edit", kind, automationId],
+    enabled: props.enabled && Boolean(canEdit) && summary.data?.kind === kind,
+    retry: false,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        automationEditSchema,
+        `/api/automations/${kind}/${encodeURIComponent(automationId!)}/edit`,
+        signal,
+      ),
+  });
+  const returnPath = `/automations/list${location.search}`;
+  const value = summary.data;
+  const status =
+    value?.kind === "event"
+      ? value.status === "paused"
+        ? "paused"
+        : value.triggerAvailable
+          ? "active"
+          : "unavailable"
+      : value?.status;
+  const statusTone =
+    status === "active"
+      ? "success"
+      : status === "blocked" || status === "unavailable"
+        ? "warning"
+        : "neutral";
+  return (
+    <>
+      <AutomationsNavigation />
+      <div className="mx-auto w-full min-w-0 max-w-5xl px-5 pt-7 sm:px-8 sm:pt-9">
+        <Link
+          to={returnPath}
+          className="inline-flex min-h-8 items-center gap-2 text-sm text-dashboard-text-muted no-underline hover:text-dashboard-text"
+        >
+          <ArrowLeft aria-hidden size={15} />
+          All automations
+        </Link>
+        <div className="mt-4 mb-8 flex flex-wrap items-start justify-between gap-4">
+          <div className="min-w-0">
+            <h1 className="m-0 break-words font-display text-3xl font-light tracking-tight">
+              {value && !canEdit ? value.title : "Edit automation"}
+            </h1>
+            {value ? (
+              <p className="mt-2 mb-0 text-sm text-dashboard-text-muted">
+                Created by {value.ownedByViewer ? "you" : value.createdBy} ·{" "}
+                {value.destination.label}
+              </p>
+            ) : null}
+          </div>
+          {value ? (
+            <StatusChip tone={statusTone}>
+              {status === "unavailable" ? "Trigger unavailable" : status}
+            </StatusChip>
+          ) : null}
+        </div>
+        {(!value && summary.error) ||
+        (!edit.data && edit.error) ||
+        (value && value.kind !== kind) ? (
+          <FormNotice tone="error" title="Automation could not be loaded.">
+            It may no longer be available, or you may not have access.{" "}
+            <Button
+              onClick={() => {
+                void summary.refetch();
+                if (canEdit) void edit.refetch();
+              }}
+            >
+              Try again
+            </Button>
+          </FormNotice>
+        ) : !value || (canEdit && !edit.data) ? (
+          <AutomationEditorLoading />
+        ) : canEdit && edit.data ? (
+          <AutomationEditor
+            key={`${kind}:${automationId}`}
+            automation={edit.data}
+            summary={value}
+            returnPath={returnPath}
+          />
+        ) : (
+          <AutomationReadOnly automation={value} />
+        )}
+      </div>
+    </>
+  );
+}
+
+function AutomationReadOnly({ automation }: { automation: AutomationSummary }) {
+  return (
+    <>
+      <p className="mb-6 text-sm text-dashboard-text-muted">
+        {automation.ownedByViewer
+          ? "This automation has completed and cannot be edited. It will not run again."
+          : `Only ${automation.createdBy} can edit this automation.`}
+      </p>
+      <AutomationFormSection title="What to do" detail="The saved instruction.">
+        <p className="m-0 whitespace-pre-wrap break-words text-sm leading-relaxed">
+          {automation.instruction}
+        </p>
+      </AutomationFormSection>
+      <AutomationFormSection title="When to run" detail="The saved trigger.">
+        {automation.kind === "scheduled" ? (
+          <p className="m-0 text-sm">
+            {automation.schedule} · {automation.timezone}
+          </p>
+        ) : (
+          <div className="grid gap-3 text-sm">
+            <p className="m-0 break-words">{automation.resource}</p>
+            <p className="m-0 break-words">{automation.events.join(", ")}</p>
+            {automation.match ? (
+              <pre className="whitespace-pre-wrap break-words text-xs">
+                {JSON.stringify(automation.match, null, 2)}
+              </pre>
+            ) : null}
+          </div>
+        )}
+      </AutomationFormSection>
+      <AutomationFormSection
+        title="Where results go"
+        detail="Messages after successful work."
+      >
+        {automation.outcomes.length ? (
+          <ol className="m-0 grid gap-2 pl-5 text-sm">
+            {automation.outcomes.map((outcome, index) => (
+              <li key={index}>
+                {automationOutcomeLabel(outcome, automation.destination)}
+              </li>
+            ))}
+          </ol>
+        ) : (
+          <p className="m-0 text-sm">No success message</p>
+        )}
+      </AutomationFormSection>
+      <AutomationFormSection
+        title="Credentials"
+        detail="The accounts Junior can use."
+      >
+        <p className="m-0 text-sm">
+          {automation.credentialMode === "creator"
+            ? `Uses ${automation.ownedByViewer ? "your" : `${automation.createdBy}’s`} connected accounts.`
+            : "System credentials only."}
+        </p>
+      </AutomationFormSection>
+    </>
+  );
+}