@sentry/junior-dashboard 0.294.0 → 0.295.0

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

@@ -1,8 +1,8 @@
 import { useState } from "react";
-import { Link } from "react-router";
 import { Plus } from "lucide-react";
 import type { AutomationEdit, SkillReport } from "@sentry/junior/api/schema";
 import { useSkillsData } from "../../api";
+import { SkillLink, skillLabel } from "../../components/SkillLink";
 import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
 import {
@@ -12,7 +12,6 @@ import {
   FieldLabel,
 } from "../../components/ui/field";
 import { ToggleGroup, ToggleGroupItem } from "../../components/ui/toggle-group";
-import { systemPluginPath } from "../system/SystemPlugins";
 import { AutomationSkillPicker } from "./AutomationSkillPicker";
 import { taskDraft, type AutomationTaskDraft } from "./automationDraft";
 
@@ -118,7 +117,7 @@ function SkillFields(props: {
   const skillError =
     props.fieldError("task.skill") ??
     (missing
-      ? `The skill ${task.skill} is no longer installed. This automation is blocked until you choose another skill or switch to an instruction.`
+      ? `${skillLabel(task.skill)} is no longer installed. This automation is blocked until you choose another skill or switch to an instruction.`
       : undefined);
   return (
     <>
@@ -139,16 +138,7 @@ function SkillFields(props: {
         >
           Junior loads this skill at the start of each run.
           {selected ? (
-            <Link
-              to={
-                selected.pluginProvider
-                  ? systemPluginPath(selected.pluginProvider)
-                  : "/system#skills"
-              }
-              className="text-dashboard-accent-text"
-            >
-              View skill
-            </Link>
+            <SkillLink name={selected.name}>View skill</SkillLink>
           ) : null}
         </FieldDescription>
       </Field>

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

@@ -28,6 +28,7 @@ import { Button } from "../../components/ui/button";
 import { FormNotice } from "../../components/FormNotice";
 import { InlineError } from "../../components/InlineError";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
+import { SkillLink } from "../../components/SkillLink";
 import { StatusChip } from "../../components/StatusChip";
 import { Card } from "../../components/layout/Card";
 import { DisplayText } from "../../display-text/DisplayText";
@@ -367,11 +368,7 @@ function fieldValue(
     case "title":
       return definition.title ?? "First line of the instruction";
     case "skill":
-      return task.skill ? (
-        <span className="font-mono">{task.skill}</span>
-      ) : (
-        "No skill"
-      );
+      return task.skill ? <SkillLink name={task.skill} /> : "No skill";
     case "instruction":
       if (!task.instruction) return "No context";
       return (

package/src/client/pages/automations/skillSearch.ts

@@ -0,0 +1,50 @@
+import type { SkillReport } from "@sentry/junior/api/schema";
+import { quickOpenMatch } from "../../components/quickOpenMatch";
+
+export type SkillSearchRow = {
+  skill: SkillReport;
+  /** UTF-16 indices in the name that the query matched. */
+  nameMatches?: number[];
+  /** UTF-16 indices in the description that the query matched. */
+  descriptionMatches?: number[];
+};
+
+/**
+ * Rank skills for the picker search. A name match ranks above any
+ * description match, so `self` puts `self-update` at the top. Descriptions
+ * match only on whole terms: a scatter across a long sentence matches
+ * almost any query.
+ */
+export function searchSkills(
+  skills: readonly SkillReport[],
+  query: string,
+): SkillSearchRow[] {
+  const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
+  const named: { row: SkillSearchRow; score: number }[] = [];
+  const described: { row: SkillSearchRow; score: number }[] = [];
+  for (const skill of skills) {
+    const name = quickOpenMatch(skill.name, query);
+    if (name) {
+      named.push({
+        row: { skill, nameMatches: name.indices },
+        score: name.score,
+      });
+      continue;
+    }
+    const description = skill.description.toLowerCase();
+    if (!terms.every((term) => description.includes(term))) continue;
+    const match = quickOpenMatch(skill.description, query);
+    if (match) {
+      described.push({
+        row: { skill, descriptionMatches: match.indices },
+        score: match.score,
+      });
+    }
+  }
+  // Sort is stable, so equal scores keep the skill list's order.
+  const byScore = (left: { score: number }, right: { score: number }) =>
+    right.score - left.score;
+  return [...named.sort(byScore), ...described.sort(byScore)].map(
+    (ranked) => ranked.row,
+  );
+}

package/src/client/pages/code/RepositorySections.tsx

@@ -10,7 +10,10 @@ import { Card } from "../../components/layout/Card";
 import { SectionHeader } from "../../components/layout/SectionHeader";
 import { SectionTitle } from "../../components/layout/SectionTitle";
 import { ConversationSidebarAnnotations } from "../../conversations/ConversationMeta";
-import { ConversationListStatusIcon } from "../../conversations/ConversationListStatusIcon";
+import {
+  ConversationListStatusIcon,
+  ConversationStatusText,
+} from "../../conversations/ConversationListStatusIcon";
 import { conversationPath } from "../../conversations/conversationRoutes";
 import {
   conversationDisplayTitle,
@@ -53,6 +56,7 @@ export function RepositorySection(props: {
  */
 export function RecentConversationRow(props: { conversation: Conversation }) {
   const conversation = props.conversation;
+  const status = visualStatusForConversation(conversation);
   const title = conversationDisplayTitle(conversation);
   const location = slackLocationLabel(conversation, { includeId: false });
   const hasAnnotations = Boolean(conversation.sidebarAnnotations?.length);
@@ -67,16 +71,21 @@ export function RecentConversationRow(props: { conversation: Conversation }) {
         <span className="mt-1.5 grid size-3 shrink-0 place-items-center">
           <ConversationListStatusIcon
             unread={false}
-            isPrivate={conversation.visibility === "private"}
-            status={visualStatusForConversation(conversation)}
+            status={status}
             waitingOnViewer={false}
           />
         </span>
         <div className="min-w-0 truncate font-display text-sm text-dashboard-text">
           {title}
         </div>
-        <span className="whitespace-nowrap font-mono text-xs text-dashboard-text-muted">
-          {formatRelativeTime(conversation.lastSeenAt)}
+        <span className="flex items-center gap-1.5 whitespace-nowrap font-mono text-xs text-dashboard-text-muted">
+          <ConversationStatusText
+            isPrivate={conversation.visibility === "private"}
+            status={status}
+          />
+          {formatRelativeTime(
+            conversation.lastMessageAt ?? conversation.lastSeenAt,
+          )}
         </span>
         {/* Keep the meta line at text height so annotation chips do not make
             this row taller than a code change row beside it. */}

package/src/client/pages/code/RepositoryTabs.tsx

@@ -16,13 +16,10 @@ import {
 } from "../../components/controls/TimeRangeSelector";
 import { Card } from "../../components/layout/Card";
 import { ConversationHomeList } from "../../conversations/ConversationHomeList";
-import {
-  attentionConversationIds,
-  pinnedAndAttentionFirst,
-} from "../../conversations/conversationSections";
+import { pinnedAndWaitingFirst } from "../../conversations/conversationSections";
 import { buildConversations, getDashboardTimeZone } from "../../format";
 import { useDebouncedValue } from "../../debouncedValue";
-import { useWaitingConversationIds } from "../../review-desk/queries";
+import { useWaitingConversations } from "../../review-desk/queries";
 import { CodeActivityChart } from "./CodeActivityChart";
 import { CodeChangeRow } from "./CodeChangeRow";
 import { repositoryActivity } from "./RepositorySections";
@@ -36,7 +33,7 @@ export function RepositoryConversationsTab(props: { repositoryId: string }) {
   const search = useDebouncedValue(query.trim());
   const feed = useCodeRepositoryConversationsData(props.repositoryId, search);
   const conversations = buildConversations(feed.data?.conversations ?? []);
-  const waitingConversationIds = useWaitingConversationIds();
+  const waitingConversations = useWaitingConversations();
   useEffect(() => {
     setPage(1);
   }, [search]);
@@ -56,10 +53,7 @@ export function RepositoryConversationsTab(props: { repositoryId: string }) {
       ) : (
         <ConversationHomeList
           conversations={pageItems(
-            pinnedAndAttentionFirst(
-              conversations,
-              attentionConversationIds(conversations, waitingConversationIds),
-            ),
+            pinnedAndWaitingFirst(conversations, waitingConversations),
             page,
             PAGE_SIZE,
           )}
@@ -70,7 +64,7 @@ export function RepositoryConversationsTab(props: { repositoryId: string }) {
           }
           loading={!feed.data}
           timeZone={getDashboardTimeZone()}
-          waitingConversationIds={waitingConversationIds}
+          waitingConversations={waitingConversations}
         />
       )}
       <PagePagination

package/src/client/pages/system/PluginDetails.tsx

@@ -1,8 +1,10 @@
 import { Boxes, KeyRound, Sparkles } from "lucide-react";
+import type { ReactNode } from "react";
 
 import { Card } from "../../components/layout/Card";
 import { anchorTitleId } from "../../components/layout/AnchorHeading";
 import { SectionIntro } from "../../components/layout/SectionIntro";
+import { SkillLink } from "../../components/SkillLink";
 import type { SystemPlugin } from "./SystemPlugins";
 
 /** Render non-reporting plugin metadata. */
@@ -28,6 +30,7 @@ export function PluginDetails(props: { plugin: SystemPlugin }) {
           <CapabilityList
             emptyText="No plugin-provided skills were discovered."
             items={props.plugin.skills.map((skill) => skill.name)}
+            renderItem={(name) => <SkillLink chip key={name} name={name} />}
             title="Skills"
           />
           {props.plugin.configKeys.length ? (
@@ -69,6 +72,7 @@ function Detail(props: { icon: typeof Boxes; label: string; value: string }) {
 function CapabilityList(props: {
   emptyText: string;
   items: string[];
+  renderItem?(item: string): ReactNode;
   title: string;
 }) {
   return (
@@ -78,14 +82,17 @@ function CapabilityList(props: {
       </h3>
       {props.items.length ? (
         <div className="mt-2.5 flex flex-wrap gap-2">
-          {props.items.map((item) => (
-            <span
-              className="rounded-md border border-dashboard-border bg-dashboard-overlay-soft px-2.5 py-1.5 font-mono text-xs text-dashboard-text-muted"
-              key={item}
-            >
-              {item}
-            </span>
-          ))}
+          {props.items.map(
+            (item) =>
+              props.renderItem?.(item) ?? (
+                <span
+                  className="rounded-md border border-dashboard-border bg-dashboard-overlay-soft px-2.5 py-1.5 font-mono text-xs text-dashboard-text-muted"
+                  key={item}
+                >
+                  {item}
+                </span>
+              ),
+          )}
         </div>
       ) : (
         <p className="mt-2 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">

package/src/client/pages/system/SkillInventory.tsx

@@ -4,6 +4,7 @@ import { getDashboardAgentName } from "../../agentName";
 
 import { Card } from "../../components/layout/Card";
 import { SectionIntro } from "../../components/layout/SectionIntro";
+import { SkillLink } from "../../components/SkillLink";
 import { formatCompactNumber } from "../../format";
 
 type SkillGroup = { pluginProvider?: string; skills: SkillReport[] };
@@ -81,12 +82,7 @@ function SkillGroupCard(props: { group: SkillGroup }) {
       </div>
       <div className="flex flex-wrap gap-2">
         {props.group.skills.map((skill) => (
-          <span
-            className="rounded-md border border-dashboard-border bg-dashboard-overlay-soft px-2.5 py-1.5 font-mono text-xs text-dashboard-text-muted"
-            key={skill.name}
-          >
-            {skill.name}
-          </span>
+          <SkillLink chip key={skill.name} name={skill.name} />
         ))}
       </div>
     </article>

package/src/client/review-desk/queries.ts

@@ -155,47 +155,54 @@ export function useReviewItemAction() {
   });
 }
 
-/** Newest open Review item title and item count for one waiting Conversation. */
-export type WaitingConversation = { count: number; title: string };
+/**
+ * Open Review items, newest first, that one Conversation waits on the viewer
+ * for, and when the wait began (the oldest item).
+ */
+export type WaitingConversation = {
+  items: Array<{ plugin?: string; title: string }>;
+  waitingSince: string;
+};
 
 const NO_WAITING: ReadonlyMap<string, WaitingConversation> = new Map();
 
+const waitingConversationsQuery = {
+  queryKey: [...REVIEW_ITEMS_QUERY_KEY, "waiting-conversations"],
+  queryFn: ({ signal }: { signal: AbortSignal }) =>
+    fetchDashboardJson(
+      reviewItemWaitingConversationsSchema,
+      "/api/review-items/waiting-conversations",
+      signal,
+    ),
+  retry: false,
+};
+
+/** Whether the first read of the waiting Conversations has finished. */
+export function useWaitingConversationsSettled(): boolean {
+  return !useQuery(waitingConversationsQuery).isPending;
+}
+
 /**
- * Return the Conversations that wait on the viewer, by Conversation id. Today
- * only the review desk sets this: a linked open action item assigned to the
- * viewer.
+ * Return the Conversations that wait on the viewer, by Conversation id: each
+ * has a linked open action item assigned to the viewer. An agent's action
+ * asks a question; a plugin's action asks for a step such as a merge.
  */
 export function useWaitingConversations(): ReadonlyMap<
   string,
   WaitingConversation
 > {
-  const query = useQuery({
-    queryKey: [...REVIEW_ITEMS_QUERY_KEY, "waiting-conversations"],
-    queryFn: ({ signal }) =>
-      fetchDashboardJson(
-        reviewItemWaitingConversationsSchema,
-        "/api/review-items/waiting-conversations",
-        signal,
-      ),
-    retry: false,
-  });
+  const query = useQuery(waitingConversationsQuery);
   const conversations = query.data?.conversations;
   return useMemo(
     () =>
       conversations
         ? new Map(
-            conversations.map(({ conversationId, count, title }) => [
+            conversations.map(({ conversationId, items, waitingSince }) => [
               conversationId,
-              { count, title },
+              { items, waitingSince },
             ]),
           )
         : NO_WAITING,
     [conversations],
   );
 }
-
-/** Return the ids of the Conversations that wait on the viewer. */
-export function useWaitingConversationIds(): ReadonlySet<string> {
-  const waiting = useWaitingConversations();
-  return useMemo(() => new Set(waiting.keys()), [waiting]);
-}

package/src/client/review-desk/reviewItemFormat.ts

@@ -26,7 +26,9 @@ export function reviewItemSubjectHref(url: string): string | undefined {
 /** Name the state of an item: what it needs while open, or how it closed. */
 export function reviewItemStatusLabel(item: ReviewItemPayload): string {
   if (item.status === "open") {
-    return item.kind === "action" ? "Needs an answer" : "Notice";
+    if (item.kind === "notice") return "Notice";
+    // A plugin ask waits on a step outside Junior, so it has no question.
+    return item.request ? "Needs an answer" : "Waiting on you";
   }
   return item.status === "done" ? "Done" : "Dismissed";
 }

package/src/client/types.ts

@@ -11,6 +11,7 @@ import type {
 import type {
   ActorIdentity,
   ConversationReportMessageEvent,
+  ConversationFeedItem,
   ConversationStatsReport,
   ReplyTimeSegmentsReport,
   ConversationSummaryReport,
@@ -167,6 +168,8 @@ export type ConversationTranscript = ConversationDetailReport;
 
 export type Conversation = {
   activityPreview?: ConversationSummaryReport["activityPreview"];
+  /** The latest Brief's status, summary, and intent, when visible. */
+  brief?: ConversationFeedItem["brief"];
   annotations?: ConversationSummaryReport["annotations"];
   sidebarAnnotations?: ConversationSummaryReport["sidebarAnnotations"];
   archivedAt?: string | null;
@@ -185,6 +188,8 @@ export type Conversation = {
   id: string;
   /** The viewer takes part, so they can pin, archive, rename, and mark it. */
   isParticipant: boolean;
+  /** Newest true user Message or shown Junior reply. Feed rows only. */
+  lastMessageAt?: string;
   lastProgressAt: string;
   lastSeenAt: string;
   locationId?: string;
@@ -201,7 +206,6 @@ export type Conversation = {
   parentConversationId?: string;
   /** Visible Threads under this row, newest first. */
   threads?: Conversation[];
-  unfinishedWork?: boolean;
   /** A Turn waits on a person to finish an authorization. Server-owned. */
   awaitingAuthorization?: boolean;
   visibility?: ConversationSummaryReport["visibility"];

package/src/mock-reporting/review-items.ts

@@ -267,8 +267,12 @@ export function readMockWaitingConversations(nowMs: number) {
   return {
     conversations: [...byConversation].map(([conversationId, items]) => ({
       conversationId,
-      count: items.length,
-      title: items.at(-1)!.title,
+      items: [...items].reverse().map(({ title }) => ({ title })),
+      waitingSince: items
+        .map((item) => item.createdAt)
+        .reduce((oldest, createdAt) =>
+          createdAt < oldest ? createdAt : oldest,
+        ),
     })),
     needsViewer: open.length,
   };