@sentry/junior-dashboard 0.58.0

package/src/auth.ts

@@ -0,0 +1,202 @@
+import { betterAuth } from "better-auth";
+
+const DEFAULT_SESSION_MAX_AGE_SECONDS = 60 * 60 * 8;
+
+export interface DashboardUser {
+  email?: string | null;
+  emailVerified?: boolean;
+  hostedDomain?: string | null;
+  name?: string | null;
+}
+
+export interface DashboardSession {
+  user: DashboardUser;
+}
+
+export interface DashboardAuthConfig {
+  baseURL?: string;
+  authPath: string;
+  trustedOrigins: string[];
+  secret?: string;
+  googleClientId?: string;
+  googleClientSecret?: string;
+  googleHostedDomain?: string;
+  sessionMaxAgeSeconds?: number;
+}
+
+export interface DashboardAuth {
+  handler(request: Request): Promise<Response>;
+  getSession(request: Request): Promise<DashboardSession | null>;
+  signInWithGoogle(request: Request, callbackURL: string): Promise<Response>;
+}
+
+/** Keep dashboard identity responses limited to user display fields. */
+export function sanitizeDashboardSession(
+  session: DashboardSession,
+): DashboardSession {
+  const { email, emailVerified, hostedDomain, name } = session.user;
+  return {
+    user: {
+      email,
+      emailVerified,
+      hostedDomain,
+      name,
+    },
+  };
+}
+
+function required(value: string | undefined, name: string): string {
+  if (!value?.trim()) {
+    throw new Error(`${name} is required for Junior dashboard auth`);
+  }
+  return value.trim();
+}
+
+function firstHostedDomain(domains: string[]): string | undefined {
+  return domains.length === 1 ? domains[0] : undefined;
+}
+
+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);
+}
+
+function resolveBaseURL(config: DashboardAuthConfig): 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";
+}
+
+/** Create the Better Auth bridge used by dashboard browser routes. */
+export function createDashboardAuth(
+  config: DashboardAuthConfig,
+): DashboardAuth {
+  const secret = required(
+    config.secret ??
+      process.env.BETTER_AUTH_SECRET ??
+      process.env.JUNIOR_SECRET,
+    "JUNIOR_SECRET or BETTER_AUTH_SECRET",
+  );
+  const baseURL = resolveBaseURL(config);
+  const googleClientId = required(
+    config.googleClientId ?? process.env.GOOGLE_CLIENT_ID,
+    "GOOGLE_CLIENT_ID",
+  );
+  const googleClientSecret = required(
+    config.googleClientSecret ?? process.env.GOOGLE_CLIENT_SECRET,
+    "GOOGLE_CLIENT_SECRET",
+  );
+
+  const auth = betterAuth({
+    appName: "Junior Dashboard",
+    baseURL,
+    basePath: config.authPath,
+    secret,
+    trustedOrigins: config.trustedOrigins,
+    socialProviders: {
+      google: {
+        clientId: googleClientId,
+        clientSecret: googleClientSecret,
+        hd: config.googleHostedDomain,
+        prompt: "select_account",
+        mapProfileToUser(profile) {
+          return {
+            email: profile.email,
+            emailVerified: profile.email_verified,
+            hostedDomain: profile.hd,
+            image: profile.picture,
+            name: profile.name,
+          };
+        },
+      },
+    },
+    user: {
+      additionalFields: {
+        hostedDomain: {
+          type: "string",
+          required: false,
+          input: false,
+          returned: true,
+        },
+      },
+    },
+    account: {
+      storeStateStrategy: "cookie",
+      storeAccountCookie: false,
+      updateAccountOnSignIn: false,
+    },
+    session: {
+      expiresIn: config.sessionMaxAgeSeconds ?? DEFAULT_SESSION_MAX_AGE_SECONDS,
+      disableSessionRefresh: true,
+      cookieCache: {
+        enabled: true,
+        strategy: "jwe",
+        maxAge: config.sessionMaxAgeSeconds ?? DEFAULT_SESSION_MAX_AGE_SECONDS,
+        refreshCache: false,
+      },
+    },
+  });
+
+  return {
+    handler(request) {
+      return auth.handler(request);
+    },
+    async getSession(request) {
+      const session = await auth.api.getSession({ headers: request.headers });
+      if (!session) {
+        return null;
+      }
+      return sanitizeDashboardSession(session as DashboardSession);
+    },
+    async signInWithGoogle(request, callbackURL) {
+      const result = await auth.api.signInSocial({
+        body: {
+          provider: "google",
+          callbackURL,
+        },
+        headers: request.headers,
+        returnHeaders: true,
+      });
+
+      if (!("url" in result.response) || !result.response.url) {
+        throw new Error("Google sign-in did not return a redirect URL");
+      }
+
+      result.headers.set("location", result.response.url);
+      return new Response(null, {
+        status: 302,
+        headers: result.headers,
+      });
+    },
+  };
+}
+
+/** Resolve a Google hosted-domain login hint when it is unambiguous. */
+export function resolveGoogleHostedDomainHint(
+  domains: string[],
+): string | undefined {
+  return firstHostedDomain(domains.map((domain) => domain.toLowerCase()));
+}

package/src/client/App.tsx

@@ -0,0 +1,175 @@
+import {
+  Link,
+  Navigate,
+  NavLink,
+  Route,
+  Routes,
+  useParams,
+} from "react-router";
+
+import { useDashboardData } from "./api";
+import { LoadingView } from "./components/LoadingView";
+import {
+  conversationPath,
+  setDashboardTimeZone,
+  visualStatusForSession,
+} from "./format";
+import { CommandCenter } from "./pages/CommandCenter";
+import { ConversationPage } from "./pages/ConversationPage";
+import { ConversationsPage } from "./pages/ConversationsPage";
+import { cn } from "./styles";
+
+/** Render the dashboard SPA shell and route-level loading states. */
+export function DashboardShell() {
+  const query = useDashboardData();
+  const data = query.data;
+  if (data) {
+    setDashboardTimeZone(data.config.timeZone);
+  }
+  const loading = !data && !query.error;
+  const loggedIn = Boolean(data?.config.authRequired && data.me.user.email);
+  const activeTurnCount =
+    data?.sessions.sessions.filter(
+      (session) => visualStatusForSession(session) === "active",
+    ).length ?? 0;
+  const headerSummary = query.error
+    ? query.error.message
+    : data
+      ? `${data.plugins.length} plugins / ${data.skills.length} skills / ${activeTurnCount} active`
+      : "loading command center";
+
+  async function signOut() {
+    await fetch(`${data?.config.authPath ?? "/api/auth"}/sign-out`, {
+      credentials: "same-origin",
+      method: "POST",
+    });
+    window.location.assign(data?.config.basePath ?? "/");
+  }
+
+  const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+    cn(
+      "whitespace-nowrap border-b-4 px-0.5 pb-1.5 pt-2 text-[0.9rem] font-semibold leading-tight no-underline transition-colors",
+      isActive
+        ? "border-b-[#beaaff] text-white"
+        : "border-b-transparent text-[#b8b8b8] hover:border-b-white/45 hover:text-white",
+    );
+
+  return (
+    <main className="grid min-h-screen grid-rows-[auto_1fr] bg-black font-sans text-white">
+      <header className="sticky top-0 z-10 grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-b border-white/10 bg-[#050505]/95 px-4 py-3 backdrop-blur md:px-8 max-md:grid-cols-1">
+        <Link
+          className="flex min-w-0 max-w-full justify-self-start text-inherit no-underline"
+          to="/"
+        >
+          <div className="min-w-0">
+            <h1 className="m-0 text-2xl font-bold leading-none tracking-normal">
+              Junior
+            </h1>
+            <div className="mt-1 truncate text-[0.82rem] leading-tight text-[#888]">
+              {headerSummary}
+            </div>
+          </div>
+        </Link>
+        <div className="flex min-w-0 items-center gap-2 max-md:flex-wrap max-md:justify-between">
+          <nav className="flex min-w-0 items-center gap-5">
+            <NavLink className={navLinkClass} end to="/">
+              Command
+            </NavLink>
+            <NavLink className={navLinkClass} to="/conversations">
+              Conversations
+            </NavLink>
+          </nav>
+          {loggedIn ? (
+            <button
+              aria-label="Log out"
+              className="grid size-9 cursor-pointer place-items-center border border-white/15 bg-[#0b0b0b] p-0 text-[#b8b8b8] transition-colors hover:border-white/30 hover:bg-[#151515] hover:text-white"
+              type="button"
+              title="Log out"
+              onClick={() => void signOut()}
+            >
+              <svg
+                aria-hidden="true"
+                fill="none"
+                height="16"
+                viewBox="0 0 24 24"
+                width="16"
+              >
+                <path
+                  d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                />
+                <path
+                  d="m16 17 5-5-5-5"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                />
+                <path
+                  d="M21 12H9"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                />
+              </svg>
+            </button>
+          ) : null}
+        </div>
+      </header>
+
+      <Routes>
+        <Route
+          element={
+            loading ? (
+              <LoadingView label="Loading command center" />
+            ) : (
+              <CommandCenter data={data} queryError={query.error} />
+            )
+          }
+          path="/"
+        />
+        <Route
+          element={
+            loading ? (
+              <LoadingView label="Loading conversations" />
+            ) : (
+              <ConversationsPage data={data} />
+            )
+          }
+          path="/conversations"
+        />
+        <Route
+          element={
+            loading ? (
+              <LoadingView label="Loading conversation" />
+            ) : (
+              <ConversationPage data={data} />
+            )
+          }
+          path="/conversations/:conversationId"
+        />
+        <Route
+          element={<Navigate replace to="/conversations" />}
+          path="/sessions"
+        />
+        <Route
+          element={<LegacyConversationRedirect />}
+          path="/sessions/:conversationId"
+        />
+        <Route element={<Navigate replace to="/" />} path="*" />
+      </Routes>
+    </main>
+  );
+}
+
+function LegacyConversationRedirect() {
+  const routeParams = useParams();
+  const conversationId = routeParams.conversationId
+    ? decodeURIComponent(routeParams.conversationId)
+    : "";
+  return <Navigate replace to={conversationPath(conversationId)} />;
+}

package/src/client/api.ts

@@ -0,0 +1,99 @@
+import { QueryClient, useQuery } from "@tanstack/react-query";
+
+import type {
+  ConversationDetailFeed,
+  DashboardConfig,
+  DashboardData,
+  Health,
+  Identity,
+  Plugin,
+  Runtime,
+  SessionFeed,
+  Skill,
+} from "./types";
+
+/** Share dashboard query cache between route data and tooltip detail lookups. */
+export const client = new QueryClient();
+
+class DashboardApiError extends Error {
+  readonly status: number;
+
+  constructor(path: string, status: number) {
+    super(`${path} returned ${status}`);
+    this.status = status;
+  }
+}
+
+function restartDashboardSignIn(): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const loginPath = "/api/dashboard/login";
+  if (window.location.pathname !== loginPath) {
+    window.location.assign(loginPath);
+  }
+}
+
+async function read<T>(path: string): Promise<T> {
+  const response = await fetch(path, { credentials: "same-origin" });
+  if (response.status === 401) {
+    restartDashboardSignIn();
+    throw new DashboardApiError(path, response.status);
+  }
+  if (!response.ok) throw new DashboardApiError(path, response.status);
+  return (await response.json()) as T;
+}
+
+/** Poll the dashboard summary feed used by command center and conversation lists. */
+export function useDashboardData() {
+  return useQuery({
+    queryKey: ["dashboard"],
+    queryFn: async (): Promise<DashboardData> => {
+      const [health, runtime, plugins, skills, sessions, me, config] =
+        await Promise.all([
+          read<Health>("/api/dashboard/health"),
+          read<Runtime>("/api/dashboard/runtime"),
+          read<Plugin[]>("/api/dashboard/plugins"),
+          read<Skill[]>("/api/dashboard/skills"),
+          read<SessionFeed>("/api/dashboard/sessions"),
+          read<Identity>("/api/dashboard/me"),
+          read<DashboardConfig>("/api/dashboard/config"),
+        ]);
+      return {
+        config,
+        health,
+        runtime,
+        plugins,
+        skills,
+        sessions,
+        me,
+      };
+    },
+    refetchInterval: 5_000,
+    refetchIntervalInBackground: false,
+    retry: false,
+  });
+}
+
+/** Poll one conversation transcript while preserving route-level disabled state. */
+export function useConversationData(conversationId: string | undefined) {
+  return useQuery({
+    enabled: Boolean(conversationId),
+    queryKey: ["conversation", conversationId],
+    queryFn: async (): Promise<ConversationDetailFeed> =>
+      readConversationData(conversationId!),
+    refetchInterval: 5_000,
+    refetchIntervalInBackground: false,
+    retry: false,
+  });
+}
+
+/** Read one conversation transcript payload for dashboard-local detail views. */
+export function readConversationData(
+  conversationId: string,
+): Promise<ConversationDetailFeed> {
+  return read<ConversationDetailFeed>(
+    `/api/dashboard/conversations/${encodeURIComponent(conversationId)}`,
+  );
+}

package/src/client/code.tsx

@@ -0,0 +1,139 @@
+import { useQuery } from "@tanstack/react-query";
+import { codeToHtml, type BundledLanguage } from "shiki/bundle/web";
+
+import { canRenderStructuredMarkup, parseMarkupNodes } from "./format";
+import type { CodeBlock, MarkupNode } from "./types";
+
+/** Count rendered children so transcripts can decide which markup node expands. */
+export function countStructuredBlockChildren(block: CodeBlock): number {
+  if (!canRenderStructuredMarkup(block.language)) return 1;
+  const rootCount = parseMarkupNodes(block.code, block.language).length;
+  return rootCount > 0 ? rootCount : 1;
+}
+
+/** Render structured markup blocks as collapsible nodes instead of flat code. */
+export function StructuredMarkup(props: {
+  block: CodeBlock;
+  firstChildIndex: number;
+  lastChildIndex: number;
+}) {
+  const nodes = parseMarkupNodes(props.block.code, props.block.language);
+  if (nodes.length === 0) {
+    return (
+      <HighlightedCode
+        code={props.block.code}
+        language={props.block.language}
+      />
+    );
+  }
+
+  return (
+    <>
+      {nodes.map((node, index) => (
+        <div
+          className="grid min-w-0 gap-0 py-0.5 pl-4 font-mono text-[0.86rem] leading-relaxed text-[#b8b8b8]"
+          key={index}
+        >
+          <MarkupNodeView
+            defaultOpen={props.firstChildIndex + index === props.lastChildIndex}
+            node={node}
+          />
+        </div>
+      ))}
+    </>
+  );
+}
+
+function MarkupNodeView(props: { defaultOpen?: boolean; node: MarkupNode }) {
+  if (props.node.type === "text") {
+    return (
+      <div className="min-w-0 whitespace-pre-wrap break-words text-white">
+        {props.node.text.trim()}
+      </div>
+    );
+  }
+
+  const children = props.node.children;
+  const hasChildren = children.length > 0;
+  const attributes = props.node.attributes.map(([name, value]) => (
+    <span className="ml-1.5 text-[#b8b8b8]" key={name}>
+      {name}=<span className="text-white">"{value}"</span>
+    </span>
+  ));
+
+  if (!hasChildren) {
+    return (
+      <div className="-ml-1 flex min-w-0 flex-wrap items-baseline px-1 py-0.5">
+        <span className="text-[#888]">&lt;</span>
+        <span className="font-bold text-white">{props.node.tagName}</span>
+        {attributes}
+        <span className="text-[#888]"> /&gt;</span>
+      </div>
+    );
+  }
+
+  return (
+    <details
+      className="group min-w-0 break-words"
+      open={props.defaultOpen ?? true}
+    >
+      <summary className="-ml-1 flex w-full max-w-full cursor-pointer list-none flex-wrap items-baseline px-1 py-0.5 transition-colors hover:bg-white/[0.05] hover:text-white [&::-webkit-details-marker]:hidden">
+        <span className="mr-1 w-2 text-white group-open:hidden">+</span>
+        <span className="mr-1 hidden w-2 text-white group-open:inline">-</span>
+        <span className="text-[#888]">&lt;</span>
+        <span className="font-bold text-white">{props.node.tagName}</span>
+        {attributes}
+        <span className="text-[#888]">&gt;</span>
+      </summary>
+      <div className="ml-1 grid gap-0 border-l border-white/10 pl-3">
+        {children.map((child, index) => (
+          <MarkupNodeView
+            defaultOpen={index === children.length - 1}
+            key={index}
+            node={child}
+          />
+        ))}
+      </div>
+      <div
+        className="-ml-1 flex min-w-0 flex-wrap items-baseline px-1 py-0.5 transition-colors hover:bg-white/[0.05]"
+        role="button"
+        tabIndex={0}
+      >
+        <span className="text-[#888]">&lt;/</span>
+        <span className="font-bold text-white">{props.node.tagName}</span>
+        <span className="text-[#888]">&gt;</span>
+      </div>
+    </details>
+  );
+}
+
+/** Render highlighted code while keeping Shiki output responsive in transcripts. */
+export function HighlightedCode(props: {
+  code: string;
+  language: BundledLanguage;
+}) {
+  const highlighted = useQuery({
+    queryKey: ["highlight", props.language, props.code],
+    queryFn: async () =>
+      codeToHtml(props.code, {
+        lang: props.language,
+        theme: "github-dark",
+      }),
+    staleTime: Infinity,
+  });
+
+  if (!highlighted.data) {
+    return (
+      <pre className="m-0 min-w-0 whitespace-pre-wrap break-words bg-transparent p-0 font-mono text-[0.86rem] leading-relaxed text-white">
+        <code>{props.code}</code>
+      </pre>
+    );
+  }
+
+  return (
+    <div
+      className="min-w-0 overflow-visible [&_code]:whitespace-pre-wrap [&_code]:break-words [&_pre]:!m-0 [&_pre]:!overflow-visible [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:font-mono [&_pre]:text-[0.86rem] [&_pre]:leading-relaxed"
+      dangerouslySetInnerHTML={{ __html: highlighted.data }}
+    />
+  );
+}

package/src/client/components/CommandRail.tsx

@@ -0,0 +1,74 @@
+import { formatTime, isFailedSession, visualStatusForSession } from "../format";
+import type { DashboardData } from "../types";
+import { Section } from "./Section";
+import { SectionHeader } from "./SectionHeader";
+import { SectionTitle } from "./SectionTitle";
+import { StatusBadge } from "./StatusBadge";
+
+/** Render the command-center summary rail from the dashboard health payload. */
+export function CommandRail(props: {
+  data?: DashboardData;
+  error: Error | null;
+}) {
+  const sessions = props.data?.sessions.sessions ?? [];
+  const activeSessions = sessions.filter(
+    (session) => visualStatusForSession(session) === "active",
+  );
+  const hungSessions = sessions.filter(
+    (session) => visualStatusForSession(session) === "hung",
+  );
+  const failedSessions = sessions.filter(isFailedSession);
+
+  return (
+    <aside className="min-w-0">
+      <Section>
+        <SectionHeader
+          actions={
+            <StatusBadge
+              label={
+                props.error ? "degraded" : props.data ? "online" : "checking"
+              }
+              status={props.error ? "failed" : props.data ? "active" : "idle"}
+            />
+          }
+        >
+          <SectionTitle>Pulse</SectionTitle>
+        </SectionHeader>
+        <div className="px-4 py-4">
+          <div className="text-5xl font-black leading-none text-white md:text-6xl">
+            {props.error
+              ? "ERR"
+              : (props.data?.health.status.toUpperCase() ?? "...")}
+          </div>
+          <div className="mt-3 break-words text-[0.88rem] leading-relaxed text-[#b8b8b8]">
+            {props.error
+              ? props.error.message
+              : props.data
+                ? `${props.data.health.service} / ${formatTime(props.data.health.timestamp)}`
+                : "Waiting for Junior telemetry."}
+          </div>
+        </div>
+        <div className="flex flex-wrap border-t border-white/10">
+          <Stat label="plugins" value={props.data?.plugins.length ?? 0} />
+          <Stat label="skills" value={props.data?.skills.length ?? 0} />
+          <Stat label="active" value={activeSessions.length} />
+          <Stat label="hung" value={hungSessions.length} />
+          <Stat label="failed" value={failedSessions.length} />
+        </div>
+      </Section>
+    </aside>
+  );
+}
+
+function Stat(props: { label: string; value: number }) {
+  return (
+    <div className="min-w-0 flex-1 basis-1/2 border-r border-t border-white/10 bg-[#050505] px-3 py-3 first:border-t-0 sm:basis-1/3">
+      <div className="text-2xl font-extrabold leading-none text-white">
+        {props.value}
+      </div>
+      <div className="mt-1 text-[0.78rem] font-semibold uppercase leading-tight text-[#888]">
+        {props.label}
+      </div>
+    </div>
+  );
+}