@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/components/Tooltip.tsx

@@ -1,216 +0,0 @@
-import * as HoverCard from "@radix-ui/react-hover-card";
-import {
-  type ReactElement,
-  type ReactNode,
-  type RefObject,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from "react";
-
-import { cn } from "../styles";
-
-type TooltipProps = {
-  align?: "center" | "left" | "right";
-  children: ReactElement;
-  className?: string;
-  content: ReactNode;
-  focusable?: boolean;
-  label?: ReactNode;
-  placement?: "above" | "below";
-  triggerClassName?: string;
-};
-
-const VIEWPORT_GAP = 8;
-const ANCHOR_GAP = 10;
-const CLOSE_DELAY_MS = 150;
-const TOOLTIP_MEDIA_QUERY =
-  "(min-width: 768px) and (hover: hover) and (pointer: fine)";
-
-/** SVG hosts cannot wrap triggers in an HTML span without collapsing geometry. */
-const SVG_TRIGGER_TAGS = new Set([
-  "circle",
-  "ellipse",
-  "g",
-  "line",
-  "path",
-  "polygon",
-  "polyline",
-  "rect",
-  "svg",
-  "text",
-]);
-
-function isSvgTrigger(element: ReactElement): boolean {
-  return typeof element.type === "string" && SVG_TRIGGER_TAGS.has(element.type);
-}
-
-/** Show selectable dashboard details beside an element. */
-export function Tooltip({
-  align = "center",
-  children,
-  className,
-  content,
-  focusable = false,
-  label,
-  placement = "above",
-  triggerClassName,
-}: TooltipProps) {
-  const tooltipId = useId();
-  const rootRef = useRef<Element | null>(null);
-  const touchStartedOpenRef = useRef<boolean | null>(null);
-  const suppressOpenUntilRef = useRef(0);
-  const [open, setOpen] = useState(false);
-  const [available, setAvailable] = useState(() =>
-    typeof window === "undefined"
-      ? false
-      : window.matchMedia(TOOLTIP_MEDIA_QUERY).matches,
-  );
-  const svgTrigger = isSvgTrigger(children);
-
-  useEffect(() => {
-    const media = window.matchMedia(TOOLTIP_MEDIA_QUERY);
-    const syncAvailable = () => {
-      setAvailable(media.matches);
-      if (!media.matches) setOpen(false);
-    };
-    syncAvailable();
-    media.addEventListener("change", syncAvailable);
-    return () => media.removeEventListener("change", syncAvailable);
-  }, []);
-
-  useEffect(() => {
-    if (!open) return;
-    const onPointerDown = (event: PointerEvent) => {
-      const root = rootRef.current;
-      const target = event.target;
-      if (!(target instanceof Node)) return;
-      // Keep interactions inside the trigger or content from auto-closing.
-      if (root?.contains(target)) return;
-      const contentNode = document.getElementById(tooltipId);
-      if (contentNode?.contains(target)) return;
-      suppressOpenUntilRef.current = performance.now() + CLOSE_DELAY_MS + 50;
-      setOpen(false);
-    };
-    document.addEventListener("pointerdown", onPointerDown, true);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown, true);
-    };
-  }, [open, tooltipId]);
-
-  // Keep chart/layout wrappers even when tooltips are off.
-  if (!available) {
-    if (svgTrigger) return children;
-    return (
-      <span className={cn("inline-flex", triggerClassName)}>{children}</span>
-    );
-  }
-
-  const card = (
-    <HoverCard.Root
-      closeDelay={CLOSE_DELAY_MS}
-      onOpenChange={(nextOpen) => {
-        // Touch toggle/outside close can race HoverCard's hover reopen.
-        if (nextOpen && performance.now() < suppressOpenUntilRef.current) {
-          return;
-        }
-        setOpen(nextOpen);
-      }}
-      open={open}
-      openDelay={0}
-    >
-      <HoverCard.Trigger
-        aria-describedby={open ? tooltipId : undefined}
-        asChild
-        onBlur={focusable ? () => setOpen(false) : undefined}
-        onFocus={focusable ? () => setOpen(true) : undefined}
-        onPointerCancel={() => {
-          touchStartedOpenRef.current = null;
-        }}
-        onPointerDown={(event) => {
-          if (event.pointerType === "touch") {
-            touchStartedOpenRef.current = open;
-          }
-        }}
-        onPointerUp={(event) => {
-          if (
-            event.pointerType !== "touch" ||
-            touchStartedOpenRef.current === null
-          ) {
-            return;
-          }
-          const nextOpen = !touchStartedOpenRef.current;
-          if (!nextOpen) {
-            suppressOpenUntilRef.current =
-              performance.now() + CLOSE_DELAY_MS + 50;
-          }
-          setOpen(nextOpen);
-          touchStartedOpenRef.current = null;
-        }}
-        ref={
-          svgTrigger
-            ? (node) => {
-                rootRef.current = node;
-              }
-            : undefined
-        }
-      >
-        {children}
-      </HoverCard.Trigger>
-      <HoverCard.Portal>
-        <HoverCard.Content
-          align={
-            align === "left" ? "start" : align === "right" ? "end" : "center"
-          }
-          className={cn(
-            "z-50 select-text outline-none",
-            className ??
-              "min-w-36 max-w-lg rounded-md border border-dashboard-border-emphasis bg-dashboard-surface-raised px-3 py-2 font-sans text-xs leading-relaxed text-dashboard-text-muted shadow-2xl shadow-black/70",
-          )}
-          collisionPadding={VIEWPORT_GAP}
-          hideWhenDetached
-          id={tooltipId}
-          role="tooltip"
-          side={placement === "above" ? "top" : "bottom"}
-          sideOffset={ANCHOR_GAP}
-        >
-          {label ? (
-            <div className="mb-1 font-semibold text-dashboard-text-muted">
-              {label}
-            </div>
-          ) : null}
-          {content}
-        </HoverCard.Content>
-      </HoverCard.Portal>
-    </HoverCard.Root>
-  );
-
-  if (svgTrigger) return card;
-
-  return (
-    <span
-      className={cn("inline-flex", triggerClassName)}
-      ref={rootRef as RefObject<HTMLSpanElement | null>}
-    >
-      {card}
-    </span>
-  );
-}
-
-/** Compact label tooltip for icon-only controls such as header actions. */
-export function IconButtonTooltip(props: {
-  children: ReactElement;
-  label: string;
-  placement?: "above" | "below";
-}) {
-  return (
-    <Tooltip
-      className="min-w-0 rounded-md border border-dashboard-border-emphasis bg-dashboard-surface-raised px-2.5 py-1.5 font-sans text-xs leading-none text-dashboard-text shadow-2xl shadow-black/70"
-      content={props.label}
-      placement={props.placement ?? "above"}
-    >
-      <span className="inline-flex">{props.children}</span>
-    </Tooltip>
-  );
-}

package/src/client/components/charts/useChartLayout.ts

@@ -1,27 +0,0 @@
-import { useLayoutEffect, useRef, useState } from "react";
-import { createActivityChartLayout } from "./ActivityChart";
-
-/** Keep chart height and label spacing fixed as its container width changes. */
-export function useChartLayout(height: number, left = 64) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [width, setWidth] = useState(400);
-  useLayoutEffect(() => {
-    const container = ref.current;
-    if (!container) return;
-    const observer = new ResizeObserver(([entry]) => {
-      if (entry && entry.contentRect.width > 0)
-        setWidth(entry.contentRect.width);
-    });
-    observer.observe(container);
-    return () => observer.disconnect();
-  }, []);
-  return {
-    ref,
-    layout: createActivityChartLayout(height, {
-      width,
-      left,
-      top: 18,
-      bottom: 28,
-    }),
-  };
-}

package/src/client/components/ui/sheet.LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 shadcn
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/src/client/conversations/ConversationDetailsFrame.tsx

@@ -1,119 +0,0 @@
-import { X } from "lucide-react";
-import {
-  useEffect,
-  useId,
-  useRef,
-  useSyncExternalStore,
-  type ReactNode,
-} from "react";
-
-import { Button } from "../components/Button";
-import { BottomSheet } from "../components/BottomSheet";
-
-const panelMediaQuery = "(min-width: 1280px)";
-// Open details by default only when the chat column stays wide beside them.
-const defaultOpenMediaQuery = "(min-width: 1440px)";
-
-function useMediaQuery(query: string): boolean {
-  return useSyncExternalStore(
-    (onChange) => {
-      const media = window.matchMedia(query);
-      media.addEventListener("change", onChange);
-      return () => media.removeEventListener("change", onChange);
-    },
-    () => window.matchMedia(query).matches,
-    () => false,
-  );
-}
-
-/**
- * Report whether the viewport has room to show details as a panel beside the
- * chat. Narrower viewports show details in a bottom sheet.
- */
-export function useConversationDetailsPanel(): boolean {
-  return useMediaQuery(panelMediaQuery);
-}
-
-/** Report whether details should open beside the chat without a request. */
-export function useConversationDetailsDefaultOpen(): boolean {
-  return useMediaQuery(defaultOpenMediaQuery);
-}
-
-/** Keep details beside the chat when space permits, or in a modal bottom sheet. */
-export function ConversationDetailsFrame(props: {
-  actions?: ReactNode;
-  children: ReactNode;
-  onClose(): void;
-}) {
-  const titleId = useId();
-  const panel = useConversationDetailsPanel();
-  const closeRef = useRef<HTMLButtonElement>(null);
-  const wasPanel = useRef(panel);
-  useEffect(() => {
-    if (
-      panel &&
-      !wasPanel.current &&
-      !document.querySelector("[data-dashboard-modal]")
-    ) {
-      closeRef.current?.focus({ preventScroll: true });
-    }
-    wasPanel.current = panel;
-  }, [panel]);
-  if (!panel) {
-    return (
-      <BottomSheet label="Conversation details" onClose={props.onClose}>
-        {props.children}
-        {/* After the tabs, so the sheet still opens with the first tab focused. */}
-        {props.actions ? (
-          <div className="flex justify-end gap-1 border-t border-dashboard-border px-4 py-2">
-            {props.actions}
-          </div>
-        ) : null}
-      </BottomSheet>
-    );
-  }
-
-  return (
-    <aside
-      aria-labelledby={titleId}
-      className="grid min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)] border-l border-dashboard-border bg-dashboard-bg-elevated"
-      onKeyDown={(event) => {
-        if (
-          event.key === "Escape" &&
-          !event.defaultPrevented &&
-          !document.querySelector("[data-dashboard-modal]")
-        ) {
-          event.preventDefault();
-          props.onClose();
-        }
-      }}
-    >
-      <header className="flex items-center justify-between gap-3 border-b border-dashboard-border py-2 pl-5 pr-3">
-        {/* Keep actions beside the title. The panel opens under the pointer
-            that clicked the chat's Details button, so that corner holds only
-            Close. */}
-        <div className="flex min-w-0 items-center gap-3">
-          <h2
-            aria-label="Conversation details"
-            className="m-0 text-base font-semibold text-dashboard-text"
-            id={titleId}
-          >
-            Details
-          </h2>
-          {props.actions ? (
-            <div className="flex items-center gap-0.5">{props.actions}</div>
-          ) : null}
-        </div>
-        <Button
-          ref={closeRef}
-          aria-label="Close conversation details"
-          onClick={props.onClose}
-          size="icon"
-        >
-          <X aria-hidden="true" size={15} />
-        </Button>
-      </header>
-      <div className="min-h-0">{props.children}</div>
-    </aside>
-  );
-}

package/src/client/conversations/CopyMarkdownButton.tsx

@@ -1,65 +0,0 @@
-import { useState } from "react";
-import { Check, Copy } from "lucide-react";
-
-import { Button } from "../components/Button";
-import { IconButtonTooltip } from "../components/Tooltip";
-
-/** Copy an available Markdown document while exposing clipboard result state. */
-export function CopyMarkdownButton(props: {
-  getMarkdown?: () => Promise<string> | string;
-  /** `menu` shows icon + label for mobile overflow lists. */
-  layout?: "icon" | "menu";
-}) {
-  const [status, setStatus] = useState<
-    "copied" | "copying" | "failed" | "idle"
-  >("idle");
-  const label =
-    status === "copied"
-      ? "Copied"
-      : status === "copying"
-        ? "Preparing Markdown"
-        : status === "failed"
-          ? "Copy failed"
-          : "Copy as Markdown";
-  const Icon = status === "copied" ? Check : Copy;
-
-  async function copyMarkdown() {
-    if (!props.getMarkdown) return;
-
-    try {
-      setStatus("copying");
-      await navigator.clipboard.writeText(await props.getMarkdown());
-      setStatus("copied");
-    } catch {
-      setStatus("failed");
-    }
-  }
-
-  if (props.layout === "menu") {
-    return (
-      <button
-        aria-label={label}
-        className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-        disabled={!props.getMarkdown || status === "copying"}
-        onClick={() => void copyMarkdown()}
-        type="button"
-      >
-        <Icon aria-hidden="true" size={16} strokeWidth={2} />
-        <span>{label}</span>
-      </button>
-    );
-  }
-
-  return (
-    <IconButtonTooltip label={label}>
-      <Button
-        aria-label={label}
-        disabled={!props.getMarkdown || status === "copying"}
-        onClick={() => void copyMarkdown()}
-        size="icon"
-      >
-        <Icon aria-hidden="true" size={15} strokeWidth={2} />
-      </Button>
-    </IconButtonTooltip>
-  );
-}

package/src/client/pages/automations/AutomationDetailsDrawer.tsx

@@ -1,219 +0,0 @@
-import { AutomationLifecycle } from "./AutomationLifecycle";
-import { automationOutcomeLabel } from "./automationOutcomes";
-import {
-  automationEventConditions,
-  automationEventNames,
-  automationScheduleLabel,
-  formatAutomationRunTime,
-} from "./automationFormat";
-import type { AutomationSummary } from "@sentry/junior/api/schema";
-import { Link, useLocation } from "react-router";
-import { Detail, DetailList } from "../../components/DetailList";
-import { Drawer } from "../../components/Drawer";
-import {
-  timeRangeLabel,
-  type TimeRangeDays,
-} from "../../components/controls/TimeRangeSelector";
-import { conversationPath } from "../../conversations/conversationRoutes";
-import { formatTime, peoplePath } from "../../format";
-import { TranscriptText } from "../../conversations/TranscriptText";
-import { cn, dashboardInlineLinkClass } from "../../styles";
-
-/** Show one automation's instruction and metadata in a right-side slide-out. */
-export function AutomationDetailsDrawer(props: {
-  onClose(): void;
-  range: TimeRangeDays;
-  automation: AutomationSummary | undefined;
-}) {
-  const location = useLocation();
-  if (!props.automation) return null;
-
-  const { automation } = props;
-  const createdBy = automation.createdByEmail ? (
-    <Link
-      className={cn("font-semibold", dashboardInlineLinkClass)}
-      to={peoplePath(automation.createdByEmail)}
-    >
-      {automation.ownedByViewer ? "you" : automation.createdBy}
-    </Link>
-  ) : automation.ownedByViewer ? (
-    "you"
-  ) : (
-    automation.createdBy
-  );
-  const conditions =
-    automation.kind === "event" ? automationEventConditions(automation) : "";
-  const details =
-    automation.kind === "scheduled"
-      ? [
-          { label: "Schedule", value: automationScheduleLabel(automation) },
-          {
-            label: "Next run",
-            value:
-              automation.status === "active" && automation.nextRunAt
-                ? formatAutomationRunTime(automation.nextRunAt)
-                : "None",
-          },
-        ]
-      : [
-          { label: "Watching", value: automation.resource },
-          { label: "Events", value: automationEventNames(automation) },
-          ...(conditions ? [{ label: "Conditions", value: conditions }] : []),
-        ];
-  const titleId = "automation-details-drawer-title";
-
-  return (
-    <Drawer
-      closeLabel="Close automation details"
-      header={
-        <>
-          <h2
-            className="m-0 font-display text-lg font-medium tracking-normal text-dashboard-text"
-            id={titleId}
-          >
-            {automation.title}
-          </h2>
-          <div className="mt-1 break-words text-sm text-dashboard-text-muted">
-            Created by {createdBy} · {automation.destination.label}
-          </div>
-        </>
-      }
-      onClose={props.onClose}
-      openKey={`${automation.kind}:${automation.id}`}
-      titleId={titleId}
-    >
-      <section className="grid gap-5">
-        <div>
-          <h3 className="mt-0 mb-2 text-sm font-medium text-dashboard-text-muted">
-            What to do
-          </h3>
-          <TranscriptText
-            mentions={automation.mentions ?? []}
-            text={automation.instruction}
-          />
-        </div>
-        <AutomationLifecycle
-          key={`${automation.kind}:${automation.id}`}
-          automation={automation}
-          editPath={`/automations/${encodeURIComponent(automation.id)}/edit${location.search}`}
-        />
-        <DetailList>
-          {details.map((detail) => (
-            <Detail key={detail.label} label={detail.label}>
-              {detail.value}
-            </Detail>
-          ))}
-          <Detail label="On success">
-            {automation.outcomes.length === 0 ? (
-              "No message on success"
-            ) : (
-              <ol className="m-0 pl-4">
-                {automation.outcomes.map((outcome, index) => (
-                  <li key={index}>
-                    {automationOutcomeLabel(outcome, automation.destination)}
-                  </li>
-                ))}
-              </ol>
-            )}
-          </Detail>
-        </DetailList>
-        <div className="flex flex-wrap gap-x-5">
-          {automation.totalRuns > 0 &&
-          automation.lastRunStatus !== "failed" &&
-          automation.lastRunStatus !== "blocked" ? (
-            <Link
-              className="w-fit py-2 text-sm text-dashboard-text underline underline-offset-2"
-              to={`/automations/${encodeURIComponent(automation.id)}/executions`}
-            >
-              View all runs
-            </Link>
-          ) : null}
-          <Link
-            className="w-fit py-2 text-sm text-dashboard-text underline underline-offset-2"
-            to={`/automations/${encodeURIComponent(automation.id)}/versions${location.search}`}
-          >
-            Version history
-          </Link>
-        </div>
-        <details>
-          <summary className="cursor-pointer py-3 text-sm text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline focus-visible:outline-dashboard-focus">
-            More details
-          </summary>
-          <DetailList>
-            <Detail label="Connected accounts">
-              {automation.credentialMode === "creator" ? (
-                <>
-                  Uses accounts connected by{" "}
-                  {automation.ownedByViewer ? "you" : automation.createdBy}.
-                </>
-              ) : (
-                "Junior’s accounts only"
-              )}
-            </Detail>
-            <Detail label="Created">{formatDate(automation.createdAt)}</Detail>
-            <Detail label="Run history">
-              <AutomationExecutionSummary
-                range={props.range}
-                automation={automation}
-              />
-            </Detail>
-          </DetailList>
-        </details>
-      </section>
-    </Drawer>
-  );
-}
-
-function AutomationExecutionSummary(props: {
-  range: TimeRangeDays;
-  automation: Pick<
-    AutomationSummary,
-    "id" | "kind" | "lastConversationId" | "lastRunAt" | "runs" | "totalRuns"
-  >;
-}) {
-  const { range, automation } = props;
-  const runCount = automation.runs[range];
-  const rangeLabel = timeRangeLabel(range);
-  const executionsPath = `/automations/${encodeURIComponent(automation.id)}/executions`;
-  return (
-    <div className="text-sm text-dashboard-text-muted">
-      {automation.totalRuns > 0 ? (
-        <Link className={dashboardInlineLinkClass} to={executionsPath}>
-          {runCount} runs / {rangeLabel}
-        </Link>
-      ) : (
-        <span className="text-dashboard-text">
-          {runCount} runs / {rangeLabel}
-        </span>
-      )}
-      <span className="mx-2 opacity-45">·</span>
-      <span>
-        {automation.totalRuns > 0 ? (
-          <Link className={dashboardInlineLinkClass} to={executionsPath}>
-            {automation.totalRuns} total
-          </Link>
-        ) : (
-          <>{automation.totalRuns} total</>
-        )}
-        {automation.lastRunAt ? " · Last run " : " · Never run"}
-        {automation.lastRunAt && automation.lastConversationId ? (
-          <Link
-            className={dashboardInlineLinkClass}
-            to={conversationPath(automation.lastConversationId)}
-          >
-            {formatAutomationRunTime(automation.lastRunAt)}
-          </Link>
-        ) : automation.lastRunAt ? (
-          formatAutomationRunTime(automation.lastRunAt)
-        ) : null}
-      </span>
-    </div>
-  );
-}
-
-function formatDate(value: string): string {
-  return formatTime(value, {
-    dateStyle: "medium",
-    timeStyle: "short",
-  });
-}