@sentry/junior-dashboard 0.294.0 → 0.295.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.294.0",
+  "version": "0.295.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -45,10 +45,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.294.0"
+    "@sentry/junior-plugin-api": "0.295.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.294.0"
+    "@sentry/junior": "0.295.0"
   },
   "devDependencies": {
     "@fontsource-variable/inter": "^5.3.0",
@@ -72,7 +72,7 @@
     "typescript": "^7.0.2",
     "unrun": "^0.3.1",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.294.0"
+    "@sentry/junior": "0.295.0"
   },
   "scripts": {
     "build": "pnpm --filter @sentry/junior-plugin-api build && pnpm --filter @sentry/junior build && pnpm run build:css && pnpm run build:client && pnpm run build:server",

package/src/client/api.ts

@@ -30,6 +30,7 @@ import {
 import {
   pluginOperationalReportFeedSchema,
   pluginsSchema,
+  skillDetailReportSchema,
   skillReportsSchema,
 } from "@sentry/junior/api/schema";
 import { pluginUserPageLinksSchema } from "@sentry/junior-plugin-api";
@@ -388,6 +389,21 @@ export function useSkillsData() {
   });
 }
 
+/** Fetch one skill with its SKILL.md body. */
+export function useSkillDetail(name: string) {
+  return useQuery({
+    queryKey: ["dashboard", "skills", name],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        skillDetailReportSchema,
+        `/api/skills/${encodeURIComponent(name)}`,
+        signal,
+      ),
+    retry: false,
+    staleTime: dashboardMetadataStaleTimeMs,
+  });
+}
+
 /** Fetch operational plugin reports used by System navigation and pages. */
 export function usePluginReportsData() {
   return useQuery({

package/src/client/components/MarkdownViewToggle.tsx

@@ -0,0 +1,24 @@
+import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group";
+
+/** How a drawer shows Markdown text. */
+export type MarkdownView = "formatted" | "raw";
+
+/** Switch a Markdown preview between formatted and raw text. */
+export function MarkdownViewToggle(props: {
+  onChange(view: MarkdownView): void;
+  value: MarkdownView;
+}) {
+  return (
+    <ToggleGroup
+      aria-label="Markdown view"
+      onValueChange={(values) => {
+        const next = values[0];
+        if (next) props.onChange(next);
+      }}
+      value={[props.value]}
+    >
+      <ToggleGroupItem value="formatted">Formatted</ToggleGroupItem>
+      <ToggleGroupItem value="raw">Raw</ToggleGroupItem>
+    </ToggleGroup>
+  );
+}

package/src/client/components/SkillLink.tsx

@@ -0,0 +1,119 @@
+import { useId, useState, type ReactNode } from "react";
+
+import { useSkillDetail } from "../api";
+import { HighlightedCode } from "../code";
+import { DisplayText } from "../display-text/DisplayText";
+import { DashboardApiError } from "../http";
+import { cn } from "../styles";
+import { Drawer } from "./Drawer";
+import { InlineError } from "./InlineError";
+import { MarkdownViewToggle, type MarkdownView } from "./MarkdownViewToggle";
+import { Skeleton } from "./ui/skeleton";
+
+const SKELETON_LINE_WIDTHS = ["w-3/4", "w-full", "w-5/6", "w-2/3", "w-full"];
+
+/** Write a skill name the way people invoke it, such as `$self-update`. */
+export function skillLabel(name: string): string {
+  return `$${name}`;
+}
+
+/**
+ * Name a skill as `$skill-name` and open its SKILL.md in a drawer on click.
+ * Pass children to replace the label, such as "View skill". Set `chip` in
+ * skill lists.
+ */
+export function SkillLink(props: {
+  children?: ReactNode;
+  chip?: boolean;
+  name: string;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button
+        className={cn(
+          "cursor-pointer text-dashboard-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus",
+          props.chip
+            ? "rounded-md border border-dashboard-border bg-dashboard-overlay-soft px-2.5 py-1.5 text-xs hover:border-dashboard-border-heavy"
+            : "border-0 bg-transparent p-0 hover:underline",
+          props.children ? "font-sans" : "font-mono",
+        )}
+        onClick={() => setOpen(true)}
+        type="button"
+      >
+        {props.children ?? skillLabel(props.name)}
+      </button>
+      {open ? (
+        <SkillDrawer name={props.name} onClose={() => setOpen(false)} />
+      ) : null}
+    </>
+  );
+}
+
+function SkillDrawer(props: { name: string; onClose(): void }) {
+  const titleId = useId();
+  const [view, setView] = useState<MarkdownView>("formatted");
+  const skill = useSkillDetail(props.name);
+  const missing =
+    skill.error instanceof DashboardApiError && skill.error.status === 404;
+
+  return (
+    <Drawer
+      actions={
+        skill.data ? (
+          <MarkdownViewToggle onChange={setView} value={view} />
+        ) : null
+      }
+      closeLabel={`Close ${skillLabel(props.name)}`}
+      header={
+        <div className="min-w-0 [overflow-wrap:anywhere]">
+          <h2
+            className="m-0 font-mono text-sm font-semibold text-dashboard-text"
+            id={titleId}
+          >
+            {skillLabel(props.name)}
+          </h2>
+          {skill.data ? (
+            <div className="font-sans text-xs text-dashboard-text-muted">
+              {skill.data.pluginProvider
+                ? `From the ${skill.data.pluginProvider} plugin`
+                : "App or local skill"}
+              {skill.data.disableModelInvocation ? " · Manual only" : ""}
+            </div>
+          ) : null}
+        </div>
+      }
+      onClose={props.onClose}
+      openKey={titleId}
+      titleId={titleId}
+      width="wide"
+    >
+      {skill.isPending ? (
+        <div aria-label="Loading skill" className="grid gap-2" role="status">
+          {SKELETON_LINE_WIDTHS.map((width, index) => (
+            <Skeleton className={`h-4 ${width}`} key={index} />
+          ))}
+        </div>
+      ) : skill.isError ? (
+        <InlineError>
+          {missing
+            ? "This skill is no longer installed."
+            : "Could not load this skill."}
+        </InlineError>
+      ) : (
+        <div className="grid min-w-0 gap-4">
+          <p className="m-0 text-sm text-dashboard-text-muted">
+            {skill.data.description}
+          </p>
+          <div className="border-t border-dashboard-border-subtle pt-4">
+            {view === "formatted" ? (
+              <DisplayText document text={skill.data.body} />
+            ) : (
+              <HighlightedCode code={skill.data.body} language="markdown" />
+            )}
+          </div>
+        </div>
+      )}
+    </Drawer>
+  );
+}

package/src/client/conversations/ConversationHomeList.tsx

@@ -20,24 +20,24 @@ import {
   ParticipantAvatarStack,
 } from "../components/ParticipantAvatarStack";
 import { cn } from "../styles";
+import type { WaitingConversation } from "../review-desk/queries";
 import type { Conversation } from "../types";
 import { useConversationActionToasts } from "./conversationActionToasts";
 import { formatActivityDay } from "./conversationAge";
 import { conversationCardTags } from "./ConversationContextTags";
-import { ConversationListStatusIcon } from "./ConversationListStatusIcon";
+import {
+  ConversationListStatusIcon,
+  ConversationStatusText,
+} from "./ConversationListStatusIcon";
 import { conversationPath } from "./conversationRoutes";
 import { useArchiveConversation } from "./conversationArchive";
 import { DisplayText } from "../display-text/DisplayText";
-import {
-  attentionConversationIds,
-  buildConversationSections,
-  type ConversationSection,
-} from "./conversationSections";
+import type { ConversationSection } from "./conversationSections";
+import { ConversationSectionList } from "./ConversationSectionList";
 import { ConversationSectionHeading } from "./ConversationSectionHeading";
 import { usePrefetchConversation } from "./conversationPrefetch";
 import { useCollapsedConversationSections } from "./useCollapsedConversationSections";
 import {
-  PinnedConversationOrder,
   usePinnedRowDrag,
   type PinnedRowDrag,
 } from "./PinnedConversationOrder";
@@ -51,7 +51,7 @@ export function ConversationHomeList(props: {
   /** Leave unset when the list shows only some pins. */
   onReorderPins?: ReorderPins;
   timeZone: string;
-  waitingConversationIds: ReadonlySet<string>;
+  waitingConversations: ReadonlyMap<string, WaitingConversation>;
 }) {
   const { collapsedKeys, toggle: toggleSection } =
     useCollapsedConversationSections();
@@ -63,49 +63,48 @@ export function ConversationHomeList(props: {
     [showActionError],
   );
 
-  if (props.loading && props.conversations.length === 0) {
-    return <ConversationHomeListLoading label="Loading conversations" />;
-  }
-
-  if (props.conversations.length === 0) {
-    return (
-      <div className="rounded-lg border border-dashboard-border-subtle bg-dashboard-fill-faint p-4">
-        <EmptyTelemetry>
-          {props.emptyLabel ?? "No conversations match this view."}
-        </EmptyTelemetry>
-      </div>
-    );
-  }
-
-  const sections = buildConversationSections(props.conversations, {
-    attentionIds: attentionConversationIds(
-      props.conversations,
-      props.waitingConversationIds,
-    ),
-    nowMs: Date.now(),
-    timeZone: props.timeZone,
-  });
-  const pinnedSection = sections.find((section) => section.key === "pinned");
+  // The list stays mounted through the first load, so a pointer that rests
+  // on it then still holds the order.
   return (
-    <PinnedConversationOrder
-      conversations={pinnedSection?.conversations ?? []}
-      onError={handleReorderError}
-      reorder={props.onReorderPins}
+    <ConversationSectionList
+      conversations={props.conversations}
+      loading={props.loading ?? false}
+      onReorderError={handleReorderError}
+      onReorderPins={props.onReorderPins}
+      timeZone={props.timeZone}
+      waitingConversations={props.waitingConversations}
     >
-      <div aria-label="Your conversations" className="grid gap-5" role="list">
-        {sections.map((section) => (
-          <ConversationCardSection
-            collapsed={collapsedKeys.has(section.key)}
-            key={section.key}
-            onArchiveError={showArchiveError}
-            onArchived={showArchived}
-            onToggle={() => toggleSection(section.key)}
-            waitingConversationIds={props.waitingConversationIds}
-            section={section}
-          />
-        ))}
-      </div>
-    </PinnedConversationOrder>
+      {({ releaseHold, sections }) =>
+        props.loading && props.conversations.length === 0 ? (
+          <ConversationHomeListLoading label="Loading conversations" />
+        ) : props.conversations.length === 0 ? (
+          <div className="rounded-lg border border-dashboard-border-subtle bg-dashboard-fill-faint p-4">
+            <EmptyTelemetry>
+              {props.emptyLabel ?? "No conversations match this view."}
+            </EmptyTelemetry>
+          </div>
+        ) : (
+          <div
+            aria-label="Your conversations"
+            className="grid gap-5"
+            role="list"
+          >
+            {sections.map((section) => (
+              <ConversationCardSection
+                collapsed={collapsedKeys.has(section.key)}
+                key={section.key}
+                onArchiveError={showArchiveError}
+                onArchived={showArchived}
+                onRowAction={releaseHold}
+                onToggle={() => toggleSection(section.key)}
+                waitingConversations={props.waitingConversations}
+                section={section}
+              />
+            ))}
+          </div>
+        )
+      }
+    </ConversationSectionList>
   );
 }
 
@@ -176,9 +175,10 @@ function ConversationCardSection(props: {
   collapsed: boolean;
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
+  onRowAction(): void;
   onToggle(): void;
   section: ConversationSection;
-  waitingConversationIds: ReadonlySet<string>;
+  waitingConversations: ReadonlyMap<string, WaitingConversation>;
 }) {
   return (
     <section aria-labelledby={`conversation-section-${props.section.key}`}>
@@ -202,9 +202,8 @@ function ConversationCardSection(props: {
               conversation,
               onArchiveError: props.onArchiveError,
               onArchived: props.onArchived,
-              waitingOnViewer: props.waitingConversationIds.has(
-                conversation.id,
-              ),
+              onRowAction: props.onRowAction,
+              waitingOnViewer: props.waitingConversations.has(conversation.id),
             };
             return conversation.pinnedAt ? (
               <PinnedConversationCard {...card} key={conversation.id} />
@@ -224,6 +223,8 @@ type ConversationCardProps = {
   drag?: PinnedRowDrag;
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
+  /** Lets the list show the result of a row action at once. */
+  onRowAction(): void;
   waitingOnViewer: boolean;
 };
 
@@ -250,13 +251,11 @@ function ConversationCard(props: ConversationCardProps) {
   const prefetch = usePrefetchConversation(conversation.id);
   const VisibilityIcon = isPrivate ? LockKeyhole : MessageSquare;
   const unread = Boolean(conversation.unread);
-  // Idle and stopped conversations get no badge, so the badges that show
-  // stand out.
-  const showStatus =
-    props.waitingOnViewer ||
-    unread ||
-    status === "active" ||
-    status === "failed";
+  const emphasized = props.waitingOnViewer || unread;
+  // Only read state gets a badge. A running card shows its spinner in place
+  // of the time, and failed and stopped are text beside the time.
+  const showStatus = emphasized && status !== "active";
+  const activityAt = conversation.lastMessageAt ?? conversation.lastSeenAt;
   return (
     <article
       {...prefetch}
@@ -292,8 +291,6 @@ function ConversationCard(props: ConversationCardProps) {
         {showStatus ? (
           <span className="absolute -bottom-1 -right-1 grid size-3.5 place-items-center rounded-full bg-dashboard-surface-panel">
             <ConversationListStatusIcon
-              // The tile already shows the lock.
-              isPrivate={false}
               status={status}
               unread={unread}
               waitingOnViewer={props.waitingOnViewer}
@@ -303,7 +300,12 @@ function ConversationCard(props: ConversationCardProps) {
       </span>
       <div className="grid min-w-0">
         <div className="flex min-w-0 items-center gap-3">
-          <h4 className="pointer-events-none relative z-[1] m-0 min-w-0 flex-1 truncate font-display text-sm font-medium leading-6 text-dashboard-text">
+          <h4
+            className={cn(
+              "pointer-events-none relative z-[1] m-0 min-w-0 flex-1 truncate font-display text-sm leading-6 text-dashboard-text",
+              emphasized ? "font-semibold" : "font-medium",
+            )}
+          >
             {title}
           </h4>
           {participants.length > 0 ? (
@@ -321,27 +323,36 @@ function ConversationCard(props: ConversationCardProps) {
               />
             </span>
           ) : (
-            <time
-              className="pointer-events-none relative z-[1] min-w-14 whitespace-nowrap text-right font-sans text-xs tabular-nums text-dashboard-text-muted"
-              dateTime={conversation.lastSeenAt}
-              title={formatTime(conversation.lastSeenAt, {
-                dateStyle: "medium",
-                timeStyle: "short",
-              })}
-            >
-              {formatActivityDay(conversation.lastSeenAt)}
-            </time>
+            <>
+              {/* The tile already shows the lock. */}
+              <ConversationStatusText
+                className="pointer-events-none relative z-[1]"
+                isPrivate={false}
+                status={status}
+              />
+              <time
+                className="pointer-events-none relative z-[1] min-w-14 whitespace-nowrap text-right font-sans text-xs tabular-nums text-dashboard-text-muted"
+                dateTime={activityAt}
+                title={formatTime(activityAt, {
+                  dateStyle: "medium",
+                  timeStyle: "short",
+                })}
+              >
+                {formatActivityDay(activityAt)}
+              </time>
+            </>
           )}
           <button
             aria-label={`${conversation.archivedAt ? "Restore" : "Archive"} ${title}`}
             className="relative z-[1] shrink-0 cursor-pointer border-0 bg-transparent p-0 text-dashboard-text-muted transition before:absolute before:-inset-2 hover:text-dashboard-text focus:outline-none focus:ring-2 focus:ring-dashboard-focus focus:ring-offset-2 focus:ring-offset-dashboard-canvas disabled:cursor-not-allowed disabled:opacity-50"
             disabled={archive.isPending}
-            onClick={() =>
+            onClick={() => {
+              props.onRowAction();
               archive.mutate({
                 archived: !conversation.archivedAt,
                 lastSeenAt: conversation.lastSeenAt,
-              })
-            }
+              });
+            }}
             type="button"
           >
             {conversation.archivedAt ? (

package/src/client/conversations/ConversationListStatusIcon.tsx

@@ -5,78 +5,62 @@ import { cn } from "../styles";
 import type { VisualStatus } from "../types";
 
 /**
- * Render a conversation status marker. "Waiting on you" replaces every other
- * marker. A running conversation shows a spinner, so it never looks like an
- * ended one.
+ * Render the row marker. Rows use three channels: the section for position,
+ * a dot with a bold title for read state, and a spinner for a running Turn.
+ * Waiting rows use the same dot as unread rows; their section and chip say
+ * why. Private, failed, and stopped go in `ConversationStatusText`.
  */
 export function ConversationListStatusIcon(props: {
-  isPrivate: boolean;
   status: VisualStatus;
   unread: boolean;
   waitingOnViewer: boolean;
 }) {
-  if (props.waitingOnViewer) {
-    return (
-      <span
-        aria-label="Waiting on you"
-        className="size-2 shrink-0 rounded-full bg-violet-300 shadow-[0_0_6px_rgba(196,181,253,0.7)]"
-        role="img"
-      />
-    );
-  }
-
   if (props.status === "active") {
     return <Spinner aria-label="Running" className="size-3 text-emerald-300" />;
   }
-
-  if (props.unread) {
-    return (
-      <span
-        aria-label="Unread"
-        className="size-1.5 shrink-0 rounded-full bg-orange-300"
-        role="img"
-      />
-    );
-  }
-
-  if (props.isPrivate) {
-    return (
-      <LockKeyhole
-        aria-label="Private conversation"
-        className={cn(
-          "size-3 shrink-0",
-          props.status === "failed" && "text-rose-300",
-          (props.status === "idle" || props.status === "stopped") &&
-            "text-dashboard-text-muted",
-        )}
-      />
-    );
-  }
-
-  if (props.status === "stopped") {
-    return (
-      <span
-        aria-label="Stopped"
-        className="size-1.5 shrink-0 bg-dashboard-text-muted"
-        role="img"
-      />
-    );
-  }
-
-  if (props.status === "failed") {
+  if (props.unread || props.waitingOnViewer) {
     return (
       <span
-        aria-label="Failed"
-        className="size-1.5 shrink-0 rounded-full bg-rose-300"
+        aria-label={props.waitingOnViewer ? "Waiting on you" : "Unread"}
+        className="size-1.5 shrink-0 rounded-full bg-dashboard-accent"
         role="img"
       />
     );
   }
+  return null;
+}
 
+/** Secondary row text for a private, failed, or stopped conversation. */
+export function ConversationStatusText(props: {
+  className?: string;
+  isPrivate: boolean;
+  status: VisualStatus;
+}) {
+  if (
+    !props.isPrivate &&
+    props.status !== "failed" &&
+    props.status !== "stopped"
+  )
+    return null;
   return (
     <span
-      aria-hidden="true"
-      className="size-1.5 shrink-0 rounded-full bg-dashboard-text-faint"
-    />
+      className={cn(
+        "inline-flex shrink-0 items-center gap-1 font-sans text-xs",
+        props.className,
+      )}
+    >
+      {props.isPrivate ? (
+        <LockKeyhole
+          aria-label="Private conversation"
+          className="size-3 shrink-0 text-dashboard-text-faint"
+          role="img"
+        />
+      ) : null}
+      {props.status === "failed" ? (
+        <span className="text-rose-400">Failed</span>
+      ) : props.status === "stopped" ? (
+        <span className="text-dashboard-text-muted">Stopped</span>
+      ) : null}
+    </span>
   );
 }

package/src/client/conversations/ConversationSectionList.tsx

@@ -0,0 +1,101 @@
+import { useCallback, useMemo, type ReactNode } from "react";
+import { ArrowUp } from "lucide-react";
+
+import {
+  useWaitingConversationsSettled,
+  type WaitingConversation,
+} from "../review-desk/queries";
+import type { Conversation } from "../types";
+import {
+  buildConversationSections,
+  type ConversationSection,
+} from "./conversationSections";
+import { useHeldListOrder } from "./heldListOrder";
+import { PinnedConversationOrder } from "./PinnedConversationOrder";
+import type { ReorderPins } from "./useReorderPinnedConversations";
+
+/**
+ * Lay out a conversation list in its sections and hold the order while the
+ * reader points at it or works in it. The sidebar and the home list render
+ * their rows inside this, so both group, sort, and hold the same way. Row
+ * actions call `releaseHold`, so their result shows at once.
+ */
+export function ConversationSectionList(props: {
+  children(view: {
+    releaseHold(): void;
+    sections: ConversationSection[];
+  }): ReactNode;
+  className?: string;
+  conversations: Conversation[];
+  loading: boolean;
+  onReorderError(conversation: Conversation): void;
+  /** Leave unset when the list shows only some pins. */
+  onReorderPins?: ReorderPins;
+  timeZone: string;
+  waitingConversations: ReadonlyMap<string, WaitingConversation>;
+}) {
+  // Rebuild sections only when their inputs change. Avoid fresh Date.now()
+  // arrays on unrelated parent renders while the reader is scrolling.
+  const latestSections = useMemo(
+    () =>
+      buildConversationSections(props.conversations, {
+        nowMs: Date.now(),
+        timeZone: props.timeZone,
+        waiting: props.waitingConversations,
+      }),
+    [props.conversations, props.timeZone, props.waitingConversations],
+  );
+  const waitingSettled = useWaitingConversationsSettled();
+  const held = useHeldListOrder(latestSections, {
+    settled: !props.loading && waitingSettled,
+  });
+  const { releaseHold } = held;
+  const { onReorderPins } = props;
+  const reorderPins = useCallback<ReorderPins>(
+    (move) => {
+      releaseHold();
+      onReorderPins?.(move);
+    },
+    [onReorderPins, releaseHold],
+  );
+  const pinned =
+    held.sections.find((section) => section.key === "pinned")?.conversations ??
+    [];
+  return (
+    <div {...held.holdProps} className={props.className}>
+      <ListUpdatesPill count={held.pending} onApply={held.applyPending} />
+      <PinnedConversationOrder
+        conversations={pinned}
+        onError={props.onReorderError}
+        reorder={onReorderPins ? reorderPins : undefined}
+      >
+        {props.children({ releaseHold, sections: held.sections })}
+      </PinnedConversationOrder>
+    </div>
+  );
+}
+
+/**
+ * Offer the order that the held list keeps back. The list holds its order
+ * while the reader points at it or works in it; this applies the new order.
+ */
+function ListUpdatesPill(props: { count: number; onApply(): void }) {
+  return (
+    <div
+      aria-live="polite"
+      // Above the sticky section headings of the home list.
+      className="pointer-events-none sticky top-0 z-20 flex h-0 items-start justify-center"
+    >
+      {props.count > 0 ? (
+        <button
+          className="pointer-events-auto mt-1 inline-flex cursor-pointer items-center gap-1 rounded-full border border-dashboard-border-strong bg-dashboard-surface-raised px-2.5 py-1 font-sans text-xs font-medium text-dashboard-text shadow-sm duration-150 hover:border-dashboard-border-interactive focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-1"
+          onClick={props.onApply}
+          type="button"
+        >
+          <ArrowUp aria-hidden="true" className="size-3" />
+          {props.count} updated
+        </button>
+      ) : null}
+    </div>
+  );
+}