@sentry/junior-dashboard 0.268.0 → 0.270.0

package/src/client/conversations/README.md

@@ -1,159 +0,0 @@
-# Transcript components
-
-Keep transcript layout in these feature components. Use the dashboard UI kit for
-shared controls and overlays.
-
-- `TranscriptRows` and `TranscriptRow` own the top-level gap, cell padding, and
-  activity indent. Loading rows and the typing indicator use the same layout.
-  The 4px gap and two 6px padding edges leave 16px between row content. Horizontal
-  padding stays inside each mobile row's paint bounds so focus outlines are not
-  clipped. Negative horizontal margins preserve the text edge.
-- `TranscriptMessageShell` owns the 32px avatar column and 12px message gutter.
-  `TranscriptMessageHeading` aligns authors, timestamps, and the context action.
-  The action stays visible on touch devices and while open. Mouse users see it
-  on message hover; keyboard users see it on focus.
-- `TranscriptSummaryTrigger` owns disclosure padding, hover, and keyboard
-  focus for a `ui/collapsible` trigger. Use `flush` when the text already sits
-  on the transcript edge. It extends the padded control around that text. Do
-  not repeat negative margins at call sites. The caller owns the `Collapsible`
-  and its content. Transcript search holds event and context rows open, and
-  shows activity group rows without the group.
-- Activity rows (tools, reasoning, and grouped rail events) share one
-  layout: a 1rem icon column, an 8px gap, then the title and metadata.
-  Tool and reasoning rows use `ui/trace`. Transcript search forces them open.
-  Expanded content sits in `TraceCollapsibleContent` under the title.
-  `TranscriptActivityNesting` tells a rail event that it is inside an activity
-  group. Outside a group, the rail icon sits in the avatar column so the text
-  lines up with message text.
-- `TranscriptSubagentView` renders a child agent as a card with its name,
-  status, run time, and title. It matches the child agent rows in the details
-  drawer and opens the child transcript.
-- `TranscriptAutomationTriggerView` renders the input of an Automation run as
-  one card. The report names that message in `sourceTask.triggerMessageId`.
-  The card shows the Automation name and a link to it. A second line shows the
-  trigger, the run time, and whose credentials the run used. The credential
-  part comes from the run's dispatch record, not the Automation's current
-  setting. It is left out when that record is gone. The run input is not from
-  a person, so it stays collapsed behind "Show prompt".
-- `TranscriptAttachments` owns wrapping for both message attachments and file
-  deliveries. `ImageAttachment` owns image previews.
-- Display text keeps Slack tokens such as `<@U123>` and `<#C123|name>`. The
-  API resolves the people in that text. It returns them as `mentions` next to
-  the object that owns the text: an event, an activity preview, a Brief, or an
-  Automation. Render this text with `TranscriptText` or `MentionText`. Both
-  require `mentions`, so a caller cannot forget them. Do not resolve names in
-  the dashboard, and do not rewrite tokens into links on the server.
-- `TranscriptTurnContextView` owns context content. A transcript with a
-  `turnContextPanel` shows the context in the page panel. See "Page panel".
-  Other transcripts, such as a subagent drawer, open a modal `Drawer`. Each
-  `Transcript` sets the panel for its own rows, so a nested transcript does not
-  use the panel of the page behind it. The panel keys context by message id,
-  so every control for one message shows the same open state.
-
-Review these components together on the mock Conversations. Run
-`JUNIOR_DASHBOARD_MOCK_CONVERSATIONS=true pnpm dev` for messages, events,
-activity, context, typing, and attachments. Keep visual checks out of automated
-assertions; browser tests cover opening, closing, and keyboard interaction.
-
-## Conversation details
-
-`ConversationPage` owns whether details are open. At 1440px and above, details
-open by default. An explicit choice lasts for the current Conversation. The page
-is keyed by the Conversation, so switching Conversations resets that choice.
-`ConversationHeader` toggles details and restores focus through explicit control
-refs after dismissal.
-
-## Page panel
-
-The Conversation page has one panel on the right. It shows Conversation
-details, event details, or turn context. Only one shows at a time. Each uses
-`DetailsPanel`: a 400px aside at 1280px and above, and a `BottomSheet` below.
-
-- Event details and turn context show in place of Conversation details.
-- When you close them, Conversation details show again if they are open. The
-  details stay open by choice or by the 1440px default.
-- A link that opens an event sets details to closed. When you close that
-  event, no panel shows.
-- The details control closes event details and turn context, then shows or
-  hides Conversation details.
-- Turn context belongs to the Conversation view. A view change closes it.
-  Select the same context control again to close it.
-- Closing a panel returns focus to the row or control that opened it.
-
-`ConversationDetails` owns one set of tabs and content. It supplies its title and
-actions to `DetailsPanel`, which uses a 400px aside at 1280px and above. The chat
-and aside scroll separately.
-Smaller windows use `BottomSheet` with a visible title and close control. The sheet and
-side drawers use the shadcn Base UI `Sheet` and share the app's document
-scroll lock. A resize changes the frame and keeps the selected tab. Tabs stay
-fixed above the scrolling content in both layouts. The sheet title and close control sit above the tabs. Use the close
-control, tap the backdrop, or press Escape to dismiss it. Base UI owns the
-transition lifecycle.
-A pending exit cannot close a new panel or a different Conversation.
-
-## Event log
-
-`ChatLayout` keeps the Conversation header outside the transcript scroll region.
-`ConversationEventLog` fills the pane without a card border or page inset. Its
-search toolbar and column labels stay together at the top while rows scroll.
-`Transcript` shares the search value with its owner, or keeps it locally when
-used alone. Event log search stays visible; the transcript search toggle is for
-the Conversation view.
-
-Rows keep time, event type, and summary in columns when the pane is at least
-512px wide. Smaller panes put the summary below time and type. Model and usage
-metadata share one optional line. Missing model metadata is omitted from rows.
-Selected rows have a background and an accent edge. Up and Down select the
-previous or next visible row while a row has focus. Selection stops at the
-ends of the filtered list. The selected row stays clear of the fixed toolbar.
-`eventLogRows` and `filterEventLogRows` own the row text and search match.
-The page uses them too, so its step controls follow the same rows.
-
-The timezone toggle uses `useEventTime` to share a UTC/local preference through
-`@uidotdev/usehooks` and browser local storage. It applies to event row clocks
-and detail timestamps. Local mode follows the browser timezone. The button uses
-a generic zone name because a log can span standard and daylight-saving time.
-Detail timestamps use a readable date to the second and the zone name for each
-event date, in both modes. The header keeps them on one line beside the
-actions. Their tooltip adds milliseconds, and the `time` element keeps the
-original ISO value. The mode, not the timezone identifier, persists across
-visits and tabs. This hook belongs to the client-rendered event viewer. Raw
-JSON retains the original ISO values.
-
-## Event details
-
-The URL owns the selected event in the main Conversation. `ConversationPage`
-places `ConversationEventDetails` beside the log in the page panel. Selecting
-another row changes the event and resets its scroll position and disclosures.
-Closing returns focus to that row. Switching Conversations removes the panel.
-
-The previous and next controls select the adjacent visible row. They form one
-`ui/button-group` named "Event navigation". They follow
-the event search, like Up and Down. They are necessary below 1280px, where the
-sheet covers the log. At the ends of the list, the control is disabled but
-keeps focus. The sheet title is the event type. The header shows the event
-type, then the sequence number and timestamp. The body groups fields in the
-same `DetailsCard` that Conversation details use. Groups inside a card, such
-as tool input and output, use a divider, not another card.
-
-A linked event can be older than the loaded pages. While the event loads, the
-panel stays open. Only its header shows placeholders, so it does not compete
-with the log. While the transcript loads, `ConversationEventLogLoading` shows
-the log toolbar, columns, and row skeletons in the event log view.
-
-Standalone transcripts, such as a subagent drawer, keep selection in
-`ConversationEventLog`. Their event details use a nested drawer on desktop and
-`BottomSheet` on smaller screens. The nested drawer stacks in front of the
-subagent drawer. The subagent drawer shows its event log without a body inset,
-so rows meet the drawer edges and the toolbar sticks to the top. This keeps the main log free of modal behavior
-while a nested transcript retains its parent drawer's focus rules. These event
-details have the same previous and next controls.
-
-`SubagentTranscriptDrawer` uses the wide `Drawer` at all widths. Below 768px
-the drawer fills the screen, so the long transcript gets the most room. Its
-header holds search, view, and copy actions. `BottomSheet` has no place for
-them.
-
-`ForkConversationButton` opens a `ui/dialog` form, not a drawer. The dialog
-stays above event details in a docked panel or a sheet. Cancel returns focus
-to the fork button. A pending fork blocks dismissal until the request ends.

package/src/client/conversations/TranscriptText.tsx

@@ -1,47 +0,0 @@
-import { memo } from "react";
-import type { ActorIdentity } from "@sentry/junior/api/schema";
-
-import { HighlightedCode } from "../code";
-import { parseMarkdownBlocks, transcriptRoleKind } from "../format";
-import { TranscriptMarkdown } from "./TranscriptMarkdown";
-import { MentionPeopleProvider } from "./transcriptMentions";
-
-/**
- * Render transcript prose as Markdown with explicit fenced code blocks.
- * `mentions` are the people that the API resolved for this text.
- */
-export const TranscriptText = memo(function TranscriptText(props: {
-  mentions: readonly ActorIdentity[];
-  role?: string;
-  text: string;
-}) {
-  const roleKind = transcriptRoleKind(props.role ?? "");
-  const blocks = parseMarkdownBlocks(props.text);
-
-  return (
-    <MentionPeopleProvider mentions={props.mentions}>
-      <div className="grid min-w-0 gap-2">
-        {blocks.map((block, index) => {
-          if (block.language === "markdown" && !block.fenced) {
-            return (
-              <TranscriptMarkdown
-                compact={roleKind === "assistant" || roleKind === "user"}
-                key={index}
-                text={block.code}
-              />
-            );
-          }
-
-          return (
-            <div
-              className="min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5"
-              key={index}
-            >
-              <HighlightedCode code={block.code} language={block.language} />
-            </div>
-          );
-        })}
-      </div>
-    </MentionPeopleProvider>
-  );
-});

package/src/client/conversations/UserInputRequestCard.tsx

@@ -1,39 +0,0 @@
-import { formatUserInputAnswer } from "@sentry/junior/api/schema";
-
-import { UserInputForm } from "../components/UserInputForm";
-import { TranscriptText } from "./TranscriptText";
-import type { OpenUserInputRequest } from "./userInputRequest";
-
-/**
- * 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;
-}) {
-  return (
-    <section
-      aria-label="Junior asks"
-      className="mb-2 rounded-lg border border-cyan-300/20 bg-cyan-300/[0.07] px-3 py-2.5 font-sans text-sm text-dashboard-text"
-    >
-      <div className="max-h-48 overflow-y-auto">
-        <TranscriptText
-          mentions={[]}
-          role="assistant"
-          text={props.request.question}
-        />
-      </div>
-      {/* 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>
-  );
-}

package/src/client/conversations/conversationActivityPreview.ts

@@ -1,16 +0,0 @@
-// Slack writes links as `<https://example.com>` or `<https://example.com|label>`.
-const SLACK_LINK_RE = /<((?:https?|mailto):[^\s|<>]+)(?:\|([^<>]*))?>/g;
-
-/** Reduce message Markdown to compact plain text for conversation previews. */
-export function formatConversationActivityPreview(text: string): string {
-  return text
-    .replace(SLACK_LINK_RE, (_, url: string, label?: string) =>
-      label?.trim() ? label.trim() : url,
-    )
-    .replace(/\[([^\]]+)\]\([^\s)]+(?:\s+"[^"]*")?\)/g, "$1")
-    .replace(/(^|\s)([*_~`]{1,3})(?=\S)/g, "$1")
-    .replace(/([*_~`]{1,3})(?=\s|$|[.,!?;:])/g, "")
-    .replace(/^\s*(?:#{1,6}|[-+*]|\d+\.)\s+/gm, "")
-    .replace(/\s+/g, " ")
-    .trim();
-}

package/src/client/conversations/transcriptMentions.tsx

@@ -1,134 +0,0 @@
-import { createContext, useContext, type ReactNode } from "react";
-import { Link } from "react-router";
-import type { ActorIdentity } from "@sentry/junior/api/schema";
-
-import { peoplePath } from "../format";
-import { cn } from "../styles";
-import { TRANSCRIPT_ANCHOR_CLASS } from "./transcriptMarkdownLinks";
-import { HighlightText } from "./transcriptSearch";
-
-type TranscriptMention = {
-  end: number;
-  id: string;
-  label?: string;
-  sigil: "@" | "#";
-  start: number;
-};
-
-// Matches the user and channel tokens that core keeps in message text.
-const SLACK_MENTION_RE = /<([@#])([A-Z0-9]+)(?:\|([^<>]*))?>/g;
-
-const TranscriptMentionPeople = createContext<
-  ReadonlyMap<string, ActorIdentity>
->(new Map());
-
-/**
- * Share the people that the API resolved for one block of display text.
- * Use `TranscriptText` or `MentionText`, which require the API mentions.
- */
-export function MentionPeopleProvider(props: {
-  children: ReactNode;
-  mentions: readonly ActorIdentity[];
-}) {
-  const people = new Map<string, ActorIdentity>();
-  for (const person of props.mentions) {
-    if (person.slackUserId) people.set(person.slackUserId, person);
-  }
-  return (
-    <TranscriptMentionPeople.Provider value={people}>
-      {props.children}
-    </TranscriptMentionPeople.Provider>
-  );
-}
-
-/** Render one line of display text with the people the API resolved for it. */
-export function MentionText(props: {
-  /**
-   * Link people to their page. Set false inside a button, which cannot hold
-   * a link.
-   */
-  links?: boolean;
-  mentions: readonly ActorIdentity[];
-  text: string;
-}) {
-  return (
-    <MentionPeopleProvider mentions={props.mentions}>
-      {renderMentionText(props.text, "mention-text", props.links)}
-    </MentionPeopleProvider>
-  );
-}
-
-/**
- * Render text with Slack `<@U123>` and `<#C123|name>` tokens as readable
- * mentions. It reads people from the nearest `MentionPeopleProvider`.
- */
-export function renderMentionText(
-  text: string,
-  keyBase: string,
-  links = true,
-): ReactNode[] {
-  const nodes: ReactNode[] = [];
-  let cursor = 0;
-  for (const mention of findMentions(text)) {
-    if (mention.start > cursor) {
-      nodes.push(
-        <HighlightText
-          key={`${keyBase}-m-${cursor}`}
-          text={text.slice(cursor, mention.start)}
-        />,
-      );
-    }
-    nodes.push(
-      <MentionView
-        key={`${keyBase}-m-${mention.start}`}
-        links={links}
-        mention={mention}
-      />,
-    );
-    cursor = mention.end;
-  }
-  if (cursor < text.length) {
-    nodes.push(
-      <HighlightText
-        key={`${keyBase}-m-${cursor}`}
-        text={text.slice(cursor)}
-      />,
-    );
-  }
-  return nodes;
-}
-
-function findMentions(text: string): TranscriptMention[] {
-  return [...text.matchAll(SLACK_MENTION_RE)].map((match) => ({
-    end: match.index + match[0].length,
-    id: match[2]!,
-    label: match[3]?.trim() || undefined,
-    sigil: match[1] as "@" | "#",
-    start: match.index,
-  }));
-}
-
-function MentionView(props: { links: boolean; mention: TranscriptMention }) {
-  const people = useContext(TranscriptMentionPeople);
-  const { id, label, sigil } = props.mention;
-  const person = sigil === "@" ? people.get(id) : undefined;
-  const name = person?.fullName ?? person?.slackUserName ?? label ?? id;
-  const text = <HighlightText text={`${sigil}${name.replace(/^[@#]/, "")}`} />;
-  if (props.links && person?.email) {
-    return (
-      <Link
-        // Previews sit in cards that disable pointer events on their text.
-        className={cn("pointer-events-auto", TRANSCRIPT_ANCHOR_CLASS)}
-        title={id}
-        to={peoplePath(person.email)}
-      >
-        {text}
-      </Link>
-    );
-  }
-  return (
-    <span className="font-medium text-dashboard-accent-text" title={id}>
-      {text}
-    </span>
-  );
-}

package/src/client/conversations/userInputRequest.ts

@@ -1,56 +0,0 @@
-import {
-  userInputRequestSchema,
-  type ConversationReportEvent,
-  type UserInputRequest,
-} from "@sentry/junior/api/schema";
-
-/** Model-facing name of Junior's tool that asks a person for input. */
-const REQUEST_USER_INPUT_TOOL_NAME = "requestUserInput";
-
-/** A request from Junior that still waits for an answer. */
-export type OpenUserInputRequest = UserInputRequest & { toolCallId: string };
-
-/**
- * Find the latest `requestUserInput` call that no user message answers yet.
- * Any later user message is the answer, whether it is a submitted form or
- * typed text.
- *
- * Reporting splits one call over events: the assistant event has the input
- * and status `running`, and the later result event has status `completed`
- * without the input. Keep the input by tool call id until the result.
- */
-export function openUserInputRequest(
-  events: readonly ConversationReportEvent[] | undefined,
-): OpenUserInputRequest | undefined {
-  const inputs = new Map<string, unknown>();
-  const completed = new Set<string>();
-  let open: OpenUserInputRequest | undefined;
-  for (const event of events ?? []) {
-    const data = event.data;
-    if (data.type === "message" && data.role === "user") {
-      open = undefined;
-      continue;
-    }
-    if (data.type !== "tool_calls") continue;
-    for (const call of data.calls) {
-      if (call.name !== REQUEST_USER_INPUT_TOOL_NAME) continue;
-      if (call.input !== undefined) inputs.set(call.toolCallId, call.input);
-      if (call.status === "error" && open?.toolCallId === call.toolCallId) {
-        open = undefined;
-      }
-      // Open a request once, when its result first arrives. A repeated
-      // result must not reopen a request that a user message answered.
-      if (call.status !== "completed" || completed.has(call.toolCallId)) {
-        continue;
-      }
-      completed.add(call.toolCallId);
-      const request = userInputRequestSchema.safeParse(
-        inputs.get(call.toolCallId),
-      );
-      if (request.success) {
-        open = { ...request.data, toolCallId: call.toolCallId };
-      }
-    }
-  }
-  return open;
-}

package/src/client/pages/automations/README.md

@@ -1,97 +0,0 @@
-# Automation editor
-
-Core owns validation, edit access, creator-only rules, revision checks,
-Schedule previews, and the Event catalog. Preview requests cannot save or run
-work. Completed scheduled Automations remain read-only.
-
-Creators and public Destination readers can edit. For a public reader, the
-editor shows outcomes as read-only and blocks turning on creator credential
-use. It warns that an instruction or event selector change switches to system
-credentials. Pause and resume stay creator-only.
-
-The editor sends only changed fields. Keep unsupported triggers and stored
-Destinations intact unless the user replaces them. Outcomes keep their order.
-New messages can target only the current Destination or the creator.
-
-Query refreshes must not replace an unsaved draft. After a stale save, the user
-can keep their changed fields or load the latest saved version. Unchanged fields
-come from that version; core checks its revision again on save.
-
-The data router blocks navigation with unsaved changes. Browser unload uses the
-native prompt. Save and Cancel return to the Automation page and keep its query
-string.
-
-Version history lists saved versions, newest first, and marks the active
-version. "Make active" uses the native confirm dialog, like delete. It then
-reads the latest revision and asks core to save that version again as a new
-version. Core applies the same edit rules, so the page
-shows its error when a public reader cannot make a version active.
-
-Browser behavior lives in `e2e/automation-editor.spec.ts`. API and persistence
-coverage lives in core's `tests/integration/api/automation-edits.test.ts`.
-
-## Automation page
-
-Each Automation has one page at `/automations/:id`. Overview, Runs, and
-Versions are tabs. They use `SecondaryNavigation`, like the repository page.
-`/automations/:id/edit` is edit mode of the Overview tab. The old
-`/executions` route redirects to `/runs` and keeps the query string. List rows
-link to the page. There is no details slideout.
-
-The page keeps the list query string. "All automations" returns to the same
-list page and filters. The back link drops params that belong to one tab:
-`result`, `run`, and `version`. One `range` param drives the Overview numbers
-and the Runs chart.
-
-The header shows the name, the state, the trigger, the Destination, and the
-creator. `AutomationStateChip` is a live region, so Pause and Resume results
-are announced. `AutomationActions` owns Edit, Pause or Resume, pause help, and
-Delete. Lifecycle actions re-read the revision before they apply. Public
-readers can edit settings. Pause, Resume, and Delete stay creator-only, so
-other viewers do not see them. The About card names the creator-only actions.
-Completed Automations have no Edit action, and `/edit` returns to Overview.
-
-Overview shows `AutomationAttention` first when something needs action: a
-block, an unavailable trigger, or a failed last run. The notice has one main
-action, such as Change trigger or Open last run. While it shows, the header
-Edit button becomes a secondary button. The saved settings follow
-in the same `AutomationFormSection` rows as the editor, so edit mode changes
-them in place. The side column shows the next trigger, the last result, runs,
-failures, and spend for the range, and About. Spend is `costUsd` from the
-Automation summary. On small screens, status comes first and About moves below
-the settings.
-
-`AutomationRecentRuns` uses the existing execution-history query and cache. It
-shows up to three newest terminal runs, links to their Conversations when one
-was recorded, and displays recorded runtime and estimated cost. It omits run
-titles that repeat the Automation name. Its loading,
-empty, and retry states do not replace Automation settings. It does not infer
-queued or running work from terminal records.
-
-In edit mode, "Your changes" lists each changed field with the saved value, the
-new value, and its own Undo. It is beside the form on wide screens and below
-the form on small screens when there are changes. Undo remounts the fields, so fields with local state show the saved value again.
-Changed sections get an accent mark. Save and Cancel return to Overview.
-
-The Runs tab filters loaded runs by result through the `result` param. Rows
-show the version that ran and the recorded error. A row opens the run details
-panel. The run list scrolls on its own beside it.
-
-The Versions tab lists versions and compares the selected one with the version
-before it. The `version` param selects a version; run details link to it.
-Changed fields show the previous value. Instruction changes use a line diff.
-
-`AutomationDeleteDialog` names the Automation before deletion. It keeps errors
-and retry inside the dialog and blocks dismissal while the request is pending.
-Cancel returns focus to Delete. Successful deletion returns to the list.
-Success toasts confirm Save, Pause, Resume, and Delete. Their state belongs to
-the mounted dashboard's Toaster provider.
-
-Browser journeys for the page live in `e2e/automations.spec.ts`. Use mock
-reporting to review scheduled and event Automations in both themes at desktop
-and mobile widths. Keep layout checks in manual QA.
-
-Filters use a shadcn Popover at 768px and above and the shared BottomSheet below
-that width. Both edit the same URL filters immediately. Active filter chips
-remove one filter without clearing search, scope, or other filters. The mobile
-sheet fits its controls instead of taking the full screen height.

package/src/client/pages/system/README.md

@@ -1,23 +0,0 @@
-# System pages
-
-## Workspaces
-
-`/system/workspaces` lists the Workspace recipes. The URL selects one recipe:
-`/system/workspaces/:id` keeps the list and opens `WorkspaceDetails` in the
-shared `DetailsPanel`. The panel is 400px wide at 1280px and above. Smaller
-screens use the bottom sheet. Repository pages link to these details.
-
-The panel shows the list item at once. The detail read adds the current
-snapshot, because the list report does not include snapshots. Snapshot loading
-and errors stay in the Snapshot row. Usage shows switches for the last 30 days.
-Workspace switch counts are daily only.
-
-Edit and Delete are in the panel header. List rows have no actions. Edit opens
-the full-page editor at `/system/workspaces/:id/edit`. Save and Cancel return to
-the details. A new Workspace opens its details after create.
-
-Close and Escape return focus to the selected row. `WorkspaceDeleteDialog`
-names the recipe, keeps errors inside the dialog, and blocks dismissal while the
-request runs. A successful delete closes the details and shows a toast.
-
-Browser coverage lives in `e2e/system.spec.ts`.