@sentry/junior-dashboard 0.264.0 → 0.265.0

package/src/client/conversations/queries.ts

@@ -663,6 +663,35 @@ export function useConversationData(conversationId: string | undefined) {
       },
     );
   }, [conversationId, detailData, mailbox, outbox.data, queryClient]);
+  // The title is generated after the first message, and only the open
+  // Conversation polls. Copy a newer title into loaded feeds, such as the
+  // sidebar and the home list, so they do not keep the old one.
+  const displayTitle = detail.data?.displayTitle;
+  const detailUpdatedAt = detail.dataUpdatedAt;
+  useEffect(() => {
+    if (!conversationId || !displayTitle) return;
+    const feeds = queryClient
+      .getQueryCache()
+      .findAll({ queryKey: ["dashboard", "conversations"] });
+    for (const query of feeds) {
+      const feed = query.state.data as ConversationFeed | undefined;
+      if (!feed || query.state.dataUpdatedAt > detailUpdatedAt) continue;
+      const stale = feed.conversations.some(
+        (conversation) =>
+          conversation.conversationId === conversationId &&
+          conversation.displayTitle !== displayTitle,
+      );
+      if (!stale) continue;
+      queryClient.setQueryData<ConversationFeed>(query.queryKey, {
+        ...feed,
+        conversations: feed.conversations.map((conversation) =>
+          conversation.conversationId === conversationId
+            ? { ...conversation, displayTitle }
+            : conversation,
+        ),
+      });
+    }
+  }, [conversationId, detailUpdatedAt, displayTitle, queryClient]);
   const historyStatus = detailData?.eventHistory.status;
   const historyQueryKey = useMemo(
     () => ["conversation", conversationId, "history", historyStatus] as const,

package/src/client/conversations/transcriptBottomPinning.ts

@@ -15,6 +15,7 @@ import type { ConversationTranscript } from "../types";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 
 const BOTTOM_PROXIMITY_PX = 96;
+const PREVIOUS_PAGE_PROXIMITY_PX = 600;
 const USER_SCROLL_DELTA_PX = 2;
 
 type ScrollRoot = HTMLElement | Window;
@@ -650,6 +651,39 @@ export function usePinnedTranscriptBottom(input: {
   );
 }
 
+/** Load the previous history page when the reader scrolls near the top. */
+export function useAutoLoadPreviousPage(input: {
+  enabled: boolean;
+  historyVersion: string;
+  onLoad: () => void;
+}): RefCallback<HTMLElement> {
+  const [sentinel, setSentinel] = useState<HTMLElement | null>(null);
+  const onLoadRef = useRef(input.onLoad);
+  onLoadRef.current = input.onLoad;
+
+  useEffect(() => {
+    if (!input.enabled || !sentinel) return;
+    if (typeof IntersectionObserver === "undefined") return;
+
+    const root = scrollRootFor(sentinel);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return;
+        observer.disconnect();
+        onLoadRef.current();
+      },
+      {
+        root: root && !isWindowRoot(root) ? root : null,
+        rootMargin: `${PREVIOUS_PAGE_PROXIMITY_PX}px 0px 0px 0px`,
+      },
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [input.enabled, input.historyVersion, sentinel]);
+
+  return setSentinel;
+}
+
 /** Keep the previously visible content at the same viewport offset after a prepend. */
 export function scrollTopAfterPrepend(
   previous: Pick<ScrollSnapshot, "scrollHeight" | "scrollTop">,

package/src/client/format.ts

@@ -791,6 +791,11 @@ export function locationPath(locationId: string): string {
   return `/system/locations/${encodeURIComponent(locationId)}`;
 }
 
+/** Build the Workspace list route that opens one Workspace's details. */
+export function workspacePath(workspaceId: string): string {
+  return `/system/workspaces/${encodeURIComponent(workspaceId)}`;
+}
+
 /** Build the canonical automation detail route for an automation id. */
 export function automationPath(automationId: string): string {
   return `/automations/${encodeURIComponent(automationId)}`;

package/src/client/pages/ConnectionsPage.tsx

@@ -11,7 +11,7 @@ import { del, fetchDashboardJson, post } from "../http";
 import { dashboardContainerClass } from "../styles";
 import { getDashboardAgentName } from "../agentName";
 import { useDocumentTitle } from "../documentTitle";
-import { Button } from "../components/Button";
+import { Button } from "../components/ui/button";
 import { InlineError } from "../components/InlineError";
 import { Card } from "../components/layout/Card";
 
@@ -168,7 +168,7 @@ export function ConnectionsPage() {
                           connectMutation.reset();
                           disconnectMutation.mutate(connection);
                         }}
-                        tone="danger"
+                        variant="danger"
                       >
                         {pendingProvider === connection.provider
                           ? "Disconnecting…"

package/src/client/pages/PersonalTokensPage.tsx

@@ -10,10 +10,10 @@ import { deleteDashboardResource, fetchDashboardJson, post } from "../http";
 import { dashboardContainerClass } from "../styles";
 import { getDashboardAgentName } from "../agentName";
 import { useDocumentTitle } from "../documentTitle";
-import { Button } from "../components/Button";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
 import { InlineError } from "../components/InlineError";
 import { Card } from "../components/layout/Card";
-import { TextInput } from "../components/TextInput";
 
 const personalTokensQueryKey = ["dashboard", "personal-tokens"] as const;
 
@@ -129,7 +129,7 @@ export function PersonalTokensPage() {
             </div>
           ) : (
             <div className="mt-5 flex gap-2">
-              <TextInput
+              <Input
                 aria-label="Token name"
                 className="min-w-0 flex-1"
                 maxLength={80}
@@ -189,7 +189,7 @@ export function PersonalTokensPage() {
                       revokeTokenMutation.mutate(token);
                     }}
                     size="icon"
-                    tone="danger"
+                    variant="danger"
                     type="button"
                   >
                     <Trash2 size={16} />

package/src/client/pages/SettingsPage.tsx

@@ -5,11 +5,11 @@ import {
   dashboardIdentitySchema,
   type DashboardIdentity,
 } from "../../api/schema";
-import { Button } from "../components/Button";
-import { Field } from "../components/Field";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Field, FieldDescription, FieldLabel } from "../components/ui/field";
 import { InlineError } from "../components/InlineError";
 import { Card } from "../components/layout/Card";
-import { TextInput } from "../components/TextInput";
 import { useDocumentTitle } from "../documentTitle";
 import { patch } from "../http";
 import { dashboardContainerClass } from "../styles";
@@ -64,13 +64,9 @@ export function SettingsPage({ identity }: SettingsPageProps) {
         <form className="mt-6" onSubmit={submit}>
           <Card className="mb-0" padding="md" variant="raised">
             <h2 className="m-0 text-lg font-bold">Profile</h2>
-            <Field
-              className="mt-5"
-              help="Your display name is shown with your conversations and activity."
-              htmlFor="display-name"
-              label="Display name"
-            >
-              <TextInput
+            <Field className="mt-5">
+              <FieldLabel htmlFor="display-name">Display name</FieldLabel>
+              <Input
                 autoComplete="name"
                 id="display-name"
                 maxLength={80}
@@ -82,6 +78,9 @@ export function SettingsPage({ identity }: SettingsPageProps) {
                 }}
                 value={displayName}
               />
+              <FieldDescription id="display-name-help">
+                Your display name is shown with your conversations and activity.
+              </FieldDescription>
             </Field>
             <div className="mt-5 flex items-center gap-3">
               <Button disabled={!canSave} type="submit">

package/src/client/pages/admin/ServiceAccountsSection.tsx

@@ -13,7 +13,7 @@ import {
   type serviceAccountSchema,
 } from "@sentry/junior/api/schema";
 import { getDashboardAgentName } from "../../agentName";
-import { Button } from "../../components/Button";
+import { Button } from "../../components/ui/button";
 import { InlineError } from "../../components/InlineError";
 import { StatusChip } from "../../components/StatusChip";
 import { Card } from "../../components/layout/Card";
@@ -192,7 +192,7 @@ export function ServiceAccountsSection(props: {
                     connectMutation.reset();
                     disconnectMutation.mutate(account);
                   }}
-                  tone="danger"
+                  variant="danger"
                 >
                   Disconnect
                 </Button>

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

@@ -4,21 +4,27 @@ import {
   type TimeRangeDays,
 } from "../../components/controls/TimeRangeSelector";
 import type { AutomationExecutionDay } from "@sentry/junior/api/schema";
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
   ActivityChartAverageLine,
-  ActivityChartDateLabels,
-  ActivityChartGrid,
   activityChartAverage,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
-  createActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "../../components/charts/ActivityChart";
+import { ChartContainer, ChartTooltip } from "../../components/ui/chart";
 
 import { Card } from "../../components/layout/Card";
 import { formatCostSummary } from "../../format";
 
-const COST_COLOR = "var(--color-cyan-300)";
+const chartConfig = {
+  costUsd: { color: "var(--color-cyan-300)", label: "Spend" },
+};
+
+function formatSpend(value: number): string {
+  return formatCostSummary({ total: value });
+}
 
 /** Render linked conversation spend for completed automation executions. */
 export function AutomationCostChart(props: {
@@ -28,11 +34,6 @@ export function AutomationCostChart(props: {
 }) {
   const bucketUnit = props.bucketUnit ?? "day";
   const days = props.days;
-  // Cost charts need a wider left gutter for currency tick labels.
-  const layout = createActivityChartLayout(200, { left: 112 });
-  const step =
-    days.length > 0 ? layout.plotWidth / days.length : layout.plotWidth;
-  const barWidth = Math.max(2, Math.min(13, step * 0.68));
   const totals = days.map((day) => day.costUsd);
   const total = totals.reduce((sum, value) => sum + value, 0);
   const maximum = Math.max(0.01, ...totals);
@@ -51,66 +52,44 @@ export function AutomationCostChart(props: {
       </div>
 
       <div className="relative mt-5 overflow-hidden">
-        <ChartSvg
-          aria-label={`Automation execution spend during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
-          className="min-h-40"
-          layout={layout}
+        <ChartContainer
+          className="aspect-auto h-50 w-full"
+          config={chartConfig}
         >
-          <ActivityChartGrid
-            format={(value) => formatCostSummary({ total: value })}
-            layout={layout}
-            maximum={maximum}
-          />
-          {days.map((day, dayIndex) => {
-            const x = layout.left + dayIndex * step + (step - barWidth) / 2;
-            const value = totals[dayIndex] ?? 0;
-            const height = (value / maximum) * layout.plotHeight;
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={
-                  <ActivityTooltipRows
-                    rows={[["spend", formatCostSummary({ total: value })]]}
-                  />
-                }
-                date={day.date}
-                summary={`${formatCostSummary({ total: value })}`}
-              >
-                <g tabIndex={0}>
-                  <rect
-                    fill={COST_COLOR}
-                    height={height}
-                    opacity={value > 0 ? 0.82 : 0.1}
-                    rx="1"
-                    width={barWidth}
-                    x={x}
-                    y={layout.top + layout.plotHeight - height}
-                  />
-                  <rect
-                    fill="transparent"
-                    height={layout.plotHeight}
-                    width={Math.max(barWidth, 8)}
-                    x={x - (Math.max(barWidth, 8) - barWidth) / 2}
-                    y={layout.top}
-                  />
-                </g>
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartAverageLine
-            unit={timeRangeBucketAverageUnit(bucketUnit)}
-            average={average}
-            format={(value) => formatCostSummary({ total: value })}
-            layout={layout}
-            maximum={maximum}
-            stroke="var(--color-slate-200)"
-          />
-          <ActivityChartDateLabels
-            dates={days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+          <BarChart
+            aria-label={`Automation execution spend during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
+            data={days}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis format={formatSpend} maximum={maximum} />
+            <ActivityChartXAxis keys={days.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: AutomationExecutionDay) => [
+                    ["spend", formatSpend(day.costUsd)],
+                  ]}
+                />
+              }
+            />
+            <Bar
+              dataKey="costUsd"
+              fill="var(--color-costUsd)"
+              fillOpacity={0.82}
+              isAnimationActive={false}
+              maxBarSize={13}
+              radius={1}
+            />
+            <ActivityChartAverageLine
+              unit={timeRangeBucketAverageUnit(bucketUnit)}
+              average={average}
+              format={formatSpend}
+              stroke="var(--color-slate-200)"
+            />
+          </BarChart>
+        </ChartContainer>
         {!hasCost ? (
           <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No linked spend in this period.

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

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AutomationSummary } from "@sentry/junior/api/schema";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "../../components/ui/alert-dialog";
+import { FormNotice } from "../../components/FormNotice";
+import { useToastManager } from "../../components/ui/toast";
+import { deleteDashboardResource } from "../../http";
+
+/** Confirm deletion by name and keep a failed request available for retry. */
+export function AutomationDeleteDialog(props: {
+  automation: AutomationSummary;
+  onClose(): void;
+  onDeleted(): void;
+  returnFocus(): HTMLElement | false;
+}) {
+  const [open, setOpen] = useState(true);
+  const queryClient = useQueryClient();
+  const toast = useToastManager();
+  const deletion = useMutation({
+    mutationFn: () =>
+      deleteDashboardResource(
+        `/api/automations/${encodeURIComponent(props.automation.id)}`,
+      ),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["dashboard", "automations"],
+      });
+      props.onDeleted();
+      toast.add({
+        title: "Automation deleted",
+        description: props.automation.title,
+        type: "success",
+      });
+      setOpen(false);
+    },
+  });
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={(next, details) => {
+        if (deletion.isPending) details.cancel();
+        else setOpen(next);
+      }}
+      onOpenChangeComplete={(next) => {
+        if (!next) props.onClose();
+      }}
+    >
+      <AlertDialogContent finalFocus={props.returnFocus}>
+        <AlertDialogTitle>Delete automation?</AlertDialogTitle>
+        <AlertDialogDescription>
+          Delete{" "}
+          <strong className="font-medium text-dashboard-text">
+            {props.automation.title}
+          </strong>
+          ? This removes the Automation and stops future triggers. Work already
+          queued or running may finish.
+        </AlertDialogDescription>
+        {deletion.error ? (
+          <FormNotice
+            tone="error"
+            title="The automation could not be deleted. Try again."
+          />
+        ) : null}
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={deletion.isPending}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            variant="danger"
+            disabled={deletion.isPending}
+            onClick={() => deletion.mutate()}
+          >
+            {deletion.isPending ? "Deleting…" : "Delete automation"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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

@@ -0,0 +1,193 @@
+import type { AutomationSummary } from "@sentry/junior/api/schema";
+import type { ReactNode } from "react";
+import { Link, useLocation } from "react-router";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../components/ui/accordion";
+import { Button } from "../../components/ui/button";
+import { DetailsPanel } from "../../components/DetailsPanel";
+import { InlineError } from "../../components/InlineError";
+import { PageContentSkeleton } from "../../components/PageContentSkeleton";
+import {
+  timeRangeLabel,
+  type TimeRangeDays,
+} from "../../components/controls/TimeRangeSelector";
+import { TranscriptText } from "../../conversations/TranscriptText";
+import { peoplePath } from "../../format";
+import { dashboardInlineLinkClass } from "../../styles";
+import { TriggerFilters } from "./TriggerFilters";
+import { AutomationLifecycle } from "./AutomationLifecycle";
+import { AutomationRecentRuns } from "./AutomationRecentRuns";
+import { AutomationStatus } from "./AutomationStatus";
+import {
+  automationScheduleLabel,
+  formatAutomationRunTime,
+} from "./automationFormat";
+import { automationOutcomeLabel } from "./automationOutcomes";
+
+/** Keep Automation context scrollable above persistent, permission-aware actions. */
+export function AutomationDetails(props: {
+  onClose(): void;
+  onDelete(source: HTMLButtonElement): void;
+  onRetry(): void;
+  error: boolean;
+  range: TimeRangeDays;
+  automation: AutomationSummary | undefined;
+}) {
+  const location = useLocation();
+  const { automation } = props;
+  return (
+    <DetailsPanel
+      label="Automation details"
+      sheetTitle={automation?.title}
+      onClose={props.onClose}
+      title={
+        <h2 className="m-0 break-words font-display text-base font-medium text-dashboard-text">
+          {automation?.title ?? "Automation details"}
+        </h2>
+      }
+    >
+      <div className="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto]">
+        <div
+          aria-label="Automation content"
+          role="region"
+          tabIndex={0}
+          className="min-h-0 overflow-y-auto overscroll-contain p-4 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus [overflow-wrap:anywhere]"
+        >
+          {automation ? (
+            <AutomationDetailsContent
+              automation={automation}
+              range={props.range}
+            />
+          ) : null}
+          {props.error ? (
+            <InlineError>
+              Automation details could not be loaded. It may be unavailable or
+              you may not have access.{" "}
+              <Button onClick={props.onRetry}>Try again</Button>
+            </InlineError>
+          ) : !automation ? (
+            <PageContentSkeleton
+              label="Loading automation details"
+              variant="panel"
+            />
+          ) : null}
+        </div>
+        {automation ? (
+          <AutomationLifecycle
+            automation={automation}
+            onDelete={props.onDelete}
+            editPath={`/automations/${encodeURIComponent(automation.id)}/edit${location.search}`}
+          />
+        ) : null}
+      </div>
+    </DetailsPanel>
+  );
+}
+
+function AutomationDetailsContent({
+  automation,
+  range,
+}: {
+  automation: AutomationSummary;
+  range: TimeRangeDays;
+}) {
+  const location = useLocation();
+  return (
+    <div className="grid min-w-0 gap-5">
+      <AutomationStatus automation={automation} />
+      <section aria-label="Instructions" className="text-sm leading-relaxed">
+        <TranscriptText
+          mentions={automation.mentions ?? []}
+          text={automation.instruction}
+        />
+      </section>
+      <dl className="m-0 grid gap-3 text-xs leading-relaxed">
+        <AutomationFact label="Trigger">
+          {automation.kind === "scheduled" ? (
+            <p className="m-0">{automationScheduleLabel(automation)}</p>
+          ) : (
+            <>
+              <p className="m-0 break-words">{automation.resource}</p>
+              <p className="m-0 mt-1 text-dashboard-text-muted">
+                {automation.trigger.events.join(", ")}
+              </p>
+              <TriggerFilters filters={automation.trigger.filters} />
+            </>
+          )}
+        </AutomationFact>
+        <AutomationFact label="On success">
+          {automation.outcomes.length === 0 ? (
+            <span className="text-dashboard-text-muted">No message</span>
+          ) : (
+            <ol className="m-0 grid list-none gap-2 p-0">
+              {automation.outcomes.map((outcome, index) => (
+                <li key={index}>
+                  Message{" "}
+                  {automationOutcomeLabel(outcome, automation.destination)}
+                </li>
+              ))}
+            </ol>
+          )}
+        </AutomationFact>
+      </dl>
+      <AutomationRecentRuns automation={automation} />
+      <Accordion className="border-t border-dashboard-border pt-1">
+        <AccordionItem value="about">
+          <AccordionTrigger className="min-h-11 text-xs text-dashboard-text-muted">
+            About this Automation
+          </AccordionTrigger>
+          <AccordionContent>
+            <dl className="m-0 grid gap-3 text-xs leading-relaxed">
+              <AutomationFact label="Created by">
+                {automation.createdByEmail ? (
+                  <Link
+                    className={dashboardInlineLinkClass}
+                    to={peoplePath(automation.createdByEmail)}
+                  >
+                    {automation.ownedByViewer ? "you" : automation.createdBy}
+                  </Link>
+                ) : automation.ownedByViewer ? (
+                  "you"
+                ) : (
+                  automation.createdBy
+                )}
+              </AutomationFact>
+              <AutomationFact label="Created">
+                {formatAutomationRunTime(automation.createdAt)}
+              </AutomationFact>
+              <AutomationFact label="Accounts">
+                {automation.credentialMode === "creator"
+                  ? `Uses accounts connected by ${automation.ownedByViewer ? "you" : automation.createdBy}.`
+                  : "Junior’s accounts only"}
+              </AutomationFact>
+              <AutomationFact label="Runs">
+                {automation.runs[range]} runs / {timeRangeLabel(range)} ·{" "}
+                {automation.totalRuns} total
+              </AutomationFact>
+            </dl>
+            <Link
+              className={`${dashboardInlineLinkClass} mt-3 inline-block py-2 text-xs`}
+              to={`/automations/${encodeURIComponent(automation.id)}/versions${location.search}`}
+            >
+              Version history
+            </Link>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
+function AutomationFact(props: { label: string; children: ReactNode }) {
+  return (
+    <div className="grid min-w-0 grid-cols-[5.25rem_minmax(0,1fr)] gap-3">
+      <dt className="text-dashboard-text-muted">{props.label}</dt>
+      <dd className="m-0 min-w-0">{props.children}</dd>
+    </div>
+  );
+}