@sentry/junior-dashboard 0.294.0 → 0.295.0

package/src/client/conversations/conversationSections.ts

@@ -1,3 +1,4 @@
+import type { WaitingConversation } from "../review-desk/queries";
 import type { Conversation } from "../types";
 
 export type ConversationSection = {
@@ -7,29 +8,35 @@ export type ConversationSection = {
 };
 
 const DAY_MS = 24 * 60 * 60 * 1000;
-// Pinned sorts first, then Needs attention, then every time section.
+// Pinned sorts first, then Needs you, then every time section.
 const PINNED_SECTION = { key: "pinned", label: "Pinned", order: -2 };
-const ATTENTION_SECTION = {
-  key: "attention",
-  label: "Needs attention",
-  order: -1,
-};
+const NEEDS_YOU_SECTION = { key: "needs-you", label: "Needs you", order: -1 };
+
+/** Conversations that wait on the viewer, by id, with their wait start. */
+type Waiting = Pick<
+  ReadonlyMap<string, Pick<WaitingConversation, "waitingSince">>,
+  "get" | "has"
+>;
 
 /**
- * Group conversations into Pinned, then Needs attention, then by last
- * activity: Today, Yesterday, Previous 7 days, Previous 30 days, then one
- * section per month.
+ * Group conversations into Pinned, then Needs you, then by last Message:
+ * Today, Yesterday, Previous 7 days, Previous 30 days, then one section per
+ * month.
  *
- * A pinned conversation shows only in Pinned, even when it needs attention.
- * Pinned follows the viewer's order; every other section, Needs attention
- * too, lists the newest first.
+ * Needs you holds the conversations that wait on the viewer: an open Review
+ * item in `waiting`, or a Turn that waits on an authorization. Unread and
+ * open work do not move a row. A pinned conversation
+ * shows only in Pinned, even when it waits on the viewer. Pinned follows the
+ * viewer's order. Needs you lists the longest wait first, so the queue keeps
+ * its order while the viewer works it. Every other section lists the newest
+ * Message first.
  */
 export function buildConversationSections(
   conversations: Conversation[],
   options: {
-    attentionIds: ReadonlySet<string>;
     nowMs: number;
     timeZone: string;
+    waiting: Waiting;
   },
 ): ConversationSection[] {
   const nowDay = calendarDay(options.nowMs, options.timeZone);
@@ -41,8 +48,8 @@ export function buildConversationSections(
   for (const conversation of sorted) {
     const section = conversation.pinnedAt
       ? PINNED_SECTION
-      : needsAttention(conversation, options.attentionIds)
-        ? ATTENTION_SECTION
+      : waitsOnViewer(conversation, options.waiting)
+        ? NEEDS_YOU_SECTION
         : conversationSection(
             activityTime(conversation),
             nowDay,
@@ -58,61 +65,51 @@ export function buildConversationSections(
   }
 
   sections.get(PINNED_SECTION.key)?.conversations.sort(comparePinOrder);
+  sections
+    .get(NEEDS_YOU_SECTION.key)
+    ?.conversations.sort(compareWaitStart(options.waiting));
   return [...sections.values()]
     .sort((left, right) => left.order - right.order)
     .map(({ order: _order, ...section }) => section);
 }
 
 /**
- * True when the conversation waits on a person: its id is in `attentionIds`,
- * a Turn waits on a person to finish an authorization, or it has unfinished
- * work, such as an open pull request, while Junior is not running in it.
+ * True when the conversation waits on the viewer: an open Review item waits
+ * on them, or a Turn waits on a person to finish an authorization.
  */
-function needsAttention(
-  conversation: Conversation,
-  attentionIds: ReadonlySet<string>,
-): boolean {
+function waitsOnViewer(conversation: Conversation, waiting: Waiting): boolean {
   return (
-    attentionIds.has(conversation.id) ||
-    conversation.awaitingAuthorization === true ||
-    (conversation.unfinishedWork === true && conversation.status !== "active")
+    waiting.has(conversation.id) || conversation.awaitingAuthorization === true
   );
 }
 
-/** Join the conversations that wait on the viewer or are unread. */
-export function attentionConversationIds(
-  conversations: readonly Conversation[],
-  waitingConversationIds: Iterable<string>,
-): ReadonlySet<string> {
-  return new Set([
-    ...waitingConversationIds,
-    ...conversations
-      .filter((conversation) => conversation.unread)
-      .map((conversation) => conversation.id),
-  ]);
-}
-
 /**
- * Sort pinned, then attention conversations to the front. Pinned follows the
- * viewer's order. The sort is stable, so the other groups keep the feed order.
- * Paginated lists call this before paging, so page 1 holds every pinned and
- * attention conversation.
+ * Sort pinned, then waiting conversations to the front, in the order that
+ * `buildConversationSections` shows them: pins in the viewer's order, the
+ * longest wait first, then the newest Message first. Paginated lists call
+ * this before paging, so page 1 holds every pinned and waiting conversation,
+ * and pages split where the sections do.
  */
-export function pinnedAndAttentionFirst(
+export function pinnedAndWaitingFirst(
   conversations: Conversation[],
-  attentionIds: ReadonlySet<string>,
+  waiting: Waiting,
 ): Conversation[] {
   const rank = (conversation: Conversation) =>
-    conversation.pinnedAt
-      ? 0
-      : needsAttention(conversation, attentionIds)
-        ? 1
-        : 2;
-  return [...conversations].sort(
-    (left, right) =>
-      rank(left) - rank(right) ||
-      (left.pinnedAt && right.pinnedAt ? comparePinOrder(left, right) : 0),
-  );
+    conversation.pinnedAt ? 0 : waitsOnViewer(conversation, waiting) ? 1 : 2;
+  const byWait = compareWaitStart(waiting);
+  return [...conversations]
+    .sort((left, right) => activityTime(right) - activityTime(left))
+    .sort((left, right) => {
+      const leftRank = rank(left);
+      return (
+        leftRank - rank(right) ||
+        (leftRank === 0
+          ? comparePinOrder(left, right)
+          : leftRank === 1
+            ? byWait(left, right)
+            : 0)
+      );
+    });
 }
 
 /**
@@ -133,8 +130,34 @@ function pinTime(conversation: Conversation): number {
   return conversation.pinnedAt ? Date.parse(conversation.pinnedAt) || 0 : 0;
 }
 
+/**
+ * Order the longest wait first. A conversation with no known wait start
+ * follows those that have one, newest first. The stable sort keeps that
+ * activity order.
+ */
+function compareWaitStart(
+  waiting: Waiting,
+): (left: Conversation, right: Conversation) => number {
+  const start = (conversation: Conversation) => {
+    const time = Date.parse(waiting.get(conversation.id)?.waitingSince ?? "");
+    return Number.isFinite(time) ? time : Number.POSITIVE_INFINITY;
+  };
+  return (left, right) => {
+    const leftStart = start(left);
+    const rightStart = start(right);
+    return leftStart === rightStart ? 0 : leftStart < rightStart ? -1 : 1;
+  };
+}
+
+/**
+ * The time that sorts and groups a row: its last Message from a person or
+ * shown Junior reply. Tool, status, and quiet events do not move a row. A
+ * row with no Message yet uses its last activity.
+ */
 function activityTime(conversation: Conversation): number {
-  const time = Date.parse(conversation.lastSeenAt);
+  const time = Date.parse(
+    conversation.lastMessageAt ?? conversation.lastSeenAt,
+  );
   return Number.isFinite(time) ? time : Number.NEGATIVE_INFINITY;
 }
 

package/src/client/conversations/heldListOrder.ts

@@ -0,0 +1,170 @@
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type FocusEvent,
+  type PointerEvent,
+} from "react";
+
+import type { ConversationSection } from "./conversationSections";
+
+/** The row order of a list at one moment: section keys and labels, row ids. */
+export type HeldOrder = { ids: string[]; key: string; label: string }[];
+
+/** Read the row order that a list shows now. */
+export function sectionOrder(sections: ConversationSection[]): HeldOrder {
+  return sections.map((section) => ({
+    ids: section.conversations.map((conversation) => conversation.id),
+    key: section.key,
+    label: section.label,
+  }));
+}
+
+/**
+ * Show the latest conversations in a held row order. A row keeps its held
+ * section and place but shows its latest data. A row that is gone drops out.
+ * Rows that the latest order puts after every held row, such as the next
+ * page that the reader scrolls to, join at the end, so no held row moves.
+ * `pending` counts the rows that the latest order would add or move: a new
+ * row above a held row, a row in another section, or a row out of order in
+ * its section.
+ */
+export function holdSectionOrder(
+  held: HeldOrder,
+  latest: ConversationSection[],
+): { pending: number; sections: ConversationSection[] } {
+  const latestRows = latest.flatMap((section) =>
+    section.conversations.map((conversation) => ({ conversation, section })),
+  );
+  const byId = new Map(
+    latestRows.map((row) => [row.conversation.id, row.conversation] as const),
+  );
+  const heldIds = new Set(held.flatMap((section) => section.ids));
+  let lastHeld = -1;
+  latestRows.forEach((row, index) => {
+    if (heldIds.has(row.conversation.id)) lastHeld = index;
+  });
+  const sections: ConversationSection[] = held.map((section) => ({
+    conversations: section.ids.flatMap((id) => byId.get(id) ?? []),
+    key: section.key,
+    label: section.label,
+  }));
+  for (const { conversation, section } of latestRows.slice(lastHeld + 1)) {
+    const target = sections.find((item) => item.key === section.key);
+    if (target) target.conversations.push(conversation);
+    else sections.push({ ...section, conversations: [conversation] });
+  }
+  const shown = new Map<string, { index: number; key: string }>();
+  for (const section of sections) {
+    section.conversations.forEach((conversation, index) =>
+      shown.set(conversation.id, { index, key: section.key }),
+    );
+  }
+  let pending = 0;
+  for (const section of latest) {
+    const kept = section.conversations.flatMap((conversation) => {
+      const place = shown.get(conversation.id);
+      return place?.key === section.key ? [place.index] : [];
+    });
+    pending += section.conversations.length - longestIncreasingRun(kept);
+  }
+  return {
+    pending,
+    sections: sections.filter((section) => section.conversations.length > 0),
+  };
+}
+
+/** Length of the longest increasing subsequence: the rows that need no move. */
+function longestIncreasingRun(values: number[]): number {
+  const tails: number[] = [];
+  for (const value of values) {
+    let low = 0;
+    let high = tails.length;
+    while (low < high) {
+      const middle = (low + high) >> 1;
+      if (tails[middle]! < value) low = middle + 1;
+      else high = middle;
+    }
+    tails[low] = value;
+  }
+  return tails.length;
+}
+
+type Hold = { following: boolean; order: HeldOrder };
+
+/**
+ * Hold a list's row order while the pointer is over it or focus is in it, so
+ * a row does not move under the reader's pointer. The hold starts only once
+ * the list is `settled`, so a pointer that rests on the list during a page
+ * load does not hold back the first rows. New activity waits as
+ * `pending` until the reader calls `applyPending`, or the pointer and focus
+ * leave. React events bubble through portals, so a row menu counts as in
+ * the list. `releaseHold` follows the latest order until the hold ends; row
+ * actions such as pin, archive, and mark unread call it, so their result
+ * shows at once.
+ */
+export function useHeldListOrder(
+  sections: ConversationSection[],
+  options: {
+    /** False until the reads that place rows finish, so they can settle. */
+    settled: boolean;
+  },
+) {
+  const [hold, setHold] = useState<Hold | null>(null);
+  const [pointerInside, setPointerInside] = useState(false);
+  const [focusInside, setFocusInside] = useState(false);
+  const holding = options.settled && (pointerInside || focusInside);
+  // Start and end the hold during render, from the inputs that set it, so the
+  // first held render already shows the held order.
+  if (holding && !hold) {
+    setHold({ following: false, order: sectionOrder(sections) });
+  }
+  if (!holding && hold) setHold(null);
+
+  const view =
+    hold && !hold.following
+      ? holdSectionOrder(hold.order, sections)
+      : { pending: 0, sections };
+
+  // A focused pill that unmounts sends no blur, and focus falls to the body.
+  useEffect(() => {
+    if (focusInside && document.activeElement === document.body) {
+      setFocusInside(false);
+    }
+  }, [focusInside, view.pending]);
+
+  const applyPending = useCallback(
+    () =>
+      setHold((current) =>
+        current ? { following: false, order: sectionOrder(sections) } : current,
+      ),
+    [sections],
+  );
+  const releaseHold = useCallback(
+    () =>
+      setHold((current) =>
+        current ? { following: true, order: current.order } : current,
+      ),
+    [],
+  );
+  const holdProps = {
+    onBlur: (event: FocusEvent<HTMLElement>) => {
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        setFocusInside(false);
+      }
+    },
+    onFocus: () => setFocusInside(true),
+    // Touch has no hover, so only a mouse or pen holds the order.
+    onPointerEnter: (event: PointerEvent<HTMLElement>) => {
+      if (event.pointerType !== "touch") setPointerInside(true);
+    },
+    onPointerLeave: () => setPointerInside(false),
+  };
+  return {
+    applyPending,
+    holdProps,
+    pending: view.pending,
+    releaseHold,
+    sections: view.sections,
+  };
+}

package/src/client/conversations/toolCallPreview.ts

@@ -1,3 +1,4 @@
+import { skillLabel } from "../components/SkillLink";
 import { stringifyPartValue } from "../format";
 
 const MAX_VALUE_LENGTH = 48;
@@ -11,7 +12,8 @@ export function toolCallPreview(name: string, input: unknown): string | null {
   }
 
   if (name === "loadSkill") {
-    return fieldValue(input, "skill_name");
+    const name = fieldValue(input, "skill_name");
+    return name ? skillLabel(name) : null;
   }
 
   if (name === "webSearch") {

package/src/client/conversations/transcriptSource.ts

@@ -3,8 +3,13 @@ import type { ConversationTranscript, TranscriptViewMessage } from "../types";
 /** A provider whose mark the dashboard can show on a transcript message. */
 export type SourceProvider = "github" | "slack";
 
-/** Plugins without a mark stay unmarked. */
-function pluginSource(plugin: string | undefined): SourceProvider | undefined {
+/**
+ * Return the provider whose mark a plugin shows. Plugins without a mark stay
+ * unmarked.
+ */
+export function pluginSource(
+  plugin: string | undefined,
+): SourceProvider | undefined {
   return plugin === "github" ? "github" : undefined;
 }
 

package/src/client/conversations/useMarkConversationUnread.ts

@@ -16,8 +16,8 @@ type DetailCache = ConversationDetailReport & { detailEtag?: string };
 
 /**
  * Mark one conversation read or unread for the viewer. The feed and detail
- * caches change at once, so the row moves to or from Needs attention before
- * the request returns. A failed request puts the old caches back.
+ * caches change at once, so the row's unread marker changes before the
+ * request returns. A failed request puts the old caches back.
  */
 export function useMarkConversationUnread(
   conversationId: string,

package/src/client/format.ts

@@ -879,6 +879,7 @@ export function buildConversations(
   return summaries
     .map((summary) => ({
       activityPreview: summary.activityPreview,
+      brief: summary.brief,
       annotations: summary.annotations,
       sidebarAnnotations: summary.sidebarAnnotations,
       archivedAt: summary.archivedAt,
@@ -895,6 +896,7 @@ export function buildConversations(
       displayTitle: summary.displayTitle,
       id: summary.conversationId,
       isParticipant: summary.isParticipant,
+      lastMessageAt: summary.lastMessageAt,
       lastProgressAt: summary.lastProgressAt,
       lastSeenAt: summary.lastSeenAt,
       locationId: summary.locationId,
@@ -910,7 +912,6 @@ export function buildConversations(
       kind: summary.kind,
       parentConversationId: summary.parentConversationId,
       threads: summary.threads && buildConversations(summary.threads),
-      unfinishedWork: summary.unfinishedWork,
       awaitingAuthorization: summary.awaitingAuthorization,
       visibility: summary.visibility,
     }))
@@ -922,7 +923,22 @@ export function conversationFromDetail(
   detail: ConversationTranscript | undefined,
 ): Conversation | undefined {
   if (!detail) return undefined;
-  const conversation = buildConversations([detail])[0];
+  // The detail carries the whole Brief; a row keeps the feed's short form.
+  const { brief, ...summary } = detail;
+  const conversation = buildConversations([
+    {
+      ...summary,
+      ...(brief
+        ? {
+            brief: {
+              intent: brief.content.intent,
+              status: brief.content.outcome.status,
+              summary: brief.content.summary,
+            },
+          }
+        : undefined),
+    },
+  ])[0];
   return conversation
     ? { ...conversation, displayTitle: detail.displayTitle }
     : undefined;

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

@@ -3,6 +3,7 @@ import type {
   AutomationSummary,
   AutomationTask,
 } from "@sentry/junior/api/schema";
+import { skillLabel } from "../../components/SkillLink";
 import { Button } from "../../components/ui/button";
 import { Card } from "../../components/layout/Card";
 import { cn } from "../../styles";
@@ -118,7 +119,7 @@ function taskChangeLabel(saved: AutomationTask, next: AutomationTask): string {
 
 function taskLabel(task: AutomationTask): string {
   if (task.kind === "instruction") return task.instruction || "Empty";
-  const skill = task.skill || "No skill chosen";
+  const skill = task.skill ? skillLabel(task.skill) : "No skill chosen";
   return task.context ? `${skill} · ${task.context}` : skill;
 }
 

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

@@ -18,6 +18,7 @@ import {
 import { ActorAvatar } from "../../components/ActorAvatar";
 import { Fact, FactList, FactSection } from "../../components/FactSection";
 import { InlineError } from "../../components/InlineError";
+import { SkillLink } from "../../components/SkillLink";
 import { StatusDot } from "../../components/StatusDot";
 import { Card } from "../../components/layout/Card";
 import { Button } from "../../components/ui/button";
@@ -290,9 +291,8 @@ function AutomationDefinition(props: { automation: AutomationSummary }) {
     <FactSection title="Definition">
       {task.kind === "skill" ? (
         <p className="m-0 text-sm text-dashboard-text-muted">
-          Runs the{" "}
-          <span className="font-mono text-dashboard-text">{task.skill}</span>{" "}
-          skill{task.context ? " with this context:" : "."}
+          Runs <SkillLink name={task.skill} />
+          {task.context ? " with this context:" : "."}
         </p>
       ) : null}
       {written ? (

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

@@ -14,7 +14,10 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "../../components/ui/popover";
+import { MatchedLabel } from "../../components/MatchedLabel";
+import { skillLabel } from "../../components/SkillLink";
 import { cn } from "../../styles";
+import { searchSkills, type SkillSearchRow } from "./skillSearch";
 
 /**
  * Choose the skill an Automation runs. A saved skill that is no longer
@@ -29,6 +32,7 @@ export function AutomationSkillPicker(props: {
   onChange(skill: string): void;
 }) {
   const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
   const selected = props.skills.find((skill) => skill.name === props.value);
   const missing = Boolean(props.value) && !selected;
   const groups = [
@@ -41,8 +45,20 @@ export function AutomationSkillPicker(props: {
       skills: props.skills.filter((skill) => skill.pluginProvider),
     },
   ].filter((group) => group.skills.length > 0);
+  // Names show as `$skill-name`, so a pasted label still searches by name.
+  const search = query.trim().replace(/^\$/, "");
+  const choose = (skill: string) => {
+    props.onChange(skill);
+    setOpen(false);
+  };
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) setQuery("");
+      }}
+    >
       <PopoverTrigger
         id={props.id}
         aria-invalid={props.invalid || missing || undefined}
@@ -61,7 +77,7 @@ export function AutomationSkillPicker(props: {
                       "text-dashboard-text-muted line-through decoration-dashboard-text-muted/60",
                   )}
                 >
-                  {props.value}
+                  {skillLabel(props.value)}
                 </span>
                 {missing ? (
                   <SkillBadge tone="danger">Not found</SkillBadge>
@@ -90,38 +106,34 @@ export function AutomationSkillPicker(props: {
         align="start"
         className="w-(--anchor-width) max-w-[calc(100vw-2rem)] min-w-80 overflow-hidden p-0"
       >
-        <Command label="Skills">
-          <CommandInput placeholder="Search by name or description" />
+        {/* Ranked here so a name match beats a description match. */}
+        <Command label="Skills" shouldFilter={false}>
+          <CommandInput
+            placeholder="Search by name or description"
+            value={query}
+            onValueChange={setQuery}
+          />
           <CommandList>
             <CommandEmpty>No skills match.</CommandEmpty>
-            {groups.map((group) => (
-              <CommandGroup heading={group.heading} key={group.heading}>
-                {group.skills.map((skill) => (
-                  <CommandItem
-                    key={skill.name}
-                    value={skill.name}
-                    keywords={[skill.description]}
-                    onSelect={() => {
-                      props.onChange(skill.name);
-                      setOpen(false);
-                    }}
-                    className="items-start"
-                  >
-                    <span className="grid min-w-0 flex-1 gap-0.5">
-                      <span className="flex min-w-0 items-center gap-2">
-                        <span className="truncate font-mono">{skill.name}</span>
-                        {skill.disableModelInvocation ? (
-                          <SkillBadge>Manual only</SkillBadge>
-                        ) : null}
-                      </span>
-                      <span className="truncate text-xs text-dashboard-text-muted">
-                        {skill.description}
-                      </span>
-                    </span>
-                  </CommandItem>
+            {search
+              ? searchSkills(props.skills, search).map((row) => (
+                  <SkillOption
+                    key={row.skill.name}
+                    row={row}
+                    onSelect={choose}
+                  />
+                ))
+              : groups.map((group) => (
+                  <CommandGroup heading={group.heading} key={group.heading}>
+                    {group.skills.map((skill) => (
+                      <SkillOption
+                        key={skill.name}
+                        row={{ skill }}
+                        onSelect={choose}
+                      />
+                    ))}
+                  </CommandGroup>
                 ))}
-              </CommandGroup>
-            ))}
           </CommandList>
         </Command>
       </PopoverContent>
@@ -129,6 +141,38 @@ export function AutomationSkillPicker(props: {
   );
 }
 
+function SkillOption(props: {
+  row: SkillSearchRow;
+  onSelect(skill: string): void;
+}) {
+  const { skill } = props.row;
+  return (
+    <CommandItem
+      value={skill.name}
+      onSelect={() => props.onSelect(skill.name)}
+      className="items-start"
+    >
+      <span className="grid min-w-0 flex-1 gap-0.5">
+        <span className="flex min-w-0 items-center gap-2">
+          <span className="truncate font-mono">
+            $
+            <MatchedLabel label={skill.name} matches={props.row.nameMatches} />
+          </span>
+          {skill.disableModelInvocation ? (
+            <SkillBadge>Manual only</SkillBadge>
+          ) : null}
+        </span>
+        <span className="truncate text-xs text-dashboard-text-muted">
+          <MatchedLabel
+            label={skill.description}
+            matches={props.row.descriptionMatches}
+          />
+        </span>
+      </span>
+    </CommandItem>
+  );
+}
+
 function SkillTile(props: { plugin: boolean }) {
   return (
     <span className="grid size-8 shrink-0 place-items-center rounded-md border border-dashboard-accent/15 bg-dashboard-accent/[0.075] text-dashboard-accent-text">