@sentry/junior-dashboard 0.233.0 → 0.235.0

package/src/client/api.ts

@@ -6,6 +6,7 @@ import {
   conversationStatsReportSchema,
   codeOverviewReportSchema,
   codePersonReportSchema,
+  codeRepositoryReportSchema,
   statsReportSchema,
 } from "@sentry/junior/api/schema";
 import {
@@ -16,6 +17,7 @@ import {
   personalSpendReportSchema,
   automationExecutionListSchema,
   automationListSchema,
+  automationSummarySchema,
   automationRunListSchema,
 } from "@sentry/junior/api/schema";
 import {
@@ -114,6 +116,48 @@ export function useCodeOverviewData() {
   });
 }
 
+/** Fetch code activity, recent changes, and Workspaces for one repository. */
+export function useCodeRepositoryData(repositoryId: string | undefined) {
+  return useQuery({
+    enabled: Boolean(repositoryId),
+    queryKey: ["dashboard", "code", "repositories", repositoryId],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        codeRepositoryReportSchema,
+        `/api/code/repositories/${encodeURIComponent(repositoryId!)}`,
+        signal,
+      ),
+    retry: false,
+  });
+}
+
+/** Fetch conversations linked to one repository through its code changes. */
+export function useCodeRepositoryConversationsData(
+  repositoryId: string | undefined,
+  search = "",
+) {
+  return useQuery({
+    enabled: Boolean(repositoryId),
+    queryKey: [
+      "dashboard",
+      "conversations",
+      "code-repository",
+      { repositoryId, search },
+    ],
+    queryFn: ({ signal }) => {
+      const params = new URLSearchParams({ codeRepositoryId: repositoryId! });
+      if (search) params.set("q", search);
+      return fetchDashboardJson(
+        conversationFeedSchema,
+        `/api/conversations?${params.toString()}`,
+        signal,
+      );
+    },
+    placeholderData: keepPreviousData,
+    retry: false,
+  });
+}
+
 /** Fetch the signed-in viewer's scheduled and event automations. */
 export function useAutomationsData(enabled: boolean, search: string) {
   return useQuery({
@@ -122,7 +166,7 @@ export function useAutomationsData(enabled: boolean, search: string) {
     queryFn: ({ signal }) =>
       fetchDashboardJson(
         automationListSchema,
-        `/api/automations${search ? `?q=${encodeURIComponent(search)}` : ""}`,
+        `/api/automations${search ? `?${search}` : ""}`,
         signal,
       ),
     placeholderData: keepPreviousData,
@@ -130,6 +174,21 @@ export function useAutomationsData(enabled: boolean, search: string) {
   });
 }
 
+/** Load details by ID, independent of list filters and pagination. */
+export function useAutomationData(enabled: boolean, id: string | undefined) {
+  return useQuery({
+    enabled: enabled && Boolean(id),
+    queryKey: ["dashboard", "automations", "detail", id],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        automationSummarySchema,
+        `/api/automations/${encodeURIComponent(id!)}`,
+        signal,
+      ),
+    retry: false,
+  });
+}
+
 /** Fetch newest runs across all viewer-visible automations. */
 export function useAutomationRunsData(enabled: boolean) {
   return useQuery({

package/src/client/components/ActorAvatar.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { cn } from "../styles";
+
+/** Show an actor's image, with initials when the image is missing or fails. */
+export function ActorAvatar(props: {
+  name: string;
+  imageUrl?: string;
+  size: "detail" | "list";
+}) {
+  const [failedUrl, setFailedUrl] = useState<string>();
+  const words = props.name.trim().split(/\s+/).filter(Boolean);
+  const initials =
+    words.length > 1
+      ? `${words[0]![0]}${words.at(-1)![0]}`
+      : props.name.slice(0, 2);
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "relative inline-grid shrink-0 place-items-center overflow-hidden rounded-full border-2 border-dashboard-bg bg-dashboard-focus font-sans font-bold leading-none text-dashboard-text-inverse shadow-sm",
+        props.size === "list" ? "size-6 text-2xs" : "size-7 text-xs",
+      )}
+    >
+      {initials.toUpperCase()}
+      {props.imageUrl && props.imageUrl !== failedUrl ? (
+        <img
+          alt=""
+          className="absolute inset-0 size-full object-cover"
+          loading="lazy"
+          onError={() => setFailedUrl(props.imageUrl)}
+          referrerPolicy="no-referrer"
+          src={props.imageUrl}
+        />
+      ) : null}
+    </span>
+  );
+}

package/src/client/components/Button.tsx

@@ -4,7 +4,7 @@ import { Link, type LinkProps } from "react-router";
 import { cn } from "../styles";
 
 type ButtonSize = "default" | "icon";
-type ButtonTone = "default" | "danger";
+type ButtonTone = "default" | "danger" | "primary";
 type ToggleButtonVariant = "pill" | "segment" | "text";
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -44,15 +44,17 @@ export function Button({
                 ? "text-dashboard-text-muted hover:!bg-rose-300/10 hover:!text-rose-300 focus-visible:outline-rose-300/55 disabled:hover:!text-dashboard-text-muted"
                 : "text-dashboard-text-muted hover:!bg-dashboard-fill-strong hover:!text-dashboard-text focus-visible:outline-cyan-300/55 disabled:hover:!text-dashboard-text-muted",
             )
-          : isDanger
-            ? cn(
-                dangerButtonClassName,
-                "disabled:hover:border-dashboard-border-strong disabled:hover:text-dashboard-text-muted",
-              )
-            : cn(
-                buttonClassName,
-                "disabled:hover:border-dashboard-border-emphasis disabled:hover:bg-dashboard-surface-raised disabled:hover:text-dashboard-text",
-              ),
+          : tone === "primary"
+            ? "inline-flex h-9 items-center justify-center gap-2 rounded border border-dashboard-text-solid bg-dashboard-text-solid px-3 font-sans text-sm font-semibold text-dashboard-text-inverse hover:bg-dashboard-text-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
+            : isDanger
+              ? cn(
+                  dangerButtonClassName,
+                  "disabled:hover:border-dashboard-border-strong disabled:hover:text-dashboard-text-muted",
+                )
+              : cn(
+                  buttonClassName,
+                  "disabled:hover:border-dashboard-border-emphasis disabled:hover:bg-dashboard-surface-raised disabled:hover:text-dashboard-text",
+                ),
         props.disabled ? "" : "cursor-pointer",
         className,
       )}

package/src/client/components/Field.tsx

@@ -20,6 +20,7 @@ export function Field(props: {
   children: ReactNode;
   className?: string;
   help?: ReactNode;
+  error?: string;
   htmlFor?: string;
   label: ReactNode;
   size?: FieldSize;
@@ -31,8 +32,20 @@ export function Field(props: {
         {props.label}
       </label>
       {props.children}
+      {props.error ? (
+        <p
+          id={props.htmlFor ? `${props.htmlFor}-error` : undefined}
+          role="alert"
+          className="m-0 text-xs leading-relaxed text-rose-300"
+        >
+          {props.error}
+        </p>
+      ) : null}
       {props.help ? (
-        <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted sm:text-sm">
+        <p
+          id={props.htmlFor ? `${props.htmlFor}-help` : undefined}
+          className="m-0 text-xs leading-relaxed text-dashboard-text-muted sm:text-sm"
+        >
           {props.help}
         </p>
       ) : null}

package/src/client/components/FormNotice.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { TriangleAlert } from "lucide-react";
+import { cn } from "../styles";
+
+/** Keep form recovery text and actions visible without truncation. */
+export function FormNotice(props: {
+  title: string;
+  children?: ReactNode;
+  tone?: "error" | "warning";
+}) {
+  const error = props.tone === "error";
+  return (
+    <div
+      role={error ? "alert" : "status"}
+      className={cn(
+        "flex min-w-0 gap-3 rounded-md border p-4",
+        error
+          ? "border-rose-300/25 bg-rose-300/5"
+          : "border-amber-300/25 bg-amber-300/5",
+      )}
+    >
+      <TriangleAlert
+        aria-hidden
+        size={18}
+        className={cn(
+          "mt-0.5 shrink-0",
+          error ? "text-rose-300" : "text-amber-300",
+        )}
+      />
+      <div className="min-w-0">
+        <p className="m-0 text-sm font-medium">{props.title}</p>
+        {props.children ? (
+          <div className="mt-1 text-sm leading-relaxed text-dashboard-text-muted">
+            {props.children}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/client/components/ParticipantAvatarStack.tsx

@@ -3,6 +3,7 @@ import type { ActorIdentity } from "@sentry/junior/api/schema";
 import { actorLabel } from "../format";
 import { cn } from "../styles";
 import type { Conversation } from "../types";
+import { ActorAvatar } from "./ActorAvatar";
 import { Tooltip } from "./Tooltip";
 
 const MAX_VISIBLE_PARTICIPANTS = 3;
@@ -28,15 +29,6 @@ function participantDescription(participant: ActorIdentity): string {
   return email && email !== name ? `${name}, ${email}` : name;
 }
 
-function participantInitials(participant: ActorIdentity): string {
-  const name = participantName(participant);
-  const words = name.split(/\s+/).filter(Boolean);
-  if (words.length > 1) {
-    return `${words[0]![0] ?? ""}${words.at(-1)?.[0] ?? ""}`.toUpperCase();
-  }
-  return name.slice(0, 2).toUpperCase();
-}
-
 function participantKey(participant: ActorIdentity, index: number): string {
   return (
     participant.email?.trim().toLowerCase() ||
@@ -72,14 +64,14 @@ function Avatar(props: {
     >
       <span
         aria-label={label}
-        className={cn(
-          "relative inline-grid shrink-0 place-items-center rounded-full border-2 border-dashboard-bg bg-dashboard-focus font-sans font-bold leading-none text-dashboard-text-inverse shadow-sm focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus",
-          props.size === "list" ? "size-6 text-2xs" : "size-7 text-xs",
-        )}
+        className="relative inline-flex rounded-full focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
         onKeyDown={(event) => event.stopPropagation()}
         tabIndex={0}
       >
-        {participantInitials(props.participant)}
+        <ActorAvatar
+          name={participantName(props.participant)}
+          size={props.size}
+        />
       </span>
     </Tooltip>
   );

package/src/client/components/README.md

@@ -6,15 +6,21 @@ instead of copying Tailwind blocks.
 ## Layers
 
 1. **Primitives** — `Button` / `ToggleButton`, `Field`, `TextInput`,
-   `StatusChip`, `StatusDot`, `Notice`, `Drawer`, `Tooltip`, `Skeleton`,
-   `PageContentSkeleton`, `SegmentedTabs`, and other small reusable controls.
-   Use `SegmentedTabs` for equal-width panel navigation. Pass the selected value,
-   items, change handler, and selected panel content. It owns tab/panel labels
-   and keyboard focus. Keep collection filters in `FilterTabList`. Prefer
+   `StatusChip`, `StatusDot`, `Notice`, `FormNotice`, `Select`, `Drawer`, `Tooltip`, `Skeleton`,
+   `PageContentSkeleton`, `SegmentedTabs`, `SegmentedNav`, and other small reusable controls.
+   Use the segmented pill track to pick one of a few siblings. Use
+   `SegmentedTabs` to switch panels in place. Pass the selected value, items,
+   change handler, and selected panel content. It owns tab/panel labels and
+   keyboard focus. Use `SegmentedNav` for links between sibling pages. With
+   `fill`, links share the row width equally while their labels fit. Otherwise
+   each link keeps its label width. Rows that do not fit scroll sideways. Keep
+   collection filters in `FilterTabList`. Prefer
    `ToggleButton` variants (`pill`, `segment`, `text`) over one-off pressed
    styles. Prefer `Field` sizes (`default`, `compact`) over handwritten labels.
    Prefer `StatusDot` for dense table or list status markers and `StatusChip`
-   when the label itself must stay visible. Prefer `PageContentSkeleton`
+   when the label itself must stay visible. `StatusChip` uses a small dot and
+   sentence-case text, without a border, fill, or all-caps styling. It is not
+   an interactive control. Prefer `PageContentSkeleton`
    variants over ad-hoc pulse blocks in route modules. Use `PageRouteLoading`
    when a standard page must keep its real header above a body skeleton. Use a
    feature-owned loading component for distinct geometry, such as conversations.
@@ -54,3 +60,10 @@ instead of copying Tailwind blocks.
 - One-off page glue may stay inline when extraction only adds indirection.
 
 See `policies/frontend-components.md`.
+
+Use `TextInput size="comfortable"` for larger mobile form controls.
+Form pages use `Button tone="primary"` for their one main save action. Use
+`TextArea prose` for instructions rather than code. `Field error` renders an
+error at `<htmlFor>-error`; the owning control must set `aria-invalid` and
+`aria-describedby`. `Select` matches native text controls. Use `FormNotice` for
+wrapping form recovery text; use `Notice` for compact transient messages.

package/src/client/components/SegmentedNav.tsx

@@ -0,0 +1,167 @@
+import { useLayoutEffect, useRef, useState, type CSSProperties } from "react";
+import { Link, NavLink, useLocation } from "react-router";
+
+import { pathWithSearch } from "../searchParams";
+import {
+  segmentedTabClass,
+  segmentedTabsFrameClass,
+  segmentedTabsInsetClass,
+} from "./SegmentedTabs";
+import { cn } from "../styles";
+
+export type SegmentedNavItem = {
+  end?: boolean;
+  /** Override default NavLink matching when a path family should stay active. */
+  isActive?: (pathname: string) => boolean;
+  label: string;
+  to: string;
+};
+
+/** Link to a sibling page and keep page filters (range, scope, q). */
+export function SiblingPageLink(props: {
+  className: (state: { isActive: boolean }) => string;
+  item: SegmentedNavItem;
+}) {
+  const { className, item } = props;
+  const location = useLocation();
+  const to = pathWithSearch(item.to, location.search);
+  if (item.isActive) {
+    const isActive = item.isActive(location.pathname);
+    return (
+      <Link
+        aria-current={isActive ? "page" : undefined}
+        className={className({ isActive })}
+        to={to}
+      >
+        {item.label}
+      </Link>
+    );
+  }
+
+  return (
+    <NavLink className={className} end={item.end} to={to}>
+      {item.label}
+    </NavLink>
+  );
+}
+
+/** Width of the fade on an edge that hides more links. */
+const EDGE_FADE_PX = 24;
+
+type HiddenEdges = { end: boolean; start: boolean };
+
+function hiddenEdges(row: HTMLElement): HiddenEdges {
+  const maxScroll = row.scrollWidth - row.clientWidth;
+  return {
+    end: row.scrollLeft < maxScroll - 1,
+    start: row.scrollLeft > 1,
+  };
+}
+
+/** Scroll the current page link into view when the row or a fade covers it. */
+function revealCurrentLink(row: HTMLElement) {
+  const link = row.querySelector<HTMLElement>('[aria-current="page"]');
+  if (!link || row.clientWidth === 0) return;
+  const edges = hiddenEdges(row);
+  const visibleStart = row.scrollLeft + (edges.start ? EDGE_FADE_PX : 0);
+  const visibleEnd =
+    row.scrollLeft + row.clientWidth - (edges.end ? EDGE_FADE_PX : 0);
+  const start = link.offsetLeft;
+  const end = start + link.offsetWidth;
+  if (start >= visibleStart && end <= visibleEnd) return;
+  // scrollIntoView can also scroll the page, so set scrollLeft on the row.
+  row.scrollLeft = start - (row.clientWidth - link.offsetWidth) / 2;
+}
+
+/** Fade each edge of the row that hides more links. */
+function edgeFade(edges: HiddenEdges): CSSProperties | undefined {
+  if (!edges.start && !edges.end) return undefined;
+  const fade = `${EDGE_FADE_PX}px`;
+  const start = edges.start ? `transparent, black ${fade}` : "black";
+  const end = edges.end ? `black calc(100% - ${fade}), transparent` : "black";
+  const mask = `linear-gradient(to right, ${start}, ${end})`;
+  return { maskImage: mask, WebkitMaskImage: mask };
+}
+
+/**
+ * Show links between sibling pages in the segmented pill track.
+ *
+ * With `fill`, links share the row width equally while their labels fit.
+ * Otherwise each link keeps its label width. When the links do not fit, the
+ * row scrolls sideways and fades the edge that hides more links.
+ */
+export function SegmentedNav(props: {
+  ariaLabel: string;
+  fill?: boolean;
+  items: readonly SegmentedNavItem[];
+}) {
+  const { pathname } = useLocation();
+  const rowRef = useRef<HTMLDivElement>(null);
+  const [edges, setEdges] = useState<HiddenEdges>({
+    end: false,
+    start: false,
+  });
+
+  useLayoutEffect(() => {
+    const row = rowRef.current;
+    if (!row) return;
+    const updateEdges = () => {
+      const { end, start } = hiddenEdges(row);
+      setEdges((previous) =>
+        previous.start === start && previous.end === end
+          ? previous
+          : { end, start },
+      );
+    };
+    // A row hidden at this breakpoint has no width. Reveal the current link
+    // when it gets one.
+    const observer = new ResizeObserver(() => {
+      revealCurrentLink(row);
+      updateEdges();
+    });
+    updateEdges();
+    row.addEventListener("scroll", updateEdges, { passive: true });
+    observer.observe(row);
+    return () => {
+      row.removeEventListener("scroll", updateEdges);
+      observer.disconnect();
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    if (rowRef.current) revealCurrentLink(rowRef.current);
+  }, [pathname]);
+
+  const linkClass = ({ isActive }: { isActive: boolean }) =>
+    cn(
+      segmentedTabClass(isActive),
+      "flex items-center justify-center whitespace-nowrap no-underline",
+      props.fill ? "min-w-max flex-[1_0_0]" : "shrink-0",
+    );
+
+  return (
+    <nav
+      aria-label={props.ariaLabel}
+      className={cn(
+        segmentedTabsFrameClass,
+        "flex min-w-0 max-w-full",
+        !props.fill && "w-fit",
+      )}
+    >
+      {/* Pad the scrolling row, not the frame, so the last link keeps its
+          padding when the row is scrolled to the end. */}
+      <div
+        className={cn(
+          segmentedTabsInsetClass,
+          "relative flex min-w-0 flex-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        )}
+        ref={rowRef}
+        style={edgeFade(edges)}
+      >
+        {props.items.map((item) => (
+          <SiblingPageLink className={linkClass} item={item} key={item.to} />
+        ))}
+      </div>
+    </nav>
+  );
+}

package/src/client/components/SegmentedTabs.tsx

@@ -2,6 +2,23 @@ import { useId, type ReactNode } from "react";
 
 import { cn } from "../styles";
 
+/** Style the border and fill of the segmented pill track. */
+export const segmentedTabsFrameClass =
+  "rounded-lg border border-dashboard-border bg-dashboard-surface-panel";
+
+/** Style the spacing inside the segmented pill track. */
+export const segmentedTabsInsetClass = "gap-1 p-1";
+
+/** Style one tab or link in the segmented pill track. */
+export function segmentedTabClass(selected: boolean): string {
+  return cn(
+    "min-h-9 cursor-pointer rounded-md border-0 px-3 py-2 font-sans text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+    selected
+      ? "bg-dashboard-fill-strong text-dashboard-text"
+      : "bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-faint hover:text-dashboard-text",
+  );
+}
+
 /** Switch between related panels with equal-width tabs and keyboard navigation. */
 export function SegmentedTabs<const Value extends string>(props: {
   children: ReactNode;
@@ -16,7 +33,11 @@ export function SegmentedTabs<const Value extends string>(props: {
     <div className="grid min-w-0 gap-4">
       <div
         aria-label={props.label}
-        className="grid auto-cols-fr grid-flow-col gap-1 rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-1"
+        className={cn(
+          "grid auto-cols-fr grid-flow-col",
+          segmentedTabsFrameClass,
+          segmentedTabsInsetClass,
+        )}
         role="tablist"
       >
         {props.items.map((item, index) => (
@@ -24,10 +45,8 @@ export function SegmentedTabs<const Value extends string>(props: {
             aria-controls={`${id}-panel`}
             aria-selected={props.value === item.value}
             className={cn(
-              "min-h-9 min-w-0 cursor-pointer rounded-md border-0 px-3 py-2 font-sans text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
-              props.value === item.value
-                ? "bg-dashboard-fill-strong text-dashboard-text"
-                : "bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-faint hover:text-dashboard-text",
+              "min-w-0",
+              segmentedTabClass(props.value === item.value),
             )}
             id={`${id}-${item.value}`}
             key={item.value}

package/src/client/components/Select.tsx

@@ -0,0 +1,18 @@
+import type { SelectHTMLAttributes } from "react";
+import { cn } from "../styles";
+
+/** Match native form choices to the dashboard text controls. */
+export function Select({
+  className,
+  ...props
+}: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select
+      {...props}
+      className={cn(
+        "block min-h-11 w-full min-w-0 rounded border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-10 sm:text-sm",
+        className,
+      )}
+    />
+  );
+}

package/src/client/components/StatusChip.tsx

@@ -13,21 +13,20 @@ export type StatusChipTone =
 export type StatusChipSize = "default" | "compact";
 
 const toneClass: Record<StatusChipTone, string> = {
-  accent: "border-violet-300/20 bg-violet-300/[0.07] text-violet-100",
-  danger: "border-rose-400/25 bg-rose-400/10 text-rose-200",
-  info: "border-cyan-300/20 bg-cyan-300/[0.07] text-cyan-100",
-  neutral: "border-dashboard-border bg-dashboard-fill-faint text-dashboard-text-muted",
-  success: "border-emerald-400/25 bg-emerald-400/10 text-emerald-200",
-  warning: "border-amber-400/25 bg-amber-400/10 text-amber-100",
+  accent: "text-violet-300",
+  danger: "text-rose-300",
+  info: "text-cyan-300",
+  neutral: "text-dashboard-text-muted",
+  success: "text-emerald-300",
+  warning: "text-amber-300",
 };
 
 const sizeClass: Record<StatusChipSize, string> = {
-  compact:
-    "gap-1.5 px-2 py-1 font-mono text-2xs uppercase tracking-[0.08em]",
-  default: "px-2 py-1 font-mono text-xs uppercase tracking-[0.1em]",
+  compact: "text-xs",
+  default: "text-sm",
 };
 
-/** Render a compact status or kind label with shared tone and size contracts. */
+/** Show status as quiet text, not a button-shaped badge. */
 export function StatusChip(props: {
   children: ReactNode;
   className?: string;
@@ -37,13 +36,17 @@ export function StatusChip(props: {
   return (
     <span
       className={cn(
-        "inline-flex w-fit items-center rounded border",
+        "inline-flex w-fit items-center gap-1.5 font-sans font-medium normal-case leading-snug tracking-normal",
         sizeClass[props.size ?? "default"],
         toneClass[props.tone ?? "neutral"],
         props.className,
       )}
     >
-      {props.children}
+      <span
+        aria-hidden="true"
+        className="size-1.5 shrink-0 rounded-full bg-current"
+      />
+      <span className="block first-letter:uppercase">{props.children}</span>
     </span>
   );
 }

package/src/client/components/TextInput.tsx

@@ -3,36 +3,56 @@ import type { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { cn } from "../styles";
 
 const textControlClassName =
-  "block w-full rounded border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-sm text-dashboard-text focus:border-dashboard-focus focus:outline-none disabled:cursor-not-allowed disabled:opacity-50";
+  "block w-full rounded border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-sm text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-50";
 
 export type TextInputProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,
   "size"
 > & {
   className?: string;
+  size?: "default" | "comfortable";
 };
 
 /** Render the dashboard's standard single-line text control. */
-export function TextInput({ className, type = "text", ...props }: TextInputProps) {
+export function TextInput({
+  className,
+  type = "text",
+  size = "default",
+  ...props
+}: TextInputProps) {
   return (
     <input
       {...props}
-      className={cn(textControlClassName, className)}
+      className={cn(
+        textControlClassName,
+        size === "comfortable" && "min-h-11 text-base sm:min-h-10 sm:text-sm",
+        className,
+      )}
       type={type}
     />
   );
 }
 
 export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  prose?: boolean;
   className?: string;
 };
 
 /** Render the dashboard's standard multi-line text control. */
-export function TextArea({ className, ...props }: TextAreaProps) {
+export function TextArea({
+  className,
+  prose = false,
+  ...props
+}: TextAreaProps) {
   return (
     <textarea
       {...props}
-      className={cn(textControlClassName, "min-h-36 font-mono", className)}
+      className={cn(
+        textControlClassName,
+        "min-h-36",
+        prose ? "font-sans leading-relaxed" : "font-mono",
+        className,
+      )}
     />
   );
 }