@sentry/junior-dashboard 0.267.0 → 0.268.0

package/src/client/conversations/TranscriptMessageView.tsx

@@ -9,6 +9,7 @@ import { memo, type ReactNode } from "react";
 
 import {
   formatMessageTimestamp,
+  transcriptMessageActor,
   transcriptMessageActorLabel,
   transcriptRoleKind,
 } from "../format";
@@ -130,8 +131,10 @@ function messageAction(
   if (message.role === "user" && message.contexts?.length) {
     return (
       <TranscriptTurnContextView
+        actor={transcriptMessageActor(conversation, message)}
         contexts={message.contexts}
         messageId={message.messageId}
+        timestamp={message.timestamp}
       />
     );
   }

package/src/client/conversations/TranscriptToolView.tsx

@@ -10,6 +10,8 @@ import {
 } from "../format";
 import type { TranscriptViewToolCallPart } from "../types";
 import { ShimmerText } from "../components/ShimmerText";
+import { TranscriptReviewItemCard } from "../review-desk/ReviewItemCard";
+import { reviewItemIdFromToolCall } from "../review-desk/reviewItemFormat";
 import { cn } from "../styles";
 import { ToolFrame } from "./ToolFrame";
 import { toolCallPreview } from "./toolCallPreview";
@@ -64,7 +66,17 @@ export const TranscriptToolView = memo(function TranscriptToolView(props: {
     </ToolFrame>
   );
 
-  return <div className="min-w-0">{frame}</div>;
+  const reviewItemId = reviewItemIdFromToolCall(props.part);
+  return (
+    <div className="min-w-0">
+      {frame}
+      {reviewItemId ? (
+        <div className="mt-2">
+          <TranscriptReviewItemCard itemId={reviewItemId} />
+        </div>
+      ) : null}
+    </div>
+  );
 });
 
 function ToolSignature(props: {

package/src/client/conversations/TranscriptTurnContextView.tsx

@@ -1,4 +1,5 @@
-import { Brain, Braces, ChevronRight, Layers } from "lucide-react";
+import type { ActorIdentity } from "@sentry/junior/api/schema";
+import { Layers } from "lucide-react";
 import {
   createContext,
   useContext,
@@ -7,10 +8,12 @@ import {
   type ReactNode,
 } from "react";
 import { createPortal } from "react-dom";
+import { Link } from "react-router";
 
+import { ActorAvatar } from "../components/ActorAvatar";
 import { DetailsPanel } from "../components/DetailsPanel";
+import { participantName } from "../components/ParticipantAvatarStack";
 import { Button } from "../components/ui/button";
-import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { Drawer } from "../components/Drawer";
 import {
   Tooltip,
@@ -18,18 +21,26 @@ import {
   TooltipTrigger,
 } from "../components/ui/tooltip";
 import type { TranscriptViewTurnContext } from "../types";
-import { formatMessageTimestamp, formatTime } from "../format";
-import { memoryRecallContent, type MemoryRecallContent } from "./turnContext";
-import { cn, dashboardDisclosureChevronClass } from "../styles";
+import { formatMessageTimestamp, memoryPath, peoplePath } from "../format";
+import {
+  memoryRecallContent,
+  userCustomizationContent,
+  type MemoryRecallContent,
+} from "./turnContext";
+import { cn } from "../styles";
+import { DetailsCard } from "./DetailsList";
 import { HighlightText } from "./transcriptSearch";
-import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
-/** The turn context that a page panel shows, keyed by its message. */
-export type TurnContextSelection = {
+/** What one turn context view shows: who spoke, when, and the context. */
+export type TurnContext = {
+  actor?: ActorIdentity;
   contexts: TranscriptViewTurnContext[];
-  id: string;
+  timestamp?: number;
 };
 
+/** The turn context that a page panel shows, keyed by its message. */
+export type TurnContextSelection = TurnContext & { id: string };
+
 /** Let the page that owns a panel show turn context there. */
 export type TurnContextPanel = {
   openId?: string;
@@ -61,10 +72,9 @@ export function TurnContextPanelProvider(props: {
  * keys context by `messageId`, so every control for one message, including a
  * remounted one, shows the same open state.
  */
-export function TranscriptTurnContextView(props: {
-  contexts: TranscriptViewTurnContext[];
-  messageId?: string;
-}) {
+export function TranscriptTurnContextView(
+  props: TurnContext & { messageId?: string },
+) {
   const panel = useContext(TurnContextPanelContext);
   const [open, setOpen] = useState(false);
   const instanceId = useId();
@@ -90,7 +100,12 @@ export function TranscriptTurnContextView(props: {
               data-turn-context-id={id}
               onClick={() => {
                 if (!panel) return setOpen(true);
-                panel.onToggle({ contexts: props.contexts, id });
+                panel.onToggle({
+                  actor: props.actor,
+                  contexts: props.contexts,
+                  id,
+                  timestamp: props.timestamp,
+                });
               }}
               size="icon"
             >
@@ -117,7 +132,11 @@ export function TranscriptTurnContextView(props: {
               openKey={instanceId}
               titleId={instanceId}
             >
-              <TurnContextList contexts={props.contexts} />
+              <TurnContextBody
+                actor={props.actor}
+                contexts={props.contexts}
+                timestamp={props.timestamp}
+              />
             </Drawer>,
             document.body,
           )
@@ -127,10 +146,7 @@ export function TranscriptTurnContextView(props: {
 }
 
 /** Show turn context in the page panel: an aside, or a sheet on small screens. */
-export function TurnContextDetails(props: {
-  contexts: TranscriptViewTurnContext[];
-  onClose(): void;
-}) {
+export function TurnContextDetails(props: TurnContext & { onClose(): void }) {
   return (
     <DetailsPanel
       label="Turn context"
@@ -141,151 +157,133 @@ export function TurnContextDetails(props: {
         </h2>
       }
     >
-      <div className="px-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
-        <TurnContextList contexts={props.contexts} />
+      <div className="p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
+        <TurnContextBody
+          actor={props.actor}
+          contexts={props.contexts}
+          timestamp={props.timestamp}
+        />
       </div>
     </DetailsPanel>
   );
 }
 
-function TurnContextList(props: { contexts: TranscriptViewTurnContext[] }) {
-  return props.contexts.map((context, index) => (
-    <TurnContext
-      context={context}
-      key={`${context.pluginName}:${context.kind}:${context.version}:${index}`}
-    />
-  ));
+/** Show who spoke, then their customization, then plugin context. */
+function TurnContextBody(props: TurnContext) {
+  const contexts = [...props.contexts].sort(
+    (a, b) =>
+      Number(Boolean(userCustomizationContent(b))) -
+      Number(Boolean(userCustomizationContent(a))),
+  );
+  return (
+    <div className="grid min-w-0 gap-3">
+      {props.actor ? (
+        <TurnContextActor actor={props.actor} timestamp={props.timestamp} />
+      ) : null}
+      {contexts.map((context, index) => (
+        <TurnContextCard
+          context={context}
+          key={`${context.pluginName}:${context.kind}:${context.version}:${index}`}
+        />
+      ))}
+    </div>
+  );
 }
 
-function TurnContext(props: { context: TranscriptViewTurnContext }) {
-  const memory = memoryRecallContent(props.context);
-
+function TurnContextActor(props: { actor: ActorIdentity; timestamp?: number }) {
+  const name = participantName(props.actor);
+  const email = props.actor.email?.trim();
+  const handle = props.actor.slackUserName?.trim();
+  const meta = [
+    email && email !== name ? email : undefined,
+    handle && handle !== name ? `@${handle}` : undefined,
+  ].filter(Boolean);
   return (
-    <section className="border-b border-dashboard-border-strong py-5 last:border-b-0">
-      <div className="mb-4 flex items-start justify-between gap-4">
-        <div className="flex min-w-0 items-center gap-2.5">
-          {memory ? (
-            <Brain
-              aria-hidden="true"
-              className="shrink-0 text-dashboard-accent-text/60"
-              size={15}
-            />
+    <section
+      aria-label="Speaker"
+      className="flex min-w-0 items-center gap-3 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel p-3"
+    >
+      <ActorAvatar name={name} size="detail" />
+      <div className="min-w-0 flex-1">
+        <div className="flex min-w-0 items-baseline justify-between gap-3">
+          {email ? (
+            <Link
+              className="min-w-0 truncate text-sm font-medium text-dashboard-text no-underline hover:underline"
+              to={peoplePath(email)}
+            >
+              {name}
+            </Link>
           ) : (
-            <Braces
-              aria-hidden="true"
-              className="shrink-0 text-dashboard-accent-text/60"
-              size={15}
-            />
+            <span className="min-w-0 truncate text-sm font-medium text-dashboard-text">
+              {name}
+            </span>
           )}
-          <h3 className="m-0 truncate text-sm font-semibold text-dashboard-text">
-            {memory ? "Recalled memories" : props.context.pluginName}
-          </h3>
+          {props.timestamp !== undefined ? (
+            <time
+              className="shrink-0 text-xs tabular-nums text-dashboard-text-muted"
+              dateTime={new Date(props.timestamp).toISOString()}
+            >
+              {formatMessageTimestamp(props.timestamp, true)}
+            </time>
+          ) : null}
         </div>
-        <span className="shrink-0 text-xs text-dashboard-text-muted">
-          {props.context.kind} · v{props.context.version}
-        </span>
+        {meta.length ? (
+          <p
+            className="m-0 mt-0.5 truncate text-xs text-dashboard-text-muted"
+            title={props.actor.slackUserId}
+          >
+            {meta.join(" · ")}
+          </p>
+        ) : null}
       </div>
-
-      {memory ? (
-        <MemoryRecall
-          loadedAt={props.context.loadedAt}
-          memories={memory.memories}
-        />
-      ) : (
-        <GenericContext context={props.context} />
-      )}
     </section>
   );
 }
 
-function MemoryRecall(props: {
-  loadedAt: string;
-  memories: MemoryRecallContent["memories"];
-}) {
+function TurnContextCard(props: { context: TranscriptViewTurnContext }) {
+  const memory = memoryRecallContent(props.context);
+  if (memory) {
+    return (
+      <DetailsCard count={memory.memories.length} title="Recalled memories">
+        <MemoryRecall memories={memory.memories} />
+      </DetailsCard>
+    );
+  }
+  const customization = userCustomizationContent(props.context);
+  if (customization) {
+    return (
+      <DetailsCard title="User customization">
+        <p className="m-0 whitespace-pre-wrap text-sm leading-relaxed text-dashboard-text">
+          <HighlightText text={customization.text} />
+        </p>
+      </DetailsCard>
+    );
+  }
   return (
-    <div className="overflow-hidden rounded-lg border border-dashboard-border-strong">
-      {props.memories.map((memory, index) => (
-        <Collapsible
-          className="border-t border-dashboard-border-strong first:border-t-0"
-          key={memory.id}
-        >
-          <TranscriptSummaryTrigger className="group flex items-start gap-2.5">
-            <ChevronRight
-              aria-hidden="true"
-              className={cn(
-                dashboardDisclosureChevronClass,
-                "mt-0.5 text-dashboard-text-muted",
-              )}
-            />
-            <span className="min-w-0 flex-1">
-              <span className="flex items-center justify-between gap-3">
-                <span className="text-xs font-medium text-dashboard-text-muted">
-                  Memory {index + 1}
-                </span>
-                <span className="shrink-0 text-xs text-dashboard-text-muted">
-                  {memory.kind} · {memory.scope}
-                </span>
-              </span>
-              <span className="mt-1 block truncate text-sm text-dashboard-text-muted">
-                <HighlightText text={memory.content} />
-              </span>
-            </span>
-          </TranscriptSummaryTrigger>
-
-          <CollapsibleContent hiddenUntilFound>
-            <div className="border-t border-dashboard-border bg-dashboard-fill-faint px-4 py-4">
-              <div className="whitespace-pre-wrap text-sm leading-6 text-dashboard-text">
-                <HighlightText text={memory.content} />
-              </div>
-
-              <dl className="mt-4 grid gap-2 text-xs">
-                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                  <dt className="text-dashboard-text-muted">Memory ID</dt>
-                  <dd className="m-0 break-all font-mono text-dashboard-text-muted">
-                    <HighlightText text={memory.id} />
-                  </dd>
-                </div>
-                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                  <dt className="text-dashboard-text-muted">Observed</dt>
-                  <dd className="m-0 text-dashboard-text-muted">
-                    {formatTime(new Date(memory.observedAtMs).toISOString())}
-                  </dd>
-                </div>
-                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                  <dt className="text-dashboard-text-muted">Scope</dt>
-                  <dd className="m-0 text-dashboard-text-muted">
-                    {memory.scope}
-                  </dd>
-                </div>
-                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                  <dt className="text-dashboard-text-muted">Kind</dt>
-                  <dd className="m-0 text-dashboard-text-muted">
-                    {memory.kind}
-                  </dd>
-                </div>
-              </dl>
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-      ))}
-      <p className="m-0 border-t border-dashboard-border-strong px-3 py-2 text-xs text-dashboard-text-muted">
-        {props.memories.length}{" "}
-        {props.memories.length === 1 ? "memory" : "memories"} · Loaded{" "}
-        {formatMessageTimestamp(Date.parse(props.loadedAt))}
-      </p>
-    </div>
+    <DetailsCard
+      title={`${props.context.pluginName} · ${props.context.kind} v${props.context.version}`}
+    >
+      <pre className="m-0 overflow-x-auto whitespace-pre-wrap break-words font-mono text-xs leading-relaxed">
+        <HighlightText text={JSON.stringify(props.context.content, null, 2)} />
+      </pre>
+    </DetailsCard>
   );
 }
 
-function GenericContext(props: { context: TranscriptViewTurnContext }) {
+// Each row links to the memory's page, which shows its details.
+function MemoryRecall(props: { memories: MemoryRecallContent["memories"] }) {
   return (
-    <div>
-      <pre className="m-0 overflow-x-auto whitespace-pre-wrap break-words rounded-lg bg-dashboard-fill-soft p-3 text-xs leading-relaxed text-dashboard-text-muted">
-        <HighlightText text={JSON.stringify(props.context.content, null, 2)} />
-      </pre>
-      <p className="m-0 mt-3 text-xs text-dashboard-text-muted">
-        Loaded {formatMessageTimestamp(Date.parse(props.context.loadedAt))}
-      </p>
-    </div>
+    <ul className="-mx-1.5 -mb-1.5 -mt-1 grid list-none gap-0.5 p-0">
+      {props.memories.map((memory) => (
+        <li key={memory.id}>
+          <Link
+            className="line-clamp-2 rounded-md px-1.5 py-1.5 text-sm leading-5 text-dashboard-text no-underline transition-colors hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+            to={memoryPath(memory.id)}
+          >
+            <HighlightText text={memory.content} />
+          </Link>
+        </li>
+      ))}
+    </ul>
   );
 }

package/src/client/conversations/UserInputRequestCard.tsx

@@ -1,150 +1,17 @@
-import { useId, useRef, useState, type FormEvent } from "react";
-import {
-  buttonUserInputField,
-  formatUserInputAnswer,
-  isEmptyUserInputAnswer,
-  normalizeUserInputAnswer,
-  type UserInputAnswer,
-  type UserInputField,
-} from "@sentry/junior/api/schema";
+import { formatUserInputAnswer } from "@sentry/junior/api/schema";
 
-import { Button } from "../components/ui/button";
-import { Textarea } from "../components/ui/textarea";
+import { UserInputForm } from "../components/UserInputForm";
 import { TranscriptText } from "./TranscriptText";
 import type { OpenUserInputRequest } from "./userInputRequest";
 
-const labelClass = "font-sans text-xs font-medium text-dashboard-text-muted";
-
-function ChoiceField(props: {
-  disabled: boolean;
-  field: Extract<UserInputField, { kind: "choice" | "multi_choice" }>;
-  onChange(values: string[]): void;
-  values: string[];
-}) {
-  const name = useId();
-  const multi = props.field.kind === "multi_choice";
-  return (
-    <fieldset className="m-0 min-w-0 border-0 p-0">
-      <legend className={labelClass}>{props.field.label}</legend>
-      {props.field.description ? (
-        <p className="m-0 text-xs text-dashboard-text-muted">
-          {props.field.description}
-        </p>
-      ) : null}
-      <div className="mt-1 grid gap-1">
-        {props.field.options.map((option) => (
-          <label
-            className="flex cursor-pointer items-start gap-2 text-sm"
-            key={option.label}
-          >
-            <input
-              checked={props.values.includes(option.label)}
-              className="mt-0.5 size-4 shrink-0 accent-dashboard-focus"
-              disabled={props.disabled}
-              name={name}
-              onChange={() =>
-                props.onChange(
-                  !multi
-                    ? [option.label]
-                    : props.values.includes(option.label)
-                      ? props.values.filter((value) => value !== option.label)
-                      : [...props.values, option.label],
-                )
-              }
-              type={multi ? "checkbox" : "radio"}
-            />
-            <span className="min-w-0 break-words">
-              {option.label}
-              {option.description ? (
-                <span className="block text-xs text-dashboard-text-muted">
-                  {option.description}
-                </span>
-              ) : null}
-            </span>
-          </label>
-        ))}
-      </div>
-    </fieldset>
-  );
-}
-
-function TextField(props: {
-  description?: string;
-  disabled: boolean;
-  label: string;
-  onChange(value: string): void;
-  value: string;
-}) {
-  const id = useId();
-  return (
-    <div className="grid gap-1">
-      <label className={labelClass} htmlFor={id}>
-        {props.label}
-      </label>
-      {props.description ? (
-        <p className="m-0 text-xs text-dashboard-text-muted">
-          {props.description}
-        </p>
-      ) : null}
-      <Textarea
-        className="min-h-16 leading-relaxed"
-        disabled={props.disabled}
-        id={id}
-        onChange={(event) => props.onChange(event.target.value)}
-        value={props.value}
-      />
-    </div>
-  );
-}
-
 /**
- * Show Junior's open request above the composer. A request with one short
- * choice field shows one button per choice, and a click is the answer. Other
- * requests show a form that the reader submits once. Both send the formatted
- * answer as the reader's next message. Typing a reply also answers it.
+ * Show Junior's open request above the composer. The answer goes as the
+ * reader's next message. Typing a reply also answers it.
  */
 export function UserInputRequestCard(props: {
   onAnswer(answer: string): Promise<void>;
   request: OpenUserInputRequest;
 }) {
-  const [sending, setSending] = useState(false);
-  const [failed, setFailed] = useState(false);
-  const [values, setValues] = useState<Record<string, string[]>>({});
-  const [other, setOther] = useState("");
-  const buttonField = buttonUserInputField(props.request);
-
-  // A ref blocks a second click before React renders the disabled controls.
-  // The lock stays after a sent answer; only a failed send can retry.
-  const sendLock = useRef(false);
-
-  async function send(answer: UserInputAnswer) {
-    if (sendLock.current) return;
-    sendLock.current = true;
-    setSending(true);
-    setFailed(false);
-    try {
-      await props.onAnswer(formatUserInputAnswer(props.request, answer));
-    } catch {
-      sendLock.current = false;
-      setSending(false);
-      setFailed(true);
-    }
-  }
-
-  const answer: UserInputAnswer = {
-    other,
-    requestId: props.request.toolCallId,
-    values,
-  };
-  function submit(event: FormEvent) {
-    event.preventDefault();
-    if (
-      !isEmptyUserInputAnswer(normalizeUserInputAnswer(props.request, answer))
-    ) {
-      void send(answer);
-    }
-  }
-
   return (
     <section
       aria-label="Junior asks"
@@ -157,88 +24,16 @@ export function UserInputRequestCard(props: {
           text={props.request.question}
         />
       </div>
-      {buttonField ? (
-        <>
-          <div className="mt-2 flex flex-wrap gap-2">
-            {buttonField.options.map((option) => (
-              <Button
-                disabled={sending}
-                key={option.label}
-                onClick={() =>
-                  void send({
-                    requestId: props.request.toolCallId,
-                    values: { [buttonField.id]: [option.label] },
-                  })
-                }
-                title={option.description}
-              >
-                {option.label}
-              </Button>
-            ))}
-          </div>
-          {buttonField.options.some((option) => option.description) ? (
-            <ul className="mb-0 mt-2 list-none p-0 text-xs text-dashboard-text-muted">
-              {buttonField.options
-                .filter((option) => option.description)
-                .map((option) => (
-                  <li key={option.label}>
-                    <span className="font-medium text-dashboard-text">
-                      {option.label}
-                    </span>
-                    : {option.description}
-                  </li>
-                ))}
-            </ul>
-          ) : null}
-        </>
-      ) : (
-        <form
-          className="mt-2 grid max-h-96 gap-3 overflow-y-auto"
-          onSubmit={submit}
-        >
-          {props.request.fields.map((field) =>
-            field.kind === "text" ? (
-              <TextField
-                description={field.description}
-                disabled={sending}
-                key={field.id}
-                label={field.label}
-                onChange={(value) =>
-                  setValues((current) => ({ ...current, [field.id]: [value] }))
-                }
-                value={values[field.id]?.[0] ?? ""}
-              />
-            ) : (
-              <ChoiceField
-                disabled={sending}
-                field={field}
-                key={field.id}
-                onChange={(picked) =>
-                  setValues((current) => ({ ...current, [field.id]: picked }))
-                }
-                values={values[field.id] ?? []}
-              />
-            ),
-          )}
-          <TextField
-            description="Anything else, or an answer that is not listed."
-            disabled={sending}
-            label="Other"
-            onChange={setOther}
-            value={other}
-          />
-          <div>
-            <Button disabled={sending} type="submit" variant="primary">
-              Send
-            </Button>
-          </div>
-        </form>
-      )}
-      {failed ? (
-        <p className="mb-0 mt-2 text-xs text-rose-300" role="alert">
-          Could not send your answer. Try again.
-        </p>
-      ) : null}
+      {/* Above the composer, a long form scrolls so the transcript stays visible. */}
+      <div className="max-h-96 overflow-y-auto">
+        <UserInputForm
+          onSubmit={(answer) =>
+            props.onAnswer(formatUserInputAnswer(props.request, answer))
+          }
+          request={props.request}
+          requestId={props.request.toolCallId}
+        />
+      </div>
     </section>
   );
 }