@sentry/junior-dashboard 0.58.0

package/src/client/components/ConversationList.tsx

@@ -0,0 +1,94 @@
+import { useNavigate } from "react-router";
+
+import {
+  conversationPath,
+  formatTime,
+  visualStatusForConversation,
+} from "../format";
+import { cn } from "../styles";
+import type { Conversation, VisualStatus } from "../types";
+import { ConversationRowStats } from "./ConversationRowStats";
+import { ConversationSummary } from "./ConversationSummary";
+import { EmptyTelemetry } from "./EmptyTelemetry";
+import { statusBorderClass } from "./statusStyles";
+
+/** Render the full conversation table used by the conversations page. */
+export function ConversationList(props: {
+  conversations: Conversation[];
+  selectedId?: string;
+  search?: string;
+}) {
+  if (props.conversations.length === 0) {
+    return (
+      <div className="grid gap-2 p-3">
+        <EmptyTelemetry>No matching conversation telemetry.</EmptyTelemetry>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-w-0" role="table">
+      <div
+        className="sticky top-0 z-[1] grid grid-cols-[minmax(13rem,1.7fr)_minmax(13rem,1fr)] items-center gap-3 border-b border-white/10 bg-[#050505] px-3 py-2 text-[0.76rem] font-semibold uppercase leading-none text-[#888] max-md:hidden"
+        role="row"
+      >
+        <div>Conversation</div>
+        <div className="justify-self-end">Stats</div>
+      </div>
+      {props.conversations.map((conversation) => (
+        <ConversationTableRow
+          conversation={conversation}
+          key={conversation.id}
+          search={props.search}
+          selected={props.selectedId === conversation.id}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ConversationTableRow(props: {
+  conversation: Conversation;
+  search?: string;
+  selected?: boolean;
+}) {
+  const visualStatus = visualStatusForConversation(props.conversation);
+  const navigate = useNavigate();
+  const href = {
+    pathname: conversationPath(props.conversation.id),
+    search: props.search ?? "",
+  };
+  const openConversation = () => navigate(href);
+  return (
+    <div
+      className={conversationRecordClass(visualStatus, props.selected)}
+      onClick={openConversation}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          openConversation();
+        }
+      }}
+      role="link"
+      tabIndex={0}
+    >
+      <ConversationSummary conversation={props.conversation} />
+      <ConversationRowStats
+        conversation={props.conversation}
+        timeLabel={formatTime(props.conversation.lastSeenAt)}
+      />
+    </div>
+  );
+}
+
+function conversationRecordClass(
+  status: VisualStatus,
+  selected: boolean | undefined,
+): string {
+  return cn(
+    "group grid min-w-0 cursor-pointer grid-cols-[minmax(13rem,1.7fr)_minmax(13rem,1fr)] items-center gap-3 overflow-hidden border-b border-l-4 border-b-white/10 bg-[#0b0b0b] px-3 py-3 text-left text-inherit no-underline transition-colors hover:bg-[#151515] max-md:grid-cols-1 max-md:px-4 max-md:py-4",
+    statusBorderClass(status),
+    status === "idle" && "saturate-50",
+    selected && "border-l-white bg-[#111]",
+  );
+}

package/src/client/components/ConversationRowStats.tsx

@@ -0,0 +1,21 @@
+import { slackLocationLabel } from "../format";
+import type { Conversation } from "../types";
+
+/** Render compact conversation metadata aligned to row context. */
+export function ConversationRowStats(props: {
+  conversation: Conversation;
+  timeLabel: string;
+}) {
+  return (
+    <div className="grid min-w-0 justify-items-end gap-1 text-right max-md:justify-items-start max-md:text-left">
+      <div className="text-[0.84rem] leading-relaxed text-[#b8b8b8]">
+        {props.conversation.turns.length} turns · {props.timeLabel}
+      </div>
+      {props.conversation.channel ? (
+        <div className="max-w-full break-words text-[0.84rem] leading-relaxed text-[#888] md:truncate">
+          {slackLocationLabel(props.conversation, { includeId: false })}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/client/components/ConversationStack.tsx

@@ -0,0 +1,67 @@
+import { useNavigate } from "react-router";
+
+import {
+  conversationPath,
+  formatRelativeTime,
+  visualStatusForConversation,
+} from "../format";
+import { cn } from "../styles";
+import type { Conversation, VisualStatus } from "../types";
+import { ConversationRowStats } from "./ConversationRowStats";
+import { ConversationSummary } from "./ConversationSummary";
+import { EmptyTelemetry } from "./EmptyTelemetry";
+
+/** Render the compact latest-conversation stack on the command center. */
+export function ConversationStack(props: { conversations: Conversation[] }) {
+  if (props.conversations.length === 0) {
+    return <EmptyTelemetry>No conversation telemetry yet.</EmptyTelemetry>;
+  }
+
+  return (
+    <div className="grid">
+      {props.conversations.map((conversation) => (
+        <ConversationStackRow
+          conversation={conversation}
+          key={conversation.id}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ConversationStackRow(props: { conversation: Conversation }) {
+  const visualStatus = visualStatusForConversation(props.conversation);
+  const navigate = useNavigate();
+  const href = conversationPath(props.conversation.id);
+  return (
+    <div
+      className={conversationStackRowClass(visualStatus)}
+      onClick={() => navigate(href)}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          navigate(href);
+        }
+      }}
+      role="link"
+      tabIndex={0}
+    >
+      <ConversationSummary conversation={props.conversation} />
+      <ConversationRowStats
+        conversation={props.conversation}
+        timeLabel={formatRelativeTime(props.conversation.lastSeenAt)}
+      />
+    </div>
+  );
+}
+
+function conversationStackRowClass(status: VisualStatus): string {
+  return cn(
+    "group relative grid min-h-16 cursor-pointer grid-cols-[minmax(0,1fr)_minmax(12rem,max-content)] items-center gap-3 overflow-hidden border-b border-l-4 border-b-white/10 bg-[#050505] px-4 py-3 text-inherit no-underline transition-colors last:border-b-0 hover:bg-[rgba(190,170,255,0.07)] max-md:grid-cols-1",
+    status === "active" && "border-l-emerald-400",
+    status === "hung" && "border-l-amber-400",
+    status === "failed" && "border-l-rose-400",
+    status === "idle" && "border-l-[#beaaff]/60",
+    status === "idle" && "saturate-50",
+  );
+}

package/src/client/components/ConversationSummary.tsx

@@ -0,0 +1,40 @@
+import {
+  conversationDisplayTitle,
+  conversationIdentityMeta,
+  visualStatusForConversation,
+} from "../format";
+import type { Conversation } from "../types";
+import { StatusBadge } from "./StatusBadge";
+
+/** Render the shared conversation title, identity, status, and Sentry link. */
+export function ConversationSummary(props: { conversation: Conversation }) {
+  const visualStatus = visualStatusForConversation(props.conversation);
+
+  return (
+    <div className="min-w-0">
+      <div className="flex min-w-0 flex-wrap items-center gap-2">
+        <div className="min-w-0 truncate text-[1.04rem] font-bold leading-tight text-white">
+          {conversationDisplayTitle(props.conversation)}
+        </div>
+        <StatusBadge status={visualStatus} />
+      </div>
+      <div className="mt-1 break-words text-[0.86rem] leading-relaxed text-[#b8b8b8] md:truncate">
+        {conversationIdentityMeta(props.conversation, props.conversation.id)}
+        {props.conversation.sentryConversationUrl ? (
+          <>
+            {" · "}
+            <a
+              className="border-b border-white/30 text-[0.86rem] leading-relaxed text-white no-underline hover:border-white"
+              href={props.conversation.sentryConversationUrl}
+              onClick={(event) => event.stopPropagation()}
+              rel="noreferrer"
+              target="_blank"
+            >
+              View in Sentry
+            </a>
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/client/components/EmptyTelemetry.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+/** Render the dashboard empty-state block with a warning accent. */
+export function EmptyTelemetry(props: { children: ReactNode }) {
+  return (
+    <div className="relative min-w-0 border border-white/10 bg-[#050505] px-4 py-3 pl-5 text-[0.9rem] leading-relaxed text-[#b8b8b8]">
+      <span className="absolute bottom-0 left-0 top-0 w-1 bg-amber-400" />
+      {props.children}
+    </div>
+  );
+}

package/src/client/components/FilterTabs.tsx

@@ -0,0 +1,35 @@
+import { cn } from "../styles";
+import type { SessionFilter } from "../types";
+
+/** Render conversation filters while keeping URL state owned by the page. */
+export function FilterTabs(props: {
+  current: SessionFilter;
+  onChange(filter: SessionFilter): void;
+}) {
+  const filters: SessionFilter[] = [
+    "recent",
+    "active",
+    "hung",
+    "failed",
+    "all",
+  ];
+  return (
+    <div className="flex flex-wrap items-center justify-end gap-1">
+      {filters.map((filter) => (
+        <button
+          className={cn(
+            "cursor-pointer border px-2 py-1 text-[0.78rem] font-semibold uppercase leading-tight transition-colors",
+            props.current === filter
+              ? "border-white/30 bg-white text-black"
+              : "border-white/10 bg-[#0b0b0b] text-[#888] hover:border-white/25 hover:bg-[#151515] hover:text-white",
+          )}
+          key={filter}
+          onClick={() => props.onChange(filter)}
+          type="button"
+        >
+          {filter}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/client/components/JuniorLogo.tsx

@@ -0,0 +1,8 @@
+/** Render the compact Junior wordmark used by the dashboard shell. */
+export function JuniorLogo() {
+  return (
+    <div className="grid size-9 shrink-0 select-none place-items-center bg-black text-[0.82rem] font-black leading-none text-white">
+      Jr
+    </div>
+  );
+}

package/src/client/components/LoadingView.tsx

@@ -0,0 +1,16 @@
+import { JuniorLogo } from "./JuniorLogo";
+
+/** Render the full-page loading treatment before the first dashboard payload lands. */
+export function LoadingView(props: { label: string }) {
+  return (
+    <div className="grid min-h-[calc(100vh-5rem)] place-items-center px-4 py-8 md:px-8">
+      <section className="grid w-full max-w-lg grid-cols-[auto_minmax(0,1fr)] items-center gap-3 border border-white/15 bg-[#0b0b0b] p-4">
+        <JuniorLogo />
+        <div>
+          <div className="font-bold">{props.label}</div>
+          <div className="mt-3 h-1.5 w-full animate-pulse bg-white/20" />
+        </div>
+      </section>
+    </div>
+  );
+}

package/src/client/components/Section.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../styles";
+
+/** Frame a dashboard content region without leaking CSS class contracts. */
+export function Section(props: { children: ReactNode; className?: string }) {
+  return (
+    <section
+      className={cn(
+        "mb-4 min-w-0 border border-white/10 bg-[#0b0b0b]",
+        props.className,
+      )}
+    >
+      {props.children}
+    </section>
+  );
+}

package/src/client/components/SectionHeader.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+
+/** Render a dashboard section heading row with optional controls. */
+export function SectionHeader(props: {
+  actions?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3 border-b border-white/10 bg-[#111] px-4 py-3 max-md:flex-col max-md:items-stretch">
+      <div className="min-w-0">{props.children}</div>
+      {props.actions ? (
+        <div className="shrink-0 max-md:w-full">{props.actions}</div>
+      ) : null}
+    </div>
+  );
+}

package/src/client/components/SectionTitle.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+/** Render compact section titles that fit inside operational panels. */
+export function SectionTitle(props: { children: ReactNode }) {
+  return (
+    <div className="min-w-0 break-words text-[1.05rem] font-bold leading-tight tracking-normal">
+      {props.children}
+    </div>
+  );
+}

package/src/client/components/StatusBadge.tsx

@@ -0,0 +1,40 @@
+import { cn } from "../styles";
+import type { VisualStatus } from "../types";
+
+/** Render readable status text while keeping severity color restrained. */
+export function StatusBadge(props: {
+  label?: string;
+  status: VisualStatus | undefined;
+}) {
+  const status = props.status ?? "idle";
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5",
+        statusBadgeClass(status),
+      )}
+    >
+      <span
+        className={cn(
+          "size-1.5 shrink-0",
+          status === "active" && "bg-emerald-300",
+          status === "hung" && "bg-amber-300",
+          status === "failed" && "bg-rose-300",
+          status === "idle" && "bg-white/35",
+        )}
+      />
+      {props.label ?? status}
+    </span>
+  );
+}
+
+function statusBadgeClass(status: VisualStatus): string {
+  return cn(
+    "border px-1.5 py-0.5 text-[0.68rem] font-bold uppercase leading-none",
+    status === "active" &&
+      "border-emerald-400/25 bg-emerald-400/10 text-emerald-300",
+    status === "hung" && "border-amber-400/25 bg-amber-400/10 text-amber-300",
+    status === "failed" && "border-rose-400/25 bg-rose-400/10 text-rose-300",
+    status === "idle" && "border-white/10 bg-white/[0.03] text-[#888]",
+  );
+}

package/src/client/components/ToolFrame.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../styles";
+
+/** Render the shared expandable/non-expandable frame for transcript tools. */
+export function ToolFrame(props: {
+  children?: ReactNode;
+  meta: string[];
+  raw?: boolean;
+  signature: ReactNode;
+}) {
+  const header = (
+    <>
+      <span className="flex min-w-0 flex-wrap items-baseline gap-x-1 gap-y-0.5 overflow-hidden">
+        {props.signature}
+      </span>
+      <span className="min-w-0 break-words text-right text-[0.8rem] text-[#888] max-md:text-left">
+        {props.meta.join(" · ")}
+      </span>
+    </>
+  );
+
+  if (props.raw) {
+    return (
+      <div className={toolFrameClass()}>
+        <div className={toolHeaderClass(false)}>{header}</div>
+        {props.children}
+      </div>
+    );
+  }
+
+  return (
+    <details className={toolFrameClass()}>
+      <summary className={toolHeaderClass(true)}>{header}</summary>
+      {props.children}
+    </details>
+  );
+}
+
+/** Provide the shared transcript tool-frame shell for nonstandard part views. */
+export function toolFrameClass(): string {
+  return "border border-[#beaaff]/20 bg-[#111] transition-colors hover:border-[#beaaff]/45 hover:bg-[rgba(190,170,255,0.06)]";
+}
+
+function toolHeaderClass(interactive: boolean): string {
+  return cn(
+    "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 px-3 py-2 font-mono text-[0.84rem] leading-tight text-[#b8b8b8] max-md:grid-cols-1 max-md:gap-1",
+    interactive
+      ? "cursor-pointer hover:bg-[rgba(190,170,255,0.07)]"
+      : "cursor-default",
+  );
+}

package/src/client/components/Transcript.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+
+import type { ConversationTurn } from "../types";
+import { TranscriptHeader } from "./TranscriptHeader";
+import { TurnTranscript } from "./TranscriptTurn";
+import type { TranscriptViewMode } from "./transcriptRenderModel";
+import { transcriptEmptyClass } from "./transcriptStyles";
+
+/** Render ordered conversation turns as message, thinking, and tool-call events. */
+export function Transcript(props: { turns: ConversationTurn[] }) {
+  const [view, setView] = useState<TranscriptViewMode>("rich");
+  const hasRedactedTurns = props.turns.some((turn) => turn.transcriptRedacted);
+
+  if (props.turns.length === 0) {
+    return (
+      <div className={transcriptEmptyClass()}>
+        No transcript is available for this conversation.
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid min-w-0">
+      <TranscriptHeader
+        redacted={hasRedactedTurns}
+        value={view}
+        onChange={setView}
+      />
+      {props.turns.map((turn, index) => (
+        <TurnTranscript
+          key={turn.id}
+          number={index + 1}
+          turn={turn}
+          view={view}
+        />
+      ))}
+    </div>
+  );
+}

package/src/client/components/TranscriptHeader.tsx

@@ -0,0 +1,52 @@
+import type { TranscriptViewMode } from "./transcriptRenderModel";
+
+/** Render transcript controls without coupling them to turn rendering. */
+export function TranscriptHeader(props: {
+  onChange(value: TranscriptViewMode): void;
+  redacted: boolean;
+  value: TranscriptViewMode;
+}) {
+  return (
+    <div className="mb-1 flex min-w-0 items-start justify-between gap-3 border-b border-[#beaaff]/20 pb-3 leading-none max-md:flex-col">
+      <div className="min-w-0">
+        <div className="text-[0.78rem] font-semibold uppercase text-[#888]">
+          Transcript
+        </div>
+        {props.redacted ? (
+          <div className="mt-2 break-words text-[0.88rem] leading-relaxed text-[#b8b8b8]">
+            Hidden because this conversation is not public.
+          </div>
+        ) : null}
+      </div>
+      <TranscriptViewToggle value={props.value} onChange={props.onChange} />
+    </div>
+  );
+}
+
+function TranscriptViewToggle(props: {
+  onChange(value: TranscriptViewMode): void;
+  value: TranscriptViewMode;
+}) {
+  const options: TranscriptViewMode[] = ["rich", "raw"];
+  return (
+    <div
+      className="inline-flex items-center gap-1 text-[0.82rem] font-semibold text-[#888]"
+      aria-label="Transcript view"
+    >
+      {options.map((option) => (
+        <button
+          className={`cursor-pointer border-0 bg-transparent px-1.5 py-1 uppercase tracking-normal underline-offset-4 ${
+            props.value === option
+              ? "text-white underline decoration-white"
+              : "text-[#888] hover:text-white"
+          }`}
+          key={option}
+          onClick={() => props.onChange(option)}
+          type="button"
+        >
+          {option}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/client/components/TranscriptLoading.tsx

@@ -0,0 +1,10 @@
+/** Render a transcript-shaped loading state for route transitions. */
+export function TranscriptLoading() {
+  return (
+    <div className="grid gap-3">
+      <div className="min-h-28 animate-pulse border border-white/10 bg-[#0b0b0b]" />
+      <div className="min-h-[4.5rem] animate-pulse border border-white/10 bg-[#0b0b0b]" />
+      <div className="min-h-28 animate-pulse border border-white/10 bg-[#0b0b0b]" />
+    </div>
+  );
+}

package/src/client/components/TranscriptText.tsx

@@ -0,0 +1,45 @@
+import {
+  countStructuredBlockChildren,
+  HighlightedCode,
+  StructuredMarkup,
+} from "../code";
+import { canRenderStructuredMarkup, parseMarkdownBlocks } from "../format";
+
+/** Render transcript markdown/code blocks with structured markup expansion. */
+export function TranscriptText(props: {
+  firstChildIndex: number;
+  lastChildIndex: number;
+  text: string;
+}) {
+  const blocks = parseMarkdownBlocks(props.text);
+  let seenChildren = props.firstChildIndex;
+
+  return (
+    <div className="grid min-w-0 gap-2">
+      {blocks.map((block, index) => {
+        const firstChildIndex = seenChildren;
+        const childCount = countStructuredBlockChildren(block);
+        seenChildren += childCount;
+
+        if (!canRenderStructuredMarkup(block.language)) {
+          return (
+            <HighlightedCode
+              code={block.code}
+              key={index}
+              language={block.language}
+            />
+          );
+        }
+
+        return (
+          <StructuredMarkup
+            block={block}
+            firstChildIndex={firstChildIndex}
+            key={index}
+            lastChildIndex={props.lastChildIndex}
+          />
+        );
+      })}
+    </div>
+  );
+}