@sentry/junior-dashboard 0.61.0 → 0.63.0

package/src/client/pages/ConversationPage.tsx

@@ -4,16 +4,24 @@ import { useConversationData } from "../api";
 import { StatusBadge } from "../components/StatusBadge";
 import {
   buildConversations,
+  conversationIdentityMeta,
   conversationDisplayTitle,
   formatConversationDuration,
   formatRelativeTime,
   formatTime,
-  formatUsageTotal,
   slackLocationLabel,
-  turnMessageCount,
-  turnToolCallCount,
+  summarizeMessages,
+  summarizeToolCalls,
+  summarizeUsage,
   visualStatusForConversation,
 } from "../format";
+import { MetricList, type MetricListItem } from "../components/Metric";
+import {
+  DurationMetric,
+  MessagesMetric,
+  TokenMetric,
+  ToolCallsMetric,
+} from "../components/TelemetryMetrics";
 import { Transcript } from "../components/Transcript";
 import { TranscriptLoading } from "../components/TranscriptLoading";
 import type {
@@ -81,15 +89,9 @@ function ConversationIdentity(props: {
   conversation: Conversation | undefined;
   conversationId: string | undefined;
 }) {
-  const id = props.conversationId ?? "missing conversation id";
-  const owner =
-    props.conversation?.requesterIdentity?.email ??
-    props.conversation?.requester ??
-    props.conversation?.requesterIdentity?.slackUserName;
   return (
     <>
-      {owner ? `${owner} · ` : ""}
-      {id}
+      {conversationIdentityMeta(props.conversation, props.conversationId)}
       {props.conversation?.sentryConversationUrl ? (
         <>
           {" · "}
@@ -112,41 +114,78 @@ function ConversationStats(props: {
   detail?: ConversationDetailFeed;
 }) {
   if (!props.conversation) return null;
-  const messages = props.detail
-    ? props.detail.turns.reduce(
-        (count, turn) => count + turnMessageCount(turn),
-        0,
-      )
+  const messageSummary = props.detail
+    ? summarizeMessages(props.detail.turns)
     : undefined;
-  const toolCalls = props.detail
-    ? props.detail.turns.reduce(
-        (count, turn) => count + turnToolCallCount(turn),
-        0,
-      )
+  const toolSummary = props.detail
+    ? summarizeToolCalls(props.detail.turns)
     : undefined;
-  const tokens = formatUsageTotal(
+  const tokenSummary = summarizeUsage(
     (props.detail?.turns ?? props.conversation.turns).map(
       (turn) => turn.cumulativeUsage,
     ),
   );
-  const stats = [
-    slackLocationLabel(props.conversation, { includeId: false }),
-    `${props.conversation.turns.length} turns`,
-    messages === undefined ? "messages loading" : `${messages} messages`,
-    toolCalls === undefined ? "tool calls loading" : `${toolCalls} tool calls`,
-    tokens,
-    formatConversationDuration(props.conversation),
-    `started ${formatTime(props.conversation.startedAt)}`,
-  ].filter(Boolean);
+  const location = slackLocationLabel(props.conversation, {
+    includeId: false,
+  });
+  const durationLabel = formatConversationDuration(props.conversation);
+  const turnCount = props.conversation.turns.length;
+  const rawStats: Array<MetricListItem | undefined> = [
+    location
+      ? {
+          content: location,
+          key: "location",
+        }
+      : undefined,
+    {
+      content: `${turnCount} ${turnCount === 1 ? "turn" : "turns"}`,
+      key: "turns",
+    },
+    {
+      content: (
+        <MessagesMetric loading={!props.detail} summary={messageSummary} />
+      ),
+      key: "messages",
+    },
+    !props.detail || (toolSummary && toolSummary.total > 0)
+      ? {
+          content: (
+            <ToolCallsMetric loading={!props.detail} summary={toolSummary} />
+          ),
+          key: "tools",
+        }
+      : undefined,
+    tokenSummary
+      ? {
+          content: <TokenMetric summary={tokenSummary} />,
+          key: "tokens",
+        }
+      : undefined,
+    durationLabel !== "none"
+      ? {
+          content: (
+            <DurationMetric
+              endedAt={props.conversation.lastSeenAt}
+              label={durationLabel}
+              startedAt={props.conversation.startedAt}
+            />
+          ),
+          key: "duration",
+        }
+      : undefined,
+    {
+      content: `started ${formatTime(props.conversation.startedAt)}`,
+      key: "started",
+    },
+  ];
+  const stats = rawStats.filter(
+    (item): item is MetricListItem => item !== undefined,
+  );
 
   return (
-    <div className="col-span-full flex flex-wrap gap-x-3 gap-y-1 break-words text-[0.76rem] leading-[1.45] text-[#888]">
-      {stats.map((value, index) => (
-        <span key={`${index}-${value}`}>
-          {index > 0 ? <span className="mr-3 text-[#666]">·</span> : null}
-          {value}
-        </span>
-      ))}
-    </div>
+    <MetricList
+      className="col-span-full break-words text-[0.76rem] leading-[1.45] text-[#888]"
+      items={stats}
+    />
   );
 }

package/src/client/toolInvocations.ts

@@ -0,0 +1,16 @@
+type ToolInvocationRef = {
+  id?: string;
+  name?: string;
+};
+
+/** Match tool call/result refs without inferring relationships from missing metadata. */
+export function sameToolInvocation(
+  left: ToolInvocationRef,
+  right: ToolInvocationRef,
+): boolean {
+  if (left.id || right.id) {
+    return Boolean(left.id && right.id && left.id === right.id);
+  }
+  if (left.name && right.name) return left.name === right.name;
+  return false;
+}

package/src/client/types.ts

@@ -1,119 +1,59 @@
 import type { BundledLanguage } from "shiki/bundle/web";
+import type {
+  DashboardConversationReport,
+  DashboardRequesterIdentity,
+  DashboardSessionFeed,
+  DashboardSessionReport,
+  DashboardTurnReport,
+  DashboardTurnUsage,
+  HealthReport,
+  PluginReport,
+  RuntimeInfoReport,
+  SkillReport,
+} from "@sentry/junior/reporting";
 
-export type Health = { service: string; status: string; timestamp: string };
+export type Health = HealthReport;
 
-export type Runtime = {
-  cwd: string;
-  descriptionText?: string;
-  homeDir: string;
-  packagedContent: { packageNames: string[] };
-};
+export type Runtime = RuntimeInfoReport;
 
-export type Plugin = { name: string };
+export type Plugin = PluginReport;
 
-export type Skill = { name: string; pluginProvider?: string };
+export type Skill = SkillReport;
 
-export type RequesterIdentity = {
-  email?: string;
-  fullName?: string;
-  slackUserId?: string;
-  slackUserName?: string;
-};
+export type RequesterIdentity = DashboardRequesterIdentity;
 
-export type TurnUsage = {
-  cachedInputTokens?: number;
-  cacheCreationTokens?: number;
-  inputTokens?: number;
-  outputTokens?: number;
-  totalTokens?: number;
-};
+export type TurnUsage = DashboardTurnUsage;
 
-export type Session = {
-  channel?: string;
-  channelName?: string;
-  conversationId?: string;
-  conversationTitle?: string;
-  cumulativeDurationMs?: number;
-  cumulativeUsage?: TurnUsage;
-  id: string;
-  lastProgressAt?: string;
-  lastSeenAt?: string;
-  requester?: string;
-  requesterIdentity?: RequesterIdentity;
-  sentryConversationUrl?: string;
-  sentryTraceUrl?: string;
-  startedAt?: string;
-  status: string;
-  surface?: string;
-  title?: string;
-  traceId?: string;
-};
+export type Session = DashboardSessionReport;
 
-export type TranscriptPart = {
-  bytes?: number;
-  chars?: number;
-  id?: string;
-  input?: unknown;
-  inputKeys?: string[];
-  inputSizeBytes?: number;
-  inputSizeChars?: number;
-  inputType?: string;
-  name?: string;
-  output?: unknown;
-  outputKeys?: string[];
-  outputSizeBytes?: number;
-  outputSizeChars?: number;
-  outputType?: string;
-  redacted?: boolean;
-  text?: string;
-  type: string;
-};
+export type TranscriptPart =
+  DashboardTurnReport["transcript"][number]["parts"][number];
 
-export type TranscriptMessage = {
-  parts: TranscriptPart[];
-  role: string;
-  timestamp?: number;
-};
+export type TranscriptMessage = DashboardTurnReport["transcript"][number];
 
-export type ConversationTurn = Session & {
-  transcript: TranscriptMessage[];
-  transcriptAvailable: boolean;
-  transcriptMetadata?: TranscriptMessage[];
-  transcriptMessageCount?: number;
-  transcriptRedacted?: boolean;
-  transcriptRedactionReason?: "non_public_conversation";
-};
+export type ConversationTurn = DashboardTurnReport;
 
-export type ConversationDetailFeed = {
-  conversationId: string;
-  generatedAt: string;
-  turns: ConversationTurn[];
-};
+export type ConversationDetailFeed = DashboardConversationReport;
 
 export type Conversation = {
   channel?: string;
   channelName?: string;
   conversationTitle?: string;
   id: string;
-  lastProgressAt?: string;
-  lastSeenAt?: string;
-  requester?: string;
+  lastProgressAt: string;
+  lastSeenAt: string;
   requesterIdentity?: RequesterIdentity;
   sentryConversationUrl?: string;
   sentryTraceUrl?: string;
-  startedAt?: string;
+  startedAt: string;
   status: Session["status"];
-  surface?: string;
+  surface: Session["surface"];
   title: string;
   traceId?: string;
   turns: Session[];
 };
 
-export type SessionFeed = {
-  generatedAt?: string;
-  sessions: Session[];
-  source: string;
-};
+export type SessionFeed = DashboardSessionFeed;
 
 export type Identity = { user: { email?: string; hostedDomain?: string } };
 
@@ -141,7 +81,11 @@ export type SessionFilter = "active" | "recent" | "hung" | "failed" | "all";
 
 export type VisualStatus = "active" | "failed" | "hung" | "idle";
 
-export type CodeBlock = { code: string; fenced?: boolean; language: BundledLanguage };
+export type CodeBlock = {
+  code: string;
+  fenced?: boolean;
+  language: BundledLanguage;
+};
 
 export type MarkupNode =
   | {

package/src/index.ts

@@ -0,0 +1,74 @@
+import {
+  type AgentPluginRoute,
+  defineJuniorPlugin,
+  type JuniorPlugin,
+} from "@sentry/junior-plugin-api";
+import { buildDashboardConversationURL, normalizeDashboardPath } from "./url";
+import { createDashboardApp, type JuniorDashboardOptions } from "./app";
+
+export { createDashboardApp, type JuniorDashboardOptions } from "./app";
+
+export interface JuniorDashboardPluginOptions extends JuniorDashboardOptions {
+  disabled?: boolean;
+}
+
+function dashboardRoutePaths(options: JuniorDashboardPluginOptions): string[] {
+  const basePath = normalizeDashboardPath(options.basePath, "/");
+  const authPath = normalizeDashboardPath(options.authPath, "/api/auth");
+  const pagePaths =
+    basePath === "/"
+      ? ["/", "/conversations", "/conversations/*", "/sessions", "/sessions/*"]
+      : [basePath, `${basePath}/*`];
+
+  return [
+    ...pagePaths,
+    "/favicon.ico",
+    "/api/dashboard/*",
+    authPath,
+    `${authPath}/*`,
+  ];
+}
+
+function dashboardRoutes(
+  options: JuniorDashboardPluginOptions,
+): AgentPluginRoute[] {
+  let app: ReturnType<typeof createDashboardApp> | undefined;
+  const fetch = (request: Request) => {
+    app ??= createDashboardApp(options);
+    return app.fetch(request);
+  };
+
+  return dashboardRoutePaths(options).map((path) => ({
+    handler: fetch,
+    path,
+  }));
+}
+
+/** Register dashboard routes and Slack footer links through trusted plugin hooks. */
+export function juniorDashboardPlugin(
+  options: JuniorDashboardPluginOptions = {},
+): JuniorPlugin {
+  return defineJuniorPlugin({
+    name: "dashboard",
+    hooks: {
+      routes() {
+        if (options.disabled) {
+          return [];
+        }
+        return dashboardRoutes(options);
+      },
+      slackConversationLink(ctx) {
+        if (options.disabled) {
+          return undefined;
+        }
+        return {
+          url: buildDashboardConversationURL({
+            basePath: options.basePath,
+            baseURL: options.baseURL,
+            conversationId: ctx.conversationId,
+          }),
+        };
+      },
+    },
+  });
+}

package/src/nitro.ts

@@ -104,7 +104,12 @@ function dashboardPageRoutes(
   };
 }
 
-/** Mount the authenticated Junior dashboard into a Nitro deployment. */
+/**
+ * Mount the authenticated Junior dashboard into a Nitro deployment.
+ *
+ * @deprecated Register `juniorDashboardPlugin()` in `createApp({ plugins })`;
+ * this helper remains for existing Nitro apps.
+ */
 export function juniorDashboardNitro(options: JuniorDashboardNitroOptions): {
   nitro: { setup(nitro: unknown): void };
 } {

package/src/url.ts

@@ -0,0 +1,68 @@
+export interface DashboardBaseURLConfig {
+  baseURL?: string;
+}
+
+export interface DashboardConversationURLConfig extends DashboardBaseURLConfig {
+  basePath?: string;
+  conversationId: string;
+}
+
+function withHttps(host: string): string {
+  return /^https?:\/\//.test(host) ? host : `https://${host}`;
+}
+
+function stripTrailingSlashes(value: string): string {
+  let end = value.length;
+  while (end > 1 && value.charCodeAt(end - 1) === 47) {
+    end -= 1;
+  }
+  return end === value.length ? value : value.slice(0, end);
+}
+
+/** Normalize dashboard route prefixes so plugin and Nitro paths agree. */
+export function normalizeDashboardPath(
+  path: string | undefined,
+  fallback: string,
+): string {
+  const value = path?.trim() || fallback;
+  const withSlash = value.startsWith("/") ? value : `/${value}`;
+  return stripTrailingSlashes(withSlash);
+}
+
+/** Resolve the dashboard origin used for browser auth and external links. */
+export function resolveDashboardBaseURL(
+  config: DashboardBaseURLConfig = {},
+): string {
+  const explicit =
+    config.baseURL ??
+    process.env.BETTER_AUTH_URL ??
+    process.env.JUNIOR_BASE_URL;
+  if (explicit?.trim()) {
+    return stripTrailingSlashes(withHttps(explicit.trim()));
+  }
+
+  const vercelProd = process.env.VERCEL_PROJECT_PRODUCTION_URL?.trim();
+  if (vercelProd) {
+    return stripTrailingSlashes(withHttps(vercelProd));
+  }
+
+  const vercelUrl = process.env.VERCEL_URL?.trim();
+  if (vercelUrl) {
+    return stripTrailingSlashes(withHttps(vercelUrl));
+  }
+
+  return "http://localhost:3000";
+}
+
+/** Build the dashboard conversation URL shown from outside the browser app. */
+export function buildDashboardConversationURL(
+  config: DashboardConversationURLConfig,
+): string {
+  const baseURL = resolveDashboardBaseURL({ baseURL: config.baseURL });
+  const basePath = normalizeDashboardPath(config.basePath, "/");
+  const path =
+    basePath === "/"
+      ? `/conversations/${encodeURIComponent(config.conversationId)}`
+      : `${basePath}/conversations/${encodeURIComponent(config.conversationId)}`;
+  return `${baseURL}${path}`;
+}