@sentry/junior-dashboard 0.58.0

package/src/client/pages/ConversationPage.tsx

@@ -0,0 +1,145 @@
+import { useParams } from "react-router";
+
+import { useConversationData } from "../api";
+import { StatusBadge } from "../components/StatusBadge";
+import {
+  buildConversations,
+  conversationDisplayTitle,
+  formatConversationDuration,
+  formatRelativeTime,
+  formatTime,
+  slackLocationLabel,
+  turnMessageCount,
+  turnToolCallCount,
+  visualStatusForConversation,
+} from "../format";
+import { Transcript } from "../components/Transcript";
+import { TranscriptLoading } from "../components/TranscriptLoading";
+import type {
+  Conversation,
+  ConversationDetailFeed,
+  DashboardData,
+} from "../types";
+
+/** Render one permalinkable conversation transcript route. */
+export function ConversationPage(props: { data?: DashboardData }) {
+  const routeParams = useParams();
+  const conversationId = routeParams.conversationId
+    ? decodeURIComponent(routeParams.conversationId)
+    : undefined;
+  const sessions = props.data?.sessions.sessions ?? [];
+  const conversations = buildConversations(sessions);
+  const conversation = conversations.find((item) => item.id === conversationId);
+  const detail = useConversationData(conversationId);
+  const visualStatus = conversation
+    ? visualStatusForConversation(conversation)
+    : undefined;
+
+  return (
+    <div className="min-w-0 px-4 py-5 md:px-8">
+      <section className="min-w-0">
+        <header className="mb-6 grid gap-3 border-l-4 border-[#beaaff]/70 pl-4 md:grid-cols-[minmax(0,1fr)_auto]">
+          <div className="min-w-0">
+            <div className="flex min-w-0 flex-wrap items-center gap-2">
+              <h2 className="m-0 text-2xl font-bold leading-tight tracking-normal">
+                {conversationDisplayTitle(conversation)}
+              </h2>
+              <StatusBadge status={visualStatus} />
+            </div>
+            <div className="mt-1 break-words text-[0.88rem] leading-relaxed text-[#b8b8b8]">
+              <ConversationIdentity
+                conversation={conversation}
+                conversationId={conversationId}
+              />
+            </div>
+          </div>
+          <div className="self-start break-words text-[0.82rem] leading-relaxed text-[#b8b8b8] md:text-right">
+            updated{" "}
+            {formatRelativeTime(
+              conversation?.lastSeenAt ?? detail.data?.generatedAt,
+            )}
+          </div>
+          <ConversationStats conversation={conversation} detail={detail.data} />
+        </header>
+
+        {detail.isPending ? (
+          <TranscriptLoading />
+        ) : detail.error ? (
+          <div className="border border-white/10 bg-[#050505] p-4 text-[0.9rem] leading-relaxed text-[#b8b8b8]">
+            {detail.error.message}
+          </div>
+        ) : (
+          <Transcript turns={detail.data?.turns ?? []} />
+        )}
+      </section>
+    </div>
+  );
+}
+
+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}
+      {props.conversation?.sentryConversationUrl ? (
+        <>
+          {" · "}
+          <a
+            className="text-white no-underline hover:underline"
+            href={props.conversation.sentryConversationUrl}
+            rel="noreferrer"
+            target="_blank"
+          >
+            View in Sentry
+          </a>
+        </>
+      ) : null}
+    </>
+  );
+}
+
+function ConversationStats(props: {
+  conversation: Conversation | undefined;
+  detail?: ConversationDetailFeed;
+}) {
+  if (!props.conversation) return null;
+  const messages = props.detail
+    ? props.detail.turns.reduce(
+        (count, turn) => count + turnMessageCount(turn),
+        0,
+      )
+    : undefined;
+  const toolCalls = props.detail
+    ? props.detail.turns.reduce(
+        (count, turn) => count + turnToolCallCount(turn),
+        0,
+      )
+    : undefined;
+  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`,
+    formatConversationDuration(props.conversation),
+    `started ${formatTime(props.conversation.startedAt)}`,
+  ].filter(Boolean);
+
+  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>
+  );
+}

package/src/client/pages/ConversationsPage.tsx

@@ -0,0 +1,59 @@
+import { useSearchParams } from "react-router";
+
+import { ConversationList } from "../components/ConversationList";
+import { FilterTabs } from "../components/FilterTabs";
+import { Section } from "../components/Section";
+import { SectionHeader } from "../components/SectionHeader";
+import { SectionTitle } from "../components/SectionTitle";
+import {
+  buildConversations,
+  filterConversations,
+  formatTime,
+  getFilter,
+} from "../format";
+import type { DashboardData, SessionFilter } from "../types";
+
+/** Render the searchable conversation index from recent turn summaries. */
+export function ConversationsPage(props: { data?: DashboardData }) {
+  const [params, setParams] = useSearchParams();
+  const filter = getFilter(params.get("filter"));
+  const sessions = props.data?.sessions.sessions ?? [];
+  const conversations = buildConversations(sessions);
+  const visibleConversations = filterConversations(conversations, filter);
+  const search = params.toString();
+  const feedMeta =
+    props.data?.sessions.source === "turn_session_records"
+      ? `${conversations.length} conversations / ${sessions.length} turns / ${formatTime(props.data.sessions.generatedAt)}`
+      : "waiting for run history feed";
+
+  function updateFilter(nextFilter: SessionFilter) {
+    const next = new URLSearchParams(params);
+    next.set("filter", nextFilter);
+    setParams(next);
+  }
+
+  return (
+    <div className="min-w-0 px-4 py-4 md:px-8">
+      <section className="min-w-0">
+        <Section>
+          <SectionHeader
+            actions={<FilterTabs current={filter} onChange={updateFilter} />}
+          >
+            <div>
+              <SectionTitle>Conversations</SectionTitle>
+              <div className="mt-1 break-words text-[0.82rem] leading-relaxed text-[#b8b8b8]">
+                {feedMeta}
+              </div>
+            </div>
+          </SectionHeader>
+          <div>
+            <ConversationList
+              conversations={visibleConversations}
+              search={search ? `?${search}` : ""}
+            />
+          </div>
+        </Section>
+      </section>
+    </div>
+  );
+}

package/src/client/styles.ts

@@ -0,0 +1,6 @@
+/** Join component-owned Tailwind classes without pulling in a styling dependency. */
+export function cn(
+  ...classes: Array<string | false | null | undefined>
+): string {
+  return classes.filter(Boolean).join(" ");
+}

package/src/client/types.ts

@@ -0,0 +1,153 @@
+import type { BundledLanguage } from "shiki/bundle/web";
+
+export type Health = { service: string; status: string; timestamp: string };
+
+export type Runtime = {
+  cwd: string;
+  descriptionText?: string;
+  homeDir: string;
+  packagedContent: { packageNames: string[] };
+};
+
+export type Plugin = { name: string };
+
+export type Skill = { name: string; pluginProvider?: string };
+
+export type RequesterIdentity = {
+  email?: string;
+  fullName?: string;
+  slackUserId?: string;
+  slackUserName?: string;
+};
+
+export type TurnUsage = {
+  cachedInputTokens?: number;
+  cacheCreationTokens?: number;
+  inputTokens?: number;
+  outputTokens?: number;
+  totalTokens?: number;
+};
+
+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 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 TranscriptMessage = {
+  parts: TranscriptPart[];
+  role: string;
+  timestamp?: number;
+};
+
+export type ConversationTurn = Session & {
+  transcript: TranscriptMessage[];
+  transcriptAvailable: boolean;
+  transcriptMetadata?: TranscriptMessage[];
+  transcriptMessageCount?: number;
+  transcriptRedacted?: boolean;
+  transcriptRedactionReason?: "non_public_conversation";
+};
+
+export type ConversationDetailFeed = {
+  conversationId: string;
+  generatedAt: string;
+  turns: ConversationTurn[];
+};
+
+export type Conversation = {
+  channel?: string;
+  channelName?: string;
+  conversationTitle?: string;
+  id: string;
+  lastProgressAt?: string;
+  lastSeenAt?: string;
+  requester?: string;
+  requesterIdentity?: RequesterIdentity;
+  sentryConversationUrl?: string;
+  sentryTraceUrl?: string;
+  startedAt?: string;
+  status: Session["status"];
+  surface?: string;
+  title: string;
+  traceId?: string;
+  turns: Session[];
+};
+
+export type SessionFeed = {
+  generatedAt?: string;
+  sessions: Session[];
+  source: string;
+};
+
+export type Identity = { user: { email?: string; hostedDomain?: string } };
+
+export type DashboardConfig = {
+  allowedEmailCount: number;
+  allowedGoogleDomainCount: number;
+  authRequired: boolean;
+  authPath: string;
+  basePath: string;
+  sentryConversationLinks: boolean;
+  timeZone: string;
+};
+
+export type DashboardData = {
+  config: DashboardConfig;
+  health: Health;
+  me: Identity;
+  plugins: Plugin[];
+  runtime: Runtime;
+  sessions: SessionFeed;
+  skills: Skill[];
+};
+
+export type SessionFilter = "active" | "recent" | "hung" | "failed" | "all";
+
+export type VisualStatus = "active" | "failed" | "hung" | "idle";
+
+export type CodeBlock = { code: string; language: BundledLanguage };
+
+export type MarkupNode =
+  | {
+      type: "element";
+      attributes: Array<[string, string]>;
+      children: MarkupNode[];
+      tagName: string;
+    }
+  | { type: "text"; text: string };

package/src/client.tsx

@@ -0,0 +1,79 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router";
+
+import { DashboardShell } from "./client/App";
+import { client } from "./client/api";
+
+declare global {
+  interface Window {
+    __JUNIOR_DASHBOARD_BASE_PATH__?: string;
+    __JUNIOR_DASHBOARD_SHOW_ERROR__?: (error: unknown) => void;
+  }
+}
+
+type ErrorBoundaryState = {
+  error: Error | null;
+};
+
+class DashboardErrorBoundary extends Component<
+  { children: ReactNode },
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    const stack = error.stack ?? errorInfo.componentStack;
+    window.__JUNIOR_DASHBOARD_SHOW_ERROR__?.(stack ? new Error(stack) : error);
+  }
+
+  render() {
+    if (this.state.error) {
+      return <DashboardErrorPanel error={this.state.error} />;
+    }
+
+    return this.props.children;
+  }
+}
+
+function DashboardErrorPanel(props: { error: Error }) {
+  return (
+    <main className="grid min-h-screen place-items-center bg-black p-8 text-white">
+      <section className="w-full max-w-5xl border border-rose-400/50 bg-[#0b0b0b] p-5 font-sans">
+        <div className="font-mono text-xs uppercase leading-none text-[#888]">
+          Dashboard Error
+        </div>
+        <h1 className="mt-2 text-3xl font-bold leading-tight tracking-normal">
+          Junior failed to render
+        </h1>
+        <p className="my-4 max-w-3xl text-[#b8b8b8]">
+          The dashboard hit a client-side exception. The stack trace is shown
+          here so the page does not fail blank.
+        </p>
+        <pre className="max-h-[60vh] overflow-auto whitespace-pre-wrap break-words border border-white/10 bg-black p-4 font-mono text-sm leading-relaxed text-white">
+          {props.error.stack ?? props.error.message}
+        </pre>
+      </section>
+    </main>
+  );
+}
+
+const root = document.getElementById("dashboard-root");
+if (!root) {
+  throw new Error("Junior dashboard root element was not found");
+}
+
+createRoot(root).render(
+  <DashboardErrorBoundary>
+    <QueryClientProvider client={client}>
+      <BrowserRouter basename={window.__JUNIOR_DASHBOARD_BASE_PATH__ ?? "/"}>
+        <DashboardShell />
+      </BrowserRouter>
+    </QueryClientProvider>
+  </DashboardErrorBoundary>,
+);

package/src/config.ts

@@ -0,0 +1,72 @@
+import type { JuniorDashboardOptions } from "./app";
+
+export type JuniorDashboardRuntimeConfig = Omit<
+  JuniorDashboardOptions,
+  "auth" | "reporting"
+>;
+
+/** Read dashboard runtime config injected by the Nitro module. */
+export async function resolveDashboardConfig(): Promise<JuniorDashboardRuntimeConfig> {
+  try {
+    const mod: { dashboard?: JuniorDashboardRuntimeConfig } =
+      await import("#junior-dashboard/config");
+    return mod.dashboard ?? readEnvConfig();
+  } catch (error) {
+    if (!isMissingVirtualConfig(error)) {
+      throw error;
+    }
+    return readEnvConfig();
+  }
+}
+
+function readEnvConfig(): JuniorDashboardRuntimeConfig {
+  return {
+    authRequired: process.env.JUNIOR_DASHBOARD_AUTH_REQUIRED !== "false",
+    allowedGoogleDomains: readListEnv("JUNIOR_DASHBOARD_GOOGLE_DOMAINS"),
+    allowedEmails: readListEnv("JUNIOR_DASHBOARD_ALLOWED_EMAILS"),
+    trustedOrigins: readListEnv("JUNIOR_DASHBOARD_TRUSTED_ORIGINS"),
+  };
+}
+
+function readListEnv(name: string): string[] {
+  const value = process.env[name];
+  if (!value?.trim()) {
+    return [];
+  }
+
+  if (value.trim().startsWith("[")) {
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(value);
+    } catch (error) {
+      throw new Error(`${name} must be a JSON string array`, {
+        cause: error,
+      });
+    }
+    if (
+      !Array.isArray(parsed) ||
+      parsed.some((item) => typeof item !== "string")
+    ) {
+      throw new Error(`${name} must be a JSON string array`);
+    }
+    return parsed;
+  }
+
+  return value
+    .split(",")
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function isMissingVirtualConfig(error: unknown): boolean {
+  if (!(error instanceof Error)) {
+    return false;
+  }
+  const code = (error as { code?: string }).code;
+  return (
+    (code === "ERR_PACKAGE_IMPORT_NOT_DEFINED" ||
+      code === "ERR_MODULE_NOT_FOUND" ||
+      code === "MODULE_NOT_FOUND") &&
+    error.message.includes("#junior-dashboard/config")
+  );
+}

package/src/handler.ts

@@ -0,0 +1,26 @@
+import { defineHandler } from "nitro";
+import { createDashboardApp } from "./app";
+import { resolveDashboardConfig } from "./config";
+
+let app: ReturnType<typeof createDashboardApp> | undefined;
+let appPromise: Promise<ReturnType<typeof createDashboardApp>> | undefined;
+
+async function resolveApp(): Promise<ReturnType<typeof createDashboardApp>> {
+  appPromise ??= resolveDashboardConfig()
+    .then((config) => {
+      app = createDashboardApp(config);
+      return app;
+    })
+    .catch((error: unknown) => {
+      appPromise = undefined;
+      throw error;
+    });
+  return app ?? appPromise;
+}
+
+const handler: unknown = defineHandler(async (event) => {
+  const dashboardApp = await resolveApp();
+  return dashboardApp.fetch(event.req);
+});
+
+export default handler;

package/src/nitro.ts

@@ -0,0 +1,110 @@
+import type { Nitro } from "nitro/types";
+
+export interface JuniorDashboardNitroOptions {
+  basePath?: string;
+  authPath?: string;
+  authRequired?: boolean;
+  allowedGoogleDomains?: string[];
+  allowedEmails?: string[];
+  trustedOrigins?: string[];
+  sessionMaxAgeSeconds?: number;
+  disabled?: boolean;
+}
+
+type NitroRouteConfig = NonNullable<Nitro["options"]["routes"]>;
+
+function normalizePath(path: string | undefined, fallback: string): string {
+  const value = path?.trim() || fallback;
+  const withSlash = value.startsWith("/") ? value : `/${value}`;
+  return stripTrailingSlashes(withSlash);
+}
+
+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);
+}
+
+function routeEntry(handler: string): { handler: string } {
+  return { handler };
+}
+
+function virtualHandler(config: Record<string, unknown>): string {
+  return `import { defineHandler } from "nitro";
+import { createDashboardApp } from "@sentry/junior-dashboard";
+
+let app;
+
+export default defineHandler(async (event) => {
+  app ??= createDashboardApp(${JSON.stringify(config)});
+  return app.fetch(event.req);
+});
+`;
+}
+
+function dashboardPageRoutes(
+  basePath: string,
+  handler: string,
+): NitroRouteConfig {
+  const sessionsPath = basePath === "/" ? "/sessions" : `${basePath}/sessions`;
+  const conversationsPath =
+    basePath === "/" ? "/conversations" : `${basePath}/conversations`;
+
+  if (basePath === "/") {
+    return {
+      "/": routeEntry(handler),
+      [conversationsPath]: routeEntry(handler),
+      [`${conversationsPath}/**`]: routeEntry(handler),
+      [sessionsPath]: routeEntry(handler),
+      [`${sessionsPath}/**`]: routeEntry(handler),
+    };
+  }
+
+  return {
+    [basePath]: routeEntry(handler),
+    [`${basePath}/**`]: routeEntry(handler),
+  };
+}
+
+/** Mount the authenticated Junior dashboard into a Nitro deployment. */
+export function juniorDashboardNitro(options: JuniorDashboardNitroOptions): {
+  nitro: { setup(nitro: unknown): void };
+} {
+  return {
+    nitro: {
+      setup(nitro: Nitro) {
+        if (options.disabled) {
+          return;
+        }
+
+        const basePath = normalizePath(options.basePath, "/");
+        const authPath = normalizePath(options.authPath, "/api/auth");
+        const handler = "#junior-dashboard/handler";
+        const dashboardConfig = {
+          ...options,
+          basePath,
+          authPath,
+          disabled: undefined,
+        };
+
+        nitro.options.virtual[handler] = virtualHandler(dashboardConfig);
+        nitro.options.virtual["#junior-dashboard/config"] =
+          `export const dashboard = ${JSON.stringify(dashboardConfig)};`;
+
+        const dashboardRoutes: NitroRouteConfig = {
+          ...dashboardPageRoutes(basePath, handler),
+          "/api/dashboard/**": routeEntry(handler),
+          [authPath]: routeEntry(handler),
+          [`${authPath}/**`]: routeEntry(handler),
+        };
+
+        nitro.options.routes = {
+          ...dashboardRoutes,
+          ...(nitro.options.routes ?? {}),
+        };
+      },
+    },
+  };
+}

package/src/tailwind.css

@@ -0,0 +1,13 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans:
+    -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
+  --font-mono:
+    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", monospace;
+}
+
+@source "./app.ts";
+@source "./client.tsx";
+@source "./client/**/*.{ts,tsx}";

package/src/virtual-modules.d.ts

@@ -0,0 +1,5 @@
+declare module "#junior-dashboard/config" {
+  import type { JuniorDashboardRuntimeConfig } from "./config";
+
+  export const dashboard: JuniorDashboardRuntimeConfig;
+}