@sentry/junior-dashboard 0.273.0 → 0.275.0

package/src/client/conversations/TelemetryMetrics.tsx

@@ -115,7 +115,6 @@ function modelHeading(
 /** Rows shown before the rest of a list rolls into one "N more" line. */
 const MODEL_LIMIT = 4;
 const AUXILIARY_LIMIT = 3;
-const DETAILS_FOOTER = "Full breakdown in Details";
 
 type RankedRow = UsageCardRow & { amount: number };
 
@@ -222,7 +221,6 @@ function tokenCard(
   compactionCount: number | undefined,
   liveModelId: string | undefined,
   childAgentTotals: ConversationChildAgentTotals | undefined,
-  detailsHint: boolean,
 ): UsageCardProps {
   const models = modelRows(
     modelUsage,
@@ -232,7 +230,6 @@ function tokenCard(
     formatCompactNumber,
   );
   return {
-    footer: detailsHint && models.length ? DETAILS_FOOTER : undefined,
     note: compactionCount ? plural("compaction", compactionCount) : undefined,
     sections: models.length
       ? [
@@ -278,7 +275,6 @@ function costCard(
   auxiliaryCosts: ConversationAuxiliaryCosts | undefined,
   liveModelId: string | undefined,
   childAgentTotals: ConversationChildAgentTotals | undefined,
-  detailsHint: boolean,
 ): UsageCardProps | undefined {
   const total = totalConversationCost(summary, auxiliaryCosts);
   if (!total) return undefined;
@@ -315,10 +311,6 @@ function costCard(
     });
   }
   return {
-    footer:
-      detailsHint && (models.length || operations.length)
-        ? DETAILS_FOOTER
-        : undefined,
     sections,
     split: agentSplit(
       childAgentTotals,
@@ -354,8 +346,6 @@ export function CostMetric(props: {
   align?: "left" | "right";
   auxiliaryCosts?: ConversationAuxiliaryCosts;
   childAgentTotals?: ConversationChildAgentTotals;
-  /** Point to conversation details, which has the full breakdown. */
-  detailsHint?: boolean;
   live?: boolean;
   liveModelId?: string;
   modelUsage?: ConversationModelUsage[];
@@ -375,7 +365,6 @@ export function CostMetric(props: {
     props.auxiliaryCosts,
     props.liveModelId,
     props.childAgentTotals,
-    Boolean(props.detailsHint),
   );
   return (
     <MetricValue
@@ -398,8 +387,6 @@ export function TokenMetric(props: {
   align?: "left" | "right";
   childAgentTotals?: ConversationChildAgentTotals;
   compactionCount?: number;
-  /** Point to conversation details, which has the full breakdown. */
-  detailsHint?: boolean;
   live?: boolean;
   liveModelId?: string;
   modelUsage?: ConversationModelUsage[];
@@ -417,7 +404,6 @@ export function TokenMetric(props: {
             props.compactionCount,
             props.liveModelId,
             props.childAgentTotals,
-            Boolean(props.detailsHint),
           )}
         />
       }

package/src/client/conversations/TranscriptView.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import type { ConversationMailboxMessage } from "./conversationOutbox";
-import { ArrowDownToLine } from "lucide-react";
+import { ArrowDown } from "lucide-react";
 
 import type {
   ConversationTranscript,
@@ -8,11 +8,6 @@ import type {
 } from "../types";
 import { EmptyTelemetry } from "../components/EmptyTelemetry";
 import { Button } from "../components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../components/ui/tooltip";
 import { ConversationTranscriptView } from "./ConversationTranscript";
 import { ConversationEventLog } from "./ConversationEventLog";
 import {
@@ -191,33 +186,21 @@ function JumpToLatestButton(props: {
 }) {
   if (!props.visible) return null;
 
-  const label = props.hasPendingUpdate
-    ? "Jump to latest update"
-    : "Jump to latest";
-
   return (
-    <div className="pointer-events-none sticky bottom-3 z-20 flex h-0 justify-center px-3 md:fixed md:inset-x-auto md:bottom-6 md:right-8 md:h-auto md:justify-end md:px-0">
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <Button
-              aria-label={label}
-              className="pointer-events-auto relative -translate-y-full rounded-lg !border !border-dashboard-border-emphasis !bg-dashboard-surface-active text-dashboard-text shadow-[0_6px_24px_rgba(0,0,0,0.36)] hover:!border-dashboard-border-interactive hover:!bg-dashboard-surface-hover hover:!text-dashboard-text md:translate-y-0"
-              onClick={props.onClick}
-              size="icon"
-            >
-              <ArrowDownToLine aria-hidden="true" size={16} strokeWidth={2} />
-              {props.hasPendingUpdate ? (
-                <span
-                  aria-hidden="true"
-                  className="absolute right-1.5 top-1.5 size-2 bg-emerald-300"
-                />
-              ) : null}
-            </Button>
-          }
-        />
-        <TooltipContent size="compact">{label}</TooltipContent>
-      </Tooltip>
+    // Sticky offsets count from inside the scroll region's bottom padding
+    // (pb-4 / md:pb-6). The negative offsets cancel most of it, so the pill
+    // sits 12px (16px on md) above the composer, centered on the transcript.
+    <div className="pointer-events-none sticky -bottom-2.5 z-20 flex h-0 justify-center md:-bottom-5">
+      <Button
+        aria-label={
+          props.hasPendingUpdate ? "Jump to latest update" : "Jump to latest"
+        }
+        className="pointer-events-auto h-8 -translate-y-full gap-1.5 rounded-full pl-3 pr-3.5 text-xs shadow-[0_4px_16px_rgba(0,0,0,0.12)]"
+        onClick={props.onClick}
+      >
+        <ArrowDown aria-hidden="true" size={14} strokeWidth={2} />
+        Jump to latest
+      </Button>
     </div>
   );
 }

package/src/client/conversations/UsageCard.tsx

@@ -27,8 +27,6 @@ export type UsageCardSplit = {
 };
 
 export type UsageCardProps = {
-  /** Closing hint, such as where to find the full breakdown. */
-  footer?: string;
   /** Muted detail after the title, such as a compaction count. */
   note?: string;
   sections: UsageCardSection[];
@@ -64,8 +62,7 @@ export function UsageCard(props: UsageCardProps) {
       <span
         className={cn(
           "grid gap-2.5",
-          (props.sections.length > 0 || props.footer) &&
-            "border-b border-dashboard-border pb-3",
+          props.sections.length > 0 && "border-b border-dashboard-border pb-3",
         )}
       >
         <span className="flex items-baseline justify-between gap-3">
@@ -156,17 +153,6 @@ export function UsageCard(props: UsageCardProps) {
           ) : null}
         </span>
       ))}
-      {props.footer ? (
-        <span
-          className={cn(
-            "text-dashboard-text-faint",
-            props.sections.length > 0 &&
-              "border-t border-dashboard-border pt-3",
-          )}
-        >
-          {props.footer}
-        </span>
-      ) : null}
     </span>
   );
 }

package/src/client/conversations/composerAutocorrect.ts

@@ -0,0 +1,12 @@
+import { useLocalStorage } from "@uidotdev/usehooks";
+
+const AUTOCORRECT_STORAGE_KEY = "junior:composer:autocorrect";
+
+/**
+ * Edit the browser-only choice to let the keyboard autocorrect, spell check,
+ * and capitalize the message composer. Off by default because these change
+ * ids, paths, and code.
+ */
+export function useComposerAutocorrect() {
+  return useLocalStorage<boolean>(AUTOCORRECT_STORAGE_KEY, false);
+}

package/src/client/conversations/conversationAge.ts

@@ -0,0 +1,24 @@
+import { getDashboardTimeZone } from "../format";
+
+/**
+ * Format an activity time as a short age for dense lists: `now`, `12m`, `3h`,
+ * `2d`, `3w`, then a month and day.
+ */
+export function formatCompactAge(value: string, nowMs = Date.now()): string {
+  const time = Date.parse(value);
+  if (!Number.isFinite(time)) return "";
+
+  const minutes = Math.floor(Math.max(0, nowMs - time) / 60_000);
+  if (minutes < 1) return "now";
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d`;
+  if (days < 30) return `${Math.floor(days / 7)}w`;
+  return new Date(time).toLocaleDateString("en-US", {
+    day: "numeric",
+    month: "short",
+    timeZone: getDashboardTimeZone(),
+  });
+}

package/src/client/conversations/conversationRoutes.ts

@@ -2,16 +2,21 @@ import type { ConversationReportEvent } from "@sentry/junior/api/schema";
 
 /**
  * Build the dashboard route for a conversation id. A `turnId` opens the
- * start of that Turn in the event log.
+ * start of that Turn in the event log. `reviewItems` opens the Review items
+ * panel.
  */
 export function conversationPath(
   conversationId: string,
-  options?: { turnId?: string },
+  options?: { reviewItems?: boolean; turnId?: string },
 ): string {
   const path = `/conversations/${encodeURIComponent(conversationId)}`;
-  return options?.turnId
-    ? `${path}?${CONVERSATION_TURN_PARAM}=${encodeURIComponent(options.turnId)}`
-    : path;
+  const params = new URLSearchParams();
+  if (options?.turnId) params.set(CONVERSATION_TURN_PARAM, options.turnId);
+  if (options?.reviewItems) {
+    params.set(CONVERSATION_REVIEW_PARAM, CONVERSATION_REVIEW_OPEN);
+  }
+  const search = params.toString();
+  return search ? `${path}?${search}` : path;
 }
 
 /** Dashboard home route. Legacy `/conversations/new` redirects here. */
@@ -32,6 +37,10 @@ export function parseConversationEventSeq(
   return value && /^\d+$/.test(value) ? Number(value) : undefined;
 }
 
+/** Query param that opens the Review items panel of a Conversation. */
+export const CONVERSATION_REVIEW_PARAM = "review";
+export const CONVERSATION_REVIEW_OPEN = "open";
+
 /** Query param that opens the start of one Turn in the event log. */
 export const CONVERSATION_TURN_PARAM = "turn";
 

package/src/client/conversations/conversationSections.ts

@@ -7,21 +7,18 @@ export type ConversationSection = {
 };
 
 const DAY_MS = 24 * 60 * 60 * 1000;
-const SECTION_ORDER = [
-  "attention",
-  "priority",
-  "today",
-  "yesterday",
-  "last-week",
-  "2-weeks",
-  "3-weeks",
-  "older",
-] as const;
+// Sorts before every time section.
+const ATTENTION_SECTION = {
+  key: "attention",
+  label: "Needs attention",
+  order: Number.NEGATIVE_INFINITY,
+};
 
 /**
- * Group conversations into progressively broader activity sections.
+ * Group conversations into Needs attention, then by last activity: Today,
+ * Yesterday, Previous 7 days, Previous 30 days, then one section per month.
  *
- * Conversations in `attentionIds` go to the first section, before Priority.
+ * Conversations in `attentionIds` go to Needs attention, newest first.
  */
 export function buildConversationSections(
   conversations: Conversation[],
@@ -32,16 +29,20 @@ export function buildConversationSections(
   },
 ): ConversationSection[] {
   const nowDay = calendarDay(options.nowMs, options.timeZone);
-  const sections = new Map<string, ConversationSection>();
+  const sections = new Map<string, ConversationSection & { order: number }>();
   const sorted = [...conversations].sort(
     (left, right) => activityTime(right) - activityTime(left),
   );
 
   for (const conversation of sorted) {
-    const time = activityTime(conversation);
     const section = options.attentionIds?.has(conversation.id)
-      ? { key: "attention", label: "Needs attention" }
-      : conversationSection(conversation, time, nowDay, options.timeZone);
+      ? ATTENTION_SECTION
+      : conversationSection(
+          activityTime(conversation),
+          nowDay,
+          options.nowMs,
+          options.timeZone,
+        );
     const existing = sections.get(section.key);
     if (existing) {
       existing.conversations.push(conversation);
@@ -50,9 +51,9 @@ export function buildConversationSections(
     }
   }
 
-  return [...sections.values()].sort(
-    (left, right) => sectionRank(left.key) - sectionRank(right.key),
-  );
+  return [...sections.values()]
+    .sort((left, right) => left.order - right.order)
+    .map(({ order: _order, ...section }) => section);
 }
 
 /** Join the conversations that wait on the viewer or finished unseen. */
@@ -82,44 +83,61 @@ function activityTime(conversation: Conversation): number {
   return Number.isFinite(time) ? time : Number.NEGATIVE_INFINITY;
 }
 
+/**
+ * Pick the section for an activity time. `order` sorts sections newest
+ * first.
+ */
 function conversationSection(
-  conversation: Conversation,
   time: number,
   nowDay: number,
+  nowMs: number,
   timeZone: string,
-): Pick<ConversationSection, "key" | "label"> {
-  if (!Number.isFinite(time)) return { key: "older", label: "Older" };
-
-  // Priority membership is decided by the conversation feed API.
-  if (conversation.isPriority) {
-    return { key: "priority", label: "Priority" };
+): Pick<ConversationSection, "key" | "label"> & { order: number } {
+  if (!Number.isFinite(time)) {
+    return { key: "older", label: "Older", order: Number.POSITIVE_INFINITY };
   }
 
-  const day = calendarDay(time, timeZone);
-  const ageInDays = Math.max(0, Math.floor((nowDay - day) / DAY_MS));
-  if (ageInDays === 0) return { key: "today", label: "Today" };
-  if (ageInDays === 1) return { key: "yesterday", label: "Yesterday" };
-  if (ageInDays < 7) {
-    return {
-      key: `day-${day}`,
-      label: new Intl.DateTimeFormat("en-US", {
-        timeZone,
-        weekday: "long",
-      }).format(time),
-    };
+  const ageInDays = Math.max(
+    0,
+    Math.round((nowDay - calendarDay(time, timeZone)) / DAY_MS),
+  );
+  if (ageInDays === 0) return { key: "today", label: "Today", order: 0 };
+  if (ageInDays === 1) {
+    return { key: "yesterday", label: "Yesterday", order: 1 };
+  }
+  if (ageInDays <= 7) {
+    return { key: "previous-7-days", label: "Previous 7 days", order: 2 };
   }
-  if (ageInDays < 14) return { key: "last-week", label: "Last week" };
-  if (ageInDays < 21) return { key: "2-weeks", label: "2 weeks ago" };
-  if (ageInDays < 28) return { key: "3-weeks", label: "3 weeks ago" };
-  return { key: "older", label: "Older" };
+  if (ageInDays <= 30) {
+    return { key: "previous-30-days", label: "Previous 30 days", order: 3 };
+  }
+
+  const month = yearMonth(time, timeZone);
+  const nowMonth = yearMonth(nowMs, timeZone);
+  return {
+    key: `month-${month.year}-${month.month}`,
+    label: new Intl.DateTimeFormat("en-US", {
+      month: "long",
+      timeZone,
+      ...(month.year === nowMonth.year ? undefined : { year: "numeric" }),
+    }).format(time),
+    // Month sections follow the rolling windows, newest month first.
+    order:
+      4 + (nowMonth.year - month.year) * 12 + (nowMonth.month - month.month),
+  };
 }
 
-function sectionRank(key: string): number {
-  const known = SECTION_ORDER.indexOf(key as (typeof SECTION_ORDER)[number]);
-  if (known >= 0) return known;
-  // Weekday buckets sit between Yesterday and Last week.
-  if (key.startsWith("day-")) return SECTION_ORDER.indexOf("yesterday") + 0.5;
-  return SECTION_ORDER.length;
+function yearMonth(
+  time: number,
+  timeZone: string,
+): { month: number; year: number } {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    month: "numeric",
+    timeZone,
+    year: "numeric",
+  }).formatToParts(time);
+  const values = new Map(parts.map((part) => [part.type, Number(part.value)]));
+  return { month: values.get("month") ?? 1, year: values.get("year") ?? 0 };
 }
 
 function calendarDay(time: number, timeZone: string): number {

package/src/client/conversations/useConversationFinishedIndicators.ts

@@ -12,6 +12,12 @@ type StoredConversationStates = Record<string, StoredConversationState>;
 
 type ConversationFinishedIndicators = {
   finishedConversationIds: ReadonlySet<string>;
+  /**
+   * The selected conversation when it was unread at the moment it opened.
+   * Lists keep it in its unread place until another conversation opens, so
+   * the row does not move under the pointer.
+   */
+  heldConversationId?: string;
   markRead(conversationId: string, lastReadAt: string): void;
 };
 
@@ -23,6 +29,23 @@ export function useConversationFinishedIndicators(
   pruneMissing: boolean,
 ): ConversationFinishedIndicators {
   const [storedStates, setStoredStates] = useState(readStoredStates);
+  const [held, setHeld] = useState<{ heldId?: string; selectedId?: string }>(
+    {},
+  );
+  // Read the unread state when the selection changes, before the effect
+  // below or the opened page marks it read. Hold only a row that the list
+  // already showed. A deep link has no row under the pointer, and the
+  // selected row never leads its section, so it does not move.
+  if (held.selectedId !== selectedId) {
+    const selected = conversations.find(({ id }) => id === selectedId);
+    setHeld({
+      heldId:
+        selected && finishedSinceRead(storedStates, selected)
+          ? selected.id
+          : undefined,
+      selectedId,
+    });
+  }
 
   useEffect(() => {
     if (!ready) return;
@@ -55,6 +78,7 @@ export function useConversationFinishedIndicators(
       () => finishedConversationIds(storedStates, conversations, selectedId),
       [conversations, selectedId, storedStates],
     ),
+    heldConversationId: held.heldId,
     markRead,
   };
 }
@@ -67,19 +91,27 @@ export function finishedConversationIds(
 ): ReadonlySet<string> {
   return new Set(
     conversations
-      .filter((conversation) => {
-        const state = states[conversation.id];
-        return (
+      .filter(
+        (conversation) =>
           conversation.id !== selectedId &&
-          conversation.status === "completed" &&
-          state !== undefined &&
-          isAfter(conversation.lastSeenAt, state.lastReadAt)
-        );
-      })
+          finishedSinceRead(states, conversation),
+      )
       .map((conversation) => conversation.id),
   );
 }
 
+function finishedSinceRead(
+  states: StoredConversationStates,
+  conversation: Conversation,
+): boolean {
+  const state = states[conversation.id];
+  return (
+    conversation.status === "completed" &&
+    state !== undefined &&
+    isAfter(conversation.lastSeenAt, state.lastReadAt)
+  );
+}
+
 /** Record reads and remove conversations outside the visible list. */
 export function reconcileStoredStates(
   current: StoredConversationStates,

package/src/client/pages/settings/SettingsPage.tsx

@@ -12,12 +12,14 @@ import {
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { Textarea } from "../../components/ui/textarea";
+import { Checkbox } from "../../components/ui/checkbox";
 import { Field, FieldDescription, FieldLabel } from "../../components/ui/field";
 import { RadioGroup, RadioGroupItem } from "../../components/ui/radio-group";
 import {
   useConversationStartPosition,
   type ConversationStartPosition,
 } from "../../conversations/transcriptReadPosition";
+import { useComposerAutocorrect } from "../../conversations/composerAutocorrect";
 import { InlineError } from "../../components/InlineError";
 import { Card } from "../../components/layout/Card";
 import { DashboardApiError, fetchDashboardJson, patch, put } from "../../http";
@@ -105,6 +107,7 @@ export function SettingsPage({ identity }: SettingsPageProps) {
         </Card>
       </form>
       <ConversationStartSetting />
+      <ComposerAutocorrectSetting />
       <CustomizationForm />
     </SettingsPageLayout>
   );
@@ -166,6 +169,31 @@ function ConversationStartSetting() {
   );
 }
 
+/** Let the user turn on keyboard autocorrect in the composer on this browser. */
+function ComposerAutocorrectSetting() {
+  const [autocorrect, setAutocorrect] = useComposerAutocorrect();
+  return (
+    <Card className="mt-6 mb-0" padding="md" variant="raised">
+      <h2 className="m-0 text-lg font-bold">Message box</h2>
+      <label className="mt-4 flex cursor-pointer items-start gap-3">
+        <Checkbox
+          checked={autocorrect}
+          className="mt-0.5"
+          onCheckedChange={setAutocorrect}
+        />
+        <span className="grid gap-0.5">
+          <span className="text-sm font-medium">Autocorrect</span>
+          <span className="text-xs text-dashboard-text-muted">
+            Let your keyboard correct spelling and capitalize sentences as you
+            type. This can change ids, paths, and code. This choice applies to
+            this browser.
+          </span>
+        </span>
+      </label>
+    </Card>
+  );
+}
+
 /**
  * Let the user save text that changes how the agent replies to them. The
  * server returns 404 when the app does not enable this experiment.

package/src/client/review-desk/ConversationReviewItems.tsx

@@ -0,0 +1,99 @@
+import { ChevronRight, Inbox } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+import { LoadMorePagination } from "../components/Pagination";
+import {
+  DetailsCard,
+  DetailsList,
+  DetailsRow,
+} from "../conversations/DetailsList";
+import { cn, dashboardDisclosureChevronClass } from "../styles";
+import { ReviewItemCard } from "./ReviewItemCard";
+import { useReviewItemsData } from "./queries";
+
+/**
+ * Show the open Review items linked to a Conversation in its details. Each
+ * item is one line, like its sidebar chip, and expands to the full card in
+ * place. `highlight` marks the card when a sidebar link opened it.
+ */
+export function ConversationReviewItems(props: {
+  conversationId: string;
+  highlight: boolean;
+}) {
+  const { items, query } = useReviewItemsData({
+    conversationId: props.conversationId,
+  });
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const shown = items.length > 0;
+  useEffect(() => {
+    if (props.highlight && shown) {
+      sectionRef.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, [props.highlight, shown]);
+  if (!shown) return null;
+  return (
+    <div
+      className={cn(
+        "rounded-lg",
+        props.highlight && "ring-2 ring-violet-300/50",
+      )}
+      ref={sectionRef}
+    >
+      {/* A count of loaded pages only would understate, so hide it. */}
+      <DetailsCard
+        count={query.hasNextPage ? undefined : items.length}
+        label="Needs you"
+        title="Needs you"
+      >
+        <DetailsList
+          itemKey={(item) => item.id}
+          items={items}
+          renderItem={(item) => (
+            <ReviewItemRow defaultExpanded={props.highlight} item={item} />
+          )}
+        />
+        <LoadMorePagination
+          className="mt-2"
+          hasMore={Boolean(query.hasNextPage)}
+          loading={query.isFetchingNextPage}
+          onLoadMore={() => void query.fetchNextPage()}
+        />
+      </DetailsCard>
+    </div>
+  );
+}
+
+function ReviewItemRow(props: {
+  defaultExpanded: boolean;
+  item: ReviewItemPayload;
+}) {
+  const [expanded, setExpanded] = useState(props.defaultExpanded);
+  // Details can already be open when a sidebar review chip highlights it.
+  useEffect(() => {
+    if (props.defaultExpanded) setExpanded(true);
+  }, [props.defaultExpanded]);
+  return (
+    <>
+      <DetailsRow
+        expanded={expanded}
+        icon={<Inbox aria-hidden="true" className="size-3.5" />}
+        meta={
+          <span className="grid size-5 place-items-center">
+            <ChevronRight
+              aria-hidden="true"
+              className={dashboardDisclosureChevronClass}
+            />
+          </span>
+        }
+        onToggle={() => setExpanded((value) => !value)}
+        title={props.item.title}
+      />
+      {expanded ? (
+        <div className="px-1.5 pb-1">
+          <ReviewItemCard item={props.item} />
+        </div>
+      ) : null}
+    </>
+  );
+}