@sentry/junior-dashboard 0.62.0 → 0.64.0

package/src/client/components/TranscriptHeadingRow.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+import { Brain } from "lucide-react";
+
+import { cn } from "../styles";
+
+/** Align transcript labels and metadata as one centered heading row. */
+export function TranscriptHeadingRow(props: {
+  className?: string;
+  left: ReactNode;
+  leftClassName?: string;
+  right?: ReactNode;
+  rightClassName?: string;
+}) {
+  const hasRight =
+    props.right !== undefined && props.right !== null && props.right !== false;
+
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 items-center justify-between gap-3",
+        props.className,
+      )}
+    >
+      <div
+        className={cn(
+          "flex min-w-0 items-center gap-2 overflow-hidden",
+          props.leftClassName,
+        )}
+      >
+        {props.left}
+      </div>
+      {hasRight ? (
+        <div className={cn("shrink-0 text-right", props.rightClassName)}>
+          {props.right}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/** Render compact transcript heading metadata without changing row alignment. */
+export function TranscriptHeadingMeta(props: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <span className={cn("font-mono leading-none", props.className)}>
+      {props.children}
+    </span>
+  );
+}
+
+/** Render the thinking-row label with stable optical vertical centering. */
+export function TranscriptThoughtLabel() {
+  return (
+    <span
+      aria-label="Thinking"
+      className="mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-[#777]"
+      title="Thinking"
+    >
+      <Brain aria-hidden="true" size={14} strokeWidth={1.8} />
+    </span>
+  );
+}

package/src/client/components/TranscriptThinkingView.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useRef, useState } from "react";
+
+import {
+  formatMessageOffset,
+  formatMessageTimestamp,
+  stringifyPartValue,
+} from "../format";
+import { cn } from "../styles";
+import type { ConversationTurn } from "../types";
+import {
+  TranscriptHeadingMeta,
+  TranscriptHeadingRow,
+  TranscriptThoughtLabel,
+} from "./TranscriptHeadingRow";
+import { previewToolValue } from "./transcriptPreview";
+
+const PREVIEW_OVERFLOW_EPSILON = 1;
+
+function isString(value: string | undefined): value is string {
+  return typeof value === "string" && value.length > 0;
+}
+
+/** Render a thinking transcript event with layout-aware expansion. */
+export function TranscriptThinkingView(props: {
+  timestamp?: number;
+  turn?: ConversationTurn;
+  value: unknown;
+}) {
+  const [open, setOpen] = useState(false);
+  const [previewOverflows, setPreviewOverflows] = useState(false);
+  const previewMeasureRef = useRef<HTMLSpanElement>(null);
+  const rendered = stringifyPartValue(props.value);
+  const expandedText = rendered || "{}";
+  const preview = previewToolValue(props.value);
+  const contentChangesOnExpand =
+    preview !== expandedText || expandedText.includes("\n");
+  const shouldMeasurePreview = !contentChangesOnExpand;
+  const offset = props.turn
+    ? formatMessageOffset(props.turn, props.timestamp)
+    : undefined;
+  const meta = [
+    typeof props.timestamp === "number"
+      ? formatMessageTimestamp(props.timestamp)
+      : undefined,
+    offset,
+  ].filter(isString);
+  const metaText = meta.join(" · ");
+  const canExpand = contentChangesOnExpand || previewOverflows;
+
+  useEffect(() => {
+    if (!shouldMeasurePreview) {
+      setPreviewOverflows(false);
+      return;
+    }
+
+    const node = previewMeasureRef.current;
+    if (!node) return;
+
+    const measure = () => {
+      const next =
+        node.scrollWidth - node.clientWidth > PREVIEW_OVERFLOW_EPSILON;
+      setPreviewOverflows((current) => (current === next ? current : next));
+    };
+    measure();
+
+    const observer =
+      typeof ResizeObserver === "undefined"
+        ? undefined
+        : new ResizeObserver(measure);
+    observer?.observe(node);
+    if (node.parentElement) observer?.observe(node.parentElement);
+    window.addEventListener("resize", measure);
+
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [preview, shouldMeasurePreview]);
+
+  useEffect(() => {
+    if (!canExpand && open) setOpen(false);
+  }, [canExpand, open]);
+
+  const rowContent = (expanded: boolean) => (
+    <>
+      <TranscriptThoughtLabel />
+      <TranscriptHeadingRow
+        className={expanded ? "items-start" : undefined}
+        left={
+          <span className="relative min-w-0 flex-1 italic">
+            {shouldMeasurePreview ? (
+              <span
+                aria-hidden="true"
+                className="pointer-events-none invisible absolute inset-x-0 top-0 block truncate"
+                ref={previewMeasureRef}
+              >
+                {preview}
+              </span>
+            ) : null}
+            <span
+              className={cn(
+                "block min-w-0",
+                expanded
+                  ? "whitespace-pre-wrap break-words text-[#9a9a9a]"
+                  : "truncate",
+              )}
+            >
+              {expanded ? expandedText : preview}
+            </span>
+          </span>
+        }
+        leftClassName={expanded ? "items-start" : undefined}
+        right={
+          metaText ? (
+            <TranscriptHeadingMeta className="min-w-0 break-words text-[0.78rem] not-italic text-[#777] max-md:hidden">
+              {metaText}
+            </TranscriptHeadingMeta>
+          ) : undefined
+        }
+        rightClassName="min-w-0 max-md:hidden"
+      />
+    </>
+  );
+
+  if (!canExpand) {
+    return (
+      <div className="py-1.5 text-[0.84rem] leading-relaxed text-[#888]">
+        <div className="grid list-none grid-cols-[1rem_minmax(0,1fr)] items-start gap-2">
+          {rowContent(false)}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <details
+      className="py-1.5 text-[0.84rem] leading-relaxed text-[#888]"
+      onToggle={(event) => {
+        if (event.currentTarget !== event.target) return;
+        setOpen(event.currentTarget.open);
+      }}
+      open={open}
+    >
+      <summary className="grid cursor-pointer list-none grid-cols-[1rem_minmax(0,1fr)] items-start gap-2 transition-colors hover:text-[#b8b8b8] [&::-webkit-details-marker]:hidden">
+        {rowContent(open)}
+      </summary>
+      {metaText ? (
+        <div className="hidden min-w-0 grid-cols-[1rem_minmax(0,1fr)] gap-2 max-md:grid">
+          <span aria-hidden="true" />
+          <div className="min-w-0 break-words py-1 font-mono text-[0.78rem] not-italic leading-snug text-[#777]">
+            {metaText}
+          </div>
+        </div>
+      ) : null}
+    </details>
+  );
+}

package/src/client/components/TranscriptToolRun.tsx

@@ -0,0 +1,66 @@
+import { Fragment, useState, type ReactNode } from "react";
+
+import type { RenderedToolEntry } from "./transcriptRenderModel";
+
+const TOOL_RUN_REVEAL_THRESHOLD = 4;
+
+/** Render a consecutive tool run with a one-way reveal for dense middle calls. */
+export function TranscriptToolRun(props: {
+  entries: RenderedToolEntry[];
+  keyPrefix: string;
+  renderTool: (entry: RenderedToolEntry, index: number) => ReactNode;
+  startIndex: number;
+}) {
+  const [revealed, setRevealed] = useState(false);
+
+  if (props.entries.length < TOOL_RUN_REVEAL_THRESHOLD || revealed) {
+    return (
+      <>
+        {renderToolEntries(
+          props.entries,
+          props.startIndex,
+          props.keyPrefix,
+          props.renderTool,
+        )}
+      </>
+    );
+  }
+
+  return (
+    <ToolRunReveal
+      hiddenCount={props.entries.length}
+      onClick={() => setRevealed(true)}
+    />
+  );
+}
+
+function renderToolEntries(
+  entries: RenderedToolEntry[],
+  startIndex: number,
+  keyPrefix: string,
+  renderTool: (entry: RenderedToolEntry, index: number) => ReactNode,
+): ReactNode[] {
+  return entries.map((entry, offset) => {
+    const index = startIndex + offset;
+    return (
+      <Fragment key={`${keyPrefix}:tool:${index}`}>
+        {renderTool(entry, index)}
+      </Fragment>
+    );
+  });
+}
+
+function ToolRunReveal(props: { hiddenCount: number; onClick: () => void }) {
+  return (
+    <button
+      aria-expanded={false}
+      className="group flex w-full cursor-pointer items-center gap-2 py-1.5 text-left font-mono text-[0.78rem] leading-tight text-[#888] transition-colors hover:text-[#d6d6d6] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#beaaff]/55"
+      onClick={props.onClick}
+      type="button"
+    >
+      <span className="h-px min-w-4 flex-1 bg-white/10 transition-colors group-hover:bg-white/20" />
+      <span className="shrink-0">show {props.hiddenCount} tool calls</span>
+      <span className="h-px min-w-4 flex-1 bg-white/10 transition-colors group-hover:bg-white/20" />
+    </button>
+  );
+}

package/src/client/components/TranscriptToolView.tsx

@@ -38,20 +38,26 @@ export function TranscriptToolView(props: {
       ? formatMs(props.resultTimestamp - props.timestamp)
       : undefined;
   const meta = [
-    props.timestamp ? formatMessageTimestamp(props.timestamp) : undefined,
+    typeof props.timestamp === "number"
+      ? formatMessageTimestamp(props.timestamp)
+      : undefined,
     duration,
     props.result ? formatBytes(outputBytes) : undefined,
     props.result ? undefined : "missing result",
   ].filter(isString);
   const args = <ToolArgumentsPreview input={input} />;
+  const hasExpandableContent = Boolean(props.call || props.result);
+  const mobileSummaryMeta =
+    duration ?? (props.call && !props.result ? "missing result" : undefined);
 
   if (props.view === "raw") {
     return (
       <ToolFrame
         meta={meta}
+        mobileSummaryMeta={mobileSummaryMeta}
         raw
         signature={
-          <strong className="min-w-0 break-words font-bold text-white">
+          <strong className="min-w-0 break-words font-bold text-[#d6d6d6]">
             {toolName}
           </strong>
         }
@@ -71,14 +77,16 @@ export function TranscriptToolView(props: {
 
   return (
     <ToolFrame
+      expandable={hasExpandableContent}
       meta={meta}
+      mobileSummaryMeta={mobileSummaryMeta}
       signature={
         <>
-          <strong className="min-w-0 break-words font-bold text-white">
+          <strong className="min-w-0 break-words font-bold text-[#d6d6d6]">
             {toolName}
           </strong>
           {isPreviewableValue(input) ? (
-            <code className="min-w-0 break-words font-[inherit] text-[#b8b8b8]">
+            <code className="min-w-0 break-words font-[inherit] text-[#b8b8b8] max-md:hidden">
               ({args})
             </code>
           ) : null}
@@ -113,12 +121,12 @@ function ToolBodySection(props: {
   return (
     <div
       className={cn(
-        "border-t border-white/10 px-3",
-        props.padded === false ? "" : "py-3",
+        "min-w-0 max-w-full overflow-hidden border-t border-white/10",
+        props.padded === false ? "" : "py-2",
       )}
     >
       {props.label ? (
-        <div className="pb-2 font-mono text-[0.78rem] uppercase leading-none text-[#888]">
+        <div className="pb-2 font-mono text-[0.78rem] leading-none text-[#888]">
           {props.label}
         </div>
       ) : null}
@@ -173,7 +181,7 @@ function ToolArgEntry(props: { index: number; name: string; value: string }) {
   return (
     <span>
       {props.index > 0 ? <span className="text-[#888]">, </span> : null}
-      <span className="text-white">{props.name}</span>
+      <span className="text-[#d6d6d6]">{props.name}</span>
       <span className="text-[#888]">: </span>
       <ToolArgValue value={props.value} />
     </span>