@sentry/junior-dashboard 0.249.0 → 0.251.0

package/src/client/conversations/ConversationMeta.tsx

@@ -486,45 +486,18 @@ function LocationLink(props: { label: string; locationUrl?: string }) {
 function SourceTask(props: {
   sourceTask: NonNullable<ConversationDetailReport["sourceTask"]>;
 }) {
-  const kindLabel =
-    props.sourceTask.kind === "scheduled"
-      ? "Scheduled automation"
-      : "Event automation";
   const automationId = props.sourceTask.id?.trim();
   const title = props.sourceTask.title?.trim();
-  const link = automationId ? (
+  const label = title ? `Automation: ${title}` : "Automation";
+  return automationId ? (
     <Link
       className={dashboardInlineLinkClass}
       to={automationPath(automationId)}
     >
-      Triggered by {kindLabel}
+      {label}
     </Link>
   ) : (
-    <span>Triggered by {kindLabel}</span>
-  );
-  // Keep tooltips to short identity fields. Full task prompts belong on the
-  // task details page, not in hover chrome.
-  if (!title) return link;
-  return (
-    <Tooltip
-      align="left"
-      content={
-        <span className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1">
-          <span>Title</span>
-          <span className="text-dashboard-text">{title}</span>
-          {automationId ? (
-            <>
-              <span>ID</span>
-              <span className="break-all text-dashboard-text">
-                {automationId}
-              </span>
-            </>
-          ) : null}
-        </span>
-      }
-    >
-      {link}
-    </Tooltip>
+    <span>{label}</span>
   );
 }
 

package/src/client/conversations/ConversationTranscript.tsx

@@ -30,6 +30,10 @@ import {
   TranscriptMessageView,
 } from "./TranscriptMessageView";
 import { TranscriptEventView } from "./TranscriptEventView";
+import {
+  isAutomationTriggerMessage,
+  TranscriptAutomationTriggerView,
+} from "./TranscriptAutomationTriggerView";
 import { TranscriptTypingIndicator } from "./TranscriptTypingIndicator";
 import {
   groupTranscriptMessages,
@@ -196,7 +200,13 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
         />
       )}
       renderMessage={(entry) =>
-        entry.message.eventType ? (
+        props.conversation.sourceTask &&
+        isAutomationTriggerMessage(props.conversation, entry.message) ? (
+          <TranscriptAutomationTriggerView
+            message={entry.message}
+            sourceTask={props.conversation.sourceTask}
+          />
+        ) : entry.message.eventType ? (
           <TranscriptRailEvent
             kind="event"
             objectType={entry.message.eventObjectType}
@@ -401,7 +411,13 @@ function RedactedTranscriptView(props: {
         />
       )}
       renderMessage={(entry) =>
-        entry.message.eventType ? (
+        props.conversation.sourceTask &&
+        isAutomationTriggerMessage(props.conversation, entry.message) ? (
+          <TranscriptAutomationTriggerView
+            message={entry.message}
+            sourceTask={props.conversation.sourceTask}
+          />
+        ) : entry.message.eventType ? (
           <TranscriptRailEvent
             kind="event"
             objectType={entry.message.eventObjectType}

package/src/client/conversations/ConversationUsageBreakdown.tsx

@@ -24,33 +24,58 @@ import {
   tokenTypeRows,
 } from "./TelemetryMetrics";
 
+/** One token type of a model, shown as an indented row under the model. */
+type BreakdownPart = {
+  cost?: string;
+  count: string;
+  label: string;
+};
+
 type BreakdownRow = {
   cost: string;
   count: string;
-  /** Muted second line, such as the token types of one model. */
-  detail?: string;
   key: string;
   label: ReactNode;
+  parts?: BreakdownPart[];
 };
 
 const NOT_RECORDED = "—";
 
-/** Name each recorded token type, such as `42k input · 4.6k output`. */
-function tokenTypes(
+/**
+ * List each recorded token type of one model with its own count and, when
+ * the provider reports it, its own cost. Reasoning tokens are part of the
+ * output tokens, so they have no cost of their own.
+ */
+function tokenTypeParts(
   usage: ConversationModelUsage["usage"],
-): string | undefined {
+  formatCost: (value: number) => string,
+): BreakdownPart[] | undefined {
   const summary = summarizeUsage(usage);
-  const text = summary
-    ? tokenTypeRows(summary)
-        .map((row) => `${row.value} ${row.label}`)
-        .join(" · ")
-    : "";
-  return text || undefined;
+  if (!summary) return undefined;
+  const cost = summarizeCost(usage);
+  const costs: Readonly<Record<string, number | undefined>> = {
+    cached: cost?.cacheRead,
+    "cache write": cost?.cacheWrite,
+    input: cost?.input,
+    output: cost?.output,
+  };
+  const parts = tokenTypeRows(summary).map((row) => {
+    const value = costs[row.label];
+    return {
+      cost: value === undefined ? undefined : formatCost(value),
+      count: row.value,
+      label: row.label === "reasoning" ? "reasoning (in output)" : row.label,
+    };
+  });
+  return parts.length ? parts : undefined;
 }
 
+const CELL = "text-right align-top font-sans tabular-nums";
+
 /**
  * One usage table. Every table in the breakdown shares column widths, so the
- * cost column lines up from table to table.
+ * cost column lines up from table to table. Each row is its own `tbody`, so
+ * the token types of a model stay grouped under it.
  */
 function BreakdownTable(props: {
   /** Header of the count column, such as Tokens or Calls. */
@@ -83,31 +108,47 @@ function BreakdownTable(props: {
             </th>
           </tr>
         </thead>
-        <tbody>
-          {props.rows.map((row) => (
-            <tr
-              className="border-b border-dashboard-border-subtle last:border-b-0"
-              key={row.key}
-            >
-              <th scope="row" className="py-2 pr-3 text-left font-normal">
-                <span className="block truncate text-dashboard-text">
-                  {row.label}
-                </span>
-                {row.detail ? (
-                  <span className="mt-0.5 block text-dashboard-text-faint">
-                    {row.detail}
-                  </span>
-                ) : null}
+        {props.rows.map((row) => (
+          <tbody
+            className="border-b border-dashboard-border-subtle last-of-type:border-b-0"
+            key={row.key}
+          >
+            <tr className="text-dashboard-text">
+              <th
+                scope="row"
+                className={`pr-3 text-left font-normal ${row.parts ? "pt-2 pb-0.5" : "py-2"}`}
+              >
+                <span className="block truncate">{row.label}</span>
               </th>
-              <td className="py-2 text-right align-top font-sans tabular-nums text-dashboard-text">
+              <td className={`${CELL} ${row.parts ? "pt-2 pb-0.5" : "py-2"}`}>
                 {row.count}
               </td>
-              <td className="py-2 text-right align-top font-sans tabular-nums text-dashboard-text">
+              <td className={`${CELL} ${row.parts ? "pt-2 pb-0.5" : "py-2"}`}>
                 {row.cost}
               </td>
             </tr>
-          ))}
-          {props.total ? (
+            {row.parts?.map((part, index, parts) => {
+              const padding = index === parts.length - 1 ? "pb-2" : "";
+              return (
+                <tr
+                  className="text-2xs leading-5 text-dashboard-text-faint"
+                  key={part.label}
+                >
+                  <th
+                    scope="row"
+                    className={`truncate pl-3 pr-3 text-left font-normal ${padding}`}
+                  >
+                    {part.label}
+                  </th>
+                  <td className={`${CELL} ${padding}`}>{part.count}</td>
+                  <td className={`${CELL} ${padding}`}>{part.cost}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        ))}
+        {props.total ? (
+          <tfoot>
             <tr className="border-t border-dashboard-border font-semibold text-dashboard-text">
               <th scope="row" className="py-2 text-left font-semibold">
                 {props.total.label}
@@ -119,8 +160,8 @@ function BreakdownTable(props: {
                 {props.total.cost}
               </td>
             </tr>
-          ) : null}
-        </tbody>
+          </tfoot>
+        ) : null}
       </table>
     </div>
   );
@@ -217,7 +258,6 @@ export function ConversationUsageBreakdown(props: {
           rows={models.map(({ cost: itemCost, item, tokens: itemTokens }) => ({
             cost: formatMaybeCost(itemCost),
             count: formatTokens(itemTokens),
-            detail: tokenTypes(item.usage),
             key: item.modelId,
             label: (
               <span className="flex min-w-0 items-baseline gap-2">
@@ -234,6 +274,7 @@ export function ConversationUsageBreakdown(props: {
                 ) : null}
               </span>
             ),
+            parts: tokenTypeParts(item.usage, formatCost),
           }))}
           total={
             models.length > 1

package/src/client/conversations/README.md

@@ -25,6 +25,13 @@ shared controls and overlays.
 - `TranscriptSubagentView` renders a child agent as a card with its name,
   status, run time, and title. It matches the child agent rows in the details
   drawer and opens the child transcript.
+- `TranscriptAutomationTriggerView` renders the input of an Automation run as
+  one card. The report names that message in `sourceTask.triggerMessageId`.
+  The card shows the Automation name and a link to it. A second line shows the
+  trigger, the run time, and whose credentials the run used. The credential
+  part comes from the run's dispatch record, not the Automation's current
+  setting. It is left out when that record is gone. The run input is not from
+  a person, so it stays collapsed behind "Show prompt".
 - `TranscriptAttachments` owns wrapping for both message attachments and file
   deliveries. `ImageAttachment` owns image previews.
 - `TranscriptTurnContextView` owns context content. The shared `Drawer` owns

package/src/client/conversations/TranscriptAutomationTriggerView.tsx

@@ -0,0 +1,117 @@
+import { ArrowRight, ChevronRight } from "lucide-react";
+import { useId, useState } from "react";
+import type { ConversationDetailReport } from "@sentry/junior/api/schema";
+
+import { ButtonLink } from "../components/Button";
+import { ObjectIcon } from "../components/ObjectIcon";
+import { automationPath, formatRelativeTime } from "../format";
+import { messageRawText } from "./transcriptRenderModel";
+import { HighlightText } from "./transcriptSearch";
+import { RedactedMarker } from "./TranscriptRedacted";
+import { cn } from "../styles";
+import type { ConversationTranscript, TranscriptViewMessage } from "../types";
+
+type SourceTask = NonNullable<ConversationDetailReport["sourceTask"]>;
+
+/** True when a message is the trigger input of an Automation run. */
+export function isAutomationTriggerMessage(
+  conversation: ConversationTranscript,
+  message: TranscriptViewMessage,
+): boolean {
+  const triggerMessageId = conversation.sourceTask?.triggerMessageId;
+  return Boolean(
+    triggerMessageId &&
+    message.role === "user" &&
+    message.messageId === triggerMessageId,
+  );
+}
+
+function runsAsLabel(sourceTask: SourceTask): string | undefined {
+  if (sourceTask.credentialMode === "system") return "Runs as system";
+  if (sourceTask.credentialMode === "creator" && sourceTask.credentialUser) {
+    return `Runs as ${sourceTask.credentialUser}`;
+  }
+  return undefined;
+}
+
+/**
+ * Show which Automation started this run, what triggered it, and whose
+ * credentials it used. The run input is not from a person, so it stays
+ * collapsed behind "Show prompt".
+ */
+export function TranscriptAutomationTriggerView(props: {
+  message: TranscriptViewMessage;
+  sourceTask: SourceTask;
+}) {
+  const text = messageRawText(props.message);
+  const redacted = props.message.parts.some(
+    (part) => part.type === "text" && part.redacted,
+  );
+  const [open, setOpen] = useState(false);
+  const promptId = useId();
+  const automationId = props.sourceTask.id?.trim();
+  const name = props.sourceTask.title?.trim() || "Automation";
+  const details = [
+    props.sourceTask.triggerLabel,
+    props.message.timestamp
+      ? formatRelativeTime(new Date(props.message.timestamp).toISOString())
+      : undefined,
+    runsAsLabel(props.sourceTask),
+  ].filter(Boolean);
+
+  return (
+    <section
+      aria-label={name}
+      className="grid w-full min-w-0 max-w-[37.5rem] gap-2 rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-panel px-4 py-3"
+    >
+      <div className="flex min-w-0 items-center gap-3">
+        <ObjectIcon objectType="automation" size={16} decorative />
+        <span className="min-w-0 flex-1 truncate font-sans text-sm font-semibold text-dashboard-text">
+          <HighlightText text={name} />
+        </span>
+        {automationId ? (
+          <ButtonLink
+            className="h-8 shrink-0 text-xs"
+            to={automationPath(automationId)}
+          >
+            Open automation
+            <ArrowRight aria-hidden="true" size={14} />
+          </ButtonLink>
+        ) : null}
+      </div>
+      {details.length > 0 ? (
+        <p className="m-0 min-w-0 break-words text-xs leading-relaxed text-dashboard-text-muted">
+          {details.join(" · ")}
+        </p>
+      ) : null}
+      {text ? (
+        <div className="min-w-0">
+          <button
+            aria-controls={promptId}
+            aria-expanded={open}
+            className="-mx-1 inline-flex cursor-pointer items-center gap-1 rounded-sm border-0 bg-transparent px-1 py-0.5 font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
+            onClick={() => setOpen((value) => !value)}
+            type="button"
+          >
+            <ChevronRight
+              aria-hidden="true"
+              className={cn("size-3 transition-transform", open && "rotate-90")}
+              strokeWidth={2.2}
+            />
+            {open ? "Hide prompt" : "Show prompt"}
+          </button>
+          {open ? (
+            <pre
+              className="mt-2 max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-lg border border-dashboard-border-subtle bg-dashboard-bg px-3 py-2 font-mono text-xs leading-relaxed text-dashboard-text-muted"
+              id={promptId}
+            >
+              <HighlightText text={text} />
+            </pre>
+          ) : null}
+        </div>
+      ) : redacted ? (
+        <RedactedMarker />
+      ) : null}
+    </section>
+  );
+}

package/src/client/pages/ConnectionsPage.tsx

@@ -0,0 +1,207 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Plug } from "lucide-react";
+import type { z } from "zod";
+import {
+  connectionListSchema,
+  disconnectConnectionResponseSchema,
+  startConnectionResponseSchema,
+  type connectionSchema,
+} from "@sentry/junior/api/schema";
+import { del, fetchDashboardJson, post } from "../http";
+import { dashboardContainerClass } from "../styles";
+import { getDashboardAgentName } from "../agentName";
+import { useDocumentTitle } from "../documentTitle";
+import { Button } from "../components/Button";
+import { InlineError } from "../components/InlineError";
+import { Card } from "../components/layout/Card";
+
+type Connection = z.infer<typeof connectionSchema>;
+
+const connectionsQueryKey = ["dashboard", "connections"] as const;
+
+function connectionPath(provider: string): string {
+  return `/api/connections/${encodeURIComponent(provider)}`;
+}
+
+/** Connect and disconnect the viewer's plugin accounts. */
+export function ConnectionsPage() {
+  useDocumentTitle("Connected accounts");
+  const queryClient = useQueryClient();
+  const connectionsQuery = useQuery({
+    queryKey: connectionsQueryKey,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(connectionListSchema, "/api/connections", signal),
+    // OAuth finishes in another tab. Refresh when the viewer returns.
+    refetchOnWindowFocus: true,
+    retry: false,
+  });
+  const connectMutation = useMutation({
+    mutationFn: (input: { provider: string; popup: Window | null }) =>
+      post(startConnectionResponseSchema, connectionPath(input.provider), {}),
+    onSuccess: ({ authorizationUrl }, { popup }) => {
+      // A blocked popup returns null, so use this tab. A tab the viewer
+      // closed means they cancelled; keep them on the dashboard.
+      if (!popup) {
+        window.location.assign(authorizationUrl);
+        return;
+      }
+      if (popup.closed) return;
+      popup.opener = null;
+      popup.location.href = authorizationUrl;
+    },
+    onError: (_error, { popup }) => {
+      popup?.close();
+    },
+  });
+  const disconnectMutation = useMutation({
+    mutationFn: (connection: Connection) =>
+      del(
+        disconnectConnectionResponseSchema,
+        connectionPath(connection.provider),
+      ),
+    onSuccess: (_result, connection) => {
+      queryClient.setQueryData<{ connections: Connection[] }>(
+        connectionsQueryKey,
+        (current) =>
+          current && {
+            connections: current.connections.map((item) =>
+              item.provider === connection.provider
+                ? {
+                    provider: item.provider,
+                    displayName: item.displayName,
+                    description: item.description,
+                    connected: false,
+                  }
+                : item,
+            ),
+          },
+      );
+    },
+  });
+  const connections = connectionsQuery.data?.connections ?? [];
+  const busy = connectMutation.isPending || disconnectMutation.isPending;
+  const pendingProvider = connectMutation.isPending
+    ? connectMutation.variables?.provider
+    : disconnectMutation.isPending
+      ? disconnectMutation.variables?.provider
+      : undefined;
+  const listFailed = !connectionsQuery.data && connectionsQuery.isError;
+  const displayedError = connectMutation.isError
+    ? "Could not start the connection. Try again."
+    : disconnectMutation.isError
+      ? "Could not disconnect the account. Try again."
+      : listFailed
+        ? "Could not load connected accounts. Try again."
+        : undefined;
+
+  return (
+    <div className={`${dashboardContainerClass} px-4 py-8 md:px-8`}>
+      <section className="mx-auto w-full max-w-3xl">
+        <h1 className="m-0 text-2xl font-bold">Connected accounts</h1>
+        <p className="mt-2 mb-0 max-w-2xl text-sm text-dashboard-text-muted">
+          Connect an account so {getDashboardAgentName()} can act as you in
+          conversations you start here.
+        </p>
+
+        <Card className="mb-0 mt-6" padding="md" variant="raised">
+          {displayedError ? (
+            <InlineError className={listFailed ? undefined : "mb-4"}>
+              {displayedError}
+            </InlineError>
+          ) : null}
+          {listFailed ? null : (
+            <div className="space-y-2">
+              {connectionsQuery.isPending ? (
+                <p className="m-0 text-sm text-dashboard-text-muted">
+                  Loading connected accounts…
+                </p>
+              ) : connections.length === 0 ? (
+                <p className="m-0 text-sm text-dashboard-text-muted">
+                  No installed plugins support account connections.
+                </p>
+              ) : (
+                connections.map((connection) => (
+                  <div
+                    className="flex items-center gap-3 rounded-md border border-dashboard-border-strong p-3"
+                    key={connection.provider}
+                  >
+                    <Plug
+                      className="shrink-0 text-dashboard-accent"
+                      size={16}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <p className="m-0 truncate text-sm font-semibold">
+                        {connection.displayName}
+                      </p>
+                      <p className="mt-1 mb-0 line-clamp-2 break-words text-xs text-dashboard-text-muted">
+                        {connection.connected ? (
+                          connection.account ? (
+                            <>
+                              Connected as{" "}
+                              {connection.account.url ? (
+                                <a
+                                  className="text-dashboard-text"
+                                  href={connection.account.url}
+                                  rel="noreferrer"
+                                  target="_blank"
+                                >
+                                  {connection.account.label}
+                                </a>
+                              ) : (
+                                connection.account.label
+                              )}
+                            </>
+                          ) : (
+                            "Connected"
+                          )
+                        ) : (
+                          connection.description
+                        )}
+                      </p>
+                    </div>
+                    {connection.connected ? (
+                      <Button
+                        aria-busy={pendingProvider === connection.provider}
+                        aria-label={`Disconnect ${connection.displayName}`}
+                        disabled={busy}
+                        onClick={() => {
+                          connectMutation.reset();
+                          disconnectMutation.mutate(connection);
+                        }}
+                        tone="danger"
+                      >
+                        {pendingProvider === connection.provider
+                          ? "Disconnecting…"
+                          : "Disconnect"}
+                      </Button>
+                    ) : (
+                      <Button
+                        aria-busy={pendingProvider === connection.provider}
+                        aria-label={`Connect ${connection.displayName}`}
+                        disabled={busy}
+                        onClick={() => {
+                          disconnectMutation.reset();
+                          // Open the tab during the click so popup blockers
+                          // allow it, then point it at the provider.
+                          const popup = window.open("about:blank", "_blank");
+                          connectMutation.mutate({
+                            provider: connection.provider,
+                            popup,
+                          });
+                        }}
+                      >
+                        {pendingProvider === connection.provider
+                          ? "Connecting…"
+                          : "Connect"}
+                      </Button>
+                    )}
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+        </Card>
+      </section>
+    </div>
+  );
+}